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

@@ -36,9 +36,10 @@ function Specimen({ surface = "surface", action, title = "프로젝트 정보",
 
 // Story-only equal-column board for this page: 3 columns on PC, 2 / 1 on narrower widths. Variants and Usage share it,
 // so a Usage cell has the same width as one Variants cell. Label markup/colors match StateBoard (shared component untouched).
+// `data-sb-board` gives it the same common group indent as StateBoard (story-page.css).
 function CardBoard({ states }: { states: BoardState[] }) {
   return (
-    <div className="grid grid-cols-1 items-start gap-x-6 gap-y-8 min-[640px]:grid-cols-2 min-[900px]:grid-cols-3">
+    <div data-sb-board="" className="grid grid-cols-1 items-start gap-x-6 gap-y-8 min-[640px]:grid-cols-2 min-[900px]:grid-cols-3">
       {states.map(({ id, label, children }) => (
         <section className="grid min-w-0 content-start gap-3" key={id} data-overview-state={id} aria-label={label}>
           <header className="grid gap-2 border-b border-black/10 pb-2">