*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:Pretendard,Malgun Gothic,system-ui,sans-serif;background:#0e1116;color:#dfe4ec;overflow:hidden}.app{display:flex;flex-direction:column;height:100%}header{display:flex;align-items:center;gap:16px;padding:10px 16px;background:#171b22;border-bottom:1px solid #262c37;flex-wrap:wrap}.brand{font-weight:700;font-size:15px;white-space:nowrap}.brand .sub{font-weight:400;font-size:12px;color:#8b94a7;margin-left:6px}.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}button,select{background:#232a36;color:#dfe4ec;border:1px solid #323b4b;border-radius:8px;padding:7px 12px;font-size:13px;cursor:pointer;font-family:inherit}button:hover:not(:disabled){background:#2c3546}button:disabled{opacity:.4;cursor:default}button.active{background:#3d5afe;border-color:#3d5afe;color:#fff}button.install{background:#1d4d2e;border-color:#2c7a46;color:#b9f0cb}button.install:hover{background:#256039}.installed-tip{color:#8fdba6}.body{flex:1;display:flex;min-height:0}aside{width:240px;min-width:240px;background:#12151b;border-right:1px solid #262c37;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:16px}aside h3{font-size:12px;color:#8b94a7;margin-bottom:8px;font-weight:600}aside .count{background:#232a36;border-radius:10px;padding:1px 8px;font-size:11px;margin-left:4px}.pieces{list-style:none;max-height:40vh;overflow-y:auto}.pieces li{padding:5px 8px;border-radius:6px;font-size:12.5px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pieces li:hover{background:#1c212b}.pieces li.sel{background:#26335c;color:#aebfff}.layers{list-style:none}.layers li label{display:flex;align-items:center;gap:7px;padding:4px;font-size:12.5px;cursor:pointer;border-radius:6px}.layers li label:hover{background:#1c212b}.layers .swatch{width:12px;height:12px;border-radius:3px;flex:none}.layers .lname{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.layers .lcount{color:#667089;font-size:11px}main{flex:1;position:relative;min-width:0}.canvas-wrap{position:absolute;top:0;right:0;bottom:0;left:0}.canvas-wrap canvas{width:100%;height:100%;display:block;cursor:grab;touch-action:none}.canvas-wrap canvas:active{cursor:grabbing}.canvas-wrap canvas.measuring{cursor:crosshair}.dropzone{position:absolute;top:24px;right:24px;bottom:24px;left:24px;border:2px dashed #323b4b;border-radius:16px;display:flex;align-items:center;justify-content:center;transition:border-color .15s,background .15s}.dropzone.over{border-color:#3d5afe;background:#3d5afe0f}.dz-inner{text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center}.dz-icon{font-size:44px}.dz-hint{font-size:12px;color:#667089;line-height:1.7}.error{color:#ff7a7a;font-size:13px}.overlay{position:absolute;top:16px;left:50%;transform:translate(-50%);background:#171b22eb;border:1px solid #323b4b;padding:8px 16px;border-radius:8px;font-size:13px}footer{display:flex;align-items:center;gap:16px;padding:6px 16px;background:#171b22;border-top:1px solid #262c37;font-size:12px;color:#8b94a7}footer .fname{color:#dfe4ec;max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}footer .grow{flex:1}.measure-hint{color:#ffd54d}@media(max-width:720px){aside{position:absolute;z-index:5;height:100%;opacity:.96}.brand .sub{display:none}}