.auth-shell {
	flex: 1 1;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	row-gap: 0;
	width: 100%;
	height: auto;
	/* 뷰포트 기준 높이를 확보해 메인 영역이 푸터를 하단으로 민다 */
	min-height: 100dvh;

	padding: 0;
	margin: 0 auto;

	/* background-color: var(--background); */
}

.main {
	/* 인증 화면 본문도 기본 콘텐츠 레이어를 따른다. */
	z-index: var(--z-body);
	flex: 1;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0;

	width: 100%;
	min-height: 0;
	height: 100%;

	background: var(--white);

	overflow-x: hidden;
	overflow-y: visible;
}

.auth-card {
	display: block;

	max-width: 28rem;
	width: 100%;
	height: auto;

	padding: 1rem;
	margin: 0 auto;
	border-radius: var(--rounded);

	background: var(--field);
}

.auth-brand {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1.25rem;

	margin-bottom: 1.25rem;
}

.auth-logo {
	font-size: 0;
}

.auth-logo img {
	width: auto;
	height: 3.75rem;
	aspect-ratio: 1/1;
}

.auth-title {
	display: block;
	width: 100%;

	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 600;
	text-align: center;

	color: var(--text);
}

.auth-tagline {
	color: var(--blue-gray-600);
	word-break: keep-all;
}

.auth-tagline.highlight {
	color: var(--primary);
	font-weight: 600;
}

@media (min-width: 768px) {
	.main {
		background: var(--surface-soda);
	}
	.auth-brand {
		gap: 20px;

		margin-bottom: 2rem;
	}

	.auth-card {
		min-height: 37.5rem;
		max-height: 56.25rem;
		padding: 2.5rem 1.5rem;
		box-shadow: var(--shadow);
	}

	.auth-title {
		font-size: 1.5rem;
		line-height: 2.125rem;
	}
}

@media (min-width: 1280px) {
	.main {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
	}
}