.order-comparison {
    --comparison-bg: #071a3d;
    --comparison-blue: #1761e8;
    --comparison-mint: #51d9aa;
    --comparison-line: rgba(174, 200, 244, .21);
    position: relative;
    overflow: hidden;
    padding: 58px 0 70px;
    color: #fff;
    background:
        radial-gradient(circle at 73% 42%, rgba(19, 90, 224, .17), transparent 31%),
        linear-gradient(135deg, #081d43 0%, var(--comparison-bg) 62%, #061733 100%);
}

.order-comparison::before {
    position: absolute;
    top: -210px;
    left: 50%;
    width: 780px;
    height: 420px;
    border: 1px solid rgba(74, 137, 244, .13);
    border-radius: 50%;
    content: "";
    transform: translateX(-10%) rotate(-12deg);
}

.order-comparison,
.order-comparison * {
    box-sizing: border-box;
}

.order-comparison__inner {
    position: relative;
    z-index: 1;
    width: min(1380px, calc(100% - 80px));
    margin: 0 auto;
}

.order-comparison__section-no {
    display: inline-block;
    padding-bottom: 9px;
    border-bottom: 2px solid #4382f4;
    color: #4382f4;
    font-size: 20px;
    font-weight: 850;
    line-height: 1;
}

.order-comparison h2 {
    margin: 28px 0 38px;
    color: #fff;
    font-size: clamp(48px, 3.8vw, 62px);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -4px;
    word-break: keep-all;
}

.order-comparison h2 strong {
    color: #2872ef;
    font-weight: 850;
}

.order-comparison__table {
    overflow: hidden;
    border: 1px solid rgba(142, 176, 230, .2);
    border-radius: 10px;
    box-shadow: 0 30px 80px rgba(0, 6, 22, .24);
}

.order-comparison__head,
.order-comparison__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 140px minmax(0, 1.05fr);
}

.order-comparison__head {
    min-height: 60px;
}

.order-comparison__head > div {
    display: grid;
    place-items: center;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -1px;
}

.order-comparison__head-old {
    color: #c0cce0;
    background: rgba(123, 151, 197, .23);
}

.order-comparison__head-flow {
    background: rgba(21, 52, 100, .74);
}

.order-comparison__head-new {
    color: #fff;
    background: linear-gradient(90deg, #0d4fcf, #1761e8);
}

.order-comparison__row {
    min-height: 92px;
    border-top: 1px solid var(--comparison-line);
}

.order-comparison__old,
.order-comparison__new {
    display: grid;
    min-width: 0;
    align-items: center;
}

.order-comparison__old {
    grid-template-columns: 112px 1fr;
    padding: 14px 34px 14px 18px;
    color: #aebbd1;
    background: rgba(79, 108, 156, .2);
    font-size: 20px;
    font-weight: 650;
    letter-spacing: -.55px;
}

.order-comparison__flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #2e78ef;
    background: rgba(12, 40, 83, .86);
}

.order-comparison__flow i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

.order-comparison__flow svg {
    width: 45px;
    height: 45px;
    margin-left: 4px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
}

.order-comparison__new {
    grid-template-columns: 112px 1fr 48px;
    gap: 6px;
    padding: 14px 28px 14px 18px;
    color: #09275d;
    background: #f9fbff;
}

.order-comparison__new strong {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -.65px;
    word-break: keep-all;
}

.order-comparison__icon {
    display: grid;
    place-items: center;
}

.order-comparison__icon svg {
    width: 55px;
    height: 55px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.1;
}

.order-comparison__old .order-comparison__icon {
    color: #91a8ce;
}

.order-comparison__old .order-comparison__icon .mark {
    stroke: #8299bd;
}

.order-comparison__new .order-comparison__icon {
    color: #1459cf;
}

.order-comparison__new .order-comparison__icon .mark {
    stroke: var(--comparison-mint);
}

.order-comparison__check {
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--comparison-mint);
    font-size: 17px;
    font-weight: 900;
    line-height: 1;
}

@media (max-width: 1100px) {
    .order-comparison__inner {
        width: min(980px, calc(100% - 56px));
    }

    .order-comparison__head,
    .order-comparison__row {
        grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1.05fr);
    }

    .order-comparison__old,
    .order-comparison__new {
        grid-template-columns: 80px 1fr;
    }

    .order-comparison__new {
        grid-template-columns: 80px 1fr 40px;
    }

    .order-comparison__old {
        padding-right: 20px;
    }
}

@media (max-width: 760px) {
    .order-comparison {
        padding: 78px 0 84px;
    }

    .order-comparison__inner {
        width: calc(100% - 36px);
    }

    .order-comparison__section-no {
        font-size: 16px;
    }

    .order-comparison h2 {
        margin: 25px 0 38px;
        font-size: clamp(35px, 10.2vw, 43px);
        line-height: 1.2;
        letter-spacing: -2.6px;
    }

    .order-comparison h2 br {
        display: none;
    }

    .order-comparison__table {
        overflow: visible;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .order-comparison__head {
        display: none;
    }

    .order-comparison__body {
        display: grid;
        gap: 16px;
    }

    .order-comparison__row {
        display: grid;
        min-height: 0;
        grid-template-columns: 1fr;
        overflow: hidden;
        border: 1px solid rgba(142, 176, 230, .22);
        border-radius: 14px;
        box-shadow: 0 16px 40px rgba(0, 5, 18, .18);
    }

    .order-comparison__old,
    .order-comparison__new {
        grid-template-columns: 58px 1fr;
        grid-template-rows: auto auto;
        min-height: 78px;
        padding: 12px 16px;
        font-size: 14px;
    }

    .order-comparison__old::before,
    .order-comparison__new::before {
        display: block;
        grid-column: 2;
        margin-bottom: 3px;
        font-size: 17px;
        font-weight: 800;
        letter-spacing: -.2px;
    }

    .order-comparison__old::before {
        color: #8297ba;
        content: "기존 발주";
    }

    .order-comparison__new::before {
        color: #1761e8;
        content: "한바퀴 발주";
    }

    .order-comparison__old > .order-comparison__icon,
    .order-comparison__new > .order-comparison__icon {
        grid-row: 1 / 3;
    }

    .order-comparison__old > span:not(.order-comparison__icon) {
        grid-row: 2;
        grid-column: 2;
    }

    .order-comparison__flow {
        min-height: 30px;
    }

    .order-comparison__flow i {
        width: 4px;
        height: 4px;
    }

    .order-comparison__flow svg {
        width: 27px;
        height: 27px;
        transform: rotate(90deg);
    }

    .order-comparison__new {
        grid-template-columns: 58px 1fr 30px;
    }

    .order-comparison__new::before {
        grid-column: 2 / 4;
    }

    .order-comparison__new strong {
        grid-row: 2;
        grid-column: 2;
        font-size: 15px;
    }

    .order-comparison__icon svg {
        width: 43px;
        height: 43px;
    }

    .order-comparison__check {
        grid-row: 1 / 3;
        grid-column: 3;
        align-self: center;
        width: 25px;
        height: 25px;
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .order-comparison * {
        scroll-behavior: auto !important;
    }
}