/*
Theme Name: 일본여행 준비
Theme URI: https://japenet.net/
Author: japenet
Description: 일본여행 준비 전용 테마. 시각 언어를 일본 철도 노선도·시각표에서 가져온다(CLAUDE.md §3-6).
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: japenet
*/

/* =========================================================================
   색 (§3-6)
   hex는 아래 2개만. 나머지는 전부 color-mix()로 유도한다.
   회색도 white/black 혼합으로 만든다.
   ========================================================================= */
:root {
  --navy: #1B3A6B;   /* 하드코딩 hex 1/2 — 감청 */
  --red:  #E2513C;   /* 하드코딩 hex 2/2 — 주홍. CTA·성수기·주의 전용 */

  /* 무채색: white/black 혼합으로 유도 */
  --ink:        color-mix(in srgb, black 88%, white);
  --ink-soft:   color-mix(in srgb, black 62%, white);
  --ink-mute:   color-mix(in srgb, black 55%, white);   /* WCAG AA: bg-alt 위 4.50 */
  --line:       color-mix(in srgb, black 14%, white);
  --line-soft:  color-mix(in srgb, black 8%, white);
  --bg:         white;
  --bg-alt:     color-mix(in srgb, var(--navy) 3%, white);
  --bg-sunken:  color-mix(in srgb, var(--navy) 6%, white);

  /* 브랜드 파생 */
  --navy-ink:   color-mix(in srgb, var(--navy) 82%, black);
  --navy-soft:  color-mix(in srgb, var(--navy) 75%, white); /* WCAG AA: bg-alt 위 5.13 */
  --navy-line:  color-mix(in srgb, var(--navy) 22%, white);
  --navy-wash:  color-mix(in srgb, var(--navy) 8%, white);
  --red-ink:    color-mix(in srgb, var(--red) 76%, black);
  --red-line:   color-mix(in srgb, var(--red) 30%, white);
  --red-wash:   color-mix(in srgb, var(--red) 10%, white);

  --maxw: 760px;
  --gap: 1.5rem;
}

/* =========================================================================
   기본 (§3-6: 본문 17px / line-height 1.8, 웹폰트 추가 금지)
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  /* 시스템 폰트만 사용한다. 웹폰트를 추가하지 않는다(§3-6). */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo",
               "Noto Sans KR", "Malgun Gothic", sans-serif;
  font-size: 17px;
  line-height: 1.8;
  color: var(--ink);
  background: var(--bg);
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 모든 숫자는 자릿수가 흔들리지 않아야 한다(§3-6).
   이 사이트가 파는 것이 날짜와 요금이라 표 인상의 절반이 여기서 결정된다. */
table, .num, time, .stat, .fare, .date, .season-strip, td, th, .badge {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

h1, h2, h3, h4 { line-height: 1.35; margin: 2rem 0 .75rem; font-weight: 500; }
h1 { font-size: 1.75rem; letter-spacing: -.02em; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.08rem; }
p { margin: 0 0 1rem; }
a { color: var(--navy); text-underline-offset: .18em; }
a:hover { color: var(--red-ink); }
img { max-width: 100%; height: auto; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.15rem; }

/* =========================================================================
   헤더 / 내비 (§3-6: .nav-root로 한정 — flex가 메가 패널까지 먹지 않게)
   ========================================================================= */
.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.site-header .wrap { display: flex; align-items: center; gap: 1rem; min-height: 56px; }
.brand { font-weight: 500; color: var(--navy); text-decoration: none; font-size: 1.05rem; white-space: nowrap; }
.brand b { font-weight: 700; }

.site-nav { margin-left: auto; min-width: 0; }
/* flex는 .nav-root에만 건다. .site-nav ul 전체에 걸면 메가 패널 글자가 세로로 쪼개진다(§3-6). */
.site-nav .nav-root { display: flex; gap: 1.1rem; list-style: none; margin: 0; padding: 0; }
.site-nav .nav-root > li > a {
  text-decoration: none; color: var(--ink-soft); font-size: .93rem; white-space: nowrap;
}
.site-nav .nav-root > li > a:hover { color: var(--navy); }

/* 유틸리티 바 — 출처·갱신일 */
.utility-bar {
  background: var(--navy);
  color: color-mix(in srgb, white 88%, var(--navy));
  font-size: .78rem;
  line-height: 1.5;
}
.utility-bar .wrap { display: flex; gap: 1rem; padding-block: .35rem; flex-wrap: wrap; }
.utility-bar a { color: white; }

/* =========================================================================
   시즌 스트립 (§3-8 시그니처) — 1~12월 가로 노선도
   서버사이드 렌더. 성수기 주홍 굵은 선, 비수기 회색 가는 선.
   ========================================================================= */
.season-strip { margin: 0; padding: 1.5rem 0 1.25rem; }
.season-strip .eyebrow { margin-bottom: .9rem; }

.season-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  /* min-width:0 누락은 그리드 오버플로의 첫 의심 지점이다(§3-6) */
  min-width: 0;
  align-items: end;
  /* CLS 예약: 가장 높은 상태(마커 2단 + 라벨)보다 크게 잡는다(§3-6) */
  min-height: 96px;
}
.season-rail::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 30px;
  height: 2px;
  background: var(--line);
}
.season-seg {
  position: relative;
  min-width: 0;
  text-align: center;
  padding-bottom: 8px;
}
/* 구간선: 비수기 = 회색 가는 선(기본, ::before가 담당) */
.season-seg::after {
  content: "";
  position: absolute;
  left: -1px; right: -1px; bottom: 30px;
  height: 2px;
  background: transparent;
}
/* 성수기 = 주홍 굵은 선 */
.season-seg.is-peak::after { background: var(--red); height: 6px; bottom: 28px; }

.season-seg .m {
  display: block;
  font-size: .8rem;
  color: var(--ink-mute);
  line-height: 1;
  padding-top: 6px;
  position: relative;
  top: 30px;
}
.season-seg.is-now .m { color: var(--navy); font-weight: 700; }
.season-seg.is-now::before {
  content: "";
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 24px;
  width: 13px; height: 13px;
  border: 3px solid var(--navy);
  border-radius: 50%;
  background: var(--bg);
  z-index: 2;
}

/* 역 마커 — 노선 위에 찍고 각각 해당 시기 페이지로 링크 */
.season-stops { position: relative; height: 34px; margin: 0; padding: 0; list-style: none; }
.season-stop {
  position: absolute;
  transform: translateX(-50%);
  font-size: .72rem;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
}
.season-stop a { color: var(--ink-soft); text-decoration: none; }
.season-stop a:hover { color: var(--red-ink); text-decoration: underline; }
.season-stop::after {
  content: "";
  display: block;
  width: 7px; height: 7px;
  margin: 3px auto 0;
  background: var(--navy);
  border-radius: 50%;
}
.season-stop.is-peak::after { background: var(--red); }

.season-legend {
  display: flex; gap: 1.1rem; flex-wrap: wrap;
  font-size: .76rem; color: var(--ink-mute);
  margin-top: .85rem;
}
.season-legend i { display: inline-block; width: 20px; height: 4px; vertical-align: middle; margin-right: .35rem; }
.season-legend .k-peak i { background: var(--red); height: 6px; }
.season-legend .k-off  i { background: var(--line); height: 2px; }

/* =========================================================================
   섹션 공통 (§3-8: 영문 eyebrow + 섹션 배경 교대)
   ========================================================================= */
.eyebrow {
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--navy-soft); font-weight: 700; margin: 0 0 .35rem;
}
.section { padding: 2.25rem 0; }
.section + .section { border-top: 1px solid var(--line-soft); }
.section.alt { background: var(--bg-alt); }
.section > .wrap > h2 { margin-top: 0; }

/* 히어로 */
.hero { padding: 2.5rem 0 2rem; }
.hero h1 { margin: .4rem 0 .6rem; }
.hero .lede { color: var(--ink-soft); margin-bottom: 1.15rem; }
.hero-cta { display: flex; gap: .6rem; flex-wrap: wrap; }
.btn {
  display: inline-block; padding: .6rem 1.1rem; border-radius: 3px;
  text-decoration: none; font-size: .93rem; font-weight: 500;
  border: 1px solid var(--navy);
}
/* 흰 글자를 순수 주홍 위에 얹으면 3.83으로 AA 미달이다. red-ink(6.03)를 쓴다. */
.btn-primary { background: var(--red-ink); border-color: var(--red-ink); color: white; }
.btn-primary:hover { background: var(--red); border-color: var(--red); color: black; }
.btn-ghost { color: var(--navy); background: var(--bg); }
.btn-ghost:hover { background: var(--navy-wash); color: var(--navy); }

.badge {
  display: inline-block; font-size: .72rem; font-weight: 700;
  padding: .18rem .5rem; border-radius: 2px;
  background: var(--navy-wash); color: var(--navy);
}
.badge.warn { background: var(--red-wash); color: var(--red-ink); }

/* 데이터 규모 숫자 스트립 — 수록된 것만 센다(§3-8) */
.stat-strip { display: flex; gap: 1.75rem; flex-wrap: wrap; margin: 0; padding: 0; }
.stat-strip div { min-width: 0; }
.stat-strip dt { font-size: .78rem; color: var(--ink-mute); }
.stat-strip dd { margin: 0; font-size: 1.5rem; font-weight: 500; color: var(--navy); line-height: 1.25; }

/* 빠른 찾기 pill */
.pills { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin: 0; padding: 0; }
.pills a {
  display: inline-block; padding: .35rem .75rem;
  border: 1px solid var(--navy-line); border-radius: 999px;
  font-size: .86rem; text-decoration: none; color: var(--navy);
}
.pills a:hover { background: var(--navy-wash); }

/* 카드 그리드 */
.grid { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
.card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: .9rem 1rem;
  background: var(--bg);
  text-decoration: none;
  color: var(--ink);
  display: block;
}
.card:hover { border-color: var(--navy-line); background: var(--navy-wash); color: var(--ink); }
.card .t { font-weight: 500; color: var(--navy); display: block; }
.card .d { font-size: .82rem; color: var(--ink-mute); display: block; margin-top: .15rem; }

/* 절차 STEP — 번호 + SVG. 이미지 금지(§3-8) */
.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; }
.steps li {
  counter-increment: s; position: relative;
  padding: 0 0 1rem 2.5rem; min-width: 0;
}
.steps li::before {
  content: counter(s);
  position: absolute; left: 0; top: .1rem;
  width: 1.7rem; height: 1.7rem;
  border: 1px solid var(--navy-line); border-radius: 50%;
  display: grid; place-items: center;
  font-size: .82rem; font-weight: 700; color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.steps b { display: block; font-weight: 500; }
.steps span { font-size: .88rem; color: var(--ink-soft); }

/* =========================================================================
   표 (§3-6) — 모바일에서 래퍼 스크롤이 아니라 열 재배치로 푼다.
   .table-wrap 기본은 overflow: visible.
   overflow-x:auto를 기본으로 두면 overflow-y도 auto로 강제돼 sticky thead가 죽는다.
   실제로 넘칠 때만 서버 렌더에서 .is-scrollable을 부여한다.
   ========================================================================= */
.table-wrap { overflow: visible; }
.table-wrap.is-scrollable { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { padding: .55rem .6rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg-sunken);
  font-weight: 500; color: var(--navy-ink);
  border-bottom: 2px solid var(--navy-line);
}
td.num, th.num { text-align: right; }
tbody tr:hover td { background: var(--navy-wash); }

/* 확인일 리마크 (§3-5) */
.asof {
  font-size: .8rem; color: var(--ink-mute);
  border-left: 2px solid var(--navy-line);
  padding: .35rem 0 .35rem .7rem;
  margin: .7rem 0 0;
}
.asof.stale { border-left-color: var(--red); }

/* 목차 — 서버사이드 렌더(§3-6: JS DOM 삽입은 CLS 유발) */
.toc {
  border: 1px solid var(--line); border-radius: 3px;
  padding: .85rem 1rem; margin: 1.5rem 0; background: var(--bg-alt);
}
.toc > b { font-size: .82rem; color: var(--ink-mute); font-weight: 700; display: block; margin-bottom: .35rem; }
.toc ol { margin: 0; padding-left: 1.15rem; font-size: .9rem; }
.toc li { margin: .18rem 0; }

/* 제휴 고지 — 페이지 상단, 접힘 금지(§G8) */
.aff-notice {
  font-size: .8rem; color: var(--ink-soft);
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: .5rem .75rem; margin: 0 0 1.15rem;
}

/* FAQ 아코디언 */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { padding: .75rem 0; cursor: pointer; font-weight: 500; color: var(--navy); }
.faq .a { padding: 0 0 .85rem; font-size: .93rem; color: var(--ink-soft); }

/* 푸터 — 메가 푸터 5~6컬럼 */
.site-footer {
  margin-top: 2.5rem; border-top: 1px solid var(--line);
  background: var(--bg-alt); font-size: .87rem;
  padding: 2rem 0 5rem;
}
.foot-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.foot-grid h3 { font-size: .78rem; color: var(--ink-mute); margin: 0 0 .4rem; letter-spacing: .04em; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li { margin: .22rem 0; }
.foot-grid a { color: var(--ink-soft); text-decoration: none; }
.foot-grid a:hover { color: var(--navy); }
.foot-legal { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--ink-mute); font-size: .8rem; }

/* 모바일 하단 고정 바 */
.mobile-bar { display: none; }

/* =========================================================================
   375px — 표는 열 재배치로 푼다(§3-6)
   ========================================================================= */
@media (max-width: 560px) {
  body { font-size: 16px; }
  h1 { font-size: 1.45rem; }

  .site-nav .nav-root { gap: .7rem; overflow-x: auto; }
  .site-nav .nav-root > li > a { font-size: .86rem; }

  /* 표: 래퍼 스크롤 대신 행 단위 카드로 재배치.
     각 셀 앞에 헤더 라벨을 붙여 의미를 유지한다. */
  table.stack thead { position: absolute; left: -9999px; }
  table.stack tr {
    display: block;
    border: 1px solid var(--line);
    border-radius: 3px;
    margin-bottom: .6rem;
    padding: .35rem .6rem;
  }
  table.stack td {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: .5rem;
    border: 0;
    padding: .3rem 0;
    min-width: 0;
  }
  table.stack td::before {
    content: attr(data-th);
    color: var(--ink-mute);
    font-size: .82rem;
  }
  table.stack td.num { text-align: left; }

  .stat-strip { gap: 1.1rem; }
  .stat-strip dd { font-size: 1.25rem; }

  .season-rail { min-height: 88px; }
  .season-seg .m { font-size: .68rem; }

  /* 모바일 하단 고정 바 */
  .mobile-bar {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    background: var(--bg); border-top: 1px solid var(--line);
    padding: .4rem .6rem calc(.4rem + env(safe-area-inset-bottom));
    gap: .4rem;
  }
  .mobile-bar a {
    flex: 1; min-width: 0; text-align: center;
    font-size: .8rem; padding: .45rem .2rem;
    text-decoration: none; color: var(--navy);
    border: 1px solid var(--navy-line); border-radius: 3px;
  }
  .mobile-bar a.primary { background: var(--red-ink); border-color: var(--red-ink); color: white; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}