/* ANCY'S BRIEFING — shared site styles (non-Tailwind) */

/*
 * Opt out of Android Chrome "Auto dark theme for web contents".
 * PC版表示では起きずモバイル幅だけ白文字になるのは、この自動反転の典型症状。
 * color だけでは不十分で -webkit-text-fill-color が必要。
 */
html {
    color-scheme: light;
    supported-color-schemes: light;
}

body {
    background-color: #fdfbf7;
    color: #2c2222;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
}

h1, h2, h3, h4 { letter-spacing: 0.01em; }
.font-serif { font-feature-settings: "palt"; }

/* Utility fallbacks (no fill on * — dark headers must stay light text) */
.text-brand-dark { color: #2c2222 !important; -webkit-text-fill-color: #2c2222 !important; }
.text-brand-accent { color: #8b1c31 !important; -webkit-text-fill-color: #8b1c31 !important; }
.text-brand-gold { color: #c5a059 !important; -webkit-text-fill-color: #c5a059 !important; }
.text-brand-light { color: #fdfbf7 !important; -webkit-text-fill-color: #fdfbf7 !important; }
.text-white { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }
.text-gray-600 { color: #4b5563 !important; -webkit-text-fill-color: #4b5563 !important; }
.text-gray-500 { color: #6b7280 !important; -webkit-text-fill-color: #6b7280 !important; }
.text-gray-400 { color: #9ca3af !important; -webkit-text-fill-color: #9ca3af !important; }
.text-gray-300 { color: #d1d5db !important; -webkit-text-fill-color: #d1d5db !important; }
.bg-white { background-color: #ffffff !important; }
.bg-brand-base, .bg-brand-light { background-color: #f4ece1 !important; }
.bg-brand-dark { background-color: #2c2222 !important; }
.bg-brand-accent { background-color: #8b1c31 !important; }
.bg-brand-gold { background-color: #c5a059 !important; }
.border-brand-base { border-color: #f4ece1 !important; }
.border-brand-gold { border-color: #c5a059 !important; }

/* Light cards (コラム一覧など) — 白文字化を強制阻止 */
.column-card:not(.bg-brand-dark),
a.column-card:not(.bg-brand-dark),
main a.block.bg-white,
main a.bg-white.rounded-2xl {
    background-color: #ffffff !important;
    color: #2c2222 !important;
}
.column-card:not(.bg-brand-dark) h3,
.column-card:not(.bg-brand-dark) .font-serif,
.column-card:not(.bg-brand-dark) p,
a.column-card:not(.bg-brand-dark) h3,
a.column-card:not(.bg-brand-dark) p,
main a.block.bg-white h3,
main a.block.bg-white .font-serif,
main a.block.bg-white p,
main a.bg-white.rounded-2xl h3,
main a.bg-white.rounded-2xl p {
    color: #2c2222 !important;
    -webkit-text-fill-color: #2c2222 !important;
}
.column-card:not(.bg-brand-dark) .text-brand-gold,
main a.block.bg-white .text-brand-gold,
main a.bg-white .text-brand-gold {
    color: #9a7b3c !important;
    -webkit-text-fill-color: #9a7b3c !important;
}
.column-card:not(.bg-brand-dark) .text-brand-accent,
main a.block.bg-white .text-brand-accent,
main a.bg-white .text-brand-accent {
    color: #8b1c31 !important;
    -webkit-text-fill-color: #8b1c31 !important;
}
.column-card:not(.bg-brand-dark) .text-gray-600,
.column-card:not(.bg-brand-dark) .text-gray-500,
main a.block.bg-white .text-gray-600,
main a.block.bg-white .text-gray-500,
main a.bg-white .text-gray-600,
main a.bg-white .text-gray-500 {
    color: #4b5563 !important;
    -webkit-text-fill-color: #4b5563 !important;
}
.column-card:not(.bg-brand-dark) .bg-brand-gold,
.column-card:not(.bg-brand-dark) .bg-brand-base,
main a.block.bg-white .bg-brand-gold,
main a.block.bg-white .bg-brand-base {
    color: #2c2222 !important;
    -webkit-text-fill-color: #2c2222 !important;
}

/* Dark header / footer / dark cards */
header.bg-brand-dark,
footer.bg-brand-dark,
.column-card.bg-brand-dark,
a.column-card.bg-brand-dark,
a.bg-brand-dark {
    background-color: #2c2222 !important;
    color: #fdfbf7 !important;
}
header.bg-brand-dark,
header.bg-brand-dark a,
header.bg-brand-dark span,
header.bg-brand-dark button,
footer.bg-brand-dark,
footer.bg-brand-dark a,
footer.bg-brand-dark span,
footer.bg-brand-dark p,
.column-card.bg-brand-dark,
.column-card.bg-brand-dark h3,
.column-card.bg-brand-dark p,
a.bg-brand-dark,
a.bg-brand-dark h3,
a.bg-brand-dark p,
.conclusion-block,
.conclusion-block p,
.mobile-action-bar {
    color: #fdfbf7 !important;
    -webkit-text-fill-color: #fdfbf7 !important;
}
header.bg-brand-dark .text-brand-gold,
header.bg-brand-dark nav a,
footer.bg-brand-dark .text-brand-gold,
.column-card.bg-brand-dark .text-brand-gold,
a.bg-brand-dark .text-brand-gold,
.conclusion-block .text-brand-gold,
.mobile-action-bar .kpi,
.mobile-action-bar .text-brand-gold {
    color: #c5a059 !important;
    -webkit-text-fill-color: #c5a059 !important;
}
.conclusion-block .text-gray-300,
a.bg-brand-dark .text-gray-300,
.column-card.bg-brand-dark .text-gray-300 {
    color: #d1d5db !important;
    -webkit-text-fill-color: #d1d5db !important;
}
/* Footer: WCAG AA contrast on brand-dark (#2c2222) */
footer.bg-brand-dark .text-gray-400,
footer.bg-brand-dark .text-gray-500,
footer.bg-brand-dark p.text-gray-400,
footer.bg-brand-dark p.text-gray-500,
footer.bg-brand-dark li.text-gray-400 {
    color: #d1d5db !important;
    -webkit-text-fill-color: #d1d5db !important;
}

/* Homepage dark feature panel (race + column cards) — desktop default */
.dark-panel,
#columns-featured .dark-panel {
    background-color: #2c2222 !important;
    background-image: linear-gradient(135deg, #2c2222 0%, #2c2222 55%, #8b1c31 100%) !important;
    color: #fdfbf7 !important;
    forced-color-adjust: none;
}
.dark-panel h3,
.dark-panel .text-white,
.dark-panel .font-serif.font-bold,
#columns-featured .dark-panel a.block h3,
#columns-featured .dark-panel a.block .text-white,
#columns-featured .dark-panel a.block .font-serif {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
.dark-panel .text-gray-200,
.dark-panel .text-gray-300,
#columns-featured .dark-panel a.block p,
#columns-featured .dark-panel .text-gray-200,
#columns-featured .dark-panel .text-gray-300 {
    color: #e5e7eb !important;
    -webkit-text-fill-color: #e5e7eb !important;
}
.dark-panel .text-brand-gold,
#columns-featured .dark-panel .text-brand-gold,
#columns-featured .dark-panel a.block .text-brand-gold {
    color: #c5a059 !important;
    -webkit-text-fill-color: #c5a059 !important;
}
.dark-panel .bg-brand-gold,
.dark-panel .text-brand-dark,
#columns-featured .dark-panel .bg-brand-gold,
#columns-featured .dark-panel .text-brand-dark {
    color: #2c2222 !important;
    -webkit-text-fill-color: #2c2222 !important;
}
/*
 * Desktop: dark glass cards + light ink (never white cards with white titles).
 * Mobile override (max-width 767px) switches to cream panel + white cards + dark ink.
 */
@media (min-width: 768px) {
    #columns-featured .dark-panel a.block,
    #columns-featured .dark-panel a.block[class*="bg-white"],
    #columns-featured .dark-panel a.block[class*="bg-brand-gold"] {
        background: #3a302e !important;
        background-color: #3a302e !important;
        background-image: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-color: rgba(197, 160, 89, 0.45) !important;
        color: #fdfbf7 !important;
    }
    #columns-featured .dark-panel a.block.border-2,
    #columns-featured .dark-panel a.block[class*="bg-brand-gold"] {
        background: #4a3a2e !important;
        background-color: #4a3a2e !important;
        border-color: #c5a059 !important;
    }
    #columns-featured .dark-panel a.block h3,
    #columns-featured .dark-panel a.block .font-serif,
    #columns-featured .dark-panel a.block .text-white,
    #columns-featured .dark-panel a.block .font-serif.font-bold {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        opacity: 1 !important;
    }
    #columns-featured .dark-panel a.block p,
    #columns-featured .dark-panel a.block .text-gray-200,
    #columns-featured .dark-panel a.block .text-gray-300,
    #columns-featured .dark-panel a.block .text-gray-400,
    #columns-featured .dark-panel a.block .text-xs,
    #columns-featured .dark-panel a.block .text-\[11px\],
    #columns-featured .dark-panel a.block .text-\[10px\]:not(.bg-brand-gold):not(.bg-brand-accent):not([class*="bg-"]) {
        color: #e5e7eb !important;
        -webkit-text-fill-color: #e5e7eb !important;
    }
    #columns-featured .dark-panel a.block .text-brand-gold,
    #columns-featured .dark-panel a.block .font-mono.text-brand-gold,
    #columns-featured .dark-panel .text-brand-gold {
        color: #c5a059 !important;
        -webkit-text-fill-color: #c5a059 !important;
    }
    /* Gold / light badges keep dark label text */
    #columns-featured .dark-panel a.block .bg-brand-gold,
    #columns-featured .dark-panel a.block .bg-brand-gold.text-brand-dark,
    #columns-featured .dark-panel a.block .text-brand-dark {
        color: #2c2222 !important;
        -webkit-text-fill-color: #2c2222 !important;
    }
    /* Colored badges keep white label text */
    #columns-featured .dark-panel a.block .bg-brand-accent,
    #columns-featured .dark-panel a.block .bg-green-700,
    #columns-featured .dark-panel a.block .bg-red-800,
    #columns-featured .dark-panel a.block [class*="bg-brand-accent"],
    #columns-featured .dark-panel a.block .bg-brand-accent\/70,
    #columns-featured .dark-panel a.block .bg-brand-accent\/50 {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }
    /* Footer links inside dark panel (Vol.A etc.) */
    #columns-featured .dark-panel .text-gray-300,
    #columns-featured .dark-panel .space-y-2 > p,
    #columns-featured .dark-panel a:not(.block) {
        color: #e5e7eb !important;
        -webkit-text-fill-color: #e5e7eb !important;
    }
    #columns-featured .dark-panel a:not(.block).text-brand-gold,
    #columns-featured .dark-panel .space-y-2 a {
        color: #c5a059 !important;
        -webkit-text-fill-color: #c5a059 !important;
    }
}
/* Latest banner (#next) — one solid card; do not style inner boxes separately */
#next > a.block {
    display: block;
    background-color: #2c2222 !important;
    background-image: linear-gradient(90deg, #2c2222 0%, #6b1526 50%, #2c2222 100%) !important;
    color: #fdfbf7 !important;
    forced-color-adjust: none;
}
#next > a.block h2 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
}
#next > a.block p,
#next > a.block .text-gray-200,
#next > a.block .text-gray-300 {
    color: #e5e7eb !important;
    -webkit-text-fill-color: #e5e7eb !important;
    background: none !important;
}
#next > a.block .text-brand-gold {
    color: #c5a059 !important;
    -webkit-text-fill-color: #c5a059 !important;
}
#next > a.block .text-brand-dark {
    color: #2c2222 !important;
    -webkit-text-fill-color: #2c2222 !important;
}
#next > a.block .text-white {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
/* Confidence chip stays translucent on the dark banner */
#next > a.block .bg-white\/10,
#next > a.block [class*="bg-white"] {
    background-color: rgba(255, 255, 255, 0.1) !important;
    background-image: none !important;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 1rem;
    background: #2c2222;
    color: #c5a059;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    z-index: 100;
    font-size: 0.75rem;
    font-weight: 700;
}
.skip-link:focus { left: 1rem; }

:focus-visible {
    outline: 2px solid #8b1c31;
    outline-offset: 2px;
    border-radius: 4px;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f4ece1; }
::-webkit-scrollbar-thumb { background: #c5a059; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #8b1c31; }

/* Accessible badge contrast (WCAG AA on 10px bold) */
.ancy-badge-success { background-color: #14532d !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }
.ancy-badge-accent { background-color: #6b1524 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }
.ancy-badge-muted { background-color: #1f2937 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }
.ancy-badge-gold { background-color: #c5a059 !important; color: #2c2222 !important; -webkit-text-fill-color: #2c2222 !important; }
.ancy-badge-danger { background-color: #7f1d1d !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }
.ancy-badge-featured { background-color: #2c2222 !important; color: #e8c878 !important; -webkit-text-fill-color: #e8c878 !important; border: 1px solid #c5a059 !important; }

.scroll-top {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 60;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #2c2222;
    color: #c5a059;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    box-shadow: 0 8px 24px -6px rgba(44, 34, 34, 0.45);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.35s, transform 0.35s, background 0.2s;
    cursor: pointer;
    border: 1px solid rgba(197, 160, 89, 0.3);
}
.scroll-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.scroll-top:hover { background: #8b1c31; color: #fff; }

#cookieConsent[hidden] { display: none !important; }

/* Data tables: mobile scroll affordance */
.data-table-scroll {
    position: relative;
    -webkit-overflow-scrolling: touch;
}
.data-table-scroll::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1.5rem;
    pointer-events: none;
    background: linear-gradient(to left, rgba(253, 251, 247, 0.95), transparent);
    opacity: 0;
}
@media (max-width: 767px) {
    .data-table-scroll::after { opacity: 1; }
    .mobile-roi-sticky {
        position: sticky;
        top: 3.5rem;
        z-index: 40;
        backdrop-filter: blur(8px);
    }
}

/* Mobile race cards (results) */
.race-cards { display: none; }
@media (max-width: 767px) {
    .race-cards { display: block; }
    .race-table-desktop { display: none; }
}

/* Conclusion vs analysis visual separation */
.conclusion-block {
    background: #2c2222;
    color: #fdfbf7;
    border-top: 4px solid #c5a059;
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
}
.conclusion-block a { color: #c5a059; }
.analysis-block {
    background: #fff;
    border: 1px solid #f4ece1;
    border-left: 4px solid #8b1c31;
    border-radius: 0 1rem 1rem 0;
    padding: 1.25rem 1.5rem;
}
.conclusion-inline {
    background: #2c2222;
    color: #c5a059;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.15rem 0.45rem;
    border-radius: 0.25rem;
    vertical-align: middle;
}
.analysis-inline {
    background: #f4ece1;
    color: #8b1c31;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.15rem 0.45rem;
    border-radius: 0.25rem;
    vertical-align: middle;
}

/* Inline glossary tooltips */
.ancy-tip {
    border-bottom: 1px dotted #8b1c31;
    cursor: help;
    color: inherit;
}
.ancy-tooltip-pop {
    position: absolute;
    z-index: 200;
    max-width: 260px;
    background: #2c2222;
    color: #fdfbf7;
    font-size: 0.75rem;
    line-height: 1.5;
    padding: 0.6rem 0.75rem;
    border-radius: 0.5rem;
    border-left: 3px solid #c5a059;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    pointer-events: none;
}

/* Noise / pedigree alert chips */
.noise-tag {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.45rem;
    border-radius: 0.25rem;
    background: #f3f4f6;
    color: #4b5563;
    margin: 0.1rem 0.15rem 0.1rem 0;
}
.noise-tag.model { background: #fee2e2; color: #991b1b; }
.noise-tag.physical { background: #e0e7ff; color: #3730a3; }
.noise-tag.value { background: #dcfce7; color: #14532d; }
.pedigree-alert {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.7rem;
    font-weight: 700;
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid #fdba74;
    padding: 0.15rem 0.45rem;
    border-radius: 0.35rem;
}

/* Pace map */
.pace-map {
    display: grid;
    gap: 0.5rem;
}
.pace-lane {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.25rem;
    background: linear-gradient(90deg, #f4ece1 0%, #fff 100%);
    border-radius: 0.5rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid #f4ece1;
}
.pace-lane-label {
    flex: 0 0 3.5rem;
    font-size: 0.65rem;
    font-weight: 700;
    color: #8b1c31;
    letter-spacing: 0.06em;
}
.pace-chip {
    font-size: 0.7rem;
    font-weight: 700;
    background: #2c2222;
    color: #c5a059;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
}
.pace-chip.edge { background: #8b1c31; color: #fff; }

/* CONF breakdown mini bars */
.conf-bars { display: grid; gap: 0.35rem; }
.conf-bar-row { display: grid; grid-template-columns: 2.5rem 1fr 2rem; gap: 0.4rem; align-items: center; font-size: 0.7rem; }
.conf-bar-track { height: 0.4rem; background: #f4ece1; border-radius: 99px; overflow: hidden; }
.conf-bar-fill { height: 100%; background: #8b1c31; border-radius: 99px; }
.conf-bar-fill.weak { background: #dc2626; }

/* ========== Mobile-first enhancements ========== */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}
body {
    overflow-x: hidden;
    -webkit-tap-highlight-color: rgba(139, 28, 49, 0.12);
}

/* Horizontal chip / filter rails */
.chip-rail {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 0.35rem;
    margin-inline: -0.25rem;
    padding-inline: 0.25rem;
    scrollbar-width: none;
}
.chip-rail::-webkit-scrollbar { display: none; }
.chip-rail > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

/* Touch-friendly controls — mobile viewport only */
@media (max-width: 767px) {
    /* Re-assert light ink (Android auto-dark targets mobile UA + narrow viewport) */
    body {
        font-size: 16px;
        line-height: 1.7;
        color: #2c2222 !important;
        background-color: #fdfbf7 !important;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    }
    .font-serif {
        font-family: "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
    }
    /* Safe-area only — sections already use px-4 (avoid double side padding) */
    main {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    /* Do NOT force all main headings dark — breaks #columns-featured dark panel */

    /* Light cards only (cream pages / white cards) */
    main .column-card:not(.bg-brand-dark) h3,
    main a.column-card:not(.bg-brand-dark) h3,
    main a.block.bg-white h3,
    main a.bg-white.rounded-2xl h3 {
        color: #2c2222 !important;
        -webkit-text-fill-color: #2c2222 !important;
        opacity: 1 !important;
        line-height: 1.3;
    }

    /*
     * Dark panels lose background on some Android Chrome builds (auto-dark),
     * leaving white titles on cream. On mobile, force a light card layout instead.
     */
    #columns-featured .dark-panel,
    .dark-panel {
        background: #f4ece1 !important;
        background-image: none !important;
        color: #2c2222 !important;
        border-color: #c5a059 !important;
        forced-color-adjust: none;
    }
    #columns-featured .dark-panel > .absolute {
        display: none !important; /* decorative watermark */
    }
    #columns-featured .dark-panel a.block,
    .dark-panel a.block {
        background: #ffffff !important;
        background-image: none !important;
        border: 1px solid #e7dcc8 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        color: #2c2222 !important;
    }
    #columns-featured .dark-panel a.block h3,
    #columns-featured .dark-panel a.block .font-serif,
    #columns-featured .dark-panel a.block .text-white,
    .dark-panel a.block h3,
    .dark-panel a.block .font-serif,
    .dark-panel a.block .text-white {
        color: #2c2222 !important;
        -webkit-text-fill-color: #2c2222 !important;
        opacity: 1 !important;
    }
    #columns-featured .dark-panel a.block p,
    #columns-featured .dark-panel .text-gray-200,
    #columns-featured .dark-panel .text-gray-300,
    #columns-featured .dark-panel .text-gray-400,
    .dark-panel a.block p,
    .dark-panel .text-gray-200,
    .dark-panel .text-gray-300,
    .dark-panel .text-gray-400 {
        color: #4b5563 !important;
        -webkit-text-fill-color: #4b5563 !important;
    }
    #columns-featured .dark-panel .text-brand-gold,
    #columns-featured .dark-panel a.block .text-brand-gold,
    .dark-panel .text-brand-gold {
        color: #8b1c31 !important;
        -webkit-text-fill-color: #8b1c31 !important;
    }
    #columns-featured .dark-panel .bg-brand-gold,
    #columns-featured .dark-panel .text-brand-dark,
    #columns-featured .dark-panel .bg-brand-base,
    .dark-panel .bg-brand-gold,
    .dark-panel .text-brand-dark {
        color: #2c2222 !important;
        -webkit-text-fill-color: #2c2222 !important;
    }
    #columns-featured .dark-panel .bg-green-700,
    #columns-featured .dark-panel .bg-red-800,
    #columns-featured .dark-panel [class*="bg-brand-accent"],
    .dark-panel .bg-green-700,
    .dark-panel .bg-red-800 {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }
    #columns-featured .dark-panel .space-y-2 > p,
    #columns-featured .dark-panel .space-y-2 > a {
        color: #2c2222 !important;
        -webkit-text-fill-color: #2c2222 !important;
    }
    #columns-featured > .border-b h2,
    #columns-featured > .border-b p,
    #columns-featured > .border-b .text-brand-dark {
        color: #2c2222 !important;
        -webkit-text-fill-color: #2c2222 !important;
    }
    #columns-featured > .border-b .text-gray-500 {
        color: #6b7280 !important;
        -webkit-text-fill-color: #6b7280 !important;
    }
    #columns-featured > .border-b .text-brand-accent {
        color: #8b1c31 !important;
        -webkit-text-fill-color: #8b1c31 !important;
    }

    /* Other dark gradient banners on homepage (e.g. #next) — mobile keeps solid dark */
    main a.block[class*="from-brand-dark"],
    main a.block[class*="via-brand-dark"] {
        background: #2c2222 !important;
        background-image: none !important;
        color: #fdfbf7 !important;
        forced-color-adjust: none;
    }
    /* Solid dark sections (Final Word, CTA blocks) — keep ink light */
    main .bg-brand-dark:not(.dark-panel),
    main section.bg-brand-dark:not(.dark-panel) {
        background-color: #2c2222 !important;
        background-image: none !important;
        forced-color-adjust: none;
    }
    main .bg-brand-dark:not(.dark-panel) h2,
    main .bg-brand-dark:not(.dark-panel) h3,
    main .bg-brand-dark:not(.dark-panel) .text-brand-light,
    main .bg-brand-dark:not(.dark-panel) .font-serif {
        color: #fdfbf7 !important;
        -webkit-text-fill-color: #fdfbf7 !important;
    }
    main .bg-brand-dark:not(.dark-panel) .text-gray-300,
    main .bg-brand-dark:not(.dark-panel) .text-gray-400 {
        color: #d1d5db !important;
        -webkit-text-fill-color: #d1d5db !important;
    }
    main .bg-brand-dark:not(.dark-panel) .text-brand-gold {
        color: #c5a059 !important;
        -webkit-text-fill-color: #c5a059 !important;
    }
    main a.block[class*="from-brand-dark"] h3,
    main a.block[class*="from-brand-dark"] .text-white,
    main a.block[class*="via-brand-dark"] h3,
    main a.block[class*="via-brand-dark"] .text-white {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }

    header.bg-brand-dark,
    header.bg-brand-dark a,
    header.bg-brand-dark span {
        color: #fdfbf7 !important;
        -webkit-text-fill-color: #fdfbf7 !important;
    }
    header.bg-brand-dark .text-brand-gold,
    header.bg-brand-dark nav a {
        color: #c5a059 !important;
        -webkit-text-fill-color: #c5a059 !important;
    }

    /* Larger tap targets */
    button, .preset-btn, .legend-btn, .qchip, .sc-btn, .horse-chip, .chip-rail > button,
    a.inline-block.bg-brand-accent, a.inline-block.bg-brand-dark, a.inline-block.bg-brand-gold {
        min-height: 44px;
        min-width: 44px;
    }
    #mobileMenuBtn {
        min-width: 48px;
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    #mobileMenu a {
        display: block;
        padding: 0.85rem 0.5rem;
        font-size: 0.85rem;
        border-bottom: 1px solid rgba(197, 160, 89, 0.15);
    }
    #mobileMenu {
        max-height: min(70vh, 28rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
    }

    /* Sticky header safe area */
    header.sticky {
        padding-top: env(safe-area-inset-top);
    }

    /* Forms: 16px prevents iOS zoom */
    input, select, textarea {
        font-size: 16px !important;
        max-width: 100%;
    }
    input[type="range"] {
        height: 2rem;
        touch-action: pan-y;
    }
    input[type="number"], input[type="search"], input[type="text"], select {
        min-height: 44px;
        padding-top: 0.55rem;
        padding-bottom: 0.55rem;
    }

    /* Cards & blocks */
    .conclusion-block, .analysis-block {
        padding: 1rem 1.1rem;
        border-radius: 0.85rem;
    }
    .analysis-block { border-radius: 0 0.85rem 0.85rem 0; }

    /* Tables: card-like scroll + hint */
    .data-table-scroll,
    .overflow-x-auto:has(> table),
    .overflow-x-auto:has(table) {
        margin-inline: -0.25rem;
        padding-inline: 0.25rem;
        border-radius: 0.75rem;
    }
    .data-table-scroll::before,
    .overflow-x-auto:has(table)::before {
        content: "← 横スクロールで全文表示";
        display: block;
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        color: #8b1c31;
        padding: 0.4rem 0.6rem 0;
    }
    .data-table-scroll table,
    .overflow-x-auto table { font-size: 0.8rem; }
    .data-table-scroll th, .data-table-scroll td {
        padding: 0.55rem 0.45rem;
        white-space: nowrap;
    }

    /* Sticky summary bars */
    .mobile-roi-sticky {
        position: sticky;
        top: calc(3.25rem + env(safe-area-inset-top));
        z-index: 40;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    /* Scroll top: above home indicator / action bar / cookie banner */
    .scroll-top {
        right: max(1rem, env(safe-area-inset-right));
        bottom: max(1.25rem, calc(env(safe-area-inset-bottom) + 0.75rem));
        width: 48px;
        height: 48px;
    }
    body.has-mobile-action .scroll-top {
        bottom: max(5.75rem, calc(5rem + env(safe-area-inset-bottom)));
    }
    body:has(#cookieConsent:not([hidden])) .scroll-top {
        bottom: max(7.5rem, calc(6.5rem + env(safe-area-inset-bottom)));
    }
    body.has-mobile-action:has(#cookieConsent:not([hidden])) .scroll-top {
        bottom: max(11rem, calc(10rem + env(safe-area-inset-bottom)));
    }

    /* Cookie banner: stack on narrow screens */
    #cookieConsent {
        padding: 0.85rem 1rem !important;
        padding-bottom: max(0.85rem, env(safe-area-inset-bottom)) !important;
    }
    #cookieConsent > div {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }
    #cookieConsent p {
        font-size: 0.8rem !important;
        min-width: 0 !important;
        line-height: 1.55 !important;
    }
    #cookieConsent > div > div {
        display: flex !important;
        gap: 0.5rem !important;
        width: 100%;
    }
    #cookieConsent button {
        flex: 1 1 0;
        min-height: 44px;
        font-size: 0.8rem !important;
        padding: 0.65rem 0.75rem !important;
    }

    /* Tooltips as bottom sheet on mobile */
    .ancy-tooltip-pop {
        position: fixed !important;
        left: 0.75rem !important;
        right: 0.75rem !important;
        bottom: max(0.75rem, env(safe-area-inset-bottom)) !important;
        top: auto !important;
        max-width: none;
        width: auto;
        font-size: 0.85rem;
        line-height: 1.55;
        padding: 0.85rem 1rem;
        border-radius: 0.75rem;
        border-left-width: 4px;
        box-shadow: 0 -8px 32px rgba(0,0,0,0.35);
        pointer-events: auto;
        z-index: 300;
    }
    .ancy-tip {
        padding: 0.05rem 0.1rem;
    }

    /* Pace map chips wrap */
    .pace-lane {
        flex-wrap: wrap;
        min-height: 2.75rem;
    }

    /* Chart containers */
    canvas { max-width: 100%; }

    /* Grid stacks: avoid cramped 2-col KPI on very small screens */
    .grid.grid-cols-2.md\:grid-cols-4,
    .grid.grid-cols-2.md\:grid-cols-5 {
        gap: 0.65rem;
    }

    /* Footer nav links easier to tap */
    footer a {
        display: inline-block;
        padding: 0.25rem 0;
        min-height: 1.75rem;
    }

    /* LAB / interactive: fixed bottom action bar */
    .mobile-action-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 45;
        background: rgba(45, 34, 34, 0.96);
        color: #fdfbf7;
        padding: 0.7rem 1rem;
        padding-bottom: max(0.7rem, env(safe-area-inset-bottom));
        border-top: 3px solid #c5a059;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0 -8px 24px rgba(0,0,0,0.25);
    }
    .mobile-action-bar .kpi {
        font-family: Georgia, "Noto Serif JP", serif;
        font-size: 1.05rem;
        font-weight: 700;
        color: #c5a059;
        font-feature-settings: "tnum";
        max-width: 60vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* Space so content isn't hidden behind fixed bar */
    body.has-mobile-action main {
        padding-bottom: 5.5rem;
    }

    /* Horse chips / legend buttons: horizontal scroll preferred */
    #horse-chips, #legend-btns, #quick-chips {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.45rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.35rem;
        scrollbar-width: none;
    }
    #horse-chips::-webkit-scrollbar,
    #legend-btns::-webkit-scrollbar,
    #quick-chips::-webkit-scrollbar { display: none; }
    #horse-chips > *, #legend-btns > *, #quick-chips > * {
        flex: 0 0 auto;
    }

    /* Numbers / yen: never split mid-value (was break-all — caused 1,00 / 0円) */
    .font-mono,
    .kpi-num,
    code {
        word-break: keep-all !important;
        overflow-wrap: normal !important;
        line-break: strict;
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum", "palt";
    }

    /* Scrollable tables: keep cells intact, scroll horizontally instead */
    .overflow-x-auto,
    .data-table-scroll {
        -webkit-overflow-scrolling: touch;
    }
    .overflow-x-auto table,
    .data-table-scroll table {
        width: max-content;
        min-width: 100%;
        font-size: 0.75rem;
    }
    .overflow-x-auto th,
    .overflow-x-auto td,
    .data-table-scroll th,
    .data-table-scroll td {
        white-space: nowrap !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
        vertical-align: middle;
    }
    /* Money / numeric columns */
    .overflow-x-auto td.text-right,
    .overflow-x-auto th.text-right,
    .overflow-x-auto td.font-mono,
    .overflow-x-auto th.font-mono,
    .data-table-scroll td.text-right,
    .data-table-scroll th.text-right,
    .data-table-scroll td.font-mono {
        white-space: nowrap !important;
        font-variant-numeric: tabular-nums;
    }
}

/* Numbers never break — all viewports */
.font-mono,
.kpi-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    word-break: keep-all;
    overflow-wrap: normal;
}
.num-keep,
td.font-mono,
th.font-mono {
    white-space: nowrap;
    word-break: keep-all;
}

/* Very small phones */
@media (max-width: 380px) {
    .text-3xl { font-size: 1.5rem !important; }
    .text-4xl { font-size: 1.65rem !important; }
    .conclusion-block .text-2xl { font-size: 1.25rem; }
}

/* ========== Mobile polish (layout / density / readability) ========== */
@media (max-width: 767px) {
    /* Tighter vertical rhythm */
    main > section,
    main section.py-12,
    main section.py-16,
    #columns-featured,
    #next {
        padding-top: 1.75rem !important;
        padding-bottom: 1.75rem !important;
    }
    .hero-pattern > div,
    section.hero-pattern > div {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    .hero-pattern h2 {
        font-size: 2rem !important;
        line-height: 1.25 !important;
    }
    .hero-pattern p.text-base,
    .hero-pattern p.text-lg {
        font-size: 0.95rem !important;
    }
    /* CTA buttons stack full-width */
    .hero-pattern .flex.flex-wrap.gap-3 > a {
        flex: 1 1 100%;
        justify-content: center;
        text-align: center;
    }

    /* Header: prevent title overflow */
    header .font-serif.tracking-widest {
        font-size: 0.9rem;
        letter-spacing: 0.08em;
        max-width: calc(100vw - 6rem);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Mobile menu: solid panel (readable over content) */
    #mobileMenu {
        background: #2c2222 !important;
        border-top: 1px solid rgba(197, 160, 89, 0.35);
    }
    #mobileMenu a {
        color: #c5a059 !important;
        -webkit-text-fill-color: #c5a059 !important;
        border-bottom-color: rgba(197, 160, 89, 0.2) !important;
    }
    #mobileMenu a.text-white,
    #mobileMenu a[class*="text-white"] {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }

    /* KPI / stat cards: readable density */
    .grid.grid-cols-2.md\:grid-cols-5 > div,
    .grid.grid-cols-2.md\:grid-cols-4 > div {
        padding: 1rem !important;
    }
    .grid.grid-cols-2.md\:grid-cols-5 .text-4xl,
    .grid.grid-cols-2.md\:grid-cols-4 .text-4xl,
    .grid.grid-cols-2.md\:grid-cols-5 .text-5xl,
    .grid.grid-cols-2.md\:grid-cols-4 .text-5xl {
        font-size: 1.75rem !important;
        line-height: 1.15;
    }
    .kpi-num,
    .kpi-num span {
        white-space: nowrap;
        word-break: keep-all;
    }

    /* Breadcrumbs */
    nav[aria-label="パンくずリスト"] {
        font-size: 0.7rem;
        line-height: 1.5;
        gap: 0.35rem;
    }

    /* Article / column body */
    article p,
    .article-body p {
        font-size: 0.95rem;
        line-height: 1.8;
    }
    article h2,
    article h3 {
        line-height: 1.35;
        margin-top: 0.25rem;
    }

    /* Pre / code blocks scroll, don't shatter */
    pre, pre code {
        white-space: pre;
        word-break: normal !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        font-size: 0.7rem;
    }

    /* Filter / tab buttons as scroll rail when in a row */
    [role="tablist"],
    .filter-btn {
        -webkit-tap-highlight-color: transparent;
    }
    div:has(> .filter-btn) {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.4rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.25rem;
        scrollbar-width: none;
    }
    div:has(> .filter-btn)::-webkit-scrollbar { display: none; }
    .filter-btn {
        flex: 0 0 auto;
        min-height: 40px;
        white-space: nowrap;
    }

    /* Race result portfolio tables: slightly roomier numeric cells */
    .overflow-x-auto td.font-mono,
    .overflow-x-auto th.font-mono,
    .overflow-x-auto td.text-right.font-mono {
        padding-left: 0.65rem;
        padding-right: 0.65rem;
        letter-spacing: 0.01em;
    }

    /* Dark table footers (合計行) stay gold on dark */
    tr.bg-brand-dark td,
    tr.bg-brand-dark th,
    .bg-brand-dark.text-brand-gold td,
    tfoot .bg-brand-dark td {
        color: #c5a059 !important;
        -webkit-text-fill-color: #c5a059 !important;
        white-space: nowrap !important;
    }

    /* Cards: consistent padding */
    .column-card,
    a.column-card {
        padding: 1.1rem !important;
    }

    /* Avoid huge empty gaps from flex-wrap badges */
    .flex.flex-wrap.gap-2,
    .flex.flex-wrap.gap-3 {
        row-gap: 0.35rem;
    }

    /* LAB tool pages: less top padding */
    body:has(.mobile-action-bar) main {
        padding-bottom: 5.5rem;
    }

    /* Media never overflows viewport */
    img, video, svg, iframe {
        max-width: 100%;
        height: auto;
    }
    /* Keep icon SVGs in buttons from stretching */
    button svg, a svg, header svg, .scroll-top svg {
        max-width: none;
        flex-shrink: 0;
    }

    /* Footer: readable columns + home indicator */
    footer {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
        padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
    }
    footer .grid {
        gap: 1.25rem;
    }

    /* Conclusion / analysis: slightly smaller display type */
    .conclusion-block .text-2xl,
    .conclusion-block .text-3xl {
        font-size: 1.2rem !important;
        line-height: 1.4;
    }

    /* Touch: no sticky hover lift on cards */
    .race-card:hover,
    .column-card:hover {
        transform: none;
    }
    .race-card:active,
    a.column-card:active {
        opacity: 0.92;
    }

    /* Mobile menu open state */
    #mobileMenuBtn[aria-expanded="true"] {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }
    #mobileMenu:not(.hidden) {
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    }

    /* Long unbroken strings (URLs in articles) */
    article a,
    .article-body a {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* Search / filter row on homepage */
    .search-form {
        width: 100%;
    }
    .search-form input {
        width: 100%;
        min-width: 0;
    }
}

/* GPU-composited transitions only (PageSpeed: avoid color/border animations) */
@media (prefers-reduced-motion: no-preference) {
    .transition,
    [class*="transition"] {
        transition-property: opacity, transform !important;
        transition-duration: 0.2s;
        transition-timing-function: ease;
    }
    .race-card {
        transition-property: transform, opacity !important;
    }
}

/* Respect reduced motion */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .race-card,
    .column-card,
    .scroll-top {
        transition: none !important;
    }
}

/* Accessibility: gold is decorative on dark surfaces, but body text needs AA. */
main .text-brand-gold {
    color: #76591f !important;
    -webkit-text-fill-color: #76591f !important;
}
main .bg-brand-dark .text-brand-gold,
main .dark-panel .text-brand-gold,
main .conclusion-block .text-brand-gold,
main .mobile-action-bar .text-brand-gold,
main [class~="bg-brand-accent"] .text-brand-gold,
main [class*="bg-brand-accent/"] .text-brand-gold {
    color: #e8c878 !important;
    -webkit-text-fill-color: #e8c878 !important;
}

/* Two-colour focus ring stays visible on both cream and dark panels. */
:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px #8b1c31;
}