/* 共通テンプレの基本スタイル。色は :root の変数だけを使い、アプリ側で直書きしない。
   data-theme="tool"     … 道具系（既存の公開前ストップライトと同じ配色）
   data-theme="chabudai" … ちゃぶ台パズル系（既存のちゃぶ台パズルと同じ配色・文字大きめ） */
:root, [data-theme="tool"] {
  color-scheme: light;
  --bg:#f7f4ec; --surface:#fffefa; --ink:#23312d; --ink-2:#5d6b65;
  --line:#dedbd1; --fill:#edf2ec; --accent:#1f6954; --on-accent:#fff;
  --ok:#1b7a44; --warn:#8a5a00; --danger:#b3261e;
  --radius:14px; --base:15px;
  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.75; letter-spacing:.02em; }
button, input, select, textarea { font:inherit; color:inherit; }
button { cursor:pointer; }
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-inline:auto; padding:clamp(30px, 6vw, 68px) 0 80px; }
h1 { margin:0 0 12px; font-size:clamp(1.6rem,6vw,2.4rem); line-height:1.35; }
h2 { margin:0 0 12px; font-size:1.2em; line-height:1.5; }
.lead { margin:0 0 20px; font-size:1.05em; }
.muted { color:var(--ink-2); font-size:.9em; }
.card { margin:0 0 20px; padding:22px; border:1px solid var(--line); border-radius:var(--digit-radius-surface); background:var(--surface); box-shadow:0 8px 24px rgb(35 49 45 / 6%); }
.card > :last-child { margin-bottom:0; }

.primary, .secondary { min-height:48px; min-width:48px; border-radius:999px; padding:10px 22px; font-weight:700; transition:transform .12s ease, filter .12s ease; }
.primary { border:1px solid var(--accent); background:var(--accent); color:var(--on-accent); }
.secondary { border:1px solid var(--line); background:var(--fill); color:var(--ink); }
.primary:hover, .secondary:hover { filter:brightness(.96); }
.primary:active, .secondary:active { transform:translateY(1px) scale(.99); }
.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 { margin-inline:auto!important; 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; }
}
.intro { margin-bottom:12px; }
.intro .lead { margin-bottom:0; }
.eyebrow { margin:0 0 2px; color:var(--accent); font-size:.82rem; font-weight:700; letter-spacing:.08em; }
.safety-note { margin:0 0 12px; padding:10px 14px; border:2px solid var(--warn); border-radius:var(--radius); background:var(--surface); font-weight:700; }
.step-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:8px; }
.category { display:inline-block; padding:3px 10px; border-radius:999px; background:var(--fill); font-weight:700; }
.step-card h2 { margin-top:18px; margin-bottom:6px; }
.step-card h2:first-of-type { margin-top:0; }
.task { margin:0; font-size:1.1em; font-weight:700; }
.prompt-box { padding:14px; border-left:4px solid var(--accent); background:var(--fill); }
.prompt-box p { margin:0 0 10px; white-space:pre-wrap; }
.prompt-box .secondary { width:100%; }
.status { min-height:1.75em; margin:8px 0 0; }
.stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; text-align:center; }
.stats div { padding:12px; border-radius:var(--radius); background:var(--fill); }
.stats strong, .stats span { display:block; }
.stats strong { font-size:1.8em; font-variant-numeric:tabular-nums; }
@media (max-width:380px) { .card { padding:18px; } .actions > button { flex:1 1 130px; } .badge { white-space:normal; text-align:center; } }

/* digit:unify:v2 */
/* 375px でもブランド名を語中で折らず、必要な分だけ文字を縮める。 */
.site-header .brand {
  min-width:0;
  white-space:nowrap;
  font-size:clamp(.75rem,2.5vw,1rem);
}
.puzzle-heading { text-align:left; }
.puzzle-kicker {text-align:left; margin:0 0 2px; color:var(--ink-2); font-size:.82rem; font-weight:700; line-height:1.5; }
.puzzle-title { text-align:left; }
.prompt-card-note {
  margin:0 0 8px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-left:4px solid var(--warn);
  border-radius:8px;
  background:var(--fill);
  color:var(--ink);
  font-size:.9em;
  font-weight:400;
}
/* 狭い幅（<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-font-body:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI",Meiryo,system-ui,sans-serif;--digit-font-numeric:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;--digit-shadow-one:0 18px 45px #17352b14;--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:0;--base:16px}body{font-family:var(--digit-font-body)}.ai-disclosure{text-align:left}.ai-disclosure::before{content:"◆ AI運営";margin-right:10px;color:var(--digit-signal);font:700 12px/1.7 var(--digit-font-numeric)}main,.site-header{max-width:1120px}main{padding-inline:0}.kicker{display:block;color:var(--digit-signal);font:700 12px/1.6 var(--digit-font-numeric)}.intro h1{font-size:clamp(32px,5.4vw,60px)}.journey{display:grid;grid-template-columns:repeat(3,1fr);padding:0;list-style:none}.journey li{border-top:1px solid var(--digit-line);padding-top:10px}.journey b{display:block;color:var(--digit-signal)}.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-soft:#15302a}}@media(max-width:640px){main{padding-inline:16px}.panel{padding:20px}}