fix(storybook): refine SW notice placement and icon size

src/components/story-page.css

@@ -81,28 +81,24 @@
 .sb-page .sb-page-section-grid { display: grid; gap: var(--sb-page-section-gap) 24px; margin-top: var(--sb-page-section-gap); }
 .sb-page .sb-page-section-grid > .sb-page-section { margin-top: 0; }
 
-/* Notice above a page title (StoryNotice). Reuses .sb-page / .sb-page-inner (width and side margin are not redefined).
-   The frame drops its bottom gutter and pulls the next page up so the notice sits 24px above the page title. */
-.sb-page.sb-page-notice {
-  padding-bottom: 0;
-  margin-bottom: calc(24px - var(--sb-page-gutter));
-}
+/* Group notice under the page title (StoryNotice inside StoryPageHeader): 8px below the H1, same type and color as the
+   Page Header description (one level below the title), no box. The header's own bottom margin keeps the first section 24px below. */
 .sb-page .sb-notice {
   display: flex;
   align-items: flex-start;
-  gap: 8px;
-  margin: 0;
-  font-size: var(--hm-label-font-size);
-  line-height: var(--hm-label-line-height);
+  gap: 6px;
+  margin: var(--hm-page-header-description-gap) 0 0;
+  font-size: var(--hm-page-header-description-font-size);
+  line-height: var(--hm-page-header-description-line-height);
   font-weight: var(--hm-input-font-weight);
-  color: var(--hm-sem-fg-primary);
+  color: var(--hm-page-header-description-color);
   overflow-wrap: anywhere;
 }
 .sb-page .sb-notice-icon {
   flex: none;
-  width: 20px;
-  height: 20px;
-  /* centers the icon on the first text line even when the line height differs from 20px */
-  margin-block: calc((var(--hm-label-line-height) - 20px) / 2);
+  width: 14px;
+  height: 14px;
+  /* centers the 14px icon on the first text line (20px line height → 3px above and below) */
+  margin-block: calc((var(--hm-page-header-description-line-height) - 14px) / 2);
 }
 .sb-page .sb-notice-text { min-width: 0; }