/* 配信実績（ウェビナー運用 → 配信実績）の表示調整。
   汎用の .ig-table には手を入れず、この画面の表だけに効かせる
   （参加者管理など他画面の表を巻き込まないため）。 */

/* 表に高さの上限を与え、見出し行を固定する。
   ★.ig-table-wrap は overflow-x:auto でスクロールコンテナになるので、見出しの
     sticky はこのコンテナ基準で効く。縦の高さを与えないとコンテナ自体が縦スクロール
     せず見出しが固定されないため、max-height とセットで初めて成立する。 */
.wr-scroll {
  max-height: 70vh;
  overflow: auto;
}

/* 補助的な表（流入経路別・配信履歴）はもっと低く抑える。
   ★配信実績はカードの縦積みで、1 枚ずつが画面高いっぱいだと「2 つ同時に見たい」
     ときにホイールを回し続けることになる。主役の月次表だけ高さを残し、
     残りは 1 画面に同居できる高さにする。 */
.wr-scroll-sm { max-height: 320px; }
.wr-scroll-md { max-height: 420px; }

.wr-scroll .ig-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  /* 既定の th 背景は透過しないが、スクロール時に下の行が透けないよう明示する。 */
  background: var(--bg);
  /* ★見出しと本文の境界線は border ではなく影で引く。
     .ig-table は border-collapse: collapse で、collapse の罫線はセルではなく
     テーブルに属するため、sticky で浮いた見出しに追従せず「線だけ置き去りになって
     境界が消える」描画になるブラウザがある（Safari 系）。影は要素自身に付くので
     必ず一緒に動く。border は二重線になるので消す。 */
  border-bottom: none;
  box-shadow: 0 1px 0 var(--border);
}

/* 月の列（各行の先頭セル）を左端に固定する。参加者管理の操作列を右端に固定して
   いるのと同じ考え方で、境目に影を付けて「ここから先は固定列」と分かるようにする。 */
.wr-monthly-wrap .ig-table th:first-child,
.wr-monthly-wrap .ig-table td:first-child {
  position: sticky;
  left: 0;
  background: var(--surface);
  box-shadow: 8px 0 8px -8px rgba(0, 0, 0, 0.18);
}

.wr-monthly-wrap .ig-table td:first-child {
  z-index: 1;
}

/* 見出し行と月列が交差するセルは、どちらより手前に置く。
   影は「右（固定列の境目）」と「下（見出しの境界線）」の両方が必要なので、
   上の 2 つのルールに勝つこのセレクタで明示的に二重指定する。 */
.wr-monthly-wrap .ig-table th:first-child {
  background: var(--bg);
  z-index: 3;
  border-bottom: none;
  box-shadow:
    8px 0 8px -8px rgba(0, 0, 0, 0.18),
    0 1px 0 var(--border);
}

/* 申込も売上も広告費も無い月。
   ★opacity で薄くしない: opacity は行全体に効くため固定した月列の背景まで
     半透明になり、横スクロール時に下の列が透けて重なって見える。
     文字色だけを落として背景は不透明のまま残す。 */
.wr-monthly-wrap .wr-row-empty td {
  color: var(--text-sub);
}