/* trading-common.css: 한국/미국 자동매매 공통 스타일 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #0a0e17; color: #e1e5ee; }
.header { background: linear-gradient(135deg, #1a1f35, #0d1117); padding: 15px 20px; border-bottom: 1px solid #2d3748; display: flex; align-items: center; gap: 15px; }
.header h1 { font-size: 18px; white-space: nowrap; min-width: 180px; }
.header .status { display: flex; gap: 15px; }
.status-badge { padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: bold; }
.status-on { background: #10b981; color: #000; }
.status-off { background: #ef4444; color: #fff; }
.container { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 20px; max-width: 1600px; margin: 0 auto; }
.card { background: #151b2b; border: 1px solid #2d3748; border-radius: 12px; padding: 20px; }
.card h2 { font-size: 16px; color: #8b95a5; margin-bottom: 15px; display: flex; align-items: center; gap: 8px; }
.card.full { grid-column: 1 / -1; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; padding: 8px 12px; color: #8b95a5; font-size: 12px; border-bottom: 1px solid #2d3748; }
td { padding: 8px 12px; font-size: 14px; border-bottom: 1px solid #1e2740; }
.profit { color: #ef4444; }
.loss { color: #3b82f6; }
.neutral { color: #8b95a5; }
.big-number { font-size: 28px; font-weight: bold; }
.sub-text { font-size: 12px; color: #8b95a5; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.metric { text-align: center; padding: 15px; background: #1a2035; border-radius: 8px; }
.metric .label { font-size: 11px; color: #8b95a5; margin-bottom: 5px; }
.metric .value { font-size: 22px; font-weight: bold; }
.alert-log { max-height: 300px; overflow-y: auto; font-family: monospace; font-size: 12px; line-height: 1.8; }
.alert-log .buy { color: #10b981; }
.alert-log .sell { color: #ef4444; }
.alert-log .info { color: #8b95a5; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; margin: 1px; }
.tag-vol { background: #1e3a5f; color: #60a5fa; }
.tag-foreign { background: #1e3f2e; color: #34d399; }
.tag-inst { background: #3f1e3a; color: #f472b6; }
.tag-rise { background: #3f3a1e; color: #fbbf24; }
.tag-cap { background: #2d2d2d; color: #a0a0a0; }
.refresh-btn { background: #3b82f6; color: #fff; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.refresh-btn:hover { background: #2563eb; }
@media (max-width: 768px) {
    .container { grid-template-columns: 1fr; }
    .grid-3 { grid-template-columns: 1fr; }
    .header {
        flex-wrap: wrap;
        padding: 10px 12px;
        gap: 8px;
    }
    .header h1 {
        min-width: auto;
        font-size: 16px;
        flex: 1;
    }
    .header .nav-bar {
        order: 10;
        width: 100%;
        flex-wrap: wrap;
        gap: 4px;
    }
    .header .nav-bar a {
        padding: 5px 10px;
        font-size: 11px;
    }
    .header .nav-bar .sep { display: none; }
}
.nav-bar { display: flex; gap: 6px; align-items: center; }
.nav-bar a { color: #8b95a5; text-decoration: none; padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: bold; background: #1a2035; transition: all 0.2s; }
.nav-bar a:hover { background: #2d3748; color: #fff; }
.nav-bar a.active { background: #3b82f6; color: #fff; }
.nav-bar .sep { color: #2d3748; line-height: 32px; }
.chart-sel { background:#1a2035;color:#fff;border:1px solid #2d3748;padding:4px 8px;border-radius:4px;font-size:12px; }
.tf-group { display:flex;gap:2px; }
.tf-btn { background:#1a2035;color:#8b95a5;border:1px solid #2d3748;padding:3px 8px;border-radius:4px;font-size:11px;cursor:pointer; }
.tf-btn:hover { background:#2d3748; }
.tf-btn.active { background:#3b82f6;color:#fff;border-color:#3b82f6; }
.ind-check { font-size:12px;color:#8b95a5;cursor:pointer;display:flex;align-items:center;gap:3px; }
.ind-check input { accent-color:#3b82f6; }
.collapse-btn { background:none;border:none;color:#8b95a5;cursor:pointer;font-size:16px;padding:0 6px;transition:transform 0.3s; }
.collapse-btn.collapsed { transform:rotate(-90deg); }
.collapsible { transition:max-height 0.3s ease,opacity 0.3s ease;overflow:hidden; }
.collapsible.collapsed { max-height:0!important;opacity:0;padding:0; }