docs(storybook): preview-first Expanded OrgChart and leaner Tabs / Button pages

- Expanded OrgChart: the chart moves right under the page title; data, layout
  and interaction settings stay below it. Setting notes, section descriptions,
  hidden legends and the Drag & Drop ON/OFF text are removed; the example
  counts stay only as a hidden data hook for the OrgChart browser checks, and
  the pending note shows only while the employee count differs.
- Tabs: drop the text-only Do / Don't section (rules live in tabs.md §16).
- Button: the representative page hides the Brand / Standard state notes
  (story-only showNote); the hidden States Stories keep them.
- Report: the follow-up simplification and its verification.

src/components/button.stories.tsx

@@ -118,7 +118,8 @@ function SizesBoard() {
   )
 }
 
-function BrandStates() {
+// `showNote={false}` keeps the representative page UI-only; the verification Stories keep the state notes.
+function BrandStates({ showNote = true }: { showNote?: boolean }) {
   const [count, setCount] = useState(0)
   return (
     <div className={stack}>
@@ -132,9 +133,11 @@ function BrandStates() {
         </Button>
       </div>
       <output aria-live="polite">Activated: {count}</output>
-      <p className={note}>
-        Hover와 Pressed는 Storybook이 고정한 상태입니다. Interact 위에서 실제 Hover·Pressed·포인터 이탈을 확인합니다. Disabled는 실행되지 않습니다.
-      </p>
+      {showNote ? (
+        <p className={note}>
+          Hover와 Pressed는 Storybook이 고정한 상태입니다. Interact 위에서 실제 Hover·Pressed·포인터 이탈을 확인합니다. Disabled는 실행되지 않습니다.
+        </p>
+      ) : null}
     </div>
   )
 }
@@ -182,14 +185,16 @@ function StandardStateTable({ appearance, title }: { appearance: "solid" | "outl
   )
 }
 
-function StandardStatesBoard() {
+function StandardStatesBoard({ showNote = true }: { showNote?: boolean }) {
   return (
     <div className={stack}>
       <StandardStateTable appearance="solid" title="Standard Solid" />
       <StandardStateTable appearance="outline" title="Standard Outline" />
-      <p className={note}>
-        Standard Solid의 Hover·Pressed는 역할 면 위에 Black 20%를 합성합니다(Pressed = Hover). Green·Brown Outline은 Hover에서 역할색 면 + White 라벨, Pressed에서 White 면 + Black 20%입니다. Red Outline은 Hover·Pressed 모두 Red 8% 면이며 Red 라벨·보더를 유지합니다. Disabled는 Default 모양 그대로 opacity 60%이고 상태 면을 적용하지 않습니다. Default 열의 버튼으로 실제 포인터 상태도 확인할 수 있습니다. Brand 상태는 Brand States에서 확인합니다.
-      </p>
+      {showNote ? (
+        <p className={note}>
+          Standard Solid의 Hover·Pressed는 역할 면 위에 Black 20%를 합성합니다(Pressed = Hover). Green·Brown Outline은 Hover에서 역할색 면 + White 라벨, Pressed에서 White 면 + Black 20%입니다. Red Outline은 Hover·Pressed 모두 Red 8% 면이며 Red 라벨·보더를 유지합니다. Disabled는 Default 모양 그대로 opacity 60%이고 상태 면을 적용하지 않습니다. Default 열의 버튼으로 실제 포인터 상태도 확인할 수 있습니다. Brand 상태는 Brand States에서 확인합니다.
+        </p>
+      ) : null}
     </div>
   )
 }
@@ -236,8 +241,8 @@ export const All: Story = {
         <StateBoard
           min={1200}
           states={[
-            { id: "brand-states", label: "Brand", children: <BrandStates /> },
-            { id: "standard-states", label: "Standard Solid · Standard Outline", children: <StandardStatesBoard /> },
+            { id: "brand-states", label: "Brand", children: <BrandStates showNote={false} /> },
+            { id: "standard-states", label: "Standard Solid · Standard Outline", children: <StandardStatesBoard showNote={false} /> },
           ]}
         />
       </StorySection>