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

@@ -13,9 +13,10 @@ const today = new Date(2026, 9, 2)
 const calendarProps = { today, startMonth: new Date(2026, 0), endMonth: new Date(2027, 11) }
 
 // 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>
@@ -24,18 +25,23 @@ 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="dp-empty">
-      <DatePicker id="dp-empty" calendarProps={calendarProps} />
+    <Field label={state ?? "시작일"} id="dp-empty" fill={state !== undefined}>
+      <DatePicker id="dp-empty" aria-label={stateName(state, "시작일")} calendarProps={calendarProps} />
     </Field>
   )
 }
 
-function Selected() {
+function Selected({ state }: { state?: string }) {
   return (
-    <Field label="시작일" id="dp-selected">
-      <DatePicker id="dp-selected" defaultValue={new Date(2026, 9, 6)} calendarProps={calendarProps} />
+    <Field label={state ?? "시작일"} id="dp-selected" fill={state !== undefined}>
+      <DatePicker id="dp-selected" aria-label={stateName(state, "시작일")} defaultValue={new Date(2026, 9, 6)} calendarProps={calendarProps} />
     </Field>
   )
 }
@@ -57,41 +63,52 @@ function CustomFormat() {
 }
 
 // `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 [date, setDate] = useState<Date | undefined>()
   return (
     <div className="grid gap-2">
-      <Field label="마감일 (controlled)" id="dp-controlled">
-        <DatePicker id="dp-controlled" controlled value={date} onValueChange={setDate} calendarProps={calendarProps} />
+      <Field label={state ?? "마감일 (controlled)"} id="dp-controlled" fill={state !== undefined}>
+        <DatePicker id="dp-controlled" aria-label={stateName(state, "마감일")} controlled value={date} onValueChange={setDate} calendarProps={calendarProps} />
       </Field>
       {showValue ? <span className="text-sm text-muted-foreground" data-testid="controlled">{`value = ${date ? date.toLocaleDateString("ko-KR") : "undefined"}`}</span> : null}
     </div>
   )
 }
 
-function Medium() {
+function Medium({ state }: { state?: string }) {
   return (
-    <Field label="Medium" id="dp-medium">
-      <DatePicker id="dp-medium" size="medium" defaultValue={new Date(2026, 9, 15)} calendarProps={calendarProps} />
+    <Field label={state ?? "Medium"} id="dp-medium" fill={state !== undefined}>
+      <DatePicker id="dp-medium" aria-label={stateName(state, "날짜")} size="medium" defaultValue={new Date(2026, 9, 15)} calendarProps={calendarProps} />
     </Field>
   )
 }
 
-function DisabledDates() {
+// With `state`, the rule that was the Label stays as helper text (12/18/400 secondary, 8px below the trigger, as Input's Helper)
+// and is linked to the trigger with aria-describedby.
+const disabledDatesNote = "5일 이전과 일요일은 선택 불가"
+
+function DisabledDates({ state }: { state?: string }) {
   return (
-    <Field label="5일 이전과 일요일은 선택 불가" id="dp-disabled-dates">
+    <Field label={state ?? disabledDatesNote} id="dp-disabled-dates" fill={state !== undefined}>
       <DatePicker
         id="dp-disabled-dates"
+        aria-label={stateName(state, "날짜")}
+        aria-describedby={state ? "dp-disabled-dates-message" : undefined}
         calendarProps={{ ...calendarProps, disabled: [{ before: new Date(2026, 9, 5) }, { dayOfWeek: [0] }] }}
       />
+      {state ? (
+        <p id="dp-disabled-dates-message" className="m-0 text-xs leading-[18px] text-muted-foreground">
+          {disabledDatesNote}
+        </p>
+      ) : null}
     </Field>
   )
 }
 
-function Disabled() {
+function Disabled({ state }: { state?: string }) {
   return (
-    <Field label="비활성" id="dp-disabled" disabled>
-      <DatePicker id="dp-disabled" disabled defaultValue={new Date(2026, 9, 15)} />
+    <Field label={state ?? "비활성"} id="dp-disabled" disabled fill={state !== undefined}>
+      <DatePicker id="dp-disabled" aria-label={stateName(state, "날짜")} disabled defaultValue={new Date(2026, 9, 15)} />
     </Field>
   )
 }
@@ -107,6 +124,25 @@ const Cell = ({ id, label, children }: { id: string; label: string; children: Re
   </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>
+  )
+}
+
 const meta = { title: "Components/Search & Date/Date Picker", component: DatePicker, parameters: { layout: "padded" } } satisfies Meta<typeof DatePicker>
 export default meta
 type Story = StoryObj<typeof meta>
@@ -119,18 +155,22 @@ export const All: Story = {
     <StoryPage>
       <StoryPageHeader title="Date Picker" />
       <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="selected" label="Selected"><Selected /></Cell>
-          <Cell id="controlled" label="Controlled"><Controlled showValue={false} /></Cell>
-          <Cell id="disabled-dates" label="Disabled dates"><DisabledDates /></Cell>
-          <Cell id="disabled" label="Disabled"><Disabled /></Cell>
-        </Grid>
+        <FieldRow
+          fields={[
+            { id: "selected", render: <Selected state="Selected" /> },
+            { id: "controlled", render: <Controlled showValue={false} state="Controlled" /> },
+            { id: "disabled-dates", render: <DisabledDates state="Disabled dates" /> },
+            { id: "disabled", render: <Disabled state="Disabled" /> },
+          ]}
+        />
       </StorySection>
       <StorySection title="Usage">
         <Grid>