/* ==============================================
   ZioYou ERP - 통합 스타일시트
   Primary: #0066CC  |  Font: Noto Sans KR
   ============================================== */
:root {
  --primary:#0066CC; --primary-dark:#004E9E; --primary-light:#3388DD; --primary-bg:#EEF5FF; --primary-border:#B8D4F5;
  --secondary:#00A3E0; --secondary-dark:#007BAB;
  --success:#0f9d58; --success-bg:#e6f4ea;
  --warning:#f57c00; --warning-bg:#fff3e0;
  --danger:#d32f2f;  --danger-bg:#fce8e6;
  --gray-50:#f8f9fa; --gray-100:#f1f3f4; --gray-200:#e8eaed; --gray-300:#dadce0;
  --gray-400:#bdc1c6; --gray-500:#9aa0a6; --gray-600:#80868b; --gray-700:#5f6368;
  --gray-800:#3c4043; --gray-900:#202124; --white:#ffffff;
  --font:'Noto Sans KR',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --shadow-sm:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 4px 12px rgba(0,0,0,.10),0 2px 6px rgba(0,0,0,.06);
  --shadow-lg:0 10px 30px rgba(0,0,0,.12);
  --radius:10px; --radius-sm:6px; --radius-lg:16px;
  --sidebar-w:220px; --header-h:60px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--gray-50);color:var(--gray-900);line-height:1.6;min-height:100vh}

/* ===== 헤더 ===== */
.app-header{background:var(--white);border-bottom:3px solid var(--primary);position:fixed;top:0;left:0;right:0;z-index:200;box-shadow:var(--shadow-md);height:var(--header-h)}
.header-inner{max-width:100%;padding:0 20px;display:flex;align-items:center;height:100%;gap:12px}
.header-logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.header-logo img{height:30px;width:auto}
.logo-divider{width:1px;height:26px;background:var(--gray-300)}
.logo-title{display:block;font-size:14px;font-weight:700;color:var(--primary);line-height:1.2}
.logo-sub{display:block;font-size:10px;color:var(--gray-500)}
.header-nav{display:flex;gap:2px;flex:1;justify-content:center}
.nav-btn{display:flex;align-items:center;gap:6px;padding:7px 14px;border:none;background:transparent;color:var(--gray-700);font-size:13px;font-weight:500;font-family:var(--font);border-radius:var(--radius-sm);cursor:pointer;transition:all .2s;white-space:nowrap;border-bottom:3px solid transparent}
.nav-btn:hover{background:var(--primary-bg);color:var(--primary)}
.nav-btn.active{background:var(--primary-bg);color:var(--primary);font-weight:700;border-bottom-color:var(--primary)}
.header-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.erp-date{font-size:12px;color:var(--gray-500);white-space:nowrap}

/* ===== ERP 레이아웃 ===== */
.erp-layout{display:flex;margin-top:var(--header-h);min-height:calc(100vh - var(--header-h))}

/* ===== 사이드바 ===== */
.sidebar{width:var(--sidebar-w);background:var(--white);border-right:1px solid var(--gray-200);position:fixed;top:var(--header-h);bottom:0;left:0;overflow-y:auto;z-index:100;box-shadow:var(--shadow-sm)}
.sub-nav{padding:12px 8px}
.sub-nav.hidden{display:none}
.sub-nav-title{font-size:11px;font-weight:700;color:var(--gray-500);text-transform:uppercase;letter-spacing:1px;padding:8px 10px 6px;border-bottom:1px solid var(--gray-200);margin-bottom:6px;display:flex;align-items:center;gap:6px}
.sub-btn{display:flex;align-items:center;gap:8px;width:100%;padding:9px 12px;border:none;background:transparent;color:var(--gray-700);font-size:13px;font-family:var(--font);border-radius:var(--radius-sm);cursor:pointer;transition:all .15s;text-align:left;margin-bottom:2px}
.sub-btn:hover{background:var(--primary-bg);color:var(--primary)}
.sub-btn.active{background:var(--primary-bg);color:var(--primary);font-weight:600}
.sub-btn i{width:16px;color:inherit;flex-shrink:0}

/* ===== 메인 콘텐츠 ===== */
.erp-main{margin-left:var(--sidebar-w);flex:1;padding:24px 28px 60px;min-width:0}

/* ===== 페이지 콘텐츠 ===== */
.page-content{display:none;animation:fadeIn .2s ease}
.page-content.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}

/* ===== 페이지 헤더 — 스크롤 시 상단 고정 ===== */
.page-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:20px;flex-wrap:wrap;gap:12px;
  position:sticky;top:var(--header-h);z-index:50;
  background:var(--gray-50);
  padding:10px 0 10px;
  margin-top:-4px;
}
.page-title{font-size:20px;font-weight:700;color:var(--gray-900);display:flex;align-items:center;gap:9px}
.page-title i{color:var(--primary)}

/* ===== 버튼 ===== */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;font-family:var(--font);cursor:pointer;border:2px solid transparent;transition:all .2s;white-space:nowrap;text-decoration:none}
.btn-primary{background:var(--primary);color:var(--white);border-color:var(--primary)} .btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark)}
.btn-secondary{background:var(--secondary);color:var(--white);border-color:var(--secondary)} .btn-secondary:hover{background:var(--secondary-dark)}
.btn-outline{background:transparent;color:var(--gray-700);border-color:var(--gray-300)} .btn-outline:hover{background:var(--gray-100);border-color:var(--gray-400)}
.btn-blue-outline{background:transparent;color:var(--primary);border-color:var(--primary)} .btn-blue-outline:hover{background:var(--primary-bg)}
.btn-success{background:var(--success);color:var(--white);border-color:var(--success)} .btn-success:hover{background:#0b8043}
.btn-pdf{background:#E53935;color:var(--white);border-color:#E53935} .btn-pdf:hover{background:#C62828}
.btn-share{background:#00897B;color:var(--white);border-color:#00897B} .btn-share:hover{background:#00695C}
.btn-danger-outline{background:transparent;color:var(--danger);border-color:var(--danger)} .btn-danger-outline:hover{background:var(--danger-bg)}
.btn-won{background:#7B1FA2;color:var(--white);border-color:#7B1FA2} .btn-won:hover{background:#6A1B9A}
.btn-sm{padding:5px 11px;font-size:12px}
.btn-group{display:flex;gap:8px;flex-wrap:wrap}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ===== 통계 카드 ===== */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat-card{background:var(--white);border-radius:var(--radius);padding:18px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow-sm);border:1px solid var(--gray-200);transition:all .2s;cursor:default}
.stat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.stat-icon{width:48px;height:48px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.stat-icon.blue{background:var(--primary-bg);color:var(--primary)} .stat-icon.cyan{background:#E0F7FA;color:var(--secondary)}
.stat-icon.orange{background:var(--warning-bg);color:var(--warning)} .stat-icon.green{background:var(--success-bg);color:var(--success)}
.stat-icon.purple{background:#F3E5F5;color:#7B1FA2} .stat-icon.red{background:var(--danger-bg);color:var(--danger)}
.stat-info{display:flex;flex-direction:column}
.stat-label{font-size:11px;color:var(--gray-500);font-weight:500}
.stat-value{font-size:20px;font-weight:700;color:var(--gray-900)}

/* ===== 카드 ===== */
.card{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow-sm);border:1px solid var(--gray-200);overflow:hidden}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--gray-200);background:var(--gray-50)}
.card-title{font-size:13px;font-weight:700;color:var(--gray-800);display:flex;align-items:center;gap:7px}
.card-title i{color:var(--primary)}
.card-body{padding:18px}

/* ===== 유틸 ===== */
.mt-4{margin-top:4px} .mt-16{margin-top:16px} .mt-24{margin-top:24px}
.text-right{text-align:right} .text-center{text-align:center}
.hidden{display:none!important}

/* ===== 필터 ===== */
.list-filters{display:flex;gap:8px;align-items:center}
.filter-select,.filter-input{padding:6px 10px;border:1px solid var(--gray-300);border-radius:var(--radius-sm);font-size:12px;font-family:var(--font);color:var(--gray-800);background:var(--white);outline:none}
.filter-select:focus,.filter-input:focus{border-color:var(--primary)}

/* ===== 데이터 테이블 ===== */
/* table-wrapper: 가로 스크롤 + 세로 스크롤 컨테이너
   - thead th 에 position:sticky; top:0 을 주면 wrapper 내에서 헤더가 항상 상단 고정
   - max-height 는 JS(updateStickyTableTop)가 동적으로 계산해 style 속성으로 덮어씀
   - CSS 기본값은 JS 계산 전 초기 렌더링 보호용 (앱헤더60 + 페이지헤더58 + 여백80 = 198px) */
.table-wrapper{
  overflow-x:auto;
  overflow-y:auto;
  max-height:calc(100vh - 198px);
  position:relative; /* sticky 기준점 명시 */
}
.data-table{width:100%;border-collapse:collapse;font-size:13px}
.data-table th{
  padding:10px 12px;text-align:center;
  background:var(--gray-50);color:var(--gray-600);
  font-weight:600;font-size:11px;
  border-bottom:2px solid var(--gray-200);white-space:nowrap;
  /* ▼ table-wrapper 스크롤 컨테이너 기준으로 top:0 고정 */
  position:sticky;top:0;z-index:10;
  /* border-collapse:collapse 와 충돌 방지: box-shadow로 하단선 보완 */
  box-shadow:inset 0 -2px 0 var(--gray-200);
}
/* 모달 내부 테이블도 동일하게 top:0 */
.modal-box .data-table th { top:0; z-index:5; }
.data-table td{padding:11px 12px;border-bottom:1px solid var(--gray-100);color:var(--gray-800);vertical-align:middle}
.data-table tbody tr:hover{background:var(--primary-bg)}
.data-table tbody tr:last-child td{border-bottom:none}
.empty-row td{text-align:center;padding:48px;color:var(--gray-400);font-size:13px;line-height:2.2}

/* 배지 */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600}
/* 청구서 4단계 상태 배지 */
.badge-draft    {background:#f1f5f9;color:#475569;border:1px solid #cbd5e1}      /* 제작완료 — 회색 */
.badge-sent     {background:#eff6ff;color:#2563eb;border:1px solid #bfdbfe}      /* 발송완료 — 파랑 */
.badge-issued   {background:#eff6ff;color:#2563eb;border:1px solid #bfdbfe}      /* 구버전 호환 */
.badge-internal {background:#fff7ed;color:#c2410c;border:1px solid #fed7aa}      /* 내부승인 — 주황 */
.badge-approved {background:#fff7ed;color:#c2410c;border:1px solid #fed7aa}      /* 구버전 호환 */
.badge-customer {background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0}      /* 고객승인 — 초록 */
.badge-paid     {background:#eef2ff;color:#4338ca;border:1px solid #c7d2fe}      /* 납부완료 — 보라 */
.badge-active{background:var(--success-bg);color:var(--success)}
.badge-inactive{background:var(--gray-100);color:var(--gray-500)}
.badge-pending{background:var(--warning-bg);color:var(--warning)}

/* 액션 버튼 */
.action-btns{display:flex;gap:5px}
.action-btn{width:28px;height:28px;border:1px solid var(--gray-300);background:var(--white);border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--gray-600);font-size:11px;transition:all .15s}
.action-btn:hover{background:var(--primary-bg);color:var(--primary);border-color:var(--primary)}
.action-btn.danger:hover{background:var(--danger-bg);color:var(--danger);border-color:var(--danger)}
.action-btn.success:hover{background:var(--success-bg);color:var(--success);border-color:var(--success)}

/* ===== 폼 ===== */
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.invoice-form{display:flex;flex-direction:column}
.form-group{margin-bottom:13px} .form-group:last-child{margin-bottom:0}
.form-label{display:block;font-size:12px;font-weight:600;color:var(--gray-700);margin-bottom:4px}
.required{color:var(--primary)}
.form-control{width:100%;padding:8px 11px;border:1px solid var(--gray-300);border-radius:var(--radius-sm);font-size:13px;font-family:var(--font);color:var(--gray-900);background:var(--white);transition:border-color .2s;outline:none}
.form-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,102,204,.09)}
.form-control[readonly]{background:var(--gray-50);color:var(--gray-500)}
textarea.form-control{resize:vertical;line-height:1.6}
.items-table .form-control{padding:5px 7px;font-size:12px;border-radius:3px}
.items-table td{padding:5px 7px}
.calc-field{background:var(--primary-bg)!important;color:var(--primary-dark)!important;text-align:right;font-weight:600}
.remove-row-btn{width:24px;height:24px;border:none;background:var(--danger-bg);color:var(--danger);border-radius:3px;cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;transition:all .15s}
.remove-row-btn:hover{background:var(--danger);color:var(--white)}

/* ===== 합계 박스 ===== */
.summary-box{background:var(--white);border:2px solid var(--primary);border-radius:var(--radius);padding:18px 22px}
.summary-grid{display:flex;flex-wrap:wrap}
.summary-item{flex:1;min-width:140px;padding:9px 14px;border-right:1px solid var(--gray-200);display:flex;flex-direction:column;gap:3px}
.summary-item:last-child{border-right:none} .summary-item.total{background:var(--primary-bg);border-radius:var(--radius-sm)}
.summary-label{font-size:11px;color:var(--gray-500);font-weight:600}
.summary-value{font-size:15px;font-weight:700;color:var(--gray-900)}
.summary-value.discount{color:var(--danger)}
.summary-value.total-value{font-size:18px;color:var(--primary)}

/* ===== 파이프라인 ===== */
.pipeline-board{display:flex;gap:12px;overflow-x:auto;padding-bottom:12px;min-height:500px}
.pipeline-col{flex:0 0 200px;display:flex;flex-direction:column;gap:8px}
.pipeline-col-header{padding:10px 12px;border-radius:var(--radius-sm);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:6px}
.pipeline-count{background:rgba(255,255,255,.7);border-radius:20px;padding:1px 8px;font-size:11px;font-weight:700}
.stage-lead{background:#E3F2FD;color:#1565C0}
.stage-contact{background:#E8F5E9;color:#2E7D32}
.stage-proposal{background:#FFF3E0;color:#E65100}
.stage-negotiation{background:#F3E5F5;color:#6A1B9A}
.stage-won{background:#E0F2F1;color:#00695C}
.stage-lost{background:#FFEBEE;color:#B71C1C}
.pipeline-cards{display:flex;flex-direction:column;gap:8px;min-height:60px}
.pipeline-card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-sm);padding:12px;box-shadow:var(--shadow-sm);cursor:pointer;transition:all .2s;border-left:3px solid var(--primary)}
.pipeline-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.pipeline-card.stage-lead{border-left-color:#1565C0}
.pipeline-card.stage-contact{border-left-color:#2E7D32}
.pipeline-card.stage-proposal{border-left-color:#E65100}
.pipeline-card.stage-negotiation{border-left-color:#6A1B9A}
.pipeline-card.stage-won{border-left-color:#00695C}
.pipeline-card.stage-lost{border-left-color:#B71C1C;opacity:.7}
.pc-company{font-size:13px;font-weight:700;color:var(--gray-900);margin-bottom:4px}
.pc-contact{font-size:11px;color:var(--gray-500)}
.pc-interest{font-size:11px;color:var(--primary);margin-top:5px}
.pc-actions{display:flex;gap:4px;margin-top:8px;justify-content:flex-end}

/* ===== 전환 단계 안내 ===== */
.convert-flow{display:flex;align-items:center;justify-content:center;gap:12px;padding:20px;flex-wrap:wrap}
.convert-step{display:flex;flex-direction:column;align-items:center;gap:8px}
.step-icon{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px}
.step-icon.won{background:#E0F2F1;color:#00695C}
.step-icon.blue{background:var(--primary-bg);color:var(--primary)}
.step-icon.green{background:var(--success-bg);color:var(--success)}
.step-icon.cyan{background:#E0F7FA;color:var(--secondary)}
.step-label{font-size:11px;color:var(--gray-600);text-align:center;line-height:1.5}
.convert-arrow{font-size:20px;color:var(--gray-300)}
.convert-info-box{background:var(--primary-bg);border:1px solid var(--primary-border);border-radius:var(--radius-sm);padding:12px 16px;font-size:13px}

/* ===== 정기청구 스케줄 ===== */
.schedule-info-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.schedule-info-box{border-radius:var(--radius);padding:18px;text-align:center;cursor:pointer;transition:all .15s;user-select:none}
.schedule-info-box:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.12)}
/* 선택된 배너: 테두리+그림자 강조 */
.schedule-info-box.active-banner{outline:3px solid #f59e0b;outline-offset:2px;box-shadow:0 0 0 4px rgba(245,158,11,.2),0 4px 20px rgba(0,0,0,.12);transform:translateY(-2px)}
.schedule-info-box.day-all{background:#f8fafc;border:2px solid #64748b}
.schedule-info-box.day-all.active-banner{background:#f1f5f9;border-color:#f59e0b}
.schedule-info-box.day-all .sib-count{color:#334155}
.schedule-info-box.day-all .sib-title{color:#334155}
.schedule-info-box.day1{background:var(--primary-bg);border:2px solid var(--primary)}
.schedule-info-box.day1.active-banner{background:#dbeafe;border-color:#f59e0b}
.schedule-info-box.day20{background:var(--success-bg);border:2px solid var(--success)}
.schedule-info-box.day20.active-banner{background:#dcfce7;border-color:#f59e0b}
.sib-title{font-size:13px;font-weight:700;margin-bottom:8px;color:var(--gray-800)}
.sib-title i{margin-right:6px}
.sib-count{font-size:22px;font-weight:900;color:var(--primary);margin-bottom:4px;line-height:1.4}
.schedule-info-box.day20 .sib-count{color:var(--success)}
.sib-desc{font-size:11px;color:var(--gray-500)}

/* ===== 정기청구 실행 모달 ===== */
#run-schedule-modal .modal-box { display:flex; flex-direction:column; max-height:90vh; }
#run-schedule-modal .modal-body { flex:1; overflow-y:auto; }
#run-schedule-modal table thead th { position:sticky; top:0; z-index:1; background:var(--gray-50); }

/* ===== 필터 탭 ===== */
.filter-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.filter-tab{padding:5px 14px;border-radius:20px;border:1.5px solid var(--gray-300);background:var(--white);color:var(--gray-600);font-size:12px;font-weight:500;cursor:pointer;transition:all .15s}
.filter-tab:hover{border-color:var(--primary);color:var(--primary)}
.filter-tab.active{background:var(--primary);border-color:var(--primary);color:var(--white)}

/* ===== 고객사 목록 상태 필터 버튼 ===== */
.cust-status-btns{display:flex;flex-wrap:wrap;gap:4px}
.cust-pay-btns{display:flex;flex-wrap:wrap;gap:4px}
.cst-btn{padding:4px 10px;border-radius:14px;border:1.5px solid var(--gray-300);background:var(--white);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap}
.cst-btn.all.active,.cst-btn.all:hover{background:#374151;border-color:#374151;color:#fff}
.cst-btn.stable.active,.cst-btn.stable:hover{background:#059669;border-color:#059669;color:#fff}
.cst-btn.danger.active,.cst-btn.danger:hover{background:#dc2626;border-color:#dc2626;color:#fff}
.cst-btn.bad.active,.cst-btn.bad:hover{background:#ea580c;border-color:#ea580c;color:#fff}
.cst-btn.inquiry.active,.cst-btn.inquiry:hover{background:#8b5cf6;border-color:#8b5cf6;color:#fff}
.cst-btn.sabyon.active,.cst-btn.sabyon:hover{background:#7c3aed;border-color:#7c3aed;color:#fff}
.cst-btn.expired.active,.cst-btn.expired:hover{background:#6b7280;border-color:#6b7280;color:#fff}
.cst-btn.haeye.active,.cst-btn.haeye:hover{background:#9ca3af;border-color:#9ca3af;color:#fff}
.cst-btn.incu.active,.cst-btn.incu:hover{background:#0891b2;border-color:#0891b2;color:#fff}
/* 납부방식 필터 버튼 */
.cst-btn.pay-all.active,.cst-btn.pay-all:hover{background:#374151;border-color:#374151;color:#fff}
.cst-btn.pay-monthly.active,.cst-btn.pay-monthly:hover{background:#1d4ed8;border-color:#1d4ed8;color:#fff}
.cst-btn.pay-yearly.active,.cst-btn.pay-yearly:hover{background:#15803d;border-color:#15803d;color:#fff}
.cst-btn.pay-quarter.active,.cst-btn.pay-quarter:hover{background:#92400e;border-color:#92400e;color:#fff}
.cst-btn.pay-other.active,.cst-btn.pay-other:hover{background:#64748b;border-color:#64748b;color:#fff}

/* ===== 고객사 구분 배지 ===== */
.sc-badge{display:inline-block;padding:2px 7px;border-radius:4px;font-size:11px;font-weight:700;white-space:nowrap}
.sc-안정{background:#d1fae5;color:#065f46}
.sc-위험{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5}
.sc-부실{background:#fef9c3;color:#854d0e;border:1px solid #fde68a}
.sc-조회{background:#f5f3ff;color:#6d28d9}
.sc-사변{background:#ede9fe;color:#5b21b6}
.sc-해지{background:#f3f4f6;color:#6b7280}
.sc-해예{background:#e5e7eb;color:#9ca3af}
.sc-인큐{background:#ecfeff;color:#155e75}

/* ===== 고객사 통계 박스 ===== */
.cust-stat-grid{display:grid;gap:8px;margin-bottom:14px}
.cust-stat-all{grid-template-columns:repeat(9,1fr)}
.cust-stat-single{grid-template-columns:repeat(4,1fr)}
.cust-stat-box{border-radius:8px;padding:10px 12px;box-shadow:0 1px 3px rgba(0,0,0,.06);transition:transform .12s,box-shadow .12s}
.cust-stat-clickable{cursor:pointer}
.cust-stat-clickable:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.12)}
.csb-head{font-size:11px;font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:5px}
.csb-count{margin-left:auto;font-size:10px;color:#fff;padding:1px 6px;border-radius:10px;font-weight:700}
.csb-row{display:flex;justify-content:space-between;align-items:baseline;margin-top:3px}
.csb-lbl{font-size:10px;color:#6b7280}
.csb-val{font-size:13px;font-weight:700;color:#111827}
.csb-val small{font-size:9px;font-weight:400;color:#6b7280;margin-left:1px}
.csb-big{font-size:22px;font-weight:800;text-align:center;padding:6px 0}
.csb-big small{font-size:12px;font-weight:400;margin-left:2px}
@media(max-width:1400px){.cust-stat-all{grid-template-columns:repeat(5,1fr)}}
@media(max-width:900px){.cust-stat-all{grid-template-columns:repeat(3,1fr)}.cust-stat-single{grid-template-columns:repeat(2,1fr)}}

/* ===== 컬럼 리사이저 ===== */
.col-resizer{position:absolute;right:0;top:0;width:6px;height:100%;cursor:col-resize;z-index:10;background:transparent}
.col-resizer:hover,.col-resizer:active{background:rgba(59,130,246,.35)}
.cust-main-table{table-layout:fixed;width:100%}

/* ===== 도입서비스 셀 ===== */
.svc-cell{display:flex;flex-wrap:wrap;gap:3px;cursor:pointer;align-items:flex-start;max-width:100%}
.svc-cell:hover{text-decoration:none;opacity:.85}

/* ── 서비스 태그 3분류 ── */
/* 상품명 — 진한 파랑/인디고 */
.svc-tag-main {
  display:inline-block;background:#eff6ff;color:#1e40af;
  border:1.5px solid #93c5fd;border-radius:4px;
  padding:2px 7px;font-size:10px;font-weight:700;white-space:nowrap;flex-shrink:0;
}
/* 부가서비스 — 초록 계열 */
.svc-tag-addon {
  display:inline-block;background:#f0fdf4;color:#15803d;
  border:1px solid #86efac;border-radius:3px;
  padding:1px 5px;font-size:10px;white-space:nowrap;flex-shrink:0;
}
/* 기타서비스 — 기본(주황) */
.svc-tag-other {
  display:inline-block;background:#fff7ed;color:#92400e;
  border:1px solid #fcd34d;border-radius:3px;
  padding:1px 5px;font-size:10px;white-space:nowrap;flex-shrink:0;
}
/* 기타서비스 세부 항목별 색상 분류 */
/* 최초설치비 — 보라계열 */
.svc-tag-other-install {
  display:inline-block;background:#f5f3ff;color:#5b21b6;
  border:1px solid #c4b5fd;border-radius:3px;
  padding:1px 5px;font-size:10px;white-space:nowrap;flex-shrink:0;
}
/* 교육(n) — 하늘/청록 계열 */
.svc-tag-other-edu {
  display:inline-block;background:#ecfeff;color:#0e7490;
  border:1px solid #67e8f9;border-radius:3px;
  padding:1px 5px;font-size:10px;white-space:nowrap;flex-shrink:0;
}
/* 공문 — 회색 계열 */
.svc-tag-other-doc {
  display:inline-block;background:#f1f5f9;color:#475569;
  border:1px solid #94a3b8;border-radius:3px;
  padding:1px 5px;font-size:10px;white-space:nowrap;flex-shrink:0;
}
/* ERP/CRM — 오렌지 계열 */
.svc-tag-other-erp {
  display:inline-block;background:#fff7ed;color:#c2410c;
  border:1px solid #fb923c;border-radius:3px;
  padding:1px 5px;font-size:10px;font-weight:600;white-space:nowrap;flex-shrink:0;
}
/* 차량관제 — 녹색 계열 */
.svc-tag-other-car {
  display:inline-block;background:#f0fdf4;color:#15803d;
  border:1px solid #4ade80;border-radius:3px;
  padding:1px 5px;font-size:10px;white-space:nowrap;flex-shrink:0;
}
/* ISO — 진한 회색 */
.svc-tag-other-iso {
  display:inline-block;background:#f8fafc;color:#334155;
  border:1px solid #64748b;border-radius:3px;
  padding:1px 5px;font-size:10px;font-weight:600;white-space:nowrap;flex-shrink:0;
}
/* 스캐너 — 인디고 */
.svc-tag-other-scanner {
  display:inline-block;background:#eef2ff;color:#3730a3;
  border:1px solid #a5b4fc;border-radius:3px;
  padding:1px 5px;font-size:10px;white-space:nowrap;flex-shrink:0;
}
/* SSL/도메인 — 청색 계열 */
.svc-tag-other-ssl {
  display:inline-block;background:#eff6ff;color:#1d4ed8;
  border:1px solid #93c5fd;border-radius:3px;
  padding:1px 5px;font-size:10px;white-space:nowrap;flex-shrink:0;
}
/* 하위호환 인라인 태그 */
.svc-tag-inline{display:inline-block;background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;border-radius:3px;padding:1px 5px;font-size:10px;white-space:nowrap;flex-shrink:0}

/* ===== 고객사 테이블 ===== */
.cust-main-table td{font-size:12px;padding:7px 8px}
.cust-main-table th{font-size:11px;padding:8px 8px}
.cust-name-link{color:var(--primary);cursor:pointer;font-weight:600;text-decoration:none;white-space:nowrap}
.cust-name-link:hover{text-decoration:underline}
.cust-main-table td:nth-child(3){white-space:nowrap;max-width:130px;overflow:hidden;text-overflow:ellipsis}
.cust-main-table th[onclick]:hover{background:var(--gray-100);color:var(--primary)}
.cust-main-table th[onclick] span{font-size:10px;opacity:.7;margin-left:2px}
/* 고객사 목록 열 너비 설정 (17열)
   col: 1연번 2구분 3고객사명 4소재지 5약정인원 6유저당단가 7매출액
        8상품명 9부가서비스 10기타서비스
        11최초계약일 12계약기간 13납부방식 14계산서발행 15청구서발행 16컨설턴트(정) 17작업 */
.cust-main-table th:nth-child(1),
.cust-main-table td:nth-child(1)  { text-align:center; width:38px; }       /* 연번 */
.cust-main-table th:nth-child(2),
.cust-main-table td:nth-child(2)  { text-align:center; width:44px; }       /* 구분 */
.cust-main-table th:nth-child(3),
.cust-main-table td:nth-child(3)  { width:120px; }                         /* 고객사명 */
.cust-main-table th:nth-child(4),
.cust-main-table td:nth-child(4)  { text-align:center; width:48px; }       /* 소재지 */
.cust-main-table th:nth-child(5),
.cust-main-table td:nth-child(5)  { text-align:center; width:48px; }       /* 약정인원 */
.cust-main-table th:nth-child(6),
.cust-main-table td:nth-child(6)  { text-align:center; width:64px; }       /* 유저당단가 */
.cust-main-table th:nth-child(7),
.cust-main-table td:nth-child(7)  { text-align:right;  width:76px; }       /* 매출액 */
.cust-main-table th:nth-child(8),
.cust-main-table td:nth-child(8)  { min-width:120px; max-width:150px; text-align:center; }    /* 상품명 */
.cust-main-table th:nth-child(9),
.cust-main-table td:nth-child(9)  { min-width:180px; max-width:260px; }    /* 부가서비스 */
.cust-main-table th:nth-child(10),
.cust-main-table td:nth-child(10) { min-width:120px; max-width:200px; }    /* 기타서비스 */
.cust-main-table th:nth-child(11),
.cust-main-table td:nth-child(11) { text-align:center; width:68px; }       /* 최초계약일 */
.cust-main-table th:nth-child(12),
.cust-main-table td:nth-child(12) { text-align:center; width:64px; }       /* 계약기간 */
.cust-main-table th:nth-child(13),
.cust-main-table td:nth-child(13) { text-align:center; width:52px; }       /* 납부방식 */
.cust-main-table th:nth-child(14),
.cust-main-table td:nth-child(14) { text-align:center; width:60px; }       /* 계산서발행 */
.cust-main-table th:nth-child(15),
.cust-main-table td:nth-child(15) { text-align:center; width:60px; }       /* 청구서발행 */
.cust-main-table th:nth-child(16),
.cust-main-table td:nth-child(16) { text-align:center; width:60px; }       /* 컨설턴트(정) */
.cust-main-table th:nth-child(17),
.cust-main-table td:nth-child(17) { text-align:center; width:70px; }       /* 작업 */
/* 고객사 목록 테이블 thead 스튰키 강화 */
.cust-main-table thead th {
  position:sticky; top:0; z-index:12;
  background:var(--gray-50);
  box-shadow:inset 0 -2px 0 var(--gray-200);
}
/* 정기청구 스케줄 테이블 열 정렬 (16열)
   1:청구연번 2:청구상태 3:고객사 4:과금인원 5:납부방식 6:계약기간 7:구분
   8:상품명 9:부가서비스 10:기타서비스 11:계산서발행 12:청구서발행
   13:청구매출액 14:다음청구일 15:정컨설턴트 16:작업 */
.schedule-table { table-layout:auto; min-width:1400px }
.schedule-table th:nth-child(1),
.schedule-table td:nth-child(1)  { text-align:center; white-space:nowrap; width:90px; min-width:90px }  /* 청구연번 */
.schedule-table th:nth-child(2),
.schedule-table td:nth-child(2)  { text-align:center; width:76px; min-width:76px }  /* 청구상태 */
.schedule-table th:nth-child(3),
.schedule-table td:nth-child(3)  { white-space:nowrap; max-width:160px; overflow:hidden; text-overflow:ellipsis }  /* 고객사 */
.schedule-table th:nth-child(4),
.schedule-table td:nth-child(4)  { text-align:center; width:56px; min-width:56px }  /* 과금인원 */
.schedule-table th:nth-child(5),
.schedule-table td:nth-child(5)  { text-align:center; width:64px; min-width:64px }  /* 납부방식 */
.schedule-table th:nth-child(6),
.schedule-table td:nth-child(6)  { text-align:center; width:72px; min-width:72px }  /* 계약기간 */
.schedule-table th:nth-child(7),
.schedule-table td:nth-child(7)  { text-align:center; width:48px; min-width:48px }  /* 구분 */
.schedule-table th:nth-child(8),
.schedule-table td:nth-child(8)  { min-width:110px; max-width:150px }  /* 상품명 */
.schedule-table th:nth-child(9),
.schedule-table td:nth-child(9)  { min-width:160px; max-width:240px }  /* 부가서비스 */
.schedule-table th:nth-child(10),
.schedule-table td:nth-child(10) { min-width:100px; max-width:160px }  /* 기타서비스 */
.schedule-table th:nth-child(11),
.schedule-table td:nth-child(11) { text-align:center; width:68px; min-width:68px }  /* 계산서발행 */
.schedule-table th:nth-child(12),
.schedule-table td:nth-child(12) { text-align:center; width:68px; min-width:68px }  /* 청구서발행 */
.schedule-table th:nth-child(13),
.schedule-table td:nth-child(13) { text-align:right;  width:104px; min-width:104px } /* 청구매출액 */
.schedule-table th:nth-child(14),
.schedule-table td:nth-child(14) { text-align:center; width:60px; min-width:60px }  /* 다음청구일 */
.schedule-table th:nth-child(15),
.schedule-table td:nth-child(15) { text-align:center; width:68px; min-width:68px }  /* 정컨설턴트 */
.schedule-table th:nth-child(16),
.schedule-table td:nth-child(16) { text-align:center; width:110px; min-width:110px }  /* 작업 */
/* 상품명/부가서비스/기타서비스 셀 — 줄바꿈 허용 */
.schedule-table td:nth-child(8) .svc-cell,
.schedule-table td:nth-child(9) .svc-cell,
.schedule-table td:nth-child(10) .svc-cell { display:flex; flex-wrap:wrap; max-width:none; gap:3px; padding:2px 0 }

/* ===== SaaS 서브행 (subRow) 스타일 ===== */
.cust-subrow td, .sched-subrow td {
  font-size:11px;
  padding:4px 8px;
  border-top: 1px dashed #bae6fd;
}
.cust-subrow { background:#f0f9ff !important; }
.sched-subrow { background:#e0f2fe !important; }
/* 서브행 왼쪽 인덴트 표시선 */
.cust-subrow td:first-child,
.sched-subrow td:first-child {
  border-left: 3px solid #38bdf8;
  color:#0369a1;
  font-size:13px;
}
/* 서브행 매출액 열 */
.cust-subrow td:nth-child(7),
.sched-subrow td:nth-child(13) {
  font-weight:700;
  color:#0369a1;
}
/* 메인행 마지막 border 제거 시 시각적 연결 */
tr[style*="border-bottom:none"] td {
  border-bottom: none;
}

/* 정컨설턴트별 소계 카드 */
.consult-chip {
  display:inline-flex; align-items:center; gap:6px;
  background:#f0f4ff; border:1.5px solid var(--primary-light);
  border-radius:20px; padding:6px 14px; cursor:pointer;
  transition:all .15s; font-size:12px;
}
.consult-chip:hover { background:var(--primary); color:#fff; border-color:var(--primary); }
.consult-chip.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.consult-chip .chip-name { font-weight:700; }
.consult-chip .chip-cnt  { opacity:.7; font-size:11px; }
.consult-chip .chip-amt  { font-weight:800; color:var(--primary-dark); }
.consult-chip.active .chip-amt { color:#fff; }
.consult-chip:hover .chip-amt  { color:#fff; }

/* ===== 청구서 폼 — 제품/할인 빠른 추가 패널 ===== */
.quick-item-chip {
  display:inline-flex; flex-direction:column; align-items:flex-start;
  gap:2px; padding:6px 10px; border-radius:8px;
  border:1.5px solid var(--gray-200); background:#fff;
  cursor:pointer; transition:all .15s; font-size:11px; text-align:left;
  max-width:180px;
}
.quick-item-chip:hover { border-color:var(--primary); background:var(--primary-bg); }
.quick-item-chip .qic-name { font-weight:700; color:var(--gray-800); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:160px; }
.quick-item-chip .qic-price { color:var(--primary); font-size:10px; font-weight:600; }
.quick-disc-chip:hover { border-color:#dc2626; background:#fff5f5; }
.quick-disc-chip .qic-price { color:#dc2626; }

/* 수신인 자동채움 힌트 */
#cust-match-hint { font-size:11px; color:var(--primary); margin-top:4px; }
#cust-match-hint a { color:var(--primary); text-decoration:underline; }

/* 스케줄 소팅 헤더 */
.sched-sort-th { cursor:pointer; user-select:none; white-space:nowrap; }
.sched-sort-th:hover { background:var(--primary-bg)!important; color:var(--primary); }
.sort-icon { font-size:11px; opacity:.45; margin-left:2px; }
.sort-icon.asc  { opacity:1; color:var(--primary); }
.sort-icon.desc { opacity:1; color:var(--primary); }

/* ===== 견적서 관리 ===== */
.quote-stat-card {
  flex:1; min-width:100px;
  border:2px solid var(--primary);
  border-radius:10px; padding:10px 14px;
  background:#fff;
}
.qstat-label { font-size:11px; color:var(--gray-500); margin-bottom:4px; }
.qstat-val   { font-size:16px; font-weight:800; color:var(--primary); }

.quote-type-btn {
  display:inline-flex; align-items:center;
  padding:7px 16px; border-radius:8px;
  border:2px solid var(--gray-200);
  background:#fff; cursor:pointer;
  font-size:13px; font-weight:600;
  font-family:inherit; color:var(--gray-700);
  transition:all .15s;
}
.quote-type-btn:hover { border-color:var(--primary); }
.quote-type-btn.active {
  border-color:var(--primary);
  background:var(--primary-bg);
  color:var(--primary);
}

.quote-main-table th,
.quote-main-table td { white-space:nowrap; }
.quote-main-table td:nth-child(3) { font-weight:600; white-space:normal; max-width:160px; }

/* 견적서 빠른추가 패널 칩 */
.q-chip {
  display:inline-flex; flex-direction:column; align-items:flex-start;
  gap:1px; padding:4px 8px; border-radius:6px;
  border:1.5px solid #e2e8f0; background:#fff;
  cursor:pointer; transition:all .12s; font-size:11px;
  max-width:170px;
}
.q-chip:hover { border-color:#0066cc; background:#eff6ff; }
.q-chip-disc:hover { border-color:#dc2626; background:#fef2f2; }
.q-chip-name {
  font-weight:600; color:#0f172a;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:158px;
}
.q-chip-price { font-size:10px; color:#0066cc; font-weight:600; }

/* 스케줄 작업 버튼 */
.sched-share-btn  { background:#eef5ff!important; color:var(--primary)!important; }
.sched-exclude-btn { background:#fff8f0!important; color:#d97706!important; }
.sched-excluded-row { opacity:.4; background:#fafafa!important; }
.sched-excluded-row td { text-decoration:line-through; color:var(--gray-400)!important; }

/* 제품단가 테이블 (6열: 1제품명 2구분 3기본단가 4단위 5상태 6작업) */
.product-table th:nth-child(2),.product-table td:nth-child(2) { text-align:center }
.product-table th:nth-child(3),.product-table td:nth-child(3) { text-align:center }
.product-table th:nth-child(4),.product-table td:nth-child(4) { text-align:center }
.product-table th:nth-child(5),.product-table td:nth-child(5) { text-align:center }
.product-table th:nth-child(6),.product-table td:nth-child(6) { text-align:center }

/* 제품상세 테이블 (11열: 1ID 2제품명 3구분 4단가 5단위 6VAT 7유저 8추가단위 9용량 10상태 11작업) */
.product-detail-table th:nth-child(3),.product-detail-table td:nth-child(3) { text-align:center }
.product-detail-table th:nth-child(4),.product-detail-table td:nth-child(4) { text-align:center }
.product-detail-table th:nth-child(5),.product-detail-table td:nth-child(5) { text-align:center }
.product-detail-table th:nth-child(6),.product-detail-table td:nth-child(6) { text-align:center }
.product-detail-table th:nth-child(7),.product-detail-table td:nth-child(7) { text-align:center }
.product-detail-table th:nth-child(8),.product-detail-table td:nth-child(8) { text-align:center }
.product-detail-table th:nth-child(9),.product-detail-table td:nth-child(9) { text-align:center }
.product-detail-table th:nth-child(10),.product-detail-table td:nth-child(10) { text-align:center }
.product-detail-table th:nth-child(11),.product-detail-table td:nth-child(11) { text-align:center }

/* 할인 테이블 (10열: 1ID 2할인명 3구분 4유형 5단가할인 6기준→할인 7수량 8조건 9상태 10작업) */
.discount-table th:nth-child(3),.discount-table td:nth-child(3) { text-align:center }
.discount-table th:nth-child(4),.discount-table td:nth-child(4) { text-align:center }
.discount-table th:nth-child(5),.discount-table td:nth-child(5) { text-align:center }
.discount-table th:nth-child(7),.discount-table td:nth-child(7) { text-align:center }
.discount-table th:nth-child(9),.discount-table td:nth-child(9) { text-align:center }
.discount-table th:nth-child(10),.discount-table td:nth-child(10) { text-align:center }

/* 계약관리 테이블 (9열: 1계약번호 2고객사 3서비스 4계약시작 5계약만료 6납부방식 7계약금액 8상태 9작업) */
.contract-thead th:nth-child(4),.contract-thead th:nth-child(5),
.contract-thead th:nth-child(6),.contract-thead th:nth-child(8),
.contract-thead th:nth-child(9) { text-align:center }
#contract-list-body td:nth-child(4),#contract-list-body td:nth-child(5),
#contract-list-body td:nth-child(6),#contract-list-body td:nth-child(8),
#contract-list-body td:nth-child(9) { text-align:center }

/* 도입서비스 테이블 (8열: 1고객사 2서비스명 3인원 4단가 5월청구액 6납부방식 7시작일 8상태) */
.svc-usage-thead th:nth-child(3),.svc-usage-thead th:nth-child(4),
.svc-usage-thead th:nth-child(5),.svc-usage-thead th:nth-child(6),
.svc-usage-thead th:nth-child(7),.svc-usage-thead th:nth-child(8) { text-align:center }
#service-usage-body td:nth-child(3),#service-usage-body td:nth-child(4),
#service-usage-body td:nth-child(5),#service-usage-body td:nth-child(6),
#service-usage-body td:nth-child(7),#service-usage-body td:nth-child(8) { text-align:center }

/* 납부방식 테이블 (7열: 1고객사 2납부방식 3청구주기 4청구일 5다음청구일 6자동발행 7변경) */
.billing-method-thead th:nth-child(2),.billing-method-thead th:nth-child(3),
.billing-method-thead th:nth-child(4),.billing-method-thead th:nth-child(5),
.billing-method-thead th:nth-child(6),.billing-method-thead th:nth-child(7) { text-align:center }
#billing-method-body td:nth-child(2),#billing-method-body td:nth-child(3),
#billing-method-body td:nth-child(4),#billing-method-body td:nth-child(5),
#billing-method-body td:nth-child(6),#billing-method-body td:nth-child(7) { text-align:center }

/* 갱신알림 테이블 (8열: 1고객사 2서비스 3만료일 4D-Day 5납부방식 6갱신금액 7상태 8처리) */
.renewal-thead th:nth-child(3),.renewal-thead th:nth-child(4),
.renewal-thead th:nth-child(5),.renewal-thead th:nth-child(7),
.renewal-thead th:nth-child(8) { text-align:center }
#renewal-list-body td:nth-child(3),#renewal-list-body td:nth-child(4),
#renewal-list-body td:nth-child(5),#renewal-list-body td:nth-child(7),
#renewal-list-body td:nth-child(8) { text-align:center }

.consult-link{color:var(--primary);cursor:pointer;font-weight:500}
.consult-link:hover{text-decoration:underline}
.consult-link.consult-active{background:#e0edff;color:#1d4ed8;padding:1px 5px;border-radius:10px;font-weight:700}
.svc-link{color:var(--primary);cursor:pointer;font-size:11px;white-space:nowrap}
.svc-link:hover{text-decoration:underline}
.danger-row td{background:#fff0f0 !important}
/* .bad-row: 부실 행은 배경색 없음 - 배지 색상만으로 구분 */
.bad-row td{background:inherit !important}
.terminated-row td{color:#9ca3af !important}
.terminated-row td .cust-name-link{color:#9ca3af !important}
.terminated-row td .sc-badge{opacity:.6}

/* ===== 고객사 뷰어 ===== */
.viewer-section{margin-bottom:18px}
.viewer-section-title{font-size:12px;font-weight:700;color:var(--gray-500);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid var(--gray-200)}
.viewer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.viewer-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.viewer-item{background:var(--gray-50);border-radius:6px;padding:8px 12px}
.viewer-label{font-size:10px;color:var(--gray-500);margin-bottom:2px}
.viewer-value{font-size:13px;font-weight:600;color:var(--gray-900)}
.viewer-value.danger{color:#dc2626}
.viewer-value.success{color:#059669}
.svc-tag{display:inline-block;background:var(--primary-bg);color:var(--primary);border:1px solid var(--primary-border);border-radius:4px;padding:3px 9px;font-size:12px;margin:3px}

/* ===== 폼 섹션 타이틀 ===== */
.form-section-title{font-size:13px;font-weight:700;color:var(--gray-700);margin-bottom:8px;padding:6px 0}
.form-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}

/* 상품명 체크박스 레이블 */
.svc-check-label {
  display:inline-flex; align-items:center; gap:4px;
  cursor:pointer; user-select:none;
}
.svc-check-label input[type="checkbox"] { display:none; }
.svc-check-label input[type="checkbox"]:checked + span {
  outline:2.5px solid #1e40af;
  box-shadow:0 0 0 3px rgba(59,130,246,.25);
  font-weight:900;
}
.svc-check-label span { transition:all .15s; }

/* ===== 할인목록 ===== */
.discount-guide-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.discount-guide-list li{font-size:13px;color:var(--gray-700);padding-left:18px;position:relative}
.discount-guide-list li::before{content:'•';position:absolute;left:4px;color:var(--primary)}
.discount-badge-type{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600}
.badge-unit{background:#dbeafe;color:#1d4ed8}
.badge-free{background:#d1fae5;color:#065f46;font-weight:700}
.badge-fixed{background:#dcfce7;color:#15803d}
.badge-manual{background:#fef9c3;color:#854d0e}
.badge-free-cat{background:#a7f3d0;color:#064e3b}

/* ===== 요금 플랜 ===== */
.plans-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.plan-card{background:var(--white);border:2px solid var(--gray-200);border-radius:var(--radius);padding:20px;transition:all .2s}
.plan-card:hover{border-color:var(--primary);box-shadow:var(--shadow-md)}
.plan-card.featured{border-color:var(--primary);background:var(--primary-bg)}
.plan-name{font-size:16px;font-weight:700;color:var(--gray-900);margin-bottom:4px}
.plan-price{font-size:24px;font-weight:900;color:var(--primary);margin-bottom:8px}
.plan-price span{font-size:12px;font-weight:400;color:var(--gray-500)}
.plan-features{list-style:none;font-size:12px;color:var(--gray-600);line-height:2}
.plan-features li::before{content:"✓ ";color:var(--success);font-weight:700}

/* ===== 청구서 미리보기 ===== */
.invoice-document{background:var(--white);border:2px solid var(--primary);border-radius:var(--radius);padding:28px 32px;max-width:920px;margin:0 auto;box-shadow:var(--shadow-lg)}
.inv-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;border-bottom:3px double var(--primary);padding-bottom:10px}
.inv-title-left{display:flex;align-items:baseline;gap:9px}
.inv-title{font-size:26px;font-weight:900;color:var(--primary);letter-spacing:4px}
.inv-copy-label{font-size:12px;color:var(--gray-500)}
.inv-logo{height:32px;width:auto}
.inv-parties{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.inv-table{width:100%;border-collapse:collapse;font-size:11px}
.inv-table td,.inv-table th{border:1px solid var(--primary);padding:5px 7px;vertical-align:middle}
.inv-th{background:var(--primary);color:var(--white);font-weight:700;text-align:center;writing-mode:vertical-lr;text-orientation:mixed;padding:8px 6px;letter-spacing:3px;font-size:12px;white-space:nowrap}
.inv-label{background:var(--primary-bg);font-weight:600;color:var(--gray-700);font-size:11px;white-space:nowrap}
.inv-value{color:var(--gray-900);font-size:11px}
.inv-total-amount{font-size:17px;font-weight:900;color:var(--primary);text-align:right}
.due-date-cell{font-weight:700;color:var(--primary)}
.inv-section-title{font-size:12px;font-weight:700;color:var(--primary);margin:12px 0 3px}
.items-preview-table th,.discount-preview-table th{background:var(--primary);color:var(--white);font-size:11px;font-weight:700;text-align:center;padding:6px 7px}
.items-preview-table td,.discount-preview-table td{font-size:11px;padding:5px 7px}
.items-preview-table td:nth-child(n+4){text-align:right}
.items-subtotal td{background:var(--primary-bg);font-size:11px;padding:5px 7px}
.total-table{margin-top:10px}
.total-label{background:var(--primary)!important;color:var(--white)!important;font-weight:700!important;font-size:11px;text-align:center}
.grand-total-label{background:var(--primary-dark)!important}
.inv-grand-total{font-size:15px;font-weight:900;color:var(--primary);text-align:right}
.inv-conditions{margin-top:14px;padding:10px 12px;background:var(--primary-bg);border:1px solid var(--primary-border);border-radius:var(--radius-sm);font-size:11px;line-height:1.8}
.inv-condition-row{display:flex;gap:8px}
.inv-condition-label{font-weight:700;color:var(--primary);white-space:nowrap}
.inv-approve-area{margin-top:16px;display:flex;align-items:center;justify-content:flex-end;gap:14px}
.approve-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:20px;font-size:12px;font-weight:700}
.approve-badge.pending  {background:#f1f5f9;color:#475569}   /* 제작완료 */
.approve-badge.sent     {background:#eff6ff;color:#2563eb}   /* 발송완료 */
.approve-badge.approved {background:#fff7ed;color:#c2410c}   /* 내부승인 */
.approve-badge.customer {background:#f0fdf4;color:#15803d}   /* 고객승인 */
.approve-badge.paid     {background:#eef2ff;color:#4338ca}   /* 납부완료 */
.btn-approve{display:inline-flex;align-items:center;gap:7px;padding:10px 24px;background:var(--primary);color:var(--white);border:none;border-radius:var(--radius-sm);font-size:14px;font-weight:700;font-family:var(--font);cursor:pointer;transition:all .2s;letter-spacing:1px}
.btn-approve:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,102,204,.3)}
.btn-approve:disabled{background:var(--gray-300);cursor:not-allowed;transform:none;box-shadow:none}
.approve-stamp{font-size:24px;font-weight:900;color:var(--success);border:3px solid var(--success);padding:4px 14px;transform:rotate(-15deg);display:none;border-radius:4px}
.print-only{display:none}

/* ===== 공유 링크 ===== */
.share-box{background:var(--primary-bg);border:1px solid var(--primary-border);border-radius:var(--radius);padding:14px 18px;margin-bottom:16px;display:none}
.share-box.visible{display:block}
.share-box-title{font-size:13px;font-weight:700;color:var(--primary);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.share-link-row{display:flex;gap:8px;align-items:center}
.share-link-input{flex:1;padding:8px 10px;border:1px solid var(--primary-border);border-radius:var(--radius-sm);font-size:12px;font-family:monospace;background:var(--white);color:var(--gray-700);outline:none}

/* ===== 고객 배너 ===== */
.client-banner{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:var(--white);padding:14px 22px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.client-banner-text{font-size:13px;font-weight:500;opacity:.95}
.client-banner-text strong{font-size:15px;display:block;margin-bottom:2px}

/* ===== 토스트 ===== */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(70px);background:var(--gray-900);color:var(--white);padding:11px 22px;border-radius:22px;font-size:13px;font-weight:500;z-index:9999;opacity:0;transition:all .3s cubic-bezier(.175,.885,.32,1.275);pointer-events:none;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.success{background:var(--success)} .toast.error{background:var(--danger)} .toast.warning{background:var(--warning)} .toast.info{background:var(--primary)}

/* ===== 모달 ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
.modal-overlay.hidden{display:none}
.modal-box{background:var(--white);border-radius:var(--radius-lg);padding:26px;max-width:420px;width:92%;box-shadow:var(--shadow-lg);animation:fadeIn .2s ease;max-height:90vh;overflow-y:auto}
.modal-title{font-size:16px;font-weight:700;color:var(--gray-900);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.modal-body{font-size:13px;color:var(--gray-600);margin-bottom:18px;line-height:1.7;white-space:pre-line}
.modal-footer{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;padding-top:14px;border-top:1px solid var(--gray-200)}

/* ===== 청구서 월별 배너 ===== */
.inv-month-banners{margin-bottom:0}
.inv-banner-scroll{
  display:flex;gap:10px;overflow-x:auto;padding:4px 2px 10px;
  scrollbar-width:thin;scrollbar-color:var(--gray-300) transparent;
}
.inv-banner-scroll::-webkit-scrollbar{height:4px}
.inv-banner-scroll::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:4px}

.inv-month-banner{
  flex:0 0 180px;min-width:160px;
  background:var(--white);border:2px solid var(--gray-200);
  border-radius:var(--radius);padding:12px 14px;cursor:pointer;
  transition:all .18s ease;position:relative;overflow:hidden;
}
.inv-month-banner:hover{border-color:var(--primary);box-shadow:0 2px 10px rgba(37,99,235,.12)}
.inv-month-banner.active{border-color:var(--primary);background:var(--primary-bg);box-shadow:0 2px 12px rgba(37,99,235,.18)}
.inv-month-banner.active::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--primary);border-radius:var(--radius) var(--radius) 0 0;
}
.inv-banner-all{background:linear-gradient(135deg,#f8faff 0%,#eff6ff 100%)}
.inv-banner-all.active{background:linear-gradient(135deg,#dbeafe 0%,#bfdbfe 100%)}

.imb-label{font-size:11px;font-weight:600;color:var(--gray-500);margin-bottom:6px;display:flex;align-items:center;gap:5px}
.inv-month-banner.active .imb-label{color:var(--primary)}
.imb-total{font-size:16px;font-weight:700;color:var(--gray-800);margin-bottom:7px;line-height:1.2}
.inv-month-banner.active .imb-total{color:var(--primary)}
.imb-sub{display:flex;flex-direction:column;gap:3px;margin-bottom:8px}
.imb-paid{font-size:11px;color:#16a34a;display:flex;align-items:center;gap:4px}
.imb-unpaid{font-size:11px;color:#dc2626;display:flex;align-items:center;gap:4px}
.imb-bar{height:4px;background:var(--gray-200);border-radius:4px;margin-bottom:5px;overflow:hidden}
.imb-bar-fill{height:100%;background:linear-gradient(90deg,#16a34a,#22c55e);border-radius:4px;transition:width .4s ease}
.imb-count{font-size:10px;color:var(--gray-400)}

/* ===== 인쇄 ===== */
@media print{
  @page{size:A4;margin:12mm 15mm}
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  body{background:white;font-size:11px}
  .app-header,.sidebar,.no-print,.page-header,.btn,button,.share-box,.client-banner{display:none!important}
  .erp-layout{margin-top:0}
  .erp-main{margin-left:0;padding:0}
  .page-content{display:none!important}
  #page-invoice-preview{display:block!important}
  .invoice-document{box-shadow:none;padding:0;max-width:none;border:2px solid #0066CC}
  .print-only{display:flex!important}
  .inv-approve-area.no-print{display:none!important}
  .approve-stamp{display:block;margin-left:auto}
  .items-preview-table th,.discount-preview-table th,.inv-th,.total-label{background-color:#0066CC!important;color:white!important}
  .inv-label{background-color:#EEF5FF!important}
  .items-subtotal td{background-color:#EEF5FF!important}
}

/* ===== 반응형 ===== */
@media(max-width:1200px){.stats-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){
  .sidebar{width:180px} .erp-main{margin-left:180px}
  .form-grid-2{grid-template-columns:1fr}
  .inv-parties{grid-template-columns:1fr}
}
@media(max-width:768px){
  :root{--sidebar-w:0px}
  .sidebar{transform:translateX(-180px);width:180px}
  .erp-main{margin-left:0;padding:16px 12px 40px}
  .stats-grid{grid-template-columns:1fr 1fr;gap:10px}
  .pipeline-board{flex-direction:column}
  .pipeline-col{flex:none}
  .header-nav{display:none}
  .schedule-info-grid{grid-template-columns:1fr}
}

/* ===== 고객사 목록 페이지네이션 ===== */
#cust-pager{padding:10px 16px 6px;border-top:1px solid var(--gray-200)}
.cust-pager-wrap{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.pg-info{font-size:12px;color:var(--gray-500);white-space:nowrap}
.pg-btns{display:flex;gap:3px;align-items:center}
.pg-btn{min-width:32px;height:30px;padding:0 8px;border:1px solid var(--gray-200);background:var(--white);color:var(--gray-700);font-size:12px;font-weight:600;border-radius:6px;cursor:pointer;transition:all .15s;line-height:1}
.pg-btn:hover:not(:disabled){background:var(--primary-bg);border-color:var(--primary);color:var(--primary)}
.pg-btn.pg-active{background:var(--primary);border-color:var(--primary);color:#fff;cursor:default}
.pg-btn.pg-disabled,.pg-btn:disabled{color:var(--gray-300);border-color:var(--gray-100);cursor:not-allowed;background:var(--gray-50)}