/* ミニショベル一覧のCSS。
   ★ 姉妹サイトから流用していない ★ 過去に流用ファイルの痕跡が本番に出た事故があるため、
     このサイトのために書き下ろしている。色の考え方だけ姉妹サイトと揃えてある。 */

:root{
  --bg:#f4f6f9;
  --panel:#ffffff;
  --ink:#1b2430;
  --ink-weak:#5b6876;
  --line:#d7dee7;
  --line-strong:#b9c4d1;
  --accent:#1a2a4a;       /* 姉妹サイト共通の紺 */
  --accent-ink:#ffffff;
  --row-alt:#f7f9fc;
  --mark:#fff6d8;         /* 電動の行 */
  --mark-line:#e0c25f;
}
:root[data-theme="dark"]{
  --bg:#1a2a4a;
  --panel:#22344f;
  --ink:#e8edf4;
  --ink-weak:#a7b6c8;
  --line:#38506f;
  --line-strong:#4d688a;
  --accent:#e8edf4;
  --accent-ink:#1a2a4a;
  --row-alt:#1e3049;
  --mark:#3c3a22;
  --mark-line:#8a7a35;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",system-ui,sans-serif;
  font-size:15px; line-height:1.75;
  -webkit-text-size-adjust:100%;
}
.wrap{max-width:980px; margin:0 auto; padding:16px 16px 64px}

a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--line-strong); outline-offset:2px}

.home-link{display:inline-block; font-size:13px; color:var(--ink-weak); text-decoration:none; margin-bottom:12px}
.home-link:hover{text-decoration:underline}

.page-head{margin:0 0 18px}
.ph-body{min-width:0}
h1{font-size:23px; line-height:1.4; margin:2px 0 4px}
.lead{margin:0; color:var(--ink-weak); font-size:14px}

h2{font-size:17px; margin:28px 0 10px; padding-bottom:6px; border-bottom:2px solid var(--line-strong)}
h3{font-size:15px; margin:20px 0 6px}

.notice{
  background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--line-strong);
  padding:12px 14px; margin:14px 0; font-size:13.5px; border-radius:3px;
}
.notice strong{font-weight:700}

.terms{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.terms li a{
  display:inline-block; padding:6px 12px; background:var(--panel);
  border:1px solid var(--line); border-radius:3px; font-size:13.5px; text-decoration:none;
}
.terms li a:hover{border-color:var(--line-strong)}

.card{background:var(--panel); border:1px solid var(--line); border-radius:3px; padding:12px 14px; margin:0 0 12px}
.filters{display:flex; flex-wrap:wrap; gap:14px 20px}
.fgroup{min-width:0}
.fgroup > span{display:block; font-size:12px; color:var(--ink-weak); margin-bottom:3px}
.fgroup .opts{display:flex; flex-wrap:wrap; gap:4px}
.fgroup button{
  font:inherit; font-size:13px; padding:3px 10px; cursor:pointer;
  background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:3px;
}
.fgroup button[aria-pressed="true"]{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.count{margin:10px 0 0; font-size:13px; color:var(--ink-weak)}

.legend{display:flex; gap:8px; align-items:flex-start; font-size:13px; color:var(--ink-weak); margin:0 0 10px}
.legend-swatch{flex:0 0 auto; width:16px; height:16px; margin-top:3px; background:var(--mark); border:1px solid var(--mark-line)}

.table-scroll{overflow-x:auto; border:1px solid var(--line); border-radius:3px; background:var(--panel)}
table{border-collapse:collapse; width:100%; font-size:13.5px}
thead th{
  background:var(--accent); color:var(--accent-ink); font-weight:700; text-align:left;
  padding:8px 10px; white-space:nowrap; font-size:12.5px;
}
tbody td{padding:8px 10px; border-top:1px solid var(--line); vertical-align:top}
tbody tr:nth-child(even){background:var(--row-alt)}
tbody tr.is-electric{background:var(--mark)}
td.num{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
td.maker{white-space:nowrap; color:var(--ink-weak)}
.model{font-weight:700}
.tagline{margin-top:2px}
.tag{
  display:inline-block; font-size:11px; line-height:1.6; padding:0 6px; margin:2px 4px 0 0;
  border:1px solid var(--line-strong); border-radius:2px; color:var(--ink-weak); white-space:nowrap;
}
.src a{font-size:12px; color:var(--ink-weak)}
.dash{color:var(--ink-weak)}

.theme-switch{display:flex; gap:6px; margin:28px 0 0}
.theme-switch button{
  font:inherit; font-size:13px; padding:4px 12px; cursor:pointer;
  background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:3px;
}
.theme-switch button[aria-pressed="true"]{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}

footer{margin-top:28px; padding-top:14px; border-top:1px solid var(--line); font-size:13px}
.brand-line{color:var(--ink-weak); text-decoration:none}
.brand-line:hover{text-decoration:underline}

.prose p{margin:10px 0}
.prose ul{margin:10px 0; padding-left:1.3em}
.prose li{margin:4px 0}
.prose table{background:var(--panel); border:1px solid var(--line)}
.prose th,.prose td{padding:7px 10px; border-top:1px solid var(--line); text-align:left; vertical-align:top}
.prose thead th{background:var(--accent); color:var(--accent-ink)}

/* 狭い画面：見出し行を消して、1台ぶんをカードとして縦に積む。
   ★ 横スクロールで数字を探すより速い。ichirinsha と同じ考え方 ★ */
@media (max-width:700px){
  body{font-size:14.5px}
  .table-scroll{border:0; background:none; overflow-x:visible}
  table,thead,tbody,tr,td{display:block; width:100%}
  thead{display:none}
  tbody tr{
    background:var(--panel); border:1px solid var(--line); border-radius:3px;
    margin:0 0 10px; padding:4px 2px;
  }
  tbody tr:nth-child(even){background:var(--panel)}
  tbody tr.is-electric{background:var(--mark)}
  tbody td{border-top:0; padding:3px 12px; display:flex; gap:10px}
  tbody td::before{
    content:attr(data-label); flex:0 0 7.5em; color:var(--ink-weak); font-size:12px; padding-top:2px;
  }
  tbody td.model-cell{display:block}
  tbody td.model-cell::before{display:none}
  td.num{text-align:left}
}