.chat-profile-pic-wrap,
.chat-profile-pic-wrap {display: inline-flex; align-items: center; justify-content: center; }
.chat-profile-pic { border-radius: 50%; object-fit: cover; object-position: center; display:block; }
.trade-header { display:flex; flex-direction: column; align-items: flex-start; margin-bottom: 6px; }
.trade-header .header-controls { display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; justify-content:flex-start !important; padding: 0; width: 100%; text-align: left !important; margin: 0 0 8px; background: transparent; border:none; }
.trade-header { text-align: left !important; }
.trade-panel { text-align: left; }
.trade-header .seg-btn { margin: 0 12px 0 0; }
.lev-control { margin-top: 4px; }
/* 교차/고립 버튼을 탭 네비게이션 스타일로 */
.trade-header .seg-btn { position:relative; background: transparent !important; border:none; border-radius:0; padding:6px 4px; font-weight:600; color: var(--text-color-secondary); cursor:pointer; }
.trade-header .seg-btn::after { content: ""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background: transparent; transition: background-color .2s ease; }
.trade-header .seg-btn.active { color: var(--text-color); }
.trade-header .seg-btn.active::after { background: var(--primary-color); }
.lev-control { margin-top: 0; display: flex; flex-direction: column; gap: 8px; width: 100%; }
.lev-control .lev-display { background: var(--card-bg); border:1px solid var(--border-color); border-radius: 10px; padding: 6px; font-weight: 600; color: var(--primary-color); width: 100%; }
.lev-control .label { display:block; font-size:12px; color: var(--text-color-secondary); margin-bottom: 2px; }
.lev-control .input-wrap { position: relative; display:flex; align-items:center; }
.lev-control .input-wrap .unit-suffix { position:absolute; right:10px; color: var(--text-color-secondary); font-weight:600; pointer-events:none; }
.lev-control .input-wrap .lev-display { padding-right: 24px; }
.lev-control .lev-display[type="number"] { appearance: textfield; -moz-appearance:textfield; }
.lev-control .lev-display::-webkit-outer-spin-button,
.lev-control .lev-display::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lev-slider { position: relative; padding-top: 6px; width: 100%; }
.lev-slider input[type="range"] { width: 100%; }
.lev-slider .ticks { display:flex; justify-content: space-between; font-size: 10px; color: var(--text-color-secondary); margin-top: 6px; }

/* 모달 기본 스타일 (트레이드 설정용) */
.modal-overlay { position: fixed; inset:0; background: rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index: 99999; }
.modal-content { background: var(--bg-color); border:1px solid var(--border-color); border-radius: 14px; width: 90%; max-width: 520px; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.modal-overlay[style*="display: none"],
.modal-overlay[style*="display:none"] { display:none !important; }
.modal-header { display:flex; align-items:center; justify-content: space-between; padding:16px; border-bottom:1px solid var(--border-color); }
.modal-body { padding:16px; }
.modal-footer { padding:12px 16px; border-top:1px solid var(--border-color); display:flex; justify-content:flex-end; gap:8px; }
.modal-close { background: transparent; border:none; font-size: 22px; cursor:pointer; color: var(--text-color); }
.btn.btn-primary { background:#4F46E5; color:#fff; border:none; padding:10px 14px; border-radius:10px; cursor:pointer; }
/* segmented control for Open/Close */
.pt-openclose-toggle { display:flex; width:100%; background: #f3f4f6; border-radius: 18px; padding:4px; gap:0; }
.pt-openclose-toggle .sc { background: transparent; border:none; padding:6px 14px; border-radius:14px; color:#6b7280; cursor:pointer; flex:1; font-weight:700; font-size:12px; }
.pt-openclose-toggle .sc.active { background:#ffffff; color:#111; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
/* ============ pt- prefixed Margin Modal styles (충돌 방지) ============ */
.pt-modal[hidden] { display:none; }
.pt-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.5); display: grid; place-items: center; }
.pt-modal-content { width: 520px; max-width: calc(100% - 32px); background: var(--card-bg, #fff); color: var(--text-color, #111); border: 1px solid var(--border-color, #e5e7eb); border-radius: 14px; box-shadow: 0 12px 36px rgba(0,0,0,.28); }
.pt-modal-header, .pt-modal-footer { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border-color, #e5e7eb); }
.pt-modal-footer { border-top: 1px solid var(--border-color, #e5e7eb); border-bottom: 0; }
.pt-modal-body { padding: 16px; display: grid; gap: 12px; }
.pt-close { background: transparent; border: 0; font-size: 22px; line-height: 1; cursor: pointer; }
.pt-radio { display: block; position: relative; border:1px solid var(--border-color); border-radius: 12px; padding: 14px 16px; background: var(--bg-color); }
.pt-radio + .pt-radio { margin-top: 12px; }
.pt-radio input { position:absolute; right:14px; top:14px; width:18px; height:18px; accent-color: var(--primary-color, #3b82f6); }
.pt-radio b { display:block; font-size: 16px; }
.pt-desc { font-size: 13px; color: var(--text-color-secondary, #6b7280); margin-top: 6px; line-height: 1.4; }
.pt-radio.selected { border-color: var(--primary-color, #3b82f6); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color, #3b82f6) 20%, transparent); background: color-mix(in srgb, var(--primary-color, #3b82f6) 8%, var(--bg-color)); }
.pt-btn { height: 38px; min-width: 96px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--border-color, #e5e7eb); cursor: pointer; font-weight: 600; }
.pt-btn-primary { background: #fff; color: #111; border-color: var(--border-color, #e5e7eb); }
.pt-btn-ghost { background: var(--card-bg); color: var(--text-color); }
.pt-lev-group { background: var(--card-bg); border:1px solid var(--border-color); border-radius:12px; padding:12px; }
.pt-lev-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.pt-lev-title { font-weight:700; }
.pt-lev-value-input { width: 84px; height: 36px; border-radius: 10px; border:1px solid var(--border-color); background: var(--bg-color); text-align: right; padding: 0 10px; font-weight:700; }
.pt-lev-value-input.pt-lev-long { color:#10b981; }
.pt-lev-value-input.pt-lev-short { color:#ef4444; }
.pt-lev-range { width:100%; height: 8px; }
.pt-lev-ticks { display:flex; justify-content:space-between; font-size:12px; color: var(--text-color-secondary); margin-top:6px; }
.pt-btn-margin-mode { display: inline-flex; gap: 8px; align-items: center; }
/* Compact header button (Cross ▶) */
.pt-compact-mode-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; background: #f4f5f6; color: #111827; border-radius:18px; padding:6px 12px; cursor:pointer; font-weight:700; font-size:12px; }
.pt-compact-mode-btn:hover { background: var(--bg-color); }
.pt-compact-mode-btn .pt-caret { display:none; }
/* leverage compact button and divider */
.pt-vdiv { width:1px; height:36px; background: var(--border-color); margin: 0 8px; }
.pt-compact-lev-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%; background: #f4f5f6; color: #111827; border-radius:18px; padding:6px 12px; cursor:pointer; font-weight:700; font-size:12px; }
.pt-compact-lev-btn:hover { background: var(--bg-color); }
.pt-compact-lev-btn .pt-lev-long { color:#10b981; }
.pt-compact-lev-btn .pt-lev-short { color:#ef4444; }
.pt-compact-lev-btn .pt-caret { display:none; }
/* ========================================
   🔥 COMMUNITY PAGE STYLES
   ======================================== */
/* 메인 컨테이너 레이아웃 */
.main-container {
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* 커뮤니티 레이아웃 */
.community-layout {
    display: flex;
    height: calc(100dvh - 98px); /* 뷰포트 기준 고정 높이 */
    width: 100%;
    /* x는 보이게, y는 스크롤 */
    overflow-x: visible;
    overflow-y: auto;
}

/* =====================
   마켓 헤더 (community-header)
   ===================== */l
.community-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    padding: 4px 12px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-primary);
    z-index: 20;
    flex-wrap: nowrap; /* 줄바꿈 금지 */
}
.community-header { 
    display: flex; 
    padding: 2px 12px;
    border-bottom: 4px solid var(--border-color);
    border-top: 4px solid var(--border-color);
}

.community-header .mh-left { display:flex; align-items:center; gap: 10px; }
.community-header .mh-symbol { display:flex; align-items:center; gap:8px; }
.community-header .mh-symbol img { width: 22px; height: 22px; border-radius: 50%; background: #222; object-fit: cover; }
.community-header .mh-symbol-btn { display:flex; align-items:center; gap:6px; background: transparent; color: var(--text-color); padding: 4px 8px; border-radius: 6px; cursor: pointer; }
.community-header .mh-symbol-btn i { opacity:.8; }
/* mh-tags 제거 */

.community-header .mh-core { display:flex; align-items:center; gap: 24px; min-width: 420px; }
.community-header .mh-last { display:flex; align-items:baseline; gap:10px; }
.community-header #mh-last-price { font-size: 20px; font-weight: 700; letter-spacing: .2px; }
.community-header #mh-change { font-weight: 600; }
.community-header #mh-change.up { color:#10b981; }
.community-header #mh-change.down { color:#ef4444; }

.community-header .mh-metrics { display:flex; align-items:center; gap: 18px; flex-wrap: nowrap; }
.community-header .kv { display:flex; align-items:center; gap:6px; color: var(--text-color-secondary); font-size: 12px; }
.community-header .kv b { color: var(--text-color); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1, 'lnum' 1; }
.community-header .kv small { color: var(--text-color-secondary); font-size: 11px; margin-left: 4px; }
/* 값/라벨 줄바꿈 방지 */
.community-header .kv span, .community-header .kv b, .community-header .kv small { white-space: nowrap; }
.community-header .kv { flex-wrap: nowrap; }
/* Funding 강조 */
.community-header .kv.funding span { border-bottom: 2px dotted var(--border-color); padding-bottom: 2px; }
.community-header #mh-funding { color: #FF7E33; font-weight: 700; }

.community-header .mh-right { margin-left: 0; display:flex; align-items: center;}
.community-header .mh-stats { display:flex; align-items:center; gap: 14px; }

@media (max-width: 1024px) {
  .community-header { flex-wrap: nowrap; gap: 12px; top: 56px; }
  .community-header .mh-core, .community-header .mh-metrics, .community-header .mh-stats { flex-wrap: nowrap; }
}

/* 모바일: 헤더에서 심볼(좌측) + 가격만 노출 */
@media (max-width: 768px) {
  /* 모바일 커뮤니티: 헤더 숨김 */
  body.community-page #header-placeholder { display:none !important; }
  body.community-page { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
  .community-header .mh-core { min-width: 0; flex: 1 1 auto; gap: 8px; }
  .community-header .mh-metrics,
  .community-header .mh-right,
  .community-header .mh-stats,
  .community-header #mh-change { display: none !important; }
  .community-header #mh-last-price { font-size: 18px; font-weight: 800; }
}

/* 모바일 하단 시트 애니메이션: pt-modal + pt-modal-content */
@media (max-width: 768px) {
  .pt-modal { display:flex; align-items:flex-end; justify-content:center; background: rgba(0,0,0,0); transition: background .24s ease; }
  .pt-modal.is-open { background: rgba(0,0,0,.5); }
  .pt-modal.is-closing { background: rgba(0,0,0,0); }
  .pt-modal-content { width: 100%; max-width: 100%; border-radius: 16px 16px 0 0; border: 1px solid var(--border-color); transform: translateY(100%); opacity: 0; transition: transform .28s cubic-bezier(.22,.61,.36,1), opacity .24s ease; }
  .pt-modal.is-open .pt-modal-content { transform: translateY(0); opacity: 1; }
  .pt-modal.is-closing .pt-modal-content { transform: translateY(100%); opacity: 0; }
}

/* =====================
   심볼 드롭다운
   ===================== */
.mh-symbol { position: relative; }
.mh-dropdown { position: absolute; top: 40px; left: 0; background: var(--bg-color); color: var(--text-color); border: 1px solid var(--border-color); border-radius: 12px; min-width: 420px; max-width: 480px; box-shadow: 0 16px 36px rgba(0,0,0,.38); z-index: 1000; overflow: hidden; }
.mh-dropdown[style*="display:none"] { display:none !important; }
.mh-dd-header { padding: 10px 10px 0 10px; background: var(--bg-primary); border-bottom: 1px solid var(--border-color); }
.mh-dd-search { display:flex; align-items:center; gap:8px; padding: 8px 8px; border:1px solid var(--border-color); border-radius: 10px; background: var(--bg-color); }
.mh-dd-search input { flex:1; background: transparent; border: none; color: var(--text-color); outline: none; }
.mh-dd-tabs { display:flex; gap: 16px; padding: 8px 2px 8px 2px; }
.mh-dd-tab { position:relative; background: transparent; border:none; color: var(--text-color-secondary); padding: 8px 4px; cursor:pointer; font-weight:700; }
.mh-dd-tab.active { color: var(--text-color); }
.mh-dd-tab.active::after { content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background: var(--primary-color); }
.mh-dd-list { max-height: 520px; overflow-y: auto; background: var(--bg-color); }
.mh-row { display:grid; grid-template-columns: 28px 1.6fr 1fr 1fr; align-items:center; gap: 10px; padding: 10px 12px; border-bottom:1px solid var(--border-color); cursor:pointer; }
.mh-row:hover { background: color-mix(in srgb, var(--primary-color) 8%, transparent); }
.mh-star { color: #fbbf24; opacity: .9; font-size: 16px; }
.mh-coin { display:flex; align-items:center; gap:10px; }
.mh-coin img { width: 22px; height:22px; border-radius:50%; object-fit: cover; }
.mh-coin .meta { display:flex; flex-direction: column; line-height: 1.15; }
.mh-coin .meta .name { font-weight: 800; }
.mh-coin .meta .cap { font-size: 12px; color: var(--text-color-secondary); }
.mh-price, .mh-change { text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1, 'lnum' 1; }
.mh-change.up { color:#10b981; font-weight:700; }
.mh-change.down { color:#ef4444; font-weight:700; }
.mh-dd-footer { padding: 8px 12px; color: var(--text-color-secondary); border-top:1px solid var(--border-color); font-size: 12px; background: var(--bg-primary); }

/* 모바일 전용: 아래에서 위로 올라오는 전체폭 시트 */
@media (max-width: 768px) {
  .mh-dropdown {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    border: 1px solid var(--border-color);
    box-shadow: 0 -8px 24px rgba(0,0,0,.35);
    transform: translateY(100%);
    opacity: 0;
    transition: transform .28s cubic-bezier(.22,.61,.36,1), opacity .24s ease;
  }
  .mh-dropdown.is-open { transform: translateY(0); opacity: 1; }
  .mh-dropdown.is-closing { transform: translateY(100%); opacity: 0; }
  .mh-dd-header { position: sticky; top: 0; z-index: 2; }
  .mh-dd-list { max-height: calc(100dvh - 200px); overflow-y: auto; }
}

/* 모바일: 드롭다운 백드롭 */
@media (max-width: 768px) {
  #mh-dd-backdrop {
    position: fixed; left:0; right:0; top:0; bottom:0; background: rgba(0,0,0,.35);
    opacity: 0; pointer-events: none; transition: opacity .24s ease; z-index: 999; /* dropdown z-index:1000 */
  }
  #mh-dd-backdrop.is-open { opacity: 1; pointer-events: auto; }
}

/* 커뮤니티 레이아웃 내부 */
.community-layout-inner {
    display: flex;
    flex: 1;
    gap: 0;
    overflow-x: visible;
    overflow-y: hidden; /* 스크롤은 바깥 컨테이너에서만 */
}
/* 🔥 차트+거래 패널 통합 레이아웃 */
.chart-trading-layout { display:flex; flex-direction: column; width:100%; height:auto; min-height:100%; min-width:0; }
.chart-and-sidebar { display:flex; min-height:700px; }
#chart-container-wrapper { flex:1; min-width:0; display:flex; flex-direction:column; }
.paper-trading-sidebar { width: 380px; border-left:1px solid var(--border-color); background: var(--bg-color); display:flex; flex-direction:column; }
.paper-trading-sidebar .orderbook-and-trade { flex:1; min-height:0; display:flex; flex-direction:column; }

#chart-container-wrapper {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

#tradingview_chart { flex: 1; min-height: 0; }

/* ✅ 차트 하단 포지션 바 */
.positions-under-chart {
    border-top: 1px solid var(--border-color);
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
    /* ✅ 가로 스크롤 허용 (슬라이드) */
    overflow-x: auto; /* 컨테이너가 스크롤 주도 */
    -webkit-overflow-scrolling: touch;
    min-width: 0;
}
.positions-bar-header {
    display:flex; align-items:center; justify-content:space-between;
    padding: 0px 12px; border-bottom:1px solid var(--border-color);
}
.positions-bar-header .title { font-weight:600; color: var(--text-color); }
.positions-bar-header .acct-eff { color: var(--text-color-secondary); font-size: 12px; margin-right: 10px; }

.positions-table { width:100%; display:flex; flex-direction: column; height: 100%; overflow-x: auto; overflow-y: auto; min-height: 0; }
.positions-table-head,
.positions-table-body .row { 
    display:grid; 
    grid-template-columns:
        130px  /* 거래쌍 */
        120px  /* 포지션 */
        100px  /* 진입가 */
        100px  /* 현재가 */
        120px  /* 예상 청산가 */
        100px  /* 마진 */
        110px  /* 가용 수량 */
        150px  /* 미실현 손익 */
        130px  /* 시장가 청산 */
        100px  /* Close Type */
        110px  /* 청산 수량 */
        100px  /* 청산 */
        80px  /* 명목 가치 */
    ;
    gap: 12px; align-items:center; padding: 8px 10px; min-width: 1200px;
}
.positions-table-head { font-size:12px; color: var(--text-color-secondary); background: var(--bg-color); border-bottom:1px solid var(--border-color); position: sticky; top: 0; z-index: 1; text-align: left; }
.positions-table-body { flex: 1; }
.positions-table-body .row { border-bottom:1px solid var(--border-color); font-size: 12px; text-align: left; border-left: var(--pos-border, 4px) solid transparent; }
.positions-table-body .row.skeleton > div { display: none; }
.positions-table-body .row.long { border-left-color:#10b981; }
.positions-table-body .row.short { border-left-color:#ef4444; }
.positions-table-body .row > div:nth-child(5) { color: #FF7E33; font-weight: 600; }
/* 숫자 정렬 및 탭러 폰트 적용 */
.positions-table-body .row div {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.positions-table-body .row div:nth-child(n+3) {
  text-align: left
}
.positions-table-head div:nth-child(n+3) { text-align: left; }
.positions-table-body .row .pnl .pnl-percent { color: var(--text-color-secondary); }

/* PnL 색상 및 보조 텍스트 */
.positions-table-body .row .pnl { font-weight: 600; }
.positions-table-body .row .pnl.positive { color:#10b981; }
.positions-table-body .row .pnl.negative { color:#ef4444; }
.positions-table-body .row .pnl .pnl-percent { font-size: 11px; opacity: .85; }
.positions-table-body .row .lev-line { margin-top: 2px; }
.positions-table-body .row .lev-badge { font-weight: 700; }
.positions-table-body .row .eff-lev { color: var(--text-color-secondary); font-size: 11px; margin-left: 6px; }
.positions-table-body .row .size-input { width: 100px; text-align:left; background: var(--card-bg); border:1px solid var(--border-color); color: var(--text-color); padding:2px 6px; border-radius:6px; }
.positions-table-body .row .close-type { position: relative; }
.positions-table-body .row .close-type .btn-select { display:block; width: 100px; text-align:left; background: var(--card-bg); border:1px solid var(--border-color); color: var(--text-color); padding:2px 6px; border-radius:6px; cursor: pointer; }
.positions-table-body .row .close-type .menu { position:absolute; top: calc(100% + 6px); left:0; min-width: 160px; background: var(--bg-color); border:1px solid var(--border-color); border-radius:8px; box-shadow: 0 8px 24px rgba(0,0,0,0.28); padding:6px; z-index: 5; }
.positions-table-body .row .close-type .menu[hidden] { display:none; }
.positions-table-body .row .close-type .menu button { display:block; width:100%; text-align:left; padding:10px 12px; background:transparent; border:none; color: var(--text-color); border-radius:6px; cursor:pointer; }
.positions-table-body .row .close-type .menu button:hover { background: var(--card-bg); }
.positions-table-body .row .badge.waiting { display:inline-flex; align-items:center; height: 28px; padding: 0 10px; background: var(--card-bg); color: var(--text-color-secondary); border:1px solid var(--border-color); border-radius: 14px; font-size: 12px; margin-left: 8px; }
.positions-table-body .row .btn-mini { padding:2px 6px; border-radius: 6px; border:1px solid var(--border-color); background: var(--card-bg); color: var(--text-color); cursor:pointer; }

/* 슬라이더(수평 스크롤) 방지: 폭 자동 분배 및 넘침 숨김 */
.positions-table { width: 100%; display:flex; flex-direction: column; height:auto; overflow-x: auto; overflow-y: auto; min-height: 0; }
.positions-table-body { overflow-x: visible; }
.positions-table::-webkit-scrollbar { height: 10px; }
.positions-table::-webkit-scrollbar-track { background: var(--bg-color); }
.positions-table::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 6px; }

/* 커스텀 가로 스크롤바 제거 - 기본 브라우저 스크롤 사용 */

/* 화면이 작아지면 가로 스크롤 허용 */
/* 더 작은 화면에서도 즉시 스크롤이 나타나도록 기본적으로 min-width를 고정값으로 지정했습니다. */
.positions-table-body .dir.long { color:#10b981; font-weight:700; }
.positions-table-body .dir.short { color:#ef4444; font-weight:700; }
.positions-table-body .pnl.positive { color:#10b981; }
.positions-table-body .pnl.negative { color:#ef4444; }
.positions-table-body .actions button { padding:6px 10px; border-radius:6px; border:1px solid var(--border-color); background: var(--card-bg); color: var(--text-color); }

.pos-tabs { display:flex; gap:20px; align-items:center; border-bottom: 1px solid var(--border-color); padding: 0 8px; }
.pos-tab { position: relative; background: transparent !important; border:none; color: var(--text-color-secondary); padding:10px 4px; cursor:pointer; font-weight: 600; }
.pos-tab::after { content: ""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background: transparent; transition: background-color .2s ease; }
.pos-tab.active { color: var(--text-color); }
.pos-tab.active::after { background: var(--primary-color); }

.orders-table { width:100%; margin-top: 0; overflow-x:auto; overflow-y:auto; -webkit-overflow-scrolling: touch; display:flex; flex-direction: column; height: 100%; min-height: 0; }
.history-table { width:100%; margin-top: 0; overflow-x:auto; overflow-y:auto; -webkit-overflow-scrolling: touch; display:flex; flex-direction: column; height: 100%; min-height: 0; }
.orders-table::-webkit-scrollbar { height: 10px; }
.orders-table-body::-webkit-scrollbar { height: 0; }
.orders-table-head,
.orders-table-body .row {
  display:grid;
  grid-auto-flow: column; /* 가로로만 배치 */
  grid-template-columns: 150px 160px 90px 120px 110px 150px 120px 120px 140px 80px 200px; /* 한 줄 고정 */
  gap:8px; align-items:center; padding: 8px 10px; min-width: 1700px; white-space: nowrap;
}

/* 주문상태/번호 한 줄 표시 및 줄바꿈 방지 */
.orders-table-body .ord-cell { display:flex; align-items:center; gap:8px; white-space: nowrap; }
.orders-table-body .ord-status { color: var(--text-color); font-weight: 600; }
.orders-table-body .ord-num { color: var(--text-color-secondary); text-decoration: underline dotted; }
.orders-table-body .ord-copy { background: transparent; border:1px solid var(--border-color); color: var(--text-color-secondary); padding:2px 6px; border-radius:4px; cursor:pointer; }

@media (min-width: 1700px) {
  .orders-table-head,
  .orders-table-body .row {
    min-width: 100%;
    grid-template-columns:
      1.4fr /* Pairs */
      1.3fr /* Time */
      0.9fr /* Type */
      1.0fr /* Direction */
      1.1fr /* Avg. Price */
      1.2fr /* Filled | Size */
      1.0fr /* Trigger */
      1.0fr /* Order Price */
      1.2fr /* Frozen Margin */
      0.9fr /* Fee */
      1.0fr /* Action */
    ;
  }
  .history-table .orders-table-head,
  .history-table .orders-table-body .row {
    min-width: 100%;
    grid-template-columns:
      1.4fr /* Pairs */
      1.3fr /* Time */
      1.0fr /* Direction */
      1.1fr /* Avg. Price | Type */
      1.2fr /* Filled | Size */
      1.1fr /* PnL */
      0.9fr /* Fee */
      1fr /* Order Status | Order Number */
    ;
  }
}
.orders-table-head { font-size:12px; color: var(--text-color-secondary); background: var(--bg-color); border-bottom:1px solid var(--border-color); }
.orders-table-body .row { border-bottom:1px solid var(--border-color); font-size: 12px; }
.orders-table-body .dir.long { color:#10b981; font-weight:700; }
.orders-table-body .dir.short { color:#ef4444; font-weight:700; }
.orders-table-body .pnl-percent.up { color:#10b981; }
.orders-table-body .pnl-percent.down { color:#ef4444; }
.orders-table-body .badge { display:inline-flex; align-items:center; gap:6px; }
.orders-table-body .cell-pair { display:flex; flex-direction: column; gap:4px; }
.orders-table-body .cell-pair .pair { font-weight:600; color: var(--text-color); }
.orders-table-body .cell-pair .tags { display:flex; gap:6px; }
.orders-table-body .chip { background: var(--bg-color); color: var(--text-color-secondary); border:1px solid var(--border-color); padding: 2px 6px; font-size: 11px; }
.orders-table-body .cancel { padding:6px 10px; border-radius:0px; border:1px solid var(--border-color); background: var(--card-bg); color: var(--text-color); cursor:pointer; }

/* 포지션 테이블 첫 컬럼 동일 배치 */
.positions-table-body .cell-pair { display:flex; flex-direction: column; gap:4px; }
.positions-table-body .cell-pair .pair { font-weight:600; color: var(--text-color); }
.positions-table-body .cell-pair .tags { display:flex; gap:6px; }
.positions-table-body .chip { background: var(--bg-color); color: var(--text-color-secondary); border:1px solid var(--border-color); padding: 2px 6px; font-size: 11px; }
.orders-table-body .cancel { padding:6px 10px; border-radius:6px; border:1px solid var(--border-color); background: var(--card-bg); color: var(--text-color); cursor:pointer; }

.paper-trading-sidebar {
    width: 340px;
    border-left: 1px solid var(--border-color);
    background: var(--bg-color);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto; /* 사이드바 자체에 스크롤 생성 */
    scrollbar-width: none; /* Firefox: 스크롤바 숨김 */
    -ms-overflow-style: none; /* IE/Edge: 스크롤바 숨김 */
}

/* WebKit 계열(Chrome/Safari) 스크롤바 숨김 */
.paper-trading-sidebar::-webkit-scrollbar { width: 0; height: 0; display: none; }

.orderbook-and-trade { display:flex; flex-direction: column; height: calc(100% - 320px); min-height:0; }

.orderbook-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 6px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    height: 42px;
}

.panel-header .tabs { display:flex; gap:12px; }
.panel-header .tabs .tab { position:relative; background: transparent; border:none; color: var(--text-color-secondary); padding:8px 4px; cursor:pointer; font-weight:600; }
.panel-header .tabs .tab.active { color: var(--text-color); }
.panel-header .tabs .tab::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background: transparent; }
.panel-header .tabs .tab.active::after { background: var(--primary-color); }

.symbol-price { display: flex; gap: 8px; align-items: baseline; }
.symbol-price .symbol { font-weight: 600; color: var(--text-color); }
.symbol-price .last-price { color: var(--success-color); font-weight: 600; }

/* 가격/PNL 변화 스파크 효과 */


.orderbook-body { flex: 1; height: 100%; min-height: 0; padding: 0; }
.orderbook-body#whale-tab-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.orderbook-body#whale-tab-body .whale-trades-wrapper { height: 100%; overflow-y: auto; overflow-x: hidden; }
.orderbook-body#whale-tab-body .whale-trades-container { height: auto; max-height: none; }
.orderbook-table { display:flex; flex-direction: column; height:100%; --ob-row-h: 24px; }
.ob-header { display:grid; grid-template-columns: 1fr 1fr 1fr; padding: 8px 10px; gap:10px; font-size:12px; color: var(--text-color-secondary); border-bottom:1px solid var(--border-color); background: var(--bg-color); }
.ob-rows { flex:1; overflow:hidden; }
.ob-row { position:relative; display:grid; grid-template-columns: 1.2fr 1fr 1fr; gap:10px; padding: 0 10px; font-size:12px; align-items:center; height: var(--ob-row-h); line-height: var(--ob-row-h); }
.ob-row .price { text-align:left; font-variant-numeric: tabular-nums; }
.ob-row .qty { text-align:right; color: var(--text-color); font-variant-numeric: tabular-nums; }
.ob-row .total { text-align:right; color: var(--text-color-secondary); font-variant-numeric: tabular-nums; }
.ob-row .bar { position:absolute; inset:0; opacity:0.28; pointer-events:none; transition: width 180ms linear, background-color 180ms ease; will-change: width; }
/* 중앙 현재가 행을 더 크게, 가운데 정렬로 강조 */
.ob-row.mid { height: 44px; line-height: 25px; z-index: 2; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.ob-row.mid .price { grid-column: auto; }
.ob-row.mid .mid-main { display:flex; align-items:center; gap: 12px; }
.ob-row.mid .mid-price { font-size: 18px; font-weight: 600; color:#2ca860; }
.ob-row.mid .mid-sub { display:none; }
.ob-row.mid .mid-arrow svg { width: 20px; height: 21px; }
.ob-row.mid .mid-arrow svg path { fill: #2ca860; }
.ob-row.mid .mid-arrow.down svg { transform: rotate(180deg); }
.ob-row.mid .mid-arrow.down svg path { fill: #d94a64; }
@media (prefers-reduced-motion: reduce) {
  .ob-row .bar { transition: none; }
}
.ob-row.ask .bar { right:0; left:auto; background:#f6d6d6; }
.ob-row.bid .bar { left:0; right:auto; background:#cdefe0; }
.ob-row.ask .price { color:#d94a64; }
.ob-row.bid .price { color:#16a34a; }

/* 오더북 툴팁 */
.ob-tooltip {
  position: fixed;
  z-index: 100000;
  display: none;
  background: rgba(17, 24, 39, 0.96);
  color: #e5e7eb;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  pointer-events: none;
}
.ob-tooltip b { color: #fff; }

/* 잔고 슬롯머신 효과 */
.slot-spin { animation: slotSpin .6s ease-out; }
@keyframes slotSpin {
  0% { transform: translateY(0); filter: blur(0px); }
  20% { transform: translateY(-2px); filter: blur(.2px); }
  40% { transform: translateY(2px); filter: blur(.2px); }
  60% { transform: translateY(-1px); filter: blur(.1px); }
  80% { transform: translateY(1px); filter: blur(.05px); }
  100% { transform: translateY(0); filter: blur(0); }
}
.ob-footer { padding: 9.5px 10px; border-top:1px solid var(--border-color); background: var(--bg-primary); flex-shrink: 0; }
.ratio { display:flex; align-items:center; gap:8px; font-size:12px; color: var(--text-color-secondary); }
.ratio-bar { position:relative; flex:1; height:8px; background: var(--bg-primary); border-radius: 999px; overflow:hidden; }
.ratio-bar #ob-buy-bar { position:absolute; left:0; top:0; bottom:0; background:#cdefe0; }
.ratio-bar #ob-sell-bar { position:absolute; right:0; top:0; bottom:0; background:#f6d6d6; }

.trade-panel { padding:10px; }
.trade-header { display:flex; align-items:center; justify-content: space-between; margin-bottom: 10px; }
.trade-tabs { display:flex; margin-bottom: 8px; }
.order-type-tabs { display:flex; margin-bottom: 10px; }
/* Limit/Market 탭 네비게이션 스타일 */
.order-type-tabs { gap:20px; align-items:center; border-bottom: 1px solid var(--border-color); padding: 0 8px; background: transparent; }
.order-type-tabs .order-type { position: relative; background: transparent !important; border:none; color: var(--text-color-secondary); padding:10px 4px; cursor:pointer; font-weight:600; }
.order-type-tabs .order-type::after { content: ""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background: transparent; transition: background-color .2s ease; }
.order-type-tabs .order-type.active { color: var(--text-color); }
.order-type-tabs .order-type.active::after { background: var(--primary-color); }

.order-form .field { display:block; margin-bottom: 10px; }
.order-form .label { display:block; font-size:12px; color: var(--text-color-secondary); margin-bottom: 6px; }
.order-form .input-wrap { display:flex; gap: 6px; }
.order-form input, .order-form select { flex:1; background: var(--bg-primary); border:1px solid var(--border-color); color: var(--text-color); padding: 10px; border-radius: 8px; }
.order-form #pt-amount-percent { text-align: left; }
.order-form .field-error { margin-top: 6px; font-size: 12px; color: #ef4444; }
.order-form .input-wrap.error input { border-color: #ef4444; box-shadow: 0 0 0 2px rgba(239,68,68,.2); }

/* 🔥 Market 선택 시 가격 입력 비활성화 스타일 (스크린샷 유사) */
.order-form.is-market input#pt-price {
    background: #eceff3;
    color: #9aa1aa;
}

.percent-slider { padding: 6px 0 4px; }
.percent-slider input[type="range"] { width: 100%; padding: 0; }
.percent-slider .ticks { display:flex; justify-content: space-between; font-size: 10px; color: var(--text-color-secondary); margin-top: 2px; }

.balances { display:flex; justify-content: space-between; font-size: 12px; color: var(--text-color-secondary); margin: 2px 0; }

.action-buttons { 
    display:flex; 
    gap: 8px; 
    margin-top: 10px; 
}

.btn { padding: 6px 12px; border-radius: 999px; border: none; cursor: pointer; font-weight: 600; }
.btn.long { background: #10b981; color: #fff; flex: 1; }
.btn.short { background: #ef4444; color: #fff; flex: 1; }
.btn.secondary { background: var(--card-bg); border:1px solid var(--border-color); color: var(--text-color); }

.positions { margin-top: 12px; }
.positions-header { display:flex; justify-content: space-between; align-items:center; margin-bottom: 6px; }
.positions-list { border:1px solid var(--border-color); border-radius: 8px; overflow: hidden; }
.position-row { display:grid; grid-template-columns: 54px 1fr 1fr 1fr 1fr 80px; padding: 8px 10px; border-bottom:1px solid var(--border-color); align-items:center; font-size: 12px; }
.position-row:last-child { border-bottom: none; }
.pos-dir.long { color:#10b981; font-weight:700; }
.pos-dir.short { color:#ef4444; font-weight:700; }
.pos-actions button { padding:6px 10px; border-radius: 6px; border:1px solid var(--border-color); background: var(--card-bg); color: var(--text-color); cursor:pointer; }

/* 모바일에서 사이드바 아래로 배치 */
@media (max-width: 1024px) {
  .paper-trading-sidebar { width: 100%; height: auto; border-left: none; border-top:1px solid var(--border-color); }
  .chart-trading-layout { flex-direction: column; }
  /* 핵심: 차트/사이드바 컨테이너도 세로 스택으로 전환 */
  .chart-and-sidebar { flex-direction: column; min-height: 0; }
  /* 모바일: 주문패널만 보이고 오더북 숨김, 그리고 포지션을 아래로 */
  .orderbook-and-trade { display:grid; grid-template-columns: 1fr; grid-auto-rows: minmax(0, auto); gap:8px; height:auto; align-items: stretch; }
  #mobile-trade-slot { display:block; grid-column: 1; grid-row: 1; }
  .orderbook-panel { display:none !important; }
  #mobile-positions-slot { grid-column: 1; grid-row: 2; }
  .trade-panel { background: var(--bg-color); border-right:1px solid var(--border-color); height:100%; }
  /* 채팅은 별도 컬럼으로 이동시키지 않음 */
}

/* ✅ 잔고 패널 스타일 */
.balance-header { display:flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.balance-title { font-size: 18px; font-weight: 700; color: var(--text-color); letter-spacing: .2px; }
.balance-amount { display:flex; align-items: baseline; gap:8px; }
.balance-amount #acc-equity-big { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1, 'lnum' 1; min-width: 14ch; text-align: right; }
.balance-amount .unit { color: var(--text-color-secondary); font-weight: 600; }
.balance-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.balance-grid { grid-template-columns: repeat(1fr); }
.balance-item { padding-top: 8px; border-top:1px dashed var(--border-color); text-align: left; }
.balance-grid .balance-item:last-child { text-align: right; }
.balance-item .label { color: var(--text-color-secondary); font-size: 14px }
.balance-item .value { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1, 'lnum' 1; }
.balance-item .value.up { color:#10b981; }
.balance-item .value.down { color:#ef4444; }

/* 작은 PnL 색상 제어 */
#acc-upnl.up { color:#10b981; }
#acc-upnl.down { color:#ef4444; }
/* ========================================
   차트는 chart.css 파일에서 관리
   ======================================== */

   /* 🔥 고래 탐지와 채팅 컨테이너 */
   .whale-chat-container {
    width: 390px;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--border-color);
    background-color: var(--bg-color);
}
/* 모바일에서 우선순위: 차트/주문/오더북 표시, 채팅은 아래쪽으로 */
@media (max-width: 768px){
  .hidden-mobile-chat{ display:none !important; }
}
/* 🔥 실시간 고래 탐지 섹션 */
.whale-tracking-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 50%;
    min-height: 0;
    background-color: var(--bg-color);
}
/* 🔥 고래 탐지 헤더 */
.whale-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 8px;
    border-bottom: 3px solid var(--border-color);
    background-color: var(--card-bg);
    flex-shrink: 0;
    height: 40px;
}

.whale-section-header h2 {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

.whale-section-header h2::before {
    content: "";
    font-size: 18px;
}

.whale-status-info {
    display: flex;
    align-items: center;
    gap: 6px;
}

.whale-status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #f59e0b;
    animation: pulse 2s infinite;
}

.whale-status-indicator.connected {
    background-color: #10b981;
}

.whale-status-indicator.disconnected {
    background-color: #ef4444;
}

.whale-status-indicator.error {
    background-color: #ef4444;
}

.whale-status-text {
    font-size: 12px;
    color: var(--text-color-secondary);
    font-weight: 500;
}
/* 🔥 고래 탐지 섹션은 whale-tracker.css 파일에서 관리 */

/* 🔥 구분선 */
.section-divider {
    height: 1px;
    background-color: var(--border-color);
    flex-shrink: 0;
}

/* 채팅 영역 */
.chat-section {
    flex: 2;
    display: flex;
    flex-direction: column;
    height: 50%;
    min-height: 0;
    background-color: var(--bg-color);
}

.chat-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 8px;
    border-bottom: 3px solid var(--border-color);
    background-color: var(--bg-primary);
    flex-shrink: 0;
    height: 40px;
}

.chat-section-header h2 {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-section-header h2::before {
    content: "";
    font-size: 18px;
}

.chat-users-count {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-color-secondary);
    font-size: 12px;
}

.chat-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 아바타 이미지를 항상 정사각형으로 강제 */
.chat-wrapper img.user-avatar,
.chat-section img.user-avatar,
.message .user-avatar,
.chat-message .avatar,
.message-row .avatar {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    max-width: 48px;
    max-height: 48px;
    border-radius: 50%;
    object-fit: cover; /* 세로/가로 비율 상관없이 가운데 채우기 */
    object-position: center;
    display: block;
}

/* ========================================
   🔥 모바일 반응형 스타일
   ======================================== */
@media (max-width: 768px) {
  /* 모바일: 포지션 바 헤더 폰트 크기 축소 */
  .positions-bar-header { font-size: 12px; }
  .positions-bar-header .title { font-size: 12px; }
  .positions-bar-header .acct-eff { font-size: 12px; }

    /* 모바일에서 레이아웃을 세로로 변경 */
    .community-layout-inner {
        flex-direction: column;
    }
    
    /* 모바일에서 고래탐지 섹션 숨기기 */
    .whale-tracking-section {
        display: none !important;
    }
    
    /* 모바일에서 구분선 숨기기 */
    .section-divider {
        display: none !important;
    }
    
    /* chart-layout-header 제거됨 */
    
    /* 모바일에서는 고래/채팅 컨테이너 감춤 */
    .whale-chat-container {
        display: none !important;
    }
    
    /* 모바일에서 차트 섹션을 전체 높이로 */
    .chart-section {
        height: 100% !important;
        min-height: 0;
    }
    
    /* 모바일에서 채팅 섹션 전체 높이로 변경 */
    .chat-section {
        height: 100%;
        flex: 1;
    }
    
    /* 모바일에서 채팅 헤더 높이 조정 */
    .chat-section-header {
        height: 50px;
        padding: 16px 12px;
    }
    
    .chat-section-header h2 {
        font-size: 16px;
    }
    
    /* 모바일에서 채팅 메시지 영역 패딩 조정 */
    #chat-messages {
        padding: 12px;
        -webkit-overflow-scrolling: touch; /* iOS 스크롤 개선 */
    }
    
    /* 모바일에서 차트 컨테이너 높이 조정 */
    #chart-container-wrapper {
        height: 100%;
    }
    
    /* 모바일에서 TradingView 차트 높이 조정 */
    #tradingview_chart {
        height: 100% !important;
    }
    
    /* 모바일에서 차트 로딩 상태 개선 */
    .chart-loading {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        font-size: 16px;
        color: var(--text-color-secondary);
    }
    
    /* 모바일에서 채팅 입력 폼 개선 */
    .chat-input-form {
        padding: 12px;
        border-top: 1px solid var(--border-color);
    }
    
    .chat-input-form input {
        font-size: 16px; /* iOS에서 줌 방지 */
        padding: 12px;
        border-radius: 8px;
    }
    
    .chat-input-form button {
        padding: 12px 20px;
        border-radius: 8px;
        font-size: 14px;
    }
    
    /* 모바일에서 전체 레이아웃 높이 조정 */
    .community-layout {
        height: 100%;
        overflow-y: auto;
    }
    
    /* 모바일에서 스크롤 개선 */
    .community-layout-inner {
        overflow: hidden;
    }
    
    /* 모바일에서 채팅 메시지 스크롤 개선 */
    .chat-wrapper {
        overflow: hidden;
    }
    
    #chat-messages {
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--border-color) transparent;
    }
    
    #chat-messages::-webkit-scrollbar {
        width: 4px;
    }
    
    #chat-messages::-webkit-scrollbar-track {
        background: transparent;
    }
    
    #chat-messages::-webkit-scrollbar-thumb {
        background-color: var(--border-color);
        border-radius: 2px;
    }
}