/* =========================================================
ちのわ — アプリ側の追加スタイル
---------------------------------------------------------
★原本は public/assets/styles.css。ここには「アプリ側で足した分」だけを置く。
★なぜ2ファイルのままなのか（★2026-09-08。★理由が入れ替わった）
旧：原本が mockup/assets/styles.css にあり、★あちらを1バイトも変えない約束だったから。
→ ★この理由は消えた（2026-09-08・原本が public/assets/ へ移動）。
新：★分かれていること自体が、検査の土台になっているから。
app/tests/css-classes.test.ts の
「app.css は追加だけ。styles.css を上書きしない」は、
★2ファイルあるから成立する（同じセレクタが両方に出たら落ちる）。
🚨 ★だから統合しない。
★引き継ぎ（docs/teams/engineering-handover-2026-09-08.md）には
★「統合する」と書いてあったが、★調べたうえで見送った。
★見送った理由：「別ファイルだった理由が消えた」だけを見て外すと、
★この検査が守っている別の対象が道連れになる。★1つずつ潰した結果はこう：
① 同じセレクタが2箇所にでき、★どちらが効いているか分からなくなること
→ ★統合しても危険は残る。★1ファイル内でも、後ろの規則が黙って勝つ。
→ ★「同一セレクタが2回出たら落とす」には置き換えられない。★実測した：
★styles.css には正当な重複が14件ある（@media を除いても6件）。
例）`html,body` と `body`／ロゴが乗る5面の「形」と「画像化」の2段構え。
★置き換えると、この14件が全部落ちる。
→ 🚨 ★復元できない。★統合すると失われる。
② 茂治の「文字が小さい」への修正が、★実装側で無言に打ち消されること
→ ★font-size だけは、同テストの「styles.css に 13.5px 未満が無い」が
★統合後も見る（styles.css 全体を読んでいるため）。
→ ⚠️ ★しかし padding / margin / line-height は ★どの検査も見ていない。
★次の作業は茂治の「全体的に詰まっている／もっと余白を」＝ ★まさにそこ。
★統合すると、いちばん効いてほしい向きの検査が、★着手の直前に消える。
③ 「既存セレクタを変えたい＝原本を直すべき合図」という分担
→ ★機械では守れなくなる。★失われる。
→ ★統合して得られるのは、ファイル1つと 1つ。★割に合わない。
★ここに足すときの手順
1 ★まず public/assets/styles.css を grep して、★本当に無いことを確かめる。
★上書きは検査が落とすが、★「別名で同じことをする規則」は落とせない。
2 ★「なぜこの規則があるか」を書く。★「向こうに無いから」は理由ではない。
★それは "どこに置くか" の話であって、★"なぜ要るか" の話ではない。
3 ★既存セレクタを変えたくなったら、それは styles.css を直すべき合図。
★ここで押し切らない。直す先は ★app/public/assets/styles.css（★mockup/ ではない）。
⚠️ ★2026-09-08、.g5 を削除した。
★「従事者台帳のKPIは5つあるため」と理由が書いてあったが、
★その台帳は 2026-09-07（bfae759）で作り直され、★KPIの5枚並びは無くなっていた。
★規則だけが残っていた。★死んだCSSはエラーを出さない。
★「なぜ要るか」に書き直そうとして、★初めて書けないことに気づいた。
→ ★同じことが起きないよう、★「app.css の規則が全部使われている」を検査に足した
（css-classes.test.ts）。★足す向きの検査はあったが、★捨てる向きが無かった。
========================================================= */
/* --- 1. .alert.err — 「失敗」の通知 --------------------------
★なぜこの規則があるか
アプリには「失敗」の通知が実在する（8箇所）。CSV取込のエラー行、ログイン失敗、
判定・確定・登録の保存失敗。
★styles.css の .alert は warn（注意）と info（お知らせ）の2つで、
★「失敗」に当てる色が無い。warn で代用すると、
★直せない失敗と、気をつければよい注意が、同じ色になる。
★色は新しく作らない。既にある2つから借りる。
背景 #FBE6E3 … .badge.danger の背景と同じ値
文字 #8A2B20 … ★var(--danger)(#C0392B) ではない。
★.alert.warn が var(--warn)(#C0622F) に対して #8a4322 を使っているのと
★同じ「地に敷くぶん、文字は一段濃くする」の対応に揃えている。 */
.alert.err{background:#FBE6E3;color:#8A2B20;border:1px solid #F0C5BF;}
/* --- 2. .t-ok / .t-err / .t-warn — 単独で使える文字色 --------
★なぜこの規則があるか
★styles.css の ok / warn / err は ★複合セレクタ専用で、単独の定義が無い
（.badge.ok / .alert.warn などだけ）。
★単独で使うと、エラーも警告も出ず、★何も起きずに終わる。
★実際に2回起きている。
2026-09-07 … 移植時の見落とし4件のうちの1件。
2026-09-08 … staff/[id]/page.tsx の3要件の表に
★| が残っていた（「満たす」が無色のまま）。
★三項の中にあり、★検査が式を読んでいなかったので、ずっと通っていた。
★検査のほうも直してある（css-classes.test.ts の usedClasses）。
→ ★名前で区別して、間違えようがなくする。単独で色を付けるなら t- を付ける。 */
.t-ok{color:var(--ok);font-weight:600;}
.t-err{color:var(--danger);font-weight:600;}
.t-warn{color:var(--warn);font-weight:600;}
/* --- 3. 選択カード（2択） -------------------------------------
★なぜこの規則があるか
判定（3要件）と職種分類を「★1問ずつカードで選ぶ」形にしたため
（docs/design-assessment-flow.md・2026-09-08）。★styles.css にこの形は無い。
★中身は radio のまま。見た目だけカードにする。
★checkbox にすると、★未選択と「満たさない」が区別できない（同 §2 の8つ目）。
★3要件は AND なので、★未選択を「満たさない」に倒すと、黙って対象外へ倒れる。
★この規則を消してよい条件
★守っている対象は、判定画面と職種分類画面の選択カード。★この2つだけ。
★styles.css 側に同じ形が入ったら、ここは消す。 */
/* ★選ぶものを、いちばん大きくする（2026-09-09 茂治のFBを反映）
★茂治が devtools で作った before/after を、そのまま値にしている。
★原則（茂治に確認済み）
① ★選ぶものを、いちばん大きく … ★カードの見出し 25px ＞ ページ見出し 20px
→ ★「いま何の画面か」より「★何を選ぶか」のほうが大きい
② ★説明は控えめに … ★どれが決定で、どれが材料かを、大きさで分ける
③ ★余白で「まとまり」を作る … 問い →(20px)→ カード →(20px)→ ※注意
④ ★カードの内側も広げる（30px）→ ★カードが「線」ではなく「面」になる
★before は全部 16px で、★全部が同じ大きさで喋っていた。
⚠️ ★値はまだ暫定です（茂治「過剰なら再びFBする」）。
★検査（css-classes.test.ts 対象F）に下限として書かないこと。
★「これでいい」が出てから書く。 */
.choice-set{display:grid;gap:16px;margin-top:20px;}
@media(min-width:600px){.choice-set{grid-template-columns:1fr 1fr;}}
.choice{
display:block;border:2px solid var(--line);border-radius:var(--radius);
/* ★30px。★押せる面積を広げて、カードを「面」にする */
padding:30px;background:#fff;cursor:pointer;
}
.choice:hover{border-color:var(--sea);background:var(--tint);}
/* ★選択中がひと目で分かること。★色だけに頼らず、枠の太さでも差を付ける */
.choice.on{border-color:var(--teal);background:var(--tint);box-shadow:var(--shadow);}
/* ★この画面でいちばん大きい文字。★ページ見出し(20px)より大きくする（原則①） */
.choice .t{font-weight:700;display:block;font-size:25px;line-height:1.45;}
/* ⚠️ ★説明は★小さくしない。★16px のまま（＝本文と同じ）。
★茂治の指摘は「文字が全体的に小さい。年配の方も操作する」だった。
★差は「説明を小さくする」ではなく「★選ぶものを大きくする」で付けている。 */
.choice .d{color:var(--grey);display:block;margin-top:10px;}
/* 🚨 ★★2026-10-11、★見た目を★丸＋チェックに置き換えました（★茂治の②）。
★★`input` は★キーボードとスクリーンリーダー用に★残っています。
★★置き換えは ★`styles.css` の ★`.choice-set.checks`（★クリエイターチーム）。
★`opacity:0` ＋ ★1px で★視覚から外し、★`::before` / `::after` で★丸とチェックを描いています。
★フォーカスは ★`:has(input:focus-visible)` で★カードの枠に出ます。
⚠️ ★★`checkbox` にしないこと。★★`radio` のままです（★クリエイターチーム＋法務）。
★★1つの四角にすると「★いいえ」と「★まだ答えていない」が★区別できません。
★★3要件は AND なので、★未選択を「満たさない」に倒すと、★黙って対象外へ倒れます。
⚠️ ★だから★下の行は「★隠さない」ではなく「★`.checks` を当てていない画面のための余白」です。 */
.choice input{margin-right:8px;}
/* ★カードのあとに続く注意書きは、★カードから離す（原則③：まとまりを分ける）。
★問い →(20px)→ カード →(20px)→ ※注意
⚠️ ★「問い→カード」は ★.choice-set の margin-top だけで 20px になります
（★問いの p の margin-bottom 10px と★相殺されるため。★実測20px）。
★実装側のインラインを外す必要はありません。
🚨 ★「カード→注意」は、★注意書き側のインライン（style={{marginTop:12}}）が勝つので、
★実装側で外していただく必要があります。★外れるまで、この規則は効きません。 */
.choice-set + .muted{margin-top:20px;}
/* ★見た目には出さないが、★読み上げには残す。
★2026-09-09：classification の |