/* 모든 페이지 이동을 부드럽게: 이전 화면을 붙잡아 두었다가 새 화면으로 넘김 (흰 화면 깜빡임 없음)
   상단 메뉴·아래 고정 바·하위 메뉴·페이지 제목 영역은 제자리에 두고 본문만 넘어감.
   (Chrome·Edge·삼성 인터넷 최신·Safari 18.2+ 지원. 지원 안 하는 브라우저는 평소처럼 이동) */
@view-transition { navigation: auto; }

header.top  { view-transition-name: site-header; }
.quickbar   { view-transition-name: site-quickbar; }
.page-head  { view-transition-name: page-head; }
.subnav     { view-transition-name: subnav; }

/* 본문: 이전 화면은 살짝 위로 흐려지며 사라지고, 새 화면은 아래에서 살며시 떠오름 */
::view-transition-old(root) { animation: vt-out .32s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-in .5s cubic-bezier(.2, .7, .2, 1) .1s both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); filter: blur(3px); } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(14px); filter: blur(3px); } }

/* 페이지 제목 영역: 같은 자리에서 글자만 부드럽게 바뀜 */
::view-transition-group(page-head) { animation-duration: .45s; }
::view-transition-old(page-head) { animation: vt-fade-out .25s ease-in both; }
::view-transition-new(page-head) { animation: vt-fade-in .4s ease-out .08s both; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }

/* 상단 메뉴·고정 바·하위 메뉴는 움직이지 않음 */
::view-transition-group(site-header), ::view-transition-group(site-quickbar), ::view-transition-group(subnav) { animation: none; }
::view-transition-old(site-header), ::view-transition-old(site-quickbar), ::view-transition-old(subnav) { animation: none; opacity: 0; }
::view-transition-new(site-header), ::view-transition-new(site-quickbar), ::view-transition-new(subnav) { animation: none; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ── 보조(page-fade.js): 브라우저 자체 전환을 지원하지 않을 때 ── 상단 메뉴·고정 바는 그대로, 본문만 */
html.pf-in main, html.pf-in .home-copy { animation: pf-in .5s cubic-bezier(.2, .7, .2, 1) both; }
html.pf-out main, html.pf-out .home-copy { transition: opacity .22s ease-in, transform .22s ease-in, filter .22s ease-in;
  opacity: 0; transform: translateY(-8px); filter: blur(2px); }
@keyframes pf-in { from { opacity: 0; transform: translateY(12px); filter: blur(2px); } }
@media (prefers-reduced-motion: reduce) { html.pf-in main, html.pf-out main { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; filter: none !important; } }

/* 누를 때 휴대폰 기본 파란 사각형 대신, 은은한 눌림 표시 */
a, button { -webkit-tap-highlight-color: transparent; }
.card:active, .svc-list a:active, .tile:active, .box:active, .subnav a:active, .nav a:active { opacity: .72; transition: opacity 0s; }