/* 소속 및 관계 위젯 — shared/_relation_rows.html.erb 전용 시각 정본.
 *
 * 왜 순수 CSS 인가: 이 위젯을 쓰는 화면이 둘인데 한쪽(dsv2_properties/consult_window)이
 * `layout:false` 독립 팝업이라 **tailwind.css 를 싣지 않는다**. Tailwind 유틸리티로 두면
 * 메모창에서만 레이아웃이 통째로 무너진다(에러 0, 눈으로만 보이는 사고).
 *
 * 값은 이사 전(_partner_modal, ~2026-08-16) Tailwind 와 1:1 이다 — 아래 대응표가 근거다.
 * 고객관리 모달의 시각이 1px 도 바뀌면 안 되므로 여기 숫자를 "정리"하지 말 것.
 *
 *   .rel-label        block text-[11px] font-semibold text-fg-tertiary uppercase tracking-wider mb-1
 *   .rel-rows         space-y-1.5                     (행 간격 0.375rem)
 *   .rel-row          flex items-center gap-1         (0.25rem)
 *   .rel-half         flex-1 min-w-0 flex items-center gap-1 rounded-lg bg-surface-tertiary px-1 py-1
 *   .rel-cell         flex-1 min-w-0 (+ dc-combo-block 의 display:block)
 *   .rel-of           shrink-0 text-[12px] text-fg-tertiary px-0.5
 *   .rel-input-flush  dc-input-flush (margin-top:0)
 *   .rel-btn          shrink-0 w-7 h-7 inline-flex items-center justify-center rounded-lg cursor-pointer
 *   .rel-btn--add     bg-primary text-white text-lg leading-none hover:opacity-90
 *   .rel-btn--remove  text-fg-tertiary hover:bg-surface-tertiary
 *   .rel-invalid      ring-1 ring-status-danger       (multi_relation_controller 가 붙인다)
 *
 * 토큰 fallback 이 붙은 이유: `--md-sys-color-*` 는 m3-tokens/m3-google-blue 에 있는데
 * 메모창은 그 두 시트를 안 싣는다. fallback 값 = 그 시트의 실값(2026-08-17 실측)이라
 * 두 화면에서 같은 색이 나온다. m3 쪽 값을 바꾸면 여기 fallback 도 같이 바꿔야 한다.
 */

.rel-label {
  display: block;
  margin-bottom: 4px;                       /* mb-1 */
  font-size: 11px;
  font-weight: 600;                         /* font-semibold */
  letter-spacing: 0.05em;                   /* tracking-wider */
  text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant, #5F6368);
}

.rel-rows > * + * { margin-top: 0.375rem; } /* space-y-1.5 */

.rel-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;                             /* gap-1 */
}

.rel-half {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;                         /* px-1 py-1 — 양쪽 동일해야 반반 대칭 */
  border-radius: 0.5rem;                    /* rounded-lg */
  background: var(--md-sys-color-surface-container, #F1F3F4);
}

/* display:block 은 .db-select-wrap 의 inline-block 을 덮는다(옛 .dc-combo-block).
   같은 클래스로 콤보 칸과 "이 고객" 칸을 둘 다 덮는다 — 네 칸 균등폭의 조건이다. */
.rel-cell {
  flex: 1 1 0%;
  min-width: 0;
  display: block;
}

.rel-of {
  flex-shrink: 0;
  padding: 0 0.125rem;                      /* px-0.5 */
  font-size: 12px;
  color: var(--md-sys-color-on-surface-variant, #5F6368);
}

.rel-input-flush { margin-top: 0; }

/* ⚠️ padding 0 은 **방어막**이다 — 지우면 🗑 이 사라진다(조이 신고 2026-08-21).
 *
 * 매물등록창 전용 시트에 요소 셀렉터가 있다: `button { padding: 8px 16px; … }`
 * (dsv2_register_window.css:37). 이 상자는 28px 인데 좌우 16px 씩이 얹히면 content box 가
 * **0** 이 되고, flex 아이템인 <svg> 가 0 폭으로 찌그러진다. 버튼 상자와 클릭은 멀쩡히 남고
 * **아이콘만** 사라진다 — 콘솔 에러 0 이라 화면을 봐야만 드러난다.
 * `+` 는 글자라 content box 밖으로 넘쳐 그대로 보이므로 "+ 는 있는데 🗑 만 없다"가 된다.
 *
 * 같은 사고가 이 레포에 이미 있었다(db_components.css 의 모달 닫기 X, 2026-08-19 실측).
 * 해법도 같다 — **특이도로 이긴다**: 여기 (0,1,0) > `button` (0,0,1).
 * 시트 로딩 순서에 기대지 않는다(화면 시트가 공용 시트보다 뒤에 실린다). */
.rel-btn {
  flex-shrink: 0;
  width: 1.75rem;                           /* w-7 */
  height: 1.75rem;                          /* h-7 */
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  cursor: pointer;
}

.rel-btn--add {
  background: var(--db-color-primary);
  color: #fff;
  font-size: 1.125rem;                      /* text-lg */
  line-height: 1;                           /* leading-none */
}
.rel-btn--add:hover { opacity: 0.9; }

.rel-btn--remove { color: var(--md-sys-color-on-surface-variant, #5F6368); }
.rel-btn--remove:hover { background: var(--md-sys-color-surface-container, #F1F3F4); }

/* 상대 미선택 경고 — multi_relation_controller#_validate 가 붙이고 _clearInvalid 가 뗀다.
   Tailwind ring 유틸리티(ring-1 ring-status-danger)를 대체한다. */
.rel-invalid { box-shadow: 0 0 0 1px var(--md-sys-color-error, rgb(179, 38, 30)); }

/* ── 읽기전용 관계 (shared/_relation_rows_readonly, 2026-08-21) ─────────────
   매물등록 모달의 [고객 연결]이 "이미 등록된 관계"를 보여주는 자리.
   행 모양은 편집 위젯(.rel-row/.rel-half/.rel-cell/.rel-of)을 **그대로 재사용**하고,
   여기서는 그 위에 얹히는 것만 정의한다 — 잠긴 시각 자체는 .db-select-button:disabled
   (db_components.css)가 준다. */
.rel-readonly { margin-bottom: 0.5rem; }

/* 라벨 옆 보조문구 — 라벨은 uppercase/tracking 이 걸려 있어 그대로 쓰면 같이 늘어난다. */
.rel-readonly-hint {
  /* ⚠️ display·font-size 는 **방어**다(2026-08-21 브라우저 실측).
     매물등록 창 전용 시트에 `label > span { display:block; font-size:12px }`
     (dsv2_register_window.css:32)이 있어서, 이 힌트가 그 셀렉터에 걸려 **다음 줄로
     내려가고 라벨 본문(11px)보다 커졌다**. 폭은 428px 중 175px 이라 넘칠 이유가 없었는데도
     두 줄이 됐다 — "글자가 길어서"가 아니라 block 이 되어서였다.
     같은 화면을 다른 시트가 물들이는 자리라, 여기서 명시적으로 되돌린다. */
  display: inline;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--md-sys-color-on-surface-variant, #5F6368);
}

/* +/🗑 자리 — 버튼은 없지만 **폭은 남긴다**(w-7 ×2 + gap-1 = 3.75rem).
   없애면 이 행만 넓어져 아래 편집 행과 칸 경계가 어긋난다. */
.rel-readonly-spacer {
  flex-shrink: 0;
  width: 3.75rem;
}