:root{
    --bg:#f8fafc;
    --panel:#ffffff;
    --border:#e2e8f0;
    --text:#0f172a;
    --muted:#64748b;
    --accent:#2563eb;
    --accent-soft:rgba(37, 99, 235, 0.08);
    --accent-glow:rgba(37, 99, 235, 0.2);
    --accent-hover:#1d4ed8;
    --shadow:0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
    --shadow-lg:0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    --card-bg:#ffffff;
    --input-bg:#ffffff;
    --input-border:#cbd5e1;
    --btn-hover:#f1f5f9;
    --scrollbar-thumb:#cbd5e1;
    --canvas-bg:#d6dee8;
    --canvas-canvas:#ffffff;
    --grid-small:#eef2f7;
    --grid-large:#e2e8f0;
  }
  body.dark{
    --bg:#0b0f19;
    --panel:#161e2e;
    --border:#243049;
    --text:#f1f5f9;
    --muted:#94a3b8;
    --accent:#3b82f6;
    --accent-soft:rgba(59, 130, 246, 0.12);
    --accent-glow:rgba(59, 130, 246, 0.3);
    --accent-hover:#2563eb;
    --shadow:0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg:0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
    --card-bg:#1f293d;
    --input-bg:#1e293b;
    --input-border:#334155;
    --btn-hover:#243049;
    --scrollbar-thumb:#475569;
    --canvas-bg:#050813;
    --canvas-canvas:#0e1320;
    --grid-small:#1a2740;
    --grid-large:#243550;
  }

  /* Transition for theme colors */
  body, #toolbar, #palette, #canvasWrap, #props, #propsResizer, #statusbar,
  button, select, input, textarea, .pal-item, .prop-static {
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
  }

  #gridSmall path{stroke:var(--grid-small);}
  #gridLarge path{stroke:var(--grid-large);}

  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{height:100%;}
  body{
    font-family:'Segoe UI','Malgun Gothic','맑은 고딕',sans-serif;
    background:var(--bg); color:var(--text); font-size:13px;
    display:flex; flex-direction:column; overflow:hidden;
  }

  /* ── Scrollbars ──────────────────────── */
  #palette::-webkit-scrollbar, #props::-webkit-scrollbar, #canvasWrap::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  #palette::-webkit-scrollbar-track, #props::-webkit-scrollbar-track, #canvasWrap::-webkit-scrollbar-track {
    background: transparent;
  }
  #palette::-webkit-scrollbar-thumb, #props::-webkit-scrollbar-thumb, #canvasWrap::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 3px;
  }
  #palette::-webkit-scrollbar-thumb:hover, #props::-webkit-scrollbar-thumb:hover, #canvasWrap::-webkit-scrollbar-thumb:hover {
    background: var(--muted);
  }

  /* ── 툴바 ─────────────────────────────── */
  #toolbar{
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    background:var(--panel); border-bottom:1px solid var(--border);
    padding:10px 16px; user-select:none;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.05);
    z-index: 10;
  }
  .brand{
    font-weight:800; font-size:15px; margin-right:12px;
    background: linear-gradient(135deg, var(--accent), #6366f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    user-select: none;
  }
  body.dark .brand{
    background: linear-gradient(135deg, #60a5fa, #818cf8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .tb-sep{width:1px; height:20px; background:var(--border); margin:0 4px;}
  .tb-spacer{flex:1;}
  button{
    font:inherit; color:var(--text); background:var(--panel);
    border:1px solid var(--border); border-radius:8px;
    padding:6px 12px; cursor:pointer; white-space:nowrap;
    box-shadow: var(--shadow);
    transition: all 0.2s ease;
  }
  button:hover:not(:disabled){
    background:var(--btn-hover);
    border-color:var(--border);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05);
  }
  button:active:not(:disabled){
    transform: translateY(0);
  }
  button:disabled{opacity:.4; cursor:default; box-shadow:none; transform:none;}
  button.primary{
    background:var(--accent); border-color:var(--accent); color:#fff;
    font-weight: 500;
  }
  button.primary:hover:not(:disabled){
    background:var(--accent-hover);
    border-color:var(--accent-hover);
  }
  .seg{display:flex; border:1px solid var(--border); border-radius:8px; overflow:hidden;}
  .seg button{border:none; border-radius:0; border-right:1px solid var(--border); box-shadow:none;}
  .seg button:hover:not(:disabled) { transform: none; box-shadow: none; }
  .seg button:last-child{border-right:none;}
  .seg button.active{background:var(--accent); color:#fff;}
  .seg button.active:hover{background:var(--accent); color:#fff;}
  .theme-toggle{
    display:flex; align-items:center; gap:4px;
    padding:3px;
    border:1px solid var(--border); border-radius:10px;
    background:var(--bg);
    box-shadow:inset 0 1px 2px rgba(0,0,0,0.04);
  }
  .theme-toggle button{
    display:flex; align-items:center; gap:6px;
    min-width:74px; justify-content:center;
    padding:6px 10px;
    border:none; border-radius:7px;
    background:transparent; box-shadow:none;
    color:var(--muted); font-weight:700;
  }
  .theme-toggle button:hover:not(:disabled){
    background:var(--btn-hover);
    transform:none; box-shadow:none;
  }
  .theme-toggle button.active{
    background:var(--panel);
    color:var(--text);
    box-shadow:var(--shadow);
  }
  .theme-icon{
    position:relative; width:16px; height:16px; flex:0 0 16px;
    border-radius:50%;
  }
  .theme-icon.moon{
    background:#334155;
    box-shadow:inset -4px -1px 0 #94a3b8;
  }
  .theme-icon.sun{
    background:#f59e0b;
    border:3px solid #fde68a;
    box-shadow:0 0 0 1px rgba(245,158,11,0.25);
  }
  .theme-toggle button.active .theme-icon.moon{background:#0f172a; box-shadow:inset -4px -1px 0 #60a5fa;}
  .theme-toggle button.active .theme-icon.sun{background:#f59e0b; border-color:#fef3c7;}
  .chk{display:flex; align-items:center; gap:4px; color:var(--muted); cursor:pointer; font-weight: 500;}
  #connectOpts{display:none; align-items:center; gap:6px;}
  #connectOpts.show{display:flex;}
  select,input[type=text],input[type=number],textarea{
    font:inherit; border:1px solid var(--input-border); border-radius:8px;
    padding:5px 10px; background:var(--input-bg); color:var(--text);
    box-shadow: inset 0 1px 2px 0 rgba(0,0,0,0.05);
    transition: all 0.2s ease;
  }
  textarea{resize:vertical; min-height:64px; line-height:1.5;}
  select:focus,input:focus,textarea:focus{
    outline:none;
    border-color:var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow), inset 0 1px 2px 0 rgba(0,0,0,0.05);
  }
  #linkSpeedDefault{width:90px;}

  /* ── 본문 3단 ─────────────────────────── */
  #main{flex:1; display:flex; min-height:0;}

  /* 팔레트 */
  #palette{
    width:196px; background:var(--panel); border-right:1px solid var(--border);
    overflow-y:auto; padding:12px; flex-shrink:0;
    display:grid; grid-template-columns:1fr 1fr; gap:8px; align-content:start;
  }
  #palette h3{grid-column:1 / -1; font-size:12px; color:var(--muted); font-weight:600; margin:2px 0 6px; text-transform: uppercase; letter-spacing: 0.5px;}
  .pal-item{
    display:flex; flex-direction:column; align-items:center; gap:6px;
    padding:12px 6px 8px;
    border:1px solid var(--border); border-radius:10px;
    background:var(--card-bg); cursor:grab; user-select:none;
    box-shadow: var(--shadow);
    transition: all 0.2s ease;
  }
  .pal-item:hover{
    border-color:var(--accent);
    background:var(--accent-soft);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
  }
  .pal-item:active{cursor:grabbing; transform: scale(0.95);}
  .pal-item svg{width:32px; height:32px; flex-shrink:0; transition: transform 0.2s ease;}
  .pal-item:hover svg{transform: scale(1.05);}
  .pal-item span{font-size:11px; line-height:1.2; text-align:center; word-break:keep-all; font-weight: 500;}

  /* 캔버스 */
  #canvasWrap{
    flex:1; overflow:auto; background:var(--canvas-bg); position:relative;
    display:flex; padding:32px;
  }
  #canvasStage{
    position:relative; flex:0 0 auto; margin:auto;
  }
  #svgCanvas{
    display:block; background:var(--canvas-canvas);
    border:1px solid var(--border);
    box-shadow: 0 8px 28px -8px rgba(15,23,42,0.35);
    transition: none;
  }
  body.dark #svgCanvas{box-shadow: 0 4px 20px -2px rgba(0,0,0,0.5);}
  #svgCanvas.mode-connect{cursor:crosshair;}
  #svgCanvas.mode-zone{cursor:crosshair;}
  .node{cursor:move;}
  .link-hit{cursor:pointer;}
  .zone-rect{cursor:move;}
  .zone-handle{cursor:nwse-resize; transition: none;}
  .node-handle{cursor:nwse-resize; transition: none;}
  #inlineRename{
    position:absolute; z-index:20; width:150px; text-align:center;
    font:700 12.5px 'Segoe UI','Malgun Gothic','맑은 고딕',sans-serif;
    border:1.5px solid var(--accent); border-radius:6px; padding:4px 8px;
    background:var(--input-bg); color:var(--text);
    box-shadow: var(--shadow-lg);
  }

  /* 속성 패널 */
  #propsResizer{
    width:6px; flex-shrink:0; cursor:ew-resize;
    background:transparent; border-left:1px solid var(--border);
  }
  #propsResizer:hover, #propsResizer.dragging{background:var(--accent-soft); border-left-color:var(--accent);}
  #props{
    width:240px; min-width:180px; max-width:560px;
    background:var(--panel);
    padding:16px; overflow-y:auto; flex-shrink:0;
    border-left: 1px solid var(--border);
  }
  #props h3{font-size:14px; font-weight:700; margin-bottom:16px; color:var(--text); letter-spacing: -0.2px;}
  .prop-row{margin-bottom:12px;}
  .prop-row label{display:block; font-size:11px; font-weight:600; color:var(--muted); margin-bottom:5px; text-transform: uppercase; letter-spacing: 0.5px;}
  .prop-row input,.prop-row select,.prop-row textarea{width:100%;}
  .prop-static{
    padding:6px 10px; background:var(--bg); border:1px solid var(--border);
    border-radius:8px; color:var(--muted); font-weight:500;
  }
  .prop-help{color:var(--muted); line-height:1.7; font-size:12px;}
  .prop-help b{color:var(--text);}
  .swatches{display:flex; gap:6px; flex-wrap:wrap; margin-top:4px;}
  .swatch{
    width:28px; height:28px; border-radius:8px; cursor:pointer;
    border:2px solid transparent;
    transition: transform 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1);
  }
  .swatch:hover{transform: scale(1.1);}
  .swatch.active{border-color:var(--text); transform: scale(1.05);}
  body.dark .swatch.active{border-color:#ffffff;}

  /* 상태바 */
  #statusbar{
    background:var(--panel); border-top:1px solid var(--border);
    padding:6px 16px; color:var(--muted); font-size:11px;
    display:flex; gap:16px; user-select:none;
    font-weight: 500;
  }