10. 階段パネル(Stair section)

下の #sg-stair-lab のみ。白い階段形は .sg-stair-backdrop。本文は .intro-panel--sg-lab(マスクなし)。viewBox 450×320 基準で R / Y / X を動的生成。768px 以下は角丸に。本番のトップ イントロに反映するには、プリセットを読み込み・調整のうえ「トップ用 JSON 書き出し」で src/data/intro-stair-preset.json を置き換え、"enabled": true に。

幅モード
階段の位置
20
500
280

タブごとに X 幅% / Y 高 を個別調整。バックドロップ全体寸 = ベース寸 + 各タブの Y 高合計(左右合計を幅に、上下合計を高さに加算)。

20

OFF のときは白背景

135

左の操作で表示中の階段パラメータ(保存済みプリセットを「読込」した状態含む)を intro-stair-preset.json 形式で保存。リポジトリの src/data/intro-stair-preset.json に上書きし、enabled: true にしてビルドするとトップに反映。

「AI向けドキュメント書き出し」は、現在の設定JSONと階段マスクのコアスクリプト抜粋を 1つのMarkdownにまとめて保存します(他AIへ共有用)。

上タブ

55
120

下タブ

55
120

左タブ

55
120

右タブ

55
120

サンプル見出し スライダーで R / Y / X を反映

ラボ専用生成パス。トップ .intro-panel とは非連動

プレースホルダ 16:10

左カラム

カード A

トップの intro-card 相当の置き場です。

プレースホルダ 16:10

右カラム

カード B

2 カラムでグリッドの破綻も確認できます。