/* ═══════════════════════════════════════════════════════════
   DOTMAP — dotmap.css (점 지도 줌 시퀀스 / 구포국수식 3단)
   지도 = 풀블리드 배경 레이어(줌), 콘텐츠 = 그 위 오버레이(진행도 페이즈별 교체).
   · 줌: .dotmap__zoom 한 요소에 scale 만(transform 중복 없음), origin=경상권(--ox/--oy). JS 가 --s 주입.
   · 콘텐츠: JS 가 .dotmap 에 is-phase1/2/3 토글 → 페이즈 그룹 opacity+translateY 로 cross-fade.
       페이즈1 진입(헤드1 + 좌/우 멘트) · 페이즈2 카드4(헤드2) · 페이즈3 전국 선언.
   · 점은 균일 회색(--gray2). 색은 기존 변수만 — 직접 hex 는 fallback.
═══════════════════════════════════════════════════════════ */

/* ── 섹션: 검정 .signature → 밝은 풀스크린 override ── */
.signature--dotmap {
  padding: 0; /* 전역 section 100px 9% 해제 → sticky 풀높이 확보 */
  background: var(--color-bg-tint, #fff7e0); /* 밝은 cream */
  border-top: 3px solid var(--gold, #f0c000);
  text-align: left;
}

/* ── 스크롤 트랙 — 이 높이만큼 스크롤하는 동안 줌·페이즈 진행(0→1) ── */
.dotmap {
  position: relative;
  height: 360vh; /* [조정가능] 3페이즈 + 깊은 줌 → 넉넉히 */
  /* C — 배경 연속(이음새): 대부분 cream, 트랙 하단(페이즈3 후반)에서 다음 섹션(#problem) 흰색으로 수렴.
     sticky/stage 가 투명 → 핀 고정 화면이 현재 스크롤 위치의 트랙 색을 드러냄 → 끝에서 흰색.
     점 격자(.dotmap__zoom)가 이 색으로 디졸브 → 경계에서 색 튐 없음. 기존 변수만(직접 hex 아님). */
  background: linear-gradient(
    to bottom,
    var(--color-bg-tint, #fff7e0) 0%,
    var(--color-bg-tint, #fff7e0) 80%,
    var(--color-bg, #ffffff) 100%
  );
}

/* ── 화면에 고정(pin)되는 무대 ── */
.dotmap__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden; /* 줌으로 커진 점이 화면 밖으로 클립 */
}
/* 상·하단 가독 스크림(cream → 투명 → cream) — 지도 위, 콘텐츠 아래 */
.dotmap__sticky::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    var(--color-bg-tint, #fff7e0) 0%,
    color-mix(in srgb, var(--color-bg-tint, #fff7e0) 78%, transparent) 14%,
    transparent 34%,
    transparent 66%,
    color-mix(in srgb, var(--color-bg-tint, #fff7e0) 78%, transparent) 86%,
    var(--color-bg-tint, #fff7e0) 100%
  );
}

/* ── 지도 = 풀블리드 배경 레이어 ── */
.dotmap__stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}
/* 줌 컨테이너 — scale 한 개만. JS 가 --s/--ox/--oy 주입.
   will-change 미사용 — 큰 배율(≈12)에서 레이어 캐시 스케일 블러 방지(SVG 벡터 선명 유지). */
.dotmap__zoom {
  transform-origin: var(--ox, 64%) var(--oy, 45%);
  transform: scale(var(--s, 1));
  height: 90vh; /* 전국이 한눈에 들어오도록 화면 높이에 맞춤 */
  display: flex;
}
.dotmap__svg {
  display: block;
  height: 100%;
  width: auto;
}
.dotmap__dot {
  fill: var(--gray2, #aaaaaa); /* 균일 회색 */
}

/* ── 콘텐츠 레이어 ── */
.dotmap__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none; /* 지도 위 텍스트 — 클릭 가로채지 않음 */
}
.dotmap__hl {
  color: var(--gold-dark, #c9a000); /* cream 위 가독성 — 진한 골드 */
}
/* 보라 형광펜 — #price-nego "받는 리베이트" 스타일 재사용(글자 하단 ~38% 덮는 반투명 보라 밴드).
   색은 기존 토큰 --evt-purple(전역 승격) 재사용 — 직접 hex 아님. 굵기는 적용처(strong/제목)가 담당. */
.dotmap__pen {
  background: linear-gradient(
    transparent 62%,
    color-mix(in srgb, var(--evt-purple, #7c3aed) 40%, transparent) 62%
  );
  color: var(--color-text, #1a1a1a);
  padding: 0 2px;
  border-radius: 2px;
}

/* 페이즈 그룹 공통 전환(opacity + translateY 만) */
.dotmap__head,
.dotmap__intro,
.dotmap__cards,
.dotmap__finale {
  opacity: 0;
  transition:
    opacity 0.55s ease,
    transform 0.55s ease;
}

/* ── 가운데 위 헤드(페이즈별 교체) ── */
.dotmap__head {
  position: absolute;
  top: calc(var(--nav-h, 64px) + clamp(20px, 4vh, 56px)); /* 사이트 sticky 헤더 아래로 */
  left: 0;
  right: 0;
  margin: 0;
  padding: 0 7%;
  text-align: center;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  font-weight: 900;
  line-height: 1.32;
  color: var(--color-text, #1a1a1a);
  transform: translateY(-14px);
  text-shadow:
    0 0 16px var(--color-bg-tint, #fff7e0),
    0 0 16px var(--color-bg-tint, #fff7e0); /* cream 헤일로 — 점 위 가독 */
}
.dotmap.is-phase1 .dotmap__head--1,
.dotmap.is-phase2 .dotmap__head--2 {
  opacity: 1;
  transform: none;
}

/* ── 페이즈1 진입: 좌(제목+서브멘트) / 우(지점 멘트) ── */
.dotmap__intro {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 5vw, 72px);
  padding: 0 clamp(28px, 9vw, 120px);
  transform: translateY(22px);
  word-break: keep-all;
}
.dotmap.is-phase1 .dotmap__intro {
  opacity: 1;
  transform: none;
}
.dotmap__intro-left {
  max-width: 440px;
}
.dotmap__intro-title {
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  font-weight: 900;
  line-height: 1.4;
  color: var(--color-text, #1a1a1a);
  margin: 0 0 16px;
  text-shadow:
    0 0 14px var(--color-bg-tint, #fff7e0),
    0 0 14px var(--color-bg-tint, #fff7e0);
}
.dotmap__intro-sub {
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  line-height: 1.7;
  color: var(--color-text-sub, #555);
  margin: 0;
  text-shadow: 0 0 12px var(--color-bg-tint, #fff7e0);
}
.dotmap__intro-right {
  max-width: 300px;
  text-align: right;
}
.dotmap__intro-ment {
  font-size: clamp(1rem, 1.7vw, 1.18rem);
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-text, #1a1a1a);
  margin: 0;
  text-shadow:
    0 0 14px var(--color-bg-tint, #fff7e0),
    0 0 14px var(--color-bg-tint, #fff7e0);
}
/* 70지점 강조 = bold + 보라 형광펜(.dotmap__pen). strong 기본 굵기 유지, 색은 pen(검정)이 담당. */
.dotmap__intro-ment strong {
  font-weight: 800;
}

/* ── 페이즈2 카드 4개 ── */
.dotmap__cards {
  position: absolute;
  /* 헤드2(가운데 위) 아래에서 시작 → 2×2 가 헤드와 겹치지 않게 */
  top: calc(var(--nav-h, 64px) + clamp(132px, 22vh, 212px));
  right: 0;
  bottom: clamp(20px, 6vh, 60px);
  left: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2×2: 위 2 / 아래 2 */
  align-content: center;
  justify-content: center;
  gap: clamp(12px, 1.6vw, 20px);
  max-width: 720px;
  margin: 0 auto;
  padding: 0 clamp(28px, 6vw, 80px);
  transform: translateY(22px);
}
.dotmap.is-phase2 .dotmap__cards {
  opacity: 1;
  transform: none;
}
/* 카드 — promo-card 톤(흰 패널 + 골드 키) 재사용, 단수형 클래스 */
.dotmap__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--color-card, #ffffff);
  border: 1px solid var(--color-line, #ececec);
  border-radius: 18px;
  padding: 30px 18px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
  /* 등장 stagger — 페이즈2 진입 시 카드별 미세 딜레이 */
  transition: inherit;
}
.dotmap.is-phase2 .dotmap__cards .dotmap__card {
  animation: dotmapCardIn 0.5s ease both;
}
.dotmap__cards .dotmap__card:nth-child(1) {
  animation-delay: 0.04s;
}
.dotmap__cards .dotmap__card:nth-child(2) {
  animation-delay: 0.12s;
}
.dotmap__cards .dotmap__card:nth-child(3) {
  animation-delay: 0.2s;
}
.dotmap__cards .dotmap__card:nth-child(4) {
  animation-delay: 0.28s;
}
@keyframes dotmapCardIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.dotmap__card-key {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 900;
  line-height: 1.05;
  color: var(--gold, #f0c000);
  margin: 0 0 10px;
}
.dotmap__card-key--word {
  font-size: clamp(1.3rem, 2.2vw, 1.8rem); /* 글자 키워드 카드는 살짝 작게 */
}
.dotmap__card-unit {
  font-size: 0.42em;
  font-weight: 800;
  margin-left: 2px;
}
.dotmap__card-name {
  font-size: clamp(0.92rem, 1.4vw, 1.05rem);
  font-weight: 700;
  color: var(--color-text, #1a1a1a);
  margin: 0 0 6px;
}
.dotmap__card-note {
  font-size: clamp(0.78rem, 1.1vw, 0.86rem);
  line-height: 1.55;
  color: var(--color-text-sub, #555);
  margin: 0;
  word-break: keep-all;
}

/* ── 페이즈3 전국/확장 선언 ── */
.dotmap__finale {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 0 7%;
  transform: translateY(22px);
}
.dotmap.is-phase3 .dotmap__finale {
  opacity: 1;
  transform: none;
}
/* 블록 — 고배율 점(진한 회색) 위 가독: 중앙 cream 비네트(블록이 커서 넉넉히) */
.dotmap__finale::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    60% 55% at 50% 50%,
    var(--color-bg-tint, #fff7e0) 0%,
    color-mix(in srgb, var(--color-bg-tint, #fff7e0) 84%, transparent) 52%,
    transparent 82%
  );
}
/* #why 마무리 블록 이식: 헤드 + 부제 + CTA 2버튼 */
.dotmap__finale-inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
  word-break: keep-all;
}
.dotmap__finale-title {
  font-size: clamp(1.6rem, 4vw, 2.8rem);
  font-weight: 900;
  line-height: 1.32;
  color: var(--color-text, #1a1a1a);
  margin: 0 0 18px;
}
.dotmap__finale-sub {
  font-size: clamp(0.96rem, 1.6vw, 1.14rem);
  line-height: 1.85;
  color: var(--color-text-sub, #555);
  margin: 0 0 28px;
}
.dotmap__finale-btns {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}
/* CTA 는 페이즈3 활성 시에만 클릭 가능(다른 페이즈에서 opacity:0 으로 겹쳐도 클릭 가로채지 않게) */
.dotmap.is-phase3 .dotmap__finale-btns a {
  pointer-events: auto;
}

/* ── 모션 줄이기 — 줌/고정/전환 비활성, 콘텐츠 정적 순서 표시 + 일반 스크롤 ── */
@media (prefers-reduced-motion: reduce) {
  .dotmap {
    height: auto;
  }
  .dotmap__sticky {
    position: static;
    height: auto;
    overflow: visible;
    display: block;
    padding: clamp(56px, 9vw, 100px) 9%;
  }
  .dotmap__sticky::before {
    display: none;
  }
  .dotmap__stage {
    position: relative;
    height: auto;
    margin: 28px 0;
  }
  .dotmap__zoom {
    transform: none !important;
    height: auto;
    justify-content: center;
  }
  .dotmap__svg {
    height: auto;
    width: 100%;
    max-width: 520px;
  }
  .dotmap__content {
    position: static;
    pointer-events: auto;
  }
  /* 모든 페이즈 그룹: 정적 흐름 + 항상 표시 */
  .dotmap__head,
  .dotmap__intro,
  .dotmap__cards,
  .dotmap__finale {
    position: static;
    inset: auto;
    opacity: 1 !important;
    transform: none !important;
    transition: none;
    text-shadow: none;
    padding-left: 0;
    padding-right: 0;
  }
  .dotmap__head--2 {
    display: none; /* 헤드1과 중복 → 정적 표시 시 하나만 */
  }
  .dotmap__head {
    text-align: left;
    margin-bottom: 24px;
  }
  .dotmap__intro {
    display: block;
    margin-bottom: 24px;
  }
  .dotmap__intro-right {
    text-align: left;
    margin-top: 16px;
  }
  .dotmap__cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 24px;
  }
  .dotmap__card {
    animation: none !important;
  }
  .dotmap__finale {
    display: block;
  }
  .dotmap__finale::before {
    display: none;
  }
}

/* ══ 반응형 — 모바일 ══ */
@media (max-width: 760px) {
  .dotmap {
    height: 320vh;
  }
  .dotmap__head {
    top: calc(var(--nav-h, 64px) + clamp(8px, 2vh, 24px));
    font-size: clamp(1.3rem, 6vw, 1.8rem);
  }
  /* 페이즈1: 좌/우 → 세로 스택(중앙 정렬) */
  .dotmap__intro {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 0 8%;
    text-align: center;
  }
  .dotmap__intro-left,
  .dotmap__intro-right {
    max-width: 460px;
    text-align: center;
  }
  /* 카드 4개 → 2×2 */
  .dotmap__cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0 8%;
    max-width: 460px;
    margin: 0 auto;
  }
  .dotmap__card {
    padding: 22px 12px;
  }
  .dotmap__finale-title {
    font-size: clamp(1.5rem, 7vw, 2.2rem);
  }
  .dotmap__finale-btns {
    flex-direction: column;
    align-items: stretch;
  }
  .dotmap__finale-btns a {
    text-align: center;
  }
}