:root{font-family:'Noto Sans KR',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#233d36;background:#e9ede6;font-synthesis:none;--ink:#233d36;--muted:#758077;--accent:#28594b;--border:#dcded2;--paper:#fcfbf5;--route:#c77857;--shadow:0 8px 34px #3144380e}
*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:disabled{opacity:.3;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #ba8e51;outline-offset:4px}button{border:0;background:none}button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin:0}#app{position:relative;height:100svh;min-height:520px;overflow:hidden}#stage{position:absolute;inset:0;background:#e9ede6}#city{width:100%;height:100%;display:block;touch-action:none;outline:none;cursor:grab}#city:active{cursor:grabbing}#labels{position:absolute;inset:0;pointer-events:none}.glass{background:#fcfbf5f0;border:1px solid #fffffff0;box-shadow:var(--shadow);backdrop-filter:blur(14px)}
.topbar{position:absolute;top:0;left:0;right:0;z-index:10;padding:24px 30px;display:flex;justify-content:space-between;align-items:center;gap:24px;pointer-events:none}.topbar>*{pointer-events:auto}.brand{display:flex;align-items:center;gap:13px}.brand>svg{width:29px;height:38px;fill:none;stroke:var(--accent);stroke-width:1.7}.brand>svg circle{fill:#cf98a0;stroke:#af7b83}.brand span{display:block;font-size:10px;letter-spacing:.17em;color:#66746a;margin-bottom:4px}.brand h1{font-size:23px;letter-spacing:-.06em;font-weight:600}.days{display:flex;gap:5px;padding:5px;border-radius:15px;background:#fcfbf5e8;border:1px solid #ffffff;box-shadow:var(--shadow)}.days button{padding:9px 23px;min-height:50px;border-radius:10px;font-size:14px;font-weight:500;transition:background .2s}.days button span{display:block;font-size:10px;letter-spacing:.09em;opacity:.6;margin-bottom:3px}.days button[aria-pressed=true]{background:var(--accent);color:#fffdf1}.top-actions{display:flex;align-items:center;gap:18px}.trip-date{font-size:12px;letter-spacing:.045em;color:#66746a}.icon-button{display:grid;place-items:center;min-width:42px;min-height:42px;font-size:26px;line-height:1;border-radius:9px}.icon-button:hover{background:#294d3d0b}.top-actions .icon-button{font-size:23px;background:#fcfbf5d9}.itinerary{position:absolute;left:28px;top:120px;bottom:233px;width:271px;border-radius:18px;display:flex;flex-direction:column;z-index:5;overflow:hidden}.itinerary-heading{padding:23px 22px 15px}.eyebrow{font-size:10px;letter-spacing:.15em;color:#7e897e;font-weight:500}.itinerary h2{font-size:20px;letter-spacing:-.065em;line-height:1.4;margin:7px 0}.itinerary-heading p{font-size:12px;color:var(--muted)}#stops{margin:0;padding:0 10px 8px;list-style:none;overflow-y:auto;flex:1;scrollbar-width:thin;scrollbar-color:#cbd1c3 transparent}#stops li{position:relative}#stops li:not(:last-child):before{content:'';position:absolute;left:23px;top:33px;bottom:-12px;border-left:1px solid #d3d8ca}#stops button{width:100%;display:flex;align-items:center;text-align:left;gap:13px;border-radius:11px;padding:10px;position:relative}.stop-number{width:27px;height:27px;display:grid;place-items:center;border:1px solid #d6dbcf;border-radius:50%;background:var(--paper);color:#788174;font-size:11px;flex-shrink:0}.stop-copy{display:flex;flex-direction:column;gap:3px}.stop-time{font-size:10px;letter-spacing:.02em;color:var(--muted)}.stop-name{font-size:14px;letter-spacing:-.035em}#stops button[aria-pressed=true]{background:#e7ecde}#stops button[aria-pressed=true] .stop-number{background:var(--accent);color:#fff;border-color:var(--accent)}#stops button[aria-pressed=true] .stop-name{font-weight:600}.stop-mode{margin-left:auto;color:#8d9b8d;font-size:12px}.plan-foot{margin:0 19px;padding:13px 0;border-top:1px solid var(--border);font-size:10px;color:#83907f;display:flex;gap:6px;align-items:center}.small-dot{width:5px;height:5px;background:#8b9e6e;border-radius:50%}.scene-caption{position:absolute;top:125px;left:330px;pointer-events:none;display:grid;gap:5px}.scene-caption span{font-size:10px;letter-spacing:.17em;color:#738879}.scene-caption strong{font-size:15px;font-weight:400;color:#5a705f;letter-spacing:-.03em}.map-tools{position:absolute;right:28px;top:118px;border-radius:14px;padding:4px;z-index:6;display:flex;flex-direction:column;gap:2px}.map-tools .icon-button{width:40px;height:40px;min-width:40px;min-height:40px}.compass{position:relative;margin-bottom:5px;display:flex;flex-direction:column;gap:2px}.compass span{font-size:9px;font-weight:700}.compass svg{width:20px;height:20px;fill:#a0b393;stroke:#55795c;stroke-width:1}.detail{position:absolute;right:28px;bottom:119px;width:280px;border-radius:18px;overflow:hidden;z-index:7}.detail-photo{height:148px;position:relative;background:#d6ded3}.detail-photo img{display:block;width:100%;height:100%;object-fit:cover}.detail-photo:after{content:'';position:absolute;inset:65% 0 0;background:linear-gradient(transparent,#14272166)}#photo-caption{position:absolute;bottom:10px;left:15px;color:white;font-size:10px;z-index:1}.detail-content{padding:20px}.detail-meta{display:flex;justify-content:space-between;color:#7c8b77;font-size:10px;letter-spacing:.03em}.detail h2{font-size:23px;font-weight:500;letter-spacing:-.065em;margin:8px 0 5px}.time{font-size:12px;color:#68815e;letter-spacing:.015em;margin-bottom:15px}#place-desc{font-size:13px;line-height:1.8;color:#687464;word-break:keep-all}.address-row{display:flex;align-items:center;gap:8px;padding-top:13px;margin-top:14px;border-top:1px solid #e1e4d8}.address-row>span{color:#87917e}.address-row p{font-size:11px;line-height:1.6;flex:1;overflow-wrap:anywhere;color:#697360}.address-row .icon-button{min-width:30px;min-height:34px}.address-row svg{width:14px;height:14px}.place-note{font-size:10px;line-height:1.65;color:#999e8c;margin-top:9px}.map-link{font-size:11px;color:#4f7056;display:flex;justify-content:space-between;align-items:center;margin-top:14px}.map-link span{font-size:18px}.detail-toggle{display:none}.minimap{position:absolute;left:28px;bottom:72px;width:271px;height:145px;border-radius:15px;padding:12px 13px 8px;z-index:5}.minimap-heading{display:flex;justify-content:space-between;font-size:10px;color:#788875;position:absolute;left:14px;right:14px;top:12px}.minimap-heading span:first-child{color:#45664d}.minimap svg{width:100%;height:112px;display:block}.mini-stop{cursor:pointer}.mini-stop circle{stroke:#fffdf2;stroke-width:2}.mini-stop text{fill:white;dominant-baseline:central;text-anchor:middle;font-size:9px;font-family:inherit;pointer-events:none}.legend{position:absolute;bottom:9px;left:14px;display:flex;gap:12px;font-size:9px;color:#8a9785}.legend span{display:flex;gap:4px;align-items:center}.legend i{width:10px;height:2px;background:var(--route)}.legend .ferry{background:#598fa2}.legend .metro{background:#779954}.player{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);padding:10px 14px;border-radius:17px;z-index:9;display:flex;align-items:center;gap:18px;min-width:490px}.player-buttons{display:flex;gap:4px;align-items:center}.player-buttons .icon-button{font-size:27px;min-width:32px}.play{padding:11px 17px;border-radius:9px;background:var(--accent);color:var(--paper);display:flex;align-items:center;gap:9px;white-space:nowrap;font-size:12px;min-height:42px}.play svg{width:15px;height:15px;fill:currentColor;stroke-width:0}.play[aria-pressed=true] svg{display:none}.play[aria-pressed=true]:before{content:'Ⅱ';font-size:16px;line-height:15px}.progress-track{width:68px;height:3px;border-radius:2px;background:#dce0d2;overflow:hidden}#progress{display:block;height:100%;width:60%;background:#93a779;transition:width .35s}#player-status{font-size:10px;color:#809071;white-space:nowrap}.mobile-list{display:none}.map-credit{position:absolute;bottom:6px;right:17px;display:flex;gap:10px;align-items:center;font-size:9px;color:#7d8b79;z-index:3}.map-credit button{font-size:9px;padding:0;text-decoration:underline;text-underline-offset:3px}.pin{position:absolute;transform:translate(-50%,-100%);pointer-events:auto;padding:4px;white-space:nowrap;transition:opacity .15s}.pin>span{display:flex;align-items:center;gap:7px;border:1px solid #ffffff;border-radius:30px;background:#fcfbf5f2;box-shadow:0 3px 12px #25462e13;padding:7px 11px;font-size:11px;color:#66745e;line-height:1.3}.pin i{font-style:normal;font-size:9px;width:17px;height:17px;display:grid;place-items:center;border-radius:50%;background:#e7edde;color:#6b8261}.pin[aria-pressed=true]>span{background:var(--accent);color:var(--paper);border-color:#476e55}.pin[aria-pressed=true] i{background:#567a5d;color:var(--paper)}.landmark-tag{position:absolute;transform:translate(-50%,-100%);font-size:10px;color:#5e7b63;white-space:nowrap;text-shadow:0 1px 6px #fff;background:#fcfbf580;padding:4px 7px;border-radius:5px;pointer-events:none}.pin[hidden],.landmark-tag[hidden]{display:none}.toast{position:absolute;left:50%;bottom:112px;transform:translateX(-50%);padding:12px 22px;border-radius:11px;background:#244b3c;color:#fffef3;z-index:30;font-size:13px;box-shadow:var(--shadow)}#loading{position:absolute;inset:0;background:#eff0e5;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;text-align:center;padding:25px}#loading h2{font-size:24px;font-weight:500;letter-spacing:-.055em}#loading p{font-size:13px;color:#809078;max-width:350px;line-height:1.8}#loading button{padding:12px 20px;background:var(--accent);color:white;border-radius:10px}.loading-orb{width:50px;height:50px;border-radius:50%;background:#bf8995;box-shadow:0 0 0 12px #bf899519;margin-bottom:18px;animation:pulse 1.8s ease-in-out infinite}@keyframes pulse{50%{transform:translateY(-9px);box-shadow:0 8px 0 12px #bf899509}}dialog{padding:28px;border:1px solid white;border-radius:21px;box-shadow:0 25px 100px #102b3b30;max-width:540px;max-height:85svh;color:var(--ink);background:var(--paper)}dialog::backdrop{background:#20342a40;backdrop-filter:blur(5px)}.dialog-head{display:flex;justify-content:space-between;align-items:center}dialog h2{font-size:25px;letter-spacing:-.05em;margin:6px 0 15px}dialog h3{font-size:14px;margin:23px 0 7px;font-weight:600}dialog p{font-size:13px;line-height:1.9;color:#77806e;word-break:keep-all}dialog a{font-size:12px;text-decoration:underline;text-underline-offset:3px}#sources{display:grid;gap:9px}#sources small{display:block;font-size:10px;color:#8c9381;line-height:1.6;margin-top:3px}.about-date{margin-top:24px;font-size:11px!important}.noscript{position:absolute;inset:0;display:grid;place-items:center;background:var(--paper);z-index:100}body[data-night=true] .scene-caption{filter:brightness(1.65)}body[data-night=true] .brand,body[data-night=true] .trip-date{color:#e8ede2}body[data-night=true] .brand span{color:#ccd4c4}body[data-night=true] .brand>svg{stroke:#e8ede2}
@media(min-width:1600px){.topbar{padding:30px 40px}.itinerary{left:40px;top:135px;width:290px}.minimap{left:40px;width:290px}.detail{right:40px;width:300px}.map-tools{right:40px;top:135px}.scene-caption{top:140px;left:365px}.detail-photo{height:175px}.detail-content{padding:24px}#place-desc{font-size:14px}.stop-name{font-size:15px}.stop-time{font-size:11px}#stops button{padding:13px 11px}}
@media(max-height:750px) and (min-width:801px){.topbar{padding-top:17px}.itinerary{top:100px;bottom:207px}.itinerary-heading{padding:16px 20px 11px}.itinerary h2{font-size:18px}.minimap{bottom:61px;height:131px}.minimap svg{height:102px}.scene-caption{top:105px}.map-tools{top:100px}.detail{bottom:103px;width:260px}.detail-photo{height:110px}.detail-content{padding:16px}.detail h2{font-size:21px}.detail-meta{font-size:10px}#place-desc{font-size:12px}.address-row{margin-top:10px;padding-top:10px}.place-note{margin-top:6px}.time{margin-bottom:9px}}
@media(max-width:1100px) and (min-width:801px){.itinerary{width:239px;left:20px}.minimap{width:239px;left:20px}.detail{right:20px;width:242px}.scene-caption{left:280px}.topbar{padding-inline:22px}.trip-date{display:none}.days button{padding:9px 18px}.brand h1{font-size:21px}.map-tools{right:20px}.player{min-width:440px}.progress-track{width:36px}}
@media(max-width:800px){#app{min-height:420px}.topbar{padding:17px 18px;align-items:flex-start;gap:12px;flex-wrap:wrap}.brand>svg{width:22px;height:31px}.brand{gap:9px}.brand h1{font-size:20px}.brand span{font-size:8px;margin-bottom:3px;letter-spacing:.13em}.top-actions{margin-left:auto}.top-actions .icon-button{width:34px;height:34px;min-width:34px;min-height:34px}.trip-date{display:none}.days{order:3;margin:2px auto 0;gap:3px;padding:4px;border-radius:13px;width:min(340px,100%)}.days button{flex:1;padding:7px 14px;min-height:45px;font-size:13px}.days button span{font-size:8px}.scene-caption{top:144px;left:20px}.scene-caption span{font-size:8px}.scene-caption strong{font-size:12px}.map-tools{top:143px;right:16px;padding:3px;border-radius:12px}.map-tools .icon-button{width:34px;height:34px;min-width:34px;min-height:34px;font-size:24px}.map-tools button svg{width:18px;height:18px}.compass span{font-size:8px}.compass svg{height:16px}.itinerary{display:none;left:14px;right:14px;width:auto;top:133px;bottom:92px;z-index:20;border-radius:18px;background:#fcfbf5fa}.itinerary.open{display:flex}.itinerary-heading{padding:22px 23px 15px}.itinerary h2{font-size:22px}#stops{padding:0 12px 12px}#stops button{padding:12px;gap:15px}.stop-name{font-size:16px}.stop-time{font-size:12px}.stop-number{width:31px;height:31px;font-size:12px}#stops li:not(:last-child):before{left:27px;top:42px}.plan-foot{font-size:11px}.minimap{left:17px;bottom:243px;width:152px;height:107px;padding:8px 9px}.minimap-heading{font-size:8px;left:9px;right:9px;top:8px}.minimap svg{width:100%;height:92px}.legend{display:none}.detail{left:14px;right:14px;bottom:90px;width:auto;border-radius:17px;max-height:50svh;overflow-y:auto;background:#fcfbf5f5}.detail-toggle{display:grid;place-items:center;width:100%;height:21px;min-height:21px;position:sticky;top:0;z-index:2;background:#fcfbf5}.detail-toggle span{width:32px;height:3px;border-radius:2px;background:#ccd2c3}.detail-content{padding:1px 17px 13px}.detail-meta{font-size:9px;margin-bottom:3px}.detail h2{font-size:20px;margin:2px 0 4px;display:inline-block}.time{display:inline-block;float:right;font-size:11px;margin:9px 0 0}.detail #place-desc{font-size:12px;line-height:1.65;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:1px 0 2px;clear:both}.detail .address-row,.detail .place-note,.detail .map-link,.detail .detail-photo{display:none}.detail.expanded .address-row{display:flex}.detail.expanded .place-note,.detail.expanded .map-link{display:block}.detail.expanded #place-desc{display:block}.detail.expanded .detail-photo:not([hidden]){display:block;height:140px}.detail.expanded .detail-content{padding-top:15px;padding-bottom:17px}.detail.expanded .map-link{font-size:12px}.detail.expanded .map-link span{float:right}.detail.expanded .time{float:none;display:block;margin:0 0 10px}.detail.expanded .address-row p{font-size:12px}.detail.expanded .place-note{font-size:11px}.player{left:14px;right:14px;bottom:23px;transform:none;min-width:0;gap:10px;justify-content:space-between;padding:8px 10px;border-radius:14px}.player-buttons{gap:1px}.player-buttons .icon-button{min-width:29px;min-height:38px}.play{font-size:12px;padding:10px 12px;min-height:39px;gap:6px}.play svg{width:12px;height:12px}.progress-track{flex:1;width:auto;max-width:60px}#player-status{display:none}.mobile-list{display:block;font-size:12px;padding:9px 7px;white-space:nowrap}.map-credit{font-size:7px;bottom:6px;left:15px;right:15px;justify-content:space-between;gap:5px}.map-credit button{font-size:8px}.map-credit>span{font-size:7px}.pin>span{font-size:10px;padding:6px 9px}.pin i{width:15px;height:15px;font-size:8px}.landmark-tag{font-size:8px;padding:3px 5px}.toast{bottom:250px;font-size:12px;max-width:90%;white-space:nowrap}dialog{width:calc(100% - 28px);padding:21px}dialog h2{font-size:23px}.about-date{font-size:10px!important}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Hidden labels retain measurable widths; display:none made collision decisions alternate. */
.pin[hidden],.landmark-tag[hidden]{display:block!important;visibility:hidden;pointer-events:none}
/* iPad trackpads send mouse events. A map drag must never begin text selection. */
#app{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#stage,#stage *,button,.scene-caption,.minimap{-webkit-user-select:none;user-select:none}
.detail-content,#about{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
body[data-map-dragging=true] #app,body[data-map-dragging=true] #app *{-webkit-user-select:none!important;user-select:none!important}
img,svg{-webkit-user-drag:none}
.detail-photo img{user-select:none;-webkit-user-select:none}
.detail-photo:after{inset:35% 0 0;background:linear-gradient(transparent,#122127b3);pointer-events:none}
#photo-caption{left:14px;right:14px;bottom:30px;font-size:12px;line-height:1.45;word-break:keep-all;pointer-events:none}
#photo-source{position:absolute;bottom:8px;right:14px;z-index:2;font-size:12px;line-height:1.4;color:#fff;text-decoration:underline;text-underline-offset:3px}
.detail{max-height:calc(100svh - 244px);overflow-y:auto;scrollbar-width:thin;overscroll-behavior:contain}
.detail-photo{min-height:148px}
/* Keep the map toolbar below the information button, with the photo card below it. */
@media(min-width:801px){#app{--tools-top:118px;--detail-bottom:119px}.map-tools{top:var(--tools-top)}.detail{bottom:var(--detail-bottom);max-height:calc(100svh - var(--tools-top) - 223px - 16px - var(--detail-bottom))}}
@media(min-width:1600px){#app{--tools-top:135px}}
@media(max-height:750px) and (min-width:801px){#app{--tools-top:100px;--detail-bottom:103px}}
@media(max-width:800px){.detail{max-height:50svh}.detail.expanded .detail-photo:not([hidden]){height:180px;min-height:180px}}
/* Keep the compact map interface comfortably readable. No network fonts required. */
.stop-time,.eyebrow,.detail-meta,.address-row p,.place-note,.map-link,.time,.plan-foot,.minimap-heading,.legend,#player-status,.map-credit,.map-credit button,.scene-caption span{font-size:12px}
.stop-name,.days button,.play,#place-desc,dialog p{font-size:14px}
.pin>span,.landmark-tag{font-size:12px}.detail-toggle{min-height:26px}.map-credit{gap:9px}.map-credit>span{font-size:11px}.map-link{min-height:28px}.map-credit button{min-height:20px}.brand span,.days button span{font-size:11px}
.detail-photo[hidden]{display:none!important}.map-link[hidden]{display:none!important}
#loading.error{inset:auto 330px 120px;padding:22px;max-width:440px;margin:auto;height:auto;border:1px solid #fff;border-radius:17px;z-index:4;box-shadow:var(--shadow)}#loading.error .loading-orb{display:none}#loading.error h2{font-size:20px}
@media(max-width:800px){.stop-name{font-size:16px}.play,.mobile-list{font-size:14px}.detail #place-desc{font-size:14px}.time{font-size:12px}.detail-meta{font-size:12px}.scene-caption strong{font-size:13px}.scene-caption span{font-size:10px}.map-credit,.map-credit button{font-size:9px}.map-credit>span{font-size:8px}.brand span,.days button span{font-size:10px}.minimap-heading{font-size:10px}.minimap{bottom:283px}.detail .place-note,.detail.expanded .place-note{font-size:12px}.pin>span{font-size:12px}.landmark-tag{font-size:11px}.detail h2{max-width:64%}.time{max-width:35%;font-size:11px}.player{gap:5px}.play{padding:10px}.player .progress-track{display:none}#loading.error{inset:142px 16px auto;max-width:none}.detail.expanded h2{max-width:none}.detail.expanded .time{max-width:none}}