/* ===== trader-app.css — CrownyTrader 독립 대시보드 스타일 ===== */
/* CrownyBus 브랜드 통합 — 다크 초콜릿 테마 (크림/골드 계열) */
/* 녹색 없음. 블루그레이(#5B7B8C) 대체. */

:root {
    /* CrownyBus 브랜드 다크 — 따뜻한 초콜릿 계열 */
    --t-bg: #1A120B;
    --t-bg2: #231910;
    --t-bg3: #2A1F14;
    --t-surface: #342818;
    --t-border: #3D2B1F;
    --t-text: #E8D5C4;
    --t-text2: #A08060;
    --t-accent: #5B7B8C;
    --t-gold: #8B6914;
    --t-gold-light: #C9A84C;
    --t-buy: #1E88E5;
    --t-sell: #B54534;
    --t-warn: #C4841D;

    /* CrownyBus 호환 변수 */
    --primary: #3D2B1F;
    --primary-light: #6B5744;
    --gold: #8B6914;
    --bg: #1A120B;
    --bg-card: #2A1F14;
    --border: #3D2B1F;
    --text: #E8D5C4;
    --text-secondary: #A08060;
    --error: #B54534;
    --success: #5B7B8C;
    --warning: #C4841D;
    --surface: #342818;
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; overflow:hidden; background:var(--t-bg); color:var(--t-text); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:13px; }

/* ── 메인 그리드 ──────────────────────────────────────── */
#trader-app {
    display:grid;
    grid-template-rows:36px auto 1fr 28px;
    grid-template-columns:220px 1fr 240px;
    grid-template-areas:
        "header  header  header"
        "vtabs   vtabs   vtabs"
        "left    chart   right"
        "footer  footer  footer";
    height:100vh;
    gap:1px;
    background:var(--t-border);
}

/* ── 헤더 ─────────────────────────────────────────────── */
#view-tabs { grid-area:vtabs; }

#t-header {
    grid-area:header;
    background:var(--t-bg2);
    display:flex;
    align-items:center;
    padding:0 12px;
    gap:12px;
    font-size:12px;
}
#t-header .brand { font-weight:700; font-size:14px; color:var(--t-gold-light, #C9A84C); letter-spacing:2px; text-transform:uppercase; }
#t-header .price { font-size:16px; font-weight:700; }
#t-header .price.up { color:var(--t-buy); }
#t-header .price.down { color:var(--t-sell); }
#t-header .change { font-size:11px; }
#t-header .session-badge { padding:2px 8px; border-radius:10px; font-size:10px; font-weight:700; }
#t-header .spacer { flex:1; }
#t-header button { background:var(--t-surface); border:1px solid var(--t-border); color:var(--t-text2); border-radius:8px; padding:5px 10px; cursor:pointer; font-size:0.72rem; font-weight:600; font-family:inherit; letter-spacing:0.5px; transition:all 0.15s; }
#t-header button:hover { border-color:var(--t-gold); color:var(--t-text); background:var(--t-bg3); }

/* ── 좌측 패널 ────────────────────────────────────────── */
#t-left {
    grid-area:left;
    background:var(--t-bg2);
    display:flex;
    flex-direction:column;
    overflow-y:auto;
    padding:8px;
    gap:8px;
}
.t-section { border-bottom:1px solid var(--t-border); padding-bottom:8px; }
.t-section-title {
    font-size:10px; text-transform:uppercase; letter-spacing:1.5px; color:var(--t-text2); margin-bottom:8px;
    padding-bottom:4px; border-bottom:2px solid var(--t-gold); display:inline-block;
}

/* ── 중앙 차트 ────────────────────────────────────────── */
#t-chart-area {
    grid-area:chart;
    background:var(--t-bg);
    display:flex;
    flex-direction:column;
    overflow:hidden;
}
#t-chart-toolbar {
    display:flex;
    align-items:center;
    gap:3px;
    padding:3px 6px;
    background:var(--t-bg2);
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    font-size:10px;
    scrollbar-width:none;
}
#t-chart-toolbar::-webkit-scrollbar { display:none; }
#t-chart-toolbar button, #t-chart-toolbar select {
    background:var(--t-surface);
    border:1px solid var(--t-border);
    color:var(--t-text);
    border-radius:3px;
    padding:2px 8px;
    cursor:pointer;
    font-size:11px;
    font-family:inherit;
}
#t-chart-toolbar button:hover { border-color:var(--t-accent); }
#t-chart-toolbar button.active { background:var(--t-gold); color:#FFF; border-color:var(--t-gold); }
#t-chart-toolbar .sep { color:var(--t-border); margin:0 2px; }
#live-candle-chart { flex:1; min-height:300px; height:500px; }
#indicator-panels { background:var(--t-bg); }

/* ── 우측 패널 ────────────────────────────────────────── */
#t-right {
    grid-area:right;
    background:var(--t-bg2);
    display:flex;
    flex-direction:column;
    overflow-y:auto;
    padding:8px;
    gap:8px;
}

/* ── 하단 바 ──────────────────────────────────────────── */
#t-footer {
    grid-area:footer;
    background:var(--t-bg2);
    display:flex;
    align-items:center;
    padding:0 12px;
    gap:16px;
    font-size:11px;
    color:var(--t-text2);
}
#t-footer .stat { display:flex; gap:4px; }
#t-footer .stat b { color:var(--t-text); }

/* ── 주문 버튼 ────────────────────────────────────────── */
.t-btn-buy {
    background:var(--t-buy); color:#FFF; border:none; border-radius:8px;
    padding:12px; cursor:pointer; font-weight:700; font-size:14px; width:100%;
    letter-spacing:1px; transition:all 0.15s;
}
.t-btn-buy:hover { opacity:0.85; transform:translateY(-1px); box-shadow:0 2px 8px rgba(30,136,229,0.3); }
.t-btn-buy:active { transform:translateY(0); }
.t-btn-sell {
    background:var(--t-sell); color:#FFF; border:none; border-radius:8px;
    padding:12px; cursor:pointer; font-weight:700; font-size:14px; width:100%;
    letter-spacing:1px; transition:all 0.15s;
}
.t-btn-sell:hover { opacity:0.85; transform:translateY(-1px); box-shadow:0 2px 8px rgba(181,69,52,0.3); }
.t-btn-sell:active { transform:translateY(0); }
.t-btn-flat {
    background:var(--t-surface); color:var(--t-text); border:1px solid var(--t-border);
    border-radius:8px; padding:10px; cursor:pointer; font-weight:600; font-size:12px; width:100%;
    letter-spacing:0.5px; transition:all 0.15s;
}
.t-btn-flat:hover { border-color:var(--t-gold); color:var(--t-gold-light); }

/* ── 입력 필드 ────────────────────────────────────────── */
.t-input {
    background:var(--t-bg3); border:1px solid var(--t-border); color:var(--t-text);
    border-radius:6px; padding:6px 10px; font-size:12px; font-family:inherit; width:100%;
    transition:border-color 0.15s;
}
.t-input:focus { border-color:var(--t-gold); outline:none; }
.t-input::placeholder { color:var(--t-text2); opacity:0.7; }
.t-select {
    background:var(--t-bg3); border:1px solid var(--t-border); color:var(--t-text);
    border-radius:6px; padding:6px 8px; font-size:12px; font-family:inherit;
    transition:border-color 0.15s;
}
.t-select:focus { border-color:var(--t-gold); outline:none; }

/* ── 수량 프리셋 ──────────────────────────────────────── */
.t-qty-presets { display:flex; gap:3px; }
.t-qty-presets button {
    background:var(--t-surface); border:1px solid var(--t-border); color:var(--t-text);
    border-radius:3px; padding:3px 8px; cursor:pointer; font-size:11px; font-weight:600; min-width:28px;
}
.t-qty-presets button.active { background:var(--t-gold); color:#FFF; border-color:var(--t-gold); }

/* ── 포지션 행 ────────────────────────────────────────── */
.t-position-row {
    display:flex; justify-content:space-between; align-items:center;
    padding:6px 8px; border-radius:8px; font-size:11px;
    background:var(--t-bg3); margin-bottom:4px; border:1px solid var(--t-border);
    transition:background 0.15s;
}
.t-position-row:hover { background:var(--t-surface); }
.t-position-row .side { font-weight:700; }
.t-position-row .side.buy { color:var(--t-buy); }
.t-position-row .side.sell { color:var(--t-sell); }
.t-position-row .pnl.pos { color:var(--t-buy); }
.t-position-row .pnl.neg { color:var(--t-sell); }

/* ── 알림 ─────────────────────────────────────────────── */
.t-alert-item {
    display:flex; justify-content:space-between; align-items:center;
    padding:3px 6px; font-size:10px; border-bottom:1px solid var(--t-border);
}
.t-alert-item button { background:none; border:none; color:var(--t-text2); cursor:pointer; font-size:10px; }

/* ── 드로우다운 게이지 ────────────────────────────────── */
.t-gauge-bar {
    height:4px; background:var(--t-surface); border-radius:2px; overflow:hidden;
}
.t-gauge-fill { height:100%; border-radius:2px; transition:width 0.3s; }

/* ── 스크롤바 ─────────────────────────────────────────── */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--t-bg); }
::-webkit-scrollbar-thumb { background:var(--t-border); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--t-gold); }

/* ── 반응형 (작은 화면) ──────────────────────────────── */
@media (max-width: 900px) {
    #trader-app {
        grid-template-columns:1fr;
        grid-template-rows:36px auto 1fr auto 28px;
        grid-template-areas:
            "header"
            "right"
            "chart"
            "left"
            "footer";
    }
    #t-left, #t-right { max-height:200px; }
}