/* ==========================================================================
   記事本文のタイポグラフィ（公開ページと管理画面のエディタで共用する唯一の定義）
   - 公開側: src/templates/layout.ts が <link rel="stylesheet" href="/content.css"> で読み込む
   - 管理画面: admin/src/main.tsx が取り込み、エディタ本文（.entry-content）に当てる
   ここを直せば、エディタで見える本文と公開ページの本文が同時に変わる。
   ※ 色の値は書かない。tokens.css の var(--color-*) を使う（DESIGN.md §2）。
   ========================================================================== */

/* 記事本文スタイル */
.entry-content {
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--color-text);
}

.entry-content h2 {
  position: relative;
  font-size: 1.4rem;
  line-height: 1.45;
  margin: 40px 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}

/* 見出し下線の左端だけ主要色でアクセントを付ける */
.entry-content h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 48px;
  height: 2px;
  background-color: var(--color-primary);
}

.entry-content h3 {
  font-size: 1.2rem;
  line-height: 1.5;
  margin: 32px 0 14px;
  color: var(--color-text);
}

.entry-content p {
  margin: 0 0 1.6em 0;
}

.entry-content ul, .entry-content ol {
  margin: 0 0 1.6em 0;
  padding-left: 24px;
}

.entry-content li {
  margin-bottom: 8px;
}

.entry-content blockquote {
  margin: 24px 0;
  padding: 16px 20px;
  border-left: 3px solid var(--color-primary);
  background-color: var(--color-surface-sunken);
  color: var(--color-text);
  font-style: italic;
  border-radius: 0 6px 6px 0;
}

.entry-content blockquote p:last-child {
  margin-bottom: 0;
}

/* 蛍光マーカー（アクセントの主な使いどころ） */
.entry-content mark {
  background: linear-gradient(transparent 60%, var(--color-accent-soft) 60%);
  color: inherit;
  padding: 0 1px;
}

.entry-content hr {
  border: 0;
  height: 1px;
  background-color: var(--color-border);
  margin: 36px 0;
}

.entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 20px 0;
  display: block;
}