/* 기본 스타일: 폰트, 리셋, 레이아웃 폭, 타이포 클래스 */
@font-face { font-family: Pretendard; font-weight: 400; font-display: swap; src: url("/fonts/Pretendard-Regular.subset.woff2") format("woff2"); }
@font-face { font-family: Pretendard; font-weight: 500; font-display: swap; src: url("/fonts/Pretendard-Medium.subset.woff2") format("woff2"); }
@font-face { font-family: Pretendard; font-weight: 600; font-display: swap; src: url("/fonts/Pretendard-SemiBold.subset.woff2") format("woff2"); }
@font-face { font-family: Pretendard; font-weight: 700; font-display: swap; src: url("/fonts/Pretendard-Bold.subset.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }

/* 바깥 배경은 네이비: 위(상단 레이어)·아래(푸터) 끝에서 당겨도 회색이 비치지 않게 */
html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg-navy);
  overscroll-behavior-y: none;
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

/* hidden 속성은 어떤 display 규칙보다 우선 (JS가 켜질 때만 보일 탭·복사 버튼 등) */
[hidden] { display: none !important; }

h1, h2, h3, p { margin: 0; }
h1, h2 { text-wrap: balance; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
/* 네이비·어두운 배경 위에서는 밝은 레드로 (#C42F2F는 네이비 대비 2.8:1로 부족) */
.hero :focus-visible, .footer :focus-visible, .drawer-info :focus-visible { outline-color: var(--accent-on-dark); }

/* 최대 폭 + 좌우 여백 (아이폰 가장자리 safe-area 포함) */
.wrap {
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* 타이포 (tokens.json type) */
.t-display { font-size: 48px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
.t-heading { font-size: 32px; line-height: 1.4; font-weight: 700; letter-spacing: -0.01em; }
.t-title { font-size: 20px; line-height: 1.5; font-weight: 700; }
.t-lead { font-size: 18px; line-height: 1.7; font-weight: 400; }
.t-body { font-size: 16px; line-height: 1.7; font-weight: 400; }
.t-eyebrow { font-size: 16px; line-height: 1.7; font-weight: 400; color: var(--accent); }
.t-caption { font-size: 13px; line-height: 1.2; font-weight: 500; letter-spacing: 0.075em; }

@media (max-width: 820px) {
  .t-display { font-size: 32px; }
  .t-heading { font-size: 24px; }
}

/* 화면에서 숨기되 스크린리더에는 읽히게 */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* 동작 줄이기 설정 존중 (애니메이션은 계획 4에서 추가) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}