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

body {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	font-family: 'NanumSquareNeo', sans-serif;
}
		
/* 인트로 컨테이너 - 이중 배경 처리 - 20250718 함매니저님 요청 */
.intro {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 블러 처리된 배경 (뒤) */
.intro::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('../../main/assets/images/intro_background.jpg') no-repeat center center;
	background-size: cover;
	filter: blur(20px);
	transform: scale(1.1);
	z-index: -2;
}

/* 선명한 배경 (앞) - 수정됨: 좌우 꽉차고 하단 정렬 */
.intro::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('../../main/assets/images/intro_background.jpg') no-repeat center bottom;
	background-size: cover; /* contain에서 cover로 변경 - 좌우 꽉 차게 */
	z-index: -1;
}

/* 스케일 래퍼 추가 */
.scale-wrapper {
	position: absolute;
	bottom: 5%; /* 기본값 */
	left: 50%;
	transform: translateX(-50%) scale(var(--scale, 1));
	transform-origin: center bottom;
}

/* 입장 버튼 박스 */
.enter_btn {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 32px;
	padding: 32px 90px;
	border-radius: 68px;
	background-color: rgba(255, 255, 255, 0.9);
	max-width: 95vw;
	animation: fadeInUp 0.8s ease-out;
	position: relative;
}

/* 로고 영역 */
.enter_logo {
	display: flex;
	align-items: center;
	justify-content: center;
}

.enter_logo img {
	width: auto;
	height: auto;
	max-width: 100%;
}

/* 입장 버튼 */
.water_btn {
	cursor: pointer;
	border: none;
	padding: 0;
	background: none;
	text-decoration: none;
	display: inline-block;
	transition: transform 0.3s ease, filter 0.3s ease;
	position: relative;
	z-index: 2;  
}

.water_btn:hover {
	transform: translateY(-3px);
	filter: brightness(1.1);
}

.water_btn:active {
	transform: translateY(-1px);
}

.water_btn img {
	width: auto;
	height: auto;
	max-width: 100%;
	display: block;
}

/* enter_btn에 position: relative 추가 */
.enter_btn {
	position: relative; /* 캐릭터의 절대 위치 기준점 */
}

/* 캐릭터 스타일 */
.intro-character {
	position: absolute;
	left: -290px;
	top: 35%;
	transform: translateY(-50%);
	z-index: 1;
}
/* PC - 기본 이미지 크기 */
.intro-character img {
	width: 552px;
	height: auto;
	display: block;
}

/* 페이드인 애니메이션 */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 모바일 반응형 */
@media screen and (max-width: 768px) {
	.intro {
		height: 100vh;
		height: -webkit-fill-available;
	}
	/* 모바일에서도 동일하게 좌우 꽉차고 하단 정렬 */
	.intro::after {
		background-size: cover;
		background-position: center bottom;
	}
	
	.scale-wrapper {
		transform: translateX(-50%) !important; /* scale 제거, translateX만 유지 */
		bottom: 20px; /* 모바일에서는 고정 픽셀값 */
	}
	
	.enter_btn {
		max-width: 320px;
		padding: 24px 52.5px;
		width: 95vw;
		border-radius: 48px;
		gap: 24px;
	}
	
	.enter_logo img,
	.water_btn img {
		width: 100%;
	}
	.intro-character {
		left: -18px;
		top: -103px;
		transform: translateY(0); /* 중앙 정렬 해제 */
	}
	
	.intro-character img {
		width: 180px;
		content: url('../../main/assets/images/intro-character-mo.png'); /* 모바일 이미지로 변경 */
	}
}

/* 작은 모바일 */
@media screen and (max-width: 480px) {
	.enter_btn {
		padding: 20px 40px;
		gap: 20px;
	}
}