shkim4
c1549b2b4f
Deploy Storybook / deploy (push) Successful in 1m11s
- SW Viewer layer popup: search + 전체 레이어 fixed, only the list scrolls; the all-layers control is the SWLayerVisibilityIcon bulb (role="switch"), one light #d2c8b4 line under it. - Example H and the layer popup AI docs follow the bulb layout (VIEWER, DESIGN_RULES, COMPONENT_CATALOG, COMPOSITION_PATTERNS, AI_GUIDE sync). - Popup toggle switch (Figma toggle_btn_new 633:75188 / 633:75902): one sw.css face for the HM UI Switch in SWPopup and SWViewerSwitch in SWViewerPanel; SW Header switches unchanged. - SW Footer stories: no inner scrollers, fluid screens; workspace fits the viewport. - SW Footer category tabs keep their positions when selected (divider slots kept, pocket edges drawn over the neighbours' padding). - Storybook .sb-page-inner: 1440px max from 1920px (was 80vw). - SW Header equal-split change was cancelled; header CSS unchanged. Verified: check:ai-docs PASS, viewer test 49 PASS (1 FAIL hover face + timeout pre-existing), footer-design-review 21 PASS, browser checks of switch/footer/inner. Not verified: footer-popup-viewer-refinement (needs full Storybook build), text-weight/hover tests, Switch 37x16 AI docs (deferred).
69 lines
2.7 KiB
CSS
69 lines
2.7 KiB
CSS
/* 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;
|
||
}
|
||
/* Wide screens (2026-10-22): 1440px from 1920px up, fixed beyond it (was 80vw); never wider than the page minus the
|
||
gutters, so no horizontal scroll. Below 1920px the rule above applies. */
|
||
@media (min-width: 1920px) {
|
||
.sb-page > .sb-page-inner { width: min(1440px, calc(100% - 2 * var(--sb-page-gutter))); }
|
||
}
|
||
|
||
.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; }
|