/* 0. 캐러셀과 버튼을 감싸는 wrapper (버튼 위치의 기준점) */
.carousel-wrapper {
	position: relative;
	width: 300px; /* 이미지 컨테이너의 너비 */
	height: 400px; /* 이미지 컨테이너의 높이 */
}

/* 1. 캐러셀 컨테이너 (슬라이드가 겹치는 영역) */
.carousel-container {
	width: 300px;
	height: 400px;
	overflow: visible; /* 슬라이드가 살짝 튀어나오도록 허용 */
}

/* 2. 슬라이드 공통 스타일 */
.carousel-slide {
	width: 300px;
	height: 400px;
	
	position: absolute; 
	top: 0;
	left: 0;
	opacity: 1; /* 기본적으로 거의 숨김 (전환 시 매끄러움을 위해 0 대신 작은 값 사용) */
	
	/* 💡 배경 이미지 관련 속성: 높이가 달라도 div를 꽉 채우고 중앙 정렬 */
	background-repeat: no-repeat; 
	background-position: top center; 
	background-size: cover; 
	
	transition: 
		transform 0.6s ease-in-out, 
		opacity 0.6s ease-in-out, 
		left 0.6s ease-in-out, 
		z-index 0.1s step-end; /* z-index는 애니메이션 끝에만 변경 */
	
	border-radius: 8px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
	cursor: pointer;
}

.slide-bg {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.slide-caption {
  position: absolute;
  bottom: 20px;
  left: 30px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 1rem;
  backdrop-filter: blur(2px);
}

/* 3. 슬라이드 상태 (3D 효과) */

/* 중앙 슬라이드: 가장 크고, 가장 앞 (z: 10) */
.active {
	opacity: 1;
	transform: scale(1);
	z-index: 10; 
	left: 0;
}

/* 왼쪽/오른쪽 슬라이드: 작게, 뒤로 (z: 5) */
.prev, .next {
	opacity: 0.9; /* 중앙 이미지 뒤에서 흐릿하게 보이도록 */
	transform: scale(0.8); /* 80% 크기로 축소 */
	z-index: 5; 
}

/* 왼쪽 슬라이드 위치 */
.prev {
	left: -150px; 
}

/* 오른쪽 슬라이드 위치 */
.next {
	left: 150px; 
}


/* 4. 버튼 스타일링 (캐러셀 바깥으로 이동) */
.prev-button, .next-button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background-color: #333;
	color: white;
	border: none;
	padding: 10px 15px; 
	cursor: pointer;
	z-index: 20; 
	opacity: 0.3;
	transition: opacity 0.3s, background-color 0.3s;
	border-radius: 4px;
}

.prev-button:hover, .next-button:hover {
	opacity: 0.5;
	background-color: #000;
}

/* 버튼을 .carousel-wrapper 바깥으로 이동 */
.prev-button { 
	left: -150px; 
}
.next-button { 
	right: -150px; 
}

@media (max-width: 768px) {

	.carousel-wrapper {
		width: 350px; /* 이미지 컨테이너의 너비 */
		height: 450px; /* 이미지 컨테이너의 높이 */
	}

	/* 1. 캐러셀 컨테이너 (슬라이드가 겹치는 영역) */
	.carousel-container {
		width: 350px;
		height: 450px;
	}

	.carousel-slide {
		width: 350px;
		height: 450px;
		border-radius: 0px;
		box-shadow: none;
	}

	.prev-button { 
		left: 0px; 
	}
	.next-button { 
		right: 0px; 
	}

	/* 왼쪽 슬라이드 위치 */
	.prev {
		left: -0px; 
		transform: scale(1);
	}

	/* 오른쪽 슬라이드 위치 */
	.next {
		left: 0px; 
		transform: scale(1);
	}

}