/* 이메일 본인인증 블록 — 회원가입·비번찾기 공용.
 *
 * 마크업 계약은 form-input-textfield-affix(.has-suffix) + form-input-textfield-chip
 * (textfield.css 에 정의된 텍스트 chip primitive)을 그대로 사용. 본 스타일시트는
 *   1) chip 텍스트 길이만큼 input padding-right 확보
 *   2) chip 의 disabled / 인증완료 상태 시각 보강
 *   3) 인증 상태 텍스트 색상
 * 만 담당.
 */

/* 부모(form-row.full / form-section) 의 layout 이 flex 인 경우에도 폭 100% 차지하도록 명시. */
.email-verification-block {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}

/* send chip ("인증코드 받기" / "재발송 (60s)" / "인증 완료") 자리 확보 — 7rem. */
.email-verification-block .form-input-textfield-affix.has-suffix > .form-input-textfield {
	padding-right: 7rem;
}

/* 코드 입력 row 의 "확인" chip 은 짧음(2자) — padding 줄여 input 영역 확보. */
.email-verification-block [data-email-verification-code-row].form-input-textfield-affix.has-suffix > .form-input-textfield {
	padding-right: 4rem;
}

/* chip(textfield-chip) 가 cooldown / 인증완료 시 시각 변화. */
.email-verification-block .form-input-textfield-chip:disabled {
	cursor: not-allowed;
	opacity: 0.55;
}

.email-verification-block.is-verified .form-input-textfield-chip[data-email-verification-send] {
	color: var(--color-text-success, #1f8a4c);
	border-color: var(--color-border-success, #1f8a4c);
	opacity: 1;
}

/* 인증 코드 유효시간 카운트다운 (mm:ss) */
.email-verification-block .email-verification-expiry {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--color-text-muted, #6b7280);
	font-variant-numeric: tabular-nums;
}

.email-verification-block .email-verification-expiry[hidden] {
	display: none;
}

.email-verification-block .email-verification-expiry [data-email-verification-expiry-mmss] {
	font-weight: 600;
	color: var(--color-text-default, #1f242c);
}

/* 상태 라인 (전송됨 / 인증 완료 / 오류) */
.email-verification-block .email-verification-status {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.5;
	min-height: 1.5em;
	color: var(--color-text-muted, #6b7280);
}

.email-verification-block .email-verification-status[data-email-verification-status-kind="success"] {
	color: var(--color-text-success, #1f8a4c);
}

.email-verification-block .email-verification-status[data-email-verification-status-kind="error"] {
	color: var(--color-text-danger, #d4322b);
}

.email-verification-block .email-verification-status[data-email-verification-status-kind="warn"] {
	color: var(--color-text-warning, #b97500);
}

/* 코드 입력 row 는 인증 코드 받기 클릭 후 노출. */
.email-verification-block [data-email-verification-code-row][hidden] {
	display: none;
}