/* 고정 머리글 (2026-11)
   - 모든 페이지 머리글이 스크롤해도 화면 위에 붙어 있음
   - 80px 넘게 내리면 얇아짐(여백↓, "Wear What Matters." 숨김, 로고 살짝 작게), 맨 위로 오면 원래대로
   - 휴대폰(768px 이하): 아래로 내리면 위로 숨고, 조금이라도 올리면 다시 나타남
   - 클래스는 assets/sticky-header.js 가 <html> 에 붙임: header-compact, header-hidden */
.site-header{
 position:sticky;top:0;z-index:60;
 transition:padding .3s cubic-bezier(.23,1,.32,1),margin-bottom .3s cubic-bezier(.23,1,.32,1),transform .3s cubic-bezier(.23,1,.32,1)
}
.site-header .brand-lockup{transform-origin:50% 50%;transition:transform .3s cubic-bezier(.23,1,.32,1)}
.site-header .header-slogan{max-height:2.2em;overflow:hidden;transition:opacity .2s ease-out,max-height .3s cubic-bezier(.23,1,.32,1),margin-top .3s cubic-bezier(.23,1,.32,1)}

/* 얇아진 머리글. 줄어든 높이만큼 아래 여백(margin-bottom)을 더해 본문이 덜컥 올라오지 않게 함(--header-shrink 는 스크립트가 잼) */
html.header-compact .site-header{padding-top:8px;padding-bottom:8px;margin-bottom:var(--header-shrink,0px)}
html.header-compact .site-header .brand-lockup{transform:scale(.88)}
html.header-compact .site-header .header-slogan{opacity:0;max-height:0;margin-top:0}

/* 휴대폰: 숨김 */
html.header-hidden .site-header{transform:translateY(-100%)}
/* 제품 상세 위쪽 구매 막대도 머리글과 함께 올라감 */
body[data-product] .purchase-companion{transition:transform .3s cubic-bezier(.23,1,.32,1)}
html.header-hidden body[data-product] .purchase-companion{transform:translateY(calc(-1 * var(--brand-header-height,0px)))}

/* 앵커 이동 때 머리글에 가리지 않게 (원래 높이 + 여유) */
html{scroll-padding-top:calc(var(--header-full-height,88px) + 12px)}
/* 사진 칸 높이는 머리글이 얇아져도 흔들리지 않게 원래 높이 기준 */
@media (min-width:901px){.pdp-shot{height:calc(100vh - var(--header-full-height,var(--brand-header-height,90px)));height:calc(100svh - var(--header-full-height,var(--brand-header-height,90px)))}}
#hero-stage{height:calc(100vh - var(--header-full-height,var(--hero-offset,88px)));height:calc(100svh - var(--header-full-height,var(--hero-offset,88px)))}

/* 높이 잴 때·움직임 줄이기: 애니메이션 없이 바로 */
html.header-measuring .site-header,html.header-measuring .site-header *{transition:none!important}
@media (prefers-reduced-motion:reduce){
 .site-header,.site-header .brand-lockup,.site-header .header-slogan,body[data-product] .purchase-companion{transition:none}
}
@media print{.site-header{position:static}}