/* ===========================================
   종목 상세(`/stocks/view`) — 2026-09-23 토스증권 PC 처럼
   ===========================================
   `stocks.css` **뒤에** 싣는다(레이어 밖, 같은 특이도면 뒤가 이긴다). 새 뼈대는 `sd-*`
   클래스라 옛 규칙과 부딪히지 않고, 옛 클래스를 그대로 쓰는 조각(차트 안쪽의
   `.chart-wrapper`·`.chart-type-btn`, 바텀시트 `.execution-overlay*`)만 `.sd` 로 좁혀 덮는다.

   ⚠️ 지수 상세(`/quotes/view`)는 아직 옛 마크업이라 `stocks.css` 의 `.stock-detail-*`·
      `.chart-controls` 를 그대로 쓴다 — 옛 규칙을 지우지 말 것(6단계에서 함께 옮긴다).

   원칙(토스증권 PC)
   · 테두리 대신 **바탕 한 단계**로 칸을 나눈다 — 카드 = 본문 바탕보다 한 단 밝게.
   · 숫자는 굵고 크게, 고정폭. 라벨은 흐리게 작게.
   · 등락 색은 대비를 맞춘 **글자 전용 토큰**(`--chart-*-text`)이 `.q-up`·`.q-down` 으로 온다.
*/

.sd {
    /* 카드 바탕: 본문(#202020)과 표면(#2B2B2B)의 중간. 등락 글자 대비는 두 바탕 사이라
       최저 5.96(빨강 on #2B2B2B) 이상이다. 행 호버는 표면색. */
    --sd-card: color-mix(in srgb, var(--bae-surface) 50%, var(--bae-bg));
    --sd-radius: 1rem;
    --sd-pad: clamp(1rem, 0.7rem + 1vw, 1.5rem);

    display: grid;
    gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
    max-inline-size: 80rem;
    margin-inline: auto;
    padding-block: var(--space-3, 0.75rem) var(--space-6, 2rem);
}

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

/* ⚠️ 옛 `blog.css` 가 모든 div·section 에 clearfix `::after{content:"";display:table}` 를 준다.
      flex·grid 안에서는 그게 **빈 칸 하나**가 되어 `space-between` 이 값을 가운데로 밀고(시세의
      값이 오른쪽에 안 붙었다), 그리드에 빈 줄을 하나 더 만든다. 이 화면의 뼈대(`sd-*`)에서만 끈다
      — 차트 안쪽의 옛 조각(말풍선·스피너)은 제 가상 요소를 쓸 수 있다.
      버튼은 빼 둔다 — 터치에서 `::after` 가 누르는 자리(44px)를 맡는다(ui.css "터치 히트 영역").
      `:where` 안이라 특이도는 그대로다. */
.sd::after,
.sd :where([class^="sd-"]:not(.c-btn, .btn), [class*=" sd-"]:not(.c-btn, .btn))::after,
.sd-kv > div::after {
    content: none;
}

/* ⚠️ 옛 `blog.css` 가 1024px 이하에서 `section { display:flex }` 를 준다. 카드가 flex 가 되면
      차트 판의 `flex: 1 1 0%`(stocks.css) 가 높이를 무시해 모바일 차트가 171px 로 눌렸다. */
.sd-card { display: block; }
.sd-chart { display: flex; flex-direction: column; }

/* ── 머리: 이름 · 현재가 ──────────────────────────────────────── */
.sd-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "back id watch"
        "quote quote quote";
    align-items: center;
    column-gap: var(--space-3, 0.75rem);
    row-gap: var(--space-3, 0.75rem);
    padding-inline: var(--space-1, 0.25rem);
}

.sd-back { grid-area: back; }
.sd-watch { grid-area: watch; gap: var(--space-2, 0.5rem); }
.sd-id { grid-area: id; min-inline-size: 0; }
.sd-quote { grid-area: quote; }

.sd-name {
    margin: 0;
    overflow: hidden;
    color: var(--bae-text-primary);
    font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sd-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-2, 0.5rem);
    margin: 0.125rem 0 0;
    color: var(--bae-text-dim);
    font-size: 0.8125rem;
}

.sd-meta span + span::before {
    content: "·";
    margin-inline-end: var(--space-2, 0.5rem);
}

.sd-price {
    margin: 0;
    font-size: clamp(1.875rem, 1.45rem + 1.6vw, 2.625rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.sd-price small {
    margin-inline-start: 0.125em;
    font-size: 0.5em;
    font-weight: 700;
}

.sd-change {
    display: flex;
    gap: var(--space-2, 0.5rem);
    margin: var(--space-2, 0.5rem) 0 0;
    font-size: 0.9375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.sd-change__label {
    color: var(--bae-text-dim);
    font-weight: 600;
}

/* ── 본문: 차트 | 시세·체결 ────────────────────────────────────── */
.sd-body {
    display: grid;
    gap: inherit;
    align-items: start;
}

.sd-side {
    display: grid;
    gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
    min-inline-size: 0;
}

/* ⚠️ 위 기본 규칙은 아래 PC 미디어쿼리보다 **앞에** 둔다 — 뒤에 두면 `display: grid` 가 PC 의
   `flex` 를 덮어써, 남는 높이가 체결로 가지 않고 시세 카드 아래 빈칸으로 나뉜다. */
/* PC: 왼쪽 = 차트 + 종목 정보, 오른쪽 = 시세 + 체결.
   **왼쪽이 높이를 정한다** — 차트는 화면 높이(58vh)를 따르고, 오른쪽 체결 목록이 남는 높이를
   채우며 스크롤된다. (처음엔 차트가 오른쪽 칸 높이를 따라 늘게 했더니 1366×768 노트북에서 차트가
   797px 로 화면보다 커졌다.) 오른쪽이 더 길어지면 그만큼 차트가 늘어 빈칸이 생기지 않는다.
   ⚠️ 캔버스는 절대 위치다 — 캔버스 크기가 판을 밀면 "캔버스 높이 → 판 높이 → 캔버스 높이" 로
      물려 창을 줄여도 안 줄어든다. */
@media (min-width: 64rem) {
    .sd-body {
        grid-template-columns: minmax(0, 1fr) 22rem;
        grid-template-areas:
            "chart side"
            "info  side";
        grid-template-rows: 1fr auto;
        align-items: stretch;
    }

    .sd-chart { grid-area: chart; }
    .sd-info  { grid-area: info; }
    .sd-extra { grid-area: extra; }

    /* 실적·공시 카드는 DART 가 있는 종목에만 있다 — 없는 종목에 빈 줄을 두면 줄 간격만큼 아래가 빈다.
       ⚠️ 오른쪽 칸(시세·체결)은 **차트·종목 정보 옆까지만** 둔다. 실적·공시 옆까지 늘이면 체결 목록이
          1,600px 넘게 길어졌다(2026-09-29 사용자 지적). 차트 옆에서만 끝내면 시세(약 430px) 때문에
          오른쪽 칸이 차트보다 길어져 차트가 767px 로 늘고 1366×768 에서 화면 밖으로 나간다 — 그래서 종목 정보까지. */
    .sd-body:has(> .sd-extra) {
        grid-template-areas:
            "chart side"
            "info  side"
            "extra extra";
        grid-template-rows: 1fr auto auto;
    }

    /* 실적 | 공시 반반. 전체 폭 한 장씩이면 1,280px 로 늘어 막대가 듬성하고 제목 옆이 비었다(2026-09-29 사용자 지적).
       높이는 **실적이 정하고** 공시는 체결처럼 목록만 안에서 스크롤한다 — 공시 목록(10건 약 830px)이 줄 높이를
       정하면 실적 옆이 빈다. `contain: size` 가 목록의 높이 기여를 없앤다. */
    .sd-extra { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .sd-extra .sd-disc {
        display: flex;
        flex-direction: column;
    }

    .sd-extra .sd-disc__list {
        flex: 1 1 0;
        min-block-size: 0;
        overflow-y: auto;
        contain: size;
        scrollbar-width: thin;
        scrollbar-color: var(--bae-border) transparent;
    }

    /* 공시가 한 번에 4건 보이는 높이 — 16rem 에서는 3건이었다. */
    .sd-extra .sd-fin__plot { block-size: 20rem; }

    .sd-side {
        grid-area: side;
        display: flex;
        flex-direction: column;
    }

    .sd-exec {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-block-size: 0;
    }

    .sd-exec .sd-exec__body {
        flex: 1 1 0;
        min-block-size: 12rem;
        max-block-size: none;
    }

    /* 지수·환율 상세 — 종목 정보·체결이 없다. 오른쪽 "시세" 는 제 높이만큼만. */
    .sd-body--quote {
        grid-template-areas: "chart side";
        grid-template-rows: auto;
    }

    .sd-body--quote .sd-side { align-self: start; }
}

.sd-card {
    min-inline-size: 0;
    padding: var(--sd-pad);
    border-radius: var(--sd-radius);
    background: var(--sd-card);
}

.sd-card__head {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    margin-block-end: var(--space-3, 0.75rem);
}

.sd-card__title {
    margin: 0;
    color: var(--bae-text-primary);
    font-size: 1.125rem;
    font-weight: 700;
}

.sd-card__sub {
    color: var(--bae-text-dim);
    font-size: 0.8125rem;
}

.sd-card__action { margin-inline-start: auto; }

/* ── 차트 칸 ───────────────────────────────────────────────────── */
.sd-chart__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2, 0.5rem);
    margin-block-end: var(--space-3, 0.75rem);
}

/* 봉 단위·차트 모양 — 한 덩어리로 보이는 버튼 묶음(segmented). 켜진 것만 한 단 밝다. */
.sd-periods,
.sd-charttype,
.sd-disc__kinds {
    display: flex;
    gap: 0.125rem;
    max-inline-size: 100%;
    padding: 0.1875rem;
    border-radius: 0.625rem;
    background: var(--bae-bg-alt);
}

/* 320px 폰에서는 여덟 개가 한 줄에 안 들어간다 — 접지 않고 가로로 민다. */
.sd-periods {
    overflow-x: auto;
    scrollbar-width: none;
}

.sd-periods::-webkit-scrollbar { display: none; }

.sd-periods button,
.sd-charttype .chart-type-btn,
.sd-disc__kinds button {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex: 0 0 auto;
    min-inline-size: 0;
    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;
}

.sd-periods button:hover,
.sd-charttype .chart-type-btn:hover,
.sd-disc__kinds button:hover {
    background: none;
    color: var(--bae-text-primary);
}

.sd-periods button[aria-pressed="true"],
.sd-charttype .chart-type-btn[aria-pressed="true"],
.sd-disc__kinds button[aria-pressed="true"] {
    background: var(--bae-surface-hover);
    color: var(--bae-text-primary);
}

/* 360px 안팎에서 여덟 개가 한 줄에 들어가게 여백을 줄인다(320px 은 그래도 민다). */
@media (max-width: 39.99rem) {
    .sd-periods button { padding-inline: 0.5rem; }
}

.sd-charttype .chart-type-btn .c-ico {
    inline-size: 1rem;
    block-size: 1rem;
}

/* 차트 판 — 카드가 바탕을 가지므로 판 자체의 바탕·여백은 걷는다. 높이는 화면 높이를 따라가되
   PC 에서 오른쪽 칸(시세+체결)과 비슷한 높이가 되게 38rem 에서 멈춘다. */
.sd .chart-wrapper {
    flex: 1 1 0;
    block-size: auto;
    min-block-size: clamp(20rem, 58vh, 38rem);
    max-block-size: none;
    padding: 0;
    border-radius: 0;
    background: none;
}

.sd .chart-wrapper canvas {
    position: absolute;
    inset: 0;
}

/* 폰에선 판만 카드 여백을 넘어 넓힌다 — 카드 머리(기간 버튼)의 줄은 그대로 둔다. */
@media (max-width: 39.99rem) {
    .sd .chart-wrapper { width: auto; margin-inline: calc(0.25rem - var(--sd-pad)); }
}

.sd .chart-settings-btn .c-ico,
.sd .chart-indicator-help-btn .c-ico {
    inline-size: 0.875rem;
    block-size: 0.875rem;
}

/* ── 시세 ───────────────────────────────────────────────────────── */
.sd-kv {
    display: grid;
    /* 오른쪽 칸(22rem)에서는 한 줄씩, 넓은 카드에서는 여러 열로. */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
    gap: 0 var(--space-6, 2rem);
    margin: 0;
}

.sd-kv > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3, 0.75rem);
    padding-block: 0.4375rem;
}

.sd-kv dt {
    flex: 0 0 auto;
    color: var(--bae-text-dim);
    font-size: 0.875rem;
}

.sd-kv dd {
    min-inline-size: 0;
    margin: 0;
    overflow: hidden;
    color: var(--bae-text-primary);
    font-size: 0.9375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: end;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 넓은 카드(종목 정보)는 줄마다 얇은 선을 둔다 — 열이 여럿이라 눈이 줄을 잃는다. */
.sd-kv--wide > div {
    padding-block: var(--space-3, 0.75rem);
    border-block-end: 1px solid color-mix(in srgb, var(--bae-border) 60%, transparent);
}

.sd-strength,
.sd-range {
    margin-block-start: var(--space-3, 0.75rem);
    padding-block-start: var(--space-4, 1rem);
    border-block-start: 1px solid color-mix(in srgb, var(--bae-border) 60%, transparent);
}

.sd-strength {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.sd-strength__label {
    color: var(--bae-text-dim);
    font-size: 0.875rem;
}

.sd-strength__val {
    font-size: 1.0625rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.sd-strength__val small {
    margin-inline-start: 0.375rem;
    font-size: 0.75rem;
    font-weight: 700;
}

/* 52주 범위 — 트랙 위 표시점. 방향이 아니라 위치라 중립색(흰색)이다. */
.sd-range__head,
.sd-range__vals {
    display: flex;
    justify-content: space-between;
    font-size: 0.8125rem;
}

.sd-range__head {
    margin-block-end: var(--space-2, 0.5rem);
    color: var(--bae-text-dim);
}

.sd-range__vals {
    margin-block-start: var(--space-2, 0.5rem);
    color: var(--bae-text-muted);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.sd-range__track {
    position: relative;
    block-size: 0.375rem;
    border-radius: 999px;
    background: var(--bae-surface-hover);
}

.sd-range__track > i {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: calc(var(--pos, 50) * 1%);
    inline-size: 0.75rem;
    block-size: 0.75rem;
    border-radius: 50%;
    background: var(--bae-text-primary);
    box-shadow: 0 0 0 3px var(--sd-card);
    transform: translate(-50%, -50%);
}

/* ── 체결 ───────────────────────────────────────────────────────── */
.sd-exec__head,
.sd-exec__row {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 0.8fr) 2.25rem;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    padding-inline: var(--space-2, 0.5rem);
}

/* 머리줄과 몸통이 **같은 스크롤바 자리**를 갖게 한다 — 몸통에만 스크롤바가 생기면 칸이 밀린다.
   (전에는 JS 가 스크롤바 폭을 재서 머리줄 패딩을 맞췄다. `scrollbar-gutter` 가 대신한다.) */
.sd-exec__head,
.sd-exec__body {
    scrollbar-gutter: stable;
}

.sd-exec__head {
    overflow-y: hidden;
    padding-block-end: var(--space-2, 0.5rem);
    border-block-end: 1px solid color-mix(in srgb, var(--bae-border) 60%, transparent);
    color: var(--bae-text-dim);
    font-size: 0.75rem;
    font-weight: 600;
}

.sd-exec__head span:not(:first-child) { text-align: end; }

.sd-exec__body {
    max-block-size: 20rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--bae-border) transparent;
}

.sd-exec__row {
    padding-block: 0.4375rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

.sd-exec__row:hover { background: var(--bae-surface); }

.sd-exec__t { color: var(--bae-text-dim); font-size: 0.8125rem; }

.sd-exec__p,
.sd-exec__v,
.sd-exec__k {
    overflow: hidden;
    text-align: end;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sd-exec__p { color: var(--bae-text-primary); font-weight: 700; }
.sd-exec__k { font-size: 0.8125rem; font-weight: 700; }

/* 매수 빨강 · 매도 파랑(한국 관례). 수량과 구분 글자에만 칠한다 — 가격은 중립. */
.sd-exec__row.is-buy :is(.sd-exec__v, .sd-exec__k) { color: var(--chart-up-text); }
.sd-exec__row.is-sell :is(.sd-exec__v, .sd-exec__k) { color: var(--chart-down-text); }

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

.sd-exec__more { display: none; }

/* 좁은 화면: 몇 건만 보이고 "체결 전체 보기" 가 바텀시트(`#executionOverlay`)를 연다.
   ⚠️ 시트는 `stocks.css` 가 768px 이하에서만 켠다 — 같은 경계(48rem)를 쓴다. */
@media (max-width: 47.99rem) {
    .sd-exec .sd-exec__body {
        max-block-size: none;
        overflow: visible;
    }

    .sd-exec .sd-exec__row:nth-child(n + 6) { display: none; }

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

    .execution-overlay-content .sd-exec__body {
        flex: 1;
        max-block-size: none;
        overflow-y: auto;
        overscroll-behavior: contain;   /* 끝에서 당겨도 뒤 문서·새로고침으로 넘어가지 않게 */
        -webkit-overflow-scrolling: touch;
    }
}

/* ── 투자 지표(종목 정보 카드 안) ──────────────────────────────── */
.sd-info__sub {
    display: flex;
    align-items: baseline;
    gap: var(--space-2, 0.5rem);
    margin: var(--space-5, 1.5rem) 0 0;
    color: var(--bae-text-primary);
    font-size: 0.9375rem;
    font-weight: 700;
}

.sd-info__sub span {
    color: var(--bae-text-dim);
    font-size: 0.8125rem;
    font-weight: 500;
}

/* ── 공시 ───────────────────────────────────────────────────────── */
.sd-disc__kinds { margin-inline-start: auto; }

.sd-disc__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sd-disc__list > li + li {
    border-block-start: 1px solid color-mix(in srgb, var(--bae-border) 60%, transparent);
}

/* 한 건 — 읽기 쉬운 원문이 있으면 펼치는 버튼, 없으면 DART 로 가는 링크(`stock_disclosures.js`). */
.sd-disc__row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    inline-size: 100%;
    padding: var(--space-3, 0.75rem) var(--space-2, 0.5rem);
    border: 0;
    border-radius: 0.5rem;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}

.sd-disc__row:hover { background: var(--bae-surface-hover); }

.sd-disc__chev {
    flex: 0 0 auto;
    align-self: center;
    color: var(--bae-text-dim);
    transition: transform 0.15s;
}

.sd-disc__row[aria-expanded="true"] .sd-disc__chev { transform: rotate(180deg); }

/* AI 요약 — 접혀 있을 땐 두 줄까지, 펼치면 전부. 25.dart 가 숫자를 원문과 대조해 통과한 것만 온다. */
.sd-disc__sum {
    display: -webkit-box;
    overflow: hidden;
    color: var(--bae-text-primary);
    font-size: 0.8125rem;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.sd-disc__row[aria-expanded="true"] .sd-disc__sum { display: block; }

.sd-disc__ai {
    margin-inline-end: 0.375rem;
    padding: 0.0625rem 0.375rem;
    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-weight: 700;
    white-space: nowrap;
}

/* 펼친 자리 — 정정 전 → 후, 핵심 사실(AI), 원문 항목·값 표 또는 본문, DART 링크. */
.sd-disc__panel {
    display: grid;
    gap: var(--space-2, 0.5rem);
    padding: 0 var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    font-size: 0.8125rem;
}

.sd-disc__panel[hidden] { display: none; }

.sd-disc__sub {
    margin: var(--space-1, 0.25rem) 0 0;
    color: var(--bae-text-dim);
    font-size: 0.75rem;
    font-weight: 700;
}

.sd-disc__pairs {
    display: grid;
    grid-template-columns: minmax(6rem, 2fr) 3fr;
    margin: 0;
    border: 1px solid color-mix(in srgb, var(--bae-border) 60%, transparent);
    border-radius: 0.5rem;
    overflow-wrap: anywhere;
}

.sd-disc__pairs > dt,
.sd-disc__pairs > dd {
    margin: 0;
    padding: 0.375rem 0.5rem;
    border-block-start: 1px solid color-mix(in srgb, var(--bae-border) 60%, transparent);
}

.sd-disc__pairs > dt:first-of-type,
.sd-disc__pairs > dd:first-of-type { border-block-start: 0; }

.sd-disc__pairs > dt {
    background: var(--bae-bg-alt);
    color: var(--bae-text-dim);
}

.sd-disc__pairs > dd {
    color: var(--bae-text-primary);
    font-variant-numeric: tabular-nums;
}

.sd-disc__pairs--ai { border-color: color-mix(in srgb, var(--bae-accent-fg) 35%, transparent); }

.sd-disc__pairs del { color: var(--bae-text-dim); }
.sd-disc__pairs ins { font-weight: 700; text-decoration: none; }

.sd-disc__body {
    margin: 0;
    color: var(--bae-text-primary);
    line-height: 1.6;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.sd-disc__note {
    margin: 0;
    color: var(--bae-text-dim);
}

.sd-disc__origin {
    justify-self: start;
    color: var(--bae-accent-fg);
    font-weight: 700;
}

.sd-disc__head {
    display: flex;
    align-items: baseline;
    gap: var(--space-2, 0.5rem);
    min-inline-size: 0;
}

.sd-disc__title {
    flex: 1 1 auto;
    min-inline-size: 0;
    color: var(--bae-text-primary);
    font-size: 0.9375rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* 분류 배지 — 무슨 종류의 일인지 먼저 읽히게. ⚠️ 빨강·파랑은 등락 전용이라 쓰지 않는다:
   주가에 직접 닿는 분류(실적·배당·자사주·자금·계약·M&A)는 보라(강조), 주의는 주황, 나머지는 중립. */
.sd-disc__cat {
    flex: 0 0 auto;
    padding: 0.0625rem 0.375rem;
    border-radius: 0.25rem;
    background: var(--bae-bg-alt);
    color: var(--bae-text-dim);
    font-size: 0.75rem;
    font-weight: 700;
}

.sd-disc__cat--earnings, .sd-disc__cat--periodic, .sd-disc__cat--dividend, .sd-disc__cat--buyback,
.sd-disc__cat--financing, .sd-disc__cat--contract, .sd-disc__cat--mna {
    background: rgba(var(--bae-accent-rgb), 0.16);
    color: var(--bae-accent-fg);
}

.sd-disc__cat--risk {
    background: rgba(var(--bae-warn-rgb), 0.16);
    color: var(--bae-warn);
}

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

/* 그날 등락률 — 장 마감 뒤 공시는 다음 거래일(`dart._effective_day`). */
.sd-disc__react {
    flex: 0 0 auto;
    font-size: 0.8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* 핵심 숫자 — 자사주 금액·주식 수, 지분 신고 보고자·증감. */
.sd-disc__detail {
    color: var(--bae-text-primary);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

/* 날짜 · 제출인 · 원문 제목 — 한 줄에서 자른다(원문은 참고용). */
.sd-disc__meta {
    overflow: hidden;
    color: var(--bae-text-dim);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 행정 공시(주총 소집·명부 폐쇄…)는 "전체" 에서만 보이고 흐리게. */
.sd-disc__list > li.is-muted { opacity: 0.55; }

/* 무한 스크롤 끝 표시 — 보이면 다음 쪽을 받는다(`stock_disclosures.js`). */
.sd-disc__list > li.sd-disc__sentinel {
    block-size: 1px;
    border: 0;
}

.sd-disc__kinds button[hidden] { display: none; }

/* 실적·공시 묶음 — 좁은 화면에서는 본문처럼 한 줄씩 쌓인다. */
.sd-extra {
    display: grid;
    gap: inherit;
    min-inline-size: 0;
}

/* ── 실적 ───────────────────────────────────────────────────────── */
/* 높이를 처음부터 잡아 둔다 — 데이터가 오기 전후로 아래 공시 카드가 밀리지 않게. */
.sd-fin__plot {
    position: relative;
    block-size: 13rem;
}

.sd-fin__plot canvas {
    position: absolute;
    inset: 0;
}