/* =========================================
   1. 기본 레이아웃 및 폰트 설정
   ========================================= */
/*#tranding {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

@media (min-width: 1440px) {
  #tranding { zoom: 1.5; }
}
@media (min-width: 2560px) {
  #tranding { zoom: 1.7; }
}
@media (min-width: 3860px) {
  #tranding { zoom: 2.5; }
}*/

.container {
  max-width: 110rem;
  padding: 0 1rem;
  margin: 0 auto;
}

.text-center {
  text-align: center;
}

.section-heading {
  font-size: 3rem;
  color: var(--primary);
  padding: 2rem 0;
}

#tranding {
  padding: 0;
}

/* =========================================
   2. 슬라이더 영역 (이미지 크기 등)
   ========================================= */
#tranding .tranding-slider {
  height: 39.5rem;
  padding: 2.5rem 0 1.5rem 0;
  position: relative;
  /* overflow: hidden;  <-- 혹시 이 속성이 있다면 주석 처리하거나 지워주세요. 화살표가 잘릴 수 있습니다. */
}

@media (max-width:500px) {
  #tranding .tranding-slider {
    height: 26.5rem;
  }
}

.tranding-slide {
  width: 32rem;
  height: 32rem;
  position: relative;
}

@media (max-width:500px) {
  .tranding-slide { 
    max-width:100%;
    width: 100% !important;
    height: 100% !important;
  }
  .tranding-slide .tranding-slide-img img {
    width: 100% !important;
    height: 100% !important;
  }
}

.swiper-slide-active .tranding-slide-img img {
  box-shadow: 0px 0px 20px rgba(0,0,0,0.3); 
  border-radius: 0px !important; 
}

.tranding-slide .tranding-slide-img img { 
  vertical-align: top;
  width: 32rem;
  height: 32rem;
  border-radius: 0rem;
  object-fit: cover;
}

.tranding-slide .tranding-slide-content {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.tranding-slide-content .tranding-slide-content-bottom {
  position: absolute; 
  font-size: 14px; 
  color: #333;
  bottom: 2rem;
  left: 2rem; 
  padding: 3px 12px; 
  background: rgba(255,255,255,0.8); 
}

.swiper-slide-shadow-left,
.swiper-slide-shadow-right {
  display: none;
}

/* =========================================
   3. 컨트롤러 (화살표 + 페이지네이션) - 수정 완료
   ========================================= */

/* 1. 투명 덮개 레이어 설정 */
.tranding-slider-control {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* 슬라이더 전체를 덮음 */
  
  display: flex;
  align-items: flex-end; /* 점들을 바닥으로 */
  justify-content: center; /* 좌우 중앙 정렬 */
  padding-bottom: 2.5rem; 
  
  z-index: 100;
  pointer-events: none; /* 슬라이드 클릭 가능하게 배경 통과 */
}

/* 2. 페이지네이션 (점들) - 수정됨 */
.tranding-slider-control .swiper-pagination {
  position: relative !important;
  
  /* ▼ [핵심 수정] width: auto를 지우고 고정 너비를 줍니다. ▼ */
  /* 계산식: (점크기 8px + 여백 10px) * 5개 = 110px */
  width: 90px !important; 
  
  /* 양옆의 넘치는 점들을 깔끔하게 잘라냅니다 */
  overflow: hidden !important; 
  
  margin: 0 !important;
  
  /* 위치 강제 속성 초기화 */
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  
  z-index: 101;
  pointer-events: auto;
}

/* 점 디자인 */
.tranding-slider-control .swiper-pagination .swiper-pagination-bullet {
  opacity: 0.5;
  background: #fff; /* 점 색상 */
  margin: 0 5px !important;
  width: 8px;
  height: 8px;
}

.tranding-slider-control .swiper-pagination .swiper-pagination-bullet-active {
  opacity: 1;
  background: #fff;
  transform: scale(1.2);
}

/* 3. 화살표 공통 설정 (디자인 강화) */
.tranding-slider-control .swiper-button-prev,
.tranding-slider-control .swiper-button-next {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 102;
  
  width: 3.5rem;
  height: 3.5rem;
  
  /* [중요] 화살표가 보이도록 배경과 색상을 강제로 지정 */
  background: #fff; 
  color: #333; 
  border-radius: 50%; /* 둥근 버튼 */
  box-shadow: 0 4px 8px rgba(0,0,0,0.15); /* 그림자 추가 */
  
  /* 아이콘 정렬 */
  display: flex;
  align-items: center;
  justify-content: center;
  
  pointer-events: auto; /* 클릭 가능 */
}

/* 화살표 아이콘 크기 강제 지정 (::after 사용 시) */
.tranding-slider-control .swiper-button-prev::after,
.tranding-slider-control .swiper-button-next::after {
  font-size: 1.5rem;
  font-weight: bold;
}

/* 화살표 위치: 중앙 이미지(32rem) 바로 옆 (19rem 거리) */
.tranding-slider-control .swiper-button-prev {
  left: calc(50% - 19rem) !important;
  right: auto !important;
}

.tranding-slider-control .swiper-button-next {
  right: calc(50% - 19rem) !important;
  left: auto !important;
}

/* =========================================
   4. 반응형 설정 (화살표 이탈 방지)
   ========================================= */
/* 900px 이하에서는 안전하게 화살표를 양 끝으로 붙입니다.
   (기존 600px보다 기준을 높여서 태블릿에서도 사라지지 않게 함) */
@media (max-width: 900px) {
  .tranding-slider-control .swiper-button-prev {
    left: 20px !important;
  }
  .tranding-slider-control .swiper-button-next {
    right: 20px !important;
  }
  
  /* 모바일에서 하단 여백 조정 */
  .tranding-slider-control {
    padding-bottom: 1.5rem;
  }
}