@charset "utf-8";


/* =========================
		   login
========================= */

body { background: #F5F5F5;	}

.login-page {display: flex; align-items: center;justify-content: center;min-height: 100vh;padding: 4rem;}
.login-box {display: flex; width: 100%; max-width: 88rem; background: #fff; border-radius: 2rem; overflow: hidden; box-shadow: 0 0.4rem 2rem rgba(0,0,0,0.05);}

/* visual */
.login-visual { position: relative;	width: 44rem; flex-shrink: 0; background: #ddd;}
.login-visual img {	display: block;	width: 100%; height: 100%; object-fit: cover;}
.login-visual-content { position: absolute; left: 50%; bottom: 5rem; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; text-align: center;}
.login-visual-content .login-visual-logo { display: block; width: 14.6rem; height: auto; flex-shrink: 0;}
.login-visual-text { margin-top: 0.8rem; color: #fff; font-size: var(--font-size-sm); font-weight: 700; white-space: nowrap;		}

/* form */
.login-form-wrap { display: flex; align-items: center; justify-content: center; flex: 1; padding: 6rem 5rem;}
.login-form { width: 100%; max-width: 33.2rem;}
.login-title {	display: flex;	align-items: center; gap: 1.2rem; margin-bottom: 3.2rem;}
.login-title img {	width: auto; height: 3.8rem; object-fit: contain;}
.login-title-text {	font-size: 2.4rem; font-weight: 700;}
.login-input-group { display: flex; flex-direction: column; gap: 1.2rem; }
.login-input { width: 100%;}

/* save id */
.login-check {	margin-top: 1.2rem;	}
.login-check-label { display: inline-flex; align-items: center; gap: 0.8rem; cursor: pointer;}
.login-check-input { position: absolute;	opacity: 0;}
.login-check-box { position: relative; width: 2rem; height: 2rem; border-radius: var(--radius-sm); border: 1px solid var(--form-border);background: #fff; transition: background-color 0.2s ease, border-color 0.2s ease;}
.login-check-box::after {content: ''; position: absolute; top: 50%; left: 50%; width: 1rem; height: 0.6rem; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translate(-50%, -60%) rotate(-45deg); opacity: 0; transition: opacity 0.2s ease;	}
.login-check-input:checked + .login-check-box {	border-color: var(--color-primary);	background: var(--color-primary);}
.login-check-input:checked + .login-check-box::after {opacity: 1;}
.login-check-text {	font-size: var(--font-size-md);}

/* button */
.login-submit {	width: 100%; height: 4.8rem; margin-top: 1.2rem; border-radius: var(--radius-sm); background: var(--color-primary); color: #fff; font-size: var(--font-size-md); font-weight: 600; transition: background-color 0.2s ease; }
.login-submit:hover { background: #386390;}

/* links */
.login-links { display: flex; align-items: center; justify-content: center; gap: 3.2rem; margin-top: 2rem; }
.login-link { position: relative; color: #343434; font-size: var(--font-size-sm); }
.login-link + .login-link::before {	content: ''; position: absolute; top: 50%; left: -1.6rem; width: 1px; height: 1.2rem; background: #D5D5D5; transform: translateY(-50%);}
.login-link:hover {	text-decoration: underline;	}