/* ============================================================
   Wellness HealthCare — Shared Header CSS v1.0
   Source of truth: components/header.{ko,en,zh}.html
   Edit this file → run `node scripts/build-components.js`
   ============================================================ */

/* Header — wide IR style v3 (cushioned + lang dropdown right-anchored + mobile compact) */
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);height:var(--hdr-h)}
.hdr-inner{max-width:100%;margin:0 auto;padding:0 40px;height:100%;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:14px;font-weight:800;font-size:28px;line-height:1.1;letter-spacing:-0.02em;color:var(--ink)}
.brand span{line-height:1.1}
.brand img{width:30px;height:30px;object-fit:contain}
.brand .brand-leaf{width:42px;height:42px;object-fit:contain;flex-shrink:0}
nav.main{display:flex;gap:22px;margin-left:auto;font-size:17px;font-weight:500;color:var(--ink-2)}
.nav-item{position:relative}
.nav-item > a,.nav-item > button{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:18px 8px;border-radius:8px;color:var(--ink-2);font-weight:500;transition:color .2s,background .2s}
.nav-item > a:hover,.nav-item > button:hover{color:var(--brand)}
.nav-item[aria-current="page"] > a,.nav-item.is-active > a,
.nav-item[aria-current="page"] > button,.nav-item.is-active > button{color:var(--brand);box-shadow:inset 0 -2px 0 var(--brand);border-radius:4px}
.nav-item > button .chev{width:10px;height:10px;transition:transform .2s;opacity:.6}
.nav-item.open > button .chev{transform:rotate(180deg)}
.submenu{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(-4px);min-width:280px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-float);padding:10px;opacity:0;visibility:hidden;transition:opacity .18s,transform .18s,visibility .18s;border-top:3px solid var(--brand);z-index:60}
.nav-item.open > .submenu,.nav-item:hover > .submenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.submenu a{display:block;padding:12px 14px;border-radius:8px;color:var(--ink);font-size:14.5px;font-weight:600;line-height:1.4;transition:background .15s}
.submenu a .sub-desc{display:block;font-size:12.5px;color:var(--muted);font-weight:400;margin-top:3px}
.submenu a:hover{background:var(--bg-3);color:var(--brand)}
.submenu a.sub-faq{margin-top:6px;border-top:1px solid var(--line-2);padding-top:14px;color:var(--accent);font-weight:600}
.submenu a.sub-faq:hover{background:rgba(3,105,161,.06);color:var(--accent)}
.submenu a.sub-faq .sub-desc{color:var(--muted)}
.hdr-ctas{display:flex;gap:12px;align-items:center}
.cta-sm{padding:12px 24px;background:var(--ink);color:#fff;border-radius:999px;font-size:14.5px;font-weight:600;white-space:nowrap;transition:transform .15s,background .2s}
.cta-sm:hover{background:var(--brand);transform:translateY(-1px)}
.cta-sm.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.cta-sm.ghost:hover{background:var(--bg-3);color:var(--brand);border-color:var(--brand)}

/* Language dropdown (KO style — KO/EN/中, 추후 JP 확장 대비) */
.lang-switch.nav-item > button{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink-2);font-size:14px;font-weight:600;cursor:pointer;transition:color .2s,background .2s,border-color .2s}
.lang-switch.nav-item > button:hover{color:var(--brand);border-color:var(--brand);background:var(--bg-3)}
.lang-switch.nav-item .lang-globe{width:16px;height:16px;opacity:.7;flex-shrink:0}
.lang-switch.nav-item .lang-current{font-family:var(--font-eng);letter-spacing:0;text-transform:none}
/* lang-submenu: 우측 정렬 (가운데 정렬은 화면 밖으로 잘림) */
.lang-submenu{left:auto;right:0;transform:translateY(-4px);min-width:220px}
.lang-switch.nav-item.open > .lang-submenu,.lang-switch.nav-item:hover > .lang-submenu{transform:translateY(0)}
.lang-submenu a{position:relative;padding-left:38px}
.lang-submenu a.active{color:var(--brand);background:var(--bg-3)}
.lang-submenu a.active::before{content:"";position:absolute;left:14px;top:50%;width:14px;height:14px;transform:translateY(-50%);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6E4F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");background-repeat:no-repeat;background-position:center}

.menu-btn{display:none;padding:8px;color:var(--ink)}

/* Responsive */
@media(max-width:1280px){
  :root{--hdr-h:96px}
  .hdr-inner{padding:0 28px;gap:20px}
  nav.main{gap:18px;font-size:16px}
  .nav-item > a,.nav-item > button{padding:14px 6px}
  .brand{font-size:26px}.brand img{width:27px;height:27px}
  .brand .brand-leaf{width:38px;height:38px}
  .cta-sm{padding:11px 20px;font-size:14px}
}
@media(max-width:1040px){.hdr-ctas .cta-sm.ghost{display:none}}
@media(max-width:900px){
  :root{--hdr-h:72px}
  .hdr-inner{padding:0 20px;gap:14px}
  .brand{font-size:18px;gap:8px}.brand img{width:22px;height:22px}
  .brand .brand-leaf{width:28px;height:28px}
  nav.main{display:none}
  .menu-btn{display:block;margin-left:auto;order:99}
  .hdr-ctas{display:flex;gap:8px}
  .hdr-ctas .cta-sm.ghost{display:none}
  .cta-sm{padding:9px 16px;font-size:13.5px}
  .lang-switch.nav-item > button{padding:8px 12px;font-size:13px;gap:6px}
  .lang-switch.nav-item .lang-globe{width:14px;height:14px}
  .lang-submenu{min-width:170px}
  nav.main.open{display:flex;position:absolute;top:var(--hdr-h);left:0;right:0;flex-direction:column;gap:0;background:#fff;border-bottom:1px solid var(--line);padding:8px 0;max-height:calc(100vh - var(--hdr-h));overflow-y:auto}
  nav.main.open .nav-item{width:100%}
  nav.main.open .nav-item > a,nav.main.open .nav-item > button{width:100%;padding:16px 24px;border-bottom:1px solid var(--line-2);border-radius:0;justify-content:space-between}
  nav.main.open .submenu{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:0;border-radius:0;padding:0 0 8px 24px;min-width:0;display:none}
  nav.main.open .nav-item.open > .submenu{display:block}
  nav.main.open .submenu a{padding:12px 20px}
}
@media(max-width:560px){
  .lang-switch.nav-item .lang-current{display:none}
  .lang-switch.nav-item > button{padding:8px 10px;gap:4px}
  .lang-switch.nav-item .chev{width:9px;height:9px}
}

/* ───── 일본어 전용 (긴 가타카나 라벨 + 영문 브랜드 wrapping 방지) ───── */
html[lang="ja"] .hdr-inner{gap:18px;padding:0 24px}
html[lang="ja"] .brand{font-size:22px;line-height:1.05;white-space:nowrap}
html[lang="ja"] .brand span{font-size:22px}
html[lang="ja"] .brand img{width:26px;height:26px}
html[lang="ja"] .brand .brand-leaf{width:36px;height:36px}
html[lang="ja"] nav.main{gap:14px;font-size:15px}
html[lang="ja"] .nav-item > a,
html[lang="ja"] .nav-item > button{padding:14px 4px}
html[lang="ja"] .lang-switch.nav-item > button{padding:9px 12px;font-size:13px;gap:6px}
html[lang="ja"] .cta-sm{padding:10px 18px;font-size:13.5px}
@media(max-width:1280px){
  html[lang="ja"] .hdr-inner{gap:14px;padding:0 18px}
  html[lang="ja"] nav.main{gap:10px;font-size:14px}
  html[lang="ja"] .nav-item > a,
  html[lang="ja"] .nav-item > button{padding:12px 3px}
}