From 1449342f9628235a76c05f48a4ec29a764407b54 Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Wed, 13 May 2026 21:55:10 +0900
Subject: [PATCH] style(screener): canvas mode styles (toggle, nodes, toolbar,
 layout)

---
 src/pages/stock/screener/Screener.css         |   1 +
 .../screener/components/canvas/Canvas.css     | 196 ++++++++++++++++++
 2 files changed, 197 insertions(+)
 create mode 100644 src/pages/stock/screener/components/canvas/Canvas.css

diff --git a/src/pages/stock/screener/Screener.css b/src/pages/stock/screener/Screener.css
index 25ec012..aaac2b2 100644
--- a/src/pages/stock/screener/Screener.css
+++ b/src/pages/stock/screener/Screener.css
@@ -1,3 +1,4 @@
+@import './components/canvas/Canvas.css';
 .screener-page {
   padding: 24px;
   color: var(--text, #e5e7eb);
diff --git a/src/pages/stock/screener/components/canvas/Canvas.css b/src/pages/stock/screener/components/canvas/Canvas.css
new file mode 100644
index 0000000..cc12c83
--- /dev/null
+++ b/src/pages/stock/screener/components/canvas/Canvas.css
@@ -0,0 +1,196 @@
+/* ─────────── 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; }
+}