:root {
  --typography-8-bold-font-family: "Pretendard GOV Variable", Helvetica;
  --typography-8-bold-font-weight: 700;
  --typography-8-bold-font-size: 35px;
  --typography-8-bold-letter-spacing: -0.1599999964237213px;
  --typography-8-bold-line-height: 40px;
  --typography-8-bold-font-style: normal;
  --p-font-family: "Pretendard GOV Variable", Helvetica;
  --p-font-weight: 400;
  --p-font-size: 16px;
  --p-letter-spacing: 0px;
  --p-line-height: 28px;
  --p-font-style: normal;
  --typography-3-regular-font-family: "Pretendard GOV Variable", Helvetica;
  --typography-3-regular-font-weight: 400;
  --typography-3-regular-font-size: 16px;
  --typography-3-regular-letter-spacing: 0px;
  --typography-3-regular-line-height: 24px;
  --typography-3-regular-font-style: normal;
  --typography-3-medium-font-family: "Pretendard GOV Variable", Helvetica;
  --typography-3-medium-font-weight: 500;
  --typography-3-medium-font-size: 16px;
  --typography-3-medium-letter-spacing: 0px;
  --typography-3-medium-line-height: 24px;
  --typography-3-medium-font-style: normal;
  --typography-4-medium-font-family: "Pretendard GOV Variable", Helvetica;
  --typography-4-medium-font-weight: 500;
  --typography-4-medium-font-size: 18px;
  --typography-4-medium-letter-spacing: -0.03999999910593033px;
  --typography-4-medium-line-height: 26px;
  --typography-4-medium-font-style: normal;
  --typography-6-bold-font-family: "Pretendard GOV Variable", Helvetica;
  --typography-6-bold-font-weight: 700;
  --typography-6-bold-font-size: 24px;
  --typography-6-bold-letter-spacing: -0.10000000149011612px;
  --typography-6-bold-line-height: 30px;
  --typography-6-bold-font-style: normal;
  --typography-2-medium-font-family: "Pretendard GOV Variable", Helvetica;
  --typography-2-medium-font-weight: 500;
  --typography-2-medium-font-size: 14px;
  --typography-2-medium-letter-spacing: 0px;
  --typography-2-medium-line-height: 20px;
  --typography-2-medium-font-style: normal;
  --theme-tokens-colors-white-contrast: var(--theme-colors-default-white);
  --colors-primary-50: rgba(239, 254, 247, 1);
  --colors-primary-100: rgba(218, 254, 237, 1);
  --colors-primary-200: rgba(183, 251, 221, 1);
  --colors-primary-300: rgba(127, 246, 195, 1);
  --colors-primary-400: rgba(65, 231, 161, 1);
  --colors-primary-500: rgba(24, 207, 129, 1);
  --colors-primary-600-p: rgba(13, 169, 103, 1);
  --colors-primary-700: rgba(14, 135, 84, 1);
  --colors-primary-800: rgba(17, 106, 70, 1);
  --colors-primary-900: rgba(16, 87, 59, 1);
  --colors-primary-950: rgba(2, 49, 32, 1);
  --colors-GNB-selection: rgba(0, 57, 65, 1);
  --colors-gradient-base-gradient-base-1: rgba(253, 167, 255, 1);
  --colors-gradient-base-gradient-base-2: rgba(255, 208, 98, 1);
  --colors-gradient-base-gradient-base-3: rgba(242, 247, 248, 1);
  --colors-gradient-base-gradient-base-4: rgba(151, 186, 255, 1);
  --colors-gradient-base-gradient-base-5: rgba(168, 226, 141, 1);
  --colors-gradient-base-gradient-base-6: rgba(220, 223, 255, 1);
  --colors-gradient-base-gradient-base-7: rgba(255, 94, 171, 1);
  --colors-gradient-base-gradient-base-8: rgba(242, 245, 93, 1);
  --colors-gradient-base-gradient-base-9: rgba(81, 192, 255, 1);
  --colors-gradient-base-gradient-base-10: rgba(191, 199, 139, 1);
  --colors-brand-color-leaf-green: rgba(19, 170, 82, 1);
  --theme-colors-default-white: rgba(255, 255, 255, 1);
  --theme-colors-neutral-neutral-12: var(--color-scheme-colors-slate-12);
  --theme-colors-neutral-neutral-11: var(--color-scheme-colors-slate-11);
  --theme-colors-neutral-neutral-9: var(--color-scheme-colors-slate-9);
  --theme-colors-neutral-neutral-alpha-7: var(--color-scheme-colors-slate-alpha-7);
  --theme-colors-neutral-neutral-alpha-8: var(--color-scheme-colors-slate-alpha-8);
  --theme-colors-neutral-neutral-7: var(--color-scheme-colors-slate-7);
  --theme-tokens-colors-surface: var(--color-scheme-variables-misc-white-to-dark-2);
  --theme-spacing-1: var(--scaling-100-1);
  --theme-spacing-2: var(--scaling-100-2);
  --theme-spacing-3: var(--scaling-100-3);
  --theme-spacing-7: var(--scaling-100-7);
  --theme-radius-1: var(--radius-medium-1);
  --theme-spacing-5: var(--scaling-100-5);
  --theme-radius-4-max: var(--radius-medium-4-max);
  --theme-tokens-space-button-height-4: var(--theme-spacing-8);
  --theme-spacing-8: var(--scaling-100-8);
  --theme-colors-neutral-neutral-3: var(--color-scheme-colors-slate-3);
  --theme-colors-neutral-neutral-alpha-3: var(--color-scheme-colors-slate-alpha-3);
  --theme-colors-accent-accent-10: var(--color-scheme-colors-indigo-10);
  --theme-colors-accent-accent-9: var(--color-scheme-colors-indigo-9);
  --theme-colors-neutral-neutral-alpha-9: var(--color-scheme-colors-slate-alpha-9);
  --theme-radius-3-max: var(--radius-medium-3-max);
  --theme-colors-neutral-neutral-alpha-5: var(--color-scheme-colors-slate-alpha-5);
  --theme-spacing-6: var(--scaling-100-6);
  --theme-tokens-space-button-height-2: var(--theme-spacing-6);
  --theme-radius-2-max: var(--radius-medium-2-max);
  --color-scheme-colors-slate-12: rgba(28, 32, 36, 1);
  --color-scheme-colors-slate-11: rgba(96, 100, 108, 1);
  --color-scheme-colors-slate-9: rgba(139, 141, 152, 1);
  --color-scheme-colors-slate-alpha-7: rgba(0, 6, 46, 0.2);
  --color-scheme-colors-slate-alpha-8: rgba(0, 8, 48, 0.27);
  --color-scheme-colors-slate-7: rgba(205, 206, 214, 1);
  --color-scheme-variables-misc-white-to-dark-2: rgba(255, 255, 255, 0.9);
  --color-scheme-colors-slate-3: rgba(240, 240, 243, 1);
  --color-scheme-colors-slate-alpha-3: rgba(0, 0, 51, 0.06);
  --color-scheme-colors-indigo-10: rgba(51, 88, 212, 1);
  --color-scheme-colors-indigo-9: rgba(62, 99, 221, 1);
  --color-scheme-colors-slate-alpha-9: rgba(0, 5, 29, 0.45);
  --color-scheme-colors-slate-alpha-5: rgba(0, 9, 50, 0.12);
  --scaling-100-1: 4px;
  --scaling-100-2: 8px;
  --scaling-100-3: 12px;
  --scaling-100-7: 40px;
  --scaling-100-5: 24px;
  --scaling-100-8: 48px;
  --scaling-100-6: 32px;
  --radius-medium-1: 3px;
  --radius-medium-4-max: 8px;
  --radius-medium-3-max: 6px;
  --radius-medium-2-max: 4px;
}

/*

To enable a theme in your HTML, simply add one of the following data attributes to an HTML element, like so:

<body data-color-scheme-mode="light">
    <!-- the rest of your content -->
</body>

You can apply the theme on any DOM node, not just the `body`

*/

[data-color-scheme-mode="light"] {
  --color-scheme-colors-slate-12: rgba(28, 32, 36, 1);
  --color-scheme-colors-slate-11: rgba(96, 100, 108, 1);
  --color-scheme-colors-slate-9: rgba(139, 141, 152, 1);
  --color-scheme-colors-slate-alpha-7: rgba(0, 6, 46, 0.2);
  --color-scheme-colors-slate-alpha-8: rgba(0, 8, 48, 0.27);
  --color-scheme-colors-slate-7: rgba(205, 206, 214, 1);
  --color-scheme-variables-misc-white-to-dark-2: rgba(255, 255, 255, 0.9);
  --color-scheme-colors-slate-3: rgba(240, 240, 243, 1);
  --color-scheme-colors-slate-alpha-3: rgba(0, 0, 51, 0.06);
  --color-scheme-colors-indigo-10: rgba(51, 88, 212, 1);
  --color-scheme-colors-slate-alpha-9: rgba(0, 5, 29, 0.45);
  --color-scheme-colors-slate-alpha-5: rgba(0, 9, 50, 0.12);
}

[data-color-scheme-mode="dark"] {
  --color-scheme-colors-slate-12: rgba(237, 238, 240, 1);
  --color-scheme-colors-slate-11: rgba(176, 180, 186, 1);
  --color-scheme-colors-slate-9: rgba(105, 110, 119, 1);
  --color-scheme-colors-slate-alpha-7: rgba(217, 237, 255, 0.25);
  --color-scheme-colors-slate-alpha-8: rgba(217, 237, 255, 0.36);
  --color-scheme-colors-slate-7: rgba(67, 72, 78, 1);
  --color-scheme-variables-misc-white-to-dark-2: rgba(0, 0, 0, 0.25);
  --color-scheme-colors-slate-3: rgba(33, 34, 37, 1);
  --color-scheme-colors-slate-alpha-3: rgba(221, 234, 248, 0.08);
  --color-scheme-colors-indigo-10: rgba(84, 114, 228, 1);
  --color-scheme-colors-slate-alpha-9: rgba(223, 235, 253, 0.43);
  --color-scheme-colors-slate-alpha-5: rgba(217, 237, 254, 0.15);
}