/**
 * SMTBOX Machine Comparison Component
 * File: css/components/comparison.css
 * Decoupled from page-comparison.php & single-smtbox_comparison.php
 * Clean cascade, Zero important declarations
 * Proof Marker: Stan (已讀 md、非臆測)
 *//* ==========================================================================
   1. Breadcrumb & Header Badge
   ========================================================================== */.sre-breadcrumb-list,
.smtbox-breadcrumb-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: var(--smt-font-sans, 'Inter', sans-serif);
}.sre-comparison-badge,
.smtbox-comparison-badge {
    background-color: rgba(0, 39, 128, 0.08);
    color: var(--smt-color-primary, #002780);
    padding: 6px 14px;
    border-radius: 9999px;
    border: 1px solid rgba(0, 39, 128, 0.15);
    font-family: var(--smt-font-brand, 'Outfit', sans-serif);
}/* ==========================================================================
   2. Executive Summary / AEO Callout Box
   ========================================================================== */.sre-comparison-summary-card,
.smtbox-comparison-summary-card {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid var(--smt-color-slate-200, #cbd5e1);
    border-left: 4px solid var(--smt-color-accent, #CF0921);
    border-radius: var(--smt-radius-md, 8px);
    padding: var(--smt-space-lg, 24px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}.sre-summary-indicator,
.smtbox-summary-indicator {
    display: inline-block;
    width: 6px;
    height: 18px;
    background-color: var(--smt-color-accent, #CF0921);
    border-radius: 3px;
}/* ==========================================================================
   3. Comparison Matrix Table
   ========================================================================== */.sre-comp-table-wrapper,
.smtbox-comp-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--smt-color-white, #ffffff);
    border: 1px solid var(--smt-color-slate-200, #e2e8f0);
    border-radius: var(--smt-radius-lg, 12px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    margin-bottom: var(--smt-space-xl, 40px);
}.sre-comp-table,
.smtbox-comp-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--smt-font-sans, 'Inter', sans-serif);
    font-size: 0.9375rem;
    min-width: 680px;
}.sre-comp-table th,
.smtbox-comp-table th,
.sre-comp-table td,
.smtbox-comp-table td {
    padding: 16px 20px;
    text-align: left;
    border-bottom: 1px solid var(--smt-color-slate-200, #e2e8f0);
}.sre-comp-table thead th,
.smtbox-comp-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #ffffff;
    color: var(--smt-color-primary, #002780);
    font-family: var(--smt-font-brand, 'Outfit', sans-serif);
    font-weight: 700;
    font-size: 1rem;
    border-bottom: 2px solid var(--smt-color-slate-300, #cbd5e1);
}
.sre-comp-table thead th:first-child,
.smtbox-comp-table thead th:first-child {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 15;
    background: #ffffff;
}
.sre-comp-table tr:hover,
.smtbox-comp-table tr:hover {
    background-color: var(--smt-color-slate-50, #f8fafc);
}
.sre-comp-table th.sre-comp-header-machine,
.smtbox-comp-table th.smtbox-comp-header-machine,
.smtbox-comp-table th.sre-comp-header-machine,
.smtbox-comp-table th.smtbox-comp-header-machine,
.sre-comp-table td.sre-comp-header-machine,
.smtbox-comp-table td.smtbox-comp-header-machine,
.smtbox-comp-table td.sre-comp-header-machine,
.smtbox-comp-table td.smtbox-comp-header-machine {
    font-size: 1.125rem;
    color: var(--smt-color-primary, #002780);
    text-align: center;
    font-weight: 700;
}
.sre-comp-table tbody :is(th, td):first-child,
.smtbox-comp-table tbody :is(th, td):first-child,
.sre-comp-feature,
.smtbox-comp-feature {
    position: sticky;
    left: 0;
    z-index: 5;
    background: #f8fafc;
    font-weight: 600;
    color: var(--smt-color-slate-900, #1e293b);
    width: 25%;
    text-align: left;
}.sre-comp-val,
.smtbox-comp-val {
    text-align: center;
    width: 25%;
    color: var(--smt-color-slate-600, #475569);
    line-height: 1.5;
}.sre-comp-table a.sre-comp-btn,
.sre-comp-table a.smtbox-comp-btn,
.smtbox-comp-table a.sre-comp-btn,
.smtbox-comp-table a.smtbox-comp-btn,
.sre-comp-btn,
.smtbox-comp-btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--smt-color-primary, #002780);
    color: var(--smt-color-white, #ffffff);
    font-family: var(--smt-font-brand, 'Outfit', sans-serif);
    font-weight: 600;
    font-size: 0.8125rem;
    border-radius: var(--smt-radius-md, 6px);
    text-decoration: none;
    transition: background-color var(--smt-transition-fast, 0.2s ease), transform var(--smt-transition-fast, 0.2s ease), box-shadow var(--smt-transition-fast, 0.2s ease);
    text-align: center;
    margin: 8px auto 0 auto;
}.sre-comp-table a.sre-comp-btn:hover,
.sre-comp-table a.smtbox-comp-btn:hover,
.smtbox-comp-table a.sre-comp-btn:hover,
.smtbox-comp-table a.smtbox-comp-btn:hover,
.sre-comp-btn:hover,
.smtbox-comp-btn:hover {
    background-color: var(--smt-color-accent-hover, #b0071a);
    color: var(--smt-color-white, #ffffff);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(207, 9, 33, 0.3);
}.sre-comp-btn-lg,
.smtbox-comp-btn-lg {
    padding: 14px 32px;
    font-size: 1rem;
    background-color: var(--smt-color-accent, #CF0921);
}.sre-comp-btn-lg:hover,
.smtbox-comp-btn-lg:hover {
    background-color: var(--smt-color-accent-hover, #b0071a);
}/* ==========================================================================
   4. Platform Highlights
   ========================================================================== */.sre-comparison-highlights,
.smtbox-comparison-highlights {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--smt-space-lg, 24px);
    margin-top: var(--smt-space-xl, 40px);
}@media (min-width: 768px) {.sre-comparison-highlights,
.smtbox-comparison-highlights {
        grid-template-columns: repeat(3, 1fr);
    }
}.sre-highlight-card,
.smtbox-highlight-card {
    background: var(--smt-color-white, #ffffff);
    border: 1px solid var(--smt-color-slate-200, #e2e8f0);
    border-radius: var(--smt-radius-md, 8px);
    padding: var(--smt-space-lg, 24px);
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}.sre-highlight-card h3,
.smtbox-highlight-card h3 {
    color: var(--smt-color-primary, #002780);
    font-family: var(--smt-font-brand, 'Outfit', sans-serif);
    font-size: 1.25rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: var(--smt-space-sm, 12px);
}.sre-highlight-card p,
.smtbox-highlight-card p {
    font-family: var(--smt-font-sans, 'Inter', sans-serif);
    font-size: 0.875rem;
    color: var(--smt-color-slate-600, #475569);
    line-height: 1.6;
    margin: 0;
}/* ==========================================================================
   5. RFQ CTA Banner Card
   ========================================================================== */.sre-comparison-cta-card,
.smtbox-comparison-cta-card {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border: 1px solid var(--smt-color-slate-200, #cbd5e1);
    border-radius: var(--smt-radius-lg, 12px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}