/* 1. 컨테이너는 그냥 잘라주고 */
#main-swiper .swiper-slide {
  overflow: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* 2. 슬라이드 이미지를 그리드 폭에 맞게 채우기 */
#main-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* 메인 뷰어 안의 스와이퍼 기본 */
.gallery-viewer-frame.swiper {
  width: 100%;
  height: auto;
  /* 너가 이미 aspect-ratio:1/1 넣어놨으면 그거 그대로 두면 됨 */
}

/* 썸네일 active 상태 표시 */
.gallery-thumb-item.is-active-thumb {
  outline: 0.7px solid #fafafa;
  /* 프리미엄 느낌이면 색만 바꿔 */
  outline-offset: 0px;
  opacity: 1;
}

/* 비활성 썸네일은 살짝 죽이기 (원하면) */
.gallery-thumb-item {
  cursor: pointer;
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}

.gallery-thumb-item:not(.is-active-thumb) {
  opacity: 0.7;
}

.gallery-thumb-item:hover {
  opacity: 1;
}