@charset "UTF-8";

/* ===========================
   공통 콘텐츠 컴포넌트 (contents.css)
   서브페이지에서 공통으로 사용되는 레이아웃 패턴
   =========================== */

/* ------- 인트로 레이아웃: 이미지 + 그라데이션 정보 박스 ------- */
.cont_intro {
    display: flex;
    justify-content: center;
    gap: clamp(14px, 1.0417vw, 20px);
    align-items: stretch;
}

.cont_intro_img {
    width: clamp(280px, 21.875vw, 420px);
    flex-shrink: 0;
    border-radius: clamp(30px, 3.125vw, 60px);
    overflow: hidden;
    position: relative;
}

.cont_intro_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cont_intro_info {
    flex: none;
    width: clamp(360px, 39.5833vw, 760px);
    box-sizing: border-box;
    position: relative;
    border-radius: clamp(30px, 3.125vw, 60px);
    background: linear-gradient(to left, #6681c4, var(--Primary-600, #7fa8cb));
    padding: clamp(30px, 3.6458vw, 70px) clamp(30px, 4.2188vw, 70px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cont_intro_info_bg {
    position: absolute;
    inset: 0;
    opacity: 0.2;
    pointer-events: none;
    overflow: hidden;
}

.cont_intro_info_bg img {
    position: absolute;
    top: -59%;
    left: -3%;
    width: 162%;
    height: 208%;
    max-width: none;
    object-fit: unset;
}

/* 정보 박스 내 텍스트 공통 */
.cont_intro_info p {
    position: relative;
    z-index: 1;
    font-size: clamp(16px, 1.1458vw, 22px);
    line-height: 1.6;
    color: #fff;
    letter-spacing: -0.44px;
}

.cont_intro_info p + p {
    margin-top: clamp(14px, 1.1458vw, 22px);
}

/* ------- 번호 리스트 레이아웃: 이미지 + 번호 목록 ------- */
.cont_num_layout {
    display: flex;
    gap: clamp(40px, 4.1667vw, 80px);
    align-items: center;
}

.cont_num_img {
    flex: 1;
    border-radius: clamp(30px, 3.125vw, 60px);
    overflow: hidden;
}

.cont_num_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cont_num_list {
    width: clamp(400px, 31.25vw, 600px);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 0.9375vw, 18px);
}

.cont_num_item {
    display: flex;
    align-items: center;
}

.cont_num_badge {
    width: clamp(54px, 3.8542vw, 74px);
    flex-shrink: 0;
    background: var(--Primary-600, #7fa8cb);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(17px, 1.1458vw, 22px);
    font-weight: 700;
    line-height: 1.6;
    color: #fff;
    letter-spacing: -0.44px;
    align-self: stretch;

    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
}

.cont_num_item p {
    flex: 1;
    background: #fff;
    border-radius: 10px;
    padding: clamp(12px, 0.7813vw, 15px) clamp(16px, 1.25vw, 24px);
    font-size: clamp(16px, 1.1458vw, 22px);
    line-height: 1.6;
    color: #262626;
    letter-spacing: -0.44px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
}

/* ------- 정보 카드 레이아웃: 아이콘 + 타이틀 + 설명 ------- */
/* 아트로핀(pediatric_3), 흔한 눈 질환(checkup_1/pediatric_4), 홈케어 KIT(checkup_2) 등 공통 */
.atropine_cards,
.disease_cards,
.kit_cards {
    display: flex;
    gap: clamp(14px, 1.25vw, 24px);
}

.atropine_card,
.disease_card,
.kit_card {
    flex: 1;
    background: #fff;
    border-radius: 8px;
    padding: clamp(30px, 2.6042vw, 50px);
    text-align: center;
    box-shadow: 0 4px 20px rgba(88, 107, 181, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(14px, 1.25vw, 24px);
}

.atropine_card .card_icon,
.disease_card .card_icon,
.kit_card .card_icon {
    width: clamp(70px, 5.2083vw, 100px);
    height: clamp(70px, 5.2083vw, 100px);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.atropine_card .card_icon img,
.atropine_card .card_icon svg,
.disease_card .card_icon img,
.disease_card .card_icon svg,
.kit_card .card_icon img,
.kit_card .card_icon svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.atropine_card .card_txt strong,
.disease_card .card_txt strong,
.kit_card .card_txt strong {
    display: block;
    font-family: "Kakao Big Sans";
    font-size: clamp(17px, 1.1458vw, 22px);
    font-weight: 700;
    line-height: 160%;
    letter-spacing: -0.44px;
    color: var(--Primary-700, #5a90bd);
    margin-bottom: clamp(8px, 0.625vw, 12px);
}

.atropine_card .card_txt p,
.disease_card .card_txt p,
.kit_card .card_txt p {
    font-family: "Kakao Big Sans";
    font-size: clamp(14px, 0.9375vw, 18px);
    font-weight: 400;
    line-height: 160%;
    letter-spacing: -0.36px;
    color: var(--grayscale-800, #262626);
}

/* ------- 반응형: 768px ------- */
@media screen and (max-width: 768px) {
    /* 인트로 레이아웃 모바일 */
    .cont_intro {
        flex-direction: column;
    }

    .cont_intro_img {
        width: 100%;
        height: 260px;
    }

    .cont_intro_info {
        width: 100%;
        border-radius: 30px;
        padding: 30px 24px;
        text-align: center;
    }

    .cont_intro_info p {
        font-size: 16px;
    }

    /* 번호 리스트 모바일 */
    .cont_num_layout {
        flex-direction: column;
        gap: 30px;
    }

    .cont_num_img {
        width: 100%;
        height: 260px;
        border-radius: 30px;
    }

    .cont_num_list {
        width: 100%;
        gap: 12px;
    }

    .cont_num_badge {
        width: 44px;
        font-size: 18px;
    }

    .cont_num_item p {
        font-size: 16px;
        padding: 8px 14px;
    }

    /* 정보 카드 모바일 */
    .atropine_cards,
    .disease_cards,
    .kit_cards {
        flex-direction: column;
        gap: 12px;
    }

    .atropine_card,
    .disease_card,
    .kit_card {
        flex-direction: row;
        align-items: center;
        text-align: left;
        padding: 20px;
        gap: 20px;
        border-radius: 12px;
    }

    .atropine_card .card_icon,
    .disease_card .card_icon,
    .kit_card .card_icon {
        width: 60px;
        height: 60px;
    }

    .atropine_card .card_txt strong,
    .disease_card .card_txt strong,
    .kit_card .card_txt strong {
        font-size: 17px;
        margin-bottom: 4px;
    }

    .atropine_card .card_txt p,
    .disease_card .card_txt p,
    .kit_card .card_txt p {
        font-size: 14px;
    }
}