/* =========================
 * Auth (login/signup)
 * ========================= */

/* 기본(auth 공통) */
.auth{
	min-height: calc(100vh - var(--header-h));
	display:flex;
	align-items: flex-start;
	justify-content:center;
	padding: 18px 10px;
}
.auth-card{
	width: 100%;
	max-width: 520px;
	border: 1px solid #e5e7eb;
	border-radius: 18px;
	background: rgba(255,255,255,0.92);
	box-shadow: 0 18px 40px rgba(15,23,42,0.10);
	backdrop-filter: blur(8px);
	padding: 18px 16px;
	margin-top: 18px;
}
.auth-head{ margin-bottom: 10px; }
.auth-title{
	margin:0;
	font-size: 22px;
	font-weight: 900;
	letter-spacing: -0.2px;
}
.auth-sub{
	margin: 6px 0 0 0;
	color:#64748b;
	font-size: 13px;
	line-height: 1.5;
}
.auth-msg{
	margin: 10px 0 0 0;
	padding: 10px 12px;
	border-radius: 12px;
	background: rgba(254,226,226,0.75);
	border: 1px solid rgba(248,113,113,0.35);
	color: #b91c1c;
	font-weight: 800;
	font-size: 13px;
}
.auth-form{ margin-top: 14px; }
.field{ margin-top: 12px; }
.label{
	display:block;
	margin: 0 0 6px 0;
	font-size: 12px;
	font-weight: 900;
	color:#0f172a;
}
.input{
	width:100%;
	padding: 12px 12px;
	border: 1px solid #d1d5db;
	border-radius: 12px;
	background: #fff;
	font-size: 14px;
	outline: none;
}
.input:focus{
	border-color: rgba(124,58,237,0.55);
	box-shadow: 0 0 0 3px rgba(124,58,237,0.12);
}
.auth-row{
	display:flex;
	align-items:center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 12px;
}
.chk{
	display:flex;
	align-items:center;
	gap: 8px;
	font-size: 13px;
	color:#0f172a;
	font-weight: 800;
}
.chk input{ width: 16px; height: 16px; }
.auth-link{
	color:#7c3aed;
	text-decoration:none;
	font-weight: 900;
	font-size: 13px;
}
.auth-link:hover{ text-decoration: underline; }

.btn-primary{
	margin-top: 14px;
	width:100%;
	padding: 12px 12px;
	border: 0;
	border-radius: 14px;
	cursor:pointer;
	background: linear-gradient(135deg, #0f172a, #1f2937);
	color:#fff;
	font-weight: 900;
	display:flex;
	align-items:center;
	justify-content:center;
	gap: 10px;
}
.btn-primary:disabled{
	opacity: 0.7;
	cursor: not-allowed;
}
.btn-spinner{
	width: 16px;
	height: 16px;
	border-radius: 999px;
	border: 2px solid rgba(255,255,255,0.35);
	border-top-color: rgba(255,255,255,0.95);
	animation: authspin 0.8s linear infinite;
}
@keyframes authspin{ to { transform: rotate(360deg); } }

.auth-noscript{
	margin-top: 10px;
	color:#64748b;
	font-size: 12px;
}

.auth-divider{
	margin: 14px 0;
	display:flex;
	align-items:center;
	gap: 10px;
	color:#94a3b8;
	font-size: 12px;
	font-weight: 900;
}
.auth-divider::before,
.auth-divider::after{
	content:"";
	flex:1;
	height: 1px;
	background: #e5e7eb;
}
.auth-divider span{ white-space: nowrap; }

.social{
	display:grid;
	grid-template-columns: 1fr;
	gap: 10px;
}
.btn-social{
	display:flex;
	align-items:center;
	justify-content:center;
	padding: 12px 12px;
	border-radius: 14px;
	text-decoration:none;
	font-weight: 900;
	border: 1px solid #e5e7eb;
}
.btn-naver{
	background: #03c75a;
	color:#fff;
	border-color: rgba(3,199,90,0.35);
}
.btn-kakao{
	background: #fee500;
	color:#111827;
	border-color: rgba(254,229,0,0.35);
}
.auth-foot{
	margin-top: 14px;
	display:flex;
	justify-content:center;
	gap: 8px;
	color:#64748b;
	font-size: 13px;
	font-weight: 700;
}


/* =========================
 * Login page layout fix
 * - 스크롤 제거
 * - 메인영역 정중앙 배치
 * - 배경 고급화
 * ========================= */

/* 1) 로그인 페이지에서만 메인 영역을 중앙정렬 */
.page-login .page-main{
	min-height: calc(100vh - var(--header-h, 0px));
	display: flex;
	align-items: center;
	justify-content: center;

	/* 스크롤 유발하는 여백 제거 */
	padding: 0 !important;

	/* 로그인 페이지는 화면 내에서 완결 */
	overflow: hidden;
}

/* 2) 배경: 은은한 그라데이션 */
.page-login .page-main{
	background:
		radial-gradient(900px 500px at 30% 20%, rgba(124,58,237,0.12), transparent 60%),
		radial-gradient(900px 500px at 75% 55%, rgba(15,23,42,0.10), transparent 60%),
		linear-gradient(180deg, rgba(248,250,252,1), rgba(241,245,249,1));
}

/* 3) auth 래퍼: padding/margin-top 제거(스크롤 원인 제거) */
.page-login .auth{
	min-height: auto;
	padding: 0;
	align-items: center;
	justify-content: center;
}

/* 4) 카드: 더 고급스럽게 + 덩그러니 느낌 완화 */
.page-login .auth-card{
	width: min(520px, calc(100% - 24px));
	max-width: none;          /* 위에서 width로 제어 */
	margin: 0;
	padding: 20px 18px;

	border-radius: 22px;
	border: 1px solid rgba(226,232,240,0.9);
	background: rgba(255,255,255,0.92);
	box-shadow:
		0 24px 70px rgba(15,23,42,0.12),
		0 2px 10px rgba(15,23,42,0.06);
	backdrop-filter: blur(10px);
}

/* 5) 타이포 미세 조정 */
.page-login .auth-title{
	font-size: 24px;
	letter-spacing: -0.4px;
}
.page-login .auth-sub{
	font-size: 13px;
}

/* 6) 입력/버튼 라운드/간격 정리 */
.page-login .input{
	border-radius: 14px;
	padding: 13px 12px;
}
.page-login .btn-primary{
	border-radius: 16px;
	padding: 13px 12px;
}

/* 7) 낮은 높이 화면에서 여백 축소 */
@media (max-height: 780px){
	.page-login .auth-card{ padding: 16px 14px; }
	.page-login .auth-title{ font-size: 22px; }
}

/* 8) (옵션) 카드가 너무 작게 느껴지면 주석 해제
.page-login .auth-card{
	width: min(560px, calc(100% - 24px));
}
*/