@charset "utf-8";

/* sub 공통 */
.sub-top {padding: 40px 0;}
.sub-top.bg {background-color: var(--bg-main-2);}
.sub-tit-wrap {display: flex; flex-direction: column; row-gap: 12px;}

.sub-cont {padding: 80px 0 150px 0; display: flex; flex-direction: column; row-gap: 100px;}
.no-pd-t {padding: 0 0 150px 0;}
.sub-cont.bg {background-color: var(--bg-main-2);}


/* 예약하기 */
.filter-wrap {display: flex; justify-content: space-between; align-items: center;}
.filter {display: flex; align-items: center; column-gap: 8px;}
.filter > .btn {font-size: var(--fs-15); font-weight: 400; color: var(--text-2); transition: all 0.3s;}
.filter > .btn:hover,
.filter > .btn.active {border: 1px solid var(--text-main); color: var(--color-white); background-color: var(--text-main);}

.booking-list-top .date-wrap {max-width: 873px; display: flex; align-items: flex-end; justify-content: space-between; column-gap: 40px;}
.booking-list-top .booking-date {display: flex; align-items: center; column-gap: 10px;}
.booking-list-top .booking-date li {font-size: 14px; font-weight: 700;}
.booking-list-top .booking-date .booking-date-line {font-size: 13px; color: var(--text-2);}
.booking-list-top .booking-date .booking-date-info {border-bottom: 0; column-gap: 4px; color: var(--text-2); font-size: 14px; font-weight: 400;}
.booking-list-top .booking-date .booking-date-info span {font-size: 14px; font-weight: 400; color: var(--text-2);}

.booking-list-cont .booking-list {row-gap: 60px;}

/* 예약 view */
.room-detail-gallery {position:relative; display:grid; grid-template-columns:2fr 1fr; gap:12px;}
.room-detail-gallery__main {position:relative; height:500px; min-width:0;}
.room-detail-gallery-swiper {height:100%; border-radius:10px; overflow:hidden; z-index: 0 !important;}
.room-detail-gallery .common-swiper-btn {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:calc(100% - 32px); display:flex; justify-content:space-between; z-index:0;}
.room-detail-gallery__side {height:500px; display:grid; grid-template-rows:1fr 1fr; gap:12px;}
.room-detail-gallery__side .img-wrap {width:100%; height:100%; border-radius:10px; overflow:hidden;}
.room-detail-gallery__label {position:absolute; right:16px; bottom:16px; z-index:0; background-color: var(--color-white);}

.room-gallery-modal {position:fixed; display: flex; align-items: center; justify-content: center; inset:0; z-index:99999; background:rgba(0,0,0,.95); opacity:0; visibility:hidden; transition:opacity .4s ease, visibility .4s ease;}
.room-gallery-modal.open {opacity:1; visibility:visible;}

.room-gallery-modal__inner {position: relative; width: 80%;}
.room-gallery-modal__inner .common-swiper-btn {position: absolute; width: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; display: flex; justify-content: space-between;}
.room-gallery-modal-swiper {max-height: 660px; width: 100%;}
.room-gallery-modal-swiper .swiper-slide {display:flex; justify-content:center; align-items:center; opacity:0 !important; transition:opacity 0.5s ease;}
.room-gallery-modal-swiper .swiper-slide-active {opacity:1 !important;}

.room-gallery-prev {left:40px;}
.room-gallery-next {right:40px;}
.room-gallery-close {position:absolute; top:40px; right:40px; z-index:20; color: var(--color-white); display: flex; align-items: center; column-gap: 10px;}
.room-gallery-pagination {position:absolute; width: fit-content !important; top: auto !important; left: auto !important; right:20px !important; bottom:20px !important; z-index:20; padding: 10px 20px; border-radius:999px; background:var(--color-white); font-size:15px; line-height: 1.6; color: var(--text-2) !important;}

.room-intro {display: flex; flex-direction: column; row-gap: 10px;}
.room-intro .room-title {font-size:var(--fs-24); line-height: 1.4;}
.room-intro .room-info-grid {display:grid; grid-template-columns:repeat(4,1fr);border:1px solid var(--border-1); border-radius:10px; overflow:hidden;}
.room-intro .room-info-item {padding: 16px 18px; display: flex; flex-direction: column; row-gap: 4px;}
.room-intro .room-info-item:not(:last-child) {border-right:1px solid var(--border-1);}
.room-intro .room-info-item span {font-size:var(--fs-15); line-height: 1.6; color:var(--color-main);}
.room-intro .room-info-item strong {font-size:var(--fs-18); line-height: 1.7; word-break: keep-all;}

.room-nav-cont {display: flex; flex-direction: column; row-gap: 20px;}
.room-nav-cont .room-nav {display:flex; align-items:center; border-bottom:1px solid var(--border-1);}
.room-nav-cont .room-nav-link {padding: 8px 48px; font-size:var(--fs-15); transition:all .3s ease; cursor: pointer;}
.room-nav-cont .room-nav-link:hover {background-color: rgba(74, 103, 65, 0.05);}

.room-info-section {display: flex; flex-direction: column; row-gap: 80px;}
.room-info-section .room-section-head {display:flex; align-items:center; column-gap:10px; margin-bottom:16px;}
.room-info-section .room-section-head::after {content:''; flex:1; height:1px; background:var(--border-1);}
.room-info-section .room-section-tit {font-size:var(--fs-16); font-weight:500; flex-shrink:0; line-height: 1.6;}
.room-info-section .room-area-cont {display:flex; flex-direction:column; row-gap:16px;}
.room-info-section .room-area-cont p {font-size:var(--fs-15); line-height:1.6; color:var(--text-2);}
.room-info-section .room-option-list {display:flex; flex-wrap:wrap; gap:20px;}

.room-info-section .refund-head {display:grid; grid-template-columns:2fr 1.5fr 2fr; min-height: 49px; background:#F5F1EB; border-bottom:1px solid var(--border-1);}
.room-info-section .refund-head span {display:flex; align-items:center; padding:0 16px; font-size:var(--fs-15); line-height: 1.6;}
.refund-row {display:grid; grid-template-columns:2fr 1.5fr 2fr; min-height: 49px; border-bottom:1px solid var(--border-1);}
.refund-row p,
.refund-row strong,
.refund-row span {display:flex; align-items:center; padding:0 16px; margin:0;  font-size:var(--fs-15); line-height: 1.6; color:var(--text-2);}
.refund-row strong {color:var(--text-main);}
.refund-notice {display:flex; align-items:center; column-gap:10px; margin-top:12px; padding:20px; border:1px solid rgba(192, 57, 43, 0.15); border-radius:6px; background:#FCF3F3; color:#8B2A20;}
.refund-notice svg {flex-shrink:0;}
.refund-notice p {font-size:var(--fs-13); line-height:1.6;}

/* 이용안내 */
.guide-cont .guide-info-wrap .guide-sub-tit,
.guide-cont .guide-info-wrap .guide-card-tit,
.guide-cont .guide-info-wrap .guide-time strong {color: var(--text-main);}
.guide-cont .guide-info-wrap .guide-time span,
.guide-cont .bullet {color: var(--text-2);}
.guide-cont .bullet.circle-bullet span {background-color: var(--text-2);}
.guide-cont .guide-info-wrap .guide-card {padding: 28px; background: rgba(255,255,255,1);}
.guide-cont .guide-rule .guide-list {row-gap: 2px;}
.guide-cont .guide-rule .guide-list .num:not(:first-of-type) {margin-top: 20px;}
.guide-cont .guide-rule .guide-list .bullet:not(.num) {padding-left: 14px;}

.guide-cont .faq-section .tit-wrap {margin-bottom: 40px;}
.guide-cont .faq-section .accordian-item {background-color: var(--color-white);overflow: hidden;}
.guide-cont .faq-section .accordian-item .accordian-head {height: 72px; column-gap: 16px;}
.guide-cont .faq-section .accordian-item .accordian-head .text-q {width: 26px; height: 26px; font-size: var(--fs-15); display: flex; align-items: center; justify-content: center; color: var(--color-main); background-color:rgba(74, 103, 65, 0.1); border-radius: 50%;}
.guide-cont .faq-section .accordian-item .accordian-head .faq-tit {font-size: var(--fs-18); line-height: 1.7; font-weight: 500;}
.guide-cont .faq-section .accordian-item .accordian-body p {font-size: var(--fs-16); font-weight: 500; line-height: 1.7; color: var(--text-2); padding-bottom: 20px;}
.guide-cont .faq-section .accordian-item.open {border: 1px solid var(--color-main)}
.guide-cont .faq-section .accordian-item.open .accordian-head .text-q {color: var(--color-white); background-color: var(--color-main);}

/* 예약확인 */
.booking-check-cont .icon-check {align-items: center; column-gap: 20px; border-radius: 10px; background-color: var(--color-main); padding: 16px 32px;}
.booking-check-cont .icon-check .icon {display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.3);}
.booking-check-cont .icon-check .text {display: flex; flex-direction: column; row-gap: 2px; color: var(--color-white);}
.booking-check-cont .icon-check .text strong {font-weight: 600; font-size: var(--fs-16);}
.booking-check-cont .icon-check .text span {font-size: var(--fs-15); line-height: 1.6;}

/* 예약단계 */
.step-top {position: sticky; top: 64px; z-index: 100; display: flex; justify-content: center; align-items: center; column-gap: 50px; padding: 20px 0;}
.step-top li {display: flex; align-items: center; column-gap: 10px;}
.step-top li.line {max-width: 52px;}
.step-top li .num {width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background-color: var(--color-white); font-size: var(--fs-15); border-radius: 50%; border: 2px solid var(--border-1); color: var(--text-4);}
.step-top li .info {display: flex; flex-direction: column;}
.step-top li .info span {color: var(--text-3);}
.step-top li.active .num {background-color: var(--color-main); border: 2px solid var(--color-main); color: var(--color-white);}
.step-top li.active .eyebrow {color: var(--color-main);}
.step-top li.active span {color: var(--text-main);}
.step-top li mo.mode {display: none;}

.booking-step-cont {row-gap: 60px;}
.booking-step-cont .sticky-wrap .sticky-cont {row-gap: 30px;}
.booking-step-cont .sticky-wrap .sticky-card-wrap {top: 180px;}
.booking-step-cont .booking-date-wrap .booking-item .booking-value {cursor: default;}

.person-add-modal {position: revert; display: block; min-width: 100%; padding: 0; z-index: 0;}
.person-add-modal .person-add-list {padding: 20px 24px;}
.person-add-modal .person-add-list .desc {padding: 10px 14px; border-radius: 6px; background-color: var(--bg-main-2); margin-top: 12px;}

.booking-step-1 .room-change-modal {top: 130px; left: 0; right: auto; max-width: 860px; z-index: 9; width: 100%; max-height: 400px; overflow-y: scroll; -ms-overflow-style:none; scrollbar-width:none;}
.booking-step-1 .room-change-modal::-webkit-scrollbar {display:none; width:0; height:0;}
.booking-step-1 .room-change-modal .room-change-list {display: flex; flex-direction: column; row-gap: 24px;}
.booking-step-1 .room-change-modal .room-change-list .common-room-info {flex-wrap: nowrap; column-gap: 20px;}
.booking-step-1 .room-change-modal .room-change-list .common-room-info .info {width: 100%; row-gap: 2px;}
.booking-step-1 .room-change-modal .room-change-list .common-room-info .img-wrap,
.booking-step-1 .room-change-modal .room-change-list .common-room-info .btn {flex-shrink: 0;}
.booking-step-1 .room-change-modal .room-change-list .common-room-info .room-info li {font-size: var(--fs-15);}
.booking-step-1 .room-change-modal .room-change-list .common-room-info .room-night-price {font-size: var(--fs-18); font-weight: 500; color: var(--color-main);}
.booking-step-1 .room-change-modal .room-change-list .common-room-info:not(:last-of-type) {padding-bottom: 24px; border-bottom: 1px solid var(--border-1);}

.agree-list .checkbox-item input[type="checkbox"] + label {padding: 0 0 0 20px; border: 0; border-radius: 0; column-gap: 10px;}
.agree-list .checkbox-item input[type="checkbox"] + label:before {left: 0;}
.agree-list .checkbox-item input[type="checkbox"] + label small {font-size: var(--fs-12); color: var(--text-3);}

.refund-card {display:flex; flex-direction:column; row-gap:8px; padding: 14px 16px; border-radius:12px; background: var(--bg-main-2); margin-top: 4px;}
.refund-card-tit {font-size:var(--fs-16); font-weight:500; line-height: 1.7;}
.refund-time {display:flex; flex-direction:column; row-gap:4px;}
.refund-time li {display:flex; justify-content:space-between; align-items:center; column-gap:6px;}
.refund-time span {font-size:var(--fs-15); line-height: 1.6; color:var(--text-2);}
.refund-time strong {font-size:var(--fs-15); line-height: 1.6; color:var(--color-main);}

.icon-complete {row-gap: 10px; align-items: center; text-align: center;}
.icon-complete .icon {display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(74, 103, 65, 0.3); background-color: rgba(74, 103, 65, 0.12);}

.booking-date-info {background-color: var(--bg-main-2); border-bottom: 1px solid var(--border-1); display: flex; align-items: center; justify-content: space-between; column-gap: 40px;}
.booking-date-info .booking-date-item {display: flex; flex-direction: column;}
.booking-date-info .booking-date-item .booking-date {font-size: var(--fs-16);}
.booking-date-info .booking-date-item.checkout {text-align: right;}
.booking-date-info .booking-date-night {display: flex; flex-direction: column; align-items: center; row-gap: 10px;}
.booking-date-info .booking-date-night .booking-night {background-color: var(--color-main); font-weight: 400; border-radius: 100px; color: var(--color-white); font-size: 15px; font-weight: 1.6; padding: 2px 10px;}

.booking-complete-cont {flex-direction: column; row-gap: 80px;}
.booking-complete-cont .common-card > li.common-list {padding: 0 !important;}
.booking-complete-cont .common-card > li.common-list .common-list-item {padding: 10px 20px;}
.booking-complete-cont .common-card > li.common-list .common-list-item.total-price-item {background-color: var(--bg-main-2);}

.booking-notice {display: flex; flex-direction: column; row-gap: 10px; background-color: rgba(200, 184, 154, 0.15); padding: 20px; border: 1px solid rgba(200, 184, 154, 0.5);}
.booking-notice .booking-notice-head {display: flex; align-items: center; column-gap: 6px;}
.booking-notice .booking-notice-head .label {font-size: var(--fs-12); padding: 2px 4px; border-radius: 999px; background-color: var(--static-1); font-weight: 700; color: var(--color-white);}
.booking-notice .booking-number-box {padding: 12px 16px; border: 1px solid var(--border-1); border-radius: 12px; background-color: var(--color-white); display: flex; justify-content: space-between; align-items: center; column-gap: 20px;}
.booking-notice .booking-number-box .booking-number {font-size: var(--fs-16); font-weight: 500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.booking-notice .booking-number-box .booking-number-info {width: 100%; display: flex; flex-direction: column; }
.booking-notice .booking-number-box button {flex-shrink: 0;}

.booking-notice-list {row-gap: 12px;}
.booking-notice-list .accordian-item {border: 0;}
.booking-notice-list .accordian-item .accordian-head {border-bottom: 0; height: 60px;}
.booking-notice-list .accordian-item .accordian-body .bullet:first-of-type {padding-top: 16px;}
.booking-notice-list .accordian-item .accordian-body .bullet:last-of-type {padding-bottom: 16px;}
.booking-notice-list .accordian-item.open .accordian-body {display: flex; flex-direction: column; row-gap: 4px;}
.booking-notice-list .accordian-item.open .accordian-head {border-bottom: 1px solid var(--border-1);}

@media screen and (max-width:1520px) {
    .room-gallery-modal__inner .common-swiper-btn {width: calc(100% + 12vw);}
}

@media screen and (max-width:1280px) {
   .room-nav-cont .room-nav-link {padding: 8px 0; width: calc(100% / 5); text-align: center;}

}

@media screen and (max-width:1024px) {
    .room-nav-cont .room-nav ,
    .room-detail-gallery__side {display: none;}

    .room-detail-gallery {grid-template-columns: 1fr;}
    .room-detail-gallery__main {height: 50vw;}

    .step-top {position: relative; top: 0; column-gap: 4vw;}
    .step-top li {flex-direction: column; row-gap: 10px; text-align: center;}

    .booking-step-cont .sticky-wrap .sticky-card-wrap {top: auto;}

    .booking-step-1 .room-change-modal {z-index: 9999999; top: auto; max-width: 100%; max-height: 60vh;}
    
}

@media screen and (max-width:768px) {
    
    .sub-cont {padding: 60px 0 120px 0;}
    .no-pd-t {padding: 0 0 120px 0;}
    
    .booking-list-cont .booking-list {column-gap: 20px;}
    
    .room-gallery-modal__inner .common-swiper-btn {width: calc(100% - 4vw);}
    
    .room-info-section #room-other {display: none;}
    
    .step-top {column-gap: 3vw;}
    .step-top li.line {max-width: 7vw;}
}

@media screen and (max-width:600px) {
    .booking-list-top .date-wrap {flex-direction: column; row-gap: 12px; align-items: flex-start;}
}

@media screen and (max-width:500px) {

    .sub-cont {padding: 60px 0 100px 0; row-gap: 80px;}
    .no-pd-t {padding: 0 0 100px 0;}

    .filter-wrap {flex-direction: column; row-gap: 10px; align-items: flex-start;}
    .filter {flex-wrap: wrap;}

    .room-info-section .room-option-list {gap: 16px;}
    .room-info-section .room-option-list .btn-xl {padding: 10px 16px;}

    .guide-cont .guide-info-wrap .guide-card {padding: 20px;}
    
    .step-top {column-gap: 0; padding: 20px;}
    .step-top li {position: relative; z-index: 1; width: calc(100% / 4);}
    .step-top::after {position: absolute; width: calc(100% - 26%); height: 1px; background-color: var(--border-1); z-index: 0; top: 34px; left: 50%; transform: translateX(-50%); display: block; content: '';}
    .step-top li.line {display: none;}
    .booking-step-cont {row-gap: 40px;}
    .step-top li .mo-mode {display: block;}
    .step-top li .pc-mode {display: none;}
}

@media screen and (max-width:375px) {
    .step-top {padding: 20px 16px;}
}


/********/
/********/
/********/
/********/
/********/
/********/
/********/
/********/
/********/
/********/
/********/
/********/
/********/
/********/
/********/