일목균형표 수정

frontend/src/styles/strategyEditor.css

@@ -158,14 +158,100 @@
   color: var(--se-node-start-accent, var(--se-gold));
 }
 
-.sp-start-tf {
-  font-size: 0.72rem;
-  padding: 3px 6px;
-  border-radius: 4px;
-  border: 1px solid color-mix(in srgb, var(--se-node-start-border) 80%, transparent);
-  background: color-mix(in srgb, var(--se-bg) 75%, transparent);
-  color: var(--se-text);
+.sp-start-tf-checks {
+  flex: 1;
+  min-width: 0;
+}
+
+.se-start-tf-checks {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 8px;
+  align-items: center;
+}
+
+.se-start-tf-checks--compact {
+  gap: 2px 5px;
+}
+
+.se-start-tf-check {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  font-size: 0.62rem;
+  color: var(--se-text-muted);
   cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.se-start-tf-checks--compact .se-start-tf-check {
+  font-size: 0.58rem;
+}
+
+.se-start-tf-check input {
+  margin: 0;
+  accent-color: var(--se-node-start-accent, var(--se-gold));
+  cursor: pointer;
+}
+
+.se-start-tf-check:has(input:checked) {
+  color: var(--se-text);
+  font-weight: 600;
+}
+
+.se-flow-start-tf-checks-wrap {
+  width: 100%;
+}
+
+.se-start-tf-checks--graph {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  column-gap: 2px;
+  row-gap: 4px;
+  width: 100%;
+}
+
+.se-start-tf-checks-row {
+  display: contents;
+}
+
+.se-start-tf-checks--graph .se-start-tf-check {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 3px;
+  font-size: 0.58rem;
+  min-width: 0;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.se-start-tf-checks--graph .se-start-tf-check input {
+  flex-shrink: 0;
+}
+
+.se-flow-start-layout {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 6px;
+  width: 100%;
+}
+
+.se-flow-start-title-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+  width: 100%;
+}
+
+.se-flow-start-title-left {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
 }
 
 .sp-start-del {
@@ -877,12 +963,6 @@
   border-color: color-mix(in srgb, var(--se-sell) 42%, transparent);
   box-shadow: 0 0 18px color-mix(in srgb, var(--se-sell) 16%, transparent);
 }
-.se-flow-start-head {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex-wrap: nowrap;
-}
 .se-flow-start-label {
   font-weight: 700;
   font-size: 0.72rem;
@@ -890,22 +970,6 @@
   flex-shrink: 0;
   color: var(--se-node-start-accent, var(--se-gold));
 }
-.se-flow-start-tf {
-  flex: 1;
-  min-width: 0;
-  max-width: 72px;
-  font-size: 0.65rem;
-  padding: 2px 4px;
-  border-radius: 4px;
-  border: 1px solid color-mix(in srgb, var(--se-node-start-border) 80%, transparent);
-  background: color-mix(in srgb, var(--se-bg) 70%, transparent);
-  color: var(--se-text);
-  cursor: pointer;
-}
-.se-flow-start-tf:focus {
-  outline: none;
-  border-color: var(--se-accent);
-}
 .se-flow-del--start {
   position: static;
   flex-shrink: 0;
@@ -932,6 +996,19 @@
   box-shadow: 0 0 20px color-mix(in srgb, var(--se-sell) 15%, transparent);
 }
 
+.se-flow-gate-head {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.se-logic-gate-toggle {
+  display: inline-flex;
+}
+.se-logic-gate-toggle--compact .se-start-combine-btn {
+  padding: 3px 9px;
+  font-size: 0.68rem;
+  min-width: 0;
+}
 .se-flow-gate-badge {
   font-weight: 800;
   font-size: 0.88rem;