style(sw): calmer viewer header switches without the yellow face

User-approved 2026-10-22 design for the SW viewer header switches (2.5D,
어두운 배경); panel switches and the --hm-sw-viewer-accent token unchanged.
- OFF: track #020a07, knob #5f7a71 (dim gray-green).
- ON: track var(--hm-sw-viewer-hover) #266651, knob var(--hm-sw-viewer-muted)
  #bddfd4. No yellow face or ring.
- New tokens --hm-sw-viewer-switch-thumb-off / -on / --hm-sw-viewer-switch-on;
  size, knob travel, bevel and the 60% disabled opacity unchanged.
- DESIGN_RULES.md header switch token row updated.

packages/sw/src/theme/sw-viewer.css

@@ -27,7 +27,13 @@
   --hm-sw-viewer-label-size: 11px;
   --hm-sw-viewer-icon-size: 16px;
   --hm-sw-viewer-disabled-opacity: 0.6;
-  --hm-sw-viewer-switch-off: #0a221d;
+  /* Header switches (2.5D, 어두운 배경), 2026-10-22 (user-picked): OFF recedes (darkest track, dim gray-green knob);
+     ON reads first without white (header hover green track, muted mint knob). No yellow and no ring, so both states
+     keep the same 36 x 20 look. Panel switches keep their own. */
+  --hm-sw-viewer-switch-off: #020a07;
+  --hm-sw-viewer-switch-thumb-off: #5f7a71;
+  --hm-sw-viewer-switch-on: var(--hm-sw-viewer-hover);
+  --hm-sw-viewer-switch-thumb-on: var(--hm-sw-viewer-muted);
   --hm-sw-viewer-switch-bevel: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 1px rgba(0, 0, 0, 0.25);
   /* Icon stroke: the SWHeader icon assets (print / K guide / layer icons) are a fill + a 1px black OUTSIDE stroke
      (Figma mask "outside" path). SWViewerIcon draws it as SVG stroke on a copy behind the icon (see SWViewerIcon). */
@@ -480,9 +486,9 @@ button.hm-sw-viewer-header__brand { text-align: left; }
   box-shadow: var(--hm-sw-viewer-switch-bevel);
   transition: background-color 0.15s;
 }
-.hm-sw-viewer-switch__thumb { display: block; width: 16px; height: 16px; border-radius: 9999px; background: var(--hm-sw-viewer-text); transition: transform 0.15s; }
-.hm-sw-viewer-switch[data-state="checked"] { background: var(--hm-sw-viewer-accent); }
-.hm-sw-viewer-switch[data-state="checked"] .hm-sw-viewer-switch__thumb { transform: translateX(16px); background: var(--hm-sw-viewer-switch-off); }
+.hm-sw-viewer-switch__thumb { display: block; width: 16px; height: 16px; border-radius: 9999px; background: var(--hm-sw-viewer-switch-thumb-off); transition: transform 0.15s; }
+.hm-sw-viewer-switch[data-state="checked"] { background: var(--hm-sw-viewer-switch-on); }
+.hm-sw-viewer-switch[data-state="checked"] .hm-sw-viewer-switch__thumb { transform: translateX(16px); background: var(--hm-sw-viewer-switch-thumb-on); }
 .hm-sw-theme .hm-sw-viewer-switch:disabled { opacity: var(--hm-sw-viewer-disabled-opacity); cursor: not-allowed; }
 .hm-sw-viewer-panel .hm-sw-viewer-switch { background: var(--hm-sw-viewer-panel-switch-off); box-shadow: none; }
 .hm-sw-viewer-panel .hm-sw-viewer-switch .hm-sw-viewer-switch__thumb { background: #fff; }