/* Existing Seoul green / warm paper / clay tokens apply to every map state. */
.ez-metro{--metro-map-base-height:380px;--metro-map-max-height:640px;--map-land:var(--ez-soft-brand);--map-line:var(--ez-primary);margin-top:24px}
.ez-metro [hidden]{display:none!important}
.ez-metro-choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:18px}
.ez-metro-choice{min-width:0;display:flex;align-items:center;gap:14px;padding:14px 18px;border:1px solid var(--ez-line);border-radius:16px;background:var(--ez-card);color:var(--ez-ink);text-decoration:none;transition:background .18s,border-color .18s}
.ez-metro-region-dot{width:10px;height:10px;flex:none;border-radius:50%;background:var(--ez-primary)}
.ez-metro-choice[data-metro-region=incheon] .ez-metro-region-dot{background:var(--ez-clay)}
.ez-metro-choice[data-metro-region=gyeonggi] .ez-metro-region-dot{background:var(--ez-line);border:1px solid var(--ez-primary)}
.ez-metro-choice strong{display:block;font-size:16px;line-height:1.35}
.ez-metro-choice small{display:block;color:var(--ez-muted);font-size:12px;margin-top:3px;white-space:nowrap}
.ez-metro-choice-arrow{margin-left:auto;color:var(--ez-clay);font-size:20px}
.ez-metro-choice:hover,.ez-metro-choice[aria-pressed=true]{background:var(--ez-soft-brand);border-color:var(--ez-primary)}
.ez-metro-overview{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:4px;border:1px solid var(--ez-line);border-radius:16px;background:var(--ez-card);color:var(--ez-ink);padding:14px 18px;text-align:left}
.ez-metro-overview strong{font-size:16px;line-height:1.35}
.ez-metro-overview small{font-size:12px;color:var(--ez-muted)}
.ez-metro-overview[aria-pressed=true]{background:var(--ez-primary);border-color:var(--ez-primary);color:var(--ez-on-primary)}
.ez-metro-overview[aria-pressed=true] small{color:var(--ez-on-primary)}
.ez-metro-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);border:1px solid var(--ez-line);border-radius:16px;overflow:hidden;background:var(--ez-card)}
.ez-metro-stage{display:flex;flex-direction:column;min-width:0;background:var(--ez-paper);position:relative}
.ez-metro-map-head{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:22px 24px 0;min-height:69px}
.ez-metro-map-kicker{font-size:11px;font-weight:600;color:var(--ez-muted)}
.ez-metro-map-head h3{font-size:20px;line-height:1.4;margin:3px 0 0;color:var(--ez-ink)}
.ez-metro button{font:inherit;cursor:pointer}
.ez-metro-reset,.ez-metro-city-zoom{font-size:12px!important;font-weight:600!important;border:1px solid var(--ez-line);border-radius:999px;color:var(--ez-primary);background:var(--ez-card);padding:8px 12px;min-height:36px;white-space:nowrap}
.ez-metro-reset:hover,.ez-metro-city-zoom:hover{border-color:var(--ez-primary)}
.ez-metro-canvas{display:block;width:100%;height:var(--metro-map-height,var(--metro-map-base-height));transition:height .72s cubic-bezier(.65,0,.35,1);overflow:hidden;margin:10px 0;touch-action:pan-y}
.ez-metro-province{transition:opacity .3s ease}
.ez-metro-province path{fill:var(--map-land);stroke:var(--ez-primary);stroke-width:1;transition:fill .3s,opacity .3s}
.ez-metro[data-region=all] .ez-metro-province[data-metro-region=seoul] path{fill:var(--ez-primary)}
.ez-metro[data-region=all] .ez-metro-province[data-metro-region=incheon] path{fill:var(--ez-clay)}
.ez-metro[data-region=all] .ez-metro-province[data-metro-region=gyeonggi] path{fill:var(--ez-line)}
.ez-metro-province:hover path,.ez-metro-province:focus-visible path{fill:var(--ez-primary)}
.ez-metro-province text{fill:var(--ez-ink);paint-order:stroke;stroke:var(--ez-paper);stroke-width:.9;stroke-linejoin:round;font-weight:700;pointer-events:none}
.ez-metro[data-region]:not([data-region=all]) .ez-metro-province{opacity:.12;pointer-events:none}
.ez-metro[data-region=seoul] .ez-metro-province[data-metro-region=seoul],.ez-metro[data-region=incheon] .ez-metro-province[data-metro-region=incheon],.ez-metro[data-region=gyeonggi] .ez-metro-province[data-metro-region=gyeonggi]{opacity:1}
.ez-metro[data-region]:not([data-region=all]) .ez-metro-province text{display:none}
.ez-metro-district path{fill:var(--map-land);stroke:var(--map-line);stroke-width:.8}
.ez-metro-district text{fill:var(--ez-dark);font-weight:600;pointer-events:none;paint-order:stroke;stroke:var(--ez-paper);stroke-width:.12;stroke-linejoin:round}
.ez-metro-district:focus-visible{outline:none}
.ez-metro-district.is-active path,.ez-metro-district:focus-visible path{fill:var(--ez-primary)}
.ez-metro-district.is-active text,.ez-metro-district:focus-visible text{fill:var(--ez-on-primary);stroke:none}
.ez-metro-hover-layer{pointer-events:none}
.ez-metro-hover-shape{transform-box:fill-box;transform-origin:center;transform:scale(1.035);pointer-events:none;animation:ez-metro-lift .18s ease-out}
.ez-metro-hover-shape path{fill:var(--ez-primary);stroke:var(--ez-dark);stroke-width:1.15}
.ez-metro-hover-shape text{fill:var(--ez-on-primary);stroke:none;font-weight:700}
@keyframes ez-metro-lift{from{transform:scale(1)}to{transform:scale(1.035)}}
.ez-metro-map-foot{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:0 24px 18px;min-height:42px}
.ez-metro-map-foot p{font-size:12px;color:var(--ez-muted);line-height:1.6;margin:0}
.ez-metro-directory{min-width:0;border-left:1px solid var(--ez-line);padding:24px}
.ez-metro-directory-head h3{font-size:18px;line-height:1.4;margin:0 0 8px;color:var(--ez-ink)}
.ez-metro-directory-head p{font-size:13px;line-height:1.7;color:var(--ez-muted);min-height:44px;margin:0 0 20px}
.ez-metro-directory-lists{max-height:350px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--ez-line) transparent;padding:3px}
.ez-metro-directory-region+.ez-metro-directory-region{margin-top:20px}
.ez-metro-directory-region h4{font-size:14px;display:flex;justify-content:space-between;align-items:center;margin:0 0 12px;color:var(--ez-ink)}
.ez-metro-directory-region h4 span{font-size:11px;font-weight:400;color:var(--ez-muted)}
.ez-metro-area-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.ez-metro-area-links a{display:flex;align-items:center;justify-content:space-between;gap:4px;font-size:12px;line-height:1.4;min-height:38px;padding:8px;border:1px solid var(--ez-line);border-radius:8px;color:var(--ez-ink);text-decoration:none;background:var(--ez-card)}
.ez-metro-area-links a span:last-child{color:var(--ez-muted)}
.ez-metro-area-links a:hover,.ez-metro-area-links a.is-active{background:var(--ez-primary);border-color:var(--ez-primary);color:var(--ez-on-primary)}
.ez-metro-area-links a:hover span:last-child,.ez-metro-area-links a.is-active span:last-child{color:var(--ez-on-primary)}
.ez-metro-region-link{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:600;color:var(--ez-primary);margin-top:16px;padding:8px 0;text-decoration:none}
.ez-metro-source{font-size:12px;color:var(--ez-muted);line-height:1.8;margin-top:12px}
.ez-metro-source summary{cursor:pointer;display:list-item;list-style:disclosure-closed inside}
.ez-metro-source[open] summary{list-style-type:disclosure-open}
.ez-metro-source p{margin:8px 0}
.ez-metro-source a{color:var(--ez-primary);text-underline-offset:3px}
.ez-metro-noscript{font-size:13px;color:var(--ez-muted)}
.ez-metro a:focus-visible,.ez-metro button:focus-visible{outline:3px solid var(--ez-clay);outline-offset:3px}
.ez-metro .ez-metro-canvas a:focus-visible{outline:none}
.ez-metro .ez-metro-canvas a:focus-visible path,.ez-metro-hover-shape.is-keyboard path{stroke:var(--ez-clay);stroke-width:2.5}
@media(max-width:1000px){.ez-metro-layout{grid-template-columns:minmax(0,1.25fr) minmax(260px,1fr)}.ez-metro-choice{padding:12px;gap:10px}.ez-metro-choice svg{width:60px;height:52px}.ez-metro-choice-arrow{display:none}.ez-metro-directory{padding:20px}.ez-metro-area-links{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.ez-metro{--metro-map-base-height:320px;--metro-map-max-height:480px;margin-top:18px}.ez-metro-choices{gap:8px;margin-bottom:12px}.ez-metro-choice{padding:12px 8px;flex-direction:column;gap:6px;text-align:center;border-radius:12px}.ez-metro-choice svg{width:68px;height:48px}.ez-metro-choice strong{font-size:16px}.ez-metro-choice small{font-size:10px}.ez-metro-layout{grid-template-columns:1fr}.ez-metro-map-head{padding:18px 16px 0;min-height:61px}.ez-metro-map-head h3{font-size:18px}.ez-metro-canvas{margin:6px 0}.ez-metro-map-foot{padding:0 16px 16px;flex-wrap:wrap;gap:8px}.ez-metro-map-foot p{font-size:11px}.ez-metro-directory{padding:20px 16px;border-left:0;border-top:1px solid var(--ez-line)}.ez-metro-directory-head h3{font-size:16px}.ez-metro-directory-head p{min-height:0;margin-bottom:14px;font-size:12px}.ez-metro-directory-lists{max-height:235px}.ez-metro-area-links{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.ez-metro-area-links a{min-height:40px;font-size:11px;padding:7px 6px}.ez-metro-source{font-size:11px}}
@media(max-width:360px){.ez-metro{--metro-map-base-height:285px;--metro-map-max-height:430px}.ez-metro-area-links{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.ez-metro *,.ez-metro *::before,.ez-metro *::after{animation:none!important;transition:none!important}.ez-metro-hover-shape{transform:none}}

/* One connected overview map, followed by a camera move and district reveal. */
.ez-metro-province-labels{opacity:1;visibility:visible;transition:opacity .2s ease}
.ez-metro:not([data-region=all]) .ez-metro-province-labels,.ez-metro[data-transition=zooming] .ez-metro-province-labels{opacity:0;visibility:hidden;pointer-events:none}
.ez-metro-leader{stroke:var(--ez-muted);stroke-width:1;stroke-dasharray:3 3;opacity:.7;pointer-events:none}
.ez-metro-anchor-dot{fill:var(--ez-primary);stroke:var(--ez-card);stroke-width:1;vector-effect:non-scaling-stroke;pointer-events:none}
.ez-metro-label-face{transition:transform .2s ease;transform-origin:center;transform-box:fill-box}
.ez-metro-label-face rect{fill:var(--ez-card);stroke:var(--ez-line);stroke-width:1}
.ez-metro-label-face text{font-size:13px;font-weight:700;fill:var(--ez-ink);pointer-events:none}
.ez-metro-label-face .ez-metro-label-arrow{font-size:16px;fill:var(--ez-primary)}
.ez-metro-province-label:focus-visible .ez-metro-label-face rect{stroke:var(--ez-clay);stroke-width:2}
.ez-metro[data-hover-region=seoul] .ez-metro-province[data-metro-region=seoul] path,.ez-metro[data-hover-region=incheon] .ez-metro-province[data-metro-region=incheon] path,.ez-metro[data-hover-region=gyeonggi] .ez-metro-province[data-metro-region=gyeonggi] path{fill:var(--ez-primary);stroke-width:1.5}
.ez-metro[data-hover-region=seoul] .ez-metro-province-label[data-metro-region=seoul] .ez-metro-label-face,.ez-metro[data-hover-region=incheon] .ez-metro-province-label[data-metro-region=incheon] .ez-metro-label-face,.ez-metro[data-hover-region=gyeonggi] .ez-metro-province-label[data-metro-region=gyeonggi] .ez-metro-label-face{transform:translateY(-2px)}
.ez-metro[data-hover-region=seoul] .ez-metro-province-label[data-metro-region=seoul] rect,.ez-metro[data-hover-region=incheon] .ez-metro-province-label[data-metro-region=incheon] rect,.ez-metro[data-hover-region=gyeonggi] .ez-metro-province-label[data-metro-region=gyeonggi] rect{stroke:var(--ez-primary)}
.ez-metro-district-layer{opacity:1;transition:opacity .28s ease}
.ez-metro[data-transition=zooming] .ez-metro-district-layer{opacity:0;pointer-events:none;transition:none}
.ez-metro-district-layer text{transition:opacity .3s .08s ease}
.ez-metro[data-transition=zooming] .ez-metro-district-layer text{opacity:0;transition:none}
.ez-metro[data-transition=zooming] .ez-metro-canvas{cursor:progress}
@media(max-width:700px){
 .ez-metro-choices{gap:6px}
 .ez-metro-choice{padding:12px 5px;gap:4px;min-height:74px}
 .ez-metro-choice strong,.ez-metro-overview strong{font-size:14px}
 .ez-metro-choice small{font-size:10px}
 .ez-metro-region-dot{width:7px;height:7px}
 .ez-metro-overview{padding:12px 6px;align-items:center;text-align:center;border-radius:12px}
 .ez-metro-overview small{font-size:9px;line-height:1.5}
}
@media(prefers-reduced-motion:reduce){.ez-metro-label-face{transform:none!important}}

.ez-metro:not([data-region=all]) .ez-metro-directory-lists{max-height:var(--metro-map-height,350px)}

/* Unfolded phone widths need room for district names and touch targets. */
@media(min-width:701px) and (max-width:900px){
 .ez-metro-layout{grid-template-columns:minmax(0,1fr)}
 .ez-metro-directory{border-left:0;border-top:1px solid var(--ez-line)}
 .ez-metro-area-links{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:1024px),(pointer:coarse){
 .ez-metro-area-links a,.ez-metro-reset,.ez-metro-city-zoom{min-height:44px}
}