/* ===== 혼자가도 — site.css =====
   토큰·대비는 docs/mockup/home.html 머리 주석에서 옮겼다(2026-10-14, WCAG 2.x 상대휘도 공식으로 계산).
   4.5:1 미만인 색은 글자에 쓰지 않는다.
   라이트
   --ink     #1F1B2E  on ground 15.29 · on surface 16.74 · on rail 13.89
   --dim     #5A5470  on ground  6.53 · on surface  7.15 · on rail  5.93
   --accent  #5B3FA0  on ground  7.20 · on surface  7.88 (링크 글자) · 흰 글자 on accent 7.88 (주 버튼)
   --warn    #B3261E  on surface 6.54 (오류 전용)
   --lamp    #B97F0C  on surface 3.44 — 장식 점·선 전용(비텍스트 3:1 이상). 글자에 쓰지 않는다
   --line    #DDD9E6  on surface 1.39 — 구분선 전용
   다크
   --ink     #EEEBF5  on ground 15.59 · on surface 14.17 · on rail 12.41
   --dim     #ABA5BF  on ground  7.75 · on surface  7.04 · on rail  6.17
   --accent  #B9A3F0  on ground  8.36 · on surface  7.59 · --ground 글자 on accent 8.36
   --warn    #FF8A80  on surface 7.31
   --lamp    #F2C25B  on surface 10.04 (장식 전용 원칙은 같다)
   --line    #34304A  on surface 1.32 — 구분선 전용
   --map-*   지도 바탕 자리 전용(글자를 올리지 않는다)
   강조색(--accent 채움)은 화면마다 하나: 지도 = 고른 유형 칩, 상세 = '지도 앱에서 길 보기' 버튼.
   현재 위치(내비·탭바·2차 띠)는 --ink 밑줄이다. */
:root{
  --ground:#F5F4F8; --surface:#FFFFFF; --rail:#ECE8F5;
  --ink:#1F1B2E; --dim:#5A5470; --line:#DDD9E6;
  --accent:#5B3FA0; --on-accent:#FFFFFF; --warn:#B3261E; --lamp:#B97F0C;
  --map-a:#E4E1EC;
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#15131E; --surface:#1F1C2B; --rail:#2A2540;
    --ink:#EEEBF5; --dim:#ABA5BF; --line:#34304A;
    --accent:#B9A3F0; --on-accent:#15131E; --warn:#FF8A80; --lamp:#F2C25B;
    --map-a:#24203A;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;
  word-break:keep-all;overflow-wrap:anywhere}
img{max-width:100%}
a{color:var(--accent);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1{margin:24px 0 8px;font-size:clamp(24px,5vw,30px);line-height:1.3;letter-spacing:-.02em}
h2{margin:40px 0 8px;font-size:20px;letter-spacing:-.01em}
.wrap{max-width:1040px;margin:0 auto;padding:0 16px}
.narrow{max-width:760px}
.num{font-variant-numeric:tabular-nums}
.lead{margin:0 0 16px;color:var(--dim)}
.small{font-size:14px;color:var(--dim)}
.skip{position:absolute;left:-9999px;top:0;z-index:2000;padding:12px 16px;background:var(--surface);color:var(--ink)}
.skip:focus{left:8px;top:8px}

/* 머리 — 로고 = 홈, 내비 5칸 */
.top{background:var(--surface);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:24px;min-height:60px}
.logo{display:flex;align-items:center;gap:8px;min-height:44px;color:var(--ink);text-decoration:none;font-weight:800;font-size:19px;letter-spacing:-.02em}
.logo svg{flex:none}
.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}
.nav a:hover{text-decoration:underline}
.nav a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--ink);font-weight:700}

/* 안전 시설 2차 띠 — 줄바꿈, 가로 스크롤 없음 */
.band{background:var(--surface);border-bottom:1px solid var(--line)}
.band .wrap{display:flex;flex-wrap:wrap;gap:0 4px;padding-block:4px}
.band a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:var(--ink);text-decoration:none}
.band a:hover{text-decoration:underline}
.band a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--ink);font-weight:700}

/* 하단 탭바 (≤720px) */
.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;min-height:56px;
    font-size:12px;color:var(--dim);text-decoration:none;gap:2px}
  .tabbar a[aria-current="page"]{color:var(--ink);font-weight:700;box-shadow:inset 0 3px 0 var(--ink)}
  .tabbar svg{width:20px;height:20px}
  .band a{padding:0 8px}
}

/* 홈 머리말 — 이 사이트에서 하나뿐인 그림: 귀갓길 레일 */
.hero{padding:44px 0 32px}
.hero h1{margin:0 0 12px;font-size:clamp(28px,6vw,44px);line-height:1.2;letter-spacing:-.03em;font-weight:800;max-width:16em}
.hero p{margin:0;color:var(--dim);max-width:34em}
.rail-art{margin-top:28px;width:100%;height:auto;display:block}
.rail-art .road{stroke:var(--line);stroke-width:6;stroke-linecap:round;fill:none}
.rail-art .lamp{fill:var(--lamp)}
.rail-art .glow{fill:var(--lamp);opacity:.18}
.rail-art .pin{fill:var(--ink)}
.rail-art text{fill:var(--dim);font-size:13px}
@media (max-width:520px){.rail-art text{display:none}} /* 폭이 좁으면 글자가 4px 로 줄어 읽히지 않는다 — 뜻은 aria-label 과 위 문단이 말한다 */

.block{margin-top:40px}
.block h2{margin:0 0 8px}
.block > p{margin:0 0 16px;color:var(--dim)}
.types{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.types a{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;min-height:72px;padding:12px 16px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;color:var(--ink);text-decoration:none}
.types a:hover{border-color:var(--accent)}
.types b{display:block;font-size:17px}
.types span span{color:var(--dim);font-size:14px}
.glyph{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--rail);font-weight:800}
@media (max-width:720px){.types{grid-template-columns:repeat(2,1fr)}}

/* 목록 줄 = 줄 전체 링크(처음부터 앵커가 줄) */
.rows{list-style:none;margin:0;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.rows li + li{border-top:1px solid var(--line)}
.rows a{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:12px 16px;min-height:44px;color:var(--ink);text-decoration:none}
.rows a:hover .t{text-decoration:underline}
.rows .t{font-weight:700}
.rows .k{color:var(--dim);font-size:14px;text-align:right}
.rows .m{grid-column:1/-1;color:var(--dim);font-size:14px}
.rows .plain{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:12px 16px}
.empty{padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:12px;color:var(--dim)}

.note{margin-top:40px;padding:16px;background:var(--rail);border-radius:12px;font-size:15px}
.note p{margin:0}
.note p + p{margin-top:8px}

/* 칩(필터 칸 1개). 지금 고른 칩만 강조색 — 이 화면의 강조 하나 */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 16px;padding:0;list-style:none}
.chips a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:22px;background:var(--surface);color:var(--ink);text-decoration:none}
.chips a:hover{text-decoration:underline}
.chips a[aria-current="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:700}
.chips small{margin-left:6px;color:inherit;opacity:.85}

/* 지도 */
.head{padding:24px 0 4px}
.head h1{margin:0 0 4px}
.head p{margin:0;color:var(--dim);font-size:15px}
.mapbox{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--map-a)}
.map{height:min(60vh,520px)}
.map.mini{height:320px}
.mapnote{margin:8px 0 0;font-size:14px;color:var(--dim)}
.legend{display:flex;flex-wrap:wrap;gap:4px 16px;margin:8px 0 0;padding:0;list-style:none;font-size:14px;color:var(--dim)}
.legend i{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.legend .lg-place{background:var(--ink)}
.legend .lg-fac{border:3px solid var(--lamp)}
.legend .lg-ring{border:2px dashed var(--dim)}
.tools{display:flex;justify-content:flex-end;margin-top:8px}
.ghost{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit;cursor:pointer}
.ghost:hover{text-decoration:underline}
.pin-glyph{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--surface);
  border:3px solid var(--surface);font:800 13px/1 -apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif}
.leaflet-container{font:inherit;background:var(--map-a)}
.leaflet-popup-content{margin:12px 16px;font-size:14px;line-height:1.5}
.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-size:22px;line-height:44px}
.leaflet-control-zoom a{width:44px!important;height:44px!important;line-height:44px!important}
.leaflet-control-attribution a{display:inline-flex;align-items:center;min-height:44px}
.more{display:flex;justify-content:center;margin-top:16px}
.more a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px}

/* 장소 상세 */
.crumb{margin:16px 0 0;font-size:14px}
.crumb a{display:inline-flex;align-items:center;min-height:44px}
.title{margin:4px 0 4px;font-size:clamp(26px,5.5vw,34px);line-height:1.25;letter-spacing:-.03em}
.where{margin:0;color:var(--dim)}
.photo{margin:16px 0 0}
.photo img{display:block;width:100%;max-height:360px;object-fit:contain;background:var(--surface);border-radius:12px}
.photo figcaption{font-size:13px;color:var(--dim);margin-top:4px}
.hours{margin:16px 0 0;padding:12px 16px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.hours dt{font-size:14px;color:var(--dim)}
.hours dd{margin:0 0 4px}
.hours small{display:block;color:var(--dim);font-size:14px}
.solo{margin:12px 0 0;padding:0;list-style:none;font-size:15px}
.solo li{padding:8px 0;border-top:1px solid var(--line)}
.solo b{display:block}
.solo span{color:var(--dim);font-size:14px}

/* ===== 밤 거리표 — 이 사이트의 주인공. 큰 숫자는 지구대 거리 하나 =====
   고른 까닭: 늦게 돌아올 때 '어디로 가면 사람이 있나' 가 손을 쓰는 숫자다. 나머지는 같은 크기로 키우지 않는다. */
.night{margin-top:32px;padding:20px 16px 16px;background:var(--rail);border-radius:16px}
.night h2{margin:0 0 8px;font-size:18px}
.big{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0}
.big b{font-size:44px;line-height:1.1;letter-spacing:-.03em}
.big b.word{font-size:26px}
.big span{color:var(--dim)}
/* 레일: 0~1km 를 한 줄에 놓는다. 점 위치 = 거리 비율. 점은 장식(--lamp, 비텍스트 3:1 이상), 값은 아래 목록이 글자로 말한다 */
.scale{position:relative;height:40px;margin:20px 8px 4px}
.scale::before{content:"";position:absolute;left:0;right:0;top:18px;height:4px;border-radius:2px;background:var(--line)}
.scale .dot{position:absolute;top:12px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--lamp);box-shadow:0 0 0 6px color-mix(in srgb,var(--lamp) 22%,transparent)}
.scale .me{background:var(--ink);box-shadow:none}
.scale .pol{border-radius:4px;background:var(--ink);box-shadow:none}
.ticks{display:flex;justify-content:space-between;margin:0 8px;font-size:13px;color:var(--dim)}
.facts{list-style:none;margin:16px 0 0;padding:0}
.facts li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:8px 0;border-top:1px solid var(--line)}
.facts .v{font-weight:700;text-align:right}
.facts .s{grid-column:1/-1;color:var(--dim);font-size:14px}
.src{margin:12px 0 0;font-size:14px;color:var(--dim)}
.src a{display:inline-flex;align-items:center;min-height:44px}

.go{margin-top:24px}
.btn{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:10px;background:var(--accent);color:var(--on-accent);font-weight:700;text-decoration:none}
.btn:hover{text-decoration:underline}
@media (min-width:721px){.btn{display:inline-flex}}
.go p{margin:8px 0 0;font-size:14px;color:var(--dim)}
.minimap{margin-top:32px}
.sos{margin-top:32px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.sos h2{margin:0 0 8px;font-size:16px}
.sos p{margin:0}
.sos a{display:inline-flex;align-items:center;min-height:44px}

/* 글 */
.prose{max-width:42em}
.prose h2{margin:32px 0 8px;font-size:19px}
.prose p,.prose ul{margin:0 0 16px}
.prose li + li{margin-top:4px}
.meta{margin:0 0 24px;color:var(--dim);font-size:14px}
.sources{margin-top:32px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:12px;font-size:14px}
.sources h2{margin:0 0 8px;font-size:16px}
.sources ul{margin:0;padding-left:20px}
.sources a{display:inline-flex;align-items:center;min-height:44px}

/* 표(소개·안전 시설). 표만 가로 스크롤 예외 */
.tbl{overflow-x:auto;margin:8px 0 16px}
table{border-collapse:collapse;width:100%;background:var(--surface);font-size:15px}
th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-size:14px;color:var(--dim);font-weight:600}
td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.cards a,.cards div.c{display:block;min-height:44px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:12px;color:var(--ink);text-decoration:none}
.cards a:hover b{text-decoration:underline}
.cards b{display:block;font-size:17px}
.cards span{display:block;color:var(--dim);font-size:14px}
@media (max-width:520px){.cards{grid-template-columns:1fr}}

/* 더보기 — 제목 있는 두 묶음 */
.mgroup{margin:32px 0 8px;font-size:17px}
.mgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.mgrid a{display:flex;align-items:center;min-height:52px;padding:0 16px;background:var(--surface);border:1px solid var(--line);border-radius:12px;color:var(--ink);text-decoration:none}
.mgrid a:hover{text-decoration:underline}

.pager{display:flex;justify-content:center;gap:8px;margin-top:16px}
.pager a,.pager span{display:inline-flex;align-items:center;min-height:44px;padding:0 12px}

/* 쿠팡 칸(fish 와 같은 꼴, 기본 끔) */
.cpn{margin:24px 0;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.cpn__h{margin:0;font-size:17px;font-weight:700}
.cpn__d{margin:4px 0 8px;font-size:13px;color:var(--dim)}
.cpn__l{list-style:none;margin:0;padding:0}
.cpn__l li + li{border-top:1px solid var(--line)}
.cpn__i{position:relative;display:flex;gap:12px;align-items:center;padding:12px 0;min-height:44px}
.cpn__img{flex:none;width:72px;height:72px;object-fit:contain;border-radius:8px;background:#fff}
.cpn__a{color:var(--ink);font-weight:700;text-decoration:none}
.cpn__a::after{content:"";position:absolute;inset:0}
.cpn__i:hover .cpn__a{text-decoration:underline}
.cpn__n{margin:0;color:var(--dim);font-size:14px}

.foot{margin-top:56px;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}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}