/* 전국 이동 (user 2026-11-05): a tilted pastel 3D Japan board like a landing page, in the city minimap's family. */
.game-screen[data-screen="travel-map"]{background:radial-gradient(120% 95% at 30% 35%,#fff4f8 0%,#ffeaf1 40%,#e4f1ff 100%)}
.jm-stage{position:absolute;inset:10% 37% 12% 1%;perspective:1400px;perspective-origin:50% 30%;display:grid;place-items:center}
.jm-sea{position:absolute;inset:6% 4%;border-radius:50%;background:radial-gradient(closest-side,rgba(170,214,245,.55),rgba(170,214,245,0));filter:blur(.5cqw);pointer-events:none}
.jm-board{--ax:42deg;--az:-8deg;position:relative;width:min(50cqw,70cqh);aspect-ratio:545/520;transform-style:preserve-3d;transform:rotateX(var(--ax)) rotateZ(var(--az));border-radius:3cqw;
 background:radial-gradient(120% 100% at 50% 40%,#d9efff 0%,#bfe1f6 70%,#a9d4f0 100%);
 box-shadow:0 .7cqw 0 #9cc9e8,0 1.4cqw 0 #8bbde0,0 3cqw 4cqw rgba(80,120,160,.3);}
.jm-board.is-intro{animation:jm-in .7s cubic-bezier(.2,.9,.3,1.15) both}
.jm-board::before{content:'';position:absolute;inset:0;border-radius:inherit;background:repeating-radial-gradient(circle at 30% 40%,rgba(255,255,255,.22) 0 .25cqw,transparent .25cqw 1.6cqw);pointer-events:none}
/* Island slab: mask = approved Japan shape; crop matches CROP in travel-map-view.js (850×800 art, x205 y35 w545 h520). */
.jm-land{position:absolute;left:calc(-205/545*100%);top:calc(-35/520*100%);width:calc(850/545*100%);height:calc(800/520*100%);transform:translateZ(var(--z));
 -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:linear-gradient(160deg,#d8f5c9,#b8e8b0 45%,#ffe7c2);pointer-events:none}
.jm-land.is-side{background:#92c98c}
.jm-plane{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:translateZ(1px);pointer-events:none}
.jm-leader{stroke:rgba(90,120,100,.35);stroke-width:.25;vector-effect:non-scaling-stroke}.jm-leader.is-on{stroke:#ff8fb3;stroke-width:1.5}
.jm-arc-glow{fill:none;stroke:rgba(255,255,255,.85);stroke-width:5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.jm-arc{fill:none;stroke:#ff6f9f;stroke-width:3;stroke-linecap:round;stroke-dasharray:6 7;vector-effect:non-scaling-stroke;animation:jm-dash 1.2s linear infinite}
.jm-runner{position:absolute;left:0;top:0;width:1.4cqw;height:1.4cqw;margin:-.7cqw 0 0 -.7cqw;border-radius:50%;background:#fff;box-shadow:0 0 0 .3cqw #ff6f9f,0 0 1cqw rgba(255,111,159,.7);
 offset-rotate:0deg;transform:translateZ(2px);animation:jm-run 2.4s ease-in-out infinite;pointer-events:none}
/* Pins and chips stand up: counter-rotate against the board. The board's coordinate box is 0–100 of its size; offset-path uses the same box via scale below. */
.jm-up{display:block;transform-origin:50% 100%;transform:rotateZ(calc(-1*var(--az))) rotateX(calc(-1*var(--ax)));transform-style:preserve-3d}
.jm-pin{position:absolute;width:0;height:0;padding:0;border:0;background:none;cursor:pointer;transform-style:preserve-3d}
.jm-pin::after{content:'';position:absolute;left:-1cqw;top:-.4cqw;width:2cqw;height:.8cqw;border-radius:50%;background:rgba(40,80,60,.25)}
.jm-pin .jm-up{position:absolute;left:-1.2cqw;bottom:0;width:2.4cqw;height:4.2cqw}
.jm-head{position:absolute;left:50%;top:0;translate:-50% 0;width:2cqw;height:2cqw;border-radius:50%;background:#fffefa;box-shadow:0 0 0 .3cqw #8fb7c9,0 .3cqw 0 rgba(0,0,0,.12);transition:scale .18s}
.jm-stem{position:absolute;left:50%;bottom:0;translate:-50% 0;width:.35cqw;height:2.2cqw;border-radius:.2cqw;background:#8fb7c9}
.jm-pin:hover .jm-head{scale:1.15}
.jm-pin.is-selected .jm-head{background:#ff8fb3;box-shadow:0 0 0 .3cqw #fff,0 0 0 .6cqw #ff8fb3,0 .4cqw .6cqw rgba(200,60,110,.3);animation:jm-bob 1.4s ease-in-out infinite}
.jm-pin.is-selected .jm-stem{background:#ff8fb3}
.jm-pin.is-current .jm-head{background:#ff6f9f;box-shadow:0 0 0 .3cqw #fff,0 0 0 .6cqw #ff6f9f}.jm-pin.is-current .jm-stem{background:#ff6f9f}
.jm-pulse{position:absolute;left:50%;bottom:-1.6cqw;width:4cqw;height:4cqw;margin-left:-2cqw;border-radius:50%;background:rgba(255,111,159,.35);animation:jm-pulse 1.8s ease-out infinite;transform:rotateX(70deg)}
.jm-me{position:absolute;left:50%;top:-1.9cqw;translate:-50% 0;padding:.05cqw .5cqw;border-radius:1cqw;background:#ff6f9f;color:#fff;font:700 .85cqw 'Malgun Gothic',sans-serif;white-space:nowrap}
.jm-chip{position:absolute;padding:0;border:0;background:none;cursor:pointer;transform-style:preserve-3d}
.jm-chip-up{padding:.2cqw .7cqw;border-radius:1.2cqw;background:rgba(255,254,250,.95);color:#4a3d44;font:600 1cqw 'Malgun Gothic',sans-serif;white-space:nowrap;box-shadow:0 .2cqw .5cqw rgba(120,80,100,.2);transition:background .15s,color .15s}
.jm-chip:hover .jm-chip-up{background:#fff0f5}
.jm-chip.is-current .jm-chip-up{box-shadow:0 0 0 .18cqw #ff6f9f,0 .2cqw .5cqw rgba(120,80,100,.2)}
.jm-chip.is-selected .jm-chip-up{background:#ff6f9f;color:#fff;font-weight:700}
.jm-chip:focus-visible{outline:none}.jm-chip:focus-visible .jm-chip-up{box-shadow:0 0 0 .2cqw #326f86}
.jm-cloud{position:absolute;width:7cqw;height:2.2cqw;border-radius:2cqw;background:rgba(255,255,255,.85);box-shadow:1.6cqw -.9cqw 0 -.2cqw rgba(255,255,255,.85),3.4cqw -.2cqw 0 -.4cqw rgba(255,255,255,.85);filter:blur(.05cqw);pointer-events:none;transform-style:preserve-3d}
.jm-cloud-0{left:5%;top:10%;transform:translateZ(70px);animation:jm-drift 18s ease-in-out infinite}
.jm-cloud-1{left:62%;top:72%;transform:translateZ(90px);animation:jm-drift 22s ease-in-out -6s infinite reverse}
.jm-cloud-2{left:12%;top:62%;transform:translateZ(55px) scale(.7);animation:jm-drift 26s ease-in-out -3s infinite}
.jm-cloud-3{left:70%;top:6%;transform:translateZ(80px) scale(.8);animation:jm-drift 20s ease-in-out -9s infinite reverse}
/* Side card */
.jm-side{position:absolute;inset:11% 3% 13% 65%;display:flex;flex-direction:column;gap:1cqw;padding:1.8cqw 2cqw;border-radius:2cqw;background:rgba(255,254,250,.95);
 box-shadow:0 .4cqw 0 #f6cfdc,0 1.2cqw 2.4cqw rgba(150,90,120,.18);font-family:'Malgun Gothic',sans-serif;min-height:0}
.jm-eyebrow{margin:0;font-size:1cqw;color:#a46a85}.jm-title{margin:0;font-size:2.4cqw;color:#4a3d44}
.jm-route{display:flex;align-items:center;gap:.8cqw;padding:1cqw 1.2cqw;border-radius:1.4cqw;background:linear-gradient(120deg,#fff0f5,#eef6ff)}
.jm-from{font-size:1.1cqw;color:#8b7680}.jm-arrow{color:#ff6f9f;font-weight:700;animation:jm-nudge 1.4s ease-in-out infinite}.jm-to{font-size:1.9cqw;color:#c2457a}
.jm-city-list{display:flex;flex-wrap:wrap;gap:.45cqw}
.jm-city{min-height:2.3cqw;padding:.25cqw .8cqw;border:0;border-radius:1.4cqw;background:#f7f0f3;color:#5b4a52;font:600 .9cqw 'Malgun Gothic',sans-serif;cursor:pointer;transition:transform .12s,background .12s}
.jm-city:hover{transform:translateY(-.12cqw)}.jm-city.is-current{box-shadow:inset 0 0 0 .15cqw #ff6f9f}.jm-city.is-selected{background:#ff6f9f;color:#fff}
.jm-city:focus-visible,.jm-go:focus-visible{outline:.2cqw solid #326f86;outline-offset:.15cqw}
.jm-stats{display:flex;gap:.6cqw;flex-wrap:wrap}.jm-stats span{padding:.3cqw .8cqw;border-radius:1.2cqw;background:#f3f8f1;color:#4f6a4a;font-size:.95cqw}
.jm-go{margin-top:auto;min-height:3.6cqw;border:0;border-radius:1.8cqw;background:linear-gradient(120deg,#ff8fb3,#ff6f9f);color:#fff;font:700 1.3cqw 'Malgun Gothic',sans-serif;box-shadow:0 .35cqw 0 #e45a8a;cursor:pointer;transition:transform .12s}
.jm-go:hover:not(:disabled){transform:translateY(-.15cqw)}.jm-go:active:not(:disabled){transform:translateY(.15cqw);box-shadow:0 .15cqw 0 #e45a8a}
.jm-go:disabled{background:#d9cfd3;box-shadow:0 .35cqw 0 #c4b8bd;cursor:not-allowed}
.jm-foot{margin:0;font-size:.9cqw;color:#a0909a}
.jm-credit{position:absolute;left:2%;bottom:9.5%;font-size:.75cqw;color:#9a8a92}
@keyframes jm-in{from{opacity:0;transform:rotateX(70deg) rotateZ(var(--az)) translateY(4cqw)}}
@keyframes jm-dash{to{stroke-dashoffset:-13}}
@keyframes jm-run{0%{offset-distance:0%;opacity:0}10%{opacity:1}90%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes jm-bob{0%,100%{translate:-50% 0}50%{translate:-50% -.5cqw}}
@keyframes jm-pulse{0%{scale:.4;opacity:1}100%{scale:1.4;opacity:0}}
@keyframes jm-drift{0%,100%{translate:0 0}50%{translate:3cqw -.6cqw}}
@keyframes jm-nudge{0%,100%{translate:0 0}50%{translate:.3cqw 0}}
@media (prefers-reduced-motion:reduce){.jm-board.is-intro,.jm-arc,.jm-runner,.jm-pin.is-selected .jm-head,.jm-pulse,.jm-cloud,.jm-arrow{animation:none}}

/* City names ride on the pins: shown for the current and chosen city, and on hover / keyboard focus. */
.jm-pin .jm-up{height:6cqw}
.jm-name{position:absolute;left:50%;top:-.2cqw;translate:-50% -100%;padding:.15cqw .6cqw;border-radius:1cqw;background:rgba(255,254,250,.96);color:#4a3d44;font:600 .95cqw 'Malgun Gothic',sans-serif;white-space:nowrap;
 box-shadow:0 .2cqw .5cqw rgba(120,80,100,.2);opacity:0;transition:opacity .15s;pointer-events:none}
.jm-pin .jm-head{top:1.8cqw}
.jm-pin:hover .jm-name,.jm-pin:focus-visible .jm-name,.jm-pin.is-current .jm-name,.jm-pin.is-selected .jm-name{opacity:1}
.jm-pin.is-selected .jm-name{background:#ff6f9f;color:#fff;font-weight:700}
.jm-pin.is-current .jm-name{box-shadow:0 0 0 .15cqw #ff6f9f,0 .2cqw .5cqw rgba(120,80,100,.2)}
.jm-pin.is-current .jm-me{top:-2.2cqw;display:none}
.jm-pin:focus-visible{outline:none}.jm-pin:focus-visible .jm-head{box-shadow:0 0 0 .3cqw #326f86}

/* v2 (user 2026-11-05: "하단에 사각판 같은 구조는 이상해"): no square board — Japan floats as a 3D island over soft ripples. */
.jm-float{display:grid;place-items:center;transform-style:preserve-3d;animation:jm-float 6s ease-in-out infinite}
.jm-board,.jm-board.is-intro{background:none;box-shadow:none;border-radius:0}
.jm-board::before{display:none}
.jm-ripple{position:absolute;left:8%;top:12%;width:84%;height:80%;border-radius:50%;transform:translateZ(-30px);pointer-events:none;
 background:radial-gradient(closest-side,rgba(255,255,255,0) 55%,rgba(255,255,255,.55) 56%,rgba(255,255,255,0) 58%,rgba(255,255,255,0) 70%,rgba(255,255,255,.45) 71%,rgba(255,255,255,0) 73%,rgba(255,255,255,0) 85%,rgba(255,255,255,.35) 86%,rgba(255,255,255,0) 88%),
 radial-gradient(closest-side,rgba(183,222,248,.95),rgba(198,230,250,.6) 70%,rgba(198,230,250,0));animation:jm-ripple 5s ease-in-out infinite}
.jm-shadow{position:absolute;left:30%;top:30%;width:45%;height:55%;border-radius:50%;transform:translateZ(-28px) rotate(-35deg);background:rgba(70,120,150,.28);filter:blur(1.4cqw);pointer-events:none}
.jm-land{filter:drop-shadow(0 0 .25cqw rgba(255,255,255,.9))}
.jm-land.is-side{background:linear-gradient(#9fd39a,#7fb97c);filter:none}
.jm-sea{inset:0;border-radius:0;background:radial-gradient(60% 55% at 45% 55%,rgba(190,226,250,.55),rgba(190,226,250,0) 70%)}
@keyframes jm-float{0%,100%{translate:0 0}50%{translate:0 -.8cqw}}
@keyframes jm-ripple{0%,100%{scale:1;opacity:1}50%{scale:1.04;opacity:.85}}
@media (prefers-reduced-motion:reduce){.jm-float,.jm-ripple{animation:none}}
/* Zoom (user 2026-11-05): wheel around the cursor, drag to pan while zoomed, +/− buttons. */
.jm-stage{overflow:hidden;border-radius:2cqw}
.jm-zoomer{display:grid;place-items:center;width:100%;height:100%;transform-origin:50% 50%;transform-style:preserve-3d;will-change:transform}
.jm-stage.is-zoomed{cursor:grab}.jm-stage.is-dragging{cursor:grabbing}.jm-stage.is-dragging .jm-pin{pointer-events:none}
.jm-zoom-ui{position:absolute;right:1.2cqw;top:1.2cqw;display:grid;gap:.5cqw;z-index:10}
.jm-zoom{width:3cqw;height:3cqw;border:0;border-radius:50%;background:#fffefa;color:#7a3a59;font:700 1.6cqw/1 'Malgun Gothic',sans-serif;box-shadow:0 .25cqw 0 #f5bfd1,0 .6cqw 1cqw rgba(170,90,125,.2);cursor:pointer;transition:transform .12s}
.jm-zoom-all{font-size:.85cqw}.jm-zoom:disabled{opacity:.4;cursor:default}.jm-zoom:hover:not(:disabled){transform:translateY(-.12cqw)}
.jm-zoom:focus-visible{outline:.2cqw solid #326f86;outline-offset:.15cqw}

/* Thick island: soil sides come from JS colours; a grass rim on the top layer and a deeper floating shadow. */
.jm-land:not(.is-side){filter:drop-shadow(0 0 .12cqw #6fae69) drop-shadow(0 0 .3cqw rgba(255,255,255,.85))}
.jm-shadow{transform:translateZ(-60px) rotate(-35deg);background:rgba(60,100,130,.32);filter:blur(1.8cqw)}
.jm-ripple{transform:translateZ(-62px)}
.jm-stage.is-dragging .jm-pin{pointer-events:none}

/* Zoom/pan are part of the board's 3D transform (no scaled wrapper, which flattened the island). */
.jm-board{transform:translate3d(var(--zx,0px),var(--zy,0px),0) scale(var(--zs,1)) rotateX(var(--ax)) rotateZ(var(--az))}
.jm-zoomer{will-change:auto;transform:none}
@keyframes jm-in{from{opacity:0;transform:translate3d(var(--zx,0px),var(--zy,0px),0) scale(var(--zs,1)) rotateX(70deg) rotateZ(var(--az)) translateY(4cqw)}}
/* Opacity inside a 3D scene makes browsers flatten it (the island lost its thickness): the intro only moves the board,
   the fade runs on the stage instead, and no fill keeps an animated value on the board afterwards. */
.jm-board.is-intro{animation:jm-in2 .7s cubic-bezier(.2,.9,.3,1.15) backwards}
@keyframes jm-in2{from{transform:translate3d(var(--zx,0px),var(--zy,0px),0) scale(var(--zs,1)) rotateX(70deg) rotateZ(var(--az)) translateY(4cqw)}}
.jm-stage:has(.jm-board.is-intro){animation:jm-fade .5s ease-out backwards}
@keyframes jm-fade{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.jm-board.is-intro,.jm-stage:has(.jm-board.is-intro){animation:none}}
/* Pins and names keep their size while the island zooms (like the city minimap). */
.jm-pin .jm-up{scale:calc(1 / var(--zs,1))}
.jm-pin::after{scale:calc(1 / var(--zs,1))}
/* 도시 이동 detail (user 2026-11-05): minimap-style cards, transport chips for where you stand. */
.game-screen[data-screen="travel-detail"]{background:radial-gradient(120% 95% at 30% 35%,#fff4f8 0%,#ffeaf1 40%,#e4f1ff 100%)}
.td-shell{position:absolute;inset:11% 3% 13% 3%;display:grid;grid-template-columns:1.45fr 1fr;gap:2cqw}
.td-photo{position:relative;margin:0;border-radius:2.2cqw;overflow:hidden;box-shadow:0 .5cqw 0 #f6cfdc,0 1.4cqw 2.6cqw rgba(150,90,120,.22)}
.td-photo-image{width:100%;height:100%;object-fit:cover;display:block}
.td-caption{position:absolute;left:0;right:0;bottom:0;display:grid;gap:.6cqw;justify-items:start;padding:3cqw 2cqw 1.8cqw;background:linear-gradient(transparent,rgba(40,30,40,.55))}
.td-mode-chip{padding:.3cqw 1cqw;border-radius:1.4cqw;background:rgba(255,254,250,.92);color:#c2457a;font:700 1.05cqw 'Malgun Gothic',sans-serif}
.td-route{color:#fff;font:700 2.6cqw 'Malgun Gothic',sans-serif;text-shadow:0 .2cqw .8cqw rgba(0,0,0,.35)}.td-route-arrow{color:#ffc2d6}
.td-side{display:flex;flex-direction:column;gap:1cqw;padding:1.8cqw 2cqw;border-radius:2.2cqw;background:rgba(255,254,250,.96);box-shadow:0 .4cqw 0 #f6cfdc,0 1.2cqw 2.4cqw rgba(150,90,120,.18);font-family:'Malgun Gothic',sans-serif;min-height:0}
.td-eyebrow{margin:0;font-size:1cqw;color:#a46a85}
.td-modes{display:flex;flex-wrap:wrap;gap:.5cqw}
.td-mode{min-height:2.8cqw;padding:.35cqw 1.1cqw;border:0;border-radius:1.6cqw;background:#f7f0f3;color:#5b4a52;font:700 1cqw 'Malgun Gothic',sans-serif;cursor:pointer;transition:transform .12s,background .12s}
.td-mode:hover{transform:translateY(-.12cqw)}.td-mode.is-current{background:#ff6f9f;color:#fff;box-shadow:0 .25cqw 0 #e45a8a}
.td-empty{margin:0;font-size:1cqw;color:#a0909a}
.td-stats{display:grid;grid-template-columns:1fr 1fr;gap:.7cqw}
.td-stat{display:grid;gap:.2cqw;padding:.9cqw 1.1cqw;border-radius:1.4cqw;background:linear-gradient(135deg,#fff5f9,#f1f7ff)}
.td-stat span{font-size:.85cqw;color:#8b7680}.td-stat strong{font-size:1.7cqw;color:#3f3338}.td-stat.is-cost strong{color:#c2457a}
.td-elsewhere{display:flex;flex-wrap:wrap;align-items:center;gap:.45cqw;padding:.8cqw 1cqw;border-radius:1.4cqw;background:#f4f8fb}
.td-elsewhere-title{width:100%;font-size:.85cqw;color:#5f7f98}
.td-hub{padding:.25cqw .8cqw;border:0;border-radius:1.2cqw;background:#e3f0fb;color:#2f5f86;font:600 .85cqw 'Malgun Gothic',sans-serif;cursor:pointer}.td-hub:hover{background:#d3e8fa}
.td-reason{margin:auto 0 0;min-height:1.2cqw;font-size:.9cqw;color:#b0567c}
.td-go{min-height:3.6cqw;border:0;border-radius:1.8cqw;background:linear-gradient(120deg,#ff8fb3,#ff6f9f);color:#fff;font:700 1.3cqw 'Malgun Gothic',sans-serif;box-shadow:0 .35cqw 0 #e45a8a;cursor:pointer;transition:transform .12s}
.td-go:hover:not(:disabled){transform:translateY(-.15cqw)}.td-go:disabled{background:#d9cfd3;box-shadow:0 .35cqw 0 #c4b8bd;cursor:not-allowed}
.td-mode:focus-visible,.td-hub:focus-visible,.td-go:focus-visible{outline:.2cqw solid #326f86;outline-offset:.15cqw}
/* Hit testing (user 2026-11-05: "삿포로 쪽으로 마우스 가져가도 반응 없음"): the flat wrapper boxes sat in front of the
   tilted map's far half and swallowed the mouse; only the visible pin parts take pointer events now. The stage still
   gets wheel/drag because events fall through to it. */
.jm-zoomer,.jm-float,.jm-board{pointer-events:none}
.jm-pin .jm-up{pointer-events:none}
.jm-pin .jm-head,.jm-pin .jm-stem{pointer-events:auto;cursor:pointer}
/* Hover: the pin hops up with a springy head, a pink glow ring, the name slides in, and a ring ripples on the ground. */
.jm-pin .jm-up{transition:translate .28s cubic-bezier(.34,1.56,.64,1)}
.jm-pin .jm-head{transition:scale .28s cubic-bezier(.34,1.56,.64,1),box-shadow .2s,background .2s}
.jm-pin .jm-name{translate:-50% -70%;transition:opacity .18s ease,translate .28s cubic-bezier(.34,1.56,.64,1)}
.jm-pin::before{content:'';position:absolute;left:-1.6cqw;top:-.65cqw;width:3.2cqw;height:1.3cqw;border-radius:50%;border:.18cqw solid rgba(255,111,159,0);scale:.6;transition:scale .3s ease,border-color .2s;pointer-events:none}
.jm-pin:is(:hover,.is-hover) .jm-up{translate:0 -.6cqw}
.jm-pin:is(:hover,.is-hover) .jm-head{scale:1.28;background:#fff;box-shadow:0 0 0 .3cqw #ff8fb3,0 0 0 .75cqw rgba(255,143,179,.28),0 .6cqw 1cqw rgba(200,60,110,.3)}
.jm-pin:is(:hover,.is-hover) .jm-stem{background:#ff8fb3}
.jm-pin:is(:hover,.is-hover) .jm-name{opacity:1;translate:-50% -100%}
.jm-pin:is(:hover,.is-hover)::before{scale:1.15;border-color:rgba(255,111,159,.55);animation:jm-ring 1.2s ease-out infinite}
.jm-pin:is(:hover,.is-hover){z-index:9000!important}
.jm-pin.is-current .jm-name,.jm-pin.is-selected .jm-name{translate:-50% -100%}
@keyframes jm-ring{0%{scale:.7;opacity:1}100%{scale:1.6;opacity:0}}
.jm-city.is-hover{background:#ffe1ec;transform:translateY(-.12cqw)}
@media (prefers-reduced-motion:reduce){.jm-pin .jm-up,.jm-pin .jm-head,.jm-pin .jm-name{transition:none}.jm-pin:is(:hover,.is-hover)::before{animation:none}}
/* pin layers (user 2026-11-06): the stem sits behind the round head */
.jm-pin .jm-stem{z-index:1}.jm-pin .jm-head{z-index:2}
/* hover name on a flat 2D layer (user 2026-11-06): the in-board hover label is hidden, current/selected labels stay */
.jm-pin:hover:not(.is-current):not(.is-selected) .jm-name{opacity:0}
.jm-hovername{position:absolute;z-index:9500;left:0;top:0;translate:-50% -100%;padding:.15cqw .7cqw;border-radius:1cqw;background:#fff;color:#3f3338;font:700 .95cqw 'Malgun Gothic',sans-serif;white-space:nowrap;box-shadow:0 0 0 .15cqw #ff8fb3,0 .3cqw .7cqw rgba(160,90,120,.25);pointer-events:none;opacity:0;transition:opacity .12s}
.jm-hovername.is-on{opacity:1}

/* user 2026-11-07: a hub transport with no route to the chosen city stays visible, dimmed, with the cities it reaches below */
.td-mode.is-unavailable{opacity:.62;outline:.12cqw dashed #c9b3bd;outline-offset:-.12cqw}
.td-mode.is-unavailable.is-current{opacity:1;background:#f3eef1;color:#8a6f7c;box-shadow:none}
.td-reach{margin-top:.6cqw}
.td-via{margin:.5cqw 0 0;padding:.45cqw .9cqw;border-radius:1cqw;background:#eef6fb;color:#2f5f86;font:600 .85cqw/1.4 'Malgun Gothic',sans-serif}

/* Travel transition v4 (user 2026-11-07): old camera iris shutter, only inside the left card (transport photo → city minimap board).
   8 blades close into a turning octagon, flutter once, shut; the route text shows in the dark; on arrival they open with a warm light. */
@property --tfx-d{syntax:'<number>';inherits:true;initial-value:1.1}
@property --tfx-t{syntax:'<angle>';inherits:true;initial-value:0deg}
.travel-fx-block{position:fixed;inset:0;z-index:9998;background:transparent;pointer-events:all}
.travel-fx{position:fixed;inset:0;z-index:9999;overflow:hidden;pointer-events:none;container-type:size;isolation:isolate;--tfx-d:1.1;--tfx-t:0deg}
.travel-fx-blade{position:absolute;left:50%;top:50%;width:400cqmax;height:400cqmax;transform-origin:0 0;
 transform:rotate(calc(var(--a) + var(--tfx-t))) translate(-50%,calc(var(--tfx-d) * 100cqmax));
 background:linear-gradient(180deg,#24232a 0,#121116 1.5%,#060608 12%);box-shadow:0 -1px 0 rgba(255,255,255,.14),0 -10px 24px rgba(0,0,0,.55)}
.travel-fx-glow{position:absolute;left:50%;top:50%;width:40cqmin;height:40cqmin;margin:-20cqmin 0 0 -20cqmin;border-radius:50%;opacity:0;
 background:radial-gradient(circle,rgba(255,253,244,1) 0,rgba(255,238,214,.9) 30%,rgba(255,206,224,.45) 58%,transparent 72%);transform:scale(.2)}
.travel-fx-text{position:absolute;left:0;right:0;top:50%;margin:-.7em 0 0;text-align:center;color:#fff;font:700 clamp(14px,3.2cqmin,26px) 'Malgun Gothic',sans-serif;letter-spacing:.06em;opacity:0;text-shadow:0 0 12px rgba(255,255,255,.35)}
.travel-fx.is-in{animation:tfx-close 1.9s cubic-bezier(.6,0,.8,.45) forwards}
.travel-fx.is-in .travel-fx-text{animation:tfx-text .5s 1.5s ease-out forwards}
.travel-fx.is-out{--tfx-d:0;--tfx-t:70deg;animation:tfx-open 1.8s cubic-bezier(.45,.05,.55,.95) forwards}
.travel-fx.is-out .travel-fx-text{opacity:.95;animation:tfx-text-out .35s ease-in forwards}
.travel-fx.is-out .travel-fx-glow{animation:tfx-glow 1.8s ease-out forwards}
/* blades sweep in turning, open a little once (the "깜빡"), then shut */
@keyframes tfx-close{0%{--tfx-d:1.1;--tfx-t:0deg}45%{--tfx-d:.12;--tfx-t:42deg}58%{--tfx-d:.2;--tfx-t:36deg}82%{--tfx-d:.025;--tfx-t:62deg}100%{--tfx-d:0;--tfx-t:70deg}}
@keyframes tfx-open{0%{--tfx-d:0;--tfx-t:70deg}20%{--tfx-d:.05;--tfx-t:60deg}60%{--tfx-d:.45;--tfx-t:18deg}100%{--tfx-d:1.1;--tfx-t:0deg}}
@keyframes tfx-glow{0%{opacity:0;transform:scale(.2)}18%{opacity:1;transform:scale(.8)}60%{opacity:.85;transform:scale(4.5)}100%{opacity:0;transform:scale(7)}}
@keyframes tfx-text{to{opacity:.95}}@keyframes tfx-text-out{to{opacity:0}}
.travel-fx.is-reduced{background:#000;opacity:0}.travel-fx.is-reduced .travel-fx-blade,.travel-fx.is-reduced .travel-fx-glow{display:none}
.travel-fx.is-reduced.is-in{animation:tfx-fade .2s linear forwards}.travel-fx.is-reduced.is-out{animation:tfx-fade .25s linear reverse forwards}
.travel-fx.is-reduced .travel-fx-text{opacity:.95;animation:none}
@keyframes tfx-fade{from{opacity:0}to{opacity:1}}

/* sleep transition (user 2026-11-07): the next date fades in while the shutter is closed */
.travel-fx:not(.is-out) .travel-fx-text.is-swap{animation:tfx-text .5s ease-out both!important;opacity:0}