/* M-1..M-3 · 서울 지도 시안 (map.js sets <html data-mp="run"> when the map comes into view).
   The geography (maps/seoul-m*.svg) is drawn from KOSTAT district boundaries; the route, labels and pins sit on top.
   Without data-mp="run" everything shows its finished state. */

.mp { --mp-ease: cubic-bezier(0.16, 1, 0.3, 1); }
.mp-sec { padding: 112px 0 120px; overflow: clip; }
.mp .l1-wrap { width: min(1296px, calc(100% - 96px)); }
.mp-grid { display: grid; grid-template-columns: minmax(0, 0.66fr) minmax(0, 1.34fr); align-items: center; gap: 56px; }
.mp-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.mp-card { position: relative; overflow: clip; border-radius: 32px; }
.mp-art { position: relative; aspect-ratio: 1000 / 807; }
.mp-art > img, .mp-over { position: absolute; inset: 0; width: 100%; height: 100%; }
.mp-over { overflow: visible; }

/* labels drawn in the overlay svg */
.mp-lab { font-family: var(--l-sans); font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em; text-anchor: middle; paint-order: stroke; stroke-linejoin: round; }
.mp-river { font-family: var(--l-display); font-size: 12px; font-weight: 700; letter-spacing: 0.32em; }
.mp-land { font-family: var(--l-sans); font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-anchor: middle; }
.mp-scale path { fill: none; stroke-width: 2; }
.mp-scale text { font-family: var(--l-display); font-size: 12px; font-weight: 700; }
.mp-lab--poi { font-size: 11.5px; font-style: italic; font-weight: 600; }
.mp-poi path { fill: currentColor; }
.mp-north text { font-family: var(--l-display); font-size: 12px; font-weight: 700; text-anchor: middle; }

/* the route: a casing, the line, a light that travels it */
.mp-route-case { fill: none; stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.mp-route { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.mp-route--dash { stroke-dasharray: 0.006 0.012; }
html[data-mp="run"] .mp-route-case, html[data-mp="run"] .mp-route-draw { stroke-dasharray: 1 1; animation: mp-draw 2.2s var(--mp-ease) 0.35s both; }
@keyframes mp-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.mp-route--dash { animation: mp-march 1.6s linear infinite; }
@keyframes mp-march { to { stroke-dashoffset: -0.018; } }

/* pins (same pieces as L-1's .l1-pin) */
.mp .l1-pin { z-index: 3; translate: var(--tx, -50%) var(--ty, -100%); }
/* the airport is off the map to the west: a label on the left edge over the start of the route, no dot */
.mp .mp-pin--edge { --tx: 0%; --tox: 0%; align-items: flex-start; }
.mp-edge-line { width: 2px; height: 18px; margin-left: 22px; border-radius: 2px; background: currentColor; color: var(--l-sky-strong); opacity: 0.6; }
html .mp .l1-pin { animation: none; } /* in L-1 the scroll-timeline pin drop (l1.css) is replaced by map.js */
html[data-mp="run"] .mp .l1-pin { animation: mp-pin 0.9s var(--mp-ease) var(--delay, 0s) both; }
@keyframes mp-pin { from { opacity: 0; translate: var(--tx, -50%) calc(var(--ty, -100%) - 30px); } to { opacity: 1; translate: var(--tx, -50%) var(--ty, -100%); } }
.mp-tag { position: absolute; z-index: 3; right: 18px; bottom: 16px; padding: 6px 12px; border-radius: 999px; font-size: 12px; line-height: 1.4; font-weight: 600; }
.mp-credit { position: absolute; z-index: 3; left: 20px; bottom: 16px; font-size: 11px; line-height: 1.4; }

/* =========================================================
   M-1 · 라인 지도 (light, cartographic)
   ========================================================= */
.m1 .mp-card { background: #ffffff; box-shadow: var(--l-shadow-float); }
.m1 .mp-art { margin: 18px; }
.m1 .mp-lab { fill: #7f8ea1; stroke: #f2faf7; stroke-width: 3px; }
.m1 .mp-lab--on { fill: var(--l-deep); font-weight: 700; }
.m1 .mp-lab--poi { fill: #5f8f82; }
.m1 .mp-poi { color: #5f8f82; }
.m1 .mp-river { fill: #4c78c8; }
.m1 .mp-route-case { stroke: #ffffff; }
.m1 .mp-route { stroke: var(--l-deep); }
.m1 .mp-scale path { stroke: #7f8ea1; }
.m1 .mp-scale text, .m1 .mp-lab--poi { font-size: 11.5px; font-style: italic; font-weight: 600; }
.mp-poi path { fill: currentColor; }
.mp-north text { fill: #7f8ea1; }
.m1 .mp-north path { fill: #7f8ea1; }
.m1 .mp-tag { background: rgba(255, 255, 255, 0.92); color: var(--l-ink-3); box-shadow: 0 0 0 1px var(--l-line); }
.m1 .mp-credit { color: #9aa6b5; }

/* =========================================================
   M-2 · 도트 지도 (the current dot look, on the real outline)
   ========================================================= */
.m2 .mp-card { background: #f7fbf9; box-shadow: var(--l-shadow-float), inset 0 0 0 1px rgba(14, 107, 90, 0.06); }
.m2 .mp-art { margin: 14px; }
.m2 .mp-lab { fill: var(--l-deep); stroke: #f7fbf9; stroke-width: 4px; font-weight: 700; }
.m2 .mp-river { fill: #3f6fc4; }
.m2 .mp-lab--poi { fill: var(--l-ink-2); }
.m2 .mp-poi { color: var(--l-ink-2); }
.m2 .mp-route-case { stroke: #f7fbf9; stroke-width: 9; }
.m2 .mp-route { stroke: var(--l-ink); stroke-width: 4.5; }
.m2 .mp-scale path { stroke: #7f8ea1; }
.m2 .mp-scale text, .m2 .mp-lab--poi { font-size: 11.5px; font-style: italic; font-weight: 600; }
.mp-poi path { fill: currentColor; }
.mp-north text { fill: #7f8ea1; }
.m2 .mp-north path { fill: #7f8ea1; }
.m2 .mp-tag { background: #ffffff; color: var(--l-ink-3); box-shadow: var(--l-shadow-soft); }
.m2 .mp-credit { color: #9aa6b5; }
html[data-mp="run"] .m2 .mp-hot { animation: mp-glow 1.2s var(--mp-ease) var(--delay, 0.9s) both; }
@keyframes mp-glow { from { opacity: 0; } }

/* =========================================================
   M-3 · 나이트 3D (night lights, the city tilted in 3D)
   ========================================================= */
.m3 .mp-card { padding: 26px 22px 48px; background: radial-gradient(70% 70% at 50% 40%, #13294d, #0b1630 70%); box-shadow: var(--l-shadow-float); perspective: 1600px; }
.m3 .mp-stage { transform-style: preserve-3d; }
.m3 .mp-art { margin: -72px 0 -36px; transform-style: preserve-3d; transform-origin: 50% 60%; transform: rotateX(44deg) rotateZ(-9deg) scale(1.14); }
.m3 .mp-scale, .m3 .mp-north { display: none; }
html[data-mp="run"] .m3 .mp-art { animation: mp-tilt 2.4s var(--mp-ease) both; }
@keyframes mp-tilt { from { transform: rotateX(0deg) rotateZ(0deg) scale(0.96); } }
.m3 .mp-slab { position: absolute; inset: 0; width: 100%; height: 100%; transform: translateZ(-16px); opacity: 0.85; filter: brightness(0.5); }
.m3 .mp-lab { fill: rgba(214, 233, 255, 0.72); stroke: #0e1d3a; stroke-width: 3px; font-size: 13px; }
.m3 .mp-lab--on { fill: #ffffff; }
.m3 .mp-river { fill: #9cc0ff; }
.m3 .mp-lab--poi { fill: rgba(255, 228, 190, 0.85); }
.m3 .mp-poi { color: rgba(255, 228, 190, 0.85); }
.m3 .mp-route-case { stroke: rgba(255, 179, 120, 0.28); stroke-width: 14; filter: blur(3px); }
.m3 .mp-route { stroke: #ffb37a; stroke-width: 4.5; }
.m3 .mp-scale path { stroke: rgba(214, 233, 255, 0.6); }
.m3 .mp-scale text, .m3 .mp-lab--poi { font-size: 11.5px; font-style: italic; font-weight: 600; }
.mp-poi path { fill: currentColor; }
.mp-north text { fill: rgba(214, 233, 255, 0.7); }
.m3 .mp-north path { fill: rgba(214, 233, 255, 0.7); }
/* pins stand up out of the tilted plane: the inverse turn of the plane, pivoting on the pin's foot */
.m3 .l1-pin { transform-origin: var(--tox, 50%) 100%; translate: none; transform: translate(var(--tx, -50%), -100%) rotateZ(9deg) rotateX(-44deg); }
html[data-mp="run"] .m3 .l1-pin { animation: mp-pin3 0.9s var(--mp-ease) calc(var(--delay, 0s) + 1.1s) both; }
@keyframes mp-pin3 { from { opacity: 0; transform: translate(var(--tx, -50%), -100%) rotateZ(9deg) rotateX(-44deg) translateY(-34px); } }
.m3 .mp-edge-line { color: #ffb37a; }
.m3 .mp-pin--edge { margin-left: 5%; }
.m3 .l1-pin__label { background: rgba(255, 255, 255, 0.96); }
.m3 .mp-tag { background: rgba(255, 255, 255, 0.1); color: rgba(214, 233, 255, 0.8); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.m3 .mp-credit { color: rgba(214, 233, 255, 0.45); }

/* =========================================================
   M-4 · 면 지도 (DriveBerry reference): flat district shapes straight on the page background, no card, no dots,
   the clinic's district in the strong teal; the white pill labels and the route sit on top as before
   ========================================================= */
.m4 .mp-card { overflow: visible; border-radius: 0; background: none; box-shadow: none; }
.m4 .mp-art { margin: -12px -7% -12px 0; }
.m4 .mp-route-case { stroke: #ffffff; stroke-width: 9; }
.m4 .mp-route { stroke: var(--l-ink); stroke-width: 4.5; }
.m4 .l1-pin__label { box-shadow: 0 12px 26px -14px rgba(14, 84, 70, 0.5), 0 0 0 1px rgba(14, 107, 90, 0.05); }

/* ---------- M-2 inside the L-1 page ---------- */
@media (min-width: 900px) {
  .l1-map .l1-wrap.mp-wide { width: min(1296px, calc(100% - 96px)); grid-template-columns: minmax(0, 0.66fr) minmax(0, 1.34fr); }
}
@media (max-width: 767px) {
  .mp-card { border-radius: 22px; }
  .m1 .mp-art, .m2 .mp-art { margin: 8px; }
  .m4 .mp-art { margin: 0 -4% 0 -2%; }
  .mp .l1-pin__label { gap: 5px; padding: 5px 9px 5px 6px; font-size: 12px; }
  .mp .l1-pin__label small { display: none; }
  .mp .l1-pin__label i { width: 18px; height: 18px; }
  .mp .l1-pin__dot { width: 11px; height: 11px; margin-top: 6px; box-shadow: 0 0 0 3px #ffffff, 0 6px 12px rgba(0, 0, 0, 0.25); }
  /* 명동 and 압구정 sit close together on a phone: the clinic's label goes under its dot */
  .mp .l1-pin--clinic { flex-direction: column-reverse; --ty: -5.5px; }
  .mp .l1-pin--clinic .l1-pin__dot { margin: 0 0 6px; }
  .mp .mp-edge-line { height: 10px; margin-left: 14px; }
  .mp-scale, .mp-north { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mp-route--dash { animation: none; }
}