@charset "utf-8";

/* ==========================================================================
    BASIC SETTING
    ========================================================================== */
:root {
    --main-gap: 40px;
    --main-width: 1280px;
    --main-width01: 1460px;
    --basic-color: #222;
    --bg-color: #fffbf3;
    --point-color01: #f8b500;
    --point-color0101: #ffba00;
    --point-color02: #ff1f1f;
    --header-color: #fff;
    --border-color: #eee;
    --border-color01: #e7e7e7;
    --border-color02: #ddd;
    --mines-color : #ff6000;
    --header-transition: .4s ease-out;
    --tr-header-height: 81px;
    --header-height: 73px;
    --subnav-height: 56px;
    --selection-bar-height: 60px;
    --fixed-bottom-height: 62px;

    --form-dot: #00a650;
    --form-border: #e1dbcf;
    --form-gray: #f6f7f9;
    --form-focus: #222;
    --form-basic: #333;
    --form-chk: #222;
    --form-fontsize : 16px;
    --form-lineheight : 24px;
    --form-fontcolor : #222;;
    --form-placeholder : #999;
    --form-padding : 19px;
    --form-padding1 : 13px 19px;
    --input-height: 54px;
    --input-gap: 14px;
    --input-buttonw : 120px;
    --textarea-height: 120px;
    --radius01 : 10px;
}
@media (width <= 1280px) {
    :root {
        --main-gap: 40px;
    }
}
@media (width <= 1024px) {
    :root {
        --input-height: 48px;
        --form-fontsize : 15px;
        --form-padding : 16px;
        --form-padding1 : 12px 16px;
    }
}
@media (width <= 860px) {
    :root {
        --tr-header-height: 70px;
        --header-height: 62px;
        --selection-bar-height: 54px;
        --input-buttonw : 72px;
    }
}
@media (width <= 767px) {
    :root {
        --main-gap: 24px;
    }
}
@media (width <= 640px) {
    :root {
        --tr-header-height: 62px;
        --header-height: 56px;
        --selection-bar-height: 50px;
        --input-buttonw : 72px;
        --header-transition: .3s ease-out;
    }
}
@media (width <= 460px) {
    :root {
        --main-gap: 20px;
    }
}

::selection{background-color: var(--point-color01); color: #fff;}
/* body:not(#main){padding-right: 0 !important; overflow-y: auto !important;}*/
.no-scroll {overflow: hidden; touch-action: none;}
.no-scroll-m {
    height: 100vh;
    overflow: hidden;
    touch-action: none;
    @media (width > 640px) {
        height: auto;
        overflow: auto;
        touch-action: initial;
    }
}

html, body{overscroll-behavior: none;}
html {
    font-size: 16px;
    letter-spacing: -0.25px;
}
body {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    color: var(--basic-color);

}
#content {
    min-height: 400px;
    padding-bottom: 120px;
    background-color: var(--bg-color);
    @media (width <= 1023px) {
        padding-bottom: 100px
    }
    @media (width <= 767px) {
        padding-bottom: 80px;
    }
}
.main-grid{
    position: relative;
    width: var(--main-width);
    margin: 0 auto;
    @media (width <= 1360px) {
        width: auto;
        padding-left: var(--main-gap);
        padding-right: var(--main-gap);
    }
}
.main-grid01{
    position: relative;
    width: var(--main-width01);
    margin: 0 auto;
    @media (width <= 1560px) {
        width: auto;
        padding-left: var(--main-gap);
        padding-right: var(--main-gap);
    }
}
.grid01 {
    position: relative;
    padding-left: var(--main-gap);
    padding-right: var(--main-gap);
}
.half-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.sub-grid {
    position: relative;
    width: 1100px;
    margin: 0 auto;
}
.default-logo{
    width: 193px;
    @media (width <= 767px) {
        width: 168px;
    }
}
.bg-gray{background-color: #f9f9f9}
.sns-set {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 28px;
    & .btn-sns{padding: 5px; transition: .2s ease-in-out}
    & .btn-sns:last-child{padding-right: 0;}
    & .ytube{width: 22px;}
    & .blog{width: 21px;}
    & .facebook{width: 11px;}
    & .instagram{width: 20px;}
    & .brunch{width: 18px;}
    & .threads{width: 18px;}
    & .sns-x{width: 19px;}
}
.c-minus{color: var(--mines-color);}
.btn-more01 > a{display: inline-block; width: 138px; font-size: 16px; font-weight: bold; letter-spacing: 0; padding-bottom: 12px; border-bottom: 1px solid #fff; background: url('/assets/site/img/common/arr0101.png') no-repeat right 4px / 15px auto; transition: .3s ease-in-out}
.btn-more02 > a{display: inline-block; font-size: 16px; font-weight: bold; padding-right: 16px; background: url('/assets/site/img/common/arr0502.png') no-repeat right center / 6px auto; transition: .3s ease-in-out}
.btn-more03 > a{display: inline-block; font-size: 17px; font-weight: bold; padding-right: 22px; background: url('/assets/site/img/common/arr0601.png') no-repeat right center / 14px auto; transition: .3s ease-in-out}
.btn-more04 > a{display: inline-block; width: 138px; font-size: 16px; font-weight: bold; letter-spacing: 0; padding: 11px 0; border-bottom: 1px solid #222; background: url('/assets/site/img/common/arr0101.png') no-repeat right 4px / 15px auto; transition: .3s ease-in-out}
.btn-more04 .ico01{background: url('/assets/site/img/common/arr0504.png') no-repeat right center / 6px auto;}
.btn-more04 .ico02{background: url('/assets/site/img/common/ico_dw0103.png') no-repeat right center / 18px auto;}

/* ==========================================================================
    FORM, BOARD
   ========================================================================== */
/*input[type="text"], input[type="password"],*/
/*select{width: 100%; height: var(--input-height);}*/
textarea{overflow-y: auto}
.modal-backdrop{z-index: 49;}

/* ==========================================================================
    COMPONENT
   ========================================================================== */
/*모달 및 패널 하단*/
.panel-bottom {
    display: flex;
    align-items: center;
    padding: 20px 0;
    border-top: 1px solid #f4f2ee;
    & .btn-refresh{display: block; width: 50px; height: 50px; font-size: 0; background: #f3f3f3 url('/assets/site/img/common/ico_flip01.png') no-repeat center / 18px auto; border-radius: 50%;}
    & .btn-nodate{font-size: 14px; color: #666; text-decoration: underline; text-underline-offset: 3px; padding: 5px 0; margin-left: 25px;}
    & .btn-next{margin-left: auto;}
}
/*카운팅*/
.counting {
    display: flex;
    & .c-num{width: 52px; height: 33px; font-family: "jaf-domus-titling-web", sans-serif; font-size: 20px; font-weight: bold; line-height: 20px; letter-spacing: 0;}
    & .c-num .input-num{width: 100%; height: 100%; text-align: center; padding: 0; background-color: transparent;}
    & .c-num .input-num::-webkit-inner-spin-button,
    & .c-num .input-num::-webkit-outer-spin-button {appearance: none;}
    & .btn-counter{width: 33px; height: 33px; border: 1px solid #e1ddd6; border-radius: 50%; touch-action: manipulation;}
    & .btn-counter[disabled]{filter: grayscale(100%) brightness(0.9) opacity(0.4); pointer-events: none;}
    & .btn-minus{background: #fff url('/assets/site/img/common/count_minus01.png') no-repeat center / 12px auto;}
    & .btn-plus{background: #fff url('/assets/site/img/common/count_plus01.png') no-repeat center / 12px auto;}
}
/*공유 리스트*/
.share-list {
    display: flex;
    justify-content: center;
    gap: 20px;
    & .circle{display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; border-radius: 50%;}
    & .title{font-size: 13px; color: #666; margin-top: 7px;}
    & .btn-url .circle{background-color: #222;}
    & .btn-url .circle img{width: 23px;}
    & .btn-kakao .circle{background-color: #fddc3f;}
    & .btn-kakao .circle img{width: 50px;}
    & .btn-sms .circle{background-color: #00c73c;}
    & .btn-sms .circle img{width: 24px;}
}
/* ==========================================================================
    숙소 검색
   ========================================================================== */
/*인원 선택*/
.headcount{
    & .row-count{display: flex; justify-content: space-between; align-items: center; height: 76px; border-bottom: 1px solid #efede7;}
    & .c-item{font-size: 17px; font-weight: bold;}
    & .refer{font-size: 13px; color: #999; margin-top: 3px;}
    & .add-info{max-height: 190px; overflow-y: auto;}
    & .add-row{display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f7f6f3; padding-left: 20px; background: url('/assets/site/img/common/ico_n01.png') no-repeat 0 center / 10px auto;}
    /*& .tit-weight{font-size: 15px; font-weight: bold; color: #000; line-height: 26px; padding-left: 25px; background: url('/assets/site/img/common/ico_sole01.png') no-repeat 0 calc(50% - 2px) / 17px auto;}*/
    & .tit-weight{font-size: 15px; font-weight: bold; color: #000; line-height: 26px;}
    & .sel-weight{
        height: 58px;
        font-size: 15px;
        font-weight: bold;
        color: var(--basic-color);
        & .ico-arr::after{content: ""; position: absolute; top: 50%; right: 10px; translate: 0 -50%; display: block; width: 10px; height: 10px; background: url('/assets/site/img/common/arr05.png') no-repeat right center / 10px auto;}
        & .choice-vl{position: relative; display: block; padding-right: 40px; height: 100%; text-align: right;}
        & .dr-option{width: 194px; font-size: 15px; padding: 0 16px 10px; border: 1px solid #f0ede7; border-radius: 16px;}
        & .tit-option{position: relative; display: flex; align-items: center; height: 58px; border-bottom: 1px solid var(--basic-color);}
        & .tit-option.ico-arr::after{rotate: 180deg;}
        & .dr-option > ul > li:not(:last-child){border-bottom: 1px solid #efede7;}
        & .dr-option .btn-item{display: flex; align-items: center; width: 100%; height: 47px;}
        & .dr-option .btn-item.disabled{color: #bbb;}
    }
    @media (width <= 1024px) {
        & .c-item{font-size: 16px;}
    }
    @media (width <= 860px) {
        & .row-count{height: 68px;}
        & .sel-weight{height: 54px;}
    }

    @media (width <= 640px) {
        & .mid-cont{padding: 2px 0 10px;}
        & .row-count{height: 60px;}
        & .c-item{font-size: 16px;}
        & .counting .btn-counter{width: 28px; height: 28px; background-size: 9px auto;}
        & .counting .c-num{width: 42px; height: 28px; font-size: 18px;}
        & .add-info{max-height: 170px;}
        & .tit-weight,
        & .sel-weight{font-size: 14px;}
        & .sel-weight .dr-option{width: 190px; font-size: 14px;}
        & .sel-weight .dr-option .btn-item{height: 40px;}
    }

}
/*Date Picker*/
.sukah-picker{
    & .flatpickr-calendar{width: 100% !important; box-shadow: none;}
    & .flatpickr-calendar:before{display: none;}
    & .flatpickr-days{width: 100% !important;}
    & .flatpickr-rContainer{width: 100% !important;}
    & .flatpickr-months .flatpickr-month,
    & .flatpickr-weekdays .flatpickr-weekdaycontainer,
    & .dayContainer{max-width: 300px;}
    & .flatpickr-months,
    & .flatpickr-weekdays,
    & .flatpickr-days{justify-content: center; gap: 55px;}
    & .dayContainer{flex: 1; width: auto; min-width: 0; display: grid; grid-template-columns: repeat(7, 1fr); text-align: center;}
    & .dayContainer + .dayContainer{box-shadow: none}
    & .flatpickr-months{margin-bottom: 17px;}
    & .flatpickr-day{display: flex; justify-content: center; width: 100%; max-width: 38px; height: 38px;}
    & .flatpickr-day{font-family: "jaf-domus-titling-web", sans-serif; font-size: 15px; font-weight: bold; color: var(--basic-color);}
    & .flatpickr-day.flatpickr-disabled,
    & .flatpickr-day.flatpickr-disabled:hover{color: #d2d2d2;}
    & .flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover, .flatpickr-day.prevMonthDay,
    & .flatpickr-day.nextMonthDay,
    & .flatpickr-day.notAllowed,
    & .flatpickr-day.notAllowed.prevMonthDay,
    & .flatpickr-day.notAllowed.nextMonthDay{color: #d2d2d2;}
    & .flatpickr-day.prevMonthDay.inRange,
    & .flatpickr-day.nextMonthDay.inRange{color: #fff;}
    & .flatpickr-day:hover,
    & .flatpickr-day:focus{color: var(--point-color01); border: 0; background-color: var(--basic-color);}
    & .rangeMode .flatpickr-day{margin-top: 5px;}
    & .flatpickr-calendar.inline{top: auto;}
    & .flatpickr-rContainer{display: block;}
    /*년-월*/
    & .flatpickr-current-month{font-size: 16px; font-weight: bold;}
    & .flatpickr-current-month input.cur-year{font-weight: bold;}

    /*& .flatpickr-current-month{display: flex; flex-direction: row-reverse; justify-content: center; align-items: center; font-size: 16px;}*/
    /*.flatpickr-current-month span.cur-month{background: transparent !important;}*/
    /*& .flatpickr-current-month input.cur-year{font-weight: bold; padding-left: 0}*/
    /*& .flatpickr-month .numInputWrapper{display: flex; align-items: center; user-select: none; background: transparent !important;}*/
    /*& .flatpickr-month .numInputWrapper span{display: none;}*/
    /*& .flatpickr-month .numInputWrapper::after{content: "년"; font-weight: bold;}*/
    & .flatpickr-month input[type="number"]{width: 100%; user-select: none;}
    & span.flatpickr-weekday{font-size: 13px; font-weight: 400; color: #999}
    & .flatpickr-day.today{border: 0}
    & .flatpickr-months .flatpickr-prev-month svg,
    & .flatpickr-months .flatpickr-next-month svg{display: none}
    & .flatpickr-months .flatpickr-prev-month,
    & .flatpickr-months .flatpickr-next-month{top: 6px; width: 30px; height: 30px;}
    & .flatpickr-months .flatpickr-prev-month{background: url('/assets/site/img/common/arr0401.png') no-repeat center / 9px auto;}
    & .flatpickr-months .flatpickr-prev-month:hover{background-image: url('/assets/site/img/common/arr0403.png');}
    & .flatpickr-months .flatpickr-next-month{background: url('/assets/site/img/common/arr0402.png') no-repeat center / 9px auto;}
    & .flatpickr-months .flatpickr-next-month:hover{background-image: url('/assets/site/img/common/arr0404.png');}
    /*마감 임박*/
    & .flatpickr-day.dc-end::after{content: ""; display: block; position: absolute; top: 5px; left: 50%; width: 6px; height: 6px; background-color: #ff6000; border-radius: 50%; translate: -50% 0;}
    /*영업안함*/
    & .flatpickr-day.disabled-day{text-decoration: line-through;}
    & .flatpickr-day.selected.startRange, & .flatpickr-day.startRange.startRange, & .flatpickr-day.endRange.startRange,
    & .flatpickr-day.selected.endRange, & .flatpickr-day.startRange.endRange, & .flatpickr-day.endRange.endRange{background-color: var(--basic-color); border: 0; color: var(--point-color01);}
    & .flatpickr-day.inRange{border: 0; box-shadow: -5px 0 0 var(--point-color01), 5px 0 0 var(--point-color01); background-color: var(--point-color01);}
    & .flatpickr-day.inRange:not(.prevMonthDay, .nextMonthDay):hover{color: inherit;}
    & .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){box-shadow: -5px 0 0 var(--point-color01) !important;}
    & .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){box-shadow: -2px 0 0 var(--point-color01),5px 0 0 var(--point-color01)}
    & .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
    & .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
    & .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)){box-shadow: -5px 0 0 var(--point-color01);}
    & .flatpickr-day.selected.startRange::before, & .flatpickr-day.startRange.startRange::before, & .flatpickr-day.endRange.startRange::before,
    & .flatpickr-day.selected.endRange::before, & .flatpickr-day.startRange.endRange::before, & .flatpickr-day.endRange.endRange::before{content: ""; position: absolute; top: 0;  display: block; width: 100%; height: 100%; background-color: var(--point-color01); z-index: -1;}
    & .flatpickr-day.selected.startRange::before, & .flatpickr-day.startRange.startRange::before, & .flatpickr-day.endRange.startRange::before{border-radius: 50% 0 0 50%;}
    & .flatpickr-day.selected.endRange::before, & .flatpickr-day.startRange.endRange::before, & .flatpickr-day.endRange.endRange::before{border-radius: 0 50% 50% 0;}
    & .flatpickr-current-month .flatpickr-monthDropdown-months{font-weight: bold; pointer-events: none; appearance: none}
    & .flatpickr-current-month .flatpickr-monthDropdown-months:hover,
    & .flatpickr-current-month .flatpickr-monthDropdown-months:active{background: transparent}
    & .refer-text{margin-top: 28px;}
    & .refer-text span{display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #666;}
    & .refer-text span::before{content: ""; display: block; width: 6px; height: 6px; border-radius: 50%;}
    & .refer-text .c01::before{background-color: #ff6000;}

    @media (width <= 767px) {
        & .flatpickr-day.inRange:not(.startRange){box-shadow: 0 0 0 var(--point-color01), 5px 0 0 var(--point-color01); }
        & .flatpickr-day.selected.startRange{box-shadow: 0 0 0 var(--basic-color), 5px 0 0 var(--basic-color);}
        & .flatpickr-day.selected.endRange{box-shadow: 0 0 0 var(--basic-color), 5px 0 0 var(--basic-color);}
    }

    /*& .flatpickr-day.inRange,*/
    /*& .flatpickr-day.prevMonthDay.inRange,*/
    /*& .flatpickr-day.nextMonthDay.inRange,*/
    /*& .flatpickr-day.today.inRange,*/
    /*&.flatpickr-day.prevMonthDay.today.inRange,*/
    /*& .flatpickr-day.nextMonthDay.today.inRange,*/
    /*& .flatpickr-day:hover,*/
    /*& .flatpickr-day.prevMonthDay:hover,*/
    /*& .flatpickr-day.nextMonthDay:hover,*/
    /*& .flatpickr-day:focus,*/
    /*& .flatpickr-day.prevMonthDay:focus,*/
    /*& .flatpickr-day.nextMonthDay:focus{background-color: var(--point-color01);}*/

    /*100% 만들기*/
    /*& .flatpickr-calendar{width: 100% !important; box-shadow: none;}*/
    /*& .flatpickr-days{width: 100% !important;}*/
    /*& .flatpickr-rContainer{width: 100% !important;}*/
    /*& .dayContainer{flex: 1; min-width: 0; max-width: 100%; display: grid; grid-template-columns: repeat(7, 1fr); text-align: center;}*/
    /*& .flatpickr-day{width: 100%; max-width: 100%;}*/
    /*& .flatpickr-calendar.inline{top: 10px;}*/
    /*& .flatpickr-rContainer{display: block;}*/

    /*@media (width <= 600px) {*/
    /*    & .dayContainer{width: 100%; }*/
    /*    & .flatpickr-days{}*/
    /*}*/
}

/*캐릭터 및 일러스트*/
.obj-friends {
    position: relative;
    display: inline-block;
    width: 259px;
    aspect-ratio: 259 / 275;
    text-align: center;
    pointer-events: none;
    /*background: url('/assets/site/img/common/friends01.png') no-repeat 0 0 / 100% auto;*/
    & .part{position: relative; z-index: 196;}
    & .part01{left: 16px;}
    & .part02{top: 4px;}
    & .part03{top: -15px;}
    & .light{width: 85px;}
    & .chr{width: 259px;}
    & .sole{width: 110px;}
    @media (width <= 860px) {
        width: 230px;
        & .light{width: 75px;}
        & .chr{width: 230px;}
        & .sole{width: 100px;}
    }
    @media (width <= 640px) {
        width: 210px;
        & .light{width: 70px;}
        & .chr{width: 210px;}
        & .sole{width: 90px;}
    }
}
.obj-light {
    position: relative;
    display: inline-block;
    width: 416px;
    aspect-ratio: 416 / 178;
    text-align: center;
    pointer-events: none;
    background: url('/assets/site/img/common/lights01.png') no-repeat 0 0 / 100% auto;
    & .part{display: none; position: relative; z-index: 5; opacity: 1}
    & .part02{top: 29px; left: -4px}
    & .part03{position: absolute; top: 72px;}
    & .part04{position: absolute; right: 0; bottom: 0;}
    & .light{width: 54px;}
    & .typo{width: 295px;}
    & .sole01{width: 22px;}
    & .sole02{width: 22px;}
    @media (width <= 1024px) {
        width: 360px;
    }
    @media (width <= 860px) {
        width: 300px;
    }
}
/*장소선택*/
.selection-bar {
    position: relative;
    display: inline-flex;
    justify-content: center;
    max-width: 726px;
    width: 100%;
    height: var(--selection-bar-height);
    border: 2px solid #000;
    border-radius: 30px;
    background-color: #fff;
    box-shadow: 5px 5px 15px 5px rgba(0,0,0,.15);
    user-select: none;
    z-index: 195;
    & .select-group{display: flex;  align-items: center; gap: 35px;}
    & .select-group .form-chk01 {
        display: flex;
        align-items: center;
        & input[type="radio"]{border-color: #000;}
        & input[type="radio"]:checked::after{background-color: var(--point-color0101);}
        & label{font-family: "jaf-domus-titling-web", sans-serif; font-size: 17px; font-weight: bold;}
    }
    & .sel-info {
        display: flex;
        align-items: center;
        width: 100%;
        & .btn-tab{flex: 1; position: relative; display: flex; justify-content: center; align-items: center; padding: 5px; background-clip: content-box; height: 100%; font-size: 16px; font-weight: bold; text-align: center; border-radius: 30px;}
        & .btn-tab:not(:last-child)::after{content: ""; position: absolute; right: 0; width: 1px; height: 22px; background-color: #eaeae2;}
        & .btn-tab span{display: flex; align-items: center; height: 100%;}
        & .btn-tab .ico01{padding-left: 26px; background: url('/assets/site/img/common/ico_glass01.png') no-repeat 0 calc(50% - 1px) / 20px auto;}
        & .btn-tab .ico02{padding-left: 32px; background: url('/assets/site/img/common/ico_calendar01.png') no-repeat 0 calc(50% - 2px) / 22px auto;}
        & .btn-tab .ico03{padding-left: 33px; background: url('/assets/site/img/common/ico_user02.png') no-repeat 0 calc(50% - 2px) / 26px auto;}
        & .btn-tab.choice span{padding-left: 0; background: none;}
        & .active {
            background-color: var(--point-color01);
            & .ico01{background-image: url('/assets/site/img/common/ico_glass01fw.png')}
            & .ico02{background-image: url('/assets/site/img/common/ico_calendar01fw.png')}
            & .ico03{background-image: url('/assets/site/img/common/ico_user02fw.png')}
        }
    }
    @media (width <= 860px) {
        & .select-group{gap: 28px;}
        & .select-group .form-chk01 {
            & label{font-size: 16px;}
        }
        & .sel-info .btn-tab{font-size: 15px;}
    }
    @media (width <= 640px) {
        & .sel-info {
            padding: 3px;
            & .btn-tab{border-radius: 20px;}
            & .btn-tab .ico01{padding-left: 24px; background: url('/assets/site/img/common/ico_glass01.png') no-repeat 0 center / 18px auto;}
            & .btn-tab .ico02{padding-left: 28px; background: url('/assets/site/img/common/ico_calendar01.png') no-repeat 0 calc(50% - 1px) / 20px auto;}
            & .btn-tab .ico03{padding-left: 30px; background: url('/assets/site/img/common/ico_user02.png') no-repeat 0 calc(50% - 1px) / 23px auto;}
        }
        & .select-group{gap: 24px;}
        & .select-group .form-chk01 {
            & label{font-size: 15px;}
        }
    }
}

/*검색 본문*/
.selection-container {
    position: relative;
    width: 100%;
    & .top-tab{display: none; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px solid #e6e3db;}
    & .top-tab .tit-cate{font-size: 26px; font-weight: bold;}
    & .btn-back{font-size: 14px; font-weight: bold; padding: 11px 0 11px 22px; background: url('/assets/site/img/common/arr02.png') no-repeat 0 center / 16px auto;}
    & .tab-content{position: absolute; top: 20px; width: 100%;}
    & .cont-tab{position: relative; min-height: 100px; padding: 0 24px; background-color: #fff; border-radius: 20px; box-shadow: 7px 7px 20px 5px rgba(0,0,0,.1); z-index: 195}
    & .top-cont{display: flex; justify-content: space-between; align-items: center; padding: 28px 0 15px;}
    & .top-cont .tit-sel{font-size: 18px; font-weight: bold; color: #000;}
    & .top-cont .btn-x{padding: 5px 0 2px 5px; opacity: .2; transition: .2s ease-in-out;}
    & .top-cont .btn-x img{width: 14px;}
    & .top-cont .btn-x:hover{opacity: 1;}
    & .sukah-picker{padding-top: 27px;}
    & .is-place{
        & .mid-cont{padding: 2px 0 29px;}
        & .list-place{display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 27px;}
        & .list-place .form-check-label{width: auto;}
    }
    & .is-date {
        & .mid-cont{border-top: 1px solid #efede7;}
        & .panel-bottom{border-top: 1px solid #efede7; margin-top: 12px;}
    }
    & .is-people {
        & .mid-cont{padding: 2px 0 10px;}
        & .panel-bottom{border-top: 0}
    }
    @media (width <= 1024px) {
        & .top-cont .tit-sel{font-size: 17px;}
        & .is-place{
            & .searchbar02{height: 50px; padding: 6px 6px 6px 24px}
            & .searchbar02 input[type="text"]{font-size: 15px;}
            & .list-place{grid-template-columns: repeat(5, 1fr);}
        }
        & .is-date {
            & .flatpickr-months, & .flatpickr-weekdays, & .flatpickr-days{gap: 30px;}
        }
    }
    @media (width <= 860px) {
        & .tab-content{background-size: 268px auto;}
        & .top-tab .tit-cate{font-size: 24px;}
        & .top-cont{padding: 24px 0 14px;}
        & .is-place{
            & .searchbar02{height: 54px;}
            & .searchbar02 .btn-search{width: 110px;}
            & .list-place{grid-template-columns: repeat(5, 1fr); gap: 8px;}
        }
    }
    @media (width <= 640px) {
        & .tab-content{background-size: 235px auto;}
        & .cont-tab{position: fixed; left: var(--main-gap); top: 50%; translate: 0 -50%; width: calc(100% - calc(var(--main-gap) * 2) ); z-index: 205;}
        & .top-tab{justify-content: center; padding-bottom: 17px;}
        & .btn-back{position: absolute; right: 0;}
        & .top-tab .tit-cate{font-size: 22px;}
        & .top-cont .tit-sel{font-size: 17px;}
        & .panel-bottom {
            padding: 12px 0;
            & .btn-refresh{width: 44px; height: 44px; background-size: 16px auto;}
            & .btn-nodate{font-size: 13px; text-underline-offset: 2px; padding: 3px 0; margin-left: 15px;}
            & .btn-next{width: 100px; height: 44px; font-size: 15px; border-radius: 22px;}
        }
        & .sukah-picker {
            padding-top: 12px;
            & .rangeMode .flatpickr-day{margin-top: 3px;}
            & .flatpickr-months{margin-bottom: 10px;}
            & .refer-text{margin-top: 13px;}
            & .refer-text span{font-size: 13px;}
        }
        & .is-place{
            & .mid-cont{padding: 0 0 22px;}
            & .searchbar02{height: 46px; padding: 6px 9px 6px 18px; }
            & .searchbar02 input[type="text"]{font-size: 14px; background: none; padding-left: 0}
            & .searchbar02 .btn-search{width: 42px; font-size: 0; background: url('../img/common/ico_glass01.png') no-repeat center / 18px auto; box-shadow: none;}
            & .list-place{grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 20px;}
            & .list-place .form-check-label{height: 40px; font-size: 13px; border-radius: 20px;}
        }
        & .is-people{
            & .mid-cont{padding: 0 0 10px;}
        }
    }
    @media (width <= 380px) {
        &.is-place {
            & .list-place{grid-template-columns: repeat(3, 1fr);}
        }
    }
}
.sukah-search {
    position: relative;
    max-width: 766px;
    width: 100%;
    padding: 0 20px;
    margin: 0 auto;
    & .s-backdrop{position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background-color: rgba(0,0,0,0); visibility: hidden; z-index: 195; transition: .3s ease-out;}
    & .s-backdrop.active{background-color: rgba(0,0,0,0); visibility: visible;}
    & .obj-container{text-align: center;}
    & .main-copy{text-align: center;}
    & .main-copy img{max-width: 295px;}
    & .enter-selection {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        & .sel-friends{display: none;}
        & .sel-info{display: flex;}
        & .main-copy{display: none;}
    }
    @media (width <= 860px) {
        & .s-backdrop{display: none}
        & .s-backdrop.active{background-color: rgba(0,0,0,.8); z-index: 205;}
    }
    @media (width <= 640px) {
        & .main-copy img{max-width: 270px;}
    }
}
& .result-search-mobile {
    display: none;
    position: relative;
    top: -14px;
    text-align: center;
    letter-spacing: 0;
    padding-bottom: 18px;
    border-bottom: 1px solid #e8e5dd;
    margin-bottom: 10px;
    & .txt-friends{font-family: 'jaf-domus-titling-web', 'Pretendard', sans-serif; color: #222;}
    & .result01 { font-size: 15px; font-weight: bold; color: #000; line-height: 1.2;}
    & .result01 span:not(:last-child)::after {content: ""; display: inline-block; width: 1px; height: 11px; background-color: #ddd; margin: 0 7px 0 10px;}
    & .result02 {font-size: 13px; color: #888; line-height: 18px; margin-top: 10px;}
    & .result02 span:not(:last-child)::after {content: " ·";}
}



.search-container {
    /*position: sticky;
    top: calc( var(--header-height) + 20px);*/
    position: relative;
    z-index: 10;
    & .search-inner{display: flex; justify-content: space-between; align-items: center;}
    & .btn-filter{position: relative; z-index: 200;}
    & .btn-round{position: relative; display: flex;  align-items: center; width: 166px; height: var(--selection-bar-height); font-family: "jaf-domus-titling-web", sans-serif; font-size: 17px; font-weight: bold; text-align: left; border: 1px solid #e4e4e4; border-radius: calc( var(--selection-bar-height) / 2 ); background-color: var(--bg-color);}
    & .sel-region .btn-region{font-weight: bold; line-height: 23px; padding-right: 29px; background: url("/assets/site/img/common/ico_loc01.png") no-repeat right center / 20px auto;}
    & .sel-friends01{
        & .btn-round{justify-content: flex-start; padding: 0 28px;}
        & .btn-round::after{content: ""; position: absolute; right: 23px; top: 50%; translate: 0 -50%; display: block; width: 13px; height: 7px; background: url('/assets/site/img/common/arr06.png') no-repeat right center / 100% auto;  transition: .2s ease-out;}
        & .btn-round.show{border-color: var(--basic-color); background-color: #fff;}
        & .btn-round.show::after{rotate: 180deg;}
        & .dr-option{min-width: 0; width: 166px; font-family: "jaf-domus-titling-web", sans-serif; font-size: 17px; font-weight: bold; padding: 10px 28px; border: 1px solid var(--basic-color); border-radius: 30px;}
        & .dr-option .btn-item{display: flex; align-items: center; width: 100%; height: 38px; transition: .2s ease-out;}
        & .dr-option .btn-item:hover{color: var(--point-color01)}
    }
    & .sel-filters{
        & .btn-round{justify-content: center;}
        & .btn-round span{position: relative; display: flex; padding-right: 29px;}
        & .btn-round span::after{content: ""; position: absolute; right: 0; top: 50%; translate: 0 -50%; display: block; width: 20px; aspect-ratio: 1 / 1; background: url('/assets/site/img/common/ico_filter01.png') no-repeat right center / 100% auto;}
    }
    & .selection-mobile {display: none; align-items: center; width: 100%; height: var(--selection-bar-height); border: 2px solid #000; padding-left: 20px; background-color: #fff; border-radius: 30px; user-select: none;}
    & .selection-mobile span{font-size: 15px; font-weight: bold; line-height: 20px; padding-left: 25px; background: url('/assets/site/img/common/ico_glass01.png') no-repeat 0 center / 20px auto;}
    @media (width <= 640px) {
        margin-top: 20px;
        & .btn-filter{z-index: 195;}
    }
}

.selection-stay-mobile{
    display: none;
    position: fixed;
    width: 100%;
    top: var(--header-height);
    z-index: 100;
    & .selection-bar {
        max-width: 100%;
        height: 54px;
        border: 0;
        border-bottom: 1px solid #000;
        border-radius: 0;
        & .btn-tab{font-size: 14px;}
        & .btn-tab .ico02{padding-left: 29px; background: url('/assets/site/img/common/ico_calendar01.png') no-repeat 0 calc(50% - 1px) / 20px auto;}
        & .btn-tab .ico03{padding-left: 30px; background: url('/assets/site/img/common/ico_user02.png') no-repeat 0 calc(50% - 1px) / 23px auto;}
    }



    @media (width <= 1024px) {
        display: block;
    }
}

.fixed-bottom-stay {
    display: none;
    position: fixed;
    max-width: 100%;
    width: 100%;
    bottom: 0;
    z-index: 100;
    & .bottom-bar{padding-bottom:calc(constant(safe-area-inset-bottom) + 1px); padding-bottom:calc(env(safe-area-inset-bottom) + 1px); border-top:1px solid #222; background-color:#fff}
    & .bottom-inner{display: flex; justify-content: space-between; align-items: center; height: 72px;}
    & .room-price-container {
        & .o-price{margin-top: 0; margin-bottom: 4px;}
        & .r-price{margin-top: 0}
    }
    & .single{width: 100%;}
    & .btn-res{min-width: 110px; height: 50px; font-size: 15px; border-radius: 25px}
    @media (width <= 1024px) {
        display: block;
    }
}

/* ==========================================================================
    MAIN VISUAL & MAIN CONTENTS -> main.css
    ========================================================================== */

/* ==========================================================================
    COMMON
    ========================================================================== */
.thumb-slider {
    /*비율 변화*/
    & .thumb-vis .image{aspect-ratio: 410 / 260;}
    /*Swiper*/
    & .swiper-pagination-bullets{bottom: 24px; display: flex; justify-content: center; align-items: center; gap: 6px;}
    & .swiper-pagination-bullets .swiper-pagination-bullet,
    & .swiper-pagination-bullets .swiper-pagination-bullet{position: relative; width: 8px; height: 8px; border:1px solid #fff; background-color: #fff; opacity: .3; margin: 0}
    & .swiper-pagination-bullets .swiper-pagination-bullet-active{opacity: 1;}
    & .swiper-button-prev,
    & .swiper-button-next{width: 30px; height: 30px; margin-top: 0; translate: 0 -50%; background-repeat:no-repeat; background-position: center; background-size: 11px auto; opacity: 0; visibility: hidden; transition: .2s ease-out;}
    & .swiper-button-prev{left: 15px; background-image:url('/assets/site/img/common/arr0501.png');}
    & .swiper-button-next{right: 15px; background-image:url('/assets/site/img/common/arr0502.png');}
    @media (hover: hover) {
        &:hover .swiper-button-prev,
        &:hover .swiper-button-next{visibility: visible; opacity: .5;}
        & .swiper-button-prev:hover,
        & .swiper-button-next:hover{opacity: 1;}
    }
    @media (width <= 640px) {
        & .swiper-button-prev{left: 10px;}
        & .swiper-button-next{right: 10px;}
    }

}
.stay-slider {
    /*높이 변화*/
    & .stay-vis{overflow: hidden;}
    & .stay-vis .image{height: 780px;}
    /*& .stay-vis .image img{animation: move02 9s ease-out forwards;}*/
    /*Swiper*/
    & .swiper-button-prev,
    & .swiper-button-next{width: 30px; height: 58px; margin-top: 0; translate: 0 -50%; background-repeat :no-repeat; background-position:  center; background-size: 100% auto; opacity: .7; transition: .2s ease-out;}
    & .swiper-button-prev{left: 40px; background-image:url('/assets/site/img/common/arr0801.png');}
    & .swiper-button-next{right: 40px; background-image:url('/assets/site/img/common/arr0802.png');}
    & .swiper-button-prev:hover,
    & .swiper-button-next:hover{opacity: 1;}
    & .sw-stay-fraction {
        position: relative;
        left: auto;
        bottom: auto;
        width: auto;
        font-family: "jaf-domus-titling-web", sans-serif;
        font-size: 16px;
        & span{display: inline-block; text-align: center;}
        & span:not(.slash){width: 30px;}
        & .slash{color: rgba(255,255,255,.3); margin: 0 1px;}
        & .swiper-pagination-current{font-weight: bold; color: rgba(255,255,255,1); }
        & .swiper-pagination-total{font-weight: bold; color: rgba(255,255,255,.5);}
    }
    & .fraction-container {
        position: absolute;
        bottom: 30px;
        width: 100%;
        text-align: center;
        z-index: 1;
        pointer-events: none;
        & .inner-fraction{position: relative; display: inline-flex; justify-content: center; align-items: center; width: 253px; height: 46px; background-color: rgba(34,34,34,.3); border-radius: 23px;}
        & .inner-fraction::before{content: ""; position: absolute; left: 50%; top: 50%; translate: 0 -50%; display: block; width: 1px; height: 14px; background-color: rgba(255,255,255,.2);}
        & .sw-stay-fraction{flex: 1;}
        & .btn-photo{flex: 1; background-color: transparent;}
        & .btn-photo button{display: inline-block; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.7); line-height: 20px; padding-left: 30px; background: url('/assets/site/img/common/ico_photo01w.png') no-repeat 0 center / 22px auto; pointer-events: auto; transition: .2s ease-out;}
        & .btn-photo button:hover{color: rgba(255,255,255,1); }
    }
    @media (width <= 1280px) {
        & .stay-vis .image{height: 680px;}
    }
    @media (width <= 1200px) {
        & .stay-vis .image{height: 620px;}
    }
    @media (width <= 1024px) {
        & .stay-vis .image{height: 580px;}
        & .swiper-button-prev,
        & .swiper-button-next{width: 30px; height: 58px; background-size: 26px auto}
        & .swiper-button-prev{left: 30px;}
        & .swiper-button-next{right: 30px;}
        & .fraction-container{bottom: 20px;}
    }
    @media (width <= 860px) {
        & .stay-vis .image{height: auto; aspect-ratio: 413 / 286;}
        & .swiper-button-prev,
        & .swiper-button-next{display: none;}
        & .fraction-container {
            & .inner-fraction{width: 230px; height: 40px; border-radius: 20px;}
        }
    }
    @media (width <= 640px) {
        & .fraction-container {
            bottom: 12px;
            & .inner-fraction{width: 210px; height: 36px; border-radius: 18px;}
            & .btn-photo button{font-size: 13px; padding-left: 27px; background-size: 20px auto;}
        }
        & .sw-stay-fraction{font-size: 15px;}
        & .sw-stay-fraction .slash{margin: 0;}
    }
    @media (width <= 420px) {

    }
}
.room-slider {
    border-radius: 24px;
    /*높이 변화*/
    & .room-vis{ overflow: hidden;}
    & .room-vis .image{height: 650px;}
    /*& .room-vis .image img{animation: move02 7s ease-out forwards;}*/
    /*Swiper*/
    & .swiper-button-prev,
    & .swiper-button-next{width: 30px; height: 58px; margin-top: 0; translate: 0 -50%; background-repeat :no-repeat; background-position:  center; background-size: 100% auto; opacity: .7; transition: .2s ease-out;}
    & .swiper-button-prev{left: 60px; background-image:url('/assets/site/img/common/arr0801.png');}
    & .swiper-button-next{right: 60px; background-image:url('/assets/site/img/common/arr0802.png');}
    & .swiper-button-prev:hover,
    & .swiper-button-next:hover{opacity: 1;}
    & .swiper-pagination-bullets{bottom: 35px; display: flex; justify-content: center; align-items: center; gap: 6px;}
    & .swiper-pagination-bullets .swiper-pagination-bullet,
    & .swiper-pagination-bullets .swiper-pagination-bullet{position: relative; width: 8px; height: 8px; border:1px solid #fff; background-color: #fff; opacity: .3; margin: 0}
    & .swiper-pagination-bullets .swiper-pagination-bullet-active{opacity: 1;}

    @media (width <= 1024px) {
        & .room-vis .image{height: auto; aspect-ratio: 413 / 286;}
        & .swiper-button-prev,
        & .swiper-button-next{width: 30px; height: 58px; background-size: 26px auto}
        & .swiper-button-prev{left: 30px;}
        & .swiper-button-next{right: 30px;}
    }
    @media (width <= 860px) {
        & .swiper-button-prev,
        & .swiper-button-next{display: none;}
    }
    @media (width <= 640px) {
        & .swiper-pagination-bullets{bottom: 20px;}
    }
}
.card-slider {
    padding-top: 75px;
    padding-bottom: 59px;
    & .thumb-vis{}
    /*Swiper*/
    & .swiper-button-prev,
    & .swiper-button-next{top: 0; left: auto; width: 36px; height: 36px; margin-top: 0; border: 1px solid #e7e3dc; background-repeat:no-repeat; background-position: center; background-size: 7px auto; border-radius: 50%; opacity: 1; transition: .2s ease-out;}
    & .swiper-button-prev{right: 45px; background-image:url('/assets/site/img/common/arr0601.png');}
    & .swiper-button-next{right: 0; background-image:url('/assets/site/img/common/arr0602.png');}
    & .swiper-horizontal>.swiper-pagination-progressbar,
    & .swiper-pagination-progressbar.swiper-pagination-horizontal{top: auto; bottom: 28px; height: 1px; background-color: #ece9e2;}
    & .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background-color: var(--basic-color);}
    @media (width <= 640px) {
        & .swiper-button-prev{left: 10px;}
        & .swiper-button-next{right: 10px;}
    }
}
.guide-container {
    & .tab-header {position: relative; display: flex;}
    & .tab-header::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #ddd;}
    & .tab-indicator {position: absolute; left: 0; bottom: 0; height: 1px; background-color: var(--basic-color); width: 0; z-index: 10; transition: .3s ease-out;}
    & .btn-tab {position: relative; font-size: 16px; font-weight: bold; color: #999; padding: 0 15px; background: none; border: none;}
    & .btn-tab:first-child{padding-left: 0}
    & .btn-tab span{display: block; padding: 17px 0;}
    & .btn-tab.active {color: var(--basic-color);}
    & .tab-panel{padding: 38px 0 20px; line-height: 32px;}
    & .panel-row {display: flex;}
    & .panel-row:not(:last-child){margin-bottom: 32px;}
    & .panel-title{width: 110px; font-weight: bold; line-height: 30px;}
    & .panel-cont{flex: 1; font-size: 14px; color: #666;}
    & .table-container .panel-comp{margin-top: 10px;}
    & .list-dot p{padding-left: 9px; text-indent: -9px;}
    & .list-dot p::before{content: "• ";}
    & .btn-more{color: var(--basic-color);; text-decoration: underline; text-underline-offset: 2px;}
    & .btn-tel{font-weight: bold; color: var(--basic-color);; margin-left: 4px;}
    & .round-text{display: inline-flex; justify-content: center; align-items: center; font-weight: 500; color: #fff; text-align: center; padding: 0 26px; border-radius: 16px; background-color: #444;}
    & .panel-comp + .panel-comp{margin-top: 26px;}
    & .panel-loc{
        & .loc-summary{display: flex; justify-content: space-between; align-items: center; padding-top: 6px; margin-bottom: 26px;}
        & .address{font-weight: bold;}
        & .address address{font-size: 16px; color: var(--basic-color); line-height: 22px;}
        & .address .tel{font-size: 15px; color: #999;}
        & .btn-tel > a{display: flex; width: 52px; height: 52px; border: 1px solid #e9e7e4; background: url('../img/common/ico_tel01.png') no-repeat center / 24px auto; border-radius: 8px;}
        & .txt-set{margin-top: 27px;}
        & .txt-set p{font-size: 14px; color: #666; line-height: 26px;}
        & .map-container{width: 100%; aspect-ratio: 830 / 414;}
    }
    @media (width <= 1200px) {
        & .btn-tab{font-size: 15px;}
        & .panel-title{font-size: 15px; width: 96px;}
    }
    @media (width <= 640px) {
        & .tab-panel{line-height: 30px; padding: 30px 0 20px;}
        & .panel-row{flex-direction: column;}
        & .panel-title{width: 100%; margin-bottom: 7px;}
        & .round-text{padding: 0 20px;}
        & .table01 th,
        & .table01 td{font-size: 13px;}
        & .panel-loc{
            & .loc-summary{align-items: flex-start; margin-bottom: 16px}
            & .btn-tel > a{width: 48px; height: 48px; background-size: 22px auto; border-radius: 6px;}
            & .map-wrapper{margin-left: calc(var(--main-gap) * -1); margin-right: calc(var(--main-gap) * -1);}
            & .map-container{aspect-ratio: 83 / 57;}
        }

    }
}
/* ==========================================================================
    구경하기
    ========================================================================== */
/*상품 아이템 택*/
& .tag-set {
    display: flex;
    align-items: center;
    gap: 6px;
    & span{display: block; padding: 0 6px; font-size: 12px; font-weight: 600; line-height: 22px; border-radius: 2px;}
    & .tag-promotion-1{color: #ddd; background-color: #3f4546;}
    & .tag-promotion-2{color: #493500; background-color: var(--point-color01);}
    & .tag-promotion-3{color: #fff; background-color: #ff4527;}
    & .tag-promotion-4{color: var(--basic-color); background-color: #8fb9f2;}
    & .tag-promotion-5{color: #fff; background-color: #35a364;}
    & .tag-black{color: #ddd; background-color: #3f4546;}
    & .tag-yellow{color: #493500; background-color: var(--point-color01);}
    @media (width <= 1280px) {
        & .tag-set span{font-size: 11px; line-height: 20px; padding: 0 4px;}
    }
}
/*기본 리스트*/
.stay-card01 {
    > a{display: block}
    & .thumb{position: relative; border-radius: 25px; overflow: hidden;}
    & .thumb .image{overflow: hidden;}
    & .thumb .image img{transition: .3s ease-out;}
    > a:hover .thumb img{scale: 1.07;}
    & .bookmark{position: absolute; right: 20px; bottom: 22px; width: 28px; aspect-ratio: 1 / 1; background: url('../img/common/ico_mark01.png') no-repeat center / 20px auto; z-index: 5}
    & .bookmark.on{background-image: url('../img/common/ico_mark01r.png')}
    & .cont-card{position: relative; margin-top: 24px;}
    & .stay-name{display: flex; justify-content: space-between; align-items: flex-start;}
    & .stay-name strong{flex: 1; display: inline-block; font-size: 20px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
    & .tag-set{justify-content: flex-end; margin-left: 8px;}
    & .info-card{display: flex; font-size: 14px; color: #666; margin-top: 8px;}
    & .info-card span{display: flex; align-items: center;}
    & .info-card span:not(:last-child)::after{content: ""; display: block; width: 1px; height: 13px; background-color: #eae6d7; margin: 0 7px;}
    & .o-price{font-family: "jaf-domus-titling-web", sans-serif; font-size: 15px; color: #bbb; margin-top: 9px;}
    & .o-price strong{font-weight: 400; text-decoration: line-through;}
    & .o-price strong::before{content: "₩ ";}
    & .r-price{display: flex; align-items: center; font-family: "jaf-domus-titling-web", sans-serif; font-size: 18px; margin-top: 9px;}
    & .r-price .rate{font-weight: bold; color: var(--point-color01); margin-right: 14px;}
    & .r-price .rate span::after{content: "%";}
    & .r-price .price strong{font-weight: 600;}
    & .r-price .price strong::before{content: "₩ ";}
}
/*예약정보*/
.stay-card02 {
    border: 1px solid #e6e2db;
    border-radius: 8px;
    background-color: var(--bg-color);
    & .thumb{position: relative; aspect-ratio: 340 / 209; border-radius: 8px; margin: -1px; overflow: hidden;}
    & .cont-card{position: relative; padding: 27px 24px 22px;}
    & .stay-name strong{display: inline-block; font-size: 20px; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
    & .info-card{font-size: 14px; color: #666; line-height: 26px; margin-top: 7px;}
    & .btn-instagram{margin-top: 10px;}
    & .btn-instagram > a{display: block; font-size: 14px; color: #666; line-height: 20px; padding-left: 28px; background: url('/assets/site/img/common/instagram01.png') no-repeat 0 0 / 20px auto;}
    & .btn-container{display: flex; justify-content: space-between; align-items: center; font-size: 14px; margin-top: 36px;}
    & .btn-container button{text-decoration: underline; text-underline-offset: 3px; padding: 5px 0;}
    & .btn-modal{color: #999;}
}
/*저장된 숙소*/
.stay-card03 {
    border: 1px solid #eeece8;
    border-radius: 16px;
    > a{display: flex; flex-direction: column; height: 100%;}
    & .thumb{position: relative; border-radius: 16px; overflow: hidden; margin: -1px;}
    & .tag-set{position: absolute; top: 12px; left: 12px; z-index: 1}
    & .thumb-slider{
        & .thumb-vis .image{aspect-ratio: 320 / 200;}
        & .swiper-button-prev,
        & .swiper-button-next{display: none;}
        & .swiper-pagination-bullets{bottom: 12px;}
    }
    & .cont-card{flex: 1; position: relative; display: flex; flex-direction: column; background-color: #fff; padding: 20px 20px 16px; border-radius: 0 0 16px 16px;}
    & .stay-name{display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 11px;}
    & .stay-name strong{flex: 1; display: inline-block; font-size: 18px; font-weight: 500; line-height: 26px; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2;}
    & .btn-container{display: flex; gap: 15px;}
    & .btn-share{width: 18px; aspect-ratio: 22 / 26; background: url('../img/common/ico_share01.png') no-repeat center / 100% auto;}
    & .bookmark{width: 16px; aspect-ratio: 20 / 24; background: url('../img/common/ico_mark02.png') no-repeat center / 100% auto;}
    & .bookmark.on{background-image: url('../img/common/ico_mark02r.png');}
    & .info-card{display: flex; font-size: 14px; color: #666; margin-top: auto;}
    & .info-card span{display: flex; align-items: center;}
    & .info-card span:not(:last-child)::after{content: ""; display: block; width: 1px; height: 13px; background-color: #eae6d7; margin: 0 7px;}
    & .price-container{padding-top: 16px; border-top: 1px solid #e7e7e7; margin-top: 17px;}
    & .o-price{font-family: "jaf-domus-titling-web", sans-serif; font-size: 15px; color: #bbb;}
    & .o-price strong{font-weight: 400; text-decoration: line-through;}
    & .o-price strong::before{content: "₩ ";}
    & .r-price{display: flex; align-items: center; font-family: "jaf-domus-titling-web", sans-serif; font-size: 18px; margin-top: 6px;}
    & .r-price .rate{font-weight: bold; color: var(--point-color01); margin-right: 14px;}
    & .r-price .rate span::after{content: "%";}
    & .r-price .price strong{font-weight: 600;}
    & .r-price .price strong::before{content: "₩ ";}
}

/*프로모션, 다이어리*/
.stay-card04 {
    > a{display: flex; flex-direction: column; height: 100%;}
    & .thumb{position: relative; aspect-ratio: 410 / 260; border-radius: 16px 16px 0 0; overflow: hidden; z-index: 1;}
    & .thumb img{transition: .3s ease-out;}
    > a:hover .thumb img{scale: 1.1;}
    & .cont-card{flex: 1; position: relative; display: flex; flex-direction: column; background-color: #fff; padding: 22px 26px 0; border: 1px solid #eeece8; border-top: 0; border-radius: 0 0 16px 16px;}
    & .title {display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 9px;}
    & .title strong{flex: 1; display: inline-block; font-size: 18px; font-weight: 500; line-height: 26px; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2;}
    & .info-card{display: flex; font-size: 14px; color: #666; margin-top: auto;}
    & .info-card span{display: flex; align-items: center;}
    & .info-card span:not(:last-child)::after{content: ""; display: block; width: 1px; height: 13px; background-color: #eae6d7; margin: 0 7px;}
    & .info-article {display: flex; gap: 8px; font-size: 13px; margin-top: auto;}
    & .info-article .writer{color: #666;}
    & .info-article .date{color: #999;}
    & .price-card{display: flex; align-items: center; gap: 20px; font-family: "jaf-domus-titling-web", sans-serif; margin-top: 11px; padding-bottom: 19px;}
    & .o-price{font-size: 15px; color: #bbb;}
    & .o-price strong{font-weight: 400; text-decoration: line-through;}
    & .o-price strong::before{content: "₩ ";}
    & .r-price{font-size: 17px;}
    & .r-price strong{font-weight: 600;}
    & .r-price strong::before{content: "₩ ";}
    & .r-price .on-sale::after{content: " ~";}
    & .bottom-card {border-top: 1px solid #eee;}
    & .bottom-card .bottom-inner{display: flex; justify-content: space-between; align-items: center; gap: 14px; min-height: 60px; padding-top: 21px; padding-bottom: 21px;}
    & .bottom-card .txt01{font-size: 14px; font-weight: bold;}
    & .bottom-card .txt02{font-size: 16px; font-weight: bold; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden}
    & .bottom-card .txt-blog{font-family: 'jaf-domus-titling-web', 'Pretendard', sans-serif; letter-spacing: 0; font-size: 13px; font-weight: bold; color: #03c75a; line-height: 18px; padding-left: 23px; background: url('/assets/site/img/common/ico_naver03.png') no-repeat 0 center / 18px auto;}
    & .bottom-card .txt-period{font-family: 'jaf-domus-titling-web', 'Pretendard', sans-serif; letter-spacing: 0; font-size: 15px; color: #999;}
    & .bottom-card .txt-set{flex: 1; min-width: 0;}
    & .bottom-card .txt-set .tit-txt{font-size: 16px; font-weight: bold; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
    & .bottom-card .txt-set .desc{font-size: 14px; color: #888; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin-top: 7px;}
    & .bottom-card .end-day{font-family: 'jaf-domus-titling-web', 'Pretendard', sans-serif; letter-spacing: 0; font-weight: bold; color: var(--point-color01);}
    & .bottom-card .ico-arr::after{content: ""; display: block; width: 6px; aspect-ratio: 12 / 22; background: url('/assets/site/img/common/arr14.png') no-repeat 0 0 / 100% auto;}
    /*세일 중*/
    &.on-sale{
        & .r-price strong::after{content: " ~";}
        & .bottom-card .bottom-inner{align-items: flex-start}
        & .bottom-card .end-day{font-size: 20px; line-height: 13px;}
    }
    /*이벤트*/
    &.event {
        & .info-card{margin-top: 0; margin-bottom: 31px;}
        & .bottom-card {margin-top: auto;}
        & .bottom-card .end-day{font-size: 22px;}
    }
    /*다이어리*/
    &.diary {
        & .title{margin-bottom: 14px;}
        & .info-article{margin-top: 0; margin-bottom: 22px;}
        & .bottom-card {margin-top: auto;}
        & .bottom-card .end-day{font-size: 22px;}
    }
    @media (width <= 860px) {
        & .cont-card{padding: 18px 20px 0;}
        & .title strong{font-size: 17px; line-height: 25px;}
        & .info-card{font-size: 13px;}
        & .o-price{font-size: 14px;}
        & .r-price{font-size: 16px;}
        & .info-article {font-size: 12px;}
        & .bottom-card .bottom-inner{min-height: 0; padding: 18px 0;}
        & .bottom-card .txt02{font-size: 15px;}
        & .bottom-card .txt-period{font-size: 14px;}
        & .bottom-card .txt-set .tit-txt{font-size: 15px;}
        & .bottom-card .txt-set .desc{font-size: 13px;}
        &.on-sale .bottom-card .end-day{font-size: 19px;}
        &.event .bottom-card .end-day{font-size: 20px;}
    }
}


.room-price-container{
    & .o-price{font-family: "jaf-domus-titling-web", sans-serif; font-size: 15px; color: #bbb; margin-top: 15px;}
    & .o-price strong{font-weight: 400; text-decoration: line-through;}
    & .o-price strong::before{content: "₩ ";}
    & .r-price{display: flex; align-items: center; font-family: "jaf-domus-titling-web", sans-serif; font-size: 18px; margin-top: 15px;}
    & .r-price .rate{font-weight: bold; color: var(--point-color01); margin-right: 14px;}
    & .r-price .rate span::after{content: "%";}
    & .r-price .price strong{font-weight: 500;}
    & .r-price .price strong::before{content: "₩ ";}
    & .r-price .price strong::after{content: "/ 박"; font-family: 'Pretendard', sans-serif; font-size: 14px; color: #777; margin-left: 4px;}
    & .r-price .btn-view{margin-left: auto; font-size: 14px; font-weight: bold;}
    & .r-price .btn-view span{text-decoration: underline; text-underline-offset: 5px;}
}

.room-card01 {
    > a{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid #e6e2db; border-radius: 8px; background-color: var(--bg-color); overflow: hidden;}
    & .thumb{position: relative;}
    & .thumb .thumb-slider .thumb-vis .image{aspect-ratio: 415 / 238;}
    & .cont-card{position: relative; display: flex; flex-direction: column; padding: 24px 35px;}
    & .stay-name strong{display: inline-block; font-size: 20px; font-weight: bold;}
    & .info-card{font-size: 14px; color: #666; line-height: 24px; margin-top: 6px;}
    & .info-card .separate{position: relative; top: -1px; display: inline-block; width: 1px; height: 13px; background-color: #cecdcb; vertical-align: middle; margin: 0 14px;}
    & .room-price-container{margin-top: auto}
    & .room-over-container{display: none; font-size: 16px; font-weight: bold; margin-top: auto;}
    &.close{
        & .thumb{filter: grayscale(90);}
        & .cont-card,
        & .info-card,
        & .r-price .rate,
        & .r-price .price strong::after{color: #bbb;}
        & .room-price-container{display: none;}
        & .room-over-container{display: block;}
    }
    &.alt01{
        > a{overflow: visible; grid-template-columns: minmax(260px, 37.22772%) minmax(0, 1fr);}
        & .thumb{aspect-ratio: 376 / 240; border-radius: 8px; overflow: hidden; margin: -1px;}
        & .cont-card{padding: 23px 30px;}
        & .info-card{font-size: 15px; line-height: 30px; margin-top: 4px;}
        & .room-price-container .r-price .price strong{font-size: 18px; font-weight: bold;}
        & .room-price-container .r-price .price strong::after{display: none;}
    }
}
/*숙소 상세 오른쪽*/
.room-card02 {
    display: flex;
    align-items: center;
    gap: 18px;
    cursor: pointer;
    & .thumb{aspect-ratio: 75 / 55; width: 75px;}
    & .thumb img{border-radius: 4px;}
    & .cont-card{flex: 1; min-width: 0;}
    & .stay-name{position: relative; overflow: hidden;}
    & .stay-name strong{display: inline-block; font-size: 16px; font-weight: 500;}
    & .info-card{display: flex; font-size: 13px; color: #666; margin-top: 3px;}
    & .info-card span{display: flex; align-items: center;}
    & .info-card span:not(:last-child)::after{content: ""; display: block; width: 1px; height: 13px; background-color: #eae6d7; margin: 0 7px;}
    & .room-price-container{margin-top: 8px;}
    & .room-over-container{display: none; font-size: 16px; font-weight: bold; margin-top: 8px;}
    &.close{
        & .thumb{filter: grayscale(90);}
        & .cont-card,
        & .info-card,
        & .r-price .rate,
        & .r-price .price strong::after{color: #bbb;}
        & .room-price-container{display: none;}
        & .room-over-container{display: block;}
    }
}
.empty-booking-data{
    display: flex;
    justify-content: center;
    padding-top: 50px;
    padding-bottom: 30px;
    /*& .empty-wrapper{max-width: 340px; padding-top: 262px; background: url('/assets/site/img/common/friends0101.png') no-repeat center 0 / 218px auto;}*/
    & .empty-wrapper{width: 312px; padding-top: 208px; background: url('/assets/site/img/common/friends0102.png') no-repeat center 0 / 312px auto;}
    & .txt-set{text-align: center;}
    & .txt-set .title{font-size: 19px; font-weight: bold;}
    & .txt-set p{font-size: 15px; color: #999; line-height: 30px; margin-top: 5px;}
    & .btn-more{margin-top: 20px;}
    & .btn-more a{width: 100%;}

    @media (width <= 640px) {
        padding-top: 40px;
        padding-bottom: 10px;
        & .empty-wrapper{padding-top: 174px; background-size: 248px auto;}
    }
}
.list-card-room > ul{display: flex; flex-direction: column; gap: 24px;}


.point-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    &::before{content: ""; position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 60%, rgba(0, 0, 0, .4) 100%);}
    & .image{aspect-ratio: 13 / 18;}
    & .num{position: absolute; top: 15px; left: 15px; font-family: "jaf-domus-titling-web", sans-serif; letter-spacing: 0; font-size: 12px; font-weight: bold; color: rgba(255,255,255,.7); writing-mode: vertical-lr;}
    & .txt-set{position: absolute; left: 0; bottom: 0; padding: 15px;}
    & .title{font-size: 16px; font-weight: bold; color: #fff;}
    & p{font-size: 13px; color: rgba(255,255,255,.5); line-height: 19px; margin-top: 7px; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2;}
}
.diary-card{
    position: relative;
    & .thumb{aspect-ratio: 66 / 45; border-radius: 16px; overflow: hidden;}
    & .info-card{margin-top: 14px;}
    & .info-card .title{min-height: 48px; font-size: 18px; font-weight: 300; line-height: 24px; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2;}
    & .info-card .meta{display: flex; gap: 10px; font-size: 13px; margin-top: 11px;}
    & .info-card .writer{color: #666;}
    & .info-card .date{color: #999;}
}
.notice-bar {
    position: relative;
    display: flex;
    background-color: #f6eedf;
    border-radius: 24px;
    &::before{content: ""; display: block; width: 48px; aspect-ratio: 1 / 1; background: var(--point-color01) url('../img/common/ico_clock01w.png') no-repeat center / 26px auto; border-radius: 50%}
    & .notice-inner{display: flex; align-items: center;}
    & .tit-bar{font-size: 16px; font-weight: bold; margin-left: 11px;}
    & .txt-bar{flex: 1; font-size: 14px; color: #777; margin-left: 38px;}
    & .txt-bar span{font-weight: 500; color: var(--basic-color); text-decoration: underline; text-underline-offset: 2px;}
}
/*객실 품목 관련*/
.list-ico01{
    > ul{display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: 30px 0;}
    & .item-fac{display: flex; align-items: center; gap: 10px; font-size: 15px; color: #666;}
    & .item-fac img{width: 26px;}
}
/*추가옵션*/
.list-option01 {
    > ul {display: flex; flex-direction: column; gap: 20px;}
    & .item-option{display: flex; justify-content: space-between; gap: 20px; font-family: 'Roboto', 'Pretendard', sans-serif; line-height: 33px;}
    & .p-item{flex: 1;}
    & .p-vl{display: flex; gap: 35px;}
    & .p-chk label{font-size: 18px; color: var(--basic-color);}
    & .refer{font-size: 15px; color: #999; line-height: 24px; margin-left: 32px;}
    & .price{font-size: 15px; color: #888;}
    & .price strong{font-weight: 400;}
    /*& .price strong::after{content: "원";}*/
}
/*결제하기 결제금액 (마이페이지도 쓰임)*/
.booking-price {
    & .title{position: relative; display: flex; align-items: center; height: 52px; font-size: 16px; font-weight: bold; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);}
    & .title::after{content: ""; position: absolute; right: 0; top: 50%; translate: 0 -50%; display: block; width: 10px; aspect-ratio: 10 / 6; background: url('/assets/site/img/common/arr07.png') no-repeat 0 center / 100% auto;}
    > ul {padding-top: 15px; padding-bottom: 15px;}
    & .row-price{display: flex; justify-content: space-between; line-height: 30px;}
    & .b-item{font-size: 14px;}
    & .b-price{font-family: "jaf-domus-titling-web", sans-serif; letter-spacing: 0; font-size: 15px; font-weight: 600;}
    & .b-price span{font-family: 'Pretendard', sans-serif; font-size: 14px; font-weight: 400;}
    & .option-price{color: #999;}
    & .total{border-top: 1px solid var(--basic-color); border-bottom: 1px solid var(--border-color);}
    & .total .row-price{line-height: 60px;}
    & .total .t-item{font-size: 16px; font-weight: bold;}
    & .total .total-price{font-family: "jaf-domus-titling-web", sans-serif; letter-spacing: 0; font-size: 20px; font-weight: 600;}
    & .t-chk{padding-top: 20px; padding-bottom: 20px; border-top: 1px solid var(--border-color);}
}
/*약관 동의*/
.terms-container{
    & .terms-item{display: flex; justify-content: space-between; align-items: center; height: 48px; padding: 0 20px; border-radius: 10px;}
    & .terms-list{padding: 16px 0;}
    & .refer-text{font-size: 13px; color: #999; line-height: 22px; padding-top: 25px; border-top: 1px solid #ddd;}
    & .chk-label {font-size: 15px; color: #777; line-height: 28px; padding-left: 10px;}
    & .form-chk02 .chk-item:checked{border-color: var(--point-color01); background-color: var(--point-color01);}
        & .btn-container{display: block; margin-top: 0;}
    & .btn-view{font-size: 0; width: 40px; height: 30px; background: url('/assets/site/img/common/arr11.png') no-repeat calc(100% - 4px) center / 8px auto;}
    & .terms-all{
        background-color: #f3f3f3;
        margin-top: 30px;
        & .chk-label{font-weight: 500; color: var(--basic-color);}
    }
    & .terms-host{
        background-color: #f6f2ea;
        border-radius: 6px;
        & .chk-label{color: var(--basic-color);}
        & .chk-label span{text-decoration: underline; text-underline-offset: 2px;}
    }
}
.pg-watch {
    & .obj-container{position: relative; top: -1px; text-align: center; margin-bottom: 31px;}
    & .list-container{margin-top: 62px; padding-bottom: 80px;}
    & .list-card > ul{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 42px 24px;}
    & .list-card .empty-data{grid-column: span 3;}
    @media (width <= 1280px) {
        & .search-container{
            & .selection-bar,
            & .btn-round{height: 56px;}
            & .btn-round {width: 150px;}
            & .sel-friends01 {
                & .dr-option{width: 150px;}
            }
        }
        & .stay-card01 {
            & .thumb{border-radius: 20px;}
            & .bookmark{right: 20px; bottom: 20px; width: 24px; background-size: 18px auto}
            & .stay-name strong{font-size: 18px;}
        }
    }
    @media (width <= 1200px) {
        & .list-container{padding-bottom: 40px;}
        & .search-container{
            & .btn-round {width: 136px; font-size: 16px; padding: 0 20px;}
            & .sel-friends01 {
                & .btn-round::after{right: 20px;}
                & .dr-option{width: 136px; font-size: 16px; padding: 10px 20px;}
            }
        }
    }
    @media (width <= 1024px) {
        & .list-container{padding-bottom: 0;}
        & .search-container{
            & .sukah-search{padding: 0 14px;}
            & .selection-bar .sel-info .btn-tab{font-size: 15px; padding: 4px;}
            & .selection-bar,
            & .btn-round{height: 52px;}
            & .sel-friends01 {
                & .btn-round {width: 130px; font-size: 15px; padding: 0 14px;}
                & .btn-round::after{right: 14px;}
                & .dr-option{width: 130px; font-size: 15px; padding: 10px 16px;}
                & .dr-option .btn-item{height: 33px;}
            }
            & .sel-filters{
                & .btn-round{width: 52px; padding: 0;}
                & .btn-round span{padding-right: 0; font-size: 0}
                & .btn-round span::after{position: relative; top: auto; right: auto; translate: 0;}
            }
        }
        & .list-card > ul{grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px;}
        & .list-card .empty-data{grid-column: span 2;}
    }
    @media (width <= 860px) {
        & .list-container{margin-top: 40px;}
        & .result-search-mobile{display: block;}
        & .stay-card01 .bookmark{right: 16px; bottom: 16px; width: 20px; background-size: 16px auto;}
        & .search-container{
            & .sukah-search{padding: 0 10px 0 0;}
            & .sel-friends01{display: none;}
            & .selection-bar{display: none; height: var(--selection-bar-height);}
            & .selection-container{display: none;}
            & .sel-filters .btn-round{width: var(--selection-bar-height); background-color: #fff;}
            & .selection-mobile{display: flex;}
            & .list-card .empty-data{grid-column: span 1;}
        }
    }
    @media (width <= 640px) {
        & .list-container{margin-top: 42px;}
        & .result-search-mobile{top: 0; padding-bottom: 20px; margin-bottom: 25px;}
        & .obj-container{display: none;}
        & .list-card > ul{grid-template-columns: minmax(0, 1fr); gap: 20px;}
        & .stay-card01 {
            & .thumb{border-radius: 20px;}
            & .bookmark{right: 24px; bottom: 24px; width: 22px; background-size: 18px auto;}
        }
    }
}
.detail-container {
    display: flex;
    align-items: flex-start;
    gap: 70px;
    padding-top: 51px;
    & .sec-detail{position: relative;}
    & .sec-detail:not(:last-child){margin-bottom: 70px;}
    & .sec-detail img{max-width: 100%;}
    & .sec-detail .card-slider{position: relative; margin-top: -40px;}
    & .tit-sec01{font-family: "jaf-domus-titling-web", sans-serif; font-size: 18px; letter-spacing: 0;}
    & .tit-sec02{font-weight: bold;}
    & .tit-sec02 .txt-en{font-family: "jaf-domus-titling-web", sans-serif; font-size: 12px; color: #bbb; letter-spacing: 0; margin-bottom: 10px;}
    & .tit-sec02 .title{font-size: 28px; font-weight: bold; line-height: 36px;}
    & .tit-sec03{font-size: 24px; font-weight: bold; line-height: 36px;}
    & .tit-sec03 strong{color: var(--point-color01);}
    & .tit-top {
        margin-bottom: 26px;
        &.flex-sp{display: flex; justify-content: space-between; align-items: center;}
        & .r-price01{display: flex; align-items: center; gap: 14px;}
        & .r-price01 .o-price,
        & .r-price01 .r-price{margin-top: 0}
        & .title{display: flex; align-items: center;}
        & .title strong{font-size: 24px; font-weight: 400;}
        & .title button{display: flex; justify-content: center; align-items: center; margin-right: 14px;}
        & .title img{width: 20px;}
    }
    & .detail-area {flex: 1; min-width: 0;}
    & .room-type .tit-sec01{margin-bottom: 24px;}
    & .d-dcend{margin-bottom: 48px;}
    & .d-promotion {
        display: flex;
        padding-top: 38px;
        padding-bottom: 38px;
        border-top: 1px solid #e8e5de;
        border-bottom: 1px solid #e8e5de;
        & .tit-sec01{width: 180px; line-height: 24px;}
        & .text-container{flex: 1;}
        & .txt-set{font-size: 14px; font-weight: 500; color: #666; line-height: 22px;}
        & .txt-set p:not(:last-child){margin-bottom: 10px;}
        & .txt-set span{text-decoration: underline; text-underline-offset: 2px;}
        + .d-promotion{border-top: 0;}
    }
    & .d-introduce {
        & .tit-sec02{margin-bottom: 54px;}
        & .image{aspect-ratio: 830 / 468;}
        & .image img{border-radius: 16px;}
        & .txt-set{font-size: 16px !important; font-weight: 300 !important;; color: #333 !important; line-height: 26px !important; margin-top: 39px;}
    }
    & .d-diary .btn-more{position: absolute; right: 0; bottom: -6px; font-size: 13px; color: #777; z-index: 10;}
    & .d-diary .btn-more > a{padding: 8px 0 8px 10px;}
    /*객실 정보*/
    & .d-room-info{
        & .info-box{padding: 20px 32px; background-color: #f6f2ea; border-radius: 16px;}
        & .list-dot p{padding-left: 11px; text-indent: -11px; font-size: 15px; color: #666; line-height: 24px;}
        & .list-dot p::before{content: "• ";}
        & .list-dot p:not(:last-child){margin-bottom: 7px;}
        & .btn-more{margin-top: 15px;}
        & .btn-more .btn-view{display: flex; align-items: center; font-size: 15px; color: #888;}
        & .btn-more .btn-view .hw-click{width: 84px; margin-right: 10px;}
        & .btn-more .btn-txt span{color: var(--basic-color);}
    }
    & .d-room-fac {
        margin-bottom: 97px;
        & .tit-sec{margin-bottom: 43px;}
        & .tit-sec .title{font-size: 22px; font-weight: 500;}
    }
    & .d-instagram{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 116px;
        border-top: 1px solid var(--border-color01);
        border-bottom: 1px solid var(--border-color01);
        & .tit-instagram{font-size: 18px; line-height: 22px; padding-left: 29px; background: url('/assets/site/img/common/instagram01.png') no-repeat 0 center / 20px auto;}
        & .btn-more{font-size: 13px; color: #999;}
        & .btn-more > a{display: block; line-height: 22px; padding-right: 21px; background: url('/assets/site/img/common/arr0602.png') no-repeat right calc(50% - 1px) / 7px auto;}
    }
    & .guide-container {margin-top: 28px;}
    & .payment-group {
        & .form-chk02 .chk-item:not(:checked){background-color: transparent;}
        & .payment-item {padding: 39px 0 33px; border-top: 1px solid #ddd;}
        & .tit-item {font-size: 20px; font-weight: 500; margin-bottom: 27px;}
        & .user-info li{display: flex; justify-content: space-between; align-items: center; font-family: 'Roboto', 'Pretendard', sans-serif; line-height: 33px;}
        & .user-info .p-item{font-size: 15px; color: #999;}
        & .user-info .p-vl{font-size: 16px;}
        & .form-row{display: flex; gap: 10px;}
        & .form-cell{flex: 1;}
        & .select-group01 + .form-row{margin-top: 30px;}
        & .btn-cell{margin-top: 1px;}
        & .btn-more{font-size: 14px; color: #999; padding: 10px 0}
        & .ico-arr{padding-right: 14px; background: url('/assets/site/img/common/arr10.png') no-repeat 100% center / 7px auto;}
        & .ico-card{display: inline-block; line-height: 24px; padding-left: 31px; background: url('/assets/site/img/common/ico_credit01') no-repeat 0 calc(50% - 1px) / 24px auto;}
        & .ico-mail{padding-left: 50px; background: url('/assets/site/img/common/ico_mail01.png') no-repeat 16px calc(50% - 1px) / 24px auto;}
        & .logo-toss{max-width: 117px;}
        & .logo-kakaopay{max-width: 75px;}
        & .logo-npay{max-width: 72px;}
        & .terms-container{margin-top: 10px}
    }
    & .result-area {
        position: sticky;
        top: calc( var(--header-height) + 50px );
        align-self: flex-start;
        width: 380px;
        padding: 27px 20px 29px;
        background-color: #fff;
        border-radius: 25px;
        box-shadow: 5px 3px 25px 5px rgba(0,0,0,.08);
        & .inner-sec{position: relative;}
        & .r-selection {
            & .tit-sec01{padding: 0 4px; text-align: center; margin-bottom: 17px;}
            & .selection-bar{border: 1px solid #f0ede8; box-shadow: 3px 3px 25px 3px rgba(0,0,0,.07);}
            & .sel-info{padding: 0 19px;}
            & .selection-bar .btn-tab{font-size: 15px;}
        }
        & .r-room,
        & .r-price,
        & .r-price01{padding: 0 4px;}
        & .r-room{margin-top: 24px;}
        & .r-room .tit-sec01{font-size: 13px; line-height: 24px; text-align: left; background: url('/assets/site/img/common/arr05.png') no-repeat calc(100% - 4px) center / 10px auto; margin-bottom: 18px;}
        & .r-price01{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 33px;
            & .o-price,
            & .r-price{margin-top: 0}
        }
        & .re-price{
            margin-top: 28px;
            > ul{border-top: 1px solid var(--basic-color);}
            > ul > li{display: flex; justify-content: space-between; align-items: center; height: 51px; border-bottom: 1px solid var(--border-color); color: #888;}
            & .r-item{font-size: 14px; font-weight: 500; }
            & .price{font-family: "jaf-domus-titling-web", sans-serif; letter-spacing: 0; font-size: 15px; font-weight: 600;}
            & .price span{font-family: 'Pretendard', sans-serif; font-size: 14px; font-weight: 400;}
            & .total{font-weight: bold; color: var(--basic-color);}
            & .total .r-item{font-size: 15px; font-weight: bold; font-family: "jaf-domus-titling-web", sans-serif; letter-spacing: 0;}
            & .total .price{font-size: 16px; font-weight: bold;}
        }
        & .btn-container{margin-top: 26px;}
        & .btn-container .btn-res{height: var(--selection-bar-height); border-radius: calc(var(--selection-bar-height) / 2);}
        & .room-name{font-size: 20px; font-weight: bold; text-align: center; padding-top: 5px; padding-bottom: 26px; border-bottom: 1px solid var(--basic-color);}
        & .booking-info {
            padding-top: 14px;
            padding-bottom: 14px;
            & li{display: flex; justify-content: space-between; align-items: center; font-size: 14px; line-height: 34px;}
            & .b-item{color: #999;}
        }
    }
    @media (width <= 1280px) {
        gap: 40px;
        & .sec-detail:not(:last-child){margin-bottom: 60px;}
        & .tit-sec02 .title{font-size: 26px; line-height: 34px;}
        & .room-card01 .cont-card{padding: 24px 24px;}
        & .d-promotion{padding-top: 30px; padding-bottom: 30px;}
        & .result-area {
            top: calc(var(--header-height) + 30px);
            width: 340px;
            & .btn-container .btn-res{height: 54px; border-radius: 27px;}
        }
    }
    @media (width <= 1200px) {
        & .selection-bar,
        & .result-area .btn-container .btn-res{height: 50px; border-radius: 25px; font-size: 15px;}
        & .tit-sec01{font-size: 17px;}
        & .tit-sec03{font-size: 22px;}
        & .room-card01 .thumb .thumb-slider .thumb-vis .image{aspect-ratio: 415 / 259;}
        & .room-card01 .cont-card{padding: 20px;}
        & .room-card01 .stay-name strong{font-size: 18px;}
        & .room-card01 .info-card{margin-top: 0}
        & .room-card01 .r-price .btn-view{font-size: 13px;}
        & .room-price-container .r-price{margin-top: 10px;}
        & .room-card02{gap: 10px;}
        & .room-card02 .stay-name strong{font-size: 15px;}
        & .room-card02 .info-card{font-size: 12px;}
        & .d-promotion .tit-sec01{width: 120px;}
        & .d-instagram{height: 100px;}
        & .diary-card .info-card .title{font-size: 17px;}
        & .list-ico01 .item-fac{font-size: 14px;}
        & .payment-group .tit-item{font-size: 19px;}
        & .list-option01 .refer{font-size: 14px; line-height: 22px;}
        & .list-option01 .p-vl{gap: 20px;}
        & .result-area {
            width: 310px;
            & .r-selection .selection-bar .btn-tab {font-size: 14px;}
            & .selection-bar .sel-info .btn-tab .ico02{padding-left: 28px; background: url('/assets/site/img/common/ico_calendar01.png') no-repeat 0 calc(50% - 1px) / 20px auto;}
            & .selection-bar .sel-info .btn-tab .ico03{padding-left: 30px; background: url('/assets/site/img/common/ico_user02.png') no-repeat 0 calc(50% - 1px) / 23px auto;}
        }
    }
    @media (width <= 1024px) {
        flex-direction: column;
        & .detail-area {width: 100%; padding-top: 0;}
        & .result-area{display: none;}
        & .tit-top .title strong{font-size: 20px;}
        & .d-room-info .info-box{padding: 20px 20px;}
        & .payment-group .payment-item{padding: 32px 0 26px;}
    }
    @media (width <= 860px) {
        padding-top: 34px;
        & .notice-bar .txt-bar {font-size: 14px; margin-left: 20px;}
        & .d-dcend{margin-bottom: 34px;}
        & .tit-sec02 .txt-en{font-size: 11px; margin-bottom: 10px;}
        & .tit-sec02 .title{font-size: 22px; line-height: 30px;}
        & .room-card01 .thumb .thumb-slider .thumb-vis .image{aspect-ratio: 410 / 260}
        & .d-introduce {
            & .tit-sec02 {margin-bottom: 34px;}
            & .txt-set{font-size: 15px !important; line-height: 24px !important; margin-top: 30px;}
        }
        & .d-room-fac{margin-bottom: 60px;}
        & .d-room-fac .tit-sec{margin-bottom: 24px}
        & .d-room-fac .tit-sec .title{font-size: 20px;}
        & .payment-group {
            & .tit-item {font-size: 18px; margin-bottom: 22px;}
            & .list-option01 > ul {gap: 14px;}
        }
    }
    @media (width <= 640px) {
        & .card-slider .swiper-button-prev,
        & .card-slider .swiper-button-next{display: none;}
        & .notice-bar {
            align-items: flex-start;
            gap: 14px;
            padding: 16px 10px 14px;
            border-radius: 16px;
            &::before { width: 44px; border-radius: 8px;}
            & .notice-inner{flex-direction: column; align-items: flex-start;}
            & .tit-bar{margin-left: 0;}
            & .txt-bar {font-size: 14px; line-height: 18px; margin-left: 0; margin-top: 5px;}
        }
        & .sec-detail:not(:last-child){margin-bottom: 50px;}
        & .d-promotion{flex-direction: column; gap: 6px; padding-top: 18px; padding-bottom: 18px;}
        & .d-promotion .tit-sec01{width: 100%;}
        & .room-card01 > a{grid-template-columns: minmax(0, 1fr);}
        & .room-card01 .thumb .thumb-slider .thumb-vis .image{aspect-ratio: 410 / 230}
        & .room-card01 .thumb .thumb-slider .swiper-pagination-bullets{bottom: 18px;}
        & .room-card01 .thumb .thumb-slider:hover .swiper-button-prev,
        & .room-card01 .thumb .thumb-slider:hover .swiper-button-next{display: none}
        & .room-card01 .info-card{margin-top: 0;}
        & .d-instagram{height: 90px;}
        & .diary-card .info-card .title{display: block; min-height: 0;}
        & .tit-top.flex-sp{flex-direction: column; align-items: flex-start; gap: 18px;}
        & .tit-top .title button{display: none;}
        & .tit-top .r-price{font-size: 17px;}
        & .d-room-info .info-box{margin-left: calc( var(--main-gap) * -1 ); margin-right: calc( var(--main-gap) * -1 ); border-radius: 0; padding: 24px;}
        & .d-room-info .btn-more .btn-view .hw-click{width: 68px;}
        & .list-ico01 > ul{grid-template-columns: repeat(3, minmax(0, 1fr));}
        & .list-ico01 .item-fac{gap: 8px; font-size: 13px;}
        & .list-ico01 .item-fac img{width: 22px;}
        & .d-room-fac .tit-sec .title{font-size: 19px;}
        & .list-option01 .p-chk label{font-size: 17px; padding-left: 10px;}
        & .list-option01 .p-vl{gap: 14px;}
        & .list-option01 .refer{display: none;}
        & .payment-group {
            & .user-info .p-vl{font-size: 15px;}
            & .counting .c-num {width: 40px;}
            & .form-row:has(.form-cell){flex-direction: column;}
        }
    }
}
.pg-stay {
    & .title-bar{display: flex; justify-content: space-between; align-items: flex-start; padding-top: 29px; padding-bottom: 34px; border-bottom: 1px solid #e8e5de;}
    & .tit-set{padding-top: 7px;}
    & .stay-name{font-size: 22px; font-weight: 500; line-height: 28px;}
    & .place{font-size: 15px; color: #777; margin-top: 10px;}
    & .btn-container{display: flex; gap: 40px;}
    & .btn-share{width: 22px; aspect-ratio: 22 / 26; background: url('../img/common/ico_share01.png') no-repeat center / 100% auto;}
    & .bookmark{width: 20px; aspect-ratio: 20 / 24; background: url('../img/common/ico_mark02.png') no-repeat center / 100% auto;}
    & .bookmark.on{background-image: url('../img/common/ico_mark02r.png');}
    @media (width <= 1024px) {
        padding-top: calc( var(--header-height) + 54px);
        padding-bottom: 40px;
        & .btn-container {gap: 30px; padding-top: 2px;}
        & .stay-name{font-size: 20px; font-weight: 500; line-height: 28px;}
    }
    @media (width <= 860px) {
        & .title-bar{padding-top: 20px; padding-bottom: 25px;}
    }
    @media (width <= 640px) {
        & .title-bar{padding-top: 20px;}
        & .tit-set{padding-top: 0;}
        & .place{font-size: 14px; margin-top: 7px;}
        & .btn-container {gap: 24px;}
        & .btn-share{width: 20px}
        & .bookmark{width: 18px;}
    }

}
.pg-room {
    & .vis-container{padding-top: 48px;}
    @media (width <= 1024px) {
        padding-top: calc( var(--header-height) + 54px);
        & .vis-container{padding-top: 0; margin-left: calc( var(--main-gap) * -1 ); margin-right: calc( var(--main-gap) * -1 )}
        & .room-slider{border-radius: 0;}
    }
}
.complete-section {
    min-height: 760px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    & .obj-container{width: 380px;}
    & .obj-friends{scale: .85}
    & .txt-set .main-text {font-size: 19px; font-weight: bold;}
    & .txt-set p{font-size: 15px; color: #999; line-height: 20px; margin-top: 10px;}
    & .info-text {
        text-align: left;
        & .row-info{display: flex; justify-content: space-between; align-items: center; font-size: 14px; line-height: 30px;}
        & .r-item{color: #999}
    }
    & .btn-container{display: flex; justify-content: center; gap: 10px; margin-top: 25px;}
    & .btn-container a{flex: 1;}
    & .request-wrapper .spinner-border{width: 44px; height: 44px; border-width: 6px; margin-bottom: 15px;}
    & .fail-wrapper{
        max-width: 380px;
        width: 100%;
        & .icon{margin-bottom: 19px;}
        & .icon img{width: 86px;}
        & .txt-set,
        & .info-text{padding: 0 24px;}
        & .txt-set .main-text {padding-bottom: 19px; border-bottom: 1px solid var(--border-color02); margin-bottom: 9px;}
    }
    @media (width <= 860px) {
        min-height: calc(100svh - var(--header-height));
    }
    @media (width <= 640px) {

    }
}

.pg-reservation {
    &#content{background-color: #fff;}
    & .detail-container {
        padding-top: 46px;
        & .detail-area {padding-top: 27px;}
    }
    @media (width <= 1024px) {
        & .detail-container {
            & .detail-area {padding-top: 0;}
            & .result-area {position: relative; top: auto; display: block; width: 100%; border: 1px solid var(--border-color); box-shadow: none; border-radius: 18px;}
        }
    }
    @media (width <= 860px) {
        & .list-container{padding-bottom: 60px;}
    }
}


/* ==========================================================================
    프로모션, 다이어리
    ========================================================================== */
.tit-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 80px;
    padding-bottom: 40px;
    &.s01{align-items: center;}
    & .title{font-size: 30px; font-weight: bold;}
    & .category{translate: 0 -3px;}
    & .category-list{display: flex; gap: 30px;}
    & .category-list > li > a{font-size: 18px; font-weight: bold; }
    & .category-list > li > a:hover,
    & .category-list > li > .active{color: var(--point-color01);}
    & .category-list > li > .active{text-decoration: underline; text-underline-offset: 7px;}
    & .searchbar {
        max-width: 420px;
        height: 56px;
        padding: 5px 5px 5px 24px;
        border: 1px solid #f2efea;
        background-color: #fff;
        border-radius: 28px;
        cursor: pointer;
        user-select: none;
        & input[type="text"]{background:  url('/assets/site/img/common/ico_glass01.png') no-repeat 0 center / 20px auto; cursor: pointer;}
        & input[type="text"]::-webkit-input-placeholder{font-weight: 400; color: #777;}
        & .btn-search{background: var(--point-color01); border-radius: 22px; box-shadow: none}
        & .btn-search:focus{box-shadow: none !important;}
    }
    @media (width <= 1024px) {
        padding-top: 70px;
        padding-bottom: 30px;
        & .title{font-size: 28px;}
        & .category-list{gap: 24px;}
        & .category-list > li > a{font-size: 17px;}
    }
    @media (width <= 860px) {
        padding-top: 60px;
        & .title{font-size: 26px;}
        & .category-list > li > a{font-size: 16px;}
        & .searchbar {
            max-width: 360px;
            height: 48px;
            padding: 4px 4px 4px 18px;
            & input[type="text"]{font-size: 14px; padding-left: 24px; background-size: 18px auto}
            & .btn-search {width: 92px; font-size: 14px;}
        }

    }
    @media (width <= 640px) {
        padding-bottom: 25px;
        gap: 26px;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        &.s01{align-items: flex-start;}
        & .category{translate: 0;}
        & .category-list > li > a:not(.active){font-size: 15px; color: #aaa;}
        & .searchbar {max-width: 100%;}
    }
}
.list-filters01{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    & .sel-friends01{
        & .btn-round{padding-left: 0; border-color: transparent; transition: padding-left .2s ease-out;}
        & .btn-round::after{right: 51px;}
        & .btn-round.show{padding-left: 28px; border-color: var(--basic-color);}
        & .btn-round.show::after{right: 23px;}
    }
    @media (width <= 640px) {
        & .sel-region .btn-region{font-size: 15px;}
        & .sel-friends01{
            & .btn-round{width: 145px; font-size: 16px; padding: 0 20px 0 0; transition: padding-left .2s ease-out;}
            & .btn-round::after{right: 40px;}
            & .btn-round.show{padding-left: 20px; border-color: var(--basic-color);}
            & .btn-round.show::after{right: 20px;}
            & .dr-option{width: 145px; padding: 8px 20px; border-radius: 25px;}
            & .dr-option .btn-item{height: 34px; font-size: 15px;}
        }
    }
}
.detail-view{
    max-width: calc(700px + calc(var(--main-gap) * 2));
    margin: 0 auto;
    padding: 55px var(--main-gap) 20px;
    & .detail-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        height: 86px;
        & .title{flex: 1; min-width: 0; display: flex; align-items: center;}
        & .title strong{display: block; font-size: 30px; font-weight: 400; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
        & .title button{position: relative;display: flex; align-items: center; padding-right: 15px;}
        & .title img{width: 20px;}
        & .detail-utils{display: flex; justify-content: flex-end; align-items: center;}
        & .detail-utils .end-day{font-family: 'jaf-domus-titling-web', 'Pretendard', sans-serif; letter-spacing: 0; font-size: 22px; font-weight: bold; color: var(--point-color01);}
        & .detail-utils .separate{position: relative; top: -1px; width: 1px; height: 22px; background-color: #eaeae2; margin: 0 19px;}
        & .detail-utils .btn-share{font-size: 0; width: 22px; aspect-ratio: 22 / 26; background: url('../img/common/ico_share01.png') no-repeat center / 100% auto;}
    }
    & .detail-content{font-size: 16px; line-height: 24px;}
    & .detail-content img{max-width: 100%;}
    & .detail-bottom{margin-top: 70px;}
    & .button-group{display: flex; gap: 14px;}
    & .button-group .btn-action{flex: 1; }
    & .button-group .btn-share{width: 60px; border: 1px solid #d6d6d6; border-radius: 50%; font-size: 0; background: #fff url('../img/common/ico_share01.png') no-repeat center calc(50% - 2px) / 22px auto;}
    @media (width <= 640px) {
        padding: 40px var(--main-gap) 20px;
        & .detail-top {
            height: 70px;
            gap: 4px;
            & .title strong{font-size: 22px;}
            & .title button{padding-right: 8px;}
            & .title img{width: 18px;}
            & .detail-utils .btn-share{width: 18px}
            & .detail-utils .end-day{font-size: 20px;}
            & .detail-utils .separate{background-color: transparent; margin: 0 6px;}
        }
        & .detail-bottom{margin-top: 34px;}
        & .button-group .btn-action{height: 54px;}
        & .button-group .btn-share{width: 54px;}
    }
}
.pg-list {
    & .search-container{position: relative; top: auto;}
    & .list-container{margin-top: 8px; padding-bottom: 80px;}
    & .list-card > ul{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 38px 24px;}
    & .list-card .empty-data{grid-column: span 3;}

    @media (width <= 1024px) {
        & .list-card > ul{grid-template-columns: repeat(2, minmax(0, 1fr));}
        & .list-card .empty-data{grid-column: span 2;}
    }
    @media (width <= 640px) {
        & .list-container{padding-bottom: 60px;}
        & .list-card > ul{grid-template-columns: minmax(0, 1fr); gap: 30px;}
        & .list-card .empty-data{grid-column: span 1;}
    }
}

/* ==========================================================================
    Only Sukha
    ========================================================================== */
.only-visual{
    position: relative;
    width: 100%;
    color: #fff;
    overflow: hidden;
    & .only-vis{position: relative; width: 100%; height: 100vh; overflow: hidden}
    & .only-vis .bg{position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%;}
    /*& .only-vis .move01{animation: move01 15s ease-in-out forwards;}*/
    /*& .only-vis .move02{animation: move02 15s ease-in-out forwards;}*/
    & .static-text{position: absolute; left: 0; top: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; text-align: center;  z-index: 1; user-select: none; pointer-events: none;}
    & .static-wrapper{position: relative; top: -30px;}
    & .static-text .main-text{font-family: 'jaf-domus-titling-web', 'Pretendard', sans-serif; letter-spacing: 0; font-size: 52px; font-weight: bold; color: #fff;}
    & .static-text .sub-copy{position: relative; margin-top: 15px;}
    & .static-text .sub-copy img{width: 281px;}
    & .static-text .coming-line{width: 1px; height: 0; background-color: rgba(255,255,255,.3); margin: 0 auto;}
    & .static-text .coming-text{display: none; position: relative; font-family: 'jaf-domus-titling-web', 'Pretendard', sans-serif; letter-spacing: 0; font-size: 32px; font-weight: bold; color: #fff;}
    & .static-text .main-text{opacity: 0; animation: fadeUp .5s ease-in-out forwards .2s;}
    & .static-text .sub-copy{opacity: 0; animation: fadeUp .5s ease-in-out forwards .5s;}
    & .static-text .coming-line{opacity: 0; animation: growUp .6s ease-in-out forwards .9s;}
    & .static-text .coming-text{opacity: 0; animation: fadeEffect .6s ease-in-out forwards 1.4s;}
    & .swiper-wrapper{transition-timing-function: ease-out;}
    & .swiper-pagination-bullets{bottom: 45px; display: flex; justify-content: center; align-items: center;}
    & .swiper-pagination-bullet{position: relative; width: 20px; height: 20px; border:1px solid transparent; background-color:transparent; opacity:1; margin: 0}
    & .swiper-pagination-bullet::after{content: ""; display: block; position: absolute; left: calc(50% - 3px); top: calc(50% - 3px); width: 6px; height: 6px; background-color: #fff; border-radius: 3px;}
    & .swiper-pagination-bullet-active{border-color: #fff;}
    & .swiper-pagination-bullet-active::after{background-color: #fff;}
    /*준비중*/
    .coming & {
        & .static-wrapper{top: -20px;}
        & .static-text .main-text{font-size: 42px;}
        & .static-text .sub-copy{padding-bottom: 75px;}
        & .static-text .coming-text{display: block; padding-top: 75px;}
    }
    @media (width <= 1024px) {
        & .static-text .main-text{font-size: 48px;}
        & .static-text .sub-copy{margin-top: 13px;}
        & .static-text .sub-copy img{width: 270px;}
        .coming & {
            & .static-text .sub-copy{padding-bottom: 55px;}
            & .static-text .coming-text{padding-top: 55px;}
        }
    }
    @media (width <= 860px) {
        & .static-text .main-text{font-size: 43px;}
        & .static-text .sub-copy{margin-top: 12px;}
        & .static-text .sub-copy img{width: 254px;}
    }
    @media (width <= 640px) {
        & .only-vis{height: 100svh;}
        & .static-wrapper{top: -10px;}
        & .static-text .main-text{font-size: 40px;}
        & .static-text .sub-copy img{width: 230px;}
        & .swiper-pagination-bullets{bottom: 40px;}
        .coming & {
            & .static-wrapper{top: 10px;}
            & .static-text .main-text{font-size: 36px;}
            & .static-text .sub-copy img{width: 220px;}
            & .static-text .sub-copy{padding-bottom: 40px;}
            & .static-text .coming-text{font-size: 26px; padding-top: 40px;}
        }
    }
}
@keyframes growUp {
    from {opacity: 0; height: 0;}
    to {opacity: 1; height: 243px;}
}
@media (width <= 1024px) {
    @keyframes growUp {
        from {opacity: 0; height: 0;}
        to {opacity: 1; height: 180px;}
    }
}
.only-sukha {
    & header {
        padding-top: 15px;
        transition: .3s ease-out;
        &.fixed{padding-top: 0;}
        & .inner-header{display: none;}
        & .inner-header.only{display: flex; border-top: 0;}
        & .bg-header{position: absolute; top: 0; width: 100%; height: 100%; max-height: calc( var(--header-height) + 15px);}
    }
    & footer .logo-f{display: none;}
    & .sub_container{padding-top: 0;}
    & .text-section {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 80vh;
        text-align: center;
        & .obj-friends01{mix-blend-mode: multiply;}
        & .obj-friends01 img{width: 430px;}
        & .text-wrap p {font-family: 'SCDream', sans-serif; font-size: 46px; font-weight: 100; line-height: 72px; letter-spacing: 0; word-break: keep-all;}
        & .highlight {position: relative; font-weight: 600;}
        & .highlight::after {content: ""; position: absolute; bottom: 2px; left: 0; width: 0; height: 26px; background: var(--point-color01); z-index: -1;}
        & .text-wrap p {opacity: 0;}
        & .highlight::after {transition: .6s ease-out;}
        & .first-hl::after {transition-delay: 1.1s;}
        & .second-hl::after {transition-delay: 1.9s;}
        & .obj-friends01{opacity: 0;}
        &.active {
            & .highlight::after{width: 100%;}
            & .text-wrap p{animation: fadeUp 1.1s ease-out forwards .1s;}
            & .obj-friends01 {animation: fadeUp .6s ease-out forwards .2s;}
        }
    }
    & .stay-section {padding-top: 200px;}
    & .list-card > ul{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 86px;}
    & .list-card .empty-data{grid-column: span 3;}
    & .guide-text-container {
        margin-top: 112px;
        padding-bottom: 120px;
        & .refer-text p{font-size: 14px; line-height: 20px; word-break: keep-all; padding-left: 10px; text-indent: -10px;}
        & .refer-text p:not(:last-child){margin-bottom: 12px;}
        & .guide-title{font-size: 18px; font-weight: bold; letter-spacing: 0; line-height: 1.3; margin-bottom: 23px;}
        & .guide-list p{color: #777; }
        & .guide-list p::before{content: "• ";}
        & .bottom-text{padding-top: 29px; border-top: 1px solid #ede7da; margin-top: 30px;}
        & .bottom-text p{color: var(--point-color01);}
        & .bottom-text p::before{content: "* ";}
    }
    & #content:has(.coming){padding-bottom: 0;}

    @media (width <= 1420px) {
        & .text-section {
            & .text-wrap p {font-size: 42px; line-height: 64px;}
            & .highlight::after{height: 23px}
        }
        & .list-card > ul{gap: var(--main-gap);}
    }
    @media (width <= 1200px) {
        & .text-section {
            & .obj-friends01 img{width: 400px;}
            & .text-wrap p {font-size: 36px; line-height: 56px;}
            & .highlight::after{height: 18px}
        }
    }
    @media (width <= 1024px) {
        & .text-section {
            & .obj-friends01 img{width: 370px;}
            & .text-wrap p {font-size: 32px; line-height: 51px;}
            & .highlight::after{height: 17px}
        }
        & .list-card > ul{grid-template-columns: repeat(2, minmax(0, 1fr));}
        & .list-card .empty-data{grid-column: span 2;}
    }
    @media (width <= 860px) {
        & footer .inner-footer{padding-top: 40px}
        & .text-section {
            & .obj-friends01 img{width: 300px;}
            & .text-wrap p {font-size: 24px; line-height: 47px;}
            & .highlight::after{height: 13px}
        }
    }
    @media (width <= 640px) {
        & .text-section {
            & .obj-friends01 img{width: 280px;}
        }
        & .list-card > ul{grid-template-columns: minmax(0, 1fr); gap: 30px;}
        & .list-card .empty-data{grid-column: span 1;}
        & .guide-text-container {margin-top: 90px; padding-bottom: 80px;}
    }
}
/* ==========================================================================
    약관 등
    ========================================================================== */
.pg-terms{
    & .sub_tit {padding: 70px 0 40px;}
    & .sub_tit .wrap{margin: 0; text-align: left}
    & .sub_tit strong{display: flex; align-items: center; gap: 13px; font-size: 18px; font-weight: bold; letter-spacing: 0; line-height: 1.25; margin-bottom: 0; white-space: nowrap;}
    & .sub_tit strong::after{content: ""; flex: 1; display: block; width: 100%; height: 1px; background-color: #dddad3;}
    & .guide .terms-text{font-size: 15px; color: #666; line-height: 27px;}
    & .guide .terms-text strong{color: #222;}
    & .guide .terms-text .table01{margin-top: -15px;}
    @media (width <= 1024px) {
        &#content{padding-bottom: 0}
    }
    @media (width <= 860px) {
        & .sub_tit {padding: 60px 0 40px;}
    }
}

/*준비중*/
.empty-data{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
    color: #999;
    line-height: 30px;
    & p{display: inline-block; padding-top: 42px; background: url("/assets/site/img/common/quote01.png") no-repeat center 0 / 36px auto;}
    @media (width <= 860px) {
        height: 300px;
    }
    @media (width <= 640px) {
        height: 240px;
        font-size: 15px;
    }
}

/* ==========================================================================
    호스트관리자
    ========================================================================== */
/*풀캘린더 수정*/
.sukha-fc.fc {
    & .fc-daygrid-day-frame{overflow: hidden !important;}
    &.fc-theme-standard td,
    &.fc-theme-standard th{height: 52px;}
    &.fc-theme-standard th{vertical-align: middle;}
    & .fc-daygrid-day{position: relative;}
    /*& .fc-daygrid-day.fc-day-today{background-color: #f6efe5;}*/
    & .fc-daygrid-day.fc-day-today{background-color: transparent;}
    & .fc-daygrid-day.fc-day-today::after{content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; outline: 1px solid #000;}
    &.fc-theme-standard td.active{background-color: #ffc600;}
    & .fc-daygrid-day-number{font-family: 'jaf-domus-titling-web', 'Pretendard', sans-serif; font-size: 12px; font-weight: 600; padding: 5px 9px;}
    & .fc-daygrid-body-unbalanced .fc-daygrid-day-events{min-height: 0; font-size: 12px; text-align: center;}
    & .fc-col-header{font-size: 13px; color: #999;}
    & .fc-toolbar.fc-header-toolbar{margin-bottom: 10px}
    & .fc-toolbar-title{font-size: 16px; font-weight: bold}
    & .fc-button-primary{font-size: 17px; border: 0; padding: 0; background-color: transparent !important;}
    & .fc-button .fc-icon{width: auto; height: 30px; color: var(--basic-color);}
    & .price-label p:first-child::after{content: ".";}
    & .fc-daygrid-day:has(.sukhastay){background-color: #f3df8e;}
    & .fc-daygrid-day:has(.bookings){background-color: #a9e2c2;}
}

/*레이아웃*/
html:has(.host-admin),
.host-admin{height: 100%; background-color: var(--bg-color);}
.host-admin {
    & header {
        & .inner-header {display: none;}
        & .inner-header.host {display: flex; border-top: 0;}
    }
    & footer {display: none;}
    #content{padding-bottom: calc(var(--fixed-bottom-height) + 30px);}
    & .sub_contents{min-height: calc(100svh - var(--header-height) - var(--fixed-bottom-height) - 30px);}
    /*캘린더 모달*/
    & .ui-dialog {
        padding: 0;
        border-radius: 16px;
        &.ui-widget.ui-widget-content{border: 0;}
        & .ui-dialog-titlebar{display: flex; align-items: center; height: 56px;  border: 0; padding: 0 20px; background-color: transparent;}
        & .ui-dialog-title{font-size: 16px; font-weight: bold;}
        & .ui-dialog-titlebar-close {right: 12px; top: 12px; width: 28px; height: 28px; margin: 0; padding: 0; background: url("/assets/site/img/common/ico_modalx02.png") no-repeat center / 28px auto;}
        & .ui-dialog-content{padding: 0 20px;}
        & .booking-view{max-height: 400px; overflow-y: auto;}
        & .setting-list .selection-bar{width: 160px;}
        & .setting-list .s-item{width: 76px;}
        & .setting-list .form-ip{height: 41px; font-size: 14px; background-color: #fff;border-radius: 4px;}
        & .ui-dialog-buttonpane{padding: 20px 20px 26px; border-radius: 0 0 16px 16px; border-top: 0; margin-top: 0;}
        & .ui-dialog-buttonpane .ui-dialog-buttonset{float: none; display: flex; justify-content: center; gap: 8px;}
        & .ui-dialog-buttonpane button{flex: 1; margin: 0; display: inline-flex; justify-content: center; align-items: center; border: 1px solid var(--border-color02); width: 120px; height: 38px; font-size: 15px; font-weight: bold; color: #999; background-color: transparent; border-radius: 25px; text-transform: uppercase;}
        & .ui-dialog-buttonpane button:first-child{color: var(--point-color01); border-color: var(--basic-color); background-color: var(--basic-color);}
    }
    @media (width <= 1024px) {
        & header .lnb .link-only{display: none;}
    }
    @media (width <= 640px) {
        & .ui-dialog .booking-view{max-height: 300px;}
    }
}
.host-title-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 68px;
    padding-top: 5px;
    border-bottom: 1px solid var(--basic-color);
    & .title{display: flex; align-items: center; font-size: 18px; font-weight: bold;}
    & .title strong{display: flex; align-items: center; font-size: 16px; white-space: nowrap; }
    & .title strong:not(:last-child)::after{content: ""; position: relative; top: -1px; display: block; width: 7px; aspect-ratio: 14 / 26; background: url('../img/common/arr13.png') no-repeat 0 0 / 100% auto; margin: 0 11px;}
    & .title button{position: relative; top: -1px; display: flex; align-items: center; padding-right: 12px;}
    & .title img{width: 16px;}
    & .btn-refresh button{padding: 6px 0 6px 14px;}
    & .btn-refresh img{width: 19px;}
}
.btn-back-list {
    display: flex;
    align-items: center;
    height: 52px;
    & .btn-back{display: inline-flex; align-items: center; gap: 13px;}
    & img{position: relative; top: -1px; width: 16px;}
}
/*Bottom Bar*/
.host-bottom-bar {
    position: fixed;
    width: 100%;
    bottom: 0;
    z-index: 200;
    & .bottom-bar{padding-bottom:calc(constant(safe-area-inset-bottom) + 1px); padding-bottom:calc(env(safe-area-inset-bottom)); border-top:1px solid #222; background-color:#fff}
    & .bottom-bar > ul{display: flex;}
    & .bottom-bar > ul > li{flex: 1;}
    & .item-nav{display: flex; justify-content: center; align-items: center; width: 100%; height: var(--fixed-bottom-height); text-align: center;}
    & .item-nav > span{display: block; font-size: 12px; min-width: 23px; padding-top: 28px;}
    & .item-nav .ico01{background: url('/assets/site/img/host/host_navbar01.png') no-repeat center 0 / 21px auto}
    & .item-nav .ico02{background: url('/assets/site/img/host/host_navbar02.png') no-repeat center 0 / 22px auto}
    & .item-nav .ico03{background: url('/assets/site/img/host/host_navbar03.png') no-repeat center 0 / 21px auto}
    & .item-nav .ico04{background: url('/assets/site/img/host/host_navbar04.png') no-repeat center 0 / 21px auto}
    & .item-nav .ico05{background: url('/assets/site/img/host/host_navbar05.png') no-repeat center 0 / 23px auto}
    & .item-nav .ico06{background: url('/assets/site/img/host/host_navbar06.png') no-repeat center 0 / 23px auto}
    & .item-nav.active{background-color: var(--point-color01);}
    @media (width <= 860px) {
        display: block;
    }
}
/*기간검색*/
.host-date-range {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-color02);
    & .date-box{position: relative;}
    & .ico-calendar::after{content: ""; position: absolute; top: 10px; right: 11px; display: block; width: 19px; aspect-ratio: 1 / 1; background: url('/assets/site/img/common/ico_calendar03.png') no-repeat right center / 100% auto; pointer-events: none; z-index: 5}
    & .date-separator{font-size: 14px; text-align: center}
    & .form-ip[type="date"]{position: relative; width: 100%; color: transparent; line-height: 39px; text-align: left; z-index: 2; padding: 0 12px; caret-color: transparent; box-sizing: border-box; appearance: none;}
    & .form-ip[type="date"].has-value{color: var(--basic-color); caret-color: auto;}
    & .form-ip[type="date"]::-webkit-calendar-picker-indicator{width: 60px; height: 30px; background: none; z-index: 1;appearance: none; -webkit-appearance: none;}
    & .ico-calendar:has(.has-value)::after{display: none}
}

/*예약 리스트*/
.booking-list {
    > ul{display: flex; flex-direction: column; gap: 20px;}
    & .booking-card{position: relative; padding: 18px 20px 0; border: 1px solid #ececec; border-radius: 12px; background-color: #fff; box-shadow: 3px 3px 10px 5px rgba(0,0,0,.07);}
    & .booking-name{font-size: 18px; font-weight: bold;}
    & .booking-info{margin-top: 7px;}
    & .booking-info p{font-size: 14px; color: #999; line-height: 22px;}
    & .booking-info p strong{font-weight: inherit; color: var(--basic-color);}
    & .booking-status{display: flex; justify-content: space-between; align-items: center; height: 47px; font-size: 16px; font-weight: bold; color: #bbb; border-top: 1px solid var(--border-color02); margin-top: 15px;}
    & .booking-status::after{content: ""; display: block; width: 6px; aspect-ratio: 12 / 22; background: url('/assets/site/img/common/arr14.png') no-repeat 0 0 / 100% auto;}
    & .active .booking-status,
    & .pay .booking-status{color: var(--point-color01);}
    & .refund .booking-status{color: var(--point-color02);}
    & .new::after{content: ""; position: absolute; right: 12px; top: 12px; display: block; width: 9px; height: 9px; background-color: var(--point-color02); border-radius: 50%;}
    & .box-title{font-size: 16px; font-weight: bold; padding-bottom: 10px; border-bottom: 1px solid var(--border-color02);}
    & .box-cont{padding: 20px;}
}


/*예약 상세*/
.booking-view {
    & .btn-refund{width: 178px; color: #fff; border-color: #e60000; background-color: #e60000;}
    & .booking-guest{
        padding: 17px 0 14px;
        border-bottom: 1px solid var(--border-color02);
        & .info-wrapper{display: flex; justify-content: space-between; align-items: center;}
        & .booking-name{position: relative; display: flex; align-items: flex-start; gap: 4px; font-size: 18px; font-weight: bold;}
        & .booking-status{font-size: 16px; font-weight: bold; color: #bbb;}
        &.active .booking-status,
        &.pay .booking-status{color: var(--point-color01);}
        &.refund .booking-status{color: var(--point-color02);}
        &.new .booking-name::after{content: ""; position: relative; top: -2px; width: 9px; height: 9px; background-color: var(--point-color02); border-radius: 50%;}
        & .booking-tel{font-family: 'jaf-domus-titling-web', 'Pretendard', sans-serif; letter-spacing: 0; font-size: 16px; margin-top: 9px;}
    }
    & .booking-check{
        display: flex;
        gap: 10px;
        padding: 20px 0 15px;
        border-bottom: 1px solid var(--border-color02);
        & .col-check{flex: 1; text-align: center}
        & .date{display: none; font-family: 'jaf-domus-titling-web', 'Pretendard', sans-serif; letter-spacing: 0; font-size: 14px; color: #999; margin-top: 9px;}
        & .active .button04{color: var(--basic-color);}
        & .active .c-in{border-color: var(--point-color01); background-color: var(--point-color01);}
        & .active .c-out{border-color: #00c5c5; background-color: #00c5c5;}
        & .active .date{display: block;}
    }
    & .bookings-table01{
        & .t-group{padding: 12px 0; border-bottom: 1px solid var(--border-color02);}
        & .t-row{align-items: center; padding-top: 4px; padding-bottom: 4px; border-bottom: 0; gap: 14px; white-space: nowrap;}
        & .t-item{color: #777;}
        & .t-item strong{color: var(--basic-color);}
        & .t-vl{color: var(--basic-color);}
        & .t-qty{width: 20px; text-align: center; margin-left: auto; margin-right: 24px;}
        & .c-warn{color: var(--point-color02);}
    }
    & .booking-confirm {
        padding: 20px 0 3px;
        & .button04{border-color: var(--basic-color); color: var(--basic-color);}
        & .active .button04{border-color: var(--basic-color); color: var(--point-color01); background-color: var(--basic-color);}
    }
    & .btn-save .button04{color: var(--point-color01); border-color: var(--basic-color); background-color: var(--basic-color);}
}
/*객실 상세*/
.setting-list {
    & .setting-row{display: flex; align-items: center; height: 55px; border-bottom: 1px solid var(--border-color02);}
    & .setting-col{flex: 1; display: flex; align-items: center;}
    & .s-item{width: 78px; font-size: 14px; color: #777;}
    & .s-vl{flex: 1; display: flex; justify-content: flex-end; font-size: 14px;}
    & .s-vl strong{font-size: 16px; color: var(--basic-color);}
    & .dv-row{gap: 6px;}
    & .dv-row select{width: 120px; background-position: calc(100% - 10px) center; background-size: 10px auto;}
    & .dv-row input{flex: 1;}
    & .setting-row.is-column {
        flex-direction: column;
        align-items: stretch;
        height: auto;
        padding-top: 9px;
        padding-bottom: 6px;
        > .s-item{width: 100%; margin-bottom: 8px;}
        & .s-vl{justify-content: flex-start;}
        & .setting-col{gap: 10px;}
        & .setting-col.wide{flex: 1 1 68px;}
        & .setting-col .s-item{width: auto; color: var(--basic-color);}
    }
    & .has-col{gap: 20px;}
    & .searchbar {
        & input[type="text"]{font-size: 14px; font-weight: 400; padding: 0 0 0 12px;}
        & button{width: 62px; font-size: 14px;  font-weight: 400; background: #666; border-radius: 4px;}
    }
    & .selection-bar {
        display: block;
        width: 186px;
        height: auto;
        border: 0;
        border-radius: 0;
        background-color: transparent;
        box-shadow: none;
        z-index: 0;
        & .select-group{display: grid; grid-template-columns: repeat(2, 1fr); gap: 0}
        & .select-group .form-chk01 label{font-family: 'Pretendard', sans-serif; font-size: 14px; font-weight: 400; padding-left: 4px;}
    }
    + .btn-save{margin-top: 20px;}
}
.latest {
    & .latest-item{padding-top: 10px; padding-bottom: 10px;}
    & .latest-item:not(:last-child){border-bottom: 1px solid #e9e6de;}
    & .latest-item .title > a{font-size: 16px; line-height: 24px; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2;}
    & .latest-item .date{font-size: 12px; color: #999; margin-top: 7px;}
}
/*Host 전체*/
.pg-host {
    letter-spacing: 0;
    & .form-ip{height: 41px; font-size: 14px; padding: 0 0 0 12px; background-color: #fdfbf8; border-radius: 4px;}
    & .form-ip.vl-c{padding: 0 4px;}
    & .form-ip.vl-r{padding: 0 12px 0 0;}
    & .host-box {max-width: 640px; margin: 0 auto; padding-left: var(--main-gap); padding-right: var(--main-gap);}
    & .host-box .box-section{padding-top: 28px; padding-bottom: 30px;}
    & .host-box .box-section.pd0{padding-bottom: 0;}
    & .host-box .box-section:not(:last-child){border-bottom: 1px solid var(--border-color02);}
    & .host-box .box-section .tit-sec{display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;}
    & .host-box .box-section .tit-sec .title{font-size: 18px; font-weight: bold;}
    & .host-box .box-section .tit-sec .btn-more{font-size: 12px; color: #999;}
    & .host-box .box-section .tit-sec .btn-more a{padding: 5px 0 5px 5px;}
    & .searchbar-container{
        display: flex;
        gap: 6px;
        padding-top: 20px;
        & .searchbar04{flex: 1;}
        & .btn-refresh{font-size: 0; width: 44px; height: 44px; background: #000 url('/assets/site/img/common/ico_refresh01.png') no-repeat center / 18px auto; border-radius: 50%;}
    }
    & .booking-nav{
        margin-left: calc(var(--main-gap) * -1 );
        margin-right: calc(var(--main-gap) * -1 );
        & .nav-wrapper{padding: 20px var(--main-gap) 15px;}
        & .b-nav-item{width: auto; font-size: 18px; font-weight: bold; color: #999; line-height: 40px;}
        & .b-nav-item a{display: flex; align-items: center; gap: 5px;}
        & .b-nav-item span{display: flex; justify-content: center; align-items: center; width: 16px; height: 16px; font-family: 'jaf-domus-titling-web', 'Pretendard', sans-serif; font-size: 11px; font-weight: 400; color: #fff; background-color: #bbb; border-radius: 2px;}
        & .b-nav-item.active{color: var(--basic-color);}
        & .b-nav-item.active span{background-color: var(--point-color02);}
    }
    & .select-round{
        padding: 24px 0 8px;
        > ul{display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 4px; width: 100%;}
        & .round-item{display: flex; justify-content: center; align-items: center; width: 100%; height: 38px; border: 1px solid #e4e4e4; border-radius: 19px; font-size: 14px; font-weight: bold; color: #999; background-color: #fff;}
        & .round-item.active{color: var(--point-color01); border-color: var(--basic-color); background-color: var(--basic-color);}
    }
    & .sukha-fc{margin-top: 24px;}
}
/*개별페이지*/
.host-setting .s-item{width: 96px;}
.host-settlement .select-round{padding: 20px 0;}
.host-home .booking-nav .b-nav-item{line-height: 1;}
.host-home .booking-nav .nav-wrapper{padding: 7px var(--main-gap) 16px;}
.host-board{
    & .bo_top{display: none;}
    & .bo_basic_list{border: 0; font-size: 15px;}
    & .bo_basic_list th{border-color: var(--border-color02); background-color: transparent;}
    & .bo_basic_list tbody tr:hover{background-color: transparent;}
    & .bo_basic_view > table{border-top: 0;}
    & .bo_basic_view th span.tit{max-width: calc(100% - 60px); width: 100%; font-size: 17px; line-height: 24px; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 3;}
    & .bo_basic_view th span.date{font-size: 13px;}
    & .form_wrap .form_table{background-color: transparent}

    & .form_wrap .form_table{table-layout: auto; border-top: 0}
    & .form_wrap .form_table tbody tr {display: block; padding: 19px 0;}
    & .form_wrap .form_table tbody tr th{display: block; width: 100%; background-color: transparent; padding: 0 0 0.5rem 0;}
    & .form_wrap .form_table tbody tr th label {line-height: 1; font-size: 14px; font-weight: 400; color: #777;}
    & .form_wrap .form_table tbody tr th span {line-height: 1;}
    & .form_wrap .form_table tbody tr td{display: block; width: 100%; padding: 0;}
    & .form_wrap .form_table .form-control{height: 41px; font-size: 14px; padding: 0 0 0 12px; background-color: #fdfbf8; border-radius: 4px;}
    & .board_area .btn_wrap .btn{min-width: 84px; width: auto; font-size: 14px; line-height: 38px; padding: 0 16px;}
    & .form_wrap .form_table .note-editor{background-color: #fdfbf8}
    & .form_wrap .form_table .note-editor img{max-width: 100%;}
    @media (width <= 640px) {
        & .bo_basic_list tbody tr{padding: 18px 0;}
        & .bo_basic_list tbody td.tdb span.new{display: none;}
        & .bo_basic_list tbody td.tdb a{max-width: 100%; white-space: initial; display: -webkit-box;  -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 23px;}
        & .bo_basic_list tbody td.tdc{font-size: 12px;}
        & .bo_basic_list tbody td.tdc::after,
        & .bo_basic_list tbody td.tdd{display: none}
        .bo_basic_view > table th{padding: 18px 0;}
        & .bo_basic_view th span.tit{display: block; float: none; max-width: 100%;}
        & .bo_basic_view th span.date{display: block; float: none; text-align: left; font-size: 12px; margin-top: 4px;}
    }
}