/*변수 지정*/
:root {
    /* Sample Theme Color */
    --basic-white             : #FFF;
    --basic-black             : #13130A;
    --basic-black-medium      : #4D4D4D;
    --basic-gray-dark         : #737373;
    --basic-gray-medium       : #B6B6B6;
    --basic-gray-medium-light : #F3F3F3;
    --basic-gray-light        : #EEE;
    --basic-gray-high-light   : #FAFAFC;
    --brand-primary           : #334D42;
    --brand-primary-opacity   : #F2FFF3;
    --brand-secondary         : #5F36A9;
    --impact-primary          : #FF0000;
    --impact-secondary        : #FF7E7E;

    /* Sample Z Index*/
    --zindex-dropdown         : 1000 !important;
    --zindex-sticky           : 1020 !important;
    --zindex-fixed            : 1030 !important;
    --zindex-modal-backdrop   : 1040 !important;
    --zindex-modal            : 1050 !important;
    --zindex-popover          : 1060 !important;
    --zindex-tooltip          : 1070 !important;

    /* Sample Shadow */
    --shadow-primary          : 10px 5px 5px var(--brand-primary);
    --shadow-impact           : 10px 5px 5px var(--impact-primary);
    --shadow-black            : 10px 5px 5px rgba(0, 0, 0, 0.5);
    --shadow-white            : 10px 5px 5px rgba(255, 255, 255, 0.5);

    /* Sample Transform */
    --translate-center        : translate(-50%, -50%);
    --translate-tb-center     : translate(0, -50%);
    --translate-lr-center     : translate(-50%, 0);

    /* Sample Border */
    --border-1px              : 1px solid;
    --border-2px              : 2px solid;
    --border-3px              : 3px solid;
    --border-4px              : 4px solid;

    /* Sample Radius */
    --input-radius            : 5px;
    --button-radius           : 5px;
    --textarea-radius         : 5px;
    --layout-radius           : 5px;
    --card-radius             : 5px;
    --modal-radius            : 5px;
    --thumbnail-radius        : 5px;

    /* Sample Font Variables */
    --font-8                  : 8px;
    --font-10                 : 10px;
    --font-12                 : 12px;
    --font-14                 : 14px;
    --font-16                 : 16px;
    --font-18                 : 18px;
    --font-20                 : 20px;
    --font-22                 : 22px;
    --font-24                 : 24px;
    --font-26                 : 26px;
    --font-28                 : 28px;
    --font-30                 : 30px;
    --font-32                 : 32px;
    --font-34                 : 34px;
    --font-36                 : 36px;
    --font-38                 : 38px;
    --font-40                 : 40px;
    --font-42                 : 42px;
    --font-44                 : 44px;
    --font-46                 : 46px;
    --font-48                 : 48px;
    --font-50                 : 50px;
    --font-56                 : 56px;
    --font-64                 : 64px;

    /* Sample Font Line Height Variables */
    --line-12                 : 12px;
    --line-14                 : 14px;
    --line-16                 : 16px;
    --line-18                 : 18px;
    --line-20                 : 20px;
    --line-22                 : 22px;
    --line-24                 : 24px;
    --line-26                 : 26px;
    --line-28                 : 28px;
    --line-30                 : 30px;
    --line-32                 : 32px;
    --line-34                 : 34px;
    --line-36                 : 36px;
    --line-38                 : 38px;
    --line-40                 : 40px;
    --line-42                 : 42px;
    --line-44                 : 44px;
    --line-46                 : 46px;
    --line-48                 : 48px;
    --line-50                 : 50px;
    --line-52                 : 52px;
    --line-54                 : 54px;
    --line-56                 : 56px;
    --line-58                 : 58px;
    --line-60                 : 60px;
    --line-72                 : 72px;
    --line-78                 : 78px;
    --line-1x                 : 1;
    --line-1_5x               : 1.5;
    --line-2x                 : 2;
}

/* Import Font (Font Face Type, Google Fonts) */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/* Font Face Type */
@font-face {
    font-family : 'Spoqa Han Sans Neo';
    font-weight : 700;
    src         : local('Spoqa Han Sans Neo Bold'),
    url('https://cdn.jsdelivr.net/gh/spoqa/spoqa-han-sans@latest/Subset/SpoqaHanSansNeo/SpoqaHanSansNeo-Bold.woff2') format('woff2'),
    url('https://cdn.jsdelivr.net/gh/spoqa/spoqa-han-sans@latest/Subset/SpoqaHanSansNeo/SpoqaHanSansNeo-Bold.woff') format('woff'),
    url('https://cdn.jsdelivr.net/gh/spoqa/spoqa-han-sans@latest/Subset/SpoqaHanSansNeo/SpoqaHanSansNeo-Bold.ttf') format('truetype');
}

@font-face {
    font-family : 'Spoqa Han Sans Neo';
    font-weight : 600;
    src         : local('Spoqa Han Sans Neo Bold'),
    url('https://cdn.jsdelivr.net/gh/spoqa/spoqa-han-sans@latest/Subset/SpoqaHanSansNeo/SpoqaHanSansNeo-Bold.woff2') format('woff2'),
    url('https://cdn.jsdelivr.net/gh/spoqa/spoqa-han-sans@latest/Subset/SpoqaHanSansNeo/SpoqaHanSansNeo-Bold.woff') format('woff'),
    url('https://cdn.jsdelivr.net/gh/spoqa/spoqa-han-sans@latest/Subset/SpoqaHanSansNeo/SpoqaHanSansNeo-Bold.ttf') format('truetype');
}

@font-face {
    font-family : 'Spoqa Han Sans Neo';
    font-weight : 500;
    src         : local('Spoqa Han Sans Neo Medium'),
    url('https://cdn.jsdelivr.net/gh/spoqa/spoqa-han-sans@latest/Subset/SpoqaHanSansNeo/SpoqaHanSansNeo-Medium.woff2') format('woff2'),
    url('https://cdn.jsdelivr.net/gh/spoqa/spoqa-han-sans@latest/Subset/SpoqaHanSansNeo/SpoqaHanSansNeo-Medium.woff') format('woff'),
    url('https://cdn.jsdelivr.net/gh/spoqa/spoqa-han-sans@latest/Subset/SpoqaHanSansNeo/SpoqaHanSansNeo-Medium.ttf') format('truetype');
}

@font-face {
    font-family : 'Spoqa Han Sans Neo';
    font-weight : 400;
    src         : local('Spoqa Han Sans Neo Regular'),
    url('https://cdn.jsdelivr.net/gh/spoqa/spoqa-han-sans@latest/Subset/SpoqaHanSansNeo/SpoqaHanSansNeo-Regular.woff2') format('woff2'),
    url('https://cdn.jsdelivr.net/gh/spoqa/spoqa-han-sans@latest/Subset/SpoqaHanSansNeo/SpoqaHanSansNeo-Regular.woff') format('woff'),
    url('https://cdn.jsdelivr.net/gh/spoqa/spoqa-han-sans@latest/Subset/SpoqaHanSansNeo/SpoqaHanSansNeo-Regular.ttf') format('truetype');
}

@font-face {
    font-family : 'Spoqa Han Sans Neo';
    font-weight : 300;
    src         : local('Spoqa Han Sans Neo Light'),
    url('https://cdn.jsdelivr.net/gh/spoqa/spoqa-han-sans@latest/Subset/SpoqaHanSansNeo/SpoqaHanSansNeo-Light.woff2') format('woff2'),
    url('https://cdn.jsdelivr.net/gh/spoqa/spoqa-han-sans@latest/Subset/SpoqaHanSansNeo/SpoqaHanSansNeo-Light.woff') format('woff'),
    url('https://cdn.jsdelivr.net/gh/spoqa/spoqa-han-sans@latest/Subset/SpoqaHanSansNeo/SpoqaHanSansNeo-Light.ttf') format('truetype');
}

@font-face {
    font-family : 'Spoqa Han Sans Neo';
    font-weight : 200;
    src         : local('Spoqa Han Sans Neo Thin'),
    url('https://cdn.jsdelivr.net/gh/spoqa/spoqa-han-sans@latest/Subset/SpoqaHanSansNeo/SpoqaHanSansNeo-Thin.woff2') format('woff2'),
    url('https://cdn.jsdelivr.net/gh/spoqa/spoqa-han-sans@latest/Subset/SpoqaHanSansNeo/SpoqaHanSansNeo-Thin.woff') format('woff'),
    url('https://cdn.jsdelivr.net/gh/spoqa/spoqa-han-sans@latest/Subset/SpoqaHanSansNeo/SpoqaHanSansNeo-Thin.ttf') format('truetype');
}

@font-face {
    font-family : 'Spoqa Han Sans Neo';
    font-weight : 100;
    src         : local('Spoqa Han Sans Neo Thin'),
    url('https://cdn.jsdelivr.net/gh/spoqa/spoqa-han-sans@latest/Subset/SpoqaHanSansNeo/SpoqaHanSansNeo-Thin.woff2') format('woff2'),
    url('https://cdn.jsdelivr.net/gh/spoqa/spoqa-han-sans@latest/Subset/SpoqaHanSansNeo/SpoqaHanSansNeo-Thin.woff') format('woff'),
    url('https://cdn.jsdelivr.net/gh/spoqa/spoqa-han-sans@latest/Subset/SpoqaHanSansNeo/SpoqaHanSansNeo-Thin.ttf') format('truetype');
}

/*Pretendard*/
@font-face {
    font-family : 'Pretendard';
    src         : url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Thin.woff') format('woff');
    font-weight : 100;
    font-style  : normal;
}

@font-face {
    font-family : 'Pretendard';
    src         : url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraLight.woff') format('woff');
    font-weight : 200;
    font-style  : normal;
}

@font-face {
    font-family : 'Pretendard';
    src         : url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff') format('woff');
    font-weight : 300;
    font-style  : normal;
}

@font-face {
    font-family : 'Pretendard';
    src         : url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight : 400;
    font-style  : normal;
}

@font-face {
    font-family : 'Pretendard';
    src         : url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff');
    font-weight : 500;
    font-style  : normal;
}

@font-face {
    font-family : 'Pretendard';
    src         : url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff');
    font-weight : 600;
    font-style  : normal;
}

@font-face {
    font-family : 'Pretendard';
    src         : url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
    font-weight : 700;
    font-style  : normal;
}

@font-face {
    font-family : 'Pretendard';
    src         : url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraBold.woff') format('woff');
    font-weight : 800;
    font-style  : normal;
}

@font-face {
    font-family : 'Pretendard';
    src         : url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Black.woff') format('woff');
    font-weight : 900;
    font-style  : normal;
}

/* Accept Font Family */
* {
    font-family : 'Pretendard', Spoqa Han Sans Neo, 'Spoqa Han Sans Neo', 'Noto Sans KR', 'Roboto', Roboto, 'sans-serif', sans-serif;
}

/* Accept Font Family in Text Writer */
/* 입력부분은 텍스트가 무조건 있어야하기 때문에 폰트 지원 안되는 글자는 따로 Font Family를 지정해준다. */
button, input, optgroup, select, textarea {
    font-family : 'Pretendard', Spoqa Han Sans Neo, 'Spoqa Han Sans Neo', 'Roboto', Roboto, 'sans-serif', sans-serif;
}

/* Common Tag And Class */

/* Font Set Class */
/* light Set */
.light-h1, .light-h2, .light-h3, .light-h4, .light-h5, .light-h6, .light-p1 {
    font-weight : 300;
}

.light-h1 {
    line-height : var(--line-40);
    font-size   : var(--font-32);
}

.light-h2 {
    line-height : var(--line-36);
    font-size   : var(--font-28);
}

.light-h3 {
    line-height : var(--line-32);
    font-size   : var(--font-24);
}

.light-h4 {
    line-height : var(--line-28);
    font-size   : var(--font-20);
}

.light-h5 {
    line-height : var(--line-24);
    font-size   : var(--font-16);
}

.light-h6 {
    line-height : var(--line-20);
    font-size   : var(--font-14);
}

.light-p1 {
    line-height : var(--line-16);
    font-size   : var(--font-12);
}

/* Regular Set */
.regular-h1, .regular-h2, .regular-h3, .regular-h4, .regular-h5, .regular-h6, .regular-p1 {
    font-weight : 400;
}

.regular-h1 {
    line-height : var(--line-40);
    font-size   : var(--font-32);
}

.regular-h2 {
    line-height : var(--line-36);
    font-size   : var(--font-28);
}

.regular-h3 {
    line-height : var(--line-32);
    font-size   : var(--font-24);
}

.regular-h4 {
    line-height : var(--line-28);
    font-size   : var(--font-20);
}

.regular-h5 {
    line-height : var(--line-24);
    font-size   : var(--font-16);
}

.regular-h6 {
    line-height : var(--line-20);
    font-size   : var(--font-14);
}

.regular-p1 {
    line-height : var(--line-16);
    font-size   : var(--font-12);
}

/* Medium Set */
.medium-h1, .medium-h2, .medium-h3, .medium-h4, .medium-h5, .medium-h6, .medium-p1 {
    font-weight : 500;
}

.medium-h1 {
    line-height : var(--line-40);
    font-size   : var(--font-32);
}

.medium-h2 {
    line-height : var(--line-36);
    font-size   : var(--font-28);
}

.medium-h3 {
    line-height : var(--line-32);
    font-size   : var(--font-24);
}

.medium-h4 {
    line-height : var(--line-28);
    font-size   : var(--font-20);
}

.medium-h5 {
    line-height : var(--line-24);
    font-size   : var(--font-16);
}

.medium-h6 {
    line-height : var(--line-20);
    font-size   : var(--font-14);
}

.medium-p1 {
    line-height : var(--line-16);
    font-size   : var(--font-12);
}

/* Bold Set */
.bold-h1, .bold-h2, .bold-h3, .bold-h4, .bold-h5, .bold-h6, .bold-p1 {
    font-weight : 700;
}

.bold-h1 {
    line-height : var(--line-40);
    font-size   : var(--font-32);
}

.bold-h2 {
    line-height : var(--line-36);
    font-size   : var(--font-28);
}

.bold-h3 {
    line-height : var(--line-32);
    font-size   : var(--font-24);
}

.bold-h4 {
    line-height : var(--line-28);
    font-size   : var(--font-20);
}

.bold-h5 {
    line-height : var(--line-24);
    font-size   : var(--font-16);
}

.bold-h6 {
    line-height : var(--line-20);
    font-size   : var(--font-14);
}

.bold-p1 {
    line-height : var(--line-16);
    font-size   : var(--font-12);
}

/* Color Class */
/* Suffix c- */
.c-brand-primary {
    color : var(--brand-primary);
}

.c-brand-primary-opacity {
    color : var(--brand-primary-opacity);
}

.c-brand-secondary {
    color : var(--brand-secondary);
}

.c-impact-primary {
    color : var(--impact-primary);
}

.c-impact-secondary {
    color : var(--impact-secondary);
}

.c-basic-black {
    color : var(--basic-black);
}

.basic-black-medium {
    color : var(--basic-black-medium);
}

.basic-gray-dark {
    color : var(--basic-gray-dark);
}

.basic-gray-medium {
    color : var(--basic-gray-medium);
}

.basic-gray-medium-light {
    color : var(--basic-gray-medium-light);
}

.basic-gray-light {
    color : var(--basic-gray-light);
}

/* Background Color Class */
/* Suffix bg- */
.bg-brand-primary {
    background-color : var(--brand-primary);
}

.bg-brand-primary-opacity {
    background-color : var(--brand-primary-opacity);
}

.bg-brand-secondary {
    background-color : var(--brand-secondary);
}

.bg-impact-primary {
    background-color : var(--impact-primary);
}

.bg-impact-secondary {
    background-color : var(--impact-secondary);
}

.bg-basic-black-medium {
    background-color : var(--basic-black-medium);
}

.bg-basic-gray-dark {
    background-color : var(--basic-gray-dark);
}

.bg-basic-gray-medium {
    background-color : var(--basic-gray-medium);
}

.bg-basic-gray-medium-light {
    background-color : var(--basic-gray-medium-light);
}

.bg-basic-gray-light {
    background-color : var(--basic-gray-light);
}

.bg-basic-gray-high-light {
    background-color : var(--basic-gray-high-light);
}