/* 지도: 전국 지도(SVG)·도시 카드·지도 단추, 도시 확대 거리 지도(MapLibre)·좌우 이름표 */
.stage{display:grid;grid-template-columns:minmax(0,1fr) var(--panel-w);min-height:0}
.map{position:relative;overflow:hidden;background:var(--sea);touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.map.dragging{cursor:grabbing}
.map-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.land{fill:var(--land);stroke:var(--coast);stroke-width:1.1;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.inset-frame{fill:none;stroke:var(--coast);stroke-width:1;stroke-dasharray:4 3;vector-effect:non-scaling-stroke;opacity:.7}
.river{fill:none;stroke:var(--river);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.sea-name{font-size:13px;fill:var(--faint);letter-spacing:.3em;font-weight:500}
.district{font-size:13px;font-weight:700;fill:var(--faint);letter-spacing:.04em;paint-order:stroke;stroke:var(--land);stroke-width:4px;stroke-linejoin:round;pointer-events:none}
.lead{stroke:var(--ink-2);stroke-width:1;fill:none}
.ring{fill:var(--ink-wash);stroke:var(--ink-2);stroke-width:1;stroke-dasharray:3 3}
.anchor{fill:var(--ink);stroke:var(--card);stroke-width:2}
.anchor.dim{fill:var(--faint)}
.hdot{stroke:var(--card);stroke-width:2;cursor:pointer}
.hdot.dim{opacity:.22}
.hdot.on{stroke:var(--ink);stroke-width:3}
.hlabel{font-size:13px;font-weight:700;fill:var(--ink);paint-order:stroke;stroke:var(--card);stroke-width:4px;stroke-linejoin:round;pointer-events:none}

/* 도시 카드: full(체인별 줄) · compact(아이콘+수) · mini(이름+합계) · group(가까운 도시 묶음) */
.cards{position:absolute;inset:0;pointer-events:none}
.card{position:absolute;left:0;top:0;pointer-events:auto;width:max-content;max-width:calc(100vw - 24px);border:1.5px solid var(--ink);border-radius:4px;background:var(--card);box-shadow:var(--shadow);padding:0;text-align:left;transition:transform .12s,box-shadow .12s}
.card:hover,.card.hot{z-index:3;box-shadow:0 0 0 3px var(--signal),var(--shadow)}
.card.on{background:var(--signal);z-index:4}
.card-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:6px 9px 5px}
.card-h b{font-weight:700;font-size:15px;letter-spacing:0;color:var(--ink);white-space:nowrap}
.card-h .num{font-weight:700;font-size:20px;line-height:1}
.card-h .num small{font-family:var(--ko);font-size:12px;font-weight:700;margin-left:1px}
.card--full{width:160px}
.card--full ul{list-style:none;margin:0;padding:3px 9px 7px;border-top:1px solid var(--rule)}
.card.on ul{border-top-color:var(--ink-line)}
.card--full li{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:8px;height:28px}
.card--full li .bi{width:22px;height:22px}
.card--full li>img{height:13px;width:auto;max-width:68px;display:block}
.card--full li>img.logo-accor{height:18px}
.card--full li .num{font-weight:700;font-size:15px}
.card--compact{display:flex;align-items:center;gap:10px;padding:5px 10px;white-space:nowrap}
.card--compact .card-h{padding:0;gap:6px}
.card--compact .card-h .num{font-size:17px}
.pips{display:flex;align-items:center;gap:13px}
.pip{display:inline-flex;align-items:center;gap:4px;font-family:var(--num);font-weight:700;font-size:17px;line-height:1}
.card--mini{display:flex;align-items:center;gap:5px;padding:3px 7px;border-width:1px;white-space:nowrap}
.card--mini .card-h{padding:0;gap:5px}
.card--mini .card-h b{font-size:13px}
.card--mini .card-h .num{font-size:15px}
.card--group{display:grid;grid-template-columns:auto auto 1fr;padding:3px;min-width:0}
.card--group:hover,.card--group:has(.hot){box-shadow:var(--shadow)}
/* 줄마다 같은 칸(subgrid): 도시 이름 · 합계 · 체인별 수. 합계는 이름에 붙이고 세로 선으로 체인별 수와 나눈다 */
.grow{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:center;column-gap:7px;height:36px;padding:0 8px;border:0;border-radius:3px;background:none;text-align:left;white-space:nowrap}
.grow+.grow{box-shadow:0 -1px 0 var(--rule-2)}
.grow b{font-weight:700;font-size:15px;color:var(--ink)}
.grow>.num{font-weight:700;font-size:17px;text-align:left;padding-right:11px;box-shadow:inset -1px 0 var(--rule)}
.grow>.num small{font-family:var(--ko);font-size:12px;font-weight:700;margin-left:1px}
.grow .pips{padding-left:4px}
.grow:hover,.grow.hot{background:var(--signal-soft)}
.grow.on{background:var(--signal)}
.card--group.is-mini{grid-template-columns:auto auto}
.card--group.is-mini .grow{height:26px}
.card--group.is-mini .grow>.num{padding-right:0;box-shadow:none}
.card--group.is-stack{grid-template-columns:auto 1fr}
.card--group.is-stack .grow{height:auto;row-gap:3px;padding:6px 8px}
.card--group.is-stack .grow .pips{grid-column:1/-1;padding:0 0 2px}
.card--group.is-stack .grow>.num{padding-right:0;box-shadow:none}

/* 지도 단추 · 안내 */
.map-tools{position:absolute;right:16px;bottom:16px;z-index:5;display:grid;border:1.5px solid var(--ink);border-radius:4px;background:var(--card);box-shadow:var(--shadow);overflow:hidden}
.map-tools button{width:40px;height:40px;border:0;background:none;font-size:20px;font-weight:500;line-height:1}
.map-tools button+button{border-top:1px solid var(--rule)}
.map-tools button:hover{background:var(--paper-2)}
.map-back{position:absolute;left:16px;top:16px;z-index:5;height:40px;padding:0 16px;border:1.5px solid var(--ink);border-radius:20px;background:var(--card);box-shadow:var(--shadow);font-weight:700;font-size:14px}
.map-back:hover{background:var(--signal)}
.map-note{position:absolute;left:16px;bottom:12px;z-index:5;margin:0;max-width:min(520px,70%);font-size:12px;color:var(--muted);pointer-events:none}

/* 도시 확대: MapLibre 거리 지도 */
.map .city-map{position:absolute;inset:0;width:auto;height:auto;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s;cursor:auto}
.map.ml-on .city-map{opacity:1;visibility:visible;transition:opacity .35s ease}
.map.ml-on{cursor:auto}
.map.ml-on .map-svg,.map.ml-on .cards{visibility:hidden}
.map.ml-on .map-tools{bottom:40px}
.map-note:empty{display:none!important}
.map.ml-on .map-note{bottom:auto;top:66px;left:16px;padding:4px 10px;border-radius:12px;background:var(--glass);box-shadow:var(--glass-shadow);color:var(--ink-2)}
.city-map .maplibregl-ctrl-attrib{font-family:var(--ko);font-size:12px}
.city-map .maplibregl-cooperative-gesture-screen{font-family:var(--ko)}

/* 도시 확대: 좌우 끝 이름표 + 연결선 */
.callouts{position:absolute;inset:0;z-index:4;pointer-events:none}
.callouts[hidden]{display:none}
.co-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.co-lines path{fill:none;stroke:var(--ink-2);stroke-width:1.2;stroke-linejoin:round;opacity:.75}
.co-lines path.on{stroke:var(--ink);stroke-width:2.4;opacity:1}
.co-end{fill:var(--ink);stroke:var(--card);stroke-width:1.5}
.co-end.on{r:5px}
.co-ring{fill:var(--ink-wash-2);stroke:var(--ink-2);stroke-width:1.2;stroke-dasharray:3 3}
.co-ring.on{stroke:var(--ink);stroke-width:2}
.co{position:absolute;pointer-events:auto;display:flex;align-items:center;gap:8px;width:212px;height:40px;padding:0 10px 0 8px;border:1.5px solid var(--ink);border-radius:4px;background:var(--card);box-shadow:var(--shadow);text-align:left;color:var(--ink);font-size:13px;font-weight:700;line-height:1.25}
.co:hover{box-shadow:0 0 0 3px var(--signal),var(--shadow)}
.co.on{background:var(--signal)}
.co .bi{width:22px;height:22px}
.co-n{min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all}
.co--group{border-style:dashed;background:var(--paper)}
.co--group .co-n{display:flex;flex-direction:column;line-height:1.2}
.co--group .co-n b{font-weight:700;font-size:13px}
.co--group .co-n small{font-size:12px;font-weight:500;color:var(--muted)}
.co-bis{display:flex;flex:none;gap:3px}
.co-bis .bi{width:18px;height:18px;border-radius:5px}

@media (max-width:900px){
  .stage{display:block}
  /* 폰: 한 손가락은 페이지 스크롤, 두 손가락은 지도(전국 지도는 country-map.js, 거리 지도는 MapLibre cooperativeGestures) */
  .map{height:min(68vh,560px);min-height:380px;border-bottom:1px solid var(--rule);scroll-margin-top:57px;touch-action:pan-x pan-y}
  .map-note{right:70px;max-width:none;bottom:10px;font-size:12px}
}
@media (max-width:639px){
  .co{width:118px;height:36px;gap:5px;padding:0 6px 0 5px;font-size:12px;line-height:1.2;border-width:1px}
  .co .bi{width:17px;height:17px;border-radius:4px}
  .co--group .co-n b{font-size:12px}
  .co--group .co-n small{font-size:12px}
  .co-bis{gap:0}
  .co-bis .bi{width:14px;height:14px}
  .co-bis .bi+.bi{margin-left:-4px}
}
@media (max-width:560px){
  .map-note{display:none}
  .map.ml-on .map-note{display:block;top:62px;right:16px;font-size:12px}
}
@media (max-width:480px){
  .card{border-width:1px}
  .card-h b,.grow b{font-size:14px}
  .card-h .num,.grow>.num{font-size:15px}
  .card--compact{gap:7px;padding:4px 7px}
  .card--compact .card-h .num{font-size:15px}
  .pips{gap:6px}
  .pip{gap:2px;font-size:14px}
  .card--group{padding:2px}
  .grow{column-gap:5px;height:28px;padding:0 6px}
  .grow>.num{padding-right:7px}
  .grow .pips{padding-left:2px}
  .card--group.is-stack .grow{padding:3px 6px;row-gap:1px}
  .card--group.is-mini .grow{height:22px}
  .card--mini{padding:2px 6px}
  .card--mini .card-h b{font-size:13px}
}
@media (prefers-reduced-motion:reduce){.city-map{transition:none}}