/* Generated by ui-loom-prototype tokens.mjs from design.tokens.json (spec v5). Do not edit. */
:root {
  --color-paper: #fafbf8;
  --color-white: #ffffff;
  --color-band: #f1f3ee;
  --color-ink: #15263a;
  --color-ink-muted: #4e5c6c;
  --color-ink-soft: #7e8c9b;
  --color-blue: #23466a;
  --color-blue-deep: #1b3753;
  --color-teal: #004854;
  --color-teal-tint: #e2f4f4;
  --color-cyan: #a6e8eb;
  --color-on-blue: #eef0e9;
  --color-on-blue-muted: #eef0e9b8;
  --color-on-blue-line: #eef0e952;
  --color-grid-major: #a6e8eb29;
  --color-grid-minor: #a6e8eb0f;
  --color-grid-light: #23466a0f;
  --color-line: #d8dee4;
  --color-line-strong: #9fb0c2;
  --color-success: #2e7d4f;
  --color-error: #b3261e;
  --role-background: var(--color-paper);
  --role-surface: var(--color-white);
  --role-surface-alt: var(--color-band);
  --role-text: var(--color-ink);
  --role-text-muted: var(--color-ink-muted);
  --role-text-soft: var(--color-ink-soft);
  --role-accent: var(--color-blue);
  --role-accent-strong: var(--color-blue-deep);
  --role-label: var(--color-teal);
  --role-label-bg: var(--color-teal-tint);
  --role-border: var(--color-line);
  --role-border-strong: var(--color-line-strong);
  --role-focus: var(--color-teal);
  --role-success: var(--color-success);
  --role-error: var(--color-error);
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-120: 120px;
  --size-wrap: 1200px;
  --size-prose: 660px;
  --size-gutter: 32px;
  --size-gutter-m: 16px;
  --size-nav-h: 60px;
  --size-nav-h-m: 52px;
  --size-nav-top: 12px;
  --size-logo-w: 112px;
  --size-logo-h: 44px;
  --size-logo-w-m: 92px;
  --size-logo-h-m: 38px;
  --size-btn-h: 48px;
  --size-btn-h-sm: 38px;
  --size-hero-sheet-h: 540px;
  --size-hero-sheet-h-m: 320px;
  --size-cabinet-h: 440px;
  --size-cabinet-h-m: 250px;
  --size-footer-logo-w: 220px;
  --size-icon: 56px;
  --size-dot: 6px;
  --size-num: 28px;
  --size-chamfer: 14px;
  --size-chamfer-sm: 9px;
  --size-bracket: 14px;
  --size-grid-major: 96px;
  --size-grid-minor: 24px;
  --size-hair: 1px;
  --size-stroke: 1.5px;
  --size-heavy: 2px;
  --size-sheet-inset: 5px;
  --size-focus-offset: 3px;
  --size-toc-w: 200px;
  --size-toc-bar-h: 46px;
  --font-sans: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "IBM Plex Sans KR", ui-monospace, "Consolas", monospace;
  --font-regular: 400;
  --font-medium: 500;
  --font-bold: 700;
  --font-size-display: 56px;
  --font-size-display-m: 34px;
  --font-size-h2: 40px;
  --font-size-h2-m: 28px;
  --font-size-h3: 22px;
  --font-size-h3-m: 20px;
  --font-size-statement: 30px;
  --font-size-statement-m: 22px;
  --font-size-stat: 28px;
  --font-size-lead: 19px;
  --font-size-body: 17px;
  --font-size-small: 15px;
  --font-size-label: 12px;
  --font-size-tiny: 11px;
  --font-size-menu: 15px;
  --font-leading-tight: 1.22;
  --font-leading-heading: 1.35;
  --font-leading-body: 1.8;
  --font-leading-label: 1;
  --font-tracking-tight: -1px;
  --font-tracking-label: 1.6px;
  --font-tracking-wide: 2.4px;
  --shadow-nav: 0px 8px 28px 0px #15263a14;
  --motion-fast: 150ms;
  --breakpoint-mobile: 820px;
  --breakpoint-tablet: 1100px;
  --nav-height: var(--size-nav-h);
  --nav-chamfer: var(--size-chamfer);
  --card-padding: var(--space-28);
  --card-chamfer: var(--size-chamfer);
  --card-gap: var(--space-24);
  --section-pad: var(--space-120);
  --section-pad-m: var(--space-64);
}