:root{
  --bg:#12141a;--card:#1a1d25;--line:rgba(139,123,255,.16);
  --text:#f2f3f5;--muted:#a9adb4;--muted-d:#6b7078;
  --accent:#8b7bff;--warn:#ffb454;--ok:#3ddc97;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
::selection{background:var(--accent);color:#12141a}
body{background:var(--bg);color:var(--text);line-height:1.7;
  font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:660px;margin:0 auto;padding:26px clamp(16px,4.5vw,26px) 90px}

header{padding:10px 0 4px}
.home{display:inline-block;font-size:13px;color:var(--muted-d);font-weight:600}
.home:hover{color:var(--accent)}
h1{font-size:clamp(24px,5.6vw,34px);font-weight:800;letter-spacing:-.03em;line-height:1.24;margin-top:14px}
h1 b{color:var(--accent)}
.lead{color:var(--muted);font-size:clamp(14px,2.4vw,16px);margin-top:11px}

/* 목록 */
.tests{display:grid;gap:11px;margin-top:26px}
.tcard{display:block;background:var(--card);border:1px solid var(--line);
  border-radius:15px;padding:19px 20px}
.tcard:hover{border-color:rgba(139,123,255,.4)}
.tcard .t{font-size:18px;font-weight:700;letter-spacing:-.02em}
.tcard .d{color:var(--muted);font-size:14px;margin-top:5px}
.tcard .m{display:flex;gap:6px;margin-top:11px;flex-wrap:wrap}
.tcard .m span{font-size:11.5px;color:var(--muted-d);background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);padding:3px 9px;border-radius:6px}

/* 진행 */
.prog{height:4px;background:rgba(255,255,255,.06);border-radius:99px;overflow:hidden;margin-bottom:22px}
.prog .bar{height:100%;background:var(--accent);transition:width .25s}
.qn{font-size:12.5px;color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums}
.q{font-size:clamp(19px,4.2vw,24px);font-weight:700;line-height:1.45;margin:12px 0 24px;
  letter-spacing:-.02em;word-break:keep-all}
.opts{display:grid;gap:9px}
.opt{background:var(--card);border:1px solid var(--line);color:var(--text);
  border-radius:13px;padding:16px 18px;font-size:15.5px;font-family:inherit;
  text-align:left;cursor:pointer;line-height:1.5;width:100%}
.opt:hover{border-color:rgba(139,123,255,.45);background:#1e2129}
.opt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.back{margin-top:20px;background:none;border:1px solid var(--line);color:var(--muted-d);
  border-radius:10px;padding:9px 15px;font-size:13px;font-family:inherit;cursor:pointer}

/* 결과 */
.res{text-align:center;padding-top:8px}
.badge{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.1em;
  color:var(--accent);background:rgba(139,123,255,.12);border:1px solid rgba(139,123,255,.25);
  padding:5px 13px;border-radius:999px}
.rtitle{font-size:clamp(28px,6.6vw,42px);font-weight:800;letter-spacing:-.03em;
  margin-top:15px;line-height:1.2}
.rnick{color:var(--accent);font-size:16px;font-weight:600;margin-top:9px}
.rline{color:var(--muted);font-size:15.5px;margin-top:6px}
.rimg{width:100%;border-radius:15px;margin-top:22px;border:1px solid var(--line);display:block}
.rcap{font-size:12.5px;color:var(--muted-d);margin-top:9px}
.rbody{text-align:left;background:var(--card);border:1px solid var(--line);
  border-radius:15px;padding:20px 22px;margin-top:22px;font-size:15px}
.rbody h3{font-size:13px;color:var(--accent);font-weight:700;margin-bottom:8px;letter-spacing:.04em}
.rbody p{margin-bottom:14px}
.rbody p:last-child{margin-bottom:0}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.tags span{font-size:13px;background:rgba(61,220,151,.1);color:var(--ok);
  border:1px solid rgba(61,220,151,.22);padding:5px 12px;border-radius:8px}
.care{margin-top:16px;padding:14px 16px;border-radius:11px;font-size:14px;
  background:rgba(255,180,84,.07);border:1px solid rgba(255,180,84,.2);color:#e7cba0}

/* 공유 */
.share{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:22px}
.sbtn{background:var(--card);border:1px solid var(--line);color:var(--text);
  border-radius:12px;padding:14px;font-size:14.5px;font-weight:700;
  font-family:inherit;cursor:pointer}
.sbtn.primary{grid-column:1 / -1;background:var(--accent);color:#12141a;border-color:var(--accent)}
.sbtn:hover{border-color:rgba(139,123,255,.45)}

.again{display:block;text-align:center;margin-top:14px;font-size:13.5px;color:var(--muted-d)}
.again:hover{color:var(--accent)}

/* 다른 테스트 */
.more{margin-top:38px}
.more h3{font-size:15px;font-weight:700;margin-bottom:11px}
.mcard{display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;margin-bottom:8px}
.mcard:hover{border-color:rgba(139,123,255,.4)}
.mcard b{font-size:15px;font-weight:600}
.mcard span{font-size:12.5px;color:var(--muted-d);flex-shrink:0}

/* 광고 자리 — 코드가 없으면 아무것도 안 보인다 */
.adslot{margin:26px 0;display:flex;justify-content:center;min-height:0}
.adslot:empty{display:none}

.note{margin-top:22px;padding:14px 16px;border-radius:11px;font-size:13px;line-height:1.8;
  background:rgba(255,180,84,.06);border:1px solid rgba(255,180,84,.18);color:#dcc19c}

footer{margin-top:44px;padding-top:20px;border-top:1px solid var(--line);
  color:var(--muted-d);font-size:12.5px;line-height:1.9;text-align:center}
footer a{color:var(--muted)}
footer a:hover{color:var(--accent)}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(90px);
  background:var(--accent);color:#12141a;font-size:13.5px;font-weight:700;
  padding:11px 22px;border-radius:999px;transition:transform .25s;z-index:9}
.toast.on{transform:translateX(-50%) translateY(0)}

@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}