#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;
 
}	
	
.skin_section1{
	background: #f3f4f8;
}

.skin_section1 img {   
    width: 100%;       
    max-width: 500px;  
    height: auto;      
    display: inline-block; 
    vertical-align: bottom; /* ◀  작은 아래 여백 */
}
	
.skin_box{
    position: relative;
    margin: 0 auto;
}

.skin_box h2{
	    text-align: center;
    line-height: 1.3;
    font-weight: 700;
	color:#292929;

}
.skin_box h2 b{
	color:#d51c1c;
	font-weight: 700;
}
	
	
.skin_box h3 {
    font-size: 19px;
    text-align: center;
    font-weight: 600;
    color: #515151;
    padding: 20px 0px 40px;
    color: #313131;
}
	
.skinbul{	
    max-width: 500px;
    margin: 0 auto;
    position: relative;
}	
	
/* 깜빡깜빡 */	
.highlight {
            position: absolute;
            border-radius: 50%;
            animation: blink 2s infinite; /* 애니메이션 이름, 기간, 반복 횟수 */
        }



.highlight.gut {	
           left: 60%;
   			 top: 55%;
width: 130px; 
    height: 130px;
            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.gut {
        /* 500px 기준 130px은 화면 너비의 약 26vw입니다. */
        width: 26vw;
        height: 26vw;
        /* filter 블러 효과도 크기에 맞게 살짝 줄여줍니다 */
        filter: blur(3vw); 
    }
}
	
#skin_bigyo {
    padding-top: 60px;
    padding-bottom: 120px;
    background-image: linear-gradient(-45deg, #630628, #97160e, #6f2626);
    background-size: 400% 400%;
    animation: colorChange 3s ease infinite;
}

#skin_bigyo h2 {
    font-weight: 700;
    color: #fff;
    font-size: 27px;
    text-align: center;
    line-height: 1.2;
	padding-left: 20px;
    padding-right: 20px;
	    padding-bottom:60px;
}

/* PC 화면 가이드라인: Flexbox로 양옆 배치 */
#skin_bigyo_box {
    position: relative;
    max-width: 1200px; 
    margin: 0 auto;	
    display: flex;
    justify-content: center;
    align-items: flex-start; /* 상단 기준 정렬 */
    gap: 40px; 
    padding: 0 20px;
    box-sizing: border-box;
}

#skin_bigyo_box p {
    background: #fff;
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    height: 45px;
    line-height: 45px;
    border-radius: 100px;
    margin: 0 auto; 
    color: #8d1c36;
	max-width: 300px;
}

/* 소장 박스 (화살표의 기준점이 됨) */
#skin_sojang {
    flex: 1;
    max-width: 500px;
    position: relative; /* 내부 absolute 요소들의 기준 */
    text-align: center;
}

#skin_skin {	
    flex: 1;
    max-width: 500px;
    position: relative;
    text-align: center;
}

#sojang_left, #sojang_right {
    position: relative; /* 중요: 아이콘들이 이 박스를 기준으로 정렬됨 */
    margin-top: 30px;
    display: inline-block; /* 이미지 크기에 딱 맞게 부모 크기 제한 */
    width: 100%;
    max-width: 500px;
}

/* 2. 소장 내부 작은 아이콘 (배경 이미지 크기에 맞춰 %로 위치 지정) */
.hasal_icon {
    position: absolute;
    left: 45%;  /* 이미지 가로 45% 지점 고정 */
    top: 10%;   /* 이미지 세로 25% 지점 고정 */
    width: 12%; /* 이미지 크기에 비례하여 아이콘 크기 자동 조절 */
    height: auto;
    z-index: 5;
    animation: moveUpDown 1s ease-in-out infinite alternate;
}

/* 3. 피부 내부 작은 아이콘 */
.hasal_icon2 {
    position: absolute;
    left: 45%;  /* 이미지 가로 42% 지점 고정 */
    top: 10%;   /* 이미지 세로 35% 지점 고정 */
    width: 12%; /* 이미지 크기에 비례하여 아이콘 크기 자동 조절 */
    height: auto;
    z-index: 5;
    animation: moveUpDown 1s ease-in-out infinite alternate;
}

/* 위아래 흔들리는 애니메이션 */
@keyframes moveUpDown {
    0% { transform: translateY(0); }
    100% { transform: translateY(-5%); } /* 픽셀(px)이 아닌 %로 움직여 화면 크기에 대응 */
}


/* --- [반응형 미디어 쿼리: 모바일 최적화 스타일 정리] --- */
@media screen and (max-width: 768px) {

    
    .hasal_img {
        width: 100%;       
        height: auto;
    }
}



.hasal_img { 
    width: 100%;
    height: auto;
    border-radius: 20px; 
}

/* 
   [핵심 수정] 중앙 이동 화살표 (SVG)
   PC에서는 소장 영역 오른쪽 끝에 absolute로 걸쳐있고, 
   모바일에서는 소장 이미지 하단 중앙에 고정되도록 설계
*/
.moving-arrow {
    position: absolute;
    right: -105px; /* 소장과 피부 사이 공간에 배치 */
    top: 50%;
    transform: translateY(-50%);
    width: 170px;
    height: 80px;
    z-index: 10;
    pointer-events: none; /* 클릭 방해 금지 */
}

/* 그라데이션 이동 애니메이션 */
.glow-effect {
    animation: slideGradient 2.5s linear infinite;
}

@keyframes slideGradient {
    0% { x: -100%; }
    100% { x: 100%; }
}


	

	

/* --- [반응형 미디어 쿼리: 992px 이하 태블릿/모바일 분기점] --- */
@media (min-width:1280px) {  
	#skin_bigyo h2 {
    	font-size: 34px;
    }
	}
@media (min-width: 1024px) and (max-width: 1280px) {   
	#skin_bigyo h2 {
    	font-size: 34px;
    }
}
	
@media screen and (max-width: 992px) {
    #skin_bigyo {
        padding-top: 50px;
        padding-bottom: 80px;
    }
    
    #skin_bigyo h2 {

    }

    /* 화면이 작아지면 위아래(Column) 구조로 변경 */
    #skin_bigyo_box {
        flex-direction: column; 
        align-items: center;
        max-width: 500px;  
        gap: 60px; /* 화살표가 들어갈 수 있도록 수직 간격 넓힘 */
    }

    #skin_sojang, #skin_skin {
        width: 100%;       
        max-width: 100%;
    }

    #skin_bigyo_box p {
        font-size: 22px;       
        height: 40px;
        line-height: 40px; 
    }

    /* 
       [핵심 수정] 위아래 배치 시 화살표 처리
       소장(#skin_sojang) 내부 하단 중앙에 안착하며 아래 방향(90도)으로 회전 및 크기 최적화
    */
    .moving-arrow {
        position: absolute;
        right: auto;
        left: 50%;
        bottom: -55px; /* 소장 영역 밑으로 튀어나오게 배치 */
        top: auto;
        transform: translateX(-50%) rotate(90deg); /* 중앙정렬 후 아래로 회전 */
        width: 110px;
        height: 55px;
        margin: 0 auto;
    }
}

@media screen and (max-width: 480px) {
    #skin_bigyo h2 {

    }
    #skin_bigyo_box p {
        font-size: 18px;

    }
    #skin_bigyo_box {
        gap: 50px;
    }
    .moving-arrow {
        width: 90px;
        height: 45px;
        bottom: -48px;
    }
}

	
	

#sojang_left{margin-top: 30px;}
#sojang_right{margin-top: 30px;}

.hasal_img{ border-radius: 20px; }
	
/*  오른쪽 화살표 */	
 .arrow-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 200px;
	      z-index: 1;
	  
  }

.moving-arrow {
	width: 170px;
    height: 80px;
    position: absolute;
    left: 470px;
    top: 220px;
    z-index: 2;
}

        /* 그라데이션이 왼쪽에서 오른쪽으로 무한히 이동하는 애니메이션 */
        .glow-effect {
            animation: slideGradient 2.5s linear infinite;
        }

        @keyframes slideGradient {
            0% {
                x: -100%;
            }
            100% {
                x: 100%;
            }
        }
	
	
#skin_list{
	background: #f3f4f8;
    padding-bottom: 50px;
}
	
	
	
 /* 피부질환 양옆 */
#skinleft_list{	
    padding-bottom: 50px;
}
	
	
#skinleft_list h2 {
	text-align: center;
}
#skinleft_list h2 b{	
font-weight: 700;
    color: #d51c1c;	
}
	
.byunbi-list h2 strong{
	 color: #a92121;	
}
	
.slider-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  cursor: grab;
 margin-bottom: 30px;
  
  /* 드래그 시 텍스트 선택 방지 및 모바일 터치 오작동 차단 */
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y; /* 위아래 스크롤은 허용하되, 좌우는 JS가 완벽 제어 */
;
	
	
}

    .slider-container:active {
      cursor: grabbing;
    }

    /* 슬라이더 트랙 */
    .slider-track {
	display: flex;
    gap: 30px; /* JS 코드의 gap: 30과 일치하도록 수정하여 오차 최소화 */
    width: max-content;
    align-items: center;
    padding-left: 100px;  /* 무한 스크롤 버퍼를 위한 최소 여백 */
    padding-right: 100px; /* 좌우 균등하게 맞춰줍니다 */
    padding-top: 50px;
    }

    /* 개별 아이템 스타일 */
.slider-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  transition: transform 0.3s ease;
  will-change: transform;
  
  /* 하단 텍스트나 빈 공간을 잡았을 때도 드래그가 안 끊기도록 설정 */
  pointer-events: auto; 
  user-select: none;
  -webkit-user-select: none;
}

    /* 원형 이미지 박스 */
    .circle-box {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 3px solid transparent;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    }

    /*  이미지 스타일 */
    .circle-box img {
      width: 100%;
      height: 100%;
      object-fit: cover; /* 원형 박스 비율에 맞게 꽉 채움 */
      display: block;
    }

    /* 텍스트 스타일 */
    .slider-item p {
      margin-top: 12px;
      font-size: 25px;;
      font-weight: bold;
      color: #333;
      transition: color 0.3s ease;
      white-space: nowrap;
    }

    /*  가운데 위치 시 적용될 효과 (확대 + 빨간 테두리 + 네온 효과) */
    .slider-item.active .circle-box {
      transform: scale(1.1);
      border-color: #e63946;
      box-shadow: 0 0 20px rgba(255, 59, 48, 0.6);
    }

    .slider-item.active p {
      color: #e63946;
    }

	
@media screen and (max-width: 768px) {
    /* 슬라이더 전체 여백 및 간격 조정 */
    .slider-track {
        gap: 15px;         /* 아이템 간 간격 축소 (기존 30px) */
        padding-top: 30px; /* 상단 여백 축소 */
    }

    /* 원형 이미지 박스 크기 축소 (기존 200px) */
    .circle-box {
        width: 120px;
        height: 120px;
    }

    /* 텍스트 크기 축소 (기존 25px) */
    .slider-item p {
        margin-top: 8px;
        font-size: 16px;   /* 모바일 가독성에 최적화된 크기 */
    }

    /* 가운데 활성화된 아이템 확대 비율 조정 */
    .slider-item.active .circle-box {
        transform: scale(1.08); /* 모바일에서는 과한 확대보다 적당한 크기 유지 */
    }
}

/* 초소형 스마트폰 (화면 너비 480px 이하) 추가 최적화 */
@media screen and (max-width: 480px) {
    .circle-box {
        width: 95px;       /* 한 화면에 더 많은 아이템이 눈에 들어오도록 유도 */
        height: 95px;
    }

    .slider-item p {
        font-size: 14px;
    }
}	
	
	

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

/* 기존 HTML에 박혀있는 고정 높이(height:450px)를 무력화하기 위해 중요(!important) 선언 */
#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; /* 기존 left 마진 초기화 */
    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: #dc2b43;
    color: #fff;
    line-height: 2;
    margin: 0;
}

/* --- 2. 치료 결과 사진 영역 --- */
#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;
}


/* --- 3. [핵심] 미디어 쿼리 분기점 재조정 --- */

/* 태블릿 구간 (화면 너비 1100px 이하부터 적용) */
@media screen and (max-width: 1100px) {
    /* 3개 카드가 2열로 깨져서 배치되는 것을 막고, 
       화면 너비가 좁아지면 애매하게 버티지 않고 부드럽게 1열(세로)로 정렬되도록 변경 */
    #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;
    }
}

/* 스마트폰 구간 (화면 너비 600px 이하) */
@media screen and (max-width: 600px) {
    #skin_chiro_list ul li,
    .skin_atopy {
        max-width: 100%; /* 스마트폰 화면에서는 좌우 꽉 차게 변경 */
    }
    
    #skin_chiro_list ul li h3,
    .skin_atopy h3 {
        font-size: 19px; /* 모바일용 폰트 크기 최적화 */
    }
	

	
}
	
	
.skin_chiro_list_txt {
    background: #fff;
    padding: 20px;
	padding-right: 32px;
}	
.skin_chiro_list_txt p {
    background: #dc2b43;
    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;
}