@charset "utf-8";
/* 객실현황 */
.room-status-grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fs-24);}
.room-box {padding: var(--fs-22); border: 1px solid var(--grayscale3); border-radius: var(--fs-20); background-color: var(--color-white);}
.room-box .room-box-head {display: flex; align-items: flex-start; justify-content: space-between; column-gap: var(--fs-20);}
.room-box .room-info {min-width: 0; display: flex; align-items: flex-start; column-gap: var(--fs-18);}
.room-box .room-thumb {flex-shrink: 0; width: 94px; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--fs-10); background-color: var(--grayscale2);}
.room-box .room-thumb img {width: 100%; height: 100%; object-fit: cover;}
.room-box .room-info-content {min-width: 0; display: flex; flex-direction: column; row-gap: 8px;}
.room-box .room-name {font-size: var(--fs-20); line-height: 1.5; font-weight: 500; color: var(--grayscale10);}
.room-box .room-detail {font-size: var(--fs-14); line-height: 1.5; color: var(--grayscale6);}
.room-box .room-stats {margin-top: var(--fs-18); padding: var(--fs-16) 6px; border-radius: var(--fs-14); background-color: var(--grayscale1);}
.room-box .room-stats .stats-list {column-gap: 0;}
.room-box .room-stats .stats-list .stats {flex: 1;}
.room-box .room-stats .stats-list .stats .stats-value {font-size: var(--fs-16); color: var(--grayscale10); line-height: 1.5;}
.room-box .room-stats .stats-list .stats .stats-label {color: var(--grayscale7);}
.room-box .room-setting-list {margin-top: var(--fs-10); padding-top: var(--fs-10); border-top: 1px solid var(--grayscale3);}
.room-box .btn-list {margin-top: var(--fs-24);}
.room-box .btn-list .square-btn {flex: 1;}

/* 객실유형 */
.room-type-list {}
.room-type-list .room-type-list-head {margin-bottom: var(--fs-10); display: flex; align-items: center; justify-content: space-between;}
.room-type-list .room-type-list-head .body-small {color: var(--grayscale7);}
.room-type-list .room-type-sortable {display: flex; flex-direction: column; row-gap: var(--fs-20);}
.room-type-list .room-type-item {padding: var(--fs-16) var(--fs-18); display: flex; align-items: center; column-gap: var(--fs-14); border: 1px solid var(--grayscale3); border-radius: var(--fs-14); background-color: var(--color-white); transition: border-color 0.2s, box-shadow 0.2s, opacity 0.2s;}
.room-type-list .room-type-item:hover {border-color: var(--grayscale4);}
.room-type-list .room-type-item .drag-handle {flex-shrink: 0; width: 18px; padding: 2px; display: grid; grid-template-columns: repeat(2, 3px); justify-content: center; gap: 3px; cursor: grab;}
.room-type-list .room-type-item .drag-handle:active {cursor: grabbing;}
.room-type-list .room-type-item .drag-handle span {width: 3px; height: 3px; border-radius: 50%; background-color: var(--grayscale5);}
.room-type-list .room-type-item .room-type-thumb {flex-shrink: 0; width: 64px; height: 64px; overflow: hidden; border-radius: var(--fs-10); background-color: var(--grayscale2);}
.room-type-list .room-type-item .room-type-thumb img {width: 100%; height: 100%; object-fit: cover;}
.room-type-list .room-type-item .room-type-info {min-width: 0; flex: 1;}
.room-type-list .room-type-item .room-type-info-head {display: flex; align-items: center; flex-wrap: wrap; gap: var(--fs-10);}
.room-type-list .room-type-item .room-type-name {font-size: var(--fs-20); line-height: 1.5; font-weight: 500; color: var(--grayscale10);}
.room-type-list .room-type-item .room-type-detail {margin-top: 6px; display: flex; align-items: center; flex-wrap: wrap; row-gap: 5px; font-size: var(--fs-14); line-height: 1.5; color: var(--grayscale6);}
.room-type-list .room-type-item .room-type-detail span {color: var(--grayscale7); position: relative; padding-left: var(--fs-10); margin-left: var(--fs-10);}
.room-type-list .room-type-item .room-type-detail span::before {content: ''; width: 3px; height: 3px; border-radius: 50%; background-color: var(--grayscale4); position: absolute; top: 50%; left: 0; transform: translate(-50%,-50%);} 
.room-type-list .room-type-item .room-type-detail strong {color: var(--grayscale11);}
.room-type-list .room-type-item .room-type-detail span.reservation-count {color: var(--color-mint);}
.room-type-list .room-type-item .btn-list .square-btn {min-width: 85px;}
.room-type-list .room-type-item.sortable-ghost {opacity: 0.35; background-color: var(--grayscale2);}
.room-type-list .room-type-item.sortable-chosen {border-color: var(--color-main); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);}
.room-type-list .room-type-item.sortable-drag {opacity: 1; background-color: var(--color-white);}

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