/**
 * A11Y table styles
 * A11Yテーブルのスタイル
 * Ver.1.0.0 2025.08.11
 * Ver.1.1.0 2025.08.11
 * layout.cssより分離分割 2026.04.20
 * Tea World のアクセシブルな表表示用スタイル。
 *
 * 内容:「表＋リンク＋印刷＋モバイル」を含むアクセシビリティ補助モジュール
 * - 通常表示
 * - 印刷最適化
 * - モバイル横スクロール対応
 * - sticky header / sticky row header
 * - 注記（tfoot）
 * - 表内リンク最適化
 */
/*================================
  A11Yテーブルのスタイル　2025.08.11
  ================================*/
:root{
  --tw-table-outline: #cbb98a;   /* 外枠の色 */
  --tw-head-bg:      #f1e8d9;    /* thead の淡いベージュ */
  --tw-grid:         #d9d6cf;    /* 罫線色（薄め） */
  --tw-cell-pad-y:   .75rem;     /* セル上下パディング */
  --tw-cell-pad-x:   1rem;       /* セル左右パディング */
  --tw-radius:       12px;       /* 角丸 */
}

/* 外枠ボックス（figure） */
.tw-a11y-table{
  border: 3px solid var(--tw-table-outline);
  border-radius: var(--tw-radius);
  padding: 10px 12px;
  background: #fff;               /* 枠の内側は白 */
  overflow-x: auto;               /* 横スクロール保険 */
}

/* テーブル本体 */
.tw-a11y-table__table{
  width: 100%;
  border-collapse: separate;      /* gridをキレイに見せる */
  border-spacing: 0;
  background: #fff;
  /* 角丸っぽく見せるためにクリップ */
  overflow: hidden;
}

/* 罫線と余白のベース */
.tw-a11y-table__table th,
.tw-a11y-table__table td{
  border: 1px solid var(--tw-grid);
  padding: var(--tw-cell-pad-y) var(--tw-cell-pad-x);
  vertical-align: middle;
}

/* thead を淡いベージュ＋下線をやや強めに */
.tw-a11y-table__table thead th{
  background: var(--tw-head-bg);
  font-weight: 600;               /* 太字（必要なければ 500/normal に） */
  border-bottom: 2px solid var(--tw-table-outline);
}

/* 行見出し（左端 th[scope=row]）はやや強めに */
.tw-a11y-table__table th[scope="row"]{
  font-weight: 700;
  white-space: nowrap;            /* 日本語はそのまま、英数は折返し抑制 */
}

/* 余計な濃い線が出るテーマ対策（最上段/最左列） */
.tw-a11y-table__table thead th:first-child,
.tw-a11y-table__table tbody tr th:first-child{
  border-left-width: 1px;
}

/* テーマがthead直下に太い境界線を当てる場合のリセット */
.tw-a11y-table__table thead + tbody tr:first-child th,
.tw-a11y-table__table thead + tbody tr:first-child td{
  /* 必要なら border-top を上書き */
  border-top-width: 1px;
}

/* 小さめ画面での読みやすさ（任意） */
@media (max-width: 480px){
  .tw-a11y-table__table th,
  .tw-a11y-table__table td{
    padding: .6rem .75rem;
  }
}

figure.wp-block-table.tw-a11y-table {
  border: 3px solid var(--tw-table-outline) !important;
  border-radius: var(--tw-radius) !important;
  padding: 10px 12px !important;
  background: #fff !important;
}

figure.wp-block-table.tw-a11y-table > table.tw-a11y-table__table thead th {
  background: var(--tw-head-bg) !important;
  border-bottom: 2px solid var(--tw-table-outline) !important;
}

/* 太い黒線のリセット */
figure.wp-block-table.tw-a11y-table > table.tw-a11y-table__table thead {
  border-bottom: none !important;
}
figure.wp-block-table.tw-a11y-table > table.tw-a11y-table__table thead + tbody tr:first-child th,
figure.wp-block-table.tw-a11y-table > table.tw-a11y-table__table thead + tbody tr:first-child td {
  border-top: 1px solid var(--tw-grid) !important;
}

/* thead下の太線を外枠色に合わせる */
.tw-a11y-table__table thead th {
  background: var(--tw-head-bg);
  border-bottom: 2px solid var(--tw-table-outline);
}

/* ========== 🖨️Print styles ==============
　　　　　印刷最適化　2025.08.11
背景色に頼らず見出しが分かる／罫線くっきり
／ページまたぎでtheadを自動繰り返し。
===================================== */
@media print {
  /* 文字をやや小さく、行間を詰めすぎない */
  .tw-a11y-table__table {
    font-size: 11pt;
    line-height: 1.4;
    border-collapse: collapse; /* 印刷では二重線になりにくい */
  }

  /* 外枠：控えめでも見える色に（プリンタで背景オフでも見える） */
  figure.tw-a11y-table {
    border-color: #666;
    padding: 8pt 10pt;
    overflow: visible !important; /* 切れ防止 */
    box-shadow: none;
  }

  /* 罫線は濃いめに、背景色は無くても区別できるように */
  .tw-a11y-table__table th,
  .tw-a11y-table__table td {
    border: 1px solid #666 !important;
    padding: 6pt 8pt;
  }

  /* thead は背景色が印刷されなくても分かるよう “太めの下線＋太字” */
  .tw-a11y-table__table thead th {
    background: transparent !important;   /* 背景印刷OFFでもOK */
    font-weight: 700;
    border-bottom: 2px solid #444 !important;
  }

  /* 行見出しも太字で視認性UP */
  .tw-a11y-table__table th[scope="row"] {
    font-weight: 700;
  }

  /* ページまたぎ耐性：行の分割を避け、ヘッダーは繰り返す */
  .tw-a11y-table__table thead { display: table-header-group; }
  .tw-a11y-table__table tfoot { display: table-footer-group; }
  .tw-a11y-table__table tr { break-inside: avoid; page-break-inside: avoid; }
  .tw-a11y-table__table thead, 
  .tw-a11y-table__table tbody { break-inside: avoid; page-break-inside: avoid; }

  /* リンクの下線やURL追記を抑止（テーマ次第で） */
  .tw-a11y-table__table a { text-decoration: none; }
}

/* ========== 📱Mobile enhancements ===============
　　　　　　　モバイル最適化　2025.08.11
　　　　　横スクロール＋見出しの“置き去り”防止
=============================================== */

/* 横スクロールを滑らかに＆はみ出し対策 */
.tw-a11y-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 内容が潰れすぎないよう、最低幅の目安（列数に応じて調整可） */
.tw-a11y-table__table {
  min-width: 560px; /* 4〜5列ならこのくらい。列が多いときは 720px などに */
}

/* 単語の折り返しバランス（英数が長い時に縦に伸びすぎない） */
.tw-a11y-table__table th,
.tw-a11y-table__table td {
  word-break: break-word; /* 日本語は自然に、英数は適度に折れる */
}

/* 640px以下：ヘッダーを“固定”して、スクロール中も見えるように */
@media (max-width: 640px) {
  .tw-a11y-table__table thead th {
    position: sticky;
    top: 0;
    z-index: 2;              /* 本文セルより手前に */
    /* 背景が透けるのを防ぐ（テーマ色に合わせてOK） */
    background: var(--tw-head-bg);
    /* 下にうっすら影で段差感（任意） */
    box-shadow: 0 2px 0 rgba(0,0,0,.06);
  }

  /* 左端の行見出しも固定（横スクロールで置き去り防止） */
  .tw-a11y-table__table th[scope="row"] {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #fff; /* 透け防止。ダーク系テーマなら調整 */
  }

  /* モバイルでは少し詰める */
  .tw-a11y-table__table th,
  .tw-a11y-table__table td {
    padding: .55rem .7rem;
  }
}

/* スクロールの「気づき」用フェード（右端に薄いグラデ） */
figure.tw-a11y-table { position: relative; }
figure.tw-a11y-table::after{
  content:"";
  position:absolute; top:0; right:0; bottom:0; width:24px;
  pointer-events:none;
  background: linear-gradient(to left, rgba(255,255,255,.95), rgba(255,255,255,0));
}
/* ダーク背景なら ↑の白をテーマ色に調整 */

/* 左の行見出し（sticky）の境界を少し強調（モバイル時） */
@media (max-width: 640px){
  .tw-a11y-table__table th[scope="row"]{
    box-shadow: 2px 0 0 rgba(0,0,0,.06); /* 右境界の疑似線 */
    border-right: 1px solid var(--tw-grid);
  }
}

/* すごく狭い画面での読みやすさ */
@media (max-width: 360px){
  .tw-a11y-table__table { font-size: 0.95rem; }
  .tw-a11y-table__table th, .tw-a11y-table__table td{ padding: .5rem .6rem; }
}

/* thead 自体の黒線・影を無効化（ヘッダーON時の太線対策） */
figure.wp-block-table.tw-a11y-table > table.tw-a11y-table__table thead{
  border-bottom: 0;
  border-block-end: 0; /* 論理プロパティ対策 */
  box-shadow: none;
}

/* 見出しの下線は th 側で淡色に付ける */
figure.wp-block-table.tw-a11y-table > table.tw-a11y-table__table thead th{
  border-bottom: 2px solid var(--tw-table-outline);
}

/* thead直後の最初の行が太線化されるテーマ対策（上線を薄く） */
figure.wp-block-table.tw-a11y-table > table.tw-a11y-table__table thead + tbody tr:first-child > th,
figure.wp-block-table.tw-a11y-table > table.tw-a11y-table__table thead + tbody tr:first-child > td{
  border-top: 1px solid var(--tw-grid);
}

/* 念のため：疑似要素で線を引くテーマ用 */
figure.wp-block-table.tw-a11y-table > table.tw-a11y-table__table thead::after{
  content: none;
}

/* 注記（tfoot）を本文と少し差別化 */
.tw-a11y-table__table tfoot td{
  border-top: 2px solid var(--tw-grid);
  font-size: 0.95em;
  color: #555;
  background: #fff; /* 印刷OFFでも読める */
}

/* 印刷では線をやや濃く */
@media print{
  .tw-a11y-table__table tfoot td{
    border-top: 1px solid #444;
    color: #000;
  }
}

/* a11y-tables: 自動変換スキップされた表の見分け用 2025.08.13*/
/* === Front: a11y skip の可視化は完全OFF（公開側どなたでも） === */
html body table.tw-a11y-skip {
  outline: none !important;
  position: static !important;
}
html body table.tw-a11y-skip::before,
html body table.tw-a11y-skip::after {
  content: none !important;
}

/* ========== 🔗用語辞典リンクなど ===============
　　　　　　　リンク最適化　2025.08.11
============================================= */

/* 基本リンクの読みやすさ */
.tw-link{
  text-decoration: underline;
  text-underline-offset: .15em;
  text-decoration-thickness: 1.5px;
}

/* フォーカス見やすく（キーボード操作向け） */
.tw-link:focus-visible{
  outline: 2px solid var(--tw-table-outline);
  outline-offset: 2px;
  border-radius: 2px;
}

/* 外部リンクアイコン（文字ベース） */
.tw-link.is-external::after{
  content: "↗";
  font-size: .85em;
  margin-left: .25em;
  vertical-align: 0;
}

/* 表内のリンクは行間に合わせて少しだけ詰める（任意） */
.tw-a11y-table__table a.tw-link{ text-decoration-thickness: 1.25px; }

/* 印刷：外部リンクはURLを併記（背景OFFでも分かる） */
@media print{
  a.tw-link.is-external::after{
    content: " (" attr(href) ")"; /* ↗ の代わりにURLを表示 */
    font-size: 9pt;
    text-decoration: none;
    margin-left: 0.2em;
  }
}

/* 外部リンクに↗付与 */
.entry-content a.tw-link.is-external::after{
  content: "↗";
  font-size: .85em;
  margin-left: .25em;
  vertical-align: 0;
}