:root{--color-paper:oklch(17% .045 275);--color-paper-2:oklch(21% .05 275);--color-paper-3:oklch(26% .055 275);--color-rule:oklch(32% .05 275);--color-muted:oklch(70% .02 275);--color-ink:oklch(95% .012 95);--color-ink-2:oklch(84% .015 95);--color-accent:oklch(86% .17 92);--color-accent-deep:oklch(62% .15 80);--color-accent-ink:oklch(20% .03 80);--color-ok:oklch(88% .2 120);--color-bad:oklch(60% .21 20);--color-focus:oklch(90% .2 95);--color-shadow:oklch(8% .03 275);--type-normal:oklch(70% .02 90);--type-fire:oklch(62% .21 30);--type-water:oklch(60% .17 255);--type-grass:oklch(65% .17 140);--type-electric:oklch(84% .17 90);--type-ice:oklch(80% .1 215);--type-fighting:oklch(66% .2 45);--type-poison:oklch(52% .19 310);--type-ground:oklch(55% .11 60);--type-flying:oklch(74% .1 250);--type-psychic:oklch(64% .22 355);--type-bug:oklch(66% .15 115);--type-rock:oklch(68% .07 90);--type-ghost:oklch(45% .12 320);--type-dragon:oklch(52% .2 275);--type-dark:oklch(40% .04 30);--type-steel:oklch(68% .06 220);--type-fairy:oklch(75% .16 340);--font-display:"Black Han Sans", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;--font-body:"IBM Plex Sans KR", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-md:1.2rem;--text-lg:1.44rem;--text-xl:1.73rem;--text-2xl:2.5rem;--text-figure:clamp(5rem, 24vw, 7rem);--space-2xs:.5rem;--space-xs:.75rem;--space-sm:1rem;--space-md:1.5rem;--space-lg:2rem;--space-xl:3rem;--radius-card:20px;--radius-tile:14px;--radius-pill:999px;--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-press:cubic-bezier(.2, .7, .3, 1);--dur-micro:.12s;--dur-short:.22s;--z-rail:10;--z-toast:30}*,:before,:after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;margin:0;overflow-x:clip}body{background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body);font-size:var(--text-base);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;line-height:1.5}#root{height:100%}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}img{max-width:100%}h1,h2,h3{font-family:var(--font-display);text-wrap:balance;overflow-wrap:anywhere;min-width:0;margin:0;font-weight:400;line-height:1.05}.display{font-family:var(--font-display);overflow-wrap:anywhere;min-width:0;font-weight:400;line-height:1}.screen{gap:var(--space-sm);min-height:100dvh;padding:max(var(--space-xs), env(safe-area-inset-top)) var(--space-sm) max(var(--space-sm), env(safe-area-inset-bottom));flex-direction:column;display:flex}.topbar{justify-content:space-between;align-items:center;gap:var(--space-2xs);min-height:44px;display:flex}.topbar h2{text-align:center;font-size:var(--text-lg);letter-spacing:.02em;flex:1}.textbtn{min-height:44px;padding:0 var(--space-xs);align-items:center;gap:var(--space-2xs);border-radius:var(--radius-pill);color:var(--color-ink-2);white-space:nowrap;transition:color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);background:0 0;border:0;font-weight:600;display:inline-flex}.textbtn:hover{color:var(--color-ink);background:var(--color-paper-2)}.textbtn:active{background:var(--color-paper-3)}.badge{align-items:center;gap:var(--space-2xs);padding:4px var(--space-xs);border-radius:var(--radius-pill);border:1.5px solid var(--color-accent);color:var(--color-accent);font-size:var(--text-xs);letter-spacing:.08em;white-space:nowrap;font-weight:600;display:inline-flex}:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}.btn{--face:var(--color-paper-3);--edge:var(--color-rule);--ink:var(--color-ink);min-height:68px;padding:var(--space-xs) var(--space-md);border-radius:var(--radius-tile);background:var(--face);color:var(--ink);font-size:var(--text-md);cursor:pointer;touch-action:manipulation;box-shadow:0 4px 0 0 var(--edge), 0 8px 16px -6px var(--color-shadow);transition:transform .14s var(--ease-press), box-shadow .14s var(--ease-press);border:0;flex-direction:column;justify-content:center;align-items:center;gap:2px;font-weight:600;display:flex;transform:translateY(0)}.btn:hover{box-shadow:0 6px 0 0 var(--edge), 0 14px 24px -8px var(--color-shadow);transform:translateY(-2px)}.btn:active{box-shadow:0 1px 0 0 var(--edge), 0 2px 6px -2px var(--color-shadow);transition-duration:70ms;transform:translateY(3px)}.btn.primary{--face:var(--color-accent);--edge:var(--color-accent-deep);--ink:var(--color-accent-ink)}.btn[disabled],.btn[aria-disabled=true]{opacity:.5;pointer-events:none;box-shadow:0 4px 0 0 var(--edge);transform:none}.btn.ghost{min-height:48px;box-shadow:none;color:var(--color-muted);background:0 0}.btn.ghost:hover{color:var(--color-ink);transform:none}.menu{gap:var(--space-sm);flex-direction:column;display:flex}.home{gap:var(--space-xs)}.hero{margin:var(--space-md) 0;flex-direction:column;align-items:center;display:flex}.hero img{width:min(78%,360px);height:auto}.wordmark{margin-top:calc(-1 * var(--space-sm));color:var(--color-accent);font-size:var(--text-2xl);letter-spacing:.14em}.topbar-actions{align-items:center;gap:var(--space-2xs);display:flex}.circlebtn{border:1.5px solid var(--color-accent);width:40px;height:40px;color:var(--color-accent);font-family:var(--font-display);font-size:var(--text-md);transition:background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);border-radius:50%;place-items:center;line-height:1;display:grid}.circlebtn:hover{background:var(--color-paper-2)}.circlebtn:active{background:var(--color-accent);color:var(--color-accent-ink)}.record{padding-top:var(--space-lg);align-items:baseline;gap:var(--space-2xs);color:var(--color-muted);margin-top:auto;display:flex}.record .display{color:var(--color-ink);font-size:var(--text-xl)}.credit{color:var(--color-muted);font-size:var(--text-xs);margin:0;line-height:1.45}.doc{gap:var(--space-2xs);flex-direction:column;max-width:65ch;display:flex}.doc h3{margin-top:var(--space-md);font-size:var(--text-lg);color:var(--color-accent);letter-spacing:.02em}.doc h3:first-child{margin-top:var(--space-2xs)}.doc p,.doc dd,.doc li{color:var(--color-ink-2);margin:0;line-height:1.6}.doc dl{gap:var(--space-2xs);flex-direction:column;margin:0;display:flex}.doc dt{color:var(--color-ink);margin-top:var(--space-2xs);font-weight:600}.doc ul{gap:var(--space-2xs);flex-direction:column;margin:0;padding-left:1.2em;display:flex}.eyebrow-none h3{font-family:var(--font-body);font-weight:600;font-size:var(--text-sm);color:var(--color-muted);margin-top:var(--space-2xs)}.options{gap:var(--space-2xs);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.option{padding:var(--space-sm) var(--space-md);border-radius:var(--radius-tile);border:2px solid var(--color-rule);background:var(--color-paper-2);cursor:pointer;transition:border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);flex-direction:column;gap:2px;display:flex}.option:hover{background:var(--color-paper-3)}.option.on{border-color:var(--color-accent)}.option input{opacity:0;width:1px;height:1px;position:absolute}.option span{font-family:var(--font-display);font-size:var(--text-md);letter-spacing:.02em}.option.on span{color:var(--color-accent)}.option small{color:var(--color-muted);font-size:var(--text-sm)}.quiz{padding-top:0}.timer{background:var(--color-paper-3);height:6px;z-index:var(--z-rail);position:fixed;top:0;left:0;right:0}.timer-bar{background:var(--color-accent);transform-origin:0;height:100%;transform:scaleX(1)}.quiz .topbar{margin-top:max(var(--space-2xs), env(safe-area-inset-top))}.streak{font-family:var(--font-display);font-size:var(--text-lg);letter-spacing:.02em}.category{text-align:center;font-family:var(--font-display);font-size:var(--text-xl);letter-spacing:.06em;color:var(--color-accent);margin:0;line-height:1}.arena{gap:var(--space-sm);flex-direction:column;flex:1;display:flex;position:relative}.seal{z-index:1;pointer-events:none;background:var(--color-paper-3);border:2px solid var(--color-rule);width:44px;height:44px;color:var(--color-accent);font-family:var(--font-display);font-size:var(--text-sm);letter-spacing:.06em;border-radius:50%;place-items:center;display:grid;position:absolute;top:50%;left:50%;translate:-50% -50%}.card{justify-content:center;align-items:center;gap:var(--space-2xs);border-radius:var(--radius-card);border:2px solid var(--color-rule);background:var(--color-paper-2);cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;min-height:0;transition:border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);flex-direction:column;flex:1;display:flex;position:relative}.card:hover{background:var(--color-paper-3)}.card:active{transform:scale(.985)}.card:disabled{cursor:default;transform:none}.card.right{border-color:var(--color-ok);background:color-mix(in oklch, var(--color-ok) 10%, var(--color-paper-2))}.card.wrong{border-color:var(--color-bad);background:color-mix(in oklch, var(--color-bad) 14%, var(--color-paper-2))}.sprite{aspect-ratio:1;object-fit:contain;width:min(34dvh,66vw);max-width:220px;filter:drop-shadow(0 10px 14px var(--color-shadow))}.types{gap:var(--space-2xs);display:flex}.type{background:var(--type);border-radius:50%;width:34px;height:34px;padding:7px}.name{top:var(--space-xs);left:var(--space-sm);right:var(--space-sm);font-weight:600;font-size:var(--text-md);justify-content:space-between;align-items:baseline;display:flex;position:absolute}.name .display{font-size:var(--text-xl);color:var(--color-ink)}.card.right .name .display{color:var(--color-ok)}.hint{text-align:center;min-height:24px;color:var(--color-muted);font-size:var(--text-sm);margin:0}.result{justify-content:center}.result .badge{align-self:flex-start}.figure{align-items:baseline;gap:var(--space-xs);margin:var(--space-sm) 0 var(--space-md);flex-wrap:wrap;display:flex}.figure .display{font-size:var(--text-figure);color:var(--color-ink);background-image:linear-gradient(var(--color-accent) 0 0);background-position:0 92%;background-repeat:no-repeat;background-size:100% .12em}.figure .words{font-size:var(--text-lg);color:var(--color-ink-2);font-weight:600}.figure .sep{color:var(--color-muted);font-size:var(--text-lg)}.newbest{margin:calc(-1 * var(--space-xs)) 0 var(--space-md);color:var(--color-ok);font-weight:600}.subline{margin:calc(-1 * var(--space-xs)) 0 var(--space-md);color:var(--color-muted)}.result .menu{width:100%}.toast{z-index:var(--z-toast);bottom:max(var(--space-md), env(safe-area-inset-bottom));padding:var(--space-2xs) var(--space-sm);border-radius:var(--radius-pill);background:var(--color-ink);color:var(--color-paper);font-size:var(--text-sm);font-weight:600;position:fixed;left:50%;translate:-50%}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:0s!important;animation:none!important}.btn:hover,.btn:active,.card:active{transform:none}}