@charset "utf-8";

:root {
    /* main color */
    --color-main:#2F5D50;
    --color-main-hover:#254A40;
    --color-main-rgb: 74, 103, 65;
    --color-sub:#C8B99D;
    --color-red:#C0392B;

    /* base color */
    --color-white:#FFFFFF;
    --color-white-rgb:255,255,255;
    --color-black:#1E2321;
    --color-black-rgb:30,35,33;

    /* background */
    --bg-main-1:#EFEFEA;
    --bg-main-2:#F7F7F4;

    --bg-section-1:#F7F7F4;
    --bg-section-2:#1E2321;
    --bg-section-3:#26312D;

    /* static color */
    --static-1:#C8B99D;
    --static-2:#E5DED2;
    --static-3:#2F5D50;

    /* text color */
    --text-main:#1E2321;
    --text-2:#4E5652;
    --text-3:#7A837E;
    --text-4:#2F5D50; 
    --text-5:#B8AA8E;
    --text-6:#F5F5F2;
    --text-disabled:#BFC4BE;

    /* border */
    --border-1:#DADDD6;
    --border-2:#C9C0AD;
    --border-3:#3A423E;

    /* font family */
    --font-body:"Pretendard", sans-serif;

    /* font size */
   --fs-72:clamp(42px,5vw,72px);
   --fs-64:clamp(40px,4.44vw,64px);
   --fs-56:clamp(34px,3.89vw,56px);
   --fs-48:clamp(32px,3.33vw,48px);
   --fs-42:clamp(30px,2.92vw,42px);
   --fs-40:clamp(28px,2.78vw,40px);
   --fs-36:clamp(28px,2.5vw,36px);
   --fs-32:clamp(24px,2.22vw,32px);
   --fs-30:clamp(22px,2.08vw,30px);
   --fs-24:clamp(20px,1.67vw,24px);
   --fs-22:clamp(18px,1.53vw,22px);
   --fs-20:clamp(18px,1.39vw,20px);
   --fs-18:clamp(16px,1.25vw,18px);
   --fs-16:clamp(15px,1.11vw,16px);
   --fs-15:clamp(13px,1.04vw,15px);
   --fs-14:clamp(12px,0.97vw,14px);
   --fs-14:clamp(12px,0.97vw,14px);
   --fs-13:clamp(11px,0.9vw,13px);
   --fs-12:clamp(10px,0.83vw,12px);

    /* shadow */
    --shadow-sm:0 2px 8px 0 rgba(28,28,26,.04);
    --shadow-md:0 2px 16px 0 rgba(28,28,26,.08);
    --shadow-lg:0 8px 32px 0 rgba(28,28,26,.12);

    /* transition */
    --transition: all 0.3s ease;
    --transition-fast: all 0.2s ease;
    --transition-slow: all 0.5s ease;
    
}

/* ==================================================
   LAYOUT
================================================== */
.inner-l {width:calc(100% - 40px); max-width:1520px; margin:0 auto;}
.inner {width:calc(100% - 40px); max-width:1320px; margin:0 auto;}
.inner-s {width:calc(100% - 40px); max-width:860px; margin:0 auto;}


/* ==================================================
   FONT FAMILY
================================================== */
.font-body {font-family:var(--font-body);}


/* ==================================================
   FONT SIZE
================================================== */

.fs-72 {font-size:var(--fs-72) !important;}
.fs-64 {font-size:var(--fs-64) !important;}
.fs-56 {font-size:var(--fs-56) !important;}
.fs-48 {font-size:var(--fs-48) !important;}
.fs-40 {font-size:var(--fs-40) !important;}
.fs-36 {font-size:var(--fs-36) !important;}
.fs-32 {font-size:var(--fs-32) !important;}
.fs-30 {font-size:var(--fs-30) !important;}
.fs-24 {font-size:var(--fs-24) !important;}
.fs-22 {font-size:var(--fs-22) !important;}
.fs-20 {font-size:var(--fs-20) !important;}
.fs-18 {font-size:var(--fs-18) !important;}
.fs-16 {font-size:var(--fs-16) !important;}
.fs-14 {font-size:var(--fs-14) !important;}
.fs-13 {font-size:var(--fs-13) !important;}
.fs-12 {font-size:var(--fs-12) !important;}


/* ==================================================
   FONT WEIGHT
================================================== */
.fw-300 {font-weight:300 !important;}
.fw-400 {font-weight:400 !important;}
.fw-500 {font-weight:500 !important;}
.fw-600 {font-weight:600 !important;}
.fw-700 {font-weight:700 !important;}


/* ==================================================
   LINE HEIGHT
================================================== */

.lh-12 {line-height:1.2;}
.lh-13 {line-height:1.3;}
.lh-14 {line-height:1.4;}
.lh-15 {line-height:1.5;}
.lh-16 {line-height:1.6;}
.lh-17 {line-height:1.7;}
.lh-18 {line-height:1.8;}


/* ==================================================
   TEXT COLOR
================================================== */

.color-main {color:var(--color-main) !important;}
.text-main {color:var(--text-main) !important;}
.text-1 {color:var(--text-1) !important;}
.text-2 {color:var(--text-2) !important;}
.text-3 {color:var(--text-3) !important;}
.text-4 {color:var(--text-4) !important;}
.text-5 {color:var(--text-5) !important;}
.text-6 {color:var(--text-6) !important;}
.text-disabled {color:var(--text-disabled) !important;}
.text-white {color:var(--color-white) !important;}


/* ==================================================
   BACKGROUND
================================================== */

.bg-main-1 {background:var(--bg-main-1);}
.bg-main-2 {background:var(--bg-main-2);}

.bg-section-1 {background:var(--bg-section-1);}
.bg-section-2 {background:var(--bg-section-2);}
.bg-section-3 {background:var(--bg-section-3);}

.bg-static-1 {background:var(--static-1);}
.bg-static-2 {background:var(--static-2);}
.bg-static-3 {background:var(--static-3);}


/* ==================================================
   BORDER
================================================== */

.border-1 {border:1px solid var(--border-1);}
.border-2 {border:1px solid var(--border-2);}

/* ==================================================
   SHADOW
================================================== */

.shadow-sm {box-shadow:var(--shadow-sm);}
.shadow-md {box-shadow:var(--shadow-md);}
.shadow-lg {box-shadow:var(--shadow-lg);}

/* ==================================================
   SPACING
================================================== */

.pd-180 {padding: 180px 0;}
.pd-130 {padding: 130px 0;}
.pd-120 {padding: 120px 0;}
.pd-100 {padding: 100px 0;}
.pd-80 {padding: 80px 0;}
.pd-20 {padding: 20px;}

.line {display: block; width: 100%; height: 1px; background-color: var(--border-1);}


/* ==================================================
   TYPOGRAPHY
================================================== */

.hero-title {font-size:var(--fs-64); font-weight:700; line-height:1.2; letter-spacing:-0.02em; word-break: keep-all;}
.section-title {font-size:var(--fs-42); font-weight:500; line-height:1.3; letter-spacing:-0.02em; word-break: keep-all;}
.sub-title {font-size:var(--fs-30); font-weight:500; line-height:1.4; letter-spacing:-0.01em; word-break: keep-all;}
.card-title { font-size:var(--fs-22); font-weight:600; line-height:1.4; text-transform:uppercase; letter-spacing:-0.01em; word-break: keep-all;}
.body-lg { font-size:var(--fs-18); font-weight:400; line-height:1.6; word-break: keep-all;}
.body-md { font-size:var(--fs-16); font-weight:400; line-height:1.6; word-break: keep-all;}
.body-sm { font-size:var(--fs-15); font-weight:400; line-height:1.5; word-break: keep-all;}
.eyebrow { font-size:var(--fs-14); font-weight:500; line-height:1.5; letter-spacing:0.2em; text-transform:uppercase; word-break: keep-all;}

.text-align-l {text-align: left;}
.text-align-r {text-align: right;}
.text-align-c {text-align: center;}

/* ==================================================
   BUTTON SIZE
================================================== */
.btn-wrap {display: flex; align-items: center; column-gap: 10px;}
.btn-wrap.center {justify-content: center;}
.btn {display:inline-flex; justify-content:center; align-items:center; height: fit-content; font-family:var(--font-body); column-gap: 10px; transition: var(--transition); cursor:pointer;}
.btn-xl {padding: 18.5px 28px; font-size:var(--fs-16); font-weight: 500; border-radius:12px;}
.btn-lg {padding:18.5px 28px; font-size:var(--fs-16); font-weight: 600; border-radius:4px;}
.btn-md {padding:14px 24px; font-size:var(--fs-15); font-weight: 500; border-radius:4px;}
.btn-sm {padding:9px 16px; font-size:var(--fs-14); border-radius:4px;}
.btn-xs {padding:4px 10px; font-size:var(--fs-13); border-radius:9999px; font-weight: 600;}
.btn.w-100 {width: 100%;}
.btn.no-hover {cursor: default;}

.btn-primary {background:var(--color-main); border:1px solid var(--color-main); color:var(--color-white);}
.btn-primary:hover {background:var(--color-main-hover); border-color:var(--color-main-hover);}
.btn-primary.no-hover:hover {background:var(--color-main); border:1px solid var(--color-main);}
.btn-primary:disabled,
.btn-primary.disabled {background:var(--text-disabled); border-color:var(--text-disabled); color:var(--color-white); cursor:default;}

.btn-static-1 {background:var(--static-1); border:1px solid var(--static-1); color:var(--color-white);}

.btn-line {border:1px solid var(--border-1); color:var(--text-main); background-color: var(--color-white);}
.btn-line:hover {background-color: var(--bg-main-2);}
.btn-line.no-hover:hover {background-color: var(--color-white);}
.btn-line-primary {background:var(--color-main); border:1px solid var(--color-main); color:var(--color-white);}

.btn-circle {border-radius: 999px; font-size: var(--fs-15); color: var(--text-2);}

.btn-kakao {background-color: #FFE202;}

.btn-dark {background:var(--text-main); border:1px solid var(--text-main); color:var(--color-white);}
.btn-dark:hover {background:var(--static-3); border-color:var(--static-3);}
.btn-dark:disabled,
.btn-dark.disabled {background:var(--text-disabled); border-color:var(--text-disabled); color:var(--color-white); cursor:default;}
.btn-dark-line {background:transparent; border:1px solid var(--text-main); color:var(--text-main);}
.btn-dark-line:hover {background-color: rgba(var(--color-main-rgb).2);}
.btn-dark-line:disabled,
.btn-dark-line.disabled {border-color:var(--border-1); color:var(--text-2); cursor:default;}

.btn-white {background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.5); color:var(--color-white);}
.btn-white:hover {background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.85);}

.btn-line-red {border:1px solid var(--color-red); color: var(--color-red);}

.btn.sold {background-color: #FCEBEC; border: 1px solid #E9A6AB; color: #C43D45;}
.btn.available {background-color: #E8F5EE; border: 1px solid #A8D5BC; color: #267A4C;}

.sold .btn {background-color: #FCEBEC; border: 1px solid #E9A6AB; color: #C43D45;}
.available .btn {background-color: #E8F5EE; border: 1px solid #A8D5BC; color: #267A4C;}

/* ==================================================
   INPUT
================================================== */
.input-multi {display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
.input-item {display:flex; flex-direction:column; row-gap:6px;}
.input-item label {font-size: var(--fs-15);}
.input-item label .required {color:var(--color-red);}
.input-item .input-guide {font-size:var(--fs-15); line-height: 1.6; color:var(--text-3);}
.input-item input,
.input-item textarea {width: 100%; height: 46px; background-color: var(--color-white); padding: 0 14px; border: 1px solid var(--border-1); font-size: var(--fs-15); border-radius: 4px; transition: var(--transition);}
.input-item input:focus,
.input-item textarea:focus {border: 1px solid var(--color-main);}
.input-item textarea {height: 90px; padding: 12px 14px; overflow-y: scroll; -ms-overflow-style:none; scrollbar-width:none;}
.input-item textarea::-webkit-scrollbar {display:none; width:0; height:0;}
.input-item input::placeholder,
.input-item textarea::placeholder {color: var(--text-disabled);}

/* ==================================================
   ARROW BUTTON
================================================== */
.arrow-btn {display:flex; justify-content:center; align-items:center; width:32px; height:32px; border:1px solid var(--border-1); border-radius:50%; transition: var(--transition);}
.arrow-btn:hover {background:var(--bg-main-2) !important;}

/* ==================================================
   IMG SIZE
================================================== */
.img-wrap {overflow: hidden;}
.img-wrap img {width: 100%; height: 100%; object-fit: cover;}

/* ==================================================
   BULLET
================================================== */
.bullet {display: flex; column-gap: 6px; font-size: var(--fs-15); line-height: 1.6; color: var(--text-2);}
.bullet.circle-bullet span {width: 4px; height: 4px; flex-shrink: 0; background-color: var(--color-main); border-radius: 50%; display: block; margin-top: 10px;}

.bullet._bullet {color: var(--color-main); column-gap: 10px;}
.bullet._bullet span {width: 16px; height: 1px; display: block; background-color: var(--color-main); margin-top: 11px;}

/* ==================================================
   ARROW BUTTON
================================================== */
.mo-mode {display: none;}

/* ==================================================
   RESERVATION CARD
================================================== */
.booking-wrap {position: relative; display:flex; align-items:stretch; justify-content: center; width: fit-content; margin: 0 auto;}
.booking-wrap .booking-item {min-width: 250px; background: rgba(var(--color-white-rgb),.8); display:flex; flex-direction:column; row-gap: 4px; padding:16px 30px;}
.booking-wrap .booking-item:nth-of-type(1) {border-radius: 10px 0 0 10px;}
.booking-wrap .booking-label {font-size:var(--fs-15); color:var(--color-main); text-align: left;}
.booking-wrap .booking-item .booking-cal,
.booking-wrap .booking-item .booking-person {display: flex; align-items: center; justify-content: space-between; cursor: pointer;}
.booking-wrap .booking-item .booking-cal .booking-date,
.booking-wrap .booking-item .booking-person,
.booking-wrap .booking-item .booking-person > span {font-size:var(--fs-15); line-height: 1.5; color: var(--text-3);}
.booking-wrap .booking-btn {min-width: 200px; display: flex; align-items: center; justify-content: center; column-gap: 10px; flex-shrink: 0; background:var(--color-main); color:var(--color-white); font-size:var(--fs-16); font-weight:500; border-radius: 0 10px 10px 0; transition: var(--transition);}
.booking-wrap .booking-btn:hover {background:var(--color-main-hover); border-color:var(--color-main-hover);}

.common-modal {display:none; position: absolute; z-index: 9999999; max-width:520px; padding:20px; border-radius:10px; background:var(--color-white); box-shadow:var(--shadow-md);}
.common-modal.open {display:block;}
.common-dim {display:none;}
.calendar-nav.btn-wrap {margin-top: 0 !important; column-gap: 20px;}

.booking-modal {bottom: 96px; left:0; z-index: 3;}
.booking-modal .calendar-head {display:flex; justify-content:center; align-items:center; column-gap: 20px; margin-bottom:20px; text-align: left;}
.booking-modal .calendar-head .arrow-btn {flex-shrink: 0;}
.booking-modal .calendar-head .calendar-month-swiper {max-width: 80px !important; text-align: center;}
.booking-modal .calendar-month-swiper {width:auto; margin:0;}
.booking-modal .calendar-week {display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:20px;}
.booking-modal .calendar-week li {text-align:center; font-size:var(--fs-15);}
.booking-modal .calendar-week .sun {color:#E0726E;}
.booking-modal .calendar-week .sat {color:#7B9FD4;}
.booking-modal .calendar-body {display:grid; grid-template-columns:repeat(7,1fr);}
.booking-modal .calendar-day {display:flex; justify-content:center; align-items:center; height:clamp(52px,4.65vw,67px); font-size:var(--fs-15); cursor: pointer;}
.booking-modal .calendar-day.active {position: relative; color: var(--color-white); z-index: 2;}
.booking-modal .calendar-day.active::after {position: absolute; width: 34px; height: 34px; background-color: var(--static-3); border-radius: 50%; display: block; top: 50%; left: 50%; transform: translate(-50%, -50%); content: ''; z-index: -1;}
.booking-modal .calendar-day.past {opacity: 0.5;}
.booking-modal .calendar-day.empty {visibility:hidden;}
.booking-modal .calendar-bottom {display:flex; justify-content:space-between; align-items:center; margin-top:14px !important; padding-top:14px; border-top:1px solid var(--border-1);}

.person-modal {max-width: none; min-width: 400px; bottom: 96px; right: 48px; border-radius: 20px; padding: 30px 20px; z-index: 3;}
.person-modal .person-modal-head {display: flex; flex-direction: column; row-gap: 4px; text-align: left; margin-bottom:20px;}
.person-modal .person-item {display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:1px solid var(--border-1);}
.person-modal .person-info {display:flex; flex-direction:column; row-gap:1px; text-align: left;}
.person-modal .person-info strong {font-size:var(--fs-16); font-weight:500; line-height: 1.7;}
.person-modal .person-control {display:flex; align-items:center; column-gap:14px;}
.person-modal .person-count {min-width:22px; text-align:center; font-size:var(--fs-16); line-height: 1.7; font-weight:500;}
.person-modal .btn-wrap {justify-content:flex-end; padding-top:10px; margin-top: 0 !important;}


/* ==================================================
   COMMON CALENDAR
================================================== */
.common-status-wrap {position:relative; display:flex; justify-content:center; align-items:flex-start; column-gap:40px; margin-top:150px;}
.common-status-wrap .btn-wrap {display: none; margin-top: 20px !important; justify-content: flex-start !important;}
.common-status-wrap .btn-wrap li {align-items: center; padding: 3px 10px; border: 1px solid var(--border-2);  background-color: var(--bg-main-2); border-radius: 999px; color: var(--text-2);}
.common-status-wrap .btn-wrap li span {width: 6px; height: 6px; margin-top: 0;}
.common-status-wrap .btn-wrap li.available span {background-color: #4F7A45;}
.common-status-wrap .btn-wrap li.partial span {background-color: #9A7A35;}
.common-status-wrap .btn-wrap li.sold span {background-color: #D92D20;}
.common-calendar {border-radius:4px; background:var(--color-white); border: 1px solid var(--border-1); box-shadow: var(--shadow-md); padding: 20px;}
.common-calendar .calendar-month {display:flex; justify-content:center; align-items:center; column-gap: 20px; margin-bottom: 24px;}
.common-calendar .common-calendar-month-swiper {width: 100%; max-width: 100px; margin: 0;}
.common-calendar .calendar-nav {display:flex; align-items:center; column-gap:12px;}
.common-calendar .calendar-nav button {display:flex; justify-content:center; align-items:center; width:32px; height:32px; border:1px solid var(--border-1); border-radius:50%; background:var(--color-white); font-size:24px; transition: var(--transition);}
.common-calendar .calendar-week {display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:24px;}
.common-calendar .calendar-week span {text-align:center; font-size:var(--fs-15);}
.common-calendar .calendar-week .sun {color:#C0392B;}
.common-calendar .calendar-week .sat {color:#3B82F6;}
.common-calendar .calendar-grid {display:grid; grid-template-columns:repeat(7,1fr); gap:8px;}
.common-calendar .calendar-grid .day {display: flex; flex-direction: column; align-items: center; justify-content: center; height: 76px; cursor: pointer; transition: var(--transition); border-radius: 6px;}
.common-calendar .calendar-grid .day:hover {background-color: var(--bg-main-2);}
.common-calendar .calendar-grid .day.past {opacity: 0.5;}
.common-calendar .calendar-grid .day.today {border: 1px solid var(--color-main);}
.common-calendar .calendar-grid .day.selected {background-color: var(--static-3);}
.common-calendar .calendar-grid .day.selected .date {color: var(--color-white);}
.common-calendar .calendar-grid .day .date {font-size: 16px; font-weight: 500; line-height: 1.7;}


/* ==================================================
   STATUS CARD
================================================== */
.status-card {min-width:410px; border-radius: 4px; overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--border-1);}
.status-card .status-head {display:flex; flex-direction:column; row-gap:2px; padding:16px 20px; background:var(--color-black);}
.status-card .status-head .stauts-date {display: none;}
.status-card .status-body {display:none; flex-direction:column; row-gap: 30px; padding: 20px; background-color: var(--color-white);}
.status-card .status-body.active {display: flex;}
.status-card .status-body.common,
.status-card .status-body.sold {justify-content: center; align-items: center; row-gap: 6px; padding: 50px 20px;}
.status-card .status-body.common span,
.status-card .status-body.sold span {text-align: center;}
.status-card .status-body.common .icon,
.status-card .status-body.sold .icon {display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; background-color: var(--bg-section-1); border-radius: 50%;}
.status-card .status-body.common .status-cont,
.status-card .status-body.sold .status-cont {align-items: center;}
.status-card .status-cont {display: flex; flex-direction: column; row-gap: 12px;}
.status-card .status-cont .status-item {display:flex; justify-content:space-between; align-items:center; padding: 8px 0; border-bottom:1px solid var(--border-1); column-gap: 10px;}
.status-card .status-cont .status-item .status-info {display: flex; align-items: center; column-gap: 10px;}
.status-card .status-cont .status-item .status-info .img-wrap {width: 40px; height: 40px; border-radius: 4px;}
.status-card .status-cont .status-item .status-info .room-name {font-size: var(--fs-16); line-height: 1.7; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;word-break: break-word;}
.status-card .status-cont .status-item .status-info .room-price {font-size: var(--fs-15); color: var(--text-2); line-height: 1.7; justify-content: flex-start; column-gap: 2px;}
.status-card .status-cont .status-item .btn {padding: 6px 16px; font-size: var(--fs-15); font-weight: 400; border-radius: 6px;}
.status-card .status-cont .status-item.sold .room-name,
.status-card .status-cont .status-item.sold .room-price {color: var(--text-3);}
.status-card .status-cont .status-item.sold .btn {border: 1px solid #E6E6E6; color: #A3A3A3; background-color: #F6F6F6;}
.status-card .status-empty {overflow:hidden; border-radius:24px; background:var(--color-white);}
.status-card .status-empty-cont {display:flex; justify-content:center; align-items:center; min-height:180px; text-align:center;}
.status-card .status-empty-cont p {font-size:var(--fs-14); color:var(--text-3);}

/* ==================================================
   COMMON ICON TEXT
================================================== */
.common-icon-text {padding: 20px 24px; display: flex; align-items: center; column-gap: 12px; border-bottom: 1px solid var(--border-1);}
.common-icon-text .icon {width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background-color: #4A674117;}
.common-icon-text .info .body-md {display: block; font-size: var(--fs-16);}

/* ==================================================
   COMMON FLEX
================================================== */
.common-flex {display: flex; column-gap: 36px; row-gap: 30px; flex-wrap: wrap;}
.common-flex-20 {row-gap: 20px !important;}
.common-flex-column {flex-direction: column;}
.common-flex-2 > li {width: calc(100% / 2 - 18px);}
.common-flex-3 > li {width: calc(100% / 3 - 24px);}

.common-flex-r {display: flex; column-gap: 10px; align-items: center;}

/* ==================================================
   COMMON CARD
================================================== */
.common-card {background-color: var(--color-white); border-radius: 6px; border: 1px solid var(--border-1); overflow: hidden;}
.common-card .common-card-t {padding: 24px 32px; display: flex; flex-direction: column; row-gap: 4px;}
.common-card .common-flex {padding: 20px 32px;}
.common-card > li {padding: 16px 20px !important;} 
.common-card > li.common-room-pd {padding: 0 !important; column-gap: 20px; flex-wrap: nowrap;}

.common-list {display: flex; flex-direction: column;}
.common-list .common-list-item {width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 10px 0;}
.common-list .common-list-item:not(:last-of-type) {border-bottom: 1px solid var(--border-1);}

.common-room-info {align-items: center;}
.common-room-info .img-wrap {width: 120px; height: 100px; border-radius: 10px;}
.common-room-info .info {display: flex; flex-direction: column; row-gap: 4px;}

.common-room-pd .img-wrap {width: 120px; height: 120px; border-radius: 0; flex-shrink: 0;}
.common-room-pd .info {width: 100%;}
.common-room-pd .btn {flex-shrink: 0; margin-right: 20px;}

/* ==================================================
   ROON ITEM
================================================== */
.room-item {display:flex; border-radius:10px; overflow:hidden; background:var(--color-white);}
.room-item.sold {position:relative;}
.room-item.sold::before {position:absolute; width:100%; height:100%; top:0; left:0; background-color:rgba(255,255,255,.5); display:block; content:''; z-index:1;}
.room-item.sold::after {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); content:'예약마감'; padding:clamp(10px,0.83vw,12px) clamp(20px,1.94vw,28px); display:block; z-index:2; border-radius:999px; background-color:#C0392B; box-shadow:0 4px 16px 0 rgba(192,57,43,.35); font-size:clamp(13px,1.04vw,15px); color:#fff; line-height:1.6;}
.room-thumb {position:relative; max-width:clamp(280px,27.78vw,400px);}
.room-badge {position:absolute; top:clamp(12px,1.11vw,16px); left:clamp(12px,1.11vw,16px); height:clamp(22px,1.67vw,24px); display:flex; justify-content:center; align-items:center; padding:0 clamp(8px,0.69vw,10px); border:1px solid rgba(255,255,255,.5); background-color:rgba(255,255,255,.05); border-radius:999px; font-size:clamp(9px,0.69vw,10px); color:var(--color-white);}
.room-cont {display:flex; align-items:center; column-gap:clamp(24px,2.78vw,40px); padding:clamp(24px,2.22vw,32px) clamp(24px,3.47vw,50px);}
.room-tit {font-size:var(--fs-18); font-weight:600; line-height:1.7; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; word-break:break-word;}
.room-info-wrap {display:flex; flex-direction:column; row-gap:clamp(16px,1.39vw,20px);}
.room-info {display:flex; align-items:center; column-gap:clamp(20px,1.94vw,28px);}
.room-info li {position:relative; font-size:var(--fs-15); color:var(--text-3);}
.room-info li:not(:last-child)::after {content:''; position:absolute; top:50%; right:clamp(-14px,-0.97vw,-10px); width:1px; height:12px; background:var(--border-1); transform:translateY(-50%);}
.room-tag {display:flex; flex-wrap:wrap; column-gap:clamp(8px,0.83vw,12px); row-gap:clamp(8px,0.83vw,12px);}
.room-tag li {padding:4px clamp(8px,0.69vw,10px); border-radius:4px; background-color:var(--bg-main-1); font-size:var(--fs-15); line-height:1.6; color:var(--text-2);}
.room-price {height:stretch; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end;}
.room-price .btn {width:100%; min-width:clamp(150px,13.06vw,188px);}
.room-price-txt {display:flex; flex-direction:column; align-items:flex-end; row-gap:3px;}
.room-price-txt span {font-size:var(--fs-15); line-height:1.6; color:var(--text-3);}
.room-price-txt strong {display:flex; align-items:center; column-gap:clamp(4px,0.42vw,6px); font-size:var(--fs-24); font-weight:500;}
.room-price-txt strong small {font-size:var(--fs-15); color:var(--text-3);}

/* ==================================================
   ROON ITEM
================================================== */
.sticky-wrap {display: flex; align-items: flex-start; column-gap: 50px;}
.sticky-wrap .sticky-cont {flex: 1; display: flex; flex-direction: column; row-gap: 60px;}
.sticky-wrap .sticky-card-wrap {position: sticky; top: 100px;}
.sticky-wrap .sticky-card-inner {position: relative; z-index: 1000; max-width: 950px; width: 100%;}
.sticky-wrap .sticky-card {max-width: 410px; width: 100%; border-radius: 4px; background-color: var(--color-white);}
.sticky-wrap .sticky-card .sticky-head {display:flex; flex-direction:column; row-gap:4px; padding:20px; background:var(--color-black);  border-radius: 4px 4px 0 0 ;}
.sticky-wrap .sticky-card .sticky-body {display: flex; flex-direction: column; row-gap: 16px; padding: 20px; border-bottom: 1px solid var(--border-1);}
.sticky-wrap .sticky-card .sticky-body .booking-price-box {display: flex; flex-direction: column; row-gap: 16px;}
.sticky-wrap .sticky-card .sticky-body .booking-price-list {display: flex; flex-direction: column; row-gap: 6px;}
.sticky-wrap .sticky-card .sticky-body .booking-price-item {display: flex; align-items: center; justify-content: space-between;}
.sticky-wrap .sticky-card .sticky-body .booking-price-head {display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background-color: var(--bg-main-2); border-radius: 6px;}
.sticky-wrap .sticky-card .sticky-body .booking-price-head span {font-size: 16px; font-weight: 500; line-height: 1.7;}
.sticky-wrap .sticky-card .sticky-body .booking-price-head span.selected {color: var(--color-main);}
.sticky-wrap .sticky-card .sticky-body .booking-total {display: flex; align-items: center; justify-content: space-between;}
.sticky-wrap .sticky-card .sticky-body .booking-total span {font-size: var(--fs-16); line-height: 1.7; font-weight: 500;}
.sticky-wrap .sticky-card .sticky-body .booking-total strong {font-size: var(--fs-24); font-weight: 500; display: flex; align-items: center; column-gap: 6px;}
.sticky-wrap .sticky-card .sticky-foot {display: flex; flex-direction: column; row-gap: 5px; padding: 20px;}

.booking-date-wrap {display: flex; flex-wrap: wrap; gap: 12px;}
.booking-date-wrap .booking-item {width: calc(100% / 2 - 6px); display: flex; flex-direction: column; row-gap: 1px; padding: 10px; background-color: var(--bg-main-2); border-radius: 4px;}
.booking-date-wrap .booking-item .booking-label {font-size: var(--fs-15); line-height: 1.6; color: var(--color-main);}
.booking-date-wrap .booking-item .booking-value {display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-16); font-weight: 600; line-height: 1.7; font-weight: 500; cursor: pointer;}
.booking-date-wrap .booking-item .booking-value svg {width: 14px; height: 14px;}
.booking-date-wrap .booking-item:last-of-type {width: 100% !important;}
.booking-date-wrap .booking-item.disabled {background-color: var(--bg-main-2);}
.booking-date-wrap .booking-item.disabled .booking-value {cursor: default;}

.sticky-wrap .common-modal {position: absolute; top: 0; left: auto; right:calc(100% + 16px);}

/* ==================================================
   ACCORDIAN ITEM
================================================== */
.accordian-list {display: flex; flex-direction: column; row-gap: 10px;}
.accordian-item {border-radius: 4px; border: 1px solid var(--border-1);}
.accordian-item .accordian-head {position:relative; display:flex; align-items:center; padding: 0 20px; width:100%; height: 55px; text-align:left; column-gap:12px;}
.accordian-item .accordian-head .accordian-num,
.accordian-item .accordian-head .accordian-tit,
.accordian-item .accordian-head .room-guide-tit {font-size:var(--fs-16); font-weight:500; line-height:1.7;}
.accordian-item .accordian-head::after {content:''; position:absolute; top:50%; right:20px; width:var(--fs-36); height:var(--fs-36); background-image:url(../img/sub/faq-arrow.svg); background-repeat:no-repeat; background-position:center center; transform:translateY(-50%); transition: var(--transition);}
.accordian-item .accordian-body {overflow:hidden; height:0; opacity:0; padding-top:0; transition:height .35s ease, opacity .25s ease, padding .35s ease;}
.accordian-item .accordian-body .room-guide-row {display:flex; justify-content:space-between; align-items:center; padding: 8px 0;}
.accordian-item .accordian-body .room-guide-row:not(:last-child) {border-bottom:1px solid var(--border-1);}
.accordian-item .accordian-body .room-guide-row:last-child {padding: 8px 0 28px 0;}
.accordian-item .accordian-body .room-guide-row span {font-size: var(--fs-15); line-height: 1.6; color: var(--text-2);}
.accordian-item .accordian-body .room-guide-row strong {font-size: var(--fs-15); line-height: 1.6;}
.accordian-item.open .accordian-head::after {transform:translateY(-50%) rotate(180deg);}
.accordian-item.open .accordian-body {opacity:1; padding: 0 20px 0 20px;}

/* ==================================================
   CHECKBOX ITEM
================================================== */
.checkbox-list {display: flex; flex-direction: column; row-gap: 10px;}
.checkbox-item input[type="checkbox"] {display:none;}
.checkbox-item input[type="checkbox"] + label {position: relative; width: 100%; padding: 14px 16px 14px 34px; border: 1px solid var(--border-1); display: flex; align-items: center; column-gap: 16px; background-color: #fff; cursor:pointer; border-radius: 12px;}
.checkbox-item input[type="checkbox"] + label .checkbox-info {width: 100%; display: flex; flex-direction: column;}
.checkbox-item input[type="checkbox"] + label .checkbox-price {flex-shrink: 0;}
.checkbox-item input[type="checkbox"] + label:before {position: absolute; top: 50%; left: 16px; transform: translateY(-50%); content:""; display:inline-block; box-sizing: border-box; flex-shrink: 0; background-color: #fff; width:20px; height:20px; border:1px solid var(--border-1); border-radius: 4px;}
.checkbox-item input[type="checkbox"]:checked + label {border: 1px solid var(--color-main); transition: var(--transition);}
.checkbox-item input[type="checkbox"] + label:hover:before  {content:""; background-color: rgba(var(--color-main-rgb), 0.15); background-image: url('../img/chk.svg'); background-repeat: no-repeat; background-position: 50%;}
.checkbox-item input[type="checkbox"]:checked + label:before {content:""; background-color: var(--color-main); border: 1px solid var(--color-main); background-image: url('../img/chk.svg'); background-repeat: no-repeat; background-position: 50%;}


/* ==================================================
   SWIPER
================================================== */
.common-swiper-btn button {display:flex; justify-content:center; align-items:center; width:32px; height:32px; border:1px solid var(--border-1); border-radius:50%; background:var(--color-white); transition: var(--transition);}


/* ==================================================
   LOCATION
================================================== */
.location-cont > .inner {display:flex; align-items:flex-start; column-gap:clamp(40px,6.94vw,100px);}
.location-cont .location-map {width:100%; overflow:hidden;}
.location-cont .location-map #daumRoughmapContainer1781677659144 {width:100% !important;}
.location-cont .location-map .wrap_map {height:clamp(360px,37.5vw,540px) !important;}
.location-cont .location-map .root_daum_roughmap_landing .border1,
.location-cont .location-map .root_daum_roughmap_landing .border3,
.location-cont .location-map .root_daum_roughmap_landing .border4,
.location-cont .location-map .root_daum_roughmap .wrap_controllers,
.location-cont .location-map .root_daum_roughmap .cont .section.lst {display:none !important;}
.location-cont .tit-wrap {margin-bottom:clamp(16px,1.39vw,20px); padding-bottom:clamp(16px,1.39vw,20px); border-bottom:1px solid var(--border-1);}
.location-cont .location-info-wrap {width:100%; max-width:clamp(320px,27.78vw,400px);}
.location-cont .location-info {display:grid; grid-template-columns: repeat(1, 1fr); gap:clamp(20px,2.08vw,30px);}
.location-cont .location-item {display:flex; align-items:flex-start; column-gap:clamp(16px,1.39vw,20px);}
.location-cont .location-item .icon {width:clamp(36px,2.78vw,40px); height:clamp(36px,2.78vw,40px); display:flex; align-items:center; justify-content:center; flex-shrink: 0; border-radius:50%; background-color:var(--bg-section-1);}
.location-cont .location-item .text > strong {font-weight:600; display:block; padding-bottom:clamp(2px,0.28vw,4px);}

/* ==================================================
   GUIDE
================================================== */
.guide-info-wrap {display:flex; flex-direction:column; row-gap:clamp(40px,4.17vw,60px);}
.guide-info-wrap > div {display:flex; flex-direction:column; row-gap:clamp(16px,1.39vw,20px);}
.guide-info-wrap .guide-service {display:flex; flex-wrap:wrap; column-gap:clamp(16px,1.39vw,20px); row-gap:clamp(16px,1.39vw,20px);}
.guide-info-wrap .guide-grid {display:grid; grid-template-columns:repeat(3,1fr); column-gap:clamp(16px,1.67vw,24px);}
.guide-info-wrap .guide-card {display:flex; flex-direction:column; row-gap:clamp(8px,0.69vw,10px); padding:clamp(20px,1.94vw,28px);}
.guide-info-wrap .guide-time {display:flex; flex-direction:column; row-gap:clamp(4px,0.42vw,6px);}
.guide-info-wrap .guide-time li {display:flex; justify-content:space-between; align-items:center; column-gap:clamp(4px,0.42vw,6px);}
.guide-info-wrap .guide-list {display:flex; flex-direction:column; row-gap:clamp(4px,0.42vw,6px);}

/* ==================================================
   COMMON TITLE
================================================== */
.tit-wrap {display:flex; flex-direction:column; row-gap:10px; margin-bottom:clamp(40px,4.17vw,60px);}
.tit-wrap.left {align-items:flex-start; text-align:left;}
.tit-wrap.center {align-items:center; text-align:center;}
.tit-wrap .eyebrow {color: var(--text-3);}
.tit-wrap .tit-desc {font-size: var(--fs-16);}

.tit-btn-wrap {display: flex; align-items: flex-end; justify-content: space-between; margin-bottom:clamp(40px,4.17vw,60px); column-gap: 10px; flex-wrap: wrap; row-gap: 20px;}
.tit-btn-wrap .tit-wrap {margin-bottom: 0;}


/* =========================================================
RESPONSIVE
========================================================= */
@media screen and (max-width:1440px) {

}

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

   .common-calendar {min-width: calc(100% - 360px);}
   .status-card {min-width: 320px}
   .sticky-wrap .sticky-card {max-width: 320px;}

}

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

   .pd-120 {padding: 100px 0;}
   
   .booking-wrap {max-width: 820px; width: calc(100% - 40px); flex-wrap: wrap;}
   .booking-wrap .booking-item {min-width: auto; width: calc(100% / 3);}
   .booking-wrap .booking-item:nth-of-type(1) {border-radius: 10px 0 0 0;}
   .booking-wrap .booking-item:nth-of-type(3) {border-radius: 0 10px 0 0;}
   .booking-wrap .booking-btn {width: 100%; border-radius: 0 0 10px 10px; padding: 20px 0;}
   
   .status-dim {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,.5); opacity:0; z-index:9999998; transition:opacity .3s ease;}
   .status-dim.active {opacity:1;}
   
   .status-card {display:none; position:fixed; bottom:0; left:0; width:100%; z-index:9999999; border-radius:24px 24px 0 0; background:var(--color-white); border: 0;}
   .status-card.active {display:flex; animation:status-up .3s ease;}
   
   @keyframes status-up {
      from {opacity:0; transform:translateY(30px);}
      to {opacity:1; transform:translateY(0);}
   }

   .common-flex-3 > li {width: calc(100% / 2 - 18px);}

   .person-modal {right: 0;}
   .booking-modal .calendar-day {height: 48px;}
   .booking-modal,
   .person-modal {bottom: auto; top: 94px;}

   .common-calendar .calendar-grid .day {height: 9vw;}

   .booking-page .common-dim {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,.5); opacity:0; z-index:9999998; transition:opacity .3s ease;}
   .booking-page .common-dim.active {opacity:1;}

   .booking-page .common-modal {position:fixed; bottom:0; left:0; width:100%; z-index:9999999; width: 100% !important; max-width: 100%; min-width: auto; top: auto; border-radius: 20px 20px 0 0;}
   .booking-page .common-modal.open {display:block; animation:status-up .3s ease;}

   .sticky-wrap .sticky-card-wrap {position: fixed; top: auto; left: 0; bottom: 0; left: 0; width: 100%; z-index: 99999;}
   .sticky-wrap .sticky-card,
   .sticky-wrap .sticky-card-inner {max-width: 100%;}
   .sticky-wrap .sticky-card {border-radius: 24px 24px 0 0;}
   .sticky-wrap .sticky-card .sticky-head,
   .sticky-wrap .sticky-card .sticky-foot,
   .sticky-wrap .sticky-card .sticky-body .booking-vat,
   .sticky-wrap .sticky-card .sticky-body .booking-total,
   .sticky-wrap .sticky-card .sticky-body .booking-price-list,
   .sticky-wrap .sticky-card .sticky-body .booking-price-box .line {display: none;}
   .sticky-wrap .sticky-card .sticky-body .booking-date-wrap li {width: calc(100% / 2 - 6px);}

   .location-cont > .inner {flex-direction: column; row-gap: 60px;}
   .location-cont .location-info {grid-template-columns: repeat(2, 1fr);}
   .location-cont .location-info-wrap {max-width: 100%;}
   
}

@media screen and (max-width:768px) {
   
   .booking-wrap {position: revert;}
   .common-status-wrap .btn-wrap {display: flex;}
   .common-calendar {min-width: 100%; border-radius: 0;}
   .common-calendar .calendar-grid .day .date {font-size: 2vw;}
   .common-calendar .calendar-grid .day .btn {font-size: 0; padding: 0; width: 6px; height: 6px; border-radius: 50%; border: 0;}
   .common-calendar .calendar-grid .day.sold .btn {background-color: #D92D20;}
   .common-calendar .calendar-grid .day.available .btn {background-color: #4F7A45;}
   .common-calendar .calendar-grid .day.partial .btn {background-color: #9A7A35;}
   
   .common-dim {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,.5); opacity:0; z-index:9999998; transition:opacity .3s ease;}
   .common-dim.active {opacity:1;}
   
   .common-modal {position:fixed; bottom:0; left:0; width:100%; z-index:9999999; width: 100% !important; max-width: 100%; min-width: auto; top: auto; border-radius: 20px 20px 0 0;}
   .common-modal.open {display:block; animation:status-up .3s ease;}
   .booking-modal .calendar-day {height: 10vw;}

   .common-flex-3 > li {width: calc(100% / 2 - 10px);}

   .room-item {flex-direction:column;}
   .room-thumb {max-width:100%; width:100%;}
   .room-thumb img {width:100%; aspect-ratio:16/10; object-fit:cover;}
   .room-cont {flex-direction:column; align-items:flex-start; row-gap:20px; padding:24px 20px;}
   .room-info-wrap {width:100%; row-gap:16px;}
   .room-info {flex-wrap:wrap; row-gap:8px; column-gap:20px;}
   .room-info li:not(:last-child)::after {right:-10px;}
   .room-tag {column-gap:8px; row-gap:8px;}
   .room-price {width:100%; flex-direction:row; align-items:flex-end; justify-content:space-between; gap:20px;}
   .room-price-txt {align-items:flex-start;}
   .room-price .btn {width:auto; min-width:160px;}

   .guide-info-wrap .guide-grid {grid-template-columns: repeat(1,1fr); row-gap: 24px;}

   .location-cont .location-info {grid-template-columns: repeat(1, 1fr);}

}

@media screen and (max-width:600px) {
   .booking-wrap .booking-item {width: 100%; border-left: 0;}
   .booking-wrap .booking-item:nth-of-type(1) {border-radius: 10px 10px 0 0; border-bottom: 1px solid var(--border-1);}
   .booking-wrap .booking-item:nth-of-type(3) {border-radius: 0; border-top: 1px solid var(--border-1);}
}

@media screen and (max-width:500px) {
   .pd-120,
   .pd-80 {padding: 50px 0;}

   .common-modal {padding: 30px 10px;}
   .common-modal::after {position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 36px; height: 4px; border-radius: 999px; display: block; content: ''; background-color: #eee;}
   .common-modal .btn-wrap:not(.calendar-nav) > button {width: 100%;}

   .common-calendar .calendar-grid .day {height: 50px;}
   .common-calendar .calendar-grid .day .date {font-size: 12px;}
   
   .booking-modal .calendar-bottom {display: flex; flex-direction: column-reverse; row-gap: 10px; border: 0; padding-top: 0; margin-top: 10px;}

   .common-flex-3 > li {width: 100%;}
   .common-card .common-card-t,
   .common-card .common-flex {padding: 20px 24px;}

   .room-cont {padding:20px 16px;}
   .room-info {flex-direction:column; align-items:flex-start; row-gap:6px;}
   .room-info li:not(:last-child)::after {display:none;}
   .room-price {flex-direction:column; align-items:stretch; row-gap:16px;}
   .room-price .btn {width:100%; min-width:0;}
   .room-price-txt {flex-direction: row; align-items: center; column-gap: 10px;}

   .location-cont .root_daum_roughmap .wrap_map {height: 300px !important;}

   .guide-info-wrap .guide-service li {width: calc(100% / 2 - 10px);}

}

@media screen and (max-width:375px) {
   .input-multi {grid-template-columns: repeat(1,1fr);}

   .sticky-wrap .sticky-card .sticky-body .booking-date-wrap li {width: 100%;}
   .booking-date-wrap .booking-item:last-of-type {display: none !important;}
}

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