@charset "utf-8";

/* Pretendard */
@font-face {
	font-family: 'Pretendard-Black';
	font-weight: normal;
	font-display: swap;
	src: local('Pretendard Black'), url(../../fonts/Pretendard-Black.woff2) format('woff2'), url(../../fonts/Pretendard-Black.woff) format('woff');
}
@font-face {
	font-family: 'Pretendard-Bold';
	font-weight: normal;
	font-display: swap;
	src: local('Pretendard Bold'), url(../../fonts/Pretendard-Bold.woff2) format('woff2'), url(../../fonts/Pretendard-Bold.woff) format('woff');
}
@font-face {
	font-family: 'Pretendard-SemiBold';
	font-weight: normal;
	font-display: swap;
	src: local('Pretendard SemiBold'), url(../../fonts/Pretendard-SemiBold.woff2) format('woff2'), url(../../fonts/Pretendard-SemiBold.woff) format('woff');
}
@font-face {
	font-family: 'Pretendard-Medium';
	font-weight: normal;
	font-display: swap;
	src: local('Pretendard Medium'), url(../../fonts/Pretendard-Medium.woff2) format('woff2'), url(../../fonts/Pretendard-Medium.woff) format('woff');
}
@font-face {
	font-family: 'Pretendard-Regular';
	font-weight: normal;
	font-display: swap;
	src: local('Pretendard Regular'), url(../../fonts/Pretendard-Regular.woff2) format('woff2'), url(../../fonts/Pretendard-Regular.woff) format('woff');
}
@font-face {
	font-family: 'Pretendard-Light';
	font-weight: normal;
	font-display: swap;
	src: local('Pretendard Light'), url(../../fonts/Pretendard-Light.woff2) format('woff2'), url(../../fonts/Pretendard-Light.woff) format('woff');
}
@font-face {
	font-family: 'Pretendard-ExtraLight';
	font-weight: normal;
	font-display: swap;
	src: local('Pretendard ExtraLight'), url(../../fonts/Pretendard-ExtraLight.woff2) format('woff2'), url(../../fonts/Pretendard-ExtraLight.woff) format('woff');
}
@font-face {
	font-family: 'Pretendard-Thin';
	font-weight: normal;
	font-display: swap;
	src: local('Pretendard Thin'), url(../../fonts/Pretendard-Thin.woff2) format('woff2'), url(../../fonts/Pretendard-Thin.woff) format('woff');
}

:root {
    /* font weight */
    --font-regular: 'Pretendard-Regular';
    --font-light: 'Pretendard-ExtraLight';
    --font-bold: 'Pretendard-SemiBold';
    --font-heavy: 'Pretendard-Bold';
    /* font size */
    --font-2xs: 11px;
    --font-xs: 12px;
    --font-s: 14px;
    --font-m: 16px;
    --font-l: 18px;
    --font-xl: 20px;
    --font-2xl: 24px;
    --font-3xl: 26px;
    /* line height */
    --line-2xs: 17px;
    --line-xs: 18px;
    --line-s: 21px;
    --line-m: 23px;
    --line-l: 26px;
    --line-xl: 28px;
    --line-2xl: 32px;
    --line-3xl: 35px;
    /* spacing */
    --space-4xs: 2px;
    --space-3xs: 4px;
    --space-2xs: 6px;
    --space-xs: 10px;
    --space-s: 14px;
    --space-m: 16px;
    --space-l: 20px;
    --space-xl: 24px;
    --space-2xl: 30px;
    --space-3xl: 40px;
    --space-4xl: 60px;
    --space-5xl: 100px;
    /* size */
    --size-2xs: 12px;
    --size-xs: 20px;
    --size-s: 32px;
    --size-m: 40px;
    --size-l: 50px;
    --size-xl: 60px;
    --size-2xl: 100px;
    --size-3xl: 120px;
    --size-4xl: 140px;
    --size-5xl: 200px;
    --center-s: 460px;
    --center-m: 700px;
    --center-l: 1120px;
    /* radius */
    --radius-s: 4px;
    --radius-m: 6px;
    --radius-l: 10px;
    /* border width */
    --border-m: 1px;
    --border-l: 2px;
    /* z index */
    --zindex-modal: 100;
    --zindex-loading: 200;
    /* color */
    --point-default: #2356F7;
    --white-default: #FFFFFF;
    --white-dark: rgba(255, 255, 255, 0.8);
    --black-default: #000000;
    --black-dark: rgba(0, 0, 0, 0.8);
    --gray-default: #CECECE;
    --gray-light: #DEDEDE;
    --gray-xlight: #E9E9E9;
    --gray-2xlight: #F9F9F9;
    --gray-dark: #999999;
    --gray-xdark: #666666;
    --blue-default: #2356F7;
    --blue-default-light: rgba(35, 86, 247, 0.15);
    --red-default: #E82127;
    --red-default-light: rgba(232, 33, 39, 0.15);
    --green-default: #1F9E49;
    --green-default-light: rgba(31, 158, 73, 0.15);
    --yellow-default: #F2C73D;
    --yellow-default-light: rgba(242, 199, 61, 0.15);
    --orange-default: #FF7F00;
    --red-graph: #FF6B6B;
    --red-graph-light: rgba(255, 107, 107, 0.2);
    --yellow-graph: #FFC300;
    --yellow-graph-light: rgba(255, 195, 0, 0.2);
    --green-graph: #6BCB77;
    --green-graph-light: rgba(107, 203, 119, 0.2);
    --blue-graph: #4D96FF;
    --blue-graph-light: rgba(77, 150, 255, 0.2);
    --purple-graph: #A66DD4;
    --purple-graph-light: rgba(166, 109, 212, 0.2);
}

/* common */
html,
body {
    height: 100%;
}
body,
table,
input,
textarea,
select,
button {
    font-family: var(--font-regular);
    font-size: var(--font-m);
    line-height: 1em;
    color: var(--black-default);
}
input::placeholder,
textarea::placeholder{
    color: var(--gray-dark);
}
strong {
    font-family: var(--font-heavy) !important;
}