feat(sw): viewer layer bulb, popup toggle switch, footer layout and 1440px story inner

- SW Viewer layer popup: search + 전체 레이어 fixed, only the list scrolls; the all-layers
  control is the SWLayerVisibilityIcon bulb (role="switch"), one light #d2c8b4 line under it.
- Example H and the layer popup AI docs follow the bulb layout (VIEWER, DESIGN_RULES,
  COMPONENT_CATALOG, COMPOSITION_PATTERNS, AI_GUIDE sync).
- Popup toggle switch (Figma toggle_btn_new 633:75188 / 633:75902): one sw.css face for the
  HM UI Switch in SWPopup and SWViewerSwitch in SWViewerPanel; SW Header switches unchanged.
- SW Footer stories: no inner scrollers, fluid screens; workspace fits the viewport.
- SW Footer category tabs keep their positions when selected (divider slots kept, pocket
  edges drawn over the neighbours' padding).
- Storybook .sb-page-inner: 1440px max from 1920px (was 80vw).
- SW Header equal-split change was cancelled; header CSS unchanged.

Verified: check:ai-docs PASS, viewer test 49 PASS (1 FAIL hover face + timeout pre-existing),
footer-design-review 21 PASS, browser checks of switch/footer/inner.
Not verified: footer-popup-viewer-refinement (needs full Storybook build), text-weight/hover
tests, Switch 37x16 AI docs (deferred).

packages/sw/ai/examples/ExampleH-ViewerMode.tsx

@@ -36,8 +36,10 @@ export function ExampleHViewerMode({ onEvent }: { onEvent?: (name: string) => vo
     setHiddenLayers(next)
     onEvent?.(`layer:${name}=${!visible}`)
   }
-  // All-layers switch: ON only when every layer is shown. A partial state reads OFF, so turning it on shows all.
+  // All-layers bulb: ON only when every layer is shown. A partial state reads OFF, so turning it on shows all.
   const allVisible = hiddenLayers.size === 0
+  const [query, setQuery] = useState("")
+  const shownLayers = layers.filter(layer => layer.name.toLowerCase().includes(query.trim().toLowerCase()))
   const setAllLayers = (visible: boolean) => {
     setHiddenLayers(new Set(visible ? [] : layers.map(layer => layer.name)))
     onEvent?.(`layer:all=${visible}`)
@@ -74,14 +76,17 @@ export function ExampleHViewerMode({ onEvent }: { onEvent?: (name: string) => vo
           <SWViewerHeaderButton iconOnly icon={icons.info} label="정보" onClick={() => setAbout(true)} />
         </>} />
 
-      <SWViewerPanel title="레이어" open={panels.layers} onClose={() => setPanels({ ...panels, layers: false })}>
-        <SWViewerSection surface="plain" aria-label="레이어 목록">
-          {/* Top: all-layers SWViewerSwitch. Rows: swatch · name · count · bulb button (SWLayerVisibilityIcon), not a switch. */}
+      <SWViewerPanel title={`레이어 (${layers.length}개)`} open={panels.layers} onClose={() => setPanels({ ...panels, layers: false })}>
+        <SWViewerSection surface="plain" aria-label="레이어 목록" className="app-viewer-layer-popup">
+          {/* Fixed: search, then the all-layers bulb (same button + SWLayerVisibilityIcon as the rows, role="switch").
+              Only the list below scrolls. Rows: swatch · name · count · bulb button, never a switch. */}
+          <SWViewerInput type="search" className="app-viewer-layer-search" placeholder="레이어 검색" aria-label="레이어 검색" value={query} onChange={event => setQuery(event.currentTarget.value)} />
           <SWViewerSection surface="plain" title="전체 레이어" className="app-viewer-all-layers">
-            <SWViewerSwitch aria-label="전체 레이어" checked={allVisible} onCheckedChange={setAllLayers} />
+            <button type="button" role="switch" aria-checked={allVisible} aria-label="전체 레이어" className="app-viewer-layer-bulb"
+              title={allVisible ? "전체 숨기기" : "전체 표시하기"} onClick={() => setAllLayers(!allVisible)}><SWLayerVisibilityIcon on={allVisible} /></button>
           </SWViewerSection>
-          <ul className="app-viewer-layers">
-            {layers.map(layer => {
+          {shownLayers.length === 0 ? <SWViewerHint>검색 결과가 없습니다 ("{query}")</SWViewerHint> : <ul className="app-viewer-layers">
+            {shownLayers.map(layer => {
               const visible = !hiddenLayers.has(layer.name)
               return (
                 <li key={layer.name} data-visible={visible}>
@@ -94,7 +99,7 @@ export function ExampleHViewerMode({ onEvent }: { onEvent?: (name: string) => vo
                 </li>
               )
             })}
-          </ul>
+          </ul>}
         </SWViewerSection>
       </SWViewerPanel>