@charset "utf-8";
/* CSS Document */
/* Mobile-first 기본 스타일 */
.main-content { max-width:100%;padding:0.3rem;margin:0 auto; }  
.room-title { font-size:1.5rem;margin-bottom:0.5rem;color:#333; text-align: center;}  
.room-detail {  padding: 0; border: solid thin #830C0E;}
.room-price { font-size:1.25rem;color:#e63946;margin-bottom:0.5rem; }  
.room-desc { font-size:1rem;color:#555;margin-bottom:0.5rem; }  
.room-guests { font-size:1rem;color:#555;margin-bottom:1rem; }  
.room-images { display:flex;overflow-x:auto;gap:0.5rem;margin-bottom:1rem; }  
.room-image { flex:0 0 auto;width:80%;border-radius:0.5rem;object-fit:cover; }  
.room-videos { display:flex;flex-direction:column;gap:1rem;margin-bottom:1rem; }  
.video-wrapper { position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:0.5rem; }  
.room-video { position:absolute;top:0;left:0;width:100%;height:100%;border:0;border-radius:0.5rem; }  
.video-caption { font-size:0.875rem;color:#555;text-align:center;margin-top:0.25rem; }  
.reserve-btn-wrapper { text-align:center;margin-top:1rem; }  
.btn-reserve { display:inline-block;padding:0.75rem 1.5rem;background-color:#1d3557;color:#fff;border-radius:0.5rem;text-decoration:none;font-size:1rem; }  

/* 태블릿 이상 레이아웃 조정 */
@media (min-width:768px) {
  .main-content { max-width:720px;padding:2rem; }  
  .room-title { font-size:2rem; }  
  .room-images { gap:1rem; }  
  .room-image { width:calc(50% - 0.5rem); }  
  .room-videos { flex-direction:row;flex-wrap:wrap;gap:1rem; }  
  .video-wrapper { width:calc(50% - 0.5rem); }  
}


/* slider 공통 */
.slider { position: relative; overflow: hidden; margin-bottom:1rem; }
.slider-track { display:flex; transition: transform .3s ease; }
.slide { flex: 0 0 100%; display:flex; justify-content:center; align-items:center; }
.slide-media { max-width:100%; max-height:60vh; cursor: grab; }

/* lightbox 모달 */
.lightbox { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); justify-content:center; align-items:center; z-index:999; }
.lightbox.show { display:flex; }
.lightbox-close { position:absolute; top:1rem; right:1rem; font-size:2rem; color:#fff; cursor:pointer; }
.lightbox-content img,
.lightbox-content iframe { max-width:90vw; max-height:90vh; }

/* 간단 좌우 버튼 (선택) */
.slider::before,
.slider::after {
  content:''; position:absolute; top:50%; width:2rem; height:2rem; background:rgba(255,255,255,0.7); transform:translateY(-50%); cursor:pointer; z-index:10;
}
.slider::before { left:0.5rem; mask:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg>') center/contain no-repeat; }
.slider::after  { right:0.5rem; mask:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg>') center/contain no-repeat; }


/* 탭스 */
    /* Style the tab */
    .tabs-tab {
      overflow: hidden;
      border: 1px solid #ccc;
      background-color: #f1f1f1;
    }

    /* Style the buttons inside the tab */
    .tabs-tab button {
      background-color: inherit;
      float: left;
      border: none;
      outline: none;
      cursor: pointer;
      padding: 15px 15px;
      transition: 0.3s;
      font-size: 17px;
    }

    /* Change background color of buttons on hover */
    .tabs-tab button:hover {
      background-color: #ddd;
    }

    /* Active tab link */
    .tabs-tab button.tabs-active {
        background-color: #007BFF; /* 파란색 */
  color: white;  
    }

    /* Style the tab content */
    .tabs-content {
      display: none;
      padding: 0;
      border: 1px solid #ccc;
      border-top: none;
    }