일목균형표 수정

frontend/src/App.css

@@ -2797,6 +2797,34 @@ html.theme-blue {
   color: var(--text2);
   flex-shrink: 0;
 }
+.ism-hist-colors {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.ism-hist-color-field {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.ism-macd-hist-style-block {
+  margin-bottom: 8px;
+  padding-bottom: 4px;
+  border-bottom: 1px solid var(--sep);
+}
+.ism-macd-hist-style-title {
+  margin-bottom: 2px;
+}
+.ism-plot-title--sub {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text2);
+}
+.ism-style-field--wide {
+  flex: 1 1 auto;
+  min-width: 0;
+}
 /* 색상 입력 */
 .ism-color-wrap { display: flex; align-items: center; gap: 4px; position: relative; }
 .ism-color-swatch-btn {
@@ -3012,9 +3040,24 @@ html.theme-blue {
   border-radius: 8px;
   background: var(--bg2);
 }
-.ism-ichimoku-cloud-card-label {
-  display: block;
+.ism-ichimoku-cloud-card--off {
+  opacity: 0.72;
+}
+.ism-ichimoku-cloud-card--off .ism-ichimoku-cloud-card-row,
+.ism-ichimoku-cloud-card--off .ism-ichimoku-cloud-meta {
+  opacity: 0.45;
+  pointer-events: none;
+}
+.ism-ichimoku-cloud-card-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
   margin-bottom: 8px;
+}
+.ism-ichimoku-cloud-toggle {
+  flex-shrink: 0;
+}
+.ism-ichimoku-cloud-card-label {
   font-size: 12px;
   font-weight: 600;
   color: var(--text);
@@ -9652,7 +9695,7 @@ html.theme-blue {
   min-height: 0;
   display: flex;
   flex-direction: column;
-  justify-content: space-evenly;
+  justify-content: flex-start;
   gap: clamp(4px, 1.2cqi, 10px);
   overflow-y: auto;
   overflow-x: hidden;
@@ -9709,13 +9752,28 @@ html.theme-blue {
 }
 
 .rsp-trade-card-body .top-price-qty-block {
-  flex: 1 1 auto;
+  flex: 0 0 auto;
   min-height: 0;
   display: flex;
   flex-direction: column;
-  justify-content: space-evenly;
+  justify-content: flex-start;
   gap: clamp(4px, 1cqi, 8px);
 }
+
+.rsp-trade-card-body .top-pct-row--block {
+  flex-wrap: wrap;
+  row-gap: 4px;
+}
+
+.rsp-trade-card-body .top-pct-row--block .top-pct-btn {
+  flex: 1 1 calc(20% - 4px);
+  min-width: 2.4rem;
+}
+
+.rsp-trade-card-body .top-pct-row--block .top-pct-btn--direct {
+  flex: 1 1 calc(33% - 4px);
+  min-width: 3.2rem;
+}
 /* 가격·수량: 기본 세로 배치 */
 .top-price-qty-block {
   display: flex;
@@ -9972,11 +10030,14 @@ html.theme-blue {
 }
 .top-pct-row {
   display: flex;
+  flex-wrap: wrap;
   gap: 4px;
+  row-gap: 4px;
   margin-top: 6px;
 }
 .top-pct-btn {
-  flex: 1;
+  flex: 1 1 calc(20% - 4px);
+  min-width: 2.4rem;
   padding: 5px 2px;
   font-size: 10px;
   border: 1px solid var(--border);
@@ -9986,7 +10047,8 @@ html.theme-blue {
   cursor: pointer;
 }
 .top-pct-btn--direct {
-  flex: 1.3;
+  flex: 1 1 calc(33% - 4px);
+  min-width: 3.2rem;
 }
 .top-pct-btn--active {
   border-color: var(--accent);
@@ -11289,6 +11351,29 @@ html.theme-light .tam-disclaimer     { color: #90a4ae; }
 .tnl-page--with-right .ptd-ob-stack--fill {
   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;
+}
+.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);