:root {
  --primary: #007aff;
  --danger: #ff4757;
  --panel: #1e1e1e;
  --border: #333;
  --text: #eee;
  --input-bg: #2d2d2d;
  --workspace-bg: #252525;
  --btn-bg: #333;
  --btn-hover: #444;
  --muted: #888;
  --group-border: #333;
}

body[data-theme='light'] {
  --panel: #f6f7fb;
  --border: #d7dbe6;
  --text: #1f2533;
  --input-bg: #ffffff;
  --workspace-bg: #ffffff;
  --btn-bg: #ffffff;
  --btn-hover: #f1f4fb;
  --muted: #6d7382;
  --group-border: #d7dbe6;
}

*, *::before, *::after { box-sizing: border-box; }
body, html { margin: 0; height: 100%; width: 100%; background: var(--workspace-bg); color: var(--text); font-family: 'Noto Sans KR', sans-serif; overflow: hidden; }

/* Layout */
.app-container { display: flex; flex-direction: column; height: 100vh; }
.top-bar { height: 50px; background: var(--panel); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; flex-shrink: 0; }
.main-content { display: flex; flex: 1; overflow: hidden; }
.side-panel { width: 300px; background: var(--panel); border: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; height: 100%; }
.scroll-area { flex: 1; overflow-y: auto; padding: 15px; border-bottom: 1px solid var(--border); }
.panel-tabs { display: flex; gap: 6px; padding: 10px; border-bottom: 1px solid var(--border); }
.panel-tab { flex: 1; padding: 8px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--btn-bg); color: var(--text); cursor: pointer; font-size: 11px; font-weight: 700; }
.panel-tab.active { background: var(--primary); color: #fff; border-color: transparent; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* Workspace & Canvas */
#workspace { flex: 1; background: var(--workspace-bg); padding: 30px; overflow-y: auto; display: flex; flex-direction: column; align-items: center; height: 100%; }
#canvas { width: 100%; max-width: 800px; min-height: 100%; background: white; color: #333; position: relative; box-shadow: 0 4px 25px rgba(0,0,0,0.4); display: flex; flex-direction: column; }

/* Widgets */
.widget { border: 1px dashed rgba(0,0,0,0.1); min-height: 30px; position: relative; transition: outline 0.1s; }
.widget.selected { outline: 2px solid var(--primary) !important; outline-offset: -2px; z-index: 10; background: rgba(0,122,255,0.03); }
.column { display: flex; flex-direction: column; width: 100%; }
.row { display: flex; flex-direction: row; width: 100%; align-items: stretch; }
.expanded { display: flex; flex-direction: column; width: 100%; }
.stack { position: relative; width: 100%; min-height: 120px; }
.align { display: flex; width: 100%; min-height: 60px; }
.positioned { position: absolute; }

/* UI Elements */
.ui-btn { padding: 8px 12px; cursor: pointer; background: var(--btn-bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; font-weight: bold; font-size: 11px; transition: 0.2s; }
.ui-btn:hover { background: var(--btn-hover); }
.ui-btn.active { background: var(--primary); color: white; border-color: transparent; }
.component-btn { display: flex; align-items: center; justify-content: flex-start; gap: 6px; padding: 8px 10px; }
.component-icon { width: 20px; min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; }
.component-icon svg { width: 16px; height: 16px; stroke-width: 2; }
.component-label { font-size: 13px; line-height: 1; }
.prop-group { margin-bottom: 18px; border-bottom: 1px solid var(--group-border); padding-bottom: 12px; }
.prop-group label { display: block; font-size: 10px; margin-bottom: 8px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.prop-row { display: flex; gap: 5px; margin-bottom: 5px; }
input, select { background: var(--input-bg); border: 1px solid var(--border); color: var(--text); padding: 8px; border-radius: 4px; font-size: 12px; width: 100%; outline: none; }
.color-input-hidden { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.color-swatch-btn { width: 34px; min-width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; padding: 0; }
.tree-node { padding: 8px; font-size: 12px; cursor: pointer; border-radius: 4px; margin-bottom: 2px; }
.tree-node.active { background: var(--primary); color: white; }
.tree-node-content { display: inline-flex; align-items: center; gap: 6px; }
.tree-node-icon { width: 16px; min-width: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.tree-node-icon svg { width: 14px; height: 14px; stroke-width: 2; }
.tree-node-label { line-height: 1; }
.tree-node[draggable='true'] { cursor: grab; }
.tree-node.drag-over-before { box-shadow: inset 0 2px 0 var(--primary); }
.tree-node.drag-over-after { box-shadow: inset 0 -2px 0 var(--primary); }
.tree-node.drag-over-inside { background: rgba(0, 122, 255, 0.12); }

#preview-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: white; z-index: 10000; display: none; overflow-y: auto; }
#preview-content { height: 100vh; display: flex; flex-direction: column; width: 100%; }

body[data-theme='light'] #canvas {
  box-shadow: none;
}