/* ==============================================
   ZioYou ERP - 통합 스타일시트
   Primary: #0066CC  |  Font: Noto Sans KR
   ============================================== */

/* ══════════════════════════════════════════════
   앱 초기화 로딩 오버레이
   ══════════════════════════════════════════════ */
#app-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #0f172a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .4s ease, visibility .4s ease;
}
#app-loading-overlay.alo-hiding {
  opacity: 0;
  visibility: hidden;
}
#app-loading-overlay.alo-hidden {
  display: none;
}

.alo-box {
  width: 340px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  animation: aloBoxIn .5s cubic-bezier(.22,1,.36,1) both;
}
@keyframes aloBoxIn {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}

/* 브랜드 영역 */
.alo-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}
.alo-logo-ring {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(37,99,235,.15);
  border-radius: 50%;
  flex-shrink: 0;
}
.alo-ring-spin {
  animation: aloSpin 1.4s linear infinite;
  transform-origin: center;
}
@keyframes aloSpin {
  to { stroke-dashoffset: -120; }
}
.alo-title {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.3px;
  line-height: 1.2;
}
.alo-subtitle {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 3px;
  font-weight: 400;
}

/* 단계 리스트 */
.alo-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 16px 18px;
}
.alo-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: #64748b;
  transition: color .25s, transform .2s;
}
.alo-step.done {
  color: #4ade80;  /* 초록 */
  transform: translateX(2px);
}
.alo-step.active {
  color: #93c5fd;  /* 파랑 */
}
.alo-step-icon {
  font-size: 14px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  transition: transform .3s;
}
.alo-step.done  .alo-step-icon { transform: scale(1.15); }
.alo-step.active .alo-step-icon { animation: aloPulse .8s ease-in-out infinite alternate; }
@keyframes aloPulse {
  from { opacity:.6; }
  to   { opacity:1; }
}
.alo-step-label { font-weight: 500; }

/* 프로그레스 바 */
.alo-progress-wrap {
  height: 4px;
  background: rgba(255,255,255,.1);
  border-radius: 4px;
  overflow: hidden;
}
.alo-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #2563eb, #60a5fa);
  border-radius: 4px;
  transition: width .3s ease;
  box-shadow: 0 0 8px #3b82f680;
}
.alo-progress-label {
  text-align: right;
  font-size: 11px;
  color: #475569;
  margin-top: 4px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* admin 계정 전용 요소 — loginId='admin' 계정만 JS로 표시, 나머지는 항상 숨김 */
.admin-only { display: none; }
: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:16px;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;position:static}
.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)}

/* ── 상단 메뉴 hover 드롭다운 (위→아래 세로 목록) ── */
/* 래퍼: 호버한 nav-btn 아래에서 세로로 펼쳐짐 */
/* ===== 상단 메뉴 hover 드롭다운 (top-down 세로 목록) ===== */
.nav-dropdown-wrap{
  position:fixed;
  top:var(--header-h);
  /* left/width는 JS에서 각 버튼 위치에 맞게 동적 지정 */
  z-index:2000;
  pointer-events:none;
}
/* 실제 드롭다운 패널 */
.nav-dropdown{
  position:absolute;
  top:0;
  left:0;
  min-width:180px;
  display:flex;
  flex-direction:column;   /* ★ 위→아래 세로 목록 */
  gap:2px;
  padding:8px 6px 10px;
  background:#fff;
  border:1px solid #e2e8f0;
  border-top:3px solid var(--primary);
  border-radius:0 0 12px 12px;
  box-shadow:0 12px 36px rgba(0,0,0,.14);
  /* 닫힘: 위로 슬라이드 + 투명 */
  transform:translateY(-8px);
  opacity:0;
  pointer-events:none;
  transition:transform .22s cubic-bezier(.4,0,.2,1), opacity .18s;
  overflow:hidden;
}
.nav-dropdown-wrap.open .nav-dropdown{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}
#nav-dropdown-btns{
  display:flex;
  flex-direction:column;  /* ★ 반드시 세로 */
  gap:2px;
  width:100%;
}
.nav-dropdown-label{
  font-size:11px;font-weight:700;color:var(--primary);
  letter-spacing:.3px;
  padding:4px 10px 8px;
  border-bottom:1px solid #f1f5f9;
  margin-bottom:4px;
  display:flex;align-items:center;gap:5px;
  white-space:nowrap;
}
/* 세로 목록 버튼 */
.nav-dd-btn{
  display:flex;align-items:center;gap:9px;
  width:100%;
  padding:8px 14px;
  border:none;
  background:transparent;
  color:var(--gray-700);
  font-size:13px;font-weight:500;
  font-family:var(--font);
  border-radius:8px;
  cursor:pointer;
  transition:background .12s, color .12s, padding-left .12s;
  white-space:nowrap;
  text-align:left;
  box-sizing:border-box;
}
.nav-dd-btn:hover{
  background:var(--primary-bg);
  color:var(--primary);
  padding-left:18px;
}
.nav-dd-btn.active{
  background:var(--primary-bg);
  color:var(--primary);
  font-weight:700;
}
.nav-dd-btn i{font-size:12px;width:15px;flex-shrink:0;opacity:.8}
.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 레이아웃 ===== */
:root{--sidebar-collapsed:44px}
.erp-layout{display:flex;margin-top:var(--header-h);min-height:calc(100vh - var(--header-h))}

/* ===== 사이드바 (평상시 숨김 → hover 시 슬라이드) ===== */
.sidebar{
  width:var(--sidebar-collapsed);
  background:var(--white);
  border-right:1px solid var(--gray-200);
  position:fixed;top:var(--header-h);bottom:0;left:0;
  overflow:hidden;
  z-index:150;
  box-shadow:var(--shadow-sm);
  transition:width .22s cubic-bezier(.4,0,.2,1),box-shadow .22s;
  white-space:nowrap;
}
.sidebar:hover{
  width:var(--sidebar-w);
  box-shadow:var(--shadow-md);
  overflow-y:auto;
}
/* 사이드바 내부 텍스트 – 평소엔 투명, hover시 보임 */
.sidebar .sub-nav-title-text,
.sidebar .sub-btn-text,
.sidebar .sub-group-text{
  opacity:0;
  transition:opacity .18s .05s;
  overflow:hidden;
  display:inline-block;
}
.sidebar:hover .sub-nav-title-text,
.sidebar:hover .sub-btn-text,
.sidebar:hover .sub-group-text{
  opacity:1;
}
/* nav 전체는 항상 보임 (아이콘 표시용) */
.sub-nav{padding:12px 4px;overflow:hidden}
.sidebar:hover .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;
  overflow:hidden;
}
.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;
  overflow:hidden;
}
.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;min-width:16px}

/* ── 사이드바 신청관리 그룹 ── */
.sub-group-header{
  display:flex;align-items:center;gap:8px;
  padding:9px 12px;font-size:13px;font-weight:700;
  color:var(--gray-700);cursor:pointer;
  border-radius:var(--radius-sm);
  transition:background .15s;user-select:none;
  margin-bottom:2px;overflow:hidden;
}
.sub-group-header:hover{background:var(--primary-bg);color:var(--primary)}
.sub-group-chevron{margin-left:auto;font-size:10px;transition:transform .2s;color:var(--gray-400);flex-shrink:0}
.sub-group-body{overflow:hidden;transition:max-height .25s ease}
.sub-group-body.collapsed{display:none}
.sub-btn-child{padding-left:26px !important;font-size:12px !important}
/* .sub-group-divider → 하단에 통합 정의됨 */

/* ── 사이드바 축소 상태 보조 스타일 ── */
/* 평상시(축소) : sub-btn 아이콘만, 가운데 정렬 */
.sidebar:not(:hover) .sub-btn{
  padding:9px 0;
  justify-content:center;
}
.sidebar:not(:hover) .sub-group-header{
  padding:9px 0;
  justify-content:center;
}
.sidebar:not(:hover) .sub-group-chevron,
.sidebar:not(:hover) .sub-group-body,
.sidebar:not(:hover) .sub-group-divider{
  display:none;
}
.sidebar:not(:hover) .sub-nav-title{
  justify-content:center;
  border-bottom:none;
  padding:8px 0 6px;
}
/* hover 복원 */
.sidebar:hover .sub-btn{padding:9px 12px;justify-content:flex-start}
.sidebar:hover .sub-group-header{padding:9px 12px;justify-content:flex-start}
.sidebar:hover .sub-group-chevron{display:inline-block}
.sidebar:hover .sub-group-body.collapsed{display:none}
.sidebar:hover .sub-group-body:not(.collapsed){display:block}
.sidebar:hover .sub-group-divider{display:block}
.sidebar:hover .sub-nav-title{justify-content:flex-start;border-bottom:1px solid var(--gray-200);padding:8px 10px 6px}

/* ── 아이콘 hover 툴팁 (사이드바 축소 상태) ── */
.sidebar:not(:hover) .sub-btn[title]::after{
  display:none;
}

/* ===== 메인 콘텐츠 ===== */
.erp-main{margin-left:var(--sidebar-collapsed);flex:1;padding:24px 28px 60px;min-width:0;transition:margin-left .22s cubic-bezier(.4,0,.2,1)}

/* ===== 페이지 콘텐츠 ===== */
.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}
.stats-grid.app-stats-5{grid-template-columns:repeat(5,1fr);gap:8px}
.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}
.app-stats-5 .stat-card{padding:12px 10px;gap:8px}
.app-stats-5 .stat-icon{width:36px;height:36px;font-size:15px}
.app-stats-5 .stat-value{font-size:16px}
.app-stats-5 .stat-label{font-size:10px}
.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-icon.soft-red{background:#fef2f2;color:#f87171}
.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;
}
.data-table{width:100%;border-collapse:collapse;font-size:13px}
.data-table th{
  padding:10px 12px;text-align:center;
  background:#f0f4fa;color:#111827;
  font-weight:700;font-size:12px;
  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; background:#f0f4fa; color:#111827; }
.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}

/* ===== 드래그&드롭 + 인라인편집 ===== */
.drag-row { cursor:default; transition:background .1s; }
.drag-row.drag-over { background:#eff6ff !important; outline:2px dashed var(--primary); outline-offset:-2px; }
.drag-handle { cursor:grab !important; padding:11px 8px !important; text-align:center; width:28px; }
.drag-handle:active { cursor:grabbing !important; }
.editable-cell { cursor:pointer; position:relative; outline:none; }
.editable-cell:hover { background:#f0f9ff !important; outline:1px dashed #93c5fd; outline-offset:-2px; }
.editable-cell:hover::after { content:'✎'; position:absolute; top:3px; right:4px; font-size:9px; color:#93c5fd; }
.editable-cell:focus { outline:none; }

/* 배지 */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap}
/* 청구서 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)}
.badge-danger{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}

/* 액션 버튼 */
.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)}
.action-btn.primary:hover{background:var(--primary-bg);color:var(--primary);border-color:var(--primary)}

/* ===== 티켓 전용 ===== */
/* 활동(리플) 뱃지 — 최종 리플 인라인 표시 */
.tk-act-badge{
  display:inline-flex;align-items:center;gap:4px;
  background:#eff6ff;color:#2563eb;border:1px solid #bfdbfe;
  border-radius:6px;padding:3px 7px;font-size:11px;
  cursor:pointer;max-width:100%;transition:background .15s;overflow:hidden;
}
.tk-act-badge:hover{background:#dbeafe;}
.tk-act-author{font-weight:700;white-space:nowrap;flex-shrink:0;margin-right:2px}
.tk-act-author::after{content:':';margin-right:3px}
.tk-act-text{color:#475569;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.tk-act-count{
  flex-shrink:0;background:#2563eb;color:#fff;
  border-radius:10px;padding:1px 6px;font-size:10px;font-weight:700;margin-left:3px;
}
/* 상태 뱃지 클릭 */
.tk-status-btn{cursor:pointer;transition:opacity .15s;user-select:none}
.tk-status-btn:hover{opacity:.75;}
/* 유형 뱃지 클릭 */
.tk-type-btn{cursor:pointer;transition:transform .1s;user-select:none}
.tk-type-btn:hover{transform:scale(1.08);}
/* 유형 필터 활성 표시 */
.tk-type-active{outline:2px solid #0066cc;outline-offset:2px;}

/* ===== 폼 ===== */
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.invoice-form{display:flex;flex-direction:column}

/* ══════════════════════════════════════════════
   청구서 작성 화면 — 4열 헤더 레이아웃
   ①발행정보+수신인(세로) | ②계약요금 | ③지난청구 | ④신청관리
   모두 같은 높이로 나란히 배치
   ══════════════════════════════════════════════ */
.inv-form-4col-main{
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr;
  gap:8px;
  align-items:stretch;   /* 모든 열 동일 높이 */
  width:100%;
}
/* 1열: 발행정보 + 수신인정보 세로 스택 — 그리드 셀 전체 높이 */
.inv-left-stack{
  display:flex;
  flex-direction:column;
  gap:8px;
  /* 그리드 stretch로 높이가 자동 결정되므로 명시 불필요하지만 안전하게 */
  align-self:stretch;
}
.inv-left-stack > .card{
  flex:1;           /* 두 카드가 균등 높이 분배 */
  min-height:0;
}
/* 2·3·4열 공통: card 자체가 열 전체 높이 채움 */
.inv-right-contract,
.inv-prev-bill-card,
.inv-apply-card{
  display:flex;
  flex-direction:column;
  align-self:stretch;
}
.inv-right-contract .card-body,
.inv-prev-bill-card .card-body,
.inv-apply-card .card-body{
  flex:1;
  overflow-y:auto;
  min-height:0;
}
/* 지난청구/신청관리 배경 */
.inv-prev-bill-card{background:linear-gradient(160deg,#fafaf7 0%,#f5f5ed 100%)}
.inv-apply-card{background:linear-gradient(160deg,#f0fdf4 0%,#ecfdf5 100%)}
/* 신청관리 빈 상태 */
.inv-apply-empty{color:#94a3b8;font-size:11px;text-align:center;padding:24px 8px;line-height:1.7}
/* 하위 호환 클래스 */
.inv-form-3col-main{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;align-items:stretch}
.inv-form-2col{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:stretch}
.inv-form-3col{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:12px;align-items:start}
/* inv-header-card: 그리드 셀 전체 높이 채움 */
.inv-header-card{
  display:flex;
  flex-direction:column;
  height:100%;
  box-sizing:border-box;
}
.inv-header-card .card-body{padding:8px 14px;flex:1;min-height:0}
.inv-hrow{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.inv-hrow:last-child{margin-bottom:0}
.inv-hlbl{font-size:11px;font-weight:600;color:var(--gray-600);white-space:nowrap;min-width:68px;flex-shrink:0}
.inv-hinput{height:28px;font-size:12px;padding:3px 8px;line-height:1.3}
/* select는 브라우저마다 높이 계산 달라 min-height로 보장 */
select.inv-hinput{height:32px;min-height:32px;padding:2px 6px;font-size:11px}
.inv-contract-card{background:linear-gradient(135deg,#f0f7ff 0%,#e8f4fd 100%)}
.inv-ci-row{display:flex;align-items:center;padding:3px 0;border-bottom:1px dashed #dbeafe;gap:6px;font-size:11px}
.inv-ci-row:last-child{border-bottom:none}
.inv-ci-lbl{color:#3b82f6;font-weight:600;min-width:72px;flex-shrink:0}
.inv-ci-val{color:#1e293b;font-weight:500;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inv-ci-badge{display:inline-block;background:#dbeafe;color:#1d4ed8;border-radius:4px;padding:1px 6px;font-size:10px;font-weight:700;margin-right:3px;margin-bottom:2px}
.inv-ci-photo{width:28px;height:28px;border-radius:50%;object-fit:cover;border:2px solid #bfdbfe;flex-shrink:0}
.inv-ci-avatar{width:28px;height:28px;border-radius:50%;background:#3b82f6;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}

/* ── 지난청구/신청관리: 미리보기/인쇄/공유 시 완전 숨김 ── */
#page-invoice-preview #inv-prev-bill-wrap,
.invoice-preview-wrap #inv-prev-bill-wrap,
.share-preview #inv-prev-bill-wrap{display:none!important}
#page-invoice-preview #inv-apply-wrap,
.invoice-preview-wrap #inv-apply-wrap,
.share-preview #inv-apply-wrap{display:none!important}
@media print{#inv-prev-bill-wrap,#inv-apply-wrap{display:none!important}}

/* ── 지난 청구 내역 — 1줄 콤팩트 행 ── */
.prev-bill-hdr{
  display:grid;
  grid-template-columns:60px 1fr 76px 46px 42px;
  gap:3px;padding:3px 8px;
  background:#f1f5f9;border-bottom:2px solid #e2e8f0;
  position:sticky;top:0;z-index:1;
}
.prev-bill-hdr span{font-size:9px;font-weight:700;color:#64748b;text-transform:uppercase;white-space:nowrap;overflow:hidden}
.prev-bill-hdr .pb-h-amt,.prev-bill-hdr .pb-h-st,.prev-bill-hdr .pb-h-ac{text-align:center}
.prev-bill-row{
  display:grid;
  grid-template-columns:60px 1fr 76px 46px 42px;
  align-items:center;gap:3px;
  padding:3px 8px;
  border-bottom:1px solid #ebebdf;
  cursor:pointer;transition:background .12s;
}
.prev-bill-row:last-child{border-bottom:none}
.prev-bill-row:hover{background:#fffbea}
.prev-bill-date{font-size:10px;color:#64748b;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prev-bill-items{font-size:10px;color:#374151;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prev-bill-amt{font-size:10px;font-weight:700;color:#1d4ed8;text-align:right;white-space:nowrap}
.prev-bill-status{font-size:9px;font-weight:700;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prev-bill-actions{display:flex;gap:2px;justify-content:center;align-items:center}
.pb-act-btn{
  background:none;border:1px solid #e2e8f0;border-radius:3px;
  cursor:pointer;padding:1px 4px;font-size:9px;color:#64748b;
  line-height:1.4;transition:all .12s;white-space:nowrap;
}
.pb-act-btn:hover{background:#eff6ff;border-color:#93c5fd;color:#1d4ed8}
.pb-act-btn.copy:hover{background:#f0fdf4;border-color:#86efac;color:#15803d}
/* 신청관리 카드 빈 상태 */
.inv-apply-empty{color:#94a3b8;font-size:11px;text-align:center;padding:24px 8px;line-height:1.6}

/* ── 제품/할인 팝업 ── 드래그 가능, 배경 투명(바탕화면 참고 용이) */
.inv-picker-overlay{position:fixed;inset:0;background:transparent;z-index:10000;display:flex;align-items:center;justify-content:center;pointer-events:none}
.inv-picker-modal{background:#fff;border-radius:14px;box-shadow:0 8px 40px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.15);width:680px;max-width:95vw;max-height:80vh;display:flex;flex-direction:column;overflow:hidden;pointer-events:all;position:fixed}
.inv-picker-header{padding:14px 18px;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#0066cc,#0284c7);cursor:move;border-radius:14px 14px 0 0}
.inv-picker-header h3{color:#fff;font-size:14px;margin:0;display:flex;align-items:center;gap:8px}
.inv-picker-close{background:rgba(255,255,255,.2);border:none;color:#fff;width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center}
.inv-picker-close:hover{background:rgba(255,255,255,.35)}
.inv-picker-toolbar{padding:10px 16px;border-bottom:1px solid #f1f5f9;display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:#f8fafc}
.inv-picker-toolbar .form-control{height:36px!important;font-size:13px!important;padding:6px 10px!important}
.inv-picker-body{flex:1;overflow-y:auto;padding:12px 16px}
.inv-picker-footer{padding:10px 16px;border-top:1px solid #e2e8f0;display:flex;justify-content:flex-end;gap:8px;background:#f8fafc}
.inv-disc-picker-modal{background:#fff;border-radius:14px;box-shadow:0 8px 40px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.15);width:560px;max-width:95vw;max-height:75vh;display:flex;flex-direction:column;overflow:hidden;pointer-events:all;position:fixed}
.inv-disc-picker-header{padding:14px 18px;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#059669,#0d9488)}

/* ── 미리보기 계약정보 그리드 셀 ── */
.prev-ci-cell{padding:5px 10px;border-right:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0}
.prev-ci-cell:nth-child(4n){border-right:none}
.prev-ci-lbl{font-size:9px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
.prev-ci-val{font-size:11px;font-weight:600;color:#1e293b}
.prev-ci-consult{display:flex;align-items:center;gap:6px}
.prev-ci-photo{width:26px;height:26px;border-radius:50%;object-fit:cover;border:1.5px solid #bfdbfe}
.prev-ci-avatar{width:26px;height:26px;border-radius:50%;background:#3b82f6;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700}
.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)}

/* ===== 파이프라인 ===== */
/* board: 화면 너비에 꽉 맞게 늘어남, 가로 스크롤 없음 */
.pipeline-board{display:flex;gap:10px;padding-bottom:12px;min-height:500px;width:100%}
/* 기본 컬럼: 균등 비율로 늘어남 */
.pipeline-col{flex:1 1 0;min-width:0;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}
.stage-longterm{background:#FEF3C7;color:#92400E}
/* ── 리텐션 파이프라인 단계 헤더 색상 ── */
.stage-ret-detect{background:#FEE2E2;color:#B91C1C}
.stage-ret-analyze{background:#FFEDD5;color:#C2410C}
.stage-ret-persuade{background:#F3E8FF;color:#6D28D9}
.stage-ret-success{background:#DCFCE7;color:#15803D}
.stage-ret-hold{background:#CFFAFE;color:#0E7490}
.stage-ret-lost{background:#FEF2F2;color:#991B1B}
/* ── 리텐션 파이프라인 카드 왼쪽 테두리 ── */
.pipeline-card.stage-ret-detect{border-left-color:#EF4444}
.pipeline-card.stage-ret-analyze{border-left-color:#F97316}
.pipeline-card.stage-ret-persuade{border-left-color:#8B5CF6}
.pipeline-card.stage-ret-success{border-left-color:#16A34A}
.pipeline-card.stage-ret-hold{border-left-color:#0891B2}
.pipeline-card.stage-ret-lost{border-left-color:#DC2626;opacity:.75}
.pipeline-cards{display:flex;flex-direction:column;gap:8px;min-height:60px}
/* 유력 뱃지 */
.pc-badge-hot{font-size:9px;font-weight:800;background:#dc2626;color:#fff;border-radius:4px;padding:1px 5px;white-space:nowrap;flex-shrink:0;letter-spacing:.3px}
.pc-pinned{border-left-color:#dc2626!important}
/* 실패 구분박스 내 드롭 인디케이터 */
.lost-drop-indicator{height:3px;background:#dc2626;border-radius:2px;margin:2px 0;opacity:.8}
/* PT/실패/제안 컬럼 전용 너비
   제안+PT = 전체 board의 정확히 1/2 → 두 컬럼 동일 flex:1로 균등 분할
   실패 컬럼은 고정 */
/* 제안: 2열이므로 기본 컬럼의 2배 비율 */
#pipeline-proposal{flex:2 1 0;min-width:0}
/* PT: 현장/온라인 2박스이므로 2배 비율 */
#pipeline-negotiation.pipeline-col-pt{flex:2 1 0;min-width:0}
/* 실패: 3박스이므로 3배 비율 */
#pipeline-lost.pipeline-col-lost{flex:3 1 0;min-width:0}
/* PT 컬럼 구분박스 — 수평 2단 (현장/온라인) */
.pt-subgroup-row{display:flex;flex-direction:row;gap:5px;align-items:flex-start;width:100%}
.pt-subgroup{flex:1;min-width:0;border:1px solid #e9d5ff;border-radius:8px;overflow:hidden}
.pt-subgroup-header{display:flex;align-items:center;justify-content:space-between;padding:5px 8px;background:#f5f3ff;font-size:11px;font-weight:700;color:#6A1B9A}
.pt-subgroup-cnt{background:rgba(106,27,154,.15);border-radius:10px;padding:1px 6px;font-size:11px;font-weight:700;color:#6A1B9A}
.pt-subgroup-body{display:flex;flex-direction:column;gap:6px;padding:5px;min-height:40px;border-radius:0 0 8px 8px;transition:background .15s}
.pt-subgroup.pt-drag-over{outline:2px dashed #6A1B9A;outline-offset:-2px}
.pt-subgroup.pt-drag-over .pt-subgroup-body{background:rgba(106,27,154,.06)}
/* 실패 컬럼 구분박스 — 수평 3단 */
.lost-subgroup-row{display:flex;flex-direction:row;gap:5px;align-items:flex-start;width:100%}
.lost-subgroup{flex:1;min-width:0;border:1px solid #fecaca;border-radius:8px;overflow:hidden}
.lost-subgroup-header{display:flex;align-items:center;justify-content:space-between;padding:5px 8px;background:#ffebee;font-size:11px;font-weight:700;color:#B71C1C}
.lost-subgroup-cnt{background:rgba(183,28,28,.15);border-radius:10px;padding:1px 6px;font-size:11px;font-weight:700;color:#B71C1C}
.lost-subgroup-body{display:flex;flex-direction:column;gap:6px;padding:5px;min-height:40px;border-radius:0 0 8px 8px;transition:background .15s}
.lost-subgroup.lost-drag-over{outline:2px dashed #B71C1C;outline-offset:-2px}
.lost-subgroup.lost-drag-over .lost-subgroup-body{background:rgba(183,28,28,.06)}
/* 10개 초과 시 두 컬럼 — 카드 width:calc(50% - 4px) 로 2열 균등 */
.pipeline-cards.two-col{display:flex!important;flex-direction:row!important;flex-wrap:wrap;align-items:flex-start;gap:8px}
.pipeline-cards.two-col .pipeline-card{width:calc(50% - 4px);flex-shrink:0}
/* 장기영업 레인: 카드를 가로 배치 — 카드 너비를 다른 단계와 동일하게 맞춤 */
.pipeline-cards-longterm{flex-direction:row!important;flex-wrap:wrap;min-height:80px;padding:6px;gap:8px}
.pipeline-cards-longterm .pipeline-card{width:calc((100% - 8px * 9) / 10);min-width:120px;flex-shrink:0}
/* 장기영업 전체 레인 너비 */
.pipeline-board-longterm{display:flex}
.pipeline-col-longterm{width:100%;max-width:100%!important;flex:1!important}
/* 카드: 부모 컬럼/박스 너비에 맞게 100% 채움 → 모든 단계 동일 너비 */
.pipeline-card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-sm);padding:6px 10px;box-shadow:var(--shadow-sm);cursor:grab;transition:all .2s;border-left:3px solid var(--primary);user-select:none;width:100%;box-sizing:border-box}
.pipeline-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.pipeline-card.dragging{opacity:.45;transform:scale(.97);cursor:grabbing}
.pipeline-col.drag-over>.pipeline-cards,
.pipeline-col-longterm.drag-over>.pipeline-cards{background:rgba(37,99,235,.07);border-radius:8px;outline:2px dashed #2563eb}
.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}
.pipeline-card.stage-longterm{border-left-color:#D97706}
.pc-top-row{display:flex;align-items:center;gap:4px;margin-bottom:2px;flex-wrap:nowrap;overflow:hidden}
.pc-company{font-size:12px;font-weight:700;color:var(--gray-900);line-height:1.3;flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-day-badge{font-size:9px;font-weight:600;color:#94a3b8;white-space:nowrap;flex-shrink:0;letter-spacing:.1px;line-height:1.6}
.pc-day-alert{color:#dc2626!important;font-weight:700!important}
.pc-headcount{font-size:9px;font-weight:700;color:#64748b;background:#f1f5f9;border-radius:5px;padding:1px 5px;white-space:nowrap;flex-shrink:0;border:1px solid #e2e8f0}
.pc-contact{font-size:10px;color:var(--gray-500);line-height:1.2}
.pc-interest{font-size:10px;color:var(--primary);margin-top:2px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-actions{display:flex;gap:3px;margin-top:5px;align-items:center}
.pc-move-btn{background:none;border:1px solid #e2e8f0;border-radius:4px;width:22px;height:22px;cursor:pointer;font-size:10px;display:inline-flex;align-items:center;justify-content:center;color:#64748b;padding:0}
.pc-move-btn:hover{background:#f1f5f9;color:#1e40af}
.pc-consult-img{width:24px;height:24px;border-radius:50%;object-fit:cover;border:2px solid #e2e8f0;flex-shrink:0}
.pc-consult-initial{width:24px;height:24px;border-radius:50%;background:var(--primary);color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border:2px solid #bfdbfe}

/* ── 파이프라인 카드: 왼쪽 버튼 누를 때만 드래그 ── */
.pipeline-card{cursor:default}          /* 기본: 기본 커서 */
.pipeline-card:active{cursor:grabbing}  /* 누르는 순간 grabbing */

/* ══════════════════════════════════════════
   파이프라인 헤더 — 상품 구분 뱃지
   ══════════════════════════════════════════ */
.pl-svc-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 20px;
  border: 1.5px solid var(--bc, #e2e8f0);
  background: #fff;
  color: var(--bc, #475569);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background .14s, color .14s, transform .12s;
  white-space: nowrap;
}
.pl-svc-badge:hover { background: var(--bb, #f1f5f9); transform: scale(1.04); }
.pl-svc-badge.on    { background: var(--bc, #475569); color: #fff; border-color: var(--bc, #475569); }
.pl-svc-cnt {
  background: rgba(255,255,255,.28);
  border-radius: 10px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 800;
}
.pl-svc-badge:not(.on) .pl-svc-cnt {
  background: var(--bb, #f1f5f9);
  color: var(--bc, #64748b);
}

/* ══════════════════════════════════════════
   파이프라인 헤더 — 컨설턴트 뱃지
   ══════════════════════════════════════════ */
.pl-consult-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 4px;
  border-radius: 20px;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: all .14s;
  white-space: nowrap;
}
.pl-consult-badge:hover { background: #f0f9ff; border-color: #93c5fd; color: #1e40af; }
.pl-consult-badge.on    { background: #2563eb; color: #fff; border-color: #2563eb; }
.pl-consult-badge.on .plc-name { color: #fff; }
.pl-consult-badge.on .plc-cnt  { background: rgba(255,255,255,.25); color: #fff; }

/* ═══════════════════════════════════════════════
   pl-svc-badge 활성 (active) 상태
   ═══════════════════════════════════════════════ */
.pl-svc-badge.active { background: var(--bc, #475569); color: #fff; border-color: var(--bc, #475569); }
.pl-svc-badge.active span { background: rgba(255,255,255,.3); color:#fff; }

/* ═══════════════════════════════════════════════
   리텐션 파이프라인 단계 컬러
   ═══════════════════════════════════════════════ */
.stage-ret-renew    { background:#f5f3ff; color:#7c3aed; }
.stage-ret-contact  { background:#ecfeff; color:#0891b2; }
.stage-ret-proposal { background:#f0fdf4; color:#059669; }
.stage-ret-nego     { background:#fffbeb; color:#d97706; }
.stage-ret-success  { background:#dcfce7; color:#16a34a; }
.stage-ret-lost     { background:#fef2f2; color:#dc2626; }

.pipeline-card.stage-ret-renew    { border-left-color:#7c3aed; }
.pipeline-card.stage-ret-contact  { border-left-color:#0891b2; }
.pipeline-card.stage-ret-proposal { border-left-color:#059669; }
.pipeline-card.stage-ret-nego     { border-left-color:#d97706; }
.pipeline-card.stage-ret-success  { border-left-color:#16a34a; }
.pipeline-card.stage-ret-lost     { border-left-color:#dc2626; opacity:.8; }

/* 리텐션 보드 */
.ret-board { min-height:400px; }

/* ═══════════════════════════════════════════════
   리스크고객 관리 탭
   ═══════════════════════════════════════════════ */
.risk-panel { }
.risk-panel.hidden { display:none; }
.risk-tab { transition: color .15s, border-bottom-color .15s; }
.risk-tab:hover { background:#fef2f2; }

.plc-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; flex-shrink: 0;
}
.plc-img  { object-fit: cover; border: 1.5px solid #e2e8f0; }
.plc-all  { background: #e2e8f0; color: #64748b; font-size: 9px; }
.plc-initial { background: #2563eb; color: #fff; }
.plc-none { background: #f1f5f9; color: #94a3b8; }
.plc-name { font-size: 11px; font-weight: 600; color: #334155; }
.plc-cnt  {
  background: #f1f5f9; color: #64748b;
  border-radius: 10px; padding: 0 5px;
  font-size: 10px; font-weight: 800; min-width: 16px;
  text-align: center;
}

/* ════════════════════════════════════════
   파이프라인 카드 hover 툴팁
   ════════════════════════════════════════ */
.pc-tooltip {
  position: fixed;
  z-index: 9999;
  width: 560px;
  max-width: 94vw;
  max-height: 82vh;
  display: none;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.22), 0 4px 16px rgba(0,0,0,.10);
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: auto;
}
/* ── 고정 헤더 ── */
.pct-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px 9px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  border-radius: 12px 12px 0 0;
  flex-shrink: 0;   /* 스크롤 시 고정 */
}
/* X 닫기 버튼 */
/* pct-close-btn 제거됨 — 바탕화면 클릭으로만 닫힘 */
.pct-close-btn { display: none !important; }

.pct-company {
  font-size: 13px;
  font-weight: 800;
  color: #1e293b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pct-headcount {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  background: #e2e8f0;
  border-radius: 5px;
  padding: 1px 6px;
  white-space: nowrap;
  flex-shrink: 0;
}
.pct-stage {
  font-size: 10px;
  font-weight: 700;
  border-radius: 8px;
  padding: 2px 9px;
  white-space: nowrap;
  flex-shrink: 0;
}
/* ── 고정: 문의내용 ── */
.pct-memo-wrap {
  padding: 9px 14px 8px;
  border-bottom: 1px solid #e8f0fe;
  background: #fafbff;
  flex-shrink: 0;
}
.pct-empty-inline {
  font-size: 11px;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 5px;
}
.pct-section-title {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: .3px;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.pct-memo {
  font-size: 12px;
  color: #334155;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
}
/* ── 타임라인 헤더 (고정) ── */
.pct-tl-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px 6px;
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}
.pct-tl-total {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: #64748b;
  border-radius: 10px;
  padding: 1px 7px;
  margin-left: 2px;
}
/* ── 타임라인 스크롤 영역 ── */
.pct-tl-scroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 0 8px;
}
.pct-tl-scroll::-webkit-scrollbar { width: 4px; }
.pct-tl-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
/* ── 월 그룹 (아코디언) ── */
.pct-tl-month { padding: 0 14px 2px; }

/* 월 헤더: 클릭 가능한 토글 버튼 */
.pct-tl-month-label {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  padding: 7px 8px 7px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border-radius: 6px;
  margin-bottom: 2px;
  cursor: pointer;
  user-select: none;
  transition: background .15s;
  border: 1px solid transparent;
}
.pct-tl-month-label:hover {
  background: #f1f5f9;
  border-color: #e2e8f0;
}
.pct-tl-month-label.open {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}
/* 왼쪽: 화살표 + 월 이름 + 건수 */
.pct-tl-acc-left {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.pct-tl-acc-arrow {
  font-size: 9px;
  color: #94a3b8;
  transition: transform .2s;
  display: inline-block;
  width: 10px;
  text-align: center;
}
.pct-tl-month-label.open .pct-tl-acc-arrow {
  color: #2563eb;
}
.pct-tl-month-name {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .3px;
}
.pct-tl-month-cnt {
  font-size: 9px;
  background: #e2e8f0;
  color: #64748b;
  border-radius: 8px;
  padding: 1px 6px;
  font-weight: 700;
}
.pct-tl-month-label.open .pct-tl-month-cnt {
  background: #bfdbfe;
  color: #1d4ed8;
}
/* 미리보기 텍스트 (접힌 상태에서만 표시) */
.pct-tl-preview {
  font-size: 10px;
  color: #64748b;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 280px;  /* 너비 확장에 맞게 늘림 */
  flex: 1;
  text-align: right;
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}
/* 미리보기 내 유형 뱃지 */
.pct-tl-prev-badge {
  font-size: 9.5px;
  font-weight: 700;
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
  flex-shrink: 0;
}
/* 미리보기 내 날짜 */
.pct-tl-prev-day {
  font-size: 9.5px;
  color: #94a3b8;
  white-space: nowrap;
  flex-shrink: 0;
}
.pct-tl-month-label.open .pct-tl-preview {
  display: none; /* 펼쳐진 상태에서는 미리보기 숨김 */
}
/* 아코디언 펼침/접힘 body */
.pct-tl-body-wrap {
  overflow: hidden;
  transition: max-height .25s ease, opacity .2s ease;
}
/* ── 타임라인 아이템 ── */
.pct-tl-items { padding-left: 10px; }
.pct-tl-item {
  display: flex;
  gap: 10px;
  padding: 5px 0;
  position: relative;
}
.pct-tl-item::before {   /* 세로 연결선 */
  content: '';
  position: absolute;
  left: 5px;
  top: 18px;
  bottom: -5px;
  width: 1px;
  background: #e2e8f0;
}
.pct-tl-item:last-child::before { display: none; }
.pct-tl-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 3px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1.5px currentColor;
}
.pct-tl-body { flex: 1; min-width: 0; }
.pct-tl-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 2px;
}
.pct-tl-day {
  font-size: 10px;
  color: #64748b;
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 600;
}
/* 아이템 내 건수 뱃지 (몇 건 중 몇 번째) */
.pct-tl-cnt-badge {
  font-size: 9px;
  color: #94a3b8;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 1px 5px;
  flex-shrink: 0;
}
.pct-tl-type {
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  padding: 1px 5px;
  flex-shrink: 0;
}
.pct-tl-text {
  font-size: 11.5px;
  color: #334155;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
}
.pct-tl-empty {
  text-align: center;
  color: #cbd5e1;
  font-size: 12px;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* ===== 잠재고객 통합 헤더 바 ===== */
#prospect-main-header {
  transition: box-shadow .2s;
}
#prospect-main-header:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,.09) !important;
}
/* 헤더 내 배지 영역 스크롤바 완전 숨김 */
#prospect-badge-rows::-webkit-scrollbar { display:none; }
#prospect-badge-rows { -ms-overflow-style:none; scrollbar-width:none; }
/* 헤더 내 각 그룹 구분선 hover */
#prospect-badge-rows > div {
  transition: background .15s;
}
#prospect-badge-rows > div:hover {
  background: #f8fafc;
}
/* 컨설턴트 배지 버튼 */
.consult-summary-btn {
  font-size:11px; padding:3px 9px; border-radius:12px;
  border:1.5px solid #e2e8f0; background:#fff; cursor:pointer;
  font-weight:600; color:#475569; transition:all .15s; white-space:nowrap;
}
.consult-summary-btn:hover { border-color:#2563eb; color:#2563eb; background:#eff6ff; }
.consult-summary-btn.active { background:#2563eb; color:#fff; border-color:#2563eb; }
.csb-cnt { display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.3);border-radius:10px;padding:0 5px;font-size:10px;font-weight:700;min-width:16px;height:15px;margin-left:2px; }
.consult-summary-btn.active .csb-cnt { background:rgba(255,255,255,.25); }

/* ══════════════════════════════════════════
   영업단계 변경 드롭다운 (prosp-stage-dd)
   ══════════════════════════════════════════ */
.prosp-stage-badge {
  cursor: pointer;
  transition: filter .15s, transform .12s;
}
.prosp-stage-badge:hover {
  filter: brightness(.92);
  transform: scale(1.05);
}

.prosp-stage-dd {
  position: fixed;
  z-index: 99999;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 12px 36px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);
  padding: 6px 0;
  min-width: 160px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .15s, transform .15s;
  user-select: none;
}
.psd-title {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 4px 14px 6px;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.psd-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  cursor: pointer;
  transition: background .12s;
  font-size: 12px;
  font-weight: 500;
  position: relative;
}
.psd-item:hover {
  background: #f8fafc;
}
.psd-item.current {
  background: #f0f9ff;
}
.psd-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.psd-label {
  flex: 1;
  font-weight: 600;
}
.psd-check {
  font-size: 10px;
  color: #2563eb;
  margin-left: auto;
}
/* 실패 서브메뉴 */
.psd-item-lost-header { border-top: 1px solid #f1f5f9; margin-top: 2px; }
.psd-sub-item { padding-left: 22px; background: #fff9f9; }
.psd-sub-item:hover { background: #fff0f0; }
.psd-sub-item.current { background: #ffe4e4; }

/* ══════════════════════════════════════════
   잠재고객 목록 스켈레톤 로딩
   ══════════════════════════════════════════ */
.prosp-skel-row {
  animation: prospSkelFadeIn .35s ease both;
}
@keyframes prospSkelFadeIn {
  from { opacity:0; transform:translateY(4px); }
  to   { opacity:1; transform:translateY(0); }
}
.prosp-skel-bar {
  display: inline-block;
  height: 11px;
  border-radius: 6px;
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: prospSkelShimmer 1.4s infinite ease-in-out;
  vertical-align: middle;
}
@keyframes prospSkelShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ===== 잠재고객 목록 테이블 ===== */
#prospect-table th { font-size:11px; padding:8px 6px; white-space:nowrap; }
#prospect-table td { font-size:12px; padding:7px 6px; vertical-align:middle; }
#prospect-table tr:hover td { background:#f0f9ff; }
#prospect-table .action-btns { flex-wrap:nowrap; }
#prospect-table .action-btn { width:26px; height:26px; font-size:11px; padding:0; display:inline-flex; align-items:center; justify-content:center; }

/* ── 잠재고객 작업버튼 하이라이트 클래스 (파스텔) ── */
#prospect-table ._hl-green  { width:26px;height:26px;font-size:11px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);cursor:pointer;transition:all .15s; background:#dcfce7 !important; color:#15803d !important; border:1px solid #86efac !important; }
#prospect-table ._hl-blue   { width:26px;height:26px;font-size:11px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);cursor:pointer;transition:all .15s; background:#e0f2fe !important; color:#0369a1 !important; border:1px solid #7dd3fc !important; }
#prospect-table ._hl-purple { width:26px;height:26px;font-size:11px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);cursor:pointer;transition:all .15s; background:#ede9fe !important; color:#7c3aed !important; border:1px solid #c4b5fd !important; }
#prospect-table ._hl-pin    { width:26px;height:26px;font-size:11px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);cursor:pointer;transition:all .15s; background:#fff1f2 !important; color:#ef4444 !important; border:1px solid #fca5a5 !important; }
#prospect-table ._hl-none   { width:26px;height:26px;font-size:11px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);cursor:pointer;transition:all .15s; background:var(--white); color:#cbd5e1; border:1px solid var(--gray-200); }
#prospect-table ._hl-green:hover  { background:#bbf7d0 !important; color:#166534 !important; }
#prospect-table ._hl-blue:hover   { background:#bae6fd !important; color:#075985 !important; }
#prospect-table ._hl-purple:hover { background:#ddd6fe !important; color:#6d28d9 !important; }
#prospect-table ._hl-pin:hover    { background:#ffe4e6 !important; }
#prospect-table ._hl-none:hover   { background:var(--primary-bg); color:var(--primary); border-color:var(--primary); }

/* ===== 전환 단계 안내 ===== */
.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:#e8edf5 !important; color:#111827 !important; font-weight:700 !important; }

/* ===== 필터 탭 ===== */
.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)}

/* ===== 제품/서비스 유형 탭 ===== */
.prod-svc-tab{
  padding:5px 12px;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;white-space:nowrap;
  display:inline-flex;align-items:center;gap:5px;
}
.prod-svc-tab:hover{border-color:var(--primary);color:var(--primary)}
.prod-svc-tab.active{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:700}
.prod-svc-tab[data-svc="상품"].active   {background:#1d4ed8;border-color:#1d4ed8}
.prod-svc-tab[data-svc="부가서비스"].active{background:#15803d;border-color:#15803d}
.prod-svc-tab[data-svc="확장서비스"].active{background:#854d0e;border-color:#b45309}
.prod-svc-tab[data-svc="기타"].active   {background:#475569;border-color:#475569}

/* 카운트 뱃지 */
.prod-svc-cnt{
  display:inline-block;min-width:16px;padding:0 5px;height:16px;line-height:16px;
  border-radius:8px;font-size:10px;font-weight:700;text-align:center;
  background:rgba(0,0,0,.10);color:inherit;
}
.prod-svc-tab.active .prod-svc-cnt{background:rgba(255,255,255,.30);color:#fff}

/* 카테고리 헤더 행 */
.prod-cat-header td { user-select:none; }
.prod-cat-header.drag-over td { outline:2px dashed var(--primary);outline-offset:-2px; }

/* ===== 고객사 목록 상태 필터 버튼 ===== */
.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.active,.cst-btn:hover{background:#1d4ed8;border-color:#1d4ed8;color:#fff}
.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}
/* 무료 납부방식 버튼 */
#pay-btn-free.active,#pay-btn-free:hover{background:#059669;border-color:#059669;color:#fff}
/* ── 해지 숨기기 토글 버튼 ── */
.term-toggle-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:8px;
  border:1.5px solid #d1d5db;background:#fff;
  cursor:pointer;font-size:13px;
  transition:all .2s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 1px 3px rgba(0,0,0,0.08);
  flex-shrink:0;
}
.term-toggle-btn:hover{transform:scale(1.15);box-shadow:0 3px 8px rgba(0,0,0,0.15)}
/* 해지 숨김 상태 — 주황빛 경고 */
.term-toggle-btn.term-hidden{
  background:#fff7ed;border-color:#fb923c;color:#ea580c;
}
.term-toggle-btn.term-hidden:hover{background:#ffedd5;border-color:#f97316;color:#c2410c}
/* 해지 표시 상태 — 차분한 회색 */
.term-toggle-btn.term-shown{
  background:#f8fafc;border-color:#94a3b8;color:#64748b;
}
.term-toggle-btn.term-shown:hover{background:#f1f5f9;border-color:#64748b;color:#334155}
/* 구분선 */
.term-divider{width:1px;height:18px;background:#e2e8f0;display:inline-block;margin:0 2px;flex-shrink:0}
/* 지오유/복지왕 필터 버튼 — 크게, hover 튀어나오기, active 역동 표현 */
#svc-btn-zioyou,#svc-btn-bokjiwang{
  font-size:13px !important;
  padding:6px 16px !important;
  border-radius:20px !important;
  font-weight:700 !important;
  letter-spacing:0.3px;
  transition:all .2s cubic-bezier(.34,1.56,.64,1) !important;
  box-shadow:0 2px 6px rgba(0,0,0,0.10);
  position:relative;
  overflow:hidden;
}
#svc-btn-zioyou:hover{
  background:#dbeafe !important;
  border-color:#3b82f6 !important;
  color:#1d4ed8 !important;
  transform:translateY(-3px) scale(1.07) !important;
  box-shadow:0 6px 18px rgba(29,78,216,0.25) !important;
}
#svc-btn-bokjiwang:hover{
  background:#ede9fe !important;
  border-color:#7c3aed !important;
  color:#5b21b6 !important;
  transform:translateY(-3px) scale(1.07) !important;
  box-shadow:0 6px 18px rgba(124,58,237,0.25) !important;
}
#svc-btn-zioyou.active{
  background:#1d4ed8 !important;
  border-color:#1e40af !important;
  color:#fff !important;
  transform:translateY(1px) scale(0.97) !important;
  box-shadow:0 2px 8px rgba(29,78,216,0.45),inset 0 2px 4px rgba(0,0,0,0.15) !important;
  animation:svcBtnPop .25s ease;
}
#svc-btn-bokjiwang.active{
  background:#7c3aed !important;
  border-color:#6d28d9 !important;
  color:#fff !important;
  transform:translateY(1px) scale(0.97) !important;
  box-shadow:0 2px 8px rgba(124,58,237,0.45),inset 0 2px 4px rgba(0,0,0,0.15) !important;
  animation:svcBtnPop .25s ease;
}
#svc-btn-zioyou.active::after,#svc-btn-bokjiwang.active::after{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(255,255,255,0.18);
  border-radius:inherit;
  pointer-events:none;
}
@keyframes svcBtnPop{
  0%{transform:scale(1.1) translateY(-1px)}
  60%{transform:scale(0.94) translateY(2px)}
  100%{transform:scale(0.97) translateY(1px)}
}

/* ===== 고객사 구분 배지 ===== */
.sc-badge{display:inline-block;padding:2px 7px;border-radius:4px;font-size:11px;font-weight:700;white-space:nowrap}
.sc-안정{background:#f0faf5;color:#2d7d5a;border:1px solid #a7d9c0}
.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:#fef9c3;color:#92400e;border:1px solid #fde68a}
.sc-인큐{background:#ecfeff;color:#155e75}
.sc-채널{background:#f0f9ff;color:#0369a1;border:1px solid #bae6fd}

/* ===== 고객사 통계 박스 ===== */
.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%;min-width:1760px}

/* ===== 동시 접속 경고 배너 (공통) ===== */
.same-screen-banner{display:none;align-items:center;gap:8px;background:#fff7ed;border:1px solid #fed7aa;border-radius:8px;padding:8px 14px;margin-bottom:8px;font-size:13px;color:#92400e;font-weight:500}
.same-screen-banner i{color:#f97316;flex-shrink:0}

/* ===== 도입서비스 셀 ===== */
.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-ext {
  display:inline-block;background:#fefce8;color:#854d0e;
  border:1px solid #fde68a;border-radius:3px;
  padding:1px 5px;font-size:10px;font-weight:600;white-space:nowrap;flex-shrink:0;
}
/* 기타서비스 — 기본(회색) */
.svc-tag-other {
  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;
}
/* 기타서비스 세부 항목별 색상 분류 */
/* 최초설치비 — 보라계열 */
.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-daks {
  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}

/* ===== 제품/서비스 카테고리 접힘/펼침 헤더 ===== */
.prod-cat-header td { border-bottom: 1px solid #f1f5f9; background:#fafafa; }
.prod-cat-header:hover td { background:#f5f7fa; }
.prod-cat-header.drag-over td { outline:2px dashed var(--primary);outline-offset:-2px; background:#eff6ff !important; }
.prod-cat-chevron { transition: transform .2s ease; }
tr[data-cat-group] td { border-left: 3px solid transparent; }

/* ===== 고객사 테이블 ===== */
.cust-main-table td{font-size:12px;padding:7px 8px}
.cust-main-table th{font-size:12px;padding:8px 8px;background:#e8edf5 !important;color:#111827 !important;font-weight:700 !important;position:sticky;top:0;z-index:12}
/* 고객사명 클릭 팝업 메뉴 */
.cust-name-wrap{display:inline-block}
.cust-name-link{color:var(--primary);cursor:pointer;font-weight:600;text-decoration:none;white-space:nowrap}
.cust-name-link:hover{text-decoration:underline}
/* 클릭 팝업 - JS로 body에 append, position:fixed */
#cust-click-menu{
  position:fixed;z-index:99999;
  background:#1e293b;border:1px solid #334155;border-radius:8px;
  box-shadow:0 8px 28px rgba(0,0,0,.45);padding:5px 0;min-width:160px;max-width:220px;
}
#cust-click-menu .ql-item{
  display:block;
  padding:7px 15px;
  font-size:12px;font-weight:400;cursor:pointer;
  color:#f1f5f9;letter-spacing:0;
  text-decoration:none;transition:background .1s;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#cust-click-menu .ql-item:hover{background:#334155}
#cust-click-menu .ql-item.disabled{color:#64748b;cursor:default}
#cust-click-menu .ql-item.disabled:hover{background:none}
#cust-click-menu .ql-divider{border:none;border-top:1px solid #334155;margin:4px 0}
.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}
/* 고객사 목록 열 너비 설정 (23열)
   1연번 2구분 3DB 4고객사명 5소재지 6약정인원 7유저당단가 8매출액 9분배
   10상품 11부가서비스 12확장서비스 13기타서비스 14기록 15계약코드
   16최초계약일 17계약기간 18해지처리일 19납부방식 20계산서발행 21청구서발행
   22컨설턴트(정) 23작업 */
.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)  { text-align:center; width:60px; }        /* DB */
.cust-main-table th:nth-child(4),
.cust-main-table td:nth-child(4)  { text-align:left; width:140px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* 고객사명 */
.cust-main-table th:nth-child(5),
.cust-main-table td:nth-child(5)  { text-align:center; width:52px; }        /* 소재지 */
.cust-main-table th:nth-child(6),
.cust-main-table td:nth-child(6)  { text-align:center; width:58px; }        /* 약정인원 */
.cust-main-table th:nth-child(7),
.cust-main-table td:nth-child(7)  { text-align:center; width:72px; }        /* 유저당단가 */
.cust-main-table th:nth-child(8),
.cust-main-table td:nth-child(8)  { text-align:right;  width:96px; }        /* 매출액 */
.cust-main-table th:nth-child(9),
.cust-main-table td:nth-child(9)  { text-align:center; width:50px; }        /* 분배 */
.cust-main-table th:nth-child(10),
.cust-main-table td:nth-child(10) { min-width:130px; max-width:160px; text-align:center; } /* 상품 */
.cust-main-table th:nth-child(11),
.cust-main-table td:nth-child(11) { min-width:130px; max-width:200px; }     /* 부가서비스 */
.cust-main-table th:nth-child(12),
.cust-main-table td:nth-child(12) { min-width:130px; max-width:200px; }     /* 확장서비스 */
.cust-main-table th:nth-child(13),
.cust-main-table td:nth-child(13) { min-width:130px; max-width:200px; }     /* 기타서비스 */
.cust-main-table th:nth-child(14),
.cust-main-table td:nth-child(14) { text-align:center; width:70px; }        /* 기록 */
.cust-main-table th:nth-child(15),
.cust-main-table td:nth-child(15) { text-align:center; width:80px; }        /* 계약코드 */
.cust-main-table th:nth-child(16),
.cust-main-table td:nth-child(16) { text-align:center; width:72px; }        /* 최초계약일 */
.cust-main-table th:nth-child(17),
.cust-main-table td:nth-child(17) { text-align:center; width:90px; }        /* 계약기간 */
.cust-main-table th:nth-child(18),
.cust-main-table td:nth-child(18) { text-align:center; width:72px; }        /* 해지처리일 */
.cust-main-table th:nth-child(19),
.cust-main-table td:nth-child(19) { text-align:center; width:52px; }        /* 납부방식 */
.cust-main-table th:nth-child(20),
.cust-main-table td:nth-child(20) { text-align:center; width:80px; }        /* 계산서발행 */
.cust-main-table th:nth-child(21),
.cust-main-table td:nth-child(21) { text-align:center; width:80px; }        /* 청구서발행 */
.cust-main-table th:nth-child(22),
.cust-main-table td:nth-child(22) { text-align:center; width:80px; }        /* 컨설턴트(정) */
.cust-main-table th:nth-child(23),
.cust-main-table td:nth-child(23) { text-align:center; width:120px; }       /* 작업 */
/* 고객사 목록 테이블 thead 스튰키 강화 */
.cust-main-table thead th {
  position:sticky; top:0; z-index:12;
  background:#e8edf5 !important;
  color:#111827 !important;
  font-weight:700 !important;
  box-shadow:0 2px 0 #c7d2e5;
}
/* 정기청구 스케줄 테이블 열 정렬 (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 thead th { position:sticky; top:0; z-index:12; background:#e8edf5 !important; color:#111827 !important; font-weight:700 !important; box-shadow:0 2px 0 #c7d2e5; }
.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; }

/* ── 제품선택 패널 카테고리 탭 (가로 스크롤, 스크롤바 숨김) ── */
#qf-prod-tabs, #quick-item-tabs {
  display:flex; gap:5px; flex-wrap:nowrap; overflow-x:auto;
  padding-bottom:4px; scrollbar-width:none;
}
#qf-prod-tabs::-webkit-scrollbar, #quick-item-tabs::-webkit-scrollbar { display:none; }

/* ── 제품 칩 목록 스크롤 ── */
#qf-prod-chips, #quick-item-chips {
  scrollbar-width:thin; scrollbar-color:var(--gray-200) transparent;
}
#qf-prod-chips::-webkit-scrollbar, #quick-item-chips::-webkit-scrollbar { width:4px; }
#qf-prod-chips::-webkit-scrollbar-thumb, #quick-item-chips::-webkit-scrollbar-thumb {
  background:var(--gray-200); border-radius:4px;
}

/* 수신인 자동채움 힌트 */
#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, .qf-type-btn {
  display:inline-flex; align-items:center;
  padding:5px 14px; 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, .qf-type-btn:hover { border-color:var(--primary); }
.quote-type-btn.active, .qf-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;transition:all .15s}
.consult-link:hover{text-decoration:underline;color:#1d4ed8}
.consult-link.consult-active{background:#e0edff;color:#1d4ed8;padding:1px 5px;border-radius:10px;font-weight:700}

/* ===== 컨설턴트 요약 버튼 (우측 배치) ===== */
.consult-summary-btn{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 10px;border-radius:16px;
  border:1.5px solid #d1d5db;background:#fff;
  font-size:12px;font-weight:normal;cursor:pointer;
  transition:all .2s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 1px 4px rgba(0,0,0,0.08);
  white-space:nowrap;color:#111827;
}
.consult-summary-btn:hover{
  background:#eff6ff;border-color:#93c5fd;color:#1d4ed8;
  transform:translateY(-2px) scale(1.05);
  box-shadow:0 4px 12px rgba(29,78,216,0.18);
}
.consult-summary-btn.active{
  background:#2563eb;border-color:#1d4ed8;color:#fff;
  transform:translateY(1px) scale(0.97);
  box-shadow:0 2px 6px rgba(37,99,235,0.4),inset 0 1px 3px rgba(0,0,0,0.12);
  animation:consultBtnPop .22s ease;
}
.consult-summary-btn .csb-cnt{
  display:inline-block;
  font-size:11px;font-weight:700;
  color:#111827;
}
.consult-summary-btn.active .csb-cnt{color:#fff}
@keyframes consultBtnPop{
  0%{transform:scale(1.08) translateY(-1px)}
  60%{transform:scale(0.95) translateY(2px)}
  100%{transform:scale(0.97) translateY(1px)}
}
/* 컨설턴트 요약 전체 컨테이너 */
.consult-summary-area{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
  margin-bottom:0;
}
/* 인당 매출 뱃지 행 */
.consult-per-row{
  display:flex;
  justify-content:flex-end;
  width:100%;
}
.consult-per-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 12px;border-radius:20px;
  background:linear-gradient(135deg,#f0f9ff,#e0f2fe);
  border:1px solid #bae6fd;color:#0369a1;
  font-size:11px;font-weight:normal;white-space:nowrap;
  box-shadow:0 1px 4px rgba(3,105,161,0.10);
}
.consult-per-badge b{font-weight:700;color:#0c4a6e}
/* 사람 뱃지 행 */
.consult-btn-row{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  justify-content:flex-start;
}
.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;background:transparent !important}
.terminated-row td span,
.terminated-row td a,
.terminated-row td strong,
.terminated-row td small{color:#9ca3af !important}
.terminated-row td .cust-name-link{color:#9ca3af !important;text-decoration:none !important}
.terminated-row td .sc-badge{opacity:.7 !important;filter:grayscale(1) !important}
.terminated-row td .svc-tag-main,
.terminated-row td .svc-tag-addon,
.terminated-row td [class*="svc-tag"]{background:#f3f4f6 !important;color:#9ca3af !important;border-color:#e5e7eb !important}
.terminated-row td .action-btn{background:#f9fafb !important;color:#b0b8c4 !important;border-color:#e5e7eb !important;box-shadow:none !important}
.terminated-row td .action-btn.has-memo{background:#ef4444 !important;color:#fff !important;border-color:#ef4444 !important}
/* 해지행 인라인 color 속성은 회색으로 덮되, background는 건드리지 않음 */
.terminated-row td [style*="color"]{color:#9ca3af !important}

/* ===== 고객사 뷰어 ===== */
.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; }

/* 그룹핑 체크박스: input 보임 + 레이블 강조 */
.svc-grouped-label {
  display:inline-flex; align-items:center; gap:5px;
  cursor:pointer; user-select:none; padding:3px 6px;
  border-radius:5px; transition:background .1s;
}
.svc-grouped-label:hover { background:rgba(0,0,0,.04); }
.svc-grouped-label input[type="checkbox"] {
  width:14px; height:14px; cursor:pointer; accent-color:#2563eb; flex-shrink:0;
}
.svc-grouped-label input[type="checkbox"]:checked + span {
  font-weight:800;
}
.svc-grouped-label span { transition:all .12s; font-size:11px; }

/* ===== 할인목록 ===== */
.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;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.85);background:var(--gray-900);color:var(--white);padding:16px 32px;border-radius:12px;font-size:15px;font-weight:600;z-index:99999;opacity:0;transition:all .25s cubic-bezier(.175,.885,.32,1.275);pointer-events:none;white-space:nowrap;box-shadow:0 8px 32px rgba(0,0,0,0.25);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.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-dialog: 배경색 명시 (투명 배경 방지) */
.modal-dialog{background:#ffffff;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.25);max-height:92vh;overflow:hidden;display:flex;flex-direction:column;animation:fadeIn .2s ease}
.modal-dialog .modal-header{padding:16px 20px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.modal-dialog .modal-body{flex:1;overflow-y:auto;background:#ffffff;padding:20px}
.modal-dialog .modal-footer{padding:14px 20px;background:#f8fafc;border-top:1px solid #e2e8f0;display:flex;gap:8px;justify-content:flex-end;flex-shrink:0}
.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)}

/* =====================================================
   신청 관리 (Application Management)
   ===================================================== */

/* ── 카테고리 그룹 박스 ── */
.app-cat-group {
  background:var(--white);
  border:1px solid var(--gray-200);
  border-radius:var(--radius);
  margin-bottom:12px;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.app-cat-header {
  display:flex;align-items:center;gap:8px;
  padding:11px 18px;
  background:var(--gray-50);
  border-bottom:1px solid var(--gray-200);
  cursor:pointer;
  font-size:13px;font-weight:700;color:var(--gray-800);
  user-select:none;
  transition:background .15s;
}
.app-cat-header:hover { background:#eef5ff; }
.app-cat-header span:first-child { flex:1; display:flex; align-items:center; gap:8px; }
.app-cat-count {
  font-size:12px;font-weight:600;
  background:var(--primary);color:#fff;
  border-radius:12px;padding:1px 9px;
  margin-right:6px;
}
.app-cat-chevron { font-size:11px; color:var(--gray-400); transition:transform .2s; }
.app-cat-body { transition:all .2s; }
.app-cat-body.collapsed { display:none; }

/* ── 신청 관리 테이블 ── */
.app-sub-table { margin:0; border-radius:0; }
.app-sub-table th { background:#f1f5f9 !important; font-size:11px !important; padding:7px 8px !important; color:#374151 !important; font-weight:700 !important; }
.app-sub-table td { font-size:12px; padding:8px 8px; vertical-align:middle; }
.app-sub-table tbody tr:hover td { background:#f8faff; }

/* ── 상태 배지 (신버전 아래에 정의됨, 이 블록은 레거시 호환용) ── */

/* ── 과금 태그 (목록용) ── */
.app-billing-tag {
  display:inline-block;
  padding:1px 6px;border-radius:8px;
  font-size:10px;font-weight:600;white-space:nowrap;
}
.app-billing-tag.paid   { background:#fff0f0;color:#b91c1c;border:1px solid #fecaca; }
.app-billing-tag.free   { background:#f0fdf4;color:#166534;border:1px solid #bbf7d0; }
.app-billing-tag.mixed  { background:#fefce8;color:#854d0e;border:1px solid #fde68a; }

/* ═══════════════════════════════════════════════════
   신청 등록 모달 (신청서 미리보기와 동일 골격/색상)
   ═══════════════════════════════════════════════════ */

/* 모달 래퍼 (modal-box 기본 padding 재정의) */
.app-modal-wide {
  width:min(1100px,97vw);
  max-width:min(1100px,97vw) !important;
  max-height:94vh;
  overflow-y:auto;
  border-radius:10px;
  background:#fff;
  box-shadow:0 20px 60px rgba(0,0,0,.28);
  display:flex;
  flex-direction:column;
  padding:0 !important;
}

/* accent bar (신청서 미리보기의 af-card-accent 와 동일) */
.app-modal-accent-bar {
  height:5px;
  background:linear-gradient(90deg,#1e3a5f 0%,#0066cc 55%,#60a5fa 100%);
  border-radius:10px 10px 0 0;
  flex-shrink:0;
}

/* 헤더 */
.app-modal-header {
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px 12px;
  border-bottom:1px solid #e2e8f0;
  flex-shrink:0;
  background:#f8fafc;
}
.app-modal-header-left { display:flex;align-items:center;gap:12px; }
.app-modal-icon {
  width:40px;height:40px;border-radius:10px;
  background:linear-gradient(135deg,#1e3a5f,#0066cc);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:18px;flex-shrink:0;
}
.app-modal-title { font-size:16px;font-weight:800;color:#1e293b;margin:0; }
.app-modal-subtitle { font-size:11px;color:#94a3b8;margin:2px 0 0; }
.app-modal-header-right { display:flex;gap:7px;align-items:center; }
.app-modal-btn {
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 14px;border:none;border-radius:7px;
  font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;
  transition:opacity .15s;
}
.app-modal-btn:hover { opacity:.85; }
.app-modal-btn.preview { background:#6366f1;color:#fff; }
.app-modal-btn.close   { background:#64748b;color:#fff; }

/* 바디 */
.app-modal-body {
  padding:16px 22px;
  display:flex;flex-direction:column;gap:12px;
  flex:1;overflow-y:auto;
}

/* ① 상단 입력 한 줄 */
.app-modal-top-row {
  display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;
  background:#f1f5f9;border:1px solid #e2e8f0;border-radius:8px;
  padding:12px 14px;
}
.app-top-field { display:flex;flex-direction:column;gap:4px; }
.app-field-label {
  font-size:11px;font-weight:700;color:#475569;
  display:flex;align-items:center;
}
.app-field-label .req { color:#dc2626;margin-left:2px; }
.app-field-input {
  width:100%;padding:7px 10px;
  border:1.5px solid #d1d5db;border-radius:7px;
  font-size:12px;font-family:inherit;color:#1e293b;
  background:#fff;outline:none;transition:border-color .15s;
}
.app-field-input:focus { border-color:#0066cc;box-shadow:0 0 0 2px rgba(0,102,204,.1); }
.app-writer-box {
  font-size:12px;font-weight:600;color:#0066cc;
  padding:7px 10px;background:#eff6ff;border:1.5px solid #bfdbfe;
  border-radius:7px;min-height:34px;white-space:nowrap;
}

/* ② 고객 정보 패널 */
.app-cust-panel {
  background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:10px 14px;
}
.app-cust-panel-title {
  font-size:11px;font-weight:700;color:#64748b;
  display:flex;align-items:center;gap:5px;margin-bottom:7px;
}

/* ③ 서비스 선택 섹션 */
.app-svc-section {
  border:1px solid #e2e8f0;border-radius:9px;overflow:hidden;
  background:#fff;
}
.app-svc-section-title {
  padding:9px 16px;
  background:linear-gradient(90deg,#1e3a5f,#0066cc);
  color:#fff;font-size:12px;font-weight:700;
  display:flex;align-items:center;gap:7px;
}

/* 4단 그리드 (계약/기본설정·메일/도메인·연동/확장·부가서비스) */
.app-svc-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border-top:none;
}
.app-svc-col { border-right:1px solid #e2e8f0; }
.app-svc-col:last-child { border-right:none; }

.app-svc-col-header {
  display:flex;align-items:center;gap:6px;
  padding:7px 12px;
  font-size:11px;font-weight:700;
  flex-shrink:0;
}
.app-svc-col-body {
  display:flex;flex-direction:column;gap:0;
  padding:6px 8px;
  background:#fff;
}

/* 칩 스타일 체크박스 */
.app-svc-chip {
  display:flex;align-items:center;gap:5px;
  padding:5px 8px;
  border:1px solid #e8edf2;
  border-radius:6px;
  cursor:pointer;
  font-size:11.5px;color:#374151;
  background:#fff;
  transition:all .12s;
  user-select:none;
  margin-bottom:3px;
}
.app-svc-chip:last-child { margin-bottom:0; }
.app-svc-chip:hover { border-color:#93c5fd;background:#f0f7ff;color:#1d4ed8; }
.app-svc-chip input[type="checkbox"] {
  width:13px;height:13px;cursor:pointer;
  accent-color:#0066cc;flex-shrink:0;
}
.app-svc-chip:has(input:checked) {
  border-color:#0066cc;background:#eff6ff;
  color:#0066cc;font-weight:700;
}
.chip-name { flex:1; }
.chip-badge {
  font-size:9px;font-weight:700;padding:1px 5px;
  border-radius:8px;flex-shrink:0;
}
.chip-badge.paid { background:#fee2e2;color:#b91c1c; }
.chip-badge.free { background:#dcfce7;color:#166534; }

/* ④ 메모 섹션 */
.app-memo-section {
  background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;
  padding:12px 14px;
}
.app-memo-thread {
  display:flex;flex-direction:column;gap:4px;
  margin-bottom:8px;
  /* 한 줄 compact 레이아웃 — 스크롤 없음 */
}
.app-memo-input-row {
  display:flex;gap:7px;align-items:flex-end;
}
.app-memo-add-btn {
  padding:8px 12px;background:#0066cc;color:#fff;
  border:none;border-radius:7px;cursor:pointer;
  font-size:12px;font-weight:700;white-space:nowrap;
  height:fit-content;font-family:inherit;
  display:inline-flex;align-items:center;gap:4px;
  transition:background .15s;flex-shrink:0;
}
.app-memo-add-btn:hover { background:#004ea8; }

/* 푸터 */
.app-modal-footer {
  flex-shrink:0;
  padding:0 22px 14px;
}
.app-footer-divider {
  height:1px;background:#e2e8f0;margin-bottom:12px;
}
.app-footer-btns {
  display:flex;justify-content:flex-end;gap:8px;
}
.app-footer-btn {
  display:inline-flex;align-items:center;gap:5px;
  padding:8px 20px;border:none;border-radius:8px;
  font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;
  transition:opacity .15s;
}
.app-footer-btn:hover { opacity:.85; }
.app-footer-btn.cancel { background:#e2e8f0;color:#475569; }
.app-footer-btn.save   { background:#0066cc;color:#fff; }

/* 기존 app-svc-group 호환 유지 (삭제하지 않음) */
.app-svc-group { border:1px solid var(--gray-200); border-radius:var(--radius-sm); overflow:hidden; }
.app-svc-group-title {
  display:flex;align-items:center;gap:7px;
  padding:8px 14px;font-size:12px;font-weight:700;
  border-bottom:1px solid var(--gray-200);
}
.app-svc-items { display:flex;flex-wrap:wrap;gap:4px;padding:10px 12px;background:var(--white); }
.app-svc-item {
  display:inline-flex;align-items:center;gap:5px;padding:5px 10px;
  border:1.5px solid var(--gray-200);border-radius:6px;cursor:pointer;
  font-size:12px;color:var(--gray-700);background:var(--white);transition:all .12s;user-select:none;
}
.app-svc-item:hover { border-color:var(--primary);background:var(--primary-bg); }
.app-svc-item input[type="checkbox"] { width:13px;height:13px;cursor:pointer;accent-color:var(--primary);flex-shrink:0; }
.app-svc-item:has(input:checked) { border-color:var(--primary);background:var(--primary-bg);color:var(--primary);font-weight:700; }

/* ── 과금 배지 (모달 내) ── */
.app-billing-badge { display:inline-block;padding:1px 5px;border-radius:6px;font-size:10px;font-weight:600;margin-left:2px;flex-shrink:0; }
.app-billing-badge.paid { background:#fee2e2;color:#b91c1c; }
.app-billing-badge.free { background:#dcfce7;color:#166534; }

/* 반응형: 1100px 이하에서 2열로 (5열 → 2열) */
@media(max-width:1000px) {
  .app-svc-grid { grid-template-columns:repeat(2,1fr); }
  .app-svc-col:nth-child(2) { border-right:none; }
  .app-svc-col:nth-child(3) { border-top:1px solid #e2e8f0; }
}
@media(max-width:540px) {
  .app-svc-grid { grid-template-columns:1fr; }
  .app-svc-col { border-right:none;border-bottom:1px solid #e2e8f0; }
}

/* ══════════════════════════════════════
   관리자 변경 전용 입력 패널
   ══════════════════════════════════════ */
.admin-chg-panel {
  border:1.5px solid #c7d2fe;
  border-radius:9px;
  overflow:hidden;
  background:#fafbff;
  margin-top:6px;
}
.admin-chg-panel-accent {
  height:4px;
  background:linear-gradient(90deg,#3730a3,#6366f1,#818cf8);
}
.admin-chg-panel-body {
  padding:14px 18px 16px;
}
.admin-chg-section-hd {
  font-size:12px;font-weight:800;color:#3730a3;
  display:flex;align-items:center;gap:6px;
  margin-bottom:12px;
  padding-bottom:8px;
  border-bottom:1px solid #e0e7ff;
}
.admin-chg-row-title {
  font-size:11px;font-weight:700;color:#374151;
  display:flex;align-items:center;gap:5px;
  margin-bottom:7px;
  padding:5px 8px;
  background:#f0f4ff;border-radius:5px;
  border-left:3px solid #6366f1;
}
.admin-chg-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
@media(max-width:700px) {
  .admin-chg-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:420px) {
  .admin-chg-grid { grid-template-columns:1fr; }
}
.admin-chg-field { display:flex;flex-direction:column;gap:3px; }
.admin-chg-label {
  font-size:10.5px;font-weight:700;color:#475569;
  display:flex;align-items:center;gap:2px;
}
.admin-chg-input {
  width:100%;padding:6px 9px;
  border:1.5px solid #c7d2fe;border-radius:6px;
  font-size:12px;font-family:inherit;color:#1e293b;
  background:#fff;outline:none;transition:border-color .15s;
}
.admin-chg-input:focus { border-color:#6366f1;box-shadow:0 0 0 2px rgba(99,102,241,.12); }
.admin-chg-radio-wrap { display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:2px; }
.admin-chg-radio {
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 9px;border:1.5px solid #c7d2fe;border-radius:6px;
  cursor:pointer;font-size:11px;font-weight:600;color:#3730a3;
  background:#fff;transition:all .12s;user-select:none;
}
.admin-chg-radio:has(input:checked) { background:#eef2ff;border-color:#6366f1; }
.admin-chg-radio input { display:none; }
.admin-chg-textarea {
  width:100%;padding:9px 12px;
  border:1.5px solid #c7d2fe;border-radius:7px;
  font-size:12px;font-family:inherit;color:#1e293b;
  background:#fff;outline:none;resize:vertical;min-height:70px;
  transition:border-color .15s;
}
.admin-chg-textarea:focus { border-color:#6366f1;box-shadow:0 0 0 2px rgba(99,102,241,.12); }
.admin-chg-super-wrap { display:flex;flex-direction:column;gap:5px; }
.admin-chg-check-label {
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;color:#374151;cursor:pointer;
  padding:5px 8px;border:1px solid #e0e7ff;border-radius:6px;background:#fff;
  transition:background .1s;
}
.admin-chg-check-label:has(input:checked) { background:#eef2ff;border-color:#818cf8;color:#3730a3;font-weight:600; }
.admin-chg-check-label input { accent-color:#6366f1;width:13px;height:13px; }

/* ── 고객사 자동완성 옵션 hover ── */
#app-cust-dropdown .app-cust-option:hover { background:#f0f7ff; }

/* ── 필터 입력창 ── */
.filter-input:focus { border-color:var(--primary);outline:none;box-shadow:0 0 0 2px rgba(0,102,204,.15); }

/* ── 상태 변경 팝업 옵션 ── */
.app-status-opt{padding:6px 14px;cursor:pointer;transition:background .1s;display:flex;align-items:center}
.app-status-opt:hover{background:#f8fafc}

/* ── 첨언 말풍선 ── */
.app-memo-bubble{background:#f0f7ff;border:1px solid #bfdbfe;border-radius:8px;padding:10px 13px;font-size:12px;position:relative}
.app-memo-bubble .memo-meta{font-size:10px;color:#94a3b8;margin-bottom:4px;display:flex;gap:6px;align-items:center}
.app-memo-bubble .memo-text{color:#1e293b;line-height:1.65;white-space:pre-wrap}
.app-memo-bubble .memo-del{position:absolute;top:7px;right:8px;background:none;border:none;color:#cbd5e1;cursor:pointer;font-size:12px;padding:0}
.app-memo-bubble .memo-del:hover{color:#dc2626}

/* ── 작업 아이콘 버튼 (기존) ── */
.action-btn-icon{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:1px solid #e2e8f0;border-radius:5px;background:#fff;cursor:pointer;font-size:11px;color:#64748b;transition:all .12s;flex-shrink:0}
.action-btn-icon:hover{background:#f0f7ff;border-color:#93c5fd;color:#0066cc}
.action-btn-icon.danger:hover{background:#fff0f0;border-color:#fca5a5;color:#dc2626}
.action-btn-icon.green:hover{background:#f0fdf4;border-color:#86efac;color:#16a34a}
.action-btn-icon.purple:hover{background:#fdf4ff;border-color:#e9d5ff;color:#7c3aed}

/* ── 신청관리 전용 작업 아이콘 (act-icon-btn) ── */
.act-icon-btn{display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border:1px solid #e2e8f0;border-radius:4px;
  background:#fff;cursor:pointer;font-size:10px;color:#64748b;
  transition:all .12s;flex-shrink:0;padding:0}
.act-icon-btn:hover         {background:#f0f7ff;border-color:#93c5fd;color:#1d4ed8}
.act-icon-btn.view:hover    {background:#f0fdf4;border-color:#86efac;color:#15803d}
.act-icon-btn.link:hover    {background:#eff6ff;border-color:#60a5fa;color:#0066cc}
.act-icon-btn.inv:hover     {background:#fdf4ff;border-color:#d8b4fe;color:#7c3aed}
.act-icon-btn.del:hover     {background:#fff0f0;border-color:#fca5a5;color:#dc2626}

/* ── 상태 팝업 ── */
#app-status-popup{position:fixed;z-index:9999;background:#fff;border:1px solid #e2e8f0;
  border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);min-width:120px;padding:4px 0;display:none}
#app-status-popup .st-opt{display:block;width:100%;padding:8px 14px;font-size:12px;
  cursor:pointer;background:none;border:none;text-align:left;color:#374151;font-family:var(--font)}
#app-status-popup .st-opt:hover{background:#f3f4f6}
.app-status-badge{display:inline-flex;align-items:center;gap:3px;border-radius:4px;
  padding:3px 8px;font-size:11px;font-weight:700;white-space:nowrap;user-select:none}
/* 신규 3단계 상태 */
.app-status-badge.app-status-sent     {background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe}
.app-status-badge.app-status-signed   {background:#fef9c3;color:#854d0e;border:1px solid #fde68a}
.app-status-badge.app-status-done     {background:#f0fdf4;color:#15803d;border:1px solid #86efac}
/* 이전 상태 호환 */
.app-status-badge.app-status-received {background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe}
.app-status-badge.app-status-review   {background:#fefce8;color:#854d0e;border:1px solid #fde68a}
.app-status-badge.app-status-processing{background:#fff7ed;color:#c2410c;border:1px solid #fdba74}
.app-status-badge.app-status-billed   {background:#fdf4ff;color:#7c3aed;border:1px solid #d8b4fe}
/* 폐기 상태 */
.app-status-badge.app-status-discarded {background:#fff1f2;color:#be123c;border:1px solid #fda4af}
/* 폐기 행: 빨간 밑줄 */
tr.app-row-discarded td                {text-decoration:line-through;text-decoration-color:#fca5a5;color:#94a3b8}
tr.app-row-discarded td strong         {color:#94a3b8}
tr.app-row-discarded td:first-child    {text-decoration:none}
tr.app-row-discarded .app-status-badge {text-decoration:none}
/* 납부완료 뱃지 */
.app-billing-tag.paid-done             {background:#dcfce7;color:#15803d;border:1px solid #86efac;font-weight:700;cursor:pointer}
/* 서명 완료된 눈 아이콘 */
.act-icon-btn.view.signed              {background:#ecfdf5;border-color:#34d399;color:#059669}
.act-icon-btn.view.signed:hover        {background:#d1fae5;border-color:#10b981;color:#047857}
/* 해지관리 전용 버튼 */
.act-icon-btn.edit:hover               {background:#fef9c3;border-color:#fbbf24;color:#b45309}
.act-icon-btn.cancel-proc:hover        {background:#f0f7ff;border-color:#93c5fd;color:#1d4ed8}
.act-icon-btn.cancel-proc.done:hover   {background:#f0fdf4;border-color:#86efac;color:#15803d}

/* ── 신청 모달 고객정보 패널 ── */
.app-cust-info-item{display:flex;align-items:center;gap:6px;font-size:12px;color:#374151}
.app-cust-info-lbl{min-width:80px;font-size:11px;font-weight:700;color:#64748b;flex-shrink:0}

/* ── 신청관리 서브그룹 구분선 ── */
.sub-group-divider{font-size:10px;font-weight:700;color:#94a3b8;padding:8px 12px 2px;
  letter-spacing:.5px;text-transform:uppercase;border-top:1px solid #f1f5f9;margin-top:4px}
.sub-group-divider:first-child{border-top:none;margin-top:0}
.sub-btn-child{padding-left:22px !important;font-size:12px !important}
.sub-btn-child i{font-size:11px !important}

/* ===================================================
   프로세스 관리 모듈 (process.js)
   =================================================== */

/* ── 에디터 툴바 버튼 ── */
.pse-tb-btn {
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 8px; border:1px solid #e2e8f0; border-radius:5px;
  background:#fff; color:#374151; font-size:12px;
  cursor:pointer; transition:all .12s; line-height:1; font-family:inherit;
}
.pse-tb-btn:hover { background:#eff6ff; border-color:#bfdbfe; color:#1d4ed8; }
.pse-tb-btn.pse-tb-highlight { background:#fefce8; border-color:#fde68a; color:#854d0e; }

/* ── 에디터 contenteditable ── */
#pse-editor img { max-width:100%; border-radius:6px; margin:6px 0; display:block; border:1px solid #e2e8f0; }
#pse-editor h2 { font-size:16px; font-weight:700; color:#1e293b; margin:14px 0 6px; padding-bottom:4px; border-bottom:2px solid #e2e8f0; }
#pse-editor h3 { font-size:14px; font-weight:700; color:#374151; margin:10px 0 4px; }
#pse-editor ul, #pse-editor ol { padding-left:20px; margin:6px 0; }
#pse-editor li { margin:3px 0; }
#pse-editor hr { border:none; border-top:2px solid #e2e8f0; margin:10px 0; }
#pse-editor:empty:before { content:attr(placeholder); color:#94a3b8; font-style:italic; pointer-events:none; }

/* ── 프로세스 단계 뷰어 (잠재고객 모달) ── */
.proc-step-row { transition:border-color .15s; background:#fff !important; }
.proc-step-row:hover { border-color:#bfdbfe !important; }
/* 완료된 행도 배경색 없음 — 체크 아이콘으로만 구별 */
.proc-step-row[data-done="true"] { background:#fff !important; }

/* ── 공통 떠다니는 말풍선 (body 기준 fixed 위치) ── */
#global-tooltip {
  position: fixed;
  z-index: 99999;
  background: #1e293b;
  color: #fff;
  border-radius: 8px;
  padding: 8px 13px;
  font-size: 12px;
  line-height: 1.65;
  box-shadow: 0 4px 18px rgba(0,0,0,0.30);
  pointer-events: none;
  max-width: 280px;
  white-space: pre-wrap;
  word-break: break-all;
  display: none;
}
#global-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: var(--arrow-left, 50%);
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1e293b;
}

/* ── 첨언 풍선 아이콘 - hover 시 global tooltip 사용 ── */
.proc-comment-bubble { cursor: default; }

/* ── 프로세스 카드: 흰 배경 + 충분한 내부 여백 ── */
.proc-card {
  background: #fff !important;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 20px 22px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  transition: box-shadow .2s, transform .2s;
}

/* ── +N개 태그 (global tooltip 사용) ── */
.proc-more-tag { cursor: default; }

/* ── 프로세스 탭 버튼 강조 ── */
#pp-process-tab.active {
  background:#dbeafe !important;
  color:#1d4ed8 !important;
  border-bottom:2px solid #1d4ed8 !important;
}

/* ── 프로세스 모달 탭 active ── */
.proc-modal-tab.active {
  border-bottom:2px solid #1d4ed8 !important;
  color:#1d4ed8 !important;
  background:#eff6ff !important;
}

/* ── 서명 미리보기 위치 애니 ── */
#usr-sign-preview-wrap { transition:border-color .2s; }
#usr-sign-preview-wrap:hover { border-color:#f59e0b !important; }

/* ── proc-card hover ── */
.proc-card:hover { transform:translateY(-2px); }

/* ── 잠재고객 목록 P(프로세스) 버튼 ── */
.proc-p-btn {
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  color: #1d4ed8 !important;
  font-weight: 800 !important;
  min-width: 26px;
}
.proc-p-btn:hover {
  background: #dbeafe !important;
  border-color: #3b82f6 !important;
  transform: scale(1.1);
}

/* ══════════════════════════════════════════════════════
   메뉴 권한(M 버튼) 전용 스타일 — v20260410x
══════════════════════════════════════════════════════ */

/* ── M 버튼 (사용자 목록 액션열) ── */
.menu-perm-btn {
  background: #f0fdf4 !important;
  border: 1px solid #86efac !important;
  color: #15803d !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  min-width: 28px;
  height: 28px;
  letter-spacing: -0.5px;
  border-radius: 6px !important;
}
.menu-perm-btn:hover {
  background: #dcfce7 !important;
  border-color: #22c55e !important;
  box-shadow: 0 0 0 3px #bbf7d066;
}

/* ── 모달 오버레이 (반드시 fixed + z-index 높게) ── */
/* ════════════════════════════════════════════════════
   M버튼 메뉴 권한 설정 모달 (완전 재설계 v20260410z)
   - 순수 흰색 배경 + 진한 텍스트 → 높은 가독성
   - 역할기본 아이템: 연보라 점선 테두리
   - 선택된 아이템: 청록 실선 + 체크아이콘 + 밝은 배경
   ════════════════════════════════════════════════════ */

/* ── 오버레이 (JS에서 display:flex로 열고 display:none으로 닫음) ── */
#menu-perm-modal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.6);
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
#menu-perm-modal.hidden { display: none !important; }

@keyframes mpSlideUp {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ── 모달 박스 ── */
.mp-modal-box {
  position: relative;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25), 0 4px 16px rgba(0,0,0,0.1);
  width: 860px;
  max-width: 100%;
  height: 600px;
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: mpSlideUp 0.22s ease-out;
}

/* ── 헤더 ── */
.mp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px 14px;
  border-bottom: 2px solid #f1f5f9;
  flex-shrink: 0;
  background: #ffffff;
}
.mp-modal-header-left {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
}
.mp-modal-icon {
  width: 38px; height: 38px; border-radius: 10px;
  background: #1d4ed8;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mp-modal-icon i { color: #ffffff; font-size: 17px; }
.mp-modal-title {
  font-size: 16px; font-weight: 800; color: #0f172a; letter-spacing: -0.4px;
}
.mp-user-info {
  font-size: 12px; font-weight: 600; color: #374151;
  background: #f3f4f6; border-radius: 6px;
  padding: 4px 10px; border: 1px solid #e5e7eb;
}
#mp-custom-badge {
  display: none;
  font-size: 10px; font-weight: 700;
  background: #fffbeb; color: #92400e;
  border: 1px solid #fbbf24; border-radius: 5px;
  padding: 3px 8px;
}
.mp-close-btn {
  background: none; border: none; cursor: pointer;
  color: #9ca3af; font-size: 22px; line-height: 1;
  width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.mp-close-btn:hover { background: #fee2e2; color: #ef4444; }

/* ── 안내바 ── */
.mp-info-bar {
  padding: 8px 22px;
  font-size: 11.5px; color: #6b7280;
  background: #f9fafb;
  border-bottom: 1px solid #f1f5f9;
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
  line-height: 1.4;
}
.mp-info-bar i { color: #6b7280; font-size: 12px; }
.mp-legend {
  margin-left: auto; display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
.mp-legend-item {
  display: flex; align-items: center; gap: 5px; font-size: 11px; color: #6b7280;
}
.mp-legend-dot {
  width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0;
}

/* ── 2-컬럼 바디 ── */
.mp-body { flex: 1; display: flex; overflow: hidden; min-height: 0; }

/* ── 사이드바 ── */
.mp-sidebar {
  width: 148px; flex-shrink: 0;
  background: #f8fafc;
  border-right: 1px solid #e9ecef;
  overflow-y: auto; padding: 8px 0;
}
.mp-menu-item {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px 10px 15px;
  cursor: pointer; font-size: 12.5px; font-weight: 500;
  color: #6b7280; border-left: 3px solid transparent;
  transition: all 0.12s; user-select: none;
}
.mp-menu-item:hover { background: #f1f5f9; color: #374151; }
.mp-menu-item.active {
  background: #ffffff;
  color: #111827;
  font-weight: 700;
  border-left: 3px solid var(--mp-active-color, #1d4ed8);
  box-shadow: 1px 0 0 0 #e5e7eb;
}
.mp-menu-item i {
  width: 14px; text-align: center; font-size: 12px; flex-shrink: 0;
  color: #d1d5db;
}
.mp-menu-item.active i { color: var(--mp-active-color, #1d4ed8); }
.mp-menu-item:hover i { color: #9ca3af; }
.mp-menu-count {
  margin-left: auto;
  font-size: 10px; font-weight: 700;
  background: #e5e7eb; color: #6b7280;
  border-radius: 10px;
  min-width: 18px; height: 18px; line-height: 18px;
  text-align: center; padding: 0 5px;
}
.mp-menu-item.active .mp-menu-count {
  background: var(--mp-active-color, #1d4ed8);
  color: #ffffff;
}

/* ── 패널 영역 ── */
.mp-panels {
  flex: 1; overflow-y: auto; padding: 18px 20px;
  background: #ffffff; min-height: 0;
}
.mp-panel { display: none; }
.mp-panel.active { display: block; }

/* ── 패널 헤더 ── */
.mp-panel-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 1.5px solid #f1f5f9;
}
.mp-panel-icon-wrap {
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--mp-panel-color, #6b7280);
  flex-shrink: 0;
}
.mp-panel-icon-wrap i { color: #ffffff; font-size: 13px; }
.mp-panel-title { font-size: 14px; font-weight: 800; color: #111827; }
.mp-panel-subtitle {
  font-size: 11px; color: #9ca3af;
  margin-left: auto; text-align: right;
  max-width: 240px; line-height: 1.3;
}

/* ── 전체 선택/해제 버튼 ── */
.mp-check-actions {
  display: flex; gap: 6px; margin-bottom: 14px;
}
.mp-check-all-btn, .mp-uncheck-all-btn {
  font-size: 11.5px; padding: 5px 12px; border-radius: 6px;
  cursor: pointer; font-weight: 600; border: 1px solid;
  transition: background 0.12s, border-color 0.12s;
  display: flex; align-items: center; gap: 5px;
}
.mp-check-all-btn {
  background: #f0fdf4; color: #166534; border-color: #86efac;
}
.mp-check-all-btn:hover { background: #dcfce7; border-color: #4ade80; }
.mp-uncheck-all-btn {
  background: #fff5f5; color: #991b1b; border-color: #fca5a5;
}
.mp-uncheck-all-btn:hover { background: #fee2e2; border-color: #f87171; }

/* ── 서브메뉴 카드 그리드 ── */
.mp-sub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}

/* ── 서브메뉴 카드 기본 ── */
.mp-sub-item {
  position: relative;
  display: flex; align-items: center; gap: 9px;
  padding: 11px 12px;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  cursor: pointer;
  font-size: 12.5px; color: #6b7280;
  font-weight: 500;
  background: #ffffff;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s, color 0.12s;
  user-select: none;
  min-height: 44px;
}
.mp-sub-item:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  color: #374151;
}

/* ── 선택된 카드 ── */
.mp-sub-item.checked {
  border: 2px solid var(--mp-item-border, #0891b2);
  background: var(--mp-item-bg, #ecfeff);
  color: #0f172a;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(8,145,178,0.12);
}

/* 숨겨진 실제 체크박스 */
.mp-sub-item input[type=checkbox] {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}

/* ── 커스텀 체크박스 아이콘 ── */
.mp-sub-checkbox {
  width: 17px; height: 17px; border-radius: 4px;
  border: 1.5px solid #d1d5db; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.12s; background: #fff;
}
.mp-sub-item.checked .mp-sub-checkbox {
  background: var(--mp-item-border, #0891b2);
  border-color: var(--mp-item-border, #0891b2);
}
.mp-sub-item.checked .mp-sub-checkbox::after {
  content: '';
  display: block;
  width: 4px; height: 8px;
  border: 2px solid #fff;
  border-top: none; border-left: none;
  transform: rotate(45deg) translateY(-1px);
}

/* ── 서브메뉴 아이콘 ── */
.mp-sub-item .mp-sub-icon {
  font-size: 13px; width: 15px; text-align: center; flex-shrink: 0;
  color: #d1d5db;
  transition: color 0.12s;
}
.mp-sub-item.checked .mp-sub-icon {
  color: var(--mp-item-border, #0891b2);
}
.mp-sub-item:hover:not(.checked) .mp-sub-icon { color: #9ca3af; }

.mp-sub-item .mp-sub-label { flex: 1; line-height: 1.25; }

/* ── 역할 기본 항목 표시 ── */
.mp-sub-item.mp-sub-role-default {
  border-style: dashed;
  border-color: #c7d2fe;
}
.mp-sub-item.mp-sub-role-default.checked {
  border-style: solid;
}

/* 역할기본 뱃지 */
.mp-sub-role-tag {
  position: absolute; top: -1px; right: -1px;
  font-size: 8.5px; font-weight: 700;
  background: #818cf8; color: #fff;
  border-radius: 0 9px 0 6px;
  padding: 2px 5px; letter-spacing: -0.2px;
  line-height: 1.2;
}

/* ── 푸터 ── */
.mp-modal-footer {
  display: flex; align-items: center;
  gap: 8px; padding: 13px 22px;
  border-top: 2px solid #f1f5f9;
  flex-shrink: 0;
  background: #f9fafb;
}
.mp-reset-btn {
  display: flex; align-items: center; gap: 6px;
  background: #ffffff; border: 1px solid #fca5a5;
  color: #dc2626; padding: 8px 15px; border-radius: 8px;
  font-size: 12px; cursor: pointer; font-weight: 600;
  transition: all 0.12s;
}
.mp-reset-btn:hover { background: #fee2e2; border-color: #f87171; }
.mp-spacer { flex: 1; }
.mp-cancel-btn {
  background: #ffffff; border: 1px solid #e5e7eb;
  color: #6b7280; padding: 9px 20px; border-radius: 8px;
  font-size: 13px; cursor: pointer; font-weight: 500;
  transition: background 0.12s, border-color 0.12s;
}
.mp-cancel-btn:hover { background: #f3f4f6; border-color: #d1d5db; }
.mp-save-btn {
  display: flex; align-items: center; gap: 7px;
  background: #1d4ed8;
  color: #ffffff; border: none;
  padding: 9px 24px; border-radius: 8px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background 0.12s, box-shadow 0.12s;
  box-shadow: 0 2px 8px rgba(29,78,216,0.3);
}
.mp-save-btn:hover { background: #1e40af; box-shadow: 0 4px 14px rgba(29,78,216,0.4); }

/* ══════════════════════════════════════════════
   프로세스 관리 스켈레톤 로딩
   ══════════════════════════════════════════════ */
@keyframes procShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.proc-skeleton-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px 18px 14px;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
  overflow: hidden;
  position: relative;
  animation: prospSkelFadeIn 0.3s ease both;
}
.proc-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.75) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: procShimmer 1.4s infinite ease-in-out;
  pointer-events: none;
}