/* =============================================================================
   PMC Lab / Base Components  v1.0
   Phase 1 工程2 - 2026-09-14
   -----------------------------------------------------------------------------
   スコープの約束（既存29URLを守るための最重要事項）
     - すべてのセレクタを .pmc- 接頭辞に限定する。
     - 素の要素セレクタ（h2, p, table 等）に対する指定は一切行わない。
       例外は .pmc-prose の内側のみで、これは明示的に付与した場合だけ効く。
     - したがって本ファイルを読み込んでも、既存記事・既存テンプレートの
       表示は一切変化しない。変化するのは .pmc- クラスを付けた箇所だけ。
   -----------------------------------------------------------------------------
   値は必ず pmc-tokens.css のセマンティックトークンを参照する。
   このファイル内に生の色コード・生のpx値を書かない（One Source of Truth）。
   ============================================================================= */


/* =============================================================================
   0. FOUNDATION
   ============================================================================= */

.pmc,
.pmc *,
.pmc *::before,
.pmc *::after {
  box-sizing: border-box;
}

.pmc {
  font-family: var(--pmc-font-sans);
  font-size: var(--pmc-text-base);
  line-height: var(--pmc-leading-relaxed);
  letter-spacing: var(--pmc-tracking-normal);
  color: var(--pmc-text-color-body);
  text-align: left;
  word-break: normal;
  overflow-wrap: anywhere;
  line-break: strict;
}

/* キーボード操作の可視性は、いかなる理由でも削らない */
.pmc :focus-visible {
  outline: none;
  box-shadow: var(--pmc-focus-ring);
  border-radius: var(--pmc-radius-sm);
}

.pmc-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* =============================================================================
   1. LAYOUT
   ============================================================================= */

.pmc-container {
  width: 100%;
  max-width: var(--pmc-width-text);
  margin-inline: auto;
  padding-inline: var(--pmc-gutter);
}

.pmc-container--wide { max-width: var(--pmc-width-wide); }
.pmc-container--full { max-width: var(--pmc-width-full); }

/* 縦の間隔は個々のマージンではなく stack で一元管理する */
.pmc-stack > * + * { margin-top: var(--pmc-space-4); }
.pmc-stack--tight > * + * { margin-top: var(--pmc-space-2); }
.pmc-stack--loose > * + * { margin-top: var(--pmc-space-6); }
.pmc-stack--section > * + * { margin-top: var(--pmc-space-10); }

.pmc-divider {
  height: 0;
  margin-block: var(--pmc-space-8);
  border: 0;
  border-top: var(--pmc-border-width) solid var(--pmc-border-color);
}

.pmc-divider--strong { border-top-color: var(--pmc-border-color-strong); }

/* 記事本文の中に置く判断ブロック用。左右いっぱいに逃がす */
.pmc-bleed {
  margin-inline: calc(var(--pmc-gutter) * -1);
}

@media (min-width: 768px) {
  .pmc-bleed { margin-inline: 0; }
}


/* =============================================================================
   2. TYPOGRAPHY
   ============================================================================= */

.pmc-kicker {
  margin: 0;
  font-size: var(--pmc-text-2xs);
  font-weight: var(--pmc-weight-bold);
  letter-spacing: var(--pmc-tracking-wide);
  line-height: var(--pmc-leading-tight);
  color: var(--pmc-text-color-accent);
  text-transform: none;
}

.pmc-h1,
.pmc-h2,
.pmc-h3,
.pmc-h4 {
  margin: 0;
  color: var(--pmc-text-color-heading);
  font-weight: var(--pmc-weight-bold);
  letter-spacing: var(--pmc-tracking-tight);
  line-height: var(--pmc-leading-tight);
}

.pmc-h1 { font-size: var(--pmc-text-4xl); }
.pmc-h2 { font-size: var(--pmc-text-3xl); line-height: var(--pmc-leading-snug); }
.pmc-h3 { font-size: var(--pmc-text-2xl); line-height: var(--pmc-leading-snug); }
.pmc-h4 { font-size: var(--pmc-text-xl);  line-height: var(--pmc-leading-snug); }

/* 見出しの下線は引かない。かわりに上に細い罫を置き、節の切れ目を示す */
.pmc-h2--ruled {
  padding-top: var(--pmc-space-4);
  border-top: var(--pmc-border-width-strong) solid var(--pmc-ink-900);
}

.pmc-lede {
  margin: 0;
  font-size: var(--pmc-text-lg);
  line-height: var(--pmc-leading-normal);
  color: var(--pmc-text-color-strong);
}

.pmc-body { margin: 0; }

.pmc-body--sm { font-size: var(--pmc-text-md); }

.pmc-note {
  margin: 0;
  font-size: var(--pmc-text-sm);
  line-height: var(--pmc-leading-normal);
  color: var(--pmc-text-color-muted);
}

.pmc-label {
  display: inline-block;
  font-size: var(--pmc-text-2xs);
  font-weight: var(--pmc-weight-bold);
  letter-spacing: var(--pmc-tracking-wide);
  line-height: var(--pmc-leading-tight);
  color: var(--pmc-text-color-muted);
}

.pmc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pmc-space-1) var(--pmc-space-3);
  margin: 0;
  font-size: var(--pmc-text-sm);
  line-height: var(--pmc-leading-snug);
  color: var(--pmc-text-color-muted);
}

.pmc-num {
  font-family: var(--pmc-font-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* 記事本文にだけ適用する最小限のリセット。明示的に付けた場合のみ効く */
.pmc-prose > * { margin-block: 0; }
.pmc-prose > * + * { margin-top: var(--pmc-space-5); }
.pmc-prose a { color: var(--pmc-text-color-accent); }
.pmc-prose strong { color: var(--pmc-text-color-heading); font-weight: var(--pmc-weight-bold); }


/* =============================================================================
   3. DISCLOSURE / 広告表記
   目立たせないが、隠さない。判断材料の一部として常に本文の前に置く。
   ============================================================================= */

.pmc-disclosure {
  display: block;
  padding: var(--pmc-space-2) var(--pmc-space-3);
  background: var(--pmc-disclosure-bg);
  border-radius: var(--pmc-radius-sm);
  color: var(--pmc-disclosure-color);
  font-size: var(--pmc-text-xs);
  line-height: var(--pmc-leading-snug);
  letter-spacing: var(--pmc-tracking-normal);
}


/* =============================================================================
   4. CARD
   影ではなく罫で構造を示す。
   ============================================================================= */

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

.pmc-card--sunken {
  background: var(--pmc-bg-sunken);
  border-color: var(--pmc-border-color-soft);
}

.pmc-card--flush { padding: 0; }

.pmc-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--pmc-space-2) var(--pmc-space-3);
  padding-bottom: var(--pmc-space-3);
  border-bottom: var(--pmc-border-width) solid var(--pmc-border-color-soft);
}

.pmc-card__body { padding-top: var(--pmc-space-4); }

.pmc-card__foot {
  margin-top: var(--pmc-space-4);
  padding-top: var(--pmc-space-3);
  border-top: var(--pmc-border-width) solid var(--pmc-border-color-soft);
}


/* =============================================================================
   5. BUTTON / CTA
   ページ内で「塗り」を許すのは primary のみ。それ以外は罫か文字だけ。
   ============================================================================= */

.pmc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pmc-space-2);
  min-height: var(--pmc-tap-min);
  padding: var(--pmc-space-3) var(--pmc-space-5);
  border: var(--pmc-border-width) solid transparent;
  border-radius: var(--pmc-radius-md);
  background: transparent;
  color: var(--pmc-text-color-accent);
  font-family: inherit;
  font-size: var(--pmc-text-base);
  font-weight: var(--pmc-weight-bold);
  line-height: var(--pmc-leading-snug);
  letter-spacing: var(--pmc-tracking-normal);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--pmc-duration) var(--pmc-ease),
              border-color var(--pmc-duration) var(--pmc-ease),
              color var(--pmc-duration) var(--pmc-ease);
}

.pmc-btn--primary {
  background: var(--pmc-cta-bg);
  color: var(--pmc-cta-text);
  border-color: var(--pmc-cta-bg);
}

.pmc-btn--secondary {
  border-color: var(--pmc-border-color-strong);
  color: var(--pmc-text-color-strong);
}

.pmc-btn--quiet {
  padding-inline: var(--pmc-space-2);
  color: var(--pmc-text-color-muted);
  font-weight: var(--pmc-weight-medium);
}

.pmc-btn--block { display: flex; width: 100%; }

.pmc-btn[aria-disabled="true"],
.pmc-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (hover: hover) {
  .pmc-btn--primary:hover { background: var(--pmc-cta-bg-hover); border-color: var(--pmc-cta-bg-hover); }
  .pmc-btn--secondary:hover { border-color: var(--pmc-ink-700); }
  .pmc-btn--quiet:hover { color: var(--pmc-text-color-strong); }
}

/* CTA の直下に置く補足。誇張しないための定位置 */
.pmc-btn-note {
  margin-top: var(--pmc-space-2);
  font-size: var(--pmc-text-xs);
  line-height: var(--pmc-leading-snug);
  color: var(--pmc-text-color-muted);
  text-align: center;
}


/* =============================================================================
   6. CHIP
   ============================================================================= */

.pmc-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--pmc-space-1);
  padding: var(--pmc-space-1) var(--pmc-space-2);
  border: var(--pmc-border-width) solid var(--pmc-border-color);
  border-radius: var(--pmc-radius-sm);
  background: var(--pmc-bg-page);
  font-size: var(--pmc-text-2xs);
  font-weight: var(--pmc-weight-medium);
  line-height: var(--pmc-leading-tight);
  color: var(--pmc-text-color-muted);
  white-space: nowrap;
}

.pmc-chip--selected {
  border-color: var(--pmc-accent);
  background: var(--pmc-accent-050);
  color: var(--pmc-text-color-accent);
}

.pmc-chiplist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pmc-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}


/* =============================================================================
   7. FIT / Personal Fit > Ranking
   順位バッジ（1位・金銀銅）は用意しない。
   記号・語・色の3重符号化とし、色だけに意味を持たせない。
   ============================================================================= */

.pmc-fit {
  display: inline-flex;
  align-items: center;
  gap: var(--pmc-space-1);
  font-size: var(--pmc-text-sm);
  line-height: var(--pmc-leading-tight);
  white-space: nowrap;
}

.pmc-fit__mark {
  font-size: var(--pmc-text-base);
  font-weight: var(--pmc-weight-bold);
}

.pmc-fit__text { font-weight: var(--pmc-weight-medium); }

.pmc-fit--strong  { color: var(--pmc-fit-strong); }
.pmc-fit--ok      { color: var(--pmc-fit-ok); }
.pmc-fit--partial { color: var(--pmc-fit-partial); }
.pmc-fit--no      { color: var(--pmc-fit-no); }

/* 「あなたの条件に対する適合」の見出し行 */
.pmc-fit-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pmc-space-3);
}


/* =============================================================================
   8. EVIDENCE / 根拠を構造として見せる
   ============================================================================= */

.pmc-evidence {
  padding: var(--pmc-space-4);
  background: var(--pmc-evidence-bg);
  border-left: var(--pmc-border-width-strong) solid var(--pmc-evidence-rule);
  border-radius: 0 var(--pmc-radius-md) var(--pmc-radius-md) 0;
}

.pmc-evidence__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pmc-space-2);
  margin-bottom: var(--pmc-space-2);
}

.pmc-evidence__body {
  margin: 0;
  font-size: var(--pmc-text-md);
  line-height: var(--pmc-leading-normal);
  color: var(--pmc-text-color-strong);
}

/* 出典は明朝で組み、本文と種類が違う情報であることを示す */
.pmc-evidence__cite {
  display: block;
  margin-top: var(--pmc-space-3);
  padding-top: var(--pmc-space-2);
  border-top: var(--pmc-border-width) solid var(--pmc-border-color);
  font-family: var(--pmc-font-serif);
  font-size: var(--pmc-text-sm);
  line-height: var(--pmc-leading-snug);
  color: var(--pmc-evidence-cite-color);
  font-style: normal;
}

.pmc-evidence__date {
  font-family: var(--pmc-font-num);
  font-variant-numeric: tabular-nums;
}

/* 根拠の階層。何を根拠と呼んでいるかを毎回明示する */
.pmc-evidence-tier {
  display: inline-block;
  padding: var(--pmc-space-1) var(--pmc-space-2);
  border-radius: var(--pmc-radius-sm);
  font-size: var(--pmc-text-2xs);
  font-weight: var(--pmc-weight-bold);
  letter-spacing: var(--pmc-tracking-wide);
  line-height: var(--pmc-leading-tight);
}

.pmc-evidence-tier--public    { background: var(--pmc-positive-bg); color: var(--pmc-positive); }
.pmc-evidence-tier--primary   { background: var(--pmc-accent-100);  color: var(--pmc-accent-900); }
.pmc-evidence-tier--maker     { background: var(--pmc-neutral-bg);  color: var(--pmc-ink-600); }
.pmc-evidence-tier--editorial { background: var(--pmc-caution-bg);  color: var(--pmc-caution); }

/* 本文中の根拠参照 */
.pmc-ref {
  font-family: var(--pmc-font-num);
  font-size: var(--pmc-text-xs);
  vertical-align: super;
  line-height: 1;
  color: var(--pmc-text-color-accent);
  text-decoration: none;
}


/* =============================================================================
   9. CALLOUT
   ============================================================================= */

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

.pmc-callout__title {
  display: block;
  margin-bottom: var(--pmc-space-2);
  font-size: var(--pmc-text-md);
  font-weight: var(--pmc-weight-bold);
  line-height: var(--pmc-leading-snug);
  color: var(--pmc-text-color-heading);
}

.pmc-callout__body { margin: 0; font-size: var(--pmc-text-md); }

.pmc-callout--caution {
  background: var(--pmc-caution-bg);
  border-color: var(--pmc-caution);
}
.pmc-callout--caution .pmc-callout__title { color: var(--pmc-caution); }

/* 医療・安全に関わる注記。装飾を最も抑え、文字で伝える */
.pmc-callout--medical {
  background: var(--pmc-critical-bg);
  border-color: var(--pmc-critical);
}
.pmc-callout--medical .pmc-callout__title { color: var(--pmc-critical); }

.pmc-callout--info {
  background: var(--pmc-accent-050);
  border-color: var(--pmc-accent-100);
}
.pmc-callout--info .pmc-callout__title { color: var(--pmc-accent-900); }


/* =============================================================================
   10. CHECK / 自己診断リスト
   ============================================================================= */

.pmc-check {
  margin: 0;
  padding: 0;
  list-style: none;
  border: var(--pmc-border-width) solid var(--pmc-border-color);
  border-radius: var(--pmc-radius-md);
  overflow: hidden;
}

.pmc-check__item + .pmc-check__item {
  border-top: var(--pmc-border-width) solid var(--pmc-border-color-soft);
}

.pmc-check__label {
  display: flex;
  align-items: flex-start;
  gap: var(--pmc-space-3);
  min-height: var(--pmc-tap-min);
  padding: var(--pmc-space-3) var(--pmc-space-4);
  cursor: pointer;
  font-size: var(--pmc-text-md);
  line-height: var(--pmc-leading-normal);
  color: var(--pmc-text-color-strong);
}

.pmc-check__input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  margin-top: 0.25em;
  accent-color: var(--pmc-accent);
}

.pmc-check__item:has(.pmc-check__input:checked) {
  background: var(--pmc-decision-selected-bg);
}


/* =============================================================================
   11. DECISION / 判断の中核
   Decision First : ページ内で最も強い構造を与える唯一のブロック
   ============================================================================= */

.pmc-decision {
  padding: var(--pmc-space-5) var(--pmc-gutter);
  background: var(--pmc-decision-bg);
  border-top: var(--pmc-border-width-strong) solid var(--pmc-decision-accent);
  border-bottom: var(--pmc-border-width) solid var(--pmc-border-color);
}

@media (min-width: 768px) {
  .pmc-decision {
    padding: var(--pmc-space-6);
    border-inline: var(--pmc-border-width) solid var(--pmc-border-color);
    border-radius: 0 0 var(--pmc-radius-md) var(--pmc-radius-md);
  }
}

.pmc-decision__head { margin-bottom: var(--pmc-space-4); }

.pmc-decision__question {
  margin: var(--pmc-space-1) 0 0;
  font-size: var(--pmc-text-xl);
  font-weight: var(--pmc-weight-bold);
  line-height: var(--pmc-leading-snug);
  color: var(--pmc-text-color-heading);
}

.pmc-decision__help {
  margin: var(--pmc-space-2) 0 0;
  font-size: var(--pmc-text-sm);
  line-height: var(--pmc-leading-normal);
  color: var(--pmc-text-color-muted);
}

/* 進行状況。「あと何問か」が常に分かる状態を保つ */
.pmc-progress {
  display: flex;
  align-items: center;
  gap: var(--pmc-space-2);
  font-size: var(--pmc-text-2xs);
  font-weight: var(--pmc-weight-bold);
  letter-spacing: var(--pmc-tracking-wide);
  color: var(--pmc-text-color-muted);
}

.pmc-progress__track {
  flex: 1 1 auto;
  height: 2px;
  background: var(--pmc-surface-3);
  border-radius: var(--pmc-radius-pill);
  overflow: hidden;
}

.pmc-progress__bar {
  display: block;
  height: 100%;
  background: var(--pmc-decision-accent);
  transition: width var(--pmc-duration) var(--pmc-ease);
}

/* 選択肢：カード型ラジオ。タップ領域は常に48px以上 */
.pmc-options {
  display: grid;
  gap: var(--pmc-space-2);
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}

.pmc-option {
  display: flex;
  align-items: flex-start;
  gap: var(--pmc-space-3);
  min-height: var(--pmc-tap-min);
  padding: var(--pmc-space-3) var(--pmc-space-4);
  background: var(--pmc-bg-raised);
  border: var(--pmc-border-width) solid var(--pmc-border-color-strong);
  border-radius: var(--pmc-radius-md);
  cursor: pointer;
  transition: border-color var(--pmc-duration) var(--pmc-ease),
              background-color var(--pmc-duration) var(--pmc-ease);
}

.pmc-option__input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  margin-top: 0.2em;
  accent-color: var(--pmc-accent);
}

.pmc-option__text { display: block; }

.pmc-option__title {
  display: block;
  font-size: var(--pmc-text-base);
  font-weight: var(--pmc-weight-medium);
  line-height: var(--pmc-leading-snug);
  color: var(--pmc-text-color-heading);
}

.pmc-option__desc {
  display: block;
  margin-top: var(--pmc-space-1);
  font-size: var(--pmc-text-sm);
  line-height: var(--pmc-leading-normal);
  color: var(--pmc-text-color-muted);
}

.pmc-option:has(.pmc-option__input:checked) {
  border-color: var(--pmc-decision-selected-border);
  background: var(--pmc-decision-selected-bg);
}

@media (hover: hover) {
  .pmc-option:hover { border-color: var(--pmc-ink-400); }
}

.pmc-decision__foot {
  margin-top: var(--pmc-space-5);
  display: grid;
  gap: var(--pmc-space-2);
}

/* 結果：結論を先に、理由をその下に置く */
.pmc-result {
  padding: var(--pmc-space-5);
  background: var(--pmc-bg-raised);
  border: var(--pmc-border-width-strong) solid var(--pmc-decision-accent);
  border-radius: var(--pmc-radius-md);
}

.pmc-result__verdict {
  margin: var(--pmc-space-1) 0 0;
  font-size: var(--pmc-text-2xl);
  font-weight: var(--pmc-weight-bold);
  line-height: var(--pmc-leading-tight);
  color: var(--pmc-text-color-heading);
}

.pmc-result__because {
  margin: var(--pmc-space-3) 0 0;
  font-size: var(--pmc-text-md);
  line-height: var(--pmc-leading-normal);
  color: var(--pmc-text-color-body);
}

/* 「この判断が当てはまらない条件」を必ず併記するための枠 */
.pmc-result__limits {
  margin-top: var(--pmc-space-4);
  padding-top: var(--pmc-space-3);
  border-top: var(--pmc-border-width) solid var(--pmc-border-color);
  font-size: var(--pmc-text-sm);
  line-height: var(--pmc-leading-normal);
  color: var(--pmc-text-color-muted);
}


/* =============================================================================
   12. COMPARE / 比較表
   モバイルでは横スクロール＋先頭列固定。順位付けの視覚表現は持たせない。
   ============================================================================= */

.pmc-compare {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: var(--pmc-border-width) solid var(--pmc-border-color);
  border-radius: var(--pmc-radius-md);
}

.pmc-compare__table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--pmc-text-sm);
  line-height: var(--pmc-leading-normal);
}

.pmc-compare__table th,
.pmc-compare__table td {
  padding: var(--pmc-space-3);
  text-align: left;
  vertical-align: top;
  border-bottom: var(--pmc-border-width) solid var(--pmc-border-color-soft);
}

.pmc-compare__table thead th {
  position: sticky;
  top: 0;
  z-index: var(--pmc-z-sticky-head);
  background: var(--pmc-bg-muted);
  color: var(--pmc-text-color-heading);
  font-size: var(--pmc-text-xs);
  font-weight: var(--pmc-weight-bold);
  letter-spacing: var(--pmc-tracking-wide);
  white-space: nowrap;
}

.pmc-compare__table tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 7rem;
  background: var(--pmc-bg-page);
  border-right: var(--pmc-border-width) solid var(--pmc-border-color);
  color: var(--pmc-text-color-strong);
  font-weight: var(--pmc-weight-medium);
}

.pmc-compare__table tbody tr:last-child th,
.pmc-compare__table tbody tr:last-child td { border-bottom: 0; }

/* 「順位」ではなく「あなたの条件への適合」を示す行 */
.pmc-compare__row--fit td,
.pmc-compare__row--fit th {
  background: var(--pmc-bg-sunken);
}

.pmc-compare__hint {
  margin: var(--pmc-space-2) 0 0;
  font-size: var(--pmc-text-xs);
  color: var(--pmc-text-color-muted);
}


/* =============================================================================
   13. NEXT ACTION / 次にすること
   判断の後に「何をすればよいか」が必ず1画面に収まる
   ============================================================================= */

.pmc-next {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: pmc-next;
}

.pmc-next__item {
  display: flex;
  gap: var(--pmc-space-3);
  padding: var(--pmc-space-3) 0;
  counter-increment: pmc-next;
}

.pmc-next__item + .pmc-next__item {
  border-top: var(--pmc-border-width) solid var(--pmc-border-color-soft);
}

.pmc-next__item::before {
  content: counter(pmc-next);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.15em;
  border: var(--pmc-border-width) solid var(--pmc-border-color-strong);
  border-radius: var(--pmc-radius-pill);
  font-family: var(--pmc-font-num);
  font-size: var(--pmc-text-xs);
  font-weight: var(--pmc-weight-bold);
  color: var(--pmc-text-color-muted);
}

.pmc-next__title {
  display: block;
  font-size: var(--pmc-text-md);
  font-weight: var(--pmc-weight-medium);
  line-height: var(--pmc-leading-snug);
  color: var(--pmc-text-color-heading);
}

.pmc-next__desc {
  display: block;
  margin-top: var(--pmc-space-1);
  font-size: var(--pmc-text-sm);
  line-height: var(--pmc-leading-normal);
  color: var(--pmc-text-color-muted);
}


/* =============================================================================
   14. ACTION BAR / モバイル下部固定
   工程5以降で使用。現時点では定義のみ（DOMに出力しない）
   ============================================================================= */

.pmc-actionbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--pmc-z-actionbar);
  padding: var(--pmc-space-3) var(--pmc-gutter);
  padding-bottom: calc(var(--pmc-space-3) + env(safe-area-inset-bottom, 0px));
  background: var(--pmc-bg-page);
  box-shadow: var(--pmc-shadow-sticky);
}

@media (min-width: 768px) {
  .pmc-actionbar { position: static; padding: 0; box-shadow: none; }
}


/* =============================================================================
   15. PRINT
   ============================================================================= */

@media print {
  .pmc-actionbar { display: none; }
  .pmc-compare { overflow: visible; }
  .pmc-decision { background: transparent; }
}