/* ═══════════ 움직임 (2046 시안) ═══════════
   · 쪽을 옮길 때 — 머리(차림표)는 그대로 두고 본문만 부드럽게 바뀝니다
   · 스크롤 — 글과 그림이 화면에 들어올 때 살짝 떠오릅니다
   · 움직임을 줄이도록 설정하신 분께는 모두 꺼집니다 */
@view-transition { navigation: auto; }
header { view-transition-name: site-header; }
::view-transition-group(site-header) { animation: none; }
::view-transition-old(root) { animation: 200ms cubic-bezier(.4,0,1,1) both ws-out; }
::view-transition-new(root) { animation: 520ms cubic-bezier(.16,1,.3,1) both ws-in; }
@keyframes ws-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes ws-in  { from { opacity: 0; transform: translateY(16px); } }

/* 머리 — 내려가면 그림자가 살짝 */
header { transition: box-shadow .35s ease, background-color .35s ease; }
header.ws-down { box-shadow: 0 8px 30px rgba(28,37,89,.08); background: rgba(255,255,255,.97); }

/* 차림표 — 밑줄이 왼쪽에서 자라납니다 */
.nav ul a { position: relative; transition: color .2s ease; }
@media (min-width: 961px) {
  .nav ul a:not(.on)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
    background: var(--grad); border-radius: 2px; transform: scaleX(0); transform-origin: left;
    transition: transform .35s cubic-bezier(.16,1,.3,1); }
  .nav ul a:not(.on):hover::after { transform: scaleX(1); }
}

/* 첫 화면 — 들어올 때 차례로 */
.hero-in > *, .phero .wrap > * { animation: ws-rise .9s cubic-bezier(.16,1,.3,1) both; }
.hero-in > *:nth-child(2), .phero .wrap > *:nth-child(2) { animation-delay: .08s; }
.hero-in > *:nth-child(3), .phero .wrap > *:nth-child(3) { animation-delay: .16s; }
.hero-in > *:nth-child(4), .phero .wrap > *:nth-child(4) { animation-delay: .24s; }
.hero-in > *:nth-child(n+5), .phero .wrap > *:nth-child(n+5) { animation-delay: .3s; }
.hero-shot { animation: ws-shot 1.2s .25s cubic-bezier(.16,1,.3,1) both; }
@keyframes ws-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes ws-shot { from { opacity: 0; transform: translateY(40px) scale(.97); } }

/* 스크롤 — 화면에 들어올 때 떠오름 (자바스크립트가 켜진 때만) */
html.ws-motion .ws-reveal { opacity: 0; transform: translateY(26px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--ws-i, 0) * 70ms); }
html.ws-motion .ws-reveal.ws-in { opacity: 1; transform: none; }

/* 로그인 쪽 — 공지 · 매뉴얼 · 게시판 · 로그인 칸을 옮길 때 본문이 부드럽게 (2048)
   · 쪽 넘김을 아는 브라우저는 홈페이지 쪽 넘김과 똑같이 넘깁니다 (2052 · motion.js)
   · 모르는 브라우저는 칸만 떠오릅니다 */
html:not(.ws-vt) [id^="쪽-"]:not([hidden]) { animation: ws-in .5s cubic-bezier(.16,1,.3,1) both; }
/* 칸이 열린 뒤 서버에서 받아 그리는 것(공지 목록 · 책장 · 게시판 줄 · 구독 카드)이 차례로 떠오름 (2052) */
.ws-pop { animation: ws-rise .6s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--ws-i, 0) * 45ms); }

/* 카드 — 올리면 살짝 들림 */
.dcard, .gcard, .pk, .step { transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease; }
@media (hover: hover) {
  .dcard:hover, .gcard:hover, .pk:hover, .step:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.ws-motion .ws-reveal { opacity: 1; transform: none; }
}