:root {
    --bg: #070b12;
    --panel: #0d1420;
    --panel2: #121b2b;
    --line: rgba(255,255,255,0.10);
    --text: #edf3ff;
    --muted: #93a1b8;
    --soft: #c7d2e5;
    --cyan: #37d5ff;
    --blue: #4b7dff;
    --green: #55d68b;
    --amber: #f6b84b;
    --red: #ff6678;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background:
        radial-gradient(circle at top left, rgba(55,213,255,0.16), transparent 28%),
        radial-gradient(circle at top right, rgba(75,125,255,0.12), transparent 30%),
        var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Pretendard", "Segoe UI", sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

.page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 22px 100px;
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0 42px;
    color: var(--muted);
    font-size: 13px;
    letter-spacing: 0.08em;
}

.brand {
    color: var(--text);
    font-weight: 800;
}

.hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: stretch;
    margin-bottom: 38px;
}

.hero-main {
    background: linear-gradient(135deg, rgba(18,27,43,0.96), rgba(7,11,18,0.92));
    border: 1px solid var(--line);
    border-radius: 34px;
    padding: 42px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.34);
}

.issue-label {
    color: var(--cyan);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.16em;
    margin-bottom: 20px;
}

.hero h1 {
    font-size: clamp(40px, 6vw, 72px);
    line-height: 1.04;
    letter-spacing: -0.06em;
    margin: 0 0 20px;
}

.subheadline {
    font-size: 22px;
    line-height: 1.55;
    color: var(--soft);
    margin-bottom: 22px;
}

.reader-summary {
    font-size: 17px;
    line-height: 1.9;
    color: var(--muted);
    max-width: 760px;
}

.keyword-wrap,
.tag-wrap,
.archive-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.keyword-chip,
.tag-chip,
.archive-tag {
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.05);
    color: var(--soft);
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 13px;
}

.hero-side {
    display: grid;
    gap: 18px;
}

.mood-card,
.image-teaser {
    background: rgba(18,27,43,0.82);
    border: 1px solid var(--line);
    border-radius: 28px;
    padding: 26px;
}

.mood-card span,
.image-teaser span {
    color: var(--muted);
    font-size: 12px;
    letter-spacing: 0.14em;
    font-weight: 800;
}

.mood-card b {
    display: block;
    font-size: 28px;
    margin-top: 12px;
}

.image-visual {
    height: 190px;
    border-radius: 22px;
    margin-top: 18px;
    background:
        linear-gradient(135deg, rgba(55,213,255,0.22), rgba(75,125,255,0.08)),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 18px);
    border: 1px solid var(--line);
}

.section {
    margin-top: 56px;
    outline: 2px dashed #37d5ff55;
}

.section-title-row {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 18px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 14px;
}

.section-title-row span {
    color: var(--cyan);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.18em;
}

.section-title-row h2 {
    margin: 0;
    font-size: 36px;
    letter-spacing: -0.04em;
}

.summary-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 18px;
}

.summary-card,
.watch-card,
.index-card,
.sector-card,
.supply-panel,
.image-slot,
.close-card,
.empty-panel {
    background: rgba(18,27,43,0.88);
    border: 1px solid var(--line);
    border-radius: 28px;
    padding: 26px;
}

.summary-card h3 {
    font-size: 28px;
    margin: 0 0 14px;
}

.summary-card p,
.watch-card p,
.sector-card p,
.supply-panel p,
.image-slot p,
.close-card p {
    color: var(--soft);
    line-height: 1.75;
}

.watch-card ul,
.relationship-list,
.close-card ul {
    margin: 14px 0 0;
    padding-left: 20px;
    color: var(--soft);
    line-height: 1.8;
}

.index-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

/* =========================================================
   SECTOR CARDS
========================================================= */

.sector-section {
    margin-top: 54px;
}

.sector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

.sector-card {
    position: relative;
    overflow: hidden;
    background: rgba(18,27,43,0.92);
    border: 1px solid var(--line);
    border-radius: 26px;
    padding: 20px;
    min-height: 360px;
}

.sector-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--green);
}

.sector-card.leading::before {
    background: var(--cyan);
}

.sector-card.watch::before {
    background: var(--amber);
}

.sector-card.weak::before {
    background: var(--red);
}

.sector-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sector-status-pill {
    display: inline-flex;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 900;
    background: rgba(255,255,255,0.08);
}

.sector-status-pill.leading {
    color: var(--cyan);
}

.sector-status-pill.watch {
    color: var(--amber);
}

.sector-status-pill.weak {
    color: var(--red);
}

.sector-priority {
    color: var(--muted);
    font-weight: 900;
}

.sector-name {
    font-size: 24px;
    margin: 18px 0 6px;
    letter-spacing: -0.04em;
}

.sector-title {
    font-size: 15px;
    color: var(--soft);
    margin: 0 0 14px;
}

.sector-summary {
    color: var(--soft);
    line-height: 1.75;
    font-size: 14px;
}

.sector-why-box {
    background: rgba(255,255,255,0.045);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 13px;
    margin: 18px 0;
}

.sector-why-box b {
    color: var(--cyan);
}

.sector-why-box p {
    color: var(--soft);
    line-height: 1.7;
    margin-bottom: 0;
}

.sector-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0;
}

.sector-tag {
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.055);
    color: var(--soft);
    border-radius: 999px;
    padding: 7px 11px;
    font-size: 12px;
    font-weight: 800;
}

.sector-stock-list {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.sector-stock-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: center;
    background: rgba(255,255,255,0.045);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 12px;
}

.sector-stock-name {
    font-weight: 900;
    color: var(--text);
}

.sector-stock-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.stock-mini-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 900;
    border-radius: 999px;
    padding: 7px 11px;
    white-space: nowrap;
}

.stock-mini-btn.chart-btn {
    background: rgba(55,213,255,0.14);
    color: var(--cyan);
}

.stock-mini-btn.wos-btn {
    background: rgba(246,184,75,0.15);
    color: var(--amber);
}

.sector-risk {
    margin-top: 18px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
}

@media (max-width: 860px) {
    .sector-grid {
        grid-template-columns: 1fr;
    }

    .sector-stock-row {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .sector-stock-actions {
        justify-content: flex-start;
    }
}

.status-pill {
    display: inline-flex;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 900;
    background: rgba(255,255,255,0.08);
}

.status-pill.leading { color: var(--cyan); }
.status-pill.neutral { color: var(--green); }
.status-pill.weak { color: var(--red); }
.status-pill.watch { color: var(--amber); }

.priority {
    color: var(--muted);
    font-weight: 900;
}

.sector-card h3 {
    font-size: 30px;
    margin: 18px 0 6px;
}

.sector-card h4 {
    font-size: 18px;
    color: var(--soft);
    margin: 0 0 14px;
}

.why-box {
    background: rgba(255,255,255,0.045);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 16px;
    margin: 18px 0;
}

.why-box b {
    color: var(--cyan);
}

.stock-list {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.stock-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    background: rgba(255,255,255,0.045);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 12px;
}

.stock-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.mini-btn {
    font-size: 12px;
    font-weight: 900;
    border-radius: 999px;
    padding: 7px 10px;
}

.chart-btn {
    background: rgba(55,213,255,0.14);
    color: var(--cyan);
}

.wos-btn {
    background: rgba(246,184,75,0.15);
    color: var(--amber);
}

.risk-note {
    margin-top: 18px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
}

.chain-flow {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: 22px 0;
}

.chain-node {
    background: rgba(55,213,255,0.12);
    border: 1px solid rgba(55,213,255,0.25);
    border-radius: 999px;
    padding: 12px 15px;
    font-weight: 800;
}

.chain-arrow {
    color: var(--muted);
}

.target-grid,
.wos-grid,
.image-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}


.target-card,
.wos-card {
    background: rgba(18,27,43,0.88);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 18px;
}

.target-card span,
.wos-card h4 {
    display: block;
    font-size: 20px;
    font-weight: 900;
    margin: 6px 0;
}

.target-card b {
    color: var(--cyan);
}

.premium-badge {
    color: var(--amber);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.14em;
}

.wos-card p {
    color: var(--muted);
    line-height: 1.65;
}



.image-placeholder {
    height: 170px;
    border-radius: 20px;
    border: 1px dashed rgba(255,255,255,0.24);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-weight: 900;
    letter-spacing: 0.14em;
    background:
        linear-gradient(135deg, rgba(55,213,255,0.10), rgba(246,184,75,0.08));
    margin-bottom: 18px;
}

.close-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.disclaimer {
    margin-top: 20px;
    color: var(--muted);
    font-size: 13px;
    border-top: 1px solid var(--line);
    padding-top: 16px;
}

.footer {
    margin-top: 70px;
    color: var(--muted);
    font-size: 13px;
    border-top: 1px solid var(--line);
    padding-top: 22px;
}

@media (max-width: 900px) {
    .hero,
    .summary-grid,
    .index-grid,
    .sector-grid,
    .target-grid {
        grid-template-columns: 1fr;
    }
    .wos-grid,
    .image-grid,
    .close-card {
        grid-template-columns: 1fr;
    }

    .hero-main {
        padding: 28px;
    }

    .section-title-row {
        align-items: start;
        flex-direction: column;
    }

    .stock-row {
        align-items: start;
        flex-direction: column;
    }

    .stock-actions {
        justify-content: flex-start;
    }
}

.market-tape-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.tape-card {
    background: rgba(18,27,43,0.88);
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 22px;
}

.tape-card span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.16em;
}

.tape-card b {
    display: block;
    font-size: 22px;
    margin: 10px 0;
}

.tape-card p {
    color: var(--soft);
    line-height: 1.65;
}

.tape-card.positive {
    border-color: rgba(85,214,139,0.35);
}

.tape-card.negative {
    border-color: rgba(255,102,120,0.35);
}

.tape-card.warning {
    border-color: rgba(246,184,75,0.35);
}

.webzine-chart-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.webzine-chart-card {
    background: rgba(18,27,43,0.9);
    border: 1px solid var(--line);
    border-radius: 28px;
    padding: 22px;
}

.webzine-chart-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-bottom: 14px;
}

.webzine-chart-head h3 {
    margin: 0;
    font-size: 26px;
}

.chart-tabs,
.webzine-chart-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chart-tabs button,

.webzine-chart-options button.active-option {
    color: var(--cyan);
    border-color: rgba(55,213,255,0.45);
    background: rgba(55,213,255,0.08);
}

.webzine-chart-options button {
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.055);
    color: var(--soft);
    border-radius: 999px;
    padding: 7px 11px;
    font-weight: 800;
    cursor: pointer;
}

.chart-tabs button.active {
    color: var(--cyan);
    border-color: rgba(55,213,255,0.45);
}

.webzine-chart-card canvas {
    width: 100%;
    height: 300px;
    background: #07101b;
    border: 1px solid var(--line);
    border-radius: 18px;
}

@media (max-width: 860px) {
    .hero,
    .summary-grid,
    .index-grid,
    .sector-grid,
    .target-grid,
    .wos-grid,
    .image-grid,
    .close-card,
    .webzine-chart-grid {
        grid-template-columns: 1fr;
    }
}

.index-meta {
    font-size: 13px;
    margin-left: 10px;
    font-weight: 800;
    vertical-align: middle;
}

.index-meta.up {
    color: #ff4d6d;
}

.index-meta.down {
    color: #3b82f6;
}

.index-meta {
    margin-left: 10px;
    vertical-align: middle;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}

.meta-date {
    font-size: 11px;
    color: #7f93ac;
    font-weight: 600;
}

.meta-close {
    font-size: 18px;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -0.02em;
}

.meta-change {
    font-size: 15px;
    font-weight: 900;
}

.index-meta.up .meta-change {
    color: #ff4d6d;
}

.index-meta.down .meta-change {
    color: #3b82f6;
}

.bump-panel {
    background: rgba(18,27,43,0.9);
    border: 1px solid var(--line);
    border-radius: 28px;
    padding: 22px;
}

.bump-dates {
    display: grid;
    grid-template-columns: 160px repeat(3, 1fr);
    gap: 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 12px;
    padding-left: 160px;
}

.bump-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 10px;
    align-items: center;
    border-top: 1px solid var(--line);
    padding: 12px 0;
}

.bump-name {
    font-weight: 900;
    color: var(--text);
}

.bump-points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.bump-point {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(55,213,255,0.08);
    border: 1px solid rgba(55,213,255,0.18);
    border-radius: 14px;
    padding: 10px 12px;
}

.bump-point b {
    color: var(--cyan);
}

.bump-point small {
    color: var(--muted);
}

/* =========================================================
   HEATMAP
========================================================= */

.heatmap-section {
    margin-top: 34px;
}

.heatmap-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(220px, 1fr));

    gap: 16px;

    margin-top: 18px;
}

.heat-cell {

    position: relative;

    overflow: hidden;

    border-radius: 18px;

    padding:
        18px
        18px
        20px
        18px;

    min-height: 110px;

    border:
        1px solid rgba(255,255,255,0.06);

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;

    backdrop-filter: blur(10px);
}

.heat-cell:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(255,255,255,0.18);

    box-shadow:
        0 10px 28px rgba(0,0,0,0.32);
}

.heat-cell::before {

    content: "";

    position: absolute;

    inset: 0;

    opacity: 0.14;

    pointer-events: none;
}

.heat-cell b {

    position: relative;

    z-index: 2;

    display: block;

    font-size: 18px;

    font-weight: 800;

    letter-spacing: -0.02em;

    margin-bottom: 12px;

    color: #ffffff;
}

.heat-cell span {

    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    font-size: 13px;

    font-weight: 700;

    padding:
        7px
        12px;

    border-radius: 999px;

    background:
        rgba(255,255,255,0.10);

    color:
        rgba(255,255,255,0.92);
}

/* =========================================================
   GRADE COLORS
========================================================= */

.grade-1 {

    background:
        linear-gradient(
            135deg,
            rgba(52,89,149,0.32),
            rgba(24,36,56,0.92)
        );
}

.grade-1::before {

    background:
        radial-gradient(
            circle at top right,
            rgba(110,170,255,0.65),
            transparent 65%
        );
}

.grade-2 {

    background:
        linear-gradient(
            135deg,
            rgba(42,118,146,0.34),
            rgba(15,47,61,0.92)
        );
}

.grade-2::before {

    background:
        radial-gradient(
            circle at top right,
            rgba(76,211,255,0.55),
            transparent 65%
        );
}

.grade-3 {

    background:
        linear-gradient(
            135deg,
            rgba(44,133,95,0.34),
            rgba(15,58,39,0.92)
        );
}

.grade-3::before {

    background:
        radial-gradient(
            circle at top right,
            rgba(85,255,170,0.50),
            transparent 65%
        );
}

.grade-4 {

    background:
        linear-gradient(
            135deg,
            rgba(167,113,37,0.36),
            rgba(72,43,9,0.94)
        );
}

.grade-4::before {

    background:
        radial-gradient(
            circle at top right,
            rgba(255,193,72,0.56),
            transparent 65%
        );
}

.grade-5 {

    background:
        linear-gradient(
            135deg,
            rgba(158,44,68,0.38),
            rgba(72,11,26,0.96)
        );
}

.grade-5::before {

    background:
        radial-gradient(
            circle at top right,
            rgba(255,95,132,0.60),
            transparent 65%
        );
}

.bumpchart-canvas-wrap {
    background: rgba(18,27,43,0.9);
    border: 1px solid var(--line);
    border-radius: 28px;
    padding: 20px;
    overflow-x: auto;
}

.bumpchart-canvas-wrap canvas {
    width: 100%;
    height: auto;
    display: block;
}

.target-card-wrap {
    margin-bottom: 18px;
}

.inline-chart-box {
    margin-top: 14px;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid #243247;
    background: #020817;
}

.inline-chart-frame {
    width: 100%;
    height: 920px;
    border: 0;
    display: block;
    background: #020817;
}

@media (max-width: 900px) {
    .inline-chart-frame {
        height: 620px;
    }
}

.target-card,
.target-card span,
.target-card b {
    color: #e5edf7 !important;
}

.target-card:hover,
.target-card:hover span,
.target-card:hover b {
    color: #ffffff !important;
}

.sector-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.stock-chart-board {
    width: 100%;
}

.stock-chart-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.stock-chart-tab {
    border: 1px solid #334155;
    background: #111827;
    color: #e5edf7;
    padding: 10px 16px;
    border-radius: 999px;
    font-weight: 900;
    cursor: pointer;
}

.stock-chart-tab.active,
.stock-chart-tab:hover {
    background: #0ea5e9;
    border-color: #38bdf8;
    color: #03121f;
}

.stock-chart-viewer {
    width: 100%;
    border: 1px solid #243247;
    border-radius: 24px;
    overflow: hidden;
    background: #020817;
}

.stock-chart-frame {
    width: 100%;
    height: 620px;
    border: 0;
    display: block;
    background: #020817;
}

@media (max-width: 900px) {
    .stock-chart-frame {
        height: 520px;
    }
}

.stock-chart-board,
.stock-chart-viewer {
    width:100%;
    height:900px;
    overflow:hidden;
}

.stock-chart-frame iframe {
    width:100%;
    height:900px;
    border:none;
    overflow:hidden;
}

@media (max-width:768px){

    .stock-chart-board,
    .stock-chart-viewer {
        height:700px;
    }

    .stock-chart-frame iframe {
        height:700px;
    }

}

.stock-chart-viewer {
    display: block !important;
    overflow: hidden;
}

.stock-chart-frame {
    width:100%;
    height:900px;
    border:none;
    overflow:hidden;
}

.chart-target-section,
.chart-target-wrapper,
.chart-target-container {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
}

.chart-target-full {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}

.chart-target-full .stock-chart-board,
.chart-target-full .stock-chart-viewer,
.chart-target-full .stock-chart-frame {
    width: 100% !important;
    max-width: 100% !important;
}

.chart-target-full .stock-chart-frame {
    height: 780px;
}

.chart-target-full {
    width: 100vw !important;
    max-width: 1180px !important;
    margin-left: 50% !important;
    transform: translateX(-50%) !important;
}

.chart-target-full .stock-chart-viewer {
    width: 100% !important;
}

.chart-target-full .stock-chart-frame {
    width: 100% !important;
    height: 780px !important;
}

canvas {
    display: block;
    width: 100%;
    height: 780px;
}

.sector-bump-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: center;
    gap: 10px;
    margin: 7px 0;
}

.sector-bump-name {
    font-size: 13px;
    font-weight: 800;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sector-bump-points {
    display: flex;
    align-items: center;
    min-height: 18px;
}

.mini-bump-dot {
    width: 11px;
    height: 11px;
    border-radius: 999px;
    display: inline-block;
    flex: 0 0 auto;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.9);
}

.mini-bump-line {
    width: 22px;
    height: 2px;
    display: inline-block;
    flex: 0 0 auto;
    background: #d1d5db;
}

.mini-bump-dot.rank-1 {
    background: #dc2626;
}

.mini-bump-dot.rank-2 {
    background: #ef4444;
}

.mini-bump-dot.rank-3 {
    background: #f97316;
}

.mini-bump-dot.rank-4 {
    background: #facc15;
}

.mini-bump-dot.rank-5 {
    background: #9ca3af;
}

.mini-bump-dot.rank-out,
.mini-bump-dot.rank-empty {
    background: #e5e7eb;
}


/* =========================================================
   CHART TARGET FRAME FINAL OVERRIDE
========================================================= */

.chart-target-full .stock-chart-board,
.chart-target-full .stock-chart-viewer {
    height: 1100px !important;
    overflow: hidden !important;
}

.chart-target-full .stock-chart-frame {
    width: 100% !important;
    height: 1100px !important;
    border: none !important;
    display: block !important;
    background: #020817 !important;
}


/* =========================================================
   SECTOR MINI BUMPCHART V2
========================================================= */

.sector-bumpchart-box-v2 {
    margin-top: 18px;
    background: rgba(255,255,255,0.035);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 14px;
}

.sector-bumpchart-title {
    font-size: 13px;
    font-weight: 900;
    color: var(--cyan);
    margin-bottom: 10px;
}

.sector-mini-bump-wrap {
    width: 100%;
    overflow: hidden;
}

.sector-mini-bump-svg {
    width: 100%;
    height: auto;
    display: block;
}

.sector-mini-bump-grid-line {
    stroke: rgba(255,255,255,0.10);
    stroke-width: 1;
}

.sector-mini-bump-rank-label {
    fill: rgba(237,243,255,0.62);
    font-size: 11px;
    font-weight: 800;
}

.sector-mini-bump-line-path {
    opacity: 0.88;
}

.sector-mini-bump-point {
    stroke: rgba(7,11,18,0.95);
    stroke-width: 1.8;
}

.sector-mini-bump-stock-label {
    font-size: 11px;
    font-weight: 900;
    dominant-baseline: middle;
}

.sector-mini-bump-date-label {
    fill: rgba(147,161,184,0.8);
    font-size: 10px;
    font-weight: 800;
}

/* =========================================================
   SECTOR MINI BUMPCHART V2 - LEFT LEGEND
========================================================= */

.sector-mini-bump-layout {
    display: grid;
    grid-template-columns: 128px 1fr;
    gap: 10px;
    align-items: stretch;
}

.sector-mini-bump-legend {
    display: grid;
    grid-template-rows: repeat(8, 1fr);
    gap: 4px;
    padding-top: 20px;
    padding-bottom: 28px;
    min-height: 250px;
}

.sector-mini-bump-legend-row {
    display: grid;
    grid-template-columns: 10px 1fr 30px;
    gap: 6px;
    align-items: center;
    min-width: 0;
    font-size: 11px;
    font-weight: 900;
    color: var(--soft);
}

.sector-mini-bump-legend-color {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    display: inline-block;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.35);
}

.sector-mini-bump-legend-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sector-mini-bump-legend-rank {
    color: var(--muted);
    text-align: right;
}

/* =========================================================
   SECTOR MINI BUMPCHART V3 - STOCK ROW VIEW
========================================================= */

.sector-bumpchart-box-v3 {
    margin-top: 18px;
    background: rgba(255,255,255,0.035);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 14px;
}

.sector-row-bump-wrap {
    width: 100%;
    overflow: hidden;
}

.sector-row-bump-svg {
    width: 100%;
    height: auto;
    display: block;
}

.sector-row-bump-guide {
    stroke: rgba(255,255,255,0.10);
    stroke-width: 1;
    stroke-dasharray: 3 5;
}

.sector-row-bump-stock-name {
    fill: rgba(237,243,255,0.90);
    font-size: 13px;
    font-weight: 900;
}

.sector-row-bump-line {
    opacity: 0.92;
}

.sector-row-bump-point {
    stroke: rgba(7,11,18,0.95);
    stroke-width: 1.7;
}

.sector-row-bump-rank {
    font-size: 11px;
    font-weight: 900;
}

.sector-row-bump-date {
    fill: rgba(147,161,184,0.82);
    font-size: 10px;
    font-weight: 800;
}


/* =========================================================
   SECTOR MINI BUMPCHART V2 - CROSSING RANK VIEW
========================================================= */

.sector-bumpchart-box-v2 {
    margin-top: 18px;
    background: rgba(255,255,255,0.035);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 14px;
}

.sector-bumpchart-title {
    font-size: 13px;
    font-weight: 900;
    color: var(--cyan);
    margin-bottom: 10px;
}

.sector-mini-bump-layout {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 10px;
    align-items: stretch;
}

.sector-mini-bump-legend {
    display: grid;
    grid-template-rows: repeat(8, 1fr);
    gap: 4px;
    padding-top: 22px;
    padding-bottom: 34px;
    min-height: 280px;
}

.sector-mini-bump-legend-row {
    display: grid;
    grid-template-columns: 10px 1fr 34px;
    gap: 7px;
    align-items: center;
    min-width: 0;
    font-size: 12px;
    font-weight: 900;
    color: var(--soft);
}

.sector-mini-bump-legend-color {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    display: inline-block;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.35);
}

.sector-mini-bump-legend-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sector-mini-bump-legend-rank {
    color: var(--muted);
    text-align: right;
}

.sector-mini-bump-wrap {
    width: 100%;
    overflow: hidden;
}

.sector-mini-bump-svg {
    width: 100%;
    height: auto;
    display: block;
}

.sector-mini-bump-grid-line {
    stroke: rgba(255,255,255,0.10);
    stroke-width: 1;
}

.sector-mini-bump-rank-label {
    fill: rgba(237,243,255,0.62);
    font-size: 11px;
    font-weight: 800;
}

.sector-mini-bump-line-path {
    opacity: 0.92;
}

.sector-mini-bump-point {
    stroke: rgba(7,11,18,0.95);
    stroke-width: 1.8;
}

.sector-mini-bump-date-label {
    fill: rgba(147,161,184,0.8);
    font-size: 10px;
    font-weight: 800;
}

/* =========================================================
   SECTOR MINI RANK BUMP - SIMPLE
========================================================= */

.sector-bumpchart-simple {
    margin-top: 16px;
    background: rgba(255,255,255,0.035);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 12px;
}

.sector-bumpchart-title {
    font-size: 13px;
    font-weight: 900;
    color: var(--cyan);
    margin-bottom: 8px;
}

.sector-mini-rank-wrap {
    width: 100%;
    overflow: hidden;
}

.sector-mini-rank-svg {
    width: 100%;
    height: auto;
    display: block;
}

.sector-mini-rank-line {
    stroke: rgba(255,255,255,0.10);
    stroke-width: 1;
}

.sector-mini-rank-label {
    fill: rgba(237,243,255,0.70);
    font-size: 10px;
    font-weight: 800;
}

.sector-mini-rank-path {
    opacity: 0.92;
}

.sector-mini-rank-dot {
    stroke: rgba(7,11,18,0.95);
    stroke-width: 1.2;
}

/* =========================================================
   SECTOR RANK BUMP - LEFT STOCK NAME + CROSSING LINES
========================================================= */

.sector-bumpchart-simple {
    margin-top: 16px;
    background: rgba(255,255,255,0.035);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 12px;
}

.sector-bumpchart-title {
    font-size: 13px;
    font-weight: 900;
    color: var(--cyan);
    margin-bottom: 8px;
}

.sector-rank-bump-wrap {
    width: 100%;
    overflow: hidden;
}

.sector-rank-bump-svg {
    width: 100%;
    height: auto;
    display: block;
}

.sector-rank-bump-stock-label {
    font-size: 7px;
    font-weight: 700;
}

.sector-rank-bump-line {
    opacity: 0.94;
}

.sector-rank-bump-dot {
    stroke: rgba(7,11,18,0.95);
    stroke-width: 1.1;
}


/* =========================================================
   WS VIDEO STUDIO LAYOUT
   - 좌측 목차 고정
   - 우측 웹진 본문
   - 영상 촬영용 고정 카메라 구조
========================================================= */

.ws-studio-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 0;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
}

.ws-studio-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 28px 18px;
    border-right: 1px solid var(--line);
    background: rgba(7,11,18,0.82);
    backdrop-filter: blur(14px);
    overflow-y: auto;
    z-index: 50;
}

.ws-sidebar-brand {
    color: var(--cyan);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.14em;
    margin-bottom: 28px;
}

.ws-sidebar-nav {
    display: grid;
    gap: 10px;
}

.ws-sidebar-nav a {
    display: block;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    background: rgba(255,255,255,0.035);
    color: var(--soft);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.35;
}

.ws-sidebar-nav a:hover {
    color: var(--text);
    border-color: rgba(55,213,255,0.35);
    background: rgba(55,213,255,0.08);
}

.ws-studio-main {
    max-width: 1280px;
    width: 100%;
    padding-left: 36px;
    padding-right: 36px;
}


/* 영상 촬영용 기본 화면감 */
@media (min-width: 1200px) {
    .ws-studio-main .hero,
    .ws-studio-main .section {
        min-height: 720px;
    }
}

/* 모바일에서는 기존 웹진처럼 세로형 */
@media (max-width: 900px) {
    .ws-studio-layout {
        display: block;
    }

    .ws-studio-sidebar {
        position: relative;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--line);
    }

    .ws-studio-main {
        padding-left: 22px;
        padding-right: 22px;
    }
}

/* =========================================================
   WS SECTOR SINGLE SCREEN
========================================================= */

.ws-sector-flow-intro {
    min-height: 720px;
}

.ws-sector-screen {
    min-height: 720px;
}

.ws-sector-single-card {
    width: 100%;
    min-height: 560px;
    padding: 28px;
}

.ws-sector-single-card .sector-name {
    font-size: 34px;
}

.ws-sector-single-card .sector-title {
    font-size: 20px;
}

.ws-sector-single-card .sector-summary {
    font-size: 16px;
}

.ws-sector-single-card .sector-stock-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 900px) {
    .ws-sector-single-card .sector-stock-list {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   VIDEO STUDIO OVERRIDE
===================================================== */

/* 전체 1920x1080 방송 프레임 기준 */
.ws-studio-layout {
    display: grid !important;
    grid-template-columns: 260px minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 1920px !important;
    min-height: 100vh !important;
    margin: 0 auto !important;
}

/* 좌측 사이드바 */
.ws-studio-sidebar {
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    padding: 24px 16px !important;
    border-right: 1px solid rgba(255,255,255,0.16) !important;
    background: rgba(7,11,18,0.94) !important;
    overflow-y: auto !important;
}

/* 사이드바 브랜드 */
.ws-sidebar-brand {
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
    margin-bottom: 24px !important;
}

/* 사이드바 메뉴 */
.ws-sidebar-nav {
    display: grid !important;
    gap: 12px !important;
}

.ws-sidebar-nav a {
    display: block !important;
    padding: 13px 14px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    background: rgba(255,255,255,0.045) !important;
    color: var(--soft) !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
}

/* 본문 */
.ws-studio-main {
    width: 100% !important;
    max-width: none !important;
    padding: 20px 30px 80px !important;
    margin: 0 !important;
}

/* 촬영 구도 확인용 섹션 테두리 */
.ws-studio-main .hero,
.ws-studio-main .section {
    min-height: calc(100vh - 40px) !important;
    margin-top: 0 !important;
    margin-bottom: 28px !important;
    padding: 8px !important;
    border-radius: 28px !important;
    scroll-margin-top: 18px !important;
}

/* 섹션 제목 구분선 */
.ws-studio-main .section-title-row {
    margin-bottom: 18px !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid rgba(55,213,255,0.28) !important;
}

.ws-studio-main .section-title-row h2 {
    font-size: 36px !important;
}

.ws-studio-main .section-title-row span {
    font-size: 14px !important;
}

/* 상단바 공간 줄이기 */
.ws-studio-main .topbar {
    padding: 4px 0 18px !important;
}

/* Hero 화면 정리 */
.ws-studio-main .hero {
    display: grid !important;
    align-items: start !important;
    align-content: start !important;
    justify-items: stretch !important;
}

.ws-studio-main .hero .ws-camera-frame {
    margin-top: 0 !important;
    align-self: start !important;
}

.ws-studio-main .hero-main {
    padding: 44px !important;
}

.ws-studio-main .hero h1 {
    font-size: clamp(52px, 5vw, 82px) !important;
}

.ws-studio-main .subheadline {
    font-size: 26px !important;
}

.ws-studio-main .reader-summary {
    font-size: 20px !important;
    max-width: 1100px !important;
}

.ws-studio-main {
    padding-top: 0 !important;
}



/* =====================================================
   HERO SECTION - VIDEO STUDIO
===================================================== */

.ws-hero-camera {
    display: grid !important;
    align-items: stretch !important;
}

.ws-hero-layout {
    display: grid !important;
    grid-template-rows: auto 1fr !important;
    gap: 24px !important;
    height: 100% !important;
}

.ws-hero-main-card {
    padding: 42px !important;
    margin: 0 !important;
}

.ws-hero-main-card h1 {
    font-size: clamp(52px, 4.5vw, 76px) !important;
    line-height: 1.08 !important;
    margin-bottom: 22px !important;
}

.ws-hero-main-card .subheadline {
    font-size: 25px !important;
    line-height: 1.45 !important;
}

.ws-hero-main-card .reader-summary {
    font-size: 19px !important;
    line-height: 1.7 !important;
    margin-top: 22px !important;
}

.ws-hero-bottom-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

.ws-hero-info-card {
    min-height: 210px !important;
    padding: 24px !important;
}

.ws-hero-info-card span {
    display: block !important;
    color: var(--cyan) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0.12em !important;
    margin-bottom: 12px !important;
}

.ws-hero-info-card h3 {
    font-size: 22px !important;
    line-height: 1.35 !important;
    margin-bottom: 14px !important;
}

.ws-hero-info-card p,
.ws-hero-info-card li {
    font-size: 17px !important;
    line-height: 1.6 !important;
}

.ws-hero-layout {
    gap: 18px !important;
}

.ws-hero-main-card {
    padding: 32px !important;
}

.ws-hero-info-card {
    min-height: 180px !important;
    padding: 20px !important;
}

.ws-camera-frame {
    margin: 0 !important;
}

/* 02 지수 촬영용: 지수 배경 카드는 임시 숨김 */
#ws_studio_index_cards {
    display: none !important;
}


/* 02 지수 차트 섹션을 방송 화면으로 사용 */
#ws_studio_index_charts {
    min-height: calc(100vh - 40px) !important;
}

#ws_studio_index_charts .webzine-chart-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

#ws_studio_index_charts .webzine-chart-card {
    min-height: 520px !important;
}

/* =====================================================
   VIDEO STUDIO POSITION FIX
===================================================== */

/* 본문 상단 여백 제거 */
.ws-studio-main {
    padding-top: 4px !important;
}

/* 상단바 높이 최소화 */
.ws-studio-main .topbar {
    height: 24px !important;
    padding: 0 !important;
    margin: 0 0 6px 0 !important;
    font-size: 11px !important;
}

/* 모든 섹션을 화면 상단에 더 붙임 */
.ws-studio-main .hero,
.ws-studio-main .section {
    padding-top: 6px !important;
    margin-bottom: 16px !important;
    scroll-margin-top: 0 !important;
}

/* 카메라 프레임 위쪽 여백 축소 */
.ws-camera-frame {
    margin-top: 0 !important;
    padding-top: 12px !important;
}

/* 02 지수 차트 위쪽 압축 */
#ws_studio_index_charts {
    padding-top: 4px !important;
}

#ws_studio_index_charts .section-title-row {
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
}

/* 지수 차트 카드 높이 조정 */
#ws_studio_index_charts .webzine-chart-card {
    min-height: 460px !important;
    padding: 18px !important;
}

#ws_studio_index_charts canvas {
    height: 300px !important;
}

/* =====================================================
   INDEX SECTION MERGE
===================================================== */

/* 지수 설명카드 */

#ws_studio_index_cards {

    min-height: auto !important;

    margin-bottom: 12px !important;

}

#ws_studio_index_cards .section-title-row {

    display: none !important;

}

#ws_studio_index_cards .index-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

/* 카드 압축 */

#ws_studio_index_cards .index-card {

    min-height: 130px !important;

    padding: 18px !important;

}

/* 차트 섹션 */

#ws_studio_index_charts {

    margin-top: 0 !important;

}

#ws_studio_index_charts .section-title-row {

    margin-top: 0 !important;

    padding-top: 0 !important;

}

/* 차트 카드 */

#ws_studio_index_charts .webzine-chart-card {

    min-height: 500px !important;

}

/* =====================================================
   STUDIO SIDEBAR HARD FIX
===================================================== */

.ws-studio-layout {
    display: grid !important;
    grid-template-columns: 260px minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 1920px !important;
    margin: 0 auto !important;
}

.ws-studio-sidebar {
    display: block !important;
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    padding: 24px 14px !important;
    background: #070b12 !important;
    border-right: 1px solid rgba(255,255,255,0.15) !important;
    z-index: 999 !important;
}

.ws-sidebar-brand {
    display: block !important;
    color: #37d5ff !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    margin-bottom: 24px !important;
}

.ws-sidebar-nav {
    display: grid !important;
    gap: 10px !important;
}

.ws-sidebar-nav a {
    display: block !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: #edf3ff !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
}

.ws-studio-main {
    max-width: none !important;
    width: 100% !important;
    padding: 24px 36px 80px !important;
    margin: 0 !important;
}

/* =====================================================
   VIDEO STUDIO FIXED SCREEN GRID
===================================================== */

.topbar {
    display: none !important;
}

.section {
    border: none !important;
    outline: none !important;
    min-height: 900px !important;
    height: 900px !important;
    padding: 24px !important;
    margin: 0 0 36px 0 !important;
    overflow: hidden !important;
}

.ws-camera-frame {
    height: 760px !important;
    min-height: 760px !important;
    padding: 28px !important;
    display: grid !important;
    align-items: start !important;
}

.hero {
    min-height: 900px !important;
    height: 900px !important;
    padding-top: 24px !important;
}

.hero-main {
    height: auto !important;
    padding: 54px 64px !important;
}

.hero-main h1 {
    font-size: 64px !important;
    line-height: 1.08 !important;
}

.hero-main .subheadline {
    font-size: 24px !important;
    line-height: 1.45 !important;
}

.hero-main .reader-summary {
    font-size: 18px !important;
    line-height: 1.6 !important;
}


.hero-bottom-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

.hero-info-card {
    min-width: 0;
    min-height: 260px;
    overflow: hidden;
}

.hero-info-card ul {
    margin: 12px 0 0 0;
    padding-left: 18px;
}

.hero-info-card li {
    margin-bottom: 8px;
    line-height: 1.55;
    font-size: 14px;
}

@media (max-width: 1400px) {
    .hero-bottom-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .hero-bottom-grid {
        grid-template-columns: 1fr;
    }
}

.hero-info-card {
    background: rgba(7,18,40,.88);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    padding: 22px;
    min-height: 180px;
    overflow: hidden;
}

.hero-info-label {
    color: #37d5ff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .12em;
    margin-bottom: 12px;
}

.hero-info-card h3 {
    font-size: 22px;
    line-height: 1.35;
    margin: 0 0 12px;
}

.hero-info-card p,
.hero-info-card li {
    font-size: 15px;
    line-height: 1.55;
}

/* =====================================================
   INDEX SECTION COMPACT FIX
===================================================== */

.hero + .index-section {
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    margin-top: 80px !important;
    padding-top: 0 !important;
}

.index-section {
    clear: both !important;
    position: relative !important;
    z-index: 1 !important;
}

.index-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin-bottom: 8px !important;
}

.index-card {
    min-width: 0 !important;
    min-height: 110px !important;
    padding: 18px !important;
}

.webzine-chart-grid {
    gap: 16px !important;
    margin-top: 0 !important;
}

.webzine-chart-card {
    padding: 18px !important;
}

.webzine-chart-card canvas {
    height: 300px !important;
}

.summary-grid {
    gap: 16px !important;
    margin-top: 0 !important;
}

.summary-card,
.watch-card {
    min-height: 190px !important;
    padding: 20px !important;
}

.hero {
    margin-bottom: 0 !important;
}

.chart-toolbar{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:10px;
}

.chart-toolbar button{
    padding:6px 10px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,.15);
    background:#10233f;
    color:#fff;
    cursor:pointer;
}

/* =====================================================
   BUMPCHART SAFE CAMERA ZONE
===================================================== */

.bumpchart-section {

    transform: scale(0.90) !important;
    transform-origin: top left !important;

    width: 104% !important;

    height: 920px !important;

    margin-top: -40px !important;
    margin-bottom: -80px !important;
}

/* =====================================================
   HEATMAP CAMERA LAYOUT FIX
===================================================== */

.heatmap-section {
    height: 900px !important;
    min-height: 900px !important;
    padding-top: 20px !important;
    margin-top: -20px !important;
    overflow: hidden !important;
}

.heatmap-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 18px !important;
    margin-top: 28px !important;
}

.heat-cell {
    min-height: 110px !important;
    padding: 22px !important;
    border-radius: 18px !important;
}

.heat-cell b {
    font-size: 22px !important;
}

.heat-cell span {
    margin-top: 14px !important;
    font-size: 14px !important;
}

.heatmap-section {
    transform: scale(0.92);
    transform-origin: top left;
    width: 100%;
}

/* HEATMAP TEXT SIMPLIFY */

.heat-cell b {
    display: none !important;
}

.heat-cell span {
    display: block !important;
    margin-top: 0 !important;

    font-size: 24px !important;
    font-weight: 900 !important;
    color: #ffffff !important;

    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
}

.heat-cell span {
    font-size: 30px !important;
    font-weight: 900 !important;
}

.heat-cell span::after {
    content: "" !important;
}

/* =====================================================
   SECTOR SCREEN CAMERA COMPACT FIX
===================================================== */

.ws-sector-screen {
    height: 900px !important;
    min-height: 900px !important;
    padding-top: 18px !important;
    overflow: hidden !important;
}

.ws-sector-single-card {
    height: 760px !important;
    padding: 26px !important;
    overflow: hidden !important;
}

.sector-card-top {
    margin-bottom: 10px !important;
}

.sector-name {
    font-size: 34px !important;
    line-height: 1.05 !important;
    margin: 0 0 6px !important;
}

.sector-title {
    font-size: 22px !important;
    line-height: 1.25 !important;
    margin: 0 0 14px !important;
}

.sector-summary {
    font-size: 16px !important;
    line-height: 1.45 !important;
    margin: 0 0 14px !important;
}

.sector-why-box {
    padding: 16px !important;
    margin: 12px 0 !important;
}

.sector-why-box p {
    font-size: 15px !important;
    line-height: 1.45 !important;
    margin: 6px 0 0 !important;
}

.sector-tags {
    margin: 10px 0 !important;
    gap: 8px !important;
}

.sector-tag {
    font-size: 12px !important;
    padding: 6px 10px !important;
}

.sector-bumpchart-box {
    margin-top: 12px !important;
    padding: 14px !important;
}

.sector-rank-bump-wrap {
    height: 280px !important;
    overflow: hidden !important;
}

.sector-rank-bump-svg {
    width: 100% !important;
    height: 280px !important;
}

.sector-stock-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-top: 8px !important;
    max-height: 135px !important;
    overflow: hidden !important;
}

.sector-stock-row {
    padding: 8px 12px !important;
    min-height: 32px !important;
}
.sector-risk {
    display: none !important;
}

/* =====================================================
   SECTOR MAGAZINE PAGE LAYOUT
===================================================== */

.ws-sector-screen {
    height: 900px !important;
    min-height: 900px !important;
    padding: 18px 0 0 !important;
    overflow: hidden !important;
}

.sector-magazine-card {
    width: 94% !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    height: 790px !important;
    overflow: hidden !important;
}

.ws-sector-screen {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.ws-studio-main .ws-sector-screen {
    padding-left: 0 !important;
}

.sector-magazine-header {
    display: grid !important;
    grid-template-columns: 220px 1fr !important;
    gap: 28px !important;
    align-items: center !important;
    margin-bottom: 18px !important;
}

.sector-badge-box {
    height: 155px !important;
    border: 2px solid rgba(55,213,255,.85) !important;
    border-radius: 24px !important;
    display: grid !important;
    place-items: center !important;
    background: rgba(5,20,38,.72) !important;
}

.sector-badge-small {
    font-size: 20px !important;
    font-weight: 900 !important;
    color: #dce8ff !important;
    letter-spacing: .02em !important;
    margin-bottom: -20px !important;
}

.sector-badge-name {
    font-size: 62px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    color: #f4f7ff !important;
}

.sector-title-big {
    font-size: 54px !important;
    line-height: 1.05 !important;
    margin: 0 0 14px !important;
    color: #f4f7ff !important;
}

.sector-summary-big {
    font-size: 23px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    color: #c8d7f5 !important;
}

.sector-why-strip {
    display: grid !important;
    grid-template-columns: 160px 1fr auto !important;
    gap: 20px !important;
    align-items: center !important;
    padding: 18px 22px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    margin-bottom: 22px !important;
}

.sector-why-label {
    font-size: 22px !important;
    font-weight: 900 !important;
    color: #37d5ff !important;
}

.sector-why-strip p {
    font-size: 18px !important;
    line-height: 1.45 !important;
    margin: 0 !important;
    color: #edf3ff !important;
}

.sector-tags-inline {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
}

.sector-tags-inline .sector-tag {
    font-size: 15px !important;
    padding: 9px 14px !important;
}

.sector-magazine-body {
    display: grid !important;
    grid-template-columns: 1fr 2fr !important;
    gap: 18px !important;
    height: 420px !important;
}

.sector-stock-panel,
.sector-bump-panel {
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.035) !important;
    padding: 20px !important;
    overflow: hidden !important;
}

.sector-stock-panel h4 {
    color: #37d5ff !important;
    font-size: 26px !important;
    margin: 0 0 18px !important;
}

.sector-stock-list-magazine {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    max-height: 330px !important;
    overflow: hidden !important;
}

.sector-stock-list-magazine .sector-stock-row:nth-of-type(n+6) {
    display: none !important;
}

.sector-stock-list-magazine .sector-stock-row {
    min-height: 64px !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    font-size: 19px !important;
    font-weight: 900 !important;
    align-items: flex-start !important;
    box-sizing: border-box !important;
}

.sector-stock-copy {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

.sector-stock-description {
    margin-top: 3px !important;
    color: #b9c9df !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.01em !important;
}

.sector-bump-panel .sector-bumpchart-box {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

.sector-bump-panel .sector-bumpchart-title {
    font-size: 26px !important;
    color: #37d5ff !important;
    margin-bottom: 12px !important;
}

.sector-bump-panel .sector-rank-bump-wrap {
    height: 330px !important;
}

.sector-bump-panel .sector-rank-bump-svg {
    width: 100% !important;
    height: 330px !important;
}

.sector-risk {
    display: none !important;
}

.sector-magazine-card {
    transform: scale(0.95);
    transform-origin: top center;
}

.sector-rank-bump-right-label {
    font-size: 10px !important;
    font-weight: 800 !important;
}

.sector-bump-panel .sector-rank-bump-svg {
    width: 100% !important;
    height: 340px !important;
}

.sector-badge-name {
    font-size: 62px !important;
}

.sector-badge-name-long {
    font-size: 38px !important;
    line-height: 1.05 !important;
    font-weight: 950 !important;
    color: #f4f7ff !important;
    text-align: center !important;
}


/* =====================================================
   SUPPLY CHAIN IMAGE MAP
===================================================== */

.supply-chain-section {
    width: 88% !important;
    height: 900px !important;
    min-height: 900px !important;
    padding-top: 18px !important;
    overflow: hidden !important;
}

.supply-chain-image-panel {
    width: 98% !important;
    margin: 0 auto !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    background: rgba(7,18,40,.65) !important;
}

.supply-chain-map-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

.supply-chain-map-image {
    display: block !important;

    width: 88% !important;
    height: auto !important;

    margin: 0 auto !important;
}



/* =====================================================
   CHART TARGETS SAFE WIDTH
===================================================== */

#ws_studio_chart_targets {
    width: 94% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
}

#ws_anchor_chart_tabs {
    max-width: 100% !important;
    overflow: visible !important;
}

#ws_anchor_chart_board {
    transform: none !important;

    width: 96% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.stock-chart-viewer {
    height: 700px !important;
}

.stock-chart-frame {
    height: 700px !important;
}


/* CLOSING PAGE FINAL LAYOUT */

#ws_studio_closing_board {
    width: 88% !important;
}

#ws_studio_closing {
    width: 88% !important;
    height: 900px !important;
    min-height: 900px !important;
    padding-top: 40px !important;
}

#ws_studio_closing .closing-card {
    width: 93% !important;
    margin: 70px auto 0 !important;
    padding: 44px !important;
    border-radius: 24px !important;
}

#ws_studio_closing .closing-card {
    display: grid !important;
    grid-template-columns: 1.15fr .85fr !important;
    gap: 40px !important;
    align-items: center !important;
}

#ws_studio_closing p {
    font-size: 22px !important;
    line-height: 1.75 !important;
}

#ws_studio_closing li {
    font-size: 20px !important;
    line-height: 1.7 !important;
}


/* =====================================================
   GLOBAL SECTION GAP COMPACT FIX
===================================================== */

.ws-studio-main .section {
    margin-top: 0 !important;
    margin-bottom: 24px !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}

.ws-studio-main .section + .section {
    margin-top: 0 !important;
}

/* 고정 높이 때문에 아래가 비는 섹션들 */
#ws_studio_supply_chain,
#ws_studio_chart_targets,
#ws_studio_closing,
.ws-sector-screen,
.heatmap-section,
.bumpchart-section,
.index-section {
    min-height: auto !important;
}

/* 차트/공급망처럼 transform 이후 빈 공간 생기는 곳 */
#ws_studio_supply_chain {
    margin-bottom: 24px !important;
}

#ws_studio_chart_targets {
    margin-top: 0 !important;
}

/* 촬영용 섹션 간격 */

#ws_studio_chart_targets {
    margin-top: 120px !important;
}

#ws_studio_closing {
    margin-top: 120px !important;
}

/* =====================================================
   CHART TARGETS RESPONSIVE WIDTH FINAL
===================================================== */

#ws_studio_chart_targets {
    width: 100% !important;
    overflow: hidden !important;
}

.chart-target-full {
    width: 80% !important;
    max-width: 80% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
}

#ws_anchor_chart_board,
.stock-chart-board,
.stock-chart-viewer,
.stock-chart-frame {
    width: 100% !important;
    max-width: 100% !important;
}

#ws_anchor_chart_board {
    transform: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* =====================================================
   STOCK CHART TARGET FRAME FIX
===================================================== */

.chart-target-full {
    overflow: visible !important;
}

.stock-chart-card {
    padding-top: 6px !important;
}

.stock-chart-tabs {
    margin-bottom: 18px !important;
}

.stock-chart-frame,
.stock-chart-box,
.stock-chart-canvas-wrap {
    height: auto !important;
    min-height: 620px !important;
    overflow: visible !important;
}

#stock_chart_frame,
.stock-chart-frame canvas,
.stock-chart-box canvas,
.stock-chart-canvas-wrap canvas {
    height: 750px !important;
    max-height: none !important;
}

.chart-toolbar {
    margin-bottom: 8px !important;
}

/* =====================================================
   CHART TARGETS IFRAME HEIGHT FIX
===================================================== */

.stock-chart-viewer {
    min-height: 760px !important;
    height: 760px !important;
    overflow: hidden !important;
}

.stock-chart-frame {
    width: 100% !important;
    min-height: 820px !important;
    height: 820px !important;
    border: 1px solid rgba(80, 140, 210, 0.35) !important;
    border-radius: 18px !important;
}

/* =====================================================
   DBV2 SECOND UPGRADE · DAILY SESSION / FLOW PANELS
===================================================== */

.daily-data-section {
    min-height: 820px;
    padding: 70px 76px !important;
    background:
        radial-gradient(circle at 90% 10%, rgba(24, 146, 255, 0.11), transparent 34%),
        linear-gradient(145deg, rgba(9, 27, 48, 0.98), rgba(6, 17, 31, 0.99));
}

.macro-detail-section {
    min-height: 820px;
    padding: 70px 76px !important;
    background:
        radial-gradient(circle at 12% 88%, rgba(0, 190, 255, 0.09), transparent 34%),
        linear-gradient(145deg, rgba(8, 28, 48, 0.99), rgba(5, 17, 31, 0.99));
}

.macro-statement-grid {
    display: grid;
    gap: 22px;
    margin-top: 62px;
}

.macro-statement-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.macro-statement-grid.four,
.macro-statement-grid.events {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.macro-statement {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 230px;
    padding: 38px 42px 38px 54px;
    border: 1px solid rgba(112, 173, 226, 0.21);
    border-radius: 22px;
    background: linear-gradient(155deg, rgba(18, 52, 82, 0.88), rgba(8, 27, 47, 0.92));
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.2);
}

.macro-statement i {
    position: absolute;
    top: 32px;
    bottom: 32px;
    left: 24px;
    width: 5px;
    border-radius: 3px;
    background: #42c9ff;
}

.macro-statement.blue i { background: #7397ff; }
.macro-statement.amber i { background: #ffbd59; }

.macro-statement p {
    margin: 0;
    color: #ecf5ff;
    font-size: 28px;
    font-weight: 650;
    line-height: 1.55;
    word-break: keep-all;
}

/* =====================================================
   DBV2 SECOND UPGRADE V2 · EDITORIAL DATA BOARDS
===================================================== */

.global-market-board {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
    margin-top: 42px;
}

.global-cluster {
    min-height: 555px;
    padding: 36px 38px 32px;
    border: 1px solid rgba(92, 178, 236, 0.3);
    border-radius: 26px;
    background:
        radial-gradient(circle at 92% 8%, rgba(44, 187, 255, 0.14), transparent 32%),
        linear-gradient(155deg, rgba(18, 57, 89, 0.96), rgba(7, 25, 44, 0.96));
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.global-cluster > header,
.macro-dashboard-card > header,
.commodity-panel > header,
.event-timeline > header {
    display: flex;
    align-items: center;
    gap: 18px;
}

.global-cluster > header > span {
    display: grid;
    width: 56px;
    height: 56px;
    place-items: center;
    border: 1px solid rgba(80, 199, 255, 0.55);
    border-radius: 16px;
    color: #50c9ff;
    font: 800 20px/1 system-ui, sans-serif;
}

.global-cluster header small,
.macro-dashboard-card header span,
.commodity-panel header span,
.event-timeline header span {
    color: #65cfff;
    font-size: 14px;
    font-weight: 850;
    letter-spacing: 0.13em;
}

.global-cluster h3,
.macro-dashboard-card h3,
.commodity-panel h3,
.event-timeline h3 {
    margin: 3px 0 0;
    color: #f6faff;
    font-size: 30px;
}

.global-metric-pair,
.dual-market-values,
.commodity-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 34px;
}

.macro-metric {
    position: relative;
    min-height: 168px;
    padding: 24px 24px 20px;
    overflow: hidden;
    border: 1px solid rgba(126, 181, 227, 0.2);
    border-radius: 18px;
    background: rgba(3, 18, 33, 0.62);
}

.macro-metric::after {
    position: absolute;
    right: -18px;
    bottom: -34px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(107, 154, 202, 0.09);
    content: "";
}

.macro-metric.positive::after { background: rgba(42, 221, 160, 0.13); }
.macro-metric.negative::after { background: rgba(255, 92, 117, 0.14); }

.macro-metric span,
.macro-metric b,
.macro-metric small {
    position: relative;
    z-index: 1;
    display: block;
}

.macro-metric span { color: #9ab2ca; font-size: 18px; font-weight: 750; }
.macro-metric b { margin-top: 10px; color: #e9f5ff; font-size: 42px; line-height: 1; }
.macro-metric.positive b { color: #47dca5; }
.macro-metric.negative b { color: #ff7080; }
.macro-metric small { margin-top: 13px; color: #7896b3; font-size: 15px; }

.global-cluster > p {
    min-height: 92px;
    margin: 26px 0 0;
    padding: 22px 24px;
    border-left: 4px solid #40c8ff;
    border-radius: 0 14px 14px 0;
    background: rgba(4, 18, 32, 0.42);
    color: #c7d9e9;
    font-size: 21px;
    font-weight: 650;
    line-height: 1.55;
}

.global-link-band {
    display: grid;
    grid-template-columns: 180px 1fr;
    align-items: center;
    gap: 26px;
    min-height: 94px;
    margin-top: 24px;
    padding: 20px 30px;
    border: 1px solid rgba(64, 200, 255, 0.25);
    border-radius: 18px;
    background: linear-gradient(90deg, rgba(23, 92, 129, 0.48), rgba(8, 31, 52, 0.6));
}

.global-link-band b { color: #4ed1ff; font-size: 23px; }
.global-link-band span { color: #d7e6f2; font-size: 22px; }

.macro-dashboard {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-top: 38px;
}

.macro-dashboard-card {
    min-height: 330px;
    padding: 28px 32px;
    border: 1px solid rgba(109, 157, 255, 0.28);
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0, rgba(108, 122, 255, 0.13), transparent 38%),
        linear-gradient(155deg, rgba(18, 50, 79, 0.95), rgba(7, 24, 43, 0.97));
}

.macro-dashboard-card > header {
    justify-content: space-between;
}

.macro-primary-value {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 24px;
}

.macro-primary-value b { color: #f2f7ff; font-size: 60px; line-height: 1; }
.macro-primary-value em { color: #a9bed2; font-size: 21px; font-style: normal; font-weight: 800; }
.macro-primary-value em.positive { color: #4cdda5; }
.macro-primary-value em.negative { color: #ff7384; }

.macro-dashboard-card > p,
.commodity-panel > p {
    margin: 20px 0 0;
    color: #a9c0d5;
    font-size: 18px;
    line-height: 1.5;
}

.gauge-track {
    height: 12px;
    margin-top: 26px;
    overflow: hidden;
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(62, 214, 157, 0.4), rgba(255, 192, 80, 0.4), rgba(255, 86, 110, 0.4));
}

.gauge-track i {
    display: block;
    height: 100%;
    border-right: 4px solid #fff;
    background: rgba(255,255,255,0.12);
}

.curve-visual {
    display: flex;
    align-items: end;
    gap: 12px;
    height: 66px;
    margin-top: 22px;
}

.curve-visual i { flex: 1; border-radius: 6px 6px 0 0; background: linear-gradient(#738fff, #3656a8); }
.curve-visual i:nth-child(1) { height: 38%; }
.curve-visual i:nth-child(2) { height: 52%; }
.curve-visual i:nth-child(3) { height: 68%; }
.curve-visual i:nth-child(4) { height: 82%; }

.macro-dashboard-card .dual-market-values { margin-top: 20px; }
.macro-dashboard-card .macro-metric { min-height: 128px; padding: 19px 20px; }
.macro-dashboard-card .macro-metric b { font-size: 34px; }

.events-dashboard {
    display: grid;
    grid-template-columns: 0.9fr 1.35fr;
    gap: 26px;
    margin-top: 40px;
}

.commodity-panel,
.event-timeline {
    min-height: 650px;
    padding: 34px 36px;
    border: 1px solid rgba(255, 190, 83, 0.25);
    border-radius: 24px;
    background:
        radial-gradient(circle at 10% 100%, rgba(255, 174, 56, 0.1), transparent 35%),
        linear-gradient(155deg, rgba(18, 50, 78, 0.96), rgba(7, 24, 42, 0.97));
}

.commodity-panel > header,
.event-timeline > header { display: block; }
.commodity-panel .commodity-metrics { grid-template-columns: 1fr; margin-top: 30px; }
.commodity-panel .macro-metric { min-height: 165px; }

.event-timeline-card {
    position: relative;
    min-height: 210px;
    margin-top: 24px;
    padding: 26px 90px 24px 30px;
    border-left: 5px solid #ffbd59;
    border-radius: 0 18px 18px 0;
    background: rgba(4, 18, 32, 0.58);
}

.event-timeline-card > b { color: #ffca70; font-size: 24px; }
.event-timeline-card > h3 { margin-top: 12px; font-size: 28px; }
.event-timeline-card > p { margin: 14px 0 0; color: #a9bfd3; font-size: 18px; line-height: 1.48; }
.event-timeline-card > i {
    position: absolute;
    top: 22px;
    right: 24px;
    color: rgba(255, 200, 100, 0.3);
    font-size: 54px;
    font-style: normal;
    font-weight: 900;
}

.session-card {
    min-height: 650px;
    padding: 38px 34px;
}

.session-sparkline {
    height: 270px;
    margin: 24px 0 12px;
}

.session-values div { padding: 20px 10px; }
.session-values span { font-size: 17px; }
.session-values b { font-size: 24px; }
.session-card > p { margin-top: 30px; font-size: 18px; }

.data-unit {
    margin: -20px 0 28px;
    color: #8ea8c4;
    font-size: 18px;
    text-align: right;
}

.session-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.session-card,
.breadth-card,
.flow-summary-card {
    border: 1px solid rgba(113, 174, 232, 0.22);
    border-radius: 22px;
    background: linear-gradient(160deg, rgba(17, 49, 78, 0.86), rgba(9, 26, 44, 0.9));
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.22);
}

.session-card {
    padding: 28px 30px;
}

.session-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.session-card h3,
.breadth-card h3,
.flow-summary-card h3 {
    margin: 0;
    color: #f5f9ff;
    font-size: 30px;
}

.session-card-head strong {
    color: #53d89c;
    font-size: 28px;
}

.session-sparkline {
    width: 100%;
    height: 185px;
    margin: 12px 0 2px;
    overflow: visible;
}

.session-sparkline .spark-base {
    stroke: rgba(157, 188, 218, 0.25);
    stroke-width: 2;
}

.session-sparkline .spark-line {
    fill: none;
    stroke: #50b7ff;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.session-sparkline circle {
    fill: #0b2137;
    stroke: #8bd4ff;
    stroke-width: 4;
}

.session-values {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.session-values div {
    padding: 14px 10px;
    border-radius: 12px;
    background: rgba(4, 16, 29, 0.55);
    text-align: center;
}

.session-values span,
.session-values b {
    display: block;
}

.session-values span {
    color: #8ba4be;
    font-size: 15px;
}

.session-values b {
    margin-top: 6px;
    color: #eff7ff;
    font-size: 21px;
}

.session-card > p {
    margin: 20px 0 0;
    color: #9cb2c8;
    font-size: 16px;
    text-align: center;
}

.breadth-grid,
.flow-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    margin-top: 84px;
}

.breadth-card {
    min-height: 400px;
    padding: 56px 42px;
}

.breadth-bar {
    display: flex;
    width: 100%;
    height: 42px;
    margin: 55px 0 36px;
    overflow: hidden;
    border-radius: 21px;
    background: rgba(140, 159, 181, 0.23);
}

.breadth-bar i {
    background: linear-gradient(90deg, #159b70, #49d9a3);
}

.breadth-bar em {
    margin-left: auto;
    background: linear-gradient(90deg, #ff7272, #ce3e58);
}

.breadth-counts {
    display: flex;
    justify-content: space-between;
    font-size: 26px;
}

.up { color: #4dd8a1 !important; }
.down { color: #ff7585 !important; }

.flow-summary-card {
    min-height: 500px;
    padding: 48px 42px;
}

.flow-summary-card > div {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 24px 0;
    border-bottom: 1px solid rgba(137, 178, 217, 0.14);
}

.flow-summary-card span {
    color: #d2dfed;
    font-size: 25px;
}

.flow-summary-card b {
    font-size: 34px;
    letter-spacing: 0.02em;
}

.ranking-section {
    min-height: 900px;
}

.rank-head,
.rank-row {
    display: grid;
    grid-template-columns: 80px minmax(260px, 1.5fr) 150px 260px 150px;
    align-items: center;
    column-gap: 18px;
}

.rank-head {
    padding: 0 28px 16px;
    color: #7895b1;
    font-size: 17px;
    text-transform: uppercase;
}

.rank-row {
    min-height: 60px;
    padding: 8px 28px;
    border-top: 1px solid rgba(127, 172, 214, 0.13);
    background: rgba(8, 27, 46, 0.46);
}

.rank-row:nth-child(odd) {
    background: rgba(18, 48, 76, 0.48);
}

.rank-row .rank-no {
    color: #67c8ff;
    font-size: 22px;
    font-weight: 800;
}

.rank-row b {
    color: #f3f8fd;
    font-size: 24px;
}

.rank-row small {
    color: #87a2bc;
    font-size: 17px;
}

.rank-row strong {
    color: #dcecff;
    font-size: 23px;
    text-align: right;
}

.rank-row em {
    font-size: 20px;
    font-style: normal;
    font-weight: 750;
    text-align: right;
}

.industry-table {
    display: grid;
    gap: 10px;
}

.industry-row {
    display: grid;
    grid-template-columns: 72px minmax(260px, 1fr) 140px 250px 250px;
    align-items: center;
    min-height: 72px;
    padding: 0 30px;
    border: 1px solid rgba(121, 169, 212, 0.14);
    border-radius: 14px;
    background: rgba(12, 37, 61, 0.72);
}

.industry-row > span {
    color: #67c8ff;
    font-size: 20px;
    font-weight: 800;
}

.industry-row b {
    color: #f1f7fd;
    font-size: 25px;
}

.industry-row small {
    color: #849eb8;
    font-size: 17px;
}

.industry-row strong {
    font-size: 22px;
    text-align: right;
}

@media (max-width: 1280px) {
    .session-grid { grid-template-columns: 1fr; }
    .breadth-grid, .flow-summary-grid { grid-template-columns: 1fr; }
    .macro-statement-grid.two,
    .macro-statement-grid.four,
    .macro-statement-grid.events { grid-template-columns: 1fr; }
}

/* The chart screen must contain title, stock selector and chart in one capture. */
.chart-target-full {
    width: 100% !important;
    max-width: 100% !important;
}

#ws_studio_chart_targets {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 1040px !important;
    height: 1040px !important;
    padding: 54px 26px 34px !important;
    overflow: hidden !important;
}

#ws_studio_chart_targets .section-title-row {
    margin-bottom: 16px !important;
}

#ws_studio_chart_targets .stock-chart-tabs {
    margin-bottom: 12px !important;
}

#ws_studio_chart_targets .stock-chart-viewer {
    min-height: 735px !important;
    height: 735px !important;
    overflow: hidden !important;
}

#ws_studio_chart_targets .stock-chart-frame {
    min-height: 735px !important;
    height: 735px !important;
}