모의투자 관리 기능 추가

frontend/src/styles/paperDashboard.css

@@ -1,6 +1,11 @@
-/* 모의투자 — 좌측 패널·우측 탭·성과 지표 하단선 정렬 */
+/* 모의투자 — 가상매매(vtd)와 동일 3열·접기 레이아웃 */
 
-.bps-page .bps-main {
+.bps-page--ptd.bps-page--vtd .bps-main {
+  padding: 0 10px 10px 0;
+  box-sizing: border-box;
+}
+
+.bps-page--ptd .bps-main {
   padding: 0 10px 10px 0;
   box-sizing: border-box;
 }
@@ -107,7 +112,8 @@
   overflow: hidden;
 }
 .bps-panel-body--tabs > .ptd-split-panel--left,
-.bps-right-body > .ptd-right-body > .ptd-split-panel--right {
+.bps-right-body > .ptd-right-body > .ptd-split-panel--right,
+.trade-right-panel .bps-right-body > .ptd-right-body > .ptd-split-panel--right {
   flex: 1;
   min-height: 0;
 }
@@ -246,7 +252,8 @@
   margin-top: 4px;
 }
 
-.bps-right-body .ptd-right-body {
+.bps-right-body .ptd-right-body,
+.trade-right-panel .bps-right-body .ptd-right-body {
   flex: 1 1 0;
   min-height: 0;
   height: 100%;
@@ -257,11 +264,13 @@
   padding: 0;
 }
 
-.bps-right-body .ptd-right-body > .ptd-split-panel {
+.bps-right-body .ptd-right-body > .ptd-split-panel,
+.trade-right-panel .bps-right-body .ptd-right-body > .ptd-split-panel {
   gap: 8px;
 }
 
-.bps-right-body .ptd-right-body > .ptd-split-panel--right {
+.bps-right-body .ptd-right-body > .ptd-split-panel--right,
+.trade-right-panel .bps-right-body .ptd-right-body > .ptd-split-panel--right {
   flex: 1 1 0;
   min-height: 0;
   height: 100%;
@@ -415,6 +424,27 @@
   container-name: trade-card;
 }
 
+/* 우측 매매 패널: container query·압축 숨김 비활성 (tradeRightPanel.css와 함께) */
+.trade-right-panel .ptd-order-card,
+.trade-right-panel .ptd-order-card.ptd-order-card--trade-inline {
+  container-type: normal;
+  container-name: none;
+}
+
+.trade-right-panel .ptd-split-panel--right .ptd-order-card--trade-inline .top-panel-fields {
+  flex: 1 1 0;
+  min-height: 0;
+  overflow: visible;
+}
+
+.trade-right-panel .ptd-split-panel--right .ptd-order-card--trade-inline > .top-panel {
+  overflow: visible;
+}
+
+.trade-right-panel .ptd-split-panel--right .ptd-order-card--trade-inline .top-actions {
+  margin-top: auto;
+}
+
 .bps-footer .ptd-metrics-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));

frontend/src/styles/tradeNotificationList.css

@@ -934,10 +934,7 @@
   min-width: 0;
 }
 
-.tnl-side-wrap--right .tnl-right-tabs,
-.tnl-side-wrap--right .tnl-right-body {
-  min-width: min(380px, 38vw);
-}
+/* 우측 패널 너비: styles/tradeRightPanel.css (--gc-trade-right-panel-*) */
 
 .tnl-side-wrap--right:not(.tnl-side-wrap--open) .tnl-right-tabs,
 .tnl-side-wrap--right:not(.tnl-side-wrap--open) .tnl-right-body {

frontend/src/styles/tradeRightPanel.css

@@ -0,0 +1,389 @@
+/**
+ * 우측 매매·호가 패널 — 알림목록 · 실시간 차트 · 모의/가상매매 공통
+ */
+:root {
+  --gc-trade-right-panel-width: 440px;
+  --gc-trade-right-panel-min: 400px;
+  --gc-trade-right-panel-max: 480px;
+  --gc-trade-right-panel-pad-x: 12px;
+  --gc-trade-right-panel-pad-y: 8px;
+  --gc-trade-row-label-w: 88px;
+  --gc-trade-row-gap: 14px;
+  --gc-trade-card-pad: 14px 14px 10px;
+  --gc-trade-title-body-gap: 14px;
+  --gc-trade-upbit-accent: #1976d2;
+  --gc-trade-upbit-input-border: color-mix(in srgb, var(--border) 85%, var(--text3));
+}
+
+/* 패널 열림 너비 */
+.rsp-wrap--open .rsp-panel.trade-right-panel,
+.tnl-page--with-right .tnl-side-wrap--right.tnl-side-wrap--open .tnl-right.trade-right-panel.tnl-right--open {
+  flex: 0 0 var(--gc-trade-right-panel-width);
+  width: var(--gc-trade-right-panel-width);
+  min-width: var(--gc-trade-right-panel-min);
+  max-width: var(--gc-trade-right-panel-max);
+  box-sizing: border-box;
+}
+
+.trade-right-panel {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--bg2);
+}
+
+.trade-right-panel .bps-right-tabs {
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg3);
+  min-width: 0;
+  width: 100%;
+}
+
+.trade-right-panel .bps-right-body,
+.trade-right-panel .bps-right-body.rsp-body-wrap {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.trade-right-panel .bps-right-body .ptd-right-body {
+  flex: 1 1 0;
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  padding: 0;
+}
+
+.trade-right-panel .bps-right-body .ptd-right-body > .ptd-split-panel--right {
+  flex: 1 1 0;
+  min-height: 0;
+  height: 100%;
+  padding: var(--gc-trade-right-panel-pad-y) var(--gc-trade-right-panel-pad-x) 6px;
+  box-sizing: border-box;
+}
+
+.trade-right-panel .ptd-ob-stack--fill {
+  flex: 1;
+  min-height: 0;
+  height: 100%;
+}
+
+/* ── 매매 카드: 업비트 매수 탭 레이아웃 ── */
+.trade-right-panel .ptd-split-panel--right .ptd-split-card {
+  border-radius: 4px;
+  background: var(--bg2);
+  box-shadow: none;
+}
+
+.trade-right-panel .ptd-split-panel--right .ptd-split-card--top {
+  border-color: color-mix(in srgb, var(--gc-trade-buy) 35%, var(--border));
+  background: var(--bg2);
+}
+
+.trade-right-panel .ptd-split-panel--right .ptd-split-card--bottom {
+  border-color: color-mix(in srgb, var(--gc-trade-sell) 35%, var(--border));
+  background: var(--bg2);
+}
+
+.trade-right-panel .ptd-split-panel--right .ptd-split-card-head {
+  display: flex;
+  align-items: center;
+  min-height: 42px;
+  padding: 12px 14px 11px;
+  font-size: 13px;
+  font-weight: 700;
+  border-bottom: 1px solid var(--border);
+  box-sizing: border-box;
+}
+
+.trade-right-panel .ptd-split-panel--right .ptd-split-card--top .ptd-split-card-head {
+  color: var(--gc-trade-buy);
+  border-bottom-color: color-mix(in srgb, var(--gc-trade-buy) 30%, var(--border));
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--gc-trade-buy) 24%, var(--bg2)) 0%,
+    color-mix(in srgb, var(--gc-trade-buy) 10%, var(--bg2)) 50%,
+    var(--bg2) 100%
+  );
+}
+
+.trade-right-panel .ptd-split-panel--right .ptd-split-card--bottom .ptd-split-card-head {
+  color: var(--gc-trade-sell);
+  border-bottom-color: color-mix(in srgb, var(--gc-trade-sell) 30%, var(--border));
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--gc-trade-sell) 24%, var(--bg2)) 0%,
+    color-mix(in srgb, var(--gc-trade-sell) 10%, var(--bg2)) 50%,
+    var(--bg2) 100%
+  );
+}
+
+.trade-right-panel .ptd-split-panel--right .ptd-split-card-body {
+  padding: var(--gc-trade-card-pad);
+}
+
+.trade-right-panel .ptd-split-panel--right .ptd-split-card-body:has(.ptd-order-card--trade-inline) {
+  display: flex;
+  flex-direction: column;
+  justify-content: stretch;
+  align-items: stretch;
+  overflow-x: hidden;
+  overflow-y: auto;
+  min-height: 0;
+}
+
+.trade-right-panel .ptd-split-panel--right .ptd-split-card-body > .ptd-order-card--trade-inline {
+  flex: 1 1 0;
+  width: 100%;
+  min-height: 0;
+  height: 100%;
+  max-height: 100%;
+  overflow: visible;
+}
+
+.trade-right-panel .ptd-split-panel--right .ptd-order-card--trade-inline > .top-panel {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: stretch;
+  gap: var(--gc-trade-row-gap);
+  padding: 0 0 4px;
+  flex: 1 1 0;
+  min-height: 0;
+  height: 100%;
+  max-height: 100%;
+  overflow: hidden;
+}
+
+.trade-right-panel .ptd-split-panel--right .ptd-order-card--trade-inline .top-panel-fields {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 0;
+  min-height: 0;
+  justify-content: flex-start;
+  gap: var(--gc-trade-row-gap);
+  overflow: visible;
+  padding: var(--gc-trade-title-body-gap) 0 0;
+}
+
+/* 타이틀바 바로 아래 → 주문유형 행까지 추가 간격 (종목 행이 있을 때) */
+.trade-right-panel .ptd-order-card--trade-inline .top-field:has(.top-order-kind) {
+  margin-top: 4px;
+}
+
+.trade-right-panel .ptd-order-card--trade-inline .top-paper-hint {
+  margin: 0 0 2px;
+  padding: 4px 6px;
+  font-size: 10px;
+  line-height: 1.3;
+}
+
+/* 업비트형 폼: 라벨 좌 · 값/입력 우 */
+.trade-right-panel .ptd-order-card--trade-inline .top-panel--upbit {
+  font-size: 12px;
+}
+
+.trade-right-panel .ptd-order-card--trade-inline .top-field,
+.trade-right-panel .ptd-order-card--trade-inline .top-row--balance {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  flex-shrink: 0;
+}
+
+.trade-right-panel .ptd-order-card--trade-inline .top-field > .top-label,
+.trade-right-panel .ptd-order-card--trade-inline .top-row--balance > .top-label {
+  flex: 0 0 var(--gc-trade-row-label-w);
+  margin: 0;
+  padding: 0;
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--text2);
+  line-height: 1.3;
+  white-space: nowrap;
+}
+
+.trade-right-panel .ptd-order-card--trade-inline .top-field > :not(.top-label) {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.trade-right-panel .ptd-order-card--trade-inline .top-row--balance > .top-balance {
+  flex: 1 1 0;
+  text-align: right;
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--text);
+  line-height: 1.25;
+}
+
+.trade-right-panel .ptd-order-card--trade-inline .top-label-help {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  margin-left: 3px;
+  border-radius: 50%;
+  border: 1px solid var(--gc-trade-upbit-input-border);
+  font-size: 9px;
+  color: var(--text3);
+  vertical-align: middle;
+}
+
+.trade-right-panel .ptd-order-card--trade-inline .top-order-kind {
+  display: flex;
+  gap: 4px;
+  width: 100%;
+}
+
+.trade-right-panel .ptd-order-card--trade-inline .top-kind-btn {
+  flex: 1 1 0;
+  min-width: 0;
+  padding: 7px 4px;
+  font-size: 11px;
+  border: 1px solid var(--gc-trade-upbit-input-border);
+  border-radius: 4px;
+  background: var(--bg);
+  color: var(--text2);
+}
+
+.trade-right-panel .ptd-order-card--trade-inline .top-kind-btn--active {
+  border-color: var(--gc-trade-upbit-accent);
+  color: var(--gc-trade-upbit-accent);
+  background: color-mix(in srgb, var(--gc-trade-upbit-accent) 8%, var(--bg));
+  font-weight: 600;
+}
+
+.trade-right-panel .ptd-order-card--trade-inline .top-input-group {
+  border: 1px solid var(--gc-trade-upbit-input-border);
+  border-radius: 4px;
+  background: var(--bg);
+}
+
+.trade-right-panel .ptd-order-card--trade-inline .top-input,
+.trade-right-panel .ptd-order-card--trade-inline .top-input--full {
+  padding: 8px 10px;
+  font-size: 13px;
+  line-height: 1.25;
+  border: 1px solid var(--gc-trade-upbit-input-border);
+  border-radius: 4px;
+  background: var(--bg);
+  color: var(--text);
+}
+
+.trade-right-panel .ptd-order-card--trade-inline .top-input-group .top-input {
+  border: none;
+  border-radius: 0;
+}
+
+.trade-right-panel .ptd-order-card--trade-inline .top-field--price .top-input,
+.trade-right-panel .ptd-order-card--trade-inline .top-field--qty .top-input,
+.trade-right-panel .ptd-order-card--trade-inline .top-field--total .top-input {
+  text-align: right;
+}
+
+.trade-right-panel .ptd-order-card--trade-inline .top-input--readonly {
+  background: var(--bg3);
+  color: var(--text2);
+}
+
+.trade-right-panel .ptd-order-card--trade-inline .top-symbol-field {
+  border: 1px solid var(--gc-trade-upbit-input-border);
+  border-radius: 4px;
+  background: var(--bg);
+}
+
+.trade-right-panel .ptd-order-card--trade-inline .top-symbol-input {
+  padding: 8px 10px;
+  font-size: 13px;
+}
+
+.trade-right-panel .ptd-order-card--trade-inline .top-step {
+  width: 30px;
+  font-size: 15px;
+  background: var(--bg3);
+  border-left: 1px solid var(--gc-trade-upbit-input-border);
+}
+
+.trade-right-panel .ptd-order-card--trade-inline .top-pct-row--under-qty {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 4px;
+  margin: 0 0 0 calc(var(--gc-trade-row-label-w) + 8px);
+  padding: 0;
+}
+
+.trade-right-panel .ptd-order-card--trade-inline .top-pct-row--under-qty .top-pct-btn {
+  flex: 1 1 0;
+  min-width: 0;
+  margin: 0;
+  padding: 6px 2px;
+  font-size: 11px;
+  border: 1px solid var(--gc-trade-upbit-input-border);
+  border-radius: 4px;
+  background: var(--bg);
+  color: var(--text2);
+}
+
+.trade-right-panel .ptd-order-card--trade-inline .top-pct-row--under-qty .top-pct-btn--active {
+  border-color: var(--gc-trade-upbit-accent);
+  color: var(--gc-trade-upbit-accent);
+  background: color-mix(in srgb, var(--gc-trade-upbit-accent) 8%, var(--bg));
+}
+
+.trade-right-panel .ptd-order-card--trade-inline .top-meta {
+  display: flex;
+  justify-content: flex-end;
+  margin: 2px 0 0;
+  padding: 0;
+  font-size: 11px;
+  color: var(--text3);
+}
+
+.trade-right-panel .ptd-order-card--trade-inline .top-meta-line {
+  gap: 2px;
+}
+
+.trade-right-panel .ptd-split-panel--right .ptd-order-card--trade-inline .top-actions {
+  flex: 0 0 auto;
+  margin-top: auto;
+  padding-top: 12px;
+  border-top: none;
+  gap: 6px;
+}
+
+.trade-right-panel .ptd-order-card--trade-inline .top-reset {
+  flex: 0 0 28%;
+  max-width: 120px;
+  justify-content: center;
+  padding: 11px 10px;
+  font-size: 13px;
+  font-weight: 600;
+  border: none;
+  border-radius: 4px;
+  background: color-mix(in srgb, var(--text3) 55%, var(--bg3));
+  color: #fff;
+}
+
+.trade-right-panel .ptd-order-card--trade-inline .top-submit {
+  flex: 1 1 0;
+  padding: 11px 12px;
+  font-size: 14px;
+  font-weight: 700;
+  border: none;
+  border-radius: 4px;
+}
+
+.trade-right-panel .ptd-order-card--trade-inline .top-paper-hint {
+  display: block;
+}

frontend/src/styles/verificationBoard.css

@@ -713,6 +713,84 @@
   gap: 8px;
 }
 
+.vbd-attachments-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+/* ── 화면 영역 캡처 오버레이 ── */
+.screen-capture-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 200000;
+  cursor: crosshair;
+  user-select: none;
+}
+
+.screen-capture-video {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  background: #000;
+  pointer-events: none;
+}
+
+.screen-capture-interaction {
+  position: fixed;
+  inset: 0;
+  z-index: 1;
+  touch-action: none;
+}
+
+.screen-capture-selection {
+  position: fixed;
+  box-sizing: border-box;
+  border: 2px solid #fff;
+  background: transparent;
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
+  pointer-events: none;
+}
+
+.screen-capture-toolbar {
+  position: fixed;
+  top: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 14px;
+  border-radius: 8px;
+  background: rgba(20, 22, 28, 0.92);
+  color: #fff;
+  font-size: 13px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
+  pointer-events: auto;
+}
+
+.screen-capture-hint {
+  white-space: nowrap;
+}
+
+.screen-capture-cancel {
+  padding: 4px 12px;
+  border: 1px solid rgba(255, 255, 255, 0.35);
+  border-radius: 6px;
+  background: transparent;
+  color: #fff;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.screen-capture-cancel:hover {
+  background: rgba(255, 255, 255, 0.12);
+}
+
 .vbd-attachments-title {
   margin: 0;
   font-size: 14px;

frontend/src/styles/virtualTradingDashboard.css

@@ -2795,188 +2795,130 @@
   opacity: 0.5;
 }
 
-/* ── 우측 매매 패널: 매수·매도 카드 간격·타이포 ── */
-.bps-page--vtd .ptd-split-panel--right .ptd-split-card-body {
-  padding: 8px 12px 10px;
-}
+/* 우측 매매 패널 타이포·레이아웃: styles/tradeRightPanel.css (.trade-right-panel) */
 
-.bps-page--vtd .ptd-split-panel--right .ptd-order-card > .top-panel {
-  gap: 0;
-  justify-content: flex-start;
-  padding: 6px 6px 0;
-  height: 100%;
+/* ── 모의투자 투자금 관리 (P1) ── */
+.ptd-center-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
 }
-
-.bps-page--vtd .ptd-split-panel--right .ptd-order-card .top-panel-fields {
-  flex: 1 1 auto;
+.ptd-tabs--center {
+  flex-shrink: 0;
+}
+.ptd-invest-card {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px;
+  overflow: auto;
+  min-height: 0;
+}
+.ptd-invest-metrics {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding-top: 8px;
+  border-top: 1px solid var(--se-border);
+}
+.bps-page--ptd .ptd-right-history {
+  flex: 1;
   min-height: 0;
   display: flex;
   flex-direction: column;
-  justify-content: flex-start;
-  gap: 12px;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding-bottom: 4px;
+  overflow: hidden;
 }
-
-.bps-page--vtd .ptd-split-panel--right .ptd-order-card .top-field,
-.bps-page--vtd .ptd-split-panel--right .ptd-order-card .top-row--balance {
-  margin: 0;
+.bps-page--ptd .ptd-tabs--history {
   flex-shrink: 0;
-}
-
-/* 기본: 공간 부족 시 하단 안내 텍스트 숨김 */
-.bps-page--vtd .ptd-split-panel--right .ptd-order-card .top-meta {
-  display: none;
-  margin: 0;
-  padding: 0;
-  flex-shrink: 0;
-}
-
-.bps-page--vtd .ptd-split-panel--right .ptd-order-card .top-label {
-  margin-bottom: 7px;
-  font-size: 12px;
-}
-
-.bps-page--vtd .ptd-split-panel--right .ptd-order-card .top-input,
-.bps-page--vtd .ptd-split-panel--right .ptd-order-card .top-input--full {
-  padding: 9px 11px;
-  font-size: 13px;
-}
-
-.bps-page--vtd .ptd-split-panel--right .ptd-order-card .top-symbol-input {
-  padding: 9px 11px;
-  font-size: 13px;
-}
-
-.bps-page--vtd .ptd-split-panel--right .ptd-order-card .top-order-kind {
+  padding: 8px 10px 0;
   gap: 6px;
 }
-
-.bps-page--vtd .ptd-split-panel--right .ptd-order-card .top-kind-btn {
-  padding: 7px 5px;
+.bps-page--ptd .ptd-right-history-body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 8px 10px 10px;
+}
+.bps-page--ptd .ptd-right-body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.ptd-invest-kpi {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.ptd-invest-kpi-row {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+}
+.ptd-invest-kpi-cell {
+  padding: 8px 10px;
+  border-radius: 6px;
+  background: var(--gc-surface-2, rgba(255,255,255,0.04));
+}
+.ptd-invest-kpi-cell--up .ptd-invest-kpi-value { color: var(--gc-trade-buy, #ef5350); }
+.ptd-invest-kpi-cell--down .ptd-invest-kpi-value { color: var(--gc-trade-sell, #4dabf7); }
+.ptd-invest-kpi-label {
+  display: block;
   font-size: 11px;
+  opacity: 0.7;
 }
-
-.bps-page--vtd .ptd-split-panel--right .ptd-order-card .top-row--balance {
-  padding: 4px 0 2px;
-}
-
-.bps-page--vtd .ptd-split-panel--right .ptd-order-card .top-pct-row {
-  margin-top: 8px;
-  gap: 6px;
-  flex-shrink: 0;
-}
-
-.bps-page--vtd .ptd-split-panel--right .ptd-order-card .top-pct-btn {
-  padding: 6px 4px;
-  font-size: 11px;
-}
-
-.bps-page--vtd .ptd-split-panel--right .ptd-order-card .top-step {
-  width: 32px;
+.ptd-invest-kpi-value {
   font-size: 15px;
+  font-weight: 600;
 }
-
-.bps-page--vtd .ptd-split-panel--right .ptd-order-card .top-balance {
-  font-size: 13px;
-}
-
-/* paperDashboard 2열 그리드보다 우선 — 항상 세로 스택 */
-.bps-page--vtd .ptd-split-panel--right .ptd-order-card .top-price-qty-block {
-  flex: 0 0 auto;
+.ptd-alloc-table-wrap {
+  overflow: auto;
+  flex: 1;
   min-height: 0;
+}
+.ptd-alloc-row--selected {
+  background: rgba(255, 255, 255, 0.06);
+}
+.ptd-alloc-toggle {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  border: 1px solid rgba(255,255,255,0.15);
+  background: transparent;
+  cursor: pointer;
+}
+.ptd-alloc-toggle--on {
+  border-color: var(--gc-trade-buy, #ef5350);
+  color: var(--gc-trade-buy, #ef5350);
+}
+.ptd-footer-stack {
   display: flex;
   flex-direction: column;
-  justify-content: flex-start;
-  gap: 12px;
-  margin: 0;
-  overflow: visible;
-}
-
-.bps-page--vtd .ptd-split-panel--right .ptd-order-card .top-price-qty-block .top-field,
-.bps-page--vtd .ptd-split-panel--right .ptd-order-card .top-price-qty-block .top-pct-row--block {
-  margin: 0;
-  flex-shrink: 0;
-}
-
-.bps-page--vtd .ptd-split-panel--right .ptd-order-card .top-actions {
-  flex-shrink: 0;
-  margin-top: 10px;
-  padding-top: 10px;
-  border-top: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
   gap: 10px;
 }
-
-.bps-page--vtd .ptd-split-panel--right .ptd-order-card .top-reset,
-.bps-page--vtd .ptd-split-panel--right .ptd-order-card .top-submit {
-  padding: 10px 14px;
-  font-size: 14px;
+.ptd-asset-trend {
+  padding: 8px 12px;
+  border-radius: 6px;
+  background: var(--gc-surface-2, rgba(255,255,255,0.04));
 }
-
-/* 카드 높이 여유 있을 때: 간격 확대 + 하단 안내 텍스트 표시 */
-@container trade-card (min-height: 440px) {
-  .bps-page--vtd .ptd-split-panel--right .ptd-order-card .top-panel-fields {
-    justify-content: space-between;
-    gap: 14px;
-  }
-
-  .bps-page--vtd .ptd-split-panel--right .ptd-order-card .top-price-qty-block {
-    flex: 1 1 auto;
-    justify-content: space-evenly;
-    gap: 14px;
-  }
-
-  .bps-page--vtd .ptd-split-panel--right .ptd-order-card .top-meta {
-    display: flex;
-    font-size: 11px;
-    padding-top: 2px;
-  }
+.ptd-asset-trend-head {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  margin-bottom: 4px;
 }
-
-@container trade-card (min-height: 520px) {
-  .bps-page--vtd .ptd-split-panel--right .ptd-order-card .top-panel-fields {
-    gap: 18px;
-  }
-
-  .bps-page--vtd .ptd-split-panel--right .ptd-order-card .top-price-qty-block {
-    gap: 16px;
-  }
+.ptd-asset-trend-svg {
+  width: 100%;
+  height: 48px;
+  display: block;
 }
-
-/* container query 미지원 fallback */
-@supports not (container-type: size) {
-  @media (max-height: 820px) {
-    .bps-page--vtd .ptd-split-panel--right .ptd-order-card .top-meta {
-      display: none;
-    }
-
-    .bps-page--vtd .ptd-split-panel--right .ptd-order-card .top-panel-fields {
-      justify-content: flex-start;
-      gap: 12px;
-    }
-
-    .bps-page--vtd .ptd-split-panel--right .ptd-order-card .top-price-qty-block {
-      flex: 0 0 auto;
-      justify-content: flex-start;
-    }
-  }
-
-  @media (min-height: 821px) {
-    .bps-page--vtd .ptd-split-panel--right .ptd-order-card .top-meta {
-      display: flex;
-      font-size: 11px;
-      padding-top: 2px;
-    }
-
-    .bps-page--vtd .ptd-split-panel--right .ptd-order-card .top-panel-fields {
-      justify-content: space-between;
-      gap: 14px;
-    }
-
-    .bps-page--vtd .ptd-split-panel--right .ptd-order-card .top-price-qty-block {
-      flex: 1 1 auto;
-      justify-content: space-evenly;
-    }
-  }
+.ptd-asset-trend-range {
+  display: flex;
+  justify-content: space-between;
+  font-size: 10px;
+  opacity: 0.6;
 }