/* ── 이거왜오름? 전용 — 글래스풍 + 토스증권 팔레트 ── */

:root {
    /* 베이스 — 토스 다크 매치 */
    --wr-bg-base: #191919;
    --wr-bg-soft: #1F1F1F;

    /* 글래스 */
    --glass-bg: rgba(255, 255, 255, 0.035);
    --glass-bg-strong: rgba(255, 255, 255, 0.06);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-border-strong: rgba(255, 255, 255, 0.14);
    --glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);

    /* 액센트 — 토스 블루 */
    --wr-accent: #3182F6;
    --wr-accent-2: #3182F6;
    --wr-accent-strong: #1B64DA;
    --wr-accent-soft: rgba(49, 130, 246, 0.14);
    --wr-accent-bg: rgba(49, 130, 246, 0.18);
    /* 그라데이션 변수는 호환용 — 단색 처리 (그라데이션 제거) */
    --gradient-accent: var(--wr-accent);
    --gradient-accent-soft: var(--wr-accent-soft);

    /* 상승 — 한국 증시 색 (토스 빨강) */
    --wr-rise: #F04452;
    --wr-rise-soft: rgba(240, 68, 82, 0.12);
}

body {
    background: var(--wr-bg-base);
    color: #FFFFFF;
    min-height: 100vh;
}
[data-theme="light"] body {
    background: #F2F4F6;
    color: #191919;
}
[data-theme="light"] {
    --wr-accent: #3182F6;
    --wr-accent-2: #3182F6;
    --wr-accent-strong: #1B64DA;
    --wr-accent-soft: rgba(49, 130, 246, 0.12);
    --wr-accent-bg: rgba(49, 130, 246, 0.14);
    --gradient-accent: var(--wr-accent);
    --gradient-accent-soft: var(--wr-accent-soft);
    --wr-rise: #F04452;
    --wr-rise-soft: rgba(240, 68, 82, 0.10);
    --glass-bg: rgba(255, 255, 255, 0.6);
    --glass-bg-strong: rgba(255, 255, 255, 0.8);
    --glass-border: rgba(0, 0, 0, 0.06);
    --glass-border-strong: rgba(0, 0, 0, 0.1);
    --glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
}

/* style.css 의 --orange 사용처 호환 — 기존 변수도 새 톤으로 매핑 */
:root {
    --orange: var(--wr-accent);
    --rise: var(--wr-rise);
    --accent: var(--wr-accent);
}

/* drawer 안 테마 아이템 — PC 에서는 항상 숨김 (모바일 @media 에서만 노출) */
.top-bar__theme-item { display: none; }

/* 글래스 공통 클래스 */
.glass {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: var(--glass-shadow);
}

/* 로고 — 다크: 흰색, 라이트: 블랙 (SVG fill 은 currentColor) */
.top-bar__logo {
    color: #fff;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 1;
}
[data-theme="light"] .top-bar__logo { color: #191919; }
.top-bar__logo-svg {
    height: 26px;
    width: auto;
    display: block;
}
/* 스크린리더 전용 — 화면엔 안 보임 */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}
/* top-bar — 스크롤 시 hero 가 뒤로 흘러가도록 sticky + z-index 최상위.
   그래야 backdrop-filter 가 hero 컨텐츠 blur 처리. */
.top-bar {
    position: sticky;
    top: 0;
    z-index: 500;
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid var(--glass-border);
}
.top-bar .top-bar__link {
    color: var(--text-secondary);
    padding: 6px 14px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: all .15s;
    background: transparent;
}
/* 회색 호버 — 둘 다 잘 보이도록 강화 (0.06 → 0.12) */
.top-bar .top-bar__link:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.12);
}
[data-theme="light"] .top-bar .top-bar__link:hover {
    background: rgba(0, 0, 0, 0.06);
}
/* 활성 — 박스/블루 제거, 메인 텍스트 컬러 + 볼드. 비활성은 var(--text-secondary) 그레이 */
.top-bar .top-bar__link--active {
    color: var(--text-primary);
    background: transparent;
    font-weight: 800;
}
.top-bar .top-bar__link--active:hover {
    color: var(--text-primary);
    background: transparent;
}
.top-bar__nav { display: flex; gap: 4px; }

.top-bar__auth {
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    transition: background .15s, color .15s;
}
.top-bar__auth:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.12);
}
[data-theme="light"] .top-bar__auth:hover { background: rgba(0, 0, 0, 0.06); }
.top-bar__auth[hidden],
.top-bar__auth-item[hidden] {
    display: none !important;
}
.top-bar__auth-item { display: none !important; }
.theme-toggle__icon,
.top-bar__auth-icon {
    display: block;
    flex: 0 0 auto;
}

/* 햄버거 버튼 — PC 에선 숨김 */
.top-bar__hamburger {
    display: none;
    background: transparent;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
}
.top-bar__hamburger:hover { background: var(--glass-bg); }

@media (max-width: 768px) {
    .top-bar { position: relative; }
    .top-bar__hamburger { display: inline-flex; }
    /* 모바일: nav 가 display:none 이면 grid 가 [logo, right] 2개를 col1/col2 로 auto-place 해서
       오른쪽 끝(col3, 1fr) 이 비고 햄버거가 중앙에 떠 보이던 문제 → grid-column:3 명시 + 우측 정렬 */
    .top-bar__right { grid-column: 3; justify-self: end; gap: 4px; }
    .top-bar__right .theme-toggle { display: none; }
    .top-bar__right .top-bar__auth { display: none; }
    .top-bar__right .top-bar__hamburger { margin-left: auto; order: 99; }
    /* drawer 안 테마 아이템 — 메뉴 마지막에 노출.
       분리선은 별도 ::before pseudo 로 drawer 풀폭 (좌우 padding 침범 부분까지) 확장.
       이전에 border-top + border-radius 가 함께 적용돼 모서리에서 선이 끊겨 보이던 문제 해결. */
    .top-bar__theme-item {
        position: relative;
        background: transparent;
        border: none;
        font: inherit;
        cursor: pointer;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 13px 16px;
        min-height: 44px;
        font-size: 16px;
        border-radius: 8px;
        text-align: left;
        margin-top: 10px;
        width: 100%;
    }
    /* 분리선 — drawer 좌우 padding(16px) 까지 침범해서 풀폭으로 표시 */
    .top-bar__theme-item::before {
        content: '';
        position: absolute;
        left: -16px;
        right: -16px;
        top: -5px;
        height: 1px;
        background: var(--glass-border);
        pointer-events: none;
    }
    .top-bar__theme-item:hover { background: var(--glass-bg); }
    .top-bar__theme-item-label { line-height: 1; }
    .top-bar__nav {
        display: none;
        position: absolute;
        top: 100%; left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 10px 16px 14px;
        background: var(--wr-bg-base);
        border-bottom: 1px solid var(--glass-border);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
        overflow: visible;
        z-index: 600;
    }
    [data-theme="light"] .top-bar__nav { background: #ffffff; box-shadow: 0 12px 32px rgba(0,0,0,.12); }
    .top-bar__nav--open { display: flex; }
    .top-bar__nav .top-bar__link {
        padding: 13px 16px;
        font-size: 16px;
        border-radius: 8px;
        text-align: left;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    .top-bar__nav .top-bar__link--active { background: var(--glass-bg); }
    .top-bar__auth-item {
        position: relative;
        border: 0;
        background: transparent;
        cursor: pointer;
        color: var(--text-primary);
        width: 100%;
        display: flex !important;
        align-items: center;
        gap: 10px;
        font: inherit;
        font-weight: 700;
    }
    .top-bar__nav--has-auth .top-bar__auth-item {
        margin-top: 10px;
    }
    .top-bar__nav--has-auth .top-bar__auth-item::before {
        content: '';
        position: absolute;
        left: -16px;
        right: -16px;
        top: -5px;
        height: 1px;
        background: var(--glass-border);
        pointer-events: none;
    }
    .top-bar__nav--has-auth .top-bar__theme-item {
        margin-top: 0;
    }
    .top-bar__nav--has-auth .top-bar__theme-item::before {
        display: none;
    }
    /* drawer 가 좁아 보이는 시각 이슈 — width 100% 명시 + 좌우 외부 backdrop dim 으로 풀와이드 인상 강화 */
    .top-bar__nav--open { width: 100%; }
}

.auth-modal { z-index: 900; }
.auth-modal__box {
    width: min(92vw, 420px);
}
.auth-modal__body {
    padding: 18px 22px 20px;
}
.auth-modal__text {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.55;
    word-break: keep-all;
}
.auth-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}
.auth-modal__login,
.auth-modal__cancel {
    min-height: 40px;
    border-radius: 8px;
    padding: 0 14px;
    border: 1px solid var(--glass-border);
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
}
.auth-modal__login {
    color: #fff;
    background: var(--wr-accent);
    border-color: var(--wr-accent);
}
.auth-modal__login:hover { background: var(--wr-accent-strong); }
.auth-modal__cancel {
    color: var(--text-primary);
    background: var(--glass-bg);
}
.auth-modal__cancel:hover { background: var(--glass-bg-strong); }

@media (max-width: 768px) {
    .auth-modal__actions {
        flex-direction: column;
        margin-top: 20px;
    }
    .auth-modal__login,
    .auth-modal__cancel {
        width: 100%;
        min-height: 46px;
    }
    .auth-modal__body {
        padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    }
}

/* ── Hero 검색 ────────────────────────────── */
.hero {
    padding: 72px 0 44px;
    position: relative;
    z-index: 10;   /* 자동완성이 테이블 위로 올라오게 (top-bar=500 보다는 낮게) */
}
.hero--mini { padding: 24px 0; }
.hero__inner { text-align: center; }
.hero__search-wrap {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    max-width: 720px;
    width: 92%;
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border-strong);
    border-radius: 999px;
    padding: 20px 32px;
    box-shadow: var(--glass-shadow);
    transition: all .25s;
    z-index: 1;
}
/* search-wrap 자체는 blur 제거 (자식 backdrop-filter 충돌 방지) */
.hero__search-wrap:focus-within {
    border-color: var(--orange);
    border-width: 2px;
    /* border 2px 되며 1px 증가분만큼 padding 보정해 컨텐츠 점프 방지 */
    padding: 19px 31px;
    box-shadow: 0 12px 48px rgba(49, 130, 246, 0.25);
    transform: translateY(-1px);
}
.hero__search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 28px;
    font-weight: 700;
    font-family: inherit;
    min-width: 0;
    letter-spacing: -0.3px;
}
.hero--mini .hero__search-input { font-size: 17px; }
.hero__search-input::placeholder {
    color: var(--text-muted);
    font-weight: 700;
    transition: opacity .25s ease;
    opacity: 1;
}
.hero__search-input.placeholder-fading::placeholder { opacity: 0; }
.hero__placeholder-suffix {
    color: var(--wr-accent);
    font-size: 24px;
    font-weight: 800;
    flex-shrink: 0;
}
.hero--mini .hero__placeholder-suffix { font-size: 15px; }
.hero__subtitle {
    margin-top: 26px;
    color: var(--text-secondary);
    font-size: 15px;
    letter-spacing: -.1px;
}
.hero__subtitle strong {
    color: inherit;
    font-weight: 800;
}

/* 자동완성 — 진한 글래스 (parent backdrop-filter 없으니 자식이 잘 작동) */
.hero__suggest {
    position: absolute;
    left: 0; right: 0; top: 100%;
    margin-top: 10px;
    background: rgba(25, 25, 25, 0.85);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--glass-border-strong);
    border-radius: 16px;
    list-style: none;
    padding: 8px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
    z-index: 1000;
    max-height: 360px;
    overflow-y: auto;
    text-align: left;
}
[data-theme="light"] .hero__suggest {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
}
.hero__suggest li {
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    transition: background .15s;
}
.hero__suggest li:hover,
.hero__suggest li.active { background: var(--glass-bg-strong); }
.hero__suggest li .ticker { color: var(--text-muted); font-size: 12px; }
.hero__suggest li .badge {
    background: rgba(49, 130, 246, .2); color: var(--orange);
    padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700;
}

/* ── 단순 툴바 (날짜 좌, 관심 우 — 메인 컬럼 폭에 한정) ── */
.toolbar--simple {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 4px;
    margin-bottom: 8px;
}
.toolbar--simple .report__date-bar {
    display: flex;
    align-items: center;
    gap: 8px;
}
.toolbar--simple .toolbar__right {
    display: flex;
    align-items: center;
}
.cutoff-count {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

/* ── 메인 + 사이드 레이아웃 ───────────────── */
.layout-split {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
    margin-top: 8px;
    align-items: stretch;   /* 위젯이 메인 높이만큼 늘어남 */
}
@media (max-width: 1100px) {
    .layout-split { grid-template-columns: 1fr; align-items: start; }
}
.layout-aside {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.layout-main { min-width: 0; }

/* ── 위젯 — 글래스풍 (메인 테이블 thead 와 정확한 y 라인 정렬) ── */
.widget {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 8px 14px;        /* table-wrap padding 8px 14px 와 정확히 동일 */
    margin-bottom: 18px;
    box-shadow: var(--glass-shadow);
}
.widget__title {
    /* thead th 와 100% 동일 box: padding 14px 10px / font-size 11px / line-height 1 */
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    padding: 14px 10px;
    margin: 0;
    line-height: 1;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--glass-border);
}
.widget__list { padding: 0 10px; }   /* thead th padding-left 와 동일 */
.widget__caption { padding: 0 10px; }
.widget__list { list-style: none; padding: 0; margin: 0; }
.widget__list li {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--glass-border);
    font-size: 13px;
}
.widget__list li:last-child { border-bottom: none; }
.widget__list li a {
    color: var(--text-primary); text-decoration: none; font-weight: 600;
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    letter-spacing: -.1px;
}
.widget__list li a:hover { color: var(--orange); }
.widget__list li .count {
    background: var(--wr-accent-bg);
    color: var(--wr-accent);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0; margin-left: 8px;
    border: 1px solid var(--wr-accent-soft);
}
.widget__caption { font-size: 11px; color: var(--text-muted); margin-top: 12px; }
.widget__loading,
.widget__empty { padding: 16px 0; text-align: center; color: var(--text-muted); font-size: 12px; }

/* ── 메인 테이블 (이유 hero) — 글래스풍 ──── */
.table-wrap.glass {
    padding: 8px 14px;
    overflow-x: auto;
}
.whyrise-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 900px;
}
.whyrise-table thead th {
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 14px 10px;
    border-bottom: 1px solid var(--glass-border);
    text-align: left;
    white-space: nowrap;
}
.whyrise-table td {
    padding: 16px 10px;
    border-bottom: 1px solid var(--glass-border);
    vertical-align: middle;
    font-size: 13.5px;
}
.whyrise-table tbody tr {
    transition: background .15s;
}
.whyrise-table tbody tr:hover { background: var(--glass-bg); }
.whyrise-table tbody tr:last-child td { border-bottom: none; }
/* 상한가 행 배경 강조 제거 — hover 톤만 글래스 기본 */

.whyrise-table .col-rank { width: 36px; text-align: center; }
.whyrise-table .col-name { min-width: 180px; }
.whyrise-table .col-reason--hero { min-width: 280px; }
.whyrise-table .col-change { width: 90px; text-align: right; }
.whyrise-table .col-volume { width: 100px; text-align: right; }
.whyrise-table .col-cap { width: 100px; text-align: right; }
.whyrise-table .col-sector { width: 130px; }

/* 정렬 헤더 — 모든 컬럼 항상 ▼ 디폴트, 활성 시 액센트 색 + 방향 따라 ▲/▼ */
.whyrise-table th.th-sort,
.whyrise-table th.th-rank-reset {
    cursor: pointer;
    user-select: none;
    transition: color .15s;
}
.whyrise-table th.th-sort:hover,
.whyrise-table th.th-rank-reset:hover { color: var(--text-secondary); }
.whyrise-table th.th-sort--active { color: var(--wr-accent); }
.whyrise-table th.th-sort .sort-ind {
    display: inline-block;
    margin-left: 3px;
    font-size: 8px;
    font-weight: 700;
    vertical-align: middle;
    opacity: 0.35;
    transition: opacity .15s;
}
.whyrise-table th.th-sort:hover .sort-ind { opacity: 0.7; }
.whyrise-table th.th-sort--active .sort-ind { opacity: 1; }

.whyrise-table .cell-rank {
    text-align: center;
    font-weight: 700;
    color: var(--text-muted);
    font-feature-settings: 'tnum';
}
.whyrise-table .cell-name__link {
    color: var(--text-primary);
    font-weight: 700;
    text-decoration: none;
    letter-spacing: -.2px;
}
.whyrise-table .cell-name__link:hover { color: var(--orange); }
.whyrise-table .cell-name__market,
.report-stock-market,
.report-stock-row__market,
.stock-card__market,
.compact-row__market {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 17px;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--glass-bg);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
    letter-spacing: 0;
}
.whyrise-table .cell-name__market {
    margin-left: 4px;
}
.ctrl-wrap,
.mini-indicators,
.star-rating {
    align-items: center;
    line-height: 1;
}
.star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transform: translateY(1px);
}
.mini-star {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    transform: translateY(1px);
}
.whyrise-table .cell-cap,
.whyrise-table .cell-change,
.whyrise-table .cell-volume {
    text-align: right;
    font-feature-settings: 'tnum';
    font-weight: 600;
}
.whyrise-table .cell-change--up {
    color: var(--rise);
    font-weight: 700;
}
.cell-change__date {
    display: block;
    margin-bottom: 2px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.whyrise-table .cell-sector {
    color: var(--text-secondary);
    font-size: 12px;
    white-space: nowrap;
}

/* 이유 hero — 한 줄 inline */
.whyrise-table .cell-reason__inline {
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.4;
    min-width: 0;
}
.whyrise-table .cell-reason__text {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.whyrise-table .theme-tag,
.theme-tag {
    background: var(--wr-accent-bg);
    color: var(--wr-accent);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    border: 1px solid var(--wr-accent-soft);
    display: inline-block;
}

/* admin 편집 표식 */
.whyrise-table tr.row--edited .cell-reason::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    background: var(--orange);
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 6px;
}
.whyrise-table .admin-edit-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    margin-left: 8px;
    vertical-align: middle;
}
.whyrise-table .admin-edit-btn:hover { border-color: var(--orange); color: var(--orange); }

/* ── 종목 페이지 — 글래스풍 ──────────────── */
.stock-page { padding-top: 28px; padding-bottom: 56px; }
.stock-header {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 28px 32px;
    margin-bottom: 24px;
    box-shadow: var(--glass-shadow);
}
.stock-header__title-row {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.stock-header__title {
    font-size: 36px; font-weight: 800; letter-spacing: -1.5px; color: var(--text-primary);
    line-height: 1.1;
    cursor: default;
}
.stock-header__title strong {
    color: var(--wr-accent);
}
/* 시장 뱃지 — 메인 홈 테이블(.cell-name__market)과 동일한 톤, 사이즈만 헤더용 */
.stock-header__market {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-bg);
    color: var(--text-muted);
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.35;
}
/* 네이버 증권 바로가기 — 우측 정렬 */
.stock-header__naver {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: color .15s, border-color .15s, background .15s;
}
.stock-header__naver:hover {
    color: var(--text-primary);
    border-color: var(--glass-border-strong);
    background: var(--glass-bg);
}
.stock-header__naver svg { flex-shrink: 0; }
/* 네이버 링크는 우측 끝 정렬 (별점 마운트는 KOSPI 옆에 두고 네이버는 행 끝) */
.stock-header__naver { margin-left: auto; }

/* 헤더 별점 — 메인 홈과 동일한 .ctrl-wrap/.float-controls/.star/.exclude-btn/.memo-btn
   클래스 그대로 사용 (style.css 가 모두 처리). 여기서는 호버 트리거 + 앵커 보정. */
.stock-header__rating-mount {
    /* 모바일 미디어쿼리에서 style.css 가 .ctrl-wrap{position:static} 으로
       만들기 때문에, .float-controls 의 absolute 앵커가 페이지 body 까지
       올라가 하단으로 떨어짐. 마운트를 relative 로 두어 앵커 역할. */
    position: relative;
    display: inline-flex;
    align-items: center;
}
.stock-header__rating-mount[hidden] { display: none; }
/* PC 만 호버 트리거. 모바일은 .ctrl-toggle 탭 → .is-open 토글로 제어.
   @media (hover:hover) 로 감싸 모바일에서 sticky hover 가 활성화되어도
   규칙 자체가 매치 안 되도록 함 (메인 style.css line 147 와 동일 패턴). */
@media (hover: hover) {
    .stock-header__title-row:hover .float-controls,
    .stock-header__title-row .float-controls:hover {
        opacity: 1;
        pointer-events: auto;
        transition-delay: 0s;
    }
}

.stock-header__stats {
    display: flex; gap: 32px; margin-top: 22px; flex-wrap: wrap;
}
.stock-header__stat { display: flex; flex-direction: column; gap: 4px; }
.stock-header__stat-label {
    font-size: 11px; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600;
}
.stock-header__stat-value {
    font-size: 24px; font-weight: 800; color: var(--text-primary);
    letter-spacing: -.5px;
}
.stock-header__stat-value--rise {
    color: var(--wr-accent);
}
.stock-header__summary {
    margin-top: 14px;
    font-size: 20px;
    font-weight: 600;
    color: var(--wr-accent);
    letter-spacing: -.3px;
    line-height: 1.4;
}
.stock-header__caption { margin-top: 22px; font-size: 13px; color: var(--text-secondary); }

/* 종목 주요 기사 — 카드별 반복 대신 상단에서 중복 제거 */
.stock-news-panel {
    margin: 18px 0 22px;
    padding: 18px 20px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.stock-news-panel__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.stock-news-panel__head h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -.2px;
}
.stock-news-panel__head span {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}
.stock-news-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.stock-news-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 11px 12px;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg-strong);
    color: var(--text-primary);
    text-decoration: none;
    transition: background .15s, border-color .15s, transform .15s;
}
.stock-news-item:hover {
    background: var(--bg-hover);
    border-color: var(--glass-border-strong);
    transform: translateY(-1px);
}
.stock-news-item__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}
.stock-news-item__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.4;
    color: var(--text-primary);
}

/* 타임라인 카드 — 글래스풍 */
.timeline { display: flex; flex-direction: column; gap: 14px; }
.event-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 20px 22px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transition: transform .2s, box-shadow .2s;
}
.event-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
}
.event-card.row--edited,
.event-card.row--missing { opacity: 1; }
.event-card__top {
    display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.event-card__date { font-size: 16px; font-weight: 700; }
.event-card__rate {
    font-size: 20px; font-weight: 800;
    color: var(--wr-accent);
    letter-spacing: -.5px;
}
.event-card__price { color: var(--text-secondary); font-size: 13px; font-feature-settings: 'tnum'; }
.event-card__theme {
    background: var(--wr-accent-bg);
    color: var(--wr-accent);
    border: 1px solid var(--wr-accent-soft);
    padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700;
}
.event-card__reason {
    font-size: 16px; font-weight: 600; color: var(--text-primary);
    margin-top: 14px; line-height: 1.55;
    letter-spacing: -.2px;
}
.event-card__news {
    margin-top: 14px; display: flex; flex-direction: column; gap: 6px;
}
.event-card__news a {
    font-size: 13px; color: var(--text-secondary); text-decoration: none;
    padding: 8px 12px; border-radius: 10px;
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    display: flex; gap: 8px; align-items: baseline;
    transition: all .15s;
}
.event-card__news a:hover {
    background: var(--glass-bg-strong);
    color: var(--text-primary);
    transform: translateX(2px);
}
.event-card__news .news-source { color: var(--text-muted); font-size: 11px; flex-shrink: 0; }
.event-card__edit { margin-left: auto; }
.event-empty {
    padding: 60px 24px;
    text-align: center;
    color: var(--text-muted);
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
}

/* 타임라인 — confidence/status 별 톤 */
.timeline__year {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-secondary);
    margin: 24px 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}
.event-card.row--edited,
.event-card.row--missing { opacity: 1; }
.event-card__reason--high { color: var(--text-primary); font-weight: 600; }
.event-card__reason--mid { color: var(--text-primary); font-weight: 500; }
.event-card__reason--low { color: var(--text-secondary); font-weight: 500; }
.event-card__reason--edited { color: var(--orange); font-weight: 700; }
.event-card__reason--missing {
    color: var(--text-muted);
    font-style: italic;
    font-weight: 400;
}
.event-card__limit {
    background: rgba(240,68,82,.15); color: var(--rise);
    padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700;
}
.event-card__highflag {
    background: rgba(255,209,102,.18); color: var(--yellow);
    padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700;
}
.event-card__source-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    margin-left: auto;
}
.event-card__source-badge.badge--filled {
    background: rgba(46,213,115,.15); color: var(--green);
}
.event-card__source-badge.badge--admin {
    background: rgba(49, 130, 246, .15); color: var(--orange);
}
.event-card__source-badge.badge--news {
    background: rgba(49,130,246,.15); color: var(--accent);
}
.event-card__source-badge.badge--theme {
    background: rgba(199,163,255,.15); color: #c7a3ff;
}
.event-card__source-badge.badge--pattern {
    background: rgba(170,170,170,.15); color: var(--text-muted);
}

/* ── 관리자 페이지 ──────────────────────────── */
.admin-page { max-width: 720px; margin: 0 auto; padding: 40px 24px; }
.admin-page__title { font-size: 28px; margin-bottom: 28px; }
.admin-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    padding: 28px;
    margin-bottom: 18px;
    box-shadow: var(--glass-shadow);
}
.admin-card h2 { font-size: 18px; margin-bottom: 12px; }
.admin-card__desc { color: var(--text-secondary); font-size: 13px; margin-bottom: 14px; line-height: 1.6; }
.admin-card__desc code {
    background: var(--bg-tertiary); padding: 2px 6px; border-radius: 4px; font-size: 12px;
}
.admin-card__error { color: var(--rise); font-size: 13px; margin-top: 10px; }
.admin-card__actions { display: flex; gap: 10px; align-items: center; }
.admin-card__actions a, .admin-card__actions button {
    text-decoration: none; padding: 10px 18px; border-radius: 8px; font-weight: 600;
}
#adminLoginForm { display: flex; gap: 10px; }
#adminLoginForm input { flex: 1; }
#adminLoginForm button { padding: 10px 18px; cursor: pointer; }

/* footer — 글래스 */
.footer__wrap {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--glass-border);
}
/* disclaimer — style.css 의 max-width:600 override (한 줄 더 흡수) */
.footer__disclaimer { max-width: 820px; }
/* ── 기간 토글 (report 페이지 등에서 사용) ─────── */
.bubble-toggle {
    display: inline-flex;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    padding: 3px;
}
.bubble-toggle button {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    cursor: pointer;
    transition: all .15s;
    font-family: inherit;
}
.bubble-toggle button:hover { color: var(--text-primary); }
.bubble-toggle button.active { background: var(--wr-accent); color: #fff; }

/* ── 트리맵 (시총 TOP 100 KOSPI + 100 KOSDAQ, 라이브 5s polling) ── */
body.page-treemap {
    overflow: hidden;
    /* 모바일 사파리/크롬 주소창 가림 보정 — dvh 는 chrome 표시 따라 동적 갱신.
       PC 에서는 dvh 와 vh 가 동일 → PC 영향 없음. dvh 미지원 구형 브라우저는 vh 폴백. */
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
}
.tmap-bar {
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary, var(--bg));
    flex-shrink: 0;
}
.tmap-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    /* viewport 좌우 끝까지 (헤더 frame 1440 제약 무시) — 컨트롤 늘어나서 여백 32 */
    padding: 10px 32px;
    max-width: none;
    margin: 0;
    flex-wrap: wrap;
}
.tmap-bar__left {
    display: flex;
    align-items: center;
    gap: 12px;
    font-feature-settings: 'tnum';
}

/* 라이브 인디케이터 — 5초 채워지는 ring */
.tmap-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #ff4757;
}
.tmap-live__ring {
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
}
.tmap-live__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tmap-live__ring-bg {
    fill: none;
    stroke: rgba(255, 71, 87, 0.20);
    stroke-width: 2.5;
}
.tmap-live__ring-fg {
    fill: none;
    stroke: #ff4757;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 56.549;   /* 2πr (r=9) */
    stroke-dashoffset: 56.549;
    /* transition 은 JS startRingFill 가 POLL_MS 에 맞춰 인라인 설정 */
}
.tmap-live--idle { color: var(--text-muted, #777); }
.tmap-live--idle .tmap-live__ring-bg { stroke: rgba(127,127,127,0.22); }
.tmap-live--idle .tmap-live__ring-fg { stroke: var(--text-muted, #777); }

.tmap-clock {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -.2px;
}
.tmap-date {
    font-size: 12px;
    color: var(--text-muted, var(--text-secondary));
}

/* 필터·기간 탭 */
.tmap-tabs {
    display: inline-flex;
    gap: 4px;
    background: var(--bg-tertiary, rgba(127,127,127,.08));
    padding: 3px;
    border-radius: 8px;
}
/* 그룹 간 간격은 .tmap-bar__right 의 gap 으로만 — 개별 margin 룰 제거 */

/* 날짜 네비 */
.tmap-datenav {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--bg-tertiary, rgba(127,127,127,.08));
    padding: 2px 4px;
    border-radius: 8px;
}
.tmap-datenav__btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    width: 22px; height: 22px;
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    line-height: 1;
    transition: background .15s, color .15s;
}
.tmap-datenav__btn:hover:not(:disabled) { background: var(--bg-hover, rgba(127,127,127,.18)); color: var(--text-primary); }
.tmap-datenav__btn:disabled { opacity: .35; cursor: not-allowed; }
.tmap-datenav .tmap-date {
    padding: 2px 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: background .15s, color .15s;
    color: var(--text-primary);
    font-weight: 600;
}
.tmap-datenav .tmap-date:hover {
    background: var(--bg-hover, rgba(127,127,127,.18));
    color: var(--text-primary);
}

/* ── 캘린더 피커 (트리맵 날짜 점프) ── */
.date-picker {
    z-index: 1000;
    background: var(--wr-bg-soft, var(--bg-secondary, #1f1f1f));
    border: 1px solid var(--glass-border, rgba(255,255,255,0.12));
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.5);
    padding: 12px;
    width: 280px;
    font-family: inherit;
    user-select: none;
    animation: date-picker-in .12s ease-out;
    color: var(--text-primary, #fff);
}
[data-theme="light"] .date-picker {
    background: #fff;
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 16px 48px rgba(0,0,0,0.12);
    color: #191919;
}
@keyframes date-picker-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.date-picker__head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
}
.date-picker__title { font-size: 13px; font-weight: 700; }
.date-picker__nav {
    background: none;
    border: 1px solid var(--glass-border, rgba(255,255,255,0.14));
    color: var(--text-secondary, rgba(255,255,255,0.6));
    width: 26px; height: 26px; border-radius: 6px; cursor: pointer; font-size: 16px;
    display: flex; align-items: center; justify-content: center; line-height: 1;
    transition: all .15s; font-family: inherit;
}
.date-picker__nav:hover {
    background: var(--glass-bg, rgba(255,255,255,0.05));
    color: var(--text-primary, #fff);
}
.date-picker__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.date-picker__weekday {
    font-size: 10px; font-weight: 600;
    color: var(--text-muted, rgba(255,255,255,0.4));
    text-align: center; padding: 4px 0;
    letter-spacing: .5px; text-transform: uppercase;
}
.date-picker__weekday--sun { color: var(--wr-rise, #F04452); }
.date-picker__weekday--sat { color: #3182F6; }
.date-picker__cell {
    background: none; border: none;
    color: var(--text-secondary);
    aspect-ratio: 1; border-radius: 6px; cursor: pointer;
    font-size: 12px; font-weight: 500;
    display: flex; align-items: center; justify-content: center;
    position: relative; transition: all .12s; font-family: inherit;
}
.date-picker__cell--empty { cursor: default; visibility: hidden; }
.date-picker__cell--sun { color: var(--wr-rise); }
.date-picker__cell--sat { color: #3182F6; }
.date-picker__cell--has { color: var(--text-primary); font-weight: 600; }
.date-picker__cell--has:hover { background: var(--glass-bg, rgba(127,127,127,.10)); }
.date-picker__cell--none {
    color: var(--text-muted); opacity: .35; cursor: not-allowed; font-weight: 400;
}
.date-picker__cell--current {
    background: var(--wr-accent, #3182F6) !important;
    color: #fff !important; font-weight: 700;
}
.date-picker__cell--latest:not(.date-picker__cell--current)::after {
    content: ''; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
    width: 4px; height: 4px; border-radius: 50%; background: var(--wr-rise);
}
.date-picker__foot {
    margin-top: 8px; padding-top: 8px;
    border-top: 1px solid var(--glass-border);
    display: flex; justify-content: center;
}
.date-picker__quick {
    background: none; border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    padding: 5px 12px; border-radius: 6px; cursor: pointer;
    font-size: 12px; font-weight: 600;
    transition: all .15s; font-family: inherit;
}
.date-picker__quick:hover {
    background: var(--glass-bg);
    color: var(--text-primary);
}
@media (max-width: 768px) {
    .date-picker { width: 300px; padding: 14px; }
    .date-picker__cell { font-size: 13px; }
    .date-picker__nav { width: 32px; height: 32px; }
}
.tmap-tab {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 5px 12px;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    transition: background .15s, color .15s;
}
.tmap-tab:hover { color: var(--text-primary); }
.tmap-tab.is-active {
    background: var(--bg-primary, var(--bg));
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
/* 라이트 모드 — 회색 위 회색이라 잘 안보여 활성 탭 완전 흰색 + 약한 보더로 도드라지게 */
[data-theme="light"] .tmap-tabs {
    background: rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .tmap-tab.is-active {
    background: #ffffff;
    color: #191919;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .tmap-tab:not(.is-active) { color: #6b7684; }
[data-theme="light"] .tmap-tab:not(.is-active):hover { color: #191919; background: rgba(255, 255, 255, 0.6); }

/* 캔버스 */
.tmap-stage {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: var(--bg-primary, var(--bg));
    min-height: 0;
}
.tmap-stage svg { display: block; width: 100%; height: 100%; }
.tmap-loading, .tmap-message {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: var(--text-secondary);
    font-size: 13px;
    text-align: center;
}
.tmap-cell text {
    fill: #fff;
    pointer-events: none;
    user-select: none;
    font-family: inherit;
    paint-order: stroke;
    stroke: rgba(0,0,0,.38);
    stroke-width: 0.6px;
}
.tmap-cell .tmap-name { font-weight: 700; letter-spacing: -.3px; }
.tmap-cell .tmap-mcap { font-weight: 500; font-feature-settings: 'tnum'; letter-spacing: -.2px; opacity: .78; }
.tmap-cell .tmap-rate { font-weight: 600; font-feature-settings: 'tnum'; opacity: .94; }
.tmap-cell rect { transition: filter .12s, stroke .12s; }
.tmap-cell:hover rect { filter: brightness(1.18); stroke: #fff; stroke-width: 1.5; }

/* ── 버블맵2 — 떠다니는 원형 버블 ── */
/* 라이트 모드여도 버블 필드는 항상 다크 — 홈·리포트와 동일한 토스 차콜 */
.bmap2-stage { background: var(--wr-bg-base); }
[data-theme="light"] .bmap2-stage { background: var(--wr-bg-base); }
.bmap2-node text {
    fill: #fff;
    pointer-events: none;
    user-select: none;
    font-family: inherit;
    paint-order: stroke;
    stroke: rgba(0,0,0,.5);
    stroke-width: 0.7px;
}
.bmap2-node__name { font-weight: 700; letter-spacing: -.3px; }
.bmap2-node__mcap { font-weight: 500; font-feature-settings: 'tnum'; letter-spacing: -.2px; opacity: .78; }
.bmap2-node__rate { font-weight: 600; font-feature-settings: 'tnum'; opacity: .96; }
.bmap2-node__circle { transition: filter .15s, stroke .15s; }
.bmap2-node:hover .bmap2-node__circle {
    filter: brightness(1.18);
    stroke: rgba(255,255,255,0.55) !important;
    stroke-width: 2 !important;
}
[data-theme="light"] .bmap2-node:hover .bmap2-node__circle {
    stroke: rgba(0,0,0,0.45) !important;
}

/* ── 흐름맵 — 그룹 force 떠다님 + 클릭 dive ── */
.flowmap-stage { background: var(--wr-bg-base); }
[data-theme="light"] .flowmap-stage { background: var(--wr-bg-base); }
[data-theme="light"] body.page-flowmap[data-flow-view="tree"] .flowmap-stage {
    background: #F2F4F6;
}

/* 트리맵용 그룹 박스 (트리 모드에서 d3.treemap squarified 가 사용) */
.flow-group__circle {
    fill: none;
    stroke: rgba(255,255,255,0.14);
    stroke-width: 1;
    stroke-dasharray: 4 3;
}
[data-theme="light"] .flow-group__circle { stroke: rgba(255,255,255,0.18); }
.flow-group__label {
    fill: rgba(255,255,255,0.92);
    font-weight: 800;
    letter-spacing: -.3px;
    pointer-events: none;
    user-select: none;
}

/* 버블 모드 — 그룹 큰 원 (클릭 가능, 떠다님). 종목 버블과 같은 외곽 그라데이션 — 그레이 톤. */
.flow-group--clickable { transition: filter .15s; }
.flow-group__bigcircle { transition: filter .15s, stroke .15s; }
.flow-group--clickable:hover .flow-group__bigcircle {
    filter: brightness(1.18);
    stroke-opacity: 0.75 !important;
    stroke-width: 1.6 !important;
}
.flow-group__name {
    fill: #fff;
    font-weight: 800;
    letter-spacing: -.3px;
    paint-order: stroke;
    stroke: rgba(0,0,0,.45);
    stroke-width: 0.6px;
    user-select: none;
}
.flow-group__count {
    fill: rgba(255,255,255,0.8);
    font-weight: 600;
    font-feature-settings: 'tnum';
    paint-order: stroke;
    stroke: rgba(0,0,0,.4);
    stroke-width: 0.5px;
    user-select: none;
}
.flow-node text {
    fill: #fff;
    pointer-events: none;
    user-select: none;
    font-family: inherit;
    paint-order: stroke;
    stroke: rgba(0,0,0,.5);
    stroke-width: 0.7px;
}
.flow-node__name { font-weight: 700; letter-spacing: -.3px; }
.flow-node__mcap { font-weight: 500; font-feature-settings: 'tnum'; letter-spacing: -.2px; opacity: .78; }
.flow-node__rate { font-weight: 600; font-feature-settings: 'tnum'; opacity: .96; }
.flow-node__circle { transition: filter .15s, stroke .15s; }
.flow-node:hover .flow-node__circle {
    filter: brightness(1.18);
    stroke: rgba(255,255,255,0.55) !important;
    stroke-width: 2 !important;
}

/* 섹터 박스 (전체 모드 nested treemap) */
.tmap-sector__box {
    transition: stroke .12s, fill .12s;
    fill: rgba(255,255,255,0.04);
    stroke: rgba(255,255,255,0.14);
}
[data-theme="light"] .tmap-sector__box {
    fill: rgba(0,0,0,0.035);
    stroke: rgba(0,0,0,0.16);
}
[data-theme="light"] body.page-flowmap[data-flow-view="tree"] .tmap-sector__box {
    fill: rgba(255,255,255,0.78);
    stroke: rgba(49,59,76,0.18);
}
.tmap-sector:hover .tmap-sector__box {
    stroke: rgba(255,255,255,0.34);
    fill: rgba(255,255,255,0.08);
}
[data-theme="light"] .tmap-sector:hover .tmap-sector__box {
    stroke: rgba(0,0,0,0.34);
    fill: rgba(0,0,0,0.06);
}
[data-theme="light"] body.page-flowmap[data-flow-view="tree"] .tmap-sector:hover .tmap-sector__box {
    stroke: rgba(49,59,76,0.32);
    fill: rgba(255,255,255,0.92);
}
.tmap-sector__label {
    fill: rgba(255,255,255,0.92);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: -.2px;
    pointer-events: none;
    user-select: none;
}
[data-theme="light"] .tmap-sector__label {
    fill: rgba(20,22,28,0.92);
}

/* 뒤로 버튼 + 저장 버튼 */
.tmap-back {
    margin-left: 4px;
    padding: 4px 10px;
    background: var(--bg-tertiary, rgba(127,127,127,.10));
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    transition: background .15s, border-color .15s;
}
.tmap-back:hover { background: var(--bg-hover, rgba(127,127,127,.18)); border-color: var(--text-muted); }
.tmap-bar__right { display: flex; align-items: center; gap: 8px; }
.tmap-save {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg-tertiary, rgba(127,127,127,.10));
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.tmap-save:hover { background: var(--bg-hover, rgba(127,127,127,.18)); border-color: var(--text-muted); color: var(--text-primary); }

@media (max-width: 768px) {
    /* 날짜 row(tmap-bar__left)만 두께 보강. sub-tabs(tmap-bar__right) 는 컴팩트 유지 — 3~4줄 wrap 방지 */
    .tmap-bar__inner { padding: 10px 12px; gap: 8px; flex-wrap: wrap; }
    .tmap-bar__left { flex-wrap: wrap; gap: 10px; row-gap: 6px; min-height: 32px; align-items: center; }
    .tmap-bar__right { flex-wrap: wrap; gap: 6px; row-gap: 4px; justify-content: flex-end; }
    /* 좌측(LIVE/날짜) 라벨은 살짝 키워서 가독성 */
    .tmap-clock { font-size: 12.5px; }
    .tmap-date { font-size: 12.5px; }
    .tmap-live__label { font-size: 11px; }
    .tmap-datenav { padding: 1px 3px; }
    .tmap-datenav__btn { width: 24px; height: 24px; font-size: 14px; }
    /* 우측 sub-tabs — market + sort 한 줄 fit 유지하면서도 가독성 있는 중간 크기.
       padding 5×10 font 12 min-h 30 → market(~145) + sort(~145) ≈ 290 < 355 ✅ */
    .tmap-tab { padding: 5px 10px; font-size: 12px; min-height: 30px; }
    .tmap-tabs { padding: 2px; gap: 2px; }
    .tmap-save { width: 28px; height: 28px; }
    .tmap-back { font-size: 11px; padding: 4px 8px; min-height: 26px; }
}
@media (max-width: 480px) {
    .tmap-bar__inner { flex-direction: column; align-items: stretch; padding: 8px 10px; gap: 6px; }
    .tmap-bar__left, .tmap-bar__right { justify-content: center; }
    .tmap-bar__right { flex-wrap: wrap; }
    /* 480 이하에서도 768 룰과 동일하게 중간 크기 유지 */
    .tmap-tab { padding: 5px 10px; font-size: 12px; min-height: 30px; }
    .tmap-tabs { padding: 2px; gap: 2px; }
    /* REPORT·LIVE 라벨이 시각 합쳐 길어지면 좁은 화면에서 줄바꿈 허용 */
    .tmap-live__label { white-space: normal; line-height: 1.3; }
}

/* 방문자 카운터 — 푸터 위쪽 작은 라인 */
.visitor-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
}
.visitor-row__dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
    animation: visitor-pulse 2s ease-in-out infinite;
}
.visitor-row__num {
    color: var(--wr-accent);
    font-weight: 700;
    font-feature-settings: 'tnum';
    margin: 0 2px;
}
.visitor-row__sep { color: var(--text-muted); }
@keyframes visitor-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

/* 관리자 링크 — 푸터 끝에 작은 점만 */
.footer__admin-link {
    color: var(--text-muted);
    text-decoration: none;
    opacity: 0.4;
    margin-left: 6px;
    font-weight: 700;
    transition: opacity .15s;
}
.footer__admin-link:hover { opacity: 1; color: var(--wr-accent); }

/* date 영역 */
.date-text {
    color: var(--text-primary);
    cursor: pointer;
    padding: 4px 12px;
    border-radius: 8px;
    transition: background .15s;
    font-weight: 700;
}
.date-text:hover { background: var(--glass-bg-strong); }
.date-badge {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}
.date-badge--past {
    border-color: var(--glass-border);
    color: var(--text-muted);
}

/* 관심 토글 버튼 */
.tab.tab--watchlist {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    transition: all .15s;
}
.tab.tab--watchlist svg { opacity: 0.5; }
.tab.tab--watchlist:hover {
    color: var(--text-primary);
    background: var(--glass-bg-strong);
}
.tab.tab--watchlist:hover svg { opacity: 0.9; }
.tab.tab--watchlist.active {
    background: var(--wr-accent);
    border-color: var(--wr-accent);
    color: #fff;
}
.tab.tab--watchlist.active svg { opacity: 1; }
.toolbar--simple .toolbar__left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 560px) {
    .toolbar--simple { flex-direction: column; align-items: stretch; gap: 8px; }
    .toolbar--simple .toolbar__left { justify-content: flex-start; }
    .toolbar--simple .toolbar__right { justify-content: flex-end; }
}
.date-nav {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    width: 34px; height: 34px;
    border-radius: 999px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}
.date-nav:hover {
    background: var(--glass-bg-strong);
    color: var(--text-primary);
    border-color: var(--orange);
}

/* admin 편집 모달 */
.admin-edit__guide {
    background: rgba(49, 130, 246, .1); border: 1px solid var(--yellow);
    border-radius: 6px; padding: 10px 12px; font-size: 12px; color: var(--yellow);
    margin-bottom: 14px;
}
.admin-edit__label {
    display: block; font-size: 12px; color: var(--text-secondary);
    margin-top: 12px; margin-bottom: 4px; font-weight: 600;
}

/* ── 리포트 페이지 ────────────────────────── */
.report-page {
    padding: 36px 40px 56px;
    /* frame 1440 보다 넓게 — 화면 폭 더 활용 */
    max-width: 1680px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}
.report-page__header { margin-bottom: 28px; }
.report-page__title {
    font-size: 32px; font-weight: 800; letter-spacing: -.8px;
    margin: 0 0 20px;
}

/* 핵심 수치 카드 4개 — 헤더 아래 가로 배치 */
.report-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 20px;
}
.report-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 18px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
}
.report-stat__num {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -.5px;
    font-variant-numeric: tabular-nums;
}
.report-stat__lbl {
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: -.1px;
}
@media (max-width: 768px) {
    .report-stats { grid-template-columns: repeat(2, 1fr); }
    .report-stat { padding: 10px 14px; }
    .report-stat__num { font-size: 18px; }
}

.report-grid {
    display: grid;
    /* 자동 채움 — 카드가 화면 폭 따라 1~3열 자동 배치, 가운데 모이지 않게 */
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 16px;
    align-items: start;
}
.report-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 20px 22px;
    /* 플랫 글래스 — 그림자 제거, 보더만으로 분리 */
    box-shadow: none;
}
.report-card--wide { grid-column: 1 / -1; }
.report-card__title {
    font-size: 16px; font-weight: 700;
    color: var(--text-primary); margin-bottom: 4px;
    letter-spacing: -.2px;
}
.report-card__desc {
    font-size: 11px; color: var(--text-muted);
    margin-bottom: 12px;
    letter-spacing: -.1px;
}
.report-list { list-style: none; padding: 0; margin: 0; }
.report-list--two-col {
    columns: 2;
    column-gap: 24px;
}
.report-list--two-col .report-row { break-inside: avoid; }

.report-row {
    position: relative;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-subtle);
    overflow: hidden;
}
.report-row:last-child { border-bottom: none; }
.report-row__bar {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: rgba(49, 130, 246, .08);
    z-index: 0;
}
.report-row__content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}
.report-row__label {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.report-row__label a {
    color: inherit;
    text-decoration: none;
}
.report-row__label a:hover { color: var(--orange); }
.report-row__sub {
    color: var(--text-muted);
    font-size: 11px;
    flex-shrink: 0;
}
.report-row__count {
    background: var(--wr-rise-soft);
    color: var(--wr-rise);
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    min-width: 64px;
    text-align: right;
}
.report-empty {
    padding: 24px 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
}

@media (max-width: 768px) {
    /* report-page: PC padding 36 40 56 은 모바일에서 좌우 80px = 폭 21% 잡아먹음 → 좌우 12 로 축소 */
    .report-page { padding: 20px 12px 40px; }
    /* report-grid: PC minmax(380,1fr) — 모바일 viewport 360~390 보다 넓어 가로 오버플로우(bodyW=407 vs vp=375) 유발.
       모바일에선 풀폭 1열 + 카드 padding 축소. */
    .report-grid { grid-template-columns: 1fr; gap: 12px; }
    .report-card { padding: 16px 16px; }
    .report-list--two-col { columns: 1; }
    .report-page__title { font-size: 24px; }
    /* report-row 내부 — 모바일에서 +N% pill 우측 여유 + 라벨 ellipsis 강화 */
    .report-row { padding: 8px 6px; }
    .report-row__content { gap: 8px; font-size: 12.5px; }
    .report-row__count { min-width: 56px; padding: 3px 8px; font-size: 11px; }
    .report-row__sub { font-size: 10.5px; }

    /* ⋯ 버튼 가시성 보강 — base style.css 의 32×32 흐릿한 배경 → 40×40 + 진한 배경으로 클릭 가능 신호 강화 */
    .ctrl-toggle {
        width: 40px !important;
        height: 40px !important;
        background: rgba(255, 255, 255, .09);
        color: var(--text-secondary);
    }
    [data-theme="light"] .ctrl-toggle { background: rgba(0, 0, 0, .07); color: var(--text-secondary); }
    .ctrl-toggle:active { background: var(--bg-tertiary, rgba(255, 255, 255, .18)); }

    /* 푸터 면책 — 모바일에서 강조 문구 한 단계 키워 가독성 확보 */
    .footer__disclaimer { font-size: 11px; line-height: 1.7; padding: 0 4px; }
    .footer__disclaimer strong { font-size: 12px; display: inline-block; margin-bottom: 4px; }
    .footer__copy { font-size: 10.5px; }

    /* 터치 타깃 보강 (Apple HIG 44pt / WCAG 24px AAA, 최소 36~40px) — mobile only */
    .theme-toggle { padding: 9px; min-width: 40px; min-height: 40px; justify-content: center; }
    .top-bar__hamburger { padding: 9px; min-width: 40px; min-height: 40px; }
    .date-nav { min-width: 40px; min-height: 40px; }
    /* 햄버거 메뉴 안 nav 링크 — 이미 padding:11px 14px 인데 font-size 키워 가독성 + 터치 영역 강화 */
    .top-bar__nav .top-bar__link { padding: 13px 16px; min-height: 44px; font-size: 16px; }
    /* tmap-tab/tmap-back/tmap-save 는 위 @media 룰에서 컴팩트 처리 — 여기선 별도 보강 없음
       (사용자 피드백: sub-tabs 가 너무 두꺼우면 메뉴 row 3~4개 wrap 됨) */

    /* whyrise-table 모바일 — style.css 의 stock-rise 용 4열 그리드(rank|name|price|change)는
       whyrise 컬럼 구성(rank|name|reason|change|volume|cap|sector — 가격 없음)과 안 맞아
       종목명 옆에 빈 그리드 셀이 남았음. 여기서 whyrise 전용 3열로 override:
         Row 1:  rank | name(+미니인디케이터) | change(상승률)
         Row 2:  reason (전체 폭, 카드 hero)
         Row 3:  meta-compact (시장·섹터·시총·거래)
       volume/cap/sector 는 base css 가 이미 display:none 처리. */
    .whyrise-table { min-width: 0; width: 100%; }
    /* 모바일: 카드 리스트를 감싸는 외곽 글래스 컨테이너 제거 (사용자 요청 — 카드들 자체가 글래스라 중첩 불필요) */
    .table-wrap.glass {
        padding: 0;
        overflow: visible;
        background: transparent;
        border: none;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .whyrise-table tr {
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        gap: 8px 12px !important;
    }
    /* whyrise.css 의 PC `.whyrise-table td { border-bottom; padding 16px 10px }` 가 모바일에서도 적용돼
       각 셀 바닥에 짧은 underline 3개 생기던 문제 → 모바일에선 td 보더·패딩 모두 제거 */
    .whyrise-table td { border-bottom: none !important; padding: 0 !important; }
    .whyrise-table td.cell-rank { grid-column: 1; grid-row: 1; }
    .whyrise-table td.cell-name { grid-column: 2; grid-row: 1; }
    .whyrise-table td.cell-change { grid-column: 3; grid-row: 1; }
    .whyrise-table td.cell-reason {
        grid-column: 1 / -1;
        grid-row: 2;
        padding: 4px 0 0 !important;
        margin: 0;
        text-align: left;
    }
    .whyrise-table td.cell-meta-compact {
        grid-column: 1 / -1;
        grid-row: 3;
        padding: 6px 0 0 !important;
        font-size: 11.5px;
        color: var(--text-muted);
        border-top: 1px solid var(--border-subtle);
        margin-top: 4px;
    }
    /* cell-reason 내부 inline 레이아웃 — 태그 + 이유 + 편집 한 줄 wrap */
    .whyrise-table .cell-reason__inline {
        display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
        line-height: 1.45;
    }
    .whyrise-table .cell-reason__text {
        flex: 1 1 auto; min-width: 0;
        font-size: 13.5px; color: var(--text-primary);
        word-break: keep-all; overflow-wrap: break-word;
    }

    /* hero 검색바 — 한 줄 유지하되 폰트·패딩 축소 + input 수직 중앙(기본 baseline은 모바일에서 input 23px 떠 보임) */
    .hero { padding: 32px 0 20px; }
    .hero__search-wrap { padding: 12px 18px; gap: 6px; border-radius: 999px; align-items: center; }
    .hero__search-wrap:focus-within { padding: 11px 17px; }
    .hero__search-input { font-size: 19px; min-height: 30px; line-height: 30px; }
    .hero__placeholder-suffix { font-size: 17px; }
    .hero__subtitle { font-size: 13px; margin-top: 18px; padding: 0 10px; }
    /* 자동완성 드롭다운 — 모바일에서 우측 5~10px 잘려보이는 이슈: li 우측 패딩 축소 + badge 폰트 압축 */
    .hero__suggest { padding: 6px; max-height: 320px; border-radius: 14px; }
    .hero__suggest li { padding: 9px 10px; gap: 8px; font-size: 13.5px; }
    .hero__suggest li .ticker { font-size: 11px; }
    .hero__suggest li .badge { padding: 2px 6px; font-size: 10.5px; white-space: nowrap; }

    /* toolbar — 모바일에서 날짜(좌) + 관심(우) 한 줄 (사용자 요청).
       base style.css 가 toolbar__right{order:1}, .toolbar .report__date-bar{order:2;flex:0 0 100%} 로
       관심 먼저·날짜 새 줄 wrap 시키는데 whyrise toolbar--simple 에선 그걸 모두 reset. */
    .toolbar--simple { flex-wrap: nowrap; flex-direction: row; align-items: center; gap: 8px; padding: 14px 4px; }
    .toolbar--simple .report__date-bar { order: 1; flex: 0 1 auto; min-width: 0; gap: 4px; padding: 0; justify-content: flex-start; }
    .toolbar--simple .toolbar__right { order: 2; flex-shrink: 0; margin-left: auto; }
    .toolbar--simple .date-text { font-size: 13.5px; padding: 4px 6px; }
    .cutoff-count { padding: 5px 10px; font-size: 11px; }

    /* 위젯 — 좁은 폭에서 패딩 축소 */
    .widget { padding: 16px 14px; border-radius: 14px; }

    /* stock 페이지 헤더 모바일 */
    .stock-header { padding: 22px 18px; border-radius: 16px; }
    .stock-header__title { font-size: 26px; }
    /* 4-stat 라인 — PC flex+wrap 은 모바일(특히 SE 375) 좁아 라벨 줄바꿈 직전 상태 → 2x2 그리드로 안정 */
    .stock-header__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin-top: 18px; }
    .stock-header__stat-label { font-size: 10.5px; letter-spacing: .2px; }
    .stock-header__stat-value { font-size: 19px; }
    .stock-header__summary { font-size: 15px; line-height: 1.55; }
    .stock-news-panel { margin: 14px 0 18px; padding: 15px 16px; border-radius: 14px; }
    .stock-news-list { grid-template-columns: 1fr; }
    .stock-news-panel__head { margin-bottom: 10px; }
    .stock-news-item { padding: 10px 11px; }

    /* event-card 모바일 */
    .event-card { padding: 16px 18px; border-radius: 14px; }
    .event-card__rate { font-size: 17px; }
    .event-card__reason { font-size: 15px; }
}

/* admin 편집 모드일 때 행 호버 우측에 ✏️ 버튼 표시 */
body:not(.admin-on) .whyrise-table .admin-edit-btn,
body:not(.admin-on) .event-card__edit { display: none; }
.admin-on::before {
    content: '관리자 모드 ON';
    position: fixed; bottom: 16px; right: 16px;
    background: var(--orange); color: #fff;
    padding: 8px 14px; border-radius: 8px; font-size: 12px; font-weight: 700;
    z-index: 200; box-shadow: var(--shadow);
}

/* ─────────────────────────────────────────────────────────────
   스크리닝 — /screening.html
   기존 홈 리스트와 같은 관심/메모 컨트롤을 쓰되, 횟수 칩과 상단 필터를 추가.
   ───────────────────────────────────────────────────────────── */

.screening-page {
    padding-top: 22px;
    padding-bottom: 44px;
}
.screening-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 18px;
}
.screening-title {
    margin: 0;
    font-size: 28px;
    line-height: 1.15;
    font-weight: 850;
    letter-spacing: 0;
    color: var(--text-primary);
}
.screening-total {
    flex-shrink: 0;
    color: var(--text-primary);
    font-size: 20px;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}
.screening-controls {
    padding: 14px;
    margin-bottom: 14px;
    border-radius: 8px;
}
.screening-search {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}
.screening-input,
.screening-field select {
    width: 100%;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.3;
}
.screening-input {
    padding: 0 12px;
}
.screening-field select {
    padding: 0 32px 0 10px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: none;
    text-overflow: ellipsis;
}
.screening-input:focus,
.screening-field select:focus {
    outline: none;
    border-color: var(--toss-blue, #3182F6);
}
.screening-reset {
    flex: 0 0 auto;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.screening-watch-btn {
    flex: 0 0 auto;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}
.screening-watch-btn:hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
}
.screening-watch-btn.is-active {
    border-color: rgba(255, 165, 2, .55);
    background: rgba(255, 165, 2, .14);
    color: var(--yellow);
}
.screening-reset:hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
}
.screening-filter-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(100px, 1fr));
    gap: 8px;
    align-items: end;
}
.screening-field {
    display: flex;
    position: relative;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
}
.screening-field::after {
    content: "";
    position: absolute;
    right: 13px;
    bottom: 15px;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    pointer-events: none;
    transform: rotate(45deg);
    transform-origin: center;
}
.screening-field span {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
}
.screening-field--wide {
    grid-column: span 2;
}
.screening-table-wrap {
    margin-top: 0;
}
.screening-list-meta {
    display: flex;
    justify-content: flex-end;
    min-height: 18px;
    margin: 8px 2px 0;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
}
.screening-table {
    min-width: 1180px;
}
.screening-table .col-counts,
.screening-table td.cell-counts {
    min-width: 230px;
}
.screening-table td.cell-counts {
    color: var(--text-secondary);
    font-size: 12px;
}
.screening-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.screening-counts span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 22px;
    padding: 2px 7px;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    white-space: nowrap;
}
.screening-counts span.is-active {
    border-color: rgba(49, 130, 246, .45);
    background: rgba(49, 130, 246, .12);
    color: var(--accent);
}
.screening-counts b {
    color: var(--text-primary);
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}
.screening-table td.cell-change {
    white-space: nowrap;
    text-align: right;
}
.screening-date {
    display: block;
    margin-bottom: 2px;
    color: var(--text-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}
.screening-theme-tag {
    border: 0;
    font-family: inherit;
}
.screening-empty {
    text-align: center;
    padding: 60px 12px !important;
    color: var(--text-muted);
}

@media (max-width: 1100px) {
    .screening-filter-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .screening-field--wide {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .screening-page {
        padding-top: 18px;
        padding-bottom: 38px;
    }
    .screening-head {
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin: 0 0 14px;
    }
    .screening-title {
        font-size: 24px;
    }
    .screening-total {
        margin-left: auto;
        padding-top: 0;
        font-size: 15px;
        text-align: right;
        white-space: nowrap;
    }
    .screening-controls {
        padding: 12px;
        margin-bottom: 12px;
    }
    .screening-search {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .screening-search .screening-input {
        grid-column: 1 / -1;
    }
    .screening-watch-btn,
    .screening-reset {
        width: 100%;
    }
    .screening-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .screening-field--wide {
        grid-column: 1 / -1;
    }
    .screening-table {
        min-width: 0;
        width: 100%;
    }
    .screening-table tr {
        grid-template-columns: auto minmax(0, 1fr) !important;
        gap: 8px 10px !important;
    }
    .screening-table td.cell-rank {
        grid-column: 1;
        grid-row: 1;
    }
    .screening-table td.cell-name {
        grid-column: 2 / -1;
        grid-row: 1;
    }
    .screening-table td.cell-change {
        display: none !important;
    }
    .screening-table td.cell-reason {
        grid-column: 1 / -1;
        grid-row: 2;
    }
    .screening-table td.cell-counts {
        display: block !important;
        grid-column: 1 / -1;
        grid-row: 3;
        min-width: 0;
        padding: 6px 0 0 !important;
    }
    .screening-table td.cell-meta-compact {
        grid-column: 1 / -1;
        grid-row: 4;
    }
    .screening-table td.cell-cap,
    .screening-table td.cell-sector {
        display: none !important;
    }
    .screening-counts {
        gap: 5px;
    }
    .screening-counts span {
        min-height: 24px;
        padding: 2px 7px;
        font-size: 11px;
    }
    .screening-list-meta {
        margin-top: 7px;
        padding-right: 2px;
        font-size: 10.5px;
    }
}

@media (max-width: 430px) {
    .screening-head {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }
    .screening-total {
        margin-left: auto;
        padding-top: 0;
        font-size: 14px;
    }
    .screening-filter-grid {
        grid-template-columns: 1fr;
    }
    .screening-table tr {
        grid-template-columns: 30px minmax(0, 1fr) !important;
    }
    .screening-date {
        font-size: 10.5px;
    }
}

/* ─────────────────────────────────────────────────────────────
   리포트 — 시장 다이제스트 재구성
   섹터/테마 행 클릭 → 스크리닝 점프, 이전 기간 대비 delta 배지,
   이유 카테고리 가로 막대, 52주 신고가 카드 그리드.
   ───────────────────────────────────────────────────────────── */

.report-page__head-row {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
.report-cta {
    font-size: 13px; font-weight: 600;
    color: var(--toss-blue, #3182F6);
    text-decoration: none;
    padding: 6px 10px; border-radius: 8px;
    transition: background .12s;
}
.report-cta:hover { background: var(--bg-hover); }
.report-page__subtitle {
    margin: 6px 0 14px;
    color: var(--text-muted);
    font-size: 13.5px;
    letter-spacing: -.1px;
}

.report-stat__delta {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: -.1px;
    min-height: 14px;          /* 빈 delta 자리 점프 방지 */
}
.report-stat__delta--up   { color: #F04452; }   /* 상승 = 토스 레드 */
.report-stat__delta--down { color: #3182F6; }   /* 하락 = 토스 블루 */

.report-row__link {
    color: inherit; text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: border-color .12s, color .12s;
}
.report-row__link:hover {
    color: var(--toss-blue, #3182F6);
    border-bottom-color: currentColor;
}

.report-delta {
    display: inline-flex; align-items: center;
    font-size: 11px; font-weight: 700;
    padding: 1px 6px; border-radius: 999px;
    margin-left: 4px;
    line-height: 1.4;
    letter-spacing: -.1px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}
.report-delta--up   { background: rgba(240, 68, 82, 0.16); color: #F04452; }
.report-delta--down { background: rgba(49, 130, 246, 0.16); color: #3182F6; }
.report-delta--new  { background: rgba(240, 68, 82, 0.16); color: #F04452; }
.report-delta--flat { background: var(--bg-tertiary); color: var(--text-muted); }

/* ─── 이유 카테고리 가로 막대 ─── */
.report-reason-bars { list-style: none; padding: 0; margin: 0; }
.report-reason-row {
    display: grid;
    grid-template-columns: 92px 1fr 52px 56px;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--border);
}
.report-reason-row:last-child { border-bottom: none; }
.report-reason-row__label {
    font-size: 13px; font-weight: 600; color: var(--text-primary);
}
.report-reason-row__track {
    height: 8px; border-radius: 999px; background: var(--bg-tertiary);
    overflow: hidden;
}
.report-reason-row__fill {
    height: 100%; background: var(--toss-blue, #3182F6);
    border-radius: 999px;
    transition: width .25s ease-out;
}
.report-reason-row__pct {
    font-size: 12px; font-weight: 700; color: var(--text-primary);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.report-reason-row__count {
    font-size: 11.5px; color: var(--text-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ─── 52주 신고가 카드 그리드 ─── */
.report-52w-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
    padding: 4px 0;
}
.report-52w-card {
    display: flex; flex-direction: column; gap: 4px;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 10px;
    text-decoration: none; color: inherit;
    transition: background .12s, border-color .12s, transform .08s;
}
.report-52w-card:hover {
    background: var(--bg-hover);
    border-color: var(--toss-blue, #3182F6);
}
.report-52w-card:active { transform: translateY(1px); }
.report-52w-card__name {
    font-size: 13px; font-weight: 700; color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.report-52w-card__sub {
    font-size: 11.5px; color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* 모바일 — 좁은 화면에서 reason 막대 라벨 압축 */
@media (max-width: 600px) {
    .report-page__head-row { gap: 8px; }
    .report-cta { font-size: 12px; padding: 4px 8px; }
    .report-reason-row {
        grid-template-columns: 80px 1fr 48px 44px;
        gap: 6px;
    }
    .report-reason-row__label { font-size: 12px; }
    .report-52w-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ─────────────────────────────────────────────────────────────
   리포트 — 일별 시황 (/report.html)
   날짜 네비 + 요약 4카드 + 주도 섹터/테마 카드 + 카드뉴스 + 52w + 풀백
   ───────────────────────────────────────────────────────────── */

.report-page {
    padding-top: 24px;
    padding-bottom: 44px;
    overflow-x: hidden;
}
.report-page__head-row {
    margin-bottom: 8px;
}
.report-page__head-row .report-page__title {
    margin: 0;
}

.report-date-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 4px 18px;
    flex-wrap: wrap;
}
.report-date-bar .date-nav {
    width: 32px; height: 32px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-primary);
    transition: background .12s, border-color .12s;
}
.report-date-bar .date-nav:hover { background: var(--bg-hover); border-color: var(--text-muted); }
.report-date-bar .date-text {
    font-size: 18px; font-weight: 800; color: var(--text-primary);
    padding: 4px 8px; border-radius: 8px; cursor: pointer;
    letter-spacing: -.2px;
    transition: background .12s;
}
.report-date-bar .date-text:hover { background: var(--bg-hover); }
.report-date-bar .date-badge {
    font-size: 11px; font-weight: 700;
    background: var(--toss-blue, #3182F6); color: #fff;
    padding: 2px 7px; border-radius: 999px;
    line-height: 1.4;
}

/* ── 요약 4 카드 ── */
.report-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 24px;
    width: 100%;
}
.summary-card {
    display: flex; flex-direction: column; gap: 4px;
    min-width: 0;
    padding: 14px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.summary-card__label {
    font-size: 11px; font-weight: 600; color: var(--text-muted);
    letter-spacing: 0.2px; text-transform: uppercase;
}
.summary-card__value {
    font-size: 22px; font-weight: 800; color: var(--text-primary);
    letter-spacing: -.5px;
    font-variant-numeric: tabular-nums;
}
.summary-card__value--rise { color: var(--wr-accent, #F04452); }
.summary-card__value--hot  { color: #F04452; }

/* ── 섹션 헤더 ── */
.report-section { margin-bottom: 26px; }
.report-section__head {
    display: flex; align-items: baseline; gap: 12px;
    margin-bottom: 4px;
}
.report-section__title {
    margin: 0; font-size: 18px; font-weight: 800; color: var(--text-primary);
    letter-spacing: -.3px;
}
.report-section__sub {
    font-size: 12px; font-weight: 600; color: var(--text-muted);
    letter-spacing: -.2px;
}
.report-section__pager {
    display: inline-flex; align-items: center; gap: 6px;
    margin-left: auto;
    font-size: 12px; color: var(--text-muted);
}
.report-section__desc {
    margin: 0 0 12px;
    font-size: 12.5px; color: var(--text-muted);
    letter-spacing: -.1px;
}

.pager-btn {
    width: 26px; height: 26px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer; font-size: 13px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
}
.pager-btn:hover:not([disabled]) { background: var(--bg-hover); border-color: var(--text-muted); }
.pager-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.pager-info { font-variant-numeric: tabular-nums; }

/* ── 섹터/테마 카드 그리드 ── */
.report-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
}
.report-card-group {
    min-width: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex; flex-direction: column; gap: 8px;
}
.report-card-group__head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 8px; flex-wrap: wrap;
}
.report-card-group__name {
    font-size: 14px; font-weight: 700; color: var(--text-primary);
    letter-spacing: -.2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70%;
    text-decoration: none;
}
.report-card-group__name:hover {
    color: var(--toss-blue, #3182F6);
}
.report-card-group__stat {
    font-size: 11px; color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.report-card-group__list {
    display: flex; flex-direction: column; gap: 4px;
}
.report-card-stock {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 8px; padding: 4px 0;
    text-decoration: none; color: inherit;
    border-bottom: 1px dashed transparent;
    transition: border-color .12s, color .12s;
}
.report-card-stock:hover {
    color: var(--toss-blue, #3182F6);
    border-bottom-color: var(--border);
}
.report-card-stock__name {
    font-size: 12.5px; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%;
}
.report-card-stock__rate {
    font-size: 12px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.report-card-group__screening {
    align-self: flex-start;
    color: var(--toss-blue, #3182F6);
    font-size: 11.5px;
    font-weight: 700;
    text-decoration: none;
}
.report-card-group__screening:hover {
    text-decoration: underline;
}
.report-list-meta {
    display: flex;
    justify-content: flex-end;
    min-height: 18px;
    margin: -14px 2px 26px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
}

/* ── 종목 리스트 (52w·풀백) ── */
.report-stock-list { list-style: none; padding: 0; margin: 0; }
.report-stock-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1.4fr);
    gap: 10px;
    align-items: center;
    padding: 10px 4px;
    border-bottom: 1px solid var(--border);
    transition: background .1s;
}
.report-stock-row:last-child { border-bottom: none; }
.report-stock-row:hover { background: var(--bg-hover); }
.report-stock-row.row--starred {
    background: linear-gradient(90deg, rgba(255, 165, 2, .06), transparent 30%);
}
.report-stock-row.row--excluded { opacity: 0.55; }

.report-stock-row__name-wrap {
    display: flex; align-items: center; gap: 6px;
    min-width: 0;
}
.report-stock-row__name {
    font-size: 14px; font-weight: 700; color: var(--text-primary);
    text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.report-stock-row__name:hover { color: var(--toss-blue, #3182F6); }
.report-stock-row__market {
    font-size: 10px; font-weight: 600; color: var(--text-muted);
    background: var(--bg-tertiary);
    padding: 1px 5px; border-radius: 4px;
}
.report-stock-row__price {
    font-size: 12px; color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.report-stock-row__rate {
    font-size: 14px; font-weight: 800;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.report-stock-row__rate small {
    display: block; font-size: 10px; font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 1px;
}
.report-stock-row__sub {
    font-size: 11.5px; color: var(--text-muted);
    text-align: right;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── 카드뉴스 그리드 ── */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px;
}
.cards-cell {
    background: none; border: 1px solid var(--border); border-radius: 12px;
    padding: 0; cursor: pointer;
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: border-color .12s, transform .08s;
}
.cards-cell:hover { border-color: var(--toss-blue, #3182F6); }
.cards-cell:active { transform: translateY(1px); }
.cards-cell__img {
    width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
    background: var(--bg-tertiary);
    display: block;
}
.cards-cell__cap {
    padding: 6px 10px 8px;
    font-size: 11.5px; color: var(--text-secondary);
    text-align: left;
    line-height: 1.35;
}
.cards-cell__tag {
    display: inline-block;
    background: var(--bg-tertiary); color: var(--text-primary);
    padding: 1px 6px; border-radius: 4px;
    font-size: 10px; font-weight: 700;
    margin-right: 4px;
}

/* ── 카드뉴스 라이트박스 ── */
.cards-modal {
    align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.78);
    padding: 16px;
}
.cards-modal__inner {
    position: relative;
    max-width: min(720px, 90vw); max-height: 92vh;
    background: var(--bg-secondary);
    border-radius: 14px;
    overflow: hidden;
    display: flex; flex-direction: column;
}
.cards-modal__img {
    width: 100%; max-height: 80vh; object-fit: contain;
    background: var(--bg-tertiary);
}
.cards-modal__caption {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    font-size: 13px; color: var(--text-secondary);
}
.cards-modal__tag {
    background: var(--toss-blue, #3182F6); color: #fff;
    padding: 1px 7px; border-radius: 4px;
    font-size: 11px; font-weight: 700;
}
.cards-modal__title { flex: 1 1 auto; color: var(--text-primary); font-weight: 700; }
.cards-modal__count {
    font-size: 11.5px; color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.cards-modal__close {
    position: absolute; top: 8px; right: 12px;
    background: rgba(0, 0, 0, 0.4); color: #fff;
    border: none; border-radius: 50%;
    width: 30px; height: 30px;
    font-size: 22px; line-height: 1; cursor: pointer;
}
.cards-modal__nav {
    background: rgba(255, 255, 255, 0.18); color: #fff; border: none;
    width: 44px; height: 44px; border-radius: 50%;
    font-size: 28px; line-height: 1; cursor: pointer;
    flex-shrink: 0;
}
.cards-modal__nav:hover { background: rgba(255, 255, 255, 0.3); }

/* ── 빈 상태 ── */
.report-empty {
    padding: 18px 16px;
    background: var(--bg-secondary);
    border: 1px dashed var(--border);
    border-radius: 10px;
    color: var(--text-muted);
    text-align: center;
    font-size: 13px;
}
.cards-empty {
    grid-column: 1 / -1;     /* grid 안에서 한 줄 차지 */
}

/* ── 모바일 (~768px) ── */
@media (max-width: 768px) {
    .report-page {
        padding-left: 12px;
        padding-right: 12px;
    }
    .report-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .report-cards {
        grid-template-columns: 1fr;
    }
    .summary-card__value { font-size: 19px; }
    .report-section__title { font-size: 16px; }
    .report-date-bar .date-text { font-size: 15px; }
    .report-list-meta {
        margin-top: -12px;
        font-size: 10.5px;
    }
}

@media (max-width: 480px) {
    .report-summary { grid-template-columns: 1fr; }
    .report-cards { grid-template-columns: 1fr; }
    .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .report-stock-row {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        gap: 6px 8px;
    }
    .report-stock-row__price { grid-column: 1; font-size: 11px; }
    .report-stock-row__rate  { grid-column: 2; text-align: right; }
    .report-stock-row__sub   { grid-column: 1 / -1; text-align: left; font-size: 11px; }
}

/* ─────────────────────────────────────────────────────────────
   리포트 v2 — Whyrise 밀도/글래스 규칙
   ───────────────────────────────────────────────────────────── */
.report-page {
    padding-top: 22px;
    max-width: 1440px;
}
.report-head {
    align-items: center;
    margin: 2px 0 18px;
}
.report-title {
    letter-spacing: -.5px;
}
.report-date-bar {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding: 0;
    flex-wrap: nowrap;
}
.report-date-bar .date-nav {
    width: 32px;
    height: 32px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    color: var(--text-secondary);
}
.report-date-bar .date-nav:hover {
    background: var(--glass-bg-strong);
    color: var(--text-primary);
    border-color: var(--glass-border-strong);
}
.report-date-bar .date-text {
    min-width: 136px;
    padding: 6px 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    letter-spacing: 0;
}
.report-date-bar .date-badge {
    display: none !important;
}
.report-summary,
.report-section__desc,
.report-card-group__screening {
    display: none !important;
}
.report-section {
    margin-bottom: 24px;
}
.report-section__head {
    align-items: center;
    margin-bottom: 10px;
}
.report-section__title {
    font-size: 16px;
    font-weight: 850;
    letter-spacing: -.2px;
}
.report-section__pager {
    font-size: 11px;
}
.pager-btn {
    background: var(--glass-bg);
    border-color: var(--glass-border);
}
.report-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.report-card-group {
    min-height: 118px;
    padding: 14px 16px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: var(--glass-shadow);
}
.report-card-group:hover {
    background: var(--glass-bg-strong);
    border-color: var(--glass-border-strong);
}
.report-card-group__head {
    align-items: flex-start;
    gap: 6px;
}
.report-card-group__name {
    max-width: 100%;
    color: var(--text-primary);
    font-size: 19px;
    font-weight: 850;
    line-height: 1.15;
    letter-spacing: -.35px;
}
.report-card-group__stat {
    width: 100%;
    color: var(--text-muted);
    font-size: 11.5px;
}
.report-card-group__list {
    gap: 2px;
    margin-top: auto;
}
.report-card-stock {
    padding: 3px 0;
}
.report-card-stock__name {
    max-width: 66%;
    font-size: 12px;
    color: var(--text-secondary);
}
.report-card-stock__rate {
    font-size: 12px;
}
.report-stock-list {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 8px 14px;
    box-shadow: var(--glass-shadow);
}
.report-stock-row {
    grid-template-columns: minmax(0, 1.25fr) minmax(120px, .7fr) minmax(70px, .35fr) minmax(0, 1.25fr);
    padding: 13px 0;
    border-bottom: 1px solid var(--glass-border);
}
.report-stock-row:hover {
    background: transparent;
}
.report-stock-row__name {
    font-size: 14px;
    font-weight: 800;
}
.report-stock-row__price {
    color: var(--text-secondary);
    font-size: 12px;
    text-align: right;
}
.report-stock-row__sub {
    color: var(--text-secondary);
    font-size: 12px;
}
.report-rate--down {
    color: #3182F6;
}
.report-pullback-row {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) 72px 72px 72px minmax(160px, .9fr);
    gap: 12px;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid var(--glass-border);
}
.report-pullback-row:last-child {
    border-bottom: none;
}
.report-pullback-row.row--starred {
    background: linear-gradient(90deg, rgba(255, 165, 2, .06), transparent 30%);
}
.report-pullback-row.row--excluded {
    opacity: .55;
}
.report-pullback-main {
    min-width: 0;
}
.report-pullback-sub {
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.report-pullback-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-end;
    font-variant-numeric: tabular-nums;
}
.report-pullback-metric span,
.report-pullback-price span:first-child {
    color: var(--text-muted);
    font-size: 10.5px;
    font-weight: 700;
}
.report-pullback-metric strong {
    font-size: 13px;
    font-weight: 850;
}
.report-pullback-price {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-end;
    color: var(--text-secondary);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.cards-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}
.cards-cell {
    min-width: 0;
    aspect-ratio: 1 / 1;
    background: transparent;
    border: none;
    border-radius: 16px;
    padding: 0;
    text-align: left;
}
.cards-cell:hover {
    border-color: transparent;
}
.report-news-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 14px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: var(--glass-shadow);
    color: var(--text-primary);
    overflow: hidden;
}
.cards-cell:hover .report-news-card {
    background: var(--glass-bg-strong);
    border-color: var(--glass-border-strong);
}
.report-news-card__tag {
    align-self: flex-start;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--wr-accent-bg);
    color: var(--wr-accent);
    font-size: 10px;
    font-weight: 850;
}
.report-news-card__title {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
}
.report-news-card__headline {
    color: var(--text-primary);
    font-size: 19px;
    line-height: 1.14;
    font-weight: 900;
    letter-spacing: -.35px;
    word-break: keep-all;
}
.report-news-card__note {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.35;
}
.report-news-card__items {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: auto;
}
.report-news-card__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    align-items: baseline;
}
.report-news-card__item-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
}
.report-news-card__item-value {
    color: var(--wr-rise);
    font-size: 12px;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}
.report-news-card__item-sub {
    grid-column: 1 / -1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: 10.5px;
}
.cards-modal__generated {
    width: min(640px, 88vw);
    aspect-ratio: 1 / 1;
}
.cards-modal__generated .report-news-card {
    padding: 28px;
    border-radius: 18px;
}
.cards-modal__generated .report-news-card__headline {
    font-size: 34px;
}
.cards-modal__generated .report-news-card__note {
    font-size: 15px;
}
.cards-modal__generated .report-news-card__item-name,
.cards-modal__generated .report-news-card__item-value {
    font-size: 15px;
}

@media (max-width: 980px) {
    .report-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .cards-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .report-pullback-row {
        grid-template-columns: minmax(0, 1fr) repeat(3, 66px);
    }
    .report-pullback-price {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: flex-end;
        gap: 10px;
    }
}

@media (max-width: 768px) {
    .report-head {
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin: 2px 0 14px;
    }
    .report-date-bar {
        width: auto;
        flex: 0 0 auto;
        margin-left: auto;
        justify-content: flex-end;
    }
    .report-date-bar .date-text {
        min-width: 124px;
        font-size: 13.5px;
    }
    .report-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .report-card-group {
        min-height: 112px;
        padding: 13px 14px;
    }
    .report-card-group__name {
        font-size: 17px;
    }
    .cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .report-stock-list {
        padding: 0;
        background: transparent;
        border: none;
        box-shadow: none;
    }
    .report-stock-row,
    .report-pullback-row {
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
        border-radius: 14px;
        padding: 13px 14px;
        margin-bottom: 8px;
        box-shadow: var(--glass-shadow);
    }
    .report-pullback-row {
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 8px 10px;
    }
    .report-pullback-main {
        grid-column: 1 / -1;
    }
    .report-pullback-price {
        grid-column: 1 / -1;
    }
}

@media (max-width: 430px) {
    .report-cards,
    .cards-grid {
        grid-template-columns: 1fr;
    }
    .cards-cell {
        aspect-ratio: 16 / 11;
    }
    .cards-modal__generated {
        width: 88vw;
    }
    .cards-modal__generated .report-news-card {
        padding: 22px;
    }
    .cards-modal__generated .report-news-card__headline {
        font-size: 28px;
    }
}

/* ─────────────────────────────────────────────────────────────
   리포트 compact - +15% 종목 기반 섹터/테마 리포트
   ───────────────────────────────────────────────────────────── */
.report-page--compact {
    max-width: 1440px;
    padding-top: 22px;
    padding-bottom: 44px;
    overflow-x: hidden;
}
.report-page--compact .report-head {
    align-items: center;
    gap: 16px;
    margin: 0 0 18px;
}
.report-page--compact .report-section {
    margin-bottom: 46px;
}
.report-page--compact .report-section__head {
    align-items: center;
    margin-bottom: 16px;
}
.report-page--compact .report-section__title {
    font-size: 16px;
    font-weight: 850;
    letter-spacing: 0;
}
.report-page--compact .cell-change--up {
    color: var(--rise);
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}
.report-page--compact .report-rate--down {
    color: var(--fall, #3182F6);
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}
.report-page--compact a {
    color: inherit;
    text-decoration: none;
}
.report-page--compact a:hover {
    color: var(--toss-blue, #3182F6);
}
.report-page--compact .date-nav:disabled {
    opacity: .35;
    cursor: not-allowed;
}
.report-page--compact .report-date-bar .date-nav {
    width: 34px;
    height: 34px;
    border-radius: 50%;
}

.report-stock-name {
    min-width: 0;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.report-stock-market {
    margin-left: 2px;
}
.report-page--compact .ctrl-wrap {
    flex: 0 0 auto;
    position: relative;
}

.report-leader-card,
.report-group-table,
.report-move-list {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: var(--glass-shadow);
}

.report-leader-card {
    padding: 10px 12px;
}
.report-leader-card.row--starred {
    background: linear-gradient(90deg, rgba(255, 165, 2, .07), var(--glass-bg) 40%);
}
.report-leader-card.row--excluded {
    opacity: .58;
}
.report-leader-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.report-leader-tile {
    min-width: 0;
    min-height: 92px;
    padding: 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .025);
    border: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}
.report-leader-tile--stock {
    background: rgba(255, 71, 87, .055);
}
.report-leader-tile--empty {
    opacity: .65;
}
.report-leader-tile__label {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
}
.report-leader-tile__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 900;
}
.report-leader-card__name {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.report-leader-card__name .report-stock-name {
    font-size: 16px;
}
.report-leader-tile__meta,
.report-leader-tile__sub {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 750;
}
.report-leader-tile__meta strong {
    font-weight: 900;
}
.report-leader-card__reason {
    margin: 6px 0 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.45;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.report-leader-card__rate {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    color: var(--text-muted);
    font-size: 11px;
    white-space: nowrap;
}
.report-leader-card__rate strong {
    font-size: 22px;
    line-height: 1.1;
}
.report-group-table {
    display: flex;
    flex-direction: column;
    padding: 8px 26px;
}
.report-group-row {
    display: grid;
    grid-template-columns: 42px minmax(220px, .8fr) minmax(360px, 1.4fr);
    gap: 14px;
    align-items: center;
    min-width: 0;
    padding: 13px 0;
    border-bottom: 1px solid var(--glass-border);
}
.report-group-row:last-child {
    border-bottom: none;
}
.report-group-row:hover {
    background: rgba(255, 255, 255, .025);
}
.report-group-row__rank {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}
.report-group-row__main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.report-group-row__titleline {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.report-group-row__name {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0;
}
.report-group-row__count {
    flex: 0 0 auto;
    color: var(--text-secondary);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 800;
}
.report-group-row__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 750;
    white-space: nowrap;
}
.report-group-row__meta strong {
    color: var(--text-primary);
    font-weight: 850;
}
.report-group-row__stocks {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    min-width: 0;
}
.report-group-stock {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 40px;
    padding: 4px 0;
    color: var(--text-primary);
    position: relative;
}
.report-group-stock:hover {
    color: var(--text-primary);
}
.report-group-stock.row--excluded {
    opacity: .55;
}
.report-group-stock.row--starred {
    background: transparent;
}
.report-group-stock__name {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
}
.report-group-stock a {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 800;
}
.report-group-stock strong {
    flex: 0 0 auto;
    font-size: 11px;
}
.report-group-stock__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 750;
    white-space: nowrap;
}
.report-group-stock__meta span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.report-move-list {
    list-style: none;
    margin: 0;
    padding: 8px 26px;
}
.report-high-table-wrap {
    margin-top: 0;
    padding-bottom: 0;
}
.report-high-table .cell-reason__inline {
    display: flex;
    align-items: center;
    min-width: 0;
}
.report-move-row.row--starred {
    background: linear-gradient(90deg, rgba(255, 165, 2, .06), transparent 34%);
}
.report-move-row.row--excluded {
    opacity: .58;
}
.report-move-row {
    display: grid;
    grid-template-columns: minmax(0, .75fr) minmax(360px, 1.25fr);
    gap: 14px;
    align-items: center;
    min-width: 0;
    padding: 13px 0;
    border-bottom: 1px solid var(--glass-border);
}
.report-move-row:last-child {
    border-bottom: none;
}
.report-move-row__stock {
    min-width: 0;
}
.report-move-row__name {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.report-move-row__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    min-width: 0;
}
.report-move-metric {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    min-height: 48px;
    padding: 7px 9px;
    border-radius: 7px;
    background: var(--glass-bg);
}
.report-move-metric__top {
    display: flex;
    align-items: baseline;
    gap: 5px;
    max-width: 100%;
    white-space: nowrap;
}
.report-move-metric__top strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}
.report-move-metric__top em {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 750;
}
.report-move-metric small {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.25;
}

@media (hover: hover) {
    .report-group-stock:hover .float-controls,
    .report-group-stock .float-controls:hover {
        opacity: 1;
        pointer-events: auto;
    }
}

@media (max-width: 1040px) {
    .report-group-row {
        grid-template-columns: 38px minmax(0, 1fr);
    }
    .report-group-row__stocks {
        grid-column: 2 / -1;
    }
    .report-move-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 9px;
    }
}

@media (max-width: 768px) {
    .report-page--compact {
        padding: 18px 12px 38px;
    }
    .report-page--compact .report-head {
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin: 0 0 14px;
    }
    .report-page--compact .report-date-bar {
        width: auto;
        flex: 0 0 auto;
        margin-left: auto;
        justify-content: flex-end;
    }
    .report-page--compact .report-date-bar .date-text {
        min-width: 124px;
        font-size: 13.5px;
    }
    .report-leader-card {
        padding: 10px;
    }
    .report-leader-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .report-leader-tile {
        min-height: 78px;
        padding: 11px 12px;
    }
    .report-leader-card__rate {
        align-items: flex-start;
    }
    .report-leader-card__rate strong {
        font-size: 20px;
    }
    .report-group-table,
    .report-move-list {
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
    }
    .report-group-row,
    .report-move-row {
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
        border-radius: 14px;
        box-shadow: var(--glass-shadow);
        margin-bottom: 8px;
        padding: 14px 18px;
    }
    .report-group-row {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 8px 10px;
    }
    .report-group-row__rank {
        grid-column: 1;
    }
    .report-group-row__main {
        grid-column: 2 / -1;
        flex-wrap: wrap;
    }
    .report-group-row__name {
        font-size: 16px;
    }
    .report-group-stock .ctrl-toggle {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
    }
    .report-group-row__stocks {
        grid-column: 2 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .report-move-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 9px;
    }
    .report-move-row__metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 430px) {
    .report-page--compact .report-date-bar {
        gap: 4px;
    }
    .report-page--compact .report-date-bar .date-nav {
        width: 30px;
        height: 30px;
    }
    .report-page--compact .report-date-bar .date-text {
        min-width: 96px;
        padding: 5px 4px;
        font-size: 12.5px;
    }
    .report-leader-card__name .report-stock-name {
        font-size: 15px;
    }
    .report-group-row__stocks {
        grid-template-columns: 1fr;
    }
    .report-group-stock {
        min-height: 40px;
    }
    .report-move-row__metrics {
        gap: 5px;
    }
    .report-move-metric {
        padding: 6px 7px;
    }
    .report-move-metric small {
        font-size: 10px;
    }
}

/* ─────────────────────────────────────────────────────────────
   주도주2 — tmap style visualizer shell
   ───────────────────────────────────────────────────────────── */
body.page-leaders2 .top-bar {
    flex-shrink: 0;
}
.page-leaders2 .leaders2-bar__inner {
    padding: 8px 24px;
    gap: 10px;
}
.leaders2-controls {
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
}
.leaders2-tabs--metric {
    max-width: 100%;
}
.leaders2-extra {
    display: contents;
}
.leaders2-extra[hidden] {
    display: none;
}
.leaders2-extra.is-disabled .tmap-tabs {
    opacity: .42;
}
.leaders2-extra.is-disabled .tmap-tab,
.leaders2-extra.is-disabled .tmap-tab.is-active {
    background: transparent;
    color: var(--text-muted);
    cursor: not-allowed;
    box-shadow: none;
}
[data-theme="light"] .leaders2-extra.is-disabled .tmap-tab,
[data-theme="light"] .leaders2-extra.is-disabled .tmap-tab.is-active {
    background: transparent;
    color: #8b95a1;
}
.leaders2-extra .tmap-tab:disabled {
    pointer-events: none;
}
body.leaders2-embedded {
    margin: 0 !important;
    overflow: hidden !important;
}
body.leaders2-embedded .top-bar,
body.leaders2-embedded .tmap-bar {
    display: none !important;
}
body.leaders2-embedded .tmap-stage {
    min-height: 0 !important;
}
body.leaders2-embedded .date-picker {
    z-index: 9999 !important;
}
.leaders2-shell {
    min-height: 0;
}
.leaders2-stack {
    position: absolute;
    inset: 0;
}
.leaders2-frame {
    position: absolute;
    inset: 0;
    display: none;
    width: 100%;
    height: 100%;
    border: 0;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background: var(--bg-primary);
}
.leaders2-frame.is-active {
    display: block;
}
.leaders2-frame.is-active.is-loaded {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}
.leaders2-loading {
    z-index: 3;
}
@media (max-width: 768px) {
    .page-leaders2 .leaders2-bar__inner {
        padding: 8px 12px;
    }
    .leaders2-controls {
        width: 100%;
        justify-content: flex-start;
        gap: 6px;
    }
}