/* ===== 바이낸스식 거래창 ===== */
.spot-shell {
  --num: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: "IBM Plex Sans", "Noto Sans KR", system-ui, sans-serif;
  --bp-accent: #f68f15;
  --bp-btn: #f68f15;
  --bp-btn-ink: #000000;
  --sb-track: #1e2329;
  --sb-thumb: #474d57;
  --sb-thumb-hover: #848e9c;
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 64px);
  background: #000000;
  color: #eaecef;
  overflow: hidden;
  font-family: var(--sans);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb) var(--sb-track);
}
.spot-shell *,
.spot-shell *::before,
.spot-shell *::after { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) var(--sb-track); }
.spot-shell *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.spot-shell *::-webkit-scrollbar-track {
  background: var(--sb-track);
  border-left: 1px solid #2b3139;
}
.spot-shell *::-webkit-scrollbar-thumb {
  background: var(--sb-thumb);
  border-radius: 4px;
  border: 2px solid var(--sb-track);
  background-clip: padding-box;
}
.spot-shell *::-webkit-scrollbar-thumb:hover {
  background: var(--sb-thumb-hover);
  border: 2px solid var(--sb-track);
  background-clip: padding-box;
}
.spot-shell *::-webkit-scrollbar-corner {
  background: var(--sb-track);
}
.tnum,
.sm-price, .sm-chg,
.sp-left .live,
.sp-left .live-usd,
.ticker-stats b,
.book-row,
.book-mid strong,
.feed-list,
.feed-row,
.so-avail b,
.so-input input,
.so-sum b,
#sumTotal, #sumFee, #sumLev, #sumLiq,
#balSpot, #balPanel, #markPrice, #chg24, #high24, #low24, #vol24, #bookLast,
.spot-bottom td, .spot-bottom th {
  font-family: var(--num) !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* --- 상단 페어바 --- */
.spot-pairbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 8px 14px;
  border-bottom: 1px solid #1e2329;
  background: #000000;
  flex-wrap: wrap;
  flex-shrink: 0;
  position: relative;
  z-index: 40;
}
.sp-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.sp-left .live-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  line-height: 1.1;
  min-width: 0;
}
.sp-left .live {
  font-family: var(--num);
  font-size: 24px;
  font-weight: 700;
  color: #0ecb81;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.sp-left .live.down { color: #f6465d; }
.sp-left .live.up { color: #0ecb81; }
.sp-left .live-usd {
  font-family: var(--num);
  font-size: 12px;
  font-weight: 500;
  color: #848e9c;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

.pair-picker { position: relative; }
.pair-picker-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 4px 6px 4px 2px;
  border-radius: 6px;
  font: inherit;
}
.pair-picker-btn:hover { background: rgba(255,255,255,.04); }
.pair-picker-txt { text-align: left; min-width: 0; }
.pair-picker-txt strong {
  display: block;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: #eaecef;
}
.pair-picker-txt em {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: #848e9c;
  margin-top: 1px;
}
.pair-caret {
  color: #848e9c;
  font-size: 12px;
  transition: transform .15s ease;
}
.pair-picker.open .pair-caret { transform: rotate(180deg); color: #f68f15; }

.pair-drop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: min(360px, calc(100vw - 24px));
  max-height: min(70vh, 520px);
  display: flex;
  flex-direction: column;
  background: #1e2329;
  border: 1px solid #2b3139;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
  overflow: hidden;
  z-index: 50;
}
.pair-drop[hidden] { display: none !important; }

.sm-search { padding: 10px; }
.sm-search input {
  width: 100%;
  background: #000000;
  border: 1px solid #2b3139;
  border-radius: 6px;
  color: #eaecef;
  padding: 9px 10px;
  font: inherit;
  font-size: 12px;
  outline: none;
}
.sm-search input:focus { border-color: #f68f15; }
.sm-tabs {
  display: flex;
  gap: 0;
  padding: 0 8px;
  border-bottom: 1px solid #2b3139;
}
.sm-tabs button {
  appearance: none; border: 0; background: none;
  color: #848e9c; padding: 10px 12px;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.sm-tabs button.on {
  color: #f68f15;
  box-shadow: inset 0 -2px 0 #f68f15;
}
.sm-head {
  display: grid;
  grid-template-columns: 1.2fr 1fr .8fr;
  gap: 4px;
  padding: 8px 10px;
  font-size: 11px;
  color: #848e9c;
  border-bottom: 1px solid #2b3139;
}
.sm-list {
  flex: 1;
  overflow: auto;
  scrollbar-width: thin;
  min-height: 0;
}
.sm-row {
  width: 100%;
  display: grid;
  grid-template-columns: 1.2fr 1fr .8fr;
  gap: 4px;
  align-items: center;
  padding: 10px;
  border: 0;
  background: transparent;
  color: #eaecef;
  cursor: pointer;
  text-align: left;
  font: inherit;
  font-size: 12px;
  border-bottom: 1px solid rgba(43,49,57,.5);
}
.sm-row:hover { background: rgba(255,255,255,.04); }
.sm-row.active { background: rgba(246,143,21,.08); }
.sm-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.sm-name b { font-weight: 600; }
.sm-price { font-size: 12px; font-weight: 600; }
.sm-price.up { color: #0ecb81; }
.sm-price.down { color: #f6465d; }
.sm-chg { font-size: 11px; font-weight: 600; }
.sm-chg.up { color: #0ecb81; }
.sm-chg.down { color: #f6465d; }

.coin-ico {
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 10px; font-weight: 800;
  background: #2a2e33; color: #fafafa; flex-shrink: 0;
  position: relative; overflow: hidden;
}
/* 실제 거래소 로고를 덮어 씌운다 (없으면 아래 글자 원형이 그대로 보인다) */
.coin-ico > img.ci-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 50%; object-fit: cover; display: block;
}
.coin-ico.has-ico { color: transparent; }
.coin-ico.btc { background: #f7931a; color: #111; }
.coin-ico.eth { background: #627eea; color: #fff; }
.coin-ico.xrp { background: #23292f; color: #fff; }
.coin-ico.sol { background: #9945ff; color: #fff; }
.coin-ico.doge { background: #c2a633; color: #111; }
.coin-ico.ada { background: #0033ad; color: #fff; }
.coin-ico.trx { background: #ff0013; color: #fff; }
.coin-ico.link { background: #2a5ada; color: #fff; }
.coin-ico.avax { background: #e84142; color: #fff; }
.coin-ico.dot { background: #e6007a; color: #fff; }
.coin-ico.bch { background: #0ac18e; color: #111; }
.coin-ico.etc { background: #328332; color: #fff; }
.coin-ico.atom { background: #2e3148; color: #fff; }
.coin-ico.near { background: #000; color: #fff; }
.coin-ico.xlm { background: #14b6e7; color: #111; }
.coin-ico.usdt { background: #26a17b; color: #fff; }
.coin-ico.krw { background: #1a5fb4; color: #fff; }
.coin-ico.sm { width: 18px; height: 18px; font-size: 9px; }
.coin-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  vertical-align: middle;
}
.coin-cell b { font-weight: 700; color: #eaecef; }
#pairIcon.coin-ico { width: 28px; height: 28px; font-size: 13px; }

.ticker-stats {
  display: flex;
  gap: 18px;
  font-size: 12px;
  color: #848e9c;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
}
.ticker-stats .ts-item { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.ticker-stats b {
  color: #eaecef;
  font-weight: 600;
  font-size: 12px;
}

/* --- 본문: 차트|호가 / 내역|체결 가로선 맞춤 --- */
.spot-body {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(220px, 0.38fr) minmax(280px, 0.42fr);
  /* 하단(포지션·체결)을 키워 차트 높이 축소 · 가로선 정렬 */
  grid-template-rows: minmax(0, 1fr) minmax(220px, 34%);
  grid-template-areas:
    "chart mid order"
    "hist  mid order";
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

/* 중열: 호가는 내용 높이만 · 남는 공간은 체결이 채움(빈칸 제거) */
.spot-mid {
  grid-area: mid;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  border-right: 1px solid #1e2329;
  overflow: hidden;
  background: #000000;
}

.spot-chart {
  grid-area: chart;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  background: #000000;
  border-right: 1px solid #1e2329;
  overflow: hidden;
}
.spot-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 10px;
  border-bottom: 1px solid #1e2329;
  background: #000000;
  flex-shrink: 0;
}
.interval-group {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  align-items: center;
  max-width: 100%;
}
.iv-btn {
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid transparent;
  background: transparent;
  color: #848e9c;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.iv-btn.active {
  color: var(--bp-btn-ink);
  background: var(--bp-btn);
  border-color: var(--bp-accent);
}
.iv-btn:hover:not(.active) { color: #eaecef; background: #1e2329; }
.spot-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: #848e9c;
  flex-wrap: wrap;
}
.spot-tools .tool.on {
  color: #f68f15;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(246,143,21,.1);
}
.chart-legend {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-family: var(--num);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.chart-legend .cl-ma b { font-weight: 700; }
.chart-legend .ma7 { color: #f68f15; }
.chart-legend .ma25 { color: #d94ae6; }
.chart-legend .ma99 { color: #1e88e5; }

#tv_chart {
  flex: 1 1 0;
  min-height: 0;
  height: 100%;
  background: #000000;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.spot-bottom {
  grid-area: hist;
  border-top: 1px solid #1e2329;
  border-right: 1px solid #1e2329;
  background: #000000;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
.sb-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #1e2329;
  padding: 0 8px;
  flex-shrink: 0;
}
.sb-tabs button {
  appearance: none; border: 0; background: none;
  color: #848e9c; padding: 10px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.sb-tabs button.on { color: #eaecef; box-shadow: inset 0 -2px 0 #f68f15; }
.sb-pane { display: none; flex: 1; min-height: 0; overflow: auto; }
.sb-pane.on { display: block; }
.table-scroll { width: 100%; overflow: auto; height: 100%; }
.spot-bottom table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 12px; }
.spot-bottom th, .spot-bottom td {
  padding: 8px 12px; text-align: left; border-bottom: 1px solid rgba(43,49,57,.7); white-space: nowrap;
}
.spot-bottom th { color: #848e9c; font-weight: 500; }
.spot-bottom td.empty { color: #848e9c; text-align: center; padding: 28px 12px; }
.winrate-inline { padding: 20px; }
.winrate-inline .big {
  font-size: 28px; font-weight: 700; font-family: ui-monospace, monospace;
  color: #f68f15; margin: 6px 0;
}
.winrate-inline .sub { color: #848e9c; font-size: 12px; }

.port-wrap { padding: 10px 12px 16px; }
.port-sum {
  display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-end;
  margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #1e2329;
}
.port-sum .big {
  font-size: 22px; font-weight: 700; font-family: ui-monospace, monospace;
  color: #f68f15; margin-top: 4px;
}
.port-sum .mid {
  font-size: 16px; font-weight: 700; font-family: ui-monospace, monospace;
  color: #eaecef; margin-top: 4px;
}
.port-sum .sub { color: #848e9c; font-size: 11px; font-weight: 600; }
.port-sec { margin-top: 10px; }
.port-sec-h {
  font-size: 12px; font-weight: 700; color: #eaecef;
  margin: 0 0 6px; letter-spacing: .02em;
}
.port-table { min-width: 720px; }
.port-sum .mid.up { color: #0ecb81; }
.port-sum .mid.dn { color: #f6465d; }
.port-table .t-pnl.up, .port-table .t-pct.up, .port-table .up { color: #0ecb81; font-weight: 700; }
.port-table .t-pnl.dn, .port-table .t-pct.dn, .port-table .dn { color: #f6465d; font-weight: 700; }
.badge.BUY, .badge.LONG { color: #0ecb81; }
.badge.SELL, .badge.SHORT { color: #f6465d; }
.badge.filled { color: #0ecb81; font-weight: 700; }
.badge.open { color: #f68f15; font-weight: 700; }
.btn-cancel-order {
  appearance: none;
  border: 1px solid #f6465d;
  background: rgba(246,70,93,.12);
  color: #f6465d;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.btn-cancel-order:hover { background: rgba(246,70,93,.22); }



/* 호가 — 행 수만큼만 높이, 위·아래 빈칸 없음 */
.spot-book {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: auto;
  max-height: 62%;
  border-right: 0;
  background: #000000;
  overflow: hidden;
}
.sbk-head {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  padding: 6px 10px;
  font-size: 11px;
  color: #848e9c;
  border-bottom: 1px solid #1e2329;
  flex-shrink: 0;
}
.book-asks, .book-bids {
  flex: 0 0 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  font-weight: 600;
}
.book-asks { justify-content: flex-start; }
.book-bids { justify-content: flex-start; }
.book-row {
  flex: 0 0 auto;
  height: 20px;
  min-height: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  padding: 0 10px;
  position: relative;
  align-items: center;
  line-height: 1;
  cursor: pointer;
}
.book-row:hover { background: rgba(255,255,255,.04); }
.book-row > span { position: relative; z-index: 1; }
.book-row .p.down { color: #f6465d; }
.book-row .p.up { color: #0ecb81; }
.book-row .q, .book-row .t { color: #eaecef; text-align: right; }
.book-row .bar {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: rgba(246,70,93,.12); pointer-events: none;
}
.book-bids .book-row .bar { background: rgba(14,203,129,.12); }
.book-mid {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 10px;
  border-top: 1px solid #1e2329;
  border-bottom: 1px solid #1e2329;
  background: #12161c;
  cursor: pointer;
}
.book-mid:hover { background: #161b22; }
.book-mid-main {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.book-mid strong {
  font-size: 18px;
  font-weight: 700;
  color: #0ecb81;
  letter-spacing: 0.02em;
}
.book-mid strong.down { color: #f6465d; }
.book-mid em { font-style: normal; font-size: 11px; color: #848e9c; }
.book-arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  opacity: .95;
}
.book-arrow.up {
  border-bottom: 6px solid #0ecb81;
  border-top: 0;
}
.book-arrow.down {
  border-top: 6px solid #f6465d;
  border-bottom: 0;
}

/* 체결 — 호가 바로 아래부터 남은 높이 전부 채움 */
.spot-trades {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-height: 120px;
  height: auto;
  border-top: 1px solid #1e2329;
  border-right: 0;
  background: #000000;
  overflow: hidden;
}
.sbk-tabs {
  display: flex;
  border-bottom: 1px solid #1e2329;
  flex-shrink: 0;
}
.sbk-tabs button {
  flex: 1;
  appearance: none; border: 0; background: transparent; color: #848e9c;
  height: 36px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.sbk-tabs button.on { color: #eaecef; box-shadow: inset 0 -2px 0 #f68f15; }
.feed-list {
  flex: 1; overflow: auto;
  font-size: 12px;
  font-weight: 600;
  min-height: 0;
}
.feed-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  padding: 4px 10px;
  border-bottom: 1px solid rgba(43,49,57,.45);
}
.feed-row.head {
  color: #848e9c; font-family: inherit; position: sticky; top: 0; background: #000000; z-index: 1;
}
.feed-row .up { color: #0ecb81; }
.feed-row .down { color: #f6465d; }

/* 우측 주문 (전체 세로 span) — 내부 스크롤 없이 전체 표기 */
.spot-order-wrap {
  grid-area: order;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  background: #000000;
  overflow: hidden;
}
.spot-order {
  padding: 10px 12px 12px;
  overflow: visible;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.spot-order .so-note { margin-top: auto; }
.so-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 10px;
  border-radius: 6px;
  overflow: hidden;
  background: #1e2329;
  border: 1px solid #2b3139;
}
.so-tabs button {
  appearance: none; border: 0; background: transparent;
  color: #848e9c; padding: 8px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.so-tabs button.buy.on {
  color: #fff;
  background: #0ecb81;
  box-shadow: none;
}
.so-tabs button.sell.on {
  color: #fff;
  background: #f6465d;
  box-shadow: none;
}
.so-types {
  display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap;
}
.so-types button {
  appearance: none; border: 1px solid #2b3139; background: #1e2329;
  color: #848e9c; padding: 5px 10px; border-radius: 4px; font: inherit; font-size: 12px; cursor: pointer;
}
.so-types button.on {
  color: var(--bp-btn-ink); border-color: var(--bp-accent); background: var(--bp-btn); font-weight: 700;
}
.so-types button:hover:not(.on) { color: #eaecef; border-color: #474d57; }
.so-field { margin-bottom: 8px; }
.so-field label { display: block; font-size: 12px; color: #848e9c; margin-bottom: 4px; }
.so-avail { font-size: 13px; }
.so-avail b { color: #eaecef; font-family: ui-monospace, monospace; }
.so-input input {
  width: 100%;
  background: #1e2329;
  border: 1px solid #2b3139;
  border-radius: 6px;
  color: #eaecef;
  padding: 11px 12px;
  font-family: var(--num);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  outline: none;
}
.so-input input:focus { border-color: #f68f15; }
.so-input.so-with-unit {
  position: relative;
  display: flex;
  align-items: center;
}
.so-input.so-with-unit input {
  padding-right: 64px;
}
.so-amt-unit {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 600;
  color: #848e9c;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.so-field-hint {
  margin-top: 4px;
  font-size: 11px;
  color: #848e9c;
}
.so-pct {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-bottom: 8px;
}
.so-pct button {
  appearance: none; border: 1px solid #2b3139; background: #1e2329;
  color: #848e9c; padding: 6px 0; border-radius: 4px; font: inherit; font-size: 11px; cursor: pointer;
}
.so-pct button:hover { color: var(--bp-btn-ink); background: var(--bp-btn); border-color: var(--bp-accent); }
.so-sum {
  padding: 8px 10px;
  border-radius: 8px;
  background: #1e2329;
  border: 1px solid #2b3139;
  display: grid;
  gap: 5px;
  font-size: 12px;
  margin-bottom: 8px;
}
.so-sum div { display: flex; justify-content: space-between; color: #848e9c; }
.so-sum b { color: #eaecef; }

.bet-status {
  margin-bottom: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  background: rgba(246,143,21,.08);
  color: #f68f15;
  border: 1px solid rgba(246,143,21,.2);
}
.bet-status.ok {
  background: rgba(14,203,129,.12); color: #0ecb81; border-color: rgba(14,203,129,.25);
}
.bet-status.locked {
  background: rgba(246,70,93,.12); color: #f6465d; border-color: rgba(246,70,93,.25);
}

.so-submit {
  width: 100%;
  border: 0;
  border-radius: 6px;
  padding: 12px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}
.so-submit.buy { background: #0ecb81; color: #fff; }
.so-submit.sell { background: #f6465d; color: #fff; }
.so-submit.buy:hover { filter: brightness(1.06); }
.so-submit.sell:hover { filter: brightness(1.06); }
.so-submit:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.so-note {
  margin: 10px 0 0;
  font-size: 11px;
  color: #848e9c;
  line-height: 1.45;
}

.hint-pill {
  padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
}
.hint-pill.LONG { background: rgba(14,203,129,.15); color: #0ecb81; }
.hint-pill.SHORT { background: rgba(246,70,93,.15); color: #f6465d; }
.hint-pill.FLAT { background: rgba(132,142,156,.2); color: #848e9c; }

.toast { display: none !important; }

/* ===== 레이어 팝업 ===== */
body.bp-modal-open { overflow: hidden; }
.bp-modal-root {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.bp-modal-root[hidden] { display: none !important; }
.bp-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(4px);
}
.bp-modal {
  position: relative;
  width: min(92vw, 400px);
  background: linear-gradient(180deg, #1a1f27 0%, #12161c 100%);
  border: 1px solid #2b3139;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,.55);
  padding: 22px 22px 18px;
  text-align: center;
  animation: bpModalIn .16s ease-out;
}
@keyframes bpModalIn {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.bp-modal-ico {
  width: 44px;
  height: 44px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 800;
  font-family: var(--num);
}
.bp-modal-ico.info { background: rgba(246,143,21,.15); color: #f68f15; }
.bp-modal-ico.ok { background: rgba(14,203,129,.15); color: #0ecb81; }
.bp-modal-ico.err { background: rgba(246,70,93,.15); color: #f6465d; }
.bp-modal-title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: #eaecef;
}
.bp-modal-body {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.55;
  color: #848e9c;
  white-space: pre-wrap;
  word-break: keep-all;
}
.bp-modal-field { margin: 0 0 14px; }
.bp-modal-field input {
  width: 100%;
  height: 44px;
  border-radius: 10px;
  border: 1px solid #2b3139;
  background: #000000;
  color: #eaecef;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  outline: none;
  font-variant-numeric: tabular-nums;
}
.bp-modal-field input:focus { border-color: #f68f15; }
.bp-modal-actions {
  display: flex;
  gap: 8px;
}
.bp-modal-btn {
  flex: 1;
  height: 42px;
  border-radius: 10px;
  border: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.bp-modal-btn.ghost {
  background: #1e2329;
  color: #eaecef;
  border: 1px solid #2b3139;
}
.bp-modal-btn.ghost:hover { background: #2b3139; }
.bp-modal-btn.primary {
  background: var(--bp-btn);
  color: var(--bp-btn-ink);
}
.bp-modal-btn.primary:hover { filter: brightness(1.05); }
.bp-modal-root.kind-err .bp-modal-btn.primary {
  background: linear-gradient(90deg, #f6465d, #ff7a8a);
  color: #fff;
}
.bp-modal-root.kind-ok .bp-modal-btn.primary {
  background: linear-gradient(90deg, #0ecb81, #2ee6a0);
  color: #04140f;
}

.badge {
  display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700;
}
.badge.LONG, .badge.won { background: rgba(14,203,129,.15); color: #0ecb81; }
.badge.SHORT, .badge.lost { background: rgba(246,70,93,.15); color: #f6465d; }
.badge.pending { background: rgba(246,143,21,.15); color: #f68f15; }
.badge.draw { background: rgba(132,142,156,.2); color: #848e9c; }
.badge.cross { background: rgba(246,143,21,.15); color: #f68f15; }
.badge.iso { background: rgba(246,143,21,.18); color: #f68f15; }
.badge.open { background: rgba(246,143,21,.15); color: #f68f15; }
.t-margin .locked { font-style: normal; font-size: 10px; color: #f68f15; margin-left: 2px; }
.pos-acts { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.btn-pos {
  appearance: none;
  border: 1px solid #2b3139;
  background: #1e2329;
  color: #eaecef;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 7px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.btn-pos:hover { border-color: var(--bp-accent); color: var(--bp-accent); }
.btn-pos.danger:hover { border-color: #f6465d; color: #f6465d; }
.btn-pos:disabled { opacity: .4; cursor: default; }

/* 선물 포지션 탭 */
.sb-tabs .tab-cnt {
  font-style: normal; font-size: 11px; font-weight: 700;
  margin-left: 4px; padding: 1px 5px; border-radius: 8px;
  background: rgba(246,143,21,.16); color: #f68f15;
}
.pos-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border-bottom: 1px solid #1e2329; flex-wrap: wrap;
}
.pos-sum { display: flex; align-items: center; gap: 14px; font-size: 12px; color: #848e9c; flex-wrap: wrap; }
.pos-sum b { color: #eaecef; font-weight: 700; margin-left: 4px; }
.pos-sum b.up { color: #0ecb81; }
.pos-sum b.dn { color: #f6465d; }
.badge.lev { background: rgba(132,142,156,.18); color: #eaecef; margin-left: 4px; }
.mm-sub { font-style: normal; font-size: 10px; color: #848e9c; }
/* 종료(reduce-only) 모드: 증거금·레버리지·주문유형 입력을 숨긴다 */
.spot-order[data-entry="close"] #fieldAmount,
.spot-order[data-entry="close"] .so-lev,
.spot-order[data-entry="close"] #fieldPrice { display: none !important; }
.spot-order[data-entry="close"] .so-submit { background: #4a5058; }
.spot-order[data-entry="close"] .so-submit.buy { background: #0ecb81; }
.spot-order[data-entry="close"] .so-submit.sell { background: #f6465d; }
.t-qty .money-sub { display: block; font-style: normal; font-size: 10px; color: #848e9c; }
.t-liq { color: #f6465d; }

body.binance-page,
body.bithumb-page { background: #000000; }
body.binance-page .site-footer,
body.bithumb-page .site-footer { display: none; }
.trade-page-head { display: none; }

.fx-modebar { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.fx-margin { display: inline-flex; border: 1px solid #2b3139; border-radius: 6px; overflow: hidden; }
.fx-margin button {
  appearance: none; border: 0; background: transparent; color: #848e9c;
  height: 28px; padding: 0 10px; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
}
.fx-margin button.on { background: #2b3139; color: #eaecef; }
.fx-lev-chip {
  appearance: none; height: 28px; padding: 0 10px; border-radius: 6px;
  border: 1px solid #2b3139; background: transparent; color: var(--bp-accent);
  font: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
}
.fx-switch-group {
  display: inline-flex;
  border: 1px solid #2b3139;
  border-radius: 6px;
  overflow: hidden;
}
.fx-switch {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px;
  border: 0; border-radius: 0; color: #848e9c; background: transparent;
  text-decoration: none; font-size: 11px; font-weight: 700;
}
.fx-switch + .fx-switch { border-left: 1px solid #2b3139; }
.fx-switch-ico { flex-shrink: 0; display: block; opacity: .85; }
.fx-switch:hover { color: #eaecef; background: rgba(255,255,255,.04); }
.fx-switch.on {
  color: var(--bp-btn-ink);
  background: var(--bp-btn);
}
.fx-switch.on .fx-switch-ico { opacity: 1; }
.fx-switch.on:hover { color: var(--bp-btn-ink); background: var(--bp-btn); filter: brightness(1.05); }

.ex-logo {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  display: inline-grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
}
.ex-logo.bithumb { background: #f37321; color: #fff; }
.ex-logo.upbit { background: #093687; color: #fff; }
.ex-logo.binance { background: #f0b90b; color: #111; }
.ex-logo.bitget { background: #00f0ff; color: #05242a; }
.ex-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid #2b3139;
  background: #131516;
  color: #eaecef;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.ex-switch-group .fx-switch {
  gap: 8px;
  min-width: 108px;
}
.venue-upbit .ex-switch.on .ex-logo.upbit,
.venue-bithumb .ex-switch.on .ex-logo.bithumb,
.venue-binance .ex-switch.on .ex-logo.binance,
.venue-bitget .ex-switch.on .ex-logo.bitget {
  box-shadow: 0 0 0 1px rgba(255,255,255,.25);
}
/* 비트겟은 브랜드 컬러(시안)로 강조 */
.venue-bitget .ex-switch.on {
  background: #00f0ff;
  color: #05242a;
  border-color: #00f0ff;
}
.venue-bitget .ex-switch.on:hover { background: #00f0ff; color: #05242a; filter: brightness(1.05); }
/* 현물↔선물 전환 */
.ex-switch-group .kind-switch {
  min-width: 0;
  padding: 0 12px;
  color: #848e9c;
  font-weight: 600;
}
.ex-switch-group .kind-switch:hover { color: #eaecef; }
.ticker-stats b.up { color: #0ecb81; }
.ticker-stats b.down { color: #f6465d; }

.so-entry {
  display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 8px;
  border: 1px solid #2b3139; border-radius: 6px; overflow: hidden;
}
.so-entry button {
  appearance: none; border: 0; background: transparent; color: #848e9c;
  height: 34px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.so-entry button.on { background: var(--bp-btn); color: var(--bp-btn-ink); }
.so-lev { margin-bottom: 8px; }
.so-lev-label { display: block; font-size: 12px; color: #848e9c; margin-bottom: 6px; }
.so-lev-btns { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.so-lev-btns button {
  appearance: none; border: 1px solid #2b3139; background: #1e2329; color: #848e9c;
  height: 28px; border-radius: 4px; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
}
.so-lev-btns button.on { color: var(--bp-btn-ink); background: var(--bp-btn); border-color: var(--bp-accent); }
.so-lev-btns button:hover:not(.on) { color: #eaecef; border-color: #474d57; }
.so-input.so-step { display: flex; gap: 4px; }
.so-input.so-step input { flex: 1; }
.so-input.so-step button {
  width: 36px; appearance: none; border: 1px solid #2b3139; background: #1e2329;
  color: #848e9c; border-radius: 6px; font: inherit; font-weight: 700; cursor: pointer;
}
.so-input.so-step button:hover { color: var(--bp-btn-ink); background: var(--bp-btn); border-color: var(--bp-accent); }
.mode-futures .so-tabs button.buy.on { color: #fff; background: #0ecb81; }
.mode-futures .so-tabs button.sell.on { color: #fff; background: #f6465d; }
.so-input input:focus { border-color: #f68f15; }

@media (max-width: 1200px) {
  .spot-body {
    grid-template-columns: minmax(0, 1.5fr) minmax(200px, 0.4fr) minmax(260px, 0.45fr);
    grid-template-rows: minmax(0, 1fr) minmax(200px, 34%);
  }
}
@media (max-width: 980px) {
  .spot-shell { height: auto; overflow: visible; min-height: calc(100dvh - 64px); }
  .spot-body {
    display: flex;
    flex-direction: column;
    grid-template-columns: unset;
    grid-template-rows: unset;
    grid-template-areas: unset;
    height: auto;
  }
  /* 차트 높이 고정 — 아래 호가와 벌어지지 않게 */
  .spot-chart {
    border-right: 0;
    flex: none;
    height: auto;
    min-height: 0;
    max-height: none;
  }
  .spot-toolbar { flex-wrap: wrap; }
  #tv_chart {
    flex: none;
    width: 100%;
    height: 280px;
    min-height: 280px;
    max-height: 280px;
  }
  .spot-mid {
    display: flex;
    flex-direction: column;
    grid-template-rows: unset;
    border-right: 0;
    border-top: 1px solid #1e2329;
    flex: none;
    height: auto;
    min-height: 0;
  }
  .spot-book {
    border-right: 0;
    flex: none;
    height: 300px;
    min-height: 300px;
  }
  .spot-trades {
    border-right: 0;
    flex: none;
    height: 200px;
    min-height: 200px;
  }
  .spot-order-wrap {
    border-top: 1px solid #1e2329;
    min-height: 0;
    height: auto;
    overflow: visible;
  }
  .spot-order {
    overflow: visible;
    height: auto;
  }
  .spot-bottom { min-height: 200px; height: 200px; border-right: 0; }
}
@media (max-width: 720px) {
  .spot-pairbar { padding: 10px; gap: 10px; }
  .sp-left .live { font-size: 18px; }
  .sp-left .live-usd { font-size: 11px; }
  .pair-picker-txt strong { font-size: 16px; }
  .pair-drop { width: min(100vw - 20px, 360px); left: -4px; }
  #tv_chart {
    height: 240px;
    min-height: 240px;
    max-height: 240px;
  }
  .spot-book { height: 280px; min-height: 280px; }
  .spot-trades { height: 180px; min-height: 180px; }
}

.t-fee { color:#a1a6ad; white-space:nowrap; }

/* 선물 주문내역 — 2줄 셀 레이아웃 */
body[data-mode="futures"] #paneHist table { min-width: 1180px; }
.spot-bottom th .th-sub { display: block; font-style: normal; font-size: 10px; color: #5e6673; margin-top: 2px; font-weight: 400; }
.spot-bottom td.c2 { line-height: 1.35; }
.spot-bottom td.c2 > em { display: block; font-style: normal; font-size: 10px; color: #848e9c; margin-top: 2px; font-weight: 400; }
.spot-bottom td.c2 > em.up { color: #0ecb81; }
.spot-bottom td.c2 > em.dn { color: #f6465d; }
.spot-bottom td.t-sym .sym-sub { display: flex; gap: 4px; margin-top: 3px; font-style: normal; }
.spot-bottom td.t-sym .sym-sub .badge { margin-left: 0; font-size: 10px; padding: 1px 5px; }
.badge.mm { background: rgba(132,142,156,.18); color: #a1a6ad; }
.spot-bottom td.t-dim { color: #5e6673; }