/**
 * epdoc-view.css — エディタPro 記事表示（左カラム .ep-pro-body のみ）
 *   ヘッダー / フッター / 2カラム枠は review.css を共用。
 */
.ep-pro-body { line-height: 1.6; font-size: var(--fs-base); color: var(--text); }
.ep-pro-body > *:first-child { margin-top: 0; }
/* 記事タイプ見出し（ユーザーカード下の「レビュー / コラム/解説 / ブログ」）。
   .r2-main の gap(26px) で前後の余白が付くため、既定の margin-bottom は消して
   上下を均等にする（本文の直前にちょうど良く収める）。 */
.r2-main > .r2-posttype-head { margin-bottom: 0; }
.ep-pro-body p { margin: 0 0 1em; }
/* review.css 共通の .md-content p + p { margin-top: 2em } がエディタ
   (#pro-body > p + p { margin-top: 1em }) の倍の段落間隔になるため、
   エディタ表示と一致するよう 1em に打ち消す（クラス2つで優先度を上げる）。 */
.ep-pro-body.md-content p + p { margin-top: 0; }
.ep-pro-body h1 { font-size: var(--fs-xl); font-weight: 900; margin: 1.6em 0 0.6em; line-height: 1.35; }
.ep-pro-body h2 { font-size: var(--fs-lg); font-weight: 800; margin: 1.4em 0 0.5em; line-height: 1.4; }
/* 本文テキストに付与したインラインリンク（リンクカード・目次・商品リンク等とは別系統）。
   青系で表示する。リンクカード(.lc-card)などはクラスが付かないため影響しない。 */
.ep-pro-body a.ep-inline-link { color: #2f7fe0; text-decoration: underline; text-underline-offset: 2px; }
.ep-pro-body a.ep-inline-link:hover { color: #1f63c4; }
.ep-pro-body ul, .ep-pro-body ol { margin: 0 0 1em; padding-left: 3.6em; }
.ep-pro-body li { margin: 0.35em 0; }
/* 本文インラインの文字サイズ（大=2倍 / 特大=3倍）と段落・見出しの中央揃え。
   色は太字(B)と同じアクセント赤、太さも強める。 */
.ep-pro-body .ep-fs-l { font-size: 2em; color: var(--accent); font-weight: 700; }
.ep-pro-body .ep-fs-x { font-size: 3em; color: var(--accent); font-weight: 800; }
.ep-pro-body p.ep-align-center,
.ep-pro-body h1.ep-align-center,
.ep-pro-body h2.ep-align-center { text-align: center; }

/* 引用：エディタ（post-editor-pro.css）と同一デザイン。
   薄い赤背景＋太いアクセント罫＋左上の引用符。左右マージンは取らず本文と同じ幅。 */
.ep-pro-body blockquote {
  position: relative; margin: 22px 0; padding: 14px 20px 14px 52px;
  background: #fbeaea; border-left: 4px solid var(--accent);
  color: var(--text2); font-style: italic; line-height: 1.8;
}
.ep-pro-body blockquote::before {
  content: "\201C";   /* 装飾の開きダブルクォート（左上） */
  position: absolute; left: 12px; top: 4px;
  font-family: Georgia, "Times New Roman", "Yu Mincho", serif;
  font-size: 46px; line-height: 1; font-style: normal; color: var(--accent); opacity: .45;
  pointer-events: none;
}
.ep-pro-body blockquote p { margin: 0; }
.ep-pro-body blockquote p + p { margin-top: 0.5em; }

/* ── 注意ボックス（情報 / 注意 / 警告）── エディタと同じ見た目で表示する */
.ep-pro-body .ep-note {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 1.2em 0; padding: 14px 18px;
  border: 1px solid transparent; border-radius: 0;
  line-height: 1.9;
}
.ep-pro-body .ep-note-ico { flex: 0 0 auto; }
.ep-pro-body .ep-note-ico svg { width: 1.3em; height: 1.3em; display: block; margin-top: .2em; }
.ep-pro-body .ep-note-text { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.ep-pro-body .ep-note-text p { margin: 0; }
/* 注意ボックス内の箇条書き：枠内に収まるよう余白を最小限に */
.ep-pro-body .ep-note-text ul, .ep-pro-body .ep-note-text ol { margin: 6px 0; padding-left: 1.4em; }
.ep-pro-body .ep-note-text li { margin: 2px 0; }
.ep-pro-body .ep-note-info  { background: #eef4fd; border-color: #2f7fe0; color: #1e3a5f; }
.ep-pro-body .ep-note-info  .ep-note-ico { color: #2f7fe0; }
.ep-pro-body .ep-note-warn  { background: #fbf3d3; border-color: #d9a400; color: #5b4a08; }
.ep-pro-body .ep-note-warn  .ep-note-ico { color: #d9a400; }
.ep-pro-body .ep-note-alert { background: #fdecec; border-color: #e5484d; color: #7f1d1d; }
.ep-pro-body .ep-note-alert .ep-note-ico { color: #e5484d; }

.ep-pro-body .ep-figure { margin: 18px 0; }
.ep-pro-body .ep-figure figcaption {
  margin-top: 8px; font-size: var(--fs-sm); color: var(--text2); text-align: center;
}

.ep-pro-body .ep-toc {
  margin: 22px 0 52px; padding: 14px 18px 16px;   /* 下マージンは +30px（22→52）で目次の下に余白 */
  background: var(--bg2); border: 1.5px solid var(--text);   /* 背景は白 */
}
/* PC時は目次を左右10%インセット（スマホ＝768px以下は全幅のまま） */
@media (min-width: 769px) {
  .ep-pro-body .ep-toc { margin-left: 10%; margin-right: 10%; }
}
.ep-pro-body .ep-toc-head {
  display: flex; align-items: center; gap: 8px;
  font-weight: 900; font-size: var(--fs-base); letter-spacing: .04em;
  color: var(--text); margin-bottom: 10px;
}
.ep-pro-body .ep-toc-head::before {
  content: ""; flex: 0 0 auto;
  width: 4px; height: 16px; background: var(--accent);
}
.ep-pro-body .ep-toc-list, .ep-pro-body .ep-toc-sub { list-style: none; margin: 0; padding: 0; }
.ep-pro-body .ep-toc-list { counter-reset: toc; }
.ep-pro-body .ep-toc-list > li { counter-increment: toc; margin: 5px 0; }
.ep-pro-body .ep-toc-sub { counter-reset: tocsub; margin: 4px 0 4px 1.3em; }
.ep-pro-body .ep-toc-sub > li { counter-increment: tocsub; margin: 3px 0; }
.ep-pro-body .ep-toc a {
  color: var(--text); text-decoration: none; font-weight: 700;
  border-bottom: 1px solid transparent; line-height: 1.5;
}
.ep-pro-body .ep-toc a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.ep-pro-body .ep-toc-list > li > a::before {
  content: counter(toc) ". "; color: var(--accent); font-weight: 800;
}
.ep-pro-body .ep-toc-sub > li > a { font-weight: 500; font-size: var(--fs-sm); color: var(--text2); }
.ep-pro-body .ep-toc-sub > li > a::before {
  content: counter(toc) "-" counter(tocsub) " "; color: var(--accent); font-weight: 700;
}
.ep-pro-body .ep-toc-empty { color: var(--text4); font-size: var(--fs-sm); margin: 0; }

.ep-pro-body .ep-table-wrap { margin: 18px 0; }
.ep-pro-body .ep-table-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--table-line); background: var(--bg2);   /* 外枠も内側と同じグレー線で統一 */
}
.ep-pro-body .ep-table {
  width: 100%; border-collapse: collapse; font-size: var(--fs-sm);
  min-width: 280px;
}
.ep-pro-body .ep-table th, .ep-pro-body .ep-table td {
  border: 1px solid var(--table-line); padding: 8px 10px; vertical-align: top;
  font-weight: 400; text-align: left;   /* 既定は見出し装飾なし */
}
/* セル単位の中央揃え（エディタの中央揃えボタン） */
.ep-pro-body .ep-table th.ep-align-center,
.ep-pro-body .ep-table td.ep-align-center { text-align: center; }
/* 見出し行 ON */
.ep-pro-body .ep-table.ep-th-row thead th {
  background: var(--bg); font-weight: 700; white-space: nowrap;
}
/* 見出し列 ON */
.ep-pro-body .ep-table.ep-th-col tr > :first-child {
  background: var(--bg); font-weight: 700;
}

/* 評価ブロック：総合評価が未入力のときはサブ項目だけを1カラムで表示
   （review.css の .r2-score は 200px|1fr の2カラム） */
.r2-score.r2-score--no-main { grid-template-columns: 1fr; }

/* ── 埋め込み（YouTube / X 投稿）── */
.ep-pro-body .ep-embed { margin: 1.4em 0; }
.ep-pro-body .ep-embed-yt {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: #000; border-radius: 10px; overflow: hidden;
}
.ep-pro-body .ep-embed-yt iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.ep-pro-body .ep-embed-tweet { display: flex; justify-content: center; }
.ep-pro-body .ep-embed-tweet .twitter-tweet { margin: 0 auto !important; max-width: 100%; }
/* widgets.js 変換前のフォールバック（通常リンク表示） */
.ep-pro-body .ep-embed-tweet blockquote.twitter-tweet:not(.twitter-tweet-rendered) {
  border: 1.5px solid var(--border2, #252930); border-radius: 12px;
  padding: 16px; margin: 0 auto; max-width: 550px; word-break: break-all;
}