/* =========================================================
   base.css — 폰트 · 색 토큰 · 리셋 · 공통 타이포
   색과 치수는 피그마 Website v1 (Desktop-1)에서 실측한 값이다.
   ========================================================= */

/* 이 사이트는 라이트 한 벌로만 디자인돼 있다.
   기기가 다크 모드면 브라우저가 색을 뒤집거나 어둡게 덧칠해(안드로이드 Chrome 자동 다크 등)
   짙은 글씨가 흰 글씨로 바뀌고 배경이 어두워진다 — 시안대로 보이지 않는다 (2026-07-29 Jason).
   light only 로 선언하면 브라우저에 "라이트 전용"임을 알려 자동 변환과 폼·스크롤바의
   다크 처리를 함께 막는다. 각 HTML 의 <meta name="color-scheme"> 와 한 세트다. */
:root { color-scheme: light only; }

/* ---------- 폰트 (로컬 woff2, CDN 의존 없음) ---------- */
@font-face {
  font-family: 'Cal Sans';
  src: url('../fonts/cal-sans-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cairo';
  src: url('../fonts/cairo-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Noto Sans KR';
  src: url('../fonts/noto-kr-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Noto Sans KR';
  src: url('../fonts/noto-kr-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* 색 — 피그마 실측 */
  --navy: #003867;          /* 히어로·푸터 배경 주색 (픽셀 인구조사 64.9%) */
  --navy-dot: #003b6b;      /* 배경 도트 패턴 */
  --pink: #d7357e;
  --orange: #ef9313;
  --cyan: #00a0b9;
  --dark: #1a1a1a;          /* 컨셉 섹션 배경 */
  --muted-title: #727272;   /* CONCEPT SCREENSHOTS 제목 */
  --rule: #ededed;          /* 제목 밑줄 */
  --deco: #ffe8bb;          /* 카드 위 물결 장식 */
  --copyright: #0d709e;
  --white: #ffffff;

  /* 타이포 */
  --font-display: 'Cal Sans', 'Noto Sans KR', system-ui, sans-serif;
  --font-body: 'Inter', 'Noto Sans KR', system-ui, sans-serif;
  --font-mono-ish: 'Cairo', 'Noto Sans KR', system-ui, sans-serif;

  /* 레이아웃 — 피그마 아트보드 1440 기준 */
  --page-max: 1440px;
  --gutter: clamp(20px, 3vw, 44px);

  --radius-phone: 11%;
}

/* 한국어 표시 중에는 본문 폰트를 한글 우선으로 */
html[lang='ko'] {
  --font-display: 'Noto Sans KR', 'Cal Sans', system-ui, sans-serif;
  --font-body: 'Noto Sans KR', 'Inter', system-ui, sans-serif;
}
/* 한국어는 어절 단위로 끊어야 읽힌다. keep-all이 없으면 "디자/인"처럼 낱말이 잘린다
   (1차 한국어 렌더에서 확인) */
html[lang='ko'] body {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ---------- 리셋 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--white);
  background: var(--white);
  line-height: 1.5;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }

:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

/* 접근성 — 스크린리더 전용 */
.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;
}

/* 모션을 줄이도록 설정한 사용자에겐 애니메이션을 끈다 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 공통 컨테이너 ---------- */
.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- 공통 타이포 ---------- */
.t-display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.01em;
}