/* MOYO 공통 모달 기본 스타일 - 레거시 프로젝트 업무·일정 모달 규칙 제거 */
/* MOYO 공통 모달 UI
   프로젝트 전용이 아니라 모든 화면에서 재사용할 수 있는 컴팩트 모달 기준입니다. */
:root{
    --moyo-modal-width: 430px;
    --moyo-modal-radius: 18px;
    --moyo-modal-border: #dfe6ee;
    --moyo-modal-text: #172033;
    --moyo-modal-muted: #7b8794;
    --moyo-modal-blue: #4a90e2;
}/* 신규 화면에서 사용할 공통 클래스 */
.moyo-modal-overlay,
.my-modal-overlay{
    align-items: center;
    justify-content: center;
    padding: 18px;
    box-sizing: border-box;
}.moyo-modal{
    width: min(var(--moyo-modal-width), calc(100vw - 32px)) !important;
    max-height: calc(100vh - 32px) !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--moyo-modal-border) !important;
    border-radius: var(--moyo-modal-radius) !important;
    background: #fff !important;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .20) !important;
}.moyo-modal__header{
    padding: 18px 20px 14px !important;
    border-bottom: 1px solid #edf1f5 !important;
    background: #fff !important;
}.moyo-modal__header h3{
    margin: 0 !important;
    color: var(--moyo-modal-text) !important;
    font-size: 19px !important;
    font-weight: 900 !important;
    line-height: 1.3 !important;
    letter-spacing: -.035em !important;
}.moyo-modal__header p{
    margin: 6px 0 0 !important;
    color: var(--moyo-modal-muted) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
}.moyo-modal__body{
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 14px 20px 16px !important;
    overflow-y: auto !important;
}.moyo-modal__field{
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    min-width: 0 !important;
}.moyo-modal__field > label{
    margin: 0 !important;
    color: #344054 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}.moyo-modal input:not([type="checkbox"]):not([type="radio"]),
.moyo-modal select,
.moyo-modal textarea{
    width: 100% !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    border: 1px solid #d7e1ec !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #1f2937 !important;
    font: inherit !important;
    box-sizing: border-box !important;
    outline: none !important;
}.moyo-modal input:focus,
.moyo-modal select:focus,
.moyo-modal textarea:focus{
    border-color: var(--moyo-modal-blue) !important;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, .11) !important;
}.moyo-modal__section{
    padding: 10px 12px 12px !important;
    border: 1px solid #e4eaf1 !important;
    border-radius: 13px !important;
    background: #f9fbfd !important;
}.moyo-modal__footer{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    padding: 11px 20px 13px !important;
    border-top: 1px solid #edf1f5 !important;
    background: #fff !important;
}.moyo-modal__button{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 66px !important;
    min-height: 36px !important;
    padding: 0 14px !important;
    border-radius: 9px !important;
    border: 1px solid transparent !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}@media (max-width: 560px){.moyo-modal{
        width: calc(100vw - 20px) !important;
    }
}/* ===== Compact modal refinement: 일정 모달 텍스트 잘림/세로 길이 보정 ===== */
:root{
    --moyo-modal-width: 400px;
}.moyo-modal__header{
    padding: 18px 20px 13px !important;
}.moyo-modal__header h3{
    font-size: 19px !important;
}.moyo-modal__header p{
    margin-top: 4px !important;
    font-size: 11px !important;
}.moyo-modal__body{
    gap: 12px !important;
    padding: 15px 20px 16px !important;
}.moyo-modal__field{
    gap: 5px !important;
}.moyo-modal input:not([type="checkbox"]):not([type="radio"]),
.moyo-modal select,
.moyo-modal textarea{
    min-height: 38px !important;
    padding-left: 11px !important;
    padding-right: 11px !important;
}.moyo-modal__section{
    padding: 10px 12px 12px !important;
    border-radius: 12px !important;
}.moyo-modal__footer{
    padding: 11px 20px 13px !important;
}.moyo-modal__button{
    min-width: 62px !important;
    min-height: 34px !important;
    padding: 0 13px !important;
}@media (max-width: 480px){:root{ --moyo-modal-width: 380px; }
}/* ===== 2026-06-07 공통 모달 최종 보정 =====
   - 업무 현황 모달의 컴팩트한 구성을 기준으로 통일
   - 모달 제목은 MOYO 히어로 섹션처럼 은은한 브랜드 배경 적용
   - 일정 색상 팔레트와 직접 선택(+)을 한 행에 자연스럽게 정렬
*/
.moyo-modal__header{
    position: relative !important;
    overflow: hidden !important;
    padding: 18px 20px 15px 24px !important;
    background:
        radial-gradient(circle at 92% 14%, rgba(85, 221, 191, .20), transparent 38%),
        linear-gradient(105deg, rgba(74, 144, 226, .08), rgba(255,255,255,.98) 48%, rgba(85, 221, 191, .10)) !important;
    border-bottom: 1px solid #e8eef5 !important;
}.moyo-modal__header::before{
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 15px !important;
    bottom: 15px !important;
    width: 4px !important;
    border-radius: 0 999px 999px 0 !important;
    background: linear-gradient(180deg, #4A90E2 0%, #39CDB5 100%) !important;
}/* ===== 2026-06-07 모달 히어로 구분선/간격/버튼 최종 보정 ===== */
.moyo-modal__header{
    padding: 15px 18px 13px !important;
    background:
        radial-gradient(circle at 92% 10%, rgba(85, 221, 191, .18), transparent 38%),
        linear-gradient(105deg, rgba(74, 144, 226, .07), rgba(255,255,255,.98) 50%, rgba(85, 221, 191, .09)) !important;
    border-bottom: 0 !important;
}/* 왼쪽 세로선을 없애고 제목 영역 아래에 브랜드 그라데이션 구분선 적용 */
.moyo-modal__header::before{
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: auto !important;
    height: 2px !important;
    border-radius: 0 !important;
    background: linear-gradient(90deg, #4A90E2 0%, #55DDBF 100%) !important;
}.moyo-modal__header p{
    margin-top: 3px !important;
}/* 본문 사이 간격을 줄여 모달 높이 압축 */
.moyo-modal__body{
    gap: 10px !important;
    padding: 12px 18px 13px !important;
}.moyo-modal__section{
    padding: 9px 10px 10px !important;
}/* 하단 버튼 영역과 버튼 크기 축소 */
.moyo-modal__footer{
    gap: 7px !important;
    padding: 9px 18px 11px !important;
}/* 주요 동작 버튼은 MOYO 파랑-민트 그라데이션으로 통일 */
.moyo-modal__button.primary{
    border-color: transparent !important;
    background: linear-gradient(135deg, #4A90E2 0%, #39CDB5 100%) !important;
    color: #fff !important;
    box-shadow: 0 6px 14px rgba(57, 205, 181, .18) !important;
}.moyo-modal__button.primary:hover{
    transform: translateY(-1px) !important;
    filter: brightness(.98) !important;
    box-shadow: 0 8px 18px rgba(57, 205, 181, .23) !important;
}@media (max-width: 480px){.moyo-modal__header{
        padding: 14px 16px 12px !important;
    }.moyo-modal__body{
        padding: 11px 16px 12px !important;
    }
}.moyo-modal-btn{
    display:inline-flex !important; align-items:center !important; justify-content:center !important; min-width:62px !important; min-height:34px !important; padding:0 13px !important; border-radius:9px !important; border:1px solid transparent !important; font:inherit !important; font-size:12px !important; font-weight:900 !important; cursor:pointer !important;
}.moyo-modal-btn.primary{
    background:linear-gradient(135deg,#4A90E2 0%,#39CDB5 100%) !important; color:#fff !important; box-shadow:0 6px 14px rgba(57,205,181,.18) !important;
}.moyo-modal-btn.ghost{ background:#fff !important; border-color:#d7e1ec !important; color:#667085 !important; }