/*
 * コラム記事（209本）を v2 の枠に収めるための橋渡し。記事ページでだけ読む。
 *
 * やっていることは2つだけ。
 *
 * ① v1 の common.css の変数を持ってくる
 *    column-detail.css は --navy / --cta-red / --g100〜--g900 / --en に依存している。
 *    common.css を丸ごと読むとヘッダー・フッターの指定まで v2 と衝突するので変数だけ写した。
 *    値は common.css の :root そのまま。1つだけ補っている:
 *      --g600 … column-detail.css が使っているが common.css に定義が無く、v1 の時点で
 *               効いていなかった。--g500 と --g700 の中間を入れる。
 *    --en（Poppins）と見出しの Noto Serif JP は functions.php が記事ページでだけ
 *    Google Fonts から読む（本番 v1 と同じ見た目にするため）。
 *
 * ② 本文を article-layout のグリッドに置く
 *    🚨 本文のラッパーに article.css の .article-body を付けてはいけない。
 *       column-detail.css が指定していないプロパティ（h2 の background、p の
 *       font-weight など）が article.css から漏れて、本番と見た目が変わる。
 *       実測: h2 の背景が transparent → var(--warm) になっていた（2026-10-05）。
 *       なので本文は .art-body .column-body だけにして、グリッド配置だけここで当てる。
 */

.art-body,
.column-single {
  --navy: #212C60;
  --navy-dark: #171F45;
  --navy-light: #2A3875;
  --navy-pale: #F0F2F8;
  --cta-red: #D94032;
  --cta-red-h: #C03028;
  --cta-green: #06C755;
  --cta-green-h: #05A847;
  --white: #FFF;
  --g50: #F8F9FA;
  --g100: #F0F1F3;
  --g200: #E2E4E8;
  --g300: #CED1D8;
  --g400: #9CA3AF;
  --g500: #6B7280;
  --g600: #4E5563;
  --g700: #374151;
  --g900: #1A1D2E;
  --font: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
  --en: 'Poppins', sans-serif;
  --max: 1120px;
  --py: 100px;
  --sh-s: none;
  --sh-m: none;
  --sh-l: none;
  --r-s: 0;
  --r-m: 0;
  --r-l: 0;
}

/* ② article.css の .article-body の代わり。レイアウトに要るものだけ */
.article-layout > .column-body {
  grid-area: body;
  min-width: 0;
  overflow-wrap: break-word;
}

/* v1 と同じく、リードと本文は別々の .art-body。.art-lead の余白は column-detail.css が持つ */
.column-body > .art-body + .art-body {
  margin-top: 0;
}

/* 追従ヘッダーが見出しを隠さないように（article.css が .article-body にしている分） */
.column-body :is(h2, h3, h4) {
  scroll-margin-top: calc(var(--site-header-height, 88px) + 20px);
}

/*
 * ③ v1 の wp-theme.css にあった .art-body の上書きを持ち越す
 *
 * 🚨 v1 では `.site-main .art-body …` と書かれていた。v2 の <main> には site-main が
 *    付いていないので、そのままでは1つも当たらない。本番と同じ見た目にするには要る。
 *    （実測で分かった: これが無いと表のヘッダーの行間が 24.5px → 28px にずれ、
 *      スマホで比較表の横スクロールが効かなくなる）
 *
 * 下は v1 の wp-theme.css からの写し。**!important と @media もそのまま**で、
 * このファイルを column-detail.css の「前」に読む順番も v1 と同じにしてある。
 *
 * 🚨 v1 の `.site-main .art-body` は「<main> の中の」という意味だけでなく、
 *    **詳細度を (0,2,0) に上げる役目**を持っていた。これで column-detail.css の
 *    `.art-body`(0,1,0) に後出しでも勝っている。実測で確かめた例:
 *      スマホの .art-body の overflow-x は、本番 auto（wp-theme が勝つ）。
 *      詳細度を落として写すと column-detail の hidden が勝って本番と変わる。
 *    なので site-main の代わりに .column-single（記事の <article>）を前に置いて (0,2,0) を保つ。
 *    !important の付いていない min-width:640px が、column-detail のスマホ用
 *    `min-width:0 !important` に負けるところまで本番と同じになる。
 *
 * v1 の .article-body 向けの指定は写していない。v2 の article.css が同じ名前の
 * クラスを別デザインで使っているため。v1 の .art-hero / .art-layout / .sb-pop も
 * v2 が別デザインで持つので写していない。
 */
.art-body th,
.art-body td {
  font-size: 14px !important;
  line-height: 1.75 !important;
}

@media (max-width: 768px) {
  .column-single .art-body {
    overflow-x: auto;
    font-size: 16px !important;
  }

  .column-single .art-body table {
    min-width: 640px;
  }

  .column-single .art-body p,
  .column-single .art-body li {
    font-size: 16px !important;
    line-height: 2 !important;
  }
}