/* =================================================================
   xFactory — Blog article components (shared)
   全ブログ記事で再利用する記事内コンポーネント。
   各記事固有のレイアウト（article-hero / toc / article-body 等）は
   各記事の <style> に残し、ここには共通部品のみ集約する。
   依存: common.css の :root 変数（--paper-2 / --ink-2 / --line /
   --forest / --lime / --amber / --vermilion / --r-card / --f-display）
   ================================================================= */

/* ---- layout safety ----
   各記事の .article-wrap はCSSグリッド。グリッド子要素の min-width:auto により
   .a-table の min-width がカラム幅を押し広げ、スマホで横はみ出しが起きる。
   全記事共通の防御としてここで打ち消す。 */
.article-body{ min-width:0; }

/* ---- .a-figure — アイキャッチ / 本文画像枠 ---- */
.a-figure{ margin:clamp(28px,4vw,44px) 0; }
.a-figure img{ display:block; width:100%; height:auto; border-radius:var(--r-card); border:1px solid var(--line); }
.a-figure figcaption{ margin-top:10px; font-size:13px; color:var(--ink-3); line-height:1.6; }

/* ---- .a-diagram — インラインSVG図解の枠 ---- */
.a-diagram{ margin:clamp(28px,4vw,44px) 0; padding:clamp(20px,3vw,32px); background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-card); }
.a-diagram svg{ display:block; width:100%; height:auto; }
.a-diagram figcaption{ margin-top:14px; font-size:13px; color:var(--ink-3); line-height:1.6; text-align:center; }

/* ---- .a-table — データ表（.a-table-wrap でスマホ横スクロール） ---- */
.a-table-wrap{ margin:clamp(24px,3.5vw,40px) 0; overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--r-card); border:1px solid var(--line); }
.a-table{ width:100%; min-width:520px; border-collapse:collapse; background:#fff; font-size:14.5px; line-height:1.6; }
.a-table th{ background:var(--forest); color:#fff; font-weight:700; text-align:left; padding:12px 16px; white-space:nowrap; }
.a-table td{ padding:12px 16px; color:var(--ink-2); border-top:1px solid var(--line); vertical-align:top; }
.a-table tbody tr:nth-child(even) td{ background:color-mix(in srgb,var(--paper-2) 55%,#fff); }
.a-table td strong{ color:var(--forest); }

/* ---- .a-steps — 番号付きステップフロー（縦） ---- */
.a-steps{ list-style:none; counter-reset:astep; margin:clamp(24px,3.5vw,40px) 0; padding:0; display:grid; gap:0; }
.a-steps li{ counter-increment:astep; position:relative; padding:0 0 26px 56px; }
.a-steps li:last-child{ padding-bottom:0; }
.a-steps li::before{ content:counter(astep); position:absolute; left:0; top:0; width:36px; height:36px; border-radius:50%; background:var(--lime); color:#fff; font-family:var(--f-display); font-weight:800; font-size:16px; display:flex; align-items:center; justify-content:center; }
.a-steps li:not(:last-child)::after{ content:""; position:absolute; left:17px; top:42px; bottom:6px; width:2px; background:var(--line); }
.a-steps .st-title{ font-family:var(--f-display); font-weight:700; font-size:16.5px; color:var(--ink); line-height:1.5; padding-top:5px; }
.a-steps .st-desc{ margin-top:6px; font-size:15px; color:var(--ink-2); line-height:1.75; }

/* ---- .a-faq — details/summary 開閉FAQ ---- */
.a-faq{ margin:clamp(24px,3.5vw,40px) 0; display:grid; gap:10px; }
.a-faq details{ background:#fff; border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; }
.a-faq summary{ display:flex; align-items:baseline; gap:12px; padding:16px 18px; cursor:pointer; font-weight:700; font-size:15.5px; color:var(--ink); line-height:1.6; list-style:none; transition:background .18s; }
.a-faq summary::-webkit-details-marker{ display:none; }
.a-faq summary::before{ content:"Q"; flex:none; font-family:var(--f-display); font-weight:900; font-size:17px; color:var(--vermilion); }
.a-faq summary:hover{ background:var(--paper-2); }
.a-faq details[open] summary{ border-bottom:1px solid var(--line); }
.a-faq .faq-a{ padding:16px 18px 18px 47px; font-size:15px; color:var(--ink-2); line-height:1.8; }
.a-faq .faq-a p + p{ margin-top:.8em; }

/* ---- .a-note — 注意 / 補足コールアウト ---- */
.a-note{ margin:clamp(22px,3vw,36px) 0; padding:18px 20px; background:color-mix(in srgb,var(--amber) 9%,#fff); border-left:4px solid var(--amber); border-radius:0 var(--r-card) var(--r-card) 0; font-size:14.5px; color:var(--ink-2); line-height:1.8; }
.a-note strong{ color:var(--amber-deep,#9a6f1d); }
.a-note p + p{ margin-top:.7em; }

/* ---- .a-point — 要点ボックス ---- */
.a-point{ margin:clamp(22px,3vw,36px) 0; padding:22px 22px 20px; background:color-mix(in srgb,var(--forest) 7%,#fff); border:1px solid color-mix(in srgb,var(--forest) 24%,var(--line)); border-radius:var(--r-card); }
.a-point::before{ content:"POINT"; display:inline-block; font-family:var(--f-display); font-weight:800; font-size:11px; letter-spacing:.16em; color:#fff; background:var(--forest); padding:4px 12px; border-radius:999px; margin-bottom:12px; }
.a-point p{ font-size:15.5px; color:var(--ink); line-height:1.8; }
.a-point ul{ margin:8px 0 0; padding-left:1.3em; color:var(--ink-2); font-size:15px; line-height:1.8; }

/* ---- mobile ---- */
@media (max-width:640px){
  .a-steps li{ padding-left:48px; }
  .a-steps li::before{ width:32px; height:32px; font-size:14.5px; }
  .a-steps li:not(:last-child)::after{ left:15px; top:38px; }
  .a-faq .faq-a{ padding-left:18px; }
  .a-table{ font-size:13.5px; }
}