@charset "utf-8";
/* ------------------------------------------------ */
/* - 스크롤바 */
/* ------------------------------------------------ */
.thin-scrollbar {
	--thin-scrollbar-width: 8px;
	--thin-scrollbar-radius: 5px;
	--thin-scrollbar-track: transparent;
	--thin-scrollbar-thumb: rgb(45, 104, 172);
	--thin-scrollbar-thumb-hover: rgb(71,140,217);
}
.thin-scrollbar.gray {
	--thin-scrollbar-width: 8px;
	--thin-scrollbar-radius: 5px;
	--thin-scrollbar-track: transparent;
	--thin-scrollbar-thumb: rgb(207, 207, 207);
	--thin-scrollbar-thumb-hover: rgb(168, 168, 168);
}
@supports not selector(::-webkit-scrollbar) {
	.thin-scrollbar {
		scrollbar-width: thin;
		scrollbar-color: var(--thin-scrollbar-thumb) var(--thin-scrollbar-track);
	}
}
.thin-scrollbar::-webkit-scrollbar {
	width: var(--thin-scrollbar-width);
	height: var(--thin-scrollbar-width);
}
.thin-scrollbar::-webkit-scrollbar-track {
	border-radius: var(--thin-scrollbar-radius);
	background-color: var(--thin-scrollbar-track);
}
.thin-scrollbar::-webkit-scrollbar-track:hover {
	background-color: var(--thin-scrollbar-track);
}
.thin-scrollbar::-webkit-scrollbar-track:active {
	background-color: var(--thin-scrollbar-track);
}
.thin-scrollbar::-webkit-scrollbar-thumb {
	border-radius: var(--thin-scrollbar-radius);
	background-color: var(--thin-scrollbar-thumb);
}
.thin-scrollbar::-webkit-scrollbar-thumb:hover {
	background-color: var(--thin-scrollbar-thumb-hover);
}
.thin-scrollbar::-webkit-scrollbar-thumb:active {
	background-color: var(--thin-scrollbar-thumb-hover);
}
/* ------------------------------------------------ */
/* - 모달 */
/* ------------------------------------------------ */
.modal {
	visibility: hidden;
	opacity: 0;
	z-index: -1;

	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.4);
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-5);
	box-sizing: border-box;
	transition2: opacity 0.6s cubic-bezier(.87,-0.07,.79,.43),
		transform 0.3s ease-in-out,
		visibility 1s;
	transition: opacity 0.6s cubic-bezier(1,-0.01,.74,-0.1),
		transform 0.3s ease-in-out,
		visibility 1s;
}
.modal.open {
	visibility: visible;
	opacity: 1;
	z-index: 1000;
	transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out,
		visibility 0.6s;
}
.modal.open .dialog {
	transform: scale(1) translateY(0);
}
.modal .dialog {
	width: auto;
	min-width: 392px;
	max-width: 100%;
	height: fit-content;
	background-color: #ffffff;
	border-radius: var(--border-radius-lg);
	padding: var(--spacing-6);
	box-sizing: border-box;
	font-family: PretendardGOV, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	position: relative;
	transform: scale(0.9) translateY(var(--spacing-5));
	transition: transform 0.3s ease-in-out;
}
.modal .dialog > header {
	display: flex;
	justify-content: space-between;
	padding: 10px 15px 10px;
	border-bottom: 1px solid rgb(238, 238, 238);
}
/* .piip-style */
.modal .dialog > header {
	display: flex;
	flex-direction: column-reverse;
	padding: 0 16px;
	border-bottom: 0px;
}
.modal .dialog > header > [m-title] {
	height: 36px;
	font-size: var(--font-size-24);
	font-weight: var(--font-weight-bold);
	color: var(--navy-900);
	margin: 0;
	line-height: 1.5;
	display: flex;
	align-items: center;
}
/* .piip-style */
.modal .dialog .close {
	align-self: flex-end;
}
.modal .dialog .close {
	padding: 0 16px;
	width: var(--spacing-6);
	height: var(--spacing-6);
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M18.6309 4.23438C18.9433 3.92216 19.4494 3.92204 19.7617 4.23438C20.0741 4.54673 20.0739 5.0528 19.7617 5.36523L13.1289 11.998L19.7656 18.6348C20.078 18.9472 20.0781 19.4542 19.7656 19.7666C19.4533 20.0789 18.9472 20.0787 18.6348 19.7666L11.998 13.1289L5.36133 19.7666C5.04891 20.0787 4.54281 20.0789 4.23047 19.7666C3.91804 19.4542 3.91806 18.9472 4.23047 18.6348L10.8662 11.998L4.23438 5.36523C3.92215 5.0528 3.92202 4.54673 4.23438 4.23438C4.54673 3.92204 5.05281 3.92216 5.36523 4.23438L11.998 10.8672L18.6309 4.23438Z' fill='%23475569'/%3e%3c/svg%3e");
}
.modal .dialog .close:hover {
	background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M18.6309 4.23438C18.9433 3.92216 19.4494 3.92204 19.7617 4.23438C20.0741 4.54673 20.0739 5.0528 19.7617 5.36523L13.1289 11.998L19.7656 18.6348C20.078 18.9472 20.0781 19.4542 19.7656 19.7666C19.4533 20.0789 18.9472 20.0787 18.6348 19.7666L11.998 13.1289L5.36133 19.7666C5.04891 20.0787 4.54281 20.0789 4.23047 19.7666C3.91804 19.4542 3.91806 18.9472 4.23047 18.6348L10.8662 11.998L4.23438 5.36523C3.92215 5.0528 3.92202 4.54673 4.23438 4.23438C4.54673 3.92204 5.05281 3.92216 5.36523 4.23438L11.998 10.8672L18.6309 4.23438Z' fill='rgba(0,0,0,0.4)'/%3e%3c/svg%3e");
}
.modal .dialog .close:focus {
	outline: 2px solid var(--navy-900);
	outline-offset: 2px;
	border-radius: 2px;
}
.modal .dialog .close:focus:not(:focus-visible) {
	outline: none;
}
/* .piip-style */
.modal .dialog .close-svg {
	align-self: flex-end;
}
.modal .dialog .close-svg {
	cursor: pointer;
	width: 24px;
	height: 24px;
}
.modal .dialog .close-svg svg {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal .dialog .close-svg:hover svg {
	fill: rgb(10,90,158);
}
.modal .dialog > article {
	margin-top: var(--spacing-6);
	padding: 0 16px;

	font-size: var(--font-size-15);
	font-weight: var(--font-weight-regular);
	color: var(--cool-gray-700);
	line-height: 1.6;
}
.modal .dialog > footer {
	display: flex;
	gap: var(--spacing-2);
	justify-content: flex-end;
	margin-top: var(--spacing-8);
}
.modal .dialog > footer button {
	color: var(--white);
	border: none;

	height: 48px;
	padding: 0 var(--spacing-4);
	font-size: var(--font-size-17);
	font-weight: var(--font-weight-bold);
	border-radius: var(--border-radius-sm);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	text-decoration: none;
	cursor: pointer;
	transition: var(--transition-base);
	user-select: none;
	white-space: nowrap;
	font-family: "PretendardGOV", sans-serif;
	box-sizing: border-box;
}
.modal .dialog > footer button {
	background-color: rgb(73,153,221);
}
.modal .dialog > footer button:hover {
	background-color: rgb(10,90,158);
}
/* .primary */
.modal .dialog > footer button {
	background-color: var(--primary-500);
}
/* .primary */
.modal .dialog > footer button:hover:not(:disabled) {
	 background-color: var(--primary-600);
}
/* ------------------------------------------------ */
.modal .dialog button[m-cancel] {
	background-color: var(--cool-gray-100) !important;
	color: var(--cool-gray-700) !important;
}
.modal .dialog button[m-cancel]:hover {
	background-color: var(--cool-gray-200) !important;
}
/* ------------------------------------------------ */
.modal .dialog.success > header > [m-title] { color: var(--primary-500); }
/* ------------------------------------------------ */
.modal .dialog.warn > header > [m-title] { color2: rgb(186,154,36); }
.modal .dialog.warn > [m-content] { color2: rgb(143,111,33); }
.modal .dialog.warn > footer button { background-color: var(--danger-50); border-color: var(--danger-50); color: var(--accent-red); }
.modal .dialog.warn > footer button:hover { background-color: #ffebeb; }
.modal .dialog.warn .close-svg svg { fill2: rgb(186,154,36); }
.modal .dialog.warn .close-svg:hover svg { fill2: rgb(143,111,33); }
/* ------------------------------------------------ */
.modal .dialog.error > header > [m-title] { color: var(--accent-red); }
.modal .dialog.error > [m-content] { color2: var(--accent-red); }
.modal .dialog.error > footer button { background-color: var(--danger-50); border-color: var(--danger-50); color: var(--accent-red); }
.modal .dialog.error > footer button:hover { background-color: #ffebeb; }
.modal .dialog.error .close-svg svg { fill2: rgb(229,0,0); }
.modal .dialog.error .close-svg:hover svg { fill2: rgb(163,0,0); }
/* ------------------------------------------------ */
.modal .dialog > footer [m-ok] { order: 2 }
.modal .dialog > footer [m-cancel] { order: 1 }
/* ------------------------------------------------ */
/*
.modal .dialog.info2 [m-content]::before {
	content: '';
	display: inline-block;
	width: 32px;
	height: 32px;
	margin: 4px 8px 4px 4px;
	vertical-align: middle;
	background-image2: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgb(0,112,234)'%3e%3cpath d='M11 15h2v2h-2v-2zm0-8h2v6h-2V7zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3e%3c/svg%3e");
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cg transform='translate(0 -1028.4)'%3e%3cpath d='m22 12a10 10 0 1 1 -20 0 10 10 0 1 1 20 0z' fill='%232980b9' transform='translate(0 1029.4)'/%3e%3cpath d='m22 12a10 10 0 1 1 -20 0 10 10 0 1 1 20 0z' fill='%233498db' transform='translate(0 1028.4)'/%3e%3cpath d='m11 1035.4v2h2v-2h-2zm-1 4-1 1h2v6h-2v1h1 4 1v-1h-2v-7h-3z' fill='%232980b9'/%3e%3cpath d='m11 6v2h2v-2h-2zm-1 4l-1 1h2v6h-2v1h1 4 1v-1h-2v-7h-3z' fill='%23ecf0f1' transform='translate(0 1028.4)'/%3e%3c/g%3e%3c/svg%3e");
}
.modal .dialog.warn2 [m-content]::before {
	content: '';
	display: inline-block;
	width: 32px;
	height: 32px;
	margin: 4px 8px 4px 4px;
	vertical-align: middle;
	background-image2: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgb(235,203,0)'%3e%3cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3e%3c/svg%3e");
	background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3e%3cdefs%3e%3cstyle%3e.cls-1{fill:%23efcc00;}.cls-2{fill:%23353535;}%3c/style%3e%3c/defs%3e%3ctitle/%3e%3cpath class='cls-1' d='M30.16,11.51,6.84,51.9a2.13,2.13,0,0,0,1.84,3.19H55.32a2.13,2.13,0,0,0,1.84-3.19L33.84,11.51A2.13,2.13,0,0,0,30.16,11.51Z'/%3e%3cpath class='cls-2' d='M29,46a3,3,0,1,1,3,3A2.88,2.88,0,0,1,29,46Zm1.09-4.66-.76-15h5.26l-.73,15Z'/%3e%3c/svg%3e");
}
.modal .dialog.error2 [m-content]::before {
	content: '';
	display: inline-block;
	width: 32px;
	height: 32px;
	margin: 4px 8px 4px 4px;
	vertical-align: middle;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cg transform='translate(0 -1028.4)'%3e%3cpath d='m22 12c0 5.523-4.477 10-10 10-5.5228 0-10-4.477-10-10 0-5.5228 4.4772-10 10-10 5.523 0 10 4.4772 10 10z' fill='%23c0392b' transform='translate(0 1029.4)'/%3e%3cpath d='m22 12c0 5.523-4.477 10-10 10-5.5228 0-10-4.477-10-10 0-5.5228 4.4772-10 10-10 5.523 0 10 4.4772 10 10z' fill='%23e74c3c' transform='translate(0 1028.4)'/%3e%3cpath d='m7.0503 1037.8 3.5357 3.6-3.5357 3.5 1.4142 1.4 3.5355-3.5 3.536 3.5 1.414-1.4-3.536-3.5 3.536-3.6-1.414-1.4-3.536 3.5-3.5355-3.5-1.4142 1.4z' fill='%23c0392b'/%3e%3cpath d='m7.0503 1036.8 3.5357 3.6-3.5357 3.5 1.4142 1.4 3.5355-3.5 3.536 3.5 1.414-1.4-3.536-3.5 3.536-3.6-1.414-1.4-3.536 3.5-3.5355-3.5-1.4142 1.4z' fill='%23ecf0f1'/%3e%3c/g%3e%3c/svg%3e");
}
.modal .dialog.confirm2 [m-content]::before {
	content: '';
	display: inline-block;
	width: 32px;
	height: 32px;
	margin: 4px 8px 4px 4px;
	vertical-align: middle;
	background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg'%3e%3cdefs%3e%3cstyle%3e.cls-1{fill:rgb(138,188,253);}.cls-2{fill:rgb(48,80,167);}%3c/style%3e%3c/defs%3e%3ctitle/%3e%3ccircle class='cls-1' cx='64' cy='64' r='60'/%3e%3cpath class='cls-2' d='M59.11,76.19Q59,75.51,59,74.88c0-.42,0-.86,0-1.32a16,16,0,0,1,1.19-6.46,17,17,0,0,1,3-4.72,24,24,0,0,1,4-3.48q2.12-1.49,4-3a18,18,0,0,0,3-3.06,6.08,6.08,0,0,0,1.19-3.78,5.59,5.59,0,0,0-2.46-4.76q-2.47-1.78-7.65-1.78a14.72,14.72,0,0,0-4.84.76,24.34,24.34,0,0,0-4.08,1.83,25.88,25.88,0,0,0-3.31,2.21q-1.45,1.15-2.55,1.91L45,42.12a24.75,24.75,0,0,1,4.63-3.91,28.61,28.61,0,0,1,5.48-2.8,33.24,33.24,0,0,1,5.95-1.66,34,34,0,0,1,6-.55q9.26,0,14.4,3.87a12.36,12.36,0,0,1,5.14,10.41,17.12,17.12,0,0,1-1.32,7.18A16.23,16.23,0,0,1,82,59.5,28.73,28.73,0,0,1,77.59,63a39.35,39.35,0,0,0-4.33,3.27,16.41,16.41,0,0,0-3.36,4,11.36,11.36,0,0,0-1.36,5.86Zm-1.7,12.07a6.13,6.13,0,0,1,1.87-4.72,6.94,6.94,0,0,1,4.93-1.74,7.19,7.19,0,0,1,5.1,1.74,6.14,6.14,0,0,1,1.87,4.72A6.27,6.27,0,0,1,69.31,93a7.08,7.08,0,0,1-5.1,1.78A6.84,6.84,0,0,1,59.28,93,6.27,6.27,0,0,1,57.42,88.26Z'/%3e%3c/svg%3e");
}
*/
/* ------------------------------------------------ */
/* - 메뉴 */
/* ------------------------------------------------ */
.menu {
	position: absolute;
	color: rgba(0, 0, 0, 0.87);
	box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;
	background-color: rgb(255, 255, 255);
	border-radius: 6px;
	margin: 0;
	padding: 12px 0;
	box-sizing: border-box;
	transform: scale(0, 0);
	transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1),
		transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
		z-index 0.15s cubic-bezier(0.4, 0, 0.2, 1);
	transform-origin: 0px 0px;
	visibility: hidden;
	opacity: 0;
	z-index: -1;
}
.menu.open {
	visibility: visible;
	opacity: 1;
	z-index: 100;
	transform: scale(1, 1);
}
.menu li {
	list-style: none;
	padding: 0;
	margin: 0;
	position: relative;
}
.menu li > a {
	cursor: pointer;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0.5em 1.25em;
	color: rgba(0, 0, 0, 0.87);
	text-decoration: none;
}
.menu li > a:hover {
	background-color: rgb(241, 241, 241);
}
.menu * { box-sizing: border-box; }
/* ------------------------------------------------ */
/* - 로더 */
/* ------------------------------------------------ */
.global-loader {
	z-index: 10000;
	transform: translate3d(0, 0, 0);
	position: fixed; left:0; top: 0; right: 0; bottom: 0;
	display: flex; align-items: center; justify-content: center;
	background-color: rgba(255, 255, 255, 0.25);
}
.global-loader.hide { visibility: hidden; z-index: -1; }
.global-loader > .loader-ring { display: inline-block; position: relative; width: 128px; height: 128px; }
.global-loader > .loader-ring div { border-width: 18px; border-top-color: #3982c7; border-top-color2: #525252; }
/* ------------------------------------------------ */
.loader-ring.d128 { width: 128px; height: 128px; }
.loader-ring.d64 { width: 64px; height: 64px; }
.loader-ring.d48 { width: 48px; height: 48px; }
.loader-ring.d40 { width: 40px; height: 40px; }
.loader-ring.d32 { width: 32px; height: 32px; }
.loader-ring.d24 { width: 24px; height: 24px; }
.loader-ring.d32 { width: 16px; height: 16px; }
/* ------------------------------------------------ */
.loader-ring.b64 div { border-width: 64px; }
.loader-ring.b32 div { border-width: 32px; }
.loader-ring.b24 div { border-width: 24px; }
.loader-ring.b12 div { border-width: 12px; }
.loader-ring.b8 div { border-width: 8px; }
.loader-ring.b6 div { border-width: 6px; }
.loader-ring.b4 div { border-width: 4px; }
.loader-ring.b3 div { border-width: 3px; }
.loader-ring.b2 div { border-width: 2px; }
.loader-ring.b1 div { border-width: 1px; }
/* ------------------------------------------------ */
.loader-ring.blue div { border-top-color: #5aa3e7; }
.loader-ring.darkblue div { border-top-color: #3982c7; }
.loader-ring.gray div { border-top-color: #b1b1b1; }
.loader-ring.darkgray div { border-top-color: #525252; }
/* ------------------------------------------------ */
.loader-ring div {
	width: 100%; height: 100%;
	box-sizing: border-box; display: block; position: absolute;
	border-right-color: transparent; border-bottom-color: transparent;
	border-left-color: transparent; border-top-color: inherit;
	border-style: solid; border-width: 3px;
	border-radius: 50%;
	animation: animation-loader-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.loader-ring div:nth-child(1) { animation-delay: -0.45s; }
.loader-ring div:nth-child(2) { animation-delay: -0.3s; }
.loader-ring div:nth-child(3) { animation-delay: -0.15s; }
@keyframes animation-loader-ring {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
/* ------------------------------------------------ */
/* - 토스트 */
/* ------------------------------------------------ */
.toast {
	display: flex;
	position: fixed;
	left: 50%;
	bottom: 1em;

	visibility: hidden;
	opacity: 0;

	padding: 1em;

	color: white;
	border-radius: 6px;
	background-color: #0d6efd;

	transform: translateX(-50%);

	transition: opacity 0.6s, visibility 0.6s;
}
.toast.show {
	visibility: visible;
	opacity: 1;
}
.toast [t-close] {
	margin-left: 1em;
	cursor: pointer;
	width: 24px;
	height: 24px;
}
.toast [t-close] svg {
	fill: rgba(255, 255, 255, 0.55);
}
/* ------------------------------------------------ */
.toast.info {
	color: white;
	background-color: #0d6efd;
}
.toast.success {
	color: white;
	background-color: var(--primary-500);
}
.toast.warn {
	color: var(--text-primary);
	background-color: var(--danger-50);
}
.toast.warn [t-close] svg {
	fill: var(--danger-400);
}
.toast.error {
	color: var(--accent-red);
	background-color: var(--danger-50);
}
.toast.error [t-close] svg {
	fill: var(--danger-400);
}
/* ------------------------------------------------ */
/* ------------------------------------------------ */
/* ------------------------------------------------ */