/* ===================================
   Stay 검색 페이지 스타일
   =================================== */

:root {
    --primary-orange: #FF8400;
    --text-black: #0A0A0A;
    --text-gray: #797979;
    --text-dark-gray: #4E4E4E;
    --border-beige: #FFEFD8;
    --bg-light-blue: #DFE5FF;
    --bg-blue: #4285F4;
    --bg-white: #FFFFFF;
}

/* Desktop First start!! */
/* Desktop First end... */
html {
    -webkit-touch-callout: none;
    /* -webkit-user-select: none; */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
    font-family: 'Pretendard', 'Segoe UI', sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    line-height: 1.5;
}

ul {
    list-style: none !important;
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none;
}

input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
}

select {
    outline: none;
}

*:focus {
    outline: none !important;
    box-shadow: none !important;
}

input:focus {
    border-color: #97CAC7;
}

/* IE10 이상에서 input box 에 추가된 지우기 버튼 제거 */
input::-ms-clear {
    display: none;
}

/* input type number 에서 화살표 제거 */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* ios, 익스플로어 select 스타일 제거 */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

select::-ms-expand {
    display: none;
}

/* ios select 스타일 제거 */

/* 버튼 클릭시 라인 테두리 제거 */
button {
    border: none;
}

button:focus {
    outline: none;
}

/* ===================================
   메인 컨테이너
   =================================== */
.stay-main {
    width: 100%;
    min-height: 100vh;
}

/* ===================================
   Hero Section
   =================================== */
.filter-wrap {
    margin-top: 56px;
    width: 100%;
    height: 390px;
    background:
        url('https://d1o1f0h6tnvilz.cloudfront.net/stay/stay_filter_bg.jpg?v=1') center/cover;
}

.stay-hero {
    width: 620px;
    height: 60%;
    margin: 0 auto;
    display: flex;
    align-items: end;
    position: relative;
}

.stay-hero-content {
    text-align: left;
    color: var(--bg-white);
    z-index: 1;
}

.stay-label {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.19;
    margin-bottom: 18px;
}

.stay-title {
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 40px;
    line-height: 1.19;
    margin: 0;
}

.stay-title .mobile-br {
    display: none;
}

.stay-subtitle {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
    margin-top: 12px;
    margin-bottom: 0;
}

/* ===================================
   Filter Section
   =================================== */
.stay-filter {
    padding: 40px 0;
}

.stay-filter-container {
    max-width: 620px;
    margin: 0 auto;
}

.select-wrap {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    align-self: stretch;
}

.select-wrap .con {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
}

.select-wrap .con:last-child {
    flex: 0 0 auto;
}

.btn-search {
    width: 120px;
    height: 56px;
    background: var(--primary-orange);
    border: none;
    border-radius: 8px;
    font-family: 'Pretendard', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--bg-white);
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-search:hover {
    background: #FF7300;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 132, 0, 0.3);
}

.btn-search:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(255, 132, 0, 0.2);
}

.select-wrap .con strong {
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.19;
    color: var(--text-black);
}

.selectbox {
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
}

.selectbtn {
    font-size: 16px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    display: flex;
    flex: 1;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid #d7d7d7;
    background-color: #ffffff;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    transition: border-color 0.3s ease;
}

.selectbtn:hover {
    border-color: var(--primary-orange);
}

.selectbtn .select_text {
    color: var(--text-black);
}

.downarrow {
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='10' viewBox='0 0 18 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L9 9L17 1' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 10px;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.selectbtn.active .downarrow {
    transform: rotate(180deg);
}

.selectlist {
    border: 1px solid #d7d7d7;
    background: #FFF;
    width: 100%;
    position: absolute;
    top: 100%;
    margin-top: 4px;
    display: none;
    z-index: 10;
    max-height: 200px;
    overflow-y: auto;
}

.selectlist.o {
    z-index: 20;
}

.selectlist::-webkit-scrollbar {
    width: 3px;
}

.selectlist::-webkit-scrollbar-thumb {
    background: #A7A7A7;
}

.selectlist li {
    padding: 12px 16px;
    font-family: 'Pretendard', sans-serif;
    font-size: 16px;
    color: var(--text-black);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.selectlist li:hover {
    background-color: rgba(255, 153, 0, 0.1);
}

.selectlist li.selected {
    background-color: rgba(255, 153, 0, 0.2);
    font-weight: 600;
}

/* DateRangePicker 스타일 */
.date-range-box {
    position: relative;
}

.date-input-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.date-input-wrapper input {
    color: #000;
    font-size: 16px;
    font-family: 'Pretendard', sans-serif;
    padding: 14px 16px 14px 48px;
    border: 1px solid #d7d7d7;
    outline: none;
    width: 100%;
    cursor: pointer;
    background-color: #ffffff;
    transition: border-color 0.3s ease;
}

.date-input-wrapper input:hover {
    border-color: var(--primary-orange);
}

.date-input-wrapper input::placeholder {
    color: #999;
}

.date-input-wrapper .calendar-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='16' viewBox='0 0 17 16' fill='none'%3E%3Cg clip-path='url(%23clip0_18_16)'%3E%3Cpath d='M6.5 6H7.5V7H6.5V6ZM9.5 12H10.5V13H9.5V12ZM12.5 6H13.5V7H12.5V6ZM9.5 6H10.5V7H9.5V6ZM6.5 8H7.5V9H6.5V8ZM3.5 8H4.5V9H3.5V8ZM12.5 8H13.5V9H12.5V8ZM9.5 8H10.5V9H9.5V8ZM6.5 10H7.5V11H6.5V10ZM3.5 10H4.5V11H3.5V10ZM12.5 10H13.5V11H12.5V10ZM9.5 10H10.5V11H9.5V10ZM6.5 12H7.5V13H6.5V12ZM3.5 12H4.5V13H3.5V12ZM16.5 1V15H0.5V1H3.5V0H4.5V1H12.5V0H13.5V1H16.5ZM1.5 2V4H15.5V2H13.5V3H12.5V2H4.5V3H3.5V2H1.5ZM15.5 14V5H1.5V14H15.5Z' fill='black'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_18_16'%3E%3Crect width='16' height='16' fill='white' transform='translate(0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    pointer-events: none;
}

/* DateRangePicker 캘린더 커스텀 스타일 */
.daterangepicker {
    font-family: 'Pretendard', sans-serif;
    border: 1px solid #d7d7d7;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 10px;
}

/* 모바일에서 DateRangePicker 중앙 배치 */
@media (max-width: 820px) {
    .daterangepicker {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        max-width: 400px !important;
        z-index: 9999 !important;
        border-radius: 12px !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
    }

    /* 모바일에서 캘린더 테이블 크기 조정 */
    .daterangepicker .calendar-table {
        font-size: 14px;
    }

    .daterangepicker .calendar-table th,
    .daterangepicker .calendar-table td {
        min-width: 32px;
        height: 32px;
        line-height: 32px;
    }

    .daterangepicker.show-calendar .drp-buttons {
        display: flex !important;
        flex-direction: row !important;
        gap: 2px !important;
    }

    .daterangepicker .drp-selected {
        font-size: 14px;
        padding-top: 5px;
        line-height: 1.1;
    }

    /* 모바일에서 버튼 크기 조정 */
    .daterangepicker .btn {
        padding: 10px 20px !important;
        font-size: 15px !important;
    }
}

/* 작은 모바일 화면에서 DateRangePicker 추가 조정 */
@media (max-width: 480px) {

    .daterangepicker .calendar-table th,
    .daterangepicker .calendar-table td {
        min-width: 28px !important;
        height: 28px !important;
        line-height: 28px !important;
        font-size: 13px !important;
    }

    .daterangepicker .btn {
        padding: 8px 16px !important;
        font-size: 14px !important;
    }
}

/* DateRangePicker 활성화 시 body 스크롤 방지 */
body.daterangepicker-open {
    overflow: hidden !important;
}

.daterangepicker .calendar-table {
    border: none;
    background-color: #fff;
}

.daterangepicker .calendar-table thead tr th {
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    color: var(--text-black);
}

.daterangepicker .calendar-table tbody tr td {
    font-family: 'Pretendard', sans-serif;
    color: var(--text-black);
}

/* 선택된 날짜 */
.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: var(--primary-orange);
    border-color: transparent;
    color: white;
}

/* 범위 내 날짜 */
.daterangepicker td.in-range {
    background-color: rgba(255, 153, 0, 0.1);
    color: var(--text-black);
}

/* 시작/종료일 */
.daterangepicker td.start-date,
.daterangepicker td.end-date {
    background-color: var(--primary-orange);
    color: white;
}

/* 호버 효과 */
.daterangepicker td.available:hover {
    background-color: rgba(255, 153, 0, 0.15);
    border-color: transparent;
}

/* 비활성화된 날짜 */
.daterangepicker td.disabled,
.daterangepicker td.off {
    color: #ccc;
    cursor: not-allowed;
}

/* 월 선택 드롭다운 */
.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    border: 1px solid #d7d7d7;
    border-radius: 4px;
    padding: 4px 8px;
}

/* 버튼 스타일 */
.daterangepicker .drp-buttons {
    border-top: 1px solid #ddd;
    padding-top: 10px;
    margin-top: 10px;
}

.daterangepicker .btn {
    font-family: 'Pretendard', sans-serif;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
}

.daterangepicker .applyBtn {
    background-color: var(--primary-orange);
    border-color: var(--primary-orange);
    color: white;
}

.daterangepicker .cancelBtn {
    background-color: #f5f5f5;
    border-color: #d7d7d7;
    color: var(--text-black);
}

.daterangepicker .cancelBtn:hover {
    background-color: #e0e0e0;
}

/* ===================================
   Room List Section
   =================================== */
.stay-room-list {
    padding: 60px 0 100px;
    background: var(--bg-white);
}

.stay-container {
    max-width: 1200px;
    margin: 0 auto;
}

.room-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.room-card-link {
    text-decoration: none !important;
    color: inherit !important;
    display: block;
    transition: transform 0.3s ease;
}

.room-card-link:hover {
    text-decoration: none !important;
    transform: translateY(-5px);
}

.room-card-link:visited,
.room-card-link:active,
.room-card-link:focus {
    text-decoration: none !important;
    color: inherit !important;
}

.loading-message,
.no-results-message {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    font-family: 'Pretendard', sans-serif;
    font-size: 18px;
    color: var(--text-gray);
}

/* ===================================
   Room Card
   =================================== */
.room-card {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.room-card:hover {
    transform: translateY(-4px);
}

.room-card-image {
    position: relative;
    width: 100%;
    height: 230px;
    background: #f5f5f5;
    margin-bottom: 16px;
    overflow: hidden;
}

.promotion-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background-color: #dc3545;
    color: #ffffff;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 4px;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.room-swiper {
    width: 100%;
    height: 100%;
    position: relative;
    touch-action: pan-y;
}

.room-swiper .swiper-wrapper {
    width: 100%;
    height: 100%;
}

.room-swiper .swiper-slide {
    width: 100% !important;
    max-width: 100%;
    height: 100%;
    overflow: hidden;
    flex-shrink: 0;
    background-color: #f5f5f5;
}

.room-swiper .swiper-button-prev,
.room-swiper .swiper-button-next {
    width: 40px;
    height: 40px;
    background-size: 7px 14px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    z-index: 20;
    transition: opacity 0.3s ease;
}

.room-swiper .swiper-button-prev:hover,
.room-swiper .swiper-button-next:hover {
    opacity: 0.7;
}

.room-swiper .swiper-button-prev {
    left: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='7' height='14' viewBox='0 0 7 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 1L1 7L6 13' stroke='%23FFFFFF' stroke-width='2'/%3E%3C/svg%3E");
}

.room-swiper .swiper-button-next {
    right: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='7' height='14' viewBox='0 0 7 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 7L1 13' stroke='%23FFFFFF' stroke-width='2'/%3E%3C/svg%3E");
}

.room-swiper .swiper-button-prev::after,
.room-swiper .swiper-button-next::after {
    display: none !important;
    content: '' !important;
}

/* Swiper 기본 SVG 아이콘 숨기기 */
.room-swiper .swiper-button-prev svg,
.room-swiper .swiper-button-next svg,
.room-swiper .swiper-button-prev img,
.room-swiper .swiper-button-next img,
.room-swiper .swiper-navigation-icon {
    display: none !important;
}

.room-swiper .swiper-pagination {
    bottom: 10px;
    z-index: 15;
    pointer-events: auto;
}

.room-swiper .swiper-pagination-bullet {
    background: rgba(0, 0, 0, 0.5);
    opacity: 1;
    cursor: pointer;
    width: 8px;
    height: 8px;
}

.room-swiper .swiper-pagination-bullet-active {
    background: var(--bg-white);
}

.image-counter {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.5);
    color: var(--bg-white);
    padding: 4px 12px;
    border-radius: 10px;
    font-family: 'Pretendard', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.19;
    z-index: 10;
    pointer-events: none;
}

.no-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
}

.no-image-placeholder span {
    font-family: 'Pretendard', sans-serif;
    font-size: 16px;
    color: #999;
}

.room-card-content {
    display: flex;
    flex-direction: column;
}

.room-property {
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.19;
    color: var(--primary-orange);
}

.room-info-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.room-name-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
}

.room-name {
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.5;
    color: var(--text-black);
    margin: 0;
}

.room-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.room-area,
.room-bed,
.room-type {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.19;
    color: #a65e3b;
    text-align: right;
    margin: 0px;
}

.room-price {
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 1;
    color: var(--text-black);
}

.room-price-original {
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.2;
    color: #999;
    text-decoration: line-through;
    margin-bottom: 4px;
}

.room-price2 {
    font-size: 15px;
    font-weight: 500;
    color: #797979;
}

.room-price-label {
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.19;
    color: var(--text-gray);
    display: block;
    margin-bottom: 4px;
}

.room-badges {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.badge {
    padding: 4px 12px;
    border-radius: 0;
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.19;
    text-align: center;
    display: inline-block;
}

.badge-available {
    background: var(--bg-light-blue);
    color: var(--text-dark-gray);
}

.badge-duration {
    background: var(--bg-light-blue);
    color: var(--text-dark-gray);
}

.badge-instant {
    background: var(--bg-blue);
    color: var(--bg-white);
}

/* 지하철역 정보 스타일 */
.room-subway {
    margin-top: 8px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
}

.subway-station {
    display: flex;
    align-items: center;
    gap: 6px;
}

.station-name {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 0.8;
    color: var(--text-black);
}

.subway-lines {
    display: flex;
    gap: 4px;
    align-items: center;
}

.subway-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: #FFFFFF;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    flex-shrink: 0;
}

/* 신림선 아이콘만 가로로 늘린 알약형 */
.subway-badge.subway-line-sinrim {
    width: 32px;
    height: 20px;
    border-radius: 10px;
    font-size: 10px;
    padding: 0 6px;
}

/* 지하철 호선별 색상 (백업용 - 인라인 스타일이 우선) */
.subway-line-1 {
    background-color: #0052A4;
}

.subway-line-2 {
    background-color: #00A84D;
}

.subway-line-3 {
    background-color: #EF7C1C;
}

.subway-line-4 {
    background-color: #00A5DE;
}

.subway-line-5 {
    background-color: #996CAC;
}

.subway-line-6 {
    background-color: #CD7C2F;
}

.subway-line-7 {
    background-color: #747F00;
}

.subway-line-8 {
    background-color: #E6186C;
}

.subway-line-9 {
    background-color: #BDB092;
}

.subway-line-sinrim {
    background-color: #6789CA;
}

/* ===================================
   Responsive - 1200px
   =================================== */
@media (max-width: 1200px) {

    .stay-filter-container,
    .stay-container {
        padding: 0px;
    }

    .room-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

/* ===================================
   Responsive - 1024px
   =================================== */
@media (max-width: 1024px) {

    .stay-title {
        font-size: 32px;
    }

    .stay-filter-container,
    .stay-container {
        padding: 0px;
    }

    .stay-room-list {
        padding: 40px 20px 60px;
    }

    .room-grid {
        gap: 24px;
    }

    .room-card-image {
        height: 200px;
    }
}

/* ===================================
   Responsive - 820px (Mobile)
   =================================== */
@media (max-width: 820px) {
    .stay-hero {
        height: 234px;
        width: 100%;
        padding: 0 40px;
    }

    .stay-label {
        font-size: 22px;
    }

    .stay-title {
        font-size: 30px;
    }

    .stay-title .mobile-br {
        display: block;
    }

    .stay-filter {
        padding: 50px 20px;
    }

    .stay-filter-container {
        padding: 0 20px;
    }

    .select-wrap {
        gap: 16px;
    }

    .selectbox {
        align-self: stretch;
    }

    .stay-room-list {
        padding: 40px 0 60px;
    }

    .stay-container {
        padding: 0 40px;
    }

    .room-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .room-card-image {
        height: 203px;
    }

    .room-name {
        font-size: 18px;
    }

    .room-area,
    .room-bed,
    .room-type {
        font-size: 16px;
    }

    .room-price {
        font-size: 20px;
    }

    .room-price2 {
        font-size: 14px;
    }

    .badge {
        font-size: 12px;
        padding: 3px 10px;
    }

    .room-subway {
        margin-top: 10px;
        gap: 10px;
    }

    .station-name {
        font-size: 12px;
    }

    .subway-badge {
        width: 18px;
        height: 18px;
        font-size: 10px;
    }

    /* 신림선 아이콘만 가로로 늘린 알약형 (모바일) */
    .subway-badge.subway-line-sinrim {
        width: 28px;
        height: 18px;
        border-radius: 9px;
        font-size: 9px;
        padding: 0 5px;
    }
}

/* ===================================
   Responsive - Small Mobile (280px-820px)
   =================================== */
@media all and (min-width: 280px) and (max-width: 820px) {
    .filter-wrap {
        height: 254px;
        background-image: url('https://d1o1f0h6tnvilz.cloudfront.net/stay/stay_filter_bg_mo.jpg?v=1');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .stay-hero {
        height: 150px;
        padding: 0 20px;
    }

    .stay-label {
        font-size: 15px;
        margin-bottom: 12px;
    }

    .stay-title {
        font-size: 25px;
        line-height: 1.2;
    }

    .stay-title .mobile-br {
        display: block;
    }

    .stay-subtitle {
        font-size: 14px;
        margin-top: 8px;
    }

    .stay-filter {
        padding: 26px 0px;
    }

    .stay-filter-container {
        max-width: 100%;
    }

    /* 지점 선택 박스: 40% */
    .select-wrap .con:first-child {
        flex: 0 0 30%;
        max-width: 30%;
    }

    /* 날짜 선택 박스: 60% */
    .select-wrap .con:last-child {
        flex: 0 0 65%;
        max-width: 65%;
    }

    .selectbtn {
        font-size: 14px;
        padding: 9px 12px;
    }

    .date-input-wrapper input {
        padding: 10px 12px 8px 24px;
        font-size: 14px;
    }

    .date-input-wrapper .calendar-icon {
        left: 4px;
        width: 17px;
        height: 16px;
    }

    .datepicker-container {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 20px !important;
        background-color: rgba(0, 0, 0, 0.5) !important;
        z-index: 9999 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .datepicker-container .tui-datepicker {
        width: 100% !important;
        max-width: 90vw !important;
        background: white !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
        padding: 20px !important;
    }

    .stay-container {
        padding: 0 20px;
    }

    .btn-search {
        width: 100%;
    }
}

/* ===================================
   메인 페이지 콘텐츠 영역
   =================================== */
.stay-content {
    padding: 60px 0;
    background: var(--bg-white);
}

.stay-content .stay-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.content-placeholder {
    text-align: center;
    padding: 80px 20px;
    color: var(--text-gray);
    font-family: 'Pretendard', sans-serif;
    font-size: 16px;
    line-height: 1.6;
}

/* ===================================
   DatePicker Custom Styles
   =================================== */
.tui-datepicker {
    border: none;
    box-shadow: none;
}

.tui-calendar {
    width: 100%;
}

.tui-calendar-header {
    padding: 10px 0;
}

.tui-calendar-title {
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--text-black);
}

.tui-calendar-body-inner {
    padding: 10px 0;
}

.tui-calendar-btn {
    font-family: 'Pretendard', sans-serif;
}

.tui-is-selected {
    background-color: var(--primary-orange) !important;
    color: var(--bg-white) !important;
}

.tui-is-blocked {
    color: #ccc !important;
    cursor: not-allowed !important;
}

.tui-is-between-range {
    background-color: rgba(255, 132, 0, 0.1) !important;
}

/* ===================================
   Stay 상세 페이지 스타일
   =================================== */

#stay-detail {
    width: 100%;
    min-height: 100vh;
    padding-top: 80px;
    background: #FFFFFF;
}

@media (max-width: 767px) {
    #stay-detail {
        padding-top: 56px;
    }
}

/* 로딩 */
#stay-detail .loading-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

#stay-detail .loading-spinner {
    font-size: 18px;
    color: var(--text-gray);
}

/* 유틸리티 클래스 */
#stay-detail .desktop-only {
    display: block;
}

#stay-detail .mobile-only {
    display: none;
}

/* ===================================
   갤러리 섹션
   =================================== */
#stay-detail .gallery-section {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px 0 20px;
}

#stay-detail .gallery-container {
    position: relative;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 10px;
    height: 450px;
}

/* 모바일 갤러리 기본 숨김 */
#stay-detail .gallery-mobile {
    display: none;
}

/* PC 갤러리 표시 */
#stay-detail .gallery-desktop {
    display: contents;
}

#stay-detail .gallery-main {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    height: 100%;
    min-height: 0;
    max-height: 100%;
}

#stay-detail .main-image-wrap {
    width: 100%;
    height: 100%;
    cursor: pointer;
}

#stay-detail .main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

#stay-detail .main-image:hover {
    transform: scale(1.05);
}

#stay-detail .gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
    height: 100%;
    min-height: 0;
    max-height: 100%;
}

#stay-detail .grid-image-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    cursor: pointer;
    height: 100%;
}

#stay-detail .grid-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

#stay-detail .grid-image-wrap:hover img {
    transform: scale(1.1);
}

#stay-detail .more-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 24px;
    font-weight: 600;
}

#stay-detail .vr-tour-btn {
    position: absolute;
    top: 20px;
    left: 600px;
    padding: 10px 24px;
    background: rgba(255, 132, 0, 0.9);
    border: 1px solid #FFFFFF;
    border-radius: 50px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

#stay-detail .vr-tour-btn:hover {
    background: rgba(255, 132, 0, 1);
    transform: translateY(-2px);
}

#stay-detail .image-counter-badge {
    position: absolute;
    bottom: 20px;
    left: 20px;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 400;
}

/* ===================================
   메인 컨텐츠 영역
   =================================== */
#stay-detail .detail-main-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 80px;
}

#stay-detail .detail-container {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 60px;
}

#stay-detail .detail-info-area {
    width: 100%;
    padding: 24px 16px;
}

/* ===================================
   TAB 네비게이션
   =================================== */
#stay-detail .detail-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #ECECEC;
    margin-bottom: 40px;
    position: sticky;
    top: 80px;
    background: #FFFFFF;
    z-index: 100;
    padding: 10px 0px;
    max-width: 1200px;
}

/* 탭 고정 상태 (헤더 아래 고정, 전체 nav 폭 유지) */
#stay-detail .detail-tabs.is-fixed {
    top: 80px;
    /* 헤더 높이 */

    width: 740px;
    background: #FFFFFF;
    z-index: 1000;
    /* 컨텐츠 위에 표시 */
}

#stay-detail .tab-btn {
    flex: 1;
    padding: 12px 0;
    font-family: 'Pretendard', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-gray);
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    text-align: center;
}

#stay-detail .tab-btn:hover {
    color: var(--text-black);
}

#stay-detail .tab-btn.active {
    color: var(--text-black);
    font-weight: 600;
}

#stay-detail .tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--text-black);
}

/* ===================================
   방 기본 정보
   =================================== */
#stay-detail .room-basic-info {
    margin-bottom: 40px;
}

#stay-detail .room-badge-area {
    display: none;
    gap: 8px;
    margin-bottom: 12px;
}

#stay-detail .property-name-badge {
    display: inline-block;
    padding: 2px 10px;
    background: #FFEFD8;
    border-radius: 4px;
    color: #F85700;
    font-size: 13px;
    font-weight: 500;
}

#stay-detail .availability-badge {
    display: inline-block;
    padding: 2px 10px;
    background: #F3F4F6;
    border-radius: 100px;
    color: #6B7280;
    font-size: 13px;
    font-weight: 700;
}

#stay-detail .room-title {
    font-size: 28px;
    color: #0A0A0A;
    margin: 0 0 16px 0;
    line-height: 1.4;
}

#stay-detail .room-location-info {
    display: none;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

#stay-detail .metro-lines {
    display: flex;
    gap: 4px;
}

#stay-detail .metro-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
}

#stay-detail .station-name {
    font-size: 16px;
    color: #6B7280;
}

#stay-detail .distance-text {
    font-size: 16px;
    color: #6B7280;
}

#stay-detail .room-spec-info {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

#stay-detail .spec-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #A65E3B;
    font-size: 16px;
}

#stay-detail .room-rating-info {
    display: none;
    align-items: center;
    gap: 4px;
    margin-bottom: 24px;
}

#stay-detail .rating-value {
    font-size: 20px;
    font-weight: 700;
    color: #0A0A0A;
}

#stay-detail .room-description {
    font-size: 18px;
    font-weight: 400;
    color: #0A0A0A;
    line-height: 1.6;
    margin-bottom: 0px;
}

/* 3D 투어 버튼 (PC/모바일) - 클릭 가능하도록 커서 포인터 */
#stay-detail [onclick="openVrTour()"] {
    cursor: pointer;
}

/* 3D 투어 버튼 (모바일) */
#stay-detail .mobile-vr-tour-container {
    margin-top: 20px;
    width: 100%;
    cursor: pointer;
}

#stay-detail .vr-tour-wrapper {
    position: relative;
    border-radius: 8px;
    width: 100%;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.2s;
}

#stay-detail .vr-tour-content {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    width: 100%;
    background: #FFFFFF;
}

#stay-detail .vr-icon-box {
    width: 44px;
    height: 38px;
    position: relative;
    flex-shrink: 0;
}

#stay-detail .vr-icon-inner {
    position: absolute;
    width: 44px;
    height: 39px;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scaleY(-1) rotate(180deg);
}

#stay-detail .vr-icon-img,
#stay-detail .vr-icon-video {
    width: 44px;
    height: 39px;
    object-fit: cover;
}

#stay-detail .vr-text-box {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 34px;
    padding: 0 8px;
    flex-shrink: 0;
}

#stay-detail .vr-title {
    color: #f85700;
    font-size: 18px;
    font-weight: 700;
    line-height: 26px;
}

#stay-detail .vr-arrow {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

#stay-detail .vr-border {
    position: absolute;
    inset: 0;
    border: 1px solid #f85700;
    border-radius: 8px;
    pointer-events: none;
    transition: all 0.2s;
}

#stay-detail .vr-tour-wrapper:active .vr-tour-content {
    background: #FFF5F0;
}

#stay-detail .vr-tour-wrapper:active {
    transform: scale(0.98);
}

@media (max-width: 767px) {
    #stay-detail .room-title {
        font-size: 28px;
    }

    #stay-detail .room-description {
        font-size: 18px;
    }
}

/* ===================================
   포함 옵션 섹션
   =================================== */
#stay-detail .options-section {
    margin-top: 60px;
    margin-bottom: 80px;
}

#stay-detail .section-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-black);
    margin: 0 0 30px 0;
}

#stay-detail .options-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 40px;
    width: 100%;
}

#stay-detail .option-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

#stay-detail .option-item img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    object-fit: contain;
}

#stay-detail .option-item span {
    font-size: 16px;
    font-weight: 400;
    color: #0A0A0A;
    white-space: nowrap;
}

/* ===================================
   INFORMATION 섹션
   =================================== */
#stay-detail .info-section {
    margin-bottom: 80px;
}

#stay-detail .notice-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#stay-detail .notice-list li {
    font-size: 16px;
    font-weight: 400;
    color: var(--text-black);
    line-height: 1.6;
    padding-left: 12px;
    position: relative;
    margin-bottom: 2px;
}

#stay-detail .notice-list li:last-child {
    margin-bottom: 0;
}

#stay-detail .notice-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--text-gray);
}

/* ===================================
   FAQ 섹션
   =================================== */
#stay-detail .faq-section {
    margin-bottom: 80px;
}



#stay-detail .faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    background: none;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    text-align: left;
}

#stay-detail .faq-question span {
    font-size: 18px;
    font-weight: 500;
    color: #242424;
    transition: color 0.3s ease;
}

#stay-detail .faq-item.active .faq-question span {
    font-weight: 700;
    color: var(--primary-orange);
}

#stay-detail .faq-question::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 12px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.3s ease, color 0.3s ease;
}

#stay-detail .faq-item.active .faq-question::after {
    transform: rotate(-135deg);
    color: var(--primary-orange);
}

#stay-detail .faq-icon {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

#stay-detail .faq-item.active .faq-icon {
    transform: rotate(180deg);
}

#stay-detail .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

#stay-detail .faq-item.active .faq-answer {
    max-height: 500px;
    padding-bottom: 20px;
}

#stay-detail .faq-answer p {
    background-color: #f3f4f6;
    font-size: 18px;
    font-weight: 500;
    color: #0a0a0a;
    line-height: 1.6;
    margin: 0;
    padding: 10px;
}

/* ===================================
   LOCATION 섹션
   =================================== */
#stay-detail .location-section {
    margin-bottom: 40px;
}

#stay-detail .location-title {
    font-size: 16px;
    color: #111827;
    margin-bottom: 12px;
}

#stay-detail .location-title .location-name {
    font-weight: 700;
    margin-right: 4px;
}

#stay-detail .location-title .location-address {
    font-weight: 400;
}

#stay-detail .location-subway {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px; /* 역 간 간격 */
    margin-bottom: 16px;
}

#stay-detail .location-subway-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#stay-detail .map-container {
    position: relative;
    width: 100%;
    height: 400px;
    border-radius: 0;
    overflow: hidden;
}

#stay-detail .map-container #map {
    width: 100%;
    height: 100%;
    border-radius: 0;
    border: none;
}

#stay-detail .map-link-btn {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 10;
    padding: 8px 16px;
    background: #0A0A0A;
    color: #FFFFFF;
    border: none;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

#stay-detail .map-link-btn:hover {
    background: #111827;
}

#stay-detail .map-controls {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
}

#stay-detail .custom_typecontrol {
    display: flex;
    background: #FFFFFF;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

#stay-detail .custom_typecontrol span {
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    border: none;
}

#stay-detail .custom_typecontrol .selected_btn {
    background: #ECECEC;
    font-weight: 600;
}

#stay-detail .location-info {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: #EEEEEE;
    border-radius: 0;
}

#stay-detail .location-text {
    display: flex;
    flex-direction: column;
}

#stay-detail .location-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-black);
    margin: 0 0 6px 0;
}

#stay-detail .location-address {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-black);
    margin: 0;
}

#stay-detail .map-link-btn {
    padding: 14px 28px;
    background: #0E0E0E;
    color: #FFFFFF;
    border: none;
    border-radius: 2px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

#stay-detail .map-link-btn:hover {
    opacity: 0.9;
}

/* ===================================
   커뮤니티 공간 섹션
   =================================== */
#stay-detail .community-grid-wrapper {
    position: relative;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
}

#stay-detail .community-grid-wrapper.collapsed {
    max-height: 700px;
}

#stay-detail .grid-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 180px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
    pointer-events: none;
    z-index: 5;
    display: none;
}

#stay-detail .community-grid-wrapper.collapsed .grid-overlay {
    display: block;
}

#stay-detail .community-more-btn-wrap {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    position: relative;
    z-index: 10;
}

#stay-detail .community-more-btn {
    width: 100%;
    max-width: 1200px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #FFFFFF;
    border: 1px solid #0A0A0A;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 400;
    color: #0A0A0A;
    transition: background-color 0.2s;
}

#stay-detail .community-more-btn:active {
    background-color: #F9FAFB;
}

#stay-detail .community-more-btn .arrow-icon {
    transition: transform 0.3s ease;
}

#stay-detail .community-more-btn.active .arrow-icon {
    transform: rotate(180deg);
}

#stay-detail .community-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

#stay-detail .community-item {
    position: relative;
    border-radius: 12px;
    width: 100%;
    flex-shrink: 0;
}

#stay-detail .community-card-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
    position: relative;
    border-radius: inherit;
    width: 100%;
}

#stay-detail .community-image-wrap {
    height: 180px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    width: 100%;
}

#stay-detail .community-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
}

#stay-detail .community-item:hover .community-image {
    transform: scale(1.05);
}

#stay-detail .community-text-content {
    min-height: 80px;
    width: 100%;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#stay-detail .community-title {
    font-size: 18px;
    font-weight: 700;
    color: #0A0A0A;
    line-height: 26px;
    margin: 0;
}

#stay-detail .community-description {
    font-size: 16px;
    font-weight: 400;
    color: #6B7280;
    line-height: 24px;
    margin: 0;
    word-break: break-all;
}

#stay-detail .community-border-overlay {
    position: absolute;
    inset: 0;
    border: 1px solid #DFE4EA;
    border-radius: 12px;
    pointer-events: none;
}


/* ===================================
   추천 대상 섹션
   =================================== */
#stay-detail .recommendation-section {
    background: #F9FAFB;
    border-radius: 10px;
    padding: 20px;
    margin: 40px 0px;
}

#stay-detail .recommendation-section .section-title {
    font-size: 20px;
    font-weight: 700;
    color: #0A0A0A;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
}

#stay-detail .recommendation-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#stay-detail .recommendation-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    font-weight: 400;
    color: #364153;
    line-height: 1.5;
}

#stay-detail .recommendation-list li svg {
    margin-top: 2px;
    flex-shrink: 0;
}

/* ===================================
   Place 정보 섹션
   =================================== */
#stay-detail .place-info-section {
    margin-bottom: 80px;
}

#stay-detail .place-info-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    margin-top: 10px;
}

#stay-detail .place-category-box {
    position: relative;
    padding: 0 24px;
}

#stay-detail .place-category-box:first-child {
    padding-left: 0;
}

#stay-detail .place-category-box:last-child {
    padding-right: 0;
}

#stay-detail .place-category-box:not(:first-child)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #DFE4EA;
}

#stay-detail .place-category-header {
    padding: 0;
}

#stay-detail .place-category-title {
    font-size: 18px;
    font-weight: 700;
    color: #0A0A0A;
    line-height: 26px;
    margin-bottom: 20px;
}

#stay-detail .place-item-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
}

#stay-detail .place-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

#stay-detail .place-item-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

#stay-detail .place-icon {
    width: 20px;
    height: 20px;
}

#stay-detail .place-name {
    font-size: 14px;
    font-weight: 400;
    color: #0A0A0A;
    line-height: 22px;
}

#stay-detail .place-desc {
    font-size: 14px;
    font-weight: 400;
    color: #6B7280;
    line-height: 22px;
}

/* ===================================
   리뷰 섹션
   =================================== */
#stay-detail .reviews-section {
    margin-bottom: 80px;
}

#stay-detail .reviews-section .section-title {
    margin-bottom: 0px !important;
}

#stay-detail .review-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
}

@media (min-width: 769px) {
    #stay-detail .review-list {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 24px;
        row-gap: 12px;
    }
}

#stay-detail .review-item {
    background: #f9fafb;
    position: relative;
    border-radius: 8px;
    width: 100%;
    overflow: hidden;
    height: 48px;
}

#stay-detail .review-item-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    z-index: 0;
    transition: width 0.6s ease-out;
}

#stay-detail .review-item-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 16px;
}

#stay-detail .review-item-main {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

#stay-detail .review-item-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#stay-detail .review-item-title {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: #000;
}

#stay-detail .review-item-count {
    font-size: 14px;
    font-weight: 700;
    color: #6b7280;
    white-space: nowrap;
}

/* 유틸리티 클래스 추가 (Bootstrap 4 alpha 버전 부족분 및 디자인 대응) */
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

.items-center {
    align-items: center;
}

.items-start {
    align-items: flex-start;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.size-full {
    width: 100%;
    height: 100%;
}

.shrink-0 {
    flex-shrink: 0;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-clip {
    overflow: hidden;
}

.overflow-visible {
    overflow: visible;
}

.z-1 {
    z-index: 1;
}

.flex-1 {
    flex: 1 1 0%;
}

.flex-none {
    flex: none;
}

.w-full {
    width: 100%;
    height: 100%;
}

.h-full {
    height: 100%;
}

.gap-2 {
    gap: 2px;
}

.gap-4 {
    gap: 4px;
}

.gap-8 {
    gap: 8px;
}

.gap-10 {
    gap: 10px;
}

.gap-12 {
    gap: 12px;
}

.gap-16 {
    gap: 16px;
}

.gap-24 {
    gap: 24px;
}

.gap-50 {
    gap: 50px;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-3 {
    margin-bottom: 1rem !important;
}

/* 폰트 관련 */
.not-italic {
    font-style: normal;
}

.whitespace-nowrap {
    white-space: nowrap;
}

.text-center {
    text-align: center;
}

/* 3D 버튼 특수 스타일 */
.-scale-y-100 {
    transform: scaleY(-1);
}

.rotate-180 {
    transform: rotate(180deg);
}

.desktop-only {
    display: block;
}

.mobile-only {
    display: none;
}

@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: block !important;
    }
}


/* ===================================
   결제 영역 (PC)
   =================================== */
/* ===================================
   결제 영역 (PC)
   =================================== */
#stay-detail .payment-sidebar {
    width: 360px;
    padding-top: 24px;
}

#stay-detail .payment-box {
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 24px;
    background: #FFFFFF;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

#stay-detail .payment-box.sticky {
    position: sticky;
    top: 120px;
}

/* 결제 박스 고정 상태 */
#stay-detail .payment-box.is-fixed {
    position: fixed;
    top: 80px;
    z-index: 1000;
    width: 360px;
}

#stay-detail .payment-field {
    margin-bottom: 24px;
}

#stay-detail .payment-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #5E6C84;
    margin-bottom: 8px;
}

#stay-detail .date-picker-trigger {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border: 1px solid #0A0A0A;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFF;
    cursor: pointer;
    transition: all 0.2s ease;
}

#stay-detail .date-picker-trigger:hover {
    background: #FAFAFA;
}

#stay-detail .date-picker-trigger .date-text {
    font-size: 16px;
    font-weight: 500;
    color: #0A0A0A;
}

#stay-detail .date-picker-trigger .placeholder {
    font-size: 16px;
    color: #9CA3AF;
}

#stay-detail .price-display-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#stay-detail .final-price-display {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

#stay-detail .total-price {
    font-family: 'Pretendard', sans-serif;
    letter-spacing: -0.5px;
}

#stay-detail .price-suffix {
    font-size: 16px;
    font-weight: 400;
    color: #797979;
}

#stay-detail .price-includes {
    background: #F3F4F6;
    border-radius: 4px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #797979;
    font-weight: 400;
}

#stay-detail .payment-btn {
    width: 100%;
    height: 56px;
    background: #0A0A0A;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

#stay-detail .payment-btn:hover {
    opacity: 0.9;
}

/* ===================================
   모바일 하단 결제바
   =================================== */
#stay-detail .payment-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #FFFFFF;
    border-top: 1px solid #ECECEC;
    padding: 24px 20px;
    display: none;
    /* JS에 의해 모바일에서 block 됨 */
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

#stay-detail .payment-bar-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

/* 행(Row) 공통 스타일 */
#stay-detail .mobile-date-row,
#stay-detail .mobile-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* 라벨 (아이콘 + 텍스트) */
#stay-detail .mobile-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #5E6C84;
}

#stay-detail .mobile-label svg {
    width: 16px;
    height: 16px;
    stroke: #5E6C84;
}

/* 날짜 입력 박스 (이미지 1 참고) */
#stay-detail .mobile-input-box {
    width: 270px;
    /* 적절한 너비 */
    height: 48px;
    border: 1px solid #0A0A0A;
    border-radius: 8px;
    /* 둥근 모서리 */
    background: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 500;
    color: #0A0A0A;
    cursor: pointer;
}

/* 가격 정보 (이미지 2 참고) */
#stay-detail .mobile-price-value {
    text-align: right;
}

#stay-detail .mobile-price-value .final-price {
    font-size: 20px;
    font-weight: 700;
    color: #0A0A0A;
}

#stay-detail .mobile-price-value .currency {
    font-size: 20px;
}

#stay-detail .mobile-price-value .price-suffix-mobile {
    font-size: 14px;
    color: #797979;
    font-weight: 400;
}

/* 예약 버튼 (이미지 2 참고) */
#stay-detail .mobile-btn-row {
    width: 100%;
    margin-top: 8px;
}

#stay-detail .payment-btn-mobile {
    width: 100%;
    height: 56px;
    background: #0A0A0A;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
}

/* 입주 기간 섹션 */
#stay-detail .date-section {
    padding: 10px 20px 0px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#stay-detail .date-section:active {
    background: #F8F9FA;
}

#stay-detail .date-label {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-gray);
}

#stay-detail .date-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#stay-detail .date-value .date-text {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-black);
}

#stay-detail .date-value::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>') no-repeat center;
    background-size: contain;
}

/* 가격 & 결제 섹션 */
#stay-detail .price-section {
    padding: 0px 20px 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

#stay-detail .price-label {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-gray);
    margin-bottom: 4px;
    letter-spacing: -1px;
}

#stay-detail .price-value-wrapper {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 4px;
    justify-content: space-between;
}

#stay-detail .price-original-wrapper-mobile {
    display: flex;
    align-items: center;
    gap: 8px;
}

#stay-detail .price-original-mobile {
    font-size: 16px;
    font-weight: 500;
    color: #999;
    text-decoration: line-through;
}

#stay-detail .price-discount-wrapper-mobile {
    width: 22%;
    display: flex;
    align-items: center;
    text-align: right;
}

#stay-detail .price-discount-percent-mobile {
    font-size: 20px;
    font-weight: 700;
    color: #dc3545;
}

#stay-detail .price-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-black);
}

#stay-detail .payment-btn-mobile {
    color: #FFFFFF;
    border: none;
    border-radius: 0;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.3s ease;
    border-radius: 8px;
}

#stay-detail .payment-btn-mobile:active {
    opacity: 0.8;
}

/* ===================================
   반응형: 태블릿 (max-width: 1200px)
   =================================== */
@media (max-width: 1200px) {
    #stay-detail .detail-container {
        grid-template-columns: 1fr 320px;
        gap: 40px;
    }

    #stay-detail .payment-sidebar {
        width: 320px;
    }

    #stay-detail .gallery-container {
        height: 400px;
    }
}

/* ===================================
   반응형: 태블릿 (max-width: 1024px)
   =================================== */
@media (max-width: 1024px) {
    body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        /* iOS 부드러운 스크롤 */
        position: relative !important;
        min-height: 100vh !important;
        height: auto !important;
    }

    body#stay-detail {
        padding-bottom: 147px !important;
        /* 하단 결제바 높이만큼 여백 추가 */
    }

    html {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        height: auto !important;
    }

    /* 모바일 디바이스 특별 처리 */
    @supports (-webkit-touch-callout: none) {
        body {
            min-height: -webkit-fill-available !important;
        }
    }

    #stay-detail .detail-container {
        grid-template-columns: 1fr;
        gap: 0;
    }

    #stay-detail .payment-sidebar {
        display: none;
    }

    #stay-detail .desktop-only {
        display: none;
    }

    #stay-detail .mobile-only {
        display: block;
    }

    /* 모바일(<=1024px)에서 하단 결제바 표시 */
    #stay-detail .payment-bottom-bar {
        display: flex;
    }

    #stay-detail .gallery-container {
        height: 350px;
    }

    #stay-detail .community-grid {
        grid-template-columns: 1fr;
    }
}

/* ===================================
   반응형: 모바일 (max-width: 820px)
   =================================== */
@media (max-width: 820px) {
    #stay-detail {
        padding-top: 56px;
    }

    #stay-detail .gallery-section {
        padding: 0;
    }

    #stay-detail .gallery-container {
        grid-template-columns: 1fr;
        height: 220px;
        gap: 0;
    }

    /* PC 갤러리 숨김 */
    #stay-detail .gallery-desktop {
        display: none;
    }

    /* 모바일 Swiper 표시 */
    #stay-detail .gallery-mobile {
        display: block;
        width: 100%;
        height: 100%;
    }

    #stay-detail .gallery-mobile .swiper-slide {
        width: 100%;
        height: 100%;
    }

    #stay-detail .gallery-mobile .swiper-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Swiper Navigation 버튼 */
    #stay-detail .gallery-mobile .swiper-button-prev,
    #stay-detail .gallery-mobile .swiper-button-next {
        width: 32px;
        height: 32px;
        background: rgb(90 85 85 / 50%);
        ;
        border-radius: 50%;
        color: hsl(0, 0%, 100%);
    }

    #stay-detail .gallery-mobile .swiper-button-prev:after,
    #stay-detail .gallery-mobile .swiper-button-next:after {
        font-size: 16px;
        font-weight: 1000;
    }

    #stay-detail .gallery-mobile .swiper-button-prev {
        left: 12px;
    }

    #stay-detail .gallery-mobile .swiper-button-next {
        right: 12px;
    }

    #stay-detail .vr-tour-btn {
        top: 12px;
        left: auto;
        right: 12px;
        padding: 8px 16px;
        font-size: 13px;
        border-radius: 20px;
        background: rgba(255, 132, 0, 0.7);
        border: none;
    }

    #stay-detail .image-counter-badge {
        bottom: 12px;
        left: auto;
        right: 12px;
        background: rgba(0, 0, 0, 0.6);
        border-radius: 4px;
        padding: 4px 10px;
        font-size: 13px;
        font-weight: 500;
    }

    #stay-detail .detail-main-wrapper {
        padding: 0 0 100px;
    }

    #stay-detail .room-basic-info {
        padding: 24px 20px;
        margin-bottom: 0;
        border-bottom: 6px solid #ECECEC;
    }

    #stay-detail .room-title {
        font-size: 28px;
    }

    #stay-detail .room-spec {
        font-size: 14px;
    }

    #stay-detail .room-description {
        font-size: 18px;
    }

    #stay-detail .options-section {
        padding: 30px 0px;
        margin: 0px;
    }
    #stay-detail .info-section,
    #stay-detail .faq-section,
    #stay-detail .location-section {
        padding: 30px 0px;
        margin-bottom: 0;
    }

    #stay-detail .community-section {
        padding: 30px 0px;
        margin-bottom: 0;
    }

    #stay-detail .section-title {
        font-size: 24px;
        font-weight: 400;
        margin-bottom: 20px;
    }


    #stay-detail .notice-list li {
        font-size: 14px;
    }

    #stay-detail .faq-question span {
        font-size: 14px;
    }

    #stay-detail .faq-answer p {
        font-size: 14px;
    }

    #stay-detail .map-container {
        height: 320px;
        border-radius: 0;
    }

    #stay-detail .location-title .location-name,
    #stay-detail .location-title .location-address {
        display: block;
    }

    #stay-detail .location-subway {
        display: none;
    }

    #stay-detail .community-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 0px;
    }

    #stay-detail .community-grid-wrapper.collapsed {
        max-height: 850px;
        /* roughly 3 items */
    }

    #stay-detail .grid-overlay {
        display: none !important;
    }

    #stay-detail .community-more-btn-wrap {
        padding: 0 16px;
    }

    #stay-detail .community-more-btn {
        max-width: none;
    }

    #stay-detail .recommendation-section {
        padding: 30px 24px;
        margin-bottom: 0;
    }

    #stay-detail .place-info-section,
    #stay-detail .reviews-section {
        padding: 30px 0px;
        margin-bottom: 0;
    }


    #stay-detail .place-info-container {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    #stay-detail .place-category-box {
        padding: 0;
    }

    #stay-detail .place-category-box:not(:first-child)::before {
        display: none;
    }

    #stay-detail .place-category-box::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;
        background-color: #DFE4EA;
    }

    #stay-detail .place-category-header {
        padding: 8px 8px 0;
    }

    #stay-detail .place-category-title {
        margin-bottom: 12px;
    }

    #stay-detail .place-item-list {
        padding: 0 8px 16px;
    }


    #stay-detail .review-summary-grid {
        grid-template-columns: 1fr;
    }

    /* 모바일 채널톡 버튼 */
    #stay-detail .mobile-channel-talk-btn {
        position: fixed;
        right: 20px;
        bottom: 167px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #000000;
        color: #ffffff;
        border: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-family: 'Pretendard', sans-serif;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.2;
        cursor: pointer;
        z-index: 1001;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    #stay-detail .mobile-channel-talk-btn:hover {
        transform: scale(1.05);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    }

    #stay-detail .mobile-channel-talk-btn:active {
        transform: scale(0.95);
    }

    #stay-detail .mobile-channel-talk-btn span {
        display: block;
        text-align: center;
    }
}

@media (max-width: 600px) {
    #stay-detail .location-info {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 16px;
    }

    #stay-detail .location-name {
        font-size: 18px;
    }

    #stay-detail .location-address {
        font-size: 15px;
    }

    #stay-detail .map-link-btn {
        width: 100%;
        padding: 12px 20px;
        font-size: 15px;
    }
}

@media all and (min-width: 280px) and (max-width: 820px) {
    #stay-detail .detail-tabs {
        display: none;
    }
}

/* ===================================
   Lightbox 커스터마이징
   =================================== */
.glightbox-container .gslide-description {
    background: rgba(0, 0, 0, 0.8);
}

/* ===================================
   Stay 예약 페이지 (#stay-reservation)
   =================================== */
#stay-reservation {
    width: 100%;
    min-height: 100vh;
    background: #FFFFFF;
    padding-top: 56px;
}

#stay-reservation .loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

#stay-reservation .loading-spinner {
    font-size: 16px;
    color: #797979;
}

#stay-reservation .reservation-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px 120px;
    display: grid;
    grid-template-columns: 1fr 375px;
    gap: 80px;
}

/* 방 정보 섹션 */
#stay-reservation .room-info-section {
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 3px solid #D9D9D9;
}

#stay-reservation .room-info-card {
    display: flex;
    gap: 31px;
    align-items: flex-start;
}

#stay-reservation .room-image-wrap {
    width: 200px;
    height: 160px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 4px;
}

#stay-reservation .room-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#stay-reservation .room-details {
    flex: 1;
    padding-top: 8px;
}

#stay-reservation .property-badge {
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    color: #FF8400;
    margin-bottom: 8px;
}

#stay-reservation .room-name {
    font-size: 20px;
    font-weight: 600;
    color: #0A0A0A;
    margin: 0 0 12px 0;
}

#stay-reservation .room-spec {
    font-size: 16px;
    line-height: 1.19;
    color: #797979;
    margin: 0;
    white-space: pre-line;
}

/* 입주 기간 섹션 */
#stay-reservation .period-section {
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 3px solid #D9D9D9;
}

#stay-reservation .section-title {
    font-size: 24px;
    font-weight: 600;
    color: #0A0A0A;
    margin: 0 0 24px 0;
}

#stay-reservation .period-info {
    background: #FAFAF7;
    padding: 24px;
    border-radius: 8px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

#stay-reservation .period-item label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #797979;
    margin-bottom: 8px;
}

#stay-reservation .period-value {
    font-size: 18px;
    font-weight: 600;
    color: #0A0A0A;
}

/* 계약자 정보 섹션 */
#stay-reservation .contractor-section {
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 3px solid #D9D9D9;
}

#stay-reservation .contractor-section .required-notice {
    font-size: 11px;
    color: #FF4D5E;
    font-weight: 400;
    margin-left: 8px;
}

#stay-reservation .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

#stay-reservation .form-row:last-child {
    margin-bottom: 0;
}

#stay-reservation .verify-group {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

#stay-reservation .verify-group .form-control {
    flex: 1;
    margin-bottom: 0;
}

#stay-reservation .verify-group .btn-verify-check {
    flex-shrink: 0;
}

#stay-reservation .form-group {
    margin-bottom: 20px;
    position: relative;
}

#stay-reservation .form-group label {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: #797979;
    margin-bottom: 8px;
}

#stay-reservation .form-control {
    width: 100%;
    height: 46px;
    padding: 0 16px;
    background: #F9F9F9;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 14px;
    color: #0A0A0A;
    transition: all 0.2s;
}

#stay-reservation .form-control:focus {
    outline: none;
    border-color: #0A0A0A;
    background: #FFFFFF;
}

#stay-reservation .form-control::placeholder {
    color: #797979;
}

#stay-reservation .form-group .btn-verify {
    position: absolute;
    right: 0;
    top: 1px;
    width: 99px;
    height: 46px;
    background: #0A0A0A;
    color: #FFFFFF;
    border: none;
    border-radius: 0 4px 4px 0;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

#stay-reservation .form-group .btn-verify:hover {
    background: #333;
}

#stay-reservation .form-group .btn-verify:disabled {
    background: #E0E0E0;
    color: #999;
    cursor: not-allowed;
}

#stay-reservation .verify-group {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

#stay-reservation .verify-group .form-control {
    flex: 1;
    margin-bottom: 0;
}

#stay-reservation .form-group .btn-verify-check {
    width: 99px;
    height: 46px;
    background: #0A0A0A;
    color: #FFFFFF;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}

#stay-reservation .form-group .btn-verify-check:hover {
    background: #333;
}

#stay-reservation .form-group .btn-verify-check:disabled {
    background: #4CAF50;
    cursor: not-allowed;
}

#stay-reservation .verify-message {
    font-size: 14px;
    color: #0A0A0A;
    margin: 0;
}

/* 생년월일 입력 */
#stay-reservation .birthdate-inputs {
    display: grid;
    grid-template-columns: 40% 28% 28%;
    gap: 7px;
}

#stay-reservation .select-wrap {
    position: relative;
}

#stay-reservation .select-wrap select {
    width: 100%;
    height: 46px;
    padding: 0 32px 0 16px;
    background: #F9F9F9;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 14px;
    color: #0A0A0A;
    appearance: none;
    cursor: pointer;
}

#stay-reservation .select-wrap select:focus {
    outline: none;
    border-color: #0A0A0A;
}

#stay-reservation .select-wrap .select-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

/* 환불 정책 섹션 */
#stay-reservation .refund-section {
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 3px solid #D9D9D9;
}

#stay-reservation .refund-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#stay-reservation .refund-list li {
    font-size: 18px;
    line-height: 1.33;
    color: #0A0A0A;
    margin-bottom: 4px;
}

#stay-reservation .notice-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

#stay-reservation .notice-list li {
    font-size: 18px;
    line-height: 1.19;
    color: #0A0A0A;
    margin-bottom: 8px;
}

#stay-reservation .notice-list li p {
    color: #797979;
    padding-left: 10px;
}

#stay-reservation .agreement-check {
    margin-top: 24px;
}

#stay-reservation .checkbox-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

#stay-reservation .checkbox-label input[type="checkbox"] {
    display: none;
}

#stay-reservation .checkbox-custom {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

#stay-reservation .checkbox-custom svg {
    width: 18px;
    height: 18px;
    color: #E0E0E0;
}

#stay-reservation .checkbox-label input[type="checkbox"]:checked+.checkbox-custom svg {
    color: #0A0A0A;
}

#stay-reservation .checkbox-custom .check-icon {
    opacity: 0;
}

#stay-reservation .checkbox-label input[type="checkbox"]:checked+.checkbox-custom .check-icon {
    opacity: 1;
}

#stay-reservation .checkbox-text {
    font-size: 13px;
    font-weight: 600;
    color: #0A0A0A;
}

/* 인증 방식 선택 */
#stay-reservation .verify-type-selector {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

#stay-reservation .radio-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    color: #797979;
    user-select: none;
    position: relative;
    padding-left: 28px;
    transition: color 0.2s ease;
}

#stay-reservation .radio-label:hover {
    color: #0A0A0A;
}

#stay-reservation .radio-label input[type="radio"] {
    position: absolute;
    left: 0;
    opacity: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
    z-index: 1;
}

#stay-reservation .radio-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid #E0E0E0;
    border-radius: 50%;
    background: #FFFFFF;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

#stay-reservation .radio-label:hover::before {
    border-color: #0A0A0A;
}

#stay-reservation .radio-label.checked::before {
    border-color: #0A0A0A;
    border-width: 6px;
    background: #FFFFFF;
    box-shadow: 0 0 0 2px #FFFFFF inset;
}

#stay-reservation .radio-label.checked {
    color: #0A0A0A;
}

#stay-reservation .radio-label.checked span {
    font-weight: 600;
    color: #0A0A0A;
}

#stay-reservation .radio-label span {
    transition: font-weight 0.2s ease, color 0.2s ease;
    line-height: 1.5;
}

#stay-reservation .radio-label input[type="radio"]:disabled+span {
    color: #CCCCCC;
    cursor: not-allowed;
}

#stay-reservation .radio-label input[type="radio"]:disabled~span {
    color: #CCCCCC;
    cursor: not-allowed;
}

#stay-reservation .radio-label:has(input[type="radio"]:disabled) {
    cursor: not-allowed;
    opacity: 0.6;
}

/* 브라우저 호환성을 위한 대체 스타일 */
#stay-reservation .radio-label.disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

#stay-reservation .radio-label.disabled span {
    color: #CCCCCC;
    cursor: not-allowed;
}

/* 인증번호 발송 버튼 그룹 */
#stay-reservation .verify-send-group {
    margin-top: 10px;
    margin-bottom: 0;
}

#stay-reservation .verify-send-group .btn-verify {
    position: static;
    width: 100%;
    height: 46px;
    background: #0A0A0A;
    color: #FFFFFF;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

#stay-reservation .verify-send-group .btn-verify:hover {
    background: #333333;
}

#stay-reservation .verify-send-group .btn-verify:disabled {
    background: #E0E0E0;
    color: #999999;
    cursor: not-allowed;
}

/* 결제 사이드바 (PC: 우측, Mobile: 하단 Fixed) */
#stay-reservation .payment-sidebar {
    position: relative;
}

#stay-reservation .payment-box {
    position: fixed;
    width: 375px;
    background: #FFF4B5;
    padding: 32px 24px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 100;
}

#stay-reservation .payment-item {
    margin-bottom: 14px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

#stay-reservation .payment-item label {
    font-size: 18px;
    font-weight: 600;
    color: #0A0A0A;
    flex-shrink: 0;
}

#stay-reservation .payment-item label.deposit {
    color: #797979;
}

#stay-reservation .payment-item.sub-item {
    margin-left: 20px;
    margin-bottom: 0;
}

#stay-reservation .payment-item.sub-item label {
    font-size: 14px;
    font-weight: 400;
    color: #797979;
    margin-bottom: 0;
    margin-left: 140px;
}

#stay-reservation .payment-item.sub-item .price {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #797979 !important;
}

#stay-reservation .payment-item.promotion-item {
    margin-left: 0;
    margin-bottom: 14px;
}

#stay-reservation .payment-item.promotion-item label {
    font-size: 18px;
    font-weight: 600;
    color: #0A0A0A;
}

#stay-reservation .promotion-label {
    font-size: 14px;
    font-weight: 600;
    color: #0A0A0A;
}

#stay-reservation .payment-value .price.promotion-discount {
    font-size: 18px;
    font-weight: 600;
    color: #dc3545;
}

#stay-reservation .payment-value {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

#stay-reservation .payment-value .price {
    font-size: 18px;
    font-weight: 600;
    color: #0A0A0A;
    margin-bottom: 4px;
}

#stay-reservation .payment-value .price.vat {
    color: #797979;
}

#stay-reservation .payment-value .price.deposit {
    font-size: 18px;
    font-weight: 400;
    color: #797979;
    margin-bottom: 0;
}

#stay-reservation .payment-value .price.total-price {
    font-size: 24px;
}

#stay-reservation .payment-note {
    font-size: 11px;
    color: #797979;
    margin: -8px 0 28px 0;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

#stay-reservation .payment-item.total .payment-note {
    font-size: 14px;
    font-weight: 600;
}

#stay-reservation .payment-divider {
    height: 1px;
    background: #0A0A0A;
    margin: 10px 0;
}

#stay-reservation .payment-divider.thick {
    height: 2px;
}

#stay-reservation .btn-payment {
    width: 100%;
    height: 50px;
    background: #0A0A0A;
    color: #FFFFFF;
    border: none;
    border-radius: 4px;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

#stay-reservation .btn-payment:hover {
    background: #333;
}

#stay-reservation .checkbox-custom.focus {
    outline: 2px solid #FF8400;
}


/* ===================================
   Stay 예약 완료 페이지 (#stay-complete)
   =================================== */
#stay-complete {
    width: 100%;
    min-height: 100vh;
    background: #FFFFFF;
    padding-top: 56px;
}

#stay-complete .loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

#stay-complete .loading-spinner {
    font-size: 16px;
    color: #797979;
}

#stay-complete .complete-container {
    max-width: 440px;
    margin: 0 auto;
    padding: 80px 20px 120px;
    text-align: center;
}

#stay-complete .success-icon {
    margin-bottom: 32px;
    display: flex;
    justify-content: center;
}

#stay-complete .icon-circle {
    width: 59px;
    height: 59px;
    background: #0A0A0A;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#stay-complete .complete-title {
    font-size: 24px;
    font-weight: 600;
    color: #0A0A0A;
    margin: 0 0 12px 0;
}

#stay-complete .email-notice {
    font-size: 14px;
    font-weight: 400;
    color: #797979;
    margin: 0 0 32px 0;
    line-height: 1.5;
}

/* 예약 정보 섹션 */
#stay-complete .reservation-info-section {
    background: #FAFAF7;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
    text-align: left;
}

#stay-complete .info-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

#stay-complete .info-row:last-child {
    margin-bottom: 0;
}

#stay-complete .info-label {
    font-size: 14px;
    font-weight: 500;
    color: #797979;
    flex-shrink: 0;
}

#stay-complete .info-value {
    font-size: 16px;
    font-weight: 600;
    color: #0A0A0A;
    text-align: right;
}

#stay-complete .info-value.status-confirmed {
    color: #FF8400;
}

#stay-complete .info-value.booking-number {
    font-size: 16px;
    font-weight: 700;
    background: linear-gradient(to bottom, transparent 60%, #FFF59D 60%);
    padding: 0 4px;
}

#stay-complete .info-value.period-value {
    font-size: 16px;
    font-weight: 700;
}

#stay-complete .info-value-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

#stay-complete .btn-copy-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: transparent;
    border: none;
    font-size: 13px;
    font-weight: 400;
    color: #797979;
    cursor: pointer;
    transition: color 0.2s;
}

#stay-complete .btn-copy-inline:hover {
    color: #0A0A0A;
}

#stay-complete .btn-copy-inline svg {
    width: 14px;
    height: 14px;
}

/* 방 정보 섹션 */
#stay-complete .room-info-section {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
    text-align: left;
}

#stay-complete .room-image-wrap {
    width: 140px;
    height: 110px;
    flex-shrink: 0;
    overflow: hidden;
}

#stay-complete .room-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#stay-complete .room-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#stay-complete .room-name {
    font-size: 16px;
    font-weight: 700;
    color: #0A0A0A;
    line-height: 1;
}

#stay-complete .property-badge {
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    color: #FF8400;
}

#stay-complete .room-specs {
    list-style: none;
    padding: 0;
    margin: 0 0 12px 0;
}

#stay-complete .room-specs li {
    font-size: 13px;
    font-weight: 400;
    color: #797979;
    line-height: 1.6;
    position: relative;
    padding-left: 12px;
}

#stay-complete .room-specs li:before {
    content: '•';
    position: absolute;
    left: 0;
    color: #797979;
}

#stay-complete .total-amount {
    font-size: 16px;
    font-weight: 700;
    color: #0A0A0A;
    margin: 0;
}

#stay-complete .action-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
}

#stay-complete .btn-secondary {
    padding: 14px 32px;
    background: transparent;
    border: 2px solid #0A0A0A;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    color: #0A0A0A;
    cursor: pointer;
    transition: all 0.2s;
}

#stay-complete .btn-secondary:hover {
    background: #0A0A0A;
    color: #FFFFFF;
}

/* 포함 옵션 섹션 */
#stay-complete .included-options-section {
    margin: 40px 0;
    text-align: left;
}

#stay-complete .section-title {
    font-size: 14px;
    font-weight: 500;
    color: #797979;
    flex-shrink: 0;
}

#stay-complete .options-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 12px;
}

#stay-complete .option-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

#stay-complete .option-item img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    object-fit: contain;
}

#stay-complete .option-item span {
    font-size: 12px;
    color: #797979;
}

/* 탭 섹션 */
#stay-complete .info-tabs-section {
    margin: 40px 0;
    text-align: left;
}

#stay-complete .tab-buttons {
    display: flex;
    border-bottom: 1px solid #ECECEC;
    margin-bottom: 24px;
}

#stay-complete .tab-btn {
    flex: 1;
    padding: 12px 0;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 16px;
    font-weight: 500;
    color: #797979;
    cursor: pointer;
    transition: all 0.2s;
}

#stay-complete .tab-btn.active {
    color: #0A0A0A;
    font-weight: 600;
    border-bottom-color: #0A0A0A;
}

#stay-complete .tab-content {
    display: none;
}

#stay-complete .tab-content.active {
    display: block;
}

/* 입주가이드 탭 */
#stay-complete .guide-content {
    background: #FAFAF7;
    border-radius: 8px;
    padding: 24px;
}

#stay-complete .guide-section {
    margin-bottom: 24px;
}

#stay-complete .guide-section:last-child {
    margin-bottom: 0;
}

#stay-complete .guide-section-title {
    font-size: 16px;
    font-weight: 600;
    color: #4E4E4E;
    margin: 0 0 12px 0;
}

#stay-complete .guide-text {
    font-size: 14px;
    color: #0A0A0A;
    line-height: 1.6;
    margin: 0 0 8px 0;
}

#stay-complete .guide-text:last-child {
    margin-bottom: 0;
}

#stay-complete .highlight-text {
    color: #FF8400;
    text-decoration: underline;
    text-underline-offset: 2px;
}

#stay-complete .directions-content {
    background: #FAFAF7;
}

#stay-complete .directions-content>div:last-child {
    margin-bottom: 0;
}

#stay-complete .directions-content h3 {
    font-size: 16px;
    font-weight: 600;
    color: #797979;
    margin: 0 0 12px 0;
}

#stay-complete .directions-content p {
    font-size: 14px;
    color: #0A0A0A;
    line-height: 1.6;
    margin: 0;
}

/* 주소 섹션 */
#stay-complete .address-section {
    background: #FAFAF7;
    border-radius: 8px;
    padding: 20px;
}

#stay-complete .address-ko {
    font-size: 16px;
    font-weight: 700;
    color: #0A0A0A;
    margin: 0 0 4px 0;
}

#stay-complete .address-en {
    font-size: 14px;
    font-weight: 400;
    color: #797979;
    margin: 0 0 12px 0;
}

#stay-complete .btn-copy-address {
    display: inline-block;
    padding: 6px 0px 0px 0px;
    background: transparent;
    border-bottom: 1px solid #D9D9D9;
    color: #797979;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 16px;
}

#stay-complete .btn-copy-address:hover {
    background: #F5F5F5;
    border-color: #0A0A0A;
    color: #0A0A0A;
}

#stay-complete .map-container {
    width: 100%;
    height: 190px;
}

#stay-complete #map {
    width: 100%;
    height: 100%;
    border: none;
}

#stay-complete .btn-kakao-map {
    display: block;
    width: 100%;
    padding: 12px 20px;
    background: #0A0A0A;
    border: none;
    border-radius: 4px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

#stay-complete .btn-kakao-map:hover {
    background: #333333;
}

/* 대중교통 & 주차 안내 섹션 */
#stay-complete .transportation-section,
#stay-complete .parking-section {
    background: #FAFAF7;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 16px;
}

#stay-complete .transportation-section h3,
#stay-complete .parking-section h3 {
    font-size: 18px;
    font-weight: 600;
    color: #797979;
    margin: 0 0 16px 0;
}

#stay-complete .location-info-text {
    font-size: 15px;
    line-height: 1.6;
    color: #0A0A0A;
    margin: 8px 0;
}

#stay-complete .location-info-text:first-of-type {
    margin-top: 0;
}

#stay-complete .location-info-text:last-child {
    margin-bottom: 0;
}

/* 주차안내 서브섹션 */
#stay-complete .parking-subsection {
    margin-top: 20px;
}

#stay-complete .parking-subsection:first-child {
    margin-top: 0;
}

/* 주차안내 2컬럼 레이아웃 */
#stay-complete .parking-row {
    display: grid;
    grid-template-columns: 65px 1fr;
    gap: 24px;
    align-items: start;
}

#stay-complete .parking-subtitle {
    font-size: 16px;
    font-weight: 600;
    color: #0A0A0A;
    margin: 0;
    padding-top: 2px;
}

#stay-complete .parking-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#stay-complete .parking-subsection .location-info-text {
    margin: 0;
}

/* 주소 복사 알림 */
.copy-notification {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    padding: 12px 24px;
    background: rgba(10, 10, 10, 0.9);
    color: #FFFFFF;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    z-index: 10000;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
}

.copy-notification.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ===================================
   반응형 (예약 페이지)
   =================================== */
@media (max-width: 1200px) {
    #stay-reservation .reservation-container {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 40px 20px 40px;
    }

    /* 모바일에서 결제 박스를 notice-section 아래에 위치 */
    #stay-reservation .payment-sidebar {
        position: static;
        width: 100%;
        margin-top: 40px;
    }

    #stay-reservation .payment-box {
        position: static;
        right: auto;
        width: 100%;
        border-radius: 8px;
        padding: 32px 24px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        z-index: auto;
    }

    #stay-reservation .payment-item label {
        font-size: 18px;
    }

    #stay-reservation .payment-value .price {
        font-size: 20px;
    }

    #stay-reservation .payment-value .price.total-price {
        font-size: 24px;
    }

    #stay-reservation .btn-payment {
        height: 50px;
        font-size: 20px;
        margin-top: 20px;
    }
}

@media (max-width: 820px) {

    /* 방정보: 좌측 이미지 / 우측 텍스트 가로 배치 */
    #stay-reservation .room-info-card {
        flex-direction: row;
        gap: 16px;
        background: transparent;
        padding: 0;
        border-radius: 0;
        align-items: center;
    }

    #stay-reservation .room-image-wrap {
        width: 140px;
        height: 110px;
        border-radius: 6px;
    }

    #stay-reservation .section-title {
        font-size: 18px;
    }

    /* 거주기간: 3열 유지, 큰 값 표시 */
    #stay-reservation .period-info {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        background: #FFFFFF;
        padding: 0;
    }

    #stay-reservation .period-item label {
        font-size: 14px;
        color: #8D8D8D;
        margin-bottom: 8px;
    }

    #stay-reservation .period-value {
        font-size: 32px;
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: -0.5px;
    }

    #stay-reservation .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    #stay-reservation .verification-row {
        margin-top: 20px;
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    #stay-reservation .birthdate-inputs {
        grid-template-columns: 40% 28% 28%;
        gap: 11px;
    }

    #stay-reservation .refund-list li,
    #stay-reservation .notice-list li {
        font-size: 14px;
    }
}

@media (max-width: 600px) {
    #stay-reservation {
        padding-top: 56px;
    }

    #stay-reservation .reservation-container {
        display: block;
        padding: 20px 20px 40px;
    }

    #stay-reservation .birthdate-inputs {
        grid-template-columns: 37% 30% 30%;
    }

    #stay-reservation .room-info-section {
        padding-bottom: 30px;
        margin-bottom: 30px;
        border-bottom: none;
    }

    #stay-reservation .period-section,
    #stay-reservation .contractor-section,
    #stay-reservation .refund-section {
        padding-bottom: 30px;
        margin-bottom: 30px;
        border-bottom: 6px solid #ECECEC;
    }


    #stay-reservation .room-name {
        font-size: 18px;
    }

    #stay-reservation .room-spec {
        font-size: 14px;
    }

    #stay-reservation .property-badge {
        font-size: 14px;
    }

    #stay-reservation .section-title {
        font-size: 16px;
    }

    #stay-reservation .period-value {
        font-size: 18px;
    }

    #stay-reservation .payment-item label {
        font-size: 16px;
    }

    #stay-reservation .payment-value .price {
        font-size: 16px;
    }

    #stay-reservation .payment-value .price.total-price {
        font-size: 20px;
    }

    #stay-reservation .payment-value .price.vat {
        font-size: 16px;
    }

    #stay-reservation .payment-value .price.deposit {
        font-size: 16px;
    }

    #stay-reservation .payment-note {
        font-size: 11px;
    }
}

/* ===================================
   반응형 (완료 페이지)
   =================================== */
@media (max-width: 820px) {
    #stay-complete .complete-container {
        padding: 60px 20px 80px;
    }

    #stay-complete .complete-title {
        font-size: 20px;
    }

    #stay-complete .room-info-section {
        flex-direction: row;
        gap: 16px;
    }

    #stay-complete .room-image-wrap {
        width: 140px;
        height: 140px;
    }

    #stay-complete .room-name {
        font-size: 18px;
    }
}

@media (max-width: 600px) {
    #stay-complete .complete-container {
        padding: 40px 20px 60px;
    }

    #stay-complete .complete-title {
        font-size: 18px;
    }

    #stay-complete .email-notice {
        font-size: 13px;
    }

    #stay-complete .reservation-info-section {
        padding: 20px;
    }

    #stay-complete .info-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 24px;
    }

    #stay-complete .info-value-wrapper {
        align-items: flex-start;
        width: 100%;
    }

    #stay-complete .info-value.booking-number {
        font-size: 20px;
    }

    #stay-complete .info-value.period-value {
        font-size: 18px;
    }

    #stay-complete .room-info-section {
        flex-direction: column;
        gap: 16px;
    }

    #stay-complete .room-image-wrap {
        width: 100%;
        height: 200px;
    }

    #stay-complete .room-name {
        font-size: 18px;
    }

    #stay-complete .action-buttons {
        flex-direction: column;
    }

    #stay-complete .btn-secondary {
        width: 100%;
    }

    #stay-complete .options-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 입주가이드 & 오시는길 모바일 스타일 */
    #stay-complete .guide-content {
        padding: 16px;
    }

    #stay-complete .guide-section {
        margin-bottom: 20px;
    }

    #stay-complete .guide-section-title {
        font-size: 14px;
        margin-bottom: 10px;
    }

    #stay-complete .guide-text {
        font-size: 13px;
    }

    #stay-complete .address-section,
    #stay-complete .transportation-section,
    #stay-complete .parking-section {
        padding: 16px;
    }

    #stay-complete .transportation-section h3,
    #stay-complete .parking-section h3 {
        font-size: 16px;
        margin-bottom: 12px;
    }

    #stay-complete .location-info-text {
        font-size: 14px;
        margin: 6px 0;
    }

    #stay-complete .parking-subtitle {
        font-size: 15px;
    }

    #stay-complete .parking-subsection {
        margin-top: 16px;
    }

    /* 모바일에서는 세로 배치 */
    #stay-complete .parking-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    #stay-complete .parking-content {
        gap: 4px;
    }

    #stay-complete .address-ko {
        font-size: 15px;
    }

    #stay-complete .address-en {
        font-size: 13px;
    }

    #stay-complete .btn-copy-address {
        font-size: 12px;
        padding: 5px 10px;
    }

    #stay-complete .btn-kakao-map {
        padding: 10px 16px;
        font-size: 13px;
    }

    #stay-complete .directions-content h3 {
        font-size: 14px;
        margin-bottom: 10px;
    }

    #stay-complete .directions-content p {
        font-size: 13px;
    }

    .copy-notification {
        bottom: 60px;
        left: 20px;
        right: 20px;
        width: auto;
        transform: translateY(20px);
        font-size: 13px;
        padding: 10px 20px;
    }

    .copy-notification.show {
        transform: translateY(0);
    }
}

/* ===================================
   MY BOOKING 페이지 (#stay-mybooking)
   =================================== */
#stay-mybooking {
    width: 100%;
    min-height: calc(100vh - 56px);
    background: #FFFFFF;
    padding-top: 56px;
}

#stay-mybooking .mybooking-container {
    max-width: 420px;
    margin: 0 auto;
    padding: 80px 20px 120px;
}

/* 헤더 섹션 */
#stay-mybooking .mybooking-header {
    text-align: left;
    margin-bottom: 48px;
}

#stay-mybooking .mybooking-title {
    font-family: 'Pretendard', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #0A0A0A;
    line-height: 1.2;
}

#stay-mybooking .mybooking-description {
    font-family: 'Pretendard', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #797979;
    margin: 0;
    line-height: 1.5;
}

/* 검색 섹션 */
#stay-mybooking .booking-search-section {
    margin-bottom: 40px;
}

#stay-mybooking .search-input-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#stay-mybooking .booking-input {
    width: 100%;
    height: 56px;
    padding: 0 20px;
    font-family: 'Pretendard', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #0A0A0A;
    border: 2px solid #FFEFD8;
    border-radius: 8px;
    outline: none;
    transition: all 0.3s;
    background: #FFFFFF;
}

#stay-mybooking .booking-input::placeholder {
    color: #C4C4C4;
}

#stay-mybooking .booking-input:focus {
    border-color: #FF8400;
}

#stay-mybooking .btn-check-booking {
    width: 100%;
    height: 56px;
    background: #0A0A0A;
    border: none;
    border-radius: 8px;
    font-family: 'Pretendard', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #FFFFFF;
    cursor: pointer;
    transition: all 0.3s;
}

#stay-mybooking .btn-check-booking:hover {
    background: #333333;
}

#stay-mybooking .btn-check-booking:active {
    transform: scale(0.98);
}

/* 상담 섹션 */
#stay-mybooking .contact-section {
    text-align: center;
    padding-top: 32px;
    border-top: 1px solid #F0F0F0;
}

#stay-mybooking .contact-text {
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #797979;
    margin: 0 0 12px 0;
}

#stay-mybooking .contact-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Pretendard', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #FF8400;
    text-decoration: none;
    transition: all 0.3s;
}

#stay-mybooking .contact-link:hover {
    color: #E67600;
}

#stay-mybooking .contact-link svg {
    width: 16px;
    height: 16px;
}

/* ===================================
   예약 상세 레이어 팝업 (MY BOOKING) - 피그마 디자인 기반
   =================================== */

#stay-mybooking .booking-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: none;
}

#stay-mybooking .modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

#stay-mybooking .modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 420px;
    max-height: 90vh;
    background: #FFFFFF;
    border-radius: 16px;
    overflow-y: auto;
    z-index: 2;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

/* 모달 헤더 (로고 + 닫기 버튼) */
#stay-mybooking .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px 16px;
    background: #FFEFD8;
    border-radius: 16px 16px 0 0;
    position: relative;
}

#stay-mybooking .modal-logo {
    display: flex;
    align-items: center;
}

#stay-mybooking .modal-logo .logo-img {
    height: 24px;
    width: auto;
}

#stay-mybooking .btn-close-modal {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

#stay-mybooking .btn-close-modal:hover {
    transform: rotate(90deg);
}

#stay-mybooking .btn-close-modal svg {
    width: 20px;
    height: 20px;
    stroke: #797979;
}

/* 객실 이미지 섹션 */
#stay-mybooking .room-image-section {
    position: relative;
}

#stay-mybooking .room-image-container {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
}

#stay-mybooking .room-main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#stay-mybooking .image-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 3;
}

#stay-mybooking .image-nav-btn:hover {
    background: rgba(255, 255, 255, 1);
}

#stay-mybooking .image-nav-prev {
    left: 12px;
}

#stay-mybooking .image-nav-next {
    right: 12px;
}

#stay-mybooking .image-nav-btn svg {
    width: 16px;
    height: 16px;
    stroke: #333;
}

/* 객실 정보 섹션 */
#stay-mybooking .room-info-section {
    padding: 16px 20px;
}

#stay-mybooking .property-badge {
    font-family: 'Pretendard', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #FF8400;
    margin-bottom: 4px;
}

#stay-mybooking .room-name {
    font-family: 'Pretendard', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #0A0A0A;
    margin: 0 0 8px 0;
}

#stay-mybooking .room-specs {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

#stay-mybooking .room-specs span {
    font-family: 'Pretendard', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #797979;
}

#stay-mybooking .room-location {
    display: flex;
    align-items: center;
    gap: 4px;
}

#stay-mybooking .room-location svg {
    width: 14px;
    height: 14px;
    stroke: #797979;
    fill: #797979;
}

#stay-mybooking .location-text {
    font-family: 'Pretendard', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #797979;
    text-decoration: underline;
}

/* 예약 요약 섹션 */
#stay-mybooking .reservation-summary-section {
    padding: 0 20px 16px;
}

#stay-mybooking .summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

#stay-mybooking .summary-label {
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #797979;
}

#stay-mybooking .summary-value {
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #0A0A0A;
}

/* 체크인/체크아웃 섹션 */
#stay-mybooking .checkin-checkout-section {
    display: flex;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 3px solid #ececec;
}

#stay-mybooking .checkin-checkout-section>div {
    border-top: 2px solid #000000;
    padding-top: 16px;
}

#stay-mybooking .checkin-item,
#stay-mybooking .checkout-item,
#stay-mybooking .total-nights-item {
    flex: 1;
    text-align: center;
}

#stay-mybooking .checkin-label,
#stay-mybooking .checkout-label,
#stay-mybooking .total-label {
    display: block;
    font-family: 'Pretendard', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #797979;
    margin-bottom: 4px;
}

#stay-mybooking .checkin-date,
#stay-mybooking .checkout-date,
#stay-mybooking .total-nights {
    display: block;
    font-family: 'Pretendard', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #0A0A0A;
    background: #FFFACD;
    padding: 4px 8px;
    border-radius: 4px;
    margin-bottom: 2px;
}

#stay-mybooking .checkin-time,
#stay-mybooking .checkout-time {
    display: block;
    font-family: 'Pretendard', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #797979;
}

/* 예약자 정보 섹션 */
#stay-mybooking .guest-info-section {
    padding: 16px 20px;
    border-bottom: 3px solid #ececec;
}

#stay-mybooking .guest-info-section .section-title {
    font-family: 'Pretendard', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #0A0A0A;
    margin: 0 0 12px 0;
}

#stay-mybooking .guest-info-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#stay-mybooking .guest-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#stay-mybooking .guest-info-label {
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #797979;
}

#stay-mybooking .guest-info-value {
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #0A0A0A;
}

/* 결제 정보 섹션 */
#stay-mybooking .payment-info-section {
    padding: 16px 20px;
    border-bottom: 3px solid #ececec;
}

#stay-mybooking .payment-info-section .section-title {
    font-family: 'Pretendard', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #0A0A0A;
    margin: 0 0 12px 0;
}

#stay-mybooking .payment-info-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#stay-mybooking .payment-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#stay-mybooking .payment-info-label {
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #797979;
}

#stay-mybooking .payment-info-value {
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #0A0A0A;
}

/* 액션 링크 섹션 */
#stay-mybooking .action-links-section {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

#stay-mybooking .change-reservation-link {
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #FF8400;
    text-decoration: underline;
    cursor: pointer;
}

#stay-mybooking .cancel-reservation-link {
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #797979;
    text-decoration: underline;
    cursor: pointer;
}

/* 취소 안내 섹션 */
#stay-mybooking .cancelled-notice-section {
    padding: 16px 20px;
    border-bottom: 3px solid #ececec;
}

#stay-mybooking .cancelled-message {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Pretendard', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #797979;
}

#stay-mybooking .cancelled-message svg {
    flex-shrink: 0;
}

/* 환불 내역 섹션 */
#stay-mybooking .refund-history-section {
    padding: 16px 20px;
    border-bottom: 3px solid #ececec;
}

#stay-mybooking .refund-history-section .section-title {
    font-family: 'Pretendard', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #0A0A0A;
    margin: 0 0 12px 0;
}

#stay-mybooking .refund-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

#stay-mybooking .refund-history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#stay-mybooking .refund-history-label {
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #797979;
}

#stay-mybooking .refund-history-value {
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #0A0A0A;
}

#stay-mybooking .refund-history-value.refund-amount {
    font-weight: 600;
    color: #FF8400;
}

#stay-mybooking .refund-notice {
    padding-top: 12px;
    border-top: 1px solid #ececec;
}

#stay-mybooking .refund-notice p {
    font-family: 'Pretendard', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #797979;
    margin: 4px 0;
    line-height: 1.5;
}

/* 모달 푸터 */
#stay-mybooking .modal-footer {
    padding: 16px 20px 20px;
    border-top: none;
}

#stay-mybooking .btn-modal-close {
    width: 100%;
    height: 48px;
    background: #333333;
    border: none;
    border-radius: 8px;
    font-family: 'Pretendard', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #FFFFFF;
    cursor: pointer;
    transition: all 0.3s;
}

#stay-mybooking .btn-modal-close:hover {
    background: #555555;
}

/* Toast 알림 */
#stay-mybooking .toast-notification {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    padding: 16px 24px;
    background: rgba(10, 10, 10, 0.9);
    border-radius: 8px;
    z-index: 10002;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: slideUp 0.3s ease-out;
}

#stay-mybooking .toast-message {
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #FFFFFF;
    white-space: nowrap;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translate(-50%, 20px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* 예약 취소 모달 */
#stay-mybooking .cancel-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10001;
    display: flex;
    justify-content: center;
    align-items: center;
}

#stay-mybooking .cancel-modal .modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10002;
}

#stay-mybooking .cancel-modal-content {
    position: relative;
    width: 90%;
    max-width: 480px;
    background: #FFFFFF;
    border-radius: 16px;
    z-index: 10003;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#stay-mybooking .cancel-modal-header {
    padding: 24px 24px 16px;
    border-bottom: 1px solid #E5E5E5;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#stay-mybooking .cancel-modal-header h3 {
    font-family: 'Pretendard', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #1A1A1A;
    margin: 0;
}

#stay-mybooking .btn-close-cancel-modal {
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #797979;
    transition: all 0.2s;
}

#stay-mybooking .btn-close-cancel-modal:hover {
    color: #333333;
}

#stay-mybooking .cancel-modal-body {
    padding: 24px;
}

#stay-mybooking .cancel-warning-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

#stay-mybooking .cancel-message {
    font-family: 'Pretendard', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #1A1A1A;
    text-align: center;
    margin: 0 0 24px 0;
}

#stay-mybooking .refund-info-section {
    background: #F8F9FA;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
}

#stay-mybooking .refund-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}

#stay-mybooking .refund-info-item:not(:last-child) {
    border-bottom: 1px solid #E5E5E5;
}

#stay-mybooking .refund-info-item.highlight {
    background: linear-gradient(90deg, rgba(255, 132, 0, 0.1) 0%, rgba(255, 132, 0, 0.05) 100%);
    border-radius: 8px;
    padding: 12px 16px;
    margin: 8px -12px;
}

#stay-mybooking .refund-label {
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #666666;
}

#stay-mybooking .refund-value {
    font-family: 'Pretendard', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #1A1A1A;
}

#stay-mybooking .refund-info-item.highlight .refund-value {
    color: #FF8400;
    font-size: 18px;
}

#stay-mybooking .refund-policy-notice {
    background: #FFF9F0;
    border-left: 3px solid #FF8400;
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 16px;
}

#stay-mybooking .refund-policy-notice p {
    font-family: 'Pretendard', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #FF8400;
    margin: 0;
    line-height: 1.5;
}

#stay-mybooking .cancel-notice {
    text-align: center;
}

#stay-mybooking .cancel-notice p {
    font-family: 'Pretendard', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #999999;
    margin: 4px 0;
    line-height: 1.4;
}

#stay-mybooking .cancel-modal-footer {
    padding: 16px 24px 24px;
    display: flex;
    gap: 12px;
}

#stay-mybooking .btn-cancel-close {
    flex: 1;
    height: 48px;
    background: #FFFFFF;
    border: 1px solid #DDDDDD;
    border-radius: 8px;
    font-family: 'Pretendard', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #666666;
    cursor: pointer;
    transition: all 0.2s;
}

#stay-mybooking .btn-cancel-close:hover {
    background: #F5F5F5;
    border-color: #CCCCCC;
}

#stay-mybooking .btn-cancel-confirm {
    flex: 1;
    height: 48px;
    background: #FF6B6B;
    border: none;
    border-radius: 8px;
    font-family: 'Pretendard', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #FFFFFF;
    cursor: pointer;
    transition: all 0.2s;
}

#stay-mybooking .btn-cancel-confirm:hover {
    background: #FF5252;
}

#stay-mybooking .btn-cancel-confirm:disabled {
    background: #CCCCCC;
    cursor: not-allowed;
}

/* ===================================
   반응형 (MY BOOKING 페이지)
   =================================== */
@media (max-width: 1200px) {
    #stay-mybooking .mybooking-container {
        padding: 60px 20px 100px;
    }

    #stay-mybooking .mybooking-title {
        font-size: 28px;
    }
}

@media (max-width: 1024px) {
    #stay-mybooking .modal-content {
        max-width: 540px;
    }

    #stay-mybooking .modal-header {
        padding: 28px 28px 20px;
    }

    #stay-mybooking .modal-body {
        padding: 20px 28px;
    }

    #stay-mybooking .modal-footer {
        padding: 20px 28px 28px;
    }
}

@media (max-width: 820px) {
    #stay-mybooking .mybooking-container {
        padding: 40px 20px 80px;
    }

    #stay-mybooking .mybooking-title {
        font-size: 24px;
    }

    #stay-mybooking .mybooking-description {
        font-size: 14px;
    }

    #stay-mybooking .modal-content {
        width: 95%;
        max-width: none;
        border-radius: 12px;
    }

    #stay-mybooking .modal-header {
        padding: 24px 20px 16px;
    }

    #stay-mybooking .modal-title {
        font-size: 20px;
    }

    #stay-mybooking .modal-body {
        padding: 16px 20px;
    }

    #stay-mybooking .modal-footer {
        padding: 16px 20px 24px;
    }

    #stay-mybooking .btn-close-modal {
        top: 16px;
        right: 16px;
        width: 28px;
        height: 28px;
    }

    #stay-mybooking .btn-close-modal svg {
        width: 20px;
        height: 20px;
    }

    #stay-mybooking .room-info-card {
        flex-direction: column;
    }

    #stay-mybooking .room-image-wrap {
        width: 100%;
        height: 160px;
    }
}

@media all and (min-width:280px) and (max-width: 820px) {
    #stay-mybooking .mybooking-header {
        margin-bottom: 32px;
    }

    #stay-mybooking .booking-search-section {
        margin-bottom: 32px;
    }

    #stay-mybooking .booking-input {
        height: 52px;
        font-size: 15px;
    }

    #stay-mybooking .btn-check-booking {
        height: 52px;
        font-size: 16px;
    }

    #stay-mybooking .date-info-grid {
        grid-template-columns: 1fr;
    }

    #stay-mybooking .info-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    #stay-mybooking .info-value {
        text-align: left;
    }

    #stay-mybooking .payment-item {
        padding: 12px;
    }

    #stay-mybooking .toast-notification {
        bottom: 60px;
        left: 20px;
        right: 20px;
        transform: none;
        width: calc(100% - 40px);
    }

    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* ===================================
   예약 불가능 상태 스타일
   =================================== */

/* DatePicker 비활성화 상태 */
.date-picker-trigger.disabled,
#datePicker.disabled {
    opacity: 0.6;
    cursor: not-allowed !important;
    background-color: #f5f5f5;
    pointer-events: none;
}

.date-picker-trigger.disabled .date-text {
    color: #999;
}

/* 모바일 날짜 섹션 비활성화 */
#mobileDateSection.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

#mobileDateSection.disabled .date-text {
    color: #999;
}

/* 결제 버튼 비활성화 상태 */
.payment-btn:disabled,
.payment-btn-mobile:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #ccc !important;
    color: #666 !important;
    pointer-events: none;
}

.payment-btn:disabled:hover,
.payment-btn-mobile:disabled:hover {
    background-color: #ccc !important;
    transform: none;
}

@media (max-width: 767px) {
    #stay-detail .detail-tabs {
        top: 56px;
    }

    #stay-detail .detail-tabs.is-fixed {
        top: 56px;
    }
}

/* 추가 디자인 유틸리티 */
.text-40 {
    font-size: 40px !important;
}

.text-20 {
    font-size: 20px !important;
}

.text-18 {
    font-size: 18px !important;
}

.text-16 {
    font-size: 16px !important;
}

.text-14 {
    font-size: 14px !important;
}

.leading-48 {
    line-height: 48px !important;
}

.leading-32 {
    line-height: 32px !important;
}

.leading-26 {
    line-height: 26px !important;
}

.leading-24 {
    line-height: 24px !important;
}

.font-bold {
    font-weight: 700 !important;
}

.font-medium {
    font-weight: 500 !important;
}

.font-regular {
    font-weight: 400 !important;
}

.bg-vr-btn {
    background-color: #fff;
}

.text-primary-orange {
    color: #F85700;
}

.text-brown {
    color: #A65E3B;
}

/* 크기 유틸리티 */
.h-124 {
    height: 124px;
}

.h-90 {
    height: 90px;
}

.h-92 {
    height: 92px;
}

.h-100 {
    height: 100px;
}

.h-34 {
    height: 34px;
}

.w-180 {
    width: 180px;
}

.w-104 {
    width: 104px;
}

.size-20 {
    width: 20px;
    height: 20px;
}

.size-24 {
    width: 24px;
    height: 24px;
}

/* 마진 유틸리티 */
.mt-3 {
    margin-top: 1rem !important;
}