/* =====================================================================
   seniorplace — 토큰·대비의 정본 (docs/mockup/index.html 머리말에서 옮겼다, 값 그대로)
   대비는 WCAG 2.x 상대휘도로 계산했다(2026-10-14). 목표: 본문 7:1 이상.

   라이트                                   대비
   --ink    #1B2420 on --ground #F6F7F3    14.79   본문
   --ink    #1B2420 on --surface #FFFFFF   15.91
   --ink    #1B2420 on --tint #E4ECE6      13.21   고른 칸·띠
   --dim    #3D4943 on --ground            8.74    보조 글(7:1 넘김)
   --dim    #3D4943 on --surface           9.41
   --dim    #3D4943 on --tint              7.81
   --accent #1D5C46 on --ground            7.31    링크(밑줄 있음)
   --accent #1D5C46 on --surface           7.86
   --on-accent #FFFFFF on --accent         7.86    주 버튼 글자
   --caution-ink #6B4E00 on --caution-bg #FFF4D6  7.06  주의보 띠
   --warn-ink #8A1C1C on --warn-bg #FDECEC        8.12  경보 띠(빨강은 위험 전용)
   --field  #7C8A83 on --surface           3.61    입력 테두리(비텍스트 3:1)
   ⚠️ --accent on --tint 은 6.53 이라 쓰지 않는다 — tint 위 글자는 --ink 만.

   다크
   --ink    #ECF1EE on --ground #111714    15.90
   --ink    #ECF1EE on --surface #19211D   14.40
   --ink    #ECF1EE on --tint #22302A      12.06
   --dim    #B9C5BF on --ground            10.20
   --dim    #B9C5BF on --surface           9.24
   --dim    #B9C5BF on --tint              7.74
   --accent #86D3B0 on --ground            10.34
   --accent #86D3B0 on --surface           9.37
   --accent #86D3B0 on --tint              7.85
   --on-accent #0D1A14 on --accent         10.18
   --caution-ink #F2D58A on --caution-bg #2A2410  10.79
   --warn-ink #F4B4B4 on --warn-bg #2E1717        9.62
   --field  #5E6E66 on --surface           3.05    (비텍스트 3:1)

   이 사이트만의 예외(CLAUDE.md '화면'): 본문 19px, 탭 대상은 44px 보다 크게(목록 줄 72px·버튼 60px) — 손 떨림.
   새 색을 만들면 대비를 재서 여기 적는다. 지도 점(.d-*)·Leaflet 은 위 토큰만 쓴다.
   ===================================================================== */
:root{
  --ground:#F6F7F3; --surface:#FFFFFF; --tint:#E4ECE6; --line:#D5DCD7; --field:#7C8A83;
  --ink:#1B2420; --dim:#3D4943; --accent:#1D5C46; --on-accent:#FFFFFF;
  --caution-bg:#FFF4D6; --caution-ink:#6B4E00; --warn-bg:#FDECEC; --warn-ink:#8A1C1C;
  color-scheme: light dark;
  /* famousbros 공용 부품(fb.css) 값 — 기존 토큰을 가리킨다(G:\workspace\DESIGN.md '토큰'). 다크는 기존 토큰을 따라간다.
     실측(2026-10-16): ink surface 15.91(다크 14.40) · dim surface 9.41(다크 9.24) ·
     accent --accent #1D5C46 위 흰 글자 7.86:1(다크 #86D3B0 위 #0D1A14 10.18:1) · accent 글자 surface 위 7.86(다크 9.37) — 목표 7:1 넘김 */
  --fb-bg:var(--ground); --fb-surface:var(--surface); --fb-ink:var(--ink); --fb-muted:var(--dim); --fb-line:var(--line);
  --fb-accent:var(--accent); --fb-on-accent:var(--on-accent); --fb-max:46rem;
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#111714; --surface:#19211D; --tint:#22302A; --line:#2C3833; --field:#5E6E66;
    --ink:#ECF1EE; --dim:#B9C5BF; --accent:#86D3B0; --on-accent:#0D1A14;
    --caution-bg:#2A2410; --caution-ink:#F2D58A; --warn-bg:#2E1717; --warn-ink:#F4B4B4;
  }
}
*,*::before,*::after{box-sizing:border-box}
html{font-size:100%;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);
  font:400 1.1875rem/1.7 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;
  word-break:keep-all;overflow-wrap:anywhere}
img,svg{max-width:100%}
a{color:var(--accent);text-underline-offset:.2em}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
.wrap{max-width:46rem;margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:8px;z-index:100;background:var(--surface);color:var(--ink);padding:12px 16px;border-radius:8px}

/* 머리 — 틀은 fb.css 의 .fb-nav(폰에서는 아래 탭바). 이 사이트는 탭 대상을 48px 로(손 떨림 예외), 끝 칸은 폭에 따라 바꿔 끼운다 */
.fb-nav__logo{min-height:48px;font-size:1.25rem}
.fb-nav__logo .terrain{width:40px;height:24px;border-radius:0}
.fb-nav__links a{min-height:48px;font-size:1rem}
.nav .nav-narrow{display:none}
@media (max-width:719px){
  .nav .nav-wide{display:none}
  .nav .nav-narrow{display:inline-flex}
  .fb-nav__links a{font-size:.9375rem}
}

/* 도움말 2차 띠 — 가로 스크롤 없이 줄바꿈 */
.band{margin-top:8px}
.band ul{display:flex;flex-wrap:wrap;gap:4px 8px;list-style:none;margin:0 auto;padding-top:4px;padding-bottom:4px}
.band a{display:flex;align-items:center;min-height:48px;padding:0 12px;color:var(--ink);font-weight:700;border-radius:8px}
.band a[aria-current]{background:var(--tint);text-decoration:none}

/* 블록 간격: 제목↔본문 8px, 덩어리 사이 44px */
main{padding-bottom:48px}
section{margin-top:44px}
h1,h2,h3{line-height:1.3;margin:0 0 8px}
h1{font-size:2rem;font-weight:800;letter-spacing:-.01em;margin-top:32px}
h2{font-size:1.5rem;font-weight:800}
h3{font-size:1.25rem}
p{margin:0 0 12px}
.dim{color:var(--dim)}
.small{font-size:1rem}
.crumb{margin:24px 0 0;font-size:1rem;color:var(--dim)}
.crumb a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:48px;color:var(--dim)}
.crumb + h1{margin-top:0}

/* 걷기 부담 고르기 — 홈의 큰 것 하나 */
.pick{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px 16px;margin-top:20px}
.pick fieldset{border:0;margin:0;padding:0;min-width:0}
.pick legend{font-weight:800;font-size:1.25rem;margin-bottom:12px;padding:0}
.choices{display:grid;gap:8px}
.choice{position:relative;display:grid;grid-template-columns:56px 1fr;align-items:center;gap:12px;min-height:72px;
  padding:8px 16px;border:2px solid var(--field);border-radius:12px;background:var(--surface);cursor:pointer}
.choice input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;width:100%;height:100%}
.choice:has(input:checked){border-color:var(--ink);background:var(--tint);border-width:3px}
.choice:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:3px}
.choice b{display:block;font-size:1.25rem}
.choice small{display:block;color:var(--dim);font-size:1rem;line-height:1.4}
.row2{display:grid;gap:12px;margin-top:16px}
label.f{display:grid;gap:4px;font-weight:700}
select{font:inherit;min-height:56px;padding:0 12px;border:2px solid var(--field);border-radius:12px;background:var(--surface);color:var(--ink)}
.btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:60px;padding:0 20px;border:0;border-radius:12px;
  background:var(--accent);color:var(--on-accent);font:inherit;font-weight:800;font-size:1.25rem;text-decoration:none;cursor:pointer}
.btn:hover{text-decoration:underline}

/* 걷기 부담 그림 — 평지·비탈·계단·물음표(색만으로 구분하지 않는다) */
.terrain{width:56px;height:32px;display:block;flex:none}
.terrain path{fill:none;stroke:currentColor;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.terrain .q{fill:currentColor;stroke:none;font:700 22px/1 sans-serif}

/* 알림 띠 — 기상특보 */
.alert{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:12px 16px;border-radius:12px;margin-top:20px}
.alert .ico{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2}
.alert.caution{background:var(--caution-bg);color:var(--caution-ink)}
.alert.warn{background:var(--warn-bg);color:var(--warn-ink)}
.alert b{display:block}
.alert a{color:inherit;display:inline-flex;align-items:center;min-height:44px;font-weight:700;margin-right:8px}

/* 목록 — 줄 전체가 링크(처음부터 a 를 grid 로) */
.list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.list li{border-bottom:1px solid var(--line)}
.list a{display:grid;grid-template-columns:56px 1fr;gap:4px 12px;align-items:center;min-height:72px;padding:12px 4px;color:var(--ink);text-decoration:none}
.list a:hover .nm{text-decoration:underline}
.list .terrain{grid-row:span 2;color:var(--ink)}
.list .nm{font-weight:800;font-size:1.25rem;line-height:1.35}
.list .meta{grid-column:2;color:var(--dim);font-size:1rem;line-height:1.5}
.list--text a{grid-template-columns:1fr}
.list--text .meta{grid-column:1}
.walk{font-weight:700;color:var(--ink)}

/* 걷기 부담 띠(거르기 칸 1개). 상태는 URL(?walk=) — 링크라 JS 없이 동작한다 */
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:16px 0;padding:4px;background:var(--tint);border-radius:12px;list-style:none}
.seg a{display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:8px;color:var(--ink);text-decoration:none;font-weight:700;text-align:center}
.seg a:hover{text-decoration:underline}
.seg a[aria-current]{background:var(--surface);box-shadow:0 0 0 2px var(--ink)}

.pager{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:24px}
.pager a{display:inline-flex;align-items:center;min-height:56px;padding:0 16px;border:2px solid var(--field);border-radius:12px;color:var(--ink);font-weight:700;text-decoration:none}
.empty{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px}
.empty a{display:inline-flex;align-items:center;min-height:48px;font-weight:700}

/* 테마·지역 격자 */
.themes,.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;list-style:none;margin:0;padding:0}
.themes a,.grid a{display:flex;flex-direction:column;justify-content:center;min-height:80px;padding:12px 16px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface);color:var(--ink);text-decoration:none;font-weight:800;font-size:1.25rem}
.themes a span,.grid a span{font-weight:400;font-size:1rem;color:var(--dim)}
.themes a:hover,.grid a:hover{text-decoration:underline}
.grid--small{margin-top:16px}
.grid--small a{min-height:60px;font-size:1.125rem}
@media (min-width:721px){.themes,.grid{grid-template-columns:repeat(3,1fr)}.grid--small{grid-template-columns:repeat(6,1fr)}}

/* 글자 링크 줄 */
.links{list-style:none;margin:0;padding:0}
.links a{display:flex;align-items:center;min-height:56px;padding:0 4px;border-bottom:1px solid var(--line);font-weight:700}

/* ---- 상세 ---- 판정이 이 화면의 큰 것 하나 */
.verdict{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;margin-top:20px;padding:20px 16px;background:var(--tint);border-radius:16px;color:var(--ink)}
.verdict .terrain{width:96px;height:56px}
.verdict .terrain path{stroke-width:5}
.verdict p{margin:0}
.verdict .lab{display:block;font-size:1rem;color:var(--dim)}
.verdict .val{display:block;font-size:2.5rem;font-weight:800;line-height:1.15}
.verdict .why{grid-column:1/-1;font-size:1.125rem}
.facts{display:grid;gap:24px}
.facts h3{display:flex;gap:8px;align-items:center}
.facts ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.facts li{border-bottom:1px solid var(--line)}
.facts details summary{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;min-height:56px;padding:8px 4px;cursor:pointer;list-style:none}
.facts details summary::-webkit-details-marker{display:none}
.facts details summary::after{content:"원문";font-size:1rem;color:var(--accent);text-decoration:underline}
.facts details[open] summary::after{content:"닫기"}
.facts details p{margin:0 0 12px;padding:12px 16px;background:var(--surface);border-left:4px solid var(--line);font-size:1rem}
.facts .none li{display:flex;align-items:center;min-height:56px;padding:8px 4px}
.sym{display:inline-grid;place-items:center;width:28px;height:28px;border:2px solid currentColor;border-radius:50%;font-size:1rem;font-weight:800;line-height:1}
dl.info{display:grid;grid-template-columns:7em 1fr;gap:8px 12px;margin:0}
dl.info dt{color:var(--dim)}
dl.info dd{margin:0}
dl.info a{display:inline-flex;align-items:center;min-height:44px}
.perk{padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);margin-bottom:12px}
.perk p:last-child{margin:0}
.perk a,.srcs a,.prose a,.src a{display:inline-flex;align-items:center;min-height:44px}
.call{margin-top:44px}
.call .small{margin-top:8px}
.photo{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px;background:var(--tint);margin-bottom:12px}
.src{font-size:1rem;color:var(--dim);border-top:1px solid var(--line);padding-top:12px;margin-top:24px}

/* 읽는 화면 */
.prose{max-width:42rem}
.prose h2{margin-top:36px}
.prose li{margin-bottom:8px}
.lede{font-size:1.25rem}
.srcs{padding-left:20px}

/* ---- 지도 ---- */
/* 🔥 z-index:0 + isolation — Leaflet 판·컨트롤(z 400~1000)을 상자 안에 가둔다. 없으면 떠 있는 내비(50)·탭바(60) 위로 올라온다 */
.mapbox{position:relative;z-index:0;isolation:isolate;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--tint)}
#map{height:min(70vh,520px);min-height:320px}
.mapsrc{margin:4px 0 0}
.leaflet-container{font:inherit;font-size:1rem}
.leaflet-popup-content a.pop{display:block;min-height:44px;color:var(--accent);font-size:1.0625rem;line-height:1.5}
.mapbox .leaflet-control-zoom.leaflet-bar a{  /* leaflet.css 가 뒤에 읽혀 '.leaflet-touch .leaflet-bar a'(30px)보다 구체적이어야 이긴다 */
width:44px;height:44px;line-height:44px;font-size:1.375rem}
.mapsrc a{display:inline-flex;align-items:center;min-height:44px}
.locate{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;margin-top:12px;border:2px solid var(--field);
  border-radius:12px;background:var(--surface);color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
.locate[hidden]{display:none}
.legend{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;margin:12px 0 0;padding:0;font-size:1rem}
.legend li{display:flex;align-items:center;gap:8px}
.legend svg{width:24px;height:24px}
.d-easy{fill:var(--accent);stroke:var(--surface);stroke-width:2}
.d-normal{fill:var(--surface);stroke:var(--ink);stroke-width:4}
.d-hard{fill:var(--ink);stroke:var(--surface);stroke-width:2}
.d-unknown{fill:none;stroke:var(--dim);stroke-width:2.5;stroke-dasharray:3 3}

/* 쿠팡 칸(기본 끔) */
.cpn{margin-top:44px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.cpn__h{font-weight:800;margin:0}
.cpn__d{font-size:1rem;color:var(--dim)}
.cpn__l{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.cpn__i{display:grid;grid-template-columns:88px 1fr;gap:12px;align-items:center}
.cpn__i a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.cpn__b{width:100%;border:0}

/* 히어로·CTA·푸터 — 틀은 fb.css. section 공통 위 여백(44px)과 h1/h2 공통 여백을 받지 않는다 */
.fb-hero{margin-top:0}
.fb-cta__h{margin:0 0 4px}
.fb-foot{font-size:1rem}
/* 본문 폭(46rem)이 좁아 푸터 넷 칸이 너무 좁다(famousbros 칸이 한 줄짜리 긴 목록이 됐다) — 푸터만 넓힌다 */
.fb-foot__in,.fb-foot__bottom{max-width:960px}
.fb-foot__h{font-size:.9375rem;margin:0 0 12px}
.fb-foot a{min-height:44px}
.fb-foot__brand .fb-nav__logo{color:var(--ink)}

@media (max-width:720px){
  h1{font-size:1.75rem}
  .verdict .val{font-size:2.125rem}
  dl.info{grid-template-columns:1fr}
  dl.info dd{margin-bottom:8px}
  /* 폰에서 주 버튼은 엄지 자리 — 탭바 바로 위에 붙인다 */
  .call--btn{position:sticky;bottom:calc(var(--fb-tab-h) + 16px + env(safe-area-inset-bottom));background:var(--ground);padding:12px 0;margin-top:32px;z-index:5}
}
@media (min-width:721px){.row2{grid-template-columns:1fr 1fr;align-items:end}}