/* ============================================================
   hasri-explorer.css — HASRI AI Explorer 페이지
   ─ 검색박스 + 8개 카테고리 / 27개 전략 질문 탐색 화면
   ─ 다크 네이비 톤(HASRI AI 통일), 효율적 멀티컬럼 그리드
   ============================================================ */

/* ── 스크롤은 부모 .page-content 가 담당 (자체 스크롤 X) ──
   ★ Explorer 활성 시 .page-content 의 24px 패딩 제거 →
     sticky 헤더가 화면 최상단(top:0)에 정확히 붙도록 */
.page-content:has(#page-hasri-explorer.active) {
    padding: 0;
    /* ★ Explorer 활성 시 스크롤 컨테이너(.page-content) 자체에 동일 배경을 깔아
       콘텐츠가 짧아도 화면 하단까지 같은 색으로 통일 (상단 파랑 / 하단 검정 분리 방지) */
    background:
        radial-gradient(1200px 600px at 20% -10%, rgba(56,89,158,.18), transparent 60%),
        radial-gradient(900px 500px at 95% 0%, rgba(139,92,246,.12), transparent 55%),
        #0a1426;
}

#page-hasri-explorer {
    /* height:100%/overflow 제거 — 이중 스크롤 방지, 부모 스크롤 그대로 사용 */
    min-height: 100%;
}

.hxp-wrap {
    /* 자체 스크롤 없음(overflow:visible) → sticky 헤더는 부모 .page-content 기준으로 고정.
       이중 스크롤/오프셋 오차 제거 */
    overflow: visible;
    min-height: 100%;
    background:
        radial-gradient(1200px 600px at 20% -10%, rgba(56,89,158,.18), transparent 60%),
        radial-gradient(900px 500px at 95% 0%, rgba(139,92,246,.12), transparent 55%),
        #0a1426;
    padding: 0 0 60px;
}

/* ────────────────────────────────────────────────
   상단 검색 헤더
──────────────────────────────────────────────── */
.hxp-hero {
    position: sticky;
    top: 0;
    z-index: 30;
    padding: 26px 32px 18px;
    border-bottom: 1px solid rgba(99,179,237,.16);
    /* 불투명 배경 — 아래 카드가 비쳐 보이지 않도록 */
    background:
        linear-gradient(180deg, #0e1d34 0%, #0c1a30 100%);
    box-shadow: 0 10px 28px -8px rgba(0,0,0,.55);
    transition: padding .25s ease;
}

/* ── 스크롤 시 축소 모드: 브랜드/설명 숨기고 검색창+칩만 ── */
.hxp-hero.is-compact {
    padding: 12px 32px 12px;
}
.hxp-hero .hxp-brand,
.hxp-hero .hxp-hero-desc {
    overflow: hidden;
    transition: max-height .25s ease, opacity .2s ease, margin .25s ease;
    max-height: 80px;
    opacity: 1;
}
.hxp-hero.is-compact .hxp-brand,
.hxp-hero.is-compact .hxp-hero-desc {
    max-height: 0;
    opacity: 0;
    margin: 0;
    pointer-events: none;
}
.hxp-hero .hxp-search-box {
    transition: margin .25s ease;
}
.hxp-hero.is-compact .hxp-chips {
    margin-top: 10px;
}
.hxp-hero-inner {
    max-width: 1320px;
    margin: 0 auto;
}
.hxp-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.hxp-brand-icon { font-size: 30px; }
.hxp-brand-title {
    font-size: 27px;
    font-weight: 800;
    color: #eef4ff;
    letter-spacing: -0.5px;
}
.hxp-brand-sub {
    font-size: 12px;
    font-weight: 600;
    color: #7dd3fc;
    background: rgba(56,189,248,.12);
    border: 1px solid rgba(56,189,248,.28);
    padding: 3px 9px;
    border-radius: 999px;
}
.hxp-hero-desc {
    color: #9fb3cf;
    font-size: 13.5px;
    line-height: 1.6;
    margin: 0 0 18px;
    max-width: 760px;
}
.hxp-hero-desc b { color: #cfe0f7; font-weight: 700; }

/* 검색박스 */
.hxp-search-box {
    position: relative;
    max-width: 620px;
}
.hxp-search-box .hxp-search-icon {
    position: absolute;
    left: 16px; top: 25px;          /* input(50px) 세로 중앙 고정 — 드롭다운 펼쳐도 흔들림 없음 */
    transform: translateY(-50%);
    color: #5b7fb0;
    font-size: 15px;
    pointer-events: none;
    z-index: 2;
}
.hxp-search-box input {
    width: 100%;
    height: 50px;
    padding: 0 16px 0 44px;
    background: #0e1d35;
    border: 1px solid #284a6e;
    border-radius: 12px;
    color: #e6eefc;
    font-size: 15px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.hxp-search-box input::placeholder { color: #4a6385; }
.hxp-search-box input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,.14);
}

/* ────────────────────────────────────────────────
   검색 자동완성 드롭다운 (검색창 아래 떠 있음 — 카드 레이아웃 불변)
──────────────────────────────────────────────── */
.hxp-suggest {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 60;
    max-height: 360px;
    overflow-y: auto;
    background: #0d1c33;
    border: 1px solid #2a4a72;
    border-radius: 12px;
    box-shadow: 0 18px 44px -10px rgba(0,0,0,.7);
    padding: 6px;
    /* 닫힘 상태 */
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    visibility: hidden;
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.hxp-suggest.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
}
.hxp-suggest-head {
    padding: 6px 12px 8px;
    font-size: 11.5px;
    font-weight: 700;
    color: #6b86a8;
    letter-spacing: .2px;
}

/* 결과 항목 */
.hxp-suggest-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    background: transparent;
    border: 0;
    border-radius: 9px;
    color: #dce7f7;
    font-size: 14px;
    cursor: pointer;
    transition: background .12s;
}
.hxp-suggest-item:hover,
.hxp-suggest-item:focus-visible {
    background: rgba(59,130,246,.16);
    outline: none;
}
.hxp-suggest-item .hxp-suggest-cat {
    flex-shrink: 0;
    font-size: 11.5px;
    font-weight: 700;
    color: #8fb0d8;
    background: rgba(99,179,237,.1);
    border: 1px solid rgba(99,179,237,.18);
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
.hxp-suggest-item .hxp-suggest-q {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
.hxp-suggest-item .hxp-suggest-q mark {
    background: rgba(250,204,21,.28);
    color: #ffe27a;
    padding: 0 1px;
    border-radius: 3px;
}
.hxp-suggest-item .hxp-suggest-tag {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    color: #6b86a8;
    white-space: nowrap;
}

/* 결과 없음 안내 */
.hxp-suggest-empty {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 18px 20px;
    color: #9fb3cf;
}
.hxp-suggest-empty i {
    font-size: 26px;
    color: #4a6fa5;
    flex-shrink: 0;
}
.hxp-suggest-empty p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.65;
}

/* ────────────────────────────────────────────────
   카테고리 빠른 필터 칩 (스크롤 점프)
──────────────────────────────────────────────── */
.hxp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
.hxp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    background: rgba(20,36,62,.7);
    border: 1px solid rgba(99,179,237,.18);
    border-radius: 999px;
    color: #b8cbe6;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.hxp-chip:hover {
    border-color: rgba(99,179,237,.5);
    color: #eef4ff;
    transform: translateY(-1px);
}
.hxp-chip.is-active {
    background: rgba(59,130,246,.22);
    border-color: rgba(99,179,237,.65);
    color: #eef4ff;
    box-shadow: 0 0 0 1px rgba(99,179,237,.4) inset;
}
.hxp-chip .hxp-chip-count {
    font-size: 10.5px;
    color: #6b86a8;
    font-weight: 700;
}

/* ────────────────────────────────────────────────
   본문: 카테고리 2단 가로 그리드 레이아웃
   ─ CSS Grid → 각 카드 위치가 명확해 점프 오프셋 계산 정확
──────────────────────────────────────────────── */
.hxp-body {
    max-width: 1320px;
    margin: 0 auto;
    padding: 24px 32px 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;   /* 카드 높이 제각각이어도 상단 정렬 */
}
@media (max-width: 820px) {
    .hxp-body { grid-template-columns: 1fr; padding: 20px 16px 0; }
}

/* 카테고리 카드 */
.hxp-cat {
    width: 100%;
    /* sticky 헤더 높이만큼 여백 확보 → 점프 시 카드 상단(제목)이 헤더에 안 가림 */
    scroll-margin-top: var(--hxp-header-h, 120px);
    background: linear-gradient(180deg, rgba(17,32,58,.92), rgba(12,24,44,.92));
    border: 1px solid rgba(99,179,237,.14);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color .18s, box-shadow .18s;
}
.hxp-cat:hover {
    border-color: rgba(99,179,237,.3);
    box-shadow: 0 10px 34px rgba(0,0,0,.32);
}

/* 카테고리 헤더 */
.hxp-cat-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 15px 16px 13px;
    border-bottom: 1px solid rgba(99,179,237,.1);
    position: relative;
}
.hxp-cat-head::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--cat-accent, #3b82f6);
}
.hxp-cat-emoji {
    font-size: 21px;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: var(--cat-accent-bg, rgba(59,130,246,.14));
    flex-shrink: 0;
}
.hxp-cat-titles { flex: 1; min-width: 0; }
.hxp-cat-name {
    font-size: 15px;
    font-weight: 800;
    color: #eef4ff;
    letter-spacing: -0.3px;
    line-height: 1.2;
}
.hxp-cat-tagline {
    font-size: 11.5px;
    color: #8ba3c4;
    margin-top: 2px;
}
.hxp-cat-badge {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--cat-accent, #60a5fa);
    background: var(--cat-accent-bg, rgba(59,130,246,.12));
    border: 1px solid var(--cat-accent-bd, rgba(59,130,246,.28));
    padding: 3px 8px;
    border-radius: 999px;
    flex-shrink: 0;
}

/* 질문 리스트 */
.hxp-q-list {
    padding: 8px 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.hxp-q {
    display: flex;
    align-items: center;          /* 한 줄 수직 가운데 정렬 */
    gap: 9px;
    padding: 9px 11px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .14s, transform .14s;
    border: 1px solid transparent;
}
.hxp-q:hover {
    background: rgba(56,89,158,.16);
    border-color: rgba(99,179,237,.18);
}
.hxp-q-mark {
    color: var(--cat-accent, #60a5fa);
    font-size: 12px;
    margin-top: 0;
    flex-shrink: 0;
}
/* 질문 본문 — 한 줄로 제한 + 말줄임 */
.hxp-q-body {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}
.hxp-q-text {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: #dbe6f5;
    line-height: 1.4;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 메타(태그·API) — 같은 줄 오른쪽 고정 */
.hxp-q-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 0;
    margin-left: 8px;
    flex-shrink: 0;
}
.hxp-q-tag {
    font-size: 10px;
    color: #8aa6c8;
    background: rgba(30,48,76,.7);
    border: 1px solid rgba(99,179,237,.14);
    padding: 2px 6px;
    border-radius: 5px;
    font-weight: 600;
}
/* ★ sup-3 시그널 태그 — 표 안 플래그(쌍끌이/개미털기형)와 동일 색계열 */
.hxp-q-tag.is-both {
    color: #93c5fd;
    background: rgba(56,189,248,.1);
    border-color: rgba(96,165,250,.3);
}
.hxp-q-tag.is-shake {
    color: #fda4af;
    background: rgba(244,63,94,.1);
    border-color: rgba(251,113,133,.3);
}
/* API 태그 (모노스페이스) */
.hxp-q-api {
    font-size: 10px;
    color: #7dd3fc;
    background: rgba(56,189,248,.1);
    border: 1px solid rgba(56,189,248,.22);
    padding: 2px 6px;
    border-radius: 5px;
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 600;
}
/* 아직 API 미연결 표시 */
.hxp-q-api.pending {
    color: #fbbf24;
    background: rgba(251,191,36,.08);
    border-color: rgba(251,191,36,.22);
}
/* 실시간 연결 완료 표시 (녹색) */
.hxp-q-api.ready {
    color: #4ade80;
    background: rgba(74,222,128,.1);
    border-color: rgba(74,222,128,.28);
}
.hxp-q-arrow {
    color: #4a6385;
    font-size: 11px;
    margin-top: 3px;
    opacity: 0;
    transition: opacity .14s, transform .14s;
    flex-shrink: 0;
}
.hxp-q:hover .hxp-q-arrow {
    opacity: 1;
    transform: translateX(2px);
}

/* 필터형(회피용) 질문 강조 */
.hxp-q.is-filter .hxp-q-mark { color: #94a3b8; }
.hxp-q.is-avoid  .hxp-q-mark { color: #f87171; }

/* ────────────────────────────────────────────────
   하단 안내 푸터
──────────────────────────────────────────────── */
/* 하단 안내 — 한 줄 가로 배너 (가운데 줄바꿈 X, 좌우 자연스러운 흐름) */
.hxp-foot {
    max-width: 1320px;
    margin: 26px auto 0;
    padding: 16px 32px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;        /* 좁은 화면에서만 자연스럽게 줄바꿈 */
    border-top: 1px solid rgba(99,179,237,.1);
}
.hxp-foot-title {
    flex-shrink: 0;
    font-size: 13.5px;
    font-weight: 700;
    color: #b8cbe6;
    letter-spacing: -0.2px;
    white-space: nowrap;
}
.hxp-foot-title b { color: #eef4ff; font-weight: 800; }
.hxp-foot-sep {
    flex-shrink: 0;
    width: 1px;
    height: 14px;
    background: rgba(99,179,237,.22);
}
.hxp-foot-desc {
    flex: 1;
    min-width: 220px;
    color: #7d93b3;
    font-size: 13px;
    line-height: 1.6;
}

/* 카테고리 액센트 색상 변수 (per category) */
.cat-suply   { --cat-accent:#fb7185; --cat-accent-bg:rgba(251,113,133,.14); --cat-accent-bd:rgba(251,113,133,.3); }
.cat-broker  { --cat-accent:#a78bfa; --cat-accent-bg:rgba(167,139,250,.14); --cat-accent-bd:rgba(167,139,250,.3); }
.cat-change  { --cat-accent:#34d399; --cat-accent-bg:rgba(52,211,153,.14);  --cat-accent-bd:rgba(52,211,153,.3); }
.cat-value   { --cat-accent:#fbbf24; --cat-accent-bg:rgba(251,191,36,.14);  --cat-accent-bd:rgba(251,191,36,.3); }
.cat-break   { --cat-accent:#38bdf8; --cat-accent-bg:rgba(56,189,248,.14);  --cat-accent-bd:rgba(56,189,248,.3); }
.cat-cheap   { --cat-accent:#f472b6; --cat-accent-bg:rgba(244,114,182,.14); --cat-accent-bd:rgba(244,114,182,.3); }
.cat-risk    { --cat-accent:#fca5a5; --cat-accent-bg:rgba(252,165,165,.14); --cat-accent-bd:rgba(252,165,165,.3); }
.cat-filter  { --cat-accent:#94a3b8; --cat-accent-bg:rgba(148,163,184,.14); --cat-accent-bd:rgba(148,163,184,.3); }

/* 검색 하이라이트 (질문 필터링 시) */
.hxp-cat.hxp-hidden, .hxp-q.hxp-hidden { display: none; }
.hxp-q .hxp-hl { color: #fde68a; font-weight: 700; }

/* ════════════════════════════════════════════════
   전략 결과 모달 (hxr-)
════════════════════════════════════════════════ */
.hxr-modal {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.hxr-modal.is-open { display: flex; }
.hxr-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 10, 22, .72);
    backdrop-filter: blur(3px);
}
.hxr-dialog {
    position: relative;
    width: min(880px, 100%);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #0e1d34, #0b1729);
    border: 1px solid rgba(99,179,237,.18);
    border-radius: 18px;
    box-shadow: 0 30px 80px -20px rgba(0,0,0,.8);
    overflow: hidden;
    animation: hxrPop .22s ease;
}
@keyframes hxrPop {
    from { opacity: 0; transform: translateY(14px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* 헤더 */
.hxr-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid rgba(99,179,237,.12);
}
.hxr-head-titles { flex: 1; min-width: 0; }
.hxr-tag {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    color: #7dd3fc;
    background: rgba(56,189,248,.12);
    border: 1px solid rgba(56,189,248,.28);
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: 8px;
}
.hxr-title {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    color: #eef4ff;
    letter-spacing: -0.3px;
    line-height: 1.35;
}
.hxr-sub {
    margin: 6px 0 0;
    font-size: 12.5px;
    color: #8499b6;
    line-height: 1.6;
}
.hxr-close {
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 9px;
    border: 1px solid rgba(99,179,237,.18);
    background: rgba(20,36,62,.6);
    color: #9fb3cf;
    font-size: 15px;
    cursor: pointer;
    transition: all .15s;
}
.hxr-close:hover { background: rgba(244,114,182,.16); color: #fff; border-color: rgba(244,114,182,.4); }

/* 본문 (스크롤 영역) */
.hxr-body {
    padding: 20px 22px 24px;
    overflow-y: auto;
}

/* 로딩 / 에러 / 빈 상태 */
.hxr-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 48px 20px;
    text-align: center;
    color: #9fb3cf;
}
.hxr-state i { font-size: 30px; color: #5b86c4; }
.hxr-state.err i { color: #f87171; }
.hxr-state p { margin: 0; font-size: 14px; line-height: 1.6; }
.hxr-state .hxr-state-sub { font-size: 12px; color: #6b86a8; }
/* ★ v87·v89: 직전 영업일(stale) 폴백 안내 배너 — 결과 상단(다크 테마)에 노출 */
.hxr-stale-note {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 16px; padding: 11px 14px;
  background: linear-gradient(90deg, rgba(245,158,11,.16), rgba(245,158,11,.04));
  border: 1px solid rgba(245,158,11,.42);
  border-left: 3px solid #f59e0b;
  border-radius: 10px;
  font-size: 12.5px; line-height: 1.55; color: #fcd9a0;
}
.hxr-stale-note i { margin-top: 2px; color: #fbbf24; flex: 0 0 auto; }
.hxr-stale-note strong { color: #fde9c8; font-weight: 700; }
/* ★ v89: sup-5 장전/휴장 폴백은 기존 .hxd-tbl(RANKING) 포맷을 그대로 재사용 — 별도 스타일 불필요.
   순매도 패널 헤더 톤(org)일 때 금액 음수 컬러만 보조 정의(.hxd-tbl 의 .hxd-neg 와 동일 계열). */
.hxr-spin { animation: hxrSpin 1s linear infinite; }
@keyframes hxrSpin { to { transform: rotate(360deg); } }

/* 요약 카드 (상단 통계) */
.hxr-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}
.hxr-stat {
    flex: 1;
    min-width: 120px;
    background: rgba(20,36,62,.5);
    border: 1px solid rgba(99,179,237,.12);
    border-radius: 12px;
    padding: 12px 14px;
}
.hxr-stat-label { font-size: 11.5px; color: #7d93b3; margin-bottom: 5px; }
.hxr-stat-value { font-size: 20px; font-weight: 800; color: #eef4ff; }
.hxr-stat-value small { font-size: 12px; font-weight: 600; color: #8499b6; margin-left: 3px; }

/* 차트 */
.hxr-chart-wrap {
    background: rgba(10,20,38,.5);
    border: 1px solid rgba(99,179,237,.1);
    border-radius: 12px;
    padding: 14px 14px 8px;
    margin-bottom: 18px;
}
.hxr-chart-title {
    font-size: 12.5px;
    font-weight: 700;
    color: #b8cbe6;
    margin-bottom: 10px;
}

/* 결과 종목 테이블 */
.hxr-section-title {
    font-size: 13px;
    font-weight: 700;
    color: #cfe0f7;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.hxr-section-title .hxr-count {
    font-size: 11.5px;
    font-weight: 700;
    color: #7dd3fc;
    background: rgba(56,189,248,.12);
    padding: 2px 8px;
    border-radius: 999px;
}
.hxr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.hxr-table thead th {
    text-align: right;
    font-size: 11px;
    font-weight: 600;
    color: #6b86a8;
    padding: 6px 10px;
    border-bottom: 1px solid rgba(99,179,237,.12);
    white-space: nowrap;
}
.hxr-table thead th:first-child { text-align: left; }
.hxr-table tbody td {
    padding: 9px 10px;
    text-align: right;
    border-bottom: 1px solid rgba(99,179,237,.06);
    color: #dce7f7;
    white-space: nowrap;
}
.hxr-table tbody td:first-child { text-align: left; }
.hxr-table tbody tr:hover { background: rgba(59,130,246,.08); }
.hxr-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    font-size: 11px;
    font-weight: 700;
    color: #8fb0d8;
    background: rgba(99,179,237,.1);
    border-radius: 6px;
    margin-right: 9px;
}
.hxr-stk-name { font-weight: 600; color: #eef4ff; }
.hxr-stk-code { font-size: 11px; color: #6b86a8; margin-left: 6px; }
.hxr-pos { color: #f87171; font-weight: 700; }   /* 매수(양) — 한국식 적색 */
.hxr-neg { color: #60a5fa; font-weight: 700; }   /* 매도(음) — 청색 */

/* 숫자 셀 — 금액 + 보조(수량) 2줄 표기 */
.hxr-table .hxr-num { text-align: right; }
.hxr-table tbody td.hxr-num small {
    display: block;
    font-size: 10.5px;
    font-weight: 500;
    color: #6b86a8;
    margin-top: 1px;
}

/* 모달 열렸을 때 배경 스크롤 잠금 */
body.hxr-modal-open { overflow: hidden; }

.hxr-foot-note {
    margin-top: 16px;
    font-size: 11.5px;
    color: #6b86a8;
    line-height: 1.6;
    text-align: center;
}

@media (max-width: 640px) {
    .hxr-modal { padding: 0; }
    .hxr-dialog { width: 100%; max-height: 100vh; border-radius: 0; }
}

/* ════════════════════════════════════════════════
   인라인 대화형 분석 화면 (hxc-) — HASRI AI 종목검색 방식
════════════════════════════════════════════════ */
.hxc-convo {
    /* 부모(.page-content)와 동일 배경 → 화면 전체 색 통일 */
    /* ★ 부모가 display:block 이라 min-height:100% 가 콘텐츠 높이로 잡혀
       세로 가운데 정렬이 안 됐음 → 뷰포트 기준 높이로 직접 확보 (HASRI AI 와 동일 효과) */
    min-height: calc(100vh - var(--header-h, 56px));
    background:
        radial-gradient(1200px 600px at 20% -10%, rgba(56,89,158,.18), transparent 60%),
        radial-gradient(900px 500px at 95% 0%, rgba(139,92,246,.12), transparent 55%),
        #0a1426;
    animation: hxcFadeIn .35s ease;
    padding: 0;
    /* ★ HASRI AI 종목분석 구조와 동일: .hxc-convo 는 세로 컬럼,
       실제 가운데 정렬은 .hxc-stage-chat(=.hai-chat-wrap) 한 곳에서 수행 */
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
.hxc-convo > .hxc-convo-inner {
    width: 100%;
    /* 채팅 단계에서 .hxc-stage-chat 이 남은 높이를 모두 채우도록 */
    flex: 1;
    display: flex;
    flex-direction: column;
    transition: max-width .2s ease;
}
/* 결과 단계에서는 가운데 정렬 해제 — 콘텐츠가 전체 폭/높이를 채움 */
.hxc-convo.is-result {
    display: block;
}
/* 결과 단계: 콘텐츠가 바탕을 가장자리까지 꽉 채움 (여백·폭제한 제거) */
.hxc-convo.is-result {
    padding: 0;
    background: #070d1a;   /* 바탕 그라데이션 제거 → 콘텐츠와 동일 단색 (틈새 색 차이 방지) */
}
.hxc-convo.is-result > .hxc-convo-inner { max-width: none; margin: 0; }
/* 상단 바만 약간의 여백 부여 (뒤로가기/제목) */
.hxc-convo.is-result .hxc-topbar { padding: 12px 16px; margin: 0; }
@keyframes hxcFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hxc-convo-inner { display: flex; flex-direction: column; gap: 16px; }
.hxc-convo.is-result .hxc-convo-inner { gap: 0; }

/* 상단 바 */
.hxc-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 2px 6px;
}
.hxc-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(20,36,62,.6);
    border: 1px solid rgba(99,179,237,.18);
    color: #bcd1ee;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 15px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .1s;
}
.hxc-back:hover { background: rgba(30,52,86,.8); border-color: rgba(99,179,237,.4); }
.hxc-back:active { transform: scale(.97); }
.hxc-topbar-brand { font-size: 13px; font-weight: 700; color: #8fb0d8; letter-spacing: .2px; }
.hxc-brand-icon { margin-right: 4px; }

/* 공통 스테이지 컨테이너 */
.hxc-stage {
    background: linear-gradient(180deg, #0e1d34, #0b1729);
    border: 1px solid rgba(99,179,237,.16);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0,0,0,.35);
    overflow: hidden;
}

/* ── ① 채팅 단계 ── (HASRI AI 종목분석 .hai-chat-* 와 100% 동일) ──
   채팅 단계에서는 카드 박스(.hxc-stage) 장식을 제거하고 말풍선만 가운데 띄움 */
.hxc-stage.hxc-stage-chat {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    /* HASRI AI .hai-chat-wrap (flex:1; align-items:center; justify-content:center) 와 100% 동일 */
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px 24px;
}
/* 컬럼 래퍼: HASRI AI .hai-chat-inner (max-width:520px) 와 동일 */
.hxc-chat-inner {
    max-width: 520px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* ════════════════════════════════════════════════════════════
   ★ 아날로그 터미널 대화창 (HASRI AI 종목검색 .hai-chat-* 와 동일 컨셉)
   말풍선 제거 · HASRI:/USER: 프롬프트 · 한 글자씩 타이핑 · 커서
   ──────────────────────────────────────────────────────────── */
.hxc-chat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 2px;
    min-height: 200px;
    font-family: 'D2Coding', 'SF Mono', 'Consolas', 'Menlo', monospace;
    font-size: 14px; line-height: 1.9;
    position: relative;
}
@keyframes hxcBubbleIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* 한 줄(= 한 메시지). 말풍선 없음, 텍스트만 흐른다 */
.hxc-msg {
    display: block; position: relative;
    white-space: pre-wrap; word-break: break-word;
}
.hxc-bubble {
    display: inline; background: none !important; border: none !important;
    padding: 0 !important; margin: 0; border-radius: 0 !important; max-width: 100%;
}

/* AI 출력 라인 — HASRI: 프롬프트 */
.hxc-msg-ai { color: #cfe3ff; margin-top: 6px; }
.hxc-msg-ai .hxc-bubble::before {
    content: 'HASRI:'; color: #3b6ea5; font-weight: 700; margin-right: 8px; letter-spacing: .5px;
}
.hxc-msg-ai strong { color: #7dd3fc; font-weight: 700; }

/* 사용자(영어 사용자) 입력 라인 — USER: 프롬프트 */
.hxc-msg-user { color: #86efac; margin-top: 6px; }
.hxc-msg-user .hxc-bubble::before {
    content: 'USER:'; color: #22c55e; font-weight: 700; margin-right: 8px; letter-spacing: .5px;
}
.hxc-msg-user .hxc-bubble strong { color: #bbf7d0; }

/* 타이핑 인디케이터(점 3개) */
.hxc-typing { color: #3b6ea5; }
.hxc-typing .hxc-bubble::before {
    content: 'HASRI:'; color: #3b6ea5; font-weight: 700; margin-right: 8px;
}
.hxc-typing-dot {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: #60a5fa; opacity: .45; margin-right: 3px;
    animation: hxc-typing-bounce 1.2s infinite ease-in-out;
}
.hxc-typing-dot:nth-child(2) { animation-delay: .18s; }
.hxc-typing-dot:nth-child(3) { animation-delay: .36s; }
@keyframes hxc-typing-bounce {
    0%, 60%, 100% { transform: translateY(0);    opacity: .35; }
    30%           { transform: translateY(-4px); opacity: 1;   }
}

/* 깜빡이는 블록 커서 (터미널 ▋) */
.hxc-type-caret {
    display: inline-block; width: 9px; height: 1.05em; margin-left: 2px;
    vertical-align: -2px; background: #7dd3fc;
    box-shadow: 0 0 6px rgba(125,211,252,.7);
    animation: hxc-caret-blink 1s step-end infinite;
}
@keyframes hxc-caret-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* 하단 안내 문구 */
.hxc-chat-guide {
    margin: 14px 2px 2px; padding: 0;
    font-size: 13px; line-height: 1.6; color: #94a3b8; text-align: center;
    animation: hxcBubbleIn .4s ease;
}
.hxc-chat-guide strong { color: #cbd5e1; font-weight: 700; }

/* 접근성 */
@media (prefers-reduced-motion: reduce) {
    .hxc-typing-dot { animation: none; opacity: .6; }
    .hxc-type-caret { animation: none; }
}

/* 채팅 액션 버튼 — 터미널 톤(아웃라인+글로우), HASRI AI .hai-chat-btn 과 동일 */
.hxc-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    animation: hxcBubbleIn .3s ease;
}
.hxc-btn {
    flex: 1;
    padding: 13px 0;
    border-radius: 8px;
    font-family: 'D2Coding', 'SF Mono', 'Consolas', 'Menlo', monospace;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .3px;
    cursor: pointer;
    background: transparent;
    transition: all .2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    position: relative;
}
.hxc-btn i { font-size: 12px; opacity: .85; }

/* 주 동작: 분석 시작 — 하늘색 글로우 외곽선 */
.hxc-btn-confirm {
    color: #7dd3fc;
    border: 1px solid rgba(125,211,252,.45);
    box-shadow: inset 0 0 18px rgba(125,211,252,.06);
}
.hxc-btn-confirm::before { content: '▸'; color: #22d3ee; font-weight: 700; margin-right: -3px; }
.hxc-btn-confirm:hover {
    color: #e0f7ff;
    border-color: rgba(125,211,252,.9);
    box-shadow: 0 0 16px rgba(56,189,248,.35), inset 0 0 22px rgba(125,211,252,.12);
    transform: translateY(-1px);
}
.hxc-btn-confirm:active { transform: translateY(0); }
.hxc-btn-confirm:disabled {
    opacity: .55; cursor: default; transform: none;
    box-shadow: none; border-color: rgba(125,211,252,.25);
}

/* 보조 동작: 다시 검색 — 회색 외곽선 */
.hxc-btn-cancel {
    color: #8aa0b8;
    border: 1px solid #2d4a6a;
}
.hxc-btn-cancel:hover {
    color: #cbd5e1;
    border-color: #44617f;
    background: rgba(148,163,184,.06);
    transform: translateY(-1px);
}
.hxc-btn-cancel:active { transform: translateY(0); }

/* ════════════════════════════════════════════════════════════
   ② 로딩 단계 — 전체화면 AI 분석 오버레이
   (HASRI AI 종목분석 로딩 .hai-ao 와 동일 컨셉 · prefix hxp-ao)
   · position:fixed 로 화면 전체를 덮고 가운데에 분석 진행 표시
   · 데이터(차트·시총 포함) 전부 수집 + 최소 8초 후에만 닫힘
═══════════════════════════════════════════════════════════════ */
.hxc-stage-loading { padding: 0; }   /* 오버레이가 fixed 라 패딩 불필요 */

.hxp-ao {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 완전 불투명 다크 네이비 — 뒤 화면이 비치지 않게 */
    background: radial-gradient(ellipse at 50% 40%, #141b2d, #0a0e1a);
}
/* 닫힐 때 부드러운 페이드아웃 */
.hxp-ao.is-closing {
    transition: opacity .5s ease, visibility .5s ease;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.hxp-ao.is-closing .hxp-ao-inner { transform: scale(1.04); }

/* 배경 그리드 + 스캔라인 */
.hxp-ao-bg { position: absolute; inset: 0; overflow: hidden; }
.hxp-ao-grid {
    position: absolute; inset: -50%;
    background-image:
        linear-gradient(rgba(59,130,246,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59,130,246,.05) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 72%);
            mask-image: radial-gradient(ellipse at center, #000 30%, transparent 72%);
    animation: hxpAoGridDrift 22s linear infinite;
}
@keyframes hxpAoGridDrift {
    from { transform: translate(0, 0); }
    to   { transform: translate(44px, 44px); }
}
.hxp-ao-scan {
    position: absolute; left: 0; right: 0; height: 180px;
    background: linear-gradient(180deg, transparent, rgba(59,130,246,.10), transparent);
    animation: hxpAoScan 3.6s ease-in-out infinite;
}
@keyframes hxpAoScan {
    0%   { top: -20%; opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* 내부 컨텐츠 */
.hxp-ao-inner {
    position: relative;
    z-index: 2;
    width: min(440px, 90vw);
    text-align: center;
    transform: scale(1);
    transition: transform .5s cubic-bezier(.4,0,.2,1);
}

/* 중앙 AI 코어 (회전 동심원 + 글로우) */
.hxp-ao-core {
    position: relative;
    width: 132px; height: 132px;
    margin: 0 auto 26px;
    display: flex; align-items: center; justify-content: center;
}
.hxp-ao-ring { position: absolute; border-radius: 50%; border: 2px solid transparent; }
.hxp-ao-ring-1 { inset: 0;    border-top-color: #fbbf24; border-right-color: #fbbf24; animation: hxpAoSpin 1.6s linear infinite; }
.hxp-ao-ring-2 { inset: 16px; border-bottom-color: #3b82f6; border-left-color: #3b82f6; animation: hxpAoSpin 2.4s linear infinite reverse; }
.hxp-ao-ring-3 { inset: 32px; border-top-color: rgba(16,185,129,.75); border-left-color: rgba(16,185,129,.75); animation: hxpAoSpin 3.2s linear infinite; }
@keyframes hxpAoSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.hxp-ao-orbit { position: absolute; inset: 0; animation: hxpAoSpin 2s linear infinite; }
.hxp-ao-orbit i {
    position: absolute; top: -3px; left: 50%;
    width: 8px; height: 8px; margin-left: -4px;
    border-radius: 50%;
    background: #fbbf24;
    box-shadow: 0 0 12px 2px rgba(251,191,36,.6);
}
.hxp-ao-core-glow {
    position: absolute;
    width: 60px; height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59,130,246,.45), transparent 70%);
    animation: hxpAoPulse 1.8s ease-in-out infinite;
}
@keyframes hxpAoPulse {
    0%, 100% { transform: scale(1);   opacity: .7; }
    50%      { transform: scale(1.3); opacity: 1; }
}
.hxp-ao-core-icon {
    position: relative; z-index: 2;
    font-size: 38px; line-height: 1;
    filter: drop-shadow(0 0 10px rgba(59,130,246,.5));
    animation: hxpAoFloat 2.6s ease-in-out infinite;
}
@keyframes hxpAoFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}

/* 타이틀 / 서브 */
.hxp-ao-title {
    margin: 0 0 8px;
    font-size: 20px; font-weight: 800;
    color: #eef4ff; letter-spacing: -.3px;
}
.hxp-ao-sub {
    margin: 0 0 24px;
    font-size: 13px; color: #94a3b8; line-height: 1.5;
}

/* 진행 단계 리스트 */
.hxp-ao-steps { list-style: none; margin: 0 0 22px; padding: 0; text-align: left; }
.hxp-ao-step {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 14px; margin-bottom: 7px;
    border-radius: 10px;
    background: rgba(20,27,45,.55);
    border: 1px solid #1e2d4a;
    opacity: .4;
    transform: translateX(-6px);
    transition: all .4s cubic-bezier(.4,0,.2,1);
}
.hxp-ao-step-ico {
    flex-shrink: 0;
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: rgba(59,130,246,.1);
    color: #4a5568; font-size: 13px;
    transition: all .4s ease;
}
.hxp-ao-step-label {
    flex: 1 1 auto;
    font-size: 13px; font-weight: 600;
    color: #94a3b8;
    transition: color .4s ease;
}
.hxp-ao-step-state { flex-shrink: 0; width: 18px; height: 18px; position: relative; }
/* 진행 중 — 스피너 */
.hxp-ao-step.active {
    opacity: 1; transform: translateX(0);
    border-color: rgba(59,130,246,.5);
    background: rgba(59,130,246,.08);
    box-shadow: 0 2px 14px rgba(59,130,246,.14);
}
.hxp-ao-step.active .hxp-ao-step-ico {
    background: #3b82f6; color: #fff;
    box-shadow: 0 0 12px rgba(59,130,246,.5);
}
.hxp-ao-step.active .hxp-ao-step-label { color: #eef4ff; }
.hxp-ao-step.active .hxp-ao-step-state::before {
    content: ""; position: absolute; inset: 0;
    border: 2px solid rgba(59,130,246,.25);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: hxpAoSpin .7s linear infinite;
}
/* 완료 — 체크 */
.hxp-ao-step.done { opacity: 1; transform: translateX(0); }
.hxp-ao-step.done .hxp-ao-step-ico { background: rgba(16,185,129,.16); color: #10b981; }
.hxp-ao-step.done .hxp-ao-step-label { color: #94a3b8; }
.hxp-ao-step.done .hxp-ao-step-state::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; color: #10b981;
    animation: hxpAoCheckPop .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes hxpAoCheckPop {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* 진행 바 */
.hxp-ao-progress {
    width: 100%; height: 5px;
    border-radius: 3px;
    background: #1e2d4a;
    overflow: hidden;
}
.hxp-ao-progress-bar {
    width: 0%; height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    box-shadow: 0 0 10px rgba(59,130,246,.5);
    transition: width .5s cubic-bezier(.4,0,.2,1);
}
.hxp-ao-meta {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 10px; font-size: 11.5px;
}
.hxp-ao-pct { font-weight: 700; color: #60a5fa; font-variant-numeric: tabular-nums; }
.hxp-ao-hint { color: #4a5568; animation: hxpAoBlink 1.6s ease-in-out infinite; }
@keyframes hxpAoBlink {
    0%, 100% { opacity: .5; }
    50%      { opacity: 1; }
}

@media (max-width: 480px) {
    .hxp-ao-inner { width: 92vw; }
    .hxp-ao-core  { width: 110px; height: 110px; }
    .hxp-ao-title { font-size: 18px; }
    .hxp-ao-step  { padding: 8px 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .hxp-ao-grid, .hxp-ao-scan, .hxp-ao-orbit,
    .hxp-ao-core-glow, .hxp-ao-core-icon { animation: none; }
}

/* ── ③ 결과 단계 ── */
.hxc-stage-result { display: flex; flex-direction: column; }
.hxc-result-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid rgba(99,179,237,.12);
}
.hxc-result-titles { min-width: 0; }
.hxc-tag {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    color: #8fb0d8;
    background: rgba(99,179,237,.12);
    padding: 3px 10px;
    border-radius: 99px;
    margin-bottom: 8px;
}
.hxc-title { margin: 0 0 5px; font-size: 18px; font-weight: 800; color: #eef4ff; }
.hxc-sub   { margin: 0; font-size: 12.5px; color: #7d93b3; line-height: 1.5; }
.hxc-result-again {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(20,36,62,.7);
    border: 1px solid rgba(99,179,237,.2);
    color: #aac3e3;
    font-size: 12.5px;
    font-weight: 600;
    padding: 9px 14px;
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
}
.hxc-result-again:hover { background: rgba(30,52,86,.9); border-color: rgba(99,179,237,.4); }
/* 헤더 우측 액션: [방향 전환] [다른 전략 보기] 한 줄 정렬 */
.hxc-result-actions {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
/* sup-2 방향 전환 토글(단일 버튼) — 누르면 로딩 후 반대 방향 분석 */
.hxc-result-dirbtn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(124,58,237,.22), rgba(219,39,119,.22));
    border: 1px solid rgba(168,85,247,.45);
    color: #e9d5ff;
    font-size: 12.5px;
    font-weight: 700;
    padding: 9px 14px;
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s, transform .1s;
}
.hxc-result-dirbtn:hover {
    background: linear-gradient(135deg, rgba(124,58,237,.38), rgba(219,39,119,.38));
    border-color: rgba(192,132,252,.7);
}
.hxc-result-dirbtn:active { transform: scale(.97); }
.hxc-result-dirbtn i { font-size: 11px; opacity: .85; }
/* 헤드라인 내 현재 방향 표기(작은 칩) */
.hxd-dir-cur { color: #c4b5fd; font-weight: 700; }
.hxc-result-body { padding: 20px 22px 26px; }

@media (max-width: 640px) {
    .hxc-msg { max-width: 92%; }
    .hxc-result-head { flex-direction: column; }
    .hxc-result-actions { align-self: flex-start; flex-wrap: wrap; }
    .hxc-actions { flex-direction: column; }
    .hxc-btn { width: 100%; }
}

/* ════════════════════════════════════════════════
   풍부한 분석 리포트 (hxd-) — HASRI AI 대시보드형 연속 패널 보고서
   ─ 페이지 전체 폭 · 카드 간격 없이 구분선으로 연결 · 스크롤 없는 목록
════════════════════════════════════════════════ */
.hxc-convo.is-result .hxc-result-body {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    background: #070d1a;
    border-top: 1px solid #1e2d4a;
}
/* 결과 단계 — 테두리/radius 없이 HASRI AI 대시보드 톤 */
.hxc-convo.is-result .hxc-stage-result {
    background: #070d1a;
    border: none;
    border-radius: 0;
    overflow: hidden;
}
.hxc-convo.is-result .hxc-result-head {
    padding: 12px 16px 12px;
    background: #0b1220;
    border-bottom: 1px solid #1e2d4a;
}

/* ════════════════════════════════════════════════
   HASRI AI 스타일 가로 Row-grid 레이아웃
   ─ 세로 스택 X → 다중 컬럼 그리드(gap:0, border 구분선)
══════════════════════════════════════════════════ */
/* ── Row 컨테이너 (HASRI AI .hai-row 패턴) ── */
.hxd-row {
    display: grid;
    gap: 0;
    border-bottom: 1px solid #1a2540;
}
.hxd-row-1      { grid-template-columns: 1fr 1.6fr; }        /* 요약 | Venn */
.hxd-row-2      { grid-template-columns: 1fr 1fr; }          /* 외국인 | 기관 */
.hxd-row-3      { grid-template-columns: 0.95fr 0.9fr 1.45fr; } /* 차트(축소) | 핵심지표 | 순위표(확대) */
.hxd-row-single { grid-template-columns: 1fr; }

/* 패널 (HASRI AI .hai-panel) — 같은 Row 내 좌우 패널은 border-left 구분 */
.hxd-panel {
    background: #070d1a;
    padding: 16px 22px 20px;   /* 좌우 여백 보강 (텍스트 경계 띄움) */
    min-width: 0;
    overflow: hidden;
}
.hxd-row > .hxd-panel + .hxd-panel { border-left: 1px solid #1a2540; }
/* 모든 패널 동일 배경(#070d1a) — 카드/틴트 없이 구분선만 */

/* RANKING 표 패널: grid stretch 로 늘어나도 표는 스크롤 컨테이너 안에서만 늘어나도록.
   · align-self:start → 차트/지표 패널 높이에 끌려 늘어나지 않음
   · grid 셀 내부 스크롤이 동작하려면 min-height:0 필요 */
.hxd-pnl-table {
    align-self: start;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.hxd-pnl-table .hxd-tbl-scroll { flex: 1 1 auto; min-height: 0; }

/* ── 패널 헤더 (HASRI AI 10px UPPERCASE 타이틀) ── */
.hxd-phead {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 11px;
    padding-bottom: 9px;
    border-bottom: 1px solid #1a2540;
}
.hxd-phead-main { min-width: 0; flex: 1; }
.hxd-ptitle {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #475569;
    line-height: 1.3;
}
.hxd-psub {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 3px;
    line-height: 1.4;
}
.hxd-psub b { color: #cbd5e1; }
.hxd-pbadge {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    align-self: center;
    white-space: nowrap;
}
/* 헤더 좌측 컬러 액센트 (톤별) — 작은 점(dot) */
.hxd-ptitle::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    margin-right: 7px;
    vertical-align: 1px;
    background: #64748b;
}
.hxd-tn-for    .hxd-ptitle::before { background: #a78bfa; }
.hxd-tn-org    .hxd-ptitle::before { background: #22d3ee; }
.hxd-tn-gold   .hxd-ptitle::before { background: #fbbf24; }
.hxd-tn-point  .hxd-ptitle::before { background: #3b82f6; }
.hxd-tn-cyan   .hxd-ptitle::before { background: #22d3ee; }   /* ★ v3.48: sup-3 전체 후보 표 */
.hxd-tn-both   .hxd-ptitle::before { background: linear-gradient(135deg, #60a5fa 0 50%, #fbbf24 50% 100%); }  /* ★ v3.49: 쌍끌이(외국인 파랑+기관 노랑) */

/* ── 공통 색상 토큰 (HASRI AI: 매수=red / 매도=blue) ──
   ★ v83: 한국 증시 관례에 맞춰 매도색을 초록(#34d399)→파랑(#60a5fa)으로 통일 */
.hxd-pos { color: #f87171; }   /* 순매수(+) = 빨강 */
.hxd-neg { color: #60a5fa; }   /* 순매도(−) = 파랑 */
.hxd-sum { color: #f87171; }
/* ★ v85: 1억 미만 소액 종목 = 임팩트 작아 카드 전체를 흑백 처리.
   색(매수 빨강/매도 파랑)은 유의미한 규모에만 — grayscale 필터로 등락률·배지·창구칩까지 일괄 탈색 */
.hxd-item-brk.hxd-card-muted {
    filter: grayscale(1);
    opacity: .72;
}

/* ★ v86: sup-5 [오늘/전일] 조회 기준 토글 — 결과 헤더 '다른 전략 보기' 버튼 좌측 */
.hxd-asof-bar {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}
.hxd-asof-lbl {
    font-size: 12px;
    font-weight: 600;
    color: #8b97b0;
    letter-spacing: .02em;
}
.hxd-asof-lbl i { margin-right: 5px; color: #60a5fa; }
.hxd-asof-toggle {
    display: inline-flex;
    background: #0f1a30;
    border: 1px solid #1a2540;
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}
.hxd-asof-btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: #9fb0cc;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    line-height: 1.2;
}
.hxd-asof-btn:hover:not(.is-active):not(:disabled) {
    color: #e6edf7;
    background: rgba(96, 165, 250, .08);
}
.hxd-asof-btn.is-active {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    box-shadow: 0 1px 6px rgba(37, 99, 235, .35);
}
.hxd-asof-btn:disabled { cursor: default; opacity: .6; }

/* 전일 조회 로딩 중 — 본문 살짝 흐림 + 클릭 방지 */
.hxd-asof-loading {
    position: relative;
    opacity: .5;
    pointer-events: none;
    transition: opacity .12s ease;
}
@media (max-width: 640px) {
    .hxd-asof-lbl { display: none; }                 /* 좁은 화면: '조회 기준' 라벨 숨김, 버튼만 */
    .hxd-asof-btn { padding: 6px 12px; font-size: 12px; }
}

/* ★ v88: 📸 분석 리포트 저장 버튼 ('다른 전략 보기' 좌측) — HASRI AI .hai-save-btn 톤 */
.hxc-result-save {
    background: #2a1e3a;
    border: 1px solid #a855f7;
    color: #c084fc;
    border-radius: 7px;
    padding: 6px 14px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    transition: background .15s, color .15s;
}
.hxc-result-save:hover { background: rgba(168, 85, 247, .22); color: #d8b4fe; }
.hxc-result-save:disabled { opacity: .55; cursor: progress; }

/* 📸 Explorer 리포트 상단 워터마크 띠 (캡처 시에만 임시 삽입) */
.hxc-report-watermark {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 14px 22px;
    background: linear-gradient(135deg, #0f1a30 0%, #1a1330 100%);
    border-bottom: 2px solid #2563eb;
}
.hxc-report-watermark .hxc-rwm-left { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hxc-report-watermark .hxc-rwm-title {
    font-size: 18px; font-weight: 800; color: #f1f5f9; letter-spacing: .3px;
    display: flex; align-items: center; gap: 8px;
}
.hxc-report-watermark .hxc-rwm-logo { font-size: 19px; }
.hxc-report-watermark .hxc-rwm-sub { font-size: 12px; color: #60a5fa; font-weight: 600; }
.hxc-report-watermark .hxc-rwm-right { display: flex; flex-direction: column; gap: 3px; text-align: right; flex-shrink: 0; }
.hxc-report-watermark .hxc-rwm-url {
    font-size: 13px; font-weight: 700; color: #93c5fd;
    display: flex; align-items: center; justify-content: flex-end; gap: 6px;
}
.hxc-report-watermark .hxc-rwm-url i { font-size: 11px; color: #60a5fa; }
.hxc-report-watermark .hxc-rwm-gen { font-size: 11px; color: #94a3b8; font-weight: 500; }

/* 🩻 배경 대각선(45°) 워터마크 — HASRI AI .hai-bg-watermark 와 디자인/크기 통일.
   "HASRI AI" + "https://kiwoom.my" 2줄, 45도, 흰색 6% 투명도, 대형. 캡처 시에만 삽입 */
.hxc-bg-watermark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9000;             /* 콘텐츠(차트/표) 위에 반투명으로 덮음 → 항상 보임 */
    pointer-events: none;      /* 클릭/조작 통과 */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;   /* 중앙에 1개 */
}
.hxc-bg-watermark .hxc-bgwm-inner {
    transform: rotate(-45deg);
    transform-origin: center center;
    text-align: center;
    white-space: nowrap;
    user-select: none;
    line-height: 1.05;
    color: rgba(255, 255, 255, 0.06);   /* 흰색 6% (HASRI AI 동일) */
}
.hxc-bg-watermark .hxc-bgwm-line1 {
    font-size: 240px;
    font-weight: 900;
    letter-spacing: 14px;
}
.hxc-bg-watermark .hxc-bgwm-line2 {
    font-size: 72px;
    font-weight: 700;
    letter-spacing: 7px;
    margin-top: 14px;
}

@media (max-width: 640px) {
    .hxc-result-save { padding: 6px 10px; font-size: 12px; }
}
.hxd-item-brk.hxd-card-muted:hover { opacity: 1; }   /* hover 시 잠깐 또렷하게 */

/* ── KPI 미니 스탯 (Row1 좌측, 2×2) — 박스X, 구분선만 ── */
.hxd-kpi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.hxd-kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    position: relative;
}
.hxd-kpi:nth-child(2n)   { border-left: 1px solid #14213a; }
.hxd-kpi:nth-child(n+3)  { border-top: 1px solid #14213a; }
.hxd-kpi-ico { font-size: 15px; line-height: 1; opacity: .9; }
.hxd-kpi-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #64748b;
    margin-top: 4px;
}
.hxd-kpi-val { font-size: 20px; font-weight: 800; color: #f1f5f9; line-height: 1.1; margin-top: 3px; }
.hxd-kpi-val small { font-size: 11px; font-weight: 600; color: #94a3b8; margin-left: 2px; }
.hxd-kpi-foot { font-size: 10.5px; color: #64748b; margin-top: 3px; }
.hxd-kpi.hxd-tn-for   .hxd-kpi-val { color: #a78bfa; }
.hxd-kpi.hxd-tn-org   .hxd-kpi-val { color: #22d3ee; }
.hxd-kpi.hxd-tn-gold  .hxd-kpi-val { color: #fbbf24; }
.hxd-kpi.hxd-tn-point .hxd-kpi-val { color: #f87171; }
.hxd-tag-live { color: #34d399; font-weight: 700; }

/* ════════ ① HEADLINE — 결론 한 줄 + 핵심 KPI 3개 ════════ */
.hxd-headline {
    padding: 18px 22px 20px;
    background: linear-gradient(180deg, #0b1426 0%, #070d1a 100%);
    border-bottom: 1px solid #1a2540;
}
.hxd-hl-top { margin-bottom: 9px; }
.hxd-hl-eyebrow {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    letter-spacing: .2px;
}
.hxd-hl-eyebrow i { margin-right: 5px; color: #475569; }
.hxd-hl-lead {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    color: #cbd5e1;
    letter-spacing: -.2px;
}
.hxd-hl-lead b { color: #f8fafc; font-weight: 800; }
/* KPI 3개 (가로) */
.hxd-hl-kpis {
    display: flex;
    gap: 0;
    margin-top: 16px;
}
.hxd-hl-kpi {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 2px 18px;
}
.hxd-hl-kpi + .hxd-hl-kpi { border-left: 1px solid #1a2540; }
.hxd-hl-kpi:first-child { padding-left: 0; }
.hxd-hl-n {
    font-size: 23px;
    font-weight: 800;
    color: #f1f5f9;
    line-height: 1.05;
    letter-spacing: -.4px;
}
.hxd-hl-n small { font-size: 12px; font-weight: 600; color: #94a3b8; margin-left: 2px; }
.hxd-hl-n.hxd-pos { color: #f87171; }
.hxd-hl-k { font-size: 11px; font-weight: 600; color: #64748b; letter-spacing: .2px; }

/* ════════ ② SCOPE & CROSS — 규모 + 교차 통합 다이어그램 ════════ */
.hxd-flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: 0;
    margin-top: 4px;
}
.hxd-flow-side, .hxd-flow-inter {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px;
    padding: 18px 14px;
    border-radius: 10px;
}
.hxd-fs-for  { background: rgba(167,139,250,.07); }
.hxd-fs-org  { background: rgba(34,211,238,.07); }
.hxd-flow-ico { font-size: 22px; line-height: 1; }
.hxd-flow-lbl { font-size: 11px; font-weight: 700; color: #94a3b8; letter-spacing: .2px; }
.hxd-flow-cnt {
    font-size: 26px; font-weight: 900; color: #f1f5f9; line-height: 1; margin-top: 2px;
}
.hxd-flow-cnt small { font-size: 12px; font-weight: 600; color: #94a3b8; margin-left: 1px; }
.hxd-flow-cnt.hxd-gold { color: #fde68a; }
.hxd-flow-amt { font-size: 13px; font-weight: 700; margin-top: 1px; }
/* 중앙 교집합 (강조 카드) */
.hxd-flow-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.hxd-flow-inter {
    padding: 20px 22px;
    background: radial-gradient(circle at 50% 35%, rgba(251,191,36,.16), rgba(251,191,36,.04));
    border: 1.5px solid rgba(251,191,36,.45);
    box-shadow: 0 0 22px rgba(251,191,36,.12);
}
.hxd-flow-inter .hxd-flow-lbl { color: #fcd34d; }
/* 하단 분해 바 */
.hxd-flow-breakdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid #1a2540;
    font-size: 12.5px;
    color: #94a3b8;
}
.hxd-bd-item b { color: #e2e8f0; font-weight: 800; margin-right: 3px; font-size: 14px; }
.hxd-bd-gold b { color: #fde68a; }
.hxd-bd-shake b { color: #fca5a5; }   /* ★ v3.51 sup-3: 개미털기형 강조(레드) */
.hxd-bd-sep { color: #334155; }

/* ── 좌우 목록 (Row2) · 박스X · 행 구분선만 · 스크롤 없이 전부 펼침 ── */
.hxd-list {
    display: flex;
    flex-direction: column;
}
.hxd-item {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-bottom: 1px solid #14213a;
    border-radius: 0;
    padding: 10px 4px;
    cursor: pointer;
    transition: background .12s;
}
.hxd-item:last-child { border-bottom: none; }
.hxd-item:hover { background: rgba(59,130,246,.07); }
.hxd-item.is-both { background: rgba(251,191,36,.05); }
.hxd-item.is-both:hover { background: rgba(251,191,36,.11); }
.hxd-item-rank {
    flex-shrink: 0;
    width: 22px;
    text-align: center;
    font-size: 13px; font-weight: 700;
    color: #475569;
    padding-top: 1px;
}
.hxd-item.is-both .hxd-item-rank { color: #fbbf24; }
/* 2행 본문 컨테이너: ① 정보+값 한 줄  ② 시총·비중 막대 한 줄 */
.hxd-item-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
/* 좌측 정보 그룹: 종목명 + 코드 + 등락률 + 우측 값 — 한 줄 가로 정렬 */
.hxd-item-info {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    overflow: hidden;
}
.hxd-item-name {
    min-width: 0;
    flex: 0 1 auto;
    font-size: 13px;
    font-weight: 600;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hxd-item-star { font-size: 11px; }
.hxd-item-code { flex-shrink: 0; font-size: 13px; color: #64748b; font-weight: 500; }
.hxd-item .hxd-rate { flex-shrink: 0; margin: 0; }
/* 우측 값 그룹 — 수량 · 금액 한 줄 정렬 (텍스트 크기 통일) */
.hxd-item-vals {
    flex-shrink: 0;
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-left: auto;
    padding-left: 12px;
}
.hxd-item-qty {
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    white-space: nowrap;
    min-width: 72px;
    text-align: right;
}
.hxd-item-amt {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    min-width: 64px;
    text-align: right;
}

/* ── 2행: 시총 대비 비중 막대 (강도 시각화) ── */
.hxd-item-cap {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.hxd-cap-bar {
    flex: 1 1 auto;
    height: 5px;
    min-width: 0;
    background: #0f1a30;
    border-radius: 3px;
    overflow: hidden;
}
.hxd-cap-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 3px;
    background: #475569;
    transition: width .5s cubic-bezier(.4,0,.2,1);
}
/* 강도 막대 색상 — '수급 강도' 5단계 세분화 팔레트(회색→청록→파랑→주황→골드).
   매수(빨강)·매도(초록)와 절대 겹치지 않도록 순수 빨강·초록 제거.
   💤미풍 ~0.1% · 🌬️약함 0.1~0.5% · 🌊보통 0.5~1.5% · 🔥강함 1.5~3% · ⚡폭발 3~5% · 🌋초강력 5~8% · ☄️극단 8%+ */
.hxd-cap-fill.is-ultra  { background: linear-gradient(90deg, #b91c1c, #f43f5e); box-shadow: 0 0 12px rgba(244,63,94,.7); }  /* ☄️ 8%+ 극단 = 적그 */
.hxd-cap-fill.is-mega   { background: linear-gradient(90deg, #c026d3, #f0abfc); box-shadow: 0 0 10px rgba(217,70,239,.6); }  /* 🌋 5~8% 초강력 = 마젠타 */
.hxd-cap-fill.is-blaze  { background: linear-gradient(90deg, #f59e0b, #fde047); box-shadow: 0 0 8px rgba(251,191,36,.5); }  /* ⚡ 3~5% 폭발 = 골드 */
.hxd-cap-fill.is-strong { background: linear-gradient(90deg, #ea580c, #fb923c); }  /* 🔥 1.5~3% 강함 = 주황 */
.hxd-cap-fill.is-mid    { background: linear-gradient(90deg, #2563eb, #60a5fa); }  /* 🌊 0.5~1.5% 보통 = 파랑 */
.hxd-cap-fill.is-weak   { background: linear-gradient(90deg, #0e7490, #22d3ee); }  /* 🌬️ 0.1~0.5% 약함 = 청록 */
.hxd-cap-fill.is-calm   { background: #475569; }                                   /* 💤 ~0.1% 미풍 = 회색 */
.hxd-cap-meta {
    flex-shrink: 0;
    display: flex;
    align-items: baseline;
    gap: 9px;
    white-space: nowrap;
}
.hxd-cap-mc { font-size: 11px; color: #64748b; font-weight: 500; }
.hxd-cap-pct {
    font-size: 12px;
    font-weight: 800;
    color: #94a3b8;
    min-width: 46px;
    text-align: right;
}
.hxd-cap-pct.is-ultra,  .hxd-cap-pct-cum.is-ultra  { color: #fb7185; font-weight: 800; }
.hxd-cap-pct.is-mega,   .hxd-cap-pct-cum.is-mega   { color: #e879f9; font-weight: 800; }
.hxd-cap-pct.is-blaze,  .hxd-cap-pct-cum.is-blaze  { color: #fbbf24; font-weight: 800; }
.hxd-cap-pct.is-strong, .hxd-cap-pct-cum.is-strong { color: #fb923c; }
.hxd-cap-pct.is-mid,    .hxd-cap-pct-cum.is-mid    { color: #60a5fa; }
.hxd-cap-pct.is-weak,   .hxd-cap-pct-cum.is-weak   { color: #22d3ee; }
.hxd-cap-pct.is-calm,   .hxd-cap-pct-cum.is-calm   { color: #64748b; }

/* 강도 막대 색상 범례 (리스트 패널 상단) */
.hxd-caplegend {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 16px;
    border-bottom: 1px solid #14213a;
    font-size: 10.5px;
    color: #64748b;
}
.hxd-cl-lbl { font-weight: 700; color: #475569; letter-spacing: .02em; }
.hxd-cl-item { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.hxd-cl-dot {
    display: inline-block;
    width: 14px; height: 5px;
    border-radius: 3px;
}
.hxd-cl-dot.is-calm   { background: #475569; }
.hxd-cl-dot.is-weak   { background: linear-gradient(90deg, #0e7490, #22d3ee); }
.hxd-cl-dot.is-mid    { background: linear-gradient(90deg, #2563eb, #60a5fa); }
.hxd-cl-dot.is-strong { background: linear-gradient(90deg, #ea580c, #fb923c); }
.hxd-cl-dot.is-blaze  { background: linear-gradient(90deg, #f59e0b, #fde047); }
.hxd-cl-dot.is-mega   { background: linear-gradient(90deg, #c026d3, #f0abfc); }
.hxd-cl-dot.is-ultra  { background: linear-gradient(90deg, #b91c1c, #f43f5e); }

/* ── 정렬 토글 (금액순 ↔ 강도순) ── */
.hxd-sorttoggle {
    flex-shrink: 0;
    display: inline-flex;
    gap: 0;
    border: 1px solid #1e2d4a;
    border-radius: 6px;
    overflow: hidden;
}
.hxd-sortbtn {
    background: transparent;
    border: none;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.hxd-sortbtn + .hxd-sortbtn { border-left: 1px solid #1e2d4a; }
.hxd-sortbtn:hover { color: #cbd5e1; }
.hxd-sortbtn.is-active { background: rgba(59,130,246,.16); color: #93c5fd; }

/* ── 쌍끌이 차트 (Row3 좌측) ── */
.hxd-chart-box {
    position: relative;
    height: 270px;
}
.hxd-chart-legend {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: 11px;
    color: #94a3b8;
}
.hxd-chart-legend span { display: inline-flex; align-items: center; }
.hxd-chart-legend i.dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 3px;
    margin-right: 5px;
    vertical-align: -1px;
}
.hxd-chart-legend i.dot.for { background: #a78bfa; }
.hxd-chart-legend i.dot.org { background: #22d3ee; }
/* 선(시총비중) 범례 마커 — 짧은 라인 */
.hxd-chart-legend i.ln {
    display: inline-block;
    width: 14px; height: 0;
    border-top-width: 2px;
    border-top-style: solid;
    margin-right: 5px;
    vertical-align: 4px;
}
/* 선(시총비중) — 막대(보라/시안)와 대비되는 따뜻한 색으로 변경 */
.hxd-chart-legend i.ln.for { border-top-color: #fb923c; }                          /* 외국인 비중: 주황 */
.hxd-chart-legend i.ln.org { border-top-color: #f472b6; border-top-style: dashed; } /* 기관 비중: 핑크(점선) */

/* ── 쌍끌이 / 엇갈림 RANKING 표 (Row3 우측) ── */
/* 종목 수가 카드 높이를 넘어가면 표 본문만 세로 스크롤. 헤더는 sticky로 고정 */
.hxd-tbl-scroll {
    /* 5종목까지 표시 후 스크롤. thead 38.5px + 행 52px×5 = 298.5px,
       6번째 행이 살짝 보여 '더 있음'을 암시하도록 +11px 여유 */
    max-height: 310px;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 -4px;             /* 스크롤바 자리 확보용 미세 보정 */
    padding: 0 4px;
    /* 스크롤바 스타일 (어두운 테마) */
    scrollbar-width: thin;
    scrollbar-color: #334155 transparent;
}
.hxd-tbl-scroll::-webkit-scrollbar { width: 8px; }
.hxd-tbl-scroll::-webkit-scrollbar-track { background: transparent; }
.hxd-tbl-scroll::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.hxd-tbl-scroll::-webkit-scrollbar-thumb:hover { background: #475569; background-clip: padding-box; }

.hxd-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.hxd-tbl thead th {
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #475569;
    padding: 0 8px 8px;
    border-bottom: 1px solid #1e2d4a;
    /* 스크롤 시 헤더 고정 */
    position: sticky;
    top: 0;
    z-index: 2;
    background: #070d1a;        /* 패널 배경(.hxd-panel)과 동일 — 행이 헤더 뒤로 비치지 않도록 */
}
.hxd-tbl th.r, .hxd-tbl td.r { text-align: right; }
.hxd-tbl th.c, .hxd-tbl td.c { text-align: center; width: 34px; }
.hxd-tbl td {
    padding: 8px;
    border-bottom: 1px solid #14213a;
    color: #cbd5e1;
}
.hxd-trow { cursor: pointer; transition: background .12s; }
.hxd-trow:hover { background: rgba(59,130,246,.08); }
.hxd-trow:hover .hxd-tnm { color: #93c5fd; }
.hxd-trk {
    font-size: 13px; font-weight: 700;
    color: #475569;
}
.hxd-tnm { font-size: 13px; font-weight: 600; color: #e2e8f0; transition: color .12s; }
.hxd-tcd { font-size: 13px; color: #64748b; margin-left: 6px; font-weight: 500; }
.hxd-tbl td.r { font-size: 13px; white-space: nowrap; line-height: 1.25; }
/* 표 헤더 보조 라벨 (금액·수량) */
.hxd-tbl thead th small {
    display: block;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: #3a4a66;
    margin-top: 2px;
}
/* ── sup-3 외국인 연속 매집: 연속일수 배지 + 일별 스파크라인 ── */
.hxd-streak-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 99px;
    white-space: nowrap;
    border: 1px solid transparent;
}
.hxd-streak-badge b { font-size: 14px; font-weight: 800; }
.hxd-streak-badge.is-streak-base   { color: #93c5fd; background: rgba(59,130,246,.12);  border-color: rgba(59,130,246,.3); }   /* 👍 3~4일 */
.hxd-streak-badge.is-streak-mid    { color: #5eead4; background: rgba(20,184,166,.14);  border-color: rgba(20,184,166,.35); }  /* 💪 5~6일 */
.hxd-streak-badge.is-streak-strong { color: #fdba74; background: rgba(234,88,12,.16);   border-color: rgba(234,88,12,.4); }    /* ⚡ 7~9일 */
.hxd-streak-badge.is-streak-blaze  { color: #fcd34d; background: rgba(245,158,11,.18);  border-color: rgba(245,158,11,.5);
    box-shadow: 0 0 10px rgba(251,191,36,.25); }                                                                                 /* 🔥 10일+ */

/* 일별 외국인 순매수 스파크라인 (최신→과거, 막대 차트) */
.hxd-th-spark { min-width: 160px; }
.hxd-spark-cell { padding: 6px 8px !important; vertical-align: middle; }
.hxd-spark {
    display: inline-flex;
    align-items: flex-end;
    gap: 3px;
    height: 38px;
    padding: 2px 0;
}
.hxd-spark-bar {
    width: 7px;
    min-height: 3px;
    border-radius: 2px 2px 0 0;
    transition: opacity .12s;
}
.hxd-spark-bar.pos { background: linear-gradient(180deg, #f87171, #dc2626); }  /* 순매수 = 빨강 */
.hxd-spark-bar.neg { background: linear-gradient(180deg, #60a5fa, #2563eb); }  /* 순매도 = 파랑 (연속 종료 직전일 등) */
.hxd-spark-bar:hover { opacity: .75; }
.hxd-streakrow { cursor: pointer; }

/* ★ v3.48: 0~2일 배지 (아직 연속 매집 아님 — 단발/관망) */
.hxd-streak-badge.is-streak-none { color: #94a3b8; background: rgba(100,116,139,.12); border-color: rgba(100,116,139,.28); font-weight: 600; }

/* ★ v3.48: 전체 후보 표에서 3일 미만 행은 살짝 흐리게(연속 매집 강조 대비) */
.hxd-streakrow.is-dim { opacity: .66; }
.hxd-streakrow.is-dim:hover { opacity: 1; }

/* ★ v3.48: 매집 강도 분포 차트 패널 */
.hxd-pnl-dist .hxd-dist-wrap {
    position: relative;
    height: 240px;
    padding: 8px 4px 2px;
}
@media (max-width: 720px) { .hxd-pnl-dist .hxd-dist-wrap { height: 200px; } }
/* ★ amt-0 종목 카드: 거래량 '평소 거래량 N배' — 배지 없이 텍스트로(가독성 우선, 적색 강조) */
.hxd-vol-mult { color: #ff5a73; font-weight: 700; white-space: nowrap; }
.hxd-cur-px   { color: #cbd5e1; font-weight: 600; white-space: nowrap; margin-left: 4px; }

/* ★ 회전율 TOP 패널의 '회전율'은 그 패널의 핵심 지표 →
   거래대금(흰색)과 달리 '강도 색상 칩'으로 한눈에 도드라지게(7단계 회색→적색).
   숫자(%)는 더 굵고 크게, 좌측에 강도 색 막대 표식. */
.hxd-turn-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px 1px 7px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 11.5px;
    line-height: 1.5;
    border: 1px solid transparent;
    position: relative;
}
.hxd-turn-chip::before {
    content: '';
    width: 3px; height: 11px;
    border-radius: 2px;
    background: currentColor;
    opacity: .85;
    flex-shrink: 0;
}
.hxd-turn-chip b { font-size: 13px; font-weight: 900; letter-spacing: -.01em; }
/* 강도 색상(글자색=칩 테두리·막대와 동조, 배경은 같은 색의 옅은 톤) */
.hxd-turn-chip.is-calm   { color: #94a3b8; background: rgba(100,116,139,.12); border-color: rgba(100,116,139,.25); }
.hxd-turn-chip.is-weak   { color: #22d3ee; background: rgba(34,211,238,.12);  border-color: rgba(34,211,238,.30); }
.hxd-turn-chip.is-mid    { color: #60a5fa; background: rgba(96,165,250,.12);  border-color: rgba(96,165,250,.30); }
.hxd-turn-chip.is-strong { color: #fb923c; background: rgba(251,146,60,.13);  border-color: rgba(251,146,60,.32); }
.hxd-turn-chip.is-blaze  { color: #fbbf24; background: rgba(251,191,36,.14);  border-color: rgba(251,191,36,.34); }
.hxd-turn-chip.is-mega   { color: #e879f9; background: rgba(232,121,249,.14); border-color: rgba(232,121,249,.34); }
.hxd-turn-chip.is-ultra  { color: #fb7185; background: rgba(251,113,133,.16); border-color: rgba(251,113,133,.40);
                           box-shadow: 0 0 8px rgba(251,113,133,.25); }

/* ★ amt-0 강도 범례 — 좌·우 패널 높이 통일(7항목 넘침 시 줄바꿈 허용하되 높이 고정) */
.hxd-pnl-amt0list .hxd-caplegend {
    flex-wrap: wrap;
    row-gap: 4px;
    min-height: 34px;
    box-sizing: border-box;
}

/* ★ amt-0 2열(변동성 TOP / 회전율 TOP) 종목 행 높이 '완전 고정' —
   min-height가 아니라 height 고정 + 내부 줄바꿈 차단 → 좌·우 같은 순번 행이 픽셀 단위로 정확히 일치.
   (메타 텍스트 길이가 좌/우 달라도 행 높이는 절대 변하지 않음) */
.hxd-pnl-amt0list .hxd-item {
    height: 66px;
    min-height: 66px;
    align-items: center;          /* 세로 가운데 정렬 */
    box-sizing: border-box;
    overflow: hidden;             /* 내용이 넘쳐도 행 높이 불변 */
}
/* 행 내부 2줄 — 줄바꿈 금지(고정 높이 유지의 핵심) */
.hxd-pnl-amt0list .hxd-item .hxd-item-info,
.hxd-pnl-amt0list .hxd-item .hxd-item-cap { flex-wrap: nowrap; }
.hxd-pnl-amt0list .hxd-item .hxd-sup4-limit { white-space: nowrap; }
@media (max-width: 720px) {
    .hxd-pnl-amt0list .hxd-item { height: 62px; min-height: 62px; }
}
/* 좌·우 패널 헤더(부제 길이 차이로 한 줄/두 줄 어긋남 방지) 높이 '고정' → 첫 행 시작점 정확히 일치 */
.hxd-row-amt0list .hxd-pnl-amt0list .hxd-phead {
    height: 64px;
    min-height: 64px;
    align-items: flex-start;
    box-sizing: border-box;
    overflow: hidden;
}
@media (max-width: 880px) {
    .hxd-row-amt0list .hxd-pnl-amt0list .hxd-phead { height: auto; min-height: 0; overflow: visible; }
}

/* ★ amt-0 전용: KEY FACTS / 산점도 / 누적막대 세 패널의 세로 높이를 공통 기준으로 고정.
   row-3 grid는 align-items:stretch(기본) → 세 패널이 가장 높은 KEY FACTS 높이에 맞춰짐.
   차트 패널을 flex column으로 만들어 차트 wrap이 남는 공간을 모두 채우게 하여 높이를 통일. */
.hxd-row-amt0 { align-items: stretch; }
.hxd-row-amt0 .hxd-pnl-amt0chart {
    display: flex;
    flex-direction: column;
    min-height: 320px;            /* 세 패널 공통 최소 세로 높이(기준값) */
}
/* amt-0 차트 wrap: 고정 240px 대신 패널 내 남는 공간을 모두 차지 → 세 패널 높이 통일 */
.hxd-row-amt0 .hxd-pnl-amt0chart .hxd-dist-wrap {
    height: auto;
    flex: 1 1 auto;
    min-height: 220px;
}
.hxd-row-amt0 .hxd-pnl-facts { min-height: 320px; }
@media (max-width: 720px) {
    .hxd-row-amt0 .hxd-pnl-amt0chart,
    .hxd-row-amt0 .hxd-pnl-facts { min-height: 260px; }
    .hxd-row-amt0 .hxd-pnl-amt0chart .hxd-dist-wrap { min-height: 200px; }
}
.hxd-dist-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 10px 14px 14px;
    border-top: 1px solid rgba(148,163,184,.1);
}
.hxd-dl {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: #94a3b8;
    white-space: nowrap;
}
.hxd-dl-dot {
    width: 11px; height: 11px;
    border-radius: 3px;
    flex: 0 0 auto;
}
.hxd-dl-dot.dot-none   { background: rgba(100,116,139,.75); }
.hxd-dl-dot.dot-base   { background: rgba(74,222,128,1); }
.hxd-dl-dot.dot-mid    { background: rgba(250,204,21,1); }
.hxd-dl-dot.dot-strong { background: rgba(251,146,60,1); }
.hxd-dl-dot.dot-blaze  { background: rgba(248,113,113,1); }
/* ★ v3.54: 본격 매집 기준선(3일+) 범례 — 차트 내 점선과 동일 색 */
.hxd-dl-thr { color: #6ee7b7; font-weight: 700; }
.hxd-dl-thrline {
    width: 14px; height: 0; flex: 0 0 auto;
    border-top: 1.5px dashed rgba(52,211,153,.7);
}

/* ★ v3.48: soft 빈상태 (3일+ 없을 때 — 전체 후보표는 아래 노출) */
.hxr-state.soft { padding: 18px 16px; }
.hxr-state.soft i { color: #4ade80; }

/* 표 셀 내 거래 주식수 (금액 아래 작은 글씨) */
.hxd-tqty {
    display: block;
    font-size: 10.5px;
    font-weight: 500;
    color: #64748b;
    margin-top: 1px;
}
/* 표 시총 대비 비중 셀 (비중% + 시총금액 — 막대 그래프 미사용) */
.hxd-tcap { vertical-align: middle; min-width: 96px; }
.hxd-tcap-pct {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: #94a3b8;
    text-align: right;
}
.hxd-tcap-pct.is-strong { color: #fbbf24; }
.hxd-tcap-pct.is-mid    { color: #22d3ee; }
.hxd-tcap-pct.is-weak   { color: #64748b; }
.hxd-tcap .hxd-cap-mc {
    display: block;
    font-size: 10px;
    font-weight: 500;
    color: #475569;
    margin-top: 1px;
}

/* ── 등락률 배지 (▲상승=빨강 / ▼하락=파랑 / 보합=회색) — HASRI AI 검색페이지 방식 ── */
.hxd-rate {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -.2px;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: 1px;
    white-space: nowrap;
}
.hxd-rate:empty { display: none; }
.hxd-rate.up   { color: #fb7185; background: rgba(244,63,94,.14); }
.hxd-rate.down { color: #60a5fa; background: rgba(59,130,246,.14); }
.hxd-rate.flat { color: #94a3b8; background: rgba(148,163,184,.12); }

/* ── AI 해석 (Row4 좌측) ── */
.hxd-ai-body { display: flex; flex-direction: column; gap: 9px; }
.hxd-ai-line {
    margin: 0;
    font-size: 13px;
    line-height: 1.65;
    color: #cbd5e1;
    padding-left: 12px;
    border-left: 2px solid rgba(59,130,246,.45);
}
.hxd-ai-line b { color: #fde68a; font-weight: 700; }

/* ── 핵심 지표 패널 ── */
/* 소제목 (주요 종목 / 수급 통계) */
.hxd-facts-sub {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #475569;
    margin: 2px 0 8px;
}
.hxd-facts-sub:not(:first-of-type) {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #1a2540;
}
/* 주요 종목 — 2줄 4칸 컴팩트 그리드 */
.hxd-leadgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.hxd-lead {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    text-align: left;
    background: #0a1222;
    border: none;
    border-radius: 7px;
    padding: 9px 11px 9px 13px;
    cursor: pointer;
    overflow: hidden;
    transition: background .12s, transform .12s;
}
/* 좌측 톤 컬러 스트립 */
.hxd-lead::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: #475569;
}
.hxd-lt-for::before  { background: #a78bfa; }
.hxd-lt-org::before  { background: #22d3ee; }
.hxd-lt-gold::before { background: #fbbf24; }
.hxd-lt-silver::before { background: #94a3b8; }
button.hxd-lead:hover { background: #0e1730; transform: translateY(-1px); }
button.hxd-lead:hover .hxd-lead-name { color: #93c5fd; }
.hxd-lead.is-empty { opacity: .55; cursor: default; }
/* 태그 (아이콘 + 라벨) */
.hxd-lead-tag {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3px;
    color: #64748b;
}
.hxd-lead-ico { font-size: 11px; font-style: normal; line-height: 1; }
/* 종목명 + 등락률 */
.hxd-lead-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.hxd-lead-name {
    font-size: 14px;
    font-weight: 700;
    color: #f1f5f9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    transition: color .12s;
}
.hxd-lead .hxd-rate { flex-shrink: 0; margin: 0; font-size: 11px; padding: 1px 5px; }
/* 코드 + 금액 한 줄 */
.hxd-lead-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.hxd-lead-code { font-size: 11px; color: #64748b; font-weight: 500; letter-spacing: .2px; }
.hxd-lead-amt { font-size: 14px; font-weight: 800; letter-spacing: -.2px; }
/* 거래 주식수 */
.hxd-lead-qty {
    font-size: 10.5px;
    font-weight: 500;
    color: #64748b;
    border-top: 1px solid #14213a;
    padding-top: 5px;
    margin-top: 1px;
}
.hxd-lead-qty::before { content: "거래 "; color: #475569; }

/* ── 핵심 지표 통계 행 ── */
.hxd-facts { margin: 0; display: flex; flex-direction: column; }
.hxd-fact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid #14213a;
}
.hxd-fact:last-child { border-bottom: none; }
.hxd-fact dt {
    font-size: 11.5px;
    color: #64748b;
    font-weight: 600;
    flex-shrink: 0;
}
.hxd-fact dd {
    margin: 0;
    font-size: 12.5px;
    font-weight: 700;
    color: #e2e8f0;
    text-align: right;
}
.hxd-fact dd small { font-size: 10.5px; font-weight: 500; color: #64748b; margin-left: 2px; }
.hxd-fact dd b { color: #fde68a; }
/* 소제목 옆 보조 설명 (쌍끌이 외 · 참고) */
.hxd-sub-note {
    font-size: 9px;
    font-weight: 500;
    color: #475569;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 4px;
}

/* ── 수급 강도 & 쏠림 (KEY FACTS A 재편) ── */
/* 외국인:기관 매수 균형 게이지 */
.hxd-balance { margin: 4px 0 12px; }
.hxd-bal-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
}
.hxd-bal-lbl.hxd-bal-for { color: #a78bfa; }
.hxd-bal-lbl.hxd-bal-org { color: #22d3ee; }
.hxd-bal-mid {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    letter-spacing: .02em;
}
.hxd-bal-bar {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: #0f1a30;
}
.hxd-bal-seg { height: 100%; transition: width .5s ease; }
.hxd-bal-seg.hxd-bs-for { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
.hxd-bal-seg.hxd-bs-org { background: linear-gradient(90deg, #06b6d4, #22d3ee); }

/* 강도/쏠림 2칸 통계 */
.hxd-facts.hxd-facts-2 { display: flex; flex-direction: column; }
/* 쌍끌이 평균 시총비중 — 강도 색상 */
.hxd-avg-impact { font-weight: 800; }
.hxd-avg-impact.is-ultra  { color: #fb7185; }
.hxd-avg-impact.is-mega   { color: #e879f9; }
.hxd-avg-impact.is-blaze  { color: #fbbf24; }
.hxd-avg-impact.is-strong { color: #fb923c; }
.hxd-avg-impact.is-mid    { color: #60a5fa; }
.hxd-avg-impact.is-weak   { color: #22d3ee; }
.hxd-avg-impact.is-calm   { color: #94a3b8; }

/* ── 푸터 ── */
.hxd-foot {
    margin: 0;
    padding: 14px 22px 20px;
    text-align: left;
    font-size: 11px;
    line-height: 1.6;
    border-top: 1px solid #1a2540;
    color: #475569;
}
.hxd-foot b { color: #64748b; }

/* 보고서 마지막 Row — 하단 구분선 제거 */
.hxc-convo.is-result .hxc-result-body > .hxd-row:last-of-type { border-bottom: none; }

/* ── 반응형 ── */
/* 중간 폭: Row3 3분할(차트|핵심지표|표) → 위[차트|표] / 아래[핵심지표 전체] */
@media (max-width: 1200px) {
    .hxd-row-3 { grid-template-columns: 1fr 1fr; }
    .hxd-row-3 > .hxd-pnl-chart { order: 1; }
    .hxd-row-3 > .hxd-pnl-table,
    .hxd-row-3 > .hxd-pnl-leader { order: 2; border-left: 1px solid #1a2540; }
    .hxd-row-3 > .hxd-pnl-facts {
        order: 3;
        grid-column: 1 / -1;
        border-left: none;
        border-top: 1px solid #1a2540;
    }
    .hxd-facts:not(.hxd-facts-2) { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 24px; }
    .hxd-facts:not(.hxd-facts-2) .hxd-fact { border-bottom: 1px solid #14213a; }
    /* 리더보드: 절반폭 칼럼이라도 충분히 넓으니 2열 유지 (560px 이하서만 1열) */
}
/* 좁은 폭: 전부 1열 */
@media (max-width: 880px) {
    .hxd-row-2, .hxd-row-3 { grid-template-columns: 1fr; }
    .hxd-row > .hxd-panel + .hxd-panel { border-left: none; border-top: 1px solid #1a2540; }
    .hxd-row-3 > .hxd-pnl-chart,
    .hxd-row-3 > .hxd-pnl-table,
    .hxd-row-3 > .hxd-pnl-leader,
    .hxd-row-3 > .hxd-pnl-facts { order: 0; grid-column: auto; border-left: none; }
    .hxd-row-3 > .hxd-pnl-table,
    .hxd-row-3 > .hxd-pnl-leader { border-top: 1px solid #1a2540; }
    .hxd-facts:not(.hxd-facts-2) { grid-template-columns: 1fr 1fr; }
    /* SCOPE 다이어그램: 세로 스택 */
    .hxd-flow { grid-template-columns: 1fr; gap: 10px; }
    .hxd-flow-center { flex-direction: column; gap: 6px; }
    .hxd-hl-lead { font-size: 16px; }
}
@media (max-width: 520px) {
    .hxd-kpi-grid { grid-template-columns: 1fr; }
    .hxd-facts { grid-template-columns: 1fr; }
    .hxd-hl-kpis { flex-wrap: wrap; }
    .hxd-hl-kpi { flex: 1 1 100%; padding: 8px 0; border-left: none !important; border-top: 1px solid #1a2540; }
    .hxd-hl-kpi:first-child { border-top: none; }
}

/* ════════════════════════════════════════════════════════════
   sup-2 (엇갈림) 전용 스타일 — 외국인 매수=🔴빨강 / 기관 매도=🟢초록
   ════════════════════════════════════════════════════════════ */
/* 매수/매도 색상 토큰 */
.hxd-buy  { color: #f87171 !important; }   /* 빨강 = 외국인 매수 */
.hxd-sell { color: #34d399 !important; }   /* 초록 = 기관 매도 */
.hxd-clash-gold { color: #fbbf24; }

/* 방향 전환 토글 */
.hxd-dirtoggle { display: inline-flex; gap: 4px; background: #0f1a30; border: 1px solid #1e2d4a; border-radius: 8px; padding: 3px; }
.hxd-dirbtn {
    appearance: none; border: none; background: transparent; cursor: pointer;
    color: #94a3b8; font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 6px;
    transition: background .2s, color .2s; white-space: nowrap;
}
.hxd-dirbtn:hover { color: #cbd5e1; }
.hxd-dirbtn.is-active { background: linear-gradient(90deg, #f8717133, #34d39933); color: #f1f5f9; box-shadow: inset 0 0 0 1px #ffffff14; }

/* HEADLINE 승부 KPI */
.hxd-hl-n.hxd-clash-for { color: #f87171; }
.hxd-hl-n.hxd-clash-org { color: #34d399; }

/* SCOPE & CLASH 다이어그램 색 */
.hxd-flow-side.hxd-fs-buy  .hxd-flow-ico,
.hxd-flow-side.hxd-fs-buy  .hxd-flow-cnt { color: #f87171; }
.hxd-flow-side.hxd-fs-sell .hxd-flow-ico,
.hxd-flow-side.hxd-fs-sell .hxd-flow-cnt { color: #34d399; }
.hxd-flow-clash .hxd-flow-ico { filter: drop-shadow(0 0 6px #fbbf2466); }
.hxd-flow-clash .hxd-flow-amt { color: #fbbf24; font-weight: 800; }

/* 승부 분해바 */
.hxd-verdict-summary { flex-wrap: wrap; gap: 4px 8px; }
.hxd-bd-for  b { color: #f87171; }
.hxd-bd-org  b { color: #34d399; }
.hxd-bd-tie  b { color: #cbd5e1; }
.hxd-bd-calm b { color: #64748b; }

/* KEY FACTS 승부 게이지 */
.hxd-bal-lbl.hxd-bal-buy  { color: #f87171; }
.hxd-bal-lbl.hxd-bal-sell { color: #34d399; }
.hxd-bal-seg.hxd-bs-buy  { background: linear-gradient(90deg, #ef4444, #f87171); }
.hxd-bal-seg.hxd-bs-sell { background: linear-gradient(90deg, #10b981, #34d399); }

/* 좌우 리스트 헤더 톤 */
.hxd-phead.hxd-tn-buy  .hxd-ptitle { color: #f87171; }
.hxd-phead.hxd-tn-sell .hxd-ptitle { color: #34d399; }
.hxd-clash-star { filter: drop-shadow(0 0 4px #fbbf2488); }

/* RANKING 표 — VS 게이지 셀 */
.hxd-tbl-clash .hxd-th-vs { text-align: center; min-width: 110px; }
.hxd-impact-cell { display: block; margin-top: 2px; font-size: 10px; color: #94a3b8; font-weight: 600; }
.hxd-imp-for { color: #f87171; }
.hxd-imp-org { color: #34d399; }

.hxd-vs-cell { vertical-align: middle; min-width: 110px; }
.hxd-vsbadge {
    display: inline-block; font-size: 10px; font-weight: 800; padding: 2px 7px;
    border-radius: 999px; margin-bottom: 5px; white-space: nowrap;
    background: #14213a; color: #94a3b8; border: 1px solid #1e2d4a;
}
.hxd-vsbadge.is-for  { background: #f8717122; color: #f87171; border-color: #f8717155; }
.hxd-vsbadge.is-org  { background: #34d39922; color: #34d399; border-color: #34d39955; }
.hxd-vsbadge.is-tie  { background: #fbbf2418; color: #fbbf24; border-color: #fbbf2444; }
.hxd-vsbadge.is-calm { background: #1e2d4a; color: #64748b; border-color: #2a3a5a; }

.hxd-vsbar {
    display: flex; height: 7px; width: 100%; border-radius: 4px; overflow: hidden;
    background: #0f1a30; border: 1px solid #15203a;
}
.hxd-vsbar-for { height: 100%; background: linear-gradient(90deg, #ef4444, #f87171); transition: width .6s ease; }
.hxd-vsbar-org { height: 100%; background: linear-gradient(90deg, #34d399, #10b981); transition: width .6s ease; }

/* 차트 범례 매수/매도 색 */
.hxd-chart-legend .dot.buy  { background: #f87171; }
.hxd-chart-legend .dot.sell { background: #34d399; }
.hxd-chart-legend .ln.buy   { background: #fb923c; }
.hxd-chart-legend .ln.sell  { background: #f472b6; }

/* 엇갈림 리스트 아이템 강조 테두리 */
.hxd-item.is-clash { border-color: #fbbf2433; }

/* ════════════════════════════════════════════════════════════
   ★ v3.49 sup-3 — 외국인·기관·개인 3주체 연속 매집 구도
   ════════════════════════════════════════════════════════════ */

/* 분포 차트 범례 점: 외국인(파랑)/기관(노랑)/개인(초록) 3색 ★ v3.50 */
.hxd-dl-dot.dot-frgn { background: rgba(96,165,250,1); }
.hxd-dl-dot.dot-orgn { background: rgba(251,191,36,1); }
.hxd-dl-dot.dot-ind  { background: rgba(52,211,153,1); }
.hxd-dl.hxd-dl-sep { color: #2a3a5a; padding: 0; }

/* ★ v3.50 HEADLINE 1줄 병합(Req D) — eyebrow(메타) › 요약을 한 줄로 */
.hxd-headline-1l { padding: 12px 16px; margin-bottom: 12px; }
.hxd-hl-1l {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
    margin: 0; font-size: 13.5px; line-height: 1.5; color: #cbd5e1;
}
.hxd-hl-1l .hxd-hl-meta { font-size: 11.5px; color: #64748b; font-weight: 600; white-space: nowrap; }
.hxd-hl-1l .hxd-hl-meta i { margin-right: 3px; }
.hxd-hl-1l .hxd-tag-live {
    display: inline-block; font-size: 9.5px; font-weight: 800; color: #34d399;
    background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.3);
    padding: 0 5px; border-radius: 4px; margin: 0 1px; vertical-align: 1px;
}
.hxd-hl-1l .hxd-hl-sep { color: #2a3a5a; font-weight: 700; }
.hxd-hl-1l .hxd-hl-msg { font-weight: 600; color: #e2e8f0; }
.hxd-hl-1l .hxd-hl-msg b { color: #93c5fd; font-weight: 800; }
@media (max-width: 720px) {
    .hxd-hl-1l { font-size: 12.5px; gap: 5px; }
    .hxd-hl-1l .hxd-hl-sep { display: none; }
    .hxd-hl-1l .hxd-hl-meta { width: 100%; }
}

/* ★ v3.50 간결 연속일수 셀(Req C) — 강도색 점 + 숫자만 (화려한 pill 제거) */
.hxd-num {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 13px; font-weight: 800; color: #cbd5e1; line-height: 1; white-space: nowrap;
}
.hxd-num .hxd-num-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; flex: 0 0 auto; }
.hxd-num b { font-size: 14px; font-weight: 800; }
.hxd-num.hxd-num-zero { color: #3a4862; font-weight: 600; gap: 0; }
.hxd-num.hxd-num-zero .hxd-ind-sig { color: #fb7185; }
.hxd-num.is-streak-none   { color: #5b6b85; }
.hxd-num.is-streak-base   { color: #60a5fa; }
.hxd-num.is-streak-mid    { color: #2dd4bf; }
.hxd-num.is-streak-strong { color: #fb923c; }
.hxd-num.is-streak-blaze  { color: #fbbf24; }
.hxd-num.is-ind           { color: #34d399; }   /* 개인 = 초록(분포차트와 동일) */
.hxd-num.is-sell          { color: #fb7185 !important; }  /* 개인 오늘 순매도 → 붉은톤 강조 */
.hxd-num .hxd-ind-sig { font-style: normal; font-size: 10px; margin-left: 1px; }
.hxd-num.is-sub-dim { opacity: .45; }

/* HEADLINE KPI 강조(쌍끌이·개미털기형) */
.hxd-hl-kpi.hxd-kpi-both  .hxd-hl-n { color: #38bdf8; }
.hxd-hl-kpi.hxd-kpi-shake .hxd-hl-n { color: #fb7185; }

/* 3주체 표 — 스크롤 없이 전체 노출 (no-scroll full display) */
.hxd-tbl-fullwrap { width: 100%; overflow: visible; }
/* ★ v3.67/3.68: sup-4 RANKING 표 — 5행 후 스크롤 + thead sticky 보강.
   ⚠️ .hxd-tbl-fullwrap{overflow:visible}가 같은 요소에 함께 걸려 스크롤이 죽으므로
      overflow를 여기서 명시적으로 덮어써야 한다(선언 순서상 이 규칙이 뒤 = 우선).
   max-height는 JS(_fitSup4Scroll)가 6번째 행 기준으로 동적 보정(아래는 폴백). */
.hxd-sup4-tblscroll {
    max-height: 270px;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: #334155 transparent;
}
.hxd-sup4-tblscroll::-webkit-scrollbar { width: 8px; }
.hxd-sup4-tblscroll::-webkit-scrollbar-track { background: transparent; }
.hxd-sup4-tblscroll::-webkit-scrollbar-thumb {
    background: #334155; border-radius: 4px;
    border: 2px solid transparent; background-clip: padding-box;
}
.hxd-sup4-tblscroll::-webkit-scrollbar-thumb:hover { background: #475569; background-clip: padding-box; }
.hxd-sup4-tblscroll .hxd-tbl-streak3 thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #070d1a;
}
.hxd-tbl-streak3 { width: 100%; border-collapse: collapse; table-layout: auto; }
.hxd-tbl-streak3 thead th {
    font-size: 10.5px; font-weight: 700; color: #64748b; text-transform: none;
    padding: 8px 8px; border-bottom: 1px solid #1a2540; white-space: nowrap; text-align: left;
}
.hxd-tbl-streak3 thead th small { display: block; font-size: 8.5px; font-weight: 500; color: #475569; margin-top: 1px; }
.hxd-tbl-streak3 th.c, .hxd-tbl-streak3 td.c { text-align: center; }
.hxd-tbl-streak3 th.r, .hxd-tbl-streak3 td.r { text-align: right; }
.hxd-tbl-streak3 td { padding: 7px 8px; border-bottom: 1px solid #111c33; vertical-align: middle; }
.hxd-tbl-streak3 tbody tr:last-child td { border-bottom: none; }
.hxd-tbl-streak3 .hxd-trk { font-size: 11px; font-weight: 700; color: #475569; }
.hxd-tbl-streak3 .hxd-cell-nm { min-width: 120px; }
.hxd-tbl-streak3 .hxd-tnm { font-size: 13.5px; font-weight: 700; color: #f1f5f9; }
.hxd-tbl-streak3 .hxd-tcd { font-size: 10px; color: #64748b; margin-left: 5px; font-weight: 500; }
.hxd-streakrow:hover { background: rgba(56,90,160,.10); }
.hxd-streakrow:hover .hxd-tnm { color: #93c5fd; }

/* 주체별 연속일수 미니 배지 (외국인🌏 / 기관🏛️) */
.hxd-subj {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 99px;
    border: 1px solid transparent; white-space: nowrap;
}
.hxd-subj .hxd-subj-ic { font-style: normal; font-size: 11px; }
.hxd-subj b { font-size: 13px; font-weight: 800; }
.hxd-subj small { font-size: 9px; font-weight: 600; opacity: .8; }
.hxd-subj.is-streak-none   { color: #5b6b85; background: rgba(100,116,139,.08); border-color: rgba(100,116,139,.18); }
.hxd-subj.is-streak-base   { color: #93c5fd; background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.3); }
.hxd-subj.is-streak-mid    { color: #5eead4; background: rgba(20,184,166,.14); border-color: rgba(20,184,166,.35); }
.hxd-subj.is-streak-strong { color: #fdba74; background: rgba(234,88,12,.16); border-color: rgba(234,88,12,.4); }
.hxd-subj.is-streak-blaze  { color: #fcd34d; background: rgba(245,158,11,.18); border-color: rgba(245,158,11,.5); box-shadow: 0 0 8px rgba(251,191,36,.22); }
.hxd-subj.is-sub-dim { opacity: .5; }

/* 개인(개미) 오늘 수급 배지 */
.hxd-ind {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 6px; white-space: nowrap;
}
.hxd-ind-sell { color: #fb7185; background: rgba(244,63,94,.13); }   /* 개인 매도 = 개미털기 신호(붉은톤) */
.hxd-ind-buy  { color: #60a5fa; background: rgba(59,130,246,.12); }  /* 개인 매수 = 개인 동반(차분) */
.hxd-ind-flat { color: #64748b; background: rgba(148,163,184,.1); }

/* 종목명 아래 플래그(쌍끌이/개미털기형) */
.hxd-flags { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: 1px; }
.hxd-flag {
    display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: .2px;
    padding: 1px 6px; border-radius: 4px; white-space: nowrap;
}
.hxd-flag-both  { color: #0b1120; background: linear-gradient(90deg, #60a5fa, #fbbf24); }
.hxd-flag-shake { color: #fff; background: linear-gradient(90deg, #f43f5e, #fb7185); }

/* ════════════════════════════════════════════════════════════
   ★ v3.52 (A+B+C) — 순매수·시총비중 = 한 칸 [오늘 → 누적] 세로 스택
   · 오늘 = 차분(작게/회색) · 누적 = 강조(굵게/컬러)
   · 가로 막대 전부 제거 → 강도는 색점(●)으로만
   ════════════════════════════════════════════════════════════ */
/* 스택 셀 공통 — 위→아래로 오늘/누적 쌓기 */
.hxd-tbl-streak3 .hxd-buystack,
.hxd-tbl-streak3 .hxd-capstack {
    text-align: right; white-space: nowrap; line-height: 1.18; min-width: 92px;
}
/* 오늘 줄 = 차분(작게/회색) */
.hxd-tbl-streak3 .hxd-st-today {
    display: flex; align-items: baseline; justify-content: flex-end; gap: 4px;
    font-size: 11.5px; font-weight: 600; color: #7c8aa3;
}
/* 누적 줄 = 강조(굵게) */
.hxd-tbl-streak3 .hxd-st-cum {
    display: flex; align-items: baseline; justify-content: flex-end; gap: 4px;
    margin-top: 2px;
}
.hxd-tbl-streak3 .hxd-buystack .hxd-st-cum b { font-size: 14.5px; font-weight: 800; color: #f87171; }
/* 라벨('오늘'/'누적') 작은 캡션 */
.hxd-tbl-streak3 .hxd-st-lbl { font-size: 8.5px; font-weight: 600; color: #5b6b85; font-style: normal; }
.hxd-tbl-streak3 .hxd-st-days { font-size: 8.5px; font-weight: 600; color: #64748b; font-style: normal; }

/* 시총비중 — 오늘 % 차분 / 누적 % 강조 + 색점 */
.hxd-tbl-streak3 .hxd-capstack .hxd-st-today .hxd-cap-pct { font-size: 11.5px; font-weight: 700; color: #7c8aa3; }
.hxd-tbl-streak3 .hxd-capstack .hxd-cap-pct-cum { font-size: 14px; font-weight: 900; color: #e2e8f0; }
/* 시총(원) 보조 라벨 */
.hxd-tbl-streak3 .hxd-st-mc { display: block; font-size: 9px; font-weight: 500; color: #475569; margin-top: 1px; }

/* ★ 강도 색점 — 7단계 컬러 (가로 막대 대체) */
.hxd-cap-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 99px;
    background: rgba(148,163,184,.35); flex: 0 0 auto;
    box-shadow: 0 0 0 2px rgba(148,163,184,.08);
}
.hxd-cap-dot.is-calm   { background: #64748b; box-shadow: 0 0 0 2px rgba(100,116,139,.15); }
.hxd-cap-dot.is-weak   { background: #38bdf8; box-shadow: 0 0 0 2px rgba(56,189,248,.18); }
.hxd-cap-dot.is-mid    { background: #2dd4bf; box-shadow: 0 0 0 2px rgba(45,212,191,.2); }
.hxd-cap-dot.is-strong { background: #fb923c; box-shadow: 0 0 0 2px rgba(251,146,60,.22); }
.hxd-cap-dot.is-blaze  { background: #fbbf24; box-shadow: 0 0 6px rgba(251,191,36,.5); }
.hxd-cap-dot.is-mega   { background: #f97316; box-shadow: 0 0 7px rgba(249,115,22,.6); }
.hxd-cap-dot.is-ultra  { background: #f43f5e; box-shadow: 0 0 9px rgba(244,63,94,.7); }

/* 시총비중 셀 (% 크게 + 시총 작게) — sup-1/2 공용 잔여 */
.hxd-tbl-streak3 .hxd-cap-sub { display: block; font-size: 9.5px; font-weight: 500; color: #475569; margin-top: 1px; }

/* 컬럼 패딩 */
.hxd-tbl-streak3 td, .hxd-tbl-streak3 thead th { padding-left: 7px; padding-right: 7px; }

/* ★ 약식(compact) 표 — 3분할 안에서도 가로 스크롤 없이 들어감(5컬럼·누적만) */
.hxd-tbl-streak3.is-compact .hxd-buystack,
.hxd-tbl-streak3.is-compact .hxd-capstack { min-width: 70px; }
.hxd-tbl-streak3.is-compact .hxd-cell-nm { min-width: 92px; }
.hxd-tbl-streak3.is-compact thead th,
.hxd-tbl-streak3.is-compact td { padding-left: 5px; padding-right: 5px; }
.hxd-tbl-streak3.is-compact .hxd-st-cum { justify-content: flex-end; }
/* 약식은 가로 스크롤 불필요 → 강제 visible */
.hxd-row-3 .hxd-pnl-both .hxd-tbl-fullwrap { overflow-x: visible; }
.hxd-row-3 .hxd-pnl-both .hxd-tbl-streak3 { min-width: 0; }

/* ════════════════════════════════════════════════════════════
   ★ v3.53 — 풀폭(전체 후보) 표 = 펼친 별도 컬럼 + 누적 임팩트 막대
   · 오늘 순매수 | 누적 순매수 | 오늘 비중 | 누적 시총비중(막대)
   · 가로 여백이 넉넉하니 한눈에 비교되도록 컬럼을 나눔
   ════════════════════════════════════════════════════════════ */
/* 오늘 순매수 = 차분(작게/회색) */
.hxd-tbl-streak3.is-full .hxd-buy-today {
    font-size: 12px; font-weight: 600; color: #94a3b8; white-space: nowrap; min-width: 74px;
}
/* 누적 순매수 = 강조(굵게/붉은톤) + N일 캡션 */
.hxd-tbl-streak3.is-full .hxd-buy-cum { white-space: nowrap; min-width: 86px; }
.hxd-tbl-streak3.is-full .hxd-buy-cum b { font-size: 14.5px; font-weight: 800; color: #f87171; }
.hxd-tbl-streak3.is-full .hxd-cum-days {
    display: block; font-size: 9px; font-weight: 600; color: #64748b; margin-top: 1px; font-style: normal;
}
/* 오늘 비중 = 작고 차분 */
.hxd-tbl-streak3.is-full .hxd-tcap-today .hxd-cap-pct {
    display: block; font-size: 12px; font-weight: 700; color: #7c8aa3; min-width: 56px;
}
/* 누적 시총비중 = 크게 강조 + 임팩트 막대 + 시총 */
.hxd-tbl-streak3.is-full .hxd-tcap-cum { min-width: 124px; }
.hxd-tbl-streak3.is-full .hxd-tcap-cum .hxd-cap-pct-cum {
    display: block; font-size: 14.5px; font-weight: 900; color: #e2e8f0; line-height: 1.1;
}
.hxd-tbl-streak3.is-full .hxd-tcap-cum .hxd-cap-bar {
    display: block; height: 5px; width: 100%; margin-top: 4px;
    background: rgba(148,163,184,.12); border-radius: 99px; overflow: hidden;
}
.hxd-tbl-streak3.is-full .hxd-tcap-cum .hxd-cap-fill {
    display: block; height: 100%; border-radius: 99px; transition: width .5s ease;
}
.hxd-tbl-streak3.is-full .hxd-tcap-cum .hxd-cap-sub {
    display: block; font-size: 9px; font-weight: 500; color: #475569; margin-top: 2px;
}
/* 누적 시총비중 헤더 살짝 강조 */
.hxd-tbl-streak3.is-full .hxd-th-cumcap { color: #cbd5e1; }
/* 풀폭은 가로 여백 충분 → 행 간 호흡 살짝 ↑ */
.hxd-tbl-streak3.is-full td { padding-top: 9px; padding-bottom: 9px; }

/* 행 강조: 쌍끌이(좌측 그라데이션 스트립) / 개미털기형(붉은 좌측 스트립) */
.hxd-streakrow.is-row-both  { box-shadow: inset 3px 0 0 #38bdf8; }
.hxd-streakrow.is-row-shake { box-shadow: inset 3px 0 0 #fb7185; }
.hxd-streakrow.is-row-both.is-row-shake { box-shadow: inset 3px 0 0 #fb7185, inset 6px 0 0 #38bdf8; }

/* 쌍끌이 전용 패널 살짝 강조 */
.hxd-pnl-both { background: linear-gradient(180deg, rgba(56,189,248,.04), transparent 60%); }
.hxd-pbadge-both { background: linear-gradient(90deg, #2563eb, #d97706) !important; color: #fff !important; }

/* AI 해석 인라인 하이라이트 */
.hxd-ai-hi { color: #38bdf8; font-weight: 800; }
.hxd-ai-hi-red { color: #fb7185; }

/* 좁은 폭: 표 가독성 (no-scroll 유지하되 패딩·폰트 축소) */
@media (max-width: 720px) {
    .hxd-tbl-streak3 thead th, .hxd-tbl-streak3 td { padding: 6px 5px; }
    .hxd-tbl-streak3 .hxd-tnm { font-size: 12.5px; }
    .hxd-tbl-streak3 .hxd-tcd { display: block; margin-left: 0; }
    .hxd-num { font-size: 12px; gap: 3px; }
    .hxd-num b { font-size: 13px; }
    .hxd-num .hxd-num-dot { width: 5px; height: 5px; }
    .hxd-flags { display: flex; margin: 3px 0 0; }
}

/* ════════════════════════════════════════════════════════════════════
   ★ sup-3 v3.60 — 좌우 2열 연속매집 레이아웃 전용
   (🌏 외국인 연속매집 / 🏛️ 기관 연속매집 · ⭐쌍끌이 · 개인 제외)
   기존 .hxd-item / .hxd-cap-* 인프라 재사용 + 신규 뱃지/라벨만 추가
   ════════════════════════════════════════════════════════════════════ */
/* 연속매집 패널 — 헤더 톤(외국인=보라 / 기관=시안) 은 .hxd-tn-for/.hxd-tn-org 재사용 */
.hxd-pnl-streak .hxd-pbadge { margin-left: 8px; }

/* 2열 리스트 섹션 구분 헤더 (그래프 섹션과 시각 분리) */
.hxd-pnl-streakhead {
    margin-top: 6px;
    background: linear-gradient(90deg, rgba(167,139,250,.06), rgba(34,211,238,.06));
    border-top: 2px solid rgba(124,92,250,.35);
}
.hxd-pnl-streakhead .hxd-ptitle { font-size: 15px; }

/* 헤드라인 KPI 색상 (외국인 보라 / 쌍끌이 골드 / 기관 시안) */
.hxd-hl-kpi.hxd-kpi-for  .hxd-hl-n { color: #a78bfa; }
.hxd-hl-kpi.hxd-kpi-org  .hxd-hl-n { color: #22d3ee; }
.hxd-hl-kpi.hxd-kpi-both .hxd-hl-n { color: #fcd34d; }

/* 연속일수 뱃지 (행 안 · .hxd-streak-badge 색팔레트 차용) */
.hxd-item-streakbadge {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    font-size: 11.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 99px;
    white-space: nowrap;
    border: 1px solid transparent;
    color: #93c5fd;
    background: rgba(59,130,246,.12);
    border-color: rgba(59,130,246,.3);
    min-width: 78px;
    justify-content: center;
}
.hxd-item-streakbadge b { font-size: 14px; font-weight: 900; }
.hxd-item-streakbadge i { font-style: normal; font-size: 10px; font-weight: 600; opacity: .85; }
.hxd-item-streakbadge.is-streak-base   { color: #93c5fd; background: rgba(59,130,246,.12);  border-color: rgba(59,130,246,.3); }
.hxd-item-streakbadge.is-streak-mid    { color: #5eead4; background: rgba(20,184,166,.14);  border-color: rgba(20,184,166,.35); }
.hxd-item-streakbadge.is-streak-strong { color: #fdba74; background: rgba(234,88,12,.16);   border-color: rgba(234,88,12,.4); }
.hxd-item-streakbadge.is-streak-blaze  { color: #fcd34d; background: rgba(245,158,11,.18);  border-color: rgba(245,158,11,.5);
    box-shadow: 0 0 10px rgba(251,191,36,.25); }
.hxd-item-streakbadge.is-streak-none   { color: #64748b; background: rgba(100,116,139,.1);  border-color: rgba(100,116,139,.25); }

/* ★ v3.70 A안 — 매집 여력(잔여 매수 여력 금액) 배지
   구조는 .hxd-item-streakbadge 와 동일(emo + <b> + <i>), 색 팔레트만 초록(매집=실탄). */
.hxd-item-avail {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    font-size: 11.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 99px;
    white-space: nowrap;
    border: 1px solid transparent;
    min-width: 86px;
    justify-content: center;
}
.hxd-item-avail b { font-size: 14px; font-weight: 900; }
.hxd-item-avail i { font-style: normal; font-size: 10px; font-weight: 600; opacity: .85; }
/* 여력 있음(잔여 매수 여력 > 0) — 초록(매수 여지 = 실탄) */
.hxd-item-avail.hxd-pos {
    color: #6ee7b7;
    background: rgba(16,185,129,.13);
    border-color: rgba(16,185,129,.38);
}
/* 여력 거의 없음(0원, 사실상 한도 끝물) — 회색 dim */
.hxd-item-avail.hxd-dim {
    color: #64748b;
    background: rgba(100,116,139,.1);
    border-color: rgba(100,116,139,.25);
}

/* ★ v3.72 — 서술형 한도 라인: 「외국인 한도 49% 중 75.5% 소진 · 여력 24.5% (2.8조원)」
   발행주식수 enrich 후 .hxd-lim-pct 가 '산정 중…' → '49%'/'100%' 로 갱신됨. */
.hxd-sup4-limit {
    /* ★ v3.74: 서술형 한도 라인 우측 정렬.
       부모 .hxd-item-info 가 flex 라 margin-left:auto 로 오른쪽 끝으로 밀어낸다. */
    margin-top: 3px;
    margin-left: auto;
    text-align: right;
    font-size: 12px;
    line-height: 1.55;
    color: #94a3b8;
    letter-spacing: -.2px;
    white-space: nowrap;
    flex: 0 0 auto;
}
.hxd-sup4-limit b { font-weight: 800; }
.hxd-sup4-limit .hxd-lim-cap { color: #cbd5e1; }
/* 법적 한도(%) — 규제 종목(49% 등)은 호박색 강조 / 무제한(100%)은 차분한 회청색 */
.hxd-sup4-limit .hxd-lim-pct { color: #94a3b8; }
.hxd-sup4-limit .hxd-lim-pct.hxd-lim-capped {
    color: #fbbf24;
    background: rgba(245,158,11,.13);
    border: 1px solid rgba(245,158,11,.35);
    border-radius: 6px;
    padding: 0 5px;
}
.hxd-sup4-limit .hxd-lim-pct.hxd-lim-full {
    color: #7dd3fc;
}
/* 소진(%) — 강도 7단계 색을 글자색으로 차용 (is-* 클래스가 함께 부여됨) */
.hxd-sup4-limit .hxd-lim-soak { color: #e2e8f0; }
.hxd-sup4-limit .hxd-lim-soak.is-ultra  { color: #f87171; }
.hxd-sup4-limit .hxd-lim-soak.is-mega   { color: #fb923c; }
.hxd-sup4-limit .hxd-lim-soak.is-blaze  { color: #fbbf24; }
.hxd-sup4-limit .hxd-lim-soak.is-strong { color: #fdba74; }
.hxd-sup4-limit .hxd-lim-soak.is-mid    { color: #5eead4; }
.hxd-sup4-limit .hxd-lim-soak.is-weak   { color: #93c5fd; }
.hxd-sup4-limit .hxd-lim-soak.is-calm   { color: #94a3b8; }
/* 남은 여력(%) + 금액 — 초록(추가 매수 여지) */
.hxd-sup4-limit .hxd-lim-rem { color: #6ee7b7; }
.hxd-sup4-limit .hxd-lim-won { color: #34d399; font-weight: 700; }

/* RANKING 표 한도 셀 */
.hxd-tbl-streak3 .hxd-tlim .hxd-lim-pct { font-size: 12px; font-weight: 800; color: #94a3b8; }
.hxd-tbl-streak3 .hxd-tlim .hxd-lim-pct.hxd-lim-capped { color: #fbbf24; }
.hxd-tbl-streak3 .hxd-tlim .hxd-lim-pct.hxd-lim-full   { color: #7dd3fc; }

/* ★ v3.77 — RANKING 표를 서술형 한 줄(우측정렬)로 통합한 셀.
   좌측 패널과 동일한 .hxd-sup4-limit 라인을 <td> 안에서 우측 정렬해 보여준다.
   (셀에는 flex 컨텍스트가 없으므로 margin-left:auto 대신 display:inline + td.r 의 text-align:right 로 정렬) */
.hxd-sup4-tbl td.hxd-tlim-line {
    text-align: right;
    white-space: normal;          /* 셀이 좁으면 줄바꿈 허용(밀려나는 것보다 낫다) */
    padding-right: 10px;
}
.hxd-sup4-tbl td.hxd-tlim-line .hxd-sup4-limit {
    display: inline;              /* td 의 우측정렬을 그대로 따르도록 inline 화 */
    margin: 0;
    white-space: nowrap;
    font-size: 12px;
}
/* 좁은 화면에서 라인이 셀을 넘치면 줄바꿈 허용 */
@media (max-width: 640px) {
    .hxd-sup4-tbl td.hxd-tlim-line .hxd-sup4-limit { white-space: normal; }
}
/* ★ v3.80 — RANKING 표 종목 우측 등락률.
   종목명·코드·등락률을 flex 한 줄(.hxd-sup4-nm)로 묶어 등락률이 *우측 같은 줄* 에 확실히 고정되게 함
   (이전 inline 방식은 셀 너비 부족·미디어쿼리(display:block)로 등락률이 아래로 떨어지던 문제 → flex 로 근본 해결). */
.hxd-sup4-tbl td.hxd-sup4-nmcell { white-space: nowrap; }
.hxd-sup4-tbl .hxd-sup4-nm {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 5px;
}
.hxd-sup4-tbl .hxd-sup4-nm .hxd-tcd  { display: inline; margin-left: 0; }   /* 공용 display:block 덮어쓰기 */
.hxd-sup4-tbl .hxd-sup4-nm .hxd-rate { display: inline-block; flex: 0 0 auto; margin-left: 0; font-size: 11px; padding: 1px 5px; }

/* 누적 순매수 금액 옆 작은 '누적' 라벨 */
.hxd-amt-cap {
    font-style: normal;
    font-size: 9.5px;
    font-weight: 600;
    color: #64748b;
    margin-left: 3px;
    vertical-align: 1px;
}

/* 연속매집 행: 값 그룹은 뱃지 + 금액 2개만(개인 제외) — 여백 정리 */
.hxd-item-streak .hxd-item-vals { gap: 12px; }
.hxd-item-streak .hxd-item-amt { min-width: 86px; }

/* ⭐쌍끌이 별표 — 작은 골드 뱃지 */
.hxd-item-streak .hxd-item-star {
    font-size: 10px;
    font-weight: 800;
    color: #fcd34d;
    background: rgba(251,191,36,.13);
    border: 1px solid rgba(251,191,36,.4);
    border-radius: 99px;
    padding: 1px 6px;
    margin-left: 2px;
    vertical-align: 1px;
}

/* 연속매집 행 cap 영역: 누적 퍼센트 b 색은 .hxd-cap-pct-cum 클래스 색이 적용됨 */
.hxd-item-streak .hxd-cap-pct b { font-size: 12px; font-weight: 800; color: #cbd5e1; }
.hxd-item-streak .hxd-cap-pct b.is-ultra  { color: #fb7185; }
.hxd-item-streak .hxd-cap-pct b.is-mega   { color: #e879f9; }
.hxd-item-streak .hxd-cap-pct b.is-blaze  { color: #fbbf24; }
.hxd-item-streak .hxd-cap-pct b.is-strong { color: #fb923c; }
.hxd-item-streak .hxd-cap-pct b.is-mid    { color: #60a5fa; }
.hxd-item-streak .hxd-cap-pct b.is-weak   { color: #22d3ee; }
.hxd-item-streak .hxd-cap-pct b.is-calm   { color: #64748b; }
.hxd-item-streak .hxd-cap-pct .hxd-cap-dot { margin-right: 5px; }

/* AI 해석: 쌍끌이 강조 줄 + 각주 */
.hxd-ai-line.hxd-ai-gold {
    color: #fde68a;
    background: rgba(251,191,36,.06);
    border-left: 2px solid rgba(251,191,36,.5);
    padding: 8px 12px;
    border-radius: 6px;
}
.hxd-ai-line.hxd-ai-gold b { color: #fde68a; }
.hxd-ai-line.hxd-ai-foot { font-size: 11.5px; color: #64748b; margin-top: 2px; }
.hxd-ai-line.hxd-ai-foot b { color: #94a3b8; }

/* 좁은 폭: 연속매집 행 — 값 그룹 줄바꿈 허용 */
@media (max-width: 720px) {
    .hxd-item-streak .hxd-item-vals { gap: 8px; }
    .hxd-item-streakbadge { min-width: 66px; font-size: 11px; padding: 2px 6px; }
    .hxd-item-streak .hxd-item-amt { min-width: 70px; font-size: 12px; }
}

/* ════════════════════════════════════════════════════════════════════
   ★ sup-4 v3.64 — 외국인 한도소진 레이더 전용
   (🚀 소진율 가속 / 🚨 한도 임박 · 외국인 단일 주체 · 한도소진율 7단계 강도)
   기존 .hxd-item / .hxd-cap-* / .hxd-tn-for/org / 7단계 색 인프라 재사용,
   강도 배지(한도소진율 기준)·임박 표·AI note 보강만 신규 추가
   ════════════════════════════════════════════════════════════════════ */
/* 한도소진율 강도 배지 7단계 — .hxd-item-streakbadge 의 is-* (시총비중 배지와 동일 팔레트) */
.hxd-item-streakbadge.is-calm   { color: #94a3b8; background: rgba(100,116,139,.12); border-color: rgba(100,116,139,.3); }
.hxd-item-streakbadge.is-weak   { color: #38bdf8; background: rgba(14,116,144,.16);  border-color: rgba(56,189,248,.35); }
.hxd-item-streakbadge.is-mid    { color: #5eead4; background: rgba(20,184,166,.16);  border-color: rgba(45,212,191,.4); }
.hxd-item-streakbadge.is-strong { color: #fdba74; background: rgba(234,88,12,.18);   border-color: rgba(234,88,12,.45); }
.hxd-item-streakbadge.is-blaze  { color: #fcd34d; background: rgba(245,158,11,.2);   border-color: rgba(245,158,11,.55);
    box-shadow: 0 0 10px rgba(251,191,36,.25); }
.hxd-item-streakbadge.is-mega   { color: #f0abfc; background: rgba(192,38,211,.2);   border-color: rgba(217,70,239,.55);
    box-shadow: 0 0 10px rgba(217,70,239,.3); }
.hxd-item-streakbadge.is-ultra  { color: #fb7185; background: rgba(185,28,28,.2);    border-color: rgba(244,63,94,.6);
    box-shadow: 0 0 12px rgba(244,63,94,.35); }

/* 헤드라인 KPI — 한도 임박(90%+)은 적색 강조(쌍끌이 골드 칸 재활용 색만 교체) */
.hxd-hl-kpi.hxd-kpi-org .hxd-hl-n { color: #22d3ee; }   /* sup-4: 임박 90%+ = 시안 유지(기존) */

/* 한도 임박 RANKING 표 — compact 표(hxd-tbl-streak3) 위에 행 클릭/종목셀 보강 */
.hxd-tbl-streak3 .hxd-trow:hover { background: rgba(56,189,248,.06); }
.hxd-tbl-streak3 .hxd-trow .hxd-tnm { font-weight: 700; color: #e2e8f0; font-size: 13px; }
.hxd-tbl-streak3 .hxd-trow .hxd-tcd { display: block; font-size: 10px; color: #64748b; font-weight: 500; margin-top: 1px; }
.hxd-tbl-streak3 .hxd-trow .hxd-rk  { color: #94a3b8; font-weight: 800; }
/* 표 안 강도 점(.hxd-subj) — 한도소진율 색(이미 .hxd-subj.is-* 정의 재사용) */
.hxd-tbl-streak3 .hxd-trow .hxd-subj { min-width: 0; padding: 1px 6px; }

/* sup-4 AI note(💡) 줄 — 보조 설명 톤 다운 */
.hxd-ai-line.hxd-ai-note {
    font-size: 12px;
    color: #94a3b8;
    background: rgba(56,189,248,.05);
    border-left: 2px solid rgba(56,189,248,.4);
    padding: 8px 12px;
    border-radius: 6px;
    margin-top: 4px;
}
.hxd-ai-line.hxd-ai-note b { color: #cbd5e1; }

/* sup-4 소진율 게이지 막대 — .hxd-cap-fill 에 7단계 색 적용(기존 .is-* 재사용) */
.hxd-item-streak .hxd-cap-fill.is-ultra,
.hxd-item-streak .hxd-cap-fill.is-mega,
.hxd-item-streak .hxd-cap-fill.is-blaze,
.hxd-item-streak .hxd-cap-fill.is-strong,
.hxd-item-streak .hxd-cap-fill.is-mid,
.hxd-item-streak .hxd-cap-fill.is-weak,
.hxd-item-streak .hxd-cap-fill.is-calm { transition: width .5s cubic-bezier(.4,0,.2,1); }

/* ════════════════════════════════════════════════════════════════════
   ★ sup-5 v3.71 — 외국계 창구 추적기 (sup-1 포맷 준용 재작성)
   · 레이아웃은 sup-1 의 .hxd-* (headline/flow/row3 차트·facts·표/list)를 그대로 재사용.
   · 아래는 sup-5 전용 추가 요소만 정의:
     ① KEY FACTS 주도 창구 TOP3 미니 랭킹(.hxd-brkrank-*)
     ② 순위표 주도 창구 칼럼(.hxd-tbroker)
     ③ 산·판 리스트 창구 칩(.hxd-brk-chip) + 추정금액 배지(data-brkamt-for)
   색 규칙 통일: 매수=빨강(#f87171) / 매도=초록(#34d399)
   ════════════════════════════════════════════════════════════════════ */

/* ── ① KEY FACTS · 주도 외국계 창구 TOP3 미니 랭킹 ── */
.hxd-brkrank {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}
.hxd-brkrank-row {
    display: flex;
    align-items: center;
    gap: 9px;
}
.hxd-brkrank-no {
    flex-shrink: 0;
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 7px;
    background: #0f1a30;
    color: #94a3b8;
    font-size: 12px; font-weight: 800;
}
.hxd-brkrank-row:first-child .hxd-brkrank-no {
    background: linear-gradient(135deg, #a78bfa, #c4b5fd);
    color: #0b1426;
}
.hxd-brkrank-main { flex: 1 1 auto; min-width: 0; }
.hxd-brkrank-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.hxd-brkrank-nm {
    font-size: 13px;
    font-weight: 700;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hxd-brkrank-q { font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.hxd-brkrank-bar {
    position: relative;
    height: 6px;
    background: #0f1a30;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 4px;
}
.hxd-brkrank-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    border-radius: 4px;
    transition: width .55s cubic-bezier(.4,0,.2,1);
}
.hxd-brkrank-fill.is-buy  { background: linear-gradient(90deg, rgba(248,113,113,.35), rgba(248,113,113,.75)); }
.hxd-brkrank-fill.is-sell { background: linear-gradient(90deg, rgba(96,165,250,.35), rgba(96,165,250,.75)); }
.hxd-brkrank-cnt {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 800;
    color: #94a3b8;
    text-align: center;
    min-width: 34px;
}
.hxd-brkrank-cnt small {
    display: block;
    font-size: 9px;
    font-weight: 600;
    color: #475569;
    margin-top: 1px;
}
.hxd-facts-empty {
    font-size: 12px;
    color: #64748b;
    padding: 8px 2px;
}

/* ── ★ v90 · 🏦 외국계 하우스 리더보드 (.hxd-leader / .hxd-ldr-*) ──
   ROW2 우측: 중복 RANKING 표를 대체. 창구 순위 막대(.hxd-brkrank 변형) */
.hxd-leader {
    display: grid;
    grid-template-columns: 1fr 1fr;   /* ★ v91: 2열 그리드로 표시 */
    gap: 10px 14px;
    margin-top: 4px;
}
.hxd-ldr-row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 10px;
    border: 1px solid #1a2540;
    border-radius: 10px;
    background: #0f1a30;
}
@media (max-width: 560px) {
    .hxd-leader { grid-template-columns: 1fr; }  /* 좁은 화면에선 1열 */
}
.hxd-ldr-no {
    flex-shrink: 0;
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 7px;
    background: #060c18;
    color: #94a3b8;
    font-size: 12px; font-weight: 800;
    margin-top: 1px;
}
.hxd-ldr-row:nth-child(1) .hxd-ldr-no {
    background: linear-gradient(135deg, #fbbf24, #fde68a);
    color: #0b1426;
}
.hxd-ldr-row:nth-child(2) .hxd-ldr-no {
    background: linear-gradient(135deg, #94a3b8, #cbd5e1);
    color: #0b1426;
}
.hxd-ldr-row:nth-child(3) .hxd-ldr-no {
    background: linear-gradient(135deg, #b45309, #d97706);
    color: #fff;
}
.hxd-ldr-main { flex: 1 1 auto; min-width: 0; }
.hxd-ldr-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.hxd-ldr-nm {
    font-size: 13.5px;
    font-weight: 700;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hxd-ldr-q { font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.hxd-ldr-bar {
    position: relative;
    height: 7px;
    background: #060c18;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 5px;
}
.hxd-ldr-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    border-radius: 4px;
    transition: width .55s cubic-bezier(.4,0,.2,1);
}
.hxd-ldr-fill.is-buy  { background: linear-gradient(90deg, rgba(248,113,113,.35), rgba(248,113,113,.85)); }
.hxd-ldr-fill.is-sell { background: linear-gradient(90deg, rgba(96,165,250,.35), rgba(96,165,250,.85)); }
.hxd-ldr-cnt {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 800;
    color: #94a3b8;
    text-align: center;
    min-width: 36px;
    margin-top: 1px;
}
.hxd-ldr-cnt small {
    display: block;
    font-size: 9px;
    font-weight: 600;
    color: #475569;
    margin-top: 1px;
}
.hxd-ldr-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}
.hxd-ldr-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid #1a2540;
    background: #060c18;
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: border-color .15s, background .15s, color .15s;
}
.hxd-ldr-chip:hover { border-color: #2d3f63; background: #15233f; color: #f1f5f9; }
.hxd-ldr-chip.is-buy:hover  { border-color: rgba(248,113,113,.5); }
.hxd-ldr-chip.is-sell:hover { border-color: rgba(96,165,250,.5); }

/* ── ② RANKING 표 · 주도 창구 칼럼 ── */
.hxd-tbroker {
    font-size: 12px;
    font-weight: 600;
    color: #c4b5fd;
    white-space: nowrap;
}

/* ── ③ 산·판 리스트 — 외국계 창구 칩 + 추정금액 배지 ── */
.hxd-item-brk .hxd-item-info { gap: 4px; }
.hxd-brk-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 5px;
}
.hxd-brk-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid #1e2d4a;
    background: #0f1a30;
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
}
.hxd-brk-chip small { font-size: 9.5px; color: #64748b; font-weight: 500; }
.hxd-brk-chip.is-buy  { border-color: rgba(248,113,113,.35); color: #fca5a5; }
.hxd-brk-chip.is-sell { border-color: rgba(96,165,250,.35); color: #93c5fd; }
/* 추정금액 배지 — 산정 전 회색, 산정 후 매수=빨강/매도=초록 */
.hxd-item-amt[data-brkamt-for] { color: #64748b; }
.hxd-item-amt[data-brkamt-for].hxd-pos { color: #f87171; }
.hxd-item-amt[data-brkamt-for].hxd-neg { color: #34d399; }

/* ── 반응형 (좁은 폭) ── */
@media (max-width: 720px) {
    .hxd-brkrank-nm { font-size: 12px; }
    .hxd-tbroker { font-size: 11px; }
}

/* ════════════════════════════════════════════════════════════════════
   ★ amt-0 v3.74 — 변동성 크고 거래가 활발한 종목 (ka00198 + ka10023 병합)
   · 복합점수 상위 리스트(랭크 · 등락률 · 점수바 · 거래량/급증/관심 메타)
   · 색 규칙: 상승=빨강(.hxd-pos #f87171) / 하락=파랑(.hxd-neg #60a5fa)
   ════════════════════════════════════════════════════════════════════ */
/* 패널 헤더 (이모지 + 제목 + 부제) */
.hxd-pnl-list .hxd-phead {
    align-items: center;
}
.hxd-phead-ico {
    flex-shrink: 0;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9px;
    background: linear-gradient(135deg, rgba(245,158,11,.18), rgba(249,115,22,.1));
    border: 1px solid rgba(245,158,11,.3);
    font-size: 15px;
}
.hxd-phead-txt { min-width: 0; flex: 1; }
.hxd-phead-title {
    margin: 0;
    font-size: 13.5px;
    font-weight: 800;
    color: #f1f5f9;
    line-height: 1.3;
}
.hxd-phead-sub {
    margin: 2px 0 0;
    font-size: 11.5px;
    color: #94a3b8;
    line-height: 1.4;
}

/* 리스트 컨테이너 */
.hxd-va-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* 각 종목 행 */
.hxd-va-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 10px 12px;
    border: 1px solid #1a2540;
    border-radius: 10px;
    background: #0f1a30;
    transition: border-color .15s, background .15s;
}
.hxd-va-item:hover { border-color: #2d3f63; background: #15233f; }
/* 순위 뱃지 */
.hxd-va-rank {
    flex-shrink: 0;
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: #060c18;
    color: #94a3b8;
    font-size: 12.5px; font-weight: 800;
    margin-top: 1px;
}
.hxd-va-item:nth-child(1) .hxd-va-rank { background: linear-gradient(135deg, #fbbf24, #fde68a); color: #0b1426; }
.hxd-va-item:nth-child(2) .hxd-va-rank { background: linear-gradient(135deg, #94a3b8, #cbd5e1); color: #0b1426; }
.hxd-va-item:nth-child(3) .hxd-va-rank { background: linear-gradient(135deg, #b45309, #d97706); color: #fff; }

.hxd-va-main { flex: 1 1 auto; min-width: 0; }
/* 1행: 종목명 · 코드 · 등락률 */
.hxd-va-line1 {
    display: flex;
    align-items: baseline;
    gap: 7px;
    flex-wrap: wrap;
}
.hxd-va-name {
    font-size: 14px;
    font-weight: 700;
    color: #f1f5f9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}
.hxd-va-code {
    font-size: 10.5px;
    font-weight: 500;
    color: #64748b;
}
.hxd-va-chg {
    margin-left: auto;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}
/* 점수 바 */
.hxd-va-bar {
    position: relative;
    height: 16px;
    background: #060c18;
    border-radius: 5px;
    overflow: hidden;
    margin: 6px 0 5px;
}
.hxd-va-bar-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    border-radius: 5px;
    background: linear-gradient(90deg, rgba(245,158,11,.45), rgba(249,115,22,.9));
    transition: width .55s cubic-bezier(.4,0,.2,1);
}
.hxd-va-score {
    position: absolute;
    right: 8px; top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    font-weight: 800;
    color: #fde68a;
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
    white-space: nowrap;
}
/* 2행: 가격 · 거래량 · 급증 · 관심 메타 */
.hxd-va-line2 {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}
.hxd-va-meta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: #94a3b8;
    white-space: nowrap;
}
.hxd-va-meta i { font-size: 10px; opacity: .85; }
.hxd-va-meta.hxd-pos { color: #fca5a5; }

@media (max-width: 720px) {
    .hxd-va-item { gap: 8px; padding: 9px 10px; }
    .hxd-va-name { font-size: 13px; max-width: 150px; }
    .hxd-va-chg { font-size: 12px; }
    .hxd-va-line2 { gap: 3px 9px; }
    .hxd-va-meta { font-size: 11px; }
}