@charset "utf-8";

/* ===========================
   roomlist 섹션
=========================== */
.roomlist {
  width: 100%;
  /* background-color: #3a3835;    */
  padding: 125px 0 200px;
  overflow: hidden;
}

.roomlist__inner {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── ROOM PREVIEW 배경 텍스트 ── */
.roomlist__bg-text {
  font-family: 'nelp';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;                  /* 돔 뒤 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 97vw;
  padding: 0;
  pointer-events: none;
  white-space: nowrap;
}

.roomlist__bg-text .text-fill-anim {
  font-size: clamp(60px, 8vw, 162px);
  color: transparent;
  -webkit-text-stroke: 1px rgba(173, 184, 147, 1);  /* 흐린 아웃라인 */
  line-height: 1;
}

/* 가상요소 채우기 색도 반투명 처리 */
.roomlist__bg-text .text-fill-anim::after {
  color: rgba(173, 184, 147, 1);
}

/* ── 돔 래퍼 ── */
.roomlist__dom-wrap {
  position: relative;
  z-index: 3;
  width: 57vw;
  max-width: 1095px;
  aspect-ratio: 1095 / 712;    /* 돔 PNG 비율에 맞게 조정 */
  clip-path: polygon(    
      /* 하단 좌 시작점 */    1.1% 95.6%,    
    /* 좌측 하단 경사 */    1.1% 77%,    
    /* 좌측 중단 */    3.3% 48.2%,    
    /* 좌측 상단 경사 */    13.3% 24%,    
    /* 상단 좌 곡선 구간 */    26% 11.2%,    30% 7.2%,    
    /* 상단 꼭대기 */    50% 1.2%,    
    /* 상단 우 곡선 구간 */    70% 7.2%,    86.5% 23.8%,    
    /* 우측 상단 경사 */    96.7% 48.2%,    
    /* 우측 중단 */    98.9% 77%,    
    /* 우측 하단 경사 */    98.9% 95.4%,   
     /* 하단 우 끝점 */    98.5% 95.8%, 
     /* 최하단 우, 좌 */ 84% 98%, 50% 98.9%, 16% 98%   );
}

/* ── 돔 래퍼 다크 ── */
.dom-dark-bg {
  transform: scale(1);
  transition: transform 3s ease;
  display: block;
  background-color: var(--main-black);
  position: absolute;
  z-index: 1;
  width: 57vw;
  max-width: 1095px;
  aspect-ratio: 1095 / 712;    /* 돔 PNG 비율에 맞게 조정 */
  clip-path: polygon(    
      /* 하단 좌 시작점 */    1.1% 95.6%,    
    /* 좌측 하단 경사 */    1.1% 77%,    
    /* 좌측 중단 */    3.3% 48.2%,    
    /* 좌측 상단 경사 */    13.3% 24%,    
    /* 상단 좌 곡선 구간 */    26% 11.2%,    30% 7.2%,    
    /* 상단 꼭대기 */    50% 1.2%,    
    /* 상단 우 곡선 구간 */    70% 7.2%,    86.5% 23.8%,    
    /* 우측 상단 경사 */    96.7% 48.2%,    
    /* 우측 중단 */    98.9% 77%,    
    /* 우측 하단 경사 */    98.9% 95.4%,   
     /* 하단 우 끝점 */    98.5% 95.8%, 
     /* 최하단 우, 좌 */ 84% 98%, 50% 98.9%, 16% 98%   );
}
.dom-dark-bg.on {
  transform: scale(3);
}

/* ── 돔 배경 PNG ── */
.roomlist__dom-bg {
  position: absolute;
  inset: 0;
  z-index: 3;                 /* 스와이퍼 위에 올려서 돔 테두리가 이미지 위에 표시됨 */
  background: url('/html/images/roomlist/dom-bg-pc.png') center / contain no-repeat;
  pointer-events: none;
}

/* ── Swiper ── */
.roomlist-swiper {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  /* 돔 모양에 맞게 상단 클리핑 - PNG 투명 영역과 맞춤 */
  /* 필요 시 border-radius나 clip-path로 추가 조정 */
}

.roomlist-swiper .swiper-wrapper {
  height: 100%;
}

.roomlist-swiper .swiper-slide {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.roomlist__slide-img {
  position: absolute;
  inset: 0;
}

.roomlist__slide-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 슬라이드 하단 텍스트 */
/* 텍스트 레이어 - 돔 bg보다 위 */
.roomlist__info-layer {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  z-index: 5;                  /* .roomlist__dom-bg(z-index:3) 보다 위 */
  /* pointer-events: none; */
}

/* 룸상세 이동 버튼 */
.roomlist__info-layer .move-btn {
  background-color: var(--main-green);
  position: absolute; 
  bottom: 2.7vw; 
  right: 3.9vw;
}

.roomlist__info-layer .move-btn::before {
  background-color: var(--main-black);
}



.roomlist__slide-info {
  display: none;               /* 기본 숨김 */
  text-align: center;
  padding: 16px 0 28px;
}

.roomlist__slide-info.is-active {
  display: block;              /* 활성 슬라이드만 표시 */
}

.roomlist__slide-name {
  font-size: 30px;
  color: var(--main-green);
  font-family: 'ridi';
  margin: 0 0 4px;
}

.roomlist__slide-capacity {
  font-size: 18px;
  margin: 0;
}

/* ── 이전/다음 버튼 ── */
.roomlist .swiper-control-box {
  z-index: 5;
  bottom: -75px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

/* ── 반응형 ── */

@media (max-width:1600px) { 
  .roomlist__info-layer {
    bottom: 0;
  }
}

@media (max-width:1400px) {
  .roomlist__slide-name {
    font-size: 25px;
  }
  .roomlist__slide-capacity {
    font-size: 14px;
  }
  .roomlist__slide-info {
    padding: 16px 0 12px;
}
}


@media (max-width: 768px) {
  .roomlist {
    padding: 60px 0 180px;
  }

  /* 모바일: ROOM PREVIEW를 돔 위로 */
  .roomlist__inner {
    flex-direction: column;
  }

  .roomlist__bg-text {
    position: static;
    transform: none;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    order: -1;                 /* 돔보다 위로 */
  }

  .roomlist__bg-text .text-fill-anim {
    letter-spacing: 0.04em;
  }

  .roomlist__dom-wrap {
    width: 92vw;
    max-width: 650px;
    aspect-ratio: 800 / 625;
    clip-path: polygon(    
      /* 하단 좌 시작점 */    1.1% 95.6%,    
    /* 좌측 하단 경사 */    1.1% 77%,    
    /* 좌측 중단 */    3.3% 48.2%,    
    /* 좌측 상단 경사 */    13.3% 24%,    
    /* 상단 좌 곡선 구간 */    26% 11.2%,    30% 7.2%,    
    /* 상단 꼭대기 */    50% 1.2%,    
    /* 상단 우 곡선 구간 */    70% 7.2%,    86.5% 23.8%,    
    /* 우측 상단 경사 */    96.7% 48.2%,    
    /* 우측 중단 */    98.9% 77%,    
    /* 우측 하단 경사 */    98.9% 95.4%,   
     /* 하단 우 끝점 */    98.5% 95.8%, 
     /* 최하단 우, 좌 */ 84% 98%, 50% 98.9%, 16% 98%   );
  }


  /* ── 돔 래퍼 다크 ── */
  .dom-dark-bg {
    top: 15.5vw;
    width: 92vw;
    max-width: 650px;
    aspect-ratio: 800 / 625;
    clip-path: polygon(    
        /* 하단 좌 시작점 */    1.1% 95.6%,    
      /* 좌측 하단 경사 */    1.1% 77%,    
      /* 좌측 중단 */    3.3% 48.2%,    
      /* 좌측 상단 경사 */    13.3% 24%,    
      /* 상단 좌 곡선 구간 */    26% 11.2%,    30% 7.2%,    
      /* 상단 꼭대기 */    50% 1.2%,    
      /* 상단 우 곡선 구간 */    70% 7.2%,    86.5% 23.8%,    
      /* 우측 상단 경사 */    96.7% 48.2%,    
      /* 우측 중단 */    98.9% 77%,    
      /* 우측 하단 경사 */    98.9% 95.4%,   
      /* 하단 우 끝점 */    98.5% 95.8%, 
      /* 최하단 우, 좌 */ 84% 98%, 50% 98.9%, 16% 98%   );
  }



  .roomlist__dom-bg {
    background-image: url('/html/images/roomlist/dom-bg-mo.png');
  }

  .roomlist__info-layer {
    bottom: 20px;
  }

  /* 룸상세 이동 버튼 */
  .roomlist__info-layer .move-btn {
      bottom: 3.5vw;
      right: 5vw;
  }

  .roomlist__slide-capacity {
    display: none;
  }
}

@media (max-width:500px) {
  .roomlist__info-layer {
      bottom: 5px;
  }

  /* 룸상세 이동 버튼 */
  .roomlist__info-layer .move-btn {
      bottom: 4.5vw;
      right: 5vw;
  }

  .roomlist__slide-name {
      font-size: 20px;
  }

}

@media (max-width:380px) {
  .roomlist__info-layer {
      bottom: -3px;
  }
  .roomlist__info-layer .move-btn {
      bottom: 5.5vw;
      right: 5vw;
  }
}