/* 共通テンプレの基本スタイル。色は :root の変数だけを使い、アプリ側で直書きしない。
   data-theme="tool"     … 道具系（既存の公開前ストップライトと同じ配色）
   data-theme="chabudai" … ちゃぶ台パズル系（既存のちゃぶ台パズルと同じ配色・文字大きめ） */
:root, [data-theme="tool"] {
  color-scheme: light;
  --bg:#f5f4ef; --surface:#fff; --ink:#1f2926; --ink-2:#596661;
  --line:#e2e5eb; --fill:#edeff3; --accent:#2a54d6; --on-accent:#fff;
  --ok:#1b7a44; --warn:#8a5a00; --danger:#b3261e;
  --radius:14px; --base:15px; --shadow:0 10px 30px rgba(30,48,42,.08);
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI",Meiryo,system-ui,sans-serif;
}
[data-theme="chabudai"] {
  --bg:#f4efe2; --surface:#fffdf7; --ink:#241f1a; --ink-2:#4a4038;
  --line:#d9ccb2; --fill:#e8dfc6; --accent:#9c3b2e; --on-accent:#fff;
  --ok:#1f5c3d; --warn:#7a5200; --danger:#9c3b2e;
  --radius:14px; --base:18px;
}
/* OS の暗色設定。後置の明示指定は、将来 UI を追加せずに手動切替するための口。 */
@media (prefers-color-scheme: dark) {
  :root, [data-theme="tool"] {
    color-scheme:dark;
    --bg:#11141a; --surface:#191d25; --ink:#f2f4f8; --ink-2:#b5bdca;
    --line:#3d4654; --fill:#242b36; --accent:#8eabff; --on-accent:#11141a;
    --ok:#70d79b; --warn:#f2c66d; --danger:#ff9b91;
  }
  [data-theme="chabudai"] {
    color-scheme:dark;
    --bg:#181511; --surface:#211d18; --ink:#f7f0e5; --ink-2:#c8bbaa;
    --line:#554a3d; --fill:#302920; --accent:#ff9b8c; --on-accent:#241f1a;
    --ok:#83d5a6; --warn:#efc36a; --danger:#ff9b8c;
  }
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --bg:#11141a; --surface:#191d25; --ink:#f2f4f8; --ink-2:#b5bdca;
  --line:#3d4654; --fill:#242b36; --accent:#8eabff; --on-accent:#11141a;
  --ok:#70d79b; --warn:#f2c66d; --danger:#ff9b91;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font-size:var(--base); line-height:1.85; letter-spacing:.02em; }
button, input, select, textarea { font:inherit; color:inherit; }
button { cursor:pointer; }
button { transition:background-color .15s,border-color .15s,transform .1s,box-shadow .15s; }
button:active { transform:translateY(1px); }
a { color:var(--accent); text-underline-offset:3px; }
img, svg, canvas { max-width:100%; }

.ai-disclosure { padding:8px 16px; border-bottom:1px solid var(--line); background:var(--surface); color:var(--ink-2); text-align:center; font-size:13px; line-height:1.7; }
.site-header { max-width:880px; margin:0 auto; padding:18px 0; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.brand { display:inline-flex; align-items:center; gap:8px; color:var(--ink); font-weight:700; text-decoration:none; }
.brand-mark { width:28px; height:28px; flex:none; }
.badge { border:1px solid var(--line); border-radius:999px; padding:3px 12px; color:var(--ink-2); font-size:12px; font-weight:600; white-space:nowrap; }

main { max-width:760px; margin:0 auto; padding:clamp(30px, 6vw, 68px) 0 80px; }
h1, h2, h3 { font-family:"Hiragino Mincho ProN","Yu Mincho",YuMincho,serif; }
h1 { margin:0 0 8px; font-size:clamp(1.7rem,6vw,2.4rem); line-height:1.35; }
h2 { margin:0 0 12px; font-size:1.2em; line-height:1.5; }
.lead { margin:0 0 8px; font-size:1.05em; }
.muted { color:var(--ink-2); font-size:.9em; }
.first-step { margin:0; padding:10px 12px; border-radius:10px; background:var(--fill); }
.card { margin:0 0 20px; padding:22px; border:1px solid var(--line); border-radius:var(--digit-radius-surface); background:var(--surface); }
.app-card { box-shadow:var(--shadow); }
.card > :last-child { margin-bottom:0; }

.primary, .secondary { min-height:48px; min-width:48px; border-radius:8px; padding:10px 22px; font-weight:600; }
.primary { border:1px solid var(--accent); background:var(--accent); color:var(--on-accent); box-shadow:0 3px 10px color-mix(in srgb,var(--accent) 20%,transparent); }
.secondary { border:1px solid var(--line); background:var(--fill); color:var(--ink); }
.primary:disabled, .secondary:disabled { opacity:.5; cursor:default; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; }
:focus-visible { outline:3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset:2px; }

.ad-slot { min-height:100px; margin:24px 0; padding:16px; display:grid; place-items:center; gap:2px; border:1px dashed var(--line); border-radius:var(--radius); background:var(--surface); color:var(--ink-2); text-align:center; }
.ad-slot p, .ad-slot small { margin:0; }
.ad-label { font-size:12px; font-weight:700; }

.legal h2 { margin-top:20px; font-size:1.05em; }
.legal p { margin:0 0 8px; }

.site-footer { padding:28px 16px; border-top:1px solid var(--line); color:var(--ink-2); text-align:center; font-size:13px; }
.site-footer nav { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 20px; }
.site-footer p { margin:8px 0 0; }
.copyright { font-variant-numeric:tabular-nums; }
[hidden] { display:none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* AIなし選択ボタン */
.app-card form { margin-top:14px; }
.app-card fieldset { margin:14px 0 0; padding:0; border:0; }
.app-card legend { margin-bottom:8px; font-weight:700; }
.app-card label { min-height:48px; margin:8px 0; padding:9px 12px; display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
.app-card label:has(input:checked) { border-color:var(--accent); }
.app-card input { width:22px; min-height:0; flex:none; accent-color:var(--accent); }
.app-card fieldset[aria-invalid="true"] legend { color:var(--danger); }
.app-card fieldset[aria-invalid="true"] label { border-color:color-mix(in srgb,var(--danger) 55%,var(--line)); }
.form-message { min-height:1.7em; margin:12px 0 0; color:var(--danger); font-size:.9em; font-weight:600; }
.result { margin-top:24px; padding:18px; border:2px solid var(--accent); border-radius:var(--radius); background:var(--fill); }
.result:focus { outline:3px solid var(--accent); outline-offset:3px; }
.result-label { margin:0; color:var(--ink-2); font-size:.85em; font-weight:700; }
.result h2 { margin-top:2px; }
.result h3 { margin-bottom:4px; font-size:1em; }
.result ul { padding-left:1.4em; }
.boundary { padding-top:12px; border-top:1px solid var(--line); font-weight:600; }
.rules ol { padding-left:1.5em; }
.rules li { margin-bottom:10px; }
@media (max-width:420px) {
  .site-header { align-items:flex-start; flex-direction:column; }
  .card { padding:18px; }
  .actions { flex-direction:column; }
  .actions button { width:100%; }
  .app-card label { padding-inline:10px; }
}
/* 狭い幅（<360px）では badge を次の行へ落とし brand と重ねない（ハヤ点検 2026-10-30・縮めない） */
@media (max-width:359px){.site-header{flex-wrap:wrap}.site-header .badge,.site-header .offline{order:3;flex-basis:100%;margin-top:4px}}

/* 新テンプレへの移行 */
:root,[data-theme="tool"]{--digit-bg:#f1f2ed;--digit-surface:#fff;--digit-surface-raised:#fff;--digit-ink:#112c2a;--digit-ink-muted:#5c6b67;--digit-line:#cbd4ce;--digit-line-control:#748a86;--digit-signal:#087862;--digit-signal-ink:#fff;--digit-signal-deep:#05604e;--digit-soft:#e2efe9;--digit-ok:#0a6b4f;--digit-caution:#8a5a00;--digit-danger:#a3261d;--digit-font-body:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI",Meiryo,system-ui,sans-serif;--digit-font-display:var(--digit-font-body);--digit-font-numeric:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;--digit-radius-control:2px;--digit-radius-surface:0;--digit-shadow-one:0 18px 45px #17352b14;--digit-focus-ring:#b06c00;--digit-measure-frame:1120px;--bg:var(--digit-bg);--surface:var(--digit-surface);--ink:var(--digit-ink);--ink-2:var(--digit-ink-muted);--line:var(--digit-line);--fill:var(--digit-soft);--accent:var(--digit-signal);--on-accent:var(--digit-signal-ink);--radius:var(--digit-radius-surface);--base:16px}
body{font-family:var(--digit-font-body)}.ai-disclosure{text-align:left}.ai-disclosure::before{content:"◆ AI運営";display:inline-block;margin-right:10px;color:var(--digit-signal);font:700 12px/1.7 var(--digit-font-numeric)}.brand-mark{clip-path:polygon(0 0,72% 0,100% 28%,100% 100%,0 100%)}main,.site-header{max-width:var(--digit-measure-frame)}main{padding-inline:0}.intro{margin-bottom:38px}.kicker{display:block;margin:0 0 10px;color:var(--digit-signal);font:700 12px/1.6 var(--digit-font-numeric);letter-spacing:.15em}.intro h1{max-width:20ch;font-size:clamp(32px,5.4vw,60px);line-height:1.14}.journey{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:34px 0 38px;padding:0;list-style:none}.journey li{border-top:1px solid var(--digit-line);padding-top:10px;font-weight:700}.journey b{display:block;color:var(--digit-signal);font:700 12px/1.6 var(--digit-font-numeric)}.content{max-width:820px}.panel{margin-bottom:24px;padding:26px;background:var(--digit-surface-raised);box-shadow:var(--digit-shadow-one)}
@media(prefers-color-scheme:dark){:root,[data-theme="tool"]{--digit-bg:#0f1512;--digit-surface:#17201d;--digit-surface-raised:#1d2724;--digit-ink:#e7efe9;--digit-ink-muted:#9fb0a9;--digit-line:#2f3d38;--digit-line-control:#63817a;--digit-signal:#5fd2b2;--digit-signal-ink:#06201a;--digit-signal-deep:#45b998;--digit-soft:#15302a;--digit-ok:#5fd2b2;--digit-caution:#f0c06a;--digit-danger:#ff9b91;--digit-shadow-one:0 18px 45px #00000059;--digit-focus-ring:#ffcc33}}
@media(max-width:640px){main{padding-inline:16px}.intro h1{font-size:clamp(30px,10vw,44px)}.panel{padding:20px}}