:root{color-scheme:light;font-family:system-ui,-apple-system,"Noto Sans JP","Yu Gothic",sans-serif;color:#203247;background:#f3f6f8;line-height:1.8;-webkit-text-size-adjust:100%;text-size-adjust:100%}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;overflow-wrap:break-word}
a{color:#155a9c;text-underline-offset:.2em}
a:hover{color:#9d3818}
header{background:#102d49;color:#fff;padding:28px max(5vw,16px)}
header a{color:#fff}
header .brand{font-size:1.75rem;font-weight:800;letter-spacing:.04em}
header p{margin:4px 0}
nav{display:flex;gap:4px 22px;flex-wrap:wrap;margin-top:16px}
nav a{font-size:.94rem;display:inline-flex;align-items:center;min-height:40px}
main{max-width:1200px;padding:24px;margin:auto;min-width:0}
h1{font-size:clamp(1.5rem,4vw,2.5rem);line-height:1.4}
h2{font-size:1.4rem;line-height:1.5;margin-top:2.1em}
h3{font-size:1.1rem}
h4,h5{margin:1em 0 .3em}
section,.panel{background:#fff;border:1px solid #d5dfe7;border-radius:10px;padding:24px;margin:24px 0;min-width:0}
.notice{background:#e8f0f8;border-left:5px solid #24679d;padding:16px 20px}
.notice p{margin:.2em 0}
.muted,figcaption{color:#526575;font-size:.9rem}
figure{margin:16px 0}
/* SVGは viewBox で縮尺し、狭い画面ではグラフ枠の中だけで横スクロールさせる (ページ全体は横に広げない)。 */
svg{display:block;width:100%;height:auto;min-width:520px;max-width:1000px}
.chart,.table-wrap{overflow:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.table-wrap{max-height:650px}
table{border-collapse:collapse;width:100%;font-size:.9rem}
th,td{text-align:left;border-bottom:1px solid #d5dfe7;padding:9px 12px;vertical-align:top}
th{background:#eaf0f5;position:sticky;top:0;white-space:nowrap}
td:first-child{font-weight:600}
td.wide{min-width:22em}
input,select,button{font:inherit;padding:8px;border:1px solid #829aaf;border-radius:5px;max-width:100%;min-height:44px}
select{min-width:0}
button{cursor:pointer;background:#155a9c;color:#fff;padding:8px 18px;touch-action:manipulation}
button:disabled{opacity:.5;cursor:default}
input[type=checkbox]{width:20px;height:20px;min-height:0;margin:0;flex:none}
.controls{display:flex;gap:14px;align-items:end;flex-wrap:wrap}
.controls label{display:grid;gap:4px;min-width:0;flex:0 1 auto}
.controls label.check{display:flex;align-items:center;gap:8px;min-height:44px}
.pager{align-items:center}
/* 操作パネル (JavaScriptが動くときだけ表示する) */
.panel-controls{display:grid;gap:12px;margin:12px 0 16px;padding:14px;background:#f3f7fa;border:1px solid #d5dfe7;border-radius:8px;min-width:0}
.control-row{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;min-width:0}
.control-label{font-weight:650;min-width:4.5em}
.segmented{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.segmented button,.toggle,.metric-card,button.secondary{background:#fff;color:#155a9c;border:1px solid #155a9c}
.segmented button[aria-pressed=true],.toggle[aria-pressed=true],.metric-card[aria-pressed=true]{background:#155a9c;color:#fff}
.toggle[aria-pressed=true]::before{content:"✓ "}
.metric-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:8px;flex:1 1 320px;min-width:0}
.metric-card{display:grid;gap:2px;text-align:left;padding:10px 14px;line-height:1.4}
.metric-card strong{font-size:1.05rem}
.metric-card small{font-size:.8rem;opacity:.85}
.picker{border:1px solid #cbd7e1;border-radius:6px;padding:0 12px;background:#fff;flex:1 1 280px;min-width:0}
.picker fieldset{border:0;padding:0;margin:0 0 10px;min-width:0}
.picker legend{font-weight:650;padding:4px 0}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:0 12px;max-height:320px;overflow:auto}
.checks label{display:flex;gap:8px;align-items:center;min-height:40px;line-height:1.3}
summary{cursor:pointer;font-weight:650;padding:10px 0}
details{border-bottom:1px solid #dce4eb;padding:8px 0}
blockquote{border-left:4px solid #7995ac;padding:8px 22px;margin:16px 0;background:#f3f6f8}
footer{padding:24px;text-align:center;border-top:1px solid #ccd9e3}
pre,.verbatim{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit}
.answer{border-top:1px solid #cad8e4;padding:20px 0}
.answer h3{margin:0}
.question-head{background:#f3f7fa;border-radius:8px;padding:8px 16px;margin:8px 0}
.badge{display:inline-block;background:#e7eff7;border-radius:3px;padding:1px 8px;margin:0 8px;font-size:.85rem}
.model-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:16px}
.model-grid article{padding:20px;border:1px solid #d2dde6;border-radius:8px;min-width:0}
.model-grid dl{font-size:.88rem}
.model-grid dt{font-weight:bold}
.model-grid dd{margin:0 0 8px;overflow-wrap:anywhere}
.test-image{max-width:100%;height:auto}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #c26717;outline-offset:3px}
@media(max-width:600px){
  main{padding:12px}
  section,.panel{padding:14px}
  header{padding:18px 16px}
  header .brand{font-size:1.35rem}
  h2{font-size:1.25rem}
  .controls{gap:10px}
  .controls label{flex:1 1 100%}
  .controls label select,.controls label input:not([type=checkbox]){width:100%}
  .panel-controls{padding:10px}
  .control-label{flex:1 1 100%}
  th,td{padding:8px}
}