:root{
  --bg:#f6f4ef; --card:#ffffff; --ink:#1f2328; --muted:#6b6f76; --line:#e2ded5;
  --accent:#2f6f5e; --accent-soft:#e3efe9; --warn:#b5651d; --warn-soft:#f8ebdd;
  --bad:#b23a3a; --bad-soft:#f6e1e1; --pen:#c0392b; --sky:#3b7dd8; --sky-soft:#dde9f8;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#16181b; --card:#1f2226; --ink:#e8e6e1; --muted:#9a9ea5; --line:#33373d;
    --accent:#7cc2ab; --accent-soft:#223630; --warn:#e0a060; --warn-soft:#3a2d1f;
    --bad:#e38585; --bad-soft:#3a2323; --pen:#ff7b6b; --sky:#7fb0f0; --sky-soft:#1f2c3d;
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 "Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif}
a{color:var(--accent)}
.wrap{max-width:560px;margin:0 auto;padding:20px 16px 60px}
.top{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--card);flex-wrap:wrap}
.top .brand{font-weight:700;text-decoration:none;color:var(--ink)}
.top .links{display:flex;gap:14px;align-items:center;font-size:14px}
.top form{display:inline}
.linkish{background:none;border:none;color:var(--muted);font:inherit;cursor:pointer;padding:0}
.flash{background:var(--bad-soft);color:var(--bad);padding:8px 12px;border-radius:8px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px 16px;margin:12px 0}
.muted{color:var(--muted)} .small{font-size:13px}
h1{font-size:24px;margin:8px 0} h2{font-size:18px;margin:18px 0 8px}
.big{display:block;width:100%;text-align:center;background:var(--accent);color:#fff;border:none;border-radius:14px;padding:16px;font-size:18px;font-weight:700;cursor:pointer;text-decoration:none}
.big[disabled]{opacity:.4;cursor:default}
.stat{display:flex;gap:8px;margin:10px 0}
.stat div{flex:1;background:var(--bg);border-radius:12px;padding:10px 6px;text-align:center;font-size:12px;color:var(--muted)}
.stat b{display:block;font-size:24px;color:var(--ink)}
.bar{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
.word{font-size:34px;font-weight:700;text-align:center;margin:14px 0 4px;word-break:break-word}
.speak{display:block;width:max-content;margin:6px auto 16px;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:99px;padding:6px 16px;font-size:15px;cursor:pointer}
.opt{display:block;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;margin:8px 0;font-size:16px;cursor:pointer;background:var(--card)}
.opt input{margin-right:8px}
.opt:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.opt.right{border-color:var(--accent);background:var(--accent-soft)}
.opt.wrong{border-color:var(--bad);background:var(--bad-soft)}
.two{display:flex;gap:8px;margin-top:14px}
.two button{flex:1;padding:14px;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer}
.sure{background:var(--accent);color:#fff;border:none}
.unsure{background:var(--warn-soft);color:var(--warn);border:1.5px solid var(--warn)}
.verdict{font-size:20px;font-weight:700;text-align:center;margin:6px 0}
.verdict.ok{color:var(--accent)} .verdict.no{color:var(--bad)} .verdict.hmm{color:var(--warn)}
.scene{background:var(--bg);border-radius:12px;padding:12px;margin-top:12px;font-size:15px}
.scene b{color:var(--accent)}
.root{background:var(--warn-soft);border-radius:12px;padding:12px;margin-top:12px;font-size:15px}
.root .title{font-weight:700;color:var(--warn)}
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0}
.chain span{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:4px 8px}
.chain span:last-child{border-color:var(--warn);font-weight:700}
.chain i{font-style:normal;color:var(--warn)}
svg.pic{display:block;width:100%;height:auto;margin:4px 0 8px}
.list{list-style:none;padding:0;margin:0}
.list li{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed var(--line);padding:7px 0;font-size:15px}
.list .m{color:var(--muted);text-align:right}
.days div{display:flex;align-items:center;gap:8px;font-size:13px;margin:5px 0}
.days .track{flex:1;height:8px;border-radius:99px;background:var(--line);overflow:hidden;display:flex}
.days .fill{height:100%;background:var(--accent)} .days .seen{height:100%;background:var(--warn)}
label.f{display:block;margin:10px 0 4px;font-size:14px}
input.f{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;font-size:16px;background:var(--card);color:var(--ink)}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{border-bottom:1px solid var(--line);padding:6px 4px;text-align:left}
.flash.ok{background:var(--accent-soft);color:var(--accent)}
.list li .right{display:flex;align-items:center;gap:8px}
.del{background:none;border:1px solid var(--line);color:var(--muted);border-radius:8px;padding:2px 8px;font-size:12px;cursor:pointer;white-space:nowrap}
.del:hover{border-color:var(--bad);color:var(--bad)}
.del.back:hover{border-color:var(--accent);color:var(--accent)}
.list li.gone span{color:var(--muted);text-decoration:line-through}
table.rounds td{vertical-align:top}
table.rounds td.dots{font-size:18px;letter-spacing:3px;white-space:nowrap;color:var(--accent)}
table.rounds tr.short td.dots{color:var(--warn)}