:root{--bg:#f6f4f9;--card:#fff;--ink:#1f1b2e;--muted:#5a5470;--line:#e6e2ee;--line2:#d6d0e0;--grape:#6b2fbf;--grape-deep:#54239a;--grape-tint:#efe7fa;--grape-soft:#d9c8f2;--stem:#2e7d4f;--gold:#b7791f;--ok:#2e7d4f;--ok-tint:#e3f3ea;--warn:#c2410c;--warn-tint:#fff4ec}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;margin:0;font-family:Noto Sans KR,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif}a{color:var(--grape);text-decoration:none}button,input,textarea,select{font:inherit}.page{flex-direction:column;max-width:430px;min-height:100dvh;margin:0 auto;display:flex}.top{background:var(--card);border-bottom:1px solid var(--line);padding:18px 20px 14px}.top h1{letter-spacing:-.4px;margin:0;font-size:20px;font-weight:900}.sub{color:var(--muted);font-size:13px}.wrap{flex-direction:column;gap:14px;padding:16px 20px 32px;display:flex}.card{background:var(--card);border-radius:16px;flex-direction:column;gap:10px;padding:16px;display:flex}.card h2{margin:0;font-size:15px;font-weight:700}.label{color:var(--muted);font-size:13px;font-weight:700}.hint{color:var(--muted);font-size:12px;line-height:1.5}.row{align-items:center;gap:8px;display:flex}.grow{flex-grow:1;min-width:0}.btn{background:var(--grape);color:#fff;cursor:pointer;border:none;border-radius:14px;justify-content:center;align-items:center;width:100%;height:54px;font-size:16px;font-weight:700;display:flex}.btn:disabled{opacity:.5;cursor:default}.btn.ghost{background:var(--card);color:var(--grape);border:1px solid var(--grape)}.btn.quiet{background:var(--card);color:var(--ink);border:1px solid var(--line2)}.chip{border:1px solid var(--line2);background:var(--card);height:44px;color:var(--ink);cursor:pointer;border-radius:12px;flex-grow:1;padding:0 14px;font-size:14px}.chip.on{border-color:var(--grape);background:var(--grape);color:#fff;font-weight:700}.chip.soft.on{background:var(--grape-tint);color:var(--grape)}.input{border:1px solid var(--line2);background:var(--card);border-radius:12px;width:100%;height:46px;padding:0 14px;font-size:14px}textarea.input{resize:none;height:auto;padding:12px 14px}.badge{border-radius:4px;padding:2px 6px;font-size:10px;font-weight:700}.badge.ok{color:var(--ok);background:var(--ok-tint)}.badge.grape{color:#fff;background:var(--grape)}.err{color:var(--warn);background:var(--warn-tint);border-radius:10px;padding:10px 12px;font-size:13px}.progress{background:var(--line);border-radius:5px;height:10px;overflow:hidden}.progress>div{background:var(--grape);height:100%;transition:width .4s}.grapes{flex-direction:column;align-items:center;gap:4px;display:flex}.grapes .stem{background:var(--stem);border-radius:7px;width:14px;height:26px}.grapes .r{justify-content:center;gap:4px;display:flex}.g{border:1.5px dashed var(--grape-soft);background:var(--card);border-radius:12px;width:24px;height:24px;position:relative}.g.f{background:var(--grape);border:none}.g.big{background:var(--grape-deep);border:none}.g.top{border:3px solid var(--gold);background:var(--grape)}.g.mine{background:var(--ink);box-shadow:0 0 0 2px var(--ink);border:3px solid #fff}.g.f:hover:after,.g.big:hover:after,.g.top:hover:after{content:attr(data-nick);background:var(--ink);color:#fff;white-space:nowrap;z-index:2;border-radius:6px;padding:4px 8px;font-size:11px;position:absolute;bottom:30px;left:50%;transform:translate(-50%)}.rank{border-bottom:1px solid #f0edf5;align-items:center;gap:10px;padding:10px 0;display:flex}.rank:last-child{border-bottom:none}.rank .n{color:#fff;border-radius:11px;justify-content:center;align-items:center;width:22px;height:22px;font-size:12px;font-weight:900;display:flex}.fine{color:var(--muted);font-size:11px;line-height:1.6}.center{text-align:center}.big-num{letter-spacing:-.6px;color:var(--grape);font-size:26px;font-weight:900}