/* ── 빵의 도시 대전 ──────────────────────────────────────
   색은 빵이 익어가는 단계에서 가져왔다(반죽→노릇→크러스트).
   강조색 하나는 순례 도장의 잉크 적색. 그 밖에는 조용히 둔다. */
:root{
  --paper:#faf7f1; --panel:#fffdf9; --sunken:#f1ebe0;
  --ink:#231a12; --ink-2:#6a5949; --ink-3:#9c8b79;
  --rule:#e4dac9; --rule-2:#cfc0aa;
  --stamp:#a32c1c;                       /* 도장 잉크 */
  --stamp-soft:#f6e3de;
  /* 굽기 5단계 — 진행률 막대가 이 순서로 익는다 */
  --bake-0:#efe4cf; --bake-1:#dcbb85; --bake-2:#c08c4c; --bake-3:#9a5f28; --bake-4:#653413;
  --A:#a32c1c; --B:#3f6b34; --C:#2b5c7a; --D:#6e3b63; --E:#8a6a16;
  --open:#2e6b3a; --open-bg:#e4efe2;
  --shut:#a32c1c; --shut-bg:#f9e7e3;
  --idle:#8a7a68; --idle-bg:#efe9df;
  --warn:#8a5b12; --warn-bg:#fbf0d9;
  --me:#2b5c7a;
  --shadow:0 -12px 34px rgba(35,26,18,.18);
  --r:5px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#17120e; --panel:#1e1813; --sunken:#261e18;
    --ink:#f2eae0; --ink-2:#c0b0a0; --ink-3:#8d7e6f;
    --rule:#332920; --rule-2:#463a2e;
    --stamp:#e0705c; --stamp-soft:#3a1d17;
    --bake-0:#3a2f22; --bake-1:#7a5730; --bake-2:#a87840; --bake-3:#c99a5c; --bake-4:#e6c48c;
    --A:#e0705c; --B:#79ad68; --C:#6ba3c8; --D:#b981ac; --E:#d3ab46;
    --open:#79ad68; --open-bg:#1d2a1a;
    --shut:#e0705c; --shut-bg:#331813;
    --idle:#9b8b79; --idle-bg:#2a221b;
    --warn:#dfae5c; --warn-bg:#2c2314;
    --me:#6ba3c8;
    --shadow:0 -12px 34px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  --paper:#17120e; --panel:#1e1813; --sunken:#261e18;
  --ink:#f2eae0; --ink-2:#c0b0a0; --ink-3:#8d7e6f;
  --rule:#332920; --rule-2:#463a2e;
  --stamp:#e0705c; --stamp-soft:#3a1d17;
  --bake-0:#3a2f22; --bake-1:#7a5730; --bake-2:#a87840; --bake-3:#c99a5c; --bake-4:#e6c48c;
  --A:#e0705c; --B:#79ad68; --C:#6ba3c8; --D:#b981ac; --E:#d3ab46;
  --open:#79ad68; --open-bg:#1d2a1a;
  --shut:#e0705c; --shut-bg:#331813;
  --idle:#9b8b79; --idle-bg:#2a221b;
  --warn:#dfae5c; --warn-bg:#2c2314;
  --me:#6ba3c8;
  --shadow:0 -12px 34px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--paper); color:var(--ink);
  font-family:"Gowun Dodum","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  font-size:15px; line-height:1.5;
  word-break:keep-all; overflow-wrap:anywhere; overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--C);outline-offset:2px}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}
#app{display:flex;flex-direction:column;height:100dvh}

/* ── 머리 ── */
header{flex:0 0 auto;background:var(--panel);border-bottom:2px solid var(--ink);padding:9px 13px 0}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;
         color:var(--ink-3);text-transform:uppercase;cursor:pointer}
.masthead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:1px 0 9px}
.masthead h1{font-family:"Hahmlet","Gowun Dodum",serif;font-weight:800;
             font-size:25px;letter-spacing:-.02em;margin:0;line-height:1.05}
.masthead h1 .zip{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:19px;
                  color:var(--stamp);letter-spacing:.01em}
.masthead .tally{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-2);
                 font-variant-numeric:tabular-nums;white-space:nowrap;padding:3px 7px;
                 border:1.5px solid var(--rule-2);border-radius:999px}
.masthead .tally:active{background:var(--sunken)}
.searchrow{display:flex;gap:6px}
#q{flex:1;min-width:0;padding:9px 11px;border:1.5px solid var(--rule-2);border-radius:var(--r);
   background:var(--sunken);color:var(--ink);font-size:14px;font-family:inherit}
#q::placeholder{color:var(--ink-3)}
#q:focus{border-color:var(--ink);background:var(--panel);outline:none}
.iconbtn{padding:9px 11px;border:1.5px solid var(--rule-2);border-radius:var(--r);
         background:var(--panel);font-size:12.5px;font-weight:600;white-space:nowrap;color:var(--ink-2)}
.iconbtn.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chips{display:flex;gap:5px;overflow-x:auto;padding:9px 0 8px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;padding:5px 10px;
      border:1.5px solid var(--rule-2);border-radius:999px;background:var(--panel);
      font-size:12px;font-weight:500;color:var(--ink-2)}
.chip .dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.chip .cn{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--ink-3);margin-left:1px}
.chip.on .cn{color:var(--paper);opacity:.7}
.chip.gu{font-weight:600}
.chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* 순례 진행을 '굽기'로 — 왼쪽 반죽에서 오른쪽 크러스트로 익는다 */
.bakebar{height:4px;background:var(--sunken);margin:8px -13px 0;overflow:hidden}
.bakebar i{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--bake-0),var(--bake-1),var(--bake-2),var(--bake-3),var(--bake-4));
  transition:width .4s ease}
@media (prefers-reduced-motion:reduce){.bakebar i{transition:none}}
.chiprow{display:flex;gap:5px;overflow-x:auto;padding:8px 0 0;scrollbar-width:none}
.chiprow::-webkit-scrollbar{display:none}
.chiprow:last-of-type{padding-bottom:0}

/* ── 지도 ── */
.maparea{position:relative;flex:1 1 auto;min-height:30dvh;max-height:58dvh;display:flex;
         border-bottom:2px solid var(--ink)}
#map{flex:1 1 auto;background:var(--sunken)}
/* 내 위치 — 지도 오른쪽 아래, 엄지로 닿는 자리 */
.locate{position:absolute;right:11px;bottom:13px;z-index:500;width:46px;height:46px;
        border-radius:50%;background:var(--panel);border:1.5px solid var(--rule-2);
        display:flex;align-items:center;justify-content:center;
        box-shadow:0 2px 8px rgba(35,26,18,.22);color:var(--ink-2)}
.locate svg{width:23px;height:23px;stroke:currentColor;stroke-width:2;
            stroke-linecap:round;fill:none}
.locate svg circle:first-child{fill:currentColor;stroke:none}
.locate:active{background:var(--sunken)}
.locate.on{background:var(--me);border-color:var(--me);color:#fff}
.locate.busy{opacity:.6}
.locate.busy svg{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.meacc{stroke:var(--me);stroke-width:1;fill:var(--me);fill-opacity:.10;stroke-opacity:.45}
.pin{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
     border-radius:4px;border:2px solid #fff;color:#fff;font-weight:700;font-size:9.5px;
     font-family:"IBM Plex Mono",monospace;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.pin.sel{outline:2.5px solid var(--ink);outline-offset:2px}
.mepin{width:14px;height:14px;border-radius:50%;background:var(--me);border:3px solid #fff;
       box-shadow:0 0 0 5px color-mix(in srgb,var(--me) 25%,transparent)}
.leaflet-container{font-family:inherit;background:var(--sunken)}

/* ── 목록: 안내판 ── */
#sheet{flex:0 0 auto;background:var(--panel);display:flex;flex-direction:column;max-height:50dvh}
.sheetbar{display:flex;align-items:center;gap:7px;padding:8px 13px;border-bottom:1.5px solid var(--rule)}
.sheetbar .cnt{flex:1;font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-3);
               letter-spacing:.06em;font-variant-numeric:tabular-nums}
#list{overflow-y:auto}
.item{display:flex;gap:11px;padding:12px 13px;border-bottom:1px solid var(--rule);align-items:flex-start;
      text-align:left;width:100%}
.item:active{background:var(--sunken)}
.item .zn{flex:0 0 auto;width:34px;padding:4px 0;border-radius:4px;text-align:center;
          font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;color:#fff;letter-spacing:.02em}
.item .bd{flex:1;min-width:0}
.item .nm{font-family:"Hahmlet","Gowun Dodum",serif;font-size:15.5px;font-weight:700;line-height:1.3;letter-spacing:-.02em}
.item .meta{font-size:12.5px;color:var(--ink-2);margin-top:4px;line-height:1.5}
.item .dist{flex:0 0 auto;font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:600;
            color:var(--ink);padding-top:3px;font-variant-numeric:tabular-nums}
.item.visited .nm{color:var(--ink-3)}
/* 다녀온 집은 코드 자리에 도장이 찍힌다 */
.item.visited .zn{background:transparent!important;color:var(--stamp);
  border:2px solid var(--stamp);border-radius:50%;width:34px;height:34px;padding:0;
  display:flex;align-items:center;justify-content:center;transform:rotate(-9deg);
  box-shadow:inset 0 0 0 1.5px var(--panel);font-size:9.5px;letter-spacing:0}
.pin.visited{background:var(--panel)!important;color:var(--stamp);border-color:var(--stamp)!important;
  border-radius:50%;transform:rotate(-9deg);opacity:1}
.state{display:inline-flex;align-items:center;gap:4px;padding:1.5px 7px;border-radius:3px;
       font-size:11px;font-weight:600;font-family:"IBM Plex Mono",monospace;white-space:nowrap}
.state::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.state.open{color:var(--open);background:var(--open-bg)}
.state.close{color:var(--shut);background:var(--shut-bg)}
.state.unknown{color:var(--idle);background:var(--idle-bg)}
.tagline{margin-top:6px;display:flex;gap:4px;flex-wrap:wrap}
.tag{font-size:10.5px;padding:2px 6px;border-radius:3px;border:1px solid var(--rule-2);color:var(--ink-3)}
.empty{padding:30px 16px;text-align:center;color:var(--ink-3);font-size:13px}

/* ── 상세 ── */
#detail{position:fixed;inset:auto 0 0 0;background:var(--panel);border-top:2px solid var(--ink);
        max-height:90dvh;overflow-y:auto;transform:translateY(101%);
        transition:transform .24s cubic-bezier(.32,.72,0,1);z-index:1200;box-shadow:var(--shadow)}
#detail.on{transform:translateY(0)}
.dhead{position:sticky;top:0;background:var(--panel);padding:15px 14px 11px;border-bottom:1.5px solid var(--rule);z-index:2}
.dhead .code{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;color:#fff;
             padding:2px 7px;border-radius:3px;display:inline-block;margin-bottom:6px}
.dhead h2{margin:0;font-family:"Hahmlet","Gowun Dodum",serif;font-size:22px;font-weight:700;letter-spacing:-.02em;text-wrap:balance;line-height:1.25}
.dhead .addr{font-size:12.5px;color:var(--ink-2);margin-top:5px}
.dclose{position:absolute;top:12px;right:12px;border:1.5px solid var(--rule-2);border-radius:var(--r);
        padding:6px 10px;font-size:12.5px;font-weight:600;color:var(--ink-2);background:var(--panel)}
.dbody{padding:4px 14px 96px}
.kv{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--rule);font-size:14px}
.kv .k{flex:0 0 54px;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-3);
       letter-spacing:.06em;padding-top:2px}
.kv .v{flex:1;line-height:1.55}
.week{margin-top:8px;display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.week .d{text-align:center;padding:5px 1px;border-radius:4px;background:var(--sunken)}
.week .d .dl{font-size:10.5px;color:var(--ink-3)}
.week .d .dv{font-family:"IBM Plex Mono",monospace;font-size:9.5px;color:var(--ink-2);margin-top:2px;line-height:1.25}
.week .d.rest{background:var(--shut-bg)} .week .d.rest .dv{color:var(--shut)}
.week .d.today{outline:1.5px solid var(--ink);outline-offset:-1.5px}
.week .d.today .dl{color:var(--ink);font-weight:700}
.conflict{margin-top:9px;padding:9px 11px;border-left:3px solid var(--warn);background:var(--warn-bg);
          font-size:12px;line-height:1.55;color:var(--warn);border-radius:0 4px 4px 0}
.dactions{position:fixed;left:0;right:0;bottom:0;display:flex;gap:7px;
          padding:10px 13px calc(10px + env(safe-area-inset-bottom));
          background:var(--panel);border-top:1.5px solid var(--rule)}
.btn{flex:1;padding:13px 10px;border-radius:var(--r);border:1.5px solid var(--rule-2);
     background:var(--panel);font-size:14px;font-weight:600;text-align:center;color:var(--ink)}
.btn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.ghost{flex:0 0 auto;padding:13px 15px}
.btn[disabled]{opacity:.4}
.simi{margin-top:20px}
.simi h3{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.09em;
         color:var(--ink-3);margin:0 0 4px;text-transform:uppercase}
.simi .s{display:flex;gap:10px;padding:11px 0;border-bottom:1px solid var(--rule);
         align-items:center;width:100%;text-align:left}
.simi .s .sq{flex:0 0 auto;width:6px;height:26px;border-radius:2px}
.simi .s .nm{font-size:14px;font-weight:600;flex:1}
.simi .s .why{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--ink-3);text-align:right}

/* ── 코스: 정차 순서 ── */
#course{position:fixed;inset:0;background:rgba(10,12,16,.5);display:none;z-index:1300}
#course.on{display:block}
.cbox{position:absolute;left:0;right:0;bottom:0;background:var(--panel);border-top:2px solid var(--ink);
      max-height:82dvh;overflow-y:auto}
.cbox h2{margin:0;padding:15px 14px;font-family:"Hahmlet","Gowun Dodum",serif;font-size:18px;font-weight:700;border-bottom:1.5px solid var(--rule)}
.cbox h2 span{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-3);font-weight:500;margin-left:6px}
.crow{display:flex;gap:11px;padding:12px 14px;align-items:center;position:relative}
.crow+.crow::before{content:"";position:absolute;left:24px;top:-14px;height:28px;width:2px;background:var(--rule-2)}
.crow .no{width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--paper);
          font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;
          display:flex;align-items:center;justify-content:center;flex:0 0 auto;z-index:1}
.crow .bd{flex:1;min-width:0}
.crow .nm{font-size:14.5px;font-weight:600}
.crow .mt{font-size:11.5px;color:var(--ink-2);margin-top:2px}
.cfoot{display:flex;gap:7px;padding:12px 14px calc(14px + env(safe-area-inset-bottom));
       border-top:1.5px solid var(--rule)}
.leg{padding:0 14px 0 51px;margin:-4px 0 -4px}
.leg .iconbtn{font-size:11.5px;padding:5px 9px;font-weight:500}
.cnote{padding:12px 14px;font-size:12px;line-height:1.6;color:var(--ink-2);background:var(--sunken)}
.cnote b{color:var(--ink)}

/* ── 지나온 길 ── */
#hist{position:fixed;inset:0;background:rgba(10,12,16,.5);display:none;z-index:1350}
#hist.on{display:block}
.hbody{padding:4px 0 6px}
.hsec{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;color:var(--ink-3);
      padding:15px 14px 7px;text-transform:uppercase}
.hrow{display:flex;align-items:center;gap:9px;padding:5px 14px}
.hrow .hk{flex:0 0 96px;font-size:12.5px}
.hrow .hbar{flex:1;height:7px;background:var(--sunken);border-radius:99px;overflow:hidden}
.hrow .hbar i{display:block;height:100%;background:var(--bake-2);border-radius:99px}
.hrow .hn{flex:0 0 44px;text-align:right;font-family:"IBM Plex Mono",monospace;
          font-size:11px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.hday{display:flex;justify-content:space-between;align-items:baseline;padding:13px 14px 5px;
      font-family:"IBM Plex Mono",monospace;font-size:12.5px;font-weight:600;
      border-bottom:1.5px solid var(--rule)}
.hday span{font-size:11px;color:var(--ink-3);font-weight:400}
.hitem{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
       padding:10px 14px;border-bottom:1px solid var(--rule)}
.hitem .zn{flex:0 0 auto;padding:3px 6px;border-radius:3px;color:#fff;
           font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600}
.hitem .nm{font-size:14px;font-weight:600;flex:0 0 auto}
.hitem .ad{font-size:11.5px;color:var(--ink-3);flex:1;text-align:right}
.hkeep{margin:14px;padding:11px 12px;background:var(--sunken);border-radius:var(--r);
       font-size:12px;line-height:1.65;color:var(--ink-2)}
.hkeep b{color:var(--ink)}
.hkeep .iconbtn{margin-top:7px;font-size:12px;padding:6px 10px}

/* ── 내비 고르기 ── */
#nav{position:fixed;inset:0;background:rgba(10,12,16,.55);display:none;z-index:1400;align-items:flex-end}
#nav.on{display:flex}
.navbox{width:100%;background:var(--panel);border-top:2px solid var(--ink);
        padding:16px 14px calc(16px + env(safe-area-inset-bottom))}
.navbox h3{margin:0 0 3px;font-family:"Hahmlet","Gowun Dodum",serif;font-size:17px;font-weight:700}
.navbox p{margin:0 0 13px;font-size:12.5px;color:var(--ink-2)}
.navseg{display:flex;gap:0;border:1.5px solid var(--rule-2);border-radius:var(--r);overflow:hidden;margin-bottom:9px}
.navseg button{flex:1;padding:11px 4px;font-size:13.5px;font-weight:600;color:var(--ink-2);
               background:var(--panel);border-right:1.5px solid var(--rule-2)}
.navseg button:last-child{border-right:none}
.navseg button.on{background:var(--ink);color:var(--paper)}
.navhint{margin:0 0 11px!important;font-size:12px!important;color:var(--ink-3)!important}
.navgrid{display:flex;gap:7px}
.navgrid button{flex:1;padding:15px 6px;border-radius:var(--r);border:1.5px solid var(--rule-2);
                background:var(--panel);font-size:13.5px;font-weight:600;color:var(--ink)}
.navgrid button:active{background:var(--sunken)}
.navgrid button.on{border-color:var(--ink);border-width:2px}
.navgrid button[disabled]{opacity:.35}
.remember{margin-top:12px;font-size:12.5px;color:var(--ink-2);display:flex;align-items:center;gap:7px}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--ink);
       color:var(--paper);padding:9px 15px;border-radius:var(--r);font-size:13px;font-weight:500;
       z-index:1500;opacity:0;transition:opacity .18s;pointer-events:none}
.toast.on{opacity:1}
/* ── 대문 ── */
#gate{position:fixed;inset:0;z-index:2000;background:var(--paper);
      display:flex;align-items:center;justify-content:center;padding:26px 22px;
      overflow-y:auto;will-change:transform}
#gate::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(circle at 18% 12%,var(--sunken) 0 1.5px,transparent 1.6px) 0 0/22px 22px}
#gate.out{transform:translateY(-101%);transition:transform .72s cubic-bezier(.62,.03,.2,1)}
.gatebox{position:relative;max-width:400px;width:100%;text-align:center}
.geyebrow{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.22em;
          color:var(--ink-3);text-transform:uppercase}
.glogo{font-family:"Hahmlet","Gowun Dodum",serif;font-weight:800;font-size:44px;
       letter-spacing:-.03em;margin:6px 0 0;line-height:1}
.glogo .zip{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:32px;color:var(--stamp)}
.glead{margin:14px 0 0;font-size:15px;line-height:1.7;color:var(--ink-2)}
.gstats{display:flex;gap:8px;margin:24px 0 20px;border-top:1.5px solid var(--rule);
        border-bottom:1.5px solid var(--rule);padding:14px 0}
.gstats>div{flex:1;display:flex;flex-direction:column;gap:3px}
.gstats b{font-family:"IBM Plex Mono",monospace;font-size:19px;font-weight:600;
          color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.gstats b i{font-style:normal;color:var(--ink-3);margin:0 1px}
.gstats span{font-size:11px;color:var(--ink-3)}
.gdo{list-style:none;margin:0 0 24px;padding:0;text-align:left;display:flex;
     flex-direction:column;gap:9px}
.gdo li{position:relative;padding-left:20px;font-size:13.5px;color:var(--ink-2);line-height:1.55}
.gdo li::before{content:"";position:absolute;left:2px;top:8px;width:7px;height:7px;
                border-radius:50%;background:var(--bake-2)}
.gdo b{color:var(--ink);font-weight:700}
.genter{width:100%;padding:17px;border-radius:var(--r);background:var(--ink);color:var(--paper);
        font-family:"Hahmlet","Gowun Dodum",serif;font-size:17px;font-weight:700;letter-spacing:-.01em}
.genter:active{transform:translateY(1px)}
.gbake{height:5px;margin:16px 0 0;background:var(--sunken);border-radius:99px;overflow:hidden}
.gbake i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--bake-0),var(--bake-1),var(--bake-2),var(--bake-3),var(--bake-4))}
#gate.ready .gbake i{width:100%;transition:width 1.1s cubic-bezier(.3,.7,.2,1) .15s}
.gnote{margin:16px 0 0;font-size:11.5px;line-height:1.6;color:var(--ink-3)}
/* 대문이 열리면 지도 쪽이 살짝 다가온다 */
#app{opacity:0;transform:scale(1.03)}
#app.shown{opacity:1;transform:scale(1);
  transition:opacity .5s ease .12s,transform .62s cubic-bezier(.2,.7,.2,1) .06s}


/* ── 도장 찍히는 연출 ── */
#stampfx{position:fixed;inset:0;z-index:1600;display:none;pointer-events:none;
         align-items:center;justify-content:center;flex-direction:column;gap:16px;
         background:color-mix(in srgb,var(--paper) 82%,transparent);
         -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
#stampfx.on{animation:fxin .18s ease-out}
@keyframes fxin{from{opacity:0}to{opacity:1}}
#stampfx.on{display:flex}
.stampmark{width:min(58vw,230px);height:auto;color:var(--stamp);overflow:visible}
.stampmark .mark{stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round;
                 transform-origin:60px 60px;opacity:0}
.stampmark .cro{font-family:"Noto Emoji",sans-serif;font-size:52px;font-weight:600;
                fill:currentColor;stroke:none}
.stampmark .shock{stroke:currentColor;opacity:0;transform-origin:60px 60px}
.stampmark .steam path{stroke:currentColor;stroke-width:3;fill:none;stroke-linecap:round;opacity:0}
.stamplabel{font-family:"Hahmlet","Gowun Dodum",serif;font-weight:700;font-size:18px;
            color:var(--ink);opacity:0;text-align:center;line-height:1.5}
.stamplabel .n{display:block;font-family:"IBM Plex Mono",monospace;font-size:13px;
               font-weight:500;color:var(--ink-2);margin-top:3px;font-variant-numeric:tabular-nums}


@keyframes shock{0%{opacity:.55;transform:scale(.9)}100%{opacity:0;transform:scale(1.85)}}
@keyframes labelin{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  #stampfx.on .mark,#stampfx.on .shock,#stampfx.on .stamplabel,    #gate.out{display:none}
  #app{opacity:1;transform:none}
}
/* ── 대문 버튼 두 개 ── */
.gbtns{display:flex;gap:8px}
.genter{flex:2}
.gvenue{flex:1;padding:17px 8px;border-radius:var(--r);border:1.5px solid var(--ink);
        background:var(--panel);color:var(--ink);
        font-family:"Hahmlet","Gowun Dodum",serif;font-size:15px;font-weight:700}
.gvenue:active{background:var(--sunken)}
.mbtns{display:flex;gap:5px;align-items:center}

/* ── 축제장 지도 ── */
#venue{position:fixed;inset:0;z-index:1450;background:var(--paper);display:none;
       flex-direction:column}
#venue.on{display:flex}
.vhead{display:flex;align-items:center;gap:8px;padding:12px 13px;
       border-bottom:2px solid var(--ink);background:var(--panel);flex:0 0 auto}
.vtitle{flex:1;font-family:"Hahmlet","Gowun Dodum",serif;font-size:17px;font-weight:700}
.vback,.vclose{padding:7px 11px;border:1.5px solid var(--rule-2);border-radius:var(--r);
               background:var(--panel);font-size:12.5px;font-weight:600;color:var(--ink-2)}
.vnote{padding:9px 13px;font-size:11.5px;line-height:1.55;color:var(--warn);
       background:var(--warn-bg);border-bottom:1px solid var(--rule)}
.vstage{flex:1 1 auto;min-height:180px;padding:14px 13px;display:flex;overflow:hidden}
#vsvg{width:100%;height:100%;transform-origin:50% 50%}
.zone rect{fill:var(--sunken);stroke:currentColor;stroke-width:.7;rx:1.5}
.zone.hot rect{fill:color-mix(in srgb,currentColor 14%,var(--sunken))}
.zone text{fill:currentColor;text-anchor:middle;font-family:"Hahmlet","Gowun Dodum",serif;
           font-weight:800;paint-order:stroke}
.zone .zl{font-size:9px}
.zone .zc{font-size:3.4px;font-family:"IBM Plex Mono",monospace;font-weight:500;opacity:.75}
.vbooths{flex:0 0 auto;max-height:52dvh;overflow-y:auto;display:none;
         border-top:2px solid var(--ink);background:var(--panel)}
.vbooths.on{display:block}
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1px;
       background:var(--rule)}
.bcell{background:var(--panel);padding:10px 11px;text-align:left;display:flex;gap:9px;align-items:center}
.bcell:active{background:var(--sunken)}
.bcell .bno{font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;
            color:#fff;padding:3px 6px;border-radius:3px;flex:0 0 auto}
.bcell .bnm{font-size:13.5px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bcell.visited .bnm{color:var(--ink-3)}
.bcell.visited .bno{background:transparent!important;color:var(--stamp);
                    border:1.5px solid var(--stamp);border-radius:50%;padding:2px 4px;transform:rotate(-8deg)}

/* ── 저작권 ── */
.gcopy{margin:12px 0 0;font-family:"IBM Plex Mono",monospace;font-size:10.5px;
       letter-spacing:.06em;color:var(--ink-3)}
.appfoot{padding:16px 13px 22px;border-top:1px solid var(--rule);background:var(--sunken)}
.appfoot .src{font-size:10.5px;line-height:1.6;color:var(--ink-3)}
.appfoot .cr{margin-top:8px;font-family:"IBM Plex Mono",monospace;font-size:11px;
             letter-spacing:.05em;color:var(--ink-2)}
.appfoot .cr b{color:var(--ink);font-weight:600}

/* ── 홈 화면에 저장 ── */
.installbtn{width:100%;margin-bottom:10px;padding:12px;border-radius:var(--r);
            border:1.5px solid var(--rule-2);background:var(--panel);color:var(--ink);
            font-size:13.5px;font-weight:600}
.installbtn:active{background:var(--sunken)}
.ginstall{width:100%;margin-top:9px;padding:12px;border-radius:var(--r);border:1.5px dashed var(--rule-2);
          background:transparent;color:var(--ink-2);font-size:13px;font-weight:600}
.ginstall:active{background:var(--sunken)}
#howto{position:fixed;inset:0;background:rgba(10,12,16,.55);display:none;z-index:1500;align-items:flex-end}
#howto.on{display:flex}
#howto .navbox{width:100%}
.steps{margin:0 0 14px;padding:0 0 0 20px;font-size:13.5px;line-height:1.85;color:var(--ink-2)}
.steps b{color:var(--ink)}
.steps li{margin-bottom:2px}

/* ── 축제장 ── */
.festpin{background:var(--ink);color:var(--paper);border:2px solid var(--paper);
         border-radius:4px;text-align:center;font-family:"Hahmlet","Gowun Dodum",serif;
         font-weight:700;font-size:11.5px;line-height:22px;
         box-shadow:0 2px 6px rgba(0,0,0,.35);white-space:nowrap}
.item .dist .dl{display:block;font-family:"Gowun Dodum",sans-serif;font-size:9.5px;
                font-weight:400;color:var(--ink-3);margin-top:1px;letter-spacing:0}