@charset "UTF-8";

/* ============================================================
   로그인 화면 레이아웃. tokens.css 위에 얹는다.
   카드 하나를 회색 바탕 위에 올려서 띄운다 - 그림자는 쓰지 않는다.
   ============================================================ */

.gx-loginpage {
	background: var(--gx-surface);
}

.gx-login {
	flex-grow: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--gx-sp-48) var(--gx-sp-24);
}

.gx-login__col {
	width: 100%;
	max-width: 480px;
	display: flex;
	flex-direction: column;
	gap: var(--gx-sp-32);
}

.gx-login__card {
	background: var(--gx-canvas);
	border: 1px solid var(--gx-border);
	border-radius: var(--gx-r-8);
	overflow: hidden;
}

.gx-login__form {
	display: flex;
	flex-direction: column;
	gap: var(--gx-sp-20);
	padding: var(--gx-sp-32) var(--gx-sp-40) var(--gx-sp-40);
}

.gx-login__title {
	margin-bottom: var(--gx-sp-4);
	font-size: var(--gx-fs-h3);
	font-weight: 700;
	color: var(--gx-text);
}

.gx-login__help {
	font-size: var(--gx-fs-sm);
	color: var(--gx-text-muted);
	text-align: center;
}

/* 로그인 화면에는 상단 바가 없다. 브랜드는 카드 바로 위에 선다 - 화면에서
   가장 먼저 눈에 들어와야 하는 것이 어느 시스템에 로그인하는지이기 때문이다.
   그래서 여기서만 워드마크를 본문 헤더보다 크게 쓴다. */
.gx-login__col .gx-brand__mark {
	width: 126px;
	height: 26px;
}