/* Formula Grids の共通の見た目。各シートの HTML から読み込む */
:root{
  --ink:#1d2433; --muted:#5b6475; --line:#b9c3d6; --blue:#1f4e9c; --blue-soft:#e8eef9;
  --accent:#d9480f; --paper:#fff; --bg:#eef1f6; --ok:#2f7d32; --ok-soft:#e7f4e8; --ng:#c62828; --ng-soft:#fdecec;
  --twist:#fff4ec;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif;font-size:14px;line-height:1.45}
.sheet{width:210mm;min-height:297mm;margin:16px auto;background:var(--paper);
  padding:7mm 11mm 5mm;border:3px solid var(--blue);box-shadow:0 2px 10px rgba(0,0,0,.12)}
.print-only{display:none}

/* ---- header ---- */
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  border-bottom:2px solid var(--blue);padding-bottom:6px}
.series{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);font-weight:700}
h1{margin:2px 0 0;font-size:26px;line-height:1.1}
h1 small{font-size:15px;color:var(--muted);font-weight:400;margin-left:6px}
.tags{margin-top:4px}
.tag{display:inline-block;font-size:10.5px;border:1px solid var(--blue);color:var(--blue);
  border-radius:10px;padding:0 8px;margin-right:4px}
.idbox{font-size:12px;width:76mm}
.idbox div{display:flex;gap:6px;margin:3px 0}
.idbox span.fill{flex:1;border-bottom:1px solid var(--ink)}
.trytab{border-collapse:collapse;margin-top:5px;width:100%}
.trytab td,.trytab th{border:1px solid var(--line);padding:1px 6px;text-align:center;font-size:11.5px}
.trytab th{background:var(--blue-soft);font-weight:600}.trytab td{height:6.5mm}

/* ---- screen panel: timer / check ---- */
.panel{display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-size:12px}
.panel .row{display:flex;gap:6px;align-items:center}
.panel output{font:600 20px/1 Consolas,monospace;min-width:64px;text-align:right}
.panel button{font:inherit;font-size:12px;border:1px solid var(--blue);background:#fff;color:var(--blue);
  border-radius:4px;padding:3px 10px;cursor:pointer}
.panel button.go{background:var(--blue);color:#fff}
#result{min-height:18px;font-weight:600}
#result.full{color:var(--ok)}
.hint{color:var(--muted);font-size:11px}

/* ---- key idea ---- */
.key{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;
  background:var(--blue-soft);border-left:5px solid var(--blue);padding:5px 12px;margin:6px 0 4px}
.key p{margin:2px 0}
.big{font-size:22px}
.tri{width:84px;height:auto}
.rules{font-size:12.5px;margin:0 0 4px;padding-left:18px}
.rules li{margin:1px 0}

/* ---- grids ---- */
h2{font-size:15px;margin:7px 0 3px;display:flex;align-items:baseline;gap:8px}
h2 .letter{background:var(--blue);color:#fff;border-radius:3px;padding:0 7px;font-size:13px}
h2 .find{margin-left:auto;font-size:12px;color:var(--muted);font-weight:400}
table.grid{width:100%;border-collapse:collapse;table-layout:fixed}
.grid th,.grid td{border:1px solid var(--ink)}
.grid thead th{background:#fafbfd;font-weight:600;font-size:12px;padding:3px 2px;vertical-align:bottom;line-height:1.3}
.grid thead th.corner{background:var(--blue);color:#fff;font-size:12px;vertical-align:middle}
.grid thead svg{display:block;margin:0 auto;width:100%;height:25px}
.grid tbody th{background:#fafbfd;font-size:13px;width:17%}
.grid td{height:6.8mm;padding:0;position:relative}
.grid td input{width:100%;height:100%;border:0;background:transparent;text-align:center;
  font:500 15px/1 "Segoe UI",Arial,sans-serif;color:var(--ink);ime-mode:disabled}
.grid td input:focus{outline:2px solid var(--accent);outline-offset:-2px;background:#fff7f2}
/* 少し考える列（列の見出し）・行（行の見出し） */
.grid th.twist,.grid tbody th.twist{background:var(--twist)}
.grid td.ok{background:var(--ok-soft)}
.grid td.ng{background:var(--ng-soft)}
.grid td.ng input{color:var(--ng)}
/* 正解の表示（「Show answers」のときだけ、マスの右下に小さく） */
.grid td .key-ans{display:none;position:absolute;right:4px;bottom:1px;font-size:10.5px;color:var(--ok);pointer-events:none}
body.show-ans .grid td .key-ans{display:block}
.notice{font-size:12px;margin:3px 0 0;padding:4px 8px;border:1px dashed var(--line);border-radius:4px}
.notice b{color:var(--blue)}
.line{display:inline-block;border-bottom:1px solid var(--ink);min-width:30mm}

/* ---- think（概念の 4 択） ---- */
.think{margin-top:7px;border:2px solid var(--accent);border-radius:6px;padding:6px 10px}
.think h3{margin:0 0 3px;font-size:13.5px;color:var(--accent)}
.think h3 small{font-weight:400;color:var(--muted);font-size:11px;margin-left:6px}
.mcqs{display:grid;grid-template-columns:repeat(3,1fr);column-gap:16px}
.mcq{font-size:11.5px;line-height:1.35}
.mcq .q{margin:0 0 3px}
.mcq .concept{display:inline-block;margin:0 0 3px;font-size:10px;color:var(--blue);background:var(--blue-soft);border-radius:8px;padding:0 6px}
.opts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1px 4px}
.opts li{display:flex;gap:5px;align-items:flex-start;padding:1px 3px;border-radius:4px;cursor:pointer}
.opts li .k{flex:none;width:15px;height:15px;border:1px solid var(--ink);border-radius:50%;
  font-size:9.5px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px}
.opts li:hover{background:#f4f6fa}
.opts li:focus{outline:2px solid var(--accent);outline-offset:-1px}
.opts li.sel .k{background:var(--blue);color:#fff;border-color:var(--blue)}
.opts li.right{background:var(--ok-soft)} .opts li.right .k{background:var(--ok);border-color:var(--ok);color:#fff}
.opts li.wrong{background:var(--ng-soft)} .opts li.wrong .k{background:var(--ng);border-color:var(--ng);color:#fff}
body.show-ans .opts li.is-ans .k{background:var(--ok);border-color:var(--ok);color:#fff}
.mcq .why{display:none;margin:3px 0 0;color:var(--ok);font-size:11px}
.mcq.checked .why, body.show-ans .mcq .why{display:block}
.foot{margin-top:6px;font-size:10px;color:var(--muted);display:flex;justify-content:space-between}

@media screen and (max-width:820px){
  .sheet{width:auto;min-height:0;margin:0;padding:16px;border-width:0}
  .top{flex-direction:column}.panel{align-items:flex-start}
  .key{grid-template-columns:1fr}
  .mcqs{grid-template-columns:1fr;row-gap:10px}
}
@media print{
  @page{size:A4;margin:0}
  body{background:#fff}
  .sheet{margin:0;box-shadow:none;border-width:3px;min-height:0;height:297mm;overflow:hidden}
  .print-only{display:block}
  .panel,.key-ans,.mcq .why{display:none !important}
  .grid td.ok,.grid td.ng,.opts li{background:none !important}
  .opts li .k{background:#fff !important;color:var(--ink) !important;border-color:var(--ink) !important}
  .grid td input:focus{outline:none;background:transparent}
}