/* ===========================================
   Facility1_onlyimg - 이미지 전용 갤러리
   텍스트 영역 없이 이미지 100% 폭
   썸네일: 8개 기준, 9개부터 화살표
=========================================== */

/* ===== 최상위 래퍼 ===== */
.Facility1_onlyimg {
  width: 100%;
  float: left;
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
}

.Facility1_onlyimg .wg_box {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}


/* ===== 단일 이미지 ===== */
.Facility1_onlyimg .single-img {
  width: 100%;
  float: left;
  overflow: hidden;
  border-radius: 8px;
}
.Facility1_onlyimg .single-img img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}


/* ===== Swiper 초기화 전 사전 레이아웃 (점프 방지) ===== */
.Facility1_onlyimg .main-swiper:not(.swiper-initialized) {
  overflow: hidden;
}
.Facility1_onlyimg .main-swiper:not(.swiper-initialized) .swiper-wrapper {
  display: flex;
}
.Facility1_onlyimg .main-swiper:not(.swiper-initialized) .swiper-slide {
  flex-shrink: 0;
  width: 100%;
}
.Facility1_onlyimg .thumb-swiper:not(.swiper-initialized) {
  overflow: hidden;
}
.Facility1_onlyimg .thumb-swiper:not(.swiper-initialized) .swiper-wrapper {
  display: flex;
  gap: 8px;
}
/* 항상 8등분 크기 (8개 미만이면 왼쪽 정렬) */
.Facility1_onlyimg .thumb-swiper:not(.swiper-initialized) .swiper-slide {
  width: calc((100% - 56px) / 8);
  flex-shrink: 0;
}


/* ===== 메인 이미지 래퍼 ===== */
.Facility1_onlyimg .main-swiper-wrap {
  width: 100%;
  position: relative;
}

/* ===== 메인 이미지 스와이퍼 ===== */
.Facility1_onlyimg .main-swiper {
  width: 100% !important;
}

/* ===== 메인 이미지 좌우 화살표 ===== */
.Facility1_onlyimg .main-arr {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.2s;
}
.Facility1_onlyimg .main-arr:hover {
  background: rgba(255, 255, 255, 0.95);
}
.Facility1_onlyimg .main-arr i {
  font-size: 24px;
  line-height: 1;
}
.Facility1_onlyimg .main-arr-prev {
  left: 12px;
}
.Facility1_onlyimg .main-arr-next {
  right: 12px;
}
.Facility1_onlyimg .main-arr.swiper-button-disabled {
  opacity: 0.3;
  cursor: default;
}
.Facility1_onlyimg .main-swiper .swiper-slide .wg_img_box {
  width: 100%;
  float: left;
  overflow: hidden;
  border-radius: 8px;
}
.Facility1_onlyimg .main-swiper .swiper-slide img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}


/* ===== 썸네일 스트립 ===== */
.Facility1_onlyimg .thumb-wrap {
  width: 100%;
  margin-top: 10px;
  position: relative;
}

/* 8개 이하: 화살표 없이 전체 폭 */
.Facility1_onlyimg .thumb-wrap:not(.has-arrows) .thumb-swiper {
  width: 100%;
}

/* 9개 이상: 화살표 + 여백 */
.Facility1_onlyimg .thumb-wrap.has-arrows {
  display: flex;
  align-items: center;
  gap: 8px;
}
.Facility1_onlyimg .thumb-wrap.has-arrows .thumb-swiper {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}


/* ===== 썸네일 슬라이드 ===== */
.Facility1_onlyimg .thumb-swiper .swiper-slide {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.3s ease;
  border-radius: 5px;
}
.Facility1_onlyimg .thumb-swiper .swiper-slide-thumb-active {
  opacity: 1;
}
.Facility1_onlyimg .thumb-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
  display: block;
}
.Facility1_onlyimg .thumb-swiper .swiper-slide .thumb-alt {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 5px;
}
.Facility1_onlyimg .thumb-swiper .swiper-slide .thumb-alt img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
  display: block;
}


/* ===== 썸네일 화살표 버튼 ===== */
.Facility1_onlyimg .thumb-arr {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 1px solid #ddd;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color 0.2s;
}
.Facility1_onlyimg .thumb-arr:hover {
  border-color: #999;
}
.Facility1_onlyimg .thumb-arr i {
  font-size: 18px;
  line-height: 1;
}
.Facility1_onlyimg .thumb-arr.swiper-button-disabled {
  opacity: 0.3;
  cursor: default;
}


/* ===== 모바일: 썸네일 4개 표시 ===== */
@media only all and (max-width: 767px) {
  .Facility1_onlyimg .thumb-swiper:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 18px) / 4);
  }
}