shkim4
fc0a3e7725
- Manager LNB: 246px width, 16px brand title, 14px/700 menu and section titles, depth1 48px / depth2+ 42px rows, 24px section gap - Foundation: rename Color to HM Color (Story ID foundation-color--all kept), remove Company Colors subtitle and the page-title bottom border - Patterns/Layout/LNB: Storybook-only overrides in lnb.stories.css (240px column, 212px min width, 14px menu, 48/42px rows, profile text, group dividers); representative board dividers per section - Sync story inventory and docs (brand-color-steps, lnb); shared package defaults and tokens are unchanged
64 lines
2.6 KiB
CSS
64 lines
2.6 KiB
CSS
/* Storybook presentation only. Common page frame for representative Stories; all selectors stay inside .sb-page.
|
||
Inner (fluid; 16px each side up to 480px, growing to 60px at 768px; vertical gutter 16–40) and title (kicker 12 / title 28·36·700 / description, no divider below) reuse Foundation / Color.
|
||
Section reuses the Center Graphic / 교량 split: heading + description, a divider, then the specimen. */
|
||
.sb-page {
|
||
--sb-page-gutter: clamp(16px, 3vw, 40px);
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
min-width: 0;
|
||
padding-block: var(--sb-page-gutter);
|
||
font-family: var(--hm-font-family-base);
|
||
color: var(--hm-sem-fg-primary);
|
||
}
|
||
.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));
|
||
min-width: 0;
|
||
margin-inline: auto;
|
||
}
|
||
|
||
.sb-page .sb-page-header {
|
||
padding-bottom: 24px;
|
||
font-size: var(--hm-label-font-size);
|
||
line-height: var(--hm-label-line-height);
|
||
overflow-wrap: anywhere;
|
||
}
|
||
.sb-page .sb-page-header .sb-page-kicker {
|
||
margin: 0 0 12px;
|
||
color: var(--hm-sem-fg-secondary);
|
||
font-size: var(--hm-button-font-size-sm);
|
||
font-weight: var(--hm-font-weight-bold);
|
||
}
|
||
.sb-page .sb-page-header .sb-page-title {
|
||
margin: 8px 0 12px;
|
||
font-size: var(--hm-page-header-title-font-size);
|
||
line-height: var(--hm-page-header-title-line-height);
|
||
font-weight: var(--hm-page-header-title-font-weight);
|
||
}
|
||
.sb-page .sb-page-header .sb-page-description { margin: 0 0 12px; font-weight: var(--hm-input-font-weight); }
|
||
|
||
.sb-page .sb-page-section { margin-top: 32px; scroll-margin-top: 16px; }
|
||
.sb-page .sb-page-section-header {
|
||
padding-bottom: 12px;
|
||
margin-bottom: 16px;
|
||
border-bottom: 1px solid var(--hm-sem-stroke-input-default);
|
||
overflow-wrap: anywhere;
|
||
}
|
||
.sb-page .sb-page-section-header .sb-page-section-title {
|
||
margin: 0;
|
||
font-size: var(--hm-card-title-font-size);
|
||
line-height: var(--hm-card-title-line-height);
|
||
font-weight: var(--hm-card-title-font-weight);
|
||
}
|
||
.sb-page .sb-page-section-header .sb-page-section-description {
|
||
margin: 4px 0 0;
|
||
color: var(--hm-sem-fg-secondary);
|
||
font-size: var(--hm-label-font-size);
|
||
line-height: var(--hm-label-line-height);
|
||
font-weight: var(--hm-input-font-weight);
|
||
}
|
||
.sb-page .sb-page-section-body { min-width: 0; }
|