/* ===========================================
   주식 대시보드 (`/stocks`)와 기존 지수·환율 화면 (`/quotes`)
   `stocks.css` 위에 얹는다 — 여기 있는 것은 카드·히트맵과 통합 화면 전용뿐이다.
   =========================================== */

/* ── `/stocks` 통합 레이아웃 ────────────────────────────────────────── */

.stocks-dashboard-container {
    grid-template-rows: auto;
    align-items: start;
}

.stocks-dashboard-container .stocks-main {
    grid-column: 1;
    grid-row: 1;
}

.stocks-dashboard-container .stocks-sidebar-right {
    grid-column: 2;
    grid-row: 1;
}

.quotes-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.quote-section {
    min-width: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
}

.quote-empty {
    padding: 24px 12px;
    text-align: center;
    font-size: 0.875rem;
    color: var(--bae-text-dim);
}

/* ── 지수·환율 카드 ─────────────────────────────────────────────────── */

.quote-card-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.quote-card {
    display: block;
    padding: 10px 12px;
    border: 1px solid var(--bae-border);
    border-radius: var(--border-radius-lg, 8px);
    background: var(--bae-surface);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}

.quote-card:hover,
.quote-card:focus-visible {
    border-color: var(--bae-border-hover);
    background: var(--bae-surface-hover);
}

.quote-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.quote-card-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bae-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quote-card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.quote-card-figures {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.quote-card-price {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--bae-text-primary);
    font-variant-numeric: tabular-nums;
}

.quote-card-pct {
    font-size: 0.82rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* 스파크라인은 `currentColor` 로 그린다 — 등락 클래스가 색을 정한다. */
.quote-spark {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 30px;
    opacity: 0.85;
}

/* ── 지수·환율 상세 ────────────────────────────────────────────────── */

/* ⚠️ 등락 색(`.q-up`/`.q-down`/`.q-flat`)은 **`stocks.css` 에 있다.** 이 화면과 `/stocks`
      가 같은 색이어야 해서 한 곳에만 둔다 — quotes.css 는 stocks.css 뒤에 실린다. */

/* ── 히트맵 ─────────────────────────────────────────────────────────── */

.heatmap-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    max-width: 100%;
    margin: 4px 2px 0;
    padding: 0;
    flex-wrap: wrap;
}

.heat-legend-label {
    margin-right: 2px;
    font-size: 0.625rem;
    color: rgba(255, 255, 255, 0.62);
}

.heatmap-note {
    margin-right: auto;
    padding-right: 8px;
    font-size: 0.625rem;
    color: rgba(255, 255, 255, 0.48);
}

.heat-legend-chip {
    padding: 1px 5px;
    border-radius: 2px;
    font-size: 0.625rem;
    color: #fff;
    font-variant-numeric: tabular-nums;
    opacity: 0.66;
}

/* 상자는 **4:3 고정**이다(2026-09-02 사용자 지정) — 폭을 따라 높이가 정해진다.
   ⚠️ `quotes.js` 가 `clientWidth`·`clientHeight` 를 재서 타일을 깐다. 높이를 여기서
      바꾸면 배치도 따라 바뀌므로, 비율을 손대면 화면을 다시 확인할 것. */
.heatmap-box {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--bae-border);
    border-radius: 6px;
    background: var(--bae-bg-alt);
    overflow: hidden;
}

.heat-group {
    position: absolute;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 5px;
    background: var(--bae-bg);
}

.heat-group:hover {
    border-color: rgba(255, 255, 255, 0.6);
}

.heat-group-name {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 3px;
    right: 3px;
    height: 19px;
    overflow: hidden;
    color: var(--bae-text-primary);
    font-size: 0.69rem;
    font-weight: 700;
    line-height: 18px;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
}

.heat-tile {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    overflow: hidden;
    padding: 1px;
    box-sizing: border-box;
    text-decoration: none;
    color: #fff;
    outline: 1px solid rgba(0, 0, 0, 0.35);
    outline-offset: -1px;
    border-radius: 3px;
}

.heat-tile:hover {
    outline: 2px solid #fff;
    outline-offset: -2px;
    z-index: 2;
}

.heat-tile-name {
    max-width: 100%;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.heat-tile-pct {
    font-size: 0.68rem;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

/* 겉모양은 공용 툴팁 `.c-tip`(ui.css, 정본 tooltip.md)과 같다 — 템플릿이 두 클래스를 함께 단다.
   여기는 안쪽 표(이름·분류·현재가·등락 격자)만 정한다. 자리는 quotes.js 가 마우스를 따라 잡는다. */
.heatmap-tooltip {
    min-width: 168px;
}

.heatmap-tooltip .tip-name {
    margin-bottom: 5px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bae-text-primary);
}

.heatmap-tooltip .tip-grid {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 12px;
    line-height: 1.6;
    max-width: 280px;
}

/* 요약 줄은 라벨이 1·2열을 차지하고 값은 3열에 오른쪽으로 붙는다. */
.heatmap-tooltip .tip-label {
    grid-column: 1 / 3;
}

.heatmap-tooltip .tip-value {
    grid-column: 3;
    justify-self: end;
    color: var(--bae-text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.heatmap-tooltip .tip-side,
.heatmap-tooltip .tip-diff {
    color: var(--bae-text-dim);
    font-weight: 400;
}

.heatmap-tooltip .tip-stock {
    overflow: hidden;
    color: var(--bae-text-primary);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.heatmap-tooltip .tip-sep {
    grid-column: 1 / -1;
    margin: 4px 0;
    border-top: 1px solid var(--bae-border);
}

/* `.tip-value` 의 글자색보다 뒤에 둬야 등락색이 이긴다. */
.heatmap-tooltip .q-up { color: var(--chart-up-text); }
.heatmap-tooltip .q-down { color: var(--chart-down-text); }
.heatmap-tooltip .q-flat { color: var(--bae-text-dim); }

/* ── 좁은 화면 ──────────────────────────────────────────────────────── */

@media (max-width: 1023.98px) {
    .quote-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1023.98px) {
    .stocks-dashboard-container {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
    }

    .stocks-dashboard-container .stocks-main {
        grid-column: 1;
        grid-row: 1;
    }

    .stocks-dashboard-container .stocks-sidebar-right {
        grid-column: 1;
        grid-row: 2;
    }

}

@media (max-width: 639.98px) {
    .quote-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ⚠️ 좁은 화면에서도 상자 높이를 따로 정하지 않는다 — 4:3 을 유지해야 타일 배치가
      화면마다 달라지지 않는다(예전에는 560/420/340px 로 고정했었다). */