@charset "utf-8";
.container > section:not(.hero-section) .inner {align-items: center;}
.main-section .section-tit-wrap .section-tit {text-align: center;}

/* 실시간 예약 현황 */
.reservation-section .reservation-wrap {width: 100%; display: flex; align-items: flex-start; column-gap: var(--fs-30);}
.reservation-section .reservation-calendar {flex: 1;}
/* .reservation-section .reservation-list {position: relative; background-color: var(--color-white); flex-shrink: 0; height: 100%; display: flex; flex-direction: column;}
.reservation-section .reservation-list .selected-reservation {color: var(--color-text6); border-radius: 8px 8px 0 0; background-color: var(--color-static1); padding: var(--fs-24); display: flex; flex-direction: column; align-items: flex-start; row-gap: 4px;}
.reservation-section .reservation-list .selected-reservation span {color: var(--color-text8);}
.reservation-section .reservation-list .selected-reservation-body {padding: var(--fs-20) var(--fs-14); border-radius: 0 0 8px 8px; border: 1px solid var(--color-border); border-top: 0; overflow: hidden;} */
.reservation-section .reservation-list .reservation-room-list {margin-bottom: var(--fs-14); max-height: 460px; overflow-y: auto;}
.reservation-section .reservation-list .reservation-room-item + .reservation-room-item {margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--color-border);}
.reservation-section .reservation-list .reservation-room-item a {display: flex; align-items: center; column-gap: 20px; transition: background-color 0.2s; padding: 10px; border-radius: 4px;}
.reservation-section .reservation-list .reservation-room-item a:hover {background-color: rgb(var(--rgb-static2) / 20%);}
.reservation-section .reservation-list .reservation-room-item a:hover .price-info span + span::after {background-color: var(--color-text4);}
.reservation-section .reservation-list .reservation-room-item .room-preview {flex-shrink: 0; width: calc(var(--fs-30) * 2); height: auto; aspect-ratio: 1/1; overflow: hidden; border-radius: 2px;}
.reservation-section .reservation-list .reservation-room-item .room-preview img {width: 100%; height: 100%; object-fit: cover;}
.reservation-section .reservation-list .reservation-room-item .room-info {flex: 1;}
.reservation-section .reservation-list .reservation-room-item .price-info {display: flex; align-items: center;}
.reservation-section .reservation-list .reservation-room-item .price-info span {color: var(--color-text3);}
.reservation-section .reservation-list .reservation-room-item .price-info span + span {margin-left: 8px; padding-left: 8px; position: relative;}
.reservation-section .reservation-list .reservation-room-item .price-info span + span::after {transition: background-color 0.2s; width: 1px ; height: var(--fs-14); background-color: var(--color-border); content: ''; position: absolute; top: 50%; left: 0; transform: translate(-50%,-50%);}
.reservation-section .reservation-list .reservation-room-item .square-btn {flex-shrink: 0;}
.reservation-section .reservation-list .reservation-room-item.no-room {cursor: default; pointer-events: none;}
.reservation-section .reservation-list .reservation-room-item.no-room,
.reservation-section .reservation-list .reservation-room-item.no-room .price-info span {color: var(--color-text4);}
.reservation-section .reservation-list .list-toggle-btn {position: absolute; top: 50%; right: 100%; transform: translateY(-50%); border-top-right-radius: 0; border-bottom-right-radius: 0; padding: var(--fs-24) var(--fs-12); display: none;}

.reservation-section .reservation-calendar {padding: var(--fs-24); border: 1px solid var(--color-border); border-radius: 8px; background-color: var(--color-white);}
.reservation-section .reservation-calendar .calendar-panel {display: none;}
.reservation-section .reservation-calendar .calendar-panel.active {display: block;}
.reservation-section .reservation-calendar .calendar-head {display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--fs-16); border-bottom: 1px solid var(--color-border); margin-bottom: 8px;}
.reservation-section .reservation-calendar .calendar-month-wrap {display: flex; align-items: center; column-gap: var(--fs-20);}
.reservation-section .reservation-calendar .calendar-month-wrap .calendar-month {font-size: var(--fs-32); line-height: 1.5;}
.reservation-section .reservation-calendar .calendar-nav {width: 24px; height: 24px; color: var(--color-text3);}
.reservation-section .reservation-calendar .calendar-nav:disabled {opacity: 0.3;}
.reservation-section .reservation-calendar .calendar-state {display: flex; column-gap: var(--fs-20);}
.reservation-section .reservation-calendar .calendar-state span {display: flex; align-items: center; column-gap: 8px; color: var(--color-text3);}
.reservation-section .reservation-calendar .calendar-state span::before {content: ''; width: 10px; height: 10px; border-radius: 50%;}
.reservation-section .reservation-calendar .calendar-state .available::before {background-color: var(--state-open);}
.reservation-section .reservation-calendar .calendar-state .closed::before {background-color: var(--state-soldout);}

.reservation-section .reservation-calendar .calendar-week,
.reservation-section .reservation-calendar .calendar-day-list {display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px;}
.reservation-section .reservation-calendar .calendar-week {height: var(--fs-50); margin-bottom: var(--fs-12); margin-bottom: 8px;}
.reservation-section .reservation-calendar .calendar-week li {align-self: center; text-align: center; color: var(--color-text3); font-size: var(--fs-14);}
.reservation-section .reservation-calendar .calendar-week .sat {color: #3A7BFF;}
.reservation-section .reservation-calendar .calendar-week .sun {color: #FF5A5A;}
.reservation-section .reservation-calendar .calendar-day {height: 100%; transition: background-color 0.2s,border-color 0.2s,color 0.2s; width: 100%; padding-block: var(--fs-14) var(--fs-20); border: 1px solid transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; row-gap: 10px; border-radius: 8px; color: var(--color-text2);}
.reservation-section .reservation-calendar button.calendar-day:not(.active):hover {background-color: rgb(var(--rgb-static2) / 20%);}
.reservation-section .reservation-calendar .calendar-day.today {border: 1px solid var(--color-static2);}
.reservation-section .reservation-calendar .calendar-day.closed {color: var(--color-text5);}
.reservation-section .reservation-calendar .calendar-day.active {background-color: var(--color-static1); border: var(--color-static1); color: var(--color-white);}
.reservation-section .reservation-calendar .calendar-day.other-month {opacity: 0.4;}

/* 당신의 취향에 맞는 객실을 선택해보세요. */
.room-section .room-wrap {position: relative;}
.room-section .room-swiper-btn {position: absolute; top: 50%; width: 40px; height: 40px;}
.room-section .room-swiper-btn.room-prev {right: calc(100% + 24px);}
.room-section .room-swiper-btn.room-next {left: calc(100% + 24px);}
.room-section .room-card .thumb {width: 100%; height: auto; aspect-ratio: 362/400; border-radius: 8px; overflow: hidden;}
.room-section .room-card .thumb img {width: 100%; height: 100%; object-fit: cover;}
.room-section .room-card .txt-wrap {padding-inline: 8px; margin-top: var(--fs-24);}
.room-section .room-card strong {color: var(--color-static1); margin-bottom: 10px;}
.room-section .room-card .info {margin-bottom: var(--fs-24); display: flex; flex-direction: column; row-gap: 4px;}

/* 머무는 모든 순간이 특별한 공간 */
.space-section .tab-list {justify-content: center; margin-bottom: var(--fs-24);}
.space-section .space-swiper {width: 100%; height: auto; aspect-ratio: 1520/700;}
.space-section .space-swiper .swiper-slide {position: relative; border-radius: 8px; overflow: hidden;}
.space-section .space-swiper .swiper-slide img {width: 100%; height: 100%; object-fit: cover;}
.space-section .space-swiper .swiper-slide .txt-wrap {display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; padding: var(--fs-40); background: #000000; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 1) 87%);}
.space-section .space-swiper .swiper-slide .txt-wrap strong,
.space-section .space-swiper .swiper-slide .txt-wrap p {color: var(--color-white);}

/* 편안한 여행을 위한 안내 */
.info-section .info-card-list {display: flex; flex-wrap: wrap; column-gap: var(--fs-24); row-gap: calc((var(--fs-20) * 2));}
.info-section .info-card-list .info-card {width: calc(50% - var(--fs-24) / 2);}
.info-section .info-card-list .info-card a {transition: border-color 0.2s; width: 100%; display: flex; padding: var(--fs-24) calc((var(--fs-20) * 4)); border-radius: 8px; border: 1px solid var(--color-border); column-gap: calc((var(--fs-20) * 2)); align-items: center;}
.info-section .info-card-list .info-card em {transition: color 0.2s; font-size: calc(var(--fs-64) * 2); line-height: 1.5; color: rgb(var(--rgb-black) / 10%);}
.info-section .info-card-list .info-card strong {transition: color 0.2s; color: var(--color-text2);}
.info-section .info-card-list .info-card p {margin-top: 8px; color: var(--color-text3);}
.info-section .info-card-list .info-card a:hover {border-color: var(--color-static2);}
.info-section .info-card-list .info-card a:hover em {color: var(--color-static2);}
.info-section .info-card-list .info-card a:hover strong {color: var(--color-static2);}


@media screen and (min-width: 501px) {
    br.mo {display: none;}
}
@media screen and (min-width: 376px) {
    br.mini-mo {display: none;}
}

@media screen and (max-width: 1280px) {
    html:has(.reservation-wrap.open), body:has(.reservation-wrap.open) {overflow: hidden;}
    .reservation-section .reservation-list .full-box-body {min-height: 0; overflow: hidden;}
    .reservation-section .reservation-list .reservation-room-list {overflow-y: auto; overscroll-behavior-y: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch;}
    .reservation-section .reservation-wrap {position: relative; overflow: visible;}
    .reservation-section .reservation-list {border-radius: 8px; transition: left 0.2s, transform 0.2s; width: 385px; height: fit-content; position: absolute; left: calc(100% + 40px); top: 50%; transform: translate(0,-50%);}
    .reservation-section .reservation-list .list-toggle-btn {display: block; width: 40px;}
    .reservation-section .reservation-list .list-toggle-btn .open-txt {display: block;}
    .reservation-section .reservation-list .list-toggle-btn .close-txt {display: none;}
    .reservation-section .reservation-wrap.open .reservation-list {z-index: 1001; /*left: 100%;*/ transform: translate(-100%,-50%);}
    .reservation-section .reservation-wrap.open .reservation-list .list-toggle-btn .open-txt {display: none;}
    .reservation-section .reservation-wrap.open .reservation-list .list-toggle-btn .close-txt {display: block;}
    .reservation-section .reservation-wrap.open::after {z-index: 1000; width: 100vw; height: 100vh; background-color: rgb(var(--rgb-black) / 50%); content: ''; position: fixed; top: 0; left: 0;}
    .reservation-section .reservation-wrap.open .reservation-calendar {z-index: 1;}
    .reservation-section .reservation-list .reservation-room-list {height: 360px;}
}

@media screen and (max-width: 1024px) {
    .info-section .info-card-list .info-card a {padding-inline: var(--fs-30);}
    .reservation-section .reservation-list {left: calc(100% + 32px);}
}

@media screen and (max-width: 768px) {
    .reservation-section .reservation-calendar {padding: var(--fs-16);}
    .reservation-section .reservation-list {touch-action: pan-y; position: fixed; left: 0; top: 100%; transform: unset; width: 100%;}
    .reservation-section .reservation-list .list-toggle-btn {display: none;}
    .reservation-section .reservation-list .reservation-room-list {height: 30vh;}
    .reservation-section .reservation-wrap.open .reservation-list {left: 0; transform: translateY(-100%); border-radius: 8px 8px 0 0;}
    .reservation-section .reservation-calendar .calendar-day {padding-block: 0; aspect-ratio: 1/1; row-gap: 4px;}
    .reservation-section .reservation-calendar .calendar-week, .reservation-section .reservation-calendar .calendar-day-list {gap: 4px;}
    
    .info-section .info-card-list {row-gap: var(--fs-30);}
    .info-section .info-card-list .info-card {width: 100%;}

    .space-section .inner,
    .loc-section .inner {width: 100%;}
    .space-section .section-tit-wrap,
    .space-section .space-wrap .tab-list,
    .loc-section .section-tit-wrap,
    .loc-section .loc-wrap .loc-info {width: calc(100% - 48px); margin-inline: auto;}
    
    .space-section .space-swiper {aspect-ratio: 16/8;}
    .space-section .space-swiper .swiper-slide {border-radius: 0;}
}

@media screen and (max-width: 600px) {
    .reservation-section .reservation-calendar {padding: var(--fs-14);}
    .reservation-section .reservation-calendar .calendar-week, .reservation-section .reservation-calendar .calendar-day-list {gap: 2px;}
    .reservation-section .reservation-calendar .calendar-day .label {font-size: 0; padding: 0; width: calc(var(--fs-12) / 2); height: calc(var(--fs-12) / 2);}
    .reservation-section .reservation-calendar .calendar-day .label.available {background-color: var(--state-open);}
    .reservation-section .reservation-calendar .calendar-day .label.closed {background-color: var(--state-soldout);}

    .space-section .tab-list {display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--fs-20); row-gap: var(--fs-12);}
    .space-section .tab-list .tab {width: fit-content; margin-inline: auto;}
}

@media screen and (max-width: 500px) {
    .reservation-section .reservation-calendar {position: relative;}
    .reservation-section .reservation-calendar::after {content: ''; width: 100%; height: 20px; display: block;}
    .reservation-section .reservation-calendar .calendar-head {justify-content: center;}
    .reservation-section .reservation-calendar .calendar-state {position: absolute; left: var(--fs-14); bottom: var(--fs-14);}
    .reservation-section .reservation-calendar .calendar-panel {margin-bottom: 20px;}

    .info-section .info-card-list .info-card a {padding: var(--fs-12) var(--fs-32);}

    .space-section .section-tit-wrap,
    .space-section .space-wrap .tab-list,
    .loc-section .section-tit-wrap,
    .loc-section .loc-wrap .loc-info {width: calc(100% - 32px);}

    .space-section .space-swiper {aspect-ratio: 4/3;}
}

@media screen and (max-width: 375px) {
    .space-section .section-tit-wrap,
    .space-section .space-wrap .tab-list,
    .loc-section .section-tit-wrap,
    .loc-section .loc-wrap .loc-info {width: calc(100% - 24px);}

    .reservation-section .reservation-calendar {padding: 6px;}
    .reservation-section .reservation-calendar .calendar-state {left: 6px; bottom: 6px;}

    .reservation-section .reservation-list .reservation-room-item a {flex-direction: column; row-gap: 6px; align-items: flex-start;}

    .info-section .info-card-list .info-card a {flex-direction: column; align-items: flex-start;}
}

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