/*변수 지정*/
:root {
    /* Used Theme Color */
    --brand-primary: #1890FF;
    --brand-primary-opacity: #E5ECFF;

    --basic-black: #222222;
    --basic-gray-1: #ECECEC;
    --basic-gray-2: #D4D4D4;
    --basic-gray-3: #BDBDBD;
    --basic-gray-4: #A5A5A5;
    --basic-gray-5: #7C7C7C;
    --basic-gray-6: #363636;
    --basic-gray-7: #2A2A2A;
    --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;
}