:root{
  --header-h: 86px;          /* 기본 높이 */
  --header-sticky-h: 70px;   /* 스크롤 후 높이 */
}

.site-header{
  position: relative;
  top: 0; left: 0; right: 0;
  z-index: 1000;  
  background: var(--white);
  border-bottom: 1px solid var(--line);
  box-sizing: border-box;
  height: var(--header-h);
}

.header_inner{
  height: var(--header-h);
  display:flex; 
  align-items:center; 
}

.brand{ flex:1 1 0; display:flex; align-items:center; }
.nav{   flex:0 0 auto; display:flex; gap:60px; justify-content: space-between;  align-items:center; white-space:nowrap; width: 638px;  }
.call{  display:flex; justify-content:flex-end; align-items:center; gap:10px; width: 290px; }

.nav a{ color: var(--text); font-weight: var(--fw-700); padding:0px 0; font-size: 20px; }
.nav a.active{ color: var(--primary); }   

/* 숨김 텍스트 */
.site-header .brand strong{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.call strong { font-weight: var(--fw-600);   font-size: 20px;}
.brand__logo{
  display:inline-block;
  width:104px; height:50px;
  background:url('/ddok/img/logo-black.svg') center/contain no-repeat;
}

/* ===== sticky 상태(스크립트로 클래스) ===== */
.site-header.sticky { position: fixed; background: var(--white); height: var(--header-sticky-h); border-bottom: 1px solid var(--line);
  box-sizing: border-box;}
.site-header.sticky .header_inner{ height: var(--header-sticky-h); }
.site-header.sticky .brand__logo{ width:88px; height:42px; color: var(--text); font-weight:600; padding:8px 0; background:url('/ddok/img/logo-black.svg') center/contain no-repeat;}
.site-header.sticky .nav a{ color: var(--text);  padding:0px 0;}  
.site-header.sticky .nav a.active{ color: var(--primary); }  
.site-header.sticky .call strong{ color: var(--text); var(--fw-600); }