/* -----------------------------------------------------------------------------
 * 表の配色・レイアウト（SCSS 管理外・フロント／エディタ共用）
 * -----------------------------------------------------------------------------
 * css/style.css は scss/*.scss のコンパイル出力で、SCSSソースはこのリポジトリに
 * 含まれていない（制作会社側が保持）。あちらへ直接書くと再ビルドで消えるため、
 * 表に関する追記はこのファイルへ集約する。
 * このファイル1枚を functions.php から
 *   - フロント : wp_enqueue_style('takeuchi-table-color')
 *   - エディタ : add_editor_style('css/table-color.css')
 * の両方で読み込むので、編集画面と表示が必ず一致する。
 *
 * 何をしているか:
 *  1) css/style.css がハードコードしている表の値（赤 #D0121B・罫線 #eee・
 *     ラベル列幅 26rem・セル余白 .9em/1.2em）を、カスタムプロパティ経由の参照に
 *     差し替える（ブリッジ）。既定値は現行と同じなので、クラスを付けていない
 *     既存の表の見た目は 1px も変わらない。
 *  2) 図(figure)にクラスを付けるだけで切り替わる「配色バリアント」を定義する。
 *     バリアントは register_block_style() でブロックエディタの「スタイル」に
 *     出しているので、編集者はクラス名を覚えずサイドバーから選べる。
 *  3) 配色と直交する軸（縞・余白・ラベル列幅・モバイル挙動）を「ユーティリティ
 *     クラス」として定義する。こちらは「追加CSSクラス」欄に手入力して併用する。
 *
 * ■ なぜ 3) はブロックスタイルにしないのか
 *   ブロックスタイル（is-style-*）は単一選択で、「グレー＋縞＋コンパクト」のような
 *   組み合わせを選べない。直交する軸をブロックスタイルに混ぜると選択肢が掛け算で
 *   増えるうえ、どれか1つしか選べないという最悪の形になる。
 *   配色＝サイドバーの「スタイル」／それ以外＝「追加CSSクラス」で役割を分けている。
 *
 * ■ セレクタを二重に書いている理由（.wp-block-table.wp-block-table 等）
 *   css/style.css は c-head.php で wp_head() の「後」に読まれるため、こちらの
 *   ファイルは必ず先に読まれる。同じ詳細度だと後読みの css/style.css が勝つので、
 *   同一クラスを2回書いて詳細度を1つ上げ、確実に勝たせている。
 *   ページ構造に依存する .article_body 等の前置と違い、表がどこに置かれても効く。
 *   .tbl_scroll のように css/style.css の 0,2,1 の指定を覆す必要があるものだけ
 *   3回書いている（勝てる最小限に留める）。
 *
 * ■ 色は必ず「背景＋文字」をセットで決める
 *   バリアントを増やすときは背景色だけ変えず、その上に乗る文字色も併せて定義する。
 *   WCAG 2.1 AA（通常サイズ 4.5:1）を下回る組み合わせを増やさないこと。
 *   既定の #D0121B × #fff は約 5.5:1 で AA を満たしている。
 *
 * ■ カスタムプロパティ一覧（既定値は下の :root が単一の定義場所）
 *   --tbl-label-bg      : ラベル列／ヘッダ行の背景色
 *   --tbl-label-fg      : ラベル列／ヘッダ行の文字色
 *   --tbl-label-weight  : ラベル列／ヘッダ行の文字の太さ
 *   --tbl-label-width   : ラベル列の幅（768px 以上）
 *   --tbl-frame         : ラベル列／ヘッダ行の外枠の色（表の輪郭）
 *   --tbl-sep           : ラベル列／ヘッダ行の内部を区切る線の色（行と行の境）
 *   --tbl-cell-border   : データセルの格子罫線の色
 *   --tbl-cell-pad-y    : セルの上下余白
 *   --tbl-cell-pad-x    : セルの左右余白
 *   --tbl-cell-pad-x-sp : セルの左右余白（767px 以下）※パターン別に初期値が違う
 *   --tbl-zebra         : 偶数行の背景色（縞）
 *   --tbl-scroll-min    : .tbl_scroll 時の表の最小幅
 *
 * ■ クラス一覧
 *   配色（サイドバー「スタイル」／単一選択）
 *     is-style-tbl-red-deep / -red-soft / -red-pale / -gray / -dark
 *     素クラス alias: .tbl_red_deep / .tbl_red_soft / .tbl_red_pale /
 *                     .tbl_gray / .tbl_dark
 *   ユーティリティ（「追加CSSクラス」／配色や互いと併用可）
 *     .tbl_zebra        偶数行に薄い地色を敷く
 *     .tbl_compact      セル余白を詰める（数値が並ぶ表向け）
 *     .tbl_label_narrow ラベル列を狭くする（26rem → 14rem）
 *     .tbl_label_auto   ラベル列の幅指定を外して内容に合わせる
 *     .tbl_label_normal ラベルの太字をやめる
 *     .tbl_label_bold   ラベルを太字にする（既定なので通常は不要）
 *     .tbl_label_black    ラベルの文字を黒にする    ※淡い背景の配色専用
 *     .tbl_label_darkgray ラベルの文字を濃いグレーに ※淡い背景の配色専用
 *     .tbl_scroll       モバイルで積み上げず横スクロールにする
 * -------------------------------------------------------------------------- */


/* =============================================================================
 * 0) 既定値
 * -----------------------------------------------------------------------------
 * ここが既定値の唯一の定義場所。サイト全体の既定を変えるときはこのブロックだけ
 * 触る（以前は 20 箇所以上の var() フォールバックに散っていた）。
 *
 * :root はエディタでも安全に効く。add_editor_style で渡したCSSは
 * @wordpress/block-editor の transform-styles がセレクタに .editor-styles-wrapper を
 * 前置するが、:root は ROOT_SELECTOR_TOKENS に含まれており
 * `:root .editor-styles-wrapper` へ書き換わる（wp-includes/js/dist/block-editor.js）。
 * ラッパーにカスタムプロパティが乗り、中の表へ継承されるのでフロントと一致する。
 *
 * 以降の var() の第2引数（フォールバック）は、万一この :root が届かない環境でも
 * 「従来の見た目」に落ちるための保険であり、意図的に歴史的な値のまま固定する。
 * 既定を変更するときに追随させる必要はない。
 * ========================================================================== */

:root {
  --tbl-label-bg: #D0121B;
  --tbl-label-fg: #fff;
  --tbl-label-weight: bold;
  --tbl-label-width: 26rem;
  --tbl-frame: #D0121B;
  --tbl-sep: #fff;
  --tbl-cell-border: #eee;
  --tbl-cell-pad-y: .9em;
  --tbl-cell-pad-x: 1.2em;
  --tbl-zebra: transparent;
  --tbl-scroll-min: 60rem;

  /* --tbl-cell-pad-x-sp は初期値がパターンごとに違う（.ptn_tbl1 = .5em /
     .ptn_tbl2 = 1em）ため :root には置かず、各 var() のフォールバックで表現する。
     ここで一律の値を置くと、どちらかのモバイル余白が現状から変わってしまう。 */
}


/* =============================================================================
 * 1) ブリッジ：ハードコードされた値を var() 参照に差し替える
 * ========================================================================== */

/* --- 1-1) ptn_tbl2 ＝ クラス無指定の表（＝サイト上でいちばん多い形） ---------
   ラベル列（左端）が塗られるパターン。
   css/style.css の :not(.ptn_tbl1, .ptn_tbl3, :has(th)) はフォールバックなので、
   ブロックエディタで表を置いただけの投稿はすべてここに落ちる。 */
.ptn_tbl2.ptn_tbl2 td:first-child,
.wp-block-table.wp-block-table:not(.ptn_tbl1, .ptn_tbl3, :has(th)) td:first-child {
  background: var(--tbl-label-bg, #D0121B);
  color: var(--tbl-label-fg, #fff);
  font-weight: var(--tbl-label-weight, bold);
}

/* 枠線とラベル列幅の指定は元CSSでも 768px 以上のみ存在するので、同じ条件下で
   差し替える。border-*-color の longhand で上書きし、線種と太さは元の指定を使う。 */
@media screen and (min-width: 768px) {

  .ptn_tbl2.ptn_tbl2 td:first-child,
  .wp-block-table.wp-block-table:not(.ptn_tbl1, .ptn_tbl3, :has(th)) td:first-child {
    width: var(--tbl-label-width, 26rem);
    border-top-color: var(--tbl-sep, #fff);
    border-bottom-color: var(--tbl-sep, #fff);
    border-left-color: var(--tbl-frame, #D0121B);
    border-right-color: var(--tbl-frame, #D0121B);
  }
}

/* 表の最初の行の上辺・最終行の下辺は「区切り」ではなく「表の輪郭」なので frame 側。 */
.ptn_tbl2.ptn_tbl2 tr:first-child td:first-child,
.wp-block-table.wp-block-table:not(.ptn_tbl1, .ptn_tbl3, :has(th)) tr:first-child td:first-child {
  border-top-color: var(--tbl-frame, #D0121B);
}

.ptn_tbl2.ptn_tbl2 tr:last-child td:first-child,
.wp-block-table.wp-block-table:not(.ptn_tbl1, .ptn_tbl3, :has(th)) tr:last-child td:first-child {
  border-bottom-color: var(--tbl-frame, #D0121B);
}

/* --- 1-2) :has(th) ＝ ヘッダ行（th）を持つ表 ------------------------------- */
.wp-block-table.wp-block-table:has(th) th {
  background: var(--tbl-label-bg, #D0121B);
  color: var(--tbl-label-fg, #fff);
  font-weight: var(--tbl-label-weight, bold);
}

/* --- 1-3) ptn_tbl1 ＝ 1行目が帯になる横型の表 ----------------------------- */
.ptn_tbl1.ptn_tbl1 tr:nth-child(1) td {
  background: var(--tbl-label-bg, #D0121B);
  color: var(--tbl-label-fg, #fff);
  font-weight: var(--tbl-label-weight, bold);
  border-bottom-color: var(--tbl-frame, #D0121B);
  border-left-color: var(--tbl-frame, #D0121B);
}

.ptn_tbl1.ptn_tbl1 tr:nth-child(1) td:last-child {
  border-right-color: var(--tbl-frame, #D0121B);
}

/* 帯の中のセル同士の区切り。上の td 規則より詳細度を高く保つ必要があるため、
   ここも同じく二重クラスで書く（元CSSの td+td だけに任せると負ける）。 */
.ptn_tbl1.ptn_tbl1 tr:nth-child(1) td+td {
  border-left-color: var(--tbl-sep, #fff);
}

/* --- 1-4) ptn_tbl3 ＝ 塗りなし・ラベルの下に細い線が入る表 ----------------- */
.ptn_tbl3.ptn_tbl3 td:first-child {
  font-weight: var(--tbl-label-weight, bold);
}

.ptn_tbl3.ptn_tbl3 td:first-child:before {
  border-bottom-color: var(--tbl-frame, #D0121B);
}

@media screen and (min-width: 768px) {
  .ptn_tbl3.ptn_tbl3 td:first-child {
    width: var(--tbl-label-width, 26rem);
  }
}

/* --- 1-5) データセルの格子罫線 ----------------------------------------------
   元CSSは4パターンすべて #eee でセルを囲っている。ラベルだけ濃い色にすると
   格子が薄いままで不釣り合いになるため（.tbl_dark で顕著）、ここも変数化する。
   :has(th) のパターンは元CSSが th と td を同じ #eee で囲う設計なので、
   ヘッダ側の罫線も frame/sep ではなく cell-border 側に属する。 */
.ptn_tbl1.ptn_tbl1 tr+tr td {
  border-color: var(--tbl-cell-border, #eee);
}

/* ptn_tbl2 は 767px 以下で元CSSが上下辺を border-top/bottom: none にしている
   （セルが縦積みになるため）。そこへ一括の border-color を当てると、描画されない辺の
   色だけが currentcolor から変わってしまう。左右は全幅・上下は 768px 以上に分けて指定する。 */
.ptn_tbl2.ptn_tbl2 td+td,
.wp-block-table.wp-block-table:not(.ptn_tbl1, .ptn_tbl3, :has(th)) td+td {
  border-left-color: var(--tbl-cell-border, #eee);
  border-right-color: var(--tbl-cell-border, #eee);
}

@media screen and (min-width: 768px) {

  .ptn_tbl2.ptn_tbl2 td+td,
  .wp-block-table.wp-block-table:not(.ptn_tbl1, .ptn_tbl3, :has(th)) td+td {
    border-top-color: var(--tbl-cell-border, #eee);
    border-bottom-color: var(--tbl-cell-border, #eee);
  }
}

.wp-block-table.wp-block-table:has(th) td,
.wp-block-table.wp-block-table:has(th) th {
  border-color: var(--tbl-cell-border, #eee);
}

.ptn_tbl3.ptn_tbl3 td {
  border-bottom-color: var(--tbl-cell-border, #eee);
}

/* モバイルでは表の下辺だけ元CSSが別に引いている（積み上げ表示の締め）。 */
@media screen and (max-width: 767px) {

  .ptn_tbl2.ptn_tbl2 table,
  .wp-block-table.wp-block-table:not(.ptn_tbl1, .ptn_tbl3, :has(th)) table {
    border-bottom-color: var(--tbl-cell-border, #eee);
  }
}

/* --- 1-6) セルの余白 --------------------------------------------------------
   元CSSは 3 パターンで揃って .9em 1.2em。モバイルの左右だけパターンごとに
   違う（.ptn_tbl1 = .5em / .ptn_tbl2 = 1em）ので、そこは同じ変数名の
   フォールバック値で書き分ける。
   .ptn_tbl3 は padding が非対称でレイアウトそのものを作っている
   （0 1.2em .9em / tr+tr の padding-top / 768px 以上の padding-left）ため、
   変数化すると崩れる。意図的に対象外とする。 */
.ptn_tbl1.ptn_tbl1 td,
.ptn_tbl2.ptn_tbl2 td,
.wp-block-table.wp-block-table:not(.ptn_tbl1, .ptn_tbl3, :has(th)) td,
.wp-block-table.wp-block-table:has(th) td,
.wp-block-table.wp-block-table:has(th) th {
  padding: var(--tbl-cell-pad-y, .9em) var(--tbl-cell-pad-x, 1.2em);
}

@media screen and (max-width: 767px) {
  .ptn_tbl1.ptn_tbl1 td {
    padding: var(--tbl-cell-pad-y, .9em) var(--tbl-cell-pad-x-sp, .5em);
  }

  .ptn_tbl2.ptn_tbl2 td,
  .wp-block-table.wp-block-table:not(.ptn_tbl1, .ptn_tbl3, :has(th)) td {
    padding: var(--tbl-cell-pad-y, .9em) var(--tbl-cell-pad-x-sp, 1em);
  }
}


/* =============================================================================
 * 2) 縞（自前実装）
 * -----------------------------------------------------------------------------
 * core/table の「ストライプ」は wp-block-library に入っており、テーマは
 * functions.php でそれをフロントで dequeue しているため公開ページでは効かない
 * （だから js/editor-block-styles.js で選択肢を隠している）。
 * 代わりに縞をここで実装する。既定は transparent なので何も起きない。
 *
 * ラベル列／ヘッダ行は縞の対象外にする。あちらは --tbl-label-bg が塗るので、
 * 縞を重ねるとバリアントの配色が崩れる。
 * 最初のデータ行は白のままにし、2行目から敷く（行数が奇数でも先頭が浮かない）。
 * ========================================================================== */

/* ptn_tbl2 ＝ 左端がラベル。データセルのみ、偶数行に敷く。 */
.ptn_tbl2.ptn_tbl2 tr:nth-child(even) td:not(:first-child),
.wp-block-table.wp-block-table:not(.ptn_tbl1, .ptn_tbl3, :has(th)) tr:nth-child(even) td:not(:first-child) {
  background: var(--tbl-zebra, transparent);
}

/* :has(th) ＝ ヘッダは thead か tbody 先頭列の th。どちらでも td だけが対象。 */
.wp-block-table.wp-block-table:has(th) tbody tr:nth-child(even) td {
  background: var(--tbl-zebra, transparent);
}

/* ptn_tbl1 ＝ 1行目が帯。帯を除いた2行目以降で、3行目・5行目…に敷く。 */
.ptn_tbl1.ptn_tbl1 tr:nth-child(odd):not(:first-child) td {
  background: var(--tbl-zebra, transparent);
}


/* =============================================================================
 * 3) 配色バリアント：figure 側にクラス1つで配色を切り替える（単一選択）
 * -----------------------------------------------------------------------------
 * .is-style-* … register_block_style() 経由。ブロックエディタのサイドバー
 *               「スタイル」から選択され、figure に自動で付く（推奨）。
 * .tbl_*      … 同じ配色の素のクラス。テーマのPHPテンプレートが直接書き出す表や、
 *               「追加CSSクラス」に手入力する場合の受け口として併記する。
 * カスタムプロパティは子孫へ継承されるので、figure に付けるだけで中の td に届く。
 * セクション等の祖先要素に付ければ、その中の表すべてに効く。
 * 既定（赤）はクラス無しなので、エディタで「デフォルト」に戻せば赤に戻る。
 * ========================================================================== */

/* --- 赤系の濃淡 --------------------------------------------------------------
 * 「今の赤が目立ちすぎる」に対して、ブランドの色相を保ったまま面積の主張だけを
 * 弱める段階を用意する。値は #D0121B を白と混ぜた単純な sRGB 混合で、
 * コンパイル時計算やブラウザの color-mix() に頼らず確定値を書いている
 * （color-mix() はカスタムプロパティ内だと未対応ブラウザで前の宣言に
 *   フォールバックしてくれないため、ここでは採らない）。
 *
 *   混合率      色        白文字   濃赤#8E0C13
 *   100%     #D0121B      5.55       1.71      ← デフォルト（白文字）
 *    85%(黒) #B10F17      7.12       1.33      ← 濃い（白文字）
 *    70%     #DE595F      3.68       2.58      ← 枠線専用（文字は乗せない）
 *    40%     #ECA0A4      2.07       4.58      ← 枠線専用
 *    25%     #F3C4C6      1.55       6.11      ← 淡い（濃赤文字）
 *    10%     #FAE7E8      1.19       7.98      ← ごく淡い（濃赤文字）
 *
 * 白文字が AA（4.5:1）を保てるのは 85% 以上だけ。それより淡い段は文字を
 * 濃赤 #8E0C13 に反転させている。淡い背景＋白文字は作らないこと。
 *
 * 淡い段のラベル文字を黒や濃いグレーにしたい場合は、バリアントを増やさず
 * ユーティリティ .tbl_label_black / .tbl_label_darkgray を併用する
 * （4-2 節。配色の既定は濃赤のまま変えない）。
 * -------------------------------------------------------------------------- */

/* 濃い：面積は変えずに彩度を落として刺さり方を和らげる。白文字のまま 7.12:1。 */
.is-style-tbl-red-deep,
.tbl_red_deep {
  --tbl-label-bg: #B10F17;
  --tbl-label-fg: #fff;
  --tbl-frame: #B10F17;
  --tbl-sep: #fff;
}

/* 淡い：赤の面積の主張をはっきり下げる。文字は濃赤へ反転して 6.11:1。
   輪郭は中間の赤 #DE595F で表の形を保ち、行区切りはごく淡い赤で抜く。
   文字色を黒や濃いグレーにしたいときは .tbl_label_black /
   .tbl_label_darkgray を併用する（この配色の既定は濃赤のまま）。 */
.is-style-tbl-red-soft,
.tbl_red_soft {
  --tbl-label-bg: #F3C4C6;
  --tbl-label-fg: #8E0C13;
  --tbl-frame: #DE595F;
  --tbl-sep: #FBECED;
}

/* ごく淡い：赤系でいちばん静か。グレーに近い軽さだが色相はブランド側に残る。7.98:1。
   文字色の差し替えは上と同じくユーティリティで行う。 */
.is-style-tbl-red-pale,
.tbl_red_pale {
  --tbl-label-bg: #FAE7E8;
  --tbl-label-fg: #8E0C13;
  --tbl-frame: #ECA0A4;
  --tbl-sep: #F3C4C6;
}

/* --- 無彩色 ----------------------------------------------------------------- */

/* グレー：赤を完全に外したい資料的なページ向け（論文情報・募集要項など）。
   #F6F6F6 × #0F0F0F でコントラストは十分（15:1 超）。
   区切り線は表内部のセル枠 #eee に近い #ddd、輪郭はそれより締めて #ccc。
   なお .tbl_zebra との併用は、ラベル(#F6F6F6)と縞(#F7F7F7)がほぼ同色になり
   縞が見えないので効果が薄い。併用するなら --tbl-zebra を個別に上書きする。 */
.is-style-tbl-gray,
.tbl_gray {
  --tbl-label-bg: #F6F6F6;
  --tbl-label-fg: #0F0F0F;
  --tbl-frame: #ccc;
  --tbl-sep: #ddd;
}

/* ダーク：赤を使わずに強い区切りが欲しい場合。
   #0F0F0F × #fff で約 19:1。区切りは既定と同じく白で抜く。
   ラベルが真っ黒になるぶん格子も少し締めて、薄すぎる #eee との落差を消す。 */
.is-style-tbl-dark,
.tbl_dark {
  --tbl-label-bg: #0F0F0F;
  --tbl-label-fg: #fff;
  --tbl-frame: #0F0F0F;
  --tbl-sep: #fff;
  --tbl-cell-border: #ddd;
}


/* =============================================================================
 * 4) ユーティリティ：配色と直交する軸（「追加CSSクラス」欄に手入力・併用可）
 * -----------------------------------------------------------------------------
 * 例）グレーで縞、余白は詰める
 *     スタイル = 「ラベル：グレー」、追加CSSクラス = 「tbl_zebra tbl_compact」
 * ブロックスタイルにしていない理由はファイル冒頭のとおり（単一選択だと併用不可）。
 * ========================================================================== */

/* 縞：行数の多い表で視線が横にずれるのを防ぐ。
   #F7F7F7 は本文黒 #0F0F0F に対して 18:1 超で、罫線 #eee との差も見える。 */
.tbl_zebra {
  --tbl-zebra: #F7F7F7;
}

/* コンパクト：数値や短い語が並ぶ表で行間を詰める。
   モバイルは元から詰まっているので、下げ幅を desktop より小さくしている。 */
.tbl_compact {
  --tbl-cell-pad-y: .5em;
  --tbl-cell-pad-x: .8em;
  --tbl-cell-pad-x-sp: .6em;
}

/* ラベル列の幅：既定 26rem は「〇〇について」級の長いラベル向け。
   短いラベル（年度・区分など）では内容側が窮屈になるので狭める手を用意する。 */
.tbl_label_narrow {
  --tbl-label-width: 14rem;
}

/* auto ＝ 幅指定を外して内容に合わせる。列数が3以上ある表で使いやすい。 */
.tbl_label_auto {
  --tbl-label-width: auto;
}

/* ラベルの太字をやめる。数値表で太字のラベルが煩いときに。 */
.tbl_label_normal {
  --tbl-label-weight: normal;
}

/* ラベルを太字にする。既定が bold なので通常は不要だが、
   .tbl_label_normal を付けた祖先の中で個別に太字へ戻したいとき、
   またサイト既定を細字へ変えたあとに明示的に太字を指定したいときに使う。 */
.tbl_label_bold {
  --tbl-label-weight: bold;
}

/* --- 4-2) ラベルの文字色（淡い背景の配色と併用する） --------------------------
 * 淡い赤やグレーのラベルには、既定で濃赤 #8E0C13 の文字が乗る。そこを黒や
 * 濃いグレーに替えたいときに使う。配色バリアント側の既定は変えず、
 * 必要な表だけ「追加CSSクラス」で差し替える方針。
 *
 * ⚠ 塗りの濃い配色（デフォルトの赤・赤（濃い）・ダーク）には併用しないこと。
 *   それらは白文字で AA を満たしている。黒や濃いグレーを乗せると下表のとおり
 *   すべて AA（4.5:1）を割り、読めなくなる。
 *
 *   文字色＼背景        赤 淡い  ごく淡い  グレー │ 既定の赤  赤 濃い  ダーク
 *   #8E0C13 濃赤（既定）   6.11    7.98    8.78  │  1.71    1.33    2.02
 *   #0F0F0F 黒           12.34   16.12   17.74  │  3.45    2.69    1.00
 *   #333    濃いグレー     8.14   10.63   11.69  │  2.28    1.77    1.52
 *                        ← 使用可（AA 以上） →   └─ 使用不可（AA 未満）─┘
 *
 * ユーティリティは配色バリアントより後に定義しているので、同じ figure に
 * 両方付けたときはこちらが勝つ（どちらも単一クラス＝詳細度が同じため後勝ち）。
 * -------------------------------------------------------------------------- */

/* 黒：本文・データセルと同じ色。表全体で文字色が揃う。 */
.tbl_label_black {
  --tbl-label-fg: #0F0F0F;
}

/* 濃いグレー：黒よりわずかに軽い。ラベルを主張させたくないが
   赤字は避けたいときに。#333 はテーマ内で既に使われている色。 */
.tbl_label_darkgray {
  --tbl-label-fg: #333;
}

/* --- モバイルで積み上げず横スクロールにする --------------------------------
 * css/style.css は 767px 以下で td を float:left / width:100% にして全セルを
 * 縦に積む。2列の「項目：内容」表では正しいが、列数の多い数値表では表として
 * 読めなくなる。そういう表だけ .ptn_tbl1 と同じ横スクロールに切り替える。
 *
 * 元の指定（.wp-block-table:not(...) td = クラス2/要素1）を覆す必要があるため、
 * ここだけクラスを3回書いて詳細度を上げている。
 * -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {

  .tbl_scroll.tbl_scroll {
    overflow-x: auto;
  }

  .tbl_scroll.tbl_scroll table {
    min-width: var(--tbl-scroll-min, 60rem);
  }

  /* 積み上げ（float / width:100%）を解除して横並びに戻す。 */
  .tbl_scroll.tbl_scroll.tbl_scroll td,
  .tbl_scroll.tbl_scroll.tbl_scroll th {
    float: none;
    width: auto;
  }

  /* 積み上げ時に消していた上下の罫線を戻す（横並びでは格子が必要）。 */
  .tbl_scroll.tbl_scroll.tbl_scroll td+td {
    border-top: solid 1px var(--tbl-cell-border, #eee);
    border-bottom: solid 1px var(--tbl-cell-border, #eee);
  }

  /* ラベル列は 768px 以上と同じ見せ方に揃える。元CSSはモバイルでラベル列に
     罫線を引いていないので、線種と太さもここで指定する。
     ヘッダ行を持つ表（:has(th)）に左端ラベル列は無いので対象外にする。 */
  .tbl_scroll.tbl_scroll.tbl_scroll:not(:has(th)) td:first-child {
    width: var(--tbl-label-width, 26rem);
    border-top: solid 1px var(--tbl-sep, #fff);
    border-bottom: solid 1px var(--tbl-sep, #fff);
    border-left: solid 1px var(--tbl-frame, #D0121B);
    border-right: solid 1px var(--tbl-frame, #D0121B);
  }

  .tbl_scroll.tbl_scroll.tbl_scroll:not(:has(th)) tr:first-child td:first-child {
    border-top-color: var(--tbl-frame, #D0121B);
  }

  .tbl_scroll.tbl_scroll.tbl_scroll:not(:has(th)) tr:last-child td:first-child {
    border-bottom-color: var(--tbl-frame, #D0121B);
  }
}