/* AUTO-GENERATED by bases/tokens/generate-design-tokens.ts — do not edit by hand. */
/* package/src/tokens/tokens.css 에서 verbatim 복사 (2026-08-20) — 갱신 시 원본과 diff로 재동기화.
   정본은 @dsai/ui 디자인 시스템 저장소. 소비처: public_request_form.html (라이트 테마 고정). */
:root {
  --border-width-none: 0px;
  --border-width-default: 1px;
  --border-width-strong: 2px;
  --border-style-solid: solid;
  --border-semantic-default-width: 1px;
  --border-semantic-default-style: solid;
  --border-semantic-default-color: #5D5E61;
  --border-semantic-subtle-width: 1px;
  --border-semantic-subtle-style: solid;
  --border-semantic-subtle-color: #2F3033;
  --border-semantic-strong-width: 2px;
  --border-semantic-strong-style: solid;
  --border-semantic-strong-color: #A3A3A3;
  --border-semantic-interactive-width: 1px;
  --border-semantic-interactive-style: solid;
  --border-semantic-interactive-color: #5D5E61;
  --border-semantic-focus-width: 2px;
  --border-semantic-focus-style: solid;
  --border-semantic-focus-color: #7D4EFF;
  --border-semantic-error-width: 1px;
  --border-semantic-error-style: solid;
  --border-semantic-error-color: #FF787A;
  --border-semantic-divider-width: 1px;
  --border-semantic-divider-style: solid;
  --border-semantic-divider-color: #2F3033;
  --breakpoint-sm: 360px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1440px;
  --breakpoint-xl: 1920px;
  --color-primitive-brand-0: #ffffff;
  --color-primitive-brand-50: #F4F0FF;
  --color-primitive-brand-100: #E5DBFF;
  --color-primitive-brand-200: #C9B2FF;
  --color-primitive-brand-300: #AD8FFF;
  --color-primitive-brand-400: #946EFF;
  --color-primitive-brand-500: #7D4EFF;
  --color-primitive-brand-600: #6134D1;
  --color-primitive-brand-700: #4B25A8;
  --color-primitive-brand-800: #391D85;
  --color-primitive-brand-900: #22184A;
  --color-primitive-brand-1000: #000000;
  --color-primitive-status-error-0: #ffffff;
  --color-primitive-status-error-50: #FCD7D8;
  --color-primitive-status-error-100: #FAAFB0;
  --color-primitive-status-error-200: #FC9395;
  --color-primitive-status-error-300: #FF787A;
  --color-primitive-status-error-400: #E13F42;
  --color-primitive-status-error-500: #BA0A0D;
  --color-primitive-status-error-600: #940002;
  --color-primitive-status-error-700: #7E0002;
  --color-primitive-status-error-800: #680001;
  --color-primitive-status-error-900: #340000;
  --color-primitive-status-error-1000: #000000;
  --color-primitive-neutral-0: #ffffff;
  --color-primitive-neutral-50: #F0F0F3;
  --color-primitive-neutral-100: #E2E2E5;
  --color-primitive-neutral-150: #D1D1D1;
  --color-primitive-neutral-200: #C6C6C9;
  --color-primitive-neutral-300: #B0B0B3;
  --color-primitive-neutral-350: #A3A3A3;
  --color-primitive-neutral-400: #909093;
  --color-primitive-neutral-500: #76767A;
  --color-primitive-neutral-600: #5D5E61;
  --color-primitive-neutral-700: #46474A;
  --color-primitive-neutral-800: #2F3033;
  --color-primitive-neutral-850: #222224;
  --color-primitive-neutral-900: #18181A;
  --color-primitive-neutral-1000: #000000;
  --color-primitive-lime-50: #ECF9E0;
  --color-primitive-lime-200: #D0EBA8;
  --color-primitive-lime-300: #A8D95E;
  --color-primitive-lime-400: #85C226;
  --color-primitive-lime-500: #689F1C;
  --color-primitive-lime-600: #4E7A13;
  --color-primitive-lime-800: #445A1E;
  --color-primitive-lime-900: #103020;
  --color-primitive-cyan-50: #EDFCFF;
  --color-primitive-cyan-200: #B2EBF2;
  --color-primitive-cyan-300: #80DEEA;
  --color-primitive-cyan-400: #26C6DA;
  --color-primitive-cyan-500: #00ACC1;
  --color-primitive-cyan-600: #008591;
  --color-primitive-cyan-800: #005E69;
  --color-primitive-cyan-900: #0F2E38;
  --color-semantic-bg-page: #18181A;
  --color-semantic-bg-scrim: rgba(0, 0, 0, 0.8);
  --color-semantic-bg-surface-base: #222224;
  --color-semantic-bg-surface-elevated: #222224;
  --color-semantic-bg-surface-floating: #2F3033;
  --color-semantic-bg-fill-primary-solid: #ffffff;
  --color-semantic-bg-fill-secondary-overlay: rgba(255, 255, 255, 0.15);
  --color-semantic-bg-fill-tertiary-solid: #2F3033;
  --color-semantic-bg-fill-tertiary-overlay: rgba(255, 255, 255, 0.1);
  --color-semantic-bg-fill-accent-medium: #6134D1;
  --color-semantic-bg-fill-accent-subtle: #22184A;
  --color-semantic-bg-fill-disabled: #222224;
  --color-semantic-bg-fill-danger: #BA0A0D;
  --color-semantic-border-subtle: #2F3033;
  --color-semantic-border-medium: #5D5E61;
  --color-semantic-border-strong: #A3A3A3;
  --color-semantic-border-static-white: #D1D1D1;
  --color-semantic-border-inverse: #000000;
  --color-semantic-border-brand-strong: #7D4EFF;
  --color-semantic-border-brand-medium: #AD8FFF;
  --color-semantic-border-danger: #FF787A;
  --color-semantic-icon-primary: #ffffff;
  --color-semantic-icon-secondary: #A3A3A3;
  --color-semantic-icon-tertiary: #76767A;
  --color-semantic-icon-inverse: #18181A;
  --color-semantic-icon-brand: #946EFF;
  --color-semantic-icon-danger: #FF787A;
  --color-semantic-icon-static-white: #ffffff;
  --color-semantic-text-primary: #ffffff;
  --color-semantic-text-secondary: #D1D1D1;
  --color-semantic-text-tertiary: #A3A3A3;
  --color-semantic-text-quaternary: #76767A;
  --color-semantic-text-inverse-primary: #000000;
  --color-semantic-text-inverse-secondary: #5D5E61;
  --color-semantic-text-inverse-tertiary: #909093;
  --color-semantic-text-brand-primary: #AD8FFF;
  --color-semantic-text-brand-strong: #AD8FFF;
  --color-semantic-text-brand-secondary: #946EFF;
  --color-semantic-text-danger: #FF787A;
  --color-semantic-text-static-white: #ffffff;
  --color-semantic-text-static-black: #000000;
  --color-semantic-text-disabled: #76767A;
  --color-semantic-text-link: #AD8FFF;
  --color-semantic-focus-ring: #7D4EFF;
  --motion-primitive-duration-instant: 0ms;
  --motion-primitive-duration-fast: 120ms;
  --motion-primitive-duration-normal: 220ms;
  --motion-primitive-duration-slow: 320ms;
  --motion-primitive-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-primitive-easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --motion-primitive-easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --motion-primitive-easing-linear: linear;
  --motion-semantic-instant-duration: 0ms;
  --motion-semantic-instant-easing: linear;
  --motion-semantic-feedback-duration: 120ms;
  --motion-semantic-feedback-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-semantic-overlay-duration: 220ms;
  --motion-semantic-overlay-easing: cubic-bezier(0, 0, 0.2, 1);
  --motion-semantic-overlay-exit-easing: cubic-bezier(0.4, 0, 1, 1);
  --motion-semantic-control-duration: 220ms;
  --motion-semantic-control-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-semantic-loading-duration: 320ms;
  --motion-semantic-loading-easing: linear;
  --opacity-primitive-5: 0.05;
  --opacity-primitive-8: 0.08;
  --opacity-primitive-10: 0.1;
  --opacity-primitive-15: 0.15;
  --opacity-primitive-20: 0.2;
  --opacity-primitive-60: 0.6;
  --opacity-primitive-72: 0.72;
  --opacity-primitive-80: 0.8;
  --opacity-semantic-state-hover: 0.08;
  --opacity-semantic-state-selected: 0.15;
  --opacity-semantic-state-pressed: 0.2;
  --opacity-semantic-state-disabled: 0.15;
  --opacity-semantic-overlay-scrim: 0.8;
  --opacity-semantic-decor-primary: 0.72;
  --opacity-semantic-decor-secondary: 0.15;
  --opacity-semantic-decor-tertiary: 0.1;
  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 999px;
  --shadow-none: none;
  --shadow-layer: 0 2px 8px rgba(0, 0, 0, 0.08);
  --size-primitive-scale-0: 0px;
  --size-primitive-scale-16: 16px;
  --size-primitive-scale-20: 20px;
  --size-primitive-scale-24: 24px;
  --size-primitive-scale-28: 28px;
  --size-primitive-scale-32: 32px;
  --size-primitive-scale-36: 36px;
  --size-primitive-scale-40: 40px;
  --size-primitive-scale-44: 44px;
  --size-primitive-scale-48: 48px;
  --size-primitive-scale-56: 56px;
  --size-primitive-scale-64: 64px;
  --size-primitive-scale-96: 96px;
  --size-primitive-scale-120: 120px;
  --size-primitive-scale-240: 240px;
  --size-primitive-scale-360: 360px;
  --size-primitive-scale-480: 480px;
  --size-primitive-scale-800: 800px;
  --size-primitive-scale-1080: 1080px;
  --size-primitive-scale-1440: 1440px;
  --size-semantic-control-height-sm: 36px;
  --size-semantic-control-height-md: 48px;
  --size-semantic-icon-sm: 16px;
  --size-semantic-icon-md: 20px;
  --size-semantic-icon-lg: 24px;
  --size-semantic-touch-target-min: 44px;
  --size-semantic-content-width-reading: 800px;
  --size-semantic-content-width-default: 1080px;
  --size-semantic-content-width-wide: 1440px;
  --size-semantic-overlay-width-default: 480px;
  --size-semantic-overlay-width-narrow: 360px;
  --size-semantic-avatar-sm: 24px;
  --size-semantic-avatar-md: 32px;
  --size-semantic-avatar-lg: 40px;
  --size-semantic-thumbnail-sm: 64px;
  --size-semantic-thumbnail-md: 96px;
  --size-semantic-thumbnail-lg: 120px;
  --size-semantic-badge-height-md: 24px;
  --size-semantic-menu-item-height-md: 40px;
  --size-component-button-height-lg: 48px;
  --size-component-button-height-md: 48px;
  --size-component-button-height-sm: 36px;
  --size-component-button-height-text: 28px;
  --size-component-button-icon-size: 16px;
  --size-component-gnb-height: 56px;
  --size-component-gnb-container-width: 1080px;
  --size-component-hero-media-max-width: 1080px;
  --size-component-sticky-steps-container-max-width: 1080px;
  --size-component-author-byline-avatar-size: 24px;
  --size-component-article-card-image-height: 96px;
  --size-component-related-articles-thumbnail-size: 64px;
  --size-component-badge-height: 24px;
  --size-component-dropdown-menu-menu-item-height: 40px;
  --size-component-text-field-height: 48px;
  --size-component-search-field-height: 48px;
  --size-component-checkbox-size: 20px;
  --size-component-icon-button-size-md: 48px;
  --size-component-icon-button-size-sm: 36px;
  --size-component-icon-button-icon-size: 20px;
  --size-component-tag-height: 28px;
  --size-component-pagination-item-size: 36px;
  --size-component-tab-item-height: 36px;
  --size-component-segmented-control-height: 48px;
  --size-component-segmented-control-item-height: 40px;
  --size-component-toc-width: 240px;
  --size-component-dialog-width: 480px;
  --size-component-toast-width: 360px;
  --size-component-article-card-image-width-horizontal: 120px;
  --space-primitive-scale-0: 0px;
  --space-primitive-scale-2: 2px;
  --space-primitive-scale-4: 4px;
  --space-primitive-scale-8: 8px;
  --space-primitive-scale-10: 10px;
  --space-primitive-scale-12: 12px;
  --space-primitive-scale-16: 16px;
  --space-primitive-scale-20: 20px;
  --space-primitive-scale-22: 22px;
  --space-primitive-scale-24: 24px;
  --space-primitive-scale-28: 28px;
  --space-primitive-scale-32: 32px;
  --space-primitive-scale-40: 40px;
  --space-primitive-scale-48: 48px;
  --space-primitive-scale-56: 56px;
  --space-primitive-scale-64: 64px;
  --space-primitive-scale-72: 72px;
  --space-primitive-scale-80: 80px;
  --space-primitive-scale-88: 88px;
  --space-primitive-scale-96: 96px;
  --space-primitive-scale-104: 104px;
  --space-primitive-scale-120: 120px;
  --space-semantic-inline-xs: 2px;
  --space-semantic-inline-sm: 4px;
  --space-semantic-inline-md: 8px;
  --space-semantic-inline-lg: 12px;
  --space-semantic-inline-xl: 16px;
  --space-semantic-stack-xs: 4px;
  --space-semantic-stack-sm: 8px;
  --space-semantic-stack-md: 12px;
  --space-semantic-stack-lg: 16px;
  --space-semantic-stack-xl: 24px;
  --space-semantic-section-md: 64px;
  --space-semantic-section-lg: 96px;
  --space-semantic-page-gutter-md: 20px;
  --space-component-button-padding-x-lg: 16px;
  --space-component-button-padding-y-lg: 12px;
  --space-component-button-gap-lg: 4px;
  --space-component-button-padding-x-md: 12px;
  --space-component-button-padding-y-md: 12px;
  --space-component-button-gap-md: 4px;
  --space-component-button-padding-x-sm: 12px;
  --space-component-button-padding-y-sm: 8px;
  --space-component-button-gap-sm: 2px;
  --space-component-gnb-padding-x: 20px;
  --space-component-gnb-padding-y: 0px;
  --space-component-gnb-gap: 10px;
  --space-component-gnb-nav-gap: 4px;
  --space-component-gnb-actions-gap: 8px;
  --space-component-gnb-mobileMenu-padding-y: 12px;
  --space-component-gnb-mobileMenu-gap: 20px;
  --space-component-gnb-mobile-nav-gap: 8px;
  --space-component-hero-padding-top: 96px;
  --space-component-hero-padding-bottom: 96px;
  --space-component-hero-gap: 24px;
  --space-component-announcement-pill-padding-top: 12px;
  --space-component-announcement-pill-padding-right: 16px;
  --space-component-announcement-pill-padding-bottom: 12px;
  --space-component-announcement-pill-padding-left: 22px;
  --space-component-announcement-pill-gap: 8px;
  --space-component-text-field-padding-x: 16px;
  --space-component-text-field-padding-y: 12px;
  --space-component-text-field-gap: 8px;
  --space-component-search-field-padding-x: 16px;
  --space-component-search-field-padding-y: 12px;
  --space-component-search-field-gap: 8px;
  --space-component-checkbox-gap: 8px;
  --space-component-icon-button-padding-md: 12px;
  --space-component-icon-button-padding-sm: 8px;
  --space-component-tag-padding-x: 8px;
  --space-component-tag-padding-y: 4px;
  --space-component-badge-padding-x: 8px;
  --space-component-badge-padding-y: 2px;
  --space-component-dropdown-menu-padding: 8px;
  --space-component-dropdown-menu-item-padding-x: 16px;
  --space-component-dropdown-menu-item-gap: 8px;
  --space-component-accordion-item-padding-y: 16px;
  --space-component-accordion-item-gap: 8px;
  --space-component-card-padding: 24px;
  --space-component-card-gap: 16px;
  --space-component-action-card-padding: 24px;
  --space-component-action-card-gap: 16px;
  --space-component-pricing-card-padding: 32px;
  --space-component-pricing-card-gap: 16px;
  --space-component-pricing-card-row-gap: 20px;
  --space-component-article-card-padding: 16px;
  --space-component-article-card-gap: 8px;
  --space-component-related-articles-gap: 16px;
  --space-component-related-articles-item-gap: 8px;
  --space-component-carousel-gap: 16px;
  --space-component-marquee-gap: 64px;
  --space-component-toc-gap: 8px;
  --space-component-toc-item-padding-y: 4px;
  --space-component-pagination-gap: 8px;
  --space-component-pagination-item-padding-x: 12px;
  --space-component-tabs-gap: 24px;
  --space-component-tab-item-padding-x: 16px;
  --space-component-segmented-control-padding: 4px;
  --space-component-segmented-control-item-padding-x: 16px;
  --space-component-segmented-control-item-padding-y: 8px;
  --space-component-segmented-control-item-gap: 8px;
  --space-component-author-byline-gap: 8px;
  --space-component-divider-margin-y: 24px;
  --space-component-feature-section-gap: 32px;
  --space-component-cta-section-gap: 24px;
  --space-component-sticky-steps-padding-y: 64px;
  --space-component-sticky-steps-columns-gap: 24px;
  --space-component-sticky-steps-step-gap: 24px;
  --space-component-sticky-steps-content-gap: 12px;
  --space-component-sticky-steps-sticky-inset: 16px;
  --space-component-footer-padding-y: 48px;
  --space-component-footer-gap: 24px;
  --space-component-dialog-padding: 24px;
  --space-component-dialog-gap: 16px;
  --space-component-toast-padding: 16px;
  --space-component-toast-gap: 8px;
  --space-component-section-header-gap: 16px;
  --space-component-empty-state-padding-y: 48px;
  --space-component-banner-slot-gap: 16px;
  --typography-primitive-font-family-sans: Pretendard;
  --typography-primitive-font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  --typography-primitive-weight-regular: 400;
  --typography-primitive-weight-medium: 500;
  --typography-primitive-weight-semibold: 600;
  --typography-primitive-weight-bold: 700;
  --typography-primitive-letter-spacing-normal: 0em;
  --typography-primitive-letter-spacing-tight: -0.01em;
  --typography-primitive-letter-spacing-tighter: -0.02em;
  --typography-primitive-letter-spacing-display: -0.025em;
  --typography-primitive-size-100: 12px;
  --typography-primitive-size-200: 13px;
  --typography-primitive-size-300: 14px;
  --typography-primitive-size-400: 15px;
  --typography-primitive-size-500: 16px;
  --typography-primitive-size-600: 17px;
  --typography-primitive-size-700: 18px;
  --typography-primitive-size-800: 20px;
  --typography-primitive-size-900: 22px;
  --typography-primitive-size-1000: 24px;
  --typography-primitive-size-1100: 26px;
  --typography-primitive-size-1200: 28px;
  --typography-primitive-size-1300: 30px;
  --typography-primitive-size-1400: 32px;
  --typography-primitive-size-1500: 36px;
  --typography-primitive-size-1600: 40px;
  --typography-primitive-size-1700: 42px;
  --typography-primitive-size-1800: 50px;
  --typography-primitive-line-height-50: 16px;
  --typography-primitive-line-height-100: 18px;
  --typography-primitive-line-height-200: 20px;
  --typography-primitive-line-height-300: 22px;
  --typography-primitive-line-height-400: 24px;
  --typography-primitive-line-height-500: 26px;
  --typography-primitive-line-height-600: 28px;
  --typography-primitive-line-height-700: 30px;
  --typography-primitive-line-height-800: 32px;
  --typography-primitive-line-height-900: 36px;
  --typography-primitive-line-height-950: 38px;
  --typography-primitive-line-height-1000: 40px;
  --typography-primitive-line-height-1050: 44px;
  --typography-primitive-line-height-1100: 48px;
  --typography-primitive-line-height-1150: 52px;
  --typography-primitive-line-height-1175: 56px;
  --typography-primitive-line-height-1200: 60px;
  --typography-primitive-line-height-1300: 64px;
  --typography-semantic-display-m-font-family: Pretendard;
  --typography-semantic-display-m-size: 36px;
  --typography-semantic-display-m-line-height: 44px;
  --typography-semantic-display-m-weight: 700;
  --typography-semantic-display-m-letter-spacing: -0.025em;
  --typography-semantic-heading-l-font-family: Pretendard;
  --typography-semantic-heading-l-size: 28px;
  --typography-semantic-heading-l-line-height: 36px;
  --typography-semantic-heading-l-weight: 600;
  --typography-semantic-heading-l-letter-spacing: -0.01em;
  --typography-semantic-heading-m-font-family: Pretendard;
  --typography-semantic-heading-m-size: 26px;
  --typography-semantic-heading-m-line-height: 32px;
  --typography-semantic-heading-m-weight: 600;
  --typography-semantic-heading-m-letter-spacing: -0.01em;
  --typography-semantic-heading-s-font-family: Pretendard;
  --typography-semantic-heading-s-size: 22px;
  --typography-semantic-heading-s-line-height: 24px;
  --typography-semantic-heading-s-weight: 600;
  --typography-semantic-heading-s-letter-spacing: -0.01em;
  --typography-semantic-body-l-font-family: Pretendard;
  --typography-semantic-body-l-size: 16px;
  --typography-semantic-body-l-line-height: 24px;
  --typography-semantic-body-l-weight: 400;
  --typography-semantic-body-l-letter-spacing: 0em;
  --typography-semantic-body-m-font-family: Pretendard;
  --typography-semantic-body-m-size: 15px;
  --typography-semantic-body-m-line-height: 20px;
  --typography-semantic-body-m-weight: 400;
  --typography-semantic-body-m-letter-spacing: 0em;
  --typography-semantic-body-s-font-family: Pretendard;
  --typography-semantic-body-s-size: 14px;
  --typography-semantic-body-s-line-height: 16px;
  --typography-semantic-body-s-weight: 400;
  --typography-semantic-body-s-letter-spacing: 0em;
  --typography-semantic-label-l-font-family: Pretendard;
  --typography-semantic-label-l-size: 16px;
  --typography-semantic-label-l-line-height: 24px;
  --typography-semantic-label-l-weight: 500;
  --typography-semantic-label-l-letter-spacing: 0em;
  --typography-semantic-label-m-font-family: Pretendard;
  --typography-semantic-label-m-size: 14px;
  --typography-semantic-label-m-line-height: 20px;
  --typography-semantic-label-m-weight: 500;
  --typography-semantic-label-m-letter-spacing: 0em;
  --typography-semantic-label-s-font-family: Pretendard;
  --typography-semantic-label-s-size: 13px;
  --typography-semantic-label-s-line-height: 16px;
  --typography-semantic-label-s-weight: 500;
  --typography-semantic-label-s-letter-spacing: 0em;
  --typography-semantic-caption-m-font-family: Pretendard;
  --typography-semantic-caption-m-size: 12px;
  --typography-semantic-caption-m-line-height: 16px;
  --typography-semantic-caption-m-weight: 400;
  --typography-semantic-caption-m-letter-spacing: 0em;
  --typography-semantic-cms-heading-1-font-family: Pretendard;
  --typography-semantic-cms-heading-1-size: 32px;
  --typography-semantic-cms-heading-1-line-height: 44px;
  --typography-semantic-cms-heading-1-weight: 700;
  --typography-semantic-cms-heading-1-letter-spacing: -0.01em;
  --typography-semantic-cms-heading-2-font-family: Pretendard;
  --typography-semantic-cms-heading-2-size: 26px;
  --typography-semantic-cms-heading-2-line-height: 36px;
  --typography-semantic-cms-heading-2-weight: 700;
  --typography-semantic-cms-heading-2-letter-spacing: -0.01em;
  --typography-semantic-cms-heading-3-font-family: Pretendard;
  --typography-semantic-cms-heading-3-size: 22px;
  --typography-semantic-cms-heading-3-line-height: 32px;
  --typography-semantic-cms-heading-3-weight: 600;
  --typography-semantic-cms-heading-3-letter-spacing: -0.01em;
  --typography-semantic-cms-heading-4-font-family: Pretendard;
  --typography-semantic-cms-heading-4-size: 18px;
  --typography-semantic-cms-heading-4-line-height: 28px;
  --typography-semantic-cms-heading-4-weight: 600;
  --typography-semantic-cms-heading-4-letter-spacing: -0.01em;
  --typography-semantic-cms-body-font-family: Pretendard;
  --typography-semantic-cms-body-size: 16px;
  --typography-semantic-cms-body-line-height: 26px;
  --typography-semantic-cms-body-weight: 400;
  --typography-semantic-cms-body-letter-spacing: 0em;
  --z-index-base: 0;
  --z-index-sticky: 100;
  --z-index-overlay: 200;
  --z-index-modal: 300;
  --z-index-toast: 400;
  --z-index-tooltip: 500;
}

:root[data-theme="light"] {
  --border-semantic-default-color: #B0B0B3;
  --border-semantic-subtle-color: #E2E2E5;
  --border-semantic-strong-color: #46474A;
  --border-semantic-interactive-color: #B0B0B3;
  --border-semantic-error-color: #BA0A0D;
  --border-semantic-divider-color: #E2E2E5;
  --color-semantic-bg-page: #ffffff;
  --color-semantic-bg-scrim: rgba(0, 0, 0, 0.6);
  --color-semantic-bg-surface-base: #ffffff;
  --color-semantic-bg-surface-elevated: #ffffff;
  --color-semantic-bg-surface-floating: #ffffff;
  --color-semantic-bg-fill-primary-solid: #18181A;
  --color-semantic-bg-fill-secondary-overlay: rgba(0, 0, 0, 0.1);
  --color-semantic-bg-fill-tertiary-solid: #F0F0F3;
  --color-semantic-bg-fill-tertiary-overlay: rgba(0, 0, 0, 0.05);
  --color-semantic-bg-fill-accent-medium: #7D4EFF;
  --color-semantic-bg-fill-accent-subtle: #F4F0FF;
  --color-semantic-bg-fill-disabled: #E2E2E5;
  --color-semantic-bg-fill-danger: #E13F42;
  --color-semantic-border-subtle: #E2E2E5;
  --color-semantic-border-medium: #B0B0B3;
  --color-semantic-border-strong: #46474A;
  --color-semantic-border-static-white: #ffffff;
  --color-semantic-border-inverse: #ffffff;
  --color-semantic-border-brand-medium: #946EFF;
  --color-semantic-border-danger: #BA0A0D;
  --color-semantic-icon-primary: #2F3033;
  --color-semantic-icon-secondary: #5D5E61;
  --color-semantic-icon-tertiary: #909093;
  --color-semantic-icon-inverse: #ffffff;
  --color-semantic-icon-brand: #7D4EFF;
  --color-semantic-icon-danger: #E13F42;
  --color-semantic-text-primary: #000000;
  --color-semantic-text-secondary: #2F3033;
  --color-semantic-text-tertiary: #5D5E61;
  --color-semantic-text-quaternary: #909093;
  --color-semantic-text-inverse-primary: #ffffff;
  --color-semantic-text-inverse-secondary: #A3A3A3;
  --color-semantic-text-inverse-tertiary: #76767A;
  --color-semantic-text-brand-primary: #7D4EFF;
  --color-semantic-text-brand-strong: #6134D1;
  --color-semantic-text-danger: #E13F42;
  --color-semantic-text-disabled: #909093;
  --color-semantic-text-link: #7D4EFF;
  --opacity-semantic-state-hover: 0.05;
  --opacity-semantic-state-selected: 0.1;
  --opacity-semantic-state-pressed: 0.15;
  --opacity-semantic-state-disabled: 0.1;
  --opacity-semantic-overlay-scrim: 0.6;
  --opacity-semantic-decor-primary: 0.6;
  --opacity-semantic-decor-secondary: 0.1;
  --opacity-semantic-decor-tertiary: 0.05;
}

@media (min-width: 768px) {
  :root {
    --size-component-gnb-height: 56px;
    --space-semantic-section-md: 80px;
    --space-semantic-section-lg: 120px;
    --space-semantic-page-gutter-md: 20px;
    --space-component-gnb-padding-x: 20px;
    --space-component-hero-padding-top: 120px;
    --space-component-hero-padding-bottom: 120px;
    --space-component-sticky-steps-padding-y: 80px;
    --typography-semantic-display-m-size: 42px;
    --typography-semantic-display-m-line-height: 52px;
    --typography-semantic-heading-l-size: 32px;
    --typography-semantic-heading-l-line-height: 44px;
    --typography-semantic-heading-m-size: 30px;
    --typography-semantic-heading-m-line-height: 36px;
    --typography-semantic-heading-s-size: 24px;
    --typography-semantic-heading-s-line-height: 28px;
    --typography-semantic-body-l-size: 18px;
    --typography-semantic-body-l-line-height: 28px;
    --typography-semantic-body-m-size: 16px;
    --typography-semantic-body-m-line-height: 24px;
    --typography-semantic-body-s-size: 15px;
    --typography-semantic-body-s-line-height: 20px;
    --typography-semantic-label-l-size: 16px;
    --typography-semantic-label-l-line-height: 24px;
    --typography-semantic-label-m-size: 14px;
    --typography-semantic-label-m-line-height: 20px;
    --typography-semantic-label-s-size: 14px;
    --typography-semantic-label-s-line-height: 20px;
    --typography-semantic-caption-m-size: 14px;
    --typography-semantic-caption-m-line-height: 16px;
    --typography-semantic-cms-heading-1-size: 36px;
    --typography-semantic-cms-heading-1-line-height: 48px;
    --typography-semantic-cms-heading-2-size: 28px;
    --typography-semantic-cms-heading-2-line-height: 38px;
    --typography-semantic-cms-heading-3-size: 24px;
    --typography-semantic-cms-heading-3-line-height: 32px;
    --typography-semantic-cms-heading-4-size: 20px;
    --typography-semantic-cms-heading-4-line-height: 28px;
    --typography-semantic-cms-body-size: 17px;
    --typography-semantic-cms-body-line-height: 28px;
  }
}

@media (min-width: 1440px) {
  :root {
    --size-component-gnb-height: 64px;
    --space-semantic-section-md: 80px;
    --space-semantic-section-lg: 120px;
    --space-semantic-page-gutter-md: 80px;
    --space-component-gnb-padding-x: 80px;
    --space-component-hero-padding-top: 120px;
    --space-component-hero-padding-bottom: 120px;
    --space-component-sticky-steps-padding-y: 80px;
    --typography-semantic-display-m-size: 50px;
    --typography-semantic-display-m-line-height: 64px;
    --typography-semantic-heading-l-size: 40px;
    --typography-semantic-heading-l-line-height: 52px;
    --typography-semantic-heading-m-size: 36px;
    --typography-semantic-heading-m-line-height: 44px;
    --typography-semantic-heading-s-size: 28px;
    --typography-semantic-heading-s-line-height: 32px;
    --typography-semantic-body-l-size: 20px;
    --typography-semantic-body-l-line-height: 28px;
    --typography-semantic-body-m-size: 18px;
    --typography-semantic-body-m-line-height: 28px;
    --typography-semantic-body-s-size: 16px;
    --typography-semantic-body-s-line-height: 24px;
    --typography-semantic-label-l-size: 16px;
    --typography-semantic-label-l-line-height: 24px;
    --typography-semantic-label-m-size: 16px;
    --typography-semantic-label-m-line-height: 24px;
    --typography-semantic-label-s-size: 14px;
    --typography-semantic-label-s-line-height: 20px;
    --typography-semantic-caption-m-size: 14px;
    --typography-semantic-caption-m-line-height: 20px;
    --typography-semantic-cms-heading-1-size: 40px;
    --typography-semantic-cms-heading-1-line-height: 56px;
    --typography-semantic-cms-heading-2-size: 32px;
    --typography-semantic-cms-heading-2-line-height: 44px;
    --typography-semantic-cms-heading-3-size: 26px;
    --typography-semantic-cms-heading-3-line-height: 36px;
    --typography-semantic-cms-heading-4-size: 22px;
    --typography-semantic-cms-heading-4-line-height: 32px;
    --typography-semantic-cms-body-size: 18px;
    --typography-semantic-cms-body-line-height: 30px;
  }
}

/* ── component tokens (app/src/tokens/component.json) ── */
:root {
  --size-component-progress-bar-height: 8px;
  --size-component-audio-player-waveform-height: 48px;
  --size-component-audio-player-waveform-bar-min-width: 2px;
  --size-component-audio-player-waveform-bar-gap: 1px;
  --size-component-text-preview-max-height: 240px;
  --size-component-audio-player-play-icon-size: 28px;
}