/* ============================================================
   도야 사이트 헤더 정본 — 3종
   A 한 줄 · B 중앙 메뉴 · C 캡슐(플로팅)
   ------------------------------------------------------------
   규칙
   · 영어 표기 없음 · 버전/상태 배지 없음 · 상단 커맨드 스트립 없음
   · 황동은 1px 라인 전용(테두리·밑줄·구분선). 면 채움 금지
   · 채움 버튼 = 다크 버건디 / 글자 강조 = 파스텔 로즈
   · 토큰은 페이지 정본을 먼저 따르고, 없으면 버건디 기본값으로 떨어진다
   붙여넣기
   · <link rel="stylesheet" href="header.css">
   · <script src="header.js" defer></script>   (B·C 모바일 메뉴 · 스크롤 상태)
   ============================================================ */

.hd{
  /* 페이지 정본 토큰 우선, 없으면 버건디 기본값 */
  --hd-bg:            var(--bg, #0B0B0D);
  --hd-panel:         var(--panel-2, #1D1C22);
  --hd-text:          var(--text, #EFEBE3);
  --hd-text-2:        var(--text-2, #B9B3A8);
  --hd-muted:         var(--muted, #8A8478);
  --hd-primary:       var(--primary, #6E1423);
  --hd-primary-br:    var(--primary-bright, #8A2030);
  --hd-accent-text:   var(--accent-text, #E6A9B0);
  --hd-brass:         var(--brass, #A8895C);
  --hd-brass-line:    var(--brass-line, rgba(168,137,92,0.55));
  --hd-brass-soft:    var(--brass-soft, rgba(168,137,92,0.26));
  --hd-border:        var(--border, #2A2830);
  --hd-hairline:      var(--hairline, #1A191F);
  --hd-maxw:          var(--maxw, 1120px);
  --hd-h: 64px;

  position:sticky; top:0; z-index:60;
  color:var(--hd-text);
  line-height:1.4;
  font-family:Pretendard,"Pretendard Variable",-apple-system,BlinkMacSystemFont,"Segoe UI","Malgun Gothic",sans-serif;
}
.hd *{box-sizing:border-box}
.hd a{text-decoration:none;color:inherit}
.hd a:hover{text-decoration:none}
.hd :focus-visible{outline:2px solid var(--hd-brass);outline-offset:3px;border-radius:6px}

.hd-wrap{max-width:var(--hd-maxw);margin:0 auto;padding:0 24px;position:relative}

/* ── 브랜드 ───────────────────────────────────────────────── */
.hd-brand{display:inline-flex;align-items:center;gap:11px;font-weight:800;font-size:17.5px;
  letter-spacing:-0.01em;color:var(--hd-text);white-space:nowrap}
.hd-brand:hover{color:var(--hd-accent-text)}
.hd-mark{flex:0 0 auto;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  background:linear-gradient(155deg,var(--hd-primary-br),var(--hd-primary));
  border:1px solid var(--hd-brass-line);color:#fff;font-size:14.5px;font-weight:800;line-height:1}
.hd-dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;
  background:var(--hd-primary-br);box-shadow:0 0 0 1px var(--hd-brass-line)}

/* ── 메뉴 ─────────────────────────────────────────────────── */
.hd-nav{display:flex;align-items:center;gap:26px}
.hd-nav a{position:relative;font-size:14.5px;font-weight:600;color:var(--hd-text-2);padding:6px 1px;
  transition:color .14s ease}
.hd-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--hd-brass);
  transform:scaleX(0);transform-origin:left;transition:transform .18s ease}
.hd-nav a:hover{color:var(--hd-text)}
.hd-nav a:hover::after{transform:scaleX(1)}
.hd-nav a[aria-current="page"]{color:var(--hd-text)}
.hd-nav a[aria-current="page"]::after{transform:scaleX(1)}

/* ── 버튼 ─────────────────────────────────────────────────── */
.hd-actions{display:flex;align-items:center;gap:9px}
.hd-btn{display:inline-flex;align-items:center;gap:8px;border-radius:8px;padding:9px 17px;
  font-size:14px;font-weight:700;white-space:nowrap;cursor:pointer;border:1px solid var(--hd-brass-line);
  background:linear-gradient(160deg,var(--hd-primary-br),var(--hd-primary));color:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.12);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, color .12s ease}
.hd-btn:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(0,0,0,0.36), inset 0 1px 0 rgba(255,255,255,0.16)}
.hd-btn.is-ghost{background:transparent;color:var(--hd-text-2);border-color:var(--hd-border);box-shadow:none}
.hd-btn.is-ghost:hover{color:var(--hd-accent-text);border-color:var(--hd-brass-soft);box-shadow:none}

/* ── 모바일 토글 버튼 ─────────────────────────────────────── */
.hd-burger{display:none;width:38px;height:38px;border-radius:8px;background:transparent;
  border:1px solid var(--hd-border);cursor:pointer;padding:0;place-items:center;gap:5px;
  grid-auto-flow:row;transition:border-color .12s ease}
.hd-burger:hover{border-color:var(--hd-brass-soft)}
.hd-burger i{display:block;width:16px;height:1.5px;background:var(--hd-text-2);border-radius:2px;
  transition:transform .18s ease, opacity .18s ease}
.hd.is-open .hd-burger i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hd.is-open .hd-burger i:nth-child(2){opacity:0}
.hd.is-open .hd-burger i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ============================================================
   A. 한 줄 — 좌 브랜드 / 우 메뉴 + 버튼
   도구·랜딩·소개 페이지 기본값. 제일 무난하다.
   ============================================================ */
.hd-a{background:rgba(11,11,13,0.82);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hd-hairline);transition:border-color .16s ease}
.hd-a.is-stuck{border-bottom-color:var(--hd-brass-soft)}
.hd-a .hd-wrap{display:flex;align-items:center;gap:26px;height:var(--hd-h)}
.hd-a .hd-brand{margin-right:auto}

/* ============================================================
   B. 중앙 메뉴 — 좌 이름 / 가운데 메뉴 / 우 버튼
   메뉴가 3개 이상인 문서·가이드형 사이트에 어울린다.
   ============================================================ */
.hd-b{background:rgba(11,11,13,0.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hd-hairline);transition:border-color .16s ease}
.hd-b.is-stuck{border-bottom-color:var(--hd-brass-soft)}
.hd-b .hd-wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:var(--hd-h);gap:18px}
.hd-b .hd-nav{justify-self:center;gap:30px}
.hd-b .hd-actions{justify-self:end}

/* ============================================================
   C. 캡슐(플로팅) — 배경 위에 떠 있는 둥근 바
   히어로가 강한 랜딩·제품 소개 페이지용. 가장 고급스럽다.
   ============================================================ */
.hd-c{background:transparent;padding:14px 0}
.hd-c .hd-bar{display:flex;align-items:center;gap:24px;height:56px;padding:0 10px 0 22px;
  border-radius:999px;border:1px solid var(--hd-brass-soft);
  background:rgba(16,15,19,0.72);backdrop-filter:blur(12px) saturate(1.05);
  transition:background .16s ease, border-color .16s ease, box-shadow .16s ease}
.hd-c.is-stuck .hd-bar{background:rgba(11,11,13,0.92);border-color:var(--hd-brass-line);
  box-shadow:0 10px 30px rgba(0,0,0,0.45)}
.hd-c .hd-brand{margin-right:auto;font-size:17px}
.hd-c .hd-nav{gap:24px}
.hd-c .hd-rule{width:1px;height:20px;background:var(--hd-brass-soft);flex:0 0 auto}

/* ── 반응형 ───────────────────────────────────────────────── */
@media (max-width:860px){
  .hd{--hd-h:58px}
  .hd-wrap{padding:0 18px}
  .hd-brand{font-size:16.5px}

  /* A : 메뉴는 접고 버튼만 남긴다(가장 담백) */
  .hd-a .hd-nav{display:none}

  /* B : 가운데 메뉴 → 토글 패널 */
  .hd-b .hd-wrap{display:flex;justify-content:space-between}
  .hd-b .hd-nav{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;
    align-items:stretch;gap:0;padding:6px 18px 14px;background:rgba(11,11,13,0.97);
    border-bottom:1px solid var(--hd-brass-soft)}
  .hd-b.is-open .hd-nav{display:flex}
  .hd-b .hd-nav a{padding:12px 2px;font-size:15px;border-bottom:1px solid var(--hd-hairline)}
  .hd-b .hd-nav a:last-child{border-bottom:0}
  .hd-b .hd-nav a::after{display:none}
  .hd-b .hd-burger{display:grid}
  .hd-b .hd-actions .hd-btn.is-ghost{display:none}

  /* C : 캡슐 유지 + 토글 패널 */
  .hd-c{padding:10px 0}
  .hd-c .hd-bar{height:52px;padding:0 8px 0 18px;gap:12px}
  .hd-c .hd-rule{display:none}
  .hd-c .hd-nav{position:absolute;left:18px;right:18px;top:calc(100% + 8px);display:none;
    flex-direction:column;align-items:stretch;gap:0;padding:8px 16px 12px;border-radius:16px;
    border:1px solid var(--hd-brass-soft);background:rgba(11,11,13,0.97);
    box-shadow:0 14px 34px rgba(0,0,0,0.5)}
  .hd-c.is-open .hd-nav{display:flex}
  .hd-c .hd-nav a{padding:12px 2px;font-size:15px;border-bottom:1px solid var(--hd-hairline)}
  .hd-c .hd-nav a:last-child{border-bottom:0}
  .hd-c .hd-nav a::after{display:none}
  .hd-c .hd-burger{display:grid;width:36px;height:36px}
}
@media (max-width:420px){
  .hd-btn{padding:8px 13px;font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){
  .hd *{transition:none !important}
}

/* ── (선택) 네이비 체계로 쓸 때 ────────────────────────────
   페이지 정본에 이미 네이비 토큰이 있으면 이 블록은 지운다.
   황동은 두 체계 공통이라 건드리지 않는다. */
html[data-theme="navy"] .hd{
  --hd-primary:#15325E; --hd-primary-br:#1E4A86; --hd-accent-text:#9FC2E8;
}