:root {
  background: var(--page);
  --edu-motion-arrival: cubic-bezier(.16, 1, .3, 1);
  --edu-page-in: 18px;
  --edu-page-out: -8px;
}

.tabs { position: relative; }
.tabs.has-tab-cursor button::after { background: transparent; }
.tab-cursor {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 2px;
  background: var(--ink);
  transform-origin: left center;
  pointer-events: none;
  view-transition-name: edu-tab-cursor;
}
.main-stage { view-transition-name: edu-page; }

/* 외곽 프레임은 고정하고 앨범의 본문과 탭 표시만 다음 위치로 연결합니다. */
::view-transition { pointer-events: none; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-group(edu-page), ::view-transition-group(edu-tab-cursor) {
  animation-duration: 420ms;
  animation-timing-function: var(--edu-motion-arrival);
}
::view-transition-old(edu-page) {
  animation: edu-page-out 160ms ease-out both;
  mix-blend-mode: normal;
}
::view-transition-new(edu-page) {
  animation: edu-page-in 420ms var(--edu-motion-arrival) both;
  mix-blend-mode: normal;
}
::view-transition-old(edu-tab-cursor), ::view-transition-new(edu-tab-cursor) { animation: none; }
@keyframes edu-page-out {
  to { opacity: 0; transform: translateX(var(--edu-page-out)); }
}
@keyframes edu-page-in {
  from { opacity: .25; transform: translateX(var(--edu-page-in)); clip-path: inset(0 1.5% 0 1.5%); }
  to { opacity: 1; transform: translateX(0); clip-path: inset(0); }
}

.details-dialog::backdrop, .edu-login-dialog::backdrop {
  opacity: 1;
  transition: opacity 280ms var(--edu-motion-arrival);
}
dialog[data-edu-motion="closing"] { pointer-events: none; }
dialog[data-edu-motion="closing"]::backdrop { opacity: 0; transition-duration: 180ms; }
@starting-style {
  .details-dialog[open]::backdrop, .edu-login-dialog[open]::backdrop { opacity: 0; }
}

/* 로고는 기준점으로 남고, 로고 클릭으로 다시 열린 본문만 여유 있게 정착합니다. */
html[data-edu-refresh="arriving"] .main-stage { animation: edu-home-arrive 620ms var(--edu-motion-arrival) both; }
html[data-edu-refresh="arriving"] :is(.main-nav, .header-account, .site-footer) { animation: edu-home-opacity 360ms ease-out both; }
@keyframes edu-home-arrive {
  from { opacity: .2; transform: translateY(10px); clip-path: inset(.8%); }
  to { opacity: 1; transform: none; clip-path: inset(0); }
}
@keyframes edu-home-opacity { from { opacity: .45; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .details-dialog::backdrop, .edu-login-dialog::backdrop { transition: opacity 110ms linear !important; }
  html[data-edu-refresh="arriving"] :is(.main-stage, .main-nav, .header-account, .site-footer) { animation: edu-home-opacity 110ms linear both !important; }
}