/*변수 지정*/
:root {
    /* Used Theme Color */
    --brand-primary           : #FFB149;
    --brand-primary-opacity   : #FFEBD2;

    --basic-black             : #000;
    --basic-gray-dark         : #838380;
    --basic-gray-medium       : #959595;
    --basic-gray-light        : #E6E6E6;
    --basic-gray-high-light   : #F3F3F3;
    --basic-gray-white        : #FAFAFA;
    --basic-white             : #FFF;

    /* UnUsed Theme Color */
    --brand-secondary         : #5F36A9;
    --brand-secondary-opacity : #B893FF;
    --impact-primary          : #EC291A;
    --impact-secondary        : #F5DF73;

    --basic-black-medium      : #4D4D4D;
    --basic-gray-medium-light : #F3F3F3;

    /* 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-lg               : 0 24px 24px 0 rgba(0, 0, 0, 0.25);
    --shadow-md               : 0 16px 16px 0 rgba(0, 0, 0, 0.25);
    --shadow-sm               : 0 0 5px 1px rgba(0, 0, 0, 0.1);

    /* 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 */
    --radius-4                : 4px;
    --radius-8                : 8px;
    --radius-12               : 12px;
    --radius-16               : 16px;
    --radius-20               : 20px;
    --radius-24               : 24px;

    /* Sample Font Variables */
    --font-96                 : 96px;
    --font-88                 : 88px;
    --font-84                 : 84px;
    --font-76                 : 76px;
    --font-72                 : 72px;
    --font-65                 : 65px;
    --font-60                 : 60px;
    --font-56                 : 56px;
    --font-52                 : 52px;
    --font-50                 : 50px;
    --font-48                 : 48px;
    --font-44                 : 44px;
    --font-42                 : 42px;
    --font-40                 : 40px;
    --font-37                 : 37px;
    --font-36                 : 36px;
    --font-34                 : 34px;
    --font-32                 : 32px;
    --font-29                 : 29px;
    --font-28                 : 28px;
    --font-26                 : 26px;
    --font-25                 : 25px;
    --font-24                 : 24px;
    --font-23                 : 23px;
    --font-22                 : 22px;
    --font-21                 : 21px;
    --font-20                 : 20px;
    --font-19                 : 19px;
    --font-18                 : 18px;
    --font-16                 : 16px;
    --font-14                 : 14px;
    --font-12                 : 12px;
    --font-10                 : 10px;

    /* Sample Font Line Height Variables */
    --line-120                : 120px;
    --line-110                : 110px;
    --line-100                : 100px;
    --line-92                 : 92px;
    --line-86                 : 86px;
    --line-78                 : 78px;
    --line-72                 : 72px;
    --line-68                 : 68px;
    --line-62                 : 62px;
    --line-60                 : 60px;
    --line-58                 : 58px;
    --line-54                 : 54px;
    --line-50                 : 50px;
    --line-48                 : 48px;
    --line-46                 : 46px;
    --line-44                 : 44px;
    --line-40                 : 40px;
    --line-38                 : 38px;
    --line-35                 : 35px;
    --line-34                 : 34px;
    --line-32                 : 32px;
    --line-30                 : 30px;
    --line-28                 : 28px;
    --line-26                 : 26px;
    --line-24                 : 24px;
    --line-23                 : 23px;
    --line-22                 : 22px;
    --line-20                 : 20px;
    --line-16                 : 16px;
    --line-14                 : 14px;
    --line-12                 : 12px;
    --line-1_2                : 1.2;
    --line-1_4                : 1.4;
    --line-1_5                : 1.5;
    --line-1_6                : 1.6;
    --line-1_8                : 1.8;
    --line-2_0                : 2.0;
    /* Sample Font Weight */
    --weight-300              : 300;
    --weight-400              : 400;
    --weight-500              : 500;
    --weight-600              : 600;
    --weight-700              : 700;
    --weight-800              : 800;
    --weight-900              : 900;
}

/* 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;
}