/* =========================================================================
   mhdr-*  ── 個別記事ページ「タイトル領域」専用ブロック
   ・SEOタイトルに一本化(本文H1は削除)
   ・画像は補助、48hの数字を主役に
   ・WordPress テンプレに貼り付ける想定で、クラスは mhdr- プレフィックス
   ========================================================================= */
:root {
  --mhdr-bg:        #f3efe6;
  --mhdr-paper:     #fffdf7;
  --mhdr-ink:       #1a1a2e;   /* サイト本文 H2/H3 と同色の深紺(2026-05-28 改訂) */
  --mhdr-ink-2:     #5b5448;
  --mhdr-ink-mute:  #6b6258;
  --mhdr-rule:      #1a1a2e;
  --mhdr-accent:    #e8b04d;   /* レトロ金(ピクセルアート定番・ハウス標準) */
  --mhdr-card:      #fbfaf7;
  --mhdr-line:      #e7e2d8;
  --mhdr-sans:      'Noto Sans JP', system-ui, sans-serif;
  --mhdr-num:       'Anton', 'Oswald', 'Noto Sans JP', sans-serif;
  --mhdr-mono:      'JetBrains Mono', ui-monospace, monospace;
}

/* ----- root ----- */
.mhdr { background: var(--mhdr-bg); color: var(--mhdr-ink); font-family: var(--mhdr-sans); }
.mhdr * { box-sizing: border-box; }
.mhdr a { color: inherit; }

/* ----- top strip ─ パンくず + 更新日 ----- */
.mhdr-top {
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 48px; border-bottom: 1px solid var(--mhdr-rule);
  gap: 16px; flex-wrap: wrap;
}
.mhdr-crumbs { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: var(--mhdr-ink-mute); }
.mhdr-crumbs a { text-decoration: none; }
.mhdr-crumbs a:hover { text-decoration: underline; }
.mhdr-crumbs .sep { color: #c9c4ba; }
.mhdr-crumbs .cat {
  color: #1d6fb8; font-weight: 700; letter-spacing: 0.02em;
  display: inline-flex; align-items: center; gap: 6px;
}
.mhdr-stamp {
  font-family: var(--mhdr-sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em; color: var(--mhdr-ink-mute);
}
.mhdr-stamp .num {
  font-family: var(--mhdr-mono); font-weight: 400;
  letter-spacing: 0.06em; margin-left: 6px;
}

/* ----- body ─ 2カラム(左:数字パネル / 右:タイトル) ----- */
.mhdr-body { display: grid; grid-template-columns: 340px 1fr; }

/* LEFT: 数字パネル(黒地) */
.mhdr-num-panel {
  background: var(--mhdr-ink); color: #fff;
  padding: 36px 28px; display: grid; gap: 18px;
  grid-template-rows: auto 1fr auto; min-height: 480px;
}
.mhdr-kicker {
  display: grid; gap: 4px;
}
.mhdr-kicker-jp {
  font-family: var(--mhdr-sans); font-size: 16px; font-weight: 800;
  letter-spacing: 0.08em; color: var(--mhdr-accent);
}
.mhdr-kicker-en {
  font-family: var(--mhdr-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.28em; color: rgba(232,176,77,0.6);
  text-transform: uppercase;
}
.mhdr-stat { display: grid; align-content: center; }
.mhdr-stat-num {
  font-family: var(--mhdr-num);
  font-size: 220px; line-height: 0.85; letter-spacing: -0.04em;
  color: #fff;
  display: flex; align-items: flex-end; gap: 6px;
}
.mhdr-stat-num em {
  font-style: normal; font-size: 80px; line-height: 1; color: var(--mhdr-accent);
}
.mhdr-stat-cap {
  margin-top: 10px;
  font-family: var(--mhdr-sans); font-weight: 700; font-size: 14px;
  letter-spacing: 0.04em; color: rgba(255,255,255,0.7);
}
.mhdr-stat-cap b { color: var(--mhdr-accent); font-weight: 700; }

/* mini timeline */
.mhdr-tl-ticks {
  display: flex; justify-content: space-between;
  font-family: var(--mhdr-mono); font-size: 10px;
  color: rgba(255,255,255,0.5); letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.mhdr-tl-bar { position: relative; height: 6px; background: rgba(255,255,255,0.12); }
.mhdr-tl-fill {
  position: absolute; left: 0; top: 0; height: 100%; width: 70%;
  background: linear-gradient(90deg, #6b6258 0%, var(--mhdr-accent) 65%, var(--mhdr-accent) 75%, #6b6258 100%);
}
.mhdr-tl-peak {
  position: absolute; left: 68%; top: -3px; width: 2px; height: 12px; background: #fff;
}
.mhdr-tl-cite {
  margin-top: 8px;
  font-family: var(--mhdr-mono); font-size: 11px;
  letter-spacing: 0.06em; color: rgba(255,255,255,0.6);
}

/* RIGHT: タイトル */
.mhdr-title-panel {
  padding: 36px 40px;
  display: grid; grid-template-rows: auto auto auto auto; gap: 22px;
  align-content: start;
}

/* RIGHT: タイトル直下の Hero アイキャッチ全幅(2026-05-28 改訂) */
.mhdr-hero {
  margin: 0;
  width: 100%; aspect-ratio: 16 / 9;
  overflow: hidden; background: #e8e3d6;
  border: 1px solid var(--mhdr-line);
}
.mhdr-hero img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.mhdr-hero.placeholder {
  background: repeating-linear-gradient(135deg,#e6e3dd 0 14px,#d8d3ca 14px 28px);
  display: flex; align-items: center; justify-content: center;
  color: var(--mhdr-ink-mute); font-family: var(--mhdr-mono); font-size: 11px;
  letter-spacing: 0.06em;
}
.mhdr-pillar-kicker {
  font-family: var(--mhdr-mono); font-size: 11px; font-weight: 800;
  letter-spacing: 0.22em; color: var(--mhdr-accent);
}
.mhdr-h1 {
  margin: 0;
  font-family: var(--mhdr-sans); font-weight: 900;
  font-size: clamp(32px, 4.4vw, 48px);
  line-height: 1.1; letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--mhdr-ink);
}
.mhdr-h1 .dash { color: var(--mhdr-accent); }

/* byline: アイキャッチを mhdr-hero に外出ししたためテキストのみ1行に */
.mhdr-byline {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font-size: 13px; color: var(--mhdr-ink-2);
  padding-top: 6px; border-top: 1px solid var(--mhdr-line);
}
.mhdr-byline b { color: var(--mhdr-ink); font-weight: 800; font-size: 14px; }
.mhdr-byline .sep { color: #c9c4ba; }
.mhdr-byline .read {
  font-family: var(--mhdr-mono); font-size: 11px; letter-spacing: 0.12em;
  color: var(--mhdr-ink-mute);
}

/* ----- TL;DR ─ 10秒でわかる ----- */
.mhdr-tldr-wrap { padding: 20px 48px 28px; background: var(--mhdr-bg); border-top: 1px solid var(--mhdr-rule); }
.mhdr-tldr {
  border: 1px solid rgba(214,51,43,0.15);
  border-left: 4px solid var(--mhdr-accent);
  background: var(--mhdr-card);
  padding: 18px 22px;
  display: grid; gap: 8px;
}
.mhdr-tldr-label {
  font-family: var(--mhdr-mono); font-size: 11px; font-weight: 800;
  letter-spacing: 0.18em; color: var(--mhdr-accent);
  text-transform: uppercase;
}
.mhdr-tldr-body {
  margin: 0; font-size: 15px; line-height: 1.75;
  color: #2a2a2a; text-wrap: pretty;
}
.mhdr-tldr-body b { font-weight: 800; color: var(--mhdr-ink); }

/* =========================================================================
   Acronym モード(.mhdr--acro)── ワードマーク主役(PEACE & LOVE 等)
   ・この記事の主役色は緑(新常識/治癒)= --mhdr-accent を緑に上書き
   ・赤(#d6332b)は「古い処置(RICE)」を表す取り消し線・古い年表マークのみ
   ========================================================================= */
.mhdr--acro { --mhdr-accent: #1f8a5b; }

/* LEFT: アクロニムパネル(黒地・stat の num-panel と同寸) */
.mhdr-acro-panel {
  background: var(--mhdr-ink); color: #fff;
  padding: 36px 28px; display: grid; gap: 16px;
  grid-template-rows: auto 1fr auto; min-height: 480px;
}
.mhdr--acro .mhdr-kicker-en { color: rgba(31,138,91,0.65); }

.mhdr-acro {
  display: grid; align-content: center; gap: 0;
  font-family: var(--mhdr-num); letter-spacing: -0.02em; line-height: 0.85;
}
.mhdr-acro-row {
  font-size: 86px; color: #fff;
  display: flex; align-items: baseline; gap: 4px;
}
.mhdr-acro-row.bottom { color: var(--mhdr-accent); }
.mhdr-acro-amp {
  font-family: var(--mhdr-num); font-size: 64px;
  color: var(--mhdr-accent); line-height: 1; margin-left: 2px;
}
.mhdr-acro-sub {
  margin-top: 14px; font-family: var(--mhdr-sans); font-weight: 700;
  font-size: 13px; letter-spacing: 0.04em; color: rgba(255,255,255,0.7);
  line-height: 1.6;
}
.mhdr-acro-sub b { color: #fff; font-weight: 800; }
.mhdr-acro-sub .crossed {
  color: rgba(255,255,255,0.35); text-decoration: line-through;
  text-decoration-color: #d6332b; text-decoration-thickness: 2px;
}

/* 教義タイムライン(年表) */
.mhdr-tl { display: grid; gap: 8px; }
.mhdr--acro .mhdr-tl-ticks {
  display: grid; grid-template-columns: repeat(4, 1fr);
  font-family: var(--mhdr-mono); font-size: 10px;
  color: rgba(255,255,255,0.5); letter-spacing: 0.04em; text-align: left;
  margin-bottom: 0;
}
.mhdr--acro .mhdr-tl-ticks span b {
  display: block; color: rgba(255,255,255,0.85);
  font-weight: 700; margin-bottom: 2px; font-size: 10px;
}
.mhdr--acro .mhdr-tl-ticks span.hl,
.mhdr--acro .mhdr-tl-ticks span.hl b { color: var(--mhdr-accent); font-weight: 700; }
.mhdr--acro .mhdr-tl-bar {
  position: relative; height: 2px; background: rgba(255,255,255,0.18);
}
.mhdr-tl-mark {
  position: absolute; top: -4px; width: 10px; height: 10px;
  background: var(--mhdr-accent); border-radius: 50%;
  transform: translateX(-50%);
}
.mhdr-tl-mark.old { background: #d6332b; }

/* RIGHT: 取り消し線つき H1(RICE処置 を赤帯で横切る) */
.mhdr--acro .mhdr-h1 .strike {
  color: var(--mhdr-ink-2); padding: 0 2px;
  background: linear-gradient(transparent calc(50% - 1px), #d6332b calc(50% - 1px), #d6332b calc(50% + 1px), transparent calc(50% + 1px));
}
.mhdr--acro .mhdr-h1 em { color: var(--mhdr-accent); font-style: normal; }

/* TL;DR を緑系の枠に(赤の既定値を上書き) */
.mhdr--acro .mhdr-tldr { border-color: rgba(31,138,91,0.18); }

/* =========================================================================
   Responsive — 〜960px で1カラムに畳む
   ========================================================================= */
@media (max-width: 960px) {
  .mhdr-top { padding: 18px 24px; }
  .mhdr-body { grid-template-columns: 1fr; }
  .mhdr-num-panel,
  .mhdr-acro-panel { min-height: 0; padding: 28px 24px; }
  .mhdr-stat-num { font-size: 168px; }
  .mhdr-stat-num em { font-size: 64px; }
  .mhdr-acro-row { font-size: 68px; }
  .mhdr-acro-amp { font-size: 48px; }
  .mhdr-title-panel { padding: 28px 24px; }
  .mhdr-tldr-wrap { padding: 18px 24px 24px; }
  .mhdr-byline { grid-template-columns: 96px 1fr; }
}
@media (max-width: 520px) {
  .mhdr-stat-num { font-size: 132px; }
  .mhdr-stat-num em { font-size: 52px; }
  .mhdr-acro-row { font-size: 54px; }
  .mhdr-acro-amp { font-size: 38px; }
  .mhdr-byline { grid-template-columns: 80px 1fr; }
}

/* =========================================================================
   Triad モード(.mhdr--triad)── 3要素構造主役(疲労回復ピラー 等)
   ・このモードのアクセントは青(#2a6fdb)= --mhdr-accent を上書き
   ・「3重苦」の巨大数字 + 3要素リスト + 変換ライン(休む→攻めの休養)
   2026-05-29 統合: zip mhdr-triad.css を mhdr.css 本体へ統合(enqueue 1本化)。
                    sub-line/q は .mhdr--triad スコープに限定し他モードのデグレを予防。
   ========================================================================= */
.mhdr--triad { --mhdr-accent: #2a6fdb; }

/* 左パネル — 黒地トライアド */
.mhdr-triad-panel {
  background: var(--mhdr-ink); color: #fff;
  padding: 32px 28px;
  display: grid; grid-template-rows: auto 1fr auto; gap: 18px;
  min-height: 540px;
}

/* 大きな「3」+ 3要素リスト */
.mhdr-triad {
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center;
}
.mhdr-triad-num {
  font-family: var(--mhdr-num);
  font-size: 168px; line-height: 0.8; letter-spacing: -0.04em;
  color: #fff; position: relative;
}
.mhdr-triad-num em {
  position: absolute; right: -6px; bottom: 10px;
  font-style: normal; font-size: 30px; line-height: 1;
  font-family: var(--mhdr-sans); font-weight: 900;
  color: var(--mhdr-accent);
}
.mhdr-triad-list { display: grid; gap: 10px; }
.mhdr-triad-item {
  display: grid; gap: 2px;
  border-left: 3px solid var(--mhdr-accent); padding-left: 12px;
}
.mhdr-triad-item .t {
  font-family: var(--mhdr-sans); font-weight: 800; font-size: 16px;
  color: #fff; letter-spacing: 0.02em;
}
.mhdr-triad-item .d {
  font-family: var(--mhdr-mono); font-size: 10px;
  letter-spacing: 0.06em; color: rgba(255,255,255,0.55);
}

/* 変換ライン: 休む → 攻めの休養3戦略 */
.mhdr-triad-transform {
  display: flex; align-items: center; gap: 12px;
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.mhdr-triad-transform .from {
  font-family: var(--mhdr-sans); font-weight: 800; font-size: 13px;
  color: rgba(255,255,255,0.6);
}
.mhdr-triad-transform .arrow { color: var(--mhdr-accent); font-size: 18px; line-height: 1; }
.mhdr-triad-transform .to {
  font-family: var(--mhdr-sans); font-weight: 900; font-size: 14px; color: #fff;
}
.mhdr-triad-transform .to em { font-style: normal; color: var(--mhdr-accent); }

.mhdr-triad-cite {
  font-family: var(--mhdr-mono); font-size: 10px;
  letter-spacing: 0.06em; color: rgba(255,255,255,0.5);
}

/* タイトル側の sub-line(SEOタイトルが2文構成のとき・triad 限定) */
.mhdr--triad .mhdr-h1 .sub-line {
  display: block; margin-top: 10px;
  font-size: 22px; font-weight: 800; color: var(--mhdr-ink-2);
  letter-spacing: -0.01em;
}
.mhdr--triad .mhdr-h1 .q { color: var(--mhdr-accent); }

/* TL;DR カードのアクセントは --mhdr-accent を継承 */
.mhdr--triad .mhdr-tldr {
  border-color: color-mix(in srgb, var(--mhdr-accent) 18%, transparent);
}

/* ---- responsive (triad) ---- */
@media (max-width: 960px) {
  .mhdr-triad-panel { min-height: 0; padding: 24px; }
  .mhdr-triad-num { font-size: 128px; }
  .mhdr--triad .mhdr-h1 .sub-line { font-size: 17px; }
}
@media (max-width: 520px) {
  .mhdr-triad { grid-template-columns: 1fr; }
  .mhdr-triad-num { font-size: 104px; }
}

/* ── mhdr--compare ─ 対比型 ───────────────────────────────────────── */
.mhdr--compare { --mhdr-accent: #1f8a5b; }          /* 推奨=緑 */
.mhdr-cmp-panel {
  --mhdr-old: #c0392f;                               /* 旧説=くすませた赤 */
  background: var(--mhdr-ink); color: #fff;
  padding: 30px 28px; display: grid; grid-template-rows: auto 1fr auto; gap: 16px;
  min-height: 540px; position: relative; overflow: hidden;
}
.mhdr-cmp-panel::after {
  content: "VS"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  font-family: var(--mhdr-num); font-size: 150px; line-height: 1;
  color: rgba(255,255,255,0.04); letter-spacing: -0.04em; pointer-events: none;
}
.mhdr-cmp-stack { display: grid; gap: 14px; align-content: center; position: relative; z-index: 1; }
.mhdr-cmp-card { display: grid; gap: 6px; padding: 16px 18px; border: 1px solid rgba(255,255,255,0.14); }
.mhdr-cmp-card .tag {
  font-family: var(--mhdr-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.16em;
  padding: 3px 8px; width: fit-content; text-transform: uppercase;
}
.mhdr-cmp-card .label { font-family: var(--mhdr-sans); font-weight: 900; font-size: 22px; line-height: 1.15; letter-spacing: -0.01em; }
.mhdr-cmp-card .sub { font-family: var(--mhdr-sans); font-weight: 500; font-size: 12px; line-height: 1.5; color: rgba(255,255,255,0.6); }
.mhdr-cmp-card.is-old { border-color: rgba(192,57,47,0.4); background: rgba(192,57,47,0.06); }
.mhdr-cmp-card.is-old .tag { background: var(--mhdr-old); color: #fff; }
.mhdr-cmp-card.is-old .label { color: rgba(255,255,255,0.5); text-decoration: line-through; text-decoration-color: var(--mhdr-old); text-decoration-thickness: 2px; }
.mhdr-cmp-card.is-new { border-color: color-mix(in srgb, var(--mhdr-accent) 55%, transparent); background: color-mix(in srgb, var(--mhdr-accent) 12%, transparent); }
.mhdr-cmp-card.is-new .tag { background: var(--mhdr-accent); color: #fff; }
.mhdr-cmp-card.is-new .label { color: #fff; }
.mhdr-cmp-vs { display: flex; align-items: center; gap: 12px; }
.mhdr-cmp-vs .line { flex: 1; height: 1px; background: rgba(255,255,255,0.16); }
.mhdr-cmp-vs .word { font-family: var(--mhdr-num); font-size: 18px; color: var(--mhdr-gold, #e8b04d); letter-spacing: 0.04em; }
.mhdr-cmp-verdict { position: relative; z-index: 1; display: grid; gap: 4px; padding: 14px 16px; background: var(--mhdr-accent); color: #fff; }
.mhdr-cmp-verdict .vk { font-family: var(--mhdr-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.2em; color: rgba(255,255,255,0.8); }
.mhdr-cmp-verdict .vt { font-family: var(--mhdr-sans); font-weight: 900; font-size: 16px; line-height: 1.3; }
.mhdr-cmp-cite { position: relative; z-index: 1; font-family: var(--mhdr-mono); font-size: 10px; letter-spacing: 0.06em; color: rgba(255,255,255,0.5); }
@media (max-width: 960px) {
  .mhdr-cmp-panel { min-height: 0; padding: 24px; }
  .mhdr-cmp-panel::after { font-size: 110px; }
}
@media (max-width: 520px) {
  .mhdr-cmp-card .label { font-size: 19px; }
}

/* ── mhdr--review ─ 製品評価型 ────────────────────────────────────── */
.mhdr--review { --mhdr-accent: #c8923a; }           /* スコア=落ち着いた金茶 */
.mhdr-rev-panel {
  background: var(--mhdr-ink); color: #fff;
  padding: 28px; display: grid; grid-template-rows: auto auto 1fr auto; gap: 16px;
  min-height: 540px; position: relative; overflow: hidden;
}
.mhdr-rev-product { font-family: var(--mhdr-sans); font-weight: 800; font-size: 15px; line-height: 1.4; color: rgba(255,255,255,0.92); letter-spacing: 0.01em; }
.mhdr-rev-score { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.mhdr-rev-score-num { font-family: var(--mhdr-num); font-size: 92px; line-height: 0.82; letter-spacing: -0.03em; color: #fff; display: flex; align-items: flex-end; gap: 2px; }
.mhdr-rev-score-num em { font-style: normal; font-size: 30px; color: var(--mhdr-gold, #e8b04d); line-height: 1.4; }
.mhdr-rev-score-side { display: grid; gap: 6px; }
.mhdr-rev-pips { display: flex; gap: 3px; }
.mhdr-rev-pips i { width: 13px; height: 13px; background: var(--mhdr-gold, #e8b04d); display: block; }
.mhdr-rev-pips i.off { background: rgba(255,255,255,0.14); }
.mhdr-rev-pips i.half { background: linear-gradient(90deg, var(--mhdr-gold, #e8b04d) 50%, rgba(255,255,255,0.14) 50%); }
.mhdr-rev-score-cap { font-family: var(--mhdr-mono); font-size: 10px; letter-spacing: 0.08em; color: rgba(255,255,255,0.55); }
.mhdr-rev-axes { display: grid; gap: 11px; align-content: center; }
.mhdr-rev-axis { display: grid; grid-template-columns: 64px 1fr 30px; gap: 10px; align-items: center; }
.mhdr-rev-axis .an { font-family: var(--mhdr-sans); font-weight: 700; font-size: 12px; color: rgba(255,255,255,0.85); }
.mhdr-rev-axis .av { font-family: var(--mhdr-mono); font-size: 11px; color: var(--mhdr-gold, #e8b04d); text-align: right; }
.mhdr-rev-bar { height: 6px; background: rgba(255,255,255,0.12); position: relative; }
.mhdr-rev-bar i { position: absolute; left: 0; top: 0; height: 100%; background: var(--mhdr-gold, #e8b04d); display: block; }
.mhdr-rev-verdict { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.mhdr-rev-verdict .vk { font-family: var(--mhdr-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.18em; opacity: 0.8; }
.mhdr-rev-verdict .vt { font-family: var(--mhdr-sans); font-weight: 900; font-size: 17px; letter-spacing: 0.02em; }
.mhdr-rev-verdict--buy  { background: var(--mhdr-accent); color: #1a1a2e; }
.mhdr-rev-verdict--wait { background: #8a7a52; color: #fff; }
.mhdr-rev-verdict--pass { background: #5b5448; color: #fff; }
@media (max-width: 960px) {
  .mhdr-rev-panel { min-height: 0; padding: 24px; }
  .mhdr-rev-score-num { font-size: 76px; }
}
@media (max-width: 520px) {
  .mhdr-rev-score-num { font-size: 64px; }
  .mhdr-rev-axis { grid-template-columns: 56px 1fr 28px; }
}

/* ── mhdr--steps ─ 手順型 ─────────────────────────────────────────── */
.mhdr--steps { --mhdr-accent: #2a6fdb; }            /* 進行=青 */
.mhdr-steps-panel {
  background: var(--mhdr-ink); color: #fff;
  padding: 30px 28px; display: grid; grid-template-rows: auto 1fr auto; gap: 18px;
  min-height: 540px;
}
.mhdr-steps-list { display: grid; gap: 0; align-content: center; }
.mhdr-step { display: grid; grid-template-columns: 44px 1fr; gap: 16px; position: relative; padding: 4px 0; }
.mhdr-step:not(:last-child) { padding-bottom: 18px; }
.mhdr-step:not(:last-child)::before {
  content: ""; position: absolute; left: 21px; top: 40px; bottom: -4px; width: 2px;
  background: linear-gradient(180deg, var(--mhdr-accent), rgba(42,111,219,0.25));
}
.mhdr-step-no {
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--mhdr-accent); color: #fff;
  display: grid; place-items: center; position: relative; z-index: 1; background: var(--mhdr-ink);
  font-family: var(--mhdr-num); font-size: 24px; line-height: 1;
}
.mhdr-step:first-child .mhdr-step-no { background: var(--mhdr-accent); }
.mhdr-step-body { display: grid; gap: 3px; align-content: center; }
.mhdr-step-t { font-family: var(--mhdr-sans); font-weight: 900; font-size: 18px; line-height: 1.25; letter-spacing: -0.01em; color: #fff; }
.mhdr-step-d { font-family: var(--mhdr-sans); font-weight: 500; font-size: 12px; line-height: 1.55; color: rgba(255,255,255,0.6); }
.mhdr-steps-goal { display: flex; align-items: center; gap: 10px; padding: 13px 16px; background: var(--mhdr-accent); color: #fff; }
.mhdr-steps-goal .gk { font-family: var(--mhdr-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.18em; color: rgba(255,255,255,0.8); }
.mhdr-steps-goal .gt { font-family: var(--mhdr-sans); font-weight: 900; font-size: 15px; line-height: 1.3; }
@media (max-width: 960px) {
  .mhdr-steps-panel { min-height: 0; padding: 24px; }
}
@media (max-width: 520px) {
  .mhdr-step { grid-template-columns: 38px 1fr; gap: 12px; }
  .mhdr-step-no { width: 38px; height: 38px; font-size: 20px; }
  .mhdr-step:not(:last-child)::before { left: 18px; top: 36px; }
  .mhdr-step-t { font-size: 16px; }
}