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/components/toggle.stories.tsx

@@ -40,7 +40,8 @@ function WithIcon() {
 function Sizes() {
   return (
     // 3 equal columns on PC (iframe width 1000px and up): sm / default / lg; fewer columns below that (240px minimum).
-    <div className="grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))] min-[1000px]:grid-cols-3">
+    // Same common indent as the group boards of the page (.sb-page-indent).
+    <div className="grid items-start gap-6 sb-page-indent [grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))] min-[1000px]:grid-cols-3">
       {(["sm", "default", "lg"] as const).map((size) => (
         <div key={size} data-toggle-size={size} className="flex flex-wrap items-center gap-3">
           <Toggle size={size} variant="outline" aria-label={`${size} icon-only`}><StarIcon /></Toggle>