:root{--font:"IBM Plex Sans KR","IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--shell:#f1ece4;--paper:#faf7f2;--card:#fff;--tint:#f0ebe3;--tint-2:#e8e1d6;--tint-hover:#ded5c6;--accent-tint:#f8e6dc;--sentence-tint:#e3ede4;--hover:#fffdfb;--ink:#2a231e;--ink-2:#6b5f55;--ink-3:#786c5e;--ink-4:#8a7d70;--on-accent:#fff;--line:#e6dfd4;--line-strong:#ddd5c9;--line-soft:#f0ebe3;--track:#ece5da;--hover-line:#d9c4b6;--btn-edge:#9a8c7e;--accent:#b5542c;--accent-ink:#fff;--accent-deep:#9d4725;--sentence:#4d6b52;--stage-0:#b5542c;--stage-1:#c9704f;--stage-2:#d98f72;--stage-3:#e2a68c;--stage-4:#e8bda9;--stage-edge:#b5542c;--ok-bg:#e8efe6;--ok-ink:#40634a;--ok-line:#c3d5c4;--warn-bg:#fbf1df;--warn-ink:#7d5a1e;--warn-line:#ead9b6;--bad-bg:#f7e4de;--bad-ink:#8f3520;--bad-line:#e3c4bb;--mute-bg:#f0ebe3;--mute-ink:#6b5f55;--mute-line:#ddd5c9;--r-pill:999px;--r-bar:99px;--r-card:18px;--r-inner:16px;--r-action:14px;--r-cta:12px;--r-sm:10px;--r-kbd:5px;--r-tick:6px 6px 3px 3px;--sp-1:4px;--sp-2:6px;--sp-3:8px;--sp-4:10px;--sp-5:12px;--sp-6:14px;--sp-7:16px;--sp-8:20px;--sp-9:22px;--sp-10:28px;--sp-11:32px;--sp-12:36px;--sp-13:40px;--w-canvas:1280px;--w-hub:1080px;--w-mid:720px;--w-prompt:820px;--w-focus:640px;--w-form:480px;--h-canvas:800px;--inset:var(--sp-13);--inset-wide:120px;--foot-gap:var(--sp-11)}*{box-sizing:border-box}html,body{height:100%}body{background:var(--shell);color:var(--ink);font:14px/1.55 var(--font);-webkit-font-smoothing:antialiased;margin:0}button{font:inherit;cursor:pointer;color:inherit}code{font-family:var(--mono);font-size:.92em}a{color:inherit}#app{max-width:var(--w-canvas);background:var(--paper);min-height:100vh;margin:0 auto}.sc{background:var(--paper);flex-direction:column;min-height:100vh;display:flex}.hd{align-items:center;gap:var(--sp-6);min-height:76px;padding:0 var(--inset);border-bottom:1px solid var(--line);letter-spacing:-.01em;font-size:17px;font-weight:600;display:flex}.hd.plain{border-bottom:0}.hd .brand{letter-spacing:-.01em;font-size:17px;font-weight:700}.hd-title{letter-spacing:-.01em;font-size:17px;font-weight:600}.hd-word{letter-spacing:-.02em;overflow-wrap:anywhere;min-width:0;font-size:22px;font-weight:600}.hd-state{color:var(--ink-3);font-size:12.5px;font-weight:400}.hd-count{text-align:center;color:var(--ink-3);flex:1;font-size:13px;font-weight:400}.hd .thumb{border-radius:var(--r-sm);width:36px;height:36px;font-size:10px}.back{color:var(--ink-3);background:0 0;border:0;padding:0 2px;font-size:18px;line-height:1}.back:hover{color:var(--ink)}.progress{margin:0 var(--inset);background:var(--track);border-radius:var(--r-bar);height:3px;overflow:hidden}.progress i{background:var(--accent);height:100%;display:block}.body{gap:var(--sp-8);padding:var(--sp-11) var(--inset);width:100%;max-width:var(--w-hub);box-sizing:border-box;flex-direction:column;flex:1;margin:0 auto;display:flex}.body.hub{gap:var(--sp-10);padding:44px var(--inset-wide)}.body.wide{width:100%;max-width:none}.body.narrow{max-width:var(--w-form);gap:var(--sp-9);padding:48px var(--inset)}.body.mid{max-width:var(--w-mid);gap:var(--sp-7)}.body.focus{max-width:var(--w-focus);gap:var(--sp-12);padding:var(--inset);text-align:center;justify-content:center;align-items:center}.body.focus>*{width:100%}.body.flush{flex:none;padding-top:0;padding-bottom:0}.center{justify-content:center;align-items:center;gap:var(--sp-9);text-align:center;padding:var(--inset);width:100%;max-width:var(--w-focus);flex-direction:column;flex:1;margin:0 auto;display:flex}.center:has(>.big){max-width:var(--w-prompt)}.foot{gap:var(--sp-6);padding:0 var(--inset) calc(var(--foot-gap) + env(safe-area-inset-bottom));display:flex}.foot>.btn,.foot.wide>.btn{flex:1}.foot.inset{padding:0 var(--inset-wide) calc(var(--foot-gap) + env(safe-area-inset-bottom))}.foot.flush{width:100%;padding:0}.body:has(>.foot.flush){padding-bottom:calc(var(--foot-gap) + env(safe-area-inset-bottom))}.foot .btn.fixed{flex:0 0 200px}.foot>.btn.danger{padding-left:var(--sp-10);padding-right:var(--sp-10);flex:none}.sc:has(>.center:not(:has(>.big)))>.foot.inset{width:100%;max-width:var(--w-focus);margin:0 auto;padding-left:0;padding-right:0}.metabar,.undo{color:var(--ink-3);justify-content:space-between;align-items:center;font-size:12.5px;display:flex}.metabar{padding:0 var(--inset-wide) var(--sp-5)}.undoline{align-items:center;gap:var(--sp-2);color:var(--ink-2);font:inherit;background:0 0;border:0;padding:0;font-size:12.5px;display:inline-flex}button.undoline{cursor:pointer}button.undoline:hover{color:var(--ink)}.count{font-variant-numeric:tabular-nums;color:var(--accent)}.two{gap:var(--sp-10);grid-template-columns:2fr 3fr;align-items:start;min-height:0;display:grid}.two.fill{flex:1;min-height:0}.two.half{gap:var(--sp-8);grid-template-columns:1fr 1fr}.two.single{max-width:var(--w-mid);grid-template-columns:1fr;width:100%;margin:0 auto}.two:has(>:only-child){max-width:var(--w-mid);grid-template-columns:1fr;width:100%;margin:0 auto}.two>.l{gap:var(--sp-5);flex-direction:column;min-width:0;display:flex}.two>.r{gap:var(--sp-6);flex-direction:column;min-width:0;display:flex}.split{gap:var(--sp-8);grid-template-columns:1fr 1fr;display:grid}.split.tight{gap:var(--sp-7)}.row{gap:var(--sp-4);align-items:center;display:flex}:is(.row:has(>.meaning),.row:has(>.title.sm)){align-items:baseline;gap:var(--sp-5)}.col{gap:var(--sp-5);flex-direction:column;display:flex}.col.tight{gap:var(--sp-2)}.col.loose{gap:var(--sp-8)}.list{gap:var(--sp-4);flex-direction:column;display:flex}.chips{gap:var(--sp-3);flex-wrap:wrap;display:flex}.spacer{flex:1}.btn{background:var(--accent);color:var(--accent-ink);border-radius:var(--r-action);letter-spacing:-.01em;border:1px solid #0000;padding:16px;font-size:15px;font-weight:600;transition:background .12s,border-color .12s,color .12s}.btn:hover{background:var(--accent-deep)}.btn.lg{border-radius:var(--r-action);padding:18px;font-size:16px}.btn.md{border-radius:var(--r-action);padding:16px;font-size:15px}.btn.sm{border-radius:var(--r-sm);padding:11px;font-size:13px}.btn.block{width:100%}.btn.grow{flex:1}.btn.f20{flex:20}.btn.f40{flex:40}.btn.f60{flex:60}.btn.f80{flex:80}.btn.ghost{background:var(--tint-2);color:var(--ink);border:1px solid var(--btn-edge)}.btn.ghost:hover{background:var(--tint-hover);border-color:var(--ink-3)}.btn.line{background:var(--card);color:var(--ink);border:1px solid var(--btn-edge)}.btn.line:hover{background:var(--hover);border-color:var(--ink-3)}.btn.quiet{color:var(--ink-2);border:1px solid var(--btn-edge);background:0 0}.btn.quiet:hover{background:var(--card);color:var(--ink);border-color:var(--ink-3)}.btn.quiet{font-weight:400}.btn.quiet.lg{font-size:15px}.btn.danger{background:var(--card);color:var(--bad-ink);border:1px solid var(--bad-line)}.btn.danger:hover{background:var(--bad-bg);border-color:var(--bad-ink)}.btn:disabled{background:var(--tint-2);color:var(--ink-2);border-color:var(--line-strong);opacity:1;cursor:not-allowed}.btn:disabled:hover{background:var(--tint-2);color:var(--ink-2);border-color:var(--line-strong)}.btn .keyhint{opacity:.7;margin-left:var(--sp-2);font-size:13px;font-weight:400}.btn.play{justify-content:center;align-items:center;gap:var(--sp-3);display:flex}.icon-play{border-top:6px solid #0000;border-bottom:6px solid #0000;border-left:9px solid;width:0;height:0}.pill,.mini{font:inherit;color:var(--ink-2);border:1px solid var(--btn-edge);border-radius:var(--r-pill);background:0 0;margin:0;padding:7px 16px;font-size:13px;font-weight:400}.pill:hover,.mini:hover{background:var(--card);color:var(--ink);border-color:var(--ink-3)}.item>.mini{border-radius:var(--r-sm);width:28px;height:28px;color:var(--ink-3);background:0 0;border:0;flex:none;padding:0;font-size:15px;line-height:1}.item>.mini:hover{background:var(--tint);color:var(--ink)}.btn:focus-visible,.pill:focus-visible,.chip:focus-visible,button.item:focus-visible,.tile:focus-visible,.linkrow:focus-visible,.back:focus-visible,.mini:focus-visible,button.undoline:focus-visible,.drop:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn:focus-visible{box-shadow:inset 0 0 0 2px var(--paper)}.btn.ghost:focus-visible,.btn.line:focus-visible,.btn.quiet:focus-visible,.btn.danger:focus-visible,.btn:disabled:focus-visible{box-shadow:none}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);gap:var(--sp-6);flex-direction:column;padding:24px 28px;display:flex}.card.roomy{gap:var(--sp-8);padding:28px}.card.inner{border-radius:var(--r-inner);gap:var(--sp-4);padding:20px 24px}.card.pad-tight{gap:var(--sp-5);padding:22px 26px}.card.center{text-align:center;align-items:center}.card.baseline{align-items:baseline;gap:var(--sp-5);flex-direction:row}.card.rows{gap:0}.card:has(>.kv){gap:0}.card.rows>:not(.kv){margin-top:var(--sp-4)}.card:has(>.kv)>:not(.kv){margin-top:var(--sp-4)}.card.rows>:not(.kv):first-child{margin-top:0}.card:has(>.kv)>:not(.kv):first-child{margin-top:0}.tile{font:inherit;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);justify-content:space-between;gap:var(--sp-5);flex-direction:column;padding:24px;transition:border-color .12s,background .12s;display:flex}.tile:hover{border-color:var(--hover-line);background:var(--hover)}.tile-icon{border-radius:var(--r-cta);background:var(--tint);width:40px;height:40px;color:var(--ink-2);place-items:center;font-size:11px;display:grid}.tile-title{font-size:16px;font-weight:600}.tile-desc{color:var(--ink-3);font-size:12.5px}.item,.linkrow{gap:var(--sp-6);border:1px solid var(--line);border-radius:var(--r-action);background:var(--card);text-align:left;width:100%;min-height:72px;font:inherit;color:inherit;align-items:center;padding:14px 18px;transition:border-color .12s,background .12s;display:flex}.item{cursor:default}button.item,.linkrow{cursor:pointer}button.item:hover,.linkrow:hover{border-color:var(--hover-line);background:var(--hover)}.item .texts{gap:var(--sp-1);flex-direction:column;flex:1;min-width:0;display:flex}.item .texts b{text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600;display:block;overflow:hidden}.item .texts span{color:var(--ink-2);text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;overflow:hidden}.item .texts b.sentence{font-size:12.5px}.linkrow{justify-content:space-between}.linkrow>span:last-child{color:var(--ink-4);font-size:16px}.kv{justify-content:space-between;align-items:center;gap:var(--sp-5);border-bottom:1px solid var(--line-soft);padding:10px 0;font-size:14px;display:flex}.kv:last-child,.kv.last{border-bottom:0}.kv:not(:has(~.kv)){border-bottom:0}.kv>span:first-child,.kv .k{color:var(--ink-3)}.kv .v{color:var(--ink);overflow-wrap:break-word;min-width:0}.kv .mono,.ipa{font-family:var(--mono)}.thumb{border-radius:var(--r-cta);background:var(--tint);width:48px;height:48px;color:var(--ink-2);flex:none;place-items:center;font-size:11px;display:grid}.thumb.lg{border-radius:var(--r-card);width:64px;height:64px;font-size:12px}.thumb.hatch,.hatch{background:repeating-linear-gradient(45deg,var(--tint),var(--tint) 10px,var(--tint-2) 10px,var(--tint-2) 20px)}img.thumb{object-fit:cover}.thumb.wide{aspect-ratio:16/9;width:80px;height:auto}.cartoon{aspect-ratio:16/9;border-radius:var(--r-card);background:repeating-linear-gradient(45deg,var(--tint),var(--tint) 10px,var(--tint-2) 10px,var(--tint-2) 20px);width:100%;font:12px var(--mono);color:var(--ink-2);place-items:center;display:grid;overflow:hidden}.cartoon:has(>img){background:var(--tint)}.cartoon>img{object-fit:contain;width:100%;height:100%;display:block}.drop{border:2px dashed var(--btn-edge);border-radius:var(--r-card);text-align:center;color:var(--ink-3);background:var(--hover);cursor:pointer;padding:32px 20px;font-size:13px}.drop:hover{border-color:var(--ink-3);background:var(--card)}.divider{background:var(--line);border:0;height:1px;margin:0}.divider.soft{background:var(--line-soft)}.chip{align-items:center;gap:var(--sp-2);font:inherit;color:var(--mute-ink);background:var(--mute-bg);border-radius:var(--r-pill);border:1px solid #0000;padding:4px 11px;font-size:12px;font-weight:600;line-height:1.5;display:inline-flex}.chip.word{color:var(--accent-deep);background:var(--accent-tint)}.chip.sentence{color:var(--sentence);background:var(--sentence-tint)}.chip.on{color:var(--accent-ink);background:var(--accent)}button.chip{cursor:pointer}button.chip:hover{background:var(--tint-hover)}button.chip.on:hover{background:var(--accent-deep)}.chip[data-filter]{border-color:var(--btn-edge);color:var(--ink-2);background:0 0;font-weight:400}.chip[data-filter]:hover{background:var(--card);border-color:var(--ink-3);color:var(--ink)}.chip[data-filter].on{background:var(--card);border-color:var(--accent);color:var(--accent-deep);box-shadow:inset 0 0 0 1px var(--accent);font-weight:600}.chip[data-filter].on:hover{background:var(--card)}.badge{border-radius:var(--r-sm);background:var(--card);border:1px solid var(--mute-line);color:var(--mute-ink);padding:3px 9px;font-size:12px;font-weight:600;line-height:1.5;display:inline-block}.badge.ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-ink)}.badge.warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn-ink)}.badge.bad{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad-ink)}.badge.mono{font-family:var(--mono);letter-spacing:.02em;font-size:11px}.bar{border-radius:var(--r-bar);background:var(--tint);height:8px;overflow:hidden}.bar i{background:var(--accent);border-radius:var(--r-bar);height:100%;display:block}.bar i.s0{background:var(--stage-0)}.bar i.s1{background:var(--stage-1)}.bar i.s2{background:var(--stage-2)}.bar i.s3{background:var(--stage-3)}.bar i.s4{background:var(--stage-4)}.bar i,.stage-chart i{box-shadow:inset 0 0 0 1px var(--stage-edge)}.stagebars{gap:var(--sp-3);flex-direction:column;display:flex}.stagerow{align-items:center;gap:var(--sp-4);color:var(--ink-3);font-size:12px;display:flex}.stagerow>span:first-child,.stagerow .stagelabel{flex:none;width:40px}.stagerow .bar{flex:1}.stage-chart{gap:var(--sp-2);align-items:flex-end;height:56px;display:flex}.stage-chart i{background:var(--accent);border-radius:var(--r-tick);flex:1;height:100%;display:block}.stage-chart .s0{background:var(--stage-0)}.stage-chart .s1{background:var(--stage-1)}.stage-chart .s2{background:var(--stage-2)}.stage-chart .s3{background:var(--stage-3)}.stage-chart .s4{background:var(--stage-4)}.stage-axis{gap:var(--sp-2);color:var(--ink-3);font-size:11.5px;display:flex}.stage-axis span{text-align:center;flex:1}.big{letter-spacing:-.03em;overflow-wrap:anywhere;font-size:72px;font-weight:600;line-height:1.1}.big.sentence{letter-spacing:-.02em;max-width:var(--w-prompt);font-size:34px;line-height:1.35}.bignum{align-items:baseline;gap:var(--sp-3);display:flex}.bignum b{letter-spacing:-.03em;font-size:56px;font-weight:600;line-height:1}.bignum span{color:var(--ink-2);font-size:16px;font-weight:400}.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);text-align:center;gap:var(--sp-1);flex-direction:column;padding:24px;display:flex}.stat b{letter-spacing:-.03em;font-size:48px;font-weight:600;line-height:1;display:block}.stat span{color:var(--ink-3);font-size:13px}.stat.accent b{color:var(--accent)}.title{letter-spacing:-.02em;overflow-wrap:anywhere;margin:0;font-size:30px;font-weight:600}.title.lg{font-size:34px}.title.sm{font-size:22px}.title.xs{font-size:17px}.sub{color:var(--ink-3);margin:0;font-size:13px;font-weight:400}.note{color:var(--ink-3);margin:0;font-size:13px;line-height:1.6}.lead{color:var(--ink-2);margin:0;font-size:14px;line-height:1.6}.lead b,.strong{color:var(--ink);font-weight:600}.section-title{color:var(--ink);justify-content:space-between;align-items:center;font-size:13px;font-weight:600;display:flex}.label{letter-spacing:.04em;color:var(--ink-3);font-size:12px;font-weight:600}.meaning{letter-spacing:-.02em;overflow-wrap:anywhere;min-width:0;font-size:28px;font-weight:600}.example{overflow-wrap:break-word;margin:0;font-size:16px;line-height:1.55}.example b,.hl{color:var(--accent-deep);font-weight:600}.translation{color:var(--ink-2);margin:0;font-size:13.5px;line-height:1.55}.nuance{margin:var(--sp-2) 0 0;color:var(--ink-3);border-top:1px solid var(--line-soft);padding-top:var(--sp-4);font-size:13px;line-height:1.6}.dim{color:var(--ink-3);font-size:11.5px}.mono{font-family:var(--mono)}.fields{gap:var(--sp-7);flex-direction:column;display:flex}.field{gap:var(--sp-2);flex-direction:column;display:flex}.field label{color:var(--ink-3);font-size:12.5px;font-weight:400}.field input,.field select,.field textarea,input[type=text],input[type=password],select,textarea{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--btn-edge);border-radius:var(--r-cta);padding:13px 14px;font-size:15px}.field textarea{resize:vertical;min-height:68px;line-height:1.55}.field input:focus,.field select:focus,.field textarea:focus,input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint);outline:none}.field .help{color:var(--ink-3);font-size:12px}.field input[type=file]{color:var(--ink-2);padding:11px 12px;font-size:13px}.opt{align-items:center;gap:var(--sp-3);cursor:pointer;color:var(--ink);font-size:13px;display:flex}input[type=checkbox],input[type=radio]{accent-color:var(--accent);width:15px;height:15px}input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.err,.warnbox,.okbox,.notebox{border-radius:var(--r-cta);padding:12px 14px;font-size:12.5px;line-height:1.6}.err{background:var(--bad-bg);color:var(--bad-ink)}.warnbox{background:var(--warn-bg);color:var(--warn-ink)}.okbox{background:var(--ok-bg);color:var(--ok-ink)}.notebox{background:var(--tint);color:var(--ink-2)}.err b,.warnbox b,.okbox b,.notebox b{font-weight:600}.card .err,.card .warnbox,.card .okbox,.card .notebox{border-radius:var(--r-sm)}.kbdhint{margin:var(--sp-5) 0 0;color:var(--ink-3);gap:var(--sp-6);flex-wrap:wrap;justify-content:center;align-items:center;font-size:13px;display:flex}kbd{font:11px/1.5 var(--mono);color:var(--ink-2);background:var(--card);border:1px solid var(--line-strong);border-radius:var(--r-kbd);border-bottom-width:2px;margin:0 2px;padding:1px 6px;display:inline-block}@supports (min-height:100dvh){#app,.sc{min-height:100dvh}}@media (width<=900px){:root{--inset-wide:var(--inset)}.two,.two.half{width:100%;max-width:var(--w-mid);grid-template-columns:1fr;margin:0 auto}.two.fill{flex:none}}@media (width<=600px){:root{--inset:var(--sp-7);--foot-gap:var(--sp-8)}.hd{gap:var(--sp-3);min-height:60px;padding-top:var(--sp-4);padding-bottom:var(--sp-4);flex-wrap:wrap}.hd-word{font-size:18px}.body{padding-top:var(--sp-8);padding-bottom:var(--sp-8);gap:var(--sp-7)}.body.hub{padding:var(--sp-8) var(--inset);gap:var(--sp-8)}.body.narrow{padding:var(--sp-10) var(--inset)}.body.focus{padding:var(--sp-8) var(--inset);gap:var(--sp-9)}.center{padding:var(--sp-8) var(--inset)}.split,.split.tight{grid-template-columns:1fr}.card{padding:18px 16px}.card.roomy,.card.pad-tight{padding:20px 18px}.card.inner{padding:16px 14px}.kv,.foot{flex-wrap:wrap}.foot .btn.fixed{flex:1 0 auto}.foot>.btn.f20{flex:none}.foot>.btn.danger{padding-left:var(--sp-7);padding-right:var(--sp-7);flex:1}.btn.lg{padding:16px;font-size:15px}.big{font-size:44px}.big.sentence,.title{font-size:24px}.title.lg{font-size:26px}.title.sm{font-size:19px}.meaning{font-size:22px}.bignum b{font-size:40px}.stat{padding:18px}.stat b{font-size:34px}}@media (pointer:coarse) and (width<=900px){.kbdhint,.btn .keyhint{display:none}.back{min-width:44px;min-height:44px;padding:0}.item>.mini{width:44px;height:44px}}
