/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
    -webkit-text-size-adjust: 100%; /* 2 */
}

html, body {
    height: 100%;
}


/* Sections
   ========================================================================== */

/**
 * Render the `main` element consistently in IE.
 */

main {
    display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
    font-family: monospace; /* 1 */
    font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
    background-color: transparent;
    text-decoration: none;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
    font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
    font-family: monospace; /* 1 */
    font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
    border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input {
    /* 1 */
    overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select {
    /* 1 */
    text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type='button'],
[type='reset'],
[type='submit'] {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
    outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
    padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
    box-sizing: border-box; /* 1 */
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
    vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
    overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type='checkbox'],
[type='radio'] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
    height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type='search'] {
    -webkit-appearance: textfield; /* 1 */
    -moz-appearance: textfield;
    appearance: textfield;
    outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type='search']::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
    display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
    display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
    display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
    display: none;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

a,
a:visited,
a:hover,
a:active {
    color: inherit;
    text-decoration: none;
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 900;
    font-display: swap;
    src: local('Pretendard Black'),
    url(../font/woff2/Pretendard-Black.woff2) format('woff2'),
    url(../font/woff/Pretendard-Black.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 800;
    font-display: swap;
    src: local('Pretendard ExtraBold'),
    url(../font/woff2/Pretendard-ExtraBold.woff2) format('woff2'),
    url(../font/woff/Pretendard-ExtraBold.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    font-display: swap;
    src: local('Pretendard Bold'),
    url(../font/woff2/Pretendard-Bold.woff2) format('woff2'),
    url(../font/woff/Pretendard-Bold.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    font-display: swap;
    src: local('Pretendard SemiBold'),
    url(../font/woff2/Pretendard-SemiBold.woff2) format('woff2'),
    url(../font/woff/Pretendard-SemiBold.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    font-display: swap;
    src: local('Pretendard Medium'),
    url(../font/woff2/Pretendard-Medium.woff2) format('woff2'),
    url(../font/woff/Pretendard-Medium.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    font-display: swap;
    src: local('Pretendard Regular'),
    url(../font/woff2/Pretendard-Regular.woff2) format('woff2'),
    url(../font/woff/Pretendard-Regular.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 300;
    font-display: swap;
    src: local('Pretendard Light'),
    url(../font/woff2/Pretendard-Light.woff2) format('woff2'),
    url(../font/woff/Pretendard-Light.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 200;
    font-display: swap;
    src: local('Pretendard ExtraLight'),
    url(../font/woff2/Pretendard-ExtraLight.woff2) format('woff2'),
    url(../font/woff/Pretendard-ExtraLight.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 100;
    font-display: swap;
    src: local('Pretendard Thin'),
    url(../font/woff2/Pretendard-Thin.woff2) format('woff2'),
    url(../font/woff/Pretendard-Thin.woff) format('woff');
}

* {
    box-sizing: border-box;
}

:root {
    /*============== THEME COLOR ==============*/
    /* Primitive Colors */
    --color-blue-50: #e7f3fd;
    --color-blue-100: #d4eafc;
    --color-blue-200: #aad5f9;
    --color-blue-300: #7fc0f5;
    --color-blue-400: #54abf2;
    --color-blue-500: #2a96ef;
    --color-blue-600: #107fda;
    --color-blue-700: #0d66af;
    --color-blue-800: #07477c;
    --color-blue-900: #07355a;
    --color-blue-base: #339af0;

    --color-green-50: #f0fbea;
    --color-green-100: #e4f8d8;
    --color-green-200: #c9f0b2;
    --color-green-300: #aee98b;
    --color-green-400: #93e265;
    --color-green-500: #62c22b;
    --color-green-600: #479819;
    --color-green-650: #3ba14b;
    --color-green-700: #34750e;
    --color-green-800: #27560d;
    --color-green-900: #1f410b;
    --color-green-base: #4c9e1d;

    --color-yellow-50: #fff9e5;
    --color-yellow-100: #fff4d1;
    --color-yellow-200: #ffeaa3;
    --color-yellow-300: #ffdf75;
    --color-yellow-400: #ffd447;
    --color-yellow-500: #ffc91a;
    --color-yellow-600: #ebb400;
    --color-yellow-700: #bd9100;
    --color-yellow-800: #8f6d00;
    --color-yellow-900: #614a00;
    --color-yellow-base: #fbc400;

    --color-red-50: #fde8e8;
    --color-red-100: #fbd5d5;
    --color-red-200: #f6acac;
    --color-red-300: #f28282;
    --color-red-400: #ee5959;
    --color-red-500: #e92f2f;
    --color-red-600: #d41616;
    --color-red-700: #ab1212;
    --color-red-800: #8c1010;
    --color-red-900: #6f0b0b;
    --color-red-950: #520b0b;
    --color-red-base: #e81717;

    --color-indigo-50: #ecf0ff;
    --color-indigo-100: #dce4ff;
    --color-indigo-200: #c7d2fe;
    --color-indigo-300: #a5b4fc;
    --color-indigo-400: #818cf8;
    --color-indigo-500: #6366f1;
    --color-indigo-600: #4f46e5;
    --color-indigo-700: #4338ca;
    --color-indigo-800: #2d268f;
    --color-indigo-900: #1e1b4b;
    --color-indigo-base: #585ae2;

    --color-sapphire-50: #f0fff0;
    --color-sapphire-100: #d7fcd8;
    --color-sapphire-200: #a5f0aa;
    --color-sapphire-300: #78e383;
    --color-sapphire-400: #4fd661;
    --color-sapphire-500: #2aca45;
    --color-sapphire-600: #1aa336;
    --color-sapphire-700: #0e7d28;
    --color-sapphire-800: #05571b;
    --color-sapphire-900: #023010;
    --color-sapphire-950: #002406;
    --color-sapphire-base: #1ce33d;

    --color-gray-25: #F5F5F5;
    --color-gray-50: #f2f2f2;
    --color-gray-100: #e8e8e8;
    --color-gray-200: #d1d1d1;
    --color-gray-300: #bababa;
    --color-gray-400: #a3a3a3;
    --color-gray-500: #8c8c8c;
    --color-gray-600: #757575;
    --color-gray-700: #5e5e5e;
    --color-gray-800: #454545;
    --color-gray-900: #303030;
    --color-gray-1000: #2B2B2B;
    --color-gray-base: #222222;

    --color-orange-500: #ea5c35;

    --color-white: #ffffff;
    --color-black: #000000;

    /* Shadow and Glow (Light) */
    --shadow-black-04: rgba(0, 0, 0, 0.04);
    --shadow-black-4: rgba(0, 0, 0, 0.4);
    --shadow-black-12: rgba(0, 0, 0, 0.12);
    --shadow-black-16: rgba(0, 0, 0, 0.16);
    --shadow-black-20: rgba(0, 0, 0, 0.2);
    --shadow-black-24: rgba(0, 0, 0, 0.24);
    --shadow-black-48: rgba(0, 0, 0, 0.48);
    --shadow-black-64: rgba(0, 0, 0, 0.64);
    --shadow-white-04: rgba(255, 255, 255, 0.04);
    --shadow-white-4: rgba(255, 255, 255, 0.4);
    --shadow-white-12: rgba(255, 255, 255, 0.12);
    --shadow-white-16: rgba(255, 255, 255, 0.16);
    --shadow-white-20: rgba(255, 255, 255, 0.2);
    --shadow-white-24: rgba(255, 255, 255, 0.24);
    --shadow-white-48: rgba(255, 255, 255, 0.48);
    --shadow-white-64: rgba(255, 255, 255, 0.64);

    --shadow-none: var(--shadow-black-4);
    --shadow-subtle: var(--shadow-black-12);
    --shadow-default: var(--shadow-black-16);
    --shadow-bold: var(--shadow-black-20);
    --shadow-bolder: var(--shadow-black-24);
    --shadow-extra-bolder: var(--shadow-black-48);
    --shadow-heavy: var(--shadow-black-64);

    /* Semantic Text */
    --text-primary: var(--color-gray-base);
    --text-secondary: var(--color-gray-800);
    --text-tertiary: var(--color-gray-700);
    --text-info: var(--color-blue-600);
    --text-info-bold: var(--color-blue-800);
    --text-success: var(--color-green-600);
    --text-success-bold: var(--color-green-800);
    --text-warning: var(--color-yellow-700);
    --text-warning-bold: var(--color-yellow-900);
    --text-danger: var(--color-red-500);
    --text-danger-bold: var(--color-red-700);
    --text-active: var(--color-indigo-600);
    --text-active-bold: var(--color-indigo-700);
    --text-disabled: var(--color-gray-500);

    --text-interactive-primary: var(--color-sapphire-700);
    --text-interactive-primary-hover: var(--color-sapphire-800);
    --text-interactive-primary-press: var(--color-sapphire-900);
    --text-interactive-secondary: var(--color-gray-700);
    --text-interactive-secondary-hover: var(--color-gray-800);
    --text-interactive-secondary-press: var(--color-gray-900);
    --text-interactive-selected: var(--color-sapphire-500);
    --text-interactive-destructive: var(--color-red-600);
    --text-interactive-destructive-hover: var(--color-red-700);
    --text-interactive-destructive-press: var(--color-red-800);
    --text-interactive-visited: var(--color-indigo-700);
    --text-interactive-inverse: var(--color-white);

    --text-interactive-badge-active: var(--color-sapphire-700);
    --text-interactive-badge-active-hover: var(--color-sapphire-800);
    --text-interactive-badge-inactive: var(--color-gray-800);
    --text-interactive-badge-inactive-hover: var(--color-gray-700);

    /* Semantic Background */
    --background-primary: var(--color-white);
    --background-secondary: var(--color-gray-50);
    --background-tertiary: var(--color-gray-100);
    --background-info: var(--background-info-subtle);
    --background-info-soft: var(--color-blue-300);
    --background-info-muted: var(--color-blue-200);
    --background-info-subtle: var(--color-blue-100);
    --background-success: var(--color-green-600);
    --background-success-soft: var(--color-green-300);
    --background-success-muted: var(--color-green-200);
    --background-success-subtle: var(--color-green-100);
    --background-warning: var(--color-yellow-600);
    --background-warning-soft: var(--color-yellow-300);
    --background-warning-muted: var(--color-yellow-200);
    --background-warning-subtle: var(--color-yellow-100);
    --background-danger: var(--background-danger-subtle);
    --background-danger-soft: var(--color-red-200);
    --background-danger-muted: var(--color-red-100);
    --background-danger-subtle: var(--color-red-50);
    --background-active: var(--color-indigo-600);
    --background-active-soft: var(--color-indigo-300);
    --background-active-muted: var(--color-indigo-200);
    --background-active-subtle: var(--color-indigo-100);
    --background-disabled: var(--color-gray-100);
    --background-disabled-switch: var(--color-gray-100);

    --background-interactive-primary: var(--color-sapphire-700);
    --background-interactive-primary-hover: var(--color-sapphire-800);
    --background-interactive-primary-press: var(--color-sapphire-900);
    --background-interactive-secondary: var(--color-gray-50);
    --background-interactive-secondary-hover: var(--color-gray-100);
    --background-interactive-secondary-press: var(--color-gray-200);
    --background-interactive-selected: var(--color-sapphire-50);
    --background-interactive-selected-hover: var(--color-sapphire-100);
    --background-interactive-selected-press: var(--color-sapphire-200);
    --background-interactive-destructive: var(--color-red-600);
    --background-interactive-destructive-hover: var(--color-red-700);
    --background-interactive-destructive-press: var(--color-red-800);
    --background-interactive-destructive-selected: var(--color-red-50);
    --background-interactive-destructive-selected-hover: var(--color-red-100);
    --background-interactive-destructive-selected-press: var(--color-red-200);
    --background-interactive-inverse: var(--color-gray-900);
    --background-interactive-badge-active: var(--color-sapphire-50);
    --background-interactive-badge-active-hover: var(--color-gray-100);
    --background-interactive-badge-inactive: var(--color-gray-200);
    --background-interactive-badge-inactive-hover: var(--color-gray-100);
    --background-color-shadow: var(--shadow-black-04);
    --background-group-info: var(--color-gray-25);
    --background-btn-glass-hover: var(--color-gray-100);

    /* Semantic Border */
    --border-primary: var(--color-gray-400);
    --border-secondary: var(--color-gray-200);
    --border-tertiary: var(--color-gray-50);
    --border-focus-ring: var(--color-sapphire-600);
    --border-info: var(--color-blue-700);
    --border-info-subtle: var(--color-blue-200);
    --border-info-muted: var(--color-blue-300);
    --border-info-soft: var(--color-blue-400);
    --border-success: var(--color-green-700);
    --border-success-subtle: var(--color-green-300);
    --border-success-muted: var(--color-green-400);
    --border-success-soft: var(--color-green-500);
    --border-warning: var(--color-yellow-600);
    --border-warning-subtle: var(--color-yellow-200);
    --border-warning-muted: var(--color-yellow-300);
    --border-warning-soft: var(--color-yellow-400);
    --border-danger: var(--color-red-600);
    --border-danger-subtle: var(--color-red-200);
    --border-danger-muted: var(--color-red-300);
    --border-danger-soft: var(--color-red-400);
    --border-active: var(--color-indigo-700);
    --border-active-success: var(--color-sapphire-700);
    --border-active-warning: var(--color-yellow-700);
    --border-active-subtle: var(--color-indigo-300);
    --border-active-muted: var(--color-indigo-400);
    --border-active-soft: var(--color-indigo-500);
    --border-disabled: var(--color-gray-200);

    --border-interactive-primary: var(--color-sapphire-700);
    --border-interactive-primary-hover: var(--color-sapphire-800);
    --border-interactive-primary-press: var(--color-sapphire-900);
    --border-interactive-secondary: var(--color-gray-200);
    --border-interactive-secondary-hover: var(--color-gray-300);
    --border-interactive-secondary-press: var(--color-gray-400);
    --border-interactive-destructive: var(--color-red-600);
    --border-interactive-destructive-hover: var(--color-red-700);
    --border-interactive-destructive-press: var(--color-red-800);

    /* Semantic Icon */
    --icon-primary: var(--color-gray-base);
    --icon-secondary: var(--color-gray-800);
    --icon-tertiary: var(--color-gray-700);
    --icon-brand: var(--color-sapphire-500);
    --icon-info: var(--color-blue-600);
    --icon-info-bold: var(--color-blue-800);
    --icon-info-muted: var(--color-blue-100);
    --icon-info-subtle: var(--color-blue-50);
    --icon-success: var(--color-green-600);
    --icon-success-bold: var(--color-green-700);
    --icon-success-muted: var(--color-green-200);
    --icon-success-subtle: var(--color-green-100);
    --icon-warning: var(--color-yellow-700);
    --icon-warning-bold: var(--color-yellow-900);
    --icon-warning-muted: var(--color-yellow-200);
    --icon-warning-subtle: var(--color-yellow-100);
    --icon-danger: var(--color-red-500);
    --icon-danger-bold: var(--color-red-700);
    --icon-danger-muted: var(--color-red-100);
    --icon-danger-subtle: var(--color-red-50);
    --icon-active: var(--color-indigo-700);
    --icon-active-soft: var(--color-indigo-500);
    --icon-active-muted: var(--color-indigo-400);
    --icon-active-subtle: var(--color-indigo-300);
    --icon-disabled: var(--color-gray-500);
    --icon-selected: var(--color-sapphire-500);

    --icon-interactive-primary: var(--color-sapphire-700);
    --icon-interactive-primary-hover: var(--color-sapphire-800);
    --icon-interactive-primary-press: var(--color-sapphire-900);
    --icon-interactive-secondary: var(--color-gray-700);
    --icon-interactive-secondary-hover: var(--color-gray-800);
    --icon-interactive-secondary-press: var(--color-gray-900);
    --icon-interactive-danger-bold: var(--color-red-700);
    --icon-interactive-visited: var(--color-indigo-700);
    --icon-interactive-inverse: var(--color-white);
    --icon-interactive-disabled: var(--color-gray-500);

    /* Semantic Glow */
    --shadow-2: 0px 1px 2px 0px var(--shadow-black-16),
    0px 0px 1px 0px var(--shadow-black-12);
    --shadow-4: 0px 2px 4px 0px var(--shadow-black-16),
    0px 0px 2px 0px var(--shadow-black-12);
    --shadow-8: 0px 4px 8px 0px var(--shadow-black-16),
    0px 0px 4px 0px var(--shadow-black-12);
    --shadow-16: 0px 8px 16px 0px var(--shadow-black-16),
    0px 0px 8px 0px var(--shadow-black-12);

    /* Z-Index */
    --z-index-sticky-header: 100;

    /*============== END THEME COLOR ==============*/

    /*============== FONTS =============*/
    /* Font family base */
    --font-family-base: 'Pretendard', system-ui, -apple-system, sans-serif;
    --font-family-monospace: ui-monospace, 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas',
    'Liberation Mono', 'Courier New', monospace;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Heading styles */
    --font-size-heading-4xl: 3rem; /* 48px */
    --line-height-heading-4xl: 3.25rem; /* 52px */
    --font-weight-heading-4xl: var(--font-weight-bold);

    --font-size-heading-3xl: 2.5rem; /* 40px */
    --line-height-heading-3xl: 2.75rem; /* 44px */
    --font-weight-heading-3xl: var(--font-weight-bold);

    --font-size-heading-2xl: 2rem; /* 32px */
    --line-height-heading-2xl: 2.25rem; /* 36px */
    --font-weight-heading-2xl: var(--font-weight-semibold);

    --font-size-heading-xl: 1.75rem; /* 28px */
    --line-height-heading-xl: 2rem; /* 32px */
    --font-weight-heading-xl: var(--font-weight-semibold);

    --font-size-heading-lg: 1.5rem; /* 24px */
    --line-height-heading-lg: 1.75rem; /* 28px */
    --font-weight-heading-lg: var(--font-weight-semibold);

    --font-size-heading-md: 1.25rem; /* 20px */
    --line-height-heading-md: 1.5rem; /* 24px */
    --font-weight-heading-md: var(--font-weight-semibold);

    --font-size-heading-sm: 1.125rem; /* 18px */
    --line-height-heading-sm: 1.375rem; /* 22px */
    --font-weight-heading-sm: var(--font-weight-semibold);

    /* Body styles - Base (regular) */
    --font-size-body-lg: 1rem; /* 16px */
    --line-height-body-lg: 1.25rem; /* 20px */
    --font-weight-body-lg: var(--font-weight-regular);

    --font-size-body-md: 0.875rem; /* 14px */
    --line-height-body-md: 1.125rem; /* 18px */
    --font-weight-body-md: var(--font-weight-regular);

    --font-size-body-sm: 0.75rem; /* 12px */
    --line-height-body-sm: 1rem; /* 16px */
    --font-weight-body-sm: var(--font-weight-regular);

    --font-size-body-sx: 0.5rem; /* 8px */
    --line-height-body-sx: 0.75rem; /* 12px */

    /* Body variations - lg */
    --font-weight-body-lg-semibold: var(--font-weight-semibold);
    --font-weight-body-lg-medium: var(--font-weight-medium);
    --font-weight-body-lg-regular: var(--font-weight-regular);

    /* Body variations - md */
    --font-weight-body-md-semibold: var(--font-weight-semibold);
    --font-weight-body-md-medium: var(--font-weight-medium);
    --font-weight-body-md-regular: var(--font-weight-regular);
    --text-decoration-body-md-underline: underline;
    --font-family-body-md-code: var(--font-family-monospace);

    /* Body variations - sm */
    --font-weight-body-sm-semibold: var(--font-weight-semibold);
    --font-weight-body-sm-medium: var(--font-weight-medium);
    --font-weight-body-sm-regular: var(--font-weight-regular);

    /* END FONTS */

    --opacity-0: 0;
    --opacity-20: 0.2;
    --opacity-40: 0.4;
    --opacity-60: 0.5;
    --opacity-80: 0.8;
    --opacity-100: 1;

    --spacing-0: 0;
    --spacing-2: 0.125rem;
    --spacing-4: 0.25rem;
    --spacing-6: 0.375rem;
    --spacing-8: 0.5rem;
    --spacing-12: 0.75rem;
    --spacing-16: 1rem;
    --spacing-20: 1.25rem;
    --spacing-24: 1.5rem;
    --spacing-32: 2rem;
    --spacing-36: 2.25rem;
    --spacing-40: 2.5rem;
    --spacing-48: 3rem;
    --spacing-56: 3.5rem;
    --spacing-64: 4rem;
    --spacing-80: 5rem;
    --spacing-96: 6rem;
    --spacing-112: 7rem;
    --spacing-128: 8rem;
    --spacing-160: 10rem;

    --border-width-1: 0.063rem;
    --border-width-2: 0.125rem;
    --border-width-4: 0.25rem;
    --border-width-8: 0.5rem;

    --border-radius-0: 0;
    --border-radius-2: 0.125rem;
    --border-radius-4: 0.25rem;
    --border-radius-6: 0.375rem;
    --border-radius-8: 0.5rem;
    --border-radius-12: 0.75rem;
    --border-radius-16: 1rem;
    --border-radius-circle: 50%;

    --preview-max-width: 80vw;
    --preview-max-width-fallback: 900px;
    --preview-max-height: 70vh;
    --preview-width: 100%;

    /*============== HEIGHT =============*/
    --common-header-height: 4.5rem; /* 72px */
    --page-header-height: 5.25rem; /* 84px */
    --schedule-header-height: 10rem; /* 160px */
    /*============== HEIGHT ==============*/

    @media (max-width: 767px) {
        --font-size-heading-4xl: 2.625rem; /* ~42px */
        --line-height-heading-4xl: 2.875rem; /* ~46px */
        --font-size-heading-3xl: 2.25rem; /* 36px */
        --line-height-heading-3xl: 2.5rem; /* 40px */
        --font-size-body-lg: 0.9375rem; /* 15px */
        --line-height-body-lg: 1.1875rem; /* 19px */
    }
}

[data-theme='dark'],
.dark {
    --background-primary: var(--color-gray-base);
    --background-secondary: var(--color-gray-900);
    --background-tertiary: var(--color-gray-800);


    --color-sapphire-50: #d3f7d4;
    --color-sapphire-100: #a1e9a6;
    --color-sapphire-200: #73d97d;
    --color-sapphire-300: #49c359;
    --color-sapphire-400: #27af3e;
    --color-sapphire-500: #228a34;
    --color-sapphire-600: #1e662a;
    --color-sapphire-700: #1b4b23;
    --color-sapphire-800: #16381d;
    --color-sapphire-900: #132417;
    --color-sapphire-base: #ffffff;

    --text-primary: var(--color-gray-50);
    --text-secondary: var(--color-gray-200);
    --text-tertiary: var(--color-gray-300);
    --text-info: var(--color-blue-500);
    --text-info-bold: var(--color-blue-300);
    --text-success: var(--color-green-500);
    --text-success-bold: var(--color-green-300);
    --text-warning: var(--color-yellow-500);
    --text-warning-bold: var(--color-yellow-300);
    --text-danger: var(--color-red-400);
    --text-danger-bold: var(--color-red-200);
    --text-active: var(--color-indigo-400);
    --text-active-bold: var(--color-indigo-300);

    --text-interactive-primary: var(--color-sapphire-400);
    --text-interactive-primary-hover: var(--color-sapphire-300);
    --text-interactive-primary-press: var(--color-sapphire-200);
    --text-interactive-secondary: var(--color-gray-200);
    --text-interactive-secondary-hover: var(--color-gray-100);
    --text-interactive-secondary-press: var(--color-gray-50);
    --text-interactive-selected: var(--color-sapphire-400);
    --text-interactive-destructive: var(--color-red-400);
    --text-interactive-destructive-hover: var(--color-red-300);
    --text-interactive-destructive-press: var(--color-red-200);
    --text-interactive-visited: var(--color-indigo-400);
    --text-interactive-inverse: var(--color-gray-50);
    --text-interactive-badge-active: var(--color-sapphire-400);
    --text-interactive-badge-active-hover: var(--color-sapphire-300);
    --text-interactive-badge-inactive: var(--color-gray-100);
    --text-interactive-badge-inactive-hover: var(--color-gray-200);

    --background-info-subtle: var(--color-blue-900);
    --background-success: var(--color-green-600);
    --background-success-subtle: var(--color-green-900);
    --background-warning-subtle: var(--color-yellow-900);
    --background-danger-subtle: var(--color-red-900);
    --background-active-subtle: var(--color-indigo-900);
    --background-active: var(--color-indigo-500);

    --background-interactive-primary: var(--color-sapphire-500);
    --background-interactive-primary-hover: var(--color-sapphire-400);
    --background-interactive-primary-press: var(--color-sapphire-300);
    --background-interactive-secondary: var(--color-gray-900);
    --background-interactive-secondary-hover: var(--color-gray-800);
    --background-interactive-secondary-press: var(--color-gray-700);
    --background-interactive-selected: var(--color-sapphire-950);
    --background-interactive-selected-hover: var(--color-sapphire-800);
    --background-interactive-selected-press: var(--color-sapphire-700);
    --background-interactive-destructive: var(--color-red-600);
    --background-interactive-destructive-hover: var(--color-red-500);
    --background-interactive-destructive-press: var(--color-red-400);
    --background-interactive-destructive-selected: var(--color-red-950);
    --background-interactive-destructive-selected-hover: var(--color-red-800);
    --background-interactive-destructive-selected-press: var(--color-red-700);
    --background-interactive-inverse: var(--color-gray-700);
    --background-disabled: var(--color-gray-900);
    --background-disabled-switch: var(--color-gray-100);
    --background-interactive-badge-active: var(--color-sapphire-950);
    --background-interactive-badge-active-hover: var(--color-gray-900);
    --background-interactive-badge-inactive: var(--color-gray-700);
    --background-interactive-badge-inactive-hover: var(--color-gray-800);
    --background-color-shadow: var(--shadow-white-04);
    --background-group-info: var(--color-gray-1000);
    --background-btn-glass-hover: var(--color-gray-800);

    --border-primary: var(--color-gray-600);
    --border-secondary: var(--color-gray-700);
    --border-tertiary: var(--color-gray-900);
    --border-focus-ring: var(--color-sapphire-400);
    --border-info: var(--color-blue-500);
    --border-info-subtle: var(--color-blue-800);
    --border-info-muted: var(--color-blue-700);
    --border-info-soft: var(--color-blue-600);
    --border-success: var(--color-green-500);
    --border-success-subtle: var(--color-green-800);
    --border-success-muted: var(--color-green-700);
    --border-success-soft: var(--color-green-600);
    --border-warning: var(--color-yellow-500);
    --border-warning-subtle: var(--color-yellow-800);
    --border-warning-muted: var(--color-yellow-700);
    --border-warning-soft: var(--color-yellow-600);
    --border-danger: var(--color-red-400);
    --border-danger-subtle: var(--color-red-800);
    --border-danger-muted: var(--color-red-700);
    --border-danger-soft: var(--color-red-500);
    --border-active: var(--color-indigo-400);
    --border-active-success: var(--color-sapphire-400);
    --border-active-warning: var(--color-yellow-400);
    --border-active-subtle: var(--color-indigo-800);
    --border-active-muted: var(--color-indigo-700);
    --border-disabled: var(--color-gray-800);

    --border-interactive-primary: var(--color-sapphire-500);
    --border-interactive-primary-hover: var(--color-sapphire-400);
    --border-interactive-primary-press: var(--color-sapphire-300);
    --border-interactive-secondary: var(--color-gray-700);
    --border-interactive-secondary-hover: var(--color-gray-600);
    --border-interactive-secondary-press: var(--color-gray-500);
    --border-interactive-destructive: var(--color-red-400);
    --border-interactive-destructive-hover: var(--color-red-300);
    --border-interactive-destructive-press: var(--color-red-200);

    --icon-primary: var(--color-gray-50);
    --icon-secondary: var(--color-gray-200);
    --icon-tertiary: var(--color-gray-300);
    --icon-brand: var(--color-sapphire-400);
    --icon-info: var(--color-blue-500);
    --icon-info-bold: var(--color-blue-300);
    --icon-info-muted: var(--color-blue-800);
    --icon-info-subtle: var(--color-blue-900);
    --icon-success: var(--color-green-500);
    --icon-success-bold: var(--color-green-300);
    --icon-success-muted: var(--color-green-800);
    --icon-success-subtle: var(--color-green-900);
    --icon-warning: var(--color-yellow-500);
    --icon-warning-bold: var(--color-yellow-300);
    --icon-warning-muted: var(--color-yellow-800);
    --icon-warning-subtle: var(--color-yellow-900);
    --icon-danger: var(--color-red-400);
    --icon-danger-bold: var(--color-red-200);
    --icon-danger-muted: var(--color-red-800);
    --icon-danger-subtle: var(--color-red-900);
    --icon-active: var(--color-indigo-400);
    --icon-active-muted: var(--color-indigo-700);
    --icon-active-subtle: var(--color-indigo-800);
    --icon-selected: var(--color-sapphire-400);

    --icon-interactive-primary: var(--color-sapphire-400);
    --icon-interactive-primary-hover: var(--color-sapphire-300);
    --icon-interactive-primary-press: var(--color-sapphire-200);
    --icon-interactive-secondary: var(--color-gray-200);
    --icon-interactive-secondary-hover: var(--color-gray-100);
    --icon-interactive-secondary-press: var(--color-gray-50);
    --icon-interactive-danger-bold: var(--color-red-200);
    --icon-interactive-visited: var(--color-indigo-400);
    --icon-interactive-inverse: var(--color-gray-50);

    --shadow-none: var(--shadow-white-4);
    --shadow-subtle: var(--shadow-white-12);
    --shadow-default: var(--shadow-white-16);
    --shadow-bold: var(--shadow-white-20);
    --shadow-bolder: var(--shadow-white-24);
    --shadow-extra-bolder: var(--shadow-white-48);
    --shadow-heavy: var(--shadow-white-64);

    --shadow-2: 0px 1px 2px 0px var(--shadow-white-24),
    0px 0px 1px 0px var(--shadow-white-20);
    --shadow-4: 0px 2px 4px 0px var(--shadow-white-24),
    0px 0px 2px 0px var(--shadow-white-20);
    --shadow-8: 0px 4px 8px 0px var(--shadow-white-24),
    0px 0px 4px 0px var(--shadow-white-20);
    --shadow-16: 0px 8px 16px 0px var(--shadow-white-24),
    0px 0px 8px 0px var(--shadow-white-20);
}

body {
    margin: 0;
    padding: 0;
    font-weight: var(--font-weight-body-md);
    font-family: var(--font-family-base);
    font-size: var(--font-size-body-md);
    line-height: var(--line-height-body-md);
    color: var(--text-primary);
    background-color: var(--background-primary);
}

p {
    margin: 0;
    padding: 0;
}