/* ============================================================
   renewal.css — test2.html 전용
   원본 게임 사이트 CSS(assets/vendor/ananta/*)를 기반으로,
   병원 콘텐츠에 맞춘 레이아웃 보정 + 신규 컴포넌트 스타일.
   ============================================================ */

* { -webkit-tap-highlight-color: transparent; }
html, body { overflow-x: hidden; }

/* ============================================================ 웜 브라운 무드 팔레트
   "깔끔한 배경에 은은한 브라운" 디렉션: 순수 블랙/화이트/중립 그레이를 전부 브라운 기가 도는
   톤으로 치환. styles.css의 :root보다 뒤에 로드되므로 변수 재정의만으로 회색 스케일 전체가
   전환됨 (renewal.css는 index.html에만 링크 — 서브페이지에는 영향 없음). */
:root {
  --gray-900: #5a4332;  /* 텍스트·다크 표면: 차콜 브라운 */
  --gray-700: #5E5248;
  --gray-600: #766A5F;
  --gray-500: #A2958A;
  --gray-200: #EAE3DC;
  /* 31차 — 주황 포인트 전면 폐기(사용자: 튀어서 고급스럽지 않음).
     릴리프 대표색 3종(#f6efea 베이지 / #fffefe 니어화이트 / #5a4332 브라운) 기준으로
     styles.css의 오렌지 --main 램프·호박색 --point를 브라운/크림 계열로 재정의.
     var(--main) 참조처(밝은 배경 포인트 전부)는 이 한 블록으로 일괄 전환됨. */
  --main:     #5a4332;
  --main-300: #B39C8B;
  --main-400: #8C7361;
  --main-600: #4A3628;
  --main-700: #3A2A1E;
  --point:    #f6efea; /* index se8 진료시간 다크 패널 전용 강조색 */
}

/* 원본 ananta CSS의 body{padding-bottom:4.5833vw}가 미디어쿼리 없이 전 구간에 살아있어서
   푸터 아래에 늘 흰 여백(body 기본 배경색)이 남아있었음 — 무력화.
   배경은 styles.css의 #fff 대신 웜 오프화이트로. */
body { font-family: 'Noto Sans KR', sans-serif; padding-bottom: 0 !important; background: #FDFBF9; }
/* styles.css 소유라 직접 못 고치는 라이트 섹션 배경들 — 순백/중립 그레이를 웜톤으로 오버라이드 */
.section1 { background: #F6F1EB; } /* 68차: 대표님 요청 — "특별함" 섹션 배경을 웜 베이지로 */
.section3 { background: #F6F1EB; } /* 68차: 대표님 요청 — "의료진" 섹션 배경을 웜 베이지로 */
.section7 { background: #F6F1EB; }
/* 특별함 카드 오버레이(styles.css): 순검정 65%가 이미지 전체 높이에 깔려 사진이 무겁고 칙칙했음 —
   하단 알파를 낮추고 주 밀도를 하단 40%로 좁혀 사진 상부가 살아나게, 색도 웜 브라운블랙으로. */
.se1_cycle_overlay {
  background: linear-gradient(to top, rgba(20,14,8,.5) 0%, rgba(20,14,8,.15) 40%, transparent 68%);
}

/* ============================================================ 원본 CSS에 박혀있던 넷이즈 게임 애셋(로고/아이콘) 배경이미지 제거
   (html[lang="ko"] .main-logo, .scroll-tips, .news-title 등에 anantagame.com 이미지가 background로 하드코딩되어 있었음) */
html[lang="ko"] .main-logo,
.main-logo {
  background-image: none !important;
  width: auto !important; height: 40px !important; /* 61차: 로고 확대(32→40px)에 맞춰 컨테이너도 동기화 */
}
.scroll-tips {
  background-image: none !important;
  width: auto !important; height: auto !important;
  font-family: 'remixicon' !important; font-size: 26px !important;
  color: rgba(255,255,255,.8) !important;
  animation: renewalScrollBounce 1.6s ease-in-out infinite;
}
/* 원본은 .center-content 안에서 CTA 버튼 바로 아래 순서로만 놓여, 텍스트 길이에 따라
   위치가 밀림 — 히어로 하단 중앙에 항상 고정되도록 .fixed-cnt(position:absolute) 기준
   절대 위치로 배치. (마크업도 .center-content 밖, .fixed-cnt 직계 자식으로 이동시킴) */
.home-section .scroll-tips {
  position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); z-index: 3;
}
.scroll-tips::before { content: "\ea50"; } /* ri-arrow-down-s-line */
@keyframes renewalScrollBounce {
  0%, 100% { transform: translateY(0); opacity: .75; }
  50% { transform: translateY(10px); opacity: 1; }
}

/* ============================================================ 유틸리티 바 (헤더 위 안내 줄)
   전화·진료시간 안내 — 스크롤 최상단에서만 보이고, 스크롤을 시작하면 접히며 헤더가 맨 위로
   붙음(renewal.js가 body에 .page-scrolled 토글). 데스크톱 전용: 모바일은 하단 퀵바가 담당. */
.util-bar {
  position: fixed; top: 0; left: 0; width: 100%; height: 36px; z-index: 50; /* 헤더와 동일 레벨 */
  display: flex; align-items: center; background: #231A11;
  padding: 0 5.2083vw; transition: transform .3s ease;
}
.util-bar-inner { display: flex; align-items: center; gap: 14px; }
.util-item { display: inline-flex; align-items: center; gap: 6px; color: rgba(253,251,249,.8); font-size: 13px; }
.util-item i { color: #f6efea; font-size: 14px; } /* 31차: 다크 바 위 주황 → 크림 */
.util-sep { width: 1px; height: 11px; background: rgba(253,251,249,.25); }
body.page-scrolled .util-bar { transform: translateY(-100%); }

/* ============================================================ TOP BAR */
/* 원본은 position:absolute라 스크롤하면 페이지 맨 위에 남겨진 채 그냥 사라짐 — fixed 상시
   고정으로 전환. 최상단에선 유틸바(36px) 아래에서 시작했다가 스크롤하면 맨 위(top:0)로 붙음.
   (기존 "아래 스크롤 시 숨김" 스마트 스티키는 상시 고정 요청으로 제거) */
/* z-index 50: 벤더 원본(9)은 진료철학 콘텐츠(#section2 .se2_wrap, z:11)보다 낮아 스크롤 중
   헤더가 섹션 뒤로 가려졌음 — 섹션 콘텐츠(≤11)보다 높고 사이드메뉴(99)/퀵메뉴(850)/모달(9999)보다 낮게. */
.top-bar { position: fixed; top: 36px; z-index: 50; transition: top .3s ease; }
body.page-scrolled .top-bar { top: 0; }
/* 벤더 원본 #141414(순검정)이 그대로 살아있었음 — 브랜드 컨셉 컬러(브라운)에 맞춰
   딥 에스프레소 반투명 + 블러로 교체 (대표님 디렉션). */
.top-bar { background: rgba(42,33,24,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
/* 61차: 대표님 요청으로 헤더(로고·병원명·대분류 메뉴) 크기 일괄 확대 (벤더 0.8333vw → 1.0417vw ≈ 16→20px) */
.top-bar .nav-item { color: rgba(253,251,249,.88); font-size: 1.0417vw; line-height: 1.2; }
/* 로고 마크 옆 병원명 — 국문은 본문 폰트 볼드, 영문 보조는 컨셉 세리프(Playfair) 이탤릭 */
.top-bar .main-logo { display: flex; align-items: center; gap: 0.6250vw; }
.logo-name { display: flex; flex-direction: column; justify-content: center; }
.logo-name-ko { color: #FDFBF9; font-size: 1.25vw; font-weight: 700; line-height: 1.2; letter-spacing: .01em; } /* 61차: 0.9896vw → 1.25vw */
.logo-name-en {
  margin-top: 0.1563vw; font-family: 'Noto Sans KR', sans-serif; font-style: normal; font-weight: 500;
  font-size: 0.7813vw; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; /* 61차: 0.6250vw → 0.7813vw */
  color: rgba(253,251,249,.65);
}
/* GNB 드롭다운: 대분류 hover(또는 키보드 포커스) 시 헤더와 같은 에스프레소 글래스 패널.
   .nav-group이 flex 아이템(기존 .nav-menu gap 유지), 패널은 대분류 아래 중앙 정렬. */
/* .nav-group의 height:100%가 실제 헤더 높이(3.8542vw)까지 닿으려면 부모 체인
   (.top-bar-left → .nav-menu)에도 높이가 있어야 함 — 없으면 텍스트 줄높이(~12px)만큼만
   잡혀서 드롭다운(top:100%)이 헤더 하단이 아니라 헤더 안쪽 42px 지점에서 시작해 파묻혀 보임. */
/* flex:1 + space-between: 로고는 왼쪽 끝, 메뉴는 오른쪽 끝 (참고 시안의 우측 정렬) */
.top-bar .top-bar-left { height: 100%; flex: 1; justify-content: space-between; }
.top-bar .nav-menu { height: 100%; }
.nav-group { position: relative; display: flex; align-items: center; height: 100%; }
.nav-sub {
  /* 37차: 위 모서리 직각(헤더에서 이어진 패널처럼) + 위→아래로 내려오는 등장 */
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, -10px);
  display: flex; flex-direction: column; min-width: 12.5vw; padding: 0.6250vw 0;
  border-radius: 0 0 10px 10px; border: 1px solid rgba(253,251,249,.08);
  background: rgba(42,33,24,.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden;
  transition: opacity .22s ease, transform .22s ease, visibility 0s .22s;
}
/* 대분류→패널로 마우스가 건너가는 사이 hover가 끊기지 않게 투명 브리지 */
.nav-sub::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-group:hover .nav-sub,
.nav-group:focus-within .nav-sub {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
  transition: opacity .22s ease, transform .22s ease, visibility 0s;
}
.nav-sub a {
  display: block; padding: 0.5729vw 1.3542vw; white-space: nowrap; text-align: center;
  color: rgba(253,251,249,.85); font-size: 0.8854vw; line-height: 1.5; /* 61차: 대분류 확대에 맞춰 0.7813vw → 0.8854vw */
  transition: color .2s, background .2s;
}
.nav-sub a:hover { color: #fffefe; background: rgba(255,255,255,.04); } /* 31차: 다크 패널 hover 주황 → 화이트 */
.top-bar .main-logo img { height: 40px; display: block; } /* 61차: 32px → 40px */
.top-bar .nav-item { cursor: pointer; }
.side_nav_toggle {
  display: none; width: 2.6042vw; height: 2.6042vw; font-size: 2.0833vw; color: #fff;
  align-items: center; justify-content: center;
}

/* ============================================================ HOME SECTION (히어로) */
/* 원본은 height:50vh였으나, 이는 GSAP이 home-section↔role-section 핀 전환을 정교하게 겹쳐 조율하는 걸
   전제로 한 값. 이번 구현은 role-section만 핀 처리하므로, 히어로가 온전한 뷰포트를 차지하도록 보정. */
.home-section { height: 100vh; position: relative; }
.hero-kv-swiper, .hero-kv-swiper .swiper-wrapper, .hero-kv-swiper .swiper-slide { width: 100%; height: 100%; }
.hero-kv-swiper .swiper-slide { overflow: hidden; } /* 켄 번즈 확대분이 슬라이드 밖으로 새지 않게 */
/* 켄 번즈 효과: 활성 슬라이드가 될 때마다 8초 줌인(일부는 패닝 포함) 애니메이션이 처음부터 재생.
   비활성 기본 상태는 시작값(1.02)이 아니라 끝값(1.14) — 시작값으로 두면 나가는 슬라이드가
   active를 잃는 순간 1.2초 크로스페이드 도중에 눈에 보이는 채로 축소 스냅이 생기기 때문.
   들어오는 슬라이드의 1.14→1.02 리셋은 opacity 0 시점에 일어나 보이지 않음. */
/* 주의: 벤더 CSS(.home-section .kv img)가 이미지를 position:absolute; top:50%; left:50% +
   translate(-50%,-50%)로 중앙정렬하고 있음. transform은 속성 단위로 통째로 대체되므로
   scale만 쓰면 중앙정렬 translate가 사라져 이미지가 우하단으로 밀림 — 모든 transform에
   translate(-50%,-50%)를 반드시 함께 포함할 것. */
.hero-kv-swiper .swiper-slide img {
  width: 100%; height: 100%; object-fit: cover;
  transform: translate(-50%, -50%) scale(1.14); will-change: transform;
}
.hero-kv-swiper .swiper-slide-active img { animation: kvZoom 8s ease-out forwards; }
.hero-kv-swiper .swiper-slide-active.kv-pan-r img { animation-name: kvPanR; }
.hero-kv-swiper .swiper-slide-active.kv-pan-l img { animation-name: kvPanL; }
@keyframes kvZoom {
  from { transform: translate(-50%, -50%) scale(1.02); }
  to   { transform: translate(-50%, -50%) scale(1.14); }
}
/* 패닝은 시작 scale 1.06(좌우 3% 여유)이라 ±1.5% 이동에도 이미지 가장자리가 드러나지 않음 */
@keyframes kvPanR {
  from { transform: translate(-51.5%, -50%) scale(1.06); }
  to   { transform: translate(-49%, -50%) scale(1.14); }
}
@keyframes kvPanL {
  from { transform: translate(-48.5%, -50%) scale(1.06); }
  to   { transform: translate(-51%, -50%) scale(1.14); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-kv-swiper .swiper-slide-active img { animation: none; }
}
.home-section .center-content { text-align: center; width: 100%; padding: 0 24px; }
/* 65차: 이탤릭 세리프 대신 자간 넓힌 산세리프로 — 아래 hero_title(세리프 이탤릭)과 톤 대비되는
   담백한 영문 태그라인. 헤더 로고의 .logo-name-en과 동일한 방향으로 통일. */
.hero_eyebrow {
  font-family: 'Noto Sans KR', sans-serif; font-style: normal; font-weight: 600;
  letter-spacing: 0.25em; text-transform: uppercase;
  font-size: 0.9375vw; line-height: 1.4; color: rgba(255,255,255,.8); margin-bottom: 0.8333vw;
}
.hero_title {
  font-family: 'Playfair Display', serif; font-weight: 700; font-style: italic;
  font-size: 4.6875vw; line-height: 1.15 !important; color: #fff; text-shadow: 0 4px 24px rgba(0,0,0,.35);
}
.hero_sub { margin-top: 0.7292vw; font-size: 1.4583vw !important; line-height: 1.4 !important; color: #fff; font-weight: 500; }
.home-section .reserve-btn { width: auto; white-space: nowrap; padding: 0 1.7708vw; }
/* 68차: 대표님 리뷰 — 히어로 사진 하단이 불투명 다크브라운(#2E2519, 100%)이라 첫 화면이
   전체적으로 어둡게 느껴짐. 재리뷰에서 "특별함" 카드 오버레이(.se1_cycle_overlay, 아래)가
   더 잘 만든 방식이라며 같은 방식으로 통일해달라 하셔서, 동일한 컬러·그라데이션 커브를
   그대로 재사용 — inset:0으로 전체를 덮되 알파 .5로 시작해 40%에서 .15로, 68% 지점에서
   완전 투명해져 사진 상단 대부분은 그대로 밝게 보임. */
.home-section .front-mask {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,14,8,.5) 0%, rgba(20,14,8,.15) 40%, transparent 68%);
  pointer-events: none;
}
/* 슬라이드가 밝은 사진으로 넘어갈 때도 중앙 텍스트 대비가 유지되도록 은은한 비네트 추가 */
.home-section .kv { position: relative; }
.home-section .kv::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(0,0,0,.32) 0%, rgba(0,0,0,0) 70%);
  pointer-events: none;
}

/* ============================================================ STATS SECTION (숫자로 보는 릴리프)
   레퍼런스(강남초이스) 스타일 재해석: 라이트 배경에 왼쪽 카피 + 오른쪽 라운드 사진,
   아래에 떠 있는 라운드 통계 카드. 색은 레퍼런스의 파랑 대신 브라운 무드 팔레트.
   진입 시 핀 고정 + 카운트업(renewal.js)은 유지 — 데스크톱 100vh 안에 전부 들어오게 컴팩트 구성. */
.stats-section {
  background: #F6F1EB; min-height: 100vh;
  display: flex; align-items: center; justify-content: center; padding: 70px 5.5vw;
}
/* 61차: 대표님 요청 임시 비활성화 — hidden 속성이 위 display:flex에 지지 않도록 보강 */
.stats-section[hidden] { display: none !important; }
.stats-inner { width: 100%; max-width: 1200px; }
.stats-intro { display: flex; align-items: center; gap: 64px; margin-bottom: 56px; }
.stats-copy { flex: 1; min-width: 0; }
.stats-eyebrow {
  font-family: 'Playfair Display', serif; font-style: italic; letter-spacing: .12em;
  font-size: 14px; color: var(--main, #5a4332); margin-bottom: 14px;
}
.stats-heading { font-size: 40px; font-weight: 700; color: #5a4332; line-height: 1.3; margin-bottom: 22px; }
.stats-para { font-size: 16px; color: #766A5F; line-height: 1.2; }
.stats-photo { flex: 1; min-width: 0; }
.stats-photo img {
  width: 100%; height: 340px; object-fit: cover; display: block;
  border-radius: 20px; box-shadow: 0 16px 40px rgba(44,37,32,.12);
}
.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);
  font-variant-numeric: tabular-nums; /* 카운트업 중 자릿수 흔들림 방지 */
}
.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; }
/* 등장 애니메이션: 카피(좌)→사진(우)→카드(아래)가 --sa-delay 간격으로 순차 등장.
   .stats-in은 카운트업과 같은 ScrollTrigger에서 부여(renewal.js). */
.stats-anim { opacity: 0; transition: opacity .7s ease, transform .7s ease; transition-delay: var(--sa-delay, 0s); }
.stats-copy.stats-anim { transform: translateX(-28px); }
.stats-photo.stats-anim { transform: translateX(28px); }
.stats-card.stats-anim { transform: translateY(30px); }
.stats-section.stats-in .stats-anim { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .stats-anim { opacity: 1; transform: none; transition: none; }
}
/* 숫자 "라이브 전광판" 연출: 카운트업 착지 시 팝, 이후 간헐적으로 하나씩 잔잔하게 틱 */
.stats-value { transform-origin: center bottom; }
.stats-value.num-pop { animation: statsPop .4s ease; }
.stats-value.num-tick { animation: statsTick .5s ease; }
@keyframes statsPop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes statsTick { 0% { transform: scale(1); } 40% { transform: scale(1.045); } 100% { transform: scale(1); } }

/* ============================================================ SIDE NAV */
.side-nav.open { display: block; }
.side-nav .mask-bg { position: absolute; inset: 0; background: rgba(20,14,8,.45); }
/* 벤더의 화이트 글래스(rgba(255,255,255,.17)) 패널을 헤더와 같은 에스프레소 톤으로 통일 */
.side-nav .bg { background: rgba(42,33,24,.94); }
.side-nav .cnt { display: flex; flex-direction: column; }
.side-nav.open .cnt { transform: translate(0); }
.side-nav-top { display: flex; justify-content: flex-end; }
.toggle-btn { width: 2.6042vw; height: 2.6042vw; color: #fff; font-size: 1.7708vw; display: flex; align-items: center; justify-content: center; }
.side-nav .nav-links { display: flex; flex-direction: column; gap: 1.8750vw; margin-top: 3.1250vw; }
.side-nav .nav-links .item { color: #fff; font-size: 1.5625vw !important; line-height: 1.4 !important; font-weight: 700; }
/* 사이드내비 아코디언(5개 대분류 → 하위 펼침, renewal.js 토글).
   사이드내비는 모바일 전용으로만 노출되므로 px 단위 사용. */
.side-nav .nav-acc-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: none; border: none; padding: 0; cursor: pointer; text-align: left;
}
.side-nav .nav-acc-head i { color: rgba(253,251,249,.55); font-size: 20px; transition: transform .25s ease; }
.side-nav .nav-acc.open .nav-acc-head i { transform: rotate(180deg); }
.side-nav .nav-acc-body {
  display: flex; flex-direction: column; gap: 12px; overflow: hidden;
  max-height: 0; padding: 0 0 0 12px; transition: max-height .3s ease, padding .3s ease;
}
.side-nav .nav-acc.open .nav-acc-body { max-height: 420px; padding-top: 14px; }
.side-nav .nav-acc-body a { color: rgba(253,251,249,.72); font-size: 15px; line-height: 1.4; }
.side-nav .nav-acc-body a:active, .side-nav .nav-acc-body a:hover { color: #fffefe; } /* 31차: 다크 드로어 hover 주황 → 화이트 */
.side_nav_contact { display: flex; flex-direction: column; gap: 1.2500vw; margin-top: 3.6458vw; }
.side_nav_contact a { display: flex; align-items: center; gap: 0.7292vw; color: rgba(255,255,255,.8); font-size: 1.0417vw !important; line-height: 1.4 !important; }
.side_nav_contact a i { color: #f6efea; font-size: 1.3542vw; } /* 31차: 다크 드로어 아이콘 주황 → 크림 */

/* ============================================================ FOOTER
   원본은 .footer-nav 자체에 배경색 없이 width:1108px 고정이라, 넓은 화면에서는
   다크 배경이 화면 폭을 못 채우고 좌우로 흰 여백(병원 styles.css의 body{background:#fff})이
   보였음 — 다크 배경을 풀블리드 .footer-band로 분리하고, .footer-nav는 그 안에서
   콘텐츠 정렬(최대폭 1108px)만 담당하도록 재구성. 참고 디자인처럼 로고/연락처/바로가기
   3컬럼 + 하단 사업자정보 바 구조. */
.footer-band { width: 100%; background: #1C1610; }
/* 1108px 고정폭은 와이드 화면에서 좌우로 큰 공백을 만들며 가운데로 뭉쳐 보였음 —
   거의 풀폭(1760px 상한 + 좌우 60px 패딩)으로 펼쳐 로고는 왼쪽, 링크는 오른쪽 끝까지 배치. */
.footer-nav { position: static; width: 100%; max-width: 1760px; margin: 0 auto; padding: 60px 60px 32px; box-sizing: border-box; display: block; }
/* 로고는 왼쪽 고정, 연락처·바로가기 두 컬럼은 우측 끝으로 묶음 (30차 사용자 요청) */
.footer-top { display: flex; flex-wrap: wrap; gap: 90px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.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: #fff; font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.footer-brand-desc { margin-top: 14px; max-width: 340px; color: rgba(255,255,255,.5); font-size: 13.5px; line-height: 1.2; } /* 56차: 브랜드 열 하단 보강 */
.footer-top > .footer-col:last-child { margin-right: 100px; } /* 우측 끝에서 살짝 안쪽으로 */
.footer-col-title { color: rgba(255,255,255,.9); font-size: 15px; font-weight: 700; margin-bottom: 14px; }
.footer-col-brand .footer-tagline { margin-top: 12px; color: rgba(255,255,255,.55); font-size: 13px; }
.footer-col p { color: rgba(255,255,255,.65); font-size: 14px; line-height: 1.2; margin: 0 0 4px; }
.footer-phone { color: #fff !important; font-size: 20px !important; font-weight: 700; margin-bottom: 8px !important; }
/* 바로가기 열 (30차 — 정책 링크는 footer-bottom .footer-policy로 이동) */
.footer-quick { display: flex; flex-direction: column; gap: 10px; }
.footer-quick a { color: rgba(255,255,255,.75); font-size: 14px; transition: color .2s; }
.footer-quick a:hover { color: #fff; }
.footer-bottom { padding-top: 24px; }
.footer-policy { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-bottom: 18px; }
.footer-policy a { color: rgba(255,255,255,.75); font-size: 13px; font-weight: 700; transition: color .2s; }
.footer-policy a:hover { color: #fff; }
.footer-nav .copyright p { font-size: 13px; line-height: 1.2; color: rgba(255,255,255,.45); }

/* ============================================================ 맨 위로 버튼
   주의: 이 아래 컴포넌트(맨위로 버튼/안심가이드/진료시간표/지도버튼)는 병원 기존 styles.css 체계용으로,
   ananta 원본 CSS가 쓰는 rem(문서 루트 기준, JS로 동적 조정됨)과 섞이면 안 되므로 전부 px로 고정. */
.go_top_btn {
  position: fixed; right: 24px; bottom: 88px; z-index: 850;
  /* 퀵메뉴 토글(60×60, radius 16)과 동일 규격 — 위아래 스택이 한 세트로 보이게 */
  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);
  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; }

/* ============================================================ 플로팅 퀵메뉴 (데스크톱 전용)
   참고 이미지의 퀵메뉴는 큼직한 세로 바 형태였는데, 사용자가 그 크기가 부담스럽다고 해서
   go_top_btn과 같은 규격(60×60, radius 16)으로 맞추고 바로 위에 쌓아 하나의 스택처럼 보이게 함. */
/* 19차: 개별 아이콘 버튼 나열 → 접이식 목록으로 개편(참고 사이트 방식).
   전화 항목은 제거(유틸바·하단퀵바·이용안내가 담당) — 토글 클릭 시 목록이 위로 펼쳐짐. */
.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 svg { width: 17px; height: 17px; border-radius: 4px; flex: none; }
.quick-menu-link:hover { background: rgba(90,67,50,.07); color: var(--main, #5a4332); }
@media (max-width: 767.98px) {
  .quick-menu { display: none; } /* 모바일은 기존 .mobile_bottom_bar가 같은 역할을 함 */
}

/* ============================================================ 의료진 소개(section3)
   손그림 스케치대로: 가운데 구분선을 기준으로 왼쪽엔 권회영(사진-바깥쪽/정보-안쪽),
   오른쪽엔 김성배(정보-안쪽/사진-바깥쪽)를 좌우 대칭으로 배치. 기존 member_content1/2의
   viewport-width 기반 절대위치 사진 배치(styles.css)는 전체폭 섹션 전제라 반쪽 컬럼에 맞지
   않아 재사용하지 않고, career_row/career_label/career_items(섹션3 전용, 별도 스코프)만
   그대로 재사용해 학력/수련/경력 스타일은 기존과 동일하게 유지. */
.se3_heading { padding-top: 90px; font-size: 44px; font-weight: 700; color: var(--gray-900, #5a4332); margin-bottom: 12px; }
.se3_heading_sub { font-size: 16px; color: var(--gray-600, #766A5F); margin-bottom: 60px; }
/* 65차: 좌우 2컬럼(나란히) → 위아래 풀와이드 행(스택형)으로 재구성 — 사진·약력 폭이 넓어져
   더 커 보이고, "한 명씩 사진 왼쪽/약력 오른쪽, 다음 사람은 약력 왼쪽/사진 오른쪽" 요청 반영. */
.se3_doctors { display: flex; flex-direction: column; padding-bottom: 40px; }
/* 69차: 대표님 요청 — 사진 프레임 높이는 옆 텍스트 높이와 계속 똑같이 유지하면서(align-items:
   stretch), 상반신 크롭 사진(고정 460×400)은 그 안에서 위아래 가운데 정렬. 프레임이 텍스트보다
   길어진 만큼의 여백이 위/아래로 똑같이 나뉘어 생기고, 좌우는 항상 24px로 고정 — 상단 top
   전용으로 몰아서 하단에 거대한 빈 공간이 생기던 문제를 해결. */
.se3_doctor {
  width: 100%; display: flex; align-items: stretch; gap: 56px;
  padding: 56px 0; border-top: 1px solid var(--gray-200, #EAE3DC);
}
.se3_doctor:first-child { border-top: none; padding-top: 0; }
/* 마크업은 두 원장 모두 사진→정보 동일 순서. 두 번째 행(.se3_doctor_right)만 시각적으로
   반전시켜 사진이 오른쪽, 정보가 왼쪽에 오게 함 — DOM 순서를 다르게 짤 필요가 없어짐. */
.se3_doctor_right { flex-direction: row-reverse; }
/* 대표님 최종 확인 — 상단·좌우 여백은 24px로 서로 똑같이, 하단은 0. 고정 크롭 높이(376px)를
   쓰면 프레임이 텍스트만큼 늘어날 때 남는 공간이 위/아래 어느 한쪽에 몰릴 수밖에 없어서
   좌우(24px)와 안 맞았음 — 사진 높이를 고정값 대신 "프레임 높이 - 24px"로 자동 계산되게
   바꿔서(inset), 프레임이 몇 px가 되든 상단·좌우 24px, 하단 0이 항상 정확히 성립하도록 함. */
.se3_photo_frame {
  flex: 0 0 500px; min-height: 400px; position: relative;
  border-radius: 12px; overflow: hidden; box-shadow: 0 12px 32px rgba(44,37,32,.16);
  background: linear-gradient(180deg, #F6F1EB, #E9DECF);
}
/* 상반신만(하반신 크롭) — object-fit:cover + object-position:top으로 원본 상단부터 채워
   하반신을 잘라냄. img(대체 요소)는 top/right/bottom/left 4개 다 주고 width/height:auto로
   두면 브라우저가 내재 크기를 그대로 써버려 튀어나감 — width는 프레임 고정폭(500px)에서
   좌우 36px씩 뺀 428px로 명시, height는 부모(프레임) 높이의 100%에서 위쪽 36px만 뺀 값으로
   계산해 프레임이 몇 px가 되든 항상 상단 36px, 하단 0이 되도록 함.
   (대표님 요청 — 여백을 24→36px로 넓히고, 그만큼 프레임 폭도 460→500px로 넓혀 사진이
   과하게 좁아지지 않게 함) */
.se3_photo {
  position: absolute; top: 36px; left: 36px;
  width: 428px; height: calc(100% - 36px); border-radius: 8px;
  object-fit: cover; object-position: top; display: block;
}
.se3_info { flex: 1; min-width: 0; }
.se3_name { font-size: 32px; font-weight: 700; color: var(--gray-900, #5a4332); margin-bottom: 8px; }
.se3_name span { font-size: 15px; font-weight: 500; color: var(--main, #5a4332); margin-left: 10px; }
.se3_role { font-size: 15px; font-weight: 700; color: var(--main, #5a4332); margin-bottom: 24px; }
/* 정보 컬럼 폭이 넓어졌으니, 연수·학회처럼 항목이 많은 리스트는 2열로 배치해 세로로
   과도하게 길어지지 않게 함. 항목이 1~2개뿐인 학력/수련 줄은 자연스럽게 1열만 채워짐. */
#section3 .career_items {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; row-gap: 4px;
}
/* 이력 항목이 불릿 없는 줄글로만 쌓여 있어 가독성이 떨어진다는 피드백 —
   styles.css의 li 규칙(list-style:none, padding:0)을 같은 특정도로 뒤에서 덮어써 불릿 점 추가. */
#section3 .career_items li { position: relative; padding-left: 16px; color: #443B33; }
#section3 .career_row { border-bottom-color: rgba(94,69,52,.14); }
#section3 .career_items li::before {
  content: ''; position: absolute; left: 0; top: .78em;
  width: 5px; height: 5px; border-radius: 50%; background: #bd9865; /* 기존 career_label 골드와 통일 */
}

/* ============================================================ CTA 배너 (디바이더 섹션)
   흰 배경 섹션들 사이에서 분위기를 환기하고 진료안내로 시선을 유도하는 풀와이드 배너.
   예약 시스템이 없어 "예약하기"가 아니라 진료안내(#section8)로 스크롤 이동만 시킴.
   단색 에스프레소 블록이 밋밋하다는 피드백으로 원내 복도 사진 + 웜 다크 오버레이 구성으로 재디자인 —
   진료철학과 같은 고정 배경(데스크톱)이라 "창문" 파랄랙스 톤이 페이지에서 한 번 더 반복되는 리듬. */
.cta-banner {
  position: relative; overflow: hidden; text-align: center; padding: 130px 24px;
  background: url('./assets/images/tour/hospital-tour-03.jpg') center 35% / cover no-repeat;
}
@media (min-width: 768px) {
  .cta-banner { background-attachment: fixed; background-position: center; }
}
/* 사진 위 웜 에스프레소 오버레이 — 위아래를 살짝 더 눌러 글자 대비 확보 + 비네트 느낌 */
.cta-banner::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(23,18,14,.82) 0%, rgba(35,27,20,.66) 50%, rgba(23,18,14,.82) 100%);
}
.cta-banner-inner { position: relative; z-index: 1; }
.cta-banner-eyebrow {
  font-family: 'Playfair Display', serif; font-style: italic; letter-spacing: .16em;
  font-size: 15px; color: #f6efea; margin-bottom: 18px; /* 31차: 다크 오버레이 위 주황 → 크림 */
}
.cta-banner-heading { font-size: 36px; font-weight: 700; color: #fff; line-height: 1.2; margin-bottom: 40px; }
/* 68차: 대표님 리뷰 — 전체가 브라운 톤으로 통일돼 화면에 리듬이 부족하다는 지적. 페이지에서
   실제 전환(진료안내 보기)을 유도하는 핵심 CTA인 이 버튼에만 브랜드 브라운보다 채도 높은
   웜 코랄 포인트 컬러를 채워 시선을 끌도록 함(고스트 테두리 → 솔리드 필). */
.cta-banner-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 16px 42px; border-radius: 100px;
  border: 1px solid #E07A5F; background: #E07A5F; color: #fff; font-weight: 700; font-size: 15px;
  letter-spacing: .02em; transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.cta-banner-btn i { font-size: 17px; transition: transform .3s ease; }
.cta-banner-btn:hover { background: #C9603F; border-color: #C9603F; color: #fff; }
.cta-banner-btn:hover i { transform: translateX(4px); }

/* ============================================================ 안심가이드 (탭 + 아코디언) */
.section_faq { background: #F6F1EB; }

/* ============================================================ 섹션 경계 정리 (진료원칙 하단)
   41차: 진료원칙(#section2) 하단의 240px 화이트 그라데이션 밴드(#section2::after) 제거 → 하드 컷 전환.
   fixed 사진 + rgba(0,0,0,.2) .back 위에 반투명 화이트가 겹치며 채도 빠진 회색 안개처럼 보였음
   (40차 FAQ→진료안내 경계와 동일 원리, 외부 피드백 반영). 다크 사진 영역이 섹션 경계에서
   아래 병원소개 섹션 배경(#FDFBF9)으로 바로 떨어짐. */
/* 배경이 사진에서 단색 그라데이션으로 바뀌어 어둠 오버레이(.back)로 사진을 dim할 필요가 없어짐 */
#section2 .back { display: none; }
/* 41차: 3단 컬럼 세로 구분선이 styles.css의 calc(100% + 100px)로 콘텐츠 끝보다 100px 아래
   하단 패딩 구간까지 흐릿하게 걸쳐 있었음 — 컬럼 콘텐츠 높이에 맞게 제한. */
#section2 .low_title .col_inner .vertical_bar { height: 100%; }
.section_faq { position: relative; }
/* 40차: FAQ(크림)→진료안내(다크) 경계의 그라데이션 완충을 제거하고 직선 경계로 전환 —
   80px 안에서 반투명 다크가 크림 위에 깔리며 채도 빠진 회색 얼룩처럼 보였음(외부 피드백 반영).
   패딩 160px는 콘텐츠와 경계 사이 여백으로 유지. */
.section_faq { padding-bottom: 160px; }
.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); }

/* ============================================================ 진료시간표 그리드 (section8) */
.hours_grid { border-top: 1px solid rgba(94,69,52,.14); }
.hours_row {
  display: grid; grid-template-columns: 1fr 1.4fr 1fr; align-items: center; gap: 12px;
  padding: 18px 0; border-bottom: 1px solid rgba(94,69,52,.14);
}
.hours_day { font-weight: 700; color: var(--gray-900, #5a4332); font-size: 17px; }
.hours_time { color: rgba(44,37,32,.75); }
.hours_time b { color: var(--main, #5a4332); }
.hours_note { color: rgba(44,37,32,.45); font-size: 14px; text-align: right; }
.hours_row--off .hours_day, .hours_row--off .hours_time { color: rgba(44,37,32,.35); }
.hours_badge {
  display: inline-block; margin-top: 20px; padding: 8px 16px; border-radius: 100px;
  background: rgba(94,69,52,.08); color: var(--main, #5a4332); font-size: 14px; font-weight: 700;
}

/* ============================================================ 지도 퀵액션 버튼 (section8) */
/* 61차: 섹션 배경이 다크→화이트로 바뀜(대표님 요청, 아래 61차 블록 참고).
   .se8_map은 투명 유지(화이트 섹션이 비침), 타이틀류는 다크 글자로 반전. */
/* 65차: 지도 위 안내 문구/블로그 배지 삭제(대표님 요청, 블로그는 우하단 퀵메뉴로 이동) —
   .se8_map은 이제 .se8_map_card 하나만 담으므로 flex-column으로 자식을 세로 꽉 채움. */
.se8_map { background: transparent !important; display: flex; flex-direction: column; }
/* 61차: 섹션이 화이트로 바뀌면서 지도 카드는 stats-card와 같은 밝은 카드 톤으로 재조정
   (다크 카드 시절의 흰 글자 오버라이드는 제거 — styles.css의 다크 글자 유틸이 그대로 유효). */
/* 65차: 지도 카드가 왼쪽 진료시간 카드와 항상 같은 높이가 되도록 flex:1로 채움
   (Grid 기본 align-items:stretch로 .se8_map 자체는 이미 같은 높이 — 그 안의 카드도 꽉 채움). */
.se8_map_card {
  background: #FFFEFC; border: 1px solid rgba(94,69,52,.16); border-radius: 8px;
  box-shadow: 0 10px 30px rgba(44,37,32,.07);
  overflow: hidden; display: flex; flex-direction: column; flex: 1;
}
/* 라이브 지도(구글맵 임베드) — 고정 높이 대신 flex:1로 남는 세로 공간을 그대로 채움 */
.map_embed_live { flex: 1; height: auto; min-height: 480px; }
.map_embed_live iframe { width: 100%; height: 100%; border: 0; display: block; }
.se8_map_panel { display: none; }
.se8_map_panel.on { display: flex; flex-direction: column; flex: 1; }
/* 65-2차: 진료시간 제목 옆에 참고 사이트 스타일의 CONTACT 정보(주소·전화) 신설 —
   시간표 그리드는 예전처럼 카드 전체 폭을 그대로 써야 요일/시간 열이 줄바꿈되지 않으므로,
   CONTACT는 제목 줄에만 나란히 두고 그리드는 아래로 내려 폭 제약 없이 배치.
   릴리프는 연결된 카카오 채널이 없어 참고 사이트의 KAKAO 항목은 넣지 않음(블로그는 퀵메뉴로 이동). */
.se8_hours_top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.se8_contact { flex: 0 0 auto; max-width: 200px; text-align: right; }
.se8_contact_label { font-size: 13px; font-weight: 700; letter-spacing: .1em; color: var(--main, #5a4332); margin-bottom: 10px; }
.se8_contact_addr { font-size: 14px; line-height: 1.2; color: rgba(44,37,32,.7); margin-bottom: 10px; }
.se8_contact_tel { font-size: 16px; font-weight: 700; color: var(--gray-900, #5a4332); }
.se8_guide_btn { width: 100%; }
/* 31차: 다크 카드 위 hover 필 주황 → 크림 필 + 다크 글자 */
.map_actions { display: flex; gap: 12px; margin-top: 16px; }
.map_action_btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 16px; border-radius: 6px;
  background: var(--gray-900, #5a4332); color: #fff; font-size: 15px; font-weight: 700;
  transition: background var(--trans,.3s), color var(--trans,.3s);
}
.map_action_btn i { font-size: 18px; }
.map_action_btn:hover { background: #f6efea; color: #332A22; }

/* 폭과 무관하게 히어로 CTA 버튼 자체를 제거 — 진료안내 접근은 상단 네비/퀵메뉴로 충분. */
.reserve-btn-cnt { display: none; }

/* ============================================================ 반응형 (모바일)
   원본은 데스크톱 전용(모바일은 완전히 다른 /m/ 템플릿)이라, vw 그대로 내려가면 글자가
   너무 작아짐 — 모바일 구간에서는 히어로/역할쇼케이스/사이드내비 텍스트를 고정 px로 재정의. */
@media (max-width: 767.98px) {
  .top-bar .nav-menu { display: none; }
  .side_nav_toggle { display: flex; width: 40px; height: 40px; font-size: 24px; }
  .util-bar { display: none; } /* 모바일은 하단 퀵바가 전화/시간 담당 */
  .top-bar { top: 0; }
  .top-bar .main-logo { gap: 8px; }
  .logo-name-ko { font-size: 14px; }
  .logo-name-en { font-size: 8px; margin-top: 2px; }

  .hero_eyebrow { font-size: 12px; letter-spacing: 0.18em; margin-bottom: 8px; }
  .hero_title { font-size: 34px; }
  .hero_sub { font-size: 16px !important; margin-top: 8px; }
  .scroll-tips { font-size: 28px !important; }

  .stats-section { padding: 70px 24px; }
  .stats-intro { flex-direction: column; align-items: flex-start; gap: 28px; margin-bottom: 36px; }
  .stats-heading { font-size: 28px; margin-bottom: 14px; }
  .stats-para { font-size: 14.5px; }
  .stats-photo { width: 100%; }
  .stats-photo img { height: 220px; }
  .stats-card { grid-template-columns: 1fr 1fr; row-gap: 36px; padding: 32px 8px; }
  .stats-item:nth-child(3) { border-left: none; } /* 2×2에선 각 행 첫 칸의 좌측 선 제거 */
  .stats-num { font-size: 42px; }
  .stats-suffix { font-size: 17px; }

  .side-nav .nav-links { gap: 20px; margin-top: 40px; }
  .side-nav .nav-links .item { font-size: 20px !important; }
  .side_nav_contact { gap: 14px; margin-top: 32px; }
  .side_nav_contact a { font-size: 14px !important; }
  .side_nav_contact a i { font-size: 16px; }
  .toggle-btn { width: 36px; height: 36px; font-size: 22px; }

  /* 모바일에서는 .mobile_bottom_bar(고정 하단바, 약 75px)가 화면 맨 아래 항상 떠 있어
     푸터의 마지막 저작권/사업자정보 줄이 가려짐 — 그만큼 여유 패딩을 추가. */
  .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; }

  .faq_wrap { flex-direction: column; }
  .faq_tabs { flex-direction: row; flex: none; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .faq_tabs::-webkit-scrollbar { display: none; }
  .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차 */
  .faq_panel { padding: 8px 20px; }
  .faq_q { padding: 18px 4px; font-size: 15px; }

  .hours_row { grid-template-columns: 1fr 1.6fr; row-gap: 4px; }
  .hours_note { grid-column: 1 / -1; text-align: left; }

  .go_top_btn { right: 16px; bottom: calc(60px + env(safe-area-inset-bottom) + 16px); width: 44px; height: 44px; font-size: 18px; }
  .map_actions { flex-direction: column; }
}

/* ============================================================ 31차 — 주황 리터럴 오버라이드
   :root 재정의로 못 잡는, vendor ananta CSS·styles.css에 하드코딩된 #eb6100 계열을
   같은 셀렉터(또는 상위 특정도)로 뒤에서 덮어씀. styles.css·vendor는 수정 금지 원칙 유지. */
/* 다크 헤더 GNB hover/active (vendor index CSS의 #eb6100) — 화이트로 브라이튼업 */
.top-bar .nav-item:hover,
.top-bar .nav-item.active { color: #fffefe; }
/* 사이드 드로어 항목 인디케이터 (vendor #eb6100) */
.side-nav .side-nav-bottom .nav-links .item:hover::before,
.side-nav .side-nav-bottom .nav-links .item.active::before { background: #f6efea; }
/* 히어로 CTA (vendor #eb6100 필 — 현재 .reserve-btn-cnt display:none으로 숨김이지만
   재노출 시 주황이 되살아나지 않게 크림 필 + 에스프레소 글자로 선제 오버라이드) */
.home-section .reserve-btn { background: #f6efea; color: #332A22; }
/* se4/se5 부위·치료 탭 active/hover (styles.css .bh_tab_btn 리터럴) */
.bh_tab_btn.active, .bh_tab_btn:hover { color: #5a4332; border-bottom-color: #5a4332; }
/* 치료 태그 배지 (styles.css .tag_wrap 오렌지 틴트) */
.tag_wrap span {
  background: rgba(90,67,50,.07); color: #5a4332;
  border: 1px solid rgba(90,67,50,.22);
}
/* section2 다크→라이트 전환(아래 별도 블록)으로 다크 배경용 크림 오버라이드는 더 이상 필요 없음 —
   삭제하면 styles.css 기본값(var(--main), 이미 브랜드 브라운으로 재정의됨)이 자연스럽게 복귀됨. */
/* 35차의 "#section8 .color-main → 크림" 오버라이드는 61차 화이트 배경 전환으로 제거 —
   화이트 위에서는 기본 브라운(.color-main)이 그대로 보임. */
/* 권리·의무/개인정보 모달 (styles.css pr-modal 리터럴) */
.pr-section__title { color: #5a4332; }
.pr-item__desc a { color: #5a4332; }
/* styles.css 모바일 블록의 리터럴 — 동일 미디어 경계로 덮어씀 */
@media (max-width: 1024px) {
  #section3 .mo_info p { background-color: rgba(90,67,50,.5); }
}
@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; }
}

/* ── 개인정보처리방침 모달 내 법정 보존기간 표 (29차 — subpage-nav.css와 동일 블록) ── */
.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; }

/* ============================================================ 진료안내(section8) 화이트 전환 (61차 — 대표님 요청)
   기존 다크(--dark-bg) 섹션을 브라운 무드 화이트(#fffefe, 순백 금지)로 반전.
   좌측 진료시간 패널(.se8_hours)만 다크 강조 카드로 남겨 대비를 살림.
   푸터(다크)와의 경계는 완충 그라데이션 없이 직선 경계 + 패딩 여백(40·41차 원칙). */
/* 68차: 대표님 요청 — 베이지 대신 완전 순백(#fff)으로. 바로 위 안심가이드(#section_faq)는
   여전히 베이지라 경계에 없던 색 구분선이 새로 생기므로, 푸터(.footer-band)에 이미 쓰던
   것과 같은 은은한 브랜드톤 보더로 "의도된 경계"처럼 보이게 함. */
.section8 { background: #fff; border-top: 1px solid rgba(94,69,52,.1); }
#section8 > .bh_wrap > p { color: #5a4332 !important; } /* styles.css의 #fff !important를 동일 셀렉터 후행 선언으로 반전 */
.se8_grid { gap: 28px; } /* 다크 진료시간 카드와 지도 카드가 화이트 위에서 딱 붙지 않게 분리 */
/* 65차: 남아있던 .se8_hours 다크 카드도 화이트로 반전(대표님 요청) — .gd-table-card(guide.html)와 동일 톤 */
.se8_hours {
  background: #FFFEFC; border: 1px solid rgba(94,69,52,.16); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(44,37,32,.07);
}
.se8_hours .color-white { color: var(--gray-900, #5a4332) !important; }
.phone_number { color: var(--gray-900, #5a4332); }

/* ============================================================ 진료철학·진료원칙(section2) 라이트 전환 (66차 — 대표님 요청)
   "스크롤하다 보면 밝은 구간과 새까만 구간이 번갈아 나오며 전체적으로 무겁다"는 피드백 —
   페이지에서 가장 길게 이어지는 다크 블록이라 최우선으로 전환. section1(FDFBF9)과 톤을
   살짝 구분한 베이지(F6F1EB)로, 완전 플랫 대신 은은한 세로 그라데이션으로 원래 다크
   그라데이션이 주던 미세한 깊이감을 라이트 톤으로 재현. */
/* styles.css의 원래 의도는 ".section2{padding:0}"(546번째 줄)/".section3{padding:0}"
   (583번째 줄)로 섹션 자체 여백은 0이고, 안쪽 요소(.se2_principle margin-top:100px,
   .member_content1 padding-top 등)가 실제 시각적 간격을 담당하는 구조였음. 그런데
   styles.css에 반응형 구간마다(1025-1279/1280-1599/1600-2559/2560+/모바일 등) 따로
   ".section{padding:Y0px 0}"가 또 있어서, 그 구간에서는 나중에 로드되는 이 범용 규칙이
   같은 명시도(class 1개)로 위 padding:0을 도로 덮어써 버림 — 대표님이 발견한 1280-1599px
   72px 케이스도 이 패턴 중 하나. id+class로 명시도를 올려 모든 구간에서 한 번에 확실히
   무력화(대표님 요청: 메인배너-진료철학 간격 축소 + 의료진 소개 섹션 불필요한 패딩 제거). */
#section2.section, #section3.section { padding: 0; }
.section2 { background: #F6F1EB; }
/* 68차: 대표님 리뷰 — 진료원칙 카드 아래~"특별함" 제목, 특별함 카드~의료진 소개 사이 빈
   배경 구간이 길어 "콘텐츠가 끝났나" 싶을 정도라는 지적. section1_special 자체 상하
   패딩(styles.css 반응형 .section 규칙 72px)을 줄이고, 의료진 섹션 쪽은 그 섹션 자신의
   내부 여백(.se3_heading padding-top)까지 함께 줄여 두 구간 모두 리듬을 좁힘. */
#section1_special.section { padding: 48px 0; }
.se3_heading { padding-top: 64px; }
/* "위 하얀 바" 정체 — .se2_principle의 margin-top:100px(styles.css)이 위쪽에 padding/border가
   없는 부모들(.bh_wrap/.se2_wrap)을 그대로 통과해 #section2 바깥으로 마진 콜랩스됨. 그 결과
   섹션2의 베이지 배경(F6F1EB)이 그만큼 아래에서 시작하고, 그 위 100px 구간은 body 배경
   (#FDFBF9, 거의 흰색)이 그대로 비쳐서 하얀 띠처럼 보였던 것 — margin을 0으로 없애 콜랩스
   자체를 제거. se2_principle 자체의 padding-top:100px(콜랩스 안 되는 안쪽 여백)은 그대로라
   "진료철학" 텍스트 위 적당한 여백은 유지되면서 배경은 히어로 바로 아래서 시작됨. */
/* 대표님 리포트 — 그라데이션이 바닥까지 계속 진해지고 있어서 별로라는 의미였음(보더 아님,
   지난 수정 오해였음). 70%에서 이미 최종색(F1EAE1)에 도달해 고정시키고, 남은 30%(카드 아래
   여백 구간)는 완전히 플랫한 단색으로 끝나도록 하드 스탑 추가. */
#section2 .se2_principle { margin-top: 0; background: linear-gradient(180deg, #F8F4EF 0%, #F1EAE1 70%, #F1EAE1 100%); }
/* 대표님 devtools 확인 — 카드 아래 padding-bottom(100px, 초록 하이라이트 부분)이 너무 넓다는
   지적. 절반(50px)으로 줄이되, 전체 높이는 그대로 유지하려고 줄인 50px만큼 padding-top으로
   옮김(100+100=200px 합계 → 150+50=200px 합계, 총합 동일). */
#section2 .se2_principle { padding: 150px 0 50px; }
#section2 .color-white { color: var(--gray-900, #5a4332); }
.se2_index_tag { color: rgba(44,37,32,.72); }
.se2_principle { color: var(--gray-900, #5a4332); } /* 68차: 대비 개선 리뷰 반영 — gray-700 → gray-900 */
#section2 .low_title .col_inner .cont { color: var(--gray-700, #5E5248); }
/* "Do No Harm"은 1줄, 나머지 둘은 2줄로 줄바꿈되면서 바로 아래 .cont 문단 시작 위치가
   컬럼마다 달라져 있었음(대표님 리포트: "혼자 위치만 올라가 있다") — 제목 영역을 2줄
   높이로 고정해 실제 줄바꿈 여부와 무관하게 .cont가 항상 같은 높이에서 시작하도록 정렬. */
#section2 .low_title .col_inner .title { min-height: 3.4em; }
/* 철학→원칙 사이 가로 구분선 — 흰 그라데이션 대신 아래 카드 보더와 톤을 맞춘 플랫 라인 */
#section2 .low_title .horizon_bar { background-image: none; background: rgba(94,69,52,.14); }
/* 대표님 요청 — 진료철학 본문 문단 + 진료원칙 3열 설명 문구 굵게(fw-b 700 톤 재사용) */
#section2 .se2_intro_text p { font-weight: 700; }
#section2 .low_title .col_inner .cont { font-weight: 700; }

/* 68차: 가독성 리뷰 반영 — 줄 길이 제한 + 장문 본문 전용 line-height/문단 간격 예외 +
   핵심 키워드 컬러 강조 + 진료원칙과 톤을 잇는 세로 틱 재사용 */
#section2 .se2_index_label {
  max-width: 960px;
}
/* 사이트 전체 line-height 1.2는 짧은 UI 카피 기준 — 이런 장문 서사형 본문엔 예외적으로
   더 넉넉하게(문단 내부 줄간격), 문단 사이 여백(mt-15/mt-20)도 더 벌려 "문단 내부 < 문단 사이"
   차이를 명확히 함(리뷰: 어디까지가 한 생각 단위인지 애매하다는 지적). */
#section2 .se2_intro_text p { line-height: 1.3; }
#section2 .se2_intro_text p:not(:first-child) { margin-top: 26px !important; } /* .mt-15/.mt-20이 !important라 대응 필요 */
.se2_highlight { color: var(--main, #5a4332); }

/* 진료철학 문구 오른쪽에 진료 상담 사진 배치 — 순수 텍스트만 있던 허전함 보완 */
/* 대표님 요청 — 문구 가로 폭을 최대한 늘려 줄바꿈을 줄이고, 사진 높이는 실제 렌더링된 문구
   높이에 딱 맞춤. align-items:stretch로는 text 박스가 "빈 여백까지 포함해" 늘어나 버려
   글자가 끝난 지점과 사진 하단이 안 맞는 문제가 있었음(박스 높이는 같아도 실제 글자는
   그보다 짧게 끝남) — flex-start로 되돌리고, 실제 문구 높이를 JS로 측정해 사진에 그대로
   적용(renewal.js 맨 아래 "진료철학 사진 높이 동기화" 참고). */
#section2 .se2_intro_row { display: flex; align-items: flex-start; gap: 40px; margin-top: 20px; }
#section2 .se2_intro_row .se2_intro_text.mt-20 { margin-top: 0 !important; }
#section2 .se2_intro_row .se2_intro_text { flex: 1 1 auto; max-width: none; }
#section2 .se2_intro_photo { flex: 0 0 460px; }
#section2 .se2_intro_photo img {
  width: 100%; height: auto; display: block; border-radius: 16px;
  box-shadow: 0 10px 30px rgba(44,37,32,.08); object-fit: cover;
}
@media (max-width: 991.98px) {
  #section2 .se2_intro_row { flex-direction: column; }
  #section2 .se2_intro_photo { flex: 0 0 auto; width: 100%; }
  #section2 .se2_intro_photo img { height: auto; object-fit: initial; } /* 세로 스택에서는 높이 맞춤 불필요 — 원본 비율로 복귀 */
}
/* 진료철학 로고 이미지(대표님 제공 원본 락업 logo_lockup_full.png, 배경 브라운 #422D1D 포함) —
   대표님 요청으로 원본 비율(6:5) 그대로 표시: JS 높이 동기화(renewal.js)에서 이 이미지는
   제외되어 height:auto로 렌더링됨. contain + 같은 브라운 배경은 혹시 박스 높이가 다시
   강제될 때도 로고가 잘리지 않게 하는 안전장치로 유지. */
#section2 .se2_intro_photo img.se2_logo_img { object-fit: contain; background: #422D1D; }

/* 아이콘 3종(se2_icon1~3.svg)은 다크 배경 전용으로 만들어진 흰색 글로우 + 오렌지(#F6AB00) 선
   조합이라, 배경만 밝게 바꾸면 글로우가 사라져 아이콘이 허공에 뜨고 브랜드가 폐기한 오렌지만
   튀어 보인다. 마크업 변경 없이 ::before로 원형 플레이트를 받쳐주고, filter로 오렌지를
   기존에 쓰던 톤다운 골드(#bd9865 계열)에 가깝게 눌러 라이트 배경에 맞게 재설계. */
/* 원형 플레이트를 ::before로 따로 두고 좌표(top/left)를 하드코딩했더니, 아이콘 위에
   실제로 존재하는 .vertical_bar(40px + margin-bottom 24px = 64px)만큼 아이콘이 아래로
   밀려서 플레이트와 어긋나 아이콘이 원 밖으로 삐져나와 보였음(대표님 리포트) — 플레이트를
   별도 요소로 두지 않고 img 자체에 배경/원형/그림자를 직접 입혀서, 위에 뭐가 있든 항상
   아이콘과 플레이트가 같은 박스로 딱 맞게 정렬되도록 수정. */
#section2 .low_title .col_inner img {
  box-sizing: border-box; padding: 26px;
  border-radius: 50%; background: #FFFEFC; box-shadow: 0 10px 24px rgba(44,37,32,.08);
  filter: saturate(.5) brightness(.85) sepia(.2);
}
/* 대표님 피드백 — 아이콘이 원형 플레이트에 꽉 차 보여서 padding으로 여백을 줘 살짝 작게 보이게 */
/* stats-card와 동일한 "베이지 위 화이트 카드" 셸 — 이미 검증된 패턴 재사용 */
#section2 .low_title .bh_row {
  background: #FFFEFC; border: 1px solid rgba(94,69,52,.1); border-radius: 16px;
  box-shadow: 0 10px 30px rgba(44,37,32,.05); padding: 44px 16px; margin: 0;
}
#section2 .low_title .bh_row > [class*="col-"]:not(:first-child) .col_inner {
  border-left: 1px solid rgba(94,69,52,.12);
}
@media (max-width: 991.98px) {
  /* img가 display:block이라 부모의 text-align:center가 실제로는 먹지 않아 아이콘이
     좌측 정렬로 렌더링되고 있었음(다크 배경에선 안 보이던 기존 버그) — 명시적으로 중앙 정렬.
     styles.css가 모바일에서 width는 max-width:70px로 줄이면서 height는 140px 그대로 둬서
     정사각형이 깨지므로(원형 플레이트가 타원이 되어버림), 여기서 height도 같이 70px로 맞춤. */
  #section2 .low_title .col_inner img { width: 70px; height: 70px; padding: 13px; margin: 0 auto; }
  #section2 .low_title .bh_row > [class*="col-"]:not(:first-child) .col_inner {
    border-left: none; border-top: 1px solid rgba(94,69,52,.12); padding-top: 20px;
  }
}

/* ============================================================ CTA 배너 다크톤 순화 (66차 — 대표님 요청, 유지)
   사진 위 텍스트 가독성을 위해 다크 오버레이가 필요한 예외 케이스 — 순검정 대신 브랜드 브라운. */
.cta-banner::before {
  background: linear-gradient(to bottom, rgba(58,42,30,.68) 0%, rgba(74,54,40,.5) 50%, rgba(58,42,30,.68) 100%);
}

/* ============================================================ 헤더·모바일 드로어·푸터 화이트 전환 (67차 — 대표님 요청)
   "카테고리(GNB)와 맨 하단 푸터는 다크브라운 말고 화이트 쪽으로" — 66차에서 순검정→브랜드
   다크브라운으로만 순화했던 두 영역(+모바일 드로어, 대표님 확인 후 통일)을 완전히 라이트로
   반전. 기존 규칙이 전부 "다크 배경 위 흰 텍스트"를 전제로 쓰여 있어 배경만 바꾸면 텍스트가
   묻히므로, 텍스트·아이콘·구분선·로고까지 전부 다크 톤으로 반전. */

/* ── 헤더 (유틸바 + 탑바 + GNB 드롭다운) ── */
.util-bar { background: #FFFEFC; }
.util-item { color: var(--gray-700, #5E5248); }
.util-item i { color: var(--main, #5a4332); }
.util-sep { background: rgba(94,69,52,.18); }
.top-bar {
  background: rgba(255,254,252,.92);
  border-bottom: 1px solid rgba(94,69,52,.08);
  box-shadow: 0 2px 16px rgba(44,37,32,.05);
}
.top-bar .nav-item { color: var(--gray-900, #5a4332); font-weight: 700; }
.top-bar .nav-item:hover, .top-bar .nav-item.active { color: var(--main, #5a4332); }
.logo-name-ko { color: var(--gray-900, #5a4332); }
.logo-name-en { color: var(--gray-600, #766A5F); }
.side_nav_toggle { color: var(--gray-900, #5a4332); }
.nav-sub {
  background: #FFFEFC;
  border: 1px solid rgba(94,69,52,.1);
  box-shadow: 0 12px 30px rgba(44,37,32,.08);
}
.nav-sub a { color: var(--gray-700, #5E5248); font-weight: 700; }
.nav-sub a:hover { color: var(--main, #5a4332); background: rgba(90,67,50,.06); }

/* ── 모바일 사이드 드로어 (대표님 확인: 데스크톱 GNB와 화이트로 통일) ── */
.side-nav .bg { background: #FFFEFC; }
.side-nav .mask-bg { background: rgba(44,37,32,.4); } /* 뒤 스크림은 모달 백드롭이라 다크 유지, 톤만 소폭 완화 */
.toggle-btn { color: var(--gray-900, #5a4332); }
/* 원본 벤더 CSS(assets/vendor/ananta/index_3d828f15.css)의
   ".side-nav .side-nav-bottom .nav-links .item{color:#FFF}"가 클래스 4개(0,4,0)로 renewal.css의
   ".side-nav .nav-links .item"(0,3,0)보다 명시도가 높아 로드 순서와 무관하게 이겨버림 —
   같은 명시도로 맞춰서 오버라이드. */
.side-nav .side-nav-bottom .nav-links .item { color: var(--gray-900, #5a4332); }
/* 아래 두 줄도 같은 이유(원본이 .side-nav 접두를 갖고 있어 명시도가 더 높음)로 접두를 맞춤 */
.side-nav .nav-acc-head i { color: var(--gray-500, #A2958A); }
.side-nav .nav-acc-body a { color: var(--gray-700, #5E5248); }
.side-nav .nav-acc-body a:active, .side-nav .nav-acc-body a:hover { color: var(--main, #5a4332); }
/* 화이트 배경에선 여백만으로 항목 구분이 약해 옅은 구분선 추가(의료진 섹션 스택 레이아웃과 동일 패턴) */
.side-nav .nav-acc { border-top: 1px solid var(--gray-200, #EAE3DC); padding-top: 14px; }
.side-nav .nav-acc:first-child { border-top: none; padding-top: 0; }
.side-nav .side-nav-bottom .nav-links > a.item { border-top: 1px solid var(--gray-200, #EAE3DC); padding-top: 14px; }
.side_nav_contact a { color: var(--gray-700, #5E5248); }
.side_nav_contact a i { color: var(--main, #5a4332); }

/* ── 푸터 ── */
.footer-band { background: #FFFEFC; border-top: 1px solid rgba(94,69,52,.1); }
.footer-brand-name { color: var(--gray-900, #5a4332); }
.footer-brand-desc { color: var(--gray-600, #766A5F); }
.footer-col-title { color: var(--gray-900, #5a4332); }
.footer-col-brand .footer-tagline { color: var(--gray-600, #766A5F); }
.footer-col p { color: var(--gray-700, #5E5248); }
.footer-phone { color: var(--main, #5a4332) !important; }
.footer-quick a, .footer-policy a { color: var(--gray-700, #5E5248); }
.footer-quick a:hover, .footer-policy a:hover { color: var(--main, #5a4332); }
.footer-top { border-bottom: 1px solid rgba(94,69,52,.12); }
.footer-nav .copyright p { color: var(--gray-500, #A2958A); }