/* M-Ads（Advertising AX）
 *
 * レイアウトの寸法・フォント・配色の枠組みは ax-malasada の public/styles/base.css に
 * 完全に揃えている（--header-h / --sidebar-w / Noto Sans JP / カード角丸12px 等）。
 * POKI > マラサダ > M-Ads で社内ポータルとしての統一感を出すため、値を勝手に変えないこと。
 * 差別化はアクセント色だけ（マラサダ=オレンジ #d97706 / M-Ads=ティール #0b7e9c）。
 */

/* ===== CSS Variables & Theme（マラサダ base.css と同じ変数名・同じ役割） ===== */
:root {
  --accent: #0b7e9c;
  --accent-soft: rgba(11, 126, 156, 0.12);
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-header: linear-gradient(180deg, #ffffff 0%, #f4f5f7 100%);
  --text: #1f2430;
  --text-sub: #6b7280;
  --border: #e4e6eb;
  --border-strong: #d1d5db;
  --status-active: #22c55e;
  --status-dev: #eab308;
  --status-plan: #9ca3af;
  --good: #15803d;
  --bad: #dc2626;
  --warn: #b45309;
  --shadow: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-hover: 0 6px 20px rgba(11, 126, 156, 0.14);
  --header-h: 60px;
  --sidebar-w: 260px;
}
[data-theme="dark"] {
  --bg: #0f1115;
  --surface: #1a1d25;
  --surface-header: linear-gradient(180deg, #1a1d25 0%, #161920 100%);
  --text: #e5e7eb;
  --text-sub: #9ca3af;
  --border: #2a2e38;
  --border-strong: #3a3f4c;
  --good: #4ade80;
  --bad: #f87171;
  --warn: #fbbf24;
  --shadow: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-hover: 0 6px 20px rgba(11, 126, 156, 0.22);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
/* ⚠️ 消さないこと（2026-08-27 実害修正）
 * iOS Safari / WKWebView（スマホのPWA含む）は「テキスト自動拡大(Text Boosting)」という
 * 独自機能を持ち、ビューポートより横に広いブロック（= .mad-tblwrap / .mad-ad-table-wrap の
 * 中の横スクロールする表など）に入っている文字を、CSSの指定を無視して勝手に拡大する。
 * その結果、スマホでだけ「表の中の文字が見出しより大きい」という不揃いが起きていた
 * （実機スクショで確認：経路別ダッシュボードの獲得内訳テーブル）。Chrome(PC)では
 * 再現しないため、PCの表示確認だけでは絶対に気付けない。
 * この1行でCSSの指定どおりのサイズに固定する。指定を消すと全画面で症状が再発する。 */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}
button { font-family: inherit; cursor: pointer; }

/* ===== Auth Overlay（ax-malasada base.css の .auth-* と同じ構造・.mad- プレフィックス） ===== */
.mad-auth-overlay {
  position: fixed; inset: 0;
  background: var(--bg);
  display: none;
  align-items: center; justify-content: center;
  z-index: 1000;
}
.mad-auth-overlay.active { display: flex; }
.mad-auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px 36px;
  width: min(92vw, 400px);
  text-align: center;
  box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}
.mad-auth-logo {
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
  margin-bottom: 20px;
}
.mad-auth-logo-img { width: 72px; height: 72px; object-fit: contain; flex-shrink: 0; }
.mad-auth-logo-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.mad-auth-logo-main { font-size: 32px; font-weight: 700; letter-spacing: 1px; color: var(--text); }
.mad-auth-logo-sub { font-size: 11px; font-weight: 500; color: var(--text-sub); letter-spacing: 0.3px; margin-top: 4px; }
.mad-auth-msg { color: var(--text-sub); margin-bottom: 24px; }
.mad-auth-btn {
  background: var(--accent); color: #fff; border: none;
  padding: 12px 28px; border-radius: 8px; font-weight: 600;
  cursor: pointer; font-size: 14px;
  transition: opacity 0.15s;
}
.mad-auth-btn:hover { opacity: 0.9; }
.mad-auth-err { color: var(--bad); margin-top: 12px; font-size: 13px; min-height: 1em; }

/* ===== Header ===== */
.mad-header {
  position: fixed; top: 0; left: 0; right: 0; height: var(--header-h);
  background: var(--surface-header);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 20px;
  z-index: 100;
  gap: 16px;
}
/* 2026-08-22 検収指摘（重大1/2と同根）: display:flexが[hidden]のUAスタイルを上書きする。
   現状はauth.jsのshowOverlay()中は.mad-auth-overlay（z-index:1000・不透明）がこの上に
   被さるため症状は出ていないが、同じ罠を残さないため.mad-toast[hidden]と同じ作法で明示する。 */
.mad-header[hidden] { display: none; }
.mad-hamburger {
  background: none; border: none; cursor: pointer;
  padding: 8px; border-radius: 8px;
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
  /* #74（P1束H）: アイコン（svg 22px）とpadding(8px)自体のサイズは変えず、タップ領域だけ
     44px以上にする。サービス切替の起点をボトムタブへ移すのは5枠が埋まっているため見送り
     （親の裁定）。⚠️ 常時の見た目（未操作時）は1pxも変わらないが、:hoverの塗り
     （background:var(--border)）はmin-width/min-height分だけ面積が広がる
     （レビュー指摘・実態は「視覚サイズが不変」ではない）。 */
  min-width: 44px; min-height: 44px;
}
.mad-hamburger:hover { background: var(--border); }
.mad-hamburger svg { width: 22px; height: 22px; }
.mad-logo { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.mad-logo-img { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }
.mad-logo-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.mad-logo-main { font-size: 20px; font-weight: 700; letter-spacing: 0.8px; color: var(--text); }
.mad-logo-sub { font-size: 10px; font-weight: 500; color: var(--text-sub); letter-spacing: 0.3px; margin-top: 2px; }

.mad-header-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.mad-theme-toggle {
  background: none; border: 1px solid var(--border);
  cursor: pointer; padding: 6px; border-radius: 999px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text);
  transition: border-color 0.15s;
}
.mad-theme-toggle:hover { border-color: var(--accent); }
.mad-theme-toggle .icon-dark, .mad-theme-toggle .icon-light { width: 16px; height: 16px; }
[data-theme="dark"] .mad-theme-toggle .icon-light { display: none; }
[data-theme="light"] .mad-theme-toggle .icon-dark,
:root:not([data-theme="dark"]) .mad-theme-toggle .icon-dark { display: none; }
.mad-user-email {
  font-size: 13px; color: var(--text-sub);
  white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis;
}

/* ===== Sidebar ===== */
.mad-sidebar {
  position: fixed; top: var(--header-h); left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--surface-header);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  transform: translateX(0);
  transition: transform 0.25s ease;
  z-index: 50;
  padding: 16px 0;
}
.mad-sidebar.closed { transform: translateX(-100%); }
.mad-nav-zone { padding: 6px 0 10px; margin: 4px 8px 10px; }
.mad-nav-zone-tools { border-top: 1px solid var(--border); }
.mad-nav-group { padding: 0 8px; margin-bottom: 4px; }
.mad-nav-section-label {
  font-size: 0.95rem; font-weight: 700; color: var(--text);
  padding: 10px 14px 4px; letter-spacing: 0.4px;
}
.mad-nav-section-label span {
  display: inline;
  background: linear-gradient(transparent 55%, color-mix(in srgb, var(--accent) 35%, transparent) 55%);
}
.mad-nav-zone-hint { font-size: 11px; color: var(--text-sub); padding: 4px 14px 0; line-height: 1.4; }
.mad-nav-item {
  display: flex; align-items: center;
  width: 100%;
  background: none; border: none;
  padding: 8px 12px; border-radius: 8px;
  color: var(--text);
  text-align: left;
  font-size: 13px; font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.mad-nav-item:hover { background: var(--accent-soft); color: var(--accent); }
.mad-nav-item.is-active {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent); font-weight: 600;
}

/* ===== Main ===== */
.mad-main {
  margin-left: var(--sidebar-w);
  padding: calc(var(--header-h) + 28px) 28px 40px;
  transition: margin-left 0.25s ease;
  min-height: 100vh;
}
.mad-main.expanded { margin-left: 0; }
.mad-sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 40; }
.mad-sidebar-overlay.show { display: block; }

.mad-page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.mad-page-title { font-size: 22px; font-weight: 700; margin: 0; letter-spacing: 0.2px; }
/* 全画面共通「戻る」ボタン（2026-08-29）。表示・遷移先はapp.js updateBackButton()が決める。
   親画面が無い（ボトムタブのトップ階層）画面ではhiddenになる。 */
.mad-page-head-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mad-back-btn {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  background: none; border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 14px 6px 11px; font-size: 12.5px; font-weight: 600; color: var(--text-sub);
  cursor: pointer; white-space: nowrap; transition: border-color 0.15s, color 0.15s;
}
.mad-back-btn:hover { border-color: var(--accent); color: var(--accent); }
/* display:inline-flexが[hidden]のUAスタイルを上書きするため明示する（mad.css:115等と同じ罠） */
.mad-back-btn[hidden] { display: none; }
/* 基準期間バッジ（P0-4）: サマリー=全期間累計／ホーム=今期／Meta広告=期間トグルに追随、を
   画面タイトル横に明示する（藤山さん指摘：基準が混ざっていることが利用者に見えていなかった） */
.mad-title-badge {
  display: inline-block; margin-left: 10px; vertical-align: 2px;
  font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 10px;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent);
}
/* 「この画面はサービス切替と連動しない」ことをタイトル横で明示する（設定・チャネル管理）。
   基準期間バッジ（アクセント色）と役割が違うので中間色にして混同させない */
.mad-title-scope {
  display: inline-block; margin-left: 10px; vertical-align: 2px;
  font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 10px;
  background: color-mix(in srgb, var(--text-sub) 16%, transparent); color: var(--text-sub);
}
.mad-page-right { display: flex; align-items: center; gap: 14px; }
.mad-freshness { font-size: 11.5px; color: var(--text-sub); text-align: right; line-height: 1.4; }
.mad-freshness b { color: var(--text); font-weight: 600; }
.mad-period { display: flex; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.mad-period button {
  border: none; background: none; padding: 5px 16px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--text-sub);
}
.mad-period button.is-active { background: var(--accent); color: #fff; }
/* M1/M2（P1束Hレビュー・2026-09-03）: #mad-view-period のボタン群は views.js
   homePeriodButtonsHtml/summaryPeriodButtonsHtml が .mad-view-period-chips で包んで返す。
   PCでは display:contents でボックス自体を消し、中のbuttonが直接 .mad-period の
   flexアイテムになる＝見た目は1pxも変わらない。SPだけこの箱を実体化して横スクロール行にする
   （@media (max-width: 900px) 側の上書きを参照）。 */
.mad-view-period-chips { display: contents; }
.mad-view { max-width: 1200px; }

/* ===== Cards / Panels（マラサダ .card と同じ角丸12px・同じ枠線と影） ===== */
.mad-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 20px; }
.mad-kpi {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 18px; box-shadow: var(--shadow);
}
.mad-kpi .k { font-size: 12px; color: var(--text-sub); font-weight: 600; }
.mad-kpi .v { font-size: 24px; font-weight: 700; margin-top: 4px; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.mad-kpi .v small { font-size: 13px; font-weight: 600; margin-left: 2px; }
.mad-kpi .d { font-size: 11.5px; margin-top: 3px; font-weight: 600; display: block; }
.mad-kpi .d.up { color: var(--good); } .mad-kpi .d.down { color: var(--bad); } .mad-kpi .d.flat { color: var(--text-sub); }

.mad-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 20px; margin-bottom: 20px; box-shadow: var(--shadow);
}
.mad-panel h3 {
  font-size: 15px; font-weight: 600; margin: 0 0 12px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.mad-panel h3 .hint { font-size: 11.5px; color: var(--text-sub); font-weight: 400; }

.mad-chart svg { width: 100%; height: auto; display: block; }
.mad-legend { display: flex; gap: 16px; font-size: 11.5px; color: var(--text-sub); margin-top: 6px; }
.mad-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

/* ===== Table ===== */
/* 横スクロール可能なことをCSSのみで示す影（元は.mad-daily-tblwrap限定だったものを全表に適用。
   P0-2: マトリクス表など横に長い表がスマホで見切れても気づけるようにする） */
.mad-tblwrap {
  overflow-x: auto;
  background:
    linear-gradient(to right, var(--surface) 30%, rgba(255,255,255,0)) left,
    linear-gradient(to left, var(--surface) 30%, rgba(255,255,255,0)) right,
    radial-gradient(farthest-side at left, rgba(0,0,0,.16), rgba(0,0,0,0)) left,
    radial-gradient(farthest-side at right, rgba(0,0,0,.16), rgba(0,0,0,0)) right;
  background-repeat: no-repeat;
  background-color: var(--surface);
  background-size: 24px 100%, 24px 100%, 10px 100%, 10px 100%;
  background-attachment: local, local, scroll, scroll;
}
table.mad-tbl { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
.mad-tbl th {
  font-size: 11.5px; color: var(--text-sub); text-align: right;
  padding: 8px 10px; border-bottom: 1px solid var(--border-strong); font-weight: 600;
}
.mad-tbl th:first-child, .mad-tbl td:first-child { text-align: left; }
.mad-tbl td { padding: 10px; border-bottom: 1px solid var(--border); text-align: right; font-variant-numeric: tabular-nums; }
.mad-tbl tr:hover td { background: var(--accent-soft); }
.mad-tbl td .sub, .mad-tbl th .sub { display: block; font-size: 11px; color: var(--text-sub); font-weight: 400; }
.mad-tbl tr.mad-grp td { background: var(--bg); font-weight: 700; }

/* ===== 横断ボード（S1） ===== */
.mad-portfolio-row { cursor: pointer; }
.mad-portfolio-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mad-portfolio-cpa-bar {
  display: inline-block; width: 56px; height: 6px; margin-left: 8px; vertical-align: middle;
  background: var(--border); border-radius: 3px; overflow: hidden;
}
.mad-portfolio-cpa-bar span { display: block; height: 100%; background: var(--accent); }

/* ===== Pills / Badges ===== */
.mad-pill { display: inline-block; border-radius: 999px; padding: 2px 11px; font-size: 11px; font-weight: 600; }
.mad-pill.on { background: color-mix(in srgb, var(--status-active) 16%, transparent); color: var(--good); }
.mad-pill.off { background: color-mix(in srgb, var(--status-plan) 18%, transparent); color: var(--text-sub); }
.mad-pill.ng { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }
.mad-pill.warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }

/* ★E-04（2026-08-31）: 型カタログ画面（studio-pattern-catalog.js）用の最小限のテーブル装飾。 */
.mad-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mad-table th, .mad-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line, #ccc); vertical-align: top; }
.mad-table th { font-weight: 700; }
.mad-phase {
  display: inline-block; border-radius: 6px; padding: 1px 8px; font-size: 10.5px; font-weight: 600;
  background: color-mix(in srgb, var(--status-dev) 20%, transparent); color: var(--warn);
  margin-left: 6px; vertical-align: 1px;
}
.mad-phase.go { background: color-mix(in srgb, var(--status-active) 16%, transparent); color: var(--good); }
.mad-src-link { color: var(--accent); font-weight: 600; text-decoration: none; }
.mad-src-link:hover { text-decoration: underline; }

/* Meta API実績（シート由来と別ソースであることが一目で分かるバッジ。テイスト崩さずwarnトークン流用） */
.mad-src-badge {
  display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 10.5px; font-weight: 600;
  background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn);
  margin-left: 8px; vertical-align: 1px;
}
.mad-cpa-ok { color: var(--good); font-weight: 700; }
.mad-cpa-ng { color: var(--bad); font-weight: 700; }

.mad-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.mad-count { font-size: 12px; color: var(--text-sub); }
.mad-toolbar .spacer { flex: 1; }

/* ===== 異常検知バナー（Meta広告タブ最上部・spec §4） ===== */
.mad-banner {
  display: flex; gap: 10px; align-items: flex-start;
  background: color-mix(in srgb, var(--bad) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 20px;
}
/* 2026-08-22 検収指摘（重大1・blocker）: display:flexが[hidden]のUAスタイル(display:none)を
   上書きしていたため、app.js updateDegradedBanner()のel.hidden=trueが効かず、平常時も
   このバナーが表示され続けていた（R-02＝事実と違う表示・常時警告は無視される化）。
   .mad-toast[hidden]と同じ作法で明示的に戻す。 */
.mad-banner[hidden] { display: none; }
.mad-banner-icon { font-size: 18px; line-height: 1.3; color: var(--bad); }
.mad-banner-body { font-size: 13px; color: var(--text); line-height: 1.7; }
.mad-banner-body div { font-weight: 600; }

/* P1-2: 取込ステータスバッジ（ホーム最上部・常設）。正常時は控えめな緑ライン、
   異常時（24時間以上取込なし・データ取得失敗）は既存の.mad-bannerを流用して赤で目立たせる。 */
.mad-ingest-banner .mad-banner-icon { color: var(--bad); }
.mad-ingest-ok {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; color: var(--good);
  background: color-mix(in srgb, var(--good) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--good) 30%, transparent);
  border-radius: 999px; padding: 6px 14px; margin-bottom: 20px; width: fit-content;
}
/* 2026-08-22: Meta未出稿サービス（例: 融資情報ジャーナル）のホーム最上部に出す中立の状態表示。
   「正常（緑）」でも「異常（赤）」でもない＝準備中なので、控えめなグレー系で出す */
.mad-ingest-none {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--text-sub);
  background: color-mix(in srgb, var(--text-sub) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--text-sub) 22%, transparent);
  border-radius: 999px; padding: 6px 14px; margin-bottom: 20px; width: fit-content;
}
/* ===== 折りたたみ（<details>/<summary>）の見た目の言語（2026-08-27 統一③-b） =====
 * mad-ad-basis-note / mad-lag-detail / mad-verdict-why / mad-home-inputhealth / mad-home-t2 /
 * mad-glossary / mad-gtip / mad-ccard-daily / mad-cdetails / mad-action-how が
 * それぞれ別々に cursor・list-style・矢印マーカーを実装しており、▶/▼ と ▽/▼、
 * さらにブラウザ既定マーカーが混在していた（docs/mobile-ux-redesign.md §6-⑥）。
 * cursor・ブラウザ既定マーカーの除去・矢印記号（▶/▼）はこの .mad-fold 1箇所に集約し、
 * 上記の個別クラスは class="mad-fold mad-xxx" として併記する。
 * ⚠️ 幅・余白・枠線・背景・summaryの文字サイズ/色などレイアウト固有の指定は、
 *   崩れを避けるため個別クラス側にそのまま残す（消さない）。 */
.mad-fold summary {
  cursor: pointer;
  list-style: none;
}
.mad-fold summary::-webkit-details-marker { display: none; }
.mad-fold summary::before {
  content: '▶ ';
  font-size: 10px;
  display: inline-block;
}
.mad-fold[open] summary::before { content: '▼ '; }

/* 2026-08-22: ヘッダー鮮度表示のMeta遅延警告の折り畳み詳細（要旨1文＋詳細は開いたら読む） */
.mad-lag-detail { margin-top: 2px; color: var(--warn); font-size: 12px; }
.mad-lag-detail summary { font-weight: 700; }

/* シート入力の点検：差が大きい行を警告色に */
table.mad-tbl tr.mad-warn td { background: color-mix(in srgb, var(--warn) 12%, transparent); }

/* ===== 「今日やるべきこと」アクションリスト（Meta広告タブ上部・4周目A） ===== */
.mad-actions { border-color: var(--accent); }
.mad-action-group { margin-bottom: 16px; }
.mad-action-group:last-child { margin-bottom: 0; }
.mad-action-group-label {
  display: inline-block; font-size: 12.5px; font-weight: 700; padding: 3px 12px;
  border-radius: 999px; margin-bottom: 8px;
}
.mad-action-group-label.bad { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }
.mad-action-group-label.good { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); }
.mad-action-group-label.warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.mad-action-group-label.muted { background: color-mix(in srgb, var(--status-plan) 18%, transparent); color: var(--text-sub); }
.mad-action-item {
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px;
  margin-bottom: 8px; background: var(--bg);
}
.mad-action-item:last-child { margin-bottom: 0; }
.mad-action-target { font-size: 13.5px; font-weight: 700; }
.mad-action-reason { font-size: 12.5px; color: var(--text-sub); margin-top: 2px; }
.mad-action-next { font-size: 12.5px; color: var(--accent); font-weight: 600; margin-top: 4px; line-height: 1.6; }

/* ===== 日別データテーブル＋CSV（Meta広告タブ下部・4周目B） ===== */
.mad-daily-controls { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.mad-daily-toggle { font-size: 12.5px; font-weight: 600; color: var(--text-sub); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.mad-csv-btn { padding: 7px 16px; font-size: 12.5px; }
.mad-daily-unentered { color: var(--warn); font-weight: 600; }
/* 影の型自体は .mad-tblwrap（上部）に統合済み。.mad-daily-tblwrap は常に .mad-tblwrap と
   併記されるクラスのため、ここでは追加スタイルなし（P0-2で全表に適用したため重複削除） */

/* ===== 用語集（Meta広告・クリエイティブ下部・4周目C） ===== */
.mad-glossary { margin-top: 20px; border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--surface); }
.mad-glossary summary { font-size: 13px; font-weight: 700; color: var(--accent); }
.mad-glossary-list { margin: 12px 0 0; }
.mad-glossary-list dt { font-size: 12.5px; font-weight: 700; margin-top: 10px; }
.mad-glossary-list dt:first-child { margin-top: 0; }
.mad-glossary-list dd { font-size: 12px; color: var(--text-sub); margin: 2px 0 0; line-height: 1.6; }

/* ===== 今すぐ更新（接続・データソースタブ） ===== */
.mad-refresh-row { display: flex; align-items: center; gap: 12px; margin: 14px 0; flex-wrap: wrap; }
.mad-refresh-btn {
  background: var(--accent); color: #fff; border: none; border-radius: 999px;
  padding: 9px 22px; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.mad-refresh-btn:hover:not(:disabled) { opacity: 0.9; }
.mad-refresh-btn:disabled { opacity: 0.55; cursor: default; }
.mad-note-inline { font-size: 11.5px; color: var(--text-sub); }

/* ===== Creative gallery（クリエイティブ画面 2026-08-07 再設計。docs/creative-ui-spec.md §3） ===== */
.mad-bar { height: 7px; background: var(--bg); border-radius: 999px; overflow: hidden; }
.mad-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }

/* クリエイティブ画面だけ右にプレビュー枠を並べるため横幅を広げる（app.js側でtoggle。viewHome/viewMetaは不変） */
.mad-view.mad-view--wide { max-width: 1560px; }

.mad-creatives-layout { display: flex; align-items: flex-start; gap: 24px; }
.mad-creatives-main { flex: 1; min-width: 0; }

/* 結論バー（spec §3①）: 数字＋示唆の一文を必ず出す */
.mad-conclusion-text { font-size: 14px; font-weight: 700; line-height: 1.8; }
.mad-conclusion-note { font-size: 11px; color: var(--text-sub); margin-top: 6px; }

/* フィルタ＆並び順（spec §3③） */
.mad-ctoolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
/* P1-3（390px幅確認で発覚）: 4つのボタン（直近30日/直近3ヶ月/今期（2026年）/全期間）が
   1行に収まらない狭い画面で、pill型の背景ごと横にはみ出しページ全体の横スクロールを
   引き起こしていたため折り返しを許可する（デスクトップでは1行に収まるため見た目は変わらない） */
.mad-cfilter { display: flex; flex-wrap: wrap; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.mad-cfilter-btn { border: none; background: none; padding: 6px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--text-sub); white-space: nowrap; }
.mad-cfilter-btn.is-active { background: var(--accent); color: #fff; }
.mad-csort-label { font-size: 12px; color: var(--text-sub); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.mad-csort { border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; background: var(--surface); color: var(--text); font-family: inherit; }

/* カードグリッド（spec §3④）: align-items:start で画像比率違いによる高さズレを崩れに見せない */
.mad-ccard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; align-items: start; }
.mad-ccard {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; display: flex; flex-direction: column; text-align: left;
  box-shadow: var(--shadow); cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.mad-ccard:hover { border-color: var(--accent); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.mad-ccard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mad-ccard.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), var(--shadow-hover); }

/* 見切れゼロ（要件1）: object-fit:contain + 実アスペクト比（imageWidth/imageHeightから算出、無ければ1:1） */
.mad-ccard-img-wrap { width: 100%; background: var(--bg); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
/* P1-3（Round18・デザイナー提案）: object-fit:containで生まれる余白を、同じ画像をぼかして
   背面に敷くことで埋める。data-image属性が同じため getCreativeImageUrl() のPromiseキャッシュを
   共有し、追加のネットワーク取得は発生しない（views.js attachCreativeImages参照）。
   scale(1.12)はblur(20px)で縮む見かけの縁を隠すため。opacityを抑えて過度に派手にしない。
   ⚠️ この拡大は .mad-ccard-img-wrap の overflow:hidden で切り取られる前提。wrap側の
   overflow を外すとカード外へ本当にはみ出すので外さないこと。なお getBoundingClientRect() は
   transform後の見かけの箱を返すため、この要素だけ測ると常にwrapより一回り大きく出るが、
   実際には切り取られていてページの横スクロールは発生しない（2026-08-21 実測で確認）。 */
.mad-ccard-img-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: blur(20px); transform: scale(1.12);
  opacity: 0; transition: opacity 0.2s; z-index: 0;
}
.mad-ccard-img-bg.is-loaded { opacity: .5; }
.mad-ccard-img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.2s; }
.mad-ccard-img.is-loaded { opacity: 1; }
.mad-ccard-noimg { font-size: 11.5px; color: var(--text-sub); font-weight: 600; padding: 30px 0; }
.mad-ccard-img-wrap.is-error::after {
  content: '画像取得失敗'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; color: var(--bad); background: var(--bg);
}
.mad-badge-lowres {
  position: absolute; top: 6px; right: 6px; z-index: 1;
  font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px;
  background: rgba(0, 0, 0, 0.65); color: #fff;
}
.mad-ccard-body { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.mad-ccard-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.mad-ccard-adset { font-size: 11px; color: var(--text-sub); }
.mad-ccard-name { font-size: 13.5px; font-weight: 700; line-height: 1.4; }

/* 主要指標=獲得単価を1つに絞って大きく出す（6指標が均等で優先順位が無い問題への対処） */
.mad-ccard-primary { background: var(--bg); border-radius: 8px; padding: 10px 12px; }
.mad-ccard-primary .l { font-size: 10.5px; color: var(--text-sub); font-weight: 600; }
.mad-ccard-primary .v { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 2px; }
.mad-ccard-diff { display: block; font-size: 11px; font-weight: 700; margin-top: 2px; }
.mad-ccard-diff.good { color: var(--good); }
.mad-ccard-diff.bad { color: var(--bad); }
.mad-ccard-diff.muted { color: var(--text-sub); font-weight: 600; }
/* Metaピクセル計測の参考値（獲得単価の下に小さく1行、主要指標を邪魔しない） */
.mad-ccard-refmeta { font-size: 10.5px; color: var(--text-sub); margin-top: 4px; }

.mad-ccard-secondary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; text-align: center; }
.mad-ccard-secondary .l { font-size: 9.5px; color: var(--text-sub); font-weight: 600; }
.mad-ccard-secondary .n { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }

.mad-ccard-copy { font-size: 11.5px; color: var(--text-sub); line-height: 1.55; }
.mad-ccard-copy .t { font-weight: 700; color: var(--text); margin-bottom: 2px; }
.mad-ccard-copy .b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-clamp: 2; overflow: hidden; }
.mad-ccard-dest { font-size: 11px; color: var(--text-sub); }

/* 通算CPA（シート正）／直近7日CPA（Meta計測・参考）の常時併記（藤山AX指示・クリエイティブ画面改修）。
   期間トグルの選択状態に関わらず、この2本だけは常にカードに出す。既存.mad-ccard-secondaryと
   同じl/nトークンの流儀を踏襲しつつ、2列にして見分けやすくする */
.mad-ccard-cpa-compare {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
  background: var(--bg); border-radius: 8px; padding: 8px 10px;
}
.mad-ccard-cpa-compare .item { display: flex; flex-direction: column; gap: 2px; }
.mad-ccard-cpa-compare .l { font-size: 9.5px; color: var(--text-sub); font-weight: 600; }
.mad-ccard-cpa-compare .v { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* カード内・日別推移テーブル（藤山AX指示・クリエイティブ画面改修）。.mad-glossaryと同じ
   details/summaryの▶/▼流儀を踏襲し、中身は既存の.mad-tblwrap/.mad-tblをそのまま再利用する */
.mad-ccard-daily { margin-top: 2px; }
.mad-ccard-daily summary {
  font-size: 11.5px; font-weight: 700; color: var(--accent);
}
.mad-ccard-daily .mad-tblwrap { margin-top: 8px; border-radius: 8px; }
.mad-ccard-daily-tbl { font-size: 11px; }
.mad-ccard-daily-tbl th, .mad-ccard-daily-tbl td { padding: 6px 8px; }
/* 表示期間合計行（藤山AX指示・2026-08-19最終改訂: 正=ax-forms ÷ 消化額の「実質CPA」注記） */
.mad-ccard-daily-total td { font-size: 11px; opacity: .85; border-top: 1px solid var(--border); }

/* ===== 訴求グループビュー（P1-1・Round18）。同じ訴求文＋画像違いのA/Bを横並びで比較する ===== */
.mad-appeal-group-copy-t { font-size: 14px; font-weight: 700; margin-top: 4px; }
.mad-appeal-group-copy-b { font-size: 12.5px; color: var(--text-sub); line-height: 1.6; margin-top: 4px; white-space: pre-wrap; }
.mad-appeal-group-items { display: flex; gap: 14px; overflow-x: auto; padding: 14px 2px 4px; }
.mad-appeal-item {
  flex: 0 0 180px; text-align: left; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg); padding: 10px; display: flex; flex-direction: column; gap: 6px; cursor: pointer;
}
.mad-appeal-item.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.mad-appeal-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mad-appeal-item-imgwrap {
  width: 100%; aspect-ratio: 1 / 1; background: var(--surface); border-radius: 8px;
  display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative;
}
.mad-appeal-item-img-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(16px); transform: scale(1.12); opacity: 0; transition: opacity .2s; z-index: 0; }
.mad-appeal-item-img-bg.is-loaded { opacity: .5; }
.mad-appeal-item-img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .2s; }
.mad-appeal-item-img.is-loaded { opacity: 1; }
.mad-appeal-item-name { font-size: 11.5px; font-weight: 700; line-height: 1.4; }
.mad-appeal-item-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.mad-appeal-item-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; }
.mad-appeal-item-metrics .l { font-size: 9.5px; color: var(--text-sub); font-weight: 600; display: block; }
.mad-appeal-item-metrics .n { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; display: block; }

/* ===== スマホ実機プレビュー（要件2・spec §3⑤）。端末フレームはCSSのみで再現 ===== */
.mad-preview-panel {
  width: 340px; flex-shrink: 0; position: sticky; top: calc(var(--header-h) + 28px);
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px; box-shadow: var(--shadow);
}
.mad-preview-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mad-preview-title { font-size: 13.5px; font-weight: 700; }
.mad-preview-close { display: none; background: none; border: none; font-size: 22px; line-height: 1; color: var(--text-sub); cursor: pointer; padding: 2px 6px; }
.mad-preview-tabs { display: flex; gap: 6px; background: var(--bg); border-radius: 999px; padding: 3px; margin-bottom: 14px; }
.mad-preview-tab { flex: 1; border: none; background: none; padding: 6px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--text-sub); }
.mad-preview-tab.is-active { background: var(--accent); color: #fff; }
.mad-preview-selected-name { font-size: 11px; color: var(--text-sub); margin-top: 10px; text-align: center; }
/* 広告アカウント名≠Facebookページ名である旨の注記（推測でページ名を書かないための断り書き） */
.mad-preview-account-note { font-size: 10.5px; color: var(--text-sub); margin-top: 10px; line-height: 1.5; }
.mad-preview-empty { font-size: 12px; color: var(--text-sub); text-align: center; padding: 30px 0; }

/* 端末フレーム: 角丸36px・ノッチ・影。外部画像は使わずCSSのみ */
.mad-phone { background: #000; border-radius: 36px; padding: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.mad-phone-notch { width: 90px; height: 18px; background: #000; border-radius: 0 0 12px 12px; margin: 0 auto; position: relative; top: 0; }
.mad-phone-screen { background: #fff; border-radius: 24px; overflow: hidden; min-height: 420px; max-height: 70vh; overflow-y: auto; margin-top: -6px; }

/* フィード投稿の再現は実機と同じ見え方を優先し、サイトのライト/ダークトークンに依存しない固定色を使う */
.mad-fbpost, .mad-igpost { font-size: 12px; color: #050505; }
.mad-fbpost-head, .mad-igpost-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.mad-fbpost-avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0;
}
.mad-fbpost-who .n, .mad-igpost-head .n { font-weight: 700; font-size: 12.5px; }
.mad-fbpost-who .s { font-size: 11px; color: #65676b; }
.mad-igpost-head .sponsored { font-size: 10.5px; color: #8e8e8e; margin-left: auto; }
.mad-fbpost-body { padding: 0 12px 10px; font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; }
.mad-fbpost-img-wrap, .mad-igpost-img-wrap { width: 100%; background: #f0f2f5; display: flex; align-items: center; justify-content: center; overflow: hidden; }
/* Facebook本文の画像は一覧カードと同じく見切れゼロ（実アスペクト比＋contain） */
.mad-fbpost-img { width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.2s; }
/* Instagramフィードは実機同様、正方形クロップで再現する（spec §3⑤で意図的にcover） */
.mad-igpost-img-wrap { aspect-ratio: 1 / 1; }
.mad-igpost-img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.2s; }
.mad-fbpost-img.is-loaded, .mad-igpost-img.is-loaded { opacity: 1; }
.mad-fbpost-cta { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #f0f2f5; padding: 10px 12px; }
.mad-fbpost-cta-text { min-width: 0; }
.mad-fbpost-cta-text .dom { font-size: 10px; color: #65676b; text-transform: uppercase; }
.mad-fbpost-cta-text .ttl { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mad-fbpost-cta-text .desc { font-size: 11px; color: #65676b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mad-fbpost-cta-btn { background: #e4e6eb; border: none; border-radius: 6px; padding: 8px 12px; font-size: 12px; font-weight: 700; color: #050505; white-space: nowrap; flex-shrink: 0; }
.mad-fbpost-actions { display: flex; justify-content: space-around; padding: 8px 4px; border-top: 1px solid #e4e6eb; font-size: 11.5px; color: #65676b; font-weight: 600; }
.mad-igpost-actions { display: flex; gap: 14px; padding: 10px 12px; font-size: 17px; }
.mad-igpost-cta { padding: 0 12px 8px; }
.mad-igpost-cta .mad-fbpost-cta-btn { width: 100%; }
.mad-igpost-caption { padding: 0 12px 14px; font-size: 12px; line-height: 1.5; }
.mad-igpost-caption b { margin-right: 4px; }

/* 幅1200px未満はドロワーに退避（一覧の可読性を優先。spec §3⑤） */
.mad-preview-fab {
  display: none; position: fixed; right: 18px; bottom: 22px; z-index: 150;
  align-items: center; gap: 6px; background: var(--accent); color: #fff; border: none;
  border-radius: 999px; padding: 12px 18px; font-size: 13px; font-weight: 700;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}
.mad-preview-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 200; }
@media (max-width: 1200px) {
  .mad-preview-panel {
    position: fixed; top: 0; right: 0; height: 100dvh; width: min(88vw, 380px);
    transform: translateX(100%); transition: transform 0.25s ease; z-index: 210;
    border-radius: 0; box-shadow: -10px 0 30px rgba(0,0,0,.25); overflow-y: auto;
  }
  .mad-preview-panel.is-open { transform: translateX(0); }
  .mad-preview-close { display: inline-flex; align-items: center; justify-content: center; }
  .mad-preview-fab { display: flex; }
  .mad-preview-overlay.show { display: block; }
}

/* ===== Funnel（LTV → 赤字ライン → 実CPA） ===== */
.mad-funnel { display: flex; align-items: stretch; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.mad-fstep {
  flex: 1; min-width: 165px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 18px; box-shadow: var(--shadow);
}
.mad-fstep.hl { border-color: var(--accent); background: var(--accent-soft); }
.mad-fstep .fl { font-size: 11.5px; color: var(--text-sub); font-weight: 600; }
.mad-fstep .fv { font-size: 26px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.mad-fstep .fv small { font-size: 13px; font-weight: 600; margin-left: 2px; }
.mad-fstep .fs { font-size: 11px; color: var(--text-sub); margin-top: 4px; line-height: 1.5; }
.mad-farrow { align-self: center; color: var(--text-sub); font-weight: 600; font-size: 12px; text-align: center; line-height: 1.5; }

/* ===== 獲得ファネル（媒体別） Round9 P1・グロース観点 =====
   横棒はdivの幅%のみで表現（外部ライブラリ不使用）。既存の.mad-funnel（LTV→赤字ライン→実CPA）
   とは別概念のため、混同を避けて.mad-cvfunnel*という別クラス名にしている。 */
.mad-cvfunnel-row { padding: 14px 0; border-bottom: 1px solid var(--border); }
.mad-cvfunnel-row:last-child { border-bottom: none; }
.mad-cvfunnel-name { font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.mad-cvfunnel-name .sub { display: inline-block; font-size: 11px; font-weight: 400; color: var(--text-sub); margin-left: 6px; }
.mad-cvfunnel-empty { font-size: 12px; color: var(--text-sub); }
.mad-cvfunnel-stages { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.mad-cvfunnel-stage { flex: 1; min-width: 110px; position: relative; }
.mad-cvfunnel-stage.is-empty { opacity: .55; }
.mad-cvfunnel-label { font-size: 11px; color: var(--text-sub); margin-bottom: 4px; }
.mad-cvfunnel-bar { height: 10px; border-radius: 5px; background: var(--bg); overflow: hidden; border: 1px solid var(--border); }
.mad-cvfunnel-fill { height: 100%; background: var(--accent); border-radius: 5px; min-width: 2px; }
.mad-cvfunnel-val { font-size: 13px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.mad-cvfunnel-rate { position: absolute; top: -16px; left: 0; font-size: 10.5px; color: var(--accent); font-weight: 600; }
@media (max-width: 640px) {
  .mad-cvfunnel-stages { gap: 18px 12px; }
  .mad-cvfunnel-stage { min-width: 84px; }
}

/* ===== Connection / Note ===== */
.mad-conn { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.mad-conn-item { border: 1px solid var(--border); border-radius: 12px; padding: 16px; background: var(--bg); }
.mad-conn-item .t { font-weight: 600; font-size: 13.5px; margin-bottom: 4px; }
.mad-conn-item .s { font-size: 12px; color: var(--text-sub); line-height: 1.6; }
.mad-conn-item .st {
  display: inline-block; margin-top: 8px; font-size: 11px; font-weight: 600;
  border-radius: 999px; padding: 2px 11px;
  background: color-mix(in srgb, var(--status-dev) 20%, transparent); color: var(--warn);
}
.mad-conn-item .st.ok { background: color-mix(in srgb, var(--status-active) 16%, transparent); color: var(--good); }
.mad-conn-item .st.warn { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.mad-conn-item .st.warn-strong { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); }
.mad-conn-item .st.off { background: color-mix(in srgb, var(--status-plan) 18%, transparent); color: var(--text-sub); }
.mad-note {
  font-size: 12px; color: var(--text-sub);
  background: var(--accent-soft); border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0; padding: 10px 14px; margin-top: 14px; line-height: 1.7;
}
.mad-note b { color: var(--text); }

/* WD-01（2026-09-02 P0束③）: 注記を役割で分類して畳む（public/modules/note-fold.js）。
 * caveat = 要約1文（.mad-note-lead）を常時表示し、全文（.mad-note-fulltext）は details へ。
 * explainer = 全文を details へ。warning（⚠）は畳まないので追加の見た目を持たない。
 * 全文は数値より一段小さい 13px・行間 1.7 に落として地の文と数字を視覚的に分離する。 */
.mad-note-lead { font-weight: 500; color: var(--text); }
.mad-note-fold { margin-top: 6px; }
.mad-note-fold summary { font-size: 11.5px; color: var(--text-sub); }
.mad-note--explainer > summary { font-size: 12px; color: var(--text-sub); font-weight: 500; }
.mad-note-fulltext { font-size: 13px; line-height: 1.7; margin-top: 6px; }

/* P1束E #62（2026-09-03）: ⚠ の重大度は**2段階だけ**。判定は public/modules/note-fold.js の
 * WARN_SEVERITY（bad / warn）1本で、色の対応はここ1箇所だけが持つ（画面側の style 直書きは0件）。
 *   is-bad  … データが読めない／画面が成立しない致命。赤地。
 *   is-warn … 表示できていて一部が未入力なだけの補足。中立グレー地。
 * ⚠️ 良否（verdict-ui.js の緑赤）とトーンを分ける: 警告の地色は 8〜10% と薄く敷き、
 *    良否バッジ（16〜20%）より彩度を落とす。補足側は赤・橙を一切使わない。 */
.mad-note--warning.is-bad {
  border-left-color: var(--bad);
  background: color-mix(in srgb, var(--bad) 8%, transparent);
}
.mad-note--warning.is-warn {
  border-left-color: var(--status-plan);
  background: color-mix(in srgb, var(--status-plan) 10%, transparent);
}
/* m-2（レビュー指摘）: studio-performance.js の突合率バナー（正常時）は #62 で warning 系の
 * クラス付与ロジックへ揃えた際、明示クラスを持たなくなり基調色（--accent）が付いていなかった。
 * .mad-note--warning と対になる非警告側の明示クラスとして固定する。 */
.mad-note--accent {
  border-left-color: var(--accent);
  background: var(--accent-soft);
}

/* P1束E #64: 媒体・キャンペーンの状態ドット。状態→クラスの対応は public/modules/media-state.js、
 * クラス→色の対応はこの4行だけが持つ（色の直書きを各所から消すための固定マップ）。
 * ⚠️ 良否色（--good / --bad）は使わない。状態は「良い/悪い」ではないため、状態専用の
 *    くすんだ系統（--status-active / --status-dev / --status-plan）に限定する。
 *    未定義の status は .mad-state-dot--unknown にフォールバックし、色を付けない。 */
.mad-state-dot { font-size: 10px; line-height: 1; margin-right: 4px; color: var(--text-sub); }
.mad-state-dot--connected { color: color-mix(in srgb, var(--status-active) 80%, var(--text-sub)); }
.mad-state-dot--preparing { color: color-mix(in srgb, var(--status-dev) 80%, var(--text-sub)); }
.mad-state-dot--notconnected { color: var(--status-plan); }
.mad-state-dot--retired { color: var(--status-plan); }
.mad-state-dot--unknown { color: var(--text-sub); }
/* 終了した経路は取り消し線で「もう使わない」を形でも示す（良否色は絶対に付けない）。 */
.mad-state--retired { color: var(--text-sub); text-decoration: line-through; }

/* P1束E #59: 設定画面のアコーディオン。既存のパネル（.mad-panel）をそのまま見出し単位で畳む。
 * 初期表示は最初の1つだけ開く（open 属性）。中身は1タップで全て到達できる。 */
.mad-settings-acc { padding-top: 10px; padding-bottom: 10px; }
.mad-settings-acc > summary {
  cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  font-size: 15px; font-weight: 600; color: var(--text);
}
.mad-settings-acc > summary::-webkit-details-marker { display: none; }
.mad-settings-acc > summary::before { content: '▸'; color: var(--text-sub); font-size: 12px; }
.mad-settings-acc[open] > summary::before { content: '▾'; }
.mad-settings-acc > summary .mad-settings-acc-sum { font-size: 12px; font-weight: 400; color: var(--text-sub); }
.mad-settings-acc-body { margin-top: 12px; }
/* M-3（レビュー指摘）: studio-connection.js / studio-targets.js は自前で
 * <div class="mad-panel"><h3>…</h3> を描く（アコーディオン化前は独立パネルだった名残）。
 * それが <details class="mad-panel mad-settings-acc"> の中に入ると、枠と見出しが二重になる
 * （外の <summary> が見出しの役割を既に持っている）。中の .mad-panel は枠を持たせず、
 * h3 は非表示にする（情報は消さない＝h3の中身自体は削らない・見た目だけ畳む）。 */
.mad-settings-acc .mad-panel { padding: 0; border: 0; background: none; box-shadow: none; margin-bottom: 0; }
.mad-settings-acc .mad-panel > h3 { display: none; }

/* ===== Toast（マラサダ core.ts のトーストと同じ見せ方） ===== */
.mad-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--text); color: var(--surface);
  padding: 10px 20px; border-radius: 999px; font-size: 13px; font-weight: 500;
  z-index: 500; box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}
.mad-toast[hidden] { display: none; }

/* ===== サービス切替（ヘッダー・サービス軸×媒体軸 Round5d） ===== */
.mad-service-picker { display: flex; align-items: center; min-width: 0; flex: 1 1 auto; max-width: 260px; }
/* 2026-08-22 検収指摘（重大2・blocker）: display:flexが[hidden]のUAスタイル(display:none)を
   上書きしていたため、app.js renderServicePicker()のpicker.hidden=trueが効かず、(A)（定義自体が
   読めない）・(B)（0件ガードを迂回して最後の1件を消した場合）で空/古いセレクタが残っていた。
   .mad-toast[hidden]と同じ作法で明示的に戻す。 */
.mad-service-picker[hidden] { display: none; }
.mad-service-select {
  width: 100%; appearance: none;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 7px 30px 7px 14px; font-size: 12.5px; font-weight: 600;
  font-family: inherit; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: border-color 0.15s;
}
.mad-service-select:hover, .mad-service-select:focus { border-color: var(--accent); outline: none; }

/* ===== サイドバー：媒体ごとの種別バッジ（API/シート/手入力/未接続/LTVのみ） ===== */
.mad-nav-item-media { justify-content: space-between; gap: 8px; }
.mad-nav-item-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mad-nav-badge {
  flex-shrink: 0; display: inline-block; font-size: 10px; font-weight: 700;
  border-radius: 999px; padding: 2px 8px; letter-spacing: 0.2px;
}
.mad-nav-badge.api { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.mad-nav-badge.sheet { background: color-mix(in srgb, var(--status-active) 16%, transparent); color: var(--good); }
.mad-nav-badge.manual { background: color-mix(in srgb, var(--status-dev) 20%, transparent); color: var(--warn); }
.mad-nav-badge.notconnected { background: color-mix(in srgb, var(--status-plan) 20%, transparent); color: var(--text-sub); }
.mad-nav-badge.ltvonly { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.mad-nav-badge.preparing { margin-left: 4px; background: color-mix(in srgb, var(--status-plan) 20%, transparent); color: var(--text-sub); }
.mad-nav-svc-status {
  margin-left: 8px; font-size: 10px; font-weight: 700; vertical-align: middle;
  background: color-mix(in srgb, var(--status-plan) 20%, transparent); color: var(--text-sub);
  border-radius: 999px; padding: 2px 8px;
}

/* ===== サマリー画面：サービス×媒体マトリクスの参考行（二重計上防止・合計に含めない） ===== */
table.mad-tbl tr.mad-warn td .sub { color: inherit; opacity: .75; }

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .mad-sidebar { transform: translateX(-100%); }
  .mad-sidebar.open { transform: translateX(0); }
  .mad-main { margin-left: 0; padding: calc(var(--header-h) + 20px) 16px 40px; }
  .mad-logo-sub { display: none; }
  .mad-service-picker { max-width: 150px; }
}
@media (max-width: 480px) {
  .mad-header { padding: 0 12px; gap: 10px; }
  .mad-service-picker { max-width: 110px; }
  .mad-service-select { padding: 6px 24px 6px 10px; font-size: 11.5px; }
  .mad-user-email { display: none; } /* 極小画面ではサービス切替を優先し、メール表示は省く */
}

/* サービス×媒体マトリクス: セルを折り返さず、はみ出す場合は表ごと横スクロールさせる。
   実機で内部注記の長文により表が3208pxまで広がり列が見えなくなる事故があったため、
   注記は小さく折り返し可・数値セルは nowrap という役割分担にする。 */
.mad-matrix-note { white-space: normal; display: block; max-width: 220px; font-size: 11px; color: var(--text-sub); line-height: 1.5; margin-top: 2px; }

/* P1-3: マトリクス行の推移スパークライン（インラインSVG・外部ライブラリ不使用） */
.mad-spark { display: block; margin: 0 auto; vertical-align: middle; }

/* Round12: プレースメント別/年齢・性別テーブルの unknown 行は小さく（実データに存在するため隠さない） */
.mad-unknown-row td { opacity: 0.62; font-size: 12px; }

/* Round12: クリエイティブカードのCTRスパークライン */
.mad-ccard-spark-wrap { display: flex; align-items: center; gap: 6px; }
.mad-ccard-spark-label { font-size: 10px; color: var(--text-sub); font-weight: 600; }
.mad-ccard-spark { flex-shrink: 0; }

/* P0-2（Round9）: マトリクス表がscrollWidth>clientWidthで横にはみ出す事故対策。
   媒体名セルの説明文（.sub＝種別ラベル＋note）はtable.mad-tblの既定white-space:nowrapを
   継承すると1行に収まるまで列が広がってしまう。この列だけ折り返しを許可し幅を絞る
   （数値セルはtabular-numsの桁揃えを保つためnowrapのまま）。「状態」列を廃止し判定バッジの
   隣に小さく併記したこと（views.js matrixRowHtml）と合わせて実測でscrollWidth<=clientWidthを確認済み。 */
.mad-matrix-tbl td:first-child { white-space: normal; max-width: 200px; }
.mad-matrix-tbl td:first-child .sub { max-width: 200px; white-space: normal; }
/* P1-5: Meta広告のように種別ラベル＋noteが長い行は最大2行に収める（省略しても意味が通る
   文にnote自体を短くした上で、それでもはみ出す場合の保険として-webkit-line-clampで切る） */
.mad-matrix-tbl td:first-child > .sub:first-of-type {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ===== 共有用テキストのコピー（Round13・サマリー画面／Meta広告タブ） ===== */
.mad-share-row { margin: 10px 0 16px; }
.mad-copy-btn { background: var(--surface); color: var(--accent); border: 1px solid var(--accent); }
.mad-copy-btn:hover:not(:disabled) { background: var(--accent-soft); opacity: 1; }

/* navigator.clipboard が使えない/失敗した環境向けフォールバック：<textarea>を選択状態で表示する */
.mad-copy-fallback {
  position: fixed; inset: 0; z-index: 600; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.5); padding: 20px;
}
.mad-copy-fallback-box {
  width: min(560px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 18px; box-shadow: var(--shadow-hover);
}
.mad-copy-fallback-title { font-size: 12.5px; color: var(--text-sub); margin-bottom: 10px; line-height: 1.6; }
.mad-copy-fallback-ta {
  width: 100%; height: 220px; resize: vertical; font-family: inherit; font-size: 12px; line-height: 1.6;
  background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 10px;
  margin-bottom: 12px;
}

/* ===== クリエイティブ画像の拡大表示（ライトボックス・Round13） ===== */
/* 一覧カードの画像クリックは既にプレビュー選択に使われているため、右上の小さな「拡大」ボタン
   （またはダブルクリック）を別導線にする（spec §3④への追記・藤山さん指示） */
.mad-ccard-zoom-btn {
  position: absolute; top: 6px; left: 6px; z-index: 1;
  background: rgba(0,0,0,.6); color: #fff; border: none; border-radius: 999px;
  padding: 4px 10px; font-size: 10.5px; font-weight: 700; cursor: pointer;
  opacity: 0; transition: opacity .15s;
}
.mad-ccard-img-wrap:hover .mad-ccard-zoom-btn,
.mad-ccard-zoom-btn:focus-visible { opacity: 1; }
@media (hover: none) { .mad-ccard-zoom-btn { opacity: 1; } } /* タッチ端末はホバーが無いため常時表示 */

.mad-lightbox {
  position: fixed; inset: 0; z-index: 600; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.78); padding: 24px;
}
.mad-lightbox-box {
  position: relative; max-width: min(92vw, 1000px); max-height: 92vh;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.mad-lightbox-img-wrap {
  max-width: 100%; max-height: 78vh; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, #000 20%, transparent); border-radius: 10px; overflow: hidden;
}
/* 実寸を保った拡大表示：object-fit:containで縮小のみ行い、拡大表示の枠内に収める */
.mad-lightbox-img { max-width: min(92vw, 1000px); max-height: 78vh; width: auto; height: auto; object-fit: contain; opacity: 0; transition: opacity .2s; }
.mad-lightbox-img.is-loaded { opacity: 1; }
.mad-lightbox-error { color: #fff; font-size: 13px; padding: 40px; }
.mad-lightbox-close {
  position: absolute; top: -14px; right: -14px; width: 32px; height: 32px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 50%;
  font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.mad-lightbox-meta { text-align: center; color: #fff; }
.mad-lightbox-name { font-size: 13px; font-weight: 700; word-break: break-all; }
.mad-lightbox-dim { font-size: 11.5px; color: #d0d0d0; margin-top: 4px; }
@media (max-width: 480px) {
  .mad-lightbox-close { top: 4px; right: 4px; }
}

/* ===== P1（2026-08-21）: 今日の判定・3段階判定ヒーロー ===== */
.mad-verdict-hero {
  border-radius: 14px; padding: 22px 24px; margin-bottom: 18px;
  border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow);
}
.mad-verdict-hero-label { font-size: 12.5px; color: var(--text-sub); font-weight: 600; }
.mad-verdict-hero-value { font-size: 32px; font-weight: 800; margin-top: 4px; letter-spacing: 0.01em; }
.mad-verdict-hero-sub { font-size: 12.5px; color: var(--text-sub); margin-top: 6px; }
.mad-verdict-hero.good { border-color: var(--good); background: color-mix(in srgb, var(--good) 10%, transparent); }
.mad-verdict-hero.good .mad-verdict-hero-value { color: var(--good); }
.mad-verdict-hero.warn { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.mad-verdict-hero.warn .mad-verdict-hero-value { color: var(--warn); }
.mad-verdict-hero.bad { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }
.mad-verdict-hero.bad .mad-verdict-hero-value { color: var(--bad); }
.mad-verdict-hero.muted { border-color: var(--border-strong); }
.mad-verdict-hero.muted .mad-verdict-hero-value { color: var(--text-sub); }
/* 判定の見方・基準の折りたたみ（2026-08-21）。スマホで最初の1画面が説明文で埋まらないよう、
   .mad-glossary と同じ ▶/▼ の流儀で畳む。中身の文言は畳む前と同じ */
.mad-verdict-why { margin-top: 10px; }
.mad-verdict-why summary {
  font-size: 12.5px; font-weight: 700; color: var(--accent);
}

/* 目標CPAが赤字ラインより緩い設定のときだけ出る注意行（2026-08-21） */
.mad-verdict-warn { margin: -10px 0 18px; border-left: 3px solid var(--warn); padding-left: 10px; }
.mad-home-footer { text-align: center; margin-top: 24px; }

/* ===== P1（2026-08-23 UI/UX改修）: ホームのT1層 =====
   「判定 → 実CPA → 次の一手 → 4KPI」までがスマホの最初の1画面に収まることを狙った寸法。
   根拠・推移（T2）は .mad-home-t2 の<details>1つに畳んである（消していない）。 */
/* シート手入力へのフォールバック中に判定ラベルへ添える「暫定」（P1-4）。
   判定名と地続きに見えないよう、間を空けて小さく出す */
.mad-verdict-provisional { font-size: 15px; font-weight: 700; margin-left: 10px; opacity: 0.8; }
.mad-hero-cpa { margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--text-sub); }
.mad-hero-cpa-value {
  font-size: 40px; font-weight: 800; margin-left: 8px; letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums; line-height: 1.15;
  /* #72（P1束H）: フォントは可変にせず、金額そのものが折り返さないことをCSSで固定する。 */
  white-space: nowrap;
}
/* #72: cpaMetricLabelChipHtml の2表記。PC/SPどちらか一方だけを出す（フォントサイズは変えない）。 */
.mad-cpa-metric-chip { display: none; }
.mad-hero-cpa-value.is-ok { color: var(--good); }
.mad-hero-cpa-value.is-over { color: var(--bad); }
.mad-hero-margin { font-size: 12.5px; color: var(--text-sub); margin-top: 2px; }
/* 概算込みCPA（副次数字・2026-08-27）。主数字（.mad-hero-cpa-value）より小さく、
   .mad-estimate-pillで「概算・実額ではない」と必ず分かる見た目にする */
.mad-hero-cpa-sub { font-size: 12.5px; color: var(--text-sub); margin-top: 2px; }
/* 入力健全性バッジ（P1-4）。緑=そのまま読んでよい／黄=判定が歪みうる、の2状態だけ */
.mad-health-badge {
  display: inline-block; margin-top: 10px; font-size: 11.5px; font-weight: 600;
  border-radius: 999px; padding: 3px 12px; line-height: 1.6;
  background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good);
}
.mad-health-badge.warn { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
/* 次の一手（P1-3）。判定の直下に必ず1行。合格でも「操作不要」と明言するため常設する */
.mad-next-action {
  background: var(--surface); border: 1px solid var(--border-strong); border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0; padding: 11px 16px; margin: -8px 0 16px;
  font-size: 13.5px; font-weight: 700; line-height: 1.7;
}
/* T2へ格下げした参考値（目標CPA・媒体別CPA等）は淡色にして、判定用の数字と見分けられるようにする */
.mad-t2-ref { opacity: 0.75; }
/* 根拠と推移（T2）の折りたたみ。矢印マーカーは .mad-fold の▶/▼に統一（旧▽は廃止） */
.mad-home-t2 { margin: 4px 0 8px; }
.mad-home-t2 > summary {
  font-size: 13.5px; font-weight: 700; color: var(--accent);
  padding: 10px 0;
}

/* ===== P2-6: 実CPA vs 赤字ライン のブレットチャート =====
   バーの右端＝赤字ライン。塗りの幅は 実CPA÷赤字ライン で、100%を超える分は
   JS側でクランプしてある（幅200%のバーは描けないため、超過は色と▶と金額で示す）。
   外部ライブラリは使わずdivの幅%だけで描く（.mad-cvfunnelと同じ流儀）。 */
.mad-wbar {
  position: relative; height: 14px; margin: 10px 2px 3px;
  border-radius: 999px; background: var(--bg); border: 1px solid var(--border);
}
.mad-wbar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: 999px; min-width: 3px; opacity: 0.6;
}
.mad-wbar.is-ok .mad-wbar-fill { background: var(--good); }
.mad-wbar.is-over .mad-wbar-fill { background: var(--bad); opacity: 0.75; }
/* 赤字ラインそのもの（＝バーの右端）。塗りが届いていなくても線は常に見える */
.mad-wbar-limit { position: absolute; right: 0; top: -4px; bottom: -4px; width: 3px; border-radius: 2px; background: var(--warn); }
.mad-wbar.is-over .mad-wbar-limit { background: var(--bad); }
/* 実CPAの位置を指す印。超過時は右端に貼り付くので、はみ出す向き（▶）に変える */
.mad-wbar-mark { position: absolute; top: -8px; font-size: 11px; line-height: 1; transform: translateX(-50%); color: var(--text-sub); }
.mad-wbar.is-over .mad-wbar-mark { color: var(--bad); transform: translateX(-20%); }
.mad-wbar-legend {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 10.5px; color: var(--text-sub); margin: 0 2px;
}

/* ===== P2-8: 監査ビュー（T3層） ===== */
/* ホーム下部からの導線。T2の折りたたみを閉じたままでも見えるよう、details の外に置く */
.mad-audit-link { margin: 6px 0 4px; font-size: 13px; }
.mad-audit-link a { color: var(--accent); font-weight: 600; text-decoration: none; }
.mad-audit-link a:hover { text-decoration: underline; }
.mad-audit-intro { margin-top: 0; }
/* 式の展開（「A ÷ B = C」を1行ずつ）。数字を等幅にして桁を目で追えるようにする */
.mad-audit-formula { display: flex; flex-direction: column; gap: 10px; }
.mad-audit-step {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--bg);
}
.mad-audit-step .l { font-size: 11.5px; font-weight: 600; color: var(--text-sub); min-width: 170px; }
.mad-audit-step .f { font-size: 14px; font-variant-numeric: tabular-nums; line-height: 1.7; }
.mad-audit-step .f b { font-size: 17px; font-weight: 800; }
/* 2ソース差分の表で、±5%を超えた日だけ地の色を変える（一致した日を目で飛ばせるように） */
.mad-tbl tr.is-diff-over > td { background: color-mix(in srgb, var(--warn) 12%, transparent); }
@media (max-width: 640px) {
  .mad-audit-step { padding: 10px 12px; }
  .mad-audit-step .l { min-width: 0; }
  .mad-audit-step .f { font-size: 13px; }
  .mad-audit-step .f b { font-size: 15px; }
}

@media (max-width: 640px) {
  /* P1-5 モバイル要約カード: iPhone（390×844）で判定・実CPA・次の一手・4KPIが
     スクロールなしで収まるよう詰める。KPIは1列だと4枚で画面を使い切るため2×2に固定する */
  .mad-verdict-hero { padding: 12px 14px; margin-bottom: 10px; }
  .mad-verdict-hero-value { font-size: 22px; }
  .mad-verdict-provisional { font-size: 13px; margin-left: 8px; }
  .mad-hero-cpa { margin-top: 8px; }
  .mad-hero-cpa-value { font-size: 30px; }
  .mad-health-badge { margin-top: 8px; }
  .mad-verdict-why { margin-top: 8px; }
  .mad-next-action { font-size: 13px; padding: 8px 12px; margin: -2px 0 10px; }
  .mad-home-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
  .mad-home-kpis .mad-kpi { padding: 9px 11px; }
  .mad-home-kpis .mad-kpi .k { font-size: 11px; }
  .mad-home-kpis .mad-kpi .v { font-size: 17px; }
  .mad-home-kpis .mad-kpi .d { font-size: 10.5px; line-height: 1.5; }
}

/* ===== P1: 媒体別実績の統合タブ（サイドバーの媒体羅列を廃止した代わり） ===== */
.mad-media-tabs {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px;
  border-bottom: 1px solid var(--border); padding-bottom: 0;
}
.mad-media-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 8px 4px; margin-bottom: -1px; font-size: 13px; font-weight: 600;
  color: var(--text-sub); cursor: pointer; transition: color 0.15s, border-color 0.15s;
}
.mad-media-tab:hover { color: var(--accent); }
.mad-media-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }

/* L-1（P1束Gレビュー・2026-09-03）: 媒体詳細の内容タブ（実績／クリエイティブ・#90）は、
   上の媒体タブ（Meta/Google等・どの媒体を見るか）とは階層が違う「同じ媒体内の見方の切替」
   なので、一回り小さくして視覚的な優先順位（媒体選択 > 内容選択）を出す。項目・遷移の作法は
   .mad-media-tabs と同じまま（クラスを重ねて出す）。 */
.mad-media-content-tabs {
  margin-top: -8px;
  margin-bottom: 12px;
}
.mad-media-content-tabs .mad-media-tab {
  font-size: 12px;
  padding: 6px 4px;
}

/* ===== P3（v4差分）: 配信回登録フォーム・チャネル管理フォーム・入力欄全般 ===== */
.mad-input {
  background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 10px; font-size: 12.5px; font-family: inherit;
}
.mad-input:focus { outline: none; border-color: var(--accent); }
.mad-input:disabled { opacity: 0.55; cursor: not-allowed; }
.mad-delivery-form { margin-top: 10px; }
.mad-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 12px; }
.mad-form-field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--text-sub); font-weight: 600; }
.mad-form-field select, .mad-form-field input { width: 100%; }
.mad-form-field-checkbox { justify-content: flex-end; }
.mad-delivery-form-actions { display: flex; gap: 10px; }
.mad-delivery-form-msg { margin-top: 8px; font-size: 12px; }
.mad-delivery-form-panel { margin-top: 14px; }
.mad-delivery-spend-row { display: flex; gap: 6px; align-items: center; }
.mad-delivery-spend-row .mad-input { width: 100px; }
.mad-delivery-url-box { display: flex; gap: 6px; align-items: center; }
.mad-delivery-url-box .mad-input { width: 220px; }
.mad-delivery-url-slot { min-height: 1.6em; }
.mad-delivery-add-btn:hover:not(:disabled) { opacity: 0.92; }
.mad-reliability-warn { margin-bottom: 18px; }
.mad-reliability-warn a { color: inherit; text-decoration: underline; }

/* ===== P2-7: クリエイティブ比較テーブル（1行1広告で相対比較する） ===== */
.mad-ctable-panel { margin-bottom: 16px; }
.mad-ctable th { vertical-align: bottom; }
/* 見出しのソートボタン。見た目は見出しのまま（押せることは矢印とカーソルで示す） */
.mad-ctsort {
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  font: inherit; color: inherit; font-weight: inherit; text-align: inherit;
}
.mad-ctsort:hover { color: var(--accent); }
.mad-ctsort.is-active { color: var(--accent); }
.mad-ctsort:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.mad-ctthumb-cell { width: 52px; }
.mad-ctthumb {
  width: 44px; height: 44px; object-fit: cover; border-radius: 6px;
  background: var(--bg); border: 1px solid var(--border); display: block;
}
.mad-ctthumb.is-none {
  display: flex; align-items: center; justify-content: center;
  color: var(--text-sub); font-size: 11px;
}
/* 広告名だけは折り返す（表全体は nowrap）。min-width が無いと、他の列を優先して
 * 1〜2文字ずつの縦読みまで潰されるため下限を決める。溢れる分は .mad-tblwrap が横スクロール */
.mad-ctname { min-width: 210px; max-width: 320px; white-space: normal; }
.mad-ctover.good { color: var(--good); font-weight: 700; }
.mad-ctover.bad { color: var(--bad); font-weight: 700; }
/* 前日比は増減そのものに良し悪しが無い（増額中か縮小中かの事実）ため判断色を使わない */
.mad-ctdod { font-weight: 600; }
.mad-ctmuted { color: var(--text-sub); }
.mad-ctrow { cursor: pointer; }
.mad-ctrow.is-selected > td { background: var(--accent-soft); }
.mad-ctrow:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* 詳細カード群の退避先。閉じた状態が既定＝画面の初期表示は比較テーブルまでで完結する */
.mad-cdetails > summary {
  font-size: 13px; font-weight: 600; color: var(--text-sub);
  padding: 10px 0; user-select: none;
}
.mad-cdetails > summary:hover { color: var(--accent); }
.mad-cdetails[open] > summary { margin-bottom: 6px; }

/* ===== P2-10b: 用語のその場説明（ⓘ）。スマホはホバーできないためタップで開く ===== */
.mad-gtip { display: inline; }
.mad-gtip > summary {
  display: inline;
  color: var(--accent); font-size: 12px; font-weight: 700; margin-left: 3px;
}
/* mad-gtipは summary の中身自体が「ⓘ」の1文字アイコンで、それ自体がタップ対象を示す
 * ボタンのため、他の折りたたみのような▶/▼の矢印は付けない（.mad-foldの矢印だけ打ち消す） */
.mad-gtip > summary::before { content: none; }
.mad-gtip > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 50%; }
/* display の指定は必ず [open] 側に付ける。無条件に display:block を当てると、
 * 閉じた<details>の中身を隠すブラウザ既定（details:not([open])>*:not(summary)）を
 * 上書きしてしまい、説明文が畳まれずに出っぱなしになる */
.mad-gtip[open] > .mad-gtip-body {
  display: block; margin: 6px 0; padding: 8px 10px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  font-size: 11.5px; font-weight: 400; line-height: 1.6; color: var(--text-sub);
  white-space: normal; text-align: left;
}

/* チャネル管理・サービス一覧の目標CPA入力欄。既定幅はデスクトップ想定の8em
 * （2026-08-26追加。以前はJS側のinline style="width:8em"だったが、スマホ用の
 * 幅上書き(下記640pxメディアクエリ)を効かせるためCSS側の指定に寄せた）。 */
.mad-svc-target-cpa { width: 8em; }

/* ===== P2-10a: スマホ（640px以下）で表を1行=1カードにする =====
 * 横スクロール（.mad-tblwrap）は残したままで、カード化するのは .mad-tbl--cards を
 * 付けた表だけ。全表に一律で当てると、列の対応で読ませている表（差分比較など）が壊れる。
 * 項目名は各セルの data-label から出す（thead は読み上げ用に残す） */
@media (max-width: 640px) {
  /* ⚠️ セレクタを table.mad-tbl--cards にしているのは詳細度のため（2026-08-26実害修正）。
   * 264行目の `table.mad-tbl { white-space: nowrap; }` は詳細度(0,0,1,1)で、
   * クラスだけの `.mad-tbl--cards`(0,0,1,0) では負ける。メディアクエリは詳細度を上げない。
   * その結果カード化しても nowrap が残り、セルの中身が折り返さずカード幅を超えて
   * 横に伸びていた（実測: サービス一覧が表示枠312pxに対して表幅611px＝入力欄に到達不能）。
   * ここを .mad-tbl--cards に戻すと、5つのカード化テーブル全部が同じ症状に戻る。 */
  table.mad-tbl--cards { white-space: normal; }
  .mad-tbl--cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mad-tbl--cards tbody tr {
    display: block; margin-bottom: 10px; padding: 4px 2px;
    border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  }
  .mad-tbl--cards tbody td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    text-align: right; border-bottom: 1px dashed var(--border); padding: 7px 10px;
  }
  .mad-tbl--cards tbody td:last-child { border-bottom: none; }
  .mad-tbl--cards tbody td::before {
    content: attr(data-label); flex: 0 0 auto;
    color: var(--text-sub); font-size: 11.5px; font-weight: 600; text-align: left;
  }
  .mad-tbl--cards tbody td:first-child { text-align: left; }
  .mad-tbl--cards tbody td .sub { text-align: right; }
  .mad-tbl--cards tr:hover td { background: none; }
  .mad-ctname { max-width: none; }

  /* チャネル管理・サービス一覧の「目標CPA」セル（2026-08-26実害修正）。
   * このセルは入力欄・保存ボタン・保存値表示の3要素を持つため、汎用カード化の
   * display:flex(1行に横並び)だと1行に収まりきらず入力欄が見切れる（表示枠312px実測）。
   * このセルだけdisplay:blockに戻し、通常のインライン折り返しに任せる
   * （縦に伸びるだけで横スクロールは発生しない＝保存ボタンまで必ず到達できる）。 */
  .mad-tbl--cards td.mad-tcpa-cell { display: block; text-align: right; }
  .mad-tbl--cards td.mad-tcpa-cell::before { display: block; text-align: left; margin-bottom: 4px; }
  .mad-tbl--cards td.mad-tcpa-cell input.mad-svc-target-cpa { width: 6.5em; }

  /* サービス名セルも同じ理由でdisplay:blockに戻す。未登録警告(.mad-note)が付くと
   * 汎用カード化のflex行では折り返せず、警告文がカード幅からはみ出す。 */
  .mad-tbl--cards td.mad-svcname-cell { display: block; }
  .mad-tbl--cards td.mad-svcname-cell::before { display: block; margin-bottom: 4px; }
}

/* ===== モバイル文字サイズの正規化（2026-08-27 藤山さん指摘・実機iPhone） =====
 * 前提: 上の html { text-size-adjust: 100% } で iOS の勝手な拡大を止めた。
 * 拡大が止まると今度は「CSSに書いてあるとおりの小ささ」がそのまま出るため、
 * スマホで実際に読む文字が 9.5〜10.5px のまま残っている箇所を底上げする。
 * 併せて、同じ「KPIの数値」という役割なのに 24px / 22px / 26px / JS側inline 18px と
 * ばらけていたものを、スマホでは 18px に揃える（インラインの18pxと一致させ、
 * 画面内で数値の大きさが飛ばないようにするのが目的）。
 * デスクトップの見た目は一切変えない＝この中は全部 max-width:640px の中に入れること。 */
@media (max-width: 640px) {
  /* (1) 9.5px だったラベル群（値に対する見出し語。飾りではなく読ませる文字） */
  .mad-ccard-secondary .l,
  .mad-ccard-cpa-compare .l,
  .mad-appeal-item-metrics .l { font-size: 11px; }

  /* (2) 10〜10.5px だった補足・バッジ類 */
  .mad-ccard-primary .l,
  .mad-ccard-refmeta,
  .mad-ccard-spark-label,
  .mad-ccard-dest,
  .mad-cvfunnel-rate,
  .mad-wbar-legend,
  .mad-src-badge,
  .mad-phase,
  .mad-nav-badge,
  .mad-nav-svc-status,
  .mad-preview-account-note,
  .mad-ccard-zoom-btn { font-size: 11px; }
  /* ホームKPIの補足行（既存のモバイル規則で10.5pxだったもの） */
  .mad-home-kpis .mad-kpi .d { font-size: 11px; }
  /* ⚠️ .mad-ad-* の同種の指定は ad-dashboard.css の末尾にある。
   * ad-dashboard.css は index.html でこのファイルより後に読み込まれるため、
   * ここに書いても詳細度が同じだと負ける（実測で効かなかった）。向こうに書くこと。 */

  /* (3) KPIの数値をスマホでは 18px に統一（.mad-home-kpis 側は詳細度が高いので明示） */
  .mad-kpi .v,
  .mad-home-kpis .mad-kpi .v { font-size: 18px; }
  .mad-kpi .v small { font-size: 12px; }
  /* ファネル・クリエイティブカードの主数値も同じ階層に寄せる（26px/22px→20px） */
  .mad-fstep .fv { font-size: 20px; }
  .mad-ccard-primary .v { font-size: 20px; }
}

/* ===== P0-D: スマホで表を横スクロールしても見出し行・先頭列が読める（sticky） =====
 * （2026-08-27 mobile-ux-redesign）。付けるのは .mad-tbl--cards が付いていない表だけ
 * （カード化される表は1行=1カードのブロック要素になり sticky と両立しないため対象外）。
 * ⚠️ .mad-tbl は table.mad-tbl { border-collapse: collapse; } のため、position: sticky を
 * 適用したセルは仕様上ボーダーが描画されない既知挙動がある（collapseされた罫線はセルの
 * 所属テーブルではなく再計算された境界に属し、sticky で切り離されたセルには乗らない）。
 * そのため罫線は border-bottom ではなく box-shadow の inset で代替する。実機で罫線が
 * 消えていないことを必ず目視確認すること。 */
@media (max-width: 640px) {
  .mad-tbl--sticky th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface);
    border-bottom: none;
    box-shadow: inset 0 -1px 0 var(--border-strong);
  }
  .mad-tbl--sticky td:first-child,
  .mad-tbl--sticky th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--surface);
  }
  /* 見出し行×先頭列が重なる左上セルだけ両方の性質を持つため、重なり順を一段上げる */
  .mad-tbl--sticky th:first-child { z-index: 3; }
  .mad-tbl--sticky td:first-child {
    border-bottom: none;
    box-shadow: inset 0 -1px 0 var(--border);
  }
  /* 品質管理PDCA 1周目FAIL④（2026-08-27）対応: #channels-admin を横スクロールすると、
   * 固定した先頭列と次の列の境界が透過ではなく境界線そのものが無いため、隣列の文字が
   * 先頭列の直後に重なって見えていた。上のtd/th:first-childのbox-shadow（下端の罫線代替）は
   * 消さずに残し、右端にもう1枚 box-shadow を重ねて縦の境界線を足す（inset併用のため
   * カンマ区切りで2枚重ねる。border-right は border-collapse+sticky で描画されない
   * 既知挙動があるため使わない＝上のコメントと同じ理由）。 */
  .mad-tbl--sticky th:first-child {
    box-shadow: inset 0 -1px 0 var(--border-strong), 1px 0 0 var(--border);
  }
  .mad-tbl--sticky td:first-child {
    box-shadow: inset 0 -1px 0 var(--border), 1px 0 0 var(--border);
  }
}

/* ===== P1: スマホで「行の順位を見る」表は列を絞る（.mad-tbl--rank） =====
 * docs/mobile-ux-redesign.md §2②の3分類のうち3つ目（2026-08-27）。3クラスの使い分け:
 *   .mad-tbl--cards  「1行=1実体」        → 1行を1枚のカードにして全項目を縦積みで見せる
 *   .mad-tbl--sticky 「列と列を見比べる突合表」→ カード化禁止・見出し行/先頭列を固定して読ませる
 *   .mad-tbl--rank   「行の順位を見る表」    → カード化もsticky固定もせず、列そのものを絞る
 *                     （上から順に見て上位だけ分かればいい表。名前＋順位を決めている指標＋判定
 *                     だけを残し、他の列は隠す）
 * どの列を隠すかは表ごとに違うため、固定のnth-childではなく各表側で残さない
 * <th data-rank-hide> / <td data-rank-hide> を付ける（表を作った側が判断する）。
 * ⚠️ 「列を隠す」は削除ではない。表の直後に置いた .mad-rank-toggle ボタンが対象の
 * .mad-tblwrap（data-rank-toggleでidを指定）に is-rank-expanded を付け外しするだけで、
 * 全列表示に戻せる（トグルの配線はapp.jsの委譲クリックハンドラ1箇所・禁止事項§5対応）。
 * sticky と併用可（併用時は最初から見えている列＝先頭列だけが固定対象になる）。 */
/* PCでは列を絞らない＝トグル自体が不要なので既定は非表示。
 * ⚠️ この既定はメディアクエリより**前**に置くこと。後ろに置くと詳細度が同じで後勝ちになり、
 * スマホでもトグルが消える＝全列に戻す導線が無くなる（禁止事項§5「隠しっぱなしにしない」に抵触）。
 * 2026-08-27に実際にその順序で書かれていたのを検証で発見して入れ替えた。 */
.mad-rank-toggle { display: none; }
@media (max-width: 900px) {
  .mad-tbl--rank th[data-rank-hide],
  .mad-tbl--rank td[data-rank-hide] { display: none; }
  .mad-tblwrap.is-rank-expanded .mad-tbl--rank th[data-rank-hide],
  .mad-tblwrap.is-rank-expanded .mad-tbl--rank td[data-rank-hide] { display: table-cell; }
  .mad-rank-toggle {
    display: block; margin: 8px 0 0; padding: 7px 12px;
    font-size: 12.5px; font-weight: 600; color: var(--accent);
    background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  }
}

/* ===== スマホ専用ナビゲーション（2026-08-27） =====
 * mobile-ux-redesign P0-A/P0-B。ボトムタブ・コンテキストバー・サービス切替シート・
 * 深掘りハブ画面。PC（901px以上）の見た目は1pxも変えない＝表示はすべて
 * @media (max-width: 900px) の中だけで行う。
 * ⚠️ 100dvh + overflow:hidden の固定箱パターンは使わない（自然スクロールを維持・POKIパターン）。
 * ⚠️ 下余白は env(safe-area-inset-bottom) の max() 計算に頼らず、固定値への加算形に留める。
 * ⚠️ display:flex / grid は [hidden] のUAスタイル(display:none)を上書きするため、
 *    hidden を効かせたい要素には必ず .mad-xxx[hidden] { display: none; } を明示する
 *    （mad.css:115 / 331 / 698 に同じ事故の修正コメントあり）。 */
.mad-ctxbar, .mad-bottomtab, .mad-sheet-overlay { display: none; }

/* 深掘りハブの中身はPCでも同じ画面（#hub）として開けるので、レイアウトはメディアクエリの外に置く */
.mad-hub-group + .mad-hub-group { margin-top: 14px; }
.mad-hub-list { display: flex; flex-direction: column; gap: 8px; }
.mad-hub-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; text-align: left; color: var(--text); cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.mad-hub-item:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.mad-hub-item.is-off { opacity: 0.55; cursor: default; }
.mad-hub-item-icon { font-size: 20px; line-height: 1; flex-shrink: 0; width: 24px; text-align: center; }
.mad-hub-item-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.mad-hub-item-title { font-size: 14px; font-weight: 700; }
.mad-hub-item-desc { font-size: 12px; color: var(--text-sub); line-height: 1.5; }
.mad-hub-item-arrow { color: var(--text-sub); font-size: 18px; flex-shrink: 0; }

@media (max-width: 900px) {
  /* (1) コンテキストバー: ヘッダー直下に固定。「リアサポ › 今日の判定」＝サービス軸と画面軸の
     2次元の現在地を常時見せる（従来はどの瞬間も1次元しか出ていなかった）。 */
  .mad-ctxbar {
    display: flex; align-items: center; gap: 6px;
    position: fixed; top: var(--header-h); left: 0; right: 0; height: 36px;
    z-index: 90; padding: 0 12px;
    background: var(--surface); border-bottom: 1px solid var(--border);
    font-size: 12.5px; color: var(--text-sub);
  }
  .mad-ctxbar[hidden] { display: none; }
  /* スマホ版の戻るボタン（PC側 .mad-back-btn と同じ判断ロジックを共有）。
     コンテキストバーは幅が狭いのでラベルは付けず矢印のみ＋aria-labelで戻り先を伝える。 */
  .mad-ctxbar-back {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 26px; height: 26px; margin-left: -4px;
    background: none; border: none; color: var(--text); font-size: 19px; line-height: 1;
    cursor: pointer;
  }
  .mad-ctxbar-back[hidden] { display: none; }
  /* PC見出し横の戻るボタン(.mad-back-btn)はスマホでは出さない。コンテキストバーの
     .mad-ctxbar-back が同じ役割（判断ロジックはapp.js側で共有）を担うため、
     スクロールで流れる.mad-page-head内のボタンと二重に出すと紛らわしい。 */
  .mad-back-btn { display: none; }
  .mad-ctxbar-svc {
    display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; max-width: 46%;
    background: var(--accent-soft); color: var(--accent); border: none;
    border-radius: 999px; padding: 3px 10px; font-size: 12.5px; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mad-ctxbar-caret { font-size: 10px; }
  .mad-ctxbar-sep { flex-shrink: 0; }
  .mad-ctxbar-view {
    font-weight: 700; color: var(--text); min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* (2) 本文の余白: 上はコンテキストバー36px分、下はボトムタブ分を足す。
     ボトムタブは高さ固定56px＋safe-area加算のため、本文側も同じ加算形で合わせる。 */
  .mad-main {
    margin-left: 0;
    padding: calc(var(--header-h) + 36px + 16px) 16px calc(88px + env(safe-area-inset-bottom, 0px));
  }

  /* (3) ボトムタブ: 画面下に固定・常時表示。
     2026-08-28 工房追加で4列→5列。375px幅で1列=75px。最長ラベル「事業ぜんぶ」（5字）は
     11px×5字=55px（CJKは1字≒フォントサイズ幅・letter-spacing 0）で 55px < 75px ＝
     折り返さない（320px幅でも 1列64px > 55px で成立。scripts/test-studio-nav.mjs が同じ計算を固定）。 */
  .mad-bottomtab {
    /* ★2026-08-29: minmax(0,1fr) にする理由＝1fr の暗黙 min-width は auto なので、
       ラベルが列幅を超えると列が不均等に膨らんで body ごと横スクロールする。
       5列化で余裕が減ったため、その事故を構造で封じる（4列時代は余裕があり顕在化しなかった）。 */
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    background: var(--surface-header); border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
  }
  .mad-bottomtab[hidden] { display: none; }
  .mad-bottomtab-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    /* ★2026-08-29: padding:0 が必須。button の UA 既定 padding（Chrome/Safari ≈ 1px 6px）が
       生きていると、320px 端末で 1列 64px − 左右12px = 52px となり、最長ラベル「事業ぜんぶ」
       （全角5字 × 11px = 55px。Noto Sans JP の CJK は advance 1em 固定でウェイトを上げても伸びない）
       が2行に折れる。375px 以上では余裕があり出ない＝**320px が「出る側」**。 */
    padding: 0;
    height: 56px; background: none; border: none; color: var(--text-sub); cursor: pointer;
  }
  .mad-bottomtab-icon { font-size: 18px; line-height: 1; }
  /* #70（P1束H）: ラベルは常時表示・省略しない前提のため、折り返し・省略を構造で禁止する。
     white-space:nowrap のみ（text-overflow:ellipsisは付けない＝欠けた文字を出したくない。
     mad.css:1450 コメントの実測どおり最長ラベル「事業ぜんぶ」でも5列いずれの幅にも収まるため、
     nowrapだけで見た目が変わることはない＝安全側の固定）。 */
  .mad-bottomtab-label { font-size: 11px; font-weight: 600; white-space: nowrap; }
  .mad-bottomtab-item.is-active { color: var(--accent); }
  .mad-bottomtab-item.is-active .mad-bottomtab-label { font-weight: 700; }

  /* (4) サービス切替シート（下から出る） */
  .mad-sheet-overlay {
    display: flex; align-items: flex-end;
    position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,0.45);
  }
  .mad-sheet-overlay[hidden] { display: none; }
  .mad-sheet {
    width: 100%; max-height: 76vh; overflow-y: auto;
    background: var(--surface); border-radius: 16px 16px 0 0;
    padding: 14px 14px calc(18px + env(safe-area-inset-bottom, 0px));
  }
  .mad-sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 10px;
  }
  .mad-sheet-close { background: none; border: none; color: var(--text-sub); font-size: 15px; padding: 4px 8px; }
  .mad-sheet-list { display: flex; flex-direction: column; gap: 8px; }
  .mad-sheet-item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
    background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
    padding: 12px 14px; text-align: left; color: var(--text);
  }
  .mad-sheet-item.is-current { border-color: var(--accent); background: var(--accent-soft); }
  .mad-sheet-item-name { font-size: 14px; font-weight: 700; }
  /* #71（P1束H）: 「使える画面 N/M」。判定バッジと同じ行の直下・小さく・控えめに出す。 */
  .mad-sheet-item-avail { display: block; margin-top: 2px; font-size: 11px; font-weight: 600; color: var(--text-sub); }

  /* (5) トーストがボトムタブに重ならないよう持ち上げる */
  .mad-toast { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  /* クリエイティブ画面のプレビューFAB（幅1200px未満で出る）も同様に持ち上げる */
  .mad-preview-fab { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
}

/* ===== ホーム（スマホ）2026-08-27 =====
 * mobile-ux-redesign の P0（主数字＝直近7日／前期比／気にすべき1件／シート警告の移設）と、
 * 先行実装したスマホ専用ナビゲーションの積み残し（ヘッダーのサービス切替とコンテキストバーの
 * 重複、ハブ画面の見出し重複）の後始末。
 * ⚠️ PC（901px以上）の見た目は1pxも変えない。表示の出し分けはすべて
 *    @media (max-width: 900px) / (max-width: 640px) の中だけで行う。
 * ⚠️ .mad- プレフィックス必須。既存ブロックには混ぜず、この末尾セクションだけで完結させる。 */

/* 期間トグル（直近7日／今月）。ボタンの見た目はサマリー・クリエイティブの期間フィルタと
   同じ .mad-cfilter-btn を使い回す＝画面ごとに操作感が変わらないようにする。
   PCでもこのトグルは出す（藤山さんはスマホだが、PCで見たときに主数字の期間が
   分からない状態を作らないため）。 */
.mad-home-toolbar { margin-bottom: 10px; }

/* 前期比。判定カードの真下に置く軽い箱（パネルにしない＝1画面目から数字を押し出さない）。
   CPAは下がるほど良い＝矢印の向き（増減）と色（良し悪し）を分けている。 */
.mad-home-delta { margin: 0 0 12px; }
.mad-home-delta-head { font-size: 12px; font-weight: 700; color: var(--text-sub); margin-bottom: 6px; }
.mad-home-delta-note { margin-top: 8px; }
.mad-home-delta-note > summary { cursor: pointer; font-weight: 700; }
.mad-home-delta-items { display: flex; flex-wrap: wrap; gap: 10px; }
.mad-home-delta-item {
  display: flex; flex-direction: column; gap: 3px; flex: 1 1 150px; min-width: 0;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
}
.mad-home-delta-item .k { font-size: 11.5px; color: var(--text-sub); font-weight: 700; }
.mad-home-delta-item .v { font-size: 17px; font-weight: 800; }
.mad-home-delta-item .v.is-good { color: var(--good); }
.mad-home-delta-item .v.is-bad { color: var(--bad); }
.mad-home-delta-item .v.is-flat, .mad-home-delta-item .v.is-none { color: var(--text-sub); }
.mad-home-delta-item .d { font-size: 11.5px; color: var(--text-sub); line-height: 1.5; }

/* 気にするなら、この1つ（藤山さん向けの1件）と、菱田さんの宿題（残りを畳んだ1行） */
.mad-home-attention {
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 10px; padding: 10px 12px; margin: 10px 0 8px;
  background: var(--surface);
}
.mad-home-attention-label { font-size: 11.5px; font-weight: 700; color: var(--accent); margin-bottom: 4px; }
.mad-home-attention-note { font-weight: 400; font-size: 10.5px; color: var(--text-sub); margin-left: 4px; }
.mad-home-attention-target { font-size: 14.5px; font-weight: 800; line-height: 1.45; word-break: break-word; }
.mad-home-attention-reason { font-size: 12.5px; color: var(--text-sub); line-height: 1.6; margin-top: 3px; }
.mad-home-todo {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; margin-bottom: 10px;
  background: var(--bg); color: var(--text); text-decoration: none;
  font-size: 13px; font-weight: 700;
}
.mad-home-todo:hover { border-color: var(--accent); background: var(--accent-soft); }
.mad-home-todo-main { min-width: 0; }
.mad-home-todo-note { font-weight: 400; font-size: 10.5px; color: var(--text-sub); margin-left: 4px; }
.mad-home-todo-arrow { color: var(--text-sub); font-size: 17px; flex: none; }

/* シート未入力の注記（判定カードの外へ移した先）。畳んだ中身の書式だけ整える。 */
.mad-home-inputhealth { margin-bottom: 10px; }
.mad-home-inputhealth > summary { font-weight: 700; }
.mad-home-inputhealth-body { margin-top: 8px; line-height: 1.7; }

@media (max-width: 900px) {
  /* (1) ヘッダーのサービス切替<select>を隠す。新設のコンテキストバー（リアサポ ▾ › 今日の判定）が
     同じ役割を持っており、同じものが2つ並んでいた（スマホでは<select>が110pxまで縮んで
     サービス名も読めない）。PCでは従来どおり残す＝この@media の中だけで隠す。
     ⚠️ #mad-service-picker には app.js が hidden 属性を付け外しするが、ここは常に
        display:none で上書きしてよい（スマホでの主経路はサービス切替シート）。 */
  .mad-service-picker { display: none !important; }

  /* (2) 深掘りハブ（#hub）の見出しブロックを畳む。h1「深掘り - リアサポ」はコンテキストバーの
     「リアサポ › 深掘り」と同じことを言っており、その下の「管理シートから自動取込／シート最終更新」も
     ハブ（入口の一覧）には要らない情報だった。ハブ以外の画面では今までどおり出す。
     ⚠️ 消していない＝この画面でだけ畳んでいる。鮮度表示は他の全画面に今までどおり出る。 */
  body[data-mad-view="hub"] .mad-page-head { display: none; }

  /* (2b) ホームでも見出しだけ畳む。h1「今日の判定 ＋ 基準期間バッジ」はコンテキストバーの
     「リアサポ › 今日の判定」＋その下の期間トグルと同じことを言っており、iPhone 390pxでは
     この見出しだけで1画面目の1/4を使っていた（判定・実CPA・赤字ラインバー・前期比が
     1画面目に入らない直接の原因）。シート最終更新の鮮度表示は畳まず残す＝情報は消さない。 */
  body[data-mad-view="home"] .mad-page-title { display: none; }
  body[data-mad-view="home"] .mad-page-head { margin-bottom: 8px; }
  body[data-mad-view="home"] .mad-freshness { text-align: left; }

  /* (3) 期間トグルは指で押せる高さを確保する（44px目安）。 */
  .mad-home-toolbar .mad-cfilter-btn { padding: 9px 14px; font-size: 13px; }

  /* (4) 前期比は横3列だと1項目90px程度まで潰れて金額が折り返すため、2列に落とす。 */
  .mad-home-delta-item { flex: 1 1 calc(50% - 5px); }

  /* (5) #67/#72（P1束H・レビュー指摘M1〜M3で再設計）: 右上の期間チップ列。
     M1: .mad-page-right を全幅化し、チップ列（＋鮮度表示）に自分の1行を占有させる
     （.mad-page-head 側は既に flex-wrap:wrap のため、右側を100%にすれば独立した行になる）。
     M2: チップ本体は #mad-view-period 直下の .mad-view-period-chips（views.js
     homePeriodButtonsHtml/summaryPeriodButtonsHtml が返す箱・PCではdisplay:contents）が持つ。
     nowrap+overflow-xで横スクロールにする（wrapと同居すると横スクロールが実質機能しない＝
     旧実装のバグ）。キャプション（.mad-period-caption）はチップ列の外＝#mad-view-period
     直下の兄弟要素のまま、チップのスクロールに巻き込まれない。
     M3: チップ列は .mad-ctxbar と同じ作法（sticky・ヘッダー直下に固定）でスクロールしても
     消えない。⚠️ 「親指の可動域」を踏まえた最終配置（上端sticky か ボトムタブ直上か）は
     藤山さん保留のため、今回は上端sticky で実装した。 */
  .mad-page-right { flex: 1 1 100%; }
  #mad-view-period {
    display: flex; flex-direction: column; align-items: stretch;
    width: 100%; border: none; padding: 6px 0; gap: 4px;
    background: var(--surface);
    position: sticky; top: var(--header-h); z-index: 55;
  }
  .mad-view-period-chips {
    display: flex; flex-wrap: nowrap; gap: 6px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .mad-view-period-chips::-webkit-scrollbar { display: none; }
  #mad-view-period button {
    flex: 0 0 auto; white-space: nowrap;
    background: var(--bg); border: 1px solid var(--border);
    padding: 8px 14px; min-height: 40px;
  }
  #mad-view-period button.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
  .mad-period-caption { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-sub); }

  /* #72（P1束H）: SPでは短縮チップを出し、フル表記は隠す。 */
  .mad-cpa-metric-full { display: none; }
  .mad-cpa-metric-chip { display: inline; }
}

@media (max-width: 640px) {
  /* 1画面目に「判定・実CPA・赤字ラインバー・前期比」を収めるための詰め。
     フォントは落とさず（読めなくなる）、余白だけを削る。 */
  .mad-home-toolbar { margin-bottom: 8px; }
  /* 1項目=2行（1行目「指標名 …… 増減」／2行目「前の7日 A → B」）に詰める。
     3項目を縦に並べても、判定カードのすぐ下に実CPAの増減が入る高さに収める。 */
  .mad-home-delta-item { flex: 1 1 100%; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; padding: 8px 11px; }
  .mad-home-delta-item .k { flex: 1 1 auto; }
  .mad-home-delta-item .v { flex: 0 0 auto; font-size: 15px; }
  .mad-home-delta-item .d { flex: 1 1 100%; }
  .mad-home-attention { margin: 8px 0 6px; }
}

/* ───── 期間の広告費カバレッジ（2026-08-27・藤山さん指示「広告費は必ずすべて入れる／
   入っていなければそれが分かるように」）。「期間の広告費」カードの直下に置く。
   存在と金額は畳まない（畳んでよいのは内訳だけ）ため、通常の注記より少し強い見た目にする。 */
.mad-coverage {
  margin: -4px 0 12px; padding: 10px 12px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  font-size: 12.5px; line-height: 1.65;
}
.mad-coverage.is-incomplete {
  border-color: color-mix(in srgb, var(--warn) 45%, transparent);
  background: color-mix(in srgb, var(--warn) 7%, transparent);
}
.mad-coverage-head { font-weight: 700; }
.mad-coverage-missing { margin-top: 6px; color: var(--warn); font-weight: 700; }
.mad-coverage-missing .sub { display: block; margin-top: 2px; font-weight: 400; color: var(--text-sub); }
.mad-coverage-detail { margin-top: 8px; }
.mad-coverage-detail > summary { cursor: pointer; font-weight: 700; color: var(--text-sub); }
.mad-coverage-detail ul { margin: 6px 0 0; padding-left: 1.2em; }
.mad-coverage-detail .sub { display: block; margin-top: 4px; color: var(--text-sub); }
/* 実CPAの真横に出す「実際はもっと高い可能性」のしるし。数字と同じ行に置く。 */
.mad-cpa-flag {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; vertical-align: middle; white-space: nowrap;
  background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn);
}
.mad-coverage-missing.is-info { color: var(--text-sub); font-weight: 600; }

/* 概算の広告費（2026-08-27・藤山さん指示：藤山リスト・奈古リストのシステム実費を月額概算計上）。
   実額（.mad-coverage-missing・included）とは意図的に色を分け、「概算」バッジを必ず添えて
   同じ顔で並べない（設計書§13）。 */
.mad-coverage-estimated { margin-top: 6px; color: var(--accent); font-weight: 700; }
.mad-coverage-estimated .sub { display: block; margin-top: 2px; font-weight: 400; color: var(--text-sub); }
.mad-estimate-pill {
  display: inline-block; margin: 0 6px; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; vertical-align: middle; white-space: nowrap;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent);
}

/* ───────────────────────── セクションタブ（2026-08-27 mobile-ux-redesign P1）
 *
 * 長いページ（Meta広告 9,283px＝iPhone 390pxで約11画面分／クリエイティブ 7,054px）を
 * スマホでだけ意味のまとまりで切る。docs/mobile-ux-redesign.md §3「P1 長いページを切る」。
 *
 * ⚠️ PCの見た目は1pxも変えない。ここでの既定（メディアクエリの外）は
 *    「タブバーは出さない・セクションは全部そのまま縦に並べる」＝従来と完全に同じ状態。
 *    切り分けが起きるのは @media (max-width: 900px) の中だけ。
 * ⚠️ セクションの中身は常に生成されている（JS側で display の切替に頼っている）。
 *    ここで display:none を外すと、PCでは全部が出る＝従来どおりになる。 */
.mad-sectabs { display: none; }

@media (max-width: 900px) {
  /* タブバーはコンテキストバー（fixed・高さ36px）の直下に貼り付ける。
     ヘッダー(--header-h)＋コンテキストバー(36px)ぶんを上に確保して sticky させるので、
     どこまでスクロールしても「いま何のセクションを見ているか」が画面から消えない。
     ⚠️ 100dvh + overflow:hidden の固定箱にはしない（自然スクロールを維持・POKIパターン）。 */
  .mad-sectabs {
    display: flex; gap: 6px;
    position: sticky; top: calc(var(--header-h) + 36px); z-index: 60;
    margin: -4px -16px 12px; padding: 8px 16px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    background: var(--surface); border-bottom: 1px solid var(--border);
  }
  .mad-sectabs::-webkit-scrollbar { display: none; }
  .mad-sectab {
    flex: 1 0 auto; min-height: 40px; padding: 8px 14px;
    background: var(--bg); border: 1px solid var(--border); border-radius: 999px;
    color: var(--text-sub); font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer;
  }
  .mad-sectab.is-active {
    background: var(--accent-soft); border-color: var(--accent); color: var(--accent);
  }
  /* 選択されていないセクションはスマホでだけ隠す。中身は生成済みのまま残っている
     （遅延生成にすると renderTrendChart / wireMetaEvents が対象を見つけられず静かに壊れる）。 */
  .mad-sec[data-active="false"] { display: none; }
}

/* ───────────────────────── 「今日やるべきこと」の圧縮（2026-08-27 mobile-ux-redesign P1）
 *
 * 1件200〜400字の作業指示書は菱田さん（広告運用の実務担当）向けであって、藤山さん
 * （数字を見る人）が読む文章ではない。見出し＋結論1行だけを常時見せ、①②③の手順は
 * タップで開く。⚠️ 畳んだ中身の文章は1行も削っていない＝移設であって削除ではない
 * （views.js:808-809 と同じ規律）。 */
.mad-action-how { margin-top: 6px; }
.mad-action-how > summary {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12.5px; font-weight: 700; color: var(--accent);
  padding: 4px 0;
}
.mad-action-how .mad-action-detail {
  margin-top: 4px; padding-left: 12px;
  border-left: 2px solid var(--border);
}
.mad-action-how .mad-action-detail > * + * { margin-top: 5px; }

@media (max-width: 900px) {
  /* 指で押せる高さを確保する（44px目安）。 */
  .mad-action-how > summary { padding: 8px 0; font-size: 13px; }
}

/* ===== クリエイティブ工房・工房トップ（2026-08-28 studio-ui-entry） =====
 * 画面の実体は public/modules/views/studio-home.js / studio-inbox.js。
 * ⚠️ 既存クラスの定義は書き換えず、.mad-studio-* / .mad-inbox-* の名前空間だけで足す
 *    （既存画面へのデグレを構造的に防ぐ）。色は既存トークンのみ＝ダークテーマ自動追随。
 * 情報階層: ①残枠（数字が主役・取れない値は「未確定」のまま出す＝0や—で埋めない）
 *           ②今日やること（要対応が主役） ③状態別セクション（従）。 */
.mad-studio-hero {
  border: 1px solid var(--border); border-radius: 14px;
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--surface) 62%);
  padding: 16px 16px 14px; margin-bottom: 14px;
}
.mad-studio-hero-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.mad-studio-hero-title { font-size: 16px; font-weight: 800; letter-spacing: 0.01em; }
.mad-studio-hero-title .hint { margin-left: 8px; font-size: 11px; font-weight: 600; color: var(--text-sub); }
.mad-studio-hero-reload {
  margin-left: auto; background: none; border: 1px solid var(--border); border-radius: 999px;
  color: var(--text-sub); font-size: 12px; font-weight: 600; padding: 6px 14px; min-height: 32px;
}
.mad-studio-hero-reload:hover { border-color: var(--accent); color: var(--accent); }

/* 残枠 = 数字が主役のタイル。1サービス1タイル。 */
.mad-studio-quota { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.mad-studio-stat {
  flex: 1 1 240px; min-width: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 14px; box-shadow: var(--shadow);
}
.mad-studio-stat-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.mad-studio-stat-svc { font-size: 12px; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: 0.04em; }
.mad-studio-stat-month { font-size: 11px; color: var(--text-sub); }
.mad-studio-lanes { display: flex; gap: 16px; flex-wrap: wrap; }
.mad-studio-lane { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mad-studio-lane-k { font-size: 11px; font-weight: 600; color: var(--text-sub); }
.mad-studio-lane-v { font-size: 13px; color: var(--text); }
.mad-studio-lane-v b { font-size: 24px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.mad-studio-lane-v small { font-size: 11px; color: var(--text-sub); font-weight: 600; }
.mad-studio-stat--exhausted .mad-studio-lane-v b { color: var(--warn); }
/* 取れない値は数字を出さず「未確定」を明示（既存設計原則: 0や—で「大丈夫そう」に見せない） */
.mad-studio-lane-v .mad-studio-unknown { font-size: 15px; font-weight: 700; color: var(--text-sub); }
.mad-studio-stat--unknown { border-color: color-mix(in srgb, var(--bad) 45%, var(--border)); }
.mad-studio-stat-detail { margin-top: 4px; font-size: 11.5px; color: var(--text-sub); line-height: 1.5; }
.mad-studio-stat--unknown .mad-studio-stat-detail { color: var(--bad); }

/* 行動列: 主役CTA1つ＋脇のチップ。タップ領域44px以上。 */
.mad-studio-actions2 { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; }
.mad-studio-cta {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 1px;
  background: var(--accent); color: #fff; border: none; border-radius: 12px;
  padding: 10px 20px; min-height: 48px; text-decoration: none;
  font-size: 14px; font-weight: 800; box-shadow: var(--shadow);
  transition: opacity 0.15s, box-shadow 0.15s, transform 0.1s;
}
.mad-studio-cta:hover { opacity: 0.92; box-shadow: var(--shadow-hover); }
.mad-studio-cta-sub { font-size: 10.5px; font-weight: 600; opacity: 0.85; }
.mad-studio-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 16px; min-height: 48px; text-decoration: none; font-size: 12.5px; font-weight: 700;
  transition: border-color 0.15s, background 0.15s;
}
.mad-studio-chip:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

/* 今日やること: 要対応（u3）が最上段に来る（並びは buildTodayList の緊急度ソート）。 */
.mad-studio-today { margin: 0 0 14px; }
.mad-studio-today-h { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; font-size: 13.5px; font-weight: 800; }
.mad-studio-today-h .hint { font-size: 11px; font-weight: 600; color: var(--text-sub); }
.mad-studio-today-row {
  display: flex; gap: 10px; align-items: center; min-height: 48px;
  padding: 9px 12px; border-radius: 12px; margin-bottom: 8px; font-size: 13px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
}
.mad-studio-today-ico { font-size: 17px; line-height: 1; flex-shrink: 0; width: 22px; text-align: center; }
.mad-studio-today-txt { min-width: 0; line-height: 1.5; }
.mad-studio-today-row--u3 { border-left: 4px solid var(--bad); background: color-mix(in srgb, var(--bad) 5%, var(--surface)); }
.mad-studio-today-row--u2 { border-left: 4px solid var(--warn); }
.mad-studio-today-row--u1 { border-left: 4px solid var(--status-plan); }
.mad-studio-today-row--u0 { border-left: 4px solid var(--good); }
.mad-studio-today-go {
  margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center;
  min-height: 36px; padding: 6px 16px; border-radius: 999px; text-decoration: none;
  background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 700;
  white-space: nowrap;
}
.mad-studio-today-go:hover { background: var(--accent); color: #fff; }

/* 空状態: 寂しくしない＝次の1アクションへ導く。 */
.mad-studio-zero {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  border: 1px dashed var(--border-strong); border-radius: 14px; padding: 26px 16px; margin: 0 0 14px;
}
.mad-studio-zero-ico { font-size: 34px; line-height: 1; }
.mad-studio-zero-title { font-size: 14.5px; font-weight: 800; }
.mad-studio-zero-desc { font-size: 12.5px; color: var(--text-sub); max-width: 34em; line-height: 1.7; }
.mad-studio-zero .mad-studio-cta { margin-top: 8px; }

/* 読み込み中スケルトン（ガタつき防止・初回のみ。2回目以降は前回データを出したまま更新） */
.mad-studio-skel { border-radius: 12px; background: var(--border); animation: mad-studio-pulse 1.2s ease-in-out infinite; margin-bottom: 8px; }
.mad-studio-skel--stat { height: 76px; }
.mad-studio-skel--row { height: 48px; }
@keyframes mad-studio-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.9; } }

/* 状態別セクション（従）: 行の見た目を「今日やること」と揃えるが、左帯なし＝主従を色量で分ける */
.mad-inbox-section { margin: 12px 0; }
.mad-inbox-section h4 { margin: 6px 0 8px; font-size: 12.5px; font-weight: 800; color: var(--text-sub); }
.mad-inbox-section h4 .hint { margin-left: 6px; font-size: 11px; font-weight: 600; }
.mad-inbox-row {
  display: flex; gap: 10px; align-items: center; min-height: 48px;
  padding: 8px 12px; border-radius: 12px; margin-bottom: 8px; font-size: 13px;
  background: var(--surface); border: 1px solid var(--border);
}
.mad-inbox-row--highlighted { border-color: var(--accent); background: var(--accent-soft); }
.mad-inbox-row-job4 { font-weight: 800; font-variant-numeric: tabular-nums; }
.mad-inbox-row-service { font-size: 11px; font-weight: 700; color: var(--text-sub); text-transform: uppercase; }
.mad-inbox-row-go {
  margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center;
  min-height: 36px; padding: 6px 16px; border-radius: 999px; text-decoration: none;
  background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.mad-inbox-row-go:hover { background: var(--accent); color: #fff; }

@media (max-width: 640px) {
  .mad-studio-lane-v b { font-size: 21px; }
  .mad-studio-cta { flex: 1 1 100%; align-items: center; }
  .mad-studio-chip { flex: 1 1 calc(50% - 4px); justify-content: center; }
}

/* サイドバーの工房項目はアンカー（深いリンクを href に持つ）。既存 .mad-nav-item の定義は
   触らず、アンカーに使われたときの下線・ポインタだけ足す（2026-08-28 studio-ui-entry）。 */
a.mad-nav-item { text-decoration: none; cursor: pointer; }

/* ===== クリエイティブ工房・選別画面（2026-08-28 select-screen-css） =====
 * 画面の実体は public/modules/views/studio-select.js（画面3・#studio/select/{jobId}）。
 * ⚠️ 既存クラスの定義は書き換えず、.mad-select-* の名前空間だけで足す（工房トップの
 *    .mad-studio-* 移設と同じ方針。studio-home.js の <style> 注入側には書かない＝
 *    同名クラスが2箇所に割れると後読み<style>が mad.css を上書きする）。
 * 色は既存トークンのみ＝ダークテーマ自動追随。デザイン言語は .mad-studio-today-row /
 * .mad-studio-stat（surface＋border＋radius12）に揃える。
 * 菱田さんが月2回×15〜20分、数十〜200案を仕分ける画面＝「候補を素早く送り、採用を確定する」
 * 動線が主役。確定ボタンはスマホでは固定アクションバー化する（吟味中も常に届く）。 */

/* ── レーン別残枠ヘッダ（採用 n/計画m本は確定バーにも同居させるが、正の表示はこちら） ── */
.mad-select-quota {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 0 0 10px; font-size: 12.5px;
}
.mad-select-quota-adopted {
  font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--text);
}
.mad-select-quota .mad-note { flex: 1 1 100%; margin-top: 4px; }

/* ── フィルタツールバー（上位10案／全て展開／NG警告のみ）。既定の .mad-refresh-btn は
      accent塗りの主役ボタンなので、絞り込みチップはセクションタブ(.mad-sectab)の言語に落とす ── */
.mad-select-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 0 0 12px;
}
.mad-select-toolbar .mad-refresh-btn {
  background: var(--bg); color: var(--text-sub);
  border: 1px solid var(--border); border-radius: 999px;
  font-size: 12.5px; font-weight: 700; padding: 8px 14px; min-height: 36px;
}
.mad-select-toolbar .mad-refresh-btn:hover:not(:disabled) {
  opacity: 1; border-color: var(--accent); color: var(--accent);
}
.mad-select-toolbar .hint { flex: 0 1 auto; }

/* ── 候補グリッド。minmax(min(160px,100%),1fr) の min() が肝＝親幅160px未満でも列幅が
      親を超えない（100%側が勝つ）ため body ごと横スクロールする事故が構造的に起きない ── */
.mad-select-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
  margin: 0 0 12px;
}

/* ── 候補カード。カード自体が role="button"（クリック/Enter/Spaceでプレビュー対象を切替）
      なのでタップ領域と focus-visible を持つ。内容量でmin-height 44pxは常に超えるが明示する ── */
.mad-select-card {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 44px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 12px; box-shadow: var(--shadow); cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mad-select-card:hover { border-color: var(--accent); }
.mad-select-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mad-select-card--active { border-color: var(--accent); box-shadow: var(--shadow-hover); }
.mad-select-card--blocked { border-color: color-mix(in srgb, var(--bad) 45%, var(--border)); }
/* 除外済み: 色・薄さだけに頼らず「除外済み」ラベル（JS側で付与）＋番号の打ち消し線でも示す */
.mad-select-card--rejected { opacity: 0.6; }
.mad-select-card--rejected .mad-select-card-rank { text-decoration: line-through; }

.mad-select-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.mad-select-card-rank {
  font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; margin-right: auto;
}
.mad-select-card-score {
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--text-sub);
}
.mad-select-card-ratios, .mad-select-card-checks { display: flex; flex-wrap: wrap; gap: 4px; }

/* studio-select.js は既存M-ADの確立済み修飾子 ok/bad を .mad-pill に併用するが、
   mad.css 既定の .mad-pill には on/off/ng/warn しか無い（既存定義は書き換えない）。
   この画面のコンテナ配下に限って ok/bad の配色を足す。 */
.mad-select-quota .mad-pill.ok, .mad-select-card .mad-pill.ok {
  background: color-mix(in srgb, var(--status-active) 16%, transparent); color: var(--good);
}
.mad-select-quota .mad-pill.bad, .mad-select-card .mad-pill.bad {
  background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad);
}

/* 11〜12.5pxの補足テキスト（hint・score）は --text-sub のままだと --surface 上でも
   ぎりぎり（#6b7280/#fff=4.84:1）、カード内は情報密度が高く更に小さい字が増えるため、
   text 側へ25%寄せて確実にAA(4.5:1)を超えさせる（light実測: #585e6c ≒ 6.3:1）。
   ダークテーマでは text-sub→text が明るくなる方向なので同式で自動的に改善する。 */
.mad-select-card .hint, .mad-select-card-score {
  color: color-mix(in srgb, var(--text-sub) 75%, var(--text));
}

/* ── NG警告ブロック（採用不可の理由と言い換え動線） ── */
.mad-select-ng-block {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  border: 1px solid color-mix(in srgb, var(--bad) 40%, var(--border));
  background: color-mix(in srgb, var(--bad) 6%, transparent);
  border-radius: 10px; padding: 8px 10px; font-size: 12px;
}
.mad-select-ng-hit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* 言い換えボタン2種はイベント配線用のフックでもある。見た目は同ブロック内の
   .mad-select-ng-block .mad-refresh-btn（枠線チップ）を継承し、再合成の主ボタンだけ強調する */
.mad-select-rephrase-alt { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.mad-select-ng-block .mad-select-rephrase {
  border-color: color-mix(in srgb, var(--bad) 40%, var(--border)); color: var(--bad);
}

/* ── カード内の操作列（採用チェック・除外・言い換え）。カードの主click（プレビュー切替）と
      役割が違うので、ボタンは accent塗りでなく枠線チップに落として視覚の主従を分ける ── */
.mad-select-card-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto;
}
.mad-select-card-actions .mad-refresh-btn,
.mad-select-ng-block .mad-refresh-btn {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 999px;
  font-size: 12px; font-weight: 700; padding: 7px 12px; min-height: 36px;
}
.mad-select-card-actions .mad-refresh-btn:hover:not(:disabled),
.mad-select-ng-block .mad-refresh-btn:hover:not(:disabled) {
  opacity: 1; border-color: var(--accent); color: var(--accent);
}
.mad-select-adopt {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 4px 8px 4px 2px;
  font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.mad-select-adopt input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.mad-select-adopt input:disabled { cursor: default; }
.mad-select-adopt input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 採用不可の理由（.mad-note併用）はカード内では詰めて出す */
.mad-select-card .mad-select-disabled-reason { margin-top: 4px; padding: 8px 10px; font-size: 11.5px; }

/* ── 実機風プレビュー（フィード/リール切替） ── */
.mad-select-detail { margin: 14px 0 0; }
.mad-select-preview {
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px;
}
.mad-select-preview-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.mad-select-preview-tabs .mad-refresh-btn {
  background: var(--surface); color: var(--text-sub);
  border: 1px solid var(--border); border-radius: 999px;
  font-size: 12.5px; font-weight: 700; padding: 8px 16px; min-height: 36px;
}
.mad-select-preview-tabs .mad-refresh-btn:hover:not(:disabled) { opacity: 1; border-color: var(--accent); }
.mad-select-preview-tab { flex: 0 0 auto; }
.mad-select-preview-tab--active,
.mad-select-preview-tabs .mad-select-preview-tab--active {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent);
}
.mad-select-preview-frame { display: flex; align-items: center; justify-content: center; min-height: 120px; }
/* タブ切替はJSが --hidden 修飾子を付け外しする（studio-select.js:250-252）。定義必須 */
.mad-select-preview-frame--hidden { display: none; }
/* max-width:100% + height:auto が横はみ出し防止の直接手当て。さらに 9:16 を390px全幅で
   出すと高さ693px＝1画面を丸ごと奪うため、max-height:62vh の高さ基準フィットに倒す
   （62vh≈523pxなら9:16は幅約294px・1:1/4:5も同式で自動的に収まる） */
.mad-select-preview-img {
  display: block; max-width: 100%; height: auto;
  max-height: 62vh; width: auto; margin: auto;
  border-radius: 8px; border: 1px solid var(--border);
}
/* 動画（スライドショーMP4）も画像と同じ高さ基準フィット（max-height:62vh）。
   9:16 を390px幅で全幅表示すると高さ693px＝1画面を超えてスクロールを奪うため、
   .mad-select-preview-img と同値で揃える（新しいレイアウトの型を作らない） */
.mad-select-preview-video {
  display: block; max-width: 100%; height: auto;
  max-height: 62vh; width: auto; margin: auto;
  border-radius: 8px; border: 1px solid var(--border);
}
.mad-select-preview-video[hidden] { display: none; }

/* ── K-02 冒頭サムネストリップ（0/25/50/75/100%へシーク）＋ K-01 無音表示 ── */
.mad-video-strip {
  display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 8px;
}
.mad-video-strip-btn { min-width: 56px; }
/* 無音は「正常状態」なので警告色にしない（K-01の核心）。情報色で静かに出す。 */
.mad-video-audio { margin-top: 8px; text-align: center; }
.mad-video-audio--info { opacity: .85; }

/* ── 基準セット比較パネル（Step 3・2026-08-29）候補（左）vs 基準セット同型（右）＋差し戻し理由 ── */
.mad-compare-panel {
  margin-top: 14px; padding: 12px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--card, rgba(127,127,127,.06));
}
.mad-compare-panel-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.mad-compare-panel-head button { margin-left: auto; }
.mad-compare-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mad-compare-col { display: flex; flex-direction: column; gap: 6px; }
.mad-compare-candidate-card, .mad-compare-ref-card {
  padding: 8px 10px; border-radius: 8px; background: var(--bg, #fff);
  border: 1px solid var(--border); font-size: 13px;
}
.mad-compare-reject { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 12px; }
.mad-compare-reject label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.mad-compare-reject select, .mad-compare-reject textarea {
  font-size: 13px; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--bg, #fff); color: inherit;
}
@media (max-width: 600px) { .mad-compare-cols { grid-template-columns: 1fr; } }

/* ── 確定アクションバー（採用カウンタ＋確定ボタン）。PCでは本文末尾のフッタ行 ── */
.mad-select-actionbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
}
.mad-select-actionbar-count {
  font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.mad-select-actionbar .mad-select-confirm {
  margin-left: auto; min-height: 48px; padding: 12px 24px; font-size: 14px; font-weight: 800;
}
.mad-select-actionbar .mad-note { flex: 1 1 100%; margin-top: 0; }
.mad-select-confirm:focus-visible,
.mad-select-toolbar .mad-refresh-btn:focus-visible,
.mad-select-card-actions .mad-refresh-btn:focus-visible,
.mad-select-ng-block .mad-refresh-btn:focus-visible,
.mad-select-preview-tabs .mad-refresh-btn:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* display:flex/grid は [hidden] のUAスタイル(display:none)を上書きするため明示的に戻す
   （mad.css:1261-1264 と同じ作法・.mad-toast[hidden]と同系の前例3箇所あり） */
.mad-select-quota[hidden], .mad-select-toolbar[hidden], .mad-select-grid[hidden],
.mad-select-card[hidden], .mad-select-card-head[hidden], .mad-select-card-ratios[hidden],
.mad-select-card-checks[hidden], .mad-select-card-actions[hidden], .mad-select-ng-block[hidden],
.mad-select-ng-hit[hidden], .mad-select-preview-tabs[hidden], .mad-select-preview-frame[hidden],
.mad-select-actionbar[hidden] { display: none; }

/* このセクションで足したtransitionはホバー装飾のみ＝動きを止めても機能は失わない */
@media (prefers-reduced-motion: reduce) {
  .mad-select-card,
  .mad-select-toolbar .mad-refresh-btn,
  .mad-select-card-actions .mad-refresh-btn,
  .mad-select-ng-block .mad-refresh-btn,
  .mad-select-preview-tabs .mad-refresh-btn { transition: none; }
}

@media (max-width: 900px) {
  /* 確定バーを下部タブ(56px+safe-area)の直上に固定する。候補10案＋展開で数十案を
     吟味している間もページ最下部へ戻らずに確定へ届く（hub.js冒頭の「入口が最下部」事故の同型回避）。
     z-index はボトムタブ(95)の下・コンテキストバー(90)の上。
     ⚠️ max()や100dvh+overflow:hiddenは使わない＝既存の固定値+env()加算形（mad.css:1311）に揃える。 */
  body[data-mad-view="studio"] .mad-select-actionbar {
    position: fixed; left: 0; right: 0;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    z-index: 94; margin: 0; border-top: 1px solid var(--border);
    padding: 10px 16px;
    background: var(--surface-header);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
  }
  body[data-mad-view="studio"] .mad-select-actionbar[hidden] { display: none; }
  /* 固定バーの実高（padding 10+10 + ボタン48 = 68px）ぶん本文の下余白を足す。
     既存 .mad-main の 88px（mad.css:1311）に 68px を足した加算形＝env() は1回だけ
     （二重加算しない。下部タブのsafe-areaはタブ自身の padding-bottom が吸収済み）。
     ⚠️ body[data-mad-view] で studio ビューにだけスコープ（app.js:489 が設定）。
     工房の他画面（バー無し）では 68px が余白として余るが、「バーに本文が隠れる」側の
     事故を :has() 非対応環境でも構造的に出さないことを優先した。 */
  body[data-mad-view="studio"] .mad-main {
    padding-bottom: calc(156px + env(safe-area-inset-bottom, 0px));
  }
  /* トーストは既定でボトムタブの上(88px+env・mad.css:1369)。工房では固定バー
     （上端=56+68=124px+env）にも重なるため、さらにその上へ持ち上げる。 */
  body[data-mad-view="studio"] .mad-toast {
    bottom: calc(132px + env(safe-area-inset-bottom, 0px));
  }
  /* スマホは62vhだとアドレスバー分で窮屈になりやすいので、少しだけ詰めて
     「プレビュー＋確定バー」が1画面に共存できる高さに留める */
  .mad-select-preview-img { max-height: 56vh; }
}

/* ===== 選別画面 三値判定レイアウト（2026-08-29 triage-ui・team-lead確定仕様） =====
 * 左=幅360px固定の縦1列サムネストリップ（実配信相当・拡大縮小しない）、
 * 右=選択中の実寸プレビュー（モーダルを開かない・選択と同時に切替）。
 * ⚠️ 既存 .mad-select-grid の定義（auto-fillグリッド・min()による横スクロール防止）は
 *    書き換えず残す（test-studio-select-ui.mjs の構造検査対象）。ここでは
 *    `.mad-triage-layout .mad-select-grid` という、より詳細度の高い同一セレクタの
 *    後続宣言として1列固定へ上書きする（カスケードの後勝ち）。 */
.mad-triage-layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.mad-triage-layout .mad-select-grid {
  grid-template-columns: minmax(min(360px, 100%), 360px);
  flex: 0 0 min(360px, 100%);
  max-width: 360px;
  max-height: 78vh; overflow-y: auto; padding-right: 2px;
}
.mad-triage-layout .mad-select-detail { flex: 1 1 320px; min-width: 0; margin: 0; }
@media (max-width: 900px) {
  .mad-triage-layout { flex-direction: column; }
  .mad-triage-layout .mad-select-grid { max-width: 100%; flex-basis: auto; max-height: 46vh; }
}

/* ── 文脈プレースホルダー（他の投稿相当のグレー枠）。サムネ単体では映えても
      フィード内では埋もれる問題をストリップ上で可視化する（アートディレクター指摘）。 ── */
.mad-triage-placeholder {
  display: flex; align-items: center; justify-content: center;
  min-height: 56px; border-radius: 10px; border: 1px dashed var(--border);
  background: color-mix(in srgb, var(--text-sub) 8%, transparent);
  color: var(--text-sub); font-size: 11px; opacity: 0.7;
}

/* ── AI足切り分（自動除外）バー。既定で折りたたみ・展開すると復活できる（完全に隠さない）。 ── */
.mad-triage-autoexcluded-bar {
  width: 100%; text-align: left; justify-content: flex-start;
  background: color-mix(in srgb, var(--bad) 8%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--bad) 35%, var(--border));
  color: var(--text);
}
.mad-triage-context-toggle { background: var(--bg); }
.mad-triage-revive {
  align-self: flex-start; font-size: 11.5px; padding: 6px 10px; min-height: 30px;
}

/* ── 三値判定（keep/fix/drop）操作群 ── */
.mad-triage-actions { margin-top: 4px; }
.mad-triage-btn--active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.mad-triage-drop-reasons { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.mad-triage-reason-list { display: flex; flex-wrap: wrap; gap: 4px; }
.mad-triage-reason-btn {
  background: var(--bg); border: 1px solid var(--border); border-radius: 999px;
  font-size: 11px; font-weight: 700; padding: 5px 9px; min-height: 28px;
}
.mad-triage-reason-btn:hover:not(:disabled) { border-color: var(--bad); color: var(--bad); }
.mad-triage-reason-btn--active { border-color: var(--bad); color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); }
.mad-triage-fixnote-label { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.mad-triage-fixnote {
  font-size: 12.5px; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--bg); color: inherit; resize: vertical; min-height: 44px;
}
.mad-triage-fixnote:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* display:flex/grid は [hidden] のUAスタイル(display:none)を上書きするため明示的に戻す
   （既存作法・.mad-select-*[hidden] と同系） */
.mad-triage-layout[hidden], .mad-triage-placeholder[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .mad-triage-reason-btn, .mad-triage-btn--active { transition: none; }
}

/* ===== F. 選別・比較・再利用（改善バックログ100・2026-08-31）===============
 * F-01 並置グリッド＋合格優先ソート／F-02 一括操作＋モバイルスワイプ／
 * F-05 迷い置き場（第4状態）＋殿堂入り／F-06 却下理由の自由記述。
 * F-04（この条件で作り直す）はリンク（.mad-triage-recreate）のみで専用CSSは不要
 * （.mad-refresh-btn の見た目をそのまま使う）。 */

/* F-02: 一括操作バー */
.mad-select-bulkbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.mad-select-bulkbar .hint { flex: 1 1 100%; }

/* F-01: 並置グリッド（4列・等スケール）。min()で狭い画面でも横はみ出ししない（既存.mad-select-gridと同作法）。 */
.mad-select-grid--wide {
  grid-template-columns: repeat(4, minmax(min(220px, 100%), 1fr));
}
@media (max-width: 1100px) { .mad-select-grid--wide { grid-template-columns: repeat(2, minmax(min(220px, 100%), 1fr)); } }
@media (max-width: 640px) { .mad-select-grid--wide { grid-template-columns: 1fr; } }

.mad-select-gridbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 10px; }

/* 合格=枠なし（既定の.mad-select-cardのまま）／不合格=赤枠＋理由バッジ */
.mad-select-card.is-fail { border-color: var(--bad); }
.mad-select-card-failbadge {
  font-size: 11px; font-weight: 700; color: var(--bad);
  background: color-mix(in srgb, var(--bad) 12%, transparent);
  border-radius: 6px; padding: 2px 6px; align-self: flex-start;
}
.mad-select-card--bookmarked { border-color: var(--warn, #b8860b); }

.mad-select-card-pickcompare { display: flex; align-items: center; gap: 4px; }

/* F-01: 2枚並置比較の差分テーブル */
.mad-select-pairdiff {
  margin-top: 12px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 12px;
}
.mad-select-pairdiff-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.mad-select-pairdiff-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mad-select-pairdiff-table th, .mad-select-pairdiff-table td {
  border-bottom: 1px solid var(--border); padding: 6px 8px; text-align: left; vertical-align: top;
}
.mad-select-pairdiff-table th { color: var(--text-sub); font-weight: 700; }

/* F-05: ブックマーク・殿堂入り */
.mad-triage-bookmark--active { border-color: var(--warn, #b8860b); color: var(--warn, #b8860b); }
.mad-triage-hof { margin-top: 6px; }
.mad-triage-hof-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mad-triage-hof-input {
  flex: 1 1 160px; min-width: 0; padding: 6px 8px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--bg); color: var(--text); font: inherit;
}

/* F-06: 「その他」の自由記述欄 */
.mad-triage-other-reason-label { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.mad-triage-other-reason {
  width: 100%; min-height: 44px; padding: 6px 8px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; resize: vertical;
}

/* F-04: 「この条件で作り直す」は .mad-refresh-btn（<a>）そのまま流用。役割上わずかに見分けやすく。 */
.mad-triage-recreate { text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  .mad-triage-bookmark--active { transition: none; }
}

/* ===== 工房の主役ボタン（.mad-btn-primary）=====================================
 * 2026-08-29 新設。工房5画面（新規生成・選別・入稿支援・訴求DB・工房トップ）が
 * `class="mad-refresh-btn mad-btn-primary"` の形で使っているのに、
 * `.mad-btn-primary` は mad.css に**1件も定義が無かった**（実測 grep -c = 0）。
 *
 * それでも見た目が壊れて見えなかったのは `.mad-refresh-btn` が併用されていたため。
 * ただし選別画面では `.mad-select-toolbar .mad-refresh-btn` 等が
 * 「従属ボタンを枠線チップに落とす」上書きを掛けており、**主役のはずのボタンまで一緒に落ちる**。
 * ＝「1画面に主役は1つ」という工房の設計意図が、CSSが無いせいで成立していなかった。
 *
 * ここでは新しい見た目を発明せず、`.mad-refresh-btn` の accent 塗りを
 * 「従属化の上書きに負けない」形で確定させるだけにする（トークンの値は変えない）。 */
.mad-btn-primary {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  font-weight: 700;
}
.mad-btn-primary:hover:not(:disabled) { opacity: 0.9; }
.mad-btn-primary:disabled { opacity: 0.55; cursor: default; }
/* 44px 以上のタップ領域（スマホ）。既存の padding だけだと 35px 前後にしかならない。 */
@media (max-width: 900px) {
  .mad-btn-primary { min-height: 44px; }
}

/* ===== 確認ゲート（G-03・2026-08-31・レーンd02msg）=============================
 * Meta本送信のような取り返しがつかない操作の確認。ブラウザ標準の confirm() は
 * ①ドライランと本送信が同じ見た目 ②Enter1回で通る ③明細を出せない、の3点で
 * 関所として使えないため置き換えた（public/modules/confirm-gate.js）。
 *
 * 色分けの意味は固定:
 *   .mad-gate--live   … 🔴 実際にMetaへ送られる（赤ヘッダー＋確認語のタイプ入力）
 *   .mad-gate--dryrun … 🟢 まだ送られない
 * 「押しやすくする」ためのCSSは足さない（間違って押せないことが目的）。 */
.mad-gate-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.mad-gate {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  width: min(640px, 100%); max-height: 86vh; overflow: auto;
  padding: 0 0 16px;
}
.mad-gate-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 14px 16px; border-radius: 12px 12px 0 0;
  color: #fff; font-size: 15px;
}
.mad-gate--live .mad-gate-head { background: var(--bad); }
.mad-gate--dryrun .mad-gate-head { background: var(--good); }
.mad-gate-badge { font-size: 18px; }
.mad-gate-lead { font-weight: 700; }
.mad-gate-note { padding: 12px 16px 0; color: var(--text-sub); font-size: 13px; }
.mad-gate-subject { padding: 8px 16px 0; font-weight: 700; }
.mad-gate-lines { margin: 10px 0 0; padding: 0 16px 0 32px; font-size: 13px; line-height: 1.8; }
.mad-gate-typed { padding: 12px 16px 0; }
.mad-gate-typed label { display: block; font-size: 13px; margin-bottom: 6px; }
.mad-gate-typed input {
  width: 100%; box-sizing: border-box; min-height: 44px;
  padding: 8px 10px; font-size: 16px;
  border: 2px solid var(--bad); border-radius: 8px;
  background: var(--surface); color: var(--text);
}
.mad-gate-typed-hint { min-height: 18px; margin-top: 6px; font-size: 12px; color: var(--bad); }
.mad-gate-actions { display: flex; gap: 8px; justify-content: flex-end; padding: 16px 16px 0; }
.mad-gate-confirm { background: var(--bad); color: #fff; border: 1px solid var(--bad); font-weight: 700; }
.mad-gate--dryrun .mad-gate-confirm { background: var(--good); border-color: var(--good); }
.mad-gate-confirm:disabled { opacity: 0.45; cursor: not-allowed; }
@media (max-width: 900px) {
  .mad-gate-actions .mad-refresh-btn { min-height: 44px; flex: 1; }
/* ★A-03（2026-08-31）: 結果カードの「選んだ条件／適用された条件」レシート。
   写真非反映（不具合1）・serviceId常時rsp（不具合4）は、画面から「選んだのに違う」ことが
   一切分からなかったのが被害を長引かせた真因。適用値を常設し、説明のつかない食い違いは赤で出す。 */
.mad-winner-receipt {
  margin-top: 6px;
  font-size: 11px;
}
.mad-winner-receipt > summary {
  cursor: pointer;
  color: #667085;
}
.mad-winner-receipt .mad-winner-result-detail > div {
  line-height: 1.6;
}
.mad-winner-receipt .mad-winner-result-detail > div.is-error {
  color: #b42318;
  font-weight: 700;
}
.mad-winner-receipt-note {
  color: #667085;
}

/* ───────────────────────── NUM-04（2026-09-02）: 「表示中: ◯◯」サービスチップ
   いま何のサービスの数字を見ているかを、本文を読まなくても分かる位置に常設する。
   値はヘッダーの選択値ではなく「実際に描いたデータが名乗るサービス」（service-chip.js）。
   不一致は色だけでなく文字（⚠ ヘッダーの選択と違います）でも必ず伝える
   ＝色のみで意味を持たせる要素をMアド内に作らない（NUM-10と同じ実装ルール）。 */
#mad-service-chip:empty { display: none; }
.mad-svc-chip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 10px; padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-sub, var(--bg));
  font-size: 12.5px; line-height: 1.5;
}
.mad-svc-chip-main { font-weight: 700; color: var(--text); }
.mad-svc-chip-note { color: var(--text-sub); font-weight: 400; }
.mad-svc-chip--mismatch {
  border-color: var(--bad); border-left-width: 4px;
  background: color-mix(in srgb, var(--bad) 10%, transparent);
}
.mad-svc-chip--mismatch .mad-svc-chip-main { color: var(--bad); }
.mad-svc-chip-warn { color: var(--bad); font-weight: 700; }

/* ───────────────────────── NUM-10（2026-09-02）: 概算・欠測を色以外でも区別する
 *
 * 直したい問題: rsp__home の「実CPA ¥8,551（概算込み ¥9,237）」は実額と概算が同じフォント・
 * 同じ並びで、区別が背景色の濃淡だけだった。屋外のスマホ・低視力・P/D型色覚では同じ数字に
 * 見え、概算を実額と信じて増額判断する事故が起きる。
 *
 * ★状態は増やさない。Mアドは日割り・按分・推定・0埋めを一切しない方針なので、「推定」という
 *   新しい受け皿は作らない（作ると将来そこに推定値を入れてよい場所ができてしまう）。
 *   既存語彙のまま 実額／概算（＝月額按分・.mad-estimate-pill に統一）／欠測（必ず理由文と
 *   セット）の3つに固定する。カバレッジ欠損の警告（.mad-cpa-flag）も実績側へ統合しない。
 *
 * 実装ルール:
 *   - 色のみで意味を持たせない。概算は点線の囲み＋「概算」の文字ラベルを必ず持つ。
 *   - バッジ内テキストは12px未満にしない（フォントを小さくして誤魔化す表現は禁止）。
 *   - 概算の数値は太字にしない（実額＝太字・濃色との差をウェイトでも付ける）。
 *   - 明示色は WCAG AA（4.5:1）を満たす組み合わせだけを使う（scripts/test-estimate-badge.mjs
 *     で実際にコントラスト比を計算して固定する）。
 */
.mad-estimate-pill {
  font-size: 12px;                      /* 12px未満にしない */
  border: 1px dashed currentColor;      /* グレースケールでも実額と区別できる */
  background: #eef7fa;
  color: #075c72;                       /* #eef7fa 上で 6.94:1 */
}
.mad-hero-cpa-sub { font-weight: 400; } /* 概算込みの数値は太字にしない（実額と同じ顔で並べない） */
.mad-cpa-flag {
  font-size: 12px;                      /* 12px未満にしない */
  border: 1px solid currentColor;
  background: #fdf3e7;
  color: #8a3f07;                       /* #fdf3e7 上で 6.85:1 */
}
/* ダーク時の指定は、このファイルの既存作法（属性セレクタ単体）に合わせる。 */
[data-theme="dark"] .mad-estimate-pill { background: #0f1115; color: #67e8f9; } /* 13.04:1 */
[data-theme="dark"] .mad-cpa-flag { background: #1a1d23; color: #fbbf24; }      /* 10.11:1 */

/* ───────────────────────── NUM-08/09（2026-09-02）: 「—」の理由と、空状態2種
 *
 * NUM-08: 理由なしの「—」を出さない。理由は同じ行に併記する。取得失敗（error）は
 *   仕様上の空（spec）と同じ顔にしない＝赤で出し、折りたたまない。
 * NUM-09: ①取得失敗＝赤系＋時刻・対象・直前の成功時刻・再読み込み ②仕様上の空＝
 *   ニュートラルなグレー＋理由1行＋次の一歩。「未接続だが配信中の可能性」は黄で別扱い。
 */
.mad-dash-reason {
  display: block; margin-top: 2px; font-size: 12px; font-weight: 400;
  color: var(--text-sub); line-height: 1.4;
}
.mad-dash-reason--error { color: var(--bad); font-weight: 700; }
.mad-dash-reason--pending { color: var(--warn); font-weight: 700; }

.mad-empty-card {
  border: 1px solid var(--border); border-left-width: 4px; border-radius: 8px;
  padding: 12px 14px; margin: 10px 0; font-size: 13px; line-height: 1.6;
}
.mad-empty-card-head { font-weight: 700; margin-bottom: 4px; }
.mad-empty-card-body { color: var(--text-sub); }
.mad-empty-card--error { border-left-color: var(--bad); }
.mad-empty-card--error .mad-empty-card-head { color: var(--bad); }
.mad-empty-card--pending { border-left-color: var(--warn); }
.mad-empty-card--pending .mad-empty-card-head { color: var(--warn); }
.mad-empty-card--spec { border-left-color: var(--border); }
.mad-empty-card .mad-refresh-btn { margin-top: 8px; }

/* ───────────────────────── NUM-07（2026-09-02）: 数値の隣に出す出典タグ
 * ヘッダー＝画面全体の鮮度、数値横タグ＝その数字の一次データ、と二層で役割を分ける。
 * 出典が解決できない指標にはカテゴリを推測で作らず「出典未確定」を出す。 */
.mad-src-tag {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 700; vertical-align: middle; white-space: nowrap;
  border: 1px solid var(--border); background: var(--bg); color: var(--text-sub);
}
.mad-src-tag--unknown { border-style: dashed; }

/* ═══════════════════════════════════════════════════════════════════
   P0 束②（2026-09-02）: サイドバーの3値表示・担当2レーン・結論バー
   ═══════════════════════════════════════════════════════════════════ */

/* ----- SB-03/SB-04: メニューの3値＋取得失敗の第4状態 -----
   色の濃淡だけに意味を持たせない。ドット（形）と状態語（テキスト）を必ず併記する。
   ⚠️ 2026-09-02（PR #260 レビュー指摘B）: justify-content を .mad-nav-item に直接当てると、
   状態表示を持たない項目（工房の3項目・共通設定・横断ボード）を含む**PC全ナビ**の配置が変わる。
   状態スパンを持つ項目（3値＋失敗の4クラス）と、レーンの媒体行だけに限定する。 */
.mad-nav-item--on,
.mad-nav-item--partial,
.mad-nav-item--empty,
.mad-nav-item--error,
.mad-nav-item--media { justify-content: space-between; gap: 8px; }
.mad-nav-item--empty .mad-nav-item-label { color: var(--text-sub); font-weight: 400; }
.mad-nav-item--error .mad-nav-item-label { color: var(--bad); font-weight: 600; }
.mad-nav-state {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; line-height: 1.2;
}
.mad-nav-state-word { display: none; }
.mad-nav-state-reason { color: var(--text-sub); font-weight: 500; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mad-nav-state--on .mad-nav-dot { color: var(--good); }
.mad-nav-state--partial .mad-nav-dot { color: var(--warn); }
.mad-nav-state--empty .mad-nav-dot { color: var(--text-sub); }
.mad-nav-state--error .mad-nav-dot { color: var(--bad); }
/* 「一部のみ」「未接続で空」「取得失敗」は語も必ず出す（ドットだけにしない）。
   「データあり」だけは全項目に付くと騒がしいのでドットのみ（＝色が無い側に語を出す）。 */
.mad-nav-state--partial .mad-nav-state-word,
.mad-nav-state--empty .mad-nav-state-word,
.mad-nav-state--error .mad-nav-state-word { display: inline; color: var(--text-sub); }
.mad-nav-state--error .mad-nav-state-word { color: var(--bad); }
.mad-nav-fold > summary { font-size: 11px; color: var(--text-sub); padding: 6px 12px; cursor: pointer; }

/* ----- SB-01/SB-02: 担当2レーン（運用型広告／媒体出稿）と媒体セレクタ ----- */
.mad-nav-lane { margin-top: 10px; border-top: 1px dashed var(--border); padding-top: 6px; }
.mad-nav-lane-label { font-size: 12px; font-weight: 700; color: var(--text); padding: 6px 14px 2px; }
.mad-nav-item--lane-all { font-weight: 600; }
.mad-nav-item--media { text-decoration: none; }

/* ----- SB-05: 「未対応（相談可）」の1行バッジ（全文はタップ展開） ----- */
.mad-nav-restricted { margin: 4px 12px; }
.mad-nav-restricted > summary { cursor: pointer; list-style: none; }
.mad-nav-restricted > summary::-webkit-details-marker { display: none; }

/* ----- HM-01〜HM-05: 全画面共通の結論バー ----- */
.mad-verdict-bar {
  border: 1px solid var(--border); border-left-width: 4px; border-radius: 10px;
  background: var(--surface); padding: 12px 14px; margin: 0 0 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.mad-verdict-bar--good { border-left-color: var(--good); }
.mad-verdict-bar--warn { border-left-color: var(--warn); }
.mad-verdict-bar--bad { border-left-color: var(--bad); }
.mad-verdict-bar--muted { border-left-color: var(--border); }
.mad-verdict-bar-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.mad-verdict-bar-label { font-size: 11px; font-weight: 700; color: var(--text-sub); letter-spacing: 0.4px; }
.mad-verdict-bar-verdict { font-size: 17px; font-weight: 800; }
.mad-verdict-bar--good .mad-verdict-bar-verdict { color: var(--good); }
.mad-verdict-bar--warn .mad-verdict-bar-verdict { color: var(--warn); }
.mad-verdict-bar--bad .mad-verdict-bar-verdict { color: var(--bad); }
/* muted（判定不可）は中立色のまま。良否の緑/赤は絶対に付けない（HM-02/HM-04）。 */
.mad-verdict-bar--muted .mad-verdict-bar-verdict { color: var(--text); font-weight: 700; font-size: 15px; }
.mad-verdict-bar-metric { font-size: 13px; color: var(--text); }
.mad-verdict-bar-metric b { font-size: 15px; }
.mad-verdict-bar-reason,
.mad-verdict-bar-origin { font-size: 11px; color: var(--text-sub); line-height: 1.5; }
.mad-verdict-bar-chip { font-size: 12px; font-weight: 700; }
.mad-verdict-bar-chip--over { color: var(--bad); }
.mad-verdict-bar-chip--within { color: var(--good); }
.mad-verdict-bar-chip--muted { color: var(--text-sub); }
/* 概算は判定材料ではない＝色を持たせない（HM-04）。 */
.mad-verdict-bar-estimate { font-size: 11px; color: var(--text-sub); }
/* 目標CPA対比は「判定バッジとは別枠のラベル」。良否色を付けない（HM-04 condition）。 */
.mad-verdict-bar-target { font-size: 12px; color: var(--text-sub); font-weight: 600; }
.mad-verdict-bar-paused { font-size: 12px; font-weight: 700; color: var(--warn); }
.mad-verdict-bar-paused-note { font-size: 11px; color: var(--text-sub); font-weight: 500; }
.mad-verdict-bar-alerts:empty { display: none; }
.mad-verdict-bar-alerts { display: flex; flex-direction: column; gap: 6px; }
.mad-verdict-bar-why > summary { font-size: 11px; color: var(--text-sub); cursor: pointer; }

/* SP-01: スマホ（640px以下）だけの調整。デスクトップの並びは一切変えない。
   結論バーの上には何も置かない設計（描画順で担保）＝ここでは畳んで詰めるだけ。 */
@media (max-width: 640px) {
  .mad-verdict-bar { padding: 10px 12px; gap: 4px; margin-bottom: 10px; }
  .mad-verdict-bar-verdict { font-size: 16px; }
  .mad-verdict-bar-metric { font-size: 12px; }
  /* 注記は1行に畳む（PCは2〜3行）。全文は展開すれば読める。 */
  .mad-verdict-bar-origin,
  .mad-verdict-bar-reason {
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  }
  .mad-nav-state-reason { max-width: 72px; }
  /* P1束C #47/#48（2026-09-03）: 反響件数ブロックと根拠バッジのSP調整。
     ⚠️ 新しい640pxブロックを末尾に足さない（「最後の640pxブロックに結論バーの調整がある」
     という SP-01 の構造ガードを静かに外すことになるため。SPの調整はこの1ブロックに集める）。 */
  .mad-home-leads { padding: 10px 12px; margin-bottom: 10px; }
  .mad-home-leads-value { font-size: 32px; }
  .mad-basis-badges { gap: 4px 10px; font-size: 12px; }
}

/* ===== P1束A「数字の正しさ」（2026-09-03） ===== */
/* #31: 右上の期間トグルの器（#mad-view-period）。見た目の定義は .mad-period を再利用する
   （重複定義を作らない＝test-period-toolbar-placement の規律）。ここは配置だけ。 */
#mad-view-period:empty { display: none; }
.mad-period-fixed { padding: 5px 14px; font-size: 12.5px; font-weight: 600; color: var(--text-sub); }
.mad-toolbar--right { display: flex; justify-content: flex-end; }
/* #67（P1束H）: 「表示中: ◯◯」キャプション（#mad-view-periodの直下に同居）。
   PCでは出さない＝display:noneが既定。中身はapp.js renderViewPeriod()がperiodCaptionHtml()で
   同じ#mad-view-period（PCと共有する唯一の期間state・器）に描く＝別のDOM・別の期間定義を作らない。 */
.mad-period-caption { display: none; }

/* #67/#72 の SP 上書き（.mad-view-period-chips・#mad-view-period・.mad-page-right・
   .mad-cpa-metric-full/chip）は、レビュー指摘（mad.cssの新規SPブロックは既存900pxブロックへ
   寄せる規律）により 1556行目付近の @media (max-width: 900px) ブロックへ移設した
   （末尾に新ブロックを足さない）。 */
/* #36: CPAの分母（件数）。金額の右に小さく添える（金額より目立たせない） */
.mad-cpa-denominator { font-size: 12.5px; font-weight: 600; color: var(--text-sub); margin-left: 6px; }
/* #33: 赤字ライン未設定の定型ラベル */
.mad-limitcpa-unset { display: block; font-size: 11.5px; color: var(--text-sub); }
/* #34: 台帳未導入の広告費に付く手入力バッジ */
.mad-manual-spend-badge { margin-left: 6px; font-size: 11px; white-space: normal; }
/* #37: 横断ボードの「最も古い取込」。2日以上前=黄・4日以上前=赤 */
.mad-portfolio-oldest[data-oldest-tone="warn"] { border-left-color: var(--warn); }
.mad-portfolio-oldest[data-oldest-tone="bad"] { border-left-color: var(--bad); }
/* #32: 獲得件数の両論併記（合算した1つの数字は作らない） */
.mad-leads-bothsides .mad-api-only-badge { margin-left: auto; }
.mad-api-only-list ul { margin: 6px 0 0; padding-left: 1.2em; }

/* ===== P1束B（サイドパネル/情報設計・2026-09-03 #42/#43/#45） ===== */

/* #45: サイドパネル最上部の役割1行。器の役割（ヘッダー／サイドパネル／期間）を画面に明記する */
.mad-nav-role-note {
  font-size: 11px; line-height: 1.5;
  color: var(--text-sub);
  padding: 0 14px 10px;
  margin: 0 8px 6px;
  border-bottom: 1px solid var(--border);
}

/* #43: 「📰 媒体と分析」見出しの対応媒体バッジ（services.json の media[] から自動生成） */
.mad-nav-media-badges {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  padding: 2px 14px 6px;
}
.mad-nav-media-badges-label { font-size: 10px; color: var(--text-sub); margin-right: 2px; }
.mad-nav-media-badge {
  font-size: 10px; font-weight: 700; line-height: 1.6;
  padding: 0 6px; border-radius: 999px;
  border: 1px solid var(--border);
}
/* 接続済み＝色が付く／未接続＝グレーで併記（消さない＝扱えないと誤解させない） */
.mad-nav-media-badge.is-connected {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.mad-nav-media-badge.is-notconnected { color: var(--text-sub); background: none; }

/* #42: 「その他（全サービス共通）」1区画。初期は閉じる（details の既定＝open を付けない） */
.mad-nav-other > summary {
  cursor: pointer;
  list-style: none;
}
.mad-nav-other > summary::-webkit-details-marker { display: none; }
.mad-nav-other > summary::after {
  content: '▾'; float: right; font-size: 11px; color: var(--text-sub);
  transform: rotate(-90deg); transition: transform 0.15s ease;
}
.mad-nav-other[open] > summary::after { transform: rotate(0deg); }
.mad-nav-other-body { padding-top: 2px; }
.mad-nav-subhead {
  font-size: 11px; font-weight: 700; color: var(--text-sub);
  padding: 8px 14px 2px;
}


/* ───────────── P1束C（2026-09-03）: ホーム/週次/横断ボードの表示部品 ───────────── */
/* #47 反響件数（金額より先・大きく）。結論バーの直下に置く。 */
.mad-home-leads {
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  padding: 12px 14px; margin: 0 0 12px;
}
.mad-home-leads-head { font-size: 12px; color: var(--text-sub); font-weight: 700; }
.mad-home-leads-day { font-weight: 400; margin-left: 8px; }
.mad-home-leads-value {
  display: block; font-size: 44px; font-weight: 800; line-height: 1.1;
  font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
}
.mad-home-leads-value small { font-size: 18px; font-weight: 700; margin-left: 4px; }
.mad-home-leads-value.is-none { color: var(--text-sub); }
.mad-home-leads-reason { font-size: 12px; color: var(--text-sub); margin-top: 2px; }
.mad-home-leads-reason-inline { font-size: 11.5px; color: var(--text-sub); margin-left: 6px; }
.mad-home-leads-sub { font-size: 13px; color: var(--text-sub); margin-top: 4px; font-weight: 600; }

/* #48 目標CPA・赤字ラインの根拠バッジ（値の右に常設） */
.mad-basis-badges { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 12px; font-size: 12.5px; }
.mad-basis-badge-item { color: var(--text-sub); font-weight: 600; }
.mad-basis-badge {
  display: inline-block; margin-left: 2px; font-size: 11px; font-weight: 700;
  color: var(--text-sub); border: 1px solid var(--border); border-radius: 999px; padding: 0 6px;
}
.mad-applied-category { display: block; }

/* #49 今週の論点 */
.mad-weekly-issues-list { margin: 0; padding-left: 1.2em; font-size: 13px; line-height: 1.9; }
.mad-weekly-issues-none { font-size: 13px; color: var(--text-sub); }
.mad-weekly-issues-window { font-size: 11.5px; color: var(--text-sub); margin-top: 6px; }

/* #50 今週の注目（横断ボードの最上部） */
.mad-attention-list { list-style: none; margin: 0; padding: 0; }
.mad-attention-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
  border-left: 3px solid var(--border); background: var(--surface-2, transparent);
  margin-bottom: 6px;
}
.mad-attention-row:hover, .mad-attention-row:focus { outline: 2px solid var(--border); }
.mad-attention-row--bad { border-left-color: var(--bad); }
.mad-attention-row--warn { border-left-color: var(--warn); }
.mad-attention-row--muted { border-left-color: var(--border); }
.mad-attention-name { font-weight: 700; font-size: 13.5px; }
.mad-attention-label { font-size: 12.5px; color: var(--text-sub); }
.mad-attention-cpa { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mad-attention-none { font-size: 13px; color: var(--text-sub); }
.mad-attention-undecidable { margin-top: 10px; border-top: 1px dashed var(--border); padding-top: 8px; }
.mad-attention-undecidable-head { font-size: 12px; font-weight: 700; color: var(--text-sub); margin-bottom: 4px; }

/* #51 サイドパネル最上部の固定リンク＋算出不可セルの理由 */
.mad-nav-cross-board { font-weight: 700; }
.mad-nav-cross-board.is-current { background: var(--surface-2, transparent); }
.mad-cell-reason { display: block; font-size: 11px; color: var(--text-sub); }

/* ═══════════════ P1束D（媒体別詳細 #52/#54/#58・2026-09-03） ═══════════════ */
/* #52 媒体別実績の稼働状態グループ。1つの表のまま tbody を分け、見出し行で畳む
   （表を分けると列幅がグループごとにずれて横比較できなくなるため）。 */
.mad-matrix-group-head > th {
  text-align: left; font-weight: 700; font-size: 13px;
  background: var(--panel-2, rgba(0, 0, 0, .03)); padding: 6px 8px;
}
.mad-matrix-group-head .hint { font-weight: 400; font-size: 11px; color: var(--text-sub); margin-left: 8px; }
.mad-matrix-group-head .sub { font-weight: 400; font-size: 11px; color: var(--text-sub); margin-left: 8px; }
.mad-matrix-group-toggle {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  width: 100%; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--text-sub); text-align: left;
}
.mad-matrix-group-caret { font-size: 11px; }
/* #54 訴求グループの画像別明細（既定は閉）。 */
.mad-appeal-group-fold > summary { font-size: 13px; }
.mad-appeal-group-fold > summary .sub { color: var(--text-sub); font-size: 11px; margin-left: 6px; }
/* #58 終了済み媒体の注記（配信回の登録フォーム・チャネル管理）。 */
.mad-delivery-retired > summary { color: var(--text-sub); }

/* ═══════════════ #80 接続ロードマップ（2026-09-03 P1束F・レビューM-6） ═══════════════ */
.mad-roadmap-lane { margin-bottom: 18px; }
.mad-roadmap-cell {
  display: inline-flex; align-items: baseline; gap: 4px; margin: 0 10px 4px 0;
}
/* .mad-tbl td .sub は既定でブロック化される（縦積みの一覧向け）。ロードマップのセルは
   ドット・媒体名・状態ラベルを1行の横並びで見せたいので、このセル内だけ上書きする。 */
.mad-roadmap-cell .sub { display: inline; }