/* 量産ラインの共通スタイル＝DIGIT デザイン言語の既定。
   言語の正本は design/DIGIT-DESIGN-LANGUAGE.md（原則6・署名7・変奏の規則）。
   部品の一覧・使う場面・やらないことは、このフォルダの外の DESIGN-PARTS.md に在る。

   読み方（この順に並んでいる）
     1. 棚ごとのトークン      --digit-* ＝ 役割の名前。色名や用途名を変数名に入れない（言語 §5）
     2. 旧名の別名            既存の本・promo.css・apply_unify.py が使う --bg 等を --digit-* へ繋ぐ
     3. 暗色の変奏            OS の設定。棚の気配は保ったまま地と文字を入れ替える
     4. 下地                  reset と本文の読みやすさ
     5. 署名の部品            分かる人が気付く細部（8個。1画面には 3〜5個だけ使う）
     6. 骨格                  header / main / card / panel / 操作 / 表 / 広告枠 / 法務
     7. 幅と動きの作法        狭い幅・reduced-motion

   作る側の線（言語 §4「変えてよいもの／変えないもの」）
     変えてよい: 色相、紙の質感、見出しの書体、図の語彙、密度の強弱（＝棚ごとのトークンの値）
     変えない  : 1画面1主役と視線3手、署名の意味、数字の作法、動きの時間と reduced-motion、
                 声、AI開示の誠実さ、フォーカスの可視性
   🔴 アプリ側で色を直書きしない。足す色は必ずトークンを1つ増やしてから使う。
*/

/* ─── 1. 棚ごとのトークン ──────────────────────────────────────────────────
   棚の既定は tool（暮らしと仕事の道具＝静か・迷わない・手元に残る）。
   4棚の文字・非文字コントラストは静的に実測済み（n=72 対・線を下回る 0 対・WCAG 2.1 SC 1.4.3／1.4.11）。
   🔴 --digit-line は「節の境目の構造の細線」で 3:1 を課していない（装飾の区切りは SC 1.4.11 の対象外）。
   **操作の輪郭には --digit-line-control を使う**（4棚とも 3:1 以上を実測）。 */
: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;      /* 画面の器の幅 */
}

/* 毎日のパズル＝温かい、触りたくなる（紙と墨・季節色・見出しの明朝） */
[data-theme="chabudai"] {
  --digit-bg:#f5f3ed; --digit-surface:#fffdf7; --digit-surface-raised:#fff;
  --digit-ink:#24312d; --digit-ink-muted:#5a6661;
  --digit-line:#dcd3c2; --digit-line-control:#948771;
  --digit-signal:#8a5813; --digit-signal-ink:#fff; --digit-signal-deep:#68400b;
  --digit-soft:#f7ecd8;
  --digit-ok:#1f5c3d; --digit-caution:#7a5200; --digit-danger:#a22626;
  --digit-paper-texture:radial-gradient(#00000005 1px, transparent 1px);
  --digit-font-display:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",serif;
  --digit-radius-control:6px; --digit-radius-surface:4px;
  --digit-shadow-one:0 14px 34px #3d2f1a14;
  --digit-focus-ring:#0b5f9c; --digit-trace:#4a3a1c12;
}

/* 生成AIと発信＝紙面、編集、根拠が見える（段組・欄外注・強い見出し） */
[data-theme="press"] {
  --digit-bg:#f6f5f1; --digit-surface:#fff; --digit-surface-raised:#fff;
  --digit-ink:#15161a; --digit-ink-muted:#55575f;
  --digit-line:#d3d1c8; --digit-line-control:#8d8b81;
  --digit-signal:#8c2f24; --digit-signal-ink:#fff; --digit-signal-deep:#6d2019;
  --digit-soft:#f3e7e4;
  --digit-ok:#1b6b3a; --digit-caution:#7a5200; --digit-danger:#a3261d;
  --digit-font-display:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",serif;
  --digit-radius-control:1px; --digit-radius-surface:0px;
  --digit-reading-measure:34em;
  --digit-shadow-one:0 16px 38px #1a181412;
  --digit-focus-ring:#1140c8; --digit-trace:#1516190f;
}

/* 実験室＝計器、仮説、観測中（濃い地・信号色・等幅数字・状態灯） */
[data-theme="lab"] {
  color-scheme: dark;
  --digit-bg:#0e141a; --digit-surface:#151d25; --digit-surface-raised:#1b252f;
  --digit-ink:#e9eff4; --digit-ink-muted:#9aabb7;
  --digit-line:#2f3f4a; --digit-line-control:#5b7886;
  --digit-signal:#2fbf9a; --digit-signal-ink:#062018; --digit-signal-deep:#23a383;
  --digit-soft:#152b2a;
  --digit-ok:#45d6a6; --digit-caution:#f0c06a; --digit-danger:#ff9b91;
  --digit-font-display:var(--digit-font-body);
  --digit-radius-control:2px; --digit-radius-surface:0px;
  --digit-shadow-one:0 18px 45px #00000059;
  --digit-focus-ring:#ffcc33; --digit-trace:#8fd8c41a;
}

/* ─── 2. 旧名の別名 ────────────────────────────────────────────────────────
   既存の本（n=74・2026-11-01 実測）と promo.css・共通CSSの差し込み器は
   --bg / --surface / --ink / --ink-2 / --line / --fill / --accent / --on-accent /
   --ok / --warn / --danger / --radius / --base を使う。名前を消すと静かに色が落ちるので、
   🔴 **旧名は捨てずに --digit-* へ繋ぐ**。新しく書く CSS では旧名を使わない。 */
: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);
}

/* ─── 3. 暗色の変奏 ────────────────────────────────────────────────────────
   OS の設定で地と文字を入れ替える。🔴 棚の気配（信号色・書体・質感）は保つ——
   暗くすると4棚が同じ顔になるのは「テンプレ」へ戻ることである。
   lab は既定が濃い地なので入れ替えない。 */
@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;
  }
  [data-theme="chabudai"] {
    color-scheme:dark;
    --digit-bg:#17130d; --digit-surface:#201a12; --digit-surface-raised:#282015;
    --digit-ink:#f4ecdd; --digit-ink-muted:#bdae97;
    --digit-line:#453a28; --digit-line-control:#8b7a5e;
    --digit-signal:#e8b967; --digit-signal-ink:#2a1d07; --digit-signal-deep:#cfa254;
    --digit-soft:#33280f;
    --digit-ok:#7fcfa4; --digit-caution:#e8b967; --digit-danger:#ff9b91;
    --digit-shadow-one:0 14px 34px #00000059; --digit-focus-ring:#7cc6ff;
    --digit-trace:#e8b9671a;
  }
  [data-theme="press"] {
    color-scheme:dark;
    --digit-bg:#121214; --digit-surface:#1a1a1d; --digit-surface-raised:#212125;
    --digit-ink:#eeeef1; --digit-ink-muted:#a9a9b2;
    --digit-line:#34343a; --digit-line-control:#76767f;
    --digit-signal:#f08b7d; --digit-signal-ink:#2a0f0b; --digit-signal-deep:#d9756a;
    --digit-soft:#331d19;
    --digit-ok:#6ccf94; --digit-caution:#e8b967; --digit-danger:#ff9b91;
    --digit-shadow-one:0 16px 38px #00000059; --digit-focus-ring:#8fb4ff;
    --digit-trace:#eeeef10f;
  }
}

* { 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; }
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:var(--digit-measure-frame); 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 { width:min(100% - 40px, var(--digit-measure-frame)); max-width:var(--digit-measure-frame); margin:0 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:20px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.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); }
.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); filter:brightness(.9); }
.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 { max-width:880px; 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; }
}

/* 広さしらべ */
label { display:block; font-weight:600; }
input[type="text"], select { width:100%; min-height:48px; margin:4px 0 14px; padding:8px 12px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
.field-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(92px,1fr); column-gap:12px; }
.field-grid > .field { display:grid; gap:6px; align-content:start; }
.field-hint { margin:-10px 0 12px; color:var(--ink-2); font-size:.85em; }
.form-message { min-height:1.85em; margin:8px 0 0; color:var(--danger); font-weight:600; }
fieldset { margin:8px 0 0; padding:12px; border:1px solid var(--line); border-radius:8px; }
fieldset label { min-height:48px; display:inline-flex; align-items:center; margin-right:20px; }
input[type="radio"] { width:22px; min-height:0; margin-right:8px; }
.result { margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.result > p:first-child { font-size:1.08em; font-weight:700; overflow-wrap:anywhere; }
.table-wrap { overflow-x:auto; margin-top:16px; }
table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
th, td { padding:8px; border-bottom:1px solid var(--line); text-align:left; }
td:last-child { text-align:right; white-space:nowrap; }
dt { margin-top:14px; font-weight:700; }
dd { margin-left:0; }
@media (max-width:420px) { .card { padding:18px; } .field-grid { grid-template-columns:minmax(0,1fr) 96px; } }
@media (max-width:420px) { th, td { padding-inline:4px; } .table-wrap { overflow-wrap:anywhere; } }
/* 狭い幅（<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}}

/* 新テンプレの骨 */
.ai-disclosure{text-align:left;padding:9px max(20px,calc((100vw - 1080px)/2))}.ai-disclosure::before{content:"◆ AI運営";display:inline-block;margin-right:10px;color:var(--accent);font:700 12px/1.7 ui-monospace,monospace;letter-spacing:.06em}.brand-mark{width:32px;height:32px;clip-path:polygon(0 0,72% 0,100% 28%,100% 100%,0 100%)}
.intro{margin-bottom:38px}.kicker{display:block;margin:0 0 10px;color:var(--accent);font:700 12px/1.6 ui-monospace,monospace;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}.intro .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(--line);padding:10px 8px 0 0;font-weight:700}.journey>.is-now{border-top-color:var(--accent)}.journey b{display:block;color:var(--accent);font:700 12px/1.6 ui-monospace,monospace;letter-spacing:.12em}
.content{max-width:820px}.panel{position:relative;margin-bottom:24px;padding:26px;background:var(--surface);box-shadow:0 16px 38px rgba(31,61,48,.14);clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}.copy-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px}.faq details{border-top:1px solid var(--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::before{content:"▶";display:grid;place-items:center;width:24px;height:24px;flex:none;background:var(--accent);color:var(--on-accent);font-size:11px;clip-path:polygon(0 0,72% 0,100% 28%,100% 100%,0 100%)}.faq details[open] summary::before{transform:rotate(90deg)}
.site-footer{max-width:none;margin-top:38px!important;padding:26px 0 34px;text-align:left}.site-footer>*{width:min(100% - 40px,1080px);margin-inline:auto}.site-footer nav{justify-content:flex-start}.site-footer p{margin:10px auto 0}@media(max-width:640px){main{width:100%;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)}.intro .lead{font-size:16px}.journey{margin:26px 0 30px}.panel{padding:20px}.site-footer>*{width:min(100% - 32px,1080px)}}