.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--c-bg);
  border-bottom:1px solid var(--c-line);
}
.site-header__inner{
  max-width:var(--inner-w);
  margin:0 auto;
  padding:0 var(--inner-px);
  height:80px;
  display:flex;align-items:center;justify-content:flex-start;
  gap:var(--gap-sm);
}
.site-header__logo{
  display:flex;align-items:center;flex-shrink:0;
  font-size:20px;font-weight:800;
  letter-spacing:-.03em;
  color:var(--c-primary);
}
.site-header__logo img{height:auto;max-height:var(--logo-h, 36px);width:auto}

/* 로고와 메뉴 사이 여백. 언어 토글 유무와 무관하게 고정된다 */
.site-nav{margin-left:48px}

.site-lang{
  display:flex;align-items:center;
  gap:1px;
  margin-left:auto;
  padding-right:22px;
}
.site-lang__item{
  padding:5px 10px;
  font-size:13px;font-weight:700;
  letter-spacing:.02em;
  color:var(--c-text-mute);
  border-radius:var(--btn-radius);
  transition:var(--tr);
}
.site-lang__item:hover{color:var(--c-primary);background:var(--c-primary-l)}
.site-lang__item.is-active{color:#fff;background:var(--c-primary)}

.site-header__toggle{
  display:none;
  width:40px;height:40px;
  padding:9px 8px;
  margin-left:auto;
  background:none;border:0;cursor:pointer;
  flex-direction:column;justify-content:space-between;
}
.site-header__toggle span{
  display:block;height:2px;width:100%;
  background:var(--c-text);
  transition:var(--tr);
}
.site-header.is-open .site-header__toggle span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.site-header.is-open .site-header__toggle span:nth-child(2){opacity:0}
.site-header.is-open .site-header__toggle span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}


/* ── 헤더 전화번호 ───────────────────────── */
.site-header__tel{
    display:inline-flex;align-items:center;
    gap:10px;
    margin-left:auto;
    white-space:nowrap;
}
.site-header__tel-icon{
    display:inline-flex;align-items:center;justify-content:center;
    width:34px;height:34px;
    border-radius:999px;
    background:var(--c-point);
    color:#fff;
    flex-shrink:0;
}
.site-header__tel-body{display:flex;flex-direction:column;align-items:center;line-height:1.2}
.site-header__tel-body b{
    font-size:19px;font-weight:800;
    letter-spacing:-.02em;
    color:var(--c-primary);
}
.site-header__tel-body small{
    font-size:11px;font-weight:500;
    color:var(--c-text-mute);
}
.site-header__tel-body{display:flex;flex-direction:column;line-height:1.2}
.site-header__tel-body b{
    font-size:22px;font-weight:800;
    letter-spacing:-.02em;
    color:var(--c-primary);
}
.site-header__tel-body small{
    font-size:12px;font-weight:500;
    color:var(--c-text-mute);
}
.site-header__tel:hover .site-header__tel-icon{background:var(--c-primary)}

/* 전화가 이미 오른쪽으로 밀어냈으면 뒤따르는 것들은 그 옆에 붙는다 */
.site-header__tel + .site-lang,
.site-header__tel + .site-header__cta,
.site-header__tel ~ .site-header__toggle{margin-left:0}

.site-header--overlay .site-header__tel-body b{color:#fff}
.site-header--overlay .site-header__tel-body small{color:rgba(255,255,255,.75)}
.site-header--overlay.is-scrolled .site-header__tel-body b{color:var(--c-primary)}
.site-header--overlay.is-scrolled .site-header__tel-body small{color:var(--c-text-mute)}


/* ── 우측 CTA ───────────────────────────── */
.site-header__cta{
    display:inline-flex;align-items:center;
    margin-left:auto;
    padding:9px 20px;border-radius:999px;
    font-size:14px;font-weight:600;white-space:nowrap;
    transition:background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
/* 언어 토글이 이미 오른쪽으로 밀어냈으면 CTA 는 그 옆에 붙는다 */
.site-lang + .site-header__cta{margin-left:0}

.site-header__cta--fill{background:var(--c-point);color:#fff}
.site-header__cta--fill:hover{
    background:var(--c-primary);
    transform:translateY(-1px);
    box-shadow:0 6px 16px rgba(0,0,0,.16);
}

.site-header__cta--outline{border:1px solid currentColor;color:var(--c-primary)}
.site-header__cta--outline:hover{
    background:var(--c-primary);
    border-color:var(--c-primary);
    color:#fff;
}

/* ── 투명 헤더 (메인 전용) ───────────────────
   ⚠️ sticky 가 아니라 fixed 여야 히어로가 화면 최상단부터 시작한다.
      sticky 로 두면 헤더가 자리를 차지해 히어로가 80px 밀린다. */
.site-header--overlay{
  position:fixed;left:0;right:0;top:0;
  background:transparent;
  border-bottom-color:transparent;
  transition:background .25s, box-shadow .25s, border-color .25s;
}
.site-header--overlay .site-nav__link,
.site-header--overlay .site-lang__item,
.site-header--overlay .site-header__logo{color:#fff}

/* ⚠️ 컬러 로고는 흰 실루엣이 된다. 어두운 배경용 로고가 따로 필요하면 이 규칙을 뺀다 */
.site-header--overlay .site-header__logo img{filter:brightness(0) invert(1)}
.site-header--overlay .site-header__toggle span{background:#fff}
.site-header--overlay .site-header__cta--outline{color:#fff;border-color:rgba(255,255,255,.7)}

/* 스크롤 후 = 평소 헤더로 복귀 */
.site-header--overlay.is-scrolled{
  background:var(--c-bg);
  border-bottom-color:var(--c-line);
  box-shadow:0 1px 12px rgba(0,0,0,.08);
}
.site-header--overlay.is-scrolled .site-nav__link,
.site-header--overlay.is-scrolled .site-lang__item{color:var(--c-text)}
.site-header--overlay.is-scrolled .site-header__logo{color:var(--c-primary)}
.site-header--overlay.is-scrolled .site-header__logo img{filter:none}
.site-header--overlay.is-scrolled .site-header__toggle span{background:var(--c-text)}
.site-header--overlay.is-scrolled .site-header__cta--outline{color:var(--c-primary);border-color:currentColor}

/* 하위메뉴가 열리면 흰 배경이 필요하다 — 투명 위에 흰 패널이 뜨면 글자가 안 보인다 */
.site-header--overlay:has(.site-nav__item.has-sub:hover),
.site-header--overlay.is-open{
  background:var(--c-bg);
  border-bottom-color:var(--c-line);
}
.site-header--overlay:has(.site-nav__item.has-sub:hover) .site-nav__link,
.site-header--overlay.is-open .site-nav__link{color:var(--c-text)}
.site-header--overlay:has(.site-nav__item.has-sub:hover) .site-header__logo img,
.site-header--overlay.is-open .site-header__logo img{filter:none}
.site-header--overlay.is-open .site-header__toggle span{background:var(--c-text)}

@media (max-width:1024px){ .site-header__cta{display:none} }
@media (max-width:1024px){
  .site-header__inner{height:60px}
  .site-header__toggle{display:flex}
  .site-nav{margin-left:0}
  .site-lang{padding-right:12px}
  .site-lang__item{padding:4px 8px;font-size:12px}
  .site-header__logo img{max-height:var(--logo-h-m, min(var(--logo-h, 36px), 30px))}
}
@media (max-width:1024px){
  .site-header__tel{gap:7px}
  .site-header__tel-icon{width:28px;height:28px}
  .site-header__tel-body b{font-size:16px}
  .site-header__tel-body small{font-size:9px}
}