:root{--navy:#002C53;--blue:#0058A0;--pale:#ECF1F7;--ink:#1d2733;--muted:#5b6876;--line:#cfd9e5;--ok:#1d7a46;--warn:#a5331f;--bg:#ffffff}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:"Yu Gothic","游ゴシック","YuGothic","Hiragino Sans","Noto Sans JP",sans-serif;font-size:16px;line-height:1.7}
header.bar{background:var(--navy);color:#fff;padding:14px 16px}
header.bar h1{margin:0;font-size:17px;font-weight:700;letter-spacing:.04em}
header.bar .sub{font-size:13px;opacity:.85}
main{max-width:760px;margin:0 auto;padding:20px 16px 48px}
h2{font-size:19px;color:var(--navy);margin:24px 0 10px;padding-left:10px;border-left:5px solid var(--blue)}
h3{font-size:16px;color:var(--navy);margin:20px 0 8px}
p{margin:8px 0}
.card{background:var(--pale);border-radius:8px;padding:16px;margin:14px 0}
.note{font-size:14px;color:var(--muted)}
.err{color:var(--warn);font-weight:700}
label.f{display:block;font-weight:700;margin:14px 0 6px}
input[type=text],textarea{width:100%;padding:10px 12px;font:inherit;border:1px solid var(--line);border-radius:6px;background:#fff}
textarea{min-height:110px;font-family:ui-monospace,Consolas,monospace;font-size:13px;word-break:break-all}
button{font:inherit;cursor:pointer;border-radius:6px;border:1px solid var(--blue);background:#fff;color:var(--blue);padding:10px 18px;font-weight:700}
button.primary{background:var(--blue);color:#fff}
button:disabled{opacity:.4;cursor:not-allowed}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
.row.end{justify-content:space-between}
ol.rules{padding-left:22px}ol.rules li{margin:4px 0}
/* 設問 */
.progress{height:8px;background:var(--pale);border-radius:4px;overflow:hidden;margin:6px 0 4px}
.progress>div{height:100%;background:var(--blue);width:0}
.qhead{display:flex;justify-content:space-between;font-size:14px;color:var(--muted)}
.qstep{display:flex;gap:10px;align-items:flex-start;margin:16px 0 10px;font-size:17px;line-height:1.6}
.qstep .stepn{flex:none;background:var(--blue);color:#fff;border-radius:14px;padding:1px 10px;font-size:13px;font-weight:700;margin-top:3px}
.qstep.s2 .stepn{background:var(--navy)}
.qstep b{color:var(--blue)}.qstep.s2 b{color:var(--navy)}
.cards{display:grid;gap:10px}
.card4{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:inherit;font-size:16px;font-weight:400;color:var(--ink);background:#fff;border:2px solid var(--line);border-radius:10px;padding:14px 14px;min-height:58px;cursor:pointer;transition:border-color .12s,background .12s}
.card4:hover:not(:disabled){border-color:var(--blue);background:#f7fafd}
.card4 .mk{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--line)}
.card4 .tx{flex:1}
.card4 .tg{flex:none;font-size:12px;font-weight:700;border-radius:12px;padding:2px 10px;display:none}
.card4.most{border-color:var(--blue);background:#eaf2fb}
.card4.most .mk{border-color:var(--blue);background:var(--blue)}
.card4.most .tg{display:inline-block;background:var(--blue);color:#fff}
.card4.least{border-color:var(--navy);background:#e9edf2}
.card4.least .mk{border-color:var(--navy);background:var(--navy)}
.card4.least .tg{display:inline-block;background:var(--navy);color:#fff}
.card4:disabled{cursor:default;opacity:1}
.card4.dim{opacity:.45}
.qdone{margin-top:10px;font-size:14px;color:var(--ok);font-weight:700;min-height:1.6em}
.practice{border:2px dashed var(--blue);border-radius:10px;padding:12px 14px;margin:16px 0;background:#fff}
.practice .ph2{font-weight:700;color:var(--navy)}
.code-box{background:#fff;border:1px dashed var(--blue);padding:10px;border-radius:6px}
/* レポート */
.meta{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:15px}
.meta dt{color:var(--muted)}.meta dd{margin:0}
.tr{display:grid;grid-template-columns:7.5em 1fr 2.6em;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
.tr .nm{font-weight:700;font-size:14px}
.tr .val{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.tr .ds{grid-column:1 / -1;font-size:13px;color:var(--muted);margin-top:-2px}
.scale{position:relative;height:16px;background:repeating-linear-gradient(90deg,var(--pale) 0,var(--pale) calc(10% - 1px),#fff calc(10% - 1px),#fff 10%);border-radius:3px}
.scale .fill{position:absolute;left:0;top:3px;bottom:3px;background:var(--blue);border-radius:2px}
.scale .mid{position:absolute;left:50%;top:0;bottom:0;border-left:1px dashed var(--muted)}
.comp .fill{background:var(--navy)}
.scale .avg{position:absolute;top:-2px;bottom:-2px;width:3px;background:#E08A1E;border-radius:1px}
/* 解説 */
.ex .exbox{background:var(--pale);border-radius:8px;padding:12px 16px;margin:14px 0}
.ex .exs{border-left:4px solid var(--blue);padding:2px 0 2px 14px;margin:18px 0}
.ex .exh{font-weight:700;color:var(--navy);font-size:17px;margin-bottom:4px}
.ex .exl{font-weight:700;margin:8px 0 2px;font-size:15px}
.ex .exul,.ex .exol{margin:4px 0;padding-left:22px}
.ex .exul li,.ex .exol li{margin:4px 0}
.ex .exv{font-size:13px;color:var(--muted);margin-left:4px}
.ex .exn{font-size:13px;color:var(--muted)}
.ex .exstyle{background:var(--navy);color:#fff;padding:1px 10px;border-radius:12px;margin-right:4px}
.pex .exbox{border:1px solid #c8d3e0;background:var(--pale);padding:2.5mm 4mm;margin:2mm 0 3mm;border-radius:2mm}
.pex .exs{border-left:2.5px solid var(--blue);padding:0 0 0 3mm;margin:3.2mm 0}
.pex .exh{font-weight:700;color:var(--navy);font-size:10pt;margin-bottom:.8mm}
.pex .exl{font-weight:700;margin:1.5mm 0 .5mm}
.pex p{margin:.8mm 0}
.pex .exul,.pex .exol{margin:.5mm 0;padding-left:5mm}
.pex li{margin:.8mm 0}
.pex .exv{font-size:7.5pt;color:#555;margin-left:1mm}
.pex .exn{font-size:7.5pt;color:#555}
.pex .exstyle{background:var(--navy);color:#fff;padding:0 2.5mm;border-radius:3mm;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.pname2{display:inline-block;min-width:40mm;border-bottom:1px solid #777;min-height:1.2em}
table.list{width:100%;border-collapse:collapse;margin-top:14px}
table.list th{text-align:left;font-size:13px;color:var(--muted);padding:6px 4px}
table.list td{border-top:1px solid var(--line);padding:8px 4px}
/* 印刷画面 */
body.pv-mode{background:#dfe4ea}
.pv-bar{position:sticky;top:0;z-index:5;display:flex;gap:12px;align-items:center;justify-content:space-between;background:var(--navy);padding:10px 16px}
.pv-bar .pv-info{color:#fff;font-size:14px;flex:1;text-align:center}
.pv-bar button{border-color:#fff}
.pv-note{max-width:210mm;margin:12px auto 0;padding:0 16px;font-size:13px;color:var(--muted)}
.pv-wrap{overflow-x:auto;padding:16px 0 40px}
.page{width:210mm;min-height:297mm;margin:0 auto 18px;background:#fff;padding:9mm 12mm;box-shadow:0 2px 10px rgba(0,0,0,.18);font-size:9pt;line-height:1.35;color:#111}
.ph{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:2px solid var(--navy);padding-bottom:4px;margin-bottom:6px}
.ph .pt{font-size:14pt;font-weight:700;color:var(--navy)}
.ph .pc{font-size:10pt;font-weight:700}
table.pmeta{width:100%;border-collapse:collapse;margin-bottom:4px}
table.pmeta th{width:18mm;text-align:left;color:#555;font-weight:400;padding:2px 0}
table.pmeta td{padding:2px 4px 2px 0}
.pname{width:100%;border:0;border-bottom:1px solid #777;font:inherit;font-size:10pt;padding:1px 2px;background:transparent}
.pname:focus{outline:none;border-bottom:2px solid var(--blue)}
.plg{font-size:7.5pt;color:#555;margin:2px 0 4px}
table.ptab{width:100%;border-collapse:collapse;table-layout:fixed}
table.ptab th{font-size:7.5pt;color:#555;font-weight:400;border-bottom:1px solid #999;padding:2px 3px;text-align:left}
table.ptab td{border-bottom:.5pt solid #d5dbe3;padding:1.3px 3px;vertical-align:middle;font-size:8.5pt;line-height:1.25}
table.ptab tr.grp td{background:var(--pale);font-weight:700;color:var(--navy);font-size:8.5pt;padding:1.3px 4px}
.c1{width:26mm;font-weight:700}.c2{width:42mm}.c3{width:9mm;text-align:right!important;font-weight:700}
.c4{width:13mm;text-align:right!important}.c5{width:11mm;text-align:right!important}td.c6{font-size:6.8pt!important;color:#333;line-height:1.2!important}
.pbar{position:relative;height:9px;background:repeating-linear-gradient(90deg,var(--pale) 0,var(--pale) calc(10% - .5px),#fff calc(10% - .5px),#fff 10%)}
.pbar .pf{position:absolute;left:0;top:1.5px;bottom:1.5px;background:var(--blue)}
.pbar .pm{position:absolute;left:50%;top:-1px;bottom:-1px;border-left:1px dashed #666}
.pbar .pa{position:absolute;top:-2px;bottom:-2px;width:2px;background:#E08A1E}
.pdisc{font-size:7pt;color:#555;margin-top:6px;border-top:1px solid #ccc;padding-top:4px}
@page{size:A4 portrait;margin:0}
.legend{font-size:13px;color:var(--muted)}
footer.disc{font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);margin-top:28px;padding-top:10px}
.hide{display:none!important}
@media (max-width:520px){.tr{grid-template-columns:6.2em 1fr 2.4em}.card4{padding:12px}}
@media print{
  body.pv-mode{background:#fff}
  body.pv-mode .pv-wrap{padding:0;overflow:visible}
  .page{box-shadow:none;margin:0;width:210mm;min-height:0;break-after:page;page-break-after:always}
  .page:last-child{break-after:auto;page-break-after:auto}
  .pbar,.pbar .pf,.pbar .pa,table.ptab tr.grp td,.scale .avg,.pex .exbox{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  header.bar,.noprint{display:none!important}
  main{max-width:none;padding:12mm}
  body{font-size:12px}
  .tr{padding:3px 0;break-inside:avoid}
  h2{margin:14px 0 6px;break-after:avoid}
  .card{background:none;border:1px solid var(--line)}
  .scale,.scale .fill{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}