/* 모의투자 — 좌측 패널·우측 탭·성과 지표 하단선 정렬 */ .bps-page .bps-main { padding: 0 10px 10px 0; box-sizing: border-box; } .bps-page .bps-right { border: 1px solid var(--se-panel-card-border); border-radius: 14px; box-shadow: var(--se-panel-card-shadow), inset 0 1px 0 color-mix(in srgb, var(--se-text) 4%, transparent); } .bps-page .bps-footer { margin: 0 12px 0; } .bps-center-content .ptd-center-fill { height: 100%; min-height: 0; display: flex; flex-direction: column; } .bps-center-content .ptd-chart-card { flex: 1; min-height: 0; height: 100%; border: 1px solid var(--se-border); background: var(--se-panel-card-bg); padding: 0; overflow: hidden; } /* 중앙 — 캔들 + 보조지표 (실시간 차트 레이아웃) */ .ptd-analysis-chart { flex: 1; min-height: 0; height: 100%; display: flex; flex-direction: column; overflow: hidden; } .ptd-analysis-chart .ptd-main-pane { flex: 1.55; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .ptd-analysis-chart .ptd-sub-panes { flex: 1; min-height: 0; display: flex; flex-direction: column; border-top: 1px solid var(--sep); overflow: hidden; } .ptd-analysis-chart .ptd-chart-wrap { flex: 1; min-height: 0; padding: 8px 10px 0; } .ptd-analysis-chart .ptd-chart-canvas { flex: 1; min-height: 120px; max-height: none; } .ptd-ind-stack { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; } .ptd-ind-row { flex: 1; min-height: 72px; display: flex; flex-direction: column; padding: 4px 10px 6px; border-bottom: 1px solid var(--sep); background: color-mix(in srgb, var(--bg3) 80%, transparent); } .ptd-ind-row:last-child { border-bottom: none; } .ptd-ind-row .ptd-ind-svg { flex: 1; min-height: 48px; width: 100%; } /* 좌·우 상하단 카드 분리 */ .ptd-split-panel { flex: 1; min-height: 0; height: 100%; display: flex; flex-direction: column; gap: 8px; } .bps-panel-body--tabs { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .bps-panel-body--tabs > .ptd-split-panel--left, .bps-right-body > .ptd-right-body > .ptd-split-panel--right { flex: 1; min-height: 0; } .ptd-split-card { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--se-border, var(--border)); border-radius: 10px; background: color-mix(in srgb, var(--se-bg-elevated, var(--bg2)) 88%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--se-text, var(--text)) 4%, transparent); container-type: size; container-name: split-trade-card; } .ptd-split-card-head { flex-shrink: 0; padding: 8px 10px; font-size: 11px; font-weight: 700; color: var(--text2, var(--se-text-muted)); border-bottom: 1px solid var(--sep, var(--se-border)); } .ptd-split-card-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 8px 10px; display: flex; flex-direction: column; gap: 8px; } .ptd-split-panel--right .ptd-split-card-body .ptd-ob--section { flex: 1; min-height: 0; display: flex; flex-direction: column; border: none; background: transparent; } .ptd-split-panel--right .ptd-split-card-body .ptd-ob--section .ptd-ob-body { flex: 1; min-height: 0; max-height: none; overflow-y: auto; } .ptd-split-panel--right .ptd-order-card, .ptd-split-panel--right .top-panel { background: transparent; } .ptd-tabs--in-card { border-bottom: none; margin: -4px -2px 0; } .ptd-asset-inline { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--sep); } .ptd-asset-total--sm { padding: 0; font-size: 16px; } .ptd-asset-ret--sm { padding: 0; font-size: 14px; } /* 좌측 전략·설정 탭 */ .ptd-left-tab { display: flex; flex-direction: column; gap: 10px; } .ptd-left-section { display: flex; flex-direction: column; gap: 8px; } .ptd-left-section-title { font-size: 11px; font-weight: 700; color: var(--text2); padding-bottom: 4px; border-bottom: 1px solid var(--sep); } .ptd-left-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--text2); } .ptd-left-field { display: flex; flex-direction: column; gap: 4px; font-size: 10px; color: var(--text3); } .ptd-left-select, .ptd-left-input { width: 100%; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg3); color: var(--text); font-size: 11px; } .ptd-left-hint { margin: 0; font-size: 10px; color: var(--accent); } .ptd-left-status { margin: 0; font-size: 10px; color: var(--text3); padding: 6px 8px; border-radius: 8px; background: var(--bg3); } .ptd-left-status--on { color: #22c55e; background: rgba(34, 197, 94, 0.1); } .ptd-left-reset { width: 100%; margin-top: 4px; } .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; } .bps-right-body .ptd-right-body > .ptd-split-panel { gap: 8px; } .bps-right-body .ptd-right-body > .ptd-split-panel--right { flex: 1 1 0; min-height: 0; height: 100%; } .ptd-split-panel--right .ptd-split-card-body { overflow: hidden; padding: 4px 8px 6px; } .ptd-split-panel--right .ptd-split-card-body:has(.ptd-order-card) { overflow: hidden; overflow-y: hidden; padding: 3px 6px 4px; } .ptd-split-panel--right .ptd-split-card-body > .ptd-order-card, .ptd-split-panel--right .ptd-split-card-body > .top-panel { flex: 1 1 0; min-height: 0; height: 100%; display: flex; flex-direction: column; overflow: hidden; } .ptd-split-panel--right .ptd-order-card > .top-panel { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; 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(3px, 1cqh, 10px); overflow: hidden; overflow-y: hidden; } .ptd-split-panel--right .ptd-order-card .top-paper-hint { flex-shrink: 0; margin: 0; padding: 5px 7px; font-size: clamp(10px, 1.8cqh, 11px); } .ptd-split-panel--right .ptd-order-card .top-field, .ptd-split-panel--right .ptd-order-card .top-row--balance, .ptd-split-panel--right .ptd-order-card .top-meta { flex-shrink: 0; margin-bottom: 0; margin-top: 0; } .ptd-split-panel--right .ptd-order-card .top-label { margin-bottom: clamp(2px, 0.6cqh, 5px); font-size: clamp(10px, 1.7cqh, 11px); } .ptd-split-panel--right .ptd-order-card .top-price-qty-block { flex: 0 0 auto; min-height: 0; display: flex; flex-direction: column; 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; flex-shrink: 0; } .ptd-split-panel--right .ptd-order-card .top-input, .ptd-split-panel--right .ptd-order-card .top-input--full { padding: clamp(5px, 1.4cqh, 8px) clamp(8px, 1.8cqw, 10px); font-size: clamp(11px, 2cqh, 13px); } .ptd-split-panel--right .ptd-order-card .top-kind-btn { padding: clamp(4px, 1.2cqh, 6px) 3px; font-size: clamp(9px, 1.8cqh, 11px); } .ptd-split-panel--right .ptd-order-card .top-pct-btn { padding: clamp(3px, 1cqh, 5px) 2px; font-size: clamp(9px, 1.6cqh, 10px); } .ptd-split-panel--right .ptd-order-card .top-step { width: clamp(26px, 6cqw, 32px); font-size: clamp(12px, 2.2cqh, 14px); } .ptd-split-panel--right .ptd-order-card .top-balance { font-size: clamp(11px, 2cqh, 13px); } .ptd-split-panel--right .ptd-order-card .top-meta { font-size: clamp(9px, 1.6cqh, 10px); } .ptd-split-panel--right .ptd-order-card .top-actions { flex-shrink: 0; margin-top: auto; gap: clamp(6px, 1.4cqh, 8px); } .ptd-split-panel--right .ptd-order-card .top-reset, .ptd-split-panel--right .ptd-order-card .top-submit { padding: clamp(6px, 1.6cqh, 10px) clamp(10px, 2cqw, 12px); font-size: clamp(12px, 2.2cqh, 14px); } .ptd-order-card { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; border: none; background: transparent; container-type: size; container-name: trade-card; } .bps-footer .ptd-metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .bps-page .ptd-metric, .se-page .ptd-metric { background: color-mix(in srgb, var(--se-bg-elevated) 88%, transparent); border-color: var(--se-border); } .bps-page .ptd-card, .se-page .ptd-card { background: color-mix(in srgb, var(--se-bg-elevated) 88%, transparent); border-color: var(--se-border); } .bps-page .up, .se-page .up { color: var(--se-up, #22c55e); } .bps-page .down, .se-page .down { color: var(--se-down, #ef4444); } @media (max-width: 1200px) { .bps-footer .ptd-metrics-grid { grid-template-columns: repeat(2, 1fr); } } /* legacy layout removed — shell handles page structure */ .ptd-metric { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--border); } .ptd-metric-icon { font-size: 16px; line-height: 1; } .ptd-metric-title { font-size: 10px; color: var(--text3); margin-bottom: 2px; } .ptd-metric-value { font-size: 17px; font-weight: 800; line-height: 1.1; color: var(--text); } .ptd-metric-sub { font-size: 9px; color: var(--text3); margin-top: 2px; } .ptd-metric--up .ptd-metric-value { color: #22c55e; } .ptd-metric--down .ptd-metric-value { color: #ef4444; } .ptd-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; flex-shrink: 0; } .ptd-card-head, .ptd-card-label { padding: 8px 10px 0; font-size: 11px; font-weight: 700; color: var(--text2); } .ptd-asset-card { padding-bottom: 8px; } .ptd-asset-total { padding: 4px 10px 0; font-size: 22px; font-weight: 800; color: var(--text); } .ptd-asset-total span { font-size: 12px; color: var(--text3); font-weight: 600; } .ptd-asset-ret { padding: 2px 10px 0; font-size: 18px; font-weight: 800; } .ptd-asset-sub { padding: 4px 10px 0; font-size: 10px; color: var(--text3); } .ptd-table { width: 100%; border-collapse: collapse; font-size: 10px; } .ptd-table th, .ptd-table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--sep); } .ptd-table th { color: var(--text3); font-weight: 600; } .ptd-table tbody tr { cursor: pointer; } .ptd-table tbody tr:hover { background: var(--bg3); } .ptd-row--sel { background: var(--bg3); } .ptd-coin { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; font-size: 9px; font-weight: 800; color: #fff; margin-right: 4px; } .ptd-muted { color: var(--text3); text-align: center; padding: 12px; font-size: 11px; } .ptd-time { color: var(--text3); white-space: nowrap; } .ptd-donut-card { padding-bottom: 8px; } .ptd-donut-wrap { display: flex; align-items: center; gap: 10px; padding: 8px 10px; } .ptd-donut { width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0; } .ptd-donut-hole { width: 44px; height: 44px; margin: 14px auto; border-radius: 50%; background: var(--bg2); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--text); } .ptd-donut-legend { list-style: none; margin: 0; padding: 0; font-size: 10px; color: var(--text2); } .ptd-donut-legend li { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; } .ptd-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .ptd-chart-card { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .ptd-chart-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 8px 10px 0; } .ptd-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; flex-shrink: 0; } .ptd-chart-title { font-size: 12px; font-weight: 700; color: var(--text); } .ptd-ws-badge { font-size: 9px; padding: 2px 6px; border-radius: 20px; background: rgba(34,197,94,0.15); color: #22c55e; border: 1px solid rgba(34,197,94,0.3); } .ptd-chart-canvas { flex: 1; min-height: 140px; max-height: 220px; position: relative; } .ptd-chart-loading { position: absolute; inset: 40% 0 auto; text-align: center; font-size: 11px; color: var(--text3); pointer-events: none; } .ptd-tf-row { display: flex; gap: 4px; padding: 6px 0 8px; flex-wrap: wrap; flex-shrink: 0; } .ptd-tf-btn { padding: 3px 7px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg3); color: var(--text2); font-size: 9px; cursor: pointer; } .ptd-tf-btn--active { border-color: var(--accent); color: var(--accent); background: var(--bg2); } .ptd-indicators { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 0 10px 8px; border-top: 1px solid var(--sep); flex-shrink: 0; } .ptd-ind-panel { background: var(--bg3); border-radius: 8px; padding: 4px 6px; min-height: 52px; } .ptd-ind-label { font-size: 9px; color: var(--text3); margin-bottom: 2px; } .ptd-ind-svg { width: 100%; height: 36px; display: block; } /* 우측 패널 — 매매/호가 탭 */ .ptd-right-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .ptd-tabs--main { flex-shrink: 0; background: var(--bg3); } .ptd-tabs--main .ptd-tab { padding: 10px; font-size: 12px; font-weight: 600; } .ptd-right-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 0; padding: 0; } .ptd-right-body > .ptd-ob--fill { flex: 1; min-height: 0; margin: 0; border: none; border-radius: 0; } .ptd-order-card .ptd-order-stack { padding: 0 4px 4px; flex: 1; } .ptd-order-card .top-panel { padding: 4px 2px; background: transparent; } .ptd-order-card .top-field { margin-bottom: 4px; } .ptd-order-card .top-price-qty-block .top-field { margin-bottom: 0; } .ptd-order-card .top-price-qty-block .top-pct-row--block { margin-bottom: 4px; } @container trade-card (min-height: 420px) { .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(6px, 1.8cqh, 12px); } } /* ── 우측 매수·매도 카드: 낮은 높이에서 카드 내 스크롤 없이 압축 레이아웃 ── */ @container trade-card (max-height: 520px) { .ptd-split-panel--right .ptd-order-card .top-order-kind { flex-wrap: wrap; row-gap: 3px; } .ptd-split-panel--right .ptd-order-card .top-kind-btn { flex: 1 1 calc(33% - 4px); min-width: 0; padding: 3px 2px; font-size: clamp(8px, 1.5cqh, 10px); } .ptd-split-panel--right .ptd-order-card .top-kind-btn--wide { flex: 1 1 calc(50% - 4px); } } @container trade-card (max-height: 440px) { .ptd-split-panel--right .ptd-order-card > .top-panel { gap: 2px; } .ptd-split-panel--right .ptd-order-card .top-panel-fields { gap: 2px; } .ptd-order-card .top-price-qty-block, .ptd-split-panel--right .ptd-order-card .top-price-qty-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 6px; row-gap: 4px; align-content: start; } .ptd-order-card .top-price-qty-block .top-field--price, .ptd-split-panel--right .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, .ptd-split-panel--right .ptd-order-card .top-price-qty-block .top-field--qty { grid-column: 2; grid-row: 1; } .ptd-order-card .top-price-qty-block .top-pct-row--block, .ptd-split-panel--right .ptd-order-card .top-price-qty-block .top-pct-row--block { grid-column: 1 / -1; grid-row: 2; margin-top: 0; } .ptd-split-panel--right .ptd-order-card .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); } .ptd-split-panel--right .ptd-order-card .top-pct-row--block .top-pct-btn--direct { flex: 1 1 calc(33% - 3px); } } @container trade-card (max-height: 340px) { .ptd-split-panel--right .ptd-order-card .top-paper-hint, .ptd-split-panel--right .ptd-order-card .top-meta { display: none; } .ptd-split-panel--right .ptd-order-card .top-label-help { display: none; } .ptd-split-panel--right .ptd-order-card .top-panel--buy .top-field:has(.top-symbol-field) { display: none; } .ptd-split-panel--right .ptd-order-card .top-reset { padding: 4px 8px; font-size: 11px; } .ptd-split-panel--right .ptd-order-card .top-submit { padding: 5px 8px; font-size: 12px; } } @container split-trade-card (max-height: 200px) { .ptd-split-panel--right .ptd-split-card-head { padding: 3px 8px; font-size: 10px; } } @media (max-height: 820px) { .ptd-split-panel--right .ptd-split-card-head { padding: 4px 8px; font-size: 10px; } .ptd-split-panel--right .ptd-split-card-body:has(.ptd-order-card) { padding: 2px 5px 3px; } } @media (max-height: 780px) { @supports not (container-type: size) { .ptd-order-card .top-price-qty-block, .ptd-split-panel--right .ptd-order-card .top-price-qty-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 6px; row-gap: 4px; } .ptd-order-card .top-price-qty-block .top-field--price, .ptd-split-panel--right .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, .ptd-split-panel--right .ptd-order-card .top-price-qty-block .top-field--qty { grid-column: 2; grid-row: 1; } .ptd-order-card .top-price-qty-block .top-pct-row--block, .ptd-split-panel--right .ptd-order-card .top-price-qty-block .top-pct-row--block { grid-column: 1 / -1; grid-row: 2; margin-top: 0; } .ptd-split-panel--right .ptd-order-card .top-panel-fields { overflow: hidden; } } } /* 매수·매도 제출 버튼: 실시간 차트 우측 패널(.top-submit--buy/sell)과 동일 */ .ptd-order-card .top-submit--buy { background: #ef5350; border-color: #ef5350; } .ptd-order-card .top-submit--buy:hover { background: #e53935; } .ptd-order-card .top-submit--sell { background: #2962ff; border-color: #2962ff; } .ptd-order-card .top-submit--sell:hover { background: #1e53e5; } /* 매수·매도 카드 헤더: 실시간 차트 .rsp-trade-card--buy/sell 과 동일 */ .ptd-split-panel--right .ptd-split-card--top { border-color: rgba(255, 107, 107, 0.35); background: linear-gradient(180deg, rgba(255, 107, 107, 0.08) 0%, var(--bg3) 48px); } .ptd-split-panel--right .ptd-split-card--bottom { border-color: rgba(77, 171, 247, 0.35); background: linear-gradient(180deg, rgba(77, 171, 247, 0.08) 0%, var(--bg3) 48px); } .ptd-split-panel--right .ptd-split-card--top .ptd-split-card-head { color: var(--up); } .ptd-split-panel--right .ptd-split-card--bottom .ptd-split-card-head { color: var(--down); } .ptd-ob { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .ptd-ob--fill { display: flex; flex-direction: column; flex: 1; min-height: 0; border-radius: 0; } .ptd-ob-head { padding: 8px 10px; font-size: 11px; font-weight: 700; color: var(--text2); border-bottom: 1px solid var(--sep); flex-shrink: 0; } .ptd-ob-body { padding: 2px 0; max-height: 220px; overflow-y: auto; } .ptd-ob--fill .ptd-ob-body { flex: 1; max-height: none; overflow-y: auto; } .ptd-ob-row { position: relative; display: flex; justify-content: space-between; width: 100%; padding: 3px 10px; border: none; background: transparent; color: inherit; font-size: 11px; cursor: pointer; text-align: left; } .ptd-ob-bar { position: absolute; top: 2px; bottom: 2px; right: 0; opacity: 0.18; pointer-events: none; } .ptd-ob-row--ask .ptd-ob-bar { background: #ef4444; } .ptd-ob-row--bid .ptd-ob-bar { background: #22c55e; left: 0; right: auto; } .ptd-ob-row--ask .ptd-ob-price { color: #ef4444; position: relative; z-index: 1; } .ptd-ob-row--bid .ptd-ob-price { color: #22c55e; position: relative; z-index: 1; } .ptd-ob-size { position: relative; z-index: 1; color: var(--text3); } .ptd-ob-mid { text-align: center; padding: 5px; font-size: 12px; font-weight: 800; color: var(--text); border-top: 1px solid var(--sep); border-bottom: 1px solid var(--sep); } .ptd-history-card { flex: 1; min-height: 0; display: flex; flex-direction: column; border: none; background: transparent; } .ptd-history-card--tab { flex: 1; min-height: 0; overflow: hidden; margin: 0; padding: 0; } .ptd-history-card--tab .ptd-table { flex: 1; min-height: 0; display: block; overflow-y: auto; } .bps-right-body > .ptd-right-body > .ptd-history-card--tab { margin: 0; padding: 0; } .ptd-history-card .ptd-table-wrap, .ptd-history-card .ptd-table { flex: 1; min-height: 0; } .ptd-tabs { display: flex; border-bottom: 1px solid var(--sep); flex-shrink: 0; } .ptd-tab { flex: 1; padding: 7px; border: none; background: transparent; color: var(--text3); font-size: 10px; cursor: pointer; } .ptd-tab.active { color: var(--accent); font-weight: 700; border-bottom: 2px solid var(--accent); } .ptd-table--compact { font-size: 9px; } .ptd-table--compact th, .ptd-table--compact td { padding: 5px 6px; } .ptd-trade-history { display: flex; flex-direction: column; min-height: 0; height: 100%; } .ptd-trade-history--fill { flex: 1; padding: 10px 12px; box-sizing: border-box; } .ptd-trade-history-empty { margin: 16px 0; text-align: center; font-size: 13px; } .ptd-trade-history-scroll { flex: 1; min-height: 0; overflow: auto; } .bps-page--vtd .ptd-trade-history--fill .vtd-trade-section { height: 100%; } .bps-page--vtd .ptd-trade-history--fill .ptd-trade-history-scroll { flex: 1; min-height: 0; } .ptd-table--trades th, .ptd-table--trades td { white-space: nowrap; } .ptd-row--click { cursor: pointer; } .ptd-row--click:hover td { background: color-mix(in srgb, var(--accent, #3f7ef5) 8%, transparent); } .ptd-source--auto { color: var(--accent, #3f7ef5); font-weight: 600; } .ptd-source--manual { color: var(--se-text-muted, var(--text3)); } .bps-page--vtd .ptd-right-body > .ptd-trade-history--fill { height: 100%; } /* 가상매매 — 실시간 차트와 동일한 호가 탭 레이아웃 */ .bps-page--vtd .ptd-right-body > .ptd-ob-stack--fill { flex: 1; min-height: 0; height: 100%; box-sizing: border-box; } .bps-page--vtd .ptd-right-body > .ptd-ob-stack--fill.rsp-ob-stack { padding: 10px 12px 12px; } .ptd-status { display: inline-block; padding: 2px 5px; border-radius: 4px; font-size: 9px; font-weight: 700; } .ptd-status--done { background: rgba(34,197,94,0.15); color: #22c55e; }