/**
 * 로그인 화면 전용 스타일 — authentication 레이아웃(.login-register 셸) 오버라이드.
 * elite-admin login-register-lock.css 뒤에 로드되어 로그인/OTP 공통 셸을 현대화한다.
 * 로고 관리(TEXT/IMAGE/IMGTT) 블록은 마크업 그대로 스타일만 보정.
 */

/* ===== 배경 — 딥 네이비 + 부드러운 컬러 글로우(메시) ===== */
.login-register {
	min-height: 100vh;
	height: auto;
	padding: 24px 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	background-color: #0a0e1a;
	background-image:
		radial-gradient(780px 580px at 82% -8%, rgba(56, 78, 128, 0.55), transparent 60%),
		radial-gradient(680px 520px at 8% 108%, rgba(44, 60, 100, 0.50), transparent 58%),
		radial-gradient(560px 460px at 50% 50%, rgba(70, 92, 140, 0.10), transparent 62%);
}
/* 떠다니는 부드러운 광원 — 정적이지만 깊이감 부여 */
.login-register::before,
.login-register::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	opacity: 0.55;
	pointer-events: none;
}
.login-register::before {
	width: 340px; height: 340px;
	top: -80px; right: -60px;
	background: radial-gradient(circle, rgba(72, 98, 155, 0.55), transparent 70%);
}
.login-register::after {
	width: 300px; height: 300px;
	bottom: -90px; left: -50px;
	background: radial-gradient(circle, rgba(52, 70, 116, 0.55), transparent 70%);
}

/* ===== 카드 — 순백, 넉넉한 라운드, 부드러운 큰 그림자(파란 줄 제거) ===== */
.login-box.card {
	position: relative;
	z-index: 1;
	width: 400px;
	max-width: 100%;
	margin: 0;
	border: 0;
	border-radius: 24px;
	background: #ffffff;
	/* spread 는 0 유지 — 음수 spread 는 그림자 모서리 반경을 (radius+spread)로 깎아 직각으로 보인다 */
	box-shadow:
		0 30px 70px 0 rgba(5, 10, 30, 0.50),
		0 10px 26px 0 rgba(5, 10, 30, 0.26);
	/* overflow:hidden 금지 — 내부 버튼/입력 그림자가 카드 하단 경계에서 직선으로 잘려 직각처럼 보인다 */
	overflow: visible;
	animation: loginCardIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes loginCardIn {
	from { opacity: 0; transform: translateY(20px) scale(0.985); }
	to   { opacity: 1; transform: none; }
}
.login-box .card-body {
	padding: 2.8rem 2.6rem 2.3rem;
}
/* form-group(elite/부트스트랩)이 overflow:hidden 이라 내부 버튼/입력 그림자를 직선으로 자른다 → 해제 */
#loginForm .form-group,
#loginForm .col-xs-12 {
	overflow: visible !important;
}

/* ===== 로고(로고 관리 연동 블록) — 텍스트 로고는 절제된 딥 네이비 워드마크 ===== */
.login-box h3 {
	margin-bottom: 1.9rem !important;
	font-weight: 700;
	font-size: 1.66rem;
	letter-spacing: 1.6px;
	color: #212c44;
}
.zetworks-login-logo {
	display: inline-block;
	margin-bottom: 1.4rem;
}
.zetworks-login-logo img {
	max-height: 66px;
	max-width: 100%;
	object-fit: contain;
}

/* ===== 입력 필드 — 아이콘 프리픽스 + 부드러운 포커스 링(라운드 준수) ===== */
/* 포커스 링은 input 이 아니라 래퍼(.login-field)에 준다 — elite 의 .form-material:focus box-shadow(!important) 회피 */
#loginForm .login-field {
	position: relative;
	border-radius: 14px;
	transition: box-shadow 0.2s;
}
#loginForm .login-field:focus-within {
	box-shadow: 0 0 0 4px rgba(43, 58, 92, 0.14);
}
#loginForm .login-field > i {
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	color: #b3bcd4;
	font-size: 0.95rem;
	transition: color 0.2s;
	pointer-events: none;
	z-index: 2;
}
#loginForm .login-field:focus-within > i {
	color: #2b3a5c;
}
#loginForm .form-control.login {
	height: 52px;
	padding: 0 16px 0 48px;
	border-radius: 14px;
	background: #f4f6fb;
	border: 1.5px solid #eef1f8 !important;
	font-size: 0.95rem;
	color: #26324d;
	outline: none !important;
	box-shadow: none !important;
	background-image: none !important; /* elite material 밑줄 그라데이션 무력화 */
	transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
#loginForm input.form-control.login:focus {
	background: #fff;
	border-color: #2b3a5c !important;
	box-shadow: none !important; /* 링은 래퍼(.login-field:focus-within)가 담당 */
}
#loginForm .form-control.login::placeholder {
	color: #aeb7cf;
}

/* ===== 로그인 버튼 — 그라데이션 + 버튼과 동일한 둥근 그림자 ===== */
#loginForm button[type="submit"] {
	height: 52px;
	margin-top: 0.3rem;
	border: 0 !important;
	border-radius: 14px !important;
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.4px;
	color: #fff;
	/* 절제된 딥 네이비 — 세로 미묘 명암으로 입체감만, 화려한 그라데이션 지양 */
	background: linear-gradient(180deg, #33425f 0%, #212c44 100%) !important;
	/* spread 0 — 버튼 radius(14px) 그대로, 중성 네이비 그림자 은은하게 */
	box-shadow: 0 6px 16px 0 rgba(15, 22, 42, 0.30) !important;
	transition: transform 0.16s, box-shadow 0.16s, filter 0.16s;
}
#loginForm button[type="submit"]:hover {
	transform: translateY(-2px);
	filter: brightness(1.12);
	box-shadow: 0 10px 22px 0 rgba(15, 22, 42, 0.38) !important;
}
#loginForm button[type="submit"]:active {
	transform: translateY(0);
	filter: brightness(0.96);
	box-shadow: 0 4px 12px 0 rgba(15, 22, 42, 0.28) !important;
}
#loginForm button[type="submit"]:focus {
	box-shadow: 0 6px 16px 0 rgba(15, 22, 42, 0.30), 0 0 0 4px rgba(43, 58, 92, 0.22) !important;
}

/* ===== 로그인 상태 유지 ===== */
#loginForm .custom-control-label {
	color: #6b7699;
	font-size: 0.88rem;
}
#loginForm .custom-control-input:checked ~ .custom-control-label::before {
	background-color: #2b3a5c;
	border-color: #2b3a5c;
}

/* ===== 언어/자동로그인 셀렉트 ===== */
#loginForm .form-select,
#loginForm select.form-control {
	height: 48px;
	border-radius: 14px;
	border: 1.5px solid #eef1f8;
	background: #f8f9fd;
	color: #4a5678;
	transition: border-color 0.2s, box-shadow 0.2s;
}
#loginForm select.form-control:focus {
	border-color: #2b3a5c;
	box-shadow: 0 0 0 4px rgba(43, 58, 92, 0.12);
	outline: none;
}
#loginForm .select2-container--default .select2-selection--single {
	height: 48px;
	border-radius: 14px !important;
	border: 1.5px solid #eef1f8;
	background: #f8f9fd;
	transition: border-color 0.2s, box-shadow 0.2s;
}
#loginForm .select2-container--default.select2-container--open .select2-selection--single,
#loginForm .select2-container--default.select2-container--focus .select2-selection--single {
	border-color: #2b3a5c;
	box-shadow: 0 0 0 4px rgba(43, 58, 92, 0.12);
}
#loginForm .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100%;
}
/* select2 드롭다운은 body 직속이라 #loginForm 스코프 밖 — 로그인 화면에서만 로드되는 CSS 라
   전역 선택자로 옵션 hover 색을 버튼 톤(딥 네이비)에 맞춘다(기본 파란색 제거) */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
	background-color: #2b3a5c !important;
	color: #fff !important;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
	background-color: #eef1f6;
	color: #212c44;
}

/* ===== 오류 문구 ===== */
#loginForm .text-danger {
	font-size: 0.86rem;
	line-height: 1.55;
}