/* ==========================================================================
   Mother Design — 디자인 토큰 (정규화 추출본)
   원본: motherdesign.com · 추출일 2026-07-15
   SCSS 산식 잔재(clamp(30*1px,60*1vw/1440*100,80*1px))를 표준 clamp()로 정규화.
   폰트는 상용 라이선스(Basis/Colophon)라 대체 스택으로 매핑.
   ========================================================================== */

:root {
  /* ---- 컬러: 완전 모노크롬. 브랜드 액센트 없음 ------------------------- */
  --md-dark: #000;
  --md-light: #fff;
  --md-bg: var(--md-light);
  --md-text: var(--md-dark);
  --md-text-muted: #808080;        /* 캡션 2행 */
  --md-grey-light: #f4f4f4;        /* 섹션 배경 전환 */
  --md-grey-dark: #181818;         /* 다크 섹션 */
  --md-hairline: rgba(0, 0, 0, 0.15);  /* 시그니처 구분선 */

  /* 액센트를 쓴다면 딱 하나만. 둘 이상이면 톤이 무너진다. */
  --md-accent: var(--md-dark);

  /* ---- 폰트: 대체 스택 ------------------------------------------------- */
  --md-font-latin: "Inter", system-ui, sans-serif;
  --md-font-ko: "Pretendard", "Pretendard Variable", system-ui, sans-serif;
  --md-font-main: var(--md-font-ko), var(--md-font-latin);
  --md-font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* weight는 사실상 둘뿐 */
  --md-w-normal: 400;
  --md-w-medium: 600;

  /* ---- 타입 스케일: 의도적으로 빈약함 ---------------------------------- */
  /* 본문·라벨·내비·H2·H3 전부 이 하나 */
  --md-fs-base: 16px;
  --md-lh-base: 1.2;               /* 원본값. 한국어는 --md-lh-ko 사용 */
  --md-ls-base: -0.02em;

  /* 한국어 완화값 — 라틴 전용 페이지가 아니면 이쪽 */
  --md-lh-ko: 1.6;
  --md-ls-ko: -0.01em;

  /* 디스플레이: 리스트용 / 사분면용 */
  --md-fs-display: clamp(32px, 3.7vw, 53.33px);
  --md-fs-mega: clamp(56px, 8.4vw, 121px);
  --md-lh-display: 1;
  --md-ls-display: -0.04em;        /* 커질수록 더 조인다 */

  /* ---- 스페이싱: 유동 clamp (1440 기준 vw 역산) ------------------------ */
  --md-gutter: clamp(16px, 1.389vw, 20px);
  --md-margins: var(--md-gutter);
  --md-v-space: clamp(80px, 13.889vw, 250px);   /* large — 줄이지 말 것 */
  --md-v-space-sm: clamp(30px, 4.167vw, 80px);  /* small */
  --md-v-space-half: calc(var(--md-v-space) / 2);

  /* ---- 레이아웃 -------------------------------------------------------- */
  --md-header-h: 45px;
  --md-narrow-w: 800px;
  --md-max-w: 100%;
  --md-sticky-top: calc(var(--md-margins) * 2 + var(--md-header-h));
  --md-btn-h: 42px;
  --md-radius: 0px;                /* 전부 각짐 */
  --md-border: 1px solid var(--md-dark);

  /* ---- 모션 ------------------------------------------------------------ */
  --md-speed-fast: 0.15s;
  --md-speed: 0.3s;
  --md-speed-slow: 0.6s;
  --md-stagger: 0.05s;
  --md-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* 다크 섹션 반전 */
[data-md-theme="dark"] {
  --md-bg: var(--md-grey-dark);
  --md-text: var(--md-light);
  --md-hairline: rgba(255, 255, 255, 0.15);
}

[data-md-theme="grey"] {
  --md-bg: var(--md-grey-light);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --md-speed-fast: 0.01ms;
    --md-speed: 0.01ms;
    --md-speed-slow: 0.01ms;
    --md-stagger: 0ms;
  }
}