/* [웹프림 M16-C 최소 수정] 절대 /img/ 경로 2건을 테마 자산 상대 경로(../img/)로 변경 — 그 외 원본 무수정 */
@charset "utf-8";
/* 공통 */
.room-list {display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--fs-24); row-gap: var(--fs-40);}
.room-list .room-item a {width: 100%; border-radius: 6px; transition: box-shadow 0.2s;}
.room-list .room-item:not(.sold-out) a:hover {box-shadow: var(--box-shadow);}
.room-list .room-item:not(.sold-out) a:hover .room-info,
.room-list .room-item:not(.sold-out) a:hover .room-thumb {border-color: var(--color-static2);}
.room-list .room-item:not(.sold-out) a:hover .main-line-btn {background-color: var(--color-static1); color: var(--color-white);}
.room-list .room-item .room-thumb {transition: border 0.2s; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; width: 100%; height: auto; aspect-ratio: 362 / 300; overflow: hidden;}
.room-list .room-item .room-thumb img {width: 100%; height: 100%; object-fit: cover;}
.room-list .room-item .room-info {transition: border 0.2s; border-radius: 0 0 8px 8px; padding: var(--fs-30); border: 1px solid var(--color-border1); border-top: 0; display: flex; flex-direction: column; row-gap: var(--fs-30);}
.room-list .room-item .room-info-txt {display: flex; flex-direction: column; row-gap: var(--fs-30);}
.room-list .room-item .room-info-txt .txt-top .room-name {display: block; margin-bottom: 6px; color: var(--color-text1);}
.room-list .room-item .room-info-txt .txt-top p {color: var(--color-text2);}
.room-list .room-item .room-info-txt .txt-top .info {margin-top: var(--fs-12);  display: flex; align-items: center;}
.room-list .room-item .room-info-txt .txt-top .info span {color: var(--color-text2); display: flex; align-items: center; column-gap: 6px;}
.room-list .room-item .room-info-txt .txt-top .info span + span {margin-left: var(--fs-14); padding-left: var(--fs-14); position: relative;}
.room-list .room-item .room-info-txt .txt-top .info span + span::after {content: ''; display: block; width: 1px; height: var(--fs-14); position: absolute; top: 50%; left: 0; transform: translate(-50%,-50%); background-color: var(--color-border2);}
.room-list .room-item .room-info-txt .txt-bot strong {color: var(--color-static1);}
.room-list .room-item .room-info-txt .txt-bot span {color: var(--color-text3);}
.room-list .room-item.sold-out {cursor: default; pointer-events: none;}
.room-list .room-item.sold-out .room-info {background-color: var(--state-soldout-bg);}
.room-list .room-item.sold-out .disabled {background-color: var(--color-text4); color: var(--color-white);}
.personnel-list {display: flex; flex-direction: column; row-gap: var(--fs-20);}
.personnel-list .personnel-item {display: flex; align-items: center; justify-content: space-between;}
.personnel-list .personnel-item .count-box {display: flex; align-items: center; column-gap: 10px;}
.personnel-list .personnel-item .count-box .count-value {width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;}
.desc-box.personnel-item {border-color: var(--color-border1);}
.reservation-popover {padding: var(--fs-20); border-radius: 8px; border: 1px solid var(--color-border1); box-shadow: var(--box-shadow); background-color: var(--color-white);}
.reservation-popover .personnel-list {margin-bottom: var(--fs-20); padding-bottom: var(--fs-20); border-bottom: 1px solid var(--color-border1);}
.reservation-popover .personnel-info p {color: var(--color-text3);}
.reservation-popover .personnel-info p + p {margin-top: 4px;}
.reservation-popover-bottom {padding-top: var(--fs-14); border-top: 1px solid var(--color-border1); display: flex; align-items: center; justify-content: space-between;}
.reservation-personnel-popover .reservation-popover-bottom {border-top: 0;}

/* 객실예약 */
.reservation-hero-section {margin-bottom: 0 !important;}
.reservation-search-section {margin-bottom: 120px !important; overflow: visible !important; transform: translateY(-50%); position: relative; z-index: 10; background-color: transparent !important;}
.reservation-search-section .inner {max-width: 1262px; position: relative;}
.reservation-search-section .reservation-search-box {box-shadow: var(--box-shadow); border-radius: 8px; overflow: hidden; background-color: var(--color-white); display: flex; align-items: stretch;}
.reservation-search-section .reservation-search-box > button {border-radius: 0; flex: 1; padding: var(--fs-18) var(--fs-30);}
.reservation-search-section .reservation-search-box > button:not(:last-child) {border: 0;}
.reservation-search-section .reservation-search-box > button:not(:last-child):hover {background-color: var(--color-bg2);}
.reservation-search-section .reservation-search-box > button .txt-wrap {display: flex; flex-direction: column; align-items: flex-start;}
.reservation-search-section .reservation-search-box > button span {color: var(--color-text2);}
.reservation-search-section .reservation-search-box > button strong {color: var(--color-text4); transition: color 0.2s;}
.reservation-search-section .reservation-search-box > button strong.selected {color: var(--color-text1);}
.reservation-search-section .reservation-search-box > button + button:not(:last-child) {position: relative;}
.reservation-search-section .reservation-search-box > button + button:not(:last-child)::after {content: ''; width: 1px; height: var(--fs-50); background-color: var(--color-border1); position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.reservation-search-section .reservation-search-box > button:last-child {flex: unset; width: 165px; flex-shrink: 0; justify-content: center;}
.reservation-search-section .reservation-popup-wrap {display: none; align-items: flex-start; column-gap: var(--fs-36); width: 100%; position: absolute; top: calc(100% + 10px); left: 0;}
/* .reservation-search-section .reservation-popover {opacity: 0; width: calc((100% - 165px) / 2 - var(--fs-36)); padding: var(--fs-20); border-radius: 8px; border: 1px solid var(--color-border1); box-shadow: var(--box-shadow); background-color: var(--color-white);} */
.reservation-search-section .reservation-popover {opacity: 0; width: calc((100% - 165px) / 2 - var(--fs-36));}
/* .reservation-search-section .reservation-popover .personnel-list {margin-bottom: var(--fs-20); padding-bottom: var(--fs-20); border-bottom: 1px solid var(--color-border1);}
.reservation-search-section .reservation-popover .personnel-info p {color: var(--color-text3);}
.reservation-search-section .reservation-popover .personnel-info p + p {margin-top: 4px;}
.reservation-search-section .reservation-popover-bottom {padding-top: var(--fs-14); border-top: 1px solid var(--color-border1); display: flex;align-items: center; justify-content: space-between;}
.reservation-search-section .reservation-personnel-popover .reservation-popover-bottom {border-top: 0;} */
.reservation-search-section .reservation-popup-wrap.open {display: flex;}
.reservation-search-section .reservation-popover.open {opacity: 1;}
.reservation-search-section .reservation-personnel-popover {max-width: 400px;}
.reservation-room-list-section .list-control {display: flex; align-items: center; justify-content: space-between;}

/* 객실예약 상세 */
.reservation-room-info-section {margin-top: var(--space-120);}
.reservation-room-info-section .inner {flex-direction: row !important; column-gap: var(--space-80); align-items: center;}
.reservation-room-info-section .room-detail-gallery {width: 60%; max-width: 900px; display:flex; flex-direction: column; align-items:stretch; gap:var(--fs-20); aspect-ratio: 900 / 556;}
.reservation-room-info-section .room-detail-gallery .gallery-main {position: relative; width: 100%; height:calc(77% - var(--fs-20)); border-radius: 8px; overflow: hidden;}
.reservation-room-info-section .room-detail-gallery .gallery-main .gallery-swiper {width: 100%; height: 100%;}
.reservation-room-info-section .room-detail-gallery .gallery-main .common-swiper-btn .arrow-btn {z-index: 10; position: absolute; top: 50%; transform: translateY(-50%); width: var(--fs-72); height: var(--fs-72);}
.reservation-room-info-section .room-detail-gallery .gallery-main .common-swiper-btn .arrow-btn img {width: 100%; height: 100%; object-fit: contain;}
.reservation-room-info-section .room-detail-gallery .gallery-main .common-swiper-btn .gallery-prev {left: 0;}
.reservation-room-info-section .room-detail-gallery .gallery-main .common-swiper-btn .gallery-next {right: 0;}
.reservation-room-info-section .room-detail-gallery .gallery-main .js-open-room-gallery {position: absolute; right: var(--fs-20); bottom: var(--fs-20); z-index: 10;}
.reservation-room-info-section .room-detail-gallery .gallery-side {width: 100%; height:23%; display:flex; gap:var(--fs-12);}
.reservation-room-info-section .room-detail-gallery .gallery-side .img-wrap {width: calc(100% - 4 - var(--fs-12) * 3  / 4); flex:1; min-height:0; border-radius: 8px; overflow: hidden;}
.reservation-room-info-section .room-detail-gallery .img-wrap img {width:100%; height:100%; object-fit:cover;}
.reservation-room-info-section .room-detail-info {width: calc(40% - var(--space-80)); flex: 1;}
.reservation-room-info-section .room-detail-info .room-tit-wrap h3 {margin-bottom: 10px;}
.reservation-room-info-section .reservation-detail-info {width: 100%; margin-block: var(--fs-32); padding-block: var(--fs-32); border-top: 1px solid var(--color-border2); border-bottom: 1px solid var(--color-border2); display: flex; align-items: flex-start; flex-direction: column;}
.reservation-room-info-section .reservation-detail-info li + li {margin-top: var(--fs-18);}
.reservation-room-info-section .reservation-detail-info li {display: flex; align-items: center; column-gap: 8px;}
html[data-theme="blue"] .reservation-room-info-section .reservation-detail-info li img {filter: brightness(0) saturate(100%) invert(67%) sepia(15%) saturate(659%) hue-rotate(154deg) brightness(90%) contrast(86%);}
html[data-theme="wood"] .reservation-room-info-section .reservation-detail-info li img {filter: brightness(0) saturate(100%) invert(70%) sepia(15%) saturate(651%) hue-rotate(328deg) brightness(91%) contrast(85%);}
.reservation-room-info-section .room-detail-info .price {padding-bottom: var(--fs-12);}
.reservation-room-info-section .room-detail-info .price strong {color: var(--color-static1);}
.reservation-room-info-section .room-detail-info .square-btn {margin-top: var(--fs-40);}

.reservation-detail-section .room-info-nav {z-index: 20; height: var(--space-60); background-color: var(--color-white); position: sticky; top: var(--header-height); display: flex; align-items: center; width: 100%; border-bottom: 1px solid var(--color-border1);}
.reservation-detail-section .room-info-nav .room-nav-link {background-color: var(--color-white); transition: background-color 0.2s; flex: 1; height: 100%; text-align: center; color: var(--color-text1); align-content: center; border-radius: 8px 8px 0 0;}
.reservation-detail-section .room-info-nav .room-nav-link:hover,
.reservation-detail-section .room-info-nav .room-nav-link.active {background-color: var(--color-static5);}
.reservation-detail-section .room-info-section {scroll-margin-top: calc(var(--header-height) + var(--space-60)); padding-top: var(--space-80);}
.reservation-detail-section .room-info-section + .room-info-section {margin-top: var(--space-80); border-top: 1px solid var(--color-border2);}
.reservation-detail-section .room-info-section .room-info-tit {margin-bottom: var(--fs-40);}

.reservation-detail-section .room-info-section .room-area-list {display: flex; flex-direction: column; row-gap: var(--fs-30);}
.reservation-detail-section .room-info-section .room-area-item span {padding-left: var(--fs-36);position: relative; color: var(--color-static1);}
.reservation-detail-section .room-info-section .room-area-item span::after {content: ''; display: block; position: absolute; top: 50%; left: clamp(14px, 1.25vw, 18px); transform: translate(-50%,-50%); width: calc(var(--fs-12) / 2); height: calc(var(--fs-12) / 2); border-radius: 50%; background-color: var(--color-static1);}
.reservation-detail-section .room-info-section .room-area-item p {margin-top: 10px; color: var(--color-text3);}

.reservation-detail-section .room-info-section .room-option-list {display: flex; align-items: flex-start; gap: var(--fs-12); flex-wrap: wrap;}
.reservation-detail-section .room-info-section .room-option-item {width: calc(100% / 8 - var(--fs-12) * 7 / 8); padding-block: var(--fs-18); border-radius: 8px; border: 1px solid var(--color-border1); display: flex; flex-direction: column; align-items: center; justify-content: center; row-gap: 6px;}
.reservation-detail-section .room-info-section .room-option-item img {width: var(--fs-36); height: var(--fs-36); object-fit: contain;}
.reservation-detail-section .room-info-section .room-option-item span {color: var(--color-static1);}

.reservation-detail-section .room-info-section .room-guide-list {display: flex; flex-direction: column; row-gap: var(--fs-30);}
.reservation-detail-section .room-info-section .room-guide-item {transition: box-shadow 0.2s; border-radius: 8px; border: 1px solid var(--color-border1);}
.reservation-detail-section .room-info-section .room-guide-item button {width: 100%; padding: var(--fs-16) var(--fs-20); display: flex; align-items: center; justify-content: space-between;}
.reservation-detail-section .room-info-section .room-guide-item:has(button:hover) {box-shadow: var(--box-shadow);} 
.reservation-detail-section .room-info-section .room-guide-item button span {color: var(--color-static1);}
.reservation-detail-section .room-info-section .room-guide-item button img {transition: transform 0.2s;}
.reservation-detail-section .room-info-section .room-guide-item.open button img {transform: rotate(180deg);}
.reservation-detail-section .room-info-section .room-guide-sub-list {max-height:0; overflow:hidden; padding:0 var(--fs-20); transition:max-height 0.2s ease, padding 0.2s ease;}
.reservation-detail-section .room-info-section .room-guide-item.open .room-guide-sub-list {max-height: 500px; padding:8px var(--fs-20);}
.reservation-detail-section .room-info-section .room-guide-sub-item {padding-block: var(--fs-18); display: flex; align-items: center; justify-content: space-between;}
.reservation-detail-section .room-info-section .room-guide-sub-item + .room-guide-sub-item  {border-top: 1px solid var(--color-border1);}
.reservation-detail-section .room-info-section .room-guide-sub-item span {color: var(--color-static1);}
.reservation-detail-section .room-info-section .room-guide-sub-item strong {color: var(--color-text2);}

.reservation-detail-section .room-info-section .full-table {margin-bottom: var(--fs-20);}
.reservation-detail-section .room-info-section .room-list {grid-template-columns: repeat(3, 1fr);}

.reservation-detail-section .full-box-body {display: flex; flex-direction: column; row-gap: var(--fs-16);}
.reservation-detail-section .full-box-body .reservation-btn-wrap {display: flex; flex-direction: column; row-gap: var(--fs-12);}
.reservation-detail-section .full-box-body .reservation-select-btn {padding: var(--fs-12); width: 100%; justify-content: space-between;}
.reservation-detail-section .full-box-body .reservation-select-btn + .reservation-select-btn {padding-top: var(--fs-12);}
.reservation-detail-section .full-box-body .reservation-price-list {display: flex; flex-direction: column; row-gap: 10px;}
.reservation-detail-section .full-box-body .reservation-price-list li,
.reservation-detail-section .full-box-body .reservation-total-price {display: flex; align-items: center; justify-content: space-between;}
.reservation-detail-section .full-box-body .reservation-total-price {align-items: flex-start;}
.reservation-detail-section .full-box-body .reservation-price-list li span,
.reservation-detail-section .full-box-body .reservation-total-price > span {color: var(--color-text2);}
.reservation-detail-section .full-box-body .reservation-price-list li strong,
.reservation-detail-section .full-box-body .reservation-total-price .price-wrap strong {color: var(--color-text1);}
.reservation-detail-section .full-box-body .reservation-total-price .price-wrap span {color: var(--color-text4);}
.reservation-detail-section .full-box-body .reservation-total-price .price-wrap {display: flex; flex-direction: column; align-items: flex-end; row-gap: 6px;}
.reservation-detail-section .full-box-body .reservation-total-price {padding-top: var(--fs-20); border-top: 1px solid var(--color-border1);}
.reservation-detail-section .full-box-body .reservation-notice-list {padding-top: var(--fs-20); position: relative;}
.reservation-detail-section .full-box-body .reservation-notice-list::after {content: ''; width: calc(100% + var(--fs-14) * 2); height: 1px; background-color: var(--color-border1); position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
.reservation-detail-section .full-box-body .reservation-notice-list li {display: flex; align-items: center; column-gap: var(--fs-12); color: var(--color-text3);}
.reservation-detail-section .full-box-body .reservation-notice-list li::before {content: ''; display: block; width: 5px; height: 5px; border-radius: 50%; background-color: var(--color-static5);}

.reservation-detail-section .right {z-index: 30;}
.reservation-detail-section .reservation-popup-wrap {position: absolute; top: 0; right: calc(100% + var(--fs-26));}
.reservation-detail-section .reservation-popup-wrap .reservation-popover {display: none; width: 512px;}
.reservation-detail-section .reservation-popup-wrap .reservation-date-popover.open {display: block;}
.reservation-detail-section .reservation-popup-wrap .reservation-personnel-popover.open {display: block;}

.other-room-section .inner {row-gap: var(--fs-40) !important;}

.room-gallery-modal {position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; background:rgb(var(--rgb-black) / 95%); opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s;}
.room-gallery-modal.open {opacity:1; visibility:visible;}
.room-gallery-modal .inner {position:relative; height: 100%; max-height: 660px;}
.room-gallery-modal .inner .common-swiper-btn {position:absolute; top:50%; left:50%; z-index:10; width: 100%; display:flex; justify-content:space-between; transform:translate(-50%, -50%); pointer-events:none;}
.room-gallery-modal .inner .common-swiper-btn button {pointer-events:auto;}
.room-gallery-modal .gallery-modal-swiper {height: 100%; width: calc(100% - 184px); align-items: center;}
.room-gallery-modal .gallery-modal-swiper .swiper-slide {display:flex; justify-content:center; align-items:center;}
/* .room-gallery-modal .gallery-modal-swiper .img-wrap img {max-width:100%; max-height:660px; object-fit:contain;} */
.room-gallery-modal .gallery-modal-swiper .img-wrap img {width: 100%; height: 100%; object-fit: contain;}
.room-gallery-modal .room-gallery-close {position:absolute; top:var(--fs-40); right:var(--fs-40); z-index:10;}
.room-gallery-modal .gallery-pagination {cursor: default; pointer-events: none; position:absolute; right: var(--fs-20) !important; bottom: var(--fs-20) !important; left:unset !important; top:unset !important; z-index: 10;}


/* 예약 정보 입력 */
.reservation-order-hero {padding-block:var(--space-80); background-color:var(--color-bg2); max-height: 272px; margin-bottom: var(--space-120) !important; padding-block: 0 !important;}
.reservation-order-section .reserved-room-box {margin-bottom: var(--space-80);}
/* 예약 완료 */
.reservation-complete-hero {padding-block:var(--space-80); background-color:var(--color-bg2); max-height: 272px; margin-bottom: var(--space-120) !important; padding-block: 0 !important;}
.reservation-complete-hero .complete-ico {margin-bottom: var(--fs-24);}


@media screen and (min-width: 769px) {
    .mobile-reservation-handle {display: none;}
}
@media screen and (max-width: 1600px) {
    .room-list .room-item .room-info-txt .txt-top .info span img {display: none;}
}

@media screen and (max-width: 1280px) {
    .room-list .room-item .room-info-txt .txt-top .info {flex-direction: column; row-gap: 4px; align-items: flex-start;}
    .room-list .room-item .room-info-txt .txt-top .info span + span {padding-left: 0; margin-left: 0;}
    .room-list .room-item .room-info-txt .txt-top .info span + span::after {display: none;}
    .room-list .room-item .room-info-txt .txt-top .info span img {display: inline-block;}

    .reservation-detail-section .full-box-body .reservation-select-btn {padding-inline: 0;}
    .reservation-detail-section .full-box-body .reservation-select-btn span {font-size: 14px;}
    .reservation-detail-section .room-info-section .room-option-item {width: calc(100% / 6 - var(--fs-12) * 5 / 6);}
}

@media screen and (max-width: 1024px) {
    .room-list {grid-template-columns: repeat(2, 1fr);}

    .reservation-search-section .reservation-search-box > button {padding: var(--fs-18) var(--fs-12);}
    .reservation-search-section .reservation-search-box > button:last-child {width: 100px;}
    .reservation-search-section .reservation-popover {width: 100%; max-width: 440px;}
    .reservation-search-section .reservation-personnel-popover {width: calc((100% - 100px) / 2);}
    .reservation-search-section .reservation-date-popover {position: absolute; top: 0; left: 0;}
    .reservation-search-section .reservation-personnel-popover {position: absolute; top: 0; left: calc((100% - 100px) / 2 );}

    .reservation-room-info-section .inner {flex-direction: column !important;}
    .reservation-room-info-section .room-detail-gallery {aspect-ratio: unset; height: 57vw;}
    .reservation-room-info-section .room-detail-gallery,
    .reservation-room-info-section .room-detail-info {width: 100%; max-width: unset;}
    
    .reservation-room-info-section .reservation-detail-info {justify-content: space-between;}
    .reservation-room-info-section .reservation-detail-info li + li {margin-left: 0; padding-left: 0; border-left: 0;}

    .reservation-detail-section .room-info-section .room-list {grid-template-columns: repeat(2, 1fr);}
    .reservation-detail-section .room-info-section .room-item:last-child {display: none;}
    .reservation-detail-section .room-info-section .room-option-item {width: calc(100% / 4 - var(--fs-12) * 3 / 4);}
}

@media screen and (max-width: 768px) {
    .room-list .room-item .room-info {padding: var(--fs-20);}

    .reservation-search-section {transform: none; margin-bottom: 40px !important; margin-top: calc(-1 * var(--fs-48));}
    .reservation-search-section .reservation-search-box {flex-direction: column;}
    .reservation-search-section .reservation-search-box > button,
    .reservation-search-section .reservation-search-box > button:last-child {width: 100%;}
    .reservation-search-section .reservation-search-box > button + button:not(:last-child) {border-top: 1px solid var(--color-border1);}
    .reservation-search-section .reservation-search-box > button + button:not(:last-child)::after {display: none;}

    body:has(.reservation-popup-wrap.open),
    html:has(.reservation-popup-wrap.open),
    body:has(.reservation-summary-box.open),
    html:has(.reservation-summary-box.open) {overflow-y: hidden; touch-action: none;}
    html:has(.reservation-popup-wrap.open) .header,
    html:has(.reservation-summary-box.open) .header {z-index: 1;}
    .reservation-search-section:has(.reservation-popup-wrap.open) .inner::after,
    .reservation-detail-section:has(.reservation-popup-wrap.open) .inner::after,
    .reservation-detail-section:has(.reservation-summary-box.open) .inner::after {z-index: 1000; width: 100vw; height: 100vh; background-color: rgb(var(--rgb-black) / 50%); content: ''; position: fixed; top: 0; left: 0;}
    .reservation-detail-section:has(.reservation-summary-box.open) .inner::after {z-index: 1;}

    .reservation-search-section .reservation-popup-wrap {z-index: 1001; transition: transform 0.2s; display: block; position: fixed; left: 0; bottom: 0; top: unset; transform: translateY(100%);}
    .reservation-search-section .reservation-popup-wrap.open {display: block; transform: translateY(0);}
    .reservation-search-section .reservation-popover {width: 100%; max-width: unset; opacity: 1; position: relative; border-radius: var(--fs-20) var(--fs-20) 0 0;}
    .reservation-search-section .reservation-popover::before{display: block; content: ''; width: 36px; height: 4px; border-radius: 2px; background-color: rgb(var(--rgb-black) / 20%); margin-inline: auto; margin-bottom: var(--fs-20);}
    .reservation-search-section .reservation-popover:not(.open) {display: none;}
    .reservation-search-section .common-calendar .calendar-day-list .calendar-day {max-height: 70px;}
    .reservation-search-section .reservation-personnel-popover {left: 0;}

    .reservation-room-list-section .list-control {display: none;}

    .reservation-room-info-section {margin-top: 60px;}
    .reservation-room-info-section .room-detail-gallery {height: 67vw; max-height: 410px;}
    .reservation-room-info-section .room-detail-gallery .gallery-main {height: 100%;}
    .reservation-room-info-section .room-detail-gallery .gallery-side {display: none;}
    .reservation-room-info-section .reservation-detail-info {flex-wrap: wrap; row-gap: var(--fs-12);}
    .reservation-room-info-section .reservation-detail-info li {width: 50%;}
    .reservation-room-info-section .room-detail-info .square-btn {display: none;}

    .reservation-detail-section .left,
    .reservation-detail-section .right {width: 100%;}
    .reservation-detail-section .right {position: fixed; left: 0; bottom: 0; top: unset;}
    .reservation-detail-section .reservation-summary-box {transition: transform 0.2s; transform: translateY(100%); position: fixed; left: 0; bottom: 0; z-index: 99; width: 100%; height: fit-content;}
    .reservation-detail-section .reservation-summary-box.open {transform: translateY(0);}
    .reservation-detail-section .reservation-summary-box .full-box-tit::before,
    .reservation-detail-section .mobile-reservation-handle .full-box-tit::before {background-color: transparent; width: 26px; height: 8px; background-image: url(../img/sub/handle-ico.svg); background-repeat: no-repeat; background-position: center center;}
    .reservation-detail-section .reservation-summary-box.open:has(.full-box-tit:hover) {transform: translateY(var(--fs-12));}
    .reservation-detail-section .reservation-summary-box .full-box-tit::before {background-image: url(../img/sub/handle-close-ico.svg);}
    .reservation-detail-section .mobile-reservation-handle {transition: padding 0.2s; cursor: pointer; box-shadow: 0 -16px 20px 4px rgb(var(--rgb-black) / 8%); border-radius: 8px 8px 0 0; overflow: hidden;}
    .reservation-detail-section .mobile-reservation-handle:hover {padding-bottom: var(--fs-12);}
    .reservation-detail-section .mobile-reservation-handle .full-box-tit {background-color: var(--color-white);}
    .reservation-detail-section .mobile-reservation-handle .full-box-tit p {color: var(--color-static1);}
    .reservation-detail-section .mobile-reservation-handle .full-box-body {border: 0;}
    .reservation-detail-section .full-box-body .reservation-notice-list {display: none;}
    .reservation-detail-section .full-box-body .reservation-select-btn {padding-inline: var(--fs-12);}
    .reservation-detail-section .full-box-body .reservation-select-btn span {font-size: 15px;}

    /* .reservation-detail-section .reservation-popup-wrap {position: fixed; z-index: 1001; left: 0; top: unset; right: 0; bottom: 0;} */
    .reservation-detail-section .reservation-popup-wrap {width: 100%; z-index: 1001; transition: transform 0.2s; display: block; position: fixed; left: 0; bottom: 0; top: unset; right: unset; transform: translateY(100%);}
    .reservation-detail-section .reservation-popup-wrap.open {display: block; transform: translateY(0);}
    .reservation-detail-section .reservation-popover {width: 100% !important; max-width: unset; opacity: 1; position: relative; border-radius: 8px 8px 0 0;}
    .reservation-detail-section .reservation-popover::before{display: block; content: ''; width: 36px; height: 4px; border-radius: 2px; background-color: rgb(var(--rgb-black) / 20%); margin-inline: auto; margin-bottom: var(--fs-20);}
    .reservation-detail-section .reservation-popover:not(.open) {display: none;}
    .reservation-detail-section .common-calendar .calendar-day-list .calendar-day {max-height: 70px;}
    .reservation-detail-section .reservation-personnel-popover {left: 0;}
    .reservation-detail-section .reservation-summary-box:has(+.reservation-popup-wrap.open) {transform: translateY(100%);}

    .room-gallery-modal {background-color: var(--color-white);}
    .room-gallery-modal .inner {width: 100%; max-height: unset;}
    .room-gallery-modal .inner .common-swiper-btn {display: none;}
    .room-gallery-modal .gallery-modal-swiper {width: 100%;}
    .room-gallery-modal .room-gallery-close {color: var(--color-black);}
    .room-gallery-modal .room-gallery-close img {-webkit-filter: grayscale(100%) brightness(0); filter: grayscale(100%) brightness(0);}
}

@media screen and (max-width: 500px) {
    .room-list,
    .reservation-detail-section .room-info-section .room-list {grid-template-columns: repeat(1, 1fr);}
    .reservation-room-info-section {margin-top: 40px;}
    .reservation-room-info-section .reservation-detail-info li {width: 100%;}
    .reservation-detail-section .room-info-section .room-option-item {width: calc(100% / 3 - var(--fs-12) * 2 / 3);}
}

@media screen and (max-width: 375px) {
    .reservation-detail-section .full-box-body .reservation-select-btn {padding: 0;}
    .reservation-detail-section .full-box-body .reservation-select-btn span {font-size: 14px;}
}

/* 
잘림방지코드
.common-calendar {min-width: 400px; border-radius:24px; background:var(--color-white);}
.common-calendar .swiper {width: 100%;}
.common-calendar .calendar-month {display:flex; justify-content:space-between; align-items:center; margin-bottom: 14px;}
.common-calendar .calendar-nav {display:flex; align-items:center; column-gap:12px;}
.common-calendar .calendar-nav button {display:flex; justify-content:center; align-items:center; width:40px; height:40px; border:1px solid var(--color-border1); border-radius:8px; background:var(--color-white); font-size:24px; transition:.3s;}
.common-calendar .calendar-nav button:hover {background:var(--bg-2);}
.common-calendar .calendar-b {padding: 20px 24px;}
.common-calendar .calendar-week {display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:24px;}
.common-calendar .calendar-week span {text-align:center; font-size:var(--fs-16); font-weight:500;}
.common-calendar .calendar-week .sun {color:#C0392B;}
.common-calendar .calendar-week .sat {color:#3B82F6;}
.common-calendar .calendar-grid {display:grid; grid-template-columns:repeat(7,1fr); gap:8px;}
.common-calendar .calendar-grid .day {display: flex; flex-direction: column; align-items: center; justify-content: center; height: 90px; cursor: pointer;}
.common-calendar .calendar-grid .day.past {opacity: 0.5;}
.common-calendar .calendar-grid .day.today {border: 1px solid var(--color-border1); border-radius: 6px;}
.common-calendar .calendar-grid .day.selected {background-color: var(--color-static3); border-radius: 6px;}
.common-calendar .calendar-grid .day.selected .date {color: var(--color-white);}
.common-calendar .calendar-grid .day .date {font-size: 16px; font-weight: 500; line-height: 1.7;}

@media screen and (max-width: 768px) {
    .tab-list {column-gap: var(--fs-30);}
} */