/*
 * Login page CSS.
 *
 * 2026-10-10 디자인 변경 - 요청서 「로그인 화면 디자인 변경」 반영.
 *  - 배경은 image/monitoring/login_bg.jpg 를 화면 가득 채운다.
 *  - 글꼴은 모니터링과 같은 Pretendard (base.css 에서 self-host 등록).
 *  - 로그인 버튼은 #21DAEA -> #009DDC 그라데이션.
 *
 * 배경 그림에 「태양광 발전 모니터링 시스템」 로고가 이미 박혀 있다.
 * 그래서 왼쪽 글자를 따로 그리지 않고 오른쪽 입력 카드만 올린다.
 *
 * 치수는 시안(1920x940)을 그대로 재서 넣었다.
 * 카드 590x560, 오른쪽 여백 136, 안쪽 여백 68, 입력칸 450x71, 칸 사이 27.
 * 화면이 좁아지면 같이 줄도록 전부 vw 로 적되 clamp 로 바닥을 받쳐 둔다.
 * 1920 에서 vw 값이 시안 숫자와 맞는다 (예: 30.7vw = 589px).
 *
 * 색도 시안 픽셀에서 뽑았다. 카드 바탕 #081526, 테두리와 입력칸 선 #009DDC.
 */

.login-page {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-height: 100vh;
	min-height: 100dvh;
	padding: clamp(24px, 4vh, 48px) clamp(16px, 7.08vw, 136px);
	overflow: hidden;
	font-family: "Pretendard", "Malgun Gothic", "Segoe UI", Arial, sans-serif;
	color: #fff;
	background-color: #081526;
	background-image: url("/image/monitoring/login_bg.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

/* ===== 입력 카드 ======================================================== */

.login-card {
	flex: 0 0 auto;
	width: clamp(340px, 30.73vw, 590px);
	padding: clamp(26px, 3.39vw, 65px) clamp(22px, 3.59vw, 69px) clamp(20px, 1.875vw, 36px);
	background: #081526;
	border: 1px solid rgba(0, 157, 220, 0.75);
	border-radius: 16px;
	box-shadow: 0 26px 60px rgba(2, 8, 20, 0.45);
}

.login-card__title {
	font-size: clamp(24px, 2.344vw, 45px);
	font-weight: var(--font-weight-bold);
	line-height: 1.2;
	color: #fff;
}

.login-card__desc {
	margin-top: clamp(8px, 0.73vw, 14px);
	margin-bottom: clamp(20px, 2.448vw, 47px);
	font-size: clamp(14px, 1.094vw, 21px);
	font-weight: var(--font-weight-regular);
	line-height: 1.4;
	color: #9FB9CA;
}

.login-card__field {
	position: relative;
	display: flex;
	align-items: center;
	margin-bottom: clamp(12px, 1.41vw, 27px);
	border: 1px solid rgba(0, 157, 220, 0.7);
	border-radius: clamp(8px, 0.52vw, 10px);
	background: transparent;
	transition: border-color var(--motion-base) var(--motion-easing),
				box-shadow var(--motion-base) var(--motion-easing);
}

.login-card__field:hover {
	border-color: rgba(33, 218, 234, 0.85);
}

/* 테두리를 칸 전체에 주므로 포커스 표시도 칸이 받는다. */
.login-card__field:focus-within {
	border-color: #21DAEA;
	box-shadow: 0 0 0 3px rgba(33, 218, 234, 0.16);
}

.login-card__icon {
	flex: 0 0 auto;
	width: clamp(20px, 1.25vw, 24px);
	height: clamp(20px, 1.25vw, 24px);
	margin: 0 clamp(12px, 1.15vw, 22px) 0 clamp(16px, 1.46vw, 28px);
	color: #DCE9F2;
}

.login-card__input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	height: clamp(48px, 3.59vw, 69px);
	padding: 0 clamp(16px, 1.46vw, 28px) 0 0;
	font-family: inherit;
	font-size: clamp(14px, 1.042vw, 20px);
	font-weight: var(--font-weight-medium);
	line-height: 1;
	color: #fff;
	background: transparent;
	border: 0;
	outline: none;
}

.login-card__input::placeholder {
	font-weight: var(--font-weight-regular);
	color: rgba(255, 255, 255, 0.82);
}

/*
 * 크롬 자동완성이 칸을 흰색으로 칠해 어두운 카드와 어긋난다.
 * 안쪽 그림자로 덮어 카드 바탕색을 유지한다.
 */
.login-card__input:-webkit-autofill,
.login-card__input:-webkit-autofill:hover,
.login-card__input:-webkit-autofill:focus {
	-webkit-text-fill-color: #fff;
	-webkit-box-shadow: 0 0 0 1000px #081526 inset;
	caret-color: #fff;
	transition: background-color 9999s ease-out 0s;
}

.login-card__submit {
	position: relative;
	display: block;
	width: 100%;
	height: clamp(50px, 3.7vw, 71px);
	margin-top: clamp(14px, 1.56vw, 30px);
	font-family: inherit;
	font-size: clamp(16px, 1.25vw, 24px);
	font-weight: var(--font-weight-bold);
	color: #fff;
	background: linear-gradient(90deg, #21DAEA 0%, #009DDC 100%);
	border: 0;
	border-radius: clamp(8px, 0.52vw, 10px);
	text-align: center;
	box-shadow: 0 8px 18px rgba(0, 157, 220, 0.18);
	transition: filter var(--motion-base) var(--motion-easing),
				box-shadow var(--motion-base) var(--motion-easing),
				transform var(--motion-fast) var(--motion-easing);
}

/*
 * Home.js 의 setSubmitting 이 버튼 글자를 .text() 로 갈아 끼운다.
 * 자식 요소를 두면 "연결중..." 이후 사라지므로 화살표는 ::after 로 그린다.
 */
.login-card__submit::after {
	content: "";
	display: inline-block;
	width: clamp(16px, 1.04vw, 20px);
	height: clamp(16px, 1.04vw, 20px);
	margin-left: clamp(8px, 0.73vw, 14px);
	vertical-align: -3px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
}

.login-card__submit:hover:not(:disabled),
.login-card__submit:focus-visible {
	outline: none;
	filter: brightness(1.08);
	box-shadow: 0 12px 26px rgba(0, 157, 220, 0.38);
}

.login-card__submit:active:not(:disabled) {
	transform: translateY(1px);
	box-shadow: 0 5px 14px rgba(0, 157, 220, 0.28);
}

.login-card__submit:disabled {
	cursor: not-allowed;
	opacity: 0.68;
}

/* 보내는 중에는 화살표를 숨긴다. "연결중..." 과 같이 나오면 어색하다. */
.login-card__submit:disabled::after {
	display: none;
}

.login-card__message {
	min-height: 20px;
	margin-top: 14px;
	font-size: 13px;
	font-weight: var(--font-weight-medium);
	line-height: 1.4;
	color: #FF8E8E;
	text-align: center;
	word-break: keep-all;
}

/* ===== 좁은 화면 ======================================================== */

/*
 * 카드를 오른쪽에 붙여 둘 만한 폭이 아니면 가운데로 옮긴다.
 * 배경 그림의 로고는 왼쪽 1/4 지점에 박혀 있는데, 가운데 카드가 그 위를 덮어
 * 글자가 반만 보였다. 자르는 기준을 오른쪽 끝으로 밀어 로고를 화면 밖으로 내보낸다.
 * 남는 쪽은 해지는 하늘과 바다라 카드 바탕으로 쓰기 좋다.
 * 그래도 사진이 밝아 덮개를 한 겹 깔아 글자가 묻히지 않게 한다.
 */
@media (max-width: 1023px) {
	.login-page {
		justify-content: center;
		padding: clamp(24px, 4vh, 40px) clamp(16px, 4vw, 32px);
		background-position: right center;
	}

	/*
	 * 창이 넓고 낮으면 사진이 덜 잘려 로고 끝자락이 왼쪽에 남는다.
	 * 덮개를 왼쪽만 짙게 깔아 남은 글자를 가라앉힌다.
	 */
	.login-page::before {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(90deg, rgba(5, 12, 26, 0.92) 0%, rgba(5, 12, 26, 0.55) 45%, rgba(5, 12, 26, 0.35) 100%);
		pointer-events: none;
	}

	.login-card {
		position: relative;
		z-index: 1;
		width: min(100%, 440px);
	}
}

@media (max-width: 767px) {
	.login-card {
		padding: 24px 20px 20px;
	}

	.login-card__title {
		font-size: 23px;
	}
}