/* ════════════════════════════════════════════════════════════════
 * 2. 사이드바 (소자 팔레트)
 * ════════════════════════════════════════════════════════════════ */
#sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  background: var(--bg-sidebar); border-right: 1px solid var(--border-dim);
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 0; gap: 6px;
  overflow-y: auto; overflow-x: hidden;
  z-index: 10; scrollbar-width: none;
}
#sidebar::-webkit-scrollbar { display: none; }
.sidebar-sep { width: 40px; height: 1px; background: var(--border-dim); margin: 2px 0; }

.sidebar-item {
  width: var(--item-size); height: var(--item-size);
  background: var(--bg-item); border: 1px solid var(--border-item); border-radius: var(--radius-md);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: grab; touch-action: none; user-select: none;
  transition: background 0.12s, border-color 0.12s, transform 0.08s; gap: 2px;
}
.sidebar-item:hover      { background: var(--btn-h); border-color: var(--border-active); }
.sidebar-item.dragging   { opacity: 0.38; transform: scale(0.88); }
.s-label { font-size: 8.5px; color: var(--text-label); text-align: center; line-height: 1; letter-spacing: 0.3px; pointer-events: none; }

/* 회로 초기화 버튼 (사이드바 하단) */
.sidebar-clear {
  margin-top: auto; margin-bottom: 4px;
  background: var(--danger-bg); border: 1px solid var(--danger-border); border-radius: var(--radius-md);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; touch-action: none; user-select: none;
  transition: background 0.12s, border-color 0.12s; gap: 2px;
}
.sidebar-clear:hover { background: #fbdada; border-color: #e09a9a; }
.sidebar-clear .s-label { color: var(--danger-text); }

/* 회로이론 표기(접지·레일 라벨) 항목 — 표기 모드에서만 보인다 */
.sidebar-item.rail { display: none; }
#sidebar.rail-mode .sidebar-item.rail { display: flex; }

/* 그룹 버튼(저항/전구 · 반도체) 선택 팝업 */
.sidebar-item.group::after { content: '▸'; position: absolute; right: 4px; bottom: 2px; font-size: 9px; color: var(--text-dim); }
.sidebar-item { position: relative; }
#sb-picker {
  position: fixed; z-index: 60; display: flex; flex-direction: column; gap: 4px;
  background: var(--bg-popup); border: 1px solid var(--border-base); border-radius: var(--radius-md);
  padding: 6px; box-shadow: var(--shadow-panel); backdrop-filter: var(--blur);
}
#sb-picker .sb-pick {
  display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 6px; border-radius: var(--radius-sm);
  cursor: pointer; font-family: var(--font); font-size: 11px; color: var(--text-base); border: 1px solid transparent;
}
#sb-picker .sb-pick:hover { background: var(--btn-h); border-color: var(--border-active); }
#sb-picker .sb-pick.current { background: var(--sel-bg); }