/* 헤더/푸터/버튼 컴포넌트 (인벤토리 §6) — 색상은 전부 var(--color-…)만 사용한다 */

/* ── 헤더 ─────────────────────────────────────────── */
.header {
  position: sticky; top: 0; z-index: 50;
  height: 56px;
  background: var(--color-bg-primary);
  border-bottom: 1px solid var(--color-border-default);
}
@media (min-width: 1024px) { .header { height: 72px; } }

.header__inner {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md);
}
/* 로고 — 브랜드 가이드(Chai. Basic Logo, Optional 변형)의 실제 벡터 아웃라인.
   폰트 기본 글리프가 아니라 광학 보정된 커스텀 아웃라인이라(C가 DM Serif 기본형보다
   약 6% 넓다) 텍스트로는 재현할 수 없다. 워드마크는 currentColor로 테마를 따르고
   점만 accent/warm 토큰을 쓴다(가이드의 Optional 변형).
   높이는 기존 텍스트 로고의 잉크 높이(0.719em x 24~28px)와 같게 맞춰
   Figma 헤더의 시각 크기를 유지한다. */
.header__logo {
  display: inline-flex;
  align-items: center;
  color: var(--color-text-primary);
}
.logo-mark {
  display: block;
  height: clamp(17.26px, 16.24px + 0.270vw, 20.13px);
  width: auto;
}
.logo-mark__dot { fill: var(--color-accent-warm); }
.header__nav { display: none; }
@media (min-width: 1024px) {
  .header__nav { display: flex; gap: var(--space-lg); }
}
.header__nav a { color: var(--color-text-secondary); }
.header__nav a:hover { color: var(--color-accent-hover); }
.header__nav a[aria-current="page"],
.header__nav a[aria-current="true"] { color: var(--color-text-primary); }

.header__actions { display: flex; align-items: center; gap: var(--space-sm); }

.theme-toggle {
  display: none;
  width: 40px; height: 40px;
  border: 1px solid var(--color-border-default);
  align-items: center; justify-content: center;
  color: var(--color-accent-default);
}
@media (min-width: 1024px) { .theme-toggle { display: inline-flex; } }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

.menu-toggle { display: flex; flex-direction: column; gap: 5px; width: 20px; }
@media (min-width: 1024px) { .menu-toggle { display: none; } }
.menu-toggle span { display: block; height: 2px; background: var(--color-border-strong); }

/* 모바일 풀스크린 오버레이 — Figma 미설계, 토큰만 사용 */
.mobile-nav {
  position: fixed; inset: 0; z-index: 60;
  background: var(--color-bg-primary);
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--space-lg);
  padding: var(--space-xl) 24px;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav a {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 34px; line-height: 1.1;
  color: var(--color-text-primary);
}
.mobile-nav__close {
  position: absolute; top: 16px; right: 24px;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  color: var(--color-text-primary);
}
.mobile-nav__close svg { width: 20px; height: 20px; }

/* ── 푸터 ─────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--color-border-default);
  padding-block: clamp(32px, 26.37px + 1.502vw, 48px);
}
.footer__inner { display: flex; flex-direction: column; gap: var(--space-xs); }
@media (min-width: 1024px) {
  .footer__inner { flex-direction: row; justify-content: space-between; align-items: center; }
}
.footer p { color: var(--color-text-muted); }

/* ── 버튼 (radius 0, h44 / 모바일 전폭 48) ─────────── */
/* height(고정값, min-height 아님)로 지정해야 flex 부모의 align-items:stretch에
   좌우되지 않고 모든 인스턴스가 동일한 높이를 갖는다. line-height:1로 13px 텍스트가
   패딩 없이도 세로 중앙 정렬되며, box-sizing:border-box(전역)라 outline의 1px
   테두리도 44/48 안에 포함된다. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-xs);
  border-radius: var(--radius-all);
  height: 44px;
  padding: 0 32px;
  line-height: 1;
}
.btn--swiss   { background: var(--color-accent-default); color: var(--color-text-on-accent); }
.btn--swiss:hover { background: var(--color-accent-hover); }
.btn--outline { border: 1px solid var(--color-border-strong); color: var(--color-text-primary); }
.btn--outline:hover { background: var(--color-bg-secondary); }
/* Careers CTA filled 변형은 accent가 아니라 border-strong 채우기 (인벤토리 §6) */
.btn--strong  { background: var(--color-border-strong); color: var(--color-text-on-accent); }
@media (max-width: 1023px) {
  .btn { width: 100%; height: 48px; letter-spacing: 0.5px; text-transform: none; }
}