/* =============================================
   Verdi CRM v4.20.0 — Customer Modal Glassmorphism Overlay
   ─────────────────────────────────────────────
   ⚙️  스코프: #customer-modal 안에서만 적용 (격리)
   📐 기반: 기존 v4.18 디자인 시스템 + .form-section 구조 무수정
   🎨 변화: 글래스모피즘 + 6 그라데이션 섹션 아이콘 + 거래행 강화
   🔁 롤백: index.html의 이 CSS link 1줄만 제거하면 v4.19.1 복귀
   ============================================= */

/* ── 1. 모달 오버레이 — Backdrop blur 강화 ────────────── */
#customer-modal.modal-overlay {
  background: rgba(15, 23, 42, 0.55);              /* navy-900 톤 다운 */
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}

/* ── 2. 모달 컨테이너 — Glassmorphism + 모던 그림자 ──── */
#customer-modal .modal {
  background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
  border-radius: 18px;
  box-shadow:
    0 30px 80px -20px rgba(15, 23, 42, 0.35),
    0 12px 30px -10px rgba(15, 23, 42, 0.20),
    0 0 0 1px rgba(255, 255, 255, 0.7) inset;
  border: 1px solid rgba(226, 232, 240, 0.8);
  overflow: hidden;
  animation: v420ModalIn 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes v420ModalIn {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* 폼 모달일 때만 와이드 확장 (1040px) — 디자이너 시안 기준 */
#customer-modal .modal:has(#customer-form) {
  max-width: 1040px !important;
}

/* ── 3. 모달 헤더 — 글래스 + 네이비 그라데이션 액센트 ── */
#customer-modal .modal-header {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px 28px 18px;
  border-radius: 18px 18px 0 0;
  position: relative;
  overflow: hidden;
}
#customer-modal .modal-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(99, 102, 241, 0.18) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(212, 175, 55, 0.12) 0%, transparent 50%);
  pointer-events: none;
}
#customer-modal .modal-header h2 {
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.2px;
  position: relative;
  z-index: 1;
}
#customer-modal .modal-close {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.08);
  position: relative;
  z-index: 1;
  transition: all 0.2s ease;
}
#customer-modal .modal-close:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  transform: rotate(90deg);
}

/* ── 4. 모달 본문 ─────────────────────────────────── */
#customer-modal .modal-body {
  padding: 0;                                  /* form-section이 자체 padding 가짐 */
  background: linear-gradient(180deg, #fafbfd 0%, #f5f7fb 100%);
}

/* ── 5. 폼 섹션 — Card-on-card 글래스 카드 ────────── */
#customer-modal .form-section {
  padding: 22px 28px;
  margin: 16px 20px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(226, 232, 240, 0.7);
  border-bottom: 1px solid rgba(226, 232, 240, 0.7);  /* 기존 마지막 border-bottom:none 오버라이드 */
  border-radius: 14px;
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.04),
    0 4px 12px -4px rgba(15, 23, 42, 0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
#customer-modal .form-section:hover {
  box-shadow:
    0 2px 6px rgba(15, 23, 42, 0.06),
    0 8px 20px -6px rgba(15, 23, 42, 0.10);
}
#customer-modal .form-section:first-of-type { margin-top: 20px; }
#customer-modal .form-section:last-of-type  { margin-bottom: 0; border-bottom: 1px solid rgba(226, 232, 240, 0.7); }

/* ── 6. 섹션 헤더 — 굵직한 모던 타이포 ─────────────── */
#customer-modal .form-section-header {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(203, 213, 225, 0.6);
  gap: 12px;
}
#customer-modal .form-section-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  font-size: 15px;
  box-shadow:
    0 4px 10px -2px rgba(15, 23, 42, 0.18),
    0 0 0 3px rgba(255, 255, 255, 0.6) inset;
  transition: transform 0.2s ease;
}
#customer-modal .form-section:hover .form-section-icon {
  transform: scale(1.05) rotate(-3deg);
}
#customer-modal .form-section-title {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: #0f172a;
}
#customer-modal .form-section-desc {
  font-size: 11.5px;
  margin-top: 3px;
  color: #64748b;
}

/* ── 7. 입력 필드 — 더 부드러운 라운드 + 포커스 글로우 ── */
#customer-modal .form-control,
#customer-modal .form-section input[type="text"],
#customer-modal .form-section input[type="email"],
#customer-modal .form-section input[type="number"],
#customer-modal .form-section input[type="date"],
#customer-modal .form-section select,
#customer-modal .form-section textarea {
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 13.5px;
  background: #ffffff;
  transition: all 0.2s ease;
}
#customer-modal .form-control:hover,
#customer-modal .form-section input:hover,
#customer-modal .form-section select:hover,
#customer-modal .form-section textarea:hover {
  border-color: #cbd5e1;
  background: #fafbfd;
}
#customer-modal .form-control:focus,
#customer-modal .form-section input:focus,
#customer-modal .form-section select:focus,
#customer-modal .form-section textarea:focus {
  border-color: #6366f1;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
}

/* ── 8. 폼 액션 (취소/저장) — v4.21.0 글로벌 시스템으로 이관됨 ─
   기존 음수 마진은 글로벌 sticky 와 충돌 → modal-system-v4.21.css 가 통일 관리
   여기는 placeholder 로 비워둠 (글로벌 우선 적용) */
#customer-modal .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
#customer-modal .form-actions .btn-primary {
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
  border: none;
  color: #fff;
  padding: 11px 24px;
  font-weight: 700;
  border-radius: 10px;
  font-size: 13.5px;
  letter-spacing: 0.1px;
  box-shadow:
    0 4px 12px -2px rgba(79, 70, 229, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.2) inset;
  transition: all 0.2s ease;
  cursor: pointer;
}
#customer-modal .form-actions .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 6px 18px -2px rgba(79, 70, 229, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.25) inset;
}
#customer-modal .form-actions .btn-primary:active { transform: translateY(0); }
#customer-modal .form-actions .btn-secondary {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  color: #475569;
  padding: 11px 22px;
  font-weight: 600;
  border-radius: 10px;
  font-size: 13.5px;
  transition: all 0.2s ease;
  cursor: pointer;
}
#customer-modal .form-actions .btn-secondary:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}

/* ── 9. 거래 내역 섹션 강화 — 8번 deals-section ────── */
#customer-modal #deals-section .deals-table-wrap {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
#customer-modal #deals-section .deals-table thead {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}
#customer-modal #deals-section .deals-table th {
  font-size: 11.5px;
  font-weight: 700;
  color: #475569;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 10px 12px;
  border-bottom: 1px solid #e2e8f0;
}
#customer-modal #deals-section .deals-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #f1f5f9;
}
#customer-modal #deals-section .deals-table tbody tr:hover td {
  background: rgba(99, 102, 241, 0.03);
}

/* 거래 행 인풋들 톤 다운 */
#customer-modal #deals-section .deals-table input,
#customer-modal #deals-section .deals-table select {
  padding: 7px 10px;
  font-size: 12.5px;
  border-radius: 7px;
}

/* 합계 푸터 모던화 */
#customer-modal #deals-section .deals-footer {
  margin-top: 14px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.04) 0%, rgba(212, 175, 55, 0.04) 100%);
  border: 1px solid rgba(226, 232, 240, 0.6);
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
#customer-modal #deals-section .btn-deal-add {
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
  color: #fff;
  border: none;
  padding: 9px 16px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 8px -2px rgba(16, 185, 129, 0.4);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#customer-modal #deals-section .btn-deal-add:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 12px -2px rgba(16, 185, 129, 0.5);
}
#customer-modal #deals-section .deals-totals {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12.5px;
  font-weight: 600;
}
#customer-modal #deals-section .deal-total {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  background: #ffffff;
  border-radius: 7px;
  border: 1px solid #e2e8f0;
}
#customer-modal #deals-section .deal-total-income { color: #047857; border-color: rgba(16, 185, 129, 0.3); }
#customer-modal #deals-section .deal-total-expense { color: #b91c1c; border-color: rgba(239, 68, 68, 0.3); }
#customer-modal #deals-section .deal-total-net    {
  color: #1e293b;
  border-color: rgba(212, 175, 55, 0.4);
  background: linear-gradient(135deg, #ffffff 0%, rgba(255, 251, 235, 0.5) 100%);
}

/* ── 10. Vendor 태그 칩 — 골드 액센트 + 글래스 ──────── */
#customer-modal .vendor-tag-list .vendor-chip,
#customer-modal .vendor-tag-list .vendor-tag {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, rgba(255, 251, 235, 0.6) 100%);
  border: 1px solid rgba(212, 175, 55, 0.35);
  color: #78350f;
  transition: all 0.18s ease;
}
#customer-modal .vendor-tag-list .vendor-chip:hover,
#customer-modal .vendor-tag-list .vendor-tag:hover {
  border-color: rgba(212, 175, 55, 0.6);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px -1px rgba(212, 175, 55, 0.25);
}

/* ── 11. Product 체크박스 강화 ──────────────────── */
#customer-modal .product-checkboxes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
#customer-modal .product-checkboxes label {
  padding: 8px 12px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 9px;
  font-size: 12.5px;
  cursor: pointer;
  transition: all 0.18s ease;
  display: flex;
  align-items: center;
  gap: 7px;
}
#customer-modal .product-checkboxes label:hover {
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.04);
}
#customer-modal .product-checkboxes input[type="checkbox"]:checked + span,
#customer-modal .product-checkboxes label:has(input:checked) {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(79, 70, 229, 0.04) 100%);
  border-color: #6366f1;
  color: #4338ca;
  font-weight: 600;
}

/* ── 12. 반응형 — 1024px 이하 단일 컬럼 ───────────── */
@media (max-width: 1024px) {
  #customer-modal .modal:has(#customer-form) {
    max-width: 720px !important;
  }
  #customer-modal .form-grid,
  #customer-modal .form-grid-3 {
    grid-template-columns: 1fr;
  }
  #customer-modal .form-section {
    margin: 12px 14px;
    padding: 18px 20px;
  }
}
@media (max-width: 640px) {
  #customer-modal .modal-header { padding: 16px 20px; }
  #customer-modal .modal-header h2 { font-size: 16px; }
  #customer-modal .form-section { margin: 10px 10px; padding: 16px 16px; }
  #customer-modal .form-actions { padding: 14px 20px; }
  #customer-modal #deals-section .deals-footer { flex-direction: column; align-items: stretch; }
}

/* ── 13. 별점(rating) — 골드 톤으로 통일 (기존 select 유지) ─ */
#customer-modal select[name="rating"] {
  color: #92400e;
  font-weight: 700;
  background-color: rgba(255, 251, 235, 0.6);
}

/* ── 14. 접근성 — focus-visible 명시 ──────────────── */
#customer-modal .form-actions .btn-primary:focus-visible,
#customer-modal .form-actions .btn-secondary:focus-visible,
#customer-modal #deals-section .btn-deal-add:focus-visible {
  outline: 3px solid rgba(99, 102, 241, 0.5);
  outline-offset: 2px;
}

/* =============================================
   끝 — v4.20.0 Customer Modal Glassmorphism
   ─────────────────────────────────────────────
   📌 v4.21.0 (2026-05-17): BUG-001 패치(─ 15 ~ ─ 20)는 글로벌 모달 시스템으로 이관
      → css/modal-system-v4.21.css 가 모든 모달에 동일 적용
      → 이 파일은 #customer-modal 한정 글래스 시각 효과만 담당
   ============================================= */