:root{--ink:#2a2240;--muted:#9b8cc4;--accent:#8b75d0;--grad:linear-gradient(135deg, #8b75d0 0%, #b87aab 55%, #d4899a 100%);--panel-bg:#fff;--canvas-bg:#f6f5f9;--soft:#f4f2fa;--track:#ecebf2;--border:#8b75d02e;--border-strong:#8b75d052;--accent-soft:#8b75d024;--radius:9px;--radius-sm:6px;--font:"DM Sans", "Noto Sans KR", system-ui, sans-serif;font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-weight:400}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;padding:0}body{overscroll-behavior:none;overflow:hidden}:focus-visible{outline:2px solid var(--accent-soft);outline-offset:1px}.app{width:100vw;height:100vh;color:var(--ink);font-weight:400;display:flex;overflow:hidden}.canvas-wrap{background:var(--canvas-bg);flex:auto;min-width:0;position:relative}.canvas{touch-action:none;cursor:crosshair;width:100%;height:100%;display:block}.canvas.panning{cursor:grab}.canvas.aligning{cursor:cell}.hud{pointer-events:none;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);color:var(--ink);font-variant-numeric:tabular-nums;border-radius:var(--radius-sm);border:1px solid var(--border);z-index:10;white-space:nowrap;background:#ffffffd1;padding:3px 8px;font-size:12px;font-weight:500;position:fixed;box-shadow:0 2px 6px #2a224014}.banner{background:var(--panel-bg);color:var(--ink);border-radius:var(--radius);border:1px solid var(--border-strong);z-index:10;align-items:center;gap:8px;padding:8px 16px;font-size:13px;font-weight:500;display:flex;position:absolute;top:14px;left:50%;transform:translate(-50%);box-shadow:0 6px 20px #2a22401f}.canvas-controls{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border:1px solid var(--border);border-radius:var(--radius-sm);z-index:5;background:#ffffffe6;align-items:center;gap:4px;padding:3px;display:flex;position:absolute;bottom:14px;left:14px}.canvas-controls button{color:var(--ink);background:0 0;border:none;border-radius:5px;padding:4px;display:inline-flex}.canvas-controls button:hover:not(:disabled){background:var(--soft)}.canvas-controls button:disabled{opacity:.3}.canvas-controls .zoom-inline{font-variant-numeric:tabular-nums;color:var(--muted);justify-content:center;min-width:42px;padding:3px 6px;font-size:12px;font-weight:500}.cc-div{background:var(--border);align-self:stretch;width:1px;margin:2px 1px}.help-overlay{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border:1px solid var(--border);max-width:420px;color:var(--muted);border-radius:var(--radius-sm);z-index:5;pointer-events:none;background:#ffffffe6;padding:7px 11px;font-size:12px;line-height:1.5;position:absolute;bottom:14px;right:14px}.layer-list{flex-direction:column;gap:4px;display:flex}.layer-row{border-radius:var(--radius-sm);align-items:center;gap:4px;padding:3px 4px;display:flex}.layer-row:hover{background:var(--soft)}.layer-row.is-hidden .layer-name{opacity:.45}.layer-name{color:var(--ink);flex:auto;align-items:center;gap:6px;font-size:13px;display:flex}.layer-name em{color:var(--muted);font-variant-numeric:tabular-nums;font-size:11px;font-style:normal}.layer-icon{color:var(--muted);background:0 0;border:none;border-radius:5px;padding:4px;display:inline-flex}.layer-icon:hover:not(:disabled){color:var(--ink);background:#fff}.layer-icon:disabled{opacity:.3}.layer-icon.on{color:var(--accent)}.empty-canvas{z-index:4;pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.empty-inner{pointer-events:auto;border:1.5px dashed var(--border-strong);color:var(--muted);text-align:center;background:#ffffff80;border-radius:18px;flex-direction:column;align-items:center;gap:14px;padding:40px 48px;transition:border-color .15s,background .15s;display:flex}.empty-canvas.drag .empty-inner{border-color:var(--accent);background:var(--soft)}.empty-inner .eicon{color:var(--accent)}.empty-title{color:var(--ink);font-size:15px;font-weight:500}.empty-sub{color:var(--muted);max-width:220px;font-size:13px;line-height:1.5}.panel{background:var(--panel-bg);border-left:1px solid var(--border);flex:0 0 312px;width:312px;height:100%;padding:0;overflow-y:auto}.panel-top{z-index:5;background:var(--panel-bg);border-bottom:1px solid var(--border);padding:16px 18px 12px;position:sticky;top:0}.panel-body{padding:2px 18px 44px}.panel-title{color:var(--ink);align-items:center;gap:9px;margin:0 0 12px;font-size:16px;font-weight:500;display:flex}.panel-title .logo{color:var(--accent)}.toolbar .draw-tools{margin-bottom:0}.toolbar button{justify-content:flex-start}.kbd{font-variant-numeric:tabular-nums;color:var(--muted);background:var(--soft);border:1px solid var(--border);text-align:center;border-radius:4px;min-width:16px;margin-left:auto;padding:0 4px;font-size:10px;font-weight:500;line-height:15px}button.active .kbd{color:#fff;background:#ffffff38;border-color:#0000}.tool-opts{border-bottom:1px solid var(--border);padding:12px 0}.section{border-top:1px solid var(--border);padding:12px 0}.section:first-of-type{border-top:none}.section-body{margin-top:12px}.section-head{cursor:pointer;width:100%;color:var(--muted);background:0 0;border:none;border-radius:0;align-items:center;gap:7px;margin:0;padding:0;display:flex}.section-head:hover{background:0 0}.section-head:hover h2{color:var(--ink)}.section-head:disabled{opacity:1;cursor:default}.section-head .shicon{color:var(--muted)}.section-head h2{text-align:left;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);flex:auto;margin:0;font-size:11px;font-weight:500}.section-head .chev{color:var(--muted);flex:none;transition:transform .15s}.section-head .chev.open{transform:rotate(180deg)}button{font-family:var(--font);border:1px solid var(--border-strong);border-radius:var(--radius-sm);cursor:pointer;color:var(--ink);background:#fff;justify-content:center;align-items:center;gap:6px;padding:8px 12px;font-size:13px;font-weight:400;line-height:1.2;transition:background .12s,border-color .12s,color .12s,opacity .12s;display:inline-flex}button:hover{background:var(--soft)}button:disabled{opacity:.4;cursor:not-allowed}button:disabled:hover{background:#fff}button.active{background:var(--accent);border-color:var(--accent);color:#fff}button.active:hover{background:var(--accent)}.btn-primary{background:var(--grad);color:#fff;border-radius:var(--radius-sm);border:none;align-self:flex-start;width:auto;padding:7px 12px;font-size:12.5px;font-weight:500;box-shadow:0 2px 8px #8b75d038}.btn-primary:hover{background:var(--grad);filter:brightness(1.05)}.btn-primary svg{width:15px;height:15px}button.danger{color:#b06a86;border-color:#b06a8666;width:100%;margin-top:10px}button.danger:hover{background:#d4899a14}.file-btn{cursor:pointer}.file-btn input{display:none}.tool-group-label{color:var(--muted);margin:0 0 7px;font-size:11px}.draw-tools{grid-template-columns:1fr 1fr;gap:7px;display:grid}.draw-tools button{justify-content:flex-start}.select-tool{border-top:1px dashed var(--border);margin-top:12px;padding-top:12px}.select-tool>button{width:100%}.seg{flex-wrap:wrap;gap:7px;display:flex}.seg button{flex:auto}.slider{margin:12px 0}.slider-head{justify-content:space-between;align-items:baseline;margin-bottom:7px;font-size:13px;display:flex}.slider-head .slabel{color:var(--ink)}.slider-head .sval{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px}input[type=range]{appearance:none;cursor:pointer;background:0 0;width:100%;height:16px;margin:0}input[type=range]:disabled{cursor:not-allowed;opacity:.45}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--accent) 0, var(--accent) var(--pct,0%), var(--track) var(--pct,0%), var(--track) 100%);border-radius:2px;height:4px}input[type=range]::-moz-range-track{background:var(--track);border-radius:2px;height:4px}input[type=range]::-moz-range-progress{background:var(--accent);border-radius:2px;height:4px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--accent);border:2px solid #fff;border-radius:50%;width:13px;height:13px;margin-top:-4.5px;box-shadow:0 1px 3px #2a224040}input[type=range]::-moz-range-thumb{background:var(--accent);border:2px solid #fff;border-radius:50%;width:13px;height:13px;box-shadow:0 1px 3px #2a224040}.check{cursor:pointer;color:var(--ink);align-items:center;gap:9px;margin:11px 0;font-size:13px;display:flex}.check input{opacity:0;width:0;height:0;position:absolute}.cbox{border:1.5px solid var(--accent);color:#fff;border-radius:5px;flex:none;justify-content:center;align-items:center;width:18px;height:18px;transition:background .12s;display:inline-flex}.check input:checked~.cbox{background:var(--accent)}.check input:disabled~.cbox{opacity:.4}.hint{color:var(--muted);margin:8px 0 2px;font-size:12px;line-height:1.55}.placeholder{background:var(--soft);border:1px solid var(--border);border-radius:var(--radius);color:var(--muted);align-items:flex-start;gap:9px;padding:16px;font-size:12.5px;line-height:1.55;display:flex}.placeholder .picon{color:var(--muted);flex:none;margin-top:1px}.subblock{background:var(--soft);border-radius:var(--radius);margin:12px 0 4px;padding:12px}.sublabel{color:var(--muted);letter-spacing:.04em;margin-bottom:9px;font-size:11px}.field-label{color:var(--muted);margin:12px 0 7px;font-size:12px}.stack{flex-direction:column;gap:0;display:flex}.swatches{flex-wrap:wrap;align-items:center;gap:7px;display:flex}.swatch{border:1.5px solid var(--border-strong);cursor:pointer;border-radius:50%;width:24px;height:24px;padding:0;transition:transform .1s,box-shadow .1s;position:relative}.swatch:hover{background:inherit;transform:scale(1.08)}.swatch.on{box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--accent)}.swatch.custom{border-style:dashed;justify-content:center;align-items:center;display:inline-flex;overflow:hidden}.swatch.custom input[type=color]{cursor:pointer;opacity:0;border:none;width:200%;height:200%;padding:0;position:absolute;inset:-4px}.warnings{flex-direction:column;gap:6px;margin:4px 0 8px;display:flex}.warn{color:#9a5a2c;border-radius:var(--radius-sm);background:#fdf3e7;border:1px solid #f0d3ad;align-items:flex-start;gap:8px;padding:8px 10px;font-size:12px;line-height:1.45;display:flex}.warn svg{color:#c07f3a;flex:none;margin-top:1px}.place-config{border-top:1px dashed var(--border);margin-top:12px;padding-top:12px}.icon-groups{flex-direction:column;gap:10px;max-height:264px;margin:10px 0 4px;padding-right:2px;display:flex;overflow-y:auto}.icon-cat{color:var(--muted);letter-spacing:.04em;margin-bottom:6px;font-size:11px}.icon-cells{grid-template-columns:repeat(5,1fr);gap:6px;display:grid}.icon-cell{aspect-ratio:1;color:var(--ink);border:1px solid var(--border-strong);border-radius:var(--radius-sm);justify-content:center;align-items:center;padding:6px;display:inline-flex}.icon-cell:hover{background:var(--soft);border-color:var(--accent)}.icon-cell.active{background:var(--accent);border-color:var(--accent);color:#fff}.anchor-grid{grid-template-rows:repeat(3,30px);grid-template-columns:repeat(3,30px);gap:5px;margin:4px 0 8px;display:grid}.anchor-btn{border:1px solid var(--border-strong);border-radius:var(--radius-sm);width:30px;height:30px;padding:0;position:relative}.anchor-btn:after{content:"";background:var(--muted);border-radius:50%;width:6px;height:6px;margin:auto;position:absolute;inset:0}.anchor-btn:hover{border-color:var(--accent)}.anchor-btn.active{background:var(--accent);border-color:var(--accent)}.anchor-btn.active:after{background:#fff}.anchor-center{width:30px;height:30px}.text-input{width:100%;font-family:var(--font);color:var(--ink);border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:#fff;padding:7px 10px;font-size:13px}.text-input::placeholder{color:var(--muted)}.num-row{color:var(--ink);justify-content:space-between;align-items:center;gap:10px;margin:4px 0 8px;font-size:13px;display:flex}.num-row input{width:72px;font-family:var(--font);border:1px solid var(--border-strong);border-radius:var(--radius-sm);color:var(--ink);padding:6px 8px;font-size:13px}.dim-row{align-items:flex-end;gap:8px;display:flex}.dim-row label{color:var(--muted);flex-direction:column;flex:1 1 0;gap:4px;font-size:11px;display:flex}.dim-row input{width:100%;font-family:var(--font);border:1px solid var(--border-strong);border-radius:var(--radius-sm);color:var(--ink);padding:6px 8px;font-size:13px}.dim-x{color:var(--muted);padding-bottom:7px}