:root {

    --corrosion-primary:
    #0a6655;

    --corrosion-primary-dark:
    #074d41;

    --corrosion-border:
    #dce5e2;

    --corrosion-text:
    #17231f;

    --corrosion-muted:
    #687873;

    --corrosion-bg:
    #f5f8f7;

}


/* =====================================================
   顶部
===================================================== */

.corrosion-detail-hero {

    padding:
    30px 0 64px;

    color:
    #ffffff;

    background:

        radial-gradient(
            circle at 80% 20%,
            rgba(74,200,166,0.22),
            transparent 34%
        ),

        linear-gradient(
            135deg,
            #073f37,
            #0a6655 58%,
            #0b7562
        );

}


.corrosion-detail-breadcrumb {

    display:
    flex;

    flex-wrap:
    wrap;

    gap:
    8px;

    margin-bottom:
    34px;

    color:
    rgba(255,255,255,0.68);

    font-size:
    14px;

}


.corrosion-detail-breadcrumb a {

    color:
    rgba(255,255,255,0.90);

}


.corrosion-detail-label {

    margin-bottom:
    12px;

    color:
    #9ee0ce;

    font-size:
    13px;

    font-weight:
    800;

    letter-spacing:
    0.16em;

}


.corrosion-detail-hero h1 {

    max-width:
    900px;

    margin:
    0;

    font-size:
    clamp(32px,5vw,52px);

    line-height:
    1.25;

}


.corrosion-detail-hero-content > p {

    max-width:
    820px;

    margin:
    18px 0 0;

    color:
    rgba(255,255,255,0.82);

    font-size:
    17px;

    line-height:
    1.9;

}


.corrosion-detail-tags {

    display:
    flex;

    flex-wrap:
    wrap;

    gap:
    9px;

    margin-top:
    23px;

}


.corrosion-detail-tags span {

    padding:
    6px 11px;

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

    border-radius:
    18px;

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

    color:
    rgba(255,255,255,0.90);

    font-size:
    13px;

}


/* =====================================================
   主体
===================================================== */

.corrosion-detail-main {

    padding:
    0 0 72px;

    background:
    var(--corrosion-bg);

}


.corrosion-detail-card {

    padding:
    32px;

    border:
    1px solid var(--corrosion-border);

    border-radius:
    17px;

    background:
    #ffffff;

    box-shadow:
    0 10px 30px rgba(18,61,51,0.06);

}


.corrosion-data-card {

    position:
    relative;

    z-index:
    2;

    margin-top:
    -28px;

}


.corrosion-card-heading {

    display:
    flex;

    justify-content:
    space-between;

    gap:
    20px;

    align-items:
    flex-start;

    margin-bottom:
    24px;

}


.corrosion-card-kicker {

    margin-bottom:
    7px;

    color:
    var(--corrosion-primary);

    font-size:
    12px;

    font-weight:
    800;

    letter-spacing:
    0.12em;

}


.corrosion-card-heading h2 {

    margin:
    0;

    color:
    var(--corrosion-text);

    font-size:
    25px;

    line-height:
    1.4;

}


.corrosion-card-heading p {

    margin:
    8px 0 0;

    color:
    var(--corrosion-muted);

    line-height:
    1.7;

}


.corrosion-new-query {

    flex:
    0 0 auto;

    padding:
    9px 15px;

    border:
    1px solid #b9cbc5;

    border-radius:
    8px;

    color:
    var(--corrosion-primary);

    background:
    #ffffff;

}


/* =====================================================
   腐蚀数据表
===================================================== */

.corrosion-table-wrap {

    width:
    100%;

    overflow-x:
    auto;

    border:
    1px solid var(--corrosion-border);

    border-radius:
    12px;

    -webkit-overflow-scrolling:
    touch;

}


.corrosion-data-table {

    width:
    100%;

    min-width:
    680px;

    border-collapse:
    separate;

    border-spacing:
    0;

}


.corrosion-data-table th,
.corrosion-data-table td {

    padding:
    15px 13px;

    border-right:
    1px solid #e3ebe8;

    border-bottom:
    1px solid #e3ebe8;

    text-align:
    center;

    vertical-align:
    middle;

}


.corrosion-data-table th:last-child,
.corrosion-data-table td:last-child {

    border-right:
    0;

}


.corrosion-data-table tbody tr:last-child td {

    border-bottom:
    0;

}


.corrosion-data-table thead th {

    background:
    #eaf4f1;

    color:
    #27483f;

    font-size:
    14px;

    white-space:
    nowrap;

}


.corrosion-data-table th:first-child,
.corrosion-data-table td:first-child {

    position:
    sticky;

    left:
    0;

    z-index:
    2;

    min-width:
    130px;

    background:
    #ffffff;

    font-weight:
    700;

    box-shadow:
    1px 0 0 var(--corrosion-border);

}


.corrosion-data-table thead th:first-child {

    z-index:
    3;

    background:
    #dfefea;

}


.condition-note {

    margin:
    5px 0 0;

    color:
    #7a8984;

    font-size:
    11px;

    font-weight:
    400;

    line-height:
    1.8;

}


.corrosion-remark-row td {

    background:
    #fffaf0;

    color:
    #66552e;

    text-align:
    left;

    font-size:
    13px;

}


.corrosion-result-badge {

    display:
    inline-flex;

    min-width:
    66px;

    min-height:
    29px;

    align-items:
    center;

    justify-content:
    center;

    padding:
    4px 10px;

    border-radius:
    16px;

    font-size:
    13px;

    font-weight:
    700;

    white-space:
    nowrap;

}


.corrosion-result-badge.excellent {

    color:
    #087443;

    background:
    #def5e9;

}


.corrosion-result-badge.good {

    color:
    #176b67;

    background:
    #def3f1;

}


.corrosion-result-badge.usable {

    color:
    #946000;

    background:
    #fff0c8;

}


.corrosion-result-badge.unsuitable {

    color:
    #a32632;

    background:
    #ffe1e4;

}


.corrosion-result-badge.warning {

    color:
    #a54510;

    background:
    #ffe6d5;

}


.corrosion-result-badge.danger {

    color:
    #8c1c31;

    background:
    #fbdde5;

}


.corrosion-result-badge.notice {

    color:
    #526176;

    background:
    #e9edf3;

}


.corrosion-rate,
.corrosion-result-description {

    margin-top:
    6px;

    color:
    #72807c;

    font-size:
    11px;

    line-height:
    1.5;

}


.corrosion-no-data {

    color:
    #a6b0ad;

}


.corrosion-mobile-tip {

    display:
    none;

    margin-top:
    9px;

    color:
    #7a8984;

    font-size:
    12px;

    text-align:
    center;

}


/* =====================================================
   结果说明
===================================================== */

.corrosion-data-card + .corrosion-detail-card {

    margin-top:
    26px;

}


.corrosion-result-guide {

    display:
    grid;

    grid-template-columns:
    repeat(2,minmax(0,1fr));

    gap:
    14px 24px;

}


.corrosion-guide-item {

    display:
    flex;

    gap:
    13px;

    align-items:
    flex-start;

    padding:
    15px;

    border:
    1px solid #e4ebe8;

    border-radius:
    10px;

    background:
    #fbfcfc;

}


.corrosion-guide-item strong {

    color:
    #31463f;

    font-size:
    14px;

}


.corrosion-guide-item p {

    margin:
    5px 0 0;

    color:
    #687873;

    font-size:
    13px;

    line-height:
    1.6;

}


/* =====================================================
   介质和材料介绍
===================================================== */

.corrosion-info-grid,
.corrosion-related-grid {

    display:
    grid;

    grid-template-columns:
    repeat(2,minmax(0,1fr));

    gap:
    26px;

    margin-top:
    26px;

}


.corrosion-summary {

    margin-bottom:
    22px;

    padding:
    15px 17px;

    border-left:
    4px solid var(--corrosion-primary);

    background:
    #edf6f3;

    color:
    #36534b;

    line-height:
    1.8;

}


.corrosion-content-text + .corrosion-content-text {

    margin-top:
    22px;

}


.corrosion-content-text h3 {

    margin:
    0 0 9px;

    color:
    #263b35;

    font-size:
    17px;

}


.corrosion-content-text p {

    margin:
    0;

    color:
    #5e6f69;

    line-height:
    1.9;

    white-space:
    pre-line;

}


/* =====================================================
   相关查询
===================================================== */

.corrosion-related-links {

    display:
    grid;

    gap:
    9px;

}


.corrosion-related-links a {

    display:
    flex;

    justify-content:
    space-between;

    gap:
    15px;

    align-items:
    center;

    padding:
    12px 14px;

    border:
    1px solid #e1e9e6;

    border-radius:
    8px;

    background:
    #fbfcfc;

    color:
    #29463e;

    transition:
    0.2s ease;

}


.corrosion-related-links a:hover {

    border-color:
    #9dc6ba;

    background:
    #edf7f4;

}


.corrosion-related-links span {

    color:
    #798883;

    font-size:
    12px;

    text-align:
    right;

}


/* =====================================================
   免责声明
===================================================== */

.corrosion-detail-disclaimer {

    margin-top:
    26px;

    padding:
    24px 28px;

    border-left:
    5px solid #d3a03e;

    border-radius:
    8px;

    background:
    #fff8e8;

    color:
    #66552e;

}


.corrosion-detail-disclaimer h2 {

    margin:
    0 0 10px;

    font-size:
    19px;

}


.corrosion-detail-disclaimer p {

    margin:
    7px 0 0;

    line-height:
    1.8;

}


/* =====================================================
   平板
===================================================== */

@media (max-width:900px) {

    .corrosion-info-grid,
    .corrosion-related-grid {

        grid-template-columns:
        1fr;

    }


    .corrosion-result-guide {

        grid-template-columns:
        1fr;

    }

}


/* =====================================================
   手机
===================================================== */

@media (max-width:640px) {

    .corrosion-detail-hero {

        padding:
        50px 0 52px;

    }


    .corrosion-detail-breadcrumb {

        margin-bottom:
        24px;

    }


    .corrosion-detail-hero h1 {

        font-size:
        30px;

    }


    .corrosion-detail-hero-content > p {

        font-size:
        15px;

    }


    .corrosion-detail-main > .container {

        padding-right:
        12px;

        padding-left:
        12px;

    }


    .corrosion-detail-card {

        padding:
        20px 15px;

        border-radius:
        13px;

    }


    .corrosion-card-heading {

        display:
        block;

    }


    .corrosion-card-heading h2 {

        font-size:
        21px;

    }


    .corrosion-new-query {

        display:
        inline-block;

        margin-top:
        15px;

    }


    .corrosion-mobile-tip {

        display:
        block;

    }


    .corrosion-guide-item {

        display:
        block;

    }


    .corrosion-guide-item .corrosion-result-badge {

        margin-bottom:
        10px;

    }


    .corrosion-related-links a {

        display:
        block;

    }


    .corrosion-related-links span {

        display:
        block;

        margin-top:
        4px;

        text-align:
        left;

    }


    .corrosion-detail-disclaimer {

        padding:
        20px 18px;

    }

}

/* =====================================================
   手机端腐蚀数据表
===================================================== */

@media (max-width:640px) {

    .corrosion-table-wrap {

        display:
        block;

        width:
        100%;

        max-width:
        100%;

        overflow-x:
        auto;

        overflow-y:
        visible;

        -webkit-overflow-scrolling:
        touch;

    }


    .corrosion-data-table {

        width:
        max-content;

        min-width:
        100%;

        table-layout:
        auto;

    }


    .corrosion-data-table th,
    .corrosion-data-table td {

        min-width:
        100px;

        padding:
        12px 10px;

        font-size:
        13px;

    }


    .corrosion-data-table th:first-child,
    .corrosion-data-table td:first-child {

        min-width:
        105px;

        max-width:
        105px;

    }


    .corrosion-result-badge {

        min-width:
        58px;

        font-size:
        12px;

    }

}