/* 슬라이더 전체 영역 */
.interior-slider-section {
	position: relative;
	width: 100%;
	padding: 60px 0;
	overflow: hidden; /* 영역 밖으로 나가는 슬라이드 숨김 */
}

/* Swiper 컨테이너 */
.interior-swiper {
	width: 100%;
}

/* 개별 슬라이드 설정 (가운데 슬라이드 기준 너비) */
.interior-swiper-slide {
	width: 90%; /* PC 환경에서 화면의 70% 차지, 양옆 15%씩 노출 */
	max-width: 1400px;
	height: 50vw;
	max-height: 800px;
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: cover;
	background-position: center;
	/* 비활성 슬라이드 살짝 투명하게 처리 (원치 않으면 제거) */
	opacity: 0.5;
	transition: opacity 0.4s ease, transform 0.4s ease;
}

/* 활성화된 (가운데) 슬라이드 */
.interior-swiper-slide.swiper-slide-active {
	opacity: 1;
}

/* =========================================
내비게이션 버튼 (핵심 포지셔닝)
========================================= */
/* 활성 슬라이드와 동일한 너비를 가지는 버튼 래퍼 */
.interior-btn-wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 70%; /* .interior-swiper-slide 의 width와 동일하게 설정! */
	max-width: 1200px;
	z-index: 10;
	pointer-events: none; /* 래퍼 자체가 슬라이드 터치를 방해하지 않도록 함 */
}

/* 개별 버튼 공통 스타일 */
.interior-swiper-button-prev,
.interior-swiper-button-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 56px;
	height: 56px;
	background-color: rgba(247, 148, 28, 0.9); /* 첨부 이미지와 비슷한 버튼 색상 */
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	pointer-events: auto; /* 버튼 부분만 클릭 가능하게 복구 */
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
	transition: background-color 0.2s;
}

.interior-swiper-button-prev:hover,
.interior-swiper-button-next:hover {
	background-color: rgba(247, 148, 28, 1);
}

/* 버튼 위치: 가운데 슬라이드 양쪽 테두리에 반씩 걸치도록 설정 (-28px은 버튼 너비의 절반) */
.interior-swiper-button-prev {
	left: -130px;
}

.interior-swiper-button-next {
	right: -130px;
}

/* 화살표 아이콘 (Swiper 기본 폰트 아이콘 활용) */
.interior-swiper-button-prev::after,
.interior-swiper-button-next::after {
	font-family: swiper-icons;
	font-size: 20px;
	color: #fff;
}
.interior-swiper-button-prev::after { content: 'prev'; }
.interior-swiper-button-next::after { content: 'next'; }


/* =========================================
반응형 (태블릿 & 모바일)
========================================= */
@media (max-width: 1024px) {
	.interior-swiper-slide { width: 80%; }
	.interior-btn-wrapper { width: 80%; } /* 슬라이드 너비 변경 시 래퍼 너비도 동일하게 변경 */
}

@media (max-width: 768px) {
	.interior-swiper-slide {
		width: 85%;
		height: 60vw;
	}
	.interior-btn-wrapper {
		width: 85%;
	}
	/* 모바일에서는 버튼 크기를 살짝 줄임 */
	.interior-swiper-button-prev,
	.interior-swiper-button-next {
		width: 44px;
		height: 44px;
	}
	.interior-swiper-button-prev { left: -22px; }
	.interior-swiper-button-next { right: -22px; }

	.interior-swiper-button-prev::after,
	.interior-swiper-button-next::after {
		font-size: 16px;
	}
}