body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Pretendard,-apple-system,BlinkMacSystemFont,Apple SD Gothic Neo,Noto Sans KR,Malgun Gothic,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#fff}.app{height:100vh;display:flex;flex-direction:column;overflow:hidden}.header{display:none}.container{display:flex;gap:0;height:100vh;padding:0;overflow:hidden}@media(max-width:1024px){.container{flex-direction:column}}.left-panel{width:50%;background:#fafafa;border-radius:0;padding:20px;border-right:1px solid #f0f0f0;display:flex;flex-direction:column;overflow:hidden}.right-panel{flex:1;background:#fff;border-radius:0;padding:0;overflow-y:auto;display:flex;justify-content:center;align-items:center}.mode-selector{display:flex;gap:10px;margin-bottom:20px;flex-shrink:0}.mode-selector button{flex:1;padding:10px 20px;border:2px solid #dee2e6;background:#fff;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.mode-selector button:hover{border-color:#6c5ce7}.mode-selector button.active{background:#6c5ce7;color:#fff;border-color:#6c5ce7}.input-section{flex:1;display:flex;flex-direction:column;overflow:hidden}.input-section label{display:block;font-size:14px;font-weight:600;color:#333;margin-bottom:8px}.input-section input[type=text]{width:100%;padding:12px;border:1px solid #dee2e6;border-radius:8px;font-size:14px;font-family:Pretendard,Apple SD Gothic Neo,Noto Sans KR,sans-serif;resize:vertical}.test-button{width:100%;padding:12px 20px;background:#6c5ce7;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:background .2s;flex-shrink:0}.test-button:hover:not(:disabled){background:#5b4cdb}.test-button:disabled{background:#adb5bd;cursor:not-allowed}.error-box{padding:12px;background:#fff5f5;border:1px solid #ff6b6b;border-radius:8px;color:#c92a2a;font-size:14px;margin-top:12px;flex-shrink:0}.log-section{margin-top:24px;flex-shrink:0}.log-section h3{font-size:16px;color:#333;margin-bottom:12px}.log-box{background:#f8f9fa;border:1px solid #dee2e6;border-radius:8px;padding:12px;max-height:200px;overflow-y:auto;font-family:SF Mono,Monaco,Cascadia Code,Consolas,monospace;font-size:12px}.log-entry{padding:6px 0;border-bottom:1px solid #e9ecef}.log-entry:last-child{border-bottom:none}.clear-button{margin-top:8px;padding:8px 16px;background:#f8f9fa;border:1px solid #dee2e6;border-radius:6px;font-size:12px;cursor:pointer;transition:all .2s}.clear-button:hover{background:#e9ecef}.right-panel{background:#fff!important}.right-panel h2{display:none}.snippet-preview{background:#fff;border-radius:8px;padding:12px;box-shadow:0 2px 8px #00000014;border:1px solid #e9ecef;width:350px;height:fit-content}.empty-state{text-align:center;padding:60px 20px;color:#868e96;font-size:15px}.component-builder{display:flex;flex-direction:column;gap:20px;overflow-y:auto;flex:1;padding-bottom:20px}.builder-form-section{display:flex;flex-direction:column;gap:16px}.json-preview-section{display:flex;flex-direction:column;flex-shrink:0}.builder-form{display:flex;flex-direction:column;gap:12px}.form-group{display:flex;flex-direction:column;gap:6px}.form-group label{font-size:13px;font-weight:600;color:#495057}.form-group input[type=text],.form-group input[type=number],.form-group textarea,.form-group select{padding:10px;font-size:14px;border:1px solid #e0e0e0;border-radius:6px;font-family:Pretendard,-apple-system,BlinkMacSystemFont,system-ui,Roboto,Segoe UI,sans-serif}.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:#4a90e2;box-shadow:0 0 0 3px #4a90e21a}.array-item{display:flex;gap:8px;align-items:center}.array-item input{flex:1;padding:8px;font-size:13px;border:1px solid #e0e0e0;border-radius:4px}.list-item-form{padding:12px;border:1px solid #e9ecef;border-radius:8px;background:#f8f9fa;display:flex;flex-direction:column;gap:8px;margin-bottom:12px}.add-btn{padding:8px 16px;background:#4a90e2;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;transition:background .2s;font-family:Pretendard,-apple-system,BlinkMacSystemFont,system-ui,Roboto,Segoe UI,sans-serif}.add-btn:hover{background:#357abd}.remove-btn{padding:6px 12px;background:#dc3545;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:12px;transition:background .2s}.remove-btn:hover{background:#c82333}.add-component-btn{padding:14px 24px;background:#28a745;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:15px;font-weight:700;transition:background .2s;margin-top:12px;font-family:Pretendard,-apple-system,BlinkMacSystemFont,system-ui,Roboto,Segoe UI,sans-serif}.add-component-btn:hover{background:#218838}