/**
 * 다양한 캐로우셀 스타일 CSS
 * jQuery 기반 캐로우셀 스타일 모음
 */

/* ==================== 공통 스타일 ==================== */
.carousel-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ==================== 1. Default (기본 Fade) ==================== */
.carousel-style-default .mainvisual_slider {
  /* bxSlider 기본 설정 사용 */
}

/* ==================== 1-b. Fade (페이드 크로스페이드) ==================== */
/* 전용 스크립트(carousel-style-fade.js)가 li를 absolute 로 겹쳐놓고 opacity 전환 */
.carousel-style-fade .mainvisual_slider,
.carousel-style-fade-zoom .mainvisual_slider {
  position: relative;
  overflow: hidden;
}
.carousel-style-fade .mainslide-card,
.carousel-style-fade-zoom .mainslide-card {
  width: 100%;
  height: 100%;
}

/* ==================== 1-c. Fade Zoom (페이드 + 켄번즈) ==================== */
/* 노출 중인 슬라이드 이미지에 천천히 확대 + 팬(ken burns) */
.carousel-style-fade-zoom .mainvisual_slider > li {
  overflow: hidden;
}
.carousel-style-fade-zoom .mainvisual_slider > li img {
  animation: carousel-fade-zoom 10s ease-in-out infinite alternate;
  transform-origin: center center;
  will-change: transform;
}
@keyframes carousel-fade-zoom {
  0%   { transform: scale(1.00) translate(0, 0); }
  100% { transform: scale(1.18) translate(-2%, -1.5%); }
}

/* reduced-motion 접근성: 애니메이션 최소화 */
@media (prefers-reduced-motion: reduce) {
  .carousel-style-fade-zoom .mainvisual_slider > li img {
    animation: none;
  }
  .mainvisual_slider > li,
  .mainvisual_slider > li * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* 카드형은 자체 `.cards-nav-arrow` 네비를 사용 — 기본 #hero-prev/next 숨김 (중복 방지) */
#mainvisual.carousel-style-cards .hero-nav { display: none !important; }

/* ==================== 2. Style 1 - 3D Deck (Supah Carousel) ==================== */
/* 스타일 1: 코드펜 Supah 3D 카드 덱 느낌으로 커스텀 */
.carousel-style-3d-coverflow {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(135deg, #000, #220033);
}

.carousel-style-3d-coverflow .mainvisual_slider {
  position: relative;
  width: 100%;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

.carousel-style-3d-coverflow .mainvisual_slider li {
  /* CodePen 스타일을 메인뷰/미리보기 크기에 맞게 조정 */
  --items: 10;
  --width: clamp(190px, 28vw, 300px);
  --height: clamp(253px, 37.333vw, 400px);
  --x: calc(var(--active) * 80%);
  --y: calc(var(--active) * 20%);
  --rot: calc(var(--active) * 12deg);
  --opacity: calc(var(--zIndex) / var(--items) * 3 - 2);

  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--width);
  height: var(--height);
  margin: calc(var(--height) * -0.5) 0 0 calc(var(--width) * -0.5);
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 10px 50px 10px rgba(0,0,0,0.5);
  transform-origin: 0% 100%;
  transform: translate(var(--x), var(--y)) rotate(var(--rot));
  transition: transform .8s cubic-bezier(0, 0.02, 0, 1), opacity .8s cubic-bezier(0, 0.02, 0, 1);
  z-index: var(--zIndex);
  user-select: none;
  pointer-events: all;
}
.carousel-style-3d-coverflow .mainvisual_slider li.hero-slide-variant-horizontal {
  --width: clamp(260px, 34vw, 420px);
  --height: clamp(146px, 19.125vw, 236px);
}
.carousel-style-3d-coverflow .mainvisual_slider li.hero-slide-variant-horizontal_43 {
  --width: clamp(240px, 32vw, 380px);
  --height: clamp(180px, 24vw, 285px);
}
.carousel-style-3d-coverflow .mainvisual_slider li.hero-slide-variant-square {
  --width: clamp(220px, 30vw, 340px);
  --height: clamp(220px, 30vw, 340px);
}
.carousel-style-3d-coverflow .mainvisual_slider li.hero-slide-variant-vertical_916 {
  --width: clamp(170px, 24vw, 260px);
  --height: clamp(302px, 42.667vw, 462px);
}

.carousel-style-3d-coverflow .mainvisual_slider li img,
.carousel-style-3d-coverflow .mainslide-card > img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 등록된 원본 비율 유지(잘림 없음) (#28) */
}

/* 미니홈/미리보기 공통: 커버플로우 카드가 상하 잘리지 않도록 높이 확대 (#26-d) */
#previewCarousel.carousel-style-3d-coverflow,
#mainvisual.carousel-style-3d-coverflow {
  height: 460px;
}
#mainvisual.carousel-style-3d-coverflow .mainvisual_wrapper {
  height: 100%;
  aspect-ratio: auto;
}
@media (max-width: 768px) {
  #previewCarousel.carousel-style-3d-coverflow,
  #mainvisual.carousel-style-3d-coverflow {
    height: 340px;
  }
}

/* ==================== 3. Style 2 - 3D Team Cards ==================== */
/* 스타일 2: 제공된 팀 카드 캐로우셀 느낌으로 재구성 */
.carousel-style-cards {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0 56px;
  /* 좌우 여백을 줄이기 위해 화면 폭에 비례해 카드 간격 확대 (#26) */
  --cards-spread-1: clamp(220px, 29vw, 520px);
  --cards-spread-2: clamp(380px, 50vw, 880px);
}

#previewCarousel.carousel-style-cards,
#mainvisual.carousel-style-cards {
  height: 470px;
}
#mainvisual.carousel-style-cards .mainvisual_wrapper {
  height: 100%;
  aspect-ratio: auto;
}

.carousel-style-cards .mainvisual_slider {
  position: relative;
  width: 100%;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.carousel-style-cards .mainvisual_slider li {
  position: absolute;
  width: clamp(240px, 25vw, 360px);
  height: auto;
  aspect-ratio: var(--hero-card-aspect, 3 / 4);
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
}

.carousel-style-cards .mainvisual_slider li .mainvisual_img,
.carousel-style-cards .mainvisual_slider li .mainvisual_img img,
.carousel-style-cards .mainvisual_slider li .mainslide-card,
.carousel-style-cards .mainvisual_slider li .mainslide-card > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: inherit;
}
.carousel-style-cards .mainvisual_slider li .mainslide-card > img {
  object-fit: contain;
}

.carousel-style-cards .mainvisual_slider li.center {
  z-index: 10;
  transform: scale(1.08) translateZ(0);
}

.carousel-style-cards .mainvisual_slider li.center .mainvisual_img img {
  filter: none;
}

.carousel-style-cards .mainvisual_slider li.left-2 {
  z-index: 1;
  transform: translateX(calc(-1 * var(--cards-spread-2))) scale(0.82) translateZ(-300px);
  opacity: 0.78;
}

.carousel-style-cards .mainvisual_slider li.left-1 {
  z-index: 5;
  transform: translateX(calc(-1 * var(--cards-spread-1))) scale(0.92) translateZ(-100px);
  opacity: 0.95;
}

.carousel-style-cards .mainvisual_slider li.right-1 {
  z-index: 5;
  transform: translateX(var(--cards-spread-1)) scale(0.92) translateZ(-100px);
  opacity: 0.95;
}

.carousel-style-cards .mainvisual_slider li.right-2 {
  z-index: 1;
  transform: translateX(var(--cards-spread-2)) scale(0.82) translateZ(-300px);
  opacity: 0.78;
}

.carousel-style-cards .mainvisual_slider li.left-2 .mainvisual_img img,
.carousel-style-cards .mainvisual_slider li.left-1 .mainvisual_img img,
.carousel-style-cards .mainvisual_slider li.right-1 .mainvisual_img img,
.carousel-style-cards .mainvisual_slider li.right-2 .mainvisual_img img {
  filter: grayscale(100%);
}

.carousel-style-cards .mainvisual_slider li.hidden {
  opacity: 0;
  pointer-events: none;
}

/* 화살표 및 인디케이터 스타일 */
.carousel-style-cards .indicator-dot {
  background: rgba(8, 42, 123, 0.2);
}

.carousel-style-cards .indicator-dot.active {
  background: rgb(8, 42, 123);
  transform: scale(1.2);
}

.carousel-style-cards .cards-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(8, 42, 123, 0.6);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 30;
  transition: all 0.3s ease;
  font-size: 1.4rem;
  padding-bottom: 4px;
}

.carousel-style-cards .cards-nav-arrow:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: translateY(-50%) scale(1.1);
}

.carousel-style-cards .cards-nav-arrow.left {
  left: 20px;
  padding-right: 3px;
}

.carousel-style-cards .cards-nav-arrow.right {
  right: 20px;
  padding-left: 3px;
}

/* ==================== 4. Fade + Zoom (deprecated block — 상단 1-c 사용) ==================== */
/* 이전의 `.active` 클래스 기반 구현은 bxSlider fade 모드와 충돌하여 제거.
   현재 구현: 위쪽 `.carousel-style-fade-zoom > li img` 애니메이션 + bxSlider opacity 전환 */

/* ==================== 5. Ken Burns Effect ==================== */
.carousel-style-ken-burns .mainvisual_slider li {
  overflow: hidden;
}

.carousel-style-ken-burns .mainvisual_img {
  overflow: hidden;
}

.carousel-style-ken-burns .mainvisual_img img {
  animation: kenBurns 10s ease-in-out infinite alternate;
  transform-origin: center center;
}

@keyframes kenBurns {
  0% {
    transform: scale(1) translate(0, 0);
  }
  25% {
    transform: scale(1.1) translate(-2%, -2%);
  }
  50% {
    transform: scale(1.15) translate(2%, 0);
  }
  75% {
    transform: scale(1.1) translate(0, 2%);
  }
  100% {
    transform: scale(1.05) translate(-1%, -1%);
  }
}

/* ==================== 6. Parallax ==================== */
.carousel-style-parallax {
  position: relative;
}

.carousel-style-parallax .mainvisual_slider li {
  position: relative;
}

.carousel-style-parallax .mainvisual_img {
  position: relative;
  overflow: hidden;
}

.carousel-style-parallax .mainvisual_img img {
  transform: scale(1.2);
  transition: transform 0.5s ease-out;
}

.carousel-style-parallax .mainvisual_slider li.active .mainvisual_img img {
  transform: scale(1) translateY(0);
}

/* ==================== 7. Cube Rotation ==================== */
.carousel-style-cube {
  perspective: 1600px;
}

.carousel-style-cube .mainvisual_slider {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

/* 단일 카드 3D 회전 — 픽셀 폭 미사용으로 확대/축소·리사이즈에 안전 (#26-a/c) */
.carousel-style-cube .mainvisual_slider li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  opacity: 0;
  transform: rotateY(90deg);
  transform-origin: center center;
  transition: transform 0.85s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.85s ease;
  z-index: 1;
}

.carousel-style-cube .mainvisual_slider li.active {
  opacity: 1;
  transform: rotateY(0deg);
  z-index: 10;
}

.carousel-style-cube .mainvisual_slider li.prev {
  opacity: 0;
  transform: rotateY(-90deg);
  z-index: 2;
}

.carousel-style-cube .mainvisual_slider li.next {
  opacity: 0;
  transform: rotateY(90deg);
  z-index: 2;
}

/* ==================== 8. Flip — 단일 카드 180도 플립 (#26-b) ==================== */
.carousel-style-flip {
  perspective: 1800px;
}

.carousel-style-flip .mainvisual_slider {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.carousel-style-flip .mainvisual_slider li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  opacity: 0;
  transform: rotateY(180deg);
  transition: transform 0.7s ease, opacity 0.7s ease;
  z-index: 1;
}

.carousel-style-flip .mainvisual_slider li.active {
  opacity: 1;
  transform: rotateY(0deg);
  z-index: 10;
}

.carousel-style-flip .mainvisual_slider li.prev {
  opacity: 0;
  transform: rotateY(-180deg);
  z-index: 2;
}

.carousel-style-flip .mainvisual_slider li.next {
  opacity: 0;
  transform: rotateY(180deg);
  z-index: 2;
}

/* ==================== 캐로우셀 컨트롤 ==================== */
.carousel-controls {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  gap: 10px;
}

.carousel-controls button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.carousel-controls button:hover {
  background: #fff;
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

.carousel-controls button i {
  font-size: 20px;
  color: #333;
}

/* ==================== 인디케이터 ==================== */
.carousel-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  gap: 8px;
}

.carousel-indicators .indicator-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.carousel-indicators .indicator-dot.active {
  background: #fff;
  width: 30px;
  border-radius: 6px;
}

.carousel-indicators .indicator-dot:hover {
  background: rgba(255, 255, 255, 0.8);
}

/* ==================== 반응형 ==================== */
@media (max-width: 1024px) {
  .carousel-style-cards {
    padding: 60px 0 90px;
  }

  #previewCarousel.carousel-style-cards,
  #mainvisual.carousel-style-cards {
    height: 380px;
  }

  .carousel-style-cards .mainvisual_slider li {
    width: 240px;
    height: auto;
  }

  .carousel-style-cards .mainvisual_slider li.left-2 {
    transform: translateX(-320px) scale(0.78) translateZ(-220px);
  }

  .carousel-style-cards .mainvisual_slider li.left-1 {
    transform: translateX(-160px) scale(0.88) translateZ(-80px);
  }

  .carousel-style-cards .mainvisual_slider li.right-1 {
    transform: translateX(160px) scale(0.88) translateZ(-80px);
  }

  .carousel-style-cards .mainvisual_slider li.right-2 {
    transform: translateX(320px) scale(0.78) translateZ(-220px);
  }
}

@media (max-width: 768px) {
  .carousel-style-cards {
    padding: 24px 0 46px;
    overflow: visible;
  }

  #previewCarousel.carousel-style-cards,
  #mainvisual.carousel-style-cards {
    height: clamp(380px, 112vw, 500px);
    padding-left: 0;
    padding-right: 0;
    margin-top: 8px;
    overflow: hidden;
    background: #fff;
  }

  .carousel-style-cards .mainvisual_slider li {
    width: clamp(226px, 68vw, 292px);
    height: auto;
    border-radius: 22px;
    box-shadow: 0 22px 56px rgba(0, 0, 0, 0.18);
  }

  .carousel-style-cards .cards-nav-arrow {
    display: none !important;
  }

  .carousel-style-cards .mainvisual_slider li.left-2 {
    transform: translateX(-58vw) scale(0.78) translateZ(-180px);
    opacity: 0.35;
  }

  .carousel-style-cards .mainvisual_slider li.left-1 {
    transform: translateX(-33vw) scale(0.88) translateZ(-70px);
    opacity: 0.58;
  }

  .carousel-style-cards .mainvisual_slider li.right-1 {
    transform: translateX(33vw) scale(0.88) translateZ(-70px);
    opacity: 0.58;
  }

  .carousel-style-cards .mainvisual_slider li.right-2 {
    transform: translateX(58vw) scale(0.78) translateZ(-180px);
    opacity: 0.35;
  }

  .carousel-style-cards .mainvisual_slider li.left-2 img,
  .carousel-style-cards .mainvisual_slider li.left-1 img,
  .carousel-style-cards .mainvisual_slider li.right-1 img,
  .carousel-style-cards .mainvisual_slider li.right-2 img {
    filter: saturate(0.82) brightness(1.05);
  }

  .carousel-style-cards .mainvisual_slider li.center {
    transform: scale(1) translateZ(0);
  }
}

@media (max-width: 480px) {
  .carousel-style-cards {
    padding: 20px 0 48px;
  }

  #previewCarousel.carousel-style-cards,
  #mainvisual.carousel-style-cards {
    height: clamp(372px, 114vw, 446px);
    overflow: hidden;
  }

  .carousel-style-cards .mainvisual_slider li {
    width: clamp(212px, 68vw, 266px);
    height: auto;
  }

  .carousel-style-cards .mainvisual_slider li.left-2,
  .carousel-style-cards .mainvisual_slider li.right-2 {
    opacity: 0.22;
  }

  .carousel-style-cards .mainvisual_slider li.left-1 {
    transform: translateX(-34vw) scale(0.86) translateZ(-48px);
  }

  .carousel-style-cards .mainvisual_slider li.right-1 {
    transform: translateX(34vw) scale(0.86) translateZ(-48px);
  }

  .carousel-style-cards .hero-slide__overlay {
    padding: 16px;
  }

  .carousel-style-cards .hero-slide__name {
    font-size: clamp(17px, 5.4vw, 21px);
    line-height: 1.25;
  }

  .carousel-style-cards .hero-slide__meta {
    font-size: 13px;
  }

  .carousel-style-cards .hero-slide__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .carousel-style-cards .hero-slide__tag-badge {
    max-width: 31%;
    padding: 4px 7px;
    border-radius: 7px;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ==================== 9. Slick Slider (슬릭 슬라이더) ==================== */
.carousel-style-slick .mainvisual_slider li {
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 0;
  transform: translateX(100%);
}

.carousel-style-slick .mainvisual_slider li.active {
  opacity: 1;
  transform: translateX(0);
}

.carousel-style-slick .mainvisual_slider li.prev {
  transform: translateX(-100%);
}

.carousel-style-slick .mainvisual_img img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

.carousel-style-slick .mainvisual_slider li:hover .mainvisual_img img {
  transform: scale(1.05);
}

/* ==================== 10. Owl Carousel (아울 캐로우셀) ==================== */
.carousel-style-owl {
  overflow: visible;
  padding: 20px 0;
}

.carousel-style-owl .mainvisual_slider {
  display: flex;
  gap: 20px;
}

.carousel-style-owl .mainvisual_slider li {
  flex: 0 0 auto;
  width: 100%;
  transition: all 0.4s ease;
  opacity: 0.6;
  transform: scale(0.85);
  filter: blur(2px);
}

.carousel-style-owl .mainvisual_slider li.active {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
  z-index: 10;
}

.carousel-style-owl .mainvisual_img {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.carousel-style-owl .mainvisual_slider li.active .mainvisual_img {
  box-shadow: 0 12px 32px rgba(255, 105, 180, 0.3);
}

/* ==================== 11. Swiper (스와이퍼) ==================== */
.carousel-style-swiper {
  overflow: hidden;
}

.carousel-style-swiper .mainvisual_slider li {
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  opacity: 0;
  transform: translateX(100%) scale(0.8) rotateZ(5deg);
}

.carousel-style-swiper .mainvisual_slider li.active {
  opacity: 1;
  transform: translateX(0) scale(1) rotateZ(0deg);
  z-index: 10;
}

.carousel-style-swiper .mainvisual_slider li.prev {
  transform: translateX(-100%) scale(0.8) rotateZ(-5deg);
}

.carousel-style-swiper .mainvisual_img {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.25);
  position: relative;
}

.carousel-style-swiper .mainvisual_img::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 105, 180, 0.1), rgba(255, 20, 147, 0.1));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.carousel-style-swiper .mainvisual_slider li.active .mainvisual_img::after {
  opacity: 1;
}

/* ==================== 12. Glide (글라이드) ==================== */
.carousel-style-glide .mainvisual_slider li {
  transition: all 0.5s ease-out;
  opacity: 0;
  transform: translateY(50px);
}

.carousel-style-glide .mainvisual_slider li.active {
  opacity: 1;
  transform: translateY(0);
}

.carousel-style-glide .mainvisual_img {
  position: relative;
  overflow: hidden;
}

.carousel-style-glide .mainvisual_img img {
  transition: transform 0.5s ease;
}

.carousel-style-glide .mainvisual_slider li.active .mainvisual_img img {
  animation: glideIn 0.8s ease-out;
}

@keyframes glideIn {
  0% {
    transform: scale(1.2) translateY(20px);
    opacity: 0;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

/* ==================== 13. Tiny Slider (타이니 슬라이더) ==================== */
.carousel-style-tiny {
  overflow: hidden;
}

.carousel-style-tiny .mainvisual_slider li {
  transition: all 0.4s ease;
  opacity: 0;
  transform: scale(0.9);
}

.carousel-style-tiny .mainvisual_slider li.active {
  opacity: 1;
  transform: scale(1);
}

.carousel-style-tiny .mainvisual_img {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.carousel-style-tiny .mainvisual_slider li.active .mainvisual_img {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* ==================== 14. Splide (스플라이드) ==================== */
.carousel-style-splide {
  position: relative;
}

.carousel-style-splide .mainvisual_slider li {
  transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  opacity: 0;
  transform: translateX(100%) rotateY(45deg);
  transform-style: preserve-3d;
}

.carousel-style-splide .mainvisual_slider li.active {
  opacity: 1;
  transform: translateX(0) rotateY(0deg);
  z-index: 10;
}

.carousel-style-splide .mainvisual_slider li.prev {
  transform: translateX(-100%) rotateY(-45deg);
}

.carousel-style-splide .mainvisual_img {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  position: relative;
}

.carousel-style-splide .mainvisual_img::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
  z-index: 1;
}

/* ==================== 15. Flickity (플리키티) ==================== */
.carousel-style-flickity {
  overflow: visible;
  padding: 30px 0;
}

.carousel-style-flickity .mainvisual_slider {
  display: flex;
  gap: 30px;
}

.carousel-style-flickity .mainvisual_slider li {
  flex: 0 0 auto;
  width: 100%;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  opacity: 0.5;
  transform: scale(0.8) translateY(20px);
}

.carousel-style-flickity .mainvisual_slider li.active {
  opacity: 1;
  transform: scale(1) translateY(0);
  z-index: 10;
}

.carousel-style-flickity .mainvisual_img {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.2);
  position: relative;
  cursor: grab;
}

.carousel-style-flickity .mainvisual_img:active {
  cursor: grabbing;
}

.carousel-style-flickity .mainvisual_slider li.active .mainvisual_img {
  box-shadow: 0 30px 80px rgba(255, 105, 180, 0.4);
}

.carousel-style-flickity .mainvisual_img img {
  transition: transform 0.5s ease;
}

.carousel-style-flickity .mainvisual_slider li:hover .mainvisual_img img {
  transform: scale(1.08);
}

/* ==================== 추가 반응형 스타일 ==================== */
@media (max-width: 768px) {
  .carousel-style-owl .mainvisual_slider {
    gap: 15px;
  }

  .carousel-style-flickity .mainvisual_slider {
    gap: 20px;
  }

  .carousel-style-splide .mainvisual_img,
  .carousel-style-flickity .mainvisual_img {
    border-radius: 16px;
  }
}

@media (max-width: 480px) {
  .carousel-style-owl,
  .carousel-style-flickity {
    padding: 15px 0;
  }

  .carousel-style-swiper .mainvisual_img,
  .carousel-style-splide .mainvisual_img {
    border-radius: 12px;
  }
}