/* 각 슬라이더 섹션을 감싸는 컨테이너 */
.slider-section {
  width: auto;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 0;
}

/* 메인 타이틀 */
.main-title {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 40px;
  color: #333;
}

.main-title span {
  color: #ba0100;
}

/* Flexbox 레이아웃을 위한 새로운 래퍼 */
.slider-flex-container {
  display: flex;
  align-items: center;
  padding: 0 20px; /* 컨테이너 좌우 여백 */
}

/* Swiper 컨테이너 래퍼 (flex-grow로 공간 차지) */
.swiper-container-wrapper {
  flex: 1;
  min-width: 0; /* Flex 아이템이 줄어들 수 있도록 설정 */
  position: relative;
}

/* 개별 슬라이드 카드 */
.swiper-slide {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}

.swiper-slide:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

/* 비디오 영상 래퍼 (16:9 비율 유지) */
.video-wrapper {
  position: relative;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
  overflow: hidden;
  background-color: #f0f0f0;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #e9ecef;
  color: #868e96;
  font-size: 0.9rem;
}

/* 카드 하단 텍스트 영역 */
.card-content {
  padding: 16px;
  text-align: center;
}

.card-content h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #333;
  margin: 0 0 4px 0;
  line-height: 1.4;
}

.card-content p {
  font-size: 0.875rem;
  color: #555;
  margin: 0;
}

/* Swiper 네비게이션 버튼 커스텀 스타일 */
.swiper-button-next,
.swiper-button-prev {
  position: static !important;
  transform: none;
  margin: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: background-color 0.3s;
}

/* 버튼과 슬라이더 사이의 간격 */
.swiper-button-prev {
  margin-right: 15px;
}
.swiper-button-next {
  margin-left: 15px;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  background-color: #ba0100;
}

.swiper-button-next:hover::after,
.swiper-button-prev:hover::after {
  color: white;
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 16px !important;
  font-weight: 700;
  color: #ba0100;
  transition: color 0.3s;
}

.swiper-button-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.swiper-button-lock {
  display: flex !important;
}

/* 화면이 좁을 때 버튼 숨기기 (터치 슬라이드는 가능) */
@media (max-width: 767px) {
  .swiper-button-next,
  .swiper-button-prev {
    display: none;
  }
  .slider-flex-container {
    padding: 0 15px; /* 모바일에서는 컨테이너 패딩 조정 */
  }
}

/* 4개 미만 슬라이드 중앙 정렬 및 버튼 숨김 처리 */
.slider-flex-container.is-static {
  justify-content: center;
}
.slider-flex-container.is-static .swiper-button-prev,
.slider-flex-container.is-static .swiper-button-next {
  display: none;
}
.slider-flex-container.is-static .swiper-container-wrapper {
  flex: none;
}
.slider-flex-container.is-static .swiper-wrapper {
  display: flex;
  gap: 20px;
}

/* [수정된 부분] 정적 모드일 때 슬라이드 너비 문제 해결 */
.slider-flex-container.is-static .swiper {
  overflow: visible; /* Swiper가 컨텐츠를 자르지 않도록 함 */
}
.slider-flex-container.is-static .swiper-slide {
  width: 250px; /* 각 카드의 너비를 고정값으로 지정 */
  flex-shrink: 0; /* 카드가 찌그러지지 않도록 함 */
}