/* ─────────── ModeToggle 헤더 컨트롤 ─────────── */
.screener-mode-toggle {
  display: inline-flex;
  background: #111827;
  border: 1px solid #1f2937;
  border-radius: 8px;
  overflow: hidden;
}
.screener-mode-toggle button {
  padding: 6px 14px;
  background: transparent;
  color: #9ca3af;
  border: 0;
  cursor: pointer;
  font-size: 0.9rem;
}
.screener-mode-toggle button.active {
  background: #fbbf24;
  color: #111827;
  font-weight: 600;
}

.screener-header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ─────────── CanvasLayout 그리드 ─────────── */
.screener-canvas-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.screener-canvas-area {
  height: 65vh;
  min-height: 480px;
  border: 1px solid #1f2937;
  border-radius: 12px;
  overflow: hidden;
  background: #0b1220;
}
.screener-canvas-results {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 16px;
}
.screener-canvas-results-main { display: flex; flex-direction: column; gap: 12px; }
.screener-canvas-results-side { min-width: 0; }

/* ─────────── React Flow 내부 ─────────── */
.screener-canvas-wrap { width: 100%; height: 100%; }

/* ─────────── 노드 카드 공통 ─────────── */
.canvas-node {
  background: #111827;
  border: 1px solid #1f2937;
  border-radius: 10px;
  color: #e5e7eb;
  font-size: 12px;
  padding: 10px 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.canvas-node-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 13px;
}
.canvas-node-icon { font-size: 14px; }
.canvas-node-info {
  margin-left: auto;
  color: #9ca3af;
  cursor: help;
}
.canvas-node-subtitle,
.canvas-node-summary {
  color: #9ca3af;
  font-size: 11px;
  margin-top: 4px;
}

/* ─────────── 고정 노드 (회색) ─────────── */
.canvas-node--fixed { width: 200px; }
.canvas-node--data    { border-left: 3px solid #4b5563; }
.canvas-node--combine { border-left: 3px solid #6b7280; }
.canvas-node--result  { border-left: 3px solid #6b7280; }

/* ─────────── 게이트 노드 (노랑) ─────────── */
.canvas-node--gate {
  width: 220px;
  border-left: 4px solid #facc15;
}

/* ─────────── 점수 노드 (accent) ─────────── */
.canvas-node--score {
  width: 240px;
  border-left: 4px solid var(--canvas-accent, #3b82f6);
}
.canvas-node--score.is-inactive {
  opacity: 0.45;
  filter: grayscale(0.6);
}
.canvas-node-weight {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.canvas-node-weight input[type=range] { flex: 1; }
.canvas-node-weight-value {
  min-width: 32px;
  text-align: right;
  color: var(--canvas-accent, #3b82f6);
  font-variant-numeric: tabular-nums;
}
.canvas-node-active {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  color: #d1d5db;
}
.canvas-node-expand {
  width: 100%;
  margin-top: 8px;
  padding: 4px 0;
  background: transparent;
  color: #9ca3af;
  border: 1px dashed #374151;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
}
.canvas-node-params {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.canvas-param-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  color: #d1d5db;
  font-size: 11px;
}
.canvas-param-field input[type=number] {
  width: 70px;
  background: #0b1220;
  color: #e5e7eb;
  border: 1px solid #1f2937;
  border-radius: 4px;
  padding: 2px 6px;
}

/* ─────────── floating toolbar ─────────── */
.canvas-toolbar {
  display: flex;
  gap: 6px;
  padding: 6px;
  background: rgba(17, 24, 39, 0.75);
  backdrop-filter: blur(8px);
  border: 1px solid #1f2937;
  border-radius: 10px;
}
.canvas-toolbar-btn {
  padding: 6px 12px;
  background: #1f2937;
  color: #e5e7eb;
  border: 1px solid #374151;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
}
.canvas-toolbar-btn:hover:not(:disabled) {
  background: #374151;
}
.canvas-toolbar-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.canvas-toolbar-btn--primary {
  background: #fbbf24;
  color: #111827;
  border-color: #fbbf24;
  font-weight: 600;
}
.canvas-toolbar-btn--primary:hover:not(:disabled) { background: #f59e0b; }

/* ─────────── 모바일 (캔버스는 숨겨지므로 ModeToggle만 영향) ─────────── */
@media (max-width: 768px) {
  .screener-canvas-results { grid-template-columns: 1fr; }
}