/* =====================================================================
   technosms.com — 記事本文の表（school-tips / blog）
   ---------------------------------------------------------------------
   出どころ: lofir.net で確定した共通テーブル v2
     `ai-company/memory/2026-08-30_table-css/lfr-table-v2.css`（195行）
   このサイトは非SWELL（独自テーマ ls）なので、
     ・SWELL 用セレクタ（.single .l-mainContent__inner > .post_content）は落とし、
       **`.lfr-tbl-scope` 側だけ**を持ってきた
     ・§1 の変数を technosms のブランド色に差し替えた（横展開はこの2点だけ＝正本の設計どおり）
   方針も v2 のまま: **横スクロールへ逃がさず、字と余白を詰めて枠に収める。**
   ===================================================================== */

/* --- §1 変数（このサイトの値）---------------------------------------- */
:root {
    --lfr-tbl-head-bg:    #459d92;   /* 見出し帯＝サイトの緑（style.css 実測値） */
    --lfr-tbl-head-txt:   #fff;
    --lfr-tbl-rowhead-bg: #eef3f1;   /* 行見出し＝緑の淡い面 */
    --lfr-tbl-line:       #dae0e0;   /* 罫＝テーマの罫色 */

    --lfr-tbl-fz:         .80em;     /* PC      ≒12.8px */
    --lfr-tbl-fz-tb:      .73em;     /* 〜959px */
    --lfr-tbl-fz-sp:      .62em;     /* 〜599px（ピンチイン前提） */
    --lfr-tbl-pad:        .52em .65em;
    --lfr-tbl-pad-tb:     .46em .46em;
    --lfr-tbl-pad-sp:     .34em .3em;
    --lfr-tbl-lh:         1.6;
}

/* --- §2 基底（詳細度 0。テーマ側に指定があればそちらが勝つ）---------- */
:where(.lfr-tbl-scope) :where(.wp-block-table) :where(td, th) {
    border: 1px solid var(--lfr-tbl-line);
}
:where(.lfr-tbl-scope) :where(.wp-block-table) :where(table) {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}
.lfr-tbl-scope .wp-block-table { overflow-x: auto; margin: 2em 0; }

/* --- §3 字・余白・罫 -------------------------------------------------- */
.lfr-tbl-scope .wp-block-table td,
.lfr-tbl-scope .wp-block-table th {
    padding: var(--lfr-tbl-pad);
    font-size: var(--lfr-tbl-fz);
    line-height: var(--lfr-tbl-lh);
    border-color: var(--lfr-tbl-line);
    vertical-align: middle;
    /* 語は割らず、収まらないときだけ折る */
    word-break: normal;
    overflow-wrap: anywhere;
    min-width: 0;
}

/* --- §4 見出し帯 ------------------------------------------------------ */
.lfr-tbl-scope .wp-block-table thead th,
.lfr-tbl-scope .wp-block-table thead td {
    background-color: var(--lfr-tbl-head-bg);
    color: var(--lfr-tbl-head-txt);
    font-weight: 700;
}

/* --- §5 行見出し（tbody の th）---------------------------------------- */
.lfr-tbl-scope .wp-block-table tbody th {
    background-color: var(--lfr-tbl-rowhead-bg);
    font-weight: 700;
}

/* --- §6 1列目が広がりすぎるのを止める（正本 §8 と同じ根拠）------------
   auto レイアウトは余った幅を内容の量に比例して配るので、短い見出し語の列が
   文字数の比で引っ張られて広くなる。列数に応じた割合の目安を置く。
   ★`width:1%`+`nowrap` は正本で捨てられている（潰れる／逆に広がる）。 */
.lfr-tbl-scope .wp-block-table > table:not(:has(tr > :nth-child(3))) tr > :first-child { width: 30%; }
.lfr-tbl-scope .wp-block-table > table:has(tr > :nth-child(3)):not(:has(tr > :nth-child(4))) tr > :first-child { width: 22%; }

/* --- §7 枠に収める ---------------------------------------------------- */
.lfr-tbl-scope .wp-block-table > table { table-layout: auto; min-width: 0; }

/* 行見出しの補助語（区分など）は一段小さく、色を落とす */
.lfr-tbl-scope .wp-block-table .tcn-tbl__sub {
    display: inline-block;
    color: #6b7a78;
    font-weight: 400;
    font-size: .86em;
}

/* --- §8 表の名前（figcaption）--------------------------------------------
   ★このサイトの既存の表はキャプションを1つも持っていなかった（2026-08-30 実測）。
   付ける形は WP コアに合わせる＝ `<figcaption class="wp-element-caption">`
   （`block-editor.js` の `caption: "wp-element-caption"` を実測して確認）。
   表に名前があると、人にも「何の表か」が分かり、引用されたときにも文脈が残る。 */
.lfr-tbl-scope .wp-block-table figcaption,
.lfr-tbl-scope .wp-block-table .wp-element-caption {
    margin-top: .7em;
    color: #6b7a78;
    font-size: .8em;
    line-height: 1.6;
    text-align: left;
}

/* ★数値は折り返さない（「約24万／円」と割れると読めない。2026-08-30 SP 390px で実測）。
   §3 の overflow-wrap:anywhere より後に置いて、この span にだけ効かせる。 */
.lfr-tbl-scope .wp-block-table .tcn-tbl__nw { white-space: nowrap; }

@media (max-width: 959px) {
    .lfr-tbl-scope .wp-block-table td,
    .lfr-tbl-scope .wp-block-table th {
        padding: var(--lfr-tbl-pad-tb);
        font-size: var(--lfr-tbl-fz-tb);
        line-height: 1.5;
    }
}
@media (max-width: 599px) {
    .lfr-tbl-scope .wp-block-table td,
    .lfr-tbl-scope .wp-block-table th {
        padding: var(--lfr-tbl-pad-sp);
        font-size: var(--lfr-tbl-fz-sp);
    }
}