# 料金表 — Style Reference
> 白い紙に細い罫で区切った三列の料金表。月払いと年払いを切り替えると、数字が一桁ずつ下から回って入れ替わる。

**Theme:** light  **Series:** PARTS 083  **World:** 小さな会社向けの帳簿クラウド「帳簿」の料金ページ。

## Concept
料金表は数字が主役。装飾を足さず、白い紙と 1px の罫、コバルト 1 色だけで組む。切替の瞬間に数字が回ることで「年払いにすると何が変わるか」が目で分かる。おすすめの列は白地と 1.5px のコバルトの枠で浮かせ、切替のたびに枠が描き直されて目がそこへ戻る。

## Signature Technique
**桁ごとの数字ロール(DOM + CSS transform)。** ライブラリなし。
1. 価格の各桁を `.d`(幅 .62em、高さ 1em、overflow hidden)にし、その中に 0〜9 を `WRAP+1` 周分(30 個)縦に並べた `.col` を置く。カンマは幅 .3em の固定セル。
2. 現在の数字 `from` から目標 `to` へ `translateY(-N em)` で動かす。増えるときは `to + 10·WRAP` まで(2 周余計に回ってから止まる)、減るときは `from + 10·WRAP` から `to` へ(逆向き)。
3. 下の桁から `STAGGER` 70ms ずつ遅らせ、`cubic-bezier(.22,1,.3,1)` 900ms で減速して止まる。桁数が変わる(980 → 9,800)ときはセルを組み直す。
4. 単位(/月・/年)と「月あたり」の注は 260ms 消して差し替える。おすすめ列の枠は `scale(.985)→1` + opacity で描き直す。
5. `font-variant-numeric: tabular-nums` の Inter を使い、桁幅を固定して横ずれを防ぐ。
6. reduced-motion ではすべて即時に差し替える。初期表示は年払いを動きなしで描く(静止画に年額と「月あたり」の注が揃う)。window の load と `document.fonts.ready` を待ってから 4 秒後、未操作なら一度だけ月払い→(2.4 秒後)年払いと回して見せる。

## Color Palette
| Token | HEX | Role |
|---|---|---|
| --paper | #FCFCFB | 紙。ページ全体 |
| --ink | #17181C | 見出し、価格、ボタンの線 |
| --ink-2 | #4E5160 | 説明文、円記号 |
| --muted | #8A8D9B | ラベルと注と単位の文字 |
| --rule | #E3E4E8 | 列の罫、機能リストの上の罫 |
| --rule-2 | #C9CBD3 | 表の上下の罫(少し濃く) |
| --cobalt | #2E49D9 | おすすめ列の枠とボタン、タグ、割引ピルの文字 |
| --cobalt-2 | #E8ECFB | 割引ピルの地 |

## Typography
- **Inter 600**: 価格 `clamp(40px, 4.2vw, 52px)`、字間 −.02em、tabular-nums。ラベル 11px 600 字間 .18em 大文字、注 12px、タグ 10px 600 字間 .16em。
- **Zen Kaku Gothic New 400/500/700**: 見出し `clamp(26px, 3.2vw, 40px)` 700、プラン名 18px 700、説明 14px、機能 14px、ボタン 14px 500 字間 .04em、本文 15px / 1.6。
- `font-feature-settings:"palt"`。

## Spacing & Layout
- 表の最大幅 1080px、3 列等分。列の内側 36px 32px 32px、要素間 22px。
- 見出しブロックと表の間 40px。表の下の注 18px。
- 860px 以下で 1 列、おすすめ列を先頭に。列の内側 30px 22px。
- gutter `clamp(20px, 4vw, 56px)`。

## Motion
- 数字ロール 900ms、桁ごとに 70ms 遅延、周回 2。
- スイッチのつまみ 350ms `cubic-bezier(.3,1.4,.4,1)`(少し行き過ぎて戻る)。
- 枠の描き直し 500ms、注の差し替え 260ms。
- reduced-motion: 遷移なし、即時差し替え。

## Components
- **toggle**: ラベル「月払い」「年払い」+ 52×30 の黒いスイッチ(`role="switch"`)+ 割引ピル。選ばれていないラベルは灰。
- **plan**: 見出し / 説明(最低 2.8 行分) / 価格行 / 注 / 罫 / 機能リスト(チェックは mask の SVG) / ボタン(下寄せ)。
- **plan.hot**: 白地、コバルトの 1.5px 枠、上辺に「おすすめ」のタグ、ボタンはコバルト塗り。
- **button**: 高さ 46px、ピル、1px の墨の線。hover で塗り反転。おすすめ列の青いボタンは hover で `#2238B8` に沈める。
- **badge**: 右下固定 `VALE / PARTS 083 / 料金表`。

## Do / Don't
**Do**
- 価格は tabular-nums の書体で。桁幅が揃わないとロールがずれる。
- 下の桁から先に回す。上の桁が最後に止まると、数字を読む順と合う。
- おすすめは 1 列だけ。枠と塗りの 2 つで示す。
- 罫は 1px、色は 2 段階まで。

**Don't**
- 桁数が変わるときにロールさせない。組み直して即時表示にする。
- ロールの周回を 3 以上にしない。待たされる。
- 列ごとに色を変えない。
- 価格の近くに取り消し線や「◯%オフ」の大きな数字を置かない。ピル 1 個で足りる。

## References
- **RevenueCat** (Refero): 雲のような白地に一色のペリウィンクルを置く、余白の多い構成を参考にした。色はコバルト `#2E49D9` に変え、角丸の大きなカードは罫で区切った表に置き換えた。
- **mono** (Refero): 白い壁に細い黒の罫でセルを切る美術館の構成を抜き出した。影と装飾を捨て、罫の濃さ 2 段階だけで階層を作った。

## Usage
1. `.head`(見出し + `.toggle`)と `.table` を切り出す。`<style>` の `:root` 〜 `.badge` まで、`<script>` 全体を持っていく。外部ライブラリは不要。
2. 価格は `.roll` に `data-m`(月額)と `data-y`(年額)を数字だけで書く。`.per` と `.note` にも `data-m` / `data-y` を書く。
3. パラメータは JS 冒頭の `P`:
   - `DUR` ロールの時間(ms、既定 900)
   - `STAGGER` 桁ごとの遅延(ms、70)
   - `EASE` イージング
   - `WRAP` 余計に回る周回数(2。0 で最短距離)
4. 列を増やすときは `.table` の `grid-template-columns` を変える。おすすめ列には `.hot` と `.tag` を付ける。
5. 通貨記号は `.yen` の文字を変える。小数を使う場合は `fmt()` を調整し、`.` 用のセルを `,` と同じ扱いで足す。
6. 自動デモ(読み込み完了 4 秒後に月払い→年払い)が不要なら末尾の `loaded.then(...)` の行を消す。初期を月払いにするなら `instant=true;set(true);instant=false;` を消す。