:root{--bg:#08080a;--card:#131316eb;--card-solid:#131316;--chip:#ffffff0e;--chip-hover:#ffffff17;--border:#ffffff14;--border-strong:#ffffff29;--text:#f3f3f6;--text-dim:#9a9aa4;--text-faint:#6b6b76;--radius-lg:22px;--radius-md:14px;--radius-sm:10px;--accent-1:#4f9cff;--accent-2:#6ad0c7;--danger:#ff6b6b}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body,#root{height:100%;overflow:hidden}body{background:var(--bg);color:var(--text);overscroll-behavior:none;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Apple SD Gothic Neo,Noto Sans KR,sans-serif}.board{background:radial-gradient(48vw 48vw at 18% 6%, #4f9cff0d, transparent 60%), radial-gradient(48vw 48vw at 100% 100%, #6ad0c70a, transparent 60%), var(--bg);cursor:default;touch-action:none;position:fixed;inset:0}.toolbar{z-index:10;background:var(--card);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border);color:var(--text);-webkit-user-select:none;user-select:none;border-radius:18px;flex-wrap:wrap;align-items:center;gap:8px;max-width:calc(100vw - 28px);padding:8px 10px;font-size:13px;display:flex;position:fixed;top:14px;left:14px;box-shadow:0 12px 30px #00000073}.toolbar .brand{letter-spacing:.1px;padding:0 4px 0 2px;font-weight:700}.toolbar button{background:var(--chip);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;padding:7px 12px;font-size:13px;font-weight:600;transition:transform 80ms,background .12s,border-color .12s}.toolbar button:hover{background:var(--chip-hover);border-color:var(--border-strong)}.toolbar button:active{transform:scale(.96)}.toolbar .meta{color:var(--text-dim);font-variant-numeric:tabular-nums;padding:0 4px}.toolbar .hint{color:var(--text-faint);padding:0 4px;font-size:12px}.toolbar button.share{background:var(--chip);color:var(--text);border:1px solid var(--border)}.toolbar button.icon{background:var(--chip);border:1px solid var(--border);color:var(--text);border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;padding:0;font-size:14px;display:inline-flex}.toolbar button.active{background:linear-gradient(135deg, var(--accent-1), var(--accent-2));color:#08121f;border-color:#0000;box-shadow:0 0 0 2px #4f9cff4d}.toolbar input.search{border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);background:#00000059;outline:none;width:108px;padding:7px 11px;font-size:13px}.toolbar input.search:focus{border-color:var(--accent-1);width:148px}.toolbar input.search::placeholder{color:var(--text-faint)}.home{background:radial-gradient(55vw 55vw at 18% 0%, #4f9cff14, transparent 58%), radial-gradient(55vw 55vw at 100% 100%, #6ad0c70f, transparent 58%), var(--bg);flex-direction:column;justify-content:center;align-items:center;gap:20px;padding:24px;display:flex;position:fixed;inset:0}.home-card{background:var(--card);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:var(--radius-lg);text-align:center;width:100%;max-width:380px;padding:30px 26px;box-shadow:0 24px 60px #00000080}.home .logo{letter-spacing:.1px;font-size:26px;font-weight:800}.home .tagline{color:var(--text-dim);margin:7px 0 24px;font-size:14px}.home button.primary,.modal button.primary{background:linear-gradient(135deg, var(--accent-1), var(--accent-2));color:#08121f;border-radius:var(--radius-md);cursor:pointer;border:none;padding:10px 16px;font-size:14px;font-weight:700}.home button.primary.big{border-radius:16px;width:100%;padding:15px;font-size:16px}.home .divider{color:var(--text-faint);align-items:center;gap:10px;margin:22px 0 16px;font-size:12px;display:flex}.home .divider:before,.home .divider:after{content:"";background:var(--border);flex:1;height:1px}.home .row{gap:8px;display:flex}.home .row input{border:1px solid var(--border);border-radius:var(--radius-sm);min-width:0;color:var(--text);background:#00000059;outline:none;flex:1;padding:11px 13px;font-size:14px}.home .row input:focus{border-color:var(--accent-1)}.home .row button{background:var(--chip);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;padding:0 15px;font-weight:600}.home .row button:hover{background:var(--chip-hover)}.home .hint{color:var(--text-faint);margin-top:16px;font-size:12px;line-height:1.65}.home .hint b{color:#9fb8ff;font-weight:600}.home-foot{color:var(--text-faint);font-size:12px}.modal-backdrop{z-index:50;background:#0009;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal{background:var(--card-solid);border:1px solid var(--border);border-radius:var(--radius-lg);width:100%;max-width:360px;padding:22px;box-shadow:0 24px 60px #0000008c}.modal h3{margin-bottom:6px;font-size:17px}.modal label{color:var(--text-dim);margin:16px 0 6px;font-size:12px;display:block}.modal input{border:1px solid var(--border);border-radius:var(--radius-sm);width:100%;color:var(--text);background:#00000059;outline:none;padding:10px 12px;font-size:14px}.modal input:focus{border-color:var(--accent-1)}.modal .swatches{flex-wrap:wrap;gap:9px;display:flex}.modal .swatches button{cursor:pointer;border:2px solid #0000;border-radius:50%;width:28px;height:28px}.modal .swatches button.sel{border-color:#fff;box-shadow:0 0 0 2px #ffffff40}.modal .modal-actions{border-top:1px solid var(--border);align-items:center;gap:8px;margin-top:24px;padding-top:16px;display:flex}.modal .modal-actions button{background:var(--chip);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);cursor:pointer;padding:9px 14px;font-weight:600}.modal .modal-actions button.danger{color:var(--danger);background:#ff6b6b1a;border-color:#ff6b6b38}.status{color:var(--text-dim);background:var(--chip);border:1px solid var(--border);border-radius:999px;align-items:center;gap:6px;padding:5px 10px 5px 8px;font-size:12px;display:inline-flex}.status i{background:#888;border-radius:50%;width:7px;height:7px;box-shadow:0 0 8px}.status.connected{color:#5ee6a8}.status.connected i{background:#5ee6a8}.status.connecting{color:#ffcf6a}.status.connecting i{background:#ffcf6a}.status.disconnected{color:#ff8a8a}.status.disconnected i{background:#ff8a8a}.toast{z-index:20;background:var(--card-solid);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-md);padding:10px 18px;font-size:14px;position:fixed;bottom:28px;left:50%;transform:translate(-50%);box-shadow:0 12px 30px #00000080}.cursor{z-index:25;pointer-events:none;will-change:transform;position:fixed;top:0;left:0}.cursor svg{filter:drop-shadow(0 1px 2px #00000080);display:block}.cursor-label{color:#08121f;white-space:nowrap;border-radius:8px;padding:2px 7px;font-size:11px;font-weight:600;position:absolute;top:14px;left:16px}.menu-backdrop{z-index:40;position:fixed;inset:0}.ctx-menu{z-index:41;border-radius:var(--radius-lg);background:var(--card-solid);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border);flex-direction:column;gap:1px;min-width:190px;padding:6px;animation:.12s pop;display:flex;position:fixed;box-shadow:0 16px 40px #0000008c}@keyframes pop{0%{opacity:0;transform:translateY(-4px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}.ctx-menu button{all:unset;border-radius:var(--radius-sm);color:var(--text);cursor:pointer;padding:10px 12px;font-size:14px}.ctx-menu button:hover{background:var(--chip-hover)}.ctx-menu button.danger{color:var(--danger)}.ctx-menu .sep{background:var(--border);height:1px;margin:4px 6px}.text-edit{z-index:30;border:1px solid var(--accent-1);resize:none;background:#08080a66;border-radius:6px;outline:none;min-height:1.4em;padding:2px 4px;font-family:inherit;font-weight:700;line-height:1.2;position:fixed;overflow:hidden}.empty{color:var(--text-faint);pointer-events:none;text-align:center;font-size:16px;line-height:1.6;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.empty b{color:#9fb8ff}@media (width<=640px){.toolbar .hint{display:none}}