.brain_box {
    position: relative;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 50px;
}
	
.brain_box h2 {
    font-size: 27px;
}	
	
.biman_box{
	    background-image: linear-gradient(-45deg, #071e25, #414141, #071e25);
    background-size: 400% 400%;
    animation: colorChange 3s ease infinite;
}
	
.biman_box h2 {
    text-align: center;
    line-height: 1.3;
    font-weight: 700;
    color: #fff;
}
	
.biman_box h2 b{	
color: #8d4600;
}
	
.biman_box h3 {
text-align: center;
    color: #fff;
    font-size: 19px;
    font-weight: 600;
    padding: 20px 0px 40px;
}
	

.biman_section1 img{
    width: 100%;
    max-width: 250px;
    height: auto;
    display: inline-block;
    vertical-align: bottom;
}
	

/* 비만 당뇨 원인 */	
#biman_wonin {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding-top: 50px;
    padding-bottom: 50px;
    box-sizing: border-box;
}

#biman_wonin h1 {
font-size: 20px;
    text-align: center;
    padding: 20px 15px;
    word-break: keep-all;
    background: #f8fafc;
    border-left: 4px solid #00598d;   
	border-right: 4px solid #00598d;
    border-radius: 12px 12px;
    color: #333333;
    font-weight: 500;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.02);
    width: 80%;
    margin: 0 auto;  
	margin-top: 20px;
}

#biman_wonin h1 b {
    color: #00598d; /* 핵심 키워드 칼러 강조 */
    font-weight: 700;
    text-decoration: none; /* 기존 언더라인 대신 색상과 두께로 깔끔하게 강조 */
    background: linear-gradient(to top, rgba(0, 89, 141, 0.1) 40%, transparent 40%); /* 부드러운 형광펜 효과 */
}
	
@media screen and (min-width: 1024px) {
    #biman_wonin h1 { 
font-size: 26px;
        padding: 30px 40px;
        margin-top: 20px;
        text-align: center;
border-left: 4px solid #00598d;
    border-right: 4px solid #00598d;
    }
}	
	
	
	
#biman_wonin h2 {	
    font-size: 28px;
    text-align: center;	
    line-height: 1.4;
    padding: 0 20px;
    word-break: keep-all;
}

#biman_wonin h2 b {
    color: #c51e1e;
}

/* 
  [기본 레이아웃: 모바일] 
  요청하신 순서대로 박스가 위에 먼저 오고 소장 이미지가 맨 아래에 깔리도록 구성합니다.
*/
#biman_wonin_box {
    position: relative;	
    margin-top: 30px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
}

/* 박스 형태 고정 및 애니메이션 간섭 차단 */
#biman_malpusun1, #biman_malpusun2 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100%;
    max-width: 460px;
    
    /* 애니메이션에 의해 크기가 출렁이는 것을 원천 방지 */
    height: auto !important;
    min-height: 160px !important;
    flex-shrink: 0 !important; 
    
    background: #ffffff !important;
    border: 1px solid #eef2f5;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    
    box-sizing: border-box;
    padding: 25px 30px;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
    
    /* 혹시 모를 왜곡 애니메이션 작동 차단 */
    transform: none !important;
    animation: none !important; 
}

/* 모바일 우선 배치 설정 (숫자가 작을수록 위로 올라갑니다) */
#biman_malpusun1 { order: 1; } /* GLP-1 박스가 1등 */
#biman_malpusun2 { order: 2; } /* GIP 박스가 2등 */

#biman_malpusun1 h3, #biman_malpusun2 h3 {	
    font-size: 24px;
    margin: 0;
    padding: 0 0 8px 0;
    font-weight: 700;
    color: #333333;
}

#biman_malpusun1 p, #biman_malpusun2 p {
    margin: 0;
    padding: 0;
    font-size: 17px;
    line-height: 1.5;
    color: #666666;
    word-break: keep-all;
}

#biman_malpusun1 p b { color: #ad141d; }
#biman_malpusun2 p b { color: #0e857d; }

/* 중앙 소장 이미지 (모바일 모드 시 하단 배치) */
.biman_sojang {
    width: 100%;
    max-width: 340px;
    height: auto;
    display: block;
    margin: 0 auto;
    order: 3; /* 박스들보다 아래인 3등으로 배치하여 소장이 밑으로 내려옵니다 */
}

/* -------------------------------------------
   [PC 전용 레이아웃] 화면 폭 1024px 이상
   ------------------------------------------- */
@media screen and (min-width: 1024px) {
    #biman_wonin h2 { font-size: 30px; }
    #biman_wonin h1 { font-size: 30px;  }

    #biman_wonin_box {
        display: block;
        width: 100%;
        height: 450px; 
        padding: 0;
        margin-top: 10px;
    }

    /* 소장 이미지 정중앙 배치 복귀 */
    .biman_sojang {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) !important;
        max-width: 400px;
        order: 0;
        margin: 0;
    }

    /* PC 레이아웃 수평 정렬 및 완벽한 크기 고정 */
    #biman_malpusun1 {
        position: absolute !important;
        left: 0 !important;
        top: 130px !important;
        width: 320px !important;
        height: 140px !important; 
    }

    #biman_malpusun2 {
        position: absolute !important;
        right: 0 !important;
        top: 130px !important; 
        width: 300px !important;
        height: 140px !important;
    }
	#biman_malpusun1 p, #biman_malpusun2 p{
		
	}
}

	
	/*  치료 */	
#skin_chiro_list{	
margin-top: 50px;	
}
	
#skin_chiro_list ul{
	position:relative;
	width:1200px;
	height:450px;
	margin:0 auto;
}
	
	
#skin_chiro_list ul li{
    position: relative;
	width: 390px;
    float: left;
	margin-left: 15px;
	border-radius: 10px;
    overflow: hidden;
}
	
#skin_chiro_list ul li:first-child{
	margin-left: 0px;	
}
	

	
.skin_chiro_list_txt{
    background: #fff;
    padding: 20px 30px;
}

.skin_chiro_list_txt p{
background: #00598d;
    font-size: 18px;
    color: #fff;
    text-align: center;
    width: 150px;
    margin-bottom: 10px;
    border-radius: 5px;	
	font-weight: 600;
}	
.skin_chiro_list_txt span{	
	    font-size: 18px;
}

.chart-container_right{
float:left
}
	
	
	
	
	/* 진단 */
	
.biman_jindan {
    background-image: linear-gradient(-45deg, #071e25, #414141, #071e25);
    background-size: 400% 400%;
    animation: colorChange 3s ease infinite;
    padding-bottom: 60px;
    box-sizing: border-box;
}

.smell_jindan {
    width: 100%;
    max-width: 900px; /* PC 해상도 최대폭 제한 */
    margin: 0 auto;
    position: relative;
    padding-top: 60px;
    padding-left: 20px;  /* 모바일 여백 확보 */
    padding-right: 20px; /* 모바일 여백 확보 */
    box-sizing: border-box;
}

.smell_jindan h2 {	
    font-size: 26px; /* 모바일 타이틀 크기 */
    text-align: center;
    color: #fff;
    line-height: 1.4;
    margin-bottom: 30px;
    word-break: keep-all;
}

.smell_jindan h2 b {	
    color: #f4ee50;
}

/* 
  [기본 레이아웃: 모바일] 
  3개의 검사 카드를 세로로 길게 정렬합니다.
*/
.byun_jindan_grid {
    display: flex;
    flex-direction: column;
    gap: 25px; /* 카드 사이 간격 */
    width: 100%;
    margin: 0 auto;
	padding:0;
}

.byun_jindan_grid .grid_item {
    width: 100%;
    max-width: 380px; /* 모바일에서 너무 거대해지지 않도록 제한 */
    margin: 0 auto;  /* 중앙 정렬 */
    background: #ffffff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
}

/* 카드 내부 텍스트 영역 */
.grid_item_txt {
    height: auto; /* 고정 높이 제거하여 모바일 글자 안 잘리게 처리 */
    padding: 25px 20px;
    text-align: center;
    box-sizing: border-box;
}

.grid_item_txt h4 {
    font-size: 20px;
    font-weight: 700;
    color: #141414;
    margin: 0 0 10px 0;
}

.grid_item_txt p {
    font-size: 15px;
    color: #555555;
    line-height: 1.4;
    margin: 0;
    word-break: keep-all;
}

/* 카드 하단 이미지 */
.byun_jindan_grid .grid_item img {
    width: 100%;
    height: auto;
    display: block;
    margin-top: auto; /* 텍스트 양이 달라도 이미지가 바닥에 딱 맞춤 */
}

/* 하단 유의사항 안내 문구 */
.ps_txt {
    background: #474747;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.5;
    padding: 15px 20px;
    border-radius: 8px;
    margin-top: 35px;
    text-align: center;
    word-break: keep-all;
}


/* -------------------------------------------
   [PC 전용 레이아웃] 화면 폭 1024px 이상 시 전환
   ------------------------------------------- */
@media screen and (min-width: 1024px) {
    .smell_jindan {
        padding-top: 80px;
        padding-left: 0;
        padding-right: 0;
    }

    .smell_jindan h2 {	
        font-size: 32px;
        margin-bottom: 50px;
    }

    /* PC에서는 가로 3단 배열로 변경 */
    .byun_jindan_grid {
        flex-direction: row;
        justify-content: space-between;
        gap: 20px;
    }

    .byun_jindan_grid .grid_item {
        flex: 1;
        max-width: 380px;
        margin: 0; /* PC 마진 리셋 */
    }

    /* PC 해상도에서는 타이틀과 내용 높이를 균일하게 고정하여 라인을 맞춤 */
    .grid_item_txt {
        height: 145px; 
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .ps_txt {
        font-size: 15px;
        margin-top: 45px;
    }
}
	

/* 피부질환 치료 사진 */
#skin_chiro_list {	
    margin-top: 50px;	
    box-sizing: border-box;
}

/* 기존 고정 높이 제거 */
#skin_chiro_list ul {
    position: relative;
    max-width: 900px;
    width: 100%;
    height: auto !important; 
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 20px;
    padding: 0;
    list-style: none;
}

#skin_chiro_list ul li {
    position: relative;
    flex: 1;
    margin-left: 0 !important; 
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
}

#skin_chiro_list ul li img {
    width: 100%;
    height: auto;
    display: block;
}

#skin_chiro_list ul li h3 {
    text-align: center;
    font-size: 22px;
    background: #00598d;
    color: #fff;
    line-height: 2;
    margin: 0;
}

/* --- 치료 결과 사진 영역 --- */
#skin_chiro_cul {
    position: relative;
    max-width: 1200px;
    width: 100%;
    height: auto !important; 
    margin: 50px auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    box-sizing: border-box;
}

.skin_atopy {	
    flex: 1;
    min-width: 280px;
    max-width: 590px;
    height: auto !important;
    background: #fff;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    box-sizing: border-box;
    margin-left: 0 !important;
}

.skin_atopy h3 {
    font-size: 22px;
    text-align: center;
    line-height: 1.5;
    margin-top: 0;
    margin-bottom: 20px;
    font-weight: 700;
}

.skin_atopy img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
}

.skin_chiro_list_txt {
    background: #fff;
    padding: 20px;
    padding-right: 32px;
}	
.skin_chiro_list_txt p {
    background: #00598d;
    font-size: 18px;
    color: #fff;
    text-align: center;
    width: 150px;
    margin-bottom: 10px;
    border-radius: 5px;
    font-weight: 600;
}	
.skin_chiro_list_txt span {
    font-size: 18px;
}

	
#viyum_munyuck h2 {
    font-size: 32px;
    text-align: center;
    line-height: 1.3;
    margin-bottom: 40px;
}
	
	
/* ==========================================
  모바일 & 태블릿 구간 최적화 미디어 쿼리 (1100px / 1000px 통합 대응)
   ========================================== */
@media screen and (max-width: 1100px) {
    /* 코 알레르기 원인 블록 모바일 레이아웃 고정 */
    #viyum_wonin {
        height: auto; 
        padding-top: 50px;
        padding-bottom: 50px;
        display: flex;
        flex-direction: column; 
        align-items: center; 
    }

    #viyum_wonin h2 {
        font-size: 32px; 
        text-align: center;
        margin-bottom: 30px;
        order: 1; 
    }

    .viyum_saimg {
        position: relative; 
        top: 0 !important;
        right: 0 !important;
        margin: 0 auto 40px; 
        order: 2; 
        max-width: 100%;
        width: 340px; 
        height: 430px; 
    }

    #viyum_wonin_img {
        position: relative; 
        top: 0 !important;
        left: 0 !important;
        max-width: 90%; 
        margin: 0 auto;
        order: 3; 
    }

    .viyum_saimg img:first-of-type {
        width: 100%;
        height: auto;
    }

    .highlight.gut {
        width: 90px;
        height: 90px;
        top: 330px;
        left: 100px;
    }

    #mun_01 { width: 70px; height: auto; top: 180px; right: 0px; }
    #mun_02 { width: 70px; height: auto; top: -10px; left: 50px; }
    #mun_03 { width: 70px; height: auto; top: 50px; left: 170px; }
    #mun_04 { width: 70px; height: auto; top: -10px; left: 230px; }

    /* 치료 목록 및 결과 리스트 세로 배치 전환 */
    #skin_chiro_list ul {
        flex-direction: column;
        align-items: center;
    }
    
    #skin_chiro_list ul li {
        width: 100%;
    }

    #skin_chiro_cul {
        flex-direction: column;
        align-items: center;
    }
    
    .skin_atopy {
        width: 100%;
        max-width: 500px;
    }
}
	
	

	
	
/* 탭 전환 시 사진 미출력 오류를 수정한 핵심 모바일 타겟 미디어 쿼리 */
@media screen and (max-width: 1000px) {
	#viyum_munyuck h2 { 
        font-size: 28px; 
        text-align: center; 
        padding: 0 20px;
        word-break: keep-all; /* 단어 단위 줄바꿈으로 깔끔하게 조정 */
    }
    
    .viyum { flex-direction: column; }
    .viyum__tab-container { width: 100%; }
    
    /* PC 전용 우측 이미지 독립 박스 완전 숨김 */
    .viyum__image-container { display: none !important; }

    /* 모바일 탭 내부 이미지 컨테이너 속성 최적화 (높이 유연 변환) */
    .viyum__mobile-img-box {
        display: none; 
        width: 100%;
        box-sizing: border-box;
        justify-content: center;
        padding: 0 24px;
        overflow: hidden;
    }

    /* 탭 아이템 활성화 상태 시 모바일 이미지 컨테이너 표출 */
    .viyum__tab-item--active .viyum__mobile-img-box {
        display: flex; 
        padding-bottom: 24px;
        padding-top: 10px; 
    }

    .viyum__tab-header { font-size: 19px; padding: 20px; }
    .viyum__tab-content { font-size: 17px; }
	
    /* 미출력 및 비정상 좌표 이탈 현상을 방지하기 위한 절대 좌표(absolute) 제거 설계 */
    .viyum__mobile-img-box .viyum__allergy-img {
        display: none !important;
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        width: 100% !important;
        max-width: 340px;
        height: auto !important;
        border-radius: 16px;
        opacity: 1 !important;
        visibility: visible !important;
    }
	
    /* 활성화 스크립트 시 부드러운 페이드인 효과만 순수하게 적용 */
    .viyum__mobile-img-box .viyum__allergy-img--active {
        display: block !important;
        animation: vFade 0.4s ease-in-out forwards;
    }
}

/* 스마트폰 전용 초소형 기기 해상도 대응 (375px 이하) */
@media screen and (max-width: 600px) {
   #viyum_munyuck h2 { 
        font-size: 22px; 
        margin-bottom: 30px;
    }
	
	#skin_chiro_list ul li,
    .skin_atopy {
        max-width: 100%; 
    }
    
    #skin_chiro_list ul li h3,
    .skin_atopy h3 {
        font-size: 19px; 
    }
}

@media screen and (max-width: 375px) {
    #viyum_wonin h2 {
        font-size: 24px; 
        padding: 0 15px;
    }

    .viyum_saimg {
        width: 230px; 
        height: 292px; 
        margin: 0 auto 25px;
    }

    #viyum_wonin_img {
        max-width: 90%;
    }
    
    .highlight.gut {
        width: 60px;
        height: 60px;
        top: 210px;
        left: 70px;
        filter: blur(10px); 
    }

    #mun_01 { width: 45px; top: 125px; right: -5px; }
    #mun_02 { width: 45px; top: -5px;  left: 25px; }
    #mun_03 { width: 45px; top: 35px;  left: 110px; }
    #mun_04 { width: 45px; top: -5px;  left: 155px; }
}