style(storybook): refine manager sidebar, LNB inset and shared story frame

- Manager sidebar labels and sort order for the grouped pages; LNB 1-depth
  text start 12px (token, baseline and LNB doc updated)
- Shared story frame: drop the divider under section titles, side margin
  max 60px -> 30px; Foundation color/typography spacing
- Pseudo-state mirroring also pins :focus-visible via data-sb-focus while
  keeping the previous clones for compound rules (Slider Focus + Drag)

src/components/aspect-ratio.stories.tsx

@@ -58,7 +58,7 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 // Representative-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), fewer below that
-// (200px minimum). Each specimen sits in its own single-column StateBoard (min larger than any column), so every subtitle and divider
+// (200px minimum). Each specimen sits in its own single-column StateBoard (min larger than any column), so every subtitle
 // has the width of its column; a section with fewer specimens than columns leaves the remaining columns empty.
 // The Card example spans two columns (about its previous width); the ratio boxes fill their column by design.
 const specimenColumns = {

src/components/avatar.stories.tsx

@@ -77,7 +77,7 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 // Representative-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), fewer below that
-// (240px minimum). Each specimen sits in its own single-column StateBoard (min larger than any column), so every subtitle and divider
+// (240px minimum). Each specimen sits in its own single-column StateBoard (min larger than any column), so every subtitle
 // has the width of its column; a section with fewer specimens than columns leaves the remaining columns empty.
 const specimenColumns = {
   2: "min-[1000px]:grid-cols-2",

src/components/badge.stories.tsx

@@ -24,7 +24,7 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 // Representative-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), fewer below that
-// (280px minimum). Each specimen sits in its own single-column StateBoard (min larger than any column), so every subtitle and divider
+// (280px minimum). Each specimen sits in its own single-column StateBoard (min larger than any column), so every subtitle
 // has the width of its column; a section with fewer specimens than columns leaves the remaining columns empty.
 const specimenColumns = {
   2: "min-[1000px]:grid-cols-2",

src/components/carousel.stories.tsx

@@ -143,7 +143,7 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 // Representative-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), fewer below that
-// (200px minimum). Each specimen sits in its own single-column StateBoard (min larger than any column), so every subtitle and divider
+// (200px minimum). Each specimen sits in its own single-column StateBoard (min larger than any column), so every subtitle
 // has the width of its column; a section with fewer specimens than columns leaves the remaining columns empty.
 // The Media example spans two columns; carousels fill their column by design.
 const specimenColumns = {
@@ -167,7 +167,6 @@ function SpecimenGrid({ ids, columns, spans = {} }: { ids: string[]; columns: 2
   )
 }
 
-// Representative Story: the common Story page; the sections group the same specimens.
 // Representative Story: Overview (Basic) is merged into Variants (Basic, Multiple items, Loop, Vertical), 4 columns on PC; Media stays under Usage.
 export const All: Story = {
   name: "Carousel",

src/components/pagination.stories.tsx

@@ -81,7 +81,7 @@ type Story = StoryObj<typeof meta>
 
 // Representative-page layout (Storybook presentation only): one Variants section, 2 equal columns x 2 rows on PC (iframe width
 // 1030px and up), 1 column below that. Each specimen sits in its own single-column StateBoard (min larger than any
-// column), so every title and divider has the width of its column. The Pagination root is `mx-auto flex w-full justify-center`;
+// column), so every title has the width of its column. The Pagination root is `mx-auto flex w-full justify-center`;
 // `justify-start` on the cell left-aligns the button group in its column without stretching it.
 const cellAlignLeft = "w-full [&_[data-slot=pagination]]:justify-start"
 

src/components/progress.stories.tsx

@@ -50,7 +50,7 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 // Representative-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), fewer below that
-// (240px minimum). Each specimen sits in its own single-column StateBoard (min larger than any column), so every subtitle and divider
+// (240px minimum). Each specimen sits in its own single-column StateBoard (min larger than any column), so every subtitle
 // has the width of its column; a section with fewer specimens than columns leaves the remaining columns empty.
 const specimenColumns = {
   2: "min-[1000px]:grid-cols-2",

src/components/resizable.stories.tsx

@@ -100,7 +100,7 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 // Representative-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), one column
-// below that. Each specimen sits in its own single-column StateBoard (min larger than any column), so the title, divider and
+// below that. Each specimen sits in its own single-column StateBoard (min larger than any column), so the title and
 // specimen start line up and unused columns stay empty. The frames keep their own size (max 560px wide).
 function StateGrid({ states, cols }: { states: BoardState[]; cols: 2 | 3 }) {
   return (

src/components/scroll-area.stories.tsx

@@ -78,7 +78,7 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 // Representative-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), fewer below that
-// (300px minimum). Each specimen sits in its own single-column StateBoard (min larger than any column), so every subtitle and divider
+// (300px minimum). Each specimen sits in its own single-column StateBoard (min larger than any column), so every subtitle
 // has the width of its column; a section with fewer specimens than columns leaves the remaining columns empty.
 const specimenColumns = {
   2: "min-[1000px]:grid-cols-2",

src/components/separator.stories.tsx

@@ -21,7 +21,7 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 // Representative-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), fewer below that
-// (240px minimum). Each specimen sits in its own single-column StateBoard (min larger than any column), so every subtitle and divider
+// (240px minimum). Each specimen sits in its own single-column StateBoard (min larger than any column), so every subtitle
 // has the width of its column; a section with fewer specimens than columns leaves the remaining columns empty.
 const specimenColumns = {
   2: "min-[1000px]:grid-cols-2",

src/components/skeleton.stories.tsx

@@ -54,7 +54,7 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 // Representative-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), fewer below that
-// (240px minimum). Each specimen sits in its own single-column StateBoard (min larger than any column), so every subtitle and divider
+// (240px minimum). Each specimen sits in its own single-column StateBoard (min larger than any column), so every subtitle
 // has the width of its column; a section with fewer specimens than columns leaves the remaining columns empty.
 const specimenColumns = {
   2: "min-[1000px]:grid-cols-2",

src/components/story-board.tsx

@@ -10,7 +10,7 @@ export type BoardState = { id: string; label: string; note?: string; noteAfter?:
 // `fixed` uses columns of exactly `min` px instead of stretching them (1fr). Specimens whose popup is anchored to a Radix
 // trigger need whole-pixel columns: a fractional column (e.g. 358.4px) puts the trigger edge between device pixels while the
 // popper rounds the popup to whole pixels, so the two outlines end up 1px apart.
-// The labels are H3 (14/20/500, secondary) under the section's divider: they carry no divider of their own, and rows sit
+// The labels are H3 (14/20/500, secondary) under the section title: they carry no divider of their own, and rows sit
 // 24px apart (one step tighter than the 28px section gap of story-page.css).
 // 2026-11-11: inside a StorySection the board is marked `data-sb-board`; story-page.css then indents, once, the block directly
 // under the section body that is or holds the board (16px / 12px at 640px and below, --sb-page-indent). Stories that put one

src/components/story-page.css

@@ -1,9 +1,9 @@
 /* Storybook presentation only. Common page frame for representative Stories; all selectors stay inside .sb-page.
    2026-11-11 compact document rhythm, shared by Web / Chart / OrgChart (SW and CENTER pages use the same frame only):
    2026-11-11: the H1 page title / description header is no longer shown (the H1 stays for screen readers only); pages start with the
-   H2 section title 16/24/700 (body-md) → 12px → thin divider → 16px → content; sections 28px apart (2026-11-11 rhythm, first applied
+   H2 section title 16/24/700 (body-md) → 12px (no divider or 16px margin since 2026-11-13) → content; sections 28px apart (2026-11-11 rhythm, first applied
    on Foundation / 폰트); H3 specimen labels 14/20/500 secondary, no divider of their own (story-board.tsx). Top / bottom gutter 16–24px.
-   Side margins are unchanged (16px up to 480px, growing to 60px at 768px): the SW breakpoints 2040 / 1125 / 787 depend on them.
+   Side margins: 16px up to 480px, growing to 30px at 768px (60px before 2026-11-13): the SW breakpoints 1980 / 1065 / 727 depend on them.
    Only information blocks (text, spec tables) opt in to the content indent (.sb-page-indent); previews stay on the section edge,
    except group boards (H3 label + its specimens, marked data-sb-board by StateBoard / CardBoard), indented once per section block below.
    No design token is added; --sb-page-* only names this Storybook frame's values (component token values or plain px). */
@@ -23,9 +23,10 @@
 .sb-page > .sb-page-inner {
   box-sizing: border-box;
   /* 2026-11-05 (user request): no max width; the Inner follows the page width. Side margin (each side) = 16px up to a
-     480px viewport (358px Inner at 390px, so a 314px specimen fits), then linear to 60px at 768px (44px over 288px,
-     11 / 72 of the viewport growth), 60px from 768px. The Inner keeps growing (about 0.69px per 1px), with no jump. */
-  width: calc(100% - 2 * clamp(16px, calc(16px + (100vw - 480px) * 11 / 72), 60px));
+     480px viewport (358px Inner at 390px, so a 314px specimen fits), then linear to the maximum at 768px, the maximum from 768px.
+     2026-11-13 (user request, with the 180px LNB): maximum 60px → 30px (14px over 288px, 7 / 144 of the viewport growth);
+     the 16px mobile margin is unchanged. The Inner keeps growing (about 0.9px per 1px), with no jump. */
+  width: calc(100% - 2 * clamp(16px, calc(16px + (100vw - 480px) * 7 / 144), 30px));
   min-width: 0;
   margin-inline: auto;
 }
@@ -48,10 +49,11 @@
 }
 
 .sb-page .sb-page-section { margin-top: var(--sb-page-section-gap); scroll-margin-top: 16px; }
+/* 2026-11-13 (user request, all Story pages): the thin divider under the section title is removed, and so is the 16px margin
+   that sat under it, so the title-to-content spacing is the header's own 12px padding. Every other border stays. */
 .sb-page .sb-page-section-header {
   padding-bottom: 12px;
-  margin-bottom: 16px;
-  border-bottom: 1px solid var(--hm-sem-stroke-input-default);
+  margin-bottom: 0;
   overflow-wrap: anywhere;
 }
 .sb-page .sb-page-section-header .sb-page-section-title {

src/components/table.stories.tsx

@@ -145,7 +145,7 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 // Representative-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), fewer below that
-// (400px minimum). Each specimen sits in its own single-column StateBoard (min larger than any column), so every subtitle and divider
+// (400px minimum). Each specimen sits in its own single-column StateBoard (min larger than any column), so every subtitle
 // has the width of its column; a section with fewer specimens than columns leaves the remaining columns empty.
 // The default 520px Table minimum would make the 445px columns scroll sideways, so Basic, Selected row and Long text reset the
 // documented `--hm-table-min-width` token for their own cell (same as the Tabs usage panel): the table then follows its column