docs(sw): align AI docs and comments with the 2026-10-21 implementation

Documentation and comment-only changes (no component logic, Props or design change):
- VIEWER.md / AI_GUIDE / AI_USAGE / catalog / patterns: the two SWViewerHeader versions
  (default, and minimize/close with SWHeaderWindowControls at the end of `trailing`);
  the earlier "never mix SWHeader parts" rule now names this approved exception.
- collapseBelow / iconOnlyBelow (types.ts JSDoc, VIEWER.md, AI_GUIDE): measured steps,
  the numbers only set the order, not pixel breakpoints. Viewer file open is the
  onDocumentOpen button (logoMenu is compatibility only).
- COMPONENT_CATALOG / DESIGN_RULES: recent files show at most 3 rows; preview caption is
  previewTitle or path + file name; body is the red no-preview sign on the brown panel;
  preview / renderPreview are accepted but not rendered (JSDoc updated to match).
- packages/sw/README.md and sw-header-usage.md: current Story list and counts (40, 14
  shown + 26 verification); 760px+ no-More condition; read-only Property Bar values as
  <output>.
- SWHeader.tsx comment: titles are kept (not hidden) from 760px up.
- AI_GUIDE synced into the package ai/ copies (npm run sync:ai-docs).

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

@@ -321,7 +321,8 @@ export const SWHeader = forwardRef<HTMLElement, SWHeaderProps>(function SWHeader
   const baseMenu = menuIds.includes("layer") ? "layer" : menuIds[0]
   const validPromoted = promoted && enabled(promoted) ? promoted : null
   // 2026-10-21 (user decision): no responsive More from 760px up. Nothing moves out of the header there; narrower headers
-  // hide the field titles, then shrink the file name, then the field values (ellipsis, sw.css "Responsive"). Below 760px
+  // keep the field titles (they and the values ellipsize), hide the 그리기모드 text and pictures, then shrink the file
+  // name, then the field values (ellipsis, sw.css "Responsive"). Below 760px
   // (phones, e.g. 390) the former breakpoints and More are unchanged.
   const breakpointOverflowAt = (id: SWHeaderControlId, width: number) => width < MORE_BELOW && (id === "color" ? width < 900 : ["lineStyle", "textStyle", "dimensionStyle"].includes(id) ? width < 1800 : ["propertyBar", "propertyPanel", "details"].includes(id) ? width < 1080 : ["print", "popupGuide"].includes(id) ? width < 640 : id === "drawingMode" ? width < 1180 : false)
   const breakpointOverflow = (id: SWHeaderControlId) => breakpointOverflowAt(id, headerWidth)