@charset "UTF-8";

/* ============ Fluid header/logo sizes & glass vars ============ */
:root{
  /* 로고 높이(화면폭에 따라 부드럽게) */
  --logo-h: clamp(40px, 6vw, 96px);

  /* 로고 위/아래 여유(헤더 내부 상하 패딩 합) */
  --header-extra: clamp(40px, 2vw, 80px);

  /* 스냅/앵커 보정용: JS가 실측으로 덮어씀 */
  --header-h: calc(var(--logo-h) + var(--header-extra));

  /* 글래스 톤(기본/히어로) */
  --topbar-bg: rgba(0,0,0,.62);       /* 일반 섹션에서 */
  --topbar-bg-hero: rgba(0,0,0,.46);  /* 히어로 위에서 더 투명 */
  --topbar-blur: 10px;
  --topbar-border: rgba(255,255,255,.10);
}

/* 큰 화면에서 조금 더 크게 (원하면 숫자 조절) */
@media (min-width:1440px){
  :root{
    --logo-h: 75px;
    --header-extra: 40px;
  }
}

/* ===== 헤더 (상단 고정 + 글래스) ===== */
.topbar{
  position: fixed; left: 0; right: 0; top: 0;
  z-index: 100000;
  display:flex; align-items:center; justify-content:space-between; gap:24px;

  /* 로고가 커져도 헤더가 같이 커지도록 */
  min-height: calc(var(--logo-h) + var(--header-extra));

  /* 상하/좌우 패딩 (상단 안전영역 포함) */
  padding-block: calc(var(--header-extra) * 0.5 + env(safe-area-inset-top, 0px));
  padding-inline: clamp(16px, 4vw, 32px);

  /* 기본: 반투명 글래스 */
  background: var(--topbar-bg);
  -webkit-backdrop-filter: saturate(120%) blur(var(--topbar-blur));
  backdrop-filter: saturate(120%) blur(var(--topbar-blur));
  border-bottom: 1px solid var(--topbar-border);

  color:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.35);
  overflow: visible;
}

/* 히어로 위에서는 더 투명 + 살짝 더 블러 */
.topbar.is-over-hero:not(.is-solid){
  background: var(--topbar-bg-hero);
  -webkit-backdrop-filter: saturate(120%) blur(12px);
  backdrop-filter: saturate(120%) blur(12px);
  border-bottom-color: rgba(255,255,255,.08);
}

/* 스크롤 후(또는 드로어 열릴 때) 완전 불투명 */
.topbar.is-solid{
  background:#000;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border-bottom-color: rgba(255,255,255,.12);
}

/* 로고 */
.topbar .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.topbar .logo{ height:var(--logo-h); width:auto; display:block; }

/* 데스크톱 GNB */
.gnb{ display:flex; gap:28px; align-items:center; }
.gnb a{
  color:#fff; text-decoration:none; font-weight:800; letter-spacing:-.01em;
  padding:8px 4px; border-radius:8px; opacity:.95;
}
.gnb a:hover{ background:rgba(255,255,255,.12); opacity:1; }

/* 햄버거 */
.hamburger{
  display:none; position:relative; width:44px; height:44px;
  border:0; background:transparent; cursor:pointer;
}
.hamburger span{
  position:absolute; left:50%; width:22px; height:2px; border-radius:2px;
  background:#fff; transform:translateX(-50%); transition:.25s;
}
.hamburger span:first-child{ top:17px; }
.hamburger span:last-child { top:25px; }

/* 모바일 드로어 (헤더 아래에서 시작) */
.gnb-drawer{
  display:none;
  position:fixed; left:0; right:0; top:var(--header-h);
  z-index:99999;
  background:#000; color:#fff; padding:16px;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.topbar.is-open .gnb-drawer{ display:block; }

/* 반응형 */
@media (max-width:1024px){
  .gnb{ display:none; }
  .hamburger{ display:block; }
}

/* (보호) 로고/브랜드 배경 제거 */
.topbar .logo, .topbar .brand{ background: transparent !important; }

/* 모바일에서 블러/투명도 보정 */
@media (max-width:768px){
  :root{
    --topbar-blur: 8px;
    --topbar-bg: rgba(0,0,0,.68);
    --topbar-bg-hero: rgba(0,0,0,.52);
  }
}