/* =====================================================================
 * site-shell.css — 화면을 오갈 때의 껍데기 안정 (2026-09-07)
 *
 * 두 가지만 담는다. 둘 다 "화면이 덜컹거린다" 는 같은 뿌리에서 나온 문제다.
 *   1) 스크롤바가 생겼다 없어질 때 가운데 정렬이 밀리는 것
 *   2) 페이지를 옮길 때 문서를 통째로 갈아치우며 생기는 흰 깜빡임
 *
 * 라이브러리 없이 CSS 만 쓴다(ui-ux.md: 외부 CDN 금지 · 최소 JS).
 * 미지원 브라우저는 예전과 똑같이 동작한다 — 점진적 향상이라 깨질 것이 없다.
 * ===================================================================== */

/* ── 1) 스크롤바 자리를 늘 비워 둔다 ─────────────────────────────────
 * 내용이 짧아 스크롤바가 없는 화면과 긴 화면 사이를 오가면, 세로 스크롤바
 * 너비(윈도우 크롬 기준 약 15px)만큼 가운데 정렬된 본문이 좌우로 튄다.
 * 같은 화면 안에서도 목록을 접었다 펴면 같은 일이 생긴다.
 * scrollbar-gutter 는 스크롤바가 없을 때도 그 자리를 남겨 둔다.
 * (맥의 오버레이 스크롤바는 원래 자리를 안 먹어 아무 영향이 없다.) */
html { scrollbar-gutter: stable; }

/* 옛 브라우저 폴백 — 항상 스크롤 트랙을 띄워 같은 효과를 낸다. */
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }
}

/* ── 2) 페이지 전환 ────────────────────────────────────────────────
 * 같은 오리진 문서끼리 크로스페이드한다. 선언 한 줄이면 브라우저가 알아서
 * 이전 화면의 스냅숏을 들고 있다가 새 화면과 겹쳐 준다 → 흰 깜빡임이 사라진다. */
@view-transition { navigation: auto; }

@keyframes ak-shell-fade-in  { from { opacity: 0 } to { opacity: 1 } }
@keyframes ak-shell-fade-out { from { opacity: 1 } to { opacity: 0 } }

/* 나가는 쪽을 조금 더 빨리 지워 잔상이 겹쳐 탁해지지 않게 한다. */
::view-transition-old(root) { animation: ak-shell-fade-out .16s ease both; }
::view-transition-new(root) { animation: ak-shell-fade-in .22s ease both; }

/* 이름을 붙인 조각(GNB·바로가기 카드 줄·푸터)은 두 문서에 걸쳐 '같은 요소' 로
 * 이어지므로 다시 그리지 않고 제자리를 지킨다. 이름은 문서 안에서 유일해야 해서
 * 각 화면의 스타일에서 붙인다(같은 이름이 둘이면 전환이 통째로 취소된다). */
::view-transition-group(ak-gnb),
::view-transition-group(ak-subnav),
::view-transition-group(ak-footer) {
  animation-duration: .22s;
  animation-timing-function: cubic-bezier(.2, .7, .3, 1);
}

/* 모션을 줄여 달라고 한 사용자에게는 아무것도 하지 않는다. */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}