/* =========================
   거래소 화면(참고 사이트 레이아웃)
   - 기능 없음, UI/디자인만
   - 100% 폭 + 3열 3/4/3 + 반응형 개선
========================= */

:root{
  --bg:#f4f6f8;
  --line:#dfe5ea;
  --text:#1a1f24;
  --muted:#6c7a89;
  --blue:#2d6cdf;
  --red:#d84a4a;
  --card:#ffffff;
}

/* ✅ 화면 100% 사용 (좌우 여백 제거) */
.ex2{
  background: var(--bg);
  min-height: calc(100vh - 72px);
  padding: 0;                 /* ✅ 기존 16px 0 26px 제거 */
}

/* ✅ 고정폭 제거 + 3/4/3 비율 + 컬럼 딱 붙게 */
.ex2__wrap {
  display: grid;
  grid-template-columns: 3fr 5fr 3fr;
}


/* ✅ 원본처럼 컬럼 구분선 */
.ex2__left{ border-right: 1px solid var(--line); }
.ex2__center{ border-right: 1px solid var(--line); }

/* ✅ 카드 모서리 각지게 (원본 느낌) */
.card2{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0;
  overflow: hidden;
}
.card2--pad{ padding: 0; }

.up{ color: var(--red); font-weight: 700; }    /* 참고사이트: 상승=빨강 */
.down{ color: var(--blue); font-weight: 700; } /* 하락=파랑 */

/* ===== 좌측 ===== */
.card2__tabs{
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--line);
}
.tab2{
  border: 0;
  background: #fff;
  padding: 12px 0;
  font-weight: 800;
  color: #2b3a42;
  cursor: pointer;
}
.tab2.is-active{
  color: var(--blue);
  box-shadow: inset 0 -2px 0 var(--blue);
}

.coinbox{ padding: 10px 12px 12px; }
.coinbox__top{
  display: grid;
  grid-template-columns: 72px 80px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--line);
}
.coinbox__icon{
  width: 56px; height: 56px;
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  background: #f39c12;
  color: #fff;
  font-size: 26px;
  font-weight: 900;
  margin-left: 6px;
}
.coinbox__sym{ font-weight: 900; font-size: 18px; }
.coinbox__kv{ display: grid; gap: 6px; }

.kvrow{ display:flex; justify-content:space-between; gap: 10px; font-size: 12px; }
.kvrow__k{ color: var(--muted); font-weight: 700; }
.kvrow__v{ color: var(--text); font-weight: 800; }
.unit{ color: var(--muted); font-weight: 700; }

.markethead{
  display:grid;
  grid-template-columns: 1.2fr .9fr .7fr .9fr;
  gap: 6px;
  padding: 10px 0;
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
}
.marketlist{
  display: grid;
  gap: 0;
  max-height: calc(100vh - 240px);
  overflow: auto;
  border-top: 1px solid var(--line);
}
.row{
  width: 100%;
  text-align: left;
  border: 0;
  background: #fff;
  padding: 10px 0;
  display:grid;
  grid-template-columns: 1.2fr .9fr .7fr .9fr;
  gap: 6px;
  align-items:center;
  border-bottom: 1px solid #eef2f5;
  cursor: pointer;
}
.row:hover{ background: #f7f9fb; }
.row.is-active{ background: #f2f7ff; }

.row__c{ display:flex; gap: 8px; align-items:center; }
.dot{ width: 10px; height: 10px; border-radius: 50%; display:inline-block; }
.dot--btc{ background: #f39c12; }
.dot--eth{ background: #4b7bec; }
.dot--etc{ background: #95a5a6; }

.row__cname{ line-height: 1.1; }
.row__main{ font-weight: 900; font-size: 13px; }
.row__sub{ font-size: 11px; color: var(--muted); margin-top: 4px; }

.row__p,.row__r,.row__v{ font-size: 12px; font-weight: 800; }

/* ===== 중앙 차트 ===== */
.chartbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.mini{ font-size: 12px; color: #2b3a42; font-weight: 800; }
.chartbar__right{ display:flex; gap: 8px; }
.ibtn{
  border: 1px solid var(--line);
  background: #fff;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

/* (선택) 원본 차트가 더 커 보여서 520으로 조정 */
.chartarea{
  height: 520px;
  background: #fff;
}
.chartarea__ph{
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color: #8aa0b2;
  font-weight: 900;
  border-top: 1px solid #fff;
  background: repeating-linear-gradient(
    135deg,
    #ffffff,
    #ffffff 10px,
    #f6f8fa 10px,
    #f6f8fa 20px
  );
}

/* ===== 중앙 하단 주문 영역 ===== */
/* ===== 중앙 하단 탭 (4등분 정확 버전) ===== */

.ordertabs{
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* ✅ 정확히 4등분 */
  border-bottom: 1px solid var(--line);
  background: #fff;
}

/* 탭 버튼 */
.tab3{
  border: 0;
  background: #fff;
  height: 56px;                 /* 이미지와 동일한 높이 */
  font-weight: 900;
  font-size: 14px;
  color: #2b3a42;
  cursor: pointer;

  display: flex;                /* ✅ 텍스트 완전 중앙 */
  align-items: center;
  justify-content: center;

  position: relative;
}

/* 세로 구분선 */
.tab3:not(:last-child){
  border-right: 1px solid #e6ebf0;
}

/* 활성 탭 */
.tab3.is-active{
  color: var(--blue);
}

/* 활성 탭 하단 파란 라인 */
.tab3.is-active::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--blue);
}


.panel2{ display:none; }
.panel2.is-active{ display:block; }

.tradeform{ padding: 14px; background:#fff; }
.tradeform__row{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap: 10px;
  align-items:start;
  padding: 10px 0;
}
.label{ color: #2b3a42; font-weight: 900; font-size: 13px; padding-top: 8px; }
.ctrl{ display:grid; gap: 6px; }
.ctrl--line{ display:flex; gap: 8px; align-items:center; }

.chk{ font-weight: 800; font-size: 13px; color:#2b3a42; display:flex; gap: 8px; align-items:center; }

.sel{
  height: 38px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 0 10px;
  font-weight: 800;
  font-size: 13px;
}
.inp{
  width: 100%;
  height: 38px;
  border: 1px solid var(--line);
  padding: 0 10px;
  font-size: 13px;
  font-weight: 800;
  background: #fff;
}

.step{ display:flex; border: 1px solid var(--line); height: 38px; }
.step__b{
  width: 36px;
  border: 0;
  background:#fff;
  cursor:pointer;
  font-weight: 900;
}
.step__b + .step__b{ border-left: 1px solid var(--line); }

.hint{ font-size: 12px; color: var(--muted); font-weight: 700; }

.pct{ display:flex; gap: 8px; flex-wrap: wrap; }
.pct__b{
  border: 1px solid var(--line);
  background: #fff;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.fees{
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid #eef2f5;
  font-size: 12px;
  color: #44505c;
  font-weight: 700;
  text-align:center;
}

.buySell{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.buySell__b{
  height: 52px;
  border: 0;
  font-weight: 900;
  font-size: 16px;
  cursor: pointer;
  color: #fff;
}
.buySell__b--buy{ background: var(--red); }
.buySell__b--sell{ background: var(--blue); }

.empty{
  padding: 30px 14px;
  color: var(--muted);
  font-weight: 800;
  background: #fff;
}

/* ===== 우측 ===== */
.righthead{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.righthead__title{ font-weight: 900; color:#2b3a42; font-size: 12px; }
.righthead__sub{ font-weight: 900; color:#2b3a42; font-size: 12px; }

.booktabs{
  display:grid;
  grid-template-columns: 1.2fr .7fr 1.2fr;
  border-bottom: 1px solid var(--line);
}
.tab4{
  border: 0;
  background: #fff;
  padding: 10px 8px;
  font-size: 11px;
  font-weight: 900;
  color: #2b3a42;
  cursor: pointer;
}
.tab4.is-active{
  box-shadow: inset 0 -2px 0 var(--blue);
  color: var(--blue);
}

.orderbook{
  position: relative;
  padding: 10px 12px 0;
  background:#fff;
}
.ob__head{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  font-size: 11px;
  color: var(--muted);
  font-weight: 900;
  padding: 6px 0 8px;
}
.ob__body{
  display:grid;
  gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eef2f5;
}
.ob__row{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  font-size: 12px;
  font-weight: 900;
  align-items:center;
}
.ob__m{ text-align:center; }
.ob__l{ text-align:left; }
.ob__r{ text-align:right; }
.ob__row--mid .ob__m{
  background:#f7f9fb;
  border: 1px solid #eef2f5;
  padding: 6px 0;
}

.obstats{
  padding: 10px 0 0;
  display:grid;
  gap: 6px;
}
.obstats__row{
  display:flex;
  justify-content:space-between;
  font-size: 12px;
  font-weight: 900;
  color:#2b3a42;
}
.trades{
  padding: 10px 12px 12px;
  background:#fff;
}
.trades__head{
  display:grid;
  grid-template-columns: 1fr 1fr;
  font-size: 11px;
  color: var(--muted);
  font-weight: 900;
  padding: 6px 0 8px;
}
.trades__body{ display:grid; gap: 6px; }
.trow{
  display:grid;
  grid-template-columns: 1fr 1fr;
  font-size: 12px;
  font-weight: 900;
}
.trow > div:last-child{ text-align:right; }

/* ===== 반응형 =====
   - 1200px 이하: 2열(좌+중) / 우측 아래로
   - 860px 이하: 1열 스택
*/
@media (max-width: 1200px){
  .ex2__wrap{
    grid-template-columns: 1fr 1.2fr; /* ✅ 100% 기반 2열 */
  }
  .ex2__right{
    grid-column: 1 / -1;
    border-top: 1px solid var(--line);
  }
  .ex2__center{ border-right: 0; }
}

@media (max-width: 860px){
  .ex2__wrap{
    grid-template-columns: 1fr;
  }
  .ex2__left{ border-right: 0; }
  .ex2__center{ border-right: 0; }

  .tradeform__row{
    grid-template-columns: 1fr;
  }
  .label{ padding-top: 0; }
}

/* =========================
   우측 박스 (그림 기준 최종 구조)
========================= */

.rightbox2{ background:#fff; }

/* 상단 2탭(버튼) */
.rtop{
  display:grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--line);
}
.rtop__tab{
  border:0;
  background:#fff;
  padding: 12px 10px;
  font-weight:900;
  font-size: 13px;
  cursor:pointer;
}
.rtop__tab.is-active{
  color: var(--blue);
  box-shadow: inset 0 -2px 0 var(--blue);
}

/* 제목 1개: 호가 */
.rhead{
  border-bottom: 1px solid var(--line);
  background:#fff;
}
.rhead__title{
  padding: 12px 10px;
  text-align:center;
  font-weight: 900;
  font-size: 12px;
  color:#2b3a42;
}

/* 2등분(6:4) */
.rmain{
  display:grid;
  grid-template-columns: 6fr 4fr;
  gap: 0;
}
.rmain__left{
  border-right: 1px solid var(--line);
}

/* ---------- (이미지2) 오더북 표 ---------- */
.otable{
  width:100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.otable td{
  border-bottom: 1px solid #eef2f5;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 800;
  vertical-align: middle;
  position: relative;
  height: 28px;
}

/* 세로 구분선: (판매수량|호가|%|구매수량) */
.otable .tdSell{ border-right: 1px solid #eef2f5; }
.otable .tdPct{
  border-right: 1px solid #eef2f5;
  text-align:center;
  color:#2b3a42;
  opacity:.9;
  font-weight:900;
}
.otable .tdPrice{ text-align:left; padding-left: 10px; font-weight: 900; border-right: 1px solid #eef2f5;}

.ask .up{background: rgba(216, 74, 74, .08);}
.bid .down{background: rgba(60, 130, 255, .18) !important;}
.tr{ text-align:right; }

/* 현재가 */
.otable .tdMid{
  text-align:center;
  background:#f7f9fb;
  border: 1px solid #eef2f5;
  font-weight: 900;
  padding: 8px 0 !important;
}

/* 바(중앙 기준) */
.bar{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  height: 16px;
  opacity:.45;
  z-index:0;
  border-radius:2px;
}
.bar--sell{ right:0; background:#dfefff; } /* 중앙→왼쪽 */
.bar--buy{ left:0;  background:#ffe4e4; } /* 중앙→오른쪽 */
.val{ position:relative; z-index:1; }

/* ---------- 오른쪽 4영역 ---------- */
.rmain__right{ background:#fff; }

.rsec__title{
  padding: 10px 10px;
  font-weight: 900;
  font-size: 12px;
  color:#2b3a42;
  border-bottom: 1px solid #eef2f5;
  background:#fff;
}
.rsec--mt{ margin-top: 10px; }

/* 요약(이미지3) */
.rstats{ padding: 6px 10px 10px; }
.statrow{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #eef2f5;
  font-size: 12px;
  font-weight: 900;
}
.statrow:last-child{ border-bottom:0; }

/* ✅ 우측 요약 전용 mini (기존 .mini와 분리) */
.statMini{
  font-size: 11px;
  font-weight: 800;
  opacity: .85;
  margin-left: 6px;
}

/* ---------- (이미지4) 체결 테이블(2컬럼) ---------- */
.rtable2{
  width:100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.rtable2 th, .rtable2 td{
  border-bottom: 1px solid #eef2f5;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 800;
}
.rtable2 th{
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  background:#fff;
}
/*.t-ask td{ background: rgba(216, 74, 74, .08); }
.t-bid td{ background: rgba(45, 108, 223, .08); }*/

/* 반응형 */
@media (max-width: 860px){
  .rmain{ grid-template-columns: 1fr; }
  .rmain__left{ border-right: 0; border-bottom: 1px solid var(--line); }
}

/* 상단 탭에 따라 본문 패널 전환 */
.rpanel{ display:none; }
.rpanel.is-active{ display:block; }

/* 전체 체결내역 서브탭 */
.hsub{
  padding: 10px 10px;
  border-bottom: 1px solid var(--line);
  background:#fff;
  display:flex;
  gap: 8px;
}
.hsub__tab{
  border: 1px solid #d9e0e6;
  background: #f5f7f9;
  padding: 6px 12px;
  font-weight: 900;
  font-size: 12px;
  cursor:pointer;
  color:#2b3a42;
}
.hsub__tab.is-active{
  background:#fff;
  border-color:#bfcad4;
}

/* 서브패널 */
.hpanel{ display:none; }
.hpanel.is-active{ display:block; }

/* 체결내역 테이블 */
.htable{
  width:100%;
  border-collapse: collapse;
  table-layout: fixed;
  background:#fff;
}
.htable th, .htable td{
  border-bottom: 1px solid #eef2f5;
  padding: 10px 10px;
  font-size: 12px;
  font-weight: 800;
}
.htable th{
  background:#fafbfc;
  color:#2b3a42;
  font-weight: 900;
}
.hbtnRow{ text-align:center; background:#fff; }
.hbtn{
  border: 1px solid #cfd8df;
  background:#f4f6f8;
  padding: 10px 18px;
  font-weight: 900;
  cursor:pointer;
}
/* 좌측 코인 리스트 영역이 길어질 때 보기 좋게 */
.ex2__left .marketlist{
  max-height: calc(100vh - 210px);
  overflow: auto;
}
.ex2__left .marketlist::-webkit-scrollbar{ width: 10px; }
.ex2__left .marketlist::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.10);
  border-radius: 999px;
}
.ex2__left .marketlist::-webkit-scrollbar-track{
  background: transparent;
}
/* 중앙 차트 영역 실제로 꽉 차게 */
.tvChart{
  width: 100%;
  height: 520px; /* 필요하면 600~700으로 */
}

/* 중앙 카드 안에서 차트가 위아래 꽉 차게 */
.chartarea{
  min-height: 520px;
}

/* =========================
   ✅ 1200px 고정 레이아웃
   - 페이지는 필요하면 스크롤(전역 막지 않음)
   - 좌/우는 내부 스크롤
   - 중앙은 1200 안에서만 조절
========================= */

.ex2 {
  height: 1200px;           /* ✅ 전체 높이 고정 */
}

.ex2__wrap {
  height: 1200px;           /* ✅ 3컬럼 모두 같은 높이 */
  display: grid;
  grid-template-columns: 420px 1fr 420px; /* 필요시 조절 */
  gap: 10px;
  align-items: stretch;
}

.ex2__left, .ex2__center, .ex2__right {
  height: 1200px;
  min-height: 0;
}

/* ✅ 좌측: 리스트만 스크롤 */
.ex2__left .card2 {
  height: 1200px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ex2__left .coinbox {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ex2__left .marketlist {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;      /* ✅ 좌측 스크롤 */
}

/* ✅ 중앙: 1200안에서 차트/주문 비율 조절 */
.ex2__center {
  height: 1200px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

/* 차트 카드가 위쪽 영역을 차지 */
.ex2__center > .card2:first-child {
  flex: 0 0 520px;       /* ✅ 차트 높이(대표님 원하는대로 조절) */
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.ex2__center > .card2:first-child .chartarea {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* 주문 카드가 아래 영역 */
.ex2__center > .card2.card2--pad {
  flex: 1 1 auto;        /* ✅ 나머지 높이 전부 */
  min-height: 0;
  overflow: hidden;      /* 중앙 스크롤은 우선 막고, 필요시 여기만 auto로 바꿀 수 있음 */
}

/* ✅ 우측: 카드 내부 스크롤 + "너무 많이 노출" 줄이기 */
.ex2__right .card2.rightbox2 {
  height: 1200px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* 상단 탭은 고정, 패널만 높이 차지 */
.ex2__right .rpanel.is-active {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ✅ 우측의 메인(호가/요약) 영역을 "반 정도"로 보이게: 스크롤로 더 보기 */
.ex2__right .rmain {
  flex: 0 0 540px;       /* ✅ 여기 값을 줄이면 우측 노출이 '반'으로 줄어듦 (예: 480~600) */
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* 호가/요약 각각 내부 스크롤 */
.ex2__right .rmain__left,
.ex2__right .rmain__right {
  min-height: 0;
  overflow-y: auto;      /* ✅ 우측 내부 스크롤 */
}

/* ✅ 우측 아래 "판매가(매도)전체 미체결" 같은 영역이 길어지면 여기서 스크롤 */
.ex2__right .rpanel.is-active {
  overflow: hidden;
}

/* =========================
   ✅ 거래소 1050px 고정 레이아웃 (3/4/3)
   - 좌/우 내부 스크롤
   - 중앙은 스크롤 없음(필요 시 아래에서만 스크롤)
   - 화면이 좁아지면(태블릿/모바일) 자동 1~2컬럼으로 내려가도록 안전장치 포함
========================= */

/* (1) 페이지 전체 높이 */
.ex2 {
  height: 1050px; /* ✅ 1200 -> 1050 */
}

/* (2) 3컬럼 그리드: 3/4/3 비율 */
.ex2__wrap {
  height: 1050px;
  display: grid;
  grid-template-columns: 3fr 4fr 3fr; /* ✅ 핵심: 3/4/3 */
  gap: 10px;
  align-items: stretch;
  min-height: 0;
}

/* (3) 각 컬럼 공통 */
.ex2__left,
.ex2__center,
.ex2__right {
  height: 1050px;
  min-height: 0;
}

/* =========================
   ✅ 좌측: 리스트만 스크롤
========================= */
.ex2__left .card2 {
  height: 1050px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ex2__left .coinbox {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ex2__left .marketlist {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* =========================
   ✅ 중앙: 1050 안에서 차트/주문 배치
   - 중앙은 기본 "스크롤 없음"
   - 주문 영역이 넘치면 아래 카드만 스크롤로 바꿀 수 있게 주석 제공
========================= */
.ex2__center {
  height: 1050px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

/* 위(차트) */
.ex2__center > .card2:first-child {
  flex: 0 0 520px; /* 필요시 480~560 조절 */
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.ex2__center > .card2:first-child .chartarea {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* 아래(주문) */
.ex2__center > .card2.card2--pad {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden; /* 중앙 전체 스크롤 방지 */
  /* 만약 주문이 넘치면 아래만 스크롤로:
     overflow-y: auto;
  */
}

/* =========================
   ✅ 우측: 내부 스크롤 + 높이 맞춤
========================= */
.ex2__right .card2.rightbox2 {
  height: 1050px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* 탭/패널 */
.ex2__right .rpanel.is-active {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 우측 상단(호가/요약) 영역 */
.ex2__right .rmain {
  flex: 0 0 520px;   /* ✅ 노출 높이 (너무 길면 480~560 조절) */
  min-height: 0;
  overflow: hidden;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.ex2__right .rmain__left,
.ex2__right .rmain__right {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* 아래(체결/미체결 등) 영역이 길면 여기서 스크롤 */
.ex2__right .rpanel.is-active .rsub,
.ex2__right .rpanel.is-active .rfooter,
.ex2__right .rpanel.is-active .rlist {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* =========================
   ✅ 반응형 안전장치 (해상도 좁아질 때 레이아웃 깨짐 방지)
   - 1200px 아래: 2컬럼(좌+중, 우는 아래로)
   - 860px 아래: 1컬럼
========================= */
@media (max-width: 1200px) {
  .ex2__wrap {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "left center"
      "right right";
  }
  .ex2__left { grid-area: left; }
  .ex2__center { grid-area: center; }
  .ex2__right { grid-area: right; }
}

@media (max-width: 860px) {
  .ex2 {
    height: auto;
  }
  .ex2__wrap {
    height: auto;
    grid-template-columns: 1fr;
    grid-template-areas:
      "left"
      "center"
      "right";
  }

  .ex2__left,
  .ex2__center,
  .ex2__right {
    height: auto;
  }

  .ex2__left .card2,
  .ex2__right .card2.rightbox2 {
    height: auto;
  }
}

/* =========================
   ✅ 좌/우 1050 높이를 "끝까지" 쓰도록 강제
   - 스크롤은 내부 list 영역에만
========================= */

/* 좌/우 컬럼은 이미 1050이지만 안전하게 한번 더 */
.ex2__left,
.ex2__right {
  height: 1050px;
  min-height: 0;
}

/* ✅ 좌측 카드: header + body 구조로 남은 높이 100% 사용 */
.ex2__left .card2 {
  height: 1050px;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* 좌측 상단 요약(아이콘/Quotes/Rate/Volume) 영역은 고정 */
.ex2__left .card2 > :first-child {
  flex: 0 0 auto;
}

/* ✅ 좌측 리스트(시장리스트) 영역은 남은 높이 전부 + 스크롤 */
.ex2__left .marketlist {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ✅ 우측 카드도 동일하게: header(탭) 고정 + body(패널) 1050 끝까지 */
.ex2__right .card2.rightbox2 {
  height: 1050px;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* 우측 탭 영역(상단)은 고정 */
.ex2__right .card2.rightbox2 > :first-child {
  flex: 0 0 auto;
}

/* ✅ 우측 활성 패널은 남은 높이 전부 */
.ex2__right .rpanel.is-active {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 바깥은 숨기고 */
}

/* ✅ 우측의 실제 스크롤은 "패널 내부 콘텐츠"에 */
.ex2__right .rpanel.is-active .rmain {
  flex: 1 1 auto;        /* ✅ 남은 높이 전부 먹게 변경 */
  min-height: 0;
  overflow: hidden;      /* 내부 2컬럼이 스크롤 */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* 호가/요약 각각은 내부 스크롤 */
.ex2__right .rmain__left,
.ex2__right .rmain__right {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* EXCHANGE theme overrides */
.ex2,
.ex2__wrap {
  background: var(--bg);
  color: var(--text);
}

.card2 {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.markethead,
.ordertabs,
.rtop,
.hsub {
  border-bottom: 1px solid var(--border);
}

.markethead__c,
.markethead__p,
.markethead__r,
.markethead__v,
.kvrow__k,
.rhead__title,
.rsec__title {
  color: var(--muted);
}

.kvrow__v,
.statrow > div:last-child {
  color: var(--text);
}

/* 테이블류 */
.otable td,
.htable td,
.rtable2 td {
  border-bottom: 1px solid var(--border);
}
.htable th,
.rtable2 th {
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}

/* 패널/탭 active 라인 색 */
.tab2.is-active,
.tab3.is-active,
.rtop__tab.is-active,
.hsub__tab.is-active {
  color: var(--primary);
}

/* 입력/버튼 */
.inp, .sel {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}
.step__b,
.pct__b {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
}
.step__b:hover,
.pct__b:hover {
  background: var(--surface);
}

/* 가운데 주문 폼 설명 */
.fees, .hint {
  color: var(--muted);
}

/* =========================================================
   EX2 EXCHANGE THEME (실제 마크업 기준 완성본)
   - 적용 대상: 좌/중앙(폼)/우 패널 전체
   - TradingView(#tvChart)는 그대로 유지
   - html[data-theme="dark"] / "light" 전환을 가정
========================================================= */

/* ---------- 1) 기본(라이트) 변수 ---------- */
:root{
  --ex-bg: #f4f6f8;
  --ex-surface: #ffffff;
  --ex-surface-2: #fafbfc;
  --ex-line: #e8edf3;

  --ex-text: #111827;
  --ex-muted: #6b7280;
  --ex-accent: #2d6cdf;

  --ex-buy: #d84a4a;
  --ex-sell:#2d6cdf;

  --ex-shadow: 0 14px 30px rgba(15,23,42,.10);
}

/* ---------- 2) 다크 변수 ---------- */
html[data-theme="dark"]{
  --ex-bg: #0b1424;
  --ex-surface: rgba(255,255,255,.05);
  --ex-surface-2: rgba(255,255,255,.07);
  --ex-line: rgba(255,255,255,.12);

  --ex-text: rgba(255,255,255,.92);
  --ex-muted: rgba(255,255,255,.68);

  --ex-buy: #ff5a5a;
  --ex-sell:#2e6cff;

  --ex-shadow: 0 18px 40px rgba(0,0,0,.35);
}

/* =========================================================
   3) 레이아웃 전체 배경/텍스트
========================================================= */
.ex2.exchange{
  background: var(--ex-bg);
  color: var(--ex-text);
}

/* (ex2__wrap 주변 여백이 흰색으로 비치면 방지) */
.ex2.exchange,
.ex2.exchange .ex2__wrap{
  background: var(--ex-bg);
}

/* =========================================================
   4) 패널 공통: card2 / 오른쪽 박스 / 내부 섹션들
========================================================= */
.ex2.exchange .card2,
.ex2.exchange .rightbox2,
.ex2.exchange .panel2,
.ex2.exchange .rpanel,
.ex2.exchange .hpanel{
  background: var(--ex-surface);
  border: 1px solid var(--ex-line);
  color: var(--ex-text);
  box-shadow: var(--ex-shadow);
}

/* chart 카드(차트가 들어있는 card2)는 배경만 살짝 정리 */
.ex2.exchange .chartwrap,
.ex2.exchange .chartarea{
  background: transparent;
}

/* TradingView는 절대 건드리지 않기 */
.ex2.exchange #tvChart,
.ex2.exchange .tvChart,
.ex2.exchange .tradingview-widget-container{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* =========================================================
   5) 탭 스타일: 상단(USDT/BTC), 하단(거래/미체결/최근/정보), 우측(미체결/체결)
========================================================= */
.ex2.exchange .card2__tabs{
  border-bottom: 1px solid var(--ex-line);
  background: var(--ex-surface);
}

.ex2.exchange .tab2,
.ex2.exchange .tab3,
.ex2.exchange .rtop__tab,
.ex2.exchange .hsub__tab{
  background: transparent;
  color: var(--ex-muted);
  border: 0;
  border-bottom: 2px solid transparent;
}

.ex2.exchange .tab2.is-active,
.ex2.exchange .tab3.is-active,
.ex2.exchange .rtop__tab.is-active,
.ex2.exchange .hsub__tab.is-active{
  color: var(--ex-accent);
  border-bottom-color: var(--ex-accent);
}

/* 우측 탭 영역 구분선 */
.ex2.exchange .rtop{
  border-bottom: 1px solid var(--ex-line);
}

/* =========================================================
   6) 좌측 코인 박스(coinbox/markethead/marketlist)
========================================================= */
.ex2.exchange .coinbox__top{
  border-bottom: 1px solid var(--ex-line);
}

.ex2.exchange .coinbox__icon{
  background: var(--ex-surface-2);
  border: 1px solid var(--ex-line);
  color: var(--ex-text);
}

.ex2.exchange .kvrow__k{
  color: var(--ex-muted);
}
.ex2.exchange .kvrow__v{
  color: var(--ex-text);
}
.ex2.exchange .unit{
  color: var(--ex-muted);
}

/* 헤더(코인/현재시세/변동률/거래량) */
.ex2.exchange .markethead{
  background: var(--ex-surface-2);
  color: var(--ex-muted);
  border-bottom: 1px solid var(--ex-line);
}

/* 리스트 행(coinList를 JS가 채움) */
.ex2.exchange .marketlist > *{
  border-bottom: 1px solid var(--ex-line);
}

/* 리스트 hover / active 느낌 (JS에서 선택 클래스가 있다면 함께 커버) */
.ex2.exchange .marketlist .row:hover,
.ex2.exchange .marketlist .item:hover,
.ex2.exchange .marketlist .mrow:hover{
  background: rgba(45,108,223,.06);
}
html[data-theme="dark"] .ex2.exchange .marketlist .row:hover,
html[data-theme="dark"] .ex2.exchange .marketlist .item:hover,
html[data-theme="dark"] .ex2.exchange .marketlist .mrow:hover{
  background: rgba(45,108,223,.14);
}

/* =========================================================
   7) 중앙 거래 폼(입력/셀렉트/스텝/퍼센트 버튼)
========================================================= */
.ex2.exchange .label{
  color: var(--ex-muted);
}

/* 입력/셀렉트 */
.ex2.exchange .inp,
.ex2.exchange .sel,
.ex2.exchange select,
.ex2.exchange input{
  background: var(--ex-surface);
  color: var(--ex-text);
  border: 1px solid var(--ex-line);
}

html[data-theme="dark"] .ex2.exchange .inp,
html[data-theme="dark"] .ex2.exchange .sel,
html[data-theme="dark"] .ex2.exchange select,
html[data-theme="dark"] .ex2.exchange input{
  background: rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.12);
  color: var(--ex-text);
}

.ex2.exchange .inp::placeholder{
  color: rgba(107,114,128,.75);
}
html[data-theme="dark"] .ex2.exchange .inp::placeholder{
  color: rgba(255,255,255,.45);
}

/* 스텝 버튼(+/-) */
.ex2.exchange .step__b{
  background: var(--ex-surface-2);
  border: 1px solid var(--ex-line);
  color: var(--ex-text);
}
html[data-theme="dark"] .ex2.exchange .step__b{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}

/* 퍼센트 버튼 */
.ex2.exchange .pct__b{
  background: var(--ex-surface-2);
  border: 1px solid var(--ex-line);
  color: var(--ex-text);
}
.ex2.exchange .pct__b:hover{
  filter: brightness(.98);
}
html[data-theme="dark"] .ex2.exchange .pct__b{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}

/* 안내 문구 */
.ex2.exchange .hint,
.ex2.exchange .fees{
  color: var(--ex-muted);
}

/* 구매/판매 버튼 */
.ex2.exchange .buySell__b--buy{
  background: var(--ex-buy);
  color: #fff;
  border: 0;
}
.ex2.exchange .buySell__b--sell{
  background: var(--ex-sell);
  color: #fff;
  border: 0;
}

/* =========================================================
   8) 우측 호가/통계/테이블 (otable, rtable2, htable)
========================================================= */
.ex2.exchange .rhead,
.ex2.exchange .rsec__title{
  color: var(--ex-muted);
}

/* otable */
.ex2.exchange .otable{
  width: 100%;
  border-collapse: collapse;
  color: var(--ex-text);
}
.ex2.exchange .otable td{
  border-bottom: 1px solid var(--ex-line);
}

/* 중간가(mid) 행 */
.ex2.exchange .otable .tdMid{
  background: var(--ex-surface-2);
  color: var(--ex-text);
  border-bottom: 1px solid var(--ex-line);
}

/* 우측 작은 테이블들 */
.ex2.exchange .rtable2,
.ex2.exchange .htable{
  width: 100%;
  border-collapse: collapse;
  color: var(--ex-text);
}

.ex2.exchange .rtable2 th,
.ex2.exchange .htable th{
  background: var(--ex-surface-2);
  color: var(--ex-muted);
  border-bottom: 1px solid var(--ex-line);
}

.ex2.exchange .rtable2 td,
.ex2.exchange .htable td{
  border-bottom: 1px solid var(--ex-line);
}

/* 우측 통계 박스 라인 */
.ex2.exchange .rstats .statrow{
  border-bottom: 1px solid var(--ex-line);
}

/* 상승/하락 */
.ex2.exchange .up{ color: var(--ex-buy) !important; }
.ex2.exchange .down{ color: var(--ex-sell) !important; }

/* bar(호가 막대) 배경이 너무 튀면 다크에서만 톤다운 */
html[data-theme="dark"] .ex2.exchange .bar--sell{ opacity: .35; }
html[data-theme="dark"] .ex2.exchange .bar--buy{ opacity: .35; }

/* =========================================================
   9) "엉망진창" 방지용: 카드 내부 기본 배경이 흰색으로 고정된 요소들 잡기
   (대표님 CSS에 없는 클래스가 섞여 있어도 최대한 커버)
========================================================= */
.ex2.exchange .card2 *,
.ex2.exchange .rightbox2 *{
  border-color: var(--ex-line);
}

/* 흰색 고정 배경을 쓰는 흔한 클래스들(있으면 교정) */
.ex2.exchange .bgWhite,
.ex2.exchange .white,
.ex2.exchange .tableWrap,
.ex2.exchange .wrap,
.ex2.exchange .box,
.ex2.exchange .section{
  background: transparent;
}

/* =========================================================
   10) 라이트 모드에서도 너무 회색/어두운 요소 정리(선택)
========================================================= */
html[data-theme="light"] .ex2.exchange .card2,
html[data-theme="light"] .ex2.exchange .rightbox2{
  box-shadow: 0 12px 26px rgba(15,23,42,.08);
}

/* =========================================================
   EX2 (Exchange page) THEME FIX
   - 실제 마크업 클래스: .ex2, .card2, .tab2, .tab3, .panel2, .rpanel 등
   - 차트(TradingView)는 그대로(건드리지 않음)
   - html[data-theme="dark" | "light"] 토글 가정
========================================================= */

/* 1) 기본(라이트) 변수 */
:root{
  --ex2-bg:#f4f6f8;
  --ex2-surface:#ffffff;
  --ex2-surface2:#fafbfc;
  --ex2-line:#e8edf3;
  --ex2-text:#1f2a37;
  --ex2-muted:#6b7280;
  --ex2-accent:#2d6cdf;

  --ex2-buy:#d84a4a;
  --ex2-sell:#2d6cdf;
}

/* 2) 다크 변수 */
html[data-theme="dark"]{
  --ex2-bg:#0b1424;
  --ex2-surface:rgba(255,255,255,.05);
  --ex2-surface2:rgba(255,255,255,.08);
  --ex2-line:rgba(255,255,255,.12);
  --ex2-text:rgba(255,255,255,.92);
  --ex2-muted:rgba(255,255,255,.68);

  --ex2-buy:#ff5a5a;
  --ex2-sell:#2e6cff;
}

/* 3) 페이지 베이스 */
.ex2.exchange{
  background: var(--ex2-bg);
  color: var(--ex2-text);
}

/* 좌/중/우 컬럼 배경도 확실히 */
.ex2__wrap,
.ex2__left,
.ex2__center,
.ex2__right{
  background: transparent;
  color: var(--ex2-text);
}

/* 4) 카드(패널) 공통 */
.ex2 .card2{
  background: var(--ex2-surface);
  border: 1px solid var(--ex2-line);
  color: var(--ex2-text);
}

/* 다크일 때 카드 입체감 */
html[data-theme="dark"] .ex2 .card2{
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}

/* 5) 탭들 */
.ex2 .tab2,
.ex2 .tab3,
.ex2 .rtop__tab,
.ex2 .hsub__tab{
  background: transparent;
  color: var(--ex2-muted);
  border-bottom: 2px solid transparent;
}

.ex2 .tab2.is-active,
.ex2 .tab3.is-active,
.ex2 .rtop__tab.is-active,
.ex2 .hsub__tab.is-active{
  color: var(--ex2-accent);
  border-bottom-color: var(--ex2-accent);
}

/* 6) 좌측 요약(coinbox) 텍스트 */
.ex2 .coinbox,
.ex2 .coinbox__top,
.ex2 .markethead{
  color: var(--ex2-text);
}

.ex2 .kvrow__k{
  color: var(--ex2-muted);
}
.ex2 .kvrow__v{
  color: var(--ex2-text);
}

/* 7) 좌측 마켓 헤더/리스트(구조가 JS로 들어와도 최대한 커버) */
.ex2 .markethead{
  background: var(--ex2-surface2);
  border-top: 1px solid var(--ex2-line);
  border-bottom: 1px solid var(--ex2-line);
}

.ex2 .marketlist{
  background: transparent;
}

.ex2 .marketlist > *{
  background: transparent;
  color: var(--ex2-text);
  border-bottom: 1px solid var(--ex2-line);
}

html[data-theme="dark"] .ex2 .marketlist > *:hover{
  background: rgba(255,255,255,.04);
}
html[data-theme="light"] .ex2 .marketlist > *:hover{
  background: rgba(2,6,23,.03);
}

/* 8) 중앙 하단 거래 폼(입력/셀렉트/버튼) */
.ex2 .label{ color: var(--ex2-muted); }

.ex2 .inp,
.ex2 .sel,
.ex2 select,
.ex2 input,
.ex2 textarea{
  background: var(--ex2-surface);
  color: var(--ex2-text);
  border: 1px solid var(--ex2-line);
}

html[data-theme="dark"] .ex2 .inp,
html[data-theme="dark"] .ex2 .sel,
html[data-theme="dark"] .ex2 select,
html[data-theme="dark"] .ex2 input,
html[data-theme="dark"] .ex2 textarea{
  background: rgba(0,0,0,.22);
  border-color: rgba(255,255,255,.12);
}

.ex2 .inp::placeholder{ color: rgba(107,114,128,.75); }
html[data-theme="dark"] .ex2 .inp::placeholder{ color: rgba(255,255,255,.45); }

/* 스텝 버튼/퍼센트 버튼 */
.ex2 .step__b,
.ex2 .pct__b,
.ex2 .hbtn{
  background: var(--ex2-surface2);
  color: var(--ex2-text);
  border: 1px solid var(--ex2-line);
}

html[data-theme="dark"] .ex2 .step__b,
html[data-theme="dark"] .ex2 .pct__b,
html[data-theme="dark"] .ex2 .hbtn{
  background: rgba(255,255,255,.06);
}

/* 구매/판매 버튼 */
.ex2 .buySell__b--buy{ background: var(--ex2-buy); color:#fff; border:0; }
.ex2 .buySell__b--sell{ background: var(--ex2-sell); color:#fff; border:0; }

/* 안내문/수수료 */
.ex2 .hint,
.ex2 .fees,
.ex2 .mini{ color: var(--ex2-muted); }

/* 9) 우측 호가/체결 테이블 */
.ex2 .otable,
.ex2 .rtable2,
.ex2 .htable{
  width: 100%;
  color: var(--ex2-text);
  border-collapse: collapse;
}

.ex2 .otable td,
.ex2 .rtable2 td,
.ex2 .htable td{
  border-bottom: 1px solid var(--ex2-line);
}

.ex2 .rtable2 th,
.ex2 .htable th{
  background: var(--ex2-surface2);
  color: var(--ex2-muted);
  border-bottom: 1px solid var(--ex2-line);
}

/* 우측 상단 탭 영역 배경도 패널 톤으로 */
.ex2 .rtop{
  background: var(--ex2-surface);
  border-bottom: 1px solid var(--ex2-line);
}

/* 10) 상승/하락 컬러 */
.ex2 .up{ color: var(--ex2-buy) !important; }
.ex2 .down{ color: var(--ex2-sell) !important; }

/* 11) ✅ 차트는 그대로 두기 (card2 내부 chartwrap만 투명 처리) */
.ex2 .chartwrap,
.ex2 .chartarea,
.ex2 #tvChart,
.ex2 .tvChart,
.ex2 .tradingview-widget-container{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* =========================================================
   ✅ EXCHANGE DARKMODE HOTFIX (append at very bottom)
   - html[data-theme="dark"] 와 body.dark 둘 다 지원
   - TradingView 차트(#tvChart) 영역은 그대로 유지
========================================================= */

/* 0) 테마 적용 타겟(둘 다 커버) */
html[data-theme="dark"],
body.dark{
  /* 기존 :root 변수(--bg/--card/--line/--text/--muted/--blue/--red)를 다크로 덮어씀 */
  --bg:#0b1424;
  --card: rgba(255,255,255,.05);
  --line: rgba(255,255,255,.12);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);

  --blue:#2e6cff; /* down */
  --red:#ff5a5a;  /* up */
}

/* 1) 페이지/컬럼 베이스 */
html[data-theme="dark"] .ex2,
body.dark .ex2{
  background: var(--bg);
  color: var(--text);
}

html[data-theme="dark"] .ex2__left,
html[data-theme="dark"] .ex2__center,
html[data-theme="dark"] .ex2__right,
body.dark .ex2__left,
body.dark .ex2__center,
body.dark .ex2__right{
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}

/* 2) 카드/패널 공통 */
html[data-theme="dark"] .ex2 .card2,
html[data-theme="dark"] .ex2 .panel2,
html[data-theme="dark"] .ex2 .rpanel,
html[data-theme="dark"] .ex2 .hpanel,
body.dark .ex2 .card2,
body.dark .ex2 .panel2,
body.dark .ex2 .rpanel,
body.dark .ex2 .hpanel{
  background: var(--card);
  border-color: var(--line);
  color: var(--text);
}

/* 3) 하드코딩된 흰 배경들(핵심: 탭/폼/테이블 헤더/우측 섹션) */
html[data-theme="dark"] .ex2 .card2__tabs,
html[data-theme="dark"] .ex2 .ordertabs,
html[data-theme="dark"] .ex2 .tradeform,
html[data-theme="dark"] .ex2 .empty,
html[data-theme="dark"] .ex2 .rightbox2,
html[data-theme="dark"] .ex2 .rtop,
html[data-theme="dark"] .ex2 .rhead,
html[data-theme="dark"] .ex2 .rmain__right,
html[data-theme="dark"] .ex2 .rsec__title,
html[data-theme="dark"] .ex2 .hsub,
html[data-theme="dark"] .ex2 .htable,
body.dark .ex2 .card2__tabs,
body.dark .ex2 .ordertabs,
body.dark .ex2 .tradeform,
body.dark .ex2 .empty,
body.dark .ex2 .rightbox2,
body.dark .ex2 .rtop,
body.dark .ex2 .rhead,
body.dark .ex2 .rmain__right,
body.dark .ex2 .rsec__title,
body.dark .ex2 .hsub,
body.dark .ex2 .htable{
  background: rgba(255,255,255,.04);
  border-color: var(--line);
  color: var(--text);
}

/* 4) 탭 텍스트/라인 색(하드코딩 색 제거) */
html[data-theme="dark"] .ex2 .tab2,
html[data-theme="dark"] .ex2 .tab3,
html[data-theme="dark"] .ex2 .rtop__tab,
html[data-theme="dark"] .ex2 .hsub__tab,
body.dark .ex2 .tab2,
body.dark .ex2 .tab3,
body.dark .ex2 .rtop__tab,
body.dark .ex2 .hsub__tab{
  background: transparent !important;
  color: var(--muted) !important;
  border-color: var(--line) !important;
}

html[data-theme="dark"] .ex2 .tab2.is-active,
html[data-theme="dark"] .ex2 .tab3.is-active,
html[data-theme="dark"] .ex2 .rtop__tab.is-active,
html[data-theme="dark"] .ex2 .hsub__tab.is-active,
body.dark .ex2 .tab2.is-active,
body.dark .ex2 .tab3.is-active,
body.dark .ex2 .rtop__tab.is-active,
body.dark .ex2 .hsub__tab.is-active{
  color: var(--blue) !important;
  box-shadow: inset 0 -2px 0 var(--blue) !important;
}

/* 5) 폼 라벨/체크 텍스트(하드코딩 #2b3a42 제거) */
html[data-theme="dark"] .ex2 .label,
html[data-theme="dark"] .ex2 .chk,
body.dark .ex2 .label,
body.dark .ex2 .chk{
  color: var(--muted) !important;
}

/* 6) 입력/셀렉트/버튼 */
html[data-theme="dark"] .ex2 .inp,
html[data-theme="dark"] .ex2 .sel,
html[data-theme="dark"] .ex2 input,
html[data-theme="dark"] .ex2 select,
body.dark .ex2 .inp,
body.dark .ex2 .sel,
body.dark .ex2 input,
body.dark .ex2 select{
  background: rgba(0,0,0,.22) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

html[data-theme="dark"] .ex2 .step__b,
html[data-theme="dark"] .ex2 .pct__b,
html[data-theme="dark"] .ex2 .hbtn,
body.dark .ex2 .step__b,
body.dark .ex2 .pct__b,
body.dark .ex2 .hbtn{
  background: rgba(255,255,255,.06) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

/* 7) 테이블 헤더/셀 */
html[data-theme="dark"] .ex2 .otable td,
html[data-theme="dark"] .ex2 .rtable2 td,
html[data-theme="dark"] .ex2 .htable td,
body.dark .ex2 .otable td,
body.dark .ex2 .rtable2 td,
body.dark .ex2 .htable td{
  border-bottom-color: var(--line) !important;
  color: var(--text) !important;
}

html[data-theme="dark"] .ex2 .rtable2 th,
html[data-theme="dark"] .ex2 .htable th,
body.dark .ex2 .rtable2 th,
body.dark .ex2 .htable th{
  background: rgba(255,255,255,.06) !important;
  color: var(--muted) !important;
  border-bottom-color: var(--line) !important;
}

/* 8) 오더북 중간가 배경 */
html[data-theme="dark"] .ex2 .otable .tdMid,
body.dark .ex2 .otable .tdMid{
  background: rgba(255,255,255,.06) !important;
  border-color: var(--line) !important;
}

/* 9) 상승/하락 컬러는 유지 */
html[data-theme="dark"] .ex2 .up,
body.dark .ex2 .up{ color: var(--red) !important; }

html[data-theme="dark"] .ex2 .down,
body.dark .ex2 .down{ color: var(--blue) !important; }

/* 10) ✅ TradingView 차트는 그대로(중앙 상단만 예외) */
html[data-theme="dark"] .ex2 #tvChart,
html[data-theme="dark"] .ex2 .tvChart,
body.dark .ex2 #tvChart,
body.dark .ex2 .tvChart{
  background: transparent !important;
}