/**
 * mobile-ux.css — 모바일 스크롤·확대·가로 스크롤 방지
 */

html {
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior-x: none;
  touch-action: manipulation;
}

body {
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior-x: none;
  max-width: 100vw;
  touch-action: pan-y;
}

img,
video,
svg,
canvas {
  max-width: 100%;
}

/*
 * 인앱·모바일: JS(initLockedViewport)가 visualViewport에 맞춰 --app-vh(1% 단위 px) 갱신
 * → 주소창 숨김 시 핀·고정 영역이 가시 화면 높이에 맞게 늘어남
 */
html.is-mobile-scroll-ux {
  --app-vh: 1vh;
  --app-scroll-vh: 1vh;
  /* 지도 핀 래퍼 = 이 값×18×--app-scroll-vh. 높을수록 페이즈 전환·스크롤이 길고 느림 (페이즈당 ~3×) */
  --story-map-mobile-stack-vh: 156;
  /* 핀 높이 대비 하단 캡션·라임 여백(지도와 겹침 방지) */
  --story-map-caption-zone: clamp(6.25rem, calc(var(--app-vh, 1vh) * 26), 10.5rem);
  /* 인앱 등에서 레이아웃 변화 시 스크롤 앵커가 튀는 현상 완화(지원 브라우저) */
  overflow-anchor: none;
}

html.is-mobile-scroll-ux .story-map-pin,
html.is-mobile-scroll-ux .section3-pin,
html.is-mobile-scroll-ux .section3-panel5-outro__intro-lock,
html.is-mobile-scroll-ux .section3-panel5-outro__scene,
html.is-mobile-scroll-ux .section3-p5-green__pin,
html.is-mobile-scroll-ux .guestbook__iris-pin {
  /* dvh 폴백 후 JS --app-vh로 visualViewport와 동기화 */
  height: 100dvh !important;
  height: calc(var(--app-vh, 1vh) * 100) !important;
  min-height: 100dvh !important;
  min-height: calc(var(--app-vh, 1vh) * 100) !important;
  max-height: none !important;
  box-sizing: border-box;
}

html.is-mobile-scroll-ux .section3-panel5-outro__pin {
  min-height: calc(var(--app-vh, 1vh) * 100) !important;
}

html.is-mobile-scroll-ux .story-map-pin-wrapper {
  height: calc(
    var(--story-map-mobile-stack-vh, 100) * 18 * var(--app-scroll-vh, var(--app-vh, 1vh))
  );
}

html.is-mobile-scroll-ux .section3-panel5-outro__intro-track {
  min-height: calc(
    var(--app-scroll-vh, var(--app-vh, 1vh)) * 100
      + var(--panel5-outro-sticky-scroll, calc(220 * var(--app-scroll-vh, var(--app-vh, 1vh))))
  );
}

html.is-mobile-scroll-ux .section3-p5-green__track {
  min-height: calc(var(--app-scroll-vh, var(--app-vh, 1vh)) * (100 + var(--p5-green-scroll-vh, 280)));
}

html.is-mobile-scroll-ux .section3-p5-green__content {
  min-height: calc(var(--app-vh, 1vh) * 100) !important;
}

html.is-mobile-scroll-ux .guestbook__iris-track {
  min-height: calc(
    var(--app-scroll-vh, var(--app-vh, 1vh)) * (100 + var(--gb-iris-scroll-vh, 0.75) * 100)
  );
}

/*
 * 지도(모바일 인앱): 핀 높이는 --app-vh×100 인데 이미지는 100dvh·큰 padding으로 계산되어
 * 잠깐 더 크게 잡히면 camera overflow로 하단이 잘림 → 카메라·이미지를 핀 높이에 맞춤.
 */
@media (max-width: 767px) {
  html.is-mobile-scroll-ux .story-map-pin {
    min-height: 100dvh !important;
    min-height: calc(var(--app-vh, 1vh) * 100) !important;
    box-sizing: border-box;
  }

  html.is-mobile-scroll-ux .story-map-camera {
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding-bottom: var(
      --story-map-safe-bottom,
      clamp(3.5rem, calc(var(--app-vh, 1vh) * 14), 6.5rem)
    );
    padding-top: env(safe-area-inset-top, 0px);
  }

  html.is-mobile-scroll-ux .story-map-section[data-map-zoomed="true"] .story-map-camera {
    padding-bottom: var(
      --story-map-safe-bottom,
      var(--story-map-caption-zone, clamp(3.5rem, calc(var(--app-vh, 1vh) * 14), 6.5rem))
    );
  }

  html.is-mobile-scroll-ux .story-map-stack--mobile .story-map-img,
  html.is-mobile-scroll-ux .story-map-stack--mobile .story-map-layer {
    max-width: min(228vw, 985px);
    max-height: calc(
      var(--app-vh, 1vh) * 100 - var(--story-map-safe-bottom, var(--story-map-caption-zone)) - 0.5rem
    ) !important;
    width: auto;
    height: auto;
  }

  /* 시퀀스1(0~5): 장면1·5만 작아지던 문제 — JS 통일 max-height 우선 */
  html.is-mobile-scroll-ux .story-map-section[data-map-zoomed="true"] .story-map-stack--mobile .story-map-img,
  html.is-mobile-scroll-ux .story-map-section[data-map-zoomed="true"] .story-map-stack--mobile .story-map-layer {
    max-height: var(
      --story-map-mobile-map-max-h,
      calc(
        var(--app-vh, 1vh) * 100 - var(--story-map-safe-bottom, var(--story-map-caption-zone)) - 0.5rem
      )
    ) !important;
  }

  html.is-mobile-scroll-ux .story-map-section[data-caption-edge="top"] .story-map-camera {
    align-items: center;
    padding-top: var(--story-map-safe-top, clamp(5rem, 14vh, 9rem));
    padding-bottom: var(
      --story-map-safe-bottom,
      var(--story-map-caption-zone, clamp(2.5rem, 8vh, 4rem))
    ) !important;
  }

  html.is-mobile-scroll-ux .story-map-section[data-caption-edge="bottom"] .story-map-caption:not(.story-map-caption--upper) {
    bottom: calc(var(--story-map-caption-inset, 0.35rem) + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: 32px !important;
  }

  html.is-mobile-scroll-ux .story-map-section[data-caption-edge="top"] .story-map-caption--upper.story-map-caption--visible {
    top: calc(var(--story-map-caption-inset, 0.5rem) + env(safe-area-inset-top, 0px)) !important;
    padding-top: calc(clamp(0.5rem, 2vmin, 1rem) + 80px) !important;
  }

  /* GPU 레이어 promote/demote로 스크롤 시 번쩍임 완화 */
  html.is-mobile-scroll-ux .story-map-world {
    will-change: auto;
  }

  /* 패널4 슬라이드: ≤1100px 블록의 16:9·max-height가 16:6을 덮어 이미지 잘림 → 모바일 UX에서 재정의 */
  html.is-mobile-scroll-ux .section3-section--time .section3-panel--4 .time-carousel.time-carousel--panel4 {
    aspect-ratio: 16 / 6 !important;
    max-height: none !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
    grid-row: 3;
    position: relative;
    z-index: 1;
  }

  /* 보고서 버튼 행이 추가되어도 흰 카드가 슬라이드에 가려지지 않도록 */
  html.is-mobile-scroll-ux .section3-section--time .section3-panel--4 .section3-split-bottom--panel4-figma .section3-split-bottom__cards {
    min-height: min-content;
    overflow: visible;
    flex: 0 0 auto;
  }

  html.is-mobile-scroll-ux .section3-section--time .section3-panel--4 .time-carousel--panel4 .time-carousel__img {
    object-fit: cover;
  }

  /* 시간 패널: 핀 안에서 하단·노치 여백(브라우저 UI·safe-area) */
  html.is-mobile-scroll-ux .section3-section--time .section3-panel.is-active .section3-scroll {
    padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  }
}

/* 시간(10년): 모바일에서 패널 전환용 스냅 스택 축소(데스크톱 1100 계수 대비) */
html.is-mobile-scroll-ux .section3-section.section3-section--time {
  --section3-snap-stack-vh: 360;
}

/* 핀은 --app-vh·스냅은 1vh면 총 스크롤량과 progress가 어긋날 수 있어 동일 단위로 통일 */
html.is-mobile-scroll-ux .section3-section--time .section3-snap {
  height: calc(
    var(--section3-snap-stack-vh, 820) * var(--app-scroll-vh, var(--app-vh, 1vh)) / 5
  );
}

/* iOS: 폼 포커스 시 자동 확대 방지 (16px 미만이면 줌됨) */
@media (max-width: 767px) {
  html {
    scroll-snap-type: none;
  }

  .guestbook-modal .guestbook-form__input,
  .guestbook-modal .guestbook-form__textarea,
  .alt-editor-gate__input,
  .alt-editor-card__input,
  .alt-editor-link-card__input {
    font-size: 16px;
  }

  /* 응원: 흰 원 스크롤 구간 축소 */
  .guestbook {
    --gb-iris-scroll-vh: 0.75;
  }

  /* 패널5 탭: 탭 버튼 sticky 유지 — overflow는 본문만 clip */
  .section3-panel5-outro__tabs-flow,
  .section3-panel5-outro__tabs-wrap,
  .section3-p5-tabs {
    overflow-x: clip;
    max-width: 100%;
  }

  .section3-p5-tabs__list {
    overflow-x: clip;
    overflow-y: visible;
    touch-action: pan-y;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .section3-p5-tabs__list::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
}