#login_container {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;
}

#login_container .login_inner {
	width: 100%;
	height: 100%;
	padding: 2rem;

	max-width: 500px;
	text-align: center;

	border-radius: 16px;
	border: 1px solid var(--base-lightgray);
	box-shadow: 0 0 2px var(--base-silver);
}

#login_container .login_header {
	margin-bottom: 2rem;
}

#login_container .login_header .login_header_title {
	font-size: 3rem;
	font-weight: 900;
	margin-bottom: 1rem;
}

#login_container .login_header .login_header_desc {
	color: var(--base-darkgray);
}

#login_container .login_form {
	margin-bottom: 1rem;
}

#login_container .login_form .form_group {}

#login_container .login_form .form_group:nth-child(1) {
	margin-bottom: 1rem;
}

#login_container .login_form .form_group .form_input {
	width: 100%;
	height: 3rem;
	padding: 0 1rem;

	font-size: 1rem;

	border: 1px solid var(--base-lightgray);
	background: var(--base-iceblue);
}

#login_container .login_form .form_group .form_input::placeholder {
	opacity: .7;
}

/* 로그인 버튼 → 전역 .btn.secondary.full + 크기 override */
#login_container .login_form .secondary.full {
	margin: 2rem 0;
	font-size: 1.5rem;
	border-radius: 8px;
}

#login_container .login_footer {
	display: flex;
	justify-content: space-between;
	gap: 0 .5rem;
}

#login_container .login_footer .login_footer_btn {
	width: 50%;
	padding: .4rem 0;
	border-radius: 8px;

	color: var(--base-gray);
	background: var(--base-lightgray);

	transition: background 150ms linear;
}

#login_container .login_footer .login_footer_btn:hover {
	background: var(--base-silver);
}

/* ==================== 알림 박스 ==================== */
#login_container .alert {
    display: block; /* 전역 ui/alert.css 의 .alert{display:none} 무력화 — 로그인 알림은 서버 렌더 즉시 노출 */
    padding: 12px;
    border-radius: 5px;
    margin-bottom: 20px;
}

#login_container .alert.error {
    background: var(--base-mistyrose);
    color: var(--base-darkred);
    border: 1px solid var(--base-palered);
}

#login_container .alert.warning {
    background: var(--base-butterywhite);
    color: var(--base-amber-text);
    border: 1px solid var(--base-paleyellow);
}

#login_container .alert.success {
    background: var(--base-palegreen);
    color: var(--base-forest);
    border: 1px solid var(--base-sage);
}

#login_container .alert.locked {
    background: var(--base-butterywhite);
    color: var(--base-amber-dark);
    border: 1px solid var(--base-amber);
}

#login_container .alert.locked .locked-message {
    line-height: 1.6;
    margin-bottom: 10px;
}

#login_container .alert.locked .countdown {
    margin-bottom: 10px;
    font-weight: 700;
}

/* 즉시 해제 버튼 → 전역 .btn.primary 사용, 여기서 레이아웃 조정 */
#login_container .alert.locked .btn {
    margin-top: 10px;
    min-height: 40px;
}

/* 카운트다운 후 잠금해제 완료 메시지 — login.js 에서 insertAdjacentHTML로 삽입 */
.unlock-success-note {
    display: block;
    font-size: 13px;
    color: var(--base-forest);
    margin-top: 4px;
}