/* ============================================================
   Signal Bot — 기존 앱 디자인 시스템 기반
   --bg-primary / --bg-card / --accent / --border 등 공유
   ============================================================ */

/* ── 페이지 기본 ── */

/* ★ Signal Bot: page-content 패딩 제거 (dashboard와 동일) */
.page-content:has(#page-signalbot.active) {
    padding: 0;
    overflow: auto;   /* ★ A: hidden→auto — 줌 시 잘림 방지, 스크롤로 접근 가능 */
}

#page-signalbot {
    padding: 0;
    overflow: hidden;
}
#page-signalbot.active {
    display: flex !important;
    flex-direction: column;
    /* page-content가 flex:1 + overflow:hidden이므로 100% 그대로 */
    height: 100%;
    min-height: 0;
}

/* ============================================================
   상단 상태바
   ============================================================ */
.sb-statusbar {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    height: 38px;
    padding: 0 20px;
    flex-shrink: 0;
    overflow: hidden;
}

.sb-stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    border-right: 1px solid var(--border);
    height: 100%;
    white-space: nowrap;
}
.sb-stat-item:first-child { padding-left: 0; }
.sb-stat-item:last-child  { border-right: none; }

.sb-stat-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
}
.sb-stat-val {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
}
.sb-stat-val.live   { color: var(--green); }
.sb-stat-val.accent { color: var(--accent); }
.sb-stat-val.orange { color: var(--orange); }
.sb-stat-val.red    { color: var(--red); }

.sb-live-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--text-muted);
    flex-shrink: 0;
}
.sb-live-dot.on  { background: var(--green); box-shadow: 0 0 6px var(--green); animation: sb-blink 2s infinite; }
.sb-live-dot.off { background: var(--text-muted); }

@keyframes sb-blink { 0%,100%{opacity:1} 50%{opacity:0.3} }
@keyframes sb-spin  { to{transform:rotate(360deg)} }

.sb-stat-spacer { flex: 1; }
.sb-clock {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 1px;
    font-family: 'Consolas', monospace;
}

/* ============================================================
   VIP/일반 사용자용 'DB불러오기' 바 — 조건식 검색 패널 대체
   (관리자가 아닌 사용자에게만 표시. 일회성 DB 로드 버튼 1개)
   ============================================================ */
.sbot-member-loadbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    flex-wrap: wrap;
}
.sbot-member-loadbar-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.sbot-member-loadbar-title i { color: var(--accent); }
.sbot-member-loadbar-desc {
    font-size: 11px;
    color: var(--text-muted);
}
.sbot-member-loaddb-btn {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: 1px solid #6366f1;
    background: rgba(99,102,241,0.10);
    color: #818cf8;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.sbot-member-loaddb-btn:hover {
    background: rgba(99,102,241,0.20);
    border-color: #818cf8;
    color: #a5b4fc;
}
.sbot-member-loaddb-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.sbot-member-loaddb-btn i { font-size: 11px; }

/* ============================================================
   조건식 패널 — AI추천종목과 완전 동일 구조 사용
   (sp-cond-panel, sp-cond-grid, sf-wrap 등 기존 클래스 재사용)
   Signal Bot 전용 ID만 다름: sbot- prefix
   ============================================================ */
.sbot-cond-panel {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.sbot-cond-titlebar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    cursor: pointer;
    user-select: none;
}
.sbot-cond-titlebar .sbot-cond-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.sbot-cond-titlebar .sbot-cond-title i { color: var(--accent); }

.sbot-cond-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 조건식 버튼들 — 기존 at-cond 스타일 그대로 사용 */
.sbot-selall-btn,
.sbot-desel-btn,
.sbot-reload-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: 11px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.sbot-selall-btn:hover { border-color: var(--accent); color: var(--accent); }
.sbot-desel-btn:hover  { border-color: var(--red);    color: var(--red); }
.sbot-reload-btn:hover { border-color: var(--green);  color: var(--green); }

/* DB에서 불러오기 버튼 — 인디고 계열 (DB 저장 데이터 강조) */
.sbot-reload-db-btn {
    border-color: #6366f1 !important;
    color: #6366f1 !important;
}
.sbot-reload-db-btn:hover {
    background: rgba(99,102,241,0.08) !important;
    border-color: #818cf8 !important;
    color: #818cf8 !important;
}
.sbot-reload-db-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ★ v104: 직접 불러오기 버튼 — teal 계열 (NAS/CF 우회 강조) */
.sbot-reload-direct-btn {
    border-color: #0d9488 !important;
    color: #0d9488 !important;
}
.sbot-reload-direct-btn:hover {
    background: rgba(13,148,136,0.08) !important;
    border-color: #14b8a6 !important;
    color: #14b8a6 !important;
}
.sbot-reload-direct-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.sbot-collapse-btn {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
    font-size: 11px;
}
.sbot-collapse-btn:hover { color: var(--text-primary); border-color: var(--border-light); }

.sbot-cond-collapsible { }
.sbot-cond-collapsible.hidden { display: none; }

/* 조건식 그리드 — AI추천종목과 동일하게 sp-cond-grid 재사용 */
#sbot-cond-list {
    padding: 10px 16px 4px;
}

/* ============================================================
   컨트롤 바 (Signal Bot 전용 필터)
   ============================================================ */
.sb-ctrl-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.sb-ctrl-sep {
    width: 1px;
    height: 24px;
    background: var(--border);
    flex-shrink: 0;
}

.sb-ctrl-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sb-ctrl-label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
}

/* 토글 버튼 */
.sb-toggle-btn {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--border-light);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.sb-toggle-btn:hover {
    border-color: var(--accent);
    color: var(--text-primary);
    background: var(--bg-card-hover);
}
.sb-toggle-btn.active {
    background: rgba(59,130,246,0.15);
    border-color: var(--accent);
    color: var(--accent);
}
.sb-toggle-btn.active.red {
    background: rgba(239,68,68,0.12);
    border-color: var(--red);
    color: var(--red);
}
.sb-toggle-btn.active.green {
    background: rgba(16,185,129,0.12);
    border-color: var(--green);
    color: var(--green);
}
.sb-toggle-btn.active.orange {
    background: rgba(245,158,11,0.12);
    border-color: var(--orange);
    color: var(--orange);
}

/* 점수 필터 라디오 */
.sb-score-filter {
    display: flex;
    align-items: center;
    gap: 4px;
}
.sb-score-radio {
    display: none;
}
.sb-score-radio-label {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--border-light);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.sb-score-radio-label:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}
.sb-score-radio:checked + .sb-score-radio-label {
    background: rgba(59,130,246,0.15);
    border-color: var(--accent);
    color: var(--accent);
}

.sb-ctrl-spacer { flex: 1; }

/* 카운터 */
.sb-counter {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 11px;
}
.sb-counter .c-label { color: var(--text-muted); }
.sb-counter .c-val   { color: var(--accent); font-weight: 700; font-size: 12px; }
.sb-counter .c-sep   { color: var(--border-light); }

/* 실행 버튼 */
.sb-run-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 18px;
    font-size: 12px;
    font-weight: 700;
    background: var(--accent);
    border: none;
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.sb-run-btn:hover { background: var(--accent-dark); box-shadow: 0 0 12px var(--accent-glow); }
.sb-run-btn.running {
    background: rgba(16,185,129,0.15);
    border: 1px solid var(--green);
    color: var(--green);
}
.sb-run-btn.running i { animation: sb-spin 1s linear infinite; }

/* ★ v111: DB START 버튼 — 인디고 계열 (DB/인메모리 캐시 candidates 주입) */
.sb-db-start-btn {
    background: #4f46e5 !important;   /* indigo-600 */
    font-size: 11px;
    padding: 6px 12px;
}
.sb-db-start-btn:hover {
    background: #4338ca !important;   /* indigo-700 */
    box-shadow: 0 0 10px rgba(99,102,241,0.55) !important;
}
.sb-db-start-btn.running {
    background: rgba(99,102,241,0.15) !important;
    border: 1px solid #6366f1 !important;
    color: #6366f1 !important;
}
.sb-db-start-btn.running i { animation: sb-spin 1s linear infinite; }
.sb-db-start-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ★ v105: 키움직접 버튼 — 에메랄드/청록 계열 (NAS/CF 우회, 직접 연결 강조) */
.sb-kiwoom-btn {
    background: #0d9488 !important;   /* teal-600 */
    font-size: 11px;
    padding: 6px 12px;
}
.sb-kiwoom-btn:hover {
    background: #0f766e !important;   /* teal-700 */
    box-shadow: 0 0 10px rgba(20,184,166,0.55) !important;
}
.sb-kiwoom-btn.running {
    background: rgba(20,184,166,0.15) !important;
    border: 1px solid #14b8a6 !important;
    color: #14b8a6 !important;
}
.sb-kiwoom-btn.running i { animation: sb-spin 1s linear infinite; }

/* START 버튼 그룹 — 3개 버튼을 하나의 박스로 묶어 시각적 완성도 향상 */
.sb-run-group {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-light);
    border-radius: 9px;
    overflow: hidden;
    flex-shrink: 0;
}
.sb-run-group .sb-run-btn {
    border-radius: 0;
    border: none;
    margin: 0;
}
.sb-run-group .sb-run-btn:first-child { border-radius: 8px 0 0 8px; }
.sb-run-group .sb-run-btn:last-child  { border-radius: 0 8px 8px 0; }

/* 버튼 사이 세로 구분선 */
.sb-run-sep {
    width: 1px;
    height: 100%;
    align-self: stretch;
    background: rgba(255,255,255,0.12);
    flex-shrink: 0;
}

/* ★ v3.15: 토큰 주입 버튼 — 보라 계열 (8050 근본 해결) */
.sb-inject-btn { background: #7c3aed !important; font-size: 11px; padding: 6px 12px; }
.sb-inject-btn:hover { background: #6d28d9 !important; box-shadow: 0 0 10px rgba(124,58,237,0.5) !important; }
.sb-inject-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ============================================================
   메인 레이아웃
   ============================================================ */
.sb-main {
    display: grid;
    grid-template-columns: 1fr 360px;
    flex: 1;          /* 남은 세로 공간 전부 차지 */
    min-height: 0;    /* ★ flex 자식이 shrink 되도록 (필수) */
    overflow: hidden;
    /* ★ B: 좁은 뷰포트에서 그리드 컬럼 붕괴 방지 */
    min-width: 0;
}

/* ============================================================
   카드 영역
   ============================================================ */
.sb-card-area {
    overflow-y: auto;
    overflow-x: auto;   /* ← hidden→auto: 카드가 넓을 때 가로 스크롤 허용 */
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--bg-primary);
    align-items: stretch;
    /* ★ flex 자식이 남은 공간 채우고 스크롤 가능하도록 */
    flex: 1;
    min-height: 0;
}
.sb-card-area::-webkit-scrollbar { width: 4px; }
.sb-card-area::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 2px; }
.sb-card-area::-webkit-scrollbar-track { background: transparent; }

/* ══════════════════════════════════════════════════════════════
   Signal Bot 종목카드
   [등급바] | [①캔들그래프] | [②종목명] | [③가격] | [④매수신호] | [⑤호가잔량] | [⑥봉통계] | [⑦OB잔량]
   ══════════════════════════════════════════════════════════════ */

/* ── 카드 컨테이너 ── */
.sbc {
    display: flex;
    align-items: stretch;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    cursor: pointer;
    transition: box-shadow 0.15s, border-color 0.15s;
    /* 컬럼 합계 고정: 5+180+180+120+100+180+210+130 ≒ 1105px + padding/border ≒ 1268px
       sbc-col-ob(flex-grow:1)가 나머지 공간을 모두 흡수
       → 카드는 영역 너비를 그대로 채우고, ob가 stretch됨 */
    min-width: 1100px;
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
    overflow: hidden;
    min-height: 120px;
    height: 120px;       /* ★ 120px 고정 */
}
.sbc:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.35);
    border-color: rgba(255,255,255,0.13);
}
/* 등급별 배경 미세 강조 */
.sbc.grade-s { border-color: rgba(255,61,90,0.22); }
.sbc.grade-a { border-color: rgba(245,158,11,0.18); }
.sbc.grade-b { border-color: rgba(16,185,129,0.15); }

/* ── 등급 컬러바 ── */
.sbc-bar { width: 5px; flex-shrink: 0; }
.sbc.grade-s .sbc-bar { background: #ff3d5a; }
.sbc.grade-a .sbc-bar { background: var(--orange); }
.sbc.grade-b .sbc-bar { background: var(--green); }
.sbc.grade-c .sbc-bar { background: var(--accent); }

/* ── 컬럼 공통 ── */
.sbc-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px 12px;          /* 원복: 10→12px */
    border-right: 1px solid rgba(255,255,255,0.05);
    gap: 5px;
    flex-shrink: 0;
    overflow: hidden;
    min-width: 0;
}
.sbc-col:last-child { border-right: none; }

/* ══ ① 캔들그래프 컬럼 ══ */
.sbc-col-chart {
    width: 180px;               /* 원복: 160→180px */
    min-width: 160px;
    flex-shrink: 1;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-self: stretch !important;
    position: relative;  /* ★ 순위뱃지 absolute 기준점 */
    padding: 4px 6px 0 6px;
    gap: 0;
    background: var(--bg-secondary);
    overflow: hidden;
}
.sbc-col-chart .sb-spark-canvas {
    display: block;
    flex: 1;
    min-height: 80px;    /* 120px - chart-foot(16px) - padding(4px) = 100px 여유 */
    width: 100%;
    box-sizing: border-box;
}

/* ── 캔들그래프 좌상단 순위뱃지 (position:absolute) ── */
.sbc-rank-overlay {
    position: absolute;
    top: 5px;
    left: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Consolas', monospace;
    line-height: 1;
    z-index: 2;
    background: rgba(30,41,59,0.82);
    color: #94a3b8;
    border: 1px solid rgba(148,163,184,0.25);
    backdrop-filter: blur(2px);
    pointer-events: none;
}
.sbc-rank-overlay.top3 {
    background: linear-gradient(135deg, rgba(245,158,11,0.9), rgba(217,119,6,0.9));
    color: #fff;
    border-color: rgba(245,158,11,0.6);
    box-shadow: 0 1px 6px rgba(245,158,11,0.4);
}
.sbc-chart-foot {
    flex-shrink: 0;
    height: 16px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding-bottom: 3px;
}
.sbc-tf {
    font-size: 9px;
    color: rgba(148,163,184,0.5);
    font-family: 'Consolas', monospace;
    font-weight: 600;
}
.sb-candle-timer {
    font-size: 9px;
    font-family: 'Consolas', monospace;
    font-weight: 600;
    color: var(--text-secondary);
    background: rgba(15,23,42,0.7);
    padding: 1px 5px;
    border-radius: 3px;
}
.sb-candle-timer.urgent { color: var(--orange); animation: sb-blink 0.6s infinite; }

/* ══ ② 종목명 컬럼 ══ */
.sbc-col-name {
    width: 180px;               /* 원복: 160→180px */
    min-width: 160px;
    gap: 3px;
}
.sbc-name-row {
    display: flex;
    align-items: baseline;
    gap: 5px;
    flex-wrap: nowrap;
    min-width: 0;
}
.sbc-rank {
    width: 22px; height: 22px;
    border-radius: 50%;
    font-size: 11px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    background: rgba(99,102,241,0.15);
    color: #818cf8;
    font-family: 'Consolas', monospace;
    line-height: 1;
}
.sbc-rank.top3 { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; }
.sbc-name {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    min-width: 0;
    flex-shrink: 1;
}
.sbc:hover .sbc-name { color: #a5b4fc; }
.sbc-code-row {
    display: flex;
    align-items: center;
    gap: 5px;
}
.sbc-code {
    font-size: 9px;
    font-weight: 500;
    color: rgba(255,255,255,0.28);
    font-family: 'Consolas', monospace;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    line-height: 1.2;
}
.sbc-name-row .sbc-delta-sep {
    font-size: 9px;
    color: rgba(255,255,255,0.18);
    flex-shrink: 0;
    line-height: 1.2;
    margin: 0 1px;
}
.sbc-badge-row {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-wrap: wrap;
}
.sbc-tag-wrap { display: contents; } /* 태그를 그대로 펼쳐서 배지행에 포함 */
/* .sbc-time 미사용 (v66 삭제) */
.sbc-time { display: none; }

/* ══ ③ 가격 컬럼 ══ */
.sbc-col-price {
    width: 120px;
    min-width: 110px;
    align-items: flex-start;
    gap: 3px;
}
.sbc-price {
    font-size: 17px;
    font-weight: 800;
    color: var(--text-primary);
    font-family: 'Consolas', monospace;
    line-height: 1.1;
    letter-spacing: -0.02em;
    white-space: nowrap;
}
.sbc-chg {
    font-size: 13px;
    font-weight: 700;
    font-family: 'Consolas', monospace;
    white-space: nowrap;
}
.sbc-chg.pos { color: #f87171; }
.sbc-chg.neg { color: #60a5fa; }
.sbc-chg.neu { color: var(--text-muted); }

/* ══ ④ 매수신호 컬럼 ══ */
.sbc-col-signal {
    width: 100px;
    min-width: 90px;
    align-items: center;
    text-align: center;
    gap: 1px;
}
.sbc.grade-s .sbc-col-signal { background: rgba(255,61,90,0.07); }
.sbc.grade-a .sbc-col-signal { background: rgba(245,158,11,0.07); }
.sbc.grade-b .sbc-col-signal { background: rgba(16,185,129,0.07); }
.sbc.grade-c .sbc-col-signal { background: rgba(59,130,246,0.07); }

.sbc-grade-letter {
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -1px;
}
.sbc.grade-s .sbc-grade-letter { color: #ff3d5a; }
.sbc.grade-a .sbc-grade-letter { color: var(--orange); }
.sbc.grade-b .sbc-grade-letter { color: var(--green); }
.sbc.grade-c .sbc-grade-letter { color: var(--accent); }

.sbc-score-num {
    font-size: 15px;
    font-weight: 800;
    font-family: 'Consolas', monospace;
    color: var(--text-primary);
    line-height: 1;
}
.sbc-score-denom {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 500;
    margin-left: 1px;
}
.sbc-score-lbl {
    font-size: 9px;
    color: var(--text-muted);
    font-weight: 600;
}

/* ══ ⑤ 호가잔량 컬럼 ══ */
.sbc-col-hoga {
    width: 180px;               /* 원복: 170→180px */
    min-width: 160px;
    gap: 4px;
}
.sbc-hoga-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sbc-hoga-title {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 600;
}
.sbc-hoga-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
}
.sbc-hoga-badge.strong-buy { background: rgba(239,68,68,0.12); color: #f87171; border: 1px solid rgba(239,68,68,0.25); }
.sbc-hoga-badge.buy        { background: rgba(245,158,11,0.12); color: var(--orange); border: 1px solid rgba(245,158,11,0.25); }
.sbc-hoga-badge.neutral    { background: rgba(100,116,139,0.1); color: var(--text-muted); border: 1px solid var(--border); }
.sbc-hoga-badge.sell       { background: rgba(59,130,246,0.12); color: #60a5fa; border: 1px solid rgba(59,130,246,0.25); }

.sbc-hoga-bar {
    display: flex;
    height: 14px;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.sbc-hoga-buy  { background: linear-gradient(90deg, #9b1c1c, #ef4444); transition: width 0.5s; min-width: 3px; }
.sbc-hoga-sell { background: linear-gradient(90deg, #1e3a8a, #3b82f6); transition: width 0.5s; min-width: 3px; }

.sbc-hoga-pct {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    font-family: 'Consolas', monospace;
    font-weight: 700;
}
.sbc-hoga-buy-pct { color: var(--text-muted); }
.sbc-hoga-buy-pct.strong-buy { color: #f87171; }
.sbc-hoga-buy-pct.buy        { color: var(--orange); }
.sbc-hoga-buy-pct.neutral    { color: var(--text-muted); }
.sbc-hoga-buy-pct.sell       { color: #60a5fa; }
.sbc-hoga-sell-pct { color: var(--text-muted); }

/* ══ ⑥ 봉통계 컬럼 — 10칸 비율 도트 ══ */
.sbc-col-candle {
    width: 210px;               /* 원복: 190→210px */
    min-width: 200px;
    flex-shrink: 0;
    gap: 3px;
}

/* 헤더 */
.sbc-bb-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1px;
}
.sbc-total-lbl {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
}
.sbc-bb-ratio-total {
    font-size: 9px;
    color: var(--text-muted);
    font-family: 'Consolas', monospace;
}

/* 도트 컨테이너 */
.sbc-dot-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* 1행: 레이블 + 도트열 + 숫자 */
.sbc-dot-row {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 18px;
}

/* 레이블 */
.sbc-dot-lbl {
    font-size: 9px;
    font-weight: 700;
    flex-shrink: 0;
    width: 24px;
    text-align: right;
}
.sbc-dot-lbl.bull { color: #f87171; }
.sbc-dot-lbl.bear { color: #60a5fa; }

/* 도트 10칸 문자열 */
.sbc-dot {
    flex: 1;
    font-size: 14px;
    letter-spacing: 3px;
    line-height: 1;
    font-family: 'Consolas', monospace;
    white-space: nowrap;      /* 도트열 줄바꿈 금지 */
    overflow: hidden;
}
/* ● 채움, ○ 빈칸 — 같은 색, 빈칸은 투명도로 구분 */
.sbc-dot.bull { color: #f87171; text-shadow: 0 0 5px rgba(239,68,68,0.55); }
.sbc-dot.bear { color: #60a5fa; text-shadow: 0 0 5px rgba(59,130,246,0.50); }

/* 플레이스홀더 — 로딩 전 빈 원 펄스 */
.sbc-dot.placeholder      { color: #334155; letter-spacing: 3px; font-size: 14px; font-family: 'Consolas', monospace; }
.sbc-dot-num.placeholder  { color: #475569; }
@keyframes dot-pulse {
    0%, 100% { opacity: 0.30; }
    50%       { opacity: 0.70; }
}
.sbc-dot-wrap .sbc-dot.placeholder,
.sbc-dot-wrap .sbc-dot-num.placeholder {
    animation: dot-pulse 1.8s ease-in-out infinite;
}

/* 우측 개수 숫자 */
.sbc-dot-num {
    font-size: 11px;
    font-weight: 800;
    font-family: 'Consolas', monospace;
    flex-shrink: 0;
    width: 20px;
    text-align: right;
    line-height: 1;
}
.sbc-dot-num.bull { color: #f87171; }
.sbc-dot-num.bear { color: #60a5fa; }

/* ── 연속봉 배지 행: 1줄 가로 (절대 줄바꿈 금지) ── */
.sbc-streak-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;        /* ★ 절대 줄바꿈 금지 — 1줄 강제 */
    gap: 4px;
    margin-top: 1px;
    min-height: 18px;
    align-items: center;
    overflow: hidden;         /* 혹시 넘치면 숨김 처리 */
}
.sbc-streak-none { font-size: 9px; color: var(--text-muted); }

/* 연속봉 배지 공통 */
.sb-streak {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    white-space: nowrap;      /* 배지 내부 줄바꿈 금지 */
    flex-shrink: 0;           /* 배지 자체 축소 금지 */
    transition: opacity 0.2s;
}

/* 현재 진행 중 — active: 선명하게 */
.sb-streak.bull.active {
    background: rgba(239,68,68,0.20);
    color: #f87171;
    border: 1px solid rgba(239,68,68,0.55);
}
.sb-streak.bear.active {
    background: rgba(59,130,246,0.20);
    color: #7eb8ff;
    border: 1px solid rgba(59,130,246,0.55);
}

/* 과거 완료 — past: 흐릿하지만 읽힐 정도 */
.sb-streak.bull.past {
    background: rgba(239,68,68,0.08);
    color: #f87171bb;
    border: 1px solid rgba(239,68,68,0.30);
    opacity: 0.75;
}
.sb-streak.bear.past {
    background: rgba(59,130,246,0.10);
    color: #93c5fd;           /* ← 더 밝고 진하게 */
    border: 1px solid rgba(59,130,246,0.35);
    opacity: 0.80;
}

/* 하위 호환 */
.sb-streak.bull:not(.active):not(.past) {
    background: rgba(239,68,68,0.14);
    color: #f87171;
    border: 1px solid rgba(239,68,68,0.35);
}
.sb-streak.bear:not(.active):not(.past) {
    background: rgba(59,130,246,0.14);
    color: #7eb8ff;
    border: 1px solid rgba(59,130,246,0.35);
}

/* ══ ⑧ 조건검색 배지 컬럼 (신규) ══ */
.sbc-col-cond {
    width: 130px;
    min-width: 110px;
    flex-shrink: 0;
    gap: 4px;
    padding: 8px 10px;
    justify-content: flex-start;
    align-items: flex-start;
}

/* ★ v116: 조건검색 컬럼은 관리자 전용 보안정보
   회원(member)·VIP·게스트(guest) 역할에서는 컬럼 전체를 숨김.
   JS(_canSeeCondNames)에서 DOM 주입도 차단하므로 이중 방어. */
body.hai-role-member .sbc-col-cond,
body.hai-role-vip    .sbc-col-cond,
body.hai-role-guest  .sbc-col-cond {
    display: none !important;
}
.sbc-cond-label {
    font-size: 9px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.03em;
    white-space: nowrap;
    margin-bottom: 1px;
}
.sbc-cond-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    overflow: hidden;
}
/* 조건검색 배지 — 1줄씩, 넘치면 말줄임 */
.sbc-cond-badge {
    display: block;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    box-sizing: border-box;
    background: rgba(99,102,241,0.10);
    color: #a5b4fc;
    border: 1px solid rgba(99,102,241,0.22);
    line-height: 1.5;
}
/* 2개 이상 조건 충족 — 강조 (주황) */
.sbc-cond-badge.multi {
    background: rgba(245,158,11,0.12);
    color: var(--orange);
    border-color: rgba(245,158,11,0.30);
}
/* 조건이 많을 때 +N 더보기 텍스트 */
.sbc-cond-more {
    font-size: 9px;
    color: var(--text-muted);
    padding: 1px 4px;
}

/* ══ ⑧ 점수분석(OB잔량) 컬럼 ══ */
.sbc-col-ob {
    flex: 1 1 0;         /* ★ grow:1, basis:0 → 다른 컬럼 고정 후 남는 공간 전부 흡수 */
    min-width: 120px;    /* 너무 좊아지는 것 방지 */
    overflow: visible;   /* 가로 여백 흡수 시 overflow 무효화 */
    gap: 4px;
}
.sbc-ob-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
}
.sbc-g-row {
    display: grid;
    grid-template-columns: 30px 1fr 28px;  /* 레이블 30px(거래량 3글자 여유), 값 28px */
    align-items: center;
    gap: 5px;
}
.sbc-g-lbl {
    font-size: 9px;
    color: var(--text-muted);
    font-weight: 700;
}
.sbc-g-bar {
    height: 6px;
    background: var(--bg-primary);
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.04);
}
.sbc-g-fill { height: 100%; border-radius: 3px; transition: width 0.5s; }
.sbc-g-fill.lv4 { background: linear-gradient(90deg, #9b1c1c, #ff3d5a); }
.sbc-g-fill.lv3 { background: linear-gradient(90deg, #92400e, #f59e0b); }
.sbc-g-fill.lv2 { background: linear-gradient(90deg, #064e3b, #10b981); }
.sbc-g-fill.lv1 { background: linear-gradient(90deg, #1e3a5f, #3b82f6); }
.sbc-g-fill.lv0 { background: var(--border); }
.sbc-g-val {
    font-size: 9px;
    font-weight: 800;
    text-align: right;
    font-family: 'Consolas', monospace;
    white-space: nowrap;
}
.sbc-g-val.lv4 { color: #ff3d5a; }
.sbc-g-val.lv3 { color: var(--orange); }
.sbc-g-val.lv2 { color: var(--green); }
.sbc-g-val.lv1 { color: var(--accent); }
.sbc-g-val.lv0 { color: var(--text-muted); }

/* ── 레거시 숨김 ── */
.sb-card { display: none; }
.sb-card-r2, .sb-spark-full, .sb-spark-wrap,
.sb-card-r3-stats, .sb-card-r4, .sb-card-r5 { display: none; }

/* ── 5단계: 봉 확정 flash 애니메이션 ── */
@keyframes candle-confirm-flash {
    0%   { box-shadow: 0 0 0 0 rgba(250,204,21,0.0);  border-color: rgba(250,204,21,0.0); }
    20%  { box-shadow: 0 0 0 6px rgba(250,204,21,0.5); border-color: rgba(250,204,21,0.8); }
    60%  { box-shadow: 0 0 0 3px rgba(250,204,21,0.2); border-color: rgba(250,204,21,0.4); }
    100% { box-shadow: 0 0 0 0 rgba(250,204,21,0.0);  border-color: transparent; }
}
.candle-confirmed-flash {
    animation: candle-confirm-flash 0.8s ease-out forwards !important;
}

/* ── 5단계: 실시간 마지막 봉 pulse 도트 ── */
@keyframes live-candle-pulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50%     { opacity: 0.4; transform: scale(1.4); }
}
.live-candle-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #ef4444;
    display: inline-block;
    animation: live-candle-pulse 1s ease-in-out infinite;
    margin-right: 4px;
    vertical-align: middle;
}

/* ── 시그널 태그 (공통) ── */
.sb-tag {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}
.sb-tag.ob           { background: rgba(59,130,246,0.12);  color: var(--accent);  border: 1px solid rgba(59,130,246,0.25); }
.sb-tag.vol          { background: rgba(16,185,129,0.12);  color: var(--green);   border: 1px solid rgba(16,185,129,0.25); }
.sb-tag.cdl          { background: rgba(245,158,11,0.12);  color: var(--orange);  border: 1px solid rgba(245,158,11,0.25); }
.sb-tag.brk          { background: rgba(255,61,90,0.12);   color: #ff3d5a;        border: 1px solid rgba(255,61,90,0.25); }
.sb-tag.hi           { background: rgba(139,92,246,0.12);  color: var(--purple);  border: 1px solid rgba(139,92,246,0.25); }
/* BOW 전용 태그 */
.sb-tag.bow-buy        { background: rgba(255,61,90,0.18);   color: #ff3d5a;       border: 1px solid rgba(255,61,90,0.4);    font-weight: 800; }
.sb-tag.bow-approach   { background: rgba(100,116,139,0.12); color: #94a3b8;       border: 1px solid rgba(100,116,139,0.25); font-style: italic; } /* 예측불가: 흐림 */
.sb-tag.bow-sell       { background: rgba(100,116,139,0.15); color: #94a3b8;       border: 1px solid rgba(100,116,139,0.3); }
/* 🚀매수임박 — approach 확인 (A≥95), 강한 주황+펄스 */
.sb-tag.bow-expect-hi  {
    background: rgba(245,158,11,0.2);
    color: #f59e0b;
    border: 1px solid rgba(245,158,11,0.55);
    font-weight: 800;
    animation: bow-expect-pulse 1.6s ease-in-out infinite;
}
/* 📈매수예상 — neutral이지만 A 85~94, 진입 준비 */
.sb-tag.bow-expect     {
    background: rgba(16,185,129,0.12);
    color: #34d399;
    border: 1px solid rgba(16,185,129,0.3);
    font-weight: 700;
}
@keyframes bow-expect-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0);    }
    50%       { box-shadow: 0 0 7px 2px rgba(245,158,11,0.4); }
}
/* RSI 초과(>60) 배지 — 흐림 처리로 주의 표시 */
.sb-tag.rsi-over { opacity: 0.45; filter: grayscale(40%); }
/* RSI 배지 — 침체(≤30) / 중립(31~59) / 과열(≥60) */
.sb-tag.rsi-low      { background: rgba(16,185,129,0.15);  color: #10b981;        border: 1px solid rgba(16,185,129,0.35); font-weight: 800; } /* 침체: 초록 강조 */
.sb-tag.rsi-mid      { background: rgba(148,163,184,0.12); color: #94a3b8;        border: 1px solid rgba(148,163,184,0.25); }                   /* 중립: 회색 */
.sb-tag.rsi-high     { background: rgba(255,61,90,0.12);   color: #ff3d5a;        border: 1px solid rgba(255,61,90,0.3);   font-weight: 800; } /* 과열: 빨강 경고 */

/* 신호일 배지 — BOW+ 마지막 매수신호 경과일 */
.sb-sig-day {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 9.5px;
    font-weight: 700;
    border-radius: 4px;
    padding: 1px 6px;
    white-space: nowrap;
    letter-spacing: -0.2px;
}
.sb-sig-day.sig-today  { background: rgba(255, 61, 90, 0.15);  color: #ff3d5a;  border: 1px solid rgba(255,61,90,0.4);    } /* 오늘: 빨강 강조 */
.sb-sig-day.sig-recent { background: rgba(245,158,11, 0.15);  color: #f59e0b;  border: 1px solid rgba(245,158,11,0.35);  } /* 1~7일: 주황 */
.sb-sig-day.sig-old    { background: rgba(148,163,184,0.12);  color: #94a3b8;  border: 1px solid rgba(148,163,184,0.25); } /* 8~30일: 회색 */
.sb-sig-day.sig-far    { background: rgba(100,116,139,0.08);  color: #64748b;  border: 1px solid rgba(100,116,139,0.2);  } /* 30일+: 흐림 */
.sb-sig-day.sig-none   { background: rgba(100,116,139,0.06);  color: #475569;  border: 1px solid rgba(100,116,139,0.15); opacity: 0.6; } /* 신호없음: 매우 흐림 */

/* 장외 전용: BOW+ 횟수·날짜 메타 */
.sbc-bow-meta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    color: #fbbf24;
    background: rgba(251,191,36,0.08);
    border: 1px solid rgba(251,191,36,0.2);
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: 2px;
    vertical-align: middle;
    white-space: nowrap;
}
.sbc-bow-meta em {
    font-style: normal;
    color: #e2e8f0;
    font-weight: 600;
}

/* ── 정렬 바 (장외 전용) ── */
/* 카드 컬럼 wrapper — sb-main grid의 1열 자식 (정렬바 + 카드영역 세로 적층) */
.sb-card-col {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    position: relative;   /* ★ v44.1: 위로가기 버튼 absolute 위치 기준 */
}

.sb-sort-bar {
    display: none;               /* 기본 숨김 — JS에서 장외 시 표시 */
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    background: rgba(251,191,36,0.06);
    border-bottom: 1px solid rgba(251,191,36,0.15);
    flex-shrink: 0;
}
.sb-sort-bar.visible { display: flex; }
.sb-sort-label {
    font-size: 10px;
    color: #64748b;
    flex-shrink: 0;
}

/* ★ v65.2: 정렬 버튼과 페이지네이션 사이 구분선 (flex spacer) */
.sb-pg-sep {
    flex: 1;               /* 남은 공간 모두 차지 → 페이지네이션을 우측으로 밀어냄 */
    min-width: 8px;
    max-width: 32px;       /* 너무 벌어지지 않게 */
    border-left: 1px solid rgba(251,191,36,0.18);
    margin-left: 4px;
    align-self: stretch;
}

/* ★ v65.2: 페이지네이션 인라인 컨테이너 — sb-sort-bar 내 우측 */
.sb-pg-inline {
    display: none;         /* JS에서 페이지 >1 이면 flex */
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}
.sb-sort-btn {
    font-size: 10px;
    padding: 3px 9px;
    border-radius: 5px;
    border: 1px solid rgba(100,116,139,0.3);
    background: rgba(30,41,59,0.6);
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.sb-sort-btn:hover { border-color: rgba(251,191,36,0.4); color: #fbbf24; }
.sb-sort-btn.active {
    background: rgba(251,191,36,0.12);
    border-color: rgba(251,191,36,0.45);
    color: #fbbf24;
    font-weight: 600;
}

/* ── BOW 등급 필터 버튼 (예상·임박·매수) ────────────────────────────── */
.sb-bow-grade-btn {
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 5px;
    border: 1px solid rgba(99,102,241,0.3);
    background: rgba(30,41,59,0.5);
    color: #818cf8;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.sb-bow-grade-btn:hover {
    border-color: rgba(99,102,241,0.55);
    color: #a5b4fc;
    background: rgba(99,102,241,0.08);
}
.sb-bow-grade-btn.active {
    background: rgba(99,102,241,0.18);
    border-color: rgba(99,102,241,0.6);
    color: #c7d2fe;
    font-weight: 700;
}
/* 🎯 매수 버튼 — 초록 계열 (grade 2: BOW매수) */
.sb-bow-grade-btn--buy {
    border-color: rgba(34,197,94,0.35);
    color: #4ade80;
}
.sb-bow-grade-btn--buy:hover {
    border-color: rgba(34,197,94,0.6);
    color: #86efac;
    background: rgba(34,197,94,0.08);
}
.sb-bow-grade-btn--buy.active {
    background: rgba(34,197,94,0.15);
    border-color: rgba(34,197,94,0.65);
    color: #bbf7d0;
    font-weight: 700;
}
/* 🚀 임박 버튼 — 노랑/주황 계열 (grade 1: 매수임박) */
.sb-bow-grade-btn--near {
    border-color: rgba(251,191,36,0.35);
    color: #fbbf24;
}
.sb-bow-grade-btn--near:hover {
    border-color: rgba(251,191,36,0.6);
    color: #fcd34d;
    background: rgba(251,191,36,0.08);
}
.sb-bow-grade-btn--near.active {
    background: rgba(251,191,36,0.13);
    border-color: rgba(251,191,36,0.65);
    color: #fde68a;
    font-weight: 700;
}
/* 📈 예상 버튼 — 인디고(기본) 계열 (grade 0: 매수예상) */
.sb-bow-grade-btn--exp {
    border-color: rgba(99,102,241,0.35);
    color: #818cf8;
}
.sb-bow-grade-btn--exp:hover {
    border-color: rgba(99,102,241,0.6);
    color: #a5b4fc;
    background: rgba(99,102,241,0.08);
}
.sb-bow-grade-btn--exp.active {
    background: rgba(99,102,241,0.18);
    border-color: rgba(99,102,241,0.65);
    color: #c7d2fe;
    font-weight: 700;
}
/* 👀 관망 버튼 — 회색 계열 (grade 3: 관망) */
.sb-bow-grade-btn--etc {
    border-color: rgba(100,116,139,0.3);
    color: #64748b;
}
.sb-bow-grade-btn--etc:hover {
    border-color: rgba(100,116,139,0.55);
    color: #94a3b8;
    background: rgba(100,116,139,0.08);
}
.sb-bow-grade-btn--etc.active {
    background: rgba(100,116,139,0.18);
    border-color: rgba(100,116,139,0.6);
    color: #cbd5e1;
    font-weight: 700;
}
/* ⚠ 매도 버튼 — 빨강 계열 (grade 4: 매도) */
.sb-bow-grade-btn--sell {
    border-color: rgba(239,68,68,0.3);
    color: #f87171;
}
.sb-bow-grade-btn--sell:hover {
    border-color: rgba(239,68,68,0.55);
    color: #fca5a5;
    background: rgba(239,68,68,0.08);
}
.sb-bow-grade-btn--sell.active {
    background: rgba(239,68,68,0.15);
    border-color: rgba(239,68,68,0.6);
    color: #fca5a5;
    font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════
   ★ v44 ⑥ → v65.2 폐기: 구 페이지 바 (#sb-page-bar)
   v65.2부터 sb-sort-bar 내 #sb-pg-inline 으로 이전
   JS에서 자동 제거됨 — CSS는 호환성 유지용으로만 보존
   ══════════════════════════════════════════════════════════════ */
#sb-page-bar {
    display: none !important;   /* v65.2: 완전 숨김 (JS가 DOM 제거) */
}
.sb-pg-info {
    font-size: 10px;
    color: #64748b;
    margin-right: 4px;
    white-space: nowrap;
}
.sb-pg-info b { color: #94a3b8; }
.sb-pg-btn {
    font-size: 10px;
    min-width: 24px;
    height: 22px;
    padding: 0 5px;
    border-radius: 4px;
    border: 1px solid rgba(100,116,139,0.25);
    background: rgba(30,41,59,0.5);
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.12s;
    white-space: nowrap;
}
.sb-pg-btn:hover:not(:disabled) {
    border-color: rgba(59,130,246,0.45);
    color: #60a5fa;
    background: rgba(59,130,246,0.08);
}
.sb-pg-btn.active {
    background: rgba(59,130,246,0.15);
    border-color: rgba(59,130,246,0.5);
    color: #60a5fa;
    font-weight: 700;
}
.sb-pg-btn:disabled {
    opacity: 0.3;
    cursor: default;
}
.sb-pg-ellipsis {
    font-size: 10px;
    color: #475569;
    padding: 0 2px;
}

/* BOW 점수분석 행 */
.sbc-g-row-bow { margin-top: 3px; padding-top: 3px; border-top: 1px solid rgba(255,255,255,0.05); }
.sbc-g-fill.bow-buy      { background: linear-gradient(90deg, #9b1c1c, #ff3d5a); }
.sbc-g-fill.bow-approach { background: linear-gradient(90deg, #92400e, #f59e0b); }
.sbc-g-fill.bow-sell     { background: linear-gradient(90deg, #1e293b, #475569); }
.sbc-g-val.bow-val-buy      { color: #ff3d5a; }
.sbc-g-val.bow-val-approach { color: var(--orange); }
.sbc-g-val.bow-val-sell     { color: #64748b; }
.sbc-g-val.bow-val-neutral,
.sbc-g-val.bow-val-none     { color: var(--text-muted); }

/* ④ 매수신호 컬럼 BOW 아이콘 */
.sbc-bow-icon {
    font-size: 9px;
    font-weight: 800;
    margin-top: 2px;
    padding: 2px 5px;
    border-radius: 4px;
    letter-spacing: 0.3px;
}
.sbc-bow-icon.buy      { background: rgba(255,61,90,0.15); color: #ff3d5a; }
.sbc-bow-icon.approach { background: rgba(245,158,11,0.15); color: var(--orange); }
.sbc-bow-icon.sell     { background: rgba(100,116,139,0.12); color: #94a3b8; }

/* 투자기간 배지 */
.sb-period-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.2px;
}
.sb-period-badge i { font-size: 8px; }

.sb-period-scalp { background: rgba(239,68,68,0.12);   color: var(--red);    border: 1px solid rgba(239,68,68,0.25); }
.sb-period-short { background: rgba(245,158,11,0.12);  color: var(--orange); border: 1px solid rgba(245,158,11,0.25); }
.sb-period-swing { background: rgba(16,185,129,0.12);  color: var(--green);  border: 1px solid rgba(16,185,129,0.25); }
.sb-period-mid   { background: rgba(59,130,246,0.12);  color: var(--accent); border: 1px solid rgba(59,130,246,0.25); }
.sb-period-none  { background: rgba(100,116,139,0.1);  color: var(--text-muted); border: 1px solid var(--border); }

/* 필터 힌트 (투자기간 안내) */
.sbot-period-hint {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 700;
    margin-right: 2px;
}
.sbot-period-hint.short { background: rgba(245,158,11,0.15); color: var(--orange); }
.sbot-period-hint.swing { background: rgba(16,185,129,0.15); color: var(--green); }
.sbot-period-hint.mid   { background: rgba(59,130,246,0.15); color: var(--accent); }

.sb-card-time {
    margin-left: auto;
    font-size: 9px;
    color: var(--text-muted);
    font-family: 'Consolas', monospace;
    flex-shrink: 0;
}

/* 레거시 bb-nums (하위 호환) */
.sb-bb-nums {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 10px;
    font-family: 'Consolas', monospace;
}
.sb-bb-bull-num { color: var(--red); font-weight: 700; }
.sb-bb-bull-num i { font-size: 9px; margin-right: 1px; }
.sb-bb-bear-num { color: var(--accent); font-weight: 700; }
.sb-bb-bear-num i { font-size: 9px; margin-left: 1px; }
.sb-bb-total { font-size: 9px; color: var(--text-muted); }

/* 순위 델타 배지 */
.sb-rank-delta { font-size: 9px; font-weight: 700; line-height: 1; display: inline-block; }
.sb-rank-delta.up  { color: #f87171; }
.sb-rank-delta.dn  { color: #60a5fa; }
.sb-rank-delta.new { color: var(--green); font-size: 8px; }

/* 새 시그널 진입 애니메이션 */
.sbc.new-entry { animation: sb-entry 0.5s ease; }
.sbc.grade-s.new-entry { animation: sb-entry-s 0.5s ease; }
@keyframes sb-entry   { 0% { background: rgba(59,130,246,0.18); } 100% { background: var(--bg-card); } }
@keyframes sb-entry-s { 0% { background: rgba(255,61,90,0.18);  } 100% { background: var(--bg-card); } }

/* 빈 상태 */
.sb-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 260px;
    gap: 12px;
    color: var(--text-muted);
}
.sb-empty i    { font-size: 32px; color: var(--border-light); }
.sb-empty .et  { font-size: 13px; color: var(--text-secondary); font-weight: 600; }
.sb-empty .es  { font-size: 11px; }

/* ============================================================
   로그 패널 (우측)
   ============================================================ */

/* ── 진행 현황 바 (로그 패널 최상단 고정) ── */
.sb-progress-bar {
    display: flex;
    align-items: center;
    gap: 0;
    height: 32px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border);
    padding: 0 10px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

/* 진행률 채우기 바 (배경) */
.sbpb-track {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--border);
}
.sbpb-fill {
    height: 100%;
    background: var(--accent);
    transition: width 0.4s ease;
    border-radius: 0 2px 2px 0;
}
.sbpb-fill.active { background: var(--green); }
.sbpb-fill.signal { background: var(--orange); }

/* 상태 뱃지 */
.sbpb-status {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    padding-right: 10px;
    border-right: 1px solid var(--border);
    height: 100%;
}
.sbpb-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.sbpb-dot.idle    { background: var(--text-muted); }
.sbpb-dot.running { background: var(--green);  box-shadow: 0 0 5px var(--green);  animation: sb-blink 1.5s infinite; }
.sbpb-dot.scan    { background: var(--orange); box-shadow: 0 0 5px var(--orange); animation: sb-blink 0.8s infinite; }
.sbpb-dot.signal  { background: var(--red);    box-shadow: 0 0 5px var(--red);    animation: sb-blink 0.5s infinite; }
.sbpb-dot.stop    { background: var(--red); }

.sbpb-state-txt {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    white-space: nowrap;
    color: var(--text-secondary);
}
.sbpb-state-txt.idle    { color: var(--text-muted); }
.sbpb-state-txt.running { color: var(--green);  }
.sbpb-state-txt.scan    { color: var(--orange); }
.sbpb-state-txt.signal  { color: #f97316;       }

/* 진행 단계 텍스트 */
.sbpb-phase {
    flex: 1;
    padding: 0 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
}
.sbpb-phase-txt {
    font-size: 10px;
    color: var(--text-muted);
    font-family: 'Consolas', monospace;
    transition: color 0.2s;
}
.sbpb-phase-txt.active { color: var(--text-secondary); }
.sbpb-phase-txt.signal { color: var(--orange); font-weight: 600; }
.sbpb-phase-txt.err    { color: var(--red); }

/* 최근 신호 종목 */
.sbpb-last-signal {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    padding-left: 10px;
    border-left: 1px solid var(--border);
    height: 100%;
}
.sbpb-sig-label {
    font-size: 9px;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.4px;
}
.sbpb-sig-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--orange);
    white-space: nowrap;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    animation: sbpb-sig-flash 1s ease;
}
@keyframes sbpb-sig-flash {
    0%   { opacity: 0; transform: translateX(5px); }
    100% { opacity: 1; transform: translateX(0); }
}

.sb-log-panel {
    background: var(--bg-secondary);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0; /* ★ grid 자식 shrink 허용 */
}

/* 통합 로그 헤더 */
.sb-log-tabs {
    display: flex;
    align-items: center;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    height: 36px;
    padding: 0 8px 0 12px;
    gap: 6px;
}
/* 통합 타이틀 (탭 없는 단일 로그) */
.sb-log-tab-unified {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    flex: 1;
}
.sb-log-tab-unified i { color: var(--accent); }
.sb-log-tab-unified .tc {
    font-size: 9px;
    padding: 1px 5px;
    background: rgba(59,130,246,0.15);
    border-radius: 8px;
    min-width: 18px;
    text-align: center;
    color: var(--accent);
    font-weight: 700;
}
/* 레거시 탭 (sb-diag.js 참조용 — 숨김) */
.sb-log-tab {
    display: none;
}

/* ══════════════════════════════════════════════════════════════
   sb-panel-tab — 로그/조건검색 탭 전환 버튼
   ══════════════════════════════════════════════════════════════ */
.sb-panel-tab {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    height: 36px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.sb-panel-tab:hover { color: var(--text-secondary); }
.sb-panel-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.sb-panel-tab i { font-size: 10px; }
.sb-panel-tab .tc {
    font-size: 9px;
    padding: 1px 5px;
    background: rgba(59,130,246,0.15);
    border-radius: 8px;
    min-width: 18px;
    text-align: center;
    color: var(--accent);
    font-weight: 700;
}
.sb-panel-tab#sb-ptab-cond.active .tc { background: rgba(99,102,241,0.2); color: #818cf8; }
.sb-panel-tab#sb-ptab-cond.active     { color: #818cf8; border-bottom-color: #818cf8; }

/* 장외 모드일 때 조건검색 탭 강조 */
.sb-panel-tab.market-closed {
    color: #818cf8;
    background: rgba(99,102,241,0.07);
}

/* ══════════════════════════════════════════════════════════════
   sb-cond-view — 조건검색 결과 패널
   ══════════════════════════════════════════════════════════════ */
.sb-cond-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* 조건식 목록 헤더 */
.sbcv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px 6px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
}
.sbcv-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 5px;
}
.sbcv-title i { color: #818cf8; font-size: 10px; }
.sbcv-total {
    font-size: 10px;
    color: var(--text-muted);
    background: rgba(99,102,241,0.12);
    border-radius: 8px;
    padding: 1px 7px;
}

/* 조건식 리스트 */
.sbcv-cond-list {
    max-height: 160px;
    overflow-y: auto;
    flex-shrink: 0;
    padding: 4px 0;
}
.sbcv-cond-list::-webkit-scrollbar { width: 3px; }
.sbcv-cond-list::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 2px; }

/* 조건식 항목 */
.sbcv-cond-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 12px;
    cursor: pointer;
    transition: background 0.1s;
    border-left: 2px solid transparent;
}
.sbcv-cond-item:hover { background: rgba(99,102,241,0.08); }
.sbcv-cond-item.active {
    background: rgba(99,102,241,0.12);
    border-left-color: #818cf8;
}
.sbcv-cond-item-left {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}
.sbcv-cond-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--border-light);
    flex-shrink: 0;
}
.sbcv-cond-item.active   .sbcv-cond-dot { background: #818cf8; }
.sbcv-cond-item.selected .sbcv-cond-dot { background: var(--green); }
.sbcv-cond-name {
    font-size: 11px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 130px;
}
.sbcv-cond-item.active .sbcv-cond-name { color: #818cf8; font-weight: 600; }
.sbcv-cond-cnt {
    font-size: 10px;
    color: var(--text-muted);
    background: var(--bg-primary);
    border-radius: 6px;
    padding: 1px 6px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.sbcv-cond-cnt.has-data {
    color: var(--accent);
    background: rgba(99,102,241,0.12);
    font-weight: 600;
}
.sbcv-cond-item.active .sbcv-cond-cnt { color: #818cf8; background: rgba(99,102,241,0.15); }
.sbcv-cond-arrow {
    font-size: 9px;
    color: var(--text-muted);
    flex-shrink: 0;
    margin-left: 4px;
}

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

/* 결과 헤더 */
.sbcv-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 12px 5px;
    flex-shrink: 0;
    background: var(--bg-secondary);
}
.sbcv-result-name {
    font-size: 11px;
    font-weight: 600;
    color: #818cf8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
}
.sbcv-result-cnt {
    font-size: 10px;
    color: var(--text-muted);
}

/* 장외 종목 카드 리스트 */
.sbcv-card-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-height: 0;
}
.sbcv-card-list::-webkit-scrollbar { width: 3px; }
.sbcv-card-list::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 2px; }

/* 빈 상태 */
.sbcv-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 12px;
    color: var(--text-muted);
    font-size: 11px;
    text-align: center;
}
.sbcv-empty i { font-size: 20px; opacity: 0.35; }

/* ── 장외 종목 카드 (sbcv-card) ── */
.sbcv-card {
    display: flex;
    align-items: stretch;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    min-height: 60px;
    flex-shrink: 0;
}
.sbcv-card:hover {
    border-color: rgba(99,102,241,0.35);
    box-shadow: 0 2px 10px rgba(99,102,241,0.1);
}
/* 좌측 컬러바 */
.sbcv-card-bar {
    width: 3px;
    background: var(--border-light);
    flex-shrink: 0;
}
.sbcv-card-bar.up   { background: var(--red); }
.sbcv-card-bar.down { background: var(--accent); }
/* 순번 */
.sbcv-card-rank {
    width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    flex-shrink: 0;
}
/* 종목 정보 */
.sbcv-card-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px 6px;
    min-width: 0;
    gap: 3px;
}
.sbcv-card-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sbcv-card-code {
    font-size: 10px;
    color: var(--text-muted);
    font-family: monospace;
}
/* 전일 가격 영역 */
.sbcv-card-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding: 8px 10px;
    flex-shrink: 0;
    gap: 3px;
}
.sbcv-card-close {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}
.sbcv-card-chg {
    font-size: 11px;
    font-weight: 600;
}
.sbcv-card-chg.up   { color: var(--red); }
.sbcv-card-chg.down { color: var(--accent); }
.sbcv-card-chg.flat { color: var(--text-muted); }
/* 장중 확인 배지 */
.sbcv-card-pending {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    gap: 3px;
    flex-shrink: 0;
    border-left: 1px solid var(--border);
    min-width: 72px;
}
.sbcv-pending-label {
    font-size: 9px;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.4;
}
.sbcv-pending-icon {
    font-size: 14px;
    opacity: 0.4;
}

/* 더 보기 버튼 */
.sbcv-loadmore {
    padding: 8px;
    flex-shrink: 0;
    border-top: 1px solid var(--border);
}
.sbcv-loadmore-btn {
    width: 100%;
    padding: 7px;
    background: rgba(99,102,241,0.08);
    border: 1px solid rgba(99,102,241,0.2);
    border-radius: 6px;
    color: #818cf8;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: background 0.15s;
}
.sbcv-loadmore-btn:hover { background: rgba(99,102,241,0.15); }

/* 로그 액션 */
.sb-log-actions {
    display: flex;
    align-items: center;
    padding: 0 8px;
    gap: 2px;
    background: var(--bg-primary);
    border-right: 1px solid var(--border);
}
.sb-log-act-btn {
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    font-size: 10px;
    transition: var(--transition);
}
.sb-log-act-btn:hover        { color: var(--text-secondary); background: var(--bg-card); }
.sb-log-act-btn.danger:hover { color: var(--red); }
.sb-log-act-btn.copied       { color: var(--green) !important; }
.sb-log-act-btn.copied:hover { color: var(--green) !important; background: rgba(16,185,129,0.1); }

/* 로그 바디 */
.sb-log-body {
    flex: 1;
    overflow-y: auto;
    padding: 2px 0;
}
.sb-log-body::-webkit-scrollbar { width: 3px; }
.sb-log-body::-webkit-scrollbar-thumb { background: var(--border-light); }

/* 로그 아이템 */
.sb-log-item {
    display: grid;
    grid-template-columns: 52px 38px 1fr;
    gap: 6px;
    padding: 4px 10px;
    font-size: 10.5px;
    line-height: 1.55;
    border-bottom: 1px solid rgba(255,255,255,0.025);
    transition: background 0.1s;
    border-left: 2px solid transparent;
}
.sb-log-item:hover { background: rgba(255,255,255,0.035); }

.sb-log-item.li-sig  {
    border-left-color: #ff4d6d;
    background: rgba(255,61,90,0.04);
}
.sb-log-item.li-rnk  { border-left-color: var(--accent); background: rgba(59,130,246,0.025); }
.sb-log-item.li-scn  { border-left-color: var(--green);  background: rgba(16,185,129,0.025); }
.sb-log-item.li-err  {
    border-left-color: var(--red);
    background: rgba(239,68,68,0.06);
}

.sb-log-ts {
    font-size: 9.5px;
    color: #7c8db0;        /* 기존보다 밝게 */
    font-family: 'Consolas', monospace;
    white-space: nowrap;
}

.sb-log-tag {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 3px;
    text-align: center;
    align-self: start;
    letter-spacing: 0.3px;
}
/* ★ 태그별 색상 — 배경 밝기 + 글자색 모두 개선 */
.sb-log-tag.t-sig { background: rgba(255,77,109,0.22); color: #ff4d6d; }
.sb-log-tag.t-rnk { background: rgba(59,130,246,0.22); color: #60a5fa; }
.sb-log-tag.t-scn { background: rgba(16,185,129,0.22); color: #34d399; }
.sb-log-tag.t-obs { background: rgba(245,158,11,0.22); color: #fbbf24; }
.sb-log-tag.t-err { background: rgba(239,68,68,0.25);  color: #f87171; }
.sb-log-tag.t-sys { background: rgba(148,163,184,0.15);color: #a8b8cc; }

/* ★ 로그 메시지 색상 개선 */
.sb-log-msg {
    color: #c9d4e8;        /* 더 밝고 선명하게 */
    font-size: 10.5px;
    word-break: break-all;
    line-height: 1.55;
}
.sb-log-msg .m-stock { color: #60a5fa; font-weight: 700; }
.sb-log-msg .m-score { color: #fbbf24; font-weight: 700; }
.sb-log-msg .m-up    { color: #f87171; font-weight: 600; }
.sb-log-msg .m-dn    { color: #60a5fa; }
.sb-log-msg .m-ok    { color: #34d399; font-weight: 600; }
.sb-log-msg .m-warn  { color: #fbbf24; }
.sb-log-msg .m-dim   { color: #6b7b9a; }       /* dim은 적당히 어둡게 */

/* 빈 로그 */
.sb-log-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 180px;
    gap: 8px;
    color: var(--text-muted);
    font-size: 11px;
}
.sb-log-empty i { font-size: 22px; color: var(--border-light); }

/* 일시정지 바 */
.sb-log-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-top: 1px solid var(--border);
    background: var(--bg-primary);
    flex-shrink: 0;
}
.sb-pause-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 14px;
    font-size: 10px;
    font-weight: 600;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition);
}
.sb-pause-btn:hover        { border-color: var(--accent);  color: var(--accent); }
.sb-pause-btn.paused       { border-color: var(--orange); color: var(--orange); background: rgba(245,158,11,0.08); }

/* ============================================================
   점수 설명 범례
   ============================================================ */
.sb-score-legend {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 16px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    flex-wrap: wrap;
}
.sb-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--text-muted);
}
.sb-legend-dot {
    width: 8px; height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}
.sb-legend-dot.s { background: #ff3d5a; }
.sb-legend-dot.a { background: var(--orange); }
.sb-legend-dot.b { background: var(--green); }
.sb-legend-dot.c { background: var(--accent); }
.sb-legend-label { color: var(--text-secondary); font-weight: 600; }

/* ============================================================
   필터바 래퍼 + 2줄 레이아웃 (v66)
   ============================================================ */
.sbot-filterbar-wrap {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
.sbot-filterbar {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 6px 14px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE/Edge */
}
.sbot-filterbar::-webkit-scrollbar { display: none; } /* Chrome/Safari */

/* 2행 — 분석주기 + 등급범례 + 카운터 + START */
.sbot-filterbar.sbot-filterbar-row2 {
    background: var(--bg-primary);
    border-top: 1px solid rgba(255,255,255,0.04);
    padding: 5px 14px;
    gap: 0;
}

/* 2행 안의 sbf-chips — 토글버튼 래퍼로도 사용 */
.sbot-filterbar-row2 .sbf-chips {
    gap: 4px;
}

/* 2행 안의 sb-toggle-btn — 기존 컨트롤바 스타일 재활용 */
.sbot-filterbar-row2 .sb-toggle-btn {
    padding: 3px 9px;
    font-size: 11px;
}

/* 등급 범례 칩 (읽기전용, 클릭 불가) */
.sbf-legend-chips {
    gap: 6px;
    pointer-events: none;
    user-select: none;
}
.sbf-legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}
.sbf-legend-chip em {
    font-style: normal;
    font-weight: 400;
    font-size: 9px;
    color: var(--text-muted);
    opacity: 0.7;
}
.sbf-ldot {
    width: 7px;
    height: 7px;
    border-radius: 2px;
    flex-shrink: 0;
    display: inline-block;
}
.sbf-legend-chip.grade-s .sbf-ldot { background: #ff3d5a; }
.sbf-legend-chip.grade-s            { color: #fca5a5; }
.sbf-legend-chip.grade-a .sbf-ldot  { background: var(--orange, #f59e0b); }
.sbf-legend-chip.grade-a            { color: #fcd34d; }
.sbf-legend-chip.grade-b .sbf-ldot  { background: var(--green, #10b981); }
.sbf-legend-chip.grade-b            { color: #6ee7b7; }
.sbf-legend-chip.grade-c .sbf-ldot  { background: var(--accent, #3b82f6); }
.sbf-legend-chip.grade-c            { color: #93c5fd; }

/* 2행 카운터·START — 우측 정렬 */
.sbot-filterbar-row2 .sb-counter {
    font-size: 11px;
    gap: 3px;
}
.sbot-filterbar-row2 .sb-run-btn {
    height: 28px;
    padding: 0 14px;
    font-size: 11px;
}

/* 각 필터 그룹 */
.sbf-group {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

/* 그룹 레이블 */
.sbf-label {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 3px;
}
.sbf-label i {
    font-size: 9px;
    opacity: 0.7;
}

/* 칩 컨테이너 */
.sbf-chips {
    display: flex;
    gap: 3px;
    flex-wrap: nowrap;
}

/* 칩 공통 — hidden input + styled span */
.sbf-chip {
    display: inline-flex;
    cursor: pointer;
    user-select: none;
}
.sbf-chip input {
    display: none;
}
.sbf-chip span {
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 600;
    border: 1px solid var(--border-light, var(--border));
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    line-height: 1.5;
}
.sbf-chip span:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}

/* ── 체크박스 활성 ── */
.sbf-check input:checked + span {
    background: rgba(59, 130, 246, 0.15);
    border-color: var(--accent);
    color: var(--accent);
}

/* ── 라디오 활성 ── */
.sbf-radio input:checked + span {
    background: rgba(59, 130, 246, 0.15);
    border-color: var(--accent);
    color: var(--accent);
}

/* ── 점수 칩 색상 변형 (레거시, 미사용) ── */
.sbf-score-b input:checked + span {
    background: rgba(16, 185, 129, 0.15);
    border-color: var(--green);
    color: var(--green);
}
.sbf-score-a input:checked + span {
    background: rgba(245, 158, 11, 0.15);
    border-color: var(--orange);
    color: var(--orange);
}
.sbf-score-s input:checked + span {
    background: rgba(255, 61, 90, 0.15);
    border-color: #ff3d5a;
    color: #ff3d5a;
}

/* ── 등급 칩 색상 변형 (v66) ── */
/* B등급: 초록 — 점수 60↑ 이상 */
.sbf-grade-b input:checked + span {
    background: rgba(16, 185, 129, 0.15);
    border-color: var(--green, #10b981);
    color: var(--green, #10b981);
}
/* A등급: 오렌지 — 점수 75↑ 이상 */
.sbf-grade-a input:checked + span {
    background: rgba(245, 158, 11, 0.15);
    border-color: var(--orange, #f59e0b);
    color: var(--orange, #f59e0b);
}
/* S등급: 레드/핑크 — 점수 90↑ 최고 */
.sbf-grade-s input:checked + span {
    background: rgba(255, 61, 90, 0.15);
    border-color: #ff3d5a;
    color: #ff3d5a;
}

/* ── BOW+ 상태 칩 색상 변형 (v66) ── */
/* 매수 방향 — 파란 계열 */
.sbf-bow-buy input:checked + span {
    background: rgba(59, 130, 246, 0.18);
    border-color: #3b82f6;
    color: #93c5fd;
}
/* 접근 임박 — 청록 계열 */
.sbf-bow-approach input:checked + span {
    background: rgba(6, 182, 212, 0.18);
    border-color: #06b6d4;
    color: #67e8f9;
}
/* 신선 돌파 — 보라 계열 */
.sbf-bow-fresh input:checked + span {
    background: rgba(139, 92, 246, 0.18);
    border-color: #8b5cf6;
    color: #c4b5fd;
}

/* ── NEW 체크박스 칩 (v66) ── */
.sbf-new-chip input:checked + span {
    background: rgba(251, 191, 36, 0.15);
    border-color: #fbbf24;
    color: #fcd34d;
    font-weight: 700;
}

/* ── 조건검색 중복 칩 (v66) ── */
.sbf-cond input:checked + span {
    background: rgba(99, 102, 241, 0.15);
    border-color: #818cf8;
    color: #a5b4fc;
}

/* ── 투자기간 칩 (v66) ── */
.sbf-period2 input:checked + span {
    background: rgba(20, 184, 166, 0.15);
    border-color: #14b8a6;
    color: #5eead4;
}

/* ── 구분선 ── */
.sbf-sep {
    width: 1px;
    height: 18px;
    background: var(--border);
    flex-shrink: 0;
    margin: 0 8px;
}

/* ── 우측 여백 푸셔 ── */
.sbf-spacer {
    flex: 1;
    min-width: 8px;
}

/* ── 초기화 버튼 ── */
.sbf-reset-btn {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 10px;
    flex-shrink: 0;
    transition: color 0.15s, border-color 0.15s;
    padding: 0;
}
.sbf-reset-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(59, 130, 246, 0.08);
}

/* ============================================================
   Auto Trading 미니 패널 (Signal Bot 상단 고정)
   ============================================================ */

/* ── 전체 래퍼 (Auto Trading 페이지 하단 배치) ── */
.sbat-mini-panel {
    background: rgba(15, 23, 42, 0.97);
    border-top: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: 10px 10px 0 0;
    margin-top: 20px;
    flex-shrink: 0;
}

/* ── 한 줄 미니바 ── */
.sbat-mini-bar {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 6px 14px;
    min-height: 42px;
}

/* ============================================================
   ★ v44.1: 위로가기 버튼
   .sb-card-col 안에서 absolute 위치 — 카드 영역 안에 떠있음
   ============================================================ */
.sb-scroll-top {
    position: absolute;
    bottom: 16px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(59,130,246,0.35);
    background: rgba(15,23,42,0.88);
    color: #60a5fa;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
    z-index: 20;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
}
.sb-scroll-top.visible {
    opacity: 1;
    pointer-events: auto;
}
.sb-scroll-top:hover {
    background: rgba(59,130,246,0.18);
    border-color: rgba(59,130,246,0.6);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59,130,246,0.25);
}
.sb-scroll-top:active { transform: translateY(0); }

/* ============================================================
   ★ v44.1: 봉 로드 진행 바 (프로그레스 바 안, 스캔 바 위 3px)
   ============================================================ */
.sbpb-bow-track {
    position: absolute;
    bottom: 3px;          /* sbpb-track(2px) 바로 위 */
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(16,185,129,0.15);
    overflow: hidden;
}
.sbpb-bow-fill {
    height: 100%;
    background: linear-gradient(90deg, #059669, #10b981);
    transition: width 0.35s ease;
    border-radius: 0 3px 3px 0;
}
.sbpb-bow-txt {
    position: absolute;
    right: 6px;
    top: -14px;           /* 바 위에 작은 텍스트 */
    font-size: 9px;
    color: #10b981;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
}

/* ============================================================
   ★ v44.1: 카드 분석 상태 배지
   (.sbc-col-chart 내 우상단 절대 위치)
   ============================================================ */
.sbc-analysis-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    font-size: 8px;
    font-weight: 600;
    padding: 1px 4px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    gap: 2px;
    pointer-events: none;
    z-index: 5;
    line-height: 1.4;
    letter-spacing: 0.2px;
}
.sbc-analysis-badge i { font-size: 7px; }

/* 로딩중 — 파란 계열 */
.sbc-analysis-badge.loading {
    background: rgba(59,130,246,0.18);
    border: 1px solid rgba(59,130,246,0.35);
    color: #93c5fd;
}
/* 분석중 — 주황 계열 */
.sbc-analysis-badge.analyzing {
    background: rgba(245,158,11,0.15);
    border: 1px solid rgba(245,158,11,0.3);
    color: #fcd34d;
}
/* 완료 — 초록 계열 (3초 후 opacity 낮춤) */
.sbc-analysis-badge.ready {
    background: rgba(16,185,129,0.12);
    border: 1px solid rgba(16,185,129,0.25);
    color: #6ee7b7;
    opacity: 0.7;
}
/* ★ v66: 종가기준 — 보라/남색 계열 (장외 분석 완료) */
.sbc-analysis-badge.close-mode {
    background: rgba(139,92,246,0.15);
    border: 1px solid rgba(139,92,246,0.35);
    color: #c4b5fd;
    opacity: 0.85;
}
/* .sbc-col-chart에 position:relative 보장 */
.sbc-col-chart { position: relative; }

/* 좌: 타이틀 */
.sbat-mini-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 140px;
}
.sbat-mini-title {
    font-size: 12px;
    font-weight: 700;
    color: #60a5fa;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.sbat-mini-title i { margin-right: 4px; color: #f59e0b; }

/* 상태 배지 */
.sbat-mini-status {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
    white-space: nowrap;
}
.sbat-mini-status.idle    { background: rgba(100,116,139,0.2); color: #64748b; }
.sbat-mini-status.running { background: rgba(34,197,94,0.15);  color: #22c55e; animation: sbat-pulse 1.5s infinite; }
.sbat-mini-status.paused  { background: rgba(245,158,11,0.15); color: #f59e0b; }
.sbat-mini-status.stopped { background: rgba(239,68,68,0.15);  color: #ef4444; }

@keyframes sbat-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.6; }
}

/* 중: 현황 스탯 */
.sbat-mini-stats {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1;
    padding: 0 12px;
}
.sbat-mini-stat {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 10px;
}
.sbat-mini-stat-label {
    font-size: 10px;
    color: #475569;
    white-space: nowrap;
}
.sbat-mini-stat-val {
    font-size: 13px;
    font-weight: 700;
    color: #cbd5e1;
    font-family: 'JetBrains Mono', monospace;
}
.sbat-mini-stat-val.green  { color: #22c55e; }
.sbat-mini-stat-val.red    { color: #ef4444; }
.sbat-mini-stat-val.accent { color: #60a5fa; }
.sbat-mini-stat-val.orange { color: #f59e0b; }
.sbat-mini-stat-unit {
    font-size: 10px;
    color: #475569;
}
.sbat-mini-sep {
    width: 1px;
    height: 16px;
    background: rgba(255,255,255,0.07);
    flex-shrink: 0;
}
/* Signal Bot 참조값 / AT 거래현황 구분선 */
.sbat-mini-sep--thick {
    width: 2px;
    height: 20px;
    background: rgba(255,255,255,0.13);
    margin: 0 4px;
}

/* 보유종목 클릭 영역 */
.sbat-holding-btn {
    cursor: pointer;
    border-radius: 6px;
    padding: 3px 10px;
    transition: background 0.15s;
}
.sbat-holding-btn:hover {
    background: rgba(96,165,250,0.1);
}
.sbat-holding-arrow {
    font-size: 9px;
    color: #475569;
    margin-left: 2px;
}

/* 우: 버튼들 */
.sbat-mini-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 버튼 공통 */
.sbat-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: none;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    letter-spacing: 0.3px;
}
.sbat-btn i { font-size: 10px; }

/* START */
.sbat-btn-start {
    background: rgba(34,197,94,0.15);
    color: #22c55e;
    border: 1px solid rgba(34,197,94,0.3);
}
.sbat-btn-start:hover {
    background: rgba(34,197,94,0.25);
    border-color: #22c55e;
}
.sbat-btn-start.active {
    background: #22c55e;
    color: #0f172a;
    box-shadow: 0 0 12px rgba(34,197,94,0.4);
}

/* STOP */
.sbat-btn-stop {
    background: rgba(100,116,139,0.15);
    color: #94a3b8;
    border: 1px solid rgba(100,116,139,0.3);
}
.sbat-btn-stop:hover {
    background: rgba(100,116,139,0.25);
    color: #cbd5e1;
}

/* ALL SELL */
.sbat-btn-allsell {
    background: rgba(239,68,68,0.1);
    color: #f87171;
    border: 1px solid rgba(239,68,68,0.25);
}
.sbat-btn-allsell:hover {
    background: rgba(239,68,68,0.2);
    border-color: #ef4444;
}

/* 일시정지 — 가로 넓게 */
.sbat-btn-pause {
    background: rgba(245,158,11,0.1);
    color: #f59e0b;
    border: 1px solid rgba(245,158,11,0.2);
    padding: 5px 16px;
    min-width: 90px;
    font-size: 12px;
    gap: 5px;
}
.sbat-btn-pause:hover {
    background: rgba(245,158,11,0.25);
    border-color: rgba(245,158,11,0.5);
}
.sbat-btn-pause.active {
    background: rgba(245,158,11,0.3);
    color: #fbbf24;
    border-color: #f59e0b;
}

/* 잠금 버튼 */
.sbat-btn-lock {
    background: rgba(100,116,139,0.1);
    color: #94a3b8;
    border: 1px solid rgba(100,116,139,0.2);
    padding: 5px 10px;
    font-size: 12px;
    transition: all 0.15s;
}
.sbat-btn-lock:hover {
    background: rgba(100,116,139,0.2);
    color: #cbd5e1;
}
.sbat-btn-lock.locked {
    background: rgba(239,68,68,0.12);
    color: #f87171;
    border-color: rgba(239,68,68,0.3);
}
.sbat-btn-lock.locked:hover {
    background: rgba(239,68,68,0.2);
}

/* 잠금 시 설정 패널 오버레이 */
.sbat-mini-panel.is-locked .sbat-settings-panel {
    position: relative;
}
.sbat-mini-panel.is-locked .sbat-settings-panel::after {
    content: '🔒  설정이 잠금되었습니다';
    position: absolute;
    inset: 0;
    background: rgba(10,14,23,0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f87171;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.03em;
    border-radius: 8px;
    z-index: 10;
    backdrop-filter: blur(2px);
}
.sbat-mini-panel.is-locked .sbat-settings-panel input,
.sbat-mini-panel.is-locked .sbat-settings-panel select,
.sbat-mini-panel.is-locked .sbat-settings-panel button:not(#sbat-collapse-btn) {
    pointer-events: none;
    opacity: 0.4;
}

/* 펼치기 버튼 */
.sbat-collapse-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 5px;
    color: #475569;
    cursor: pointer;
    padding: 5px 8px;
    transition: all 0.15s;
}
.sbat-collapse-btn:hover {
    background: rgba(255,255,255,0.05);
    color: #94a3b8;
}
#sbat-collapse-icon {
    font-size: 10px;
    transition: transform 0.2s;
}
.sbat-mini-panel.expanded #sbat-collapse-icon {
    transform: rotate(180deg);
}

/* ── 펼친 설정 패널 ── */
.sbat-settings-panel {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 14px 14px 10px;
    animation: sbat-slide-down 0.2s ease;
}
@keyframes sbat-slide-down {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════════
   설정 패널 — 컴팩트 가로 4열 레이아웃
   모든 섹션을 한 행으로 배치, 세로 낭비 최소화
══════════════════════════════════════════════════════════════ */

/* 4열 균등 그리드 — stretch로 카드 높이 통일 */
.sbat-settings-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    align-items: stretch;   /* ★ 모든 카드 동일 높이 */
}

/* 그룹 카드 공통 — 높이 stretch, 내부 flex-col */
.sbat-setting-group {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    padding: 11px 13px;
    display: flex;
    flex-direction: column;
    gap: 0;                 /* gap 제거 → compact-rows가 담당 */
}

/* 섹션 타이틀 */
.sbat-group-title {
    font-size: 9.5px;
    font-weight: 700;
    color: #60a5fa;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.sbat-group-title i { margin-right: 4px; opacity: 0.8; }

/* ── 공통 컴팩트 행 컨테이너 — 세로 남은 공간 균등 분배 ── */
.sbat-compact-rows {
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 1;                /* ★ 카드 높이를 채우도록 확장 */
    justify-content: space-between; /* ★ 행들을 균등 배분 */
    padding-top: 9px;       /* 타이틀과의 간격 */
}

/* 단일 입력 행 */
.sbat-cr {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 2칸 그리드 행 */
.sbat-cr-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    align-items: end;
}

/* 3칸 그리드 행 */
.sbat-cr-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    align-items: end;
}

/* 행 내 개별 항목 */
.sbat-cr-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

/* 컴팩트 라벨 */
.sbat-lbl {
    font-size: 9.5px;
    color: #64748b;
    font-weight: 500;
    white-space: nowrap;
}

/* 총 투자금 강조 */
.sbat-lbl-budget {
    color: #fbbf24 !important;
    font-weight: 700 !important;
}
.sbat-label-budget {
    color: #fbbf24 !important;
    font-weight: 700 !important;
}
.sbat-input-budget {
    background: rgba(251,191,36,0.08) !important;
    border-color: rgba(251,191,36,0.35) !important;
    color: #fde68a !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-align: right;
}
.sbat-input-budget:focus {
    border-color: rgba(251,191,36,0.7) !important;
    background: rgba(251,191,36,0.12) !important;
}
.sbat-unit-budget { color: #fbbf24 !important; font-weight: 600 !important; }

/* 익절/손절 라벨 색 */
.sbat-lbl-tp { color: #4ade80 !important; }
.sbat-lbl-sl { color: #f87171 !important; }

/* 종목당 금액 표시 행 */
.sbat-cr-perstock {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 7px;
    background: rgba(96,165,250,0.05);
    border: 1px solid rgba(96,165,250,0.12);
    border-radius: 5px;
}
.sbat-cr-perstock .sbat-lbl { color: #475569; }

/* 자동 배지 */
.sbat-auto-badge {
    display: inline-block;
    font-size: 8px;
    font-weight: 700;
    padding: 1px 4px;
    background: rgba(96,165,250,0.15);
    color: #60a5fa;
    border-radius: 3px;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

/* 시간 선택 행 */
.sbat-cr-time {
    flex-wrap: wrap;
    gap: 4px;
}
.sbat-tsel-sep {
    font-size: 10px;
    color: #475569;
    font-weight: 700;
}

/* 손익분기 표시 */
.sbat-be-field .sbat-breakeven-inline {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 3px 6px;
    background: rgba(34,197,94,0.06);
    border: 1px solid rgba(34,197,94,0.15);
    border-radius: 5px;
    min-height: 26px;
    justify-content: center;
}
.sbat-be-field .sbat-be-val {
    font-size: 11px;
    font-weight: 700;
    color: #22c55e;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1.1;
}
.sbat-be-field .sbat-be-hint {
    font-size: 8px;
    color: #475569;
    line-height: 1;
}

/* 리스크 항목 헤더 (아이콘+라벨) */
.sbat-risk-hd {
    display: flex;
    align-items: center;
    gap: 4px;
}
.sbat-risk-hd .sbat-lbl { margin: 0; }

/* 리스크 아이콘 (작게) */
.sbat-risk-icon {
    width: 18px; height: 18px;
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px;
    flex-shrink: 0;
}
.sbat-risk-icon.red    { background: rgba(239,68,68,0.12);  color: #f87171; }
.sbat-risk-icon.orange { background: rgba(249,115,22,0.12); color: #fb923c; }
.sbat-risk-icon.yellow { background: rgba(234,179,8,0.12);  color: #facc15; }

/* 리스크 요약 게이지 */
.sbat-risk-summary {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 5px 8px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
}
.sbat-risk-sum-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}
.sbat-risk-sum-sep {
    width: 1px; height: 22px;
    background: rgba(255,255,255,0.07);
    flex-shrink: 0;
}
.sbat-risk-sum-label {
    font-size: 8.5px;
    color: #475569;
    font-weight: 500;
    white-space: nowrap;
}
.sbat-risk-sum-val {
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    font-family: 'JetBrains Mono', monospace;
}
.sbat-risk-sum-val.ok     { color: #22c55e; }
.sbat-risk-sum-val.warn   { color: #f59e0b; }
.sbat-risk-sum-val.danger { color: #ef4444; }

/* 카드별 그리드 위치 (4열 순서대로) */
.sbat-group-fund  { grid-column: 1; }
.sbat-group-entry { grid-column: 2; }
.sbat-group-pnl   { grid-column: 3; }
.sbat-group-risk  { grid-column: 4; }

/* 카드별 justify-content 통일 */
.sbat-group-fund,
.sbat-group-entry,
.sbat-group-pnl,
.sbat-group-risk {
    justify-content: flex-start;
}

/* ══════════════════════════════════════
   수익/손절 카드 내부 레이아웃
══════════════════════════════════════ */

/* 익절/손절/장마감 3칸 가로 배치 */
.sbat-pnl-fields {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
    align-items: start;
}
.sbat-pnl-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* ══════════════════════════════════════
   변동성 자동조절 — 카드 하단, 가로 1행
══════════════════════════════════════ */
.sbat-vol-inner {
    background: rgba(139,92,246,0.06);
    border: 1px solid rgba(139,92,246,0.2);
    border-radius: 6px;
    padding: 5px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sbat-vol-inner.disabled {
    opacity: 0.38;
    pointer-events: none;
}

/* 1행: 타이틀+토글 | 구분 | 민감도 | 구분 | 최대익절 | 최대손절 */
.sbat-vol-flat-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}
.sbat-vol-flat-row .sbat-vol-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sbat-vol-flat-sep {
    width: 1px;
    height: 20px;
    background: rgba(139,92,246,0.25);
    flex-shrink: 0;
}
.sbat-vol-flat-row .sbat-vol-sensitivity {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.sbat-vol-flat-row .sbat-vol-limit-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.sbat-vol-limit-inp {
    width: 52px !important;
    max-width: 52px !important;
}
.sbat-vol-limit-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* 2행: 설명 한 줄 바 */
.sbat-vol-desc-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 6px;
    background: rgba(0,0,0,0.18);
    border-radius: 4px;
    font-size: 9px;
    color: #64748b;
    flex-wrap: wrap;
    line-height: 1.4;
}
.sbat-vol-desc-bar b { color: #94a3b8; font-weight: 600; }
.sbat-vol-desc-sep {
    color: rgba(139,92,246,0.35);
    font-size: 10px;
}
/* ══════════════════════════════════════════════════════════
   계좌 잔고 표시바 — 한 줄 컴팩트 (sbat-balance-bar)
   ══════════════════════════════════════════════════════════ */
.sbat-balance-bar {
    border-radius: 7px;
    padding: 5px 10px;
    margin-bottom: 6px;
    background: rgba(96,165,250,0.04);
    border: 1px solid rgba(96,165,250,0.13);
    transition: border-color 0.2s, background 0.2s;
}
.sbat-balance-bar.warn   { background: rgba(245,158,11,0.05);  border-color: rgba(245,158,11,0.22); }
.sbat-balance-bar.danger { background: rgba(239,68,68,0.06);   border-color: rgba(239,68,68,0.28); }
.sbat-balance-bar.error  { background: rgba(100,116,139,0.05); border-color: rgba(100,116,139,0.18); }

/* 한 줄 레이아웃: 타이틀 | 칩들 | 프로그레스 | 버튼 */
.sbat-bal-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}
.sbat-bal-title {
    font-size: 9.5px;
    font-weight: 700;
    color: #60a5fa;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    flex-shrink: 0;
    white-space: nowrap;
}
.sbat-bal-title i { margin-right: 3px; opacity: 0.8; }

/* 4개 수치 칩 */
.sbat-bal-chips {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
}
.sbat-bal-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 4px;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
}
.sbat-bal-chip.accent { border-color: rgba(96,165,250,0.18); background: rgba(96,165,250,0.05); }
.sbat-balance-bar.warn   .sbat-bal-chip.accent { border-color: rgba(245,158,11,0.22); background: rgba(245,158,11,0.06); }
.sbat-balance-bar.danger .sbat-bal-chip.accent { border-color: rgba(239,68,68,0.22);  background: rgba(239,68,68,0.06); }

.sbat-bal-chip-lbl {
    font-size: 8.5px;
    color: #475569;
    font-weight: 500;
    flex-shrink: 0;
}
.sbat-bal-chip-val {
    font-size: 10px;
    font-weight: 700;
    color: #cbd5e1;
    font-family: 'JetBrains Mono', monospace;
    flex: 1;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sbat-bal-chip-val.pos { color: #22c55e; }
.sbat-bal-chip-val.neg { color: #ef4444; }

/* 프로그레스 인라인 */
.sbat-bal-progress-wrap-inline {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    min-width: 0;
}
.sbat-bal-prog-txt {
    font-size: 9px;
    color: #475569;
    flex-shrink: 0;
    white-space: nowrap;
}
.sbat-bal-progress-wrap-inline .sbat-bal-progress-track {
    width: 60px;
    height: 3px;
    display: inline-block;
    border-radius: 2px;
    background: rgba(255,255,255,0.08);
    overflow: hidden;
    flex-shrink: 0;
}
.sbat-bal-progress-wrap-inline .sbat-bal-progress-fill {
    height: 100%;
    border-radius: 2px;
    background: #22c55e;
    transition: width 0.4s ease, background 0.3s;
    display: block;
}

.sbat-bal-pct {
    font-size: 9.5px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: #22c55e;
    flex-shrink: 0;
}
.sbat-bal-pct.warn   { color: #f59e0b; }
.sbat-bal-pct.danger { color: #ef4444; }
.sbat-bal-pct.error  { color: #64748b; }

/* 새로고침 버튼 */
.sbat-bal-refresh {
    background: none;
    border: 1px solid rgba(96,165,250,0.18);
    color: #60a5fa;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 9px;
    cursor: pointer;
    transition: background 0.15s;
    line-height: 1;
    flex-shrink: 0;
}
.sbat-bal-refresh:hover { background: rgba(96,165,250,0.1); }
.sbat-bal-refresh:active i { animation: sbat-spin 0.4s linear; display: inline-block; }
@keyframes sbat-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* 기존 구조 호환용 (숨김) */
.sbat-bal-header, .sbat-bal-header-right, .sbat-bal-body, .sbat-bal-nums,
.sbat-bal-item, .sbat-bal-label, .sbat-bal-val, .sbat-bal-progress-wrap { display: none; }

/* 경고 메시지 (세로 확장 허용) */
.sbat-bal-alert-row { }

/* 프로그레스 fill 상태 */
.sbat-bal-progress-fill.warn   { background: #f59e0b; }
.sbat-bal-progress-fill.danger { background: #ef4444; animation: sbat-blink 1s infinite; }
.sbat-bal-progress-fill.error  { background: #475569; }
@keyframes sbat-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* 경고 메시지 */
.sbat-bal-alert {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    padding: 5px 7px;
    border-radius: 5px;
    font-size: 10px;
    line-height: 1.4;
    margin-top: 3px;
}
.sbat-bal-alert.warn {
    background: rgba(245,158,11,0.1);
    color: #fbbf24;
    border: 1px solid rgba(245,158,11,0.2);
}
.sbat-bal-alert.danger {
    background: rgba(239,68,68,0.1);
    color: #f87171;
    border: 1px solid rgba(239,68,68,0.2);
}
.sbat-bal-alert i { margin-top: 1px; flex-shrink: 0; }

/* START 버튼 투자금 초과 경고 텍스트 */
.sbat-start-warn {
    font-size: 10px;
    color: #f87171;
    font-weight: 600;
    padding: 3px 6px;
    background: rgba(239,68,68,0.08);
    border-radius: 5px;
    border: 1px solid rgba(239,68,68,0.2);
    margin-bottom: 4px;
}

/* START 버튼 비활성 */
.sbat-btn-start.disabled,
.sbat-btn-start:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════ */

.sbat-group-title {
    font-size: 10px;
    font-weight: 700;
    color: #60a5fa;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.sbat-group-title i { margin-right: 5px; opacity: 0.8; }

/* 기존 sbat-group-title (중복 정의 제거 — 상단 새 스타일 우선) */

/* 필드 */
.sbat-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sbat-label {
    font-size: 10px;
    color: #64748b;
    font-weight: 500;
    margin-bottom: 1px;
}
.sbat-input-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
}
.sbat-input {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 5px;
    color: #e2e8f0;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 6px;
    width: 100%;
    font-family: 'JetBrains Mono', monospace;
    transition: border-color 0.15s;
    height: 26px;
}
.sbat-input:focus {
    outline: none;
    border-color: rgba(96,165,250,0.5);
    background: rgba(96,165,250,0.05);
}
.sbat-input-pct { width: 65px; }
.sbat-input-unit {
    font-size: 10px;
    color: #475569;
    white-space: nowrap;
    flex-shrink: 0;
}
.sbat-input-prefix {
    font-size: 12px;
    font-weight: 700;
    width: 12px;
    text-align: center;
    flex-shrink: 0;
}
.sbat-input-prefix.green { color: #22c55e; }
.sbat-input-prefix.red   { color: #ef4444; }

/* 시간 입력 */
.sbat-time { width: 75px; }
.sbat-time-range {
    display: flex;
    align-items: center;
    gap: 5px;
}
.sbat-time-sep {
    font-size: 11px;
    color: #475569;
}

/* 종목당 금액 자동계산 표시 */
.sbat-per-stock-display {
    display: flex;
    align-items: baseline;
    gap: 3px;
}
.sbat-per-val {
    font-size: 12px;
    font-weight: 700;
    color: #60a5fa;
    font-family: 'JetBrains Mono', monospace;
}
.sbat-per-unit {
    font-size: 9px;
    color: #475569;
}

/* 손익분기 박스 */
.sbat-breakeven-box {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    background: rgba(245,158,11,0.07);
    border: 1px solid rgba(245,158,11,0.2);
    border-radius: 5px;
    margin-top: 2px;
}
.sbat-be-label {
    font-size: 10px;
    color: #64748b;
}
.sbat-be-val {
    font-size: 12px;
    font-weight: 700;
    color: #f59e0b;
    font-family: 'JetBrains Mono', monospace;
}
.sbat-be-hint {
    font-size: 9px;
    color: #475569;
    margin-left: auto;
}

/* 필드 힌트 */
.sbat-field-hint {
    font-size: 9px;
    color: #475569;
    padding-left: 1px;
}

/* 변동성 자동조절 — 신구 구조에서 sbat-vol-inner로 대체 */
.sbat-vol-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sbat-vol-title {
    font-size: 10px;
    font-weight: 700;
    color: #a78bfa;
    letter-spacing: 0.3px;
}
.sbat-vol-title i { margin-right: 4px; }

/* ON/OFF 토글 스위치 */
.sbat-toggle-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
.sbat-toggle-wrap input { display: none; }
.sbat-toggle-slider {
    width: 32px;
    height: 17px;
    background: rgba(100,116,139,0.3);
    border-radius: 100px;
    transition: background 0.2s;
    position: relative;
}
.sbat-toggle-slider::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #64748b;
    transition: transform 0.2s, background 0.2s;
}
.sbat-toggle-wrap input:checked + .sbat-toggle-slider {
    background: rgba(139,92,246,0.4);
    border-color: rgba(139,92,246,0.6);
}
.sbat-toggle-wrap input:checked + .sbat-toggle-slider::after {
    transform: translateX(15px);
    background: #a78bfa;
}

/* .sbat-vol-body — 사용 안 함 (모두 펼친 상태, 삭제) */

.sbat-vol-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.sbat-vol-lbl {
    font-size: 10px;
    color: #64748b;
    white-space: nowrap;
    flex-shrink: 0;
}
.sbat-vol-input-wrap { flex: 1; justify-content: flex-end; }
.sbat-vol-input-wrap .sbat-input { max-width: 55px; }

/* 민감도 버튼 그룹 */
.sbat-vol-sensitivity {
    display: flex;
    gap: 3px;
}
.sbat-sens-btn {
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid rgba(139,92,246,0.2);
    background: rgba(139,92,246,0.06);
    color: #64748b;
    transition: all 0.15s;
}
.sbat-sens-btn:hover {
    color: #a78bfa;
    background: rgba(139,92,246,0.12);
}
.sbat-sens-btn.active {
    background: rgba(139,92,246,0.25);
    color: #c4b5fd;
    border-color: rgba(139,92,246,0.5);
}

/* 설명 텍스트 */
.sbat-vol-desc {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 5px 7px;
    background: rgba(0,0,0,0.2);
    border-radius: 5px;
    margin-top: 1px;
}
.sbat-vol-desc-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 9px;
    color: #64748b;
    line-height: 1.4;
}
.sbat-vol-desc-icon {
    font-size: 9px;
    margin-top: 1px;
    flex-shrink: 0;
}
.sbat-vol-desc-icon.orange { color: #f59e0b; }
.sbat-vol-desc-icon.blue   { color: #60a5fa; }
.sbat-vol-desc-row b { color: #94a3b8; font-weight: 600; }

/* ══════════════════════════════════════
   ★ Signal Bot 연동 — 분석주기 / 등급 버튼
══════════════════════════════════════ */

/* SB연동 토글 행 */
.sbat-cr-sb-row { align-items: center; }
.sbat-sb-toggle { margin: 0; }
.sbat-sb-mode-hint {
    font-size: 9px;
    color: #22c55e;
    margin-left: 4px;
    opacity: 0.85;
    white-space: nowrap;
}
.sbat-sb-mode-hint.off { color: #475569; }

/* 분석주기 버튼 그룹 */
.sbat-cr-sb-tf { align-items: center; }
.sbat-tf-group {
    display: flex;
    gap: 3px;
    flex: 1;
}
.sbat-tf-btn {
    flex: 1;
    padding: 3px 4px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.2);
    color: #475569;
    transition: all 0.15s;
    text-align: center;
    white-space: nowrap;
}
.sbat-tf-btn:hover  { color: #94a3b8; border-color: rgba(255,255,255,0.15); }
.sbat-tf-btn.active {
    background: rgba(16,185,129,0.18);
    color: #10b981;
    border-color: rgba(16,185,129,0.4);
    box-shadow: 0 1px 4px rgba(16,185,129,0.15);
}

/* 진입등급 버튼 그룹 */
.sbat-cr-sb-grade { align-items: center; flex-wrap: wrap; row-gap: 3px; }
.sbat-grade-group {
    display: flex;
    gap: 3px;
}
.sbat-grade-btn {
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.2);
    color: #475569;
    transition: all 0.15s;
    min-width: 26px;
    text-align: center;
    letter-spacing: 0.3px;
}
.sbat-grade-btn:hover { color: #94a3b8; border-color: rgba(255,255,255,0.15); }
/* 등급별 활성 색상 */
.sbat-grade-btn[data-grade="s"].active { background: rgba(255,61,90,0.18);  color: #ff3d5a; border-color: rgba(255,61,90,0.45); }
.sbat-grade-btn[data-grade="a"].active { background: rgba(245,158,11,0.18); color: #f59e0b; border-color: rgba(245,158,11,0.45); }
.sbat-grade-btn[data-grade="b"].active { background: rgba(16,185,129,0.18); color: #10b981; border-color: rgba(16,185,129,0.45); }
.sbat-grade-btn[data-grade="c"].active { background: rgba(96,165,250,0.18); color: #60a5fa; border-color: rgba(96,165,250,0.45); }
/* 설명 텍스트 */
.sbat-grade-desc {
    font-size: 9px;
    color: #64748b;
    margin-left: 4px;
    white-space: nowrap;
}

/* SB 연동 OFF 시 하위 행 흐리게 */
.sbat-sb-tf-row.sb-off  .sbat-tf-btn,
.sbat-sb-grade-row.sb-off .sbat-grade-btn {
    opacity: 0.35;
    pointer-events: none;
}

/* ══════════════════════════════════════
   거래 모드 토글 (표준 / 1종목)
══════════════════════════════════════ */
.sbat-trade-mode-wrap { display: flex; align-items: center; }
.sbat-mode-toggle {
    display: flex;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 5px;
    padding: 2px;
    gap: 2px;
    width: 100%;
}
.sbat-mode-btn {
    flex: 1;
    padding: 3px 6px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    border: none;
    background: transparent;
    color: #475569;
    transition: all 0.15s;
    text-align: center;
    white-space: nowrap;
}
.sbat-mode-btn:hover { color: #94a3b8; }
.sbat-mode-btn.active {
    background: rgba(96,165,250,0.18);
    color: #60a5fa;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* 종목 검색 래퍼 */
.sbat-stock-search-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    position: relative;
}
.sbat-stock-selected {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 5px;
    flex: 1;
    min-width: 80px;
    min-height: 24px;
}
.sbat-stock-none {
    font-size: 10px;
    color: #475569;
    font-style: italic;
}
.sbat-stock-name {
    font-size: 11px;
    font-weight: 700;
    color: #e2e8f0;
}
.sbat-stock-code {
    font-size: 10px;
    color: #60a5fa;
    font-family: 'JetBrains Mono', monospace;
}
.sbat-stock-clear {
    margin-left: auto;
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    font-size: 10px;
    padding: 1px 3px;
}
.sbat-stock-clear:hover { color: #ef4444; }

.sbat-stock-search-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 600;
    background: rgba(96,165,250,0.1);
    color: #60a5fa;
    border: 1px solid rgba(96,165,250,0.25);
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}
.sbat-stock-search-btn:hover {
    background: rgba(96,165,250,0.2);
    border-color: rgba(96,165,250,0.5);
}

/* 종목 검색 드롭다운 */
.sbat-stock-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #0f172a;
    border: 1px solid rgba(96,165,250,0.25);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    z-index: 200;
    overflow: hidden;
    min-width: 240px;
}
.sbat-stock-search-input-wrap {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sbat-stock-search-input-wrap i { color: #475569; font-size: 11px; }
.sbat-stock-search-input {
    flex: 1;
    background: transparent;
    border: none;
    color: #e2e8f0;
    font-size: 12px;
    outline: none;
}
.sbat-stock-dd-close {
    background: none;
    border: none;
    color: #475569;
    cursor: pointer;
    font-size: 11px;
    padding: 2px;
}
.sbat-stock-dd-close:hover { color: #ef4444; }
.sbat-stock-results {
    max-height: 160px;
    overflow-y: auto;
    padding: 4px 0;
}
.sbat-stock-result-hint {
    padding: 8px 12px;
    font-size: 10px;
    color: #475569;
    text-align: center;
}
.sbat-stock-result-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    transition: background 0.1s;
}
.sbat-stock-result-item:hover { background: rgba(96,165,250,0.08); }
.sbat-stock-result-name {
    font-size: 12px;
    font-weight: 600;
    color: #e2e8f0;
    flex: 1;
}
.sbat-stock-result-code {
    font-size: 10px;
    color: #60a5fa;
    font-family: 'JetBrains Mono', monospace;
}
.sbat-stock-result-market {
    font-size: 9px;
    color: #475569;
    padding: 1px 5px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 3px;
}

/* ══════════════════════════════════════
   1종목 검색 — 인라인 (관심종목 스타일)
══════════════════════════════════════ */

/* 선택된 종목 배지 */
.sbat-selected-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: rgba(34,197,94,0.08);
    border: 1px solid rgba(34,197,94,0.25);
    border-radius: 6px;
    margin-bottom: 4px;
}
.sbat-sel-name {
    font-size: 12px;
    font-weight: 700;
    color: #e2e8f0;
    flex: 1;
}
.sbat-sel-code {
    font-size: 10px;
    color: #60a5fa;
    font-family: 'JetBrains Mono', monospace;
    background: rgba(96,165,250,0.1);
    padding: 1px 5px;
    border-radius: 3px;
}
.sbat-sel-clear {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    background: rgba(100,116,139,0.15);
    border: 1px solid rgba(100,116,139,0.25);
    border-radius: 4px;
    color: #94a3b8;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}
.sbat-sel-clear:hover {
    background: rgba(239,68,68,0.15);
    color: #f87171;
    border-color: rgba(239,68,68,0.3);
}

/* 인라인 검색 컨테이너 */
.sbat-inline-search {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* 검색 바 (관심종목 스타일 참조) */
.sbat-isearch-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 6px;
    padding: 5px 10px;
    transition: border-color 0.15s;
}
.sbat-isearch-bar:focus-within {
    border-color: rgba(96,165,250,0.5);
    background: rgba(96,165,250,0.04);
}
.sbat-isearch-icon {
    color: #475569;
    font-size: 11px;
    flex-shrink: 0;
}
.sbat-isearch-input {
    flex: 1;
    background: transparent;
    border: none;
    color: #e2e8f0;
    font-size: 12px;
    outline: none;
    min-width: 0;
}
.sbat-isearch-input::placeholder { color: #475569; }
.sbat-isearch-clear {
    background: none;
    border: none;
    color: #475569;
    cursor: pointer;
    font-size: 10px;
    padding: 1px 3px;
    flex-shrink: 0;
    line-height: 1;
}
.sbat-isearch-clear:hover { color: #ef4444; }

/* 검색 결과 (바 아래 바로 펼쳐짐) */
.sbat-isearch-results {
    background: #0f172a;
    border: 1px solid rgba(96,165,250,0.2);
    border-top: none;
    border-radius: 0 0 6px 6px;
    overflow-y: auto;
    max-height: 150px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}
.sbat-isearch-results .sbat-stock-result-item {
    padding: 5px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.1s;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.sbat-isearch-results .sbat-stock-result-item:last-child { border-bottom: none; }
.sbat-isearch-results .sbat-stock-result-item:hover { background: rgba(96,165,250,0.08); }
.sbat-isearch-hint {
    padding: 8px 10px;
    font-size: 10px;
    color: #475569;
    text-align: center;
}

/* ── StockSearchUI (.ssi-*) 렌더링 스타일 — sbat-isearch-results 내부 ── */
.sbat-isearch-results .ssi-item {
    padding: 5px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.12s;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 11px;
    color: #cbd5e1;
}
.sbat-isearch-results .ssi-item:last-child { border-bottom: none; }
.sbat-isearch-results .ssi-item:hover,
.sbat-isearch-results .ssi-item.focused { background: rgba(96,165,250,0.12); }
/* 종목명 */
.sbat-isearch-results .ssi-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #e2e8f0;
}
/* 코드 */
.sbat-isearch-results .ssi-code {
    font-size: 10px;
    color: #64748b;
    font-family: monospace;
    letter-spacing: 0.03em;
}
/* 시장 배지 */
.sbat-isearch-results .ssi-market {
    font-size: 9px;
    padding: 1px 4px;
    border-radius: 3px;
    background: rgba(96,165,250,0.12);
    color: #60a5fa;
    white-space: nowrap;
}
/* 검색어 하이라이트 */
.sbat-isearch-results .ssi-hl mark,
.sbat-isearch-results mark {
    background: transparent;
    color: #60a5fa;
    font-weight: 700;
}

/* ══════════════════════════════════════
   ② 진입 조건 — 재구성
══════════════════════════════════════ */

/* 1행: 거래모드 + 최소점수 + 최대주가 */
.sbat-cond-row {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    gap: 8px;
    align-items: end;
}
.sbat-cond-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* 종목 검색 행 (1종목 모드) */
.sbat-single-stock-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 2행: 진입 허용 시간 — 라벨 + 시간 한 줄 */
.sbat-cond-time-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sbat-time-label {
    font-size: 10px;
    color: #64748b;
    font-weight: 500;
}

/* 시간 인라인 래퍼 */
.sbat-time-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

/* 시간 pill: 시작/종료 태그 + select 2개 */
.sbat-time-pill {
    display: flex;
    align-items: center;
    gap: 3px;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(96,165,250,0.15);
    border-radius: 5px;
    padding: 2px 5px;
}
.sbat-time-pill-tag {
    font-size: 9px;
    font-weight: 700;
    color: #475569;
    letter-spacing: 0.3px;
    white-space: nowrap;
    padding-right: 2px;
    border-right: 1px solid rgba(255,255,255,0.07);
    margin-right: 2px;
}

/* 시간 select (시/분 공용) */
.sbat-tsel {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    color: #93c5fd;
    font-size: 11px;
    font-weight: 700;
    padding: 0 1px;
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    outline: none;
    max-width: 26px;
}
.sbat-tsel:focus { color: #60a5fa; }
.sbat-tsel option { background: #0f172a; color: #e2e8f0; }

/* 화살표 구분자 */
.sbat-time-arrow {
    font-size: 12px;
    color: #334155;
    flex-shrink: 0;
}

/* 요약 뱃지 (현재 설정값 표시) */
.sbat-time-summary {
    font-size: 10px;
    font-weight: 700;
    color: #60a5fa;
    font-family: 'JetBrains Mono', monospace;
    background: rgba(96,165,250,0.1);
    border: 1px solid rgba(96,165,250,0.2);
    border-radius: 4px;
    padding: 2px 7px;
    white-space: nowrap;
    letter-spacing: 0.5px;
    margin-left: auto;
}

/* 이전 v2 셀렉트 호환 (혹시 남아있을 경우) */
.sbat-select {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 5px;
    text-align: center;
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
}
.sbat-select:focus { outline: none; border-color: rgba(96,165,250,0.5); }

/* 콤마 입력 필드 정렬 */
.sbat-comma-input { text-align: right; letter-spacing: 0.3px; }

/* 최소 점수 우측 정렬 */
.sbat-score-input { text-align: right; font-weight: 700 !important; }

/* 수익/손절 2컬럼 (장마감매도 제거 후) */
.sbat-pnl-fields-2col {
    grid-template-columns: 1fr 1fr !important;
}

/* ══════════════════════════════════════════════════════
   ? 도움말 툴팁 버튼 (컨트롤바 · 필터바 공용)
   ══════════════════════════════════════════════════════ */
.sb-help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    border-radius: 50%;
    border: 1px solid rgba(96,165,250,0.35);
    background: rgba(96,165,250,0.08);
    color: #60a5fa;
    cursor: pointer;
    vertical-align: middle;
    margin-left: 3px;
    padding: 0;
    position: relative;
    transition: background 0.15s, border-color 0.15s;
    flex-shrink: 0;
    /* 툴팁 위치 앵커 */
}
.sb-help-btn:hover {
    background: rgba(96,165,250,0.22);
    border-color: rgba(96,165,250,0.7);
    color: #93c5fd;
}

/* 툴팁 팝업 — data-tooltip 속성 기반 */
.sb-help-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 240px;
    max-width: 320px;
    padding: 9px 12px;
    background: #0f172a;
    border: 1px solid rgba(96,165,250,0.3);
    border-radius: 8px;
    color: #cbd5e1;
    font-size: 10.5px;
    font-weight: 400;
    line-height: 1.6;
    white-space: pre-line;         /* 
 → 줄바꿈 */
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s, visibility 0.18s;
    z-index: 9999;
    box-shadow: 0 8px 24px rgba(0,0,0,0.55);
    text-align: left;
}
/* 툴팁 꼬리 화살표 */
.sb-help-btn::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(96,165,250,0.3);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s, visibility 0.18s;
    z-index: 10000;
}
.sb-help-btn:hover::after,
.sb-help-btn:hover::before {
    opacity: 1;
    visibility: visible;
}
/* 필터바 안에서 툴팁이 잘리지 않도록 오버플로우 허용 */
.sbot-filterbar { overflow: visible !important; }
.sbf-label { position: relative; }

/* 툴팁이 화면 왼쪽 끝에 있는 경우 오른쪽으로 정렬 */
.sbf-group:first-child .sb-help-btn::after {
    left: 0;
    transform: translateX(0);
}
.sbf-group:first-child .sb-help-btn::before {
    left: 7px;
    transform: translateX(0);
}
/* 툴팁이 오른쪽 끝에서 잘리지 않도록 */
.sbf-group:last-child .sb-help-btn::after,
.sb-ctrl-group:last-child .sb-help-btn::after {
    left: auto;
    right: 0;
    transform: translateX(0);
}

/* ══════════════════════════════════════
   변동성 자동조절 — vol-controls dim 처리
══════════════════════════════════════ */
.sbat-vol-controls {
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: opacity 0.2s;
}

/* ══════════════════════════════════════════════════════════════
   설정 패널 인라인 ? 툴팁  (.sbat-help / .sbat-help-tip)
   - 라벨 안에 <span class="sbat-help">?<span class="sbat-help-tip">...</span></span>
   ══════════════════════════════════════════════════════════════ */
.sbat-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    font-size: 8.5px;
    font-weight: 800;
    line-height: 1;
    border-radius: 50%;
    border: 1px solid rgba(96,165,250,0.3);
    background: rgba(96,165,250,0.07);
    color: #60a5fa;
    cursor: default;
    vertical-align: middle;
    margin-left: 3px;
    position: relative;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
    /* 툴팁이 잘리지 않도록 */
    isolation: isolate;
}
.sbat-help:hover {
    background: rgba(96,165,250,0.2);
    border-color: rgba(96,165,250,0.65);
    color: #93c5fd;
}

/* 툴팁 말풍선 */
.sbat-help-tip {
    display: block;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 210px;
    max-width: 290px;
    padding: 9px 12px;
    background: #0c1729;
    border: 1px solid rgba(96,165,250,0.28);
    border-radius: 8px;
    color: #cbd5e1;
    font-size: 10.5px;
    font-weight: 400;
    line-height: 1.65;
    white-space: normal;
    word-break: keep-all;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, visibility 0.18s ease;
    z-index: 9999;
    box-shadow: 0 8px 28px rgba(0,0,0,0.65);
    text-align: left;
    /* 화살표 */
}
/* 화살표 — 말풍선 아래쪽 꼬리 */
.sbat-help-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(96,165,250,0.28);
}
.sbat-help:hover .sbat-help-tip {
    opacity: 1;
    visibility: visible;
}

/* 설정 패널 overflow 허용 (툴팁이 잘리지 않도록) */
.sbat-compact-rows,
.sbat-setting-group,
.sbat-settings-grid,
.sbat-settings-panel { overflow: visible !important; }

/* 툴팁이 왼쪽에서 열릴 때 좌측 정렬 보정 */
.sbat-cr:first-child .sbat-help-tip,
.sbat-cr-2col .sbat-cr-item:first-child .sbat-help-tip {
    left: 0;
    transform: translateX(0);
}
.sbat-cr:first-child .sbat-help-tip::after,
.sbat-cr-2col .sbat-cr-item:first-child .sbat-help-tip::after {
    left: 7px;
    transform: translateX(0);
}

/* ══════════════════════════════════════
   장마감 강제청산 행
══════════════════════════════════════ */
.sbat-force-sell-row {
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}
.sbat-force-sell-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    font-weight: 700;
    color: #f97316;
    background: rgba(249,115,22,0.1);
    border: 1px solid rgba(249,115,22,0.25);
    border-radius: 4px;
    padding: 2px 6px;
    white-space: nowrap;
    flex-shrink: 0;
}
.sbat-lbl-force { min-width: 58px; }
.sbat-force-sell-toggle { margin-left: auto; }

/* 하단 버튼 */
.sbat-settings-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.05);
    margin-top: 4px;
}
.sbat-footer-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.15s;
}
.sbat-btn-save {
    background: rgba(96,165,250,0.15);
    color: #60a5fa;
    border: 1px solid rgba(96,165,250,0.3);
}
.sbat-btn-save:hover {
    background: rgba(96,165,250,0.25);
}
.sbat-btn-reset {
    background: rgba(100,116,139,0.1);
    color: #64748b;
    border: 1px solid rgba(100,116,139,0.2);
}
.sbat-btn-reset:hover {
    background: rgba(100,116,139,0.2);
    color: #94a3b8;
}
.sbat-settings-saved-msg {
    font-size: 11px;
    color: #22c55e;
    display: flex;
    align-items: center;
    gap: 4px;
    animation: sbat-fadein 0.3s ease;
}
@keyframes sbat-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ============================================================
   AT 탭 — 우측 패널 콘텐츠
   ============================================================ */

.sb-at-view {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* 서브탭 */
.sbat-subtabs {
    display: flex;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    background: rgba(0,0,0,0.2);
    flex-shrink: 0;
}
.sbat-subtab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 6px;
    font-size: 11px;
    font-weight: 600;
    color: #475569;
    background: transparent;
    border: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
}
.sbat-subtab:hover { color: #94a3b8; background: rgba(255,255,255,0.03); }
.sbat-subtab.active {
    color: #60a5fa;
    border-bottom-color: #60a5fa;
    background: rgba(96,165,250,0.05);
}
.sbat-subtab-cnt {
    font-size: 10px;
    background: rgba(96,165,250,0.2);
    color: #60a5fa;
    border-radius: 8px;
    padding: 1px 5px;
    min-width: 16px;
    text-align: center;
}

/* 보유종목 뷰 */
.sbat-holdings-view {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* 요약 헤더 */
.sbat-holdings-summary {
    display: flex;
    padding: 8px 10px;
    background: rgba(0,0,0,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
    gap: 0;
}
.sbat-hs-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0 6px;
    border-right: 1px solid rgba(255,255,255,0.06);
}
.sbat-hs-item:last-child { border-right: none; }
.sbat-hs-label {
    font-size: 9px;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.sbat-hs-val {
    font-size: 12px;
    font-weight: 700;
    color: #e2e8f0;
    font-family: 'JetBrains Mono', monospace;
}

/* 보유종목 리스트 */
.sbat-holdings-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.sbat-holdings-list::-webkit-scrollbar { width: 4px; }
.sbat-holdings-list::-webkit-scrollbar-track { background: transparent; }
.sbat-holdings-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

/* 빈 상태 */
.sbat-holdings-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 20px;
    color: #334155;
    font-size: 12px;
    text-align: center;
}
.sbat-holdings-empty i { font-size: 28px; opacity: 0.4; }
.sbat-holdings-empty-hint {
    font-size: 10px;
    color: #1e293b;
}

/* 보유종목 카드 */
.sbat-holding-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    padding: 8px 10px;
    transition: border-color 0.15s;
}
.sbat-holding-card:hover {
    border-color: rgba(255,255,255,0.12);
}
.sbat-holding-card.profit { border-left: 3px solid #22c55e; }
.sbat-holding-card.loss   { border-left: 3px solid #ef4444; }

/* 카드 상단행 */
.sbat-hc-top {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
}
.sbat-hc-name {
    font-size: 12px;
    font-weight: 700;
    color: #e2e8f0;
    flex: 1;
}
.sbat-hc-code {
    font-size: 10px;
    color: #475569;
}
.sbat-hc-time {
    font-size: 10px;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 3px;
}
.sbat-hc-time i { font-size: 9px; }

/* 카드 가격행 */
.sbat-hc-price {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 11px;
    color: #64748b;
    font-family: 'JetBrains Mono', monospace;
}
.sbat-hc-entry { color: #94a3b8; }
.sbat-hc-arrow { color: #475569; font-size: 9px; }
.sbat-hc-current { font-weight: 700; color: #e2e8f0; font-size: 13px; }
.sbat-hc-pnl {
    margin-left: auto;
    font-size: 13px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
}
.sbat-hc-pnl.pos { color: #22c55e; }
.sbat-hc-pnl.neg { color: #ef4444; }

/* 카드 하단: 수동개입 버튼 */
.sbat-hc-actions {
    display: flex;
    gap: 5px;
}
.sbat-hc-btn {
    flex: 1;
    padding: 4px 6px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: all 0.15s;
    text-align: center;
}
.sbat-hc-btn-sell {
    background: rgba(34,197,94,0.12);
    color: #22c55e;
    border: 1px solid rgba(34,197,94,0.25);
}
.sbat-hc-btn-sell:hover {
    background: rgba(34,197,94,0.22);
}
.sbat-hc-btn-cut {
    background: rgba(239,68,68,0.1);
    color: #f87171;
    border: 1px solid rgba(239,68,68,0.2);
}
.sbat-hc-btn-cut:hover {
    background: rgba(239,68,68,0.2);
}

/* ── 오늘거래 뷰 ── */
.sbat-today-view {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}
.sbat-today-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
}
.sbat-ts-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    gap: 2px;
    border-right: 1px solid rgba(255,255,255,0.05);
}
.sbat-ts-item:last-child { border-right: none; }
.sbat-ts-label {
    font-size: 9px;
    color: #475569;
    text-transform: uppercase;
}
.sbat-ts-val {
    font-size: 12px;
    font-weight: 700;
    color: #e2e8f0;
    font-family: 'JetBrains Mono', monospace;
}
.sbat-ts-item.green .sbat-ts-val { color: #22c55e; }
.sbat-ts-item.red   .sbat-ts-val { color: #ef4444; }

/* 거래 내역 리스트 */
.sbat-today-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
}
.sbat-today-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 20px;
    color: #334155;
    font-size: 12px;
}
.sbat-today-empty i { font-size: 24px; opacity: 0.3; }

/* 거래 내역 행 */
.sbat-trade-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 10px;
    margin-bottom: 3px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
}
.sbat-tr-time { color: #475569; font-family: monospace; min-width: 42px; }
.sbat-tr-tag {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 4px;
}
.sbat-tr-tag.win  { background: rgba(34,197,94,0.15);  color: #22c55e; }
.sbat-tr-tag.loss { background: rgba(239,68,68,0.12);  color: #f87171; }
.sbat-tr-tag.sell { background: rgba(245,158,11,0.12); color: #f59e0b; }
.sbat-tr-name { color: #94a3b8; flex: 1; }
.sbat-tr-pnl {
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    margin-left: auto;
}
.sbat-tr-pnl.pos { color: #22c55e; }
.sbat-tr-pnl.neg { color: #ef4444; }

/* ── AT 탭 배지 (탭 버튼에 보유종목 수 표시) ── */
.sbat-tab-holding-cnt {
    font-size: 9px;
    background: rgba(245,158,11,0.2);
    color: #f59e0b;
    border-radius: 8px;
    padding: 1px 4px;
}

/* ── 계좌번호 배지 ────────────────────────────── */
.sbat-account-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(96,165,250,0.12);
    color: #60a5fa;
    border: 1px solid rgba(96,165,250,0.2);
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}
.sbat-account-badge:hover {
    background: rgba(96,165,250,0.22);
}
.sbat-account-badge i { font-size: 9px; opacity: 0.75; }

/* ── 거래 내역 상세 텍스트 ─────────────────────── */
.sbat-tr-detail {
    font-size: 9px;
    color: #475569;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── 매매일지 요약 배너 (ka10170) ─────────────── */
.sbat-diary-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 5px 8px;
    margin: 4px 0;
    background: rgba(255,255,255,0.03);
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.06);
    font-size: 10px;
    color: #94a3b8;
}
.sbat-diary-item { white-space: nowrap; }
.sbat-diary-item b { color: #e2e8f0; font-weight: 700; }

/* ── 오늘거래 새로고침 버튼 ─────────────────────── */
.sbat-refresh-btn {
    margin-left: auto;
    background: none;
    border: 1px solid rgba(96,165,250,0.2);
    color: #60a5fa;
    border-radius: 6px;
    padding: 2px 7px;
    font-size: 10px;
    cursor: pointer;
    transition: background 0.15s;
}
.sbat-refresh-btn:hover {
    background: rgba(96,165,250,0.12);
}

/* ── 실현손익 색상 강조 ─────────────────────────── */
#sbat-realized-pnl-val.pos { color: #22c55e; }
#sbat-realized-pnl-val.neg { color: #ef4444; }

/* ── 레거시 반응형 (모바일/구형 대응 보존) ── */
@media (max-width: 860px) {
    .sb-signal-big { width: 68px; }
    .sb-signal-grade { font-size: 22px; }
}
@media (max-width: 600px) {
    .sb-ctrl-bar { gap: 6px; }
    .sbf-sep { margin: 0 5px; }
    .sb-spark-full { height: 80px; }
    .sb-bb-num { font-size: 13px; width: 24px; }
    .sb-signal-big { width: 62px; padding: 6px 4px; }
    .sb-signal-grade { font-size: 20px; }
    .sb-card-r1 { gap: 5px; }
    .sb-card-name { font-size: 13px; }
    .sb-price { font-size: 13px; }
    .sb-ob-bar-v2 { height: 18px; }
}

/* ── 카드 진입 애니메이션 (새 디자인용) ── */
.sb-card.new-entry {
    animation: sb-entry-new 0.6s ease;
}
@keyframes sb-entry-new {
    0%   { opacity: 0.6; transform: translateY(6px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   조건식 뷰 — 헤더 배너 (#sb-cond-banner)
   카드 영역(sb-card-list) 상단에 표시
   ============================================================ */
.sb-cond-banner {
    display: flex;
    flex-direction: column;         /* 메인행 + 프로그레스바 세로 배치 */
    background: linear-gradient(135deg, rgba(99,102,241,0.15) 0%, rgba(99,102,241,0.06) 100%);
    border-bottom: 1px solid rgba(99,102,241,0.25);
    border-top: 1px solid rgba(99,102,241,0.15);
    flex-shrink: 0;
}
/* 배너 메인 행 */
.sb-cond-banner-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 12px;
    gap: 8px;
    min-height: 36px;
}
.sb-cond-banner-left {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    flex: 1;
}
.sb-cond-banner-name {
    font-size: 12px;
    font-weight: 700;
    color: #a5b4fc;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}
.sb-cond-banner-cnt {
    font-size: 11px;
    font-weight: 600;
    color: #818cf8;
    background: rgba(99,102,241,0.18);
    border-radius: 10px;
    padding: 2px 8px;
    flex-shrink: 0;
    white-space: nowrap;
}
.sb-cond-banner-right {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}
.sb-cond-banner-time {
    font-size: 10px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.sb-cond-banner-back {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    font-size: 10px;
    font-weight: 600;
    background: rgba(99,102,241,0.12);
    border: 1px solid rgba(99,102,241,0.3);
    border-radius: 6px;
    color: #818cf8;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.sb-cond-banner-back:hover {
    background: rgba(99,102,241,0.22);
    border-color: rgba(99,102,241,0.5);
    color: #a5b4fc;
}
.sb-cond-banner-back i { font-size: 9px; }

/* ── 전체보기 진행 프로그레스바 ── */
.sb-cond-prog {
    height: 3px;
    background: rgba(99,102,241,0.15);
    overflow: hidden;
    flex-shrink: 0;
}
.sb-cond-prog-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #818cf8, #a5b4fc);
    border-radius: 0 2px 2px 0;
    transition: width 0.4s ease;
}
.sb-cond-prog-fill.done {
    background: linear-gradient(90deg, #10b981, #34d399); /* 완료: 초록 */
    transition: width 0.2s ease;
}

/* ============================================================
   조건식 뷰 — 카드 영역 종목 카드 (.sbcv-main-card)
   ============================================================ */
.sb-cond-cards-wrap {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px 10px;
}
.sbcv-main-card {
    display: flex;
    align-items: stretch;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 9px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    min-height: 62px;
    flex-shrink: 0;
    position: relative;
}
.sbcv-main-card:hover {
    border-color: rgba(99,102,241,0.3);
    box-shadow: 0 2px 12px rgba(99,102,241,0.1);
    background: rgba(99,102,241,0.04);
}
.sbcv-main-card.multi {
    border-color: rgba(99,102,241,0.2);
    background: rgba(99,102,241,0.04);
}
.sbcv-main-card.multi:hover {
    border-color: rgba(99,102,241,0.45);
    box-shadow: 0 2px 14px rgba(99,102,241,0.15);
}
/* 좌측 컬러바 */
.sbcv-main-card-bar {
    width: 4px;
    background: var(--border-light);
    flex-shrink: 0;
    border-radius: 0 0 0 0;
}
.sbcv-main-card-bar.up   { background: var(--red); }
.sbcv-main-card-bar.down { background: var(--accent); }
/* 순번 */
.sbcv-main-card-rank {
    width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    flex-shrink: 0;
}
/* 종목 정보 */
.sbcv-main-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px 6px;
    min-width: 0;
    gap: 4px;
}
.sbcv-main-card-top {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.sbcv-main-card-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
}
.sbcv-main-card-code {
    font-size: 10px;
    color: var(--text-muted);
    font-family: monospace;
    flex-shrink: 0;
}
.sbcv-main-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}
/* 가격 영역 */
.sbcv-main-card-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding: 8px 10px;
    flex-shrink: 0;
    gap: 3px;
    min-width: 80px;
}
.sbcv-main-card-close {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.sbcv-main-card-chg {
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.sbcv-main-card-chg.up   { color: var(--red); }
.sbcv-main-card-chg.down { color: var(--accent); }
.sbcv-main-card-chg.flat { color: var(--text-muted); }
.sbcv-main-card-live {
    font-size: 9px;
    color: var(--green);
    opacity: 0.8;
}

/* ── 다중 조건식 충족 배지 ── */
.sbcv-multi-badge {
    display: inline-flex;
    align-items: center;
    font-size: 9px;
    font-weight: 700;
    color: #fbbf24;
    background: rgba(251,191,36,0.12);
    border: 1px solid rgba(251,191,36,0.25);
    border-radius: 8px;
    padding: 1px 6px;
    flex-shrink: 0;
    white-space: nowrap;
}

/* ── 조건식 이름 태그 ── */
.sbcv-cond-tag {
    display: inline-flex;
    align-items: center;
    font-size: 9px;
    color: #818cf8;
    background: rgba(99,102,241,0.1);
    border: 1px solid rgba(99,102,241,0.2);
    border-radius: 6px;
    padding: 1px 6px;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── ✓ 선택 배지 (조건식 목록 패널) ── */
.sbcv-sel-badge {
    display: inline-flex;
    align-items: center;
    font-size: 9px;
    font-weight: 700;
    color: var(--green);
    background: rgba(16,185,129,0.1);
    border: 1px solid rgba(16,185,129,0.2);
    border-radius: 6px;
    padding: 1px 6px;
    flex-shrink: 0;
    white-space: nowrap;
}

/* ── 조건식 항목 우측 그룹 ── */
.sbcv-cond-item-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* ============================================================
   전체보기 버튼 (.sbcv-all-btn)
   조건식 목록 최상단 고정
   ============================================================ */
.sbcv-all-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    cursor: pointer;
    background: rgba(99,102,241,0.06);
    border-left: 2px solid transparent;
    transition: background 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.sbcv-all-btn:hover {
    background: rgba(99,102,241,0.12);
}
.sbcv-all-btn.active {
    background: rgba(99,102,241,0.16) !important;
    border-left: 3px solid #818cf8 !important;
}
.sbcv-all-btn-left {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}
.sbcv-all-icon {
    font-size: 11px;
    color: #818cf8;
    flex-shrink: 0;
}
.sbcv-all-btn.active .sbcv-all-icon { color: #a5b4fc; }
.sbcv-all-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    white-space: nowrap;
}
.sbcv-all-btn.active .sbcv-all-label { color: #a5b4fc; }
.sbcv-all-sub {
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
}
.sbcv-all-btn-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* ── 전체보기/항목 구분선 ── */
.sbcv-list-divider {
    height: 1px;
    background: var(--border);
    margin: 0;
    flex-shrink: 0;
}

/* ── 더 보기 버튼 (카드 영역 인라인) ── */
.sb-cond-loadmore {
    padding: 8px 0;
    display: flex;
    justify-content: center;
}
.sb-cond-loadmore button {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 18px;
    font-size: 11px;
    font-weight: 600;
    color: #818cf8;
    background: rgba(99,102,241,0.08);
    border: 1px solid rgba(99,102,241,0.2);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}
.sb-cond-loadmore button:hover {
    background: rgba(99,102,241,0.15);
    border-color: rgba(99,102,241,0.35);
}

/* ============================================================
   조건식 뷰 — .sbcv-cond-list: 세로 꽉 채움 (세로 스크롤)
   ============================================================ */
/* 조건식 리스트 세로 꽉 채움 — max-height 제거, flex:1로 확장 */
.sbcv-cond-list {
    flex: 1 !important;
    max-height: none !important;
    overflow-y: auto;
    padding: 4px 0;
    min-height: 0;
}

/* ── 조건식 항목 선택 강조 (active) 강화 ── */
.sbcv-cond-item.active {
    background: rgba(99,102,241,0.14) !important;
    border-left: 3px solid #818cf8 !important;
    border-left-color: #818cf8 !important;
}
.sbcv-cond-item.active .sbcv-cond-name {
    color: #a5b4fc !important;
    font-weight: 700 !important;
}
.sbcv-cond-item.active .sbcv-cond-dot {
    background: #818cf8 !important;
    box-shadow: 0 0 4px rgba(129,140,248,0.6);
    width: 8px;
    height: 8px;
}
.sbcv-cond-item.active .sbcv-cond-cnt {
    color: #a5b4fc !important;
    background: rgba(99,102,241,0.2) !important;
    font-weight: 700 !important;
}
.sbcv-cond-item.active .sbcv-cond-arrow {
    color: #818cf8 !important;
    transform: rotate(0deg) scale(1.2);
}

/* ── 조건식 항목: 선택됨(체크) 배지 있을 때 배경 강조 ── */
.sbcv-cond-item.selected {
    background: rgba(16,185,129,0.04);
    border-left: 2px solid rgba(16,185,129,0.3);
}

/* ============================================================
   ★ 반응형 미디어쿼리 — 브라우저 줌(Ctrl++) 단계별 최적화
   ────────────────────────────────────────────────────────────
   핵심 전략:
   ① 우측 패널(로그·조건검색·AT)을 가장 먼저 숨겨
      카드 영역이 최우선으로 공간을 확보
   ② 카드 내 컬럼을 점진적으로 숨겨 min-width를 줄임
   ③ 상단 AT 미니바·필터바를 단계적으로 압축

   브라우저 줌 ↔ 뷰포트 px 대응 (1920px 모니터 기준):
     100% → 1920px   110% → ~1745px   120% → ~1600px
     125% → ~1536px  133% → ~1443px   135% → ~1422px
     150% → ~1280px  175% → ~1097px   200% →  ~960px

   숨김 우선순위 (중요한 것은 끝까지 표시):
     ✂ 먼저 숨김: AT미니바 라벨 → 봉통계 → 호가/조건
     ✂ 그다음:   우측 패널 전체 (로그·조건검색·AT탭)
     ✂ 마지막:   OB분석 → 카드 영역 추가 압축
   ============================================================ */

/* ── ZOOM A | 1750px 이하 (~110% zoom+): AT 미니바 통계 일부 압축 ── */
@media (max-width: 1750px) {
    /* AT 미니바: 라벨 숨김 (값만 표시) */
    .sbat-mini-stat-label { display: none; }
    /* AT 미니바: 좌측 최소 폭 줄이기 */
    .sbat-mini-left { min-width: 100px; }
    /* AT 미니바: 개별 stat 패딩 압축 */
    .sbat-mini-stat { padding: 0 6px; }
    /* filterbar 레이블 숨김 */
    .sbf-label { display: none; }
}

/* ── ZOOM B | 1600px 이하 (~120% zoom+): 조건검색 패널 타이틀 압축 ── */
@media (max-width: 1600px) {
    /* sbot-cond-panel: 패딩 축소 */
    .sbot-cond-titlebar { padding: 6px 10px; }
    /* AT 미니바: 두꺼운 구분선 숨김 */
    .sbat-mini-sep--thick { display: none; }
    /* AT 버튼: font-size:0으로 텍스트 숨기고 아이콘만 표시 */
    .sbat-btn { font-size: 0 !important; padding: 5px 8px; gap: 0; min-width: 0 !important; }
    .sbat-btn i { font-size: 12px; }  /* 아이콘은 px 고정 */
    /* 봉통계 컬럼 숨김 */
    .sbc-col-candle { display: none; }
    .sbc { min-width: 820px; }
    .sb-statusbar { padding: 0 12px; }
    .sb-stat-item  { padding: 0 10px; }
}

/* ── ZOOM C | 1400px 이하 (~135% zoom+): 호가·조건배지 숨김 ── */
@media (max-width: 1400px) {
    .sbc-col-hoga,
    .sbc-col-cond { display: none; }
    .sbc { min-width: 580px; }
    /* filterbar 패딩 압축 */
    .sb-ctrl-bar         { padding: 6px 12px; }
    .sbot-filterbar      { padding: 5px 10px; }
    .sbot-filterbar-row2 { padding: 4px 10px; }
    /* AT 미니바: 익절·손절·수익 stat 블록 숨김 → 신호/S급/A급 + 보유만 */
    .sbat-mini-stats div:has(#sbat-stat-win),
    .sbat-mini-stats div:has(#sbat-stat-loss),
    .sbat-mini-stats div:has(#sbat-stat-pnl) { display: none; }
    /* 두꺼운 구분선(AT/SB 경계) 숨김 */
    .sbat-mini-sep--thick { display: none; }
}

/* ── ZOOM D | 1280px 이하 (~150% zoom+): 우측 패널 전체 숨김 ── */
@media (max-width: 1280px) {
    /* 그리드 → 단일 컬럼: 카드 영역이 100% 너비 독점 */
    .sb-main { grid-template-columns: 1fr; }
    /* 우측 로그·조건검색·AT 패널 전체 숨김 */
    .sb-log-panel,
    .sb-at-panel { display: none; }
    /* 카드 min-width 축소 */
    .sbc { min-width: 520px; }
    /* 상태바 시계 숨김 */
    .sb-clock { display: none; }
    /* AT 미니바: 중간 통계 전부 숨김 → 상태 + 보유 + 버튼만 */
    .sbat-mini-stats { display: none; }
    /* 상태바 항목 축소 */
    .sb-stat-item { padding: 0 8px; }
}

/* ── ZOOM E | 1100px 이하 (~175% zoom+): OB 점수분석 숨김 ── */
@media (max-width: 1100px) {
    .sbc-col-ob { display: none; }
    .sbc { min-width: 420px; }
    .sb-stat-item  { padding: 0 6px; }
    .sb-stat-label { font-size: 9px; }
    .sb-stat-val   { font-size: 11px; }
    /* AT 버튼 더 압축 (ZOOM B에서 이미 아이콘만, 패딩만 추가 조정) */
    .sbat-mini-right { gap: 4px; }
    .sbat-btn { padding: 4px 5px; }
    .sbat-btn i { font-size: 11px; }
}

/* ── ZOOM F | 900px 이하 (~210% zoom+): 카드 영역 최소화 ── */
@media (max-width: 900px) {
    .sbc { min-width: 320px; }
    /* 상태바 핵심 항목만 */
    .sb-stat-item:not(:first-child):not(:last-child):not(:nth-child(2)) { display: none; }
    .sb-statusbar { padding: 0 6px; }
    /* AT 미니바 전체 압축 */
    .sbat-mini-stats { display: none; }
    .sbat-mini-bar { padding: 4px 10px; min-height: 36px; }
    /* filterbar 가로 스크롤 */
    .sbot-filterbar { overflow-x: auto; }
    /* 조건식 패널: 버튼 전체 숨김 */
    .sbot-cond-actions { display: none; }
}