html {
    font-family: "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ✅ View Transitions API — 페이지 전환 효과
   지원 브라우저: Chrome 126+, Safari 18.2+, Samsung Internet 최신
   주의: @view-transition { navigation: auto } 규칙은
   include.html에서 JS로 동적 추가 (pagereveal 지원 시에만)
   → WebView에서 VT가 폴백 애니메이션을 방해하는 문제 방지 */

/* ✅ 기본 전환 속도 (방향 미지정 시 크로스페이드) */
::view-transition-old(root) {
    animation-duration: 0.25s;
    animation-timing-function: ease-in-out;
}

::view-transition-new(root) {
    animation-duration: 0.25s;
    animation-timing-function: ease-in-out;
}

/* ============================================
   방향별 View Transitions 애니메이션
   공통 패턴: 아래 페이지는 고정(vt-stay)
              위 페이지만 슬라이딩
   ============================================ */

/* ✅ 공통: 페이지 고정 (아래 레이어 역할) */
@keyframes vt-stay {
    from { transform: none; }
    to   { transform: none; }
}

/* ✅ 세로 슬라이드 키프레임 (지도↔목록) */
@keyframes vt-slide-from-bottom {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

@keyframes vt-slide-to-bottom {
    from { transform: translateY(0); }
    to   { transform: translateY(100%); }
}

/* ✅ 가로 슬라이드 키프레임 (목록↔상세) */
@keyframes vt-slide-from-right {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

@keyframes vt-slide-to-right {
    from { transform: translateX(0); }
    to   { transform: translateX(100%); }
}

/* ──────────────────────────────────────────
   지도 ↔ 목록 (세로 슬라이드)
   지도는 항상 고정, 목록이 위아래로 슬라이딩
   ────────────────────────────────────────── */

/* ✅ 지도→목록: 지도 고정 + 목록이 아래에서 올라와 덮음 */
html.vt-slide-up::view-transition-old(root) {
    animation: vt-stay 0.3s ease-in-out forwards;
    z-index: 1;
}

html.vt-slide-up::view-transition-new(root) {
    animation: vt-slide-from-bottom 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    z-index: 2;
}

/* ✅ 목록→지도 (뒤로가기): 목록이 아래로 내려가며 사라짐 + 지도 고정 */
html.vt-slide-down::view-transition-old(root) {
    animation: vt-slide-to-bottom 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    z-index: 2;
}

html.vt-slide-down::view-transition-new(root) {
    animation: vt-stay 0.3s ease-in-out forwards;
    z-index: 1;
}

/* ──────────────────────────────────────────
   목록 ↔ 상세 (가로 슬라이드)
   목록은 항상 고정, 상세가 좌우로 슬라이딩
   ────────────────────────────────────────── */

/* ✅ 목록→상세: 목록 고정 + 상세가 오른쪽에서 덮어 올라옴 */
html.vt-slide-right::view-transition-old(root) {
    animation: vt-stay 0.3s ease-in-out forwards;
    z-index: 1;
}

html.vt-slide-right::view-transition-new(root) {
    animation: vt-slide-from-right 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    z-index: 2;
}

/* ✅ 상세→목록 (뒤로가기): 상세가 오른쪽으로 빠져나감 + 목록 고정 */
html.vt-slide-left::view-transition-old(root) {
    animation: vt-slide-to-right 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    z-index: 2;
}

html.vt-slide-left::view-transition-new(root) {
    animation: vt-stay 0.3s ease-in-out forwards;
    z-index: 1;
}

/* ──────────────────────────────────────────
   하단 내비게이션 바 — 페이지 전환 중 제자리 고정
   view-transition-name: bottom-nav 으로 별도 레이어 분리
   → 페이지 콘텐츠만 슬라이딩, nav는 움직이지 않음
   ────────────────────────────────────────── */
::view-transition-group(bottom-nav) {
    /* 모든 슬라이딩 root 레이어(z-index 최대 2)보다 항상 위에 렌더링 */
    z-index: 9999;
    /* 그룹 자체 이동/페이드 완전 차단 */
    animation: none;
}

::view-transition-old(bottom-nav),
::view-transition-new(bottom-nav) {
    /* 스냅샷 전환 없음 — 항상 불투명하게 고정 */
    animation: none;
    mix-blend-mode: normal;
    /* new 스냅샷만 보여서 old가 비치는 현상 방지 */
    inset: 0;
}