.header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background-color:#343434;color:#fff;width:100%;position:relative;z-index:1000;border-bottom:1px solid #444}.header-left{display:flex;align-items:center;gap:20px;flex:1}.header-center{display:flex;align-items:center;gap:12px;flex:1;justify-content:center}.header-field{display:flex;align-items:center;gap:8px;min-width:0}.header-field-label{color:#aaa;font-family:Pretendard;font-size:12px;font-weight:500;white-space:nowrap}.header-field-input{background-color:#2d2d2d;color:#fff;border:1px solid #555;padding:8px 12px;border-radius:4px;font-family:Pretendard;font-size:14px;width:220px;max-width:280px;outline:none;transition:border-color .2s}.header-field-input:focus{border-color:#4680ff}.header-field-input.readonly,.header-field-input:read-only{background-color:#252525;color:#999;border-color:#444;cursor:default}.header-field-input.readonly:focus,.header-field-input:read-only:focus{border-color:#444}.header-field-input::placeholder{color:#777}.logo img{width:124px}.header-right{display:flex;gap:8px;flex:1;justify-content:flex-end}.header-right .header-btn{color:#f8f9fa;padding:10px 16px;border-radius:8px;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s;font-family:Pretendard;font-weight:500;font-size:14px}.header-btn-new{background-color:transparent;border:1px solid #f8f9fa}.header-btn-save{background-color:#4680ff;border:1px solid #4680ff}.header-btn-export{background-color:#28a745;border:1px solid #28a745}.header-btn-new:hover{background-color:#f8f9fa;color:#212529}.header-btn-save:hover{background-color:#3866cc;border-color:#3866cc}.header-btn-export:hover{background-color:#218838;border-color:#218838}.side-panel{width:100%;height:100%;display:flex;flex-direction:column;background-color:#1a1a1a}.side-panel:not(.expanded){width:60px}.side-panel.expanded{width:250px}.panel-icons{width:50px;display:flex;flex-direction:column;background-color:#34495e;padding:10px 0}.panel-icon{width:50px;height:50px;border:none;background:none;color:#ecf0f1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.panel-icon:hover{background-color:#2c3e50}.panel-icon.active{background-color:#3498db}.panel-icon i{font-size:20px}.panel-tabs{height:100vh;display:flex;flex-direction:column;padding:10px;gap:5px;background-color:#242424;border-right:1px solid #444}.panel-tab{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;color:#a8a8a8;background:none;border:none;border-radius:4px;cursor:pointer;transition:all .2s ease;width:100%}.panel-tab:hover,.panel-tab.active{background-color:#4680ff;color:#fff}.panel-tab.active i{color:#fff}.panel-tab i{font-size:20px;width:24px;text-align:center}.panel-content{flex:1;overflow-y:auto;padding:15px;background-color:#1a1a1a}.panel-content h3{margin:0 0 15px;font-size:16px;color:#ecf0f1}.element-list{display:flex;flex-direction:column;gap:10px}.element-list button{display:flex;align-items:center;gap:10px;padding:10px;border:none;background-color:#34495e;color:#fff;border-radius:4px;cursor:pointer;transition:background-color .2s}.element-list button:hover{background-color:#3498db}.template-list{padding:15px;display:flex;flex-direction:column;gap:10px}.template-list button{background-color:#2d2d2d;color:#fff;border:1px solid #3d3d3d;padding:10px;border-radius:4px;cursor:pointer;transition:background-color .2s}.template-list button:hover{background-color:#3d3d3d}.upload-area{border:2px dashed #34495e;border-radius:4px;padding:20px;text-align:center}.upload-button{display:inline-flex;align-items:center;gap:10px;padding:10px 20px;background-color:#3498db;color:#fff;border-radius:4px;cursor:pointer;transition:background-color .2s}.upload-button:hover{background-color:#2980b9}.history-list{display:flex;flex-direction:column;gap:10px}.history-item{padding:10px;background-color:#34495e;border-radius:4px}.history-item span{display:block;margin-bottom:5px}.history-item small{color:#95a5a6}.element-tools,.template-list{display:flex;flex-direction:column;gap:5px}.element-tools button,.template-list button{background-color:#2d2d2d;color:#fff;border:1px solid #3d3d3d;padding:8px;border-radius:4px;cursor:pointer;transition:background-color .2s}.element-tools button:hover,.template-list button:hover{background-color:#3d3d3d}.upload-section{padding:15px;display:flex;flex-direction:column;gap:10px}.upload-button{background-color:#2d2d2d;color:#fff;border:1px solid #3d3d3d;padding:10px;border-radius:4px;cursor:pointer;text-align:center;transition:background-color .2s}.upload-button:hover{background-color:#3d3d3d}.template-list,.upload-section{display:flex;flex-direction:column;gap:10px;padding:10px}.template-item,.upload-item{padding:10px;background-color:#2a2a2a;border-radius:4px;cursor:pointer;transition:all .2s ease}.template-item:hover,.upload-item:hover{background-color:#333}.panel-content::-webkit-scrollbar{width:6px}.panel-content::-webkit-scrollbar-track{background:#1a1a1a}.panel-content::-webkit-scrollbar-thumb{background:#333;border-radius:3px}.panel-content::-webkit-scrollbar-thumb:hover{background:#444}.layer-panel{width:100%;height:100%;background:#242424;display:flex;flex-direction:column}.layer-header{padding:16px;border-bottom:1px solid #444;background:#242424}.layer-header{display:flex;align-items:center;justify-content:space-between}.layer-header h3{margin:0;font-size:14px;font-weight:600;color:#fff;font-family:Pretendard}.test-group-btn{background:none;border:none;color:#ccc;font-size:16px;cursor:pointer;padding:4px;border-radius:3px;transition:all .2s ease;display:flex;align-items:center;justify-content:center;width:24px;height:24px}.test-group-btn:hover{background-color:#424242;color:#fff;transform:scale(1.1)}.layer-list{flex:1;padding:8px;overflow-y:auto;background-color:#242424}.layer-item{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;margin-bottom:2px;border-radius:4px;transition:all .2s ease;font-size:13px;color:#d4d4d4}.layer-item:hover{background:#343434}.layer-item.selected{background:#343434;color:#fff}.layer-item.multi-selected{background:#2a4a6a;color:#fff;border-left:3px solid #007bff}.layer-item.selected.multi-selected{background:#1a4a8a;color:#fff;border-left:3px solid #0056b3}.layer-group{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;margin-bottom:4px;border-radius:4px;transition:all .2s ease;font-size:13px;color:#d4d4d4;background:#2a2a2a;border:1px solid #444;cursor:pointer}.layer-group:hover{background:#3a3a3a;border-color:#555}.layer-group.selected{background:#4a4a4a;border-color:#666;color:#fff}.group-header{display:flex;align-items:center;flex:1;cursor:pointer}.group-icon{margin-right:8px;font-size:16px}.group-name{font-weight:600;flex:1}.mask-group-badge{background:#ff6b35;color:#fff;padding:2px 6px;border-radius:10px;font-size:10px;font-weight:500;margin-left:8px}.group-controls{display:flex;align-items:center;gap:4px;opacity:1}.group-expand-btn{background:none;border:none;padding:2px;cursor:pointer;border-radius:2px;margin-right:4px;display:flex;align-items:center;justify-content:center;width:16px;height:16px;transition:background-color .2s}.group-expand-btn:hover{background-color:#424242}.expand-icon{font-size:10px;color:#ccc;transition:transform .2s ease}.expand-icon.expanded{transform:rotate(0)}.group-children{margin-left:20px;border-left:1px solid #444;padding-left:8px}.group-child{background:#1a1a1a;border-left:2px solid #666;margin-left:8px}.group-child:hover{background:#2a2a2a;border-left-color:#888}.child-indicator{color:#666;font-size:12px;margin-right:4px;font-family:monospace}.group-empty{padding:8px 12px;color:#888;font-size:12px;font-style:italic;text-align:center;background:#1a1a1a;border-left:2px solid #444;margin-left:8px}.layer-icon{margin-right:8px}.layer-content{display:flex;align-items:center;flex:1;cursor:pointer;min-width:0}.layer-name{font-weight:500;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.layer-controls{display:flex;align-items:center;gap:4px;opacity:1}.layer-control-btn{background:none;border:none;padding:4px;cursor:pointer;border-radius:3px;font-size:12px;transition:background-color .2s;display:flex;align-items:center;justify-content:center;width:24px;height:24px}.layer-control-btn:hover{background-color:#424242}.layer-control-btn{color:#ddd}.layer-control-btn:hover{color:#fff}.layer-control-btn.delete:hover{background-color:#dc3545;color:#fff}.layer-control-btn.mask{position:relative}.mask-bullet{width:8px;height:8px;border-radius:50%;background-color:#666;border:1px solid #999;transition:all .2s ease}.layer-control-btn.mask:hover .mask-bullet{background-color:#ff6b35;border-color:#ff6b35}.layer-control-btn.mask.active .mask-bullet{background-color:#ff6b35;border-color:#ff6b35;box-shadow:0 0 4px #ff6b3580}.chain-link-icon{font-size:12px;color:#ff6b35;margin-left:4px;opacity:.8;transition:opacity .2s ease}.chain-link-icon:hover{opacity:1}.layer-item.dragging{opacity:.5;transform:rotate(2deg)}.layer-item.drag-over{border-top:2px solid #007bff;background-color:#e3f2fd}.layer-item[draggable=true]{cursor:grab}.layer-item[draggable=true]:active{cursor:grabbing}.layer-list::-webkit-scrollbar{width:6px}.layer-list::-webkit-scrollbar-track{background:#1a1a1a}.layer-list::-webkit-scrollbar-thumb{background:#333;border-radius:3px}.layer-list::-webkit-scrollbar-thumb:hover{background:#444}.layer-controls{display:flex;align-items:center;gap:8px;flex:1}.layer-name-input{flex:1;border:none;background:transparent;padding:4px;font-size:12px}.layer-name-input:focus{outline:none;background-color:#fff;border:1px solid #2196f3;border-radius:2px}.visibility-toggle,.delete-layer{background:none;border:none;cursor:pointer;padding:4px;font-size:16px;opacity:.7;transition:opacity .2s}.visibility-toggle:hover,.delete-layer:hover{opacity:1}.layer-type{font-size:16px;margin-left:8px}.element-panel{width:100%;height:100%;background:#242424;display:flex;flex-direction:column}.element-header{padding:16px;border-bottom:1px solid #444}.element-header h3{margin:0;font-size:14px;font-weight:600;color:#fff;font-family:Pretendard}.element-grid{flex:1;padding:16px;overflow-y:auto}.element-category{margin-bottom:24px}.element-category h4{margin:0 0 12px;font-size:13px;font-weight:600;color:#fff;text-transform:uppercase;letter-spacing:.5px;font-family:Pretendard;font-weight:400}.element-items{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.element-item{display:flex;flex-direction:column;align-items:center;padding:12px 8px 16px;background:#353535;border:1px solid #383838;border-radius:6px;cursor:pointer;transition:all .2s ease;color:#aaa}.element-item:hover{border-color:#007bff;color:#fff}.element-icon{font-size:20px;margin-bottom:4px}.element-item span{font-family:Pretendard;font-weight:400;font-size:13px;margin-top:6px}.element-content::-webkit-scrollbar{width:6px}.element-content::-webkit-scrollbar-track{background:#1a1a1a}.element-content::-webkit-scrollbar-thumb{background:#333;border-radius:3px}.element-content::-webkit-scrollbar-thumb:hover{background:#444}.transform-panel{width:100%;height:100%;display:flex;flex-direction:column;background-color:#1a1a1a;color:#fff}.transform-header{padding:15px;border-bottom:1px solid #333}.transform-header h3{margin:0;font-size:16px;font-weight:500}.transform-content{padding:15px;display:flex;flex-direction:column;gap:20px}.transform-group{display:flex;flex-direction:column;gap:8px}.transform-group label{font-size:14px;color:#999}.transform-inputs{display:flex;gap:10px}.transform-input{display:flex;align-items:center;gap:5px;flex:1}.transform-input span{font-size:12px;color:#999;width:20px}.transform-input input{flex:1;background-color:#2a2a2a;border:1px solid #333;border-radius:4px;padding:6px 8px;color:#fff;font-size:14px}.transform-input input:focus{outline:none;border-color:#666}.transform-content::-webkit-scrollbar{width:6px}.transform-content::-webkit-scrollbar-track{background:#1a1a1a}.transform-content::-webkit-scrollbar-thumb{background:#333;border-radius:3px}.transform-content::-webkit-scrollbar-thumb:hover{background:#444}.editor_option{padding:12px;border-bottom:1px solid #3a3a3a}.editor_option:last-child{border-bottom:none}.ui_title{display:block;font-size:12px;font-weight:600;color:#fff;margin-bottom:12px;text-transform:uppercase;font-family:Pretendard}.editor_option label{display:block;font-size:12px;color:#999;margin-bottom:4px;font-family:Pretendard}.input_group_text{font-family:Pretendard;padding:4px 8px;font-size:12px;color:#999;background:#2a2a2a;border:none;border-right:1px solid #3a3a3a}.btn-icon{padding:4px;color:#999;background:none;border:none;cursor:pointer;transition:color .2s}.btn-icon.active{color:#007bff}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.dimensions_wrap,.position_wrap,.rotation_wrap{margin-bottom:10px}.rotation_wrap{width:120px}.colorChip .form-control-color{width:32px!important;height:32px;padding:5px;border:1px solid #3a3a3a;border-radius:4px;cursor:pointer}input:nth-of-type(1){border-radius:8px 0 0 8px!important}input:nth-of-type(2){border-radius:0 8px 8px 0!important}.color_opacity{width:46px!important}.colorChip{display:flex;flex-direction:row;align-items:center}.form-control-color{width:40px;height:24px;padding:0;border:1px solid #3a3a3a;border-radius:4px;cursor:pointer}.form-control-color::-webkit-color-swatch-wrapper{padding:0}.form-control-color::-webkit-color-swatch{border:none;border-radius:2px}.color_opacity{width:60px;text-align:right}.editor_option.appearance{padding:12px;border-bottom:1px solid #3a3a3a}.ui_title{display:block;font-size:12px;font-weight:600;color:#fff;margin-bottom:12px;text-transform:uppercase}.input_wrap{display:flex;gap:8px;align-items:center}.input_width_50{width:calc(40% - 4px)}.form-select{width:100%;height:32px;padding:4px 8px;font-size:12px;color:#fff;background-color:#2a2a2a;border:1px solid #3a3a3a;border-radius:4px;outline:none}.form-select:focus{background-color:#333;border-color:#007bff}.input_width_100{width:100%}.input_width_50{width:120px!important;flex-grow:1}.btn-group{display:flex;border-radius:4px;overflow:visible;width:100%}.btn{padding:4px 8px;font-size:12px;border:1px solid #3a3a3a;background-color:#2a2a2a;color:#999;cursor:pointer;transition:all .2s;flex:1;display:flex;align-items:center;justify-content:center}.btn:hover{background-color:#333;color:#fff}.btn.active{background-color:#007bff;color:#fff;border-color:#007bff}.btn-secondary{background-color:#2a2a2a;border-color:#3a3a3a}.btn-group .btn:not(:first-child){border-left:1px solid #3a3a3a;margin-left:-1px}.btn-group .btn:first-child{border-radius:4px 0 0 4px}.btn-group .btn:last-child{border-radius:0 4px 4px 0}.btn-group .btn:not(:first-child):not(:last-child){border-radius:0}.btn img{width:16px;height:16px;opacity:.7}.btn.active img{opacity:1}.input_group{display:flex;align-items:center;background:#2a2a2a;border:1px solid #3a3a3a;border-radius:4px;overflow:hidden}.input_group_text{padding:4px 8px;font-size:12px;color:#999;background:#2a2a2a;border:none;border-right:1px solid #3a3a3a}.form-control{width:100%;padding:4px 8px;font-size:12px;color:#fff;background:#2a2a2a;border:none;outline:none}.form-control:focus{background:#333}.input_group_text img{width:16px;height:16px;opacity:.7}.editor_option.ai-prompt-chat{padding:12px;border-bottom:1px solid #3a3a3a}.ai-chat-container{display:flex;flex-direction:column;height:300px;background-color:#2a2a2a;border:1px solid #3a3a3a;border-radius:8px;overflow:hidden}.ai-chat-messages{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px}.ai-chat-messages::-webkit-scrollbar{width:6px}.ai-chat-messages::-webkit-scrollbar-track{background:#1f1f1f}.ai-chat-messages::-webkit-scrollbar-thumb{background:#555;border-radius:3px}.ai-chat-messages::-webkit-scrollbar-thumb:hover{background:#666}.ai-chat-empty{display:flex;align-items:center;justify-content:center;height:100%;color:#666;font-size:12px}.ai-chat-empty p{margin:0}.ai-chat-message{display:flex;margin-bottom:4px}.ai-chat-message-user{justify-content:flex-end}.ai-chat-message-assistant{justify-content:flex-start}.ai-chat-message-content{max-width:80%;padding:8px 12px;border-radius:8px;font-size:12px;line-height:1.4;word-wrap:break-word}.ai-chat-message-user .ai-chat-message-content{background-color:#4680ff;color:#fff;border-bottom-right-radius:2px}.ai-chat-message-assistant .ai-chat-message-content{background-color:#333;color:#fff;border-bottom-left-radius:2px}.ai-chat-input-container{display:flex;gap:8px;padding:12px;border-top:1px solid #3a3a3a;background-color:#2a2a2a}.ai-chat-input{flex:1;padding:8px 12px;font-size:12px;color:#fff;background-color:#333;border:1px solid #444;border-radius:6px;outline:none;resize:none;font-family:inherit;line-height:1.4}.ai-chat-input:focus{border-color:#4680ff;background-color:#3a3a3a}.ai-chat-input::placeholder{color:#666}.ai-chat-send-button{padding:8px 16px;font-size:12px;font-weight:500;color:#fff;background-color:#4680ff;border:none;border-radius:6px;cursor:pointer;transition:background-color .2s;white-space:nowrap}.ai-chat-send-button:hover:not(:disabled){background-color:#3866cc}.ai-chat-send-button:disabled{background-color:#444;color:#666;cursor:not-allowed}.bezier-editor{background:#242424;border-bottom:1px solid #444;padding:16px}.bezier-header{margin-bottom:16px}.bezier-header h4{margin:0;font-size:14px;font-weight:600;color:#fff;font-family:Pretendard}.bezier-controls{display:flex;flex-direction:column;gap:16px}.input_group{display:flex;align-items:center}.tension-slider{flex:1;height:2px;background:#999;border-radius:8px;outline:none;-webkit-appearance:none;margin:16px 8px}.tension-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:#007bff;border-radius:50%;cursor:pointer}.tension-slider::-moz-range-thumb{width:14px;height:14px;background:#007bff;border-radius:50%;cursor:pointer;border:none}.tension-value{font-size:12px;font-weight:500;color:#999;min-width:24px;text-align:center}.checkbox-label span{color:#999;font-family:Pretendard}.bezier-info{background:#1d1d1d;border-radius:8px;padding:12px}.bezier-info p{margin:0 0 8px;font-family:Pretendard;font-size:12px;color:#999;line-height:1.4;font-weight:600}.bezier-info ul{margin:0;padding-left:16px;font-family:Pretendard;font-size:11px;color:#999;line-height:1.3}.bezier-info li{margin-bottom:2px}.polygon-editor{background:#242424;border-bottom:1px solid #444;padding:16px}.polygon-header{margin-bottom:16px}.polygon-header h4{margin:0;font-size:14px;font-weight:600;color:#fff;font-family:Pretendard}.polygon-controls{display:flex;flex-direction:column;gap:16px}.control-group label{font-size:12px;font-weight:500;color:#999!important}.checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:#333}.checkbox-label input[type=checkbox]{width:16px;height:16px;accent-color:#007bff}.polygon-info{background:#1d1d1d;border-radius:8px;padding:12px;margin-top:8px}.polygon-info p{margin:0 0 8px;font-family:Pretendard;font-size:12px;color:#999;line-height:1.4;font-weight:600}.polygon-info ul{margin:0;padding-left:16px;font-family:Pretendard;font-size:11px;color:#999;line-height:1.3}.polygon-info li{margin-bottom:2px}.line-editor{background:#242424;border-bottom:1px solid #444;padding:16px}.line-header{margin-bottom:16px}.line-header h4{margin:0;font-size:14px;font-weight:600;color:#fff;font-family:Pretendard}.line-controls{display:flex;flex-direction:column;gap:16px}.control-group{display:flex;flex-direction:column;gap:8px}.control-group label{font-size:12px;font-weight:500;color:#666}.point-info{display:flex;gap:12px}.point-info span{width:120px;height:32px;font-family:Pretendard;font-size:11px;font-weight:400;color:#fff;background:#333;padding:8px;border-radius:8px;border:1px solid #444}.line-info{background:#f8f9fa;border:1px solid #e9ecef;border-radius:6px;padding:12px;margin-top:8px}.line-info p{margin:0 0 8px;font-size:11px;color:#999;line-height:1.4;font-weight:600}.line-info ul{margin:0;padding-left:16px;font-size:10px;color:#999;line-height:1.3}.line-info li{margin-bottom:2px}.uploaded-images-panel{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.uploaded-images-header{padding:20px;border-bottom:1px solid #444444;background:#242424}.uploaded-images-header h3{margin:0 0 4px;font-size:16px;font-weight:600;color:#fff;font-family:Pretendard}.uploaded-images-header p{margin:0;font-size:13px;color:#888;font-family:Pretendard;font-weight:400}.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center}.empty-state h4{margin:0 0 8px;font-size:16px;font-weight:600;color:#333;font-family:Pretendard}.empty-state p{margin:0;font-size:14px;color:#666;line-height:1.5;font-family:Pretendard}.images-grid{flex:1;padding:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;overflow-y:auto;align-content:start}.image-item{display:flex;flex-direction:column;background:#404040;border-radius:8px;overflow:hidden;box-shadow:0 2px 4px #0000001a;transition:transform .2s ease,box-shadow .2s ease}.image-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.image-thumbnail{position:relative;width:100%;height:80px;overflow:hidden;background:#353535}.image-thumbnail img{width:100%;height:100%;object-fit:cover;cursor:pointer;transition:transform .2s ease}.image-thumbnail:hover img{transform:scale(1.05)}.image-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;gap:8px;opacity:0;transition:opacity .2s ease}.image-thumbnail:hover .image-overlay{opacity:1}.use-image-btn,.delete-image-btn{width:32px;height:32px;border:none;border-radius:50%;background:#ffffffe6;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all .2s ease}.use-image-btn:hover{background:#28a745;color:#fff;transform:scale(1.1)}.delete-image-btn:hover{background:#dc3545;color:#fff;transform:scale(1.1)}.image-info{padding:8px;background:#353535}.image-name{font-size:12px;font-weight:500;color:#fff;margin-bottom:2px;line-height:1.3}.image-date{font-size:10px;color:#888}.uploaded-images-footer{padding:16px 20px;border-top:1px solid #444;background:#222}.storage-info{display:flex;flex-direction:column;gap:8px}.storage-used{display:flex;justify-content:space-between;align-items:center}.storage-label{font-family:Pretendard;font-size:13px;color:#fff;font-weight:500}.storage-value{font-family:Pretendard;font-size:12px;color:#888;font-weight:400}.storage-bar{height:4px;background:#505050;border-radius:2px;overflow:hidden}.storage-progress{height:100%;background:linear-gradient(90deg,#1d8be8,#39a6ff);border-radius:2px;transition:width .3s ease}.images-grid::-webkit-scrollbar{width:6px}.images-grid::-webkit-scrollbar-track{background:#f1f1f1}.images-grid::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.images-grid::-webkit-scrollbar-thumb:hover{background:#a8a8a8}@media (max-width: 768px){.images-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px;padding:12px}.image-thumbnail{height:70px}.image-info{padding:6px}.image-name{font-size:11px}.image-date{font-size:9px}}.template-panel{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.template-header{padding:20px;border-bottom:1px solid #444444;background:#242424}.template-header h3{margin:0 0 4px;font-size:16px;font-weight:600;color:#fff;font-family:Pretendard}.template-header p{margin:8px 0 16px;font-size:13px;color:#888;font-family:Pretendard;font-weight:400}.save-template-btn{width:100%;padding:12px 16px;background:#007bff;color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;font-family:Pretendard}.save-template-btn:hover:not(:disabled){background:#0056b3;transform:translateY(-1px)}.save-template-btn:disabled{background:#6c757d;cursor:not-allowed;transform:none}.loading-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center}.loading-spinner{font-size:24px;margin-bottom:16px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-state p{margin:0;font-size:14px;color:#666}.empty-templates{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center}.empty-icon{font-size:48px;margin-bottom:16px;opacity:.5}.empty-templates h4{margin:0 0 8px;font-family:Pretendard;font-size:16px;font-weight:600;color:#fff}.empty-templates p{margin:0;font-family:Pretendard;font-size:14px;color:#888;line-height:1.4}.templates-grid{flex:1;padding:16px;display:grid;grid-template-columns:repeat(2,1fr);gap:16px;overflow-y:auto;align-content:start}.template-item{display:flex;flex-direction:column;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px #0000001a;transition:all .2s ease;border:2px solid #e9ecef}.template-item:hover{transform:translateY(-2px);box-shadow:0 4px 16px #00000026;border-color:#007bff}.template-thumbnail{position:relative;width:100%;height:120px;overflow:hidden;background:#1a1a1a}.template-thumbnail img{width:100%;height:100%;object-fit:cover;transition:transform .2s ease}.template-thumb-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#666;font-size:12px;background:#1a1a1a}.template-thumbnail:hover img{transform:scale(1.05)}.template-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;align-items:center;justify-content:center;gap:8px;opacity:0;transition:opacity .2s ease}.template-thumbnail:hover .template-overlay{opacity:1}.load-template-btn,.export-template-btn,.delete-template-btn{min-width:56px;height:36px;padding:0 12px;border:none;border-radius:6px;background:#fffffff2;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;transition:all .2s ease}.load-template-btn:hover{background:#007bff;color:#fff;transform:scale(1.05)}.export-template-btn:hover{background:#28a745;color:#fff;transform:scale(1.1)}.delete-template-btn:hover{background:#dc3545;color:#fff;transform:scale(1.1)}.template-info{padding:12px;background:#fff}.template-name{font-size:13px;font-weight:600;color:#333;margin-bottom:6px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.template-details{display:flex;flex-direction:column;gap:2px}.template-details span{font-family:Pretendard;font-size:11px;color:#666}.template-footer{padding:16px 20px;border-top:1px solid #444;background:#242424}.current-work-info h4{margin:0 0 8px;font-family:Pretendard;font-size:14px;font-weight:600;color:#fff}.current-work-info p{margin:0;font-size:12px;color:#888;line-height:1.4}.templates-grid::-webkit-scrollbar{width:6px}.templates-grid::-webkit-scrollbar-track{background:#f1f1f1}.templates-grid::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.templates-grid::-webkit-scrollbar-thumb:hover{background:#a8a8a8}@media (max-width: 768px){.templates-grid{grid-template-columns:repeat(2,1fr);gap:12px;padding:12px}.template-thumbnail{height:80px}.template-info{padding:10px}.template-name{font-size:12px}.template-details span{font-size:10px}.load-template-btn,.export-template-btn,.delete-template-btn{width:32px;height:32px;font-size:14px}}.design-editor{display:flex;flex-direction:column;width:100%;height:100vh;position:relative;background-color:#2a2a2a}.editor-content{display:flex;flex:1;position:relative;overflow:hidden;background-color:#191919}.left-sidepanel{position:fixed;top:60px;left:0;width:60px;height:calc(100vh - 60px);background-color:#1a1a1a;border-right:1px solid #333;z-index:10001}.loading-overlay{position:fixed;top:60px;left:60px;right:0;bottom:0;background-color:#1a1a1aeb;display:flex;align-items:center;justify-content:center;z-index:10000;pointer-events:all}.loading-overlay-content{display:flex;flex-direction:column;align-items:center;gap:20px}.loading-spinner{width:50px;height:50px;border:4px solid #333;border-top:4px solid #00aeef;border-radius:50%;animation:design-editor-spin 1s linear infinite}.loading-title{color:#fff;font-size:18px;font-weight:500}.loading-subtitle{color:#888;font-size:14px;text-align:center;max-width:300px}@keyframes design-editor-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.left-property-panel{position:fixed;top:71px;left:60px;width:320px;height:calc(100vh - 66px);background-color:#242424;border-right:1px solid #444;z-index:900;overflow-y:auto}.right-sidepanel{position:fixed;top:71px;right:0;width:320px;height:calc(100vh - 60px);background-color:#242424;border-left:1px solid #444;z-index:900;display:flex;flex-direction:column;overflow-y:auto;padding-bottom:72px}.transform-panel{flex:1;overflow-y:auto}.layer-panel{position:absolute;left:0;right:0;height:auto;border-top:1px solid #333;background-color:#1a1a1a}.canvas-container{flex:1;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;margin-left:380px;margin-right:320px;background-color:#191919!important;overflow-y:auto;padding:20px;gap:20px}.canvas-wrapper{position:relative;margin-bottom:20px;border:1px solid transparent;border-radius:4px;transition:border-color .2s}.canvas-wrapper.active{border-color:#2196f3;box-shadow:0 0 0 1px #2196f3}.canvas-header{display:flex;align-items:center;justify-content:space-between;padding:10px;background-color:#343434;border:1px solid #444;border-bottom:none;border-radius:4px 4px 0 0}.canvas-wrapper.active .canvas-header{border-color:#2196f3;border-bottom:none}.canvas-title{font-family:Pretendard;color:#fff;font-size:14px;font-weight:400;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s}.canvas-title:hover{background-color:#2196f34d}.canvas-wrapper.active .canvas-title{color:#2196f3}.copy-canvas-btn{width:28px;height:28px;border:none;background-color:#5c5c5c;color:#fff;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:background-color .2s}.copy-canvas-btn:hover{background-color:#555}.add-canvas-btn{width:28px;height:28px;border:none;background-color:#2196f3;color:#fff;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:background-color .2s}.add-canvas-btn:hover{background-color:#1976d2}.delete-canvas-btn{width:28px;height:28px;border:none;background-color:#d11d1d;color:#fff;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:background-color .2s}.delete-canvas-btn:hover{background-color:#bd1a1a}.canvas{background-color:#fff;box-shadow:0 0 10px #0000001a;border:1px solid #444}.konva-container{background-color:#2a2a2a;border:1px solid #444;box-shadow:0 0 10px #0000001a}.canvas-wrapper.active .konva-container{border-color:#2196f3}.konva-layer{background-color:#fff}.konva-stage{background-color:#2a2a2a;padding:1px;border-radius:2px}.konvajs-content{background-color:#fff!important}.canvas-container>div{background-color:#2a2a2a!important}.konva-selection{border:2px solid #2196f3!important}.konva-selection-handle{background-color:#2196f3!important;border:1px solid #fff!important}.konva-transformer{pointer-events:none}.konva-transformer__border{stroke:#2196f3!important;stroke-width:1px!important}.konva-transformer__anchor{fill:#fff!important;stroke:#2196f3!important;stroke-width:1px!important;width:8px!important;height:8px!important;cursor:pointer!important;pointer-events:all!important}.konva-transformer__anchor:hover{fill:#2196f3!important}.konva-transformer__rotation-handle{fill:#2196f3!important;stroke:#fff!important;stroke-width:1px!important;cursor:pointer!important;pointer-events:all!important}.konva-transformer__rotation-handle:hover{fill:#1976d2!important}.toolbar{width:60px;background-color:#f0f0f0;border-right:1px solid #ddd;padding:10px;display:flex;flex-direction:column;gap:10px;z-index:100}.toolbar button{width:40px;height:40px;border:none;background-color:#fff;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.toolbar button:hover{background-color:#e0e0e0;transform:scale(1.05)}.toolbar button.active{background-color:#007bff;color:#fff}.toolbar button i{font-size:18px}.side-panel{width:250px;display:flex;flex-direction:column;background-color:#f0f0f0}.side-panel>*:last-child{border-bottom:none}.editor_option{padding:16px;border-bottom:1px solid #333}.ui_title{display:block;font-size:12px;font-weight:500;color:#fff;margin-bottom:12px}.editor_option label{display:block;font-size:12px;color:#999;margin-bottom:8px}.input_wrap{display:flex;flex-direction:row;align-items:center;margin-top:8px}.input_group{display:flex;align-items:center;background-color:#333;border:1px solid #444;border-radius:8px;overflow:hidden}.input_group_text{padding:4px 8px;background-color:#333;color:#fff;border:none;font-size:11px;font-family:Pretendard}.form-control{width:100%;height:32px;padding:4px 8px;background-color:#333;border:none;color:#fff;font-size:12px}.form-control:focus{outline:none;background-color:#333}.btn-icon{padding:4px;background:none;border:none;border-radius:8px;color:#999;cursor:pointer;display:flex;align-items:center;justify-content:center}.btn-icon:hover{color:#fff}.btn-icon.active{color:#2196f3;background-color:#007bff40}.btn-icon svg{width:16px;height:16px}.input_width_50{width:calc(44% - 4px);margin-bottom:0!important}.canvas_btnWrap{display:flex;flex-direction:row;gap:12px;align-items:center}::-webkit-scrollbar{width:16px}::-webkit-scrollbar-thumb{background-color:#414141;box-shadow:inset 0 0 0 1px #919191;border-radius:99px;background-clip:padding-box;border:4px solid transparent}#right_sidebar>.editor_ui::-webkit-scrollbar{width:10px}#right_sidebar>.editor_ui::-webkit-scrollbar-thumb{background-color:#1f1f1f;box-shadow:inset 0 0 0 1px #545454;border-radius:6px;background-clip:padding-box;border:2px solid transparent}.history-header{padding:16px;border-bottom:1px solid #444}.history-header h3{margin:0;font-size:14px;font-weight:600;color:#fff;font-family:Pretendard}.collection-panel{padding:16px;background-color:#242424;height:100%;overflow-y:auto}.collection-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #444}.collection-header h3{margin:0;color:#fff;font-size:16px;font-weight:500;font-family:Pretendard}.refresh-collections-btn{background:none;border:none;color:#888;font-size:16px;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s}.refresh-collections-btn:hover{color:#fff;background-color:#333}.collection-list{display:flex;flex-direction:column;gap:8px}.collection-item{display:flex;align-items:center;padding:12px;background-color:#1a1a1a;border:1px solid #333;border-radius:6px;cursor:pointer;transition:all .2s}.collection-item:hover{background-color:#2a2a2a;border-color:#555;transform:translateY(-1px)}.collection-item.selected{background-color:#1e3a8a;border-color:#3b82f6;box-shadow:0 0 0 1px #3b82f6}.collection-item.selected:hover{background-color:#1e40af;border-color:#60a5fa}.collection-icon{font-size:20px;margin-right:12px;color:#00aeef}.collection-item.selected .collection-icon{color:#60a5fa}.collection-info{flex:1;min-width:0}.collection-title{color:#fff;font-size:14px;font-weight:500;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Pretendard}.collection-status{color:#60a5fa;font-size:12px;font-weight:400;font-family:Pretendard;opacity:.9}.collection-meta{display:none}.collection-empty{text-align:center;padding:32px 16px;color:#888}.collection-empty p{margin:8px 0;font-size:14px;line-height:1.4;font-family:Pretendard}.App{width:100vw;height:100vh;margin:0;padding:0;overflow:hidden}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;padding:0;overflow:hidden}.app{width:100%;height:100vh;display:flex;flex-direction:column;align-items:center;padding:0;box-sizing:border-box;background-color:#f5f5f5}h1{color:#333;margin-bottom:20px;font-size:24px}.canvas-container{background-color:#fff;border-radius:4px;box-shadow:0 2px 4px #0000001a;padding:10px}interface Shape{stroke?: string;strokeOpacity?: number;strokeWidth?: number}@font-face{font-family:Pretendard;font-weight:900;font-display:swap;src:local("Pretendard Black"),url(/assets/Pretendard-Bold.subset-NvQkMce4.woff2) format("woff2"),url(/assets/Pretendard-Black.subset-BHKzTnjN.woff) format("woff")}@font-face{font-family:Pretendard;font-weight:800;font-display:swap;src:local("Pretendard ExtraBold"),url(/assets/Pretendard-ExtraBold.subset-C8ahUYWx.woff2) format("woff2"),url(/assets/Pretendard-ExtraBold.subset-A1cPG3di.woff) format("woff")}@font-face{font-family:Pretendard;font-weight:700;font-display:swap;src:local("Pretendard Bold"),url(/assets/Pretendard-Bold.subset-NvQkMce4.woff2) format("woff2"),url(/assets/Pretendard-Bold.subset-ByYJKlCl.woff) format("woff")}@font-face{font-family:Pretendard;font-weight:500;font-display:swap;src:local("Pretendard Medium"),url(/assets/Pretendard-Medium.subset-D07TkZcI.woff2) format("woff2"),url(/assets/Pretendard-Medium.subset-D-vxZJjN.woff) format("woff")}@font-face{font-family:Pretendard;font-weight:400;font-display:swap;src:local("Pretendard Regular"),url(/assets/Pretendard-Regular.subset-BZqc2FCe.woff2) format("woff2"),url(/assets/Pretendard-Regular.subset-Dpq6qleg.woff) format("woff")}@font-face{font-family:Pretendard;font-weight:300;font-display:swap;src:local("Pretendard Light"),url(/assets/Pretendard-Light.subset--7YfZPHv.woff2) format("woff2"),url(/assets/Pretendard-Light.subset-BH9bwXKk.woff) format("woff")}@font-face{font-family:Pretendard;font-weight:200;font-display:swap;src:local("Pretendard ExtraLight"),url(/assets/Pretendard-ExtraLight.subset-Dne8vBUr.woff2) format("woff2"),url(/assets/Pretendard-ExtraLight.subset-D-kBGiz2.woff) format("woff")}@font-face{font-family:Pretendard;font-weight:100;font-display:swap;src:local("Pretendard Thin"),url(/assets/Pretendard-Thin.subset-CIJfwvSz.woff2) format("woff2"),url(/assets/Pretendard-Thin.subset-DjxeqmoS.woff) format("woff")}@font-face{font-family:Noto Sans KR;font-style:normal;font-weight:300;src:url(/fonts/NotoSansKR-Light.ttf) format("truetype")}@font-face{font-family:Noto Sans KR;font-style:normal;font-weight:400;src:url(/fonts/NotoSansKR-Regular.ttf) format("truetype")}@font-face{font-family:Noto Sans KR;font-style:normal;font-weight:500;src:url(/fonts/NotoSansKR-Medium.ttf) format("truetype")}@font-face{font-family:Noto Sans KR;font-style:normal;font-weight:600;src:url(/fonts/NotoSansKR-SemiBold.ttf) format("truetype")}@font-face{font-family:Noto Sans KR;font-style:normal;font-weight:700;src:url(/fonts/NotoSansKR-Bold.ttf) format("truetype")}@font-face{font-family:"Noto Serif KR";font-style:normal;font-weight:400;src:url(/fonts/NotoSerifKR-Regular.otf) format("opentype")}@font-face{font-family:"Noto Serif KR";font-style:normal;font-weight:500;src:url(/fonts/NotoSerifKR-Medium.otf) format("opentype")}@font-face{font-family:"Noto Serif KR";font-style:normal;font-weight:600;src:url(/fonts/NotoSerifKR-SemiBold.otf) format("opentype")}@font-face{font-family:"Noto Serif KR";font-style:normal;font-weight:700;src:url(/fonts/NotoSerifKR-Bold.otf) format("opentype")}body{margin:0;font-family:Pretendard,Noto Sans KR,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#fff}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ol,ul{list-style:none}a{text-decoration:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}