/* 추정매물 그리드 전용 스타일 — 정본 = wonwoohoe.css(같은 자리, 같은 이유).
 *
 * ⚠️ 클래스 접두는 화면별(`pp-`)로 고정한다. Propshaft 가 모든 CSS 를 동시에 로드하므로
 *    `.search-hit` 같은 범용 이름은 다른 화면과 충돌한다. 원우회가 `wh-` 를 쓰는 것과 짝.
 *
 * ⚠️ 스크롤바 규칙은 여기 없다 — canon(grid_skin.css)의 `.ds-grid-scroll` 을
 *    prospects_table_preset.js 가 붙인다(가로·세로 둘 다).
 */

/* 검색 정확일치 행 표식 — 원우회 `.wh-search-hit` 와 같은 톤(디자인토큰 primary 8%).
   색을 새로 만들지 않는다. 선택(.tabulator-selected)이 아니라 «표식»이다. */
.tabulator .tabulator-row.pp-search-hit {
  background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}
.tabulator .tabulator-row.pp-search-hit:hover {
  background: color-mix(in srgb, var(--md-sys-color-primary) 14%, transparent);
}

/* ── 헤더 칩(단지 / 연결 / 상태) ─────────────────────────────────────────────
 * ⚠️ `db_components.css` 에 있는 줄 알고 `.chip` 을 그냥 썼다가 **맨 텍스트로 렌더**됐다
 *    (2026-08-11 양희 «이미지 깨진거 같어»). 실제 정의처는 `dsv2_consult_window.css` 이고
 *    그 파일은 상담 팝업 전용 레이아웃에서만 로드된다 — 앱 레이아웃엔 안 실린다.
 *    남의 화면 파일을 레이아웃에 끼워 넣는 대신 여기서 `pp-` 접두로 자체 정의한다
 *    (화면별 접두사 규칙 — Propshaft 가 전 CSS 를 동시 로드하므로 범용 이름은 충돌한다).
 *    모양은 그 파일의 알약 트랙을 그대로 따랐다 — 두 화면이 달라 보일 이유가 없다. */
.pp-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  align-items: center;
  background: var(--md-sys-color-surface-container-high, #f1f5f9);
  border-radius: 999px;
  padding: 4px;
}

.pp-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--md-sys-color-on-surface-variant, #374151);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.pp-chip:hover { background: rgba(255, 255, 255, 0.55); }

.pp-chip--on {
  background: var(--md-sys-color-surface, #fff);
  color: var(--md-sys-color-primary, #2563eb);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.pp-chip--on:hover { background: var(--md-sys-color-surface, #fff); }

/* 칩 안의 건수 — 이름과 붙어 보이지 않게 `.pp-chip` 의 gap 이 띄운다. */
.pp-chip-count { font-size: 11px; opacity: 0.65; font-variant-numeric: tabular-nums; }

/* 연결 배지 — 우리 고객(거래처) / 법인고객(원우회) 매칭 표시.
   두 개가 같이 붙는 행이 있어(«고객 · 법인고객») 가로로 나열되고 좁은 칸에서 줄바꿈된다. */
.pp-linked {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.pp-linked-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
}

/* 색은 m3 토큰만 쓴다 — 하드코딩하면 테마 전환에서 이 칸만 어긋난다.
   우리 고객 = primary(거래 이력이 있는 곳), 법인고객 = tertiary(원우회 명부). */
.pp-linked-badge--customer {
  background: color-mix(in srgb, var(--md-sys-color-primary) 14%, transparent);
  color: var(--md-sys-color-primary);
}

.pp-linked-badge--corp {
  background: color-mix(in srgb, var(--md-sys-color-tertiary) 16%, transparent);
  color: var(--md-sys-color-tertiary);
}

/* ── 구분 세그먼트 버튼(전체 / 법인 / 개인 / 미상) ──────────────────────────────
 * 사장님 2026-09-02: «법인 개인 버튼 만들어, 필터해서 사용자가 쉽게 보도록, 플랫 디자인».
 * 칩 트랙과 다르게 **버튼**이다 — 테두리 하나로 묶인 세그먼트, 그림자 없음, 켜진 칸은 단색 채움.
 * 색은 m3 토큰만: 법인 = primary, 개인 = tertiary, 미상 = outline(회색), 전체 = on-surface. */
.pp-seg {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--md-sys-color-outline-variant, #cbd5e1);
  border-radius: 10px;
  overflow: hidden;
  background: var(--md-sys-color-surface, #fff);
}

.pp-seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  color: var(--md-sys-color-on-surface-variant, #374151);
  text-decoration: none;
  white-space: nowrap;
  border-right: 1px solid var(--md-sys-color-outline-variant, #cbd5e1);
  transition: background-color 0.12s ease, color 0.12s ease;
}

.pp-seg-btn:last-child { border-right: 0; }
.pp-seg-btn:hover { background: var(--md-sys-color-surface-container-high, #f1f5f9); }
.pp-seg-btn:focus-visible { outline: 2px solid var(--md-sys-color-primary, #2563eb); outline-offset: -2px; }

.pp-seg-count { font-size: 11px; font-weight: 500; opacity: 0.7; font-variant-numeric: tabular-nums; }
.pp-seg-btn--on .pp-seg-count { opacity: 0.9; }

.pp-seg-btn--on.pp-seg-btn--all { background: var(--md-sys-color-on-surface, #111827); color: var(--md-sys-color-surface, #fff); }
.pp-seg-btn--on.pp-seg-btn--corp { background: var(--md-sys-color-primary, #2563eb); color: var(--md-sys-color-on-primary, #fff); }
.pp-seg-btn--on.pp-seg-btn--person { background: var(--md-sys-color-tertiary, #0f766e); color: var(--md-sys-color-on-tertiary, #fff); }
.pp-seg-btn--on.pp-seg-btn--unknown { background: var(--md-sys-color-outline, #64748b); color: var(--md-sys-color-surface, #fff); }
.pp-seg-btn--on:hover { filter: brightness(0.96); }

/* 구분 칸 배지 — 세그먼트 버튼과 같은 색 체계(연한 채움, 그림자 없음). */
.pp-entity-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
}

.pp-entity-badge--corp {
  background: color-mix(in srgb, var(--md-sys-color-primary) 14%, transparent);
  color: var(--md-sys-color-primary);
}

.pp-entity-badge--person {
  background: color-mix(in srgb, var(--md-sys-color-tertiary) 16%, transparent);
  color: var(--md-sys-color-tertiary);
}

.pp-entity-badge--unknown {
  background: color-mix(in srgb, var(--md-sys-color-outline) 14%, transparent);
  color: var(--md-sys-color-on-surface-variant);
}