/* =============================================================
   article-components.css
   対談記事の共通コンポーネント（トンマナ準拠 / 2026-07-27）
   -------------------------------------------------------------
   ・pharmaiv2026.html / pharmait2026.html で共有する部品スタイル。
     ベースは article.css（content-article / 見出し / talk-* / marker-yellow）。
   ・カラーは絶対法：メイン #0097dc / 白 / 黒(#333) / 稀に黄(marker)。
     旧独自色（ティール・ゴールド等）とグラデ・グロー・装飾SVGは使わない。
   ・装飾過多を避け、フラット＋機能本位。バリアントは増やさず共通化。
   ============================================================= */

/* トークン（article.css の :root を継承。無い場合のフォールバック付き） */
.content-article {
  --c-primary: var(--color-primary, #0097dc);
  --c-ink: var(--color-text, #333);
  --c-soft: var(--color-gray-light, #f6f6f6);
  --c-line: #e5e5e5;
  --c-muted: #666;
}

/* 装飾用インラインSVGは全廃（トンマナ方針） */
.content-article svg { display: none; }

/* 小さな共通ラベル・チップ */
.content-article .series-eyebrow,
.content-article .part-kicker,
.content-article .talk-prologue__label,
.content-article .community-overview__label,
.content-article .section-label,
.content-article .ey,
.content-article .kplbl,
.content-article .recap-label {
  display: inline-block;
  color: var(--c-primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
}

/* =========================================================
   1. ヒーロー（連載名 + タイトル + アイキャッチ + 話者ガイド）
========================================================= */
.content-article .series-hero { margin-bottom: 44px; }
.content-article .series-eyebrow { margin: 0 0 12px; }
.content-article .title-main { margin: 0 0 6px; color: var(--c-muted); font-size: 15px; font-weight: 700; letter-spacing: .06em; }
/* .article-title(h1) は article.css のトンマナ見出しを使用 */

.content-article .hero-media { margin: 0 0 22px; }
.content-article .hero-photo { margin: 0; }
/* ヒーロー写真の下余白を除去し、説明キャプションを写真に近接させる */
.content-article .hero-photo .article-image { margin-bottom: 0; }
.content-article .hero-speaker-guide {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px;
  margin-top: 10px; padding: 0 2px;
  font-size: 13px; color: #555;
}
.content-article .hero-speaker { display: flex; align-items: baseline; gap: 8px; }
.content-article .hero-speaker__position { color: var(--c-primary); font-weight: 700; font-size: 12px; }
.content-article .hero-speaker__details { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.content-article .hero-speaker__specialty {
  display: inline-block; padding: 2px 8px;
  background: var(--c-soft); border: 1px solid var(--c-line);
  font-size: 11px; color: #555; letter-spacing: .04em;
}

/* =========================================================
   2. 連載マップ（第1〜3回ナビ）
========================================================= */
.content-article .article-map {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin: 30px 0 8px; padding: 0;
}
.content-article .article-map__item {
  display: block; padding: 16px 16px 18px; text-decoration: none;
  background: #fff; border: 1px solid var(--c-line);
  border-top: 3px solid var(--c-primary);
  color: var(--c-ink); transition: background .2s ease;
}
.content-article .article-map__item:hover { background: var(--c-soft); }
.content-article .article-map__item > span {
  display: block; color: var(--c-primary); font-weight: 700; font-size: 14px; margin-bottom: 6px;
}
.content-article .article-map__item p { margin: 0; font-size: 13px; line-height: 1.6; }

/* =========================================================
   3. プロローグ（導入 aside）
========================================================= */
.content-article .talk-prologue {
  margin: 30px 0; padding: 22px 24px;
  background: var(--c-soft); border-left: 4px solid var(--c-primary);
}
.content-article .talk-prologue__label { margin: 0 0 8px; }
.content-article .talk-prologue h2,
.content-article .talk-prologue h3 { margin: 0 0 10px; }
.content-article .talk-prologue p { margin: 0; }

/* =========================================================
   4. 話し手プロフィール
========================================================= */
.content-article .speaker-profiles { margin: 50px 0; }
.content-article .section-label { margin-right: 10px; }
.content-article .speaker-profile {
  display: flex; gap: 20px; align-items: flex-start;
  padding: 22px 0; border-bottom: 1px solid var(--c-line);
}
.content-article .speaker-profile img {
  flex-shrink: 0; width: 96px; height: 96px;
  border-radius: 50%; object-fit: cover; background: var(--c-soft);
}
/* 末尾JSが ichikawa アバターを span でラップするため、ラッパーもflex子として整える */
.content-article .ichikawa-avatar-frame { flex-shrink: 0; display: inline-flex; line-height: 0; }
.content-article .speaker-profile h3 { margin: 0 0 6px; padding: 0; font-size: 18px; }
.content-article .speaker-profile h3::before { display: none; } /* article.css の青チップ装飾を無効化 */
.content-article .speaker-specialty {
  display: inline-block; margin-left: 8px; padding: 2px 8px;
  background: var(--c-soft); border: 1px solid var(--c-line);
  font-size: 11px; font-weight: 400; color: #555; vertical-align: middle;
}
.content-article .speaker-role { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--c-primary); }
.content-article .speaker-bio { margin: 0; font-size: 14px; line-height: 1.8; color: #555; }

/* =========================================================
   5. パート見出しブロック
========================================================= */
.content-article .article-part { margin-top: 56px; }
.content-article .part-kicker { margin: 0 0 10px; }
.content-article .part-number { color: var(--c-primary); font-weight: 700; margin-right: 12px; }
.content-article .part-lead { font-size: 17px; line-height: 1.9; color: #444; margin: 0 0 22px; }

/* =========================================================
   6. コールアウト（共通シェル + 4パターン）
   key / key-point … キーポイント
   cmp(vs/sw/duo) … 比較
   steps … ステップ
   three / layers / eq … ラベル付きリスト
========================================================= */
.content-article .article-callout {
  margin: 28px 0; padding: 24px 26px;
  background: #fff; border: 1px solid var(--c-line); border-left: 4px solid var(--c-primary);
  border-radius: 4px;
}
.content-article .article-callout > h3 { margin-top: 0; }
.content-article .article-callout .ey,
.content-article .article-callout .kplbl { margin: 0 0 8px; }
.content-article .article-callout .callout-intro,
.content-article .article-callout .eqlead { margin: 0 0 16px; font-size: 15px; color: #444; }
.content-article .article-callout .foot {
  margin: 16px 0 0; padding-top: 12px; border-top: 1px dashed var(--c-line);
  font-size: 13px; color: var(--c-muted);
}

/* 共通: 番号バッジ */
.content-article .tnum,
.content-article .step .num,
.content-article .eqn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex-shrink: 0;
  background: var(--c-primary); color: #fff;
  border-radius: 50%; font-size: 13px; font-weight: 700;
}

/* 共通: ラベル(lb) */
.content-article .lb { display: block; margin-bottom: 8px; color: var(--c-primary); font-weight: 700; font-size: 14px; }

/* 6-1. 比較（cmp: vs / sw / duo） */
.content-article .cols { display: flex; gap: 16px; align-items: stretch; position: relative; }
.content-article .cols .cmp-col { flex: 1; padding: 16px; background: var(--c-soft); border: 1px solid var(--c-line); }
/* DOM上は先頭にある VS バッジを、order で2カラムの「間」に配置（左=1, VS=2, 右=3） */
.content-article .cols .cmp-col--a { order: 1; }
.content-article .cols .cbadge { order: 2; }
.content-article .cols .cmp-col--b { order: 3; }
.content-article .cols .cmp-col ul { margin: 0; padding: 0; list-style: none; }
.content-article .cols .cmp-col li { position: relative; padding-left: 16px; margin: 0 0 6px; font-size: 14px; line-height: 1.6; }
.content-article .cols .cmp-col li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; background: var(--c-primary); border-radius: 50%; }
.content-article .cbadge {
  align-self: center; flex-shrink: 0;
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-ink); color: #fff; border-radius: 50%; font-size: 12px; font-weight: 700;
}

/* 6-2. ステップ（steps） */
.content-article .steps .step { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.content-article .steps .step p { margin: 0; font-size: 15px; }

/* 6-3. ラベル付きリスト（three: 番号 + ラベル + 説明） */
.content-article .items { margin: 0; padding: 0; list-style: none; }
.content-article .items > li { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; }
.content-article .items > li::before { display: none; } /* article.css の青ドット bullet を無効化（番号バッジと重なるため） */
.content-article .items .ttx { display: flex; flex-direction: column; }
.content-article .items .ttx b { font-size: 15px; }
.content-article .items .ttx span { font-size: 13px; color: var(--c-muted); }

/* 6-4. レイヤー（layers: 2層チップ） */
.content-article .layers .layer { padding: 14px 16px; background: var(--c-soft); border: 1px solid var(--c-line); }
.content-article .layers .laybadge { display: block; text-align: center; margin: 8px 0; color: var(--c-ink); font-weight: 700; }
.content-article .lchips { display: flex; flex-wrap: wrap; gap: 8px; }
.content-article .laychip { padding: 4px 12px; background: #fff; border: 1px solid var(--c-line); font-size: 13px; color: var(--c-ink); }

/* 6-5. 要素→結論（eq） */
.content-article .eqrow { display: flex; flex-wrap: wrap; gap: 12px; }
.content-article .eqv { flex: 1 1 150px; display: flex; align-items: flex-start; gap: 10px; padding: 12px; background: var(--c-soft); border: 1px solid var(--c-line); }
.content-article .evl { display: flex; flex-direction: column; font-weight: 700; font-size: 14px; }
.content-article .evl span { font-weight: 400; font-size: 12px; color: var(--c-muted); }
.content-article .eqeq { text-align: center; margin: 12px 0; color: var(--c-primary); font-size: 20px; font-weight: 700; }
.content-article .result { padding: 14px 18px; background: rgba(0,151,220,.08); border: 1px solid var(--c-primary); color: var(--c-ink); font-weight: 700; text-align: center; }

/* =========================================================
   7. コミュニティ一覧
========================================================= */
.content-article .community-overview { margin: 26px 0; padding: 20px 22px; background: var(--c-soft); border: 1px solid var(--c-line); }
.content-article .community-overview__label { margin: 0 0 10px; }
.content-article .community-overview ul { margin: 0; padding: 0; list-style: none; }
.content-article .community-overview li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--c-line); font-size: 14px; }
.content-article .community-overview li::before { display: none; } /* article.css の青ドット bullet を無効化（flex項目に重なるため） */
.content-article .community-overview li:last-child { border-bottom: 0; }
.content-article .community-overview li span + span { flex-shrink: 0; color: var(--c-primary); font-weight: 700; }

/* =========================================================
   8. 要点まとめ（recap）
========================================================= */
.content-article .recap-box { margin: 40px 0; padding: 26px 28px; background: var(--c-soft); border: 1px solid var(--c-line); border-radius: 4px; }
.content-article .recap-box > h3 { margin-top: 0; }
.content-article .recap-label { margin-right: 10px; }
.content-article .recap-comment { display: flex; gap: 14px; align-items: flex-start; margin-top: 16px; }
.content-article .recap-comment img { flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: #fff; }
.content-article .recap-comment p { margin: 0; font-size: 14px; line-height: 1.8; }
.content-article .recap-comment p > span:first-child { display: block; margin-bottom: 4px; color: var(--c-primary); font-weight: 700; }

/* =========================================================
   9. CTA
========================================================= */
.content-article .series-cta { margin: 48px 0; padding: 28px 30px; background: var(--c-soft); border-left: 4px solid var(--c-primary); border-radius: 4px; }
.content-article .series-cta h3 { margin-top: 0; }
.content-article .series-cta p { margin: 0; }

/* =========================================================
   10. 免責事項
========================================================= */
.content-article .article-disclaimer { margin: 44px 0 0; padding-top: 22px; border-top: 1px solid var(--c-line); }
.content-article .article-disclaimer h3 { font-size: 16px; }
.content-article .article-disclaimer ul { margin: 0; padding: 0; list-style: none; }
.content-article .article-disclaimer li { position: relative; padding-left: 16px; margin-bottom: 8px; font-size: 12.5px; line-height: 1.7; color: var(--c-muted); }
/* article.css の .content-article ul li::before（青丸: width/height/background/radius）が合成されるため打ち消す */
.content-article .article-disclaimer li::before { content: "・"; position: absolute; left: 0; top: 0; width: auto; height: auto; background: none; border-radius: 0; color: var(--c-muted); }

/* =========================================================
   11. 脚注・用語（dfn / sup / 注記）
========================================================= */
.content-article .note-term { font-style: normal; border-bottom: 1px dotted var(--c-primary); cursor: help; }
.content-article .note-marker { color: var(--c-primary); font-size: .7em; font-weight: 700; }
.content-article .article-note { display: block; margin: 4px 0 10px; font-size: 12.5px; color: var(--c-muted); line-height: 1.7; }

/* =========================================================
   12. 段階公開用（NEW / 近日公開 / 次回更新予定）
========================================================= */
/* NEW バッジ：白地＋細い赤枠＋赤字（強調しすぎない） */
.content-article .badge-new {
  display: inline-block; margin-left: 8px; padding: 1px 8px;
  border: 1px solid #d8323f; border-radius: 999px;
  color: #d8323f; font-size: 10px; font-weight: 700; letter-spacing: .06em;
  line-height: 1.6; vertical-align: middle;
}
/* 連載マップ：未公開回（近日公開・非リンク） */
.content-article .article-map__item.is-soon {
  background: var(--c-soft); border-top-color: var(--c-line);
  color: var(--c-muted); cursor: default; pointer-events: none;
}
.content-article .article-map__item.is-soon > span { color: var(--c-muted); }
.content-article .badge-soon {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  border: 1px solid var(--c-line); border-radius: 999px;
  color: var(--c-muted); font-size: 10px; font-weight: 700; line-height: 1.6; vertical-align: middle;
}
/* 次回更新予定 */
.content-article .series-next {
  margin: 14px 0 0; text-align: center;
  font-size: 13px; color: var(--c-muted);
}
.content-article .series-next strong { color: var(--c-ink); font-weight: 700; }

/* =========================================================
   13. レスポンシブ
========================================================= */
@media only screen and (max-width: 768px) {
  .content-article .article-map { grid-template-columns: 1fr; }
  .content-article .cols { flex-direction: column; }
  .content-article .cbadge { align-self: center; } /* 縦積み時は中央寄せ */
  .content-article .article-callout.duo .cbadge { transform: rotate(90deg); } /* 矢印(→)のみ下向き(↓)に */
  .content-article .eqv { flex: 1 1 100%; }
  .content-article .speaker-profile { gap: 14px; }
  .content-article .speaker-profile img { width: 72px; height: 72px; }
  .content-article .part-lead { font-size: 15px; }
}