/* =============================================
   Verdi CRM v4.21.0 — Global Modal Adaptive System
   ─────────────────────────────────────────────
   🎯 목적: 모든 모달이 사용자 해상도에 자동 적응 + 저장 버튼 항상 노출
   🔁 기존 구조 무수정: HTML/JS 0건 변경, CSS 단일 파일 오버레이
   📐 적용 범위: .modal-overlay > .modal (전체 — 고객/일정/프로젝트/검토/일일보고서/관리자/거래)
   🐛 해결 이슈: BUG-001(고객 모달 잘림), 일일보고서 모달 잘림, 향후 모든 모달 잘림 예방
   🔁 롤백: index.html 의 이 link 1줄 제거 → v4.20.3 으로 복귀

   ━━━ 핵심 아키텍처 ━━━
   .modal-overlay  → fixed/flex center, 24px padding (해상도별 적응)
   .modal          → flex column, max-height: min(92vh, 1100px), max-width 토큰화
                     overflow: hidden (둥근 모서리 유지)
   .modal-header   → flex: 0 0 auto (높이 고정, 줄어들지 않음)
   .modal-body     → flex: 1 1 auto, overflow-y: auto (유일한 스크롤 영역)
   .form-actions   → sticky bottom: 0 (저장 버튼 항상 노출, 모든 폼 모달 자동 적용)
   .modal-actions  → sticky bottom: 0 (상세보기 모달의 액션 버튼들)
   ============================================= */

/* ── 1. 오버레이 — 해상도별 패딩 적응 ────────────────── */
.modal-overlay {
  /* 기존 fixed/flex center 유지, 패딩만 viewport 적응 */
  padding: clamp(8px, 2vh, 24px);
  /* 작은 viewport 일수록 여백 줄어듦 → 모달이 더 많은 공간 사용 */
}

/* ── 2. 모달 컨테이너 — flex column + 자동 적응 ──────── */
.modal-overlay > .modal {
  /* 베이스 .modal 의 max-width/max-height/overflow-y 를 전면 재정의 */
  display: flex !important;
  flex-direction: column !important;
  /* 해상도 적응: 최소 600px, 최대 1100px, viewport 96vh */
  max-height: min(92vh, 1100px) !important;
  /* width 는 클래스(.modal-detail-wide / .modal-convert-wide) 가 결정 — 여기선 건드리지 않음 */
  overflow: hidden !important;                    /* 내부 스크롤은 modal-body 가 전담 */
  /* 베이스 .modal 의 overflow-y: auto 제거 효과 */
}

/* ── 3. 헤더 — flex:0 (높이 고정), sticky 불필요 (overflow:hidden 이라 시각상 고정) ── */
.modal-overlay > .modal > .modal-header {
  flex: 0 0 auto !important;
  /* position: sticky 는 style.css 에서 이미 적용되어 있지만, flex 레이아웃에서는 불필요 → 그대로 둠 (충돌 없음) */
}

/* ── 4. 본문 — flex:1 + 내부 스크롤 (유일한 스크롤 영역) ── */
.modal-overlay > .modal > .modal-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  /* 스크롤바 — Navy-Indigo 토큰 통일 (대시보드 스크롤바와 정합) */
  scrollbar-width: thin;
  scrollbar-color: rgba(99, 102, 241, 0.32) transparent;
}
.modal-overlay > .modal > .modal-body::-webkit-scrollbar {
  width: 10px;
}
.modal-overlay > .modal > .modal-body::-webkit-scrollbar-track {
  background: transparent;
}
.modal-overlay > .modal > .modal-body::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.30);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.modal-overlay > .modal > .modal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.55);
  background-clip: padding-box;
  border: 2px solid transparent;
}

/* ── 5. 폼 액션 (저장/취소) — 모든 폼 모달 sticky footer ──
   적용 대상: .modal-body 안의 .form-actions / .modal-actions
   적용 범위: 고객/일정/프로젝트/일일보고서/검토/피드백/관리자/제품/변환 9 모듈
   ⚙️  핵심: modal-body 의 padding(24px 28px) 안에서 sticky 동작
          → bottom: 0 + 음수 마진으로 padding 영역까지 확장
          → sticky 컨테이너(modal-body) 의 padding-box 기준으로 정렬
   ⚠️  modal-body 의 padding-bottom 을 0 으로 만들면 sticky bottom:0 이 정확히 modal 끝에 붙음
   */
.modal-overlay > .modal > .modal-body {
  /* style.css 의 padding 24px 28px 을 → 24px 28px 0 28px 로 변경 (하단만 0) */
  padding-bottom: 0 !important;
}

.modal-overlay > .modal > .modal-body .form-actions,
.modal-overlay > .modal > .modal-body > .modal-actions {
  position: sticky;
  bottom: 0;                                      /* modal-body 의 padding-bottom: 0 와 정합 */
  z-index: 20;
  /* 좌우는 modal-body padding 영역까지 확장 (음수 마진) */
  margin: 16px -28px 0;
  padding: 16px 28px;
  /* 명확한 시각 분리 */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(248, 250, 252, 0.98) 100%);
  border-top: 1px solid rgba(203, 213, 225, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 -6px 16px -8px rgba(15, 23, 42, 0.12);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── 7. 접근성 — Tab 포커스 시 sticky footer 가 가리지 않음 ── */
.modal-overlay > .modal > .modal-body :focus-visible {
  scroll-margin-top: 16px;
  scroll-margin-bottom: 96px;                     /* sticky footer 높이 + 여유 */
}

/* ── 8. 반응형 — 해상도별 최적화 ──────────────────── */

/* 1366×768 (대만 영업사원 노트북 다수) */
@media (max-width: 1366px) and (max-height: 800px) {
  .modal-overlay > .modal {
    max-height: 94vh !important;
  }
}

/* 1024px 이하 — 태블릿 가로 */
@media (max-width: 1024px) {
  .modal-overlay {
    padding: 12px;
  }
  .modal-overlay > .modal {
    max-height: 94vh !important;
  }
  .modal-overlay > .modal > .modal-body .form-actions,
  .modal-overlay > .modal > .modal-body > .modal-actions {
    margin: 14px -20px 0;
    padding: 14px 20px;
  }
}

/* 768px 이하 — 모바일/태블릿 세로 — full-screen 모달 */
@media (max-width: 768px) {
  .modal-overlay {
    padding: 0;
  }
  .modal-overlay > .modal {
    max-height: 100vh !important;
    max-width: 100vw !important;
    width: 100vw !important;
    border-radius: 0 !important;
    height: 100vh;
  }
  .modal-overlay > .modal > .modal-body .form-actions,
  .modal-overlay > .modal > .modal-body > .modal-actions {
    margin: 12px -16px 0;
    padding: 12px 16px;
    flex-direction: row;
    justify-content: space-between;
  }
  .modal-overlay > .modal > .modal-body .form-actions > button,
  .modal-overlay > .modal > .modal-body > .modal-actions > button {
    flex: 1;
  }
}

/* 640px 이하 — 소형 모바일 */
@media (max-width: 640px) {
  .modal-overlay > .modal > .modal-header h2 {
    font-size: 15px !important;
  }
}

/* 매우 짧은 viewport (예: 가로 화면 노트북, 700px 이하 세로) */
@media (max-height: 700px) {
  .modal-overlay {
    padding: 4px !important;
  }
  .modal-overlay > .modal {
    max-height: calc(100vh - 8px) !important;            /* 패딩 8px 만 빼고 최대 활용 */
  }
  .modal-overlay > .modal > .modal-header {
    padding: 12px 20px !important;
  }
  .modal-overlay > .modal > .modal-header h2 {
    font-size: 14px !important;
  }
}

/* 극한 짧은 viewport (예: 600px 미만) */
@media (max-height: 600px) {
  .modal-overlay {
    padding: 0 !important;
  }
  .modal-overlay > .modal {
    max-height: 100vh !important;
    border-radius: 0 !important;
  }
}

/* ── 9. v4.20.0 고객 모달 글래스 호환 — overflow:hidden 보존 ─ */
/* customers-modal-v4.20.css 의 #customer-modal .modal 도 이 시스템에 자동 흡수됨
   (셀렉터 우선순위: .modal-overlay > .modal 와 #customer-modal .modal 모두 동작)
   글래스 시각 효과(blur, 그라데이션 헤더, 섹션 호버) 100% 보존 */

/* ── 10. 일일보고서 / 검토 / 캘린더 등 특수 모달 보호 ─── */
/* report-stats.js 의 rs-mc-modal-body (다중 컨테이너) 는 별도 컨테이너이므로
   이 글로벌 규칙에 영향받지 않음 (스코프 .modal-overlay > .modal > .modal-body 직속 자식만 적용) */

/* =============================================
   끝 — v4.21.0 Global Modal Adaptive System
   ============================================= */