/*! ソラコミュ Design System — トークン + ユーティリティ
 *
 *  出典: Claude Design プロジェクト "ソラコミュ Design System" の dist/solacom-tokens.css
 *  取り込み日: 2026-08-03
 *
 *  ■ 本家からの差分（意図的）
 *  本家 dist には tokens/base.css の**要素セレクタ**が含まれる:
 *      *{box-sizing} / body{background,color,font} / h1..h5 / p / a / a:hover / small / ::selection
 *  これらを取り込むと app.css と衝突し、全ページの body 背景・見出しサイズ・リンク色が変わる。
 *  「現行構造を変えない」方針に反するため、**要素セレクタは除外**し、
 *  CSS 変数とクラスベースのユーティリティのみを採用している。
 *  必要な要素スタイルは各ページの CSS（tools.css 等）で明示的に書く。
 *
 *  ■ app.css との併存
 *  変数はすべて意味づけ名（--canvas / --brand / --text-*）とランプ名（--blue-500 等）で、
 *  app.css の --clr-* 系とは名前空間が重ならない。併読して差し支えない。
 *
 *  ■ フォント
 *  Google Fonts は含まない。templates/header.php 側で読み込む（Montserrat 600 が必要）。
 *
 *  ■ 更新手順
 *  Claude Design 側の tokens/*.css を直して dist を再生成し、
 *  上記「要素セレクタを除外」だけを再適用してこのファイルを差し替える。
 */

/* ============================================================
   colors
   ============================================================ */
/* ⚠ ライト値のマッピングは :root / .ds-force-light / @media print の3箇所に複製されている。
   不変条件：**ダークブロックが上書きするトークンは、必ず .ds-force-light と @media print の両方にも
   ライト値で現れること。** 1つでも欠けると、ダークモードの OS で .ds-force-light の内側や
   印刷面にダーク値が漏れる。
   リング・影のダーク／print 上書きは elevation セクション側にある（後勝ちを避けるため）。 */
:root{
  /* ---------- Base ramps ---------- */
  --blue-50:#eff5ff;  --blue-100:#dbe7ff; --blue-200:#bfd4ff; --blue-300:#93b4fd;
  --blue-400:#6090fa; --blue-500:#2563eb; --blue-600:#1d4fd7; --blue-700:#1b40ad;
  --blue-800:#1c3888; --blue-900:#182c67;

  --orange-50:#fff6ed; --orange-100:#ffe9d5; --orange-200:#fed7aa; --orange-300:#fdba74;
  --orange-400:#fb923c; --orange-500:#f97316; --orange-600:#e45f08; --orange-700:#bd4a0c;

  --teal-50:#eefbf8;  --teal-100:#cff5ee; --teal-300:#5eddc9; --teal-500:#0d9488;
  --teal-600:#0f766e; --teal-700:#115e58;

  --indigo-50:#eef1ff; --indigo-100:#e0e5ff; --indigo-300:#a5aefc; --indigo-500:#4f46e5;
  --indigo-600:#4338ca; --indigo-700:#3730a3;

  /* ニュートラルは青みを1〜2%だけ含む。純グレーは使わない */
  --neutral-0:#ffffff;  --neutral-25:#fafcff; --neutral-50:#f4f7fb; --neutral-100:#eaf0f8;
  --neutral-200:#dde5f0; --neutral-300:#c8d3e3; --neutral-400:#9aa8bf; --neutral-500:#6b7c96;
  --neutral-600:#4d5f7c; --neutral-700:#33445f; --neutral-800:#1f3050; --neutral-900:#0f1e35;

  --green-50:#ecfdf3; --green-100:#d1fadf; --green-500:#16a34a; --green-600:#15803d; --green-700:#146c37;
  --amber-50:#fffaeb; --amber-100:#fef0c7; --amber-500:#f59e0b; --amber-600:#b45309;
  --red-50:#fef2f2;   --red-100:#fee2e2;  --red-500:#e0342c;  --red-600:#c02620;

  /* ---------- Semantic: surface ---------- */
  --canvas:var(--neutral-50);
  --surface-card:var(--neutral-0);
  --surface-sunken:var(--neutral-100);
  --surface-muted:var(--neutral-25);
  --surface-inverse:var(--neutral-900);
  --surface-brand-soft:var(--blue-50);
  --surface-accent-soft:var(--orange-50);
  --surface-overlay:rgba(15,30,53,.44);

  /* ---------- Semantic: text ---------- */
  --text-heading:var(--neutral-900);
  --text-body:var(--neutral-700);
  --text-muted:var(--neutral-500);
  --text-faint:var(--neutral-400);
  --text-on-brand:#ffffff;
  --text-on-accent:#ffffff;
  --text-on-inverse:#ffffff;
  --text-link:var(--blue-600);
  --text-link-hover:var(--blue-700);

  /* ---------- Semantic: line ---------- */
  --border-subtle:var(--neutral-200);
  --border-default:var(--neutral-300);
  --border-strong:var(--neutral-400);
  --border-brand:var(--blue-500);

  /* ---------- Semantic: brand / action ---------- */
  --brand:var(--blue-500);
  --brand-hover:var(--blue-600);
  --brand-press:var(--blue-700);
  --brand-tint:var(--blue-50);
  /* アクセントは「今押すべき1つ」だけ。汎用の装飾には使わない */
  --accent:var(--orange-500);
  --accent-hover:var(--orange-600);
  --accent-press:var(--orange-700);
  --accent-tint:var(--orange-50);

  /* ---------- Semantic: status ---------- */
  --success:var(--green-600); --success-bg:var(--green-50);  --success-line:var(--green-100);
  --warning:var(--amber-600); --warning-bg:var(--amber-50);  --warning-line:var(--amber-100);
  --danger:var(--red-600);    --danger-bg:var(--red-50);     --danger-line:var(--red-100);
  --info:var(--blue-600);     --info-bg:var(--blue-50);      --info-line:var(--blue-100);

  /* ---------- Service colors ----------
     サービス色は面（page-hero 帯）とバッジにのみ出す。本文・アイコン・CTA には出さない */
  --svc-sim:var(--blue-500);        --svc-sim-tint:var(--blue-50);
  --svc-used:var(--blue-600);       --svc-used-tint:var(--blue-50);
  --svc-group:var(--teal-600);      --svc-group-tint:var(--teal-50);
  --svc-partner:var(--indigo-600);  --svc-partner-tint:var(--indigo-50);
  --svc-franchise:var(--orange-600);--svc-franchise-tint:var(--orange-50);

  /* ---------- Hero gradients ----------
     グラデーションは page-hero 帯のみ許可。カード・背景・ボタン・グラフには使わない。
     ストップ位置は「テキスト域（グラデ進捗 0–72%）が白文字 4.5:1 を満たす」ように決めてある。
     実測値（テキスト域の最小コントラスト）:
       used 4.54:1 ／ joint 4.52:1 ／ partner 6.37:1 ／ franchise 4.50:1 ／ sim 5.31:1
     100% 端は joint 2.49:1 / franchise 2.15:1 で不足するため、**72% より右に文字を置かない**。
     本文サイズの文字は max-width:32em で帯の左（濃色側）に収めること。 */
  --hero-used:linear-gradient(135deg,#1e3a8a 0%,#2563eb 55%,#3b82f6 100%);
  --hero-joint:linear-gradient(135deg,#115e59 0%,#0f766e 64%,#14b8a6 100%);
  --hero-partner:linear-gradient(135deg,#312e81 0%,#4338ca 55%,#6366f1 100%);
  --hero-franchise:linear-gradient(135deg,#92400e 0%,#d8510b 87%,#f59e0b 100%);
  --hero-sim:linear-gradient(135deg,#182c67 0%,#1d4fd7 55%,#3b82f6 100%);
  --hero-eyebrow-face:rgba(255,255,255,.18);

  /* ---------- 機能解放状態 ---------- */
  --locked-face:var(--neutral-50);
  --locked-line:var(--neutral-200);
  --locked-text:var(--text-muted);

  /* ---------- Data viz ----------
     指標の順序は常に 自給率 → 自家消費率 → 余剰率 */
  --viz-self-sufficiency:var(--blue-500);
  --viz-self-consumption:var(--teal-600);
  --viz-surplus:var(--orange-400);
  --viz-grid:var(--neutral-400);
  --viz-baseline:var(--neutral-300);
  --viz-axis:var(--neutral-300);
  --viz-gridline:var(--neutral-100);
}

/* ---------- Dark mode ---------- */
@media (prefers-color-scheme:dark){
  :root{
  --canvas:#0c1726;
  --surface-card:#142338;
  --surface-sunken:#1b2d45;
  --surface-muted:#17283d;
  --surface-inverse:#e8eef8;
  --surface-brand-soft:#16294a;
  --surface-accent-soft:#2c1c10;
  --surface-overlay:rgba(4,10,20,.62);
  /* 数値の可読性を最優先。KPI の大きな数字は #f4f8ff で白飛びさせない */
  --text-heading:#f4f8ff;
  --text-body:#cdd9ea;
  --text-muted:#94a6c0;
  --text-faint:#7c8fab;
  --text-on-inverse:#0f1e35;
  --text-link:#8fb5fd;
  --text-link-hover:#b6cdfe;
  --border-subtle:#22354e;
  --border-default:#31465f;
  --border-strong:#475d78;
  --border-brand:#5f93f2;
  /* brand は彩度を1段落として面に沈ませる */
  --brand:#4b86ef;
  --brand-hover:#6a9ef4;
  --brand-press:#8ab5f7;
  --brand-tint:#16294a;
  --accent:#f38a3c;
  --accent-hover:#f79e58;
  --accent-press:#fab275;
  --accent-tint:#2c1c10;
  --success:#4ade80; --success-bg:#10281c; --success-line:#1c4632;
  --warning:#fbbf24; --warning-bg:#2b2110; --warning-line:#4a3818;
  --danger:#f87171;  --danger-bg:#2d1416;  --danger-line:#4e2124;
  --info:#8fb5fd;    --info-bg:#16294a;    --info-line:#25406b;
  --svc-sim:#4b86ef;      --svc-sim-tint:#16294a;
  --svc-used:#5f93f2;     --svc-used-tint:#16294a;
  --svc-group:#2dd4bf;    --svc-group-tint:#0e2b2a;
  --svc-partner:#8b8cf7;  --svc-partner-tint:#1e1f45;
  --svc-franchise:#f3a447; --svc-franchise-tint:#2c1c10;
  --locked-face:#17283d; --locked-line:#26394f; --locked-text:#8397b1;
  --viz-self-sufficiency:#6da0f8;
  --viz-self-consumption:#2dd4bf;
  --viz-surplus:#fb923c;
  --viz-grid:#7c8fab;
  --viz-baseline:#3a5170;
  --viz-axis:#3a5170;
  --viz-gridline:#1f3149;
  /* テキスト域 0–72% の実測最小コントラスト:
     used 6.70:1 ／ joint 6.20:1 ／ partner 9.17:1 ／ franchise 4.91:1 ／ sim 7.56:1 */
  --hero-used:linear-gradient(135deg,#16295e 0%,#1c4dab 55%,#2a68cf 100%);
  --hero-joint:linear-gradient(135deg,#0d403d 0%,#0d5b55 55%,#118a80 100%);
  --hero-partner:linear-gradient(135deg,#241f5c 0%,#332b9c 55%,#4a45c6 100%);
  --hero-franchise:linear-gradient(135deg,#5e2a09 0%,#a8420a 55%,#c9760f 100%);
  --hero-sim:linear-gradient(135deg,#131f4a 0%,#1a3e9e 55%,#2a68cf 100%);
  --hero-eyebrow-face:rgba(255,255,255,.14);
  }
}
/* 印刷・PDF・提案書はダークにしない */
.ds-force-light{color-scheme:light;
  --canvas:var(--neutral-50);
  --surface-card:var(--neutral-0);
  --surface-sunken:var(--neutral-100);
  --surface-muted:var(--neutral-25);
  --surface-inverse:var(--neutral-900);
  --surface-brand-soft:var(--blue-50);
  --surface-accent-soft:var(--orange-50);
  --surface-overlay:rgba(15,30,53,.44);
  --text-heading:var(--neutral-900);
  --text-body:var(--neutral-700);
  --text-muted:var(--neutral-500);
  --text-faint:var(--neutral-400);
  --text-on-inverse:#ffffff;
  --text-link:var(--blue-600);
  --text-link-hover:var(--blue-700);
  --border-subtle:var(--neutral-200);
  --border-default:var(--neutral-300);
  --border-strong:var(--neutral-400);
  --border-brand:var(--blue-500);
  --brand:var(--blue-500);
  --brand-hover:var(--blue-600);
  --brand-press:var(--blue-700);
  --brand-tint:var(--blue-50);
  --accent:var(--orange-500);
  --accent-hover:var(--orange-600);
  --accent-press:var(--orange-700);
  --accent-tint:var(--orange-50);
  --success:var(--green-600); --success-bg:var(--green-50);  --success-line:var(--green-100);
  --warning:var(--amber-600); --warning-bg:var(--amber-50);  --warning-line:var(--amber-100);
  --danger:var(--red-600);    --danger-bg:var(--red-50);     --danger-line:var(--red-100);
  --info:var(--blue-600);     --info-bg:var(--blue-50);      --info-line:var(--blue-100);
  --svc-sim-tint:var(--blue-50); --svc-used-tint:var(--blue-50);
  --svc-group-tint:var(--teal-50); --svc-partner-tint:var(--indigo-50);
  --svc-franchise-tint:var(--orange-50);
  --locked-face:var(--neutral-50); --locked-line:var(--neutral-200); --locked-text:var(--text-muted);
  --viz-self-sufficiency:var(--blue-500);
  --viz-self-consumption:var(--teal-600);
  --viz-surplus:var(--orange-400);
  --viz-grid:var(--neutral-400);
  --viz-baseline:var(--neutral-300);
  --viz-axis:var(--neutral-300);
  --viz-gridline:var(--neutral-100);
  /* サービス色と hero 帯。ダークが上書きするので、ライト固定側でも必ず戻す */
  --svc-sim:var(--blue-500);
  --svc-used:var(--blue-600);
  --svc-group:var(--teal-600);
  --svc-partner:var(--indigo-600);
  --svc-franchise:var(--orange-600);
  --hero-used:linear-gradient(135deg,#1e3a8a 0%,#2563eb 55%,#3b82f6 100%);
  --hero-joint:linear-gradient(135deg,#115e59 0%,#0f766e 64%,#14b8a6 100%);
  --hero-partner:linear-gradient(135deg,#312e81 0%,#4338ca 55%,#6366f1 100%);
  --hero-franchise:linear-gradient(135deg,#92400e 0%,#d8510b 87%,#f59e0b 100%);
  --hero-sim:linear-gradient(135deg,#182c67 0%,#1d4fd7 55%,#3b82f6 100%);
  --hero-eyebrow-face:rgba(255,255,255,.18);
}
@media print{:root{color-scheme:light;
  --canvas:var(--neutral-50);
  --surface-card:var(--neutral-0);
  --surface-sunken:var(--neutral-100);
  --surface-muted:var(--neutral-25);
  --surface-inverse:var(--neutral-900);
  --surface-brand-soft:var(--blue-50);
  --surface-accent-soft:var(--orange-50);
  --surface-overlay:rgba(15,30,53,.44);
  --text-heading:var(--neutral-900);
  --text-body:var(--neutral-700);
  --text-muted:var(--neutral-500);
  --text-faint:var(--neutral-400);
  --text-on-inverse:#ffffff;
  --text-link:var(--blue-600);
  --text-link-hover:var(--blue-700);
  --border-subtle:var(--neutral-200);
  --border-default:var(--neutral-300);
  --border-strong:var(--neutral-400);
  --border-brand:var(--blue-500);
  --brand:var(--blue-500);
  --brand-hover:var(--blue-600);
  --brand-press:var(--blue-700);
  --brand-tint:var(--blue-50);
  --accent:var(--orange-500);
  --accent-hover:var(--orange-600);
  --accent-press:var(--orange-700);
  --accent-tint:var(--orange-50);
  --success:var(--green-600); --success-bg:var(--green-50);  --success-line:var(--green-100);
  --warning:var(--amber-600); --warning-bg:var(--amber-50);  --warning-line:var(--amber-100);
  --danger:var(--red-600);    --danger-bg:var(--red-50);     --danger-line:var(--red-100);
  --info:var(--blue-600);     --info-bg:var(--blue-50);      --info-line:var(--blue-100);
  --svc-sim-tint:var(--blue-50); --svc-used-tint:var(--blue-50);
  --svc-group-tint:var(--teal-50); --svc-partner-tint:var(--indigo-50);
  --svc-franchise-tint:var(--orange-50);
  --locked-face:var(--neutral-50); --locked-line:var(--neutral-200); --locked-text:var(--text-muted);
  --viz-self-sufficiency:var(--blue-500);
  --viz-self-consumption:var(--teal-600);
  --viz-surplus:var(--orange-400);
  --viz-grid:var(--neutral-400);
  --viz-baseline:var(--neutral-300);
  --viz-axis:var(--neutral-300);
  --viz-gridline:var(--neutral-100);
  --svc-sim:var(--blue-500);
  --svc-used:var(--blue-600);
  --svc-group:var(--teal-600);
  --svc-partner:var(--indigo-600);
  --svc-franchise:var(--orange-600);
  --hero-used:linear-gradient(135deg,#1e3a8a 0%,#2563eb 55%,#3b82f6 100%);
  --hero-joint:linear-gradient(135deg,#115e59 0%,#0f766e 64%,#14b8a6 100%);
  --hero-partner:linear-gradient(135deg,#312e81 0%,#4338ca 55%,#6366f1 100%);
  --hero-franchise:linear-gradient(135deg,#92400e 0%,#d8510b 87%,#f59e0b 100%);
  --hero-sim:linear-gradient(135deg,#182c67 0%,#1d4fd7 55%,#3b82f6 100%);
  --hero-eyebrow-face:rgba(255,255,255,.18);
}}

/* ============================================================
   typography
   ============================================================ */
:root{
  --font-display:"Montserrat","Noto Sans JP",system-ui,sans-serif;
  --font-body:"Noto Sans JP","Montserrat",system-ui,sans-serif;
  /* 数値は Montserrat + tabular-nums。桁が動いても列が揺れない */
  --font-num:"Montserrat","Noto Sans JP",system-ui,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* ---------- Size scale ---------- */
  --fs-display:40px; --fs-h1:32px; --fs-h2:24px; --fs-h3:20px; --fs-h4:17px;
  --fs-body:15px;    --fs-body-sm:13.5px; --fs-caption:12px; --fs-micro:11px;

  /* 数値専用スケール。KPI は大きく、単位は本文サイズに落とす */
  --fs-num-hero:56px; --fs-num-kpi:40px; --fs-num-lg:28px; --fs-num-md:20px; --fs-num-sm:15px;

  /* ---------- Weight ---------- */
  --fw-regular:400; --fw-medium:500; --fw-bold:700;
  --fw-display-medium:500; --fw-display-semi:600; --fw-display-bold:700;

  /* ---------- Line height ---------- */
  --lh-body:1.7;     /* 日本語本文は必ず 1.7 */
  --lh-tight:1.5;
  --lh-heading:1.35;
  --lh-num:1.05;

  /* ---------- Tracking ---------- */
  --ls-jp:.02em;
  --ls-jp-heading:.01em;
  --ls-num:-.01em;
  --ls-caps:.08em;

  /* ---------- Roles ---------- */
  --type-display:var(--fw-display-semi) var(--fs-display)/var(--lh-heading) var(--font-display);
  --type-h1:var(--fw-display-semi) var(--fs-h1)/var(--lh-heading) var(--font-display);
  --type-h2:var(--fw-bold) var(--fs-h2)/var(--lh-heading) var(--font-body);
  --type-h3:var(--fw-bold) var(--fs-h3)/var(--lh-heading) var(--font-body);
  --type-h4:var(--fw-bold) var(--fs-h4)/var(--lh-tight) var(--font-body);
  --type-body:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-body);
  --type-body-strong:var(--fw-medium) var(--fs-body)/var(--lh-body) var(--font-body);
  --type-body-sm:var(--fw-regular) var(--fs-body-sm)/var(--lh-body) var(--font-body);
  --type-caption:var(--fw-regular) var(--fs-caption)/1.6 var(--font-body);
  --type-label:var(--fw-medium) var(--fs-body-sm)/var(--lh-tight) var(--font-body);
  --type-button:var(--fw-bold) var(--fs-body-sm)/1 var(--font-body);
  --type-eyebrow:var(--fw-display-bold) var(--fs-micro)/1.4 var(--font-display);
  --type-num-kpi:var(--fw-display-bold) var(--fs-num-kpi)/var(--lh-num) var(--font-num);
  --type-num-lg:var(--fw-display-bold) var(--fs-num-lg)/var(--lh-num) var(--font-num);
  --type-num-md:var(--fw-display-semi) var(--fs-num-md)/1.2 var(--font-num);
  --type-num-table:var(--fw-display-medium) var(--fs-num-sm)/1.4 var(--font-num);
}

/* ============================================================
   spacing
   ============================================================ */
:root{
  /* 4px 基準 */
  --sp-0:0; --sp-1:2px; --sp-2:4px; --sp-3:6px; --sp-4:8px; --sp-5:12px;
  --sp-6:16px; --sp-7:20px; --sp-8:24px; --sp-9:32px; --sp-10:40px;
  --sp-11:48px; --sp-12:64px; --sp-13:80px;

  /* コンテナ */
  --card-pad:20px;
  --card-pad-lg:24px;
  --card-pad-sm:16px;
  --card-gap:16px;
  --section-gap:32px;
  --page-pad-x:clamp(20px,4vw,40px); /* 実装 .site-header .inner と同値 */
  --page-max:1200px;
  --content-max:960px;
  --rail-w:352px;
  --nav-w:236px;
  --nav-w-collapsed:64px;
  --topbar-h:60px;
  --row-h:44px;           /* 表の行高 / 入力高 / 最小タップ領域 */
  --row-h-sm:36px;
}

/* ============================================================
   radius
   ============================================================ */
:root{
  --r-xs:4px;
  --r-sm:6px;
  --r-md:10px;   /* 入力・セレクト・小ボタン */
  --r-lg:12px;   /* 内側の小カード・チャート枠 */
  --r-card:16px; /* 標準カード（この系のシグネチャ） */
  --r-xl:20px;   /* 大きめのパネル・モーダル */
  --r-2xl:24px;  /* ヒーロー / 集約サマリ */
  --r-pill:999px;
  --r-circle:50%;
}

/* ============================================================
   elevation
   ============================================================ */
:root{
  /* やわらかい影。青みを含んだ影色で背景 #f4f7fb と馴染ませる */
  --shadow-0:none;
  --shadow-1:0 1px 2px rgba(15,30,53,.06);
  --shadow-2:0 1px 2px rgba(15,30,53,.05), 0 6px 16px -8px rgba(15,30,53,.12);
  --shadow-3:0 2px 4px rgba(15,30,53,.05), 0 14px 32px -12px rgba(15,30,53,.16);
  --shadow-4:0 24px 56px -16px rgba(15,30,53,.24);
  --shadow-inset-top:inset 0 1px 0 rgba(255,255,255,.6);
  --ring-brand:0 0 0 3px rgba(37,99,235,.22);
  --ring-accent:0 0 0 3px rgba(249,115,22,.24);
  --ring-danger:0 0 0 3px rgba(224,52,44,.20);
}
/* リング・影のダーク上書きはこのセクション内で完結させる。
   colors セクション側に置くと、後続の :root 再宣言に後勝ちで負ける（@media は詳細度を上げない）。 */
@media (prefers-color-scheme:dark){
  :root{
    --shadow-1:0 1px 2px rgba(0,0,0,.4);
    --shadow-2:0 1px 2px rgba(0,0,0,.34), 0 6px 16px -8px rgba(0,0,0,.5);
    --shadow-3:0 2px 4px rgba(0,0,0,.34), 0 14px 32px -12px rgba(0,0,0,.55);
    --shadow-4:0 24px 56px -16px rgba(0,0,0,.66);
    --ring-brand:0 0 0 3px rgba(107,158,244,.34);
    --ring-accent:0 0 0 3px rgba(243,138,60,.34);
    --ring-danger:0 0 0 3px rgba(248,113,113,.32);
  }
}
.ds-force-light{
  --shadow-1:0 1px 2px rgba(15,30,53,.06);
  --shadow-2:0 1px 2px rgba(15,30,53,.05), 0 6px 16px -8px rgba(15,30,53,.12);
  --shadow-3:0 2px 4px rgba(15,30,53,.05), 0 14px 32px -12px rgba(15,30,53,.16);
  --shadow-4:0 24px 56px -16px rgba(15,30,53,.24);
  --ring-brand:0 0 0 3px rgba(37,99,235,.22);
  --ring-accent:0 0 0 3px rgba(249,115,22,.24);
  --ring-danger:0 0 0 3px rgba(224,52,44,.20);
}
@media print{
  :root{
    --shadow-1:none;--shadow-2:none;--shadow-3:none;--shadow-4:none;
    --ring-brand:0 0 0 3px rgba(37,99,235,.22);
    --ring-accent:0 0 0 3px rgba(249,115,22,.24);
    --ring-danger:0 0 0 3px rgba(224,52,44,.20);
  }
}

/* ============================================================
   motion
   ============================================================ */
:root{
  /* アニメーションは状態変化の説明のみ。装飾の動きは作らない */
  --dur-instant:80ms;
  --dur-fast:140ms;   /* hover / press */
  --dur-base:200ms;   /* 開閉・トースト */
  --dur-slow:320ms;   /* 計算結果のリビール */
  --ease-out:cubic-bezier(.2,.8,.28,1);
  --ease-in-out:cubic-bezier(.4,0,.2,1);
  --ease-emphasis:cubic-bezier(.16,.84,.24,1);
  --skeleton-cycle:1400ms;
}
@media (prefers-reduced-motion:reduce){
  :root{--dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms;--skeleton-cycle:0ms}
}

/* ============================================================
   ユーティリティ（クラスベースのみ。要素セレクタは意図的に除外）
   ============================================================ */

/* 数値は常に等幅の桁で。列が揺れると「客先に出せる数字」に見えない */
.ds-num,td.ds-num,.ds-kpi-value{font-family:var(--font-num);font-variant-numeric:tabular-nums;letter-spacing:var(--ls-num)}

/* ---------- Shell A（サイト型）の骨格 ---------- */
.ds-site-inner{max-width:var(--page-max);margin:0 auto;padding:16px var(--page-pad-x)}
.ds-page-main{max-width:var(--page-max);margin:0 auto;padding:0 var(--page-pad-x) 64px;display:flex;flex-direction:column;gap:var(--section-gap)}
.ds-page-main--narrow{max-width:var(--content-max)}

/* 2カラム（メイン + 右レール）。1023px 以下でレールはメインの下に落ちる */
.ds-rail-grid{display:grid;grid-template-columns:minmax(0,1fr) var(--rail-w);gap:var(--card-gap);align-items:start}
@media (max-width:1023px){.ds-rail-grid{grid-template-columns:minmax(0,1fr)}.ds-rail-grid>.ds-rail{position:static!important;top:auto!important}}

/* カードグリッド。主ブレークポイントは 768px の1段のみ */
.ds-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:var(--card-gap)}
.ds-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:var(--card-gap)}
@media (max-width:768px){
  .ds-card-grid,.ds-kpi-grid{grid-template-columns:minmax(0,1fr)}
  /* ≤768px は現場での確認用。入力フォーム・提案書ビルダーは出さない。
     ナビの出し分けにこれを使わないこと（意味が違う）— .ds-nav-desktop / .ds-nav-mobile を使う */
  .ds-sp-hide{display:none!important}
}
@media print{.ds-sp-hide{display:none!important}}

/* ---------- ナビの出し分け ----------
   .ds-sp-hide とは別。あちらは「≤768px では扱わせない機能」、こちらは「同じ機能の別形態」。
   **display は必ずこのクラス側で持つこと** — インラインに display を書くとインラインが勝ち、
   メディアクエリでの切替が効かなくなる。 */
.ds-nav-desktop{display:flex}
.ds-nav-mobile{display:none}
@media (max-width:768px){
  .ds-nav-desktop{display:none!important}
  .ds-nav-mobile{display:inline-flex}
}
/* ドロワー。max-height:0 と opacity:0 はクリップするだけで中のリンクは Tab でフォーカスできて
   しまうため、visibility:hidden を併用して「見えないがフォーカスできる」状態を作らない。 */
.ds-navdrawer{display:none;overflow:hidden;max-height:0;opacity:0;visibility:hidden;transition:max-height var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out),visibility 0s linear var(--dur-base)}
@media (max-width:768px){.ds-navdrawer{display:block}}
.ds-navdrawer[data-open="true"]{max-height:80vh;opacity:1;visibility:visible;overflow-y:auto;transition-delay:0s}
@media (prefers-reduced-motion:reduce){.ds-navdrawer{transition:none}}

/* ---------- ToolCard（機能解放状態）の状態変化 ----------
   §3.7 の規律どおり縮小・移動はさせない（translateY は使わない）。面と影だけを1段変える。 */
.ds-toolcard{transition:background var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.ds-toolcard--available:hover{background:var(--surface-muted);box-shadow:var(--shadow-3)}
.ds-toolcard--available:active{background:var(--surface-sunken)}
.ds-toolcard--locked:hover{background:var(--surface-sunken)}
.ds-toolcard--soon{cursor:default}
.ds-toolcard:focus-visible{outline:none;box-shadow:var(--ring-brand);border-color:var(--border-brand)}
@media (prefers-reduced-motion:reduce){.ds-toolcard{transition:none}}

/* ---------- TrustBar ----------
   薄い面・中央寄せ・アイコン付きテキスト。ピル型にしない
   （§3.5：ピルはバッジ・タグ・進捗バーだけの形）。 */
.ds-trustbar{background:var(--surface-muted);border-bottom:1px solid var(--border-subtle)}
.ds-trustbar__inner{max-width:var(--page-max);margin:0 auto;padding:9px var(--page-pad-x);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 26px}
.ds-trustbar__item{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-caption);color:var(--text-muted);white-space:nowrap}