@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&family=Science+Gothic:wght@100..900&display=swap');
@import url('./fonts/pretendard.css');
@import url('./fonts/pretendard-subset.css');

html, body, h1, h2, h3, h4, h5, h6, p, blockquote, code, img, dl, dt, dd, ol, ul, li, fieldset, legend, caption {margin: 0; padding: 0; border: 0;}
div, span, article, section, header, footer, p, ul, li, fieldset, legend, label, a, nav {box-sizing: border-box;}
html {height: 100%;}
body {min-height: 100%; color: var(--dark-gray-color); font-family: 'Pretendard', sans-serif; line-height: 1.3;}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0; padding: 0; border: 0;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display: block;}
ol, ul {list-style: none;}
table {border-collapse: collapse; border-spacing: 0; width: 100%;}
caption {display: none;}
button {outline: 0; border: 0; color: inherit; cursor: pointer;}
label {cursor: pointer;}
a {text-decoration: none; color: inherit;}
img {display: block;}
.blind {position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%);}
button:disabled {background-color: var(--line-gray-color);}
::placeholder {color: var(--placeholder-color);}

:root {
	--primary-color: #3B82F6;
	--primary-button-color: #17469E;
	--secondary-color: #062437;
	--dark-background-color: #000503;
	--header-font-color: #e3f1fb;
	--muted-foreground: #65859b;
	--point-border-color: #133144;
	--accent-foreground: #d1f4ff;
	--primary-trans-color: rgba(59,130,246,0.1);
	--primary-trans-hover-color: rgba(59,130,246,0.2);
	--visual-button-color: rgba(1,13,22,0.6);

	--table-header-color: #F0F3F5;
	--table-border-color: #CED1D3;
	--pagi-border-color: #B5BEC3;
	--pagi-font-color: #83929B;

	--white-color: #FFFFFF;
	--black-font-color: #000600;
	--bg-gray-color: #F7F7F7;
	--dark-gray-color: #333333;
	--text-gray-color: #626262;
	--line-gray-color: #767676;
	--light-gray-color: #989898;
	--dark-border-color: #AAAAAA;
	--line-color: #DDDDDD;
	--input-line-color: #CCCCCC;
	--box-line-color: #EEEEEE;
	--placeholder-color: rgba(152,152,152,0.5);

	--list-hover-color: #EDF0F8;
	--list-select-color: #DCE4F9;
	--red-color: #CF0505;
	--dimmed-bg-color: rgba(0,0,0,0.8);

	--border-radius: 4px;
	--input-border-radius: 2px;
	--big-border-radius: 8px;
	--bg-shadow: 0 0 8px rgba(0,0,0,0.1);

	--science-gothic: 'Science Gothic SemiCondensed', sans-serif;
	--font-64: 64px;
	--font-40: 40px;
	--font-36: 36px;
	--font-32: 32px;
	--font-28: 28px;
	--font-24: 24px;
	--font-20: 20px;
	--font-18: 18px;
	--font-17: 17px;
	--font-16: 16px;
	--font-15: 15px;
	--font-14: 14px;
	--font-13: 13px;
	--font-12: 12px;
}

.text-red {color: var(--red-color);}
.text-gray {color: var(--light-gray-color);}
.text-blue {color: var(--primary-button-color);}

.text-left {text-align: left;}
.text-center {text-align: center;}
.text-right {text-align: right;}

.text-bold {font-weight: 600;}

.cut-line1 {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; text-overflow: ellipsis; overflow: hidden;}
.cut-line2 {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden;}
.cut-line5 {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; text-overflow: ellipsis; overflow: hidden;}

.no-scroll {--scrollWidth: 0; height: 100vh; overflow-y: hidden; padding-right: var(--scrollWidth);}
.popup-dimmed {display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; background-color: var(--dimmed-bg-color); overflow: hidden; z-index: 99;}
.popup-dimmed#loading {z-index: 200;}
.popup-dimmed#alertPopup, .popup-dimmed#confirmPopup {z-index: 190;}
.loader-wrap {display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}
.loader {width: 80px; height: 80px; border-radius: 50%; animation: rotate 1s linear infinite;}
.loader::before {content: ""; box-sizing: border-box; position: absolute; inset: 0px; border-radius: 50%; border: 5px solid var(--white-color); animation: prixClipFix 2s linear infinite;}

.small-loader {display: block; width: 24px; height: 24px; margin: 0 auto; border-radius: 50%; animation: rotate 1s linear infinite;}
.small-loader::before {content: ""; box-sizing: border-box; position: absolute; inset: 0px; border-radius: 50%; border: 4px solid #898989; animation: prixClipFix 2s linear alternate infinite;}

@keyframes rotate {
	100% {transform: rotate(360deg)}
}

@keyframes prixClipFix {
	0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
	25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
	50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
	75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
	100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
}

/* error */
.error-wrap {display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100vw; height: 100vh; background-color: var(--bg-gray-color);}
.error-box {}
.error-img {width: 100px; margin: 0 auto 8px; aspect-ratio: 1 / 1;}
.error-img > img {display: block; width: 100%; object-fit: contain;}
.error-title {font-size: var(--font-64); color: var(--dark-gray-color); text-align: center;}
.error-text {margin-top: 16px; font-size: var(--font-16); color: var(--text-gray-color); text-align: center; word-break: keep-all;}
.error-btn-wrap {width: min(320px, 100%); margin: 40px auto 0; text-align: center;}
.error-dark-btn {display: block; width: 100%; padding: 14px 16px; background-color: var(--dark-gray-color); border-radius: var(--border-radius); color: var(--white-color); font-size: var(--font-14); font-weight: bold; text-align: center;}

/*pagination*/
.paging-wrap {display: flex; justify-content: center; gap: 10px; margin-top: 32px; text-align: center;}
.paging-prev, .paging-next {position: relative; display: inline-block; width: 32px; height: 32px; background-color: var(--white-color); border: 1px solid var(--line-color); border-radius: var(--input-border-radius); font-size: 0; vertical-align: middle;}
.paging-prev::after, .paging-next::after {content: ''; position: absolute; top: 10px; left: 12px; width: 8px; height: 8px; border-left: 2px solid var(--pagi-font-color); border-bottom: 2px solid var(--pagi-font-color); transform: rotate(45deg);}
.paging-next::after {left: 7px; transform: rotate(-135deg);}
.paging-number-list {display: inline-flex; justify-content: center; align-items: center; gap: 6px; vertical-align: middle;}
.paging-number-list a {display: block; width: 32px; height: 32px; line-height: 30px; background-color: var(--white-color); border: 1px solid var(--pagi-border-color); border-radius: var(--input-border-radius); font-size: var(--font-14); color: var(--pagi-font-color); text-align: center;}
.paging-number-list li.active a {background-color: var(--secondary-color); border-color: var(--secondary-color); color: var(--white-color);}

/*popup*/
.popup-wrap {display: none; position: fixed; top: 50%; left: 50%; max-width: 100vw; padding: 24px 40px 40px; background-color: var(--white-color); transform: translate(-50%,-50%); box-sizing: border-box; z-index: 100;}
#popupGraph {
	width: 1000px;
	max-width: 90vw;
}
.graph-wrap {
	width: 100%;
	height: 520px;
}

/* alert, confirm popup */
.alert-popup-wrap {position: absolute; top: 45%; left: 50%; width: 380px; padding: 32px 20px 16px; background-color: var(--white-color); border-radius: var(--border-radius); box-shadow: var(--bg-shadow); transform: translate(-50%,-50%); z-index: 110;}
.alert-popup-content {display: flex; justify-content: center; align-items: center; width: 100%; min-height: 98px;}
.alert-popup-wrap .popup-btn-wrap {gap: 8px; margin-top: 20px;}
.alert-gray-btn, .alert-dark-btn {flex-grow: 1; display: block; height: 46px; line-height: 46px; border-radius: var(--border-radius); font-size: var(--font-14); font-weight: 500; color: var(--white-color);}
.alert-gray-btn {background-color: var(--light-gray-color);}
.alert-dark-btn {background-color: var(--dark-gray-color);}

@media screen and (max-width: 768px) {
	/* error */
	.error-img {width: max(20%, 80px);}
	.error-title {font-size: var(--font-40);}
	.error-text {font-size: var(--font-14);}

	/*pagination*/
	.paging-wrap {flex-wrap: wrap;}
	.paging-number-list {flex-basis: 100%; flex-wrap: wrap;}
	.paging-prev, .paging-next {order: 2;}
}