style(storybook): unify content hierarchy and section spacing

- Story page frame: H2 16/24/700 -> 12px -> divider -> 16px -> content, sections 28px apart;
  StorySectionGrid keeps its 24px column gap
- Content indent (--sb-page-indent 16px, 12px at 640px and below): .sb-page-indent for information
  blocks; group boards (StateBoard / CardBoard, data-sb-board) indented once per section block so
  per-column boards keep their 24px gap
- Input / Select / Toggle Sizes grids take the same indent; field Labels unchanged
- Full-width Pattern previews (GNB, LNB, Loading Screen, Page Header) opt out with indent={false}
- Foundation/폰트: Text Colors name / usage / HEX levels, Font Family and Font Weight token lines,
  Specimens row spacing and indent; specimen values unchanged
- Guideline and WORKING_CONTEXT updated

src/foundation/typography.stories.tsx

@@ -32,11 +32,12 @@ function toHex(value: string | undefined) {
   return rgb ? `#${rgb.slice(1).map(channel => Number(channel).toString(16).padStart(2, "0")).join("").toUpperCase()}` : value
 }
 
-// Same chip markup and classes as Foundation/한맥 컬러 and 가족사 컬러 (foundation.css): swatch, name, HEX.
+// Same chip classes as Foundation/한맥 컬러 and 가족사 컬러 (foundation.css): swatch, then role name / usage / HEX on separate lines
+// so the item name, its description and the HEX value read as three levels (styles scoped to .hm-text-color-row).
 function TextColorChips({ values }: { values: Record<string, string> }) {
   return <div className="hm-brand-color-row hm-text-color-row">{textColorRoles.map(item => <article className="hm-brand-color-chip" key={item.label} data-text-color={item.label} data-color-token={item.token}>
     <div className="hm-foundation-swatch" style={{ background: `var(${item.token})` }} />
-    <h3>{item.label} · {item.name}</h3><p data-color-value>{toHex(values[item.token])}</p>
+    <h3>{item.label}</h3><p data-color-name>{item.name}</p><p data-color-value>{toHex(values[item.token])}</p>
   </article>)}</div>
 }
 
@@ -69,22 +70,26 @@ function SpecimenTable({ rows }: { rows: readonly TypographyReference[] }) {
 function TypographyReferencePage() {
   const values = useResolvedProperties(typographyProperties)
   const colorValues = useResolvedProperties(textColorProperties)
+  // Section rhythm and the content indent (.sb-page-indent) come from the common Story page. Text Colors keeps its chip grid on the edge.
   return <ReferencePage title="폰트">
     <ReferenceSection title="Text Colors" note="">
       <TextColorChips values={colorValues} />
     </ReferenceSection>
     <ReferenceSection title="Font Family">
-      <p className="hm-typo-family"><span>Noto Sans KR → 맑은 고딕 → 시스템 sans-serif</span><code className="hm-foundation-note">--hm-font-family-base: {values["--hm-font-family-base"]}</code></p>
+      <div className="hm-typo-family sb-page-indent">
+        <p><strong>Noto Sans KR</strong> <span className="hm-foundation-note">→ 맑은 고딕 → 시스템 sans-serif</span></p>
+        <code className="hm-foundation-note hm-typo-token">--hm-font-family-base: {values["--hm-font-family-base"]}</code>
+      </div>
     </ReferenceSection>
     <ReferenceSection title="Font Weight">
-      <div className="hm-typo-weights">{weights.map(({ property, label }) => <article className="hm-typo-weight" key={property}>
+      <div className="hm-typo-weights sb-page-indent">{weights.map(({ property, label }) => <article className="hm-typo-weight" key={property}>
         <p className="hm-typo-weight-meta"><strong>{label}</strong> <span className="hm-foundation-note">{values[property]}</span></p>
         <p className="hm-typo-weight-preview" style={{ fontWeight: `var(${property})` }}>한맥 Hanmac 0123</p>
-        <code className="hm-foundation-note">{property}</code>
+        <code className="hm-foundation-note hm-typo-token">{property}</code>
       </article>)}</div>
     </ReferenceSection>
     <ReferenceSection title="Typography Specimens">
-      <div className="hm-typo-tables"><SpecimenTable rows={textRows} /><SpecimenTable rows={controlRows} /></div>
+      <div className="hm-typo-tables sb-page-indent"><SpecimenTable rows={textRows} /><SpecimenTable rows={controlRows} /></div>
     </ReferenceSection>
   </ReferencePage>
 }