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-footer/assets/menu-add-hover.svg

@@ -0,0 +1,12 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="28" height="12" viewBox="0 0 28 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="btn_add">
+<g id="Union">
+<path d="M15 5V1H13L13 5H9V7H13L13 11H15V7H19V5H15Z" fill-rule="evenodd" clip-rule="evenodd" fill="#FF5C00"/>
+<mask id="stroke0_0_402" maskUnits="userSpaceOnUse" x="8" y="0" width="12" height="12" fill="black">
+<rect fill="white" x="8" width="12" height="12"/>
+<path d="M15 5V1H13L13 5H9V7H13L13 11H15V7H19V5H15Z" fill-rule="evenodd" clip-rule="evenodd"/>
+</mask>
+<path d="M15 1V5H19V7H15V11H13L13 7H9V5H13L13 1H15Z" stroke-width="2" stroke="black" mask="url(#stroke0_0_402)"/>
+</g>
+</g>
+</svg>

packages/sw/src/components/sw-header/components/SWHeaderPropertyPanel.tsx

@@ -176,7 +176,8 @@ export function useSWHeaderOverlay(anchorRef: RefObject<HTMLElement | null> | un
   return { panelRef, style }
 }
 
-function PropertyEditor({ property, onChange, menus }: { property: SWHeaderProperty; onChange?: SWHeaderPropertyPanelProps["onPropertyChange"]; menus?: SWHeaderPropertyMenus }) {
+/** One property window row (label + field / picker). Also SWPopupPropertyRow (2026-10-20). */
+export function PropertyEditor({ property, onChange, menus }: { property: SWHeaderProperty; onChange?: SWHeaderPropertyPanelProps["onPropertyChange"]; menus?: SWHeaderPropertyMenus }) {
   const inputId = useId()
   const inputRef = useRef<HTMLInputElement>(null)
   const { type, value, disabled, mixed, readOnly, unit } = property

packages/sw/src/components/sw-popup/SWPopup.tsx

@@ -1,5 +1,5 @@
 import { cloneElement, isValidElement, type HTMLAttributes, type MouseEvent, type ReactNode, type RefObject } from "react"
-import { SWPopupFrame } from "../sw-header/components/SWHeaderPropertyPanel"
+import { PropertyEditor, SWPopupFrame, type SWHeaderProperty, type SWHeaderPropertyMenus } from "../sw-header/components/SWHeaderPropertyPanel"
 
 export interface SWPopupProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
   /** Title text (700, #FFC600, ellipsis). */
@@ -99,3 +99,26 @@ export function SWPopupRow({ label, htmlFor, unit, field = "box", numeric, readO
     </div>
   )
 }
+
+export interface SWPopupPropertyRowProps {
+  /** One property (the SWHeaderPropertyPanel record): name, value, type and, for layer / color / line style, `picker`. */
+  property: SWHeaderProperty
+  /** Lists and callbacks of the field dropdowns (layers, colors, line types …), as in SWHeaderPropertyPanel. */
+  menus?: SWHeaderPropertyMenus
+  /** Validated commit of the row (value = the chosen row id or the entered value). The host updates `property`. */
+  onPropertyChange?: (property: SWHeaderProperty, value: string) => void
+  className?: string
+}
+
+/**
+ * A property window row inside SWPopup / SWPopupSection (2026-10-20): the popup field controls of the property window
+ * (Figma 26:12250 layer, 26:12170 color, 26:12388 line style, number / text / select fields) with their popup look
+ * and behavior. Use it for layer / color pickers in a popup; the SWHeader field dropdowns are header-only.
+ */
+export function SWPopupPropertyRow({ property, menus, onPropertyChange, className }: SWPopupPropertyRowProps) {
+  return (
+    <div className={`hm-sw-property__editor${className ? ` ${className}` : ""}`}>
+      <PropertyEditor property={property} onChange={onPropertyChange} menus={menus} />
+    </div>
+  )
+}

packages/sw/src/components/sw-select/SWSelect.tsx

@@ -0,0 +1,35 @@
+import { forwardRef, type ReactNode, type SelectHTMLAttributes } from "react"
+
+export interface SWSelectOption {
+  value: string
+  /** Shown text. Default `value`. */
+  label?: string
+  disabled?: boolean
+}
+
+export interface SWSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "value" | "defaultValue" | "onChange"> {
+  /** Controlled value. */
+  value?: string
+  /** Uncontrolled initial value. */
+  defaultValue?: string
+  /** Options as data. `children` (`<option>` elements) can be used instead. */
+  options?: readonly SWSelectOption[]
+  /** The chosen value (native `change`: pointer, keyboard and the OS list). */
+  onValueChange?: (value: string) => void
+  children?: ReactNode
+}
+
+/**
+ * HMDesign SW select (2026-10-20): a native select with the panel field look of the SW popups (28px, 1px inner-border
+ * line, 4px radius, content surface, 12px text, the platform arrow and option list). For SWPopupRow (`field="none"`),
+ * SWViewerField and any SWTheme content; tokens `--hm-sw-select-*`.
+ */
+export const SWSelect = forwardRef<HTMLSelectElement, SWSelectProps>(function SWSelect(
+  { options, onValueChange, className, children, ...rest }, ref,
+) {
+  return (
+    <select ref={ref} className={`hm-sw-select${className ? ` ${className}` : ""}`} onChange={event => onValueChange?.(event.currentTarget.value)} {...rest}>
+      {options ? options.map(option => <option key={option.value} value={option.value} disabled={option.disabled}>{option.label ?? option.value}</option>) : children}
+    </select>
+  )
+})

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} />
+  )
+})

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"> {

packages/sw/src/index.ts

@@ -7,9 +7,13 @@ export {
   type SWToolButtonProps, type SWToolButtonAppearance, type SWToolGroupProps,
 } from "./components/sw-tool/SWTool"
 export {
-  SWPopup, SWPopupSection, SWPopupRow,
-  type SWPopupProps, type SWPopupSectionProps, type SWPopupRowProps,
+  SWPopup, SWPopupSection, SWPopupRow, SWPopupPropertyRow,
+  type SWPopupProps, type SWPopupSectionProps, type SWPopupRowProps, type SWPopupPropertyRowProps,
 } from "./components/sw-popup/SWPopup"
+// SW slider (2026-10-20): one native range with the popup gauge (`panel`) or the property window gauge (`property`).
+export { SWSlider, type SWSliderProps, type SWSliderAppearance } from "./components/sw-slider/SWSlider"
+// SW select (2026-10-20): the native panel select of the SW popups (Popup 도면 설정 = Viewer 축척 지정 단위).
+export { SWSelect, type SWSelectProps, type SWSelectOption } from "./components/sw-select/SWSelect"
 export * from "./components/sw-home-menu"
 
 // SW viewer mode (2026-10-19): viewer header, dropdown, popup panel and panel controls.

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

@@ -32,7 +32,10 @@
      hover ring (yellow gradient, 1px), user decision 2026-10-20. */
   --hm-sw-footer-aux-border: linear-gradient(180deg, #886d35 0%, #423625 8.85%, #f3dba8 26.17%, #0e0b06 83.79%, #574b30 100%);
   --hm-sw-footer-aux-hover-border: var(--hm-sw-header-hover-border-gradient);
-  --hm-sw-footer-aux-pressed-border: linear-gradient(180deg, #da6813 8.52%, #ffbb89 37.93%, #e5690d 71.85%, #ae3607 92.77%);
+  /* Figma gra-border-orange (one value): the selected border of the auxiliary toggles, the Model tab surface and the
+     hover surface of the Layout tabs and their + (2026-10-20), the hover ring of the side buttons. */
+  --hm-sw-footer-gra-border-orange: linear-gradient(180deg, #da6813 8.52%, #ffbb89 37.93%, #e5690d 71.85%, #ae3607 92.77%);
+  --hm-sw-footer-aux-pressed-border: var(--hm-sw-footer-gra-border-orange);
   /* Icon fill (Default #F1EDE5, selected = --hm-sw-footer-accent #FF5C00); the black 90% outline never changes. */
   --hm-sw-footer-aux-icon-color: #f1ede5;
 
@@ -126,7 +129,10 @@
   border-radius: var(--hm-sw-footer-group-radius) 0 0 0;
   background: var(--hm-sw-footer-group-background);
 }
-.hm-sw-footer__vacant { position: absolute; top: 1px; right: 0; bottom: 0; background: var(--hm-sw-footer-vacant-background); pointer-events: none; }
+/* The vacant surface covers the slot row only (2026-10-20): it used to run under the category row, where the open
+   pocket of the current tab showed it, so a pocket crossing the last command's edge (e.g. 수정 with one command) was
+   split into the group surface and the vacant surface. Every pocket now shows the same group surface. */
+.hm-sw-footer__vacant { position: absolute; top: 1px; right: 0; height: calc(var(--hm-sw-footer-slot-height) - 1px); background: var(--hm-sw-footer-vacant-background); pointer-events: none; }
 .hm-sw-footer__scroll {
   position: relative;
   flex: 0 1 auto;
@@ -173,10 +179,23 @@
 .hm-sw-footer-side[data-side="end"] { filter: drop-shadow(calc(-1 * var(--hm-sw-footer-side-shadow-offset)) 0 8px rgba(0, 0, 0, 0.6)); }
 .hm-sw-footer-side__title { text-shadow: var(--hm-sw-header-text-outline); }
 .hm-sw-footer-side__subtitle { text-shadow: var(--hm-sw-header-label-outline); }
-/* Not in Figma: hover / selected reuse the footer accent (#FF5C00) of the slot and category hover. */
-.hm-sw-footer-side:hover:not(:disabled) .hm-sw-footer-side__title,
-.hm-sw-footer-side[aria-pressed="true"] .hm-sw-footer-side__title,
-.hm-sw-footer-side[aria-expanded="true"] .hm-sw-footer-side__title { color: var(--hm-sw-footer-accent); }
+/* Not in Figma: hover / selected reuse the footer rules: the whole button lights up, both text lines in the accent
+   (#FF5C00) and the orange ring of a selected auxiliary toggle over the frame (2026-10-20; was the title only). Size,
+   face and shadow are unchanged; disabled keeps the default look. */
+.hm-sw-footer-side::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border: 1px solid transparent;
+  background: var(--hm-sw-footer-gra-border-orange) border-box;
+  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
+  opacity: 0;
+  pointer-events: none;
+}
+.hm-sw-footer-side:is(:hover:not(:disabled), [aria-pressed="true"], [aria-expanded="true"])::after { opacity: 1; }
+.hm-sw-footer-side:is(:hover:not(:disabled), [aria-pressed="true"], [aria-expanded="true"]) :is(.hm-sw-footer-side__title, .hm-sw-footer-side__subtitle) { color: var(--hm-sw-footer-accent); }
 
 /* ---------- Auxiliary toggles (객체스냅 …) ---------- */
 .hm-sw-footer-aux {
@@ -373,13 +392,24 @@
 .hm-sw-footer-menu__tab[aria-selected="true"] { margin-right: 7px; }
 .hm-sw-footer-menu__tab[aria-selected="true"]:not(:first-of-type) { margin-left: 7px; }
 .hm-sw-footer-menu__add { position: relative; flex: 0 0 28px; width: 28px; height: 12px; margin-top: 6px; background: url("../components/sw-footer/assets/menu-add.svg") 0 0 / 28px 12px no-repeat; }
-/* Not in Figma: only Default of btn_add (26:9451) exists; hover keeps the asset (no invented look). */
+/* Not in Figma: only Default of btn_add (26:9451) exists. Hover (2026-10-20, user request): the + in the footer accent
+   (#FF5C00, same black outline), like the category tabs next to it. */
+.hm-sw-footer-menu__add:hover:not(:disabled) { background-image: url("../components/sw-footer/assets/menu-add-hover.svg"); }
 
 /* ---------- Layout tabs ---------- */
 .hm-sw-footer-tabs { display: flex; align-items: flex-end; gap: 1px; height: var(--hm-sw-footer-tab-height); font-size: var(--hm-sw-footer-tab-font-size); letter-spacing: 0.02em; }
 .hm-sw-footer-tabs__list { display: contents; }
 .hm-sw-footer-tabs__add { flex: 0 0 24px; width: 24px; height: 22px; background: url("../components/sw-footer/assets/tab-add.svg") 0 0 / 24px 22px no-repeat; }
-.hm-sw-footer-tabs__add:hover:not(:disabled) { background-image: url("../components/sw-footer/assets/tab-add-hover.svg"); }
+/* Hover (2026-10-20, user request): the Model / Layout orange surface in the button shape, the + keeps its outline. */
+.hm-sw-footer-tabs__add { position: relative; }
+.hm-sw-footer-tabs__add:hover:not(:disabled)::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: url("../components/sw-footer/assets/menu-add.svg") 50% 50% / 28px 12px no-repeat, var(--hm-sw-footer-gra-border-orange);
+  -webkit-mask: url("../components/sw-footer/assets/tab-add.svg") 0 0 / 24px 22px no-repeat;
+  mask: url("../components/sw-footer/assets/tab-add.svg") 0 0 / 24px 22px no-repeat;
+}
 .hm-sw-footer-tab { position: relative; flex: 0 0 auto; display: flex; height: 22px; color: var(--hm-sw-footer-tab-text); }
 .hm-sw-footer-tab__select {
   position: relative;
@@ -431,7 +461,8 @@
 .hm-sw-footer-tab[data-shape="rounded"][data-state="on"] { background: var(--hm-sw-footer-tab-on-background); }
 .hm-sw-footer-tab[data-shape="rounded"][data-state="editing"] { background: var(--hm-sw-footer-tab-editing-background); }
 .hm-sw-footer-tab[data-shape="rounded"]:is(:hover, [data-state="editing"])::after { border-color: var(--hm-sw-footer-tab-hover-border-color); }
-.hm-sw-footer-tab[data-shape="rounded"][data-state="off"]:hover { background: linear-gradient(var(--hm-sw-footer-tab-hover-overlay), var(--hm-sw-footer-tab-hover-overlay)), var(--hm-sw-footer-tab-background); }
+/* Hover, not selected (2026-10-20, user request): the Model orange surface; text as on Model (below). */
+.hm-sw-footer-tab[data-shape="rounded"][data-state="off"]:hover { background: var(--hm-sw-footer-gra-border-orange); }
 
 /* Slanted tab (layout01, next to Model): 97 × 22 mirrored bg asset + the 28px red close piece. */
 .hm-sw-footer-tab[data-shape="slant"] { width: 97px; }
@@ -450,7 +481,12 @@
 .hm-sw-footer-tab[data-shape="slant"] .hm-sw-footer-tab__remove:hover { background-image: url("../components/sw-footer/assets/tab-close-hover.svg"); }
 .hm-sw-footer-tab[data-shape="slant"][data-state="on"]::before { background-image: url("../components/sw-footer/assets/tab-slant-on.svg"); }
 .hm-sw-footer-tab[data-shape="slant"][data-state="editing"]::before { background-image: url("../components/sw-footer/assets/tab-slant-editing.svg"); }
-.hm-sw-footer-tab[data-shape="slant"][data-state="off"]:hover::before { background-image: url("../components/sw-footer/assets/tab-slant-hover.svg"); }
+/* Hover, not selected (2026-10-20, user request): the Model orange surface in the slanted shape. */
+.hm-sw-footer-tab[data-shape="slant"][data-state="off"]:hover::before {
+  background: var(--hm-sw-footer-gra-border-orange);
+  -webkit-mask: url("../components/sw-footer/assets/tab-slant.svg") 0 0 / 97px 22px no-repeat;
+  mask: url("../components/sw-footer/assets/tab-slant.svg") 0 0 / 97px 22px no-repeat;
+}
 .hm-sw-footer-tab[data-shape="slant"][data-state="off"]:hover::after { background-image: url("../components/sw-footer/assets/tab-slant-ring.svg"); }
 /* layout01 Variant6 (editing + hover): the fill without its own ring and the orange ring on top. */
 .hm-sw-footer-tab[data-shape="slant"][data-state="editing"]:hover::before { background-image: url("../components/sw-footer/assets/tab-slant-editing-fill.svg"); }
@@ -458,7 +494,9 @@
 .hm-sw-footer-tab[data-shape="slant"] + .hm-sw-footer-tab--model { margin-left: -9px; }
 
 /* Text per state (Figma layout01 / layout02 variants). */
-.hm-sw-footer-tab:is([data-state="on"], [data-state="editing"], :hover) .hm-sw-footer-tab__select {
+/* Selected / editing Layout tabs (light text on brown / black) keep the 70% outline. Hover of a tab that is not
+   selected and the Model tab draw their text exactly as the Default (2026-10-20): only the surface changes. */
+.hm-sw-footer-tab:not(.hm-sw-footer-tab--model):is([data-state="on"], [data-state="editing"]) .hm-sw-footer-tab__select {
   text-shadow:
     1.3px 0 0 var(--hm-sw-footer-tab-outline-color), 0.92px 0.92px 0 var(--hm-sw-footer-tab-outline-color),
     0 1.3px 0 var(--hm-sw-footer-tab-outline-color), -0.92px 0.92px 0 var(--hm-sw-footer-tab-outline-color),
@@ -467,12 +505,13 @@
 }
 .hm-sw-footer-tab[data-state="on"] { color: var(--hm-sw-footer-text); }
 .hm-sw-footer-tab[data-state="editing"] { color: var(--hm-sw-footer-red); }
-.hm-sw-footer-tab[data-shape="rounded"]:not([data-state="editing"]):hover,
-.hm-sw-footer-tab[data-shape="slant"][data-state="on"]:hover,
-.hm-sw-footer-tab--model:hover:not([data-state="on"]) { color: var(--hm-sw-footer-accent); }
-/* layout01 hover (not selected): orange tab, black text with the 70% outline. */
-.hm-sw-footer-tab[data-shape="slant"][data-state="off"]:hover { color: #000; }
-.hm-sw-footer-tab[data-shape="slant"][data-state="off"]:hover .hm-sw-footer-tab__select { text-shadow: none; }
+.hm-sw-footer-tab[data-shape="rounded"][data-state="on"]:hover,
+.hm-sw-footer-tab[data-shape="slant"][data-state="on"]:hover { color: var(--hm-sw-footer-accent); }
+/* On the orange surface (Model selected or hovered, Layout hovered, 2026-10-20 user decision): the Default tab text,
+   black #161410 without outline, in the inherited tab size and weight (no size or weight of its own), so hover never
+   changes the text, its size or its place. */
+.hm-sw-footer-tab:is([data-shape="rounded"], [data-shape="slant"])[data-state="off"]:hover,
+.hm-sw-footer-tab--model:is([data-state="on"], :hover) { color: var(--hm-sw-footer-tab-text); }
 /* layout01 "on hover" draws the default beige surface under the orange text. */
 .hm-sw-footer-tab[data-shape="slant"][data-state="on"]:hover::before { background-image: url("../components/sw-footer/assets/tab-slant.svg"); }
 /* The × appears on hover (all shapes) and in no other state (Figma opacity 0). */
@@ -481,7 +520,18 @@
 
 /* Model (26:9914): 73 × 22 asset, label 22px from the left. */
 .hm-sw-footer-tab--model { width: 73px; background: url("../components/sw-footer/assets/tab-model.svg") 0 0 / 73px 22px no-repeat; }
-.hm-sw-footer-tab--model[data-state="on"] { background-image: url("../components/sw-footer/assets/tab-model-on.svg"); }
+/* Selected and hovered (2026-10-20, user request; was the brown model On 26:9925): the gra-border-orange surface in the
+   Model shape. */
+.hm-sw-footer-tab--model:is([data-state="on"], :hover) { background-image: none; }
+.hm-sw-footer-tab--model:is([data-state="on"], :hover)::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--hm-sw-footer-gra-border-orange);
+  -webkit-mask: url("../components/sw-footer/assets/tab-model.svg") 0 0 / 73px 22px no-repeat;
+  mask: url("../components/sw-footer/assets/tab-model.svg") 0 0 / 73px 22px no-repeat;
+  pointer-events: none;
+}
 .hm-sw-footer-tab--model .hm-sw-footer-tab__select { min-width: 0; width: 100%; padding: 0 16px 0 22px; }
 
 /* ---------- Command line ---------- */

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;

packages/sw/src/theme/sw.css

@@ -100,6 +100,17 @@
   --hm-sw-property-range-fill-edge: #000;
   --hm-sw-property-range-track: linear-gradient(#aea28b 0 1px, #c3b9a4 1px 2px, #c7bda9 2px 4px, #b7ac96 4px 5px, #ac9e84 5px);
   --hm-sw-property-range-highlight: #eadec8;
+  /* SWSlider appearance "panel" (2026-10-20): the gauge the SW popup used so far (HM UI Slider: 6px #E0DACE
+     track, #266651 range, 18px white thumb with a 2px #266651 ring), the same shape as SWViewerSlider. Existing
+     values only (#E0DACE = popup scrollbar track, #266651 = viewer panel accent). Appearance "property" uses the
+     --hm-sw-property-range-* tokens above. */
+  --hm-sw-slider-panel-track: #e0dace;
+  --hm-sw-slider-panel-range: #266651;
+  --hm-sw-slider-panel-thumb: #fff;
+  /* SWSelect (2026-10-20): the panel field values of the viewer 축척 지정 select (property inner border / content). */
+  --hm-sw-select-border-color: var(--hm-sw-property-inner-border);
+  --hm-sw-select-background: var(--hm-sw-property-content);
+  --hm-sw-select-text: var(--hm-sw-property-label);
 
   /* User-confirmed: document (file name) surface */
   --hm-sw-header-document-background: linear-gradient(180deg, #081813 0%, #09271e 8.69%, #0b3227 25.43%, #0e3d2f 51.25%, #0b3227 80.03%, #0a2b21 89.76%, #081813 100%);
@@ -1541,20 +1552,25 @@ div.hm-sw-header__menu-row { justify-content: space-between; gap: 8px; padding-l
 .hm-sw-property__value { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
 .hm-sw-property__value > .hm-sw-header__input { width: auto; max-width: 100%; min-width: 0; flex: 1; text-shadow: none; letter-spacing: .02em; font-weight: 500; }
 .hm-sw-property__value > .hm-sw-header__input:focus { color: var(--hm-sw-header-input-color); }
-.hm-sw-property__value > select { flex: 1; min-width: 0; width: 0; height: 28px; padding: 0; appearance: none; border: 1px solid transparent; border-radius: 2px; background: transparent; color: var(--hm-sw-header-input-color); font: inherit; }
-.hm-sw-property__value > select:disabled { opacity: 1; appearance: none; color: var(--hm-sw-header-input-color); }
-.hm-sw-property__value > select:focus { background: var(--hm-sw-property-content); border-color: var(--hm-sw-property-inner-border); }
+.hm-sw-property__value > select:not(.hm-sw-select) { flex: 1; min-width: 0; width: 0; height: 28px; padding: 0; appearance: none; border: 1px solid transparent; border-radius: 2px; background: transparent; color: var(--hm-sw-header-input-color); font: inherit; }
+.hm-sw-property__value > select:not(.hm-sw-select):disabled { opacity: 1; appearance: none; color: var(--hm-sw-header-input-color); }
+.hm-sw-property__value > select:not(.hm-sw-select):focus { background: var(--hm-sw-property-content); border-color: var(--hm-sw-property-inner-border); }
+/* SWSelect: native select, panel field look; focus = the SW popup focus ring. */
+.hm-sw-select { flex: 0 0 auto; height: 28px; padding: 0 8px; border: 1px solid var(--hm-sw-select-border-color); border-radius: 4px; background: var(--hm-sw-select-background); color: var(--hm-sw-select-text); font: inherit; font-size: 12px; }
+.hm-sw-select:disabled { opacity: 0.4; cursor: default; }
 .hm-sw-property__unit { flex: 0 0 auto; font-size: 12px; white-space: nowrap; }
 /* Color preview (26:12175): 70 x 16 black tile (1px padding, radius 2), 68 x 14 swatch with a white 1px border. */
 .hm-sw-property__swatch-area { display: flex; align-items: center; flex: 0 0 auto; }
 .hm-sw-property__swatch { display: block; flex: 0 0 70px; width: 70px; height: 16px; padding: 1px; border-radius: 2px; background: #000; }
 .hm-sw-property__swatch > i { display: block; height: 14px; border: 1px solid #fff; border-radius: 1px; }
-.hm-sw-property__value > input[type="range"] { appearance: none; flex: 0 0 86px; width: 86px; height: 16px; margin: 0; background: transparent; cursor: pointer; }
+/* Property window gauge, also SWSlider appearance="property" (2026-10-20, same rules; the 86px width is the property row only). */
+.hm-sw-property__value > input[type="range"]:not(.hm-sw-slider) { flex: 0 0 86px; width: 86px; }
+:is(.hm-sw-property__value > input[type="range"]:not(.hm-sw-slider), .hm-sw-slider[data-appearance="property"]) { appearance: none; height: 16px; margin: 0; background: transparent; cursor: pointer; }
 /* --hm-sw-range-fill (0-1) is set from the value; the red ends under the thumb centre (14px thumb).
    The 3px radius rounds the fill's left cap; the first layer is its left stroke. Track and thumb are
    shared values, painted once per engine: WebKit/Blink track + thumb, Gecko track + thumb (Gecko's
    ::-moz-range-progress is kept empty so the fill is never painted twice). */
-.hm-sw-property__value > input[type="range"] {
+:is(.hm-sw-property__value > input[type="range"]:not(.hm-sw-slider), .hm-sw-slider[data-appearance="property"]) {
   --hm-sw-range-fill-width: calc(7px + (100% - 14px) * var(--hm-sw-range-fill, 0));
   --hm-sw-range-track-paint:
     linear-gradient(90deg, var(--hm-sw-property-range-fill-edge) 0 1px, transparent 1px) 0 0 / var(--hm-sw-range-fill-width) 100% no-repeat,
@@ -1563,11 +1579,31 @@ div.hm-sw-header__menu-row { justify-content: space-between; gap: 8px; padding-l
   --hm-sw-range-thumb-paint: url("../assets/property-range-thumb.svg") center / 14px 14px no-repeat;
   --hm-sw-range-thumb-shadow: 0 0 3px #1c1a16, 0 2px 2px rgba(28, 26, 22, .4);
 }
-.hm-sw-property__value > input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--hm-sw-range-track-paint); box-shadow: 0 1px 0 var(--hm-sw-property-range-highlight); }
-.hm-sw-property__value > input[type="range"]::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; margin-top: -4px; border: 0; border-radius: 50%; background: var(--hm-sw-range-thumb-paint); box-shadow: var(--hm-sw-range-thumb-shadow); }
-.hm-sw-property__value > input[type="range"]::-moz-range-track { box-sizing: border-box; height: 6px; border: 0; border-radius: 3px; background: var(--hm-sw-range-track-paint); box-shadow: 0 1px 0 var(--hm-sw-property-range-highlight); }
-.hm-sw-property__value > input[type="range"]::-moz-range-progress { height: 0; background: transparent; }
-.hm-sw-property__value > input[type="range"]::-moz-range-thumb { box-sizing: border-box; width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--hm-sw-range-thumb-paint); box-shadow: var(--hm-sw-range-thumb-shadow); }
+:is(.hm-sw-property__value > input[type="range"]:not(.hm-sw-slider), .hm-sw-slider[data-appearance="property"])::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--hm-sw-range-track-paint); box-shadow: 0 1px 0 var(--hm-sw-property-range-highlight); }
+:is(.hm-sw-property__value > input[type="range"]:not(.hm-sw-slider), .hm-sw-slider[data-appearance="property"])::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; margin-top: -4px; border: 0; border-radius: 50%; background: var(--hm-sw-range-thumb-paint); box-shadow: var(--hm-sw-range-thumb-shadow); }
+:is(.hm-sw-property__value > input[type="range"]:not(.hm-sw-slider), .hm-sw-slider[data-appearance="property"])::-moz-range-track { box-sizing: border-box; height: 6px; border: 0; border-radius: 3px; background: var(--hm-sw-range-track-paint); box-shadow: 0 1px 0 var(--hm-sw-property-range-highlight); }
+:is(.hm-sw-property__value > input[type="range"]:not(.hm-sw-slider), .hm-sw-slider[data-appearance="property"])::-moz-range-progress { height: 0; background: transparent; }
+:is(.hm-sw-property__value > input[type="range"]:not(.hm-sw-slider), .hm-sw-slider[data-appearance="property"])::-moz-range-thumb { box-sizing: border-box; width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--hm-sw-range-thumb-paint); box-shadow: var(--hm-sw-range-thumb-shadow); }
+/* SWSlider (2026-10-20): one native range, two looks. Fills the row by default (the host may set a width).
+   appearance="panel" is the gauge the SW popup used (also SWViewerSlider): the range is painted up to
+   --hm-sw-range-fill of the track. */
+.hm-sw-slider { flex: 1 1 auto; width: 100%; min-width: 0; }
+.hm-sw-slider:disabled { opacity: 0.4; cursor: default; }
+.hm-sw-slider[data-appearance="panel"] {
+  --hm-sw-slider-percent: calc(var(--hm-sw-range-fill, 0) * 100%);
+  height: 18px;
+  margin: 0;
+  background: transparent;
+  appearance: none;
+  cursor: pointer;
+}
+.hm-sw-slider[data-appearance="panel"]:disabled { cursor: default; }
+.hm-sw-slider[data-appearance="panel"]::-webkit-slider-runnable-track { height: 6px; border-radius: 9999px; background: linear-gradient(90deg, var(--hm-sw-slider-panel-range) var(--hm-sw-slider-percent), var(--hm-sw-slider-panel-track) var(--hm-sw-slider-percent)); }
+.hm-sw-slider[data-appearance="panel"]::-moz-range-track { height: 6px; border-radius: 9999px; background: var(--hm-sw-slider-panel-track); }
+.hm-sw-slider[data-appearance="panel"]::-moz-range-progress { height: 6px; border-radius: 9999px; background: var(--hm-sw-slider-panel-range); }
+.hm-sw-slider[data-appearance="panel"]::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -6px; border: 2px solid var(--hm-sw-slider-panel-range); border-radius: 9999px; background: var(--hm-sw-slider-panel-thumb); appearance: none; }
+.hm-sw-slider[data-appearance="panel"]::-moz-range-thumb { box-sizing: border-box; width: 18px; height: 18px; border: 2px solid var(--hm-sw-slider-panel-range); border-radius: 9999px; background: var(--hm-sw-slider-panel-thumb); }
+.hm-sw-slider[data-appearance="panel"]:focus-visible { outline: 2px solid var(--hm-sw-slider-panel-range); outline-offset: 2px; }
 .hm-sw-property__value > .hm-sw-header__line-preview { flex-basis: 68px; width: 68px; }
 .hm-sw-property__expand { display: block; width: 100%; height: 12px; overflow: hidden; }
 .hm-sw-property__expand > img { display: block; width: 296px; height: 12px; margin-left: calc((100% - 296px) / 2); }