/* 共通テンプレの道具用変数（template/public/style.css と逐語一致） */
:root, [data-theme="tool"] {
  color-scheme: light;
  --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;           /* signal 上の文字 */
  --digit-signal-deep:#05604e;       /* 押している最中の signal */
  --digit-soft:#e2efe9;              /* 現在地をごく薄く塗る面 */
  --digit-ok:#0a6b4f;                /* 完了 */
  --digit-caution:#8a5a00;           /* 要確認 */
  --digit-danger:#a3261d;            /* 失敗 */
  --digit-paper-texture:none;        /* 棚固有のごく薄い質感 */
  --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-reading-measure:40em;      /* 35〜45字の行長（日本語は全角で約半分） */
  --digit-space-related:12px;        /* 同じ話の内部 */
  --digit-space-section:38px;        /* 話が変わる境目 */
  --digit-radius-control:2px;        /* 操作 */
  --digit-radius-surface:0px;        /* 面 */
  --digit-cut-size:18px;             /* 社章由来の切り角 */
  --digit-shadow-one:0 18px 45px #17352b14;  /* 唯一の影 */
  --digit-focus-ring:#b06c00;        /* フォーカス指輪 */
  --digit-trace:#183f3810;           /* 一本の結線（地に残る痕） */
  --digit-enter-duration:160ms;
  --digit-exit-duration:120ms;
  --digit-ease-out:ease-out;
  --digit-measure-frame:1120px;      /* 画面の器の幅 */
}
:root {
  --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);
  --ok:var(--digit-ok); --warn:var(--digit-caution); --danger:var(--digit-danger);
  --radius:var(--digit-radius-surface); --base:16px;
  font-family:var(--digit-font-body);
  --paper:#fff; --pen-1:#172033; --pen-2:#265dcc; --pen-3:#c53d43; --pen-4:#267052; --pen-5:#a56400;
}
@media (prefers-color-scheme: dark) {
  :root, [data-theme="tool"] {
    color-scheme:dark;
    --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;
    --digit-trace:#8fd8c41a;
  }
}
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; min-width:0; background:var(--digit-bg); color:var(--digit-ink); font-family:var(--digit-font-body); font-size:16px; line-height:1.8; letter-spacing:.01em; overflow-wrap:anywhere; }
button, input, select, textarea { font:inherit; color:inherit; }
button { cursor:pointer; transition:transform var(--digit-exit-duration),background-color var(--digit-enter-duration),border-color var(--digit-enter-duration); }
button:active:not(:disabled) { transform:translateY(1px); }
a { color:var(--digit-signal); text-underline-offset:4px; }
img, svg, canvas { max-width:100%; height:auto; }
[hidden] { display:none!important; }
.ai-disclosure { padding:9px max(20px,calc((100vw - 1120px)/2)); border-bottom:1px solid var(--digit-line); background:var(--digit-surface); color:var(--digit-ink-muted); text-align:left; font-size:13px; line-height:1.7; }
.ai-disclosure::before { content:"◆ AI運営"; display:inline-block; margin-right:10px; color:var(--digit-signal); font:700 12px/1.7 var(--digit-font-numeric); letter-spacing:.06em; white-space:nowrap; }
.site-header { max-width:1120px; padding-block:18px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.brand { display:inline-flex; min-width:0; align-items:center; gap:8px; color:var(--digit-ink); font-weight:700; text-decoration:none; white-space:nowrap; font-size:clamp(.75rem,2.5vw,1rem); }
.brand-mark { width:32px; height:32px; flex:none; clip-path:polygon(0 0,72% 0,100% 28%,100% 100%,0 100%); }
.badge { flex:none; border:1px solid var(--digit-line); border-radius:999px; padding:3px 12px; color:var(--digit-ink-muted); font-size:12px; font-weight:600; white-space:nowrap; }
main { max-width:1120px; margin:0 auto; padding-block:clamp(30px,6vw,68px) 80px; }
h1 { margin:0 0 12px; line-height:1.35; } h2 { margin:0 0 12px; font-size:1.2em; line-height:1.5; }
.intro { margin-bottom:var(--digit-space-section); }
.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; margin:0 0 18px; font-size:clamp(32px,5.4vw,60px); font-weight:750; line-height:1.14; letter-spacing:-.03em; text-wrap:balance; word-break:auto-phrase; }
.lead { max-width:42em; margin:0 0 38px; font-size:18px; }
.journey { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); max-width:620px; margin:34px 0 38px; padding:0; list-style:none; }
.journey>* { border-top:1px solid var(--digit-line); padding:10px 8px 0 0; font-weight:700; }
.journey>.is-now { border-top-color:var(--digit-signal); }.journey b { display:block; color:var(--digit-signal); font:700 12px/1.6 var(--digit-font-numeric); letter-spacing:.12em; }
.content { max-width:900px; }
.panel { position:relative; margin-bottom:24px; padding:26px; background:var(--digit-surface-raised); box-shadow:var(--digit-shadow-one); clip-path:polygon(0 0,calc(100% - var(--digit-cut-size)) 0,100% var(--digit-cut-size),100% 100%,0 100%); }
.card { margin:0 0 20px; padding:20px; border:1px solid var(--digit-line); background:var(--digit-surface); }.card>:last-child { margin-bottom:0; }.muted { color:var(--digit-ink-muted); font-size:.9em; }
.primary,.secondary { min-height:48px; min-width:48px; border-radius:var(--digit-radius-control); padding:10px 18px; font-weight:700; }
.primary { border:1px solid var(--digit-signal); background:var(--digit-signal); color:var(--digit-signal-ink); }.primary:hover:not(:disabled) { background:var(--digit-signal-deep); }
.secondary { border:1px solid var(--digit-line-control); background:var(--digit-surface); color:var(--digit-ink); }.primary:disabled,.secondary:disabled { opacity:.5; cursor:default; }
:focus-visible { outline:3px solid var(--digit-focus-ring); outline-offset:3px; }
.first-step { display:flex; align-items:flex-start; gap:10px; margin:0 0 12px; padding:10px 12px; border-left:4px solid var(--digit-signal); background:var(--digit-soft); font-size:.9em; }.first-step strong { flex:none; color:var(--digit-signal); }
.privacy-note { margin:0 0 12px; padding:8px 12px; border-left:4px solid var(--digit-caution); background:var(--digit-soft); font-size:.9em; font-weight:700; }
.toolbar { display:grid; gap:8px; margin-bottom:8px; }.tool-group { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:8px; border:1px solid var(--digit-line); background:var(--digit-soft); }.tool-label { min-width:3em; color:var(--digit-ink-muted); font-weight:700; }
.color-button { width:48px; height:48px; padding:0; border:5px solid var(--paper); border-radius:50%; box-shadow:0 0 0 1px var(--digit-line-control); }.color-button[aria-pressed="true"],.secondary[aria-pressed="true"] { outline:3px solid var(--digit-focus-ring); outline-offset:2px; }
.color-ink { background:var(--pen-1); }.color-blue { background:var(--pen-2); }.color-red { background:var(--pen-3); }.color-green { background:var(--pen-4); }.color-gold { background:var(--pen-5); }.size-button { padding-inline:14px; }
.shortcuts { margin:4px 0 8px; }.shortcuts span { white-space:nowrap; }
.board-shell { width:100%; min-width:0; overflow:hidden; border:2px solid var(--digit-line-control); background:var(--digit-soft); }
#board { display:block; width:100%; max-width:100%; margin:0 auto; background:var(--paper); cursor:crosshair; touch-action:none; }.status { min-height:1.8em; margin:6px 0 0; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.faq details { border-top:1px solid var(--digit-line); padding:10px 0; }.faq summary { min-height:48px; display:flex; align-items:center; gap:10px; font-weight:700; cursor:pointer; list-style:none; }.faq summary::-webkit-details-marker { display:none; }
.faq summary::before { content:"▶"; display:grid; place-items:center; width:24px; height:24px; flex:none; background:var(--digit-signal); color:var(--digit-signal-ink); font-size:11px; clip-path:polygon(0 0,72% 0,100% 28%,100% 100%,0 100%); }.faq details[open] summary::before { transform:rotate(90deg); }
.ad-slot { min-height:100px; margin:24px 0; padding:16px; display:grid; place-items:center; gap:2px; border:1px dashed var(--digit-line-control); background:var(--digit-surface); color:var(--digit-ink-muted); text-align:center; }.ad-slot p,.ad-slot small { margin:0; }.ad-label { font-size:12px; font-weight:700; }
.site-footer { max-width:none; margin-top:38px!important; padding:26px 0 34px; border-top:1px solid var(--digit-line); color:var(--digit-ink-muted); text-align:left; font-size:13px; }.site-footer>* { width:min(100% - 40px,1120px); margin-inline:auto; }.site-footer nav { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:8px 20px; }.site-footer p { margin:10px auto 0; }.copyright { font-variant-numeric:tabular-nums; }
@media (max-width:640px) {
  main { padding-inline:16px; }
  .ai-disclosure { padding:8px 20px; }.ai-disclosure::before { display:block; margin:0 0 2px; }
  .intro h1 { font-size:clamp(30px,10vw,44px); }.lead { font-size:16px; }.journey { margin:26px 0 30px; }.panel { padding:20px; }.first-step { display:grid; gap:2px; }
  .tool-label { min-width:2em; }.color-group { gap:6px; }.tool-group .secondary,.tool-group .primary { flex:1 1 auto; padding-inline:10px; }.color-button { flex:none; }.site-footer>* { width:min(100% - 32px,1120px); }
}
@media (max-width:359px) { .site-header { flex-wrap:wrap; }.site-header .badge { order:3; flex-basis:100%; margin-top:4px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }