@charset "utf-8";

/* ==================================================
	RESET
================================================== */
* {
	box-sizing: border-box;
}

html,
body {
	width: 100%;
	min-height: 100%;
	margin: 0;
}

body {
	overflow-x: hidden;
	background: #fff;
	color: #111;
	font-family:
		Pretendard,
		"Apple SD Gothic Neo",
		"Malgun Gothic",
		Arial,
		sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


/* ==================================================
	RENEWAL PAGE
================================================== */
.renewal_page {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 100vh;
	min-height: 100svh;
	padding: 40px 24px;
	background: #fff;
}

.renewal_content {
	width: 100%;
	text-align: center;
	transform: translateY(-4.5vh);
}

.renewal_logo {
	width: min(545px, 78vw);
	margin: 0 auto;
	font-size: 0;
	line-height: 0;
}

.renewal_logo img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
}

.renewal_message {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	margin: 52px 0 0;
	color: #111;
	font-size: clamp(24px, 2vw, 38px);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.055em;
	word-break: keep-all;
}

.renewal_message strong {
	color: #ed1c24;
	font: inherit;
}


/* ==================================================
	TABLET / MOBILE
================================================== */
@media (max-width: 768px) {
	.renewal_page {
		padding: 32px 20px;
	}

	.renewal_content {
		transform: translateY(-3vh);
	}

	.renewal_logo {
		width: min(430px, 86vw);
	}

	.renewal_message {
		max-width: 520px;
		margin: 38px auto 0;
		font-size: clamp(21px, 5.4vw, 30px);
		line-height: 1.5;
	}
}

@media (max-width: 520px) {
	.renewal_content {
		transform: translateY(-2vh);
	}

	.renewal_logo {
		width: min(340px, 88vw);
	}

	.renewal_message {
		display: block;
		max-width: 330px;
		margin-top: 30px;
		font-size: clamp(20px, 5.7vw, 25px);
	}

	.renewal_message strong {
		white-space: nowrap;
	}
}


/* ==================================================
	낮은 높이의 가로 화면
================================================== */
@media (max-height: 560px) and (orientation: landscape) {
	.renewal_page {
		padding-top: 24px;
		padding-bottom: 24px;
	}

	.renewal_content {
		transform: none;
	}

	.renewal_logo {
		width: min(360px, 55vw);
	}

	.renewal_message {
		margin-top: 24px;
		font-size: clamp(20px, 2.5vw, 28px);
	}
}