/* ============================================================
 * 모의거래소 - 바이낸스 스타일 다크 테마
 * 톤: 블랙 + 바이낸스 옐로우(#f0b90b) + 매수 그린 / 매도 레드
 * ============================================================ */
:root {
    --tx-bg-0: #0b0e11;
    --tx-bg-1: #111418;
    --tx-bg-2: #181b20;
    --tx-bg-3: #1e2329;
    --tx-line: #2b3139;
    --tx-line-2: #3a424a;
    --tx-ink-0: #ffffff;
    --tx-ink-1: #eaecef;
    --tx-ink-2: #b7bdc6;
    --tx-ink-3: #848e9c;
    --tx-yellow: #f0b90b;
    --tx-yellow-2: #fcd535;
    --tx-green: #0ecb81;
    --tx-green-dim: #089f6b;
    --tx-red: #f6465d;
    --tx-red-dim: #cf304a;
    --tx-blue: #1e88e5;
}

.tx-wrap {
    max-width: 1280px;
    margin: 16px auto 48px;
    padding: 0 16px;
    color: var(--tx-ink-1);
    font-family: inherit;
    width: 100%;
}

/* ============================================================
 * 풀와이드 모드 (거래소 전용)
 *   - 좌/우 사이드바 숨김
 *   - shell 을 1컬럼으로 변경 후 main 이 전체 폭 사용
 *   - 내부에서 호가창 | 차트 | 주문폼 3컬럼 재구성
 * ============================================================ */
body.tx-fullscreen .spk-sidebar,
body.tx-fullscreen .spk-sidebar-right { display: none !important; }
body.tx-fullscreen .spk-shell,
body.tx-fullscreen .spk-shell:has(.spk-sidebar-right) {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    width: 100% !important;
    background: #0a1628;
}
body.tx-fullscreen .spk-main { width: 100% !important; }
body.tx-fullscreen .tx-wrap { max-width: 100%; padding: 0; margin: 0; }
body.tx-fullscreen .spk-side-banner { display: none !important; }

/* ===== 헤더 + 탭 ===== */
.tx-header {
    background: linear-gradient(180deg, rgba(240, 185, 11, .08) 0%, rgba(11, 14, 17, 0) 100%),
                linear-gradient(180deg, var(--tx-bg-2) 0%, var(--tx-bg-1) 100%);
    border: 1px solid var(--tx-line);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 20px;
}
.tx-header-inner {
    padding: 22px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.tx-brand { display: flex; align-items: center; gap: 16px; }
.tx-brand-logo {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tx-yellow), #d79e0a);
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; font-weight: 900; color: #000;
    box-shadow: 0 6px 20px rgba(240, 185, 11, .3);
}
.tx-brand-txt b { font-size: 22px; color: var(--tx-ink-0); font-weight: 900; letter-spacing: -.01em; }
.tx-brand-txt small { display: block; font-size: 12px; color: var(--tx-ink-3); margin-top: 2px; }

.tx-brand-wallet {
    text-align: right;
    background: rgba(240, 185, 11, .08);
    border: 1px solid rgba(240, 185, 11, .25);
    border-radius: 10px;
    padding: 10px 16px;
}
.tx-wallet-label { font-size: 11px; color: var(--tx-ink-3); display: block; }
.tx-wallet-amount { font-size: 18px; color: var(--tx-yellow); font-weight: 800; }

/* ===== 이용 가이드 모달 ===== */
body.tx-modal-open { overflow: hidden; }
.tx-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
}
.tx-modal.is-open { display: flex; animation: txModalIn .18s ease-out; }
@keyframes txModalIn { from { opacity: 0; } to { opacity: 1; } }
.tx-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .7);
    backdrop-filter: blur(4px);
}
.tx-modal-box {
    position: relative;
    width: 100%;
    max-width: 880px;
    max-height: calc(100vh - 60px);
    background: var(--tx-bg-1);
    border: 1px solid var(--tx-line);
    border-radius: 14px;
    box-shadow: 0 30px 80px rgba(0,0,0,.6);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.tx-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    background: var(--tx-bg-2);
    border-bottom: 1px solid var(--tx-line);
}
.tx-modal-head strong {
    font-size: 16px;
    color: var(--tx-ink-0);
    font-weight: 800;
}
.tx-modal-close {
    background: transparent;
    border: none;
    color: var(--tx-ink-2);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
    transition: color .15s;
}
.tx-modal-close:hover { color: var(--tx-ink-0); }
.tx-modal-body {
    overflow-y: auto;
    padding: 0;
}
.tx-modal-body .tx-section {
    border: none;
    border-radius: 0;
    background: var(--tx-bg-1);
}
@media (max-width: 768px) {
    .tx-modal { padding: 12px; }
    .tx-modal-box { max-height: calc(100vh - 24px); }
    .tx-modal-head { padding: 12px 16px; }
}

/* ===== 가이드 본문 서브섹션/예시 박스 ===== */
.tx-guide-sub {
    margin: 14px 0;
    padding-left: 14px;
    border-left: 2px solid var(--tx-line);
}
.tx-guide-sub h4 {
    margin: 0 0 6px;
    color: var(--tx-yellow);
    font-size: 14px;
    font-weight: 800;
}
.tx-guide-example {
    margin: 10px 0;
    padding: 12px 16px;
    background: rgba(0,0,0,.25);
    border: 1px dashed var(--tx-line-2);
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--tx-ink-2);
}
.tx-guide-example b { color: var(--tx-ink-0); }
.tx-guide-box code {
    display: inline-block;
    padding: 2px 8px;
    background: var(--tx-bg-3);
    border-radius: 4px;
    color: var(--tx-yellow);
    font-family: Consolas, Monaco, monospace;
    font-size: 12px;
}

/* ===== 개편 안내 박스 ===== */
.tx-notice-box {
    margin: 0 28px 20px;
    background: linear-gradient(180deg, rgba(240, 185, 11, .08) 0%, rgba(240, 185, 11, .02) 100%);
    border: 1px solid rgba(240, 185, 11, .3);
    border-radius: 12px;
    padding: 16px 20px;
}
.tx-notice-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.tx-notice-badge {
    display: inline-block;
    padding: 3px 8px;
    background: var(--tx-yellow);
    color: #000;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .02em;
}
.tx-notice-head strong {
    color: var(--tx-ink-0);
    font-size: 14px;
    font-weight: 800;
}
.tx-notice-list {
    margin: 0;
    padding-left: 18px;
    color: var(--tx-ink-2);
    font-size: 12.5px;
    line-height: 1.75;
}
.tx-notice-list li { margin-bottom: 3px; }
.tx-notice-list b { color: var(--tx-ink-0); font-weight: 700; }
.tx-notice-foot {
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px dashed rgba(240, 185, 11, .2);
    color: var(--tx-ink-3);
    font-size: 11.5px;
    line-height: 1.6;
}
@media (max-width: 768px) {
    .tx-notice-box { margin: 0 14px 14px; padding: 12px 14px; }
    .tx-notice-head strong { font-size: 13px; }
    .tx-notice-list { font-size: 12px; }
}

.tx-tabs {
    display: flex;
    gap: 2px;
    background: rgba(0, 0, 0, .3);
    padding: 4px;
    border-top: 1px solid var(--tx-line);
    overflow-x: auto;
}
.tx-tab {
    flex: 1;
    min-width: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 12px;
    background: transparent;
    border-radius: 10px;
    color: var(--tx-ink-3);
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
    transition: all .2s ease;
}
.tx-tab:hover { color: var(--tx-ink-0); background: rgba(255, 255, 255, .04); }
.tx-tab.is-active {
    background: linear-gradient(135deg, rgba(240, 185, 11, .18), rgba(240, 185, 11, .08));
    color: var(--tx-yellow);
    box-shadow: 0 0 0 1px rgba(240, 185, 11, .35) inset;
}
.tx-tab-ic { font-size: 18px; }

.tx-main { min-height: 500px; }
.tx-empty {
    padding: 60px 20px;
    text-align: center;
    color: var(--tx-ink-3);
    background: var(--tx-bg-1);
    border: 1px solid var(--tx-line);
    border-radius: 12px;
}

/* ===== 공통 섹션 ===== */
.tx-section {
    background: var(--tx-bg-1);
    border: 1px solid var(--tx-line);
    border-radius: 14px;
    padding: 24px 28px;
}
.tx-sec-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--tx-ink-0);
    margin: 0 0 6px;
}
.tx-sec-desc { color: var(--tx-ink-3); font-size: 13px; margin: 0 0 18px; }

.tx-guest-box, .tx-empty-box {
    padding: 40px 20px;
    text-align: center;
    background: var(--tx-bg-2);
    border: 1px dashed var(--tx-line);
    border-radius: 10px;
}
.tx-guest-box p, .tx-empty-box p { color: var(--tx-ink-2); margin: 0 0 16px; }

/* ===== 버튼 ===== */
.tx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all .15s ease;
}
.tx-btn-sm { padding: 6px 14px; font-size: 12px; }
.tx-btn-primary {
    background: var(--tx-yellow);
    color: #000;
}
.tx-btn-primary:hover { background: var(--tx-yellow-2); }
.tx-btn-buy {
    background: var(--tx-green);
    color: #fff;
    width: 100%;
    padding: 14px;
    font-size: 15px;
}
.tx-btn-buy:hover { background: var(--tx-green-dim); }
.tx-btn-sell {
    background: var(--tx-red);
    color: #fff;
    width: 100%;
    padding: 14px;
    font-size: 15px;
}
.tx-btn-sell:hover { background: var(--tx-red-dim); }

/* ============================================================
 * 거래소 메인 화면
 * ============================================================ */
.tx-ex-topbar {
    display: flex;
    align-items: center;
    gap: 24px;
    background: var(--tx-bg-1);
    border: 1px solid var(--tx-line);
    border-radius: 12px;
    padding: 14px 20px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

/* 포인트 환산 안내 (우측) */
.tx-ex-rate-info {
    margin-left: auto;
    padding: 10px 14px;
    background: rgba(240, 185, 11, .08);
    border: 1px solid rgba(240, 185, 11, .25);
    border-radius: 8px;
    min-width: 220px;
}
.tx-rate-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--tx-yellow);
    margin-bottom: 3px;
}
.tx-rate-head b { color: var(--tx-yellow); font-weight: 800; }
.tx-rate-icon { font-size: 15px; }
.tx-rate-example {
    font-size: 11px;
    color: var(--tx-ink-2);
    line-height: 1.5;
}
.tx-rate-example b { color: var(--tx-ink-0); font-weight: 700; }
@media (max-width: 900px) {
    .tx-ex-rate-info { margin-left: 0; width: 100%; }
}
.tx-ex-select {
    background: var(--tx-bg-3);
    border: 1px solid var(--tx-line-2);
    color: var(--tx-ink-0);
    padding: 10px 14px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    min-width: 140px;
    cursor: pointer;
}
.tx-ex-stats { display: flex; gap: 28px; flex-wrap: wrap; }
.tx-ex-stat { display: flex; flex-direction: column; }
.tx-ex-stat span { font-size: 11px; color: var(--tx-ink-3); }
.tx-ex-stat strong { font-size: 15px; color: var(--tx-ink-0); font-weight: 700; }
.tx-ex-stat strong.is-up { color: var(--tx-green); }
.tx-ex-stat strong.is-down { color: var(--tx-red); }

.tx-ex-grid {
    display: grid;
    grid-template-columns: 260px 1fr 320px;
    gap: 12px;
    margin-bottom: 12px;
}
/* 풀와이드 모드에선 차트 더 크게 */
body.tx-fullscreen .tx-ex-grid {
    grid-template-columns: 280px 1fr 340px;
}

.tx-ex-chart {
    background: var(--tx-bg-1);
    border: 1px solid var(--tx-line);
    border-radius: 12px;
    overflow: hidden;
    min-height: 640px;
    position: relative;
}

/* ===== 차트 내 주문선 오버레이 ===== */
.tx-ex-orderlines {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    width: 240px;
    max-height: 70%;
    background: rgba(11, 14, 17, .92);
    backdrop-filter: blur(8px);
    border: 1px solid var(--tx-line-2);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
    display: flex;
    flex-direction: column;
    font-size: 11px;
}
.tx-ol-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--tx-bg-3);
    border-bottom: 1px solid var(--tx-line-2);
    font-size: 12px;
}
.tx-ol-head strong { color: var(--tx-ink-0); font-weight: 800; }
.tx-ol-dot {
    width: 7px; height: 7px;
    background: var(--tx-yellow);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--tx-yellow);
}
.tx-ol-count {
    margin-left: auto;
    min-width: 20px;
    padding: 1px 8px;
    background: var(--tx-yellow);
    color: #000;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 800;
    text-align: center;
}
.tx-ol-body {
    overflow-y: auto;
    flex: 1;
}
.tx-ol-empty {
    padding: 18px 14px;
    text-align: center;
    color: var(--tx-ink-3);
    font-size: 11px;
    line-height: 1.6;
}
.tx-ol-empty b { color: var(--tx-ink-1); font-weight: 700; }
.tx-ex-empty b { color: var(--tx-ink-1); font-weight: 700; }
.tx-ol-line {
    display: grid;
    grid-template-columns: 40px 1fr 70px;
    grid-template-rows: auto auto;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(43, 49, 57, .5);
    font-variant-numeric: tabular-nums;
    position: relative;
    transition: background .2s;
}
.tx-ol-line:last-child { border-bottom: none; }
.tx-ol-line::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
}
.tx-ol-buy::before  { background: var(--tx-green); }
.tx-ol-sell::before { background: var(--tx-red); }
.tx-ol-side {
    grid-row: 1;
    font-weight: 800;
    font-size: 11px;
}
.tx-ol-buy  .tx-ol-side { color: var(--tx-green); }
.tx-ol-sell .tx-ol-side { color: var(--tx-red); }
.tx-ol-price {
    grid-row: 1;
    color: var(--tx-ink-0);
    font-weight: 700;
    font-size: 12px;
}
.tx-ol-dist {
    grid-row: 1;
    color: var(--tx-ink-2);
    text-align: right;
    font-size: 11px;
}
.tx-ol-amount {
    grid-row: 2;
    grid-column: 1 / -1;
    color: var(--tx-ink-3);
    font-size: 10px;
    margin-top: 2px;
    text-align: right;
}
.tx-ol-line.is-near {
    background: rgba(240, 185, 11, .08);
}
.tx-ol-line.is-very-near {
    background: rgba(240, 185, 11, .18);
    animation: txOlPulse 1.2s ease-in-out infinite;
}
@keyframes txOlPulse {
    0%,100% { background: rgba(240, 185, 11, .18); }
    50%     { background: rgba(240, 185, 11, .32); }
}

/* 모바일에서는 오버레이를 작게 */
@media (max-width: 800px) {
    .tx-ex-orderlines { width: 180px; top: 8px; right: 8px; font-size: 10px; }
    .tx-ol-head { padding: 6px 10px; }
}
#tx-tv-chart { width: 100%; height: 640px; }
body.tx-fullscreen .tx-ex-chart { min-height: 720px; }
body.tx-fullscreen #tx-tv-chart { height: 720px; }

.tx-ex-orderbook, .tx-ex-order {
    background: var(--tx-bg-1);
    border: 1px solid var(--tx-line);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 매수/매도 상단 탭 (바이낸스 스타일) */
.tx-ex-sidetabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--tx-bg-2);
    border-bottom: 1px solid var(--tx-line);
}
.tx-ex-side {
    padding: 13px 0;
    background: transparent;
    border: none;
    color: var(--tx-ink-3);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    position: relative;
    transition: all .15s;
}
.tx-ex-side:hover { color: var(--tx-ink-1); }
.tx-ex-side.is-active { color: var(--tx-ink-0); background: var(--tx-bg-1); }
.tx-ex-side[data-side="buy"].is-active {
    color: var(--tx-green);
    box-shadow: inset 0 -2px 0 var(--tx-green);
}
.tx-ex-side[data-side="sell"].is-active {
    color: var(--tx-red);
    box-shadow: inset 0 -2px 0 var(--tx-red);
}
.tx-ex-box-head {
    padding: 12px 16px;
    background: var(--tx-bg-2);
    border-bottom: 1px solid var(--tx-line);
    font-weight: 700;
    font-size: 13px;
    color: var(--tx-ink-1);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 호가창 */
.tx-ex-ob-asks, .tx-ex-ob-bids {
    flex: 1;
    overflow-y: auto;
    font-size: 12px;
    line-height: 1.6;
}
.tx-ex-ob-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 2px 12px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    position: relative;
}
.tx-ex-ob-row:hover { background: rgba(255,255,255,.04); }
.tx-ex-ob-row .tx-ob-fill {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    opacity: .15;
    pointer-events: none;
}
.tx-ex-ob-asks .tx-ob-price { color: var(--tx-red); }
.tx-ex-ob-asks .tx-ob-fill { background: var(--tx-red); }
.tx-ex-ob-bids .tx-ob-price { color: var(--tx-green); }
.tx-ex-ob-bids .tx-ob-fill { background: var(--tx-green); }
.tx-ob-amount, .tx-ob-total { color: var(--tx-ink-2); text-align: right; }

.tx-ex-ob-mid {
    padding: 10px 16px;
    text-align: center;
    font-weight: 800;
    font-size: 16px;
    color: var(--tx-ink-0);
    background: var(--tx-bg-2);
    border-top: 1px solid var(--tx-line);
    border-bottom: 1px solid var(--tx-line);
}

.tx-ex-loading, .tx-ex-empty {
    padding: 30px 16px;
    text-align: center;
    color: var(--tx-ink-3);
    font-size: 12px;
}

/* 주문 폼 */
.tx-ex-ordertabs { display: flex; gap: 6px; }
.tx-ex-ot {
    background: transparent;
    border: none;
    color: var(--tx-ink-3);
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
}
.tx-ex-ot.is-active { background: var(--tx-bg-3); color: var(--tx-yellow); }

.tx-ex-order-body { padding: 16px; }
.tx-ex-guest { text-align: center; padding: 40px 0; }
.tx-ex-guest p { color: var(--tx-ink-3); margin-bottom: 14px; font-size: 13px; }

.tx-ex-balance {
    background: var(--tx-bg-2);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 14px;
    font-size: 12px;
}
.tx-ex-bal-row { display: flex; justify-content: space-between; padding: 4px 0; }
.tx-ex-bal-row span { color: var(--tx-ink-3); }
.tx-ex-bal-row strong { color: var(--tx-ink-0); }

.tx-ex-order-group { margin-bottom: 10px; }
.tx-ex-lbl { display: block; font-size: 11px; color: var(--tx-ink-3); margin-bottom: 4px; }
.tx-ex-input {
    width: 100%;
    background: var(--tx-bg-3);
    border: 1px solid var(--tx-line-2);
    border-radius: 6px;
    color: var(--tx-ink-0);
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
}
.tx-ex-input:focus { outline: none; border-color: var(--tx-yellow); }
.tx-ex-input:disabled { opacity: .6; }

.tx-ex-pct {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-bottom: 12px;
}
.tx-ex-pct button {
    background: var(--tx-bg-3);
    border: 1px solid var(--tx-line-2);
    color: var(--tx-ink-2);
    padding: 6px;
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
}
.tx-ex-pct button:hover { color: var(--tx-yellow); border-color: var(--tx-yellow); }

.tx-ex-total {
    display: flex;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--tx-bg-2);
    border-radius: 6px;
    margin-bottom: 12px;
    font-size: 13px;
}
.tx-ex-total span { color: var(--tx-ink-3); }
.tx-ex-total strong { color: var(--tx-yellow); font-weight: 800; }

.tx-ex-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* 하단 */
.tx-ex-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.tx-ex-box {
    background: var(--tx-bg-1);
    border: 1px solid var(--tx-line);
    border-radius: 12px;
    overflow: hidden;
    min-height: 200px;
}

/* 미체결 주문 (지정가) */
.tx-ex-pending-row {
    display: grid;
    grid-template-columns: 60px 90px 1fr 1fr 60px;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--tx-line);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    gap: 6px;
}
.tx-ex-pending-row:last-child { border-bottom: none; }
.tx-cancel-btn {
    background: transparent;
    border: 1px solid var(--tx-line-2);
    color: var(--tx-ink-2);
    padding: 4px 8px;
    border-radius: 5px;
    font-size: 11px;
    cursor: pointer;
    transition: all .15s;
}
.tx-cancel-btn:hover:not(:disabled) { color: var(--tx-red); border-color: var(--tx-red); }
.tx-cancel-btn:disabled { opacity: .5; cursor: default; }

.tx-ex-notice {
    margin-top: 16px;
    padding: 14px 18px;
    background: rgb(17 20 24)
    border: 1px solid rgba(240, 185, 11, .25);
    border-radius: 10px;
    font-size: 12px;
    color: var(--tx-ink-2);
    line-height: 1.6;
}

/* ===== 시장 목록 ===== */
.tx-market-table {
    width: 100%;
    border-collapse: collapse;
}
.tx-market-table th, .tx-market-table td {
    padding: 14px 12px;
    text-align: left;
    border-bottom: 1px solid var(--tx-line);
    font-size: 13px;
}
.tx-market-table th { color: var(--tx-ink-3); font-weight: 600; font-size: 12px; background: var(--tx-bg-2); }
.tx-market-table td { font-variant-numeric: tabular-nums; }
.tx-mk-name strong { display: block; color: var(--tx-ink-0); font-size: 14px; }
.tx-mk-name small { color: var(--tx-ink-3); font-size: 11px; }
.tx-mk-change.is-up { color: var(--tx-green); font-weight: 700; }
.tx-mk-change.is-down { color: var(--tx-red); font-weight: 700; }

/* ===== 포지션 요약 박스 ===== */
.tx-pos-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}
.tx-pos-sum-box {
    background: var(--tx-bg-2);
    border: 1px solid var(--tx-line);
    border-radius: 10px;
    padding: 14px 16px;
}
.tx-pos-sum-box span { display: block; font-size: 11px; color: var(--tx-ink-3); margin-bottom: 4px; }
.tx-pos-sum-box strong { display: block; font-size: 16px; color: var(--tx-ink-0); font-weight: 800; }
.tx-pos-price, .tx-pos-value { font-variant-numeric: tabular-nums; }
.tx-pos-pnl.is-up { color: var(--tx-green); font-weight: 700; }
.tx-pos-pnl.is-down { color: var(--tx-red); font-weight: 700; }

@media (max-width: 900px) {
    .tx-pos-summary { grid-template-columns: repeat(2, 1fr); }
}

/* ===== 시즌 배너 ===== */
.tx-season-banner {
    background: linear-gradient(135deg, rgba(240, 185, 11, .15), rgba(240, 185, 11, .04));
    border: 1px solid rgba(240, 185, 11, .4);
    border-radius: 14px;
    padding: 20px 24px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}
.tx-season-banner::before {
    content: '🏆';
    position: absolute;
    right: -10px;
    top: -20px;
    font-size: 160px;
    opacity: .06;
    pointer-events: none;
}
.tx-season-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.tx-season-badge {
    display: inline-block;
    padding: 4px 10px;
    background: var(--tx-red);
    color: #fff;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
    animation: txPulse 1.6s ease-in-out infinite;
}
@keyframes txPulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50%     { opacity: .85; transform: scale(1.05); }
}
.tx-season-head h3 {
    margin: 0;
    color: var(--tx-ink-0);
    font-size: 18px;
    font-weight: 800;
}
.tx-season-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 14px;
}
.tx-season-dates span, .tx-season-countdown span {
    display: block;
    font-size: 11px;
    color: var(--tx-ink-3);
    margin-bottom: 3px;
}
.tx-season-dates strong { color: var(--tx-ink-1); font-size: 13px; font-weight: 700; }
.tx-season-countdown strong { color: var(--tx-yellow); font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; }
.tx-season-prize {
    padding: 10px 14px;
    background: rgba(0, 0, 0, .3);
    border-radius: 8px;
    color: var(--tx-ink-1);
    font-size: 13px;
    line-height: 1.6;
}

/* 랭킹 모드 탭 (시즌/일간/주간/...) */
.tx-rank-mode-tabs {
    display: flex;
    gap: 4px;
    background: var(--tx-bg-2);
    padding: 4px;
    border: 1px solid var(--tx-line);
    border-radius: 10px;
    margin-bottom: 14px;
    width: fit-content;
    flex-wrap: wrap;
}
.tx-rank-mode {
    padding: 8px 16px;
    border-radius: 6px;
    color: var(--tx-ink-3);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    transition: all .15s;
}
.tx-rank-mode:hover { color: var(--tx-ink-0); background: rgba(255,255,255,.04); }
.tx-rank-mode.is-active { background: var(--tx-yellow); color: #000; }

.tx-rank-pastsel {
    margin-bottom: 16px;
    font-size: 12px;
    color: var(--tx-ink-2);
}
.tx-rank-pastsel select {
    background: var(--tx-bg-2);
    color: var(--tx-ink-1);
    border: 1px solid var(--tx-line);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    margin-left: 6px;
    min-width: 300px;
}

/* ===== 랭킹 ===== */
.tx-rank-tabs {
    display: flex;
    gap: 4px;
    background: var(--tx-bg-2);
    padding: 4px;
    border: 1px solid var(--tx-line);
    border-radius: 10px;
    margin-bottom: 18px;
    width: fit-content;
}
.tx-rank-tab {
    padding: 8px 18px;
    border-radius: 6px;
    color: var(--tx-ink-3);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    transition: all .15s;
}
.tx-rank-tab:hover { color: var(--tx-ink-0); background: rgba(255,255,255,.04); }
.tx-rank-tab.is-active { background: var(--tx-yellow); color: #000; }

.tx-rank-podium {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}
.tx-rank-card {
    background: var(--tx-bg-2);
    border: 1px solid var(--tx-line);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    position: relative;
    transition: transform .2s;
}
.tx-rank-card:hover { transform: translateY(-2px); }
.tx-rank-card-1 { border-color: rgba(255, 215, 0, .5); box-shadow: 0 4px 20px rgba(255, 215, 0, .12); }
.tx-rank-card-2 { border-color: rgba(192, 192, 192, .4); }
.tx-rank-card-3 { border-color: rgba(205, 127, 50, .4); }
.tx-rank-card-medal { font-size: 38px; line-height: 1; margin-bottom: 8px; }
.tx-rank-card-nick { font-size: 15px; font-weight: 700; color: var(--tx-ink-0); margin-bottom: 10px; }
.tx-rank-card-pnl { font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; }
.tx-rank-card-pnl small { font-size: 11px; font-weight: 600; color: var(--tx-ink-3); }
.tx-rank-card-stats { font-size: 11px; color: var(--tx-ink-3); margin-top: 6px; }

.tx-rank-list { display: flex; flex-direction: column; gap: 8px; }
.tx-rank-row {
    display: grid;
    grid-template-columns: 40px 1fr 140px 180px;
    align-items: center;
    padding: 14px 16px;
    background: var(--tx-bg-2);
    border: 1px solid var(--tx-line);
    border-radius: 10px;
    gap: 12px;
}
.tx-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--tx-bg-3);
    color: var(--tx-ink-1);
    font-weight: 800;
    font-size: 13px;
}
.tx-rank-badge.rank-1 { background: linear-gradient(135deg, #ffd700, #b8860b); color: #000; }
.tx-rank-badge.rank-2 { background: linear-gradient(135deg, #c0c0c0, #808080); color: #000; }
.tx-rank-badge.rank-3 { background: linear-gradient(135deg, #cd7f32, #8b4513); color: #fff; }
.tx-rank-nick { font-weight: 700; color: var(--tx-ink-0); }
.tx-rank-profit { color: var(--tx-green); font-weight: 700; font-variant-numeric: tabular-nums; }
.tx-rank-pts { color: var(--tx-ink-2); text-align: right; font-variant-numeric: tabular-nums; }

/* ===== 가이드 ===== */
.tx-guide-box {
    background: var(--tx-bg-2);
    border: 1px solid var(--tx-line);
    border-radius: 10px;
    padding: 18px 22px;
    margin-bottom: 14px;
}
.tx-guide-box h3 {
    margin: 0 0 10px;
    color: var(--tx-yellow);
    font-size: 16px;
    font-weight: 800;
}
.tx-guide-box p, .tx-guide-box li {
    color: var(--tx-ink-2);
    font-size: 13px;
    line-height: 1.7;
}
.tx-guide-box ol, .tx-guide-box ul { padding-left: 20px; margin: 0; }
.tx-guide-box b { color: var(--tx-ink-0); }
.tx-guide-caution {
    background: rgba(246, 70, 93, .08);
    border-color: rgba(246, 70, 93, .3);
}
.tx-guide-caution h3 { color: var(--tx-red); }

/* ===== 반응형 ===== */
/* 중간 뷰포트: 호가창 + 차트 2컬럼, 주문폼 아래로 */
@media (max-width: 1200px) {
    .tx-ex-grid, body.tx-fullscreen .tx-ex-grid {
        grid-template-columns: 240px 1fr;
    }
    .tx-ex-order { grid-column: 1 / -1; }
    .tx-ex-chart { min-height: 520px; }
    #tx-tv-chart { height: 520px; }
    body.tx-fullscreen .tx-ex-chart { min-height: 560px; }
    body.tx-fullscreen #tx-tv-chart { height: 560px; }
}
/* 모바일: 완전 세로 스택 - 차트 먼저, 그다음 주문폼, 마지막 호가창 */
@media (max-width: 800px) {
    .tx-ex-grid, body.tx-fullscreen .tx-ex-grid {
        grid-template-columns: 1fr;
    }
    .tx-ex-chart     { order: 1; min-height: 360px; }
    #tx-tv-chart, body.tx-fullscreen #tx-tv-chart { height: 360px; }
    body.tx-fullscreen .tx-ex-chart { min-height: 360px; }
    .tx-ex-order     { order: 2; }
    .tx-ex-orderbook { order: 3; min-height: 360px; }
}
@media (max-width: 768px) {
    .tx-header-inner { padding: 16px 18px; }
    .tx-brand-txt b { font-size: 18px; }
    .tx-ex-topbar { padding: 10px 14px; gap: 14px; }
    .tx-ex-stats { gap: 14px; }
    .tx-ex-stat span { font-size: 10px; }
    .tx-ex-stat strong { font-size: 12px; }
    .tx-ex-bottom { grid-template-columns: 1fr; }
    .tx-rank-row { grid-template-columns: 32px 1fr 80px; }
    .tx-rank-pts { display: none; }
    .tx-market-table th:nth-child(4), .tx-market-table td:nth-child(4) { display: none; }
    .tx-section { padding: 18px 16px; }
}