/* =====================================================================
   아이랑나들이 팔레트 — '우비와 장화' (docs/mockup/home.html 머리 주석에서 옮김)
   남색 우비(--ink) 위에 장화 노랑(--mark)을 주 버튼 하나에만 쓴다.
   실내 = 보라(--inn), 실외 = 초록(--out). 색이 데이터(실내/실외)를 뜻하므로
   UI 강조색은 노랑 하나로 둔다(UIUX Von Restorff).
   대비는 WCAG 2.x 상대 휘도로 계산(2026-10-14):
   [라이트]
     --ink  #15304a / surface #fff 13.52:1 · / ground #eef3f7 12.10:1
     --dim  #475d72 / surface 6.83:1 · / ground 6.11:1
     --link #1f5fa8 / surface 6.44:1 · / ground 5.77:1
     --out  #1d6b45 / surface 6.48:1 · / --out-bg #e3f3ea 5.64:1
     --inn  #5b3fb3 / surface 7.48:1 · / --inn-bg #eee9fc 6.30:1
     --warn #b42318 / surface 6.57:1
     --ink / --rain-bg #d3e5f8 10.51:1
     --onmark #15304a / --mark #ffc533 8.55:1
     ⚠ --mark / surface 는 1.58:1 이라 버튼 경계가 안 보인다 → 라이트에선 2px --ink 테두리(13.52:1)로 경계를 만든다.
   [다크]
     --ink  #e6edf3 / surface #16242f 13.39:1 · / ground #0e1822 15.16:1
     --dim  #a4b4c3 / surface 7.45:1
     --link #8cc4ff / surface 8.63:1
     --out  #5cc994 / surface 7.71:1 · / --out-bg #173628 6.42:1
     --inn  #b9a6f7 / surface 7.43:1 · / --inn-bg #2a2450 6.72:1
     --warn #ff8a80 / surface 6.93:1
     --ink / --rain-bg #1d3a58 9.88:1
     --onmark #1a1405 / --mark 11.59:1 · --mark / surface 10.01:1
   지도 점 = 실내 --inn / 실외 --out / 모름 --dim / 내 위치 --link. 점은 비텍스트라 3:1 이 기준(map.html 목업 주석):
     라이트 --map-land #e4ebe3 위 inn 6.16 · out 5.33 · dim 5.62 · link 5.30, --map-water #cfe0ee 위 inn 5.54 · out 4.80
     다크  --map-land #1b2a33 위 inn 6.92 · out 7.18 · dim 6.94 · link 8.04, --map-water #12283a 위 inn 7.09 · out 7.36
     실제 지도는 OSM 타일 위라 점에 흰 2px 테두리. 색만으로 구분하지 않게 범례·팝업·목록에 '실내/실외' 글자.
   ===================================================================== */
:root{
  --ground:#eef3f7; --surface:#ffffff; --ink:#15304a; --dim:#475d72; --line:#c9d4de;
  --link:#1f5fa8; --mark:#ffc533; --onmark:#15304a; --mark-edge:#15304a;
  --out:#1d6b45; --out-bg:#e3f3ea; --inn:#5b3fb3; --inn-bg:#eee9fc;
  --rain-bg:#d3e5f8; --warn:#b42318; --map-land:#e4ebe3; --map-water:#cfe0ee;
  --r-s:8px; --r-l:16px;
  --font:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0e1822; --surface:#16242f; --ink:#e6edf3; --dim:#a4b4c3; --line:#2b3d4d;
    --link:#8cc4ff; --mark:#ffc533; --onmark:#1a1405; --mark-edge:#ffc533;
    --out:#5cc994; --out-bg:#173628; --inn:#b9a6f7; --inn-bg:#2a2450;
    --rain-bg:#1d3a58; --warn:#ff8a80; --map-land:#1b2a33; --map-water:#12283a; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#0e1822; --surface:#16242f; --ink:#e6edf3; --dim:#a4b4c3; --line:#2b3d4d;
  --link:#8cc4ff; --mark:#ffc533; --onmark:#1a1405; --mark-edge:#ffc533;
  --out:#5cc994; --out-bg:#173628; --inn:#b9a6f7; --inn-bg:#2a2450;
  --rain-bg:#1d3a58; --warn:#ff8a80; --map-land:#1b2a33; --map-water:#12283a; color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:16px/1.6 var(--font);word-break:keep-all;overflow-wrap:anywhere}
img,svg{max-width:100%}
a{color:var(--link);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--link);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:960px;margin:0 auto;padding:0 16px}
.wrap--wide{max-width:1120px}
.wrap--narrow{max-width:760px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:8px;z-index:10;background:var(--surface);padding:8px 12px}

/* 머리 — 로고 = 홈, 내비 5칸 */
.top{background:var(--surface);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:16px;min-height:56px}
.logo{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:800;font-size:18px;color:var(--ink);text-decoration:none;letter-spacing:-.02em}
.logo svg{width:28px;height:28px}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{display:flex;align-items:center;min-height:44px;padding:0 12px;color:var(--ink);text-decoration:none;border-radius:var(--r-s)}
.nav a:hover{text-decoration:underline}
.nav a[aria-current="page"]{font-weight:700;box-shadow:inset 0 -3px 0 var(--ink)}

/* 공통 제목·덩어리(제목은 자기 본문에 붙는다: 위 > 아래) */
h1{font-size:clamp(24px,5vw,32px);line-height:1.3;margin:24px 0 8px;letter-spacing:-.03em}
.lead{margin:0 0 12px;color:var(--dim)}
.block{margin:44px 0 0}
.block>h2{font-size:20px;margin:0 0 8px;letter-spacing:-.02em}
.block>.lead{margin:-4px 0 12px;font-size:14px}
.more-link{display:inline-flex;align-items:center;min-height:44px}
.note{font-size:13px;color:var(--dim);margin:12px 0 0}
.empty{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:16px}
.crumb{font-size:14px;margin:16px 0 0;display:flex;flex-wrap:wrap;gap:0 8px;color:var(--dim)}
.crumb a{display:inline-flex;align-items:center;min-height:44px}

/* 하늘 — 홈의 주인공 */
.sky{padding:32px 0 24px}
.sky .where{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;color:var(--dim);margin:0 0 8px}
.verdict{font-size:clamp(24px,5.2vw,36px);line-height:1.3;font-weight:800;letter-spacing:-.03em;margin:0 0 8px;max-width:22em}
.why{margin:0 0 20px;color:var(--dim)}
.strip{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:2px;margin:0;padding:0;list-style:none;border-radius:var(--r-l);overflow:hidden}
.strip li{background:var(--surface);text-align:center;padding:8px 0;font-size:12px;line-height:1.4}
.strip li.wet{background:var(--rain-bg)}
.strip b{display:block;font-size:18px;font-weight:400;line-height:1.3}
.strip .h{color:var(--dim)}
.strip-cap{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--dim);margin:8px 0 0}
.where-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.where-form select{min-height:44px;max-width:100%;font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);padding:0 8px}
.btn-ghost{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;text-decoration:none}
.btn-ghost:hover{text-decoration:underline}

/* 나이 + 주 행동 */
.pick{margin:24px 0 0;display:grid;gap:12px}
.pick h2{font-size:15px;margin:0;font-weight:700}
.seg{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden;background:var(--surface)}
.seg a{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:52px;color:var(--ink);text-decoration:none;font-weight:600;line-height:1.3}
.seg a+a{border-left:1px solid var(--line)}
.seg a small{font-weight:400;color:var(--dim);font-size:12px}
.seg a[aria-current="true"]{background:var(--ink);color:var(--surface)}
.seg a[aria-current="true"] small{color:var(--surface)}
.btn{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:var(--r-s);font-weight:700;text-decoration:none}
.btn-main{background:var(--mark);color:var(--onmark);border:2px solid var(--mark-edge)}
.btn-main:hover{text-decoration:underline}

/* 필터 칩(나이·실내외 두 칸까지) */
.filters{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0 0 12px}
.chips{display:flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden;background:var(--surface)}
.chips a{display:flex;align-items:center;min-height:44px;padding:0 14px;color:var(--ink);text-decoration:none;font-size:15px}
.chips a+a{border-left:1px solid var(--line)}
.chips a[aria-current="true"]{background:var(--ink);color:var(--surface);font-weight:700}
.kindlinks{display:flex;flex-wrap:wrap;gap:4px 8px;margin:0 0 16px;padding:0;list-style:none}
.kindlinks a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);text-decoration:none;font-size:14px}
.kindlinks a:hover{text-decoration:underline}

/* 목록 줄 — 줄 전체가 링크(앵커를 grid 로 깐다) */
.rows{list-style:none;margin:0;padding:0;background:var(--surface);border-radius:var(--r-l);border:1px solid var(--line)}
.rows li+li{border-top:1px solid var(--line)}
.rows a{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:12px 16px;min-height:44px;color:var(--ink);text-decoration:none}
.rows a:hover .nm{text-decoration:underline}
.nm{font-weight:700}
.kd{color:var(--dim);font-size:14px}
.dist{grid-row:1;grid-column:2;color:var(--dim);font-size:14px;align-self:start}
.meta{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13px;color:var(--dim)}
.tag{display:inline-block;padding:0 8px;border-radius:999px;font-size:12px;font-weight:700;line-height:22px}
.tag.in{background:var(--inn-bg);color:var(--inn)}
.tag.out{background:var(--out-bg);color:var(--out)}
.tag.unk{border:1px solid var(--line);color:var(--dim)}
.am-y::before{content:"✓ "}
.am-n::before{content:"✕ "}
.pager{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.pager a,.pager span{display:inline-flex;align-items:center;min-height:44px;padding:0 12px}
.hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:0;padding:0;list-style:none}
.hub a{display:flex;justify-content:space-between;align-items:center;min-height:52px;padding:8px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);color:var(--ink);text-decoration:none;font-weight:700}
.hub a:hover{text-decoration:underline}
.hub small{font-weight:400;color:var(--dim)}

/* 장소 상세 — 크게 보이는 것은 편의 4칸 하나 */
.sub{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin:0;color:var(--dim)}
.today{margin:16px 0 0;padding:12px 16px;border-radius:var(--r-s);background:var(--rain-bg)}
.today b{display:block}
.amen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.amen li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:16px}
.amen .k{display:block;font-size:14px;color:var(--dim)}
.amen .v{display:block;font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.35}
.amen .s{display:block;font-size:12px;color:var(--dim);margin-top:4px}
.amen .u .v,.amen .split .v{color:var(--dim);font-weight:600}
.amen .y .v::before{content:"✓ "}
.amen .fee .v{font-size:15px;font-weight:600;line-height:1.5;white-space:pre-line}
.callnote{margin:16px 0 8px;color:var(--dim);font-size:14px}
.btn-main.call{max-width:320px}
dl.info{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:4px 16px}
dl.info div{display:grid;grid-template-columns:7em 1fr;gap:12px;padding:12px 0}
dl.info div+div{border-top:1px solid var(--line)}
dt{color:var(--dim)}
dd{margin:0;white-space:pre-line}
dd a{display:inline-flex;align-items:center;min-height:44px;margin:-10px 0}
.minimap{margin:12px 0 0;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line);height:200px;background:var(--map-land)}
.src{font-size:13px;color:var(--dim);margin:12px 0 0}

/* 지도 */
.layout{display:grid;grid-template-columns:1fr 340px;gap:16px;align-items:start}
.map{position:relative;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line);background:var(--map-water);height:560px}
.legend{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13px;margin:8px 0 0;color:var(--dim)}
.legend i{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:-1px;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--line)}
.side h2{font-size:15px;margin:0 0 8px}
.side .lead{margin:-4px 0 8px;font-size:13px}
.side .rows{max-height:520px;overflow:auto}
.leaflet-popup-content a{display:inline-flex;align-items:center;min-height:44px}
.leaflet-container a.leaflet-popup-close-button{width:44px;height:44px;font:24px/44px sans-serif}
.leaflet-control-zoom a{width:44px!important;height:44px!important;line-height:44px!important}

/* 글 */
.prose{max-width:42em}
.prose h2{font-size:20px;margin:32px 0 8px}
.prose p,.prose ul{margin:0 0 12px}
.prose li{margin:4px 0}
.prose table{border-collapse:collapse;width:100%;font-size:14px;background:var(--surface)}
.prose th,.prose td{border:1px solid var(--line);padding:8px;text-align:left;vertical-align:top}
.tablewrap{overflow-x:auto}
.sources{font-size:14px}
.sources a{display:inline-flex;align-items:center;min-height:44px}

/* 쿠팡 칸(스위치 기본 끔) */
.cpn{margin:44px 0 0;padding:16px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface)}
.cpn__h{margin:0;font-weight:700}
.cpn__d{margin:4px 0 12px;font-size:12px;color:var(--dim)}
.cpn__l{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cpn__i{display:flex;gap:12px;align-items:center}
.cpn__a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}

/* 더보기 */
.moregrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;margin:0;padding:0;list-style:none}
.moregrid a{display:flex;align-items:center;min-height:52px;padding:8px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);color:var(--ink);text-decoration:none}
.moregrid a:hover{text-decoration:underline}

/* 푸터 */
.foot{margin:64px 0 0;padding:24px 0 32px;border-top:1px solid var(--line);color:var(--dim);font-size:14px}
.foot nav{display:flex;flex-wrap:wrap;gap:0 4px}
.foot a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;color:var(--dim)}
.foot p{margin:8px 0 0}

/* 모바일 — 상단 내비 숨김 + 하단 탭바 5칸 */
.tabbar{display:none}
@media (max-width:900px){.layout{grid-template-columns:1fr}.map{height:60vh;min-height:320px}.side .rows{max-height:none}}
@media (max-width:720px){
  .nav{display:none}
  body{padding-bottom:72px}
  .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;min-height:56px;font-size:12px;color:var(--dim);text-decoration:none;gap:2px}
  .tabbar a svg{width:22px;height:22px}
  .tabbar a[aria-current="page"]{color:var(--ink);font-weight:700}
  .btn-main,.btn-main.call{width:100%;max-width:none}
  .strip li{padding:6px 0;font-size:11px}
  .strip b{font-size:15px}
  .chips a{padding:0 12px}
  .amen .v{font-size:19px}
  dl.info div{grid-template-columns:1fr;gap:0}
}