/* ==========================================
   내비게이션 카테고리 창 (기존 유지)
========================================== */
.byun_nav_wrap {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 9999;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0.35s ease;
}
.byun_nav_wrap.active { visibility: visible; pointer-events: auto; }
.menu_overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 5;
    opacity: 0;
    transition: opacity 0.35s ease;
}
.byun_nav_wrap.active .menu_overlay { opacity: 1; }
.byun_category {
    position: absolute;
    top: 0; left: 0;
    width: 85%;
    height: 100%;
    background: #fff;
    z-index: 10;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.byun_nav_wrap.active .byun_category { transform: translateX(0); }
.btn_menu_close {
     position: absolute;
    left: 85%;
    top: 0px;
    background: none;
    border: none;
    color: #fff;
    font-size: 50px;
    cursor: pointer;
    line-height: 1;
    z-index: 11;
    opacity: 0;
    transition: opacity 0.2s ease 0.2s;
}
.byun_nav_wrap.active .btn_menu_close { opacity: 1; }
.byun_auth_box { display: flex; width: 100%; box-sizing: border-box; background: #b2d235; }
.byun_auth_box a { flex: 1; text-align: center; padding: 15px 0; font-weight: bold; font-size: 18px; text-decoration: none; }
.btn_login { background: #9dbd47; color: #fff; } /* #b2d235   6fa043*/
.btn_join { background: #4a4a4a; color: #fff; }
.byun_quick_menu { display: flex; border-bottom: 1px solid #eee; }
.byun_quick_menu a { flex: 1; text-align: center; padding: 15px 0; font-size: 15px; color: #333; border-right: 1px solid #eee; text-decoration: none; }
.byun_quick_menu a:last-child { border-right: none; }
.byun_menu_body { padding: 20px; flex: 1; }
.byun_casc { -ms-overflow-style: none; scrollbar-width: none; overflow-y: scroll; }
.cate_title {
font-size: 20px; 
color: #8da421; 
font-weight: bold; 
margin: 10px 0 10px; 
border-bottom: 2px solid #8da421; 
padding-bottom: 5px; }



.leftlink-grid{
    display: flex;
    margin: 0 auto;
    flex-wrap: nowrap;
    align-items: center;
    gap: 16%;
	padding: 0 30px;
    padding-bottom: 40px;
    justify-content: space-between;
} /* #8da421   6fa043*/

.depth2_list li a { display: flex; justify-content: space-between; align-items: center; font-weight:bold; padding: 13px 5px;  color: #333; font-size: 18px; text-decoration: none;   }
.nav_depth1 { display: flex; justify-content: space-between; align-items: center; font-weight:bold; padding: 13px 5px; color: #333; font-size: 18px; text-decoration: none; border-bottom: 1px solid #f5f5f5; }
.depth1_list{ margin-bottom:40px}
.nav_sub { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; background: #fdfdfd; }
.nav_depth2 { display: block; padding: 11px; font-size: 17px; color: #555; text-decoration: none; position: relative; font-weight: 500; }
.nav_depth2:first-child { border-top: none; }
.nav_depth2.active, .nav_depth2:active { color: #7a9c1e; font-weight: bold; }
.nav_depth2 span { padding-left: 0; }   
.arrow::after { content: '>'; font-size: 18px; color: #ccc; display: inline-block; transform: rotate(90deg); margin-right: 10px; transition: transform 0.3s ease; }
.nav_depth1.open .arrow::after { transform: rotate(270deg); }
.byun_menu_footer { padding: 20px; }
.call_box { background: #f5f5f5; padding: 15px; border-radius: 8px; text-align: left; letter-spacing: -1px; }
.call_box p { font-size: 18px; color: #666; font-weight: 600; }
.call_number { font-size:28px; font-weight: bold; color: #111; text-decoration: none; }
.call_number h1{
	font-size: 28px;
    font-weight: bold;
    color: #111;
    text-decoration: none;
	
	}






/* 하단 */


/* ==========================================
   ★ 하단 고정 바 & 퀵 버튼 스타일 (image_173f7b.png 참고 신설)
========================================== */
/* 하단 내비게이션 래퍼 (기본 상태: 화면 아래로 완전히 숨김) */
#bfooter_quick_wrap {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 999;
    padding: 12px 10px;
    box-sizing: border-box;
    background: #fff;
    box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.06);
    display: flex;
    gap: 10px;
    transform: translateY(100%); /* 기본 숨김 */
    transition: transform 0.4s ease-in-out;
	max-width: 1200px;
    margin: 0 auto;
	
} /* 풋터 영역 transform: translateY(100%); 기본 숨김 */

/* image_173f7b.png 형태의 2분할 버튼 스타일 */
#bfooter_quick_wrap .btn_quick_call {
    flex: 1;
   
    text-align: center;
    padding: 14px 0;
    font-size: 16px;
    font-weight: bold;
    border-radius: 6px;
    text-decoration: none;
    letter-spacing: -0.5px;
	background: #454545; 
	color: #fff;
	

	background: #ffffff;
    border: 1px solid #898989;
    color: #454545;
}
#bfooter_quick_wrap .btn_quick_reserve {
    flex: 1;
  
    color: #fff;
    text-align: center;
    padding: 14px 0;
    font-size: 16px;
    font-weight: bold;
    border-radius: 6px;
    text-decoration: none;
    letter-spacing: -0.5px;
	  background: #494949;
	
	background: #9ebd46;  
	color: #fff;
	
} /*   	background: #2ea88a; background: #f0f0f0;
    color: #616161;  border: 1px solid #d8d8d8; */

/* 우측 하단 탑 버튼 (기본 상태: 숨김) */
.btn_scroll_top {
    position: fixed;
    right: 15px;
   bottom: 90px;/* 하단바 바로 위에 위치하도록 조정 */
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    border: none;
    box-shadow: 0 3px 6px rgba(0,0,0,0.15);
    z-index: 998;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease-in-out;
}
.btn_scroll_top svg { width: 16px; height: 16px; fill: #333; }

/* ★ 스크롤이 멈춰 활성화 되었을 때 나타나는 클래스 */
#bfooter_quick_wrap.nav-down {
    transform: translateY(0);
}
.btn_scroll_top.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}




/* ── 하단 풋터 FOOTER ── */
.holiday-bar {
  background: #e8f5ee;
  border-top: 2px solid var(--green);
  padding: 20px 0;
  text-align: center;
  font-size: 17px;
  color: #333;
  font-weight: 500;
      max-width: 1200px;
    margin: 0 auto;
    position: relative;
}
.holiday-bar strong { color: var(--green); }
		
/* ── FOOTER 전체 배경 및 기본 설정 ── */
footer {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;	
  background: #0f243e; /* 이미지의 짙은 네이비 배경색 */
  color: #ffffff;
  padding: 40px 0 0;
  font-family: 'Noto Sans KR', sans-serif;
}

/* 최대 1200px까지 확장되는 이너 박스 */
.footer-inner {
  width: 100%; /* 누락되었던 최대 너비 제한 추가 */
  margin: 0 auto;
  box-sizing: border-box;
}

/* ── 상단 상담번호 영역 ── */
.footer-top-center {
  text-align: center;
  margin-bottom: 25px;
	
}
.footer-top-center a{ color:#fff}	
	

.footer-logo {
  font-size: 22px;
  font-weight: 700;
  color: #bdf036;
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}

.footer-phone {
  font-size: 50px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -1px;
}

/* ── [수정] 진료시간 & 오시는길 (가로 2단 분할 핵심 영역) ── */
.footer-hours {
  display: flex;
  justify-content: center;
  gap: 80px; /* 진료시간 섹션과 오시는길 섹션 사이의 넓은 간격 */
  margin: 0 auto 50px;
  padding: 0 20px;
}

.hours-section {
  display: flex;
  align-items: flex-start;
  gap: 20px; /* 아이콘과 텍스트 사이 간격 */
  flex: 1;
  max-width: 480px; /* 각 섹션이 너무 퍼지지 않도록 폭 제한 */
}

.hours-section img {
  width: 25px; /* 아이콘이 이미지 크기처럼 눈에 잘 띄도록 살짝 키움 */
  height: auto;
  flex-shrink: 0;
  margin-top: 3px;
}

.hours-content {
  width: 100%;
}

/* 타이틀(strong)과 본문(span) 간격 및 줄바꿈 제어 */
.hours-row {
  display: flex;
  align-items: flex-start;
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 12px;
}

.hours-row strong {
  width: 90px; /* 진료일/점심시간 타이틀 영역 확보 */
  color: #ffffff;
  font-weight: 700;
  flex-shrink: 0;
}

.hours-row span {
  color: #ffffff;
  opacity: 0.9;
}

/* 오시는 길 타이틀 별도 스타일 */
.hours-content h3 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 15px 0;
  color: #ffffff;
}

/* 오시는 길 상세 주소 */
.address-text {
  font-size: 18px;
  color: #ffffff;
  font-weight: 500;
  margin-bottom: 10px;
}
.address-sub {
  font-size: 17px;
  color: #edffbd; /* 이미지의 연두빛 도는 텍스트 색상 반영 */
  opacity: 0.9;
  line-height: 1.4;
}

/* ── 핵심 카테고리 ── */
.footer-nav {
  max-width: 450px;
  margin: 0 auto 60px;
  padding: 0 20px;
}

.footer-nav h4 {
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 15px;
}

.category-select-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: #ffffff;
  color: #111111;
  padding: 16px 20px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  box-sizing: border-box;
}
.category-select-btn::after {
  content: '▲';
  font-size: 12px;
  color: #b3b3b3;
}
	
/* 감싸는 컨테이너 위치 기준 설정 */
.category-select-container {
  position: relative;
  width: 100%;
}

/* ── [핵심] 체크박스는 화면에서 완전히 숨김 ── */
.dropdown-checkbox {
  display: none;
}

/* ── 위로 열리는 드롭다운 리스트 기본 상태 ── */
.category-dropdown-list {
  position: absolute;
  bottom: 100%; /* 버튼 바로 위에 붙도록 설정 */
  left: 0;
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
  background: #f0f0f0; /* 첫 번째 이미지의 밝은 회색 톤 배경 */
  border-radius: 6px 6px 0 0;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  box-shadow: 0 -4px 10px rgba(0,0,0,0.15);
  
  /* CSS로 열고 닫기 위해 display 대신 투명도와 높이/정렬로 제어 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.2s ease;
  z-index: 10;
}

/* ── [핵심 CSS 작동 블록] 체크박스가 체크되었을 때(클릭 시) 리스트 노출 ── */

.category-select-container.active .category-dropdown-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}




/* 드롭다운 내부 링크 스타일 */
.category-dropdown-list li a {
  display: block;
  padding: 12px 20px;
  color: #333333;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  transition: background 0.2s;
}

.category-dropdown-list li a:hover {
  background: #d5d5d5;
}

/* 스크롤바 디자인 */
.category-dropdown-list::-webkit-scrollbar {
  width: 6px;
}
.category-dropdown-list::-webkit-scrollbar-track {
  background: transparent;
}
.category-dropdown-list::-webkit-scrollbar-thumb {
  background: #888888;
  border-radius: 3px;
}

/* ── 라벨 버튼 스타일 (a태그에서 라벨로 변경되어 커서 속성 추가) ── */
.category-select-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: #ffffff;
  color: #111111;
  padding: 16px 20px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  box-sizing: border-box;
  cursor: pointer; /* 마우스 오버 시 손가락 모양 생성 */
  position: relative;
  z-index: 11;
  transition: all 0.2s;
}

.category-select-btn::after {
  content: '▲';
  font-size: 12px;
  color: #b3b3b3;
  transition: transform 0.2s;
}

/* ── [핵심 CSS 작동 블록] 체크되었을 때 버튼 모서리 및 화살표 변경 ── */
.category-select-container.active .category-select-btn {
  border-radius: 0 0 6px 6px;
}

.category-select-container.active .category-select-btn::after {
  transform: rotate(180deg);
}
	
	
	

/* ── 하단 회색 영역 (1200px 전체 확장) ── */
.footer-gray-zone {
  background: #4d4b4c; /* 이미지의 하단 회색 배경 */
  padding: 25px 24px 30px;
  text-align: center;
  color: #d1d1d1;
  font-size: 13px;
}

/* 상단 기본 메뉴 링크 */
.meta-links {
  display: flex;             /* inline-flex에서 flex로 변경하여 가로 전체 차지 */
  width: 100%;               /* 부모 너비에 맞게 꽉 채움 */
  margin-bottom: 20px; 
  padding: 0;
  list-style: none;
}
	
.meta-links a {
  flex: 1;                   /* 핵심: 모든 링크가 동일한 비율로 가로 공간을 나눠 가짐 */
  color: #ffffff;
  text-decoration: none;
  font-weight: 400;
  opacity: 0.9;
  text-align: center;        /* 글자를 가운데 정렬 */
  padding: 8px 0;            /* 위아래 클릭 영역 확보 */
  position: relative;
	    font-size: 16px;
}



/* 기존 HTML에 있던 span 구분선은 화면에서 숨김 처리 */
.meta-links span {
  display: none;
}
	
 /* 양 끝 정렬 */	

/* 첫 번째 메뉴(로그인)는 왼쪽 정렬, 마지막 메뉴(회원약관)는 오른쪽 정렬 */
.meta-links a:first-child { text-align: left; }
.meta-links a:last-child { text-align: right; }

	
	.meta-links {
  display: flex;              
  justify-content: center;   /* 전체 메뉴를 가운데로 정렬 */
  align-items: center;
  gap: 16px;                 /* 글자와 구분선 사이의 자연스러운 간격 조정 */
  margin: 0 auto 20px; 
  padding: 0;
  list-style: none;
}
	
.meta-links a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 400;
  opacity: 0.9;
  font-size: 15px;           /* 이미지 비율에 맞게 폰트 크기 살짝 조절 */
  display: inline-block;
  line-height: 1;
}

/* 기존 CSS border 대신, HTML에 있는 파이프(|) 기호 스타일을 자연스럽게 살림 */
.meta-links span {
  display: inline-block !important; /* 숨김 처리했던 span을 다시 표시 */
  color: #777777;            /* 구분선 색상 */
  font-size: 14px;
  opacity: 0.7;
  user-select: none;         /* 드래그 방지 */
}

/* 기존에 추가했던 개별 text-align 및 border-right 속성은 모두 제거합니다. */
.meta-links a:first-child,
.meta-links a:last-child,
.meta-links a:not(:first-child):not(:last-child),
.meta-links a:not(:last-child) {
  text-align: inherit;
  border-right: none;
}

/* ── 미디어 쿼리 (모바일) ── */
@media (max-width: 768px) {
  .meta-links {
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 14px;          /* 모바일에서 줄바꿈 시 위아래/좌우 간격 */
  }
  .meta-links a {
    width: auto;             /* 모바일에서도 글자 크기만큼만 차지하도록 변경 */
  }
  .meta-links span {
    display: inline-block !important;
  }
  /* 모바일 화면 특성상 줄바꿈이 일어날 때 부자연스러운 구분선은 미디어쿼리로 지워주는 것이 좋습니다. */
}
	
	
/* 사업자 정보 */
.company-info {
	margin-bottom: 20px;
  line-height: 1.8;
  text-align: left;
  opacity: 0.8;
	    font-size: 16px;
}


	

	
.link-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}
.link-grid-wide {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.grid-btn {
  border: 1px solid #777;
  padding: 12px 0;
  color: #d1d1d1;
  text-decoration: none;
  font-size: 13px;
  background: transparent;
  transition: all 0.2s;
}
.grid-btn:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

/* 카피라이트 */
.copyright {
  font-size: 13px;
  opacity: 0.6;
  margin-top: 15px;
text-align: center;
	  margin-bottom:15px;
}

/* ── [추가] 모바일/태블릿 소형 스크린 대응 (미디어 쿼리) ── */
@media (max-width: 768px) {
  .footer-hours {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .hours-section {
    max-width: 100%;
    width: 100%;
  }

}







	
	
/* ---------------------------------------------------------
  비용안내 / 예약하기 버튼
--------------------------------------------------------- */
#jinrovi_box{
display: flex;
    gap: 10px;
    padding: 0 20px;
    max-width: 900px;
    margin: 0 auto;
    margin-top: 30px;
	}
	
#biyongbox, #yeyockbox {
    flex: 1;
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 2 / 1.3;
}

/* 비용안내 버튼 (에메랄드 그라데이션) */
#biyongbox a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100%;
    padding: 20px 18px;
    background: linear-gradient(135deg, #269396 0%, #46bfa3 100%);
    color: #fff;
    box-sizing: border-box;
}

/* 예약하기 버튼 (블루 그라데이션) */
#yeyockbox a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    width: 100%;
   align-items: stretch;
    height: 100%;
    padding: 20px 18px;
    background: linear-gradient(135deg, #3058a6 0%, #4a82c5 100%);
    color: #fff;
    box-sizing: border-box;
}

#biyongbox p, #yeyockbox p {
font-size: 28px;
margin-left: 20px;
    font-weight: 500;
    opacity: 0.9;
    letter-spacing: -0.5px;
} /*  margin-bottom: 6px;*/

#biyongbox h1, #yeyockbox h1 {
    font-size: 45px;
    font-weight: 700;
    letter-spacing: -1px;
    margin: 0;
		margin-left: 20px;
}

.cicle_btn {
    position: absolute;
    right: 18px;
    bottom: 18px;
width: 50px;
    height: 50px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
}
.cicle_btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 45%;
    width: 7px;
    height: 7px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: translate(-50%, -50%) rotate(45deg);
}





/*노트북 & 태블릿 가로 : 1024px-1279px*/
@media all and (min-width:1024px) and (max-width:1280px) {

/* 1280px 비용 안내 예약 하기 */

#biyongbox p, #yeyockbox p{
	     font-size: 34px;
        margin-left: 25px;
}


#biyongbox h1, #yeyockbox h1 {
           font-size: 45px;
    	margin-left: 25px;


}

.cicle_btn {
     width: 50px;
        height: 50px;
	right: 15px;
}

}



/*태블릿 가로 : 769px-1023px*/
@media all and (min-width:768px) and (max-width:1023px) {
/* 1023px 비용 안내 예약 하기 */

#biyongbox p, #yeyockbox p{
	  font-size: 25px;
	margin-left: 10px;
	
}


#biyongbox h1, #yeyockbox h1 {
   font-size: 34px;
	margin-left: 10px;

}

.cicle_btn {
	width: 50px;
        height: 50px;
        right: 18px;
}

	

}


	
/*모바일 가로 & 태블릿 세로 : 480px-767px*/
@media all and (min-width:480px) and (max-width:767px) {


/* 767px 비용 안내 예약 하기 */

#biyongbox p, #yeyockbox p{
	font-size: 20px;
	margin-left: 10px;
}


#biyongbox h1, #yeyockbox h1 {
    font-size: 30px;
	margin-left: 10px;
}

.cicle_btn {
	width: 27px;
    height: 27px;
	right: 15px;
}

	
}




/*노트북 & 태블릿 가로 : 1024px-1279px*/
@media all and (min-width:1024px) and (max-width:1280px) {
	
/* 1280px 비용 안내 예약 하기 */

#biyongbox p, #yeyockbox p{
     font-size: 34px;
        margin-left: 25px;
}


#biyongbox h1, #yeyockbox h1 {
           font-size: 45px;
    	margin-left: 25px;


}

.cicle_btn {
     width: 50px;
        height: 50px;
	right: 15px;
}

}



/*태블릿 가로 : 769px-1023px*/
@media all and (min-width:768px) and (max-width:1023px) {

/* 1023px 비용 안내 예약 하기 */

#biyongbox p, #yeyockbox p{
	  font-size: 25px;
	margin-left: 10px;
	
}


#biyongbox h1, #yeyockbox h1 {
   font-size: 34px;
	margin-left: 10px;

}

.cicle_btn {
	width: 50px;
        height: 50px;
        right: 18px;
}
}




/*모바일 가로 & 태블릿 세로 : 480px-767px*/
@media all and (min-width:480px) and (max-width:767px) {

/* 767px 비용 안내 예약 하기 */

#biyongbox p, #yeyockbox p{
	font-size: 20px;
	margin-left: 10px;
}


#biyongbox h1, #yeyockbox h1 {
    font-size: 30px;
	margin-left: 10px;
}

.cicle_btn {
	width: 27px;
    height: 27px;
	right: 15px;
}

}

/*모바일 중형 : 377px-479px */
@media all and (min-width:377px) and (max-width: 479px) {
	
	
/* 479px 비용 안내 예약 하기 */

#biyongbox p, #yeyockbox p{
	font-size: 16px;
	margin-left: 5px;
}


#biyongbox h1, #yeyockbox h1 {
    font-size: 26px;
margin-left: 5px;
}

.cicle_btn {
	width: 26px;
    height: 26px;
	right: 14px;
}
}


/* 모바일 소형 : 200px-376px */
@media all and (min-width:200px) and (max-width: 376px) {	
	
	
/* 376px 비용 안내 예약 하기 */

#biyongbox p, #yeyockbox p{
	font-size: 14px;
	margin-left: 0px;
}


#biyongbox h1, #yeyockbox h1 {
    font-size: 24px;
	margin-left: 0px;
}

.cicle_btn {
width: 25px;
    height: 25px;
	right: 13px;
}

}