/* Shared, restrained workspace surfaces for native-tab WebViews and the web.
   Each color rule targets a named UI component; gate badges and charts keep
   their own data colors. */
.mp-workspace .mp-page { padding-top: 20px; }
.mp-workspace .mp-screen-header {
    padding: 22px 24px;
    border: 1px solid var(--mp-border);
    border-radius: 14px;
    background: var(--mp-surface);
    color: var(--mp-ink);
    box-shadow: none;
}
.mp-workspace .mp-screen-header h1 {
    margin-bottom: 8px;
    color: var(--mp-ink);
    font-size: 24px;
    line-height: 1.35;
    font-weight: 750;
    letter-spacing: -.025em;
}
.mp-workspace .mp-screen-description { color: var(--mp-muted); font-size: 14px; line-height: 1.65; }
.mp-workspace .mp-screen-header strong { color: var(--mp-ink); }
.mp-workspace .mp-heading-icon { color: var(--mp-primary); }
.mp-workspace .mp-screen-header h1 > .fas { color: var(--mp-primary); }
.mp-workspace .mp-panel {
    border: 1px solid var(--mp-border);
    border-radius: 14px;
    background: var(--mp-surface);
    box-shadow: none;
}
.mp-workspace .mp-page :is(select, input[type='text'], input[type='search'], input[type='number'], input[type='date']) { min-height: 44px; }
.mp-workspace .mp-filter-chip { min-height: 44px; display: inline-flex; align-items: center; border-radius: 8px; }
.mp-workspace .mp-label { background: var(--mp-primary-soft); color: var(--mp-primary); }
.mp-workspace .mp-action { min-height: 44px; background: var(--mp-primary); color: #fff; background-image: none; box-shadow: none; }
.mp-workspace .mp-action:hover { background: var(--mp-primary-hover); }
.mp-workspace .mp-secondary-action { min-height: 44px; color: var(--mp-primary); background: var(--mp-primary-soft); box-shadow: none; }
.mp-workspace .mp-secondary-action:hover { background: #e0e8f7; }

/* Tool directory: content distinguishes the tools, rather than seven palettes. */
.mp-workspace .mp-directory-card { border: 1px solid var(--mp-border); border-radius: 14px; background: #fff; box-shadow: none; }
.mp-workspace .mp-directory-card:hover { border-color: #9cb4df; box-shadow: 0 3px 12px #17243a08; }
.mp-workspace .mp-directory-card-head { background: var(--mp-surface); border-color: var(--mp-border); }
.mp-workspace .mp-directory-icon { background: var(--mp-primary-soft); color: var(--mp-primary); background-image: none; }
.mp-workspace .mp-directory-icon i { color: var(--mp-primary); }
.mp-tools :is(.mp-directory-icon, .mp-label) { background: var(--mp-canvas); color: var(--mp-muted); }
.mp-tools .mp-directory-icon i { color: var(--mp-muted); }
.mp-tools .mp-directory-card h2 { color: var(--mp-ink); font-size: 17px; }
.mp-tools .mp-directory-card ul i { color: var(--mp-muted); }
.mp-tools .mp-directory-card-head + div { padding-top: 16px; }
.mp-tools .mp-directory-card .group-hover\:scale-110 { transform: none; }

/* Search: compact input and clear selected category at all phone widths. */
.mp-search .mp-search-field { display: flex; gap: 8px; }
.mp-search .mp-search-field input {
    min-width: 0;
    flex: 1;
    width: 100%;
    border: 1px solid var(--mp-border);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 16px;
    background: var(--mp-canvas);
}
.mp-search .mp-search-field button { flex: none; padding: 0 16px; border-radius: 10px; font-size: 14px; font-weight: 700; }
.mp-search .mp-search-types { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-search .search-type-btn { min-height: 44px; padding: 9px 14px; background: #fff; border: 1px solid var(--mp-border); border-radius: 8px; color: var(--mp-muted); font-size: 14px; }
.mp-search .search-type-btn.active { background: var(--mp-primary); border-color: var(--mp-primary); color: #fff; }
.mp-search .mp-search-guide { background: var(--mp-canvas); background-image: none; border-color: var(--mp-border); text-align: left; }
.mp-search .mp-search-guide > div { width: 44px; height: 44px; margin-left: 0; background: var(--mp-surface); }
.mp-search .mp-search-guide i { color: var(--mp-muted); font-size: 21px; }
.mp-search .mp-search-guide h3 { color: var(--mp-ink); }
.mp-search .mp-search-guide p { color: var(--mp-muted); }
.mp-search .mp-record-link { background: #fff; background-image: none; color: var(--mp-ink); border: 1px solid var(--mp-border); box-shadow: none; }
.mp-search .mp-record-link p { color: var(--mp-muted); }
.mp-search .mp-record-link .relative > div:last-child { color: var(--mp-primary); }
.mp-search .mp-record-link i { color: var(--mp-primary); }
.mp-search .record-badge { animation: none; }
.mp-search :is(.type-badge-horse, .type-badge-jockey, .type-badge-trainer) { background: var(--mp-canvas); color: var(--mp-muted); border: 1px solid var(--mp-border); }
.mp-search .search-result-card:hover, .mp-search .info-card:hover { transform: none; box-shadow: 0 3px 12px #17243a08; }
.mp-search .loading-spinner { border-top-color: var(--mp-primary); }

/* Report metrics use ordered labels. Profit/loss and chart lines remain semantic. */
.mp-workspace .mp-stat-tile { border: 1px solid var(--mp-border); box-shadow: none; border-radius: 12px; }
.mp-workspace .mp-stat-tile > :is(h3, p.text-2xl) { color: var(--mp-ink); font-variant-numeric: tabular-nums; }
.mp-workspace .mp-stat-tile.mp-stat-tile--positive > h3 { color: var(--mp-success); }
.mp-workspace .mp-stat-tile.mp-stat-tile--warning > h3 { color: var(--mp-warning); }
.mp-workspace .mp-stat-tile.mp-stat-tile--negative > h3 { color: var(--mp-danger); }
.mp-hit-ratio .mp-highlight-record #heroOdds { color: var(--mp-ink); }
.mp-hit-ratio .mp-highlight-record .flex.items-end { align-items: center; flex-wrap: wrap; }
.mp-hit-ratio #daily-validation { border: 1px solid var(--mp-border); box-shadow: none; }
.mp-hit-ratio #daily-validation [role='tab'] { min-height: 44px; display: inline-flex; align-items: center; }
.mp-hit-ratio .mp-week-tabs a { min-width: 72px; }
.mp-hit-ratio .mp-record-history { border-color: var(--mp-border); }
.mp-hit-ratio .mp-record-value { color: var(--mp-ink); font-variant-numeric: tabular-nums; }
.mp-my-page .rel-follow { color: var(--mp-primary); background: var(--mp-primary-soft); }
.mp-my-page .rel-upset { color: var(--mp-warning); background: #faf4e8; }
.mp-my-page #favorites button { min-width: 44px; min-height: 44px; }
.mp-my-page .mp-screen-header > a { min-height: 44px; display: inline-flex; align-items: center; }

/* Content discovery: white navigation cards, data/photo overlays untouched. */
.mp-resources .mp-content-counts { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--mp-muted); font-size: 13px; }
.mp-resources .mp-content-counts strong { margin-left: 4px; color: var(--mp-primary); }
.mp-resources .mp-resource-nav { display: block; border: 1px solid var(--mp-border); background: #fff; color: var(--mp-ink); }
.mp-resources .mp-resource-nav:hover { border-color: #9cb4df; background: var(--mp-primary-soft); }
.mp-resources .mp-resource-nav > i:first-of-type { color: var(--mp-primary); font-size: 24px; }
.mp-resources .mp-resource-nav p { color: var(--mp-muted); }
.mp-resources .card-hover:hover { transform: none; }
.mp-resources .floating-badge { animation: none; }

/* Paid plans share the same surfaces. Pricing, benefits and purchase logic stay intact. */
.mp-subscription .mp-plan-surface { background: var(--mp-surface); background-image: none; border: 1px solid var(--mp-border); box-shadow: none; }
.mp-subscription .mp-plan-heading { background: var(--mp-primary-soft); background-image: none; color: var(--mp-ink); }
.mp-subscription .mp-plan-heading :is(h2,h3,p,span,i),
.mp-subscription .mp-plan-surface .mp-plan-light-text { color: var(--mp-ink); }
.mp-subscription .mp-plan-mark { background: var(--mp-primary-soft); background-image: none; color: var(--mp-primary); }
.mp-subscription .mp-plan-mark i { color: var(--mp-primary); }
.mp-subscription .mp-plan-status { color: var(--mp-primary); }
.mp-subscription .mp-plan-heading .border-t { border-color: var(--mp-border); }
.mp-subscription .mp-plan-heading .mp-action i { color: #fff; }
.mp-subscription .mp-plan-heading > button { color: var(--mp-ink); min-width: 44px; min-height: 44px; }
.mp-subscription .mp-plan-heading .mp-plan-badge { background: var(--mp-primary); color: #fff; box-shadow: none; }
.mp-subscription .mp-plan-badge i { color: #fff; }
.mp-subscription .mp-plan-card { transform: none; box-shadow: none; border-radius: 14px; }
.mp-subscription :is(.plan-tab, summary) { min-height: 44px; }
.mp-subscription .mp-action:hover { transform: none; }

/* Search result profiles share a header; podium and performance colors remain. */
.mp-profile .mp-profile-header { background: #fff; border-bottom: 1px solid var(--mp-border); color: var(--mp-ink); }
.mp-profile .mp-profile-header h1 { color: var(--mp-ink); font-size: 26px; }
.mp-profile .mp-profile-header p { color: var(--mp-muted); }
.mp-profile .mp-profile-header .text-white { color: var(--mp-ink); }
.mp-profile .mp-profile-header .bg-opacity-20 { background: var(--mp-primary-soft); }
.mp-profile .mp-profile-header > .flex { gap: 16px; flex-wrap: wrap; }
.mp-profile .mp-profile-header .space-x-3 { gap: 6px; flex-wrap: wrap; }
.mp-profile .mp-profile-header .space-x-3 > * { margin-left: 0; }
.mp-profile #favToggle { min-height: 44px; border: 1px solid var(--mp-border); }
.mp-profile #favToggle:not(.bg-amber-400) { color: var(--mp-primary); background: var(--mp-primary-soft); }
.mp-profile :is(.tab-btn, .fav-btn) { min-height: 44px; white-space: nowrap; }
.mp-profile .tab-btn.active { color: var(--mp-primary); border-color: var(--mp-primary); }
.mp-profile .mp-profile-stat { background: #fff; background-image: none; border: 1px solid var(--mp-border); box-shadow: none; }
.mp-profile .mp-profile-stat h3 { color: var(--mp-ink); }
.mp-profile .mp-profile-stat:hover { transform: none; }
.mp-profile .mp-profile-stats { border-bottom: 1px solid var(--mp-border); }

/* Supporting tools and articles follow the same component hierarchy. */
.mp-workspace .mp-info-banner { background: var(--mp-primary-soft); color: var(--mp-ink); background-image: none; }
.mp-workspace .mp-info-banner :is(h2,h3,p) { color: var(--mp-ink); }
.mp-workspace .mp-model-info { background: var(--mp-canvas); border: 1px solid var(--mp-border); }
.mp-workspace .mp-model-info h3 i { color: var(--mp-primary); }
.mp-workspace .mp-table-heading { background: var(--mp-primary-soft); background-image: none; }
.mp-workspace .mp-table-heading th { color: var(--mp-muted); }
.mp-workspace .mp-tool-section { background: var(--mp-canvas); border-color: var(--mp-border); }
.mp-workspace .mp-tool-section h2 i { color: var(--mp-primary); }
.mp-workspace :is(.mode-tab, .bet-type-btn, .category-btn) { min-height: 44px; }
.mp-workspace :is(.mode-tab, .bet-type-btn, .category-btn).active { color: #fff; background: var(--mp-primary); border-color: var(--mp-primary); }
.mp-workspace :is(.odds-input, .bet-slot):focus-within { border-color: var(--mp-primary); }
.mp-workspace .category-btn:not(.active) { background: var(--mp-canvas); color: var(--mp-muted); }
.mp-workspace .mp-content { --mc-ink: var(--mp-ink); --mc-muted: var(--mp-muted); --mc-line: var(--mp-border); --mc-gold: #c5d3ed; }
.mp-workspace .mc-hero { background: var(--mp-ink); border-radius: 14px; }
.mp-workspace .mp-content .mc-primary { background: var(--mp-primary); color: #fff; }
.mp-workspace .mp-content .mc-primary:hover { background: var(--mp-primary-hover); }
.mp-workspace .mc-card-visual { background: var(--mp-primary-soft); color: var(--mp-primary); }
.mp-workspace .mc-card:hover { transform: none; border-color: #9cb4df; }
.mp-workspace .mc-tabs a[aria-current='page'] { background: var(--mp-primary); color: #fff; }
.mp-workspace .mc-tabs a { min-height: 44px; display: inline-flex; align-items: center; }
.mp-workspace .mp-content :is(a,button,input):focus-visible { outline-color: var(--mp-primary); }
.mp-workspace .mp-content :is(.mc-prose a, .mc-app-screen) { color: var(--mp-primary); }
.mp-workspace :is(.mc-app-screen span, .mc-tags span, .mc-avatar) { background: var(--mp-primary-soft); color: var(--mp-primary); }
.mp-workspace :is(.mc-side-note, .mc-channel, .mc-prose blockquote) { background: var(--mp-primary-soft); }
.mp-workspace .mc-prose blockquote { border-color: var(--mp-primary); }
.mp-workspace .chart-page { --ink: var(--mp-ink); --muted: var(--mp-muted); --line: var(--mp-border); --accent: var(--mp-primary); }
.mp-workspace .chart-button { background: var(--mp-primary); min-height: 44px; }
.mp-workspace .chart-button.secondary { background: #fff; color: var(--mp-primary) !important; }
.mp-workspace .chart-chips :is(a,button) { min-height: 44px; }
.mp-workspace .chart-chips :is(a[aria-current='true'],button[aria-pressed='true']) { background: var(--mp-primary); color: #fff; }

@media (max-width: 640px) {
    .mp-workspace .mp-page { padding-top: 16px; }
    .mp-workspace .mp-screen-header { padding: 18px 16px; }
    .mp-workspace .mp-screen-header h1 { font-size: 22px; }
    .mp-search #initialState > section:first-child .grid { gap: 8px; }
    .mp-search .mp-search-guide { display: grid; grid-template-columns: 44px 1fr; gap: 0 12px; align-items: center; padding: 12px; }
    .mp-search .mp-search-guide > div { grid-row: span 2; margin-bottom: 0; }
    .mp-search .mp-search-types { gap: 4px; }
    .mp-search .search-type-btn { padding: 9px 8px; flex: 1; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; font-size: 13px; }
    .mp-search .search-type-btn i { margin-right: 4px; }
    .mp-hit-ratio .mp-highlight-record .ml-auto { margin-left: 0; }
    .mp-resources .mp-resource-nav { padding: 16px; }
    .mp-profile .mp-profile-header { padding: 18px 16px; }
    .mp-profile .mp-profile-header h1 { font-size: 22px; }
    .mp-profile .mp-profile-header > .flex > .text-right { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; text-align: left; }
    .mp-profile .mp-profile-header > .flex > .text-right > * { margin: 0; }
    .mp-subscription .mp-plan-heading { padding: 24px 16px; }
}
@media (max-width: 360px) {
    .mp-search .search-type-btn i { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .mp-workspace :is(.card-hover, .info-card, .result-animate) { animation: none; transition: none; transform: none; }
}

/* Color role contract: named roles, never palette-wide remapping.
   Success means completed/verified; general information is neutral. */
.mp-app .mp-text-success { color: var(--mp-success); }
.mp-app .mp-text-warning { color: var(--mp-warning); }
.mp-app .mp-text-danger { color: var(--mp-danger); }
.mp-app .mp-text-info { color: var(--mp-info); }
.mp-app .mp-state-success { color: var(--mp-success); background: var(--mp-success-soft); border-color: var(--mp-success); }
.mp-app .mp-toast-success { color: #fff; background: var(--mp-success); }
.mp-workspace :is(.mp-report-value, .mp-record-value) { color: var(--mp-ink); }
.mp-workspace .mp-report-description { color: var(--mp-muted); }
.mp-workspace .mp-heading-icon,
.mp-workspace .mp-screen-header h1 > .fas { color: var(--mp-muted); }
.mp-workspace .mp-guide-type-icon { color: var(--mp-muted); background: var(--mp-canvas); }
.mp-workspace .mp-secondary-action { border: 1px solid var(--mp-control-border); background: var(--mp-surface); }
.mp-workspace .mp-secondary-action:hover { border-color: var(--mp-primary); background: var(--mp-primary-soft); }
.mp-search .mp-search-field input,
.mp-search .search-type-btn { border-color: var(--mp-control-border); }
.mp-search .search-type-btn.active { border-color: var(--mp-primary); }
.mp-search .mp-search-section-icon { color: var(--mp-muted); background: var(--mp-canvas); }
.mp-search .mp-search-section-icon i { color: inherit; }
.mp-search .mp-ranking-link { border-color: var(--mp-border); box-shadow: none; }
.mp-search .mp-ranking-link .w-14 { color: var(--mp-muted); background: var(--mp-canvas); background-image: none; box-shadow: none; }
.mp-search .mp-ranking-link :is(.w-14 i, .fa-chevron-right) { color: var(--mp-muted); }
.mp-search .mp-ranking-link:hover :is(h3, .fa-chevron-right),
.mp-search .mp-quick-link:hover :is(i, p) { color: var(--mp-primary); }
.mp-search .mp-external-links { background: var(--mp-ink); background-image: none; }
.mp-search .mp-external-links a i { color: #fff; }
.mp-hit-ratio .mp-comparison-panel { color: var(--mp-ink); background: var(--mp-canvas); border-color: var(--mp-border); }
.mp-hit-ratio .mp-verified-row { background: var(--mp-success-soft); }
.mp-hit-ratio .mp-guide-type-icon i { color: var(--mp-muted); }
.mp-subscription .mp-current-subscription { border-color: var(--mp-border); }
.mp-subscription .mp-current-plan { background: var(--mp-primary-soft); border-color: var(--mp-primary); }
.mp-subscription .mp-current-plan p { color: var(--mp-primary); }
.mp-subscription .mp-benefit-icon { color: var(--mp-muted); }
.mp-subscription .mp-plan-status { color: var(--mp-ink); }
.mp-subscription .mp-plan-mark { color: var(--mp-muted); background: var(--mp-canvas); }
.mp-subscription .mp-plan-mark i { color: var(--mp-muted); }
.mp-subscription .mp-plan-heading .mp-action { color: #fff; }
.mp-app .mp-toast-danger { color: #fff; background: var(--mp-danger); }
.mp-app .mp-toast-warning { color: #fff; background: var(--mp-warning); }
.mp-app .mp-toast-info { color: #fff; background: var(--mp-info); }
.mp-workspace .mp-neutral-badge { color: var(--mp-muted); background: var(--mp-canvas); }
.mp-subscription .mp-plan-card--current { border-color: var(--mp-primary); }
.mp-subscription .mp-plan-link { color: var(--mp-primary); }
.mp-subscription .mp-action.mp-plan-link { color: #fff; }
.mp-resources .mp-resource-section-icon { color: var(--mp-muted); background: var(--mp-canvas); }
.mp-resources .mp-resource-section-icon i { color: inherit; }
.mp-subscription .mp-plan-value { color: var(--mp-ink); }
.mp-subscription a.mp-plan-link:hover { color: var(--mp-primary-hover); }
.mp-subscription a.mp-action.mp-plan-link:hover { color: #fff; }
.mp-app .mp-state-danger { color: var(--mp-danger); background: var(--mp-danger-soft); border-color: var(--mp-danger); }
.mp-app .mp-state-warning { color: var(--mp-warning); background: var(--mp-warning-soft); border-color: var(--mp-warning); }
.mp-app .mp-state-info { color: var(--mp-info); background: var(--mp-info-soft); border-color: var(--mp-info); }
.mp-app .mp-flash :is(p, svg, button) { color: inherit; }
.mp-app .mp-flash-dismiss { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; border-radius: 6px; }
.mp-app .mp-flash-dismiss:hover { background: var(--mp-surface); }
.mp-app .mp-state-pending { color: var(--mp-muted); background: var(--mp-neutral-soft); border-color: var(--mp-control-border); }

/* ── 경쟁 사이트 비교(/compare)·예상지 총정리(/resources/racing-forms) — 2026-11-01. 자료는 pages/malpago/racing_forms_data.py ── */
.mp-bc-check { display: flex; gap: 12px; align-items: flex-start; background: var(--mp-surface); border: 1px solid var(--mp-border); border-radius: 14px; padding: 14px 16px; margin: 0 0 28px; font-size: 14px; color: var(--mp-muted); line-height: 1.6; }
.mp-bc-check > i { color: var(--mp-primary); margin-top: 4px; flex: none; }
.mp-bc-check strong { color: var(--mp-ink); }
.mp-bc-h1 { word-break: keep-all; }
.mp-bc-tagline { font-size: 17px; font-weight: 800; color: var(--mp-primary); margin: 0 0 10px; letter-spacing: -.02em; }
.mp-bc-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--mp-surface); border: 1px solid var(--mp-border); border-radius: 16px; max-width: 100%; }
.mp-bc-scroll:focus-visible { outline: 2px solid var(--mp-focus); outline-offset: 2px; }
.mp-bc-table { width: 100%; min-width: 940px; border-collapse: separate; border-spacing: 0; font-size: 13.5px; line-height: 1.55; color: #334155; }
.mp-bc-table th, .mp-bc-table td { padding: 14px; border-bottom: 1px solid #eef1f5; text-align: left; vertical-align: top; }
.mp-bc-table thead th { background: #f8fafc; color: var(--mp-ink); font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.mp-bc-table thead th small { display: block; font-size: 11.5px; font-weight: 600; color: var(--mp-muted); margin-top: 2px; letter-spacing: 0; }
.mp-bc-table tbody th { width: 112px; color: var(--mp-muted); font-weight: 700; font-size: 12.5px; background: #fcfcfd; }
.mp-bc-table tbody th small { display: block; font-weight: 600; margin-top: 2px; }
.mp-bc-table tr > :first-child { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 #e7ebf0; }
.mp-bc-table .is-us { background: var(--mp-primary-soft); }
.mp-bc-table thead .is-us { color: var(--mp-primary); background: #e6edf9; }
.mp-bc-table ul { margin: 0; padding: 0; list-style: none; }
.mp-bc-table li { position: relative; padding-left: 11px; }
.mp-bc-table li + li { margin-top: 6px; }
.mp-bc-table li::before { content: ''; position: absolute; left: 0; top: .62em; width: 4px; height: 4px; border-radius: 50%; background: #a3afc0; }
.mp-bc-table strong, .mp-bc-table b { color: var(--mp-ink); }
.mp-bc-table td small { display: block; color: var(--mp-muted); font-size: 11.5px; margin-top: 2px; }
.mp-bc-table tbody tr:last-child > * { border-bottom: 0; }
.mp-bc-table a { color: var(--mp-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.mp-bc-swipe { display: none; font-size: 12px; color: var(--mp-muted); margin: 0 0 8px; }
.mp-bc-disclaimer { margin: 14px 0 0; font-size: 13px; color: var(--mp-muted); line-height: 1.65; padding-left: 12px; border-left: 3px solid var(--mp-border); }
.mp-bc-needs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mp-bc-need { background: var(--mp-surface); border: 1px solid var(--mp-border); border-radius: 16px; padding: 18px; min-width: 0; }
.mp-bc-need h3 { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; color: var(--mp-ink); margin: 0 0 10px; }
.mp-bc-need h3 i { color: var(--mp-primary); width: 18px; text-align: center; }
.mp-bc-need ul { list-style: none; margin: 0; padding: 0; }
.mp-bc-need li { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid #f1f3f6; font-size: 13.5px; color: #334155; line-height: 1.5; }
.mp-bc-need li:first-child { border-top: 0; }
.mp-bc-site { flex: none; width: 72px; font-size: 11.5px; font-weight: 700; color: var(--mp-muted); }
.mp-bc-need li.is-us .mp-bc-site { color: var(--mp-primary); }
.mp-bc-need li.is-us a { color: var(--mp-primary); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* 예상지 총정리 */
.mp-rf-crumb { display: flex; gap: 8px; font-size: 13px; color: var(--mp-muted); margin: 0 0 12px; }
.mp-rf-crumb a { color: var(--mp-primary); font-weight: 600; }
.mp-rf-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 32px; }
.mp-rf-fact { background: var(--mp-surface); border: 1px solid var(--mp-border); border-radius: 14px; padding: 14px 16px; min-width: 0; }
.mp-rf-fact span { display: block; font-size: 12px; color: var(--mp-muted); font-weight: 600; }
.mp-rf-fact strong { display: block; font-size: 19px; font-weight: 800; color: var(--mp-ink); letter-spacing: -.03em; margin-top: 4px; }
.mp-rf-fact small { display: block; font-size: 11.5px; color: var(--mp-muted); margin-top: 2px; }
.mp-rf-fact.is-us { background: var(--mp-primary-soft); border-color: #d9e2f3; }
.mp-rf-fact.is-us strong { color: var(--mp-primary); }
.mp-bc-table.mp-rf-table { min-width: 1060px; }
.mp-rf-table tbody th { width: 150px; color: var(--mp-ink); font-size: 13.5px; background: #fff; }
.mp-rf-table tbody th small, .mp-rf-table tbody th .mp-rf-site { display: block; font-size: 11.5px; color: var(--mp-muted); font-weight: 700; }
.mp-rf-table td.price { font-weight: 800; color: var(--mp-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mp-rf-table td.price small { font-weight: 600; white-space: normal; }
.mp-rf-table tr.is-us > * { background: var(--mp-primary-soft); }
.mp-rf-table tr.group-start > * { border-top: 2px solid #e3e8ef; }
.mp-rf-perday { width: 100%; border-collapse: collapse; background: var(--mp-surface); border: 1px solid var(--mp-border); border-radius: 14px; overflow: hidden; font-size: 14px; }
.mp-rf-perday th, .mp-rf-perday td { padding: 11px 14px; border-bottom: 1px solid #eef1f5; text-align: left; }
.mp-rf-perday thead th { background: #f8fafc; font-size: 12.5px; color: var(--mp-muted); }
.mp-rf-perday td.price { font-weight: 800; color: var(--mp-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mp-rf-perday tr.is-us td { background: var(--mp-primary-soft); }
.mp-rf-perday tr:last-child td { border-bottom: 0; }
.mp-rf-terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mp-rf-term { display: block; background: var(--mp-surface); border: 1px solid var(--mp-border); border-radius: 14px; padding: 14px 16px; color: #334155; font-size: 14px; line-height: 1.6; }
.mp-rf-term b { color: var(--mp-ink); }
.mp-rf-term a { color: var(--mp-primary); font-weight: 700; }
.mp-rf-guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mp-rf-guides a { display: block; background: var(--mp-surface); border: 1px solid var(--mp-border); border-radius: 14px; padding: 14px 16px; min-width: 0; }
.mp-rf-guides a span { display: block; font-size: 12px; color: var(--mp-primary); font-weight: 700; }
.mp-rf-guides a strong { display: block; font-size: 14.5px; color: var(--mp-ink); margin-top: 4px; line-height: 1.45; }
/* 경마 정보 허브에서 예상지 총정리로 가는 한 줄 카드 */
.mp-rf-hublink { display: flex; align-items: center; gap: 12px; background: var(--mp-surface); border: 1px solid var(--mp-border); border-radius: 14px; padding: 14px 16px; color: var(--mp-ink); }
.mp-rf-hublink > i { color: var(--mp-primary); font-size: 20px; flex: none; }
.mp-rf-hublink strong { display: block; font-size: 15px; }
.mp-rf-hublink small { display: block; font-size: 12.5px; color: var(--mp-muted); margin-top: 2px; }
.mp-rf-hublink .mp-rf-hublink-arrow { margin-left: auto; color: var(--mp-primary); flex: none; }
/* 경마 정보 빠른 이동의 장식 원이 390px 에서 가로로 15px 넘친다 — 카드 안에서 자른다 */
.mp-resources .mp-resource-nav { overflow: hidden; }
@media (max-width: 1023px) {
  .mp-bc-needs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-rf-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-rf-guides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .mp-bc-swipe { display: block; }
  .mp-bc-needs, .mp-rf-terms, .mp-rf-guides { grid-template-columns: minmax(0, 1fr); }
  .mp-bc-table { min-width: 860px; font-size: 13px; }
  .mp-bc-table tbody th { width: 88px; }
  .mp-bc-table.mp-rf-table { min-width: 900px; }
  .mp-rf-table tbody th { width: 118px; }
  .mp-rf-table td.price { white-space: normal; }
  .mp-rf-fact strong { font-size: 17px; }
  .mp-rf-perday { font-size: 13px; }
  .mp-rf-perday th, .mp-rf-perday td { padding: 10px; }
}