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

/* /css/self_refueling_station_standards.css
   セルフ型給油取扱所（基礎知識ページ専用スキン）
   - 昨日の refueling_station_standards.css とトーン統一
   - 表：横スクロール対応、1列目 sticky、table-fixed
   - ひっかけ注意（exam-notes）、コールアウト（callout）
   - 品目の色識別バッジ（赤/黄/緑/青）
*/

/* ================== 基本トーン/変数 ================== */
:root {
  --accent: #2b6cb0;           /* ブルー基調（既存と合わせる） */
  --accent-weak: rgba(43,108,176,.06);
  --border: #dfe3e6;
  --row: #fafbfc;
  --head: #f3f6fa;

  /* 品目色（識別） */
  --fuel-regular: #e11d48;     /* レギュラー（赤） */
  --fuel-premium: #eab308;     /* ハイオク（黄） */
  --fuel-diesel:  #16a34a;     /* 軽油（緑） */
  --fuel-kerosene:#2563eb;     /* 灯油（青） */
}

/* ================== 版面/見出し ================== */
.law-section { line-height: 1.9; }
.law-section h2, .law-section h3 { margin-top: 1.6rem; }

/* ================== コールアウト/注意枠 ================== */
.callout {
  border-left: 4px solid var(--accent);
  background: var(--accent-weak);
  padding: .8rem 1rem;
  border-radius: 6px;
}

.exam-notes {
  background: rgba(255,193,7,.08);
  border: 1px dashed #f0b429;
  padding: .8rem 1rem;
  border-radius: 6px;
  margin-top: 1.2rem;
}
.exam-notes h3 { margin-top: .2rem; }

/* ================== 表（横スクロール/固定レイアウト） ================== */
.table-container { margin-bottom: 1.2rem; }
.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;
  border-spacing: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
  font-size: .95rem;
  min-width: 640px;           /* スマホは横スクロールへ退避 */
}
.styled-table thead th {
  background: var(--head);
  color: #111827;
  font-weight: 700;
  text-align: left;
  border-bottom: 1px solid var(--border);
  padding: .75rem .9rem;
  white-space: nowrap;
}
.styled-table tbody td, .styled-table tbody th {
  border-bottom: 1px solid #eef2f6;
  border-right: 1px solid #eef2f6;
  padding: .7rem .9rem;
  vertical-align: top;
}
.styled-table tbody tr:nth-child(odd) { background: var(--row); }
.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; }

/* 角丸の見栄えを強調（必要に応じて） */
/* .styled-table { overflow: hidden; } */

/* 固定レイアウト＋折返し */
.styled-table.table-fixed { table-layout: fixed; }
.styled-table.table-fixed td,
.styled-table.table-fixed th {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* 1列目 sticky（要：.sticky-first-col .sticky をマーク） */
.sticky-first-col .sticky {
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 1;                 /* ヘッダと干渉時は 2 に上げる */
  box-shadow: 1px 0 0 var(--border);
}
/* 縞行と調和させたい場合 */
/* .styled-table tbody tr:nth-child(odd) .sticky { background: var(--row); } */

/* 利用列幅のテンプレ（28/72） */
.styled-table--use-cols col:first-child { width: 28%; }
.styled-table--use-cols col:last-child  { width: 72%; }

/* ================== リスト（詰め表示） ================== */
ul.compact { margin: 0; padding-left: 1.1em; }
ul.compact li { margin: .2em 0; }

/* ================== 品目バッジ（誤給油防止の色識別） ================== */
.badges { display: flex; flex-wrap: wrap; gap: .5rem .6rem; }
.badge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .85rem; line-height: 1;
  padding: .35rem .55rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: #fff;
  white-space: nowrap;
}
.badge .dot {
  width: .6rem; height: .6rem; border-radius: 50%;
  display: inline-block; flex: 0 0 .6rem;
}

/* カラーバリエーション */
.badge--regular { color: var(--fuel-regular); }
.badge--premium { color: var(--fuel-premium); }
.badge--diesel  { color: var(--fuel-diesel); }
.badge--kerosene{ color: var(--fuel-kerosene); }

.badge--regular .dot { background: var(--fuel-regular); }
.badge--premium .dot { background: var(--fuel-premium); }
.badge--diesel  .dot { background: var(--fuel-diesel); }
.badge--kerosene .dot{ background: var(--fuel-kerosene); }

/* ================== 制御卓/監視設備ブロック ================== */
.control-block {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .9rem 1rem;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
  margin: 1rem 0;
}
.control-block h4 { margin: 0 0 .4rem; font-weight: 700; }
.control-block .meta { font-size: .9rem; color: #4b5563; }

/* ================== 可読性/アクセシビリティ ================== */
/* 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: .95rem; line-height: 1.6;
}

/* フォーカス可視（キーボード） */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 低視力配慮：リンクのホバー/フォーカス */
a:hover { text-decoration: underline; }

/* 動きに配慮 */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* ================== モバイル最適化 ================== */
@media (max-width: 480px) {
  .table-container { margin-bottom: 1.4rem; }
  .exam-notes { margin-top: 1.4rem; }

  .table-container .styled-table,
  .table-container .styled-table thead th,
  .table-container .styled-table tbody td,
  .table-container .styled-table tbody th { font-size: .9rem; }

  .styled-table thead th,
  .styled-table tbody td,
  .styled-table tbody th { padding: .6rem .7rem; }
}

/* ================== 小UIユーティリティ ================== */
.muted { color: #6b7280; }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.right { text-align: right; }


/* ===== ページ先頭の余白を圧縮（basics > 1つ目のセクションだけ） ===== */
.basics .site-main {
  padding-top: 0;    /* 既存で付いていれば打ち消し */
  margin-top: 0;
}

/* 1つ目の law-section 自体の間隔を圧縮 */
.basics .site-main > .law-section:first-of-type {
  margin-top: .25rem;     /* 必要なら 0 にしてもOK */
}

/* 1つ目の h2 の上マージンだけ小さく（既存の 1.6rem を上書き） */
.basics .site-main > .law-section:first-of-type h2 {
  margin-top: .25rem;
}

/* スマホはさらに詰める */
@media (max-width: 480px) {
  .basics .site-main > .law-section:first-of-type { margin-top: .15rem; }
  .basics .site-main > .law-section:first-of-type h2 { margin-top: .15rem; }
}

/* --- 要件テーブルを“少し細く・詰めて”表示する専用バリアント --- */
.styled-table.is-compact {
  font-size: 0.9rem;           /* 0.95→0.9 */
  min-width: 560px;            /* 640→560で横スクロール閾値を下げる */
}
.styled-table.is-compact thead th,
.styled-table.is-compact tbody td,
.styled-table.is-compact tbody th {
  padding: .55rem .7rem;       /* 余白を 2割ほど圧縮 */
  line-height: 1.55;
}

/* 列幅：1列目をさらに細く（22%/78%） */
.styled-table--cols-22-78 col:first-child { width: 22%; }
.styled-table--cols-22-78 col:last-child  { width: 78%; }

/* モバイルは読みやすさ優先でわずかに戻す */
@media (max-width: 480px) {
  .styled-table.is-compact { font-size: 0.88rem; }
  .styled-table.is-compact thead th,
  .styled-table.is-compact tbody td,
  .styled-table.is-compact tbody th { padding: .5rem .65rem; }
}

/* --- 品目×色：小さめ3列テーブル用の微調整 --- */
.legend-table.is-compact {
  min-width: 520px;                /* さらに小さくしても読みやすい */
}
.legend-table td:last-child,
.legend-table th:last-child {
  text-align: center;
}

/* 色チップ（テーブル内表示用） */
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .9rem; line-height: 1;
  padding: .35rem .6rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.chip .dot {
  width: .65rem; height: .65rem; border-radius: 50%;
  display: inline-block; flex: 0 0 .65rem;
}

/* 既存の color 変数を流用 */
.chip--regular  { color: var(--fuel-regular); }
.chip--premium  { color: var(--fuel-premium); }
.chip--diesel   { color: var(--fuel-diesel); }
.chip--kerosene { color: var(--fuel-kerosene); }

.chip--regular  .dot { background: var(--fuel-regular); }
.chip--premium  .dot { background: var(--fuel-premium); }
.chip--diesel   .dot { background: var(--fuel-diesel); }
.chip--kerosene .dot { background: var(--fuel-kerosene); }

/* バッジ帯は見出し直下なら少し詰める */
.legend-badges { margin-top: .6rem; }

/* モバイルはテーブルのパディングをやや詰める */
@media (max-width: 480px) {
  .legend-table.is-compact { font-size: .88rem; }
  .legend-table.is-compact thead th,
  .legend-table.is-compact tbody td { padding: .5rem .6rem; }
}

/* 制御卓テーブル：左列の項目を小さなピルで強調 */
.styled-table .sticky {
  font-weight: 700;
}
.styled-table .sticky::before {
  content: "";
  display: inline-block;
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: var(--accent);
  margin-right: .45rem;
  vertical-align: middle;
}

/* セクション間の上余白をゆったり：スマホ優先 */
.law-section + .law-section { margin-top: 2.4rem; }
.quiz-section { margin-top: 2.8rem; }

/* デスクトップでさらに少し広げる */
@media (min-width: 768px) {
  .law-section + .law-section { margin-top: 3.2rem; }
  .quiz-section { margin-top: 3.2rem; }
}

/* 見出し直前の無駄な空きは抑える（二重マージン防止） */
.law-section > h2,
.law-section > h3,
.quiz-section > h2 { margin-top: 0; }

/* （任意）セクション末のノートと次セクションがくっつくのを防ぐ */
.exam-notes { margin-bottom: 1.6rem; }