/* ── 캠핑각 토큰 ──────────────────────────────────────────────
   정본은 docs/mockup/home.html 의 :root 주석 — 값과 대비 주석을 그대로 옮겼다.
   대비는 WCAG 2.x 상대휘도로 계산한 값(scratch 스크립트, 2026-10-14). "A / B" = paper / surface 위.
   UI 강조색은 밤하늘 남색 — 판정 색(초록·호박·빨강)과 겹치지 않게 뺐다(stock-insight 가 보라를 쓴 이유와 같다). */
:root {
  --paper: #f5f6f2;        /* 바탕. 크림(#F4F1EA) 대신 서늘한 세이지 흰색 */
  --surface: #ffffff;
  --sunken: #eaede6;       /* 칩·표 머리 면 */
  --ink: #18211c;          /* 15.2 / 16.5 · sunken 13.9 — 본문 */
  --ink-2: #45514a;        /* 7.7 / 8.3 · sunken 7.0 — 부제·메타 */
  --ink-3: #5b675f;        /* 5.4 / 5.9 · sunken 5.0 — 작은 보조 글자 */
  --line: #dde2da;         /* 비텍스트. 행 구분선 */
  --line-strong: #808b83;  /* 비텍스트 3.5:1 (surface) — 입력·칩 테두리(1.4.11) */
  --accent: #2c4a96;       /* 7.7 / 8.3 · accent-soft 6.8 · 흰 글자 8.3 — 링크·주 버튼 하나 */
  --accent-soft: #e4e9f6;  /* ink 13.6 */
  --on-accent: #ffffff;    /* 8.3 */
  --ok: #1d6845;   --ok-soft: #e1efe6;     /* 쾌적 — soft 위 5.7 · surface 6.7 */
  --warn: #855400; --warn-soft: #fbf0d9;   /* 준비 필요 — soft 위 5.7 · surface 6.4 */
  --bad: #b42318;  --bad-soft: #fde8e6;    /* 어려움 — soft 위 5.6 · surface 6.6. 빨강은 위험 뜻으로만 */
  --night: #16203d;        /* 밤 패널. 두 테마 공통 */
  --on-night: #ffffff;     /* 16.1 */
  --on-night-2: #b9c4ec;   /* 9.3 */
  --t-cold: #5b7fd6; --t-cool: #7f9fe6; --t-mild: #a9bdf0; --t-warm: #d6dff8;  /* 밤 띠 칸(비텍스트) */
  --t-none: #3a4566;       /* 밤 띠의 예보 없는 칸(비텍스트, 새 색) — night 위 1.6:1, 빈 칸이라 일부러 낮춤. 글자로 쓰지 않는다 */
  /* 지도 점 — 목업 map.html 값. 흰 테두리로 타일과 분리(비텍스트). OSM 타일이 늘 밝아 두 테마 공통 */
  --dot-ok: #2f8a5a; --dot-warn: #c98a00; --dot-bad: #d0392b; --dot-none: #8a948e;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #111814; --surface: #18211c; --sunken: #212c26;
    --ink: #e8eee9;        /* 15.3 / 14.0 · sunken 12.3 */
    --ink-2: #c0cbc3;      /* 10.8 / 9.9 · sunken 8.7 */
    --ink-3: #9aa79f;      /* 7.2 / 6.6 · sunken 5.8 */
    --line: #2c3831; --line-strong: #66746b;   /* 3.4:1 (surface) */
    --accent: #9db4f5;     /* 8.8 / 8.1 · accent-soft 7.2 · sunken 7.1 */
    --accent-soft: #1d2742; /* ink 12.6 */
    --on-accent: #0f1830;  /* 8.6 */
    --ok: #6fcf9b; --ok-soft: #1b3427;       /* 7.1 · surface 8.7 */
    --warn: #f2b84b; --warn-soft: #3a2c10;   /* 7.6 · surface 9.2 */
    --bad: #ff8a80; --bad-soft: #3d1916;     /* 6.8 · surface 7.2 */
  }
}
:root[data-theme="dark"] {
  --paper: #111814; --surface: #18211c; --sunken: #212c26;
  --ink: #e8eee9; --ink-2: #c0cbc3; --ink-3: #9aa79f;
  --line: #2c3831; --line-strong: #66746b;
  --accent: #9db4f5; --accent-soft: #1d2742; --on-accent: #0f1830;
  --ok: #6fcf9b; --ok-soft: #1b3427; --warn: #f2b84b; --warn-soft: #3a2c10; --bad: #ff8a80; --bad-soft: #3d1916;
}

/* ── 바탕 ── 간격은 4px 배수만 */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 16px/1.6 "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  word-break: keep-all; overflow-wrap: anywhere;
}
img { max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
.wrap { max-width: 960px; margin: 0 auto; padding: 0 16px; }
.num { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; z-index: 20; background: var(--surface); padding: 12px 16px; min-height: 44px; }

/* 머리 · 내비 5칸 */
.top { background: var(--surface); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 24px; min-height: 56px; }
.mark { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 19px; letter-spacing: -0.02em; }
.mark svg { width: 24px; height: 24px; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--ink-2); text-decoration: none; font-size: 15px; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 700; border-bottom-color: var(--ink); }

/* 배우기 2차 띠 — 글자 링크, 줄바꿈(가로 스크롤 없음) */
.band { background: var(--surface); border-bottom: 1px solid var(--line); }
.band .wrap { display: flex; flex-wrap: wrap; gap: 0 4px; }
.band a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--ink-2); font-size: 15px; }
.band a[aria-current="page"] { color: var(--ink); font-weight: 700; text-decoration: none; }

/* 제목은 자기 본문에 붙인다: 위 > 아래 */
h1 { font-size: 28px; line-height: 1.25; letter-spacing: -0.02em; margin: 32px 0 8px; }
h2 { font-size: 20px; line-height: 1.3; margin: 44px 0 8px; }
h3 { font-size: 17px; line-height: 1.35; margin: 28px 0 8px; }
.lede { color: var(--ink-2); margin: 0 0 24px; }
.sub { color: var(--ink-2); margin: 0 0 12px; font-size: 15px; }
.count { color: var(--ink-3); font-weight: 400; font-size: 14px; }

/* ── 밤 패널: 이 사이트에서 기억에 남는 단 하나 ── */
.night { background: var(--night); color: var(--on-night); border-radius: 16px; padding: 20px; }
.night a { color: var(--on-night); }
.night__who { margin: 0 0 4px; color: var(--on-night-2); font-size: 14px; }
.night__name { margin: 0 0 8px; font-size: 18px; font-weight: 700; }
.night__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 16px; }
.night__big { margin: 0; font-size: 64px; line-height: 1; font-weight: 800; letter-spacing: -0.04em; }
.night__big small { display: block; font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--on-night-2); margin-bottom: 8px; }
.night__why { margin: 0 0 4px; max-width: 34em; }
.night__other { margin: 12px 0 0; color: var(--on-night-2); font-size: 14px; }
/* 밤 띠: 18시 → 다음 날 09시, 한 칸 = 1시간. 색은 그 밤 안의 상대 기온(차가울수록 진함), 최저 칸은 테두리 */
.strip { display: grid; grid-template-columns: repeat(16, 1fr); gap: 2px; margin: 20px 0 4px; }
.strip i { height: 28px; border-radius: 3px; background: var(--t-warm); }
.strip .c1 { background: var(--t-cold); } .strip .c2 { background: var(--t-cool); } .strip .c3 { background: var(--t-mild); }
.strip .x { background: var(--t-none); }
.strip .min { outline: 2px solid var(--on-night); outline-offset: 1px; }
.strip__axis { display: flex; justify-content: space-between; color: var(--on-night-2); font-size: 12px; }

/* 판정 낱말 — 색만으로 구분하지 않는다(항상 글자) */
.v { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.v--ok { background: var(--ok-soft); color: var(--ok); }
.v--warn { background: var(--warn-soft); color: var(--warn); }
.v--bad { background: var(--bad-soft); color: var(--bad); }
.v--none { background: var(--sunken); color: var(--ink-3); font-weight: 400; }
.night .v { border: 1px solid currentColor; }

/* 고르기 칸 */
.bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-2); text-decoration: none; font-size: 15px; background: var(--surface); }
.bar--wrap .chip { padding: 0 12px; }
.chip[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 700; }
.ghost { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 8px; background: transparent; color: var(--ink); font: inherit; font-size: 15px; cursor: pointer; }

/* 목록 — '누르러 온 줄'이라 앵커를 처음부터 줄 전체로 깐다 */
.list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.list li + li { border-top: 1px solid var(--line); }
.list a { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 16px; align-items: center; min-height: 64px; padding: 12px 16px; color: var(--ink); text-decoration: none; }
.list a:hover .list__n { text-decoration: underline; }
.list__n { font-weight: 700; }
.list__m { grid-column: 1; color: var(--ink-2); font-size: 14px; }
.list__t { grid-row: 1 / span 2; grid-column: 3; font-size: 20px; font-weight: 800; text-align: right; min-width: 3.2em; }
.list__t small { display: block; font-size: 12px; font-weight: 400; color: var(--ink-3); }
.list .v { grid-row: 1 / span 2; grid-column: 2; }
.more { text-align: center; margin: 12px 0 0; }
.more a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; }
.pager { display: flex; justify-content: center; align-items: center; gap: 16px; margin: 16px 0 0; color: var(--ink-2); }
.pager a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; }

/* 조건으로 찾기 */
.ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; list-style: none; margin: 0; padding: 0; }
.ways--two { grid-template-columns: repeat(2, 1fr); }
.ways a { display: block; height: 100%; min-height: 44px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none; }
.ways--inline a { padding: 10px 16px; }
.ways a[aria-current="page"] { border-color: var(--ink); }
.ways b { display: block; margin-bottom: 4px; }
.ways--inline b { margin: 0; }
.ways span { color: var(--ink-2); font-size: 14px; }
.ways a:hover b { text-decoration: underline; }
.note { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin: 0 0 16px; }
.note--warn { border-color: var(--warn); background: var(--warn-soft); }
.note p { margin: 0 0 8px; } .note p:last-child { margin: 0; }
.night__name a, .note a, .fine a, .src a { display: inline-flex; align-items: center; min-height: 44px; }  /* 글자만 있는 링크도 44px */
.fine { color: var(--ink-3); font-size: 13px; margin: 12px 0 0; }

/* 상세 */
.crumb { margin: 24px 0 0; font-size: 14px; color: var(--ink-3); }
.crumb a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); }
.crumb + h1 { margin-top: 0; }
.nights { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.night--sub { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.night--sub .night__who { color: var(--ink-2); }
.night--sub .night__mid { margin: 0 0 8px; font-size: 32px; font-weight: 800; line-height: 1.1; }
.night--sub p { margin: 0 0 8px; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin: 0; }
.facts div { display: grid; grid-template-columns: 7em 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--ink-2); }
.facts dd { margin: 0; }
.facts .unk { color: var(--ink-3); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 24px 0 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 8px; background: var(--accent); color: var(--on-accent); font-weight: 700; text-decoration: none; }
.btn:hover { text-decoration: underline; }
.cta .alt { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
.cta__note { flex-basis: 100%; margin: 0; color: var(--ink-3); font-size: 13px; }
.photo { margin: 0 0 16px; }
.photo img { display: block; border-radius: 12px; max-height: 360px; width: auto; }
.photo figcaption { color: var(--ink-3); font-size: 13px; margin-top: 4px; }
details.intro { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 0 16px; }
details.intro summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
details.intro p { margin: 0 0 16px; color: var(--ink-2); max-width: 40em; }
.src { color: var(--ink-3); font-size: 13px; margin: 24px 0 0; }

/* 공공 야영장 */
.howto { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 4px 16px 12px; margin: 0 0 16px; }
.howto h2 { margin-top: 16px; }
.howto ul { margin: 0; padding-left: 20px; }
.howto li { margin: 0 0 8px; }
.go { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

/* 지도 */
.mapbox { position: relative; height: 560px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--sunken); }
.mapbox__empty { position: absolute; inset: auto 16px 16px 16px; margin: 0; z-index: 500; background: var(--surface); padding: 12px; border-radius: 8px; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; list-style: none; margin: 12px 0 0; padding: 0; font-size: 14px; color: var(--ink-2); }
.legend li { display: flex; align-items: center; gap: 8px; }
.legend i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #ffffff; box-shadow: 0 0 0 1px var(--line-strong); }
.d-ok { background: var(--dot-ok); } .d-warn { background: var(--dot-warn); } .d-bad { background: var(--dot-bad); } .d-none { background: var(--dot-none); }
.mapbox.leaflet-container .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; }  /* 확대·축소 단추 44px(기본 30px). leaflet.css 가 뒤에 읽혀 .leaflet-touch(0,2,1) 보다 세게 */
.leaflet-popup-content { font: 14px/1.5 "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif; }
.pop__n { display: block; font-size: 15px; margin-bottom: 4px; }
.pop__m { display: block; color: #45514a; margin-bottom: 4px; }  /* 팝업 바탕은 Leaflet 흰색 고정 — ink-2 라이트 값 8.3:1 */
.leaflet-container a.pop__a { display: inline-flex; align-items: center; min-height: 44px; color: #2c4a96; }  /* accent 라이트 값 8.3:1(흰 팝업) */
.leaflet-popup-content .v--ok { background: #e1efe6; color: #1d6845; } .leaflet-popup-content .v--warn { background: #fbf0d9; color: #855400; }
.leaflet-popup-content .v--bad { background: #fde8e6; color: #b42318; } .leaflet-popup-content .v--none { background: #eaede6; color: #5b675f; }

/* 글 */
.prose { max-width: 44em; }
.prose p, .prose li { margin: 0 0 12px; }
.prose ul { padding-left: 20px; }
/* 문장 속 링크 — 줄 높이는 그대로 두고 위아래 여백으로 누르는 면을 44px 이상으로(21px 글줄 + 12px×2) */
.prose p:not(.fine) > a, .prose li > a { padding: 12px 0; }
.prose code { background: var(--sunken); padding: 0 4px; border-radius: 4px; font-size: 14px; }
.tbl { overflow-x: auto; margin: 0 0 16px; }  /* 표만 가로 스크롤 예외(UIUX) */
.tbl table { border-collapse: collapse; width: 100%; min-width: 560px; background: var(--surface); font-size: 15px; }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.tbl thead th { background: var(--sunken); color: var(--ink-2); font-size: 14px; }
.tbl td a { display: inline-flex; align-items: center; min-height: 44px; }

/* 더보기 */
.mgroup { margin-top: 28px; }
.mgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; list-style: none; margin: 0; padding: 0; }
.mgrid a { display: flex; align-items: center; min-height: 56px; padding: 8px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none; }

/* 쿠팡 칸 */
.cpn { margin: 32px 0 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.cpn__h { margin: 0; font-weight: 700; }
.cpn__d { margin: 0 0 8px; color: var(--ink-3); font-size: 13px; }
.cpn__l { list-style: none; margin: 0; padding: 0; }
.cpn__l li { display: flex; gap: 12px; align-items: center; padding: 8px 0; }
.cpn__l a { display: inline-flex; align-items: center; min-height: 44px; }
.cpn__l small { display: block; color: var(--ink-2); }

/* 푸터: 소개·방침·약관은 여기에만 */
.foot { margin-top: 64px; padding: 24px 0 32px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 14px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 0 8px; margin-bottom: 8px; }
.foot nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--ink-2); }
.foot p { margin: 0; }

/* 모바일 하단 탭바 5칸 — 순수 링크, JS 없음 */
.tabbar { display: none; }
@media (max-width: 720px) {
  .nav { display: none; }
  body { padding-bottom: 64px; }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
  .tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; color: var(--ink-2); text-decoration: none; font-size: 12px; }
  .tabbar svg { width: 22px; height: 22px; }
  .tabbar a[aria-current="page"] { color: var(--ink); font-weight: 700; }
  h1 { font-size: 24px; margin-top: 24px; }
  .night { padding: 16px; border-radius: 12px; }
  .night__big { font-size: 52px; }
  .strip { gap: 1px; }
  .strip i { height: 24px; }
  .ways, .ways--two { grid-template-columns: 1fr; }
  .list a { padding: 12px; gap: 4px 12px; }
  .ghost { margin-left: 0; }
  .nights, .facts { grid-template-columns: 1fr; }
  .facts div { grid-template-columns: 6em 1fr; }
  .cta { position: sticky; bottom: 64px; background: var(--paper); padding: 12px 0; margin: 16px 0 0; border-top: 1px solid var(--line); z-index: 5; }
  .btn { width: 100%; }
  .cta .alt { flex: 1; justify-content: center; }
  .mapbox { height: 60vh; min-height: 360px; }
  .mgrid { grid-template-columns: 1fr; }
}