@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");

/* Reset */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html,
body {
	font-family: "Pretendard", -apple-system, BlinkMacSystemFont,
		"Segoe UI", sans-serif;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	color: #082d52;

	background:
		radial-gradient(
			circle at 30% 35%,
			rgba(255, 255, 255, 1) 0%,
			rgba(247, 250, 253, 0.96) 38%,
			rgba(238, 244, 249, 1) 100%
		);
	background-size: 140% 140%;
	animation: backgroundMove 18s ease-in-out infinite alternate;
	overflow: hidden;
}

/* 전체 화면 */
.landing {
	width: 100%;
	min-height: 100vh;
	min-height: 100dvh;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 40px 24px;
}

/* 중앙 콘텐츠 */
.content {
	width: 100%;
	max-width: 900px;

	display: flex;
	flex-direction: column;
	align-items: center;

	text-align: center;

	transform: translateY(-2vh);

	animation: fadeIn 1.2s ease-out both;
}

/* 로고 */
.logo {
	margin: 0 0 46px;
}

.logo img {
	display: block;

	width: min(340px, 49vw);
	max-height: 180px;
	height: auto;

	object-fit: contain;

	margin: 0 auto;
}

/* 구분선 */
.divider {
	width: 72px;
	height: 1px;

	background: rgba(8, 45, 82, 0.45);

	margin-bottom: 38px;

	animation: lineGrow 1.1s ease-out 0.4s both;
}

/* 메인 문구 */
.message {
	display: flex;
	flex-direction: column;

	font-weight: 400;

	font-size: clamp(28px, 2.5vw, 32px);
	line-height: 1.05;

	letter-spacing: -0.035em;

	color: #062f59;

	animation: textUp 1s ease-out 0.25s both;
}

.message span {
	display: block;
}

.message span:first-child {
	margin-bottom: 2px;
}

/* 태블릿 */
@media (max-width: 768px) {

	.landing {
		padding: 32px 22px;
	}

	.content {
		transform: translateY(-1vh);
	}

	.logo {
		margin-bottom: 34px;
	}

	.logo img {
		width: min(290px, 55vw);
	}

	.divider {
		width: 58px;
		margin-bottom: 30px;
	}

	.message {
		font-size: clamp(38px, 8vw, 58px);
	}
}

/* 모바일 */
@media (max-width: 480px) {

	.landing {
		padding: 28px 20px;
	}

	.logo {
		margin-bottom: 28px;
	}

	.logo img {
		width: min(240px, 62vw);
	}

	.divider {
		width: 48px;
		margin-bottom: 26px;
	}

	.message {
		font-size: clamp(34px, 10vw, 46px);
		line-height: 1.08;
		letter-spacing: -0.025em;
	}
}

/* 아주 작은 화면 */
@media (max-width: 360px) {

	.logo img {
		width: min(210px, 65vw);
	}

	.message {
		font-size: 32px;
	}
}

/* 부드러운 등장 효과 */
@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes textUp {
	from {
		opacity: 0;
		transform: translateY(18px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes lineGrow {
	from {
		width: 0;
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* Footer */
.footer {
	position: fixed;
	left: 0;
	bottom: 0;

	width: 100%;
	padding: 0 24px 28px;

	text-align: center;

	color: rgba(6, 47, 89, 0.55);

	z-index: 10;

	animation: footerFade 1.2s ease-out 0.7s both;
}

.footer-info {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;

	gap: 12px;

	font-family: "Pretendard", -apple-system, BlinkMacSystemFont,
		"Segoe UI", sans-serif;

	font-size: 13px;
	font-weight: 400;

	letter-spacing: -0.01em;
}

.footer a {
	color: inherit;
	text-decoration: none;

	transition: color 0.25s ease;
}

.footer a:hover {
	color: #062f59;
}

.separator {
	display: block;

	width: 1px;
	height: 11px;

	background: rgba(6, 47, 89, 0.25);
}

.copyright {
	margin-top: 10px;

	font-family: "Pretendard", -apple-system, BlinkMacSystemFont,
		"Segoe UI", sans-serif;

	font-size: 11px;
	font-weight: 400;

	letter-spacing: 0.08em;

	color: rgba(6, 47, 89, 0.35);
}

/* Footer 등장 효과 */
@keyframes footerFade {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 모바일 */
@media (max-width: 600px) {
	.footer {
		padding: 0 18px 20px;
	}

	.footer-info {
		flex-direction: column;
		gap: 5px;

		font-size: 12px;
		line-height: 1.5;
	}

	.separator {
		display: none;
	}

	.copyright {
		margin-top: 8px;
		font-size: 10px;
	}
}

/* 모션 최소화 설정 사용자 대응 */
@media (prefers-reduced-motion: reduce) {

	.content,
	.message,
	.divider {
		animation: none;
	}
}

@keyframes backgroundMove {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 45%; } 
	100% { background-position: 35% 100%; } 
}