:root { --bg:#f6f8fb; --panel:#fff; --line:#e5e7eb; --muted:#6b7280; --accent:#2563eb; }
* { box-sizing: border-box; } 
body { margin:0; font-family:"Segoe UI", Roboto, "Noto Sans KR", system-ui, -apple-system, Arial, sans-serif; background:var(--bg); color:#111827; }
header { position:sticky; top:0; background:#fff; border-bottom:1px solid var(--line); padding:12px 16px; z-index:10; }
header strong { font-weight:700; }
main { display:flex; gap:16px; padding:16px; flex-wrap:wrap; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px; }
.controls { flex:1 1 320px; max-width:450px; }
.preview { flex:3 1 520px; min-width:320px; display:flex; flex-direction:column; gap:10px; }
/* preview 상단 툴바 레이아웃 */
.toolbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* 좌 | 중앙 | 우 */ 
  align-items: center;
  gap: 8px;
}
.toolbar .left  { justify-self: start; }
.toolbar .center{ justify-self: center; display:flex; gap:8px; align-items:center; }
.toolbar .right { justify-self: end; }
label { font-size:12px; color:#374151; display:block; margin:10px 0 6px; }
input[type="text"], input[type="number"], select {
  width:100%; padding:8px 10px; border:1px solid #d1d5db; border-radius:8px; font-size:14px; background:#fff;
}
input[type="file"] { width:100%; }
input[type="range"] { width:100%; }
input[type="color"] { width:48px; height:36px; padding:0; border:1px solid #d1d5db; border-radius:6px; background:#fff; }
.row { display:flex; gap:8px; align-items:center; }
.row > * { flex:1; }
.btn { appearance:none; border:none; padding:10px 14px; border-radius:8px; background:var(--accent); color:white; font-weight:600; cursor:pointer; }
.btn.secondary { background:#eef2ff; color:#1e3a8a; }
canvas { width:100%; height:auto; background:#f1f5f9; border:1px dashed #cbd5e1; border-radius:10px; }
.small { color:var(--muted); font-size:12px; }
.hidden { display:none; }
.group { border-top:1px dashed #e5e7eb; padding-top:12px; margin-top:12px; }
.drop-zone { border: 2px dashed #ccc; padding: 10px; border-radius: 8px; text-align: center; }
.drop-zone.drag-over { border-color: var(--accent); background: #eef2ff; }