/* 로그인 페이지 전용 스타일 (data-page="login")
   리뉴얼 공통 토큰(--teal-2 / --ink / --page / --card / --line, main.css :root)을 사용해
   다크모드(.dark-mode)에 자동 대응한다. 720px 캔버스 기준 스케일. */

.lg-wrap {
	--lg-input-bg: #F1F5F9;
	--lg-muted: #64748B;
	--lg-placeholder: #94A3B8;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--page);
}

/* 로고 헤더 */
.lg-head {
	padding: 72px 0 8px;
	text-align: center;
}
.lg-logo {
	display: inline-block;
}
.lg-logo img {
	height: 92px;
	width: auto;
}

/* 본문 */
.lg-main {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	padding: 96px 48px 72px;
}
.lg-guest {
	display: block;
	margin: 28px auto 0;
	text-align: center;
	font-size: 15px;
	color: var(--lg-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.lg-title {
	font-size: 46px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--ink);
	text-align: center;
}
.lg-sub {
	margin: 14px 0 54px;
	font-size: 24px;
	color: var(--lg-muted);
	text-align: center;
}

/* 폼 */
.lg-form {
	display: flex;
	flex-direction: column;
	gap: 26px;
}
.lg-field {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.lg-field label {
	font-size: 24px;
	font-weight: 600;
	color: var(--ink);
}
.lg-input {
	width: 100%;
	padding: 28px;
	font-size: 26px;
	color: var(--ink);
	background: var(--lg-input-bg);
	border: 1.8px solid transparent;
	border-radius: 18px;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.lg-input::placeholder {
	color: var(--lg-placeholder);
}
.lg-input:focus {
	outline: none;
	border-color: var(--teal-2);
	background: var(--card);
}

.lg-inwrap {
	position: relative;
}
.lg-inwrap .lg-input {
	padding-right: 88px;
}
.lg-eye {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
}
.lg-eye img {
	width: 40px;
	height: 40px;
	opacity: 0.55;
}

/* 이메일 저장 체크박스 */
.lg-save {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 4px;
	font-size: 24px;
	color: var(--ink);
	cursor: pointer;
	user-select: none;
}
.lg-save input {
	position: absolute;
	width: 0;
	height: 0;
	opacity: 0;
}
.lg-check {
	flex: none;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--card);
	border: 2px solid var(--line);
	border-radius: 10px;
}
.lg-check img {
	width: 26px;
	opacity: 0;
}
.lg-save input:checked + .lg-check {
	background: var(--teal-2);
	border-color: var(--teal-2);
}
.lg-save input:checked + .lg-check img {
	opacity: 1;
}
.lg-save input:focus-visible + .lg-check {
	outline: 3px solid var(--teal-3);
	outline-offset: 2px;
}

/* 로그인 버튼 */
.lg-submit {
	margin-top: 20px;
	width: 100%;
	padding: 30px;
	font-size: 28px;
	font-weight: 700;
	color: #fff;
	background: var(--teal-2);
	border: none;
	border-radius: 18px;
	cursor: pointer;
	transition: background 0.15s ease;
}
.lg-submit:hover {
	background: var(--teal);
}

/* 유틸 링크 */
.lg-links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
	margin-top: 40px;
}
.lg-links button {
	padding: 6px 2px;
	font-size: 23px;
	color: var(--lg-muted);
	background: none;
	border: none;
	cursor: pointer;
}
.lg-links button:hover {
	color: var(--teal-2);
	text-decoration: underline;
}
.lg-vdiv {
	width: 1.6px;
	height: 22px;
	background: var(--line);
}

/* 구분선 */
.lg-or {
	display: flex;
	align-items: center;
	gap: 22px;
	margin: 50px 0 32px;
	font-size: 22px;
	color: var(--lg-placeholder);
}
.lg-or::before,
.lg-or::after {
	content: "";
	flex: 1 1 auto;
	height: 1.6px;
	background: var(--line);
}

/* SNS 로그인 */
.lg-sns {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.lg-sns-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	width: 100%;
	padding: 28px;
	font-size: 26px;
	font-weight: 700;
	border: none;
	border-radius: 18px;
	cursor: pointer;
}
.lg-sns-ic {
	flex: none;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	font-weight: 800;
	font-style: normal;
	border-radius: 10px;
}
.lg-sns-btn.kakao {
	background: #FEE500;
	color: #191600;
}
.lg-sns-btn.kakao .lg-sns-ic {
	background: #191600;
	color: #FEE500;
}
.lg-sns-btn.naver {
	background: #03C75A;
	color: #fff;
}
.lg-sns-btn.naver .lg-sns-ic {
	background: #fff;
	color: #03C75A;
}

/* 다크모드 보정 (토큰 외 로컬 값만) */
.dark-mode .lg-wrap {
	--lg-input-bg: rgba(255, 255, 255, 0.06);
	--lg-muted: #94A3B8;
}
/* 둘러보기 링크: 다크모드에서 대비 확보 */
.dark-mode .lg-guest {
	color: #CBD5E1;
}