/* components.css — コンポーネント
   プロトタイプ（prototypes/index.html）の `.s-*` / `.btn` などを
   `mzn-` プレフィックスへ再構成したもの。値は tokens.css の変数のみを使う。
   参照: docs/design/COMPONENTS.md / CTA_SYSTEM.md / ACCESSIBILITY.md */

/* --- スキップリンク ---------------------------------------------------- */

.mzn-skip-link {
  position: absolute;
  left: -9999px;
}

.mzn-skip-link:focus {
  position: static;
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-primary-600);
  color: var(--color-text-inverse);
}

/* --- ヘッダー ---------------------------------------------------------- */
/* 配置は layout.css の .mzn-header / .mzn-header-inner を参照 */

.mzn-logo {
  color: var(--color-primary-900);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-h4);
  letter-spacing: var(--letter-spacing-small);
  text-decoration: none;
}

.mzn-logo:hover {
  color: var(--color-primary-900);
}

.mzn-nav {
  font-size: var(--font-size-small);
}

.mzn-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min-target-nav);
  color: var(--color-text);
  text-decoration: none;
}

.mzn-nav a:hover {
  color: var(--color-primary-600);
  text-decoration: underline;
}

.mzn-nav .current-menu-item a {
  color: var(--color-primary-600);
  font-weight: var(--font-weight-h4);
}

/* --- フッター ---------------------------------------------------------- */
/* 配置は layout.css の .mzn-footer / .mzn-footer-cols を参照 */

.mzn-footer {
  font-size: var(--font-size-body-sm);
}

.mzn-footer h2,
.mzn-footer h3 {
  margin: 0 0 var(--space-2);
  padding-left: 0;
  border-left: 0;
  font-size: var(--font-size-small);
}

.mzn-footer ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.mzn-footer li {
  margin-bottom: var(--space-2);
}

.mzn-footer-copy {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

/* --- パンくず ---------------------------------------------------------- */

.mzn-breadcrumb {
  margin-bottom: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

.mzn-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.mzn-breadcrumb li {
  margin-bottom: 0;
}

.mzn-breadcrumb [aria-current="page"] {
  color: var(--color-text-secondary);
}

/* --- 記事メタ・バッジ -------------------------------------------------- */

.mzn-article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: center;
  margin-bottom: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.mzn-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-h4);
  line-height: var(--line-height-caption);
}

/* 記事タイプバッジ（COMPONENTS.md §5）。順位の演出には使わない */
.mzn-badge-research {
  border-color: var(--color-border);
  background-color: var(--color-info-bg);
  color: var(--color-info);
}

.mzn-badge-tool {
  border-color: var(--color-primary-100);
  background-color: var(--color-primary-50);
  color: var(--color-primary-700);
}

.mzn-badge-db {
  border-color: var(--color-border);
  background-color: var(--color-surface-alt);
  color: var(--color-text-secondary);
}

.mzn-badge-type {
  border-color: var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text-secondary);
}

/* --- 広告表記 ---------------------------------------------------------- */
/* 折りたたまない。本文より小さくしすぎない（COMPONENTS.md §6） */

.mzn-disclosure {
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-info-bg);
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-body-sm);
}

.mzn-disclosure p:last-child {
  margin-bottom: 0;
}

/* --- 結論ボックス ------------------------------------------------------ */

.mzn-key-answer {
  margin: 0 0 var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-left: var(--border-width-emphasis) solid var(--color-primary-600);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background-color: var(--color-primary-50);
}

.mzn-key-answer h2 {
  margin: 0 0 var(--space-3);
  padding-left: 0;
  border-left: 0;
  font-size: var(--font-size-h4);
}

.mzn-key-answer h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-small);
}

.mzn-key-answer ul {
  margin: 0;
  padding-left: 1.3em;
  font-size: var(--font-size-body-sm);
}

.mzn-key-answer p:last-child {
  margin-bottom: 0;
}

.mzn-key-answer-split {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

@media (min-width: 600px) {
  .mzn-key-answer-split {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- 目次 -------------------------------------------------------------- */

.mzn-toc {
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

.mzn-toc summary {
  font-size: var(--font-size-body-sm);
}

.mzn-toc ol {
  margin: var(--space-3) 0 0;
  font-size: var(--font-size-body-sm);
}

/* --- 注記ボックス ------------------------------------------------------ */
/* success の callout を作らない（COMPONENTS.md §12） */

.mzn-callout {
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-left: var(--border-width-accent) solid var(--color-border-strong);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background-color: var(--color-surface);
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-body-sm);
}

.mzn-callout p:last-child {
  margin-bottom: 0;
}

.mzn-callout--info {
  border-left-color: var(--color-info);
  background-color: var(--color-info-bg);
}

.mzn-callout--warning {
  border-left-color: var(--color-warning);
  background-color: var(--color-warning-bg);
}

.mzn-callout--undisclosed {
  border-left-color: var(--color-undisclosed);
  background-color: var(--color-undisclosed-bg);
}

.mzn-callout--note {
  border-left-color: var(--color-border-strong);
  background-color: var(--color-surface);
}

/* --- 比較表 ------------------------------------------------------------ */
/* 横スクロール領域はキーボードで操作できるようにする（ACCESSIBILITY.md §3）。
   マークアップ側で tabindex="0" と role="region" を付ける。 */

.mzn-table-scroll {
  overflow-x: auto;
  margin-bottom: var(--space-3);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background-color: var(--color-bg);
}

.mzn-cmp-table {
  /* 5列前後の比較表が潰れない下限。プロトタイプの実装値 */
  min-width: 620px;
  font-size: var(--font-size-table);
  line-height: var(--line-height-table);
}

.mzn-cmp-table th,
.mzn-cmp-table td {
  padding: var(--space-3);
  border-bottom: var(--border-width) solid var(--color-border);
  text-align: right;
  white-space: nowrap;
}

.mzn-cmp-table thead th {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-th);
  background-color: var(--color-surface-alt);
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-h4);
}

/* 行見出しの固定列。横スクロール時に何の費目かを見失わせない */
.mzn-cmp-table th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: var(--z-base);
  min-width: 130px;
  border-right: var(--border-width) solid var(--color-border);
  background-color: var(--color-bg);
  font-weight: var(--font-weight-body);
  text-align: left;
}

.mzn-cmp-table thead th:first-child {
  left: 0;
  z-index: var(--z-sticky-th);
}

.mzn-cmp-table tbody tr:nth-child(even) th[scope="row"],
.mzn-cmp-table tbody tr:nth-child(even) td {
  background-color: var(--color-surface);
}

.mzn-cmp-table .mzn-total {
  font-size: var(--font-size-table-num);
  font-weight: var(--font-weight-h4);
}

/* 合計行はゼブラより後に定義し、同じ詳細度で上書きする（!important を使わない） */
.mzn-cmp-table tbody tr.mzn-row-total th[scope="row"],
.mzn-cmp-table tbody tr.mzn-row-total td {
  border-top: 2px solid var(--color-border-strong);
  background-color: var(--color-primary-50);
}

.mzn-table-note {
  margin-bottom: var(--space-5);
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  line-height: var(--line-height-body-sm);
}

.mzn-table-note b {
  color: var(--color-text);
}

/* --- セル表示（欠損理由の区別。装飾ではなく情報） ---------------------- */

.mzn-cell-free {
  color: var(--color-free);
  font-weight: var(--font-weight-h4);
}

.mzn-cell-na {
  color: var(--color-not-applicable);
}

.mzn-cell-undisclosed {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background-color: var(--color-undisclosed-bg);
  color: var(--color-undisclosed);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-h4);
}

.mzn-cell-incomparable {
  color: var(--color-incomparable);
}

/* 「非公表」と同じ見た目にしない。**公表されていないのではなく、
   読者の条件で一つに決まらない、という別の状態である。** */
.mzn-cell-conditional {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background-color: var(--color-conditional-bg);
  color: var(--color-conditional);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-h4);
}

/* --- 図解 --------------------------------------------------------------- */

/* **色を図の中に焼き込まない。** CSS変数にしてダークテーマでも読めるようにする。
   文字は <text> のままなので、検索・コピー・読み上げが効く。 */

.mzn-diagram {
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

.mzn-diagram figcaption {
  margin-top: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  text-align: center;
}

.mzn-dg {
  display: block;
  width: 100%;
  height: auto;
}

.mzn-dg-box {
  fill: var(--color-bg);
  stroke: var(--color-border-strong);
  stroke-width: 1;
}

.mzn-dg-box--src { fill: var(--color-primary-50); }
.mzn-dg-box--end { fill: var(--color-conditional-bg); }

.mzn-dg-text {
  fill: var(--color-text);
  font-size: 13px;
  font-family: var(--font-sans);
}

.mzn-dg-label {
  fill: var(--color-text);
  font-size: 13px;
  font-weight: var(--font-weight-h4);
  font-family: var(--font-sans);
}

.mzn-dg-head {
  fill: var(--color-text-secondary);
  font-size: 12px;
  font-family: var(--font-sans);
}

.mzn-dg-arrow {
  stroke: var(--color-border-strong);
  stroke-width: 1.5;
  fill: none;
  marker-end: url(#mzn-dg-head);
}

.mzn-dg-arrowhead { fill: var(--color-border-strong); }

.mzn-dg-cell {
  fill: var(--color-surface-alt);
  stroke: var(--color-border);
  stroke-width: 1;
}

.mzn-dg-cell--on {
  fill: var(--color-conditional-bg);
  stroke: var(--color-conditional);
}

/* --- 選び方の道しるべ --------------------------------------------------- */

/* **合わない人を行き止まりにしない。** 各段の最後が次の候補への送り出しで、
   縦の並びがそのまま連鎖になる。番号は「順に読む」ことを示すために出す。 */

.mzn-choice-path { margin-bottom: var(--space-5); }

.mzn-choice-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: mzn-choice;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.mzn-choice-step {
  position: relative;
  counter-increment: mzn-choice;
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-left: 3px solid var(--color-primary-500);
  border-radius: var(--radius-md);
  background-color: var(--color-bg);
}

.mzn-choice-label {
  margin: 0 0 var(--space-1);
  color: var(--color-primary-600);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-h4);
}

.mzn-choice-label::before {
  content: counter(mzn-choice) ". ";
  font-variant-numeric: tabular-nums;
}

.mzn-choice-cond {
  margin: 0;
  font-weight: var(--font-weight-h4);
}

.mzn-choice-answer {
  margin: 0 0 var(--space-2);
  color: var(--color-primary-700);
  font-weight: var(--font-weight-h4);
}

.mzn-choice-why {
  margin: 0 0 var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
}

.mzn-choice-not {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background-color: var(--color-warning-bg);
  font-size: var(--font-size-small);
}

.mzn-choice-not b {
  display: block;
  color: var(--color-warning);
}

/* 次の段へ送る一文。**カードの外に出して、流れとして見せる。** */
.mzn-choice-next {
  margin: var(--space-2) 0 0;
  color: var(--color-success);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-h4);
}

.mzn-choice-next::before {
  content: "↓ ";
}

/* --- 凡例 -------------------------------------------------------------- */

.mzn-legend {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  font-size: var(--font-size-small);
}

.mzn-legend h2,
.mzn-legend h3 {
  margin: 0;
  padding-left: 0;
  border-left: 0;
  font-size: var(--font-size-small);
}

.mzn-legend dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-3);
  margin: var(--space-2) 0 0;
}

.mzn-legend dt {
  font-weight: var(--font-weight-h4);
  white-space: nowrap;
}

.mzn-legend dd {
  margin: 0;
  color: var(--color-text-secondary);
}

/* --- メリット / 注意点 ------------------------------------------------- */
/* 左右同幅。Cons を狭くしない・折りたたまない（COMPONENTS.md §11） */

.mzn-proscons {
  display: grid;
  gap: var(--space-4);
  margin: 0 0 var(--space-5);
}

@media (min-width: 600px) {
  .mzn-proscons {
    grid-template-columns: 1fr 1fr;
  }
}

.mzn-proscons-pro,
.mzn-proscons-con {
  padding: var(--space-4);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.mzn-proscons-pro {
  border-left: var(--border-width-accent) solid var(--color-success);
  background-color: var(--color-success-bg);
}

.mzn-proscons-con {
  border-left: var(--border-width-accent) solid var(--color-error);
  background-color: var(--color-error-bg);
}

.mzn-proscons h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-body-sm);
}

.mzn-proscons-pro h3 {
  color: var(--color-success);
}

.mzn-proscons-con h3 {
  color: var(--color-error);
}

.mzn-proscons ul {
  margin: 0;
  padding-left: 1.3em;
  font-size: var(--font-size-body-sm);
}

/* --- CTA --------------------------------------------------------------- */
/* 画面を占有する固定CTAを作らない（LAYOUT.md §8） */

.mzn-cta {
  margin: var(--space-6) 0;
  padding: var(--space-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

.mzn-cta-amount {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-h2);
}

.mzn-cta p:last-child {
  margin-bottom: 0;
}

/* ボタンに影を付けない（LAYOUT.md §5）。hover で位置を動かさない */
.mzn-btn {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min-target-cta);
  padding: var(--space-3) var(--space-5);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-button);
  line-height: var(--line-height-button);
  letter-spacing: var(--letter-spacing-button);
  text-decoration: none;
  transition: background-color var(--motion-duration) var(--motion-easing),
    color var(--motion-duration) var(--motion-easing);
}

.mzn-btn:hover {
  text-decoration: none;
}

.mzn-btn-primary {
  background-color: var(--color-primary-600);
  color: var(--color-text-inverse);
}

.mzn-btn-primary:hover {
  background-color: var(--color-primary-700);
  color: var(--color-text-inverse);
}

.mzn-btn-secondary {
  border-color: var(--color-primary-600);
  background-color: transparent;
  color: var(--color-primary-600);
}

.mzn-btn-secondary:hover {
  background-color: var(--color-primary-50);
  color: var(--color-primary-700);
}

.mzn-btn-sm {
  min-height: var(--touch-min-target-nav);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-small);
}

.mzn-btn-block {
  width: 100%;
}

@media (min-width: 600px) {
  .mzn-btn-block {
    width: auto;
  }
}

/* --- 出典 -------------------------------------------------------------- */

.mzn-sources {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--color-border);
  font-size: var(--font-size-body-sm);
}

.mzn-sources h2 {
  margin: 0 0 var(--space-3);
  padding-left: 0;
  border-left: 0;
  font-size: var(--font-size-h4);
}

.mzn-sources ol {
  margin: 0;
  padding-left: 1.4em;
}

.mzn-sources li {
  margin-bottom: var(--space-3);
  line-height: var(--line-height-small);
}

/* --- 編集情報 ---------------------------------------------------------- */

.mzn-editorial {
  margin-top: var(--space-5);
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  font-size: var(--font-size-body-sm);
}

.mzn-editorial h2 {
  margin: 0 0 var(--space-2);
  padding-left: 0;
  border-left: 0;
  font-size: var(--font-size-body-sm);
}

.mzn-editorial p:last-child {
  margin-bottom: 0;
}

/* --- 関連コンテンツ ---------------------------------------------------- */
/* 「関連記事」という見出しを使わない。意図別に分類する（COMPONENTS.md §15） */

.mzn-related {
  margin-top: var(--space-7);
}

.mzn-related h2 {
  font-size: var(--font-size-h3);
}

.mzn-related-group {
  margin-bottom: var(--space-5);
}

.mzn-related-group h3 {
  margin: 0 0 var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
}

.mzn-related-group ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.mzn-related-group li {
  margin-bottom: var(--space-2);
}

/* --- カード ------------------------------------------------------------ */
/* 「おすすめNo.1」バッジ・王冠・カードごとの色分けを作らない */

.mzn-card {
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg);
}

.mzn-card h2,
.mzn-card h3 {
  margin: 0 0 var(--space-2);
  padding-left: 0;
  border-left: 0;
  font-size: var(--font-size-h4);
}

.mzn-card p {
  margin: 0 0 var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-sm);
}

.mzn-card-meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

/* --- Hero（トップページ） ---------------------------------------------- */

.mzn-hero {
  padding-top: var(--space-7);
  padding-bottom: var(--space-6);
  border-bottom: var(--border-width) solid var(--color-border);
}

.mzn-hero h1 {
  font-size: var(--font-size-display);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-display);
}

@media (min-width: 900px) {
  .mzn-hero h1 {
    font-size: var(--font-size-display-desktop);
  }
}

/* --- 更新履歴 ---------------------------------------------------------- */

.mzn-updates {
  margin: 0;
  padding-left: 0;
  font-size: var(--font-size-body-sm);
  list-style: none;
}

.mzn-updates li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: var(--border-width) solid var(--color-border);
}

.mzn-updates time {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  white-space: nowrap;
}

/* --- ページ送り -------------------------------------------------------- */

.mzn-pagination a,
.mzn-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-min-target-nav);
  min-height: var(--touch-min-target-nav);
  padding: 0 var(--space-2);
}

/* --------------------------------------------------------------------------
   数値表示
   比較表と計算機で共通。**桁を揃えないと総額の比較ができない。**
   renderer.py が <span class="mzn-num"> を出すが、定義が無かった。
   -------------------------------------------------------------------------- */
.mzn-num {
  font-variant-numeric: var(--font-numeric-table-num);
  font-weight: var(--font-weight-table-num);
  letter-spacing: var(--letter-spacing-table-num);
}

/* --------------------------------------------------------------------------
   総保有コスト計算機
   -------------------------------------------------------------------------- */
.mzn-simulator {
  margin: 0 0 var(--space-6);
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

.mzn-field {
  margin-bottom: var(--space-4);
}

.mzn-field label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-table);
}

.mzn-field select,
.mzn-field input[type="text"] {
  width: 100%;
  min-height: var(--touch-min-target-cta);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-size-body);
}

/* チェックボックスはラベルと横並びにする。縦に割れると対応が読めない */
.mzn-field--check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.mzn-field--check label {
  margin-bottom: 0;
  font-weight: var(--font-weight-body);
}

.mzn-field--check input[type="checkbox"] {
  width: var(--space-5);
  height: var(--space-5);
  flex-shrink: 0;
}

.mzn-simulator-result {
  margin-top: var(--space-6);
}

.mzn-result-grid {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

@media (min-width: 600px) {
  .mzn-result-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.mzn-result {
  margin: 0;
  border-left-color: var(--color-border-strong);
}

.mzn-result h3 {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-body);
}

/* 総額。**大きくしすぎない。**
   除外費目を読まずに数字だけで判断されることを避ける */
.mzn-result-total {
  margin: var(--space-2) 0 var(--space-3);
  font-size: var(--font-size-table-num-desktop);
}

.mzn-result-breakdown {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-5);
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
}

/* 含まれていない費目。**目立たせる。** 総額が小さく見える理由がここにある */
.mzn-result-excluded {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--color-border);
}

.mzn-result-excluded ul,
.mzn-result-warning ul {
  margin: var(--space-1) 0 0;
  padding-left: var(--space-5);
  font-size: var(--font-size-small);
}

.mzn-result-warning {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--color-incomparable);
}

/* --------------------------------------------------------------------------
   レンダラーが出しているのに定義が無かったクラス。
   命名の不一致で表示が崩れていたものを含む（tests/test_css_contract.py が検出）
   -------------------------------------------------------------------------- */

/* 比較表の外枠。figure の既定マージンを打ち消す */
.mzn-table-block {
  margin: 0 0 var(--space-6);
}

/* 表の最終確認日。注記より一段弱く見せる */
.mzn-verified {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

/* 結論ボックスの注意書き。本文より小さく、しかし読み飛ばされない濃さ */
.mzn-key-answer-caution {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--color-primary-300);
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  line-height: var(--line-height-body-sm);
}

/* 出典番号。本文の流れを切らない大きさにする */
.mzn-footnote {
  font-size: 0.75em;
  vertical-align: super;
  line-height: 0;
}
.mzn-footnote a {
  text-decoration: none;
}

/* CTA。primary は本文中で1つだけ置く前提（schema.MAX_PRIMARY_CTA） */
.mzn-cta--primary {
  border-color: var(--color-primary-300);
  background-color: var(--color-primary-50);
}

/* CTAの前提文。「何を確認したうえでのリンクか」を示す */
.mzn-cta-context {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
}

/* 広告コードの入れ物。**中身は無加工で挿入されるため、
   見た目の調整はすべてこの外側で行う**（A8の規約） */
.mzn-cta-ad {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.mzn-cta-ad img {
  max-width: 100%;
  height: auto;
}

/* 料金の変動に関する断り書き */
.mzn-cta-note {
  margin: var(--space-3) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

/* 表のセルに置く注記番号。説明は表の外にある。
   セル内へ説明文を入れると列が際限なく広がるため（比較表が2748pxになった） */
.mzn-cell-ref {
  margin-left: 0.15em;
  font-size: 0.75em;
  vertical-align: super;
  line-height: 0;
  color: var(--color-text-secondary);
  text-decoration: none;
  white-space: nowrap;
}
.mzn-cell-ref:hover,
.mzn-cell-ref:focus {
  color: var(--color-primary-700);
  text-decoration: underline;
}

/* 表の下に並ぶ注記の番号 */
.mzn-cell-ref-label {
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
}

/* 注記へ飛んだときに、どれを指しているか分かるようにする */
.mzn-table-note li:target {
  background-color: var(--color-primary-50);
  border-radius: var(--radius-sm);
}