@charset "UTF-8";

/* ***************************************************** *
 * 버튼 스타일
 * ***************************************************** */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: 'Pretendard', sans-serif !important;
	gap: 12px;
	cursor: pointer;
}

.button.button__default, .button.button__default--outline, .button.button__primary, .button.button__secondary, .button.button__tertiary, .button.button__gray, .button.button__outline {
	width: 100%;
	height: 48px;
	padding: 0 20px;
	font-size: 16px;
	font-weight: 600;
	border: 1px solid transparent;
	border-radius: 8px;
	transition: transform 0.2s;
}

.button.button__default:active, .button.button__default--outline:active, .button.button__primary:active, .button.button__secondary:active, .button.button__tertiary:active, .button.button__gray:active, .button.button__outline:active {
	transform: scale(1.02);
}

.button.button__default {
	font-weight: normal;
	color: #666;
	background-color: #EBEBF2;
}

.button.button__default:active {
	background-color: #D6D6E5;
}

.button.button__default--outline {
	font-weight: normal;
	color: #666;
	border-color: #D6D6D6;
	background-color: #EBEBF2;
}

.button.button__default--outline:active {
	background-color: #D6D6E5;
}

.button.button__primary {
	color: #fff;
	background-color: #4F75FF;
}

.button.button__primary:active {
	background-color: #3D63F2;
}

.button.button__secondary {
	color: #fff;
	background-color: #7C94FF;
}

.button.button__secondary:active {
	background-color: #687FF2;
}

.button.button__tertiary {
	color: #fff;
	/*background-color: #A7AECC;*/
	background-image: linear-gradient(-78deg, #8297FF, #9CA9FF);
}

.button.button__gray {
	color: #666;
	background-color: #F2F4F5;
}

.button.button__gray:active {
	background-color: #E1E4E6;
}

.button.button__outline {
	color: #4F75FF;
	border-color: #4F75FF;
	background-color: #fff;
}

.button.button__outline:active {
	background-color: #f8f9fa;
}

.button.button__glass, .button.button__glass--white {
	font-family: 'NanumSquareRoundEB', 'Pretendard', sans-serif;
	font-size: 15px;
	white-space: nowrap;
	width: 100%;
	height: 49px;
	padding: 0 28px;
	border-radius: 50px;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(4px);
	transition: transform 0.2s;
}

.button.button__glass {
	color: #fff;
	border: 2px solid transparent;
	background: linear-gradient(180deg, #9CA9FF, #8297FF);
	border: 1px solid transparent;
	background-clip: padding-box, border-box;
	background-origin: padding-box, border-box;
	background-image: 
		 linear-gradient(180deg, #9CA9FF, #8297FF),
		 linear-gradient(180deg, #FFFFFF, #8791FF);
}

.button.button__glass:active {
	background-image: 
		 linear-gradient(180deg, #8297FF, #9CA9FF),
		 linear-gradient(180deg, #FFFFFF, #8791FF);
}

.button.button__glass--white {
	color: #6284FF;
	background-color: #fff;
}

.button.button__glass--white:active {
	background-color: #e9e9e9;
}

.button.button__app--download {
	width: 100%;
	height: 49px;
	border-radius: 50px;
	background-color: #EDF1F5;
}

.button.button__app--download:active {
	background-color: #dce2e8;
}

.button__tooltip {
	width: 16px;
	height: 16px;
	border: none;
	background-image: url("data:image/svg+xml,%3Csvg width='18' height='17' viewBox='0 0 18 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.95866 13.4993C9.25032 13.4993 9.49685 13.3987 9.69824 13.1973C9.89963 12.9959 10.0003 12.7493 10.0003 12.4577C10.0003 12.166 9.89963 11.9195 9.69824 11.7181C9.49685 11.5167 9.25032 11.416 8.95866 11.416C8.66699 11.416 8.42046 11.5167 8.21907 11.7181C8.01769 11.9195 7.91699 12.166 7.91699 12.4577C7.91699 12.7493 8.01769 12.9959 8.21907 13.1973C8.42046 13.3987 8.66699 13.4993 8.95866 13.4993ZM9.00032 16.8327C7.84755 16.8327 6.76421 16.6139 5.75032 16.1764C4.73644 15.7389 3.85449 15.1452 3.10449 14.3952C2.35449 13.6452 1.76074 12.7632 1.32324 11.7493C0.885742 10.7355 0.666992 9.65213 0.666992 8.49935C0.666992 7.34657 0.885742 6.26324 1.32324 5.24935C1.76074 4.23546 2.35449 3.35352 3.10449 2.60352C3.85449 1.85352 4.73644 1.25977 5.75032 0.822266C6.76421 0.384766 7.84755 0.166016 9.00032 0.166016C10.1531 0.166016 11.2364 0.384766 12.2503 0.822266C13.2642 1.25977 14.1462 1.85352 14.8962 2.60352C15.6462 3.35352 16.2399 4.23546 16.6774 5.24935C17.1149 6.26324 17.3337 7.34657 17.3337 8.49935C17.3337 9.65213 17.1149 10.7355 16.6774 11.7493C16.2399 12.7632 15.6462 13.6452 14.8962 14.3952C14.1462 15.1452 13.2642 15.7389 12.2503 16.1764C11.2364 16.6139 10.1531 16.8327 9.00032 16.8327ZM9.08366 4.91602C9.43088 4.91602 9.73296 5.02713 9.98991 5.24935C10.2469 5.47157 10.3753 5.74935 10.3753 6.08268C10.3753 6.38824 10.2816 6.65907 10.0941 6.89518C9.90657 7.13129 9.69477 7.35351 9.45866 7.56185C9.13921 7.83963 8.85796 8.14518 8.61491 8.47851C8.37185 8.81185 8.25032 9.18685 8.25032 9.60351C8.25032 9.79796 8.32324 9.96115 8.46907 10.0931C8.61491 10.225 8.78505 10.291 8.97949 10.291C9.18782 10.291 9.36491 10.2216 9.51074 10.0827C9.65657 9.94379 9.75032 9.77018 9.79199 9.56185C9.84755 9.27018 9.97255 9.00976 10.167 8.7806C10.3614 8.55143 10.5698 8.33268 10.792 8.12435C11.1114 7.81879 11.3857 7.48546 11.6149 7.12435C11.8441 6.76324 11.9587 6.36046 11.9587 5.91601C11.9587 5.20768 11.6705 4.62782 11.0941 4.17643C10.5177 3.72504 9.84755 3.49935 9.08366 3.49935C8.55588 3.49935 8.05241 3.61046 7.57324 3.83268C7.09407 4.0549 6.72949 4.39518 6.47949 4.85351C6.38227 5.02018 6.35102 5.19727 6.38574 5.38477C6.42046 5.57227 6.51421 5.71463 6.66699 5.81185C6.86144 5.92296 7.06282 5.95768 7.27116 5.91601C7.47949 5.87435 7.6531 5.75629 7.79199 5.56185C7.94477 5.35351 8.13574 5.19379 8.36491 5.08268C8.59407 4.97157 8.83366 4.91602 9.08366 4.91602Z' fill='%234F75FF'/%3E%3C/svg%3E%0A");
	background-color: transparent;
	background-size: 100% auto;
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
	outline: none;
}

.button.button__rounded {
	font-family: 'NanumSquareRoundB', 'Pretendard', sans-serif;
	font-size: 16px;
	width: 100%;
	height: 40px;
	border: 1px solid transparent;
	border-radius: 8px;
	transition: transform 0.2s;
}

.button.button__rounded.button__rounded--default {
	color: #999;
	border-color: #D9D9D9;
	background-color: #fff;
}

.button.button__rounded.button__rounded--default:active, .button.button__rounded.button__rounded--primary:active {
	transform: scale(1.02);
}

.button.button__rounded.button__rounded--default:active {
	background-color: #EBEBF2;
}

.button.button__rounded.button__rounded--primary {
	color: #fff;
	background-image: linear-gradient(-78deg, #8297FF, #9CA9FF);
}

.button.button__rounded.button__rounded--primary:active {
	background-image: linear-gradient(-78deg, #9CA9FF, #8297FF);
}


/* ***************************************************** *
 * 폼 스타일
 * ***************************************************** */
.form__white {
	display: block;
	width: 100%;
	height: 49px !important;
	font-family: 'NanumSquareRoundEB', 'Pretendard', sans-serif;
	font-size: 15px;
	color: #6284FF;
	text-align: center;
	line-height: 1.4 !important;
	border: none;
	border-radius: 50px !important;
	background-color: #fff;
	box-shadow: 0 4px 4px rgba(0,0,0,0.1);
	outline: none;
}

.form__white::placeholder {
	color: #6284FF;
	text-align: center;
}

.custom__checkbox {
	display: flex;
	align-items: center;
	gap: 6px;
}

.custom__checkbox input[type="checkbox"] {
	position: relative;
	width: 20px;
	height: 20px;
	border-radius: 3px;
	background-color: #F2F4F5;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.custom__checkbox input[type="checkbox"]::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 8px;
	background-image: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.33333 7.72917L0 4.39583L1.0625 3.33333L3.33333 5.60417L8.9375 0L10 1.0625L3.33333 7.72917Z' fill='%23999999'/%3E%3C/svg%3E%0A");
	background-size: 10px auto;
	background-position: center;
	background-repeat: no-repeat;
	transform: translate(-50%, -50%);
}

.custom__checkbox input[type="checkbox"]:checked {
	background-color: #4F75FF;
}

.custom__checkbox input[type="checkbox"]:checked::after {
	background-image: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.33333 7.72917L0 4.39583L1.0625 3.33333L3.33333 5.60417L8.9375 0L10 1.0625L3.33333 7.72917Z' fill='white'/%3E%3C/svg%3E%0A");
}

.custom__checkbox label {
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

/* ***************************************************** *
 * 폼 필드
 * ***************************************************** */
.form__label {
	position: relative;
	display: block;
	width: 100%;
	font-family: 'NanumSquareRoundB', 'Pretendard', sans-serif;
	font-size: 14px;
	color: #222;
	line-height: 1.5;
	margin-bottom: 8px;
}

.form__label.required::after {
	content: '*필수';
	display: inline-block;
	font-size: 10px;
	color: #7C94FF;
	margin-left: 4px;
	vertical-align: super;'
}

.form__control {
	display: block !important;
	width: 100% !important;
	height: 48px !important;
	font-family: 'NanumSquareRoundB', 'Pretendard', sans-serif !important;
	font-size: 16px !important;
	color: #222 !important;
	padding: 0 16px !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 8px !important;
	background-color: #fff !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02), 0 4px 8px rgba(0, 0, 0, 0.01);
}

.form__control::placeholder {
	color: #999;
}

.form__control:focus {
	border-color: #4F75FF !important;
	box-shadow: 0 4px 12px rgba(124, 148, 255, 0.08), 0 8px 24px rgba(124, 148, 255, 0.06), 0 0 0 3px rgba(124, 148, 255, 0.1);
	transform: translateY(-1px);
}

/* ***************************************************** *
 * 모달 스타일
 * ***************************************************** */
.modal__backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background-color: rgba(0,0,0,0.5);
	backdrop-filter: blur(4px);
	z-index: 1100;
}

.modal {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	max-width: 400px;
	border-radius: 10px;
	background-color: #fff;
	overflow: hidden;
	z-index: 1110;
	transform: translate(-50%, -50%);
}

.modal__dialog {
	/*padding: 30px 20px 20px;*/
	overflow: hidden;
}

.modal__header {
	position: relative;
	padding: 20px;
	background-color: #4F75FF;
}

.modal__header .button__close {
	position: absolute;
	top: 20px;
	right: 12px;
	width: 24px;
	height: 24px;
	background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.4 14L0 12.6L5.6 7L0 1.4L1.4 0L7 5.6L12.6 0L14 1.4L8.4 7L14 12.6L12.6 14L7 8.4L1.4 14Z' fill='%23FFF'/%3E%3C/svg%3E%0A");
	background-size: 14px auto !important;
	background-repeat: no-repeat;
	background-size: cover;
	cursor: pointer;
	z-index: 10;
}

.modal__header h5 {
	font-family: 'NanumSquareRoundB', 'Pretendard', sans-serif !important;
	font-size: 20px;
	color: #fff;
	text-align: center;
}

.modal__body {
	font-family: 'NanumSquareRound', 'Pretendard', sans-serif !important;
	text-align: center !important;
	padding: 20px 20px 0;
}

.modal__body .text__container {
	/* padding: 20px 16px; */
	max-height: 400px;
	font-size: 16px;
	color: #222;
	line-height: 1.75;
/* 	border-radius: 6px;
	background-color: #F2F4F5; */
	overflow-y: auto;
}

.modal__body .text__container::-webkit-scrollbar {
	width: 3px;
	height: 3px;
}

.modal__body .text__container::-webkit-scrollbar-thumb {
	border-radius: 6px;
	background-color: #d9d9d9;
}

.modal__footer {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 20px;
}

.modal__footer .button {
	flex: 1 0 0%;
	flex-grow: 1;
}

.backBlack {
	background-color: rgba(0,0,0,0.5) !important;
	backdrop-filter: blur(4px);
}

.pop_info {
	width: 400px;
	margin-left: -200px;
	padding: 0;
	font-family: 'NanumSquareRound', 'Pretendard', sans-serif;
	border-radius: 10px;
	box-shadow: none;
	overflow: hidden;
}

.pop_info strong {
	font-family: 'NanumSquareRoundEB', 'Pretendard', sans-serif;
}

.pop_info_top {
	display: flex;
	padding: 20px;
	justify-content: center;
	background-color: #4F75FF;
}

.pop_info_top span {
	font-family: 'NanumSquareRoundEB', 'Pretendard', sans-serif;
	font-size: 20px;
	color: #fff;
	line-height: 1.5;
	min-height: auto;
}

.info_cont {
	margin-top: 0;
	padding: 20px;
	font-size: 16px !important;
}

.pop_info textarea {
	display: block;
	width: 100% !important;
	font-family: 'NanumSquareRoundB', 'Pretendard', sans-serif;
	font-size: 14px;
	color: #666;
	padding: 16px;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
}

.pop_info input[type="text"] {
	display: block;
	width: 100% !important;
	font-family: 'NanumSquareRoundB', 'Pretendard', sans-serif;
	font-size: 14px;
	color: #666;
	text-align: center;
	padding: 0 16px;
	height: 40px;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
}

.pop_info .account__warning {
	display: block;
	font-size: 16px;
	color: #4F75FF;
	text-align: center;
	margin-bottom: 10px;
	padding: 6px;
	line-height: 1.5;
	border: 1px solid #4F75FF;
	border-radius: 24px;
	background-color: #dbeafe;
}

.pop_info .notify__list {
	counter-reset: numbering;
	padding: 12px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
}

.pop_info .notify__list li {
	position: relative;
	font-size: 12px;
	color: #666;
	text-align: left;
	line-height: 1.75;
	padding-left: 16px;
}

.pop_info .notify__list li::before {
	counter-increment: numbering;
	content: counter(numbering) ".";
	position: absolute;
	top: 0;
	left: 0;
}

.pop_info .notify__list li.accent {
	font-family: 'NanumSquareRoundB', 'Pretendard', sans-serif;
	color: #4F75FF;
}

.info_close {
	top: 50%;
	right: 12px;
	width: 24px;
	height: 24px;
	background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.4 14L0 12.6L5.6 7L0 1.4L1.4 0L7 5.6L12.6 0L14 1.4L8.4 7L14 12.6L12.6 14L7 8.4L1.4 14Z' fill='%23FFF'/%3E%3C/svg%3E%0A");
	background-size: 14px auto !important;
	background-repeat: no-repeat;
	background-size: cover;
	transform: translateY(-50%);
}

.info_cont {
	font-family: 'NanumSquareRound', 'Pretendard', sans-serif;
	font-size: 12px;
	color: #666;
	line-height: 2;
	max-height: 500px;
}

.pop_info .bottom__button {
	padding: 0 20px 20px;
}

/* ***************************************************** *
 * 스크롤 스타일
 * ***************************************************** */
.custom__scrollbar {
	overflow-y: auto;
}

.custom__scrollbar::-webkit-scrollbar {
	width: 2px;
	height: 2px;
}

.custom__scrollbar::-webkit-scrollbar-thumb {
	border-radius: 6px;
	background-color: #d9d9d9;
}

/* ***************************************************** *
 * 텍스트 스타일
 * ***************************************************** */
.text-primary {
	color: #4F75FF !important;
}

.text-danger {
	color: #ef4444 !important;
}

@media (max-width: 650px) {
	.pop_info {
		width: 320px;
		left: 50%;
		margin-left: -160px;
	}
	
	.modal {
		width: calc(100% - 40px);
	}
}


.loading__spinner {
	display: flex;
	width: 100%;
	height: 100px;
	align-items: center;
	justify-content: center;
}

.loading__spinner .spinner {
	 position: relative;
	 display: inline-block;
	 width: 48px;
	 height: 48px;
	 border: 8px solid #f1f3f5;
	 border-radius: 50%;
	 transform: rotate(45deg);
}

.loading__spinner .spinner::before {
	content: '';
	position: absolute;
	inset: -8px;
	border: 8px solid #FF6B6B;
	border-radius: 50%;
	animation: prixClipFix 1s infinite linear;
}

@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)}
}

.loading__spinner.spinner--cancel .spinner::before {
	border-color: #FF6B6B;
}

.loading__spinner.spinner--accept .spinner::before {
	border-color: #4F75FF;
}