/* =====================================================================
   header.css — Site Header + Adaptive Mega Menu + Mobile Drawer v3
   ===================================================================== */

/* ── Header ─────────────────────────────────────────────── */
.site-header {
  position: sticky; top:0; z-index:200;
  background: rgba(247,245,240,.93);
  backdrop-filter: saturate(1.5) blur(18px);
  -webkit-backdrop-filter: saturate(1.5) blur(18px);
  border-bottom: 1px solid var(--clr-line);
  transition: background var(--dur), border-color var(--dur);
}
.site-header.scrolled {
  background: rgba(247,245,240,.98);
  border-color: var(--clr-line-2);
}
.header-inner {
  max-width: var(--w-full);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  height: var(--header-h);
  display: flex;
  align-items: center;
}

/* 브랜드 */
.brand {
  display:flex; flex-direction:column; line-height:1;
  flex:none; margin-right: clamp(24px,3.2vw,60px);
  text-decoration:none;
}
.brand__name {
  font-size: clamp(14.5px,1.15vw,18px);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-tight);
  color: var(--clr-ink);
  white-space: nowrap;          /* ← 병원명 줄바꿈 방지 */
}
.brand__en {
  font-family:  var(--font-mono);
  font-size:    8px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:        var(--clr-ink-3);
  margin-top:   4px;
}

/* GNB */
.gnb {
  display:flex; align-items:center;
  height:100%; flex:1;
  gap: clamp(8px,1.3vw,26px);
}
.gnb-item {
  height:100%; display:flex; align-items:center;
  position:relative;
}
.gnb-item > a {
  font-size: clamp(12.5px,.88vw,14px);
  font-weight: var(--fw-semibold);
  color: var(--clr-ink-2);
  letter-spacing: -.015em;
  padding: 4px 2px;
  white-space: nowrap;
  position:relative;
  transition: color var(--dur-fast);
}
.gnb-item > a::after {
  content:""; position:absolute; left:0; right:0; bottom:-2px;
  height:1.5px; background:var(--clr-gold);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur) var(--ease-out);
}
.gnb-item:hover > a,
.gnb-item.active > a { color:var(--clr-ink) }
.gnb-item:hover > a::after,
.gnb-item.active > a::after { transform:scaleX(1) }

/* 헤더 우측 */
.header-right {
  display:flex; align-items:center;
  gap:var(--sp-12); margin-left:auto; flex:none;
}

/* 언어 드롭다운 */
.lang-wrap { position:relative }
.lang-btn {
  display:flex; align-items:center; gap:var(--sp-8);
  border:1.5px solid var(--clr-line-2);
  border-radius:var(--r-sm);
  padding:6px 11px;
  font-family:var(--font-mono); font-size:var(--fs-label);
  font-weight:var(--fw-bold); letter-spacing:.06em;
  color:var(--clr-ink-3); cursor:pointer;
  transition:border-color var(--dur-fast), color var(--dur-fast);
}
.lang-btn:hover { border-color:var(--clr-gold); color:var(--clr-ink) }
.lang-btn .globe-ic { width:14px; height:14px; flex:none }
.lang-btn .chev { width:10px; height:10px; transition:transform var(--dur-fast) }
.lang-wrap.open .chev { transform:rotate(180deg) }
.lang-drop {
  position:absolute; top:calc(100% + 8px); right:0;
  background:var(--clr-bg);
  border:1px solid var(--clr-line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  min-width:150px; overflow:hidden;
  opacity:0; visibility:hidden;
  transform:translateY(-6px);
  transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
  z-index:300;
}
.lang-wrap.open .lang-drop { opacity:1; visibility:visible; transform:none }
.lang-drop a {
  display:flex; align-items:center; gap:var(--sp-12);
  padding:11px var(--sp-16);
  font-size:var(--fs-caption); font-weight:var(--fw-medium);
  color:var(--clr-ink-3); transition:background var(--dur-fast), color var(--dur-fast);
}
.lang-drop a:hover { background:var(--clr-bg-2); color:var(--clr-ink) }
.lang-drop a.on { background:var(--clr-bg-2); color:var(--clr-ink); font-weight:var(--fw-bold) }
.lang-drop .flag { font-size:15px }

/* 예약 버튼 */
.header-book {
  background:    var(--clr-dark);
  color:         var(--clr-ink-inv);
  border:        1.5px solid var(--clr-dark);
  border-radius: var(--r-sm);
  padding:       8px 18px;
  font-size:     var(--fs-caption);
  font-weight:   var(--fw-bold);
  letter-spacing:-.01em;
  transition:    background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
  white-space:   nowrap;
}
.header-book:hover { background:var(--clr-dark-2); border-color:var(--clr-dark-2); transform:translateY(-1px) }

/* 햄버거 */
.menu-toggle {
  display:none; flex-direction:column; gap:5px; padding:8px;
}
.menu-toggle span {
  width:22px; height:1.5px;
  background:var(--clr-ink); display:block; transition:var(--dur);
}
.menu-toggle.is-open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg) }
.menu-toggle.is-open span:nth-child(2) { opacity:0; transform:scaleX(0) }
.menu-toggle.is-open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg) }

/* ══════════════════════════════════════════════════════════
   ADAPTIVE MEGA MENU
   - .mega-full   : 콘텐츠 많은 메뉴 (색소·홍조, 청담노엘, TECHNOLOGY)
   - .mega-compact: 콘텐츠 적은 메뉴 (흉터·모공, 리프팅, 스킨부스터)
   ══════════════════════════════════════════════════════════ */
.mega {
  position:   fixed;
  left:0; right:0;
  top:        var(--header-h);
  background: var(--clr-bg);
  border-top: 1px solid var(--clr-line);
  border-bottom:1px solid var(--clr-line);
  box-shadow: var(--shadow-lg);
  opacity:0; visibility:hidden;
  transform:translateY(-8px);
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    visibility var(--dur);
  z-index:190;
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
}
.gnb-item.open > .mega { opacity:1; visibility:visible; transform:none }

/* ── Mega 레이아웃 (flex) ──────────────────────────────────
   그리드 고정 트랙은 메뉴마다 컬럼 수가 달라 패널이 엉뚱한 트랙에
   들어가는 문제가 있어 flex로 전환. 링크 컬럼은 균등 분배,
   이미지 패널은 고정 폭으로 고정한다.
   ───────────────────────────────────────────────────────── */
.mega-full .mega-inner,
.mega-compact .mega-inner {
  max-width: var(--w-full);
  margin-inline: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-32);
}
.mega-full .mega-inner    { padding: var(--sp-32) var(--pad-x) var(--sp-40) }
.mega-compact .mega-inner { padding: var(--sp-28) var(--pad-x) var(--sp-32) }

/* 링크 컬럼 — 남는 폭 균등 분배 */
.mega-col { flex: 1 1 0; min-width: 0 }

/* 컬럼 구분선 */
.mega-col + .mega-col { border-left:1px solid var(--clr-line); padding-left:var(--sp-28) }
.mega-col__head {
  font-family: var(--font-mono);
  font-size:   var(--fs-label); letter-spacing:.18em; text-transform:uppercase;
  color:       var(--clr-gold);
  margin-bottom:var(--sp-16); padding-bottom:var(--sp-12);
  border-bottom:1px solid var(--clr-line);
  white-space: nowrap;
}
.mega-col a {
  display:block; font-size:var(--fs-body); color:var(--clr-ink-3);
  padding:var(--sp-8) 0;
  font-weight:var(--fw-medium);
  word-break:keep-all;
  transition:color var(--dur-fast), padding-left var(--dur-fast) var(--ease-out);
}
.mega-col a:hover { color:var(--clr-ink); padding-left:var(--sp-8) }

/* 이미지 패널 — 고정 폭, 항상 마지막 */
.mega-panel {
  flex: 0 0 280px;
  margin-left: auto;
  border-left:1px solid var(--clr-line);
  padding-left:var(--sp-28);
  display:flex; flex-direction:column;
}
.mega-panel__img {
  aspect-ratio:4/3;
  border-radius:var(--r-md);
  background:var(--clr-bg-3);
  overflow:hidden;
  margin-bottom:var(--sp-16);
}
.mega-panel__img img { width:100%; height:100%; object-fit:cover; display:block }

/* 이미지 미등록 시 — 개발용 placeholder 표기 */
.mega-panel__img.is-empty {
  background: var(--clr-bg-3);
  border: 1.5px dashed var(--clr-line-2);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 5px; text-align: center; padding: 12px;
}
.mega-panel__img.is-empty .ph-t {
  font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--clr-ink-3);
}
.mega-panel__img.is-empty .ph-f {
  font-family:var(--font-mono); font-size:11px; font-weight:600;
  color:var(--clr-gold-dark); word-break:break-all;
}
.mega-panel__img.is-empty .ph-s {
  font-family:var(--font-mono); font-size:10px; color:var(--clr-ink-3);
}

.mega-panel__copy {
  font-size:var(--fs-caption); color:var(--clr-ink-3);
  line-height:var(--lh-normal); margin-bottom:var(--sp-16);
  word-break:keep-all;
}
.mega-panel .btn { font-size:var(--fs-label); padding:9px 16px; align-self:flex-start }

/* TV / MAGAZINE — 링크만 (패널 없이 2열) */
.mega-tv .mega-inner {
  max-width:var(--w-full); margin-inline:auto;
  padding:var(--sp-28) var(--pad-x) var(--sp-32);
  display:flex; align-items:flex-start; gap:var(--sp-32);
}

/* ══════════════════════════════════════════════════════════
   MOBILE DRAWER
   ══════════════════════════════════════════════════════════ */
.drawer {
  position:fixed; inset:0; z-index:250;
  background:var(--clr-bg);
  transform:translateX(100%);
  transition:transform var(--dur-slow) var(--ease-out);
  overflow-y:auto; visibility:hidden;
}
.drawer.open { transform:none; visibility:visible }
.drawer-head {
  display:flex; align-items:center; justify-content:space-between;
  height:var(--header-h); padding:0 var(--pad-x);
  border-bottom:1px solid var(--clr-line);
}
.drawer-close {
  width:40px; height:40px; display:flex; align-items:center;
  justify-content:center; font-size:24px; color:var(--clr-ink);
}
.acc { border-bottom:1px solid var(--clr-line) }
.acc > button {
  width:100%; text-align:left;
  padding:var(--sp-16) var(--pad-x);
  font-size:var(--fs-body); font-weight:var(--fw-bold);
  color:var(--clr-ink); display:flex; justify-content:space-between; align-items:center;
  letter-spacing:-.015em; cursor:pointer;
}
.acc > button .plus { color:var(--clr-gold); font-weight:var(--fw-regular); font-size:22px; transition:transform var(--dur) }
.acc.open > button .plus { transform:rotate(45deg) }
.acc-body { max-height:0; overflow:hidden; transition:max-height var(--dur-slow) var(--ease-out); background:var(--clr-bg-2) }
.acc.open .acc-body { max-height:900px }
.acc-body a { display:block; padding:11px var(--pad-x); font-size:var(--fs-body); color:var(--clr-ink-3) }
.acc-body h6 { padding:14px var(--pad-x) 4px; font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.14em; color:var(--clr-gold); text-transform:uppercase }
.drawer-lang {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:var(--sp-8); padding:var(--sp-20) var(--pad-x);
  border-top:1px solid var(--clr-line);
}
.drawer-lang a {
  display:flex; flex-direction:column; align-items:center;
  gap:var(--sp-4); padding:var(--sp-12) var(--sp-8);
  border:1px solid var(--clr-line); border-radius:var(--r-sm);
  font-size:var(--fs-label); color:var(--clr-ink-3); text-align:center; transition:.2s;
}
.drawer-lang a.on { border-color:var(--clr-gold); color:var(--clr-gold); background:var(--clr-gold-wash) }
.drawer-lang .flag { font-size:18px }

/* ── Responsive ──────────────────────────────────────────── */
@media(max-width:1240px) {
  .mega-full .mega-inner { gap: var(--sp-24) }
  .mega-panel { flex-basis: 240px }
}
@media(max-width:1024px) {
  .gnb, .mega { display:none }
  .menu-toggle { display:flex }
}