@import "https://cdn.jsdelivr.net/gh/fonts-archive/Pretendard/Pretendard.css";:root{--primary:#cae5f4;--onPrimary:#020202;--accent:#ffc2cb;--surface:#fff;--text:#020202;--primarySoft:#eaf5fb;--surface2:#eaf5fb;--muted:#4e5968;--border:#e5e8eb;--borderStrong:#8b95a1;--chart:#2f7fb5;--danger:#d32f2f;--success:#2e7d32;--warning:#b45309;--r-sm:6px;--r-md:8px;--r-lg:20px;--r-choice:24px;--r-btn:999px;--sp-xs:4px;--sp-sm:6px;--sp-md:8px;--sp-lg:16px;--sp-xl:24px;--sp-xxl:32px;--dur-fast:.12s;--dur:.24s;--dur-slow:.62s;--ease-out:cubic-bezier(.22, 1, .36, 1);--ease-spring:cubic-bezier(.34, 1.42, .64, 1);--ease-bounce:cubic-bezier(.34, 1.9, .64, 1);--font-sans:"Pretendard", -apple-system, "Apple SD Gothic Neo", system-ui, sans-serif}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none;scrollbar-width:none}*{scrollbar-width:none}::-webkit-scrollbar{display:none}body{padding-inline:env(safe-area-inset-left) env(safe-area-inset-right);background:var(--surface2);color:var(--text);font:400 16px/24px var(--font-sans);word-break:keep-all;overflow-wrap:anywhere;margin:0;overflow-x:clip}h1,h2,h3,p{margin:0}h1{font-size:24px;font-weight:700;line-height:36px}h2{font-size:18px;font-weight:600;line-height:27px}button,input,textarea{font:inherit;color:inherit}button{cursor:pointer;background:0 0;border:0;padding:0}a{color:inherit;text-decoration:none}button,a,label,img{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}svg.i{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;flex:none;width:24px;height:24px}:focus-visible{outline:2px solid var(--text);outline-offset:2px}.muted{color:var(--muted)}.small{font-size:14px;line-height:21px}.row{justify-content:space-between;align-items:center;gap:var(--sp-md);display:flex}.stack{gap:var(--sp-lg);display:grid}.sr{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.splash{place-content:center;justify-items:center;gap:var(--sp-lg);min-height:100dvh;display:grid}.splash img{border-radius:var(--r-lg)}.login{flex-direction:column;justify-content:center;height:100dvh;display:flex;position:relative;overflow:hidden}.drift{gap:var(--sp-md);max-width:720px;padding-inline:var(--sp-md);grid-template-columns:repeat(3,minmax(0,1fr));margin:0 auto;display:grid;position:absolute;inset:0;overflow:hidden;-webkit-mask-image:linear-gradient(#000 18%,#0000 34% 66%,#000 82%);mask-image:linear-gradient(#000 18%,#0000 34% 66%,#000 82%)}.drift-col{animation:rise .75s var(--ease-out) both}.drift-col:first-child{animation-name:swing-left}.drift-col:nth-child(2){animation-delay:.18s}.drift-col:nth-child(3){animation-name:swing-right;animation-delay:60ms}.drift-track{animation:60s linear infinite drift-up}.drift-col:nth-child(2) .drift-track{animation-name:drift-down;animation-duration:46s}.drift-col:nth-child(3) .drift-track{animation-duration:74s}.drift-card{gap:var(--sp-sm);height:92px;margin-bottom:var(--sp-md);border-radius:var(--r-lg);background:var(--surface);align-content:start;padding:12px;font-size:14px;line-height:21px;display:grid}.drift-card i{background:var(--primary);border-radius:999px;height:5px}.drift-card i+i{width:65%}.login-panel{z-index:1;width:100%;max-width:420px;padding:var(--sp-xl);justify-items:center;gap:var(--sp-sm);text-align:center;margin:0 auto;display:grid;position:relative}.login-panel>*{animation:rise var(--dur-slow) var(--ease-bounce) both}.login-panel img{border-radius:var(--r-lg);margin-bottom:var(--sp-sm);animation-name:pop;animation-delay:.26s}.login-panel h1{animation-delay:.34s}.login-panel p{animation-delay:.42s}.login-panel .btn{margin-top:var(--sp-lg);animation-delay:.5s}.btn.google{color:#1f1f1f;background:#fff;border:1px solid #747775;font-weight:500}.btn.google .g{flex:none;width:20px;height:20px}.shell{min-height:100dvh;padding-bottom:calc(76px + env(safe-area-inset-bottom))}.main{padding:calc(var(--sp-lg) + env(safe-area-inset-top)) var(--sp-lg) var(--sp-xl);gap:var(--sp-lg);align-content:start;width:100%;max-width:1000px;margin:0 auto;display:grid}.brand{align-items:center;gap:var(--sp-md);font-weight:600;display:flex}.nav{z-index:5;gap:var(--sp-xs);padding:var(--sp-sm) var(--sp-md) calc(var(--sp-sm) + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--border);grid-template-columns:repeat(4,1fr);display:grid;position:fixed;inset:auto 0 0}.nav .brand{display:none}.nav a{border-radius:var(--r-lg);z-index:1;align-content:center;justify-items:center;gap:2px;min-height:56px;font-size:12px;line-height:18px;display:grid;position:relative}.pill{background:var(--primary);position:absolute;top:0;left:0}.nav .pill{border-radius:var(--r-lg)}.pill.slide{transition:transform var(--dur-slow) var(--ease-spring), width var(--dur-slow) var(--ease-out), height var(--dur-slow) var(--ease-out)}.pill.appear{animation:pop .6s var(--ease-spring) both}@media (width>=768px){.shell{grid-template-columns:208px minmax(0,1fr);padding-bottom:0;display:grid}.nav{top:0;height:100dvh;padding:var(--sp-xl) var(--sp-md);border-top:0;flex-direction:column;display:flex;position:sticky;inset:auto}.nav .brand{text-align:center;padding-bottom:var(--sp-xl);flex-direction:column;display:flex}.nav .brand svg{width:48px;height:48px}.nav a{gap:var(--sp-md);padding:0 var(--sp-lg);align-items:center;font-size:16px;line-height:24px;display:flex}.main{padding:var(--sp-xxl)}.topbrand{display:none}h1{font-size:36px;line-height:54px}h2{font-size:22px;line-height:33px}}@media (height<=500px){.nav .brand{display:none}}.card{background:var(--surface);border-radius:var(--r-lg);padding:var(--sp-xl);gap:var(--sp-lg);align-content:start;min-width:0;display:grid}.card.hero{background:var(--primary)}.home{gap:var(--sp-lg);display:grid}.wide{grid-column:1/-1}@media (width>=768px){.home{grid-template-columns:1.2fr 1fr}}.btn{justify-content:center;align-items:center;gap:var(--sp-md);min-height:52px;padding:0 var(--sp-xl);border-radius:var(--r-btn);background:var(--primary);width:100%;font-weight:600;display:flex}.btn.white{background:var(--surface);justify-content:space-between}.btn.quiet{background:var(--primarySoft)}.chip{align-items:center;gap:var(--sp-xs);min-height:44px;padding:0 var(--sp-lg);border-radius:var(--r-btn);background:var(--primarySoft);font-size:14px;display:inline-flex}.chip[aria-pressed=true]{background:var(--accent);font-weight:600}.tag{border-radius:var(--r-sm);background:var(--primarySoft);color:var(--muted);padding:2px 10px;font-size:14px;line-height:21px;display:inline-block}.badge{padding:var(--sp-xs) var(--sp-lg);border-radius:var(--r-btn);background:var(--accent);justify-self:start;font-weight:600;display:inline-block}.bar{background:var(--surface);border-radius:999px;height:12px;overflow:hidden}.bar.on-white{background:var(--primary);height:6px}.bar i{background:var(--text);border-radius:999px;height:100%;display:block}.week{gap:var(--sp-xs);text-align:center;grid-template-columns:repeat(7,1fr);font-size:14px;display:grid}.dot{aspect-ratio:1;width:min(32px,100%);margin:var(--sp-xs) auto 0;border:2px solid var(--borderStrong);border-radius:50%;place-items:center;display:grid}.dot.on{background:var(--primary);border-color:var(--text)}.dot svg.i{width:18px;height:18px}.link{justify-content:space-between;align-items:center;gap:var(--sp-lg);text-align:left;width:100%;min-height:56px;display:flex}.topic{gap:var(--sp-sm);flex:1;min-width:0;display:grid}.meter{background:var(--primarySoft);border-radius:999px;height:8px;overflow:hidden}.meter i{background:var(--chart);transform-origin:0;border-radius:999px;height:100%;display:block}.enter .meter i{animation:grow .7s var(--ease-out) .24s both}.subjects{gap:var(--sp-lg);display:grid}@media (width>=768px){.subjects{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:start}}.list{display:grid}.list>*{padding:var(--sp-lg) 0;border-top:1px solid var(--border)}.list>:first-child{border-top:0;padding-top:0}.list>:last-child{padding-bottom:0}.empty{text-align:center;padding:var(--sp-xl) 0;gap:var(--sp-sm);display:grid}.alert{padding:var(--sp-lg);border-radius:var(--r-md);border:1px solid var(--warning);color:var(--warning);background:var(--surface);font-size:14px;line-height:21px}.alert.bad{border-color:var(--danger);color:var(--danger)}.error{color:var(--danger);font-size:14px}input.field,textarea.field{width:100%;min-height:48px;padding:var(--sp-md) var(--sp-lg);border:1px solid var(--borderStrong);border-radius:var(--r-md);background:var(--surface)}.solve{max-width:1200px;min-height:100dvh;padding:0 var(--sp-lg);gap:var(--sp-lg);grid-template-rows:auto 1fr auto;margin:0 auto;display:grid}.solve.center{padding-block:calc(var(--sp-lg) + env(safe-area-inset-top)) calc(var(--sp-lg) + env(safe-area-inset-bottom));grid-template-rows:1fr;align-items:center}.solve header{z-index:4;gap:var(--sp-md);padding:calc(var(--sp-md) + env(safe-area-inset-top)) 0 var(--sp-md);background:var(--surface2);display:grid;position:sticky;top:0}.dock{z-index:4;gap:var(--sp-md);padding:var(--sp-md) 0 calc(var(--sp-lg) + env(safe-area-inset-bottom));background:var(--surface2);display:flex;position:sticky;bottom:0}.dock .btn.quiet{background:var(--surface)}.scrim{z-index:9;opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease-out);background:#02020266;position:fixed;inset:0}.scrim[data-open]{opacity:1;pointer-events:auto}.grab{width:100%;padding:var(--sp-sm) 0 var(--sp-md);margin-top:calc(var(--sp-lg) * -1);touch-action:none;justify-self:center;place-items:center;display:grid}.grab:before{content:"";background:var(--borderStrong);border-radius:999px;width:40px;height:5px}.iconbtn{border-radius:50%;place-items:center;width:44px;height:44px;display:grid}.cols{gap:var(--sp-lg);align-items:start;display:grid}.stem{white-space:pre-wrap}.figure summary{cursor:pointer;color:var(--muted)}.zoomable{width:100%;margin-top:var(--sp-md);cursor:zoom-in;display:block}.zoomable img{border-radius:var(--r-md);width:100%;height:auto;display:block}.choices{gap:var(--sp-md);border:0;min-width:0;margin:0;padding:0;display:grid}.choice{gap:var(--sp-md);padding:12px var(--sp-lg);border:1px solid var(--borderStrong);border-radius:var(--r-choice);cursor:pointer;min-height:48px;display:flex}.choice input{opacity:0;position:absolute}.choice:has(input:checked){background:var(--primary);border:2px solid var(--text);padding:11px 15px;font-weight:600}.choice:has(input:focus-visible){outline:2px solid var(--text);outline-offset:2px}.choice.right{border:2px solid var(--success);padding:11px 15px}.choice.wrong{border:2px solid var(--danger);padding:11px 15px}.choice .mark{white-space:nowrap;margin-left:auto;font-size:14px;font-weight:600}.choice.right .mark{color:var(--success)}.choice.wrong .mark{color:var(--danger)}.verdict{gap:var(--sp-md);align-items:center;font-weight:600;display:flex}.verdict.ok{color:var(--success)}.verdict.no{color:var(--danger)}.actions{gap:var(--sp-md);flex-wrap:wrap;display:flex}.skeleton{gap:var(--sp-md);display:grid}.skeleton i{border-radius:var(--r-sm);background:var(--primarySoft);height:16px;animation:1.4s ease-in-out infinite pulse}.skeleton i:nth-child(3n){width:70%}@keyframes pulse{50%{opacity:.45}}.basis{margin-top:var(--sp-sm);color:var(--muted);font-size:14px;line-height:21px}.basis summary{cursor:pointer}.basis blockquote{margin:var(--sp-sm) 0 0;padding-left:var(--sp-md);border-left:2px solid var(--primary);color:var(--text)}.say{padding:var(--sp-md) var(--sp-lg);border-radius:var(--r-lg);white-space:pre-wrap}.say.me{background:var(--primarySoft);margin-left:var(--sp-xl)}.openexplain{display:flex}.explain{inset:auto 0 var(--kb,0px) 0;z-index:10;max-height:calc(80dvh - var(--kb,0px));overscroll-behavior:contain;border-radius:var(--r-lg) var(--r-lg) 0 0;padding-bottom:calc(var(--sp-xl) + env(safe-area-inset-bottom));visibility:hidden;transition:transform var(--dur-slow) var(--ease-out), visibility 0s var(--dur-slow);position:fixed;overflow-y:auto;transform:translateY(105%)}.explain[data-open]{visibility:visible;transition:transform var(--dur-slow) var(--ease-out);transform:none;box-shadow:0 -8px 24px #02020229}@media (width>=900px){.cols.open{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}.explain,.explain[data-open]{top:var(--sp-lg);z-index:auto;max-height:calc(100dvh - 2 * var(--sp-lg));border-radius:var(--r-lg);box-shadow:none;visibility:visible;transition:none;position:sticky;inset:auto;transform:none}.reveal .explain{animation:from-right var(--dur-slow) var(--ease-bounce) both}.openexplain,.grab,.scrim{display:none}}.charts{gap:var(--sp-lg);display:grid}@media (width>=768px){.charts{grid-template-columns:repeat(3,minmax(0,1fr))}}.chart svg{width:100%;height:auto;display:block}.chart .gridline{stroke:var(--border);stroke-width:1px}.chart .line{fill:none;stroke:var(--chart);stroke-width:3px;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1}.chart .area{fill:var(--primary)}.chart .pt{fill:var(--chart);stroke:var(--surface);stroke-width:2px;transform-box:fill-box;transform-origin:50%}.chart .hit{fill:#0000}.chart text{font:400 12px var(--font-sans);fill:var(--muted)}.calendar{gap:var(--sp-xs);text-align:center;grid-template-columns:repeat(7,minmax(0,1fr));font-size:14px;display:grid}.calendar .cell{border-radius:var(--r-md);place-content:center;justify-items:center;height:52px;display:grid}.calendar .cell.on{background:var(--primary)}.calendar .cell.today{outline:2px solid var(--text);outline-offset:-2px}.calendar svg.i{width:14px;height:14px}dialog{border-radius:var(--r-lg);padding:var(--sp-xxl) var(--sp-xl);width:min(560px,100vw - 32px);max-width:none;max-height:calc(100dvh - 32px);color:var(--text);border:0}dialog:focus{outline:none}dialog .stack{gap:var(--sp-xl)}@media (width>=768px){dialog{padding:40px}}dialog::backdrop{background:#02020266}#zoom{background:var(--surface);border-radius:0;width:100vw;height:100dvh;max-height:none;padding:0}#zoom img{object-fit:contain;width:100%;height:100%;display:block}#zoom .iconbtn{top:calc(env(safe-area-inset-top) + var(--sp-md));right:var(--sp-md);background:var(--surface2);position:fixed}.notice{gap:12px;margin:0;padding-left:20px;display:grid}@keyframes rise{0%{opacity:0;transform:translateY(30px)}}@keyframes from-right{0%{opacity:0;transform:translate(64px)}}@keyframes from-left{0%{opacity:0;transform:translate(-64px)}}@keyframes present{0%{opacity:0;transform:translateY(40px)}}@keyframes swing-left{0%{opacity:0;transform:translate(-90px,28px)rotate(-5deg)}}@keyframes swing-right{0%{opacity:0;transform:translate(90px,28px)rotate(5deg)}}@keyframes drift-up{to{transform:translateY(-50%)}}@keyframes drift-down{0%{transform:translateY(-50%)}to{transform:translateY(0)}}@keyframes fade{0%{opacity:0}}@keyframes pop{0%{opacity:0;transform:scale(.7)}}@keyframes press{45%{transform:scale(1.05)}}@keyframes shake{20%,60%{transform:translate(-12px)}40%,80%{transform:translate(12px)}}@keyframes grow{0%{transform:scaleX(0)}}@keyframes draw{0%{stroke-dashoffset:1px}to{stroke-dashoffset:0}}.btn,.chip,.link,.iconbtn,.nav a,.choice{transition:transform var(--dur-fast) var(--ease-out), background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out)}.btn:active,.chip:active,.iconbtn:active,.nav a:active{transform:scale(.96)}.link:active,.choice:active{transform:scale(.985)}.chip[aria-pressed=true]{animation:press var(--dur-slow) var(--ease-bounce)}.choice:has(input:checked){animation:press var(--dur-slow) var(--ease-bounce)}.bar i{transition:width var(--dur-slow) var(--ease-out)}.enter .main>*{animation:rise var(--dur-slow) var(--ease-bounce) both}.enter .main>:nth-child(2){animation-delay:60ms}.enter .main>:nth-child(3){animation-delay:.12s}.enter .main>:nth-child(4){animation-delay:.18s}.enter .main>:nth-child(n+5){animation-delay:.24s}.shell.again .main{animation:fade .18s var(--ease-out)}.shell.push .main>*,.shell.back .main>*{animation-duration:.34s;animation-delay:0s;animation-timing-function:var(--ease-out)}.shell.push .main>*{animation-name:from-right}.shell.back .main>*{animation-name:from-left}.solve.present{animation:present var(--dur-slow) var(--ease-out) both}.solve.present .cols>.card{animation:none}.enter .home>*{animation:rise var(--dur-slow) var(--ease-bounce) both}.enter .home>:nth-child(2){animation-delay:.11s}.enter .home>:nth-child(3){animation-delay:.22s}.enter .hero .bar i{transform-origin:0;animation:grow .7s var(--ease-out) .2s both}.enter .badge{animation:pop var(--dur-slow) var(--ease-spring) .24s both}.enter .dot{animation:pop var(--dur-slow) var(--ease-spring) both}.enter .week>:first-child .dot{animation-delay:.24s}.enter .week>:nth-child(2) .dot{animation-delay:.28s}.enter .week>:nth-child(3) .dot{animation-delay:.32s}.enter .week>:nth-child(4) .dot{animation-delay:.36s}.enter .week>:nth-child(5) .dot{animation-delay:.4s}.enter .week>:nth-child(6) .dot{animation-delay:.44s}.enter .week>:nth-child(7) .dot{animation-delay:.48s}.chart.pending .line{stroke-dashoffset:1px}.chart.pending .pt,.chart.pending .area{opacity:0}.chart.draw .line{animation:draw 1s var(--ease-out) both}.chart.draw .pt{animation:pop var(--dur-slow) var(--ease-bounce) calc(var(--at) * .7s) both}.chart.draw .area{animation:fade .5s var(--ease-out) .9s both}.solve.enter .cols>.card{animation:from-right var(--dur-slow) var(--ease-bounce) both}.solve.enter .choice{animation:rise var(--dur-slow) var(--ease-bounce) both}.solve.enter .choice:nth-child(3){animation-delay:.11s}.solve.enter .choice:nth-child(4){animation-delay:.22s}.solve.enter .choice:nth-child(5){animation-delay:.33s}.solve.enter .choice:nth-child(6){animation-delay:.44s}.reveal .choice.right{animation:press var(--dur-slow) var(--ease-bounce)}.reveal .choice.wrong{animation:shake var(--dur-slow) var(--ease-out)}.reveal .choice .mark,.reveal .verdict{animation:pop var(--dur-slow) var(--ease-bounce) both}.reveal .verdict~*{animation:rise var(--dur-slow) var(--ease-bounce) .12s both}.explain.fresh>*,.say{animation:rise var(--dur-slow) var(--ease-bounce) both}.pop{animation:pop var(--dur-slow) var(--ease-spring) both}dialog[open]{animation:pop var(--dur) var(--ease-out)}dialog[open]::backdrop{animation:fade var(--dur) var(--ease-out)}.dot.on svg path{stroke-dasharray:1}.enter .dot.on svg path{animation:draw .5s var(--ease-out) .6s both}.mark{fill:none;stroke:currentColor;stroke-width:7px;stroke-linecap:round;stroke-linejoin:round;flex:none;width:28px;height:28px}.pop .mark,.empty .mark{stroke-width:4px;width:96px;height:auto}.empty .mark{justify-self:center}.m-ring,.m-sign,.m-line,.m-line2{stroke-dasharray:1}.pop .m-ring,.empty .m-ring{fill:var(--primary)}.hero .m-ring{fill:var(--surface)}.m-line,.m-line2{stroke:var(--borderStrong)}@keyframes fill-in{0%{fill-opacity:0}}:is(.enter,.pop,.reveal) .m-ring{animation:draw .6s var(--ease-out) .15s both, fill-in .5s var(--ease-out) 1.25s both}:is(.enter,.pop,.reveal) .m-sign{animation:draw .42s var(--ease-out) .7s both}:is(.enter,.pop,.reveal) .m-line{animation:draw .3s var(--ease-out) 1.05s both}:is(.enter,.pop,.reveal) .m-line2{animation:draw .26s var(--ease-out) 1.25s both}.reveal .verdict .m-ring{animation-duration:.36s,0s;animation-delay:0s,0s}.reveal .verdict .m-sign{animation-duration:.3s;animation-delay:.3s}@media (prefers-reduced-motion:reduce){*,:before,:after,::backdrop{transition:none!important;animation:none!important}}.choice.right:has(input:checked){border-color:var(--success)}.choice.wrong:has(input:checked){border-color:var(--danger)}
