:root { --panel-bg: #2d3436; --accent: #0984e3; --bg: #1e272e; --danger: #d63031; --success: #00b894; --warning: #f39c12; }
        body { font-family: 'Nanum Gothic', sans-serif; display: flex; flex-direction: column; align-items: center; background: var(--bg); color: #ecf0f1; margin: 0; padding: 20px; height: 100vh; overflow: hidden; }
        
        .main-container { display: flex; gap: 20px; max-width: 1400px; width: 100%; height: calc(100vh - 60px); }
        
        .canvas-area { 
            flex-grow: 1; 
            display: flex; 
            justify-content: center;
            align-items: center;
            background: #333; 
            border-radius: 12px; 
            overflow: auto; 
            position: relative; 
            border: 2px solid #444;
            background-image: linear-gradient(45deg, #2a2a2a 25%, transparent 25%), linear-gradient(-45deg, #2a2a2a 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #2a2a2a 75%), linear-gradient(-45deg, transparent 75%, #2a2a2a 75%);
            background-size: 20px 20px;
        }
        
        canvas { background: transparent; cursor: default; max-width: 100%; max-height: 100%; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
        
        .sidebar { width: 360px; background: var(--panel-bg); padding: 20px; border-radius: 15px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; box-shadow: 10px 0 30px rgba(0,0,0,0.3); flex-shrink: 0; }
        .control-item { display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid #444; padding-bottom: 15px; }
        
        label { font-size: 11px; color: #b2bec3; font-weight: bold; display: flex; justify-content: space-between; text-transform: uppercase; margin-bottom: 4px; }
        .val-display { color: var(--accent); font-family: monospace; }
        
        input[type="range"] { width: 100%; cursor: pointer; accent-color: var(--accent); margin: 5px 0; }
        input[type="color"] { width: 100%; height: 35px; border: 1px solid #444; border-radius: 4px; cursor: pointer; background: none; padding: 0; }
        input[type="number"] { background: #444; color: white; border: 1px solid #555; padding: 8px; border-radius: 4px; width: 80px; font-size: 13px; text-align: center; }
        
        textarea, select, button { padding: 10px; border-radius: 6px; border: none; font-family: inherit; font-size: 13px; }
        textarea { background: #444; color: white; border: 1px solid #555; resize: vertical; min-height: 80px; line-height: 1.4; }
        
        button { background: var(--accent); color: white; cursor: pointer; font-weight: bold; transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: 5px; }
        button:hover { opacity: 0.9; transform: translateY(-1px); }
        button:disabled { background: #555 !important; cursor: not-allowed; transform: none; opacity: 0.5; }
        
        .mode-btn { background: #4b7bec; font-size: 11px; padding: 8px 4px; }
        .mode-btn.active { background: #f1c40f; color: #000; }
        
        .btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
        .btn-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
        
        .status-msg { font-size: 12px; color: #f1c40f; text-align: center; min-height: 1.5em; font-weight: bold; padding: 8px; border-radius: 4px; background: rgba(0,0,0,0.2); border-left: 4px solid var(--warning); }
        
        .section-title { color: var(--accent); font-size: 12px; border-bottom: 1px solid var(--accent); padding-bottom: 4px; margin-top: 5px; display: block; font-weight: 800; }
        .highlight-box { background: rgba(9, 132, 227, 0.1); padding: 12px; border-radius: 8px; border: 1px solid var(--accent); }
        .hidden { display: none !important; }

        /* Added Size Control Styles */
        .size-control-container { display: flex; align-items: center; justify-content: space-between; background: #3d4648; padding: 8px; border-radius: 8px; margin-top: 5px; }
        .size-inputs { display: flex; align-items: center; gap: 5px; }
        .size-inputs span { color: #888; font-weight: bold; }