:root{
  --bg:#F3F4F8; --bg-2:#E9EBF4;
  --surf:#FFFFFF; --surf-2:#F6F7FC;
  --line:#E4E6EF; --line-2:#D2D6E4;
  --ink:#14161D; --ink-2:#414657; --mut:#767D8E;
  --acc:#5343E3; --acc-w:#EDEAFF; --acc-ink:#5343E3;
  --ok:#0B9C6D; --ok-w:#E2F6EE;
  --mid:#AF7415; --mid-w:#FAF0DD;
  --bad:#CE4340; --bad-w:#FBE9E8;
  --r:18px; --r-s:12px;
  --sh:0 1px 2px rgba(20,22,29,.05), 0 10px 26px -16px rgba(20,22,29,.30);
  --sh-s:0 1px 2px rgba(20,22,29,.05);
  --sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --serif:"Noto Serif KR","Pretendard Variable",serif;
  --tab-h:60px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0D0F15; --bg-2:#131720;
    --surf:#171A23; --surf-2:#1D212C;
    --line:#272B37; --line-2:#343949;
    --ink:#ECEEF5; --ink-2:#C3C8D6; --mut:#8C93A5;
    --acc:#9C8DFF; --acc-w:#221E3A; --acc-ink:#B0A4FF;
    --ok:#3FD39A; --ok-w:#102E26;
    --mid:#E6B160; --mid-w:#2E2414;
    --bad:#FF8582; --bad-w:#32191B;
    --sh:0 1px 2px rgba(0,0,0,.4), 0 10px 26px -16px rgba(0,0,0,.8);
    --sh-s:0 1px 2px rgba(0,0,0,.35);
  }
}
html[data-theme="light"]{
  --bg:#F3F4F8; --bg-2:#E9EBF4; --surf:#FFFFFF; --surf-2:#F6F7FC;
  --line:#E4E6EF; --line-2:#D2D6E4; --ink:#14161D; --ink-2:#414657; --mut:#767D8E;
  --acc:#5343E3; --acc-w:#EDEAFF; --acc-ink:#5343E3;
  --ok:#0B9C6D; --ok-w:#E2F6EE; --mid:#AF7415; --mid-w:#FAF0DD; --bad:#CE4340; --bad-w:#FBE9E8;
  --sh:0 1px 2px rgba(20,22,29,.05), 0 10px 26px -16px rgba(20,22,29,.30);
  --sh-s:0 1px 2px rgba(20,22,29,.05);
}
html[data-theme="dark"]{
  --bg:#0D0F15; --bg-2:#131720; --surf:#171A23; --surf-2:#1D212C;
  --line:#272B37; --line-2:#343949; --ink:#ECEEF5; --ink-2:#C3C8D6; --mut:#8C93A5;
  --acc:#9C8DFF; --acc-w:#221E3A; --acc-ink:#B0A4FF;
  --ok:#3FD39A; --ok-w:#102E26; --mid:#E6B160; --mid-w:#2E2414; --bad:#FF8582; --bad-w:#32191B;
  --sh:0 1px 2px rgba(0,0,0,.4), 0 10px 26px -16px rgba(0,0,0,.8);
  --sh-s:0 1px 2px rgba(0,0,0,.35);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html{background:var(--bg)}
body{
  margin:0;background:transparent;color:var(--ink);
  font-family:var(--sans);font-size:14px;line-height:1.6;
  letter-spacing:-.01em;-webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(90% 60% at 12% -8%, var(--acc-w) 0%, transparent 60%),
    linear-gradient(175deg, var(--bg) 0%, var(--bg-2) 100%);
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;letter-spacing:inherit}
input{font:inherit;color:inherit;letter-spacing:inherit}
a{color:inherit;text-decoration:none}
.app{
  max-width:600px;margin:0 auto;
  padding:calc(env(safe-area-inset-top,0px) + 8px) 16px calc(var(--tab-h) + env(safe-area-inset-bottom,0px) + 28px);
  min-height:100dvh;
}
.app.no-tabs{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 28px)}

/* ── topbar ─────────────────────────────── */
.top{display:flex;align-items:center;gap:10px;height:48px;margin-bottom:4px}
.top .back{
  width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:var(--surf);border:1px solid var(--line);box-shadow:var(--sh-s);flex:none;
}
.top .back svg{width:16px;height:16px;stroke:var(--ink-2);stroke-width:2.1;fill:none;stroke-linecap:round;stroke-linejoin:round}
.top h1{font-size:15px;font-weight:650;margin:0;flex:1;min-width:0;letter-spacing:-.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .act{display:flex;gap:6px;flex:none}
.iconbtn{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:var(--surf);border:1px solid var(--line);box-shadow:var(--sh-s)}
.iconbtn svg{width:16px;height:16px;stroke:var(--ink-2);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.iconbtn.on{background:var(--acc-w);border-color:transparent}
.iconbtn.on svg{stroke:var(--acc-ink);fill:var(--acc-ink)}

/* ── brand ─────────────────────────────── */
.brand{display:flex;align-items:center;gap:11px;padding:6px 2px 18px}
.brand .mark{width:34px;height:34px;flex:none}
.brand .wm{font-size:23px;font-weight:760;letter-spacing:-.045em;line-height:1}
.brand .sub{font-size:11.5px;color:var(--mut);font-weight:520;letter-spacing:0;margin-top:3px}
.brand .sp{flex:1}

/* ── cards ─────────────────────────────── */
.card{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.sec{margin:22px 0 9px;display:flex;align-items:baseline;gap:8px}
.sec h2{font-size:12.5px;font-weight:640;margin:0;color:var(--mut);letter-spacing:.01em}
.sec .more{margin-left:auto;font-size:12px;color:var(--acc-ink);font-weight:600}

/* search box */
.sbox{display:flex;align-items:center;gap:9px;background:var(--surf);border:1px solid var(--line);
  border-radius:14px;padding:0 13px;height:46px;box-shadow:var(--sh-s)}
.sbox svg{width:16px;height:16px;stroke:var(--mut);stroke-width:2.1;fill:none;stroke-linecap:round}
.sbox input{border:0;outline:0;background:none;flex:1;min-width:0;font-size:14.5px}
.sbox input::placeholder{color:var(--mut)}
.sbox .clr{color:var(--mut);font-size:17px;line-height:1;padding:4px}

/* progress */
.ring{transform:rotate(-90deg)}
.ring circle{fill:none;stroke-linecap:round}
.bar{height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:var(--acc);border-radius:2px;transition:width .4s}

/* subject grid */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.subj{background:var(--surf);border:1px solid var(--line);border-radius:15px;padding:13px 13px 11px;
  box-shadow:var(--sh-s);text-align:left;display:block;position:relative;overflow:hidden}
.subj:active{transform:scale(.985)}
.subj .nm{font-size:14.5px;font-weight:660;letter-spacing:-.025em}
.subj .ct{font-size:11.5px;color:var(--mut);margin:2px 0 10px;font-variant-numeric:tabular-nums}
.subj .pc{position:absolute;top:12px;right:13px;font-size:11px;font-weight:650;color:var(--acc-ink);
  font-variant-numeric:tabular-nums}

/* quick actions */
.quick{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.qa{background:var(--surf);border:1px solid var(--line);border-radius:15px;padding:13px;
  box-shadow:var(--sh-s);text-align:left;display:flex;gap:11px;align-items:center}
.qa:active{transform:scale(.985)}
.qa .ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none;background:var(--acc-w)}
.qa .ic svg{width:17px;height:17px;stroke:var(--acc-ink);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.qa .t{font-size:13.5px;font-weight:620;letter-spacing:-.02em}
.qa .d{font-size:11px;color:var(--mut);margin-top:1px;font-variant-numeric:tabular-nums}
.qa.wide{grid-column:1/-1}
.qa.hero .ic{background:var(--acc)}
.qa.hero .ic svg{stroke:#fff}

/* list rows */
.list{display:flex;flex-direction:column;gap:7px}
.row{background:var(--surf);border:1px solid var(--line);border-radius:14px;padding:12px 13px;
  box-shadow:var(--sh-s);text-align:left;display:block;width:100%;position:relative}
.row:active{transform:scale(.99)}
.row .rt{font-size:13.5px;font-weight:600;line-height:1.45;letter-spacing:-.02em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.row .rq{font-size:12px;color:var(--mut);line-height:1.5;margin-top:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.row .rc{font-size:11px;color:var(--mut);margin-top:6px;font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .rm{display:flex;gap:5px;align-items:center;margin-bottom:5px;flex-wrap:wrap}
.dot{width:5px;height:5px;border-radius:50%;flex:none}
.row mark{background:var(--acc-w);color:var(--acc-ink);border-radius:3px;padding:0 1px}

/* chips */
.chip{display:inline-flex;align-items:center;gap:4px;height:21px;padding:0 8px;border-radius:7px;
  font-size:10.5px;font-weight:620;background:var(--surf-2);color:var(--mut);border:1px solid var(--line);
  letter-spacing:0;white-space:nowrap}
.chip.acc{background:var(--acc-w);color:var(--acc-ink);border-color:transparent}
.chip.ok{background:var(--ok-w);color:var(--ok);border-color:transparent}
.chip.mid{background:var(--mid-w);color:var(--mid);border-color:transparent}
.chip.bad{background:var(--bad-w);color:var(--bad);border-color:transparent}
.filters{display:flex;gap:6px;overflow-x:auto;padding:2px 0 10px;margin:0 -16px;padding-left:16px;padding-right:16px;
  scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.fchip{height:30px;padding:0 12px;border-radius:10px;font-size:12.5px;font-weight:600;flex:none;
  background:var(--surf);border:1px solid var(--line);color:var(--ink-2);box-shadow:var(--sh-s)}
.fchip.on{background:var(--ink);color:var(--bg);border-color:transparent}

/* detail */
.dt-top{display:flex;gap:6px;align-items:center;margin-bottom:9px;flex-wrap:wrap}
.dt-title{font-size:20px;font-weight:700;line-height:1.35;letter-spacing:-.035em;margin:0 0 11px}
.cite{display:flex;align-items:center;gap:8px;background:var(--surf-2);border:1px solid var(--line);
  border-radius:12px;padding:9px 11px;margin-bottom:16px}
.cite span{flex:1;min-width:0;font-size:12px;color:var(--ink-2);font-weight:560;
  font-variant-numeric:tabular-nums;line-height:1.45}
.cite button,.cite .cbtn{flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--surf);border:1px solid var(--line)}
.cite button svg,.cite .cbtn svg{width:14px;height:14px;stroke:var(--mut);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.cite .cbtn{background:var(--acc-w);border-color:transparent}
.cite .cbtn svg{stroke:var(--acc-ink)}
a.chip.acc{text-decoration:none}
a.chip{text-decoration:none}
a.qa{text-decoration:none;color:inherit}
.blk{margin-bottom:14px}
.blk .lb{font-size:11px;font-weight:660;color:var(--mut);letter-spacing:.02em;margin-bottom:6px;
  display:flex;align-items:center;gap:6px}
.blk .lb::after{content:"";flex:1;height:1px;background:var(--line)}
.q-body{font-size:15px;line-height:1.72;font-weight:520;letter-spacing:-.022em;color:var(--ink)}
.w-body{font-size:13.5px;line-height:1.72;color:var(--ink-2);letter-spacing:-.015em}
.h-body{font-family:var(--serif);font-size:14.5px;line-height:1.92;color:var(--ink-2);letter-spacing:-.005em;
  word-break:keep-all}
.h-body p{margin:0 0 .85em}
.h-body p:last-child{margin-bottom:0}
.h-body .mk{font-family:var(--sans);font-weight:660;color:var(--acc-ink);font-size:12.5px;
  margin-right:3px;letter-spacing:0}
.fact{background:var(--surf-2);border:1px solid var(--line);border-radius:12px;padding:12px 13px}
.fact p{margin:0 0 .5em}
.fact p:last-child{margin:0}

/* drill */
.drill{display:flex;flex-direction:column;min-height:calc(100dvh - 70px)}
.dprog{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.dprog .bar{flex:1}
.dprog .n{font-size:11.5px;color:var(--mut);font-variant-numeric:tabular-nums;font-weight:600}
.dcard{background:var(--surf);border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh);
  padding:20px 18px;flex:1;display:flex;flex-direction:column;min-height:0}
.dcard .sm{font-size:11.5px;color:var(--mut);margin-bottom:9px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.dcard .tt{font-size:15px;font-weight:660;letter-spacing:-.03em;line-height:1.4;margin-bottom:16px}
.dcard .qq{font-size:16.5px;line-height:1.7;font-weight:520;letter-spacing:-.025em}
.dcard .reveal{margin-top:18px;padding-top:16px;border-top:1px dashed var(--line-2)}
.dactions{position:sticky;bottom:0;padding:14px 0 0;background:linear-gradient(to top,var(--bg) 62%,transparent)}
.big{width:100%;height:50px;border-radius:15px;background:var(--ink);color:var(--bg);
  font-size:15px;font-weight:660;letter-spacing:-.02em;display:grid;place-items:center}
.big:active{opacity:.85}
.big.gh{background:var(--surf);color:var(--ink);border:1px solid var(--line-2)}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.g3 button{height:52px;border-radius:15px;font-size:13.5px;font-weight:660;letter-spacing:-.02em;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:1px solid transparent}
.g3 button small{font-size:10px;font-weight:560;opacity:.8;font-variant-numeric:tabular-nums}
.g3 .b0{background:var(--bad-w);color:var(--bad)}
.g3 .b1{background:var(--mid-w);color:var(--mid)}
.g3 .b2{background:var(--ok-w);color:var(--ok)}
.g3 button:active{transform:scale(.97)}

/* group compare */
.gitem{background:var(--surf);border:1px solid var(--line);border-radius:15px;box-shadow:var(--sh-s);
  padding:13px 14px;position:relative}
.gitem .num{position:absolute;top:13px;right:14px;font-size:11px;font-weight:700;color:var(--acc-ink);
  background:var(--acc-w);border-radius:6px;padding:1px 6px;letter-spacing:0}
.gitem .gq{font-size:13.5px;line-height:1.6;font-weight:560;letter-spacing:-.02em;padding-right:36px}
.gitem .gc{font-size:11px;color:var(--mut);margin-top:7px;font-variant-numeric:tabular-nums}
.gitem .gh{font-family:var(--serif);font-size:13px;line-height:1.8;color:var(--ink-2);margin-top:9px;
  padding-top:9px;border-top:1px solid var(--line);word-break:keep-all}
.foldbtn{font-size:11.5px;font-weight:620;color:var(--acc-ink);margin-top:7px}

/* stats */
.stat{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px}
.stat .s{background:var(--surf);border:1px solid var(--line);border-radius:14px;padding:12px;box-shadow:var(--sh-s)}
.stat .v{font-size:21px;font-weight:720;letter-spacing:-.045em;font-variant-numeric:tabular-nums;line-height:1.1}
.stat .k{font-size:10.5px;color:var(--mut);margin-top:3px;font-weight:560}

/* tabs */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;justify-content:center;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
  border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.tabs .in{display:flex;width:100%;max-width:600px}
.tabs button{flex:1;height:var(--tab-h);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;color:var(--mut)}
.tabs button svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tabs button span{font-size:10px;font-weight:620;letter-spacing:-.01em}
.tabs button.on{color:var(--acc-ink)}

/* misc */
.empty{text-align:center;color:var(--mut);font-size:13px;padding:44px 20px;line-height:1.7}
.spin{width:22px;height:22px;border-radius:50%;border:2.2px solid var(--line-2);border-top-color:var(--acc);
  animation:sp .7s linear infinite;margin:44px auto}
@keyframes sp{to{transform:rotate(360deg)}}
.toast{position:fixed;left:50%;bottom:calc(var(--tab-h) + env(safe-area-inset-bottom,0px) + 18px);
  transform:translateX(-50%);z-index:60;background:var(--ink);color:var(--bg);font-size:12.5px;font-weight:600;
  padding:9px 15px;border-radius:11px;box-shadow:var(--sh);white-space:nowrap;animation:tin .22s ease}
@keyframes tin{from{opacity:0;transform:translate(-50%,8px)}}
.note{font-size:11px;color:var(--mut);line-height:1.65;padding:18px 2px 4px}
.note a{color:var(--acc-ink);font-weight:600}
.fadein{animation:fi .22s ease}
@keyframes fi{from{opacity:0;transform:translateY(5px)}}