:root{--bg: #08090a;--panel: #0f1011;--surface: rgba(255, 255, 255, .04);--surface-2: rgba(255, 255, 255, .07);--line: rgba(255, 255, 255, .08);--line-soft: rgba(255, 255, 255, .05);--text: #f7f8f8;--text-2: #d0d6e0;--muted: #8a8f98;--dim: #62666d;--accent: #facc15;--paper: #ffffff;--paper-dark: #0b0b0b;--top-h: 56px;--side-w: 340px;--fx-w: 290px}*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:Pretendard Variable,Pretendard,-apple-system,system-ui,Noto Sans KR,sans-serif;font-size:13px;line-height:1.5;letter-spacing:-.01em;display:flex;flex-direction:column;overflow:hidden}button,select,input{font:inherit;color:inherit}code,.mono,pre{font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:12px}.top{height:var(--top-h);flex:none;padding:0 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--panel);border-bottom:1px solid var(--line-soft)}.brand{display:flex;align-items:baseline;gap:10px;min-width:0}.brand b{font-weight:600;font-size:15px;letter-spacing:-.02em}.brand span{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.top-actions{display:flex;gap:8px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 12px;border-radius:6px;cursor:pointer;font-weight:500;background:#ffffff05;border:1px solid var(--line);color:var(--text-2);transition:background .15s,border-color .15s}.btn:hover{background:var(--surface-2);border-color:#ffffff24;color:var(--text)}.btn:disabled{opacity:.45;cursor:default}.btn.primary{background:var(--accent);border-color:var(--accent);color:#0a0a0a;font-weight:600}.btn.primary:hover{background:#fde047}.btn.wide{width:100%;margin-top:10px}.main{flex:1;min-height:0;display:grid;grid-template-columns:var(--fx-w) 1fr var(--side-w)}.fxcol{min-height:0;overflow:hidden;background:var(--panel);border-right:1px solid var(--line-soft)}.viewer{position:relative;min-width:0;background:var(--paper)}.viewer canvas{display:block;position:absolute;inset:0;width:100%;height:100%;outline:none;cursor:grab}.viewer canvas:active{cursor:grabbing}body.bg-dark .viewer{background:var(--paper-dark)}.empty{position:absolute;inset:0;width:100%;height:100%;z-index:1;border:0;background:none;cursor:pointer;color:#6b6f78;font-size:15px;font-weight:500}.empty[hidden]{display:none}.empty:hover{color:#222}body.bg-dark .empty:hover{color:#ddd}.side{overflow:auto;background:var(--panel);border-left:1px solid var(--line-soft);padding:4px 16px 24px}.side[hidden]{display:none}.side section{padding:14px 0 16px;border-bottom:1px solid var(--line-soft)}.side section:last-child{border-bottom:0}.side h3{margin:0 0 10px;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--muted);display:flex;align-items:baseline;gap:8px}.side h3 .mono{color:var(--text-2);font-weight:400;letter-spacing:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kv{margin:0;display:grid;gap:6px}.kv div{display:grid;grid-template-columns:92px 1fr;gap:8px}.kv dt{color:var(--muted)}.kv dd{margin:0;color:var(--text-2);font-variant-numeric:tabular-nums}.kv b{color:var(--text);font-weight:600}.pct{margin-left:6px;padding:1px 6px;border-radius:999px;background:#27a6442e;color:#7ee2a0;font-size:11px;font-weight:600}.hint{margin:10px 0 0;color:var(--dim);font-size:12px}.hint.tight{margin:0}.hint[hidden]{display:none}.dim{color:var(--dim)}.opts{display:grid;gap:8px}.row{display:grid;grid-template-columns:92px 1fr auto;align-items:center;gap:8px;color:var(--text-2)}.row[hidden]{display:none}.row select,.row input[type=range]{width:100%}.row select{padding:5px 6px;border-radius:6px;border:1px solid var(--line);background:#16171a;color:var(--text)}.row input[type=range]{accent-color:var(--accent)}.row output{color:var(--muted);font-variant-numeric:tabular-nums;min-width:52px;text-align:right}.row.check{grid-template-columns:auto 1fr}.row.check input{margin:0;accent-color:var(--accent)}.row.check small{display:block;color:var(--dim)}.seg{display:flex;margin-top:10px;border:1px solid var(--line);border-radius:6px;overflow:hidden}.seg[hidden]{display:none}.seg button{flex:1;padding:6px;border:0;background:none;color:var(--muted);cursor:pointer}.seg button+button{border-left:1px solid var(--line)}.seg button.is-on{background:var(--surface-2);color:var(--text);font-weight:600}.steps{margin:0 0 10px;padding-left:18px;color:var(--text-2);display:grid;gap:4px}.steps code{color:var(--accent)}.snippet{margin:0 0 8px;padding:10px;border-radius:6px;white-space:pre-wrap;word-break:break-all;background:#ffffff08;border:1px solid var(--line);color:var(--text-2);line-height:1.5}.drop{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;background:#08090abf;color:var(--text);font-size:22px;font-weight:600;outline:2px dashed var(--accent);outline-offset:-16px}body.is-dragging .drop{display:flex}.toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%,12px);z-index:60;padding:9px 14px;border-radius:8px;max-width:min(90vw,560px);background:#191a1b;border:1px solid var(--line);color:var(--text-2);box-shadow:0 8px 24px #00000080;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}.toast.is-on{opacity:1;transform:translate(-50%)}#fxcol .fxp{position:static;width:auto;height:100%;max-height:none;border:0;border-radius:0;box-shadow:none;background:var(--panel);backdrop-filter:none}#fxcol .fxp-body{flex:1}@media (max-width: 760px){.fxcol{display:none}.main{grid-template-columns:1fr;grid-template-rows:1fr auto}.side{max-height:45vh;border-left:0;border-top:1px solid var(--line-soft)}.brand span{display:none}}