@charset "utf-8";
/* よろずハブ v5 — 白・黒・赤の3系統だけ／高密度。スマホファースト(375px基準)。
   外部CDN・Webフォントは使わない。タップ対象は最小44px。

   ■ 正典は _design_v5.md
     §2 配色: **白・黒・赤以外の色を使わない**。分野色・種別色・ステータス色も
        すべてグレー階調＋赤で表す。区別は「色」ではなく **濃さ・囲み線・文字**。
     §3 密度: カード余白10/12・隙間はヘアライン・本文2行クランプ・サムネ140px上限・
        メタ行は1行・PC幅はフィード2カラム。
     §4 アイコン: 絵文字は使わない。app.js の ico() が描くインラインSVG（currentColor）。

   ■ 守るルール
     1. **色リテラルは下の :root / @media(dark) の中だけ**に書く。ここから下は var() のみ。
     2. 角丸は --rad-sm(4px) / --rad-md(8px) の2段階だけ。丸ピル・大きな角丸は作らない。
     3. 影は使わない。構造は 1px のヘアライン（--border）で作る。
     4. ダークは下の @media ブロックの変数だけで完結させ、
        コンポーネント側にダーク専用CSSを1行も書かない。 */

:root {
  color-scheme: light dark;

  /* ===== 白〜黒（面と文字はこの階調だけで組む） ===== */
  --w:   #ffffff;   /* カード面 */
  --g05: #f7f7f8;   /* ページ地 */
  --g10: #eeeff1;   /* 入れ子の面・トラック */
  --g20: #e2e4e8;   /* 罫線（薄） */
  --g30: #c9ccd3;   /* 罫線（強）・破線 */
  --g50: #8b909b;   /* 補助文字・時刻 */
  --g70: #4a4f5a;   /* 本文の副次 */
  --g90: #1a1c21;   /* 本文 */
  --k:   #0b0c0f;   /* 見出し・ヘッダー地 */

  /* ===== アクセント（1色だけ。使いどころを絞る） =====
     アクセントを出してよいのは ①主アクション ②自分に関係するもの
     ③選択中のタブ/フィルタの下線 の3つだけ（_design_v5.md §2）。
     既定は朱（これまでの赤）。**各自が⚙設定で差し替えられる**ので、
     この4つの値は下の [data-accent="…"] で上書きされる（§9）。 */
  --r:      #d5202a;
  --r-dark: #a8161f;
  --r-soft: #fdecec;
  --r-ink:  #8e1219;

  /* ===== 危険・警告（**テーマで変わらない。常に赤**） =====
     _design_v5.md §9-2: アクセントは各自が選べるので、深緑や藍を選んだ人の画面で
     「削除」「滞留5日」「エラー」まで同じ色になると意味が壊れる。
     滞留・削除・エラー・注意書きだけはここを使い、--r とは別系統にする。
     既定テーマ（朱）のときは --r と同じ値なので見た目は変わらない。 */
  --danger:     #d5202a;
  --danger-ink: #8e1219;   /* 淡い面の上に乗せる危険の文字 */

  /* 暗幕だけは透過が要るので rgba で書く（この2行以外に色リテラルを増やさない） */
  --overlay:        rgba(11,12,15,.55);
  --overlay-strong: rgba(11,12,15,.92);   /* 画像の拡大表示の背景 */

  /* ===== 意味づけ（以降はこの別名だけを使う） ===== */
  --bg:        var(--g05);
  --surface:   var(--w);
  --surface-2: var(--g10);
  --surface-3: var(--g20);
  --border:    var(--g20);
  --border-2:  var(--g30);
  --text:      var(--g90);
  --text-2:    var(--g70);
  --muted:     var(--g50);
  --ink:       var(--k);       /* 見出しに使う最も強い文字色 */
  --hdr-bg:    var(--k);
  --hdr-ink:   var(--w);
  --link:      var(--r-ink);
  --ring:      var(--k);       /* フォーカスリング（赤は意味を持つので使わない） */
  /* **赤い面の上に乗せる文字**。ライトは白、ダークは赤が明るくなるので黒に寄せる。
     部品側で var(--w) を直に書くとダークで意図が読めなくなるので、必ずこの別名を使う */
  --on-r:      var(--w);

  /* ===== タイポ ===== */
  --font: "Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",system-ui,sans-serif;
  /* 数字は別系統。和文フォントでは tabular-nums が効かず桁が揃わない */
  --font-num: ui-monospace,"SF Mono",Consolas,"Yu Gothic UI",system-ui,sans-serif;
  --fs-10:10px; --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px;
  --fs-15:15px; --fs-17:17px; --fs-20:20px; --fs-24:24px;
  --lh-tight:1.3; --lh:1.45;
  --fw-b:700; --fw-x:800;

  /* ===== 余白（密度は _design_v5.md §3 の実数） ===== */
  --sp-1:4px; --sp-2:6px; --sp-3:10px; --sp-4:12px; --sp-5:16px; --sp-6:24px;
  --pad-y:10px;   /* カード内の縦 */
  --pad-x:12px;   /* カード内の横 */

  /* ===== 角丸・遷移・寸法 ===== */
  --rad-sm:4px; --rad-md:8px;
  --tr-fast:120ms ease; --tr:180ms ease;
  --tap:44px; --maxw:720px; --hdr-h:52px; --tabbar-h:52px;

  /* ===== セーフエリア（v6.1・実機の不具合から） =====
     index.html が `viewport-fit=cover` ＋ `apple-mobile-web-app-status-bar-style: black-translucent`
     なので、**ホーム画面から起動したPWAでは中身が画面の一番上（ステータスバー／ノッチの下）から始まる**。
     v5.3 でPWA化したとき下端（タブバー）だけ対応して上端を忘れていたため、
     ヘッダーの「投稿」ボタンがステータスバーの下に潜って**押せなくなっていた**（実機の指摘で発覚）。

     ⚠ env() は上書きできないので、必ずこのトークン経由で使うこと。
        トークンにしておけば `:root{--sa-top:47px}` を入れるだけで
        ノッチ付き端末の見た目をPCのブラウザで再現して検証できる。 */
  --sa-top:    env(safe-area-inset-top, 0px);
  --sa-bottom: env(safe-area-inset-bottom, 0px);
  --sa-left:   env(safe-area-inset-left, 0px);
  --sa-right:  env(safe-area-inset-right, 0px);
  /* 画面上でヘッダーが実際に占める高さ。**ヘッダーの下に貼り付く要素はこちらを見る**
     （--hdr-h は「中身の高さ」＝タップ44pxを守るための52px であって、占有高さではない） */
  --hdr-total: calc(var(--hdr-h) + var(--sa-top));
}

@media (prefers-color-scheme: dark) {
  :root {
    /* 階調を反転させるだけ。役割（面が薄い→濃い、文字が濃い→薄い）は同じ順序を保つ */
    --w:   #14161a;
    --g05: #0b0c0f;
    --g10: #1b1e24;
    --g20: #2a2e36;
    --g30: #3d434d;
    --g50: #8a909c;
    --g70: #b4bac5;
    --g90: #e9ecf2;
    --k:   #f5f6f8;

    /* 暗所ではアクセントを明るく寄せる（_design_v5.md §2） */
    --r:      #ff4d57;
    --r-dark: #ff7a82;
    --r-soft: #2a1114;
    --r-ink:  #ff9aa1;

    /* 危険はダークでも赤のまま（テーマを変えても動かない・§9-2） */
    --danger:     #ff4d57;
    --danger-ink: #ff9aa1;

    --overlay:        rgba(0,0,0,.66);
    --overlay-strong: rgba(0,0,0,.94);

    /* ヘッダーは反転させず暗いまま（--k を使うと白ヘッダーになってしまう） */
    --hdr-bg: var(--g05);
    --hdr-ink: var(--g90);
    --ring:   var(--g90);
  }

  /* アバターの12色は暗い面の上だと沈むので、明度を1段上げる（色相はライトと同じ＝
     同じ人が同じ色に見える）。文字は白のままでコントラストを確保。 */
  .pt-0  { --av-bg:#5578a6; }
  .pt-1  { --av-bg:#8a679b; }
  .pt-2  { --av-bg:#3e8b7a; }
  .pt-3  { --av-bg:#c1764a; }
  .pt-4  { --av-bg:#667287; }
  .pt-5  { --av-bg:#9d666e; }
  .pt-6  { --av-bg:#4d81a0; }
  .pt-7  { --av-bg:#7d8b4e; }
  .pt-8  { --av-bg:#8f7349; }
  .pt-9  { --av-bg:#7062a3; }
  .pt-10 { --av-bg:#458b96; }
  .pt-11 { --av-bg:#b06283; }
}

/* =========================================================================
   テーマカラー（アクセントの差し替え・_design_v5.md §9）
   =========================================================================
   ■ 仕組み
     <html data-accent="ai"> のように属性を1つ付け替えるだけ。差し替えるのは
     --r / --r-dark / --r-soft / --r-ink の**4つだけ**で、面と文字（白黒）は動かさない（§9-6）。
     選択は本人のDB（members.theme）に持ち、localStorage の控えを起動直後に当てる（app.js）。

   ■ 守るルール
     1. **セレクタは `:root` を付けない**（`[data-accent="ai"]` のまま）。
        ⚙設定の丸いスウォッチが `data-accent` を自分に付けて自分の色を出すため、
        html 以外の要素にも効く必要がある＝JS側に色を書かずに済む（定義が1か所になる）。
     2. ここで **--danger / --av-bg（アバターの12色）には触らない**。
        危険は常に赤、人の色はテーマと無関係（§9-2 / §8）。
     3. 8色とも「白文字を乗せて 4.5:1 以上」を実測済み（最小は柿のライト 4.89:1）。
        値を変えるときは test/theme.test.js が落ちるので、必ず測り直すこと。
     4. id と表示名の正典は src/lib/theme.js。ここに色、あちらに名前で二重管理にしない。 */
[data-accent="shu"]    { --r:#d5202a; --r-dark:#a8161f; --r-soft:#fdecec; --r-ink:#8e1219; }
[data-accent="ai"]     { --r:#26478f; --r-dark:#1a3570; --r-soft:#eaeffb; --r-ink:#1d3a78; }
[data-accent="midori"] { --r:#17694a; --r-dark:#0f5138; --r-soft:#e7f4ee; --r-ink:#10553b; }
[data-accent="sumi"]   { --r:#23262c; --r-dark:#101318; --r-soft:#eeeff1; --r-ink:#23262c; }
[data-accent="kaki"]   { --r:#b8531b; --r-dark:#954014; --r-soft:#fdefe4; --r-ink:#8a3d12; }
[data-accent="budo"]   { --r:#6b3fa0; --r-dark:#553184; --r-soft:#f1ebfa; --r-ink:#543087; }
[data-accent="seiji"]  { --r:#14666e; --r-dark:#0d4d54; --r-soft:#e5f2f3; --r-ink:#0f545a; }
[data-accent="enji"]   { --r:#93213f; --r-dark:#761a33; --r-soft:#fceaee; --r-ink:#7c1c35; }

/* ダークは色相を保ったまま明度を上げる（同じテーマが同じ色に見えること）。
   上の :root のダークブロックより後ろに置くこと（順序で勝つ） */
@media (prefers-color-scheme: dark) {
  [data-accent="shu"]    { --r:#ff4d57; --r-dark:#ff7a82; --r-soft:#2a1114; --r-ink:#ff9aa1; }
  [data-accent="ai"]     { --r:#6f9bf0; --r-dark:#8fb2f5; --r-soft:#101a2e; --r-ink:#a8c4f7; }
  [data-accent="midori"] { --r:#43b98a; --r-dark:#6bcaa4; --r-soft:#0d2019; --r-ink:#7fd4b2; }
  [data-accent="sumi"]   { --r:#c9ccd3; --r-dark:#e2e4e8; --r-soft:#1b1e24; --r-ink:#e2e4e8; }
  [data-accent="kaki"]   { --r:#e8853f; --r-dark:#f0a068; --r-soft:#2a1a0e; --r-ink:#f2b183; }
  [data-accent="budo"]   { --r:#a179e0; --r-dark:#b795e8; --r-soft:#1d1630; --r-ink:#c3a7ee; }
  [data-accent="seiji"]  { --r:#38a7b2; --r-dark:#5cbcc5; --r-soft:#0c2124; --r-ink:#79cad1; }
  [data-accent="enji"]   { --r:#e35d7f; --r-dark:#ea7f9a; --r-soft:#2b1119; --r-ink:#ef9db1; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --tr-fast:0ms; --tr:0ms; }
  *, *::before, *::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* ---------- 土台 ---------- */
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; padding:0; }
body {
  background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:var(--fs-14); line-height:var(--lh);
  -webkit-text-size-adjust:100%;
}
.hidden { display:none !important; }
button { font:inherit; color:inherit; }
a { color:var(--link); }
:where(button,a,input,select,textarea,[tabindex]):focus-visible {
  outline:2px solid var(--ring); outline-offset:1px; border-radius:var(--rad-sm);
}
.num { font-family:var(--font-num); font-variant-numeric:tabular-nums;
       font-weight:var(--fw-b); letter-spacing:-.02em; }
.muted { color:var(--muted); }
.small { font-size:var(--fs-12); }
.mt-1 { margin-top:var(--sp-1); }
.mt-2 { margin-top:var(--sp-2); }
.mt-3 { margin-top:var(--sp-4); }
.mb-2 { margin-bottom:var(--sp-2); }
.grow { flex:1 1 auto; min-width:0; }
.ta-c { text-align:center; }
.is-tap { cursor:pointer; }
.empty { color:var(--muted); font-size:var(--fs-13); padding:var(--sp-5) var(--sp-1); text-align:center; }
.sec-title {
  display:flex; align-items:center; gap:var(--sp-1);
  margin:var(--sp-5) 0 var(--sp-2); font-size:var(--fs-12); font-weight:var(--fw-b);
  color:var(--muted); letter-spacing:.04em;
}
.sec-title:first-child { margin-top:var(--sp-2); }

/* ---------- アイコン（app.js の ico() が描くインラインSVG） ---------- */
.ico {
  width:18px; height:18px; flex:0 0 auto; display:inline-block; vertical-align:-3px;
  stroke:currentColor; fill:none;
}
.ico-sm { width:14px; height:14px; vertical-align:-2px; }
.ico-lg { width:22px; height:22px; vertical-align:-4px; }
.ico-xl { width:28px; height:28px; }

/* ---------- ログイン ---------- */
.login {
  min-height:100dvh; display:flex; align-items:center; justify-content:center;
  padding:var(--sp-6) var(--sp-5); background:var(--bg);
}
.login-card {
  width:100%; max-width:360px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--rad-md); padding:24px 20px 20px;
}
.login-title { margin:0; font-size:var(--fs-24); font-weight:var(--fw-x);
               letter-spacing:.06em; text-align:center; color:var(--ink); }
.login-sub { margin:4px 0 20px; text-align:center; color:var(--muted); font-size:var(--fs-12); }
.login-note { margin:8px 0 0; text-align:center; color:var(--muted); font-size:var(--fs-11); line-height:1.6; }
/* Googleサインインは純正JSボタンが外部CDNなので自前で作る */
.google-btn { display:flex; align-items:center; justify-content:center; gap:8px;
              text-decoration:none; font-size:var(--fs-15); }
.google-g {
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:var(--rad-sm);
  background:var(--surface); color:var(--ink); font-weight:900; font-size:var(--fs-12); flex:0 0 auto;
}

/* ---------- 入力・ボタン ---------- */
.lbl { display:block; margin:var(--sp-4) 0 var(--sp-1); font-size:var(--fs-12);
       font-weight:var(--fw-b); color:var(--muted); }
.input, select.input, textarea.input {
  width:100%; min-height:var(--tap); padding:9px 10px;
  border:1px solid var(--border-2); border-radius:var(--rad-sm);
  background:var(--surface); color:var(--text);
  font-family:inherit; font-size:16px;   /* iOSのズーム防止に16px */
}
textarea.input { min-height:80px; resize:vertical; line-height:1.5; }
.input::placeholder { color:var(--muted); }
.input:focus { outline:2px solid var(--ring); outline-offset:-1px; }

.btn {
  min-height:var(--tap); padding:8px var(--sp-5);
  border:1px solid var(--border-2); border-radius:var(--rad-sm);
  background:var(--surface); color:var(--text);
  font-size:var(--fs-13); font-weight:var(--fw-b); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
}
.btn:active { transform:translateY(1px); }
.btn-primary { background:var(--r); color:var(--on-r); border-color:var(--r); }
.btn-primary:hover { background:var(--r-dark); border-color:var(--r-dark); }
/* 主でも危険でもない「もうひとつの押せる操作」＝黒。かつては金だった */
.btn-strong { background:var(--ink); color:var(--surface); border-color:var(--ink); }
/* 危険（ログアウト・削除）は**テーマを変えても赤のまま**（§9-2） */
.btn-danger { color:var(--danger); border-color:var(--danger); background:var(--surface); }
.btn-block { width:100%; margin-top:var(--sp-4); }
.btn-sm { min-height:var(--tap); padding:4px var(--sp-4); font-size:var(--fs-12); }
.btn-row { display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center; }
.icon-btn {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:var(--tap); min-height:var(--tap); border:0; background:transparent;
  cursor:pointer; border-radius:var(--rad-sm); color:inherit;
}
/* 入力エラー・保存失敗の1行。エラーなので危険色（.ok のときだけ灰） */
.msg { min-height:18px; margin:var(--sp-2) 0 0; font-size:var(--fs-12); color:var(--danger); }
.msg.ok { color:var(--text-2); }

.chips { display:flex; flex-wrap:wrap; gap:var(--sp-1); }
.chips-center { justify-content:center; margin-top:var(--sp-5); }
.chip {
  display:inline-flex; align-items:center; gap:var(--sp-1);
  min-height:var(--tap); padding:var(--sp-1) var(--sp-4); border-radius:var(--rad-sm);
  background:var(--surface); border:1px solid var(--border-2); color:var(--text-2);
  font-size:var(--fs-12); font-weight:var(--fw-b); cursor:pointer;
}
.chip.is-on { background:var(--ink); color:var(--surface); border-color:var(--ink); }
.chip[disabled] { opacity:.45; cursor:default; }
/* 提案チップ（分野・タグ）。見た目は軽くするが**タップ領域44pxは死守** */
.chip-sm { min-height:var(--tap); padding:2px var(--sp-3); font-size:var(--fs-12); font-weight:400; }
.chip-n { margin-left:var(--sp-1); font-size:var(--fs-11); color:var(--muted); }
.chip.is-on .chip-n { color:var(--surface); }

/* ---------- バッジ（分野・種別・ステータス） ----------
   v5: 色分けは廃止。**濃さ・囲み線・文字**だけで区別する（_design_v5.md §2）。 */
.fbadge {
  display:inline-flex; align-items:center; min-height:18px; padding:0 6px;
  border-radius:var(--rad-sm); font-size:var(--fs-11); font-weight:var(--fw-b);
  white-space:nowrap; letter-spacing:.02em;
  background:var(--surface-2); color:var(--text-2); border:1px solid var(--border);
}
/* 得意ジャンル・タグ。主分野より必ず弱く見えること */
.fbadge-soft { background:transparent; color:var(--muted); border-color:var(--border); font-weight:400; }
/* 未設定（塗らない。破線で「まだ無い」を示す） */
.fbadge-blank { background:transparent; color:var(--muted); border:1px dashed var(--border-2); font-weight:400; }

/* 案件ステータス。クラス名は日本語のまま（.st-対応中 で引く） */
.st {
  display:inline-flex; align-items:center; min-height:18px; padding:0 6px;
  border-radius:var(--rad-sm); font-size:var(--fs-11); font-weight:var(--fw-b);
  white-space:nowrap; border:1px solid var(--border-2);
  background:var(--surface); color:var(--text-2);
}
.st-起票   { background:var(--surface); color:var(--text-2); border-color:var(--border-2); }
.st-対応中 { background:var(--surface-2); color:var(--text);  border-color:var(--border); }
.st-商談中 { background:var(--text-2);    color:var(--surface); border-color:var(--text-2); }
.st-成約   { background:var(--ink);       color:var(--surface); border-color:var(--ink); }
.st-完了   { background:var(--surface);   color:var(--ink);     border-color:var(--ink); }
.st-見送り { background:transparent; color:var(--muted); border:1px dashed var(--border-2); font-weight:400; }

/* 💡ボックスのステータス（同じ考え方） */
.idea-st {
  display:inline-flex; align-items:center; min-height:18px; padding:0 6px;
  border-radius:var(--rad-sm); font-size:var(--fs-11); font-weight:var(--fw-b);
  white-space:nowrap; border:1px solid var(--border-2);
  background:var(--surface); color:var(--text-2);
}
.idea-st-タネ     { background:var(--surface); color:var(--text-2); border-color:var(--border-2); }
.idea-st-検討中   { background:var(--surface-2); color:var(--text); border-color:var(--border); }
.idea-st-案件化   { background:var(--ink); color:var(--surface); border-color:var(--ink); }
.idea-st-お蔵入り { background:transparent; color:var(--muted); border:1px dashed var(--border-2); font-weight:400; }

/* 種別（送客・協業・相談 / アイデア・やりたい・困りごと） */
.type-t { display:inline-flex; align-items:center; gap:3px; min-height:18px; padding:0 6px;
  border-radius:var(--rad-sm); background:var(--surface-2); color:var(--text-2);
  font-size:var(--fs-11); font-weight:var(--fw-b); white-space:nowrap; }
/* 経過日数。3営業日ルールの警告だけ赤を使う（滞留＝危険なのでテーマでは変わらない） */
.age-warn { color:var(--text-2); font-weight:var(--fw-b); }
.age-hot  { color:var(--danger); font-weight:var(--fw-b); }

/* ---------- アバター ----------
   クラス .pt-0〜.pt-11 は app.js の avaTone() が出す。
   **本人が⚙で選んだ色（members.ava_tone）が最優先**で、未選択なら personTone()
   （IDから決まる従来の色＝本人の見た目は不変）に落ちる（_design_v5.md §10）。 */
.ava {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 auto; border-radius:50%; overflow:hidden; line-height:1;
  font-weight:var(--fw-x);
  background:var(--av-bg,var(--surface-2)); color:var(--av-fg,var(--text-2));
}
/* v5.1: アバターだけは色を許可（ユーザー指示「アバターはカラーバリエーションあっていいよ」）。
   UI全体が白黒赤なので、**色が付くのは人だけ**＝誰の投稿かが色で一目で分かる。
   ただし彩度を抑えた深い12色に限定し、原色・パステルは使わない（おもちゃに戻さないため）。
   文字は白固定でコントラストを確保（全色 4.5:1 以上）。 */
.pt-0  { --av-bg:#3d5a80; --av-fg:#fff; }  /* 藍   */
.pt-1  { --av-bg:#6b4d7a; --av-fg:#fff; }  /* 葡萄 */
.pt-2  { --av-bg:#2f6b5e; --av-fg:#fff; }  /* 深緑 */
.pt-3  { --av-bg:#9c5a35; --av-fg:#fff; }  /* 煉瓦 */
.pt-4  { --av-bg:#4a5568; --av-fg:#fff; }  /* 鉄紺 */
.pt-5  { --av-bg:#7b4b52; --av-fg:#fff; }  /* 蘇芳 */
.pt-6  { --av-bg:#39627a; --av-fg:#fff; }  /* 納戸 */
.pt-7  { --av-bg:#5f6b3a; --av-fg:#fff; }  /* 苔   */
.pt-8  { --av-bg:#6d5636; --av-fg:#fff; }  /* 黄土 */
.pt-9  { --av-bg:#54487e; --av-fg:#fff; }  /* 菫   */
.pt-10 { --av-bg:#356b74; --av-fg:#fff; }  /* 錆浅葱 */
.pt-11 { --av-bg:#8a4a63; --av-fg:#fff; }  /* 梅   */
.ava img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.ava.is-blank { --av-bg:var(--surface-2); --av-fg:var(--muted); }
/* ⚠ .ava 本体には寸法が無く、サイズは必ずこの .ava-NN が決める。
   app.js の avatarHtml(m, N) が使う N（20/24/32/40/44/56）と**必ず一致**させること。
   1つでも欠けると、そのアバターだけイニシャル1文字ぶんに潰れる（v5で .ava-40 の抜けを実機で検出） */
.ava-20{width:20px;height:20px;font-size:var(--fs-10)}
.ava-24{width:24px;height:24px;font-size:var(--fs-11)}
.ava-32{width:32px;height:32px;font-size:var(--fs-13)}
.ava-40{width:40px;height:40px;font-size:var(--fs-15)}
.ava-44{width:44px;height:44px;font-size:var(--fs-17)}
.ava-56{width:56px;height:56px;font-size:var(--fs-20)}
/* 自分だけ赤い枠（_design_v5.md §2「赤は自分に関係するもの」） */
.ava.is-me { box-shadow:0 0 0 2px var(--r); }
.ava-more { display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:22px; padding:0 5px; border-radius:var(--rad-sm);
  background:var(--surface-2); color:var(--muted); font-size:var(--fs-10); font-weight:var(--fw-b); }
.ava-row { display:inline-flex; align-items:center; gap:2px; }
/* 記入率リング（金の円弧 → 黒の円弧に） */
.avr { display:inline-flex; flex:0 0 auto; padding:2px; border-radius:50%;
       background:conic-gradient(var(--text-2) calc(var(--pct,0) * 1%), var(--surface-3) 0); }
.avr.is-empty { background:none; outline:1px dashed var(--border-2); outline-offset:-1px; }

/* ---------- ヘッダー / タブ ---------- */
.hdr {
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  /* ⚠ height ではなく min-height。box-sizing:border-box なので height のまま padding-top を
     足すと中身の高さが削られ、44pxのタップ領域が保てなくなる */
  min-height:var(--hdr-h);
  padding:var(--sa-top) calc(var(--sp-2) + var(--sa-right)) 0 calc(var(--sp-4) + var(--sa-left));
  background:var(--hdr-bg); color:var(--hdr-ink);
  border-bottom:1px solid var(--hdr-bg);
}
.hdr-brand { font-size:var(--fs-15); font-weight:var(--fw-b); letter-spacing:.08em; }
.hdr-right { display:flex; align-items:center; gap:2px; }
.hdr .icon-btn { color:var(--hdr-ink); position:relative; }
.hdr .icon-btn .badge { top:5px; right:5px; transform:none; }
/* いちばん目立つ導線＝唯一の赤いボタン。**タップ44pxを守る**ので --hdr-h は 52px 必要 */
.hdr-post {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-1);
  min-height:var(--tap); padding:0 var(--sp-4); margin-right:var(--sp-1);
  border:0; border-radius:var(--rad-sm);
  background:var(--r); color:var(--on-r);
  font-size:var(--fs-12); font-weight:var(--fw-b); white-space:nowrap; cursor:pointer;
  /* ■ ヘッダーは明暗どちらでも黒地（--hdr-bg = #0b0c0f）。
     ライトのアクセントは暗い色なので、**面と地が分離しないテーマがある**
     （墨 1.29 / 藍 2.22 / 臙脂 2.36 / 葡萄 2.65 / 深緑・青磁 2.94 ＝ UI部品に要る 3:1 未満。
     白い文字だけが浮いて、ボタンの矩形が見えなくなる）。
     文字のコントラスト（白文字 4.5:1 以上）は満たしていても、**面 vs 地**は別の軸。
     面の色は _design_v5.md §9-3 の正典どおりに保ち、**1pxのヘアラインで輪郭を作る**
     （§1「影は使わず1pxの境界で構造を作る」に沿う。box-shadow はリング用途＝寸法を動かさない）。
     ダークのアクセントは明るいので輪郭が無くても分離するが、
     ダーク専用CSSを書かない方針なので同じ1本を通す（見た目の破綻は無い）。 */
  box-shadow:0 0 0 1px var(--hdr-ink);
}
.hdr-post:active { transform:translateY(1px); }

#main { padding:var(--sp-3) var(--sa-right) calc(76px + var(--sa-bottom)) var(--sa-left);
        max-width:var(--maxw); margin:0 auto; }
/* カード類は画面端まで伸ばし、余白は各部品の内側で取る（横の無駄を消す＝密度） */
#main > section { padding:0 var(--sp-3); }

.tabbar {
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:flex; background:var(--surface); border-top:1px solid var(--border);
  padding:0 var(--sa-right) var(--sa-bottom) var(--sa-left);
}
/* 6タブ。375pxだと1タブ62.5pxなのでラベルは折り返さず縮める */
.tab {
  flex:1 1 0; min-width:0; min-height:var(--tabbar-h); border:0; background:transparent;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  font-size:var(--fs-10); color:var(--muted); cursor:pointer; position:relative;
  padding:0 2px 4px; white-space:nowrap; overflow:hidden;
}
.tab .ico { width:19px; height:19px; }
/* 選択中は「赤の下線＋濃い文字」。背景色は付けない（_design_v5.md §4） */
.tab::after { content:""; display:block; width:18px; height:2px; border-radius:1px;
              background:transparent; margin-top:2px; }
.tab.is-active { color:var(--text); font-weight:var(--fw-b); }
.tab.is-active::after { background:var(--r); }
.badge {
  position:absolute; top:4px; right:50%; transform:translateX(18px);
  min-width:16px; height:16px; padding:0 4px; border-radius:var(--rad-sm);
  background:var(--r); color:var(--on-r); font-size:var(--fs-10); font-weight:var(--fw-b);
  display:flex; align-items:center; justify-content:center;
}
/* 未読バッジは①タブバー（カード面の上）と②ヘッダーの💬（黒地の上）の2か所に出る。
   ②だけは .hdr-post と同じ理由でアクセント面が地に沈むテーマがあるので輪郭を足す。
   ①は白／濃い面の上なのでどのテーマでも分離する＝輪郭は付けない（線を増やさない）。 */
.hdr .badge { box-shadow:0 0 0 1px var(--hdr-ink); }

/* ---------- カード（島ではなく、詰めた面） ---------- */
.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--rad-md); padding:var(--pad-y) var(--pad-x); margin-bottom:var(--sp-2);
}
.card.is-blank { border-style:dashed; border-color:var(--border-2); background:var(--surface); }
.card.is-me { border-left:2px solid var(--r); }
.card.is-target { outline:2px solid var(--r); outline-offset:1px; }
.card-tap { cursor:pointer; }
.card-tap:active { transform:translateY(1px); }
.card-hd { display:flex; align-items:baseline; justify-content:space-between;
           gap:var(--sp-2); margin-bottom:var(--sp-2); }
.card-ttl { display:flex; align-items:center; gap:var(--sp-1);
            margin:0; font-size:var(--fs-13); font-weight:var(--fw-b); color:var(--text); }
.card-hint, .card-foot { margin:0; font-size:var(--fs-11); color:var(--muted); line-height:1.5; }
.card-foot { margin-top:var(--sp-2); display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-4); }
/* 脚注に混ざるリンクもタップ44pxを確保する（_spec_v3.md §4-6） */
.card-foot a { display:inline-flex; align-items:center; gap:var(--sp-1); min-height:var(--tap); }

/* ---------- 空状態 ---------- */
.zero { display:flex; flex-direction:column; align-items:center; gap:var(--sp-2);
        padding:var(--sp-5) var(--sp-4); text-align:center; color:var(--muted); }
.zero-inline { padding:var(--sp-4) var(--sp-2); }
.zero-ico { line-height:1; color:var(--muted); }
.zero-ttl { margin:0; font-size:var(--fs-13); font-weight:var(--fw-b); color:var(--text-2); }
.zero-sub { margin:0; font-size:var(--fs-12); color:var(--muted); line-height:1.55; max-width:34em; }
.zero-cta { min-height:var(--tap); }
.zero-acts { display:flex; flex-wrap:wrap; gap:var(--sp-2); justify-content:center; }

/* ---------- 1行バー（立ち上げ案内・自分の番なし・分野未設定） ----------
   v5: 大きなバナー／大枠をやめ、**高さ36pxの1行**に畳んだ（_design_v5.md §3）。 */
.linebar {
  display:flex; align-items:center; gap:var(--sp-2);
  min-height:36px; padding:var(--sp-1) var(--pad-x); margin-bottom:var(--sp-2);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--rad-sm);
  font-size:var(--fs-12); color:var(--text-2);
}
.linebar .ico { color:var(--muted); }
.linebar-txt { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.linebar-act {
  flex:0 0 auto; min-height:var(--tap); padding:0 var(--sp-3); border:0; background:transparent;
  color:var(--r); font-size:var(--fs-12); font-weight:var(--fw-b); cursor:pointer;
  display:inline-flex; align-items:center; gap:2px;
}
/* ---------- 📌 ピン留めお知らせ（1行＋本文） ---------- */
.pinned {
  background:var(--surface); border:1px solid var(--border-2);
  border-left:2px solid var(--ink);
  border-radius:var(--rad-sm); padding:var(--sp-2) var(--pad-x); margin-bottom:var(--sp-2);
}
.pinned-hd { display:flex; flex-wrap:nowrap; align-items:center; gap:var(--sp-2);
             font-size:var(--fs-11); color:var(--muted); overflow:hidden; }
.pinned-tag { display:inline-flex; align-items:center; gap:2px; flex:0 0 auto;
  font-size:var(--fs-10); font-weight:var(--fw-x); color:var(--ink); letter-spacing:.04em; }
.pinned-meta { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pinned-text { margin-top:2px; font-size:var(--fs-13); line-height:1.5; color:var(--text);
               white-space:pre-wrap; word-break:break-word;
               display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pinned-foot { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); }
.pinned-go { min-height:var(--tap); padding:0 var(--sp-2); border:0; background:transparent;
             color:var(--r); font-size:var(--fs-12); font-weight:var(--fw-b); cursor:pointer; }

/* ---------- 「自分の番」バー ---------- */
.turnbar { display:flex; gap:var(--sp-2); margin-bottom:var(--sp-2); }
.turnbar-seg {
  flex:1 1 0; min-width:0; min-height:var(--tap); padding:var(--sp-1) var(--sp-3);
  display:flex; align-items:center; justify-content:center; gap:var(--sp-1); flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--rad-sm);
  font-size:var(--fs-12); color:var(--muted); cursor:pointer;
}
.turnbar-seg .ico { color:var(--muted); }
.turnbar-seg b { color:var(--text); font-size:var(--fs-15); margin:0 2px; }
/* 自分の宿題が実際にあるときだけアクセントで立てる（＝自分に関係するもの） */
.turnbar-seg.is-on { color:var(--r-ink); border-color:var(--r); background:var(--r-soft); }
/* 淡色面（--r-soft）の上に乗る文字・アイコンは **--r ではなく --r-ink**。
   --r は「面の色」なので淡色面に乗せると読みにくい（柿のライトで 4.34:1 ＝ 4.5 未満。
   この b は 15px 太字＝WCAG の「大きい文字」に当たらないので 4.5 が要る）。
   --r-ink は定義からして「赤淡色面の上の文字」で、8色とも 6.76:1 以上ある。 */
.turnbar-seg.is-on .ico, .turnbar-seg.is-on b { color:var(--r-ink); }
/* 「最長◯日」は滞留の警告なので危険色（テーマを変えても赤） */
.turnbar-warn { color:var(--danger); font-size:var(--fs-11); font-weight:var(--fw-b); }

/* ---------- 🔔 あなたの番（宿題カード） ---------- */
.turn-rail { list-style:none; margin:0 0 var(--sp-2); padding:0;
             display:flex; flex-direction:column; gap:var(--sp-1); }
.turn-card {
  display:flex; gap:var(--sp-3); align-items:flex-start; flex-wrap:wrap;
  min-height:var(--tap); padding:var(--sp-2) var(--pad-x); background:var(--surface);
  border:1px solid var(--border); border-left:2px solid var(--border-2);
  border-radius:var(--rad-sm); cursor:pointer;
}
.turn-card[data-heat="warm"] { border-left-color:var(--text-2); }
/* hot＝滞留が長い。危険色で固定（テーマを深緑にしても「急ぎ」は赤のまま・§9-2） */
.turn-card[data-heat="hot"]  { border-left-color:var(--danger); }
.turn-card.is-clear { border-left-color:var(--border-2); cursor:default; }
.turn-card.is-clear.is-tap { cursor:pointer; }
/* 押せる範囲は**本物の <button>**。一次反応チップはその外の兄弟に置く
   （role="button" の子は支援技術から隠れるため） */
.turn-open { flex:1 1 100%; display:flex; gap:var(--sp-3); align-items:flex-start;
  min-height:var(--tap); padding:0; border:0; background:transparent; color:inherit;
  font:inherit; text-align:left; cursor:pointer; }
.turn-age { min-width:36px; text-align:center; color:var(--muted); line-height:1.1; }
.turn-age b { font-size:var(--fs-20); color:var(--text); }
.turn-card[data-heat="warm"] .turn-age b { color:var(--text); }
.turn-card[data-heat="hot"]  .turn-age b { color:var(--danger); }
.turn-ico { min-width:22px; text-align:center; color:var(--muted); }
/* .turn-main / .turn-title は <button> の中に入るので <span>。整形はCSSで与える */
.turn-main { flex:1 1 auto; min-width:0; display:block; }
.turn-title { display:block; margin:0; font-size:var(--fs-14); font-weight:var(--fw-b);
              line-height:var(--lh-tight); word-break:break-word; }
.turn-meta { margin:2px 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1);
             font-size:var(--fs-11); color:var(--muted); }
.turn-act { flex:1 1 100%; margin-top:var(--sp-1); }
.turn-act .chip { flex:1 1 auto; justify-content:center; min-height:var(--tap); }

/* ---------- パイプライン帯（📋案件タブ） ---------- */
.pipe { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:1px;
        background:var(--border); border:1px solid var(--border); border-radius:var(--rad-sm);
        overflow:hidden; }
.pipe-seg {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  min-height:var(--tap); padding:var(--sp-2) 2px; background:var(--surface);
  border:0; cursor:pointer; color:inherit;
}
.pipe-n { font-size:var(--fs-17); color:var(--text); }
/* 6区画のとき375pxで1区画=約51px。ラベルは折り返さずはみ出す分を隠す */
.pipe-l { font-size:var(--fs-10); color:var(--muted); white-space:nowrap;
          max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.pipe-seg.is-zero .pipe-n { color:var(--border-2); }
.pipe-seg.is-on { background:var(--ink); }
.pipe-seg.is-on .pipe-n, .pipe-seg.is-on .pipe-l { color:var(--surface); }

/* 「前回からの新着◯件↓」の帯。押せる帯なので下限44px（_spec_v3.md §4-6） */
.newbar { display:flex; align-items:center; justify-content:center; gap:var(--sp-1);
  position:sticky; top:var(--hdr-total); z-index:5; width:100%; min-height:var(--tap);
  background:var(--r-soft); color:var(--r-ink); border:1px solid var(--r);
  border-radius:var(--rad-sm); font-size:var(--fs-11); font-weight:var(--fw-b); cursor:pointer;
  margin-bottom:var(--sp-2); }

/* ---------- 👥 名鑑カード ---------- */
.mcard-top { display:flex; align-items:flex-start; gap:var(--sp-3); }
.mcard-id  { flex:1 1 auto; min-width:0; }   /* ← 375pxの溢れ防止に必須 */
.mcard-name{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-1);
             margin:0; font-size:var(--fs-15); font-weight:var(--fw-x);
             line-height:var(--lh-tight); word-break:break-word; }
.mcard-you { padding:0 5px; border-radius:var(--rad-sm);
  background:var(--r); color:var(--on-r); font-size:var(--fs-10); font-weight:var(--fw-b); }
.mcard-org { display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-1);
             margin:2px 0 0; font-size:var(--fs-12); color:var(--text-2); line-height:1.4;
             word-break:break-word; }
.mcard-org.is-blank { color:var(--muted); }
.mcard-tags{ display:flex; flex-wrap:wrap; gap:var(--sp-1); margin-top:var(--sp-2); }
.mcard-kv  { margin:var(--sp-2) 0 0; }
/* 375pxで値側=約230px。ラベル文言は6文字以内に収める（運用ルール） */
.kvrow { display:grid; grid-template-columns:72px 1fr; gap:var(--sp-2);
         padding:var(--sp-2) 0; border-top:1px solid var(--border); }
.kvk   { font-size:var(--fs-11); font-weight:var(--fw-b); color:var(--muted); padding-top:1px; }
.kvk-want { color:var(--text-2); }
.kvv   { font-size:var(--fs-13); line-height:1.5; color:var(--text); word-break:break-word;
         white-space:pre-wrap; }
/* 一覧（名鑑・商品）の中だけは、記入済みでも「未記入」でも必ず2行ぶんの高さを取る。
   これをしないと、書いた人と書いていない人でカードの背が大きく食い違う（§7-2）。
   詳細モーダルの中の .kvv には効かせない（§7-3 の例外） */
.card-grid .kvv { min-height:3em; }
.kvv.is-clamp { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.kvv.is-blank { color:var(--muted); font-size:var(--fs-12); }
.mcard-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2);
  margin-top:var(--sp-3); padding-top:var(--sp-2); border-top:1px solid var(--border); }
/* 一覧では、操作ボタンが無い人（＝自分の記入済みカード）の footer も
   ボタン1つぶんの高さを確保して、カードの背が食い違わないようにする（§7-2） */
.card-grid .mcard-foot { min-height:calc(var(--tap) + var(--sp-2)); }
.meter   { display:inline-flex; align-items:center; gap:2px; }
.meter i { width:9px; height:5px; border-radius:1px; background:var(--surface-3); }
.meter i.is-on { background:var(--text-2); }
.meter-txt { margin-left:var(--sp-1); font-size:var(--fs-11); color:var(--muted); }
.mcard-act { display:flex; flex-wrap:wrap; gap:var(--sp-1); margin-left:auto; }
.act { display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-1);
  min-width:var(--tap); min-height:var(--tap); padding:0 var(--sp-4);
  border:1px solid var(--border-2); border-radius:var(--rad-sm); background:var(--surface);
  font-size:var(--fs-12); text-decoration:none; color:var(--text-2); cursor:pointer; }
.act-main  { background:var(--ink); border-color:var(--ink); color:var(--surface);
             font-weight:var(--fw-b); }
.act-ghost { border-style:dashed; color:var(--muted); }

/* ---------- 📋 案件カード / 💡 ボックスカード ----------
   v5 §7-2: 一覧のカードは**同じ高さ**にする。見出し1行・メタ1行（20pxアバターを含む）・
   本文2行 ＝ 内容 約81px。和文フォントが Yu Gothic UI / Meiryo に落ちたときの
   行送りの差を吸収できるよう、余裕を持たせて 112px（内容領域 90px）にしてある。 */
.card-uniform { height:112px; overflow:hidden; display:flex; flex-direction:column; gap:var(--sp-1); }
.ccard-hd { display:flex; align-items:flex-start; gap:var(--sp-2); }
.ccard-title { flex:1 1 auto; display:flex; align-items:center; gap:var(--sp-1);
               margin:0; font-size:var(--fs-14); font-weight:var(--fw-b);
               line-height:var(--lh-tight); min-width:0;
               overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ccard-hd .st, .ccard-hd .idea-st, .ccard-hd .lock-badge { flex:0 0 auto; }
/* メタは1行に固定（折り返すと高さが揃わない） */
.ccard-meta { display:flex; gap:var(--sp-2); align-items:center; min-width:0;
              font-size:var(--fs-11); color:var(--muted);
              white-space:nowrap; overflow:hidden; }
.ccard-meta > * { flex:0 0 auto; }
.ccard-cust { margin:0; font-size:var(--fs-12); color:var(--text-2); word-break:break-word;
              display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ---------- 💡 ボックス ---------- */
/* 種別は色帯ではなく左のヘアラインとアイコン＋文字で示す */
.icard { border-left:2px solid var(--border-2); }
/* 困りごと＝🆘。「助けて」の合図なのでテーマ色ではなく危険色で固定する（§9-2）。
   テーマを深緑にしたときにSOSまで緑になると、他の投稿と区別が付かなくなる */
.icard[data-kind="困りごと"] { border-left-color:var(--danger); }
.idea-body { color:var(--text); white-space:pre-wrap; word-break:break-word;
             margin-top:var(--sp-2); font-size:var(--fs-14); }
.idea-meta { display:flex; flex-wrap:wrap; gap:2px var(--sp-2); align-items:center;
             margin-top:var(--sp-2); font-size:var(--fs-11); color:var(--muted); }
/* 一覧（.card-uniform）の中では折り返さない＝高さを揃えるため */
.card-uniform .idea-meta { flex-wrap:nowrap; margin-top:0; white-space:nowrap; overflow:hidden; }
.card-uniform .idea-meta > * { flex:0 0 auto; }
.like-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-1);
  min-height:var(--tap); min-width:76px; padding:4px var(--sp-5);
  border:1px solid var(--border-2); border-radius:var(--rad-sm); background:var(--surface);
  font-size:var(--fs-13); font-weight:var(--fw-b); cursor:pointer; color:var(--text-2);
}
.like-btn.is-on { background:var(--ink); border-color:var(--ink); color:var(--surface); }
.link-box {
  display:flex; align-items:center; gap:var(--sp-2);
  margin-top:var(--sp-2); padding:8px 10px; min-height:var(--tap);
  background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  border-radius:var(--rad-sm); font-size:var(--fs-12); font-weight:var(--fw-b);
  cursor:pointer; width:100%; text-align:left;
}

/* ---------- 📊 実績 ---------- */
.kpi-rail { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-1); }
.kpi {
  position:relative; display:flex; flex-wrap:wrap; align-items:baseline; gap:0 var(--sp-1);
  min-height:64px; padding:var(--sp-3) var(--pad-x);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--rad-sm);
  text-align:left; overflow:hidden;
}
button.kpi { cursor:pointer; }
button.kpi:active { transform:translateY(1px); }
.kpi-num  { font-size:var(--fs-24); line-height:1.1; color:var(--text); }
.kpi-unit { font-size:var(--fs-12); font-weight:var(--fw-b); color:var(--muted); }
.kpi-lbl  { flex:1 0 100%; margin-top:2px; font-size:var(--fs-11);
            font-weight:var(--fw-b); color:var(--muted); letter-spacing:.04em; }
/* ゼロは主張しない（0が並ぶ画面を叱責に見せない） */
.kpi[data-zero] .kpi-num { color:var(--muted); font-weight:var(--fw-b); }

.chart-wrap { margin-top:var(--sp-2); }
.donut { display:block; width:100%; max-width:180px; height:auto; margin:0 auto; }
/* r=15.9155（円周100）に対して太さは10以下でないと viewBox(42x42) からはみ出す */
.dn { fill:none; stroke-width:8; }
/* v5: 色分けをやめたので、6区分は**濃さの階段**で見分ける。
   ⚠ 隣り合う段どうしのコントラストは原理的に小さいので、donutSvg() 側で
     各区分のあいだに 1% の隙間を空けている（それが無いと薄い側が1本の帯に見える）。 */
/* 薄い→濃いの6段。トークンの階調をそのまま1段ずつ使う（重複させないこと） */
.dn-track  { stroke:var(--surface-2); }
.dn-見送り { stroke:var(--border); }
.dn-起票   { stroke:var(--border-2); }
.dn-対応中 { stroke:var(--muted); }
.dn-商談中 { stroke:var(--text-2); }
.dn-完了   { stroke:var(--text); }
.dn-成約   { stroke:var(--ink); }
.dn-num { fill:var(--text); font-size:15px; font-weight:800; font-family:var(--font-num); }
.dn-cap { fill:var(--muted); font-size:6px; }
.legend { display:flex; flex-wrap:wrap; gap:var(--sp-1) var(--sp-4); margin-top:var(--sp-2);
          font-size:var(--fs-11); color:var(--text-2); }
.legend span { display:inline-flex; align-items:center; gap:var(--sp-1); }
/* 凡例の色見本。「.legend i」より詳細度を上げないと既定に負けるので i.lg-* で書く */
.legend i { width:9px; height:9px; border-radius:1px; background:var(--surface-2);
            box-shadow:inset 0 0 0 1px var(--border); }
.legend i.lg-見送り { background:var(--border); }
.legend i.lg-起票   { background:var(--border-2); }
.legend i.lg-対応中 { background:var(--muted); }
.legend i.lg-商談中 { background:var(--text-2); }
.legend i.lg-完了   { background:var(--text); }
.legend i.lg-成約   { background:var(--ink); }
.brow { display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) 0;
        border-top:1px solid var(--border); }
.brow:first-of-type { border-top:0; }
.brow-name { flex:0 0 72px; min-width:0; font-size:var(--fs-12); color:var(--text-2);
             overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.brow-bars { flex:1 1 auto; min-width:0; }
.bar-svg { display:block; width:100%; height:20px; }
.bar-sent { fill:var(--text-2); }
.bar-recv { fill:var(--ink); }
.bar-bg   { fill:var(--surface-3); }
.brow-n { flex:0 0 auto; font-size:var(--fs-11); color:var(--muted); }
.sample { opacity:.3; }
.sample-cap { text-align:center; font-size:var(--fs-11); color:var(--muted); margin:var(--sp-1) 0 0; }
.tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--rad-sm);
            border:1px solid var(--border); background:var(--surface); margin-bottom:var(--sp-2); }
table.tbl { width:100%; border-collapse:collapse; font-size:var(--fs-12); }
table.tbl th, table.tbl td { padding:var(--sp-2) 6px; border-bottom:1px solid var(--border);
                             text-align:right; white-space:nowrap; }
table.tbl tr:last-child td { border-bottom:0; }
table.tbl th { background:var(--surface-2); color:var(--text-2); font-size:var(--fs-11); }
table.tbl th:first-child, table.tbl td:first-child { text-align:left; }
/* 1列目は「アバター＋氏名＋分野バッジ」。分野は自由入力20字まで入るので、
   nowrap のままだと1列目だけで画面幅を食い潰し数値列が見えなくなる（実測） */
table.tbl td:first-child { white-space:normal; max-width:136px; }
table.tbl td:first-child .fbadge {
  display:inline-block; max-width:100%; line-height:18px; vertical-align:middle;
  overflow:hidden; text-overflow:ellipsis;
}
.tbl-name { display:inline-flex; align-items:center; gap:var(--sp-1); max-width:100%; }
.tbl-who { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* 目には出さないが読み上げには要る文字（マトリクスの列見出し＝アバターだけの列など） */
.sr-only {
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ---------- 🔗 組み合わせ表（v5.5・実績タブの主役） ----------
   無向の上三角。マス＝その2人が一緒に動いた件数、空白＝まだ一度も組んでいない。
   行は ids[0..n-2]・列は ids[1..n-1] なので、空の行・空の列は出ない。 */
table.tbl.mtx th, table.tbl.mtx td { padding:var(--sp-1) 4px; text-align:center; }
table.tbl.mtx th.mtx-corner { min-width:88px; }
/* 列見出し＝アバターの下に氏名を1行。375pxでも 88+44×5=308px で収まる幅にしてある */
table.tbl.mtx th.mtx-h { min-width:44px; max-width:56px; padding:var(--sp-1) 2px; }
.mtx-hn { display:block; max-width:52px; margin:0 auto; font-size:var(--fs-10); font-weight:400;
          overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 行見出しは「アバター＋氏名」。氏名は自由入力なので幅の上限と省略記号を必ず効かせる */
table.tbl.mtx th.mtx-r {
  text-align:left; white-space:normal; max-width:120px; font-weight:400; font-size:var(--fs-11);
}
table.tbl.mtx td { min-width:38px; }
/* 動いた組み合わせだけを反転させる。空白との差は「濃さ」で付ける（色は足さない） */
.mtx-on { background:var(--ink); color:var(--surface); font-weight:var(--fw-b); }
.mtx-off { background:var(--surface); }
.mtx-void { background:var(--surface-2); }
.mtx-dot { display:inline-block; width:3px; height:3px; border-radius:50%; background:var(--border-2); }
.mtx-foot { margin:var(--sp-2) 0 var(--sp-1); font-size:var(--fs-12); color:var(--text-2); }
/* 未踏ペアのチップは押せない（見るためだけ）。押せる見た目にしないよう cursor を戻す */
.mtx-chip { cursor:default; }
.mtx-chip.is-more { color:var(--muted); border-style:dashed; }

/* ---------- 畳んだ明細（<details>） ---------- */
.fold { margin-bottom:var(--sp-2); border:1px solid var(--border);
        border-radius:var(--rad-sm); background:var(--surface); }
.fold > .fold-sum {
  display:flex; align-items:center; gap:var(--sp-1); list-style:none;
  min-height:var(--tap); padding:0 var(--pad-x);
  font-size:var(--fs-12); font-weight:var(--fw-b); color:var(--text-2); cursor:pointer;
}
.fold > .fold-sum::-webkit-details-marker { display:none; }
.fold > .fold-sum .ico { color:var(--muted); }
/* 開閉の向きを示す小さなシェブロン（絵文字もアイコンフォントも使わない） */
.fold > .fold-sum::after {
  content:''; margin-left:auto; width:6px; height:6px;
  border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted);
  transform:rotate(45deg) translateY(-2px);
}
.fold[open] > .fold-sum::after { transform:rotate(-135deg) translateY(-1px); }
.fold[open] > .fold-sum { border-bottom:1px solid var(--border); }
.fold .tbl-wrap { border:0; border-radius:0; margin-bottom:0; }

/* ---------- 🔗 今週の組み合わせ（v5.5・ホーム） ---------- */
/* PC幅では横に伸ばさない（伸ばすと2人の間の × が離れて「組み合わせ」に見えなくなる） */
.pair { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) 0 var(--sp-2);
        max-width:340px; margin:0 auto; }
.pair-one { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center;
            gap:4px; text-align:center; }
.pair-name { max-width:100%; font-size:var(--fs-12); font-weight:var(--fw-b); color:var(--text);
             overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pair-x { flex:0 0 auto; font-size:var(--fs-15); color:var(--muted); }
.pair-txt { margin:0 0 var(--sp-2); font-size:var(--fs-12); color:var(--text-2); line-height:1.6; }
.pair-card .btn { width:100%; }

/* ---------- 📅 予定（v6.0） ----------
   水野さんの要望「次回の日程共有等のためのカレンダー機能（表示）」。
   ホームは**日付順のリスト**が主役で、月グリッドはモーダルで開く補助
   （6人・月に数件だと月グリッドは空白だらけになり、スマホでは1マスが小さすぎて読めない）。 */

/* リスト⇄カレンダーの切替。見出しの下に1行（375pxで見出しの横に入れると詰まる） */
.ev-seg { margin-bottom: var(--sp-2); }
.ev-none { margin: 0 0 var(--sp-2); font-size: var(--fs-12); color: var(--muted); }
.ev-add { width: 100%; }

.ev-list { display: flex; flex-direction: column; }
.ev-row {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  width: 100%; text-align: left; background: transparent; border: 0;
  border-top: 1px solid var(--border); padding: var(--sp-2) 0;
  min-height: var(--tap); cursor: pointer; color: var(--text);
  font-family: inherit; font-size: var(--fs-13);
}
.ev-row:first-child { border-top: 0; }
/* 案件詳細では過ぎた予定も残す（いつ会ったかは履歴として意味がある）。薄くして今後と区別する */
.ev-row.is-past { opacity: .55; }
/* 「いつ」は等幅＋数字揃えで、縦に並んだとき日付の桁が揃うようにする */
.ev-when {
  flex: 0 0 92px; font-family: var(--font-num);
  font-size: var(--fs-12); font-variant-numeric: tabular-nums; color: var(--text-2); padding-top: 1px;
}
.ev-when.is-today { color: var(--r); font-weight: var(--fw-b); }
.ev-main { min-width: 0; display: flex; flex-direction: column; }
.ev-ttl { font-weight: var(--fw-b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-sub { font-size: var(--fs-11); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- 月グリッド（モーダル内） ---- */
.cal-bar { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.cal-ym { flex: 1 1 auto; text-align: center; font-size: var(--fs-15);
          font-variant-numeric: tabular-nums; color: var(--text); }
.cal-today { margin-left: auto; }
/* 「前の月」は同じシェブロンを180度回して使う（アイコンを増やさない） */
.cal-nav:first-of-type .ico { transform: rotate(180deg); }

/* マスは正方形なので、PC幅で伸ばすと1マスが巨大になる。420pxで頭打ちにして中央に置く */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; max-width: 420px; margin: 0 auto; }
.cal-head { margin-bottom: 1px; }
.cal-dow {
  text-align: center; padding: var(--sp-1) 0;
  font-size: var(--fs-11); font-weight: var(--fw-b); color: var(--muted);
}
.cal-dow.is-sun, .cal-cell.is-sun .cal-n { color: var(--danger); }
.cal-dow.is-sat, .cal-cell.is-sat .cal-n { color: var(--text-2); }

.cal-cell {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; aspect-ratio: 1 / 1; min-height: 40px;
  border: 1px solid var(--border); border-radius: var(--rad-sm);
  background: var(--surface); color: var(--text);
  font-family: inherit; cursor: pointer; padding: 0;
}
/* 前後の月にはみ出す枠。押せないし数字も出さない＝**月の輪郭**が見えるのが月表示の値打ち
   （v6.2で6週ローリングにしたとき月の輪郭が消え、実機評価が「月で分けた方が見やすい」だった） */
.cal-cell.is-void { background: var(--surface-2); border-color: transparent; cursor: default; }
.cal-n { font-size: var(--fs-12); font-variant-numeric: tabular-nums; line-height: 1; }
/* 予定がある日は「点」で示す。件数を数字で出すとマスが窮屈になり、色も増える */
.cal-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ink); }
.cal-cell.is-today { border-color: var(--r); }
.cal-cell.is-today .cal-n { color: var(--r); font-weight: var(--fw-b); }
.cal-cell.is-sel { background: var(--ink); }
.cal-cell.is-sel .cal-n { color: var(--surface); }
.cal-cell.is-sel .cal-dot { background: var(--surface); }
.cal-cell:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }

.cal-day-ttl {
  margin: var(--sp-4) 0 var(--sp-1);
  font-size: var(--fs-13); font-weight: var(--fw-b); color: var(--ink);
}
.cal-day-none { margin: 0; font-size: var(--fs-12); color: var(--muted); }

/* ---- 予定の詳細 ---- */
.ev-d-when { margin: 0 0 var(--sp-1); font-size: var(--fs-13); color: var(--r); font-weight: var(--fw-b);
             font-variant-numeric: tabular-nums; }
.ev-d-ttl { margin: 0 0 var(--sp-2); font-size: var(--fs-17); color: var(--ink); }
.ev-d-line { display: flex; align-items: center; gap: var(--sp-1); margin: 0 0 var(--sp-1);
             font-size: var(--fs-13); color: var(--text-2); }
.ev-d-line .ico { color: var(--muted); flex: 0 0 auto; }
.ev-d-note { margin: var(--sp-2) 0 0; font-size: var(--fs-13); white-space: pre-wrap; }
.ev-d-by { margin: var(--sp-3) 0 0; font-size: var(--fs-11); color: var(--muted); }
.ev-d-admin { margin-top: var(--sp-5); padding-top: var(--sp-3); border-top: 1px solid var(--border); }

/* ---------- 💬 談話室 ---------- */
.chat-wrap { display:flex; flex-direction:column; gap:1px; }
.chat-day { align-self:center; margin:var(--sp-3) 0 var(--sp-1); padding:1px 10px;
  background:var(--surface-2); color:var(--muted); border-radius:var(--rad-sm);
  font-size:var(--fs-11); font-weight:var(--fw-b); }
.chat-line { display:flex; gap:var(--sp-2); align-items:flex-start; max-width:92%; margin-top:var(--sp-2); }
/* 連続発言はアバターを出さないので、その幅（28px＋隙間6px）だけ字下げして列を揃える */
.chat-line.is-cont { margin-top:2px; }
.chat-line.is-cont:not(.is-me) { padding-left:34px; }
.chat-line.is-me { align-self:flex-end; flex-direction:row-reverse; }
.chat-body { min-width:0; }
.chat-line.is-me .chat-body { display:flex; flex-direction:column; align-items:flex-end; }
.chat-who { display:flex; align-items:center; gap:var(--sp-1);
            font-size:var(--fs-11); color:var(--muted); margin-bottom:1px; }
.chat-bubble {
  padding:var(--sp-2) var(--sp-3); border-radius:var(--rad-md);
  background:var(--surface); border:1px solid var(--border);
  white-space:pre-wrap; word-break:break-word; line-height:1.45; font-size:var(--fs-13);
}
/* 自分の発言は右寄せ＋「一段濃い面と枠」で見分ける（色ではなく位置と濃さ） */
.chat-line.is-me .chat-bubble { background:var(--surface-2); border-color:var(--border-2); }
.chat-line.is-notice { max-width:100%; }
.chat-line.is-notice .chat-who { color:var(--ink); font-weight:var(--fw-b); }
.chat-line.is-notice .chat-bubble { background:var(--surface); border-color:var(--ink);
                                    border-left-width:2px; }
/* 本文に混ざるリンクも指で押せる高さを確保する（_spec_v3.md §4-6） */
.chat-bubble a { word-break:break-all; display:inline-flex; align-items:center; min-height:var(--tap); }
.chat-empty { color:var(--muted); font-size:var(--fs-13); text-align:center; padding:var(--sp-6) var(--sp-1); }
.chat-input-row {
  position:sticky; bottom:0; z-index:2;
  display:flex; gap:var(--sp-2); align-items:flex-end;
  padding:var(--sp-2) 0 2px; margin-top:var(--sp-2);
  background:var(--bg); border-top:1px solid var(--border);
}
.chat-input-row textarea { flex:1 1 auto; min-height:var(--tap); max-height:120px; margin:0; }
.chat-send { min-height:var(--tap); min-width:56px; }
.chat-note {
  display:flex; align-items:center; gap:var(--sp-2);
  background:var(--surface); border:1px solid var(--border); color:var(--text-2);
  border-radius:var(--rad-sm); padding:var(--sp-1) var(--sp-3);
  font-size:var(--fs-12); margin-bottom:var(--sp-2);
}
.chat-note a { min-height:var(--tap); display:inline-flex; align-items:center; color:var(--link); }

/* @メンション */
.mention { color:var(--ink); background:var(--surface-2); border-radius:var(--rad-sm);
           padding:0 3px; font-weight:var(--fw-b); }
/* 「@全員」は全員にメールが飛ぶので、名指しと**囲み線**で区別する（§2・色は増やさない）。
   padding を 1px 減らして、線のぶん行の幅が動かないようにしている */
.mention.is-all { border:1px solid var(--border-2); padding:0 2px; }
.mention-box, .quick-row {
  display:flex; gap:var(--sp-1); overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding:var(--sp-1) 0; margin-top:var(--sp-1);
}
.mention-box .chip, .quick-row .chip { flex:0 0 auto; }

/* ---------- モーダル・トースト ---------- */
.modal { position:fixed; inset:0; z-index:50; background:var(--overlay);
         display:flex; align-items:flex-end; justify-content:center; }
.modal-sheet { width:100%; max-width:640px; max-height:calc(92dvh - var(--sa-top)); background:var(--bg);
               border-radius:var(--rad-md) var(--rad-md) 0 0; display:flex; flex-direction:column; }
.modal-hdr { display:flex; align-items:center; justify-content:space-between;
  padding:var(--sp-2) var(--sp-1) var(--sp-2) var(--sp-5); border-bottom:1px solid var(--border);
  background:var(--surface); border-radius:var(--rad-md) var(--rad-md) 0 0;
  font-size:var(--fs-14); }
.modal-body { overflow-y:auto; padding:var(--sp-4) var(--sp-4) calc(24px + var(--sa-bottom)); }
/* z-index は lightbox(70) より上。ここを下げると画像拡大中のエラーが見えなくなる
   （v4.0 のレビュー指摘。toast=60 では lightbox の裏に隠れていた） */
.toast { position:fixed; left:50%; bottom:calc(76px + var(--sa-bottom));
  transform:translateX(-50%); z-index:80; max-width:92vw; text-align:center;
  background:var(--ink); color:var(--surface); padding:8px 14px;
  border-radius:var(--rad-sm); font-size:var(--fs-13); }

/* ---------- 起票フォーム ---------- */
.to-list { display:flex; flex-direction:column; gap:var(--sp-1); }
.to-item {
  display:flex; align-items:center; gap:var(--sp-2); min-height:var(--tap);
  padding:4px var(--sp-3); border:1px solid var(--border); border-radius:var(--rad-sm);
  background:var(--surface); cursor:pointer; font-size:var(--fs-13);
}
.to-item input { width:18px; height:18px; accent-color:var(--r); }
.to-item.is-on { border-color:var(--ink); background:var(--surface-2); }
.built {
  margin:var(--sp-2) 0; padding:8px 10px; min-height:var(--tap);
  display:flex; align-items:center; background:var(--surface-2);
  border:1px solid var(--border-2); border-radius:var(--rad-sm);
  font-size:var(--fs-13); font-weight:var(--fw-b); word-break:break-word;
}
.built.is-empty { background:var(--surface); border-color:var(--border);
                  color:var(--muted); font-weight:400; }
/* 🔒限定案件（v7.0・_design_v5.md §15）。**色は増やさない**＝鍵アイコン＋「限定」の文字＋
   1pxの囲み線だけで区別する。ステータス（.st）の隣に並ぶので高さ・角丸をそろえる。 */
.lock-badge {
  display:inline-flex; align-items:center; gap:2px; padding:1px var(--sp-2);
  border-radius:var(--rad-sm); font-size:var(--fs-11); font-weight:var(--fw-b);
  white-space:nowrap; border:1px solid var(--text-2); color:var(--text);
  background:var(--surface);
}
.lock-badge .ico { color:var(--text-2); }
/* 「見られる人」の顔ぶれ。1行に詰めて折り返す（6人なら2行に収まる） */
.priv-list { display:flex; flex-wrap:wrap; gap:var(--sp-1) var(--sp-3); margin-top:var(--sp-1); }
.priv-who { display:inline-flex; align-items:center; gap:var(--sp-1);
            font-size:var(--fs-12); color:var(--text-2); }
/* 起票者・宛先は外せない（チェックを固定）。押せないことを濃さで示す */
.to-item.is-fixed { background:var(--surface-2); cursor:default; }
.to-item.is-fixed input { cursor:default; }

/* ---------- 📂資料の棚・📝ノート（v7.0 Phase B・_design_v5.md §16） ----------
   新しい色は1つも足さない。棚もノートも**予定（.ev-row）と同じヘアラインの行**で組み、
   案件詳細の中で「カード → ヘアラインの行 → 行を足すボタン」という同じ形を繰り返す。 */

/* 資料の棚。1行＝サムネ（56px）＋添付した人・日付＋消す。20件並んでも背が伸びない */
.shelf-list { display:flex; flex-direction:column; }
.shelf-row {
  display:flex; align-items:center; gap:var(--sp-2);
  border-top:1px solid var(--border); padding:var(--sp-2) 0; min-height:var(--tap);
}
.shelf-row:first-child { border-top:0; }
.shelf-main { flex:1 1 auto; min-width:0; }
/* .att-wrap の既定の上余白は、棚では行の高さを無駄に食うので詰める */
.shelf-main .att-wrap { margin-top:0; }
.shelf-who { display:block; margin-top:2px; font-size:var(--fs-11); color:var(--muted);
             overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ノートの一覧。行＝題／「◯◯ ・ 9/21 14:03 ・ v3」 */
.doc-list { display:flex; flex-direction:column; }
.doc-row {
  display:flex; flex-direction:column; gap:2px; width:100%; text-align:left;
  background:transparent; border:0; border-top:1px solid var(--border);
  padding:var(--sp-2) 0; min-height:var(--tap); cursor:pointer; color:var(--text);
  font-family:inherit; font-size:var(--fs-13);
}
.doc-row:first-child { border-top:0; }
.doc-row:active { transform:translateY(1px); }
.doc-ttl { font-weight:var(--fw-b); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.doc-sub { font-size:var(--fs-11); color:var(--muted); }

/* ノート画面。本文欄は入力で伸びるので min-height だけ決めておく
   （実際の高さはJSが書く。伸びる上限も growTextarea 側で掛ける＝保存ボタンを流さない） */
.doc-body { min-height:200px; }
.doc-meta { margin:var(--sp-2) 0 0; font-size:var(--fs-11); color:var(--muted); }
/* 読み取り専用の本文（履歴の1版・409のときの最新）。改行を保つ＝ノートはプレーンテキスト */
.doc-read {
  white-space:pre-wrap; word-break:break-word; line-height:var(--lh);
  font-size:var(--fs-13); color:var(--text);
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--rad-sm); padding:var(--sp-2) var(--sp-3);
}
/* 履歴の1行。版は等幅で桁をそろえる（v9 と v10 が縦に並んでも読める）。
   ⚠ 1行目の罫線を消すのは **.doc-hlist で囲んだうえでの :first-child**。
     囲まずに :first-of-type にすると、同じ div 階層にいる .card-hd が「最初の div」に
     なってしまい**一度も当たらない**（棚・ノートの一覧と同じく必ず専用の入れ物で囲む）。 */
.doc-hlist { display:flex; flex-direction:column; }
.doc-hrow {
  display:flex; align-items:center; gap:var(--sp-2);
  border-top:1px solid var(--border); padding:var(--sp-1) 0; min-height:var(--tap);
}
.doc-hrow:first-child { border-top:0; }
.doc-hver { flex:0 0 auto; font-size:var(--fs-12); color:var(--text-2); }
.doc-hwho { flex:1 1 auto; min-width:0; font-size:var(--fs-11); color:var(--muted);
            overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 「案件に戻る」の ＞ を ＜ に向ける（戻る用のアイコンを1つ増やさない） */
.ico-back { transform:rotate(180deg); }

/* ---------- 🔒ルーム（v8.0・_design_v5.md §17） ----------
   新しい色は1つも足さない。部屋の区別は**鍵アイコン＋囲み線＋文字**だけで付ける。
   部品はすべて既存の使い回し（帯＝.chip／セグメント＝.pipe／一覧＝.doc-row／顔ぶれ＝.priv-list）。 */

/* 部屋の帯（全体｜🔒部屋…｜＋ルーム）。**横スクロールを許す唯一の例外**
   （クイック返信・@候補と同じ扱い。375pxで部屋が3つ以上あると必ず溢れるため）。 */
.room-band {
  display:flex; gap:var(--sp-1); overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding:0 0 var(--sp-2); margin-bottom:var(--sp-2);
  border-bottom:1px solid var(--border);
}
.room-band .chip { flex:0 0 auto; }
/* 終了した部屋は帯の末尾に薄く出す（消えてはいない、を濃さで示す） */
.room-band .chip.is-dim { color:var(--muted); }
.room-band .chip.is-dim .ico { color:var(--muted); }

/* 見出し行：鍵＋部屋名＋「◯人」。名前が長くても「◯人」は必ず出す（flex:0 0 auto） */
.room-hd { display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-1); }
.room-name { flex:1 1 auto; min-width:0; margin:0; font-size:var(--fs-15); font-weight:var(--fw-b);
             display:flex; align-items:center; gap:var(--sp-1);
             overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.room-hd .btn { flex:0 0 auto; }
/* 「終了」の文字タグ。.lock-badge と同じ寸法（同じ行に並ぶので高さをそろえる） */
.room-tag {
  flex:0 0 auto; display:inline-flex; align-items:center; padding:1px var(--sp-2);
  border-radius:var(--rad-sm); font-size:var(--fs-11); font-weight:var(--fw-b);
  white-space:nowrap; border:1px solid var(--text-2); color:var(--text-2); background:var(--surface);
}
.room-purpose { margin:0 0 var(--sp-2); font-size:var(--fs-12); color:var(--text-2);
                white-space:pre-wrap; word-break:break-word; }
/* 終了した部屋で入力欄の代わりに出す案内（注意書きと同じ形。危険ではないので枠線だけ） */
.room-closed {
  display:flex; align-items:center; gap:var(--sp-2); margin:var(--sp-3) 0 0;
  background:var(--surface-2); border:1px solid var(--border-2); border-radius:var(--rad-sm);
  padding:var(--sp-2) var(--sp-3); font-size:var(--fs-12); color:var(--text-2);
}
/* 案件詳細の「🔒ルーム: ◯◯」（見出しのすぐ下・タップで部屋へ） */
.room-link { display:flex; align-items:center; gap:var(--sp-2); margin:var(--sp-2) 0; }
.room-link .link-box { flex:1 1 auto; min-width:0; margin:0; }
.room-link .btn { flex:0 0 auto; }
/* ホームの「ルーム」の行（.doc-row を使い回す）。
   ⚠ .doc-ttl の ellipsis を殺さないよう、**flex にはしない**（インライン要素のまま並べる）。
   鍵・件数・「終了」は行末に流して、長い部屋名は従来どおり … で切る。 */
.doc-ttl .ico { vertical-align:-3px; margin-right:2px; }
.doc-ttl .chip-n, .doc-ttl .room-tag { margin-left:var(--sp-1); }

/* 「機微情報は書かないでください」等の注意書き。警告なので危険色で固定（§9-2） */
.warn-note { display:flex; align-items:flex-start; gap:var(--sp-2);
             background:var(--surface); border:1px solid var(--border-2);
             border-left:2px solid var(--danger);
             border-radius:var(--rad-sm); padding:var(--sp-2) var(--sp-3);
             font-size:var(--fs-12); color:var(--text-2); line-height:1.5; }
.warn-note .ico { color:var(--danger); }

/* コメント */
.cmt { display:flex; gap:var(--sp-2); align-items:flex-start;
       background:var(--surface); border:1px solid var(--border);
       border-radius:var(--rad-sm); padding:var(--sp-2) var(--sp-3); margin-bottom:var(--sp-1); }
.cmt-body { flex:1 1 auto; min-width:0; }
.cmt-head { font-size:var(--fs-11); color:var(--muted); margin-bottom:2px; }
.cmt-txt { white-space:pre-wrap; word-break:break-word; font-size:var(--fs-13); }

/* ---------- ⚙設定：テーマカラー（_design_v5.md §9-5） ----------
   丸いスウォッチ8つ。**各ボタン自身に data-accent が付いている**ので、
   .theme-dot の background:var(--r) はそのプリセットの色で塗られる
   （JS側に色を書かずに済む＝定義は styles.css の1か所のまま）。 */
.theme-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-2); }
.theme-sw {
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-1);
  min-height:var(--tap); padding:var(--sp-1) 0; border:0; background:transparent;
  color:var(--muted); font-size:var(--fs-11); font-weight:var(--fw-b);
  cursor:pointer; border-radius:var(--rad-sm);
}
/* 44px＝タップ下限そのもの。ここを縮めない（仕様§4-6） */
.theme-dot {
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--tap); height:var(--tap); border-radius:50%;
  background:var(--r); color:var(--on-r);
}
/* 選択中は輪郭＋チェック。未選択でもチェックの領域は残して字の位置をずらさない */
.theme-dot .ico { visibility:hidden; }
.theme-sw.is-on { color:var(--text); }
.theme-sw.is-on .theme-dot { outline:2px solid var(--ink); outline-offset:2px; }
.theme-sw.is-on .theme-dot .ico { visibility:visible; }

/* ---------- ⚙設定：アバターの色（_design_v5.md §10-2） ----------
   テーマカラーのスウォッチ（.theme-grid / .theme-sw）を**そのまま使い回し**、丸だけ
   本物のアバター部品（.ava.pt-*）に差し替える＝設定画面で見えている丸と、名鑑・掲示板に
   出る自分の丸が必ず同じ見た目になる（中身も自分のイニシャル）。
   ⚠ 色の定義は .pt-0〜.pt-11 の1か所だけ。ここにも app.js にも色を書かない。
   ⚠ テーマカラー（アクセント）とは**独立**。ここに --r 系を持ち込まない（§10-3）。 */
.ava-sw { min-width:0; }   /* grid の 1fr の中で、長い氏名が列を押し広げないように */
/* 選択中は .theme-dot と同じ見せ方（輪郭）。中央はイニシャルが入っているのでチェックは出さない */
.ava-sw.is-on .ava { outline:2px solid var(--ink); outline-offset:2px; }
/* 色名と「その色を使っている人」。どちらも1行省略にして12マスの高さを揃える
   （使っている人がいないマスも空行を残す＝行の高さがガタつかない） */
.ava-sw-name, .ava-sw-used {
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ava-sw-used { font-size:var(--fs-10); font-weight:400; color:var(--muted); min-height:1.2em; }

/* ---------- 投稿の種別を選ぶシート ---------- */
.post-picks { display:flex; flex-direction:column; gap:var(--sp-1); margin-top:var(--sp-2); }
.post-pick {
  display:flex; align-items:center; gap:var(--sp-3); width:100%;
  min-height:var(--tap); padding:var(--sp-3) var(--pad-x);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--rad-sm);
  text-align:left; cursor:pointer; color:inherit; font:inherit;
}
.post-pick:active { transform:translateY(1px); }
.post-ico { flex:0 0 auto; color:var(--text-2); display:inline-flex; }
.post-main { display:flex; flex-direction:column; min-width:0; }
.post-main b { font-size:var(--fs-14); }
.post-main span { font-size:var(--fs-11); color:var(--muted); line-height:1.45; }

/* ---------- フィードのフィルタタブ ---------- */
.feed-tabs {
  display:flex; gap:var(--sp-1); margin:var(--sp-2) 0;
  overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:1px;
}
.feed-tab {
  /* 背景を塗らない代わりに高さで詰めたくなるが、**タップ44pxは死守**する（仕様§4-6） */
  flex:0 0 auto; min-height:var(--tap); padding:0 var(--sp-3); border:0; border-bottom:2px solid transparent;
  background:transparent; color:var(--muted);
  font-size:var(--fs-12); font-weight:var(--fw-b); white-space:nowrap; cursor:pointer;
}
/* 選択中は赤の下線（背景は塗らない・_design_v5.md §4） */
.feed-tab.is-on { color:var(--text); border-bottom-color:var(--r); }

/* ---------- 統合フィード ----------
   v5: 「浮いたカードの島」をやめ、**1本のリストをヘアラインで区切る**（_design_v5.md §3）。
   v5 §7: さらに「カードの大きさが不均一」の指摘を受け、**1行を固定高**にした。
   高さは 88px（375px）/ 96px（PC）で、添付の有無・本文の長さで**絶対に変わらない**。 */
.feed-list {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--rad-sm);
  overflow:hidden;
}
.fcard {
  position:relative;
  /* 1列目は 40px のアバター＋自分だけに付く赤いリング(2px)のぶんの余白＝44px。
     40px ちょうどだと overflow:hidden にリングが切られる（実機で確認） */
  display:grid; grid-template-columns:44px minmax(0,1fr) auto auto;
  align-items:center; gap:var(--sp-2);
  height:88px;              /* ← min-height ではなく固定。はみ出しは overflow で隠す */
  padding:10px var(--pad-x); border-bottom:1px solid var(--border); overflow:hidden;
}
.fcard:last-child { border-bottom:0; }
/* 前回見たときより新しい行。左の赤い2pxで示す（NEWの札は出さない＝行を増やさない） */
.fcard.is-new { border-left:2px solid var(--r); padding-left:calc(var(--pad-x) - 2px); }
/* 押せる範囲は**行全体を覆う透明な <button>**。
   中の👍は本物のボタンで入れ子にできないため、この方式にしてある。
   DOM順で後ろにある .fcard-like（position:relative）がこの上に乗るので、👍のクリックは取られない。 */
.fcard-open {
  position:absolute; inset:0; width:100%; height:100%;
  padding:0; border:0; background:transparent; cursor:pointer;
}
/* ⚠ .ava と .fcard-thumb は position:relative なので、そのままだと透明ボタンより**上**に来て
   タップを吸ってしまう（実機のヒットテストで確認）。行のどこを押しても詳細が開くよう、
   この2つはポインタを透過させる（👍だけは position:relative のまま押せる状態を保つ） */
.fcard-ava { display:inline-flex; align-items:center; justify-content:center; pointer-events:none; }
.fcard-thumb { pointer-events:none; }
.fcard-body { display:flex; flex-direction:column; gap:2px; min-width:0; }
/* メタは**1行**（氏名・種別・コメント数・時刻）。溢れたら省略記号で切る */
.fcard-meta { display:flex; align-items:center; gap:var(--sp-1); min-width:0;
              white-space:nowrap; overflow:hidden; }
.fcard-who { flex:0 1 auto; max-width:8em; font-size:var(--fs-12); font-weight:var(--fw-b);
             color:var(--text); overflow:hidden; text-overflow:ellipsis; }
.fcard-time { flex:0 0 auto; margin-left:auto; padding-left:var(--sp-1);
              font-size:var(--fs-11); color:var(--muted); }
/* 見出し＋本文を1つの塊として2行でクランプ（続きはタップで詳細へ） */
.fcard-txt { font-size:var(--fs-13); line-height:var(--lh); color:var(--text-2); word-break:break-word;
             display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.fcard-txt b { color:var(--ink); font-weight:var(--fw-b); margin-right:.4em; }
.fmeta { display:inline-flex; align-items:center; gap:2px; flex:0 0 auto;
         font-size:var(--fs-11); color:var(--muted); }

/* 右端の 56x56 サムネ。画像でもファイルでも同じ枠に収めて行の高さを一定にする */
.fcard-thumb {
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1px; width:56px; height:56px; flex:0 0 auto;
  border:1px solid var(--border); border-radius:var(--rad-sm);
  background:var(--surface-2); color:var(--muted); overflow:hidden;
}
.fcard-thumb img { width:100%; height:100%; object-fit:cover; display:block;
                   opacity:0; transition:opacity var(--tr); }
.fcard-thumb img.is-ready { opacity:1; }
/* 写真ではなく書類だと一目で分かるよう、ファイルのときは面を白のままにする */
.fcard-thumb.is-file { background:var(--surface); }
/* 画像が読めなかったとき（オフライン・セッション切れ）。灰色の空箱のまま放置しない。
   wireFileViews() が img の親（＝この要素）に is-error を付ける */
.fcard-thumb.is-error::after {
  content:"表示不可"; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-10); color:var(--muted); background:var(--surface-2);
}
.fcard-thumb b { font-size:var(--fs-10); font-weight:var(--fw-b); letter-spacing:.02em; }
.thumb-more { position:absolute; right:2px; bottom:2px; padding:0 3px; border-radius:2px;
              background:var(--ink); color:var(--surface); font-size:var(--fs-10); }
/* 👍。position:relative で透明ボタンより上に出す（DOM順でも後ろ） */
.fcard-like {
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:2px;
  min-width:var(--tap); min-height:var(--tap); padding:0 var(--sp-2);
  border:1px solid var(--border); border-radius:var(--rad-sm); background:var(--surface);
  color:var(--muted); font-size:var(--fs-12); cursor:pointer;
}
.fcard-like.is-on { background:var(--surface-2); border-color:var(--border-2); color:var(--text); }
.fcard-like[disabled] { opacity:.45; }

/* 種別バッジ（談話室 / ボックス / 案件 / 商品 / プロフィール）。色分けはしない */
.ftag { display:inline-flex; align-items:center; gap:2px; flex:0 0 auto;
  min-height:16px; padding:0 4px; border-radius:var(--rad-sm);
  font-size:var(--fs-10); font-weight:var(--fw-b); white-space:nowrap;
  background:var(--surface-2); color:var(--muted); }
.ftag .ico { color:var(--muted); }
/* 🔒限定案件の行（v7.0）。狭いフィード行なので**鍵だけ**（文字は入れない）。
   面は塗らず、種別バッジ（.ftag）との違いは「囲みが無い・線だけ」で付ける（§2） */
.flock { display:inline-flex; align-items:center; flex:0 0 auto; color:var(--text-2); }

/* ---------- 📎添付の表示 ---------- */
.att-wrap { margin-top:var(--sp-2); }
/* 一覧カードの中（📦商品カタログ）は 56x56 の小サムネに統一して、
   添付の有無でカードの背が伸び縮みしないようにする（_design_v5.md §7 と同じ考え方）。
   タップで拡大（lightbox）できるのは大きいサムネと同じ。 */
.att-wrap.is-mini .att-imgs, .att-wrap.is-mini .att-imgs.is-grid { display:flex; flex-wrap:wrap; }
.att-wrap.is-mini .att-img { width:56px; height:56px; flex:0 0 auto; aspect-ratio:1/1; max-height:56px; }
.att-imgs { display:grid; grid-template-columns:1fr; gap:var(--sp-1); }
.att-imgs.is-grid { grid-template-columns:repeat(3,1fr); }
.att-imgs.is-grid2 { grid-template-columns:repeat(2,1fr); }
.att-img {
  position:relative; display:block; width:100%; padding:0; overflow:hidden;
  border:1px solid var(--border); border-radius:var(--rad-sm);
  background:var(--surface-2); cursor:zoom-in; aspect-ratio:16/9;
  /* 1枚で画面を食わせない。v4は300pxあり1枚でスクロール1画面ぶんを占めていた */
  max-height:140px;
}
.att-imgs.is-grid .att-img { aspect-ratio:1/1; max-height:96px; }
.att-imgs.is-grid2 .att-img { aspect-ratio:4/3; max-height:110px; }
.att-img img { width:100%; height:100%; object-fit:cover; display:block; opacity:0;
               transition:opacity var(--tr); }
.att-img img.is-ready { opacity:1; }
.att-img.is-error::after { content:"画像を表示できませんでした"; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-11); color:var(--muted); }
.att-files { display:flex; flex-direction:column; gap:var(--sp-1); margin-top:var(--sp-1); }
/* 談話室の吹き出しの中の添付は控えめに（吹き出しが伸びて会話が追えなくなるのを防ぐ） */
.chat-bubble .att-imgs { margin-top:var(--sp-1); }
.chat-bubble .att-img { max-height:120px; }
.att-file, .att-item {
  display:flex; align-items:center; gap:var(--sp-2); width:100%;
  min-height:var(--tap); padding:var(--sp-1) var(--sp-3);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--rad-sm);
  text-align:left; color:inherit; font:inherit;
}
.att-file { cursor:pointer; }
.att-file:active { transform:translateY(1px); }
.att-ico { flex:0 0 auto; color:var(--muted); display:inline-flex; }
.att-main { display:flex; flex-direction:column; min-width:0; flex:1 1 auto; }
.att-name { font-size:var(--fs-12); font-weight:var(--fw-b); color:var(--text);
            overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.att-meta { font-size:var(--fs-11); color:var(--muted); }
.att-dl { flex:0 0 auto; color:var(--muted); display:inline-flex; }
/* v8.1: 動画の添付。カードの形はファイルと同じで、▶ だけ強調（タップで再生＝ダウンロードではない） */
.att-video .att-ico, .att-video .att-dl { color:var(--accent); }
video.lightbox-img { background:#000; width:min(100%, 960px); }
/* is-ng＝アップロードできなかった添付。エラーなので危険色で固定（§9-2） */
.att-item.is-ng { border-color:var(--danger); }
.att-item.is-ng .att-ico { color:var(--danger); }
.att-item.is-ng .att-meta { color:var(--danger-ink); }
.att-item .att-meta { white-space:normal; line-height:1.4; }
.att-pct { flex:0 0 auto; font-size:var(--fs-11); color:var(--muted); }
/* 投稿前に添付を外すボタン。小さく見せたくなるが**タップ44pxは死守**（仕様§4-6） */
.att-x { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
         min-width:var(--tap); min-height:var(--tap); border:0; border-radius:var(--rad-sm);
         background:transparent; color:var(--muted); cursor:pointer; }
.att-bar { display:block; height:3px; margin-top:3px; border-radius:2px;
           background:var(--surface-3); overflow:hidden; }
.att-bar i { display:block; height:100%; background:var(--text-2); transition:width var(--tr-fast); }

/* ---------- 📎添付エディタ（投稿フォーム側） ---------- */
.att-editor { margin-top:var(--sp-1); }
.att-drop {
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2);
  padding:var(--sp-2); border:1px dashed var(--border-2); border-radius:var(--rad-sm);
  background:var(--surface);
}
.att-drop.is-over { border-color:var(--r); border-style:solid; background:var(--r-soft); }
.att-hint { flex:1 1 160px; min-width:0; font-size:var(--fs-11); color:var(--muted); line-height:1.45; }
.att-hint-pc { display:none; }
.att-list { display:flex; flex-direction:column; gap:var(--sp-1); margin-top:var(--sp-1); }

/* ---------- 画像の拡大（#modal とは別の層） ---------- */
.lightbox {
  position:fixed; inset:0; z-index:70; background:var(--overlay-strong);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:var(--sp-4);
}
.lightbox-bar {
  position:absolute; top:0; left:0; right:0;
  display:flex; align-items:center; gap:var(--sp-2);
  /* 上端に貼り付くので、ここもステータスバーぶんを避ける（保存・閉じるが押せなくなる） */
  padding:calc(var(--sp-1) + var(--sa-top)) calc(var(--sp-3) + var(--sa-right)) var(--sp-1) calc(var(--sp-3) + var(--sa-left));
  background:var(--surface); border-bottom:1px solid var(--border);
}
.lightbox-cap { flex:1 1 auto; min-width:0; font-size:var(--fs-12); color:var(--text);
                overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lightbox-img { max-width:100%; max-height:78vh; object-fit:contain;
                border-radius:var(--rad-sm); background:var(--surface); }

/* ---------- 右サイドバー（768px以上でのみ出す） ---------- */
.home-side { display:none; }
.side-card { background:var(--surface); border:1px solid var(--border);
             border-radius:var(--rad-sm); padding:var(--pad-y) var(--pad-x); }
.side-ttl { display:flex; align-items:center; gap:var(--sp-1);
            margin:0 0 var(--sp-2); font-size:var(--fs-12); font-weight:var(--fw-b); color:var(--text-2); }
.side-nums { display:flex; gap:var(--sp-2); }
.side-num { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center;
            font-size:var(--fs-11); color:var(--muted); text-align:center; }
.side-num b { font-size:var(--fs-17); color:var(--text); }
.side-stale { margin-top:var(--sp-2); border-top:1px solid var(--border); }
.side-lbl { display:flex; align-items:center; gap:var(--sp-1);
            margin:var(--sp-2) 0 0; font-size:var(--fs-11); font-weight:var(--fw-b); color:var(--muted); }
.side-empty { margin:var(--sp-2) 0 0; font-size:var(--fs-11); color:var(--muted); line-height:1.5; }
.side-more { margin:var(--sp-1) 0 0; font-size:var(--fs-11); color:var(--muted); }
.side-row {
  display:flex; align-items:center; gap:var(--sp-2); width:100%;
  min-height:var(--tap); padding:var(--sp-1) 0;
  background:transparent; border:0; border-top:1px solid var(--border);
  text-align:left; color:inherit; font:inherit; cursor:pointer;
}
.side-row:first-of-type { border-top:0; }
.side-bar { flex:0 0 auto; width:2px; align-self:stretch; border-radius:1px;
            background:var(--border-2); }
/* 滞留の帯。.turn-card[data-heat="hot"] と同じ意味なので危険色で固定 */
.side-bar[data-heat="hot"] { background:var(--danger); }
.side-row-main { display:flex; flex-direction:column; min-width:0; }
.side-row-ttl { font-size:var(--fs-12); font-weight:var(--fw-b); color:var(--text);
                overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side-row-sub { font-size:var(--fs-11); color:var(--muted); }
.side-members { display:flex; flex-direction:column; }
.side-member {
  display:flex; align-items:center; gap:var(--sp-2); width:100%;
  min-height:var(--tap); padding:2px 0;
  background:transparent; border:0; text-align:left; color:inherit; font:inherit; cursor:pointer;
}
.side-member-name { flex:1 1 auto; min-width:0; font-size:var(--fs-12); color:var(--text);
                    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side-member-pct { flex:0 0 auto; font-size:var(--fs-11); color:var(--muted); }
.side-foot { margin:var(--sp-2) 0 0; font-size:var(--fs-10); color:var(--muted); line-height:1.45; }
.side-all { width:100%; margin-top:var(--sp-2); }

/* =========================================================================
   広い画面（_design_v5.md §3「PC幅はフィードを2カラム」）
   ========================================================================= */
@media (min-width:600px) {
  #main { padding-top:var(--sp-4); }
  #main > section { padding:0 var(--sp-5); }
  .kpi-rail { grid-template-columns:repeat(4,1fr); }
  .modal { align-items:center; }
  .modal-sheet { border-radius:var(--rad-md); }
  .modal-hdr { border-radius:var(--rad-md) var(--rad-md) 0 0; }
  .att-hint-pc { display:inline; }
}

@media (min-width:768px) {
  /* ホームだけ広く使う。他のタブは 720px の1カラムのまま */
  #main { max-width:1040px; }
  #view-members, #view-cases, #view-ideas, #view-stats, #view-settings {
    max-width:var(--maxw); margin:0 auto;
  }
  .home-cols { display:grid; grid-template-columns:minmax(0,1fr) 280px;
               gap:var(--sp-5); align-items:start; }
  .home-main { min-width:0; }
  .home-side { display:flex; flex-direction:column; gap:var(--sp-2);
               position:sticky; top:calc(var(--hdr-total) + var(--sp-3)); }
  /* フィードを2カラムにして情報量を倍にする。
     minmax(0,1fr) にしないと、長い語を含む側の min-content 幅で列がずれる（実測で左右が356/424pxに） */
  .feed-list { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; }
  .fcard { height:96px; }        /* PCは1行96px（_design_v5.md §7-1） */
  .fcard:nth-child(odd) { border-right:1px solid var(--border); }
  /* グリッドでは :last-child の1本だけ消しても最終行の相方が残るので、最後の2枚を対象にする */
  .fcard:last-child, .fcard:nth-last-child(2):nth-child(odd) { border-bottom:0; }

  /* 一覧カードもPCは2カラム。grid-auto-rows:1fr で**左右の高さを必ず揃える**（§7-2） */
  .card-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
               gap:var(--sp-2); grid-auto-rows:1fr; }
  .card-grid > .card { margin-bottom:0; }
}