/* ============================================================================
   chart-header.css — 차트 헤더의 시·고·저·종(+거래량) · '통합' 배지 · 이동평균 스위치
   (이동평균 값 목록 자체는 차트 iframe 범례 안에 있다 — wwwroot/chart/index.html 의 .lg-ma)
   ========================================================================== */

/* 배지는 종목 이름·코드와 한 묶음. 현재가 뒤에 두면 시세가 바뀔 때마다 좌우로 흔들린다. */
.chart-header-container { position: relative; container-type: inline-size; flex-wrap: wrap; row-gap: 2px; }
.chart-header-stock-info { align-items: baseline; gap: 6px; min-width: 0; }
.chart-header-stock-code { margin-right: 0; }
/* 종목명을 누르면 씨모닝 화면이 열린다 — 누를 수 있다는 것을 보이게 */
.chart-header-stock-name { margin-right: 0; cursor: pointer; text-underline-offset: 3px; }
    .chart-header-stock-name:hover { text-decoration: underline; }
.chart-header-integrated-badge {
    align-self: center;          /* 테두리 있는 칩이라 글자 기준선보다 가운데가 자연스럽다 */
    margin: 0;
    padding: 1px 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.5;
    border-radius: 5px;
}

/* 숫자는 고정폭으로 — 자릿수가 같으면 값이 바뀌어도 폭이 변하지 않아 옆 요소가 밀리지 않는다 */
.chart-header-stock-price,
.chart-header-price-change,
.chart-header-ohlc b {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ───────── 시·고·저·종 ───────── */
.chart-header-ohlc {
    margin-left: auto;           /* 오른쪽으로 밀어 버튼들과 한 덩어리로 */
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
}
    .chart-header-ohlc[hidden] { display: none; }
    .chart-header-ohlc .cho-cell { display: inline-flex; align-items: baseline; gap: 4px; }
    .chart-header-ohlc i { font-style: normal; font-weight: 500; color: var(--text-muted); }
    .chart-header-ohlc b { font-weight: 700; color: var(--text-primary); letter-spacing: -.01em; }
    .chart-header-ohlc b.up { color: var(--red-up); }
    .chart-header-ohlc b.down { color: var(--blue-down); }

/* 한 줄에 다 못 들어가면 감추지 않고 아랫줄로 내린다 (기준은 화면 폭이 아니라 차트 헤더 폭). */
@container (max-width: 1080px) {
    .chart-header-ohlc {
        order: 99;
        flex: 0 0 100%;
        margin-left: 0;
        justify-content: flex-end;   /* 아랫줄에서도 오른쪽에 붙인다 */
        padding-top: 5px;
        overflow: visible;
    }
}
@container (max-width: 520px) { .chart-header-ohlc .cho-vol { display: none; } }

/* ───────── 이동평균 스위치 (값 목록은 차트 범례 안) ───────── */
.chart-header-ma { margin-left: 12px; flex: 0 0 auto; }
    .chart-header-ma[hidden] { display: none; }
.chart-header-ma-btn {
    display: inline-flex; align-items: center; gap: 5px;
    height: 26px; padding: 0 9px;
    border: 1px solid var(--border-color); border-radius: 7px;
    background: transparent; color: var(--text-secondary);
    font: inherit; font-size: 12px; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: color .15s, border-color .15s, background .15s;
}
    .chart-header-ma-btn:hover { color: var(--text-primary); border-color: var(--text-muted); }
    .chart-header-ma-btn.is-on {
        color: var(--text-primary);
        border-color: var(--text-muted);
        background: rgba(255, 255, 255, .06);
    }