/* ===========================================
   주식 홈(`/stocks`) — 2026-09-23 토스증권 PC 처럼
   ===========================================
   `stocks.css`·`quotes.css` **뒤에** 싣는다. 새 뼈대는 `sh-*` 클래스이고, 옛 조각(지수 카드·
   히트맵 탭·포트폴리오 TOP 10)은 `.sh` 로 좁혀 모양만 덮는다 — 동작(quotes.js·rotator.js)과
   히트맵 탭의 1px 맞춤(`stocks.css`)은 그대로 쓴다.

   원칙은 종목 상세(`stock_view.css`)와 같다:
   · 테두리 대신 바탕 한 단계로 칸을 나눈다. 카드 = 본문 바탕(#202020)과 표면(#2B2B2B)의 중간.
   · 숫자는 굵고 고정폭, 라벨은 흐리게. 등락 색은 `.q-up`·`.q-down`(대비 맞춘 글자 토큰).
*/

.sh {
    --sh-card: color-mix(in srgb, var(--bae-surface) 50%, var(--bae-bg));
    --sh-radius: 1rem;
    --sh-pad: clamp(1rem, 0.7rem + 1vw, 1.5rem);
    --sh-gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);

    display: grid;
    gap: var(--sh-gap);
    max-inline-size: 80rem;
    margin-inline: auto;
    padding-block: var(--space-2, 0.5rem) var(--space-6, 2rem);
}

@supports not (background: color-mix(in srgb, red 50%, transparent)) {
    .sh { --sh-card: var(--bae-surface); }
}

/* ⚠️ 옛 `blog.css` 의 clearfix(`div::after{display:table}`)가 flex·grid 에 빈 칸을 끼운다 —
      이 화면의 새 뼈대에서만 끈다(`stock_view.css` 와 같은 이유). 버튼은 빼 둔다 — 터치에서 `::after` 가
      누르는 자리(44px)를 맡는다(ui.css "터치 히트 영역"). `:where` 안이라 특이도는 그대로다. */
.sh::after,
.sh :where([class^="sh-"]:not(.c-btn, .btn), [class*=" sh-"]:not(.c-btn, .btn))::after {
    content: none;
}

.sh-card {
    display: block;   /* 옛 blog.css 의 1024px 미만 `section { display:flex }` 를 끊는다 */
    min-inline-size: 0;
    padding: var(--sh-pad);
    border-radius: var(--sh-radius);
    background: var(--sh-card);
}

.sh-card__title,
.sh-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    margin: 0;
    color: var(--bae-text-primary);
    font-size: 1.125rem;
    font-weight: 700;
}

/* 제목 아이콘은 흐리게 — accent 는 상호작용 색이라 장식에 쓰지 않는다(포트폴리오 제목과 같다). */
.sh-card__title .c-ico,
.sh-section-title .c-ico {
    inline-size: 1.125rem;
    block-size: 1.125rem;
    color: var(--bae-text-dim);
}

.sh-section-title {
    margin-block-start: var(--space-3, 0.75rem);
    padding-inline: var(--space-1, 0.25rem);
}

/* ── 지수·환율 줄 ────────────────────────────────────────────────── */
.sh-quotes {
    display: grid;
    gap: 0.625rem;
    min-inline-size: 0;
}

/* 카드가 올 때까지 "불러오는 중…" 이 카드 줄의 높이를 잡는다(실측) — 안 잡으면 카드가 올 때
   아래 순위 표·시장 지도가 30~100px 밀려 내려간다. 경계는 `quotes.css` 의 열 수를 따른다:
     < 768px  회전 카드 한 장 78px · 768~1023px 6열 한 줄(스파크라인 없음) 81px · 1024px~ 87px
   ⚠️ 카드 격자의 clearfix 유령도 끈다 — 격자에 빈 줄 + gap 10px 을 더해 높이가 어긋났다. */
.sh .quote-card-grid::after { content: none; }

.sh .quote-empty {
    display: grid;
    place-items: center;
    grid-column: 1 / -1;
    box-sizing: border-box;
    min-block-size: 4.875rem;
}

@media (min-width: 768px) {
    .sh .quote-empty { min-block-size: 5.0625rem; }
}

@media (min-width: 1024px) {
    .sh .quote-empty { min-block-size: 5.4375rem; }
}

/* 768px 이상이면 **늘 6열 한 줄**(세트 회전 띠 한 줄 — 2026-10-03 전엔 지수·환율 두 줄).
   ⚠️ `quotes.css` 는 1024px 미만에서 3열로 접는데(2026-10-12 전엔 1399px 이하), 그러면 12장이 4줄(388px)이 되어 태블릿에서 화면의
      1/3(세로)~1/2(가로 1180×820 에서 47%)을 먹었다(2026-09-23 사용자 지적). 한 줄씩이면 약 180px. */
@media (min-width: 768px) {
    .sh .quote-card-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 0.5rem;
    }
}

/* 지수·환율 카드는 폭에 따라 둘 중 하나만 — 넓으면 세트 회전 띠, 좁으면 기존 두 칸 회전(템플릿 머리말).
   회전 띠의 트랙·번호·진행바는 `stocks.css` 의 768px 미만 회전 카드 규칙과 같은 모양을 768px 이상에 준다. */
.sh .quote-sets { display: none; }

@media (min-width: 768px) {
    .sh .quote-rotator-row { display: none; }

    .sh .quote-sets {
        display: block;
        position: relative;
        overflow: hidden;
    }

    .sh .quote-sets-track {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    .sh .quote-sets-track::-webkit-scrollbar { display: none; }

    .sh .quote-sets-track > * {
        flex: 0 0 100%;
        min-width: 0;
        scroll-snap-align: start;
    }

    .sh .quote-sets .rotator-head {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.25rem;
        padding-inline: var(--space-1, 0.25rem);
        margin-block-end: 0.25rem;
    }

    .sh .quote-sets .rotator-count {
        display: inline;
        font-size: 0.6875rem;
        font-weight: 600;
        color: var(--bae-text-dim);
        font-variant-numeric: tabular-nums;
    }

    /* 숫자 옆 작은 화살표 — `.c-btn` 은 터치 타깃 36px 이라 여기서만 줄인다(넓은 화면 전용이다). */
    .sh .quote-sets .c-btn {
        min-block-size: 1.25rem;
        border: 0;
        border-radius: 0.375rem;
    }

    .sh .quote-sets .c-btn:hover { background: var(--bae-surface); }

    .sh .quote-sets .c-btn .c-ico {
        inline-size: 0.875rem;
        block-size: 0.875rem;
    }

    .sh .quote-sets .rotator-bar {
        display: block;
        block-size: 2px;
        margin-block-start: 0.375rem;
        border-radius: 1px;
        background: rgba(255, 255, 255, 0.05);
        overflow: hidden;
    }

    .sh .quote-sets .rotator-bar > i {
        display: block;
        inline-size: 0;
        block-size: 100%;
        background: var(--bae-accent);
        opacity: 0.75;
    }

    .sh .quote-sets.rotator-running .rotator-bar > i {
        animation: quote-sets-fill var(--rotator-dur, 6s) linear forwards;
    }

    /* 세트가 하나뿐이면 번호·진행바를 숨기되 자리는 남긴다 — 세트 수가 바뀌어도 아래가 밀리지 않게. */
    .sh .quote-sets.rotator-single .rotator-bar > i,
    .sh .quote-sets.rotator-single .c-btn { visibility: hidden; }
}

@keyframes quote-sets-fill {
    to { inline-size: 100%; }
}

/* 태블릿 세로(768~1023px)는 칸이 125px 남짓이라 스파크라인이 뭉개진다 — 접고 숫자만 둔다. */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .sh .quote-spark { display: none; }
    .sh .quote-card { padding: 0.5rem 0.625rem; }
    .sh .quote-card-price { font-size: 1rem; }
}

/* 넓은 화면에서만 카드 모양을 덮는다 — 모바일은 회전 카드(`stocks.css` 768px 미만)가 따로 그린다. */
@media (min-width: 768px) {
    .sh .quote-card {
        border-color: transparent;
        border-radius: 0.75rem;
        background: var(--sh-card);
    }

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

/* ── 본문 두 칸 ──────────────────────────────────────────────────── */
/* `quotes.css` 가 1024px 미만에서 한 칸으로 접는다 — 같은 경계를 쓴다(2026-10-12 전엔 1200/1201px). */
.sh-grid {
    gap: var(--sh-gap);
}

@media (min-width: 1024px) {
    .sh-grid { grid-template-columns: minmax(0, 1fr) 20rem; }

    /* 두 칸의 바닥을 맞춘다 — 왼쪽 칸을 줄 높이까지 늘이고 히트맵 판이 남는 높이를 채운다
       (2026-10-07 사용자 지적 "하단 라인이 안 맞잖아"). 오른쪽 칸 길이는 TOP 10·인사이트·공시
       내용에 따라 달라서 고정 높이로는 못 맞춘다.
       ⚠️ 4:3(`quotes.css`)은 **최소 높이**로 남는다 — 판은 늘기만 하고 줄지 않는다.
          판 높이가 바뀌면 `quotes.js` 가 `ResizeObserver` 로 타일을 다시 깐다. */
    .sh-grid > .quotes-container { align-self: stretch; }
    .sh-grid .heatmap-section {
        display: flex;
        flex-direction: column;
        flex: 1 0 auto;
    }
    .sh-grid .heatmap-box { flex: 1 0 auto; }
}

/* ── 순위 표 ─────────────────────────────────────────────────────── */
.sh-rank__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
}

.sh-rank__head .sh-card__title { margin-inline-end: auto; }

/* 기준·시장 버튼 묶음(segmented) — 종목 상세의 봉 단위 묶음과 같은 모양. */
.sh-seg {
    display: flex;
    gap: 0.125rem;
    padding: 0.1875rem;
    border-radius: 0.625rem;
    background: var(--bae-bg-alt);
}

.sh-seg button {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    block-size: 2rem;
    padding: 0 0.625rem;
    border: 0;
    border-radius: 0.5rem;
    background: none;
    color: var(--bae-text-dim);
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s, background-color 0.15s;
}

.sh-seg button:hover { color: var(--bae-text-primary); }

.sh-seg button[aria-pressed="true"] {
    background: var(--bae-surface-hover);
    color: var(--bae-text-primary);
}

.sh-seg .c-ico,
.sh-seg .market-symbol {
    flex: none;
    inline-size: 1rem;
    block-size: 1rem;
}

/* 시장 아이콘의 원판은 히트맵 탭에서 채워 쓰는 모양이다 — 여기선 선만. */
.sh-seg .market-symbol-disc { fill: none; }

.sh-rank__note {
    margin: var(--space-2, 0.5rem) 0 var(--space-3, 0.75rem);
    padding-inline: var(--space-1, 0.25rem);
    color: var(--bae-text-dim);
    font-size: 0.8125rem;
}

.sh-rank__list {
    margin: 0;
    padding: 0;
    list-style: none;
    transition: opacity 0.15s;
}

/* 새 목록이 올 때까지 옛 것을 흐리게 남긴다 — 비우면 표 높이가 출렁인다. */
.sh-rank__list.is-stale { opacity: 0.45; }

/* 첫 목록이 올 때까지 10행 높이를 잡는다(실측 행 56·57px) — 비워 두면 아래 시장 지도가
   목록이 올 때 500px 넘게 밀려 내려갔다(2026-09-23 "움찔"). */
.sh-rank__list.is-loading { min-block-size: 35.125rem; }

@media (min-width: 48rem) {
    .sh-rank__list.is-loading { min-block-size: 34.5rem; }
}

.sh-rank__empty {
    padding: var(--space-6, 2rem) var(--space-4, 1rem);
    color: var(--bae-text-dim);
    font-size: 0.875rem;
    text-align: center;
}

/*
 * 행 — 좁은 화면(기본):         넓은 화면(≥ 48rem):
 *   n  이름            현재가       n  이름   현재가  등락률  기준값
 *   n  코드 · 기준값   등락률       n  코드
 * `.sh-rank__sub` 는 좁은 화면에서 "코드 · 기준값" 한 줄이고, 넓은 화면에서는
 * `display: contents` 로 풀려 두 조각이 제 칸으로 간다.
 */
.sh-rank__row {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr) auto;
    grid-template-areas:
        "n nm  px"
        "n sub ch";
    align-items: baseline;
    column-gap: var(--space-3, 0.75rem);
    row-gap: 0.125rem;
    padding: 0.625rem var(--space-2, 0.5rem);
    border-radius: 0.625rem;
    color: var(--bae-text-primary);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    transition: background-color 0.15s;
}

.sh-rank__row:hover,
.sh-rank__row:focus-visible { background: var(--bae-surface); }

.sh-rank__n {
    grid-area: n;
    align-self: center;
    color: var(--bae-text-dim);
    font-size: 0.9375rem;
    font-weight: 700;
    text-align: center;
}

.sh-rank__nm {
    grid-area: nm;
    overflow: hidden;
    font-size: 0.9375rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sh-rank__sub {
    grid-area: sub;
    display: flex;
    gap: var(--space-2, 0.5rem);
    min-inline-size: 0;
    color: var(--bae-text-dim);
    font-size: 0.75rem;
}

.sh-rank__sub > * + *::before {
    content: "·";
    margin-inline-end: var(--space-2, 0.5rem);
}

.sh-rank__px {
    grid-area: px;
    font-size: 0.9375rem;
    font-weight: 700;
    text-align: end;
    white-space: nowrap;
}

.sh-rank__ch {
    grid-area: ch;
    font-size: 0.8125rem;
    font-weight: 700;
    text-align: end;
    white-space: nowrap;
}

/* 머리줄은 표 모양일 때만 */
.sh-rank__cols { display: none; }

@media (min-width: 48rem) {
    .sh-rank__row,
    .sh-rank__cols {
        grid-template-columns: 1.75rem minmax(0, 1fr) 8rem 6rem 7rem;
    }

    .sh-rank__row {
        grid-template-areas:
            "n nm px ch mt"
            "n cd px ch mt";
        align-items: center;
    }

    .sh-rank__sub { display: contents; }
    .sh-rank__sub > * + *::before { content: none; }

    .sh-rank__cd {
        grid-area: cd;
        color: var(--bae-text-dim);
        font-size: 0.75rem;
    }

    .sh-rank__mt {
        grid-area: mt;
        color: var(--bae-text-muted);
        font-size: 0.875rem;
        font-weight: 600;
        text-align: end;
    }

    .sh-rank__px,
    .sh-rank__ch { font-size: 0.9375rem; }

    .sh-rank__cols {
        display: grid;
        column-gap: var(--space-3, 0.75rem);
        padding: 0 var(--space-2, 0.5rem) var(--space-2, 0.5rem);
        border-block-end: 1px solid color-mix(in srgb, var(--bae-border) 60%, transparent);
        margin-block-end: var(--space-1, 0.25rem);
        color: var(--bae-text-dim);
        font-size: 0.75rem;
        font-weight: 600;
    }

    .sh-rank__cols > :first-child { grid-column: 1 / 3; padding-inline-start: 2.5rem; }
    .sh-rank__cols > :not(:first-child) { text-align: end; }
}

/* ── 오른쪽: 포트폴리오 TOP 10 ───────────────────────────────────── */
/* 모양만 카드로 맞춘다 — 목록·미터·회전 카드는 `stocks.css` 그대로다. */
.sh .top10-section {
    padding: var(--sh-pad);
    border: 0;
    border-radius: var(--sh-radius);
    background: var(--sh-card);
}

.sh .top10-section h3 {
    margin-inline: 0;
    font-size: 1.125rem;
    font-weight: 700;
}

.sh-portfolio-cta {
    justify-content: center;
    gap: var(--space-2, 0.5rem);
    inline-size: 100%;
    aspect-ratio: auto;          /* 꽉 채우는 막대 — 아이콘만 남아도 정사각으로 만들지 않는다 */
    margin-block-start: var(--space-3, 0.75rem);
}

/* ── 오른쪽: 최신 인사이트 ───────────────────────────────────────── */
.sh-insights__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2, 0.5rem);
    margin-block-end: var(--space-2, 0.5rem);
}

.sh-insights__more {
    color: var(--bae-text-dim);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
}

.sh-insights__more:hover { color: var(--bae-text-primary); }

.sh-insights__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sh-insights__list a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--space-3, 0.75rem);
    padding: 0.625rem var(--space-2, 0.5rem);
    border-radius: 0.625rem;
    color: var(--bae-text-primary);
    text-decoration: none;
}

.sh-insights__list a:hover,
.sh-insights__list a:focus-visible { background: var(--bae-surface); }

.sh-insights__list li + li { border-block-start: 1px solid color-mix(in srgb, var(--bae-border) 50%, transparent); }

/* 긴 분석 제목이라 두 줄에서 자른다 — 말줄임은 안쪽 span 에(그리드 아이템에 걸면 줄을 안 자른다). */
.sh-insights__title {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.sh-insights__list time {
    color: var(--bae-text-dim);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

/* ── 최근 공시 — 인사이트 카드 모양에 종목명 한 줄을 얹는다 ───────── */
.sh-disc__body {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-inline-size: 0;
}

.sh-disc__name {
    color: var(--bae-text-dim);
    font-size: 0.75rem;
    font-weight: 700;
}

.sh-disc__cat {
    margin-inline-end: 0.375rem;
    padding: 0.0625rem 0.3125rem;
    border-radius: 0.25rem;
    background: rgba(var(--bae-accent-rgb), 0.16);
    color: var(--bae-accent-fg);
    font-size: 0.6875rem;
    font-style: normal;
    font-weight: 700;
}

.sh-disc__tag {
    margin-inline-end: 0.375rem;
    padding: 0.0625rem 0.3125rem;
    border-radius: 0.25rem;
    background: var(--bae-bg-alt);
    color: var(--bae-text-dim);
    font-size: 0.6875rem;
    font-style: normal;
    font-weight: 700;
}

/* AI 요약 — 두 줄까지. 전체는 종목 상세의 공시 카드에서 펼쳐 읽는다. */
.sh-disc__sum {
    display: -webkit-box;
    overflow: hidden;
    color: var(--bae-text-dim);
    font-size: 0.75rem;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.sh-disc__ai {
    margin-inline-end: 0.375rem;
    padding: 0 0.3125rem;
    border: 1px solid color-mix(in srgb, var(--bae-accent-fg) 45%, transparent);
    border-radius: 0.25rem;
    color: var(--bae-accent-fg);
    font-size: 0.6875rem;
    font-style: normal;
    font-weight: 700;
}