/* 단풍은 언제? · 첫눈은 언제? — 한 틀의 스타일. 근거는 docs/컨셉시트.md 「2026-09-28 지도 전환」 절.
   주인공은 지도다(대표 지시 2026-09-28: 글이 아니라 한눈에 지도). 한 화면에 지도·가까운 곳 결과·공유가 다 들어가고
   페이지 스크롤은 없다(390×844 · 1440×900 실측은 tools/shots.mjs). 목록·출처는 대화상자 안에서만 스크롤한다.
   두 제품은 같은 골격, 다른 밤: 단풍 = 산속 밤(송진빛 흙), 첫눈 = 겨울 밤(얼음빛 남색). radius 0 · 그림자 0 · 외부 폰트 0. */

:root {
  --lh: 1.44;
  --t0: 12px;
  --t1: 14px;
  --t2: 16px;
  --t3: 21px;
  --t4: 28px;
  --고딕: system-ui, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --명조: AppleMyungjo, 'Nanum Myeongjo', Batang, serif;
}

/* 단풍 — 산속 밤. 단계 색은 잎이 물드는 순서(초록기 → 노랑 → 주홍 → 마른 갈색). */
.p-fall {
  --지면: #1b2119;
  --육지: #2e3b2c;
  --해안: #4a5c43;
  --글: #f4ecdc;
  --연글: #c9c0aa;
  --선: rgba(244, 236, 220, 0.34);
  --오늘선: #ffd79a;
  --st-came: #ffffff;
  --b0: #e2502f;
  --b1: #ee7a2e;
  --b2: #e7ae3f;
  --b3: #b9b14f;
  --b4: #7f9c57;
  --past: #6e6259;
}
/* 첫눈 — 겨울 밤. 평년일이 가까울수록 밝아진다(먹빛 남색 → 얼음색 → 흰색). */
.p-snow {
  --지면: #0e1621;
  --육지: #1d2b3b;
  --해안: #35495f;
  --글: #eef3f8;
  --연글: #b3c1cf;
  --선: rgba(238, 243, 248, 0.32);
  --오늘선: #ffe8a3;
  --st-came: #ffe8a3;
  --b0: #f4f9ff;
  --b1: #bfdcf4;
  --b2: #86b6de;
  --b3: #5b8cb8;
  --b4: #3f6690;
  --past: #6d6880;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--지면);
  color: var(--글);
  font: 400 var(--t1) / var(--lh) var(--고딕);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
a { color: inherit; }
button, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--오늘선); outline-offset: 2px; }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 8px; top: 8px; z-index: 9; padding: 6px 10px; background: var(--글); color: var(--지면); }

/* ── 골격: 한 화면(100dvh) 격자 ─────────────────────────── */
.app {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  max-width: 1440px;
  margin: 0 auto;
}
.top { grid-row: 1; }
.sp { grid-row: 2; }
.stage { grid-row: 3; }
.foot { grid-row: 4; }
.stage {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto auto;
  min-height: 0;
}

/* 머리 */
.top {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 12px;
  padding: 10px 16px 2px;
}
.top__title { margin: 0; font: 600 var(--t4) / 1.1 var(--명조); letter-spacing: -0.01em; }
.top__sub { grid-column: 1 / -1; grid-row: 2; margin: 2px 0 0; font-size: var(--t0); color: var(--연글); }
.top__alt {
  grid-column: 2; grid-row: 1;
  font-size: var(--t0); color: var(--연글); text-decoration: none;
  border-bottom: 1px solid var(--선); padding-bottom: 1px;
}
.top__alt::after { content: ' →'; }

/* 나무 고르기 */
.sp { display: flex; gap: 6px; margin: 0; padding: 6px 16px 0; border: 0; min-width: 0; }
.sp__legend { position: absolute; left: -999px; }
.sp__opt { position: relative; }
.sp__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sp__opt span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 6px 9px; font-size: var(--t0);
  border: 1px solid var(--선); color: var(--연글);
}
.sp__opt input:checked + span { background: var(--글); color: var(--지면); border-color: var(--글); font-weight: 600; }
.sp__opt input:focus-visible + span { outline: 2px solid var(--오늘선); outline-offset: 2px; }

/* ── 지도 ─────────────────────────────────────────────── */
.map { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); margin: 0; min-height: 0; overflow: hidden; }
.map__svg { display: block; grid-row: 2; grid-column: 1; width: 100%; height: 100%; min-height: 0; }
.land { fill: var(--육지); stroke: var(--해안); stroke-width: 1.4; stroke-linejoin: round; }
.dokdo { fill: var(--육지); stroke: var(--해안); stroke-width: 2; }
.dokdo__name { fill: var(--연글); font-size: 20px; text-anchor: middle; }
.inset { fill: none; stroke: var(--선); stroke-width: 1; vector-effect: non-scaling-stroke; }
.inset__name { fill: var(--연글); font-size: 20px; }
.inset__note { fill: var(--연글); font-size: 18px; }
.query-place { cursor: pointer; outline: none; }
.query-place__dot { fill: var(--오늘선); stroke: var(--지면); stroke-width: 2; vector-effect: non-scaling-stroke; }
.query-place__hit { fill: transparent; stroke: none; pointer-events: all; }
.query-place:focus-visible .query-place__dot { stroke: var(--글); stroke-width: 4; }
.iso { fill: none; stroke: var(--선); stroke-width: 2; stroke-dasharray: 7 7; vector-effect: non-scaling-stroke; }
.iso__label { fill: var(--연글); font-size: 24px; text-anchor: middle; font-variant-numeric: tabular-nums; }
.front { fill: none; stroke: var(--오늘선); stroke-width: 3; vector-effect: non-scaling-stroke; }
.front__label { fill: var(--오늘선); font-size: 26px; font-weight: 600; text-anchor: middle; }
.me { fill: none; stroke: var(--글); stroke-width: 3; vector-effect: non-scaling-stroke; }

.pt { cursor: pointer; outline: none; }
.pt__dot { fill: var(--b2); stroke: var(--지면); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
[data-bin='0'] > .pt__dot { fill: var(--b0); }
[data-bin='1'] > .pt__dot { fill: var(--b1); }
[data-bin='2'] > .pt__dot { fill: var(--b2); }
[data-bin='3'] > .pt__dot { fill: var(--b3); }
[data-bin='4'] > .pt__dot { fill: var(--b4); }
.pt[data-state='past'] > .pt__dot { fill: var(--past); }
.pt[data-state='came'] > .pt__dot { fill: var(--st-came); }
.pt[data-state='near'] > .pt__dot { stroke: var(--오늘선); stroke-width: 3.5; }
.pt.is-on > .pt__dot, .pt:focus-visible > .pt__dot { stroke: var(--글); stroke-width: 3.5; }
.has-band .land:not(.land--inset) { fill: none; }

/* 라벨 — 지면색 쪽지에 단계 색 띠. 위치는 app.js 가 CSSOM 으로 준다. */
.labels { position: absolute; inset: 0; pointer-events: none; }
.lab {
  position: absolute;
  padding: 0 4px 0 3px;
  font-size: 12px; line-height: 17px;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.62);
  border-left: 3px solid var(--b2);
  color: var(--글);
  font-variant-numeric: tabular-nums;
}
.lab b { font-weight: 600; }
.lab[data-bin='0'] { border-left-color: var(--b0); }
.lab[data-bin='1'] { border-left-color: var(--b1); }
.lab[data-bin='3'] { border-left-color: var(--b3); }
.lab[data-bin='4'] { border-left-color: var(--b4); }
.lab[data-state='past'] { border-left-color: var(--past); color: var(--연글); }
.lab[data-state='near'] { outline: 1px solid var(--오늘선); }
.lab[data-state='came'] { border-left-color: var(--st-came); }
.lab.is-on { background: var(--글); color: var(--지면); }
.map__band { position: absolute; left: 0; top: 0; pointer-events: none; }
.map__note {
  grid-row: 1; grid-column: 1; margin: 8px 12px 0;
  font-size: var(--t0); color: var(--오늘선);
}

/* ── 결과 카드 ─────────────────────────────────────────── */
.card { padding: 6px 16px 4px; border-top: 1px solid var(--선); outline: none; }
.card p { margin: 0; }
.card__where { font-size: var(--t0); color: var(--연글); }
.card__name { font: 600 var(--t3) / 1.25 var(--명조); }
.card__region { font: 400 var(--t0) / 1 var(--고딕); color: var(--연글); margin-left: 4px; }
.card__date { font-size: var(--t2); }
.card__date b { font-weight: 600; }
.card__dday {
  display: inline-block; margin-left: 6px; padding: 0 6px;
  font-weight: 600; font-variant-numeric: tabular-nums;
  background: var(--b2); color: #111;
}
.card__dday:empty { display: none; }
.card__dday[data-bin='0'] { background: var(--b0); }
.card__dday[data-bin='1'] { background: var(--b1); }
.card__dday[data-bin='3'] { background: var(--b3); }
.card__dday[data-bin='4'] { background: var(--b4); }
.p-snow .card__dday[data-bin='4'] { color: var(--글); }
.card__dday[data-state='past'] { background: var(--past); color: var(--글); }
.card__dday[data-state='came'] { background: var(--st-came); }
.card__more { font-size: var(--t0); color: var(--연글); }

/* 도구 줄 */
.tools { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 16px; align-items: center; }
.btn {
  min-height: 44px; padding: 6px 11px;
  background: transparent; border: 1px solid var(--선); cursor: pointer;
  font-size: var(--t1);
}
.btn:hover { border-color: var(--글); }
.btn--me { background: var(--글); color: var(--지면); border-color: var(--글); font-weight: 600; }
.pick { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 0 0 8px; border: 1px solid var(--선); }
.pick__label { font-size: var(--t0); color: var(--연글); }
.pick select { background: var(--지면); border: 0; padding: 6px; min-height: 44px; }

.status {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%);
  max-width: calc(100% - 32px); margin: 0; padding: 6px 12px;
  background: var(--글); color: var(--지면); font-size: var(--t0);
  z-index: 5;
}
.status:empty { display: none; }

/* 범례 */
.legend { padding: 0 16px 4px; }
.legend__keys { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 0; padding: 0; list-style: none; font-size: var(--t0); color: var(--연글); }
.key { display: inline-flex; align-items: center; gap: 4px; }
.key__dot { width: 9px; height: 9px; background: var(--b2); }
.key[data-bin='0'] .key__dot { background: var(--b0); }
.key[data-bin='1'] .key__dot { background: var(--b1); }
.key[data-bin='3'] .key__dot { background: var(--b3); }
.key[data-bin='4'] .key__dot { background: var(--b4); }
.key--past .key__dot { background: var(--past); }
.key--near .key__dot { background: transparent; outline: 2px solid var(--오늘선); outline-offset: -2px; }
.key--came .key__dot { background: var(--st-came); }
.legend__line { margin: 1px 0 0; font-size: var(--t0); color: var(--연글); }
.legend__stroke { display: inline-block; width: 18px; margin-right: 6px; vertical-align: middle; border-top: 3px solid var(--오늘선); }

/* 출처 한 줄 */
.foot { padding: 3px 16px 8px; border-top: 1px solid var(--선); }
.foot__src { margin: 0; font-size: var(--t0); line-height: 1.4; color: var(--연글); }
.foot__src a { color: var(--글); }

/* ── 대화상자(목록·출처·규칙) — 안에서만 스크롤한다 ─────── */
.more {
  width: min(760px, calc(100% - 20px));
  max-height: 88dvh;
  padding: 0;
  border: 1px solid var(--선);
  background: var(--지면);
  color: var(--글);
}
.more::backdrop { background: rgba(0, 0, 0, 0.6); }
.more__close { position: sticky; top: 0; float: right; margin: 8px; background: var(--지면); }
.more__body { padding: 8px 16px 16px; }
.more h2 { margin: 6px 0 6px; font: 600 var(--t3) / 1.3 var(--명조); }
.more h3 { margin: 16px 0 4px; font-size: var(--t2); }
.more__lede, .more__now { font-size: var(--t1); color: var(--연글); }
.more__scroll { overflow-x: auto; }
.grid { border-collapse: collapse; width: 100%; font-size: var(--t1); font-variant-numeric: tabular-nums; }
.grid th, .grid td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--선); text-align: left; vertical-align: top; }
.grid thead th { font-size: var(--t0); color: var(--연글); font-weight: 400; }
.grid .none { color: var(--연글); }
.grid time { white-space: nowrap; }
.row__sub { display: block; font-size: var(--t0); color: var(--연글); font-weight: 400; }
.rules, .srcs { margin: 0; padding-left: 18px; font-size: var(--t1); }
.src__title { margin: 6px 0 0; }
.src__meta { margin: 0; font-size: var(--t0); color: var(--연글); }
.cite, .legal { font-size: var(--t0); color: var(--연글); }

/* ── 넓은 화면: 왼쪽 지도 · 오른쪽 결과 ─────────────────── */
@media (min-width: 960px) {
  .app {
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      'map top'
      'map sp'
      'map card'
      'map tools'
      'map legend'
      'map foot';
    column-gap: 8px;
  }
  .stage { display: contents; }
  .top { grid-area: top; padding: 28px 24px 4px; }
  .sp { grid-area: sp; padding: 12px 24px 0; }
  .map { grid-area: map; }
  .card { grid-area: card; margin-top: 14px; padding: 14px 24px 8px; }
  .tools { grid-area: tools; padding: 8px 24px; }
  .legend { grid-area: legend; align-self: start; padding: 10px 24px 12px; }
  .foot { grid-area: foot; padding: 8px 24px 16px; }
  .top__title { font-size: 40px; }
  .card__name { font-size: 28px; }
  .card__date { font-size: 18px; }
  .lab { font-size: 13px; line-height: 18px; }
}

/* 공유 카드 렌더(?og, tools/shots.mjs 전용) — 단계 색 대신 한 색, 조작 도구 숨김 */
.og .tools, .og .status, .og .legend, .og .sp, .og .skip { display: none; }
.og .card__dday { display: none; }

/* 짧은 화면에서는 지도와 조작부를 압축하지 않는다. 보통 세로 화면은 한 화면을 유지한다.
   데스크톱 확대·작은 세로/가로 화면은 세로 스크롤로 모두 접근한다(실기기 검증 별도). */
@media (max-width: 959px) and (max-height: 620px) {
  .app { height: auto; min-height: 100vh; min-height: 100dvh; }
  .stage { grid-template-rows: clamp(240px, 55dvh, 460px) auto auto auto; }
}

/* Date exploration stays within the fall product; the snow layout is unchanged. */
.sr-only { position: absolute; top: 0; left: 0; margin: 0; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.p-fall .stage { grid-template-rows: minmax(180px, 1fr) auto auto auto auto; }
.p-fall .map { grid-template-rows: auto minmax(0, 1fr) auto; }
.map-query-tools { grid-row: 3; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 12px 4px; }
.map-query-button { min-height: 44px; padding: 5px 8px; font-size: var(--t0); }
#map-query-help { max-width: 210px; font-size: var(--t0); line-height: 1.3; color: var(--연글); text-align: right; }
#map-svg:focus { outline: none; }
#map-svg:focus-visible:not([data-focus-origin='pointer']), #map-svg[data-focus-origin='keyboard']:focus { outline: 2px solid var(--오늘선); outline-offset: -3px; }
.query-cursor { pointer-events: none; fill: none; stroke: var(--글); stroke-width: 2; vector-effect: non-scaling-stroke; }
.query-cursor circle { fill: var(--지면); fill-opacity: 0.65; }
.map-tooltip { position: fixed; z-index: 8; width: max-content; max-width: min(280px, calc(100vw - 16px)); padding: 9px 12px; background: var(--글); color: var(--지면); border: 1px solid var(--지면); pointer-events: none; font-size: 13px; line-height: 1.4; }
.map-tooltip strong, .map-tooltip span, .map-tooltip small { display: block; }
.map-tooltip strong { font-size: 16px; }
.map-tooltip small { font-size: 12px; margin-top: 3px; }
.season-panel { border-top: 1px solid var(--선); padding: 5px 16px 6px; min-width: 0; }
.season-date-row { display: flex; align-items: flex-end; gap: 6px; }
.season-date-label { display: flex; flex-direction: column; min-width: 0; flex: 1; font-size: var(--t0); color: var(--연글); }
.season-date-label input { display: block; margin-top: 2px; width: 100%; min-width: 0; min-height: 44px; border: 1px solid var(--선); padding: 6px 8px; color: var(--글); background: var(--지면); font: inherit; font-size: var(--t1); }
.season-step { padding: 6px 9px; min-width: 48px; font-size: var(--t0); }
.season-scene { position: relative; min-width: 0; min-height: 0; margin-top: 4px; }
#season-tree { display: block; width: 100%; height: 240px; }
.season-caption, .season-limit { margin: 0; font-size: var(--t0); line-height: 1.35; }
.season-caption { color: var(--글); }
.season-limit { color: var(--연글); }
#season-unavailable { min-height: 240px; margin: 0; padding: 70px 10px 8px; font-size: var(--t0); color: var(--연글); text-align: center; }
.p-fall .og .season-panel, .og .season-panel, .og .map-query-tools { display: none; }
@media (min-width: 960px) {
  .p-fall { --t0: clamp(12px, .9vw, 18px); --t1: clamp(14px, 1.1vw, 22px); }
  .p-fall .app { max-width: none; min-height: 820px; grid-template-columns: minmax(0, 1.5fr) minmax(420px, 1fr); grid-template-rows: auto auto auto auto minmax(260px, 1fr) auto auto; grid-template-areas: 'map top' 'map sp' 'map card' 'map tools' 'map season' 'map legend' 'map foot'; }
  .p-fall .top { padding: 18px 20px 4px; }
  .p-fall .top__title { font-size: clamp(32px, 2.7vw, 60px); }
  .p-fall .sp { padding: 8px 20px 0; }
  .p-fall .card { margin-top: 8px; padding: 10px 20px 4px; }
  .p-fall .card__name { font-size: clamp(24px, 2vw, 42px); }
  .p-fall .card__date { font-size: clamp(18px, 1.4vw, 28px); }
  .season-panel { grid-area: season; display: grid; grid-template-rows: auto minmax(180px, 1fr) auto auto; padding: 8px 20px; }
  #season-tree { height: 100%; }
  #season-unavailable { height: 100%; min-height: 180px; }
  .p-fall .tools { padding: 6px 20px; }
  .p-fall .legend { padding: 6px 20px; }
  .p-fall .foot { padding: 8px 20px 12px; }
  .p-fall .lab { font-size: clamp(13px, 1vw, 20px); line-height: 1.35; }
  .map-query-tools { padding: 4px 18px 12px; }
  #map-query-help { max-width: none; }
}
@media (max-width: 959px) {
  .p-fall .app { height: auto; min-height: 100vh; min-height: 100dvh; }
  .p-fall .stage { grid-template-rows: clamp(330px, 46dvh, 520px) auto auto auto auto; }
}
@media (prefers-reduced-motion: reduce) {
  .season-panel { scroll-behavior: auto; }
}
html:not(.js) .season-panel, html:not(.js) .map-query-tools { display: none; }

/* Optional place card: external navigation requires the explicit link. */
.p-fall .lab { pointer-events: auto; cursor: pointer; }
.place-preview { width: min(420px, calc(100% - 24px)); max-height: min(86dvh, 620px); overflow: auto; box-sizing: border-box; padding: 16px; border: 1px solid var(--선); background: var(--지면); color: var(--글); }
.place-preview::backdrop { background: rgba(0, 0, 0, .6); }
.place-preview__close { display: block; margin: 0 0 12px auto; }
.place-preview h2 { margin: 0 0 4px; font: 600 28px / 1.3 var(--명조); }
.place-preview p { margin: 6px 0 12px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.place-preview .place-preview__date { font-size: 20px; }
.place-preview__region, .place-preview__note { color: var(--연글); }
.place-preview__link { display: flex; align-items: center; justify-content: center; min-height: 44px; color: var(--글); text-decoration: underline; text-underline-offset: 3px; }
.place-preview__link:not([href]) { display: none; }