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

/* 히어로 */
.hero-section {max-height: 880px;}
.hero-section .inner {display: flex; flex-direction: row !important; align-items: center; justify-content: space-between;}
.hero-section .reservation-view {width: 50%; flex-shrink: 0;}
.hero-section .reservation-wrap {position: relative;}
.hero-section .reservation-calendar,
.hero-section .reservation-list {transition: opacity .3s ease, transform .3s ease;}
.hero-section .reservation-calendar {position: relative; opacity: 1; visibility: visible; transform: translateX(0);}
.hero-section .reservation-list {position: absolute; left: 0; top: 0; width: 100%; opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(30px);}
.hero-section .reservation-view.show-list .reservation-calendar {position: absolute; opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-30px);}
.hero-section .reservation-view.show-list .reservation-list {position: relative; opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0);}
.hero-section .reservation-view.show-list .reservation-list .txt-wrap {display: flex; flex-direction: column; align-items: flex-start;}
.hero-section .reservation-view.show-list .selected-reservation {padding: var(--fs-24) var(--fs-20); padding-bottom: 0; background-color: transparent; display: flex; flex-direction: row; align-items: center; column-gap: var(--fs-24);}

.hero-section .reservation-wrap .reservation-list {background-color: rgb(var(--rgb-white) / 20%); border: 1px solid rgb(var(--rgb-text5) / 20%); border-radius: 8px; overflow: hidden; backdrop-filter: blur(10px);}
.hero-section .reservation-wrap .reservation-list .selected-reservation-body {border: 0; padding: var(--fs-16) var(--fs-20) var(--fs-20);}
.hero-section .reservation-wrap .reservation-list .reservation-room-list {height: 474px; scrollbar-color: var(--color-static2) transparent;}
.hero-section .reservation-wrap .reservation-list .reservation-room-item + .reservation-room-item {margin-top: 4px; padding-top: 4px; border-color: rgb(var(--rgb-text5) / 20%);}
.hero-section .reservation-wrap .reservation-list .reservation-room-item a {padding-inline: 0;}
.hero-section .reservation-wrap .reservation-list .reservation-room-item .room-preview {width: var(--fs-56);}
.hero-section .reservation-wrap .reservation-list .reservation-room-item .room-info {display: flex; align-items: center; column-gap: var(--fs-40);}
.hero-section .reservation-wrap .reservation-list .reservation-room-item .room-info strong {width: var(--space-160); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.hero-section .reservation-wrap .reservation-list .reservation-room-item .price-info span {color: var(--color-text5);}
.hero-section .reservation-wrap .reservation-list .reservation-room-item.no-room,
.hero-section .reservation-wrap .reservation-list .reservation-room-item.no-room .price-info span {color: var(--color-text4);}

.hero-section .reservation-wrap .reservation-calendar {background-color: rgb(var(--rgb-white) / 20%); border-color: rgb(var(--rgb-text5) / 20%); backdrop-filter: blur(10px);}
.hero-section .reservation-wrap .reservation-calendar .calendar-head {flex-direction: column; justify-content: initial; align-items: initial; row-gap: 2px; margin-bottom: var(--fs-16); border-color: rgb(var(--rgb-text5) / 20%);}
.hero-section .reservation-wrap .reservation-calendar .calendar-head p {color: rgb(var(--rgb-white) / 70%);}
.hero-section .reservation-wrap .reservation-calendar .calendar-month-wrap {justify-content: center; column-gap: var(--fs-24);}
.hero-section .reservation-wrap .reservation-calendar .calendar-month-wrap .calendar-month {font-size: var(--fs-28);}
.hero-section .reservation-wrap .reservation-calendar .calendar-nav {width: var(--fs-32); height: var(--fs-32);}
.hero-section .reservation-wrap .reservation-calendar .calendar-state {padding-top: var(--fs-16); margin-top: var(--fs-16); border-top: 1px solid rgb(var(--rgb-text5) / 20%); justify-content: flex-end;}
.hero-section .reservation-wrap .reservation-calendar .calendar-state span {color: var(--color-text5);}
.hero-section .reservation-wrap .reservation-calendar .calendar-week li {color: var(--color-text4);}
.hero-section .reservation-wrap .reservation-calendar .calendar-week .sat {color: #3A7BFF;}
.hero-section .reservation-wrap .reservation-calendar .calendar-week .sun {color: #FF5A5A;}
.hero-section .reservation-wrap .reservation-calendar .calendar-day {padding-block: calc(var(--fs-16) / 2); row-gap: 4px; color: var(--color-text5);}
.hero-section .reservation-wrap .reservation-calendar .calendar-day.closed {color: var(--color-text4);}

/* 예약 공통 */
.reservation-wrap {width: 100%; display: flex; align-items: flex-start; column-gap: var(--fs-30);}
.reservation-wrap .reservation-calendar {flex: 1;}
.reservation-wrap .reservation-list .reservation-room-list {margin-bottom: var(--fs-14); overflow-y: auto;}
.reservation-wrap .reservation-list .reservation-room-item + .reservation-room-item {margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--color-border1);}
.reservation-wrap .reservation-list .reservation-room-item a {display: flex; align-items: center; column-gap: 20px; padding: 10px; border-radius: 4px; transition: background-color .2s;}
.reservation-wrap .reservation-list .reservation-room-item a:hover {background-color: rgb(var(--rgb-static2) / 20%);}
.reservation-wrap .reservation-list .reservation-room-item a:hover .price-info span + span::after {background-color: var(--color-text4);}
.reservation-wrap .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-wrap .reservation-list .reservation-room-item .room-preview img {width: 100%; height: 100%; object-fit: cover;}
.reservation-wrap .reservation-list .reservation-room-item .room-info {flex: 1;}
.reservation-wrap .reservation-list .reservation-room-item .price-info {display: flex; align-items: center;}
.reservation-wrap .reservation-list .reservation-room-item .price-info span {color: var(--color-text3);}
.reservation-wrap .reservation-list .reservation-room-item .price-info span + span {position: relative; margin-left: 8px; padding-left: 8px;}
.reservation-wrap .reservation-list .reservation-room-item .price-info span + span::after {content: ''; position: absolute; top: 50%; left: 0; width: 1px; height: var(--fs-14); background-color: var(--color-border1); transform: translate(-50%, -50%); transition: background-color .2s;}
.reservation-wrap .reservation-list .reservation-room-item .square-btn {flex-shrink: 0;}
.reservation-wrap .reservation-list .reservation-room-item.no-room {cursor: default; pointer-events: none;}
.reservation-wrap .reservation-list .reservation-room-item.no-room,
.reservation-wrap .reservation-list .reservation-room-item.no-room .price-info span {color: var(--color-text4);}
.reservation-wrap .reservation-list .list-toggle-btn {display: none; position: absolute; top: 50%; right: 100%; padding: var(--fs-24) var(--fs-12); border-top-right-radius: 0; border-bottom-right-radius: 0; transform: translateY(-50%);}
.reservation-wrap .reservation-calendar {padding: var(--fs-24); background-color: var(--color-white); border: 1px solid var(--color-border1); border-radius: 8px;}
.reservation-wrap .reservation-calendar .calendar-panel {display: none;}
.reservation-wrap .reservation-calendar .calendar-panel.active {display: block;}
.reservation-wrap .reservation-calendar .calendar-head {display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--fs-16); margin-bottom: 8px; border-bottom: 1px solid var(--color-border1);}
.reservation-wrap .reservation-calendar .calendar-month-wrap {display: flex; align-items: center; column-gap: var(--fs-20);}
.reservation-wrap .reservation-calendar .calendar-month-wrap .calendar-month {font-size: var(--fs-32); line-height: 1.5;}
.reservation-wrap .reservation-calendar .calendar-nav {width: 24px; height: 24px; color: var(--color-text3);}
.reservation-wrap .reservation-calendar .calendar-nav:disabled {opacity: .3;}
.reservation-wrap .reservation-calendar .calendar-state {display: flex; column-gap: var(--fs-20);}
.reservation-wrap .reservation-calendar .calendar-state span {display: flex; align-items: center; column-gap: 8px; color: var(--color-text3);}
.reservation-wrap .reservation-calendar .calendar-state span::before {content: ''; width: 10px; height: 10px; border-radius: 50%;}
.reservation-wrap .reservation-calendar .calendar-state .available::before {background-color: var(--state-open);}
.reservation-wrap .reservation-calendar .calendar-state .closed::before {background-color: var(--state-soldout);}
.reservation-wrap .reservation-calendar .calendar-week,
.reservation-wrap .reservation-calendar .calendar-day-list {display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px;}
.hero-section .reservation-wrap .reservation-calendar .calendar-day-list {min-height: 364px;}
.hero-section .reservation-wrap .reservation-list .selected-reservation-body {height: calc(100% - var(--fs-72)); display: flex; flex-direction: column;}

.reservation-wrap .reservation-calendar .calendar-week {height: var(--fs-50); margin-bottom: 8px;}
.reservation-wrap .reservation-calendar .calendar-week li {align-self: center; color: var(--color-text3); font-size: var(--fs-14); text-align: center;}
.reservation-wrap .reservation-calendar .calendar-week .sat {color: #3A7BFF;}
.reservation-wrap .reservation-calendar .calendar-week .sun {color: #FF5A5A;}
.reservation-wrap .reservation-calendar .calendar-day {display: flex; flex-direction: column; align-items: center; justify-content: center; row-gap: 10px; width: 100%; height: 100%; padding-block: var(--fs-14) var(--fs-20); color: var(--color-text2); border: 1px solid transparent; border-radius: 8px; transition: background-color .2s, border-color .2s, color .2s;}
.reservation-wrap .reservation-calendar button.calendar-day:not(.active):hover {background-color: rgb(var(--rgb-static2) / 20%);}
.reservation-wrap .reservation-calendar .calendar-day.today {border-color: var(--color-static2);}
.reservation-wrap .reservation-calendar .calendar-day.closed {color: var(--color-text4);}
.reservation-wrap .reservation-calendar .calendar-day.active {color: var(--color-white); background-color: var(--color-static1); border-color: var(--color-static1);}
.reservation-wrap .reservation-calendar .calendar-day.other-month {opacity: .4;}
.reservation-wrap .reservation-calendar .calendar-day .label {font-size: 0; padding: 0; width: calc(var(--fs-16) / 2); height: calc(var(--fs-16) / 2);}
.reservation-wrap .reservation-calendar .calendar-day .label.available {background-color: var(--state-open);}
.reservation-wrap .reservation-calendar .calendar-day .label.closed {background-color: var(--state-soldout);}

/* 당신의 취향에 맞는 객실을 선택해보세요. */
.room-section .inner.mt80 {position: relative;}
.room-section .inner.mt80 .txt-btn {position: absolute; right: 0; bottom: calc(100% + var(--fs-36));}
.room-section .room-wrap {position: relative;}
.room-section .room-swiper {overflow: visible;}
/* H14-89: 카드 링크(a)에 폭이 없어 내용이 '이미지 크기'를 따라갔다 — 사진 없는 객실
   (no-image.svg, 고유 크기 없음)은 카드가 300px 로 쪼그라들고, 그 빈 자리 때문에
   간격이 들쭉날쭉해 보였다(실측 재현). 시안은 전 객실에 사진이 있어 잠복해 있던 결함. */
.room-section .room-card > a {display: block; width: 100%;}
.room-section .room-card .thumb {border-radius: 8px 8px 0 0; overflow: hidden; width: 100%; height: auto; aspect-ratio: 480/320;}
.room-section .room-card .thumb img {width: 100%; height: 100%; object-fit: cover;}
.room-section .room-card .txt-wrap {border-radius: 0 0 8px 8px; overflow: hidden; padding: var(--fs-30); border: 1px solid var(--color-border2); border-top: 0;}
.room-section .room-card .txt-wrap > strong {margin-bottom: 6px;}
.room-section .room-card .txt-wrap > p {color: var(--color-text2); margin-bottom: var(--fs-12);}
.room-section .room-card .txt-wrap .info {margin-bottom: var(--fs-30); display: flex; align-items: center;}
.room-section .room-card .txt-wrap .info span {color: var(--color-text2); display: flex; align-items: center; column-gap: 6px;}
.room-section .room-card .txt-wrap .info span + span {margin-left: var(--fs-14); padding-left: var(--fs-14); position: relative;}
.room-section .room-card .txt-wrap .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-section .room-card .txt-wrap .price {}
.room-section .room-card .txt-wrap .price strong {color: var(--color-static1);}
.room-section .room-card .txt-wrap .price span {color: var(--color-text3);}
.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);}

/* 머무는 모든 순간이 특별한 공간 */
.space-section .inner {flex-direction: row !important; justify-content: space-between; column-gap: var(--space-80);}
.space-section .inner .left {flex-shrink: 0;}
.space-section .tab-list {flex-direction: column; align-items: flex-start;}
.space-section .tab-list .tab {display: flex; align-items: center; column-gap: var(--fs-20); border-bottom: 0; padding-bottom: 0; border-left: 3px solid var(--color-border1); padding: var(--fs-16) var(--fs-40);}
.space-section .tab-list .tab.active {border-color: var(--color-static1);}
.space-section .tab-list .tab:not(.active) {opacity: 0.3;}
.space-section .space-wrap {width: calc(100% - 400px - var(--space-80)) !important; max-width: 1006px;}
.space-section .space-swiper {width: 100%; height: auto; aspect-ratio: 1006/500;}
.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; row-gap: 6px; align-items: flex-start; justify-content: flex-end; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; padding: var(--fs-32); 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(--space-60) var(--space-80); border-radius: 8px; border: 1px solid var(--color-border1); column-gap: calc((var(--fs-20) * 2)); align-items: center;}
html[data-theme="blue"] .info-section .info-card-list .info-card a img {filter: brightness(0) saturate(100%) invert(67%) sepia(15%) saturate(659%) hue-rotate(154deg) brightness(90%) contrast(86%);}
html[data-theme="wood"] .info-section .info-card-list .info-card a img {filter: brightness(0) saturate(100%) invert(70%) sepia(15%) saturate(651%) hue-rotate(328deg) brightness(91%) contrast(85%);}
/* .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-static1);}

/* 찾아오시는 길 */
.loc-section .inner {overflow: hidden;}
.loc-section .loc-wrap {position: relative;}
.loc-section .loc-wrap > .txt-btn {position: absolute; right: 0; bottom: calc(100% + var(--fs-36));}

@media screen and (min-width: 769px) {
    .hero-section .hero-tit-wrap .btn-wrap {display: none;}
}

@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: 1440px) {
    .hero-section .reservation-view {width: 60%;}

    .space-section .tab-list {flex-direction: row;}
    .space-section .inner {flex-direction: column !important; align-items: flex-start !important;}
    .space-section .left {width: 100%;}
    .space-section .space-wrap {width: 100% !important; max-width: unset;}
    .space-section .tab-list {width: 100%; justify-content: center; column-gap: 0;}
    .space-section .tab-list .tab {border-left: 0; border-bottom: 3px solid var(--color-border2); padding-inline: var(--fs-20);}
}

@media screen and (max-width: 1280px) {
    .hero-section .reservation-wrap .reservation-calendar .calendar-day-list {min-height: 355px;}
    .hero-section .reservation-wrap .reservation-list .reservation-room-list {height: 439px;}

    .room-section .room-card .txt-wrap .info span img {display: none;}

}

@media screen and (max-width: 1024px) {
    .hero-section {padding-block: var(--header-height); height: fit-content; max-height: unset;}
    .hero-section .inner {align-items: flex-start; flex-direction: column !important; row-gap: var(--fs-40) !important;}
    .hero-section .reservation-view {width: 100%;}

    .room-section .room-card .txt-wrap {padding: var(--fs-20);}

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

@media screen and (max-width: 768px) {
    .hero-section .hero-tit-wrap p {display: none;}
    .hero-section .reservation-view.show-list .selected-reservation::before {display: none;}
    .hero-section .reservation-wrap .reservation-list .reservation-room-item .room-info {flex-direction: column; row-gap: 6px; align-items: flex-start;}
    .hero-section .reservation-wrap .reservation-list .reservation-room-item .room-info strong {width: unset;}

    .room-section .room-card .txt-wrap .info {display: flex; flex-direction: column; align-items: flex-start; row-gap: 4px;}
    .room-section .room-card .txt-wrap .info span + span {padding-left: 0; margin-left: 0;}
    .room-section .room-card .txt-wrap .info span + span::after {display: none;}
    .room-section .room-card .txt-wrap .info span img {display: inline-block;}

    .space-section .tab-list .tab img {display: none;}

    .info-section .info-card-list .info-card {width: 100%;}
}

@media screen and (max-width: 600px) {
    .hero-section .reservation-view.show-list .selected-reservation,
    .hero-section .reservation-wrap .reservation-list .selected-reservation-body {padding: var(--fs-14);}
    .hero-section .reservation-view.show-list .selected-reservation {padding-bottom: 0;}
    .hero-section .reservation-view.show-list .selected-reservation {column-gap: var(--fs-12);}
    .reservation-wrap .reservation-calendar {padding: var(--fs-14);}
    .reservation-wrap .reservation-calendar .calendar-week, .reservation-wrap .reservation-calendar .calendar-day-list {gap: 2px;}
}

@media screen and (max-width: 500px) {
    .room-section .inner.mt80 .txt-btn,
    .loc-section .loc-wrap > .txt-btn {right: unset; left: 50%; transform: translateX(-50%); bottom: calc(100% + var(--fs-20));}
    .hero-section .reservation-wrap .reservation-calendar, 
    .hero-section .reservation-view.show-list .reservation-list {height: fit-content; width: 100%;}
    .hero-section .reservation-wrap .reservation-calendar .calendar-day-list {min-height: 75vw;}
    .hero-section .reservation-wrap .reservation-list .reservation-room-list {height: 89.5vw;}
    .reservation-wrap .reservation-calendar .calendar-day .label {width: 5px; height: 5px;}

    .space-section .space-swiper {aspect-ratio: 1/1;}
    .space-section .tab-list .tab {padding-inline: 0; flex: 1; justify-content: center;}

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

    .reservation-wrap .reservation-list .reservation-room-item .price-info {flex-direction: column; align-items: flex-start;}
    .reservation-wrap .reservation-list .reservation-room-item .price-info span + span {padding-left: 0; margin-left: 0;}
    .reservation-wrap .reservation-list .reservation-room-item .price-info span + span::after {display: none;}
}

@media screen and (max-width: 375px) {
    .hero-section .hero-tit-wrap h2 {font-size: 28px;}

    .reservation-wrap .reservation-calendar {padding: 6px;}

    .space-section .tab-list {flex-wrap: wrap;}
    .space-section .tab-list .tab {flex: unset; width: 50%;}
    .space-section .space-swiper .swiper-slide .txt-wrap {background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); padding: var(--fs-24);}

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

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