.top-intro-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px 40px; /* 상단 여백 확보 */
    text-align: center;
    font-family: 'Pretendard', sans-serif;
    border-bottom: 1px solid #eee; /* 하단 구분선 (선택사항) */
}

.intro-desc {
    font-size: 28px;
    line-height: 1.6;
    color: #555;
    margin-bottom: 30px;
    word-break: keep-all;
}

.intro-main-copy {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap; /* 모바일 줄바꿈 대응 */
    gap: 8px;
    font-size: 30px;
    font-weight: 700;
    color: #333;
    margin-top: 170px;
}

.inline-logo {
    height: 110px; /* 텍스트 높이와 비슷하게 맞춤 */
    width: auto;
    vertical-align: middle;
    transform: translateY(-2px); /* 시각적 중심 보정 */
}

.intro-desc strong {
    color: #8bbf3d; /* 브랜드 컬러 강조 */
    font-weight: 700;
}

.rb-container {
    max-width: 1200px;
    margin: 50px auto;
    font-family: 'Pretendard', sans-serif;
    position: relative;
    padding-top: 180px;
    padding-bottom: 80px; /* 하단 여백 더 확보 */
}

.rb-header {
    position: absolute;
    top: 0; left: 50%; transform: translateX(-50%);
    z-index: 10; text-align: center;
}
.rb-logo-circle {
    width: 180px; height: 100px;
    background: radial-gradient(circle, rgba(139,191,61,0.15) 0%, rgba(255,255,255,0) 70%);
    display: flex; align-items: center; justify-content: center;
}
.rb-logo-circle img { width: 350px; }

.rb-line-system {
    position: absolute; top: 100px; left: 16%; right: 16%; height: 80px;
    border: 1px solid #8bbf3d; border-bottom: none; z-index: 1;
}
.rb-line-center {
    position: absolute; top: 100px; left: 50%; width: 1px; height: 80px; background: #8bbf3d;
}

.rb-content { display: flex; justify-content: space-between; position: relative; z-index: 5; }

.rb-column {
    width: 32%;
    display: flex; flex-direction: column; align-items: center;
    position: relative;
}

.rb-row { 
    display: flex; gap: 10px; width: 100%; 
    justify-content: center; margin-top: 10px; 
}

.item-group { 
    flex: 1; display: flex; flex-direction: column; align-items: center;
    max-width: calc(50% - 5px); width: 100%; position: relative;
}

.box {
    width: 100%; height: 55px;
    display: flex; align-items: center; justify-content: center;
    text-align: center; font-size: 14px; border-radius: 2px; box-sizing: border-box;
}
.box.white { border: 1px solid #ddd; background: #fff; font-weight: 700; font-size: 16px; margin-bottom: 5px; width: 100%; }

.rb-column:nth-child(2) .box.white {
    max-width: calc(50% - 5px); 
    margin-left: auto; margin-right: auto;
}
.box.green { background: #8bbf3d; color: #fff; font-weight: 500; padding: 0 5px; }

.img-box {
    width: 100%; aspect-ratio: 1 / 1;
    background: #f8f8f8; border: 1px solid #eee;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.img-box img { width: 90%; height: 90%; object-fit: contain; }

.info-box {
    width: 100%; background: #f0f0f0; padding: 12px 0;
    text-align: center; margin-top: 5px; min-height: 50px;
    display: flex; flex-direction: column; justify-content: center;
}
.info-box p { margin: 0; font-size: 14px; font-weight: 600; color: #333; line-height: 1.3; }
.info-box span { font-size: 12px; font-weight: 400; color: #666; }

.dot { 
    width: 6px; height: 6px; background: #8bbf3d; 
    border-radius: 50%; position: absolute; top: -4px; z-index: 10;
}

/* =========================================
    ★ [수정됨] 하위 뎁스 (Sub Tree) 스타일 확장
    ========================================= */

.sub-tree-wrap {
    /* 너비를 더 크게 늘림 (기존 240% -> 320%) */
    width: 320%; 
    position: relative;
    padding-top: 45px; /* 수직 연결선 길이 확보 */
    margin-top: 0px; 
}

/* 수직 연결선 길게 */
.sub-connector-v {
    position: absolute;
    /* 위치 조정: 상단 박스와 하단 수평선 사이 중앙 쯤에 배치 */
    top: 30px; 
    left: 50%;
    transform: translateX(-50%); /* 정확한 가로 중앙 정렬 */
    
    /* 기존 선(Line) 스타일 제거 및 텍스트 박스화 */
    width: auto; 
    height: auto;
    background: #fff; /* 배경 흰색 (선 뒤를 가리기 위해) */
    
    /* 텍스트 스타일 */
    color: #8bbf3d; /* 브랜드 컬러 */
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    
    /* 뱃지 모양 (선택사항 - 테두리 둥글게) */
    border: 1px solid #8bbf3d;
    padding: 5px 12px;
    border-radius: 20px;
    
    z-index: 2; /* 선들보다 위에 오도록 설정 */
}

/* 수평 연결선 */
.sub-connector-h {
    position: absolute;
    top: 105px; /* 수직선이 끝나는 지점 */
    left: 0%; right: 0%; 
    height: 2px;
    background: #8bbf3d;
    z-index: 1;
}

/* 아이템 간격 넓힘 */
.sub-item-row {
    display: flex;
    justify-content: space-between;
    gap: 20px; /* 간격 8px -> 20px로 확대 */
    width: 130%;
    margin-left: -90px;
    margin-top: 50px;
}

.sub-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin-top: 25px; /* 선과의 간격 */
}

.sub-item::before {
    content: '';
    display: block;
    width: 2px; height: 15px; /* 위쪽 꼬다리 선 */
    background: #8bbf3d;
    position: absolute;
    top: -15px; /* 박스 바로 위 */
    left: 50%;
    transform: translateX(-50%);
}

/* 서브 이미지 박스 크기 확대 */
.sub-img-box {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #fff;
    border: 2px solid #8bbf3d;
    border-radius: 20%;
    display: flex; 
    align-items: center; 
    justify-content: center;
    margin-bottom: 10px;
    overflow: hidden; /* 이미지가 원 밖으로 나가지 않게 자름 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* 이미지 스타일 (꽉 채우기) */
.sub-img-box img {
    width: 100%;       /* 너비 100% */
    height: 100%;      /* 높이 100% */
    object-fit: fill; /* 비율을 유지하며 빈 공간 없이 가득 채움 (넘치면 잘림) */
    display: block;    /* 이미지 하단 미세 여백 제거 */
    border-radius: 20%;
}

/* 텍스트 크기 확대 */
.sub-text {
    font-size: 15px; /* 13px -> 15px */
    font-weight: 700;
    color: #333;
    text-align: center;
    background: #f4f9ed;
    width: 100%;
    padding: 8px 0; /* 패딩 증가 */
    border-radius: 6px;
}

/* =========================================
    [★ 반응형 - 태블릿 & 모바일]
    ========================================= */
@media screen and (max-width: 1024px) {
    /* 컨테이너 및 헤더 조정 */
    .rb-container {
        padding-top: 140px; /* 로고 공간 축소 */
        padding-left: 20px;
        padding-right: 20px;
    }

    .intro-desc { font-size: 20px; margin-bottom: 10px; }
    .intro-main-copy { font-size: 18px; margin-top: 80px; } /* 로고와 텍스트 줄바꿈 */
    .inline-logo { height: 100px; }
    /* 복잡한 연결선(Bracket) 숨기기 */
    .rb-line-system, .rb-line-center, .dot {
        display: none;
    }

    /* 3단 컬럼 -> 1단 세로 배치 */
    .rb-content {
        flex-direction: column;
        gap: 40px;
    }

    .rb-column {
        width: 100%; /* 가로 꽉 채움 */
    }

    /* 중앙 컬럼 흰색 박스 너비 제한 해제 */
    .rb-column:nth-child(2) .box.white {
        max-width: none;
        width: 100%;
    }

    /* 아이템 그룹 */
    .item-group {
        /* 모바일에서도 좌우 컬럼 아이템 2개 나란히 보기 위해 유지 */
        /* 만약 너무 좁으면 width: 100%로 변경하세요 */
    }
    
    /* 중앙 컬럼의 치료제(메인 아이템)는 하나뿐이므로 너비 조정 */
    .rb-column:nth-child(2) .item-group {
        max-width: 60%; /* 너무 커지는 것 방지 */
    }

    /* --- 하위 뎁스(서브 트리) 반응형 리셋 --- */
    .sub-tree-wrap {
        width: 100%; /* 320% -> 100% 리셋 */
        margin-left: 0; /* 중앙 정렬 좌표 리셋 */
        padding-top: 30px;
        margin-top: 30px;
    }

    /* 복잡한 연결선 숨김 (모바일엔 단순하게) */
    .sub-connector-h, .sub-connector-v, .sub-item::before {
        display: none;
    }

    /* 서브 아이템 나열 */
    .sub-item-row {
        flex-wrap: wrap; /* 줄바꿈 허용 */
        gap: 10px;
    }
    
    .sub-item {
        /* 한 줄에 4개 유지 (화면이 너무 작으면 2개로 변경 가능) */
        flex: 0 0 calc(25% - 10px); 
        margin-top: 0;
    }

    .sub-text {
        font-size: 12px;
        padding: 5px 0;
    }
    .sub-img-box {
        border-width: 1px;
    }
}

/* =========================================
    [★ 반응형 - 모바일 (작은 화면)]
    ========================================= */
@media screen and (max-width: 600px) {
    .rb-header { top: -20px; } /* 로고 위치 미세 조정 */
    .rb-logo-circle { transform: scale(0.8); } /* 로고 크기 축소 */

    .rb-column:nth-child(2) .item-group {
        max-width: 80%; /* 모바일에서 조금 더 크게 */
    }

    /* 하위 뎁스 아이템: 한 줄에 2개씩 배치 (2x2) */
    .sub-item {
        flex: 0 0 calc(50% - 10px); 
        margin-bottom: 10px;
    }
    .sub-item-row {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        width: 100%;
        margin-left: 0px;
    }
}

/* ==================================================================================================== */
/* ==================================================================================================== */
/* ==================================================================================================== */
/* ==================================================================================================== */
/* ==================================================================================================== */


/* =========================================
       [신규 추가] ReBornStem 프로세스 섹션 스타일
       ========================================= */
    .rb-process-section {
        max-width: 1200px;
        margin: 0 auto 100px; /* 하단 여백 */
        padding: 0 20px;
        font-family: 'Pretendard', sans-serif;
        box-sizing: border-box;
    }

    /* 1. 헤더 영역 (로고 + 설명) */
    .proc-header {
        margin-bottom: 60px;
        text-align: left; /* 이미지 기준 좌측 정렬 */
    }

    .proc-logo {
        width: 180px;
        margin-bottom: 20px;
        display: block;
    }

    .proc-desc {
        font-size: 20px;
        font-weight: 600;
        color: #222;
        line-height: 1.5;
        word-break: keep-all;
    }

    /* 2. 프로세스 흐름도 (Flex) */
    .proc-flow-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center; /* 수직 중앙 정렬 */
        position: relative;
        padding: 20px 0;
    }

    /* 개별 단계 아이템 */
    .proc-step {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        max-width: 300px;
    }

    .proc-img {
        width: 100%;
        max-width: 220px; /* 이미지 최대 크기 제한 */
        height: auto;
        object-fit: contain;
        margin-bottom: 20px;
        /* 이미지가 없을 때 영역 확보용 (임시) */
        min-height: 150px; 
        display: flex; align-items: center; justify-content: center;
    }
    
    .proc-img img { width: 100%; }

    /* 텍스트 스타일 */
    .proc-title {
        font-size: 20px;
        font-weight: 800;
        color: #000;
        margin-bottom: 10px;
    }

    .proc-sub {
        font-size: 14px;
        color: #555;
        line-height: 1.4;
        font-weight: 500;
        word-break: keep-all;
    }

    /* 3. 화살표 (CSS로 구현) */
    .proc-arrow {
        flex: 0 0 100px; /* 화살표 너비 고정 */
        height: 100px;
        margin: 0 20px;
        /* 배경: 왼쪽(연함) -> 오른쪽(진함) 그라데이션 */
        background: linear-gradient(to right, #e8f3d3, #a9d16a);
        /* 화살표 모양 깎기 */
        clip-path: polygon(0% 20%, 75% 20%, 75% 0%, 100% 50%, 75% 100%, 75% 80%, 0% 80%);
        /* 모바일 등에서 줄어들지 않도록 설정 */
    }

    /* =========================================
       [반응형] 태블릿 & 모바일
       ========================================= */
    @media screen and (max-width: 1024px) {
        .proc-desc { font-size: 18px; }
        .proc-arrow { flex: 0 0 60px; height: 40px; margin: 0 10px; }
        .proc-step { max-width: none; }
    }

    @media screen and (max-width: 768px) {
        .rb-process-section { margin-bottom: 60px; }
        
        .proc-flow-wrap {
            flex-direction: column; /* 세로 배치 */
            gap: 20px;
        }

        .proc-arrow {
            width: 40px; height: 40px;
            transform: rotate(90deg); /* 아래로 회전 */
            margin: 10px 0;
            background: linear-gradient(to bottom, #e8f3d3, #a9d16a); /* 그라데이션 방향 수정 */
        }
        
        .proc-desc { font-size: 16px; }
        .proc-img { max-width: 180px; min-height: auto; }
    }