@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

/* /css/refueling_station_standards.css */

/* 余白と行間の微調整（本文の可読性） */
.law-section { line-height: 1.9; }
.law-section h2, .law-section h3 { margin-top: 1.6rem; }

/* 簡易コールアウト */
.callout {
  border-left: 4px solid var(--accent, #2b6cb0);
  background: rgba(43,108,176,0.06);
  padding: 0.8rem 1rem;
  border-radius: 6px;
}

/* 表内の箇条書きを詰めて表示 */
ul.compact { margin: 0; padding-left: 1.2em; }
ul.compact li { margin: 0.2em 0; }

/* チェックリストの見栄え（既存に無ければ） */
.checklist li::marker { content: "• "; }

/* exam-notes のアクセント */
.exam-notes {
  background: rgba(255, 193, 7, 0.08);
  border: 1px dashed #f0b429;
  padding: 0.8rem 1rem;
  border-radius: 6px;
}
.exam-notes h3 { margin-top: 0.2rem; }

/* ===== 給油取扱所（このページ専用の軽量スキン） ===== */

/* 可読性の底上げ */
.law-section { line-height: 1.9; }
.law-section h2, .law-section h3 { margin-top: 1.6rem; }

/* 表コンテナ：スマホでは横スクロール */
.table-container.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-container.table-scroll::-webkit-scrollbar {
  height: 8px;
}
.table-container.table-scroll::-webkit-scrollbar-thumb {
  background: #cfd8e3;
  border-radius: 4px;
}

/* ベースの表 */
.styled-table {
  width: 100%;
  border-collapse: separate;     /* separate にして角丸・影を活かす */
  border-spacing: 0;
  background: #fff;
  border: 1px solid #dfe3e6;     /* 外枠 */
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
  font-size: 0.95rem;            /* 文字を少しだけ詰める */
  min-width: 640px;              /* スマホで横スクロールに逃がす */
}

/* 見出し行 */
.styled-table thead th {
  background: #f3f6fa;
  color: #111827;
  font-weight: 700;
  text-align: left;
  border-bottom: 1px solid #dfe3e6; /* 見出し下の罫線 */
  padding: .75rem .9rem;
  white-space: nowrap;
}

/* データセル */
.styled-table tbody td {
  border-bottom: 1px solid #eef2f6; /* 行区切り */
  border-right: 1px solid #eef2f6;  /* 列区切り（最後の列は後で消す） */
  padding: .7rem .9rem;
  vertical-align: top;
}

/* 行の縞模様（視線誘導） */
.styled-table tbody tr:nth-child(odd) {
  background: #fafbfc;
}

/* 末尾の線調整：角丸を活かす */
.styled-table thead th:first-child { border-top-left-radius: 8px; }
.styled-table thead th:last-child  { border-top-right-radius: 8px; }
.styled-table tbody tr:last-child td:first-child { border-bottom-left-radius: 8px; }
.styled-table tbody tr:last-child td:last-child  { border-bottom-right-radius: 8px; }
.styled-table tbody td:last-child { border-right: 0; }

/* 1列目（項目名）を固定表示できるように */
.sticky-first-col .sticky {
  position: sticky;
  left: 0;
  background: #fff;              /* 背景を塗って下の文字が透けないように */
  z-index: 1;                    /* スクロール時に上に出す */
  box-shadow: 1px 0 0 #dfe3e6;   /* 固定列の右端に境界線風の影 */
}

/* 表内の箇条書きをコンパクトに */
.styled-table ul.compact { margin: 0; padding-left: 1.1em; }
.styled-table ul.compact li { margin: .2em 0; }

/* 注意枠（定義・頻出ポイント用） */
.callout {
  border-left: 4px solid #2b6cb0;
  background: rgba(43,108,176,.06);
  padding: .8rem 1rem;
  border-radius: 6px;
}
.exam-notes {
  background: rgba(255,193,7,.08);
  border: 1px dashed #f0b429;
  padding: .8rem 1rem;
  border-radius: 6px;
}


/* === モバイルのフォントブースト抑制（iOS/Safari対策） === */
html, body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 表の基準文字サイズを強制（上書き用に強めのセレクタ） */
.table-container .styled-table,
.table-container .styled-table thead th,
.table-container .styled-table tbody td,
.table-container .styled-table tbody th {
  font-size: 0.95rem;
  line-height: 1.6;
}

/* モバイルで少しだけ縮める（※巨大化の逆補正） */
@media (max-width: 480px) {
  .table-container .styled-table,
  .table-container .styled-table thead th,
  .table-container .styled-table tbody td,
  .table-container .styled-table tbody th {
    font-size: 0.9rem;
  }
  .styled-table thead th,
  .styled-table tbody td,
  .styled-table tbody th {
    padding: .6rem .7rem;
  }
}

/* === 列幅を固定してブースト誘発を防止（table-layout: fixed） === */
.styled-table.table-fixed {
  table-layout: fixed;   /* ★これが効きます */
}

/* 長文セルの折返し（固定レイアウト時の必須） */
.styled-table.table-fixed td,
.styled-table.table-fixed th {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* この2つの表は 1列目：28% / 2列目：72% で見やすく */
.styled-table--use-cols col:first-child { width: 28%; }
.styled-table--use-cols col:last-child  { width: 72%; }

/* 1列目 sticky の背景が縞に負けないよう再塗り */
.sticky-first-col .sticky {
  background: #fff;
}


/* 表まわりの間隔を確保 */
.table-container { 
  margin-bottom: 1.2rem;         /* 表の下に余白 */
}

/* クリーム色の“ひっかけ注意”ボックスの外側余白 */
.exam-notes { 
  margin-top: 1.2rem;            /* 上に余白 */
}

/* 直後が exam-notes のときは少し広めに */
.table-container + .exam-notes {
  margin-top: 1.4rem;
}

/* モバイルでは詰まりやすいので少し広げる */
@media (max-width: 480px) {
  .table-container { margin-bottom: 1.4rem; }
  .table-container + .exam-notes { margin-top: 1.6rem; }
}