:root {
    --detail-black: #101010;
    --detail-muted: #525252;
    --detail-green: #12b76a;
    --detail-yellow: #ffcc05;
}

* {
    box-sizing: border-box;
}

html {
    background: #eeeeee;
}

.detail-body {
    margin: 0;
    background: #eeeeee;
    color: var(--detail-black);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", "Pretendard", Arial, sans-serif;
    letter-spacing: 0;
}

.product-detail {
    width: min(100%, 860px);
    margin: 0 auto;
    background: #ffffff;
    overflow: hidden;
}

.detail-hero {
    position: relative;
    min-height: 1350px;
    color: #ffffff;
    text-align: center;
}

.detail-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail-hero__content {
    position: relative;
    z-index: 1;
    min-height: 1350px;
    padding: 190px 50px 110px;
}

.detail-brand {
    margin: 0;
    font-size: 45px;
    line-height: 1.2;
    font-weight: 800;
}

.detail-lead {
    margin: 56px auto 28px;
    font-size: 45px;
    line-height: 1.32;
    font-weight: 400;
}

.detail-hero h1 {
    margin: 0;
    font-size: 70px;
    line-height: 1.2;
    font-weight: 900;
}

.detail-cert {
    position: absolute;
    right: 48px;
    width: 194px;
    height: 194px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #eeeeee;
    color: #ff0808;
    font-size: 40px;
    font-weight: 900;
}

.detail-cert--first {
    top: 662px;
}

.detail-cert--second {
    top: 893px;
}

.detail-caption {
    position: absolute;
    left: 50%;
    bottom: 132px;
    transform: translateX(-50%);
    width: 80%;
    margin: 0;
    font-size: 30px;
    line-height: 1.35;
}

.problem-section {
    background: #ffffff;
}

.problem-visual {
    position: relative;
    min-height: 1100px;
    color: #ffffff;
    text-align: center;
    overflow: hidden;
}

.problem-visual__image,
.problem-visual__overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.problem-visual__image {
    object-fit: cover;
}

.problem-visual__overlay {
    background: rgba(0, 0, 0, 0.28);
}

.problem-visual__content {
    position: relative;
    z-index: 1;
    padding: 196px 70px 0;
}

.symbol-circle {
    display: inline-grid;
    place-items: center;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: #ffffff;
    color: #080806;
    font-size: 59px;
    line-height: 1;
    font-weight: 900;
}

.problem-visual h2 {
    margin: 38px 0 118px;
    font-size: 60px;
    line-height: 1.2;
    font-weight: 900;
}

.problem-visual p {
    margin: 0;
    font-size: 60px;
    line-height: 1.2;
    font-weight: 400;
}

.solution-copy {
    min-height: 1485px;
    padding: 170px 55px 110px;
    text-align: center;
}

.symbol-circle--yellow {
    background: var(--detail-yellow);
    font-size: 46px;
}

.solution-copy h2 {
    margin: 86px 0 130px;
    font-size: 60px;
    line-height: 1.2;
    font-weight: 900;
}

.solution-copy p {
    margin: 0 0 190px;
    font-size: 60px;
    line-height: 1.2;
    font-weight: 900;
}

.solution-product {
    display: block;
    width: min(700px, 100%);
    margin: 0 auto;
}

.compare-section {
    padding: 190px 49px 205px;
    background: #ffffff;
    text-align: center;
}

.section-kicker {
    margin: 0 0 28px;
    color: var(--detail-black);
    font-size: 30px;
    line-height: 1.25;
}

.compare-section h2 {
    margin: 0 0 96px;
    font-size: 55px;
    line-height: 1.2;
    font-weight: 900;
}

.compare-grid {
    display: grid;
    grid-template-columns: 1fr 1.16fr;
    align-items: start;
    gap: 43px;
}

.compare-card {
    text-align: center;
}

.compare-card img {
    width: 100%;
    height: 263px;
    object-fit: cover;
}

.compare-card--after {
    padding: 16px;
    border: 16px solid var(--detail-green);
}

.compare-card--after img {
    height: 378px;
}

.compare-card h3 {
    margin: 48px 0 40px;
    font-size: 50px;
    line-height: 1.2;
    font-weight: 900;
}

.compare-card--before h3 {
    color: var(--detail-muted);
    font-size: 38px;
}

.compare-card p {
    margin: 0 0 48px;
    color: var(--detail-black);
    font-size: 30px;
    line-height: 1.25;
}

.compare-card--before p,
.compare-card--before li {
    color: var(--detail-muted);
}

.compare-card ul {
    width: 88%;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.compare-card li {
    padding: 24px 0;
    border-top: 1px solid #bdbdbd;
    font-size: 30px;
    line-height: 1.25;
    font-weight: 800;
}

@media (max-width: 720px) {
    .detail-hero,
    .detail-hero__content {
        min-height: 720px;
    }

    .detail-hero__content {
        padding: 90px 26px 70px;
    }

    .detail-brand {
        font-size: 26px;
    }

    .detail-lead {
        margin-top: 34px;
        font-size: 26px;
    }

    .detail-hero h1 {
        font-size: 42px;
    }

    .detail-cert {
        right: 26px;
        width: 104px;
        height: 104px;
        font-size: 23px;
    }

    .detail-cert--first {
        top: 360px;
    }

    .detail-cert--second {
        top: 488px;
    }

    .detail-caption {
        bottom: 58px;
        font-size: 20px;
    }

    .problem-visual {
        min-height: 690px;
    }

    .problem-visual__content {
        padding: 86px 24px 0;
    }

    .symbol-circle {
        width: 58px;
        height: 58px;
        font-size: 38px;
    }

    .problem-visual h2,
    .problem-visual p,
    .solution-copy h2,
    .solution-copy p {
        font-size: 34px;
    }

    .problem-visual h2 {
        margin-bottom: 92px;
    }

    .solution-copy {
        min-height: auto;
        padding: 100px 24px 90px;
    }

    .solution-copy h2 {
        margin: 58px 0 82px;
    }

    .solution-copy p {
        margin-bottom: 90px;
    }

    .compare-section {
        padding: 90px 24px 110px;
    }

    .section-kicker {
        font-size: 21px;
    }

    .compare-section h2 {
        margin-bottom: 58px;
        font-size: 38px;
    }

    .compare-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .compare-card--after {
        border-width: 10px;
    }

    .compare-card h3 {
        font-size: 36px;
    }

    .compare-card--before h3 {
        font-size: 32px;
    }

    .compare-card p,
    .compare-card li {
        font-size: 22px;
    }
}