/* Custom styles for Investor Tools Hub */

/* GENERATED TOKENS — do not edit by hand. Source: DESIGN.md → scripts/generate_tokens.py */
:root {
    /* surface */
    --surface: #f5f3e9;
    --surface-muted: #ecefea;
    --surface-strong: #ffffff;
    --card-surface: #ffffff;
    --surface-beige: #f5f3e9;
    --surface-beige-muted: #e6e0cc;
    --surface-navy: #162331;
    --surface-navy-border: rgba(255, 255, 255, 0.14);
    --surface-navy-hover: rgba(255, 255, 255, 0.08);
    --surface-tint: #f7f9fc;
    --highlight-soft: #eef5ff;

    /* text */
    --ink-strong: #1a1f26;
    --ink-muted: #5c656f;
    --text-secondary: #64748b;
    --text-secondary-strong: #475569;
    --text-tertiary: #94a3b8;
    --text-on-navy: #ffffff;
    --text-on-navy-muted: rgba(255, 255, 255, 0.62);
    --border-soft: #d8ddd6;

    /* brand */
    --brand: #008254;
    --brand-deep: #065f46;
    --brand-soft: #e4f0ea;
    --brand-bright: #34d399;
    --brand-light: #2f9e6f;
    --accent: #008254;
    --accent-deep: #065f46;
    --accent-soft: #e4f0ea;
    --hero-stat-accent: #2ba84a;

    /* screener */
    --screener-accent: #1a3c6e;
    --screener-accent-hover: #132f58;
    --screener-accent-soft: #d6e3f5;
    --screener-filter-bg: #f8f9f6;

    /* market */
    --market-up: #c41e14;
    --market-down: #1d56c8;
    --market-flat: #647287;

    /* state */
    --positive-soft-strong: #c8e3d4;
    --negative-soft: #fbe7e5;
    --negative-soft-strong: #f5cdc8;
    --warning: #d97706;
    --warning-soft: #fdecd2;
    --rating-star: #c6932e;

    /* fv-scale */
    --fv-scale-deep-under: #5b93cc;
    --fv-scale-under: #aed0ec;
    --fv-scale-neutral: #e2e6e7;
    --fv-scale-over: #f5d2b6;
    --fv-scale-deep-over: #e8957a;

    /* buffer */
    --buffer-band-1: #8e1b13;
    --buffer-band-2: #bc4c3d;
    --buffer-band-3: #dd8c7c;
    --buffer-band-4: #f0c3b8;

    /* footprint */
    --footprint-stroke: #d60000;
    --footprint-fill: #d60000;

    /* bond */
    --gov-bond-accent: #e8804a;
    --special-bond-accent: #6d28d9;
    --bank-bond-accent: #0a8fd1;
    --card-bond-accent: #c35f92;

    /* chart */
    --chart-blue: #448aff;
    --chart-positive: #6f9fc8;
    --chart-gold: #e8b04b;
    --chart-navy: #1e2f5a;
    --chart-ffo-total: #c96442;
    --chart-affo-total: #e3bfb8;
    --chart-orange: #f57f17;
    --chart-sky: #4dd0e1;
    --chart-purple: #b388ff;
    --chart-pink: #ea80fc;
    --chart-red: #f7525f;
    --chart-rose: #f06292;
    --chart-empty-gray: #f2f2f2;
    --chart-rest: #9aa3ad;
    --chart-special: #7b2d8e;

    /* article */
    --article-highlight-purple: #EDEDFF;
    --article-highlight-yellow: #FEF3B2;
    --article-highlight-green: #E8F5E9;
    --article-highlight-blue: #E3F2FD;

    /* hero */
    --hero-pastel-sky: #bdd4ef;
    --hero-pastel-lavender: #c5b5e8;
    --hero-pastel-rose: #e8bcd8;
    --hero-pastel-cream: #ede8c5;
    --hero-ghost-border: rgba(26, 31, 38, 0.18);

    /* effect */
    --shadow-soft: 0 18px 40px rgba(18, 24, 32, 0.07);

    /* table */
    --table-header-bg: var(--surface-beige-muted);
    --table-header-height: 40px;
    --table-label-bg: var(--surface-beige-muted);

    /* icon */
    --icon-size: 1.25rem;
    --icon-size-sm: 1rem;
    --icon-stroke: 2;
    --icon-color: #2d3136;
    --icon-color-muted: #6b7280;
    --icon-color-active: var(--brand);

    /* scrollbar */
    --scrollbar-track: var(--surface-muted);
    --scrollbar-thumb: var(--icon-color-muted);
    --scrollbar-thumb-hover: var(--ink-muted);
}
/* END GENERATED TOKENS */

html {
    /* Reserve the vertical scrollbar's width unconditionally so switching
       between a short tab (no scrollbar) and a tall tab (scrollbar needed)
       doesn't shift the whole page horizontally by the scrollbar's width. */
    scrollbar-gutter: stable;
}

body {
    font-family: 'Noto Sans KR', 'Malgun Gothic', 'Apple SD Gothic Neo', 'Nanum Gothic', sans-serif;
    background-color: var(--surface) !important;
    color: var(--ink-strong);
    /* Sticky footer (site-wide): body is the flex column that `main` grows
       inside of so `footer` lands at the true bottom of the viewport on
       short pages instead of floating mid-page — see the `main`/`footer`
       rules under "Footer" below. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.page-back-link-wrap {
    margin: 0 0 14px;
}

.page-back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--ink-muted);
    text-decoration: none;
}

.page-back-link:hover {
    color: var(--ink-strong);
}

.page-back-link-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Stroke SVG icons — single visual language */
.icon-svg {
    display: inline-block;
    width: var(--icon-size);
    height: var(--icon-size);
    flex-shrink: 0;
    vertical-align: -0.15em;
    color: var(--icon-color);
}

.icon-svg-sm {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
}

.icon-svg-muted {
    color: var(--icon-color-muted);
}

a .icon-svg,
.btn .icon-svg {
    color: inherit;
}

/* Custom banner override */
.custom-banner {
    background: var(--brand) !important;
    background-color: var(--brand) !important;
    background-image: none !important;
}

/* CLEAN NAVBAR SETUP */
.navbar {
    height: 82px !important;
    min-height: 82px !important;
    box-shadow: none !important;
    background-color: var(--surface-strong) !important;
    border-bottom: 1px solid var(--border-soft);
}

/* Push page content below the 82px fixed navbar (mt-5=48px + 42px = 90px clearance) */
main.container {
    padding-top: 42px !important;
}

.navbar.bg-dark {
    background-color: var(--surface-strong) !important;
    /* hairline along the navbar base — the line the hover panel unfolds from */
    border-bottom: 1px solid var(--border-soft);
}

.navbar-brand,
.navbar-dark .navbar-brand {
    color: var(--ink-strong) !important;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    margin-right: 0 !important;
}

.navbar-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

/* Navbar menu underline effects - removed conflicting pseudo-elements */

/* Remove dropdown arrows from navbar */
.navbar .dropdown-toggle::after {
    display: none !important;
}

/* Company logo styling */
.navbar-brand img {
    height: 50px !important;
    width: auto !important;
    max-width: 200px !important;
    display: block !important;
    visibility: visible !important;
}

.company-logo {
    height: 50px !important;
    width: auto !important;
    max-width: 200px !important;
    display: block !important;
    visibility: visible !important;
}

/* Hamburger menu button styling for white navbar */
.navbar-toggler {
    border: none !important;
    padding: 0.25rem 0.5rem !important;
    flex-shrink: 0;
}

.navbar-toggler:focus {
    box-shadow: none !important;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.navbar-favicon {
    height: 40px !important;
    width: 40px !important;
    flex-shrink: 0;
    display: block !important;
}

/* Mobile navigation styles - fix transparent dropdowns */
@media (max-width: 991.98px) {
    .navbar > .container {
        justify-content: flex-start !important;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    .navbar-header {
        flex: 1 1 100%;
    }

    .navbar-brand,
    .navbar-dark .navbar-brand {
        flex: 1 1 auto;
        overflow: hidden;
        max-width: calc(100% - 64px);
    }

    .company-logo {
        max-width: 150px !important;
    }

    /* Main mobile navigation background */
    .navbar-collapse {
        flex-basis: 100%;
        background-color: var(--surface-strong) !important;
        border: 1px solid var(--border-soft) !important;
        border-radius: 0.375rem !important;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
        margin-top: 0.5rem !important;
        padding: 1rem !important;
    }
    
    /* Mobile navigation links */
    .navbar-collapse .nav-link {
        color: #000000 !important;
        padding: 0.5rem 0 !important;
        border-bottom: 1px solid #f8f9fa !important;
    }
    
    .navbar-collapse .nav-link:hover {
        color: #333333 !important;
        background-color: #f8f9fa !important;
    }
    
    /* Mobile dropdown menus: flat, no nested card. The outer .navbar-collapse
       panel above is already the card (bg/border/shadow) -- repeating that
       treatment here read as a card nested inside a card. Mirrors the
       desktop mega-menu, which flattens the same way (see the
       `background: transparent !important` rule under
       `.navbar-nav .nav-hover-dropdown > .dropdown-menu` at >=992px).
       The flattening lives on the 3-class rule below, not here -- see why. */
    .navbar-collapse .dropdown-menu {
        margin-top: 0.25rem !important;
        position: static !important;
        float: none !important;
        width: 100% !important;
    }

    /* Breathing room between the flattened groups now stands in for the
       boundary the removed card border used to provide. */
    .navbar-collapse .nav-hover-dropdown:not(:first-child) {
        margin-top: 0.5rem !important;
    }

    /* Fixed Income / K-REITs: no hover on touch, so render the submenu
       permanently open under the label instead of requiring a tap-to-expand
       affordance that no longer exists (label tap now navigates).
       `position: static` is repeated here (not just at line 314) because
       this 3-class selector must outrank the unconditional, equal-specificity
       `.navbar-nav .dropdown-menu { position: absolute !important }` below —
       the 2-class mobile rule above loses that tie on source order alone.
       Flattening (background/border/shadow) needs the same 3-class outrank
       for the same reason: `.navbar-nav .dropdown-menu` sets background and
       border with !important too, and it comes later in source order. */
    .navbar-collapse .nav-hover-dropdown .dropdown-menu {
        display: block !important;
        position: static !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .navbar-collapse .dropdown-item {
        color: #000000 !important;
        padding: 0.5rem 1rem !important;
        background-color: transparent !important;
    }
    
    .navbar-collapse .dropdown-item:hover {
        background-color: #f8f9fa !important;
        color: #333333 !important;
    }
    
    /* Ensure dropdown arrows are visible */
    .navbar-collapse .dropdown-toggle::after {
        display: inline-block !important;
        margin-left: 0.255em !important;
        vertical-align: 0.255em !important;
        content: "" !important;
        border-top: 0.3em solid #000000 !important;
        border-right: 0.3em solid transparent !important;
        border-bottom: 0 !important;
        border-left: 0.3em solid transparent !important;
    }
}

/* Simulation Parameters background */
.simulation-params {
    /* clip the opaque white card-body to the rounded card shell so the
       24px corners + green border read correctly */
    overflow: hidden;
}

.simulation-params .card-body {
    background-color: white !important;
}

/* REIT detail: keep pro forma costs progressive instead of widening tables. */

.pro-forma-summary-table th,
.pro-forma-summary-table td {
    vertical-align: middle;
}

.pro-forma-asset-cell {
    white-space: nowrap;
}

.pro-forma-row-toggle {
    width: 18px;
    min-width: 18px;
    border: 0;
    background: transparent;
    color: var(--ink-strong);
    margin-right: 8px;
    padding: 0;
    position: relative;
    text-align: center;
    vertical-align: middle;
}

.pro-forma-row-toggle::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-color: currentColor;
    border-style: solid;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(-45deg);
    transform-origin: 50% 50%;
    transition: transform 120ms ease;
    vertical-align: 2px;
}

.pro-forma-row-toggle:hover,
.pro-forma-row-toggle:focus {
    color: var(--brand-deep);
    outline: none;
}

.pro-forma-row-toggle[aria-expanded="true"] {
    color: var(--brand-deep);
}

.dividend-panel-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink-strong);
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-soft);
}

/* .dividend-streak-strip reuses .financial-summary-grid / .financial-summary-card
   (reit-common.css) for its shell; .dividend-streak-value stays as a class hook
   for dividend_panel.js's data-state toggle (unavailable → muted, smaller). */
[data-dividend-streak-strip] {
    /* Bare child of the dividend panel (no grid-gap parent like the 재무정보
       tab's .financial-panel), so it carries its own gap to the chart below. */
    margin-bottom: 16px;
}

.dividend-streak-value[data-state="unavailable"] {
    color: var(--market-flat);
    font-size: 18px;
}

.dividend-streak-note {
    margin: 0 0 16px;
    color: var(--ink-muted);
    font-size: 12px;
}

.dividend-panel-empty {
    color: var(--ink-muted);
    margin-bottom: 0;
}

.pro-forma-row-toggle[aria-expanded="true"]::before {
    transform: rotate(45deg);
}

.pro-forma-detail-row td {
    background: #f8faf8 !important;
    border-top: 0;
    padding: 10px 12px !important;
}

.pro-forma-statement-table {
    width: 100%;
    max-width: 620px;
    margin: 0;
    border-collapse: collapse;
}

.pro-forma-statement-table td {
    border: 0;
    padding: 4px 0;
    font-size: 13px;
    line-height: 1.35;
}

.pro-forma-statement-table td:first-child {
    color: var(--ink-strong);
    padding-right: 24px;
}

.pro-forma-statement-table td:last-child {
    color: var(--ink-strong);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pro-forma-statement-child td:first-child {
    padding-left: 16px;
}

.pro-forma-statement-group td {
    padding-top: 8px;
}

.pro-forma-statement-emphasis td {
    border-top: 1px solid var(--border-soft);
    font-weight: 700;
    padding-top: 7px;
}

.pro-forma-statement-table .pro-forma-negative-value {
    color: #d11f1f;
}

/* Footer background color - override Bootstrap bg-dark */
footer.bg-dark {
    background-color: #0D4040 !important;
}

footer {
    background-color: #0D4040 !important;
}

/* Footer text colors - make white for visibility */
footer,
footer.bg-dark {
    color: #ffffff !important;
}

footer h5,
footer p,
footer .text-light {
    color: #ffffff !important;
}

/* Navigation enhancements */
.navbar-brand {
    font-weight: 700;
    font-size: 1.5rem;
}

/* Removed conflicting navbar-nav styles - using unified approach below */

.dropdown-menu {
    border: none;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    border-radius: 0.5rem;
    /* clip item hover/focus backgrounds to the rounded corners — the
       top/bottom item's square-cornered hover fill would otherwise
       overlap the menu's rounded edge */
    overflow: hidden;
    z-index: 9999 !important;
    position: absolute !important;
    display: none;
    margin-top: 0 !important;
    top: 100% !important;
    left: auto !important;
    right: 0 !important;
    background-color: #ffffff !important;
    min-width: 200px !important;
}

.dropdown-menu.show {
    display: block !important;
}

/* Ensure dropdown positioning works with fixed navbar */
.navbar-nav .dropdown {
    position: relative !important;
}

.navbar-nav .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: auto !important;
    right: 0 !important;
    margin-top: 0 !important;
    background-color: #ffffff !important;
    border: 1px solid #e9ecef !important;
    z-index: 9999 !important;
}

/* Force dropdown to be visible when shown */
.dropdown-menu.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
}

.dropdown-item {
    padding: 0.75rem 1.5rem;
    transition: all 0.2s ease;
}

.dropdown-item:hover {
    background-color: #e9ecef;
}

.dropdown-item i {
    width: 20px;
    text-align: center;
}

/* Sub-group label inside a mega-menu column (e.g. "K리츠" / "미국리츠" under
   the 리츠 trigger) -- non-interactive, Bootstrap's .dropdown-header
   equivalent. No prior usage of .dropdown-header exists in this codebase,
   so this is a new, dedicated class. */
.dropdown-mega-group-header {
    display: block;
    padding: 8px 14px 4px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.dropdown-mega-group-header:not(:first-child) {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--border-soft);
}

/* Fixed Income / K-REITs MEGA MENU (KB-style): hovering the bar drops a
   full-width tinted band and reveals every submenu at once as a column under
   its parent label. CSS-only (no Bootstrap JS on these items). Mobile
   (<992px) keeps the existing stacked-open behavior defined below. */
.nav-mega-backdrop { display: none; }

@media (min-width: 992px) {
    /* full-width band that unfolds from the navbar's bottom edge */
    .nav-mega-backdrop {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: 250px;               /* tallest column is now 채권 (col 0, 3 plain items): 리츠 (col 1) dropped to 2 items when 한국리츠/미국리츠 were removed 2026-09-03 (base.html). NOT re-measured live in this pass -- no render/eval tool was available in this session -- so 250px is kept unchanged as the safe default rather than a re-confirmed tight fit; the prior "240.6px" measured a since-removed 4-item+2-group-header REITs column and no longer applies. Re-measure via getBoundingClientRect on the open .dropdown-menu at a >=992px viewport (same technique as before) and shrink both this and the column height below together, in step, if it proves excessive. */
        background: var(--brand-soft);
        border-bottom: 1px solid var(--border-soft);
        box-shadow: var(--shadow-soft);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity 0.24s ease, transform 0.24s ease, visibility 0s linear 0.24s;
        pointer-events: none;
        z-index: 1;
    }

    /* Anchor the columns to the page container (not their own narrow labels)
       so they lay out side by side without overlapping. Korean top labels are
       short and sit close together, so a per-label anchor collides; a
       container-relative anchor is locale/viewport independent. */
    .navbar .container { position: relative; }
    .navbar-nav .nav-hover-dropdown { position: static !important; }

    .navbar-nav .nav-hover-dropdown > .dropdown-menu {
        display: flex !important;
        flex-direction: column;
        justify-content: flex-start;       /* every column's first item starts at the same top offset, regardless of item count (was `center`, which let a shorter column's empty space accumulate above its first item and misalign it against taller columns) */
        position: absolute !important;
        top: 100% !important;              /* = container bottom */
        right: auto !important;
        margin-top: 11px !important;       /* container bottom (71px) -> navbar base (82px) */
        width: 200px !important;
        height: 250px;                     /* must equal .nav-mega-backdrop's height above */
        padding: 6px 6px 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        overflow: visible !important;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity 0.24s ease, transform 0.24s ease, visibility 0s linear 0.24s;
        pointer-events: none;
    }

    /* side-by-side column positions, relative to the container's left edge:
       167px = where the nav row begins (just past the logo, now that "홈"
       has been removed — see base.html); +224px (200 width + 24 gap) drops
       column 2 beside it. */
    .navbar-nav .nav-hover-dropdown[data-mega-col="0"] > .dropdown-menu { left: 167px !important; }
    .navbar-nav .nav-hover-dropdown[data-mega-col="1"] > .dropdown-menu { left: 391px !important; }
    .navbar-nav .nav-hover-dropdown[data-mega-col="2"] > .dropdown-menu { left: 615px !important; }

    /* Center each trigger label over its column rather than left-aligning it:
       give the trigger the SAME width as its column (200px) and the same
       224px (200 + 24 gap) rhythm, then center-align the label text inside.
       Since the trigger box now spans the identical 167-367 / 391-591 ranges
       as the columns, this stays correct across locales — an English label
       ("Fixed Income") is wider than the Korean one but still centers inside
       the same fixed box, unlike a margin tuned to one label's pixel width.
       Requires "홈" gone: a 3rd, unsized item before this pair would break the
       167-start assumption the moment its own label width changed. */
    .navbar-nav .nav-hover-dropdown[data-mega-col] {
        flex: 0 0 200px;
        text-align: center;
    }
    .navbar-nav .nav-hover-dropdown[data-mega-col="1"] { margin-left: 24px; }
    .navbar-nav .nav-hover-dropdown[data-mega-col="2"] { margin-left: 24px; }

    /* open the whole mega panel while the bar (incl. band/columns) is engaged */
    .navbar:hover .nav-mega-backdrop,
    .navbar:focus-within .nav-mega-backdrop,
    .navbar:hover .nav-hover-dropdown > .dropdown-menu,
    .navbar:focus-within .nav-hover-dropdown > .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: opacity 0.24s ease, transform 0.24s ease, visibility 0s;
        pointer-events: auto;
    }

    /* column links: pill hover on the tinted band, centered under the
       (now centered) trigger label above. justify-content only bites on the
       one item that's a flex row (Mapping's icon+label, d-flex in base.html);
       text-align covers the rest. */
    .navbar-nav .nav-hover-dropdown > .dropdown-menu .dropdown-item {
        padding: 9px 14px;
        border-radius: 8px;
        color: var(--ink-strong);
        white-space: nowrap;
        text-align: center;
        justify-content: center;
        transition: background 0.15s ease, color 0.15s ease;
    }

    .navbar-nav .nav-hover-dropdown > .dropdown-menu .dropdown-mega-group-header {
        text-align: center;
    }

    .navbar-nav .nav-hover-dropdown > .dropdown-menu .dropdown-item:hover {
        background: var(--surface-strong);
        color: var(--brand-deep);
    }
}

@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
    .nav-mega-backdrop,
    .navbar-nav .nav-hover-dropdown > .dropdown-menu {
        transition: none;
        transform: none;
    }
}

/* Hero section */
.jumbotron {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    border: none;
}

.display-4 {
    font-weight: 700;
}

.hero-section {
    padding: 2rem 0 0.75rem;
}

/* Home hero now ends at the CTA (market-snapshot stats + tool strip removed) —
   give it generous bottom whitespace so the page breathes instead of stopping
   abruptly below "비교 시작". Scoped to the home hero only. */
.home-hero {
    padding-bottom: 4rem;
}

/* Footer contact email — inherits the light footer text, brightens to the
   dark-surface accent on hover (legible on the dark footer band). */
.footer-contact-link {
    color: inherit;
    text-decoration: none;
    opacity: 0.9;
    transition: color 0.15s ease, opacity 0.15s ease;
}

.footer-contact-link:hover,
.footer-contact-link:focus-visible {
    color: var(--brand-bright);
    opacity: 1;
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
    gap: 2.5rem;
    align-items: start;
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
    padding: 0;
}

.hero-copy {
    padding: 1rem 0;
    color: var(--ink-strong);
}

.hero-eyebrow {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--brand);
    padding-left: 32px;
    padding-right: 32px;
}

.hero-title {
    font-size: 2.75rem;
    line-height: 1.25;
    letter-spacing: 0;
    font-weight: 700;
    max-width: 12em;
    margin-bottom: 1.25rem;
    padding-left: 32px;
    padding-right: 32px;
}

.hero-subtitle {
    max-width: 42rem;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--ink-muted);
    margin-bottom: 0;
}

.hero-panel {
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    background: transparent;
    border-left: 0;
}

.hero-panel-header {
    margin-bottom: 0.75rem;
}

.hero-panel-kicker {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--brand);
    font-weight: 700;
}

.hero-shortcuts {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    justify-content: center;
}

.hero-shortcut {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem;
    background: var(--card-surface);
    color: var(--ink-strong);
    border: 1px solid var(--border-soft);
    border-radius: 24px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.hero-shortcut:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(18, 32, 25, 0.07);
    border-color: #b9cbc2;
}

.hero-shortcut-icon {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--brand-soft);
    color: var(--brand);
}

.hero-shortcut-content {
    flex: 1;
    min-width: 0;
}

.hero-shortcut-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink-muted);
    letter-spacing: 0;
}

.hero-shortcut-value {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink-strong);
}

.hero-shortcut-description {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--ink-muted);
}

.hero-shortcut-arrow {
    color: var(--ink-muted);
    font-size: 0.82rem;
    line-height: 2.25rem;
    margin-left: 0.25rem;
}

/* Cards */
.card {
    border: 2px solid var(--brand);
    border-radius: 24px;
    /* Keep Bootstrap's inner corners (card-header/footer/img) in sync with the 24px shell */
    --bs-card-border-radius: 24px;
    --bs-card-inner-border-radius: 24px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.card-body {
    padding: 2rem;
}

.card-title {
    font-weight: 600;
    margin-bottom: 1rem;
}

/* Icons */
.fa-3x {
    transition: transform 0.3s ease;
}

.card:hover .fa-3x {
    transform: scale(1.1);
}

/* Buttons */
.btn {
    border-radius: 0.5rem;
    font-weight: 500;
    padding: 0.5rem 1.5rem;
    transition: all 0.3s ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
}

/* List group */
.list-group-item {
    border: none;
    border-radius: 0.5rem !important;
    margin-bottom: 0.5rem;
}

/* Sorting buttons */
.sort-btn {
    padding: 0.25rem 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.2s ease;
    min-width: 32px;
}

.sort-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.8);
    color: white;
    transform: scale(1.05);
}

.sort-btn[data-sort="asc"] {
    background: rgba(40, 167, 69, 0.2);
    border-color: #28a745;
    color: #28a745;
}

.sort-btn[data-sort="desc"] {
    background: rgba(220, 53, 69, 0.2);
    border-color: #dc3545;
    color: #dc3545;
}

.sort-btn i {
    font-size: 0.875rem;
}

/* Table header styling for sorting */
.table-dark th {
    position: relative;
    vertical-align: middle;
}

.table-dark th .sort-btn {
    margin-left: 0.5rem;
    opacity: 0.7;
}

.table-dark th:hover .sort-btn {
    opacity: 1;
}

.list-group-item:hover {
    background-color: #f8f9fa;
    transform: translateX(5px);
}

.list-group-item i {
    width: 20px;
    text-align: center;
}

/* Badges */
.badge {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
}

/* Footer */
/* Sticky footer: `main` grows to fill any leftover vertical space so
   `footer` lands at the true bottom of the viewport on short pages (e.g.
   the monthly report archive with a single issue) instead of floating
   mid-page. Requires `body` to be a flex column (see `body` rule above) —
   `margin-top: auto` below does nothing outside a flex container. Page-
   specific viewport-locked shells (bond screener, bond ETF list, bond
   yield calculator, K-REIT screener — see their own
   `main.container:has(...)` rules) set an explicit `height` on `main`;
   `flex-basis: auto` adopts that height, so this coexists without change. */
main {
    flex: 1 0 auto;
}

footer {
    margin-top: auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .jumbotron {
        padding: 2rem !important;
    }
    
    .display-4 {
        font-size: 2rem;
    }
    
    .card-body {
        padding: 1.5rem;
    }
}

@media (max-width: 991.98px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .hero-copy {
        padding: 0;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-panel {
        padding: 0;
    }
}

@media (max-width: 575.98px) {
    .hero-section {
        padding-top: 1rem;
    }

    .hero-copy {
        padding: 0;
    }

    .hero-title {
        font-size: 2.05rem;
    }

    .hero-panel {
        padding: 0;
    }

    .hero-shortcuts {
        padding: 0;
    }

    .hero-shortcut {
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.9rem;
    }

    .hero-shortcut-icon {
        width: 2rem;
        height: 2rem;
    }

    .hero-shortcut-arrow {
        line-height: 2rem;
    }
}

/* Custom scrollbar — square corners site-wide, see DESIGN.md Shapes → Corner radius */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 0;
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* Animation classes */
.fade-in {
    animation: fadeIn 0.8s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Market data styling */
.market-data {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border-radius: 0.5rem;
    padding: 1rem;
    margin: 1rem 0;
}

.market-data h6 {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

/* Quick actions styling */
.quick-actions .list-group-item {
    border-left: 4px solid transparent;
    transition: all 0.3s ease;
}

.quick-actions .list-group-item:hover {
    border-left-color: #007bff;
    background-color: #f8f9fa;
}

/* NAVBAR LINKS — KB-style left-to-right wipe underline (brand green) */
.navbar .nav-link,
.navbar-nav .nav-link {
    color: var(--ink-strong) !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    padding-bottom: 8px !important;
    font-weight: 500;
}

.navbar .nav-link:hover,
.navbar-nav .nav-link:hover {
    color: var(--brand-deep) !important;
    text-decoration: none !important;
}

/* The underline hugs the label text (wrapped in .nav-link-label) and wipes
   in from the left on hover; the active page keeps it fully drawn. */
.nav-link-label {
    position: relative;
    display: inline-block;
}

.nav-link-label::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 2px;
    background-color: var(--brand);
    transition: width 0.25s ease;
}

.navbar .nav-link:hover .nav-link-label::after,
.navbar .nav-link:focus-visible .nav-link-label::after,
.navbar .nav-link.active .nav-link-label::after {
    width: 100%;
}

@media (prefers-reduced-motion: reduce) {
    .nav-link-label::after {
        transition: none;
    }
}



/* Custom button color for bond search */
.btn-primary {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
}

.btn-primary:hover {
    background-color: var(--accent-deep) !important;
    border-color: var(--accent-deep) !important;
}

.btn-primary:focus {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 130, 84, 0.25) !important;
}

/* More specific rules to override Bootstrap */
#bondSearchBtn.btn-primary,
button.btn-primary,
.btn.btn-primary {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: white !important;
}

#bondSearchBtn.btn-primary:hover,
button.btn-primary:hover,
.btn.btn-primary:hover {
    background-color: var(--accent-deep) !important;
    border-color: var(--accent-deep) !important;
    color: white !important;
}

#bondSearchBtn.btn-primary:focus,
button.btn-primary:focus,
.btn.btn-primary:focus {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: white !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 130, 84, 0.25) !important;
}

/* Buttons: retint Bootstrap's variant palette to the brand via its own --bs-btn-* vars.
   focus-shadow-rgb values mirror the token hex (brand #008254 / ink-muted #5c656f /
   market-up #c41e14) — Bootstrap needs an "R, G, B" triplet a var() can't supply. */
.btn-outline-primary,
.btn-outline-success,
.btn-outline-info {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-active-bg: var(--brand-deep);
    --bs-btn-active-border-color: var(--brand-deep);
    --bs-btn-focus-shadow-rgb: 0, 130, 84;
}

.btn-outline-secondary {
    --bs-btn-color: var(--ink-muted);
    --bs-btn-border-color: var(--border-soft);
    --bs-btn-hover-bg: var(--surface-muted);
    --bs-btn-hover-color: var(--ink-strong);
    --bs-btn-hover-border-color: var(--ink-muted);
    --bs-btn-active-bg: var(--surface-muted);
    --bs-btn-active-color: var(--ink-strong);
    --bs-btn-active-border-color: var(--ink-muted);
    --bs-btn-focus-shadow-rgb: 92, 101, 111;
}

.btn-secondary {
    --bs-btn-bg: var(--surface-muted);
    --bs-btn-border-color: var(--border-soft);
    --bs-btn-color: var(--ink-strong);
    --bs-btn-hover-bg: var(--border-soft);
    --bs-btn-hover-border-color: var(--ink-muted);
    --bs-btn-hover-color: var(--ink-strong);
    --bs-btn-active-bg: var(--border-soft);
    --bs-btn-active-border-color: var(--ink-muted);
    --bs-btn-active-color: var(--ink-strong);
    --bs-btn-focus-shadow-rgb: 92, 101, 111;
}

.btn-outline-danger {
    --bs-btn-color: var(--market-up);
    --bs-btn-border-color: var(--market-up);
    --bs-btn-hover-bg: var(--market-up);
    --bs-btn-hover-border-color: var(--market-up);
    --bs-btn-active-bg: var(--market-up);
    --bs-btn-active-border-color: var(--market-up);
    --bs-btn-focus-shadow-rgb: 196, 30, 20;
}

/* Inputs: intentional resting style in place of Bootstrap's default control */
.form-control,
.form-select,
textarea.form-control {
    min-height: 2.75rem;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background-color: var(--surface-strong);
    color: var(--ink-strong);
    font-size: 1rem;
}

.form-control::placeholder {
    color: var(--text-tertiary);
}

.form-control:hover,
.form-select:hover {
    border-color: var(--ink-muted);
}

.input-group-text {
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background-color: var(--surface-muted);
    color: var(--ink-muted);
    font-weight: 600;
}

/* Inputs: replace Bootstrap's blue focus glow with a crisp 1px brand-green ring */
.form-control:focus,
.form-select:focus,
textarea.form-control:focus,
.form-check-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

/* Credit simulator: hold fields at a readable width instead of stretching the column */
#creditSimulatorForm .form-control,
#creditSimulatorForm .form-select,
#creditSimulatorForm .input-group {
    max-width: 20rem;
}

#bondSearchForm .input-group {
    max-width: 32rem;
}

/* Force cache refresh and ensure no default underlines */
.navbar a {
    text-decoration: none !important;
}

.nav-inline-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--icon-color);
}

.nav-inline-icon svg {
    display: block;
}

.nav-lang-toggle.show .nav-lang-chevron svg,
.nav-lang-toggle[aria-expanded="true"] .nav-lang-chevron svg {
    transform: rotate(180deg);
}

.nav-lang-chevron svg {
    transition: transform 0.15s ease;
}

.listing-toolbar-inline-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.listing-toolbar-inline-icon svg {
    display: block;
}

.listing-filter-toggle[aria-expanded="true"] .chevron-icon svg {
    transform: rotate(180deg);
}

.chevron-icon svg {
    transition: transform 0.15s ease;
}

.fintech-home-hero .hero-title {
    font-weight: 700;
    letter-spacing: -0.02em;
}

.market-preview-title,
.listing-title {
    font-weight: 700;
    letter-spacing: -0.02em;
}

.fintech-home-hero {
    padding-top: 2.4rem;
}

.fintech-hero-grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
    align-items: start;
}

.hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.8rem;
}

.hero-cta-row-mobile {
    display: none;
}

/* Hero CTA as a text link with a trailing arrow (not a filled button):
   dark by default, brand green on hover, arrow nudges right. */
.hero-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ink-strong);
    text-decoration: none;
    transition: color 0.15s ease;
}

.hero-cta-link:hover,
.hero-cta-link:focus-visible {
    color: var(--brand);
}

.hero-cta-arrow {
    transition: transform 0.15s ease;
}

.hero-cta-link:hover .hero-cta-arrow,
.hero-cta-link:focus-visible .hero-cta-arrow {
    transform: translateX(3px);
}

.hero-trust-row {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1.5rem;
    padding: 1.75rem 2rem;
    background: var(--surface);
    border-radius: 24px;
}

.hero-trust-value,
.hero-trust-label {
    display: block;
}

.hero-trust-value {
    color: var(--hero-stat-accent);
    font-size: 5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}

.hero-trust-label {
    margin-top: 0.5rem;
    color: var(--ink-muted);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.3;
}

/* Home page content sits in one shared inset wrapper, so every section below
   the full-bleed hero aligns to the same left edge while keeping a margin. */
.home-shell {
    padding-left: 32px;
    padding-right: 32px;
}

/* Landing hero: full-bleed dark navy band. Breaks out of the Bootstrap
   .container via the 100vw/-50vw trick, and cancels out <main>'s mt-5 pt-4
   (3rem + 1.5rem = 4.5rem) so the band sits flush under the nav instead of
   showing a light gap above it. */
.landing-hero {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: -4.5rem;
    min-height: calc(100vh + 4.5rem);
    background:
        radial-gradient(ellipse at 10% 60%, var(--hero-pastel-sky) 0%, transparent 55%),
        radial-gradient(ellipse at 88% 15%, var(--hero-pastel-lavender) 0%, transparent 48%),
        radial-gradient(ellipse at 62% 92%, var(--hero-pastel-rose) 0%, transparent 44%),
        var(--hero-pastel-cream);
}

.landing-hero-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 128px 48px 140px;
}

.landing-hero-title {
    color: var(--ink-strong);
    font-size: 3.6rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin-bottom: 22px;
    max-width: 18em;
    word-break: keep-all;
}

.landing-hero-sub {
    color: var(--ink-muted);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 29em;
    word-break: keep-all;
    text-wrap: balance;
}

.landing-cta-row {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}

.landing-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--ink-strong);
    color: var(--surface-strong);
    font-weight: 700;
    font-size: 1.02rem;
    border-radius: 999px;
    padding: 15px 30px;
    text-decoration: none;
}

.landing-cta-primary svg {
    width: 16px;
    height: 16px;
}

.landing-cta-ghost {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--hero-ghost-border);
    color: var(--ink-strong);
    font-weight: 600;
    font-size: 1.02rem;
    border-radius: 999px;
    padding: 15px 30px;
    text-decoration: none;
}

/* Stat strip: three real, DB-backed counts (see _build_hero_stats). Shares
   the hero's 1280px inner max-width so sections stay aligned even though
   main.container is wider (1680px) — see DESIGN.md "Alignment". */
.landing-stats {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    padding: 84px 0 30px;
}

.landing-stat-value {
    display: block;
    color: var(--hero-stat-accent);
    font-size: 4.4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.landing-stat-label {
    display: block;
    margin-top: 10px;
    color: var(--ink-muted);
    font-size: 1rem;
    font-weight: 500;
}

/* Tool directory: jump-off points into the site's core tools. Same 1280px
   inner max-width as the hero/stats — see DESIGN.md "Alignment". */
.landing-tools {
    max-width: 1280px;
    margin: 0 auto;
    padding: 60px 0 96px;
}

.landing-tools-head h2 {
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.landing-tools-head p {
    color: var(--ink-muted);
    margin-top: 6px;
    font-size: 0.98rem;
}

.landing-tool-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 28px;
}

.landing-tool-card {
    background: var(--surface-strong);
    border: 2px solid var(--brand);
    border-radius: 24px;
    padding: 28px 26px 24px;
    display: flex;
    flex-direction: column;
    min-height: 210px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease;
}

.landing-tool-card:hover {
    transform: translateY(-5px);
}

.landing-tool-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--brand-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.landing-tool-icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--brand-deep);
}

.landing-tool-card h3 {
    font-size: 1.12rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--ink-strong);
}

.landing-tool-card p {
    font-size: 0.9rem;
    color: var(--ink-muted);
    line-height: 1.55;
    flex: 1;
}

.landing-tool-link {
    margin-top: 16px;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--brand);
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

@media (max-width: 900px) {
    /* Give the hero more breathing room from the left edge and the taller (82px)
       mobile navbar, and align its text with the content below (home-shell also
       insets to 28px on mobile — see below). Keep the horizontal inset <=~30px so
       the two-line Korean hero title doesn't wrap to a third line. */
    .landing-hero-inner {
        padding: 92px 28px 72px;
    }

    /* Match the hero's 28px left edge: 12px .container gutter + 16px here. */
    .home-shell {
        padding-left: 16px;
        padding-right: 16px;
    }

    .landing-hero-title {
        /* 2.15rem (not 2.3) so the two-line Korean title still fits beside the
           wider 28px inset on 360px-class phones without wrapping to 3 lines. */
        font-size: 2.15rem;
    }

    .landing-stats {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 56px 0 8px;
    }

    .landing-stat-value {
        font-size: 3.2rem;
    }

    .landing-tools {
        padding: 48px 0 64px;
    }

    .landing-tool-grid {
        grid-template-columns: 1fr;
    }

    .landing-tool-card {
        min-height: 0;
    }
}

.market-preview-kicker {
    color: var(--brand);
    font-size: 0.82rem;
    font-weight: 700;
}

.market-preview-title {
    color: var(--ink-strong);
    font-size: 1.15rem;
    font-weight: 700;
}

/* Listing */
main.container {
    max-width: 1680px;
}

.listing-page {
    max-width: 1680px;
}

.listing-page .card:hover {
    transform: none;
    box-shadow: 0 8px 22px rgba(13, 64, 64, 0.05) !important;
}

.listing-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.listing-eyebrow {
    color: var(--brand);
    font-size: 0.85rem;
    font-weight: 700;
}

.listing-title {
    color: var(--ink-strong);
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: 0;
}

.listing-subtitle {
    color: var(--ink-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

.listing-command-surface {
    display: grid;
    grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.2fr) auto;
    gap: 0.9rem;
    align-items: center;
    margin-bottom: 0.9rem;
}

.listing-search-wrap {
    position: relative;
}

.listing-search-icon {
    position: absolute;
    top: 50%;
    left: 0.95rem;
    z-index: 2;
    color: var(--icon-color-muted);
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.listing-search-icon svg {
    width: 1.1rem;
    height: 1.1rem;
}

.listing-search-wrap .form-control {
    min-height: 2.75rem;
    padding-left: 2.65rem;
    border-color: var(--border-soft);
    border-radius: 8px;
    background: #ffffff;
}

.listing-search-wrap .form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 0.2rem rgba(0, 130, 84, 0.14);
}

.listing-quick-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
}

.listing-chip {
    min-height: 2.35rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: #ffffff;
    color: var(--ink-muted);
    font-size: 0.86rem;
    font-weight: 700;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.listing-chip.active,
.listing-chip:hover {
    border-color: #b9d6c8;
    background: var(--accent-soft);
    color: var(--accent-deep);
}

.listing-table-card,
.listing-filter-card {
    border: 1px solid var(--border-soft);
    border-radius: 24px;
    box-shadow: 0 8px 22px rgba(13, 64, 64, 0.05) !important;
    overflow: visible;
}

.listing-toolbar-header {
    position: sticky;
    top: 82px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.85rem;
    background: var(--surface-strong);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    transition: box-shadow 0.15s ease, border-radius 0.15s ease;
}

.listing-toolbar-header.filter-open {
    border-bottom: 1px solid var(--border-soft);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.listing-toolbar-header.is-stuck {
    box-shadow: 0 6px 16px rgba(13, 64, 64, 0.06);
}

.listing-toolbar-start {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    flex: 1 1 auto;
}

.listing-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 0 0 auto;
}

.listing-toolbar-divider {
    width: 1px;
    align-self: stretch;
    margin: 0.25rem 0;
    background: var(--border-soft);
    flex: 0 0 auto;
}

.listing-applied-wrap {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    flex: 1 1 auto;
}

.listing-applied-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-width: 0;
}

.listing-applied-filters:empty {
    display: none;
}

.listing-clear-all {
    flex: 0 0 auto;
    padding: 0.2rem 0.4rem;
    border: none;
    background: transparent;
    color: var(--ink-muted);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.listing-clear-all:hover,
.listing-clear-all:focus-visible {
    color: var(--brand-deep);
    outline: none;
}

.listing-clear-all[hidden] {
    display: none;
}

.listing-result-count {
    color: var(--ink-muted);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.listing-result-count[hidden] {
    display: none;
}

.listing-filter-toggle,
.listing-column-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--border-soft);
    border-radius: 7px;
    background: var(--surface-strong);
    color: var(--ink-strong);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.listing-filter-toggle:hover,
.listing-column-toggle-btn:hover {
    background: var(--surface);
    border-color: var(--ink-muted);
    color: var(--ink-strong);
}

.listing-filter-toggle:focus-visible,
.listing-column-toggle-btn:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}

.listing-filter-toggle[aria-expanded="true"],
.listing-filter-toggle.has-active-filters,
.listing-column-toggle-btn[aria-expanded="true"] {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand-deep);
}

.listing-filter-toggle[aria-expanded="true"] .chevron-icon svg {
    transform: rotate(180deg);
}

.listing-column-toggle-btn.dropdown-toggle::after {
    display: none;
}

.listing-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--brand);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
}

.listing-filter-count[hidden] {
    display: none;
}

.listing-column-menu-heading {
    padding: 0.5rem 0.6rem 0.25rem;
    color: var(--ink-muted);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    pointer-events: none;
}

.listing-column-menu-heading:first-child {
    padding-top: 0.35rem;
}

.listing-filter-body {
    padding: 1rem;
    border-top: 1px solid var(--border-soft);
    background: var(--surface-muted);
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
}

.listing-filter-control {
    height: 100%;
    padding: 0.85rem;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: #ffffff;
}

.listing-filter-control .form-label {
    margin-bottom: 0.5rem;
    color: var(--ink-muted);
    font-size: 0.86rem;
    font-weight: 600;
}

.listing-period-input {
    width: 10rem;
}

.listing-range-input {
    width: 5.75rem;
}

.listing-filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.listing-column-menu {
    min-width: 14rem;
    padding: 0.35rem;
}

.listing-column-toggle {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    border-radius: 6px;
    color: var(--ink-strong);
    cursor: pointer;
}

.listing-column-toggle:hover,
.listing-column-toggle:focus {
    background: var(--surface-muted);
    color: var(--brand-deep);
}

.listing-column-toggle.active,
.listing-column-toggle.active:hover,
.listing-column-toggle.active:focus {
    background: var(--brand-soft) !important;
    color: var(--brand-deep) !important;
}

/* Checkboxes are square — never rounded (matches the playbook's square
   category-toggle pattern). Radios keep their circular shape. */
.form-check-input[type="checkbox"] {
    border-radius: 0;
}

.listing-column-checkbox {
    accent-color: var(--brand);
    margin: 0;
    flex-shrink: 0;
}

.listing-column-checkbox:checked {
    background-color: var(--brand);
    border-color: var(--brand);
}

.listing-column-checkbox:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 0.2rem rgba(0, 130, 84, 0.16);
}

#tableContainer {
    position: relative;
    max-height: 72vh;
    overflow-x: auto;
    overflow-y: auto;
    border-radius: 24px;
}

#listingTable {
    min-width: 1120px;
}

.listing-table td {
    vertical-align: middle;
}

.listing-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

.listing-table thead th {
    background-color: var(--table-header-bg) !important;
    height: var(--table-header-height);
    vertical-align: middle;
    border-bottom: 1px solid var(--border-soft);
    box-shadow: 0 2px 2px -1px rgba(18, 24, 32, 0.08);
    color: var(--ink-muted);
    font-size: 0.84rem;
    font-weight: 700;
    white-space: nowrap;
}

.listing-table thead th.sortable {
    cursor: pointer;
    user-select: none;
    vertical-align: middle;
}

.listing-table thead th.sortable span:first-of-type {
    margin-right: 0.35rem;
}

.listing-table thead th.sorted-column {
    background-color: var(--brand-soft) !important;
    color: var(--accent-deep);
}

/* Sort arrows: one SVG, three states toggled via data-state + listing.js */
.listing-sort-icon {
    display: inline-flex;
    margin-left: 0.25rem;
    vertical-align: middle;
    color: var(--icon-color-muted);
}

.listing-sort-icon svg {
    display: block;
}

.listing-sort-icon[data-state="asc"],
.listing-sort-icon[data-state="desc"] {
    color: var(--icon-color-active);
}

.listing-sort-icon[data-state="neutral"] .listing-sort-asc,
.listing-sort-icon[data-state="neutral"] .listing-sort-desc {
    display: none;
}

.listing-sort-icon[data-state="asc"] .listing-sort-neutral,
.listing-sort-icon[data-state="asc"] .listing-sort-desc {
    display: none;
}

.listing-sort-icon[data-state="desc"] .listing-sort-neutral,
.listing-sort-icon[data-state="desc"] .listing-sort-asc {
    display: none;
}

.ticker-column {
    width: 100px;
    min-width: 100px;
}

.name-column {
    width: 280px;
    min-width: 280px;
}

#listingTable th:nth-child(1),
#listingTable td:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 3;
    background: #ffffff;
}

#listingTable th:nth-child(2),
#listingTable td:nth-child(2) {
    position: sticky;
    left: 100px;
    z-index: 3;
    background: #ffffff;
    box-shadow: 8px 0 12px -12px rgba(18, 24, 32, 0.45);
}

#listingTable thead th:nth-child(1),
#listingTable thead th:nth-child(2) {
    z-index: 12;
    background: var(--table-header-bg) !important;
}

#listingTable thead th:nth-child(1).sorted-column,
#listingTable thead th:nth-child(2).sorted-column {
    background: var(--brand-soft) !important;
}

/* Row hover: distinct from the header/thead fill (--table-header-bg), using
   --highlight-soft (the row-hover token used elsewhere, e.g. valuation.css's
   pro forma tables). --bs-table-hover-bg covers columns 3+ via Bootstrap's own
   inset-box-shadow hover mechanism; the two sticky columns need an explicit
   background rule instead because column 2 already carries its own box-shadow
   (the scroll-edge shadow above) at higher specificity than Bootstrap's own
   hover box-shadow rule, so Bootstrap's mechanism can never paint there. */
#listingTable {
    --bs-table-hover-bg: var(--highlight-soft);
}

#listingTable tbody tr:hover td:nth-child(1),
#listingTable tbody tr:hover td:nth-child(2) {
    background: var(--highlight-soft);
}

.listing-name-cell {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
}

.listing-name-cell a {
    overflow: hidden;
    color: var(--ink-strong);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reit-logo-wrap {
    display: inline-flex;
    width: 2.875rem;
    height: 2.875rem;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 0.9rem;
    background: #ffffff;
}

.reit-logo-wrap-standard {
    width: 2.875rem;
}

.reit-logo-wrap-wide {
    width: 2.875rem;
    border-radius: 0.9rem;
}

.reit-logo-wrap-dark {
    background: #111111;
    border-color: rgba(17, 17, 17, 0.16);
}

/* Per-logo backdrop colors, keyed off REIT_PRESENTATION's logo_class: sampled
   from each source file's own full-bleed fill so the wrap's background
   blends into it rather than showing white in the gaps object-fit:contain
   leaves (a circular badge's square-corner gaps, or a wide logo's top/bottom
   letterbox bars). These are external brand colors tied 1:1 to a specific
   logo asset, not reusable site tokens -- intentionally not in DESIGN.md's
   token set, same as .reit-logo-wrap-dark above. */
.reit-logo-wrap-federalrealty {
    background: #262626;
    border-color: rgba(38, 38, 38, 0.18);
}

.reit-logo-wrap-publicstorage {
    background: #ff6e21;
    border-color: rgba(255, 110, 33, 0.18);
}

.reit-logo-image {
    display: block;
    width: 100%;
    height: 100%;
}

.reit-logo-fit-contain {
    object-fit: contain;
    padding: 0.08rem;
    transform: scale(1.06);
}

/* Same as .reit-logo-fit-contain but without the 1.06 scale-up: for source
   files with little/no internal padding (tight-bleed wordmarks/icon marks),
   where the extra 6% pushes the image past the wrap's edge and
   overflow:hidden clips it. .reit-logo-fit-contain's scale stays as-is for
   logos it already suits (mostly squarer marks with baked-in padding) --
   this is an additive option, not a replacement. */
.reit-logo-fit-contain-flush {
    object-fit: contain;
    padding: 0.08rem;
}

.reit-logo-fit-cover {
    object-fit: cover;
    padding: 0;
}

.reit-logo-jrglobal {
    object-position: center 72%;
    transform: scale(1.12);
}

.metric-badge {
    display: inline-flex;
    min-height: 1.45rem;
    align-items: center;
    justify-content: center;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.metric-badge-muted {
    border: 1px solid var(--border-soft);
    background: var(--surface-muted);
    color: var(--ink-muted);
}

/* 자산 유형(섹터) 배지 — 범주형이므로 단일 중립 톤 하나로 통일하고
   유형 구분은 라벨 텍스트가 담당한다 (토큰 규칙 4: out-of-palette 색상 금지). */
.sector-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--ink-strong);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.sector-badge-unknown {
    color: var(--text-tertiary);
    font-weight: 500;
}

.market-status {
    font-weight: 700;
}

.market-up {
    color: var(--market-up) !important;
}

.market-down {
    color: var(--market-down) !important;
}

.market-flat {
    color: var(--market-flat) !important;
}

.yield-value {
    color: var(--brand-deep);
    font-weight: 700;
}

/* 추정(†) 값 표시 — 회사가 밝히지 않은 기를 Milleans 추정으로 채운 선행 배당수익률
   옆에 붙는 각주 기호. 색이 아니라 글자(†)로 알리고, 스크린리더는 role="img" +
   aria-label("Milleans 추정")로 읽는다. 오른쪽 정렬 숫자 열에서 소수점 정렬이 깨지지
   않도록 기호는 숫자 오른쪽 여백에 걸어 둔다(절대 위치). 기호 폭은 목록 표 셀의 오른쪽
   패딩(0.5rem) 안에 들어야 하므로 글자를 키우거나 간격을 주지 말 것 — 마지막 열이면
   표 밖으로 넘쳐 가로 스크롤이 생긴다. 목록 표
   (partials/reit_screener.html)와 상세 개요의 시장 지표(components/key_metrics_panel.html)가
   함께 쓴다. */
.est-value {
    position: relative;
    display: inline-block;
}

.est-mark {
    position: absolute;
    top: 0;
    left: 100%;
    color: var(--ink-strong);
    font-size: 0.75em;
    font-weight: 700;
    line-height: inherit;
    white-space: nowrap;
    cursor: default;
}

/* =========================================================================
   주요 지표 (Key metrics) — 개요 tab
   Grouped label/value columns (시세/밸류에이션/수익률/성장), CapIQ
   company-data style on the light palette. Plain tables, no card shell,
   matching the 회사 기본정보 treatment above it. Shared component: also the
   채권 수익률 계산기 결과 표 (templates/bond_yield_calculator.html), which
   doesn't load reit-common.css — so it lives here.
   ========================================================================= */
.key-metrics-head {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: var(--table-header-height);
    padding: 0 12px;
    background: var(--table-header-bg);
}

.key-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px 40px;
    margin-top: 12px;
}

.key-metrics-group-title {
    display: flex;
    align-items: flex-end;
    box-sizing: border-box;
    height: var(--table-header-height);
    margin: 0;
    padding: 0 12px 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ink-strong);
    border-bottom: 2px solid var(--ink-strong);
}

.key-metrics-table {
    width: 100%;
    border-collapse: collapse;
}

.key-metrics-table tr {
    border-top: 1px solid var(--border-soft);
}

.key-metrics-table tr:first-child {
    border-top: none;
}

.key-metrics-table th,
.key-metrics-table td {
    padding: 9px 12px;
    font-size: 13px;
    vertical-align: top;
}

.key-metrics-table th {
    text-align: left;
    font-weight: 500;
    color: var(--ink-muted);
    /* No nowrap: long labels (주당 배당금 성장률 3년 (CAGR)) wrap to two
       lines instead of overflowing the metric column. */
}

.key-metrics-table td {
    text-align: right;
    font-weight: 700;
    color: var(--ink-strong);
    font-variant-numeric: tabular-nums;
}

/* † 행(Milleans 추정으로 채운 값) 바로 아래 근거 줄 — 값 행에 붙은 각주이므로 위쪽
   hairline을 없애 값 행과 한 덩어리로 읽히게 하고, 다음 행과는 그 행의 hairline으로 나뉜다.
   세그먼트(추정 / 범위 / 회사 기준 / 분석일)는 구분점 자리에서만 줄바꿈된다.
   † 기호와 값 span은 style.css의 .est-value / .est-mark. */
.key-metrics-table tr.key-metrics-est-row {
    border-top: 0;
}

.key-metrics-table td.key-metrics-est-note {
    padding: 0 12px 10px;
    text-align: left;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--ink-muted);
}

.key-metrics-est-note strong {
    color: var(--ink-strong);
    font-weight: 700;
}

.key-metrics-est-note .est-seg {
    display: inline-block;
    max-width: 100%;
}

.filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.55rem;
    border: 1px solid #c9ddd3;
    border-radius: 999px;
    background-color: var(--accent-soft);
    color: var(--accent-deep);
    font-size: 0.82rem;
    transition: background-color 0.18s ease;
}

.filter-tag .remove-filter {
    display: inline-flex;
    width: 1rem;
    height: 1rem;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--accent-deep);
    cursor: pointer;
    font-size: 0.72rem;
}

.filter-tag .remove-filter:hover {
    background: rgba(0, 130, 84, 0.12);
}

.listing-mobile-results {
    display: none;
}

.listing-mobile-card {
    padding: 1rem;
    border: 1px solid var(--border-soft);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(13, 64, 64, 0.04);
}

.mobile-card-topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
}

.mobile-card-identity {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}

.mobile-card-identity h2 {
    overflow-wrap: anywhere;
    margin: 0;
    color: var(--ink-strong);
    font-size: 1rem;
    font-weight: 700;
}

.mobile-card-identity p {
    margin: 0.15rem 0 0;
    color: var(--ink-muted);
    font-size: 0.82rem;
}

.mobile-card-price {
    flex-shrink: 0;
    text-align: right;
}

.mobile-card-price strong,
.mobile-card-price span {
    display: block;
}

.mobile-card-price strong {
    color: var(--ink-strong);
    font-size: 0.95rem;
}

.mobile-card-price span {
    margin-top: 0.12rem;
    font-size: 0.82rem;
}

.mobile-card-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
    margin-top: 0.9rem;
}

.mobile-card-metrics div {
    padding: 0.65rem;
    border-radius: 8px;
    background: var(--surface-muted);
}

.mobile-card-metrics span,
.mobile-card-metrics strong {
    display: block;
}

.mobile-card-metrics span {
    color: var(--ink-muted);
    font-size: 0.74rem;
}

.mobile-card-metrics strong {
    margin-top: 0.15rem;
    color: var(--ink-strong);
    font-size: 0.9rem;
}

.mobile-card-link {
    display: inline-flex;
    margin-top: 0.85rem;
    color: var(--accent);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
}

@media (max-width: 991.98px) {
    .fintech-hero-grid,
    .listing-command-surface {
        grid-template-columns: 1fr;
    }

    .hero-cta-row-mobile {
        display: flex;
    }

    .listing-quick-filters {
        justify-content: flex-start;
    }

    .listing-header {
        align-items: stretch;
        flex-direction: column;
    }

    .listing-toolbar-header {
        position: static;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .listing-toolbar-divider {
        display: none;
    }

    .listing-toolbar-start,
    .listing-toolbar-actions {
        flex: 1 1 100%;
        justify-content: space-between;
    }

    .listing-applied-wrap {
        flex-wrap: wrap;
    }

    .listing-filter-actions {
        justify-content: stretch;
    }

    .listing-filter-actions .btn {
        flex: 1;
    }

    .reit-logo-wrap {
        width: 3rem;
        height: 3rem;
    }

    .reit-logo-wrap-wide {
        width: 3rem;
    }
}

@media (max-width: 767.98px) {
    .hero-trust-row {
        padding: 1.5rem;
        gap: 1.25rem;
    }

    /* K-REIT screener: keep the dense PC comparison table on mobile (horizontal
       scroll via #tableContainer) instead of swapping to the airy card view.
       Hiding the cards also lifts the filter toolbar + 컬럼 dropdown back above
       the table where they stay visible. .listing-mobile-results stays at its
       default display:none. */
}

@media (max-width: 575.98px) {
    .listing-title {
        font-size: 1.55rem;
    }

    .listing-filter-control,
    .listing-period-input {
        width: 100%;
    }

    .listing-range-input {
        width: calc((100% - 2rem) / 2);
        min-width: 0;
    }

    .listing-filter-control .d-flex {
        width: 100%;
    }

    .mobile-card-topline {
        flex-direction: column;
    }

    .mobile-card-price {
        width: 100%;
        text-align: left;
    }

    .mobile-card-metrics {
        grid-template-columns: 1fr;
    }
}

/* Financial Indicators table: sticky first column so 계정 labels stay
   visible while scrolling the many quarterly columns horizontally. */
#financialSection .table-responsive .table th:first-child,
#financialSection .table-responsive .table td:first-child,
#financialsSection .table-responsive .table th:first-child,
#financialsSection .table-responsive .table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    box-shadow: 4px 0 6px -4px rgba(18, 24, 32, 0.18);
}

#financialSection .table-responsive .table thead th:first-child,
#financialsSection .table-responsive .table thead th:first-child {
    z-index: 3;
    /* Opaque (sticky cell scrolls over data) and matched to the standard
       header fill instead of the old hardcoded #ffffff. */
    background-color: var(--table-header-bg);
}

/* Term-help: reusable hover/tap info icon for jargon terms (e.g. WALE) that we
   intentionally don't translate. Works via :hover for desktop and :focus-within
   so a tap-to-focus on mobile also reveals the tooltip, with no JS needed. */
.term-help {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    margin-left: 4px;
}

.term-help__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid var(--border-soft);
    background: var(--surface-muted);
    color: var(--ink-muted);
    font-size: 10px;
    line-height: 1;
    padding: 0;
    cursor: help;
}

.term-help__tooltip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--card-surface);
    border: 1px solid var(--border-soft);
    box-shadow: 0 6px 16px rgba(18, 24, 32, 0.12);
    color: var(--ink-strong);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease;
    z-index: 5;
    pointer-events: none;
}

.term-help:hover .term-help__tooltip,
.term-help:focus-within .term-help__tooltip {
    opacity: 1;
    visibility: visible;
}