.modal-wrap { display:none; position:fixed; top:0; left:0; width:100%; height:100dvh; background:rgba(0,0,0,0.5); z-index:1000;}
.modal-wrap.open { display:flex; align-items:center; justify-content: center; overflow:hidden; }
.modal-wrap .inner { max-width:768px; background:#fff; padding:30px; border-radius:20px;}
.modal-wrap .modal-head { display:flex; align-items:center; justify-content:space-between; padding-bottom:30px; }
.modal-wrap .modal-head .title{ font-size:22px; font-weight: 600; color: #212121; line-height:30px; }
/* 서비스 이용약관 */

/* 달력 모달 */
.modal-calender .inner { width:auto; padding:20px; }
.modal-calender .modal-head { position:relative; justify-content:center;}
.modal-calender .modal-head .md-close { position:absolute; top:0; left:auto; right:0; }
.modal-calender .modal-head .md-back { position:absolute; top:0; left:0;  }
.modal-calender .modal-body { padding-top:0; }
.modal-calender .air-datepicker { border:none; box-shadow:none; }

/* 달력 - 시간 선택 (showTime) */
.cal-notice { display:flex; align-items:center; gap:6px; background:rgba(251,140,0,0.05); border-radius:8px; padding:14px 12px; margin-bottom:16px; }
.cal-notice-icon { width:18px; height:18px; flex-shrink:0; display:block; }
.cal-notice-text { font-size:13px; line-height:16px; color:#212121; letter-spacing:-0.0231em; }
.cal-time-wrap { display:flex; align-items:center; gap:0; padding-top:16px; margin:16px 0 30px; border-top:1px solid #eee;  }
.cal-time-box { flex:1; display:flex; align-items:center; height:56px; border:1px solid #eee; border-radius:8px; padding:0 14px; position:relative; }
.cal-time-select { flex:1; height:100%; border:none; outline:none; font-size:16px; line-height:22px; color:#212121; letter-spacing:-0.0188em; background:url('/public/images/icon/ic_select_arrow.svg') no-repeat right center / 20px 20px; -webkit-appearance:none; appearance:none; cursor:pointer; padding-right:24px; }
.cal-time-select.is-placeholder { color:#bdbdbd; }
.cal-time-sep { font-size:14px; font-weight:600; color:#9e9e9e; padding:0 8px; flex-shrink:0; }
.cal-apply-btn { width:100%; height:56px; background:#2a3663; color:#fff; font-size:16px; font-weight:600; line-height:22px; letter-spacing:-0.0188em; border:none; border-radius:8px; cursor:pointer; }

/* 공유하기 모달 */
.modal-share .btn-link-copy { display:flex; align-items:center; width:100%; gap:0 4px; }
.modal-share .btn-link-copy .text{ font-size:16px; }

@keyframes toastIn { from { opacity:0; transform:translateX(-50%) translateY(-16px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
.toast-wrap { position:fixed; top:114px; left:50%; z-index:9999; min-width:335px; background:#fff; border-radius:12px; box-shadow:0 0 40px rgba(42,54,99,0.07); transform:translateX(-50%); opacity:1; animation:toastIn 0.25s ease; transition:opacity 0.2s ease, transform 0.2s ease; border:1px solid #eee; }
.toast-wrap.error { border-color:#ff5252; }
.toast-wrap.success { border-color:#43a047; }
.toast-wrap.end { border-color:#eee; }
.toast-inner { display:flex; align-items:center; justify-content:center; gap:8px; padding:16px 30px; }
.toast-wrap .toast-icon { flex-shrink:0; width:22px; height:22px; }
.toast-wrap .text { min-width:0; flex:1; font-size:16px; font-weight:600; line-height:22px;  color:#212121; white-space:nowrap; }


/* alert / confirm design */
.message-box { position:fixed; top:0; right:0; bottom:0; left:0; display:flex; align-items:center; justify-content:center; background:transparent; }
.message-box .inner { width:328px; padding:24px; border-radius:16px; background:#fff; box-shadow: 0 8px 36px 0 rgba(0, 0, 0, 0.16);}
.message-box .msg-head .msg-title { font-size:16px; font-weight:600; line-height:22px;  color:#212121; }

.message-box .msg-content { margin-top:24px; }
.message-box .msg-content.no-title { margin-top:0; }
.message-box .msg-content.no-title p { text-align:center; }
.message-box .msg-content p {font-size:14px; line-height:20px;  color:#212121; word-break:break-word; }

.message-box .msg-foot { display:flex; align-items:center; gap:8px; margin-top:24px; }
.message-box .msg-foot button { flex:1; height:42px; font-size:14px; border-radius:8px; line-height:20px; }
.message-box .btn-cancel { background:#fafafa; color:#9e9e9e; }
.message-box .btn-primary { background:#2a3663; color:#fff; font-weight:500; }
.message-box .btn-primary.red { background:#ff5252; color:#fff; font-weight:500; }

@media (max-width: 1024px) {
    .toast-wrap { top:70px; }
    .modal-wrap .inner { padding:30px 20px ;  }
    .toast-wrap .text { white-space:normal; word-break:break-all; }
}

@media (max-width: 768px) {
    .toast-wrap { width:90%; min-width:unset; }
    .toast-inner { padding:16px 14px; }
    .modal-wrap.open { align-items:flex-end; }
    .modal-wrap.open .inner { width:100%; max-height:90vh; border-bottom-left-radius:0; border-bottom-right-radius:0; }

    .modal-wrap .modal-head .title{ font-size:18px; line-height:26px; }
}