/* =========================================
  Article Enhance (scoped)
  Project: Home Design Koto
  Pages: 屋根の種類と修理方法 + 修理方法系（計9P）
  Scope: .article-enhance 配下のみ
  Author: kichinto
  Updated: 2025-09-19 (rev-b)
========================================= */

/* =========
   Tokens
========= */
:root{
  /* Colors */
  --ink:#222;            /* 本文 */
  --ink-strong:#111;     /* 見出し */
  --muted:#6b7280;       /* 注釈/キャプション */
  --accent:#F7931E;      /* アクセント */
  --bg:#fffdfa;          /* 引用背景など */
  --border:#e5e7eb;      /* 罫線 */

  /* Effects */
  --marker: linear-gradient(transparent 60%, rgba(247,147,30,.28) 0);
}

/* =========
   Root
========= */
.article-enhance{
  color:var(--ink);
  font-feature-settings:"palt";
  word-break:normal;
  overflow-wrap:anywhere;
  line-height:1.9;
  padding-inline:min(4vw,16px);   /* 余白を少しタイトに */
}

/* =========
   Text
========= */
.article-enhance p{
  margin:1.2em 0;
  font-size:clamp(15px,4vw,17px);
}
/* strongが小さく見えないように固定（!importantで上書き） */
.article-enhance strong,
.article-enhance p strong,
.article-enhance li strong,
.article-enhance .callout strong,
.article-enhance h2 strong,
.article-enhance h3 strong,
.article-enhance h4 strong{
  font-weight:700 !important;
  font-size:1em !important;
  line-height:inherit !important;
}

/* =========
   Headings
========= */
.article-enhance h2,
.article-enhance h3,
.article-enhance h4{
  line-height:1.35;
  color:var(--ink-strong);
  scroll-margin-top:80px; /* 固定ヘッダ対策 */
  margin:0; /* 初期化 */
}

.article-enhance h2{
  font-size:clamp(20px,5.2vw,28px);
  margin:2.2em 0 .8em;
  padding:.4em .2em;
  border-bottom:3px solid var(--accent);
}
.article-enhance h3{
  font-size:clamp(18px,4.8vw,22px);
  margin:1.8em 0 .6em;
  padding:.5em .7em;
  background:rgba(247,147,30,.08); /* アクセント色を薄く */
  border-left:4px solid var(--accent);
}
.article-enhance h3::before{ content:none; } /* 縦線を消す */

.article-enhance h4{
  font-size:clamp(16px,4.2vw,20px);
  margin:1.4em 0 .4em;
}

/* =========
   Lists
========= */
.article-enhance ul,
.article-enhance ol{
  margin:.8em 0 .8em 1.2em;
  padding:0;
}
.article-enhance li{ margin:.4em 0; }
.article-enhance ul{ list-style:disc; }
.article-enhance ol{ list-style:decimal; }

/* 手順リスト（番号を強調） */
.article-enhance .step-list{
  counter-reset:step;
  list-style:none; margin:1.2em 0; padding:0;
}
.article-enhance .step-list li{
  counter-increment:step;
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
  padding:12px 14px 12px 50px;
  position:relative; margin:.8em 0;
}
.article-enhance .step-list li::before{
  content:counter(step);
  position:absolute; left:14px; top:12px;
  width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center;
  border:2px solid var(--accent);
  color:var(--accent); font-weight:700;
}

/* =========
   Separators
========= */
.article-enhance hr{
  border:none; height:1px;
  background:linear-gradient(90deg,var(--border),transparent 70%);
  margin:2em 0;
}

/* =========
   Quotes
========= */
.article-enhance blockquote{
  margin:1.2em 0; padding:1em 1.2em;
  background:var(--bg);
  border-left:4px solid var(--accent);
  color:#333;
}

/* =========
   Callouts（上下左右の枠線統一）
========= */
.article-enhance .callout{
  border:1px solid var(--border);
  border-radius:0;
  padding:14px 16px;
  margin:1em 0;
  background:#fff;           /* 各バリアントで上書き */
}
.article-enhance .callout .ttl{
  font-weight:700;
  margin-bottom:.3em;
  color:var(--accent);
}

.article-enhance .callout li {
  font-size: 1.1em; 
  line-height: 1.9;
}

/* 情報（青） */
.article-enhance .note{
  --accent:#2563eb;
  background:rgba(37,99,235,.06);
  border-color:rgba(37,99,235,.25);
}
/* メリット（緑） */
.article-enhance .tip{
  --accent:#16a34a;
  background:rgba(22,163,74,.06);
  border-color:rgba(22,163,74,.25);
}
/* デメリット（赤） */
.article-enhance .warn{
  --accent:#dc2626;
  background:rgba(220,38,38,.06);
  border-color:rgba(220,38,38,.25);
}

/* =========
   Figures
========= */
.article-enhance figure{ margin:1.2em 0; }
.article-enhance img{
  max-width:100%; height:auto; display:block;
  border-radius:10px;
}
.article-enhance figcaption{
  font-size:12.5px; color:var(--muted);
  margin-top:.4em; text-align:center;
}

/* =========
   Tables
========= */
.article-enhance table{
  width:100%; border-collapse:collapse;
  margin:1em 0; font-size:clamp(14px,3.6vw,16px);
}
.article-enhance th,
.article-enhance td{
  border:1px solid var(--border);
  padding:.7em; vertical-align:top;
}
.article-enhance th{
  background:#fafafa; font-weight:700; text-align:left;
}

/* =========
   Utilities
========= */
.article-enhance .muted{ color:var(--muted); }
.article-enhance .center{ text-align:center; }
.article-enhance .mt-0{ margin-top:0 !important; }
.article-enhance .mb-0{ margin-bottom:0 !important; }
.article-enhance .mt-1{ margin-top:.5em !important; }
.article-enhance .mb-1{ margin-bottom:.5em !important; }
.article-enhance .mt-2{ margin-top:1em !important; }
.article-enhance .mb-2{ margin-bottom:1em !important; }

/* =========
   Media
========= */
@media (max-width:768px){
  .article-enhance{
    line-height:1.95;
    padding-inline:0;        /* SPは左右0 */
  }
  .article-enhance ul, .article-enhance ol{ margin-left:1.1em; }
}

/* ===== Fix pack (2025-09-19 rev-c) ===== */

/* 1) strong を確実に本文と同サイズに（テーマ側の強い指定に勝つ） */
.article-enhance.article-enhance strong,
.article-enhance.article-enhance p strong,
.article-enhance.article-enhance li strong,
.article-enhance.article-enhance .callout strong,
.article-enhance.article-enhance h2 strong,
.article-enhance.article-enhance h3 strong,
.article-enhance.article-enhance h4 strong{
  font-weight:700 !important;
  font-size:1.2em !important;
  line-height:inherit !important;
}

/* 2) マーカーが strong を内包しても消えないようにする
      - 行折返しにも途切れないよう box-decoration-break を適用
      - 子要素に跨ってもハイライトが見えるよう子要素にも同ハイライトを継承 */
.article-enhance .marker {
  background-image: linear-gradient(transparent 60%, rgba(255, 235, 59, .5) 0);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.article-enhance .marker *,
.article-enhance .marker strong{
  background-image: var(--marker) !important;
}

/* ボタン風リンクの縦センタリング＆余白バランス調整 */
.article-enhance .highlight-link{
  display:inline-flex;            /* ← これで縦中央が安定 */
  align-items:center;
  justify-content:center;
  line-height:1;                  /* 親pの行高の影響を断つ */
  padding:0em 1.2em 1em;             /* 余白を再定義 */
   background:#449c28;
  color:#fff !important;
  font-weight:700;
  text-decoration:none;
  border-radius:8px;
  transition:background .2s ease, transform .05s ease;
}
.article-enhance .highlight-link:hover{ background:#15803d; }
.article-enhance .highlight-link:active{ transform:translateY(1px); }

/* 段落行高の影響をさらに避けたい場合（任意） */
.article-enhance p > .highlight-link{ vertical-align:middle; }