style(storybook): unify page hierarchy and compact layouts

src/foundation/foundation.css

@@ -49,11 +49,11 @@
 .hm-foundation .hm-company-grid > #company-jangheon-industry { grid-column-start: 1; }
 .hm-foundation .hm-brand-color-row[data-company-id] { display: grid; gap: 8px; overflow: visible; padding-bottom: 0; grid-template-columns: repeat(auto-fill, minmax(max(100px, (100% - 16px) / 3), 1fr)); }
 
-/* Typography: compact specification page. Font Family one line, Font Weight small cards, Specimens as comparison tables
-   (two columns on wide screens, stacked rows on narrow screens). */
+/* Typography: compact specification page. Font Family one line, Font Weight as three plain columns (no card box; the
+   section divider already frames them), Specimens as comparison tables (two columns on wide screens, stacked rows on narrow screens). */
 .hm-foundation .hm-typo-family { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 0; }
-.hm-foundation .hm-typo-weights { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
-.hm-foundation .hm-typo-weight { padding: 12px 16px; }
+.hm-foundation .hm-typo-weights { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px 24px; }
+.hm-foundation .hm-typo-weight { min-width: 0; }
 .hm-foundation .hm-typo-weight p { margin: 0; }
 .hm-foundation .hm-typo-weight-preview { margin: 4px 0 !important; font-size: var(--hm-card-title-font-size); line-height: var(--hm-card-title-line-height); }
 .hm-foundation .hm-typo-tables { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 32px; align-items: start; }
@@ -73,10 +73,9 @@
 }
 
 /* Layout: compact specification page (PC: three bands; narrow screens stack and scroll naturally).
-   Tightening applies only inside .hm-layout-ref; the common Story page and other Foundation pages are unchanged. No fixed heights or clipping. */
-.hm-foundation .hm-layout-ref { display: grid; gap: 32px; word-break: keep-all; }
+   Section header spacing and the section gap come from the common Story page; the bands only own their grid. No fixed heights or clipping. */
+.hm-foundation .hm-layout-ref { display: grid; gap: var(--sb-page-section-gap); word-break: keep-all; }
 .hm-foundation .hm-layout-ref .sb-page-section { margin-top: 0; }
-.hm-foundation .hm-layout-ref .sb-page-section-header { padding-bottom: 8px; margin-bottom: 12px; }
 .hm-foundation .hm-layout-ref p, .hm-foundation .hm-layout-ref h3 { margin: 0; }
 .hm-foundation .hm-layout-ref .hm-foundation-card, .hm-foundation .hm-layout-ref .hm-foundation-panel { padding: 8px 16px; }
 .hm-foundation .hm-layout-ref code { font-size: var(--hm-button-font-size-sm); color: var(--hm-sem-fg-secondary); }