/* 스위치 - 트랙 안에 글자가 있는 켜고 끄기(노출/숨김, 정상/정지, 사용/미사용). 동작은 switch.js, 규칙은 claude_common/ui/switch.md
   폭은 글자 수에 맞춘다(switch.js가 --sw-* 를 넣는다). phpadmin 관리자 목록의 노출 스위치를 공통으로 올린 것(2026-10-05) */
.switch { position: relative; display: inline-block; flex: 0 0 auto; width: var(--sw-width, 60px); height: 26px; cursor: pointer; user-select: none; vertical-align: middle; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track { position: absolute; inset: 0; border-radius: var(--uk-r-pill); background: var(--uk-muted); transition: background .2s ease; }
.switch input:checked + .switch-track { background: var(--uk-brand); }
.switch input:disabled + .switch-track { opacity: .55; cursor: not-allowed; }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--uk-brand); outline-offset: 2px; }
.switch-text {
  position: absolute; top: 0; bottom: 0; width: var(--sw-text-w, 24px);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 10px; font-weight: 700; color: var(--uk-on-strong); white-space: nowrap;
  transition: opacity .2s ease; pointer-events: none;
}
.switch-text-on { left: 2px; opacity: 0; }
.switch-text-off { right: 2px; opacity: 1; }
.switch input:checked + .switch-track .switch-text-on { opacity: 1; }
.switch input:checked + .switch-track .switch-text-off { opacity: 0; }
.switch-knob { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--uk-surface); box-shadow: 0 1px 2px rgba(var(--uk-shc), .35); transition: transform .2s ease; }
.switch input:checked + .switch-track .switch-knob { transform: translateX(var(--sw-travel, 34px)); }
.switch.is-busy { cursor: progress; }

/* 설정 한 줄 - 스위치 + 이름 (+ 도움말 [?]) */
.switch-row { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
@media (prefers-reduced-motion: reduce) { .switch-track, .switch-knob, .switch-text { transition: none; } }