/**
 * Unified modal card layout
 * Login, Join, Find Password, Info Change - same structure and design
 */
.new-main .modal-card {
	position: relative;
	width: 514px;
	max-width: 100%;
	height: 100%;
	min-height: 0;
	margin: 0;
	padding: 50px 24px 40px;
	background: #262626;
	border-radius: 10px;
	border: 1px solid rgba(98.97, 98.97, 106.66, 0.50);
	font-family: Inter, sans-serif;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: hidden;
	box-sizing: border-box;
}

.new-main .modal-card-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	padding: 2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: transparent;
	border: none;
	cursor: pointer;
	text-decoration: none;
	z-index: 10;
	box-sizing: border-box;
}

.new-main .modal-card-close img {
	width: 12px;
	height: 12px;
	display: block;
	object-fit: contain;
	filter: brightness(0) invert(0.65);
}

.new-main .modal-card-close:hover img {
	filter: brightness(0) invert(1);
}

.new-main .modal-card-content {
	flex: 1;
	min-height: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	width: 100%;
	box-sizing: border-box;
}

.new-main .modal-card-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
	margin: 60px 0;
}

.new-main .modal-card-logo {
	width: 60px;
	height: 60px;
	display: block;
	object-fit: contain;
}

.new-main .modal-card-title {
	text-align: center;
	color: #999999;
	font-size: 20px;
	font-weight: 500;
	font-family: Inter, sans-serif;
	margin: 0;
	word-wrap: break-word;
}

.new-main .modal-card-body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	width: 360px;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	box-sizing: border-box;
}

.new-main .modal-card-btn-primary {
	width: 260px;
	max-width: 100%;
	height: 44px;
	background: #7648FF;
	border: none;
	outline: none;
	box-shadow: none;
	border-radius: 6px;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	font-family: Inter, sans-serif;
	cursor: pointer;
	box-sizing: border-box;
	flex-shrink: 0;
}

.new-main .modal-card-btn-primary:focus {
	outline: none;
	box-shadow: none;
}

.new-main .modal-card-btn-secondary:focus {
	outline: none;
	box-shadow: none;
}

.new-main .modal-card-btn-primary:hover {
	background: #8b5cff;
}

.new-main .modal-card-btn-primary:disabled,
.new-main .modal-card-btn-primary.is-loading,
.new-main .modal-card-btn-secondary.is-loading {
	cursor: not-allowed;
	opacity: 1;
	pointer-events: none;
}

.new-main .modal-card-btn-primary:disabled,
.new-main .modal-card-btn-primary.is-loading {
	background: #3a3a3c !important;
	color: #8e8e93 !important;
}

.new-main .modal-card-btn-primary:disabled:hover,
.new-main .modal-card-btn-primary.is-loading:hover {
	background: #3a3a3c !important;
}

.new-main .modal-card-btn-primary .btn-loading-spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 6px;
	vertical-align: middle;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: new-main-btn-spin 0.7s linear infinite;
}

.new-main .modal-card-btn-secondary .btn-loading-spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 6px;
	vertical-align: middle;
	border: 2px solid rgba(174, 174, 178, 0.35);
	border-top-color: #AEAEB2;
	border-radius: 50%;
	animation: new-main-btn-spin 0.7s linear infinite;
}

@keyframes new-main-btn-spin {
	to { transform: rotate(360deg); }
}

.new-main .modal-card-btn-secondary {
	width: auto;
	min-width: 100px;
	height: 44px;
	padding: 0 20px;
	background: transparent;
	border: 1px solid #6C6C70;
	outline: none;
	box-shadow: none;
	border-radius: 6px;
	color: #AEAEB2;
	font-size: 16px;
	font-weight: 600;
	font-family: Inter, sans-serif;
	cursor: pointer;
	box-sizing: border-box;
}

.new-main .modal-card-btn-secondary:hover {
	background: rgba(255,255,255,0.05);
}

.new-main .modal-card-actions {
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: 12px;
	width: 100%;
	margin-top: 60px;
}

.new-main .modal-card-actions .modal-card-btn-secondary,
.new-main .modal-card-actions .modal-card-btn-primary {
	flex: 1 1 0;
	min-width: 0;
	width: auto;
	max-width: none;
}

.new-main .findpwd-actions {
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: 12px;
	width: 100%;
	margin-top: 60px;
}

.new-main .findpwd-actions .modal-card-btn-secondary,
.new-main .findpwd-actions .modal-card-btn-primary {
	flex: 1 1 0;
	min-width: 0;
	width: auto;
	max-width: none;
}

@media (max-width: 600px) {
	.new-main .modal-card {
		padding: 44px 24px 32px;
	}
	.new-main .modal-card-content {
		overflow-y: auto;
		overflow-x: hidden;
	}
	.new-main .modal-card-header {
		top: 0;
		background: #262626;
		z-index: 1;
		margin: 20px 0 12px;
		padding-bottom: 4px;
	}
	.new-main .modal-card-body {
		overflow-y: visible;
		flex-shrink: 0;
		flex: 0 0 auto;
	}
}

/* 비밀번호 찾기: 로그인/가입과 동일한 카드 톤 */
.new-main .findpwd-card .modal-card-title,
.new-main .findpwd-card .join-title {
	color: #999999;
	font-size: 20px;
	font-weight: 500;
}

.new-main .findpwd-card .join-age-verify-msg {
	color: #AEAEB2;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	margin-bottom: 4px;
}

.new-main .findpwd-card .findpwd-actions .modal-card-btn-secondary {
	background: transparent;
	border: 1px solid #6C6C70;
	color: #AEAEB2;
}

.new-main .findpwd-card .findpwd-actions .modal-card-btn-secondary:hover {
	background: rgba(255,255,255,0.05);
}

/* 정보 변경 카드: 통일 카드와 동일한 레이아웃 (modalCard는 마지막 로드로 캐스케이드 적용) */
.new-main .join-card.info-change-card.modal-card {
	width: 560px;
	padding: 50px 28px 40px;
}

.new-main .join-card.info-change-card .join-close.modal-card-close {
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	padding: 2px;
}

.new-main .info-change-card .modal-card-logo {
	width: 60px;
	height: 60px;
}

.new-main .info-change-card .modal-card-title {
	color: #999999;
	font-size: 20px;
	font-weight: 500;
	margin: 0;
}

/* 정보변경만 내용 영역 확대 (공통 .modal-card-body 312px는 로그인·가입·비밀번호찾기에만 적용) */
.new-main .info-change-card .info-change-inner {
	max-width: 100%;
	min-width: 0;
}

.new-main .info-change-card .modal-card-body {
	width: 360px;
	max-width: 100%;
	align-items: center;
	text-align: center;
}

.new-main .info-change-card .modal-card-body > .info-change-body {
	width: 100%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.new-main .info-change-card .info-change-body .info-change-menu,
.new-main .info-change-card .info-change-body .info-change-pw-form,
.new-main .info-change-card .info-change-body .info-change-nickname-form,
.new-main .info-change-card .info-change-body .info-change-email-form,
.new-main .info-change-card .info-change-body .info-change-delete-step {
	width: 100%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* 정보변경: 라벨 및 필드 영역 왼쪽 정렬 */
.new-main .info-change-card .join-input-row label,
.new-main .info-change-card .info-change-form .join-input-row label,
.new-main .info-change-card .info-change-menu-fields .join-input-row label,
.new-main .info-change-card .info-change-delete-checkbox-label {
	text-align: left;
}

.new-main .info-change-card .info-change-menu-fields,
.new-main .info-change-card .info-change-form .join-fields,
.new-main .info-change-card .info-change-pw-fields {
	align-self: flex-start;
	width: 100%;
}

/* 삭제 확인(닉네임) 단계: 본문 중앙, 필드(라벨) 왼쪽 정렬. 버튼 영역은 공통 .info-change-form-actions / .modal-card-actions 유지 */
.new-main .info-change-card .info-change-delete-nickname-form .info-change-delete-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	width: 100%;
	margin-top: 12px;
}

.new-main .info-change-card .info-change-delete-nickname-form .info-change-delete-nickname-fields {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	width: 100%;
}

.new-main .info-change-card .info-change-delete-nickname-form .info-change-delete-nickname-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	gap: 8px;
	text-align: left;
	width: 100%;
}

/* 체크 전: 텍스트 어둡게, 체크 후: 흰색 */
.new-main .info-change-card .info-change-delete-checkbox-label,
.new-main .info-change-card .info-change-delete-nickname-display {
	color: #5c5c5e;
	transition: color 0.2s ease;
}

.new-main .info-change-card .info-change-delete-nickname-row:has(#infoDeleteConfirmCheckbox:checked) .info-change-delete-checkbox-label,
.new-main .info-change-card .info-change-delete-nickname-row:has(#infoDeleteConfirmCheckbox:checked) .info-change-delete-nickname-display,
.new-main .info-change-card .info-change-delete-nickname-row.is-checked .info-change-delete-checkbox-label,
.new-main .info-change-card .info-change-delete-nickname-row.is-checked .info-change-delete-nickname-display {
	color: #fff;
}

/* 폼이 컨테이너를 넘지 않도록 */
.new-main .info-change-card .info-change-form {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.new-main .info-change-card .info-change-form .join-fields {
	min-width: 0;
}

.new-main .info-change-card .info-change-form .join-input-row {
	min-width: 0;
	align-items: center;
}

.new-main .info-change-card .info-change-form .join-input-row label {
	min-width: 100px;
	max-width: 40%;
	line-height: 1.4;
	white-space: normal;
}

.new-main .info-change-card .join-input-row label {
	flex: 1 1 0;
	min-width: 130px;
	max-width: 55%;
	white-space: nowrap;
	word-break: keep-all;
	overflow: visible;
}


.new-main .info-change-card .join-input-row .join-row-action {
	flex: 0 0 auto;
	min-width: 0;
}

.new-main .info-change-card .join-input-row .join-field-col,
.new-main .info-change-card .join-input-row .input-wrap {
	min-width: 0;
}

.new-main .info-change-card .info-change-cancel.modal-card-btn-secondary {
	width: auto;
	min-width: 100px;
	height: 44px;
	margin-top: 52px;
	padding: 0 20px;
	background: transparent;
	border: 1px solid #6C6C70;
	border-radius: 6px;
	color: #AEAEB2;
	font-size: 16px;
	margin-top: 8px;
}

.new-main .info-change-card .info-change-cancel.modal-card-btn-secondary:hover {
	background: rgba(255,255,255,0.05);
}

.new-main .info-change-card .info-change-form-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 12px;
	width: 100%;
	margin-top: 60px;
}

/* 이메일 등록: 인증번호 발송/취소(또는 재전송/등록) 한 줄에 동일 비중, 3개일 때도 겹치지 않도록 */
.new-main .info-change-card .info-change-email-code-block {
	min-height: fit-content;
	overflow: visible;
}

.new-main .info-change-card .info-change-email-code-row {
	min-height: auto;
	height: auto;
	align-items: flex-start;
}

.new-main .info-change-card .info-change-email-code-row label {
	align-self: flex-start;
}

.new-main .info-change-card .info-change-email-code-row .join-field-col {
	min-height: 0;
}

.new-main .info-change-card .info-change-email-resend-row {
	width: 100%;
	margin-top: 8px;
	text-align: right;
}

.new-main .info-change-card .info-change-email-resend-btn {
	width: 100%;
}

.new-main .info-change-card .info-change-email-actions .info-change-email-actions-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	width: 100%;
	min-width: 0;
}

.new-main .info-change-card .info-change-email-actions .info-change-email-actions-row .join-btn-submit.modal-card-btn-primary,
.new-main .info-change-card .info-change-email-actions .info-change-email-actions-row .join-btn-submit.modal-card-btn-secondary {
	flex: 1 1 0;
	min-width: 80px;
	max-width: none;
	height: 44px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.new-main .info-change-card .info-change-form-actions .modal-card-btn-secondary,
.new-main .info-change-card .info-change-form-actions .info-change-back,
.new-main .info-change-card .info-change-form-actions .join-btn-submit:not(.modal-card-btn-primary) {
	background: transparent;
	border: 1px solid #6C6C70;
	color: #AEAEB2;
	flex: 1 1 0;
	min-width: 0;
	width: auto;
	min-width: 80px;
	height: 44px;
	padding: 0 20px;
	border-radius: 6px;
	font-size: 16px;
	font-weight: 600;
	box-sizing: border-box;
}

.new-main .info-change-card .info-change-form-actions .modal-card-btn-secondary:hover,
.new-main .info-change-card .info-change-form-actions .info-change-back:hover,
.new-main .info-change-card .info-change-form-actions .join-btn-submit:not(.modal-card-btn-primary):hover {
	background: rgba(255,255,255,0.05);
}

.new-main .info-change-card .info-change-form-actions .join-btn-submit.modal-card-btn-primary {
	flex: 1 1 0;
	min-width: 0;
	width: auto;
	max-width: none;
	height: 44px;
}

.new-main .info-change-card .modal-card-step-title {
	width: 100%;
	text-align: center;
	color: #999999;
	font-size: 20px;
	font-weight: 500;
	font-family: Inter, sans-serif;
	margin: 0 0 12px;
}

.new-main .info-change-card .modal-card-step-text {
	width: 100%;
	color: #AEAEB2;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	margin: 0 0 16px;
}

.new-main .info-change-card .info-change-email-info {
	width: 100%;
	color: #AEAEB2;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	margin: 0 0 16px;
}

.new-main .info-change-card .info-change-email-info p {
	margin: 0 0 12px;
}

.new-main .info-change-card .info-change-email-info p:last-child {
	margin-bottom: 0;
}

.new-main .info-change-card .modal-card-step-text p {
	margin: 0 0 12px;
}

.new-main .info-change-card .modal-card-step-text p:last-child {
	margin-bottom: 0;
}

.new-main .info-change-card .modal-card-step-countdown {
	width: 100%;
	text-align: center;
	color: #ff6b6b;
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 12px;
}

.new-main .info-change-card .info-change-menu-fields .modal-card-btn-primary {
	width: auto;
	min-width: 100px;
	padding: 0 20px;
}

/* 변경 완료 모달: login-wrap + modal-card 사용, 메시지/본문만 보정 */
#completeModalOverlay {
	z-index: 100002;
}

#completeModalOverlay .modal-card .modal-card-title {
	margin: 0 0 24px;
	color: #fff;
	text-align: center;
}

#completeModalOverlay .modal-card .modal-card-body {
	justify-content: center;
}