.bar.before{height:calc(320px * 0.15);}
	.brain_section1{    
		background-image: linear-gradient(-45deg, #071e25, #414141, #071e25);
    background-size: 400% 400%;
    animation: colorChange 3s ease infinite;
	}

.hanyack_sun_box{    
margin-top: 70px;
}



	.brain_box{
    position: relative;
    margin: 0 auto;
    padding-top: 50px;
	}
	
	.brain_box h2{
		    text-align: center;
   			 font-size: 43px;
   			 line-height: 1.3;
    		font-weight: 700;
			color:#fff;
	}
	
	.brain_box h3{
	    font-size: 25px;
    text-align: center;
    font-weight: 500;
   	color:#fff;
    padding: 20px 0px 40px;
}
	
.byunbi-list{
padding-top:20px
padding-bottom: 0px;
}


.byunbi-list h2{
margin-bottom: 0px;

} /*     margin-top: 40px; */

@media screen and (max-width: 768px) {
.byunbi-list h2 {
       font-size: 27px;
    }
}

@media (min-width: 200px) and (max-width: 376px) {
    
.byunbi-list h2 {
       font-size: 24px;
    }
}


.byun_box{
padding-bottom:0px; 
}

.byun_box h2{   
color: #fff;
}

.byun_box h3{   
color: #fff;
}


/* 장뇌 축이란? 박스 */
        #definition-box {
   border-radius: 20px;
    text-align: center;
max-width: 700px;
margin: 0 auto;
margin-top:30px;
    border: 2px solid #f0f5fa;
        }

        .definition-title {
            font-size: 23px;
    font-weight: 700;
    color: #1e3a45;
    padding: 10px;
    background: #f0f5fa;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
        }

        .definition-desc {
           font-size: 18px;
    color: #4a5568;
    line-height: 1.6;
    word-break: keep-all;
    font-weight: 600;
    padding: 20px;
}
	
	
	
/* 미주신경 */
	
	.vagus_box{
    position: relative;
    margin-top: 20px;
    margin-bottom: 20px;
	}
	
        .vagus-title-wrap {
            text-align: center;
            margin-bottom: 30px;
        }

  .vagus-main-title{ 
	      font-size: 40px;
  }



 /* 증상 리스트 레이아웃 (좌측 이미지, 우측 리스트) */

.jayulsin_content {
    display: flex;
    flex-direction: row;        /* 데스크톱에서는 좌우 배치 */
    justify-content: center;
    align-items: center;
    gap: 40px;                  /* 이미지와 카드 사이의 여백 */
	max-width: 700px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}






/* 2. 이미지 감싸는 상자: 고정 가로값을 빼고 반응형 유연성 확보 */
.image-placeholder-2 {
    position: relative;
    width: 100%;
    max-width: 450px;           /* 최대 크기 제한 */
    display: flex;
    justify-content: center;
	flex: 1;
}

.image-placeholder-2 img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* 3. 우측 증상 카드 상자: absolute 제거 및 반응형 너비 설정 */
#symptom-card {
    border: 3px solid #5bc68d;
    border-radius: 15px;
    padding: 25px 30px;
    background-color: #effbf2;
   max-width: 700px;
    box-sizing: border-box;
    flex: 1;
}

/* 4. 증상 아이템 내부 텍스트 폰트 유연화 */
.symptom-item {
    margin-bottom: 18px;
}

.symptom-item:last-child {
    margin-bottom: 0;
}

.symptom-name {
    font-size: 20px;
    font-weight: 700;
    color: #0b6535;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
}

.symptom-name::before {
    content: '';
    display: inline-block;
    width: 100%;
    max-width: 10px;
    height: 10px;
    background-color: #5bc68d;
    border-radius: 50%;
    margin-right: 8px;
    flex-shrink: 0;             /* 화면 줄어들 때 점이 찌그러지지 않게 방지 */
}

.symptom-detail {
    font-size: 17px;            /* 가독성을 위해 살짝 조절 */
    color: #666666;
    padding-left: 18px;
    line-height: 1.4;
    word-break: keep-all;       /* 한글 단어 단위 줄바꿈으로 깔끔하게 조정 */
}

/* 5. 깜빡이는 장-뇌 축 하이라이트 위치 최적화 */
.highlight {
    position: absolute;
    border-radius: 50%;
    animation: blink 2s infinite;
}

/* 비율 유지를 위해 % 단위 혹은 이미지 내부 기준 배치가 권장되나, 
   기존 코드의 레이아웃 유지를 위해 %, em 등 유연한 포지셔닝 적용 가능 */
.highlight.brain {
    top: 5%;
    left: 70%;
    width: 22%;
    height: 18%;
    background-color: rgb(255 0 0 / 41%);
    filter: blur(15px);
}

.highlight.gut {	
    top: 53%;
    left: 30%;
    width: 40%;
    height: 32%;
    background-color: rgb(255 0 0 / 41%);
    filter: blur(15px);
}

@keyframes blink {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}	


/* ==========================================================================
   모바일 및 태블릿 미디어 쿼리 (화면이 작아질 때 적용)
   ========================================================================== */

@media (min-width: 1024px) and (max-width: 1280px) {
#symptom-card{
width:100%;
}
}

@media screen and (max-width: 991px) {
.jayulsin_content {
	flex-direction: column;
        gap: 25px;
        padding: 15px;
    } /*         */
    
    /* 모바일 화면에서 일러스트 이미지를 50% 크기로 축소 */
    .image-placeholder-2 {
        max-width: 250px;        /* 데스크톱(450px)의 약 50%대인 250px로 고정 제한 */
        width: 55%;              /* 모바일 가로 화면 비율 기준으로도 약 절반만 차지하도록 설정 */
        margin: 0 auto;          /* 중앙 정렬 */
    }

    .image-placeholder-2 img {
        width: 100%;
        height: auto;
    }
    
    /* 3. 아래 증상 카드는 모바일 화면에서 보기 편하게 적당히 넓혀줌 */
    #symptom-card {
        width: 100%;
        margin: 0 auto;
    }

    /* 4. 모바일 텍스트 타이틀 크기 조정 */
    .vagus-main-title {
        font-size: 28px;         
        line-height: 1.4;
    }

}

@media screen and (max-width: 480px) {
.image-placeholder-2 {
        max-width: 200px;        /* 무대뽀로 커지는 걸 막기 위해 더 작게 제한 */
        width: 60%;
    }
    #symptom-card {
        padding: 20px 18px;      
    }
    .symptom-name {
        font-size: 18px;
    }
    .symptom-detail {
        font-size: 15px;
    }

#jayul_gyogam .jg-list li{
text-align:left;

 }
}


	
/* 교감신경 부교감 신경*/	
.chogam{
max-width: 700px;
    margin: 0 auto;
}

#jg-sub-title {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    background: #eff6fe;
    margin:20px;
    padding: 15px 20px;
    border-radius: 10px;
    max-width: 1200px;
    line-height: 1.5;
    word-break: keep-all; 
margin-bottom: 40px;
}

/* 2. 메인 컨테이너 */
#jayul_gyogam {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

/* 3. 유연한 레이아웃 구조 설계 */
#jayul_gyogam .jg-content {
    display: flex;
    position: relative;
    align-items: stretch; /* 데스크톱에서 좌우 카드 높이를 동일하게 맞춤 */
}

/* 좌우 카드 공통 스타일 */
#jayul_gyogam .jg-card {
    flex: 1;
    border-radius: 12px;
    padding: 35px 25px;
    text-align: center;
    color: #ffffff;
    box-sizing: border-box;
}

#jayul_gyogam .jg-sympathetic { background-color: #9e2316; }
#jayul_gyogam .jg-parasympathetic { background-color: #e53935; }

#jayul_gyogam .jg-card-title {
    font-size: 25px;
    font-weight: bold;
    margin: 0 0 20px 0;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

#jayul_gyogam .jg-list {
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 12px;
    text-align: center;
    max-width: 380px;
    margin: 0 auto;
display: flex;
    flex-direction: column;
} /*    text-align: left; display: flex;  grid-template-columns: repeat(2, 1fr); /* [기능 개선] 데스크톱에서 가독성을 위해 2열 배치  */

#jayul_gyogam .jg-list li {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.5px;
    align-items: center;
} /*    display: flex;  */

/* 리스트 앞에 깔끔한 도트 포인트 추가 */
#jayul_gyogam .jg-list li::before {
    content: '•';
    margin-right: 8px;
    opacity: 0.7;
}

/* 4. 중앙 배지 영역 (데스크톱 기본 설정) */
#jayul_gyogam .jg-badges {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 10;
}

#jayul_gyogam .jg-badge {
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

#jayul_gyogam .badge-balance {
    background-color: #ffffff;
    color: #111111;
    border: 1px solid #dddddd;
}

#jayul_gyogam .badge-imbalance {
    background-color: #37474f;
    color: #ffffff;
}

#jayul_gyogam .jg-footer {
    text-align: center;
    margin-top: 30px;
    color: #666666;
    font-size: 18px;
    font-weight: 500;
}


/* ==========================================================================
   모바일 및 태블릿 미디어 쿼리 (화면 축소 시 자동 적용)
   ========================================================================== */
@media screen and (max-width: 1024px) {
    /* 1024px 이하가 되면 중앙 배지 공간이 부족해지므로 레이아웃 조기 안전 전환 */
    #jayul_gyogam .jg-content {

       
    } /*       flex-direction: column; 
        align-items: center;  gap: 15px;*/

    #jayul_gyogam .jg-card {
        width: 100%;
        max-width: 600px; /* 모바일에서 보기 쾌적한 카드 너비 제한 */
        padding: 25px 20px;
    }

    /* 리스트를 모바일 환경에 맞춰 깔끔하게 정렬 */
    #jayul_gyogam .jg-list {
		display: flex;
        flex-direction: column;
        grid-template-columns: none; /* 기존 그리드 무력화 */
        max-width: none;            /* 너비 제한 해제 */
        width: fit-content;         /* 내용물 길이만큼만 공간을 차지하게 하여 중앙 정렬 유도 */
        margin: 0 auto;             /* 리스트 상자 자체를 카드 중앙으로 */
        text-align: left;           /* 내부 글자들은 왼쪽 정렬로 나란히 맞춤 */
        gap: 12px;
    }

    /*  핵심: absolute를 해제하고 두 카드 사이로 자연스럽게 정렬되도록 조정 */
    #jayul_gyogam .jg-badges {
        position: relative;
        left: 0;
        top: 0;
        transform: none;
        flex-direction: row; /* 세로가 아닌 가로 나열로 변경해 세로 길이 축소 */
        justify-content: center;
        gap: 10px;
        width: 100%;
        margin: 0 0 15px;
    }

    #jayul_gyogam .jg-badge {
        font-size: 20px;
    padding: 8px 20px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }

#jayul_gyogam .jg-list li {
font-size: 20px;
}

}

@media screen and (max-width: 600px) {

    #jg-sub-title { font-size: 16px; padding: 12px 15px; }
    
    #jayul_gyogam .jg-card-title { font-size: 20px; }
    #jayul_gyogam .jg-list {
       /* 더 작은 모바일 기기에서는 1열 순차 배치  grid-template-columns: 1fr;  */
        max-width: 200px;
		gap: 5px;
    }
    #jayul_gyogam .jg-list li {
font-size: 17px;       
text-align: left;
white-space: nowrap;}
 
    
    /* 폰 폭이 좁은 곳에서는 배지가 떨어지지 않고 한 줄에 잘 들어가게 Wrap 허용 */
    #jayul_gyogam .jg-badges {
        justify-content: left;
        margin: 0 0 20px;
        flex-wrap: wrap;
        gap: 8px;
        font-size: 15px;
 flex-direction: column;

    } /*        flex-wrap: wrap;*/
}




	
/* 뇌질환 치료 */
#brain_chiro{
	background-image: linear-gradient(-45deg, #071e25, #414141, #071e25);
    background-size: 400% 400%;
    animation: colorChange 3s ease infinite;
}
	
/* 뇌질환 한약 */
/* ==========================================================================
   뇌호장탕 맞춤 발효 한약 섹션 - 배경 이미지 반응형 레이아웃
   ========================================================================== */

/* 1. PC 기본 스타일 (화면 폭 769px 이상일 때 적용) */
#brain_hanyack {
      width: 100%;
    max-width: 1000px;
    height: 450px;
    margin: 0 auto;
    background-image: url(https://byun60072.godomall.com/data/skin/front/pure/img/byunhom/jayulsin/hanyack_brain.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #ffffff;
    position: relative;
    box-sizing: border-box;

}

/* PC: 뇌호장탕 텍스트 박스 위치 (좌측 정렬) */
#brain_hanyack .brainhan_list {
    position: absolute;
    text-align: left;
    left: 180px;
    top: 100px;
}

/* PC 텍스트 스타일 세부 조정 */
#brain_hanyack .brainhan_list h2 {
    font-size: 34px;
    font-weight: 700;
    color: #1c2a38;
    margin: 0 0 12px 0;
    letter-spacing: -1px;
}

#brain_hanyack .brainhan_list p {
    font-size: 19px;
    color: #4a5568;
    margin: 0 0 30px 0;
    font-weight: 500;
}

#brain_hanyack .brainhan_list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#brain_hanyack .brainhan_list ul li {
    font-size: 16px;
    color: #555555;
    position: relative;
    padding-left: 18px;
    margin-bottom: 10px;
    font-weight: 500;
}

/* 리스트 스타일 커스텀 점(•) */
#brain_hanyack .brainhan_list ul li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    color: #555555;
    font-weight: bold;
}


/* 2. 모바일 스타일 (화면 폭 768px 이하일 때 전환) */
@media screen and (max-width: 768px) {
    #brain_hanyack {
        max-width: 100%;
        /* 모바일 이미지 원본 비율(가로세로 거의 1:1에 가까운 스퀘어 비율)을 고려한 고정 높이 확보 */
        height: 0;
        padding-bottom: 95%;                /* 세로 가로 비율 유지 기법으로 깨짐 방지 */
        margin: 25px auto 0 auto;
        
        /* 모바일 전용 배경 이미지로 교체 */
        background-image: url('https://byun60072.godomall.com/data/skin/front/pure/img/byunhom/jayulsin/mhanyack_brain.jpg');
        background-position: bottom center;   /* 이미지는 아래쪽을 기준으로 배치 */
        background-size: 100% auto;
    }

    /* 모바일: 뇌호장탕 텍스트 박스를 이미지 우측 상단 여백으로 절대 배치 */
  #brain_hanyack .brainhan_list {
	position: absolute;
        top: 3%;
        right: 5%;
        left: auto;
        transform: none;
        padding: 10px 20px;
        background: #ffffffad;
        border-radius: 10px;
        box-shadow: rgb(0 0 0 / 11%) 0px 4px 8px;
    }

    #brain_hanyack .brainhan_list h2 { font-size: 30px; }
    #brain_hanyack .brainhan_list p {         font-size: 16px; }
    #brain_hanyack .brainhan_list ul li { font-size: 15px; }



}



@media screen and (max-width: 430px) {   
#brain_hanyack .brainhan_list h2 {
        font-size: 24px;
        margin-bottom: 6px;
    }

    #brain_hanyack .brainhan_list p {
        font-size: 14px;
        margin-bottom: 15px;
        line-height: 1.3;
    }

    #brain_hanyack .brainhan_list ul li {
        font-size: 13px;
        margin-bottom: 5px;
        padding-left: 12px;
    }
}





/* 뇌질환 3가지 영양 산소 자극 */	
.brain_3dan-container {
    max-width: 700px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* 3단 타이틀 스타일 최적화 (PC 기준) */
.brain_3dan-title {
    text-align: center;
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 40px;
    color: #333333;
    line-height: 1.4;
    letter-spacing: -1px;
    word-break: keep-all; /* 한글 단어 단위 자동 줄바꿈으로 깔끔하게 마감 */
}

.brain_3dan-title span {
    color: #00a37b;
}

/* 3단 그리드 시스템 설계 */
.brain_3dan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* PC에서는 가로로 3개 배치 */
    gap: 25px; /* 기본 여백보다 살짝 넓혀 답답함 해소 */
}

/* 개별 카드 공통 디자인 */
#brain_dan1, #brain_dan2, #brain_dan3 {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(0,0,0,0.06); /* 부드러운 그림자 효과로 고급화 */
    background-color: #ffffff;
    position: relative; 
    display: flex;
    flex-direction: column; /* 헤더와 이미지를 수직 정렬 */
}

/* 카드 상단 헤더 개별 컬러 매칭 */
#brain_dan1 .brain_3dan-header { background-color: #1cb375; }
#brain_dan2 .brain_3dan-header { background-color: #37a678; }
#brain_dan3 .brain_3dan-header { background-color: #198e5e; }

.brain_3dan-header {
    color: #ffffff;
    text-align: center;
    padding: 10px;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: -0.5px;
}

/* 이미지 박스: 가로세로 비율 유지를 위한 유연성 확보 */
.brain_3dan-image-box {
    position: relative;
    overflow: hidden;
    width: 100%;
    /* PC 환경에서 카드 가로세로의 균형 있는 비율(약 3:2 비율) 유지 기법 */
    height: 0;
    padding-bottom: 68%; 
}

/* 이미지 맞춤 정렬 */
.brain_3dan-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 어떤 스크린에서도 깨지거나 찌그러지지 않고 비율 유지 */
    transition: transform 0.4s ease; /* 마우스 오버 시 미세한 모션 효과 */
}

/* 데스크톱 마우스 오버 효과 (선택 사항 - 심심함 방지) */
#brain_dan1:hover .brain_3dan-image,
#brain_dan2:hover .brain_3dan-image,
#brain_dan3:hover .brain_3dan-image {
    transform: scale(1.05);
}


/* ==========================================================================
   태블릿 및 중소형 스크린 최적화 (화면폭 1024px 이하)
   ========================================================================== */
@media screen and (max-width: 1024px) {
    .brain_3dan-title {
        font-size: 34px;
               margin-bottom: 25px;
    }
    .brain_3dan-header {
        font-size: 21px;
        padding: 15px 10px;
    }
    .brain_3dan-grid {
        gap: 15px; /* 화면이 좁아지면 여백을 줄임 */
        padding: 20px;
    }
}


/* ==========================================================================
   모바일 전용 레이아웃 전환 (화면폭 768px 이하)
   ========================================================================== */
@media screen and (max-width: 768px) {
    .brain_3dan-title {
        font-size: 26px; /* 모바일 전용 폰트 스케일링 */
        line-height: 1.4;
                margin-bottom: 25px;
    }

    /* 핵심: 모바일 화면에서는 세로로 1열씩 순차 배치하여 가독성 확보 */
.brain_3dan-grid {
        grid-template-columns: 1fr; 
        gap: 15px;
        max-width: 100%;
        margin: 0 auto;
    }

.brain_3dan-header {
        flex: 1;
        width: 60%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center; /* 글자를 카드 왼쪽 중앙에 정렬 */
        font-size: 17px; /* 작은 화면에 맞게 폰트 축소 */
        padding: 0 15px;
        text-align: center;
        word-break: keep-all;
	flex:4

    }

#brain_dan1, #brain_dan2, #brain_dan3 {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        height: 90px; /* 한 줄에 정돈되도록 고정 높이 지정 */
        border-radius: 10px;
    }


/* 오른쪽 이미지 영역 가로세로 맞춤 */
    .brain_3dan-image-box {
        width: 40%;
        height: 100%;
        padding-bottom: 0; /* 기존 PC용 padding 비율 해제 */       
		flex: 6;
    }

    .brain_3dan-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

}

/* 아주 작은 초소형 스마트폰 대응 (화면폭 360px 이하) */
@media screen and (max-width: 360px) {
    .brain_3dan-title {
        font-size: 22px;
    }
    .brain_3dan-header {
        font-size: 18px;
        flex: 4;
    }
    .brain_3dan-image-box {
flex: 6;
  }

}
	
	
	
	
/* 뇌질환 치료 효과 */	

.brain_man-container {
    width: 100%;
    margin: 0 auto;
    color: #ffffff;
    padding: 40px 0px 0px; /* 상하 여백을 균형 있게 조절 */
    text-align: center;
    box-sizing: border-box;
}

/* 헤더 타이틀 */
.brain_man-header h2 {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.5;
    margin: 0 0 60px 0;
    letter-spacing: -1px;
    word-break: keep-all;
}

/* 통계 레이아웃 세로 구분선 포함 */
.brain_man-stats {
    display: flex;
    justify-content: center;
    align-items: stretch; /* 아이템들의 높이를 통일시켜 구분선 위치 최적화 */
    max-width: 1000px;
    margin: 0 auto;
}

.brain_man-stat-item {
    flex: 1;
    position: relative;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; /* 내부 요소 간격을 균등하게 분배 */
}

/* 가운데 열 구분을 위한 세로선 */
.brain_man-stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 10%;
    width: 1px;
    height: 80%; /* 고정 px 대신 %를 사용하여 유연하게 대응 */
    background-color: rgba(255, 255, 255, 0.25);
}

/* 항목별 라벨 (상단 소제목) */
.brain_man-label {
    font-size: 20px;
    color: #ffffff;
    margin-bottom: 15px;
    font-weight: 500;
    letter-spacing: -0.5px;
    word-break: keep-all;
}

/* 숫자 및 수상 텍스트 상자 */
.brain_man-number-box, 
.brain_man-award-box {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}


/* 메인 강조 숫자/텍스트 */
.brain_man-counter, 
.brain_man-award {
    font-size: 54px;
    font-weight: 700;
    line-height: 1;
}

.brain_man-award {
    font-size: 42px;
    color: #ffffff;
    letter-spacing: -1px;
}

.brain_man-unit {
    font-size: 54px;
    font-weight: 700;
}

/* 하단 서브 텍스트 */
.brain_man-subtext {
    font-size: 16px;
    color: #b0b8c1;
    margin-top: 5px;
}

/* 글로벌 헬스케어 노란색 포인트 */
.brain_man-subtext.gold {
  color: #e7e06a; 
}


/* ==========================================================================
   태블릿 및 미디엄 스크린 최적화 (1024px 이하)
   ========================================================================== */
@media screen and (max-width: 1024px) {
    .brain_man-header h2 {
        font-size: 32px;
    }
    .brain_man-counter, .brain_man-unit {
        font-size: 46px;
    }
    .brain_man-award {
        font-size: 36px;
    }
    .brain_man-label {
        font-size: 18px;
    }
}


/* ==========================================================================
   모바일 전용 최적화 레이아웃 (768px 이하)
   ========================================================================== */
@media screen and (max-width: 768px) {
    .brain_man-container {
        padding: 20px 0px 0px;
    }

    .brain_man-header h2 {
        font-size: 24px;
        margin-bottom: 40px;
    }

    /* 핵심: 모바일에서는 가로 나열 flex를 세로(column) 나열로 완전 스위칭 */
    .brain_man-stats {
        flex-direction: column;
        gap: 30px; /* 아이템 간 여백 형성 */
      max-width: 600px;
        margin: 0 auto;
    }

    .brain_man-stat-item {
        width: 100%;
        padding: 10px 0 25px 0;
        box-sizing: border-box;
    }

    /* 모바일 버전: PC 세로 구분선을 해제하고 하단 가로 구분선으로 변환 */
    .brain_man-stat-item:not(:last-child)::after {
        position: absolute;
        right: 10%;
        bottom: 0;
        top: auto; /* PC 상단 고정 해제 */
        width: 80%; /* 가운데 정렬된 느낌의 가로선 */
        height: 1px;
        background-color: rgba(255, 255, 255, 0.15);
    }

    /* 모바일 텍스트 및 숫자 크기 최적화 */
    .brain_man-label {
        font-size: 18px;
        margin-bottom: 8px;
    }

    .brain_man-number-box, 
    .brain_man-award-box {
        min-height: auto; /* 모바일에서는 유연하게 높이 해제 */
        margin-bottom: 5px;
    }

    .brain_man-counter, .brain_man-unit {
        font-size: 44px;
    }

    .brain_man-award {
        font-size: 34px;
    }

    .brain_man-subtext {
        font-size: 14px;
    }
}