/* ===== P2201N COMMON ===== */
.p2201-detail {
    width: 100%;
    background: #fff;
    color: #171c24;
    font-family: inherit;
}

    .p2201-detail,
    .p2201-detail * {
        box-sizing: border-box;
    }

        .p2201-detail .p2201-inner {
            width: 100%;
            max-width: 1380px;
            margin: 0 auto;
            padding: 0 28px;
        }

        /* ===== SECTION 1 : CERTIFICATION ===== */
        .p2201-detail .p2201-cert-section {
            padding: 55px 0 0;
        }

        .p2201-detail .p2201-cert-layout {
            display: grid;
            grid-template-columns: minmax(250px, 1.25fr) repeat(4, minmax(0, 1fr));
            gap: 10px;
            align-items: stretch;
        }

        .p2201-detail .p2201-cert-intro {
            padding: 6px 20px 0 0;
        }

        .p2201-detail .p2201-intro-head {
            display: flex;
            align-items: flex-start;
            gap: 15px;
        }

        .p2201-detail .p2201-intro-icon {
            flex: 0 0 38px;
            width: 38px;
            height: 38px;
            color: #10a8f2;
        }

        .p2201-detail .p2201-cert-intro h2 {
            font-size: clamp(23px, 2.4vw, 35px);
            font-weight: 800;
            line-height: 1.18;
            letter-spacing: -0.8px;
            color: #111;
            margin: 0 0 14px;
        }

            .p2201-detail .p2201-cert-intro h2 span {
                color: #10a8f2;
            }

        .p2201-detail .p2201-cert-intro p {
            font-size: 13px;
            line-height: 1.75;
            color: #4b535c;
            margin: 0;
            padding-left: 53px;
        }

        /* CERT CARDS */
        .p2201-detail .p2201-cert-card {
            min-width: 0;
            min-height: 235px;
            border: 1px solid #7dd0ff;
            border-radius: 5px;
            padding: 19px 12px 17px;
            background: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .p2201-detail .p2201-cert-symbol {
            width: 75px;
            height: 75px;
            margin: 0 auto 9px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

            .p2201-detail .p2201-cert-symbol svg {
                width: 66px;
                height: 66px;
                fill: none;
                stroke: #0788e8;
                stroke-width: 1.7;
                stroke-linecap: round;
                stroke-linejoin: round;
            }

        .p2201-detail .p2201-gold-seal {
            display: block;
            width: 75px;
            height: 75px;
            object-fit: contain;
        }

        .p2201-detail .p2201-cert-card h3 {
            font-size: 16px;
            line-height: 1.35;
            font-weight: 750;
            color: #0878cc;
            margin: 0 0 10px;
        }

        .p2201-detail .p2201-cert-card p {
            font-size: 13px;
            line-height: 1.55;
            color: #343b45;
            margin: 0;
        }

        .p2201-detail .p2201-cert-note {
            font-size: 11px;
            line-height: 1.65;
            color: #68727e;
            margin: 14px 0 0;
        }

        /* ===== SECTION 2 : FILTRATION ===== */
        .p2201-detail .p2201-flow-section {
            padding: 120px 0 65px;
            background: #fff;
        }

        .p2201-detail .p2201-flow-image {
            display: block;
            width: 100%;
            max-width: 1297px;
            height: auto;
            margin: 0 auto;
            object-fit: contain;
        }

/* ===== TABLET ===== */
@media (max-width: 1100px) {
    .p2201-detail .p2201-cert-layout {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .p2201-detail .p2201-cert-intro {
        grid-column: 1 / -1;
        padding: 0 0 20px;
    }

        .p2201-detail .p2201-cert-intro p {
            padding-left: 53px;
        }
}

/* ===== MOBILE ===== */
@media (max-width: 700px) {
    .p2201-detail .p2201-inner {
        padding: 0 15px;
    }

    .p2201-detail .p2201-cert-section {
        padding-top: 35px;
    }

    .p2201-detail .p2201-cert-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .p2201-detail .p2201-cert-intro {
        padding-bottom: 14px;
    }

    .p2201-detail .p2201-intro-head {
        gap: 11px;
    }

    .p2201-detail .p2201-intro-icon {
        width: 31px;
        height: 31px;
        flex-basis: 31px;
    }

    .p2201-detail .p2201-cert-intro h2 {
        font-size: 27px;
    }

    .p2201-detail .p2201-cert-intro p {
        padding-left: 42px;
        font-size: 13px;
    }

    .p2201-detail .p2201-cert-card {
        min-height: 215px;
        padding: 15px 9px;
    }

    .p2201-detail .p2201-cert-symbol {
        width: 61px;
        height: 61px;
    }

        .p2201-detail .p2201-cert-symbol svg {
            width: 54px;
            height: 54px;
        }

    .p2201-detail .p2201-gold-seal {
        width: 61px;
        height: 61px;
    }

    .p2201-detail .p2201-cert-card h3 {
        font-size: 14px;
    }

    .p2201-detail .p2201-cert-card p {
        font-size: 12px;
    }

    .p2201-detail .p2201-flow-section {
        padding: 70px 0 40px;
    }
}