/* ============================================================
   subpage-nav.css — clinic.html / treatment.html 전용
   15차 GNB 재설계: 5개 대분류 + 드롭다운(데스크톱), 아코디언(모바일).
   서브페이지는 renewal.css(index 전용)를 로드하지 않으므로 별도 파일로 분리.
   styles.css는 계속 무수정 — 필요한 항목만 여기서 오버라이드.
   ============================================================ */

/* ── 데스크톱 드롭다운 ──
   주의: styles.css의 .main_menu ul li a(높이 90px·라인하이트·보더)가 중첩된
   하위메뉴 앵커에도 그대로 매치되므로 전부 명시적으로 되돌려야 함. */
.main_menu > ul > li { position: relative; }
.main_menu .sub_menu {
  /* 37차: 위 모서리 직각 + 위→아래로 내려오는 등장 (renewal.css .nav-sub와 동일) */
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, -10px);
  min-width: 200px; padding: 10px 0; margin: 0; list-style: none;
  display: block; /* 부모 ul의 flex 규칙과 무관하게 세로 나열 */
  border-radius: 0 0 10px 10px; border: 1px solid rgba(94,69,52,.1);
  background: #FFFEFC;
  box-shadow: 0 14px 34px rgba(44,37,32,.14);
  opacity: 0; visibility: hidden;
  transition: opacity .22s ease, transform .22s ease, visibility 0s .22s;
  z-index: 60;
}
/* 대분류→패널 사이 마우스 이동 중 hover 끊김 방지 브리지 */
.main_menu .sub_menu::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.main_menu > ul > li:hover .sub_menu,
.main_menu > ul > li:focus-within .sub_menu {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
  transition: opacity .22s ease, transform .22s ease, visibility 0s;
}
/* 67차: index.html GNB 화이트 전환과 동일 톤(renewal.css .nav-sub) 이식 */
.main_menu .sub_menu li a {
  display: block; height: auto; line-height: 1.5;
  padding: 9px 20px; white-space: nowrap; text-align: center;
  font-size: 14px; font-weight: 700; color: var(--gray-700, #5E5248);
  border-bottom: none;
}
.main_menu .sub_menu li a:hover,
.main_menu .sub_menu li a.active {
  color: var(--main, #5a4332); background: rgba(90,67,50,.06);
  border-bottom: none; font-weight: 700;
}

/* ── 모바일 아코디언 (#mobile_nav) ── */
.mobile_nav .m-acc-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: none; border: none; cursor: pointer; text-align: left;
  padding: 14px 24px; font-size: .95rem; font-weight: 700; color: var(--gray-900, #5a4332);
  border-bottom: 1px solid var(--gray-200, #EAE3DC);
}
.mobile_nav .m-acc-head i { font-size: 18px; color: var(--gray-500, #A2958A); transition: transform .25s ease; }
.mobile_nav .m-acc.open .m-acc-head i { transform: rotate(180deg); }
.mobile_nav .m-acc-body { display: none; margin: 0; padding: 0; list-style: none; background: #F8F4EF; }
.mobile_nav .m-acc.open .m-acc-body { display: block; }
.mobile_nav .m-acc-body li a { padding-left: 40px; font-weight: 400; }

/* ── 비수술 치료 앵커 착지 보정 ──
   다른 페이지에서 treatment.html#nav_target N 으로 진입하면 브라우저 기본 앵커 점프가
   고정 헤더(90px) + 섹션 내비 높이만큼 콘텐츠를 가리므로 여유를 둠. */
.nav_target { scroll-margin-top: 150px; }

/* ============================================================
   17차 통일: index와 같은 웜 팔레트 + 에스프레소 헤더 + 유틸리티 바
   (서브페이지는 renewal.css를 로드하지 않으므로 여기서 동일 값 재정의)
   ============================================================ */
:root {
  --gray-900: #5a4332;
  --gray-700: #5E5248;
  --gray-600: #766A5F;
  --gray-500: #A2958A;
  --gray-200: #EAE3DC;
  --sub: #40342A; /* 구 남색 보조색 → 딥 에스프레소 (증상/원인 소제목 등 — 브라운 무드 통일) */
  /* 31차 — 주황 포인트 전면 폐기: 릴리프 대표색 기준 브라운/크림 재정의 (renewal.css와 동일 블록) */
  --main:     #5a4332;
  --main-300: #B39C8B;
  --main-400: #8C7361;
  --main-600: #4A3628;
  --main-700: #3A2A1E;
  --point:    #f6efea;
}
body.subpage { background: #FDFBF9; }

/* ── 유틸리티 바 (전화·진료시간 — 최상단에서만 표시, subpage-nav.js 토글) ── */
.util-bar {
  position: fixed; top: 0; left: 0; width: 100%; height: 36px; z-index: 1001;
  display: flex; align-items: center; background: #FFFEFC; transition: transform .3s ease;
}
.util-bar-inner { width: var(--wrap); margin-inline: auto; display: flex; align-items: center; gap: 14px; }
.util-item { display: inline-flex; align-items: center; gap: 6px; color: var(--gray-700, #5E5248); font-size: 13px; }
.util-item i { color: var(--main, #5a4332); font-size: 14px; }
.util-sep { width: 1px; height: 11px; background: rgba(94,69,52,.18); }
body.page-scrolled .util-bar { transform: translateY(-100%); }

/* ── 헤더 화이트 전환 (67차 — index top-bar 화이트 전환과 동일 톤) + 유틸바 연동 ── */
.header_wrap {
  background: rgba(255,254,252,.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(94,69,52,.08);
  box-shadow: 0 2px 16px rgba(44,37,32,.05);
  top: 36px; transition: top .3s ease, box-shadow var(--trans, .3s ease);
}
body.page-scrolled .header_wrap { top: 0; }
/* 고정 헤더+유틸바만큼 본문 시작 오프셋 (기존 var(--header-h)에 유틸바 36px 추가) */
body.subpage { padding-top: calc(var(--header-h) + 36px); }
.logo_text_pretendard { color: var(--gray-900, #5a4332); }
.logo_text_eng { color: var(--gray-600, #766A5F); }
.main_menu ul li a { color: var(--gray-900, #5a4332); font-weight: 700; }
.main_menu ul li a:hover, .main_menu ul li a.active { color: var(--main, #5a4332); background: none; border-bottom-color: var(--main, #5a4332); }
.mobile_menu_btn { color: var(--gray-900, #5a4332); }

/* ── 모바일 메뉴 화이트 전환 (67차 — index .side-nav 화이트 전환과 동일 톤) ── */
.mobile_nav { background: #FFFEFC; border-top: 1px solid rgba(94,69,52,.1); }
.mobile_nav .m-acc-head { color: var(--gray-900, #5a4332); border-bottom: 1px solid var(--gray-200, #EAE3DC); }
.mobile_nav .m-acc-head i { color: var(--gray-500, #A2958A); }
.mobile_nav .m-acc-body { background: #F8F4EF; }
.mobile_nav ul li a { color: var(--gray-700, #5E5248); border-bottom: 1px solid var(--gray-200, #EAE3DC); }

@media (max-width: 767.98px) {
  .util-bar { display: none; } /* 모바일은 하단 퀵바가 전화/시간 담당 */
  .header_wrap { top: 0; }
  body.subpage { padding-top: var(--header-h); }
}

/* ============================================================
   clinic.html 부위 탭 척추/관절 그룹 (23차)
   #clinic_tabs는 clinic 전용 id — index section4 탭에는 영향 없음.
   그룹 flex 2:4로 6개 탭 폭을 기존과 동일하게 유지.
   ============================================================ */
#clinic_tabs .clinic-tab-groups { display: flex; gap: 36px; }
#clinic_tabs .clinic-tab-group--spine { flex: 2; }
#clinic_tabs .clinic-tab-group--joint { flex: 4; position: relative; }
#clinic_tabs .clinic-tab-group--joint::before {
  content: ''; position: absolute; left: -18px; top: 26px; bottom: 8px;
  width: 1px; background: rgba(94,69,52,.18);
}
#clinic_tabs .clinic-tab-group-label {
  text-align: center; font-size: 13px; font-weight: 800; letter-spacing: .18em;
  color: var(--gray-500, #A2958A); margin-bottom: 10px;
}
#clinic_tabs ul { border-bottom-color: rgba(94,69,52,.15); }
/* 벤더 그리드(col-4 max-width:33.3% + md:col flex:1)가 그룹 내 균등 분배를 막으므로 캡 해제 */
#clinic_tabs .clinic-tab-group li[class*="col"] { flex: 1 1 0%; max-width: none; }

@media (max-width: 767.98px) {
  #clinic_tabs .clinic-tab-groups { flex-direction: column; gap: 18px; }
  #clinic_tabs .clinic-tab-group--joint::before { display: none; }
  #clinic_tabs .clinic-tab-group li[class*="col"] { flex: 0 0 50%; max-width: 50%; } /* 척추 2개 1행 / 관절 2×2 */
}

/* ── 하단 상담 전화 CTA 스트립 (38차 — clinic.html용, pages.css .dc-cta와 동일 값 복사:
   clinic/treatment은 pages.css를 로드하지 않으므로 여기서 제공. doctors에선 동일 값이라 무해) ── */
.dc-cta { background: linear-gradient(135deg, #33291F, #241B11); padding: 74px 0; }
.dc-cta-inner { text-align: center; }
.dc-cta-title { font-size: 28px; font-weight: 900; color: #FDFBF9; margin-bottom: 10px; }
.dc-cta-sub { font-size: 15px; color: rgba(253,251,249,.62); margin-bottom: 30px; }
.dc-cta-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.dc-cta-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 10px;
  border: 1px solid rgba(253,251,249,.35); color: #FDFBF9; font-size: 15px; font-weight: 700;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.dc-cta-btn:hover { border-color: #f6efea; color: #f6efea; }

/* 39차 — 원내 사진 배경 버전(clinic 전용 모디파이어, index .cta-banner 패턴 재사용)
   46차: doctors.html에도 이식 — 그 페이지는 pages.css(.dc-cta 단색 배경)가 이 파일보다 뒤에
   로드되어 동일 특정도로 사진 배경을 덮었음. 이중 클래스로 특정도를 올려 로드 순서 무관하게 사진이 이김. */
.dc-cta.dc-cta--photo {
  position: relative; overflow: hidden;
  background: url('./assets/images/tour/hospital-tour-01.jpg') center / cover no-repeat;
}
.dc-cta--photo::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(23,18,14,.85) 0%, rgba(35,27,20,.72) 50%, rgba(23,18,14,.85) 100%);
}
.dc-cta--photo .dc-cta-inner { position: relative; z-index: 1; }
/* 진료시간 — 세로 구분선으로 스캔 가능한 3항목 */
.dc-cta-hours {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px 0;
  margin-bottom: 32px; color: rgba(253,251,249,.78); font-size: 14px;
}
.dc-cta-hours span { display: inline-flex; align-items: center; gap: 7px; padding: 0 18px; }
.dc-cta-hours span + span { border-left: 1px solid rgba(253,251,249,.22); }
.dc-cta-hours i { color: #f6efea; font-size: 16px; }
/* 47차: 크림 solid 전화 버튼 폐기 — 두 버튼을 같은 크기의 고스트 스타일로 통일(사용자 요청) */
.dc-cta--photo .dc-cta-actions { align-items: center; }
.dc-cta--photo .dc-cta-sub { margin-bottom: 16px; }
.dc-cta--photo .dc-cta-btn {
  border-color: rgba(253,251,249,.28); color: rgba(253,251,249,.85); font-size: 14.5px;
}

/* ── 개인정보처리방침 모달 내 법정 보존기간 표 (29차) ── */
.pr-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 12px 0 4px; border-radius: 10px; overflow: hidden; }
.pr-table thead th { background: #3A2E22; color: #FDFBF9; font-size: 13.5px; font-weight: 700; padding: 10px; text-align: center; }
.pr-table tbody th { background: #F6F1EB; color: #5E4534; font-size: 13.5px; font-weight: 700; padding: 10px 14px; text-align: left; border-top: 1px solid rgba(94,69,52,.08); }
.pr-table tbody td { background: #FFFEFC; color: #443B33; font-size: 13.5px; text-align: center; padding: 10px; border-top: 1px solid rgba(94,69,52,.08); width: 130px; }

/* ============================================================ 푸터 — index와 동일 구조 (30차, 67차 화이트 전환)
   renewal.css의 푸터 블록과 동일 값 (서브페이지는 renewal.css 미로드) */
.footer-band { width: 100%; background: #FFFEFC; border-top: 1px solid rgba(94,69,52,.1); }
.footer-nav { width: 100%; max-width: 1760px; margin: 0 auto; padding: 60px 60px 32px; box-sizing: border-box; }
.footer-top { display: flex; flex-wrap: wrap; gap: 90px; padding-bottom: 40px; border-bottom: 1px solid rgba(94,69,52,.12); }
.footer-col { flex: 0 1 auto; min-width: 0; }
.footer-col-brand { margin-right: auto; }
.footer-brand-row { display: flex; align-items: center; gap: 12px; } /* 55차: 로고 옆 병원명 노출 */
.footer-brand-name { color: var(--gray-900, #5a4332); font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.footer-brand-desc { margin-top: 14px; max-width: 340px; color: var(--gray-600, #766A5F); font-size: 13.5px; line-height: 1.2; } /* 56차: 브랜드 열 하단 보강 */
.footer-top > .footer-col:last-child { margin-right: 100px; } /* 우측 끝에서 살짝 안쪽으로 */
.footer-col-title { color: var(--gray-900, #5a4332); font-size: 15px; font-weight: 700; margin-bottom: 14px; }
.footer-col-brand .footer-tagline { margin-top: 12px; color: var(--gray-600, #766A5F); font-size: 13px; }
.footer-col p { color: var(--gray-700, #5E5248); font-size: 14px; line-height: 1.2; margin: 0 0 4px; }
.footer-phone { color: var(--main, #5a4332) !important; font-size: 20px !important; font-weight: 700; margin-bottom: 8px !important; }
.footer-quick { display: flex; flex-direction: column; gap: 10px; }
.footer-quick a { color: var(--gray-700, #5E5248); font-size: 14px; transition: color .2s; }
.footer-quick a:hover { color: var(--main, #5a4332); }
.footer-bottom { padding-top: 24px; }
.footer-policy { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-bottom: 18px; }
.footer-policy a { color: var(--gray-700, #5E5248); font-size: 13px; font-weight: 700; transition: color .2s; }
.footer-policy a:hover { color: var(--main, #5a4332); }
.copyright p { font-size: 13px; line-height: 1.2; color: var(--gray-500, #A2958A); }
.copyright b { color: var(--gray-700, #5E5248); }

@media (max-width: 767.98px) {
  .footer-band { padding-bottom: 85px; } /* 모바일 하단 퀵바(고정)가 가리는 만큼 여유 */
  .footer-nav { padding: 40px 24px 24px; }
  .footer-top { flex-direction: column; gap: 28px; padding-bottom: 28px; }
  .footer-top > .footer-col:last-child { margin-right: 0; }
  .footer-quick { flex-direction: row; flex-wrap: wrap; gap: 12px 18px; }
  .footer-policy { gap: 8px 18px; }
}

/* ============================================================ 플로팅 퀵메뉴 + 맨 위로 (30차 — renewal.css와 동일 컴포넌트) */
.go_top_btn {
  position: fixed; right: 24px; bottom: 88px; z-index: 850;
  width: 60px; height: 60px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--main, #5a4332); color: #fff; font-size: 24px;
  box-shadow: 0 6px 18px rgba(20,14,8,.28); border: none; cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s;
}
.go_top_btn.show { opacity: 1; visibility: visible; transform: none; }
.go_top_btn:hover { background: #332A22; }
.quick-menu {
  position: fixed; right: 24px; bottom: 160px; z-index: 850; /* go_top(60px, bottom 88) 위 12px 간격 */
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s;
}
.quick-menu.show { opacity: 1; visibility: visible; transform: none; }
.quick-menu-toggle {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 60px; height: 60px; border-radius: 16px; border: none; cursor: pointer;
  background: var(--main, #5a4332); color: #fff; font-size: 10px; font-weight: 700;
  box-shadow: 0 6px 18px rgba(20,14,8,.28);
  transition: background .2s ease;
}
.quick-menu-toggle i { font-size: 21px; transition: transform .25s ease; }
.quick-menu-toggle:hover { background: #4a3628; } /* 31차: 딥 오렌지 → 딥 브라운 */
.quick-menu.open .quick-menu-toggle i { transform: rotate(45deg); }
.quick-menu-panel {
  display: flex; flex-direction: column; overflow: hidden; border-radius: 14px;
  background: #FFFEFC; border: 1px solid rgba(94,69,52,.12);
  box-shadow: 0 10px 30px rgba(44,37,32,.2);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.quick-menu.open .quick-menu-panel { opacity: 1; visibility: visible; transform: none; }
.quick-menu-link {
  display: flex; align-items: center; gap: 10px; padding: 13px 18px; white-space: nowrap;
  font-size: 14px; font-weight: 700; color: #5a4332;
  border-bottom: 1px solid rgba(94,69,52,.08);
  transition: background .2s ease, color .2s ease;
}
.quick-menu-link:last-child { border-bottom: none; }
.quick-menu-link i { color: var(--main, #5a4332); font-size: 17px; }
.quick-menu-link:hover { background: rgba(90,67,50,.07); color: var(--main, #5a4332); }

@media (max-width: 767.98px) {
  .quick-menu { display: none; } /* 모바일은 하단 퀵바가 같은 역할 */
  .go_top_btn { right: 16px; bottom: calc(60px + env(safe-area-inset-bottom) + 16px); width: 44px; height: 44px; font-size: 18px; border-radius: 50%; }
}

/* ============================================================ 31차 — 주황 리터럴 오버라이드
   styles.css에 하드코딩된 #eb6100 계열을 같은 셀렉터로 뒤에서 덮어씀 (renewal.css와 동일 정책).
   clinic/treatment의 부위·치료 탭, 치료 태그, 권리·의무/개인정보 모달이 대상. */
.bh_tab_btn.active, .bh_tab_btn:hover { color: #5a4332; border-bottom-color: #5a4332; }
.tag_wrap span {
  background: rgba(90,67,50,.07); color: #5a4332;
  border: 1px solid rgba(90,67,50,.22);
}
.pr-section__title { color: #5a4332; }
.pr-item__desc a { color: #5a4332; }
/* styles.css 모바일 블록의 리터럴 (clinic #section4 탭 필 / treatment #section6 내비) */
@media (max-width: 991.98px) {
  #section4 .bh_tab3 .bh_tab_btn.active, #section5 .bh_tab3 .bh_tab_btn.active { background-color: #5a4332; }
  #section6 .navcon.active { background-color: #5a4332; border-bottom-color: #5a4332; }
}