/* 사이트 헤더 v2 — 새 랜딩(/landing-v2)에서 분리한 재사용 모듈 (2026-10-08, 반응형 재작업 2026-10-12).
   고정 앱바(아래로 스크롤 = 숨김, 위로 = 표시, 히어로를 벗어나면 어두운 바탕) + fmkcos 방식 메가 메뉴(상위 메뉴에 올리면
   전체 폭 반투명 패널이 내려오고 하위 메뉴가 각 상위 아래 세로로) + 모바일 햄버거 패널.
   마크업은 static/landing-v2.html 의 <header class="header">, JS 는 static/js/v2/header.js.
   폭은 화면 100% — 어느 페이지에 붙여도 된다. 경계: 768 이상 = 상단 메뉴, 767 이하 = 햄버거(header.js 와 같은 값). */
.header{position:fixed;top:0;left:0;right:0;z-index:30;height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 clamp(24px,2.5vw,48px);transition:transform .3s ease}
.header::before{content:"";position:absolute;inset:0;z-index:-1;backdrop-filter:blur(2.5px);-webkit-backdrop-filter:blur(2.5px);transition:background-color .2s ease;border-bottom:1px solid rgba(255,255,255,0.4);}
.header.solid::before{background:rgba(10,13,16,.92)}
.header.hide{transform:translateY(-100%)}
.logo-link{position:relative;display:block;width:200px;height:23px;flex:0 0 auto}
.logo-link .logo{position:absolute;inset:0;width:200px;height:23px}
/* 메뉴 간격은 화면 폭에 비례(피그마 1920 기준 80, 열리면 96) — 좁은 데스크톱에서 로고·메뉴·버튼이 겹치지 않게 */
.nav{display:flex;gap:clamp(24px,4.17vw,80px);font-weight:300;font-size:18px;color:#fff;align-self:stretch;transition:gap .3s ease}
.nav .item{position:relative;display:flex;align-items:center}
.nav .top{display:inline-flex;align-items:center;gap:4px;height:100%;white-space:nowrap}
.nav .ext{width:24px;height:24px}
.nav .sub{position:absolute;top:72px;left:50%;transform:translate(-50%,-6px);display:flex;flex-direction:column;align-items:center;gap:16px;padding-top:32px;opacity:0;visibility:hidden;transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s;white-space:nowrap;z-index:2}
.nav .sub a{display:inline-flex;align-items:center;gap:8px;font-size:18px;font-weight:300;line-height:1.5;color:rgba(255,255,255,.88);padding:2px 10px;border-radius:2px;transition:background-color .2s,color .2s}
.nav .sub a:hover{color:#fff; font-weight: 500;}
.nav .sub a.dl img{width:24px;height:24px}
.mega-bg{position:absolute;top:72px;left:0;width:100%;height:0;opacity:0;pointer-events:none;background:rgba(40,40,40,.82);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);transition:height .3s ease,opacity .3s ease;z-index:-1}
.header.open::before{background:rgba(40,40,40,.92);backdrop-filter:blur(70px);-webkit-backdrop-filter:blur(70px);border-bottom:1px solid rgba(255,255,255,.4)}
.header.open .nav{gap:clamp(32px,5vw,96px)}
.header.open .nav .sub{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .25s ease .05s,transform .25s ease .05s,visibility 0s}
.header.open .mega-bg{height:300px;opacity:1;pointer-events:auto}
.header .btn{transition:background-color .2s,color .2s,border-color .2s,opacity .15s}
.header .right{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.menu-btn,.mnav{display:none}
/* 밝은 헤더 — 흰 바탕 페이지(요금제 · FAQ)용 변형. <header class="header light"> + 로고 두 장(on-dark · on-light).
   맨 위에선 투명 바탕에 어두운 글자, 내리면 흰 바탕, 메뉴를 열면 기본(어두운) 헤더로 돌아간다. (2026-10-15 pricing.css 에서 옮김) */
.logo-link .logo.on-light{display:none}
@media (min-width:768px){
  .header.light:not(.open) .logo.on-light{display:block}
  .header.light:not(.open) .logo.on-dark{display:none}
  .header.light:not(.open) .nav{color:#333}
  .header.light::before{border-bottom-color:transparent}
  .header.light.solid:not(.open)::before{background:rgba(255,255,255,.96);border-bottom-color:#e5e5e5}
  .header.light:not(.open) .btn-ghost-dark{border-color:transparent;color:#333}
  .header.light:not(.open) .btn-white{background:transparent;border:1px solid #333;color:#333}
}
/* 태블릿 — 피그마 'min 768px max 1024px' 헤더(메뉴 16px · 간격 16 · 버튼 사이 8) */
@media (min-width:768px) and (max-width:1024px){
  .nav{gap:16px;font-size:16px}
  .header.open .nav{gap:24px}
  .nav .sub a{font-size:16px}
  .header.open .mega-bg{height:220px}
  .header .right{gap:8px}
}
/* 768 미만 — 로고 + 햄버거(피그마 모바일 헤더). 메뉴는 아래로 펼치는 패널 */
@media (max-width:767px){
  .header{padding:0 24px}
  .header::before {background:#2A2A2B;}
  .nav,.header .right{display:none}
  .menu-btn{display:flex;width:40px;height:40px;padding:8px;border-radius:100px;align-items:center;justify-content:center}
  .menu-btn img{width:24px;height:24px}
  .mnav:not([hidden]){display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;gap:4px;padding:8px 24px 40px 24px;background:#2A2A2B;border-bottom:1px solid #2a2d30;font-weight:300;font-size:18px;color:#fff}
  .mnav a{padding:10px 0}
  .mnav a:hover {font-weight: 500;}
  .mnav .mnav-h{padding:12px 0;border-bottom: 1px solid rgba(255,255,255,0.4);}
  .mnav a.sub{padding:8px 0 8px 12px}
  .mnav .mnav-btns{display:flex;gap:8px;margin-top:12px;flex-direction: column;}
  .mnav .mnav-btns a{padding:10px 20px}
}