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/theme/sw-viewer.css

@@ -355,7 +355,9 @@ button.hm-sw-viewer-header__brand { text-align: left; }
    the SWPopup position), and a stretched copy of the same art fills the flat part on the left of wider panels.
    The right one hides its own left 20px (left edge + corner) and the left copy ends exactly there: no seam, no
    doubled shadow. */
-.hm-sw-viewer-panel .hm-sw-property__title-art { left: auto; right: 4px; clip-path: inset(-4px -4px -4px 20px); }
+/* max-width: none: a host img reset (e.g. Tailwind preflight max-width: 100%) shrank the art in panels under 312px,
+   so its clipped left 20px left the start of the title bar unpainted (2026-10-20, 250px minimum width). */
+.hm-sw-viewer-panel .hm-sw-property__title-art { left: auto; right: 4px; max-width: none; clip-path: inset(-4px -4px -4px 20px); }
 .hm-sw-viewer-panel .hm-sw-property__titlebar::before {
   content: "";
   position: absolute;
@@ -428,21 +430,17 @@ button.hm-sw-viewer-header__brand { text-align: left; }
 .hm-sw-theme .hm-sw-viewer-input:focus-visible { outline: 2px solid var(--hm-sw-viewer-panel-switch-on); outline-offset: -1px; }
 .hm-sw-theme .hm-sw-viewer-input:disabled { opacity: 0.5; }
 
-.hm-sw-theme .hm-sw-viewer-slider {
-  --hm-sw-viewer-slider-percent: 0%;
-  width: 100%;
-  height: 18px;
-  margin: 0;
-  background: transparent;
-  appearance: none;
-  cursor: pointer;
+/* SWViewerSlider = SWSlider appearance="panel" (sw.css, 2026-10-20): the shared gauge rules painted with the
+   viewer panel tokens, so the viewer look and its theme overrides are unchanged. */
+.hm-sw-viewer-slider {
+  --hm-sw-slider-panel-range: var(--hm-sw-viewer-panel-switch-on);
+  --hm-sw-slider-panel-track: var(--hm-sw-viewer-panel-background);
+  --hm-sw-slider-panel-thumb: #fff;
 }
-.hm-sw-viewer-slider::-webkit-slider-runnable-track { height: 6px; border-radius: 9999px; background: linear-gradient(90deg, var(--hm-sw-viewer-panel-switch-on) var(--hm-sw-viewer-slider-percent), var(--hm-sw-viewer-panel-background) var(--hm-sw-viewer-slider-percent)); }
-.hm-sw-viewer-slider::-moz-range-track { height: 6px; border-radius: 9999px; background: var(--hm-sw-viewer-panel-background); }
-.hm-sw-viewer-slider::-moz-range-progress { height: 6px; border-radius: 9999px; background: var(--hm-sw-viewer-panel-switch-on); }
-.hm-sw-viewer-slider::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -6px; border: 2px solid var(--hm-sw-viewer-panel-switch-on); border-radius: 9999px; background: #fff; appearance: none; }
-.hm-sw-viewer-slider::-moz-range-thumb { box-sizing: border-box; width: 18px; height: 18px; border: 2px solid var(--hm-sw-viewer-panel-switch-on); border-radius: 9999px; background: #fff; }
-.hm-sw-theme .hm-sw-viewer-slider:focus-visible { outline: 2px solid var(--hm-sw-viewer-panel-switch-on); outline-offset: 2px; }
+/* SWSelect inside viewer panels reads the viewer panel tokens (same values; viewer theme overrides follow). */
+.hm-sw-viewer-panel { --hm-sw-select-border-color: var(--hm-sw-viewer-panel-inner-border); --hm-sw-select-background: var(--hm-sw-viewer-panel-field-background); --hm-sw-select-text: var(--hm-sw-viewer-panel-text); }
+/* Viewer rows dim a disabled field as a whole (SWViewerField 50%); the slider keeps its own opacity as before. */
+.hm-sw-theme .hm-sw-viewer-slider:disabled { opacity: 1; }
 
 .hm-sw-theme .hm-sw-viewer-button {
   display: inline-flex;