/* =========================================================
   汎用（全テーブル共通）スタイルシート
   MkDocs Material / KaTeX / MJX / no-scroll-tables 対応
   ========================================================= */

/* =========================================================
   グローバルトークン
   ========================================================= */
:root {
  --math-box-bg:     #f8f8f8;
  --math-box-border: #aaa;
  --md-content-width: 88rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --math-box-bg:     #2b2b2b;
    --math-box-border: #666;
  }
}

/* =========================================================
   基本レイアウト（no-scrollテーブル）
   ========================================================= */
.md-typeset__table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  margin: 0;
}

.md-typeset table:not([class]) {
  display: table;
  width: 100%;
  max-width: 100%;
  table-layout: fixed;   /* 列幅安定の要 */
  border-collapse: collapse;
}

/* =========================================================
   セル内の折り返し・表示最適化
   ========================================================= */
.md-typeset table th,
.md-typeset table td {
  padding: .5rem .6rem;
  vertical-align: top;

  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
  min-width: 0;
}

/* コード・リンク・バッジ類の折り返し補強 */
.md-typeset table code,
.md-typeset table pre,
.md-typeset table a,
.md-typeset table kbd,
.md-typeset table samp,
.md-typeset table .chip,
.md-typeset table .twemoji {
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
}

/* 画像やSVGをセルに収める */
.md-typeset table img,
.md-typeset table svg {
  max-width: 100%;
  height: auto;
}

/* =========================================================
   枠線 & 見栄え
   ========================================================= */
.md-typeset table,
.md-typeset table th,
.md-typeset table td {
  border: 1px solid var(--math-box-border);
}

.md-typeset table thead th {
  background-color: var(--math-box-bg) !important;
  font-weight: 600;
}

.md-typeset table caption {
  caption-side: top;
  text-align: left;
  font-weight: 600;
  margin-bottom: .4rem;
}

/* =========================================================
   列がくっつかないための調整（重要）
   ========================================================= */
.md-typeset table th + th,
.md-typeset table td + td {
  border-left-width: 2px;   /* 列境界を明確に */
}

/* 2 → 3 列がくっつく問題に強い */
.md-typeset table th:nth-child(2),
.md-typeset table td:nth-child(2) {
  padding-right: 1rem;
}

.md-typeset table th:nth-child(3),
.md-typeset table td:nth-child(3) {
  padding-left: 1rem;
}

/* =========================================================
   数式（KaTeX / MathJax）の折り返し
   ========================================================= */
.katex { white-space: normal; }

.katex-display {
  white-space: normal;
  overflow-x: hidden;
  max-width: 100%;
}

mjx-container[display="true"] {
  overflow-x: hidden !important;
  max-width: 100%;
}
mjx-container mjx-math {
  white-space: normal;
  max-width: 100%;
}

/* =========================================================
   スマホ最適化（768px 以下）
   ========================================================= */
@media (max-width: 768px) {
  .md-typeset table th,
  .md-typeset table td {
    padding: .45rem .5rem;
    letter-spacing: .01em;
  }

  /* くっつき防止のためスマホ側で強めに余白を入れる */
  .md-typeset table th:nth-child(2),
  .md-typeset table td:nth-child(2) {
    padding-right: 1.2rem;
  }
  .md-typeset table th:nth-child(3),
  .md-typeset table td:nth-child(3) {
    padding-left: 1.2rem;
  }
}

/* =========================================================
   印刷最適化
   ========================================================= */
@media print {
  .md-typeset__table { overflow: visible; }
  .md-typeset table { page-break-inside: auto; }
  .md-typeset tr { page-break-inside: avoid; }
}

/* =========================================================
   nowrap 指定用ユーティリティ
   ========================================================= */
.md-typeset table td.no-wrap,
.md-typeset table th.no-wrap {
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}