/* components/article.css — 記事本文スタイル（Figma: 本文段落 / 見出し / 注記ボックス / 本文内画像）
   投稿エディタから出力される要素にも効くよう、本文ラッパー配下の要素を対象にする。 */

.c-article-body { font-size: var(--font-size-body); line-height: var(--line-height-body); }

.c-article-body__meta {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--color-brown-sub);
  font-size: var(--font-size-h5);
  margin-bottom: var(--space-16);
}

/* 見出し（記事内）— H2は緑下線、H3は番号付き想定の罫線 */
.c-article-body h2 {
  font-size: var(--font-size-h2);
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: var(--space-8);
  margin: var(--space-48) 0 var(--space-24);
}
.c-article-body h3 {
  font-size: var(--font-size-h3);
  border-left: 4px solid var(--color-accent);
  padding-left: var(--space-16);
  margin: var(--space-32) 0 var(--space-16);
}

.c-article-body p { margin: 0; }

/* 本文内画像 */
.c-article-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/* 埋め込み（YouTube 等の iframe・動画）。
   エディタが width/height 属性を直書きする（例: <iframe width="380">）ため、
   そのままだと SP でコンテンツ幅を超えてはみ出す。幅は親に追従させ、
   16:9 で高さを比率算出してレスポンシブにする。 */
.c-article-body iframe,
.c-article-body video,
.c-article-body embed,
.c-article-body object {
  max-width: 100%;
}
.c-article-body iframe {
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
}

/* テーブル・整形済みテキストも本文幅で横スクロールに収め、はみ出しを防ぐ。 */
.c-article-body table { width: 100%; border-collapse: collapse; }
.c-article-body pre { max-width: 100%; overflow-x: auto; }

/* 長いURL等の途切れない文字列での横はみ出しを防ぐ。 */
.c-article-body { overflow-wrap: anywhere; }

/* 注記/ハイライトボックス（クラス付与で使用） */
.c-article-body .is-highlight,
.c-highlight-box {
  background: var(--color-bg-yellow);
  border-radius: var(--radius-md);
  padding: var(--space-24);
  margin: var(--space-24) 0;
}

/* リスト・引用 */
.c-article-body ul,
.c-article-body ol { padding-left: var(--space-24); margin: 0 0 var(--space-24); }
.c-article-body li { margin-bottom: var(--space-8); }
.c-article-body blockquote {
  margin: var(--space-24) 0;
  padding: var(--space-16) var(--space-24);
  border-left: 4px solid var(--color-gray);
  color: var(--color-brown-sub);
  background: var(--color-bg-light-yellow);
}