:root{--sky:#BFE4F7;--sky-2:#E6F5FD;--sky-3:#8CCBEB;--orange:#FF8A3D;--orange-2:#FFE3CF;--orange-deep:#C2531A;--ink:#12344D;--ink-2:#4A6A80;--paper:#fff;--snow:#5AA9D6;--green:#1E6B3A;--green-2:#E3F5E9;
--font:"Bricolage Grotesque",-apple-system,"SF Pro Rounded","Helvetica Neue",Arial,sans-serif;box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit}
html,body{margin:0;background:var(--sky-2);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
body{min-height:100vh;padding:env(safe-area-inset-top,0px) 0 calc(78px + env(safe-area-inset-bottom,0px))}
button{font:inherit;color:inherit}
a{color:var(--orange-deep)}
.top{position:sticky;top:0;z-index:900;background:rgba(230,245,253,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:12px 18px 10px;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:38px;height:38px;border-radius:12px;background:var(--orange);color:#fff;display:grid;place-items:center;font-weight:800;font-size:18px;transform:rotate(-6deg)}
.brand h1{margin:0;font-size:19px;font-weight:800;letter-spacing:-0.02em}
.brand p{margin:0;font-size:12px;color:var(--ink-2)}
.seg{display:flex;align-items:center;gap:4px;background:var(--paper);border-radius:999px;padding:4px}
.seg span{font-size:12px;color:var(--ink-2);padding:0 6px 0 10px}
.seg button{border:0;background:transparent;border-radius:999px;min-width:38px;height:34px;font-weight:700;cursor:pointer}
.seg button.on{background:var(--orange);color:#fff}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:950;display:flex;justify-content:center;gap:2px;padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));background:var(--ink)}
.tabs button{flex:1;max-width:120px;border:0;background:transparent;color:var(--sky);border-radius:14px;padding:6px 2px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:700}
.tabs button .ic{font-size:20px;line-height:1}
.tabs button.on{background:rgba(255,138,61,.18);color:#fff}
.tabs button.on .ic{transform:scale(1.15)}
.view{display:none;max-width:1180px;margin:0 auto;padding:6px 18px 24px}
.view.on{display:block;animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}}
h2.big{font-size:clamp(30px,5vw,46px);line-height:1;margin:6px 0 10px;font-weight:800;letter-spacing:-0.03em}
.lead{font-size:16px;color:var(--ink-2);line-height:1.5;margin:0 0 16px;max-width:66ch}
.card{background:var(--paper);border-radius:22px;padding:18px 20px;margin:0 0 14px;box-shadow:0 14px 30px -24px rgba(18,52,77,.5)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.stat{background:var(--paper);border-radius:20px;padding:16px}
.stat small{display:block;font-size:12px;color:var(--ink-2)}
.stat b{display:block;font-size:clamp(22px,3vw,30px);font-weight:800;letter-spacing:-0.02em;margin-top:4px}
.stat.o{background:var(--orange);color:#fff}.stat.o small{color:var(--orange-2)}
.hero{position:relative;overflow:hidden;border-radius:28px;background:var(--ink);color:#fff;padding:28px 26px;margin:0 0 14px}
.hero h2{font-size:clamp(34px,6vw,58px);line-height:.98;margin:0 0 10px;font-weight:800;letter-spacing:-0.035em}
.hero p{color:var(--sky);font-size:16px;line-height:1.5;margin:0;max-width:56ch}
.hero .pl{position:absolute;right:-30px;top:20px;font-size:120px;opacity:.12;transform:rotate(-15deg);animation:fly 9s ease-in-out infinite}
@keyframes fly{50%{transform:translate(-30px,10px) rotate(-10deg)}}
.cd{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.cd div{background:rgba(255,255,255,.1);border-radius:16px;padding:10px 14px;min-width:78px;text-align:center}
.cd b{display:block;font-size:30px;font-weight:800;color:var(--orange)}
.cd small{font-size:11px;color:var(--sky)}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 11px;font-size:12px;font-weight:700;background:var(--sky-2);color:var(--ink)}
.pill.o{background:var(--orange-2);color:var(--orange-deep)}
.pill.g{background:var(--green-2);color:var(--green)}
.pill.r{background:#FBE4E4;color:#9B2C2C}
.pill.s{background:var(--sky);color:var(--ink)}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.btn{border:0;border-radius:999px;padding:10px 16px;font-weight:700;font-size:14px;cursor:pointer;background:var(--sky-2);color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.btn.pri{background:var(--ink);color:#fff}
.btn.or{background:var(--orange);color:#fff}
.btn:focus-visible,.chip:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 12px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:2px solid transparent;background:var(--paper);border-radius:999px;padding:8px 14px;font-weight:700;font-size:14px;cursor:pointer;display:flex;align-items:center;gap:8px}
.chip i{width:10px;height:10px;border-radius:50%;background:var(--orange);display:block}
.chip.on{border-color:var(--orange);background:var(--orange-2)}
.chip.sm{padding:6px 12px;font-size:13px}
.toggle2{display:inline-flex;background:var(--paper);border-radius:999px;padding:4px}
.toggle2 button{border:0;background:transparent;border-radius:999px;padding:8px 14px;font-weight:700;cursor:pointer}
.toggle2 button.on{background:var(--ink);color:#fff}
/* days */
.day{background:var(--paper);border-radius:22px;margin:0 0 12px;overflow:hidden;box-shadow:0 14px 30px -24px rgba(18,52,77,.5)}
.dh{display:grid;grid-template-columns:74px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 16px;cursor:pointer}
.dn{width:74px;height:74px;border-radius:18px;background:var(--sky);display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800}
.dn b{font-size:26px;line-height:1;letter-spacing:-0.03em}.dn small{font-size:11px;color:var(--ink-2)}
.day.go .dn{background:var(--orange-2)}.day.go .dn b{color:var(--orange-deep)}
.dh h3{margin:0 0 4px;font-size:19px;font-weight:800;letter-spacing:-0.01em}
.dh p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.4}
.dh .cost{font-weight:800;color:var(--orange-deep);font-size:14px;text-align:right;white-space:nowrap}
.db{padding:0 16px 16px;display:none}
.day.open .db{display:block;animation:fade .3s ease}
.tl{list-style:none;margin:0;padding:0}
.tl li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;padding:8px 0;border-top:1px solid var(--sky-2);font-size:15px;line-height:1.45}
.tl li:first-child{border-top:0}
.tl b{color:var(--orange-deep);font-weight:800;font-variant-numeric:tabular-nums}
.box{background:var(--sky-2);border-radius:16px;padding:12px 14px;font-size:14px;line-height:1.5}
.box h4{margin:0 0 6px;font-size:13px;font-weight:800;color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em}
.box.o{background:var(--orange-2)}
.en3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.en3 div{border-radius:14px;padding:10px 12px;background:var(--sky-2);font-size:14px;line-height:1.45;border:2px solid transparent}
.en3 div.on{border-color:var(--orange);background:var(--orange-2)}
.en3 small{display:block;font-size:11px;font-weight:800;color:var(--ink-2);margin-bottom:4px}
.mt{margin-top:10px}
table.bt{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
table.bt td,table.bt th{padding:7px 8px;border-top:1px solid var(--sky-2);text-align:right;white-space:nowrap}
table.bt th{font-size:12px;color:var(--ink-2);font-weight:700}
table.bt td:first-child,table.bt th:first-child{text-align:left;white-space:normal}
table.bt .hl{background:#FFF6EF;font-weight:800}
table.bt tr.t td{font-weight:800;background:var(--sky-2)}
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* map */
.layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,1fr);gap:14px;height:calc(100vh - 230px);min-height:520px}
.mapwrap{position:relative;border-radius:24px;overflow:hidden;background:var(--sky)}
#map{position:absolute;inset:0}
#map svg{width:100%;height:100%;display:block;touch-action:none;cursor:grab;background:#BFE4F7}
.layers{position:absolute;z-index:700;top:12px;right:12px;display:flex;background:var(--paper);border-radius:999px;padding:4px;box-shadow:0 6px 18px -8px rgba(18,52,77,.4)}
.layers button{border:0;background:transparent;border-radius:999px;padding:7px 12px;font-size:13px;font-weight:700;cursor:pointer}
.layers .play{background:var(--orange);color:#fff}
.panel{background:var(--paper);border-radius:24px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.pad{padding:20px 22px}
.panel h2{margin:6px 0;font-size:28px;line-height:1.05;font-weight:800;letter-spacing:-0.03em}
.panel p{margin:0 0 12px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.places{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px}
.places button{width:100%;text-align:left;border:2px solid var(--sky-2);background:var(--paper);border-radius:16px;padding:10px 12px;cursor:pointer;display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center}
.places button:hover{border-color:var(--orange)}
.num{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:var(--orange);color:#fff;font-weight:800;font-size:18px}
.num.x{background:var(--paper);color:var(--orange-deep);border:2px dashed var(--orange)}
.num.snow{background:var(--snow)}
.places b{display:block;font-size:15px}
.places small{font-size:12px;color:var(--ink-2)}
.price{font-size:13px;font-weight:800;color:var(--orange-deep);white-space:nowrap}
.ph{position:relative;height:210px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:var(--orange-2);overflow:hidden}
.ph.s{background:var(--sky)}
.ph .em{font-size:76px;line-height:1}
.ph small{font-weight:700;color:var(--ink-2);font-size:13px}
.ph .img{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;transition:opacity .5s}
.ph .img.on{opacity:1}
.ph .back{position:absolute;top:12px;left:12px;z-index:2;border:0;background:var(--paper);border-radius:999px;padding:8px 14px;font-weight:700;font-size:14px;cursor:pointer}
.ph .nb{position:absolute;top:12px;right:12px;z-index:2;width:40px;height:40px;border-radius:50%;background:var(--orange);color:#fff;font-weight:800;display:grid;place-items:center;border:3px solid #fff}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}
.fact{background:var(--sky-2);border-radius:14px;padding:10px 12px}
.fact small{display:block;font-size:12px;color:var(--ink-2)}
.fact b{font-size:16px;font-weight:800}
.pn{cursor:pointer;outline:none}
.pn circle{fill:#FF8A3D;stroke:#fff;transform-box:fill-box;transform-origin:center;animation:pop .45s cubic-bezier(.3,1.6,.5,1) backwards}
.pn.x circle{fill:#fff;stroke:#FF8A3D}
.pn.x text{fill:#C2531A}
.pn.snow circle{fill:#5AA9D6}
.pn.act circle{fill:#C2531A;stroke:#fff}
.pn.act text{fill:#fff}
.pn.hide{display:none}
.pn text{fill:#fff;font-weight:800;text-anchor:middle;dominant-baseline:central;pointer-events:none}
@keyframes pop{from{transform:scale(0)}}
.lb{fill:#4A6A80;text-anchor:middle;pointer-events:none;paint-order:stroke;stroke:#FDFBF7;stroke-linejoin:round}
.lb.k1{font-weight:800;letter-spacing:.08em}.lb.k2{font-style:italic;fill:#2F7FAE;stroke:#BFE4F7}.lb.k3{font-weight:700}
.route{fill:none;stroke:#FF8A3D;stroke-linecap:round;stroke-linejoin:round;opacity:.85;animation:march 1.2s linear infinite}
@keyframes march{to{stroke-dashoffset:-24}}
.mode{position:absolute;left:12px;top:12px;z-index:700;background:var(--paper);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:800;box-shadow:0 6px 18px -8px rgba(18,52,77,.4)}
.mode.real{background:var(--green-2);color:var(--green)}
.scale{position:absolute;right:12px;bottom:12px;z-index:5;background:var(--paper);border-radius:10px;padding:5px 9px;font-size:11px;font-weight:700}
.scale i{display:block;height:5px;border:2px solid var(--ink);border-top:0;margin-top:3px}
#lmap{position:absolute;inset:0;display:none;z-index:1}
.leaflet-container{font-family:var(--font)}
.lpin{width:28px;height:28px;border-radius:50%;background:#FF8A3D;border:3px solid #fff;color:#fff;font-weight:800;font-size:12px;display:grid;place-items:center;box-shadow:0 4px 10px -2px rgba(18,52,77,.5)}
.lpin.x{background:#fff;color:#C2531A;border-color:#FF8A3D}
.lpin.snow{background:#5AA9D6}.lpin.act{background:#C2531A;color:#fff;transform:scale(1.2)}
/* english */
.phr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--sky-2)}
.phr:first-of-type{border-top:0}
.phr b{display:block;font-size:16px}
.phr small{color:var(--ink-2);font-size:13px}
.say{width:44px;height:44px;border-radius:50%;border:0;background:var(--orange);color:#fff;font-size:18px;cursor:pointer}
.say.on{animation:pulse .8s ease infinite}
@keyframes pulse{50%{transform:scale(1.12)}}
/* insta */
.song{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--sky-2)}
.song:first-of-type{border-top:0}
.song .disc{width:44px;height:44px;border-radius:50%;background:conic-gradient(var(--orange),var(--ink),var(--orange));display:grid;place-items:center;color:#fff;font-size:16px;animation:spin 6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.song b{font-size:15px}.song small{display:block;color:var(--ink-2);font-size:13px}
.spot{border:2px solid var(--sky-2);border-radius:16px;padding:12px 14px}
.spot b{font-size:15px}.spot small{display:block;color:var(--ink-2);font-size:13px;line-height:1.45;margin-top:4px}
.free{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.free li{border:2px solid var(--sky-2);border-radius:16px;padding:12px 14px}
.free b{font-size:15px}
.free small{display:block;color:var(--ink-2);font-size:13px;margin:6px 0 8px;line-height:1.45}
.tot{position:sticky;bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:600;display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:space-between;background:var(--ink);color:#fff;border-radius:18px;padding:12px 18px;margin:12px 0 0}
.tot small{display:block;font-size:11px;color:var(--sky)}
.tot b{font-size:18px;font-weight:800}
.warn{font-size:13px;color:var(--ink-2);background:var(--sky-2);border-radius:12px;padding:10px 12px;margin:10px 0}
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(20px);opacity:0;background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;font-weight:700;font-size:14px;z-index:999;transition:all .3s}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
@media (max-width:860px){.layout{grid-template-columns:1fr;height:auto}.mapwrap{height:52vh}.panel{max-height:none}.grid3,.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}.en3{grid-template-columns:1fr}}
@media (max-width:520px){.grid2{grid-template-columns:1fr}.dh{grid-template-columns:58px minmax(0,1fr)}.dn{width:58px;height:58px}.dh .cost{grid-column:2;text-align:left}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}