:root {
    /* color - blue */
    --color-primary: #0921A4;
    --color-blue-100: #e7f0f7;
    --color-blue-200: #C0D6F8;
    --color-blue-300: #98B6F1;
    --color-blue-400: #7096E9;
    --color-blue-500: #3C69CE;
    --color-blue-600: #305BBA;
    --color-blue-700: #254EA7;
    --color-blue-800: #194093;
    --color-blue-900: #0D337F;
    --color-link: #990099;

    --color-gray-100: #ECEFF1;
    --color-gray-200: #D6D9DB;
    --color-gray-300: #C0C3C5;
    --color-gray-400: #AAADB0;
    --color-gray-500: #94979A;
    --color-gray-600: #72889A;
    --color-gray-700: #696A6E;
    --color-gray-800: #535459;
    --color-gray-900: #3D3E43;
    --color-black: #27282D;

    /* font */
    --font-family-base: 'Pretendard', sans-serif;
    --font-size-base: 1.6rem;
    --font-size-title-lv1: 4rem;
    --font-size-title-lv2: 3.2rem;
    --font-size-title-lv3: 2.4rem;
    --font-size-title-lv4: 1.7rem;
    --font-size-body-sm: 1.6rem;
    --font-size-body-xs: 1.4rem;
    --font-size-body-2xs: 1.2rem;

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

    /* transition */
    --transition-base: 0.4s ease-in-out;
}

/* color - blue */
.color-primary {
    color: var(--color-primary)
}

.color-blue-100 {
    color: var(--color-blue-100);
}

.color-blue-200 {
    color: var(--color-blue-200);
}

.color-blue-300 {
    color: var(--color-blue-300);
}

.color-blue-400 {
    color: var(--color-blue-400);
}

.color-blue-500 {
    color: var(--color-blue-500);
}

.color-blue-600 {
    color: var(--color-blue-600);
}

.color-blue-700 {
    color: var(--color-blue-700);
}

.color-blue-800 {
    color: var(--color-blue-800);
}

.color-blue-900 {
    color: var(--color-blue-900);
}


/* color - gray */
.color-gray-100 {
    color: var(--color-gray-100);
}

.color-gray-200 {
    color: var(--color-gray-200);
}

.color-gray-300 {
    color: var(--color-gray-300);
}

.color-gray-400 {
    color: var(--color-gray-400);
}

.color-gray-500 {
    color: var(--color-gray-500);
}

.color-gray-600 {
    color: var(--color-gray-600);
}

.color-gray-700 {
    color: var(--color-gray-700);
}

.color-gray-800 {
    color: var(--color-gray-800);
}

.color-gray-900 {
    color: var(--color-gray-900);
}

.color-black {
    color: var(--color-black)
}


/* margin */
.mt-0 {
    margin-top: 0
}

.ml-0 {
    margin-left: 0
}

.mr-0 {
    margin-right: 0
}

.mb-0 {
    margin-bottom: 0
}

/* margin - xs*/
.mt-xs {
    margin-top: 1.6rem;
}

.ml-xs {
    margin-left: 1.6rem;
}

.mr-xs {
    margin-right: 1.6rem;
}

.mb-xs {
    margin-bottom: 1.6rem;
}

/* margin - sm*/
.mt-sm {
    margin-top: 2.4rem;
}

.ml-sm {
    margin-left: 2.4rem;
}

.mr-sm {
    margin-right: 2.4rem;
}

.mb-sm {
    margin-bottom: 2.4rem;
}

/* margin - md*/
.mt-md {
    margin-top: 4rem;
}

.ml-md {
    margin-left: 4rem;
}

.mr-md {
    margin-right: 4rem;
}

.mb-md {
    margin-bottom: 4rem;
}

/* margin - lg*/
.mt-lg {
    margin-top: 8rem;
}

.ml-lg {
    margin-left: 8rem;
}

.mr-lg {
    margin-right: 8rem;
}

.mb-lg {
    margin-bottom: 8rem;
}

/* margin - lg*/
.mt-xl {
    margin-top: 12rem;
}

.ml-xl {
    margin-left: 12rem;
}

.mr-xl {
    margin-right: 12rem;
}

.mb-xl {
    margin-bottom: 12rem;
}


/* font-size */
.title-lv1 {
    font-size: var(--font-size-title-lv1);
    font-weight: var(--font-weight-bold);
}

.title-lv2 {
    font-size: var(--font-size-title-lv2);
    font-weight: var(--font-weight-bold);
}

.title-lv3 {
    font-size: var(--font-size-title-lv3);
    font-weight: var(--font-weight-bold);
}

.title-lv4 {
    font-size: var(--font-size-title-lv4);
    font-weight: var(--font-weight-bold);
    margin-left: 1.6rem;
}

.title-lv5 {
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-regular);
    margin-left: 1.6rem;
}

.title-lv4 + p{
    margin-left: 1.6rem;
}

.body-sm {
    font-size: var(--font-size-body-sm);
}

.body-xs {
    font-size: var(--font-size-body-xs);
}

.body-2xs {
    font-size: var(--font-size-body-2xs);
}

.font-weight-rg {
    font-weight: var(--font-weight-regular);
}

.font-weight-md {
    font-weight: var(--font-weight-regular);
}

.font-weight-sb {
    font-weight: var(--font-weight-semibold);
}

.font-weight-bd {
    font-weight: var(--font-weight-bold);
}