/* =========================================================================
   styles.css — モール vs 自社EC バリュー差調査レポート
   白基調・ビジネス向け / 紺〜青系アクセント1色 / 完全ローカル動作
   外部フォント・外部CDN・外部画像は一切読み込まない
   ========================================================================= */

/* ---------- デザイントークン ---------- */
:root {
  --accent:        #1f4e79;   /* 紺〜青系アクセント(メイン) */
  --accent-strong: #163a5f;
  --accent-600:    #2a5f92;
  --accent-050:    #eef3f9;
  --accent-100:    #dbe6f2;
  --accent-200:    #b9d0e6;

  --text:      #1c2530;
  --text-soft: #46505c;
  --muted:     #6b7480;
  --line:      #dde3ea;
  --line-soft: #eceff3;
  --bg:        #ffffff;
  --bg-soft:   #f7f9fb;
  --bg-alt:    #f2f5f8;

  /* ステータス色(色 + テキストで判別できるよう常にラベル併記) */
  --ok-bg:   #e4f5ea;  --ok-tx:   #1a6b37;  --ok-bd:   #b6e0c4;
  --calc-bg: #e6eefb;  --calc-tx: #1f4e79;  --calc-bd: #bad2ee;
  --est-bg:  #fdf3d4;  --est-tx:  #8a6200;  --est-bd:  #efdc9c;
  --unc-bg:  #eceef1;  --unc-tx:  #5a626e;  --unc-bd:  #d4d9df;

  --neg:     #b3341f;
  --neg-bg:  #fbe9e6;

  --radius: 8px;
  --radius-sm: 5px;
  --shadow: 0 1px 3px rgba(20, 40, 70, .08), 0 1px 2px rgba(20, 40, 70, .06);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN",
          "Hiragino Sans", "Yu Gothic", "YuGothic", "Meiryo", "Noto Sans JP", sans-serif;
  --mono: "SFMono-Regular", "Consolas", "Menlo", "Courier New", monospace;
}

/* ---------- ベース ---------- */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.8;
  color: var(--text);
  background: var(--bg-soft);
  overflow-wrap: anywhere;
  word-break: normal;
}

/* レポート全体を中央 1080px に */
body > header,
body > nav,
body > main,
body > section,
body > footer,
.wrap {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

main, .wrap {
  padding: 0 20px 64px;
  background: var(--bg);
}

body > header {
  padding: 40px 20px 20px;
  background: var(--bg);
  border-bottom: 3px solid var(--accent);
}

/* ---------- 見出し ---------- */
h1, h2, h3, h4 {
  color: var(--accent-strong);
  line-height: 1.4;
  font-weight: 700;
}

h1 {
  font-size: 1.9rem;
  margin: 0 0 .4em;
  letter-spacing: .01em;
}

h2 {
  font-size: 1.45rem;
  margin: 2.4em 0 .8em;
  padding-bottom: .35em;
  border-bottom: 2px solid var(--accent-100);
}

h3 {
  font-size: 1.15rem;
  margin: 1.8em 0 .6em;
  padding-left: .55em;
  border-left: 4px solid var(--accent);
}

h4 {
  font-size: 1.02rem;
  margin: 1.4em 0 .5em;
  color: var(--accent-600);
}

p { margin: .6em 0; }

a { color: var(--accent); }
a:hover { color: var(--accent-strong); }

ul, ol { padding-left: 1.4em; }
li { margin: .25em 0; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2em 0;
}

small { font-size: .82em; color: var(--muted); }

.lead { font-size: 1.05rem; color: var(--text-soft); }
.muted { color: var(--muted); }

/* ---------- 目次(#toc) ---------- */
#toc {
  background: var(--accent-050);
  border: 1px solid var(--accent-100);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin: 24px auto 8px;
}
#toc h2, #toc .toc-title {
  margin: 0 0 .5em;
  font-size: 1.05rem;
  border: 0;
  padding: 0;
}
#toc ol, #toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 2px 20px;
}
#toc li { margin: 0; }
#toc a {
  display: block;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-soft);
  border-left: 3px solid transparent;
}
#toc a:hover { background: #fff; color: var(--accent-strong); }
#toc a.active {
  background: #fff;
  color: var(--accent-strong);
  border-left-color: var(--accent);
  font-weight: 600;
}
/* 目次の開閉トグル(JSで注入。デスクトップ/JS無効時は非表示のまま) */
.toc-toggle { display: none; }

/* ---------- KPI カード ---------- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin: 20px 0;
}
.kpi-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow);
}
.kpi-card .kpi-value,
.kpi-card .value {
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent-strong);
  line-height: 1.25;
}
.kpi-card .kpi-label,
.kpi-card .label {
  display: block;
  font-size: .86rem;
  color: var(--muted);
  margin-top: 2px;
}
.kpi-card .kpi-note,
.kpi-card .note {
  display: block;
  font-size: .78rem;
  color: var(--text-soft);
  margin-top: 6px;
}

/* ---------- ステータスバッジ ---------- */
.badge {
  display: inline-block;
  padding: .1em .55em;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  border: 1px solid transparent;
  vertical-align: middle;
}
.badge-confirmed   { background: var(--ok-bg);   color: var(--ok-tx);   border-color: var(--ok-bd); }
.badge-calculated  { background: var(--calc-bg); color: var(--calc-tx); border-color: var(--calc-bd); }
.badge-estimated   { background: var(--est-bg);  color: var(--est-tx);  border-color: var(--est-bd); }
.badge-unconfirmed { background: var(--unc-bg);  color: var(--unc-tx);  border-color: var(--unc-bd); }

/* 成功/参考の区分バッジ */
.badge-success   { background: var(--ok-bg);  color: var(--ok-tx);  border-color: var(--ok-bd); }
.badge-reference { background: var(--unc-bg); color: var(--unc-tx); border-color: var(--unc-bd); }
.badge-official  { background: var(--calc-bg); color: var(--calc-tx); border-color: var(--calc-bd); }
.badge-third     { background: var(--bg-alt);  color: var(--text-soft); border-color: var(--line); }

/* ---------- 出典リンク(上付き・小さめ) ---------- */
.src {
  font-size: .68em;
  vertical-align: super;
  line-height: 0;
  white-space: nowrap;
  text-decoration: none;
  color: var(--accent);
  margin: 0 .06em;
}
.src:hover { text-decoration: underline; }

/* ---------- 表 ---------- */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 16px 0;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: .9rem;
  background: var(--bg);
}
th, td {
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line-soft);
}
thead th {
  background: var(--accent-050);
  color: var(--accent-strong);
  font-weight: 700;
  border-bottom: 2px solid var(--accent-100);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}
tbody tr:nth-child(even) { background: var(--bg-soft); }
tbody tr:hover { background: var(--accent-050); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* 汎用の小さな説明表(自社EC/モール条件表など) */
.data-table th { white-space: normal; }

/* ソート可能な th */
th.sortable,
th[data-sort] {
  cursor: pointer;
  user-select: none;
  padding-right: 22px;
  position: sticky;
  top: 0;
}
th[data-sort]::after,
th.sortable::after {
  content: "⇅";
  position: absolute;
  right: 7px;
  color: var(--accent-200);
  font-size: .8em;
  font-weight: 400;
}
th.sort-asc::after  { content: "▲"; color: var(--accent); }
th.sort-desc::after { content: "▼"; color: var(--accent); }
th[data-sort]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* ---------- 比較表の先頭列固定(横スクロール時) ---------- */
/* #brand-table の1列目を左端に固定。交互行・ホバーでも不透明背景を維持し、
   右端に区切り(ハードライン+ソフトシャドウ)を付ける。thead との重なり順は
   z-index で調整(本文固定列=1 < ヘッダ行=2 < 左上コーナー=3)。 */
#brand-table th:first-child,
#brand-table td:first-child {
  position: sticky;
  left: 0;
  background: var(--bg);
  box-shadow: 1px 0 0 0 var(--line), 4px 0 6px -4px rgba(20, 40, 70, .18);
}
#brand-table td:first-child { z-index: 1; }
#brand-table thead th { z-index: 2; }              /* ヘッダ行は本文固定列より前面 */
#brand-table thead th:first-child {                 /* 左上コーナー(縦横とも固定) */
  z-index: 3;
  background: var(--accent-050);
}
/* 交互行・ホバー時も先頭列を不透明に保つ */
#brand-table tbody tr:nth-child(even) td:first-child { background: var(--bg-soft); }
#brand-table tbody tr:hover td:first-child { background: var(--accent-050); }

/* ---------- ブランドカード ---------- */
.brand-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin: 20px 0;
  box-shadow: var(--shadow);
}
.brand-card > h3:first-child,
.brand-card .brand-head {
  margin-top: 0;
}
.brand-card h3 {
  border-left: 4px solid var(--accent);
}
.brand-card .brand-meta {
  color: var(--muted);
  font-size: .88rem;
  margin: -.2em 0 .8em;
}
.brand-card h4 { border-bottom: 1px dashed var(--line); padding-bottom: .2em; }

/* 計算式ボックス(calculatedValues) */
.formula,
.calc-formula {
  font-family: var(--mono);
  font-size: .85rem;
  background: var(--accent-050);
  border: 1px solid var(--accent-100);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin: 6px 0;
  overflow-wrap: anywhere;
}

/* ---------- パターンタグ ---------- */
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; padding: 0; list-style: none; }
.tag {
  display: inline-block;
  background: var(--accent-050);
  color: var(--accent-strong);
  border: 1px solid var(--accent-100);
  border-radius: 999px;
  padding: .12em .7em;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.6;
}
.tag-muted { background: var(--bg-alt); color: var(--text-soft); border-color: var(--line); }

.pros li { list-style: "＋ "; }
.cons li { list-style: "－ "; }

/* ---------- 出典一覧(#sources) ---------- */
.source-group { margin: 22px 0; }
.source-item {
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin: 8px 0;
  background: var(--bg);
  scroll-margin-top: 16px;
  transition: background-color .35s ease, border-color .35s ease;
}
.source-item .source-id {
  font-weight: 700;
  color: var(--accent-strong);
  margin-right: .4em;
}
.source-item .source-title { font-weight: 600; }
.source-item .source-meta {
  display: block;
  font-size: .82rem;
  color: var(--muted);
  margin-top: 3px;
}
.source-item a { overflow-wrap: anywhere; }

/* :target で強調ハイライト */
.source-item:target {
  background: #fff8e1;
  border-color: var(--est-bd);
  border-left-color: var(--est-tx);
  box-shadow: 0 0 0 3px rgba(240, 200, 60, .25);
}

/* ---------- グラフ ---------- */
.chart {
  margin: 16px 0;
  padding: 8px 4px 4px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.chart .chart-render { display: block; }
.chart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* SVG 内の要素スタイル(クラス経由で着色) */
.chart .bar { fill: var(--accent); }
.chart .bar-accent { fill: var(--accent); }
.chart .bar-muted  { fill: var(--accent-200); }
.chart .bar-ec     { fill: #2e7d46; }
.chart .bar-neg    { fill: var(--neg); }
.chart .seg-mall   { fill: var(--accent); }
.chart .seg-pay    { fill: var(--accent-600); }
.chart .seg-point  { fill: var(--accent-200); }

.chart .chart-title  { font-size: 15px; font-weight: 700; fill: var(--accent-strong); }
.chart .chart-sub    { font-size: 11px; fill: var(--muted); }
.chart .bar-label    { font-size: 12px; fill: var(--text); }
.chart .bar-value    { font-size: 12px; fill: var(--text-soft); font-weight: 600; }
.chart .bar-value-inv{ fill: #fff; }
.chart .bar-value-sub{ font-size: 10px; fill: var(--muted); }
.chart .chart-axis   { stroke: var(--line); stroke-width: 1; }
.chart .chart-grid   { stroke: var(--line-soft); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .chart-axis-label { font-size: 10.5px; fill: var(--muted); }

/* 凡例 */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 8px 4px 4px;
  font-size: .8rem;
  color: var(--text-soft);
}
.legend-item { display: inline-flex; align-items: center; gap: 5px; }
.legend-chip {
  width: 12px; height: 12px;
  border-radius: 3px;
  display: inline-block;
  background: var(--accent);
}
.legend-chip.bar-accent { background: var(--accent); }
.legend-chip.bar-muted  { background: var(--accent-200); }
.legend-chip.bar-ec     { background: #2e7d46; }
.legend-chip.bar-neg    { background: var(--neg); }
.legend-chip.seg-mall   { background: var(--accent); }
.legend-chip.seg-pay    { background: var(--accent-600); }
.legend-chip.seg-point  { background: var(--accent-200); }

/* グラフの元データ(details) */
.chart-data {
  margin: 6px 0 4px;
  border-top: 1px dashed var(--line);
  padding-top: 6px;
}
.chart-data > summary {
  cursor: pointer;
  color: var(--accent);
  font-size: .85rem;
  padding: 4px 0;
  list-style-position: inside;
}
.chart-data > summary:hover { text-decoration: underline; }
.chart-data table { font-size: .82rem; margin-top: 8px; }
.chart-note { font-size: .8rem; color: var(--muted); margin: 4px 4px 0; }

/* ---------- フィルタ UI(#brand-filters) ---------- */
#brand-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 16px 0;
}
#brand-filters .filter-field,
#brand-filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: .82rem;
  color: var(--text-soft);
  font-weight: 600;
}
#brand-filters .filter-inline,
#brand-filters label.inline {
  flex-direction: row;
  align-items: center;
  gap: 6px;
}
#brand-filters select,
#brand-filters input[type="text"] {
  font: inherit;
  font-size: .9rem;
  font-weight: 400;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  min-width: 150px;
}
#brand-filters input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }
#filter-count {
  margin-left: auto;
  align-self: center;
  font-size: .86rem;
  font-weight: 700;
  color: var(--accent-strong);
  background: var(--accent-050);
  border: 1px solid var(--accent-100);
  border-radius: 999px;
  padding: 3px 12px;
  white-space: nowrap;
}

/* ---------- シミュレーター(#sim-form) ---------- */
.sim-block { margin: 16px 0; }

#sim-form,
.sim-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 16px 0;
}
#sim-form .sim-field,
#sim-form > label,
#sim-form > div:not(.sim-grid),
#sim-form > p,
.sim-grid .sim-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  font-size: .84rem;
  font-weight: 600;
  color: var(--text-soft);
}
#sim-form .sim-field .sim-hint,
#sim-form .sim-hint {
  font-weight: 400;
  font-size: .76rem;
  color: var(--muted);
}
#sim-form input,
#sim-form select,
.sim-grid input,
.sim-grid select {
  font: inherit;
  font-size: .95rem;
  font-weight: 400;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  width: 100%;
}
#sim-form input:focus,
#sim-form select:focus {
  outline: 2px solid var(--accent-200);
  outline-offset: 0;
  border-color: var(--accent);
}
/* プリセット行・全幅要素 */
#sim-form .sim-full,
#sim-form .sim-preset-field,
.sim-grid .sim-full {
  grid-column: 1 / -1;
}

/* シミュレーター出力 */
#sim-output {
  margin: 16px 0;
  padding: 18px 20px;
  background: var(--bg);
  border: 1px solid var(--accent-100);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
#sim-output:empty { display: none; }
.sim-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.sim-metric {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: var(--bg-soft);
}
.sim-metric.sim-primary {
  border-color: var(--accent);
  background: var(--accent-050);
  grid-column: span 2;
}
.sim-metric-label { display: block; font-size: .8rem; color: var(--muted); }
.sim-metric-value {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--accent-strong);
  font-variant-numeric: tabular-nums;
}
.sim-metric.sim-primary .sim-metric-value { font-size: 1.7rem; }
.sim-metric-value.is-neg { color: var(--neg); }

.sim-formula {
  border-top: 1px dashed var(--line);
  padding-top: 12px;
}
.sim-formula h3 { margin: 0 0 .4em; font-size: 1.02rem; padding-left: 0; border-left: 0; color: var(--accent-600); }
.sim-formula ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--text-soft);
}
.sim-formula li {
  padding: 3px 0;
  border-bottom: 1px dotted var(--line-soft);
  overflow-wrap: anywhere;
}
.sim-formula li.sim-total {
  font-weight: 700;
  color: var(--accent-strong);
  border-bottom: 0;
}
.sim-note {
  font-size: .82rem;
  color: var(--text-soft);
  margin-top: 10px;
  background: var(--accent-050);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}
.sim-note.is-neg { background: var(--neg-bg); color: var(--neg); }

/* ---------- レスポンシブ(〜640px) ---------- */
@media (max-width: 640px) {
  body { font-size: 15px; line-height: 1.75; }
  main, .wrap { padding: 0 14px 48px; }
  body > header { padding: 28px 14px 16px; }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; }
  h3 { font-size: 1.08rem; }

  #toc ol, #toc ul { grid-template-columns: 1fr; }

  /* --- iOS 自動ズーム防止 + タップ領域(16px 未満で iOS がズームするため) --- */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  button {
    font-size: 16px;
  }
  /* id/class スコープの既存ルール(.9rem/.95rem)を上書きする明示指定 */
  #brand-filters select,
  #brand-filters input[type="text"],
  #sim-form input,
  #sim-form select,
  .sim-grid input,
  .sim-grid select {
    font-size: 16px;
  }
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  button {
    min-height: 44px;
  }

  /* --- 目次の折りたたみ(モバイル) --- */
  #toc { padding: 14px 16px; }
  .toc-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    margin-top: 2px;
    padding: 8px 14px;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    color: var(--accent-strong);
    background: #fff;
    border: 1px solid var(--accent-100);
    border-radius: var(--radius-sm);
    cursor: pointer;
  }
  .toc-toggle::after {
    content: "▾";
    font-size: .9em;
    line-height: 1;
  }
  .toc-toggle[aria-expanded="true"]::after { content: "▴"; }
  #toc.toc-collapsed #toc-list { display: none; }

  /* フィルタ縦積み */
  #brand-filters { flex-direction: column; align-items: stretch; }
  #brand-filters .filter-field,
  #brand-filters label { width: 100%; }
  #brand-filters select,
  #brand-filters input[type="text"] { min-width: 0; width: 100%; }
  #filter-count { margin-left: 0; align-self: flex-start; }

  /* --- グラフのモバイル可読化 --- */
  /* 既定の <figure> 40px 余白が原因でコンテナが縮み SVG が判読不能まで縮小して
     いたため、モバイルでは横余白を除去してコンテナ幅いっぱいに描画する。 */
  figure.chart-block { margin: 16px 0; }
  /* .chart 内(JS 生成の .chart-render=svg+凡例)だけを横スクロール化。
     details.chart-data は .chart の兄弟のため影響を受けない。 */
  .chart {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .chart svg { min-width: 560px; }   /* テキスト実質約12pxを確保 */
  /* 横スクロール可能なチャートにのみヒントを表示(JSで figure に .has-scroll) */
  figure.chart-block.has-scroll > figcaption::after {
    content: "← 横にスクロールして全体を表示 →";
    display: block;
    margin-top: 3px;
    font-size: .72rem;
    font-weight: 400;
    color: var(--muted);
  }

  /* --- 表の横スクロールヒント(JSで .table-wrap に .has-scroll 付与) --- */
  .table-wrap.has-scroll::before {
    content: "→ 表は横にスクロールできます";
    display: block;
    position: sticky;
    left: 0;
    padding: 3px 10px;
    font-size: .72rem;
    line-height: 1.5;
    color: var(--accent-strong);
    background: var(--accent-050);
    border-bottom: 1px solid var(--accent-100);
  }

  /* KPIカード: 400〜640px は2カラム */
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* シミュレーター 1カラム */
  #sim-form, .sim-grid { grid-template-columns: 1fr; }
  #sim-form .sim-field,
  .sim-grid .sim-field { grid-column: 1 / -1; }
  .sim-metric.sim-primary { grid-column: span 1; }
}

/* KPIカード: 400px 未満は1カラム */
@media (max-width: 399.98px) {
  .kpi-grid { grid-template-columns: 1fr; }
}

/* ---------- 印刷 ---------- */
@media print {
  :root { --shadow: none; }
  html { scroll-behavior: auto; }
  body {
    background: #fff;
    color: #000;
    font-size: 10.5pt;
    line-height: 1.55;
  }
  main, .wrap, body > header { max-width: none; padding: 0; }

  /* ナビ・入力部は非表示 */
  #toc,
  #brand-filters,
  #sim-form input,
  #sim-form select,
  #sim-form button,
  .sim-grid input,
  .sim-grid select,
  #sim-preset,
  #filter-count { display: none !important; }

  /* 背景色を除去(可読性優先) */
  .kpi-card, .brand-card, .source-item, .chart, #sim-output,
  .sim-metric, .sim-note, .formula, .calc-formula, .tag,
  thead th, tbody tr:nth-child(even), #toc, .chart-data,
  .badge {
    background: #fff !important;
    box-shadow: none !important;
  }
  .badge, .tag { border: 1px solid #999 !important; color: #000 !important; }

  /* 改ページ制御(表全体ではなく行単位で回避し、はみ出しを防ぐ) */
  .brand-card,
  .source-item,
  .chart,
  .kpi-card { break-inside: avoid; page-break-inside: avoid; }
  tr { page-break-inside: avoid; }
  h2, h3 { break-after: avoid; page-break-after: avoid; }

  /* 比較表は印刷時に折返しを許可し縮小して横はみ出しを防ぐ */
  th { white-space: normal; }
  #brand-table { font-size: 10px; }

  /* リンク URL は表示しない(可読性優先) */
  a { color: #000 !important; text-decoration: none; }
  a[href]::after { content: "" !important; }

  .table-wrap { overflow: visible; border: 1px solid #999; }
  .chart svg { max-height: 320px; }
}

/* =========================================================================
   モバイル: 表の細切れ改行対策
   列を押し潰して1行数文字で折り返すのをやめ、セルに最低幅を確保して
   .table-wrap の横スクロールに逃がす(2026-07-23 ユーザー要望対応)
   ========================================================================= */
@media (max-width: 640px) {
  /* 表内では文字単位の強制改行(anywhere)を解除。長大トークンのみ折る */
  th, td {
    overflow-wrap: break-word;
    word-break: normal;
  }
  td.num, th.num { white-space: nowrap; }

  /* どの表も列幅の下限を確保(はみ出しは横スクロールで吸収) */
  .table-wrap th, .table-wrap td { min-width: 5.5em; }

  /* ブランド比較一覧(12列): 長文列は広めに */
  #brand-table th, #brand-table td { min-width: 8em; }
  #brand-table th:first-child, #brand-table td:first-child { min-width: 7em; }
  #brand-table th:nth-child(9), #brand-table td:nth-child(9) { min-width: 16em; }
  #brand-table th:nth-child(10), #brand-table td:nth-child(10) { min-width: 18em; }
  #brand-table th:nth-child(11), #brand-table td:nth-child(11) { min-width: 14em; }
  #brand-table th:nth-child(12), #brand-table td:nth-child(12) { min-width: 12em; }

  /* ブランド詳細のfact表(項目/チャネル/内容/状態/出典) */
  .fact-table tr > *:nth-child(1) { min-width: 10em; }
  .fact-table tr > *:nth-child(2) { min-width: 7em; }
  .fact-table tr > *:nth-child(3) { min-width: 20em; }
  .fact-table tr > *:nth-child(4) { min-width: 4.5em; }
  .fact-table tr > *:nth-child(5) { min-width: 4.5em; }

  /* 4列表(価格比較の 指標/計算式/状態/出典、戦略の テーマ/内容/状態/出典):
     2列目が長文(計算式・内容)なので広く取り、状態・出典は狭く戻す */
  .fact-table.four-col-table tr > *:nth-child(1) { min-width: 9em; }
  .fact-table.four-col-table tr > *:nth-child(2) { min-width: 20em; }
  .fact-table.four-col-table tr > *:nth-child(3) { min-width: 4.5em; }
  .fact-table.four-col-table tr > *:nth-child(4) { min-width: 4.5em; }

  /* グラフのフォールバック表・戦略比較表 */
  .chart-data th:first-child, .chart-data td:first-child { min-width: 9em; }
  .strat-table th:first-child, .strat-table td:first-child { min-width: 9em; }
}