/* 物置 サイズくらべ の見た目
   ============================================================
   ★ 色の変数名は姉妹サイト（hub / babycar）と同じにしてあります ★
     片方だけ直して食い違う事故を防ぐため、名前を揃えています。
   ★ 地味で堅実に ★ 装飾の紋章は置きません。白地・紺 #14507d・文字。
   ============================================================ */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --card: #ffffff;
  --card-2: #f4f6f8;
  --ink: #1a1d21;
  --head: #14171a;
  --body-text: #33383d;
  --sub: #61686f;
  --line: #e3e6ea;
  --line-strong: #c9cfd6;
  --accent: #14507d;
  --accent-deep: #0e3c60;
  --accent-soft: #e8eff5;
  --on-accent: #ffffff;
  --warn: #8a5a00;
  --radius: 4px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #15181c; --card: #1d2126; --card-2: #23282e;
    --ink: #f2f4f6; --head: #ffffff; --body-text: #dfe3e8; --sub: #a5adb5;
    --line: #2e343b; --line-strong: #3d454e;
    --accent: #8dbde0; --accent-deep: #b0d5ef; --accent-soft: #23303c;
    --on-accent: #15181c; --warn: #e0b055;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #15181c; --card: #1d2126; --card-2: #23282e;
  --ink: #f2f4f6; --head: #ffffff; --body-text: #dfe3e8; --sub: #a5adb5;
  --line: #2e343b; --line-strong: #3d454e;
  --accent: #8dbde0; --accent-deep: #b0d5ef; --accent-soft: #23303c;
  --on-accent: #15181c; --warn: #e0b055;
}

* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--body-text);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;
  line-height:1.75; font-size:16px }
.wrap { max-width:1000px; margin:0 auto; padding:0 16px }
header { border-bottom:3px solid var(--accent); padding:0 0 16px }
.banner { display:block; width:100%; height:clamp(140px,22vw,240px);
  object-fit:cover; object-position:center 52%; margin:0 0 6px }
.credit { margin:0 0 10px; font-size:.72rem; color:var(--sub); text-align:right }
h1 { font-size:1.35rem; margin:0 0 4px; color:var(--head) }
h2 { font-size:1.1rem; margin:32px 0 10px; padding-left:10px;
  border-left:5px solid var(--accent); color:var(--head) }
.lead { color:var(--sub); font-size:.92rem; margin:0 }
.notice { background:var(--accent-soft); border:1px solid var(--line-strong);
  border-radius:var(--radius); padding:12px 14px; margin:18px 0; font-size:.9rem }
.notice p { margin:.35em 0 }
.notice strong { color:var(--accent-deep) }
table { border-collapse:collapse; width:100%; font-size:.86rem }
.scroll { overflow-x:auto }
th,td { border:1px solid var(--line); padding:6px 9px; text-align:left; vertical-align:top }
th { background:var(--card-2); white-space:nowrap; color:var(--head) }
.count { font-size:.85rem; color:var(--sub); margin:6px 0 14px }
.card { border:1px solid var(--line); border-radius:var(--radius);
  background:var(--card); padding:14px 16px; margin:0 0 12px }
.card h3 { margin:0; font-size:1.02rem; color:var(--head) }
.maker { display:inline-block; font-size:.75rem; background:var(--accent);
  color:var(--on-accent); border-radius:3px; padding:1px 7px; margin-right:7px; vertical-align:2px }
.sum { margin:6px 0 10px; font-size:.93rem }
.none { color:var(--warn) }
details { margin-top:10px; font-size:.87rem }
summary { cursor:pointer; color:var(--accent) }
a { color:var(--accent) }
.shops { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:12px 0 0;
  padding-top:10px; border-top:1px dotted var(--line); font-size:.86rem }
.shops-label { color:var(--sub) }
.shops a { display:inline-block; padding:5px 12px; border:1px solid var(--accent);
  border-radius:3px; text-decoration:none }
.shops-note { flex-basis:100%; color:var(--sub); font-size:.76rem }
footer { margin:44px 0 60px; padding-top:16px; border-top:1px solid var(--line);
  font-size:.83rem; color:var(--sub) }
.theme-switch { margin-top:14px; display:inline-flex }
.theme-switch button { font:inherit; font-size:13px; padding:6px 14px;
  border:1px solid var(--line-strong); background:var(--card); color:var(--sub); cursor:pointer }
.theme-switch button:first-of-type { border-radius:999px 0 0 999px }
.theme-switch button:last-of-type { border-radius:0 999px 999px 0 }
.theme-switch button:not(:first-of-type) { border-left:none }
.theme-switch button[aria-pressed="true"] { background:var(--accent);
  border-color:var(--accent); color:var(--on-accent); font-weight:700 }
.theme-label { align-self:center; margin-right:8px; font-size:13px; color:var(--sub) }

/* ---- 絞り込み ------------------------------------------------ */
.filters { border:1px solid var(--line-strong); border-radius:var(--radius);
  background:var(--card-2); padding:14px 16px; margin:18px 0 }
.filters h2 { margin:0 0 10px; border:0; padding:0; font-size:1rem }
.frow { display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px 12px;
  padding:8px 0; border-top:1px dotted var(--line) }
.frow:first-of-type { border-top:0 }
.flabel { flex:0 0 15em; color:var(--sub); font-size:.85rem; padding-top:5px }
.flabel small { display:block; font-size:.75rem }
.chips { display:flex; flex-wrap:wrap; gap:7px; flex:1 1 20em }
.chip { font:inherit; font-size:.85rem; padding:5px 12px; cursor:pointer;
  border:1px solid var(--accent); background:var(--card); color:var(--accent);
  border-radius:999px }
.chip[aria-pressed="true"] { background:var(--accent); color:var(--on-accent); font-weight:700 }
.nums { display:flex; flex-wrap:wrap; gap:10px; flex:1 1 20em }
.num { display:flex; flex-direction:column; font-size:.82rem; color:var(--sub) }
.num input { font:inherit; font-size:.95rem; width:8.5em; padding:5px 8px;
  border:1px solid var(--line-strong); border-radius:3px;
  background:var(--card); color:var(--ink) }
.num small { font-size:.74rem }
.toggles { align-items:center; justify-content:space-between }
.toggles label { font-size:.85rem; color:var(--sub) }
.toggles label small { display:block; margin-left:1.6em }
.clear { font:inherit; font-size:.82rem; padding:5px 12px; cursor:pointer;
  border:1px solid var(--line-strong); background:var(--card);
  color:var(--sub); border-radius:3px }

/* ---- カード（小さく） ---------------------------------------- */
.card .size { margin:6px 0 2px; font-size:.95rem; color:var(--ink) }
.card .bits { margin:0; font-size:.86rem; color:var(--sub) }
.hit { margin:6px 0 0; font-size:.86rem; font-weight:700; color:var(--accent-deep) }
.hit-part { color:var(--accent-deep) }
.hit-unknown { color:var(--warn); font-weight:400 }
.src { margin:8px 0 0; font-size:.8rem }
@media(max-width:640px){ .flabel{flex-basis:100%} }