/* ==========================================
   Gutenberg Table (Front) – Tea theme   茶系スタイル
   ========================================== */

/* 横スクロール（テーブルがはみ出すとき） */
.wp-block-table .table-wrap{
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

/* ベース設定 */
.wp-block-table table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:0.95rem;
  line-height:1.6;
  background:#fff;
  color:#2b221d;

  /* 太め・茶色の枠 */
  border:2px solid #6b4b3e;      /* 外枠：濃い茶 */
  border-radius:10px;
  overflow:hidden; /* 角丸を効かせる */
}

/* キャプション（任意） */
.wp-block-table caption{
  font-weight:600;
  text-align:left;
  padding:.6rem .8rem .3rem;
  color:#4a332a;
}

/* ヘッダー：背景を少し濃いめに、下線も茶系で */
.wp-block-table thead th{
  position:sticky;
  top:0;
  z-index:1;
  background:#e9d8c9;            /* 濃いめの生成り茶 */
  color:#3b2a23;                 /* ヘッダー文字：濃茶 */
  text-align:left;
  font-weight:700;
  border-bottom:2px solid #6b4b3e;
}

/* セル：茶色系の罫線 */
.wp-block-table th,
.wp-block-table td{
  padding:.6rem .85rem;
  border-bottom:1px solid #cdb7ab;   /* 薄茶の罫線 */
  vertical-align:top;
}
.wp-block-table tbody tr:last-child th,
.wp-block-table tbody tr:last-child td{
  border-bottom:none;
}

/* 交互行＆ホバー（見やすさキープ） */
.wp-block-table tbody tr:nth-child(odd){ background:#fbf6f1 }  /* ごく淡い生成り */
.wp-block-table tbody tr:hover{ background:#f6e9dc }           /* ホバー時：やや濃い生成り */

/* フォーカス見やすく（キーボード操作） */
.wp-block-table a:focus-visible{
  outline:2px solid #a56e4c;
  outline-offset:2px;
  border-radius:3px;
}

/* スマホ微調整 */
@media (max-width:640px){
  .wp-block-table table{ font-size:0.92rem }
  .wp-block-table th,
  .wp-block-table td{ padding:.5rem .65rem }
}

/* ダークモード（任意） */
@media (prefers-color-scheme: dark){
  .wp-block-table table{
    background:#1f1a17;
    color:#efe7e1;
    border-color:#7a5c4f;            /* 外枠：茶のまま少し明るめ */
  }
  .wp-block-table thead th{
    background:#2a211d;
    color:#f3ece6;
    border-bottom-color:#7a5c4f;
  }
  .wp-block-table tbody tr:nth-child(odd){ background:#211c19 }
  .wp-block-table tbody tr:hover{ background:#2b241f }
  .wp-block-table th,
  .wp-block-table td{ border-bottom-color:#57463f }
}

/* ================================
   🦕A11Yテーブル（wrapperだけで適用版）
   2025-09-23
================================ */
: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;
}

/* 外枠ボックス（Tableブロックの figure に tw-a11y-table を付けるだけでOK） */
figure.wp-block-table.tw-a11y-table{
  border:3px solid var(--tw-table-outline);
  border-radius:var(--tw-radius);
  padding:10px 12px;
  background:#fff;
  overflow-x:auto; /* 横スクロール保険 */
}

/* テーブル本体（内側 table にクラス不要） */
figure.wp-block-table.tw-a11y-table > table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  overflow:hidden; /* 角丸の見た目を保つ */
}

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

/* thead を淡ベージュ＋下線やや強め */
figure.wp-block-table.tw-a11y-table thead th{
  background:var(--tw-head-bg);
  font-weight:600;
  border-bottom:2px solid var(--tw-table-outline);
}

/* 行見出し（左端 th[scope=row]）は強め */
figure.wp-block-table.tw-a11y-table th[scope="row"]{
  font-weight:700;
  white-space:nowrap;
}

/* 余計な濃い線の対策（最左列） */
figure.wp-block-table.tw-a11y-table thead th:first-child,
figure.wp-block-table.tw-a11y-table tbody tr th:first-child{
  border-left-width:1px;
}

/* 一部テーマが thead 直下に太線を入れる場合のリセット */
figure.wp-block-table.tw-a11y-table thead{
  border-bottom:none;
}
figure.wp-block-table.tw-a11y-table thead + tbody tr:first-child :is(th,td){
  border-top:1px solid var(--tw-grid);
}

/* モバイル微調整 */
@media (max-width:480px){
  figure.wp-block-table.tw-a11y-table :is(th,td){
    padding:.6rem .75rem;
  }
}

/*================================================
 * テーブルの可読性
 *PHP側で figure.wp-block-table に tw-a11y-table を付ける想定
 ================================================*/
figure.wp-block-table.tw-a11y-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
figure.wp-block-table.tw-a11y-table table { border-collapse: collapse; width: 100%; }
figure.wp-block-table.tw-a11y-table caption {
  caption-side: top; text-align: left; font-weight: 600; margin-bottom: .5rem;
}
figure.wp-block-table.tw-a11y-table th,
figure.wp-block-table.tw-a11y-table td { padding: .5rem .75rem; border: 1px solid #e5e7eb; }
figure.wp-block-table.tw-a11y-table thead th { background: #f8fafc; font-weight: 700; }
@media (prefers-color-scheme: dark) {
  figure.wp-block-table.tw-a11y-table th,
  figure.wp-block-table.tw-a11y-table td { border-color: #374151; }
  figure.wp-block-table.tw-a11y-table thead th { background: #111827; }
}