/*
 * yamanaka-bengoshi.jp 期×役職分布表
 * inc/judge-position-matrix.php のショートコード [judge_position_matrix] 用
 *
 * v1.1.0 設計変更:
 *   - 旧 transform: scale 方式は sticky の containing block を壊すため撤去
 *   - 代わりに CSS カスタムプロパティ --yjpm-scale を使い、フォント・padding を倍率変更
 *   - これにより thead / 左端 / 右端の sticky が transform に阻害されず確実に効く
 *
 * 構造:
 *   .yjpm-wrapper                 全体ラッパ（全画面化対象、CSS 変数のオーナー）
 *     .yjpm-toolbar                 上部ツールバー
 *     .yjpm-scroll                  スクロールコンテナ（overflow:auto）
 *       <table class="yjpm-table">    実テーブル
 *         <thead> .yjpm-group-row, .yjpm-col-row    sticky top
 *         <tbody> 各行                              left/right sticky term-head
 *         <tfoot> .yjpm-footer-row                  通常表示
 */

/* ---------- CSS カスタムプロパティ（ズーム制御） ---------- */
.yjpm-wrapper {
    --yjpm-scale: 1;
    --yjpm-font: 12px;
    --yjpm-pad-x: 6px;
    --yjpm-pad-y: 4px;
    --yjpm-cell-min: 28px;
    --yjpm-term-min: 44px;
    --yjpm-group-row-h: 32px;  /* JS が実測値で動的に上書き */
    --yjpm-col-row-h: 28px;    /* 同上 */
}

/* ---------- ラッパ ---------- */
.yjpm-wrapper {
    position: relative;
    margin: 24px 0;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}

/* 全画面表示時 */
.yjpm-wrapper:fullscreen,
.yjpm-wrapper.yjpm-is-fullscreen {
    width: 100vw;
    height: 100vh;
    margin: 0;
    border-radius: 0;
    border: none;
    background: #fff;
    display: flex;
    flex-direction: column;
}

/* v1.6.0: 疑似全画面（タッチ端末ではこちらを使う）
   native :fullscreen は iOS Safari / Android Chrome で上下スワイプ時に意図せず解除されるため、
   スマホでは下記の position:fixed オーバーレイで擬似的に全画面化し、スワイプはあくまで内部スクロールに
   留めることで誤解除を防ぐ。z-index は WordPress admin bar (99999) より下に設定。 */
.yjpm-wrapper.yjpm-is-fullscreen {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
}
/* admin bar 表示中（ログインユーザー）は admin bar の高さぶん下に。
   admin bar の高さは PC 32px / モバイル(≤782px) 46px。 */
body.admin-bar .yjpm-wrapper.yjpm-is-fullscreen {
    top: 32px;
    height: calc(100vh - 32px);
}
@media (max-width: 782px) {
    body.admin-bar .yjpm-wrapper.yjpm-is-fullscreen {
        top: 46px;
        height: calc(100vh - 46px);
    }
}
/* 疑似全画面中はページ背面のスクロールを止める（誤タップでページが動かないように） */
body.yjpm-fs-lock {
    overflow: hidden !important;
}
.yjpm-wrapper:fullscreen .yjpm-scroll,
.yjpm-wrapper.yjpm-is-fullscreen .yjpm-scroll {
    /* flex column 内のスクロール子要素では、min-height だけでなく
       min-width: 0 も必須。これを書かないと内部 table の幅に scroll が押し広げられ、
       横スクロールが成立せず、JS のドラッグスクロール (scrollLeft) も効かない。 */
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    width: 100%;
    max-height: none;
    overflow: auto;
}

/* ---------- ツールバー ---------- */
.yjpm-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #f5f5f5;
    border-bottom: 1px solid #ccc;
    /* 全画面 (wrapper が flex column) で潰れない固定領域として確保 */
    flex: 0 0 auto;
}
.yjpm-title { font-weight: bold; font-size: 16px; color: #333; }
.yjpm-timestamp { font-weight: normal; color: #777; font-size: 13px; margin-left: 6px; }
.yjpm-controls { display: flex; align-items: center; gap: 6px; }
.yjpm-btn {
    appearance: none;
    border: 1px solid #888;
    background: #fff;
    color: #333;
    padding: 5px 12px;
    font-size: 14px;
    line-height: 1.2;
    border-radius: 4px;
    cursor: pointer;
    min-width: 36px;
    user-select: none;
}
.yjpm-btn:hover { background: #eef; }
.yjpm-btn:active { background: #ddf; }
.yjpm-btn-reset { font-weight: bold; }
.yjpm-btn-fullscreen {
    background: #d93025;
    color: #fff;
    border-color: #b3261a;
    margin-left: 6px;
}
.yjpm-btn-fullscreen:hover { background: #c1281c; }
.yjpm-zoom-label {
    display: inline-block;
    min-width: 42px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: #555;
    font-size: 13px;
}

/* ---------- スクロール領域 ---------- */
.yjpm-scroll {
    position: relative;
    overflow: auto;
    max-height: 75vh;
    -webkit-overflow-scrolling: touch;
    /* pinch は JS 処理。1 本指 pan のみブラウザに渡す */
    touch-action: pan-x pan-y;
}

/* ---------- テーマ自動 table-wrap を実質無効化 ----------
   xeory_base 等が <table> を <div class="table-wrap table-grad"> で
   自動的に包む処理が sticky を壊すため、display: contents で実質的に消す。
   JS の unwrapTableWrappers が DOM レベルで取り外すが、JS 実行前の初期表示でも
   壊れないよう CSS でも保護。セレクタ特異性は 3 階層に上げる。 */
.yjpm-wrapper .yjpm-scroll .table-wrap,
.yjpm-wrapper .yjpm-scroll .table-grad,
.yjpm-wrapper .yjpm-scroll .table-responsive {
    display: contents !important;
    overflow: visible !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: normal !important;
    width: auto !important;
    max-width: none !important;
}

/* 全画面時のドラッグスクロール用カーソル */
.yjpm-wrapper:fullscreen .yjpm-scroll,
.yjpm-wrapper.yjpm-is-fullscreen .yjpm-scroll { cursor: grab; }
.yjpm-wrapper:fullscreen.yjpm-dragging .yjpm-scroll,
.yjpm-wrapper.yjpm-is-fullscreen.yjpm-dragging .yjpm-scroll {
    cursor: grabbing;
    user-select: none;
}

/* ---------- テーブル本体 ----------
   テーマ側の table { font-size: 14px !important } 等に勝てるよう、
   font-size / padding にも !important を付ける。
   JS が inline style で table.style.fontSize に !important を付与するので、
   結果的にどちらが効いても最後勝ちで JS による倍率変更が反映される。 */
.yjpm-table {
    border-collapse: separate; /* sticky を効かせるため必須 */
    border-spacing: 0;
    font-size: calc(var(--yjpm-font) * var(--yjpm-scale)) !important;
    line-height: 1.2 !important;
    color: #1a1a1a;
    /* テーブルがスクロールコンテナの幅に圧縮されず、内容幅まで広がるよう保証。
       これでドラッグ操作の右端可動範囲が table 本来の幅まで届く */
    min-width: max-content;
}

/* ---------- v1.6.8: テーマの table-layout: fixed を打ち消す（数字つまり対策） ----------
   症状: 53 列すべてが幅 ~12px に潰れ、列ラベルがはみ出して数字が詰まって見える。
   原因: xeory_base テーマが .post-content table に
         table-layout: fixed; width: 100%; max-width: 100% を当てており（特異性 0,1,1）、
         これが上の .yjpm-table（特異性 0,1,0）の min-width: max-content を実質無効化する。
         table-layout: fixed では列が内容（ラベル）幅を無視して container 幅に均等配分されるため、
         53 列が ~738px のスクロール枠に押し込まれて各 ~12px に圧縮されていた。
   対処: table-layout を auto に戻し、width 制約を解除して列を内容幅に合わせる。
         横方向は .yjpm-scroll の overflow:auto がスクロールを提供する（設計どおり）。
   特異性 (0,2,0) で .post-content table (0,1,1) に勝ち、!important で width 系も確実に上書き。 */
.yjpm-wrapper .yjpm-table {
    table-layout: auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: max-content !important;
}

/* セレクタの特異性 (0,2,1) でテーマ側 .post-content table th/td (0,2,1) と互角まで上げ、
   読み込み順で勝てるようにする。子テーマ CSS は通常テーマ CSS より後で読まれる。
   font-size: inherit は table 要素に inline 設定された font-size を th/td に継承させるための要。 */
.yjpm-wrapper .yjpm-table th,
.yjpm-wrapper .yjpm-table td {
    border-right: 1px solid #d0d0d0 !important;
    border-bottom: 1px solid #d0d0d0 !important;
    border-left: 0 !important;
    border-top: 0 !important;
    padding: 0.34em 0.5em !important;
    white-space: nowrap !important;
    text-align: center !important;
    background: #fff;
    /* table 要素の font-size を継承させる。これがないとテーマの
       .post-content table th { font-size: 15px } 等が直接当たって縮尺が効かない。 */
    font-size: inherit !important;
    line-height: 1.2 !important;
}

.yjpm-cell {
    font-variant-numeric: tabular-nums;
    min-width: 2.3em;
}

/* ---------- ヘッダ行 sticky（最重要） ----------
   テーマや他 CSS の上書き／iOS Safari の sticky 描画問題を避けるため、
   -webkit-sticky 併用、!important、background-clip: padding-box を併用。 */

/* グループ大見出し行 — スクロール領域の上端に貼り付く。
   特異性を .yjpm-wrapper まで含めて (0,3,1) まで上げ、テーマの .post-content table thead th 等に勝つ */
.yjpm-wrapper .yjpm-table .yjpm-group-row > th {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    font-weight: bold !important;
    background-clip: padding-box !important;
}

/* 列見出し行 — グループ行の高さぶん下にオフセットして貼り付く */
.yjpm-wrapper .yjpm-table .yjpm-col-row > th {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: var(--yjpm-group-row-h, 32px) !important;
    z-index: 40 !important;
    font-weight: bold !important;
    background-clip: padding-box !important;
}

/* グループ別の色: 上段濃色版 — 特異性 (0,3,2) + !important で
   前項の th 共通 background: #fff (0,2,1) に必ず勝つ */
.yjpm-wrapper .yjpm-group-row > th.yjpm-group-saikousai { background: #4a6d8c !important; color: #fff !important; }
.yjpm-wrapper .yjpm-group-row > th.yjpm-group-shiken    { background: #6d8c4a !important; color: #fff !important; }
.yjpm-wrapper .yjpm-group-row > th.yjpm-group-souken    { background: #8c844a !important; color: #fff !important; }
.yjpm-wrapper .yjpm-group-row > th.yjpm-group-kosai     { background: #8c4a4a !important; color: #fff !important; }
.yjpm-wrapper .yjpm-group-row > th.yjpm-group-jika      { background: #8c5a4a !important; color: #fff !important; }
.yjpm-wrapper .yjpm-group-row > th.yjpm-group-shukkou   { background: #5a4a8c !important; color: #fff !important; }

/* 下段列見出し（中間トーン）— thead 内の yjpm-col-row と tfoot 内の yjpm-col-row-bottom で共通の着色 */
.yjpm-wrapper .yjpm-col-row > th.yjpm-group-saikousai,
.yjpm-wrapper .yjpm-col-row-bottom > th.yjpm-group-saikousai { background: #b8c7d8 !important; color: #1a2a3a !important; font-weight: bold !important; }
.yjpm-wrapper .yjpm-col-row > th.yjpm-group-shiken,
.yjpm-wrapper .yjpm-col-row-bottom > th.yjpm-group-shiken    { background: #c6d8ad !important; color: #2a3a1a !important; font-weight: bold !important; }
.yjpm-wrapper .yjpm-col-row > th.yjpm-group-souken,
.yjpm-wrapper .yjpm-col-row-bottom > th.yjpm-group-souken    { background: #d8d3a0 !important; color: #3a3a1a !important; font-weight: bold !important; }
.yjpm-wrapper .yjpm-col-row > th.yjpm-group-kosai,
.yjpm-wrapper .yjpm-col-row-bottom > th.yjpm-group-kosai     { background: #d8b3b3 !important; color: #3a1a1a !important; font-weight: bold !important; }
.yjpm-wrapper .yjpm-col-row > th.yjpm-group-jika,
.yjpm-wrapper .yjpm-col-row-bottom > th.yjpm-group-jika      { background: #d8c0a8 !important; color: #3a2a1a !important; font-weight: bold !important; }
.yjpm-wrapper .yjpm-col-row > th.yjpm-group-shukkou,
.yjpm-wrapper .yjpm-col-row-bottom > th.yjpm-group-shukkou   { background: #c3b3d8 !important; color: #2a1a3a !important; font-weight: bold !important; }

/* tfoot 内の列見出し再表示行を確実に表示。テーマ CSS の display 干渉や
   display: contents の伝播事故を防ぐため、display と visibility を明示。 */
.yjpm-wrapper .yjpm-col-row-bottom {
    display: table-row !important;
    visibility: visible !important;
}
.yjpm-wrapper .yjpm-col-row-bottom > th {
    display: table-cell !important;
    visibility: visible !important;
    font-size: inherit !important;
    line-height: 1.2 !important;
    padding: 0.34em 0.5em !important;
    text-align: center !important;
    border-right: 1px solid #d0d0d0 !important;
    border-bottom: 1px solid #d0d0d0 !important;
    border-top: 2px solid #888 !important;
}

/* 末尾の列見出し行内の左端・中間「修習期」位置の空セル（ユーザー指定で空欄） */
.yjpm-wrapper .yjpm-col-row-bottom > th.yjpm-term-head-blank-bottom {
    background: #fafafa !important;
    border-left: 2px solid #888 !important;
    border-right: 2px solid #888 !important;
}
/* 旧クラスも残しておく（既存転送ファイル混在時のフォールバック） */
.yjpm-wrapper .yjpm-col-row-bottom > th.yjpm-term-head-left-bottom,
.yjpm-wrapper .yjpm-col-row-bottom > th.yjpm-term-head-middle-bottom {
    background: #fafafa !important;
    border-left: 2px solid #888 !important;
    border-right: 2px solid #888 !important;
}
.yjpm-wrapper .yjpm-col-row-bottom > th.yjpm-group-total-head.yjpm-group-saikousai { background: #4a6d8c !important; color: #fff !important; font-weight: bold !important; }
.yjpm-wrapper .yjpm-col-row-bottom > th.yjpm-group-total-head.yjpm-group-shiken    { background: #6d8c4a !important; color: #fff !important; font-weight: bold !important; }
.yjpm-wrapper .yjpm-col-row-bottom > th.yjpm-group-total-head.yjpm-group-souken    { background: #8c844a !important; color: #fff !important; font-weight: bold !important; }
.yjpm-wrapper .yjpm-col-row-bottom > th.yjpm-group-total-head.yjpm-group-kosai     { background: #8c4a4a !important; color: #fff !important; font-weight: bold !important; }
.yjpm-wrapper .yjpm-col-row-bottom > th.yjpm-group-total-head.yjpm-group-jika      { background: #8c5a4a !important; color: #fff !important; font-weight: bold !important; }
.yjpm-wrapper .yjpm-col-row-bottom > th.yjpm-group-total-head.yjpm-group-shukkou   { background: #5a4a8c !important; color: #fff !important; font-weight: bold !important; }
.yjpm-wrapper .yjpm-col-row-bottom > th.yjpm-grand-total-head { background: #333 !important; color: #fff !important; font-weight: bold !important; }

/* グループ計列ヘッダ（rowspan=2） */
.yjpm-wrapper .yjpm-table th.yjpm-group-total-head { font-weight: bold !important; }
.yjpm-wrapper .yjpm-table th.yjpm-group-total-head.yjpm-group-saikousai { background: #4a6d8c !important; color: #fff !important; }
.yjpm-wrapper .yjpm-table th.yjpm-group-total-head.yjpm-group-shiken    { background: #6d8c4a !important; color: #fff !important; }
.yjpm-wrapper .yjpm-table th.yjpm-group-total-head.yjpm-group-souken    { background: #8c844a !important; color: #fff !important; }
.yjpm-wrapper .yjpm-table th.yjpm-group-total-head.yjpm-group-kosai     { background: #8c4a4a !important; color: #fff !important; }
.yjpm-wrapper .yjpm-table th.yjpm-group-total-head.yjpm-group-jika      { background: #8c5a4a !important; color: #fff !important; }
.yjpm-wrapper .yjpm-table th.yjpm-group-total-head.yjpm-group-shukkou   { background: #5a4a8c !important; color: #fff !important; }

/* 合計列ヘッダ */
.yjpm-wrapper .yjpm-table th.yjpm-grand-total-head {
    background: #333 !important;
    color: #fff !important;
    font-weight: bold !important;
}

/* ---------- 角セル「修習期」: 左上 / 中央 ---------- */
.yjpm-wrapper .yjpm-table th.yjpm-corner {
    background: #555 !important;
    color: #fff !important;
    font-weight: bold !important;
    min-width: 3.6em;
}

/* 縦書きラベル */
.yjpm-vertical {
    display: inline-block;
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 0.05em;
    line-height: 1.0;
    padding: 2px 0;
}

/* 左上角: 縦横ともスティッキー (最も上の z-index) */
.yjpm-wrapper .yjpm-table .yjpm-corner-left {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 70 !important;
    background-clip: padding-box !important;
}

/* 中央角 (データブロックと合計ブロックの間)：上のみスティッキー */
.yjpm-wrapper .yjpm-table .yjpm-corner-middle {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 55 !important;
    border-left: 2px solid #888 !important;
    border-right: 2px solid #888 !important;
    background-clip: padding-box !important;
}

/* 右上角 (現状未使用、互換のため残す) */
.yjpm-corner-right {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 70;
    border-left: 2px solid #888;
    background-clip: padding-box;
}

/* ---------- 左右の期見出し列 sticky ---------- */
.yjpm-wrapper .yjpm-table th.yjpm-term-head {
    background: #fafafa !important;
    color: #333 !important;
    font-weight: bold !important;
    min-width: 3.6em;
}

/* 左端 sticky — ドラッグスクロール中も常に画面左に貼り付く。特異性を上げて確実に効かせる。 */
.yjpm-wrapper .yjpm-table .yjpm-term-head-left {
    position: -webkit-sticky !important;
    position: sticky !important;
    left: 0 !important;
    z-index: 30 !important;
    border-right: 2px solid #888 !important;
    background-clip: padding-box !important;
}

/* 中央 (データと合計の境界) — sticky なしの通常セル。背景はグレーで区切り */
.yjpm-wrapper .yjpm-table th.yjpm-term-head-middle {
    background: #e8e8e8 !important;
    border-left: 2px solid #888 !important;
    border-right: 2px solid #888 !important;
    font-weight: bold !important;
}

/* 右端 sticky (現状未使用、互換のため残す) */
.yjpm-term-head-right {
    position: sticky;
    right: 0;
    z-index: 30;
    border-left: 2px solid #888;
}

/* tfoot 行の期セルは少し濃く＆z-index 増（合計行が tbody の上に重なるとき向け） */
.yjpm-wrapper .yjpm-table .yjpm-footer-row .yjpm-term-head {
    background: #e0e0e0 !important;
    z-index: 35 !important;
}

/* ---------- セル ---------- */
.yjpm-cell-zero { color: #ccc; }

/* 空の期（その期に現職がいない）の行をグレーアウト */
.yjpm-empty-row .yjpm-cell { background: #fafafa; }
.yjpm-empty-row .yjpm-term-head { background: #efefef; color: #999; }

/* 10 期ごとの節目行（40/50/60/70 期）を灰色でハイライト。
   グループ計列・合計列は既存の色を維持するため除外する。 */
.yjpm-wrapper .yjpm-table .yjpm-row-decade > td.yjpm-cell:not(.yjpm-group-total):not(.yjpm-grand-total) {
    background: #e8e8e8 !important;
}
.yjpm-wrapper .yjpm-table .yjpm-row-decade > th.yjpm-term-head {
    background: #d8d8d8 !important;
    color: #1a1a1a !important;
}

/* グループ計列 */
.yjpm-group-total { font-weight: bold; background: #f5f5f0 !important; }
.yjpm-group-total.yjpm-group-saikousai { background: #eaf0f7 !important; }
.yjpm-group-total.yjpm-group-shiken    { background: #ecf4e1 !important; }
.yjpm-group-total.yjpm-group-souken    { background: #f4f3e1 !important; }
.yjpm-group-total.yjpm-group-kosai     { background: #f7e1e1 !important; }
.yjpm-group-total.yjpm-group-jika      { background: #f7e8e1 !important; }
.yjpm-group-total.yjpm-group-shukkou   { background: #e8e1f4 !important; }

/* 総合計列（黄色強調） */
.yjpm-grand-total {
    font-weight: bold;
    background: #ffe082 !important;
    border-left: 2px solid #888;
}

/* tfoot 合計行 */
.yjpm-footer-row .yjpm-cell {
    font-weight: bold;
    background: #f0f0f0;
    border-top: 2px solid #888;
}
.yjpm-footer-row .yjpm-grand-total {
    background: #f9a825 !important;
    color: #fff;
}

/* ---------- グループ境界の太罫線 ---------- */
.yjpm-col-row th.yjpm-group-saikousai:first-of-type,
.yjpm-col-row th.yjpm-group-shiken:first-of-type,
.yjpm-col-row th.yjpm-group-souken:first-of-type,
.yjpm-col-row th.yjpm-group-kosai:first-of-type,
.yjpm-col-row th.yjpm-group-jika:first-of-type,
.yjpm-col-row th.yjpm-group-shukkou:first-of-type {
    border-left: 2px solid #888;
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 700px) {
    .yjpm-toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
    .yjpm-controls { justify-content: center; flex-wrap: wrap; }
    .yjpm-scroll { max-height: 70vh; }
    .yjpm-wrapper { --yjpm-font: 11px; }
}

/* ---------- R080531: WCAG 2.1 AA — :focus-visible ----------
 * Why: :focus はマウスクリックでも発火しデザインを壊しがち。
 *      :focus-visible はキーボード操作（Tab/Shift+Tab/矢印）のみで発火するので、
 *      マウス UX を保ったまま A11y を満たせる。
 * 個別: 全画面化中の赤背景フルスクリーンボタンは、デフォルトの青アウトラインが見えにくいので
 *      白アウトライン + 赤シャドウの 2 重リングに差し替え。
 */
.yjpm-wrapper .yjpm-btn:focus-visible,
.yjpm-wrapper .yjpm-term-link:focus-visible {
    outline: 3px solid #1d4ed8;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.25);
    border-radius: 4px;
}
.yjpm-wrapper .yjpm-btn-fullscreen:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -2px;
    box-shadow: 0 0 0 5px rgba(217, 48, 37, 0.6);
}
/* セル内テキストリンク（修習期 → /tag/{N}genshoku/ 等） */
.yjpm-wrapper a:focus-visible {
    outline: 2px solid #1d4ed8;
    outline-offset: 1px;
    border-radius: 2px;
}

/* ---------- R080603: WCAG SC 1.4.1 Use of Color — 色だけに依存しない冗長化 ----------
 * 6 グループ大見出し行に固有の背景パターン（斜線・点・縞）を重ねて、
 * 色覚多様性（1 型・2 型・3 型）でもグループ識別を可能にする。
 * 各パターンは色との組合せで `linear-gradient(...) , background-color` の重ね描き。
 * 背景色は元の濃色（saikousai #4a6d8c 等）を維持しつつ、半透明の白/黒で模様を上塗り。
 * 関連: judge-position-matrix.php yamanaka_jpm_group_mark() の記号プレフィックス
 * （◆●■▲◇□）と aria-label と組み合わせて 3 重冗長化（記号 + 色 + パターン）。
 *
 * セレクタ特異性 (0,3,2) で既存の group-row > th 共通 background (0,3,1) に確実勝つ。
 * !important は既存ルール群（249-254 行）が !important を多用しているため同様に付与。
 */
.yjpm-wrapper .yjpm-group-row > th.yjpm-group-saikousai {
    background-image: linear-gradient(135deg, rgba(255,255,255,0.18) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.18) 75%, transparent 75%) !important;
    background-size: 6px 6px !important;
    background-color: #4a6d8c !important;
}
.yjpm-wrapper .yjpm-group-row > th.yjpm-group-shiken {
    background-image: radial-gradient(circle, rgba(255,255,255,0.25) 1px, transparent 1px) !important;
    background-size: 5px 5px !important;
    background-color: #6d8c4a !important;
}
.yjpm-wrapper .yjpm-group-row > th.yjpm-group-souken {
    background-image: repeating-linear-gradient(90deg, rgba(0,0,0,0.10) 0 1px, transparent 1px 4px) !important;
    background-color: #8c844a !important;
}
.yjpm-wrapper .yjpm-group-row > th.yjpm-group-kosai {
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.20) 0 1px, transparent 1px 5px) !important;
    background-color: #8c4a4a !important;
}
.yjpm-wrapper .yjpm-group-row > th.yjpm-group-jika {
    background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.18) 0 1px, transparent 1px 4px) !important;
    background-color: #8c5a4a !important;
}
.yjpm-wrapper .yjpm-group-row > th.yjpm-group-shukkou {
    background-image:
        linear-gradient(135deg, rgba(255,255,255,0.20) 25%, transparent 25%),
        linear-gradient(225deg, rgba(255,255,255,0.20) 25%, transparent 25%) !important;
    background-size: 5px 5px !important;
    background-color: #5a4a8c !important;
}

/* グループ記号プレフィックスのスタイル */
.yjpm-group-mark {
    display: inline-block;
    margin-right: 4px;
    font-size: 0.85em;
    vertical-align: middle;
    line-height: 1;
}