/* ===================================================================== * site-shell.css — 화면을 오갈 때의 껍데기 안정 (2026-09-07) * * 처음엔 두 가지(1·2)만 담았다. 둘 다 "화면이 덜컹거린다" 는 같은 뿌리에서 나온 문제다. * 3) 은 2026-10-19 T17 — 전 루트 페이지에 걸리는 파일이라 공용 레이아웃 토큰도 여기 둔다. * 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·바로가기 카드 줄·푸터)은 두 문서에 걸쳐 '같은 요소' 로 * 이어지므로 다시 그리지 않고 제자리를 지킨다. 이름은 문서 안에서 유일해야 해서 * 각 화면의 스타일에서 붙인다(같은 이름이 둘이면 전환이 통째로 취소된다). */ /* 헤더(GNB)·푸터에 이름을 붙여 두 문서에 걸쳐 '같은 요소' 로 이어지게 한다 → 페이지를 옮겨도 * 헤더·푸터는 다시 그리지 않고 제자리를 지키고, 본문만 바뀐다(2026-09-10). * ⚠️ 이름은 문서 안에서 하나여야 한다 — 빵부스러기