From 3605f3d0ab94d8ddbb219e4af089b8e462f194cf Mon Sep 17 00:00:00 2001
From: Macbook <macbook@Macbookui-MacBookPro.local>
Date: Wed, 24 Jun 2026 01:11:07 +0900
Subject: [PATCH] =?UTF-8?q?and=20or=20=EC=BC=A0=ED=8A=B8=EB=A1=A4=20?=
 =?UTF-8?q?=EC=82=AD=EC=A0=9C=EB=B2=84=ED=8A=BC=20=EC=9C=84=EC=B9=98=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/strategyEditor/FlowNodes.tsx   |  4 ++-
 frontend/src/styles/strategyEditor.css        | 25 +++++++++++++++++--
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/strategyEditor/FlowNodes.tsx b/frontend/src/components/strategyEditor/FlowNodes.tsx
index 6279c13..767d3ac 100644
--- a/frontend/src/components/strategyEditor/FlowNodes.tsx
+++ b/frontend/src/components/strategyEditor/FlowNodes.tsx
@@ -259,6 +259,8 @@ export const LogicGateNode = memo(function LogicGateNode({ id, data, selected }:
         canSourceConnect={d.canSourceConnect !== false}
         canTargetConnect={d.canTargetConnect !== false}
       />
+      <button type="button" className="se-flow-del se-flow-del--gate" title="삭제" onClick={() => d.onDelete?.(id)}>×</button>
+      <div className="se-flow-gate-body">
       <div className="se-flow-gate-head">
         {node.type === 'AND' || node.type === 'OR' ? (
           <LogicGateOpToggle
@@ -375,7 +377,7 @@ export const LogicGateNode = memo(function LogicGateNode({ id, data, selected }:
       {(node.children ?? []).length === 0 && (
         <span className="se-flow-gate-hint">조건을 드롭하세요</span>
       )}
-      <button type="button" className="se-flow-del" title="삭제" onClick={() => d.onDelete?.(id)}>×</button>
+      </div>
       {settingsOpen && isStochPair && node.stochPair && (
         <StochPairNodeSettings
           secondaryIndicator={node.stochPair.secondaryIndicatorType}
diff --git a/frontend/src/styles/strategyEditor.css b/frontend/src/styles/strategyEditor.css
index ca4fa66..189026c 100644
--- a/frontend/src/styles/strategyEditor.css
+++ b/frontend/src/styles/strategyEditor.css
@@ -1139,6 +1139,12 @@
   line-height: 16px;
   font-size: 14px;
 }
+.se-flow-del--gate {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  z-index: 2;
+}
 .se-flow-start-dot {
   width: 8px; height: 8px; border-radius: 50%;
   background: var(--se-node-start-accent, var(--se-gold));
@@ -1146,9 +1152,10 @@
 }
 
 .se-flow-node--logic {
+  position: relative;
   background: var(--se-node-logic-bg);
   border: 1px solid var(--se-gate-color, var(--se-accent));
-  padding: 12px 16px;
+  padding: 28px 16px 12px;
   min-width: 110px;
   box-shadow: 0 0 20px color-mix(in srgb, var(--se-accent) 20%, transparent);
 }
@@ -1157,10 +1164,18 @@
   box-shadow: 0 0 20px color-mix(in srgb, var(--se-sell) 15%, transparent);
 }
 
+.se-flow-gate-body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  margin-top: 2px;
+}
 .se-flow-gate-head {
   display: flex;
   align-items: center;
   justify-content: center;
+  margin-top: 2px;
 }
 .se-logic-gate-toggle {
   display: inline-flex;
@@ -1176,7 +1191,13 @@
   color: var(--se-accent);
   letter-spacing: 0.06em;
 }
-.se-flow-gate-hint { font-size: 0.62rem; color: var(--se-text-dim); display: block; margin-top: 4px; }
+.se-flow-gate-hint {
+  font-size: 0.62rem;
+  color: var(--se-text-dim);
+  display: block;
+  margin-top: 2px;
+  text-align: center;
+}
 
 .se-flow-node--cond {
   padding: 10px 14px;