feat(sw): popup controls, SWSelect / SWSlider, footer and viewer design fixes

Components (new public exports, existing APIs unchanged)
- SWPopupPropertyRow: the property window row (layer / color / line style
  pickers, Figma 26:12250 / 26:12170) for SWPopup content. The SWHeader field
  dropdowns stay header-only; Popup B and 도면 설정 now use the popup pickers.
- SWSelect: native panel select (28px, 1px #948871, radius 4, #F1ECE1, 12px),
  used by Popup 도면 설정 단위 and Viewer 축척 지정 단위 (replaces the HM UI
  Select there and the story-only .sw-viewer-story-select CSS).
- SWSlider: appearance "panel" (default, the gauge the popup used) or
  "property" (the property window gauge), same value / events. Shares the
  property gauge CSS; SWViewerSlider renders SWSlider panel with viewer tokens.

Footer
- --hm-sw-footer-gra-border-orange (Figma gra-border-orange; the aux selected
  border token now references it): Model selected / hover, Layout hover and
  Layout + hover surfaces; 보조기능 / 명령어 전체보기 hover lights both lines
  and an orange ring; category + hover in #FF5C00 (menu-add-hover.svg).
- Model / Layout text stays the Default text (#161410, 12px, 400, no outline)
  on hover and on the orange surface: only the surface changes.
- bg_vacant covers the slot row only: the open pocket of a category tab no
  longer splits where it crosses the last command (e.g. 수정 with one command).

Viewer
- Panel title art keeps 308px (max-width: none against host img resets), so
  panels under 312px (250 x auto, 300px) paint the title from the left edge.

Storybook
- SW/Footer: 기본 Footer (sw-footer--default) and States (sw-footer--states)
  removed; full-footer keeps the live composition only, responsive keeps the
  widths (reference / Figma image sections removed, image files kept); the aux
  Figma comparison moved to the verification Story figma-variants.
- SW/Popup: unit SWSelect, SWSlider A / B section, popup pickers, Popup B state.

packages/sw/src/components/sw-viewer/SWViewerControls.tsx

@@ -1,5 +1,6 @@
 import { forwardRef, useId, type ButtonHTMLAttributes, type HTMLAttributes, type InputHTMLAttributes, type ReactNode } from "react"
 import { SWViewerIcon } from "./SWViewerIcon"
+import { SWSlider, type SWSliderProps } from "../sw-slider/SWSlider"
 import "../../theme/sw-viewer.css"
 
 const cx = (...names: (string | false | undefined)[]) => names.filter(Boolean).join(" ")
@@ -92,16 +93,14 @@ export interface SWViewerSliderProps extends Omit<InputHTMLAttributes<HTMLInputE
   onValueChange?: (value: number) => void
 }
 
-/** Panel slider (6px #E0DACE track, #266651 range, 18px white thumb with #266651 ring). Native range input. */
+/**
+ * Panel slider (6px track, #266651 range, 18px white thumb with #266651 ring). SWSlider appearance="panel" painted
+ * with the viewer panel tokens (same look, 2026-10-20). Native range input.
+ */
 export const SWViewerSlider = forwardRef<HTMLInputElement, SWViewerSliderProps>(function SWViewerSlider(
-  { value, min, max, step = 1, onValueChange, className, style, ...rest }, ref,
+  { className, ...rest }, ref,
 ) {
-  const percent = max > min ? ((Math.min(max, Math.max(min, value)) - min) / (max - min)) * 100 : 0
-  return (
-    <input ref={ref} type="range" className={cx("hm-sw-viewer-slider", className)} value={value} min={min} max={max} step={step}
-      style={{ ...style, ["--hm-sw-viewer-slider-percent" as string]: `${percent}%` }}
-      onChange={event => onValueChange?.(Number(event.currentTarget.value))} {...rest} />
-  )
+  return <SWSlider ref={ref} {...(rest as Omit<SWSliderProps, "appearance" | "className">)} appearance="panel" className={cx("hm-sw-viewer-slider", className)} />
 })
 
 export interface SWViewerFieldProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {