/* 뿔스튜디오 제품 토큰 v4.5.0. tools/build_tokens.py가 tokens/*.tokens.json에서 생성. 편집 금지, 값은 JSON에서. 2026-11-06 */
/* 층: sys 변수는 층 이름 없이 --bb-bg-brand-solid, ref 변수는 --bb-ref-orange-600. 화면은 sys만 쓴다. */

:root {
  --bb-ref-orange-50: #FEF7EE;
  --bb-ref-orange-100: #FFECD8;
  --bb-ref-orange-200: #FFD6B0;
  --bb-ref-orange-300: #FFB883;
  --bb-ref-orange-400: #FF977E;
  --bb-ref-orange-500: #FF6C32;
  --bb-ref-orange-600: #FF4201;
  --bb-ref-orange-700: #C93200;
  --bb-ref-orange-800: #9E2F0F;
  --bb-ref-orange-900: #81270C;
  --bb-ref-orange-950: #441303;
  --bb-ref-red-50: #FFF6F6;
  --bb-ref-red-100: #FFEAEA;
  --bb-ref-red-200: #FFD1D1;
  --bb-ref-red-300: #FFB2B3;
  --bb-ref-red-400: #FF8289;
  --bb-ref-red-500: #FF6572;
  --bb-ref-red-600: #F3445B;
  --bb-ref-red-700: #C92E46;
  --bb-ref-red-800: #A51C34;
  --bb-ref-red-900: #851B2C;
  --bb-ref-red-950: #451016;
  --bb-ref-amber-50: #FFF7ED;
  --bb-ref-amber-100: #FFEDD5;
  --bb-ref-amber-200: #FFD7A1;
  --bb-ref-amber-300: #F7BE6B;
  --bb-ref-amber-400: #E1A035;
  --bb-ref-amber-500: #D29120;
  --bb-ref-amber-600: #BB8117;
  --bb-ref-amber-700: #9A6700;
  --bb-ref-amber-800: #7B5100;
  --bb-ref-amber-900: #644202;
  --bb-ref-amber-950: #352101;
  --bb-ref-green-50: #F3FBF2;
  --bb-ref-green-100: #E0F7E0;
  --bb-ref-green-200: #BEEDBE;
  --bb-ref-green-300: #9CDD9D;
  --bb-ref-green-400: #76C479;
  --bb-ref-green-500: #62B667;
  --bb-ref-green-600: #50A455;
  --bb-ref-green-700: #3F8444;
  --bb-ref-green-800: #326935;
  --bb-ref-green-900: #29562B;
  --bb-ref-green-950: #122C14;
  --bb-ref-blue-50: #F4F9FF;
  --bb-ref-blue-100: #E5F1FF;
  --bb-ref-blue-200: #C6E2FF;
  --bb-ref-blue-300: #A0CEFF;
  --bb-ref-blue-400: #6AB3FD;
  --bb-ref-blue-500: #4DA5F9;
  --bb-ref-blue-600: #2E92EA;
  --bb-ref-blue-700: #1175C6;
  --bb-ref-blue-800: #065DA0;
  --bb-ref-blue-900: #094C82;
  --bb-ref-blue-950: #042746;
  --bb-ref-gray-0: #FFFFFF;
  --bb-ref-gray-50: #FBF8F4;
  --bb-ref-gray-100: #F3EFEC;
  --bb-ref-gray-200: #E1DEDA;
  --bb-ref-gray-300: #CCC9C5;
  --bb-ref-gray-400: #B1ADAA;
  --bb-ref-gray-500: #A39F9C;
  --bb-ref-gray-600: #918D8A;
  --bb-ref-gray-700: #75726F;
  --bb-ref-gray-800: #5D5A57;
  --bb-ref-gray-900: #4C4946;
  --bb-ref-gray-950: #343231;
  --bb-ref-gray-960: #2A2827;
  --bb-ref-gray-970: #211F1D;
  --bb-ref-gray-980: #171614;
  --bb-ref-gray-990: #110F0E;
  --bb-ref-gray-1000: #000000;
  --bb-ref-lilac-100: #F3EBFF;
  --bb-ref-lilac-300: #D2BDFC;
  --bb-ref-lilac-800: #664893;
  --bb-ref-lilac-950: #2A1E3E;
  --bb-ref-teal-100: #D7F8F3;
  --bb-ref-teal-300: #8BDBD0;
  --bb-ref-teal-800: #006B61;
  --bb-ref-teal-950: #002D29;
  --bb-ref-gray-cool-1: #F8FAFC;
  --bb-ref-gray-cool-2: #F4F7FB;
  --bb-ref-gray-cool-3: #F1F5F9;
  --bb-ref-gray-cool-4: #EAEFF5;
  --bb-ref-gray-cool-5: #E6ECF2;
  --bb-ref-gray-cool-6: #E2E8F0;
  --bb-ref-gray-cool-7: #CBD5E1;
  --bb-ref-gray-cool-8: #94A3B8;
  --bb-ref-gray-cool-9: #8A94A6;
  --bb-ref-gray-cool-10: #64748B;
  --bb-ref-gray-cool-11: #475569;
  --bb-ref-gray-cool-12: #0F172A;
  --bb-ref-gray-warm-1: #FBF8F4;
  --bb-ref-gray-warm-2: #F7F3F0;
  --bb-ref-gray-warm-3: #F3EFEC;
  --bb-ref-gray-warm-4: #EDE9E6;
  --bb-ref-gray-warm-5: #E7E4E0;
  --bb-ref-gray-warm-6: #E1DEDA;
  --bb-ref-gray-warm-7: #C6C2BF;
  --bb-ref-gray-warm-8: #ABA7A4;
  --bb-ref-gray-warm-9: #918D8A;
  --bb-ref-gray-warm-10: #75726F;
  --bb-ref-gray-warm-11: #5D5A57;
  --bb-ref-gray-warm-12: #171614;
  --bb-ref-bbuli-orange-1: #FFFCF8;
  --bb-ref-bbuli-orange-2: #FFF4E8;
  --bb-ref-bbuli-orange-3: #FFECD8;
  --bb-ref-bbuli-orange-4: #FFD6B0;
  --bb-ref-bbuli-orange-5: #FFCD9E;
  --bb-ref-bbuli-orange-6: #FFC48B;
  --bb-ref-bbuli-orange-7: #FFA471;
  --bb-ref-bbuli-orange-8: #FF8162;
  --bb-ref-bbuli-orange-9: #FF4201;
  --bb-ref-bbuli-orange-10: #E63B01;
  --bb-ref-bbuli-orange-11: #C93200;
  --bb-ref-bbuli-orange-12: #822913;
  --bb-ref-bbuli-blue-1: #FBFDFF;
  --bb-ref-bbuli-blue-2: #F0F7FF;
  --bb-ref-bbuli-blue-3: #E5F1FF;
  --bb-ref-bbuli-blue-4: #D3E8FF;
  --bb-ref-bbuli-blue-5: #C1DFFF;
  --bb-ref-bbuli-blue-6: #AED5FF;
  --bb-ref-bbuli-blue-7: #8AC3FD;
  --bb-ref-bbuli-blue-8: #6AB0F6;
  --bb-ref-bbuli-blue-9: #2E92EA;
  --bb-ref-bbuli-blue-10: #0077CC;
  --bb-ref-bbuli-blue-11: #065DA0;
  --bb-ref-bbuli-blue-12: #1C4A75;
  --bb-ref-bbuli-green-1: #F8FEF9;
  --bb-ref-bbuli-green-2: #ECFBED;
  --bb-ref-bbuli-green-3: #DFF7E1;
  --bb-ref-bbuli-green-4: #CAEECD;
  --bb-ref-bbuli-green-5: #B5E5B9;
  --bb-ref-bbuli-green-6: #9FDCA6;
  --bb-ref-bbuli-green-7: #76C581;
  --bb-ref-bbuli-green-8: #48AE5C;
  --bb-ref-bbuli-green-9: #34C759;
  --bb-ref-bbuli-green-10: #1AB84B;
  --bb-ref-bbuli-green-11: #007E2E;
  --bb-ref-bbuli-green-12: #0B531F;
  --bb-ref-bbuli-yellow-1: #FFFCF6;
  --bb-ref-bbuli-yellow-2: #FBF6E5;
  --bb-ref-bbuli-yellow-3: #F8EFD5;
  --bb-ref-bbuli-yellow-4: #F8EAC3;
  --bb-ref-bbuli-yellow-5: #F8E5B1;
  --bb-ref-bbuli-yellow-6: #F9E09E;
  --bb-ref-bbuli-yellow-7: #EDCE76;
  --bb-ref-bbuli-yellow-8: #E1BB47;
  --bb-ref-bbuli-yellow-9: #FFCC00;
  --bb-ref-bbuli-yellow-10: #EEBE00;
  --bb-ref-bbuli-yellow-11: #846800;
  --bb-ref-bbuli-yellow-12: #594500;
  --bb-ref-bbuli-yellow-dark-1: #191712;
  --bb-ref-bbuli-yellow-dark-2: #201C12;
  --bb-ref-bbuli-yellow-dark-3: #302400;
  --bb-ref-bbuli-yellow-dark-4: #3D2E00;
  --bb-ref-bbuli-yellow-dark-5: #4A3A00;
  --bb-ref-bbuli-yellow-dark-6: #5B4700;
  --bb-ref-bbuli-yellow-dark-7: #735A03;
  --bb-ref-bbuli-yellow-dark-8: #907415;
  --bb-ref-bbuli-yellow-dark-9: #FFCC00;
  --bb-ref-bbuli-yellow-dark-10: #FFD11A;
  --bb-ref-bbuli-yellow-dark-11: #F0CE6B;
  --bb-ref-bbuli-yellow-dark-12: #FAEABE;
  --bb-ref-bbuli-ink-1: #F8FAFC;
  --bb-ref-bbuli-ink-2: #F4F7FB;
  --bb-ref-bbuli-ink-3: #F1F5F9;
  --bb-ref-bbuli-ink-4: #EAEFF5;
  --bb-ref-bbuli-ink-5: #E6ECF2;
  --bb-ref-bbuli-ink-6: #E2E8F0;
  --bb-ref-bbuli-ink-7: #CBD5E1;
  --bb-ref-bbuli-ink-8: #94A3B8;
  --bb-ref-bbuli-ink-9: #475569;
  --bb-ref-bbuli-ink-10: #0F172A;
  --bb-ref-bbuli-ink-11: #475569;
  --bb-ref-bbuli-ink-12: #0F172A;
  --bb-ref-bbuli-purple-1: #FDFCFF;
  --bb-ref-bbuli-purple-2: #F8F5FE;
  --bb-ref-bbuli-purple-3: #F3EFFA;
  --bb-ref-bbuli-purple-4: #EAE1FC;
  --bb-ref-bbuli-purple-5: #DFD4FF;
  --bb-ref-bbuli-purple-6: #D6C7FF;
  --bb-ref-bbuli-purple-7: #C7B4FF;
  --bb-ref-bbuli-purple-8: #B7A2FF;
  --bb-ref-bbuli-purple-9: #7050C2;
  --bb-ref-bbuli-purple-10: #6442B3;
  --bb-ref-bbuli-purple-11: #6247AB;
  --bb-ref-bbuli-purple-12: #4B3E77;
  --bb-ref-bbuli-purple-dark-1: #17161B;
  --bb-ref-bbuli-purple-dark-2: #1C1B24;
  --bb-ref-bbuli-purple-dark-3: #27203D;
  --bb-ref-bbuli-purple-dark-4: #312A4C;
  --bb-ref-bbuli-purple-dark-5: #3D345D;
  --bb-ref-bbuli-purple-dark-6: #4B4171;
  --bb-ref-bbuli-purple-dark-7: #5F538D;
  --bb-ref-bbuli-purple-dark-8: #7A6BB0;
  --bb-ref-bbuli-purple-dark-9: #B7A2FF;
  --bb-ref-bbuli-purple-dark-10: #BEABFF;
  --bb-ref-bbuli-purple-dark-11: #D2C9FF;
  --bb-ref-bbuli-purple-dark-12: #EBE7FF;
  --bb-ref-gray-cool-dark-1: #151618;
  --bb-ref-gray-cool-dark-2: #1E1F23;
  --bb-ref-gray-cool-dark-3: #27292C;
  --bb-ref-gray-cool-dark-4: #303337;
  --bb-ref-gray-cool-dark-5: #464A50;
  --bb-ref-gray-cool-dark-6: #464A50;
  --bb-ref-gray-cool-dark-7: #575B62;
  --bb-ref-gray-cool-dark-8: #6E737B;
  --bb-ref-gray-cool-dark-9: #9CA0A8;
  --bb-ref-gray-cool-dark-10: #AAAEB5;
  --bb-ref-gray-cool-dark-11: #C7CACF;
  --bb-ref-gray-cool-dark-12: #F8FAFC;
  --bb-ref-bbuli-ink-dark-1: #151618;
  --bb-ref-bbuli-ink-dark-2: #1E1F23;
  --bb-ref-bbuli-ink-dark-3: #27292C;
  --bb-ref-bbuli-ink-dark-4: #303337;
  --bb-ref-bbuli-ink-dark-5: #464A50;
  --bb-ref-bbuli-ink-dark-6: #464A50;
  --bb-ref-bbuli-ink-dark-7: #575B62;
  --bb-ref-bbuli-ink-dark-8: #6E737B;
  --bb-ref-bbuli-ink-dark-9: #C7CACF;
  --bb-ref-bbuli-ink-dark-10: #F8FAFC;
  --bb-ref-bbuli-ink-dark-11: #C7CACF;
  --bb-ref-bbuli-ink-dark-12: #F8FAFC;
  --bb-bg-canvas: #FBF8F4 /* ref.gray-50 */;
  --bb-bg-surface: #FFFFFF /* ref.gray-0 */;
  --bb-bg-sunken: #F3EFEC /* ref.gray-100 */;
  --bb-bg-raised: #FFFFFF /* ref.gray-0 */;
  --bb-bg-overlay: #FFFFFF /* ref.gray-0 */;
  --bb-bg-brand-solid: #FF4201 /* ref.orange-600 */;
  --bb-bg-brand-solid-pressed: #E63B01;
  --bb-bg-brand-weak: #FFECD8 /* ref.orange-100 */;
  --bb-bg-brand-weak-pressed: #FFD6B0 /* ref.orange-200 */;
  --bb-bg-neutral-solid: #171614 /* ref.gray-980 */;
  --bb-bg-neutral-solid-pressed: #2A2827 /* ref.gray-960 */;
  --bb-bg-neutral-weak: #F3EFEC /* ref.gray-100 */;
  --bb-bg-neutral-weak-pressed: #E1DEDA /* ref.gray-200 */;
  --bb-bg-error-weak: #FFEAEA /* ref.red-100 */;
  --bb-bg-error-solid: #A51C34 /* ref.red-800 */;
  --bb-bg-warning-weak: #FFEDD5 /* ref.amber-100 */;
  --bb-bg-warning-solid: #F7BE6B /* ref.amber-300 */;
  --bb-bg-success-weak: #E0F7E0 /* ref.green-100 */;
  --bb-bg-success-solid: #326935 /* ref.green-800 */;
  --bb-bg-info-weak: #E5F1FF /* ref.blue-100 */;
  --bb-bg-info-solid: #065DA0 /* ref.blue-800 */;
  --bb-bg-tint-peach: #FFECD8 /* ref.orange-100 */;
  --bb-bg-tint-lilac: #F3EBFF /* ref.lilac-100 */;
  --bb-bg-tint-teal: #D7F8F3 /* ref.teal-100 */;
  --bb-bg-tint-gray: #F3EFEC /* sys.bg.neutral.weak.default */;
  --bb-bg-scrim: rgb(0 0 0 / 0.4);
  --bb-bg-glass: rgb(255 255 255 / 0.72);
  --bb-bg-chart-area: #FFECD8 /* sys.bg.brand.weak.default */;
  --bb-bg-key-solid: #FF4201 /* ref.bbuli-orange-9 */;
  --bb-fg: #171614 /* ref.gray-980 */;
  --bb-fg-muted: #5D5A57 /* ref.gray-800 */;
  --bb-fg-subtle: #75726F /* ref.gray-700 */;
  --bb-fg-disabled: #A39F9C /* ref.gray-500 */;
  --bb-fg-inverse: #FFFFFF /* ref.gray-0 */;
  --bb-fg-brand: #C93200 /* ref.orange-700 */;
  --bb-fg-on-brand-solid: #000000 /* ref.gray-1000 */;
  --bb-fg-on-brand-weak: #171614 /* sys.fg.default */;
  --bb-fg-on-neutral-solid: #FFFFFF /* ref.gray-0 */;
  --bb-fg-on-neutral-weak: #171614 /* sys.fg.default */;
  --bb-fg-recording: #C92E46 /* ref.red-700 */;
  --bb-fg-error: #C92E46 /* ref.red-700 */;
  --bb-fg-on-error-solid: #FFFFFF /* ref.gray-0 */;
  --bb-fg-on-error-weak: #C92E46 /* sys.fg.error */;
  --bb-fg-warning: #7B5100 /* ref.amber-800 */;
  --bb-fg-on-warning-solid: #171614 /* ref.gray-980 */;
  --bb-fg-on-warning-weak: #7B5100 /* sys.fg.warning */;
  --bb-fg-success: #326935 /* ref.green-800 */;
  --bb-fg-on-success-solid: #FFFFFF /* ref.gray-0 */;
  --bb-fg-on-success-weak: #326935 /* sys.fg.success */;
  --bb-fg-info: #065DA0 /* ref.blue-800 */;
  --bb-fg-on-info-solid: #FFFFFF /* ref.gray-0 */;
  --bb-fg-on-info-weak: #065DA0 /* sys.fg.info */;
  --bb-fg-on-tint-peach: #171614 /* sys.fg.default */;
  --bb-fg-on-tint-lilac: #664893 /* ref.lilac-800 */;
  --bb-fg-on-tint-teal: #006B61 /* ref.teal-800 */;
  --bb-fg-on-tint-gray: #171614 /* sys.fg.default */;
  --bb-fg-chart-current: #C93200 /* sys.fg.brand */;
  --bb-fg-chart-previous: #918D8A /* ref.gray-600 */;
  --bb-fg-chart-target: #171614 /* sys.fg.default */;
  --bb-fg-delta-up: #326935 /* sys.fg.success */;
  --bb-fg-delta-down: #5D5A57 /* sys.fg.muted */;
  --bb-fg-chart-reference: #E1DEDA /* sys.border.subtle */;
  --bb-fg-on-key-solid: #000000 /* ref.gray-1000 */;
  --bb-fg-key-graphic: #FF4201 /* ref.bbuli-orange-9 */;
  --bb-border-subtle: #E1DEDA /* ref.gray-200 */;
  --bb-border: #918D8A /* ref.gray-600 */;
  --bb-border-strong: #4C4946 /* ref.gray-900 */;
  --bb-border-focus: #C93200 /* sys.fg.brand */;
  --bb-border-brand: #FF4201 /* ref.orange-600 */;
  --bb-border-error: #C92E46 /* ref.red-700 */;
  --bb-border-warning: #7B5100 /* ref.amber-800 */;
  --bb-border-success: #326935 /* ref.green-800 */;
  --bb-border-info: #065DA0 /* ref.blue-800 */;
  --bb-border-glass: rgb(23 22 20 / 0.08);
  --bb-border-chart-grid: #E1DEDA /* sys.border.subtle */;
  --bb-key-1: #FFFCF8 /* ref.bbuli-orange-1 */;
  --bb-key-2: #FFF4E8 /* ref.bbuli-orange-2 */;
  --bb-key-3: #FFECD8 /* ref.bbuli-orange-3 */;
  --bb-key-4: #FFD6B0 /* ref.bbuli-orange-4 */;
  --bb-key-5: #FFCD9E /* ref.bbuli-orange-5 */;
  --bb-key-6: #FFC48B /* ref.bbuli-orange-6 */;
  --bb-key-7: #FFA471 /* ref.bbuli-orange-7 */;
  --bb-key-8: #FF8162 /* ref.bbuli-orange-8 */;
  --bb-key-9: #FF4201 /* ref.bbuli-orange-9 */;
  --bb-key-10: #E63B01 /* ref.bbuli-orange-10 */;
  --bb-key-11: #C93200 /* ref.bbuli-orange-11 */;
  --bb-key-12: #822913 /* ref.bbuli-orange-12 */;
  --bb-gray-1: #FBF8F4 /* ref.gray-warm-1 */;
  --bb-gray-2: #F7F3F0 /* ref.gray-warm-2 */;
  --bb-gray-3: #F3EFEC /* ref.gray-warm-3 */;
  --bb-gray-4: #EDE9E6 /* ref.gray-warm-4 */;
  --bb-gray-5: #E7E4E0 /* ref.gray-warm-5 */;
  --bb-gray-6: #E1DEDA /* ref.gray-warm-6 */;
  --bb-gray-7: #C6C2BF /* ref.gray-warm-7 */;
  --bb-gray-8: #ABA7A4 /* ref.gray-warm-8 */;
  --bb-gray-9: #918D8A /* ref.gray-warm-9 */;
  --bb-gray-10: #75726F /* ref.gray-warm-10 */;
  --bb-gray-11: #5D5A57 /* ref.gray-warm-11 */;
  --bb-gray-12: #171614 /* ref.gray-warm-12 */;
  --bb-format-longform: #3182F6;
  --bb-format-longform-soft: #BFDBFE;
  --bb-format-longform-strong: #1D4ED8;
  --bb-format-longform-tint: #E8F0FD;
  --bb-format-shorts: #EA580C;
  --bb-format-shorts-soft: #FDBA74;
  --bb-format-shorts-strong: #C2410C;
  --bb-format-shorts-tint: #FEF2E9;
  --bb-format-membership: #EC4899;
  --bb-format-membership-soft: #FBCFE8;
  --bb-format-membership-strong: #BE185D;
  --bb-format-membership-tint: #FCEEF5;
  --bb-platform-youtube: #9A3412;
  --bb-platform-instagram: #EA580C;
  --bb-platform-tiktok: #FDBA74;
  --bb-font-family-heading: "SUIT Variable", "Pretendard Variable", system-ui, sans-serif;
  --bb-font-family-body: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --bb-font-weight-regular: 400;
  --bb-font-weight-medium: 500;
  --bb-font-weight-bold: 700;
  --bb-type-title-lg-family: var(--bb-font-family-heading);
  --bb-type-title-lg-size: 1.75rem;
  --bb-type-title-lg-line: 1.2857;
  --bb-type-title-lg-weight: 700;
  --bb-type-title-lg-tracking: -0.01em;
  --bb-type-title-md-family: var(--bb-font-family-heading);
  --bb-type-title-md-size: 1.5rem;
  --bb-type-title-md-line: 1.3333;
  --bb-type-title-md-weight: 700;
  --bb-type-title-md-tracking: -0.01em;
  --bb-type-title-sm-family: var(--bb-font-family-heading);
  --bb-type-title-sm-size: 1.25rem;
  --bb-type-title-sm-line: 1.4;
  --bb-type-title-sm-weight: 700;
  --bb-type-title-sm-tracking: -0.005em;
  --bb-type-body-family: var(--bb-font-family-body);
  --bb-type-body-size: 1rem;
  --bb-type-body-line: 1.5;
  --bb-type-body-weight: 400;
  --bb-type-body-tracking: 0;
  --bb-type-body-strong-family: var(--bb-font-family-body);
  --bb-type-body-strong-size: 1rem;
  --bb-type-body-strong-line: 1.5;
  --bb-type-body-strong-weight: 500;
  --bb-type-body-strong-tracking: 0;
  --bb-type-body-read-family: var(--bb-font-family-body);
  --bb-type-body-read-size: 1rem;
  --bb-type-body-read-line: 1.6875;
  --bb-type-body-read-weight: 400;
  --bb-type-body-read-tracking: 0;
  --bb-type-support-family: var(--bb-font-family-body);
  --bb-type-support-size: 0.875rem;
  --bb-type-support-line: 1.5714;
  --bb-type-support-weight: 400;
  --bb-type-support-tracking: 0;
  --bb-type-support-strong-family: var(--bb-font-family-body);
  --bb-type-support-strong-size: 0.875rem;
  --bb-type-support-strong-line: 1.5714;
  --bb-type-support-strong-weight: 500;
  --bb-type-support-strong-tracking: 0;
  --bb-type-caption-family: var(--bb-font-family-body);
  --bb-type-caption-size: 0.75rem;
  --bb-type-caption-line: 1.5;
  --bb-type-caption-weight: 400;
  --bb-type-caption-tracking: 0;
  --bb-type-label-lg-family: var(--bb-font-family-body);
  --bb-type-label-lg-size: 1rem;
  --bb-type-label-lg-line: 1.5;
  --bb-type-label-lg-weight: 500;
  --bb-type-label-lg-tracking: 0;
  --bb-type-label-md-family: var(--bb-font-family-body);
  --bb-type-label-md-size: 0.875rem;
  --bb-type-label-md-line: 1.5714;
  --bb-type-label-md-weight: 500;
  --bb-type-label-md-tracking: 0;
  --bb-type-label-sm-family: var(--bb-font-family-body);
  --bb-type-label-sm-size: 0.75rem;
  --bb-type-label-sm-line: 1.5;
  --bb-type-label-sm-weight: 500;
  --bb-type-label-sm-tracking: 0;
  --bb-type-timecode-family: var(--bb-font-family-body);
  --bb-type-timecode-size: 0.875rem;
  --bb-type-timecode-line: 1.5714;
  --bb-type-timecode-weight: 500;
  --bb-type-timecode-tracking: 0;
  --bb-type-timer-family: var(--bb-font-family-body);
  --bb-type-timer-size: 3rem;
  --bb-type-timer-line: 1.1667;
  --bb-type-timer-weight: 500;
  --bb-type-timer-tracking: 0;
  --bb-type-figure-lg-family: var(--bb-font-family-body);
  --bb-type-figure-lg-size: 2.5rem;
  --bb-type-figure-lg-line: 1;
  --bb-type-figure-lg-weight: 700;
  --bb-type-figure-lg-tracking: -0.025em;
  --bb-type-figure-md-family: var(--bb-font-family-body);
  --bb-type-figure-md-size: 2rem;
  --bb-type-figure-md-line: 1;
  --bb-type-figure-md-weight: 700;
  --bb-type-figure-md-tracking: -0.025em;
  --bb-type-figure-sm-family: var(--bb-font-family-body);
  --bb-type-figure-sm-size: 1.5rem;
  --bb-type-figure-sm-line: 1.5;
  --bb-type-figure-sm-weight: 700;
  --bb-type-figure-sm-tracking: -0.025em;
  --bb-type-data-section-family: var(--bb-font-family-heading);
  --bb-type-data-section-size: 1.75rem;
  --bb-type-data-section-line: 1.5;
  --bb-type-data-section-weight: 700;
  --bb-type-data-section-tracking: -0.025em;
  --bb-type-data-card-title-family: var(--bb-font-family-body);
  --bb-type-data-card-title-size: 1rem;
  --bb-type-data-card-title-line: 1.5;
  --bb-type-data-card-title-weight: 700;
  --bb-type-data-card-title-tracking: 0;
  --bb-type-data-list-family: var(--bb-font-family-body);
  --bb-type-data-list-size: 0.9375rem;
  --bb-type-data-list-line: 1.5;
  --bb-type-data-list-weight: 400;
  --bb-type-data-list-tracking: 0;
  --bb-type-data-list-strong-family: var(--bb-font-family-body);
  --bb-type-data-list-strong-size: 0.9375rem;
  --bb-type-data-list-strong-line: 1.5;
  --bb-type-data-list-strong-weight: 600;
  --bb-type-data-list-strong-tracking: 0;
  --bb-type-data-small-family: var(--bb-font-family-body);
  --bb-type-data-small-size: 0.8125rem;
  --bb-type-data-small-line: 1.5;
  --bb-type-data-small-weight: 400;
  --bb-type-data-small-tracking: 0;
  --bb-type-data-small-strong-family: var(--bb-font-family-body);
  --bb-type-data-small-strong-size: 0.8125rem;
  --bb-type-data-small-strong-line: 1.5;
  --bb-type-data-small-strong-weight: 600;
  --bb-type-data-small-strong-tracking: 0;
  --bb-space-0-5: 2px;
  --bb-space-1: 4px;
  --bb-space-1-5: 6px;
  --bb-space-2: 8px;
  --bb-space-3: 12px;
  --bb-space-4: 16px;
  --bb-space-5: 20px;
  --bb-space-6: 24px;
  --bb-space-7: 28px;
  --bb-space-8: 32px;
  --bb-space-10: 40px;
  --bb-space-12: 48px;
  --bb-space-14: 56px;
  --bb-space-16: 64px;
  --bb-space-screen-x-compact: 16px;
  --bb-space-screen-x-medium: 24px;
  --bb-space-inset: 16px;
  --bb-space-stack: 12px;
  --bb-space-text-gap: 6px;
  --bb-space-nav-title: 20px;
  --bb-space-screen-bottom: 56px;
  --bb-space-icon-label: 8px;
  --bb-space-touch-gap: 8px;
  --bb-space-button-x-sm: 16px;
  --bb-space-button-x-md: 16px;
  --bb-space-button-x-lg: 24px;
  --bb-space-inset-wide: 24px;
  --bb-radius-xs: 4px;
  --bb-radius-sm: 8px;
  --bb-radius-md: 12px;
  --bb-radius-lg: 16px;
  --bb-radius-xl: 20px;
  --bb-radius-2xl: 28px;
  --bb-radius-3xl: 32px;
  --bb-radius-4xl: 48px;
  --bb-radius-full: 9999px;
  --bb-radius-card: 12px;
  --bb-radius-input: 12px;
  --bb-radius-button-lg: 16px;
  --bb-radius-button: 9999px;
  --bb-radius-chip: 9999px;
  --bb-radius-badge: 4px;
  --bb-radius-thumb: 8px;
  --bb-radius-dialog: 20px;
  --bb-radius-sheet: 28px;
  --bb-radius-bar: 9999px;
  --bb-radius-data-thumb: 8px;
  --bb-radius-data-inner: 12px;
  --bb-radius-data-card: 20px;
  --bb-radius-data-section: 28px;
  --bb-radius-data-pill: 9999px;
  --bb-size-button-sm: 32px;
  --bb-size-button-md: 40px;
  --bb-size-button-lg: 56px;
  --bb-size-control: 48px;
  --bb-size-touch-android: 48px;
  --bb-size-touch-web: 44px;
  --bb-size-icon-sm: 20px;
  --bb-size-icon-md: 24px;
  --bb-size-bar: 64px;
  --bb-size-border: 1px;
  --bb-size-focus-ring: 2px;
  --bb-size-focus-offset: 2px;
  --bb-size-row-dense: 40px;
  --bb-size-row-comfortable: 56px;
  --bb-layout-breakpoint-medium: 600px;
  --bb-layout-breakpoint-expanded: 840px;
  --bb-layout-breakpoint-large: 1200px;
  --bb-layout-breakpoint-xlarge: 1600px;
  --bb-layout-pane-list: 360px;
  --bb-layout-pane-list-xlarge: 412px;
  --bb-layout-pane-gap: 24px;
  --bb-layout-bar-edge: 16px;
  --bb-layout-bar-bottom: 16px;
  --bb-layout-bar-inner: 8px;
  --bb-layout-bar-gap: 4px;
  --bb-layout-reading-max: 34rem;
  --bb-shadow-raised: 0px 1px 2px 0 rgb(0 0 0 / 0.06), 0px 4px 12px 0 rgb(0 0 0 / 0.06);
  --bb-shadow-overlay: 0px 8px 24px 0 rgb(0 0 0 / 0.1), 0px 2px 6px 0 rgb(0 0 0 / 0.06);
  --bb-motion-standard-default: 168ms;
  --bb-motion-standard-fast: 119ms;
  --bb-motion-standard-slow: 257ms;
  --bb-motion-expressive-default: 257ms;
  --bb-motion-expressive-fast: 236ms;
  --bb-motion-expressive-slow: 354ms;
  --bb-motion-effects-default: 146ms;
  --bb-motion-effects-fast: 95ms;
  --bb-motion-effects-slow: 206ms;
  --bb-motion-spatial-default: var(--bb-motion-standard-default);
  --bb-motion-spatial-fast: var(--bb-motion-standard-fast);
  --bb-motion-spatial-slow: var(--bb-motion-standard-slow);
  --bb-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --bb-motion-easing-effects: cubic-bezier(0.4, 0, 0.2, 1);
  --bb-motion-easing-expressive: linear(0, 0.132 7%, 0.380 14%, 0.616 21%, 0.793 29%, 0.907 36%, 0.972 43%, 1.003 50%, 1.014 57%, 1.015 64%, 1.012 71%, 1.008 79%, 1.005 86%, 1.002 93%, 1);
  --bb-motion-easing-expressive-fast: linear(0, 0.194 7%, 0.547 14%, 0.847 21%, 1.025 29%, 1.090 36%, 1.087 43%, 1.056 50%, 1.025 57%, 1.003 64%, 0.993 71%, 0.991 79%, 0.993 86%, 0.997 93%, 1);
  --bb-motion-easing-spatial: var(--bb-motion-easing-standard);
  --bb-gradient-brand: linear-gradient(135deg, #FF4201 0%, #FF977E 100%);
  --bb-gradient-pastel: linear-gradient(135deg, #FFECD8 0%, #F3EBFF 55%, #D7F8F3 100%);
  --bb-gradient-canvas-cool: linear-gradient(180deg, #F8FAFC 0%, #FAFBFC 18%, #F3F6FB 100%);
  --bb-font-feature-tabular: "tnum", "ss03";
  --bb-font-feature-id: "zero";
}

/* 다크: 명시 선택과 기기 설정. 같은 이름, 값만 다르다. */
[data-theme="dark"] {
  --bb-bg-canvas: #171614 /* ref.gray-980 */;
  --bb-bg-surface: #211F1D /* ref.gray-970 */;
  --bb-bg-sunken: #110F0E /* ref.gray-990 */;
  --bb-bg-raised: #2A2827 /* ref.gray-960 */;
  --bb-bg-overlay: #343231 /* ref.gray-950 */;
  --bb-bg-brand-solid-pressed: #FF551A;
  --bb-bg-brand-weak: #441303 /* ref.orange-950 */;
  --bb-bg-brand-weak-pressed: #81270C /* ref.orange-900 */;
  --bb-bg-neutral-solid: #FBF8F4 /* ref.gray-50 */;
  --bb-bg-neutral-solid-pressed: #E1DEDA /* ref.gray-200 */;
  --bb-bg-neutral-weak: #2A2827 /* ref.gray-960 */;
  --bb-bg-neutral-weak-pressed: #343231 /* ref.gray-950 */;
  --bb-bg-error-weak: #451016 /* ref.red-950 */;
  --bb-bg-error-solid: #FF8289 /* ref.red-400 */;
  --bb-bg-warning-weak: #352101 /* ref.amber-950 */;
  --bb-bg-success-weak: #122C14 /* ref.green-950 */;
  --bb-bg-success-solid: #76C479 /* ref.green-400 */;
  --bb-bg-info-weak: #042746 /* ref.blue-950 */;
  --bb-bg-info-solid: #6AB3FD /* ref.blue-400 */;
  --bb-bg-tint-peach: #441303 /* ref.orange-950 */;
  --bb-bg-tint-lilac: #2A1E3E /* ref.lilac-950 */;
  --bb-bg-tint-teal: #002D29 /* ref.teal-950 */;
  --bb-bg-tint-gray: #2A2827 /* sys.bg.neutral.weak.default */;
  --bb-bg-scrim: rgb(0 0 0 / 0.6);
  --bb-bg-glass: rgb(33 31 29 / 0.64);
  --bb-bg-chart-area: #441303 /* sys.bg.brand.weak.default */;
  --bb-fg: #FBF8F4 /* ref.gray-50 */;
  --bb-fg-muted: #CCC9C5 /* ref.gray-300 */;
  --bb-fg-subtle: #B1ADAA /* ref.gray-400 */;
  --bb-fg-disabled: #918D8A /* ref.gray-600 */;
  --bb-fg-inverse: #171614 /* ref.gray-980 */;
  --bb-fg-brand: #FF977E /* ref.orange-400 */;
  --bb-fg-on-brand-weak: #FBF8F4 /* sys.fg.default */;
  --bb-fg-on-neutral-solid: #171614 /* ref.gray-980 */;
  --bb-fg-on-neutral-weak: #FBF8F4 /* sys.fg.default */;
  --bb-fg-recording: #FF8289 /* ref.red-400 */;
  --bb-fg-error: #FFB2B3 /* ref.red-300 */;
  --bb-fg-on-error-solid: #171614 /* ref.gray-980 */;
  --bb-fg-on-error-weak: #FFB2B3 /* sys.fg.error */;
  --bb-fg-warning: #F7BE6B /* ref.amber-300 */;
  --bb-fg-on-warning-weak: #F7BE6B /* sys.fg.warning */;
  --bb-fg-success: #9CDD9D /* ref.green-300 */;
  --bb-fg-on-success-solid: #171614 /* ref.gray-980 */;
  --bb-fg-on-success-weak: #9CDD9D /* sys.fg.success */;
  --bb-fg-info: #A0CEFF /* ref.blue-300 */;
  --bb-fg-on-info-solid: #171614 /* ref.gray-980 */;
  --bb-fg-on-info-weak: #A0CEFF /* sys.fg.info */;
  --bb-fg-on-tint-peach: #FBF8F4 /* sys.fg.default */;
  --bb-fg-on-tint-lilac: #D2BDFC /* ref.lilac-300 */;
  --bb-fg-on-tint-teal: #8BDBD0 /* ref.teal-300 */;
  --bb-fg-on-tint-gray: #FBF8F4 /* sys.fg.default */;
  --bb-fg-chart-current: #FF977E /* sys.fg.brand */;
  --bb-fg-chart-previous: #A39F9C /* ref.gray-500 */;
  --bb-fg-chart-target: #FBF8F4 /* sys.fg.default */;
  --bb-fg-delta-up: #9CDD9D /* sys.fg.success */;
  --bb-fg-delta-down: #CCC9C5 /* sys.fg.muted */;
  --bb-fg-chart-reference: #2A2827 /* sys.border.subtle */;
  --bb-border-subtle: #2A2827 /* ref.gray-960 */;
  --bb-border: #A39F9C /* ref.gray-500 */;
  --bb-border-strong: #CCC9C5 /* ref.gray-300 */;
  --bb-border-focus: #FF977E /* sys.fg.brand */;
  --bb-border-error: #FF8289 /* ref.red-400 */;
  --bb-border-warning: #E1A035 /* ref.amber-400 */;
  --bb-border-success: #76C479 /* ref.green-400 */;
  --bb-border-info: #6AB3FD /* ref.blue-400 */;
  --bb-border-glass: rgb(251 248 244 / 0.1);
  --bb-border-chart-grid: #2A2827 /* sys.border.subtle */;
  --bb-gradient-pastel: linear-gradient(135deg, #441303 0%, #2A1E3E 55%, #002D29 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bb-bg-canvas: #171614 /* ref.gray-980 */;
    --bb-bg-surface: #211F1D /* ref.gray-970 */;
    --bb-bg-sunken: #110F0E /* ref.gray-990 */;
    --bb-bg-raised: #2A2827 /* ref.gray-960 */;
    --bb-bg-overlay: #343231 /* ref.gray-950 */;
    --bb-bg-brand-solid-pressed: #FF551A;
    --bb-bg-brand-weak: #441303 /* ref.orange-950 */;
    --bb-bg-brand-weak-pressed: #81270C /* ref.orange-900 */;
    --bb-bg-neutral-solid: #FBF8F4 /* ref.gray-50 */;
    --bb-bg-neutral-solid-pressed: #E1DEDA /* ref.gray-200 */;
    --bb-bg-neutral-weak: #2A2827 /* ref.gray-960 */;
    --bb-bg-neutral-weak-pressed: #343231 /* ref.gray-950 */;
    --bb-bg-error-weak: #451016 /* ref.red-950 */;
    --bb-bg-error-solid: #FF8289 /* ref.red-400 */;
    --bb-bg-warning-weak: #352101 /* ref.amber-950 */;
    --bb-bg-success-weak: #122C14 /* ref.green-950 */;
    --bb-bg-success-solid: #76C479 /* ref.green-400 */;
    --bb-bg-info-weak: #042746 /* ref.blue-950 */;
    --bb-bg-info-solid: #6AB3FD /* ref.blue-400 */;
    --bb-bg-tint-peach: #441303 /* ref.orange-950 */;
    --bb-bg-tint-lilac: #2A1E3E /* ref.lilac-950 */;
    --bb-bg-tint-teal: #002D29 /* ref.teal-950 */;
    --bb-bg-tint-gray: #2A2827 /* sys.bg.neutral.weak.default */;
    --bb-bg-scrim: rgb(0 0 0 / 0.6);
    --bb-bg-glass: rgb(33 31 29 / 0.64);
    --bb-bg-chart-area: #441303 /* sys.bg.brand.weak.default */;
    --bb-fg: #FBF8F4 /* ref.gray-50 */;
    --bb-fg-muted: #CCC9C5 /* ref.gray-300 */;
    --bb-fg-subtle: #B1ADAA /* ref.gray-400 */;
    --bb-fg-disabled: #918D8A /* ref.gray-600 */;
    --bb-fg-inverse: #171614 /* ref.gray-980 */;
    --bb-fg-brand: #FF977E /* ref.orange-400 */;
    --bb-fg-on-brand-weak: #FBF8F4 /* sys.fg.default */;
    --bb-fg-on-neutral-solid: #171614 /* ref.gray-980 */;
    --bb-fg-on-neutral-weak: #FBF8F4 /* sys.fg.default */;
    --bb-fg-recording: #FF8289 /* ref.red-400 */;
    --bb-fg-error: #FFB2B3 /* ref.red-300 */;
    --bb-fg-on-error-solid: #171614 /* ref.gray-980 */;
    --bb-fg-on-error-weak: #FFB2B3 /* sys.fg.error */;
    --bb-fg-warning: #F7BE6B /* ref.amber-300 */;
    --bb-fg-on-warning-weak: #F7BE6B /* sys.fg.warning */;
    --bb-fg-success: #9CDD9D /* ref.green-300 */;
    --bb-fg-on-success-solid: #171614 /* ref.gray-980 */;
    --bb-fg-on-success-weak: #9CDD9D /* sys.fg.success */;
    --bb-fg-info: #A0CEFF /* ref.blue-300 */;
    --bb-fg-on-info-solid: #171614 /* ref.gray-980 */;
    --bb-fg-on-info-weak: #A0CEFF /* sys.fg.info */;
    --bb-fg-on-tint-peach: #FBF8F4 /* sys.fg.default */;
    --bb-fg-on-tint-lilac: #D2BDFC /* ref.lilac-300 */;
    --bb-fg-on-tint-teal: #8BDBD0 /* ref.teal-300 */;
    --bb-fg-on-tint-gray: #FBF8F4 /* sys.fg.default */;
    --bb-fg-chart-current: #FF977E /* sys.fg.brand */;
    --bb-fg-chart-previous: #A39F9C /* ref.gray-500 */;
    --bb-fg-chart-target: #FBF8F4 /* sys.fg.default */;
    --bb-fg-delta-up: #9CDD9D /* sys.fg.success */;
    --bb-fg-delta-down: #CCC9C5 /* sys.fg.muted */;
    --bb-fg-chart-reference: #2A2827 /* sys.border.subtle */;
    --bb-border-subtle: #2A2827 /* ref.gray-960 */;
    --bb-border: #A39F9C /* ref.gray-500 */;
    --bb-border-strong: #CCC9C5 /* ref.gray-300 */;
    --bb-border-focus: #FF977E /* sys.fg.brand */;
    --bb-border-error: #FF8289 /* ref.red-400 */;
    --bb-border-warning: #E1A035 /* ref.amber-400 */;
    --bb-border-success: #76C479 /* ref.green-400 */;
    --bb-border-info: #6AB3FD /* ref.blue-400 */;
    --bb-border-glass: rgb(251 248 244 / 0.1);
    --bb-border-chart-grid: #2A2827 /* sys.border.subtle */;
    --bb-gradient-pastel: linear-gradient(135deg, #441303 0%, #2A1E3E 55%, #002D29 100%);
  }
}

/* 뿔이 고르기(라운드 11): 앱이 html이나 영역에 data-bbuli를 단다. 열쇠 색 --bb-key-1~12, 짝 회색 --bb-gray-1~12, 버튼 채움과 그 위 글자, 그래픽 색이 바뀐다. 기본(:root)은 주황뿔이. 다크 값은 아래 '뿔이 다크'에 있는 뿔이만(v4.5.0: 노란뿔이, 보라뿔이, 먹뿔이), 나머지는 다크 화면에서 쓰지 않는다(token-spec 8.9). */
[data-bbuli="orange"] {
  --bb-key-1: #FFFCF8 /* ref.bbuli-orange-1 */;
  --bb-key-2: #FFF4E8 /* ref.bbuli-orange-2 */;
  --bb-key-3: #FFECD8 /* ref.bbuli-orange-3 */;
  --bb-key-4: #FFD6B0 /* ref.bbuli-orange-4 */;
  --bb-key-5: #FFCD9E /* ref.bbuli-orange-5 */;
  --bb-key-6: #FFC48B /* ref.bbuli-orange-6 */;
  --bb-key-7: #FFA471 /* ref.bbuli-orange-7 */;
  --bb-key-8: #FF8162 /* ref.bbuli-orange-8 */;
  --bb-key-9: #FF4201 /* ref.bbuli-orange-9 */;
  --bb-key-10: #E63B01 /* ref.bbuli-orange-10 */;
  --bb-key-11: #C93200 /* ref.bbuli-orange-11 */;
  --bb-key-12: #822913 /* ref.bbuli-orange-12 */;
  --bb-gray-1: #FBF8F4 /* ref.gray-warm-1 */;
  --bb-gray-2: #F7F3F0 /* ref.gray-warm-2 */;
  --bb-gray-3: #F3EFEC /* ref.gray-warm-3 */;
  --bb-gray-4: #EDE9E6 /* ref.gray-warm-4 */;
  --bb-gray-5: #E7E4E0 /* ref.gray-warm-5 */;
  --bb-gray-6: #E1DEDA /* ref.gray-warm-6 */;
  --bb-gray-7: #C6C2BF /* ref.gray-warm-7 */;
  --bb-gray-8: #ABA7A4 /* ref.gray-warm-8 */;
  --bb-gray-9: #918D8A /* ref.gray-warm-9 */;
  --bb-gray-10: #75726F /* ref.gray-warm-10 */;
  --bb-gray-11: #5D5A57 /* ref.gray-warm-11 */;
  --bb-gray-12: #171614 /* ref.gray-warm-12 */;
  --bb-bg-key-solid: #FF4201 /* ref.bbuli-orange-9 */;
  --bb-fg-on-key-solid: #000000 /* ref.gray-1000 */;
  --bb-fg-key-graphic: #FF4201 /* ref.bbuli-orange-9 */;
}
[data-bbuli="blue"] {
  --bb-key-1: #FBFDFF /* ref.bbuli-blue-1 */;
  --bb-key-2: #F0F7FF /* ref.bbuli-blue-2 */;
  --bb-key-3: #E5F1FF /* ref.bbuli-blue-3 */;
  --bb-key-4: #D3E8FF /* ref.bbuli-blue-4 */;
  --bb-key-5: #C1DFFF /* ref.bbuli-blue-5 */;
  --bb-key-6: #AED5FF /* ref.bbuli-blue-6 */;
  --bb-key-7: #8AC3FD /* ref.bbuli-blue-7 */;
  --bb-key-8: #6AB0F6 /* ref.bbuli-blue-8 */;
  --bb-key-9: #2E92EA /* ref.bbuli-blue-9 */;
  --bb-key-10: #0077CC /* ref.bbuli-blue-10 */;
  --bb-key-11: #065DA0 /* ref.bbuli-blue-11 */;
  --bb-key-12: #1C4A75 /* ref.bbuli-blue-12 */;
  --bb-gray-1: #F8FAFC /* ref.gray-cool-1 */;
  --bb-gray-2: #F4F7FB /* ref.gray-cool-2 */;
  --bb-gray-3: #F1F5F9 /* ref.gray-cool-3 */;
  --bb-gray-4: #EAEFF5 /* ref.gray-cool-4 */;
  --bb-gray-5: #E6ECF2 /* ref.gray-cool-5 */;
  --bb-gray-6: #E2E8F0 /* ref.gray-cool-6 */;
  --bb-gray-7: #CBD5E1 /* ref.gray-cool-7 */;
  --bb-gray-8: #94A3B8 /* ref.gray-cool-8 */;
  --bb-gray-9: #8A94A6 /* ref.gray-cool-9 */;
  --bb-gray-10: #64748B /* ref.gray-cool-10 */;
  --bb-gray-11: #475569 /* ref.gray-cool-11 */;
  --bb-gray-12: #0F172A /* ref.gray-cool-12 */;
  --bb-bg-key-solid: #0077CC /* ref.bbuli-blue-10 */;
  --bb-fg-on-key-solid: #FFFFFF /* ref.gray-0 */;
  --bb-fg-key-graphic: #2E92EA /* ref.bbuli-blue-9 */;
}
[data-bbuli="green"] {
  --bb-key-1: #F8FEF9 /* ref.bbuli-green-1 */;
  --bb-key-2: #ECFBED /* ref.bbuli-green-2 */;
  --bb-key-3: #DFF7E1 /* ref.bbuli-green-3 */;
  --bb-key-4: #CAEECD /* ref.bbuli-green-4 */;
  --bb-key-5: #B5E5B9 /* ref.bbuli-green-5 */;
  --bb-key-6: #9FDCA6 /* ref.bbuli-green-6 */;
  --bb-key-7: #76C581 /* ref.bbuli-green-7 */;
  --bb-key-8: #48AE5C /* ref.bbuli-green-8 */;
  --bb-key-9: #34C759 /* ref.bbuli-green-9 */;
  --bb-key-10: #1AB84B /* ref.bbuli-green-10 */;
  --bb-key-11: #007E2E /* ref.bbuli-green-11 */;
  --bb-key-12: #0B531F /* ref.bbuli-green-12 */;
  --bb-gray-1: #F8FAFC /* ref.gray-cool-1 */;
  --bb-gray-2: #F4F7FB /* ref.gray-cool-2 */;
  --bb-gray-3: #F1F5F9 /* ref.gray-cool-3 */;
  --bb-gray-4: #EAEFF5 /* ref.gray-cool-4 */;
  --bb-gray-5: #E6ECF2 /* ref.gray-cool-5 */;
  --bb-gray-6: #E2E8F0 /* ref.gray-cool-6 */;
  --bb-gray-7: #CBD5E1 /* ref.gray-cool-7 */;
  --bb-gray-8: #94A3B8 /* ref.gray-cool-8 */;
  --bb-gray-9: #8A94A6 /* ref.gray-cool-9 */;
  --bb-gray-10: #64748B /* ref.gray-cool-10 */;
  --bb-gray-11: #475569 /* ref.gray-cool-11 */;
  --bb-gray-12: #0F172A /* ref.gray-cool-12 */;
  --bb-bg-key-solid: #34C759 /* ref.bbuli-green-9 */;
  --bb-fg-on-key-solid: #000000 /* ref.gray-1000 */;
  --bb-fg-key-graphic: #007E2E /* ref.bbuli-green-11 */;
}
[data-bbuli="yellow"] {
  --bb-key-1: #FFFCF6 /* ref.bbuli-yellow-1 */;
  --bb-key-2: #FBF6E5 /* ref.bbuli-yellow-2 */;
  --bb-key-3: #F8EFD5 /* ref.bbuli-yellow-3 */;
  --bb-key-4: #F8EAC3 /* ref.bbuli-yellow-4 */;
  --bb-key-5: #F8E5B1 /* ref.bbuli-yellow-5 */;
  --bb-key-6: #F9E09E /* ref.bbuli-yellow-6 */;
  --bb-key-7: #EDCE76 /* ref.bbuli-yellow-7 */;
  --bb-key-8: #E1BB47 /* ref.bbuli-yellow-8 */;
  --bb-key-9: #FFCC00 /* ref.bbuli-yellow-9 */;
  --bb-key-10: #EEBE00 /* ref.bbuli-yellow-10 */;
  --bb-key-11: #846800 /* ref.bbuli-yellow-11 */;
  --bb-key-12: #594500 /* ref.bbuli-yellow-12 */;
  --bb-gray-1: #FBF8F4 /* ref.gray-warm-1 */;
  --bb-gray-2: #F7F3F0 /* ref.gray-warm-2 */;
  --bb-gray-3: #F3EFEC /* ref.gray-warm-3 */;
  --bb-gray-4: #EDE9E6 /* ref.gray-warm-4 */;
  --bb-gray-5: #E7E4E0 /* ref.gray-warm-5 */;
  --bb-gray-6: #E1DEDA /* ref.gray-warm-6 */;
  --bb-gray-7: #C6C2BF /* ref.gray-warm-7 */;
  --bb-gray-8: #ABA7A4 /* ref.gray-warm-8 */;
  --bb-gray-9: #918D8A /* ref.gray-warm-9 */;
  --bb-gray-10: #75726F /* ref.gray-warm-10 */;
  --bb-gray-11: #5D5A57 /* ref.gray-warm-11 */;
  --bb-gray-12: #171614 /* ref.gray-warm-12 */;
  --bb-bg-key-solid: #FFCC00 /* ref.bbuli-yellow-9 */;
  --bb-fg-on-key-solid: #000000 /* ref.gray-1000 */;
  --bb-fg-key-graphic: #846800 /* ref.bbuli-yellow-11 */;
}
[data-bbuli="ink"] {
  --bb-key-1: #F8FAFC /* ref.bbuli-ink-1 */;
  --bb-key-2: #F4F7FB /* ref.bbuli-ink-2 */;
  --bb-key-3: #F1F5F9 /* ref.bbuli-ink-3 */;
  --bb-key-4: #EAEFF5 /* ref.bbuli-ink-4 */;
  --bb-key-5: #E6ECF2 /* ref.bbuli-ink-5 */;
  --bb-key-6: #E2E8F0 /* ref.bbuli-ink-6 */;
  --bb-key-7: #CBD5E1 /* ref.bbuli-ink-7 */;
  --bb-key-8: #94A3B8 /* ref.bbuli-ink-8 */;
  --bb-key-9: #475569 /* ref.bbuli-ink-9 */;
  --bb-key-10: #0F172A /* ref.bbuli-ink-10 */;
  --bb-key-11: #475569 /* ref.bbuli-ink-11 */;
  --bb-key-12: #0F172A /* ref.bbuli-ink-12 */;
  --bb-gray-1: #F8FAFC /* ref.gray-cool-1 */;
  --bb-gray-2: #F4F7FB /* ref.gray-cool-2 */;
  --bb-gray-3: #F1F5F9 /* ref.gray-cool-3 */;
  --bb-gray-4: #EAEFF5 /* ref.gray-cool-4 */;
  --bb-gray-5: #E6ECF2 /* ref.gray-cool-5 */;
  --bb-gray-6: #E2E8F0 /* ref.gray-cool-6 */;
  --bb-gray-7: #CBD5E1 /* ref.gray-cool-7 */;
  --bb-gray-8: #94A3B8 /* ref.gray-cool-8 */;
  --bb-gray-9: #8A94A6 /* ref.gray-cool-9 */;
  --bb-gray-10: #64748B /* ref.gray-cool-10 */;
  --bb-gray-11: #475569 /* ref.gray-cool-11 */;
  --bb-gray-12: #0F172A /* ref.gray-cool-12 */;
  --bb-bg-key-solid: #0F172A /* ref.bbuli-ink-10 */;
  --bb-fg-on-key-solid: #FFFFFF /* ref.gray-0 */;
  --bb-fg-key-graphic: #475569 /* ref.bbuli-ink-9 */;
}
[data-bbuli="purple"] {
  --bb-key-1: #FDFCFF /* ref.bbuli-purple-1 */;
  --bb-key-2: #F8F5FE /* ref.bbuli-purple-2 */;
  --bb-key-3: #F3EFFA /* ref.bbuli-purple-3 */;
  --bb-key-4: #EAE1FC /* ref.bbuli-purple-4 */;
  --bb-key-5: #DFD4FF /* ref.bbuli-purple-5 */;
  --bb-key-6: #D6C7FF /* ref.bbuli-purple-6 */;
  --bb-key-7: #C7B4FF /* ref.bbuli-purple-7 */;
  --bb-key-8: #B7A2FF /* ref.bbuli-purple-8 */;
  --bb-key-9: #7050C2 /* ref.bbuli-purple-9 */;
  --bb-key-10: #6442B3 /* ref.bbuli-purple-10 */;
  --bb-key-11: #6247AB /* ref.bbuli-purple-11 */;
  --bb-key-12: #4B3E77 /* ref.bbuli-purple-12 */;
  --bb-gray-1: #F8FAFC /* ref.gray-cool-1 */;
  --bb-gray-2: #F4F7FB /* ref.gray-cool-2 */;
  --bb-gray-3: #F1F5F9 /* ref.gray-cool-3 */;
  --bb-gray-4: #EAEFF5 /* ref.gray-cool-4 */;
  --bb-gray-5: #E6ECF2 /* ref.gray-cool-5 */;
  --bb-gray-6: #E2E8F0 /* ref.gray-cool-6 */;
  --bb-gray-7: #CBD5E1 /* ref.gray-cool-7 */;
  --bb-gray-8: #94A3B8 /* ref.gray-cool-8 */;
  --bb-gray-9: #8A94A6 /* ref.gray-cool-9 */;
  --bb-gray-10: #64748B /* ref.gray-cool-10 */;
  --bb-gray-11: #475569 /* ref.gray-cool-11 */;
  --bb-gray-12: #0F172A /* ref.gray-cool-12 */;
  --bb-bg-key-solid: #7050C2 /* ref.bbuli-purple-9 */;
  --bb-fg-on-key-solid: #FFFFFF /* ref.gray-0 */;
  --bb-fg-key-graphic: #7050C2 /* ref.bbuli-purple-9 */;
}

/* 뿔이 다크: 다크 값이 있는 뿔이만. 명시 다크와 기기 설정 둘 다. 뿔이 층 이름 전부를 다시 정한다. */
[data-theme="dark"][data-bbuli="yellow"],
[data-theme="dark"] [data-bbuli="yellow"] {
  --bb-key-1: #191712 /* ref.bbuli-yellow-dark-1 */;
  --bb-key-2: #201C12 /* ref.bbuli-yellow-dark-2 */;
  --bb-key-3: #302400 /* ref.bbuli-yellow-dark-3 */;
  --bb-key-4: #3D2E00 /* ref.bbuli-yellow-dark-4 */;
  --bb-key-5: #4A3A00 /* ref.bbuli-yellow-dark-5 */;
  --bb-key-6: #5B4700 /* ref.bbuli-yellow-dark-6 */;
  --bb-key-7: #735A03 /* ref.bbuli-yellow-dark-7 */;
  --bb-key-8: #907415 /* ref.bbuli-yellow-dark-8 */;
  --bb-key-9: #FFCC00 /* ref.bbuli-yellow-dark-9 */;
  --bb-key-10: #FFD11A /* ref.bbuli-yellow-dark-10 */;
  --bb-key-11: #F0CE6B /* ref.bbuli-yellow-dark-11 */;
  --bb-key-12: #FAEABE /* ref.bbuli-yellow-dark-12 */;
  --bb-gray-1: #171614 /* ref.gray-980 */;
  --bb-gray-2: #211F1D /* ref.gray-970 */;
  --bb-gray-3: #2A2827 /* ref.gray-960 */;
  --bb-gray-4: #343231 /* ref.gray-950 */;
  --bb-gray-5: #4C4946 /* ref.gray-900 */;
  --bb-gray-6: #4C4946 /* ref.gray-900 */;
  --bb-gray-7: #5D5A57 /* ref.gray-800 */;
  --bb-gray-8: #75726F /* ref.gray-700 */;
  --bb-gray-9: #A39F9C /* ref.gray-500 */;
  --bb-gray-10: #B1ADAA /* ref.gray-400 */;
  --bb-gray-11: #CCC9C5 /* ref.gray-300 */;
  --bb-gray-12: #FBF8F4 /* ref.gray-50 */;
  --bb-bg-key-solid: #FFCC00 /* ref.bbuli-yellow-dark-9 */;
  --bb-fg-on-key-solid: #171614 /* ref.gray-980 */;
  --bb-fg-key-graphic: #FFCC00 /* ref.bbuli-yellow-dark-9 */;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-bbuli="yellow"],
  :root:not([data-theme="light"]) [data-bbuli="yellow"] {
    --bb-key-1: #191712 /* ref.bbuli-yellow-dark-1 */;
    --bb-key-2: #201C12 /* ref.bbuli-yellow-dark-2 */;
    --bb-key-3: #302400 /* ref.bbuli-yellow-dark-3 */;
    --bb-key-4: #3D2E00 /* ref.bbuli-yellow-dark-4 */;
    --bb-key-5: #4A3A00 /* ref.bbuli-yellow-dark-5 */;
    --bb-key-6: #5B4700 /* ref.bbuli-yellow-dark-6 */;
    --bb-key-7: #735A03 /* ref.bbuli-yellow-dark-7 */;
    --bb-key-8: #907415 /* ref.bbuli-yellow-dark-8 */;
    --bb-key-9: #FFCC00 /* ref.bbuli-yellow-dark-9 */;
    --bb-key-10: #FFD11A /* ref.bbuli-yellow-dark-10 */;
    --bb-key-11: #F0CE6B /* ref.bbuli-yellow-dark-11 */;
    --bb-key-12: #FAEABE /* ref.bbuli-yellow-dark-12 */;
    --bb-gray-1: #171614 /* ref.gray-980 */;
    --bb-gray-2: #211F1D /* ref.gray-970 */;
    --bb-gray-3: #2A2827 /* ref.gray-960 */;
    --bb-gray-4: #343231 /* ref.gray-950 */;
    --bb-gray-5: #4C4946 /* ref.gray-900 */;
    --bb-gray-6: #4C4946 /* ref.gray-900 */;
    --bb-gray-7: #5D5A57 /* ref.gray-800 */;
    --bb-gray-8: #75726F /* ref.gray-700 */;
    --bb-gray-9: #A39F9C /* ref.gray-500 */;
    --bb-gray-10: #B1ADAA /* ref.gray-400 */;
    --bb-gray-11: #CCC9C5 /* ref.gray-300 */;
    --bb-gray-12: #FBF8F4 /* ref.gray-50 */;
    --bb-bg-key-solid: #FFCC00 /* ref.bbuli-yellow-dark-9 */;
    --bb-fg-on-key-solid: #171614 /* ref.gray-980 */;
    --bb-fg-key-graphic: #FFCC00 /* ref.bbuli-yellow-dark-9 */;
  }
}
[data-theme="dark"][data-bbuli="purple"],
[data-theme="dark"] [data-bbuli="purple"] {
  --bb-key-1: #17161B /* ref.bbuli-purple-dark-1 */;
  --bb-key-2: #1C1B24 /* ref.bbuli-purple-dark-2 */;
  --bb-key-3: #27203D /* ref.bbuli-purple-dark-3 */;
  --bb-key-4: #312A4C /* ref.bbuli-purple-dark-4 */;
  --bb-key-5: #3D345D /* ref.bbuli-purple-dark-5 */;
  --bb-key-6: #4B4171 /* ref.bbuli-purple-dark-6 */;
  --bb-key-7: #5F538D /* ref.bbuli-purple-dark-7 */;
  --bb-key-8: #7A6BB0 /* ref.bbuli-purple-dark-8 */;
  --bb-key-9: #B7A2FF /* ref.bbuli-purple-dark-9 */;
  --bb-key-10: #BEABFF /* ref.bbuli-purple-dark-10 */;
  --bb-key-11: #D2C9FF /* ref.bbuli-purple-dark-11 */;
  --bb-key-12: #EBE7FF /* ref.bbuli-purple-dark-12 */;
  --bb-gray-1: #151618 /* ref.gray-cool-dark-1 */;
  --bb-gray-2: #1E1F23 /* ref.gray-cool-dark-2 */;
  --bb-gray-3: #27292C /* ref.gray-cool-dark-3 */;
  --bb-gray-4: #303337 /* ref.gray-cool-dark-4 */;
  --bb-gray-5: #464A50 /* ref.gray-cool-dark-5 */;
  --bb-gray-6: #464A50 /* ref.gray-cool-dark-6 */;
  --bb-gray-7: #575B62 /* ref.gray-cool-dark-7 */;
  --bb-gray-8: #6E737B /* ref.gray-cool-dark-8 */;
  --bb-gray-9: #9CA0A8 /* ref.gray-cool-dark-9 */;
  --bb-gray-10: #AAAEB5 /* ref.gray-cool-dark-10 */;
  --bb-gray-11: #C7CACF /* ref.gray-cool-dark-11 */;
  --bb-gray-12: #F8FAFC /* ref.gray-cool-dark-12 */;
  --bb-bg-key-solid: #B7A2FF /* ref.bbuli-purple-dark-9 */;
  --bb-fg-on-key-solid: #151618 /* ref.gray-cool-dark-1 */;
  --bb-fg-key-graphic: #B7A2FF /* ref.bbuli-purple-dark-9 */;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-bbuli="purple"],
  :root:not([data-theme="light"]) [data-bbuli="purple"] {
    --bb-key-1: #17161B /* ref.bbuli-purple-dark-1 */;
    --bb-key-2: #1C1B24 /* ref.bbuli-purple-dark-2 */;
    --bb-key-3: #27203D /* ref.bbuli-purple-dark-3 */;
    --bb-key-4: #312A4C /* ref.bbuli-purple-dark-4 */;
    --bb-key-5: #3D345D /* ref.bbuli-purple-dark-5 */;
    --bb-key-6: #4B4171 /* ref.bbuli-purple-dark-6 */;
    --bb-key-7: #5F538D /* ref.bbuli-purple-dark-7 */;
    --bb-key-8: #7A6BB0 /* ref.bbuli-purple-dark-8 */;
    --bb-key-9: #B7A2FF /* ref.bbuli-purple-dark-9 */;
    --bb-key-10: #BEABFF /* ref.bbuli-purple-dark-10 */;
    --bb-key-11: #D2C9FF /* ref.bbuli-purple-dark-11 */;
    --bb-key-12: #EBE7FF /* ref.bbuli-purple-dark-12 */;
    --bb-gray-1: #151618 /* ref.gray-cool-dark-1 */;
    --bb-gray-2: #1E1F23 /* ref.gray-cool-dark-2 */;
    --bb-gray-3: #27292C /* ref.gray-cool-dark-3 */;
    --bb-gray-4: #303337 /* ref.gray-cool-dark-4 */;
    --bb-gray-5: #464A50 /* ref.gray-cool-dark-5 */;
    --bb-gray-6: #464A50 /* ref.gray-cool-dark-6 */;
    --bb-gray-7: #575B62 /* ref.gray-cool-dark-7 */;
    --bb-gray-8: #6E737B /* ref.gray-cool-dark-8 */;
    --bb-gray-9: #9CA0A8 /* ref.gray-cool-dark-9 */;
    --bb-gray-10: #AAAEB5 /* ref.gray-cool-dark-10 */;
    --bb-gray-11: #C7CACF /* ref.gray-cool-dark-11 */;
    --bb-gray-12: #F8FAFC /* ref.gray-cool-dark-12 */;
    --bb-bg-key-solid: #B7A2FF /* ref.bbuli-purple-dark-9 */;
    --bb-fg-on-key-solid: #151618 /* ref.gray-cool-dark-1 */;
    --bb-fg-key-graphic: #B7A2FF /* ref.bbuli-purple-dark-9 */;
  }
}
[data-theme="dark"][data-bbuli="ink"],
[data-theme="dark"] [data-bbuli="ink"] {
  --bb-key-1: #151618 /* ref.bbuli-ink-dark-1 */;
  --bb-key-2: #1E1F23 /* ref.bbuli-ink-dark-2 */;
  --bb-key-3: #27292C /* ref.bbuli-ink-dark-3 */;
  --bb-key-4: #303337 /* ref.bbuli-ink-dark-4 */;
  --bb-key-5: #464A50 /* ref.bbuli-ink-dark-5 */;
  --bb-key-6: #464A50 /* ref.bbuli-ink-dark-6 */;
  --bb-key-7: #575B62 /* ref.bbuli-ink-dark-7 */;
  --bb-key-8: #6E737B /* ref.bbuli-ink-dark-8 */;
  --bb-key-9: #C7CACF /* ref.bbuli-ink-dark-9 */;
  --bb-key-10: #F8FAFC /* ref.bbuli-ink-dark-10 */;
  --bb-key-11: #C7CACF /* ref.bbuli-ink-dark-11 */;
  --bb-key-12: #F8FAFC /* ref.bbuli-ink-dark-12 */;
  --bb-gray-1: #151618 /* ref.gray-cool-dark-1 */;
  --bb-gray-2: #1E1F23 /* ref.gray-cool-dark-2 */;
  --bb-gray-3: #27292C /* ref.gray-cool-dark-3 */;
  --bb-gray-4: #303337 /* ref.gray-cool-dark-4 */;
  --bb-gray-5: #464A50 /* ref.gray-cool-dark-5 */;
  --bb-gray-6: #464A50 /* ref.gray-cool-dark-6 */;
  --bb-gray-7: #575B62 /* ref.gray-cool-dark-7 */;
  --bb-gray-8: #6E737B /* ref.gray-cool-dark-8 */;
  --bb-gray-9: #9CA0A8 /* ref.gray-cool-dark-9 */;
  --bb-gray-10: #AAAEB5 /* ref.gray-cool-dark-10 */;
  --bb-gray-11: #C7CACF /* ref.gray-cool-dark-11 */;
  --bb-gray-12: #F8FAFC /* ref.gray-cool-dark-12 */;
  --bb-bg-key-solid: #F8FAFC /* ref.bbuli-ink-dark-10 */;
  --bb-fg-on-key-solid: #151618 /* ref.gray-cool-dark-1 */;
  --bb-fg-key-graphic: #C7CACF /* ref.bbuli-ink-dark-9 */;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-bbuli="ink"],
  :root:not([data-theme="light"]) [data-bbuli="ink"] {
    --bb-key-1: #151618 /* ref.bbuli-ink-dark-1 */;
    --bb-key-2: #1E1F23 /* ref.bbuli-ink-dark-2 */;
    --bb-key-3: #27292C /* ref.bbuli-ink-dark-3 */;
    --bb-key-4: #303337 /* ref.bbuli-ink-dark-4 */;
    --bb-key-5: #464A50 /* ref.bbuli-ink-dark-5 */;
    --bb-key-6: #464A50 /* ref.bbuli-ink-dark-6 */;
    --bb-key-7: #575B62 /* ref.bbuli-ink-dark-7 */;
    --bb-key-8: #6E737B /* ref.bbuli-ink-dark-8 */;
    --bb-key-9: #C7CACF /* ref.bbuli-ink-dark-9 */;
    --bb-key-10: #F8FAFC /* ref.bbuli-ink-dark-10 */;
    --bb-key-11: #C7CACF /* ref.bbuli-ink-dark-11 */;
    --bb-key-12: #F8FAFC /* ref.bbuli-ink-dark-12 */;
    --bb-gray-1: #151618 /* ref.gray-cool-dark-1 */;
    --bb-gray-2: #1E1F23 /* ref.gray-cool-dark-2 */;
    --bb-gray-3: #27292C /* ref.gray-cool-dark-3 */;
    --bb-gray-4: #303337 /* ref.gray-cool-dark-4 */;
    --bb-gray-5: #464A50 /* ref.gray-cool-dark-5 */;
    --bb-gray-6: #464A50 /* ref.gray-cool-dark-6 */;
    --bb-gray-7: #575B62 /* ref.gray-cool-dark-7 */;
    --bb-gray-8: #6E737B /* ref.gray-cool-dark-8 */;
    --bb-gray-9: #9CA0A8 /* ref.gray-cool-dark-9 */;
    --bb-gray-10: #AAAEB5 /* ref.gray-cool-dark-10 */;
    --bb-gray-11: #C7CACF /* ref.gray-cool-dark-11 */;
    --bb-gray-12: #F8FAFC /* ref.gray-cool-dark-12 */;
    --bb-bg-key-solid: #F8FAFC /* ref.bbuli-ink-dark-10 */;
    --bb-fg-on-key-solid: #151618 /* ref.gray-cool-dark-1 */;
    --bb-fg-key-graphic: #C7CACF /* ref.bbuli-ink-dark-9 */;
  }
}

/* 강조 층: 이동 모션 별칭만 교체한다. 색, 글자, 치수는 그대로. 사용자용 토글 UI는 없다. */
[data-intensity="expressive"] {
  --bb-motion-spatial-default: var(--bb-motion-expressive-default);
  --bb-motion-spatial-fast: var(--bb-motion-expressive-fast);
  --bb-motion-spatial-slow: var(--bb-motion-expressive-slow);
  --bb-motion-easing-spatial: var(--bb-motion-easing-expressive);
}

/* 줄이기 설정 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --bb-motion-spatial-default: 0ms;
    --bb-motion-spatial-fast: 0ms;
    --bb-motion-spatial-slow: 0ms;
  }
}
@media (prefers-reduced-transparency: reduce) {
  :root {
    --bb-bg-glass: var(--bb-bg-raised);
  }
}
@supports not (backdrop-filter: blur(1px)) {
  :root {
    --bb-bg-glass: var(--bb-bg-raised);
  }
}
@supports not (animation-timing-function: linear(0, 1)) {
  :root {
    --bb-motion-easing-expressive: cubic-bezier(0.34, 1.3, 0.64, 1);
    --bb-motion-easing-expressive-fast: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}

/* 글자 눈금 유틸리티 (type 토큰 하나 = 클래스 하나) */
.bb-type-title-lg {
  font-family: var(--bb-type-title-lg-family);
  font-size: var(--bb-type-title-lg-size);
  line-height: var(--bb-type-title-lg-line);
  font-weight: var(--bb-type-title-lg-weight);
  letter-spacing: var(--bb-type-title-lg-tracking);
}
.bb-type-title-md {
  font-family: var(--bb-type-title-md-family);
  font-size: var(--bb-type-title-md-size);
  line-height: var(--bb-type-title-md-line);
  font-weight: var(--bb-type-title-md-weight);
  letter-spacing: var(--bb-type-title-md-tracking);
}
.bb-type-title-sm {
  font-family: var(--bb-type-title-sm-family);
  font-size: var(--bb-type-title-sm-size);
  line-height: var(--bb-type-title-sm-line);
  font-weight: var(--bb-type-title-sm-weight);
  letter-spacing: var(--bb-type-title-sm-tracking);
}
.bb-type-body {
  font-family: var(--bb-type-body-family);
  font-size: var(--bb-type-body-size);
  line-height: var(--bb-type-body-line);
  font-weight: var(--bb-type-body-weight);
  letter-spacing: var(--bb-type-body-tracking);
}
.bb-type-body-strong {
  font-family: var(--bb-type-body-strong-family);
  font-size: var(--bb-type-body-strong-size);
  line-height: var(--bb-type-body-strong-line);
  font-weight: var(--bb-type-body-strong-weight);
  letter-spacing: var(--bb-type-body-strong-tracking);
}
.bb-type-body-read {
  font-family: var(--bb-type-body-read-family);
  font-size: var(--bb-type-body-read-size);
  line-height: var(--bb-type-body-read-line);
  font-weight: var(--bb-type-body-read-weight);
  letter-spacing: var(--bb-type-body-read-tracking);
  max-width: var(--bb-layout-reading-max);
}
.bb-type-support {
  font-family: var(--bb-type-support-family);
  font-size: var(--bb-type-support-size);
  line-height: var(--bb-type-support-line);
  font-weight: var(--bb-type-support-weight);
  letter-spacing: var(--bb-type-support-tracking);
}
.bb-type-support-strong {
  font-family: var(--bb-type-support-strong-family);
  font-size: var(--bb-type-support-strong-size);
  line-height: var(--bb-type-support-strong-line);
  font-weight: var(--bb-type-support-strong-weight);
  letter-spacing: var(--bb-type-support-strong-tracking);
}
.bb-type-caption {
  font-family: var(--bb-type-caption-family);
  font-size: var(--bb-type-caption-size);
  line-height: var(--bb-type-caption-line);
  font-weight: var(--bb-type-caption-weight);
  letter-spacing: var(--bb-type-caption-tracking);
}
.bb-type-label-lg {
  font-family: var(--bb-type-label-lg-family);
  font-size: var(--bb-type-label-lg-size);
  line-height: var(--bb-type-label-lg-line);
  font-weight: var(--bb-type-label-lg-weight);
  letter-spacing: var(--bb-type-label-lg-tracking);
}
.bb-type-label-md {
  font-family: var(--bb-type-label-md-family);
  font-size: var(--bb-type-label-md-size);
  line-height: var(--bb-type-label-md-line);
  font-weight: var(--bb-type-label-md-weight);
  letter-spacing: var(--bb-type-label-md-tracking);
}
.bb-type-label-sm {
  font-family: var(--bb-type-label-sm-family);
  font-size: var(--bb-type-label-sm-size);
  line-height: var(--bb-type-label-sm-line);
  font-weight: var(--bb-type-label-sm-weight);
  letter-spacing: var(--bb-type-label-sm-tracking);
}
.bb-type-timecode {
  font-family: var(--bb-type-timecode-family);
  font-size: var(--bb-type-timecode-size);
  line-height: var(--bb-type-timecode-line);
  font-weight: var(--bb-type-timecode-weight);
  letter-spacing: var(--bb-type-timecode-tracking);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "ss03";
}
.bb-type-timer {
  font-family: var(--bb-type-timer-family);
  font-size: var(--bb-type-timer-size);
  line-height: var(--bb-type-timer-line);
  font-weight: var(--bb-type-timer-weight);
  letter-spacing: var(--bb-type-timer-tracking);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "ss03";
}
.bb-type-figure-lg {
  font-family: var(--bb-type-figure-lg-family);
  font-size: var(--bb-type-figure-lg-size);
  line-height: var(--bb-type-figure-lg-line);
  font-weight: var(--bb-type-figure-lg-weight);
  letter-spacing: var(--bb-type-figure-lg-tracking);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "ss03";
}
.bb-type-figure-md {
  font-family: var(--bb-type-figure-md-family);
  font-size: var(--bb-type-figure-md-size);
  line-height: var(--bb-type-figure-md-line);
  font-weight: var(--bb-type-figure-md-weight);
  letter-spacing: var(--bb-type-figure-md-tracking);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "ss03";
}
.bb-type-figure-sm {
  font-family: var(--bb-type-figure-sm-family);
  font-size: var(--bb-type-figure-sm-size);
  line-height: var(--bb-type-figure-sm-line);
  font-weight: var(--bb-type-figure-sm-weight);
  letter-spacing: var(--bb-type-figure-sm-tracking);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "ss03";
}
.bb-type-data-section {
  font-family: var(--bb-type-data-section-family);
  font-size: var(--bb-type-data-section-size);
  line-height: var(--bb-type-data-section-line);
  font-weight: var(--bb-type-data-section-weight);
  letter-spacing: var(--bb-type-data-section-tracking);
}
.bb-type-data-card-title {
  font-family: var(--bb-type-data-card-title-family);
  font-size: var(--bb-type-data-card-title-size);
  line-height: var(--bb-type-data-card-title-line);
  font-weight: var(--bb-type-data-card-title-weight);
  letter-spacing: var(--bb-type-data-card-title-tracking);
}
.bb-type-data-list {
  font-family: var(--bb-type-data-list-family);
  font-size: var(--bb-type-data-list-size);
  line-height: var(--bb-type-data-list-line);
  font-weight: var(--bb-type-data-list-weight);
  letter-spacing: var(--bb-type-data-list-tracking);
}
.bb-type-data-list-strong {
  font-family: var(--bb-type-data-list-strong-family);
  font-size: var(--bb-type-data-list-strong-size);
  line-height: var(--bb-type-data-list-strong-line);
  font-weight: var(--bb-type-data-list-strong-weight);
  letter-spacing: var(--bb-type-data-list-strong-tracking);
}
.bb-type-data-small {
  font-family: var(--bb-type-data-small-family);
  font-size: var(--bb-type-data-small-size);
  line-height: var(--bb-type-data-small-line);
  font-weight: var(--bb-type-data-small-weight);
  letter-spacing: var(--bb-type-data-small-tracking);
}
.bb-type-data-small-strong {
  font-family: var(--bb-type-data-small-strong-family);
  font-size: var(--bb-type-data-small-strong-size);
  line-height: var(--bb-type-data-small-strong-line);
  font-weight: var(--bb-type-data-small-strong-weight);
  letter-spacing: var(--bb-type-data-small-strong-tracking);
}