/* ==========================================================================
   v11 — 지도 지점 명칭 제거 + 전국 분포 포인트
   대치에듀_지도_v11.html 에서만 로드된다. 공용 CSS/JS 는 건드리지 않는다.
   ========================================================================== */

/* 지점 명칭(캡션) 제거 — 별 노드 자체는 그대로 (v12·v13 은 v11 위에 얹는 버전이라 함께 적용) */
html[data-map-variant="v11"] .star-caption-wrap,
html[data-map-variant="v12"] .star-caption-wrap,
html[data-map-variant="v13"] .star-caption-wrap,
html[data-map-variant="v14"] .star-caption-wrap {
  display: none;
}

/* 전국 분포 포인트 — 지점 별보다 작고 조용한 흰 점 (js/lp-korea-map-v11.js 가 생성) */
.korea-ambient-point {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.9s ease, transform 0.9s ease;
  pointer-events: none;
}

.korea-ambient-point__halo {
  position: absolute;
  inset: -40%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.34) 0%,
    rgba(210, 230, 255, 0.1) 40%,
    transparent 70%
  );
}

.korea-ambient-point__core {
  position: relative;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.85);
}

.korea-ambient-point.is-lg { width: 18px; height: 18px; margin: -9px 0 0 -9px; }
.korea-ambient-point.is-lg .korea-ambient-point__core { width: 2.6px; height: 2.6px; }
.korea-ambient-point.is-sm .korea-ambient-point__core { width: 1.5px; height: 1.5px; box-shadow: 0 0 2px 1px rgba(255, 255, 255, 0.7); }

/* 포인트로 뻗는 연결선 — 기존 별자리 선보다 가늘고 조용하게, 필터 없음 (js 가 SVG line 으로 생성) */
.const-ambient-line {
  stroke: rgba(236, 242, 250, 0.62);
  stroke-width: 0.9; /* viewBox 단위 — non-scaling-stroke 는 변환 아래에서 매 repaint 마다 재계산되어 뺐다 */
  stroke-linecap: round;
  fill: none;
  opacity: 0;
  /* stroke-dasharray/offset 은 인라인(길이). is-drawn 이 붙으면 offset 0 으로 그려진다 */
  transition: stroke-dashoffset 0.6s ease-out, opacity 0.35s ease;
}
.const-ambient-line.is-drawn {
  opacity: 0.55;
}
.const-ambient-line.is-secondary { stroke-width: 0.65; }
.const-ambient-line.is-secondary.is-drawn { opacity: 0.38; }

/* 기존 별자리 선과 같은 타이밍: 지도가 소멸할 때 함께 빠진다 */
.korea-story-map-wrap.is-map-dissolving .const-ambient-line,
.korea-story-map-wrap.is-map-gone .const-ambient-line {
  opacity: 0;
  transition-delay: 0s;
}

/* 점등 — JS 가 거리순으로 is-lit 을 붙인다 (transition-delay 는 인라인) */
.korea-ambient-point.is-lit {
  opacity: var(--amb-o, 0.85);
  transform: scale(1);
}

/* 점등 후 숨 쉬는 반짝임 — 큰 점(is-lg)만. 34개 전부 상시 애니메이션이면 컴포지터 레이어가 그만큼 늘어 프레임을 깎는다 */
.korea-ambient-point.is-lg.is-lit .korea-ambient-point__halo {
  animation: koreaAmbientBreathe var(--amb-tw, 4.6s) ease-in-out infinite alternate;
  animation-delay: var(--amb-td, 0s);
}

@keyframes koreaAmbientBreathe {
  0%   { opacity: 0.55; transform: scale(0.9); }
  100% { opacity: 1;    transform: scale(1.12); }
}

/* 지도 소멸 시 함께 빠진다 (수렴 중에는 지도의 일부로 남는다) */
.korea-story-map-wrap.is-map-dissolving .korea-ambient-point,
.korea-story-map-wrap.is-map-gone .korea-ambient-point {
  opacity: 0;
  transform: scale(0.7);
  transition-delay: 0s;
}

/* 수렴·소멸 장면은 필터 없이 다시 그려야 하므로 반짝임 애니메이션을 멈춘다 */
.korea-story-map-wrap.is-scene-05 .korea-ambient-point__halo,
.korea-story-map-wrap.is-scene-06 .korea-ambient-point__halo,
.korea-story-map-wrap.is-map-dissolving .korea-ambient-point__halo {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .korea-ambient-point { transition: none; }
  .korea-ambient-point.is-lit .korea-ambient-point__halo { animation: none; }
}

/* ==========================================================================
   v11 반응형 보정 — 환경별 지도 크기·위치, 배경 성운 프레이밍
   (공용 CSS 의 값 위에 v11 에서만 덮어쓴다. 지도 박스 안에서 육지는 x 28~72%, y 8.5~89% 를 차지한다)
   ========================================================================== */

/* 가로 태블릿·낮은 노트북 (901~1439 × 높이 820 이하)
   - 지도 박스를 '헤더 아래 남는 높이' 와 64vw 로 캡 → 강원도 윗부분이 헤더 뒤로 들어가지 않고, 왼쪽 문구와도 겹치지 않는다
   - 세로 중심을 헤더 높이의 절반만큼 내려 남는 영역의 한가운데에 둔다 */
@media (min-width: 901px) and (max-width: 1439px) and (max-height: 820px) and (orientation: landscape) {
  body.theme-sian3-lp .korea-story-map-wrap {
    width: min(calc(var(--korea-map-size) * var(--korea-map-scale)), calc(100vh - var(--s3-header-h, 64px) - 12px), 64vw);
    height: min(calc(var(--korea-map-size) * var(--korea-map-scale)), calc(100vh - var(--s3-header-h, 64px) - 12px), 64vw);
    top: calc(50% + var(--s3-header-h, 64px) / 2);
    right: 1.5%;
  }
}

/* 1024×768 급 가로 태블릿: 공용 규칙이 1023 까지만 잡아 주던 문구 폭을 1024~1180 까지 이어준다 */
@media (min-width: 1024px) and (max-width: 1180px) and (max-height: 820px) and (orientation: landscape) {
  body.theme-sian3-lp.theme-sian3-en .s3-hero__stack {
    max-width: min(420px, 38%);
  }
}

/* 세로 태블릿 (768~1180 세로): 지도를 문구 오른쪽 아래에 두되 육지 서쪽 끝이 문구 폭을 넘지 않도록 폭을 캡 */
@media (min-width: 641px) and (max-width: 1180px) and (orientation: portrait) {
  body.theme-sian3-lp .korea-story-map-wrap {
    width: min(calc(var(--korea-map-size) * var(--korea-map-scale)), 48vh, 78vw);
    height: min(calc(var(--korea-map-size) * var(--korea-map-scale)), 48vh, 78vw);
    right: 2%;
    bottom: clamp(160px, 26%, 360px);
  }
}

/* 폰 (640 이하): 문구 블록(상단 약 45vh) 아래에 지도를 통째로 내려 놓는다
   - 박스 = min(92vw, 44vh) → 육지 윗변이 문구 아래 여백에서 시작하고, 아래쪽 8vh 는 화면 끝 여유 */
@media (max-width: 640px) {
  body.theme-sian3-lp .korea-story-map-wrap {
    width: min(calc(var(--korea-map-size) * var(--korea-map-scale)), 44vh, 92vw);
    height: min(calc(var(--korea-map-size) * var(--korea-map-scale)), 44vh, 92vw);
    right: 4vw;
    bottom: clamp(40px, 8vh, 96px);
  }
}

/* 아주 짧은 폰 (높이 700 이하): 문구가 상대적으로 더 내려오므로 지도를 조금 더 작게 */
@media (max-width: 640px) and (max-height: 700px) {
  body.theme-sian3-lp .korea-story-map-wrap {
    width: min(calc(var(--korea-map-size) * var(--korea-map-scale)), 40vh, 88vw);
    height: min(calc(var(--korea-map-size) * var(--korea-map-scale)), 40vh, 88vw);
    bottom: clamp(28px, 5vh, 60px);
  }
}

/* 배경 성운(16:9 스틸) 프레이밍 — cover 로 잘릴 때 붉은 성운(우상단)이 남도록 초점을 옮긴다. 비율 왜곡은 없다 */
@media (orientation: portrait) {
  body.theme-sian3-lp .s3-hero__nebula {
    background-position: 74% 38%;
  }
}
@media (max-width: 640px) {
  body.theme-sian3-lp .s3-hero__nebula {
    background-position: 78% 30%;
  }
}

/* 4K 급 초광폭: 1920 스틸이 크게 확대되므로 살짝 어둡게 눌러 픽셀 부풀림이 덜 보이게 */
@media (min-width: 2560px) {
  body.theme-sian3-lp .s3-hero__nebula {
    opacity: 0.82;
  }
}

/* 폰·태블릿에서는 전국 포인트를 지도 축소 비율에 맞춰 조금 작게 */
@media (max-width: 1024px) {
  .korea-ambient-point { width: 12px; height: 12px; margin: -6px 0 0 -6px; }
  .korea-ambient-point.is-lg { width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; }
  .korea-ambient-point__core { width: 1.7px; height: 1.7px; }
}
@media (max-width: 640px) {
  .korea-ambient-point { width: 10px; height: 10px; margin: -5px 0 0 -5px; }
  .korea-ambient-point.is-lg { width: 12px; height: 12px; margin: -6px 0 0 -6px; }
  .korea-ambient-point__core { width: 1.4px; height: 1.4px; box-shadow: 0 0 2px 1px rgba(255, 255, 255, 0.8); }
  .const-ambient-line { stroke-width: 0.6; }
  .const-ambient-line.is-secondary { stroke-width: 0.45; }
}