/* layout-table-row-images.css */

@import url(styles.css);

/* テーブル全体の設定：横並び一列の画像群 */
.table-row-images {
  border-collapse: separate;
  border-spacing: 4px; /* 画像間の距離と枠線の太さを統一 */
  width: auto; /* 全体幅は画像の合計幅に応じて可変 */
  margin: 0 auto;
  background-color: var(--cl-light);
}

/* セル設定（枠線） */
.table-row-images td {
  border: 1px solid var(--cl-light); /* 枠線の太さ */
  padding: 0;
  vertical-align: top;
  box-sizing: border-box;
  background-color: var(--cl-light);
}

/* 画像設定（比率維持・欠けなし） */
.table-row-images img {
  display: block;
  width: 100%;
  height: auto; /* HTML側で height を指定する場合はここを上書き */
  object-fit: contain; /* 欠けずに比率維持 */
  box-sizing: border-box;
}
/************************************************/
/* サイドバーへのはみ出し許可用 */
.table-row-images-wide {
  border-collapse: separate;
  border-spacing: 8px;
  position: relative;
  margin: 0.5em auto 0.5em 0.5em;
  z-index: 10 !important;
  background-color: var(--cl-light);
}

.table-row-images-wide td {
  margin: 0;
  padding: 0;
  border: 1px solid var(--cl-light);
  background-color: var(--cl-light);
  box-sizing: border-box;
}
.table-row-images-wide img {
  display: block;
}
.table-row-images-wide.bg-middle{
  background-color: var(--cl-middle);
}
.table-row-images-wide.bg-middle td{
  border: 1px solid var(--cl-middle);
  background-color: var(--cl-middle);
}
  /* ( Copilotによる解説 )

  画像の底辺と td の下枠線の間に隙間ができる現象は、CSSの描画仕様とHTML要素のデフォルト挙動によるものです。
  以下に原因と対策を整理してお届けします。

  ✅ 原因：画像の「ベースライン配置」と「行内要素の余白」
  1. <img> はデフォルトで inline 要素として扱われる
  - そのため、テキストのベースラインに合わせて配置される
  - 結果として、画像の下に“行間”のような余白が生まれる
  2. この余白は、td の下枠線との間に隙間として現れる
  - 枠線と画像の間に「見えない行間」があるため、枠線が太く見える／隙間が目立つ

  ✅ 対策：画像を display: block に変更する
  */