/* ══════════════════════════════════════════════════
   디자인 토큰 — 모던 화이트 톤(SaaS), 중간 강도
   전 화면이 이 토큰만 참조하도록 한다. 화면별로 색상을 새로 정의하지 말 것.
══════════════════════════════════════════════════ */
:root {
  /* 색상 */
  --bg:            #f5f6f8; /* 페이지 배경 */
  --bg-soft:       #f9fafb; /* 테이블 헤더 등 옅은 패널 배경 */
  --surface:       #ffffff; /* 카드/패널 배경 */
  --border:        #e5e7eb; /* 옅은 경계선 */
  --border-strong: #d1d5db; /* 조금 더 진한 경계선(헤더 하단 등) */
  --text:          #1f2937;
  --text-muted:    #6b7280;
  --text-faint:    #9ca3af;
  --primary:       #2563eb;
  --primary-hover: #1d4ed8;
  --primary-soft:  #eff6ff;
  --danger:        #dc2626;
  --danger-soft:   #fef2f2;
  --success:       #16a34a;
  --success-soft:  #f0fdf4;
  --warning:       #d97706;
  --warning-soft:  #fffbeb;

  /* 사이드바 — 흰 GNB와 대비되는 다크 톤을 유지하되 정돈된 값으로 */
  --sidebar-bg:      #1f2430;
  --sidebar-bg-alt:  #171b24;
  --sidebar-border:  #2b3140;
  --sidebar-text:    #9aa3b5;
  --sidebar-text-hi: #ffffff;
  --sidebar-active:  #2563eb;

  /* 반경 */
  --radius:    8px;
  --radius-sm: 6px;
  --radius-lg: 10px;

  /* 그림자 */
  --shadow-sm:   0 1px 2px rgba(16,24,40,.06);
  --shadow-card: 0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04);
  --shadow-lg:   0 12px 32px rgba(16,24,40,.18);

  /* 간격 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* 폰트 */
  --font: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', '맑은 고딕', sans-serif;
}

/* ── 리셋 ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-size: 13px; color: var(--text); background: var(--bg);
  font-family: var(--font); line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; cursor: pointer; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: inherit; font-size: 13px; }

/* ── 상태 배지 ────────────────────────────────── */
.api-badge {
  font-size: 11px; color: var(--text-muted);
  background: var(--bg-soft); padding: 2px 9px; border-radius: 999px; border: 1px solid var(--border);
  font-weight: 600;
}
.api-badge.live { color: var(--success); background: var(--success-soft); border-color: #bbf0cf; }

/* ── GNB ──────────────────────────────────────── */
.gnb {
  display: flex; align-items: stretch;
  background: var(--surface); border-bottom: 1px solid var(--border);
  height: 44px; padding: 0 16px;
  position: sticky; top: 0; z-index: 100;
  box-shadow: var(--shadow-sm);
}
.gnb-logo {
  display: flex; align-items: center;
  padding-right: 16px; margin-right: 6px; border-right: 1px solid var(--border);
}
.logo-text { font-size: 17px; font-weight: 800; color: var(--text); letter-spacing: -0.5px; white-space: nowrap; }
.logo-text em { color: var(--primary); font-style: normal; }
.gnb-menu { display: flex; flex: 1; }
.gnb-item {
  display: flex; align-items: center; padding: 0 16px;
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: .15s; white-space: nowrap;
}
.gnb-item:hover { color: var(--text); }
.gnb-item.active { color: var(--primary); border-bottom-color: var(--primary); }
.gnb-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.gnb-icon { font-size: 14px; padding: 4px; color: var(--text-faint); border-radius: var(--radius-sm); transition: .1s; }
.gnb-icon:hover { color: var(--text); background: var(--bg-soft); }
.gnb-user {
  background: var(--primary-soft); color: var(--primary); font-size: 12px; font-weight: 700;
  padding: 3px 11px; border-radius: 999px;
}
.gnb-logout-btn {
  font-size: 11px; padding: 4px 11px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-muted); font-weight: 600; transition: .12s;
}
.gnb-logout-btn:hover { background: var(--bg-soft); border-color: var(--border-strong); color: var(--text); }

/* ── 레이아웃 ─────────────────────────────────── */
.layout {
  display: flex;
  height: calc(100vh - 44px);
}

/* ── 사이드바 ─────────────────────────────────── */
.sidebar {
  width: 155px; flex-shrink: 0;
  background: var(--sidebar-bg); overflow-y: auto; overflow-x: hidden;
}
.sidebar-section.hidden { display: none; }

.sidebar-group-title {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 10px 9px 13px;
  color: var(--sidebar-text); font-size: 12px; font-weight: 700;
  cursor: pointer; user-select: none;
  border-top: 1px solid var(--sidebar-border);
  letter-spacing: 0.2px;
}
.sidebar-group-title:first-child { border-top: none; }
.sidebar-group-title:hover { background: var(--sidebar-border); color: var(--sidebar-text-hi); }
.sidebar-group-title .arr { font-size: 10px; flex-shrink: 0; }

.sidebar-group-items { background: var(--sidebar-bg-alt); }
.sidebar-group-items.hidden { display: none; }

.sidebar-item {
  display: block; padding: 7px 10px 7px 22px;
  color: var(--sidebar-text); font-size: 12px;
  border-left: 3px solid transparent; transition: .12s;
}
.sidebar-item:hover { background: var(--sidebar-border); color: var(--sidebar-text-hi); border-left-color: var(--text-faint); }
.sidebar-item.active {
  background: rgba(37,99,235,.16); color: #dbe6ff; font-weight: 700;
  border-left-color: var(--sidebar-active);
}

/* ── 메인 영역 ────────────────────────────────── */
.main-area { flex: 1; overflow-y: auto; display: flex; flex-direction: column; background: var(--bg); }

/* ── 페이지 ───────────────────────────────────── */
.page { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.page.hidden { display: none; }

/* ── 페이지 헤더 ──────────────────────────────── */
.page-head {
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 10px 16px; flex-shrink: 0;
}
.title-row { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.star { color: var(--primary); font-size: 13px; }
.page-title { font-size: 16px; font-weight: 700; color: var(--text); margin-right: 4px; }

/* ── 필터 버튼 ────────────────────────────────── */
.filter-group { display: flex; gap: 4px; }
.filt {
  height: 30px; padding: 0 13px; font-size: 12px; font-weight: 500;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-muted); transition: .12s;
  display: inline-flex; align-items: center;
}
.filt:hover { background: var(--bg-soft); border-color: var(--border-strong); color: var(--text); }
.filt.active { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600; }

/* ── 툴바 ────────────────────────────────────── */
.toolbar { display: flex; align-items: center; gap: 6px; }
.search-input {
  width: 260px; height: 32px; padding: 0 11px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 12.5px; font-family: inherit; color: var(--text); background: var(--surface);
  transition: border-color .12s, box-shadow .12s;
}
.search-input::placeholder { color: var(--text-faint); }
.search-input:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.tbtn {
  height: 32px; padding: 0 13px; font-size: 12.5px; font-weight: 500;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); transition: .12s;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
}
.tbtn:hover { background: var(--bg-soft); border-color: var(--border-strong); }
.tbtn:disabled { opacity: .5; cursor: default; }
.tbtn:disabled:hover { background: var(--surface); border-color: var(--border); }

/* Search(F3) / 저장 등 주 액션 */
.tbtn.primary {
  background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600;
}
.tbtn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }

/* +등록 등 보조 강조 액션 — primary와 위계 구분을 위해 진한 텍스트톤 아웃라인 */
.tbtn.accent {
  background: var(--text); color: #fff; border-color: var(--text);
}
.tbtn.accent:hover { background: #111827; border-color: #111827; }

/* 위험 버튼 */
.tbtn.danger { background: var(--danger-soft); color: var(--danger); border: 1px solid #fecaca; }
.tbtn.danger:hover { background: #fde0e0; border-color: #f5b5b5; }

/* ── 통계 바 ──────────────────────────────────── */
.stat-bar {
  display: flex; gap: 8px; padding: 8px 16px;
  background: var(--surface); border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.chip {
  padding: 3px 12px; font-size: 12px; font-weight: 500; border-radius: 999px;
  background: var(--bg-soft); border: 1px solid var(--border); color: var(--text-muted);
}
.chip b { font-weight: 700; margin-left: 3px; color: var(--text); }

/* 구분별 칩 — 토큰 기반, 과하지 않게 */
.chip.teal   { background: var(--success-soft); border-color: #bbf0cf; }
.chip.teal b { color: var(--success); }
.chip.blue   { background: var(--primary-soft); border-color: #bfdbfe; }
.chip.blue b { color: var(--primary); }
.chip.purple { background: #f5f3ff; border-color: #ddd6fe; }
.chip.purple b { color: #7c3aed; }
.chip.gray   { background: var(--bg-soft); border-color: var(--border); }
.chip.gray b { color: var(--text-muted); }

/* ── 테이블 ───────────────────────────────────── */
.tbl-wrap {
  flex: 1; overflow: auto; background: var(--surface);
  border-top: 1px solid var(--border);
}
.dtbl { width: 100%; border-collapse: collapse; min-width: 600px; }
.dtbl thead th {
  background: var(--bg-soft); border-bottom: 1px solid var(--border-strong);
  border-right: 1px solid var(--border);
  padding: 8px 10px; font-size: 12px; font-weight: 700; color: var(--text-muted);
  white-space: nowrap; text-align: center;
  position: sticky; top: 0; z-index: 1;
}
.dtbl tbody td {
  padding: 7px 10px; border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border); color: var(--text);
  white-space: nowrap; font-size: 12.5px;
}
.dtbl tbody tr { cursor: pointer; transition: background .08s; background: var(--surface); }
.dtbl tbody tr:hover { background: var(--primary-soft); }
.dtbl tbody tr:nth-child(even) { background: #fbfbfc; }
.dtbl tbody tr:nth-child(even):hover { background: var(--primary-soft); }
.empty { text-align: center; color: var(--text-faint); padding: 40px !important; }

/* .dtbl 안에서 클래스 없이(구버전 관례로 인라인 스타일만 넣어) 쓰인 인라인 편집용
   input/select/textarea도 동일한 모던 톤을 쓰도록 한다(예: 담당자 관리, 주간업무
   조회의 인라인 수정 행). 일부는 회색조 인라인 border를 직접 갖고 있어 !important로
   맞춰준다 — 값/동작은 그대로, 표시만 통일. */
.dtbl td select, .dtbl td textarea,
.dtbl td input[type="text"], .dtbl td input[type="email"], .dtbl td input[type="number"] {
  border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important;
  padding: 4px 7px !important; font-size: 12.5px !important; font-family: inherit;
  color: var(--text); background: var(--surface);
  transition: border-color .12s, box-shadow .12s;
}
.dtbl td select:focus, .dtbl td textarea:focus,
.dtbl td input[type="text"]:focus, .dtbl td input[type="email"]:focus, .dtbl td input[type="number"]:focus {
  outline: none; border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--primary-soft);
}

/* ── 리스트형 화면 공용 컬럼 정렬 (TableSort) ─────────── */
.dtbl thead th.sortable-th { cursor: pointer; }
.dtbl thead th .sort-icon { display: inline-block; margin-left: 4px; font-size: 9px; color: transparent; }
.dtbl thead th.sortable-th:hover .sort-icon { color: var(--text-faint); }
.dtbl thead th .sort-icon.active { color: var(--primary); }

/* ── 월별 등록/계약 추이: 병합 그룹 헤더 + 배경 구분 (표시 전용) ─────────
   그룹 헤더 행은 TableSort가 순회하는 "thead th" 인덱스에 끼면 정렬 컬럼
   매핑이 어긋나므로 <td>로 만든다. 정렬 대상 컬럼 헤더(<th>) 5개는 그대로. */
#rpt-month-tbl thead th, #rpt-month-tbl thead td { position: static; }
/* 컬럼 너비 비율(월12% / 건수13%×2 / 영업이익31%×2, colgroup 지정)이 실제로 반영되도록
   고정 레이아웃 적용. 건수 열이 좁아지므로 헤더 텍스트는 줄바꿈 허용(nowrap 해제). */
#rpt-month-tbl { table-layout: fixed; }
#rpt-month-tbl thead th { white-space: normal; line-height: 1.3; }
#rpt-month-tbl .rpt-month-grouphead {
  background: var(--bg-soft); border-bottom: 1px solid var(--border-strong); border-right: 1px solid var(--border);
  padding: 5px 10px; font-size: 11.5px; font-weight: 700; color: var(--text-muted);
  text-align: center; white-space: nowrap;
}
#rpt-month-tbl .rpt-month-grouphead-lead     { background: var(--primary-soft); color: var(--primary); }
#rpt-month-tbl .rpt-month-grouphead-contract { background: var(--success-soft); color: var(--success); }
#rpt-month-tbl thead th.rpt-month-th-lead     { background: var(--primary-soft); }
#rpt-month-tbl thead th.rpt-month-th-contract { background: var(--success-soft); }
#rpt-month-tbody td:nth-child(2), #rpt-month-tbody td:nth-child(3) { background: var(--primary-soft); }
#rpt-month-tbody td:nth-child(4), #rpt-month-tbody td:nth-child(5) { background: var(--success-soft); }
#rpt-month-foot td:nth-child(2), #rpt-month-foot td:nth-child(3) { background: var(--primary-soft); }
#rpt-month-foot td:nth-child(4), #rpt-month-foot td:nth-child(5) { background: var(--success-soft); }

/* ── 활동 조회: 리사이즈 가능한 테이블 ─────────── */
.act-tbl { table-layout: fixed; }
.act-tbl thead th { position: relative; overflow: hidden; }
.act-ellipsis-td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: help; }
.col-resize-handle {
  position: absolute; top: 0; right: -3px; width: 6px; height: 100%;
  cursor: col-resize; z-index: 2; user-select: none;
}
.col-resize-handle:hover, .col-resize-handle.active { background: rgba(37,99,235,.18); }

/* ── 영업기회 단계별 리스트: 리사이즈 가능한 테이블 ──── */
table[id^="ol-"][id$="-tbl"], #pl-list-tbl { table-layout: fixed; }
table[id^="ol-"][id$="-tbl"] thead th, #pl-list-tbl thead th { position: relative; overflow: hidden; }
.ol-dday {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  background: var(--primary-soft); color: var(--primary); font-weight: 700; font-size: 11px;
}

/* ── 배지 ────────────────────────────────────── */
.badge {
  display: inline-block; padding: 2px 9px;
  border-radius: 999px; font-size: 11px; font-weight: 600;
}
/* 거래처 구분 */
.badge-contract { background: var(--primary-soft); color: var(--primary); border: 1px solid #bfdbfe; }
.badge-client   { background: var(--bg-soft); color: var(--text-muted); border: 1px solid var(--border); }
/* 품목 구분 */
.badge-product  { background: #f5f3ff; color: #7c3aed; border: 1px solid #ddd6fe; }
.badge-service  { background: var(--bg-soft); color: var(--text-muted); border: 1px solid var(--border); }
.badge-sw       { background: var(--primary-soft); color: var(--primary); border: 1px solid #bfdbfe; }
/* 프로젝트 상태 (구형 — 호환) */
.badge-ready    { background: var(--bg-soft); color: var(--text-faint); border: 1px solid var(--border); }
.badge-doing    { background: var(--warning-soft); color: var(--warning); border: 1px solid #fde3b0; font-weight: 700; }
.badge-done     { background: var(--bg-soft); color: var(--text-muted); border: 1px solid var(--border-strong); }
/* 사업구분 */
.badge-sales    { background: var(--success-soft); color: var(--success); border: 1px solid #bbf0cf; font-weight: 700; }
.badge-purchase { background: var(--warning-soft); color: #92600a; border: 1px solid #fde3b0; font-weight: 700; }
/* 사용 상태 */
.badge-active   { background: var(--success-soft); color: var(--success); border: 1px solid #bbf0cf; }
.badge-stopped  { background: var(--bg-soft); color: var(--text-faint); border: 1px solid var(--border); }
/* 선택된 행 */
.selected-row { background: var(--primary-soft) !important; outline: 1px solid #93b7f5; }

/* ── 테이블 풋 ────────────────────────────────── */
.tbl-foot {
  padding: 7px 16px; background: var(--surface);
  border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-muted); flex-shrink: 0;
  display: flex; align-items: center; gap: 12px;
}
/* 액션은 항상 우측 끝. 페이지네이션이 없는 풋(담당자·사원·단계별 목록 등)에서도 오른쪽에 붙는다. */
.tbl-foot-actions { display: flex; gap: 4px; flex: 0 0 auto; margin-left: auto; }
/* 풋 배치: 건수(좌) · 페이지네이션(가운데) · 액션(우).
   페이지네이션은 좌우 사이에 남는 폭을 차지하고 그 안에서 가운데 정렬된다.
   예전에는 position:absolute로 풋 전체 폭 기준 중앙에 뒀는데, 액션 버튼이 많은 화면
   (품목·프로젝트)에서는 버튼 위에 그대로 겹쳐 찍혔다. */
.pagination {
  display: flex; align-items: center; justify-content: center; gap: 2px;
  flex: 1 1 auto;
}
.pg-btn {
  min-width: 28px; height: 26px; padding: 0 6px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-muted); font-size: 11px; cursor: pointer;
}
.pg-btn:hover:not(:disabled) { background: var(--bg-soft); border-color: var(--border-strong); }
.pg-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 700; }
.pg-btn:disabled { color: var(--text-faint); cursor: default; }
.pg-ellipsis { font-size: 11px; color: var(--text-faint); padding: 0 3px; line-height: 24px; }

/* ── 준비중 ───────────────────────────────────── */
.coming-soon {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: var(--text-faint); gap: 10px;
}
.coming-icon { font-size: 40px; opacity: .35; }

/* ── 모달 ─────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(17,24,39,.45);
  z-index: 1000; display: flex; align-items: center; justify-content: center;
}
.modal-overlay.hidden { display: none; }
.modal-box {
  background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 500px; max-width: 95vw; max-height: 80vh; overflow-y: auto;
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  background: var(--surface); position: sticky; top: 0;
}
.modal-head h3 { font-size: 14px; font-weight: 700; color: var(--text); }
.modal-x { font-size: 16px; color: var(--text-faint); }
.modal-x:hover { color: var(--text); }
.modal-body { padding: 14px 16px; }
.mrow {
  display: flex; border-bottom: 1px solid var(--border);
  padding: 8px 0; align-items: flex-start;
}
.mrow:last-child { border: none; }
.mlabel { width: 100px; flex-shrink: 0; color: var(--text-faint); font-size: 12px; padding-top: 1px; }
.mval { color: var(--text); font-size: 13px; word-break: break-all; }

/* ── 검색 셀렉트 ──────────────────────────────── */
.search-select {
  height: 32px; padding: 0 10px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: 12.5px; font-family: inherit;
  background: var(--surface); color: var(--text);
  transition: border-color .12s, box-shadow .12s;
}
.search-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

/* ── 모달 와이드 ──────────────────────────────── */
.modal-box.wide { width: 700px; }

/* ── 모달 탭 ──────────────────────────────────── */
.modal-tabs {
  display: flex; border-bottom: 1px solid var(--border);
  background: var(--bg-soft); padding: 0 16px;
}
.modal-tab {
  padding: 9px 16px; font-size: 13px; font-weight: 600;
  color: var(--text-muted); border-bottom: 2px solid transparent;
  margin-bottom: -1px; transition: .12s; cursor: pointer;
}
.modal-tab:hover { color: var(--text); }
.modal-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.tab-badge {
  display: inline-block; background: var(--primary); color: #fff;
  font-size: 10px; font-weight: 700; padding: 0 5px;
  border-radius: 999px; margin-left: 4px; min-width: 16px; text-align: center;
}

/* ── 담당자 탭 내부 ───────────────────────────── */
.contact-tab-toolbar {
  padding: 10px 16px 6px; display: flex; justify-content: flex-end;
}
.modal-contact-table-wrap { overflow-x: auto; }
.modal-contact-table-wrap .dtbl { min-width: 500px; }

/* ── 담당자 등록 폼 ───────────────────────────── */
.contact-form {
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 10px;
}
.contact-form.hidden { display: none; }
.contact-form-title {
  font-size: 13px; font-weight: 700; color: var(--text);
  margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.contact-form-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 8px 12px; margin-bottom: 10px;
}
.cf-field.full { grid-column: 1 / -1; }
.cf-field label {
  display: block; font-size: 11px; color: var(--text-muted);
  margin-bottom: 3px;
}
.cf-field .req { color: var(--danger); }
.cf-input {
  width: 100%; height: 30px; padding: 0 9px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 12.5px; font-family: inherit; color: var(--text); background: var(--surface);
  transition: border-color .12s, box-shadow .12s;
}
.cf-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.contact-form-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* ── 담당자 테이블 관리 버튼 ──────────────────── */
.btn-edit { font-size: 11px; color: var(--text-muted); padding: 2px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-soft); }
.btn-edit:hover { background: #f0f1f3; color: var(--text); }
.btn-del  { font-size: 11px; color: var(--danger); padding: 2px 8px; border: 1px solid #f5c2c2; border-radius: var(--radius-sm); background: var(--danger-soft); }
.btn-del:hover { background: #fde0e0; }

/* ── 거래처 모달 푸터 ──────────────────────────── */
.cust-modal-footer {
  padding: 12px 16px; border-top: 1px solid var(--border);
  background: var(--bg-soft); display: flex; gap: 6px;
  position: sticky; bottom: 0;
}

/* 거래처 모달 — 뷰 모드: 입력 필드를 텍스트처럼 보이게 */
#cust-tab-info input[readonly]:not([type='radio']),
#cust-tab-info textarea[readonly] {
  background: transparent !important;
  border-color: transparent !important;
  cursor: default;
  color: var(--text);
  padding-left: 0;
  resize: none;
}
#cust-tab-info input[type='radio'][disabled] { opacity: 0.7; }
.mrow .mlabel { min-width: 90px; flex-shrink: 0; }

/* ── 거래처 등록 폼 (이카운트 스타일 → 모던 톤으로 정돈) ────────── */
.frm-tabs {
  display: flex; background: var(--surface);
  border-bottom: 1px solid var(--border); padding: 0 16px; flex-shrink: 0;
}
.frm-tab {
  padding: 10px 18px 8px; font-size: 12.5px; font-weight: 600;
  color: var(--text-muted); border: none; background: none; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: .12s;
}
.frm-tab:hover { color: var(--text); }
.frm-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

.frm-content {
  flex: 1; overflow-y: auto; background: var(--bg); padding: 12px 16px;
}
.frm-tab-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.frm-tab-panel.hidden { display: none; }

.frm-form-wrap { max-width: 800px; }

.frm-tbl { width: 100%; border-collapse: collapse; }
.frm-col-label { width: 130px; }
.frm-tbl th {
  background: var(--bg-soft); border: 1px solid var(--border);
  padding: 6px 12px; font-size: 12px; font-weight: 600;
  color: var(--text-muted); text-align: right; white-space: nowrap;
  vertical-align: middle;
}
.frm-tbl th .req { color: var(--danger); margin-left: 1px; }
.frm-tbl td {
  border: 1px solid var(--border); padding: 4px 8px;
  background: var(--surface); vertical-align: middle;
}

.frm-input {
  height: 30px; padding: 0 9px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 12.5px; font-family: inherit; color: var(--text); background: var(--surface);
  transition: border-color .12s, box-shadow .12s;
}
.frm-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.frm-input.w-full { width: 100%; }
textarea.frm-input { height: auto; padding: 6px 9px; resize: vertical; }

.frm-radio-group { display: flex; gap: 18px; align-items: center; padding: 4px 0; }
.frm-radio-group label {
  font-size: 12.5px; color: var(--text);
  display: flex; align-items: center; gap: 4px; cursor: pointer;
}

.frm-cond-row { display: flex; align-items: center; gap: 5px; margin-top: 5px; }
.frm-cond-btn { height: 28px; font-size: 11px; }

.frm-addr-row { display: flex; align-items: center; gap: 5px; }
.frm-addr-row .frm-input { flex: 1; }
.frm-addr-row .tbtn { height: 28px; font-size: 11px; white-space: nowrap; }

.frm-group-wrap { position: relative; display: flex; align-items: center; gap: 4px; }
.frm-group-btn {
  width: 28px; height: 28px; border: 1px solid var(--border);
  background: var(--bg-soft); font-size: 11px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; padding: 0; transition: .12s;
}
.frm-group-btn:hover { background: #eef0f3; }
.frm-group-picker {
  position: absolute; top: 30px; left: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); min-width: 120px;
  box-shadow: var(--shadow-lg); z-index: 250;
}
.frm-group-picker.hidden { display: none; }
.frm-group-picker-item {
  padding: 7px 12px; font-size: 12.5px; cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.frm-group-picker-item:last-child { border: none; }
.frm-group-picker-item:hover { background: var(--primary-soft); color: var(--primary); }

.frm-footer {
  padding: 10px 16px; background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex; gap: 6px; flex-shrink: 0;
}
.frm-placeholder { padding: 50px; text-align: center; color: var(--text-faint); font-size: 13px; }

/* ── 담당자 등록 모달 - 거래처 검색 ──────────── */
.cam-cust-row {
  display: flex; gap: 5px; align-items: flex-start;
}
.cam-cust-input-wrap {
  flex: 1; position: relative;
}
.cam-cust-input-wrap .cf-input { width: 100%; }

.cust-dropdown {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-top: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  max-height: 200px; overflow-y: auto;
  z-index: 310; box-shadow: var(--shadow-lg);
}
.cust-dropdown.hidden { display: none; }
.cust-dd-item {
  padding: 7px 11px; font-size: 12.5px; cursor: pointer;
  border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 6px;
}
.cust-dd-item:last-child { border-bottom: none; }
.cust-dd-item:hover { background: var(--primary-soft); }
.cust-dd-item b { color: var(--text); }
.cust-dd-code { color: var(--text-faint); font-size: 11px; font-family: monospace; }
.cust-dd-empty { color: var(--text-faint); cursor: default; }
.cust-dd-empty:hover { background: none; }

.cam-cust-selected {
  margin-top: 4px; font-size: 11px; color: var(--success);
  background: var(--success-soft); border: 1px solid #bbf0cf;
  border-radius: var(--radius-sm); padding: 3px 9px;
}
.cam-cust-selected.hidden { display: none; }

.cf-input-error { border-color: var(--danger) !important; background: var(--danger-soft); }
.cam-error {
  background: var(--danger-soft); border: 1px solid #f5c2c2;
  border-radius: var(--radius-sm); padding: 6px 11px;
  font-size: 12px; color: var(--danger); margin-top: 6px;
}
.cam-error.hidden { display: none; }

/* ── 스크롤바 ─────────────────────────────────── */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d4d7dd; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #b8bcc4; }

/* ── 토스트 (JS가 인라인 스타일로 그리므로 CSS에서 !important로 덮어씀) ──
   위치를 우상단 → 우하단으로, 색상/모양을 모던 톤으로 바꾼다(DOM/기능은 그대로). */
#toast-wrap {
  top: auto !important; bottom: 20px !important; right: 20px !important;
}
#toast-wrap > div {
  background: var(--surface) !important; color: var(--text) !important;
  border: 1px solid var(--border) !important; border-left: 3px solid var(--success) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-lg) !important;
  font-weight: 500 !important;
}
/* Toast.show()가 type별로 다른 배경색을 인라인으로 그리는데(성공 #2f8f4e / 오류 #c0392b),
   그 값으로 성공·오류를 구분해 좌측 라인만 danger 톤으로 바꾼다. */
#toast-wrap > div[style*="background:#c0392b"] { border-left-color: var(--danger) !important; }

/* ══════════════════════════════════════════════════
   영업기회 등록 (opp-new)
══════════════════════════════════════════════════ */

/* ── 단계 바 ─────────────────────────────────── */
.opp-stage-bar {
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 0 16px; display: flex; align-items: stretch;
  min-height: 52px; flex-shrink: 0;
}
.opp-stage-track { display: flex; align-items: stretch; flex: 1; }
.opp-stp { position: relative; display: flex; align-items: stretch; }
.opp-stp-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 0 20px 0 28px; background: var(--bg-soft);
  border: 1px solid var(--border); color: var(--text-faint); cursor: pointer;
  clip-path: polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%,14px 50%);
  min-width: 115px; margin-right: 2px; font-family: inherit;
  transition: background .12s; user-select: none; white-space: nowrap;
}
.opp-stp-btn.first {
  clip-path: polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%);
  padding-left: 14px;
}
.opp-stp-btn:hover  { background: #eef0f3; color: var(--text-muted); }
.opp-stp-btn.done   { background: var(--primary); color: #fff; border-color: var(--primary); }
.opp-stp-btn.done:hover { background: var(--primary-hover); }
.opp-stp-btn.active { background: var(--text); color: #fff; border-color: var(--text); font-weight: 700; }
.opp-stp-btn.active:hover { background: #111827; }
.opp-stp-num  { font-size: 10px; opacity: .75; display: block; line-height: 1.2; }
.opp-stp-name { font-size: 13px; font-weight: 700; display: block; line-height: 1.2; }
.opp-stp-tick { font-size: 11px; }

/* 이탈 버튼 */
.opp-out-wrap { display: flex; align-items: center; margin-left: auto; padding: 9px 0; }
.opp-out-btn {
  padding: 6px 18px; background: var(--danger-soft); color: var(--danger);
  border: 1px solid #f5c2c2; border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: all .12s;
}
.opp-out-btn:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
.opp-out-btn.out-on { background: #991b1b; color: #fff; border-color: #7f1d1d; }

/* ── 2단 레이아웃 ────────────────────────────── */
.opp-body  { flex: 1; display: flex; min-height: 0; overflow: hidden; }
.opp-left  {
  flex: 1; min-width: 0; overflow-y: auto;
  background: var(--bg); padding: 12px 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.opp-right {
  flex: 0 0 30%; min-width: 260px;
  background: var(--surface); border-left: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
}

/* ── 섹션 카드 ───────────────────────────────────
   overflow:hidden을 카드에 걸어두면, .opp-left(flex column + overflow-y:auto) 안에서
   카드가 flex-shrink로 콘텐츠 높이보다 눌릴 때 하단 내용이 그대로 잘려 보인다
   (예: 기본정보의 "사업기간" 등 마지막 줄). flex-shrink:0으로 카드가 항상 내용
   높이만큼 자연스럽게 늘어나게 하고, overflow는 제거해 잘림 자체를 없앤다.
   대신 카드 배경과 다른 헤더 배경이 둥근 모서리 밖으로 튀어나오지 않도록
   .opp-card-head에 위쪽만 radius를 직접 준다. */
.opp-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); flex-shrink: 0; }
.opp-card-head {
  background: var(--bg-soft); border-bottom: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 8px 12px; font-size: 12.5px; font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none;
}
.opp-card-dot { width: 7px; height: 7px; background: var(--primary); border-radius: 50%; flex-shrink:0; }
.opp-card-tog { margin-left: auto; font-size: 10px; color: var(--text-faint); }
.opp-card-body { padding: 10px 12px; }

/* ── 기본정보 폼 ─────────────────────────────── */
.opp-frm-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; }
.opp-frm-tbl th {
  background: var(--bg-soft); border: 1px solid var(--border);
  padding: 4px 8px; font-size: 12px; font-weight: 600;
  color: var(--text-muted); text-align: right; vertical-align: middle; white-space: nowrap;
}
.opp-frm-tbl th .req { color: var(--danger); }
.opp-frm-tbl td { border: 1px solid var(--border); padding: 2px 6px; background: var(--surface); vertical-align: middle; }
/* 입력칸이 셀의 남는 가로 공간을 채우도록 처리 */
.opp-frm-tbl .opp-inp { height: 26px; }
.opp-frm-tbl td > input.opp-inp { width: 100%; }
.opp-frm-tbl .opp-irow > input.opp-inp { flex: 1 1 auto; width: auto; min-width: 0; }
.opp-frm-tbl .opp-irow > input.opp-inp.w100 { flex: 0 0 100px; }
.opp-frm-tbl .opp-irow > input.opp-inp.w70  { flex: 0 0 70px; }
.opp-frm-tbl .opp-irow > input.opp-inp.w150 { flex: 0 0 150px; }
.opp-inp {
  height: 28px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 12.5px; font-family: inherit; color: var(--text); background: var(--surface);
  transition: border-color .12s, box-shadow .12s;
}
.opp-inp:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.opp-inp.w70  { width:  70px; } .opp-inp.w80  { width:  80px; } .opp-inp.w100 { width: 100px; }
.opp-inp.w120 { width: 120px; } .opp-inp.w130 { width: 130px; }
.opp-inp.w140 { width: 140px; } .opp-inp.w150 { width: 150px; } .opp-inp.w160 { width: 160px; }
.opp-inp.w200 { width: 200px; } .opp-inp.wfull{ width: 100%;  }
.opp-inp[readonly] { background: var(--bg-soft); color: var(--text-muted); cursor: default; }
.opp-irow { display: flex; align-items: center; gap: 4px; }
.opp-look {
  height: 26px; background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: 11px; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; padding: 0 6px;
  min-width: 26px; white-space: nowrap; transition: .12s;
}
.opp-look:hover { background: #eef0f3; }
.opp-look.btn-new { background: var(--primary-soft); border-color: #bfdbfe; color: var(--primary); font-size: 11px; }
.opp-look.btn-new:hover { background: #dbe9fe; }
/* 자동완성 드롭다운 */
.opp-ac-wrap { position: relative; }
.opp-ac-dd {
  position: absolute; top: calc(100% + 2px); left: 0; z-index: 400;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); max-height: 220px;
  overflow-y: auto; min-width: 220px;
}
.opp-ac-item {
  padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--border); font-size: 13px;
}
.opp-ac-item:last-child { border-bottom: none; }
.opp-ac-item:hover { background: var(--primary-soft); }
.opp-ac-item b { color: var(--text); }
.opp-ac-item .ac-sub { color: var(--text-faint); font-size: 11px; margin-left: 6px; }
.opp-ac-empty { padding: 10px 12px; color: var(--text-faint); font-size: 12px; }
.opp-ac-add {
  padding: 9px 12px; cursor: pointer; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--primary); font-weight: 600; display: flex; align-items: center; gap: 4px;
}
.opp-ac-add:hover { background: var(--primary-soft); }
/* 담당자 선택 표시 입력 */
.opp-mgr-disp {
  background: var(--bg-soft) !important; cursor: pointer !important; color: var(--text);
}
.opp-mgr-disp:focus { outline: none; border-color: var(--primary) !important; }
/* 담당자 드롭다운 아이템 */
.opp-mgr-item {
  padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--border); font-size: 13px;
  display: flex; align-items: center; gap: 8px;
}
.opp-mgr-item:last-child { border-bottom: none; }
.opp-mgr-item:hover { background: var(--primary-soft); }
.opp-mgr-item .mgr-nm { font-weight: 600; color: var(--text); min-width: 60px; }
.opp-mgr-item .mgr-pos { color: var(--text-faint); font-size: 11px; min-width: 40px; }
.opp-mgr-item .mgr-tel { color: var(--text-muted); font-size: 11px; font-family: monospace; }
/* 신규 거래처 등록 모달 */
.qcm-tbl { width: 100%; border-collapse: collapse; }
.qcm-tbl th { width: 90px; text-align: right; padding: 6px 10px 6px 0; font-size: 12px; color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.qcm-tbl td { padding: 4px 0; }

/* ── 테이블 툴바 ─────────────────────────────── */
.opp-tbl-bar { display: flex; align-items: center; gap: 4px; padding: 6px 0 8px; flex-wrap: wrap; }
.opp-tbl-btn {
  height: 28px; padding: 0 10px; font-size: 11px; font-weight: 600;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--text-muted); cursor: pointer; font-family: inherit; transition: .1s;
}
.opp-tbl-btn:hover { background: var(--bg-soft); color: var(--text); border-color: var(--border-strong); }

/* ── 품목·비용 테이블 ────────────────────────── */
.opp-dtbl { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; }
.opp-dtbl thead th {
  background: var(--bg-soft); border-bottom: 1px solid var(--border-strong); border-right: 1px solid var(--border);
  padding: 6px 6px; text-align: center; font-size: 11px; font-weight: 700; color: var(--text-muted);
  white-space: nowrap;
}
.opp-dtbl thead th:last-child { border-right: none; }
.opp-dtbl tbody td {
  border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: 3px 4px; vertical-align: middle;
}
.opp-dtbl tbody td:last-child { border-right: none; }
.opp-dtbl tbody tr:nth-child(even) { background: #fbfbfc; }
.opp-dtbl tbody tr:hover { background: var(--primary-soft); }
.opp-dtbl td input[type=text], .opp-dtbl td input[type=number] {
  width: 100%; height: 24px; border: none; background: transparent;
  font-size: 12px; font-family: inherit; padding: 0 4px; color: var(--text);
}
.opp-dtbl td input:focus { outline: none; background: #fff; border: 1px solid var(--primary); border-radius: var(--radius-sm); }
.opp-dtbl td select { width: 100%; height: 24px; border: none; background: transparent; font-size: 12px; font-family: inherit; color: var(--text); }
.opp-dtbl td.tc { text-align: center; }
.opp-dtbl td.tr { text-align: right; padding-right: 6px; }
.opp-del-btn {
  width: 20px; height: 20px; background: none; border: 1px solid var(--border); color: var(--text-faint);
  font-size: 12px; cursor: pointer; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center; transition: .1s;
}
.opp-del-btn:hover { background: var(--danger-soft); border-color: #f5c2c2; color: var(--danger); }
.opp-add-row {
  width: 100%; text-align: center; padding: 7px; margin-top: 4px;
  background: var(--bg-soft); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
  font-size: 11px; color: var(--text-muted); cursor: pointer; transition: .1s;
}
.opp-add-row:hover { background: var(--primary-soft); color: var(--primary); border-color: #bfdbfe; }

/* ── 합계 바 ─────────────────────────────────── */
.opp-sum-bar {
  display: flex; justify-content: flex-end; align-items: center; gap: 14px;
  padding: 7px 12px; background: var(--bg-soft); border-top: 1px solid var(--border); font-size: 12px;
}
.opp-sum-item { display: flex; align-items: center; gap: 5px; }
.opp-sum-label { color: var(--text-muted); }
.opp-sum-val   { font-weight: 700; color: var(--text); min-width: 70px; text-align: right; }
.opp-sum-val.red { color: var(--danger); font-size: 13px; }
.opp-sum-sep   { width: 1px; height: 14px; background: var(--border); }

/* ── 댓글 패널 ───────────────────────────────── */
.opp-cmt-head {
  background: var(--bg-soft); border-bottom: 1px solid var(--border);
  padding: 9px 12px; font-size: 12.5px; font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: 5px; flex-shrink: 0;
}
.opp-cmt-cnt {
  margin-left: auto; background: var(--primary); color: #fff;
  font-size: 10px; font-weight: 700; padding: 1px 7px;
  border-radius: 999px; min-width: 18px; text-align: center;
}
.opp-cmt-list {
  flex: 1; overflow-y: auto; padding: 8px;
  display: flex; flex-direction: column; gap: 6px;
}
.opp-cmt-item {
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px;
}
.opp-cmt-item.mine   { background: var(--success-soft); border-color: #bbf0cf; }
.opp-cmt-item.system {
  background: var(--bg-soft); border-color: var(--border); border-left: 3px solid var(--text-faint);
}
.opp-cmt-meta { display: flex; justify-content: space-between; margin-bottom: 4px; }
.opp-cmt-author  { font-size: 11px; font-weight: 700; color: var(--text); }
.opp-cmt-item.mine .opp-cmt-author   { color: var(--success); }
.opp-cmt-item.system .opp-cmt-author { color: var(--text-muted); font-weight: normal; }
.opp-cmt-date   { font-size: 11px; color: var(--text-muted); font-weight: 500; }
.opp-cmt-stage  {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700; margin-bottom: 4px;
  border: 1px solid; background: transparent;
}
.opp-cmt-text   { font-size: 12px; color: var(--text); line-height: 1.5; word-break: break-word; }
.opp-cmt-item.system .opp-cmt-text { font-size: 11px; color: var(--text-muted); font-style: italic; }
.opp-cmt-actions { display: flex; justify-content: flex-end; gap: 4px; margin-top: 4px; }
.opp-cmt-del, .opp-cmt-edit-btn {
  font-size: 10px; color: var(--text-faint); border: 1px solid var(--border); background: var(--surface);
  padding: 1px 7px; border-radius: var(--radius-sm); cursor: pointer;
}
.opp-cmt-del:hover { color: var(--danger); border-color: #f5c2c2; background: var(--danger-soft); }
.opp-cmt-edit-btn:hover { color: var(--primary); border-color: #bfdbfe; background: var(--primary-soft); }
.opp-cmt-edit-dt { display: flex; gap: 6px; margin-bottom: 5px; }
.opp-cmt-edit-dt input {
  flex: 1; height: 26px; font-size: 11px; font-family: inherit;
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 6px; background: var(--surface);
}
.opp-cmt-edit-actions { display: flex; justify-content: flex-end; gap: 4px; margin-top: 5px; }
.opp-cmt-edit-actions .opp-tbl-btn { padding: 2px 10px; }
.opp-cmt-input {
  border-top: 1px solid var(--border); padding: 9px 8px; flex-shrink: 0; background: var(--bg-soft);
  display: flex; flex-direction: column; gap: 6px; position: relative;
}
/* @멘션 드롭다운 */
.od-at-dd {
  position: absolute; bottom: calc(100% - 8px); left: 8px; right: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  max-height: 232px; overflow-y: auto; z-index: 400;
}
.od-at-dd.hidden { display: none; }
.od-at-item {
  padding: 8px 11px; cursor: pointer; font-size: 12px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: baseline; gap: 6px;
}
.od-at-item:last-child { border-bottom: none; }
.od-at-item:hover, .od-at-item.active { background: var(--primary-soft); }
.od-at-nm  { font-weight: 700; color: var(--text); flex-shrink: 0; }
.od-at-info { color: var(--text-faint); font-size: 11px; }
.od-at-empty { padding: 10px 12px; color: var(--text-faint); font-size: 12px; text-align: center; }
.item-srch-dd { position:fixed; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); z-index:8000; min-width:340px; max-height:228px; overflow-y:auto; }
.item-srch-dd.hidden { display:none; }
.item-srch-row { padding:7px 10px; cursor:pointer; font-size:12px; border-bottom: 1px solid var(--border); display:flex; gap:8px; align-items:baseline; }
.item-srch-row:last-child { border-bottom:none; }
.item-srch-row:hover, .item-srch-row.active { background: var(--primary-soft); }
.item-srch-cd { color: var(--text-faint); font-size:11px; width:80px; flex-shrink:0; }
.item-srch-nm { color: var(--text); font-weight:600; flex:1; }
.item-srch-sz { color: var(--text-faint); font-size:11px; }
.item-srch-empty { padding:10px 12px; color: var(--text-faint); font-size:12px; text-align:center; }
.od-contact-pop { position:fixed; width:300px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index:9500; }
.od-contact-pop.hidden { display:none; }
.od-cp-head { background: var(--primary-soft); border-bottom: 1px solid var(--border); padding:10px 12px; display:flex; align-items:center; gap:8px; border-radius: var(--radius) var(--radius) 0 0; }
.od-cp-nm { font-weight:700; font-size:13px; flex:1; color: var(--text); }
.od-cp-close { color: var(--text-faint); font-size:16px; padding:0 4px; cursor:pointer; background:none; border:none; line-height:1; }
.od-cp-body { padding:10px 12px; }
.od-cp-row { display:flex; gap:8px; padding:4px 0; font-size:12px; border-bottom: 1px solid var(--border); }
.od-cp-row:last-child { border-bottom:none; }
.od-cp-label { color: var(--text-faint); width:48px; flex-shrink:0; }
.od-cp-val { color: var(--text); word-break:break-all; }
.opp-cmt-sel {
  width: 100%; height: 26px; font-size: 12px; font-family: inherit;
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 7px; background: var(--surface);
}
.opp-cmt-ta {
  width: 100%; height: 90px; resize: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 12px; padding: 6px 8px; font-family: inherit; line-height: 1.5; background: var(--surface); color: var(--text);
}
.opp-cmt-ta:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.opp-cmt-ta[readonly] { background: var(--bg-soft); color: var(--text-muted); cursor: not-allowed; }
.opp-cmt-sys-notice {
  font-size: 11px; color: var(--text-muted); background: var(--bg-soft);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 6px 8px; margin-bottom: 6px;
}
.opp-cmt-srow { display: flex; justify-content: flex-end; align-items: center; gap: 4px; }
.opp-char-cnt { font-size: 10px; color: var(--text-faint); margin-right: auto; }

/* ── 단계변경 확인 모달 ──────────────────────── */
.opp-modal-ov {
  display: none; position: fixed; inset: 0; background: rgba(17,24,39,.45);
  z-index: 1200; align-items: center; justify-content: center;
}
.opp-modal-ov.open { display: flex; }
.opp-modal {
  background: var(--surface); border-radius: var(--radius-lg); width: 360px;
  box-shadow: var(--shadow-lg);
  animation: oppMdIn .12s ease-out;
}
@keyframes oppMdIn { from{transform:scale(.92);opacity:0} to{transform:scale(1);opacity:1} }
.opp-modal-hd {
  background: var(--text); color: #fff; padding: 11px 14px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px;
}
.opp-modal-bd { padding: 22px 20px 14px; text-align: center; }
.opp-modal-row{ display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 8px; }
.opp-modal-chip {
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 14px; font-size: 13px; font-weight: 700; color: var(--text);
}
.opp-modal-chip.to     { background: var(--primary); color: #fff; border-color: var(--primary); }
.opp-modal-chip.to-out { background: #991b1b; color: #fff; border-color: #7f1d1d; }
.opp-modal-arr  { font-size: 18px; color: var(--text-faint); }
.opp-modal-note { font-size: 11px; color: var(--text-faint); margin-top: 6px; }
.opp-modal-ft {
  display: flex; justify-content: flex-end; gap: 6px;
  padding: 11px 14px; border-top: 1px solid var(--border); background: var(--bg-soft);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.opp-modal-ok {
  padding: 6px 22px; background: var(--primary); color: #fff; border: none;
  border-radius: var(--radius-sm); font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
  transition: .12s;
}
.opp-modal-ok:hover { background: var(--primary-hover); }
.opp-modal-cancel {
  padding: 6px 16px; background: var(--surface); color: var(--text-muted); border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: 13px; cursor: pointer; font-family: inherit; transition: .12s;
}
.opp-modal-cancel:hover { background: var(--bg-soft); color: var(--text); }

/* ── 검색 팝업 ───────────────────────────────── */
.opp-pp {
  display: none; position: fixed; z-index: 1100;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-lg); border-radius: var(--radius-lg); width: 380px;
  top: 50%; left: 50%; transform: translate(-50%,-50%);
}
.opp-pp.open { display: block; }
.opp-pp-hd {
  background: var(--text); color: #fff; padding: 9px 12px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: space-between;
}
.opp-pp-x { cursor: pointer; font-size: 14px; color: #cbd5e1; }
.opp-pp-x:hover { color: #fff; }
.opp-pp-bd { padding: 10px; }
.opp-pp-list { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; max-height: 200px; overflow-y: auto; }
.opp-pp-list table { width: 100%; border-collapse: collapse; font-size: 12px; }
.opp-pp-list thead th { background: var(--bg-soft); padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--border); font-weight: 700; color: var(--text-muted); }
.opp-pp-list tbody tr { border-bottom: 1px solid var(--border); cursor: pointer; }
.opp-pp-list tbody tr:hover { background: var(--primary-soft); }
.opp-pp-list tbody td { padding: 6px 8px; color: var(--text); }
.opp-pp-ft { padding: 7px 10px; text-align: right; border-top: 1px solid var(--border); background: var(--bg-soft); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.opp-pp-ov { display: none; position: fixed; inset: 0; z-index: 1100; background: rgba(17,24,39,.15); }
.opp-pp-ov.open { display: block; }

/* ── 팝업 항목 ──────────────────────────────── */
.opp-pp-item {
  padding: 8px 12px; font-size: 12px; cursor: pointer;
  border-bottom: 1px solid var(--border); color: var(--text);
  transition: background .08s;
}
.opp-pp-item:last-child { border-bottom: none; }
.opp-pp-item:hover { background: var(--primary-soft); color: var(--text); }
.opp-pp-item b { color: var(--text); }

/* ── 파일 첨부 칩 ───────────────────────────── */
.opp-file-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 11px; color: var(--text-muted); padding: 2px 7px;
}
.opp-file-chip button {
  font-size: 10px; color: var(--text-faint); padding: 0 1px;
  line-height: 1; cursor: pointer;
}
.opp-file-chip button:hover { color: var(--danger); }

/* ════════════════════════════════════════════════
   영업기회 상세 모달 (od-*)
════════════════════════════════════════════════ */
.od-ov {
  display: none; position: fixed; inset: 0;
  background: rgba(17,24,39,.55); z-index: 1000;
  align-items: flex-start; justify-content: center;
  padding: 16px; overflow-y: auto;
}
.od-ov.open { display: flex; }
.od-modal {
  background: var(--surface); border-radius: var(--radius-lg);
  width: 100%; max-width: 1280px;
  height: 90vh; max-height: calc(100vh - 32px);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
  animation: odMdIn .14s ease-out;
}
@keyframes odMdIn { from { transform: scale(.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.od-hd {
  background: var(--text); color: #fff;
  padding: 11px 16px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
/* 제목줄: [거래처·고객사] 사업명 … [건번호]
   건번호는 줄어들지 않게 두고(잘리면 건을 특정할 수 없다) 거래처·사업명이 먼저 줄어든다. */
.od-title {
  flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 9px;
  overflow: hidden; white-space: nowrap;
}
.od-hd-meta {
  flex: 0 1 auto; min-width: 0; max-width: 42%;
  font-size: 12px; font-weight: 500; color: #cbd5e1;
  overflow: hidden; text-overflow: ellipsis;
}
.od-hd-meta .od-hd-lbl { color: #94a3b8; font-weight: 400; margin-right: 3px; }
.od-hd-meta .od-hd-sep { color: #64748b; margin: 0 5px; }
.od-hd-biz {
  flex: 1 1 auto; min-width: 0;
  font-size: 15px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis;
}
.od-hd-id {
  flex-shrink: 0; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px; font-weight: 600; color: #e2e8f0;
  background: rgba(255, 255, 255, .14); padding: 2px 9px; border-radius: 999px;
}
.od-close {
  background: none; border: none; color: #cbd5e1;
  font-size: 20px; cursor: pointer; padding: 0 4px;
  line-height: 1; flex-shrink: 0; font-family: inherit;
}
.od-close:hover { color: #fff; }
.od-body { flex: 1; display: flex; min-height: 0; overflow: hidden; }
.od-left { flex: 0 0 70%; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.od-tabs {
  display: flex; background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0; padding: 0 12px;
}
.od-tab {
  padding: 10px 20px; font-size: 13px; font-weight: 600;
  border: none; background: none; cursor: pointer;
  color: var(--text-muted); border-bottom: 2px solid transparent;
  margin-bottom: -1px; transition: color .12s; font-family: inherit;
}
.od-tab:hover  { color: var(--text); }
.od-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.od-panel { flex: 1; overflow-y: auto; padding: 16px; }
/* 예전에는 .od-panel > * 를 680px로 묶어 두어 좌측 패널(모달의 70%)에서 오른쪽이
   200px 넘게 비어 있었다. 폼 표(.opp-frm-tbl)는 width:100% + table-layout:fixed이고
   입력칸도 셀을 채우도록 되어 있어서, 이 제한만 풀면 그대로 가변으로 늘어난다(2026-10-02). */

/* ── 기본정보 탭 요약 카드 ─────────────────────── */
.od-sum-card {
  border: 1px solid var(--border); border-radius: var(--radius);
  margin-top: 14px; overflow: hidden; box-shadow: var(--shadow-sm);
}
.od-sum-head {
  background: var(--bg-soft); border-bottom: 1px solid var(--border);
  padding: 8px 12px; font-size: 12.5px; font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none;
}
.od-sum-head:hover { background: #f0f1f3; }
.od-sum-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--primary); }
.od-sum-dot.orange { background: var(--warning); }
.od-sum-tog { margin-left: auto; font-size: 10px; color: var(--text-faint); }
.od-sum-link {
  margin-left: auto; font-size: 11px; font-weight: 600; color: var(--primary);
  padding: 2px 8px; border: 1px solid #bfdbfe; border-radius: var(--radius-sm);
  background: var(--primary-soft); cursor: pointer;
}
.od-sum-link:hover { background: #dbe9fe; }
.od-sum-body { padding: 0; }
.od-sum-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; }
.od-sum-tbl thead th {
  background: var(--bg-soft); border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
  padding: 5px 6px; text-align: center; font-size: 11px; font-weight: 700; color: var(--text-muted);
}
.od-sum-tbl thead th:last-child { border-right: none; }
.od-sum-tbl tbody td {
  border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
  padding: 4px 6px; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.od-sum-tbl tbody td:last-child { border-right: none; }
.od-sum-tbl tbody tr:nth-child(even) { background: #fbfbfc; }
.od-sum-tbl td.tr { text-align: right; }
.od-sum-tbl td.tc { text-align: center; }
.od-sum-empty { text-align: center; color: var(--text-faint); padding: 10px !important; font-size: 12px; }
.od-ft {
  display: flex; align-items: center; gap: 6px;
  padding: 11px 16px; border-top: 1px solid var(--border);
  background: var(--bg-soft); flex-shrink: 0;
}
/* 이카운트 판매전표 생성 영역 — 저장(파랑)과 실수로 헷갈리지 않도록 구분선+여백을 두고,
   버튼은 초록 계열로 구분한다(ERP로 실제 전표를 쏘는 중요 동작임을 시각적으로 드러냄). */
#od-ecount-sale-box {
  display: flex; align-items: center; gap: 8px;
  margin-left: 10px; padding-left: 14px; border-left: 1px solid var(--border);
}
#od-ecount-sale-box.hidden { display: none; }
.tbtn.ecount-sale-btn {
  background: #1a7f37; color: #fff; border-color: #1a7f37;
}
.tbtn.ecount-sale-btn:hover:not(:disabled) { background: #146c2e; border-color: #146c2e; }
.tbtn.ecount-sale-btn:disabled { background: #a8d5b5; border-color: #a8d5b5; color: #fff; cursor: default; }

/* ════════════════════════════════════════════════
   영업기회 단계별 리스트 페이지
════════════════════════════════════════════════ */
.opp-list-filters {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; background: var(--surface);
  border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.opp-list-filter {
  height: 30px; font-size: 12px; font-family: inherit;
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 9px;
  background: var(--surface); color: var(--text); cursor: pointer; min-width: 140px;
  transition: border-color .12s;
}
.opp-list-filter:focus { outline: none; border-color: var(--primary); }

/* ── 단계 배지 ─────────────────────────────────── */
.stage-badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.stage-lead     { background: var(--primary-soft); color: var(--primary); border: 1px solid #bfdbfe; }
.stage-propose  { background: var(--warning-soft); color: var(--warning); border: 1px solid #fde3b0; }
.stage-demo     { background: var(--warning-soft); color: #92600a; border: 1px solid #fde3b0; }
.stage-poc      { background: var(--success-soft); color: var(--success); border: 1px solid #bbf0cf; }
.stage-contract { background: var(--success-soft); color: #15803d; border: 1px solid #a8e6bd; }
.stage-end      { background: var(--bg-soft); color: var(--text-muted); border: 1px solid var(--border-strong); }
.stage-out      { background: var(--danger-soft); color: var(--danger); border: 1px solid #f5c2c2; }

/* ── 파이프라인 뷰 전환 토글 ────────────────────── */
.pl-view-toggle { display: flex; gap: 4px; margin-left: 4px; }
.pl-view-btn {
  height: 30px; padding: 0 13px; font-size: 12px; font-weight: 500;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-muted); transition: .12s;
  display: inline-flex; align-items: center;
}
.pl-view-btn:hover { background: var(--bg-soft); border-color: var(--border-strong); color: var(--text); }
.pl-view-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600; }

/* ── 파이프라인 뷰 전환 (카드형 ↔ 리스트형) ────── */
#pl-board.hidden, #pl-list-view.hidden { display: none; }

/* ── 파이프라인 칸반 보드 ──────────────────────── */
.pl-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  align-items: stretch; /* 같은 줄의 컬럼끼리 높이를 맞춤 */
}
.pl-col {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--bg-soft); border-radius: var(--radius); border: 1px solid var(--border);
  /* JS(Pipeline._syncColHeights)가 실제 렌더링 위치를 측정해 --pl-col-h를 설정한다.
     JS 실행 전 순간을 대비한 대략값만 폴백으로 둔다. */
  height: var(--pl-col-h, calc(100vh - 260px));
}
.pl-col-hd {
  padding: 11px 12px 9px; border-radius: var(--radius) var(--radius) 0 0;
  display: flex; flex-direction: column; gap: 3px; flex-shrink: 0;
}
.pl-lead     { background: var(--primary-soft); border-bottom: 2px solid #bfdbfe; }
.pl-propose  { background: var(--warning-soft); border-bottom: 2px solid #fde3b0; }
.pl-contract { background: var(--success-soft); border-bottom: 2px solid #a8e6bd; }
.pl-end      { background: #eef0f3; border-bottom: 2px solid var(--border-strong); }
.pl-out      { background: var(--danger-soft); border-bottom: 2px solid #f5c2c2; }
.pl-col-title {
  font-size: 12px; font-weight: 700; color: var(--text);
}
.pl-col-badge {
  font-size: 11px; color: var(--text-muted);
}
.pl-col-amt {
  font-size: 13px; font-weight: 700; color: var(--text);
}
/* 금액이 매출인지 손익인지 숫자만 봐서는 알 수 없어 라벨을 붙인다(영업보고와 같은 기준) */
.pl-col-amt-lbl {
  font-size: 10px; font-weight: 600; color: var(--text-muted);
  margin-right: 4px;
}
.pl-cards {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 8px; display: flex; flex-direction: column; gap: 8px;
  scrollbar-width: thin; scrollbar-color: #c5c5c5 transparent;
}
.pl-cards::-webkit-scrollbar { width: 6px; }
.pl-cards::-webkit-scrollbar-track { background: transparent; }
.pl-cards::-webkit-scrollbar-thumb { background: #c9ccd2; border-radius: 3px; }
.pl-cards::-webkit-scrollbar-thumb:hover { background: #aeb2ba; }
.pl-card {
  width: 100%; box-sizing: border-box;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; cursor: pointer; transition: .12s;
  box-shadow: var(--shadow-sm);
}
.pl-card:hover { border-color: #c7d2e0; box-shadow: var(--shadow-card); transform: translateY(-1px); }
.pl-card-title {
  font-size: 12px; font-weight: 700; color: var(--text);
  margin-bottom: 4px; line-height: 1.35;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 5px;
}
.pl-card-title-text {
  flex: 1; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word;
}
.pl-card-dday {
  flex-shrink: 0; font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: 999px; background: var(--primary-soft); color: var(--primary);
  white-space: nowrap;
}
.pl-card-sub {
  font-size: 11px; margin-bottom: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pl-card-sub-proj { color: var(--text-faint); font-weight: 400; } /* 3순위(중간) */
.pl-card-sub-end  { color: var(--text); font-weight: 500; } /* 2순위(진하게) */
.pl-card-cust {
  font-size: 11px; color: var(--text); font-weight: 500; margin-bottom: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pl-card-div { height: 1px; background: var(--border); margin: 6px 0; }
.pl-card-fin-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: var(--text-muted); padding: 1px 0;
}
.pl-card-fin-row.pl-dim { color: var(--text-faint); }
.pl-card-fin-val { font-weight: 700; color: var(--text); }
.pl-card-fin-row.pl-dim .pl-card-fin-val { font-weight: 500; color: var(--text-faint); }
.pl-card-fin-row.pl-profit-row { font-size: 12px; font-weight: 600; }
.pl-card-fin-val.pl-neg { color: var(--danger); }
.pl-card-foot-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; color: var(--text-faint); padding: 1px 0;
}
.pl-card-foot-label { flex-shrink: 0; color: var(--text-faint); }
.pl-card-foot-row .pl-card-foot-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-card-mgr {
  font-size: 10px; color: var(--text-muted); background: var(--bg-soft); border-radius: 999px;
  padding: 2px 7px; white-space: nowrap; flex-shrink: 0; margin-left: auto;
}
.pl-empty {
  flex: 1; display: flex; align-items: center; justify-content: center;
  text-align: center; color: var(--text-faint); font-size: 12px; padding: 24px 8px;
}

/* 1200~1600px: 5개 컬럼 유지, 폰트/여백만 축소 */
@media (max-width: 1600px) {
  .pl-board { gap: 12px; padding: 10px 14px; }
  .pl-col-hd { padding: 8px 10px 6px; }
  .pl-col-title { font-size: 11px; }
  .pl-col-badge { font-size: 10px; }
  .pl-col-amt { font-size: 12px; }
  .pl-cards { padding: 6px; gap: 6px; }
  .pl-card { padding: 7px 9px; }
  .pl-card-title, .pl-card-title-text { font-size: 11px; }
  .pl-card-sub, .pl-card-fin-row { font-size: 10px; }
  .pl-card-cust { font-size: 10px; }
  .pl-card-mgr, .pl-card-foot-row { font-size: 9px; }
}

/* 900~1200px: 3개 컬럼씩 줄바꿈 */
@media (max-width: 1200px) {
  .pl-board { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 900px 미만: 2개 컬럼씩 줄바꿈 */
@media (max-width: 900px) {
  .pl-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── KPI 카드 (공용 클래스 — 다른 대시보드에서도 재사용) ───────── */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(150px, 1fr));
  gap: var(--space-3);
  padding: var(--space-4) 16px 0;
}
@media (max-width: 1280px) {
  .kpi-row { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
}
@media (max-width: 640px) {
  .kpi-row { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
}
.kpi-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-card); padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2);
  transition: transform .12s, box-shadow .12s;
}
.kpi-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.kpi-top { display: flex; align-items: center; gap: 7px; }
.kpi-icon {
  width: 22px; height: 22px; border-radius: var(--radius-sm);
  background: var(--bg-soft); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1; flex-shrink: 0;
}
.kpi-label { font-size: 13px; font-weight: 500; color: var(--text-muted); }
.kpi-val { font-size: 24px; font-weight: 700; color: var(--text); line-height: 1.2; }
.kpi-val.kpi-val-primary { color: var(--primary); }

/* ── 진행률 막대 (공용 클래스 — 단계별 현황/담당자 실적 등에서 재사용) ── */
.rpt-bar-wrap { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.rpt-bar-track {
  width: 60px; height: 7px; flex-shrink: 0;
  background: var(--bg-soft); border-radius: 999px; overflow: hidden;
}
.rpt-bar-fill { height: 100%; background: var(--primary); border-radius: 999px; min-width: 2px; }
.rpt-bar-pct { font-size: 11px; color: var(--text-muted); min-width: 30px; text-align: right; }
.rpt-bar-empty { color: var(--text-faint); }

/* ── 표 합계(tfoot) 행 강조 ─────────────────────── */
.rpt-foot-row { background: var(--bg-soft); font-weight: 700; border-top: 2px solid var(--border-strong); }

/* ── 건수 셀 클릭(리스트 모달 트리거) ─────────────── */
.rpt-cnt-clickable { cursor: pointer; }
.rpt-cnt-clickable:hover { color: var(--primary); text-decoration: underline; }

/* ── 영업 현황: 건수 클릭 리스트 모달 ─────────────── */
.rpt-list-ov {
  display: none; position: fixed; inset: 0;
  background: rgba(17,24,39,.5); z-index: 1000;
  align-items: flex-start; justify-content: center;
  padding: 16px; overflow-y: auto;
}
.rpt-list-ov.open { display: flex; }
.rpt-list-modal {
  background: var(--surface); border-radius: var(--radius-lg);
  width: 100%; max-width: 1100px;
  max-height: calc(100vh - 32px);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
}
.rpt-list-hd {
  background: var(--text); color: #fff;
  padding: 11px 16px; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-shrink: 0;
}
.rpt-list-hd h3 { font-size: 13.5px; font-weight: 700; }
.rpt-list-x { cursor: pointer; font-size: 16px; color: #cbd5e1; }
.rpt-list-x:hover { color: #fff; }
.rpt-list-body { flex: 1; overflow-y: auto; }
.rpt-list-body table { width: 100%; border-collapse: collapse; font-size: 12px; }
.rpt-list-body thead th {
  position: sticky; top: 0; background: var(--bg-soft);
  padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border);
  font-weight: 700; color: var(--text-muted); white-space: nowrap;
}
.rpt-list-body tbody td { padding: 7px 10px; border-bottom: 1px solid var(--border); color: var(--text); white-space: nowrap; }
.rpt-list-body tbody tr { cursor: pointer; }
.rpt-list-body tbody tr:hover { background: var(--primary-soft); }

.rpt-section {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow-card);
}
.rpt-section-title {
  font-size: 13px; font-weight: 700; color: var(--text);
  margin-bottom: 11px; padding-bottom: 7px; padding-left: 9px;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--primary);
}

/* ── 주간 보고서 ───────────────────────────────── */
.rptw-doc-head {
  text-align: center; padding: 12px 16px 18px; border-bottom: 1px solid var(--border);
  margin: 0 16px 14px;
}
.rptw-doc-title { font-size: 17px; font-weight: 800; color: var(--text); letter-spacing: -0.3px; }
.rptw-doc-period { font-size: 12.5px; color: var(--text-muted); margin-top: 5px; font-weight: 600; }
.rptw-list-tbl tbody td.rptw-content-td {
  white-space: normal; word-break: break-word; line-height: 1.5;
}
.rptw-delta-up   { color: var(--text); }
.rptw-delta-down { color: var(--danger); }

/* ── 월간 보고서 ───────────────────────────────── */
.rptm-tabbar { display: flex; align-items: center; gap: 4px; padding: 0 16px 12px; border-bottom: 1px solid var(--border); margin: 0 0 14px; }
.rptm-tab {
  border: 1px solid var(--border); border-bottom: none; background: var(--bg-soft); color: var(--text-muted);
  font-size: 12.5px; font-weight: 700; padding: 8px 16px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; cursor: pointer;
  transition: .12s;
}
.rptm-tab:hover { background: #eef0f3; }
.rptm-tab.active { background: var(--surface); color: var(--primary); border-color: var(--border); box-shadow: 0 -1px 0 var(--surface) inset; }
.rptm-tab-mgr-select { margin-left: 10px; width: 150px; }
.rptm-tab-mgr-select:disabled { background: var(--bg-soft); color: var(--text-faint); cursor: not-allowed; }
.rptm-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rptm-bar-row:last-child { margin-bottom: 0; }
.rptm-bar-label { width: 96px; flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--text-muted); text-align: right; }
.rptm-bar-track { flex: 1; background: var(--bg-soft); border-radius: var(--radius-sm); overflow: hidden; height: 22px; min-width: 60px; }
.rptm-bar-fill {
  height: 100%; display: flex; align-items: center; padding: 0 10px; color: #fff;
  font-size: 11px; font-weight: 700; white-space: nowrap; border-radius: var(--radius-sm); min-width: 2px;
}
.rptm-bar-fill.target { background: linear-gradient(90deg,#bfdbfe,#dbe9fe); color: #1e3a5f; }
.rptm-bar-fill.actual { background: linear-gradient(90deg,var(--primary),#3b82f6); }
.rptm-list-section-title {
  font-size: 13px; font-weight: 700; color: var(--text);
  margin: -16px -16px 10px; padding: 9px 16px; border-bottom: 1px solid var(--border);
  background: var(--primary-soft); border-radius: var(--radius) var(--radius) 0 0;
}

/* ── 3개월 예상매출: 소계/합계 행 ───────────────────── */
.rptf-subtotal-row td { background: var(--bg-soft) !important; border-top: 1px solid var(--border); }
.rptf-total-row td    { background: #eef0f3 !important; border-top: 2px solid var(--border-strong); font-size: 13px; }

/* ── 전환 분석: 퍼널 가로 막대 ─────────────────────── */
.funnel-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.funnel-row:last-child { margin-bottom: 0; }
.funnel-row-label { width: 84px; flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--text-muted); text-align: right; }
.funnel-row-bar-wrap { flex: 1; background: var(--bg-soft); border-radius: var(--radius-sm); overflow: hidden; height: 36px; min-width: 60px; }
.funnel-row-bar {
  height: 100%; background: linear-gradient(90deg,var(--primary),#3b82f6);
  display: flex; align-items: center; padding: 0 10px; color: #fff;
  font-size: 12px; font-weight: 700; white-space: nowrap; transition: width .25s;
  border-radius: var(--radius-sm); min-width: 2px;
}
.funnel-row-meta { width: 170px; flex-shrink: 0; font-size: 11px; color: var(--text-muted); text-align: right; line-height: 1.5; }
.funnel-row-rate { width: 64px; flex-shrink: 0; font-size: 13px; font-weight: 800; color: var(--primary); text-align: right; }

/* ── 수금 일정 (PaySched: 상세 수금 탭 + 단계 전환 모달) ────────────── */
.od-pay-head { display:flex; align-items:center; gap:10px; padding:10px 0 12px; flex-wrap:wrap; }
.od-pay-lbl { font-size:12px; font-weight:600; color: var(--text-muted); }
.od-pay-lbl .req { color: var(--danger); }
.od-pay-date { padding:5px 8px; border:1px solid var(--border); border-radius: var(--radius-sm); font-size:13px; }
.od-pay-hint { font-size:12px; color: var(--text-faint); }
.od-pay-hint.warn { color: var(--danger); font-weight:600; }

.pay-st { display:inline-block; font-size:11px; font-weight:700; padding:1px 8px; border-radius:10px; }
.pay-st-plan { background: var(--bg-soft);  color: var(--text-muted); }
.pay-st-paid { background:#e6f4ea; color:#2f8f4e; }
.pay-st-late { background:#fdecea; color:#c0392b; }

.pay-diff-ok   { font-size:12px; color:#2f8f4e; font-weight:600; }
.pay-diff-warn { font-size:12px; color:#c0392b; font-weight:600; }

/* 단계 전환 모달 안에 들어가는 회차 입력 — 컬럼이 7개라 모달 폭을 넓히고
   회차가 늘어나도 모달이 화면 밖으로 나가지 않게 표에만 세로 스크롤을 준다. */
.stage-pay { margin-top:14px; border-top:1px solid var(--border); padding-top:12px; }
.stage-pay-hd { font-size:13px; font-weight:700; color: var(--text); margin-bottom:8px; }
.stage-pay-note { font-weight:400; font-size:11px; color: var(--text-muted); }
.stage-pay-scroll { max-height:240px; overflow:auto; border:1px solid var(--border); border-radius: var(--radius-sm); }
.stage-pay-tbl { width:100%; }
.stage-pay-tbl input { font-size:12px; }
.stage-pay-ft { display:flex; align-items:center; gap:10px; margin-top:8px; flex-wrap:wrap; }
.stage-pay-sum { font-size:12px; color: var(--text-muted); line-height:1.6; }

/* 회차 입력이 붙는 동안만 모달을 넓힌다 (다른 확인 모달은 360px 그대로) */
.opp-modal:has(.stage-pay:not(.hidden)) { width: 760px; max-width: 94vw; }

/* 수금 탭 합계 바: 항목이 4개라 좁은 폭에서 라벨이 세로로 쪼개진다 — 항목 단위로만 줄바꿈 */
#od-pay-foot { flex-wrap: wrap; row-gap: 6px; }
#od-pay-foot .opp-sum-item { white-space: nowrap; }
#od-pay-foot .opp-sum-label { white-space: nowrap; }

/* 수금 탭 합계: 항목이 5개라 좁은 폭에서 라벨이 세로로 쪼개진다 — 항목 단위로만 줄바꿈 */
#od-pay-foot .opp-sum-val { min-width: 0; }

/* 계산서 발행 이메일 입력 (단계 전환 모달 + 상세 수금 탭 공용) */
.od-pay-email {
  flex: 1; min-width: 240px; max-width: 420px;
  padding: 5px 8px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: 13px;
}
.od-pay-email::placeholder { color: var(--text-faint); }