/* 레이아웃: 휴대폰 한 손 앱 — 위에 위치·글씨 버튼, 가운데 카드 흐름, 아래 탭 5개 + 떠 있는 제보 버튼 */
:root{
  --bg:#EEF2F0; --surface:#FFFFFF; --ink:#15201C; --muted:#5A6863; --line:#D9E1DD;
  --accent:#0E6B59; --accent-soft:#DCEEE8; --seal:#B93A27; --seal-soft:#F8E3DE;
  --good:#1E8449; --mid:#B07A00; --busy:#C0392B; --on-seal:#FFFFFF;
  --f-display:"Do Hyeon","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --f-body:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --scale:1;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0E1412; --surface:#17201D; --ink:#E6EDEA; --muted:#9BACA6; --line:#2A3632;
  --accent:#4CC2A5; --accent-soft:#163830; --seal:#F27C66; --seal-soft:#3A1F1A;
  --good:#4CC97E; --mid:#E6B84A; --busy:#F07A6A; --on-seal:#1A0B08; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0E1412; --surface:#17201D; --ink:#E6EDEA; --muted:#9BACA6; --line:#2A3632;
  --accent:#4CC2A5; --accent-soft:#163830; --seal:#F27C66; --seal-soft:#3A1F1A;
  --good:#4CC97E; --mid:#E6B84A; --busy:#F07A6A; --on-seal:#1A0B08; color-scheme:dark}
html.big{--scale:1.2}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:calc(16px*var(--scale));line-height:1.55;-webkit-text-size-adjust:100%}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--surface)}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.app{max-width:520px;margin:0 auto;min-height:100%;padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
.wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--surface);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;gap:8px;padding-block:12px}
.brand{font-family:var(--f-display);font-weight:400;font-size:calc(24px*var(--scale));letter-spacing:.5px;color:var(--accent);margin:0;white-space:nowrap}
.spacer{flex:1}
.pillbtn{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:8px 12px;font-size:.88em;white-space:nowrap;min-height:40px;max-width:46vw;overflow:hidden;text-overflow:ellipsis}
.pillbtn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--surface)}
.notice{font-size:.8em;color:var(--muted);background:var(--accent-soft);padding-block:8px}
main{display:flex;flex-direction:column;gap:18px;padding-block:16px}
h2{font-family:var(--f-display);font-weight:400;font-size:1.35em;margin:0;text-wrap:balance}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px}
.more{border:0;background:none;color:var(--accent);font-weight:700;font-size:.9em;padding:6px 4px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px}
.muted{color:var(--muted)}
.small{font-size:.85em}
.tag{display:inline-block;font-size:.76em;padding:2px 8px;border-radius:999px;background:var(--bg);border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.tag.ch{background:var(--accent-soft);border-color:transparent;color:var(--accent);font-weight:700}
.tag.dday{background:var(--seal-soft);border-color:transparent;color:var(--seal);font-weight:700}
.tag.ex{background:var(--seal-soft);border-color:transparent;color:var(--seal);font-weight:700}
/* 홈 */
.hero{display:flex;flex-direction:column;gap:10px}
.hero .big{font-family:var(--f-display);font-size:calc(28px*var(--scale));line-height:1.2;margin:0}
.soon{display:flex;flex-direction:column;gap:4px}
.soon .t{font-weight:700}
/* 주차(예시) */
.state{font-weight:700}
.s-good{color:var(--good)} .s-mid{color:var(--mid)} .s-busy{color:var(--busy)}
.lot{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding-block:10px;border-top:1px solid var(--line)}
.lot:first-child{border-top:0}
.lot .name{font-weight:700;min-width:0}
.lot .num{font-variant-numeric:tabular-nums;text-align:right;font-weight:700}
.bar{grid-column:1/-1;height:8px;background:var(--bg);border-radius:4px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:4px}
.lot .meta{grid-column:1/-1;font-size:.85em;color:var(--muted)}
.row{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.list{display:flex;flex-direction:column}
.item{display:flex;flex-direction:column;gap:4px;padding-block:12px;border-top:1px solid var(--line)}
.item:first-child{border-top:0;padding-top:2px}
.item .t{font-weight:700}
.benefit .plain{font-size:1.05em;font-weight:700}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 14px;font-weight:500;min-height:40px}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--surface)}
.seg{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:4px;gap:4px}
.seg button{flex:1;border:0;background:none;border-radius:9px;padding:10px 8px;font-weight:700;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent)}
/* 맛집 목록 */
.food{display:grid;grid-template-columns:64px 1fr;gap:12px;padding-block:14px;border-top:1px solid var(--line)}
.food:first-child{border-top:0;padding-top:2px}
.food.sel{background:var(--accent-soft);margin-inline:-14px;padding-inline:14px}
.thumb{aspect-ratio:1;max-width:100%;border-radius:10px;background:linear-gradient(135deg,var(--accent-soft),var(--bg));display:grid;place-items:center;font-family:var(--f-display);font-size:.85em;color:var(--accent);text-align:center;padding:4px;word-break:keep-all}
.food>div{min-width:0;display:flex;flex-direction:column;gap:4px}
.food .name{border:0;background:none;text-align:left;padding:0;font-weight:700;font-size:1.08em;color:var(--ink)}
.food .addr{font-size:.88em;color:var(--muted)}
.food .hours{font-size:.88em}
.closed{color:var(--seal);font-weight:700}
.dist{font-variant-numeric:tabular-nums;font-weight:700;color:var(--accent);white-space:nowrap}
.linkbtn{display:inline-flex;align-items:center;min-height:40px;border:1px solid var(--accent);color:var(--accent);border-radius:10px;padding:7px 12px;font-weight:700;text-decoration:none;font-size:.9em;background:none}
.linkbtn.solid{background:var(--accent);color:var(--surface)}
details.nocoord summary{cursor:pointer;font-weight:700;padding:6px 0}
/* 지도 */
.map{position:relative;height:min(52vh,380px);border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#E8E4DC}
.map.off{height:220px}
#kmap{position:absolute;inset:0}
.map-ui{position:absolute;top:8px;left:8px;right:8px;display:flex;gap:6px;justify-content:space-between;pointer-events:none;z-index:3}
.map-ui>*{pointer-events:auto}
.locbtn{border:0;border-radius:10px;background:var(--surface);color:var(--ink);padding:9px 12px;font-weight:700;font-size:.88em;box-shadow:0 2px 8px rgba(0,0,0,.18);min-height:40px}
.locbtn[aria-pressed="true"]{background:var(--seal);color:var(--on-seal)}
.map-off{position:absolute;inset:0;word-break:keep-all;display:grid;place-items:center;text-align:center;padding:24px;color:#3d4a45;background:#E8E4DC}
.map-off b{display:block;font-family:var(--f-display);font-weight:400;font-size:1.3em;color:#15201C}
.maphint{font-size:.86em;color:var(--muted);margin:6px 2px 0}
.maphint.warn{color:var(--seal);font-weight:700}
.kpin{display:grid;place-items:center;width:30px;height:30px;padding:0;border:2px solid #fff;border-radius:999px 999px 999px 2px;rotate:-45deg;background:#E0563B;box-shadow:0 2px 6px rgba(0,0,0,.35);margin-bottom:6px}
.kpin span{rotate:45deg;font-size:12px;line-height:1;color:#fff;font-weight:700}
.kpin.sel{background:var(--seal);outline:3px solid #15201C;outline-offset:1px;width:36px;height:36px}
.ppin{display:grid;place-items:center;width:28px;height:28px;padding:0;border:2px solid #fff;border-radius:7px;box-shadow:0 2px 6px rgba(0,0,0,.35);color:#fff;font-weight:700;font-size:14px;line-height:1}
.ppin.p-good{background:#1E8449} .ppin.p-mid{background:#B07A00} .ppin.p-busy{background:#C0392B} .ppin.p-none{background:#6B7873}
.ppin.sel{outline:3px solid #15201C;outline-offset:1px;width:34px;height:34px}
.lot button.name{border:0;background:none;text-align:left;padding:0;color:var(--ink);font-size:1em;font-weight:700}
.lot.sel{background:var(--accent-soft);margin-inline:-14px;padding-inline:14px}
.park-line{font-size:.88em;color:var(--muted)}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:.84em;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.kme{width:20px;height:20px;border-radius:50%;background:#2F7BF5;border:3px solid #fff;box-shadow:0 0 0 9px rgba(47,123,245,.22)}
.selcard{display:flex;flex-direction:column;gap:6px;border-color:var(--accent);border-width:2px}
.selcard .t{font-weight:700;font-size:1.15em}
/* 하단 탭 */
nav{position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
nav .in{max-width:520px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr)}
nav button{border:0;background:none;padding:8px 2px 10px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.82em;color:var(--muted);font-weight:700}
nav button svg{width:26px;height:26px}
nav button[aria-current="page"]{color:var(--accent)}
.fab{position:fixed;z-index:7;right:max(16px,calc(env(safe-area-inset-right,0px) + 16px));bottom:calc(80px + env(safe-area-inset-bottom,0px));border:0;border-radius:999px;background:var(--seal);color:var(--on-seal);padding:13px 18px;font-weight:700;font-size:1em;box-shadow:0 6px 18px rgba(0,0,0,.22);display:flex;align-items:center;gap:6px}
@media (min-width:560px){.fab{right:calc(50% - 260px + 16px)}}
/* 제보 시트 */
.sheet-bg{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center}
.sheet-bg[hidden]{display:none}
.sheet{background:var(--surface);width:100%;max-width:520px;border-radius:18px 18px 0 0;padding-block:18px calc(18px + env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:14px;max-height:92%;overflow-y:auto}
.ghost{border:1px solid var(--line);border-radius:12px;background:none;padding:12px;width:100%}
.done{text-align:center;padding-block:12px}
.done .big{font-family:var(--f-display);font-size:1.5em}
@media (prefers-reduced-motion:no-preference){.sheet{animation:up .22s ease-out}@keyframes up{from{transform:translateY(30px);opacity:.6}}}