/* ═══════════════════════════════════════════════════════════════
   header-fix.css — 상단 메뉴가 우측 [상담 신청]·[플랫폼 접속]을 가리는 문제 정리
   · site.css 뒤에 불러와서 겹쳐진 헤더 규칙들을 한 번에 정리한다.
   · 화면 폭에 따라 메뉴 글자·여백이 자동으로 줄고, 좁아지면 ☰ 메뉴로 전환된다.
   ═══════════════════════════════════════════════════════════════ */

/* 1) 기본: 로고 | 메뉴(남는 폭 안에서 줄어듦) | CTA(우측 끝) */
.hdr .wrap{display:flex;align-items:center;gap:clamp(12px,1.6vw,34px)}
nav.gnb{flex:1 1 auto;min-width:0;margin-right:0;justify-content:flex-start;gap:0}
nav.gnb>div{flex:0 1 auto}
nav.gnb>div>a{white-space:nowrap;font-size:clamp(14.5px,1.2vw,21px);padding:0 clamp(5px,.62vw,12px);letter-spacing:-.035em}
.hdr-cta{flex:0 0 auto;margin-left:auto;padding-left:0;gap:8px}
.hdr-cta .btn{white-space:nowrap}
.hdr-cta .btn-sm{padding:10px clamp(11px,1vw,16px);font-size:clamp(14.5px,1.05vw,16px)}

/* 2) 전화번호는 아주 넓은 화면에서만 */
.hdr-tel{display:none}
@media (min-width:2000px){ .hdr-tel{display:flex} }

/* 3) 1160px 이하: 메뉴가 CTA를 가리기 전에 ☰ 메뉴로 전환 */
@media (max-width:1160px){
  html{scroll-padding-top:78px}
  .burger{display:block;flex:0 0 auto}
  nav.gnb{display:none;position:absolute;top:78px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);
    flex-direction:column;padding:8px;box-shadow:var(--sh);max-height:calc(100vh - 78px);overflow:auto}
  nav.gnb.open{display:flex}
  nav.gnb>div>a{line-height:1.4;padding:14px 14px;font-size:19px;box-shadow:none!important;letter-spacing:-.03em}
  .mega{position:static;transform:none!important;opacity:1;visibility:visible;box-shadow:none;border:0;
    border-left:2px solid var(--line);border-radius:0;margin:0 0 6px 14px;padding:0 0 0 8px;min-width:0}
  .hdr .wrap{gap:12px}
  .hdr-cta{margin-left:auto}
}
/* 4) 아주 좁은 화면: 보조 버튼 숨김 */
@media (max-width:760px){ .hdr-cta .btn-ghost{display:none} }

/* 5) ☰ 모드: 하위 메뉴는 접어 두고, 항목을 누르면 펼침 (header-fix.js) */
@media (max-width:1160px){
  nav.gnb .mega{display:none}
  nav.gnb>div.sub-open .mega{display:block}
  nav.gnb>div>a{display:flex;justify-content:space-between;align-items:center}
  nav.gnb>div:has(.mega)>a::after{content:"▾";font-size:.8em;color:#8696AE;transition:transform .15s}
  nav.gnb>div.sub-open>a::after{transform:rotate(180deg)}
  nav.gnb>div.sub-open>a{color:var(--navy)}
}