@charset "utf-8";

/* ============================================================================
   페이지 전환 효과 + 첫 그림 깜빡임 제거
   ----------------------------------------------------------------------------
   이 사이트는 링크를 누르면 서버에서 새 페이지를 받아 통째로 다시 그리는 구조다.
   그래서 "나가는 화면 -> 들어오는 화면" 전환은 브라우저가 해 줘야 한다.

   두 가지를 겹쳐 둔다.
     1) @view-transition : 브라우저가 이전 화면과 새 화면을 교차 페이드해 준다.
                           나갈 때/들어올 때가 모두 자연스럽고 뒤로가기에도 걸린다.
     2) 페이드인          : 1)을 못 쓰는 브라우저용. 새 화면만 서서히 나타난다.

   두 효과가 겹쳐 두 번 깜빡이지 않도록, 2)는 1)을 지원하지 '않을' 때만 켠다.

   [중요] 링크 클릭을 가로채지 않는다.
   이 사이트에는 href="#" + onclick으로 이동이 아닌 동작(팝업 열기, ajax 전송,
   인쇄, 새 창)을 하는 링크가 87곳 있다. 클릭을 가로채는 방식이었다면 그 87곳을
   모두 예외 처리해야 하고, 하나만 놓쳐도 해당 기능이 통째로 막힌다.
   여기 있는 것은 전부 CSS라 기존 동작에 영향을 주지 않는다.

   이 파일을 고칠 때는 layout.cshtml의 ver를 반드시 올린다.
   ============================================================================ */


/* --- 1) 최신 브라우저 : 문서 간 전환을 브라우저에 맡긴다 ------------------- */

@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 180ms;
    animation-timing-function: ease;
}


/* --- 2) 그 외 브라우저 : 새 화면만 페이드인 --------------------------------
   view-transition-name 속성을 모르는 브라우저에서만 켠다.
   (Chrome 111~125처럼 속성은 알지만 문서 간 전환은 못 하는 구간은
    아무 효과도 받지 않는다. 지금과 똑같이 동작할 뿐 깨지지는 않는다.) */

@supports not (view-transition-name: none) {

    /* body가 아니라 html에 건다.
       body에 걸면 투명도가 적용되는 동안 body가 새 쌓임 맥락(stacking context)이
       되는데, 이 사이트는 상단 배너(z-index:-2)와 서브메뉴 띠(z-index:-1)를
       음수 z-index로 body 뒤에 깔아 두어서 그 순간 겹치는 순서가 흔들릴 수 있다.
       html에 걸면 배경까지 통째로 한 덩어리로 나타나 그런 문제가 없다. */
    html {
        animation: pageFadeIn 180ms ease both;
    }

    @keyframes pageFadeIn {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
}


/* ============================================================================
   첫 그림에서 생기는 깜빡임 제거
   ----------------------------------------------------------------------------
   서브메뉴(.subMu)와 그 뒤에 깔리는 흰 반투명 띠(.bg_subMuBar)는
   마우스를 메뉴에 올렸을 때만 보여야 하는 것들이다.

   그런데 common.css에는 이것들을 감추는 규칙이 없고, 감추는 일을
   menuinit.js가 document.ready에서 한다. 그래서 페이지가 열릴 때마다
   5개 메뉴의 서브메뉴가 한꺼번에 겹쳐 보이고 흰 띠까지 깔린 뒤 사라졌다.

   하필 그 자리가 상단 배너와 정확히 겹친다.
     .gnb(top:75) + .subMu(top:36) = y 111px
     .bg_subMuBar                  = y 112px
     .visual_*(배너)               = y 112px

   원래도 있던 현상인데, 페이지 전환 효과를 넣으면서 새 화면이 그려지는 과정을
   보게 되니 "배너가 깜빡인다"로 드러났다.

   JS가 어차피 첫 실행 때 감추므로, 처음부터 CSS로 감춰 두면 결과는 같고
   깜빡임만 없어진다. 마우스를 올렸을 때는 JS가 인라인 style로 켜므로
   여기 규칙보다 우선한다.
   ============================================================================ */

.gnb > li > ul.subMu { display: none; }
.bg_subMuBar { display: none; }


/* --- 접근성 : 화면 움직임 줄이기 설정을 켠 사용자에게는 효과를 끈다 --------- */

@media (prefers-reduced-motion: reduce) {

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }

    html {
        animation: none;
    }
}