/* ==========================================================================
   디자인 토큰 — A안 「검수대장」
   색 · 글꼴 · 글자 크기 · 줄간격 · 간격 · 모서리 · 선 · 그림자 · z-index ·
   모션 · 아이콘 · 레이아웃 치수. app.css 는 이 변수만 사용한다.
   ========================================================================== */
:root {
  /* ===== 색 ===== */
  --color-bg: #f7f7f4;
  --color-surface: #ffffff;
  --color-surface-alt: #fafbf8;
  --color-soft: #f0f2ed;
  --color-hover: #eef1eb;
  --color-image: #e6eae5;

  --color-ink: #17201c;
  --color-ink-soft: #2b3831;
  --color-ink-mute: #46534c;
  --color-muted: #5a665f;
  --color-line: #dce1db;
  --color-line-strong: #c4ccc4;

  --color-green: #0b5b45;
  --color-green-dark: #084333;
  --color-green-soft: #e8eee9;
  --color-on-green: #ffffff;
  --color-on-green-muted: #d6e4de;
  --color-cta-media: #083e2f;

  --color-dot-muted: #8b958e;

  --color-danger: #9e3b2e;
  --color-danger-dark: #7f2e23;
  --color-danger-soft: #f6e9e6;
  --color-warn: #80601b;
  --color-warn-soft: #f4efe1;

  --color-white: #ffffff;
  --color-white-96: rgba(255, 255, 255, 0.96);
  --color-white-60: rgba(255, 255, 255, 0.6);
  --color-white-22: rgba(255, 255, 255, 0.22);

  --color-ink-a05: rgba(23, 32, 28, 0.05);
  --color-ink-a08: rgba(23, 32, 28, 0.08);
  --color-ink-a12: rgba(23, 32, 28, 0.12);
  --color-ink-a16: rgba(23, 32, 28, 0.16);
  --color-ink-a24: rgba(23, 32, 28, 0.24);
  --color-ink-a45: rgba(23, 32, 28, 0.45);

  --color-line-a75: rgba(220, 225, 219, 0.75);

  /* ===== 그라디언트 ===== */
  --gradient-proof: linear-gradient(180deg, rgba(11, 91, 69, 0.05) 0%, rgba(11, 91, 69, 0.38) 100%);
  --gradient-cta: linear-gradient(90deg, rgba(11, 91, 69, 0.7), rgba(11, 91, 69, 0.2));
  --gradient-skeleton: linear-gradient(90deg, rgba(220, 225, 219, 0) 0%, rgba(220, 225, 219, 0.75) 50%, rgba(220, 225, 219, 0) 100%);

  /* ===== 글꼴 ===== */
  --font-sans: 'IBM Plex Sans KR', 'Pretendard Variable', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ===== 글자 크기 단계 ===== */
  --fs-2xs: 10px;
  --fs-2xs-plus: 10.5px;
  --fs-xs: 11px;
  --fs-xs-plus: 11.5px;
  --fs-sm: 12px;
  --fs-sm-plus: 12.5px;
  --fs-md: 13px;
  --fs-md-plus: 13.5px;
  --fs-base: 14px;
  --fs-base-plus: 14.5px;
  --fs-lg: 15.5px;
  --fs-xl: 16px;
  --fs-2xl: 20px;
  --fs-3xl: 22px;
  --fs-4xl: 26px;
  --fs-hero: clamp(34px, 4.4vw, 54px);
  --fs-hero-md: clamp(32px, 7vw, 44px);
  --fs-hero-sm: 30px;

  /* ===== 줄간격 ===== */
  --lh-none: 1;
  --lh-tight: 1.05;
  --lh-snug: 1.1;
  --lh-hero: 1.2;
  --lh-heading: 1.3;
  --lh-medium: 1.45;
  --lh-normal: 1.6;
  --lh-relaxed: 1.65;
  --lh-loose: 1.75;
  --lh-footer: 1.9;

  /* ===== 자간 ===== */
  --ls-tight: -0.045em;
  --ls-tight-2: -0.035em;
  --ls-tight-3: -0.025em;
  --ls-tight-4: -0.02em;
  --ls-tight-5: -0.01em;
  --ls-wide: 0.08em;
  --ls-wider: 0.12em;
  --ls-widest: 0.18em;

  /* ===== 간격 단계 ===== */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-26: 26px;
  --space-28: 28px;
  --space-30: 30px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-44: 44px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-72: 72px;

  /* ===== 모서리 ===== */
  --radius-2: 2px;
  --radius-3: 3px;
  --radius-4: 4px;
  --radius-full: 999px;

  /* ===== 선 ===== */
  --bw-1: 1px;
  --bw-2: 2px;
  --bw-3: 3px;
  --border-hairline: var(--bw-1) solid var(--color-line);
  --border-strong: var(--bw-1) solid var(--color-line-strong);
  --border-accent: var(--bw-1) solid var(--color-green);
  --border-danger: var(--bw-1) solid var(--color-danger);

  /* ===== 그림자 (A안은 원칙적으로 그림자 없음) ===== */
  --shadow-none: none;
  --shadow-pop: 0 8px 24px var(--color-ink-a12);
  --shadow-toast: 0 10px 30px var(--color-ink-a16);
  --shadow-modal: 0 24px 60px var(--color-ink-a24);
  --shadow-ring: 0 0 0 var(--bw-3) var(--color-green-soft);
  --shadow-ring-danger: 0 0 0 var(--bw-3) var(--color-danger-soft);

  /* ===== z-index ===== */
  --z-base: 1;
  --z-raised: 2;
  --z-header: 50;
  --z-subnav: 60;
  --z-overlay: 100;
  --z-modal: 110;
  --z-toast: 120;
  --z-skip: 200;

  /* ===== 모션 ===== */
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 600ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --delay-step: 60ms;

  /* ===== 아이콘 ===== */
  --icon-sm: 16px;
  --icon-md: 18px;
  --icon-lg: 20px;
  --icon-xl: 22px;
  --icon-stroke: 1.5;
  --icon-touch: 44px;

  /* ===== 레이아웃 ===== */
  --layout-max: 1280px;
  --gutter: 40px;
  --gutter-sm: 20px;
  --gutter-xs: 16px;
  --measure: 520px;
  --measure-narrow: 440px;

  /* ===== 컴포넌트 치수 ===== */
  --gnb-height: 76px;
  --gnb-height-sm: 64px;
  --util-height: 36px;
  --control-height: 48px;
  --control-height-sm: 36px;
  --icon-btn-size: 40px;
  --check-size: 18px;
  --tab-height: 44px;
  --post-col-board: 88px;
  --post-col-author: 76px;
  --post-col-comment: 56px;
  --column-thumb-w: 104px;
  --column-thumb-h: 82px;
  --column-thumb-w-sm: 88px;
  --column-thumb-h-sm: 72px;
  --proof-media-min: 280px;
  --proof-media-w: 360px;
  --proof-media-w-md: 300px;
  --proof-media-h-sm: 240px;
  --proof-media-h-xs: 200px;
  --cta-media-w: 380px;
  --cta-media-h-sm: 180px;
  --hero-media-max: 620px;
  --modal-max: 480px;
  --toast-max: 360px;
  --skeleton-line: 12px;
  --ratio-thumb: 4 / 3;
}