:root { --primary:#1f7ea3; --primary-dk:#196584; --tint:#e3f3f8; --on-tint:#14607f; --hero:#a8dbea; --hero-fg:#0a3a52; --bg:#f7f8fa; --line:#d0d1dd; --fg:#111218; --sub:#5f616b; --warn:#c2410c; --radius:8px; }
[hidden] { display:none !important; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { margin:0; background:#fff; color:var(--fg); font:16px/1.45 Pretendard, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif; letter-spacing:-0.2px; padding-bottom:env(safe-area-inset-bottom); }
button { font:inherit; letter-spacing:inherit; color:inherit; cursor:pointer; }
.top { display:flex; align-items:center; gap:8px; padding:calc(14px + env(safe-area-inset-top)) 16px 14px; background:#fff; position:sticky; top:0; z-index:5; }
.logo { flex:1; display:flex; align-items:center; gap:6px; font-size:22px; font-weight:800; margin:0; letter-spacing:-0.8px; }
.icon-btn { background:none; border:0; padding:6px; margin-left:-6px; color:var(--fg); display:flex; }
.pill { background:#fff; border:1px solid var(--primary); color:var(--primary); border-radius:999px; padding:8px 14px; font-weight:600; font-size:14px; }

.hero { background:var(--hero); color:var(--hero-fg); position:relative; margin-top:-1px; }
.wave { display:block; width:100%; height:14px; position:absolute; top:-1px; left:0; }
.hero-in { padding:34px 16px 28px; max-width:640px; margin:0 auto; }
.hero h2 { font-size:22px; font-weight:800; margin:0 0 18px; letter-spacing:-0.6px; }
.stats { border:1px solid rgba(10,58,82,.35); background:rgba(255,255,255,.35); border-radius:var(--radius); padding:14px 16px; display:grid; gap:6px; font-size:16px; }
.stats b { font-weight:600; }
.hero .dim { color:var(--hero-fg); }
.hero .btn-white { margin-top:12px; }

main { padding:20px 16px 96px; max-width:640px; margin:0 auto; }
.section-title { display:flex; justify-content:space-between; align-items:center; font-size:20px; font-weight:800; margin:4px 0 14px; letter-spacing:-0.6px; }
.dim { color:var(--sub); font-size:14px; }
.empty { text-align:center; padding:48px 0; color:var(--sub); }

.card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin-bottom:12px; }
.session { width:100%; text-align:left; display:block; cursor:pointer; }
.session:active { background:var(--bg); }
.row { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.session .big { font-size:17px; font-weight:700; }
.session .count { font-size:17px; font-weight:800; color:var(--primary); }
.tags { display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }
.tag { font-size:12px; font-weight:600; border-radius:4px; padding:3px 8px; background:var(--bg); color:var(--sub); }
.tag.blue { background:var(--tint); color:var(--on-tint); }
.tag.warn { background:#fff0e6; color:#9a3d06; }

.chips { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0; }
.chip { min-height:40px; padding:8px 14px; border-radius:999px; font-size:14px; background:#fff; border:1px solid var(--line); color:var(--sub); }
.chip.on { background:var(--primary); border-color:var(--primary); color:#fff; font-weight:600; }
.legend-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:12px; font-size:13px; color:var(--sub); }
.legend-dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:5px; }

input[type=text], input[type=password], input[type=number] { width:100%; font:inherit; color:var(--fg); background:var(--bg); border:1px solid transparent; border-radius:var(--radius); padding:12px; margin-top:8px; outline:none; }
input:focus { border-color:var(--primary); background:#fff; }
.btn { background:var(--primary); color:#fff; border:0; border-radius:var(--radius); padding:12px 20px; font-weight:700; }
.btn:active { background:var(--primary-dk); }
.btn:disabled { opacity:.5; }
.btn-white { display:flex; justify-content:center; width:100%; background:#fff; color:var(--primary); border:0; border-radius:var(--radius); padding:14px; font-weight:700; }
.btn-block { width:100%; }
.more { width:100%; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:12px; color:var(--sub); font-weight:600; }
.err { color:var(--warn); margin:8px 0; font-size:14px; }
.link { background:none; border:0; padding:12px 0 12px 12px; margin:-12px 0; color:var(--primary); font-weight:600; font-size:14px; }
.saved { color:var(--primary); font-weight:600; font-size:14px; }

.map { isolation:isolate; height:300px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); }
.map-card { padding:0; border:0; margin-bottom:20px; }
.pin { width:26px; height:26px; border-radius:50%; border:2px solid #fff; color:#fff; font:700 12px/22px Pretendard, sans-serif; text-align:center; box-shadow:0 1px 4px rgba(0,0,0,.4); }
.pin.stale { border-style:dashed; opacity:.7; }
.leaflet-container { font-family:inherit; }

.tabs { position:fixed; left:0; right:0; bottom:0; z-index:5; display:flex; background:#fff; box-shadow:0 -6px 16px rgba(10,58,82,.10); padding-bottom:env(safe-area-inset-bottom); border-radius:8px 8px 0 0; }
.tabs a { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 0 8px; color:var(--sub); text-decoration:none; font-size:12px; font-weight:600; }
.tabs a.on { color:var(--primary); }

.bars { display:grid; gap:12px; }
.bar-row .top-line { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:6px; }
.bar-row .name { font-weight:700; display:flex; align-items:center; }
.bar-track { height:10px; border-radius:5px; background:var(--bg); overflow:hidden; }
.bar-fill { height:100%; border-radius:5px; }
.hours { display:flex; align-items:flex-end; gap:3px; height:120px; margin-top:8px; }
.hours .h { flex:1; background:var(--tint); border-radius:3px 3px 0 0; min-height:2px; }
.hours .h.peak { background:var(--primary); }
.hours-axis { display:flex; justify-content:space-between; font-size:12px; color:var(--sub); margin-top:6px; }
.filter { display:flex; gap:6px; overflow-x:auto; margin:0 0 12px; padding-bottom:4px; }
.filter .chip { white-space:nowrap; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.hero.compact .hero-in { padding:26px 16px 16px; }
.hero.compact h2 { margin:0 0 4px; font-size:20px; }
.hero .summary { font-size:15px; opacity:.95; }
.fields { display:flex; gap:8px; }
.fields input { margin-top:0; min-width:0; }
.fields input:last-child { flex:1; width:0; }
.fields input:first-child { flex:0 0 38%; }
.chip.more-chip { border-style:dashed; color:var(--primary); }
.status-row { margin-top:8px; min-height:24px; }
.err-text { color:var(--warn); font-size:14px; }
.hint-card { background:var(--tint); color:var(--on-tint); border-radius:var(--radius); padding:14px 16px; margin-bottom:16px; }
.hint-card .dim { color:var(--on-tint); margin-top:4px; }