/* 공용 체크박스(db-checkbox) 시각 정본 — shared/_db_checkbox.html.erb 전용.
   native <input type=checkbox> 는 시각적으로 숨기고, 인접 <label>(체크마크 SVG)로 표시.
   체크됨=남색(#1e40af) / 해제=회색(#d1d5db). door-butler-web_v1 셀 토글 룩 계승.
   ⚠️ input + label 은 반드시 인접 형제여야 함(:checked + .db-checkbox-mark 셀렉터). */
.db-checkbox {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.db-checkbox-mark {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: #d1d5db;
  flex-shrink: 0;
}
.db-checkbox:checked + .db-checkbox-mark {
  color: var(--db-color-primary);
}
/* 켤 수 없는 자리 — 켜 봐야 아무 일도 안 일어나는 체크(2026-09-01, 매물장 「물건 목록」이
   연결 물건 0건일 때가 첫 사용처).
   ⚠️ native input 은 위에서 `pointer-events: none` 으로 숨겨져 있어 클릭이 **label 로**
      들어온다. 그래서 `input:disabled` 만으로는 못 막고, label 쪽에서도 막아야 한다. */
.db-checkbox-mark--disabled {
  cursor: default;
  opacity: 0.4;
  pointer-events: none;
}

/* ── 공용 라디오(db-radio) — shared/_db_radio.html.erb 전용 (2026-09-01) ────────
   체크박스와 **같은 색**을 쓴다(`--db-color-primary`). 레포에 라디오 공용이 0건이라
   화면마다 생 input 이었고, 브라우저 기본 파랑이 바로 옆 체크박스와 갈렸다(조이 지적).

   ⚠️ 체크박스와 같은 규칙: native 는 시각적으로 숨기고 인접 label 이 그린다
      (`input:checked + .db-radio-mark`). 순서를 바꾸면 선택 표시가 죽는다. */
.db-radio {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.db-radio-wrap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.db-radio-mark {
  display: inline-block;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  border: 1.5px solid #d1d5db;
  border-radius: 50%;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 0.12s;
}
/* 고른 것 = 테두리도 안쪽 점도 공용 남색. 점은 border 로 그린다(요소를 하나 더 안 만든다). */
.db-radio:checked + .db-radio-mark {
  border-color: var(--db-color-primary);
  border-width: 4.5px;
}
.db-radio-label {
  font-size: 12.5px;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
}
.db-radio:focus-visible + .db-radio-mark {
  outline: 2px solid var(--db-color-primary);
  outline-offset: 2px;
}