/**
 * public join: wrap/폼·필드 전용 (카드·닫기·로고·제목·버튼은 public/modalCard.css)
 */
.new-main .join-wrap {
	position: absolute;
	top: 100px;
	bottom: 250px;
	left: 240px;
	right: 240px;
	display: flex;
	justify-content: center;
	align-items: stretch;
}

.new-main .join-form {
	width: 100%;
	max-width: 360px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 80px;
	min-width: 0;
}

.new-main .join-fields {
	width: 100%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 44px;
}

.new-main .join-input-row {
	width: 100%;
	min-width: 0;
	min-height: 48px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}

.new-main .join-input-row label {
	flex: 0 0 100px;
	min-width: 0;
	color: #AEAEB2;
	font-size: 16px;
	font-weight: 400;
}
.new-main .join-optional {
	color: #6C6C70;
	font-size: 12px;
	font-weight: 400;
}

.new-main .join-field-col {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.new-main .join-field-error {
	min-height: 0;
}
.new-main .join-input-row .input-wrap {
	flex: 0 0 48px;
	min-width: 0;
	height: 48px;
	padding: 0 16px;
	background: #393939;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	box-sizing: border-box;
	border: 1px solid transparent;
}

.new-main .join-input-row input {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 14px 0;
	background: transparent;
	border: none;
	color: #fff;
	font-size: 14px;
	font-family: Inter, sans-serif;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.new-main .join-input-row input::placeholder {
	color: #999;
	white-space: nowrap;
}

.new-main .join-input-row input:focus {
	outline: none;
}

.new-main .join-input-row .input-wrap:focus-within {
	outline: none;
	border-color: rgba(87, 87, 178, 0.5);
}

.new-main .join-pw-toggle {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	border: none;
	cursor: pointer;
	padding: 0;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
}

.new-main .join-pw-toggle img {
	width: 19px;
	height: 13px;
	display: block;
	object-fit: contain;
}

.new-main .join-input-row .input-wrap.join-email-wrap {
	flex: 1 1 auto;
	min-width: 0;
}
.new-main .join-email-wrap {
	display: flex;
	gap: 8px;
	align-items: center;
}
.new-main .join-email-wrap input {
	flex: 1;
	min-width: 0;
}
.new-main .join-cert-btn {
	flex-shrink: 0;
	height: 36px;
	padding: 0 12px;
	background: #7648FF;
	border: none;
	border-radius: 6px;
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
}
.new-main .join-cert-btn:hover {
	background: #8b5cff;
}

.new-main .join-age-verify {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

.new-main .join-age-verify-msg {
	align-self: stretch;
	margin: 0;
	text-align: center;
	color: #fff;
	font-size: 18px;
	font-family: Inter, sans-serif;
	font-weight: 500;
	word-wrap: break-word;
	line-height: 1.5;
}

/* .modal-card-actions와 동시 지정 시 modalCard.css(나중 로드)보다 우선하도록 특이성 상향 */
.new-main .join-age-verify-btns.modal-card-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: stretch;
	justify-items: stretch;
	align-self: stretch;
	width: 100%;
	box-sizing: border-box;
}

.new-main .join-age-verify-btns.modal-card-actions .modal-card-btn-secondary,
.new-main .join-age-verify-btns.modal-card-actions .modal-card-btn-primary {
	flex: none;
	min-width: 0;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0 12px;
	text-align: center;
	box-sizing: border-box;
}

/* secondary는 실선 테두리, primary는 투명 테두리로 박스 모델 정렬 */
.new-main .join-age-verify-btns.modal-card-actions .modal-card-btn-primary {
	border: 1px solid transparent;
}

.new-main .join-age-verify.is-hidden {
	display: none !important;
}

.new-main .join-form-fields {
	width: 100%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

#joinFormFields.is-hidden,
.new-main .join-form-fields.is-hidden {
	display: none !important;
}

#joinSubmitBtn.is-hidden,
.new-main .join-btn-submit.is-hidden {
	display: none !important;
}

.new-main .join-form.is-hidden,
.new-main .join-card .join-logo.is-hidden,
.new-main .join-card .join-title.is-hidden {
	display: none !important;
}

.new-main .join-complete.is-hidden {
	display: none !important;
}

.new-main .join-complete {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: #262626;
	border-radius: 10px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.new-main .join-complete-inner {
	width: 260px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 32px;
}

.new-main .join-complete-msg {
	align-self: stretch;
	text-align: center;
	color: #fff;
	font-size: 20px;
	font-family: Inter, sans-serif;
	font-weight: 500;
	word-wrap: break-word;
}

.new-main .join-complete-login-btn {
	width: 260px;
	height: 44px;
	background: #7648FF;
	border: none;
	border-radius: 6px;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	font-family: Inter, sans-serif;
	cursor: pointer;
}

.new-main .join-complete-login-btn:hover {
	background: #8b5cff;
}

.new-main .join-agree-row {
	width: 100%;
	padding: 8px 0;
}
.new-main .join-agree-row .join-field-col {
	flex: 1 1 100%;
}
.new-main .join-agree-label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	cursor: pointer;
	color: #AEAEB2;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	word-break: keep-all;
	width: 100%;
}
.new-main .join-agree-label input[type="checkbox"] {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	margin-top: 2px;
}
.new-main .join-agree-label span {
	flex: 1;
	min-width: 0;
	color: #AEAEB2;
}

.new-main .join-error-label,
.new-main .just-validate-error-label {
	display: block;
	font-size: 12px;
	color: #FFC107;
}
.new-main .join-input-row .input-wrap:has(.join-error-field) {
	outline: none;
	border-color: #FFC107;
}

.new-main .join-row-action {
	flex: 1;
	min-width: 0;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.new-main .join-btn-submit.info-change-btn {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 120px;
	height: 48px;
	min-width: 0;
	padding: 0 24px;
	background: #7648FF;
	border: none;
	border-radius: 8px;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
}

.new-main .join-btn-submit.info-change-btn:hover {
	background: #8b5cff;
}

/* 정보변경 카드 레이아웃/구조만 (시각 스타일은 public/modalCard.css에서 통일) */
.new-main .info-change-inner {
	width: 100%;
	max-width: 302px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	min-width: 0;
}


.new-main .info-change-body {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	min-width: 0;
}

.new-main .info-change-body .info-change-pw-form,
.new-main .info-change-body .info-change-nickname-form,
.new-main .info-change-body .info-change-email-form,
.new-main .info-change-body .info-change-delete-step {
	align-self: stretch;
	width: 100%;
}

/* 직계 자식 중 is-hidden이 있으면 무조건 숨김 (한 번에 하나의 패널만 표시) */
.new-main .info-change-body > .is-hidden,
.info-change-body > .is-hidden {
	display: none !important;
}

.new-main .info-change-body .info-change-pw-fields,
.new-main .info-change-body .info-change-form .join-fields,
.new-main .info-change-body .info-change-delete-step .join-fields {
	gap: 14px;
	width: 100%;
}

.new-main .info-change-body .info-change-menu {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 60px;
	width: 100%;
}

.new-main .info-change-body .info-change-menu .join-fields {
	width: 100%;
	gap: 18px;
}

.new-main .info-change-body .info-change-menu .join-input-row {
	width: 100%;
	min-height: 48px;
	align-items: center;
	gap: 10px;
}

.new-main .info-change-body .info-change-menu .join-input-row label {
	flex: 1 1 0;
	min-width: 120px;
	color: #AEAEB2;
	font-size: 16px;
	font-weight: 400;
	white-space: nowrap;
}

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

/* 정보 변경: 한 번에 메뉴 또는 하나의 폼/단계만 표시 (카드/오버레이 기준으로 적용) */
.new-main .info-change-pw-form.is-hidden,
.new-main .info-change-nickname-form.is-hidden,
.new-main .info-change-email-form.is-hidden,
.new-main .info-change-delete-intro.is-hidden,
.new-main .info-change-delete-nickname-form.is-hidden,
.new-main .info-change-delete-cancel.is-hidden,
.info-change-card .info-change-pw-form.is-hidden,
.info-change-card .info-change-nickname-form.is-hidden,
.info-change-card .info-change-email-form.is-hidden,
.info-change-card .info-change-delete-intro.is-hidden,
.info-change-card .info-change-delete-nickname-form.is-hidden,
.info-change-card .info-change-delete-cancel.is-hidden {
	display: none !important;
}

/* 정보 변경 이메일: 인증번호 블록(입력+재전송)은 발송 성공 후에만 표시 */
.new-main .info-change-email-code-block.is-hidden,
.info-change-card .info-change-email-code-block.is-hidden {
	display: none !important;
}

/* 계정 삭제 단계 공통: 한 번에 한 단계만 표시, 카드와 동일한 폰트/색상 */
.new-main .info-change-delete-step {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 24px;
	min-width: 0;
	font-family: Inter, sans-serif;
}

.new-main .info-change-delete-subtitle {
	width: 100%;
	text-align: center;
	color: #AEAEB2;
	font-size: 16px;
	font-weight: 400;
	margin: 0;
	line-height: 1.5;
}

.new-main .info-change-delete-text {
	width: 100%;
	color: #AEAEB2;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
	margin: 0;
}

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

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

.new-main .info-change-delete-countdown {
	width: 100%;
	text-align: center;
	color: #ff6b6b;
	font-size: 16px;
	font-weight: 600;
	font-family: Inter, sans-serif;
	margin: 0;
	line-height: 1.5;
}

.new-main .info-change-delete-step .info-change-form-actions {
	margin-top: 0;
	width: 100%;
}

.new-main .info-change-delete-step .join-fields {
	width: 100%;
	min-width: 0;
}

.new-main .info-change-delete-step .join-input-row {
	width: 100%;
	min-width: 0;
}

.new-main .info-change-delete-step .join-input-row label {
	flex: 0 0 100px;
	min-width: 0;
	color: #AEAEB2;
	font-size: 16px;
	font-weight: 400;
}

.new-main .info-change-delete-step .join-input-row .join-field-col {
	flex: 1;
	min-width: 0;
}

.new-main .info-change-delete-step .join-field-col .input-wrap {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	height: 48px;
	background: #393939;
	border-radius: 8px;
	padding: 0 16px;
	display: flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	border: 1px solid transparent;
}

.new-main .info-change-delete-step .join-field-col .input-wrap input {
	flex: 1 1 0;
	min-width: 0;
	height: 100%;
	padding: 0;
	background: transparent;
	border: none;
}

.new-main .info-change-delete-step .join-field-col .input-wrap:focus-within {
	outline: none;
	border-color: rgba(87, 87, 178, 0.5);
}

.new-main .info-change-delete-step .input-wrap input {
	font-family: Inter, sans-serif;
	font-size: 14px;
	color: #fff;
}

.new-main .info-change-delete-nickname-fields {
	gap: 8px;
}

.new-main .info-change-delete-nickname-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: nowrap;
}

.new-main .info-change-delete-nickname-display-wrap {
	flex: 1;
	min-width: 0;
	height: 48px;
	padding: 0 16px;
	background: #393939;
	border-radius: 8px;
	border: 1px solid transparent;
	display: flex;
	align-items: center;
	box-sizing: border-box;
}

.new-main .info-change-delete-nickname-display {
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	flex-shrink: 0;
}

.new-main .info-change-delete-nickname-check {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	background: #d4a017;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #1a1a1a;
	font-size: 14px;
	font-weight: bold;
	line-height: 1;
}

.new-main .info-change-delete-nickname-check::after {
	content: '\2713';
}

.new-main .info-change-delete-nickname-check.is-hidden {
	display: none !important;
}

.new-main .info-change-delete-checkbox-label {
	display: flex;
	align-items: center;
	cursor: pointer;
	flex-shrink: 0;
}

.new-main .info-change-delete-checkbox-label input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	min-width: 16px;
	min-height: 16px;
	border: 2px solid #6b6b70;
	border-radius: 4px;
	background: #1c1c1e;
	cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
	position: relative;
	box-sizing: border-box;
}

.new-main .info-change-delete-checkbox-label input[type="checkbox"]:hover {
	border-color: #8e8e93;
}

.new-main .info-change-delete-checkbox-label input[type="checkbox"]:checked {
	border-color: #7648FF;
	background: #7648FF;
	box-shadow: 0 0 0 1px rgba(118, 72, 255, 0.3);
}

.new-main .info-change-delete-checkbox-label input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	left: 5px;
	top: 1px;
	width: 4px;
	height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	box-sizing: border-box;
}

.new-main .info-change-nickname-info {
	width: 100%;
	padding: 12px 0;
	color: #AEAEB2;
	font-size: 14px;
	line-height: 1.5;
}

.new-main .info-change-menu.is-hidden {
	display: none !important;
}

.new-main .info-change-form .join-input-row {
	align-items: center;
	gap: 10px;
}

.new-main .info-change-form .join-input-row label {
	flex: 0 0 100px;
	min-width: 0;
	color: #AEAEB2;
	font-size: 16px;
	font-weight: 400;
}

.new-main .info-change-form .join-field-col {
	flex: 1;
	min-width: 0;
}

.new-main .info-change-form .input-wrap {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	height: 48px;
	background: #393939;
	border-radius: 8px;
	padding: 0 16px;
	display: flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	border: 1px solid transparent;
}

.new-main .info-change-form .input-wrap input {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 14px 0;
	background: transparent;
	border: none;
	color: #fff;
	font-size: 14px;
	font-family: Inter, sans-serif;
}

.new-main .info-change-form .input-wrap input.join-input-readonly {
	background: rgba(255, 255, 255, 0.06);
	color: #AEAEB2;
	cursor: default;
}

.new-main .info-change-form .input-wrap:focus-within {
	outline: none;
	border-color: rgba(87, 87, 178, 0.5);
}

.new-main .info-change-form .join-pw-toggle {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	border: none;
	cursor: pointer;
	padding: 0;
	background: transparent;
}

.new-main .info-change-form .join-pw-toggle img {
	width: 19px;
	height: 13px;
	object-fit: contain;
}

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

/* 정보변경 폼 버튼은 public/modalCard.css의 .modal-card-btn-primary / .modal-card-btn-secondary로 통일 */
@media (max-width: 600px) {
	.new-main .join-input-row {
		flex-direction: row;
		height: 48px;
		align-items: center;
		gap: 10px;
	}
	.new-main .info-change-email-code-row {
		height: auto;
		min-height: auto;
		align-items: flex-start;
	}
	.new-main .join-input-row label {
		flex: 0 0 90px;
	}
	.new-main .join-input-row .input-wrap {
		flex: 1;
		min-width: 0;
		width: auto;
	}
	.new-main .join-form {
		gap: 40px;
		max-width: 100%;
	}
}