매매 시그널 화면 추가 수정

frontend/src/App.css

@@ -9811,9 +9811,9 @@ html.theme-blue {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
-  gap: clamp(4px, 1.2cqi, 10px);
-  overflow-y: auto;
-  overflow-x: hidden;
+  gap: clamp(3px, 1cqh, 10px);
+  overflow: hidden;
+  overflow-y: hidden;
 }
 .rsp-trade-card-body .top-field {
   margin-bottom: 0;
@@ -9912,12 +9912,35 @@ html.theme-blue {
   margin-bottom: 0;
 }
 
-@container trade-card (max-height: 360px) {
+@container trade-card (max-height: 520px) {
+  .rsp-trade-card-body .top-order-kind {
+    flex-wrap: wrap;
+    row-gap: 3px;
+  }
+  .rsp-trade-card-body .top-kind-btn {
+    flex: 1 1 calc(33% - 4px);
+    min-width: 0;
+    padding: 3px 2px;
+    font-size: clamp(8px, 1.5cqh, 10px);
+  }
+  .rsp-trade-card-body .top-kind-btn--wide {
+    flex: 1 1 calc(50% - 4px);
+  }
+}
+
+@container trade-card (max-height: 440px) {
+  .rsp-trade-card-body .top-panel {
+    gap: 2px;
+  }
+  .rsp-trade-card-body .top-panel-fields {
+    gap: 2px;
+  }
   .rsp-trade-card-body .top-price-qty-block {
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-    column-gap: 8px;
+    column-gap: 6px;
     row-gap: 4px;
+    align-content: start;
   }
   .rsp-trade-card-body .top-price-qty-block .top-field--price {
     grid-column: 1;
@@ -9932,14 +9955,58 @@ html.theme-blue {
     grid-row: 2;
     margin-top: 0;
   }
+  .rsp-trade-card-body .top-pct-row--block .top-pct-btn {
+    flex: 1 1 calc(25% - 3px);
+    min-width: 0;
+    padding: 2px 1px;
+    font-size: clamp(8px, 1.4cqh, 9px);
+  }
+  .rsp-trade-card-body .top-pct-row--block .top-pct-btn--direct {
+    flex: 1 1 calc(33% - 3px);
+  }
+}
+
+@container trade-card (max-height: 340px) {
+  .rsp-trade-card-body .top-paper-hint,
+  .rsp-trade-card-body .top-meta {
+    display: none;
+  }
+  .rsp-trade-card-body .top-label-help {
+    display: none;
+  }
+  .rsp-trade-card-body .top-panel--buy .top-field:has(.top-symbol-field) {
+    display: none;
+  }
+  .rsp-trade-card-body .top-reset {
+    padding: 4px 8px;
+    font-size: 11px;
+  }
+  .rsp-trade-card-body .top-submit {
+    padding: 5px 8px;
+    font-size: 12px;
+  }
+}
+
+@media (max-height: 820px) {
+  .rsp-trade-stack {
+    gap: 6px;
+    padding: 6px 8px 4px;
+  }
+  .rsp-trade-card-title {
+    padding: 4px 10px 3px;
+    font-size: 11px;
+  }
 }
 
 @media (max-height: 780px) {
   @supports not (container-type: size) {
+    .rsp-trade-card-body .top-panel-fields {
+      overflow: hidden;
+    }
     .rsp-trade-card-body .top-price-qty-block {
       display: grid;
       grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-      column-gap: 8px;
+      column-gap: 6px;
       row-gap: 4px;
     }
     .rsp-trade-card-body .top-price-qty-block .top-field--price {
@@ -11467,28 +11534,10 @@ html.theme-light .tam-disclaimer     { color: #90a4ae; }
   height: 100%;
 }
 
-/* 매매 시그널 알림 우측: 좁은 카드에서도 주문 비율·총액이 겹치지 않도록 */
-.tnl-page--with-right .ptd-split-panel--right .ptd-order-card > .top-panel {
-  justify-content: flex-start;
-}
-.tnl-page--with-right .ptd-split-panel--right .ptd-order-card .top-panel-fields {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow-y: auto;
-  justify-content: flex-start;
-}
-.tnl-page--with-right .ptd-split-panel--right .ptd-order-card .top-price-qty-block {
-  flex: 0 0 auto;
-  justify-content: flex-start;
-}
+/* 매매 시그널 알림 우측 — 가상매매·실시간 차트와 동일 compact (paperDashboard.css) */
 .tnl-page--with-right .ptd-split-panel--right .ptd-order-card .top-actions {
   margin-top: auto;
 }
-@container trade-card (max-height: 400px) {
-  .tnl-page--with-right .ptd-split-panel--right .ptd-order-card .top-meta {
-    font-size: 9px;
-  }
-}
 .tnl-row--selected {
   border-color: var(--accent, #7aa2f7);
   box-shadow: 0 0 0 1px rgba(122, 162, 247, 0.35);