@charset "utf-8";
/* 예약관리시스템 어드민 모바일 */

/* 대시보드 */
/* 오늘입실퇴실 */
.mo-check-list {display:flex; flex-direction:column; gap:10px;}
.mo-check-list .mo-check-item {display:flex; align-items:center; justify-content:space-between; padding: 14px; background-color:var(--color-white); border:1px solid var(--grayscale3); border-radius:10px;}
.mo-check-item .mo-check-content {display:flex; flex-direction:column; align-items:flex-start; row-gap: 4px;}
.mo-check-item .mo-check-name-wrap {display:flex; align-items:center; gap: 2px;}
.mo-check-item .mo-check-name {font-size:15px; font-weight:700; color:var(--grayscale11);}
.mo-check-item .mo-check-person {font-size:12px; font-weight:500; color:var(--grayscale5);}
.mo-check-item .mo-check-room {font-size:14px; font-weight: 500; color:var(--grayscale6);}
.mo-check-item .mo-check-time {font-size:12px; font-weight: 700; color:var(--grayscale11);}
.mo-check-item .mo-check-call {display:flex; align-items:center; justify-content:center; flex:none; width:46px; height:46px; border:1px solid var(--grayscale3); border-radius:50%; background-color:var(--grayscale1);}
.mo-check-item .mo-check-call:active {background-color:var(--color-white);}
/* 최근 예약 및 변경 */
.mo-reservation-history-list {display:flex; flex-direction:column; gap:10px;}
.mo-reservation-history-list .mo-reservation-history-item {display:flex; align-items:flex-start; justify-content:space-between; column-gap:12px; padding:14px; background-color:var(--color-white); border:1px solid var(--grayscale3); border-radius:10px;}
.mo-reservation-history-item .mo-reservation-history-content {display:flex; flex:1; min-width:0; flex-direction:column; align-items:flex-start; row-gap:5px;}
.mo-reservation-history-item .mo-reservation-history-type {line-height: 28px; font-size:15px; font-weight:800; color:var(--grayscale11);}
.mo-reservation-history-item .mo-reservation-history-desc {overflow:hidden; width:100%; font-size:14px; font-weight:500; color:var(--grayscale7); white-space:nowrap; text-overflow:ellipsis;}
.mo-reservation-history-item .mo-reservation-history-date {font-size:12px; font-weight:500; color:var(--grayscale5);}
.mo-reservation-history-item > .label {flex:none;}
/* 실시간 활동 */
.mo-activity-list {display:flex; flex-direction:column; gap:10px;}
.mo-activity-list .mo-activity-item {display:flex; align-items:flex-start; column-gap:10px; padding:14px; background-color:var(--color-white); border:1px solid var(--grayscale3); border-radius:10px;}
.mo-activity-item .mo-activity-icon {display:flex; align-items:center; justify-content:center; flex:none; width:24px; height:24px;}
.mo-activity-item .mo-activity-icon img {display:block; width:100%; height:100%; object-fit: contain;}
.mo-activity-item .mo-activity-content {display:flex; flex:1; min-width:0; flex-direction:column; row-gap:4px;}
.mo-activity-item .mo-activity-type {font-size:15px; font-weight:800; line-height:24px; color:var(--grayscale11);}
.mo-activity-item .mo-activity-desc {display:-webkit-box; overflow:hidden; font-size:14px; font-weight:500; color:var(--grayscale6); word-break:keep-all; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.mo-activity-item .mo-activity-time {flex:none; margin-left:auto; font-size:14px; font-weight:500; line-height:24px; color:var(--grayscale6);}
/* 판매관리 */
/* 객실 달력 */
.mo-sales-calendar {display: flex; flex-direction: column; align-items: center; row-gap: 8px;}
.mo-sales-calendar-select {font-size: 14px; font-weight: 500; color: var(--grayscale6);}
.mo-sales-calendar-days {width: 100%; display: grid; grid-template-columns: repeat(7, 1fr); align-items: stretch;}
.mo-sales-calendar-day {position: relative; min-width: 0; padding: 8px 2px; display: flex; flex-direction: column; align-items: center; row-gap: 4px; border: 0; border-radius: 12px; background-color: transparent;}
.mo-sales-calendar-day .day-name {font-size: 11px; font-weight: 600; color: var(--grayscale6);}
.mo-sales-calendar-day .day-date {width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 15px; font-weight: 700; color: var(--grayscale11);}
.mo-sales-calendar-day .day-number {font-size: 11px; font-weight: 700; color: var(--grayscale4); line-height: 1.4; font-weight: 500; white-space: nowrap;}
.mo-sales-calendar-day.active {background-color: var(--calendar-lightblue);}
.mo-sales-calendar-day.active .day-name,
.mo-sales-calendar-day.active .day-number {color: var(--calendar-blue);}
.mo-sales-calendar-day.active .day-date {background-color: var(--calendar-blue); color: var(--color-white);}
.mo-sales-calendar-day.closed .day-number,
.mo-sales-calendar-day.sunday .day-name,
.mo-sales-calendar-day.sunday .day-date {color: var(--color-red);}

/* 객실 판매 현황 */
.mo-room-sales-list {margin-top: var(--fs-16); display: flex; flex-direction: column; row-gap: 10px;}
.mo-room-sales-item {width: 100%; min-width: 0; min-height: 90px; padding: 10px; display: flex; align-items: center; column-gap: 12px; position: relative; text-align: left; border: 1px solid var(--grayscale3); border-radius: 12px; background-color: var(--color-white); transition: border-color 0.2s, background-color 0.2s, transform 0.2s;}
.mo-room-sales-item:active {transform: scale(0.99); border-color: var(--grayscale4); background-color: var(--grayscale1);}
.mo-room-sales-thumb {flex-shrink: 0; width: 68px; height: 68px; overflow: hidden; display: block; border-radius: 5px; background-color: var(--grayscale2);}
.mo-room-sales-thumb img {width: 100%; height: 100%; display: block; object-fit: cover;}
.mo-room-sales-info {min-width: 0; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 10px;}
.mo-room-sales-head {min-width: 0; grid-column: 1 / -1; display: flex; align-items: center; column-gap: 6px;}
.mo-room-sales-name {min-width: 0; overflow: hidden; display: block; font-size: 15px; font-weight: 700; color: var(--grayscale11); white-space: nowrap; text-overflow: ellipsis;}
.mo-room-sales-state {grid-column: 1 / -1; margin-top: 4px; display: block; font-size: 12px; color: var(--grayscale6);}
.mo-room-sales-price {margin-top: 4px; display: block; font-size: 18px; font-weight: 700; color: var(--grayscale11);}
.mo-room-sales-settlement {display: block; font-size: 12px; font-weight: 500; color: var(--grayscale6); white-space: nowrap;}
.mo-room-sales-more {width: 20px; height: 28px; display: flex; flex-shrink: 0; flex-direction: column; align-items: center; justify-content: center; row-gap: 3px;}
.mo-room-sales-more i {width: 3px; height: 3px; display: block; border-radius: 50%; background-color: var(--grayscale7);}

/* 객실 설정 */
.mo-room-setting-form {display: block;}
.mo-room-setting-summary {margin-bottom: 20px;}
.mo-room-setting-summary .mo-room-sales-item {pointer-events: none;}
.mo-room-setting-block + .mo-room-setting-block {margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--grayscale2);}

.mo-room-stock-box {width: 100%; min-height: 66px; padding: 10px; display: flex; align-items: center; justify-content: space-between; column-gap: 12px; border: 1px solid var(--grayscale3); border-radius: 10px; background-color: var(--color-white);}
.mo-room-stock-info {min-width: 0; display: flex; flex-direction: column; row-gap: 4px;}
.mo-room-stock-info > span {font-size: 12px; font-weight: 500; color: var(--grayscale7);}
.mo-room-stock-info > strong {font-size: 14px; font-weight: 500; color: var(--grayscale11);}
.mo-room-stock-info > strong em {font-style: normal; color: var(--calendar-blue);}
.mo-room-stock-box .number-input-box {width: auto; flex-shrink: 0; padding: 4px; border: 0; border-radius: 999px; background-color: var(--grayscale2);}
.mo-room-stock-box .number-input-box input[type="number"] {width: 34px; flex: none; font-weight: 600; background-color: transparent;}
.mo-room-stock-box .number-input-box .number-input-btn {width: 34px; height: 34px; border-radius: 50%; background-color: var(--color-white);}

.mo-room-price-btn-list {}
.mo-room-price-btn-list .square-btn {padding: 10px 12px; font-size: 14px; font-weight: 600; color: var(--grayscale6);}
.mo-room-settlement-box {width: 100%; padding: 12px 10px; display: flex; flex-direction: column; align-items: flex-start; row-gap: 4px; border: 1px solid var(--grayscale3); border-radius: 10px; background-color: var(--color-white);}
.mo-room-settlement-box > span {font-size: 14px; font-weight: 500; color: var(--grayscale6);}
.mo-room-settlement-box > strong {font-size: 18px; font-weight: 700; color: var(--grayscale11);}
.mo-room-settlement-box > p {font-size: 12px; font-weight: 500; color: var(--grayscale5);}


/* 예약관리 */
.mo-reservation-date-wrap {display: grid; grid-template-columns: minmax(0, 1fr) 40px; column-gap: 10px;}
.mo-reservation-date-btn {width: 100%; height: 40px; padding: 0 14px; display: flex; align-items: center; column-gap: 10px; border: 1px solid #DFE2E7; border-radius: 10px; background-color: #fff; font-size: 14px; color: #252B36;}
.mo-reservation-date-btn img {width: 18px; height: 18px;}
.mo-reservation-date-btn .arrow {width: 14px; height: 14px; margin-left: auto;}
.mo-reservation-tabs {display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--grayscale3);}
.mo-reservation-tab {position: relative; height: 48px; font-size: 14px; font-weight: 600; color: var(--grayscale5);}
.mo-reservation-tab::after {transition: width 0.2s; content: ""; position: absolute; bottom: -1px; left: 0; width: 0; height: 2px; background-color: var(--calendar-blue);}
.mo-reservation-tab.active {font-weight: 600; color: var(--calendar-blue);}
.mo-reservation-tab.active::after {width: 100%;}

.mo-reservation-list {display: flex; flex-direction: column; row-gap: 10px;}
.mo-reservation-card {padding: 12px 10px; display: block; border: 1px solid var(--grayscale3); border-radius: 16px; background-color: var(--color-white);}
.mo-reservation-card-head {display: flex; align-items: center; justify-content: space-between; column-gap: 10px;}
.mo-reservation-card-body {padding-block: 10px; display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 10px;}
.reservation-room-image {width: 64px; height: 64px; overflow: hidden; border-radius: 8px; background-color: var(--grayscale3);}
.reservation-room-image img {width: 100%; height: 100%; object-fit: cover;}
.reservation-info {min-width: 0; align-self: center;}
.reservation-customer {display: flex; align-items: center; column-gap: 5px;}
.reservation-customer strong {font-size: 14px; font-weight: 700; color: var(--grayscale9);}
.reservation-customer span {font-size: 12px; font-weight: 500; color: var(--grayscale5);}
.reservation-room-name {margin-top: 4px; display: block; overflow: hidden; font-size: 15px; font-weight: 700; color: var(--grayscale7); text-overflow: ellipsis; white-space: nowrap;}
.reservation-date {margin-top: 4px; overflow: hidden; font-size: 12px; font-weight: 500; color: var(--grayscale5); text-overflow: ellipsis; white-space: nowrap;}
.mo-reservation-card-foot {padding-top: 10px; display: flex; align-items: center; justify-content: space-between; column-gap: 10px; border-top: 1px solid var(--grayscale3);}
.reservation-price {font-size: 18px; font-weight: 600; color: var(--grayscale11);}

.reservation-sort-list {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;}
.reservation-sort-list .setting-radio {min-height: 88px; padding: 14px 12px !important; justify-content: center; border-radius: 12px;}
.reservation-sort-list .setting-radio > label {align-items: center;}
.reservation-sort-list .setting-radio > label > span {margin-top: 0;}
.reservation-sort-list .setting-radio-text {row-gap: 4px;}
.reservation-sort-list .setting-radio-text > em {font-size: 15px; font-weight: 700;}
.reservation-sort-list .setting-radio-text > p {font-size: 12px;}
.filter-scroll {width: calc(100% + 18px); padding-right: 18px; overflow-x: auto; column-gap: 10px; scrollbar-width: none;}
.filter-scroll::-webkit-scrollbar {display: none;}
.filter-scroll .filter {flex-shrink: 0; padding: 9px 16px; font-size: 14px; white-space: nowrap;}

/* 정산 */
.mo-settlement-history-list {display: flex; flex-direction: column; row-gap: 10px;}
.mo-settlement-history-item {padding: 16px; border: 1px solid var(--grayscale3); border-radius: 10px; background-color: var(--color-white);}
.mo-settlement-history-top {display: flex; align-items: center; justify-content: space-between; column-gap: 12px;}
.mo-settlement-history-top > strong {display: flex; align-items: flex-end; font-size: 18px; font-weight: 700; line-height: 1; color: var(--grayscale11);}
.mo-settlement-history-top > strong em {margin: 0 0 2px 3px; font-size: 12px; font-weight: 500;}
.mo-settlement-history-bottom {margin-top: 12px; display: flex; align-items: center; column-gap: 10px;}
.mo-settlement-history-bottom span {font-size: 14px; font-weight: 500; color: var(--grayscale8);}
.mo-settlement-history-bottom time {font-size: 14px; font-weight: 500; color: var(--grayscale6);}
.mo-settlement-empty-box {display:flex; flex-direction:column; align-items:center; justify-content:center; padding: 20px; border:1px solid var(--grayscale3); border-radius:12px; background: var(--color-white); text-align:center;}
.mo-settlement-empty-box img {width:170px; margin-bottom:10px;}
.mo-settlement-empty-box strong {font-size:14px; font-weight:500; color:var(--grayscale8);}
.mo-settlement-empty-box p {font-size:12px; font-weight: 500; color:var(--grayscale7);}

/* 더보기 */
.mo-more-balance-section {padding-top: 18px; padding-bottom: 20px;}
.mo-more-section {padding-top: 20px; padding-bottom: 40px;}
.mo-more-section-tit {margin-bottom: 12px; font-size: 17px; font-weight: 700; color: var(--grayscale11);}
.mo-more-section-tit.white {color: var(--color-white);}
.mo-more-balance-card {padding: 16px; border: 1px solid rgb(var(--rgb-white) / 10%); border-radius: 10px; background-color: rgb(var(--rgb-white) / 5%);}
.mo-more-balance-head {display: flex; align-items: flex-start; justify-content: space-between; flex-direction: column; row-gap: 10px;}
.mo-more-balance-title {display: flex; align-items: flex-start; width: 100%; justify-content: space-between;}
.mo-more-balance-title span {font-size: 17px; font-weight: 700; color: var(--grayscale4);}
.mo-more-balance-head > strong {font-size: 18px; font-weight: 700; color: var(--grayscale1);}
.mo-more-balance-foot {margin-top: 10px; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgb(var(--rgb-white) / 10%);}
.mo-more-balance-foot span {font-size: 12px; font-weight: 500; color: var(--grayscale5);}
.mo-more-balance-foot strong {font-size: 12px; font-weight: 500; color: var(--color-white);}
.mo-more-menu-list {overflow: hidden; border: 1px solid var(--grayscale3); border-radius: 10px; background-color: var(--color-white);}
.mo-more-menu-item {transition: background-color 0.2s; width: 100%; min-height: 44px; padding: 0 10px; display: flex; align-items: center; justify-content: space-between; column-gap: 12px; text-align: left; background-color: var(--color-white);}
.mo-more-menu-item:hover {background-color: var(--grayscale1);}
.mo-more-menu-item + .mo-more-menu-item {border-top: 1px solid var(--grayscale3);}
.mo-more-menu-item:active {background-color: var(--grayscale1);}
.mo-more-menu-content {min-width: 0; flex: 1; display: flex; align-items: center; column-gap: 10px;}
.mo-more-menu-icon {flex-shrink: 0; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;}
.mo-more-menu-icon img {max-width: 100%; max-height: 100%; object-fit: contain;}
.mo-more-menu-name {overflow: hidden; font-size: 14px; font-weight: 500; color: var(--grayscale9); text-overflow: ellipsis; white-space: nowrap;}
.mo-more-menu-side {flex-shrink: 0; display: flex; align-items: center; column-gap: 10px;}
.mo-more-menu-side .label {padding: 3px 7px; font-size: 11px; font-weight: 600;}
.mo-more-menu-arrow {flex-shrink: 0; width: 7px; height: 7px; margin-right: 2px; border-top: 1.5px solid var(--grayscale5); border-right: 1.5px solid var(--grayscale5); transform: rotate(45deg);}

/* 알림톡 발송 내역 */
.mo-alimtalk-filter-btn {position: fixed; top: 8px; right: 16px; z-index: 99990;}

.mo-alimtalk-summary {width: 100%;}
.mo-alimtalk-chart-wrap {display: flex; align-items: center; column-gap: 20px;}
.mo-alimtalk-chart {position: relative; flex-shrink: 0; width: 90px; height: 90px;}
.mo-alimtalk-chart canvas {width: 90px !important; height: 90px !important; display: block;}
.mo-alimtalk-chart-center {position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; transform: translate(-50%, -50%);}
.mo-alimtalk-chart-center strong {font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--color-white);}
.mo-alimtalk-chart-center span {font-size: 12px; font-weight: 500; color: var(--grayscale5);}
.mo-alimtalk-summary-list {min-width: 0; flex: 1; display: flex; flex-direction: column; row-gap: 10px;}
.mo-alimtalk-summary-item {display: flex; align-items: center; justify-content: space-between; column-gap: 20px;}
.mo-alimtalk-summary-item strong {font-size: 18px; font-weight: 700; color: var(--color-white);}
.mo-alimtalk-summary-label {display: flex; align-items: center; column-gap: 6px; font-size: 14px; font-weight: 500; color: var(--grayscale3);}
.mo-alimtalk-summary-label i {flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%;}
.mo-alimtalk-summary-label.blue i {background-color: var(--calendar-blue);}
.mo-alimtalk-summary-label.red i {background-color: #F04452;}
.mo-alimtalk-summary-label.white i {background-color: var(--color-white);}

.mo-alimtalk-tab-section {justify-content: space-between; flex-direction: row; position: sticky; top: var(--header-height); z-index: 15; column-gap: 12px;}

.mo-alimtalk-date-head {margin-bottom: -10px; display: flex; align-items: center; column-gap: 6px; color: var(--grayscale9);}
.mo-alimtalk-date-head svg {flex-shrink: 0;}
.mo-alimtalk-date-head strong,
.mo-alimtalk-date-head > span {font-size: 14px; font-weight: 500; color: var(--grayscale8);}
.mo-alimtalk-date-head em {font-size: 14px; font-weight: 500; color: var(--calendar-blue);}
.mo-alimtalk-history-list {display: flex; flex-direction: column; row-gap: 14px;}
.mo-alimtalk-history-card {padding: 12px 10px; border: 1px solid var(--grayscale3); border-radius: 10px; background-color: var(--color-white);}
.mo-alimtalk-history-head {display: flex; align-items: flex-start; justify-content: space-between; align-items: center; column-gap: 10px;}
.mo-alimtalk-history-title {min-width: 0; display: flex; align-items: center; column-gap: 10px;}
.mo-alimtalk-history-title strong {overflow: hidden; font-size: 15px; font-weight: 700; color: var(--grayscale11); text-overflow: ellipsis; white-space: nowrap;}
.mo-alimtalk-history-head time {flex-shrink: 0; font-size: 12px; font-weight: 500; color: var(--grayscale5);}
.mo-alimtalk-history-content {margin-top: 2px;}
.mo-alimtalk-history-content > p:not(.mo-alimtalk-fail-reason) {font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--grayscale8);}
.mo-alimtalk-history-content > span {display: block; margin-top: 1px; font-size: 12px; font-weight: 400; line-height: 1.5; color: var(--grayscale5);}
.mo-alimtalk-fail-reason {margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--color-red);}
.mo-alimtalk-fail-reason strong {font-weight: 400;}

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