/* ============================================================
   データ表ページ共通 (data-page.css)

   使うページ: element-chart.html（属性相性表）/ pvp-damage.html（ステータス相殺表）/
               status-ailment.html（状態異常効果一覧）
   3ページに同じ値でコピーされていたページ枠・パネル・ヘッダー余白・注記の code 装飾・
   表の地色をここにまとめた。ほかのページからは読まない。

   ■ 読み込み順
     common.css → gacha_styles.css → data-page.css → ページ固有 <style>
     パネルの内側余白・最大幅などページごとに違う値はページ側に残している。
   ============================================================ */

:root {
  /* 表の地色（属性相性表の元画像から採取。状態異常効果一覧も同じ茶/金トーン） */
  --tbl-head:  #4c3a30;   /* ヘッダー帯（濃茶） */
  --tbl-head2: #5a4536;
  --tbl-label: #f4ecd7;   /* 行ラベル・カードの地色（クリーム） */
}

/* ---- ページの枠 ---- */
.dp-app {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 24px 56px;
}

/* スマホ幅：画面端→パネルを --gutter-panel に揃える（ページ側で上下の余白だけ変えてよい） */
@media (max-width: 600px) {
  .dp-app { padding-left: var(--gutter-panel); padding-right: var(--gutter-panel); }
}

/* ---- サイトヘッダー（見た目は common.css）----
   直後のパネルとの間隔を取るため、common.css の既定より下の余白を広げ margin も足す */
header.site {
  padding: 18px 4px 14px;
  margin-bottom: 14px;
}

/* ---- パネル（内側余白・最大幅はページ側） ---- */
.dp-panel {
  /* 白パネル上では common.css の金色のフォーカス枠が見えないので濃い青にする */
  --focus-ring: var(--sky-btn-d, #2a64c4);
  background: var(--panel);
  border-radius: 22px;
  box-shadow: var(--sh-panel);
  border: 1px solid var(--panel-edge);
  margin: 0 auto;
}

/* ---- 注記の中の code 装飾 ---- */
.dp-note code {
  font-family: var(--f-num);
  background: #eef2fb;
  border-radius: 4px;
  padding: 0 5px;
  color: var(--ink-soft);
}

/* ---- 横スクロールする表の1列目（行見出し）を固定する ----
   セル側に不透明な背景が要る。表に overflow:hidden を付けると表がスクロール容器になり
   sticky が効かなくなるので、角丸の切り抜きは overflow:clip で行う（ページ側） */
.dp-sticky {
  position: sticky;
  left: 0;
  z-index: 2;
}