/* 공용 헤더(_site_header.html) 전용 스타일 — 모든 페이지가 이 파일 하나만 사용합니다.
   드롭다운/메가메뉴 내부(.nav-dd-mega, .nav-mega-menu 등)는 nav_menu.css/nav_mega.css가
   이미 전 페이지 공용이라 여기서 건드리지 않고, 이 파일은 바깥 껍데기(.hd/.shell/.logo/
   .header-actions/.hd-burger)만 담당합니다.
   페이지마다 색상 변수 이름이 달라서(--green/--primary, --brown/--muted 등) fallback 체인으로 흡수합니다.
   헤더 폭이 다른 페이지(product-demo, mypage 등)는 --header-max 변수만 재정의해서 맞춥니다. */
header.hd{
  position:sticky;
  top:0;
  z-index:30;
  background:#fff;
  border-bottom:0;
  --header-max:var(--site-max, 1080px);
}
header.hd .shell{
  box-sizing:border-box;
  width:min(var(--header-max), calc(100% - 48px));
  max-width:var(--header-max);
  margin:0 auto;
  padding:0;
  display:flex;
  align-items:center;
  gap:18px;
  height:64px;
}
header.hd .logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:19px;letter-spacing:-.02em;color:#2B3F32;text-decoration:none}
header.hd .logo .logo-mark{width:30px;height:30px;flex:none;display:block}
header.hd .logo .logo-word{font-family:var(--ff-head, inherit)}
header.hd .nav{display:flex;align-items:center;gap:20px;margin-left:14px}
header.hd .nav a{color:#333;font-size:14px;font-weight:600}
header.hd .nav a:hover,header.hd .nav a.on{color:var(--green, var(--primary, #2B3F32))}
header.hd .header-actions{display:flex;align-items:center;gap:14px;margin-left:auto}
header.hd .header-auth-link{color:#333;font-size:14px;font-weight:600}
header.hd .header-auth-link:hover{color:var(--green, var(--primary, #2B3F32))}
header.hd .header-account{color:#333;font-size:13.5px;font-weight:600}
header.hd .header-cta{background:var(--point, #1db954);color:#fff;padding:10px 20px;border-radius:999px;font-size:14px;font-weight:700;white-space:nowrap;line-height:1.3}
header.hd .header-cta:hover{background:var(--point-d, #17a449)}
header.hd .mobile-nav-auth{display:none}

.hd-burger{display:none;flex-direction:column;justify-content:center;align-items:flex-end;gap:4px;width:28px;height:40px;margin-right:0;background:none;border:0;cursor:pointer;padding:9px 0}
.hd-burger span{display:block;width:22px;height:2px;background:#2B3F32;border-radius:2px;transition:transform .2s,opacity .2s}
header.hd.nav-open .hd-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
header.hd.nav-open .hd-burger span:nth-child(2){opacity:0}
header.hd.nav-open .hd-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media(max-width:920px){
  header.hd .nav{display:none}
  header.hd .shell{width:min(var(--header-max), calc(100% - 40px))}
}
@media(max-width:760px){
  header.hd .shell{gap:10px}
  header.hd .header-actions{gap:8px}
  header.hd .header-auth-link,header.hd .header-account{display:none}
  header.hd .header-cta{padding:9px 12px;max-width:112px;overflow:hidden;text-overflow:ellipsis}
  .hd-burger{display:inline-flex}
  header.hd.nav-open .nav{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line, #e1e7e3);padding:14px 22px;gap:6px;box-shadow:0 16px 30px rgba(43,63,50,.12);z-index:35}
  header.hd.nav-open .nav a{font-size:16px;font-weight:700;color:#333;padding:8px 0}
  header.hd.nav-open .nav a:hover{color:var(--green, var(--primary, #2B3F32))}
  header.hd.nav-open .mobile-nav-auth{display:flex;flex-direction:column;gap:8px;margin-top:6px;padding-top:12px;border-top:1px solid var(--line, #e1e7e3)}
  header.hd.nav-open .mobile-nav-auth a,
  header.hd.nav-open .mobile-nav-auth span{font-size:15px;font-weight:800;padding:9px 0;color:#333}
  header.hd.nav-open .mobile-nav-auth .mobile-auth-cta{display:none}
  header.hd.nav-open .mobile-nav-auth .mobile-auth-account{color:var(--faint, var(--muted, #777777));font-size:13px;padding-bottom:2px}
  header.hd.nav-open .mobile-nav-auth .mobile-auth-link{display:block}
}