:root{
  --bg:#eeece8; --card:#f3f2ef; --ground:#e8e7e3; --plate:#f2f1ee;
  --top:#f7f6f3; --side:#d9d8d4; --ink:#1e1d1b; --ink2:#696866; --line:#c5c4c2;
  --green:#22c55e; --greenD:#16a34a;
  --font: "Pretendard","Apple SD Gothic Neo","Noto Sans KR","Gothic A1","Malgun Gothic",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font); color:var(--ink); background:
  radial-gradient(120% 80% at 30% 10%, #eeedeb 0%, var(--bg) 60%, #d8d7d5 100%);
  -webkit-font-smoothing:antialiased; overflow:hidden;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.stage{height:100%;display:flex;align-items:center;justify-content:center;gap:72px;padding:24px}

/* intro (desktop) */
.intro{max-width:340px;display:none}
.eyebrow{font-size:11px;letter-spacing:.22em;color:var(--ink2);margin-bottom:18px}
.intro h1{font-size:34px;line-height:1.22;font-weight:700;letter-spacing:-.02em;margin-bottom:18px}
.lead{font-size:14px;line-height:1.75;color:#464543;margin-bottom:26px}
.lead b{color:var(--ink)}
.legend{list-style:none;border-top:1px solid var(--line);margin-bottom:22px}
.legend li{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);font-size:13px}
.legend li div{display:flex;justify-content:space-between;flex:1}
.legend small{color:var(--ink2);font-size:12px}
.lg{width:26px;height:16px;flex:none;border-radius:3px}
.lg-district{background:var(--plate);box-shadow:0 1px 2px rgba(63,62,60,.18),0 0 0 1px #d6d5d3}
.lg-block{background:linear-gradient(#f3f2f0,#e8e7e5);box-shadow:0 3px 0 var(--side),2px 5px 6px rgba(73,72,70,.25);height:12px;transform:translateY(-2px)}
.lg-road{height:6px;background:#f2f1ef;box-shadow:inset 0 0 0 1px #cecdcb}
.lg-route{height:4px;background:var(--green);border-radius:4px;position:relative}
.hint{font-size:12.5px;line-height:1.7;color:var(--ink2)}
@media (min-width:900px){.intro{display:block}}

/* phone card */
.phone{
  position:relative; width:min(420px, calc((100vh - 48px)*.49)); height:min(900px, calc(100vh - 48px));
  min-width:340px; background:var(--card); border-radius:38px; display:flex; flex-direction:column;
  box-shadow: 0 1px 0 #fbfaf8 inset, 0 -1px 0 rgba(103,102,100,.08) inset,
    0 40px 70px -30px rgba(69,68,66,.38), 0 18px 30px -18px rgba(69,68,66,.28), 0 2px 4px rgba(69,68,66,.08);
  overflow:hidden; padding:18px 18px 0;
}
@media (max-width:520px){
  .stage{padding:0}
  .phone{width:100%;height:100%;min-width:0;border-radius:0;padding:max(14px,env(safe-area-inset-top)) 14px 0}
  body{background:var(--card)}
}

.map-wrap{position:relative;flex:1;min-height:0;border-radius:24px;overflow:hidden;background:var(--ground);
  box-shadow: inset 0 1px 3px rgba(73,72,70,.18), inset 0 0 0 1px rgba(103,102,100,.06)}
#map{width:100%;height:100%;display:block;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.map-tag{position:absolute;right:12px;top:10px;font-size:10.5px;letter-spacing:.08em;color:var(--ink2);
  background:rgba(241,240,238,.85);padding:4px 9px;border-radius:20px;pointer-events:none;z-index:2;
  box-shadow:0 1px 2px rgba(73,72,70,.12)}
.back{position:absolute;left:10px;top:9px;z-index:3;display:flex;align-items:center;gap:3px;font-size:11.5px;
  background:rgba(241,240,238,.92);padding:5px 10px 5px 6px;border-radius:20px;box-shadow:0 1px 3px rgba(73,72,70,.18)}
.back svg{width:14px;height:14px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.back[hidden]{display:none}

/* panel */
.panel{flex:none;height:250px;padding:18px 6px 4px;overflow:hidden;display:flex;flex-direction:column}
.ft{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;letter-spacing:-.01em;padding-bottom:13px;border-bottom:1px solid #282725;white-space:nowrap}
.ft .ic{width:12px;height:12px;flex:none}
.ft .arrow{flex:1;height:1px;background:var(--ink);position:relative;min-width:24px}
.ft .arrow:after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:1px solid var(--ink);border-right:1px solid var(--ink);transform:rotate(45deg)}
.ft .nm{overflow:hidden;text-overflow:ellipsis;max-width:42%}
.ft .sub{font-weight:500;color:var(--ink2);font-size:12px;margin-left:auto}
.desc{font-size:12.8px;line-height:1.62;color:#3a3937;padding:11px 0 10px;border-bottom:1px solid #282725}
.rows{flex:1;min-height:0;overflow:auto;scrollbar-width:none}
.rows::-webkit-scrollbar{display:none}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid #282725;font-size:13.5px}
.row:last-child{border-bottom:0}
.row .k{color:#2c2b29;flex:none}
.row .v{text-align:right;color:var(--ink);font-weight:500}
.chips{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 6px}
.chip{font-size:12px;padding:2px 8px;border-radius:12px;background:#e1e0de;cursor:pointer;white-space:nowrap}
.chip:hover{background:#d7d6d4}
.chip.g{background:transparent;padding:2px 0;cursor:default}
.acts{display:flex;gap:8px;padding-top:10px}
.btn{flex:1;font-size:12.5px;padding:8px 10px;border-radius:12px;background:#e1e0de;box-shadow:inset 0 0 0 1px #cfcecc}
.btn:hover{background:#d9d8d6}
.btn.pri{background:var(--ink);color:#f1f0ee;box-shadow:none}

/* dock */
.dock{flex:none;display:flex;justify-content:space-around;align-items:center;height:76px;padding-bottom:env(safe-area-inset-bottom)}
.dock button{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;transition:background .2s}
.dock button:hover{background:rgba(103,102,100,.08)}
.dock svg{width:26px;height:26px}
.dock .f{fill:var(--ink)}
.dock .s{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round}
.dock button.on{background:rgba(103,102,100,.1)}

/* sheet */
.sheet{position:absolute;left:0;right:0;bottom:0;max-height:72%;background:var(--card);border-radius:28px 28px 0 0;
  box-shadow:0 -14px 40px -12px rgba(69,68,66,.35);display:flex;flex-direction:column;padding:16px 22px 20px;z-index:10;
  animation:up .28s cubic-bezier(.2,.8,.2,1)}
.sheet[hidden]{display:none}
@keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.sheet-head{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:15px;padding-bottom:12px;border-bottom:1px solid #282725}
.sheet-head button{font-size:12px;color:var(--ink2);font-weight:500}
.sheet-body{overflow:auto;padding-top:4px}
.opt{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;padding:12px 0;border-bottom:1px solid var(--line);font-size:13.5px;gap:12px}
.opt small{color:var(--ink2);font-size:12px;flex:none}
.opt:hover{color:#010000}
.sel-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px;gap:12px}
.sel-row select{font:inherit;font-size:13px;background:#e1e0de;border:0;border-radius:10px;padding:6px 8px;max-width:62%;color:var(--ink)}
.sec{font-size:10.5px;letter-spacing:.16em;color:var(--ink2);padding:16px 0 4px}
.about p{font-size:13px;line-height:1.75;color:#3a3937;padding:10px 0;border-bottom:1px solid var(--line)}
.about p:last-child{border-bottom:0}

#map3d{position:absolute;inset:0}
#map3d canvas{width:100%!important;height:100%!important;display:block;touch-action:none;cursor:grab}
#map3d canvas:active{cursor:grabbing}
.labels{position:absolute;inset:0;pointer-events:none}
.dlabel{font-size:10px;font-weight:700;color:#71706e;letter-spacing:.02em;white-space:nowrap;padding:0 0 3px;text-shadow:0 1px 0 #f1f0ee}
.blabel{font-size:11.5px;font-weight:600;color:#373634;text-align:center;line-height:1.25;white-space:nowrap;
  background:rgba(247,246,244,.82);padding:2px 6px;border-radius:7px;box-shadow:0 1px 3px rgba(73,72,70,.18);transform:translateY(-4px)}
.blabel.w1,.blabel.w2{font-size:10px;font-weight:500;padding:1px 5px}
.blabel.w5{font-size:12.5px;font-weight:700}
.blabel.on{background:#1e1d1b;color:#f1f0ee}
.viewtog{position:absolute;right:10px;bottom:10px;z-index:3;display:flex;background:rgba(241,240,238,.92);border-radius:20px;padding:3px;box-shadow:0 1px 3px rgba(73,72,70,.18)}
.viewtog button{font-size:11px;padding:4px 10px;border-radius:16px;color:var(--ink2)}
.viewtog button.on{background:var(--ink);color:#f1f0ee}
.gesture{position:absolute;left:12px;bottom:14px;z-index:2;font-size:10px;color:#81807e;pointer-events:none;letter-spacing:.02em}

.step{display:grid;grid-template-columns:18px auto 1fr;align-items:baseline;gap:8px;padding:9px 0;border-bottom:1px solid #2a2927;font-size:12.5px}
.step .n{font-size:11px;color:var(--ink2);font-variant-numeric:tabular-nums}
.step .chip{justify-self:start}
.step .t{color:#3c3b39;line-height:1.5}

/* code & cross-map link */
.desc code,.step code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;background:#e4e3e0;padding:0 4px;border-radius:4px}
.cmd{margin:0;padding:8px 0 9px;border-bottom:1px solid #282725;overflow-x:auto;scrollbar-width:none}
.cmd::-webkit-scrollbar{display:none}
.cmd code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;color:#1e1d1b;background:#e4e3e0;padding:4px 8px;border-radius:7px;white-space:pre;display:inline-block}
.maplink[hidden]{display:none}
.intro-link{display:inline-block;margin-top:18px;font-size:13px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:2px}
.maplink.pill{position:absolute;left:10px;top:9px;z-index:3;font-size:11px;color:var(--ink);text-decoration:none;background:rgba(241,240,238,.92);padding:5px 10px;border-radius:20px;box-shadow:0 1px 3px rgba(73,72,70,.18)}
.zoomed .maplink.pill{display:none}
.about a.inl{color:var(--ink);font-weight:600}