/**
 * Ruribitaki Analytics ブログ記事 共通スタイル
 *
 * 用途: クラックスLP配下の blog/ ディレクトリ内の全記事 + blog/index.html で読み込む
 * 読み込み:
 *   - blog/index.html      → <link rel="stylesheet" href="blog.css">
 *   - blog/<slug>/index.html → <link rel="stylesheet" href="../blog.css">
 *
 * 変更ポイント:
 *   - 配色を変えたい: --blog-accent / --blog-strong を編集
 *   - H2 の太さ・余白: .blog-article-h2 を編集
 *
 * Tailwind CDN は別途読み込まれている前提。本ファイルでは
 * 各記事で繰り返し使う「ベース」と「H2」の見え方だけ統一管理する。
 */

:root {
  --blog-accent: #10b981;       /* emerald-500: H2下線・タイトルカード左ボーダー */
  --blog-strong: #1e3a8a;       /* blue-900: <strong> 太字の文字色 */
  --blog-body-bg: #ffffff;      /* 記事ページの背景 */
  --blog-text: #1f2937;         /* gray-800: 本文 */
  --blog-heading: #111827;      /* gray-900: 見出し */
}

/* ===== ベース ===== */
body.blog-article {
  background: var(--blog-body-bg);
  min-height: 100vh;
}

/* ===== H2 共通スタイル ===== */
/* タイトルカードの左ボーダー(emerald-500)と同色の下線で連載感を統一 */
.blog-article-h2 {
  font-size: 1.5rem;             /* 24px */
  font-weight: 700;
  color: var(--blog-heading);
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--blog-accent);
  letter-spacing: -0.005em;
}

@media (min-width: 768px) {
  .blog-article-h2 {
    font-size: 1.875rem;         /* 30px */
  }
}

/* ===== 本文(prose-content) 共通スタイル ===== */
/*
 * スマホで読みやすいよう本文サイズを 17px に上げる(PCは 18px)。
 * 親<div class="prose-content">に font-size を当てるので、<p>/<li>/<ol>に一括効く。
 * テーブル本文は <table> 内で text-sm md:text-base を個別指定しているため影響なし。
 */
.prose-content {
  font-size: 1.0625rem;          /* 17px - スマホ用 */
  color: var(--blog-text);
}

@media (min-width: 768px) {
  .prose-content {
    font-size: 1.125rem;         /* 18px - タブレット/PC用 */
  }
}

.prose-content p {
  margin-bottom: 1.25rem;
  line-height: 1.85;
}

.prose-content strong {
  color: var(--blog-strong);
  font-weight: 600;
}

/* ===== details/summary(FAQ等) の三角マーカーを消す ===== */
.blog-article details summary::-webkit-details-marker {
  display: none;
}
.blog-article details summary {
  list-style: none;
}