.sec-login-page {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background:
		radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0, 102, 204, 0.08), transparent),
		linear-gradient(165deg, var(--surface) 0%, #e8f0fa 45%, var(--surface) 100%);
}

.sec-login-card {
	width: 100%;
	max-width: 440px;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 16px 48px rgba(11, 31, 58, 0.12);
}

.sec-login-card__bar {
	height: 4px;
	background: linear-gradient(90deg, var(--navy) 0%, var(--accent) 100%);
}

.sec-login-card__body {
	padding: 2.25rem 2rem 2rem;
	text-align: center;
}

.sec-login-card__body img {
	max-width: 220px;
	width: 100%;
	height: auto;
	margin-bottom: 1.25rem;
}

.sec-login-card__body h1 {
	font-size: 1.35rem;
	font-weight: 700;
	margin: 0 0 0.35rem;
	letter-spacing: -0.02em;
}

.sec-login-card__body .desc {
	color: var(--muted);
	font-size: 0.9rem;
	margin: 0 0 1.5rem;
	line-height: 1.55;
}

.sec-login-form {
	text-align: left;
}

.sec-login-form .sec-field {
	margin-bottom: 1.125rem;
}

.sec-remember {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1.125rem;
	font-size: 0.875rem;
	color: var(--muted);
	cursor: pointer;
	user-select: none;
}

.sec-remember input {
	width: 1rem;
	height: 1rem;
	margin: 0;
	accent-color: var(--accent);
	cursor: pointer;
}

.sec-login-form .sec-btn {
	margin-top: 0.25rem;
	position: relative;
}

.sec-login-form .sec-btn:disabled {
	opacity: 0.75;
	cursor: wait;
}

.sec-login-form .sec-btn .spinner {
	display: none;
	width: 1.125rem;
	height: 1.125rem;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: var(--white);
	border-radius: 50%;
	animation: sec-spin 0.7s linear infinite;
	margin-right: 0.5rem;
	vertical-align: middle;
}

.sec-login-form .sec-btn.is-loading .spinner {
	display: inline-block;
}

.sec-login-form .sec-btn.is-loading .btn-label {
	opacity: 0.9;
}

@keyframes sec-spin {
	to { transform: rotate(360deg); }
}

.sec-error {
	display: none;
}

.sec-error.is-visible {
	display: block;
}

.sec-note {
	font-size: 0.75rem;
	color: var(--muted);
	margin: 1.5rem 0 0;
	line-height: 1.5;
}

@media (max-width: 480px) {
	.sec-login-card__body {
		padding: 1.75rem 1.25rem 1.5rem;
	}
}

/* ===== 반도체 칩 / X-ray 호버 테마 (SEC 컬러: navy #19365a, blue #0e66ad) ===== */
.sec-login-page {
	background: #05101f !important;
	position: relative;
}
.chip-bg {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	background:
		radial-gradient(circle at 50% 42%, #11294a 0%, #0a1c36 52%, #050f1d 100%);
}
.chip-bg canvas { position: absolute; inset: 0; }
/* 기본 회로 위에 X-ray 회로를 마우스 위치 원형 렌즈로만 노출 (동전 크기, 부드러운 가장자리) */
#circuit-xray {
	-webkit-mask-image: radial-gradient(circle 82px at var(--mx, -200px) var(--my, -200px), #000 0, #000 48%, transparent 100%);
	mask-image: radial-gradient(circle 82px at var(--mx, -200px) var(--my, -200px), #000 0, #000 48%, transparent 100%);
}
/* 렌즈 테두리(스캐너 링) */
.xray-ring {
	position: fixed;
	top: 0;
	left: 0;
	width: 200px;
	height: 200px;
	margin: -100px 0 0 -100px;
	border-radius: 50%;
	z-index: 2;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.25s ease;
	background: radial-gradient(circle, rgba(70,140,210,0.06) 0%, rgba(70,140,210,0.025) 40%, transparent 62%);
	box-shadow: inset 0 0 0 1px rgba(90,160,225,0.2), 0 0 24px rgba(20,100,180,0.14);
}

/* 카드 — 칩 패키지 느낌의 다크 글래스 (SEC navy/blue) */
.sec-login-card {
	position: relative;
	z-index: 1;
	background: rgba(12, 26, 46, 0.78);
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
	border: 1px solid rgba(70, 130, 200, 0.28);
	box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 18px 60px rgba(0,0,0,0.6), 0 0 50px rgba(20,100,180,0.12);
}
.sec-login-card__bar { background: linear-gradient(90deg, #19365a 0%, #0e66ad 100%); }
.sec-login-card__body { color: #d4e1f0; }
.sec-login-card__body img { filter: brightness(1.85) saturate(1.1) drop-shadow(0 0 16px rgba(40,120,200,0.45)); }
.sec-login-card__body h1 { color: #eef4fb; text-shadow: 0 0 18px rgba(40,120,200,0.3); }
.sec-login-card__body .desc,
.sec-note,
.sec-remember { color: #97aac4; }
.sec-login-card label,
.sec-login-card h2 { color: #bccee2; }
.sec-login-card input,
.sec-login-card select {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(90, 150, 210, 0.28);
	color: #eef4fb;
}
.sec-login-card input::placeholder { color: rgba(190, 210, 235, 0.4); }
.sec-login-card input:focus,
.sec-login-card select:focus {
	border-color: #2e86d6;
	box-shadow: 0 0 0 3px rgba(30, 110, 190, 0.22);
	outline: none;
}
.sec-login-card select option { background: #0c1a2e; color: #eef4fb; }
.sec-login-card .sec-btn--ghost { color: #bcd6f0; border-color: rgba(90, 150, 210, 0.35); }
.sec-login-card .sec-remember input { accent-color: #2e86d6; }

/* 비밀번호 변경 / 초기화 링크 버튼 */
.sec-linkbtn {
	background: none;
	border: none;
	padding: 0;
	font-size: 0.85rem;
	color: #8fb8e6;
	cursor: pointer;
	text-decoration: none;
}
.sec-linkbtn:hover { color: #cfe2f7; text-decoration: underline; }

/* SEC 로고 X-ray 호버 — 로고가 반투명해지며 뒤에서 "e·beam pioneer"가 X-ray 글자로 떠오름 */
.logo-xray { position: relative; display: inline-block; }
.logo-xray img {
	position: relative;
	z-index: 2;
	display: block;
	transition: opacity 0.4s ease, filter 0.4s ease;
}
.logo-xray__text {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	pointer-events: none;
	white-space: nowrap;
	font-weight: 700;
	letter-spacing: 0.16em;
	font-size: clamp(0.8rem, 4.5vw, 1.12rem);
	color: rgba(224, 236, 250, 0.92);
	opacity: 0;
	transition: opacity 0.45s ease;
	text-shadow:
		0 0 8px rgba(195, 220, 250, 0.8),
		0 0 20px rgba(60, 140, 225, 0.55),
		0 0 34px rgba(40, 110, 200, 0.4);
}
/* 호버 시: 로고는 X-ray처럼 밝고 옅게, 글자는 선명하게 */
.logo-xray:hover img { opacity: 0.4; filter: brightness(2.2) saturate(0.6) contrast(1.05); }
.logo-xray:hover .logo-xray__text { opacity: 1; }
/* ===== 로그인 성공 전환: 대문 상승 → 로고+환영멘트 페이드인 → 로고 확대(빨려듦) → 메인 페이드인 ===== */
#gate-rise {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: linear-gradient(160deg, #0b1f3a 0%, #16325c 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	transform: translateY(100%);
	transition: transform 0.4s cubic-bezier(0.16, 0.9, 0.28, 1);   /* 1번: 대문 상승 0.4s */
	will-change: transform;
}
#gate-rise.gate-up { transform: translateY(0); }
.gate-stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}
.gate-logo {
	width: min(42vw, 260px);
	filter: brightness(0) invert(1);          /* 로고 흰색화 */
	transform-origin: center center;
	opacity: 0;
	transform: scale(0.9);
	transition: opacity 1s ease 0.4s, transform 1s cubic-bezier(0.16, 0.9, 0.28, 1) 0.4s;   /* 2번: 페이드인 1s (상승 0.4s 후) */
}
#gate-rise.gate-up .gate-logo { opacity: 1; transform: scale(1); }
.gate-welcome {
	color: #cbd8ea;
	font-size: 1.386rem;                /* 1.26rem +10% */
	font-weight: 700;                   /* 환영합니다 bold */
	letter-spacing: 2px;                /* 자간 아주 조금 넓게 */
	margin-top: 44px;                   /* 로고와 간격 더 벌려 아래로 */
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 1s ease 0.4s, transform 1s ease 0.4s;   /* 2번: 멘트 페이드인 1s */
}
.gate-welcome .gate-w2 {
	display: block;
	color: #ffffff;
	font-size: 1.632rem;                /* 2.04rem -20% */
	font-weight: 800;
	margin-top: 6px;
	letter-spacing: 1px;
}
#gate-rise.gate-up .gate-welcome { opacity: 1; transform: none; }
/* 로고 중앙으로 완전 확대되며 빨려드는 느낌 + 멘트 페이드아웃 (gate-up 규칙보다 뒤에 위치해 우선 적용) */
#gate-rise.gate-zoom .gate-logo {
	opacity: 0;
	transform: scale(150);
	transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.55, 0, 0.85, 0.25);   /* 3번: 확대(빨려듦) 0.8s, scale 150 */
}
#gate-rise.gate-zoom .gate-welcome {
	opacity: 0;
	transform: translateY(-6px) scale(0.96);
	transition: opacity 0.45s ease, transform 0.5s ease;
}
@media (prefers-reduced-motion: reduce) {
	#gate-rise { transition: none; transform: translateY(0); }
	#gate-rise .gate-logo, #gate-rise .gate-welcome { transition: none; }
}