/* ==========================================================================
   c-entry-content — Figma: 記事コンテンツ（Heading/H2〜H6・List/OL・List/UL・Blockquote・
   Table/Standard・Table/Extended・本文段落）
   WP の投稿エディタで入力される領域。中の要素にはクラスを付けない（CLAUDE.md §9）ため、
   このファイルに限り .c-entry-content 配下の要素セレクタで当てる。
   文字スタイルは tokens.css の .t-* の値を写している（クラスを付けられないため）。
   PC: 本文 renewal/JP/16/Regular / SP: renewal/JP/14/Regular
   ========================================================================== */

.c-entry-content {
  color: var(--color-text-base);
  font-family: var(--font-jp);
  font-size: 1rem; /* renewal/JP/16/Regular（.t-jp-16-regular） */
  line-height: calc(28 / 16);
  letter-spacing: var(--letter-spacing-base);
  overflow-wrap: anywhere;
}

/* ---- ブロック間の余白（Figma: ブロック間 32px / 見出し → 本文 24px） ---- */
.c-entry-content > * + * {
  margin-top: var(--space-32);
}

.c-entry-content > h2 + *,
.c-entry-content > h3 + *,
.c-entry-content > h4 + *,
.c-entry-content > h5 + *,
.c-entry-content > h6 + * {
  margin-top: var(--space-24);
}

/* 段落が続く場合の間隔（Figma は 1 つのテキスト内の改行のため指定なし・実装判断） */
.c-entry-content > p + p {
  margin-top: var(--space-16);
}

/* ---- リンク（Figma: 色 purple/300・ホバーで下線） ---- */
.c-entry-content a {
  color: var(--color-text-brand);
  text-decoration: none;
}

.c-entry-content a:hover {
  text-decoration: underline;
}

.c-entry-content strong {
  font-weight: var(--font-weight-bold);
}

/* ---- 見出し（Heading/H2〜H6） ---- */
.c-entry-content h2,
.c-entry-content h3,
.c-entry-content h4,
.c-entry-content h5,
.c-entry-content h6 {
  color: var(--color-text-base);
  font-weight: var(--font-weight-bold);
}

.c-entry-content h2 {
  position: relative;
  padding-left: var(--space-24); /* バー 8px + 間隔 16px */
  font-size: 2rem; /* renewal/JP/32/Bold（.t-jp-32-bold） */
  line-height: calc(48 / 32);
}

.c-entry-content h2::before {
  content: "";
  position: absolute;
  top: 6px; /* (48 − 36) ÷ 2：1 行目の中央 */
  left: 0;
  width: var(--space-8);
  height: 36px; /* Figma 固有寸法: バーの高さ */
  background-color: var(--color-icon-brand);
}

.c-entry-content h3 {
  font-size: 1.75rem; /* renewal/JP/28/Bold（.t-jp-28-bold） */
  line-height: calc(42 / 28);
}

.c-entry-content h4 {
  font-size: 1.5rem; /* renewal/JP/24/Bold（.t-jp-24-bold） */
  line-height: calc(36 / 24);
}

.c-entry-content h5 {
  font-size: 1.25rem; /* renewal/JP/20/Bold（.t-jp-20-bold） */
  line-height: calc(32 / 20);
}

.c-entry-content h6 {
  font-size: 1.125rem; /* renewal/JP/18/Bold（.t-jp-18-bold） */
  line-height: calc(32 / 18);
}

/* ---- リスト（List/UL・List/OL） ---- */
.c-entry-content ul,
.c-entry-content ol {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: 0;
  list-style: none;
}

.c-entry-content li {
  position: relative;
}

.c-entry-content ul > li {
  padding-left: 14px; /* マーカー 6px + 間隔 8px */
}

.c-entry-content ul > li::before {
  content: "";
  position: absolute;
  top: 11px; /* (28 − 6) ÷ 2：1 行目の中央 */
  left: 0;
  width: 6px; /* Figma 固有寸法: マーカー */
  height: 6px;
  background-color: var(--color-bg-brand);
}

.c-entry-content ol {
  counter-reset: entry-ol;
}

/* 番号は絶対配置にする（li を flex にすると、WP の本文で li 内のリンク・強調・入れ子のリストが別々の列に分かれるため）。
   左の余白 1.5em =「1.」の幅（約 0.85em）+ 間隔（Figma: 8px 相当） */
.c-entry-content ol > li {
  padding-left: 1.5em;
  counter-increment: entry-ol;
}

.c-entry-content ol > li::before {
  content: counter(entry-ol) ".";
  position: absolute;
  top: 0;
  left: 0;
  color: var(--color-bg-brand); /* Figma: 番号は color/bg/brand */
  font-weight: var(--font-weight-bold);
}

.c-entry-content li > ul,
.c-entry-content li > ol {
  margin-top: var(--space-8);
}

/* ---- 引用（Blockquote）「引用」ラベルは固定表示 ---- */
.c-entry-content blockquote {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-32);
  background-color: var(--color-bg-brand-subtle);
  color: var(--color-text-base);
}

.c-entry-content blockquote::before {
  content: "引用";
  font-size: 1.125rem; /* renewal/JP/18/Bold（.t-jp-18-bold） */
  line-height: calc(32 / 18);
  font-weight: var(--font-weight-bold);
}

.c-entry-content blockquote > * + * {
  margin-top: 0;
}

.c-entry-content cite {
  color: var(--color-text-muted);
  font-size: 0.875rem; /* renewal/JP/14/Regular（.t-jp-14-regular） */
  line-height: calc(24 / 14);
  font-style: normal;
}

/* ---- 表（Table/Standard・Table/Extended）
   WP の表ブロックは <figure class="wp-block-table"><table> で出力されるため、figure を横スクロール枠にする ---- */
.c-entry-content figure {
  max-width: 100%;
  overflow-x: auto;
}

.c-entry-content table {
  width: 100%;
  border-collapse: collapse;
}

/* WP の表ブロックの既定（thead / tfoot の 3px の罫線）を消す */
.c-entry-content thead,
.c-entry-content tfoot {
  border: 0;
}

.c-entry-content th,
.c-entry-content td {
  padding: var(--space-16) var(--space-24);
  border: 1px solid var(--color-border-default);
  font-weight: var(--font-weight-regular);
  text-align: left;
  vertical-align: middle;
}

.c-entry-content th {
  background-color: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}

.c-entry-content td {
  background-color: var(--color-bg-base);
}

/* Table/Extended（行見出し）: th の幅 */
.c-entry-content tbody th {
  width: 28%; /* Figma: 200.75 / 720 */
}

/* ---- 区切り線（WP の区切りブロック。Figma に指定なし・実装判断: 罫線の色は border/default） ---- */
.c-entry-content hr {
  height: 0;
  margin-bottom: 0;
  border: 0;
  border-top: 1px solid var(--color-border-default);
}

/* ---- ボタン（WP のボタンブロック。見た目は c-button の size S に合わせる・実装判断） ---- */
.c-entry-content .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-24);
  border-radius: 0;
  background-color: var(--color-bg-brand);
  color: var(--color-text-inverse);
  font-size: 0.875rem; /* renewal/JP/Label/14/Bold（.t-jp-label-14-bold） */
  line-height: calc(20 / 14);
  font-weight: var(--font-weight-bold);
  transition: background-color 0.2s ease;
}

.c-entry-content .wp-block-button__link:hover,
.c-entry-content .wp-block-button__link:focus-visible {
  background-color: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  text-decoration: none;
}

/* ---- 画像・キャプション ---- */
.c-entry-content img {
  height: auto;
}

.c-entry-content figcaption {
  margin-top: var(--space-8);
  color: var(--color-text-muted);
  font-size: 0.75rem; /* renewal/JP/Caption/12/Regular（.t-jp-caption-12-regular） */
  line-height: 2;
}

/* ==========================================================================
   SP
   ========================================================================== */
@media (max-width: 1023px) {

  .c-entry-content {
    font-size: 0.875rem; /* SP: renewal/JP/14/Regular（.t-jp-14-regular） */
    line-height: calc(24 / 14);
  }

  .c-entry-content > * + * {
    margin-top: var(--space-24);
  }

  .c-entry-content h2 {
    font-size: 1.75rem; /* SP: renewal/JP/28/Bold（.t-jp-28-bold） */
    line-height: calc(42 / 28);
  }

  .c-entry-content h2::before {
    height: 30px; /* Figma 固有寸法: SP のバーの高さ（(42 − 30) ÷ 2 = 6px） */
  }

  .c-entry-content h3 {
    font-size: 1.5rem; /* SP: renewal/JP/24/Bold（.t-jp-24-bold） */
    line-height: calc(36 / 24);
  }

  .c-entry-content h4 {
    font-size: 1.25rem; /* SP: renewal/JP/20/Bold（.t-jp-20-bold） */
    line-height: calc(32 / 20);
  }

  .c-entry-content h5 {
    font-size: 1.125rem; /* SP: renewal/JP/18/Bold（.t-jp-18-bold） */
    line-height: calc(32 / 18);
  }

  .c-entry-content h6 {
    font-size: 1rem; /* SP: renewal/JP/16/Bold（.t-jp-16-bold） */
    line-height: calc(28 / 16);
  }

  .c-entry-content ul {
    gap: var(--space-4);
  }

  .c-entry-content ul > li {
    padding-left: 10px; /* マーカー 4px + 間隔 6px（Figma SP） */
  }

  .c-entry-content ul > li::before {
    top: 10px; /* (24 − 4) ÷ 2 */
    width: 4px; /* Figma 固有寸法: SP のマーカー */
    height: 4px;
  }

  .c-entry-content blockquote {
    gap: var(--space-4); /* Figma SP は 6px（トークン外のため 4px で代用・報告済み） */
    padding: var(--space-24);
    border: 1px solid var(--color-bg-subtle); /* Figma SP: gray/50 の枠線 */
  }

  .c-entry-content blockquote::before {
    font-size: 1rem; /* SP: renewal/JP/16/Bold（.t-jp-16-bold） */
    line-height: calc(28 / 16);
  }

  /* 表は横スクロール（Figma SP: 列幅 198px のまま 343px 枠でスクロール）。
     列は最小 198px（下の th / td）で、枠に収まらない列数のときだけスクロールする。セルの文章は折り返す。
     表ブロックの「固定幅のテーブルセル」（.wp-block-table .has-fixed-layout: table-layout: fixed; width: 100%）より
     強くして、設定に関係なく同じ表示にする */
  .c-entry-content table,
  .c-entry-content .wp-block-table table.has-fixed-layout {
    width: auto;
    min-width: 100%;
    table-layout: auto;
  }

  .c-entry-content th,
  .c-entry-content td {
    min-width: 198px; /* Figma 固有寸法: SP の列幅 */
    padding: var(--space-16);
  }

  .c-entry-content th {
    padding-inline: var(--space-24);
  }

  .c-entry-content tbody th {
    width: auto;
  }
}