/**
 * story-map.css — Section 2: 스크롤 페이즈 맵 (Figma 653:*)
 * map-0-1 베이스 · 1-1~1-3 · 2-1~2-3 오버레이 · 인트로 / 하단 캡션 타자기
 */

.story-map-section {
  position: relative;
  background: var(--color-accent-lime, #ffee00);
  /* 지도 위 인트로·캡션 공통 크기 — 데스크톱 */
  --story-map-text-size: clamp(18px, 1.45vw + 0.7rem, 32px);
  --story-map-intro-text-size: var(--impact-section-title-size);
}

/* 데스크 가로(768+) · 세로 767px 이하 — 캡션만 소폭 축소(인트로 타이틀은 유지) */
@media (min-width: 768px) and (max-height: 767px) {
  .story-map-section {
    --story-map-text-size: clamp(16px, 1.2vw + 0.55rem, 26px);
  }
}

@media (max-width: 767px) {
  .story-map-section {
    /* 동일 패밀리, 모바일 뷰포트 비율 — 하단 캡션은 소폭 축소 */
    --story-map-text-size: clamp(14px, 3.6vw + 0.55rem, 19px);
    --story-map-intro-text-size: var(--impact-section-title-size);
  }
}

.story-map-pin-wrapper {
  position: relative;
  /* 18페이즈 × 모바일(stack 156×18)과 동일 총 스크롤량 — 데스크 과다 스크롤 방지 */
  height: 2808vh;
}

.story-map-pin {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--color-accent-lime, #ffee00);
}

/* 인트로: 줄 단위 줄바꿈을 유지하면서 텍스트가 핀 영역에서 잘리지 않도록 */
.story-map-section[data-intro-on="true"] .story-map-pin {
  overflow: visible;
}

.story-map-camera {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
  /* 전체 페이즈 공통 하단 여백 */
  padding-bottom: clamp(36px, 5.5vh, 84px);
}

/* 확대(페이즈 2~): 정렬은 항상 중앙 — 여백만 JS 변수(--story-map-safe-*)로 조절 */
.story-map-section[data-map-zoomed="true"] .story-map-camera {
  align-items: center;
  justify-content: center;
  padding-bottom: var(--story-map-safe-bottom, clamp(88px, 14vh, 200px));
}

.story-map-section[data-map-zoomed="true"][data-caption-edge="top"] .story-map-camera {
  padding-top: var(--story-map-safe-top, clamp(80px, 12vh, 160px));
}

@media (max-width: 767px) {
  .story-map-section {
    /* 모바일 지도 PNG 앵커 — 카메라 보정과 함께 전 장면에서 약간 아래 */
    --story-map-mobile-map-shift-y: clamp(0.5rem, 1.75vh, 1.25rem);
  }

  /* 지도 하단 라임·캡션 사이 호흡 — 카메라 박스로 여백 확보 */
  .story-map-camera {
    padding-bottom: clamp(56px, 14vw, 112px);
  }

  /* 줌 구간도 데스크와 같이 중앙 정렬 — flex-end 시 핀 직후 지도가 위로 튐 */
  .story-map-section[data-map-zoomed="true"] .story-map-camera {
    align-items: center;
    padding-bottom: var(--story-map-safe-bottom, clamp(88px, 22vw, 168px));
  }

  .story-map-section[data-map-zoomed="true"][data-caption-edge="top"] .story-map-camera {
    align-items: center;
    padding-top: var(--story-map-safe-top, clamp(80px, 18vw, 140px));
    padding-bottom: var(--story-map-safe-bottom, clamp(48px, 12vw, 96px));
  }
}

.story-map-world {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: none;
}

/* 데스크 / 모바일 이미지 스택 교체 — 같은 카메라 transform 공유 */
.story-map-stack {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.story-map-stack--mobile {
  display: none;
}

@media (max-width: 767px) {
  .story-map-stack--desktop {
    display: none;
  }

  .story-map-stack--mobile {
    display: block;
  }

  /**
   * 모바일 목업(~375×658 등 세로 PNG) 또는 레거시 가로판 — 실제 픽셀 비율 유지하면서 크게 채움.
   * (고정 4000×3364 박스는 세로판에서 지도가 과하게 작아짐.)
   */
  .story-map-stack--mobile .story-map-img,
  .story-map-stack--mobile .story-map-layer {
    width: auto;
    height: auto;
    /* 가로 크게 — 세로는 dvh 기준 하단(캡션·패딩) 제외 높이까지 사용 */
    max-width: min(228vw, 985px);
    max-height: min(calc(100vh - clamp(88px, 24vw, 182px)), 1380px);
    max-height: min(calc(100dvh - clamp(88px, 24vw, 182px)), 1380px);
    left: 50%;
    top: 50%;
    margin-left: 0;
    margin-top: 0;
    transform: translate(-50%, calc(-50% + var(--story-map-mobile-map-shift-y, 0px)));
    transform-origin: center center;
  }

  /* 하단 캡션(B~E): 노치 위로 — 측면 캡션 페이즈는 제외 */
  .story-map-section:not([data-caption-edge="side"]) .story-map-caption:not(.story-map-caption--upper) {
    bottom: calc(clamp(48px, 5.8vmin + 22px, 88px) + env(safe-area-inset-bottom, 0px));
    padding-bottom: clamp(14px, 3.5vmin, 26px);
  }

  /* 시퀀스 3 상단 캡션(F/G): 상단 안전영역 외 추가 여백 */
  .story-map-caption--upper.story-map-caption {
    top: calc(clamp(4.5rem, 10.5vmin, 8.5rem) + env(safe-area-inset-top, 0px));
    padding-top: clamp(1rem, 4.2vmin, 1.85rem);
    padding-bottom: clamp(0.65rem, 2.8vmin, 1.35rem);
  }

  /* 상단 캡션(3-1~3-3): 인셋 + 텍스트 위 32px — 페이즈 전환 시 위치 통일 */
  .story-map-section[data-caption-edge="top"] .story-map-caption--upper.story-map-caption--visible {
    top: calc(var(--story-map-caption-inset, 0.65rem) + env(safe-area-inset-top, 0px));
    padding-top: calc(clamp(0.5rem, 2vmin, 1.25rem) + 32px);
  }

  /* 하단 캡션: 뷰포트 최하단 고정 — 겹침은 카메라 safe 영역·지도 리프트로 처리 */
  /* 하단 캡션만 최하단 고정 — 측면(D/E/H/I)은 top 기준 유지 */
  .story-map-section[data-caption-edge="bottom"] .story-map-caption:not(.story-map-caption--upper).story-map-caption--visible {
    bottom: calc(var(--story-map-caption-inset, 0.65rem) + env(safe-area-inset-bottom, 0px));
    padding-bottom: 0;
  }

  /* 인트로 라임 카피(상단부): 블록 위·아래 패딩 */
  .story-map-intro--mobile {
    padding-left: clamp(0.65rem, 3vw, 1.1rem);
    padding-right: clamp(0.65rem, 3vw, 1.1rem);
    padding-top: clamp(1.1rem, 4.5vmin, 2.35rem);
    padding-bottom: clamp(1.1rem, 4.5vmin, 2.35rem);
  }

  /* 짧은 화면: 캡션 페이즈 — 통일 max-height 우선(상·하단 이중 차감으로 축소되던 것 방지) */
  @media (max-height: 920px) {
    .story-map-section[data-map-zoomed="true"] .story-map-stack--mobile .story-map-img,
    .story-map-section[data-map-zoomed="true"] .story-map-stack--mobile .story-map-layer {
      max-height: min(var(--story-map-mobile-map-max-h, 1180px), 1180px);
    }

    .story-map-section[data-caption-edge="bottom"]:not([data-map-zoomed="true"])
      .story-map-stack--mobile
      .story-map-img,
    .story-map-section[data-caption-edge="bottom"]:not([data-map-zoomed="true"])
      .story-map-stack--mobile
      .story-map-layer {
      max-height: min(
        calc(100dvh - var(--story-map-safe-bottom, clamp(168px, 44vw, 300px)) - 0.5rem),
        1180px
      );
      transform: translate(
        -50%,
        calc(-50% + var(--story-map-mobile-map-shift-y, 0px) - clamp(0.75rem, 3.5vh, 2.75rem))
      );
    }

    .story-map-section[data-caption-edge="top"]:not([data-map-zoomed="true"])
      .story-map-stack--mobile
      .story-map-img,
    .story-map-section[data-caption-edge="top"]:not([data-map-zoomed="true"])
      .story-map-stack--mobile
      .story-map-layer {
      max-height: min(
        calc(100dvh - var(--story-map-safe-top, clamp(120px, 28vw, 220px)) - var(--story-map-safe-bottom, 3rem)),
        1180px
      );
    }
  }
}

/* 베이스·오버레이 동일 앵커 (권장 4000×3364 — 모바일 시트가 다르면 아래 모바일 블록에서 조정) */
.story-map-img,
.story-map-layer {
  position: absolute;
  width: 4000px;
  height: 3364px;
  max-width: none;
  left: 50%;
  top: 50%;
  margin-left: -2000px;
  margin-top: -1682px;
  transform-origin: center center;
  pointer-events: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.story-map-img--base {
  z-index: 1;
}

.story-map-layer {
  z-index: 2;
  opacity: 0;
  /* JS가 매 프레임 opacity를 갱신 — transition 시 스크롤 중 깜빡임 */
  transition: none;
}

.story-map-layer--2 {
  z-index: 3;
}

.story-map-layer--3 {
  z-index: 4;
}

.story-map-layer--4 {
  z-index: 5;
}

.story-map-layer--5 {
  z-index: 6;
}

.story-map-layer--6 {
  z-index: 7;
}

.story-map-layer--7 {
  z-index: 8;
}

.story-map-layer--8 {
  z-index: 9;
}

.story-map-layer--9 {
  z-index: 10;
}

.story-map-layer--10 {
  z-index: 11;
}

.story-map-layer--11 {
  z-index: 12;
}

.story-map-layer--12 {
  z-index: 13;
}

.story-map-layer--13 {
  z-index: 14;
}

.story-map-layer--14 {
  z-index: 15;
}

/* 페이즈 16 종료 후: 모든 오버레이 제거 상태 고정(CSS로 잔류 투명도·transition 이슈 차단) */
.story-map-section[data-map-base-lock='true'] .story-map-stack .story-map-layer {
  opacity: 0 !important;
  transition: none;
}

.story-map-content {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  overflow: visible;
}

/* ----- 중앙 인트로 (라임 텍스트, 운동장 위 중앙) ----- */
.story-map-copy-stack {
  position: absolute;
  inset: 0;
  overflow: visible;
}

.story-map-intro {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0 clamp(0.5rem, 2vw, 1rem);
  box-sizing: border-box;
  max-width: min(98vw, 58rem);
  width: max-content;
  text-align: center;
  word-break: keep-all;
  color: var(--color-accent-lime, #ffee00);
  overflow: visible;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.45s var(--ease-smooth-in-out, ease-in-out),
    visibility 0.45s;
}

.story-map-intro__line {
  display: block;
  white-space: nowrap;
  overflow: visible;
  opacity: 0;
  transform: translateY(14px);
  will-change: opacity, transform;
}

.story-map-intro__tw {
  white-space: nowrap;
}

.story-map-section[data-intro-on="true"] .story-map-intro.story-map-intro--desktop,
.story-map-section[data-intro-on="true"] .story-map-intro.story-map-intro--mobile {
  opacity: var(--phase0-intro-visible, 1);
  visibility: visible;
}

.story-map-intro--desktop {
  display: none;
  font-size: var(--story-map-intro-text-size);
  letter-spacing: -0.02em;
}

.story-map-intro--mobile {
  display: none;
  font-size: var(--story-map-intro-text-size);
  letter-spacing: -0.02em;
  max-width: min(96vw, 24rem);
  width: max-content;
}

@media (min-width: 768px) {
  .story-map-intro--desktop {
    display: block;
  }
  .story-map-intro--mobile {
    display: none !important;
  }

  /* 0-1 인트로: 라임 타이틀을 화면 중앙보다 약간 아래 */
  .story-map-section[data-map-phase="0"][data-intro-on="true"] .story-map-intro.story-map-intro--desktop {
    top: 45%;
  }
}

@media (max-width: 767px) {
  .story-map-intro--desktop {
    display: none !important;
  }
  .story-map-intro--mobile {
    display: block;
  }

  /* 0-1 인트로: 라임 카피를 상단부에 고정 — 지도 홈플레이트 노란 선과 겹침 방지 */
  /* 인트로 지도 shift: story-map-section.js syncMobileMapShiftY (0→1 서서히 해제) */
  .story-map-section[data-map-phase="0"][data-intro-on="true"] .story-map-intro.story-map-intro--mobile {
    /* 헤더 표시 여부와 무관하게 고정 — 지도와 겹침 방지 오프셋만 사용 */
    top: clamp(
      calc(env(safe-area-inset-top, 0px) + 4.15rem),
      calc(var(--app-vh, 1vh) * 38),
      13rem
    );
    transform: translate(-50%, 0);
  }
}

/* ----- 하단 캡션 (Brand teal · Medium) — 항상 뷰포트 하단 근처, 여백만 소폭 ----- */
.story-map-caption {
  position: absolute;
  left: 50%;
  /* 짧은 변(vmin)으로 화면 비율별 하단 간격 균등 + 노치 홈 영역 */
  bottom: calc(clamp(12px, 1.6vmin + 10px, 30px) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: max-content;
  max-width: min(96vw, 44rem);
  margin: 0;
  padding: 0 clamp(0.75rem, 2vw, 1rem);
  box-sizing: border-box;
  text-align: center;
  overflow: visible;
  font-family: "Paperlogy Octin", var(--font-sans);
  font-weight: 500;
  font-size: var(--story-map-text-size);
  line-height: 1.42;
  color: var(--color-brand-teal, #007058);
}

.story-map-caption__line {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: visible;
  text-align: center;
  opacity: 0;
  transform: translateY(14px);
  will-change: opacity, transform;
}

/* 시퀀스 3 (Figma 581:742*, 653:770*): 화면 중앙 상단 · 브랜드 틸 · Medium */
/* 시퀀스 4 (Figma 581:771*, 653:771*): 좌측 하단 · 좌 정렬 */
.story-map-caption--lower-left.story-map-caption {
  left: max(env(safe-area-inset-left, 0px), clamp(14px, 4.2vw, 36px));
  right: auto;
  bottom: calc(clamp(40px, 5.5vmin + 18px, 88px) + env(safe-area-inset-bottom, 0px));
  top: auto;
  transform: none;
  text-align: left;
  max-width: min(92vw, 28rem);
  width: max-content;
  padding: 0;
}

.story-map-caption--lower-left .story-map-caption__line {
  text-align: left;
}

.story-map-caption--upper.story-map-caption {
  bottom: auto;
  top: calc(clamp(3.25rem, 8.5vmin, 6.5rem) + env(safe-area-inset-top, 0px));
  transform: translateX(-50%);
  font-weight: 500;
  line-height: 1.5;
  /* font-size: base .story-map-caption 과 동일(통일) */
  color: var(--color-brand-teal, #007058);
  max-width: min(92vw, 44rem);
  padding-top: 40px !important;
  padding-bottom: clamp(0.5rem, 2vmin, 1.25rem);
}

/* B·C 페이즈: 뷰포트 기준 가운데(줄별 페이드인 중에도 중앙 유지) */
.story-map-caption--b.story-map-caption,
.story-map-caption--c.story-map-caption,
.story-map-caption--j.story-map-caption {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: min(96vw, 44rem);
  max-width: min(96vw, 44rem);
}

.story-map-caption--b .story-map-caption__line,
.story-map-caption--c .story-map-caption__line,
.story-map-caption--j .story-map-caption__line {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-align: center;
}

.story-map-caption--b .story-map-caption__tw,
.story-map-caption--c .story-map-caption__tw,
.story-map-caption--j .story-map-caption__tw {
  display: inline-block;
  text-align: center;
}

/* 하단 캡션: 화면 최하단 — 지도와의 간격은 --story-map-safe-bottom(카메라) */
.story-map-section[data-caption-edge="bottom"] .story-map-caption:not(.story-map-caption--upper):not(.story-map-caption--lower-left).story-map-caption--visible {
  bottom: calc(var(--story-map-caption-inset, 12px) + env(safe-area-inset-bottom, 0px));
  padding-bottom: 40px;
}

/* 상단 캡션: 상단 안전 영역 안에 고정 */
.story-map-section[data-caption-edge="top"] .story-map-caption--upper.story-map-caption--visible {
  top: calc(var(--story-map-caption-inset, 12px) + env(safe-area-inset-top, 0px));
  padding-top: clamp(0.35rem, 1.5vmin, 0.85rem);
  padding-bottom: clamp(0.35rem, 1.5vmin, 0.85rem);
}

/* 2-2·2-3(페이즈 6·7) · 4-2·4-3(페이즈 12·13): 좌/우 캡션 — 100vh 세로 중앙 */
.story-map-section[data-map-phase="6"] .story-map-caption--d.story-map-caption--visible,
.story-map-section[data-map-phase="7"] .story-map-caption--d.story-map-caption--visible,
.story-map-section[data-map-phase="7"] .story-map-caption--e.story-map-caption--visible,
.story-map-section[data-map-phase="12"] .story-map-caption--h.story-map-caption--visible,
.story-map-section[data-map-phase="13"] .story-map-caption--h.story-map-caption--visible,
.story-map-section[data-map-phase="13"] .story-map-caption--i.story-map-caption--visible,
.story-map-section[data-map-phase="14"] .story-map-caption--i.story-map-caption--visible {
  top: 60%;
  bottom: auto;
  width: max-content;
  max-width: min(88vw, 28rem);
  padding-top: 0;
  padding-bottom: 0;
}

@media (max-height: 920px) {
  .story-map-section[data-caption-edge="side"] .story-map-caption--d.story-map-caption--visible,
  .story-map-section[data-caption-edge="side"] .story-map-caption--e.story-map-caption--visible,
  .story-map-section[data-caption-edge="side"] .story-map-caption--h.story-map-caption--visible,
  .story-map-section[data-caption-edge="side"] .story-map-caption--i.story-map-caption--visible {
    top: 52%;
  }
}

/* 2-2·2-3: 우측 정렬 */
.story-map-section[data-map-phase="6"] .story-map-caption--d.story-map-caption--visible,
.story-map-section[data-map-phase="7"] .story-map-caption--d.story-map-caption--visible,
.story-map-section[data-map-phase="7"] .story-map-caption--e.story-map-caption--visible {
  left: auto;
  right: max(env(safe-area-inset-right, 0px), clamp(28px, 5vw, 64px));
  transform: translateY(-50%);
  text-align: right;
  padding-left: clamp(0.5rem, 1.5vw, 1rem);
  padding-right: 0;
}

/* 4-2·4-3: 좌측 정렬 */
.story-map-section[data-map-phase="12"] .story-map-caption--h.story-map-caption--visible,
.story-map-section[data-map-phase="13"] .story-map-caption--h.story-map-caption--visible,
.story-map-section[data-map-phase="13"] .story-map-caption--i.story-map-caption--visible,
.story-map-section[data-map-phase="14"] .story-map-caption--i.story-map-caption--visible {
  left: max(env(safe-area-inset-left, 0px), clamp(28px, 5vw, 64px));
  right: auto;
  transform: translateY(-50%);
  text-align: left;
  padding-left: 0;
  padding-right: clamp(0.5rem, 1.5vw, 1rem);
}

.story-map-section[data-map-phase="6"] .story-map-caption--d.story-map-caption--visible .story-map-caption__line,
.story-map-section[data-map-phase="7"] .story-map-caption--d.story-map-caption--visible .story-map-caption__line,
.story-map-section[data-map-phase="7"] .story-map-caption--e.story-map-caption--visible .story-map-caption__line {
  text-align: right;
}

.story-map-section[data-map-phase="12"] .story-map-caption--h.story-map-caption--visible .story-map-caption__line,
.story-map-section[data-map-phase="13"] .story-map-caption--h.story-map-caption--visible .story-map-caption__line,
.story-map-section[data-map-phase="13"] .story-map-caption--i.story-map-caption--visible .story-map-caption__line,
.story-map-section[data-map-phase="14"] .story-map-caption--i.story-map-caption--visible .story-map-caption__line {
  text-align: left;
}

.story-map-caption__tw {
  white-space: nowrap;
  display: inline;
  vertical-align: baseline;
}

/* 블록 전체 페이드(B↔전환·D 페이드아웃) */
.story-map-caption--b,
.story-map-caption--d,
.story-map-caption--f,
.story-map-caption--h {
  transition: opacity 0.42s var(--ease-smooth-in-out, ease-in-out);
}

.story-map-caption--c,
.story-map-caption--e,
.story-map-caption--j {
  opacity: 1;
}

.story-map-caption--b,
.story-map-caption--c,
.story-map-caption--d,
.story-map-caption--e,
.story-map-caption--f,
.story-map-caption--g,
.story-map-caption--h,
.story-map-caption--i,
.story-map-caption--j {
  visibility: hidden;
}

.story-map-caption--visible {
  visibility: visible;
}

/* ----- 예약된 프로그램 스텝 블록 ----- */
.story-map-steps--reserved {
  display: none;
}

/* Figma 653:8151 desktop-map-end · 653:8155 mobile-map-end */
.story-map-outro {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  padding-top: max(env(safe-area-inset-top, 0px), clamp(1.25rem, 4vmin, 2.5rem));
  padding-bottom: max(env(safe-area-inset-bottom, 0px), clamp(1.25rem, 4vmin, 2.5rem));
  padding-left: max(env(safe-area-inset-left, 0px), clamp(1rem, 4vw, 2rem));
  padding-right: max(env(safe-area-inset-right, 0px), clamp(1rem, 4vw, 2rem));
  background: var(--color-accent-lime, #ffee00);
  overflow: hidden;
}

.story-map-outro__illus-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.story-map-outro__illus {
  position: absolute;
  display: block;
  height: auto;
  max-width: none;
}

/* desktop-map-end 1920×1080 프레임 기준 비율 */
@media (min-width: 768px) {
  .story-map-outro__illus--mobile {
    display: none !important;
  }

  .story-map-outro__illus--mound.story-map-outro__illus--desktop {
    left: 11.5625%;
    top: 24.537%;
    width: 16.927%;
  }

  .story-map-outro__illus--figure.story-map-outro__illus--desktop {
    left: 81.354%;
    top: 42.593%;
    width: 10%;
  }
}

/* mobile-map-end 375×658 프레임 기준 비율 */
@media (max-width: 767px) {
  .story-map-outro__illus--desktop {
    display: none !important;
  }

  .story-map-outro__illus--mound.story-map-outro__illus--mobile {
    left: 9.6%;
    top: 14.893%;
    width: 42.933%;
  }

  .story-map-outro__illus--figure.story-map-outro__illus--mobile {
    left: 68%;
    top: 61.702%;
    width: 22.667%;
  }
}

.story-map-outro__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: min(1553px, 81vw);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

@media (max-width: 767px) {
  .story-map-outro__inner {
    max-width: 100vw;
  }
}

.story-map-outro__copy {
  margin: 0;
  word-break: keep-all;
  color: var(--color-brand-teal, #007058);
  font-family: "Paperlogy Octin", var(--font-sans);
  font-weight: 500;
  line-height: 1.3;
}

.story-map-outro__copy strong {
  font-weight: 800;
}

/* Figma: Medium 56 / 130% — desktop */
@media (min-width: 768px) {
  .story-map-outro__copy--mobile {
    display: none;
  }

  .story-map-outro__copy--desktop {
    font-size: clamp(1.5rem, 2.4vw, 3rem);
  }
}

/* Figma: Medium 18 / 130% — mobile (가독성 보정) */
@media (max-width: 767px) {
  .story-map-outro__copy--desktop {
    display: none;
  }

  .story-map-outro__copy--mobile {
    font-size: 20px;
  }
}

/* 모바일 하단 캡션: 가로 100% — 데스크톱 규칙(max-content·nowrap)보다 우선 */
@media (max-width: 767px) {
  .story-map-section:not([data-caption-edge="side"]) .story-map-caption:not(.story-map-caption--upper).story-map-caption {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    transform: none;
    padding-left: clamp(0.875rem, 4vw, 1.25rem);
    padding-right: clamp(0.875rem, 4vw, 1.25rem);
    box-sizing: border-box;
  }

  .story-map-caption--b.story-map-caption,
  .story-map-caption--c.story-map-caption,
  .story-map-caption--j.story-map-caption {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    transform: none;
  }

  .story-map-section[data-map-phase="6"] .story-map-caption--d.story-map-caption--visible,
  .story-map-section[data-map-phase="7"] .story-map-caption--d.story-map-caption--visible,
  .story-map-section[data-map-phase="7"] .story-map-caption--e.story-map-caption--visible,
  .story-map-section[data-map-phase="12"] .story-map-caption--h.story-map-caption--visible,
  .story-map-section[data-map-phase="13"] .story-map-caption--h.story-map-caption--visible,
  .story-map-section[data-map-phase="13"] .story-map-caption--i.story-map-caption--visible,
  .story-map-section[data-map-phase="14"] .story-map-caption--i.story-map-caption--visible {
    top: 70%;
    bottom: auto;
    width: auto;
    max-width: min(88vw, 18.5rem);
    transform: translateY(-50%);
    padding-left: clamp(0.875rem, 4vw, 1.25rem);
    padding-right: clamp(0.875rem, 4vw, 1.25rem);
    box-sizing: border-box;
  }

  .story-map-section[data-map-phase="6"] .story-map-caption--d.story-map-caption--visible,
  .story-map-section[data-map-phase="7"] .story-map-caption--d.story-map-caption--visible,
  .story-map-section[data-map-phase="7"] .story-map-caption--e.story-map-caption--visible {
    left: auto;
    right: max(env(safe-area-inset-right, 0px), clamp(0.875rem, 4vw, 1.25rem));
    text-align: right;
  }

  .story-map-section[data-map-phase="12"] .story-map-caption--h.story-map-caption--visible,
  .story-map-section[data-map-phase="13"] .story-map-caption--h.story-map-caption--visible,
  .story-map-section[data-map-phase="13"] .story-map-caption--i.story-map-caption--visible,
  .story-map-section[data-map-phase="14"] .story-map-caption--i.story-map-caption--visible {
    left: max(env(safe-area-inset-left, 0px), clamp(0.875rem, 4vw, 1.25rem));
    right: auto;
    text-align: left;
  }

  .story-map-caption__line {
    display: block;
    width: 100%;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
    text-align: center;
  }

  .story-map-caption--b .story-map-caption__line,
  .story-map-caption--c .story-map-caption__line,
  .story-map-caption--j .story-map-caption__line {
    display: block;
    width: 100%;
    text-align: center;
  }

  .story-map-section[data-map-phase="12"] .story-map-caption--h.story-map-caption--visible .story-map-caption__line,
  .story-map-section[data-map-phase="13"] .story-map-caption--h.story-map-caption--visible .story-map-caption__line,
  .story-map-section[data-map-phase="13"] .story-map-caption--i.story-map-caption--visible .story-map-caption__line,
  .story-map-section[data-map-phase="14"] .story-map-caption--i.story-map-caption--visible .story-map-caption__line {
    text-align: left;
  }

  .story-map-section[data-map-phase="6"] .story-map-caption--d.story-map-caption--visible .story-map-caption__line,
  .story-map-section[data-map-phase="7"] .story-map-caption--d.story-map-caption--visible .story-map-caption__line,
  .story-map-section[data-map-phase="7"] .story-map-caption--e.story-map-caption--visible .story-map-caption__line {
    text-align: left;
  }

  .story-map-section[data-map-phase="6"] .story-map-caption--d.story-map-caption--visible .story-map-caption__line,
  .story-map-section[data-map-phase="7"] .story-map-caption--d.story-map-caption--visible .story-map-caption__line,
  .story-map-section[data-map-phase="7"] .story-map-caption--e.story-map-caption--visible .story-map-caption__line {
    text-align: right;
  }

  .story-map-caption__tw {
    display: inline;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-map-intro,
  .story-map-caption--b,
  .story-map-caption--d,
  .story-map-caption--f,
  .story-map-caption--h {
    transition: none;
  }
}