/* 스크롤 중 헤더 숨김(header-autohide.js와 함께 사용). 무스마(musma.net) 방식:
   아래로 스크롤하면 위로 숨고, 위로 스크롤하면 바로 다시 나타난다. */
html[data-header] .site-header{transition:transform .3s cubic-bezier(0,0,.2,1),background-color .3s cubic-bezier(0,0,.2,1),box-shadow .3s cubic-bezier(0,0,.2,1)}
html[data-header=hidden] .site-header{transform:translateY(-100%)}
/* 중간에서 다시 나타날 때는 배경을 조금 더 불투명하게, 옅은 그림자로 내용과 구분 */
html[data-header=shown] .site-header{background-color:color-mix(in oklch,white 88%,transparent);box-shadow:0 6px 18px -12px rgb(15 23 42/.35)}

/* 헤더 높이(--header-height)를 기준으로 붙는 요소들이 헤더와 함께 움직이게 */
html[data-header] :is(.chapter-nav,.company-chapters,.filter-bar,.contact-preparation h2,.broadcast-moment__statement,.narrative-section,.product-narrative-page__anchor,#solution-axes-title,[data-scrolly-stage]){transition:top .3s cubic-bezier(0,0,.2,1)}

@media (prefers-reduced-motion:reduce){
  html[data-header] .site-header,
  html[data-header] :is(.chapter-nav,.company-chapters,.filter-bar,.contact-preparation h2,.broadcast-moment__statement,.narrative-section,.product-narrative-page__anchor,#solution-axes-title,[data-scrolly-stage]){transition:none}
}

/* 2026-10-10 '서비스 바로가기' 메뉴 추가로 상단 메뉴가 5개가 됨.
   마우스 화면 680~819px에서는 메뉴가 두 줄로 갈라지므로, 휴대폰처럼 메뉴 단추(서랍)로 연다. */
@media (680px<=width<=819px){
  .site-header .desktop-nav[data-astro-cid-6stfpryv],.site-header .header-cta[data-astro-cid-6stfpryv],.site-header .header-portal{display:none}
  .site-header .mobile-menu[data-astro-cid-6stfpryv]{display:block}
}

/* '서비스 바로가기'는 마우스를 쓰는 PC(1024px 이상)에서만 길게 쓰고, 휴대폰·태블릿(터치)에서는 '서비스'로 줄인다.
   태블릿은 글자 크기 설정으로 글자가 커져 상단 메뉴가 두 줄로 갈라지는 일이 있었다(2026-10-10). */
.nav-label-more{display:none;margin-left:.28em}
@media (hover:hover) and (pointer:fine) and (width>=1024px){.nav-label-more{display:inline}}