/* rem-converted: base 16px=1rem; keep 1px hairlines + font-size:16px iOS */
@font-face {
  font-family: "Pretendard Variable";
  src: url("/onchain-native/pretendard-trade.woff2?v=bit") format("woff2-variations"),
       url("/onchain-native/pretendard-trade.woff2?v=bit") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

.cp-futures-native {
  /* Bitget USDT-M terminal (bterm dark / futures-lc-chart.js) */
  --cpf-bg: #0B0E11;
  --cpf-panel: #0B0E11;
  --cpf-soft: #181A20;
  --cpf-ink: #EAECEF;
  --cpf-sub: #B7BDC6;
  --cpf-faint: #848E9C;
  --cpf-line: #2B3139;
  --cpf-line2: #363A45;
  --cpf-brand: #00E4C4;
  --cpf-brand-hover: #00c9ad;
  --cpf-focus: rgba(0, 228, 196, .22);
  /* ── 롱/숏·상승/하락 단일 색 (비트겟 실측값) ─────────────────────────
     [통일] 이전엔 4개 파트가 제각각 초록3·빨강4종을 썼다(주문 #26c99b/#f1493f,
       호가 #26C99B/#EA4239, 포지션 #01BC8D/#F7647E, 전역 #26C08B/#F0616D).
       오너의 비트겟 참조 캡처를 픽셀 샘플링 → 초록 #20C898, 빨강 #F04838(주황빛).
       이 두 값을 canonical 로 두고 모든 파트 변수가 이걸 참조한다(order/orderbook/positions.css). */
  --cpf-long: #20C898;
  --cpf-long-soft: rgba(32, 200, 152, .12);
  --cpf-short: #F04838;
  --cpf-short-soft: rgba(240, 72, 56, .12);
  --cpf-warning: #F5A623;
  --cp-font: "Pretendard Variable", "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  width: 100%;
  min-width: 0;
  color: var(--cpf-ink);
  background: var(--cpf-bg);
  font-family: var(--cp-font, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.cp-futures-native *,
.cp-futures-native *::before,
.cp-futures-native *::after { box-sizing: border-box; }

.cp-futures-native h1,
.cp-futures-native h2,
.cp-futures-native h3,
.cp-futures-native p,
.cp-futures-native dl,
.cp-futures-native dd,
.cp-futures-native fieldset { margin: 0; }

.cp-futures-native button,
.cp-futures-native input,
.cp-futures-native select {
  color: inherit;
  font: inherit;
}

.cp-futures-native button,
.cp-futures-native [type="submit"] { cursor: pointer; }
.cp-futures-native button:disabled,
.cp-futures-native input:disabled,
.cp-futures-native select:disabled { cursor: not-allowed; opacity: .5; }
.cp-futures-native [hidden] { display: none !important; }

.cp-futures-native :where(button, input, select, summary, a):focus-visible {
  outline: 0.125rem solid var(--cpf-brand);
  outline-offset: 0.125rem;
}

.cp-futures-native input,
.cp-futures-native select {
  width: 100%;
  min-height: 2.5rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--cpf-line2);
  border-radius: 0.25rem;
  background: var(--cpf-panel);
}

.cp-futures-native input:focus,
.cp-futures-native select:focus {
  border-color: var(--cpf-brand);
  outline: 0;
  box-shadow: 0 0 0 0.1875rem var(--cpf-focus);
}

.cp-futures-native input[aria-invalid="true"],
.cp-futures-native select[aria-invalid="true"] { border-color: var(--cpf-short); }

.cp-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.cpf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.625rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid #1d324d;
  background: #253b59;
  color: #fff;
}

.cpf-title-row { display: flex; align-items: center; gap: 0.5625rem; }
.cpf-title-row h1 { font-size: 1.0625rem; font-weight: 800; }
.cpf-header p { margin-top: 0.125rem; color: #c5d1de; font-size: 0.6875rem; }
.cpf-demo-badge {
  padding: 0.125rem 0.4375rem;
  border-radius: 0.1875rem;
  background: #f2b84b;
  color: #253240;
  font-size: 0.5625rem;
  font-weight: 900;
  letter-spacing: .04em;
}

.cpf-connection {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  color: #d5dee8;
}
.cpf-status-dot { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: #f2b84b; }
.cpf-connection.is-live .cpf-status-dot { background: #37c98b; }
.cpf-connection.is-offline .cpf-status-dot { background: #ff7386; }

.cpf-notices { background: var(--cpf-panel); }
.cpf-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1px;
  padding: 0.625rem 0.875rem;
  border: 1px solid transparent;
}
.cpf-alert strong,
.cpf-alert span { display: block; }
.cpf-alert span { margin-top: 1px; font-size: 0.6875rem; }
.cpf-alert-error { border-color: rgba(216, 59, 80, .28); background: var(--cpf-short-soft); color: var(--cpf-short); }
.cpf-alert-success { border-color: rgba(11, 153, 101, .28); background: var(--cpf-long-soft); color: var(--cpf-long); }
.cpf-alert-info { border-color: var(--cpf-line); background: var(--cpf-soft); }

.cpf-market-bar {
  display: flex;
  min-width: 0;
  align-items: center;
  min-height: 3.25rem;
  margin-top: 1px;
  border: 1px solid var(--cpf-line);
  background: var(--cpf-panel);
}

.cpf-trade-logo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  align-self: stretch;
  min-height: 3.25rem;
  padding: 0 0.875rem;
  border-right: 1px solid var(--cpf-line);
  text-decoration: none;
  color: var(--cpf-ink);
  font-size: 1.0625rem;
  font-weight: 900;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.cpf-trade-logo img {
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
  border-radius: 0.375rem;
}
.cpf-trade-logo:hover { color: var(--cpf-brand); }
.cpf-trade-logo:focus-visible {
  outline: 0.125rem solid var(--cpf-brand);
  outline-offset: -0.125rem;
}

.cpf-market-main {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  padding-left: 0.75rem;
  gap: 0;
}

.cpf-symbol-switch {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5625rem 0.75rem;
  border-right: 1px solid var(--cpf-line);
}
.cpf-symbol-switch button,
.cpf-intervals button,
.cpf-percent-buttons button {
  min-height: 2.125rem;
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--cpf-line);
  border-radius: 0.25rem;
  background: var(--cpf-panel);
  color: var(--cpf-sub);
  font-size: 0.6875rem;
  font-weight: 700;
}
.cpf-symbol-switch button[aria-pressed="true"],
.cpf-intervals button[aria-pressed="true"] {
  border-color: var(--cpf-brand);
  background: var(--cpf-brand);
  color: #fff;
}

.cpf-market-price {
  display: flex;
  min-width: 9.375rem;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  min-height: 3.25rem;
  padding: 0 0.875rem;
  border-right: 1px solid var(--cpf-line);
  font-variant-numeric: tabular-nums;
}
.cpf-market-price strong { font-size: 1.25rem; line-height: 1.15; }
.cpf-market-price span { margin-top: 0.125rem; color: var(--cpf-sub); font-size: 0.625rem; }
.cpf-market-price.is-up strong,
.cpf-market-price.is-up span { color: var(--cpf-long); }
.cpf-market-price.is-down strong,
.cpf-market-price.is-down span { color: var(--cpf-short); }

.cpf-market-stats {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: stretch;
  overflow-x: auto;
}
.cpf-market-stats > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 7rem;
  min-height: 3.25rem;
  padding: 0 0.875rem;
  border-right: 1px solid var(--cpf-line);
  font-variant-numeric: tabular-nums;
}
.cpf-market-stats dt { color: var(--cpf-faint); font-size: 0.625rem; }
.cpf-market-stats dd { margin-top: 0.125rem; color: var(--cpf-ink); font-weight: 650; white-space: nowrap; }

.cpf-terminal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15.625rem 20.625rem;
  gap: 1px;
  margin-top: 1px;
  background: var(--cpf-line);
}
.cpf-panel { border: 1px solid var(--cpf-line); background: var(--cpf-panel); }
.cpf-terminal-grid > .cpf-panel { border: 0; }
.cpf-panel-head {
  display: flex;
  min-height: 2.625rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--cpf-line);
  background: var(--cpf-soft);
}
.cpf-panel-head h2,
.cpf-panel-head h3 { font-size: 0.8125rem; font-weight: 800; }
.cpf-panel-head > span { color: var(--cpf-sub); font-size: 0.6875rem; }
.cpf-order-head-actions { display: flex; align-items: center; gap: 0.4375rem; color: var(--cpf-sub); font-size: 0.6875rem; }
.cpf-chart-head { align-items: center; }
.cpf-chart-tools { display: flex; min-width: 0; align-items: center; gap: 0.3125rem; }
.cpf-intervals { display: flex; gap: 0.1875rem; overflow-x: auto; }
.cpf-intervals button { min-height: 1.875rem; padding: 0.25rem 0.5rem; }
.cpf-indicator-select { display: flex; flex: 0 0 auto; align-items: center; gap: 0.25rem; }
.cpf-indicator-select > span { color: var(--cpf-faint); font-size: 0.5625rem; }
.cpf-indicator-select select { width: auto; min-height: 1.875rem; padding: 0.1875rem 1.25rem 0.1875rem 0.375rem; font-size: 0.625rem; }

.cpf-kc-wrap {
  position: relative;
  display: flex;
  min-width: 0;
  height: 100%;
  flex-direction: column;
  background: var(--cpf-panel);
}
.cpf-kc-wrap:fullscreen { width: 100vw; height: 100vh; background: var(--cpf-panel); }
.kc-bar {
  display: flex;
  min-width: 0;
  min-height: 2.375rem;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.125rem;
  padding: 0.1875rem 0.4375rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--cpf-line);
  background: var(--cpf-soft);
  scrollbar-width: none;
}
.kc-bar::-webkit-scrollbar { display: none; }
.kc-bar2 { border-top: 1px solid var(--cpf-line); border-bottom: 0; }
.kc-iv-quick { display: flex; flex: 0 0 auto; gap: 0.125rem; }
.kc-btn {
  min-height: 1.875rem;
  flex: 0 0 auto;
  padding: 0.25rem 0.4375rem;
  border: 0;
  border-radius: 0.1875rem;
  background: transparent;
  color: var(--cpf-sub);
  font-size: 0.625rem;
  font-weight: 750;
  white-space: nowrap;
}
.kc-btn:hover { background: var(--cpf-line); color: var(--cpf-ink); }
.kc-btn.on { background: var(--cpf-brand); color: #fff; }
.kc-sep { width: 1px; height: 1.0625rem; flex: 0 0 auto; margin: 0 0.1875rem; background: var(--cpf-line2); }
.kc-select-label { flex: 0 0 auto; }
.kc-select-label select {
  width: auto;
  min-height: 1.875rem;
  padding: 0.1875rem 1.375rem 0.1875rem 0.4375rem;
  border: 0;
  background: var(--cpf-panel);
  font-size: 0.625rem;
}
.kc-mobile-tools { display: none; }
#kc-chart { flex: 1 1 auto; min-width: 0; }
#kc-chart canvas { touch-action: none; }

.cpf-chart-wrap {
  position: relative;
  width: 100%;
  height: 31.25rem;
  min-height: 20rem;
  overflow: hidden;
  background: var(--cpf-panel);
}
.cpf-chart-wrap canvas { display: block; width: 100%; height: 100%; touch-action: pan-x pan-y pinch-zoom; }
.cpf-chart-wrap.has-draggable-lines canvas { touch-action: none; }
.cpf-chart-wrap.is-dragging canvas { cursor: ns-resize !important; }
.cpf-chart-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--cpf-faint);
  background: var(--cpf-panel);
  font-size: 0.75rem;
  pointer-events: none;
}
.cpf-chart-drag-hint {
  position: absolute;
  top: 2.8125rem;
  left: 0.5rem;
  z-index: 3;
  max-width: calc(100% - 4.75rem);
  padding: 0.1875rem 0.375rem;
  border: 1px solid var(--cpf-line);
  border-radius: 0.1875rem;
  background: rgba(255, 255, 255, .88);
  background: color-mix(in srgb, var(--cpf-panel) 88%, transparent);
  color: var(--cpf-sub);
  font-size: 0.5625rem;
  pointer-events: none;
}
.cpf-chart-wrap.is-dragging .cpf-chart-drag-hint {
  border-color: var(--cpf-brand);
  color: var(--cpf-brand);
  font-weight: 800;
}

.cpf-orderbook-panel { min-width: 0; }
.cpf-book-tabs { display: flex; align-items: center; gap: 0.5rem; }
.cpf-book-tabs button {
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0.625rem 0.75rem;
  border: 0;
  border-bottom: 0.125rem solid transparent;
  background: transparent;
  color: var(--cpf-faint);
  font-size: 0.75rem;
  font-weight: 800;
}
.cpf-book-tabs button.on { border-bottom-color: var(--cpf-brand); color: var(--cpf-ink); }
.cpf-orderbook-head,
.cpf-orderbook-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, .8fr);
  gap: 0.5rem;
  align-items: center;
  min-height: 1.4375rem;
  padding: 0.125rem 0.625rem;
  font-size: 0.625rem;
  font-variant-numeric: tabular-nums;
}
.cpf-orderbook-head {
  min-height: 1.8125rem;
  border-bottom: 1px solid var(--cpf-line);
  color: var(--cpf-faint);
}
.cpf-orderbook-head span:not(:first-child),
.cpf-orderbook-row span:not(:first-child) { text-align: right; }
.cpf-orderbook-side { padding: 0.25rem 0; }
.cpf-orderbook-row { position: relative; overflow: hidden; }
.cpf-orderbook-row::before {
  position: absolute;
  inset: 1px 0 1px auto;
  width: var(--cpf-depth, 0%);
  background: var(--cpf-long-soft);
  content: "";
}
.cpf-orderbook-asks .cpf-orderbook-row::before { background: var(--cpf-short-soft); }
.cpf-orderbook-row span { position: relative; z-index: 1; }
.cpf-orderbook-asks .cpf-orderbook-row span:first-child { color: var(--cpf-short); }
.cpf-orderbook-bids .cpf-orderbook-row span:first-child { color: var(--cpf-long); }
.cpf-orderbook-mid {
  display: flex;
  min-height: 2.6875rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.4375rem 0.625rem;
  border-top: 1px solid var(--cpf-line);
  border-bottom: 1px solid var(--cpf-line);
  background: var(--cpf-soft);
}
.cpf-orderbook-mid strong { font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.cpf-orderbook-mid span { color: var(--cpf-faint); font-size: 0.5625rem; }
.cpf-trades-head,
.cpf-trade-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) 3.625rem;
  gap: 0.4375rem;
  min-height: 1.5625rem;
  align-items: center;
  padding: 0.1875rem 0.5625rem;
  font-size: 0.625rem;
  font-variant-numeric: tabular-nums;
}
.cpf-trades-head { border-bottom: 1px solid var(--cpf-line); color: var(--cpf-faint); }
.cpf-trades-head span:not(:first-child),
.cpf-trade-row span:not(:first-child) { text-align: right; }
.cpf-trade-row.is-buy span:first-child { color: var(--cpf-long); }
.cpf-trade-row.is-sell span:first-child { color: var(--cpf-short); }
.cpf-trades-list { max-height: 31.25rem; overflow: hidden; }

.cpf-order-panel { position: relative; }
.cpf-order-panel > form { display: grid; gap: 0.8125rem; padding: 0.8125rem; }
.cpf-guest-cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.375rem 0.875rem;
  border-bottom: 1px solid var(--cpf-line);
  background: var(--cpf-soft);
  text-align: center;
}
.cpf-guest-cover span { margin-top: 0.1875rem; color: var(--cpf-sub); font-size: 0.6875rem; }

.cpf-segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0;
  border: 1px solid var(--cpf-line);
  border-radius: 0.25rem;
}
.cpf-segmented label { position: relative; min-width: 0; }
.cpf-segmented label + label { border-left: 1px solid var(--cpf-line); }
.cpf-segmented input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.cpf-segmented span {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  color: var(--cpf-sub);
  font-size: 0.6875rem;
  font-weight: 700;
  cursor: pointer;
}
.cpf-segmented input:checked + span { background: var(--cpf-brand); color: #fff; }
.cpf-segmented input:focus-visible + span { box-shadow: inset 0 0 0 0.125rem var(--cpf-brand); }

.cpf-field { min-width: 0; }
.cpf-field > label,
.cpf-label-row label { display: block; margin-bottom: 0.3125rem; font-size: 0.6875rem; font-weight: 700; }
.cpf-field small { display: block; margin-top: 0.3125rem; color: var(--cpf-faint); font-size: 0.625rem; }
.cpf-label-row { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; }
.cpf-label-row span { color: var(--cpf-sub); font-size: 0.625rem; }
.cpf-input-suffix { position: relative; }
.cpf-input-suffix > span,
.cpf-inline-button {
  position: absolute;
  top: 50%;
  right: 0.5625rem;
  transform: translateY(-50%);
  color: var(--cpf-sub);
  font-size: 0.625rem;
}
.cpf-input-suffix > input { padding-right: 3.75rem; text-align: right; font-variant-numeric: tabular-nums; }
.cpf-inline-button {
  min-height: 1.75rem;
  padding: 0.1875rem 0.3125rem;
  border: 0;
  background: transparent;
  color: var(--cpf-brand);
  font-weight: 700;
}
.cpf-range { min-height: 1.5rem !important; margin-top: 0.25rem; padding: 0 !important; accent-color: var(--cpf-brand); }
.cpf-percent-buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.25rem; margin-top: 0.3125rem; }
.cpf-percent-buttons button { min-height: 2.75rem; padding: 0.5rem 0.25rem; }
.cpf-percent-buttons button:hover { border-color: var(--cpf-brand); color: var(--cpf-brand); }
.cpf-leverage-presets { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.1875rem; margin-top: 0.3125rem; }
.cpf-leverage-presets button {
  min-height: 2.75rem;
  padding: 0.5rem 0.25rem;
  border: 1px solid var(--cpf-line);
  border-radius: 0.25rem;
  background: var(--cpf-soft);
  color: var(--cpf-sub);
  font-size: 0.6875rem;
  font-weight: 750;
}
.cpf-leverage-presets button.on { border-color: var(--cpf-brand); background: var(--cpf-brand-soft); color: var(--cpf-brand); }

.cpf-tpsl-entry {
  padding: 0.5625rem 0.625rem;
  border: 1px solid var(--cpf-line);
  border-radius: 0.25rem;
  background: var(--cpf-soft);
}
.cpf-tpsl-entry summary { color: var(--cpf-sub); font-size: 0.6875rem; font-weight: 700; cursor: pointer; }
.cpf-tpsl-entry[open] summary { margin-bottom: 0.625rem; color: var(--cpf-ink); }
.cpf-two-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; }
.cpf-order-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem 0.625rem; color: var(--cpf-sub); font-size: 0.625rem; }
.cpf-order-preview span:last-child { text-align: right; }
.cpf-order-preview b { color: var(--cpf-ink); }
.cpf-side-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 0.375rem; }

.cpf-button {
  display: inline-flex;
  min-height: 2.375rem;
  align-items: center;
  justify-content: center;
  padding: 0.4375rem 0.75rem;
  border: 1px solid var(--cpf-line2);
  border-radius: 0.25rem;
  background: var(--cpf-panel);
  color: var(--cpf-ink);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}
.cpf-button:hover { border-color: var(--cpf-brand); color: var(--cpf-brand); }
.cpf-button-primary { border-color: var(--cpf-brand); background: var(--cpf-brand); color: #fff; }
.cpf-button-primary:hover { border-color: var(--cpf-brand-hover); background: var(--cpf-brand-hover); color: #fff; }
.cpf-button-long { border-color: var(--cpf-long); background: var(--cpf-long); color: #fff; }
.cpf-button-short { border-color: var(--cpf-short); background: var(--cpf-short); color: #fff; }
.cpf-button-long:hover,
.cpf-button-short:hover { color: #fff; filter: brightness(.94); }
.cpf-button-danger-outline { border-color: var(--cpf-short); color: var(--cpf-short); }
.cpf-link-button {
  min-height: 1.75rem;
  padding: 0.1875rem 0.3125rem;
  border: 0;
  background: transparent;
  color: var(--cpf-brand);
  font-size: 0.625rem;
  font-weight: 700;
}

.cpf-account { border-top: 1px solid var(--cpf-line); }
.cpf-account .cpf-panel-head { min-height: 2.3125rem; padding-top: 0.375rem; padding-bottom: 0.375rem; }
.cpf-account dl { display: grid; gap: 0.25rem; padding: 0.6875rem 0.8125rem 0.4375rem; font-variant-numeric: tabular-nums; }
.cpf-account dl > div { display: flex; justify-content: space-between; gap: 0.625rem; }
.cpf-account dt { color: var(--cpf-sub); font-size: 0.625rem; }
.cpf-account dd { color: var(--cpf-ink); font-size: 0.6875rem; text-align: right; }
.cpf-account > .cpf-field { padding: 0.4375rem 0.8125rem 0.8125rem; }
.cpf-positive { color: var(--cpf-long) !important; }
.cpf-negative { color: var(--cpf-short) !important; }

.cpf-state-panel { margin-top: 1px; }
.cpf-state-panel [data-panel] { max-height: 52vh; overflow: auto; overscroll-behavior: auto; }
.cpf-state-tabs {
  display: flex;
  min-height: 2.75rem;
  align-items: end;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0 0.625rem;
  border-bottom: 1px solid var(--cpf-line);
  background: var(--cpf-soft);
}
.cpf-state-tabs [role="tablist"] { display: flex; min-width: 0; gap: 0.125rem; overflow-x: auto; }
.cpf-state-tabs [role="tab"] {
  min-height: 2.75rem;
  padding: 0.5rem 0.6875rem;
  border: 0;
  border-bottom: 0.125rem solid transparent;
  background: transparent;
  color: var(--cpf-sub);
  font-size: 0.6875rem;
  font-weight: 700;
  white-space: nowrap;
}
.cpf-state-tabs [role="tab"][aria-selected="true"] { border-bottom-color: var(--cpf-brand); color: var(--cpf-brand); }
.cpf-state-tabs [role="tab"] span { margin-left: 0.1875rem; }
.cpf-bulk-actions { display: flex; flex: 0 0 auto; gap: 0.3125rem; padding-bottom: 0.3125rem; }
.cpf-bulk-actions .cpf-button { min-height: 1.9375rem; padding: 0.25rem 0.5625rem; font-size: 0.625rem; }

.cpf-table-scroll { overflow-x: auto; }
.cpf-state-panel table { width: 100%; border-collapse: collapse; font-size: 0.6875rem; font-variant-numeric: tabular-nums; }
.cpf-state-panel th,
.cpf-state-panel td {
  padding: 0.5625rem 0.625rem;
  border-bottom: 1px solid var(--cpf-line);
  text-align: right;
  white-space: nowrap;
}
.cpf-state-panel th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--cpf-soft);
  color: var(--cpf-sub);
  font-size: 0.625rem;
  font-weight: 700;
}
.cpf-state-panel th:first-child,
.cpf-state-panel td:first-child { text-align: left; }
.cpf-state-panel tr:last-child td { border-bottom: 0; }
.cpf-state-panel tbody tr:hover { background: var(--cpf-soft); }
.cpf-table-actions { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; justify-content: flex-end; }
.cpf-table-actions button {
  min-height: 1.75rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--cpf-line);
  border-radius: 0.25rem;
  background: var(--cpf-panel);
  color: var(--cpf-sub);
  font-size: 0.625rem;
  font-weight: 700;
  white-space: nowrap;
}
.cpf-table-actions button:hover { border-color: var(--cpf-brand); color: var(--cpf-brand); }
.cpf-table-actions .is-danger { border-color: rgba(216, 59, 80, .45); color: var(--cpf-short); }
/* 청산% — 세그먼트처럼 붙여서 한 덩어리 */
.cpf-close-group { gap: 0; }
.cpf-close-group button { border-radius: 0; margin-left: -1px; min-width: 2.25rem; }
.cpf-close-group button:first-child { border-radius: 0.25rem 0 0 0.25rem; margin-left: 0; }
.cpf-close-group button:last-child { border-radius: 0 0.25rem 0.25rem 0; }
.cpf-close-group button:hover { z-index: 1; position: relative; }
.cpf-manage-group { gap: 0.25rem; }
.cpf-share-group { justify-content: flex-end; }
.cpf-share-btn { min-width: 2.75rem; }
.cpf-flash-btn { border-color: var(--cpf-short) !important; color: #fff !important; background: rgba(240, 97, 109, .22) !important; }
.cpf-flash-btn:hover { background: rgba(240, 97, 109, .36) !important; }
.cpf-state-panel td[data-label="청산"],
.cpf-state-panel td[data-label="관리"],
.cpf-state-panel td[data-label="공유"],
.cpf-state-panel th:nth-last-child(-n+3) { text-align: right; }
.cpf-history-reason {
  display: inline-flex;
  padding: 0.125rem 0.375rem;
  border-radius: 999rem;
  background: var(--cpf-soft);
  color: var(--cpf-sub);
  font-size: 0.5625rem;
  font-weight: 800;
}
.cpf-history-tp { background: var(--cpf-long-soft); color: var(--cpf-long); }
.cpf-history-sl,
.cpf-history-liquidated,
.cpf-history-liquidation { background: var(--cpf-short-soft); color: var(--cpf-short); }
.cpf-empty { padding: 1.75rem 0.75rem; color: var(--cpf-faint); font-size: 0.6875rem; text-align: center; }
.cpf-ranking-note {
  padding: 0.5625rem 0.75rem;
  border-bottom: 1px solid var(--cpf-line);
  color: var(--cpf-sub);
  font-size: 0.625rem;
}
.cpf-ranking-list { margin: 0; padding: 0; list-style: none; }
.cpf-ranking-list li {
  display: grid;
  /* [P3] 이전엔 이름칸이 1fr 로 무한확장 → 넓은 패널(1920)에서 이름과 전적 사이가 크게 벌어졌다.
     1fr 을 전적 뒤로 옮겨(=전적과 수익률 사이 단일 여백) 순위·이름·전적을 좌측에 묶고
     수익률을 우측에 붙인다(리더보드 표준). 이름은 12.5rem 상한 → 길면 ellipsis(줄725)가 먹는다. */
  grid-template-columns: 1.875rem minmax(3.75rem, 12.5rem) auto 1fr 4.75rem;
  gap: 0.625rem;
  align-items: center;
  padding: 0.5625rem 0.75rem;
  border-bottom: 1px solid var(--cpf-line);
  font-size: 0.6875rem;
}
/* 4번째 컬럼(1fr)은 시각적 스페이서 — 자식이 4개뿐이라 수익률<b>은 5번째 칸으로 간다.
   하지만 자동배치는 순서대로 채우므로 수익률을 명시적으로 마지막 칸에 둔다. */
.cpf-ranking-list li > b { grid-column: 5; }
.cpf-ranking-rank { color: var(--cpf-brand); text-align: center; }
.cpf-ranking-name { overflow: hidden; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.cpf-ranking-stats { color: var(--cpf-sub); }
.cpf-ranking-list li > b { text-align: right; }

.cpf-dialog {
  width: min(28.75rem, calc(100vw - 1.75rem));
  padding: 0;
  border: 1px solid var(--cpf-line);
  border-radius: 0.375rem;
  background: var(--cpf-panel);
  color: var(--cpf-ink);
  box-shadow: 0 1.25rem 3.75rem rgba(0, 0, 0, .28);
}
.cpf-dialog::backdrop { background: rgba(0, 0, 0, .58); }
.cpf-dialog form { padding: 0; }
.cpf-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6875rem 0.875rem;
  border-bottom: 1px solid var(--cpf-line);
  background: var(--cpf-soft);
}
.cpf-dialog-head h2 { font-size: 0.875rem; font-weight: 800; }
.cpf-dialog-close {
  width: 2.125rem;
  height: 2.125rem;
  border: 0;
  background: transparent;
  color: var(--cpf-sub);
  font-size: 1.375rem;
}
.cpf-dialog form > p { padding: 0.75rem 0.875rem 0; color: var(--cpf-sub); font-size: 0.6875rem; }
.cpf-dialog form > .cpf-two-fields { padding: 0.8125rem 0.875rem; }
.cpf-dialog-actions { display: flex; justify-content: flex-end; gap: 0.375rem; padding: 0.625rem 0.875rem 0.875rem; }
.cpf-tpsl-presets {
  display: grid;
  grid-template-columns: 1.75rem repeat(4, minmax(0, 1fr));
  gap: 0.3125rem;
  align-items: center;
  padding: 0 0.875rem 0.625rem;
}
.cpf-tpsl-presets span { color: var(--cpf-sub); font-size: 0.625rem; font-weight: 800; }
.cpf-tpsl-presets button {
  min-height: 1.8125rem;
  border: 1px solid var(--cpf-line2);
  border-radius: 0.25rem;
  background: var(--cpf-soft);
  color: var(--cpf-ink);
  font-size: 0.625rem;
  font-weight: 750;
}
.cpf-tpsl-preview { padding: 0 0.875rem; color: var(--cpf-sub); font-size: 0.625rem; }
.cpf-calculator-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
  padding: 0.8125rem 0.875rem;
}
.cpf-calculator-results { display: grid; gap: 0.4375rem; padding: 0 0.875rem 0.625rem; }
.cpf-calculator-results > div {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4375rem 0.5625rem;
  background: var(--cpf-soft);
  font-variant-numeric: tabular-nums;
}
.cpf-calculator-results dt { color: var(--cpf-sub); font-size: 0.6875rem; }
.cpf-calculator-results dd { font-weight: 800; }

@media (max-width: 68.75rem) {
  .cpf-terminal-grid { grid-template-columns: minmax(0, 1fr); }
  .cpf-orderbook-panel { display: none; }
  .cpf-order-panel > form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cpf-order-panel > form > .cpf-segmented,
  .cpf-order-panel > form > .cpf-tpsl-entry,
  .cpf-order-panel > form > .cpf-order-preview,
  .cpf-order-panel > form > .cpf-side-buttons { grid-column: 1 / -1; }
  .cpf-account dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.375rem 1.25rem; }
}


@media (max-width: 68.75rem) and (min-width: 40.0625rem) {
  .cpf-chart-wrap { height: min(52svh, 32.5rem); min-height: 22.5rem; }
}

@media (max-width: 40rem) {
  .cpf-terminal-grid { display: flex; flex-direction: column; }
  .cpf-chart-panel { order: 1; }
  .cpf-order-panel { order: 2; }
  .cpf-orderbook-panel { order: 3; max-height: 17.5rem; }
  .cpf-leverage-presets { grid-template-columns: repeat(3, 1fr); gap: 0.375rem; }
  .cp-futures-native { margin: 0; width: 100%; }
  .cpf-header { min-height: 3.125rem; align-items: center; padding: 0.4375rem 0.75rem; }
  .cpf-header p { display: none; }
  .cpf-market-bar { min-height: 3rem; flex-wrap: nowrap; align-items: center; }
  .cpf-trade-logo { min-height: 3rem; padding: 0 0.5rem; gap: 0.375rem; font-size: 0.9375rem; }
  .cpf-trade-logo img { width: 1.5rem; height: 1.5rem; }
  .cpf-market-main { padding-left: 0.125rem; min-width: 0; }
  .cpf-symbol-switch { width: auto; padding: 0.25rem 0.375rem; border-right: 1px solid var(--cpf-line); border-bottom: 0; }
  .cpf-symbol-switch button { min-height: 2.125rem; padding: 0.25rem 0.4375rem; }
  .cpf-market-price {
    width: auto; min-width: 0; flex: 1; align-items: flex-start; justify-content: center;
    min-height: 3rem; padding: 0 0.5rem; border-right: 0;
  }
  .cpf-market-price strong { font-size: 1.0625rem; }
  .cpf-market-price span { margin-top: 0; }
  .cpf-market-stats { display: none; }
  .cpf-chart-head { min-height: 2.5625rem; padding: 0.25rem 0.4375rem; overflow: hidden; }
  .cpf-chart-head h2 { display: none; }
  .cpf-chart-tools { width: 100%; }
  .cpf-intervals {
    min-width: 0; flex: 1; gap: 0.125rem; padding-bottom: 0;
    flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .cpf-intervals::-webkit-scrollbar { display: none; }
  .cpf-intervals button { min-width: 2.75rem; min-height: 2rem; padding: 0.25rem 0.4375rem; }
  .cpf-indicator-select > span { display: none; }
  .cpf-indicator-select select { max-width: 4.625rem; min-height: 2rem; }
  .kc-bar {
    width: 100%;
    min-height: 2.375rem;
    flex-wrap: nowrap;
    padding: 0.1875rem 0.3125rem;
    -webkit-overflow-scrolling: touch;
  }
  .kc-btn { min-height: 2rem; padding: 0.25rem 0.4375rem; }
  .kc-mobile-tools { display: inline-flex; }
  .kc-bar2 { display: none; }
  .kc-bar2.mobile-open { display: flex; }
  .cpf-chart-drag-hint { top: 2.75rem; }
  .cpf-chart-wrap { height: 60svh; min-height: 26.25rem; max-height: 40rem; }
  .cpf-orderbook-panel { display: block; }
  .cpf-orderbook-side { max-height: 7.5rem; overflow-y: auto; }
  .cpf-order-panel > form { display: grid; grid-template-columns: 1fr; }
  .cpf-order-panel > form > * { grid-column: auto !important; }
  .cpf-two-fields { grid-template-columns: 1fr; }
  .cpf-account dl { grid-template-columns: 1fr; }
  .cpf-state-tabs { align-items: stretch; flex-direction: column; gap: 0; padding: 0; }
  .cpf-state-tabs [role="tablist"] { padding: 0 0.4375rem; }
  .cpf-state-tabs [role="tab"] { min-height: 2.75rem; }
  .cpf-bulk-actions { justify-content: flex-end; padding: 0.375rem 0.5625rem; border-top: 1px solid var(--cpf-line); }
  .cpf-bulk-actions .cpf-button { min-height: 2.375rem; }
  .cpf-table-scroll { overflow: visible; }
  .cpf-state-panel table,
  .cpf-state-panel thead,
  .cpf-state-panel tbody,
  .cpf-state-panel tr,
  .cpf-state-panel td { display: block; }
  .cpf-state-panel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cpf-state-panel tr { padding: 0.5625rem 0.6875rem; border-bottom: 1px solid var(--cpf-line); }
  .cpf-state-panel td {
    display: flex;
    min-height: 1.875rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.25rem 0;
    border: 0;
    text-align: right !important;
    white-space: normal;
  }
  .cpf-state-panel td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: var(--cpf-faint);
    font-size: 0.625rem;
    font-weight: 650;
    text-align: left;
  }
  .cpf-state-panel td:first-child { font-size: 0.8125rem; font-weight: 800; }
  .cpf-state-panel [data-panel] { max-height: 46svh; }
  .cpf-table-actions { flex-wrap: wrap; justify-content: flex-end; }
  .cpf-table-actions button { min-height: 2.25rem; }
  .cpf-ranking-list li { grid-template-columns: 1.625rem minmax(5rem, 1fr) 4.125rem; gap: 0.4375rem; }
  .cpf-ranking-stats { display: none; }
  .cpf-dialog form > .cpf-two-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .cp-futures-native * { scroll-behavior: auto !important; transition: none !important; }
}

/* ══ trade UI 개편(trade7): 헤더/페어드롭다운/시간봉편집/지표통합/세로툴바 ══ */
.cpf-header-left { display: flex; align-items: center; gap: 0.625rem; min-width: 0; }
.cpf-header-meta { min-width: 0; }
.cpf-header-meta p { margin: 0; color: #c5d1de; font-size: 0.6875rem; }
.cpf-back {
  flex: 0 0 auto; width: 2rem; height: 2rem; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.25); border-radius: 0.4375rem; background: rgba(255,255,255,.08);
  color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.cpf-back:hover { background: rgba(255,255,255,.18); }

/* 페어 드롭다운 */
.cpf-pair {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  align-self: stretch;
  border-right: 1px solid var(--cpf-line);
  padding: 0 0.875rem 0 0;
}
.cpf-pair-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 3.25rem;
  padding: 0 0.25rem 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cpf-ink);
  font-weight: 700;
  font-size: 0.9375rem;
  cursor: pointer;
}
.cpf-pair-btn:hover { color: var(--cpf-brand); }
.cpf-pair-caret { color: var(--cpf-faint); font-size: 0.625rem; }
.cpf-pair-item {
  display: block; width: 100%; text-align: left; padding: 0.5625rem 0.75rem; border: 0; background: transparent;
  color: var(--cpf-ink); font-weight: 700; font-size: 0.8125rem; cursor: pointer; border-radius: 0.375rem;
}
.cpf-pair-item:hover { background: var(--cpf-soft); }
.cpf-pair-item.on { color: var(--cpf-brand); background: var(--cpf-soft); }

/* 공통 팝오버 (kc-bar overflow 회피 위해 fixed) */
.cpf-pop {
  position: fixed; z-index: 60; min-width: 9.5rem; max-width: min(92vw, 23.75rem);
  max-height: 72vh; overflow-y: auto; padding: 0.375rem;
  border: 1px solid var(--cpf-line2); border-radius: 0.625rem; background: var(--cpf-panel);
  box-shadow: 0 0.75rem 1.875rem rgba(15,23,42,.20);
}
.cpf-pop[hidden] { display: none; }
.cpf-pop-title { padding: 0.375rem 0.5rem 0.25rem; color: var(--cpf-faint); font-size: 0.625rem; font-weight: 800; letter-spacing: .03em; }
.cpf-pop-title small { color: var(--cpf-faint); font-weight: 600; }

/* 시간봉 편집 */
.kc-iv-wrap, .kc-ind-wrap { position: relative; flex: 0 0 auto; }
.kc-iv-edit-btn { border: 1px dashed var(--cpf-line2) !important; }
.kc-iv-grp { padding: 0.125rem 0.25rem 0.375rem; }
.kc-iv-grp-l { display: block; padding: 0.25rem 0.25rem 0.125rem; color: var(--cpf-faint); font-size: 0.625rem; font-weight: 700; }
.kc-iv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.25rem; }
.kc-iv-item { display: flex; align-items: center; border: 1px solid var(--cpf-line); border-radius: 0.375rem; overflow: hidden; }
.kc-iv-pick { flex: 1 1 auto; padding: 0.4375rem 0.375rem; border: 0; background: var(--cpf-panel); color: var(--cpf-ink); font-size: 0.6875rem; font-weight: 700; cursor: pointer; }
.kc-iv-pick.on { background: var(--cpf-brand); color: #fff; }
.kc-star { flex: 0 0 auto; padding: 0.4375rem 0.375rem; border: 0; border-left: 1px solid var(--cpf-line); background: var(--cpf-soft); color: var(--cpf-faint); font-size: 0.75rem; cursor: pointer; }
.kc-star.on { color: #f2b84b; }

/* 지표 통합 */
.kc-ind-badge {
  display: inline-grid; place-items: center; min-width: 0.9375rem; height: 0.9375rem; margin-left: 0.3125rem; padding: 0 0.25rem;
  border-radius: 0.5rem; background: var(--cpf-brand); color: #fff; font-size: 0.5625rem; font-weight: 800;
}
.kc-ind-btn.on .kc-ind-badge { background: #f2b84b; color: #253240; }
.kc-ind-pop { min-width: 14.75rem; }
.kc-ind-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.1875rem; padding: 0 0.25rem 0.375rem; }
.kc-ind-item { display: flex; align-items: center; gap: 0.125rem; }
.kc-ind-tog {
  flex: 1 1 auto; display: flex; align-items: center; gap: 0.25rem; padding: 0.4375rem 0.5rem;
  border: 1px solid var(--cpf-line); border-radius: 0.375rem; background: var(--cpf-panel);
  color: var(--cpf-ink); font-size: 0.6875rem; font-weight: 700; cursor: pointer; text-align: left;
}
.kc-ind-tog.on { border-color: var(--cpf-brand); background: var(--cpf-brand); color: #fff; }
.kc-ind-check { width: 0.625rem; color: inherit; font-size: 0.625rem; }
.kc-ind-edit { flex: 0 0 auto; width: 1.625rem; padding: 0.375rem 0; border: 1px solid var(--cpf-line); border-radius: 0.375rem; background: var(--cpf-soft); color: var(--cpf-sub); cursor: pointer; }
.kc-ind-edit:hover { color: var(--cpf-ink); }

.kc-spacer { flex: 1 1 auto; min-width: 0.375rem; }

/* 세로 그리기 툴바 (데스크탑) */
.kc-chart-row { display: flex; align-items: stretch; min-width: 0; }
.kc-drawbar-v {
  flex: 0 0 auto; width: 2.375rem; display: flex; flex-direction: column; align-items: center; gap: 0.125rem;
  padding: 0.25rem 0.1875rem; overflow-y: auto; border-right: 1px solid var(--cpf-line); background: var(--cpf-soft);
  scrollbar-width: none;
}
.kc-drawbar-v::-webkit-scrollbar { display: none; }
.kc-vbtn {
  width: 1.875rem; height: 1.875rem; flex: 0 0 auto; display: grid; place-items: center;
  border: 0; border-radius: 0.375rem; background: transparent; color: var(--cpf-sub);
  font-size: 0.875rem; line-height: 1; cursor: pointer;
}
.kc-vbtn:hover { background: var(--cpf-line); color: var(--cpf-ink); }
.kc-vbtn.on { background: var(--cpf-brand); color: #fff; }
.kc-vsep { width: 1.25rem; height: 1px; flex: 0 0 auto; margin: 0.1875rem 0; background: var(--cpf-line2); }

/* 그룹 버튼(플라이아웃 있음) — 우하단 캐럿 */
.kc-vbtn.kc-vgroup { position: relative; }
.kc-vico { line-height: 1; }
.kc-vcaret {
  position: absolute; right: 0.125rem; bottom: 1px; font-size: 0.5rem; line-height: 1;
  color: var(--cpf-sub); opacity: .7;
}
.kc-vbtn.kc-vgroup.on .kc-vcaret, .kc-vbtn.kc-vgroup:hover .kc-vcaret { color: inherit; opacity: 1; }
.kc-vbtn.kc-vgroup.open { background: var(--cpf-line); color: var(--cpf-ink); }
.kc-vbtn[data-kc-magnet].strong { box-shadow: inset 0 0 0 0.125rem var(--cpf-brand); }
.kc-vbtn.kc-vdanger:hover { background: rgba(240,80,80,.16); color: #ff6b6b; }

/* 그리기 도구 플라이아웃(그룹 버튼 오른쪽, fixed 배치) */
.kc-vflyout {
  position: fixed; z-index: 60; min-width: 9.875rem; max-width: 13.75rem;
  padding: 0.3125rem; border: 1px solid var(--cpf-line); border-radius: 0.625rem;
  background: var(--cpf-card); box-shadow: 0 0.625rem 1.875rem rgba(0,0,0,.28);
}
.kc-vflyout[hidden] { display: none; }
.kc-vflyout-head {
  padding: 0.1875rem 0.5rem 0.375rem; font-size: 0.6875rem; font-weight: 800; color: var(--cpf-sub);
  letter-spacing: .02em;
}
.kc-vflyout-item {
  display: flex; align-items: center; gap: 0.5625rem; width: 100%;
  padding: 0.5rem 0.5625rem; border: 0; border-radius: 0.4375rem; background: transparent;
  color: var(--cpf-ink); font-size: 0.78125rem; font-weight: 600; cursor: pointer; text-align: left;
}
.kc-vflyout-item:hover { background: var(--cpf-line); }
.kc-vflyout-ico {
  flex: 0 0 auto; width: 1.25rem; text-align: center; color: var(--cpf-sub); font-size: 0.875rem;
}
.kc-vflyout-item:hover .kc-vflyout-ico { color: var(--cpf-ink); }

/* 데스크탑 기본: 세로툴바 노출, 가로 draw bar 숨김 */
.kc-bar2 { display: none; }
.cpf-chart-drag-hint { left: 2.875rem; }


@media (max-width: 40rem) {
  .kc-drawbar-v { display: none; }
  .cpf-chart-drag-hint { left: 0.5rem; }
  .cpf-pair-btn { min-height: 3rem; padding: 0 0.125rem 0 0; border: 0; font-size: 0.8125rem; }
  .cpf-back { width: 1.875rem; height: 1.875rem; font-size: 1.375rem; }
}

.cpf-back-inline {
  flex: 0 0 auto;
  align-self: center;
  margin: 0 0.25rem 0 0.125rem;
  width: 2.125rem;
  height: 2.125rem;
  border: 1px solid var(--cpf-line);
  border-radius: 0.25rem;
  background: var(--cpf-soft);
  color: var(--cpf-ink);
  font-size: 1.375rem;
  line-height: 1;
}
.cpf-market-bar-end {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  align-self: stretch;
  gap: 0.625rem;
  margin-left: auto;
  min-height: 3.25rem;
  padding: 0 0.75rem;
  border-left: 1px solid var(--cpf-line);
}
.cpf-demo-chip {
  padding: 0.1875rem 0.5rem;
  border-radius: 0.1875rem;
  background: var(--cpf-brand-soft, rgba(36,73,111,.12));
  color: var(--cpf-brand);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: .03em;
}
.cpf-connection-inline {
  color: var(--cpf-sub);
  font-size: 0.6875rem;
  white-space: nowrap;
}
.cpf-guest-cover .cpf-guest-login { margin-top: 0.75rem; min-width: 8.75rem; }

@media (min-width: 68.8125rem) {
  .cpf-back-inline { display: none; }
  .cpf-terminal-grid { align-items: stretch; }
  .cpf-chart-panel,
  .cpf-orderbook-panel,
  .cpf-order-panel { display: flex; flex-direction: column; min-height: 0; }
  .cpf-kc-wrap { flex: 1 1 auto; min-height: 35rem; }
  .kc-chart-row { flex: 1 1 auto; min-height: 0; }
  .cpf-chart-wrap {
    height: auto;
    flex: 1 1 auto;
    min-height: 30rem;
  }
}

/* 모의거래 차트 — Bitget USDT-M 터미널 톤 */
.cp-futures-native .cpf-kc-wrap,
.cp-futures-native .cpf-chart-wrap,
.cp-futures-native #kc-chart {
  background: #0B0E11;
}
.cp-futures-native .kc-bar,
.cp-futures-native .kc-bar2 {
  border-color: #2B3139;
  /* ── 스크롤 단서 (Lea Verou 그림자 기법) ─────────────────────────────
     [사고] 툴바가 폰 폭보다 넓어 우측 버튼(격자·로그·전체화면·설정·배치)이
       가로스크롤 너머에 숨는데, 스크롤바가 없어(scrollbar-width:none) 유저가
       존재 자체를 몰랐다. → 넘칠 때만 우측·좌측에 그림자를 띄워 "더 있음"을 신호.
     local(가장자리 덮개) + scroll(그림자) 조합 → 스크롤 위치 따라 자동 노출/은닉.
     넘치지 않으면 그림자 안 뜸(태블릿·데스크톱 무해). 툴바색 #1E2329 유지. */
  background:
    linear-gradient(to right, #1E2329 40%, rgba(30,35,41,0)) left center / 1.875rem 100% no-repeat local,
    linear-gradient(to left,  #1E2329 40%, rgba(30,35,41,0)) right center / 1.875rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.38), transparent) left center / 0.9375rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.38), transparent) right center / 0.9375rem 100% no-repeat scroll,
    #1E2329;
}
.cp-futures-native .kc-btn {
  color: #848E9C;
  border-radius: 0.125rem;
}
.cp-futures-native .kc-btn:hover {
  background: #2B3139;
  color: #EAECEF;
}
.cp-futures-native .kc-btn.on {
  background: #2B3139;
  color: #EAECEF;
  box-shadow: inset 0 0 0 1px #363A45;
}
.cp-futures-native .kc-sep { background: #363A45; }
.cp-futures-native .kc-select-label select {
  background: #181A20;
  color: #B7BDC6;
}
.cp-futures-native .cpf-chart-head {
  background: #1E2329;
  border-bottom: 1px solid #2B3139;
}
.cp-futures-native .cpf-chart-head h2 { color: #EAECEF; }
.cp-futures-native .cpf-intervals button.on {
  background: #2B3139;
  color: #EAECEF;
}

.cp-futures-native .cpf-pair-btn {
  min-height: 3.25rem;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.cp-futures-native .cpf-pair-btn:hover { color: var(--cpf-brand); }
.cp-futures-native .cpf-pair-caret { font-size: 0.6875rem; margin-left: 0.125rem; }

/* Bitget 차트 툴바·드로잉바 */
.cp-futures-native .kc-bar {
  min-height: 2.125rem;
  padding: 0 0.5rem;
  gap: 1px;
}
.cp-futures-native .kc-btn {
  min-height: 1.625rem;
  padding: 0.125rem 0.4375rem;
  border-radius: 0.125rem;
  color: #848E9C;
  font-size: 0.6875rem;
  font-weight: 600;
}
.cp-futures-native .kc-btn:hover { background: #2B3139; color: #EAECEF; }
.cp-futures-native .kc-btn.on {
  background: #2B3139;
  color: #EAECEF;
  box-shadow: inset 0 0 0 1px #363A45;
}
.cp-futures-native .kc-drawbar-v {
  width: 2rem;
  padding: 0.25rem 0.125rem;
  background: #181A20;
  border-right: 1px solid #2B3139;
}
.cp-futures-native .kc-vbtn {
  width: 1.625rem;
  min-height: 1.625rem;
  padding: 0;
  border-radius: 0.125rem;
  color: #848E9C;
  font-size: 0.75rem;
}
.cp-futures-native .kc-vbtn:hover { background: #2B3139; color: #EAECEF; }
.cp-futures-native .kc-vbtn.on { background: #2B3139; color: #EAECEF; }
.cp-futures-native .cpf-chart-drag-hint {
  background: rgba(24, 26, 32, .92);
  border: 1px solid #2B3139;
  color: #848E9C;
  font-size: 0.625rem;
}


.cp-futures-native .cpf-market-bar { min-height: 3.25rem; }
@media (max-width: 40rem) {
  .cp-futures-native .cpf-market-bar { min-height: 3rem; }
  .cp-futures-native .cpf-trade-logo { min-height: 3rem; }
  .cp-futures-native .cpf-pair-btn { min-height: 3rem; font-size: 0.875rem; }
  .cp-futures-native .cpf-market-price { min-height: 3rem; }
}


/* PnL share card dialog */
.cpf-share-dialog { width: min(27.5rem, calc(100vw - 1.5rem)); }
.cpf-share-preview-wrap {
  margin: 0.75rem 0.875rem 0;
  border-radius: 0.625rem;
  overflow: hidden;
  border: 1px solid var(--cpf-line);
  background: #0b0e11;
}
.cpf-share-preview-wrap img { display: block; width: 100%; height: auto; }
.cpf-share-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0.875rem 0;
  font-size: 0.75rem;
  color: var(--cpf-sub);
  cursor: pointer;
  user-select: none;
}
.cpf-share-note {
  margin: 0.5rem 0.875rem 0 !important;
  padding: 0 !important;
  font-size: 0.625rem !important;
  color: var(--cpf-faint, var(--cpf-sub)) !important;
}

/* 포지션 액션 칸 간격 — 청산/관리/공유 확실히 분리 */
.cpf-state-panel td[data-label="청산"],
.cpf-state-panel th:nth-last-child(3) {
  padding-left: 1.125rem;
  padding-right: 1rem;
  min-width: 10.5rem;
}
.cpf-state-panel td[data-label="관리"],
.cpf-state-panel th:nth-last-child(2) {
  padding-left: 1rem;
  padding-right: 1rem;
  min-width: 12.5rem;
  border-left: 1px solid var(--cpf-line);
  box-shadow: inset 0.5rem 0 0 0 transparent;
}
.cpf-state-panel td[data-label="공유"],
.cpf-state-panel th:last-child {
  padding-left: 1rem;
  padding-right: 0.875rem;
  min-width: 4.5rem;
  border-left: 1px solid var(--cpf-line);
  position: sticky;
  right: 0;
  background: var(--cpf-panel);
  z-index: 2;
}
.cpf-state-panel thead th:last-child { background: var(--cpf-soft); z-index: 3; }
@media (max-width: 60rem) {
  .cpf-state-panel td[data-label="청산"],
  .cpf-state-panel td[data-label="관리"],
  .cpf-state-panel td[data-label="공유"] {
    border-left: 0;
    padding-left: 0;
    min-width: 0;
    width: 100%;
    justify-content: flex-start;
  }
  .cpf-state-panel td[data-label="공유"] { position: static; }
  .cpf-share-group { justify-content: flex-start; }
}


/* ══ cpf-pos-desktop-card-v1 : 포지션 탭 데스크탑 2줄 카드(얇은 단일행 개선) ══ */
@media (min-width: 68.8125rem) {
  #cpf-panel-positions .cpf-table-scroll { overflow: visible; }
  #cpf-panel-positions thead { display: none; }
  #cpf-panel-positions tbody { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.625rem 0.75rem; }
  #cpf-panel-positions tbody tr {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0.6875rem 1rem;
    align-items: center;
    padding: 0.8125rem 1rem;
    background: var(--cpf-soft);
    border: 1px solid var(--cpf-line);
    border-radius: 0.625rem;
  }
  #cpf-panel-positions tbody tr:hover { border-color: var(--cpf-line2); }
  #cpf-panel-positions tbody td {
    display: flex; flex-direction: column; gap: 0.1875rem;
    border: 0; padding: 0; min-width: 0;
    text-align: left !important; white-space: nowrap;
    font-size: 0.8125rem;
  }
  #cpf-panel-positions tbody td::before {
    content: attr(data-label);
    color: var(--cpf-faint); font-size: 0.625rem; font-weight: 650;
  }
  #cpf-panel-positions tbody td[data-label="PNL / ROE"] strong { font-size: 0.9375rem; }
  #cpf-panel-positions tbody td[data-label="청산"] { grid-column: span 3; }
  #cpf-panel-positions tbody td[data-label="관리"] { grid-column: span 3; }
  #cpf-panel-positions tbody td[data-label="청산"] .cpf-table-actions,
  #cpf-panel-positions tbody td[data-label="관리"] .cpf-table-actions,
  #cpf-panel-positions tbody td[data-label="공유"] .cpf-table-actions { justify-content: flex-start; }
}


/* ══ cpf-panel-resize-v1 : 패널 드래그 크기조절(데스크탑 전용) ══ */
.cpf-resize-x, .cpf-resize-y, .cpf-resize-xy { display: none; }
body.cpf-resizing, body.cpf-resizing * { user-select: none !important; }
body.cpf-resizing { cursor: grabbing; }
@media (min-width: 68.8125rem) {
  .cpf-terminal-grid {
    grid-template-columns: minmax(0, 1fr) var(--cpf-col-book, 15.625rem) var(--cpf-col-order, 20.625rem);
  }
  .cpf-terminal-grid { height: var(--cpf-chart-h, max(22.5rem, calc(100vh - 21.25rem))); overflow: hidden; }
  .cpf-terminal-grid > .cpf-panel { min-height: 0; }
  .cpf-kc-wrap { min-height: 0; }
  .cpf-chart-wrap { height: auto; flex: 1 1 auto; min-height: 0; }
  .cpf-orderbook-panel, .cpf-order-panel { overflow-y: auto; overflow-x: hidden; overscroll-behavior: auto; }
  .cpf-panel { position: relative; }
  .cpf-resize-x, .cpf-resize-y, .cpf-resize-xy {
    display: block; position: absolute; z-index: 6;
    background: transparent; transition: background .12s; touch-action: none;
  }
  .cpf-resize-x { top: 0; bottom: 0; left: -0.25rem; width: 0.5625rem; cursor: col-resize; }
  .cpf-resize-y { left: 0; right: 0; bottom: 0; height: 0.5625rem; cursor: row-resize; }
  .cpf-resize-xy { left: 0; bottom: 0; width: 1rem; height: 1rem; cursor: nesw-resize; z-index: 7; }
  .cpf-resize-x::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0.25rem; width: 1px; background: transparent; transition: background .12s; }
  .cpf-resize-y::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.25rem; height: 1px; background: transparent; transition: background .12s; }
  .cpf-resize-xy::after { content: ""; position: absolute; left: 0.1875rem; bottom: 0.1875rem; width: 0.5625rem; height: 0.5625rem; border-left: 0.125rem solid transparent; border-bottom: 0.125rem solid transparent; transition: border-color .12s; }
  .cpf-resize-x:hover, .cpf-resize-x.dragging, .cpf-resize-y:hover, .cpf-resize-y.dragging, .cpf-resize-xy:hover, .cpf-resize-xy.dragging { background: rgba(0, 228, 196, .16); }
  .cpf-resize-x:hover::after, .cpf-resize-x.dragging::after, .cpf-resize-y:hover::after, .cpf-resize-y.dragging::after { background: var(--cpf-brand); }
  .cpf-resize-xy:hover::after, .cpf-resize-xy.dragging::after { border-color: var(--cpf-brand); }
}


/* ══════════ cpf-tile-v1 : 도킹/타일 레이아웃 ══════════ */
.cpf-tile-grip, .cpf-tile-splitter, .cpf-tile-heightbar { display: none; }
.cpf-tile-ghost {
  display: block; position: fixed; z-index: 9999; transform: translate(0.75rem, 0.75rem);
  padding: 0.375rem 0.875rem; border-radius: 0.5rem; pointer-events: none;
  background: var(--cpf-brand); color: #04211d; font-weight: 800; font-size: 0.8125rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,.45);
}
.cpf-tile-zone {
  display: none; position: fixed; z-index: 9998; pointer-events: none;
  background: rgba(0, 228, 196, .20); border: 0.125rem solid var(--cpf-brand); border-radius: 0.375rem;
  transition: left .07s, top .07s, width .07s, height .07s;
}
body.cpf-tile-dragging, body.cpf-tile-dragging * { cursor: grabbing !important; user-select: none !important; }

@media (min-width: 68.8125rem) {
  .cpf-terminal-grid.cpf-tiled { display: flex !important; position: relative; gap: 0; }
  .cpf-tile-split { display: flex; min-width: 0; min-height: 0; gap: 0; background: var(--cpf-line); }
  .cpf-terminal-grid.cpf-tiled > .cpf-panel,
  .cpf-tile-split > .cpf-panel { min-width: 8.75rem; min-height: 7.5rem; overflow: hidden; }
  .cpf-terminal-grid.cpf-tiled .cpf-orderbook-panel,
  .cpf-terminal-grid.cpf-tiled .cpf-order-panel { overflow-y: auto; overflow-x: hidden; overscroll-behavior: auto; }
  /* 도킹으로 주문패널이 슬롯보다 커지면 겹치지 말고 스크롤 — `.cpf-tile-split > .cpf-panel{overflow:hidden}`
     을 덮어쓴다. (.cpf-o > * 의 flex:0 0 auto 와 함께 = 수축→겹침 대신 스크롤) */
  .cpf-tile-split .cpf-order-panel,
  .cpf-tile-split .cpf-orderbook-panel { overflow-y: auto !important; overflow-x: hidden !important; }

  .cpf-tile-splitter { display: block; position: relative; z-index: 5; flex: 0 0 0.375rem; background: var(--cpf-line); }
  .cpf-tile-splitter--v { cursor: col-resize; width: 0.375rem; align-self: stretch; }
  .cpf-tile-splitter--h { cursor: row-resize; height: 0.375rem; }
  .cpf-tile-splitter::after { content: ""; position: absolute; inset: 0; transition: background .12s; }
  .cpf-tile-splitter--v::after { left: -0.125rem; right: -0.125rem; }
  .cpf-tile-splitter--h::after { top: -0.125rem; bottom: -0.125rem; }
  .cpf-tile-splitter:hover::after, .cpf-tile-splitter.dragging::after { background: var(--cpf-brand); }

  .cpf-tile-grip {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 1.375rem; height: 1.5rem; margin-right: 0.375rem; padding: 0;
    border: 1px solid var(--cpf-line); border-radius: 0.3125rem;
    background: var(--cpf-soft); color: var(--cpf-sub);
    cursor: grab; font-size: 0.75rem; line-height: 1; touch-action: none;
  }
  .cpf-tile-grip:hover { color: var(--cpf-brand); border-color: var(--cpf-brand); }
  .cpf-tile-grip:active { cursor: grabbing; }

  .cpf-tile-heightbar {
    display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 0.4375rem;
    z-index: 6; cursor: row-resize; touch-action: none;
  }
  .cpf-tile-heightbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0.125rem; background: transparent; transition: background .12s; }
  .cpf-tile-heightbar:hover::after, .cpf-tile-heightbar.dragging::after { background: var(--cpf-brand); }
}

/* 모바일: 타일 무력화 → 세로 스택 */
@media (max-width: 68.75rem) {
  .cpf-terminal-grid.cpf-tiled, .cpf-tile-split { display: flex !important; flex-direction: column !important; }
  .cpf-terminal-grid.cpf-tiled > .cpf-panel, .cpf-tile-split > .cpf-panel,
  .cpf-terminal-grid.cpf-tiled > .cpf-tile-split, .cpf-tile-split > .cpf-tile-split {
    flex: none !important; width: auto !important; min-width: 0 !important;
  }
  .cpf-tile-splitter, .cpf-tile-grip, .cpf-tile-heightbar { display: none !important; }
}


/* ══════════ cpf-tile-corner-v1 : 패널 모서리 리사이즈 그립 ══════════ */
.cpf-tile-corner-layer, .cpf-tile-corner { display: none; }
@media (min-width: 68.8125rem) {
  .cpf-tile-corner-layer { display: block; position: fixed; inset: 0; z-index: 15; pointer-events: none; }
  .cpf-tile-corner {
    display: block; position: fixed; width: 1.0625rem; height: 1.0625rem; z-index: 16;
    pointer-events: auto; cursor: nwse-resize; touch-action: none;
  }
  .cpf-tile-corner::after {
    content: ""; position: absolute; right: 0.1875rem; bottom: 0.1875rem; width: 0.5625rem; height: 0.5625rem;
    border-right: 0.125rem solid var(--cpf-sub); border-bottom: 0.125rem solid var(--cpf-sub);
    border-bottom-right-radius: 0.1875rem; opacity: .5; transition: border-color .12s, opacity .12s;
  }
  .cpf-tile-corner:hover::after, .cpf-tile-corner.dragging::after { border-color: var(--cpf-brand); opacity: 1; }
  /* 프레임감: 모서리 hover시 패널 테두리 살짝 강조는 생략(과함) — 그립만 */
}


/* ══════════ cpf-pos-fixes-v1 : 스크롤핏 + 포지션카드 정렬/색 ══════════ */
@media (min-width: 68.8125rem) {
  /* (1) 앱셸은 페이지스크롤 불가 → 상태패널이 남는높이 채우고 내부스크롤(포지션 아랫줄 잘림 방지) */
  .cp-futures-native { height: 100%; display: flex; flex-direction: column; min-height: 0; }
  .cpf-notices, .cpf-market-bar { flex: 0 0 auto; }
  .cpf-terminal-grid { flex: 0 0 auto; max-height: calc(100vh - 10.625rem); }
  .cpf-state-panel { flex: 1 1 auto; min-height: 5.75rem; display: flex; flex-direction: column; overflow: hidden; }
  .cpf-state-tabs { flex: 0 0 auto; }
  .cpf-state-panel [data-panel] { flex: 1 1 auto; min-height: 0; max-height: none !important; overflow: auto; }

  /* (2) 포지션 카드: 공유/청산/관리 칸 배경·sticky 누수 제거(색 통일) */
  #cpf-panel-positions tbody td[data-label="공유"],
  #cpf-panel-positions tbody td[data-label="청산"],
  #cpf-panel-positions tbody td[data-label="관리"] {
    background: transparent !important; position: static !important;
    min-width: 0 !important; border-left: 0 !important; box-shadow: none !important; padding: 0 !important;
  }
  /* (3) 값 좌측정렬(TP/SL 우측밀림 방지) */
  #cpf-panel-positions tbody td { align-items: flex-start; }
  #cpf-panel-positions tbody td .cpf-link-button { padding-left: 0; text-align: left; }
}


/* ══════════ cpf-pos-card-v2 : 제목바 + 2줄정렬 카드 ══════════ */
#cpf-panel-positions tbody td.cpf-pos-title {
  display: flex; flex-direction: row; align-items: center; gap: 0.5rem; justify-content: flex-start;
}
#cpf-panel-positions tbody td.cpf-pos-title::before { display: none; }
.cpf-pos-sym { font-size: 0.9375rem; font-weight: 800; color: var(--cpf-ink); white-space: nowrap; }
.cpf-pos-badge { flex: 0 0 auto; padding: 0.125rem 0.5rem; border-radius: 0.3125rem; font-size: 0.6875rem; font-weight: 800; line-height: 1.6; white-space: nowrap; }
.cpf-pos-badge.is-long { color: var(--cpf-long); background: var(--cpf-long-soft); }
.cpf-pos-badge.is-short { color: var(--cpf-short); background: var(--cpf-short-soft); }
.cpf-pos-badge.is-lev { color: var(--cpf-sub); background: var(--cpf-soft); border: 1px solid var(--cpf-line); }
#cpf-panel-positions tbody td.cpf-pos-title .cpf-share-btn { margin-left: auto; }
@media (min-width: 68.8125rem) {
  #cpf-panel-positions tbody tr { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem 1.125rem; }
  #cpf-panel-positions tbody td.cpf-pos-title {
    grid-column: 1 / -1; padding-bottom: 0.6875rem; margin-bottom: 1px; border-bottom: 1px solid var(--cpf-line);
  }
  #cpf-panel-positions tbody td[data-label="PNL / ROE"] { grid-column: span 2; }
  #cpf-panel-positions tbody td[data-label="청산"] { grid-column: 1 / 3; }
  #cpf-panel-positions tbody td[data-label="관리"] { grid-column: 3 / 5; }
}


/* cpf-pos-card-v2 공유버튼 스타일(제목바로 이동하며 기본버튼 스타일 소실 보정) */
#cpf-panel-positions tbody td.cpf-pos-title .cpf-share-btn {
  min-height: 1.875rem; padding: 0.3125rem 0.875rem; margin-left: auto;
  border: 1px solid var(--cpf-line); border-radius: 0.375rem;
  background: var(--cpf-panel); color: var(--cpf-sub);
  font-size: 0.6875rem; font-weight: 700; white-space: nowrap;
}
#cpf-panel-positions tbody td.cpf-pos-title .cpf-share-btn:hover { border-color: var(--cpf-brand); color: var(--cpf-brand); }

/* cpf-pos-card-compact : 제목바 추가로 커진 카드 1개가 상태패널에 다 보이게 */
@media (min-width: 68.8125rem) {
  #cpf-panel-positions tbody { padding: 0.5rem 0.75rem; gap: 0.5rem; }
  #cpf-panel-positions tbody tr { gap: 0.5625rem 1rem; padding: 0.6875rem 0.9375rem; }
  #cpf-panel-positions tbody td.cpf-pos-title { padding-bottom: 0.5625rem; }
}


/* ═══════════ 비트겟 1:1 — 호가창 ═══════════ */
/* ============================================================================
   호가창 (.cpf-orderbook-panel) — 비트겟 1:1
   모든 셀렉터는 .cpf-orderbook-panel 스코프 안에만 존재한다. 전역 오염 없음.

   실측 출처: ref/bitget-loggedin.png 픽셀 샘플링 (parts/orderbook-NOTES.md 참고)
     행 피치 1.25rem · 본문 0.75rem · 패널바탕 #070808
     매도 #EA4239 · 매수 #26C99B · 깊이바 알파 0.10 · 보조텍스트 #8E8E92
   ========================================================================== */

.cpf-orderbook-panel {
  /* 비트겟 실측 토큰 (이 패널 안에서만 유효) */
  --ob-bg:        #070808;
  --ob-sell:      var(--cpf-short);   /* 단일 색으로 통일 (구 #EA4239) */
  --ob-buy:       var(--cpf-long);    /* 단일 색으로 통일 (구 #26C99B) */
  --ob-sell-soft: rgba(240, 72, 56, .10);   /* 깊이바 (구 #EA4239) */
  --ob-buy-soft:  rgba(32, 200, 152, .10);  /* 깊이바 (구 #26C99B) */
  --ob-muted:     #8E8E92;
  --ob-dim:       #57585C;
  --ob-ink:       #F4F5F7;
  --ob-line:      #27282B;
  --ob-hover:     #17181A;

  --ob-row-h:  1.25rem;   /* 실측: 행 피치 정확히 1.25rem */
  --ob-mid-h:  2.25rem;   /* 실측: 마지막 매도행 → 중앙가 2.25rem */
  --ob-font:   0.75rem;

  min-width: 0;
  background: var(--ob-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;                /* 스크롤 금지 */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── 스크롤 금지: futures.css 의 기존 규칙들을 무력화 ────────────────────── */
.cpf-orderbook-panel,
.cpf-orderbook-panel .cpf-ob,
.cpf-orderbook-panel .cpf-ob-book,
.cpf-orderbook-panel .cpf-ob-ladder,
.cpf-orderbook-panel .cpf-ob-side,
.cpf-orderbook-panel .cpf-ob-trades,
.cpf-orderbook-panel .cpf-ob-trades-list {
  overflow: hidden !important;
  max-height: none !important;
  overscroll-behavior: auto;
}

.cpf-orderbook-panel [hidden] { display: none !important; }

/* ── 패널 헤드 (호가/체결 탭). 타일 드래그 핸들이라 .cpf-panel-head 유지 ──── */
.cpf-orderbook-panel .cpf-ob-head {
  flex: 0 0 auto;
  border-bottom: 1px solid var(--ob-line);
}
.cpf-orderbook-panel .cpf-book-tabs button.on {
  border-bottom-color: var(--cpf-brand);
  color: var(--ob-ink);
}

.cpf-orderbook-panel .cpf-ob {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ── 상단 바: 뷰모드 아이콘 3개 + 호가묶음 셀렉트 ─────────────────────────── */
.cpf-orderbook-panel .cpf-ob-bar {
  flex: 0 0 auto;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.5rem 0 0.375rem;
}

.cpf-orderbook-panel .cpf-ob-views { display: flex; align-items: center; gap: 0.125rem; }

.cpf-orderbook-panel .cpf-ob-view {
  width: 1.375rem; height: 1.375rem;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0.1875rem;
  background: transparent;
  cursor: pointer;
  opacity: .55;
  transition: opacity .12s, background .12s;
}
.cpf-orderbook-panel .cpf-ob-view:hover { opacity: .85; background: var(--ob-hover); }
.cpf-orderbook-panel .cpf-ob-view.on    { opacity: 1;   background: var(--ob-hover); }
.cpf-orderbook-panel .cpf-ob-view svg   { width: 0.875rem; height: 0.875rem; display: block; }
.cpf-orderbook-panel .cpf-ob-view svg .s { fill: var(--ob-sell); }
.cpf-orderbook-panel .cpf-ob-view svg .b { fill: var(--ob-buy); }
.cpf-orderbook-panel .cpf-ob-view:focus-visible { outline: 1px solid var(--cpf-brand); outline-offset: 1px; }

.cpf-orderbook-panel .cpf-ob-group { display: inline-flex; align-items: center; }
.cpf-orderbook-panel .cpf-ob-group select {
  /* futures.css:70-77 의 `.cp-futures-native select { min-height:2.5rem; padding:0.5rem 0.625rem; width:100% }`
     를 전부 덮어야 한다. height 만 주면 min-height 가 이겨서 2.5rem 로 터진다 → 컬럼헤더와 겹침. */
  width: auto;
  min-height: 1.375rem;
  height: 1.375rem;
  padding: 0 1.125rem 0 0.5rem;
  border: 0;
  border-radius: 0.1875rem;
  background: var(--ob-hover)
    /* ▾ 캐럿 */
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 4l3 3 3-3' fill='none' stroke='%238E8E92' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 0.3125rem center / 0.5625rem 0.5625rem;
  color: var(--ob-ink);
  font: 500 0.6875rem/1.375rem inherit;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.cpf-orderbook-panel .cpf-ob-group select:focus-visible { outline: 1px solid var(--cpf-brand); outline-offset: 1px; }

/* ── 호가 본문 ──────────────────────────────────────────────────────────── */
.cpf-orderbook-panel .cpf-ob-book {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* 3열 그리드: 가격(좌) / 수량(우) / 누적(우) — 캡처와 동일 */
.cpf-orderbook-panel .cpf-ob-cols,
.cpf-orderbook-panel .cpf-orderbook-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 0;
  padding: 0 0.5rem;
  font-size: var(--ob-font);
  line-height: 1;
}
.cpf-orderbook-panel .cpf-ob-cols > span:not(:first-child),
.cpf-orderbook-panel .cpf-orderbook-row > span:not(:first-child) { text-align: right; }

.cpf-orderbook-panel .cpf-ob-cols {
  flex: 0 0 auto;
  /* futures.css `.cpf-orderbook-head{min-height:1.8125rem}` / `.cpf-trades-head{min-height:1.5625rem}` 무력화 */
  min-height: var(--ob-row-h);
  height: var(--ob-row-h);
  color: var(--ob-dim);
  font-size: 0.6875rem;
  border-bottom: 0;
}
.cpf-orderbook-panel .cpf-ob-cols b { font-weight: inherit; }

/* 사다리: 매도N행 + 중앙블록 + 매수N행. 행 수는 JS 가 패널 높이에서 계산 */
.cpf-orderbook-panel .cpf-ob-ladder {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.cpf-orderbook-panel .cpf-ob-side {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;                 /* futures.css 의 padding:0.25rem 0 제거 */
}
/* 매도는 아래(중앙가)에 붙고, 매수는 위(중앙가)에 붙는다 → 남는 여백은 바깥쪽으로 */
.cpf-orderbook-panel .cpf-ob-asks { justify-content: flex-end; }
.cpf-orderbook-panel .cpf-ob-bids { justify-content: flex-start; }

/* 한쪽만 보기 모드 */
.cpf-orderbook-panel .cpf-ob[data-view="asks"] .cpf-ob-bids,
.cpf-orderbook-panel .cpf-ob[data-view="bids"] .cpf-ob-asks { display: none; }

/* ── 호가 행 ────────────────────────────────────────────────────────────── */
.cpf-orderbook-panel .cpf-orderbook-row {
  position: relative;
  flex: 0 0 var(--ob-row-h);
  /* 🔴 futures.css:414 `.cpf-orderbook-row{min-height:1.4375rem}` 가 height 를 이긴다.
     반드시 같이 덮어야 1.25rem 피치가 나온다. 안 덮으면 행이 소리없이 잘려나간다. */
  min-height: var(--ob-row-h);
  max-height: var(--ob-row-h);
  height: var(--ob-row-h);
  overflow: hidden;
  cursor: pointer;
  color: var(--ob-ink);
  -webkit-user-select: none;
  user-select: none;
}
.cpf-orderbook-panel .cpf-orderbook-row:hover { background: var(--ob-hover); }

/* 누적 비례 깊이바 — 우측정렬(오른쪽 끝에서 왼쪽으로 자란다) */
.cpf-orderbook-panel .cpf-orderbook-row::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: var(--cpf-depth, 0%);
  background: var(--ob-buy-soft);
  pointer-events: none;
  transition: width .12s linear;
}
.cpf-orderbook-panel .cpf-ob-asks .cpf-orderbook-row::before { background: var(--ob-sell-soft); }

.cpf-orderbook-panel .cpf-orderbook-row > span { position: relative; z-index: 1; }

/* 가격 컬럼만 색이 들어간다. 수량/누적은 밝은 회색 (캡처 확인) */
.cpf-orderbook-panel .cpf-ob-asks .cpf-orderbook-row > span:first-child { color: var(--ob-sell); }
.cpf-orderbook-panel .cpf-ob-bids .cpf-orderbook-row > span:first-child { color: var(--ob-buy); }

/* ── 중앙 현재가 블록 ───────────────────────────────────────────────────── */
.cpf-orderbook-panel .cpf-ob-mid {
  flex: 0 0 var(--ob-mid-h);
  height: var(--ob-mid-h);
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0 0.5rem;
}
.cpf-orderbook-panel .cpf-ob-last {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.125rem;
  color: var(--ob-ink);
}
.cpf-orderbook-panel .cpf-ob-arrow { width: 0.625rem; height: 0.625rem; flex: 0 0 auto; opacity: 0; }
.cpf-orderbook-panel .cpf-ob-arrow path { fill: currentColor; }

.cpf-orderbook-panel .cpf-ob-mid.is-up   .cpf-ob-last  { color: var(--ob-buy); }
.cpf-orderbook-panel .cpf-ob-mid.is-up   .cpf-ob-arrow { color: var(--ob-buy);  opacity: 1; }
.cpf-orderbook-panel .cpf-ob-mid.is-down .cpf-ob-last  { color: var(--ob-sell); }
.cpf-orderbook-panel .cpf-ob-mid.is-down .cpf-ob-arrow { color: var(--ob-sell); opacity: 1; transform: rotate(180deg); }

/* 마크 가격 (캡처의 점선밑줄 회색 보조표시) */
.cpf-orderbook-panel .cpf-ob-mark {
  font-size: 0.75rem;
  color: var(--ob-muted);
  border-bottom: 1px dashed var(--ob-dim);
  line-height: 1.25;
  cursor: help;
}

/* ── 하단 매수/매도 비율 바 ─────────────────────────────────────────────── */
.cpf-orderbook-panel .cpf-ob-ratio {
  flex: 0 0 auto;
  height: 1.625rem;
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0 0.5rem;
  font-size: 0.6875rem;
  line-height: 1;
}
.cpf-orderbook-panel .cpf-ob-ratio-tag { font-weight: 600; }
.cpf-orderbook-panel .cpf-ob-ratio-pct { min-width: 1.625rem; }
.cpf-orderbook-panel .cpf-ob-ratio-tag.is-buy,
.cpf-orderbook-panel .cpf-ob-ratio-pct.is-buy  { color: var(--ob-buy); }
.cpf-orderbook-panel .cpf-ob-ratio-tag.is-sell,
.cpf-orderbook-panel .cpf-ob-ratio-pct.is-sell { color: var(--ob-sell); }
.cpf-orderbook-panel .cpf-ob-ratio-pct.is-sell { text-align: right; }

.cpf-orderbook-panel .cpf-ob-ratio-track {
  flex: 1 1 auto;
  min-width: 0;
  height: 0.25rem;
  display: flex;
  align-items: stretch;
  border-radius: 0.125rem;
  overflow: hidden;
}
/* 비트겟: 초록이 왼쪽에서, 빨강이 오른쪽에서. 사선 경계 없이 맞붙는다 */
.cpf-orderbook-panel .cpf-ob-ratio-buy {
  flex: 0 0 auto;
  background: var(--ob-buy);
  transition: width .2s ease;
}
.cpf-orderbook-panel .cpf-ob-ratio-sell {
  flex: 1 1 auto;
  background: var(--ob-sell);
}

/* ── 체결 탭 ───────────────────────────────────────────────────────────── */
.cpf-orderbook-panel .cpf-ob-trades {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.cpf-orderbook-panel .cpf-ob-trades-list { flex: 1 1 auto; min-height: 0; }
.cpf-orderbook-panel .cpf-ob-trades-list > * {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  /* 🔴 futures.css:451-459 `.cpf-trade-row{min-height:1.5625rem}` 를 같이 덮어야 한다 (호가 행과 동일 함정) */
  min-height: var(--ob-row-h);
  max-height: var(--ob-row-h);
  height: var(--ob-row-h);
  overflow: hidden;
  gap: 0;                      /* futures.css 의 gap:0.4375rem 제거 */
  padding: 0 0.5rem;
  font-size: var(--ob-font);
  line-height: 1;
}
.cpf-orderbook-panel .cpf-ob-trades-list > * > span:not(:first-child) { text-align: right; }

/* 셀 내용이 아무리 길어도 줄바꿈으로 행 높이를 밀어올리지 못하게 한다 (스크롤 금지 보험) */
.cpf-orderbook-panel .cpf-orderbook-row > span,
.cpf-orderbook-panel .cpf-ob-cols > span,
.cpf-orderbook-panel .cpf-ob-trades-list > * > span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ── 반응형 ────────────────────────────────────────────────────────────────
   ⚠️ 함정: 위쪽 base 규칙의 `.cpf-orderbook-panel { display: flex }` 는
   futures.css:791-793 의 `@media (max-width:68.75rem){ .cpf-orderbook-panel{display:none} }` 와
   특이도가 같은데 이 파일이 뒤에 로드되므로 **숨김을 이겨버린다.**
   (미디어쿼리는 특이도를 올리지 않는다.) 그래서 숨김 구간을 여기서 다시 선언한다.
   안 하면 56.25rem 에서 높이 10.6875rem·행 0개짜리 깨진 조각이 뜬다.

   구간 정리 (futures.css 의도를 그대로 따른다):
     · ≥68.8125rem  → 3열 그리드, 호가창 표시 (base 규칙)
     · 641~1100 → 그리드가 1열로 접힘 → 호가창 숨김
     · ≤40rem   → 모바일에서 다시 표시 (futures.css:854 `display:block`, order:3)
   -------------------------------------------------------------------------- */
@media (max-width: 68.75rem) and (min-width: 40.0625rem) {
  .cpf-orderbook-panel { display: none; }
}

@media (max-width: 40rem) {
  /* futures.css 는 여기서 display:block + max-height:17.5rem + `.cpf-orderbook-side{overflow-y:auto}`
     (=스크롤) 로 처리했다. 스크롤은 금지이므로 flex 컬럼 + **명시 높이**로 바꾼다.
     명시 높이가 없으면 `.cpf-ob-side{flex:1 1 0}` 의 flex-basis 0 때문에
     매도/매수 영역이 높이 0 으로 붕괴한다 (패널 높이가 내용에서 나오므로 순환). */
  .cpf-orderbook-panel { display: flex; height: 27.5rem; }
  .cpf-orderbook-panel .cpf-ob-side { max-height: none !important; overflow: hidden !important; }
}

@media (prefers-reduced-motion: reduce) {
  .cpf-orderbook-panel .cpf-orderbook-row::before,
  .cpf-orderbook-panel .cpf-ob-ratio-buy { transition: none; }
}


/* ═══════════ 비트겟 1:1 — 포지션탭 ═══════════ */
/* ============================================================================
   parts/positions.css — 포지션 탭 (Bitget 1:1)
   스코프: 전부 `.cp-futures-native .cpf-state-panel` 하위. 전역 오염 없음.
   색/치수는 ref/bitget-snapshot.html computed style 실측값.
   ========================================================================== */

.cp-futures-native .cpf-state-panel {
  /* Bitget dark tokens (실측) */
  --bg-t1: #F4F5F7;   /* primary text        */
  --bg-t2: #8E8E92;   /* secondary / label   */
  --bg-t3: #57585C;   /* tertiary / disabled */
  --bg-s0: #0B0E11;   /* panel base — 니어블랙 전체통일 */
  --bg-s1: #1F2023;   /* card surface        */
  --bg-s2: #27282B;   /* input / button      */
  --bg-s3: #38393D;   /* border / hover      */
  --bg-up: var(--cpf-long);    /* 단일 색으로 통일 (구 #01BC8D) */
  --bg-up2: var(--cpf-long);   /* 구 #26C99B */
  --bg-dn: var(--cpf-short);   /* 단일 색으로 통일 (구 #F7647E 분홍 → 비트겟 주황빨강) */
  --bg-dn2: var(--cpf-short);  /* 구 #FA97A3 */
  --bg-acc: #03AAC7;  /* link teal           */
  --bg-warn: #FFA963;
}

/* ── 탭 줄 (Positions / Open orders / …) : 0.875rem, 활성 = 흰색 + 0.1875rem 밑줄 ───── */
.cp-futures-native .cpf-state-tabs {
  align-items: center;
  padding: 0 0.75rem;
  border-bottom: 1px solid var(--bg-s3);
  background: var(--bg-s0);
}
.cp-futures-native .cpf-state-tabs [role="tablist"] { gap: 1.25rem; overflow: visible; }
.cp-futures-native .cpf-state-tabs [role="tab"] {
  position: relative;
  min-height: 2.5rem;
  padding: 0.75rem 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--bg-t2);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1rem;
  white-space: nowrap;
}
.cp-futures-native .cpf-state-tabs [role="tab"]:hover { color: var(--bg-t1); }
.cp-futures-native .cpf-state-tabs [role="tab"][aria-selected="true"] {
  color: var(--bg-t1);
  font-weight: 600;
}
.cp-futures-native .cpf-state-tabs [role="tab"][aria-selected="true"]::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 0.1875rem;
  border-radius: 1px;
  background: var(--bg-t1);
}
.cp-futures-native .cpf-state-tabs [role="tab"] span {
  margin-left: 0.125rem;
  color: var(--bg-t2);
  font-weight: 400;
}
.cp-futures-native .cpf-state-tabs [role="tab"] span::before { content: "("; }
.cp-futures-native .cpf-state-tabs [role="tab"] span::after { content: ")"; }

/* ── 상태 패널 4탭: 목록은 스크롤한다 ─────────────────────────────────────
   ★ 정정. 이전 규칙("스크롤 금지")을 이 패널에 적용한 건 과잉이었다.
     오너가 스크롤을 빼라고 한 대상은 **호가창·주문창**이지 상태 패널이 아니다.
     스크롤을 막아놓으니 패널에 안 들어가는 포지션 카드가 잘려나가 **보유 포지션이
     통째로 안 보이는** 사고가 났다. (노트북 실뷰포트 40rem, 카드 11.625rem × 2장)
     돈이 걸린 데이터를 화면에서 감추는 것보다 스크롤바 하나가 백배 낫고,
     비트겟도 이 목록은 스크롤한다.

   구조: 패널(hidden) > 툴바(고정) + 목록(스크롤). 툴바는 따라 흐르지 않는다.
   높이 제약의 출처 (실측):
     · ≥68.8125rem : futures.css:1424~1431 — 앱셸이 100vh flex, `.cpf-state-panel{flex:1;overflow:hidden}`
     · <68.8125rem : futures.css:610 의 `max-height:52vh` (모바일은 46svh) */
.cp-futures-native .cpf-state-panel [data-panel] {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;          /* 패널 자체는 안 흐른다. 안쪽 목록만 흐른다. */
  overscroll-behavior: auto;
}
.cp-futures-native .cpf-state-panel .cpf-table-scroll { overflow-y: auto; min-height: 0; }

/* 실제로 흐르는 영역들 */
.cp-futures-native .cpf-pos-body,
.cp-futures-native .cpf-state-panel .cpf-table-scroll,
.cp-futures-native .cpf-state-panel [data-role="ranking-list"] {
  overflow-y: auto;
  overscroll-behavior: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2, #2a2f3a) transparent;
}
.cp-futures-native .cpf-pos-body::-webkit-scrollbar,
.cp-futures-native .cpf-state-panel .cpf-table-scroll::-webkit-scrollbar,
.cp-futures-native .cpf-state-panel [data-role="ranking-list"]::-webkit-scrollbar { width: 0.375rem; }
.cp-futures-native .cpf-pos-body::-webkit-scrollbar-thumb,
.cp-futures-native .cpf-state-panel .cpf-table-scroll::-webkit-scrollbar-thumb,
.cp-futures-native .cpf-state-panel [data-role="ranking-list"]::-webkit-scrollbar-thumb {
  background: var(--line-2, #2a2f3a); border-radius: 0.1875rem;
}
.cp-futures-native .cpf-pos-body::-webkit-scrollbar-track,
.cp-futures-native .cpf-state-panel .cpf-table-scroll::-webkit-scrollbar-track,
.cp-futures-native .cpf-state-panel [data-role="ranking-list"]::-webkit-scrollbar-track { background: transparent; }

/* "외 N건 (패널을 넓히면 표시됩니다)" 안내는 더 이상 쓰지 않는다 — 아무것도 숨기지 않으므로. */
.cp-futures-native .cpf-pos-more,
.cp-futures-native .cpf-state-panel [data-role$="-more"] { display: none !important; }

.cp-futures-native .cpf-state-panel [data-panel="positions"] {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--bg-s0);
}

/* 넘쳐서 접은 행 안내 (미체결/거래내역/랭킹) */
.cp-futures-native .cpf-state-more {
  margin: 0;
  padding: 0.375rem 0.75rem 0.5rem;
  color: var(--bg-t2);
  font-size: 0.6875rem;
  text-align: center;
}
.cp-futures-native .cpf-state-more[hidden] { display: none; }

/* ── 서브 툴바 ──────────────────────────────────────────────────────────── */
.cp-futures-native .cpf-pos-toolbar {
  display: flex;
  flex: 0 0 auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem 0.75rem;
}
.cp-futures-native .cpf-pos-toolbar[hidden] { display: none; }
.cp-futures-native .cpf-pos-toolbar-gap { flex: 1 1 auto; }

.cp-futures-native .cpf-pos-seg {
  display: inline-flex;
  padding: 0.125rem;
  border-radius: 0.375rem;
  background: var(--bg-s2);
}
.cp-futures-native .cpf-pos-seg button {
  min-height: 1.5rem;
  padding: 0 0.75rem;
  border: 0;
  border-radius: 0.25rem;
  background: none;
  color: var(--bg-t2);
  font-size: 0.75rem;
  font-weight: 500;
}
.cp-futures-native .cpf-pos-seg button.on {
  background: var(--bg-s3);
  color: var(--bg-t1);
}

.cp-futures-native .cpf-pos-menu { position: relative; }
.cp-futures-native .cpf-pos-menu-btn {
  display: inline-flex;
  gap: 0.1875rem;
  align-items: center;
  min-height: 1.75rem;
  padding: 0 0.625rem;
  border: 1px solid var(--bg-s3);
  border-radius: 0.375rem;
  background: transparent;
  color: var(--bg-t2);
  font-size: 0.75rem;
}
.cp-futures-native .cpf-pos-menu-btn b { color: var(--bg-t1); font-weight: 500; }
.cp-futures-native .cpf-pos-menu-btn:hover { border-color: var(--bg-t3); }
.cp-futures-native .cpf-pos-menu-btn .cpf-caret { color: var(--bg-t2); font-size: 0.5625rem; }
.cp-futures-native .cpf-pos-pop {
  position: absolute;
  z-index: 30;
  top: calc(100% + 0.25rem);
  left: 0;
  display: flex;
  flex-direction: column;
  min-width: 7.5rem;
  padding: 0.25rem;
  border: 1px solid var(--bg-s3);
  border-radius: 0.5rem;
  background: var(--bg-s1);
  box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / .45);
}
.cp-futures-native .cpf-pos-pop[hidden] { display: none; }
.cp-futures-native .cpf-pos-pop button {
  padding: 0.4375rem 0.625rem;
  border: 0;
  border-radius: 0.3125rem;
  background: none;
  color: var(--bg-t1);
  font-size: 0.75rem;
  text-align: left;
}
.cp-futures-native .cpf-pos-pop button:hover { background: var(--bg-s2); }

.cp-futures-native .cpf-pos-auto-lite {
  padding: 0.1875rem 0.4375rem;
  border-radius: 0.25rem;
  background: var(--bg-s2);
  color: var(--bg-t2);
  font-size: 0.625rem;
}
.cp-futures-native .cpf-pos-closeall.cpf-button {
  min-height: 1.75rem;
  padding: 0 0.75rem;
  border: 1px solid var(--bg-s3);
  border-radius: 0.375rem;
  background: var(--bg-s2);
  color: var(--bg-t1);
  font-size: 0.75rem;
  font-weight: 500;
}
.cp-futures-native .cpf-pos-closeall.cpf-button:hover {
  border-color: var(--bg-dn);
  color: var(--bg-dn);
}

/* ── 카드 컨테이너 ─────────────────────────────────────────────────────── */
.cp-futures-native .cpf-pos-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;          /* ★ 카드가 넘치면 흐른다. 절대 잘라내지 않는다. */
  padding: 0 0.75rem 0.625rem;
}

/* ── 상세 카드 : 비트겟은 패널 배경 위에 "평평하게" 얹는다 (카드 상자 없음) ── */
.cp-futures-native .cpf-pos-card {
  border: 0;
  border-radius: 0;
  background: transparent;
}
.cp-futures-native .cpf-pos-card + .cpf-pos-card {
  margin-top: 0;
  border-top: 1px solid var(--bg-s3);   /* 여러 개일 때 구분선만 */
}
.cp-futures-native .cpf-pos-card.is-risk { box-shadow: inset 0.1875rem 0 0 var(--bg-dn); }

.cp-futures-native .cpf-pos-card-head {
  display: flex;
  gap: 0.3125rem;
  align-items: center;
  padding: 0.4375rem 0 0.3125rem;
  font-size: 0.8125rem;
}
.cp-futures-native .cpf-pos-coin {
  display: inline-grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--bg-warn);
  color: #17181A;
  font-size: 0.625rem;
  font-weight: 700;
}
.cp-futures-native .cpf-pos-symbol { color: var(--bg-t1); font-size: 0.8125rem; font-weight: 600; }
.cp-futures-native .cpf-pos-dot { color: var(--bg-t3); }
.cp-futures-native .cpf-pos-mode,
.cp-futures-native .cpf-pos-lev { color: var(--bg-t1); font-size: 0.75rem; font-weight: 500; }
.cp-futures-native .cpf-pos-side { font-size: 0.75rem; font-weight: 600; }
/* 비트겟은 아이콘(✎ ↗)이 심볼 바로 뒤에 붙는다 → 여백을 뒤로 밀어낸다 */
.cp-futures-native .cpf-pos-head-gap { order: 1; flex: 1 1 auto; }
.cp-futures-native .cpf-pos-icon {
  display: inline-grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: 0;
  border-radius: 0.25rem;
  background: none;
  color: var(--bg-t2);
  font-size: 0.6875rem;
  line-height: 1;
}
.cp-futures-native .cpf-pos-icon:hover { background: var(--bg-s2); color: var(--bg-t1); }

/* 4열 그리드 — 열 우선 채움 (positions.js 의 mk() 순서와 일치) */
.cp-futures-native .cpf-pos-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);          /* ★ 2행 — 4행이면 카드가 높아져 85.375rem 화면에서 간단(Lite)로 강등된다 */
  /* 1열은 '0.003 BTC ≈ 187.59 USDT' 가 들어가 제일 길다 → 넓게. 나머지는 균등. */
  grid-template-columns: 1.45fr repeat(7, minmax(0, 1fr));
  gap: 0.3125rem 1rem;            /* 행 pitch = 16(라벨) + 20(값) + 5 = 2.5625rem ≈ 비트겟 실측 2.625rem */
  padding: 0.375rem 0 0.5rem;
}
.cp-futures-native .cpf-pos-cell { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.cp-futures-native .cpf-pos-label {
  color: var(--bg-t2);
  font-size: 0.75rem;              /* 비트겟 실측 */
  line-height: 1rem;
  text-decoration: underline dotted var(--bg-t3);
  text-underline-offset: 0.1875rem;
  white-space: nowrap;
}
.cp-futures-native .cpf-pos-valwrap { display: flex; gap: 0.1875rem; align-items: center; min-width: 0; }
.cp-futures-native .cpf-pos-value {
  color: var(--bg-t1);
  font-size: 0.875rem;              /* 비트겟 실측 */
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.25rem;
  white-space: nowrap;
}
.cp-futures-native .cpf-pos-value.cpf-positive { color: var(--bg-up); }
.cp-futures-native .cpf-pos-value.cpf-negative { color: var(--bg-dn); }
.cp-futures-native .cpf-pos-pen { width: 1rem; height: 1rem; font-size: 0.625rem; }

/* 전체/부분 TP/SL 값: "4,200.00 (50%) / 3,800.00 (30%)" 는 한 칸에 안 들어가 말줄임됐다.
   → 말줄임 대신 " / " 에서 TP·SL 두 줄로 접어 정보를 온전히 보여준다(살짝 작은 폰트). */
.cp-futures-native .cpf-pos-value.is-tpsl {
  white-space: normal;
  font-size: 0.8125rem;
  line-height: 1rem;
  word-break: keep-all;
}
/* 모바일 2열 그리드에선 "1.2 ETH ≈ 2,242.63 USDT" 가 좁은 칸에 안 들어가 'US…' 로 잘렸다.
   → 모바일에서만 이 값을 2줄로 접어 온전히 보여준다(수량 / ≈환산 자연 줄바꿈). */
@media (max-width: 68.75rem) {
  .cp-futures-native .cpf-pos-value.is-size {
    white-space: normal;
    line-height: 1.0625rem;
    word-break: keep-all;
  }
}

/* ── 하단 청산 행 ──────────────────────────────────────────────────────── */
.cp-futures-native .cpf-pos-close-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
  padding: 0.5rem 0 0.375rem;
  border-top: 1px solid var(--bg-s3);
}
/* 라벨 한 줄 + [스테퍼][25/50/75/100%] 한 줄 — 카드 높이를 비트겟(≈17.5rem)에 맞추기 위해 2줄로 압축 */
.cp-futures-native .cpf-pos-close-field {
  display: grid;
  grid-template-areas: "label label" "stepper pcts";
  grid-template-columns: 13.125rem auto;
  gap: 0.1875rem 0.5rem;
  align-items: center;
}
.cp-futures-native .cpf-pos-close-field label { grid-area: label; color: var(--bg-t2); font-size: 0.75rem; }
.cp-futures-native .cpf-pos-close-field .cpf-pos-stepper { grid-area: stepper; }
.cp-futures-native .cpf-pos-close-field .cpf-pos-pcts { grid-area: pcts; }
.cp-futures-native .cpf-pos-stepper {
  display: flex;
  align-items: center;
  height: 2rem;
  padding: 0 0.25rem 0 0.625rem;
  border: 1px solid var(--bg-s3);
  border-radius: 0.375rem;
  background: var(--bg-s2);
}
.cp-futures-native .cpf-pos-stepper:focus-within { border-color: var(--bg-acc); }
.cp-futures-native .cpf-pos-stepper input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--bg-t1);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  outline: none;
}
.cp-futures-native .cpf-pos-stepper input::-webkit-outer-spin-button,
.cp-futures-native .cpf-pos-stepper input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; appearance: none; }
.cp-futures-native .cpf-pos-stepper-unit { padding: 0 0.375rem; color: var(--bg-t2); font-size: 0.6875rem; }
.cp-futures-native .cpf-pos-stepper-btns { display: flex; flex-direction: column; }
.cp-futures-native .cpf-pos-stepper-btns button {
  width: 1.125rem;
  height: 0.8125rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--bg-t2);
  font-size: 0.4375rem;
  line-height: 1;
}
.cp-futures-native .cpf-pos-stepper-btns button:hover { color: var(--bg-t1); }
.cp-futures-native .cpf-pos-pcts { display: flex; gap: 0.25rem; }
.cp-futures-native .cpf-pos-pcts button {
  min-height: 2rem;
  padding: 0 0.625rem;
  border: 1px solid var(--bg-s3);
  border-radius: 0.25rem;
  background: transparent;
  color: var(--bg-t2);
  font-size: 0.6875rem;
}
.cp-futures-native .cpf-pos-pcts button:hover { border-color: var(--bg-acc); color: var(--bg-acc); }

.cp-futures-native .cpf-pos-close-btns { display: flex; flex: 1 1 auto; gap: 0.5rem; justify-content: flex-end; }
.cp-futures-native .cpf-pb {
  min-height: 2rem;
  padding: 0 1rem;
  border: 1px solid var(--bg-s3);
  border-radius: 0.375rem;
  background: transparent;
  color: var(--bg-t1);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}
.cp-futures-native .cpf-pb:hover { border-color: var(--bg-t3); background: var(--bg-s2); }
.cp-futures-native .cpf-pb-solid { border-color: transparent; background: var(--bg-s3); }
.cp-futures-native .cpf-pb-solid:hover { background: #45464b; }
.cp-futures-native .cpf-pb-ghost { border-color: var(--bg-s3); background: var(--bg-s1); }
.cp-futures-native .cpf-pos-close-btns .cpf-pb[data-role="close"] { border-color: var(--bg-t3); }

/* ── 간단(Lite) 테이블 ─────────────────────────────────────────────────── */
.cp-futures-native .cpf-pos-body[data-view="lite"] { padding: 0 0.75rem 0.5rem; }
.cp-futures-native .cpf-pos-lite-head,
.cp-futures-native .cpf-pos-lite-row {
  display: grid;
  /* 마지막 열(청산 버튼군)은 fr 로 두면 트랙보다 넓어져 왼쪽 열 위로 넘친다 → 실측 폭을 고정 확보 */
  grid-template-columns: 1.3fr .9fr .9fr .9fr .9fr 1fr 1.5fr .7fr .9fr minmax(25rem, auto);
  gap: 0.5rem;
  align-items: center;
}
.cp-futures-native .cpf-pos-lite-head span,
.cp-futures-native .cpf-pos-lite-row > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cp-futures-native .cpf-pos-lite-head {
  padding: 0.375rem 0;
  border-bottom: 1px solid var(--bg-s3);
  color: var(--bg-t2);
  font-size: 0.6875rem;
}
.cp-futures-native .cpf-pos-lite-head span:last-child,
.cp-futures-native .cpf-pos-lite-row .cpf-pos-lite-acts { justify-self: end; }
.cp-futures-native .cpf-pos-lite-row {
  min-height: 2.5rem;
  padding: 0.3125rem 0;
  border-bottom: 1px solid var(--bg-s3);
}
.cp-futures-native .cpf-pos-lite-row[hidden] { display: none; }
.cp-futures-native .cpf-pos-lite-row:hover { background: color-mix(in srgb, var(--bg-s1) 70%, transparent); }
.cp-futures-native .cpf-pos-lite-sym { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cp-futures-native .cpf-pos-lite-sym b { color: var(--bg-t1); font-size: 0.75rem; font-weight: 600; }
.cp-futures-native .cpf-pos-lite-side { font-size: 0.625rem; font-style: normal; }
.cp-futures-native .cpf-pos-lite-cell { min-width: 0; }
.cp-futures-native .cpf-pos-lite-cell .cpf-pos-value {
  display: block;
  overflow: hidden;
  font-size: 0.75rem;
  font-weight: 500;
  text-overflow: ellipsis;
}
.cp-futures-native .cpf-pos-lite-tpsl {
  display: block;
  max-width: 100%;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: none;
  color: var(--bg-acc);
  font-size: 0.6875rem;
  text-align: left;
  text-decoration: underline dotted;
  text-overflow: ellipsis;
  text-underline-offset: 0.1875rem;
  white-space: nowrap;
}
.cp-futures-native .cpf-pos-lite-acts { display: flex; flex: 0 0 auto; gap: 0.25rem; }
.cp-futures-native .cpf-pb-mini { min-height: 1.5rem; padding: 0 0.4375rem; font-size: 0.6875rem; }
.cp-futures-native .cpf-pos-more {
  padding: 0.375rem 0 0;
  color: var(--bg-t2);
  font-size: 0.6875rem;
  text-align: center;
}
.cp-futures-native .cpf-pos-more[hidden] { display: none; }

/* ── 공통 손익 색 (이 패널 한정으로 비트겟 색을 강제) ───────────────────── */
.cp-futures-native .cpf-state-panel .cpf-positive { color: var(--bg-up); }
.cp-futures-native .cpf-state-panel .cpf-negative { color: var(--bg-dn); }
.cp-futures-native .cpf-state-panel .cpf-empty { color: var(--bg-t2); font-size: 0.75rem; }

/* ── 좁은 화면 ─────────────────────────────────────────────────────────── */
@media (max-width: 75rem) {
  .cp-futures-native .cpf-pos-grid {
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem 1rem;
  }
  .cp-futures-native .cpf-pos-lite-head { display: none; }
  .cp-futures-native .cpf-pos-lite-row {
    grid-template-columns: repeat(2, 1fr);
    padding: 0.5rem 0;
  }
  .cp-futures-native .cpf-pos-lite-acts { grid-column: 1 / -1; justify-self: stretch; flex-wrap: wrap; }
}
@media (max-width: 45rem) {
  .cp-futures-native .cpf-pos-close-row { flex-direction: column; align-items: stretch; }
  .cp-futures-native .cpf-pos-close-btns { justify-content: stretch; }
  .cp-futures-native .cpf-pos-close-btns .cpf-pb { flex: 1 1 0; padding: 0 0.5rem; }
  .cp-futures-native .cpf-pos-grid { grid-template-columns: 1fr 1fr; }
  .cp-futures-native .cpf-state-tabs [role="tablist"] { gap: 0.875rem; }
}


/* ═══ 2행 배치 보험: 값이 길어도 옆 칸을 침범하지 않게 ═══ */
.cp-futures-native .cpf-pos-cell { overflow: hidden; }
.cp-futures-native .cpf-pos-valwrap { min-width: 0; }
.cp-futures-native .cpf-pos-value {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}

/* ═══════════ 짧은 창(노트북 1366×768 = 실제 뷰포트 ~40rem)에서도 상세 카드가 뜨게 압축 ═══════════
   문제: 상세 카드가 안 들어가면 자동으로 간단(Lite) 한 줄 표로 강등된다.
        1366×768 모니터의 실제 브라우저 뷰포트는 창틀 때문에 ~40rem 뿐이라 계속 강등됐다.
   해법: 세로 여백/행 피치를 조여 카드 높이를 줄인다. 값 글자 크기는 건드리지 않는다(가독성). */
@media (max-height: 51.25rem) {
  .cp-futures-native .cpf-pos-toolbar { padding: 0.25rem 0; }
  .cp-futures-native .cpf-pos-card { padding-top: 0.25rem; padding-bottom: 0.125rem; }
  .cp-futures-native .cpf-pos-card-head { margin-bottom: 0.125rem; }
  .cp-futures-native .cpf-pos-grid { gap: 0.1875rem 1rem; padding: 0.25rem 0 0.3125rem; }
  .cp-futures-native .cpf-pos-close-row { padding: 0.3125rem 0 0.1875rem; gap: 0.625rem; }
}

/* ═══════════ 모바일 서브툴바 칩: 단어 중간 줄바꿈 방지 + 탭타겟 확대 ═══════════
   [사고] 좁은 폭(360/390)에서 [상세|간단]·필터·정렬·모두청산 4칩이 한 줄에 안 들어가
     찌부되며 "필터: 전체"가 "필 전 / 터: 체" 로 글자 중간에서 두 줄로 깨졌다(실측).
   [수정] ① 모든 칩 글자 nowrap + 축소금지(flex-shrink:0) → 글자는 절대 안 쪼개진다.
          ② 좁으면 칩을 '통째로' 다음 줄로 넘긴다(flex-wrap:wrap, gap 스페이서 제거).
          ③ 탭타겟 24/1.75rem → 2.125rem 로 키워 손가락 오탭 방지. */
.cp-futures-native .cpf-pos-seg button,
.cp-futures-native .cpf-pos-menu-btn,
.cp-futures-native .cpf-pos-toolbar [data-action="close-all"] {
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 68.75rem) {
  .cp-futures-native .cpf-pos-toolbar {
    flex-wrap: wrap;
    row-gap: 0.5rem;
    padding: 0.5rem 0.75rem;
  }
  .cp-futures-native .cpf-pos-toolbar-gap { display: none; }   /* 우측 밀어내기 스페이서 제거 → 칩이 왼쪽부터 자연스레 채워지고 줄바꿈 */
  .cp-futures-native .cpf-pos-seg button { min-height: 2.125rem; padding: 0 0.875rem; font-size: 0.8125rem; }
  .cp-futures-native .cpf-pos-menu-btn   { min-height: 2.125rem; padding: 0 0.75rem; font-size: 0.8125rem; }
  .cp-futures-native .cpf-pos-toolbar [data-action="close-all"] { min-height: 2.125rem; }
}


/* ═══════════ 비트겟 1:1 — 주문창 ═══════════ */
/* =============================================================================
   order.css — .cpf-order-panel (비트겟 주문창 1:1)
   모든 셀렉터는 .cpf-order-panel 스코프 안에서만. 전역 오염 금지.
   색/치수는 ref/bitget-snapshot.html computed style + bitget-loggedin.png 픽셀 실측값.
   ========================================================================== */

.cpf-order-panel {
  /* ── 실측 팔레트 (measured) ───────────────────────────────────────── */
  --o-bg:        #070808;   /* 패널 바닥      (png @1700,560) */
  --o-input:     #1f2023;   /* 인풋 배경      (rgb(31,32,35) / #1f2023 — 두 소스 일치) */
  --o-fill:      #252629;   /* 보조버튼/BBO   (rgb(37,38,41) — 두 소스 일치) */
  --o-fill-on:   #38393d;   /* 활성 세그먼트  (rgb(56,57,61)) */
  --o-rail:      #27282b;   /* 슬라이더 레일  (rgb(39,40,43) — 두 소스 일치) */
  --o-track:     #ffffff;   /* 슬라이더 트랙 */
  --o-text:      #f4f5f7;   /* 1차 텍스트    (rgb(244,245,247)) */
  --o-muted:     #8e8e92;   /* 2차 텍스트    (rgb(142,142,146)) */
  --o-line:      #1c1d20;
  --o-long:      var(--cpf-long);    /* 단일 색으로 통일 (구 #26c99b) */
  --o-short:     var(--cpf-short);   /* 단일 색으로 통일 (구 #f1493f) */

  /* ── 밀도 (기본) ────────────────────────────────────────────────────
     패널 높이는 뷰포트가 아니라 그리드가 정한다. 그래서 vh 클램프를 쓰면 안 된다.
     fitOrderPanel() 이 실제 높이를 재서 .is-tight / .is-xtight 를 붙여 단계적으로 조인다. */
  --o-gap:  0.5rem;
  --o-h:    2.5rem;   /* 인풋 높이      — 비트겟 실측 2.5rem */
  --o-fs:   0.875rem;   /* 본문/필드라벨  — 비트겟 실측 0.875rem (Price/Quantity/Available/BBO) */
  --o-fs-s: 0.75rem;   /* 칩·탭·미리보기 — 비트겟 실측 0.75rem (Isolated/Limit/Open) */
  --o-btn:  2.5rem;   /* 롱/숏 버튼     — 비트겟 실측 2.5rem */

  display: flex;
  flex-direction: column;
  gap: var(--o-gap);
  min-height: 0;
  overflow: hidden;                      /* 스크롤 금지 (오너 요구) */
  padding: var(--o-gap) 0.625rem;
  color: var(--o-text);
  font-size: var(--o-fs);
  line-height: 1.35;
  position: relative;
}

/* 스크롤 금지 가드 — futures.css 가 `overflow-y:auto` 를 걸어둔 두 규칙을 확실히 이긴다.
   futures.css:1327 `.cpf-orderbook-panel,.cpf-order-panel{overflow-y:auto}`          (0,1,0)
   futures.css:1366 `.cpf-terminal-grid.cpf-tiled .cpf-order-panel{overflow-y:auto}`  (0,3,0)
   → 로드 순서와 무관하게 이기도록 (0,4,0) 로 올린다. (aside 는 `cpf-panel cpf-order-panel`) */
.cpf-terminal-grid .cpf-panel.cpf-order-panel,
.cpf-terminal-grid.cpf-tiled .cpf-panel.cpf-order-panel {
  overflow: hidden;
  overflow-y: hidden;
}

/* ⚠ `display:flex/grid` 를 준 요소는 UA 의 `[hidden]{display:none}` 을 이겨버린다.
   (실제로 청산 모드에서 주문유형 탭·미리보기가 hidden 인데도 그려졌다.)
   패널 스코프 안에서 [hidden] 을 무조건 이기게 못박는다 — JS 의 `.hidden = true` 계약을 지킨다. */
.cpf-order-panel [hidden] { display: none !important; }

/* futures.css:470 `.cpf-order-panel > form { display:grid; gap:0.8125rem; padding:0.8125rem }` 를 무력화한다.
   (병합 시 그 줄은 삭제하는 게 깔끔하다 — order-NOTES.md 참고) */
.cpf-order-panel .cpf-o {
  display: flex;
  flex-direction: column;
  gap: var(--o-gap);
  padding: 0;
  min-height: 0;
}
/* 극단 압축(좁은 타일 슬롯)에서 flex 자식이 자기 콘텐츠보다 작게 수축하면 서로 겹친다
   (계정/USDT 가 롱·숏 버튼·미리보기 위로 겹쳐 찍히던 문제). 핵심: `.cpf-o-acct`(계정)는
   `.cpf-o` 안이 아니라 `.cpf-order-panel` 직계 형제라, `.cpf-o` 가 수축하면 그 넘친 내용이
   아래 계정 위로 겹친다. 그래서 패널 직계자식(.cpf-o/.cpf-o-acct)과 폼 내부 자식 모두 수축 금지
   → 내용이 슬롯보다 크면 .cpf-order-panel 의 overflow-y:auto 로 **스크롤**된다(겹침 대신). */
.cpf-order-panel > *,
.cpf-order-panel .cpf-o > * { flex: 0 0 auto; }

/* ── 공통 인풋 ────────────────────────────────────────────────────── */
.cpf-order-panel .cpf-o-input {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  height: var(--o-h);
  padding: 0 0.5rem;
  background: var(--o-input);
  border: 1px solid transparent;
  border-radius: 0.5rem;                    /* 실측 0.5rem */
  transition: border-color .12s;
  min-width: 0;
}
.cpf-order-panel .cpf-o-input:focus-within { border-color: var(--o-muted); }
/* 주문패널 클릭 시 뜨던 녹색 테두리/글로우 제거 — 전역 `input:focus{border-color:brand;
   box-shadow:0 0 0 0.1875rem}` 이 내부 <input>(테두리0) 기준으로 그려져 실제 칸(.cpf-o-input)과
   어긋나 보였다. 래퍼의 회색 :focus-within 테두리로 충분. (키보드 :focus-visible 는 유지) */
.cpf-order-panel input:focus,
.cpf-order-panel select:focus { border-color: transparent; box-shadow: none; }
.cpf-order-panel .cpf-o-input.cpf-o-input-sm { height: calc(var(--o-h) - 0.1875rem); }

.cpf-order-panel .cpf-o-input input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  background: none;
  border: 0;
  outline: none;
  color: var(--o-text);
  font: inherit;
  font-variant-numeric: tabular-nums;
  padding: 0;
}
.cpf-order-panel .cpf-o-input input::placeholder { color: #55565a; }
/* 숫자 스피너 제거 (자체 스테퍼를 쓴다) */
.cpf-order-panel .cpf-o-input input::-webkit-outer-spin-button,
.cpf-order-panel .cpf-o-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cpf-order-panel .cpf-o-input input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.cpf-order-panel .cpf-o-unit {
  flex: 0 0 auto;
  color: var(--o-muted);
  font-size: var(--o-fs-s);
  white-space: nowrap;
}
.cpf-order-panel .cpf-o-unit.cpf-o-l { color: var(--o-long); }
.cpf-order-panel .cpf-o-unit.cpf-o-s { color: var(--o-short); }

.cpf-order-panel .cpf-o-unitsel {
  flex: 0 0 auto;
  background: none;
  border: 0;
  outline: none;
  color: var(--o-text);
  font: inherit;
  font-size: var(--o-fs-s);
  cursor: pointer;
  padding-right: 0.125rem;
}
.cpf-order-panel .cpf-o-unitsel option { background: var(--o-fill); color: var(--o-text); }

/* 스테퍼 ▲▼ */
.cpf-order-panel .cpf-o-stepper {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  margin-left: 0.125rem;
  border-left: 1px solid var(--o-rail);
  padding-left: 0.3125rem;
}
.cpf-order-panel .cpf-o-stepper button {
  background: none;
  border: 0;
  color: var(--o-muted);
  cursor: pointer;
  font-size: 0.4375rem;
  line-height: 1;
  padding: 1px 0;
}
.cpf-order-panel .cpf-o-stepper button:hover { color: var(--o-text); }

/* ── 1. 상단 칩 (레버리지 / 격리 / 모드) ──────────────────────────── */
/* 이 행은 .cpf-panel-head 도 겸한다 (futures-tiles.js 드래그 그립 주입점).
   futures.css `.cpf-panel-head` 의 min-height/padding/border/background 를 여기서 무력화한다. */
.cpf-order-panel .cpf-o-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.3125rem;
  position: relative;
  /* flex:0 0 auto — 패널이 짧은 슬롯(오더북 위 도킹 등)으로 극단 압축될 때 이 헤더가
     flex-shrink 로 높이 0 까지 붕괴하면 칩(레버리지/격리)이 아래 진입/청산 세그먼트 위로
     넘쳐 겹친다. 헤더는 칩 높이를 항상 확보하도록 수축 금지. (넘침은 하단에서 클립/스크롤) */
  flex: 0 0 auto;
  min-height: 0;
  padding: 0;
  border-bottom: 0;
  background: none;
}
/* 타일 드래그 그립 — 칩 줄 왼쪽에 붙는다 */
.cpf-order-panel .cpf-o-top .cpf-tile-grip {
  flex: 0 0 auto;
  background: none;
  border: 0;
  color: var(--o-muted);
  cursor: grab;
  padding: 0 0.125rem;
  font-size: 0.75rem;
  line-height: 1;
}
.cpf-order-panel .cpf-o-chip {
  height: 1.5rem;                          /* 실측 1.5rem */
  padding: 0 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.1875rem;
  background: var(--o-fill);             /* 실측 #252629 */
  border: 1px solid transparent;
  border-radius: 0.375rem;                    /* 실측 0.375rem */
  color: var(--o-text);
  font-size: var(--o-fs-s);
  cursor: pointer;
  white-space: nowrap;
}
.cpf-order-panel .cpf-o-chip:hover { border-color: var(--o-muted); }
/* 격리 / 원웨이 = 클릭 불가지만 "사실 표시"다. 비트겟 Isolated 칩과 동일하게 채운다
   (실측: 배경 #252629, 0.75rem, color #f4f5f7). 테두리 아웃라인이면 비활성처럼 읽힌다. */
.cpf-order-panel .cpf-o-chip.is-static {
  cursor: default;
  color: var(--o-text);
  background: var(--o-fill);
  border-color: transparent;
}
.cpf-order-panel .cpf-o-chip.is-static:hover { border-color: transparent; }
.cpf-order-panel .cpf-o-chip-lev {
  color: var(--cpf-brand, #00e4c4);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* ── 비트겟화: 상단 칩 줄을 [Isolated][20x] 처럼 풀폭 세그먼트로 ──
   실측 비트겟: 칩 3개가 패널 폭을 꽉 채우는 한 줄(높이 ~2.125rem). corin2는 칩 2개(레버리지/마진)
   라서 각 1/2 폭으로 채운다. .cpf-tile-grip(드래그 그립)만 고정폭으로 남는다.
   (`.cpf-o-top .cpf-o-chip` = 3클래스 > 기본 `.cpf-order-panel .cpf-o-chip` = 2클래스 로 이김) */
.cpf-order-panel .cpf-o-top .cpf-o-chip {
  flex: 1 1 0;
  height: 2.125rem;
  justify-content: center;
  padding: 0 0.625rem;
  font-size: var(--o-fs);          /* 0.75rem→0.875rem, 비트겟 칩 텍스트 크기 */
}

/* 레버리지 팝오버 */
.cpf-order-panel .cpf-o-levpop {
  position: absolute;
  top: calc(100% + 0.3125rem);
  left: 0;
  z-index: 40;
  width: min(15.625rem, 100%);
  padding: 0.5625rem;
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
  background: #17181b;
  border: 1px solid var(--o-rail);
  border-radius: 0.5rem;
  box-shadow: 0 0.625rem 1.75rem rgba(0, 0, 0, .55);
}
.cpf-order-panel .cpf-o-levpop[hidden] { display: none; }

/* ── 마진 모드(격리/교차) 칩 + 팝오버 — 레버리지 팝오버 스타일 공유 ── */
.cpf-order-panel .cpf-o-chip-margin { cursor: pointer; }
.cpf-order-panel .cpf-o-marginpop {
  position: absolute;
  top: calc(100% + 0.3125rem);
  left: 0;
  z-index: 40;
  width: min(16.25rem, 100%);
  padding: 0.5625rem;
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
  background: #17181b;
  border: 1px solid var(--o-rail);
  border-radius: 0.5rem;
  box-shadow: 0 0.625rem 1.75rem rgba(0, 0, 0, .55);
}
.cpf-order-panel .cpf-o-marginpop[hidden] { display: none; }
.cpf-order-panel .cpf-o-margin-opts { display: flex; gap: 0.375rem; }
.cpf-order-panel .cpf-o-margin-opts button {
  flex: 1 1 0;
  min-height: 2.125rem;
  border: 1px solid var(--o-rail);
  border-radius: 0.375rem;
  background: transparent;
  color: var(--o-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}
.cpf-order-panel .cpf-o-margin-opts button.on {
  border-color: var(--o-long);
  background: rgba(32, 200, 152, .12);
  color: var(--o-long);
}
.cpf-order-panel .cpf-o-levpop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--o-fs-s);
  color: var(--o-muted);
}
.cpf-order-panel .cpf-o-levpop-x {
  background: none;
  border: 0;
  color: var(--o-muted);
  font-size: 0.9375rem;
  line-height: 1;
  cursor: pointer;
}
.cpf-order-panel .cpf-o-levnote {
  margin: 0;
  font-size: 0.625rem;
  color: var(--o-muted);
  line-height: 1.3;
}
.cpf-order-panel .cpf-leverage-presets {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.25rem;
}
.cpf-order-panel .cpf-leverage-presets button {
  height: 1.375rem;
  background: var(--o-fill);
  border: 1px solid transparent;
  border-radius: 0.3125rem;
  color: var(--o-muted);
  font-size: 0.625rem;
  cursor: pointer;
  padding: 0;
}
.cpf-order-panel .cpf-leverage-presets button:hover { color: var(--o-text); }
.cpf-order-panel .cpf-leverage-presets button.on {
  background: transparent;
  border-color: var(--cpf-brand, #00e4c4);
  color: var(--cpf-brand, #00e4c4);
}

/* ── 2. 진입/청산 세그먼트 ────────────────────────────────────────── */
.cpf-order-panel .cpf-o-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.125rem;
  padding: 0.125rem;
  background: var(--o-fill);             /* nav-list 배경 실측 #252629 */
  border-radius: 0.375rem;
}
.cpf-order-panel .cpf-o-seg button {
  height: 1.5rem;                          /* 실측 탭 1.75rem 컨테이너 내부 */
  background: none;
  border: 0;
  border-radius: 0.3125rem;
  color: var(--o-muted);                 /* 실측 rgb(142,142,146) */
  font-size: var(--o-fs-s);
  cursor: pointer;
}
.cpf-order-panel .cpf-o-seg button.on {
  background: var(--o-fill-on);          /* 실측 rgb(56,57,61) */
  color: var(--o-text);
  font-weight: 600;
}

/* ── 3. 주문유형 탭 (언더라인) ────────────────────────────────────── */
.cpf-order-panel .cpf-o-types {
  display: flex;
  gap: 0.875rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--o-line);
}
.cpf-order-panel .cpf-o-types label {
  position: relative;
  padding: 0.1875rem 0 0.375rem;
  color: var(--o-muted);
  font-size: var(--o-fs-s);              /* 실측: Limit/Market 탭 = 0.75rem */
  cursor: pointer;
}
.cpf-order-panel .cpf-o-types input { position: absolute; opacity: 0; width: 0; height: 0; }
.cpf-order-panel .cpf-o-types label:has(input:checked) { color: var(--o-text); font-weight: 600; }
.cpf-order-panel .cpf-o-types label:has(input:checked)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 0.125rem;
  background: var(--o-text);             /* 비트겟 ink-bar = 흰색 실측 */
  border-radius: 0.125rem;
}
.cpf-order-panel .cpf-o-types input:focus-visible + span { outline: 1px solid var(--cpf-brand, #00e4c4); }

/* ── 4. 주문가능 ─────────────────────────────────────────────────── */
/* 실측: "Available" = 0.875rem / #f4f5f7 / line-height 1.375rem. 회색이 아니다. */
.cpf-order-panel .cpf-o-avail {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: var(--o-fs);
  line-height: 1.375rem;
  color: var(--o-text);
}
.cpf-order-panel .cpf-o-avail b {
  color: var(--o-text);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ── 5·6. 필드 행 ────────────────────────────────────────────────── */
.cpf-order-panel .cpf-o-row {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
}
.cpf-order-panel .cpf-o-row[hidden] { display: none; }
/* 실측: "Price" / "Quantity" 필드 라벨 = 0.875rem / #f4f5f7 / lh 1.375rem.
   비트겟에서 회색(#8e8e92)은 미리보기 행(Position size/Cost/Est. liq. price) 전용이다. */
.cpf-order-panel .cpf-o-flabel {
  font-size: var(--o-fs);
  line-height: 1.375rem;
  color: var(--o-text);
}
.cpf-order-panel .cpf-o-priceline {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.3125rem;
}
.cpf-order-panel .cpf-o-bbo {
  flex: 0 0 auto;
  min-width: 3.5rem;                       /* 실측 56×40 */
  height: var(--o-h);
  padding: 0 0.625rem;
  background: var(--o-fill);             /* 실측 #252629, radius 8 */
  border: 1px solid transparent;
  border-radius: 0.5rem;
  color: var(--o-text);
  font-size: var(--o-fs);                /* 실측 0.875rem */
  font-weight: 500;
  cursor: pointer;
}
.cpf-order-panel .cpf-o-bbo:hover { border-color: var(--o-muted); }

/* 퍼센트 슬라이더 */
.cpf-order-panel .cpf-o-slider {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.125rem;
  padding-top: 0.1875rem;
}
.cpf-order-panel .cpf-o-slider input[type="range"] {
  grid-column: 1;
  grid-row: 1;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 0.875rem;
  margin: 0;
  background: none;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
.cpf-order-panel .cpf-o-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 0.125rem;
  border-radius: 0.125rem;
  background: linear-gradient(
    to right,
    var(--o-track) 0 var(--o-pct, 0%),
    var(--o-rail) var(--o-pct, 0%) 100%
  );
}
.cpf-order-panel .cpf-o-slider input[type="range"]::-moz-range-track {
  height: 0.125rem;
  border-radius: 0.125rem;
  background: var(--o-rail);
}
.cpf-order-panel .cpf-o-slider input[type="range"]::-moz-range-progress {
  height: 0.125rem;
  border-radius: 0.125rem;
  background: var(--o-track);
}
.cpf-order-panel .cpf-o-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 0.6875rem;
  height: 0.6875rem;
  margin-top: -0.28125rem;
  border-radius: 50%;
  background: var(--o-track);
  border: 0;
  cursor: grab;
}
.cpf-order-panel .cpf-o-slider input[type="range"]::-moz-range-thumb {
  width: 0.6875rem;
  height: 0.6875rem;
  border-radius: 50%;
  background: var(--o-track);
  border: 0;
  cursor: grab;
}
/* 5개 눈금 (비트겟과 동일) — 슬라이더 아래에 깔린다 */
.cpf-order-panel .cpf-o-ticks {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  padding: 0 0.25rem;
  height: 0.875rem;
}
.cpf-order-panel .cpf-o-ticks button {
  pointer-events: auto;
  width: 0.4375rem;
  height: 0.4375rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--o-rail);             /* 실측 dot bg rgb(39,40,43) */
  cursor: pointer;
}
.cpf-order-panel .cpf-o-ticks button.on { background: var(--o-track); }
.cpf-order-panel .cpf-o-pct {
  grid-column: 2;
  grid-row: 1;
  min-width: 1.875rem;
  text-align: right;
  font-size: var(--o-fs-s);
  color: var(--o-muted);
  font-variant-numeric: tabular-nums;
}

/* ── 7. 미리보기 ─────────────────────────────────────────────────── */
.cpf-order-panel .cpf-o-preview {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin: 0;
  font-size: var(--o-fs-s);
  font-variant-numeric: tabular-nums;
}
.cpf-order-panel .cpf-o-preview > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.cpf-order-panel .cpf-o-preview dt { color: var(--o-muted); white-space: nowrap; }
.cpf-order-panel .cpf-o-preview dd {
  margin: 0;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cpf-order-panel .cpf-o-preview i { color: var(--o-muted); font-style: normal; margin: 0 1px; }
.cpf-order-panel .cpf-o-preview em { color: var(--o-muted); font-style: normal; margin-left: 0.1875rem; }
.cpf-order-panel .cpf-o-l { color: var(--o-long); font-weight: 500; }
.cpf-order-panel .cpf-o-s { color: var(--o-short); font-weight: 500; }

/* ── 8. TP/SL ────────────────────────────────────────────────────── */
.cpf-order-panel .cpf-o-check {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  font-size: var(--o-fs-s);
  color: var(--o-muted);
  cursor: pointer;
}
.cpf-order-panel .cpf-o-check input {
  width: 0.8125rem;
  height: 0.8125rem;
  margin: 0;
  accent-color: var(--cpf-brand, #00e4c4);
  cursor: pointer;
}
.cpf-order-panel .cpf-o-tpsl-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3125rem;
  margin-top: 0.25rem;
}
.cpf-order-panel .cpf-o-tpsl-fields[hidden] { display: none; }

/* ── 9. 액션 버튼 ────────────────────────────────────────────────── */
.cpf-order-panel .cpf-o-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4375rem;
  margin-top: 1px;
}
.cpf-order-panel .cpf-o-actions[hidden] { display: none; }
.cpf-order-panel .cpf-o-btn {
  height: var(--o-btn);
  border: 0;
  border-radius: 0.5rem;
  color: #fff;
  font-size: var(--o-fs);
  font-weight: 600;
  cursor: pointer;
  transition: filter .12s;
}
.cpf-order-panel .cpf-o-btn.is-long  { background: var(--o-long); }   /* 통일색 (canonical --cpf-long) */
.cpf-order-panel .cpf-o-btn.is-short { background: var(--o-short); }  /* 통일색 (canonical --cpf-short) */
.cpf-order-panel .cpf-o-btn:hover:not(:disabled) { filter: brightness(1.08); }
.cpf-order-panel .cpf-o-btn:disabled { opacity: .38; cursor: not-allowed; }
.cpf-order-panel .cpf-o-btn[aria-busy="true"] { opacity: .6; }

.cpf-order-panel .cpf-o-max {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4375rem;
  font-size: 0.625rem;
  color: var(--o-muted);
  font-variant-numeric: tabular-nums;
}
.cpf-order-panel .cpf-o-max[hidden] { display: none; }
.cpf-order-panel .cpf-o-max span:last-child { text-align: right; }

/* 청산 모드 부가 버튼 */
.cpf-order-panel .cpf-o-closex {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  flex-wrap: wrap;
}
.cpf-order-panel .cpf-o-closex[hidden] { display: none; }
.cpf-order-panel .cpf-o-mini {
  height: 1.5rem;
  padding: 0 0.5rem;
  background: var(--o-fill);
  border: 1px solid transparent;
  border-radius: 0.375rem;
  color: var(--o-text);
  font-size: 0.625rem;
  cursor: pointer;
}
.cpf-order-panel .cpf-o-mini:hover:not(:disabled) { border-color: var(--o-muted); }
.cpf-order-panel .cpf-o-mini:disabled { opacity: .38; cursor: not-allowed; }
.cpf-order-panel .cpf-o-note {
  font-size: 0.625rem;
  color: var(--o-muted);
  margin-left: auto;
}

/* ── 10. 푸터 ────────────────────────────────────────────────────── */
.cpf-order-panel .cpf-o-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.1875rem;
  border-top: 1px solid var(--o-line);
  font-size: 0.625rem;
  color: var(--o-muted);
}
.cpf-order-panel .cpf-o-foot b { color: var(--o-text); font-weight: 500; }
.cpf-order-panel .cpf-o-foot .cpf-link-button {
  background: none;
  border: 0;
  color: var(--cpf-brand, #00e4c4);
  font-size: 0.625rem;
  cursor: pointer;
  padding: 0;
}

/* ── 11. 계정 (accordion) ────────────────────────────────────────── */
/* 비트겟은 Account 를 계산기 행 바로 밑에 붙인다 (아래로 밀어내지 않는다).
   `margin-top:auto` 를 쓰면 55rem 패널에서 11.875rem 짜리 빈 구멍이 생긴다 → 제거. */
.cpf-order-panel .cpf-o-acct {
  margin-top: 0.125rem;
  border-top: 1px solid var(--o-line);
  padding-top: var(--o-gap);
  min-height: 0;
}
.cpf-order-panel .cpf-o-acct > summary {
  display: flex;
  align-items: baseline;
  gap: 0.3125rem;
  cursor: pointer;
  list-style: none;
  font-size: var(--o-fs-s);
  color: var(--o-muted);
  padding: 1px 0;
}
.cpf-order-panel .cpf-o-acct > summary::-webkit-details-marker { display: none; }
.cpf-order-panel .cpf-o-acct > summary::before {
  content: "▸";
  font-size: 0.5rem;
  color: var(--o-muted);
  transition: transform .15s;
  display: inline-block;
}
.cpf-order-panel .cpf-o-acct[open] > summary::before { transform: rotate(90deg); }
.cpf-order-panel .cpf-o-acct > summary b {
  margin-left: auto;
  color: var(--o-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cpf-order-panel .cpf-o-acct > summary em { font-style: normal; font-size: 0.625rem; }

.cpf-order-panel .cpf-o-acct-grid {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin: 0.3125rem 0 0;
  font-size: 0.625rem;
  font-variant-numeric: tabular-nums;
}
.cpf-order-panel .cpf-o-acct-grid > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.cpf-order-panel .cpf-o-acct-grid dt { color: var(--o-muted); }
.cpf-order-panel .cpf-o-acct-grid dd { margin: 0; color: var(--o-text); text-align: right; }
.cpf-order-panel .cpf-o-acct-grid dd b { font-weight: 500; }

.cpf-order-panel .cpf-o-acct-sep {
  margin-top: 0.375rem;
  padding-top: 0.3125rem;
  border-top: 1px solid var(--o-line);
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--o-text);
}
.cpf-order-panel .cpf-o-acct-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.375rem;
  margin-top: 0.375rem;
}
.cpf-order-panel .cpf-o-acct-foot select {
  height: 1.375rem;
  background: var(--o-fill);
  border: 1px solid transparent;
  border-radius: 0.3125rem;
  color: var(--o-text);
  font-size: 0.625rem;
  padding: 0 0.25rem;
  cursor: pointer;
}
.cpf-order-panel .cpf-o-acct-foot select:disabled { opacity: .45; cursor: not-allowed; }
.cpf-order-panel .cpf-o-acct-foot .cpf-link-button {
  background: none;
  border: 0;
  color: var(--cpf-brand, #00e4c4);
  font-size: 0.625rem;
  cursor: pointer;
  padding: 0;
}
.cpf-order-panel .cpf-o-acct-foot .cpf-link-button:disabled { color: var(--o-muted); cursor: not-allowed; }

/* 손익 색 (기존 전역 클래스와 동일 의미, 패널 안에서만 재지정) */
.cpf-order-panel .cpf-positive { color: var(--o-long); }
.cpf-order-panel .cpf-negative { color: var(--o-short); }

/* ── 게스트 커버 ─────────────────────────────────────────────────── */
.cpf-order-panel .cpf-guest-cover {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5625rem;
  padding: 1.125rem;
  text-align: center;
  background: rgba(7, 8, 8, .9);
  backdrop-filter: blur(0.125rem);
}
.cpf-order-panel .cpf-guest-cover[hidden] { display: none; }
.cpf-order-panel .cpf-guest-cover span { color: var(--o-muted); font-size: var(--o-fs-s); }

/* =============================================================================
   밀도 단계 — fitOrderPanel() 이 실측 후 붙인다. 스크롤 금지를 보장하는 장치.
   1) 기본        → 비트겟 실측에 가장 가까움
   2) .is-tight   → 여백/높이 축소
   3) .is-xtight  → 폰트까지 축소 + 부가 문구 제거
   4) 그래도 넘치면 fitOrderPanel() 이 <details data-role="acct-details"> 를 닫는다
   ========================================================================== */
.cpf-order-panel.is-tight {
  --o-gap: 0.375rem;
  --o-h: 2.125rem;
  --o-fs: 0.8125rem;
  --o-fs-s: 0.6875rem;
  --o-btn: 2.25rem;
}
.cpf-order-panel.is-xtight {
  --o-gap: 0.3125rem;
  --o-h: 1.875rem;
  --o-fs: 0.75rem;
  --o-fs-s: 0.625rem;
  --o-btn: 2rem;
}
.cpf-order-panel.is-xxtight {
  --o-gap: 0.1875rem;
  --o-h: 1.625rem;
  --o-fs: 0.6875rem;
  --o-fs-s: 0.625rem;
  --o-btn: 1.8125rem;
}
.cpf-order-panel.is-tight .cpf-o-avail,
.cpf-order-panel.is-tight .cpf-o-flabel,
.cpf-order-panel.is-xtight .cpf-o-avail,
.cpf-order-panel.is-xtight .cpf-o-flabel,
.cpf-order-panel.is-xxtight .cpf-o-avail,
.cpf-order-panel.is-xxtight .cpf-o-flabel { line-height: 1.35; }

.cpf-order-panel.is-xtight .cpf-o-levnote,
.cpf-order-panel.is-xtight .cpf-o-note,
.cpf-order-panel.is-xtight .cpf-o-acct-sep,
.cpf-order-panel.is-xxtight .cpf-o-levnote,
.cpf-order-panel.is-xxtight .cpf-o-note,
.cpf-order-panel.is-xxtight .cpf-o-acct-sep { display: none; }
.cpf-order-panel.is-xtight .cpf-o-chip,
.cpf-order-panel.is-xtight .cpf-o-seg button { height: 1.375rem; }
.cpf-order-panel.is-xxtight .cpf-o-chip,
.cpf-order-panel.is-xxtight .cpf-o-seg button { height: 1.3125rem; }

/* 최후의 최후 (패널 21.25rem 이하) — 부가 정보를 버려서라도 스크롤은 안 만든다 */
.cpf-order-panel.is-crush .cpf-o-max,
.cpf-order-panel.is-crush .cpf-o-foot { display: none; }

/* 계정 표 축약 — 접기 직전 단계 */
.cpf-order-panel.is-acct-squeeze .cpf-o-acct-grid > div:nth-child(n + 3) { display: none; }
.cpf-order-panel.is-acct-squeeze .cpf-o-acct-sep { display: none; }

/* ═══ 포지션 모드(원웨이/헤지) 숨김 — 오너 요청 ═══
   ⚠ DOM 에서 제거하면 안 된다: futures.js:1266 이
   find('position-mode-label').textContent 를 무조건 건드려 TypeError 로 앱이 죽는다.
   [hidden] 속성만으로는 .cpf-o-chip 의 display 에 밀리므로 !important 로 못박는다. */
.cpf-order-panel [data-role="position-mode-label"],
.cpf-order-panel .cpf-o-modewrap { display: none !important; }


/* ═══════════ 앱셸 — 100vh 감옥 해제 ═══════════════════════════════════
   [사고] 앱셸이 `height:100%` 로 뷰포트에 갇혀 있었다. 조상들(html/body/.cp-wrap/.cp-body)이
   전부 overflow:hidden 이고, 스크롤 컨테이너는 main.cp-content 하나뿐이다.
   창이 짧으면(노트북 실뷰포트 ~40rem):
     · 터미널 그리드가 17.5rem 로 쪼그라드는데 주문창 내용물은 31.25rem+ 다
       → **매수/매도 버튼이 잘려서 아예 사라진다**
     · 상태 패널도 17.6875rem 만 남아 포지션 카드(11.625rem) 2장이 안 들어간다
     · 셸이 100vh 를 넘지 못하니 main 도 안 늘어나 **내려볼 방법조차 없다**
   [수정] 셸을 min-height:100% 로 바꿔 내용만큼 늘어나게 한다.
     · 창이 충분히 크면 예전과 동일 (남는 높이는 상태 패널이 흡수, 스크롤 없음)
     · 창이 짧으면 main.cp-content 가 흐른다 — 잘라내는 것보다 스크롤이 백배 낫다
   [부수] 어드민 버튼바(캐시 재생성/설정/페이지 수정/모바일)도 이제 정상적으로 도달 가능. */
@media (min-width: 68.8125rem) {
  .cp-futures-native { height: auto; min-height: 100%; }

  /* 터미널 그리드: 주문창이 절대 잘리지 않을 최소 높이를 보장한다 */
  .cpf-terminal-grid { height: var(--cpf-chart-h, max(32.5rem, calc(100vh - 26.25rem))); max-height: none; }

  /* 상태 패널: 남는 높이를 채우되, 내용이 더 크면 내용만큼 늘어난다 (0 = 줄어들지 않음) */
  .cpf-state-panel { flex: 1 0 auto; min-height: 16.25rem; }
}

/* ═══════════ 앱셸 스크롤 감옥 완전 해제 (데스크탑+모바일) ═══════════════
   [사고 2] 위 [수정]은 main.cp-content 를 흐르게 했지만, 조상 html/body/.cp-body/.cp-wrap
   이 여전히 overflow:hidden 이라 스크롤 컨테이너가 main 하나뿐이었다. 그런데 터미널의 모든
   영역(차트=휠 줌, 호가/포지션=overscroll:contain)이 휠/터치를 가로채 main 으로 전파가 안 돼
   → **가시 스크롤바도 없고 휠도 먹통, 아래 포지션에 도달 불가**(오너 실측 확인).
   [수정 2] 조상 overflow 를 풀어 **문서(window)** 가 흐르게 한다:
     · 창이 짧으면 브라우저 기본 세로 스크롤바가 뜨고, 차트 밖 어디서든 휠/터치로 내려간다
     · 창이 충분히 크면 콘텐츠가 100vh 에 맞아 스크롤 자체가 없다(예전과 동일)
   가로 스크롤은 막는다(overflow-x:hidden). 실측: DESK-tall 무스크롤, DESK-short/MOB 창스크롤 OK. */
/* :not(...) 가드 — 모달(rx_modal_open) / 모바일 내비(cp-nav-open) 열림 시의 overflow:hidden 잠금은
   건드리지 않는다(배경 스크롤 방지 유지). 평상시에만 문서 스크롤을 연다. */
/* 문서(html)를 단일 스크롤러로 — body 에 overflow 를 주면 경쟁 스크롤 컨테이너가 생겨
   휠이 어디서도 안 먹었다(실측). html 만 스크롤, 나머지는 overflow:visible 로 흐름을 연다.
   실측: 데스크탑=헤더/상태패널(=포지션 위치)/스크롤바로 하강 OK, 모바일=전 영역 휠·터치 OK,
   창이 크면 무스크롤(예전 동일), 가로스크롤 없음. 호가/주문창의 자체 내부 스크롤은 유지. */
html.cpf-tv:not(.cp-nav-open) {
  height: auto !important; overflow-x: hidden !important; overflow-y: auto !important;
}
html.cpf-tv:not(.cp-nav-open) > body:not(.rx_modal_open) {
  height: auto !important; min-height: 0 !important; overflow: visible !important;
}
.cp-wrap.cp-trade-mode, .cp-wrap.cp-trade-mode .cp-body,
.cp-wrap.cp-trade-mode .cp-content {
  height: auto !important; min-height: 0 !important; overflow: visible !important;
}
.cp-futures-native { min-height: 100vh; }

/* 모바일(<68.8125rem): 상태 패널의 내부 스크롤(46svh 박스)을 풀어 포지션 카드가 통째로 흐르게 —
   문서 스크롤 하나로 도달. 중첩 스크롤 박스 안에서 카드 하단이 잘리던 문제 해소. */
@media (max-width: 68.75rem) {
  .cp-futures-native .cpf-state-panel [data-panel] { max-height: none !important; overflow: visible !important; }
  .cp-futures-native .cpf-pos-body,
  .cp-futures-native .cpf-state-panel .cpf-table-scroll,
  .cp-futures-native .cpf-state-panel [data-role="ranking-list"] { max-height: none !important; overflow: visible !important; }
}

/* ── TradingView 차트 모드: 커스텀 KLine 크롬 숨김(네이티브 TV 툴바 사용) ──
   tv-chart.js가 부팅 성공 시 html.cpf-tv 를 붙인다. TV 로드 실패 시 클래스 미부착 → KLine 크롬 유지(그레이스풀). */
.cpf-tv .kc-bar,
.cpf-tv .kc-bar2,
.cpf-tv .kc-drawbar-v,
.cpf-tv .cpf-chart-drag-hint { display: none !important; }
.cpf-tv .kc-chart-row { flex: 1 1 auto; min-height: 0; }

/* ═══════════ 오픈전 묶음 D (2026-07-24) — 접근성·모바일 수정 ═══════════
   기존 규칙 미변경, 말미 override 로만. */

/* #4 롱/숏 CTA 텍스트 대비: 흰글자(2.15/3.69:1)→니어블랙(롱 9.0:1, 숏 5.2:1, 바이낸스식) */
.cpf-order-panel .cpf-o-btn.is-long,
.cpf-order-panel .cpf-o-btn.is-short { color: #0B0E11; }

/* #17 수량/부분청산 스테퍼 터치타겟 확대 (모바일) — 도트는 그대로, 히트영역만 1.5rem+ */
@media (max-width: 40rem) {
  .cpf-order-panel .cpf-o-stepper button { min-width: 1.625rem; min-height: 1.375rem; padding: 0.375rem 0.375rem; font-size: 0.5625rem; }
  .cpf-order-panel .cpf-o-stepper { justify-content: center; }
}

/* #19 주문 입력 placeholder 대비 상향 (#55565a≈2.2:1 → #8e8e92≈4.96:1) */
.cpf-order-panel .cpf-o-input input::placeholder { color: #8e8e92; }

/* #18 키보드 포커스 표시 복구 — :focus-visible(키보드)만, 마우스클릭 녹색글로우는 여전히 없음 */
.cpf-order-panel input:focus-visible,
.cpf-order-panel select:focus-visible { outline: 0.125rem solid var(--cpf-brand); outline-offset: 1px; }

/* V1 모바일 상단 마켓바 겹침 — 매매점검/모의/실시간(bar-end) 압축 + 가격 폭 제한 */
@media (max-width: 40rem) {
  .cpf-market-bar-end { gap: 0.3125rem; padding: 0 0.375rem; border-left: 0; min-height: 3rem; }
  .cpf-market-bar-end .cpf-connection-inline { display: none; }   /* 모바일에선 '실시간 연결' 지표 숨김(공간 확보) */
  .cpf-market-price { max-width: 42%; }
  .cpf-market-price strong { font-size: 0.9375rem; }
  .cpf-demo-chip { padding: 0.125rem 0.3125rem; font-size: 0.625rem; }
}

/* 360~23.375rem 초협소 구간: /tools 바로가기(매매점검) pill이 24시간 통계와 겹침(23.4375rem↑는 정상).
   이 구간에서만 pill 숨김 — 동일 링크가 상단 메인 메뉴에 있어 기능 손실 없음. */
@media (max-width: 23.375rem) {
  .cpf-market-bar-end a[href="/tools/"] { display: none !important; }
}


/* ═══ 모바일 마켓바 겹침 재수정 (mobilefix-20260804-marketbar) ═══
   390px에서 .cpf-market-price 컨테이너가 42px로 눌려 가격 strong 이 bar-end(매매점검)와 실제 교차.
   로고 텍스트 숨김 + pair 축소로 폭을 확보하고, price 를 컨텐츠 폭(flex 0 1 auto)으로 고정. */
@media (max-width: 30rem) {
  .cpf-trade-logo { padding: 0 0.375rem; gap: 0; }
  .cpf-trade-logo span { display: none; }
  .cpf-pair-btn { padding-left: 0.25rem; padding-right: 0.25rem; }
  .cpf-pair-cur { font-size: 0.75rem; }
  .cpf-market-price { max-width: none; flex: 0 1 auto; min-width: 5.5rem; overflow: hidden; padding: 0 0.375rem; }
  .cpf-market-price strong { font-size: 0.8125rem; line-height: 1.15; white-space: nowrap; }
  .cpf-market-price span { font-size: 0.5625rem; line-height: 1.15; white-space: nowrap; }
  .cpf-market-bar-end { gap: 0.25rem; padding: 0 0.375rem; }
  .cpf-market-bar-end a[href="/tools/"] { padding: 0.125rem 0.3125rem; font-size: 0.5625rem; }
}