:root{--ink:#272840;--muted:#74748b;--paper:#fff9eb;--border:#38364e;--mint:#7ec8ad;--rose:#f16a92;--cream:#f3dfba;--purple:#a49bd3;--shadow:4px 4px 0 #34334c;--pixel:2px}
*{box-sizing:border-box}html,body{margin:0;padding:0;min-height:100%;font-family:ui-monospace,Consolas,'Apple SD Gothic Neo','Malgun Gothic',monospace;color:var(--ink)}body{background:#dcd4c4;display:flex;justify-content:center;align-items:center}
#app{position:relative;height:100dvh;width:100%;max-width:560px;background:#ece8dc;overflow:hidden;box-shadow:0 0 0 1px #c8c0b4,0 0 60px #1a16231c}
#map{position:absolute;inset:0;z-index:0;background:#dcd9c4}.maplibregl-control-container .maplibregl-ctrl-attrib{background:#fff9ebd6!important;font:10px/1.3 sans-serif!important}.maplibregl-ctrl-attrib a{color:#394d70}.maplibregl-ctrl-bottom-right{bottom:218px!important}
#grain{pointer-events:none;position:absolute;inset:0;z-index:1;opacity:.15;background-image:linear-gradient(to bottom,#f5e0ad 1px,transparent 1px),linear-gradient(to right,#f5e0ad 1px,transparent 1px);background-size:8px 8px;mix-blend-mode:multiply}
header{position:absolute;z-index:9;top:14px;left:12px;right:12px;background:var(--paper);padding:13px 12px 11px;border:2px solid var(--border);box-shadow:var(--shadow);display:flex;align-items:center;gap:8px} .logo{font-family:Consolas,monospace;font-weight:1000;letter-spacing:-2px;font-size:25px;line-height:1;white-space:nowrap}.logo b{color:#1b9d94}.search{flex:1;min-width:0;background:#efeee5;border:2px solid #c9c3bb;padding:9px 8px;color:#737185;font-size:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.square-btn{border:2px solid var(--border);background:#f9e9ca;color:var(--ink);font-weight:900;width:37px;height:35px;box-shadow:2px 2px 0 var(--ink);cursor:pointer}.square-btn:active{transform:translate(2px,2px);box-shadow:none}
.info-head{position:absolute;z-index:8;top:91px;left:13px;right:13px;display:flex;gap:7px;align-items:flex-start;flex-wrap:wrap}.chip{display:inline-flex;gap:5px;align-items:center;background:#fff6e8e8;border:2px solid #36344a;box-shadow:2px 2px 0 #36344a;padding:6px 8px;font-size:10px;font-weight:900;letter-spacing:-.3px}.chip.green{background:#ccf4d9}.chip.warning{background:#ffe1d9}.chip.status{flex:1;min-width:190px;max-width:100%;font-size:10px;line-height:1.35}
.recenter{position:absolute;right:15px;top:160px;z-index:7;border:2px solid var(--border);background:var(--paper);padding:10px 12px;box-shadow:var(--shadow);font-size:17px;font-weight:900;cursor:pointer}
.poi{width:62px;min-height:64px;display:flex;align-items:center;flex-direction:column;position:relative;cursor:pointer;filter:drop-shadow(1px 3px 0 #302c43)}.poi .sprite{width:46px;height:50px;image-rendering:pixelated;object-fit:contain;transition:filter .15s}.poi .pin{display:flex;align-items:center;justify-content:center;position:absolute;top:-7px;right:-5px;width:20px;height:20px;background:#f47d9c;border:2px solid #fffde8;box-shadow:2px 2px 0 #272840;color:white;font-size:11px;font-weight:900}.poi .pin.hide{display:none}.poi .name{display:inline-block;border:2px solid #272840;padding:3px 4px;background:#fff9e8;font-weight:900;font-size:9px;white-space:nowrap;margin-top:-3px;box-shadow:2px 2px 0 #272840}.poi.selected .sprite{transform:scale(1.14)}.poi.selected .name{background:#ffe1e9}
#sheet{position:absolute;z-index:10;bottom:0;left:0;right:0;height:min(264px,40dvh);min-height:245px;background:var(--paper);border-top:3px solid var(--border);box-shadow:0 -7px 0 #fff7e7aa;display:flex;flex-direction:column}.handle{align-self:center;margin:7px auto 5px;width:52px;height:5px;background:#c7bdc4}.sheet-header{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 17px 4px}.eyebrow{font-size:9px;font-weight:900;color:#438c8a;letter-spacing:1px}.route-title{font-size:17px;font-weight:1000;letter-spacing:-.7px;margin:2px 0}.route-desc{font-size:10px;color:#7c7683}.tag{border:1px solid var(--ink);font-size:10px;background:#e9d5f0;padding:5px 7px;white-space:nowrap}.route-steps{display:flex;gap:6px;overflow-x:auto;padding:8px 15px 10px;scrollbar-width:thin}.stop{min-width:115px;flex:1;background:#f3ebdc;border:2px solid #c6b8a9;padding:7px 8px;cursor:pointer;display:flex;flex-direction:column;gap:4px;text-align:left;font:inherit}.stop.active{border-color:#24233c;background:#ffecdf;box-shadow:2px 2px 0 #24233c}.stop .n{font-size:10px;color:#de5579;font-weight:1000}.stop .t{font-size:12px;font-weight:900;word-break:keep-all}.stop .sub{font-size:9px;color:#77717e}.actions{display:flex;gap:8px;padding:4px 15px 8px}.act{flex:1;background:#79c4aa;color:#272840;border:2px solid var(--border);box-shadow:2px 2px 0 var(--ink);padding:8px;font-size:12px;font-weight:900;cursor:pointer}.act.secondary{background:#f9e8d8}.act:active{transform:translate(2px,2px);box-shadow:none}
#detail{position:absolute;z-index:11;left:13px;right:13px;bottom:276px;background:#fff9e7;border:2px solid var(--border);box-shadow:var(--shadow);padding:12px;display:none}.detail-name{font-size:15px;font-weight:1000;margin:0 0 4px}.detail-sub{font-size:11px;color:var(--muted);line-height:1.5}.detail-coord{font-size:10px;color:#4d7d84;margin-top:6px}.detail-close{position:absolute;top:8px;right:8px;border:0;background:#ffe1d5;font-weight:900;padding:4px 8px;cursor:pointer}.detail-links{display:flex;gap:10px;margin-top:10px;font-size:11px}.detail-links a{color:#127e7e;text-decoration:underline}
#fail{display:none;position:absolute;z-index:12;top:45%;left:10%;right:10%;background:#fff5df;border:3px solid #292a3f;padding:18px;text-align:center;box-shadow:var(--shadow);font-weight:900;line-height:1.5}
@media(min-width:590px){#app{height:min(950px,95vh);border-radius:12px;border:5px solid #24263b}}@media(max-width:400px){.logo{font-size:21px}.search{font-size:10px}.route-title{font-size:15px}.stop{min-width:103px}#sheet{height:258px}.maplibregl-ctrl-bottom-right{bottom:216px!important}}

/* v0.2: Scale marker CONTENT with map zoom, never MapLibre's geolocation transform.
   The 0x0 outer element always sits at the actual longitude/latitude. */
.poi {width:0!important;height:0!important;min-height:0!important;overflow:visible;filter:none!important;display:block!important;cursor:pointer}
.poi .poi-inner {position:absolute;left:0;bottom:0;width:66px;height:53px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;transform:translateX(-50%) scale(var(--poi-scale,1));transform-origin:50% 100%;transition:transform .13s ease;filter:drop-shadow(1px 3px 0 #302c43);pointer-events:auto}
.poi .sprite {width:46px;height:50px;object-fit:contain;image-rendering:pixelated;transform:none!important}
.poi .pin {top:-10px;right:2px}
.poi .name {position:absolute;top:48px;left:50%;transform:translateX(-50%);margin:0;pointer-events:auto}
.poi .anchor-dot {position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:#f16a92;border:1px solid #fff9eb;pointer-events:none}
.poi.selected .poi-inner {filter:drop-shadow(0 2px 0 #302c43) drop-shadow(0 0 4px #f16a92)}
.poi.lowzoom .name {display:none}
.poi.farzoom .sprite{display:none}
.poi.farzoom .poi-inner {width:20px;height:20px;justify-content:center}
.poi.farzoom .pin{position:static;width:19px;height:19px;box-shadow:1px 1px 0 #272840}
/* Continuous road line below the pixel dashes, not disconnected visual snippets. */
#route-note {display:none;font-size:10px;color:#a34a52;padding:0 15px 4px;line-height:1.3}
#route-note.show {display:block}

/* GAMDO v0.4 · geo-anchored wayfinding layers with bundled verified POIs */
.layer-toggles{position:absolute;z-index:9;top:161px;left:12px;right:12px;display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;white-space:nowrap;padding-bottom:3px}
.layer-toggles::-webkit-scrollbar{display:none}
.layer-toggle{appearance:none;flex:1 0 auto;border:2px solid #343348;box-shadow:2px 2px 0 #343348;background:#f9efe0;color:#38354d;font:900 10px/1.2 ui-monospace,monospace;padding:7px 5px;cursor:pointer}
.layer-toggle.active{background:#b3e6d0}.layer-toggle[aria-pressed=false]{color:#8d8691;background:#eee6dc;border-color:#a39ba8;box-shadow:1px 1px 0 #a39ba8}
.recenter{top:207px}
#geo-note{position:absolute;z-index:8;top:206px;left:12px;right:71px;min-height:29px;max-height:53px;overflow:hidden;pointer-events:none;font-size:9px;line-height:1.35;color:#514e63;background:#fff9e5e3;border:1px solid #aaa4ae;padding:5px 7px}
.geo-marker{width:0;height:0;position:relative;overflow:visible;cursor:pointer}
.geo-marker .geo-inner{position:absolute;left:0;bottom:0;transform:translateX(-50%) scale(var(--geo-scale,1));transform-origin:center bottom;white-space:nowrap;display:flex;flex-direction:column;align-items:center;transition:transform .14s ease;pointer-events:auto}
.geo-station .geo-inner{background:#fffdf3;border:2px solid #353549;box-shadow:2px 2px 0 #343347;padding:4px 5px 3px;flex-direction:row;gap:4px;color:#292840;font-weight:900;font-size:10px}
.geo-station .geo-line{border:1px solid white;box-shadow:0 0 0 1px #176a54;background:#3bac82;color:#fff;padding:2px 5px;line-height:1;font-size:10px}
.geo-exit .geo-inner{background:#e8e1fc;border:2px solid #36334f;box-shadow:2px 2px 0 #353549;padding:3px 5px;line-height:1.2;font-weight:900;font-size:10px;color:#3b3268}
.geo-exit .geo-inner:before{content:'';position:absolute;bottom:-7px;left:calc(50% - 3px);width:5px;height:5px;background:#8e71c3;border:1px solid white}
.geo-marker.hidden-zoom{display:none}
.gamdo-landmark-popup .maplibregl-popup-content{background:#fff9e8;color:#2e2b42;box-shadow:3px 3px 0 #33314a;border:2px solid #363449;border-radius:0;padding:10px 13px;font-family:ui-monospace,monospace;font-size:11px;max-width:230px}
.gamdo-landmark-popup .maplibregl-popup-tip{border-top-color:#343348}
.gamdo-landmark-popup .maplibregl-popup-close-button{font-size:17px;padding:0px 6px}
.gamdo-pop-title{font-weight:1000;margin:0 12px 3px 0;font-size:12px}
.gamdo-pop-sub{color:#777180;font-size:10px;line-height:1.4}
@media(max-width:380px){.layer-toggle{font-size:9px;padding:7px 3px}#geo-note{font-size:8px}}


/* v0.4: reliable curated wayfinding. These markers do not depend on Overpass or POI vector layers. */
.local-poi{position:relative;width:0;height:0;overflow:visible;cursor:pointer}
.local-poi .local-inner{position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:3px;transform:translateX(-50%) scale(var(--local-scale,1));transform-origin:center bottom;border:1.5px solid #403b52;background:#fff7dcf2;color:#333044;padding:3px 5px;box-shadow:2px 2px 0 #323145;font-size:10px;line-height:1.1;font-weight:900;white-space:nowrap;pointer-events:auto}
.local-poi .local-inner:after{content:'';position:absolute;bottom:-5px;left:calc(50% - 3px);width:5px;height:5px;transform:rotate(45deg);border-right:1.5px solid #403b52;border-bottom:1.5px solid #403b52;background:#fff7dc}
.local-poi[data-cat="카페"] .local-inner{background:#ffeed6f5}
.local-poi[data-cat="식당"] .local-inner{background:#ffebdef5}
.local-poi[data-cat="편집숍"] .local-inner{background:#e6e0f5f5}
.local-poi[data-cat="명소"] .local-inner{background:#e2f1e4f5}
.local-poi .local-ico{font-size:11px}
.local-poi.local-hidden{display:none!important}
.geo-station .geo-inner{background:#c7f4d7!important;border-color:#27594c!important;color:#164e42!important;font-size:11px!important}
.geo-exit .geo-inner{background:#e7defb!important;border-color:#494063!important}
.geo-marker.hidden-zoom{display:none!important}
@media(max-width:400px){.local-poi .local-inner{font-size:9px;padding:3px 4px}}

/* v0.4 integration: resilient mobile interactions and visible wayfinding */
button{touch-action:manipulation}
button:focus-visible,a:focus-visible{outline:3px solid #187e76;outline-offset:3px}
#map .maplibregl-marker{will-change:transform}
#status{word-break:keep-all}
#detail{max-height:33dvh;overflow:auto}
#route-note{max-height:47px;overflow-y:auto}
@media(max-height:650px){#sheet{height:255px;min-height:230px}.info-head{top:80px}.layer-toggles{top:145px}.recenter{top:188px}#geo-note{top:189px}}
@media(max-width:390px){#geo-note{font-size:8px}.layer-toggle{font-size:9px;letter-spacing:-.7px}.info-head{top:88px}}
@media(prefers-reduced-motion: reduce){.poi .poi-inner,.geo-marker .geo-inner{transition:none!important}}