/* Generated from tokens.json (AI 오피스 v1) by build-tokens.mjs — do not edit. */
:root {
  color-scheme: light;
  --bg: #f5f6fa;
  --bg-soft: #eceef5;
  --surface: #ffffff;
  --surface-2: #f8f9fc;
  --border: #e1e4ee;
  --border-strong: #c5cadb;
  --ink: #161b2e;
  --muted: #596079;
  --accent: #4f46e5;
  --accent-strong: #3f37c9;
  --accent-soft: #eef0ff;
  --on-accent: #ffffff;
  --ok: #1b7340;
  --ok-soft: #e4f4e9;
  --ok-border: #9dd3ae;
  --warn: #9a5800;
  --warn-soft: #fff3db;
  --warn-border: #eec077;
  --bad: #c0304a;
  --bad-soft: #fdebee;
  --bad-border: #efa8b5;
  --neutral-soft: #eef0f5;
  --focus: #2563eb;
  --hatch: #161b2e12;
  --border-control: #7d8399;
  --on-ok: #ffffff;
  --on-bad: #ffffff;
  --backdrop: rgba(10, 12, 28, 0.55);
  --brand-slate: #5b6b82;
  --on-brand-slate: #ffffff;
  --pixel-baseboard: #3f4b5c;
  --pixel-floor: #e8dcc8;
  --pixel-floor-alt: #dfd2bc;
  --pixel-pod-floor: #f3ebdd;
  --pixel-desk: #8b5e3c;
  --pixel-desk-top: #a47148;
  --pixel-skin-0: #f2c9a0;
  --pixel-skin-1: #f9dcc4;
  --pixel-skin-2: #d9a066;
  --pixel-skin-3: #b07445;
  --pixel-skin-4: #8d5a36;
  --pixel-hair-0: #3b2f2f;
  --pixel-hair-1: #7c4a1e;
  --pixel-hair-2: #111827;
  --pixel-hair-3: #b45309;
  --pixel-hair-4: #6b21a8;
  --pixel-hair-5: #9ca3af;
  --pixel-ink: #111827;
  --pixel-monitor: #1f2937;
  --pixel-screen: #60a5fa;
  --pixel-screen-alt: #93c5fd;
  --pixel-window: #9cc9f0;
  --agent-amber: #f59e0b;
  --agent-blue: #3b82f6;
  --agent-green: #10b981;
  --agent-red: #ef4444;
  --agent-violet: #8b5cf6;
  --agent-pink: #ec4899;
  --tint-amber: #fde7c2;
  --tint-blue: #cfe0fc;
  --tint-green: #c7efdf;
  --tint-red: #fbd0d0;
  --line-amber: #b45309;
  --line-blue: #2563eb;
  --line-green: #047857;
  --line-red: #dc2626;
  --doc-doc: #2563eb;
  --doc-doc-soft: rgba(59, 130, 246, 0.16);
  --doc-sheet: #047857;
  --doc-sheet-soft: rgba(16, 185, 129, 0.16);
  --doc-slides: #b45309;
  --doc-slides-soft: rgba(245, 158, 11, 0.18);
  --tag-bg: rgba(31, 41, 55, 0.82);
  --tag-ink: #f9fafb;
  --tag-dot-active: #22c55e;
  --tag-dot-idle: #9ca3af;
  --bubble-surface: #ffffff;
  --bubble-line: #1f2937;
  --kakao: #fee500;
  --kakao-hover: #f5dc00;
  --kakao-ink: rgba(0, 0, 0, 0.85);
  --google-surface: #ffffff;
  --google-hover: #f2f2f2;
  --google-border: #747775;
  --google-ink: #1f1f1f;
  --shadow-sm: 0 1px 2px #161b2e0f;
  --shadow: 0 1px 2px #161b2e0d, 0 6px 20px #161b2e12;
  --shadow-lg: 0 24px 60px #161b2e38;
  --shadow-bubble: 0 1px 0 #1f293740;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --content-width: 1200px;
  --wide-width: 1440px;
  --narrow-width: 720px;
  --header-h: 64px;
  --tabbar-h: 64px;
  --panel-w: 360px;
  --control-h: 44px;
  --control-h-sm: 36px;
  --control-h-lg: 52px;
  --z-ai-bar: 15;
  --z-header: 20;
  --z-skip-link: 50;
  --z-toast: 60;
  --opacity-disabled: 0.5;
  --opacity-disabled-icon: 0.4;
  --opacity-empty: 0.6;
  --duration-press: 50ms;
  --duration-fast: 150ms;
  --duration-sheet: 220ms;
  --duration-spin: 800ms;
  --duration-caret: 1000ms;
  --duration-pulse: 1200ms;
  --duration-shimmer: 1400ms;
  --font-sans: Pretendard, "Pretendard Variable", "Apple SD Gothic Neo", "Noto Sans KR", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-pixel: Galmuri11, "Pixelify Sans", ui-monospace, monospace;
}

/* dark: 시스템 설정을 따르되(<html> data-theme 없음), data-theme="light"면 light 고정. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #0f1220;
    --bg-soft: #191d31;
    --surface: #161a2c;
    --surface-2: #1b2035;
    --border: #2a3050;
    --border-strong: #3d4568;
    --ink: #e8eaf4;
    --muted: #a3a9c1;
    --accent: #a5b4fc;
    --accent-strong: #c7d2fe;
    --accent-soft: #262c52;
    --on-accent: #11142a;
    --ok: #62d08e;
    --ok-soft: #10301d;
    --ok-border: #2a6a42;
    --warn: #f2b453;
    --warn-soft: #33270f;
    --warn-border: #7a5a1f;
    --bad: #ff8b9d;
    --bad-soft: #3a1820;
    --bad-border: #8f3647;
    --neutral-soft: #1f2438;
    --focus: #7cb3ff;
    --hatch: #ffffff0f;
    --border-control: #6b7496;
    --on-ok: #11142a;
    --on-bad: #11142a;
    --line-amber: #f59e0b;
    --line-blue: #60a5fa;
    --line-green: #10b981;
    --line-red: #f87171;
    --doc-doc: #93c5fd;
    --doc-doc-soft: rgba(59, 130, 246, 0.2);
    --doc-sheet: #6ee7b7;
    --doc-sheet-soft: rgba(16, 185, 129, 0.2);
    --doc-slides: #fcd34d;
    --doc-slides-soft: rgba(245, 158, 11, 0.2);
    --shadow-sm: 0 1px 2px #0000004d;
    --shadow: 0 1px 2px #0000004d, 0 6px 20px #00000040;
    --shadow-lg: 0 24px 60px #0000008c;
  }
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #0f1220;
  --bg-soft: #191d31;
  --surface: #161a2c;
  --surface-2: #1b2035;
  --border: #2a3050;
  --border-strong: #3d4568;
  --ink: #e8eaf4;
  --muted: #a3a9c1;
  --accent: #a5b4fc;
  --accent-strong: #c7d2fe;
  --accent-soft: #262c52;
  --on-accent: #11142a;
  --ok: #62d08e;
  --ok-soft: #10301d;
  --ok-border: #2a6a42;
  --warn: #f2b453;
  --warn-soft: #33270f;
  --warn-border: #7a5a1f;
  --bad: #ff8b9d;
  --bad-soft: #3a1820;
  --bad-border: #8f3647;
  --neutral-soft: #1f2438;
  --focus: #7cb3ff;
  --hatch: #ffffff0f;
  --border-control: #6b7496;
  --on-ok: #11142a;
  --on-bad: #11142a;
  --line-amber: #f59e0b;
  --line-blue: #60a5fa;
  --line-green: #10b981;
  --line-red: #f87171;
  --doc-doc: #93c5fd;
  --doc-doc-soft: rgba(59, 130, 246, 0.2);
  --doc-sheet: #6ee7b7;
  --doc-sheet-soft: rgba(16, 185, 129, 0.2);
  --doc-slides: #fcd34d;
  --doc-slides-soft: rgba(245, 158, 11, 0.2);
  --shadow-sm: 0 1px 2px #0000004d;
  --shadow: 0 1px 2px #0000004d, 0 6px 20px #00000040;
  --shadow-lg: 0 24px 60px #0000008c;
}

/* 타입 스타일 (tokens.json type.groups) */
.text-page-title {
  font-family: var(--font-sans);
  font-size: 32px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.text-login-title {
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: 1.6;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.text-modal-title {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.text-section-title {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.text-brand-name {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.text-body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
}
.text-card-title {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 800;
}
.text-label {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 700;
}
.text-button {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.2;
  font-weight: 700;
}
.text-small {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 400;
}
.text-meta {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.6;
  font-weight: 400;
}
.text-eyebrow {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.6;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.text-badge {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 800;
}
.text-nav-label {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.6;
  font-weight: 700;
}
.text-code {
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.text-demo-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.text-pixel-label {
  font-family: var(--font-pixel);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0.04em;
}
.text-pixel-number {
  font-family: var(--font-pixel);
  font-size: 24px;
  line-height: 1.2;
  font-weight: 400;
}