/* ===========================================================================
   Agent Success CRM — 画面のスタイル

   型サイズは `02_ux_visual_constitution_v1.md` §8 が正典（本人裁定 D7-a）:
     本文・レコード・テーブルのセル … 15–16px
     ラベル・メタデータ・タグ       … 13–14px
     **12px 以下は使わない**（Showcase v5 の 11–12px は写さない）
   情報密度は font-size を落として稼がず、line-height / padding / border / 列幅で稼ぐ。

   色は neutral 中心。青は主 Action と選択だけ、赤は異常だけ（§8）。
   影・グラデーション・glow は使わない（D7-g）。
   ========================================================================= */

:root {
  --bg: #f4f5f7;
  --paper: #fff;
  --ink: #17202a;
  --ink-2: #303943;
  --muted: #5f6873;      /* 13–14px でも AA を満たす濃さにしてある */
  --line: #dde2e7;
  --line-2: #e9edf0;
  --nav: #f6f7f8;        /* 薄いグレーの sidebar。濃紺にしない（D7-b#10） */
  --blue: #1769aa;
  --blue-2: #11527f;
  --blue-soft: #eef5fa;
  --blue-line: #b9d4e7;
  --red: #a92c22;
  --red-soft: #fdf4f2;
  --amber: #8a5a00;
  --amber-soft: #fdf7e9;
  --green: #1a6248;
  --green-soft: #eef6f2;
  --radius: 4px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", "Hiragino Sans",
    "Yu Gothic UI", sans-serif;

  /* 型スケール（この5つ以外を使わない） */
  --t-body: 15px;
  --t-strong: 16px;
  --t-label: 13px;
  --t-meta: 14px;
  --t-num: 20px;
}

* { box-sizing: border-box; }

/**
 * `hidden` は常に効かせる。
 * `.drawer { display: flex }` のような後勝ちの display 指定が `[hidden]` を上書きすると、
 * 「閉じているのに画面いっぱいの透明な板が残ってクリックを吸う」状態になる。
 * 実ブラウザで Work View のボタンが押せないのを実測して見つけた（2026-08-19）。
 */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
table { border-collapse: collapse; width: 100%; }

/* focus は必ず見える。sticky header の下へ隠れないよう scroll-margin を持たせる（§9） */
:focus-visible {
  outline: 3px solid #2d86cc;
  outline-offset: 2px;
  border-radius: 2px;
}
.worklist [tabindex], button, a, input, select, textarea { scroll-margin-top: 84px; scroll-margin-bottom: 24px; }

.skip {
  position: absolute; left: 8px; top: -48px; z-index: 200;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 14px; text-decoration: none; color: var(--ink); font-size: var(--t-meta);
}
.skip:focus { top: 8px; }

svg.icon {
  width: 18px; height: 18px; flex: 0 0 auto;
  stroke: currentColor; fill: none; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
svg.icon.sm { width: 16px; height: 16px; }

/* --- 骨組み ------------------------------------------------------------- */
.shell { min-height: 100vh; display: grid; grid-template-columns: 216px minmax(0, 1fr); }

.sidebar {
  position: sticky; top: 0; height: 100vh; z-index: 30;
  background: var(--nav); border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
}
.brand { height: 64px; padding: 0 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.brandmark { width: 26px; height: 26px; border: 2px solid var(--ink); border-radius: 50%; background: #fff; position: relative; }
.brandmark::before {
  content: ""; position: absolute; left: 5px; top: 6px; width: 12px; height: 7px;
  border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue);
  transform: skew(-14deg) rotate(-18deg);
}
.brandcopy { line-height: 1.25; }
.brandcopy b { display: block; font-size: var(--t-meta); letter-spacing: -0.01em; }
.brandcopy span { display: block; font-size: var(--t-label); color: var(--muted); letter-spacing: 0.06em; }

.nav { padding: 12px 8px; flex: 1; overflow: auto; }
.navbtn {
  width: 100%; min-height: 42px; border: 0; background: transparent; border-radius: var(--radius);
  padding: 0 10px; display: flex; align-items: center; gap: 10px; text-align: left;
  color: #3b444f; font-size: var(--t-meta); margin: 2px 0; position: relative;
}
.navbtn:hover { background: #eceff2; }
.navbtn.on { background: #e6ecf1; color: #12202d; font-weight: 700; }
.navbtn.on::before { content: ""; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 3px; background: var(--blue); }
.navcount { margin-left: auto; font-size: var(--t-label); color: var(--muted); font-variant-numeric: tabular-nums; }

.sideuser { border-top: 1px solid var(--line); padding: 12px 14px; display: flex; gap: 10px; align-items: center; }
.sideuser b { display: block; font-size: var(--t-meta); }
.sideuser span span { display: block; font-size: var(--t-label); color: var(--muted); }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: #e6ecf1; color: #34404b; font-weight: 700; font-size: var(--t-label);
  border: 1px solid #cfd6dd; flex: 0 0 auto;
}
.avatar.sm { width: 26px; height: 26px; font-size: var(--t-label); }

.main { min-width: 0; }
.topbar {
  height: 64px; position: sticky; top: 0; z-index: 25; background: var(--paper);
  border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: auto minmax(240px, 520px) auto;
  align-items: center; gap: 18px; padding: 0 22px;
}
.org { display: flex; align-items: center; gap: 8px; font-size: var(--t-meta); font-weight: 700; white-space: nowrap; }
.org i { width: 8px; height: 8px; border-radius: 50%; background: #2a7b69; }
.search { height: 40px; border: 1px solid #c6ced6; background: #fff; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: var(--radius); }
.search input { border: 0; outline: 0; background: transparent; width: 100%; font-size: var(--t-body); }
.kbd { font-size: var(--t-label); color: #6a7480; border: 1px solid #d5dae0; padding: 1px 6px; border-radius: 3px; }
.topactions { display: flex; align-items: center; gap: 8px; justify-self: end; }

.content { max-width: 1440px; margin: 0 auto; padding: 26px 30px 96px; }
.page { display: none; }
.page.on { display: block; }

.pagehead { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; margin-bottom: 18px; flex-wrap: wrap; }
.pagehead h1 { font-size: 26px; letter-spacing: -0.02em; line-height: 1.25; margin-bottom: 4px; }
/**
 * 説明文は「行末に1〜2文字だけ落ちる」のを作らない。
 * 62ch は日本語だと **33文字で折り返す** ので（実測 2026-08-19）、
 * 36文字の文が「戻しませ／ん。」の形で2文字だけ next line に落ちていた。
 * 文を31文字へ詰めたうえで、幅にも余裕（36文字ぶん）を持たせる。
 * `pretty` は最終行が極端に短くなる割り方を避ける側の指定（効かない環境でも害は無い）。
 */
.pagehead p { color: var(--muted); font-size: var(--t-body); max-width: 68ch; text-wrap: pretty; }
.pagehead .count { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 400; }
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* --- 部品 --------------------------------------------------------------- */
.btn {
  min-height: 40px; border: 1px solid #c3cbd3; background: #fff; border-radius: var(--radius);
  padding: 0 13px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-size: var(--t-meta); font-weight: 700; color: var(--ink-2);
}
.btn:hover { background: #f5f7f8; }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.primary:hover { background: var(--blue-2); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: #eef1f3; }
.btn.small { min-height: 34px; padding: 0 11px; font-size: var(--t-label); }
.btn.quiet { font-weight: 400; color: var(--muted); }
.btn[disabled] { opacity: 0.5; cursor: default; }

.linklike {
  border: 0; background: none; padding: 0; color: var(--blue); font-size: var(--t-label);
  font-weight: 700; text-decoration: underline; text-underline-offset: 3px; min-height: 24px;
}

/* KPI カードを使わない。数値は薄い1行の帯で出す（D7-b#1） */
.inline-summary {
  display: flex; align-items: center; flex-wrap: wrap;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--paper); margin-bottom: 20px;
}
.summaryitem { padding: 12px 22px 12px 0; margin-right: 22px; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.summaryitem b { font-size: var(--t-num); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.summaryitem span { font-size: var(--t-label); color: var(--muted); }
.summaryitem.em b { color: var(--red); }
.summaryitem.text b { font-size: var(--t-strong); }

.section { background: var(--paper); border-top: 2px solid #a9b2bb; margin-bottom: 18px; }
.sectionhead { min-height: 48px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; }
/* 求人名（.jobblock）を含む見出し全般。理由は .worktitle と同じ（TASK-20260820-006）。 */
.sectionhead h2 { font-size: var(--t-strong); overflow-wrap: break-word; text-wrap: pretty; }
.sectionhead span { font-size: var(--t-label); color: var(--muted); }
/* 人名（担当者）は語中で折り返さない（TASK-20260820-004 差し戻し・実測390px）。
   ラベル自体を折らず、収まらないときは見出しの下へ丸ごと落とす（縮小ではなく再構成）。 */
.ownerlabel { white-space: nowrap; }

.banner {
  border: 1px solid var(--amber); background: var(--amber-soft); color: #4a3400;
  padding: 12px 14px; border-radius: var(--radius); margin-bottom: 18px; font-size: var(--t-body);
}
.banner.error { border-color: var(--red); background: var(--red-soft); color: #6d1d16; }

/* --- 必要なこと --------------------------------------------------------- */
.grid-work { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.workside .section:first-child { margin-top: 0; }

.worklist { background: var(--paper); }
/*
 * `.attnitem`（AGS Attention 一覧・TASK-20260820-004）は `.workitem` と同じ行の骨格を使うが、
 * **クラス名は別にしてある**。既存 `tools/verify-ui.mjs` の `measureWorkMeta` 等が
 * `document.querySelectorAll('.workitem')` を `.page.on` でスコープせず DOM 全体から拾うため、
 * 同じクラス名を使うと非表示ページの Attention 行まで誤って「必要なこと」画面の行として
 * 測ってしまい、既存の regression が壊れる（実測 2026-08-20）。骨格 CSS だけ共有する。
 */
.workitem, .attnitem {
  border-bottom: 1px solid var(--line-2); padding: 15px 14px;
  display: grid; gap: 14px; align-items: center;
}
.workitem:last-child, .attnitem:last-child { border-bottom: 0; }
.workitem:hover, .attnitem:hover { background: #fafcfd; }
/* **業務種別ごとに左端の列の中身が変わる**（D7-b#2）。同じ Card に押し込めない。 */
.workitem.resurfaced, .attnitem.resurfaced { grid-template-columns: 104px minmax(0, 1.2fr) minmax(226px, 0.85fr) 118px; }
.workitem.overdue, .attnitem.overdue       { grid-template-columns: 104px minmax(0, 1.2fr) minmax(226px, 0.85fr) 118px; background: #fffcfb; }
.workitem.promise, .attnitem.promise       { grid-template-columns: 104px minmax(0, 1.2fr)  minmax(226px, 0.85fr) 118px; }
.workitem.next, .attnitem.next             { grid-template-columns: 104px minmax(0, 1.2fr)  minmax(226px, 0.85fr) 118px; }

/* 「なぜ今」と「いつまで」を縦に積む。横に並べると狭い列で語の途中で折り返す。 */
.kind { font-size: var(--t-label); font-weight: 700; color: var(--muted); display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.kind.red { color: var(--red); }
.kind.blue { color: var(--blue); }
.kind.amber { color: var(--amber); }
.kindsub { display: block; font-weight: 400; color: var(--muted); }
.timebig { font-size: var(--t-strong); font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
/**
 * 求人名・会社名・仕事名（意味のある固有名称）を含む見出しの語中分断対策（TASK-20260820-006）。
 * font-size は下げない。
 *
 * `word-break: keep-all` + `overflow-wrap: break-word` を最初に試したが、実測で
 * ケースによって悪化した:
 *   - 直った例: 「北陸システムズ「法人営業（SaaS）」の結果を確認」の「結果」の途中
 *     （結／果）での分断は無くなった
 *   - 悪化した例: 「山田さんへ電話して希望条件を再確認する」が「再確認す／る」のように
 *     **助動詞「する」の途中**（す/る）で割れ、1文字だけの孤立行になった
 * `keep-all` は CJK の内部に一切の分割点を作らないので、列幅に入り切らないときは
 * `overflow-wrap` が強制的に割るしかない。その強制位置が「する」の内部に来てしまい、
 * 辞書ベースで割らないはずの keep-all がかえって最悪の割れ方（1文字孤立）を生んでいた。
 *
 * 代わりに `text-wrap: pretty`（`.pagehead p` で使っているのと同じ、最終行が極端に
 * 短くなる割り方を避ける側の指定）と `overflow-wrap: break-word` だけを使う。
 * 「山田さんへ...再確認する」は「再確認／する」（2文字。孤立ではない）になり、
 * 求人名（`.jobblock .sectionhead h2`）は 390px で badge/meta を見出し下へ落とす
 * 別対応（下記）と合わせれば1行に収まる（実測）。「結果」の分断は完全には防げないが
 * （4文字の最終行になるだけで孤立行ではない）、1文字孤立という最も目立つ崩れ方を
 * 確実に消せる方を優先した——**日本語はもともと単語間に空白を持たないので、
 * CSS だけで「意味のある語」を完全に判定して分割点を避けることはできない**。
 * 検証可能な形で固定したのは「最終行が1文字だけの行を作らない」（layout の性質。
 * 特定の文字列（「営業マネージャー」等）には依存しない・検査は tools/verify-ui.mjs 参照）。
 *
 * 差し戻し#2（本人指定の優先順で実測・2026-08-20）: 残っていた「結／果を確認」
 * 「電話して／希望条件を再確認する」のような**2文字以上の語中分断**を、
 * `word-break: auto-phrase`（この環境の Chromium 148 で `CSS.supports` 実測 true）を
 * 上乗せして改善した。文節単位で折り返し点を選ぶ指定なので、「結果」を割らずに
 * 「北陸システムズ「法人営業（SaaS）」の」／「結果を確認」の2行に、
 * 「山田さんへ電話して」／「希望条件を再確認する」の2行に変わった（実測・1文字孤立0件は維持）。
 * 独自の形態素解析・特定文字列 hack ではなく標準 CSS 値一つを足しただけ。
 * **fallback**: 既存の `overflow-wrap: break-word; text-wrap: pretty` を土台に残したまま
 * 追加しているので、未対応ブラウザでは `word-break` 未知値が無視され今までの挙動に落ちる。
 * 適用範囲は Work View の見出し（`.worktitle` / `.context b`）のみ（差し戻し#2の指示範囲）。
 * 390px・企業 Workspace 側（`.sectionhead h2` 等）は今回変更しない
 * （実測: 390px の `.worktitle`/`.context b` に auto-phrase を足しても孤立0件は変わらず、
 * 悪化もしていない＝害はないが、指示範囲外への拡大はしない）。
 *
 * 差し戻し（TASK-20260820-021）: AI Proposal の Diff 行（`.proposal p` — 求職者 Workspace の
 * 候補一覧・記録直後 Drawer・企業 `coProposalList` の3面とも同じ要素）で「550万円以
 * ／上」のような語中分断が実測された。**新しい方針は発明せず**、この既存ルールの
 * セレクタへ `.proposal p` を足すだけで対応する（fallback は上と同じ理屈でそのまま効く）。
 */
.worktitle, .context b, .proposal p { overflow-wrap: break-word; text-wrap: pretty; word-break: auto-phrase; }
.worktitle { font-weight: 700; font-size: var(--t-strong); margin-bottom: 4px; }
/**
 * 「誰の仕事か」の行。**chip と名前は1ブロック**で、ここでは折り返さない。
 *
 * 直した理由（2026-08-19・目視で見つかった粗）: 以前は chip と
 * 「名前・職種・求人名」を1本の flex に並べていたので、名前ごと入りきらない行では
 * **chip だけが上の行に残って**次の行に名前が落ち、行の高さが 87px と 119px で混ざった。
 * 視線が行ごとに揺れる。列幅の取り合いでは解けない（4列とも詰まっている）ので、
 * 「誰か」と「どんな人か」を**常に2段**にして高さを揃えた。折返しは題名側で受ける。
 */
.workmeta { font-size: var(--t-body); color: var(--muted); display: flex; flex-direction: column; gap: 2px; }
.workmeta .who { display: flex; gap: 8px; align-items: center; min-width: 0; }
.workmeta .whoname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.workmeta .attrs { min-width: 0; overflow-wrap: anywhere; }
.context { font-size: var(--t-body); }
.context b { display: block; font-weight: 700; color: var(--ink-2); }
.context span { display: block; color: var(--muted); margin-top: 2px; }
.rightcol { display: flex; justify-content: flex-end; }

.waitingmini { padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
.waitingmini:last-child { border-bottom: 0; }
.waitingmini b { display: block; font-size: var(--t-body); font-weight: 700; }
.waitingmini span { display: block; font-size: var(--t-label); color: var(--muted); margin-top: 2px; }
/* どの求人・誰の待ちか。期限より上位の情報なので、期限の行より強くする（12px へ落として詰めない）。 */
.waitingmini span.who { font-size: var(--t-meta); color: var(--ink-2); }

.integration { padding: 12px 14px; border-bottom: 1px solid var(--line-2); display: flex; gap: 10px; align-items: flex-start; }
.integration:last-child { border-bottom: 0; }
.integration b { font-size: var(--t-body); display: block; }
.integration span { font-size: var(--t-meta); color: var(--muted); display: block; margin-top: 2px; }
.statedot { width: 9px; height: 9px; border-radius: 50%; margin-top: 8px; flex: 0 0 auto; background: #9aa3ac; }
.statedot.connected { background: #2a7b69; }
.statedot.disconnected { background: #9aa3ac; }
.statedot.failed { background: var(--red); }

.empty { padding: 28px 16px; color: var(--muted); font-size: var(--t-body); text-align: center; }
.empty b { display: block; color: var(--ink-2); font-size: var(--t-strong); margin-bottom: 4px; }

/* --- 表 ----------------------------------------------------------------- */
.filterbar { display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 0; }
.field-inline { display: flex; flex-direction: column; gap: 5px; font-size: var(--t-label); color: var(--muted); }
.field-inline input, .field-inline select {
  min-height: 38px; border: 1px solid #c6ced6; border-radius: var(--radius);
  padding: 0 10px; background: #fff; font-size: var(--t-body); min-width: 200px;
}
.filternote { font-size: var(--t-label); color: var(--muted); margin-left: auto; padding-bottom: 8px; }

.table { background: var(--paper); }
.table th, .table td { padding: 13px 12px; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: middle; font-size: var(--t-body); }
.table th { font-size: var(--t-label); color: var(--muted); font-weight: 700; background: #fafbfc; position: sticky; top: 64px; z-index: 5; }
.table tbody tr:hover td { background: #f8fbfc; }
.table .name { font-weight: 700; }
.table .num { font-variant-numeric: tabular-nums; }
.table .unknown { color: var(--muted); }
.pager { display: flex; gap: 12px; align-items: center; justify-content: flex-end; padding: 14px 0; font-size: var(--t-meta); color: var(--muted); }

/* --- Workspace ---------------------------------------------------------- */
.entitybar { display: flex; align-items: center; gap: 12px; }
/* 求職者名・企業名の見出し（#wsName / #coName）。理由は .worktitle と同じ（TASK-20260820-006）。 */
.entitybar h1 { overflow-wrap: break-word; text-wrap: pretty; }
/* 390px で「戻／る」に割れていた（実測 2026-08-20）。2文字のラベルは折らない。 */
.entitybar .back { min-height: 34px; padding: 0 8px; font-size: var(--t-label); white-space: nowrap; }
.entitymark {
  width: 44px; height: 44px; border: 1px solid #cbd2d9; display: grid; place-items: center;
  background: #f7f8f9; font-size: var(--t-strong); font-weight: 700; border-radius: var(--radius);
}
.tabs { display: flex; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.tab { border: 0; background: transparent; padding: 11px 15px 9px; font-size: var(--t-meta); color: #4d5762; border-bottom: 2px solid transparent; min-height: 42px; }
.tab.on { color: var(--ink); font-weight: 700; border-bottom-color: var(--blue); }
.tabpanel { display: none; }
.tabpanel.on { display: block; }

.candidate-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) 330px; gap: 24px; align-items: start; }
.factwrap { padding: 4px 14px 10px; }
.facts { display: grid; grid-template-columns: 1fr 1fr; }
.fact { padding: 12px 0; border-bottom: 1px solid var(--line-2); display: grid; grid-template-columns: 108px 1fr; gap: 12px; align-items: baseline; }
.fact:nth-child(odd) { padding-right: 20px; }
.fact:nth-child(even) { padding-left: 20px; }
.fact label { font-size: var(--t-label); color: var(--muted); }
.fact b { font-size: var(--t-body); font-weight: 700; }
.fact b.unknown { font-weight: 400; color: var(--muted); }
.source { margin-left: 8px; }

.meaning { padding: 2px 14px 8px; }
.meaningrow { padding: 12px 0; border-bottom: 1px solid var(--line-2); display: grid; grid-template-columns: 104px 1fr; gap: 12px; font-size: var(--t-body); }
.meaningrow:last-child { border-bottom: 0; }
.meaningrow label { font-size: var(--t-label); color: var(--muted); font-weight: 700; }
.meaningrow.ai label { color: var(--amber); }
/* AGS Advice は「未確定の AI 候補」ではなく Consultant の助言。amber(ai)を使い回すと
   意味が混ざるので専用色にする（TASK-20260820-004・本人指摘: Advice != Decision の
   視覚も分けること）。 */
.meaningrow.advice label { color: var(--blue); }

.proposal { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 12px; padding: 14px; border-bottom: 1px solid var(--line-2); align-items: center; }
.proposal:last-child { border-bottom: 0; }
.proposal label { font-size: var(--t-label); color: var(--muted); font-weight: 700; }
.proposal b { display: block; font-size: var(--t-body); }
.proposal p { font-size: var(--t-body); color: var(--muted); margin-top: 2px; }
.proposal .buttons { display: flex; gap: 8px; }
.risk { display: inline-flex; align-items: center; min-height: 24px; padding: 0 7px; border-radius: 3px; font-size: var(--t-label); border: 1px solid var(--line); background: #fafbfc; color: #4d5762; margin-left: 8px; }
.risk.high { border-color: #d9b4af; background: var(--red-soft); color: #7c2419; }

.nextrow, .waitrow { padding: 13px 14px; border-bottom: 1px solid var(--line-2); display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.nextrow:last-child, .waitrow:last-child { border-bottom: 0; }
.nextrow b, .waitrow b { display: block; font-size: var(--t-body); font-weight: 700; }
.nextrow span, .waitrow span { display: block; font-size: var(--t-meta); color: var(--muted); margin-top: 2px; }

.stage { display: flex; align-items: center; gap: 0; }
.sdot { width: 11px; height: 11px; border-radius: 50%; border: 2px solid #99a3ad; background: #fff; flex: 0 0 auto; }
.sdot.done { border-color: #4c6c88; background: #4c6c88; }
.sdot.now { border-color: var(--blue); background: #fff; box-shadow: 0 0 0 3px var(--blue-soft); }
.sline { width: 26px; height: 2px; background: #d3d8dd; }
.sline.done { background: #4c6c88; }
.stagelabel { font-size: var(--t-label); color: var(--muted); margin-top: 5px; display: block; }
.badge { display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px; border-radius: 3px; font-size: var(--t-label); font-weight: 700; border: 1px solid var(--line); background: #fafbfc; color: #4d5762; white-space: nowrap; }
.badge.active { border-color: var(--blue-line); background: var(--blue-soft); color: #17517b; }
.badge.closed { color: var(--muted); }
.badge.due { border-color: #d9b4af; background: var(--red-soft); color: #7c2419; }

/* --- 募集企業 Workspace -------------------------------------------------- */
/**
 * 求職者側（`.candidate-grid`）と**同じ骨格を使い回していない**。
 * こちらは右レールが「タブを切り替えても消えない文脈」（担当者・次の仕事・待ち）で、
 * 左は求人が縦に積む主役。だから左右の比率も、左の中身の作りも別。
 */
.company-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) 316px; gap: 24px; align-items: start; }
.company-grid > div > .tabs { margin-bottom: 16px; }

/* 求人は1件ずつ独立した塊。**全部同じ Card 構造にしない**ので、
   見出しに「選考中 / これまでに推薦 / 条件の最終更新」を並べて、本体は条件の表にしている。 */
.jobblock { border-top-color: #8f9aa5; }
/* 文章の条件は1行ぶんを使い切る（半端な罫線と行高のばらつきを作らない） */
.jobblock .fact.wide { grid-column: 1 / -1; grid-template-columns: 108px 1fr; padding-left: 0; padding-right: 0; }
.jobblock .fact.wide:last-child { border-bottom: 0; }
.jobblock .sectionhead h2 { display: flex; align-items: center; gap: 8px; }
.jobactions { display: flex; gap: 8px; justify-content: flex-end; padding: 10px 14px 12px; border-top: 1px solid var(--line-2); flex-wrap: wrap; }

.contactrow { padding: 12px 14px; border-bottom: 1px solid var(--line-2); display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.contactrow:last-child { border-bottom: 0; }
.contactrow b { display: block; font-size: var(--t-body); font-weight: 700; }
.contactrow span span { display: block; font-size: var(--t-meta); color: var(--muted); margin-top: 2px; }

/* 観測実績の表。Chart にしていない（問える問いが6項目 言えないものはグラフにしない）。 */
.table.plain { background: transparent; }
.table.plain td { border-bottom: 1px solid var(--line-2); font-size: var(--t-body); }
.table.plain td:last-child { text-align: right; font-weight: 700; width: 92px; }
.tablenote { font-size: var(--t-meta); color: var(--muted); padding: 10px 14px 12px; }
/* 同姓同名を見分けるための2段目（名前だけで並べない） */
.subline { display: block; font-size: var(--t-meta); color: var(--muted); margin-top: 2px; }

.entitymark.co { background: #eef2f6; color: #3d4855; }
.entitymark.co .icon { width: 22px; height: 22px; }
/* 角の chip は会社、丸は人（Work View で押す前に区別がつくように）。 */
.avatar.co { border-radius: 3px; background: #eef2f6; color: #3d4855; }
.avatar.co .icon { width: 15px; height: 15px; }

.select, .textinput {
  width: 100%; min-height: 40px; border: 1px solid #c6ced6; border-radius: var(--radius);
  padding: 0 10px; background: #fff; font-size: var(--t-body);
}

.timeline { background: var(--paper); border-top: 2px solid #a9b2bb; padding: 8px 16px 16px; }
.event { display: grid; grid-template-columns: 76px 20px 1fr; gap: 10px; min-height: 62px; }
.event time { font-size: var(--t-label); color: var(--muted); padding-top: 14px; font-variant-numeric: tabular-nums; }
.track { position: relative; }
.track::before { content: ""; position: absolute; left: 9px; top: 22px; bottom: -8px; width: 1px; background: #d8dde2; }
.event:last-child .track::before { display: none; }
.edot { position: absolute; left: 5px; top: 15px; width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2px solid #4c6c88; }
.event .body { padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.event:last-child .body { border-bottom: 0; }
.event b { display: block; font-size: var(--t-body); }
.event p { color: var(--muted); font-size: var(--t-body); margin-top: 3px; }

/* --- Drawer（Modal ではない。文脈を失わない・D7-b#3）--------------------- */
.drawerback { position: fixed; inset: 0; background: rgba(20, 28, 36, 0.24); z-index: 90; }
.drawer {
  position: fixed; right: 0; top: 0; bottom: 0; width: min(560px, 96vw);
  background: #fff; border-left: 1px solid #cfd5da; z-index: 100;
  display: flex; flex-direction: column;
}
.drawerhead { padding: 20px 20px 16px; border-bottom: 1px solid var(--line); display: flex; gap: 12px; align-items: flex-start; }
.drawerhead h2 { font-size: 20px; letter-spacing: -0.01em; }
.drawerhead p { font-size: var(--t-body); color: var(--muted); margin-top: 3px; }
.drawerclose { margin-left: auto; border: 0; background: transparent; color: #5c6570; padding: 8px; border-radius: var(--radius); min-width: 40px; min-height: 40px; }
.drawerclose:hover { background: #eef1f3; }
/**
 * Drawer が開いたまま完了する操作（候補の「反映する / 見送る」）の通知の器
 * （TASK-20260821-005）。`.banner` の色と文字組みをそのまま流用し、**Drawer の head と
 * body の間に敷く帯**にするために、角丸・左右上の枠・下マージンだけ外す。
 * **position は指定しない**（＝通常のドキュメントフロー）。ここが overlay に戻らない限り、
 * Drawer の中身とも背後の画面とも構造的に重なりようがない。
 */
.drawernotice { margin: 0; border-radius: 0; border-width: 0 0 1px; }

.drawerbody { padding: 18px 20px; overflow: auto; flex: 1; }
.drawerfoot { border-top: 1px solid var(--line); padding: 14px 20px; display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

.field { margin-bottom: 18px; }
.field > label { display: flex; justify-content: space-between; gap: 12px; font-size: var(--t-label); color: var(--muted); font-weight: 700; margin-bottom: 6px; }
.textarea { width: 100%; min-height: 150px; border: 1px solid #c6ced6; border-radius: var(--radius); padding: 11px; resize: vertical; font-size: var(--t-body); line-height: 1.7; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { min-height: 36px; border: 1px solid #c6ced6; background: #fff; border-radius: 3px; padding: 0 11px; font-size: var(--t-meta); display: inline-flex; align-items: center; }
.chip.on { background: var(--blue-soft); border-color: var(--blue-line); color: #16507a; font-weight: 700; }

.joblist { border-top: 1px solid var(--line); }
.joboption { display: flex; gap: 12px; align-items: flex-start; padding: 14px 2px; border-bottom: 1px solid var(--line-2); }
.joboption input { width: 20px; height: 20px; margin-top: 3px; flex: 0 0 auto; accent-color: var(--blue); }
.joboption b { display: block; font-size: var(--t-body); }
.joboption span { display: block; font-size: var(--t-body); color: var(--muted); margin-top: 2px; }

.sourcebody { border: 1px solid var(--line); background: #fbfcfd; padding: 14px; border-radius: var(--radius); font-size: var(--t-body); line-height: 1.9; white-space: pre-wrap; }
.sourcemeta { display: grid; grid-template-columns: 108px 1fr; gap: 8px 14px; padding: 14px 0; font-size: var(--t-meta); }
.sourcemeta dt { color: var(--muted); font-size: var(--t-label); }
.sourcemeta dd { margin: 0; font-size: var(--t-body); }

.resultchoice { display: grid; gap: 10px; }
.resultchoice button { justify-content: flex-start; text-align: left; padding: 14px; min-height: 60px; flex-direction: column; align-items: flex-start; gap: 3px; }
.resultchoice b { font-size: var(--t-strong); }
.resultchoice span { font-size: var(--t-meta); color: var(--muted); font-weight: 400; }

/**
 * toast は**右レール・要対応リスト・主要CTA・ページ説明文のどれにも重ねない**
 * （TASK-20260820-006・本人差し戻し#2で「ページ説明文」を追加）。
 *
 * 右レール（「待っている」「連携の状態」）は、いつ見てもそこに在って読ませ続けるパネルで、
 * 未接続と0件の区別もここでしている。右下に出していたら「メール連携 未接続です…」の本文を
 * 22,650px² 覆っていた（実測 2026-08-19）。左下（本文カラム側）へ移して右レールは解消したが、
 * 今度は要対応リストの5行目（再浮上の直後に一番読ませたい行）に 29,304px² 重なっていた
 * （実測 2026-08-20）。**一時的な報せが、持続的な情報や次の一手を隠すのは常に逆**。
 *
 * 直し方（位置調整のみ・骨組みは変えない）: bottom 固定をやめ、**topbar の直下**（サイドバー/
 * トップバーが占める帯）へ dock する。この帯は要対応リスト・右レール（どちらも pagehead や
 * inline-summary より下から始まる）にも、topbar 内の主要CTA（`.btn.primary`。topbar 下端より
 * 上に居る）にも掛からない。
 *
 * 差し戻し#2（実測 2026-08-20）: 最初の位置調整（top:70px）は pagehead の**見出し文字**には
 * 掛からない設計だったが、**説明文（`.pagehead p`。プロダクト思想を説明する重要文）** には
 * 掛かっていた（1440px で 5,858px² 重なり）。h1 と p は高さがほぼ固定（実測: 全ページで
 * pagehead 全体の bottom が 151px で揃っている）なので、**p の下端（151px）より下へ dock**
 * すれば構造を変えずに閉じる。`top: 158px` は 151px に 7px の余白を足した値（丸めの誤差を吸収）。
 * この帯は要対応リスト・右レール（247px から）にも、company Workspace の pagehead 内 primary
 * ボタン（90–130px）にも掛からない（全て実測）。
 * 960px 以下では sidebar が上へ回り、topbar も static になるので、その帯（ページ最上部）へ
 * 同じ考え方で dock する（説明文はさらに下にあるので、こちらは元から重ならない）。
 */
.toast {
  position: fixed; top: 158px; left: calc(216px + 24px); right: auto; bottom: auto;
  background: #1f2933; color: #fff;
  padding: 13px 16px; border-radius: var(--radius); font-size: var(--t-meta);
  opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .18s, transform .18s;
  z-index: 130; max-width: min(420px, 92vw);
}
.toast.on { opacity: 1; transform: none; }

.loading { padding: 26px 16px; color: var(--muted); font-size: var(--t-body); }

/* --- 浮いているもの（Operational View・Slice A）---------------------------
   装飾を1つも足していない。既存の `.table` / `.chip` / `.inline-summary` に乗せ、
   足したのは「印を1枚だけ置く器」と「重なりを開いたときの器」と「退避先」の3つだけ。
   **card 化も badge の並置もしない**（17種 検知できることと、17枚 並べることは別）。 */

/* 日本語は語の切れ目で折れないので、説明文が「こ／こは」のように語中で落ちる
   （実測 2026-08-23・1440px）。`.pagehead p` 全体を変えず、この面だけに当てる。 */
#page-operational .pagehead p { word-break: auto-phrase; }

/* 判定不能の理由。**数の真下に置く**——数だけ出して黙ると「0件」に読まれる（A-6c）。 */
.opreason {
  font-size: var(--t-meta); color: var(--muted); line-height: 1.7;
  max-width: 78ch; margin: -6px 0 16px; text-wrap: pretty;
}

/* 同姓同名・同一企業の複数求人を見分けるための2段目（名前だけで並べない）。 */
.opsub { display: block; font-size: var(--t-meta); color: var(--muted); margin-top: 3px; }

/**
 * 1行に1枚だけ置く印。**色は「誰が止めているか」の分類**であって警告の強弱ではない
 * （Ashby と同じ考え方。誰待ちの色と滞留の色を1枚に重ねない）。
 * 塗りつぶしの badge にしていないのは、46行が同時に光ると分類として読めなくなるから。
 */
.opmark { font-size: var(--t-body); font-weight: 700; color: var(--ink-2); }
.opmark.red { color: var(--red); }
.opmark.amber { color: var(--amber); }
.opmark.quiet { color: var(--muted); font-weight: 400; }

/* 「次の一手」列。**無い（異常）と 判定できない（測れない）を同じ見た目にしない。**
   ただし赤にはしない —— coverage が「無い」行は必ず誰待ち＝`nobody` なので印が既に赤で、
   同じ行で2回 赤くすると「強調は1つだけ」を割る（実測 2026-08-23・スクショで見つけた）。 */
.optable td.opnone { color: var(--ink); font-weight: 700; }

.oprowactions { text-align: right; white-space: nowrap; }
.oprowactions .btn + .btn { margin-left: 6px; }

/* 重なりを開いたとき。**検知は17種のまま**なので、開けば全部 読める。 */
.opmore td { background: #fafbfc; }
.opmorebody { padding: 4px 0 6px; font-size: var(--t-body); }
.opmorebody b { display: block; font-size: var(--t-label); color: var(--muted); margin-bottom: 6px; }
.opmorebody ul { margin: 0; padding-left: 20px; line-height: 1.9; }

/* 主面から退避した根拠。**退避先には厚く置く**（主面は数字、押したら定義）。 */
.opdetails { margin: 4px 0 18px; font-size: var(--t-meta); }
.opdetails > summary {
  cursor: pointer; color: var(--blue); min-height: 36px; display: flex; align-items: center;
}
.opmethodbody { padding: 8px 2px 4px; color: var(--ink-2); line-height: 1.85; max-width: 92ch; }
.opmethodbody p { margin-bottom: 10px; }
.opmethodbody > b { display: block; margin: 14px 0 6px; font-size: var(--t-label); color: var(--muted); }
.opsignals { margin: 0; padding-left: 20px; line-height: 1.85; }
.opwhere { display: block; font-size: var(--t-label); color: var(--muted); overflow-wrap: anywhere; }

/**
 * AGS支援: **個票にしない Signal を率だけで置く帯**（TASK-20260823-032）。
 * 行にすると「Consultant に全件を警告表示」になるので、ここは**数と分母だけ**。
 * 述語（どう数えたか）は下の details へ退避する ——主面は数字、押したら定義。
 * 主役（上の個票の表）と張り合わないよう、数字は `--t-strong` 止まりで
 * `--t-num`（20px・主役の帯が使う大きさ）は使わない。
 */
.agsrates {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1px; background: var(--line);
}
.agsrate { background: var(--paper); padding: 12px 14px; }
.agsrate b {
  display: block; font-size: var(--t-strong); font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.agsrate b i { font-style: normal; font-weight: 400; color: var(--muted); font-size: var(--t-meta); }
.agsrate span { display: block; font-size: var(--t-label); color: var(--muted); margin-top: 3px; }
/* 母数0 ＝「まだ一度も評価対象になっていない」。**0件を「異常が無い」と読ませない。** */
.agsrate.zero b { color: var(--muted); }

/* 直近の Advice が無い ＝ **まだ誰も助言していない**。空欄で流さず、薄字で明示する。 */
.agsnoadvice { color: var(--muted); }

/* --- 支援計画（Engagement Roadmap・TASK-20260824-061）---------------------
   この面の主役は **Gate**（Item の一覧ではない）。だから Gate は表にせず、
   1本ごとに「名前 / 揃っていない前提 / 次の一手」を横に並べた行として置き、
   Item はその下の既存 `.table` に畳む。装飾は足していない
   —— 使ったのは既存の `.section` / `.table` / `.inline-summary` / `.btn` と、
   ここで足した「Gate の行」と「幹部会の4列」の2つだけ。 */

.gaterow {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto;
  gap: 12px 18px; align-items: start;
  padding: 15px 14px; border-bottom: 1px solid var(--line-2);
}
.gaterow:last-child { border-bottom: 0; }
/* 通過済み・保留は「終わった行」。**opacity で薄くしない**（確定色で静かにする）。 */
.gaterow.closed { background: #fafbfc; }
.gatename { font-size: var(--t-strong); font-weight: 700; letter-spacing: -0.01em; text-wrap: pretty; }
.gatemeta { font-size: var(--t-meta); color: var(--muted); margin-top: 3px; }

/* 揃っていない前提。**「通せません」だけを出す面にしない**ので、条件は必ず全部見せる。 */
.gateconds { margin: 0; padding: 0; list-style: none; }
.gateconds li {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 8px;
  align-items: baseline; font-size: var(--t-body); line-height: 1.7; padding: 1px 0;
}
/* 済/未/要確認は**文字で**言う（色だけで区別しない）。 */
.condmark { font-size: var(--t-label); font-weight: 700; color: var(--muted); }
.gateconds li.ok .condmark { color: var(--green); }
.gateconds li.ok > span:nth-child(2) { color: var(--muted); }
.gateconds li.todo .condmark { color: var(--ink-2); }
/* 承認は「待ち」ではなく「通すときにやること」。赤で警告しない（異常ではない）。 */
.gateconds li.ask .condmark { color: var(--amber); }
.condkind { font-size: var(--t-label); color: var(--muted); white-space: nowrap; }

.gateact { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.gatestate { font-size: var(--t-label); font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.gatestate.ok { color: var(--green); }
.gatestate.wait { color: var(--muted); }
/* 飛ばしたことは消えない。**ここだけ赤**（揃わないまま進んでいる＝異常）。 */
.gatestate.hold { color: var(--red); }
.gatereason { font-size: var(--t-meta); color: var(--muted); text-align: right; max-width: 30ch; }

/* 成果物。**本体は持っていない**ので、行に出せるのは確定の有無とリンクだけ。 */
.delrow { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 2px 0; }
.delmark { font-size: var(--t-label); font-weight: 700; color: var(--muted); white-space: nowrap; }
.delmark.ok { color: var(--green); }
.delname { font-size: var(--t-body); }
.delnone { color: var(--muted); }
.itemstate { font-size: var(--t-label); font-weight: 700; color: var(--muted); white-space: nowrap; }
.itemstate.ok { color: var(--green); }
/* 反復（habit）は完了しない。**ボタンを出さない代わりに、なぜ無いかを書く。** */
.itemstate.repeat { font-weight: 400; }

/**
 * 幹部会 View。列は4つで固定（`src/domain/executive-progress.ts` が正典）。
 * **等幅の4枚にしない** —— ②「進んでよいか」がこの面の最初の問いなので、
 * 列幅を広く取り、答えだけ `--t-num`（20px）で、上辺に濃いヘアラインを引く。
 * 残りの3列は `--t-strong` で静かに従わせる（大胆さは1箇所だけ）。
 */
.execgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.execcol { background: var(--paper); padding: 16px 15px 14px; }
.execcol.lead { border-top: 2px solid var(--ink); }
.exectitle {
  font-size: var(--t-label); font-weight: 700; color: var(--muted);
  letter-spacing: 0.04em; margin-bottom: 8px;
}
.execanswer { font-size: var(--t-strong); font-weight: 700; letter-spacing: -0.01em; text-wrap: pretty; }
.execcol.lead .execanswer { font-size: var(--t-num); font-variant-numeric: tabular-nums; }
.execsub { font-size: var(--t-meta); color: var(--muted); margin-top: 4px; }
.execlist { margin: 9px 0 0; padding-left: 18px; font-size: var(--t-body); line-height: 1.75; }
.execlist.hold { color: var(--red); }
.execnote {
  font-size: var(--t-label); color: var(--muted); line-height: 1.7;
  margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line-2); text-wrap: pretty;
}

/**
 * 経営会議へ出す1枚（`src/domain/executive-brief.ts` が正典）。
 *
 * 幹部会タブ（4列のグリッド）と**わざと違う形**にしてある。あちらは画面で読む作業面、
 * こちらは**紙に落ちて人手に渡る文書**なので、1カラム・本文幅・上から順に読む形にする。
 * 4列のまま印刷すると、A4 で1列 45mm になって Gate 名が語中で折れる。
 */
.brief {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 30px 30px; max-width: 900px;
}
.briefbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.briefhint { font-size: var(--t-label); color: var(--muted); }
.briefhead { border-bottom: 2px solid var(--ink); padding-bottom: 14px; }
.briefeyebrow { font-size: var(--t-label); letter-spacing: 0.08em; color: var(--muted); font-weight: 700; }
.briefh1 { font-size: 24px; letter-spacing: -0.02em; line-height: 1.3; margin-top: 4px; }
.briefmeta { font-size: var(--t-meta); color: var(--muted); margin-top: 6px; font-variant-numeric: tabular-nums; }

.briefsec { margin-top: 22px; }
.briefsec > h3 {
  font-size: var(--t-label); font-weight: 700; color: var(--muted); letter-spacing: 0.06em;
  border-bottom: 1px solid var(--line-2); padding-bottom: 6px; margin-bottom: 10px;
}
.briefline { font-size: var(--t-body); text-wrap: pretty; }
.briefstrong { font-size: var(--t-strong); }
.brieflabel { font-size: var(--t-label); font-weight: 700; color: var(--ink-2); margin-bottom: 4px; }
.briefempty { font-size: var(--t-body); color: var(--muted); }
/* 「所見」は人が書いた唯一の段落。**この1枚の signature** なので、そこだけ左罫で立てる。 */
.briefassess { border-left: 2px solid var(--ink); padding-left: 12px; line-height: 1.85; }
.brieflist { margin: 0; padding-left: 18px; font-size: var(--t-body); line-height: 1.7; }
.brieflist li + li { margin-top: 6px; }
.brieflist.hold { color: var(--red); }
.briefmetainline { display: block; font-size: var(--t-label); color: var(--muted); }
.brieflist.hold .briefmetainline { color: #8a3a31; }
.briefnote {
  font-size: var(--t-label); color: var(--muted); line-height: 1.7; margin-top: 8px; text-wrap: pretty;
}
.briefnums { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.briefnum { font-size: var(--t-label); color: var(--muted); }
.briefnum b {
  display: block; font-size: var(--t-num); color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.briefnum.em b { color: var(--red); }
.briefsplit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.brieftable { margin-top: 0; }
/* 実績は「0」でも「—」でもなく**未確定**。数字と同じ濃さで出さない（数字に見せない）。 */
.briefunknown { color: var(--muted); }

/**
 * 1ページ目（2026-08-24 差し戻し #cd42 P0-2）。
 *
 * 幹部会タブと**同じ4問**を、同じ順で置く。ただし形は写さない —— あちらは画面で作業する
 * 面（4列・横に並べて突き合わせる）で、こちらは紙に落ちて手に渡る面なので **2×2** に組む。
 * A4 幅で4列にすると1列 45mm になり Gate 名が語中で折れる（`.brief` の注記と同じ理由）。
 *
 * 答えを 20px（`--t-num`）で置き、問いは 13px のラベル扱いにする。**先に目に入るのは
 * 答え**であってほしい —— 問いは4つとも毎回同じ文字列なので、読み返す価値が無い。
 */
.briefcover { margin-top: 18px; }
.coverq {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px 24px;
}
.coverqitem { border-top: 1px solid var(--line); padding-top: 10px; }
.coverqq { font-size: var(--t-label); font-weight: 700; color: var(--muted); letter-spacing: 0.04em; }
.coverqa { font-size: var(--t-num); line-height: 1.4; margin-top: 4px; text-wrap: pretty; }
.coverd { margin: 6px 0 0; padding-left: 16px; font-size: var(--t-label); color: var(--ink-2); line-height: 1.7; }
.coverd li + li { margin-top: 2px; }
.covermore { color: var(--muted); list-style: none; margin-left: -16px; }
.coverrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-top: 20px; }
.coverblock { margin-top: 0; }
.coverrow + .coverblock { margin-top: 20px; }
/* 所見は画面と同じ signature（左罫）。1ページ目で唯一「人が書いた欄」なのを形で示す。 */
.coverblock.assess { border-left: 2px solid var(--ink); padding-left: 12px; }
.coverblock .coverd { font-size: var(--t-body); color: var(--ink); }

/**
 * 所見が空の資料は「下書き」と名乗る（#cd42 P0-3）。**印刷でも消さない** ——
 * 消えると、所見の無い1枚がそのまま完成品として配れてしまう（それが差し戻しの中身）。
 * 赤は異常だけに使う規律に合う: これは「書き忘れ」という異常の表示。
 */
.briefdraft {
  margin-top: 16px; padding: 10px 14px; font-size: var(--t-body); line-height: 1.7;
  color: var(--ink); background: var(--red-soft);
  border: 1px solid var(--red); border-left-width: 4px; border-radius: var(--radius);
  text-wrap: pretty;
}
.briefdraft b { color: var(--red); letter-spacing: 0.06em; margin-right: 10px; }

/* 1ページ目と明細の境目。紙では改ページになる（下の @media print）。 */
.briefpagemark {
  margin-top: 26px; padding-top: 10px; border-top: 2px solid var(--ink);
  font-size: var(--t-label); font-weight: 700; color: var(--muted); letter-spacing: 0.04em;
}

/* 注記（#cd42 P1）。製品の内部事情はここへ集める —— 主情報の隣に置くと、
   会議で「で、結局どっちなの」を毎回 聞かれる側の文になる。 */
.footref { font-size: var(--t-label); color: var(--muted); font-weight: 400; vertical-align: super; line-height: 0; }
.footlist {
  margin: 0; padding-left: 0; list-style: none;
  font-size: var(--t-label); color: var(--ink-2); line-height: 1.75;
}
.footlist li { display: grid; grid-template-columns: 30px minmax(0, 1fr); text-wrap: pretty; }
.footlist li + li { margin-top: 4px; }
.footmark { color: var(--muted); font-variant-numeric: tabular-nums; }

/* --- 画面幅 -------------------------------------------------------------- */
@media (max-width: 1180px) {
  .grid-work, .candidate-grid, .company-grid { grid-template-columns: minmax(0, 1fr); }
  /* 幹部会は4列のまま横に詰めない（1列 220px を割ると Gate 名が語中で折れる）。
     **列を減らすのではなく 2×2 に折る** ——4つ全部が同じ面に居ることは変えない。 */
  .execgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 960px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; height: auto; }
  .nav { display: flex; gap: 4px; overflow-x: auto; padding: 8px; }
  .navbtn { width: auto; white-space: nowrap; }
  .navbtn.on::before { display: none; }
  .sideuser { display: none; }
  .topbar { position: static; height: auto; padding: 12px 16px; grid-template-columns: 1fr; gap: 10px; }
  .topactions { justify-self: stretch; }
  .topactions .btn { flex: 1; }
  .table th { position: static; }
  button, a, input, select, textarea { scroll-margin-top: 12px; }
  /* sidebar が上へ回って static になるので、画面最上部（brand 帯）へ dock する。
     topbar の主要CTA（記録する 等）は sidebar+nav の下から始まるので重ならない。 */
  .toast { left: 12px; right: 12px; top: 8px; max-width: none; }
}

@media (max-width: 700px) {
  .content { padding: 18px 14px 80px; }
  .pagehead h1 { font-size: 22px; }
  .inline-summary { overflow-x: auto; }
  .summaryitem { padding-right: 16px; margin-right: 16px; }
  .facts { grid-template-columns: 1fr; }
  .fact:nth-child(odd), .fact:nth-child(even) { padding-left: 0; padding-right: 0; }
  /* 業種別の列構成は、狭い幅では2段に折り返す（横スクロールを出さない） */
  .workitem, .attnitem { grid-template-columns: 1fr !important; gap: 8px; padding: 14px 12px; }
  .workitem .rightcol, .attnitem .rightcol { justify-content: flex-start; }
  /**
   * 行内CTA は青の全幅 primary を8個 縦に並べない（TASK-20260820-006・本人指示）。
   * 優先度は「なぜ今」と並び順がすでに表現しているので、ボタン側で強弱をつけない
   * （司令案「先頭行だけ primary」は却下——**行ごとに強弱を付けない**のが正しい方向）。
   * `width: 100%` も外す。secondary（既定 .btn）は元々自然な内容幅なので、
   * 全幅に伸ばすとかえって「強調」に見えてしまう。行内・自然なサイズのまま置く。
   */
  .workitem .rightcol .btn, .attnitem .rightcol .btn { width: auto; }
  .proposal { grid-template-columns: 1fr; }
  .table thead { display: none; }
  .table tbody tr { display: block; border-bottom: 1px solid var(--line); padding: 6px 0; }
  .table td { display: block; border: 0; padding: 4px 12px; }
  .table td::before { content: attr(data-th); display: block; font-size: var(--t-label); color: var(--muted); }
  .table td:empty { display: none; }
  .event { grid-template-columns: 62px 20px 1fr; }
  .filternote { margin-left: 0; }
  /* 表がカードへ畳まれる幅。行内の操作は右端ではなく行頭側へ戻す
     （右寄せのまま縦積みすると、押す場所が行ごとにばらつく）。 */
  .oprowactions { text-align: left; padding-top: 8px; }
  .oprowactions .btn + .btn { margin-left: 8px; }
  /* `.opreason` は主面に残す（畳まない）。数だけ見えて理由が消えると 0件に読まれる。 */
  .opreason { margin: 0 0 14px; }
  /* 「担当: 田中 直人」が見出しと横並びで噛み合わず語中で折り返していた（TASK-20260820-004）。
     ラベルは折らず、収まらなければ丸ごと見出しの下へ落とす。 */
  .ownerhead { flex-wrap: wrap; }
  /**
   * 求人ブロックの見出し（TASK-20260820-006・本人指示: 「390pxでは必要に応じて badge や
   * metadata を見出し下へ落とし、縮小ではなく再構成する」）。
   * `.jobblock .sectionhead` は h2（求人名＋状態バッジ）と meta（選考中 x件 / 推薦 y件 …）の
   * 2つを横に並べて詰め込んでいた。狭い幅では両方を同じ行に収めようとして求人名の列が
   * 潰れ、語中分断の一因になっていた。meta を見出しの下へ丸ごと落とし（flex-wrap）、
   * h2 内のバッジも収まらなければ求人名の下へ回す（h2 自体も wrap）。
   */
  .jobblock .sectionhead { flex-wrap: wrap; row-gap: 4px; }
  .jobblock .sectionhead h2 { flex-wrap: wrap; row-gap: 4px; }
  .jobblock .sectionhead > span { flex: 1 1 100%; }

  /**
   * Result Panel（Application Result Command・TASK-20260821-055）は `04` の
   * desktop/mobile 表で mobile を「全画面パネル」と定めている。他の Drawer
   * （記録する / 商談を記録する 等）は `min(560px, 96vw)` のまま変えない
   * （右端に僅かな背景が見える程度で、他フローの見た目を変える理由が無い）ので、
   * Result Panel だけに付く `.resultpanel` 修飾でここだけ 100vw にする。
   */
  .drawer.resultpanel { width: 100vw; border-left: 0; }

  /* 支援計画（390px）。Gate の3列は縦に積む。**縮小ではなく再構成**
     （右寄せの「次の一手」は行頭側へ戻す＝押す場所が行ごとにばらつかない）。 */
  .gaterow { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 12px; }
  .gateact { text-align: left; align-items: flex-start; }
  .gatereason { text-align: left; max-width: none; }
  .gateconds li { grid-template-columns: 48px minmax(0, 1fr); }
  /* 条件の種類（Item の完了 / 成果物の確定 / 承認）はラベルの下へ落とす。 */
  .condkind { grid-column: 2; }
  /* 成果物は「名前が長い時だけボタンが落ちる」と行ごとに押す場所がずれるので、
     **常に**名前の下へ落とす（揺れないほうが速い）。 */
  .delrow { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 8px; }
  .delrow .btn { grid-column: 1 / -1; justify-self: start; margin-top: 2px; }
  .execgrid { grid-template-columns: minmax(0, 1fr); }
  /* 1列に積むと「上辺のヘアライン」が単なる区切りに見えるので、②は左辺で示す。 */
  .execcol.lead { border-top: 0; border-left: 2px solid var(--ink); }
  /* 報告の Gate 3群（通過 / 未通過 / 保留）は縦に積む。**群の見出しは残す**
     ——「通過」と「保留」が同じ見た目で続くと、読む人が群の切れ目を見失う。 */
  .brief { padding: 18px 15px 22px; }
  .briefh1 { font-size: 20px; }
  .briefsplit { grid-template-columns: minmax(0, 1fr); }
  /* 1ページ目の 2×2 と 2列は縦に積む。**4問は4問のまま**（問いを間引かない）。
     答えの 20px も落とさない —— ここが1ページ目の主情報。 */
  .coverq, .coverrow { grid-template-columns: minmax(0, 1fr); }
  .coverq { gap: 14px; }
}

/**
 * 印刷 / PDF —— **この面を渡す唯一の手段**（公開リンク・ゲスト閲覧は作っていない）。
 * 出すのは開いている面だけで、メニュー・タブ・ボタン・入力欄は落とす。
 * 「画面で見えているものが、そのまま紙に出る」のが報告物としての最低条件なので、
 * ここで色や余白を作り変えない（枠と影だけ落として、文字の階梯は画面のまま）。
 */
@media print {
  .skip, .sidebar, .topbar, .tabs, .briefbar, .toast,
  .drawer, .drawerback, #banner, #planNotice { display: none !important; }
  /* 画面側の見出し・数字帯は落とす。報告は**自分の見出しを持っている**ので、
     残すと「支援計画 2026-08」と「対象期間 2026年8月」が二重に出る。 */
  #page-plan > .pagehead, #page-plan > .inline-summary, #page-plan > .opreason { display: none; }
  .shell { display: block; min-height: 0; }
  .content { max-width: none; padding: 0; }
  /* 開いていない面は元から `display:none`。開いている面の中も、開いているタブだけ出す。 */
  .tabpanel { display: none; }
  .tabpanel.on { display: block; }
  .brief { border: 0; border-radius: 0; padding: 0; max-width: none; }
  .briefsec { break-inside: avoid; }
  .briefhead { break-after: avoid; }
  .briefsec > h3 { break-after: avoid; }
  /* 1ページ目は1ページ目として渡る。明細はここから次のページへ送る（#cd42 P0-2）。 */
  .briefpagemark { break-before: page; }
  /* 1ページ目は「1枚で読める」ことが条件なので、途中で割らせない。 */
  .briefcover { break-inside: avoid; break-after: avoid; }
  /* 下書きの印は紙でも残す（背景色が出ない環境でも枠と語で分かる）。 */
  .briefdraft { display: block !important; background: var(--red-soft); }
  /* リンクは紙だと押せない。**URL を本文に出しているので**、ここでは色だけ落とす。 */
  .brief a { color: var(--ink); text-decoration: underline; }
  body { background: #fff; }
}

/* ===========================================================================
   商談デモの3画面（TASK-20260824-095 / 使い捨て lane）

   **既存の規則を1つも上書きしていない**（`.navsep` `.navbtn.demo` `.demotag` …
   すべて新しい名前で、既存6面のセレクタには当たらない）。
   型は上の5段（15/16/13/14/20px）だけを使う —— 12px 以下は作らない。
   ========================================================================= */

.navsep {
  margin: 14px 10px 4px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: var(--t-label); font-weight: 700; color: var(--muted); letter-spacing: 0.04em;
}
.navbtn.demo.on { background: #e9edf1; }

/* デモ専用の要素につける印。**装飾ではなく、嘘を1つも置かないための札**。 */
.demotag {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px;
  border: 1px solid #c9b58a; background: #fbf6ea; color: #6b5320;
  border-radius: 3px; font-size: var(--t-label); font-weight: 700; white-space: nowrap;
}
.demotag.sm { min-height: 22px; padding: 0 6px; margin-left: 7px; }

/* 未実装のものを「未実装」と言う器。灰色の注記にしない（読み飛ばされる）。 */
.demounbuilt {
  border: 1px solid #c9b58a; background: #fbf6ea; border-radius: var(--radius);
  padding: 12px 14px; margin: 10px 14px 4px; font-size: var(--t-body); color: var(--ink-2);
}
.demounbuilt b { display: block; font-size: var(--t-strong); margin-bottom: 4px; color: #6b5320; }
.demounbuilt p { margin-top: 6px; white-space: pre-wrap; }
.demounbuilt b.inline { display: inline; font-size: inherit; margin: 0; color: inherit; }
/* 推薦文デモの「根拠」（#5dac 2）。主張と出典を1行ずつ並べる。 */
.draftgrounds { width: 100%; border-collapse: collapse; margin-top: 4px; }
.draftgrounds td { padding: 5px 0; border-top: 1px solid #e3d6b6; vertical-align: top; }
.draftgrounds td:last-child { text-align: right; color: var(--muted); white-space: nowrap; padding-left: 10px; }

/* 画面2: いま浮いていること（`operational-view` をこの人のぶんだけ絞ったもの）。 */
.attnrow {
  padding: 13px 14px; border-bottom: 1px solid var(--line-2);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center;
}
.attnrow:last-child { border-bottom: 0; }
.attnrow b { display: block; font-size: var(--t-body); }
.attnrow span { font-size: var(--t-meta); color: var(--muted); }
.attnrow .days { font-size: var(--t-meta); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 画面2: 求人候補。選考中のものは**消さずに、外した理由を書いて残す**。 */
.matchrow {
  padding: 12px 14px; border-bottom: 1px solid var(--line-2);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center;
}
.matchrow:last-child { border-bottom: 0; }
.matchrow b { display: block; font-size: var(--t-body); }
.matchrow span { font-size: var(--t-meta); color: var(--muted); }
.matchrow.excluded b { color: var(--muted); font-weight: 400; }

/* 画面1: 求人詳細の更新履歴（Drawer の中）。 */
.revrow { padding: 11px 0; border-bottom: 1px solid var(--line-2); font-size: var(--t-body); }
.revrow:last-child { border-bottom: 0; }
.revrow b { font-size: var(--t-body); }
.revrow span { display: block; font-size: var(--t-meta); color: var(--muted); margin-top: 3px; }
.revrow .arrow { color: var(--muted); margin: 0 6px; }

/* 画面1/2: 出典が無い項目は「未確認」と言う（確認済みに見せない）。 */
.nosource { font-size: var(--t-label); color: var(--muted); }

/* ===========================================================================
   状態の札（TASK-20260825-001 差し戻し#1148 §1）

   4分類 —— **実動 / デモ / 予定 / 外部確認**。
   **色だけに依存しない。** どの札も必ず文字で状態を言う（色は補助）。
   ========================================================================= */
.statetag {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink-2);
  border-radius: 3px; font-size: var(--t-label); font-weight: 700;
}
.statetag.live { border-color: #8fbfa9; background: var(--green-soft); color: var(--green); }
.statetag.demo { border-color: #c9b58a; background: var(--amber-soft); color: var(--amber); }
.statetag.wip { border-color: #c9b58a; background: var(--amber-soft); color: var(--amber); }
.statetag.plan { border-color: var(--blue-line); background: var(--blue-soft); color: var(--blue-2); }
.statetag.ext { border-color: #d6b5b1; background: var(--red-soft); color: var(--red); }

/* --- AI支援セクション（#1148 §4）------------------------------------------ */
.ailead { padding: 12px 14px 0; font-size: var(--t-body); color: var(--ink-2); }
.aigrid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px; padding: 12px 14px;
}
.aicard {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 14px;
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.aicard.wide { grid-column: 1 / -1; }
.aihead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.aihead h3 { font-size: var(--t-strong); }
.aicard p { font-size: var(--t-body); color: var(--ink-2); }
.aicard .btn { align-self: flex-start; }
/* カードの中に入れた `.demounbuilt` は、カードの余白に合わせて左右の margin を戻す。 */
.aicard .demounbuilt { margin: 2px 0 0; }
.matchnote { font-size: var(--t-label); color: var(--muted); }
.aitourbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 0 14px 14px;
}

/* --- 選考ボード（#2144。**デモ / 開発中**）--------------------------------- */
.boardnote {
  border: 1px solid #c9b58a; background: var(--amber-soft); border-radius: var(--radius);
  padding: 11px 14px; margin-bottom: 14px; font-size: var(--t-body); color: #6b5320;
}
/* 5列。1280px では横スクロールせずに収まり、狭い画面ではこの器の中だけが横に流れる
   （ページ全体は横スクロールさせない）。 */
.board {
  display: grid; grid-template-columns: repeat(5, minmax(180px, 1fr));
  gap: 12px; overflow-x: auto; padding-bottom: 6px;
}
.boardcol { background: var(--paper); border-top: 2px solid #a9b2bb; min-width: 180px; }
.boardcolhead {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--line);
}
.boardcolhead h2 { font-size: var(--t-strong); }
.boardcount { font-size: var(--t-meta); color: var(--muted); font-variant-numeric: tabular-nums; }
.boardcolnote { padding: 8px 12px 0; font-size: var(--t-label); color: var(--muted); }
.boardcards { padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; min-height: 120px; }
.boardcards.over { background: var(--blue-soft); outline: 2px dashed var(--blue-line); outline-offset: -4px; }
.boardcard {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
  padding: 10px 11px; display: flex; flex-direction: column; gap: 3px; cursor: grab;
}
.boardcard:hover { border-color: #b9c2cb; }
/* ドラッグ中のカードは**輪郭で**分かるようにする（opacity を落として薄くしない）。 */
.boardcard.dragging { border: 2px solid var(--blue); background: var(--blue-soft); cursor: grabbing; }
.boardcard b { font-size: var(--t-body); }
.boardjob { font-size: var(--t-meta); color: var(--ink-2); }
.boardco { font-size: var(--t-label); color: var(--muted); }
.boardkind { font-size: var(--t-label); color: var(--muted); }
.boardempty {
  border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 14px 10px; text-align: center; font-size: var(--t-label); color: var(--muted);
}

/* toast の2行目（「デモ上の変更です」）。**薄くしない**——色を変えるだけ。 */
.toastsub { display: block; margin-top: 3px; font-size: var(--t-label); color: #c7d0d8; }

/* --- Spotlight Walkthrough（#1148 §2）-------------------------------------
   暗幕は4枚の板で、対象の周りに**本物の穴**が空く。
   `pointer-events: none` を付けてあるので、**画面のどこも塞がない**
   ——実際のボタンは本人が押し、カードのドラッグもそのまま通る。 */
.tourback { position: fixed; inset: 0; z-index: 140; pointer-events: none; }
.tourpanel { position: fixed; background: rgba(23, 32, 42, 0.55); }
.tourring {
  position: fixed; border: 2px solid var(--blue); border-radius: var(--radius);
  box-shadow: 0 0 0 2px #fff inset;
}
/* ドラッグ中は暗幕を消す（置ける列が全部 見えるように）。 */
.tourback.dragging .tourpanel { background: transparent; }

.tourbubble {
  position: fixed; z-index: 150; width: min(380px, calc(100vw - 32px));
  background: var(--paper); border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: var(--radius); box-shadow: 0 10px 28px rgba(23, 32, 42, 0.22);
  padding: 14px 16px;
}
.tourmeta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.tourcount { font-size: var(--t-label); font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.tourbubble h2 { font-size: var(--t-strong); margin-bottom: 6px; }
.tourbubble p { font-size: var(--t-body); color: var(--ink-2); }
.tourhint { margin-top: 8px; font-size: var(--t-label); color: var(--muted); }
.tourfoot { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.tourspacer { flex: 1; }

/* スマホ（〜600px）では吹き出しを**下から出る sheet** にする（差し戻し #5dac 1）。
   実機 390 で、対象の真下に置いた吹き出しが「押してください」と言っている当の対象を
   覆っていた。sheet に固定して、対象は必ず sheet より上へ送る（JS 側 `tourFitAboveSheet`）。
   位置は CSS に任せるので、JS は sheet のとき inline の left/top を消す。 */
@media (max-width: 600px) {
  .tourbubble {
    left: 0; right: 0; bottom: 0; top: auto;
    width: auto;
    max-height: 45vh;
    display: flex; flex-direction: column;
    border-left: none; border-top: 4px solid var(--blue);
    border-radius: var(--radius) var(--radius) 0 0;
    /* notch / ブラウザの下端（safe-area）を避ける。 */
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 28px rgba(23, 32, 42, 0.26);
  }
  /* 長い説明は**本文だけ**が内側で流れる。min-height:0 が無いと flex 内で縮まずに溢れる。 */
  .tourscroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .tourfoot { flex-shrink: 0; margin-top: 10px; }
}

@media (max-width: 1180px) {
  .aigrid { grid-template-columns: minmax(0, 1fr); }
  .aicard.wide { grid-column: auto; }
}
@media (max-width: 700px) {
  /* スマホではボードは**閲覧できればよい**（Drag & Drop は PC 推奨）。 */
  .board { grid-template-columns: repeat(5, minmax(230px, 230px)); }
  .toast { left: 12px; right: 12px; max-width: none; }
}