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-slider/SWSlider.tsx

@@ -0,0 +1,51 @@
+import { forwardRef, useEffect, useImperativeHandle, useRef, type CSSProperties, type InputHTMLAttributes } from "react"
+
+/**
+ * `panel` (default): the gauge the SW popup used so far, 6px track + 18px white thumb with a ring (tokens
+ * `--hm-sw-slider-panel-*`; SWViewerSlider has the same look). `property`: the property window gauge, beige
+ * track + red fill + Figma thumb (tokens `--hm-sw-property-range-*`, as in SWHeaderPropertyPanel).
+ */
+export type SWSliderAppearance = "panel" | "property"
+
+export interface SWSliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "onChange" | "min" | "max" | "step"> {
+  value: number
+  /** Default 0. */
+  min?: number
+  /** Default 100. */
+  max?: number
+  /** Default 1. */
+  step?: number
+  /** Every change while dragging or with the keyboard. */
+  onValueChange?: (value: number) => void
+  /** The settled value: pointer release, or each keyboard step (the native `change` event). */
+  onValueCommit?: (value: number) => void
+  /** Look only; value, events and keyboard are the same. Default `panel`. */
+  appearance?: SWSliderAppearance
+}
+
+/**
+ * HMDesign SW slider (native range input) for SWPopup / SWPopupRow and any SWTheme content. The host owns the
+ * value. Colors come from SW tokens, so an SWTheme / runtime token override restyles both appearances.
+ */
+export const SWSlider = forwardRef<HTMLInputElement, SWSliderProps>(function SWSlider(
+  { value, min = 0, max = 100, step = 1, onValueChange, onValueCommit, appearance = "panel", className, style, ...rest }, ref,
+) {
+  const inputRef = useRef<HTMLInputElement>(null)
+  useImperativeHandle(ref, () => inputRef.current as HTMLInputElement)
+  const commitRef = useRef(onValueCommit)
+  commitRef.current = onValueCommit
+  // React's onChange is the native `input` event; `change` fires once the value settles.
+  useEffect(() => {
+    const input = inputRef.current
+    if (!input) return
+    const commit = () => commitRef.current?.(Number(input.value))
+    input.addEventListener("change", commit)
+    return () => input.removeEventListener("change", commit)
+  }, [])
+  const fill = max > min ? (Math.min(max, Math.max(min, value)) - min) / (max - min) : 0
+  return (
+    <input ref={inputRef} type="range" className={`hm-sw-slider${className ? ` ${className}` : ""}`} data-appearance={appearance}
+      value={value} min={min} max={max} step={step} style={{ ...style, "--hm-sw-range-fill": fill } as CSSProperties}
+      onChange={event => onValueChange?.(Number(event.currentTarget.value))} {...rest} />
+  )
+})