/* crm.css */
#crm-app { max-width: 600px; margin: 0 auto; padding: 12px; color: #ddeeff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.crm-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 0 14px; border-bottom: 1px solid #1b3050; margin-bottom: 10px; }
.crm-header h1 { margin: 0; font-size: 15px; color: #00c4ff; font-weight: 600; }
.crm-accordion-card { background: #0f1e30; border: 1.5px solid #c8960a; border-radius: 12px; margin-bottom: 8px; overflow: hidden; }
.crm-accordion-toggle { width: 100%; background: none; border: none; color: #f0c040; font-size: 14px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; cursor: pointer; text-align: left; -webkit-user-select: none; user-select: none; }
.crm-accordion-toggle:active { background: #1b3050; }
/* v5.3.18: 3분할 파이프라인 탭 (아코디언 바디 내부) */
.crm-accordion-header { display: flex; align-items: center; justify-content: space-between; }
.crm-pipeline-tabs { display: flex; gap: 6px; padding: 12px 0 14px; margin-bottom: 6px; border-bottom: 1px solid #1b3050; }
.crm-pipeline-tab { flex: 1; font-size: 12px; padding: 7px 4px; border: 1px solid #334466; border-radius: 6px; background: #1b3050; color: #7ab8d0; cursor: pointer; transition: all .15s; white-space: nowrap; text-align: center; }
.crm-pipeline-tab.active { border-color: #00dc78; color: #00dc78; background: rgba(0,220,120,0.1); font-weight: 600; }
.crm-pipeline-tab:hover:not(.active) { border-color: #5a7a9a; color: #c8dff0; }
/* v5.3.19: 탭 카운트 뱃지 */
.crm-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 5px; border-radius: 9px; background: #ff4757; color: #fff; font-size: 10px; font-weight: 700; line-height: 1; vertical-align: middle; }
.crm-pipeline-tab[data-view="new"] .crm-tab-badge { background: #00dc78; }
.crm-pipeline-tab[data-view="project"] .crm-tab-badge { background: #ff4757; }
.crm-pipeline-tab[data-view="archive"] .crm-tab-badge { background: #7a9ab0; }
.crm-pipeline-tab.active .crm-tab-badge { opacity: 0.95; }
.crm-accordion-body { padding: 0 14px 14px; }
.crm-pipeline-list { display: flex; flex-direction: column; gap: 10px; }
.crm-stage-label { font-size: 11px; font-weight: 700; color: #ffc800; letter-spacing: 1px; padding: 4px 2px 2px; border-top: 1px solid #1b3050; margin-top: 6px; }
.crm-stage-label:first-child { border-top: none; margin-top: 0; }
.crm-card { background: #141d2e; border: 1.5px solid #1b3050; border-radius: 10px; padding: 12px 14px; position: relative; transition: border-color .15s; }
.crm-card:hover { border-color: #2a4a70; }
.crm-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; position: relative; padding-right: 6px; }
.crm-card-name { font-size: 14px; font-weight: 700; color: #ffffff; flex: 1; line-height: 1.3; padding-right: 8px; }
.crm-card-badge { font-size: 10px; padding: 2px 7px; border-radius: 6px; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.crm-card-badge[data-stage="new"] { background: rgba(0,220,120,.12); color: #00dc78; }
.crm-card-badge[data-stage="proposal"] { background: rgba(0,196,255,.12); color: #00c4ff; }
.crm-card-badge[data-stage="positive"] { background: rgba(255,107,53,.12); color: #ff6b35; }
.crm-card-badge[data-stage="hold"] { background: rgba(138,148,170,.12); color: #8a94aa; }
.crm-card-badge[data-stage="completed"] { background: rgba(0,196,255,.12); color: #00c4ff; }
.crm-card-badge[data-stage="archive"] { background: rgba(160,120,220,.12); color: #a078dc; }
.crm-card-row { display: flex; justify-content: space-between; font-size: 12px; color: #8ba3c7; margin-bottom: 3px; }
.crm-card-label { color: #5a7a9a; font-weight: 600; }
.crm-card-memo { font-size: 12px; color: #c0c8d8; background: #0f1624; border: 1px solid #1b3050; border-radius: 8px; padding: 8px 10px; margin-top: 8px; line-height: 1.45; }
.crm-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px solid #1b3050; }
.crm-btn-icon { flex: 1; background: #0f1624; border: 1.5px solid #1b3050; border-radius: 8px; padding: 6px 0; font-size: 13px; cursor: pointer; color: #8ba3c7; text-align: center; }
.crm-btn-icon:hover { border-color: #00c4ff; color: #00c4ff; background: #131b2e; }
.crm-btn-text { flex: 1 1 auto; min-width: 58px; background: #0f1624; border: 1.5px solid #1b3050; border-radius: 8px; padding: 6px 4px; font-size: 11px; cursor: pointer; color: #8ba3c7; text-align: center; white-space: nowrap; }
.crm-btn-text:hover { border-color: #00c4ff; color: #00c4ff; background: #131b2e; }
.crm-btn-delete { color: #ff6b6b; border-color: #5a2a2a; }
.crm-btn-delete:hover { color: #ff4040; border-color: #ff4040; background: #2a1515; }
.crm-stage-menu { position: absolute; right: 8px; top: 36px; background: #0f1624; border: 1.5px solid #1b3050; border-radius: 8px; padding: 4px; z-index: 100; box-shadow: 0 4px 12px rgba(0,0,0,0.4); display: none; }
.crm-stage-menu.show { display: block; }
.crm-stage-item { padding: 7px 10px; font-size: 12px; color: #e0e6f0; border-radius: 6px; cursor: pointer; }
.crm-stage-item:hover { background: #1b3050; }
.crm-btn-primary { background: #00dc78; color: #0f1624; border: none; border-radius: 8px; padding: 7px 14px; font-size: 12px; font-weight: 700; cursor: pointer; }
.crm-btn-secondary { background: #1b3050; color: #fff; border: 1.5px solid #2a4a70; border-radius: 8px; padding: 7px 14px; font-size: 12px; font-weight: 700; cursor: pointer; }
.crm-btn-kakao { background: #fee500; color: #3c1e1e; border: none; border-radius: 8px; padding: 7px 14px; font-size: 12px; font-weight: 700; cursor: pointer; }
.crm-btn-print { background: #ff6b35; color: #fff; border: none; border-radius: 8px; padding: 7px 14px; font-size: 12px; font-weight: 700; cursor: pointer; }
.crm-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.65); display: flex; justify-content: center; align-items: flex-end; z-index: 2000; padding: 0; }
@media(min-width:600px){ .crm-modal-overlay{ align-items:center; padding:20px; } }
.crm-modal-content { background: #0f1624; border: 1.5px solid #1b3050; border-radius: 14px 14px 0 0; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; padding: 18px; box-shadow: 0 -4px 20px rgba(0,0,0,0.35); }
@media(min-width:600px){ .crm-modal-content{ border-radius:14px; } }
.crm-modal-content h3 { margin: 0 0 14px; font-size: 16px; color: #fff; }
.crm-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; padding-top: 12px; border-top: 1px solid #1b3050; }
.crm-form-group { margin-bottom: 12px; }
.crm-form-group label { display: block; font-size: 11px; font-weight: 700; color: #8ba3c7; margin-bottom: 4px; }
.crm-form-group input, .crm-form-group textarea, .crm-form-group select { width: 100%; background: #131b2e; border: 1.5px solid #1b3050; border-radius: 8px; padding: 8px 10px; color: #e0e6f0; font-size: 13px; box-sizing: border-box; }
.crm-form-group input:focus, .crm-form-group textarea:focus { outline: none; border-color: #00c4ff; }
.crm-radio-group { display: flex; flex-wrap: wrap; gap: 8px; }
.crm-radio-group label { display: inline-flex; align-items: center; gap: 4px; background: #131b2e; border: 1.5px solid #1b3050; border-radius: 8px; padding: 6px 10px; font-size: 12px; color: #c0c8d8; cursor: pointer; font-weight: 500; }
.crm-radio-group input[type="radio"] { width: auto; accent-color: #00dc78; }
.crm-photo-controls { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.crm-btn-photo-pick { background: #1b3050; color: #00c4ff; border: 1.5px dashed #00c4ff; border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.crm-btn-photo-delete { background: #2a1515; color: #8a94aa; border: 1.5px solid #4a2828; border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all .15s; }
.crm-btn-photo-delete:disabled { opacity: 0.5; cursor: not-allowed; }
.crm-btn-photo-delete.active { background: #ff3b30; color: #fff; border-color: #ff3b30; }
.crm-photo-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.crm-photo-thumb-wrap { position: relative; width: 72px; height: 72px; }
.crm-photo-check { position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; accent-color: #ff3b30; cursor: pointer; z-index: 2; margin: 0; }
.crm-photo-thumb { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; border: 1.5px solid #1b3050; cursor: pointer; display: block; }
.crm-photo-thumb:hover { border-color: #00c4ff; }
/* v5.3.20: 독립 라이트박스 모듈 (app-lb) */
.app-lb-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.92); display: none; justify-content: center; align-items: center; z-index: 9999; touch-action: none; overscroll-behavior: none; }
.app-lb-overlay.active { display: flex; }
.app-lb-img { max-width: 95vw; max-height: 90vh; object-fit: contain; border-radius: 8px; transition: transform 0.2s ease; transform-origin: center center; }
.app-lb-close { position: absolute; top: 16px; right: 20px; background: rgba(255,255,255,0.15); border: none; border-radius: 50%; width: 36px; height: 36px; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 1; }
.app-lb-close:active { background: rgba(255,255,255,0.3); }
.crm-comments { margin-top: 12px; border-top: 1px solid #1b3050; padding-top: 10px; }
.crm-comments-list { display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow-y: auto; margin-bottom: 8px; }
.crm-comment-item { background: #131b2e; border-radius: 8px; padding: 8px 10px; font-size: 12px; }
.crm-comment-author { font-weight: 700; color: #00c4ff; font-size: 11px; }
.crm-comment-text { color: #e0e6f0; margin-top: 2px; }
.crm-comment-time { color: #5a7a9a; font-size: 10px; margin-top: 2px; }
.crm-comment-input { display: flex; gap: 6px; }
.crm-comment-input input { flex: 1; background: #131b2e; border: 1.5px solid #1b3050; border-radius: 8px; padding: 7px 10px; color: #e0e6f0; font-size: 12px; }
.crm-comment-input button { background: #1b3050; color: #00dc78; border: none; border-radius: 8px; padding: 7px 12px; font-size: 12px; font-weight: 700; cursor: pointer; }
.crm-badge { position: absolute; top: -6px; right: -6px; background: #ff3b30; color: #fff; font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 5px; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.crm-code-box { display: flex; align-items: center; gap: 8px; background: #131b2e; border: 1.5px dashed #00c4ff; border-radius: 8px; padding: 10px 12px; }
.crm-code-box span { font-family: "SF Mono", monospace; font-size: 18px; font-weight: 700; color: #00c4ff; letter-spacing: 2px; flex: 1; text-align: center; }
.crm-weekly-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.crm-weekly-queue { display: flex; flex-direction: column; gap: 8px; }
.crm-weekly-item { background: #141d2e; border: 1.5px solid #1b3050; border-radius: 10px; padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; }
.crm-weekly-item-name { font-size: 13px; font-weight: 700; color: #fff; }
.crm-weekly-item-info { font-size: 11px; color: #8ba3c7; }
.crm-chk-target-name { font-size: 14px; font-weight: 700; color: #00c4ff; margin-bottom: 10px; padding: 6px 10px; background: #131b2e; border-radius: 8px; border: 1px solid #1b3050; }
.crm-chk-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.crm-chk-header h3 { margin: 0; font-size: 16px; color: #fff; }
.crm-group { border-radius: 10px; padding: 14px; margin-bottom: 12px; }
.crm-group.procurement { background: #141d2e; border: 1.5px solid #1b3050; }
.crm-group.field { background: #0f1624; border: 1.5px solid #1a2840; }
.crm-group-title { font-size: 13px; font-weight: 700; color: #00c4ff; margin-bottom: 10px; }
.crm-form-row { display: flex; gap: 10px; }
.crm-form-row .crm-form-group { flex: 1; }
.crm-btn-upload { background: #1b3050; color: #00dc78; border: 1.5px dashed #00dc78; border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.crm-print-option label { display: flex; align-items: center; gap: 8px; padding: 10px 0; font-size: 13px; color: #e0e6f0; cursor: pointer; }
.crm-print-option input { width: auto; accent-color: #00dc78; }
@media print {
  @page { size: A4; margin: 12mm; }
  /* Print Block 강제: 부모 체인의 flex/grid를 박살내야 page-break가 동작 */
  html, body, #crm-print-area, .print-page-1, .print-page-2, .print-page-3, .crm-print-page {
    display: block !important;
    float: none !important;
    overflow: visible !important;
    height: auto !important;
    width: auto !important;
    position: static !important;
  }
  body > * { display: none !important; }
  #crm-print-area { width: 100% !important; display: block !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .crm-print-page { color: #000; background: #fff; box-sizing: border-box; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .print-page-1, .crm-print-summary { page-break-after: always !important; break-after: page; }
  .print-page-2, .print-page-3 { page-break-before: always !important; break-before: page; }
  .print-page-2 { page-break-after: always !important; break-after: page; }
  .crm-print-summary table { width: 100%; border-collapse: collapse; margin-top: 8px; table-layout: fixed; }
  .crm-print-summary th, .crm-print-summary td { border: 1px solid #333; padding: 6px 8px; font-size: 12px; word-break: break-all; }
  .crm-print-summary td:first-child { width: 28%; background: #f5f5f5; font-weight: 700; }
  .crm-print-thumbs { display: flex; gap: 4mm; margin-top: 8mm; }
  .crm-print-thumbs img { width: 40mm; height: 30mm; object-fit: cover; border: 1px solid #ccc; }
  .crm-print-photo-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 115mm 115mm; gap: 5mm; margin-top: 4mm; }
  .crm-print-photo-cell { width: 100%; height: 100%; border: 1px solid #ccc; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #fafafa; }
  .crm-print-photo-cell img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
}
.crm-date-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media(max-width:480px){ .crm-date-grid{ grid-template-columns: repeat(2,1fr); } }
.crm-date-grid > div { display: flex; flex-direction: column; gap: 3px; }
.crm-date-label { font-size: 10px; color: #5a7a9a; font-weight: 700; }
.crm-date-final { grid-column: span 1; }
.crm-hidden { display: none !important; }
.crm-share-info p { font-size: 12px; color: #8ba3c7; line-height: 1.5; margin: 0 0 12px; }
.crm-docs-empty, .crm-empty { text-align: center; color: #5a7a9a; font-size: 13px; padding: 40px 0; }
/* v5.4.0: 스켈레톤 로딩 UI */
.crm-skeleton { display: flex; flex-direction: column; gap: 10px; padding: 20px 14px; animation: crmSkeletonPulse 1.2s infinite ease-in-out; }
.crm-skeleton-bar { height: 14px; border-radius: 6px; background: linear-gradient(90deg, #1b3050 25%, #253e60 50%, #1b3050 75%); background-size: 200% 100%; animation: crmSkeletonShimmer 1.5s infinite; }
.crm-skeleton-text { text-align: center; color: #5a7a9a; font-size: 13px; padding: 30px 0; }
@keyframes crmSkeletonPulse { 0%,100%{ opacity:1 } 50%{ opacity:.6 } }
@keyframes crmSkeletonShimmer { 0%{ background-position:200% 0 } 100%{ background-position:-200% 0 } }

/* ✅ 자료실 모달 높이 강제 제한 및 스크롤 (실제 ID 기반) */
#library-modal > div:nth-child(1) {
  max-height: 65vh !important; /* 화면의 65%로 높이 제한 */
  display: flex !important;
  flex-direction: column !important;
}

#lib-file-section {
  overflow-y: auto !important;
  max-height: calc(65vh - 60px) !important; /* 헤더 공간 제외하고 스크롤 영역 확보 */
  padding-right: 5px; /* 스크롤바가 내용물을 가리지 않게 여백 추가 */
}

#vendor-file-items {
  max-height: none !important;
  overflow-y: visible !important;
}