.map-explorer {
  overflow: hidden;
  background: linear-gradient(180deg, #f5f8ff 0%, #fff 100%);
}

.map-heading { margin-bottom: 34px; }

.map-stage {
  display: grid;
  grid-template-columns: minmax(600px, 1.2fr) minmax(420px, .8fr);
  gap: 28px;
  align-items: stretch;
}

.drilldown-panel,
.region-card {
  min-height: 650px;
  border: 1px solid #dfe5f0;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 30px 70px #1020441a;
}

.drilldown-panel {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}

.map-toolbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  min-height: 66px;
  padding: 12px 16px;
  border-bottom: 1px solid #e8ecf3;
}

.map-back {
  min-width: 88px;
  padding: 10px 13px;
  border: 1px solid #d5ddeb;
  border-radius: 999px;
  background: #fff;
  color: #1a2841;
  font: 700 12px/1 Pretendard, -apple-system, sans-serif;
  cursor: pointer;
}

.map-back:disabled {
  color: #93a0b5;
  cursor: default;
}

.map-breadcrumb {
  overflow: hidden;
  color: #354158;
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-level {
  padding: 7px 10px;
  border-radius: 999px;
  background: #eaf0ff;
  color: #275be8;
  font-size: 11px;
  font-weight: 750;
}

.korea-map {
  position: relative;
  min-height: 584px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, #fff 0%, #f5f8fe 62%, #edf2fa 100%);
  isolation: isolate;
}

.korea-map::before,
.korea-map::after {
  position: absolute;
  border: 1px solid #d9e3f6;
  border-radius: 50%;
  content: '';
  pointer-events: none;
}

.korea-map::before { inset: 13% 20%; }
.korea-map::after { inset: 2% 7%; }

.admin-map {
  position: absolute;
  z-index: 2;
  inset: 24px;
  width: calc(100% - 48px);
  height: calc(100% - 48px);
  overflow: visible;
  transform: translate3d(var(--map-x, 0), var(--map-y, 0), 0);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}

.admin-area {
  fill: #dfe6f2;
  stroke: #fff;
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition: fill .18s, filter .18s;
}

.admin-area:nth-child(3n + 1) { fill: #cfdbf1; }
.admin-area:nth-child(3n + 2) { fill: #e8edf6; }
.admin-area:hover,
.admin-area:focus-visible {
  fill: #7da0ff;
  filter: drop-shadow(0 4px 6px #17387d35);
  outline: none;
}

.admin-area.is-active { fill: #275be8; }

.admin-label {
  fill: #34435d;
  text-anchor: middle;
  dominant-baseline: middle;
  font-family: Pretendard, -apple-system, sans-serif;
  font-weight: 700;
  pointer-events: none;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 3px;
  stroke-linejoin: round;
}

.province-label { font-size: 13px; }
.municipality-label { font-size: 6px; stroke-width: 1.8px; }

.landmark-marker circle {
  fill: #ffca55;
  stroke: #fff;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 4px 8px #10295b66);
}

.landmark-marker text {
  fill: #14233f;
  font: 800 8px/1 Pretendard, -apple-system, sans-serif;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 3px;
}

.map-loading,
.map-error {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 30px;
  color: #667085;
  font-size: 14px;
  text-align: center;
}

.map-loading[hidden],
.map-error[hidden],
.admin-map[hidden] { display: none; }

.region-card {
  position: relative;
  display: grid;
  grid-template-rows: 520px auto;
  align-self: start;
  overflow: hidden;
  transform: translate3d(var(--card-x, 0), var(--card-y, 0), 0);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}

.region-visual {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 22% 18%, #dbe6ff 0 7%, transparent 30%),
    radial-gradient(circle at 82% 78%, #f4ddbd 0 5%, transparent 31%),
    linear-gradient(145deg, #fbfaf7 0%, #f1f4f9 52%, #f8f4ec 100%);
}

.region-photo {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(#ffffff59 1px, transparent 1px),
    linear-gradient(90deg, #ffffff59 1px, transparent 1px);
  background-position: center;
  background-size: 34px 34px;
  opacity: .5;
  transition: opacity .18s, transform .7s cubic-bezier(.2, .8, .2, 1);
}

.region-card.is-empty .region-photo {
  background-image:
    radial-gradient(circle at 70% 30%, #6389ed66 0 9%, transparent 10%),
    linear-gradient(135deg, #102754 0%, #173c83 52%, #275be8 100%);
  filter: none;
}

.region-card.is-empty .region-photo::before {
  position: absolute;
  inset: 12%;
  border: 1px solid #ffffff33;
  border-radius: 50%;
  box-shadow: 0 0 0 55px #ffffff08, 0 0 0 110px #ffffff06;
  content: '';
}

.region-visual::after {
  position: absolute;
  inset: auto 12% 16px;
  height: 34px;
  border-radius: 50%;
  background: #25355524;
  filter: blur(18px);
  content: '';
  pointer-events: none;
}

.frame-preview {
  position: absolute;
  z-index: 3;
  top: 12px;
  right: auto;
  bottom: 12px;
  left: 50%;
  width: 92%;
  filter: drop-shadow(0 19px 24px #24314b40);
  transform: translateX(-50%) translate3d(var(--print-x, 0), var(--print-y, 0), 0);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .18s;
}

.frame-preview[hidden] { display: none; }
.frame-preview img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 7px; }

.region-copy { padding: 24px 28px 28px; }
.region-meta { display: flex; align-items: center; gap: 11px; margin-bottom: 15px; }
.region-status { padding: 6px 10px; border-radius: 999px; background: #eaf0ff; color: #275be8; font-size: 11px; font-weight: 750; }
.region-theme { color: #667085; font-size: 12px; }
.region-copy h3 { margin-bottom: 14px; font-size: 31px; line-height: 1.25; }
.region-copy > p { min-height: 48px; font-size: 14px; }
.region-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 21px; }
.region-tags span { padding: 7px 10px; border-radius: 4px; background: #f2f5fa; color: #586477; font-size: 11px; }

.map-disclaimer { margin-top: 19px; text-align: center; font-size: 12px; }
.map-attribution { margin-top: 8px; color: #7c8799; font-size: 10px; text-align: center; }
.map-attribution a { color: inherit; text-decoration: underline; }

@media (max-width: 1000px) {
  .map-stage { grid-template-columns: 1fr; gap: 22px; }
  .drilldown-panel, .region-card { min-height: 610px; }
  .korea-map { min-height: 544px; }
  .region-copy { padding: 28px; }
  .region-copy h3 { font-size: 28px; }
}

@media (max-width: 760px) {
  .map-heading { margin-bottom: 25px; }
  .map-stage { grid-template-columns: 1fr; gap: 18px; }
  .drilldown-panel, .region-card { min-height: 0; border-radius: 16px; }
  .korea-map { min-height: 560px; }
  .map-toolbar { grid-template-columns: auto minmax(0, 1fr); }
  .map-level { display: none; }
  .map-back { min-width: 78px; }
  .admin-map { inset: 18px; width: calc(100% - 36px); height: calc(100% - 36px); }
  .province-label { font-size: 14px; }
  .municipality-label { font-size: 7px; }
  .region-card { grid-template-rows: clamp(360px, 120vw, 640px) auto; }
  .region-visual { min-height: 0; }
  .frame-preview { top: 10px; right: auto; bottom: 10px; left: 50%; width: 94%; }
  .region-copy { padding: 22px 24px 24px; }
  .region-copy h3 { font-size: 27px; }
}

@media (hover: none) {
  .admin-map, .region-card { transform: none !important; }
  .frame-preview { transform: translateX(-50%) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .admin-map, .region-card, .frame-preview, .admin-area { transition: none !important; }
}

/* Scalable location-preview mode: permanent labels stay off the map so newly
   added regions do not collide. The selected location alone receives a label. */
.drilldown-panel {
  grid-template-columns: minmax(0, 1fr) 205px;
  grid-template-rows: auto 584px;
  align-self: start;
}

.map-toolbar {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 18px;
}

.map-toolbar strong { display: block; color: #17243d; font-size: 13px; }
.map-toolbar p { margin-top: 3px; color: #7c8799; font-size: 11px; }

.map-legend { display: flex; align-items: center; gap: 12px; color: #657086; font-size: 11px; white-space: nowrap; }
.map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.map-legend i { width: 9px; height: 9px; border: 2px solid #275be8; border-radius: 50%; background: #fff; }
.map-legend .actual i { border-color: #0a8b60; background: #0a8b60; box-shadow: 0 0 0 3px #0a8b6020; }

.admin-area,
.admin-area:hover,
.admin-area:focus-visible {
  fill: #e1e7f1;
  stroke: #fff;
  filter: none;
  pointer-events: none;
}

.admin-area:nth-child(3n + 1),
.admin-area:nth-child(3n + 2) { fill: #e1e7f1; }

.location-marker { cursor: pointer; outline: none; }
.marker-leader { stroke: #8291aa; stroke-width: 1; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
.marker-hit { fill: #fff; stroke: #275be8; stroke-width: 2.5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 3px 5px #10295b50); }
.marker-dot { fill: #275be8; pointer-events: none; }
.location-marker.actual .marker-hit { fill: #0a8b60; stroke: #fff; }
.location-marker.actual .marker-dot { fill: #fff; }
.location-marker:hover .marker-hit,
.location-marker:focus-visible .marker-hit,
.location-marker.is-active .marker-hit { stroke: #ffca55; stroke-width: 4; }
.location-marker.is-active .marker-hit { r: 10; }
.marker-name {
  fill: #17243d;
  font: 800 9px/1 Pretendard, -apple-system, sans-serif;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 4px;
  stroke-linejoin: round;
  pointer-events: none;
}

.region-selector {
  grid-column: 2;
  grid-row: 2;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding: 10px;
  border-top: 0;
  border-left: 1px solid #e8ecf3;
  background: #fbfcff;
  scrollbar-width: thin;
}

.korea-map { grid-column: 1; grid-row: 2; }

.province-group { border-bottom: 1px solid #e7ebf2; }
.province-group:last-child { border-bottom: 0; }
.province-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 8px;
  color: #27344c;
  font-size: 12px;
  cursor: pointer;
  list-style: none;
}
.province-group summary::-webkit-details-marker { display: none; }
.province-group summary::after { color: #8792a5; content: '+'; font-size: 16px; line-height: 1; }
.province-group[open] summary::after { content: '−'; }
.province-group summary strong { flex: 1; }
.province-group summary span {
  display: grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  background: #edf2fb;
  color: #60708b;
  font-size: 10px;
}
.province-locations { display: grid; gap: 5px; padding: 0 5px 12px; }

.region-choice {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 7px;
  padding: 9px 11px;
  border: 1px solid #d9e0ec;
  border-radius: 999px;
  background: #fff;
  color: #465269;
  font: 700 11px/1 Pretendard, -apple-system, sans-serif;
  cursor: pointer;
  text-align: left;
}

.region-choice span { width: 7px; height: 7px; border: 2px solid #275be8; border-radius: 50%; background: #fff; }
.region-choice.actual span { border-color: #0a8b60; background: #0a8b60; }
.region-choice:hover,
.region-choice:focus-visible,
.region-choice.is-active { border-color: #275be8; background: #eef3ff; color: #194ac9; outline: none; }
.region-choice.actual.is-active { border-color: #0a8b60; background: #eaf8f2; color: #08734d; }

.region-status.is-live { background: #e5f7ef; color: #08734d; }
@media (max-width: 760px) {
  .drilldown-panel {
    grid-template-columns: 1fr;
    grid-template-rows: auto 210px 520px;
  }
  .map-toolbar { display: flex; padding: 13px 14px; }
  .map-legend { gap: 9px; font-size: 10px; }
  .region-selector {
    grid-column: 1;
    grid-row: 2;
    max-height: 210px;
    border-bottom: 1px solid #e8ecf3;
    border-left: 0;
  }
  .korea-map { grid-column: 1; grid-row: 3; min-height: 520px; }
}

.map-legend .planned i { border-color: #b86b12; background: #fff3df; }
.location-marker.planned .marker-hit { stroke: #b86b12; fill: #fff3df; }
.location-marker.planned .marker-dot { fill: #b86b12; }
.region-choice.planned span { border-color: #b86b12; background: #fff3df; }
.region-choice.planned.is-active { border-color: #b86b12; background: #fff6e9; color: #92520b; }
.region-status.is-planned { background: #fff1d9; color: #92520b; }
@media (max-width: 760px) { .map-toolbar { flex-wrap: wrap; } .map-legend { flex-wrap: wrap; } }