/* Main Container */
.slider-container {
  width: 100%;
  max-width: 1400px;
  background-color: #ffffff;
  /* border-radius: 12px; */
  /* box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); */
  overflow: hidden;
  /* border: 1px solid #e0e0e0; */
}

/* Top Tab Menu */
.tabs {
  display: flex;
  list-style: none;
  /* border-bottom: 1px solid #ddd; */
}

.tab-item {
  flex: 1;
  padding: 12px 10px;
  text-align: center;
  cursor: pointer;
  background-color: #f9f9f9;
  color: #555;
  transition: background-color 0.3s, color 0.3s;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.tab-item:not(:last-child) {
  border-right: 1px solid #eee;
}

.tab-item:hover {
  /* background-color: #eef5ff; */
  background-color: #2656f6;
}

.tab-item:hover .tab-subtitle,
.tab-item:hover .tab-maintitle {
  /* color: #0056b3; */
  color: #fff;
}

.tab-item.active {
  /* background-color: #fff; */
  background-color: #2656f6;
}

.tab-item.active .tab-subtitle {
  /* color: #007bff; */
  color: #fff;
}

.tab-item.active .tab-maintitle {
  color: #fff;
  font-weight: 700;
}

.tab-item.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #007bff;
}

.tab-subtitle {
  font-size: 14px;
  color: #666;
  font-weight: 400;
  margin-bottom: 4px;
}

.tab-maintitle {
  font-size: 18px;
  font-weight: 600;
}

/* Bottom Content Area */
.content-wrapper {
  position: relative;
  min-height: 450px; /* 고정 높이 확보로 레이아웃 깨짐 방지 */
}

.content-pane {
  display: none; /* Hide all content by default */
}

.content-pane.active {
  display: block; /* Show only active content */
}

/* Inner Image Slider */
.inner-slider {
  position: relative;
  width: 100%;
  overflow: hidden; /* Hide images outside the slider area */
}

.slide-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.slide-image-wrapper {
  width: 100%;
  flex-shrink: 0;
  aspect-ratio: 16 / 9; /* Maintain image aspect ratio */
  background-color: #eee;
}

.slide-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Inner Slider Left/Right Buttons */
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* background-color: rgba(0, 0, 0, 0.4); */
  background-color: #86b2cd;
  color: white;
  border: none;
  width: 60px;
  height: 60px;
  cursor: pointer;
  /* font-size: 24px; */
  border-radius: 50%;
  z-index: 10;
  opacity: 1; /* 수정: 버튼이 항상 표시되도록 opacity를 1로 변경 */
  transition: background-color 0.3s; /* opacity 전환 효과 제거 */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* .inner-slider:hover .slider-btn 규칙을 삭제하여 호버와 관계없이 버튼이 보이도록 함 */

.slider-btn:hover {
  background-color: rgba(0, 0, 0, 0.6);
}

.prev-btn {
  left: 15px;
}

.next-btn {
  right: 15px;
}