/* 축제지도 — D안(사진 카드) · G 밝게 */
:root {
  --bg:#FFFFFF; --soft:#EEF3FA; --ink:#0B2545; --sub:#6B7F99; --sep:#B8C6D8; --land:#DDE6F1; --has:#B6EEDC; --hov:#8FE3C8;
  --zero:#9AAAC0; --cnt:#0F9F79; --acc:#0B2545; --onacc:#63E6BE; --live:#0F9F79; --new:#FFD43B; --onnew:#0B2545;
  --sel:#0B2545; --body:#44597A; --line:#E3EAF3;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; background:var(--bg); color:var(--ink); font-family:Pretendard,system-ui,-apple-system,sans-serif; }
button { font-family:inherit; }
.app { max-width:480px; margin:0 auto; min-height:100vh; padding-bottom:env(safe-area-inset-bottom); }
.loading { padding:40vh 0; text-align:center; color:var(--sub); }

/* 위 고정 바 */
.top { position:sticky; top:0; background:var(--bg); z-index:3; box-shadow:0 1px 0 var(--line); padding-top:env(safe-area-inset-top); }
.bar { display:flex; align-items:center; padding:12px 12px 4px 16px; gap:6px; font-size:15px; min-height:48px; }
.bar .ic { width:26px; height:26px; border-radius:7px; margin-right:4px; flex:none; }
.bar .c { color:var(--sub); cursor:pointer; white-space:nowrap; }
.bar .c.cur { color:var(--ink); font-weight:800; font-size:18px; cursor:default; }
.bar .sep { color:var(--sep); }
.bar .sp { flex:1; }
.iconbtn { width:38px; height:38px; border:0; border-radius:19px; background:none; color:var(--ink); font-size:19px; cursor:pointer; display:flex; align-items:center; justify-content:center; position:relative; }
.iconbtn:active { background:var(--soft); }
.iconbtn svg { width:22px; height:22px; }
.iconbtn .dot { position:absolute; top:7px; right:7px; width:8px; height:8px; border-radius:4px; background:var(--cnt); border:2px solid var(--bg); }
.per { display:flex; gap:6px; padding:8px 16px 12px; overflow-x:auto; scrollbar-width:none; }
.per::-webkit-scrollbar { display:none; }
.per button, .per label { border:0; background:var(--soft); color:var(--ink); border-radius:10px; padding:7px 12px; font:600 13px Pretendard,system-ui; white-space:nowrap; cursor:pointer; position:relative; }
.per .on { background:var(--acc); color:var(--onacc); }
.per input { position:absolute; inset:0; opacity:0; width:100%; }

/* 지도 */
.mapwrap { background:var(--soft); margin:0 16px; border-radius:18px; overflow:hidden; position:relative; }
/* svh: 주소창이 숨었다 나타나도 높이가 변하지 않는 단위 */
.map { width:100%; height:38vh; height:38svh; min-height:250px; display:block; touch-action:pan-y; user-select:none; -webkit-user-select:none; transition:height .22s ease; }
.rg { fill:var(--land); stroke:var(--soft); stroke-width:1; cursor:pointer; vector-effect:non-scaling-stroke; }
/* 단계 확대 버튼(＋/－) */
.zbtns { position:absolute; right:10px; bottom:10px; display:flex; flex-direction:column; background:#fff; border-radius:12px; box-shadow:0 1px 6px rgba(11,37,69,.16); overflow:hidden; }
.zbtns button { width:36px; height:34px; border:0; background:none; color:var(--ink); font:500 19px/1 Pretendard,system-ui; cursor:pointer; }
.zbtns button + button { border-top:1px solid var(--line); }
.zbtns button:disabled { color:#C9D3E0; cursor:default; }
/* 단계가 바뀌면 새 그림이 이전 그림 위로 부드럽게 나타난다 */
.live.in { animation:mapin .2s ease-out both; }
.old { pointer-events:none; }
@keyframes mapin { from { opacity:0; } to { opacity:1; } }
/* 지역을 눌러 날아갈 때: 목적지 말고는 옅어지고, 도착한 화면에선 글자·점만 살짝 나타남 */
.fadeout { opacity:0 !important; transition:opacity .22s ease; }
.enter .lb, .enter .rgname, .enter .dongname, .enter .dot, .enter .ph, .enter .bdgw, .enter .phname,
.enter .dongline, .enter .sggline, .enter .sidoline { animation:mapin .28s ease-out both; }
/* 확대 단계: 시·도 경계는 조금 굵게 */
.sidoline { fill:none; stroke:#9FB0C7; stroke-width:1.4; pointer-events:none; vector-effect:non-scaling-stroke; }
/* 동 단계: 동끼리는 가는 흰 선, 시군구끼리는 굵은 흰 선. 동 면은 틈이 안 보이게 같은 색 테두리 */
.rg.dg { stroke:var(--land); stroke-width:.6; }
.rg.dg.has { stroke:var(--has); }
.rg.dg.sel { stroke:var(--sel); }
.dongline { fill:none; stroke:#fff; stroke-width:.8; stroke-opacity:.9; pointer-events:none; vector-effect:non-scaling-stroke; }
.sggline { fill:none; stroke:#fff; stroke-width:2.2; pointer-events:none; vector-effect:non-scaling-stroke; }
.dongname { text-anchor:middle; font:500 10px Pretendard,system-ui; fill:#8FA2BA; pointer-events:none; paint-order:stroke; stroke:rgba(255,255,255,.55); stroke-width:2.5px; stroke-linejoin:round; }
.dongname.onsel { fill:rgba(255,255,255,.72); stroke:none; } /* 고른 시군구(남색) 위에서는 밝은 글자 */
/* 축제 위치 점: 어디에 몰려 있는지만 보여주는 표시(누르는 대상 아님) */
.dot { fill:var(--cnt); stroke:#fff; stroke-width:1.2; pointer-events:none; }
.dot.news { fill:#fff; stroke:var(--cnt); stroke-width:1.6; }
.withdots .lb text { paint-order:stroke; stroke:rgba(255,255,255,.75); stroke-width:3px; stroke-linejoin:round; }
.withdots .lb.sel text { stroke:none; }
/* 마지막 단계: 축제 사진 */
.rgname { text-anchor:middle; font:600 11px Pretendard,system-ui; fill:#8C9DB5; pointer-events:none; }
.ph { cursor:pointer; }
.ph .ring { fill:#fff; stroke:rgba(11,37,69,.16); stroke-width:1; }
.ph .noimg { fill:var(--soft); }
.ph .em { text-anchor:middle; font-size:17px; pointer-events:none; }
.bdgw { pointer-events:none; }
.bdg { fill:#fff; stroke:var(--has); stroke-width:1.5; }
.bdgt { text-anchor:middle; font:800 10px Pretendard,system-ui; fill:var(--cnt); pointer-events:none; }
.phname { text-anchor:middle; font:700 10px Pretendard,system-ui; fill:var(--ink); paint-order:stroke; stroke:rgba(255,255,255,.9); stroke-width:3px; stroke-linejoin:round; pointer-events:none; }
.sheetlist { max-height:55vh; overflow-y:auto; padding:0; }
.rg.has { fill:var(--has); }
.rg.sel { fill:var(--sel); }
@media (hover:hover) { .rg:hover { fill:var(--hov); } }
.lb { cursor:pointer; }
.lb text { text-anchor:middle; font:600 10px Pretendard,system-ui; fill:var(--ink); pointer-events:none; }
.lb .cnt { font:800 12px Pretendard,system-ui; fill:var(--cnt); }
.lb.zero text { fill:var(--zero); }
.lb.sel text { fill:#fff; } .lb.sel .cnt { fill:var(--onacc); }

/* 목록 */
.cnthead { padding:18px 16px 2px; font-size:14px; color:var(--sub); }
.cnthead b { color:var(--ink); font-size:17px; }
.grp { padding:16px 16px 4px; font-size:13px; font-weight:800; color:var(--sub); }
.cards { padding:0 16px 8px; }
.cd { display:flex; gap:14px; padding:9px 0; cursor:pointer; align-items:center; }
.th { width:76px; height:76px; border-radius:14px; background:var(--soft) center/cover no-repeat; flex:none; display:flex; align-items:center; justify-content:center; font-size:26px; }
.cd .t { font-size:16px; font-weight:700; line-height:1.3; word-break:keep-all; }
.cd .m { color:var(--sub); font-size:13px; margin-top:5px; }
.live { color:var(--live); font-weight:700; }
.new { font-size:10px; font-weight:800; color:var(--onnew); background:var(--new); border-radius:4px; padding:1px 4px; margin-left:5px; vertical-align:2px; }
.star { color:var(--cnt); margin-left:4px; font-size:13px; }
.empty { padding:36px 16px; text-align:center; color:var(--sub); font-size:14px; }
.foot { padding:24px 16px 36px; color:var(--zero); font-size:11px; line-height:1.6; }
.foot b { color:var(--sub); font-weight:600; }

/* 상세 */
.hero { width:100%; aspect-ratio:1/1; background:var(--soft) center/cover no-repeat; display:flex; align-items:center; justify-content:center; font-size:80px; }
.det { padding:18px 18px 40px; }
.det .hd { display:flex; align-items:flex-start; gap:10px; }
.det h2 { margin:0 0 10px; font-size:23px; flex:1; word-break:keep-all; line-height:1.3; }
.det .starbtn { flex:none; border:0; background:var(--soft); width:44px; height:44px; border-radius:22px; font-size:22px; cursor:pointer; color:var(--ink); }
.det .starbtn.on { background:var(--acc); color:var(--new); }
.det .row { display:flex; gap:10px; margin:9px 0; color:var(--body); font-size:15px; line-height:1.45; }
.det .row span:first-child { flex:none; width:18px; text-align:center; }
.det .row a { color:var(--body); }
.det .note { margin-top:12px; padding:10px 12px; background:var(--soft); border-radius:12px; font-size:13px; color:var(--body); }
.det .alarm { margin-top:8px; font-size:13px; color:var(--cnt); font-weight:700; }
.det .go { display:block; text-align:center; margin-top:20px; padding:15px; border-radius:14px; background:var(--acc); color:var(--onacc); text-decoration:none; font-weight:800; font-size:16px; }
.close { position:fixed; top:calc(12px + env(safe-area-inset-top)); left:max(12px, calc(50% - 228px)); width:40px; height:40px; border-radius:20px; border:0; background:rgba(255,255,255,.92); color:var(--ink); font-size:22px; cursor:pointer; box-shadow:0 2px 10px rgba(11,37,69,.15); z-index:5; }

/* 알림 시점 선택창 */
.sheet-bg { position:fixed; inset:0; background:rgba(11,37,69,.35); opacity:0; pointer-events:none; transition:opacity .2s; z-index:10; }
.sheet-bg.on { opacity:1; pointer-events:auto; }
.sheet { position:fixed; left:0; right:0; bottom:0; max-width:480px; margin:0 auto; background:var(--bg); border-radius:22px 22px 0 0; padding:10px 20px calc(22px + env(safe-area-inset-bottom)); transform:translateY(105%); transition:transform .25s ease; z-index:11; }
.sheet.on { transform:none; }
.sheet::before { content:""; display:block; width:36px; height:4px; border-radius:2px; background:var(--line); margin:0 auto 14px; }
.sheet h3 { margin:0 0 4px; font-size:18px; }
.sheet .s { color:var(--sub); font-size:13px; margin-bottom:12px; }
.opt { display:flex; align-items:center; gap:12px; padding:13px 2px; border-bottom:1px solid var(--line); font-size:16px; cursor:pointer; }
.opt input { width:20px; height:20px; accent-color:var(--acc); }
.opt small { color:var(--sub); margin-left:auto; font-size:13px; }
.opt.off { color:var(--zero); cursor:default; }
.sheet .btns { display:flex; gap:8px; margin-top:16px; }
.sheet .btns button { flex:1; padding:14px; border:0; border-radius:14px; font-weight:800; font-size:15px; cursor:pointer; background:var(--soft); color:var(--ink); }
.sheet .btns .pri { background:var(--acc); color:var(--onacc); }
.sheet .warn { font-size:13px; color:var(--body); background:var(--soft); padding:9px 12px; border-radius:10px; margin-top:12px; }

.toast { position:fixed; left:50%; bottom:calc(28px + env(safe-area-inset-bottom)); transform:translate(-50%, 20px); background:var(--acc); color:#fff; padding:11px 16px; border-radius:12px; font-size:14px; opacity:0; transition:.2s; pointer-events:none; z-index:20; max-width:90vw; text-align:center; }
.toast.on { opacity:1; transform:translate(-50%, 0); }