/* ---------- Self-check ---------- */
[hidden] { display:none !important; }
.sc { padding-block:56px 128px; }
.scgrid { display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:24px; row-gap:48px; align-items:start; }
.sc-left { grid-column:1 / span 5; display:flex; flex-direction:column; gap:24px; position:sticky; top:110px; }
.sc-left h1 { margin:4px 0 0; max-width:12ch; font-size:clamp(42px, 5.4vw, 76px); line-height:.98; font-weight:500; letter-spacing:-.04em; text-wrap:balance; }
.sc-left .sub { margin:0; max-width:36ch; font-size:19px; line-height:29px; color:var(--ink-muted); }
.sc-areas { list-style:none; margin:0; padding:0; }
.sc-areas li { display:flex; flex-direction:column; gap:2px; padding:14px 0; border-top:1px solid var(--line); }
.sc-areas li:last-child { border-bottom:1px solid var(--line); }
.sc-areas b { font-size:16px; font-weight:600; }
.sc-areas span { font-size:15px; color:var(--ink-muted); }
.sc-fine { margin:0; font-size:13.5px; color:var(--ink-subtle); }
.sc-right { grid-column:7 / span 6; }
.qcard, .result { padding:36px; border-radius:var(--r-lg); background:var(--paper); border:1px solid var(--line); box-shadow:var(--shadow-float); }
.qcard { min-height:520px; display:flex; flex-direction:column; }
.q-top { display:flex; justify-content:space-between; align-items:center; font-size:14px; }
.q-area { font-weight:600; color:var(--signal); }
.q-count { color:var(--ink-subtle); font-variant-numeric:tabular-nums; }
.q-progress { margin-top:14px; height:4px; border-radius:999px; background:var(--frost); overflow:hidden; }
.q-progress i { display:block; height:100%; width:0; background:var(--signal); border-radius:inherit; transition:width .45s var(--ease); }
.q-text { margin:36px 0 0; font-size:clamp(24px, 2.4vw, 30px); line-height:1.25; font-weight:500; letter-spacing:-.02em; text-wrap:pretty; outline:none; }
.q-opts { margin-top:28px; display:flex; flex-direction:column; gap:10px; }
.opt { display:flex; align-items:center; gap:14px; width:100%; padding:16px 18px; border:1.5px solid var(--line); border-radius:14px; background:var(--paper); color:var(--ink); font:inherit; font-size:16.5px; text-align:left; cursor:pointer; transition:border-color .15s, background-color .15s, transform .12s; }
.opt:hover { border-color:var(--line-control); background:var(--mist); }
.opt:active { transform:scale(.99); }
.opt:focus-visible { outline:2px solid var(--signal); outline-offset:2px; }
.opt i { flex:none; width:20px; height:20px; border-radius:50%; border:1.5px solid var(--line-control); display:grid; place-items:center; }
.opt[aria-checked="true"] { border-color:var(--signal); background:var(--signal-soft); }
.opt[aria-checked="true"] i { border-color:var(--signal); background:var(--signal); box-shadow:inset 0 0 0 3px var(--paper); }
.opt small { margin-left:auto; font-size:13px; color:var(--ink-subtle); }
.q-nav { margin-top:auto; padding-top:28px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.q-hint { font-size:13.5px; color:var(--ink-subtle); }
.ghost-btn { height:40px; padding:0 16px; border:1px solid var(--line-control); border-radius:var(--r-sm); background:var(--paper); color:var(--ink); font:inherit; font-size:14.5px; font-weight:600; cursor:pointer; }
.ghost-btn:hover { border-color:var(--ink); }
.ghost-btn:disabled { opacity:.4; cursor:default; }
.ghost-btn:focus-visible { outline:2px solid var(--signal); outline-offset:2px; }
.q-anim { animation:qin .35s var(--ease); }
@keyframes qin { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

.result { display:flex; flex-direction:column; gap:20px; }
.r-top { display:flex; justify-content:space-between; align-items:baseline; }
.r-k { font-size:14px; font-weight:600; color:var(--signal); }
.r-score { font-size:56px; line-height:1; font-weight:500; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.r-score small { font-size:20px; color:var(--ink-subtle); letter-spacing:0; }
.result h2 { margin:0; font-size:32px; line-height:38px; font-weight:500; letter-spacing:-.025em; outline:none; }
.r-text { margin:0; font-size:17px; line-height:27px; color:var(--ink-muted); }
.r-areas { display:flex; flex-direction:column; gap:14px; padding:20px 0; border-block:1px solid var(--line); }
.ra { display:grid; grid-template-columns:170px 1fr 56px; gap:14px; align-items:center; font-size:15px; }
.ra b { font-weight:600; }
.ra .bar2 { height:10px; border-radius:999px; background:var(--frost); overflow:hidden; }
.ra .bar2 i { display:block; height:100%; border-radius:inherit; background:var(--signal); width:0; transition:width .9s var(--ease); }
.ra.weak .bar2 i { background:var(--risk); }
.ra.weak b::after { content:"  weakest"; white-space:pre; font-weight:500; color:var(--risk); font-size:13px; }
.ra span:last-child { text-align:right; color:var(--ink-subtle); font-variant-numeric:tabular-nums; }
.r-next { display:flex; flex-direction:column; gap:6px; padding:20px 22px; border-radius:14px; background:var(--tint-iris); }
.r-next b { font-size:19px; line-height:26px; font-weight:600; letter-spacing:-.01em; }
.r-next p { margin:0; font-size:15.5px; line-height:24px; color:var(--ink-muted); }
.r-capture { max-width:none; margin:0; }
#r-again { align-self:flex-start; }
@media (max-width: 1080px) { .sc-left, .sc-right { grid-column:1 / -1; } .sc-left { position:static; } }
@media (max-width: 640px) { .sc { padding-block:32px 80px; } .qcard, .result { padding:22px; } .qcard { min-height:0; } .q-text { margin-top:24px; } .ra { grid-template-columns:90px 1fr 48px; } .q-hint { display:none; } }
@media (prefers-reduced-motion: reduce) { .q-anim { animation:none; } .q-progress i, .ra .bar2 i { transition:none; } }