/* ============================================================
   pages.css — 19차 신설 전용 페이지(about/tour/equipment/cases/doctors/guide/faq) 공용
   renewal.css는 index 전용이므로, 인덱스 섹션에서 이식한 컴포넌트 스타일을 여기 복사.
   (styles.css / subpage-nav.css 다음에 로드)
   ============================================================ */

/* ── 공통 섹션 래퍼 ── */
.pg-section { padding: 90px 0; }
.pg-section-title { font-size: 40px; font-weight: 900; color: var(--gray-900, #5a4332); margin-bottom: 14px; }
.pg-section-sub { font-size: 16px; color: var(--gray-600, #766A5F); margin-bottom: 48px; }
.pg-eyebrow {
  font-family: 'Playfair Display', serif; font-style: italic; letter-spacing: .12em;
  font-size: 14px; color: var(--main, #5a4332); margin-bottom: 10px;
}

/* ============================================================ 의료진 소개 (doctors.html — 22차 전면 재설계)
   레퍼런스의 골격(카드 → 상세 팝업)만 빌리고 릴리프 브라운 무드로 독자 구성.
   원장 2인 체제라 센터 필터 탭은 두지 않고, 카드에는 검증된 대표 이력만 발췌. */
.dc-head { text-align: center; margin-bottom: 52px; }
.dc-title { font-size: 34px; font-weight: 900; color: var(--gray-900, #5a4332); margin-bottom: 14px; line-height: 1.4; }
.dc-sub { font-size: 16px; color: var(--gray-600, #766A5F); line-height: 1.2; }
/* 68차: 대표님 요청 — "약력 전체 보기" 팝업 버튼을 없애고 상세 이력을 카드에 바로 노출.
   내용이 길어져 기존 2열(1fr 1fr) 카드로는 좁고 과도하게 길어지므로, 원장 1인당 풀폭 1열로
   변경(index.html #section3 .se3_doctor와 동일한 방향). 더 이상 클릭 요소가 아니므로
   cursor/hover 인터랙션도 제거. */
.dc-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
.dc-card {
  display: flex; align-items: stretch; background: #FFFEFC; border: 1px solid rgba(94,69,52,.1); border-radius: 14px;
  overflow: hidden; box-shadow: 0 10px 30px rgba(44,37,32,.06);
}
/* 69차: 사진을 730px 고정 높이로 뒀더니 두 원장 본문 높이(741px/730px)가 서로 살짝 달라서
   김성배 카드에서 사진 아래로 11px짜리 흰 틈(카드 배경)이 보임(대표님 리포트) — 고정값 대신
   다시 align-items:stretch로 각 카드 본문의 실제 높이에 맞추되, min-height만 730px로 걸어
   최소 크기(여백 비율)는 보장. object-fit:contain이라 원본 비율이 깨지지 않고, 늘어난 만큼은
   여백(상하)이 아주 조금 더 넓어질 뿐 잘리거나 찌그러지지 않음. */
.dc-photo { flex: 0 0 400px; min-height: 730px; position: relative; background: linear-gradient(180deg, #F6F1EB, #E9DECF); }
/* 대표님 요청 — 사진이 카드 가장자리까지 꽉 차 있어 답답해 보임: 사방 여백을 둬 배경(그라데이션)이
   프레임처럼 보이도록 함. */
/* 69차: 박스가 본문 높이만큼 세로로 많이 늘어나면서 object-fit:cover가 원본 비율을 맞추려고
   양옆을 심하게 잘라냄(대표님 리포트) — contain으로 바꿔 사진 전체가 잘리지 않고 항상 다
   보이도록 하고, 남는 공간은 박스의 그라데이션 배경이 자연스러운 여백으로 채움.
   그런데도 인물이 프레임 상하좌우 끝에 거의 닿아 답답해 보인다는 재지적 — 여백(inset)을
   14px→40px로 넉넉히 키우고, object-position도 top(위쪽 붙임)에서 center(가운데 정렬)로
   바꿔 사방에 고르게 여백이 생기도록 함. 전신 크롭 자체는 그대로 유지. */
.dc-photo img { position: absolute; inset: 40px; width: calc(100% - 80px); height: calc(100% - 80px); border-radius: 8px; object-fit: contain; object-position: center; display: block; }
.dc-body { flex: 1; min-width: 0; padding: 34px 40px 34px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; }
.dc-badge {
  display: inline-block; padding: 6px 14px; border-radius: 100px;
  background: var(--gray-900, #5a4332); color: #FDFBF9;
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
}
.dc-name { font-size: 27px; font-weight: 900; color: var(--gray-900, #5a4332); margin: 16px 0 2px; }
.dc-name span { font-size: 15px; font-weight: 700; color: var(--main, #5a4332); margin-left: 6px; }
/* 69차: 하이라이트 요약 칩을 빼서(대표님 요청 — 본문 길이를 사진 높이 730px에 맞추기 위해)
   학력부터 바로 시작. 학력·수련처럼 짧은 카테고리는 나란히 2열로 묶어 세로 길이를 줄임 */
.dc-detail-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; width: 100%; }

/* ── 하단 문의 스트립 ── */
.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;
}
/* 31차: 에스프레소 스트립 위 주황 → 크림 (브라운은 다크 배경에서 안 보임)
   47차: 크림 solid 변형(.dc-cta-btn-solid) 폐기 — CTA 버튼 두 개를 같은 고스트 스타일로 통일 */
.dc-cta-btn:hover { border-color: #f6efea; color: #f6efea; }

/* ── 원장 상세 이력(학력·수련·경력·연수학회) — 68차 이전엔 팝업 모달 전용이었으나,
   모달을 없애고 카드 안에 바로 노출하면서 이 스타일을 그대로 재사용 ── */
.dc-sec-title {
  font-size: 19px; font-weight: 900; color: var(--gray-900, #5a4332);
  margin: 30px 0 14px; padding-top: 26px; border-top: 1px solid rgba(94,69,52,.12);
  width: 100%;
}
.dc-week { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 10px; overflow: hidden; }
.dc-week thead th { background: #3A2E22; color: #FDFBF9; font-size: 13.5px; font-weight: 700; padding: 11px; }
.dc-week tbody th { background: #F6F1EB; color: #5E4534; font-size: 14px; font-weight: 700; padding: 11px; width: 40%; border-top: 1px solid rgba(94,69,52,.08); }
.dc-week tbody td { background: #FFFEFC; color: #443B33; font-size: 14px; text-align: center; padding: 11px; border-top: 1px solid rgba(94,69,52,.08); }
.dc-week td.dc-off { color: var(--gray-500, #A2958A); }
.dc-list { width: 100%; }
.dc-list li { position: relative; padding-left: 15px; font-size: 17px; color: #443B33; line-height: 1.85; }
.dc-list li::before {
  content: ''; position: absolute; left: 0; top: .82em;
  width: 5px; height: 5px; border-radius: 50%; background: #bd9865;
}
/* 69차: "연수·학회"처럼 유독 길어지는 목록은 가로 2단으로 흘려 세로 길이를 절반으로 줄임 */
.dc-list--cols { column-count: 2; column-gap: 28px; }
.dc-list--cols li { break-inside: avoid; }

/* ============================================================ 안심가이드 QnA (faq.html — index section_faq 이식) */
.section_faq { background: #F6F1EB; }
.faq_wrap { display: flex; gap: 0; background: #FFFEFC; border-radius: 8px; overflow: hidden; box-shadow: 0 10px 30px rgba(44,37,32,.05); }
.faq_tabs { display: flex; flex-direction: column; flex: 0 0 260px; background: var(--gray-900, #5a4332); }
.faq_tab {
  text-align: left; padding: 22px 28px; font-size: 17px; font-weight: 700;
  color: rgba(255,255,255,.55); border-left: 3px solid transparent;
  transition: color var(--trans,.3s), background var(--trans,.3s), border-color var(--trans,.3s);
}
.faq_tab:hover { color: rgba(255,255,255,.85); }
.faq_tab.active { color: #fff; background: rgba(255,255,255,.06); border-left-color: #f6efea; } /* 31차: 다크 탭바 위 주황 → 크림 */
.faq_panels { flex: 1; padding: 12px 0; }
.faq_panel { display: none; padding: 12px 32px; }
.faq_panel.on { display: block; }
.faq_item { border-bottom: 1px solid var(--gray-200, #EAE3DC); }
.faq_item:last-child { border-bottom: none; }
.faq_q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 4px; text-align: left; font-size: 16px; font-weight: 700; color: var(--gray-900, #5a4332);
}
.faq_icon { flex: none; font-size: 21px; color: var(--main, #5a4332); transition: transform var(--trans,.3s); }
.faq_item.open .faq_icon { transform: rotate(135deg); }
.faq_item.open .faq_q { color: var(--main, #5a4332); }
.faq_a { max-height: 0; overflow: hidden; transition: max-height .3s ease-out; }
.faq_a p { padding: 8px 4px 26px; color: var(--gray-700, #5E5248); font-size: 15px; line-height: 1.2; }
.faq_item.open .faq_a { max-height: 400px; }
.faq_item.open { background: var(--point-bg, #fdf6ec); }

/* ============================================================ 진료시간·오시는 길 (guide.html — 21차 전면 재설계, 라이트 브라운)
   참고 시안의 골격(헤드라인→표/탭→대형 지도→병원 정보 표)만 빌리고 릴리프 무드로 독자 구성. */
.gd-head { text-align: center; margin-bottom: 44px; }
.gd-title { font-size: 34px; font-weight: 900; color: var(--gray-900, #5a4332); margin-bottom: 14px; line-height: 1.4; }
.gd-sub { font-size: 15.5px; color: var(--gray-600, #766A5F); line-height: 1.2; }

/* 공용 표 카드 (진료시간 표 / 병원 정보 표) */
.gd-table-card {
  background: #FFFEFC; border: 1px solid rgba(94,69,52,.1); border-radius: 14px;
  overflow: hidden; box-shadow: 0 10px 30px rgba(44,37,32,.05);
}
.gd-table { width: 100%; border-collapse: collapse; }
.gd-table thead th {
  background: #3A2E22; color: #FDFBF9; font-size: 15px; font-weight: 700;
  padding: 16px 20px; text-align: center;
}
.gd-table tbody th {
  background: #F6F1EB; color: var(--gray-900, #5a4332); font-size: 15px; font-weight: 700;
  padding: 18px 20px; text-align: center; width: 160px;
  border-top: 1px solid rgba(94,69,52,.1);
}
.gd-table tbody td {
  padding: 18px 20px; text-align: center; font-size: 15.5px; color: #443B33;
  border-top: 1px solid rgba(94,69,52,.1); line-height: 1.2;
}
.gd-col-label { width: 160px; }
.gd-col-phone { width: 240px; }
.gd-phone-cell { background: #FDF6EC; }
.gd-phone-label { display: block; font-size: 13px; font-weight: 700; color: var(--gray-600, #766A5F); margin-bottom: 6px; }
.gd-phone { font-size: 24px; font-weight: 900; color: var(--main, #5a4332); white-space: nowrap; }
.gd-tel { font-weight: 900; color: var(--main, #5a4332); }
.gd-dim { color: var(--gray-500, #A2958A); font-size: 14px; }

/* 유의사항 박스 */
.gd-notice {
  margin-top: 18px; padding: 22px 26px; border-radius: 12px;
  background: #F6F1EB; border: 1px solid rgba(94,69,52,.08);
}
.gd-notice p {
  position: relative; padding-left: 16px; margin: 0 0 8px;
  font-size: 14.5px; line-height: 1.2; color: #5E5248;
}
.gd-notice p:last-child { margin-bottom: 0; }
.gd-notice p::before {
  content: ''; position: absolute; left: 0; top: .72em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--main, #5a4332);
}

/* 의료진 진료 안내 카드 */
.gd-doctors { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.gd-doc {
  display: flex; gap: 28px; align-items: center; padding: 30px 32px;
  background: #FFFEFC; border: 1px solid rgba(94,69,52,.08); border-radius: 16px;
  box-shadow: 0 10px 30px rgba(44,37,32,.05);
  transition: transform .25s ease, box-shadow .25s ease;
}
.gd-doc:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(44,37,32,.12); }
.gd-doc-photo {
  flex: none; width: 130px; height: 170px; border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, #EFE7DD 0%, #E2D5C6 100%);
}
.gd-doc-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.gd-doc-info { flex: 1; min-width: 0; }
.gd-doc-name { font-size: 21px; font-weight: 900; color: var(--gray-900, #5a4332); }
.gd-doc-name span { font-size: 13px; font-weight: 700; color: var(--main, #5a4332); margin-left: 6px; }
.gd-doc-role { font-size: 13.5px; font-weight: 700; color: var(--gray-600, #766A5F); margin: 4px 0 14px; }
.gd-doc-week { width: 100%; border-collapse: collapse; }
.gd-doc-week th {
  text-align: left; font-size: 13.5px; font-weight: 700; color: var(--gray-600, #766A5F);
  padding: 7px 0; width: 90px; border-top: 1px solid rgba(94,69,52,.08);
}
.gd-doc-week td { font-size: 14px; color: #443B33; padding: 7px 0; border-top: 1px solid rgba(94,69,52,.08); }
.gd-doc-week td.gd-off { color: var(--gray-500, #A2958A); }
.gd-doc-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; font-size: 13.5px; font-weight: 700; color: var(--main, #5a4332); }

/* 지도 필 탭 + 패널 */
/* 주의: translateX(-50%) 중앙 정렬은 금지 — animate-in 완료 시 styles.css의
   transform:none!important가 보정 transform을 지워 오른쪽으로 밀림. fit-content+margin으로 정렬. */
.gd-tabs {
  display: flex; gap: 4px; padding: 5px; border-radius: 100px;
  background: #F6F1EB; border: 1px solid rgba(94,69,52,.08);
  width: fit-content; margin: 0 auto 26px;
}
.gd-tab {
  padding: 11px 26px; border-radius: 100px; border: none; cursor: pointer; background: none;
  font-size: 15px; font-weight: 700; color: var(--gray-600, #766A5F);
  transition: background .2s, color .2s;
}
.gd-tab.active { background: var(--main, #5a4332); color: #fff; }
.gd-panel { display: none; }
.gd-panel.on { display: block; }
.gd-map {
  height: 520px; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(94,69,52,.12); box-shadow: 0 14px 34px rgba(44,37,32,.08);
  background: #F6F1EB;
}
.gd-map iframe { width: 100%; height: 100%; border: 0; display: block; }
/* 약도 패널: 도식 이미지는 크롭하면 출구 번호 등 정보가 잘리므로 원본 비율 유지 */
.gd-map-img { height: auto; }
.gd-map-img img { width: 100%; height: auto; object-fit: contain; display: block; }
/* 약도(좌) + 거리뷰(우) 2단 배치 — 두 박스를 약도의 원본 비율로 통일해 크기를 똑같이 맞춤.
   약도(도식)는 비율이 같아 무크롭, 거리뷰(사진)만 cover로 위아래를 살짝 잘라 정렬. */
.gd-route-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.gd-route-item .gd-map-img { aspect-ratio: 2544 / 1664; }
.gd-route-item .gd-map-img img { width: 100%; height: 100%; object-fit: cover; }
.gd-route-item { margin: 0; }
.gd-route-item figcaption {
  margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 14.5px; font-weight: 700; color: var(--gray-600, #766A5F);
}
.gd-route-item figcaption i { color: var(--main, #5a4332); font-size: 16px; }
.gd-note { margin-top: 14px; text-align: center; font-size: 14px; color: var(--gray-500, #A2958A); }
.gd-actions { display: flex; gap: 12px; margin-top: 16px; }
.gd-action-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; border-radius: 10px; font-size: 15px; font-weight: 700;
  background: #FFFEFC; color: var(--gray-900, #5a4332); border: 1px solid rgba(94,69,52,.14);
  transition: background .2s, color .2s, border-color .2s;
}
.gd-action-btn i { font-size: 18px; color: var(--main, #5a4332); transition: color .2s; }
.gd-action-btn:hover { background: var(--main, #5a4332); border-color: var(--main, #5a4332); color: #fff; }
.gd-action-btn:hover i { color: #fff; }
.gd-info-title { margin: 54px 0 16px; font-size: 24px; font-weight: 900; color: var(--gray-900, #5a4332); }

/* ============================================================ 병원 개요 (about.html) */
/* 철학 인용 블록 — 인덱스의 다크 사진 섹션 대신 라이트 톤 재구성 */
.pg-philosophy { max-width: 900px; }
.pg-philosophy p { font-size: 17px; line-height: 1.2; color: #443B33; margin-bottom: 18px; }
.pg-philosophy .pg-quote {
  font-size: 22px; font-weight: 700; color: var(--gray-900, #5a4332); line-height: 1.2;
  padding-left: 22px; border-left: 3px solid var(--main, #5a4332); margin: 34px 0 0;
}
/* 진료원칙 3카드 (라이트) */
.pg-principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pg-principle {
  background: #FFFEFC; border: 1px solid rgba(94,69,52,.08); border-radius: 14px;
  padding: 40px 32px; box-shadow: 0 10px 30px rgba(44,37,32,.05);
}
.pg-principle img { width: 52px; height: 52px; margin-bottom: 20px; }
.pg-principle-title { font-size: 24px; font-weight: 900; color: var(--gray-900, #5a4332); line-height: 1.3; margin-bottom: 14px; }
.pg-principle p.cont { font-size: 15px; line-height: 1.2; color: var(--gray-700, #5E5248); }
/* 특별함 카드 오버레이 (renewal.css 웜 버전 복사 — styles.css 순검정 오버라이드) */
.se1_cycle_overlay {
  background: linear-gradient(to top, rgba(20,14,8,.5) 0%, rgba(20,14,8,.15) 40%, transparent 68%);
}
/* 숫자 카드 (index stats-card 이식 — 정적 표기) */
.stats-card {
  display: grid; grid-template-columns: repeat(4, 1fr); padding: 44px 16px;
  background: #FFFEFC; border: 1px solid rgba(94,69,52,.08); border-radius: 16px;
  box-shadow: 0 10px 30px rgba(44,37,32,.05);
}
.stats-item { text-align: center; padding: 4px 20px; border-left: 1px solid rgba(94,69,52,.1); }
.stats-item:first-child { border-left: none; }
.stats-value { display: flex; align-items: baseline; justify-content: center; gap: 4px; margin-bottom: 14px; }
.stats-num {
  font-family: 'Playfair Display', serif; font-weight: 700;
  font-size: 56px; line-height: 1; color: var(--main, #5a4332);
}
.stats-suffix { font-size: 20px; font-weight: 700; color: #5a4332; }
.stats-label { font-size: 16px; font-weight: 700; color: #5a4332; margin-bottom: 6px; }
.stats-desc { font-size: 13.5px; color: #766A5F; line-height: 1.2; }

/* ============================================================ 병원 개요 재디자인 (about.html — 20차)
   강남초이스 병원소개 레퍼런스 번안: 인용 헤드라인 → 대표원장 인사말(레터+사진) →
   진료철학 풀와이드 밴드 → 세 가지 약속(텍스트+라운드 사진 행) → 숫자 카드. */
.ab-quote { text-align: center; padding: 100px 24px 74px; }
.ab-quote-line { font-size: 38px; font-weight: 900; color: var(--gray-900, #5a4332); line-height: 1.45; margin-bottom: 18px; }
.ab-quote-sub { font-size: 16px; color: var(--gray-600, #766A5F); }

.ab-letter { display: flex; gap: 64px; align-items: flex-start; }
.ab-letter-text { flex: 1.2; min-width: 0; }
.ab-letter-title { font-size: 27px; font-weight: 900; color: var(--gray-900, #5a4332); line-height: 1.2; margin-bottom: 30px; }
.ab-letter-text p:not(.ab-letter-title) { font-size: 15.5px; line-height: 1.2; color: #443B33; margin-bottom: 16px; }
.ab-letter-sign { margin-top: 32px; }
.ab-letter-sign b { color: var(--gray-900, #5a4332); }
.ab-letter-photos { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ab-doctor-card {
  border-radius: 16px; overflow: hidden; margin: 0;
  background: linear-gradient(180deg, #EFE7DD 0%, #E2D5C6 100%);
  border: 1px solid rgba(94,69,52,.08); box-shadow: 0 12px 30px rgba(44,37,32,.08);
}
.ab-doctor-card img { width: 100%; height: 300px; object-fit: cover; object-position: top; display: block; }
.ab-doctor-card figcaption { padding: 13px; text-align: center; font-size: 14px; font-weight: 700; color: var(--gray-900, #5a4332); background: #FFFEFC; }

.ab-band {
  position: relative; text-align: center; padding: 110px 24px;
  background: url('./assets/images/main/se2_principle_bg.jpg') center / cover no-repeat;
}
.ab-band::before { content: ''; position: absolute; inset: 0; background: rgba(35,26,17,.78); }
.ab-band-inner { position: relative; }
.ab-band-quote { display: block; font-size: 46px; color: #f6efea; margin-bottom: 6px; } /* 31차: 다크 밴드 위 주황 → 크림 */
.ab-band-title { font-size: 32px; font-weight: 900; color: #fff; line-height: 1.2; margin-bottom: 24px; }
.ab-band-desc { font-size: 15.5px; line-height: 1.2; color: rgba(253,251,249,.82); }

.ab-promise { display: flex; align-items: center; gap: 64px; padding: 58px 0; }
.ab-promise + .ab-promise { border-top: 1px solid rgba(94,69,52,.1); }
.ab-promise-text { flex: 1.15; min-width: 0; }
.ab-promise-label { font-size: 15px; font-weight: 700; color: var(--main, #5a4332); margin-bottom: 8px; }
.ab-promise-title { font-size: 27px; font-weight: 900; color: var(--gray-900, #5a4332); line-height: 1.4; margin-bottom: 22px; }
.ab-promise-eng {
  display: block; margin-top: 6px;
  font-family: 'Playfair Display', serif; font-style: italic; font-weight: 600;
  font-size: 15px; letter-spacing: .08em; color: var(--gray-500, #A2958A);
}
.ab-promise-text p:not(.ab-promise-label):not(.ab-promise-title) { font-size: 15.5px; line-height: 1.2; color: #443B33; }
.ab-promise-photo { flex: 1; min-width: 0; }
.ab-promise-photo img {
  width: 100%; height: 340px; object-fit: cover; display: block;
  border-radius: 16px; box-shadow: 0 14px 34px rgba(44,37,32,.12);
}

/* ============================================================ 병원 둘러보기 (tour.html) */
.tour-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tour-card { border-radius: 14px; overflow: hidden; background: #FFFEFC; border: 1px solid rgba(94,69,52,.08); box-shadow: 0 10px 30px rgba(44,37,32,.05); cursor: zoom-in; transition: transform .25s ease, box-shadow .25s ease; }
.tour-card:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(44,37,32,.12); }
/* ── 사진 라이트박스 (클릭 시 전체 보기 — pages.js가 동적 생성) ── */
.lightbox {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,14,8,.88); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s;
}
.lightbox.on { opacity: 1; visibility: visible; }
.lightbox-figure { margin: 0; max-width: min(1100px, 90vw); text-align: center; }
.lightbox-figure img { max-width: 100%; max-height: 80vh; display: block; margin: 0 auto; border-radius: 10px; box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.lightbox-figure figcaption { margin-top: 14px; color: rgba(253,251,249,.88); font-size: 15px; font-weight: 700; }
.lightbox-close {
  position: absolute; top: 20px; right: 26px; background: none; border: none; cursor: pointer;
  color: rgba(253,251,249,.85); font-size: 36px; line-height: 1; transition: color .2s;
}
.lightbox-close:hover { color: #fffefe; } /* 31차: 다크 오버레이 hover 주황 → 화이트 */
.lightbox-prev, .lightbox-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 26px;
  background: rgba(253,251,249,.1); border: 1px solid rgba(253,251,249,.25); color: #FDFBF9;
  transition: background .2s, border-color .2s, color .2s;
}
.lightbox-prev { left: 26px; }
.lightbox-next { right: 26px; }
/* 31차: 다크 오버레이 위 hover 필 주황 → 크림 필 + 다크 아이콘 */
.lightbox-prev:hover, .lightbox-next:hover { background: #f6efea; border-color: #f6efea; color: #332A22; }
@media (max-width: 767.98px) {
  .lightbox-prev { left: 10px; }
  .lightbox-next { right: 10px; }
  .lightbox-close { top: 12px; right: 14px; }
}
.tour-card img { width: 100%; height: 240px; object-fit: cover; display: block; }
.tour-card figcaption { padding: 16px 20px; font-size: 15px; font-weight: 700; color: var(--gray-900, #5a4332); }
/* 공간 안내 (단일 층 구역 카드) */
.floor-guide { background: #FFFEFC; border: 1px solid rgba(94,69,52,.08); border-radius: 16px; padding: 44px 40px; box-shadow: 0 10px 30px rgba(44,37,32,.05); }
.floor-guide-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 28px; }
.floor-guide-floor {
  font-family: 'Playfair Display', serif; font-weight: 700; font-style: italic;
  font-size: 44px; color: var(--main, #5a4332); line-height: 1;
}
.floor-guide-name { font-size: 20px; font-weight: 700; color: var(--gray-900, #5a4332); }
.floor-zones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.floor-zone { border: 1px solid rgba(94,69,52,.14); border-radius: 10px; padding: 24px 18px; text-align: center; background: #FDFBF9; }
.floor-zone i { font-size: 28px; color: var(--main, #5a4332); display: block; margin-bottom: 12px; }
.floor-zone-name { font-size: 16px; font-weight: 700; color: var(--gray-900, #5a4332); margin-bottom: 6px; }
.floor-zone-desc { font-size: 13px; color: var(--gray-600, #766A5F); line-height: 1.2; }
.floor-guide-note { margin-top: 22px; font-size: 13.5px; color: var(--gray-500, #A2958A); }

/* ============================================================ 장비소개 (equipment.html) */
.equip-list { display: flex; flex-direction: column; gap: 24px; }
.equip-card {
  display: flex; gap: 40px; align-items: stretch; background: #FFFEFC;
  border: 1px solid rgba(94,69,52,.08); border-radius: 16px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(44,37,32,.05);
}
.equip-card:nth-child(even) { flex-direction: row-reverse; }
.equip-photo { flex: 0 0 42%; min-height: 300px; }
.equip-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.equip-body { flex: 1; padding: 44px 44px 44px 4px; display: flex; flex-direction: column; justify-content: center; }
.equip-card:nth-child(even) .equip-body { padding: 44px 4px 44px 44px; }
.equip-tag { font-size: 13px; font-weight: 700; letter-spacing: .1em; color: var(--main, #5a4332); margin-bottom: 10px; }
.equip-name { font-size: 26px; font-weight: 900; color: var(--gray-900, #5a4332); margin-bottom: 14px; }
.equip-desc { font-size: 15px; line-height: 1.2; color: var(--gray-700, #5E5248); }

/* ============================================================ 시술사례 (cases.html — 준비 중) */
.cases-empty {
  text-align: center; background: #FFFEFC; border: 1px solid rgba(94,69,52,.08);
  border-radius: 16px; padding: 110px 24px; box-shadow: 0 10px 30px rgba(44,37,32,.05);
}
.cases-empty i { font-size: 52px; color: var(--main, #5a4332); display: block; margin-bottom: 22px; }
.cases-empty-title { font-size: 26px; font-weight: 900; color: var(--gray-900, #5a4332); margin-bottom: 14px; }
/* 46차: '비수술 치료법 보기' 버튼 제거 — 설명문이 마지막 요소가 되어 하단 여백도 정리 */
.cases-empty-desc { font-size: 15px; line-height: 1.2; color: var(--gray-600, #766A5F); }

/* ============================================================ 반응형 */
@media (max-width: 991.98px) {
  .pg-principles { grid-template-columns: 1fr; }
  .gd-title { font-size: 25px; }
  .gd-doctors { grid-template-columns: 1fr; }
  .gd-route-grid { grid-template-columns: 1fr; }
  .gd-map { height: 380px; }
  .gd-col-phone { width: 170px; }
  .gd-phone { font-size: 18px; }
  .gd-table tbody th { width: 110px; padding: 14px 10px; font-size: 13.5px; }
  .gd-table tbody td { padding: 14px 10px; font-size: 14px; }
  .ab-quote-line { font-size: 26px; }
  .ab-letter { flex-direction: column; gap: 36px; }
  .ab-letter-photos { width: 100%; }
  .ab-doctor-card img { height: 260px; }
  .ab-band-title { font-size: 24px; }
  .ab-promise { flex-direction: column; gap: 28px; padding: 44px 0; }
  .ab-promise-photo { width: 100%; }
  .ab-promise-photo img { height: 240px; }
  .ab-promise-title { font-size: 22px; }
  .tour-grid { grid-template-columns: 1fr 1fr; }
  .floor-zones { grid-template-columns: 1fr 1fr; }
  .dc-title { font-size: 26px; }
  .equip-card, .equip-card:nth-child(even) { flex-direction: column; }
  .equip-body, .equip-card:nth-child(even) .equip-body { padding: 32px 28px; }
  .equip-photo { flex: none; min-height: 0; }
  .equip-photo img { height: 240px; }
  .stats-card { grid-template-columns: 1fr 1fr; row-gap: 36px; padding: 32px 8px; }
  .stats-item:nth-child(3) { border-left: none; }
}
@media (max-width: 767.98px) {
  .pg-section { padding: 60px 0; }
  .pg-section-title { font-size: 28px; }
  .tour-grid { grid-template-columns: 1fr; }
  .floor-zones { grid-template-columns: 1fr; }
  .dc-card { flex-direction: column; }
  /* 세로 스택에서는 사진을 본문 길이에 맞춰 늘릴 필요가 없어 고정 높이로 되돌림.
     position은 relative 유지(img가 absolute로 이 박스를 기준 삼음) */
  .dc-photo { flex: none; height: 320px; min-height: 0; }
  .dc-body { padding: 28px 24px 26px; }
  .dc-detail-grid { grid-template-columns: 1fr; }
  .dc-list--cols { column-count: 1; }
  .dc-cta-title { font-size: 22px; }
  .faq_wrap { flex-direction: column; }
  .faq_tabs { flex-direction: row; flex: none; overflow-x: auto; }
  .faq_tab { flex: 0 0 auto; white-space: nowrap; padding: 16px 20px; border-left: none; border-bottom: 3px solid transparent; }
  .faq_tab.active { border-left-color: transparent; border-bottom-color: #f6efea; } /* 31차 */
  .stats-num { font-size: 42px; }
}

/* ============================================================ 비급여 표 (fees.html / docs.html — 27차)
   gd-table 변형: 항목명이 길어 라벨 th 대신 좌측정렬 td 3열 구조 */
.fee-table thead th:first-child { text-align: left; padding-left: 26px; }
.fee-table tbody td:first-child { text-align: left; padding-left: 26px; font-weight: 700; color: var(--gray-900, #5a4332); }
.fee-table .fee-col-unit { width: 170px; }
.fee-table .fee-col-price { width: 220px; }
.fee-table .fee-price { font-weight: 700; }

/* ============================================================ 릴리프정형외과의 특별함 (about.html — 27차, index se1_cycle 이식) */
.ab-special { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.ab-special-card {
  position: relative; margin: 0; border-radius: 16px; overflow: hidden;
  box-shadow: 0 14px 34px rgba(44,37,32,.14);
}
.ab-special-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ab-special-card figcaption {
  position: relative; z-index: 1; min-height: 430px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 30px 28px;
  background: linear-gradient(180deg, rgba(36,27,17,0) 32%, rgba(36,27,17,.9) 100%);
}
.ab-special-num {
  font-family: 'Playfair Display', serif; font-style: italic; letter-spacing: .08em;
  font-size: 14px; color: #f6efea; margin-bottom: 10px; /* 31차: 다크 그라데이션 위 주황 → 크림 */
}
.ab-special-title { font-size: 22px; font-weight: 900; color: #FDFBF9; line-height: 1.4; margin-bottom: 10px; }
.ab-special-desc { font-size: 14px; color: rgba(253,251,249,.78); line-height: 1.2; }

@media (max-width: 991.98px) {
  .ab-special { grid-template-columns: 1fr; }
  .ab-special-card figcaption { min-height: 340px; }
  .fee-table .fee-col-unit { width: 110px; }
  .fee-table .fee-col-price { width: 140px; }
}

/* ============================================================ 서류 발급 신청 방법 카드 (docs.html — 29차) */
.docs-apply { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.docs-apply-card {
  background: #FFFEFC; border: 1px solid rgba(94,69,52,.1); border-radius: 14px;
  padding: 28px 30px; box-shadow: 0 10px 30px rgba(44,37,32,.05);
}
.docs-apply-card i { font-size: 30px; color: var(--main, #5a4332); display: block; margin-bottom: 12px; }
.docs-apply-title { font-size: 18px; font-weight: 900; color: var(--gray-900, #5a4332); margin-bottom: 10px; }
.docs-apply-list li { position: relative; padding-left: 15px; font-size: 14.5px; color: #443B33; line-height: 1.85; }
.docs-apply-list li::before {
  content: ''; position: absolute; left: 0; top: .78em;
  width: 5px; height: 5px; border-radius: 50%; background: #bd9865;
}
@media (max-width: 767.98px) { .docs-apply { grid-template-columns: 1fr; } }