:root{--bg:#fffdf9;--ink:#23244a;--ink-soft:#6b6f9c;--line:#e7e4f5;--edge:#23244a;--det:#86efac;--det-edge:#16a34a;--nuc:#a78bfa;--nuc-edge:#6d28d9;--ady:#fbbf24;--ady-edge:#b45309;--verbo:#f87171;--verbo-edge:#b91c1c;--cd:#67e8f9;--cd-edge:#0891b2;--ci:#fde68a;--ci-edge:#ca8a04;--cc:#eeb4b4;--cc-edge:#a85757;--ok:#22c55e;--bad:#f43f5e;--font-normal:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--radius:22px;--shadow:0 4px 0 var(--edge);--shadow-lg:0 6px 0 var(--edge)}*{box-sizing:border-box}body,html{margin:0;padding:0}body{min-height:100dvh;background:radial-gradient(620px 380px at 8% -6%,#ffe9c9 0,transparent 62%),radial-gradient(560px 340px at 96% 2%,#e2ddff 0,transparent 60%),radial-gradient(520px 320px at 50% 104%,#d6f5e6 0,transparent 62%),var(--bg);background-attachment:fixed;color:var(--ink);font-family:ui-rounded,SF Pro Rounded,Hiragino Maru Gothic ProN,Nunito,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit;cursor:pointer;border:none;background:none}.wrap{max-width:900px;min-height:100dvh;margin:0 auto;padding:26px 16px 44px;display:flex;flex-direction:column;align-items:stretch;justify-content:center;justify-content:safe center}.card{width:100%;background:#fff;border:3px solid var(--edge);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-lg)}.sentence{display:flex;flex-wrap:wrap;gap:12px 6px;align-items:flex-end;font-size:clamp(20px,3.2vw,27px);font-weight:800;line-height:1.25;padding:8px 0 6px;letter-spacing:-.01em;-moz-user-select:none;user-select:none;-webkit-user-select:none}.slot{display:contents}.divider{align-self:center;color:#a3a0c4;font-weight:900;padding:0 5px}.chunk{display:inline-flex;flex-direction:column;align-items:center;gap:5px;border-radius:13px;padding:7px 11px;border:2.5px dashed #c9c6e4;background:#fbfaff;font-weight:800;transition:transform .1s,background .15s,border-color .15s,box-shadow .1s;white-space:nowrap}.chunk:hover:not(:disabled){background:#fff6e0;border-color:var(--ady-edge);transform:translateY(-2px) rotate(-1deg)}.chunk:active:not(:disabled){transform:translateY(0) scale(.96)}.chunk.over{border-style:solid;border-color:var(--edge);background:#fffbef;box-shadow:0 4px 0 var(--edge);transform:translateY(-4px) scale(1.06)}.chunk.DET{border-style:solid;background:var(--det);border-color:var(--det-edge)}.chunk.NUC{border-style:solid;background:var(--nuc);border-color:var(--nuc-edge);color:#fff}.chunk.ADY{border-style:solid;background:var(--ady);border-color:var(--ady-edge)}.chunk.VERBO{border-style:solid;background:var(--verbo);border-color:var(--verbo-edge);color:#fff}.chunk.CD{border-style:solid;background:var(--cd);border-color:var(--cd-edge)}.chunk.CI{border-style:solid;background:var(--ci);border-color:var(--ci-edge)}.chunk.CC{border-style:solid;background:var(--cc);border-color:var(--cc-edge)}.chunk.right{animation:pop .32s ease-out}.chunk.wrong{animation:shake .38s;box-shadow:0 0 0 4px rgba(244,63,94,.4)}@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.13) rotate(-2deg)}to{transform:scale(1)}}@keyframes shake{20%{transform:translateX(-5px) rotate(-1.5deg)}60%{transform:translateX(5px) rotate(1.5deg)}to{transform:translateX(0)}}.badge{order:-1;font-size:9.5px;font-weight:900;letter-spacing:.05em;padding:3px 8px;border-radius:999px;border:2px solid var(--edge);background:#fff;color:var(--ink);white-space:nowrap;line-height:1.3}.badge.DET{background:var(--det-edge);color:#fff}.badge.NUC{background:var(--nuc-edge);color:#fff}.badge.ADY{background:var(--ady-edge);color:#fff}.badge.VERBO{background:var(--verbo-edge);color:#fff}.badge.CD{background:var(--cd-edge);color:#fff}.badge.CI{background:var(--ci-edge);color:#fff}.badge.CC{background:var(--cc-edge);color:#fff}.dragline{margin:20px 0 12px;font-size:13.5px;font-weight:700;color:var(--ink-soft);text-align:center}.dragline b{color:var(--ink)}.tray{gap:8px;flex-wrap:wrap;padding:13px 11px;border-radius:18px;background:repeating-linear-gradient(45deg,#fbfaff,#fbfaff 10px,#f4f2fd 0,#f4f2fd 20px);border:2.5px dashed #d3cdee}.chip,.tray{display:flex}.chip{flex:1 1 120px;align-items:center;justify-content:center;gap:7px;padding:11px 10px;border-radius:14px;border:3px solid var(--edge);font-size:13.5px;font-weight:900;line-height:1.2;text-align:center;box-shadow:var(--shadow);cursor:-webkit-grab;cursor:grab;touch-action:none;-moz-user-select:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:transform .1s,box-shadow .1s,filter .15s}.chip:hover{transform:translateY(-3px) rotate(-1deg)}.chip.on,.chip:hover{box-shadow:0 7px 0 var(--edge)}.chip.on{transform:translateY(-3px);filter:saturate(1.25)}.chip.lifting{opacity:.4;cursor:-webkit-grabbing;cursor:grabbing;transform:none;box-shadow:var(--shadow)}.chip-k{font-size:10px;font-weight:900;padding:1px 6px;border-radius:6px;background:rgba(255,255,255,.7);border:1.5px solid rgba(35,36,74,.25);color:var(--ink)}.chip.DET{background:var(--det)}.chip.NUC{background:var(--nuc);color:#fff}.chip.ADY{background:var(--ady)}.chip.VERBO{background:var(--verbo);color:#fff}.chip.CD{background:var(--cd)}.chip.CI{background:var(--ci)}.chip.CC{background:var(--cc)}.ghost{position:fixed;z-index:60;transform:translate(-50%,-140%) rotate(-4deg);pointer-events:none;padding:8px 15px;border-radius:13px;border:3px solid var(--edge);font-size:16px;font-weight:900;color:var(--ink);box-shadow:0 6px 14px rgba(35,36,74,.28);animation:grab .14s ease-out}.ghost.DET{background:var(--det)}.ghost.NUC{background:var(--nuc);color:#fff}.ghost.ADY{background:var(--ady)}.ghost.VERBO{background:var(--verbo);color:#fff}.ghost.CD{background:var(--cd)}.ghost.CI{background:var(--ci)}.ghost.CC{background:var(--cc)}@keyframes grab{0%{transform:translate(-50%,-140%) scale(.8) rotate(-4deg)}to{transform:translate(-50%,-140%) scale(1) rotate(-4deg)}}.explain{margin-top:14px;border:2.5px solid var(--line);border-radius:16px;overflow:hidden}.explain-head{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 14px;font-size:13.5px;font-weight:900;background:#f7f5ff;color:var(--ink)}.explain-head:hover{background:#f0edfd}.explain-list{list-style:none;margin:0;padding:12px 14px;display:grid;grid-gap:9px;gap:9px;border-top:2.5px solid var(--line)}.explain-list li{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;font-weight:600;line-height:1.55;color:var(--ink-soft)}.explain-list b,.swatch{color:var(--ink)}.swatch{flex:none;min-width:62px;text-align:center;font-size:9.5px;font-weight:900;letter-spacing:.04em;padding:4px 7px;border-radius:999px;border:2px solid var(--edge);margin-top:1px}.swatch.DET{background:var(--det)}.swatch.NUC{background:var(--nuc);color:#fff}.swatch.ADY{background:var(--ady)}.swatch.VERBO{background:var(--verbo);color:#fff}.swatch.CD{background:var(--cd)}.swatch.CI{background:var(--ci)}.swatch.CC{background:var(--cc)}.helper{color:var(--ink-soft);font-size:13px;font-weight:600;line-height:1.6;margin:14px 0 0;background:#f7f5ff;border:2px dashed #d9d3f2;border-radius:14px;padding:12px 14px}.helper b{color:var(--ink)}.actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}.primary{flex:1 1 220px;padding:15px 22px;border-radius:16px;font-weight:900;font-size:16.5px;letter-spacing:-.01em;color:var(--edge);background:linear-gradient(100deg,#ffd166,#ffb3f0);border:3px solid var(--edge);box-shadow:var(--shadow-lg);transition:transform .08s,box-shadow .08s,filter .15s}.primary:hover{filter:saturate(1.15) brightness(1.03)}.primary:active{transform:translateY(6px);box-shadow:0 0 0 var(--edge)}.primary.next{background:linear-gradient(100deg,#86efac,#7dd3fc)}.result-title{font-size:21px;font-weight:900;letter-spacing:-.02em;display:flex;align-items:center;gap:9px;margin-bottom:12px;animation:pop .35s ease-out}.result-title.ok{color:#15803d}.result-title.bad{color:#be123c}.split{display:grid;grid-template-columns:1fr 1fr;grid-gap:10px;gap:10px;margin-bottom:14px}.split>div{border:2.5px solid var(--line);border-radius:14px;padding:10px 12px;font-size:14px;font-weight:700;line-height:1.45;background:#fbfaff}.split-k,.split>div{font-family:var(--font-normal)}.split-k{display:block;font-size:11.5px;font-weight:600;color:var(--ink-soft);margin-bottom:3px}.why-list{list-style:none;margin:0;padding:0;display:grid;grid-gap:9px;gap:9px}.why{display:flex;gap:10px;font-family:var(--font-normal);font-size:13.5px;font-weight:500;line-height:1.6;background:#fbfaff;border:2.5px solid var(--line);border-radius:14px;padding:11px 13px}.why.ok{border-color:#bdf0d0;background:#f6fff9}.why.bad{border-color:#ffd3da;background:#fff7f8}.why .mark{font-weight:900;flex:none;font-size:15px}.why.ok .mark{color:var(--ok)}.why.bad .mark{color:var(--bad)}.why b{color:var(--ink)}.xp-pop{margin-left:auto;font-size:14px;font-weight:900;padding:5px 12px;border-radius:999px;color:var(--edge);background:linear-gradient(100deg,#ffd166,#86efac);border:2.5px solid var(--edge);animation:pop .35s ease-out}@media (max-width:560px){.wrap{justify-content:flex-start;padding-top:18px}.sentence{font-size:20px}.card{padding:16px}.split{grid-template-columns:1fr}.chip{flex:1 1 100px;font-size:12.5px}}