/**
 * 배너 슬라이드 스타일
 */

.banner-slider {
  position: relative;
  width: 95%; /* 컨테이너 너비를 95%로 설정 */
  margin: 2rem auto;
  margin-bottom: 2.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  border-radius: 16px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e2e8f0 100%);
  overflow: hidden; /* 컨테이너 내에서만 배너가 보이도록 설정 */
  padding: 0;
}

/* 실제로 보여지는 영역 */
.banner-view-window {
  position: relative;
  width: 100%;
  overflow: hidden; /* 컨테이너 내에서만 배너가 보이도록 설정 */
  padding: 10px 0; /* 상하 여백 추가 */
}

.banner-slider-container {
  display: flex;
  transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
  width: fit-content;
  padding: 20px 0;
}

.banner-item {
  position: relative;
  flex: 0 0 auto;
  width: 80%; /* 배너 너비는 JavaScript에서 동적으로 설정됨 - 80%로 변경하여 적절한 크기로 */
  min-height: 300px;
  height: 350px; /* 높이 조정 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 16px;
  margin: 0 2px; /* 좌우 마진을 더 줄여서 배너간 간격을 좁힘 */
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  transform: perspective(800px) rotateX(3deg) scale(0.85);
  transition: all 0.8s ease;
  opacity: 0.5;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* 비활성 배너 클릭 방지 - 활성화된 배너만 JavaScript에서 활성화됨 */
}

/* 활성 배너만 클릭 가능하도록 설정 */
.banner-item.active {
  pointer-events: auto;
}

.banner-item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.banner-controls {
  position: absolute;
  bottom: 20px; /* 하단에서 더 아래로 이동 */
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 15; /* z-index 높임 */
}

.banner-dot {
  width: 12px; /* 크기 키움 */
  height: 12px; /* 크기 키움 */
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  margin: 0 7px; /* 간격 늘림 */
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid rgba(255, 255, 255, 0.8); /* 테두리 추가 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.banner-dot.active {
  background-color: white;
  transform: scale(1.3); /* 더 커지게 */
  border-color: white;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

.banner-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px; /* 크기 키움 */
  height: 50px; /* 크기 키움 */
  background-color: rgba(255, 255, 255, 0.85); /* 배경 더 불투명하게 */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20; /* z-index 높임 */
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.banner-arrow:hover {
  background-color: white;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

.banner-arrow.left:hover {
  transform: translateX(-40%) translateY(-50%) scale(1.1); /* 호버 시 약간 커지면서 더 나오도록 */
  background-color: rgba(255, 255, 255, 0.95);
}

.banner-arrow.right:hover {
  transform: translateX(40%) translateY(-50%) scale(1.1); /* 호버 시 약간 커지면서 더 나오도록 */
  background-color: rgba(255, 255, 255, 0.95);
}

.banner-arrow.left {
  left: 8%; /* 왼쪽에서 8% 위치로 조정 */
  transform: translateX(-50%) translateY(-50%); /* 화살표 버튼 위치 조정 */
  z-index: 20; /* 높은 z-index로 항상 배너 위에 표시 */
}

.banner-arrow.right {
  right: 8%; /* 오른쪽에서 8% 위치로 조정 */
  transform: translateX(50%) translateY(-50%); /* 화살표 버튼 위치 조정 */
  z-index: 20; /* 높은 z-index로 항상 배너 위에 표시 */
}

.banner-link {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  transition: all 0.4s ease;
  transform-style: preserve-3d; /* 3D 효과 유지 */
}

.banner-link:hover {
  transform: translateY(-5px) translateZ(10px);
}

/* 배너 아이템에 호버 효과 추가 */
.banner-item:hover {
  transform: perspective(800px) rotateX(2deg) scale(1.01);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

/* 반응형 배너 높이 조정 */
/* 배너 오버레이 - 디밍 효과 제거하고 필요시에만 사용 */
.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 기본적으로 투명하게 설정하여 오버레이 효과 제거 */
  background: transparent;
  border-radius: 12px;
}

/* 배너 콘텐츠 스타일링 */
.banner-content {
  position: absolute;
  width: 90%; /* 너비를 약간 줄여서 여백 확보 */
  max-width: 800px; /* 최대 너비 제한 */
  z-index: 2;
  padding: 1.8rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* 그림자 약화 */
  /* 기본 위치는 중앙 */
  top: 50%;
  left: 0;
  right: 0;
  margin: 0 auto; /* 중앙 정렬 */
  transform: translateY(-50%);
  transition: all 0.4s ease;
  transform-style: preserve-3d; /* 3D 스타일 적용 */
  perspective: 1000px; /* 원근감 추가 */
  box-sizing: border-box;
}

/* 텍스트 가로 위치 */
.banner-content.text-left {
  text-align: left !important;
  padding-left: 60px !important; /* 좌측 패딩 더 넓게 */
  padding-right: 20px !important; /* 오른쪽 약간 여백 */
  left: 0 !important;
  right: auto !important;
  width: 70% !important; /* 너비 제한 */
}

.banner-content.text-center {
  text-align: center !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 auto !important;
  width: 80% !important; /* 너비 제한 */
}

.banner-content.text-right {
  text-align: right !important;
  padding-right: 60px !important; /* 우측 패딩 더 넓게 */
  padding-left: 20px !important; /* 왼쪽 약간 여백 */
  left: auto !important;
  right: 0 !important;
  width: 70% !important; /* 너비 제한 */
}

/* 텍스트 세로 위치 */
.banner-content.text-top {
  top: 40px !important; /* 상단 여백 더 넓게 */
  bottom: auto !important;
  transform: none !important;
}

.banner-content.text-middle {
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
}

.banner-content.text-bottom {
  top: auto !important;
  bottom: 40px !important; /* 하단 여백 더 넓게 */
  transform: none !important;
}

.banner-title {
  font-weight: 700;
  margin-bottom: 0.8rem;
  font-size: 2.5rem;
  transform: translateZ(30px); /* 더 강한 3D 효과 */
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); /* 그림자 약화 */
  line-height: 1.2;
  transition: all 0.4s ease;
  color: inherit; /* 부모에서 설정된 color 상속 */
}

.banner-subtitle {
  font-size: 1.2rem;
  opacity: 0.95;
  transform: translateZ(20px); /* 더 강한 3D 효과 */
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); /* 그림자 약화 */
  line-height: 1.4;
  margin-top: 0.5rem;
  transition: all 0.4s ease;
  color: inherit; /* 부모에서 설정된 color 상속 */
}

/* 배너 내용물에 호버 효과 추가 */
.banner-item:hover .banner-title {
  transform: translateZ(40px);
}

.banner-item:hover .banner-subtitle {
  transform: translateZ(30px);
}

/* PC 전용 배너 스타일 (모바일에서는 숨겨짐) */
@media (min-width: 769px) {
  /* 기존 모든 배너 스타일이 PC에서만 적용됨 */
}