/* =============================================================================
 * swnm 토글 스위치 컴포넌트 — .ui-toggle  (사인오프 2026-06-24)
 * -----------------------------------------------------------------------------
 * 네이티브 <input type="checkbox">에 직접 클래스. hex 하드코딩 금지(토큰만).
 *
 *   <input type="checkbox" class="ui-toggle">
 *   <label class="ui-toggle-field"><input type="checkbox" class="ui-toggle"> 텍스트</label>
 *
 * 외형: 트랙 36×20(pill) · 노브 16×16 원형 · ON = --primary 트랙 + 흰 노브.
 * 값은 data-quality-detail의 .dqd-toggle audit(실측) 기반.
 * 켜짐/꺼짐 의미가 있는 단일 boolean 토글에 사용(다중 선택은 ui-check).
 * ============================================================================= */

.ui-toggle {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  width: 36px;
  height: 20px;
  margin: 0;
  border-radius: var(--radius-pill);
  background: var(--bg-surface-alt);   /* OFF 트랙 (라이트는 아래서 분기) */
  position: relative;
  cursor: pointer;
  transition: background-color .2s ease;
}

.ui-toggle::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-muted);       /* OFF 노브 */
  transition: transform .2s ease, background-color .2s ease;
}

/* ON = --primary 트랙 + 흰 노브 우측 이동 */
.ui-toggle:checked {
  background: var(--primary);
}
.ui-toggle:checked::before {
  transform: translateX(16px);
  background: var(--bg-surface);
}

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

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

/* 라이트 테마 — OFF 트랙/노브 대비 보정 (현행 .dqd-toggle 라이트 분기 그대로) */
html[data-theme="light"] .ui-toggle:not(:checked) { background: var(--border-strong); }
html[data-theme="light"] .ui-toggle::before { background: var(--bg-surface); }
html[data-theme="light"] .ui-toggle:checked::before { background: var(--bg-surface); }

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