:root{
    /* Text-size styles */
    --ref-font-family-pretendard: 'Pretendard';
    --ref-font-weight-400: 400;
    --ref-font-weight-500: 500;
    --ref-font-weight-600: 600;
    --ref-font-weight-700: 700;
    --ref-font-lineHeight-140: 140%;
    --ref-font-lineHeight-150: 150%;
    --ref-font-lineHeight-160: 160%;
    --ref-font-lineHeight-170: 170%;
    
    --sys-font-letterSpacing-default: -0.02em;

    --sys-font-lineHeight-heading: var(--ref-font-lineHeight-140);
    --sys-font-lineHeight-title: var(--ref-font-lineHeight-150);
    --sys-font-lineHeight-subtitle: var(--ref-font-lineHeight-160);
    --sys-font-lineHeight-default: var(--ref-font-lineHeight-170);

    --sys-font-heading-1: var(--ref-font-weight-700) 32px / var(--sys-font-lineHeight-heading) var(--ref-font-family-pretendard);
    --sys-font-heading-2: var(--ref-font-weight-700) 28px / var(--sys-font-lineHeight-heading) var(--ref-font-family-pretendard);
    --sys-font-heading-3: var(--ref-font-weight-700) 24px / var(--sys-font-lineHeight-heading) var(--ref-font-family-pretendard);
    --sys-font-title-1: var(--ref-font-weight-600) 24px / var(--sys-font-lineHeight-title) var(--ref-font-family-pretendard);
    --sys-font-title-2: var(--ref-font-weight-600) 20px / var(--sys-font-lineHeight-title) var(--ref-font-family-pretendard);
    --sys-font-title-3: var(--ref-font-weight-600) 18px / var(--sys-font-lineHeight-title) var(--ref-font-family-pretendard);
    --sys-font-title-4: var(--ref-font-weight-600) 16px / var(--sys-font-lineHeight-title) var(--ref-font-family-pretendard);
    --sys-font-subtitle-1: var(--ref-font-weight-500) 20px / var(--sys-font-lineHeight-subtitle) var(--ref-font-family-pretendard);
    --sys-font-subtitle-2: var(--ref-font-weight-500) 18px / var(--sys-font-lineHeight-subtitle) var(--ref-font-family-pretendard);
    --sys-font-subtitle-3: var(--ref-font-weight-500) 16px / var(--sys-font-lineHeight-subtitle) var(--ref-font-family-pretendard);
    --sys-font-subtitle-4: var(--ref-font-weight-500) 14px / var(--sys-font-lineHeight-subtitle) var(--ref-font-family-pretendard);
    --sys-font-body-1: var(--ref-font-weight-400) 18px / var(--sys-font-lineHeight-default) var(--ref-font-family-pretendard);
    --sys-font-body-2: var(--ref-font-weight-500) 18px / var(--sys-font-lineHeight-default) var(--ref-font-family-pretendard);
    --sys-font-body-3: var(--ref-font-weight-400) 16px / var(--sys-font-lineHeight-default) var(--ref-font-family-pretendard);
    --sys-font-body-4: var(--ref-font-weight-500) 16px / var(--sys-font-lineHeight-default) var(--ref-font-family-pretendard);
    --sys-font-body-5: var(--ref-font-weight-400) 14px / var(--sys-font-lineHeight-default) var(--ref-font-family-pretendard);
    --sys-font-body-6: var(--ref-font-weight-500) 14px / var(--sys-font-lineHeight-default) var(--ref-font-family-pretendard);
    --sys-font-body-7: var(--ref-font-weight-500) 12px / var(--sys-font-lineHeight-default) var(--ref-font-family-pretendard);
    --sys-font-detail-1: var(--ref-font-weight-400) 14px / var(--sys-font-lineHeight-default) var(--ref-font-family-pretendard);
    --sys-font-detail-2: var(--ref-font-weight-500) 14px / var(--sys-font-lineHeight-default) var(--ref-font-family-pretendard);
    --sys-font-detail-3: var(--ref-font-weight-500) 12px / var(--sys-font-lineHeight-default) var(--ref-font-family-pretendard);
    --sys-font-button-xs: var(--ref-font-weight-600) 12px / var(--sys-font-lineHeight-default) var(--ref-font-family-pretendard);
    --sys-font-button-sm: var(--ref-font-weight-600) 14px / var(--sys-font-lineHeight-default) var(--ref-font-family-pretendard);
    --sys-font-button-md: var(--ref-font-weight-600) 14px / var(--sys-font-lineHeight-default) var(--ref-font-family-pretendard);
    --sys-font-button-lg: var(--ref-font-weight-600) 16px / var(--sys-font-lineHeight-default) var(--ref-font-family-pretendard);
    --sys-font-button-xl: var(--ref-font-weight-600) 18px / var(--sys-font-lineHeight-default) var(--ref-font-family-pretendard);
    --sys-font-button-label: var(--ref-font-weight-400) 15px / var(--sys-font-lineHeight-default) var(--ref-font-family-pretendard);
    --sys-font-button-label-all: var(--ref-font-weight-600) 15px / var(--sys-font-lineHeight-default) var(--ref-font-family-pretendard);

    /* reference */
    --ref-sizing-10: 1px;
    --ref-sizing-200: 16px;
    --ref-sizing-250: 20px;
    --ref-sizing-150: 12px;
    --ref-sizing-600: 48px;
    --ref-sizing-700: 56px;
    --ref-sizing-800: 64px;
    --ref-sizing-900: 72px;
    --ref-sizing-500: 40px;
    --ref-sizing-300: 24px;
    --ref-sizing-400: 32px;
    --ref-sizing-100: 8px;
    --ref-sizing-1000: 80px;
    --ref-sizing-350: 28px;
    --ref-radius-md: 8px;
    --ref-radius-full: 360px;
    --ref-color-grey-98: #FAFAFAFF;
    --ref-color-grey-90: #F2F2F2FF;
    --ref-color-grey-80: #E6E6E6FF;
    --ref-color-grey-70: #D9D9D9FF;
    --ref-color-grey-60: #CCCCCCFF;
    --ref-color-grey-50: #B3B3B3FF;
    --ref-color-grey-40: #999999FF;
    --ref-color-grey-30: #595959FF;
    --ref-color-grey-20: #333333FF;
    --ref-color-grey-15: #1A1A1AFF;
    --ref-color-grey-black: #0D0D0DFF;
    --ref-color-grey-white: #FFFFFFFF;
    --ref-color-blue-95: #E9F5FCFF;
    --ref-color-blue-90: #D2ECF9FF;
    --ref-color-blue-50: #1F9EDEFF;
    --ref-color-blue-40: #197FB3FF;
    --ref-color-blue-20: #0C405AFF;
    --ref-color-purple-95: #F9F1FDFF;
    --ref-color-purple-90: #ECD1FAFF;
    --ref-color-purple-60: #B447EBFF;
    --ref-color-purple-40: #8114B8FF;
    --ref-color-purple-20: #410A5CFF;
    --ref-color-green-95: #ECF9F1FF;
    --ref-color-green-90: #D7F4E3FF;
    --ref-color-green-50: #39C674FF;
    --ref-color-green-30: #2E9E5DFF;
    --ref-color-green-20: #174F2EFF;
    --ref-color-orange-90: #FFF6E5FF;
    --ref-color-orange-85: #FFEECCFF;
    --ref-color-orange-50: #FFAA00FF;
    --ref-color-orange-40: #CC8800FF;
    --ref-color-orange-20: #664400FF;
    --ref-color-red-95: #FFF0F1FF;
    --ref-color-red-90: #FCCFD2FF;
    --ref-color-red-60: #FA3848FF;
    --ref-color-red-40: #C70515FF;
    --ref-color-red-20: #63030BFF;
    --ref-sizing-50: 4px;
    --ref-spacing-50: 4px;
    --ref-spacing-100: 8px;
    --ref-spacing-150: 12px;
    --ref-spacing-200: 16px;
    --ref-spacing-250: 20px;
    --ref-spacing-300: 24px;
    --ref-spacing-350: 28px;
    --ref-spacing-400: 32px;
    --ref-spacing-450: 36px;
    --ref-spacing-500: 40px;
    --ref-spacing-550: 44px;
    --ref-spacing-600: 48px;
    --ref-spacing-650: 52px;
    --ref-spacing-700: 56px;
    --ref-spacing-750: 60px;
    --ref-spacing-800: 64px;
    --ref-spacing-900: 72px;
    --ref-spacing-1000: 80px;
    --ref-color-tango-95: #001cf51a;
    --ref-color-tango-90: #F57B0033;
    --ref-color-tango-50: #236EDE;
    --ref-color-tango-40: #BB3711FF;
    --ref-color-tango-30: #8C290DFF;
    --ref-sizing-450: 36px;
    --ref-sizing-550: 44px;
    --ref-sizing-650: 52px;
    --ref-color-yellow-50: #FFCC11FF;
    --background-dim: #00000080;
    --background-dim: #00000080;
    --ref-color-grey-97: #F7F7F7FF;
    --ref-sizing-750: 60px;
    --ref-radius-lg: 16px;
    --ref-radius-sm: 4px;

    /* color */
    --background-onsurface: var(--onsurface);
    --background-light: var(--ref-color-grey-98);
    --background-dark: var(--ref-color-grey-90);
    --background-onsurface-alt: var(--onsurface-alt);
    --background-light-alt: var(--ref-color-grey-20);
    --background-dark-alt: var(--ref-color-grey-15);
    --onsurface: var(--ref-color-grey-white);
    --onsurface-alt: var(--ref-color-grey-black);
    --border-frame-light: var(--ref-color-grey-80);
    --border-frame-dark: var(--ref-color-grey-70);
    --border-control: var(--ref-color-grey-60);
    --border-frame-light-alt: var(--ref-color-grey-30);
    --border-frame-dark-alt: var(--ref-color-grey-40);
    --border-control-alt: var(--ref-color-grey-50);
    --icon-disabled: var(--ref-color-grey-50);
    --icon-default: var(--ref-color-grey-20);
    --icon-disabled-alt: var(--ref-color-grey-60);
    --icon-default-alt: var(--ref-color-grey-90);
    --text-disabled: var(--ref-color-grey-40);
    --text-subdued: var(--ref-color-grey-30);
    --text-default: var(--ref-color-grey-15);
    --text-disabled-alt: var(--ref-color-grey-70);
    --text-subdued-alt: var(--ref-color-grey-80);
    --text-default-alt: var(--ref-color-grey-98);
    --brand-lighter: var(--ref-color-tango-95);
    --brand-light: var(--ref-color-tango-90);
    --brand-standard: var(--ref-color-tango-50);
    --brand-dark: var(--ref-color-tango-40);
    --brand-darker: var(--ref-color-tango-30);
    --state-positive-lighter: var(--ref-color-green-95);
    --state-positive-light: var(--ref-color-green-90);
    --state-positive-standard: var(--ref-color-green-50);
    --state-positive-dark: var(--ref-color-green-30);
    --state-positive-darker: var(--ref-color-green-20);
    --state-caution-lighter: var(--ref-color-orange-90);
    --state-caution-light: var(--ref-color-orange-85);
    --state-caution-standard: var(--ref-color-orange-50);
    --state-caution-dark: var(--ref-color-orange-40);
    --state-caution-darker: var(--ref-color-orange-20);
    --state-negative-lighter: var(--ref-color-red-95);
    --state-negative-light: var(--ref-color-red-90);
    --state-negative-standard: var(--ref-color-red-60);
    --state-negative-dark: var(--ref-color-red-40);
    --state-negative-darker: var(--ref-color-red-20);
    --content-accent-standard: var(--ref-color-purple-95);
    --content-information-lighter: var(--ref-color-blue-95);
    --content-information-light: var(--ref-color-blue-90);
    --content-information-standard: var(--ref-color-blue-50);
    --content-information-dark: var(--ref-color-blue-40);
    --content-information-darker: var(--ref-color-blue-20);
    --content-accent-lighter: var(--ref-color-purple-90);
    --content-accent-light: var(--ref-color-purple-60);
    --content-accent-dark: var(--ref-color-purple-40);
    --content-accent-darker: var(--ref-color-purple-20);

    /* layout */
    --container-padding: var(--ref-spacing-200);
    --container-side: var(--ref-spacing-200);
    --spacing-horizontal-md: var(--ref-spacing-150);
    --spacing-vertical-md: var(--ref-spacing-150);
    --spacing-horizontal-lg: var(--ref-spacing-200);
    --spacing-vertical-xl: var(--ref-spacing-300);
    --header-height: var(--ref-sizing-700);
    --navigation-height: var(--ref-sizing-800);
    --content-review-standard: var(--ref-color-yellow-50);
    --content-review-standard: var(--ref-color-yellow-50);
    --spacing-vertical-sm: var(--ref-spacing-100);
    --spacing-horizontal-sm: var(--ref-spacing-100);
    --spacing-vertical-lg: var(--ref-spacing-200);
    --border-divider: var(--ref-color-grey-98);
    --border-divider: var(--ref-color-grey-90);
    --content-mileage-standard: var(--ref-color-yellow-50);
    --content-mileage-standard: var(--ref-color-yellow-50);
    --content-discount-standard: var(--ref-color-red-60);
    --content-discount-standard: var(--ref-color-red-60);
}