style(sw): viewer popup typography, 전체 레이어 title and options layout

- Property popup: row labels 14px 500, read-only values 14px in the panel text
  color, monospace removed; 일반 정보 / 기하 속성 groups 20px apart
  (--hm-sw-viewer-panel-spacing on the second section).
- Layer popup: 전체 레이어 is a plain SWViewerSection title (existing
  .hm-sw-viewer-section__title) with the all-layers switch on the same row;
  layer names 14px 500, no monospace.
- Options popup follows the user image: 표시 (LWDISPLAY), 표시 배율 with the
  px/mm unit on the input row, updated lineweight hints.
- Remove stray monospace font-family from SW Story CSS.
- VIEWER.md §4.1 / new §4.2, DESIGN_RULES §11, Example H aligned.

src/sw/sw-viewer-fixture.tsx

@@ -116,8 +116,11 @@ export function LayerPanel({ demo, ...placement }: { demo: ViewerDemo } & PanelP
       <SWViewerSection surface="plain" aria-label="레이어 목록">
         <div className="sw-viewer-story-toolbar">
           <SWViewerInput type="search" placeholder="레이어 검색" aria-label="레이어 검색" value={query} onChange={event => setQuery(event.currentTarget.value)} />
-          <SWViewerField label="전체 레이어">{id => <SWViewerSwitch id={id} checked={allVisible}
-            onCheckedChange={next => { set(next ? [] : LAYERS.map(layer => layer.name)); demo.record(`layer:all=${next}`) }} />}</SWViewerField>
+          {/* 2026-10-22: the section title (.hm-sw-viewer-section__title) names the switch row; the switch stays on that line. */}
+          <SWViewerSection surface="plain" title="전체 레이어" className="sw-viewer-story-all">
+            <SWViewerSwitch aria-label="전체 레이어" checked={allVisible}
+              onCheckedChange={next => { set(next ? [] : LAYERS.map(layer => layer.name)); demo.record(`layer:all=${next}`) }} />
+          </SWViewerSection>
         </div>
         {filtered.length === 0 ? <SWViewerHint>검색 결과가 없습니다 ("{query}")</SWViewerHint> : (
           <ul className="sw-viewer-story-list">
@@ -145,9 +148,9 @@ export function LayerPanel({ demo, ...placement }: { demo: ViewerDemo } & PanelP
   )
 }
 
-function SliderRow({ label, value, min, max, step, disabled, onChange }: { label: string; value: number; min: number; max: number; step: number; disabled?: boolean; onChange: (value: number) => void }) {
+function SliderRow({ label, unit, value, min, max, step, disabled, onChange }: { label: string; unit?: string; value: number; min: number; max: number; step: number; disabled?: boolean; onChange: (value: number) => void }) {
   return (
-    <SWViewerField label={label} layout="stacked" disabled={disabled}
+    <SWViewerField label={label} unit={unit} layout="stacked" disabled={disabled}
       below={<SWViewerSlider aria-label={label} value={value} min={min} max={max} step={step} onValueChange={onChange} />}>
       {id => <SWViewerInput id={id} type="number" min={min} max={max} step={step} value={value} onChange={event => { const next = Number(event.currentTarget.value); if (Number.isFinite(next)) onChange(next) }} />}
     </SWViewerField>
@@ -162,10 +165,11 @@ export function OptionsPanel({ demo, footer, ...placement }: { demo: ViewerDemo;
       headerActions={<SWViewerButton variant="ghost" aria-label="기본값으로" title="기본값으로" onClick={() => { setOptions(DEFAULT_OPTIONS); demo.record("options:reset") }}><RotateCcw size={16} /></SWViewerButton>}
       footer={footer ? <><SWViewerButton onClick={() => demo.toggle("options", false)}>취소</SWViewerButton><SWViewerButton variant="primary" onClick={() => { demo.record("options:apply"); demo.toggle("options", false) }}>적용</SWViewerButton></> : undefined}>
       <SWViewerSection title="선가중치">
-        <SWViewerField label="표시 사용">{id => <SWViewerSwitch id={id} checked={options.lineweightOn} onCheckedChange={lineweightOn => set({ lineweightOn })} />}</SWViewerField>
-        <SliderRow label="표시 배율 (px/mm)" value={options.lineweightScale} min={2} max={60} step={0.5} onChange={lineweightScale => set({ lineweightScale })} />
-        <SWViewerHint>이 도면에는 굵은 선이 없습니다 (0.50mm 였다면 {(0.5 * options.lineweightScale).toFixed(1)}px)</SWViewerHint>
-        <SWViewerHint>AutoCAD의 "선가중치 설정 → 표시 배율"과 동일합니다.</SWViewerHint>
+        {/* 2026-10-22 options image: LWDISPLAY toggle; scale input + px/mm unit on the label row, slider below. */}
+        <SWViewerField label="표시 (LWDISPLAY)">{id => <SWViewerSwitch id={id} checked={options.lineweightOn} onCheckedChange={lineweightOn => set({ lineweightOn })} />}</SWViewerField>
+        <SliderRow label="표시 배율" unit="px/mm" value={options.lineweightScale} min={2} max={60} step={0.5} onChange={lineweightScale => set({ lineweightScale })} />
+        <SWViewerHint>이 도면에는 굵은 선이 없습니다 (0.50mm였다면 {(0.5 * options.lineweightScale).toFixed(1)}px)</SWViewerHint>
+        <SWViewerHint>AutoCAD "선가중치 설정 → 표시 배율"과 같습니다. 모델 공간의 선가중치는 줌과 무관한 화면 픽셀로 그려지므로 화면 DPI에 맞춰 조정합니다.</SWViewerHint>
       </SWViewerSection>
       <SWViewerSection title="표시">
         <SWViewerField label="그리드">{id => <SWViewerSwitch id={id} checked={options.grid} onCheckedChange={grid => set({ grid })} />}</SWViewerField>
@@ -192,7 +196,7 @@ export function PropertiesPanel({ demo, selected = true, ...placement }: { demo:
       headerActions={selected ? <SWViewerButton variant="ghost" aria-label="선택 확대" title="선택 확대" onClick={() => demo.record("zoomToSelection (미연결)")}><ZoomIn size={16} /></SWViewerButton> : undefined}>
       {selected ? <>
         <SWViewerSection surface="plain" title="일반 정보 (General)"><SWViewerBadge>LINE · h=2F1A</SWViewerBadge>{rows(ENTITY_ROWS)}</SWViewerSection>
-        <SWViewerSection surface="plain" title="기하 속성 (Geometry)">{rows(GEOMETRY_ROWS)}</SWViewerSection>
+        <SWViewerSection surface="plain" title="기하 속성 (Geometry)" className="sw-viewer-story-props-next">{rows(GEOMETRY_ROWS)}</SWViewerSection>
       </> : (
         <div className="sw-viewer-story-empty"><MousePointerClick size={24} aria-hidden="true" />도면에서 객체(엔티티)를 클릭하면<br />상세 속성이 표시됩니다</div>
       )}