# RESULT 画面 仕様（v3 / result）— 2026-10-09 磨き込み

置き場所: `v3/result/` — v3 のスキン・キャスト・`mock/play.css`・`art.js` をそのまま再利用するため、別バージョン（v4）にせず v3 の一部としてまとめた。
- `mock/result.html?view=result|log|share&skin=a|b|c&res=good|poor` … モック本体（`parts.js` / `result.css`）
  - 互換: `p=1|2|3` はそれぞれ `view=result|log|share` のエイリアス
- `mock/render.py` … 2x PNG 出力（Playwright + Chrome）、`mock/compare.py` … 比較シート
- `png/` … 出力画像

## 0. 今夜の確定（2026-10-09）— 未決4点への推奨

| # | 未決 | 推奨（案A適用） | 見た目の落とし込み |
|---|---|---|---|
| 1 | スマホの振り返り | **ミス1件だけ**。他は「ほか N フレーズ」リンク | 案A スマホ。N=0 ならリンク非表示 |
| 2 | 演出 | **止め絵のみ**。パーティクルは静止SVG。アニメ・動き線・「再生中」UIなし | `.confetti.static`、キャラポーズ固定 |
| 3 | 旧P2 | **会話ログ詳細**画面へ転用。P1の「会話ログで振り返る」から開く | 案B `view=log`。ヘッダー「結果へ」 |
| 4 | 旧P3 | **共有カード**（カード保存の出力）へ転用 | 案C `view=share`。キャプション「共有用カード」 |

**レイアウト確定**: 結果画面は **P1「舞台＋結果パネル」** を採用（推奨→確定）。

## 1. 目的（この層にとって）
オタク学習者が「楽しい雑談シーンを1本見終えた」余韻のまま、
1. **達成感** — ランク発表と仲間たちの記号リアクション（♪・ハート・拍手線・✓）で「クリア！」を祝う
2. **次へのモチベーション** — 主ボタンは「次のシーンへ」（好成績）／「苦手フレーズを練習」（低スコア）。ランクアップまでの差分を1行で示す
3. **軽い振り返り** — 言えなかったフレーズだけを、原文＋読み（ローマ字／ピンイン）＋訳＋「あなたの入力 → 正解」で確認。テスト感は出さない

低スコアでも責めない：見出しは「完走！」、キャストはグッド・スマイル・照れ汗で励ます。赤×や「失敗」の語は使わない。

## 2. 情報の優先順位（結果画面＝view=result）
| 順 | 要素 | 表現 |
|---|---|---|
| 1 | ランク＋見出し | スキン固有のメダル＋「シーンクリア！」「完走！」 |
| 2 | スコア | 大数字＋「ランクSまであと◯pt」チップ＋ひとこと評 |
| 3 | 正確率・速度・最大コンボ・ヒント | 4タイル。自己ベストはバッジ |
| 4 | もう一度言いたいフレーズ | ミスカード前面。言えたフレーズはコンパクト1行 |
| 5 | 会話ログへの導線 | CTA「会話ログで振り返る」→ `view=log` |
| 6 | 次の行動 | 主: 次のシーン / 苦手練習。副: もう一度・シーン選択・**カード保存**→ `view=share` |

キーボード: Enter=主ボタン、R=もう一度、Esc=シーン選択（PC のみ表示）。

## 3. 3ビュー（旧レイアウト3案の役割分担）
- **view=result（旧P1・確定）** — 左に舞台（キャスト＋記号吹き出し＋ランク発表）、右に学習パネル。スマホは上舞台／下パネル。「舞台は記号・言葉はパネル」の原則を守る。
- **view=log（旧P2転用）** — セッションを会話として再生する**詳細画面**。ヘッダーに「結果へ」。友だちは記号、自分の発言だけ文字、ミスは赤枠＋練習。祝祭感は控えめ（ランクは小さく）。
- **view=share（旧P3転用）** — 「カード保存」で出る**共有用カード**の見た目。スタンプ帳風。ランク・スコア・シーン名・日付・公式ねこマーク。舞台セリフ文字なし。周囲はぼかし舞台（PC）／カード全幅（スマホ）。

## 4. 共通とスキンの分担
**共通**: 画面骨組み・パネル位置・情報の順番・タイル数・ボタン配置と文言・キャスト配置・記号吹き出しの形・アイコン（HUD の公式ねこマークのみ、舞台に猫は出さない）。

**スキンが変えるもの**: 背景キービジュアル／パネルの額縁（A 木の装丁、B 切符＋切り取り線、C ネオン管）／ランクメダルの意匠／見出しバナー／アクセント色／止め絵の意匠（A 光の粒、B 紙ふぶき、C 花火）— いずれも静止。

## 5. 舞台のルール（SKIN-SPEC 準拠）
- 吹き出しは記号のみ（… ●●● スマイル弧 ♪ 笑い線 ハート きらめき 👍 汗）。文字のセリフは禁止
- 吹き出し同士・バナー・パネルと重ねない。スマホでは猫耳を省き3人に減らす
- 実際の言語テキストは結果パネル内だけ
- **演出は止め絵**: confetti/花火は静止SVG。キャラはポーズ固定。動き線や再生中UIは付けない

## 6. 公式アイコン
手描き白線切り抜きのねこマーク（ネオンピンク `#FF2D95`）。共有カードにも必ず入れる。

## 7. 今夜出したファイル（2026-10-09）
### モック
- `v3/result/mock/result.html` — `view=` / `p=` 両対応
- `v3/result/mock/parts.js` — 案A/B/C 実装
- `v3/result/mock/result.css` — 磨き込みスタイル追記
- `v3/result/mock/render.py` / `compare.py`

### PNG（2x・論理サイズ 1280×800 / 390×844）
- `png/result-P1-C-good--desktop.png` / `--mobile.png` … 案A
- `png/result-P1-C-poor--mobile.png` … 案A 低スコア（ほか2フレーズ）
- `png/result-log-C-good--desktop.png` / `--mobile.png` … 案B
- `png/result-share-C-good--desktop.png` / `--mobile.png` … 案C
- `png/compare-polish--desktop.png` / `compare-polish--mobile.png` … 比較シート

## 8. 残課題
- ユーザー確認待ち: 案Aを結果の本線としてよいか／案B・Cの遷移文言
- シーン選択・トップ画面は結果画面の返事後に着手
- 他スキン（A/B）への磨き反映は結果確定後

## 9. 磨き込み2（2026-10-10）— `?v=2`
ユーザー返答「結果画面をもう少し磨いてほしい」（具体点なし）を受け、P1レイアウト・v3舞台原則は維持したまま手応えと読みやすさを上げた。実装は `mock/polish2.css` / `mock/polish2.js`（`v=2` のときだけ parts.js の出力を後処理）。
1. **スコアが主役**: 64px・等幅数字。前回の「あと640pt」チップを **A→S 進捗ゲージ**（現在位置マーカー＋「あと 640 pt」）に置換。ボーナス小札（好成績「ノーヒント級 +500」／低スコア「完走ボーナス +300」）。
2. **ランクの見せ場**: 舞台のランク下（スマホはメダル下）に **星3段階**（好成績★★☆・低スコア★☆☆）。止め絵のまま。
3. **5フレーズ帯**: 途切れていた「言えた」1行を廃止し、①〜⑤を線でつないだ帯（✓／!）＋「ノーミス 4/5」。PC・スマホ・会話ログで共通。
4. **振り返りは1件**: PCも低スコア時はミス1件＋「ほか N フレーズは会話ログで」（はみ出し解消、スマホと統一）。練習ボタンを塗りに。
5. **次の行動**: 「次は？」区切り。主ボタンに次シーンのサムネ（02）を付け 72px に。「もう一度」は金枠＋「S まで 640pt／ランクBを狙う」で再挑戦の理由を添える。
- 案B（ログ）: 上部に5フレーズ帯。案C（共有）: 星＋ゲージ追加、スマホは縦組み（ランク→見出し→スコア→星→ゲージ→スタンプ→2×2統計）に再構成。

出力（`python mock/render.py --p2`、`python mock/compare2.py`）:
- `png/result-P1-C-good-polish2--{desktop,mobile}.png` / `result-P1-C-poor-polish2--{desktop,mobile}.png`
- `png/result-log-C-good-polish2--{desktop,mobile}.png` / `result-share-C-good-polish2--{desktop,mobile}.png`
- `png/compare-polish2--desktop.png` / `compare-polish2--mobile.png`（前回→今回）

## 10. 磨き込み3（2026-10-10夜）— `?v=3`
ユーザー返事なしのため新画面には進まず、案A（view=result）を磨き2の上でさらに手応えを上げた。実装は `mock/polish3.css` / `mock/polish3.js`（`v=3` のときだけ。polish2 のDOM後処理も v=3 で再利用）。
1. **余白の呼吸**: スコア＋ひとこと＋ゲージを `.hero3` ヒーローカードにまとめ、パネル余白を広げ、統計タイルは枠のみ・背景透過で視覚重量を落とす。
2. **振り返りの明瞭さ**: ミスカードの「あなたの入力 → 正解」を **あなた／正解の2段対比**（`.cmp3`）に変更。練習ボタンは塗り維持。PCもミス1件＋「ほか N は会話ログで」（磨き2継承）。中文行は対比と役割が重なるため対比時は非表示。
3. **次への一歩**: 主ボタンをさらに主役（好成績＝次シーン＋サムネ／低スコア＝苦手練習）。副ボタン（もう一度・シーン選択・カード保存）は ghost/outline。スマホ下段は高さ・gapを圧縮して混雑を緩和。
- 任意の祝祭強化（止め絵のまま）: 舞台の星周りにソフト背景・わずかな余白。パーティクルは静止のまま。
- 案B（ログ）: 帯の余白だけ軽追随。案C（共有）: 星・ゲージ周りにソフト背景。

出力（`python mock/render.py --p3`、`python mock/compare3.py`）:
- `png/result-P1-C-good-polish3--{desktop,mobile}.png` / `result-P1-C-poor-polish3--{desktop,mobile}.png`
- `png/result-log-C-good-polish3--{desktop,mobile}.png` / `result-share-C-good-polish3--{desktop,mobile}.png`
- `png/compare-polish3--desktop.png` / `compare-polish3--mobile.png`（polish2→polish3）

### 残課題（磨き3時点）
- **ユーザー返事待ち**: 案A磨き3の方向でよいか／これ以上の調整点
- **シーン選択・トップ画面は返事後に着手**（返事がないあいだは結果画面の磨きを優先）
- 他スキン（A/B）への磨き反映は結果確定後

## 11. 磨き込み4（2026-10-11日曜）— `?v=4`
ユーザー返事なしのため新画面には進まず、案A（view=result / P1）を磨き3の上でさらに視線と学びやすさを上げた。実装は `mock/polish4.css` / `mock/polish4.js`（`v=4`）。polish2 は v=2|3|4、polish3 は v=3|4 でも DOM 後処理を継承。

### 変更点
1. **視線の3帯**: パネル内を「祝う（ヒーロー）→知る（統計＋フレーズ帯）→直す＆次へ（振り返り＋主ボタン）」に分ける。ヒーロー下に薄い区切り線（`.zdiv4`）、知る帯に小さな見出しチップ「いまの結果」（`.zchip4`）、振り返り帯手前にソフト区切り。`.rv h4` をチップ風に明確化。
2. **漢字差ハイライト**: ミス対比 `.cmp3` で、あなた入力と正解の差分だけを `<mark class="diff">` で強調（例: 新**館**→新**刊**、表**示**→表**紙**）。先頭共通／末尾共通を残し真ん中の差を mark（`polish4.js` の `markDiff`）。読み（ローマ字）はそのまま。
3. **完走リボン**: ヒーロー内スコア上に小さな完走タグ。好成績「SCENE CLEAR · 完走」、低スコア「完走！」（責めないトーン）。止め絵のまま・点滅なし。案C（共有）にも軽追随。
4. **主ボタン先読み**: 好成績の次シーンボタンに短い一行サブコピー（NEXT.name「列に並んで雑談」→「列並びの雑談へ」）。低スコア主ボタン「苦手フレーズを練習」はそのまま主役。
5. **スマホ圧縮**: 統計タイルをさらにコンパクト（アイコン縮小・数字優先）。フレーズ帯パディング削減。パネル `top` をわずかに上げて主ボタンが切れないよう調整。PCは余白の呼吸を保つ。

### ファイル
- 新規: `mock/polish4.css` / `mock/polish4.js` / `mock/compare4.py`
- 更新: `mock/result.html`（polish4 読み込み）、`mock/polish2.js`（v=4 含む）、`mock/polish3.js`（v=3|4）、`mock/render.py`（`--p4`）

### 出力（`python mock/render.py --p4`、`python mock/compare4.py`）
- `png/result-P1-C-good-polish4--{desktop,mobile}.png` / `result-P1-C-poor-polish4--{desktop,mobile}.png`
- `png/result-log-C-good-polish4--{desktop,mobile}.png` / `result-share-C-good-polish4--{desktop,mobile}.png`
- `png/compare-polish4--desktop.png` / `compare-polish4--mobile.png`（polish3→polish4）

### 残課題（磨き4時点）
- **ユーザー返事待ち**: 案A磨き4の方向でよいか／これ以上の調整点
- **シーン選択・トップ画面は返事後に着手**（返事がないあいだは結果画面の磨きを優先）
- 他スキン（A/B）への磨き反映は結果確定後

## 12. 磨き込み5（2026-10-12月）— `?v=5`
ユーザー返事なしのため新画面には進まず、案A（view=result / P1）を磨き4の上でさらに学びやすさと視線ラベルを上げた。実装は `mock/polish5.css` / `mock/polish5.js`（`v=5`）。polish2 は v=2|3|4|5、polish3 は v=3|4|5、polish4 は v=4|5 でも DOM 後処理を継承。

### 変更点
1. **学び一行（同音異義ヒント）**: ミス対比 `.cmp3` の直下に柔らかいチップ（`.tip5`）。講義調にせず短い同音メモ。例: 新館↔新刊 →「同音: 館＝たてもの／刊＝本」、表示↔表紙 →「同音: 示＝しめす／紙＝かみ」（既刊↔機関も同型で用意）。
2. **自己ベストの祝うチップ**: 好成績で速度に自己ベストがあるとき、ヒーロー（`.hero3`）内にゴールドの止め絵チップ「速度 自己ベスト」（`.best5`）。祝う帯のみ。案C（共有）にも軽追随。
3. **「直す＆次へ」帯ラベル**: 磨き4は知る帯に「いまの結果」のみ。振り返り手前の区切り（`.zdiv4`）に同型チップ「直す＆次へ」（`.zchip5`）を追加し、3帯のラベルを揃える。
4. **PCショートカット行**: デスクトップのみ、副ボタン下に低コントラストの一行（`.keys5`）「Enter 主ボタン · R もう一度 · Esc シーン選択」。スマホは非表示。
5. **主ボタン先読みの視認性**: 磨き4の absolute `.peek4` をやめ、タイトル下のフロー行 `.peek5` に組み直し（グリッドでサムネ／small／b／peek／key を整列）。衝突を避けコントラストを上げる。好成績の次シーンサムネ縁はソフトグロー（止め絵）。

### ファイル
- 新規: `mock/polish5.css` / `mock/polish5.js` / `mock/compare5.py`
- 更新: `mock/result.html`（polish5 読み込み）、`mock/polish2.js`（v=5 含む）、`mock/polish3.js`（v=3|4|5）、`mock/polish4.js`（v=4|5）、`mock/render.py`（`--p5`）

### 出力（`python mock/render.py --p5`、`python mock/compare5.py`）
- `png/result-P1-C-good-polish5--{desktop,mobile}.png` / `result-P1-C-poor-polish5--{desktop,mobile}.png`
- `png/result-log-C-good-polish5--{desktop,mobile}.png` / `result-share-C-good-polish5--{desktop,mobile}.png`
- `png/compare-polish5--desktop.png` / `compare-polish5--mobile.png`（polish4→polish5）

### 残課題（磨き5時点）
- **ユーザー返事待ち**: 案A磨き5の方向でよいか／これ以上の調整点
- **シーン選択・トップ画面は返事後に着手**（返事がないあいだは結果画面の磨きを優先）
- 他スキン（A/B）への磨き反映は結果確定後

## 13. 磨き込み6（2026-10-13火）— `?v=6`
ユーザー返事なしのため新画面には進まず、案A（view=result / P1）を磨き5の上で「次に何をすればいいか」と「祝う理由」を増やした。実装は `mock/polish6.css` / `mock/polish6.js`（`v=6`）。polish2 は v=2|3|4|5|6、polish3 は v=3|4|5|6、polish4 は v=4|5|6、polish5 は v=5|6 でも DOM 後処理を継承。止め絵のみ（animation / @keyframes なし）。

### 変更点
1. **次の一手ナッジ**（`.nudge6`）: ヒーロー `.hero3` 内、ゲージ直下に1行（`.row6`）。責めずに行動を具体に。好成績「▸ ノーミスなら **S** に届く」／低スコア「▸ 苦手1件直せば **B** へ」。祝うチップ（`.best5`／`.combo6`）は同じ行の右に寄せ、ヒーローの高さを増やさない。低スコアのゲージ文言は「苦手3つでランクB」→「ランクBまで」に揃え、ナッジと矛盾しないようにした。
2. **コンボ祝うチップ**（`.combo6`）: `R.combo >= 3` のときヒーロー内に止め絵チップ「🔥コンボ ×N」（`.best5` と同型・シアン）。好成績（×4）で表示、低スコア（×2）は出さない。案C（`.rkcol`）にも自己ベストの隣に軽追随。
3. **練習の所要感**（`.eta6`）: ミスカードの練習ボタン `.miss .mbtn` に「約1分」を2段目で添える（アイコンだけの compact ボタンにも付く）。
4. **フレーズ帯の話者色リング**（`.sp6-0`〜`.sp6-4`）: `.strip2 .s2` の丸にインデックス別の細いリング（シアン #3FE0E8／金 #FFC857／ラベンダー #B49CFF／ミント #5BEBB0／ピンク #FF8CC6）、番号も同色。ミスカード番号 `.mn` にも同じリングを付け、帯↔カードの対応が一目で分かる。案B（会話ログ）の帯にも自然に効く。
5. **高精度バッジ**（`.acc6`）: 正確率 `R.acc >= 95` で正確率タイルのアイコン行右にミントの小バッジ「高精度」、タイル縁もミント寄り。好成績（96%）で表示。PERFECT の語は使わない。案C の統計フッターにも軽追随（PC は上辺タブ、スマホはインライン）。

### ついでに直したこと
- 主ボタン（好成績）の先読み「列並びの雑談へ」がボタン下端からはみ出していた（磨き5から: 上位の `gap:14px!important` が row-gap に効いていた）→ row-gap 0・行高固定・中央寄せ。
- 低スコアはナッジ1行ぶん、PC・スマホとも余白（pg/rv/ml gap、ミスカード・ヒーローの padding）を詰めて、副ボタン行が下端チューブに触れないようにした（好成績は磨き5の余白を維持）。
- 案C スマホ: スロットが統計フッターに重なっていたのを、ランク札・スコア・スタンプを詰めて解消。

### ファイル
- 新規: `mock/polish6.css` / `mock/polish6.js` / `mock/compare6.py`
- 更新: `mock/result.html`（polish6 読み込み）、`mock/polish2.js`（v=2|3|4|5|6）、`mock/polish3.js`（v=3|4|5|6）、`mock/polish4.js`（v=4|5|6）、`mock/polish5.js`（v=5|6）、`mock/render.py`（`--p6`）

### 出力（`python mock/render.py --p6`、`python mock/compare6.py`）
- `png/result-P1-C-good-polish6--{desktop,mobile}.png` / `result-P1-C-poor-polish6--{desktop,mobile}.png`
- `png/result-log-C-good-polish6--{desktop,mobile}.png` / `result-share-C-good-polish6--{desktop,mobile}.png`
- `png/compare-polish6--desktop.png` / `compare-polish6--mobile.png`（polish5→polish6）

### 残課題（磨き6時点）
- **ユーザー返事待ち**: 案A磨き6の方向でよいか／これ以上の調整点
- **シーン選択・トップ画面は返事後に着手**（返事がないあいだは結果画面の磨きを優先）
- 話者色リングは今はインデックス固定5色。キャラ（seller/cap/catear）ごとの色に寄せるかは返事次第
- 他スキン（A/B）への磨き反映は結果確定後

---

## 日曜週次まとめ（2026-10-05 〜 2026-10-11）

### 今週出した案
- 結果画面3案整理: **案A=P1本線**（舞台＋結果パネル）／**案B=log**（会話ログ詳細・旧P2転用）／**案C=share**（共有カード・旧P3転用）
- 磨き2（`?v=2`）: スコア主役・星・5フレーズ帯・振り返り1件・次の行動明確化
- 磨き3（`?v=3`）: ヒーローカード・ミス2段対比・主ボタン主役／副ghost
- 磨き4（`?v=4`）: 視線3帯・漢字差ハイライト・完走リボン・主ボタン先読み・スマホ圧縮
- 磨き5（`?v=5`）: 同音異義ヒント・自己ベスト祝う・直す帯ラベル・PCショートカット・先読み視認性

### 決まったこと
- 結果レイアウトは **P1「舞台＋結果パネル」**
- スマホ振り返りは **ミス1件**（ほかは会話ログへ）
- 演出は **止め絵のみ**（パーティクル静止・キャラポーズ固定）
- 旧P2→**ログ詳細**、旧P3→**共有カード**
- 公式アイコンは手描き白線切り抜き（ネオンピンク `#FF2D95`）
- v3プレイ原則: 舞台は記号吹き出しのみ・言葉はパネルのみ、低スコアでも責めない

### 未決
- 案A磨き5の方向でよいか／これ以上の調整点
- シーン選択・トップ画面は **ユーザー返事後**

### 来週やる画面
- ユーザー返事後に **シーン選択・トップ案**（各2〜3パターン、PC 1280×800／スマホ 390×844）

## 14. 磨き込み7（2026-10-14水）— `?v=7` 引き算の回
ユーザー「見直しをしてください。直すべき要素はありませんか？」を受け、磨き2〜6で足した要素の重複を削った。実装は `mock/polish7.css` / `mock/polish7.js`（polish2〜6 を v=7 でも継承したうえで非表示・整理）。
- 削除: ヒーロー内「完走」リボン（見出しと重複）、ボーナス小札、祝うチップ（速度 自己ベスト／コンボ×4）、高精度バッジ、星（ランクと重複・スマホでメダルと衝突）、帯ラベル「いまの結果」「直す＆次へ」「次は？」、主ボタン2行目「列並びの雑談へ」、もう一度の補足、PCショートカット行、「もう一度言いたい !N」見出し。
- 戻した: フレーズ帯の話者色リング（✓緑／!赤の意味色と衝突）→ 2色のみ。
- 簡略: ゲージ文言「ランクSまで あと640pt」→「あと640pt」。会話ログ導線は1本（好成績＝右寄せリンク、低スコア＝「ほかNフレーズは会話ログで」）。
- 底上げ: 統計ラベル・同音メモ・あなた/正解ラベルを11〜12pxへ。
- 出力: `png/result-P1-C-{good,poor}-polish7--{desktop,mobile}.png`、`png/compare-polish7--{desktop,mobile}.png`
- 残: UI言語（学習者#1なら繁體中文UI）・自己ベスト札・同音メモの扱いはユーザー判断。

## 15. UI言語切り替え（2026-10-14水）— `?v=7&lang=ja|zh-TW`
ユーザー決定: UI言語は切り替え式。磨き7の上で `mock/lang.js` / `mock/lang.css`（最後に読み込み）。既定は `ja`。
- 対象: ボタン・見出し・ラベル・案内文・HUD（シーン名・パック名・プレイ時間）。**出題の日本語フレーズ（.mjp／あなた・正解の比較／ローマ字）は両言語とも日本語のまま**。訳は母語側（学習者#1＝繁中「我也想要新刊！」）。
- 繁中は Noto Sans TC（`--font-zh`）、日本語フレーズは `lang=ja` で Noto Sans JP を維持（新/刊などの字形が日本式のまま）。
- 言語つまみ: HUD のタイマー左に小さな「日本語 / 繁中」ピル（選択中はシアン）。PC は中央の進捗ドットに重ねない位置、スマホはシーン名とタイマーの間。
- シーン名: ja「ブースで雑談」／zh「攤位前閒聊」。次シーン: ja「列に並んで雑談」／zh「排隊時的閒聊」。
- 主な訳: シーンクリア→過關！／完走→完成了！／次のシーンへ→前往下一個場景／もう一度→再玩一次／シーン選択→選擇場景／カード保存→儲存卡片／会話ログ→對話紀錄／最大コンボ→最高連擊／ヒント→提示／減点なし→不扣分／自己ベスト→個人最佳／ノーミス→全對／苦手フレーズを練習→練習不熟的句子／あなた・正解→你打的・正確／あと→還差／同音メモ→「同音 shinkan：館＝建築物／刊＝書刊」。
- 出力（`python mock/render.py --p7 --lang result`、`python mock/compare-lang.py`）:
  - `png/result-P1-C-{good,poor}-polish7-{ja,zh-TW}--{desktop,mobile}.png`（8枚）
  - `png/compare-lang--desktop.png` / `compare-lang--mobile.png`
- 残: 会話ログ・共有カードへの言語反映は未着手。

## 16. 磨き込み8（2026-10-14水）— ログ・共有カードの言語切り替え — `?v=8&lang=ja|zh-TW`
§15 の残「会話ログ・共有カードへの言語反映は未着手」を片付ける回。ユーザー返事なしのため新画面（シーン選択・トップ）には進まない。新しい要素は足さず、磨き7の引き算を共有カードにもそろえた。実装は `mock/lang.js` / `mock/lang.css`（辞書・書体）と `mock/polish8.js` / `mock/polish8.css`（v=8 だけ）。polish2〜7 は v=8 でも継承。

### 変更点
1. **会話ログ（view=log）・共有カード（view=share）を ja / zh-TW 切り替えに対応**: `lang.js` の辞書を拡張（ボタン・タブ・案内・区切り行・パック名・カードのバッジなど）。日本語UIでも、繁中のまま残っていたシーン名（区切り行「— 01 攤位前閒聊 —」、カード見出し「01 攤位前閒聊」）を「ブースで雑談」にそろえた。
2. **言語ピルの位置**: ログは P1 と同じ（HUD のタイマー札の左。スマホはシーン名と RANK 札のあいだ）。共有カードは HUD がないので、HUD と同じ行の画面右上に単独で置く（**カードの外**なので保存される画像には入らない）。
3. **書体の直し（両言語・P1 にも効く）**: これまで zh-TW は「lang=ja 以外を全部 Noto Sans TC」にしていたため、スコア・RANK・%・×4 など数字や英字まで TC 字形になり、日本語版と字面がずれていた。→ 書体トークンを言語ごとに差し替える方式に変更。UI 文字＝ja: Noto Sans JP／zh: Noto Sans TC、数字・英字＝両言語 Nunito、学習対象の日本語（.mjp/.c3v/.sj/lang=ja）＝両言語 Zen Maru Gothic・Noto Sans JP。日本語UIの地の文も TC 字形だったのを JP 字形に。「ほか N フレーズ（新刊・既刊）」の語も lang=ja、繁中では区切りを「、」に。
4. **共有カードにも磨き7の引き算**: 完走タグ「SCENE CLEAR · 完走」（見出しと重複）を外し、ゲージ文言を「あと 640 pt」だけに（P1 と同じ）。スマホ上部のヒント「共有用カード」はカード内バッジと同じ文言だったので「保存イメージ」に言い換え。
5. **崩れの修正**: (a) 共有カード PC の統計フッターが右のネオン管にはみ出していた（磨き2から・両言語）→ 4列均等＋「自己ベスト」札をタイル上辺のタブへ。(b) スマホ共有カードで「わたしも新／刊ほしい！」と語の途中で改行していた → 日本語フレーズは文節改行（`word-break:auto-phrase`）。(c) 「もう一度」ボタンの文字が 2px 上にずれていた（磨き7で外した2行目の行間が残っていた）→ 1行に。

### 主な訳（zh-TW・台湾の言い方）
| 日本語 | 繁體中文 |
|---|---|
| 結果へ／結果へ戻る | 返回結果 |
| 会話ログ（タブ） | 對話紀錄 |
| ミスだけ／ミス | 只看打錯／打錯 |
| 友だちは記号 · 自分だけ文字 | 朋友用符號回應 · 只顯示你說的話 |
| 記号＝友だち | 符號＝朋友 |
| — 01 ブースで雑談 · 5フレーズ — | — 01 攤位前閒聊 · 5 句 — |
| — おしまい — | — 聊完了 — |
| あなたの入力 新館 → 新刊 | 你打的 新館 → 新刊（語は日本語のまま） |
| 次へ（スマホ） | 下一個場景 |
| 共有用カード | 分享卡 |
| カード保存 · この画像が出力されます | 儲存卡片 · 會輸出這張圖片 |
| 保存イメージ（スマホ） | 儲存預覽 |
| コミケの雑談 · 2026.10.09 | 同人展閒聊 · 2026.10.09 |
| （訳）既刊もありますか？ | 也有舊刊嗎？（同人用語の「舊刊」） |

### ファイル
- 新規: `mock/polish8.js` / `mock/polish8.css` / `mock/compare8.py`
- 更新: `mock/lang.js`（辞書・ピル・lang 属性）、`mock/lang.css`（書体トークン・共有カードのピル）、`mock/result.html`（polish8 読み込み）、`mock/polish2〜7.js`（v=8 でも継承）、`mock/render.py`（`--p8`）

### 出力（`python mock/render.py --p8 --lang`、`python mock/compare8.py`）
- `png/compare-polish8--desktop.png` / `compare-polish8--mobile.png`（日本語／繁中を並べ、P1 好成績・低スコア・会話ログ・共有カードを俯瞰）
- `png/result-log-polish8-{ja,zh-TW}--{desktop,mobile}.png`
- `png/result-share-polish8-{ja,zh-TW}--{desktop,mobile}.png`
- `png/result-P1-C-{good,poor}-polish8-{ja,zh-TW}--{desktop,mobile}.png`

### 残課題（磨き8時点）
- **ユーザー返事待ち**: 結果画面一式（P1・ログ・共有カード）の 2 言語版でよいか
- 共有カードの言語: いまは「保存したときの UI 言語」で出す。台湾の友だちに見せる用途なら、日本語UIでも繁中カード（または併記）を選べるべきか
- 会話ログ PC は 5 フレーズ目がスクロール外（モックは止め絵なので見えない）。表示件数の調整は返事後
- 低スコアの会話ログはスマホ配置が好成績と違う（磨き2以前から。今回は好成績のみ出力）
- シーン選択・トップ画面は返事後に着手。他スキン（A/B）への反映は結果確定後

## 17. 共有カードのカード言語（2026-10-15木）— `?view=share&v=8&cl=ja|zh-TW|both`
ユーザー決定: 結果画面一式は磨き8で確定。共有カードはカード言語を **日本語・繁中・2言語併記** の3つから選べるようにする。磨き8（`v=8`）の上に `mock/cardlang.js` / `mock/cardlang.css` を足しただけで、カードの骨組み・部品は変えていない。

### 切り替え
- **画面の UI 言語（`lang=`）とは別**。UI が日本語のままでも繁中カードを作れる（台湾の友だちに見せる用途）。既定はいまの UI 言語。
- 置き場所は**カードの外**＝保存される画像には入らない。PC は上中央の「カード保存 · この画像が出力されます」の右に「カードの言語｜日本語｜繁中｜併記」。スマホは左上に「カード｜日本語｜繁中｜併記」（右上は従来の UI 言語ピル）。
- UI 言語の切り替え（シアン）と区別するため、カード言語は金（#FFC857）の枠と選択色。繁中 UI では「卡片語言｜日本語｜繁中｜雙語」。

### カードの中身
| 要素 | 日本語 | 繁中 | 併記 |
|---|---|---|---|
| バッジ | 共有用カード | 分享卡 | 共有用カード · 分享卡（1行） |
| シーン名 | 01 ブースで雑談 | 01 攤位前閒聊 | 上: 01 ブースで雑談 / 下: 攤位前閒聊（小） |
| パック・日付 | コミケの雑談 · 2026.10.09 | 同人展閒聊 · 2026.10.09 | コミケの雑談 · 同人展閒聊 · 2026.10.09（1行） |
| 見出し | シーンクリア！ | 過關！ | 上: シーンクリア！（24px） / 下: 過關！（15px） |
| ゲージ | あと 640 pt | 還差 640 pt | あと · 還差 640 pt |
| 統計ラベル | 正確率・速度・最大コンボ・ヒント | 正確率・速度・最高連擊・提示 | 字面が同じもの（正確率・速度）は1回だけ。違うものは2段（最大コンボ／最高連擊、ヒント／提示） |
| 自己ベスト札 | 自己ベスト | 個人最佳 | PC: 自己ベスト · 個人最佳（タブ1行）／スマホ: 2段の札 |
- 学習フレーズ（スタンプの下の日本語＋ローマ字）は、どのカード言語でも日本語のまま（結果画面と同じ）。SCORE・RANK・PACK・数字は英字のまま。
- 書体: カードの日本語ラベル＝Noto Sans JP、繁中＝Noto Sans TC、数字・英字＝Nunito、学習フレーズ＝Zen Maru Gothic（結果画面と同じ）。見出し「シーンクリア！」もカード上は Noto Sans JP にそろえ、併記で上下の字面が揃うようにした。

### 確認して直したこと
- 併記のパック行が `b9-stack` の継承で縦に崩れていた → 1行に。
- スマホ併記で「自己ベスト · 個人最佳」が横に並ぶと「速度」がタイル外にはみ出した → 2段の札に。
- 保存画像（カード要素だけ）の書き出しで上辺のネオン管が切れていた → 周囲 16px を含めて切り出し。

### 出力（`python mock/render-cardlang.py`、`python mock/compare-cardlang.py`）
- `png/compare-share-cardlang.png` … まず見せる1枚（上段 PC／下段 スマホ × 日本語・繁中・併記）
- `png/compare-share-cardlang-export.png` … 保存される画像（カードだけ）3種
- `png/compare-share-cardlang-ui-zh.png` … 繁中 UI で併記を選んだとき
- `png/result-share-card-{ja,zh-TW,both}--{desktop,mobile}.png`、`-export--*.png`、`result-share-card-both-ui-zh-TW--*.png`