/* =========================================================================
   magazine-article.css — 記事(single post)本文エリアの読みもの向けデザイン。
   配色は design-tokens の青系を踏襲。single.php の .mag-article-v2 配下に適用。
   ========================================================================= */

.mag-article-v2 { --ma-accent:#2563EB; --ma-primary:#1E40AF; --ma-accent-bg:#EFF6FF;
  --ma-ink:#0F172A; --ma-body:#334155; --ma-muted:#64748B; --ma-border:#E2E8F0;
  --ma-peach:#FFF3EC; --ma-peach-bd:#F6C9AE; --ma-warn:#E07A2F; }

/* 2カラム: 本文 + 追従サイドバー(もくじ) */
.mag-article-v2 .mag-layout { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:40px; align-items:start; }
@media (max-width:900px){ .mag-article-v2 .mag-layout{ grid-template-columns:1fr; } }

/* ---- ヘッダー ---- */
.mag-article-v2 .mag-article__cat-pill{ display:inline-block; background:var(--ma-accent-bg); color:var(--ma-primary);
  font-size:12px; font-weight:700; padding:4px 12px; border-radius:999px; margin-bottom:12px; }
.mag-article-v2 .mag-article__title{ font-size:30px; line-height:1.35; font-weight:800; color:var(--ma-ink); margin:0 0 6px; }
.mag-article-v2 .mag-article__subtitle{ font-size:18px; font-weight:600; color:var(--ma-body); margin:0 0 14px; }
.mag-article-v2 .mag-article__meta{ font-size:13px; color:var(--ma-muted); display:flex; gap:16px; flex-wrap:wrap; align-items:center; }

/* ---- 結論ボックス(2カラム: チェックリスト + ヒーロー) ---- */
.mag-article-v2 .mag-summary{ display:grid; grid-template-columns:1fr 300px; gap:20px; align-items:center;
  background:var(--ma-accent-bg); border:1px solid #C7DBFF; border-radius:16px; padding:22px 24px; margin:22px 0 28px; }
@media (max-width:680px){ .mag-article-v2 .mag-summary{ grid-template-columns:1fr; } .mag-article-v2 .mag-summary__hero{ display:none; } }
.mag-article-v2 .mag-summary__label{ display:flex; align-items:center; gap:6px; font-weight:800; color:var(--ma-primary); font-size:15px; margin-bottom:10px; }
.mag-article-v2 .mag-summary__label::before{ content:"💡"; font-size:18px; }
.mag-article-v2 .mag-summary__text{ font-size:15px; line-height:1.9; color:var(--ma-body); margin:0; }
.mag-article-v2 .mag-summary__hero img{ width:100%; height:auto; border-radius:12px; display:block; }

/* ---- サイドバー もくじ(追従・番号バッジ) ---- */
.mag-article-v2 .mag-side{ position:sticky; top:24px; }
.mag-article-v2 .mag-side-toc{ background:#fff; border:1px solid var(--ma-border); border-radius:14px; padding:18px 18px 8px; }
.mag-article-v2 .mag-side-toc__label{ font-weight:800; color:var(--ma-ink); font-size:14px; margin-bottom:12px; }
.mag-article-v2 .mag-side-toc ol{ list-style:none; margin:0; padding:0; counter-reset:toc; }
.mag-article-v2 .mag-side-toc li{ counter-increment:toc; margin-bottom:12px; }
.mag-article-v2 .mag-side-toc a{ display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.55; color:var(--ma-body); text-decoration:none; }
.mag-article-v2 .mag-side-toc a::before{ content:counter(toc); flex:0 0 22px; width:22px; height:22px; background:var(--ma-primary); color:#fff;
  border-radius:50%; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.mag-article-v2 .mag-side-toc a:hover{ color:var(--ma-accent); }
@media (max-width:900px){ .mag-article-v2 .mag-side{ position:static; } }

/* ---- 本文 見出し(番号バッジ) ---- */
.mag-article-v2 .mag-article__body{ counter-reset:sec; font-size:16px; line-height:1.95; color:var(--ma-body); }
.mag-article-v2 .mag-article__body > h2{ counter-increment:sec; display:flex; align-items:center; gap:12px;
  font-size:22px; font-weight:800; color:var(--ma-ink); margin:44px 0 14px; padding-bottom:0; border:0; }
.mag-article-v2 .mag-article__body > h2::before{ content:counter(sec); flex:0 0 34px; width:34px; height:34px;
  background:var(--ma-primary); color:#fff; border-radius:50%; font-size:17px; font-weight:800;
  display:flex; align-items:center; justify-content:center; }
/* 見出しテキスト先頭の "N. " 手打ち番号は視覚上バッジと重複するので隠す */
.mag-article-v2 .mag-article__body > h2 { }
.mag-article-v2 .mag-article__body h3{ font-size:17px; font-weight:700; color:var(--ma-ink); margin:24px 0 8px; }
.mag-article-v2 .mag-article__body p{ margin:0 0 14px; }
.mag-article-v2 .mag-article__body ul,.mag-article-v2 .mag-article__body ol{ margin:0 0 16px; padding-left:1.4em; }
.mag-article-v2 .mag-article__body li{ margin-bottom:6px; }
.mag-article-v2 .mag-article__body strong{ color:var(--ma-ink); }
.mag-article-v2 .lesson-mark,.mag-article-v2 mark{ background:linear-gradient(transparent 60%, #FDE68A 60%); padding:0 2px; }

/* ---- コールアウト(既存 .mb-callout を青系に上書き) ---- */
.mag-article-v2 .mb-callout{ margin:20px 0; padding:16px 18px; border-radius:12px; border-left:4px solid #CBD5E1; background:#F8FAFC; font-style:normal; }
.mag-article-v2 .mb-callout > p{ font-style:normal; }
.mag-article-v2 .mb-callout--kaisetsu{ border-left-color:var(--ma-accent); background:var(--ma-accent-bg); }
/* Point: 左太ボーダーのカード。先頭 strong を見出し扱い */
.mag-article-v2 .mb-callout--point{ border:1px solid var(--ma-border); border-left:5px solid var(--ma-primary); background:#fff; }
.mag-article-v2 .mb-callout--point > p{ margin:0; }
.mag-article-v2 .mb-callout--point strong{ color:var(--ma-primary); }
.mag-article-v2 .mb-callout--term{ border-left-color:#8B5CF6; background:#F5F3FF; }
.mag-article-v2 .mb-callout--copy{ border:1px dashed #93C5FD; background:var(--ma-accent-bg); }
.mag-article-v2 .mb-callout--copy strong{ color:var(--ma-primary); }
.mag-article-v2 .mb-callout--memo{ border:1px solid #FDE68A; background:#FFFDF0; font-style:italic; color:#6B5E2A; border-left:none; }
.mag-article-v2 .mb-callout--memo > p{ font-style:italic; }

/* ---- コーチ・マナ(アバター付き吹き出し) ---- */
.mag-article-v2 .mb-coach{ position:relative; margin:24px 0; padding:18px 20px 18px 84px; min-height:84px;
  background:var(--ma-peach); border:1px solid var(--ma-peach-bd); border-radius:16px; }
.mag-article-v2 .mb-coach::before{ content:""; position:absolute; left:16px; top:16px; width:56px; height:56px;
  border-radius:50%; background:#fff url("../assets/img/home-v2/hero-parts/person.png") center/cover no-repeat; border:2px solid var(--ma-peach-bd); }
.mag-article-v2 .mb-coach > p{ margin:0; }
.mag-article-v2 .mb-coach strong{ color:var(--ma-warn); }

/* ---- Before/After(❌⭕ blockquote) ---- */
.mag-article-v2 .mag-article__body blockquote:not([class]){ margin:12px 0; padding:14px 16px; border-radius:12px; border-left:4px solid #CBD5E1; background:#F8FAFC; }

/* ---- 表(失敗→回避) ---- */
.mag-article-v2 .lesson-table{ width:100%; border-collapse:separate; border-spacing:0; margin:16px 0; border:1px solid var(--ma-border); border-radius:12px; overflow:hidden; }
.mag-article-v2 .lesson-table th{ background:var(--ma-primary); color:#fff; font-size:14px; padding:12px 14px; text-align:left; }
.mag-article-v2 .lesson-table td{ padding:12px 14px; border-top:1px solid var(--ma-border); font-size:14px; }
.mag-article-v2 .lesson-table tr:nth-child(even) td{ background:#F8FAFC; }

/* ---- まとめ後 診断CTAボックス ---- */
.mag-article-v2 .mag-diag-cta{ display:grid; grid-template-columns:1fr 200px; gap:16px; align-items:center;
  background:linear-gradient(135deg,#1E3A8A,#2563EB); color:#fff; border-radius:16px; padding:24px 28px; margin:28px 0; }
@media (max-width:680px){ .mag-article-v2 .mag-diag-cta{ grid-template-columns:1fr; } .mag-article-v2 .mag-diag-cta__img{ display:none; } }
.mag-article-v2 .mag-diag-cta__label{ font-size:20px; font-weight:800; margin-bottom:6px; }
.mag-article-v2 .mag-diag-cta__text{ font-size:14px; opacity:.92; margin-bottom:14px; }
.mag-article-v2 .mag-diag-cta__btn{ display:inline-block; background:var(--ma-warn); color:#fff; font-weight:800; font-size:16px;
  padding:12px 28px; border-radius:999px; text-decoration:none; }
.mag-article-v2 .mag-diag-cta__btn:hover{ filter:brightness(1.06); }
.mag-article-v2 .mag-diag-cta__note{ font-size:12px; opacity:.8; margin-top:8px; }
.mag-article-v2 .mag-diag-cta__img img{ width:100%; height:auto; }

/* ---- FAQ アコーディオン ---- */
.mag-article-v2 .mag-faq{ margin:36px 0; }
.mag-article-v2 .mag-faq__title{ font-size:20px; font-weight:800; color:var(--ma-ink); margin-bottom:14px; }
.mag-article-v2 .mag-faq__item{ border-bottom:1px solid var(--ma-border); }
.mag-article-v2 .mag-faq__q{ display:flex; justify-content:space-between; align-items:center; gap:12px; cursor:pointer;
  font-weight:700; color:var(--ma-ink); font-size:15px; padding:16px 4px; margin:0; list-style:none; }
.mag-article-v2 .mag-faq__q::-webkit-details-marker{ display:none; }
.mag-article-v2 .mag-faq__q::after{ content:"+"; flex:0 0 auto; font-size:22px; color:var(--ma-accent); font-weight:400; }
.mag-article-v2 details[open] .mag-faq__q::after{ content:"−"; }
.mag-article-v2 .mag-faq__a{ font-size:14px; line-height:1.9; color:var(--ma-body); padding:0 4px 18px; margin:0; }

/* ---- 監修フッター ---- */
.mag-article-v2 .mag-author{ display:flex; gap:14px; align-items:flex-start; margin-top:36px; padding-top:24px; border-top:1px solid var(--ma-border); }
.mag-article-v2 .mag-author__avatar{ flex:0 0 48px; width:48px; height:48px; border-radius:50%;
  background:#EEF2FF url("../assets/img/home-v2/hero-parts/person.png") center/cover no-repeat; }
.mag-article-v2 .mag-author__label{ font-size:12px; color:var(--ma-muted); }
.mag-article-v2 .mag-author__name{ font-weight:700; color:var(--ma-ink); }
.mag-article-v2 .mag-author__bio{ font-size:13px; color:var(--ma-body); margin:4px 0 0; }

/* ---- フロー図 [mb_flow] ---- */
.mag-article-v2 .mb-flow{ display:flex; align-items:stretch; gap:8px; flex-wrap:wrap; margin:20px 0; }
.mag-article-v2 .mb-flow__step{ flex:1 1 0; min-width:120px; display:flex; flex-direction:column; gap:4px;
  background:var(--ma-accent-bg); border:1px solid #C7DBFF; border-radius:12px; padding:14px 12px; text-align:center; }
.mag-article-v2 .mb-flow__num{ width:24px; height:24px; margin:0 auto 2px; background:var(--ma-primary); color:#fff;
  border-radius:50%; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.mag-article-v2 .mb-flow__label{ font-weight:800; color:var(--ma-ink); font-size:15px; }
.mag-article-v2 .mb-flow__desc{ font-size:12px; color:var(--ma-muted); line-height:1.5; }
.mag-article-v2 .mb-flow__arrow{ display:flex; align-items:center; color:var(--ma-accent); font-size:20px; font-weight:700; }
.mag-article-v2 .mb-flow__goal{ flex:1 1 0; min-width:110px; display:flex; align-items:center; justify-content:center; text-align:center;
  background:var(--ma-primary); color:#fff; border-radius:12px; padding:14px 12px; font-weight:800; font-size:14px; }
@media (max-width:640px){ .mag-article-v2 .mb-flow{ flex-direction:column; } .mag-article-v2 .mb-flow__arrow{ transform:rotate(90deg); justify-content:center; } }

/* ---- Before/After [mb_ba] ---- */
.mag-article-v2 .mb-ba-wrap{ margin:20px 0; }
.mag-article-v2 .mb-ba__title{ font-size:16px; font-weight:800; color:var(--ma-ink); margin:0 0 4px; }
.mag-article-v2 .mb-ba__scenario{ font-size:14px; color:var(--ma-body); margin:0 0 12px; }
.mag-article-v2 .mb-ba{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ .mag-article-v2 .mb-ba{ grid-template-columns:1fr; } }
.mag-article-v2 .mb-ba__col{ border-radius:12px; padding:14px 16px; }
.mag-article-v2 .mb-ba__col--before{ background:#FEF2F2; border:1px solid #FECACA; }
.mag-article-v2 .mb-ba__col--after{ background:#ECFDF5; border:1px solid #A7F3D0; }
.mag-article-v2 .mb-ba__badge{ display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:14px; margin-bottom:8px; }
.mag-article-v2 .mb-ba__col--before .mb-ba__badge{ color:#DC2626; }
.mag-article-v2 .mb-ba__col--before .mb-ba__badge::before{ content:"✕"; }
.mag-article-v2 .mb-ba__col--after .mb-ba__badge{ color:#059669; }
.mag-article-v2 .mb-ba__col--after .mb-ba__badge::before{ content:"◯"; }
.mag-article-v2 .mb-ba__img{ width:100%; max-width:150px; height:auto; display:block; margin:0 auto 8px; }
.mag-article-v2 .mb-ba__col p{ font-size:14px; line-height:1.8; color:var(--ma-body); margin:0; }

/* ---- 3カード [mb_cards] ---- */
.mag-article-v2 .mb-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:20px 0; }
@media (max-width:640px){ .mag-article-v2 .mb-cards{ grid-template-columns:1fr; } }
.mag-article-v2 .mb-card{ background:#fff; border:1px solid var(--ma-border); border-radius:12px; padding:18px 16px; text-align:center; }
.mag-article-v2 .mb-card__icon{ font-size:32px; line-height:1; margin-bottom:8px; }
.mag-article-v2 .mb-card__title{ font-weight:800; color:var(--ma-primary); font-size:15px; margin-bottom:6px; }
.mag-article-v2 .mb-card__desc{ font-size:13px; color:var(--ma-body); line-height:1.7; }

/* ---- 失敗→回避 表(緑矢印) ---- */
.mag-article-v2 .lesson-table td:first-child{ position:relative; }
.mag-article-v2 .lesson-table.ba-arrow td:first-child::after{ content:"→"; position:absolute; right:-2px; color:var(--ma-accent); font-weight:700; }