画面を denpa の見た目の決まりに合わせる

CLAUDE.md

@@ -146,11 +146,26 @@ bun run build      # 画面と CLI(build/cli.js)
 
 ## 画面
 
-トドロクと同じ作り。Pico の出来合いの CSS + `src/app.css` の共通クラス(`.page-container` `.head` `.panel` `.panel-head` `.rows` `.stats` `.stat` `.tag` `.note` `.two` `.stack` `.cluster` `.empty`)+ 画面ごとの scoped style。アイコンは `Icon.svelte`(lucide のパスを持つ)。Web フォントは束ねない。色は Pico の既定と、差し色の葦の緑(`--ui-accent`)。
+見た目は **denpa の「見た目の決まり」**([danything/denpa の docs/design.md](https://github.com/danything/denpa/blob/main/docs/design.md))に従う。合言葉は「塗らない。囲みすぎない。浮かせすぎない。でも、ちゃんと伝わる。」。画面を直す前にそちらを読む(文言は同じ場所の docs/writing.md)。Ashi の側には決まりを写さず、当て方と Ashi だけの違いだけをここに書く。
 
-文言は日本語。見出しに括弧で説明を付けない(補足は文に開く)。
+作りは Pico CSS(`src/app.css` の頭で `pico` の層に入れて読むので、こちらの規則と画面の `<style>` は詳細度に関係なく Pico に勝つ)+ `src/app.css` の値と共通クラス + 画面ごとの scoped style。値の名前(`--dp-*`: 色・角丸・余白 6 段・字の大きさ 6 段・動きの時間 4 つと曲線 3 つ・重なりの段)と部品の作りは denpa の `src/app.css` に合わせてある。画面ごとに新しい数字を作らず、この名前から選ぶ。アイコンは `Icon.svelte`(lucide のパスを持つ)。Web フォントは束ねない。
+
+- **層は 3 つ**
+  - 地: ページ・読み物(ノート・日記・自己記述・持ち主の地図)・まとまり(`.panel` は枠も地も無く、見出し `.panel-head` と余白で分ける)・1 行の並び(`.rows`、足どり)・数字(`.stats`)・設定の節
+  - 件の面(`.item-list` の `.item`): 1 件が 2〜3 行ある一覧(問い・ノート・改善案・弾かれたこと・X の会話・よそ者との対話・橋の候補・足跡)。面とごく薄い影だけで、縁は無い。線で区切らない
+  - 操作の層: ヘッダー(広い形。上端では平らで、巻くと面と影が出る)・下のタブ(スマホの形)・その「その他」のメニュー(`.menu`)・主のボタン・話すの入力欄とつながりの図の上の操作(`.float`)・設定の「保存する」。浮いたものの中のボタンは平らで太字だけ
+- **印と色**: いまいる画面・選んでいる日は、塗らずに主の色の下線と太字(メニューの中は左の縦線)。話すの自分の発言は左の縦線(吹き出しで囲まない)。バッジ(`.tag`)は状態だけ(歩いている・止めている・答えた・失敗 など)。系統・テーマ・出どころ・数のような事実は控えた字(`.sub`・`.fact`)を「・」でつなぐ。通知(`.note`)は淡い面に頭のアイコンで、状態の色では塗らず、左の線も引かない
+- **ボタン**: クラス無し・`.small`・`.mini`・`.big`・`.danger`・`a.button` が主(操作の層の面と影、本文の色の太字。`.danger` は赤い字)。`.outline`・`.ghost` は平ら。自前の見た目を持つもの(下のタブ・メニューの項目)は `.plain` を付ける。入力欄は線の無い面(`--dp-field`)で、ラベルをいつも見せる
+- **動き**: CSS で透明度と transform だけ。JS では動かさない(JS がするのは印の付け外しだけ)。動き続けるもの(歩いているの点・待っている印)は、動きを減らす設定と、ソフトウェアで描いている端末(`#lib/lite.ts` が `<html data-lite>` を付ける)では止める。つながりの 3D の図は中身を描く処理なので対象外
+
+Ashi だけの違い:
 
-地は 1 色(ページ・ヘッダー・カードが同じ `--ui-bg`)で、ヘッダーとの区切りの線も引かない。カードは細い線(`--ui-line`)で分ける。一覧は 1 項目ずつのカードにする(`.panel > .rows` の `li`、一覧だけを包む面は `.panel.list` か `.rows` を直に持つ面で、面そのものは線も地も持たない)。カードや枠の中でスクロールさせない(持ち主の指摘、2026-10-19)。
+- **色**: 主の色は Pico の既定の azure。葦の緑(`--ui-accent`)はロゴと、つながりの図の「個性」の点・線だけに使う(選んでいる印・状態には使わない)。テーマは端末の設定に従う(切り替えは持たない)。色の値は `light-dark()` や `color-mix()` にせず色そのまま書く(つながりの図が JS で読む)
+- **形は幅だけで決める**: 1000px からが広い形(上のヘッダー)、それより狭いとスマホの形(下のタブ。640px 未満は いま・話す・ノート・問い・その他 の 5 つ、640px からは全部とログアウト)。denpa のように折り畳み端末は見ない(`<html data-phone>` は付けない)。下のタブは読んでいる間も引っ込めない(巻いた向きを見る JS を持たない)
+- **幅は画面いっぱいに使う**(持ち主の希望、2026-09-25)。並べて見比べる画面は `.panes`(1100px から列に並べる)。カードや枠の中でスクロールさせない(持ち主の指摘、2026-10-19)
+- 番組表・映像の上の操作・サイドバー・ダイアログ・トースト・テーブルトップのように Ashi に無い部品の決まりは当てはめていない。足すときは denpa の決まりと実装(`src/app.css`)から持ってくる
+
+文言は日本語。見出しに括弧で説明を付けない(補足は文に開く)。
 
 ## デプロイ