body{color:#222;background:#f5f6f8;margin:0;font-family:Malgun Gothic,맑은 고딕,sans-serif}html,body,#root{height:100%}.app{box-sizing:border-box;flex-direction:column;gap:10px;height:100%;padding:12px 16px;display:flex}.app.over{outline-offset:-6px;outline:3px dashed #2f6fed}.head{flex-wrap:wrap;align-items:baseline;gap:12px;display:flex}h1{margin:0;font-size:22px}.note{color:#666;margin:0;font-size:14px}.message{white-space:pre-line;background:#fff4e5;border:1px solid #ffc680;border-radius:6px;margin:0;padding:6px 12px}.drop{text-align:center;cursor:pointer;color:#445;background:#fff;border:2px dashed #9aa5b5;border-radius:10px;justify-content:center;align-items:center;max-width:520px;height:110px;font-size:15px;display:flex}.drop:hover{background:#eef3ff;border-color:#2f6fed}.toolbar{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.toolbar input[type=text]{border:1px solid #bbb;border-radius:6px;width:180px;padding:6px 8px}button{cursor:pointer;background:#fff;border:1px solid #bbb;border-radius:6px;padding:6px 12px;font-family:inherit}button:hover:not(:disabled){background:#eef3ff}button:disabled{opacity:.45;cursor:default}button.primary{color:#fff;background:#2f6fed;border-color:#2f6fed}button.primary:hover{background:#2559c4}.sep{background:#ccc;width:1px;height:24px}.spacer{flex:1}.workspace{flex:1;gap:12px;min-height:0;display:flex}.side{background:#e9ebef;border-radius:8px;flex-direction:column;flex:none;gap:8px;width:150px;padding:8px;display:flex;overflow-y:auto}.thumb{cursor:pointer;text-align:center;background:#fff;border:3px solid #0000;border-radius:6px;flex:none;padding:4px;position:relative}.thumb.current{border-color:#2f6fed}.thumb.on{background:#dbe6ff}.thumbbox{width:100%;position:relative;overflow:hidden}.thumbbox img{display:block;position:absolute;top:50%;left:50%}.thumb .label{color:#444;margin-top:2px;font-size:12px}.thumb input{cursor:pointer;width:18px;height:18px;position:absolute;top:8px;left:8px}.center{flex-direction:column;flex:1;gap:8px;min-width:0;display:flex}.viewbar{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.viewbar label{cursor:pointer;align-items:center;gap:4px;display:flex}.stage{background:#d5d9e0;border-radius:8px;flex:1;justify-content:center;align-items:center;min-height:0;padding:12px;display:flex;overflow:hidden}.stage img{object-fit:contain;background:#fff;max-width:100%;max-height:100%;box-shadow:0 2px 10px #0000004d}.thumb{border-left-width:6px}.cutgap{cursor:pointer;color:#aab;flex:none;justify-content:center;align-items:center;height:14px;display:flex;position:relative}.cutgap:before{content:"";border-top:2px dashed #0000;position:absolute;top:50%;left:0;right:0}.cutgap:hover{color:#c92a2a}.cutgap:hover:before{border-top-color:#e8a0a0}.cutgap.on{color:#c92a2a}.cutgap.on:before{border-top-color:#c92a2a}.cutgap span{background:#e9ebef;padding:0 4px;font-size:13px;line-height:1;position:relative}.panel{background:#fff;border-radius:8px;flex-direction:column;flex:none;gap:8px;width:230px;min-height:0;padding:10px;display:flex}.panel h2{margin:0;font-size:16px}.groups{flex-direction:column;flex:1;gap:6px;min-height:0;display:flex;overflow-y:auto}.group{cursor:pointer;background:#f5f6f8;border-radius:6px;align-items:center;gap:8px;padding:6px;display:flex}.group:hover{background:#eef3ff}.dot{border-radius:50%;flex:none;width:12px;height:12px}.ginfo{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.ginfo input{box-sizing:border-box;border:1px solid #bbb;border-radius:4px;width:100%;padding:4px 6px}.field{align-items:center;gap:6px;display:flex}.field select{background:#fff;border:1px solid #bbb;border-radius:6px;padding:6px 8px;font-family:inherit}
