/* =============================================================================
 * swnm 체크박스 컴포넌트 — .ui-check  (사인오프 2026-06-11)
 * -----------------------------------------------------------------------------
 * 네이티브 <input type="checkbox">에 직접 클래스. hex 하드코딩 금지(토큰만).
 *
 *   <input type="checkbox" class="ui-check">
 *   <label class="ui-check-field"><input type="checkbox" class="ui-check"> 텍스트</label>
 *   전체선택 중간상태: JS에서 input.indeterminate = true  (자동으로 – 표시)
 *
 * 외형: 둥근(radius 4) · checked = --primary 채움 + 흰 체크(중앙정렬) · 16px.
 * 범위: 체크박스만. 라디오는 사용처 1곳뿐이라 제외.
 * 기존 custom/grid/tree-checkbox·form-check-input은 점진 흡수.
 * ============================================================================= */

.ui-check {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);     /* 4px (둥근) */
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: background-color .15s ease, border-color .15s ease;
}

/* checked / indeterminate = --primary 채움 */
.ui-check:checked,
.ui-check:indeterminate {
  background: var(--primary);
  border-color: var(--primary);
}

/* 체크마크(✓) — transform으로 자동 중앙정렬(원본 custom의 매직넘버 어긋남 교정) */
.ui-check:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 4px;
  height: 8px;
  border: solid #FFFFFF;               /* 채움 위 흰 마크 (고정 대비) */
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* indeterminate(전체선택 중간) — 가운데 가로선 – */
.ui-check:indeterminate::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 2px;
  background: #FFFFFF;
  transform: translate(-50%, -50%);
}

.ui-check:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.ui-check:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* 라벨 + 체크박스 가로 묶음 */
.ui-check-field {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);                 /* 8px */
  cursor: pointer;
  font-size: var(--font-base);
  color: var(--text-primary);
}
.ui-check-field:has(.ui-check:disabled) { cursor: not-allowed; opacity: .5; }