/* --- Service Sub Page: Hero Section --- */
.service-hero-section {
    display: flex;
    width: 100%; 
    flex-direction: column;
    align-items: center;
    background: #FFF;
    /* 1. 헤더에 가리지 않도록 상단 여백 대폭 추가 */
    padding-top: 160px; 
    padding-bottom: 80px;
}
.service-tabs .tab-btn {
    display: flex;
    padding: 12px 24px;
    justify-content: center;
    align-items: center;
    background: #F6F7FB; /* 미선택 배경 (연회색) */
    color: #808791; /* 미선택 글자색 */
    border-radius: 8px;
    transition: all 0.3s ease;
    text-decoration: none;
    font-weight: 500;
}

/* 활성화 상태 (Active) */
.service-tabs .tab-btn.active {
    background: #2C3D5B; /* 네이비 활성색 */
    color: #FFF; /* 흰색 글자 */
}
.service-hero-container {
    display: flex;
    width: 100%; /* max-width 삭제 */
    flex-direction: column;
    align-items: center;
    gap: 40px; /* padding1-9 */
    margin-top: 100px;
}

/* 2. 텍스트 영역: 타이틀과 탭이 "같은 행"에 위치하는 핵심 설정 */
.hero-text-wrap {
    display: flex;
    width: 1560px; /* 내부 가이드 라인 */
    justify-content: space-between; /* 좌측 타이틀 - 우측 탭 양끝 정렬 */
    align-items: flex-end; /* 아래쪽 라인에 맞춰 일직선 배열 */
    flex-wrap: nowrap; /* 줄바꿈 방지하여 강제로 한 줄 유지 */
    padding: 0 20px;
}

/* 왼쪽 컨텐츠 그룹 (브레드크럼 + 타이틀) */
.text-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1; /* 왼쪽 공간 차지 */
}

/* 3. 브레드스크럼 (Breadcrumb) */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px; /* padding1-2 */
    margin-bottom: 24px;
}
.home-icon {
    width: 20px;
    height: 20px;
}
.dot-sep {
    display: flex;
    align-items: center;
}

/* 브레드스크럼 텍스트 (body3) */
.breadcrumb .depth {
    color: #808791;
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.35px;
}
.breadcrumb .current {
    color: #1D212C;
}

/* 메인 타이틀 (display2) */
.sub-hero-title {
    color: #000;
    font-family: 'Pretendard', sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 60px;
    letter-spacing: -1.2px;
}

/* 서브 설명 (body1) */
.sub-hero-desc {
    color: #767676;
    font-family: 'Pretendard', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: -0.45px;
    margin-top: 12px;
}

/* 4. 오른쪽 탭 버튼 영역 (타이틀과 같은 행) */
.service-tabs {
    display: flex;
    align-items: center;
    gap: 12px; /* padding1-3 */
    margin-bottom: 5px; /* 타이틀 바닥선과 시각적으로 맞추기 위한 미세 조정 */
}

.tab-btn {
    display: flex;
    width: 148px;
    padding: 16px; /* padding1-4 */
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    font-family: 'Pretendard', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: -0.4px;
    transition: all 0.3s;
    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
}

/* 활성 상태 */
.tab-btn.active {
    background: #2C3D5B;
    color: #FFF;
}

/* 비활성 상태 */
.tab-btn:not(.active) {
    background: #F6F7FB;
    color: #808791;
}

/* 5. 하단 이미지 영역 */
.hero-image-box {
    width: 100%;
    height: 480px;
    align-self: stretch;
    background: url('../images/sub/service-hero.webp') lightgray 50% / cover no-repeat;
}

/* 모바일/태블릿 반응형 */
@media (max-width: 1600px) {
    .hero-text-wrap {
        width: 100%;
        padding: 0 40px;
    }
}

@media (max-width: 1200px) {
    .hero-text-wrap {
        flex-direction: column; /* 공간 부족 시 세로 배치 */
        align-items: flex-start;
        gap: 40px;
    }
    .service-tabs {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 10px;
    }
}

/* --- Section 2: Educational Content (Point Alignment) --- */
.edu-content-section {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 120px 0;
    background: #FFF;
}

.edu-container {
    display: flex;
    width: 1442px;
    flex-direction: column;
    align-items: center;
}

/* --- 중앙 이미지 호흡 애니메이션 --- */

.edu-center-img img {
    width: 100%;
    height: auto;
    /* 1. 애니메이션 적용: 이름, 지속시간, 가속도, 반복여부 */
    animation: imageBreath 3s ease-in-out infinite; 
    transition: filter 0.3s; /* 호버 시 효과를 위해 추가 */
}

/* 2. 애니메이션 핵심 로직 */
@keyframes imageBreath {
    0% {
        transform: scale(1); /* 기본 크기 */
        filter: drop-shadow(0 0 0px rgba(44, 61, 91, 0));
    }
    50% {
        transform: scale(1.03); /* 3% 정도 미세하게 커짐 */
        /* 미세하게 빛나는 효과(Glow)를 주면 더 '웅웅' 거리는 느낌이 납니다 */
        filter: drop-shadow(0 0 15px rgba(44, 61, 91, 0.2)); 
    }
    100% {
        transform: scale(1); /* 다시 기본 크기로 */
        filter: drop-shadow(0 0 0px rgba(44, 61, 91, 0));
    }
}

/* 마우스 올렸을 때 애니메이션 멈추고 싶다면 (선택사항) */
.edu-center-img:hover img {
    animation-play-state: paused;
}

/* 상단 타이포그래피 */
.edu-top-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
    margin-bottom: 60px;
}

.edu-label {
    color: #2C3D5B; /* Primary-color */
    font-size: 20px; /* headline4 */
    font-weight: 500;
    line-height: 30px;
    letter-spacing: -0.5px;
}

.edu-title {
    color: #1D212C;
    font-size: 40px; /* display3 */
    font-weight: 700;
    line-height: 52px;
    letter-spacing: -1px;
}

.edu-desc {
    color: #808791;
    font-size: 18px; /* body1 */
    font-weight: 400;
    line-height: 28px;
    letter-spacing: -0.45px;
}

/* 비주얼 레이아웃 */
.edu-visual-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.visual-inner {
    position: relative;
    width: 1200px; /* 텍스트 배치를 위한 기준 너비 */
    height: 450px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.edu-center-img {
    width: 390px;
    height: 378px;
}
.edu-center-img img {
    width: 100%;
    height: auto;
}

/* 정밀 배치 아이템 공통 */
.edu-point-item {
    position: absolute;
    width: 380px;
}

.edu-point-item h3 {
    color: #1D212C;
    font-size: 24px; /* headline3 */
    font-weight: 500;
    line-height: 34px;
    letter-spacing: -0.6px;
    margin-bottom: 10px;
}

.edu-point-item p {
    color: #808791;
    font-size: 16px; /* body2 */
    font-weight: 400;
    line-height: 26px;
    letter-spacing: -0.4px;
}

/* --- 지원님 요청 좌표 반영 --- */

/* 1. SEO: 왼쪽 중앙 점 */
.item-seo {
    top: 50%;
    right: 70%; /* 중앙 기준 왼쪽으로 75% */
    transform: translateY(-50%);
    text-align: right;
    padding-right: 20px;
}

/* 2. AEO: 오른쪽 중앙 점 */
.item-aeo {
    top: 50%;
    left: 70%; /* 중앙 기준 오른쪽으로 75% */
    transform: translateY(-50%);
    text-align: left;
    padding-left: 20px;
}

/* 3. GEO: 하단 중앙 점 */
.item-geo {
    bottom: -70px; /* 하단 점 아래로 충분한 여백 */
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 500px;
}

/* 모바일 반응형: 절대 좌표 해제 */
@media (max-width: 1024px) {
    .visual-inner {
        width: 100%;
        height: auto;
        flex-direction: column;
        gap: 60px;
    }
    .edu-point-item {
        position: static;
        width: 100%;
        transform: none;
        text-align: center;
        padding: 0;
    }
}
/* --- Display Control --- */
.mo-only { display: none !important; } /* 기본 숨김 */

/* --- Tablet & Mobile (1024px 이하) --- */
@media (max-width: 1024px) {
    /* PC 레이아웃 숨기기 */
    .pc-only { 
        display: none !important; 
    }

    /* 모바일 전용 이미지 노출 */
    .mo-only { 
        display: block !important; 
        width: 100%;
        margin-top: 40px;
    }

    .edu-mobile-view img {
        width: 100%;
        height: auto;
        display: block;
        /* 필요 시 모바일 이미지에만 부드러운 호흡 애니메이션 추가 가능 */
    }

    /* 컨테이너 및 텍스트 미세 조정 */
    .edu-container {
        width: 100%;
        padding: 0 20px;
    }

    .edu-title {
        font-size: 32px; /* 모바일 가독성 상향 */
        line-height: 1.3;
    }
}

/* --- Section 3: The Tech Stack --- */
.tech-stack-section {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 1040px;
    background: linear-gradient(180deg, #9ABDFF 0%, #72A3FF 100%);
    padding: 100px 0;
    margin-top: 200px;
}

.tech-container {
    display: flex;
    width: 1442px; /* 이전 섹션과 통일감 유지 */
    flex-direction: column;
    align-items: center;
    gap: 60px;
}

/* 상단 텍스트 영역 */
.tech-header {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 20px; /* padding1-5 */
    text-align: center;
}

.tech-sub {
    color: #FFF;
    font-size: 20px; /* headline4 */
    font-weight: 500;
    line-height: 30px;
    letter-spacing: -0.5px;
}

.tech-title {
    color: #FFF;
    font-size: 40px; /* display3 */
    font-weight: 700;
    line-height: 52px;
    letter-spacing: -1px;
}

.tech-desc {
    color: #FFF;
    font-size: 18px; /* body1 */
    font-weight: 400;
    line-height: 28px;
    letter-spacing: -0.45px;
}

/* 카드 그리드 */
.tech-card-grid {
    display: flex;
    gap: 40px;
    justify-content: center;
}

.tech-card {
    display: flex;
    width: 448px;
    padding: 40px; /* padding1-9 */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 52px; /* padding1-11 */
    border-radius: 20px; /* radius1-3 */
    background: #FFF;
    transition: transform 0.3s ease;
}

.tech-card:hover {
    transform: translateY(-10px);
}

/* 포인트 배지 */
.point-badge {
    display: flex;
    width: 140px;
    padding: 12px; /* padding1-3 */
    justify-content: center;
    align-items: center;
    border-radius: 9999px;
    background: #F0F4FD; /* main-Primary-50 */
    color: #2C3D5B; /* Primary-color */
    font-size: 18px; /* headline5 */
    font-weight: 500;
    line-height: 28px;
    letter-spacing: -0.45px;
}

/* 아이콘 박스 */
.tech-icon-box {
    display: flex;
    width: 140px;
    height: 140px;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
}

.tech-icon-box img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* 카드 내부 텍스트 정보 */
.tech-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.tech-info h3 {
    color: #2A2E3B; /* font-Secondary */
    font-size: 24px; /* headline3 */
    font-weight: 500;
    line-height: 34px;
    letter-spacing: -0.6px;
}

.tech-info .eng-title {
    color: #999; /* font-Disabled */
    font-size: 14px; /* body3 */
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.35px;
}

.tech-info p {
    color: #808791; /* font-Thirty */
    font-size: 16px; /* body2 */
    font-weight: 400;
    line-height: 26px;
    letter-spacing: -0.4px;
    margin-top: 12px;
}

/* 반응형 대응 */
@media (max-width: 1440px) {
    .tech-card-grid { flex-wrap: wrap; }
    .tech-card { width: 45%; }
}

@media (max-width: 768px) {
    .tech-card { width: 100%; }
    .tech-title { font-size: 30px; line-height: 1.2; }
}

/* --- Section 4: Process --- */
.process-section {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 160px 0;
    background: #FFF;
}

.process-container {
    display: flex;
    width: 1555px;
    justify-content: space-between;
    align-items: flex-start;
}

/* 좌측 텍스트 영역 */
.process-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px; 
    position: sticky;
    top: 200px;
}

.process-label {
    color: #2C3D5B;
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
    letter-spacing: -0.5px;
}

.process-title {
    color: #1D212C;
    font-size: 40px;
    font-weight: 700;
    line-height: 52px;
    letter-spacing: -1px;
    width: 500px;
}

.process-desc {
    color: #767676;
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: -0.45px;
    width: 480px;
}

/* 우측 카드 리스트 영역 */
.process-right {
    display: flex;
    width: 800px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    flex-shrink: 0;
}

.process-card {
    display: flex;
    padding: 32px; /* 가이드의 padding1-8(32px) 반영 */
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-radius: 12px;
    background: #F6F7FB;
    transition: all 0.5s ease;
    box-sizing: border-box;
}
/* 종 아이콘을 감싸는 박스 영역 */
.service-grid-icon-area {
    display: flex;
    width: 110px; /* 가이드라인 크기 고정 */
    height: 110px;
    padding: 12px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0; /* 크기 줄어듦 방지 */
    box-sizing: border-box;
}

/* 1. 평소 상태 (비활성): 회색 + 크기 키움 */
.process-card .bell-icon img,
.process-card .service-grid-icon-area img {
    /* [수정] 크기를 다시 80~90px 정도로 확실히 키움 */
    width: 85px; 
    height: 85px;
    object-fit: contain;
    
    /* [수정] 회색조 필터 적용 */
    filter: grayscale(1) brightness(0.8);
    opacity: 0.4;
    transition: all 0.3s ease;
}

/* 2. 활성화 상태 (Active): 흰색 + 더 커짐 */
.process-card.active .bell-icon img,
.process-card.active .service-grid-icon-area img {
    opacity: 1;
    /* [수정] 회색 제거 후 흰색 반전 */
    filter: grayscale(0) brightness(0) invert(1);
    /* [수정] 활성화 시 시각적 강조를 위해 살짝 더 키움 */
    transform: scale(1.1); 
}
.card-left-group {
    display: flex;
    align-items: center;
    gap: 32px;
    flex: 1;
}

/* 원형 숫자 배지 */
.step-num {
    display: flex;
    width: 48px;
    height: 48px;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: #9DAABB;
    flex-shrink: 0;
}

.step-num span {
    color: #FFF;
    font-size: 18px;
    font-weight: 500;
}

/* 카드 텍스트 */
.step-text h3 {
    color: #1D212C;
    font-size: 24px;
    font-weight: 500;
    line-height: 34px;
    letter-spacing: -0.6px;
    margin-bottom: 8px;
}

.step-text p {
    color: #808791;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: -0.4px;
}

/* [수정] 종 아이콘 영역 (Service Grid 아이콘) */
.service-grid-icon-area {
    display: flex;
    /* 크기를 110px에서 시각적으로 더 시원하게 유지하거나, 
       내부 아이콘 크기를 키우기 위해 고정 크기 유지 */
    width: 110px;
    height: 110px;
    aspect-ratio: 1 / 1;
    
    /* 가이드라인의 안쪽 여백 반영 */
    padding: 12px;
    
    justify-content: center;
    align-items: center;
    background-color: transparent; /* 평소엔 투명하거나 어두운 톤 */
    border-radius: 8px;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* [수정] 아이콘 이미지 자체 크기 키움 */
.service-grid-icon-area img, 
.service-grid-icon-area svg {
    width: 80%;  /* 기존 대비 아이콘 크기 확장 */
    height: 80%;
    object-fit: contain;
    opacity: 0.3;
    transition: 0.3s;
}

/* --- Active 상태 --- */
.process-card.active {
    background: #2C3D5B;
    box-shadow: 8px 8px 12px 0 rgba(34, 51, 34, 0.20);
}

.process-card.active .step-num {
    background: #FFF;
}

.process-card.active .step-num span {
    color: #2C3D5B;
}

.process-card.active .step-text h3,
.process-card.active .step-text p {
    color: #FFF;
}

/* Active 시 아이콘 강조 */
.process-card.active .service-grid-icon-area img,
.process-card.active .service-grid-icon-area svg {
    opacity: 1;
    filter: brightness(0) invert(1); /* 흰색으로 반전 */
    transform: scale(1.1); /* 살짝 커지는 효과 추가 */
}

/* --- Media Queries --- */

/* 1. 데스크탑 (1555px 미만): 컨테이너 너비를 유연하게 조절 */
@media screen and (max-width: 1555px) {
    .process-container {
        width: 90%;
        gap: 40px;
    }
    .process-left, .process-right {
        width: auto;
    }
}

/* 2. 태블릿 (1024px 이하): 좌우 배치를 상하 배치로 전환 */
@media screen and (max-width: 1024px) {
    .process-section {
        padding: 100px 0;
    }
    .process-container {
        flex-direction: column;
        align-items: center;
        gap: 60px;
    }
    .process-left {
        position: static; /* sticky 해제 */
        align-items: center;
        text-align: center;
    }
    .process-title, .process-desc {
        width: 100%;
        max-width: 600px;
    }
    .process-right {
        width: 100%;
        max-width: 700px;
    }
}

/* 3. 모바일 (768px 이하): 요소 크기 축소 */


@media screen and (max-width: 768px) {
    .service-tabs {
        display: flex;
        flex-wrap: wrap; /* 줄바꿈 허용 */
        justify-content: center; /* 중앙 정렬 */
        gap: 8px; /* 버튼 사이 간격 */
    }

    .service-tabs .tab-btn {
        /* 첫 줄 2개를 위해 약 48% 설정 (간격 고려) */
        width: calc(50% - 8px); 
        padding: 12px 0;
        text-align: center;
    }

    /* 3번째 버튼부터(둘째 줄)는 너비를 31% 정도로 줄여서 3개가 들어가도록 함 */
    .service-tabs .tab-btn:nth-child(n+3) {
        width: calc(33.33% - 8px);
    }
    .process-section {
        padding: 60px 20px;
    }
    .process-title {
        font-size: 32px;
        line-height: 42px;
    }
    .process-card {
        padding: 20px;
        gap: 15px;
    }
    .card-left-group {
        gap: 16px;
    }
    .step-num {
        width: 40px;
        height: 40px;
    }
    /* 종 아이콘 영역 모바일 최적화 */
    .service-grid-icon-area {
        width: 80px;
        height: 80px;
    }
}

/* 4. 초소형 모바일 (480px 이하): 카드 내부 레이아웃 조정 */
@media screen and (max-width: 480px) {
    .process-card {
        flex-direction: column; /* 카드 안의 아이콘도 아래로 배치 */
        align-items: flex-start;
    }
    .service-grid-icon-area {
        align-self: flex-end; /* 아이콘만 우측 하단 배치 */
        margin-top: -20px;
    }
    .step-text h3 {
        font-size: 20px;
    }
}
/* --- Section 5: CTA --- */
.cta-section {
    display: flex;
    justify-content: center;
    padding: 100px 0 160px; /* 상단 여백은 디자인에 따라 조정 */
    background: #FFF;
}

.cta-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 1560px;
    height: 340px;
    border-radius: 20px;
    /* 배경 이미지 설정 */
    background: url('../images/sub/cta.webp') lightgray 50% / cover no-repeat, #D9D9D9;
    text-align: center;
    gap: 32px; /* 제목, 설명, 버튼 사이의 간격 */
}

/* 텍스트 그룹 (제목 + 설명) */
.cta-text-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cta-title {
    color: #FFF;
    font-family: 'Pretendard', sans-serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 52px;
    letter-spacing: -1px;
}

.cta-desc {
    color: #FFF;
    font-family: 'Pretendard', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: -0.45px;
}

/* 버튼 스타일 */
.cta-button {
    display: flex;
    padding: 16px 24px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 4px;
    background: #FFF;
    cursor: pointer;
    border: none;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.cta-button:hover {
    background-color: #f8f8f8;
    transform: translateY(-2px);
}

.cta-button span {
    color: #1D212C;
    font-family: 'Pretendard', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: -0.4px;
}

/* --- Media Queries --- */

/* 1. 데스크탑 (1600px 미만) */
@media screen and (max-width: 1600px) {
    .cta-container {
        width: 90%; /* 화면 양옆 여백 확보 */
    }
}

/* 2. 태블릿 (1024px 이하) */
@media screen and (max-width: 1024px) {
    .cta-section {
        padding: 80px 0 120px;
    }
    .cta-container {
        height: auto;
        padding: 60px 40px; /* 높이 대신 패딩으로 공간 확보 */
    }
    .cta-title {
        font-size: 32px;
        line-height: 42px;
    }
}

/* 3. 모바일 (768px 이하) */
@media screen and (max-width: 768px) {
    .cta-section {
        padding: 60px 20px 100px;
    }
    .cta-container {
        width: 100%;
        border-radius: 12px; /* 모바일에서는 곡률을 살짝 줄임 */
        gap: 24px;
        padding: 50px 20px;
    }
    .cta-title {
        font-size: 26px;
        line-height: 36px;
        word-break: keep-all; /* 한글 단어 단위 끊김 방지 */
    }
    .cta-desc {
        font-size: 16px;
        line-height: 24px;
        word-break: keep-all;
    }
}

/* 4. 초소형 모바일 (480px 이하) */
@media screen and (max-width: 480px) {
    .cta-button {
        width: 100%; /* 버튼을 가로로 꽉 채움 */
        padding: 14px 20px;
    }
}

/* 부모 그리드 컨테이너 */
.edu-image-grid {
    display: flex;
    align-items: center;
    gap: 24px; /* var(--padding1-6, 24px) */
    justify-content: center;
    align-self: stretch;
    width: 100%;
    margin-top: 60px; /* 상단 텍스트와의 간격 */
}

/* 개별 이미지 아이템 (좌우 동일) */
.edu-img-item {
    display: flex;
    width: 768px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

/* 이미지 박스 (그림자 및 라운드 처리는 첨부 이미지 참고) */
.edu-img-item .img-box {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.edu-img-item .img-box img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* 이미지 하단 텍스트 그룹 */
.edu-img-item .img-text-group {
    padding: 10px 0;
}

.edu-img-item .img-text-group h3 {
    color: #1D212C;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
}

.edu-img-item .img-text-group p {
    color: #767676;
    font-size: 16px;
    line-height: 1.6;
    word-break: keep-all;
}

/* 반응형: 1560px 이하일 때 이미지 크기 조절 */
@media screen and (max-width: 1560px) {
    .edu-img-item {
        width: calc(50% - 12px);
    }
}

/* 반응형: 모바일에서는 세로로 배치 */
@media screen and (max-width: 1024px) {
    .edu-image-grid {
        flex-direction: column;
    }
    .edu-img-item {
        width: 100%;
        max-width: 600px;
    }
}