/* clients_detail.css — 고객(clients2) 화면 전용 조각 정본.
   2026-07-28 properties_grid.css 2차 분리(센서스 ② 후속) — 규칙 내용 원본 그대로.
   사용처 실측: rel-modal(dsv2_clients/_relation_modal), clients-ctx-menu(clients_nav_controller.js)
   — 전부 application 레이아웃의 clients 화면뿐. cust-tel-input 은 참조 0(死 — 후속 소각 후보).
   application 레이아웃에서 properties_grid 보다 먼저 로드된다. */

/* 고객 상세 관계도 모달 — 헤더의 [관계도] 버튼(label)이 연다. 신규 JS 0바이트.
   여는 방식은 dsv2_properties/consult_window 의 add-partner-toggle 과 같은 패턴이다
   (숨긴 checkbox + 형제 선택자). 그쪽 .modal-overlay 를 그냥 못 쓴 이유: 그 CSS 파일
   (dsv2_consult_window.css)은 팝업 전용이라 application 레이아웃에 로드되지 않는다.

   2026-08-03 이 자리엔 원래 좌pane 2탭(rel-tabs)이 있었다. 탭이 사라지며 같이 지웠다
   — 관계 패널이 모달로 옮겨가 "연관 매물" 하나만 남았고, 탭이 하나면 탭이 아니다. */
.rel-modal__toggle:not(:checked) ~ .rel-modal__overlay { display: none; }
.rel-modal__overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(17, 24, 39, .35);
}
/* 배경 = 카드 뒤에 깔린 전면 label. 카드는 아래에서 z-index 로 위에 올린다. */
.rel-modal__backdrop { position: absolute; inset: 0; cursor: default; }
.rel-modal__card {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  max-width: min(720px, 100%); max-height: 100%;
  background: var(--db-color-card); border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .2);
  overflow: hidden;
}
.rel-modal__head {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--db-color-outline);
}
.rel-modal__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 999px;
  color: var(--db-color-text-muted, #9ca3af); cursor: pointer;
  transition: background-color var(--db-duration-fast), color var(--db-duration-fast);
}
.rel-modal__close:hover { background: var(--db-color-fill-subtle); color: var(--db-color-text); }
/* 그림이 넘치면 스크롤 — 숨기지 않는다(넘친 걸 알아야 한다). 최소폭은 노드 하나가 안 잘릴 만큼. */
.rel-modal__body { flex: 1; min-height: 0; min-width: 280px; overflow: auto; padding: 16px; }

/* 커스텀 우클릭 컨텍스트 메뉴 (고객 리스트 등) — --db 토큰 룩. JS(clients_nav_controller)가 커서 위치에 띄운다. */
.clients-ctx-menu {
  position: fixed; z-index: 2000;
  min-width: 160px; padding: 4px;
  background: var(--db-color-card); border: 1px solid var(--db-color-outline);
  border-radius: var(--db-radius-input); box-shadow: var(--db-shadow-overlay);
}
.clients-ctx-menu__item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 12px; border: none; background: none;
  font: var(--db-text-label-2); color: var(--db-color-text);
  text-align: left; border-radius: var(--db-radius-xs); cursor: pointer;
}
.clients-ctx-menu__item:hover { background: var(--db-color-fill-subtle); }
.clients-ctx-menu__item--danger { color: var(--db-color-danger); }
.clients-ctx-menu__item--danger:hover { background: rgba(220, 38, 38, 0.08); }