/* src/kintai/static/home.css — 規約: docs/design/2026-09-16-ui-design-principles.md §2 */
:root { --green:#1B7F3B; --orange:#D9640A; --blue:#1F5FBF; --red:#B00020; --ink:#222; --bg:#f7f7f5; }
* { box-sizing:border-box; }
body { margin:0; font-family:system-ui,-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif; font-weight:500; color:var(--ink); background:var(--bg); font-variant-numeric:tabular-nums; }
.bar { display:flex; justify-content:flex-end; padding:12px 16px; }
.chip { font-size:20px; font-weight:700; padding:8px 16px; border-radius:999px; background:#e5e5e5; border:2px solid #999; }
.chip.S1 { background:#dff3e4; border-color:var(--green); }
.chip.S2 { background:#fde7d2; border-color:var(--orange); }
main { padding:24px 16px; display:flex; flex-direction:column; gap:16px; min-height:70vh; justify-content:center; }
.view { display:flex; flex-direction:column; gap:16px; align-items:stretch; }
/* hidden 属性を作者スタイルで潰さない（.view の display:flex が UA の [hidden] より強いため明示する） */
[hidden] { display:none !important; }
/* 主ボタン: 道具の見た目（影と枝線）。高さ160px以上・文字40px・白文字でコントラスト7:1以上 */
.big { font-size:40px; font-weight:700; color:#fff; border:0; border-radius:24px; min-height:160px; width:100%;
       box-shadow:0 6px 0 rgba(0,0,0,.25), 0 8px 16px rgba(0,0,0,.15); }
.big:active { transform:translateY(4px); box-shadow:0 2px 0 rgba(0,0,0,.25); }
.big.green { background:var(--green); }
.big.orange { background:var(--orange); }
/* 補助ボタン: 64px以上・文字22px */
.small { font-size:22px; font-weight:700; min-height:64px; padding:16px; border-radius:16px; border:3px solid #444; background:#fff; color:var(--ink); width:100%; }
button:disabled { opacity:.6; }
.greeting { font-size:34px; font-weight:700; text-align:center; margin:0; }
.note { font-size:18px; color:#333; text-align:center; margin:0; }
/* はじめての設定（文字入力を置く唯一の画面。規約の例外） */
.ask { font-size:22px; font-weight:700; text-align:center; margin:0; }
.numpad-input { font-size:36px; font-weight:700; text-align:center; min-height:72px; width:100%;
                border:3px solid #444; border-radius:16px; padding:8px; background:#fff; color:var(--ink); }
.error { font-size:20px; color:var(--red); text-align:center; font-weight:700; }