/* ============================================= */
/* PC (1025px 이상) */
/* ============================================= */
@media screen and (min-width: 1025px) {
    .care_web .service_cards_section {
        display: flex;
        width: 100%;
        max-width: 1000px;
        margin: 0 auto;
        padding-top: 48px;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }

    .care_web .service_cards_section .service_cards_wrapper {
        display: flex;
        align-items: center;
        gap: 20px;
        flex: 1 0 0;
    }

    .care_web .service_card {
        display: flex;
        align-items: flex-start;
        flex: 1 0 0;
        border-radius: 32px;
        border: 1px solid var(--Border-secondary, #D9DDE2);
        background: #FFF;
        box-shadow: 0 0 12px 0 rgba(48, 53, 63, 0.06);
    }

    .care_web .service_card .card_inner {
        display: flex;
        padding: 16px 60px;
        align-items: flex-start;
        flex: 1 0 0;
    }

    .care_web .service_card .card_content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 8px;
        flex: 1 0 0;
        align-self: stretch;
    }

    .care_web .service_card .card_subtitle {
        font-family: Pretendard;
        font-style: normal;
        font-size: var(--font-size-18);
        font-weight: var(--font-weight-m);
        color: var(--Text-tertiary, #7E8287);
        line-height: 130%;
        margin: 0;
    }

    .care_web .service_card .card_title_row {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    .care_web .service_card .card_title {
        font-family: Pretendard;
        font-style: normal;
        font-size: var(--font-size-24);
        font-weight: var(--font-weight-sb);
        color: var(--Text-primary, #292A2D);
        line-height: 130%;
        margin: 0;
    }

    .care_web .service_card .card_arrow_box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        width: 10px;
        height: 24px;
        padding: 3px 1px;
        gap: 10px;
    }

    .care_web .service_card .card_arrow {
        width: 8px;
        height: 16.714px;
        flex-shrink: 0;
        fill: var(--Gray-G-900, #5E646C);
        stroke-width: 0.4px;
        stroke: var(--Gray-G-900, #5E646C);
    }

    .care_web .service_card .card_icon {
        display: flex;
        width: 140px;
        height: 140px;
        padding: 9px 4.933px 9px 3.999px;
        justify-content: center;
        align-items: center;
        aspect-ratio: 1 / 1;
    }

    .care_web .service_card .card_icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .care_web .service_card .card_badge {
        width: 22px;
        height: 22px;
    }
}

/* ============================================= */
/* 태블릿 (768px - 1024px) */
/* ============================================= */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .care_web .service_cards_section {
        display: flex;
        width: 100%;
        padding: 32px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
    }

    .care_web .service_cards_section .service_cards_wrapper {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
    }

    .care_web .service_card {
        display: flex;
        flex: 0 0 calc(50% - 10px);
        border-radius: 32px;
        border: 1px solid var(--Border-secondary, #D9DDE2);
        background: #FFF;
        box-shadow: 0 0 12px 0 rgba(48, 53, 63, 0.06);
    }

    .care_web .service_card .card_inner {
        display: flex;
        padding: 36px 40px;
        flex-direction: column;
        align-items: flex-start;
        flex: 1 0 0;
    }

    .care_web .service_card .card_content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .care_web .service_card .card_subtitle {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        color: var(--Text-tertiary, #7E8287);
        font-family: Pretendard;
        font-size: 26px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin: 0;
    }

    .care_web .service_card .card_title_row {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    .care_web .service_card .card_title {
        color: var(--Text-primary, #292A2D);
        font-family: Pretendard;
        font-size: 36px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        margin: 0;
    }

    .care_web .service_card .card_arrow_box {
        display: flex;
        width: 10px;
        height: 24px;
        padding: 3px 1px;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 10px;
    }

    .care_web .service_card .card_arrow {
        width: 8px;
        height: 16.714px;
        flex-shrink: 0;
        fill: var(--Gray-G-900, #5E646C);
        stroke-width: 0.4px;
        stroke: var(--Gray-G-900, #5E646C);
    }

    .care_web .service_card .card_icon {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 10px;
        align-self: stretch;
    }

    .care_web .service_card .card_icon img {
        display: flex;
        width: 152px;
        height: 152px;
        padding: 6px 2.637px 6.713px 2px;
        justify-content: center;
        align-items: center;
        aspect-ratio: 1 / 1;
    }

    .care_web .service_card .card_badge {
        display: inline-block;
        width: 24px;
        height: 24px;
    }
}

/* ============================================= */
/* 모바일 (767px 이하) */
/* ============================================= */
@media screen and (max-width: 767px) {
    .care_web .service_cards_section {
        display: flex;
        width: 100%;
        padding: 20px 0;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .care_web .service_cards_section .service_cards_wrapper {
        display: flex;
        width: calc(100% - 40px);
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    .care_web .service_card {
        display: flex;
        flex: 1 0 0;
    }

    .care_web .service_card .card_inner {
        display: flex;
        height: 160px;
        padding: 24px 20px 16px 20px;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        flex: 1 0 0;
        border-radius: var(--border-radius-16);
        border: 1px solid var(--Border-secondary, #D9DDE2);
        background: var(--color-bg-inverse);
        box-shadow: 0 0 12px 0 rgba(48, 53, 63, 0.06);
    }

    .care_web .service_card .card_content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 4px;
        align-self: stretch;
    }

    .care_web .service_card .card_icon {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 10px;
        align-self: stretch;
    }

    .care_web .service_card .card_icon img {
        width: 78px;
        height: 78px;
        padding: 4px 1px 3px 2px;
    }

    .care_web .service_card .card_subtitle {
        color: var(--Text-tertiary, #7E8287);
        text-shadow: 0 0 8.8px #FFF;
        font-family: Pretendard;
        font-size: var(--font-size-12);
        font-style: normal;
        font-weight: var(--font-weight-m);
        line-height: normal;
        margin: 0;
    }

    .care_web .service_card .card_title_row {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 4px;
    }

    .care_web .service_card .card_title {
        color: var(--Text-primary, #292A2D);
        font-family: Pretendard;
        font-size: var(--font-size-18);
        font-style: normal;
        font-weight: var(--font-weight-sb);
        line-height: normal;
        margin: 0;
    }

    .care_web .service_card .card_arrow_box {
        display: flex;
        width: 10px;
        height: 24px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    .care_web .service_card .card_arrow {
        width: 5px;
        height: 10px;
        flex-shrink: 0;
        fill: var(--Text-tertiary, #7E8287);
        stroke-width: 0.6px;
        stroke: var(--Text-tertiary, #7E8287);
    }

    .care_web .service_card .card_badge {
        display: inline-block;
        width: 18px;
        height: 18px;
    }
}

/* ============================================= */
/* 초소형 모바일 (320px 이하) */
/* ============================================= */
@media screen and (max-width: 320px) {
    .care_web .service_cards_section {
        padding: 20px;
        box-sizing: border-box;
    }

    .care_web .service_cards_section .service_cards_wrapper {
        height: 160px;
        gap: 10px;
        align-self: stretch;
        width: auto;
    }

    .care_web .service_card .card_content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 4px;
    }

    .care_web .service_card .card_title_row {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 4px;
    }

    .care_web .service_card .card_inner {
        padding: 24px 16px 16px;
    }
}

/* ============================================= */
/* 앱 버전 전용 오버라이드 (.care_web.is-app) */
/* ============================================= */

/* 필요시 여기에 .care_web.is-app 전용 스타일 추가 */