/*!
 * Tea World - Accessibility Debug (Editor/Admin Only)
 * --------------------------------------------------
 * このCSSはアクセシビリティ確認・デバッグ専用です。
 * 本番フロントでは使用しません。
 *
 * ■ 用途
 * - スクリーンリーダー用テキストの可視化（.sr-only など）
 * - 見出し構造・ランドマークの確認
 * - フォーカス状態の強調表示
 * - a11y実装の検証補助
 *
 * ■ 読み込み範囲
 * - WordPress 管理画面（editor/admin）のみ
 * - フロントでは読み込まないこと
 *
 * ■ 注意
 * - 本番CSS（accessibility.css）とは完全に分離する
 * - 表示を壊すためのCSS（意図的な強調・可視化）を含む
 * - Autoptimize等の最適化対象に含めないこと
 *
 * Author: Tea World / Ronald
 * 2025-08-13
*/

/* === Editor only: a11y 可視化（このファイルが読まれているかのマーカー） === */
.editor-styles-wrapper::after{
  content:"A11Y-DEBUG CSS LOADED";
  position: fixed; right: 8px; bottom: 8px;
  background: #000; color:#fff; font-size:12px;
  padding: 2px 6px; border-radius: 4px; z-index: 9999;
  opacity: .6;
}

/* thead がある表 → theadを枠＋ラベル */
.editor-styles-wrapper table thead{
  position: relative;
  outline: 3px dashed #cc6666;
  outline-offset: 4px;
}
.editor-styles-wrapper table thead:hover::after{
  content: "theadありのため自動変換スキップ";
  position: absolute; left: 0; top: -0.6rem; transform: translateY(-100%);
  background: rgba(0,0,0,.85); color:#fff;
  font-size: 12px; line-height: 1.4; padding:.3rem .5rem;
  border-radius:.35rem; white-space: nowrap; z-index:2; pointer-events:none;
}

/* rowspan / colspan を含むセル → 該当セルを枠＋ラベル */
.editor-styles-wrapper table td[rowspan],
.editor-styles-wrapper table th[rowspan],
.editor-styles-wrapper table td[colspan],
.editor-styles-wrapper table th[colspan]{
  position: relative;
  outline: 2px dashed #cc6666;
}
.editor-styles-wrapper table td[rowspan]:hover::after,
.editor-styles-wrapper table th[rowspan]:hover::after,
.editor-styles-wrapper table td[colspan]:hover::after,
.editor-styles-wrapper table th[colspan]:hover::after{
  content: "rowspan/colspanを含むため自動変換スキップ";
  position: absolute; left: 0; top: -0.6rem; transform: translateY(-100%);
  background: rgba(0,0,0,.85); color:#fff;
  font-size: 12px; line-height: 1.4; padding:.3rem .5rem;
  border-radius:.35rem; white-space: nowrap; z-index:2; pointer-events:none;
}

/* thead無しだが先頭行が<th> → 先頭<th>だけ枠＋ラベル */
.editor-styles-wrapper table tbody > tr:first-child > th:first-child{
  position: relative;
  outline: 2px dashed #cc6666;
}
.editor-styles-wrapper table tbody > tr:first-child > th:first-child:hover::after{
  content: "先頭行が<th>のため自動変換スキップ";
  position: absolute; left: 0; top: -0.6rem; transform: translateY(-100%);
  background: rgba(0,0,0,.85); color:#fff;
  font-size: 12px; line-height: 1.4; padding:.3rem .5rem;
  border-radius:.35rem; white-space: nowrap; z-index:2; pointer-events:none;
}