일목균형표 수정

frontend/src/styles/paperDashboard.css

@@ -285,13 +285,24 @@
   min-height: 0;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
-  gap: clamp(3px, 1.4cqh, 10px);
+  justify-content: flex-start;
+  gap: clamp(4px, 1.2cqh, 10px);
   overflow: hidden;
   overscroll-behavior: contain;
   padding: 2px 2px 0;
 }
 
+.ptd-split-panel--right .ptd-order-card .top-panel-fields {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  gap: clamp(4px, 1.2cqh, 10px);
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
 .ptd-split-panel--right .ptd-order-card .top-paper-hint {
   flex-shrink: 0;
   margin: 0;
@@ -313,15 +324,30 @@
 }
 
 .ptd-split-panel--right .ptd-order-card .top-price-qty-block {
-  flex: 1 1 0;
+  flex: 0 0 auto;
   min-height: 0;
   display: flex;
   flex-direction: column;
-  justify-content: space-evenly;
-  gap: clamp(2px, 1.2cqh, 8px);
+  justify-content: flex-start;
+  gap: clamp(4px, 1.2cqh, 8px);
   margin: 0;
 }
 
+.ptd-split-panel--right .ptd-order-card .top-pct-row--block {
+  flex-wrap: wrap;
+  row-gap: 4px;
+}
+
+.ptd-split-panel--right .ptd-order-card .top-pct-row--block .top-pct-btn {
+  flex: 1 1 calc(20% - 4px);
+  min-width: 2.4rem;
+}
+
+.ptd-split-panel--right .ptd-order-card .top-pct-row--block .top-pct-btn--direct {
+  flex: 1 1 calc(33% - 4px);
+  min-width: 3.2rem;
+}
+
 .ptd-split-panel--right .ptd-order-card .top-price-qty-block .top-field,
 .ptd-split-panel--right .ptd-order-card .top-price-qty-block .top-pct-row--block {
   margin: 0;
@@ -359,7 +385,7 @@
 
 .ptd-split-panel--right .ptd-order-card .top-actions {
   flex-shrink: 0;
-  margin-top: 0;
+  margin-top: auto;
   gap: clamp(6px, 1.4cqh, 8px);
 }
 
@@ -649,8 +675,11 @@
   .ptd-split-panel--right .ptd-order-card > .top-panel {
     gap: clamp(6px, 2cqh, 14px);
   }
+  .ptd-split-panel--right .ptd-order-card .top-panel-fields {
+    gap: clamp(6px, 1.8cqh, 12px);
+  }
   .ptd-split-panel--right .ptd-order-card .top-price-qty-block {
-    gap: clamp(4px, 1.8cqh, 12px);
+    gap: clamp(6px, 1.8cqh, 12px);
   }
 }
 
@@ -662,8 +691,8 @@
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
     column-gap: 8px;
-    row-gap: 4px;
-    align-content: space-evenly;
+    row-gap: 6px;
+    align-content: start;
   }
   .ptd-order-card .top-price-qty-block .top-field--price { grid-column: 1; grid-row: 1; }
   .ptd-order-card .top-price-qty-block .top-field--qty { grid-column: 2; grid-row: 1; }

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;

frontend/src/styles/verificationBoard.css

@@ -850,16 +850,22 @@
   background: var(--hover);
 }
 
-/* 검증 이슈 알림 팝업 */
+/* 검증 이슈 알림 팝업 — body 포털(.app 밖) · 매매 시그널 팝업(tsn-)과 동일 톤 */
+html.theme-dark .vbd-toast-stack,
+html.theme-light .vbd-toast-stack,
+html.theme-blue .vbd-toast-stack {
+  color: var(--text);
+}
+
 .vbd-toast-stack {
   position: fixed;
   left: 16px;
   bottom: 16px;
-  z-index: 6500;
+  z-index: 20002;
   display: flex;
   flex-direction: column;
   gap: 10px;
-  width: min(360px, calc(100vw - 32px));
+  width: min(380px, calc(100vw - 32px));
   pointer-events: none;
 }
 
@@ -869,31 +875,42 @@
   justify-content: space-between;
   gap: 8px;
   pointer-events: auto;
+  padding-bottom: 2px;
 }
 
 .vbd-toast-toolbar-label {
   font-size: 11px;
   font-weight: 600;
-  color: var(--text-muted);
+  color: var(--text2, var(--text-muted));
 }
 
 .vbd-toast-dismiss-all {
-  border: none;
-  background: transparent;
-  color: var(--accent);
   font-size: 11px;
+  padding: 5px 12px;
+  border-radius: 6px;
+  border: 1px solid var(--border, rgba(122, 162, 247, 0.2));
+  background: var(--bg3, #1a1b26);
+  color: var(--text2, #a9b1d6);
   cursor: pointer;
-  padding: 2px 4px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
+}
+
+.vbd-toast-dismiss-all:hover {
+  background: var(--bg4, var(--hover));
+  color: var(--text);
+  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
 }
 
 .vbd-toast-card {
   pointer-events: auto;
-  padding: 12px 14px;
+  padding: 12px 14px 10px;
   border-radius: 10px;
-  border: 1px solid var(--border);
-  background: var(--panel);
-  box-shadow: var(--popup-shadow);
-  animation: vbd-toast-in 0.22s ease-out;
+  border: 1px solid var(--border, rgba(122, 162, 247, 0.25));
+  background: var(--bg2, #1e2030);
+  color: var(--text);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
+  animation: vbd-toast-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 @keyframes vbd-toast-in {
@@ -915,50 +932,71 @@
 .vbd-toast-kind {
   margin: 0 0 4px;
   font-size: 11px;
-  color: var(--text-muted);
+  font-weight: 500;
+  color: var(--text2, var(--text-muted));
+  line-height: 1.35;
 }
 
 .vbd-toast-title {
   margin: 0;
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 600;
-  line-height: 1.35;
+  line-height: 1.4;
+  color: var(--text);
   word-break: break-word;
 }
 
 .vbd-toast-close {
+  flex-shrink: 0;
   border: none;
   background: transparent;
-  color: var(--text-muted);
-  font-size: 14px;
-  cursor: pointer;
-  padding: 0 2px;
+  color: var(--text3, var(--text-muted));
+  font-size: 18px;
   line-height: 1;
+  cursor: pointer;
+  padding: 0 4px;
+  transition: color 0.15s;
+}
+
+.vbd-toast-close:hover {
+  color: var(--text);
 }
 
 .vbd-toast-meta {
   margin-top: 8px;
 }
 
+.vbd-toast-meta .vbd-stage-badge {
+  font-size: 10px;
+}
+
 .vbd-toast-actions {
   display: flex;
   justify-content: flex-end;
   margin-top: 10px;
+  padding-top: 2px;
 }
 
 .vbd-toast-go {
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  padding: 6px 10px;
+  padding: 6px 12px;
   border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
   border-radius: 6px;
-  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
+  background: color-mix(in srgb, var(--accent) 12%, var(--bg2, var(--panel)));
   color: var(--accent);
   font-size: 12px;
+  font-weight: 500;
   cursor: pointer;
+  transition: background 0.15s, border-color 0.15s;
 }
 
 .vbd-toast-go:hover {
-  background: color-mix(in srgb, var(--accent) 18%, var(--panel));
+  background: color-mix(in srgb, var(--accent) 22%, var(--bg2, var(--panel)));
+  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
+}
+
+.vbd-toast-go svg {
+  flex-shrink: 0;
 }