/* ============================================================
   pages/contacts/page.css — 주소록

   ⭐ **이 파일은 이 화면 안쪽만 건드린다.** 다른 레일에는 영향이 없다.
   공용(토큰 · 표 · 알약 · 버튼 · 글꼴 · 색)은 styles/ 가 갖는다. 여기서는 그것을 물려받고
   이 화면에만 필요한 것만 덧쓴다.

   @scope .cb-page, .cb-, #cb
   ⚠️ 위 @scope 는 약속이 아니라 검사 대상이다 — 여기 적힌 것에 걸리지 않는 셀렉터를 쓰면
      tests/test_pages.js 가 실패한다. 공용 규칙을 여기서 덮어쓰지 못하게 막는 장치다.

   ⭐ 색은 전부 토큰에서 온다. **여기서 새 색을 만들지 않는다.**
   ============================================================ */

.cb-page{ padding:0; }
.cb-page .cb-card{ margin:0; padding:14px 16px; height:100%; min-height:0;
  display:flex; flex-direction:column; }

/* ---------- 머리 — 제목 · 검색 · 오른쪽 버튼 ---------- */
.cb-head{ display:flex; align-items:flex-end; gap:var(--sp-3); margin:0 0 12px; flex-wrap:wrap; }
.cb-h-l{ min-width:0; }
.cb-h-r{ margin-left:auto; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.cb-title{ font-size:var(--fs-5); font-weight:800; color:var(--text); letter-spacing:-.01em; }
.cb-sub{ font-size:var(--fs-2); color:var(--muted); margin-top:2px; }
/* ⚠️ 검색칸은 도구 줄(.tbar)로 옮겼다. 모양은 채널과 같은 공용 부품에서 온다
   — styles/03-components.css. 여기에 다시 적지 않는다. */

/* ---------- 본문 — 회사 목록(1층) ---------- */
.cb-body{ flex:1 1 auto; min-height:0; overflow-y:auto; }
.cb-list{ display:flex; flex-direction:column; gap:2px; }
.cb-co{
  display:flex; align-items:center; gap:8px; min-height:38px; padding:6px 8px;
  border-radius:var(--radius-sm); cursor:default;
}
.cb-co:hover{ background:var(--row-hover); }
.cb-co.on{ background:var(--sk-bg2); }
.cb-tw{ flex:none; width:14px; color:var(--muted); cursor:pointer; font-size:var(--fs-2); }
.cb-nm{ flex:0 1 auto; min-width:0; cursor:pointer;
  font-size:var(--fs-3); font-weight:700; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cb-nm:hover{ color:var(--primary); }
.cb-sp{ flex:1 1 auto; min-width:0; }
.cb-n{ flex:none; font-size:var(--fs-1); font-weight:700; color:var(--muted);
  font-variant-numeric:tabular-nums; }
.cb-cp{ flex:0 1 auto; min-width:0; font-size:var(--fs-1); color:var(--muted); text-align:right;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cb-ck{ flex:none; width:14px; height:14px; margin:0; accent-color:var(--primary); }

/* 구분 알약 — 고객사 · 리셀러사 */
.cb-kd{
  flex:none; font-size:var(--fs-1); font-weight:800; padding:2px 8px;
  border-radius:var(--radius-full); background:var(--sk-bg2); color:var(--muted);
}
.cb-kd.k-customer{ background:var(--primary); color:#fff; }
.cb-kd.k-reseller{ background:var(--stage-70); color:#fff; }
.cb-al{ flex:none; font-size:var(--fs-1); font-weight:700; color:var(--muted);
  padding:2px 7px; background:var(--sk-bg2); border-radius:var(--radius-full); }

/* ---------- 담당자(2층) — 회사를 열면 그 아래로 ---------- */
.cb-ps{ padding:2px 0 8px 30px; display:flex; flex-direction:column; gap:2px; }
.cb-p{ display:flex; align-items:center; gap:8px; min-height:30px; padding:3px 8px;
  border-radius:var(--radius-sm); font-size:var(--fs-2); }
.cb-p:hover{ background:var(--row-hover); }
.cb-p-n{ flex:none; font-weight:700; color:var(--text); }
.cb-p-t{ flex:none; color:var(--muted); }
.cb-p-c{ flex:none; color:var(--text); font-variant-numeric:tabular-nums; }
.cb-p-e{ flex:0 1 auto; min-width:0; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 담당자 메일주소 복사 버튼. 줄 안에 작게 붙는다. */
.cb-p-cp{ flex:none; font-size:var(--fs-1); font-weight:700; line-height:1;
  padding:3px 8px; color:var(--muted); background:var(--sk-bg2);
  border-width:1px; border-style:solid; border-color:var(--line);
  border-radius:var(--radius-full); cursor:pointer; }
.cb-p-cp:hover{ color:var(--text); }
.cb-p-cp.on{ color:var(--text); }

/* 대표 담당자 알약(`.cb-cpt`)은 없앴다.
   엔지니어 배정은 그때 그 회사의 담당자 목록에서 드롭다운으로 고른다.
   미리 한 사람을 정해 둘 이유가 없어 표시도 규칙도 함께 걷어냈다. */

.cb-none{ padding:24px 0; text-align:center; font-size:var(--fs-3); color:var(--muted); line-height:1.8; }
.cb-none.sm{ padding:10px 0; font-size:var(--fs-2); text-align:left; }

/* ---------- 팝업 ---------- */
.cb-modal{
  position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(15,23,42,.45);
}
.cb-dlg{
  width:min(560px, 100%); max-height:86vh; display:flex; flex-direction:column;
  background:#fff; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:0 18px 48px rgba(15,23,42,.28);
}
.cb-dlg-h{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:13px 16px; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:var(--line); }
.cb-dlg-h b{ font-size:var(--fs-4); font-weight:800; color:var(--text); }
.cb-x{ width:24px; height:24px; cursor:pointer; font-family:inherit; font-size:var(--fs-2);
  color:var(--muted); background:none; border:0; border-radius:var(--radius-sm); }
.cb-x:hover{ background:var(--row-hover); color:var(--text); }
.cb-dlg-b{ padding:14px 16px; overflow:auto; }
.cb-dlg-f{ display:flex; align-items:center; gap:var(--sp-2); padding:12px 16px;
  border-top-width:1px; border-top-style:solid; border-top-color:var(--line); }
.cb-msg{ flex:1; font-size:var(--fs-2); color:var(--negative); }

.cb-f{ margin:0 0 10px; }
.cb-f label{ display:block; font-size:var(--fs-2); font-weight:700; color:var(--text); margin:0 0 4px; }
.cb-f input, .cb-f select{
  width:100%; height:30px; padding:0 9px; font-family:inherit; font-size:var(--fs-3);
  color:var(--text); background:#fff;
  border-width:1px; border-style:solid; border-color:var(--line); border-radius:var(--radius-sm);
}
.cb-f input:focus, .cb-f select:focus{ border-color:var(--primary); }
.cb-f2{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.cb-hint{ font-size:var(--fs-1); color:var(--muted); margin-top:4px; line-height:1.6; }
.cb-cbx{ display:flex; align-items:center; gap:6px; font-weight:700; }
.cb-cbx input{ width:14px; height:14px; margin:0; accent-color:var(--primary); }

/* 병합 팝업 — 어느 이름을 남길지 고른다 */
.cb-mg{ display:flex; align-items:center; gap:8px; padding:8px 10px; margin:6px 0 0;
  background:var(--sk-bg2); border-radius:var(--radius-sm); cursor:pointer; }
.cb-mg input{ width:14px; height:14px; margin:0; accent-color:var(--primary); }
.cb-mg b{ font-size:var(--fs-3); font-weight:800; color:var(--text); }
.cb-mg span{ margin-left:auto; font-size:var(--fs-1); color:var(--muted); }

/* ---------- 고객사 팝업 안에 얹는 카드 ----------
   ⚠️ 이 조각은 **다른 화면(고객사 팝업) 안**에 그려진다. 그래도 규칙은 여기 둔다 —
      그리는 코드가 이 폴더에 있기 때문이다. 이름 앞머리가 `.cb-` 라 다른 화면과 겹치지 않는다. */
.cb-card-x{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin:0 0 10px; padding:9px 12px;
  background:var(--sk-bg2); border-radius:var(--radius-sm);
}
.cb-card-n{ font-size:var(--fs-3); font-weight:800; color:var(--text); }
.cb-card-p{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-left:auto; }
.cb-card-i{ display:inline-flex; align-items:center; gap:5px;
  font-size:var(--fs-2); color:var(--text); }

/* ---------- 목록 아래 줄 수 표시와 [더 보기] ----------
   채널 표의 `.ch-foot` 과 같은 모양·같은 자리다. 처음에는 50곳만 그리고 여기서 늘린다. */
.cb-foot{ display:flex; align-items:center; gap:var(--sp-3); margin-top:var(--sp-3); }
.cb-count{ font-size:var(--fs-2); color:var(--muted); }

/* 중복 정리 팝업에서 개수를 보여 주는 줄 */
.cb-sum{ padding:8px 10px; background:var(--sk-bg2); border-radius:var(--radius-sm);
  font-size:var(--fs-2); color:var(--text); line-height:1.6; }
.cb-sum b{ font-weight:800; }