@layer component, scaffold, feature;

@layer feature {
	.auth-form {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		gap: 0.25rem;

		width: 100%;
		/* 카드 내부에서 height/overflow 를 강제하지 않는다 — 회원가입 같은 긴 폼에서 viewport·카드 이중 스크롤 충돌 회피.
		   짧은 폼(로그인/find)은 자연 높이로 펼쳐지므로 카드 모양이 그대로 유지된다. */
	}

	.auth-form-section {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 1.25rem;

		width: 100%;

		padding: 0 0.25rem;
		margin-bottom: 0;
		/* 내부 자체 스크롤바 제거 — outer viewport 스크롤만 동작. */
	}

	.auth-form-group {
		gap: 0.5rem;
	}

	.auth-form-actions {
		flex-direction: column;
		align-items: center;
		width: 100%;
	}

	.auth-links {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-evenly;
		align-items: center;
		gap: 1.25rem;

		width: 100%;
	}

	.login-button {
		width: 100%;
		padding: 1rem;
		border-radius: var(--pill);

		font-weight: 700;
		line-height: 1.375rem;

		transition:
			transform 0.2s ease,
			box-shadow 0.2s ease;
	}

	.login-button:hover {
		transform: translateY(-1px);
		box-shadow: var(--shadow-soft);
	}

	.signup-button {
		width: 100%;

		padding: 1rem;
		border-radius: var(--pill);

		font-weight: 700;
		line-height: 1.375rem;

		transition:
			transform 0.2s ease,
			box-shadow 0.2s ease;
	}

	.signup-button:hover {
		transform: translateY(-1px);
		box-shadow: var(--shadow-soft);
	}

	.auth-footer {
		color: var(--blue-gray-500);
		font-size: 0.875rem;
		line-height: 1rem;
	}

	/* ──────────────────────────────────────────────────────────────────────
	 * auth-success-panel: 인증 흐름 완료 페이지(아이디/비밀번호 찾기, 회원가입) 공통 패널.
	 * 큰 체크 아이콘 + 타이틀 + 강조 데이터 카드 + 보조 메시지 + 액션 스택.
	 * ───────────────────────────────────────────────────────────────────── */
	.auth-success-panel {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1.25rem;
		width: 100%;
		padding: 0.5rem 0.25rem 0;
		text-align: center;
	}

	.auth-success-icon {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		width: 5rem;
		height: 5rem;
		border-radius: var(--circle);
		background: var(--primary-light);
		box-shadow: 0 0 0 8px var(--primary-ghost);
	}

	.auth-success-icon svg {
		width: 2.5rem;
		height: 2.5rem;
	}

	.auth-success-icon svg path {
		stroke: var(--primary);
	}

	.auth-success-title {
		margin: 0;
		font-size: 1.25rem;
		line-height: 1.75rem;
		font-weight: 700;
		color: var(--text);
		word-break: keep-all;
	}

	.auth-success-sub {
		margin: 0;
		font-size: 0.9375rem;
		line-height: 1.5rem;
		color: var(--blue-gray-600);
		word-break: keep-all;
	}

	.auth-success-info-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.375rem;
		width: 100%;
		padding: 1.125rem 1rem;
		border: 1px solid var(--primary-light);
		border-radius: var(--curved);
		background: var(--primary-ghost);
	}

	.auth-success-info-label {
		font-size: 0.8125rem;
		line-height: 1.125rem;
		font-weight: 500;
		color: var(--blue-gray-600);
	}

	.auth-success-info-value {
		font-size: 1.25rem;
		line-height: 1.75rem;
		font-weight: 700;
		color: var(--primary);
		font-family: "SFMono-Regular", "Menlo", "Consolas", monospace;
		letter-spacing: 0.01em;
		word-break: break-all;
	}

	.auth-success-actions {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0.625rem;
		width: 100%;
		margin-top: 0.5rem;
	}

	.auth-success-retry {
		margin-top: 0.25rem;
		font-size: 0.875rem;
		color: var(--blue-gray-500);
		text-align: center;
	}

	.auth-success-empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.75rem;
		padding: 1.5rem 1rem;
		color: var(--blue-gray-500);
		text-align: center;
	}

	/* @layer feature 내 display 규칙이 user-agent [hidden] {display:none} 보다 우선해 가시화되는 회귀 차단. */
	.auth-success-panel [hidden],
	.auth-success-actions [hidden],
	.auth-success-info-card[hidden] {
		display: none;
	}

	@media (min-width: 768px) {
		.auth-success-panel {
			gap: 1.5rem;
			padding-top: 1rem;
		}
		.auth-success-title {
			font-size: 1.5rem;
			line-height: 2.125rem;
		}
		.auth-success-icon {
			width: 5.5rem;
			height: 5.5rem;
		}
		.auth-success-icon svg {
			width: 2.75rem;
			height: 2.75rem;
		}
	}
}