/* Generated from tokens.json by tools/export_design_system.py. */
/* 글꼴: KS X 1001 한글 2350자 + 라틴/기호로 줄인 WOFF2(원본 TTF 3.3MB → 0.6MB)를 먼저 쓰고, 못 읽는 브라우저만 TTF로 간다.
   index.html에서 preload 하므로 첫 화면부터 제 글꼴로 그려진다 */
@font-face { font-family: "SUIT"; src: url("./assets/fonts/SUIT-Regular.woff2") format("woff2"), url("./assets/fonts/SUIT-Regular.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "SUIT"; src: url("./assets/fonts/SUIT-Bold.woff2") format("woff2"), url("./assets/fonts/SUIT-Bold.ttf") format("truetype"); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: "Jua"; src: url("./assets/fonts/Jua-Regular.woff2") format("woff2"), url("./assets/fonts/Jua-Regular.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
:root {
  --ss-font-body: "SUIT", "Malgun Gothic", sans-serif;
  --ss-font-heading: "Jua", "Malgun Gothic", sans-serif;
  --ss-font-size-body: 14px;
  --ss-font-size-small: 12px;
  --ss-font-size-section: 15px;
  --ss-font-size-editor-heading: 18px;
  --ss-font-size-title: 20px;
  --ss-font-size-menu: 13px;
  --ss-font-size-brand: 26px;
  --ss-font-size-keycap: 12px;
  --ss-font-weight-regular: 400;
  --ss-font-weight-bold: 700;
  --ss-font-weight-heading: 400;
  --ss-font-weight-japanese-heading: 700;
  --ss-line-height-body: 1.5;
  --ss-line-height-heading: 1.3;
  --ss-space-4: 4px;
  --ss-space-8: 8px;
  --ss-space-12: 12px;
  --ss-space-16: 16px;
  --ss-space-20: 20px;
  --ss-space-24: 24px;
  --ss-space-28: 28px;
  --ss-space-32: 32px;
  --ss-radius-field: 8px;
  --ss-radius-button: 11px;
  --ss-radius-card: 14px;
  --ss-radius-card-image: 10px;
  --ss-radius-preview-panel: 8px;
  --ss-radius-inspector-panel: 9px;
  --ss-radius-pill: 9999px;
  --ss-stroke-default: 1px;
  --ss-stroke-focus: 2px;
  --ss-stroke-selected-card: 2px;
  --ss-stroke-toggle: 1.5px;
  --ss-size-button-compact: 30px;
  --ss-size-button-tool: 32px;
  --ss-size-button-default: 34px;
  --ss-size-button-comfortable: 36px;
  --ss-size-button-primary: 38px;
  --ss-size-nav-width: 128px;
  --ss-size-nav-height: 36px;
  --ss-size-nav-pitch: 44px;
  --ss-size-section-tag: 28px;
  --ss-size-layer-row: 28px;
  --ss-size-layer-pitch: 32px;
  --ss-size-toggle-width: 40px;
  --ss-size-toggle-height: 20px;
  --ss-size-toggle-knob: 12px;
  --ss-size-toggle-inset: 4px;
  --ss-size-toggle-label-gap: 10px;
  --ss-size-icon: 18px;
  --ss-size-icon-label-gap: 7px;
  --ss-size-slider-track: 4px;
  --ss-size-slider-thumb-max: 16px;
  --ss-size-card-inset: 4px;
  --ss-size-card-gap: 12px;
  --ss-size-card-caption: 44px;
  --ss-size-panel-gutter: 24px;
  --ss-size-panel-padding: 12px;
  --ss-menu-min-width: 112px;
  --ss-menu-row-height: 34px;
  --ss-menu-text-inset: 12px;
  --ss-menu-checked-reserve: 20px;
  --ss-menu-separator-height: 9px;
  --ss-menu-separator-inset: 12px;
  --ss-menu-hover-inset-x: 4px;
  --ss-menu-hover-inset-y: 2px;
  --ss-menu-hover-radius: 4px;
  --ss-menu-check-stroke: 2px;
  --ss-menu-check-right-offset: 22px;
  --ss-prompt-width: 380px;
  --ss-prompt-height: 160px;
  --ss-prompt-label-x: 24px;
  --ss-prompt-label-y: 20px;
  --ss-prompt-label-width: 332px;
  --ss-prompt-label-height: 22px;
  --ss-prompt-input-x: 24px;
  --ss-prompt-input-y: 48px;
  --ss-prompt-input-width: 332px;
  --ss-prompt-input-height: 32px;
  --ss-prompt-button-width: 84px;
  --ss-prompt-button-height: 32px;
  --ss-prompt-button-y: 104px;
  --ss-prompt-cancel-x: 176px;
  --ss-prompt-confirm-x: 272px;
  --ss-prompt-button-gap: 12px;
  --ss-picker-width: 548px;
  --ss-picker-one-row-height: 290px;
  --ss-picker-extra-row-height: 220px;
  --ss-picker-card-width: 244px;
  --ss-picker-card-height: 212px;
  --ss-picker-card-start-x: 24px;
  --ss-picker-card-start-y: 24px;
  --ss-picker-column-gap: 12px;
  --ss-picker-row-gap: 8px;
  --ss-picker-image-width: 236px;
  --ss-picker-image-height: 177px;
  --ss-picker-button-width: 88px;
  --ss-picker-button-height: 30px;
  --ss-picker-button-bottom-offset: 42px;
  --ss-about-width: 520px;
  --ss-about-height: 427px;
  --ss-about-padding: 24px;
  --ss-about-border: 1px;
  --ss-about-brand-accent-width: 4px;
  --ss-about-brand-accent-height: 32px;
  --ss-about-header-drag-height: 62px;
  --ss-about-header-drag-width: 456px;
  --ss-combo-radius: 8px;
  --ss-combo-text-left: 10px;
  --ss-combo-text-right-reserve: 30px;
  --ss-combo-chevron-size: 16px;
  --ss-combo-chevron-right: 10px;
  --ss-combo-border: 1px;
  --ss-combo-focus-border: 2px;
  --ss-numeric-text-inset: 6px;
  --ss-numeric-label-width: 36px;
  --ss-numeric-label-gap: 6px;
  --ss-numeric-field-width: 89px;
  --ss-numeric-link-width: 26px;
  --ss-numeric-link-gap: 8px;
  --ss-range-height: 28px;
  --ss-range-track-inset: 10px;
  --ss-range-track-thickness: 3px;
  --ss-range-thumb-diameter: 12px;
  --ss-range-drag-thumb-diameter: 14px;
  --ss-range-thumb-border: 2px;
  --ss-range-endpoint-width: 3px;
  --ss-range-endpoint-height: 12px;
  --ss-range-reference-width: 6px;
  --ss-range-reference-height: 18px;
  --ss-range-reference-radius: 2px;
  --ss-layer-indent: 24px;
  --ss-layer-eye-target: 26px;
  --ss-layer-row-height: 28px;
  --ss-layer-row-pitch: 32px;
  --ss-layer-row-text-offset: 30px;
  --ss-pagination-button-size: 30px;
  --ss-pagination-new-button-width: 114px;
  --ss-pagination-icon-size: 18px;
  --ss-canvas-resize-handle: 12px;
  --ss-canvas-resize-hit-tolerance-from-corner: 18px;
  --ss-canvas-path-thickness: 3px;
  --ss-canvas-path-handle: 10px;
  --ss-gaze-pad-size: 140px;
  --ss-gaze-pad-radius: 10px;
  --ss-gaze-pad-cross-inset: 8px;
  --ss-gaze-pad-cross-thickness: 1px;
  --ss-gaze-pad-dot-diameter: 14px;
  --ss-key-map-window-width: 1060px;
  --ss-key-map-window-height: 496px;
  --ss-key-map-map-x: 28px;
  --ss-key-map-map-y: 66px;
  --ss-key-map-map-width: 1004px;
  --ss-key-map-map-height: 294px;
  --ss-key-map-key-radius: 4px;
  --ss-voice-meter-width: 304px;
  --ss-voice-meter-height: 6px;
  --ss-voice-meter-threshold-width: 2px;
  --ss-voice-meter-threshold-height: 12px;
  --ss-voice-meter-threshold-overhang: 3px;
  --ss-shadow: none;
  --ss-state-transition: 0ms;
}
:lang(ja) {
  --ss-font-body: "Yu Gothic UI", "Yu Gothic", sans-serif;
  --ss-font-heading: "Yu Gothic UI", "Yu Gothic", sans-serif;
  --ss-font-weight-heading: 700;
}
:root, [data-theme="light"] {
  color-scheme: light;
  --ss-background: #F2F8FC;
  --ss-surface: #FFFFFF;
  --ss-field: #FFFFFF;
  --ss-line: #E1EDF5;
  --ss-border: #C5DDEB;
  --ss-text: #253D50;
  --ss-muted: #566F81;
  --ss-heading: #326585;
  --ss-accent: #3278A8;
  --ss-accent-hover: #27668F;
  --ss-accent-pressed: #1E5377;
  --ss-selection: #DCEFFB;
  --ss-selection-text: #1E5377;
  --ss-on-accent: #FFFFFF;
  --ss-button-border: #B8D6E9;
  --ss-button-hover: #EAF5FC;
  --ss-button-pressed: #D5EAFA;
  --ss-soft: #E0F0FB;
  --ss-soft-hover: #D1E7F6;
  --ss-soft-pressed: #C1DCEE;
  --ss-soft-text: #326585;
  --ss-focus: #3278A8;
  --ss-outline: #B8D6E9;
  --ss-tag: #E0F0FB;
  --ss-off-line: #AEBFCD;
  --ss-off-knob: #788D9E;
  --ss-stage-top: #F5FAFE;
  --ss-stage-bottom: #E7F3FA;
  --ss-destructive: #BE2A30;
  --ss-guide-selection: #2678F5;
  --ss-guide-keyboard: #2678F5;
  --ss-guide-mouse: #EA7319;
  --ss-mask-guide: #EC3093;
  --ss-key-left-fill: #E3EEFF;
  --ss-key-left-border: #9DBAE9;
  --ss-key-left-text: #1E4178;
  --ss-key-right-fill: #FFE7F0;
  --ss-key-right-border: #E1A3BA;
  --ss-key-right-text: #7C2B4D;
  --ss-stage-background: linear-gradient(180deg, var(--ss-stage-top), var(--ss-stage-bottom));
}
[data-theme="dark"] {
  color-scheme: dark;
  --ss-background: #1A1A1A;
  --ss-surface: #242424;
  --ss-field: #242424;
  --ss-line: #303030;
  --ss-border: #484848;
  --ss-text: #F0F0F0;
  --ss-muted: #C5C5C5;
  --ss-heading: #9DCEF0;
  --ss-accent: #9DCEF0;
  --ss-accent-hover: #B7DEF7;
  --ss-accent-pressed: #83BBE3;
  --ss-selection: #2F373C;
  --ss-selection-text: #B7DEF7;
  --ss-on-accent: #141414;
  --ss-button-border: #5A5A5A;
  --ss-button-hover: #303030;
  --ss-button-pressed: #3A3A3A;
  --ss-soft: #303030;
  --ss-soft-hover: #3A3A3A;
  --ss-soft-pressed: #484848;
  --ss-soft-text: #F0F0F0;
  --ss-focus: #9DCEF0;
  --ss-outline: #5A5A5A;
  --ss-tag: #2A3034;
  --ss-off-line: #7A7A7A;
  --ss-off-knob: #C5C5C5;
  --ss-stage-top: #262626;
  --ss-stage-bottom: #1E1E1E;
  --ss-destructive: #FF8589;
  --ss-guide-selection: #2678F5;
  --ss-guide-keyboard: #2678F5;
  --ss-guide-mouse: #EA7319;
  --ss-mask-guide: #EC3093;
  --ss-key-left-fill: #23364E;
  --ss-key-left-border: #436088;
  --ss-key-left-text: #CAE0FF;
  --ss-key-right-fill: #492837;
  --ss-key-right-border: #854B64;
  --ss-key-right-text: #FFD2E4;
  --ss-stage-background: linear-gradient(180deg, var(--ss-stage-top), var(--ss-stage-bottom));
}