style(storybook): unify form element story layouts

- Button: Sizes | Variants side by side, States as Brand / Standard Solid /
  Standard Outline matrices (3 / 2 / 1 columns), 8px button gap; the
  Interact row stays only in the verification "Brand States" Story
- Input / Textarea / Select: state name in the field Label slot, repeated
  field Label and group titles removed, aria-label keeps field meaning
  with the visible state name; Select uses the Input field grid
- Combobox / Date Picker: Sizes / States use the same state-name Label
  and Input grid; Usage unchanged
- Toggle: top Variants / States in 2 columns, 8px toggle gap, 단독 toggle
  keeps its own width
- Component code, props, tokens and verification Stories unchanged;
  component docs updated to match

src/components/combobox.stories.tsx

@@ -22,9 +22,10 @@ const longOptions: ComboboxOption[] = [
 ]
 
 // Label 14/20/500 in the default text color; a Disabled field keeps the secondary color at 0.6 (same as the Form pages).
-function Field({ label, id, disabled, children }: { label: string; id: string; disabled?: boolean; children: ReactNode }) {
+// `fill` lets the field take its grid column (representative page); the verification Stories keep the 320px field.
+function Field({ label, id, disabled, fill, children }: { label: string; id: string; disabled?: boolean; fill?: boolean; children: ReactNode }) {
   return (
-    <div className="grid max-w-xs gap-2">
+    <div className={fill ? "grid gap-2" : "grid max-w-xs gap-2"}>
       <label htmlFor={id} className={`justify-self-start text-sm font-medium ${disabled ? "text-muted-foreground opacity-60" : "text-foreground"}`}>
         {label}
       </label>
@@ -33,31 +34,36 @@ function Field({ label, id, disabled, children }: { label: string; id: string; d
   )
 }
 
-function Empty() {
+// Representative page (2026-11-12, same rule as Input / Select): with `state`, the state name takes the field Label slot (no
+// repeated field Label under a separate group title) and the trigger keeps the field meaning in its accessible name, which also
+// contains the visible state name (Label in Name), e.g. "프레임워크 (Selected)". Without `state` the verification Stories are unchanged.
+const stateName = (state: string | undefined, field: string) => (state ? `${field} (${state})` : undefined)
+
+function Empty({ state }: { state?: string }) {
   return (
-    <Field label="프레임워크" id="cb-empty">
-      <Combobox id="cb-empty" options={frameworks} placeholder="프레임워크 선택" searchPlaceholder="프레임워크 검색..." />
+    <Field label={state ?? "프레임워크"} id="cb-empty" fill={state !== undefined}>
+      <Combobox id="cb-empty" aria-label={stateName(state, "프레임워크")} options={frameworks} placeholder="프레임워크 선택" searchPlaceholder="프레임워크 검색..." />
     </Field>
   )
 }
 
 // `showValue={false}` hides the value readout on the representative page; the verification Stories keep it.
-function Controlled({ showValue = true }: { showValue?: boolean }) {
+function Controlled({ showValue = true, state }: { showValue?: boolean; state?: string }) {
   const [value, setValue] = useState("nuxt")
   return (
     <div className="grid gap-2">
-      <Field label="선택됨 (controlled)" id="cb-controlled">
-        <Combobox id="cb-controlled" controlled options={frameworks} value={value} onValueChange={setValue} />
+      <Field label={state ?? "선택됨 (controlled)"} id="cb-controlled" fill={state !== undefined}>
+        <Combobox id="cb-controlled" aria-label={stateName(state, "프레임워크")} controlled options={frameworks} value={value} onValueChange={setValue} />
       </Field>
       {showValue ? <span className="text-sm text-muted-foreground" data-testid="controlled">{`value = ${value}`}</span> : null}
     </div>
   )
 }
 
-function Medium() {
+function Medium({ state }: { state?: string }) {
   return (
-    <Field label="Medium" id="cb-medium">
-      <Combobox id="cb-medium" size="medium" options={frameworks} defaultValue="astro" />
+    <Field label={state ?? "Medium"} id="cb-medium" fill={state !== undefined}>
+      <Combobox id="cb-medium" aria-label={stateName(state, "프레임워크")} size="medium" options={frameworks} defaultValue="astro" />
     </Field>
   )
 }
@@ -70,10 +76,10 @@ function LongLabel() {
   )
 }
 
-function Disabled() {
+function Disabled({ state }: { state?: string }) {
   return (
-    <Field label="비활성" id="cb-disabled" disabled>
-      <Combobox id="cb-disabled" options={frameworks} defaultValue="next" disabled />
+    <Field label={state ?? "비활성"} id="cb-disabled" disabled fill={state !== undefined}>
+      <Combobox id="cb-disabled" aria-label={stateName(state, "프레임워크")} options={frameworks} defaultValue="next" disabled />
     </Field>
   )
 }
@@ -111,6 +117,25 @@ const Cell = ({ id, label, wide, children }: { id: string; label: string; wide?:
   </div>
 )
 
+// Sizes / States (2026-11-12): the Input / Select field grid with the common section indent — up to 3 tracks of at least 240px
+// within 1120px, narrower widths drop to 2 / 1 columns. Each cell is one field whose Label is the state name.
+const fieldColumns =
+  "grid max-w-[1120px] items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(max(240px,calc((100%_-_48px)/3)),1fr))]"
+
+function FieldRow({ fields }: { fields: { id: string; render: ReactNode }[] }) {
+  return (
+    <div className="sb-page-indent">
+      <div className={fieldColumns}>
+        {fields.map(({ id, render }) => (
+          <div key={id} className="min-w-0" data-overview-state={id}>
+            {render}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
 // No `component`: Combobox has a required `options` prop, so Stories without args would not type-check.
 const meta = { title: "Components/Search & Date/Combobox", parameters: { layout: "padded" } } satisfies Meta
 export default meta
@@ -124,16 +149,20 @@ export const All: Story = {
     <StoryPage>
       <StoryPageHeader title="Combobox" />
       <StorySection title="Sizes">
-        <Grid>
-          <Cell id="empty" label="Default"><Empty /></Cell>
-          <Cell id="medium" label="Medium"><Medium /></Cell>
-        </Grid>
+        <FieldRow
+          fields={[
+            { id: "empty", render: <Empty state="Default" /> },
+            { id: "medium", render: <Medium state="Medium" /> },
+          ]}
+        />
       </StorySection>
       <StorySection title="States">
-        <Grid>
-          <Cell id="controlled" label="Selected"><Controlled showValue={false} /></Cell>
-          <Cell id="disabled" label="Disabled"><Disabled /></Cell>
-        </Grid>
+        <FieldRow
+          fields={[
+            { id: "controlled", render: <Controlled showValue={false} state="Selected" /> },
+            { id: "disabled", render: <Disabled state="Disabled" /> },
+          ]}
+        />
       </StorySection>
       <StorySection title="Usage">
         <Grid>