/* 기능 켜기·끄기의 조작 영역과 표시만 공유하고 실행·저장 처리는 각 화면에 둔다. */
.vp-switch{position:relative;min-width:44px;min-height:44px}
label.vp-switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;vertical-align:middle}
.vp-switch>input[type=checkbox][role=switch]{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;cursor:inherit}
.vp-switch-track{--switch-width:42px;--switch-height:24px;position:relative;display:inline-block;box-sizing:border-box;flex:none;width:var(--switch-width);height:var(--switch-height);min-height:0;border:1px solid transparent;border-radius:999px;background:color-mix(in srgb,var(--ws-muted,var(--muted,#61697a)) 70%,#30343e);vertical-align:middle;pointer-events:none;transition:background .18s ease}
.vp-switch-track::before{content:"";position:absolute;top:2px;left:2px;box-sizing:border-box;width:calc(var(--switch-height) - 6px);height:calc(var(--switch-height) - 6px);border-radius:50%;background:#fff;box-shadow:0 1px 3px #0004;transition:transform .18s ease}
.vp-switch-track.vp-switch-compact{--switch-width:28px;--switch-height:16px}
.vp-switch>input:checked+.vp-switch-track,.vp-switch[aria-checked=true]>.vp-switch-track{background:var(--ws-accent-fill,var(--acc,color-mix(in srgb,var(--accent,#087d73) 80%,#000)))}
.vp-switch>input:checked+.vp-switch-track::before,.vp-switch[aria-checked=true]>.vp-switch-track::before{transform:translateX(calc(var(--switch-width) - var(--switch-height)))}
.vp-switch>input:focus-visible+.vp-switch-track,.vp-switch[role=switch]:not(input):focus-visible{outline:2px solid var(--ws-accent,var(--acc,var(--accent,#087d73)));outline-offset:3px}
.vp-switch>input:disabled+.vp-switch-track,.vp-switch:disabled>.vp-switch-track{opacity:.45}
.vp-switch>input:disabled{cursor:default}
@media(prefers-reduced-motion:reduce){.vp-switch-track,.vp-switch-track::before{transition:none}}
@media(forced-colors:active){.vp-switch-track{background:Canvas;border-color:CanvasText}.vp-switch-track::before{background:CanvasText;box-shadow:none}.vp-switch>input:checked+.vp-switch-track,.vp-switch[aria-checked=true]>.vp-switch-track{background:Highlight}.vp-switch>input:checked+.vp-switch-track::before,.vp-switch[aria-checked=true]>.vp-switch-track::before{background:HighlightText}}
