/* 넥스트성형외과 — 반응형 헤더/메뉴 (draft1 시안과 미러 페이지가 함께 쓰는 공유본).
   여기를 고치면 시안 3장과 미러 전체에 동시에 반영된다. 한쪽만 고치지 말 것.
   색상은 시안에서 그대로 가져왔다: 청록 #35b6c7, 주황 #f8743d, 먹 #232323. */
:root{
  --nx-teal:#35b6c7; --nx-teal-d:#2aa0b0;
  --nx-orange:#f8743d;
  --nx-ink:#232323; --nx-mute:#9d9d9d; --nx-line:#e6e6e6;
  --nx-util:#111111;
  --nx-font:'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',
            'Malgun Gothic',sans-serif;
}
.nx,.nx *{box-sizing:border-box}
.nx{font-family:var(--nx-font);position:sticky;top:0;z-index:900;
    background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.06)}
.nx a{text-decoration:none;color:inherit}
.nx-in{max-width:1440px;margin:0 auto;padding:0 24px;height:100%;
       display:flex;align-items:center}

/* 1행 — 유틸바 */
.nx-util{background:var(--nx-util);height:40px;font-size:13px;color:var(--nx-mute);
         position:relative;z-index:2}
.nx-util .nx-in{justify-content:space-between}
.nx-util nav{display:flex;align-items:center;gap:14px}
.nx-util nav a:hover{color:#fff}
.nx-util .nx-sep{width:1px;height:12px;background:#c8c8c8;opacity:.45}
/* 미러본에 대응 페이지가 없어 누를 수 없는 항목 */
.nx-off{color:#6b6b6b;cursor:default}

/* 2행 — 로고 / 고객센터 */
.nx-brand{background:var(--nx-teal);height:100px;color:#fff}
.nx-brand .nx-in{justify-content:space-between;gap:20px}
.nx-cc{font-size:13px;line-height:1.45;letter-spacing:.02em;min-width:0}
.nx-cc b{display:block;font-size:11px;letter-spacing:.24em;opacity:.85;font-weight:600}
.nx-cc span{font-size:20px;font-weight:600;letter-spacing:-.01em}
.nx-cc span+span{margin-left:12px;font-size:15px;opacity:.9}
.nx-logo{flex:0 0 auto}
.nx-logo img{display:block;width:246px;height:auto}
.nx-brand-r{display:flex;align-items:center;gap:12px;justify-content:flex-end}

/* 3행 — GNB */
.nx-gnb{background:#fff;height:54px;border-bottom:1px solid var(--nx-line)}
.nx-gnb .nx-in{justify-content:center}
.nx-gnb ul{display:flex;list-style:none;margin:0;padding:0;gap:clamp(18px,3.4vw,64px)}
.nx-gnb>.nx-in>ul>li>a{display:flex;align-items:center;height:53px;font-size:16px;
  font-weight:500;color:var(--nx-ink);letter-spacing:-.0275em;white-space:nowrap;
  border-bottom:2px solid transparent;transition:color .12s,border-color .12s}
/* 상태 규칙은 위 기본 규칙과 같은 경로로 써야 한다. .nx-gnb li>a:hover 처럼 짧게 쓰면
   우선순위가 (0,2,2) 로 기본 규칙 (0,2,3) 에 져서 색이 바뀌지 않는다. */
.nx-gnb>.nx-in>ul>li.on>a,
.nx-gnb>.nx-in>ul>li>a:hover{color:var(--nx-teal);border-bottom-color:var(--nx-teal)}

/* 드롭다운 — 항목 아래에 붙는 작은 패널 (위치·폭은 JS 가 잡는다) */
.nx-dd{position:absolute;top:100%;background:#fff;border:1px solid var(--nx-line);
  border-top:2px solid var(--nx-teal);box-shadow:0 12px 24px rgba(0,0,0,.12);
  padding:8px 0;display:none}
.nx.open .nx-dd{display:block}
.nx-dd a{display:block;padding:9px 18px;font-size:14px;color:#555;white-space:nowrap;
  letter-spacing:-.02em;line-height:1.35}
.nx-dd a:hover{color:var(--nx-orange);background:#f6fbfc}

/* 햄버거 */
.nx-burger{display:none;width:44px;height:44px;border:0;background:transparent;
  padding:0;cursor:pointer;align-items:center;justify-content:center;flex:0 0 auto}
.nx-burger i{display:block;width:22px;height:2px;background:#fff;position:relative}
.nx-burger i::before,.nx-burger i::after{content:'';position:absolute;left:0;
  width:22px;height:2px;background:#fff}
.nx-burger i::before{top:-7px} .nx-burger i::after{top:7px}
.nx-tel{display:none;color:#fff;font-size:17px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}

/* 드로어 (좁은 화면) */
.nx-drawer{position:fixed;inset:0;z-index:1000;display:none}
.nx-drawer a{text-decoration:none;color:inherit}
.nx-drawer.open{display:block}
.nx-drawer .sheet{position:absolute;top:0;right:0;bottom:0;width:min(320px,86vw);
  background:#fff;overflow-y:auto;-webkit-overflow-scrolling:touch;
  box-shadow:-8px 0 28px rgba(0,0,0,.22);font-family:var(--nx-font)}
.nx-drawer .scrim{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.nx-drawer .top{background:var(--nx-teal);height:60px;display:flex;align-items:center;
  justify-content:space-between;padding:0 12px 0 16px}
.nx-drawer .top img{width:132px;height:auto;display:block}
.nx-drawer .x{width:40px;height:40px;border:0;background:transparent;color:#fff;
  font-size:26px;line-height:1;cursor:pointer}
.nx-drawer .util{display:flex;gap:12px;padding:12px 16px;background:var(--nx-util);
  color:var(--nx-mute);font-size:13px}
.nx-drawer .util a:hover{color:#fff}
.nx-drawer ul{list-style:none;margin:0;padding:0}
.nx-drawer .cat>button{width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:15px 16px;border:0;border-bottom:1px solid var(--nx-line);background:#fff;
  font:500 15px/1.3 var(--nx-font);color:var(--nx-ink);cursor:pointer;text-align:left;
  letter-spacing:-.02em}
.nx-drawer .cat>button::after{content:'';width:8px;height:8px;flex:0 0 auto;
  border-right:1.6px solid #b0b0b0;border-bottom:1.6px solid #b0b0b0;
  transform:rotate(45deg) translateY(-2px);transition:transform .18s}
.nx-drawer .cat.open>button{color:var(--nx-teal)}
.nx-drawer .cat.open>button::after{transform:rotate(-135deg) translateY(-2px);
  border-color:var(--nx-teal)}
.nx-drawer .sub{display:none;background:#f7f9fa;border-bottom:1px solid var(--nx-line)}
.nx-drawer .cat.open .sub{display:block}
.nx-drawer .sub a{display:block;padding:11px 16px 11px 28px;font-size:14px;color:#5a5a5a;
  border-bottom:1px solid #ecf0f1;letter-spacing:-.02em}
.nx-drawer .sub a:last-child{border-bottom:0}
.nx-drawer .sub a:active,.nx-drawer .sub a:hover{color:var(--nx-orange)}
.nx-drawer .tel{display:block;margin:18px 16px 24px;padding:13px;text-align:center;
  background:var(--nx-orange);color:#fff;border-radius:6px;font-size:16px;font-weight:600}


/* ── 반응형 ─────────────────────────────────────────
   경계 1279 는 header.js 의 BREAK(1280) 와 짝이다. 그 아래에서는 항상 모바일 판이
   뜨므로 헤더도 로고+전화+햄버거만 남긴다. 둘 중 하나만 고치면 모바일 캔버스 위에
   PC 헤더(유틸바+GNB)가 얹히므로 반드시 같이 옮길 것. */
@media (max-width:1279px){
  .nx-util{display:none}
  .nx-gnb{display:none}
  .nx-brand{height:60px}
  .nx-brand .nx-in{padding:0 8px 0 16px;gap:8px}
  .nx-cc{display:none}
  .nx-logo img{width:147px}
  .nx-brand-r{gap:4px}
  .nx-tel{display:block;font-size:15px}
  .nx-burger{display:flex}
}
/* 전화 버튼을 감추는 하한.
   이전 값 479px 는 폰 전부를 덮어 원탭 통화 진입점을 없애고 있었다(2026-09-08 감사).
   그래서 실제로 넘치는 폭까지만 감춘다 — 그때도 드로어 안의 전화 버튼은 남는다.
   2026-09-21 에 브랜드바 오른쪽에 국기(언어 선택기, 41px)가 들어오면서 하한이
   339 → 357 으로 올라갔다. 실측 기준은 둘 중 빡빡한 쪽인 모바일 미러(/ko/m/) —
   358px 부터 가로 넘침 0, 357px 에서 1px 넘친다(시안은 357 까지 0).
   이 줄에 무언가를 더 넣으면 두 판 모두 다시 재어서 고칠 것. */
@media (max-width:357px){
  .nx-tel{display:none}
}

body.nx-lock{overflow:hidden}