@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');

:root{
  --bg:#f6f4ef; --surface:#ffffff; --ink:#1b1915; --muted:#6a655c; --faint:#a49d90;
  --border:#e7e2d8; --human:#e0533f; --human-soft:#fbe9e4; --ai:#3f6fd0; --ai-soft:#e7eefb;
  --good:#2f9e63; --bad:#d1443a;
  --shadow:0 14px 40px -20px rgba(30,25,15,.32),0 2px 6px -3px rgba(30,25,15,.12);
  --maxw:600px;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#151310; --surface:#1e1b16; --ink:#efe9df; --muted:#a49d90; --faint:#6d675b;
    --border:#2c281f; --human:#f0715e; --human-soft:#2a1a15; --ai:#6a93e8; --ai-soft:#151f30;
    --good:#4bb87d; --bad:#e0655b; --shadow:0 16px 44px -22px rgba(0,0,0,.7); }
}
:root[data-theme="light"]{ --bg:#f6f4ef; --surface:#fff; --ink:#1b1915; --muted:#6a655c; --faint:#a49d90;
  --border:#e7e2d8; --human:#e0533f; --human-soft:#fbe9e4; --ai:#3f6fd0; --ai-soft:#e7eefb; --good:#2f9e63; --bad:#d1443a; }
:root[data-theme="dark"]{ --bg:#151310; --surface:#1e1b16; --ink:#efe9df; --muted:#a49d90; --faint:#6d675b;
  --border:#2c281f; --human:#f0715e; --human-soft:#2a1a15; --ai:#6a93e8; --ai-soft:#151f30; --good:#4bb87d; --bad:#e0655b; }

*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Malgun Gothic",sans-serif;
  letter-spacing:-.01em; line-height:1.6; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; }
a{ color:var(--ai); text-decoration:none; } a:hover{ text-decoration:underline; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 18px; }

header.site .wrap{ display:flex; align-items:center; justify-content:space-between; height:58px; }
.brand{ display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:19px; letter-spacing:-.03em; color:var(--ink); }
.brand:hover{ text-decoration:none; } .brand .mk{ font-size:21px; }
nav.top{ display:flex; gap:16px; } nav.top a{ color:var(--muted); font-size:13.5px; font-weight:600; }
nav.top a:hover{ color:var(--ai); text-decoration:none; }

.head{ text-align:center; padding:22px 0 6px; }
.head h1{ font-size:27px; font-weight:800; letter-spacing:-.04em; margin:0; }
.head .sub{ color:var(--muted); font-size:14.5px; margin-top:6px; }

.hud{ display:flex; align-items:center; justify-content:space-between; margin:14px 0 8px; gap:10px; }
.progress{ flex:1; height:8px; background:var(--border); border-radius:999px; overflow:hidden; }
.progress i{ display:block; height:100%; width:0; background:var(--ink); border-radius:999px; transition:width .3s; }
.hud .n{ font-size:13px; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }

.card{ background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow);
  padding:22px 20px; margin:6px 0 4px; min-height:180px; display:flex; flex-direction:column; }
.cat{ display:inline-flex; align-self:flex-start; gap:6px; font-size:12px; font-weight:700; color:var(--muted);
  background:var(--bg); border:1px solid var(--border); padding:5px 11px; border-radius:999px; margin-bottom:14px; }
.text{ font-size:17px; line-height:1.7; color:var(--ink); white-space:pre-wrap; word-break:break-word; flex:1; }

.ask{ text-align:center; color:var(--muted); font-size:14px; font-weight:600; margin:16px 0 10px; }
.choices{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.choice{ padding:16px; border-radius:14px; border:2px solid var(--border); background:var(--surface); cursor:pointer;
  font-family:inherit; font-weight:800; font-size:16px; letter-spacing:-.02em; color:var(--ink);
  display:flex; align-items:center; justify-content:center; gap:8px; transition:transform .06s, border-color .12s, background .12s; }
.choice .e{ font-size:20px; }
.choice.human:hover{ border-color:var(--human); background:var(--human-soft); }
.choice.ai:hover{ border-color:var(--ai); background:var(--ai-soft); }
.choice:active{ transform:translateY(1px); } .choice:disabled{ cursor:default; opacity:.55; }

.reveal{ margin-top:14px; padding:16px; border-radius:14px; display:none; animation:rise .25s ease; }
.reveal.show{ display:block; }
.reveal.ok{ background:color-mix(in srgb,var(--good) 12%,transparent); border:1px solid color-mix(in srgb,var(--good) 40%,transparent); }
.reveal.no{ background:color-mix(in srgb,var(--bad) 12%,transparent); border:1px solid color-mix(in srgb,var(--bad) 40%,transparent); }
.reveal .verdict{ font-weight:800; font-size:15px; letter-spacing:-.02em; }
.reveal .verdict.ok{ color:var(--good); } .reveal .verdict.no{ color:var(--bad); }
.reveal .why{ color:var(--muted); font-size:14px; margin-top:6px; line-height:1.6; }
.reveal .why b{ color:var(--ink); }
@keyframes rise{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.next{ width:100%; margin-top:12px; padding:14px; border:none; border-radius:12px; background:var(--ink); color:var(--bg);
  font-family:inherit; font-weight:800; font-size:15px; cursor:pointer; display:none; }
.next.show{ display:block; }

.result{ text-align:center; padding:20px 0; display:none; }
.result.show{ display:block; animation:rise .3s ease; }
.result .score{ font-size:54px; font-weight:800; letter-spacing:-.03em; line-height:1; }
.result .rank{ font-size:20px; font-weight:800; margin-top:8px; letter-spacing:-.02em; }
.result .desc{ color:var(--muted); font-size:14px; margin-top:6px; }
.result .streak{ margin-top:12px; font-size:13px; color:var(--muted); font-weight:600; }
.result .share{ width:100%; max-width:320px; margin:18px auto 0; padding:15px; border:none; border-radius:13px;
  background:var(--human); color:#fff; font-family:inherit; font-weight:800; font-size:15.5px; cursor:pointer; display:block; }
.result .again{ margin:9px auto 0; padding:11px; background:none; border:none; color:var(--muted); font-weight:700; font-size:14px; cursor:pointer; display:block; }
.result .msg{ color:var(--faint); font-size:12.5px; margin-top:10px; min-height:16px; }

footer.site{ border-top:1px solid var(--border); margin-top:30px; }
footer.site .wrap{ padding:22px 18px 32px; text-align:center; }
.foot-top{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 16px; }
.foot-top a{ color:var(--muted); font-size:13px; font-weight:600; }
.foot-note{ color:var(--faint); font-size:12px; margin-top:10px; }

.crumb{ font-size:13px; color:var(--faint); margin:20px 0 0; } .crumb a{ color:var(--muted); }
.prose h1{ font-size:25px; letter-spacing:-.03em; margin:14px 0 4px; }
.prose .lead{ color:var(--muted); font-size:16px; margin:0 0 8px; }
.prose h2{ font-size:18px; margin:24px 0 6px; letter-spacing:-.02em; }
.prose p{ color:var(--muted); font-size:15px; margin:0 0 12px; } .prose p strong{ color:var(--ink); }
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } }