/* maps.css — v4.2.0 d3 + d3-geo + TopoJSON map.
 *
 * v3.4.0~v4.1.0 의 maplibre 의존 CSS 폐기. mono guide §2 정합.
 * 색은 mono 토큰 (--accent / --muted / --text 등) 으로 동적, 별도 테마 분기 불필요.
 */

.map-card {
  margin: 18px 0;
  background: var(--card, rgba(0, 0, 0, 0.18));
  border: 1px solid var(--border-soft, rgba(125, 98, 76, 0.25));
  border-radius: 10px;
  padding: 14px;
  overflow: hidden;
}

.map-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 720 / 380;
  border-radius: 6px;
  overflow: hidden;
  background: var(--map-water, #2A0E16);
}

.map-stage svg {
  display: block;
  width: 100%;
  height: 100%;
}

.map-stage .country { fill: var(--map-land, var(--bg)); }
.map-stage .country-border { stroke: var(--map-boundary, var(--text)); }

/* v4.4.6 — d3.zoom 컨트롤 + 힌트. 지도 컨테이너는 position:relative 이미 잡혀있어
   absolute 로 우상단에 띄움. */
.map-card { position: relative; }
.map-controls {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--border-soft, rgba(125, 98, 76, 0.35));
  border-radius: 6px;
  padding: 4px;
}
.map-controls button {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text, #EFE5D1);
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 14px;
  font-weight: 700;
  width: 26px;
  height: 26px;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
  padding: 0;
}
.map-controls button:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--accent, #D4A858);
}
.map-controls button:active { background: rgba(255, 255, 255, 0.14); }

.map-hint {
  margin-top: 8px;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 11px;
  letter-spacing: 0.2px;
  color: var(--muted, #A88E7A);
}

.map-stage { cursor: grab; }
.map-stage.dragging { cursor: grabbing; }

@media (max-width: 540px) {
  .map-stage { aspect-ratio: 4 / 3; }
  .map-controls { top: 18px; right: 18px; }
  .map-controls button { width: 30px; height: 30px; font-size: 16px; }
}