/* Layout: one narrow column styled like an exam answer sheet — green printed rules, graphite pencil marks, a red seal only on the result. */
:root{
  --paper:#f5f7f3;
  --sheet:#ffffff;
  --print:#1d7353;        /* マークシートの印刷色（緑） */
  --print-soft:#d9ebe2;
  --pencil:#26282b;       /* 鉛筆の黒 */
  --muted:#5f6b65;
  --line:#c9d8cf;
  --seal:#c8202f;         /* 認定の朱印 */
  --seal-soft:#fbe3e5;
  --ok:#1d7353;
  --ng:#c8202f;
  --f-display:"Dela Gothic One","Hiragino Sans","Yu Gothic",sans-serif;
  --f-body:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic","Meiryo",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"Menlo",monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#101512;--sheet:#171e1a;--print:#5cc69a;--print-soft:#1f3a2e;--pencil:#e7ece9;
    --muted:#9aa9a1;--line:#2c3a33;--seal:#ff5a66;--seal-soft:#3a1c20;--ok:#5cc69a;--ng:#ff5a66;color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#101512;--sheet:#171e1a;--print:#5cc69a;--print-soft:#1f3a2e;--pencil:#e7ece9;
  --muted:#9aa9a1;--line:#2c3a33;--seal:#ff5a66;--seal-soft:#3a1c20;--ok:#5cc69a;--ng:#ff5a66;color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
.left{text-align:left}
.center{text-align:center}
body{background:var(--paper);color:var(--pencil);font-family:var(--f-body);font-size:16px;line-height:1.7;padding-inline:16px;padding-block:20px 48px}
.wrap{max-width:640px;margin:0 auto}
button{font:inherit;color:inherit}
button:focus-visible,a:focus-visible,input:focus-visible+span{outline:3px solid var(--print);outline-offset:2px}

/* 用紙 */
.sheet{background:var(--sheet);border:1.5px solid var(--print);border-radius:6px;padding:20px;position:relative}
.sheet::before{content:"";position:absolute;inset:5px;border:1px solid var(--line);border-radius:3px;pointer-events:none}
.sheet>*{position:relative}
.stack{display:flex;flex-direction:column;gap:20px}

/* スタート */
.head{display:flex;flex-direction:column;gap:6px;text-align:left}
.eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;color:var(--print)}
h1{font-family:var(--f-display);font-weight:400;font-size:clamp(44px,13vw,72px);line-height:1.05;margin:0;letter-spacing:.04em;color:var(--pencil)}
h1 .grade-tag{display:inline-block;font-size:.28em;vertical-align:.9em;margin-left:.4em;border:1.5px solid var(--print);color:var(--print);padding:.15em .5em;border-radius:3px;letter-spacing:.08em}
.lead{margin:4px 0 0;color:var(--muted);text-wrap:balance}
.field{display:flex;flex-direction:column;gap:8px}
.field-label{font-size:13px;font-weight:700;color:var(--print);letter-spacing:.08em;display:flex;align-items:center;gap:8px}
.field-label::after{content:"";flex:1;height:1px;background:var(--line)}

.levels{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.choice{position:relative;display:block;cursor:pointer}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice>span{display:flex;flex-direction:column;gap:2px;border:1.5px solid var(--line);border-radius:6px;padding:10px 12px;height:100%;background:var(--sheet);transition:border-color .15s,background .15s}
.choice input:checked+span{border-color:var(--print);background:var(--print-soft)}
.choice b{font-size:16px}
.choice small{font-size:12px;color:var(--muted);line-height:1.4}
.choice .n{font-family:var(--f-mono);font-size:11px;color:var(--muted)}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);border-radius:999px;padding:4px 12px;font-size:14px;background:var(--sheet)}
.chip span::before{content:"";width:10px;height:14px;border-radius:50%;border:1.5px solid var(--print);flex:none}
.chip input:checked+span{border-color:var(--print)}
.chip input:checked+span::before{background:var(--pencil);border-color:var(--pencil)}
.chip input:disabled+span{opacity:.35;cursor:not-allowed}

.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px}
.switch{position:relative;width:48px;height:28px;flex:none}
.switch input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;z-index:1}
.switch span{position:absolute;inset:0;border-radius:999px;background:var(--line);transition:background .15s}
.switch span::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--sheet);transition:transform .15s}
.switch input:checked+span{background:var(--print)}
.switch input:checked+span::after{transform:translateX(20px)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid var(--print);background:var(--sheet);color:var(--print);border-radius:6px;padding:10px 16px;font-weight:700;cursor:pointer;text-decoration:none;font-size:15px;min-height:44px}
.btn.primary{background:var(--print);color:var(--sheet)}
.btn.big{width:100%;font-size:18px;min-height:56px;letter-spacing:.1em}
.btn:disabled{opacity:.4;cursor:not-allowed}
.note{font-size:12px;color:var(--muted);line-height:1.6;margin:0}
.best{font-family:var(--f-mono);font-size:12px;color:var(--muted)}

/* 出題 */
.qbar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.qno{font-family:var(--f-display);font-size:28px;line-height:1}
.qno small{font-family:var(--f-mono);font-size:13px;color:var(--muted);margin-left:4px}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{font-size:12px;border:1px solid var(--print);color:var(--print);border-radius:3px;padding:1px 8px;white-space:nowrap}
.tag.lv3{border-color:var(--seal);color:var(--seal)}
.score{font-family:var(--f-mono);font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.timer{height:6px;background:var(--print-soft);border-radius:3px;overflow:hidden}
.timer i{display:block;height:100%;width:100%;background:var(--print);transform-origin:left}
.timer.warn i{background:var(--seal)}
.question{font-size:clamp(19px,5vw,23px);font-weight:700;line-height:1.55;margin:0;text-wrap:pretty}
.opts{display:flex;flex-direction:column;gap:8px;list-style:none;margin:0;padding:0}
.opt{width:100%;display:flex;align-items:center;gap:12px;text-align:left;background:var(--sheet);border:1.5px solid var(--line);border-radius:6px;padding:10px 12px;cursor:pointer;min-height:52px;font-size:16px;line-height:1.45;transition:border-color .12s}
.opt:hover:not(:disabled){border-color:var(--print)}
.opt:disabled{cursor:default}
.mark{flex:none;width:22px;height:32px;border-radius:50%;border:1.5px solid var(--print);display:grid;place-items:center;font-family:var(--f-mono);font-size:12px;color:var(--print);transition:background .15s}
.opt.picked .mark{background:var(--pencil);border-color:var(--pencil);color:transparent}
.opt.right{border-color:var(--ok);background:var(--print-soft)}
.opt.right .mark{border-color:var(--ok)}
.opt.wrong{border-color:var(--ng);background:var(--seal-soft)}
.opt.dim{opacity:.55}
.opt .t{min-width:0}
.feedback{border-top:1.5px dashed var(--line);padding-top:16px;display:flex;flex-direction:column;gap:8px}
.verdict{font-family:var(--f-display);font-size:26px;line-height:1.2;display:flex;align-items:center;gap:10px}
.verdict.ok{color:var(--ok)}
.verdict.ng{color:var(--ng)}
.verdict .pts{font-family:var(--f-mono);font-size:14px;color:var(--muted)}
.answer{font-weight:700}
.explain{margin:0;color:var(--pencil)}
.warnline{font-size:13px;color:var(--ng);font-weight:700}
.marks{display:flex;flex-wrap:wrap;gap:4px}
.marks i{width:10px;height:15px;border-radius:50%;border:1.2px solid var(--print);display:block}
.marks i.ok{background:var(--print)}
.marks i.ng{background:transparent;border-color:var(--ng);position:relative}
.marks i.ng::after{content:"";position:absolute;left:50%;top:-2px;bottom:-2px;width:1.2px;background:var(--ng);transform:rotate(35deg)}
.marks i.now{border-width:2.5px}
.quizfoot{display:flex;justify-content:space-between;align-items:center;gap:8px}
.linkbtn{background:none;border:none;color:var(--muted);font-size:13px;cursor:pointer;text-decoration:underline;padding:8px 0}

/* 結果 */
.cert{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;padding-block:8px}
.cert .eyebrow{letter-spacing:.3em}
.cert-title{font-size:15px;color:var(--muted);margin:0}
.gradebox{position:relative;display:inline-block;padding:8px 28px}
.grade{font-family:var(--f-display);font-size:clamp(64px,20vw,104px);line-height:1;letter-spacing:.04em}
.seal{position:absolute;right:-28px;top:-6px;width:74px;height:74px;border:3px solid var(--seal);border-radius:50%;color:var(--seal);font-family:var(--f-display);font-size:20px;display:grid;place-items:center;transform:rotate(-14deg);opacity:.9;line-height:1.05;text-align:center}
.seal.stamp{animation:stamp .45s cubic-bezier(.2,1.6,.4,1) both}
@keyframes stamp{from{transform:rotate(-14deg) scale(1.8);opacity:0}to{transform:rotate(-14deg) scale(1);opacity:.9}}
.comment{font-weight:700;text-wrap:balance;margin:4px 0 0}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1.5px solid var(--print);border-radius:6px;overflow:hidden}
.stat{padding:10px 6px;text-align:center;display:flex;flex-direction:column;gap:2px}
.stat+.stat{border-left:1px solid var(--line)}
.stat b{font-family:var(--f-mono);font-size:22px;font-variant-numeric:tabular-nums;line-height:1.2}
.stat span{font-size:12px;color:var(--muted)}
.bars{display:flex;flex-direction:column;gap:8px}
.barrow{display:grid;grid-template-columns:4.5em 1fr 3.6em;align-items:center;gap:10px;font-size:14px}
.barrow .track{height:10px;background:var(--print-soft);border-radius:2px;overflow:hidden}
.barrow .fill{height:100%;background:var(--print)}
.barrow .v{font-family:var(--f-mono);font-size:12px;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.share{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.share .btn{font-size:14px}
.imgout{display:flex;flex-direction:column;align-items:center;gap:6px}
.imgout img{width:100%;max-width:360px;border:1px solid var(--line);border-radius:6px}
.row{display:flex;flex-wrap:wrap;gap:8px}
.row .btn{flex:1 1 160px}
.review{display:flex;flex-direction:column;gap:10px;list-style:none;margin:0;padding:0}
.review li{border:1px solid var(--line);border-radius:6px;padding:10px 12px;display:flex;flex-direction:column;gap:4px;font-size:14px}
.review .rq{font-weight:700;display:flex;gap:8px;align-items:flex-start}
.review .rq i{font-style:normal;font-family:var(--f-display);font-size:16px;line-height:1.4;flex:none}
.review .rq i.ok{color:var(--ok)}
.review .rq i.ng{color:var(--ng)}
.review .ra{color:var(--muted)}
.review .ra b{color:var(--pencil)}
.filterrow{display:flex;gap:6px;flex-wrap:wrap}
h2{font-size:15px;margin:0;color:var(--print);letter-spacing:.08em;display:flex;align-items:center;gap:8px}
h2::after{content:"";flex:1;height:1px;background:var(--line)}
/* 試験官ナイスタちゃん */
.talk{display:flex;align-items:flex-end;gap:10px}
.chara{flex:none;width:118px;height:auto;aspect-ratio:370/320;max-width:100%}
.chara.sm{width:84px}
.bubble{position:relative;flex:1;min-width:0;background:var(--sheet);border:1.5px solid var(--print);border-radius:10px;padding:10px 14px;font-size:15px;line-height:1.6}
.bubble::before{content:"";position:absolute;left:-9px;bottom:22px;width:14px;height:14px;background:var(--sheet);border-left:1.5px solid var(--print);border-bottom:1.5px solid var(--print);transform:rotate(45deg)}
.bubble .who{display:block;font-size:11px;color:var(--print);font-weight:700;letter-spacing:.08em}
.pop{animation:pop .35s cubic-bezier(.2,1.5,.4,1) both}
@keyframes pop{from{transform:scale(.6) rotate(-6deg);opacity:0}to{transform:none;opacity:1}}
.fb-talk{align-items:flex-start}
.fb-talk .bubble::before{top:28px;bottom:auto}
.fb-talk .bubble{display:flex;flex-direction:column;gap:6px}
.cert .chara{width:150px;margin-top:-4px}
.peek{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.peek img{width:52px;height:auto}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--pencil);color:var(--sheet);padding:8px 16px;border-radius:6px;font-size:14px;z-index:10}
@media (max-width:420px){
  .sheet{padding:16px 14px}
  .levels{grid-template-columns:1fr}
  .seal{width:60px;height:60px;font-size:16px;right:-18px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}