/* SAI / 사이: shared brand values. Keep aliases for the existing static pages. */
/* Two-stage font: the subset (Latin, punctuation, KS X 1001 Hangul and every character the site uses)
   loads first; the full original file is a separate fallback family that the browser fetches only when
   a character such as a rare Hangul syllable typed by a user is missing from the subset. */
@font-face {
  font-family: 'Pretendard';
  src: url('/assets/PretendardSubset.woff2') format('woff2');
  font-weight: 45 930;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+20A0-20CF, U+2100-21FF, U+2500-27BF, U+3000-303F, U+3130-318F, U+AC00-D7A3;
}
@font-face {
  font-family: 'Pretendard Full';
  src: url('/assets/PretendardVariable.woff2') format('woff2');
  font-weight: 45 930;
  font-display: swap;
}
:root {
  /* Common values: the same names and values as app/globals.css, so the retained pages and the React pages share one palette.
     The --sai-* names below are compatibility aliases of them; do not add colours, shadows or gradients here.
     Status colours stay the only other colours: success #16794A, warning #A15C07, error #C4321C. */
  --accent-brand: #1854CF;
  --accent-hover: #1045B3;
  --accent-soft: #EEF3FD;
  --body: #3D3D3D;
  --muted-text: #6B6B6B;
  --error: #C4321C;
  --shadow-1: 0 1px 2px rgb(0 0 0 / .04), 0 8px 24px -8px rgb(0 0 0 / .14);

  --sai-blue: var(--sai-field);
  --sai-ink: #111111;
  --sai-body: var(--body);
  --sai-muted: var(--muted-text);
  --sai-action: var(--accent-brand);
  --sai-action-hover: var(--accent-hover);
  --sai-surface: #FFFFFF;
  --sai-field: #F7F7F7;
  --sai-selected: var(--accent-soft);
  --sai-line: #E6E6E6;
  --sai-line-soft: var(--sai-line);
  --sai-control-line: var(--sai-line);
  --sai-danger: var(--error);
  --sai-disabled-bg: var(--sai-field);
  --sai-disabled-text: var(--sai-muted);
  --sai-disabled-line: var(--sai-line);
  --sai-max: 1200px;
  --sai-radius: 8px;
  --sai-radius-card: 12px;
  --sai-shadow-1: var(--shadow-1);
  --sai-font: 'Pretendard', 'Pretendard Full', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;

  /* Type scale (DESIGN.md): hero clamp(36px,5vw,60px), h1 40px / mobile 30px, h2 28px / mobile 24px, h3 20px; lead is body size. Page CSS uses these instead of pixel values. */
  --sai-text-display: clamp(36px, 5vw, 60px);
  --sai-text-h1: 40px;
  --sai-text-h2: 28px;
  --sai-text-h3: 20px;
  --sai-text-lead: 16px;
  --sai-text-body: 16px;
  --sai-text-small: 14px;
  --sai-text-caption: 12px;
  --sai-text-brand: 24px;
  --sai-text-code: clamp(24px, 5.4vw, 30px);
  --sai-leading-display: 1.18;
  --sai-leading-heading: 1.25;
  --sai-leading-snug: 1.5;
  --sai-leading-body: 1.75;
  --sai-tracking-display: -.045em;
  --sai-tracking-heading: -.03em;
  --sai-tracking-tight: -.015em;

  /* 8px spacing scale, section rhythm and the two page-hero types. */
  --sai-space-half: 4px;
  --sai-space-1: 8px;
  --sai-space-2: 16px;
  --sai-space-3: 24px;
  --sai-space-4: 32px;
  --sai-space-5: 40px;
  --sai-space-6: 48px;
  --sai-space-8: 64px;
  --sai-space-10: 80px;
  --sai-section-y: 80px;
  --sai-section-y-tight: 48px;
  --sai-hero-y: 64px;
  --sai-gutter: 24px;

  /* Form controls: one height, border, focus ring and error colour everywhere. */
  --sai-control-height: 52px;
  --sai-control-pad-x: 16px;
  --sai-focus-ring: 0 0 0 2px var(--accent-brand);
  --sai-motion: 160ms;

  --paper: var(--sai-surface);
  --paper-light: var(--sai-field);
  --forest: var(--sai-action);
  --forest-dark: var(--sai-ink);
  --ink: var(--sai-ink);
  --muted: var(--sai-muted);
  --line: var(--sai-line);
  --accent: var(--sai-action);
  --blue-soft: var(--sai-selected);
  --serif: var(--sai-font);
  --radius-control: var(--sai-radius);
  --font-display: var(--sai-font);
}
@media (max-width: 1100px) { :root { --sai-gutter: 24px; --sai-section-y: 64px; } }
@media (max-width: 768px) {
  :root { --sai-text-h1: 30px; --sai-text-h2: 24px; --sai-section-y: 48px; --sai-section-y-tight: 40px; --sai-hero-y: 40px; }
}
@media (max-width: 480px) { :root { --sai-gutter: 16px; } }

@media (max-width: 767px) { :root { --sai-gutter: 16px; } }