feat: daisyUI をやめて Pico CSS にする

[5ym]

Tailwind + daisyUI を外し、src/app.scss(Pico CSS v2)の共通クラスと画面ごとの scoped style に置き換えた。出てくる部品が箱・入力欄・ボタン・札くらいしかなく、utility class を並べるより素の HTML を整えるほうが小さいため（denpa・トドロク・tama・worklog・noren と同じ構成）。

• 色は Pico の既定（azure）のまま。 --ui-* は Pico の変数から引いているので、明暗の切り替えにもそのまま追従する（元も prefers-color-scheme で切り替わっていた挙動は保たれる）
• app.html の Tailwind クラスは削除
• Pico の components/card は有効のまま。--pico-card-background-color / --pico-card-box-shadow はこのモジュールが有効なときだけ出力され、切ると箱の地と影が消える
• Bits UI は入れていない（ドロップダウン・ダイアログに相当する部品が無く、素の HTML で足りた）

bun run build と bun run check（biome + svelte-check、0 errors / 0 warnings）はコンテナ内で通る。未使用 CSS セレクタの警告もゼロ。

見た目が変わる点（本番サービスなので明記）:

• 主色が daisyUI の藍から Pico の azure に
• 注意書きが塗りつぶしから「薄い地 + 左に色帯」に、札が角丸から丸に
• 小さいボタンが btn-xs(1.5rem) から .mini(2rem) に。指で押せる大きさを下限にしたため

🤖 Generated with Claude Code

https://claude.ai/code/session_01JgGYf5qbjDXYhtzcpLsGvv

[claude]

Claude finished @5ym's task in 1m 49s —— View job

---

レビュー結果

• コンテキスト収集（CLAUDE.md は存在せず、README.md を確認）
• PR差分の確認（git diff origin/main...HEAD）
• 変更ファイルのレビュー（不具合・セキュリティ・設計・テスト観点）
• インラインコメントの投稿
• 総評のまとめ

総評

Tailwind + daisyUI から Pico CSS への移行で、ロジックには手を入れず見た目のクラス・スタイルのみを置き換えた変更であることを確認しました。全ファイルの差分を確認しましたが、SummaryScreen.svelte / admin/+page.svelte などスクリプト部分（postNow / toggleSummary / remove / setAdmin など）は無変更で、テンプレート側のクラス名とスタイルブロックの追加のみでした。

• 不具合: ロジック変更が無いため、既存の挙動が壊れる懸念は見当たりません。role="switch" の追加や .mini の詳細度をコメントで明記している点（a.button.mini と揃える必要性）など、CSS 詳細度の落とし穴にも配慮されています。
• セキュリティ: 該当なし。シークレットの混入や入力値検証に関わる変更はありません。
• 設計: app.scss に部品スタイルを集約し、各コンポーネントは scoped style で微調整するという構成は、PR 本文にある denpa・トドロク・tama 等の既存構成と一貫しています。未使用の Pico モジュール（dropdown・nav・tooltip 等）を明示的に無効化し、components/card を有効にしておく理由もコメントで説明されており、意図が追いやすいです。
• テスト: 見た目のみの変更でテストコードの追加はありませんが、本 PR の性質（CSS 移行）を踏まえると妥当と考えます。bun run build / bun run check は PR 本文でコンテナ内通過を確認済みとのことです（本レビュー環境では bun コマンドの実行がサンドボックス制限により実行できなかったため、こちらでの再実行はできていません）。

一点だけ、src/app.scss にインラインコメントで「要確認」として指摘しました。--ui-warn だけが Pico の変数ではなく固定の16進値 (#a45a06) になっており、ファイル冒頭のコメントおよび PR 本文の「--ui-* は Pico の変数から引いているので明暗の切り替えに追従する」という説明と厳密には食い違っています。ダークモードでのコントラストが最適かどうかは実機・スクリーンショットでの確認をおすすめします（動作を壊すものではないため blocking ではありません）。

上記以外に指摘すべき不具合・設計上の問題は見つかりませんでした。

[claude]

要確認: この --ui-warn: #a45a06 だけ Pico の変数ではなく固定の16進値です。ファイル冒頭のコメント(「この app.scss で使う色はすべて Pico の変数から引く」)や PR 本文の「--ui-* は Pico の変数から引いているので、明暗の切り替えにもそのまま追従する」という説明と食い違っています。--pico-primary などは dark テーマ用の上書き値を Pico 側が持っていますが、この固定値にはダークモード用の調整が無いため、prefers-color-scheme: dark 時にコントラストが最適でない可能性があります。意図的な妥協であれば問題ありませんが、コメントの記述とは合わせておくと良さそうです。

[claude]

Claude finished @5ym's task in 1m 9s —— View job

---

レビュー結果

• コンテキスト収集(CLAUDE.md は存在せず、前回レビュー以降の差分を確認)
• 追加コミット a6499ce(注意の色を明暗で持ち替える)のレビュー
• 総評のまとめ

総評

前回のレビューで指摘した --ui-warn が固定値でダークモードに追従しない件は、追加コミット a6499ce で解消されていることを確認しました。

src/app.scss:78-86 で以下のように Pico 自身の明暗切り替えと同じセレクタ構成を使って --ui-warn を持ち替えています。

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--ui-warn: #f0b429;
	}
}
[data-theme="dark"] {
	--ui-warn: #f0b429;
}

• --ui-warn-bg(color-mix(in srgb, var(--ui-warn) 12%, var(--pico-background-color)))はカスタムプロパティの参照なので、--ui-warn が暗いほうで上書きされれば描画時に自動で追従します。値の定義順を気にする必要はありません。
• 使用している Pico は v2.1.1 で CSS @layer は使われていないため、カスケード層による優先順位の乱れも起きません。
• [data-theme="dark"] は現状どこからも付与されていませんが、Pico 本体の切り替えセレクタに合わせてあるだけなので、将来テーマ切り替えを実装する際にも自然に効きます(現時点で死んでいるコードというより、Pico の規約に揃えた設計として妥当です)。

他のファイル(package.json / bun.lock / app.html / ErrorAlert.svelte / SignInButton.svelte / SummaryScreen.svelte / Toast.svelte / +layout.svelte / admin/+page.svelte / vite.config.ts)は前回レビュー時点から変更が無く、指摘した点はありません。

新たに指摘すべき不具合・セキュリティ・設計上の問題は見つかりませんでした。