#definition-box	{
     background: #f0f5fa;
	font-size: 17px;
    color: #4a5568;
    line-height: 1.6;
    word-break: keep-all;
    font-weight: 600;
    padding: 20px;
    margin: 0;
    margin: 20px;
    border-radius: 20px;
    text-align: center;
}
	
.brain_box {
    position: relative;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 50px;
}
	
.brain_box h2 {
    font-size: 27px;
	
}	
.munyuck_box h2{
	color:#fff;   
	text-align: center;
}
	
	
.brain_box h3 {
    font-size: 19px;
    text-align: center;
    font-weight: 600;
    color: #515151;
    padding: 20px 0px 40px;
    color: #313131;
}
	
	
	.munyuck_section1{
	background: #000610;
}

.munyuck_box{
    position: relative;
    margin: 0 auto;

}


.munyuck_box h2 b{
	color:#fdff50;
	font-weight: 700;
}
	
	
.munyuck_box h3 {
	color: #fff;
}
	
.munyuck_box_2{
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}
	
	
.munyuck_box_2 img{
width:100%;
height: auto;
    display: inline-block;
    vertical-align: bottom;
	
}
	
	
.jagamun_list{
margin-bottom: 80px;
	 background: linear-gradient(185deg, #f7f7f7, #00000000);
    background-size: cover;
}
	
.jagamun_list h2{
	text-align: center;
	padding-bottom: 20px;
}

.jagamun_list h2 b{
color: #e03333;
}
	

  /* [핵심 변경] 브라우저 기본 스크롤 활성화 및 스크롤바 숨김 */
.carousel-outer {
  max-width: 1200px;
  margin: 0 auto;
  overflow-x: auto;
  white-space: nowrap;
  cursor: grab;
  user-select: none;
  padding: 25px 15px; /* 그림자가 잘리지 않도록 상하 패딩 최적화 */
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.carousel-outer::-webkit-scrollbar { display: none; }
.carousel-outer:active { cursor: grabbing; }

.carousel-track {
  display: flex;
  gap: 24px; /* 카드 사이 간격을 넓혀 답답함 해소 */
  width: max-content;
  padding-bottom: 5px;
}

/* 2. [PC 환경] 카드 디자인 트랜스포메이션 */
.card {
    width: 340px;
    flex-shrink: 0;
    border-radius: 20px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #eef2f5;
    box-shadow: 6px 0px 20px rgb(26 26 26 / 19%);
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    padding: 0px;
}

/* 마우스 올렸을 때 고급스러운 상승 효과 및 테두리 하이라이트 */
.card:hover {
  transform: translateY(-8px);

 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 13px #ffc9c9ad;
  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
	
}
	
	

/* 이미지 레이아웃: 비율 최적화 및 꽉 차는 스크린 구성 */
.card img {    
  width: 100% !important;
  height: 200px; /* 안정적인 16:9 비율 유도 */
  object-fit: cover;
  display: block;
  pointer-events: none;
  margin: 0 !important;
  transition: transform 0.5s ease;
}

/* 마우스 호버 시 사진이 미세하게 확대되는 효과로 몰입감 증대 */
.card:hover img {
  transform: scale(1.03);
}

/* 텍스트 컨테이너 여백 다이어트 및 정돈 */
.card-body { 
  padding: 22px 20px 24px; /* 슬림하면서도 짜임새 있는 여백 */
  white-space: normal;  
  background: #ffffff;
} 

/* 질환명 타이틀: 신뢰감을 주는 메인 네이비 톤 */
.card-title { 
  font-size: 20px;
  font-weight: 700; /* 조금 더 두껍고 명확하게 */
  color: #1a4a5e; /* 카드 배경 대신 글씨색에 테마 컬러 바인딩 */
  margin-bottom: 8px;
  text-align: center;
  letter-spacing: -0.5px;
}

/* 질환 설명 */
.card-desc { 
  font-size: 17px; 
  color: #64748b; /* 눈이 편안한 슬레이트 그레이 컬러 */
  font-weight: 500;
  line-height: 1.5;   
  text-align: center;
  word-break: keep-all;
}


/* ==========================================================================
   [모바일 환경] 반응형 감성 디자인 최적화 (max-width: 500px)
   ========================================================================== */
@media screen and (max-width: 500px) {
  .carousel-outer {
    padding: 15px 12px;
  }

  .carousel-track {
    gap: 16px;
  }

  /* 모바일 기기별로 꽉 차면서 다음 카드가 호기심 있게 살짝 걸치는 스마트 너비 */
  .card {
    width: 76vw;         
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(26, 74, 94, 0.05);
  }
  
  .card:hover {
    transform: none; /* 모바일에서는 터치 씹힘 방지를 위해 호버 모션 제거 */
  }

  /* 모바일 화면 맞춤 콤팩트 이미지 뷰 */
  .card img {
    width: 100% !important;
    height: 155px;
    margin: 0 !important;
  }

  .card-body {
    padding: 16px 14px 18px;
  }

  .card-title {
    font-size: 17px;
    margin-bottom: 6px;
  }

  .card-desc {
    font-size: 15px;
    line-height: 1.4;
  }
}
	
/* 소장기능 저하 스크롤 변화*/

.scroll-container {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  height: auto; /* 2000px에서 auto로 변경하여 내부 요소가 툭 떨어지는 현상 방지 */
  padding: 60px 20px; /* 위아래 자연스러운 디자인 여백 */
}

/* 2. sticky-section의 sticky 속성을 해제하고 정돈 */
.sticky-section {
  position: relative; /* sticky에서 relative로 변경 */
  height: auto; /* 고정 높이 해제 */
  display: flex;
  align-items: center;
}

.scroll-container .item {
  cursor: pointer; /* 마우스를 올리면 손가락 모양으로 변경 */
}


.content-wrapper {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

/* 왼쪽 패널 스타일 */
.left-panel {
  width: 50%;
	margin-left: 20px;
}

.main-title {
  font-size: 36px;
  line-height: 1.4;
  font-weight: 700;
  color: #222;
  margin-bottom: 40px;
}

.items-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.item {
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s ease;
}

/* 기본 상태 (비활성) */
.item .dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item .dot-inner {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
}

.item .label {
  display: inline-block;
  padding: 12px 24px;
  background: #e0e0e0;
  color: #777;
  font-size: 20px;
  font-weight: 600;
  border-radius: 30px;
  width: 80%;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

/* 활성화 상태 (Active) */
.item.active .dot {
  background: #222;
  border: 2px solid #222;
  box-sizing: border-box;
}
.item.active .dot-inner {
  background: #fff;
  width: 10px;
  height: 10px;
}
.item.active .label {
  background: #222;
  color: #fff;
}

/* 오른쪽 패널 스타일 */
.right-panel {
  width: 45%;
  position: relative;
  height: 500px; /* 이미지 영역 높이 확보 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.intestine-img {
  position: absolute;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}

/* 활성화된 이미지만 보이게 처리 */
.intestine-img.active {
  opacity: 1;
  transform: scale(1);
}
	
/* 자가면역질환 치료법 */
#jagamun_chlist_box{
  max-width: 800px;
    margin: 0 auto;
		}  
	
.jagamun_chiro {  
    position: relative;
    width: 100%; 
    max-width: 1000px;
    background: #fff;
    height: auto; 
    min-height: 314px;
    margin: 0 auto 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
    display: flex;
    align-items: center;
    justify-content: space-between; /* 텍스트와 이미지 균형 배치 */
    box-sizing: border-box;
    overflow: hidden; /* 이미지 오버플로우 방지 */
}

.jagamun_chiro_txt {
    padding: 50px;
    width: 55%; 
    box-sizing: border-box;
}

.jagamun_chiro_txt h3 { 
    font-size: 30px; 
    font-weight: 700;
    color: #252525;
    margin-bottom: 15px;
}

.jagamun_chiro ul { 
    margin-top: 20px; 
    padding-left: 20px;
} 

.jagamun_chiro ul li {
    font-size: 18px; 
    line-height: 1.6;
    list-style: disc; 
    color: #636363;
    margin-bottom: 8px;
}

/* PC 기본: 안정적인 가로 비율 할당 */
.jagamun_chiro img { 
    position: absolute;
    top: 25px;
    right: 25px;
    border-radius: 10px;
    width: 41%; /* 절대값 px 대신 %로 화면 대응 */
    max-width: 410px;
    height: calc(100% - 50px); 
    object-fit: cover;
} 


/* ==========================================================================
   [중간 화면 환경] 태블릿 및 노트북 구간 (max-width: 1024px)
   ========================================================================== */
@media screen and (max-width: 1024px) {
    .jagamun_chiro {
        max-width: 95%;
        min-height: 260px; /* 높이 압축 */
    }
    
    .jagamun_chiro_txt {
        width: 60%;
        padding: 30px 25px; /* 내부 여백 축소 */
    }
    
    .jagamun_chiro_txt h3 {
        font-size: 24px;
    }
    
    .jagamun_chiro ul li {
        font-size: 16px;
    }

    /* [핵심 변경] 중간 사이즈에서 이미지 비율을 줄이고 여백 조정 */
    .jagamun_chiro img {
        top: 20px;
        right: 20px;
        width: 50%; /* 화면이 줄어들면 이미지도 함께 슬림해짐 */
        height: calc(100% - 40px);
    }
}


/* ==========================================================================
   [모바일 환경] 스마트폰 구간 (max-width: 640px)
   ========================================================================== */
@media screen and (max-width: 640px) {
    .jagamun_chiro {
        flex-direction: column-reverse; /* 모바일은 세로 배치 */
        width: 100% !important;
        padding: 15px;
    }

    /* 모바일에서는 꽉 차는 카드형 이미지로 전환 */
    .jagamun_chiro img {
        position: relative; 
        top: 0;
        right: 0;
        width: 100% !important;
        max-width: 100%;
        height: 180px; 
        margin-bottom: 15px;
    }

    .jagamun_chiro_txt {
        width: 100% !important;
        padding: 10px 5px !important;
    }

    .jagamun_chiro_txt h3 {
        font-size: 20px !important;
        text-align: center;
    }

    .jagamun_chiro ul {
        margin-top: 10px;
        padding-left: 15px;
    }

    .jagamun_chiro ul li {
        font-size: 15px !important;
        line-height: 1.5;
    }
}
	
	
	
/* 깜빡깜빡 */	
.highlight {
            position: absolute;
            border-radius: 50%;
            animation: blink 2s infinite; /* 애니메이션 이름, 기간, 반복 횟수 */
        }

.highlight.brain {
top: 10%;
    left: 63%;
            width: 100px; /* 뇌 크기 */
            height: 100px; /* 뇌 크기 */
            background-color: rgb(255 0 0 / 41%);/* 뇌 빨간색 */
			filter: blur(15px);
        }

.highlight.gut {	
    top: 24%;
    left: 54%;
            width: 130px; /* 장 크기 */
            height: 130px; /* 장 크기 */
            background-color: rgb(255 0 0 / 41%); /* 장 빨간색 */
			 filter: blur(15px);
        }
	
.highlight.leg {
    left: 60%;
    bottom: 20%;
            width: 100px; /* 장 크기 */
            height: 100px; /* 장 크기 */
            background-color: rgb(255 0 0 / 41%); /* 장 빨간색 */
			 filter: blur(15px);
}
	

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

	
	
@media screen and (max-width: 500px) {
	
 .highlight.brain {
        width: 15vw;
        height: 15vw;
        filter: blur(3vw);
}
 .highlight.gut {
        width: 15vw;
        height: 15vw;
        filter: blur(3vw);
}
 .highlight.leg {
        width: 15vw;
        height: 15vw;
        filter: blur(3vw);
}	
	
	
}
	
	
	
	
@media screen and (max-width: 500px) {
  /* 1. 전체 컨테이너 고정폭 해제 및 반응형 수정 */
  .scroll-container {
    width: 100% !important;
    padding: 40px 15px !important;
    box-sizing: border-box;
  }

  /* 2. 가로 배열을 세로 배열로 변경 */
  .content-wrapper {
    flex-direction: column !important;
    gap: 30px;
  }

  /* 3. 좌측 패널(텍스트 및 리스트) 모바일 최적화 */
  .left-panel {
    width: 100% !important;
    margin-left: 0 !important;
    padding: 0 10px;
    box-sizing: border-box;
  }

  .main-title {
    font-size: 24px !important; /* 모바일 맞춤 타이틀 크기 */
    margin-bottom: 25px !important;
    text-align: center;
  }

  .item .label {
    width: 100% !important; /* 버튼이 화면에 가득 차도록 */
    font-size: 16px !important;
    padding: 10px 16px !important;
  }

  /* 4. 우측 패널(이미지 영역) 모바일 최적화 */
  .right-panel {
    width: 80% !important;
        height: 300px;
        margin-top: 20px;
    }  

  .intestine-img {
    max-width: 90% !important;
    height: auto !important;
  }

  /* 5. 기존 반짝이 애니메이션 크기 유지 */
  .highlight.brain {
    width: 15vw;
    height: 15vw;
    filter: blur(3vw);
  }
  .highlight.gut {
    width: 15vw;
    height: 15vw;
    filter: blur(3vw);
  }
  .highlight.leg {
    width: 15vw;
    height: 15vw;
    filter: blur(3vw);
  }
}	

@media screen and (max-width: 1024px) {	
	
.main-title {
    font-size: 27px;
  }
.item .label {
    font-size: 16px;
  }
	
	}