.chpi-desc {
    --blue: #3f8cc4;
    --ink: #222;
    --muted: #555;
    --line: #d9dee3;
    --panel: #eef0f2;
    max-width: 1000px;
    margin: 0 auto;
    font-family: "Noto Sans KR","Malgun Gothic",sans-serif;
    color: var(--ink);
    line-height: 1.6;
    box-sizing: border-box
}

    .chpi-desc * {
        box-sizing: border-box
    }

    .chpi-desc img {
        max-width: 100%;
        height: auto;
        display: block;
        border: 0
    }

    .chpi-desc h2, .chpi-desc h3 {
        margin: 0;
        line-height: 1.3;
        color: var(--blue);
        font-family: inherit
    }

    .chpi-desc .hero {
        position: relative
    }

        .chpi-desc .hero > img {
            width: 100%
        }

    .chpi-desc .title {
        position: absolute;
        left: 8.5%;
        top: 5%;
        color: #fff;
        text-shadow: 0 1px 8px rgba(0,0,0,.45)
    }

    .chpi-desc .chpi-title {
        font-size: clamp(1.5rem,4.4vw,2.6rem);
        font-weight: 500;
        line-height: 1.3
    }

    .chpi-desc .chpi-model {
        font-size: clamp(1.2rem,3.6vw,2.2rem);
        font-weight: 300
    }

    .chpi-desc .highlights {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 2rem;
        text-align: center;
        padding: 3rem 2rem 4rem
    }

        .chpi-desc .highlights h3 {
            font-size: 1.4rem;
            margin-bottom: .5rem
        }

        .chpi-desc .highlights p {
            margin: 0;
            color: var(--muted)
        }

    .chpi-desc .detail {
        padding: 2.5rem 4%
    }

    .chpi-desc .grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem 2rem
    }

        .chpi-desc .grid h2 {
            font-size: 1.7rem;
            margin-bottom: .4rem
        }

        .chpi-desc .grid p {
            margin: 0 0 1rem
        }

    .chpi-desc .row {
        display: flex;
        gap: 1rem;
        align-items: flex-start
    }

    .chpi-desc .note {
        font-size: .85rem;
        color: var(--muted)
    }

    .chpi-desc hr {
        border: 0;
        border-top: 1px solid var(--blue);
        margin: 2.5rem 0
    }

    .chpi-desc .filters {
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        gap: 1.5rem;
        align-items: center;
        background: #e8f1f9;
        padding: 1.5rem;
        border-radius: 6px
    }

    .chpi-desc .contaminants {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .8rem
    }

        .chpi-desc .contaminants div {
            background: #fff;
            border-radius: 4px;
            overflow: hidden;
            font-size: .9rem;
            text-align: center;
            box-shadow: 0 0 0 1px var(--line)
        }

        .chpi-desc .contaminants h3 {
            background: #4a7fa8;
            color: #fff;
            font-size: 1rem;
            padding: .4rem
        }

        .chpi-desc .contaminants p {
            margin: 0;
            padding: .7rem
        }

    .chpi-desc .fine {
        font-size: .78rem;
        color: var(--muted);
        margin: .8rem 0 0
    }

    .chpi-desc .specs {
        background: var(--panel);
        padding: 2rem 4%;
        display: flex;
        justify-content: space-between;
        gap: 1rem
    }

        .chpi-desc .specs h2 {
            color: var(--ink);
            font-size: 1.15rem;
            margin-bottom: 1rem
        }

        .chpi-desc .specs dl {
            display: grid;
            grid-template-columns: 7rem 1fr;
            gap: .6rem 1rem;
            margin: 0;
            font-size: .95rem
        }

        .chpi-desc .specs dt {
            font-weight: 700
        }

        .chpi-desc .specs dd {
            margin: 0;
            color: var(--muted)
        }

@media(max-width:700px) {
    .chpi-desc .highlights, .chpi-desc .grid, .chpi-desc .filters {
        grid-template-columns: 1fr
    }

    .chpi-desc .row {
        flex-direction: column
    }

    .chpi-desc .specs {
        flex-direction: column
    }
}