shkim4/HMDesign
Private
Public Access
1
0 Fork 0
Code Activity

Initial commit: HMDesignSystem baseline

Browse Source
This commit is contained in:
shkim4 committed 2026-10-08 16:58:09 +09:00
commit b6a0a61103
486 files changed
+68432
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/story-page.css
+63
View File
@@ -0,0 +1,63 @@
/* Storybook presentation only. Common page frame for representative Stories; all selectors stay inside .sb-page.
Inner (max 1280, gutter 16–40) and title (kicker 12 / title 28·36·700 / description, underlined) reuse Foundation / Color.
Section reuses the Center Graphic / 교량 split: heading + description, a divider, then the specimen. */
.sb-page {
--sb-page-max-width: 1280px;
--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;
/* Keep the established content width: the 1280px envelope includes both gutters. */
width: calc(min(100%, var(--sb-page-max-width)) - 2 * var(--sb-page-gutter));
min-width: 0;
margin-inline: auto;
}
.sb-page .sb-page-header {
padding-bottom: 24px;
border-bottom: 1px solid var(--hm-sem-stroke-input-default);
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; }