/* ==========================================================================
   v14 — v13 위에 얹는다 (대치에듀_지도_v14.html 에서만 로드)
   1) 캔버스 폭죽 · 2) 별똥별 즉시 낙하(설정값, HTML) · 3) 지도 확대·각도(HTML LP_V12_CONFIG + 여기 위치) · 4) 혜성 꼬리
   ========================================================================== */

/* 우주 배경 — 원본 1920 스틸을 AI 업스케일(4K)한 뒤 v13 과 같은 밝은 블랙으로 맞춘 판 (3840×2160, 0.13MB).
   큰 모니터·고배율 화면에서 블록 노이즈가 줄어든다 */
html[data-map-variant="v14"] body.theme-sian3-lp .s3-hero__nebula {
  background-image: url("../images/hero_nebula_bg_v14.webp");
}

/* 제주도 — PC 에서는 프레임 아래로 나가고, 폰·태블릿에서도 선이 내려가지 않도록 윤곽 자체를 뺀다
   (포인트·연결선은 js/lp-korea-map-v11.js 의 excludeJeju 로 함께 제외) */
html[data-map-variant="v14"] .korea-mosaic-path.is-jeju {
  display: none;
}

/* 이펙트 캔버스 — 히어로 비주얼 전체를 덮는 한 장. 별(z 14)·유성 아래, 지도·하늘 위 */
html[data-map-variant="v14"] .korea-fx-canvas {
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
}

/* 별똥별의 DOM 꼬리·불티는 캔버스 혜성 꼬리로 대체 — 머리(core)와 광구(glow)만 남긴다 */
html[data-map-variant="v14"] #koreaMapMeteor .lp-meteor__trail,
html[data-map-variant="v14"] #koreaMapMeteor .lp-meteor__spark,
html[data-map-variant="v14"] .lp-meteor .lp-meteor__trail,
html[data-map-variant="v14"] .lp-meteor .lp-meteor__spark {
  display: none;
}

/* 3) 지도 확대 — 박스는 이미 화면 높이에 닿아 있으므로 가로 사영(scaleX, HTML 설정)으로 넓히고,
   박스를 화면 중앙 쪽으로 당겨 문구와 지도 사이의 빈 중앙을 채운다 (PC 폭) */
/* 박스를 화면 높이(헤더 제외)보다 크게 잡고 아래로 내려, 본토가 헤더 아래 영역을 꽉 채우고 제주도는 프레임 아래로 나간다 */
@media (min-width: 1181px) and (orientation: landscape) {
  html[data-map-variant="v14"] body.theme-sian3-lp .korea-story-map-wrap {
    width: min(calc(var(--korea-map-size) * var(--korea-map-scale) * 1.36), 124vh);
    height: min(calc(var(--korea-map-size) * var(--korea-map-scale) * 1.36), 124vh);
    top: calc(50% + var(--s3-header-h, 64px) / 2 + 10vh);
    right: 1%;
  }
}
@media (min-width: 1600px) and (orientation: landscape) {
  html[data-map-variant="v14"] body.theme-sian3-lp .korea-story-map-wrap {
    width: min(calc(var(--korea-map-size) * var(--korea-map-scale) * 1.36), 126vh);
    height: min(calc(var(--korea-map-size) * var(--korea-map-scale) * 1.36), 126vh);
    right: 5%;
  }
}
@media (min-width: 2200px) and (orientation: landscape) {
  html[data-map-variant="v14"] body.theme-sian3-lp .korea-story-map-wrap {
    right: 7%;
  }
}
/* 가로 태블릿·낮은 노트북(901~1180 landscape): 같은 원칙, 조금 덜 크게 */
@media (min-width: 901px) and (max-width: 1180px) and (orientation: landscape) {
  html[data-map-variant="v14"] body.theme-sian3-lp .korea-story-map-wrap {
    width: min(calc(var(--korea-map-size) * var(--korea-map-scale) * 1.3), 116vh, 60vw);
    height: min(calc(var(--korea-map-size) * var(--korea-map-scale) * 1.3), 116vh, 60vw);
    top: calc(50% + var(--s3-header-h, 64px) / 2 + 7vh);
    right: 0;
  }
}
/* 폰 세로(≤640): 문구 블록이 상단에 붙지 않도록 아래로 내리고(화면 높이의 약 20%), 글자·버튼을 화면 폭에 맞게 키운다.
   원본 인라인 규칙이 같은 속성을 !important 로 고정하므로 같은 속성만 되받는다 */
@media (max-width: 640px) and (orientation: portrait) {
  html[data-map-variant="v14"] body.theme-sian3-lp.theme-sian3-en .s3-hero__stack,
  html[data-map-variant="v14"] body.theme-sian3-lp .s3-hero__stack {
    margin-top: clamp(88px, 19vh, 200px) !important;
  }
  html[data-map-variant="v14"] body.theme-sian3-lp.theme-sian3-en .s3-hero__micro {
    font-size: clamp(0.56rem, 2.7vw, 0.68rem) !important;
    margin-bottom: 12px !important;
  }
  html[data-map-variant="v14"] body.theme-sian3-lp.theme-sian3-en .s3-flip__item {
    font-size: clamp(2.1rem, min(11vw, 7.4vh), 2.9rem);
  }
  html[data-map-variant="v14"] body.theme-sian3-lp.theme-sian3-en .s3-hero__lead {
    margin-top: 14px !important;
    font-size: clamp(0.84rem, 3.4vw, 0.98rem);
    line-height: 1.55;
  }
  html[data-map-variant="v14"] body.theme-sian3-lp.theme-sian3-en .s3-hero__actions,
  html[data-map-variant="v14"] body.theme-sian3-lp .s3-hero__actions {
    margin-top: 20px !important;
  }
  html[data-map-variant="v14"] body.theme-sian3-lp.theme-sian3-en .s3-hero__actions .s3-btn,
  html[data-map-variant="v14"] body.theme-sian3-lp .s3-hero__actions .s3-btn {
    min-height: 42px !important;
    padding: 10px 26px !important;
    font-size: 13px !important;
  }
}
/* 짧은 폰 세로(높이 700 이하): 지도와 겹치지 않도록 조금만 내린다 */
@media (max-width: 640px) and (orientation: portrait) and (max-height: 700px) {
  html[data-map-variant="v14"] body.theme-sian3-lp.theme-sian3-en .s3-hero__stack,
  html[data-map-variant="v14"] body.theme-sian3-lp .s3-hero__stack {
    margin-top: clamp(36px, 8vh, 72px) !important;
  }
  html[data-map-variant="v14"] body.theme-sian3-lp.theme-sian3-en .s3-flip__item {
    font-size: clamp(1.8rem, min(9.5vw, 6.2vh), 2.4rem);
  }
  html[data-map-variant="v14"] body.theme-sian3-lp.theme-sian3-en .s3-hero__lead {
    margin-top: 10px !important;
  }
  html[data-map-variant="v14"] body.theme-sian3-lp.theme-sian3-en .s3-hero__actions,
  html[data-map-variant="v14"] body.theme-sian3-lp .s3-hero__actions {
    margin-top: 14px !important;
  }
}

/* 폰(≤640): 박스를 화면 폭보다 크게(118vw) 잡고 아래로 내려 본토를 크게, 제주도는 프레임 아래로 */
@media (max-width: 640px) {
  html[data-map-variant="v14"] body.theme-sian3-lp .korea-story-map-wrap {
    width: min(calc(var(--korea-map-size) * var(--korea-map-scale) * 1.3), 58vh, 118vw);
    height: min(calc(var(--korea-map-size) * var(--korea-map-scale) * 1.3), 58vh, 118vw);
    right: -8vw;
    bottom: -9vh;
  }
}
@media (max-width: 640px) and (max-height: 700px) {
  html[data-map-variant="v14"] body.theme-sian3-lp .korea-story-map-wrap {
    width: min(calc(var(--korea-map-size) * var(--korea-map-scale) * 1.3), 54vh, 118vw);
    height: min(calc(var(--korea-map-size) * var(--korea-map-scale) * 1.3), 54vh, 118vw);
    bottom: -8vh;
  }
}
/* 짧은 가로 화면(≤900×≤600, v13 규칙 위): 조금 더 크게 */
@media (max-width: 900px) and (max-height: 600px) {
  html[data-map-variant="v14"] body.theme-sian3-lp .korea-story-map-wrap {
    width: min(74vh, 48vw);
    height: min(74vh, 48vw);
    right: 1%;
  }
  /* 아주 작은 가로 창에서 오누이·달이 너무 작아지지 않도록 v13 값보다 한 단계 크게 */
  html[data-map-variant="v14"] body.theme-sian3-lp {
    --lp-scene-w: clamp(150px, min(46vh, 36vw), 240px);
    --lp-planet-w: min(72vw, 480px);
  }
}
/* 세로 태블릿(641~1180 portrait): 박스를 화면 폭보다 크게, 제주도는 아래로 */
@media (min-width: 641px) and (max-width: 1180px) and (orientation: portrait) {
  html[data-map-variant="v14"] body.theme-sian3-lp .korea-story-map-wrap {
    width: min(calc(var(--korea-map-size) * var(--korea-map-scale) * 1.3), 58vh, 108vw);
    height: min(calc(var(--korea-map-size) * var(--korea-map-scale) * 1.3), 58vh, 108vw);
    right: -5vw;
    bottom: clamp(60px, 10%, 200px);
  }
}