feat(sw): viewer follow-up — SVG icon outline, shared SW popup frame, story grid, green layer buttons

- A: SWViewerIcon draws the SWHeader black outline as SVG stroke on a copy behind the icon (no CSS filter)
- B: SWViewerPanel renders the common SWPopup frame (same DOM / CSS) and adds drag, corner resize,
  collapse, bounds and modal; SWPopup gains optional titleActions / footer; title art spans any width
- C: shared Story canvas grid (--sw-story-canvas) behind the SW Header work area and dropdown room
- D: SWViewerButton tone="green" for 전체 켜기 / 전체 끄기: default kept, hover = primary (확인) hover
  token, pressed = primary face
- AI guide, verification scripts (76 checks, element regression) and evidence updated

src/sw/sw-stories.css

@@ -1,6 +1,9 @@
 /* Story canvas only: frames that simulate a header width. Never styles the header itself. */
 .sw-story-scroller { max-width: 100%; overflow-x: auto; }
 .sw-story-frame { background: #060606; }
+/* Shared drawing-area canvas of the SW Stories (2026-10-19): the SW/Viewer black grid — 40px cells, 1px lines of
+   HM green #266651 at 18%, on #0A0A0B. Used behind the SW Header work area and dropdown room and the viewer frames. */
+.sb-page { --sw-story-canvas: linear-gradient(rgba(38, 102, 81, 0.18) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, rgba(38, 102, 81, 0.18) 1px, transparent 1px) 0 0 / 40px 40px, #0a0a0b; }
 .sw-story-composed {
   display: flex;
   align-items: center;
@@ -10,7 +13,7 @@
   padding: 5px 8px;
   background: var(--hm-sw-header-object-background);
 }
-.sw-story-scroller--menu { padding-bottom: 360px; }
+.sw-story-scroller--menu { padding-bottom: 360px; background: var(--sw-story-canvas); }
 /* Only the two fixed dimension specimens use the full 1920px frame as their anchor. The shared
    runtime dropdown still clamps to the real viewport. Scroll the specimen to see its right edge. */
 .sw-story-fixed-dimension .hm-sw-header__list-menu--dimension-style { left: auto !important; right: 0; }
@@ -58,7 +61,7 @@
 .sw-overview-data { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-block: 8px; }
 .sw-overview-data label { display: inline-flex; align-items: center; gap: 4px; }
 .sw-overview-slot { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
-.sw-overview-stage { flex: 0 0 auto; overflow: auto; overscroll-behavior: contain; background: var(--hm-sem-bg-surface); outline: 1px solid var(--hm-sem-stroke-input-default); }
+.sw-overview-stage { flex: 0 0 auto; overflow: auto; overscroll-behavior: contain; background: var(--sw-story-canvas); outline: 1px solid var(--hm-sem-stroke-input-default); }
 .sw-overview-world { min-width: 390px; min-height: 100%; position: relative; }
 /* Placement-only Storybook exception: keep the original panel size/content in the Stage scroll area.
    Header's public API deliberately excludes panel style; package CSS and other Stories stay untouched. */