/* =========================================
 * add_style.css
 * - 공통 유틸 + 호텔상세(RoomList) 전용 스타일
 * - HotelDetail.js 템플릿(B형태: .room-thumb) 기준
 * ========================================= */

/* -----------------------------------------
 * 공통 유틸 (기존 유지)
 * ----------------------------------------- */

/* Chrome, Safari, Edge, Opera */
.no-spin::-webkit-inner-spin-button,
.no-spin::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.no-spin {
  -moz-appearance: textfield;
}

.ellipsis {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;       /* 최대 줄 수 */
  -webkit-box-orient: vertical;
}

.multi-ellipsis {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;       /* 최대 줄 수 */
  -webkit-box-orient: vertical;
}


/* -----------------------------------------
 *  메인 헤더 메시지 정렬
 * ----------------------------------------- */
/* 중앙 메시지가 있는 헤더에서만 기준점 잡기 */
.header.has-center-message .header__container{
  position: relative;
}

.header.has-center-message .header-center-message{
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

/* -----------------------------------------
 * 메인화면 동영상 비디오 배경용
 * ----------------------------------------- */
.masthead__bg--video {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.masthead__video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 배경처럼 꽉 채우기 */
}


/* -----------------------------------------
 *  메인 / 메시지 배너 슬라이드 (topInfoBanner)
 * - PC: 1줄(24px)
 * - Mobile: 2줄(44px)
 * - Swiper 핵심 레이아웃 포함(테마/라이브러리 CSS 누락 대비)
 * ----------------------------------------- */

.topInfoBanner-textCol{ min-width:0; }

.js-topInfoBanner{
  position: relative;
  width: 100%;
  height: 24px;
  overflow: hidden;
}

/* Swiper 핵심 레이아웃(세로) */
.js-topInfoBanner .swiper-wrapper{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  box-sizing: content-box;
}

.js-topInfoBanner .swiper-slide{
  flex: 0 0 24px;
  height: 24px;
  width: 100%;
  display: flex;
  align-items: center;
}

/* 텍스트: PC 1줄 말줄임 */
.js-topInfoBanner .topInfoBanner-text{
  display: block;
  width: 100%;
  line-height: 24px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  padding: 0;
}

/* Mobile: 2줄 노출 */
@media (max-width: 991.98px){
  .js-topInfoBanner{
    height: 44px;
  }

  .js-topInfoBanner .swiper-slide{
    flex: 0 0 44px;
    height: 44px;
    align-items: flex-start; /* 위에서 시작 */
    padding-top: 2px;        /* 살짝 내려서 보기 좋게(원하면 0으로) */
  }

  .js-topInfoBanner .topInfoBanner-text{
    white-space: normal;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

.js-topInfoBanner .swiper-wrapper{ height: 100% !important; }
.js-topInfoBanner .swiper-slide{ height: auto !important; }
.js-topInfoBanner .topInfoBanner-text{ max-width: 100%; }

/* -----------------------------------------
 * 메인 유투브 동영상 스타일 
 * ----------------------------------------- */
.video-wrap {
  width: 100%;
  max-width: 860px;      /* PC에서 최대 800px */
  margin: 0 auto;        /* 가운데 정렬 */
  position: relative;
  aspect-ratio: 16 / 9;  /* 비율 유지 */
}

.video-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* -----------------------------------------
 *  카카오 상담 이미지 모바일에서 숨김처리
 * ----------------------------------------- */
@media (max-width: 1200px){
  .mobile-hide{
    display: none !important;
  }
}

.border-top-black{
  border-top:1px solid #ccc;
}

/* -----------------------------------------
 * HotelList 호텔 목록 로딩 (호텔 불러오는 중) 
 * ----------------------------------------- */
.wait-hotel{
  font-size:16px;
  color:#ff4d4f;
  animation: hotelBlinkLoading 1.1s infinite;
  vertical-align: middle;
  white-space: nowrap;
}

@keyframes hotelBlinkLoading{
  0%{opacity:1}
  50%{opacity:0}
  100%{opacity:1}
}

.wait-hotel.is-hidden{
  animation:none;
  opacity:0;
  display:none;
}

/* -----------------------------------------
 * ===== HotelList 호텔 목록 화면 Skeleton =====
 * ----------------------------------------- */
.hotel-skel {
  position: relative;
  overflow: hidden;
  background: #f3f4f6;
  border-radius: 8px;
}

.hotel-skel::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  animation: hotelSkelShimmer 1.1s infinite;
}

@keyframes hotelSkelShimmer {
  0% { left: -60%; }
  100% { left: 110%; }
}

/* -----------------------------------------
 * ===== HotelList 모바일 가로형 처리  =====
 * ----------------------------------------- */

.hotel-list-mo {
  display: none;
}

@media (max-width: 767px) {
  .hotel-list-pc {
    display: none !important;
  }

  .hotel-list-mo {
    display: block;
    text-decoration: none;
    color: inherit;
  }

  .hotel-list-mo__inner {
    display: flex;
    align-items: stretch;
    gap: 12px;
  }

  .hotel-list-mo__thumb {
    flex: 0 0 92px;
    width: 92px;
  }

  .hotel-list-mo__thumb-box {
    position: relative;
    width: 90px;
    height: 160px;
    overflow: hidden;
  }

  .hotel-list-mo__thumb-box .cardImage__content,
  .hotel-list-mo__thumb-box img {
    width: 100%;
    height: 100%;
  }

  .hotel-list-mo__thumb-box img {
    object-fit: cover;
  }

  .hotel-list-mo__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  .hotel-list-mo__title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    color: #000;
  }

  .hotel-list-mo__eng {
    margin-top: 0px;
    font-size: 12px;
    line-height: 1.35;
    color: #666;
  }

  .hotel-list-mo__line {
    margin-top: 10px;
    min-width: 0;
    overflow: hidden;
  }


.hotel-list-mo__vip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.hotel-list-mo__vip-label {
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 0;
}

.hotel-list-mo__vip-marquee {
  position: relative;
  font-size: 13px;
  color:#ff6600;
  font-weight: 500;
  width: 100%;
  overflow: hidden;
  line-height: 1.3;
}

.hotel-list-mo__vip-marquee .vip-marquee {
  display: block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  min-height: auto;
}

.hotel-list-mo__vip-marquee .vip-marquee span {
  display: inline-block;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1.3;
  color: #ff6600;
}

.hotel-list-mo__vip-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(to right, rgba(255,255,255,0), #fff 80%);
}

.hotel-list-mo__comment {
  margin-top: 0 !important;
}

.hotel-list-mo__comment .vip-marquee {
  display: block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  min-height: auto;
}

.hotel-list-mo__comment .vip-marquee span {
  display: inline-block;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1.3;
  color: #9933cc;
}


  .hotel-list-mo__bottom-row {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .hotel-list-mo__chain {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    line-height: 1.3;
    color: #444;
    word-break: keep-all;
  }

  .hotel-list-mo__price {
    flex: 0 0 auto;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.1;
    color: #111;
    white-space: nowrap;
  }

  .hotel-list-mo__icons {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
  }

  .hotel-list-mo__icon {
    height: 18px;
    width: auto;
    display: block;
    filter: contrast(120%) saturate(120%);
  }

  .hotel-list-mo .cardImage__wishlist {
    z-index: 3;
  }

  .hotel-list-mo .cardImage__wishlist button {
    position: relative;
    z-index: 4;
  }
}

/* -----------------------------------------
 *  HotelDetail 상단 검색창 (singleMenu) - 모바일에서 날짜만 표시
 * ----------------------------------------- */
@media (max-width: 991.98px){
  .singleMenu .mainSearch .js-form-dd:first-child{ display:none !important; }
  .singleMenu .mainSearch .js-form-dd:last-child{ display:none !important; }

  .singleMenu .mainSearch .js-form-dd.js-calendar{
    width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* -----------------------------------------
 * HotelDetail 호텔사진 빈칸 플레이스홀더 만들기
 * ----------------------------------------- */

/* ✅ 빈칸 스타일(PC/모바일 공통) */
.galleryGrid__item--empty {
  position: relative;
  overflow: hidden;
}

/* ✅ 플레이스홀더 배경 + 텍스트 */
.galleryGrid__item--empty .gallery-empty {
  position: absolute;
  inset: 0;
  background: #f3f5f7;
  border: 1px dashed #e3e8ee;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9aa4b2;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.2px;
}

.galleryGrid__item--empty .gallery-empty::before {
  content: "📷";
  font-size: 18px;
  opacity: 0.7;
}

.galleryGrid__item--empty .gallery-empty::after {
  content: "사진 준비중";
}

/* ✅ PC에서는 템플릿 레이아웃을 절대 건드리지 않음
   - 여기서 height: auto 같은 것도 안 씀
   - 이유: PC는 기존 galleryGrid가 비율/레이아웃 계산을 하고 있을 확률이 높음
*/

/* ✅ 모바일에서만 높이 고정 + cover */
@media (max-width: 768px) {
  #imageList {
    overflow: hidden;
  }

  /* 모바일은 1장만 보여주니까 높이 고정 */
  #imageList .galleryGrid__item,
  #imageList .galleryGrid__item--empty {
    height: 220px;
  }

  /* 이미지: 가운데 crop */
  #imageList .galleryGrid__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  /* 빈칸도 높이 맞추기 */
  #imageList .galleryGrid__item--empty::before {
    display: none !important; /* 모바일에서는 padding-top 비율 방식 제거 */
  }

  #imageList .galleryGrid__item--empty .gallery-empty {
    position: relative;
    height: 100%;
  }
}

/* =========================================
 * HotelDetail 호텔 사진 - PC 높이 고정 (대표사진 500px)
 * ========================================= */
@media (min-width: 992px){

  /* ✅ 갤러리 전체 높이 기준 */
  #imageList {
    height: 500px;
  }

  /* ✅ 각 아이템은 grid cell을 꽉 채우도록 */
  #imageList .galleryGrid__item,
  #imageList .galleryGrid__item--empty {
    height: 100%;
    overflow: hidden;
  }

  /* ✅ 이미지: 가운데 기준으로 꽉 채우기 (크롭) */
  #imageList .galleryGrid__item img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  /* ✅ 빈칸(플레이스홀더)도 셀을 꽉 채우기 */
  #imageList .galleryGrid__item--empty::before {
    display: none !important; /* padding-top 기반 비율 제거 */
  }
  #imageList .galleryGrid__item--empty .gallery-empty{
    height: 100%;
  }
}

/* =========================================
 *   HotelDetail 제목뒤 호텔정책 버튼
 * ========================================= */
.hotel-title{
  text-align:left;          /* 혹시 가운데 정렬 먹었으면 방지 */
}

.hotel-name{
  display:inline;           /* 호텔명이 block처럼 잡히는 경우 방지 */
}

.hotel-policy-inline{
  display:inline-block;     /* 텍스트 흐름에 붙게 */
  margin-left:6px;
  vertical-align:middle;
  white-space:nowrap;

  /* ✅ 여기 중요: 오른쪽 끝으로 보내는 성질 제거 */
  margin-right:0;
  float:none !important;
  position:static !important;
}

/* -----------------------------------------
 * HotelDetail 특별사항 
 * ----------------------------------------- */
.remark-wrap{
  line-height:1.6;            /* 전체 문장 덩어리 촘촘하게 */
}
.remark-wrap *{
  line-height:inherit !important;
}

/* =========================================
 *   HotelDetail 체크인아웃 호텔정보 박스 아코디언 토글 - 모바일용
 * ========================================= */
.hotelAcc__btn{
  background: transparent;
  border: 0;
  padding: 6px;
  display: inline-flex;   /* flex → inline-flex 로 정리 */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: auto;      /* 우측 정렬 보장 */
}

/* 화살표 */
.acc-arrow{
  font-size:7px;
  line-height:1;
  display:block;
}

/* 접힘 상태 아이콘 회전 */
.hotelInfoAccordion.is-collapsed .acc-arrow{
  transform: rotate(-90deg);
}

/* 아코디언 본문 */
.hotelAcc__body{
  overflow: hidden;
  height: auto;           /* PC 기본 펼침 */
}

/* 모바일에서만 접힘 동작 */
@media (max-width: 767px){
  .hotelInfoAccordion.is-collapsed .hotelAcc__body{
    height: 0;
  }
}

@media (min-width: 768px){
  .hotelAcc__btn{
    display: none !important;
  }
}

/* -----------------------------------------
 * HotelDetail 객실 로딩 ( 객실 불러오는 중) 
 * ----------------------------------------- */
.room-title { display: flex; align-items: center; }

.wait-text{
  margin-left: 8px;
  font-size: 14px;
  color: #ff4d4f;
  animation: roomBlink 1.2s infinite;
  white-space: nowrap;
}

.wait-vip{
  margin-left: 0px;
  font-size: 12px;
  color: #000000;
  animation: roomBlink 1.2s infinite;
  white-space: nowrap;
}

@keyframes roomBlink {
  0%{opacity:1}
  50%{opacity:0}
  100%{opacity:1}
}

.wait-text.hide{
  animation: none;
  opacity: 0;
  transition: opacity .9s ease;
}

.hide{ display: none !important; }

/* -----------------------------------------
 * HotelDetail 객실사진 뱃지 (사진갯수 표시) 
 * ----------------------------------------- */
.room-thumb{
  position: relative;
}

.room-photo-count{
  position: absolute;
  right: 5px;
  bottom: 5px;

  width: 22px;
  height: 22px;
  border-radius: 9999px;

  background: #fff;
  color: #000;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

/* -----------------------------------------
 *  HotelDetail 객실 요금정보 접기/펼치기 
 * - HotelDetail.js bindRateToggle에서 .rate-collapse 생성
 * ----------------------------------------- */
.rate-toggle-btn{
  border: 1px solid #e5e7eb;
  background: #fff;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.price-row-flex{
  display: flex;
  align-items: center;
  gap: 10px;
}
.price-row-flex .rate-toggle-btn{ margin-left: auto; }

/* collapse */
.rate-collapse{
  overflow: hidden;
  transition: max-height .25s ease;
}
.rate-collapse.is-collapsed{ max-height: 0 !important; }
.rate-collapse.is-expanded{ max-height: 5000px; }


  /* ------------------------------
   *  HotelDetail - room-icon: 모바일 숨김 / PC 표시
   * ------------------------------ */
  .room-icon {
    display: none !important;
  }

  @media (min-width: 768px) {
    .room-icon {
      display: inline-block !important;
      margin-right: 0;
    }
  }

/* ------------------------------
 *  모달 썸네일 그리드
 * ------------------------------ */

.photo-grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap:10px;
}

@media (max-width: 991.98px){
  .photo-grid{ grid-template-columns: repeat(3, 1fr); }
}

.photo-grid__item{
  position:relative;
  width:100%;
  aspect-ratio: 1 / 1;
  overflow:hidden;
  border-radius:12px;
  cursor:pointer;
  background:#f3f4f6;
}

.photo-grid__item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition: transform .15s ease;
}

.photo-grid__item:hover img{
  transform: scale(1.03);
}

.photo-overlay.is-hidden{ display:none; }

.photo-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
}

.photo-overlay__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
}

.photo-overlay__panel{
  position:relative;
  max-width:1200px;
  width:calc(100% - 40px);
  margin:20px auto;
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  max-height:calc(100vh - 40px);
  display:flex;
  flex-direction:column;
}

.photo-overlay__header{
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #e5e7eb;
}

.photo-overlay__title{ font-weight:600; }

.photo-overlay__close{
  border:0;
  background:transparent;
  font-size:20px;
  cursor:pointer;
}

#photoGrid_overflow{
  padding:16px;
  overflow:auto;
}

/* -----------------------------------------
 * HotelDetail 전용가 마퀴 (모바일만 흐르게) 
 * ----------------------------------------- */
@media (min-width: 992px){
  .vip-marquee{ white-space: normal; overflow: visible; }
  .vip-marquee__inner{
    white-space: normal;
    padding-left: 0;
    animation: none;
    display: inline;
  }
}
@keyframes vip-scroll{
  0%{ transform: translateX(0) }
  100%{ transform: translateX(-100%) }
}

@media (max-width: 991px){
  .vip-marquee{
    width: 100%;
    overflow: hidden;
    white-space: nowrap;

    /* ✅ 오른쪽 등장 구간만 페이드(투명→불투명) */
    -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 35%, #000 100%);
    mask-image: linear-gradient(to left, transparent 0%, #000 35%, #000 100%);
  }

  .vip-marquee__inner{
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%;
    animation: vip-scroll 12s linear infinite;
    will-change: transform; /* 끊김 완화 */
  }
}

/* =========================================================
 * ✅ HotelDetail RoomList (정리본 / 중복 제거)
 * - JS 마크업: room-head / room-media / room-meta / room-line--top|mid|bot / room-thumb
 * ========================================================= */

/* 1️⃣ 객실 카드 전체는 클릭 가능 */
#RoomList .room-card {
  cursor: pointer;
}

/* 2️⃣ 요금제 영역 자체는 카드 클릭 대상 아님 */
#RoomList .room-card .rate-list {
  cursor: default;
}

/* 3️⃣ 요금제 안 실제 클릭 요소는 다시 pointer */
#RoomList .room-card .rate-list a,
#RoomList .room-card .rate-list button,
#RoomList .room-card .rate-list [role="button"] {
  cursor: pointer;
}

/* 4️⃣ 기타 카드 안 링크/버튼도 pointer 보정 */
#RoomList .room-card a,
#RoomList .room-card button {
  cursor: pointer;
}

/* (선택) 토글 버튼 디자인 - JS에서 .room-toggle-btn 생성 */
#RoomList .room-toggle-btn{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 0px solid #e5e7eb;
  background: #a6b8d2;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#RoomList .room-toggle-btn .toggle-icon{
  font-size: 6px;
  color:white;
  line-height: 1;
}

/* ---- 객실사진 (PC 기본) ---- */
#RoomList .room-thumb{
  width: 170px;
  height: 170px;
  flex: 0 0 170px;
  overflow: hidden;
}

/* ratio padding 방식 무력화(우리가 높이를 직접 줌) */
#RoomList .room-thumb::before{
  content: none !important;
  padding-top: 0 !important;
}

/* 썸네일 이미지 cover */
#RoomList .room-thumb > img,
#RoomList .room-thumb .img-ratio{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}


/* ---- 헤더 2컬럼 + 우측 3줄 구조(PC/모바일 공통) ---- */
#RoomList .room-head{
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

#RoomList .room-media{
  flex: 0 0 auto;
}

#RoomList .room-meta{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 1줄: 객실명(왼쪽) + 토글(오른쪽) */
#RoomList .room-line--top{
  display: flex;
  align-items: center; /* ✅ (2) PC에서도 토글이 위로 튀는 거 방지 */
  gap: 10px;
}
#RoomList .room-name{
  min-width: 0;
  line-height: 1.8;   /* 기본보다 확 줄임 */
  flex: 1 1 auto;
}

/* 토글 슬롯은 항상 우측 끝 */
#RoomList .room-toggle-slot{
  margin-left: auto;
  flex: 0 0 auto;
}

/* 2줄: 스펙 2개 */
#RoomList .room-line--mid{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
#RoomList .room-spec{
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

/* (4) 아이콘 디테일 */
#RoomList .room-icon{
  opacity: .7;
  margin-right: 4px; /* 기존 mr-5가 있어도 추가로 안정 */
}

/* 3줄: VIP(왼쪽) + 가격(오른쪽) */
#RoomList .room-line--bot{
  display: flex;
   align-items: center !important;
   justify-content: space-between !important;
  gap: 10px;
}
#RoomList .room-price{
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}


/* ---- 모바일 디테일 ---- */
@media (max-width: 991.98px){

  /* ✅ 모바일에서 헤더가 세로로 떨어지는 문제 방지: 무조건 가로 유지 */
  #RoomList .room-head{
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  /* 썸네일(모바일) */
  #RoomList .room-thumb{
    width: 80px !important;
    height: 80px !important;
    flex: 0 0 80px !important;
  }

  /* (1) 모바일 줄간격/여백 미세 조정 */
  #RoomList .room-meta{ gap: 0px; }
  #RoomList .room-line--mid{ gap: 8px; }
  #RoomList .room-line--bot{ margin-top: 2px; }

  /* 2줄 스펙 줄바꿈은 유지 */
  #RoomList .room-line--mid{
    flex-wrap: wrap !important;
  }

  /* 가격 텍스트 조금 더 강조(너가 쓰는 text-22를 덮어쓰기) */
  #RoomList .room-price .text-22{
    font-size: 16px;
    line-height: 1.1;
  }

  /* 객실명: 모바일에서 한 줄로만 + 말줄임 (원하면 2줄로 바꿔도 됨) */
  #RoomList .room-name{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

  /* =========================================
   PC: 3번째 줄(VIP+가격)을 썸네일 하단에 맞추기
   ========================================= */
@media (min-width: 992px){

  /* 오른쪽 정보 컬럼이 썸네일 높이를 따라가게 */
  #RoomList .room-meta{
    min-height: 170px;              /* 썸네일(170)과 동일 */
  }

  /* 3번째 줄을 바닥으로 밀기 */
  #RoomList .room-line--bot{
    margin-top: auto;               /* 핵심 */
  }

  /* (옵션) 3번째 줄 높이/정렬 안정화 */
  #RoomList .room-line--bot{
    align-items: flex-end;
  }
}

/* =========================================
   Mobile: 3번째 줄(VIP+가격)을 썸네일 하단에 맞추기
   ========================================= */
@media (max-width: 991.98px){

  /* 모바일 썸네일 높이와 맞춰서 meta가 세로로 늘어나게 */
  #RoomList .room-meta{
    min-height: 80px;          /* 현재 모바일 thumb(80)과 동일 */
  }

  /* 3번째 줄을 바닥으로 밀기 */
  #RoomList .room-line--bot{
    margin-top: 0.5rem;
  }
}


/* =========================================
   RoomList 요금 토글 버튼 상태 스타일 (열림/닫힘 구분)
   ========================================= */

#RoomList .room-toggle-btn{
  transition: background-color .2s ease, color .2s ease;
}

#RoomList .room-toggle-btn[aria-expanded="true"]{
  background: #111;
  border-color: #111;
  color: #fff;
}

#RoomList .room-toggle-btn[aria-expanded="true"] .toggle-icon{
  color: #fff;
}

#RoomList .room-toggle-btn:hover{
  background: #000000;
}

#RoomList .room-toggle-btn[aria-expanded="true"]:hover{
  background: #000;
}


/* =========================================
   모바일 요금제 카드: 가격영역 3단 -> 2단 압축
   (PC는 영향 없음)
   - 1줄: 가격 + '체크인 시 결제'
   - 2줄: (약 원화)
   ========================================= */
@media (max-width: 991.98px){

  /* 모바일에서 우측 가격 영역 상단/중간 간격 줄이기 */
  #RoomList .rate-list .col-lg-auto.col-md-6 .pl-20{
    margin-top: -10px; /* 모바일에서 불필요한 왼쪽 패딩 제거 */
  }

  /* '체크인 시 결제'를 가격 옆으로 올리기 (순서까지 바꾸진 않고, 시각적으로만) */
  #RoomList .rate-list .col-lg-auto.col-md-6 .text-13{
    display: inline-block !important;
    margin: 0 0 0 4px !important;   /* 가격과의 간격 */
    font-size: 13px !important;
    line-height: 1.1 !important;
    vertical-align: baseline !important;
    white-space: nowrap !important;
  }

  /* 가격도 inline으로 */
  #RoomList .rate-list .col-lg-auto.col-md-6 .text-18{
    display: inline-block !important;
    margin: 0 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  /* (약 원화)는 2번째 줄로 */
  #RoomList .rate-list .col-lg-auto.col-md-6 .text-14{
    display: block !important;
    margin-top: 0px !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
  }

  /* 카드 전체 높이 줄이기: y-gap-30, mt-20 같은 간격을 모바일에서 완화 */
  #RoomList .rate-list > .bg-white.rounded-4{
    margin-top: 2px !important;     /* mt-20 줄이기 */
  }

  /* row y-gap-30이 모바일에서 세로 간격을 크게 만들면 줄이기 */
  #RoomList .rate-list > .bg-white.rounded-4 > .row{
    row-gap: 10px !important;
  }

  /* 가격영역 안에서 mb-5 같은 여백이 있으면 제거 */
  #RoomList .rate-list .col-lg-auto.col-md-6 .text-13.mb-5{
    margin-bottom: 0 !important;
  }
}

/* =========================================
   체크인시 결제 로테이션 박스
   ========================================= */
.pay-rotate-box{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 120px; 
  padding:6px 5px;
  border:1px solid #ffcc00;
  border-radius:0px;
  background:#ffffcc;
  min-height:28px;
  margin-bottom:6px;
}

.pay-rotate-text{
  font-size:13px;
  line-height:14px;
  color:#6b7280; /* 기존 text-light-1 비슷 */
  font-weight:500;
  white-space:nowrap;
}


/* =========================================
 *   RoomDetail 객실 상세 상단 사진
 * - 덮개(빈 a.js-gallery) 방지: PC만
 * - 대표사진은 컨테이너 폭에 맞춰 축소
 * - PC에서는 대표사진 영역 높이 500px 고정 + cover
 * ========================================= */

/* 1) Photos 갤러리용 숨김 링크(빈 a) 덮개 방지 - PC만 */
@media (min-width: 992px){
  #imageList2 .js-gallery{
    position: static !important;
    width: auto !important;
    height: auto !important;
  }

  #imageList2 .js-gallery[aria-hidden="true"],
  #imageList2 .js-gallery[style*="display:none"]{
    display: none !important;
    pointer-events: none !important;
  }
}

/* 2) 대표사진: 기본은 폭 100%로 줄어들게(공통) */
#imageList{
  overflow: hidden; /* 원본이 커도 아래로 침투 못하게 */
}

#imageList .roomDetailPhoto{
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: cover;
}

/* 3) PC에서만 대표사진 높이 500px 고정 + cover */
@media (min-width: 992px){
  #imageList{
    height: 500px;
  }

  #imageList .roomDetailPhoto{
    height: 100% !important;
    object-fit: cover;
  }
}

/* 버튼 영역: 오른쪽 아래 고정 */
#imageList2{
  right: 0;
  bottom: 0;
  left: auto;
  transform: none;
}

/* =========================================
 *   RoomDetail - 호텔정보 박스 (PC 1줄 / 모바일 2줄 )
 * ========================================= */
/* 모바일에서만 1줄 + 4칸 레이아웃 */
@media (max-width: 767px) {
  .roomInfoRow {
    display: flex;
    flex-wrap: wrap;
  }

  /* 기본: 4개짜리 줄(25%씩) */
  .roomInfoRow > .col {
    flex: 0 0 25%;
    max-width: 25%;
  }

  /* Bed는 1줄 전체(100%) + 맨 위로 */
  .roomInfoRow #isInfoBed {
    flex: 0 0 100%;
    max-width: 100%;
    order: 1;
  }

  /* 나머지는 2번째 줄로 */
  .roomInfoRow #isInfoFood { order: 2; }
  .roomInfoRow #isInfoMan  { order: 3; }
  .roomInfoRow #isInfoSize { order: 4; }
  .roomInfoRow #isInfoView { order: 5; }
}


/* =========================================
 *   Reservation 페이지 기본 
 * ========================================= */

/* 로딩 오버레이 (초기엔 숨김) */
.loader-overlay {
	position: fixed;
	inset: 0;                       /* top:0; right:0; bottom:0; left:0; */
	display: none;                  /* show: display:flex */
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0.35);   /* 반투명 배경 */
	z-index: 9999;
}

/* 로딩 컨테이너 (중앙 박스) */
.loader-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 20px 28px;
	border-radius: 12px;
	background: rgba(255,255,255,0.98);
	box-shadow: 0 6px 30px rgba(0,0,0,0.25);
	min-width: 180px;
	max-width: 90%;
}

/* 스피너 */
.spinner {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 6px solid rgba(0,0,0,0.08);
	border-top-color: #0d6efd; /* 파란색 회전부 */
	animation: spin 0.9s linear infinite;
	box-sizing: border-box;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 메시지 스타일 */
.loader-message {
	font-size: 15px;
	color: #111;
	text-align: center;
	line-height: 1.2;
	word-break: keep-all;
}

/* 작은 설명(선택) */
.loader-sub {
	font-size: 12px;
	color: #666;
}


/* =========================================
   마이페이지 > 위시리스트 페이지 이동 버트
   ========================================= */

#setPageNum{
  display:flex;
  flex-wrap: nowrap;      /* 줄바꿈 금지 */
  gap: 8px;               /* 버튼 간격 */
  justify-content: center;
  align-items: center;

  overflow-x: auto;       /* 좁으면 가로 스크롤 */
  -webkit-overflow-scrolling: touch;
  padding: 6px 4px;
}

#setPageNum::-webkit-scrollbar{
  height: 6px;
}

.disable-calendar {
  pointer-events: none;
  opacity: 0.6;
}

.white-pre {
    white-space: pre-line;
}