/* main-swiper: swiper-bundle.min.css 불필요, 전용 스타일만 사용 (root 변수 없음) */

/* 래퍼: 345×413 비율 유지 */
.main-swiper-wrap {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 345 / 413;
  overflow: hidden;
  border: 1px solid #ccc;
}

/* 좌우 화살표: 모바일에서는 비표시 */
.main-swiper-wrap .swiper-button-prev,
.main-swiper-wrap .swiper-button-next {
  display: none;
}

/* PC 전용: 흰색 반투명 원 + 검정 화살표, 호버 시 스르륵 등장 */
@media (min-width: 1024px) {
  .main-swiper-wrap .swiper-button-prev,
  .main-swiper-wrap .swiper-button-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
  }

  .main-swiper-wrap .swiper-button-prev {
    left: 20px;
  }

  .main-swiper-wrap .swiper-button-next {
    right: 20px;
  }

  .main-swiper-wrap:hover .swiper-button-prev,
  .main-swiper-wrap:hover .swiper-button-next {
    opacity: 1;
  }

  /* Swiper 기본 ::after 아이콘 제거, Font Awesome 4.7 사용 */
  .main-swiper-wrap .swiper-button-prev::after,
  .main-swiper-wrap .swiper-button-next::after {
    display: none;
  }

  .main-swiper-wrap .swiper-button-prev .fa,
  .main-swiper-wrap .swiper-button-next .fa {
    font-size: 18px;
    color: #000;
    line-height: 1;
  }

  .main-swiper-wrap .swiper-button-prev.swiper-button-disabled,
  .main-swiper-wrap .swiper-button-next.swiper-button-disabled {
    opacity: 0.25;
    cursor: not-allowed;
  }
}

/* 내용 영역: 래퍼를 채우며 345×413 비율 유지 */
.main-swiper-wrap .main-swiper {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-swiper-wrap .main-swiper .swiper-wrapper {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
  transition-property: transform;
  transition-timing-function: ease-out;
}

.main-swiper-wrap .main-swiper .swiper-slide {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 100% !important;
  max-width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.main-swiper__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: top;
}