/* しくみ図解 共通の見た目（shikumi/ のページで共通。ページだけの見た目は各ページの <style> に書く） */
:root{
  --bg:#EDEFEB; --surface:#FAFBF8; --ink:#1D2320; --muted:#5B6660; --line:#C7CEC8;
  --live:#E08600; --live-soft:#FBE3B8; --fault:#D2342A; --focus:#1F6FD1;
  --ok:#1D8A45; --ng:#C23A2E; --chip:#E1E5E0; --warn-bg:#FFF4D6; --warn-ink:#7A5200;
  --tank:#F4F5F1; --wall:#8C958F; --water:#9CC8EC; --water-top:#5C9FD6; --flow:#1F6FD1;
  --rubber:#3B3F3D; --metal:#A9B0AB; --ball:#E9ECE8;
  --f-display:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;
  --f-body:"IBM Plex Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#141816; --surface:#1C221F; --ink:#E4E9E5; --muted:#9AA59F; --line:#36403B;
  --live:#F6A623; --live-soft:#4A3712; --fault:#FF6B5E; --focus:#6FA8FF;
  --ok:#4CC27A; --ng:#FF7A6E; --chip:#27302C; --warn-bg:#3A2F12; --warn-ink:#F2C766;
  --tank:#202723; --wall:#6F7A74; --water:#24507A; --water-top:#4C8FD0; --flow:#7FB6FF;
  --rubber:#9AA29E; --metal:#5E6762; --ball:#3A423E; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#141816; --surface:#1C221F; --ink:#E4E9E5; --muted:#9AA59F; --line:#36403B;
  --live:#F6A623; --live-soft:#4A3712; --fault:#FF6B5E; --focus:#6FA8FF;
  --ok:#4CC27A; --ng:#FF7A6E; --chip:#27302C; --warn-bg:#3A2F12; --warn-ink:#F2C766;
  --tank:#202723; --wall:#6F7A74; --water:#24507A; --water-top:#4C8FD0; --flow:#7FB6FF;
  --rubber:#9AA29E; --metal:#5E6762; --ball:#3A423E; color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.7}
.wrap{max-width:880px;margin:0 auto;padding:24px 16px 64px}
h1,h2,h3{font-family:var(--f-display);margin:0;line-height:1.3;text-wrap:balance}
h1{font-size:clamp(26px,4vw,34px);font-weight:700}
h2{font-size:19px;font-weight:700;margin:40px 0 12px}
.eyebrow{font-size:12px;letter-spacing:.12em;color:var(--muted);font-weight:600}
.lead{color:var(--muted);margin:10px 0 0}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px}
button{font:inherit;color:inherit;cursor:pointer}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 14px;font-size:14px}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--live);border-color:var(--live);color:#1D2320;font-weight:600}
.btn[aria-pressed="true"]{background:var(--live-soft);border-color:var(--live)}
.btn:focus-visible,.chip:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 12px;font-size:13px}
.chip[aria-pressed="true"]{background:var(--live-soft);border-color:var(--live)}
svg{display:block;width:100%;height:auto}
.steps{display:flex;gap:6px;margin:12px 0 6px}
.step{flex:1;border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:12px;color:var(--muted);text-align:center;line-height:1.4}
.step.on{border-color:var(--live);background:var(--live-soft);color:var(--ink);font-weight:600}
.cap{min-height:4.6em;margin:6px 0 0}
.cap b{font-family:var(--f-display)}
.fault-cap{background:var(--warn-bg);color:var(--warn-ink);border-radius:8px;padding:10px 12px;margin-top:8px}
.parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px}
.part{text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:10px 12px}
.part b{display:block;font-family:var(--f-display)}
.part span{font-size:13px;color:var(--muted)}
.part[aria-pressed="true"]{border-color:var(--live);background:var(--live-soft)}
.q{margin:0 0 14px}
.q p{margin:0 0 6px;font-weight:600}
.q label{display:block;padding:4px 0;cursor:pointer}
.q .res{font-size:14px;margin-top:4px}
.q .err{color:var(--ng);font-size:13px}
.good{color:var(--ok)} .bad{color:var(--ng)}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{border-bottom:1px solid var(--line);padding:8px 6px;text-align:left;vertical-align:top}
th{font-weight:600;color:var(--muted);font-size:13px}
.tbl{overflow-x:auto}
.note{background:var(--warn-bg);color:var(--warn-ink);border-radius:10px;padding:12px 14px;font-size:14px}
.note p{margin:4px 0}
details{margin-top:40px}
summary{cursor:pointer;color:var(--muted);font-size:14px}
.pill{display:inline-block;font-size:11px;border-radius:4px;padding:0 6px;margin-left:6px;background:var(--chip);color:var(--muted)}
.pill.unsure{background:var(--warn-bg);color:var(--warn-ink)}
/* 図の中 */
.lbl{font-size:13px;fill:var(--ink);font-family:var(--f-body)}
.lbl.sm{font-size:11px;fill:var(--muted)}
.part-g.hl .shape{stroke:var(--live);stroke-width:4}
.part-g.hl .lbl{fill:var(--live);font-weight:700}
.flow{fill:none;stroke:var(--flow);stroke-width:3;stroke-linecap:round;stroke-dasharray:7 9;opacity:0;transition:opacity .3s;animation:dash .9s linear infinite}
.flow.on{opacity:1}
.flow.leak{stroke:var(--fault)}
@keyframes dash{to{stroke-dashoffset:-16}}
.flbl{font-size:12px;font-weight:600;fill:var(--flow);font-family:var(--f-body);opacity:0;transition:opacity .3s}
.flbl.on{opacity:1}
.flbl.leak{fill:var(--fault)}
.legend{font-size:13px;color:var(--muted);margin:8px 0 0}
.legend i{display:inline-block;width:22px;border-top:3px dashed var(--flow);vertical-align:middle;margin-right:4px}
.legend i.r{border-top-color:var(--fault)}
.zoom{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.zoom h3{font-size:15px;margin:0 0 4px}
.zoom svg{max-width:560px;margin:0 auto}
.ilbl{font-size:11px;fill:var(--ink);font-family:var(--f-body)}
.ilbl.sm{font-size:10px;fill:var(--muted)}
.ilbl.f{fill:var(--flow);font-weight:600}
@media (max-width:560px){.lbl{font-size:20px}.lbl.sm{font-size:16px}.flbl{font-size:18px}.flow{stroke-width:4.5}.ilbl{font-size:13px}.ilbl.sm{font-size:11px}}
@media (prefers-reduced-motion: reduce){.flow{animation:none;stroke-dasharray:none}}
a{color:var(--focus)}
/* 一覧へ戻る・ほかのしくみ */
.eyebrow a{color:inherit}
.more{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.more a{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 14px;font-size:14px;color:var(--ink);text-decoration:none}
.more a:hover{border-color:var(--live)}
.more a[aria-current="page"]{display:none}
/* 計器の目安（数値ではなく、いつもと比べてどうか） */
.meters{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-top:10px}
.meter{border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:13px}
.meter b{display:block;font-weight:600;color:var(--muted);font-size:12px}
.meter .v{font-family:var(--f-display);font-size:15px}
.meter .v.hi{color:var(--ng)} .meter .v.lo{color:var(--focus)} .meter .v.off{color:var(--muted)}
.meter .bar{height:6px;border-radius:3px;background:var(--chip);margin-top:4px;overflow:hidden}
.meter .bar i{display:block;height:100%;background:var(--live);transition:width .4s}