/*
 * brain-surgery.jp 記事ページ紙面刷新 Phase 1.2 confirmプレビュー専用CSS
 * 2026-09-27先生FBに準拠（記事末CSSの適用先をbody.is-articleへ変更、
 * footer-spacer非表示、eyebrow折返し防止、postnav clamp、back-to-top調整、
 * details.changelog/toc、for-doctors h1コントラスト等を追加）
 *
 * このファイルは、functions.php の inoue_article_redesign_active() が
 * true のときだけenqueueされる（現状は独立確認ページが
 * add_filter('inoue_article_redesign_active', '__return_true') で
 * 明示的に有効化した場合のみ）。通常アクセス時は読み込まれず、本番の
 * 見た目に一切影響しない。
 *
 * すべてのセレクタを body.article-redesign-preview 配下に限定し、
 * production の同名クラス（.single-article-body 等）を確実に上書きする。
 * production 側は「.single-article」ではなく「.single-article-body」に
 * font-size/line-height を直接指定しているため（別要素＝特異性の勝負に
 * すらならない）、新しいCSSも同じ実際の要素（-body系）を狙う。
 */

:root {
  --bg: #F5F6F8; --surface: #FFFFFF; --ink: #1C2230; --muted: #5E6674; --faint: #687080;
  --hair: #D6DAE2; --hair2: #E7EAF0; --accent: #2A3670; --accent-ink: #22305F; --link: #2A3670; --quote: #3A4356;
  --s-shuki: #2B57B8; --s-or: #4B5563; --s-cross: #6D4FC2; --s-tool: #0B7A70; --s-guide: #B5541C;
  --sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  --head: "IBM Plex Sans JP", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --measure: 45em;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171E; --surface: #1A1E27; --ink: #DCDFE6; --muted: #A3AAB8; --faint: #7E8797;
    --hair: #2B3140; --hair2: #222836; --accent: #9FB4F0; --accent-ink: #B9C7F5; --link: #9FB4F0; --quote: #C5CBD8;
    --s-shuki: #8FAAF0; --s-or: #A9B1C0; --s-cross: #B39CF0; --s-tool: #5FC9BE; --s-guide: #E7A06E;
  }
}

/* ページ全体の背景・文字色（header/footerは本番同様の紺の不透明帯のため影響を受けない） */
body.article-redesign-preview {
  background: var(--bg);
  color: var(--ink);
}
body.article-redesign-preview .fixed-cta {
  display: none;
}
@media screen and (max-width: 768px) {
  body.article-redesign-preview {
    padding-bottom: 0;
  }
}
/* 先生FB §4：is-articleではfooter-spacerを出さない（不要な余白・dark modeの
   明るい帯・SPでfooter出現時のレイアウトジャンプの防止）。DOM自体は残るが
   レイアウトから確実に除外する。 */
body.is-article.article-redesign-preview .footer-spacer {
  display: none;
}
/* 先生FB §5：/dr-yamazaki/ 等で残る中身のない紺帯（page-header-simple）を解消。
   main{padding-top}は各breakpointで実際のヘッダー高さに既に追従済み
   （実測: 1440px→main padding-top 76px/header高さ68.8px、375px→58px/58px）
   のため、page-header-simple自体を消すだけで過不足のない余白になる。 */
body.is-article.article-redesign-preview .page-header-simple {
  display: none;
}
/* 重要な追加修正（初回スクリーンショット目視で発見）：
   production はSP幅で .header を transparent にし（style.css 1608行目）、
   その裏に .page-header 系の紺背景を負のmargin-topで回り込ませることで
   白いハンバーガー線に背景を与えている。page-header-simpleを消しただけでは
   その紺背景が無くなり、白線が明るいbody背景に沈んで見えなくなる。
   ヘッダー自体に紺背景を持たせることで、余分な帯を作らずに視認性を回復する。 */
@media screen and (max-width: 768px) {
  body.is-article.article-redesign-preview .header {
    background-color: var(--main-color, #313864);
  }
}

/* ==================== 記事・固定ページ共通の外枠を無効化 ====================
   production の .single-content/.single-inner（記事）・.page-content/.page-inner
   （固定ページ）は二重の余白構造を持つ。preview対象は .single-article 自身の
   max-width/paddingで組版するため、外側の枠は無効化する。 */
.article-redesign-preview .single-content,
.article-redesign-preview .single-inner {
  background: none;
  padding: 0;
  max-width: none;
  margin: 0;
}

/* ==================== 本文組版（仕様書§2） ====================
   production は .single-article-body 側に直接 font-size:1.6rem;line-height:2 を
   持つため（.single-article への指定では上書きできない）、同じ実要素を狙う。 */
.article-redesign-preview .single-article {
  background: none;
  padding: 0 18px;
  max-width: var(--measure);
  margin: 0 auto;
}
.article-redesign-preview .single-article-body,
.article-redesign-preview .page-body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.9;
  letter-spacing: .03em;
  text-align: left;
  color: var(--ink);
}
@media (min-width: 720px) {
  .article-redesign-preview .single-article-body,
  .article-redesign-preview .page-body { font-size: 17.5px; }
}
.article-redesign-preview .single-article-body p,
.article-redesign-preview .page-body p { margin: 0 0 1.45em; }
.article-redesign-preview .single-article-body h2,
.article-redesign-preview .page-body h2 {
  font-family: var(--head);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.5;
  margin: 2.4em 0 .9em;
  color: inherit;
  border-bottom: 0;
  padding-bottom: 0;
  text-wrap: balance;
}
.article-redesign-preview .single-article-body h2::before,
.article-redesign-preview .page-body h2::before {
  content: "";
  display: block;
  width: 2em;
  height: 1px;
  background: var(--hair);
  margin-bottom: .9em;
}
/* 先生FB §7：本文が最初から見出しで始まる場合、meta下のborderとh2の::before線が
   連続して二重線に見えるのを防ぐ（通常の見出しルール自体は変えない）。 */
.article-redesign-preview .single-article-body > h2:first-child,
.article-redesign-preview .page-body > h2:first-child {
  margin-top: 0;
}
.article-redesign-preview .single-article-body > h2:first-child::before,
.article-redesign-preview .page-body > h2:first-child::before {
  display: none;
}
@media (min-width: 720px) {
  .article-redesign-preview .single-article-body h2,
  .article-redesign-preview .page-body h2 { font-size: 23px; }
}
.article-redesign-preview .single-article-body h3,
.article-redesign-preview .page-body h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.6;
  margin: 2em 0 .7em;
  color: var(--accent-ink);
  padding-left: 0;
  border-left: 0;
  text-wrap: balance;
}
/* 2026-09-29先生FB §4：本文中のh4はproduction style.cssの
   .single-article-body h4 / .page-body h4 が color:var(--main-color)
   （固定紺色 #313864）を指定しており、h2（color:inherit）・h3
   （color:var(--accent-ink)）と異なりdark modeに追従しない。
   light側の見た目・font-size/weight等は一切変更せず、dark modeの
   ときだけ明るい色を明示的に上書きする（非回帰：lightは無変更）。 */
@media (prefers-color-scheme: dark) {
  .article-redesign-preview .single-article-body h4,
  .article-redesign-preview .page-body h4 {
    color: var(--ink);
  }
}
.article-redesign-preview .single-article-body strong,
.article-redesign-preview .page-body strong {
  font-weight: 600;
  color: var(--accent-ink);
}
.article-redesign-preview .single-article-body a,
.article-redesign-preview .page-body a {
  color: var(--link);
  word-break: normal;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: var(--link);
  text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent);
}
.article-redesign-preview .single-article-body blockquote,
.article-redesign-preview .page-body blockquote {
  margin: 1.8em 0;
  padding: .2em 0 .2em 1.1em;
  /* 先生FB §7：var(--hair)は背景とのcontrastが約1.3:1しかなく非text境界として
     視認しにくかったため、var(--faint)へ変更（背景比で約4.60:1 light /
     4.95:1 dark、WCAG非テキストコントラストの目安3:1を確保。計算式はWCAG相対輝度）。 */
  border-left: 2px solid var(--faint);
  color: var(--quote);
  font-size: inherit;
  line-height: 1.85;
}
.article-redesign-preview .single-article-body ul,
.article-redesign-preview .single-article-body ol,
.article-redesign-preview .page-body ul,
.article-redesign-preview .page-body ol {
  padding-left: 1.2em;
  margin: 0 0 1.45em;
}
.article-redesign-preview .single-article-body img,
.article-redesign-preview .page-body img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}
.article-redesign-preview .single-article-body table,
.article-redesign-preview .page-body table {
  display: block;
  overflow-x: auto;
}
/* 2026-09-29先生FB §G：実際に横スクロールが必要な表だけに出す案内。
   表示・非表示の判定はjs/article-redesign-table-hint-20260929.jsが
   table.scrollWidth > table.clientWidthで行う（既定はhidden属性で非表示）。 */
.article-redesign-preview .table-scroll-hint {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--muted);
  margin: -1em 0 1.45em;
}
.article-redesign-preview .table-scroll-hint[hidden] {
  display: none;
}
/* 2026-09-29先生FB §2：p.leadがZen Kaku Gothic Newで表示されていた。
   本文中版（このルール）はfont-family継承元の.single-article-body自体が
   var(--sans)を持つが、previewでは本文の外（下のルール）で出力される
   ケースがあり、そちらは.single-articleに font-family指定が無く
   bodyのZen Kakuを継承していた。両方に明示指定して確実に揃える。 */
.article-redesign-preview .single-article-body p.lead {
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--muted);
  margin: 0 0 16px;
  text-wrap: pretty;
}
/* preview分岐ではp.leadを本文の外（eyebrowの直後）で出力するため、
   万一本文中に残っていても二重表示にならないよう非表示にしておく */
.article-redesign-preview .single-article > p.lead {
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--muted);
  margin: 0 0 16px;
  text-wrap: pretty;
}

/* ==================== 記事の入口（仕様書§3） ==================== */
/* 2026-09-29先生FB §E：連載名を含む表示パンくず（新規、HTMLはfunctions.php
   inoue_article_redesign_breadcrumb()）。SEO構造化データ（BreadcrumbList）
   はYoast側の別generator由来のためこのCSS追加とは無関係。 */
.article-redesign-preview .article-breadcrumb {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--faint);
  margin: 0 0 10px;
}
.article-redesign-preview .article-breadcrumb a {
  color: var(--faint);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--faint) 45%, transparent);
}
.article-redesign-preview .eyebrow {
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 34px 0 14px;
}
/* 先生FB §6：幅440px以下で各語句内部が折り返されないようにする。
   .bar/b/span/aをflex-shrink:0にしてすべてnowrapで自然幅を保ち、
   1行に入りきらない場合は「第1回から読む」（a）全体だけを次の行へ送る
   （親のflex-wrapが吸収する。margin-left:autoにより行頭に戻らない）。 */
.article-redesign-preview .eyebrow .bar {
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background: var(--s-shuki);
  flex-shrink: 0;
}
.article-redesign-preview .eyebrow b { font-weight: 500; color: var(--s-shuki); white-space: nowrap; flex-shrink: 0; }
.article-redesign-preview .eyebrow span { white-space: nowrap; flex-shrink: 0; }
/* 2026-09-29先生FB §D：「第1回から読む」の押下高が約22.5pxしかなかった。
   擬似要素ではなくanchor自身のgetBoundingClientRect().heightを44px以上に
   する。実測の結果、display（inline）はそのままにpadding-top/bottomだけを
   足す方式が、flex行の他要素（.bar/b/span）やmargin-left:autoと衝突せず、
   見た目のボタン化（border/背景）も生じないことを確認済み。 */
.article-redesign-preview .eyebrow a { margin-left: auto; white-space: nowrap; flex-shrink: 0; padding-top: 12px; padding-bottom: 12px; }
.article-redesign-preview .eyebrow-or .bar { background: var(--s-or); }
.article-redesign-preview .eyebrow-or b { color: var(--s-or); }
.article-redesign-preview .eyebrow-tool .bar { background: var(--s-tool); }
.article-redesign-preview .eyebrow-tool b { color: var(--s-tool); }
.article-redesign-preview .eyebrow-cross .bar { background: var(--s-cross); }
.article-redesign-preview .eyebrow-cross b { color: var(--s-cross); }
.article-redesign-preview .eyebrow-guide .bar { background: var(--s-guide); }
.article-redesign-preview .eyebrow-guide b { color: var(--s-guide); }

/* 先生FB §14：バレh1（body直下の全h1）ではなく、記事本文のh1（.single-article h1）
   だけに限定する。以前は裸のh1セレクタが .page-header-title（紺帯上の白文字
   タイトル、for-doctors等）まで巻き込み、色をvar(--ink)（濃色）へ上書きして
   紺地に低contrastを起こしていた。 */
.article-redesign-preview .single-article h1 {
  font-family: var(--head);
  font-weight: 600;
  font-size: 25px;
  line-height: 1.45;
  letter-spacing: .01em;
  margin: 0 0 12px;
  color: var(--ink);
  text-wrap: balance;
  /* 2026-09-29先生FB §B：記事タイトルにword-break:auto-phraseを追加。
     .u-nowrap-word（page.php／for-doctors等の固定ページタイトル専用の
     語中改行防止span）は記事h1（single.php 194行目の<h1><?php the_title();?></h1>）
     には使われていないため競合しない。 */
  word-break: auto-phrase;
}
@media (min-width: 720px) {
  .article-redesign-preview .single-article h1 { font-size: 32px; line-height: 1.4; }
}
/* 先生FB §14：/for-doctors/等のpage-header-title（紺帯上のタイトル）は
   production標準の白文字のまま維持する（上のh1ルールが波及しないよう
   スコープを分離済み）。日本語の語中改行（「ご／紹介」等）だけを防ぐ。
   ChatGPT FIX §3：word-break:auto-phraseはSafariで効果が無いため保険として
   残しつつ、実効性のある対策として「ご紹介」「ご相談」だけをpage.php側で
   nowrap spanに包む（.u-nowrap-word）。h1全体はnowrapにしない
   （横overflowを避けるため、他の語は通常どおり折り返し可）。 */
/* 2026-09-29先生確認後 最終残件（共通UI担当分・実サーバーで先行反映済みの
   変更をこのbranchへ取り込み）：/for-doctors/固定ページ題名のfont-familyを
   var(--head)へ。現状このrule（.article-redesign-preview .page-header-title）
   に実際に一致する要素はfor-doctors確認ページ（2968）のみ（他4本の記事
   confirmページはpage-header-title自体を持たず、privacy/patients-category
   previewはinoue_article_redesign_active()を有効化しないため対象外）。
   下のbody.page-id-1909 / page-templateスコープの個別ruleは、本番gate解放後の
   保険として維持する（二重指定だが値は同一のため非競合）。 */
.article-redesign-preview .page-header-title {
  word-break: auto-phrase;
  font-family: var(--head);
}
.article-redesign-preview .page-header-title .u-nowrap-word {
  white-space: nowrap;
}
/* 2026-09-29先生FB §2：/for-doctors/のページタイトルだけをvar(--head)へ。
   .article-redesign-preview .page-header-title はis-article対象の固定
   ページ5本すべてに共通のscopeのため、ここで広げると他の固定ページの
   タイトルまで意図せず変わる。確認ページ専用のpage-templateボディ
   クラスに加え、本番/for-doctors/（page ID 1909、_wp_page_template未設定＝
   page-template-default）用にbody.page-id-1909も追加する（実HTML確認済み：
   本番は<body class="... page-template-default page page-id-1909 ...">）。
   本番は現状inoue_article_redesign_active()が常にfalseのため、この
   CSSファイル自体まだ読み込まれない（意図的にdark launch）。本番展開が
   ゲート解放された時点で、選定済みのこのselectorがそのまま効く。 */
body.page-template-page-preview-fordoctors-20260927-php .page-header-title,
body.page-id-1909 .page-header-title {
  font-family: var(--head);
}

.article-redesign-preview .meta {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--faint);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 12px 0 22px;
  border-bottom: 1px solid var(--hair);
  margin-bottom: 26px;
  font-variant-numeric: tabular-nums;
}
/* 2026-09-29先生FB §2（追加調査）：DOM walkで.note-top（本文中の免責注記、
   display:blockで実際に表示される）がZen Kaku Gothic Newのまま残存して
   いることを確認したため、ここにもvar(--sans)を追加する。 */
.article-redesign-preview .note-top {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--muted);
  margin: -14px 0 22px;
}

/* ==================== 記事末4ブロック＋前後ナビ（仕様書§4） ====================
   先生FB 2026-09-27 §3：前回FINAL FIXのbody.single-post限定を撤回し、
   body.is-article（全post ＋ 対象固定ページ5本、functions.phpのbody_class
   フィルタが付与）へ適用する。他の固定ページには is-article が付かないため
   一切当たらない。
   実際のpost_contentでは .n/.r/.l のような補助classは使われておらず
   （img＋h4＋pの素朴な構造）、CTAは cta-block（quiet/panel等の修飾classは
   実データに存在しない）として現れる。.n/.r/.l・cta-quiet・cta-panelは
   指示どおりセレクタとして残すが、実データには現状当たらない（将来の
   互換のため）。実際に効くのは img/h4/p側の汎用ルール。 */
body.is-article.article-redesign-preview .series-info,
body.is-article.article-redesign-preview .author-block,
body.is-article.article-redesign-preview .cta-block,
body.is-article.article-redesign-preview .cta-panel,
body.is-article.article-redesign-preview .article-disclaimer {
  font-family: var(--sans);
}
body.is-article.article-redesign-preview .series-info {
  display: block;
  padding: 13px 0;
  margin-top: 44px;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair2);
  font-size: 14.5px;
  color: var(--muted);
}
body.is-article.article-redesign-preview .series-info .t { color: var(--ink); font-weight: 500; }
body.is-article.article-redesign-preview .series-info h3 {
  font-family: var(--head);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  margin: 0 0 .4em;
}
body.is-article.article-redesign-preview .series-info p { margin: 0 0 .6em; }
/* 2026-09-29先生FB §D：記事末リンクの押下高が約20〜21pxしかなかった。
   下のcta-block非contactリンクと同じ理由で、display変更・擬似要素なしの
   padding-top/bottomのみで44px化する（見た目のボタン化はしない）。 */
body.is-article.article-redesign-preview .series-info a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent);
  margin-right: 14px;
  padding-top: 12px;
  padding-bottom: 12px;
}
body.is-article.article-redesign-preview .author-block {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid var(--hair2);
}
/* 著者写真：post_content内の実マークアップには
   (a) <div style="flex-shrink:0;"><img ...></div>（wrapper div経由）
   (b) <img ...>（wrapperなし、.author-block直下）
   の2パターンが実在する。inoue_article_redesign_pull_block()が
   全てのinline styleを除去するため、wrapper divのflex-shrink:0が
   失われ、フレックス行内でwrapperだけが不均等に縮んで写真が
   つぶれて見えていた（先生FB 2026-09-27）。
   ラッパー側でサイズを固定し、imgはobject-fit:coverでトリミング表示する
   （引き伸ばしではなく、縦横比を保ったままクロップして収める）。 */
body.is-article.article-redesign-preview .author-block > div:has(> img) {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 50%;
}
body.is-article.article-redesign-preview .author-block > div:has(> img) > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
  display: block;
}
body.is-article.article-redesign-preview .author-block > img {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
  display: block;
}
body.is-article.article-redesign-preview .author-block .n,
body.is-article.article-redesign-preview .author-block h4 { font-weight: 600; font-size: 15px; margin: 0 0 4px; color: var(--ink); }
body.is-article.article-redesign-preview .author-block .r,
body.is-article.article-redesign-preview .author-block p { font-size: 13.5px; color: var(--muted); margin: 0 0 6px; line-height: 1.6; }
body.is-article.article-redesign-preview .author-block .l { font-size: 13px; display: flex; gap: 12px; flex-wrap: wrap; margin: 0; }
body.is-article.article-redesign-preview .author-block p:last-child { margin-bottom: 0; }
body.is-article.article-redesign-preview .author-block a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent);
  padding-top: 12px;
  padding-bottom: 12px;
}
body.is-article.article-redesign-preview .cta-block,
body.is-article.article-redesign-preview .cta-quiet,
body.is-article.article-redesign-preview .cta-panel {
  padding: 14px 0;
  border-bottom: 1px solid var(--hair2);
  font-size: 14.5px;
  color: var(--muted);
}
body.is-article.article-redesign-preview .cta-block h3 {
  font-family: var(--head);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  margin: 0 0 .4em;
}
body.is-article.article-redesign-preview .cta-block p { margin: 0 0 .6em; }
body.is-article.article-redesign-preview .cta-block a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent);
}
/* 2026-09-29先生FB §D：/contact/以外のcta-block内リンク（文中の「こちら」等、
   地の文に埋め込まれた通常リンク）の押下高が約21pxしかなかった。この
   リンクは段落の途中にあるため、displayをinline-blockへ変える方式だと
   周囲の行間隔が広がってしまう。実測で確認した結果、display: inline の
   まま padding-top/bottom だけを足す方式なら、段落自身の高さ・行間は
   一切変わらず、anchor自身のgetBoundingClientRect().heightだけが44px以上
   になることを確認済み（見た目のボタン化もしない）。 */
body.is-article.article-redesign-preview .cta-block a:not([href*="/contact/"]) {
  padding-top: 12px;
  padding-bottom: 12px;
}
/* 2026-09-29先生FB §1：.cta-block内の/contact/リンクだけをボタン化する。
   post_content実データでは、このaタグにbackground/padding/no-underline等の
   inline styleが直接書かれているが、inoue_article_redesign_pull_block()が
   抽出時にstyle属性を一括除去するため（本番post_contentは無変更）、
   previewでは上の.cta-block a（下線付きテキストリンク）に落ちていた。
   .cta-block内の他リンク（例：/shiga-brain-second-opinion/）には
   一切影響しない、href限定の狭いselectorにする。 */
body.is-article.article-redesign-preview .cta-block a[href*="/contact/"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0 24px;
  margin-top: 4px;
  border: 1px solid var(--link);
  border-radius: 6px;
  color: var(--link);
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
body.is-article.article-redesign-preview .cta-block a[href*="/contact/"]:hover {
  background: var(--link);
  color: var(--surface);
}
body.is-article.article-redesign-preview .cta-block a[href*="/contact/"]:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}
body.is-article.article-redesign-preview .article-disclaimer {
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--faint);
  padding: 14px 0 0;
  background: none;
  border: 0;
}
body.is-article.article-redesign-preview .post-navigation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 22px;
  font-size: 13.5px;
  font-family: var(--sans);
}
/* 2026-09-29先生FB §2：「ブログ一覧に戻る」（.btn-back-list、production
   style.cssはfont-family未指定でbody既定のZen Kakuを継承）をvar(--sans)へ。 */
body.is-article.article-redesign-preview .btn-back-list {
  font-family: var(--sans);
}
body.is-article.article-redesign-preview .post-navigation a {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--hair);
  border-radius: 6px;
  text-decoration: none;
  color: var(--ink);
  background: var(--surface);
}
body.is-article.article-redesign-preview .post-navigation small {
  display: block;
  color: var(--faint);
  font-size: 11.5px;
  letter-spacing: .08em;
  margin-bottom: 4px;
}
/* 先生FB §8：タイトルは最大2行でline-clamp（.pv-titleでラップして適用） */
body.is-article.article-redesign-preview .post-navigation .pv-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.is-article.article-redesign-preview .post-navigation.is-half .pv-prev { grid-column: 1; }
body.is-article.article-redesign-preview .post-navigation.is-half .pv-next { grid-column: 2; }
/* 先生FB §8：幅480px以下は1カラム、PCは2カラムのまま */
@media (max-width: 480px) {
  body.is-article.article-redesign-preview .post-navigation {
    grid-template-columns: 1fr;
  }
  body.is-article.article-redesign-preview .post-navigation.is-half .pv-prev,
  body.is-article.article-redesign-preview .post-navigation.is-half .pv-next {
    grid-column: 1;
  }
}

/* ==================== 固定ページ「要点の箱」（仕様書§5） ==================== */
.article-redesign-preview .key-facts {
  border: 0;
  border-left: 2px solid var(--s-guide);
  background: none;
  padding: 2px 0 2px 14px;
  border-radius: 0;
  font-size: inherit;
  line-height: inherit;
  margin: 1.5em 0 2em;
}

/* ==================== トップへ戻るボタン（先生FB §9 / ChatGPT FIX §1・§2） ====================
   is-articleではfixed-ctaを表示しないため、SPのbottom:74px（fixed-ctaを
   避けるための本来production側のオフセット）は不要かつ本文と重なる原因になる。
   PCで紺footerに紺丸が重なると矢印だけ浮いて見える問題は、production側の
   既存JS（.footer監視でbody.fixed-cta-hiddenを付与する仕組み。footer.php/
   animations.js、is-article以外にも既に効いている）を再利用し、footerが
   視界に入っている間だけ背景・borderを切り替える（新規JSは追加しない）。

   ChatGPT FIX §1で実測：SPではposition:fixedのボタンが本文の実文字グリフと
   矩形交差する（375px時8文字・390px時6文字が重複、boundingClientRect実測）。
   DOM上のback-to-topは footer.php で </footer> の直後に置かれているため、
   SPだけ position:static にしてin-flow化すると、記事本文の間は画面外
   （非表示中はdisplay:noneでスペースも占有しない）、footer到達時のみ
   footer直後に現れる。is-visibleの付与条件（main.jsのscrollY>300）・
   fixed-cta-hidden監視は変更しない。PCはfixedのまま変更なし。 */
body.is-article.article-redesign-preview .back-to-top {
  bottom: 30px;
}
@media screen and (max-width: 768px) {
  body.is-article.article-redesign-preview .back-to-top {
    position: static;
    display: none;
    bottom: auto;
    right: auto;
    margin: 24px 18px 24px auto;
  }
  body.is-article.article-redesign-preview .back-to-top.is-visible {
    display: flex;
  }
}
body.is-article.article-redesign-preview.fixed-cta-hidden .back-to-top {
  background-color: var(--surface);
  border: 2px solid var(--main-color, #313864);
}
body.is-article.article-redesign-preview.fixed-cta-hidden .back-to-top-arrow {
  border-top-color: var(--ink);
  border-right-color: var(--ink);
}

/* ==================== details.changelog（先生FB §10） ====================
   CSS・開閉UIのみ。中身の更新履歴はここでは新規作成しない（先生側が本番日に
   本文へ追加する）。 */
.article-redesign-preview .single-article-body details.changelog,
.article-redesign-preview .page-body details.changelog {
  margin: 1.8em 0;
  padding: 0;
  border: 1px solid var(--hair);
  border-radius: 6px;
  background: var(--surface);
  font-size: 13.5px;
  color: var(--muted);
}
.article-redesign-preview .single-article-body details.changelog summary,
.article-redesign-preview .page-body details.changelog summary {
  cursor: pointer;
  padding: 10px 14px;
  font-weight: 500;
  color: var(--ink);
  list-style: none;
}
.article-redesign-preview .single-article-body details.changelog summary::-webkit-details-marker,
.article-redesign-preview .page-body details.changelog summary::-webkit-details-marker {
  display: none;
}
.article-redesign-preview .single-article-body details.changelog summary::before,
.article-redesign-preview .page-body details.changelog summary::before {
  content: "▶";
  display: inline-block;
  margin-right: 8px;
  font-size: 10px;
  color: var(--faint);
  transition: transform .15s ease;
}
.article-redesign-preview .single-article-body details.changelog[open] summary::before,
.article-redesign-preview .page-body details.changelog[open] summary::before {
  transform: rotate(90deg);
}
.article-redesign-preview .single-article-body details.changelog > *:not(summary),
.article-redesign-preview .page-body details.changelog > *:not(summary) {
  padding: 0 14px 14px;
}

/* ==================== details.toc（先生FB §11） ====================
   h2が4個以上のときだけfunctions.php側で生成される。JS不要（<details>の
   ネイティブ開閉のみ）。見た目はchangelogと共通トーンだが、目次のため
   ol/li/aを持つ。 */
.article-redesign-preview .single-article-body details.toc,
.article-redesign-preview .page-body details.toc {
  margin: 0 0 2em;
  padding: 0;
  border: 1px solid var(--hair);
  border-radius: 6px;
  background: var(--surface);
  font-size: 14px;
}
.article-redesign-preview .single-article-body details.toc summary,
.article-redesign-preview .page-body details.toc summary {
  cursor: pointer;
  padding: 10px 14px;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
}
.article-redesign-preview .single-article-body details.toc summary::-webkit-details-marker,
.article-redesign-preview .page-body details.toc summary::-webkit-details-marker {
  display: none;
}
.article-redesign-preview .single-article-body details.toc summary::before,
.article-redesign-preview .page-body details.toc summary::before {
  content: "▶";
  display: inline-block;
  margin-right: 8px;
  font-size: 10px;
  color: var(--faint);
  transition: transform .15s ease;
}
.article-redesign-preview .single-article-body details.toc[open] summary::before,
.article-redesign-preview .page-body details.toc[open] summary::before {
  transform: rotate(90deg);
}
.article-redesign-preview .single-article-body details.toc ol,
.article-redesign-preview .page-body details.toc ol {
  margin: 0;
  padding: 0 14px 14px 30px;
}
.article-redesign-preview .single-article-body details.toc li,
.article-redesign-preview .page-body details.toc li {
  margin: 0 0 .5em;
}
.article-redesign-preview .single-article-body details.toc a,
.article-redesign-preview .page-body details.toc a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent);
}