/* ============================================================
   KABUKI single.css（ブログ詳細 single.php 専用）
   Figma: node 483:3557（PC）/ 486:4119（SP）
   色・フォント値は必ず tokens.css の var() を参照する。

   blog.css を @import し、ブログ一覧と共用のマスト（c-blog-masthead）・
   カード（p-blog__card*）・セクション見出し（p-blog__section-heading）を再利用する
   （inc/enqueue.php の仕組み上ページ別 CSS は1枚しか読み込まれないため、
   この2ファイルの分割構成では @import による共有が最小の重複で済む）。
   ============================================================ */

@import url("blog.css");

.p-single__inner {
  padding-block: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 768px) {
  .p-single__inner {
    padding-block: 48px;
    gap: 32px;
  }
}

/* ================================================
   記事ヘッダー（H1 + 日付/カテゴリ）
   Figma: Frame 602（H1 40px・bold）/ SP: H1 28px・bold
   ================================================ */
.p-single__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.p-single__title {
  font-size: var(--fs-28);
  font-weight: var(--fw-bold);
  line-height: var(--lh-jp);
  color: var(--color-black);
}

@media (min-width: 768px) {
  .p-single__title {
    font-size: var(--fs-40);
  }
}

.p-single__meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.p-single__date {
  font-family: var(--font-en);
  font-size: var(--fs-24); /* Figma実測 24px-Bold（node 483:3737、2026-07-29 QA。旧14pxから修正） */
  font-weight: var(--fw-bold); /* Figma実測 Bold（旧: 太字指定なし） */
  color: var(--color-black); /* Figma実測 黒文字（旧: gray-textから修正） */
}

.p-single__chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 15px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-black); /* Figma実測: 塗りなし・黒枠（旧: 塗りgrayから修正） */
  font-size: var(--fs-14); /* Figma実測 14px-Regular（旧12pxから修正） */
  font-weight: var(--fw-regular); /* 旧boldから修正 */
  color: var(--color-black);
}

/* ================================================
   アイキャッチ
   ================================================ */
.p-single__eyecatch {
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--color-gray);
}

.p-single__eyecatch-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.p-single__eyecatch--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-single__eyecatch-placeholder-image {
  width: 20%;
  height: auto;
  opacity: 0.25;
}

/* アイキャッチ直後の本文（H2より前）はセクション間の32px/48pxリズムより詰まった
   20px（Figma node 486:4012「Frame 562」実測、2026-07-29 QA）。.p-single__inner の
   flex gap は一律のため、隣接セレクタで desktop 分のみ差分(32-20=12px)を負マージンで相殺する。 */
@media (min-width: 768px) {
  .p-single__eyecatch + .p-single__entry-content {
    margin-top: -12px;
  }
}

/* ================================================
   本文（ブロックエディタ出力）
   Figma: 本文 / 18px・行間190%（PC）・14px・行間190%（SP）
   H2 32px・bold・行間160% / H3 22px・bold・行間160%
   ================================================ */
.p-single__entry-content {
  font-size: var(--fs-14);
  font-weight: var(--fw-medium); /* Figma実測: 本文はMedium（node 483:3746 他、2026-07-29 QA。旧: 指定なし=Regularだった） */
  line-height: var(--lh-body);
  color: var(--color-black);
}

@media (min-width: 768px) {
  .p-single__entry-content {
    font-size: var(--fs-18);
  }
}

.p-single__entry-content > * + * {
  margin-top: 24px;
}

.p-single__entry-content h2 {
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  line-height: var(--lh-jp);
  margin-top: 40px;
  scroll-margin-top: 24px;
}

@media (min-width: 768px) {
  .p-single__entry-content h2 {
    font-size: var(--fs-32);
  }
}

.p-single__entry-content h3 {
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
  line-height: var(--lh-jp);
  margin-top: 32px;
  scroll-margin-top: 24px;
}

@media (min-width: 768px) {
  .p-single__entry-content h3 {
    font-size: var(--fs-22);
  }
}

.p-single__entry-content p {
  margin: 0;
}

/* 段落どうしの間隔。
   上の `p { margin: 0 }` は詳細度 (0,1,1) で `> * + *`（margin-top:24px, 詳細度 (0,1,0)）に
   勝ってしまうため、段落間だけ間隔が 0 になり本文がベタ組みになっていた（2026-08-06 SOTA 指摘）。
   ここで詳細度 (0,1,2) で明示的に上書きする。
   値は日本語本文の可読性から 2.4em（PC 18px→43.2px / SP 14px→33.6px）。
   ※ 2026-08-06 に 1.6em で一度出したが「もう少し空けたい」（SOTA）で 1.5倍にした。
   セレクタを `* + p` に限っているのは、`p + *` まで含めると h2 の margin-top:40px を
   潰してしまうため（見出し前の余白は 40px / 32px のまま残す）。 */
.p-single__entry-content > * + p {
  margin-top: 2.4em;
}

/* 本文中のリンク。
   色指定が無く、地の文と同じ Jet Black・下線なしだったためリンクだと気づけなかった
   （2026-08-06 SOTA 指摘）。ブランドの赤 + 下線で明示する。 */
.p-single__entry-content a {
  color: var(--color-red);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.p-single__entry-content a:hover,
.p-single__entry-content a:focus-visible {
  text-decoration: none;
}

.p-single__entry-content ul,
.p-single__entry-content ol {
  display: flex;
  flex-direction: column;
  gap: 5px; /* Figma実測（node 483:3844 / 483:3872、2026-07-29 QA。旧12pxから修正） */
}

/* 箇条書き / マーカーは赤丸18px（Figma） */
.p-single__entry-content ul li {
  position: relative;
  padding-left: 25px;
}

.p-single__entry-content ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-red);
}

/* ez-toc プラグインの目次に対する打ち消し。
   ※ 2026-08-06 に ez-toc は「停止」し、テーマ目次（.p-single__toc）に一本化した。
      通常このセレクタは一致しない。誰かが再有効化したときに崩れないよう保険として残す。

   ez-toc の目次は .p-single__entry-content の中に出力されるので、本文用の ul / a
   スタイルがそのまま当たる。プラグイン側が li の padding-left を 0 に上書きするため、
   本文用の赤丸マーカー（left:0 の絶対配置）だけが残って目次テキストに重なっていた。
   目次リンクは黒のまま（本文リンクの赤 + 下線が当たると目次が煩雑になるため）。 */
.p-single__entry-content #ez-toc-container li::before {
  content: none;
}

.p-single__entry-content #ez-toc-container a {
  color: var(--color-black);
  text-decoration: none;
}

.p-single__entry-content #ez-toc-container a:hover,
.p-single__entry-content #ez-toc-container a:focus-visible {
  text-decoration: underline;
}

/* 番号付き箇条書き / 数字は黒太字18px（Figma） */
.p-single__entry-content ol {
  counter-reset: kabuki-ol;
}

.p-single__entry-content ol li {
  position: relative;
  padding-left: 27px;
}

.p-single__entry-content ol li::before {
  counter-increment: kabuki-ol;
  content: counter(kabuki-ol) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: var(--fw-bold);
  color: var(--color-black);
}

.p-single__entry-content figure {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.p-single__entry-content img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

/* ※キャプション / 14px・行間160%・#727272（Figma、tokens に無いため color-mix 由来） */
.p-single__entry-content figcaption {
  font-size: var(--fs-14);
  line-height: var(--lh-jp);
  color: var(--color-caption-gray);
}

.p-single__entry-content blockquote {
  border-left: 4px solid var(--color-red);
  padding-left: 20px;
  color: var(--color-black);
}

.p-single__entry-content pre {
  background-color: var(--color-black);
  color: var(--color-white);
  padding: 20px;
  border-radius: 8px;
  overflow-x: auto;
}

.p-single__entry-content code {
  font-family: monospace;
  font-size: var(--fs-14);
}

.p-single__entry-content pre code {
  color: inherit;
}

/* テーブル: 見出し行 黒背景・白文字太字16px / 本文行 白背景・黒文字16px・罫線1px・角丸5px（Figma） */
.p-single__entry-content table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--color-table-border);
  border-radius: 5px;
  overflow: hidden;
  font-size: var(--fs-14);
}

@media (min-width: 768px) {
  .p-single__entry-content table {
    font-size: var(--fs-16);
  }
}

.p-single__entry-content th,
.p-single__entry-content td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--color-table-border);
}

.p-single__entry-content thead th {
  background-color: var(--color-black);
  color: var(--color-white);
  font-weight: var(--fw-bold);
}

.p-single__entry-content tbody td {
  background-color: var(--color-white);
  color: var(--color-black);
  font-weight: var(--fw-medium);
}

.p-single__entry-content tbody tr:last-child th,
.p-single__entry-content tbody tr:last-child td {
  border-bottom: none;
}

/* ================================================
   もくじ（目次）
   Figma: Frame 149「目次」+ 番号付きリスト（H2 見出しへのアンカーリンク）
   ================================================ */
.p-single__toc {
  background-color: var(--color-bg-section); /* Figma実測 #F7FBF9（node 483:3832、2026-07-29 QA。旧: color-grayから修正） */
  border-radius: 5px; /* 旧8pxから修正 */
  padding: 30px 40px; /* Figma実測 縦30px・横40px（旧: 一律24pxから修正） */
}

/* SP では一段小さく。Figma 実測の 20px はメディアクエリ無しで SP にも当たっており、
   狭い画面で目次だけが本文（SP 14px）より大きく浮いて見えていた（2026-08-06 SOTA 指摘）。
   PC は従来どおり 20px。 */
.p-single__toc-heading {
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
  margin-bottom: 19px; /* Figma実測（旧16pxから修正） */
}

@media (min-width: 768px) {
  .p-single__toc-heading {
    font-size: var(--fs-20);
  }
}

.p-single__toc-list {
  display: flex;
  flex-direction: column;
  gap: 10px; /* Figma実測（旧16pxから修正） */
}

.p-single__toc-item {
  border-bottom: 1px solid var(--color-gray-light);
  padding-bottom: 10px; /* 旧16pxから修正 */
}

.p-single__toc-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.p-single__toc-link {
  display: flex;
  align-items: center;
  gap: 11px; /* 旧8pxから修正 */
}

/* 項目のマーカー。
   Figma は赤太字20pxの連番（1. 2. 3.）だったが、記事によって ez-toc プラグインの目次と
   二重に出て番号の体裁が揃わなかったため、番号をやめて本文の箇条書きと同じ赤ドットに統一した
   （2026-08-06 SOTA 指示）。旧 .p-single__toc-number は single.php ごと廃止。
   .p-single__toc-link は display:flex / gap:11px なので、::before は flex アイテムとして並ぶ。 */
.p-single__toc-link::before {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-red);
}

.p-single__toc-text {
  font-size: var(--fs-16); /* SP。PC は下記で 20px（2026-08-06 SOTA 指摘で SP のみ縮小） */
  font-weight: var(--fw-medium);
  color: var(--color-black);
}

@media (min-width: 768px) {
  .p-single__toc-text {
    font-size: var(--fs-20);
  }
}

/* ================================================
   シェアボタン
   Figma: Frame 549「Shere Article」（原文ママの誤字。ラベルは正しい表記 "Share Article" に修正して実装）
   ================================================ */
/* Figma（node 483:3921「Frame 549」、2026-07-29 QA、PC実測）: ラベル→区切り線→アイコン列の
   横一列（旧実装はラベルを上段・アイコン列を下段に積む縦積みだった）。SP側のFigma実測が無く、
   PC幅の横一列をそのままSPに適用すると5アイコン+ラベルが393px幅に収まらず横はみ出しの
   リスクがあるため、横並び化はdesktop（min-width:768px）のみに限定し、SPは既存の縦積みを維持する。
   区切り線は新規要素を増やさず、既存の p-single__share-list に border-left で表現する。 */
.p-single__share {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-block: 24px;
}

@media (min-width: 768px) {
  .p-single__share {
    flex-direction: row;
    gap: 25px; /* 旧16pxから修正 */
    justify-content: center;
  }
}

.p-single__share-label {
  font-family: var(--font-en);
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  color: var(--color-black);
}

.p-single__share-list {
  display: flex;
  align-items: center;
  gap: 10px; /* 旧12pxから修正 */
}

@media (min-width: 768px) {
  .p-single__share-list {
    margin-left: 25px;
    padding-left: 25px;
    border-left: 1px solid var(--color-black);
  }
}

.p-single__share-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px; /* Figma実測: 角丸10px（旧: 円形50%から修正） */
  border: 1px solid var(--color-black); /* 旧: color-grayから修正 */
  background-color: var(--color-white);
  color: var(--color-black);
}

.p-single__share-link svg {
  width: 20px; /* 旧18pxから修正（facebook/LINE/mail/copyの実測値） */
  height: 20px;
}

/* Xアイコンのみ実測16px（Figma node 483:3903） */
.p-single__share-item:first-child .p-single__share-link svg {
  width: 16px;
  height: 16px;
}

.p-single__share-link--copy.is-copied {
  border-color: var(--color-red);
  color: var(--color-red);
}

/* ================================================
   この記事を書いた人（著者ボックス）
   Figma: Group 149（アバター + 名前 + 経歴 + SNS + 最新の記事3件 + ボタン）
   ================================================ */
.p-single__author {
  padding-block: 32px;
}

@media (min-width: 768px) {
  .p-single__author {
    padding-block: 40px;
  }
}

/* 2026-07-30 目視QA: Figma実測（node 486:3944「最新の記事」x=300 = アバター左端と同じ、
   node 486:4657「名前/経歴/SNS」x=479 = アバター分インデント）では、「最新の記事」欄は
   アバター＋名前列の下に来る別要素で、アバターの左端に揃う全幅ブロック（名前/経歴列には
   インデントされない）。旧実装は「最新の記事」を名前/経歴と同じ縦積みカラムに内包しており、
   アバター分だけ余計にインデントされていた。box 自体を縦積みにし、
   「アバター＋名前列」を .p-single__author-top に分離して対応。 */
.p-single__author-box {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: var(--color-bg-section); /* Figma実測 #F7FBF9（node 483:3922、2026-07-29 QA。旧: color-grayから修正） */
  border-radius: 12px;
  padding: 24px;
}

@media (min-width: 768px) {
  .p-single__author-box {
    gap: 24px; /* Figma実測（旧20pxから修正） */
    padding: 30px; /* Figma実測 一律30px（旧40pxから修正） */
  }
}

.p-single__author-top {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 768px) {
  .p-single__author-top {
    flex-direction: row;
    gap: 24px;
  }
}

.p-single__author-avatar {
  flex-shrink: 0;
  width: 105px; /* Figma実測 SP（node 488:2741 内 Rectangle 98、2026-07-30 目視QA。旧96pxから修正） */
  height: 105px;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--color-gray-light);
}

@media (min-width: 768px) {
  .p-single__author-avatar {
    width: 155px; /* Figma実測（node 486:4258、2026-07-29 QA。旧96pxから修正） */
    height: 155px;
  }
}

.p-single__author-avatar-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-single__author-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.p-single__author-name {
  font-size: var(--fs-20); /* Figma実測 JP部分20px-Bold（node 483:3924、2026-07-29 QA。旧18pxから修正）。
     ローマ字併記部分（Sota Katakawa 14px-Medium）は表示名を分割するデータソースが
     無いため実装せず、要確認として報告する。 */
  font-weight: var(--fw-bold);
}

.p-single__author-bio {
  font-size: var(--fs-12); /* Figma実測 12px-Regular（node 483:3925、2026-07-29 QA。旧14pxから修正） */
  line-height: var(--lh-body);
  color: var(--color-black);
}

.p-single__author-sns {
  display: flex;
  align-items: center;
  gap: 20px; /* Figma実測（旧12pxから修正） */
}

.p-single__author-sns-label {
  font-family: var(--font-en);
  font-size: var(--fs-16); /* 旧14pxから修正 */
  font-weight: var(--fw-bold);
}

.p-single__author-sns-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--color-black);
  color: var(--color-white); /* Figma実測: 円内に白のXアイコン（node 486:4650「x 1」、2026-07-30 目視QA。旧: アイコンなしの無地の丸だった） */
}

.p-single__author-sns-link svg {
  width: 9px;
  height: 9px;
}

/* Figma（node 486:3944）には名前/経歴ブロックとの間に区切り線が無く、単なる余白。
   .p-single__author-top との間隔は親 .p-single__author-box の gap（20px/24px）で確保するため
   ここでの追加マージンは不要（旧: .p-single__author-body 内にネストされていた頃の
   margin-top:14pxハックは、box を縦積みに再構成した2026-07-30の修正で削除）。 */

.p-single__author-latest-heading {
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  margin-bottom: 10px; /* 旧12pxから修正 */
}

.p-single__author-latest-list {
  display: flex;
  flex-direction: column;
  gap: 10px; /* 旧12pxから修正 */
}

.p-single__author-latest-item {
  border-bottom: 1px solid var(--color-gray-light);
  padding-bottom: 10px; /* 旧12pxから修正 */
}

.p-single__author-latest-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.p-single__author-latest-link {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--fs-14);
  color: var(--color-black);
}

.p-single__author-latest-date {
  font-family: var(--font-en);
  color: var(--color-gray-text);
}

/* 著者ボックスの「もっと見る」CTA は SOTA 判断（2026-07-30）で削除。関連スタイルも撤去。 */

/* ================================================
   前の記事 / 次の記事
   Figma: Frame 558（前の記事 + 一覧に戻るボタン + 次の記事）
   ================================================ */
.p-single__post-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 32px;
}

.p-single__post-nav-item a {
  display: inline-flex;
  align-items: center;
  gap: 20px; /* Figma実測（node 486:3980、2026-07-29 QA。旧8pxから修正） */
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  color: var(--color-black);
}

.p-single__post-nav-item--next a {
  flex-direction: row-reverse;
}

.p-single__post-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 5px; /* Figma実測: 角丸5px（旧: 円形50%から修正） */
  border: 1px solid var(--color-gray);
  background-color: rgb(255 255 255 / 90%); /* Figma実測（旧: 塗りなしから修正） */
}

.p-single__post-nav-icon svg {
  width: 11px; /* Figma実測（旧12pxから修正） */
  height: 8px; /* 旧9pxから修正 */
}

.p-single__post-nav-icon--prev svg {
  transform: scaleX(-1);
}

.p-single__post-nav-list-button {
  order: 3;
  width: 100%;
  background-color: var(--color-black);
  color: var(--color-white);
  padding: 15px 30px; /* Figma実測（旧12px 24pxから修正） */
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
}

@media (min-width: 768px) {
  .p-single__post-nav-list-button {
    order: 2;
    width: auto;
  }

  .p-single__post-nav-item--prev {
    order: 1;
  }

  .p-single__post-nav-item--next {
    order: 3;
  }
}