# 反転フラップ — Style Reference
> 黒い案内板。一文字ずつ上下の板が回って、次の便を告げる。

**Theme:** dark  **Series:** PARTS 017  **World:** 空港の出発案内板。

## Concept
時刻・行き先・搭乗口の三段。各セルは上下二枚の板で、文字送り(空白 → 数字 → : → A〜Z)の順に一枚ずつ回り、目的の文字で止まる。数秒ごとに次の便へ切り替わる。読み込み時は最初の便を完成状態で出し、同じフレームで2便目へ回り始める。読み込み3秒後の静止画には、上下で文字が食い違う途中の板が写る。

## Signature Technique
- セル構造: 静止の上半分(次の文字)、静止の下半分(今の文字)、回転する上半分(今の文字、`transform-origin: bottom`、0 → -90°)、回転する下半分(次の文字、`transform-origin: top`、90° → 0)。`perspective: cw*8`、`backface-visibility: hidden`。
- 文字は `height: ch; line-height: ch` の span を半分の高さの箱で `overflow: hidden` にして、上半分と下半分に分ける。中央に 2px の黒い分割線と、その下に `rgba(255,255,255,.06)` の 1px の光。分割線の上は高さ `ch*0.06` の影(透明 → `rgba(0,0,0,.35)`)で沈める。
- 板の質感: 上半分は `#2c2c2c → #232323 → #1d1d1d` の縦勾配と上端 1px の光、下半分は `#171717 → #1d1d1d → #1a1a1a`。セルは `0 2px 0 #050505, 0 6px 12px rgba(0,0,0,.45)` の影で台から浮かせる。
- 回る板の陰り: 落ちる上の板は `brightness(1 → .45)`、起きる下の板は `brightness(.5 → 1)` を回転と同じ keyframes で掛ける。
- 送り: `ALPHA = ' 0123456789:ABCDEFGHIJKLMNOPQRSTUVWXYZ'` を 1 歩ずつ進め、`flipping` クラスで 2 段のアニメーション(110ms + 110ms)、225ms 後に静止の下半分を更新して次の歩へ。
- 便の切り替え: セルごとに `i*35 + row*120 ms` の遅延で開始し、左から順に波になる。`setInterval 5200ms` で自動、ボタンで即時。
- `prefers-reduced-motion`: 回転せず 30ms ごとに文字を差し替える。

## Color Palette
| Token | HEX | Role |
|---|---|---|
| --void | #0A0A0A | 地 |
| board | #111 / #222 | 板の面と枠線 |
| panel top | #2C2C2C → #1D1D1D | 板の上半分(縦勾配) |
| panel bottom | #171717 → #1A1A1A | 板の下半分(縦勾配) |
| --edge | #000 | 分割線 |
| --text | #F5F1E8 | 文字 |
| --amber | #FFAA20 | 搭乗口の文字、focus ring |
| --mute | #6B6B6B | ラベル、本文 |
| --line | rgba(245,241,232,.14) | フッター上の罫線 |
| --panel | #1E1E1E | 板の下地(勾配の下に敷く) |

## Typography
- セル: JetBrains Mono 700、`font-size: cw*1.1`、セル幅 `--cw = clamp(30px,5.2vw,74px)`、高さ 1.5cw。スマホは `clamp(22px,7.4vw,34px)`。
- 本文: h1 は Zen Kaku Gothic New 700 `clamp(17px,1.5vw,21px)`、p は 400 `clamp(13px,1.05vw,15px)`。中央揃え、最大幅 32em。p は2句を `inline-block` の span に分け、句の途中で折り返さない。
- ボタン: Zen Kaku Gothic New 500 13px、1px の白枠のピル(padding 11px 18px)。hover で白地に反転。
- ラベル: JetBrains Mono 11px、字間 .14em、大文字。

## Spacing & Layout
- 板: 内側 `cw*0.36`、行間 `cw*0.18`、セル間 `cw*0.1`。角丸 6px、下に大きな影。
- 行: time 5 セル、to 9 セル、gate 3 セル(橙)。行ラベル幅 `cw*1.6`。
- 余白 `clamp(20px,3vw,40px) clamp(20px,5vw,72px)`。板と短文の間隔 `clamp(22px,3vw,40px)`。
- breakpoint 640px: `--cw` を `clamp(22px,7.4vw,34px)`、左右 14px、板の内側 12px、行ラベルとヘッダー右を隠し、フッターを縦積み。

## Motion
- 1 歩 225ms(上 110ms ease-in + 下 110ms ease-out)。1 便の切り替えは最大 37 歩 × 225ms ≈ 8.3 秒だが、送りの距離が短い文字はすぐ止まる。
- 読み込み時は1便目の完成状態を出し、同じ処理の中で全セルの1歩目を遅延なしで回して2便目へ向かう。以降の自動切り替えは 5.2 秒ごと(前の便を回し終える前に次の目的の文字へ切り替わることがある)。ボタンで即時。
- reduced-motion では差し替えのみ。

## Components
- board: 3 行のセル群(aria-live=polite)。
- footer: 左にボタン「次の便」、右に `VALE / PARTS 017 / 反転フラップ` と説明 1 行。

## Do / Don't
Do
- 文字送りの順番を固定する。ランダムにしない。
- 色は白と橙だけ。橙は 1 行。
- 板の分割線を必ず入れる。
Don't
- 実在の空港や航空会社の表示を写さない。
- 回転を速くしすぎない(1 歩 200ms 前後)。
- 音を足さない。

## References
- Chantlings: ほぼ黒の地に、琥珀色の小さな光だけを置く考え方を抽象化した。琥珀は搭乗口の 3 文字に限った。
- Phantom Studios: 黒い面に白い文字と 1 色の信号、等幅書体のメタ情報という構成を抽象化した。緑は使わず、等幅書体を板の文字そのものにした。

## Usage
1. CSS の `.cell` 〜 `@keyframes fb` と `:root` の `--cw` をコピーする。
2. `ROWS`(行ラベルと桁数、橙かどうか)と `FLIGHTS`(表示する文字列の配列)を書き換える。文字は `ALPHA` に含まれるものだけ。日本語を出すなら `ALPHA` に文字を追加する(送りの歩数が増える)。
3. `setFlight(['14:05','SAPPORO','A12'])` を呼ぶと左から順に回り始める。板は空の `<div id="board">` に JS がセルを組み立てる。自動切り替えが不要なら `setInterval(nextFlight, 5200)` を消す。
4. パラメータ: `--dur`(片面の回転時間、CSS 変数)、`225`(1 歩の総時間、JS)、`i*35 + ri*120`(開始の遅延)、`5200`(自動切り替え)。