:root{--interfacePaletteFill: #535353;--interfaceTabBar: #424242;--interfaceCanvasColor: #282828;--interfaceBorder: #3b3b3b;--interfaceButtonUpFill: #454545;--interfaceButtonDownFill: #383838;--interfaceStaticText: #dddddd;--interfaceDimText: #a0a0a0;--interfaceIconFillActive: #dddddd;--interfaceIconFillDimmed: #8a8a8a;--interfaceHighlight: #54657a;--interfaceAccent: #2b7cd3;--interfaceWhite: #f0f0f0;--interfaceInputFill: #454545;--interfaceToolTipBackground: #2a2a2a;--panelHead: 28px;--optionsBar: 36px;--toolbar: 40px;--dock: 345px;--iconDock: 37px;--gap: 3px;--font: 11px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:-apple-system,Apple SD Gothic Neo,Noto Sans KR,system-ui,sans-serif;font-size:var(--font);color:var(--interfaceStaticText);background:var(--interfaceCanvasColor);user-select:none;-webkit-user-select:none;overflow:hidden}button,input,select{font:inherit;color:inherit}input[type=number],input[type=text]{background:var(--interfaceInputFill);border:1px solid #2e2e2e;border-radius:3px;height:18px;padding:0 4px;color:var(--interfaceWhite)}input[type=number]{width:56px}select{background:var(--interfaceInputFill);border:1px solid #2e2e2e;border-radius:3px;height:18px;color:var(--interfaceWhite)}.app{display:grid;grid-template-rows:var(--optionsBar) 1fr 16px;grid-template-columns:var(--toolbar) var(--gap) 1fr var(--gap) var(--iconDock) var(--gap) var(--dock);height:100%;background:var(--interfaceBorder)}.app.no-dock{grid-template-columns:var(--toolbar) var(--gap) 1fr}.optionsbar{grid-column:1 / -1;display:flex;align-items:center;gap:6px;padding:0 8px;background:var(--interfacePaletteFill);border-bottom:1px solid var(--interfaceBorder);white-space:nowrap;overflow:hidden}.optionsbar .home{font-size:16px;width:28px;text-align:center;cursor:pointer}.optionsbar .toolicon{width:34px;display:flex;align-items:center;justify-content:center;gap:2px;font-size:14px;border-right:1px solid #3a3a3a;padding-right:6px}.optionsbar .ctl{display:flex;align-items:center;gap:4px}.optionsbar label{color:var(--interfaceStaticText)}.optionsbar .sep{width:1px;height:24px;background:#3a3a3a;margin:0 2px}.optionsbar .right{margin-left:auto;display:flex;gap:10px;align-items:center}.pill{background:var(--interfaceButtonUpFill);border:1px solid #2e2e2e;border-radius:10px;height:20px;padding:0 10px;cursor:pointer;color:var(--interfaceWhite)}.pill:hover{background:#505050}.pill.primary{background:var(--interfaceAccent);border-color:var(--interfaceAccent);color:#fff}.pill:disabled{opacity:.4;cursor:default}.segment{display:inline-flex;border:1px solid #2e2e2e;border-radius:3px;overflow:hidden}.segment button{background:var(--interfaceButtonUpFill);border:0;width:22px;height:18px;cursor:pointer}.segment button.on{background:var(--interfaceButtonDownFill);color:#fff}.toolbar{grid-row:2;grid-column:1;background:var(--interfacePaletteFill);display:flex;flex-direction:column;align-items:center;padding-top:12px}.toolbar .head{height:11px;width:100%;background:var(--interfaceTabBar);font-size:8px;color:var(--interfaceDimText);text-align:center;line-height:11px;margin-top:-12px;margin-bottom:1px}.tool{width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-size:15px;border-radius:4px;cursor:pointer;position:relative;color:var(--interfaceIconFillActive)}.tool.on{background:var(--interfaceButtonDownFill);outline:1px solid #636363}.tool:hover{background:#5e5e5e}.tool .sub{position:absolute;right:2px;bottom:2px;width:0;height:0;border-left:3px solid transparent;border-bottom:3px solid #bbb}.toolbar .colors{margin-top:14px;position:relative;width:30px;height:30px}.toolbar .colors .fg,.toolbar .colors .bg{position:absolute;width:16px;height:16px;border:1px solid #ddd;cursor:pointer}.toolbar .colors .fg{left:0;top:0;z-index:2}.toolbar .colors .bg{left:10px;top:10px}.canvaswrap{grid-row:2;grid-column:3;position:relative;overflow:hidden;background:var(--interfaceCanvasColor);display:flex;flex-direction:column}.doctabs{height:28px;background:var(--interfaceTabBar);display:flex;align-items:flex-end;flex-shrink:0}.doctab{height:28px;background:var(--interfacePaletteFill);padding:0 10px;display:flex;align-items:center;gap:8px;max-width:320px}.doctab .x{color:var(--interfaceDimText);cursor:pointer}.canvasarea{flex:1;position:relative;overflow:hidden}.canvasarea canvas{position:absolute;left:0;top:0}.icondock{grid-row:2;grid-column:5;background:var(--interfacePaletteFill);display:flex;flex-direction:column;align-items:center;padding-top:6px;gap:6px}.icondock button{width:28px;height:24px;background:transparent;border:0;cursor:pointer;border-radius:3px;font-size:14px}.icondock button.on{background:var(--interfaceButtonDownFill)}.dock{grid-row:2;grid-column:7;display:flex;flex-direction:column;gap:var(--gap);overflow:hidden;background:var(--interfaceBorder)}.pgroup{background:var(--interfacePaletteFill);display:flex;flex-direction:column;min-height:60px}.pgroup.grow{flex:1;min-height:120px}.pgroup .tabs{height:var(--panelHead);background:var(--interfaceTabBar);display:flex;align-items:stretch;flex-shrink:0}.pgroup .tabs .tab{padding:0 10px;display:flex;align-items:center;color:var(--interfaceDimText);cursor:pointer}.pgroup .tabs .tab.on{background:var(--interfacePaletteFill);color:var(--interfaceWhite)}.pgroup .tabs .menu{margin-left:auto;padding:0 8px;display:flex;align-items:center;color:var(--interfaceDimText);cursor:pointer}.pgroup .body{flex:1;overflow:auto}.statusbar{grid-row:3;grid-column:1 / -1;background:var(--interfacePaletteFill);display:flex;align-items:center;gap:14px;padding:0 12px;font-size:11px;color:var(--interfaceDimText)}.statusbar .zoom{color:var(--interfaceWhite);width:50px}.statusbar .msg{margin-left:auto}.statusbar .err{color:#ff8a8a}.layers .ctlrow{display:flex;align-items:center;gap:6px;padding:5px 6px;height:28px}.layers .ctlrow select{width:121px}.layers .ctlrow .op{margin-left:auto;display:flex;align-items:center;gap:4px}.layers .locks{display:flex;gap:8px;padding:2px 6px 6px;color:var(--interfaceDimText);border-bottom:1px solid var(--interfaceBorder)}.layers .locks span{cursor:pointer}.layers .locks span.on{color:var(--interfaceWhite)}.lrow{display:flex;align-items:center;height:42px;border-bottom:1px solid #4a4a4a;cursor:pointer}.lrow.on{background:var(--interfaceHighlight)}.lrow .eye{width:30px;text-align:center;background:#4d4d4d;height:100%;display:flex;align-items:center;justify-content:center}.lrow .thumb{width:54px;height:40px;margin-left:6px;background:repeating-conic-gradient(#bbb 0 25%,#fff 0 50%) 0 0/10px 10px;border:1px solid #222;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:18px;overflow:hidden}.lrow .thumb canvas{max-width:100%;max-height:100%}.lrow .mask{width:40px;height:40px;background:#fff;border:1px solid #222;margin-left:4px;flex-shrink:0}.lrow .name{margin-left:8px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lrow .badge{color:var(--interfaceDimText);margin-right:8px;font-size:10px}.lrow input.rename{width:100%}.lfoot{height:24px;border-top:1px solid var(--interfaceBorder);display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:0 8px}.lfoot button{background:transparent;border:0;cursor:pointer;color:var(--interfaceIconFillActive);font-size:13px}.lfoot button:hover{color:#fff}.props{padding:8px 10px}.props h4{margin:10px 0 6px;font-size:11px;font-weight:700;color:var(--interfaceWhite)}.props .grid{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:6px 8px;align-items:center}.props .head{display:flex;align-items:center;gap:8px;height:34px;border-bottom:1px solid var(--interfaceBorder);margin:-8px -10px 6px;padding:0 10px}.hist .row{height:22px;display:flex;align-items:center;gap:8px;padding:0 8px;cursor:pointer}.hist .row.on{background:var(--interfaceHighlight)}.hist .row.future{color:var(--interfaceDimText)}.hist .snap{height:32px;border-bottom:1px solid var(--interfaceBorder);display:flex;align-items:center;gap:8px;padding:0 8px}.colorpanel{display:flex;gap:8px;padding:8px}.colorpanel .swatches{width:30px;height:30px;position:relative}.colorpanel .swatches div{position:absolute;width:18px;height:18px;border:1px solid #ddd}.colorpanel .field{flex:1;display:flex;flex-direction:column;gap:6px}.colorpanel input[type=color]{width:40px;height:22px;padding:0;border:0;background:none}.colorpanel .vals{display:flex;gap:6px;align-items:center}.home{height:100%;display:flex;align-items:center;justify-content:center;background:var(--interfaceCanvasColor)}.home-box{width:560px;background:var(--interfacePaletteFill);border-radius:8px;padding:24px}.home h1{margin:0 0 6px;font-size:20px}.hint{color:var(--interfaceDimText)}.row{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}.doclist{margin-top:12px;max-height:240px;overflow:auto}.doclist .d{display:flex;gap:10px;padding:6px 8px;cursor:pointer;border-radius:4px}.doclist .d:hover{background:#606060}.modal{position:fixed;inset:0;background:#00000059;display:flex;align-items:center;justify-content:center;z-index:50}.dialog{background:var(--interfacePaletteFill);border:1px solid #222;border-radius:8px;min-width:360px;max-width:90vw;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 10px 30px #00000080}.dialog .title{height:28px;display:flex;align-items:center;justify-content:center;background:var(--interfaceTabBar);font-weight:600;border-radius:8px 8px 0 0}.dialog .body{padding:14px 16px;display:flex;gap:16px}.dialog .fields{display:grid;grid-template-columns:auto 1fr auto;gap:8px 10px;align-items:center;min-width:300px}.dialog .btns{display:flex;flex-direction:column;gap:8px}.dialog .btns .pill{min-width:90px}.dialog textarea{width:100%;min-height:80px;background:var(--interfaceInputFill);color:var(--interfaceWhite);border:1px solid #2e2e2e}.dialog .foot{padding:8px 16px 14px;display:flex;gap:8px;justify-content:flex-end}.dialog .mono{font-family:ui-monospace,Menlo,monospace;font-size:11px;word-break:break-all}.menubar{display:flex;gap:2px}.menubar .m{position:relative;padding:0 8px;height:24px;display:flex;align-items:center;cursor:pointer;border-radius:3px}.menubar .m:hover,.menubar .m.open{background:#5e5e5e}.menubar .items{position:absolute;left:0;top:24px;background:#3a3a3a;border:1px solid #222;border-radius:6px;min-width:220px;padding:4px 0;z-index:60;box-shadow:0 6px 20px #00000080}.menubar .it{display:flex;justify-content:space-between;padding:4px 12px;cursor:pointer;white-space:nowrap}.menubar .it:hover{background:var(--interfaceAccent);color:#fff}.menubar .it.off{color:#777;pointer-events:none}.menubar .it kbd{color:var(--interfaceDimText);font-family:inherit;margin-left:24px}.menubar hr{border:0;border-top:1px solid #555;margin:4px 0}