/**
 * KraftWorks — Design System — CSS custom properties
 * GENERATED from src/tokens.json by codegen/build.mjs. Do not edit by hand.
 *
 * 사용법
 *   <div data-ds-scope data-ds-theme="light">   ← 라이트 (기본)
 *   <div data-ds-scope data-ds-theme="dark">    ← 다크
 *
 * 규칙
 *   · 표면(배경)에는 테마 인식 토큰만: --ds-bg / bg-raised / bg-sunken / bg-hover / bg-active,
 *     강조는 --ds-tint / --ds-info-tint / --ds-highlight.
 *     --ds-gray, --ds-gray-light, --ds-brand-red 는 팔레트 참조용 고정값이므로 표면에 쓰지 않습니다.
 *   · 리터럴 금지: 색·간격·radius·duration·z-index 모두 토큰을 참조합니다.
 *   · 값의 원천은 packages/tokens/src/tokens.json 입니다. 이 파일은 그 렌더링입니다.
 */

[data-ds-scope] {
  --ds-bg: #f8f7f5;
  --ds-bg-sunken: #edebe7;
  --ds-bg-raised: #ffffff;
  --ds-auth-illustration-surface: #f8f7f5;
  --ds-auth-illustration-hole: #141414;
  --ds-auth-illustration-rim: #616162;
  --ds-auth-illustration-trail: #333333;
  --ds-auth-illustration-shadow: #000000;
  --ds-bg-hover: rgba(0,0,0,0.045);
  --ds-message-hover: rgba(0,0,0,0.025);
  --ds-bg-active: rgba(0,0,0,0.085);
  --ds-border: rgba(0,0,0,0.14);
  --ds-border-strong: rgba(0,0,0,0.30);
  --ds-text: #000000;
  --ds-text-secondary: #616162;
  --ds-text-tertiary: #616162;
  --ds-text-inverse: #ffffff;
  --ds-agent-orb: #f9423a;
  --ds-nav-bg: #eae7e1;
  --ds-nav-bg-hover: rgba(0,0,0,0.045);
  --ds-nav-rail: #d8d4cc;
  --ds-nav-text: #5a5a5b;
  --ds-nav-text-strong: #000000;
  --ds-nav-selected: #f9423a;
  --ds-nav-selected-quiet: rgba(0,0,0,0.08);
  --ds-nav-selected-text: #000000;
  --ds-brand-red: #f9423a;
  --ds-gray: #949495;
  --ds-gray-light: #efefef;
  --ds-accent: #f9423a;
  --ds-accent-hover: #e5372f;
  --ds-accent-text: #000000;
  --ds-primary-action: #1e1e1e;
  --ds-primary-action-hover: #333333;
  --ds-primary-action-text: #ffffff;
  --ds-ink-action: #000000;
  --ds-tint: #feeceb;
  --ds-tint-strong: #fcd4d1;
  --ds-danger: #c0231c;
  --ds-presence: #3ba55c;
  --ds-warning: #e8a33d;
  --ds-focus: #73566f;
  --ds-link: #73566f;
  --ds-code-bg: #efefef;
  --ds-info-tint: rgba(115,86,111,0.10);
  --ds-highlight: #fbf0dd;
  --ds-scrim: rgba(0,0,0,0.55);
  --ds-identity-moss-bold: #626a14;
  --ds-identity-moss-tint: #ecf0d9;
  --ds-identity-teal-bold: #007570;
  --ds-identity-teal-tint: #d7f4f1;
  --ds-identity-violet-bold: #63579b;
  --ds-identity-violet-tint: #eceaff;
  --ds-identity-magenta-bold: #874a7b;
  --ds-identity-magenta-tint: #fae6f5;
  --ds-identity-slate-bold: #5d646b;
  --ds-identity-slate-tint: #eaedf1;
  --ds-border-width-hairline: 1px;
  --ds-border-width-thick: 2px;
  --ds-border-width-accent: 4px;
  --ds-opacity-disabled: 0.4;
  --ds-opacity-muted: 0.66;
  --ds-opacity-hidden: 0;
  --ds-duration-instant: 80ms;
  --ds-duration-fast: 120ms;
  --ds-duration-base: 200ms;
  --ds-duration-slow: 300ms;
  --ds-ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ds-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ds-z-sticky: 10;
  --ds-z-dropdown: 100;
  --ds-z-scrim: 200;
  --ds-z-modal: 300;
  --ds-z-toast: 400;
  --ds-z-tooltip: 500;
  --ds-radius-none: 0px;
  --ds-radius-sm: 4px;
  --ds-radius-md: 6px;
  --ds-radius-lg: 8px;
  --ds-radius-sheet: 12px;
  --ds-radius-full: 999px;
  --ds-space-none: 0px;
  --ds-space-xs: 4px;
  --ds-space-sm: 8px;
  --ds-space-md: 12px;
  --ds-space-lg: 16px;
  --ds-space-xl: 20px;
  --ds-space-2xl: 24px;
  --ds-space-3xl: 32px;
  --ds-space-4xl: 40px;
  --ds-space-5xl: 48px;
  --ds-type-display-font-size: 40px;
  --ds-type-display-line-height: 44px;
  --ds-type-display-font-weight: 900;
  --ds-type-display-letter-spacing: -1px;
  --ds-type-title-xl-font-size: 34px;
  --ds-type-title-xl-line-height: 40px;
  --ds-type-title-xl-font-weight: 900;
  --ds-type-title-xl-letter-spacing: -0.6px;
  --ds-type-title-lg-font-size: 28px;
  --ds-type-title-lg-line-height: 34px;
  --ds-type-title-lg-font-weight: 900;
  --ds-type-title-lg-letter-spacing: -0.4px;
  --ds-type-title-font-size: 22px;
  --ds-type-title-line-height: 28px;
  --ds-type-title-font-weight: 900;
  --ds-type-title-letter-spacing: 0px;
  --ds-type-heading-font-size: 18px;
  --ds-type-heading-line-height: 24px;
  --ds-type-heading-font-weight: 900;
  --ds-type-heading-letter-spacing: 0px;
  --ds-type-channel-name-font-size: 17px;
  --ds-type-channel-name-line-height: 24px;
  --ds-type-channel-name-font-weight: 900;
  --ds-type-channel-name-letter-spacing: 0px;
  --ds-type-body-strong-font-size: 14px;
  --ds-type-body-strong-line-height: 20px;
  --ds-type-body-strong-font-weight: 700;
  --ds-type-body-strong-letter-spacing: 0px;
  --ds-type-body-font-size: 14px;
  --ds-type-body-line-height: 20px;
  --ds-type-body-font-weight: 400;
  --ds-type-body-letter-spacing: 0px;
  --ds-type-label-font-size: 13px;
  --ds-type-label-line-height: 18px;
  --ds-type-label-font-weight: 700;
  --ds-type-label-letter-spacing: 0px;
  --ds-type-caption-font-size: 12px;
  --ds-type-caption-line-height: 16px;
  --ds-type-caption-font-weight: 400;
  --ds-type-caption-letter-spacing: 0px;
  --ds-type-overline-font-size: 11px;
  --ds-type-overline-line-height: 14px;
  --ds-type-overline-font-weight: 900;
  --ds-type-overline-letter-spacing: 0.8px;
  --ds-type-overline-text-transform: uppercase;
  --ds-type-mono-font-size: 13px;
  --ds-type-mono-line-height: 20px;
  --ds-type-mono-font-weight: 400;
  --ds-type-mono-letter-spacing: 0px;
  --ds-control-height: 40px;
  --ds-control-padding-horizontal: 12px;
  --ds-control-radius: 4px;
  --ds-control-border-width: 1px;
  --ds-button-height-sm: 28px;
  --ds-button-height-compact: 32px;
  --ds-button-height-md: 36px;
  --ds-button-padding-horizontal-sm: 12px;
  --ds-button-padding-horizontal-compact: 14px;
  --ds-button-padding-horizontal-md: 16px;
  --ds-button-radius: 4px;
  --ds-button-gap: 8px;
  --ds-button-typography-sm: label;
  --ds-button-typography-compact: label;
  --ds-button-typography-md: bodyStrong;
  --ds-icon-button-size-sm: 28px;
  --ds-icon-button-size-md: 32px;
  --ds-icon-button-size-lg: 40px;
  --ds-icon-button-radius: 4px;
  --ds-icon-button-attention-inset: 2px;
  --ds-icon-button-icon-size-sm: 16px;
  --ds-icon-button-icon-size-md: 20px;
  --ds-icon-button-icon-size-lg: 20px;
  --ds-segmented-control-height: 32px;
  --ds-segmented-control-padding: 2px;
  --ds-segmented-control-radius: 6px;
  --ds-segmented-control-item-height: 28px;
  --ds-segmented-control-item-radius: 4px;
  --ds-segmented-control-item-padding-horizontal: 12px;
  --ds-segmented-control-typography: label;
  --ds-avatar-size-xs: 20px;
  --ds-avatar-size-sm: 24px;
  --ds-avatar-size-md: 28px;
  --ds-avatar-size-lg: 36px;
  --ds-avatar-size-xl: 48px;
  --ds-avatar-radius-xs: 4px;
  --ds-avatar-radius-sm: 4px;
  --ds-avatar-radius-md: 4px;
  --ds-avatar-radius-lg: 6px;
  --ds-avatar-radius-xl: 8px;
  --ds-avatar-presence-ring-width: 2px;
  --ds-badge-height: 18px;
  --ds-badge-min-width: 18px;
  --ds-badge-padding-horizontal: 6px;
  --ds-badge-radius: 999px;
  --ds-icon-size-sm: 16px;
  --ds-icon-size-md: 20px;
  --ds-icon-size-lg: 24px;
  --ds-icon-grid: 20px;
  --ds-menu-min-width: 200px;
  --ds-menu-max-width: 320px;
  --ds-menu-radius: 6px;
  --ds-menu-padding-vertical: 4px;
  --ds-menu-item-height: 28px;
  --ds-menu-item-padding-horizontal: 12px;
  --ds-modal-max-width: 460px;
  --ds-modal-radius: 8px;
  --ds-modal-padding: 24px;
  --ds-modal-compact-max-width: 360px;
  --ds-data-table-toolbar-height: 44px;
  --ds-data-table-header-height: 38px;
  --ds-data-table-header-padding: 9px;
  --ds-data-table-row-height: 44px;
  --ds-data-table-action-column-width: 44px;
  --ds-layout-sidebar-width: 220px;
  --ds-layout-sidebar-min: 220px;
  --ds-layout-sidebar-max: 400px;
  --ds-layout-profile-panel-width: 340px;
  --ds-layout-profile-panel-min: 280px;
  --ds-layout-profile-panel-max: 480px;
  --ds-layout-header-height: 52px;
  --ds-layout-header-control-size: 48px;
  --ds-shadow-1: 0px 1px 3px 0px rgba(0,0,0,0.08);
  --ds-shadow-2: 0px 4px 12px 0px rgba(0,0,0,0.08);
  --ds-shadow-3: 0px 8px 24px 0px rgba(0,0,0,0.13);
}

[data-ds-theme="dark"] {
  --ds-bg: #242424;
  --ds-bg-sunken: #1e1e1e;
  --ds-bg-raised: #2c2c2c;
  --ds-auth-illustration-surface: #242424;
  --ds-auth-illustration-hole: #000000;
  --ds-auth-illustration-rim: #616162;
  --ds-auth-illustration-trail: #b4b4b5;
  --ds-auth-illustration-shadow: #000000;
  --ds-bg-hover: rgba(255,255,255,0.06);
  --ds-message-hover: rgba(255,255,255,0.035);
  --ds-bg-active: rgba(255,255,255,0.12);
  --ds-border: #333333;
  --ds-border-strong: rgba(255,255,255,0.28);
  --ds-text: #efefef;
  --ds-text-secondary: #b4b4b5;
  --ds-text-tertiary: #a4a4a5;
  --ds-text-inverse: #000000;
  --ds-agent-orb: #f9423a;
  --ds-nav-bg: #151515;
  --ds-nav-bg-hover: rgba(255,255,255,0.06);
  --ds-nav-rail: #000000;
  --ds-nav-text: #b4b4b5;
  --ds-nav-text-strong: #efefef;
  --ds-nav-selected: #f9423a;
  --ds-nav-selected-quiet: rgba(255,255,255,0.12);
  --ds-nav-selected-text: #000000;
  --ds-brand-red: #f9423a;
  --ds-gray: #949495;
  --ds-gray-light: #efefef;
  --ds-accent: #f9423a;
  --ds-accent-hover: #ff5a52;
  --ds-accent-text: #000000;
  --ds-primary-action: #efefef;
  --ds-primary-action-hover: #e2dfd9;
  --ds-primary-action-text: #141414;
  --ds-ink-action: #efefef;
  --ds-tint: #2a1412;
  --ds-tint-strong: #3d1c19;
  --ds-danger: #ff7a72;
  --ds-presence: #48b96c;
  --ds-warning: #e8a33d;
  --ds-focus: #c4a7bf;
  --ds-link: #c4a7bf;
  --ds-code-bg: #333333;
  --ds-info-tint: rgba(196,167,191,0.14);
  --ds-highlight: #33270f;
  --ds-scrim: rgba(0,0,0,0.55);
  --ds-identity-moss-bold: #b8c27a;
  --ds-identity-moss-tint: #2f3310;
  --ds-identity-teal-bold: #6acec8;
  --ds-identity-teal-tint: #003936;
  --ds-identity-violet-bold: #b9b0f4;
  --ds-identity-violet-tint: #302b4a;
  --ds-identity-magenta-bold: #e1a4d3;
  --ds-identity-magenta-tint: #41253b;
  --ds-identity-slate-bold: #b4bbc3;
  --ds-identity-slate-tint: #2e3133;
  --ds-border-width-hairline: 1px;
  --ds-border-width-thick: 2px;
  --ds-border-width-accent: 4px;
  --ds-opacity-disabled: 0.4;
  --ds-opacity-muted: 0.66;
  --ds-opacity-hidden: 0;
  --ds-duration-instant: 80ms;
  --ds-duration-fast: 120ms;
  --ds-duration-base: 200ms;
  --ds-duration-slow: 300ms;
  --ds-ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ds-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ds-z-sticky: 10;
  --ds-z-dropdown: 100;
  --ds-z-scrim: 200;
  --ds-z-modal: 300;
  --ds-z-toast: 400;
  --ds-z-tooltip: 500;
  --ds-radius-none: 0px;
  --ds-radius-sm: 4px;
  --ds-radius-md: 6px;
  --ds-radius-lg: 8px;
  --ds-radius-sheet: 12px;
  --ds-radius-full: 999px;
  --ds-space-none: 0px;
  --ds-space-xs: 4px;
  --ds-space-sm: 8px;
  --ds-space-md: 12px;
  --ds-space-lg: 16px;
  --ds-space-xl: 20px;
  --ds-space-2xl: 24px;
  --ds-space-3xl: 32px;
  --ds-space-4xl: 40px;
  --ds-space-5xl: 48px;
  --ds-type-display-font-size: 40px;
  --ds-type-display-line-height: 44px;
  --ds-type-display-font-weight: 900;
  --ds-type-display-letter-spacing: -1px;
  --ds-type-title-xl-font-size: 34px;
  --ds-type-title-xl-line-height: 40px;
  --ds-type-title-xl-font-weight: 900;
  --ds-type-title-xl-letter-spacing: -0.6px;
  --ds-type-title-lg-font-size: 28px;
  --ds-type-title-lg-line-height: 34px;
  --ds-type-title-lg-font-weight: 900;
  --ds-type-title-lg-letter-spacing: -0.4px;
  --ds-type-title-font-size: 22px;
  --ds-type-title-line-height: 28px;
  --ds-type-title-font-weight: 900;
  --ds-type-title-letter-spacing: 0px;
  --ds-type-heading-font-size: 18px;
  --ds-type-heading-line-height: 24px;
  --ds-type-heading-font-weight: 900;
  --ds-type-heading-letter-spacing: 0px;
  --ds-type-channel-name-font-size: 17px;
  --ds-type-channel-name-line-height: 24px;
  --ds-type-channel-name-font-weight: 900;
  --ds-type-channel-name-letter-spacing: 0px;
  --ds-type-body-strong-font-size: 14px;
  --ds-type-body-strong-line-height: 20px;
  --ds-type-body-strong-font-weight: 700;
  --ds-type-body-strong-letter-spacing: 0px;
  --ds-type-body-font-size: 14px;
  --ds-type-body-line-height: 20px;
  --ds-type-body-font-weight: 400;
  --ds-type-body-letter-spacing: 0px;
  --ds-type-label-font-size: 13px;
  --ds-type-label-line-height: 18px;
  --ds-type-label-font-weight: 700;
  --ds-type-label-letter-spacing: 0px;
  --ds-type-caption-font-size: 12px;
  --ds-type-caption-line-height: 16px;
  --ds-type-caption-font-weight: 400;
  --ds-type-caption-letter-spacing: 0px;
  --ds-type-overline-font-size: 11px;
  --ds-type-overline-line-height: 14px;
  --ds-type-overline-font-weight: 900;
  --ds-type-overline-letter-spacing: 0.8px;
  --ds-type-overline-text-transform: uppercase;
  --ds-type-mono-font-size: 13px;
  --ds-type-mono-line-height: 20px;
  --ds-type-mono-font-weight: 400;
  --ds-type-mono-letter-spacing: 0px;
  --ds-control-height: 40px;
  --ds-control-padding-horizontal: 12px;
  --ds-control-radius: 4px;
  --ds-control-border-width: 1px;
  --ds-button-height-sm: 28px;
  --ds-button-height-compact: 32px;
  --ds-button-height-md: 36px;
  --ds-button-padding-horizontal-sm: 12px;
  --ds-button-padding-horizontal-compact: 14px;
  --ds-button-padding-horizontal-md: 16px;
  --ds-button-radius: 4px;
  --ds-button-gap: 8px;
  --ds-button-typography-sm: label;
  --ds-button-typography-compact: label;
  --ds-button-typography-md: bodyStrong;
  --ds-icon-button-size-sm: 28px;
  --ds-icon-button-size-md: 32px;
  --ds-icon-button-size-lg: 40px;
  --ds-icon-button-radius: 4px;
  --ds-icon-button-attention-inset: 2px;
  --ds-icon-button-icon-size-sm: 16px;
  --ds-icon-button-icon-size-md: 20px;
  --ds-icon-button-icon-size-lg: 20px;
  --ds-segmented-control-height: 32px;
  --ds-segmented-control-padding: 2px;
  --ds-segmented-control-radius: 6px;
  --ds-segmented-control-item-height: 28px;
  --ds-segmented-control-item-radius: 4px;
  --ds-segmented-control-item-padding-horizontal: 12px;
  --ds-segmented-control-typography: label;
  --ds-avatar-size-xs: 20px;
  --ds-avatar-size-sm: 24px;
  --ds-avatar-size-md: 28px;
  --ds-avatar-size-lg: 36px;
  --ds-avatar-size-xl: 48px;
  --ds-avatar-radius-xs: 4px;
  --ds-avatar-radius-sm: 4px;
  --ds-avatar-radius-md: 4px;
  --ds-avatar-radius-lg: 6px;
  --ds-avatar-radius-xl: 8px;
  --ds-avatar-presence-ring-width: 2px;
  --ds-badge-height: 18px;
  --ds-badge-min-width: 18px;
  --ds-badge-padding-horizontal: 6px;
  --ds-badge-radius: 999px;
  --ds-icon-size-sm: 16px;
  --ds-icon-size-md: 20px;
  --ds-icon-size-lg: 24px;
  --ds-icon-grid: 20px;
  --ds-menu-min-width: 200px;
  --ds-menu-max-width: 320px;
  --ds-menu-radius: 6px;
  --ds-menu-padding-vertical: 4px;
  --ds-menu-item-height: 28px;
  --ds-menu-item-padding-horizontal: 12px;
  --ds-modal-max-width: 460px;
  --ds-modal-radius: 8px;
  --ds-modal-padding: 24px;
  --ds-modal-compact-max-width: 360px;
  --ds-data-table-toolbar-height: 44px;
  --ds-data-table-header-height: 38px;
  --ds-data-table-header-padding: 9px;
  --ds-data-table-row-height: 44px;
  --ds-data-table-action-column-width: 44px;
  --ds-layout-sidebar-width: 220px;
  --ds-layout-sidebar-min: 220px;
  --ds-layout-sidebar-max: 400px;
  --ds-layout-profile-panel-width: 340px;
  --ds-layout-profile-panel-min: 280px;
  --ds-layout-profile-panel-max: 480px;
  --ds-layout-header-height: 52px;
  --ds-layout-header-control-size: 48px;
  --ds-shadow-1: 0px 1px 3px 0px rgba(0,0,0,0.4);
  --ds-shadow-2: 0px 4px 12px 0px rgba(0,0,0,0.5);
  --ds-shadow-3: 0px 8px 24px 0px rgba(0,0,0,0.6);
}

body {
  margin: 0;
  font-family: Lato, 'NotoSansKR', sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--ds-bg);
  color: var(--ds-text);
}

a { color: var(--ds-link); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: var(--ds-link); color: var(--ds-text-inverse); }

@media (prefers-reduced-motion: reduce) {
  [data-ds-scope] * {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
  }
}

@keyframes dsSpin { to { transform: rotate(360deg); } }
@keyframes dsTyping {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}