﻿@import url('https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css');

.slider-container {
  width: 100%;
  max-width: 1400px; /* 전체 슬라이더 영역의 최대 너비 */
  padding: 40px 0;
  position: relative;
    overflow-x: hidden;
}

/* Swiper 기본 오버플로우 제어 */
.swiper {
  width: 100%;
  padding: 20px 0;
  overflow: visible; /* 양쪽 카드가 화면 밖으로 삐져나와 보이게 설정 */
}

/* 개별 슬라이드 크기 고정 */
.swiper-slide {
  width: 320px; /* 이미지 속 카드 비율에 맞게 가로 크기 지정 */
  height: auto;
  transition: transform 0.3s ease;
}

/* 카드 전체 레이아웃 */
.award-card {
  background-color: #ffffff;
  border-radius: 8px; /* 미세하게 둥근 모서리 */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* 카드 아래 부드러운 그림자 */
}

/* 카드 상단 이미지 영역 */
.img-box {
  width: 100%;
  height: 240px; /* 고정 높이 */
  background-color: #eaeaea;
  overflow: hidden;
}

.img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 이미지가 찌그러지지 않고 꽉 차게 */
  display: block;
}

/* 카드 하단 텍스트 설명 영역 */
.card-desc {
  padding: 30px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
}

.card-desc p:last-child{
  margin-bottom: 0;
}

.award-title {
  font-size: 20px;
  font-weight: 700;
  color: #333333;
  margin-bottom: 16px;
  word-break: keep-all;
}

.winner-info {
  font-size: 14px;
  color: #777777;
  margin-bottom: 4px;
}

.work-title {
  font-size: 15px;
  font-weight: 500;
  color: #444444;
  word-break: keep-all;
}

/* ----------------------------------
 * 이미지와 똑같은 반원 형태의 컨트롤러 버튼 스타일
 * ---------------------------------- */
.custom-nav-btn {
  width: 80px !important;
  height: 160px !important;
  background-color: rgba(0, 0, 0, 0.3) !important; /* 어두운 반투명 */
  color: #ffffff !important;
  position: absolute;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.custom-nav-btn:hover {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Swiper.js 기본 화살표 삭제 및 커스텀 폰트 아이콘 크기 지정 */
.custom-nav-btn::after {
  display: none !important;
}

.custom-nav-btn i {
  font-size: 24px;
}

/* 왼쪽 화살표 버튼 (오른쪽이 둥근 반원) */
.swiper-button-prev.custom-nav-btn {
  left: 0 !important;
  border-radius: 0 80px 80px 0;
  justify-content: flex-start;
  padding-left: 20px;
}

/* 오른쪽 화살표 버튼 (왼쪽이 둥근 반원) */
.swiper-button-next.custom-nav-btn {
  right: 0 !important;
  border-radius: 80px 0 0 80px;
  justify-content: flex-end;
  padding-right: 20px;
}

/* 슬라이더 바깥 클릭 방지 */
.swiper-button-disabled {
  opacity: 0.1 !important;
  pointer-events: none;
}