/* 선택한 1번 시안: 이전 본문과 다음 본문이 함께 옆으로 넘어간다. */
@view-transition {
  navigation: auto;
}

/* 전환 이미지가 터치를 막지 않게 해 연속 메뉴 선택을 받는다. */
::view-transition {
  pointer-events: none;
  overflow: clip;
}

html.app-page-motion-managed {
  overflow-x: hidden;
  overflow-x: clip;
}

:root {
  --app-page-enter-from: 100vw;
  --app-page-leave-to: -100vw;
}

:root[data-app-page-direction="back"] {
  --app-page-enter-from: -100vw;
  --app-page-leave-to: 100vw;
}

[data-app-motion-header] {
  view-transition-name: app-header;
}

[data-app-motion-nav] {
  view-transition-name: app-tabbar;
}

::view-transition-group(root),
::view-transition-group(app-header),
::view-transition-group(app-tabbar) {
  animation-duration: 0.28s;
  animation-timing-function: cubic-bezier(0.22, 0.8, 0.25, 1);
}

::view-transition-old(root) {
  animation: app-page-leave 0.28s cubic-bezier(0.22, 0.8, 0.25, 1) both;
  opacity: 1;
  mix-blend-mode: normal;
}

::view-transition-new(root) {
  animation: app-page-enter 0.28s cubic-bezier(0.22, 0.8, 0.25, 1) both;
  opacity: 1;
  mix-blend-mode: normal;
}

/* 헤더와 메뉴는 본문 이미지에서 빠져 같은 자리에 남는다. */
::view-transition-old(app-header),
::view-transition-new(app-header),
::view-transition-old(app-tabbar),
::view-transition-new(app-tabbar) {
  animation: none;
  mix-blend-mode: normal;
}

/* 로고·메뉴 구성이 다른 페이지 사이에서도 새 고정 영역 하나만 보인다. */
::view-transition-old(app-header),
::view-transition-old(app-tabbar) {
  opacity: 0;
}

:root[data-app-page-motion="internal"]::view-transition-group(app-header),
:root[data-app-page-motion="internal"]::view-transition-group(app-tabbar) {
  animation: none;
}

/* 같은 화면 안 탭(contentOnly): 탭 줄·위쪽은 그대로, 아래 내용만 옆으로 넘긴다. */
:root[data-app-page-motion-scope="content"] [data-app-motion-content] {
  view-transition-name: app-content;
}

:root[data-app-page-motion-scope="content"]::view-transition-old(root) {
  animation: none;
  opacity: 0;
}

:root[data-app-page-motion-scope="content"]::view-transition-new(root) {
  animation: none;
}

::view-transition-group(app-content) {
  animation-duration: 0.28s;
  animation-timing-function: cubic-bezier(0.22, 0.8, 0.25, 1);
}

::view-transition-old(app-content) {
  animation: app-page-leave 0.28s cubic-bezier(0.22, 0.8, 0.25, 1) both;
  mix-blend-mode: normal;
}

::view-transition-new(app-content) {
  animation: app-page-enter 0.28s cubic-bezier(0.22, 0.8, 0.25, 1) both;
  mix-blend-mode: normal;
}

@keyframes app-page-enter {
  from { transform: translateX(var(--app-page-enter-from)); }
  to { transform: none; }
}

@keyframes app-page-leave {
  from { transform: none; }
  to { transform: translateX(var(--app-page-leave-to)); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}