/*
Theme Name: Honest Yen Edit
Description: Honest Yen — sourced, dated Japan travel costs. Clean ledger editorial.
Version: 1.0
Author: Honest Yen
Text Domain: honestyen-edit
*/

:root {
  --bg: #fcfcf9;
  --panel: #f4f5ef;
  --ink: #1a2420;
  --body: #333d38;
  --sub: #55605a;
  --mute: #8b958f;
  --hair: #e3e6dd;
  --line: #1a2420;
  --accent: #1e6e50;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--body); font-family: var(--sans); font-size: 16.5px; line-height: 1.75; -webkit-font-smoothing: antialiased; }
::selection { background: var(--accent); color: #fff; }
a { color: inherit; text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--accent); }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--serif); color: var(--ink); text-wrap: balance; font-weight: 600; }
p { text-wrap: pretty; }

.hy-wrap { max-width: 720px; margin: 0 auto; padding: 0 20px; }
.hy-label { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }

/* 헤더 */
.hy-head { border-bottom: 1px solid var(--hair); background: var(--bg); }
.hy-head__in { max-width: 960px; margin: 0 auto; padding: 16px 20px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.hy-logo { font-family: var(--serif); font-size: 21px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.hy-logo em { font-style: normal; color: var(--accent); }
.hy-nav { display: flex; gap: 20px; font-size: 14px; }
.hy-nav a { white-space: nowrap; }

/* 히어로 (홈) */
.hy-hero { text-align: center; padding: 84px 20px 64px; max-width: 820px; margin: 0 auto; }
.hy-hero h1 { font-size: clamp(38px, 6vw, 64px); line-height: 1.12; letter-spacing: -.015em; margin-top: 18px; }
.hy-hero p { max-width: 560px; margin: 26px auto 0; font-size: 17px; color: var(--sub); }
.hy-hero .rule { width: 56px; height: 3px; background: var(--accent); margin: 40px auto 0; }

/* 글 목록 */
.hy-list { border-top: 1px solid var(--line); max-width: 720px; margin: 0 auto; padding: 0 20px; }
.hy-item { padding: 30px 0; border-bottom: 1px solid var(--hair); }
.hy-item__meta { display: flex; gap: 14px; align-items: baseline; font-family: var(--mono); font-size: 12px; color: var(--mute); }
.hy-item__meta .asof { color: var(--accent); }
.hy-item h2 { font-size: clamp(22px, 3vw, 30px); line-height: 1.25; margin-top: 10px; }
.hy-item p { font-size: 15px; color: var(--sub); margin-top: 10px; }
.hy-more { font-family: var(--mono); font-size: 12.5px; color: var(--accent); border-bottom: 1px solid var(--accent); display: inline-block; margin-top: 14px; }

/* 글 상세 */
.hy-post-head { max-width: 720px; margin: 0 auto; padding: 56px 20px 0; }
.hy-post-head .back { font-family: var(--mono); font-size: 12px; color: var(--mute); }
.hy-post-head h1 { font-size: clamp(30px, 5vw, 46px); line-height: 1.16; margin-top: 22px; }
.hy-post-head__meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; font-family: var(--mono); font-size: 12px; color: var(--mute); }
.hy-post-head__meta .asof { color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 3px 10px; }

.hy-body { max-width: 720px; margin: 40px auto 0; padding: 0 20px; }
.hy-body p { margin-top: 16px; }
.hy-body h2 { font-size: clamp(23px, 3.4vw, 30px); margin-top: 52px; padding-top: 24px; border-top: 1px solid var(--line); }
.hy-body h3 { font-size: 19px; margin-top: 32px; }
.hy-body ul, .hy-body ol { margin: 16px 0 0 22px; }
.hy-body a { color: var(--accent); border-bottom: 1px solid rgba(30,110,80,.4); }
.hy-body table { width: 100%; border-collapse: collapse; margin-top: 22px; font-size: 14px; background: var(--panel); }
.hy-body th { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--mute); text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); font-weight: 500; }
.hy-body td { padding: 10px 14px; border-bottom: 1px solid var(--hair); font-family: var(--mono); font-size: 13px; }
.hy-body blockquote { background: var(--panel); border-left: 3px solid var(--accent); padding: 14px 18px; margin-top: 20px; font-size: 15px; color: var(--sub); }
.hy-body sup { font-family: var(--mono); font-size: 10px; color: var(--accent); }
.hy-body img { border-radius: 8px; margin-top: 22px; }
.hy-body em:first-child { color: var(--mute); font-size: 14px; }

/* 이전/다음 + 푸터 */
.hy-post-nav { max-width: 720px; margin: 64px auto 0; padding: 22px 20px 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14.5px; }
.hy-foot { border-top: 1px solid var(--line); margin-top: 88px; background: var(--panel); }
.hy-foot__in { max-width: 960px; margin: 0 auto; padding: 48px 20px 32px; }
.hy-foot h2 { font-size: clamp(26px, 4vw, 38px); }
.hy-foot p { color: var(--sub); font-size: 14.5px; margin-top: 12px; max-width: 520px; }
.hy-foot__links { display: flex; gap: 20px; margin-top: 28px; font-size: 14px; flex-wrap: wrap; }
.hy-foot .credit { font-family: var(--mono); font-size: 11px; color: var(--mute); border-top: 1px solid var(--hair); margin-top: 32px; padding-top: 16px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; }

/* 페이지 */
.hy-page { max-width: 720px; margin: 56px auto 0; padding: 0 20px; }
.hy-page h1 { font-size: clamp(30px, 5vw, 44px); }
.hy-page .content { margin-top: 28px; }
.hy-page .content h2 { font-family: var(--serif); font-size: 24px; margin-top: 40px; }
.hy-page .content p { margin-top: 14px; }
.hy-page .content ul { margin: 14px 0 0 22px; }

@media (max-width: 640px) {
  body { font-size: 15.5px; }
  .hy-hero { padding: 52px 20px 40px; }
  .hy-hero p { font-size: 15.5px; }
  .hy-item { padding: 24px 0; }
  /* 표 스크롤은 .table-scroll 래퍼가 담당 — display:block은 셀 정렬을 깨뜨려 제거 */
  .hy-post-head { padding-top: 36px; }
}


/* ══ 모바일 최적화 (2026-08-17) ══════════════════════════════════
   자동 발행 글은 맨 <table>·긴 URL로 들어온다. 디자이너 마크업 클래스에
   의존하지 않고 본문 요소 자체를 안전하게 처리한다. */

/* 페이지 가로 스크롤 차단. clip을 쓰는 이유: hidden은 sticky 헤더를 깨뜨린다. */
body { overflow-x: hidden; overflow-x: clip; }

/* 긴 URL·영문이 본문 밖으로 밀려나 가로 스크롤을 만드는 것 방지 */
.hy-body, .hy-body li, .hy-body p, .hy-body td, .hy-body th { overflow-wrap: anywhere; }
/* 한글은 단어 중간에서 끊지 않는다 (｢유튜브 직/접 결제｣ 같은 깨짐 방지) */
.hy-body table, .hy-body li, .hy-body p { word-break: keep-all; }

/* 표: 좁은 화면에서 눌리지 않게 가로 스크롤 컨테이너로 */
.table-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  max-width: 100%; margin: 18px 0 0;
}
.table-scroll table { margin: 0; }
/* 디자이너 마크업(.compare-table)이 이미 스크롤 컨테이너면 중첩시키지 않는다 */
.compare-table .table-scroll { overflow: visible; }

@media (max-width: 640px) {
  /* 셀이 한 글자씩 접히지 않도록 최소 폭 확보 — 넘치는 만큼만 가로 스크롤 */
  .table-scroll table { min-width: 520px; }
  .hy-body table { font-size: 14px; }
  .hy-body th, .hy-body td { padding: 10px 12px; }
  /* 표가 스크롤된다는 것을 알리는 오른쪽 페이드 */
  .table-scroll {
    background: linear-gradient(to left, rgba(0,0,0,.06), transparent 24px);
    border-radius: 8px;
  }
}


/* ── 카테고리 바 + 검색 (2026-08-24 통일) ────────────────── */
.catbar { border-bottom: 1px solid rgba(128,128,128,.22); }
.catbar__in { max-width: 1096px; margin: 0 auto; padding: 10px 20px;
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.catbar a.cat { padding: 7px 14px; border: 1.4px solid rgba(128,128,128,.32);
  border-radius: 3px; font-size: 14.5px; font-weight: 600; white-space: nowrap;
  text-decoration: none; }
.catbar a.cat:hover,
.catbar a.cat.is-active { border-color: currentColor; }
.catbar .catsearch { margin-left: auto; display: flex; }
.catbar .catsearch input { font: inherit; font-size: 14px; padding: 7px 12px;
  border: 1.4px solid rgba(128,128,128,.32); border-radius: 3px;
  background: transparent; color: inherit; width: 168px; }
.catbar .catsearch input::placeholder { color: rgba(128,128,128,.85); }
@media (max-width: 640px) {
  .catbar__in { gap: 6px; padding: 9px 14px; }
  .catbar a.cat { font-size: 13.5px; padding: 6px 11px; }
  .catbar .catsearch { margin-left: 0; width: 100%; }
  .catbar .catsearch input { width: 100%; }
}

/* ── 목록 썸네일 (2026-08-29 첫인상 보강) ─────────────────────── */
.hy-item { display: flex; gap: 22px; align-items: flex-start; justify-content: space-between; }
.hy-item__body { flex: 1; min-width: 0; }
.hy-item__thumb { flex: none; }
.hy-item__thumb img { width: 168px; height: auto; aspect-ratio: 16/10; object-fit: cover;
  border-radius: 6px; border: 1px solid var(--hair); display: block; }
@media (max-width: 640px) {
  .hy-item { gap: 14px; }
  .hy-item__thumb img { width: 104px; aspect-ratio: 1/1; }
}

/* ── 글 상단 히어로 일러스트 (2026-08-30) — .hy-hero는 홈 타이틀용이라 별도 클래스 */
.hy-postimg { margin: 26px 0 6px; }
.hy-postimg img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--hair); display: block; }