@charset "utf-8";
/* =========================================================================
 * JDH 공통 푸터 (모든 페이지 공통) — Figma node 284:2
 * footer.jsp 에서 <link> 로 로드. 모든 스타일 .jdh_footer 스코프.
 * ========================================================================= */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

/* 관리자 템플릿 CSS(manage/template/dist/css/style.css)가 메인에도 로드되며
   'footer{display:none}'(devMenu) + 'footer{position:absolute;bottom:0;height:40px}'(style.css)
   로 푸터를 첫 화면 하단에 40px로 띄운다. 클래스 우선순위로 정상 흐름 복원 */
.jdh_footer {
	display: block;
	position: static;
	top: auto; right: auto; bottom: auto; left: auto;
	width: 100%;
	height: auto;
	/* 하단 고정 간편예약 바 높이만큼 여백 확보(콘텐츠 가림 방지) — JS 로 정밀 보정.
	   ⚠ 이 값은 "예약바 실제 높이 + 여유" 여야 한다. 딱 맞추면 푸터 콘텐츠(특히 영상 박스와
	     SNS 아이콘) 밑단이 예약바에 닿아 잘린 것처럼 보인다(2026-08-03 메인에서 실제 발생).
	     JS 가 outerHeight 로 다시 잡아 주지만, 스크립트가 늦게 붙는 순간에도 가리지 않도록
	     기본값 자체를 넉넉히 둔다. */
	padding-bottom: 112px;
	/* ⚠ 이 배경을 지우지 말 것 — 위 padding-bottom 영역은 __main(그린) 밖이라 배경이 없으면
	   body 의 흰색이 그대로 비쳐, 푸터와 고정 예약바 사이에 흰 줄이 그어진 것처럼 보인다.
	   (예약바는 position:fixed 라 이 여백을 덮지 못하고, 숨김 상태에선 여백 전체가 드러난다) */
	background: #385541;
	font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
}
.jdh_footer *, .jdh_footer *::before, .jdh_footer *::after { box-sizing: border-box; }

/* ===== 메인 영역(진한 초록) ===== */
.jdh_footer__main { background: #385541; }
.jdh_footer__inner {
	max-width: 1600px; margin: 0 auto; padding: 60px 40px 64px;
	display: flex; align-items: flex-start; justify-content: space-between; gap: 40px;
}

/* 좌: 로고 + 주소 + 저작권 */
.jdh_footer__info { flex: 0 1 auto; max-width: 360px; text-align: left; }
.jdh_footer__logo { height: 58px; width: auto; display: block; margin: 0 0 24px; }
.jdh_footer__addr {
	margin: 0; font-style: normal;
	font-size: 14.5px; line-height: 2.15; color: #DDE1D6;
}
.jdh_footer__terms { margin: 22px 0 0; font-size: 14px; line-height: 1.5; }
.jdh_footer__terms a { color: #DDE1D6; text-decoration: none; }
.jdh_footer__terms a:hover { color: #fff; text-decoration: underline; }
.jdh_footer__terms a.is-em { color: #fff; font-weight: 700; }   /* 개인정보처리방침 강조(법령) */
.jdh_footer__terms i {
	display: inline-block; width: 1px; height: 11px; background: #6A7A68;
	margin: 0 12px; vertical-align: -1px;
}
.jdh_footer__copy {
	margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: #AEB7A4;
}

/* 중앙: 오시는 길 영상
   2026-08-11 — 좌측 정보 블록(로고~copyright)과 **밑단을 맞춘다**.
   높이를 px 로 박으면 주소 줄 수·폰트가 바뀔 때마다 어긋나므로 align-self:stretch 로
   행 높이(= 가장 큰 항목인 .jdh_footer__info)에 자동으로 맞춘다 → aspect-ratio 는 쓰지 않는다.
   ⚠ min-height 는 stretch 가 먹지 않는 상황(줄바꿈 등)에서 박스가 납작해지는 것을 막는 안전망.
   ⚠ 1180px 이하는 wrap/column 으로 배치가 바뀌어 stretch 기준 행이 달라진다 →
     반응형 블록에서 aspect-ratio 로 되돌린다. */
.jdh_footer__video {
	position: relative; flex: 0 1 580px; width: auto; min-width: 0;
	align-self: stretch; min-height: 300px;
	border-radius: 8px; overflow: hidden; display: block; text-decoration: none;   /* 이미지 박스 공통 radius */
	background: linear-gradient(155deg, #2e3d2c 0%, #1a241a 100%);
}
/* 박스를 채우는 영상(유튜브 iframe) — 푸터가 화면에 들어오면 스크립트가 만들어 넣는다(footer.jsp).
   ⚠ 박스에 이미 overflow:hidden + radius 가 있어 여기서 radius 를 다시 줄 필요는 없다.
   ⚠ iframe 은 object-fit 이 안 먹는다 — 16:9 를 유지한 채 세로 중앙에 걸어 넘치는 위아래를 잘라
     cover 처럼 보이게 한다(박스 비율은 PC 1.84 / 1200↓ 16:9 라 항상 가로가 더 넓거나 같다).
   ⚠ pointer-events:none 이 없으면 iframe 이 클릭을 먹어 바깥 <a>(유튜브 새 창)가 동작하지 않는다. */
.jdh_footer__video-holder { position: absolute; inset: 0; display: block; overflow: hidden; }
.jdh_footer__video-el {
	position: absolute; top: 50%; left: 0;
	width: 100%; aspect-ratio: 16 / 9;
	transform: translateY(-50%);
	border: 0; display: block;
	pointer-events: none;
}
.jdh_footer__video-play {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	z-index: 2;
	width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.92);
	display: flex; align-items: center; justify-content: center;
	transition: transform .2s, background .2s, opacity .35s ease;
}
/* 재생이 시작되면 버튼을 감춘다 — 자동재생이 막히면 is-playing 이 안 붙어 버튼이 그대로 남는다(클릭 재생 경로) */
.jdh_footer__video.is-playing .jdh_footer__video-play { opacity: 0; pointer-events: none; }
.jdh_footer__video.is-playing:hover .jdh_footer__video-play { opacity: 1; pointer-events: auto; }
.jdh_footer__video:hover .jdh_footer__video-play { transform: translate(-50%,-50%) scale(1.06); background: #fff; }
.jdh_footer__video-play svg { width: 18px; height: 18px; margin-left: 3px; fill: #2c3a2b; }
.jdh_footer__video-cap {
	position: absolute; left: 16px; bottom: 14px; z-index: 2;
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 12px; font-weight: 600; color: #F1F0E8;
}
.jdh_footer__video-cap svg { width: 12px; height: 13px; }

/* 우: 진료시간 + 소셜 */
.jdh_footer__side { flex: 0 0 auto; }
.jdh_footer__hours { margin: 24px 0 0; display: flex; flex-direction: column; gap: 14px; }   /* 영상 상단부에 맞춰 살짝 내림 */
.jdh_footer__hours > div { display: flex; align-items: center; gap: 18px; }
.jdh_footer__hours dt { margin: 0; flex: 0 0 92px; font-size: 14px; font-weight: 500; color: #CBD3C2; }
.jdh_footer__hours dd { margin: 0; font-size: 14px; font-weight: 500; color: #E9ECE2; }

.jdh_footer__sns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
/* ⚠ button 도 같은 모양 — 영문판 WhatsApp 은 링크가 아니라 QR 모달을 여는 버튼이다(footer.jsp, 2026-09-14).
   UA 기본 버튼 스타일(padding·배경·폰트)을 걷어 a 와 구분이 안 가게 맞춘다. */
.jdh_footer__sns a,
.jdh_footer__sns button {
	width: 52px; height: 52px; border-radius: 50%;   /* 65px 의 0.8배 */
	padding: 0; background: none; cursor: pointer; font-family: inherit;
	border: 1px solid rgba(205,217,202,.42);
	display: inline-flex; align-items: center; justify-content: center;
	color: #CDD9CA; text-decoration: none; font-weight: 700; font-size: 18px;
	transition: background .2s, color .2s, border-color .2s;
}
.jdh_footer__sns a:hover,
.jdh_footer__sns button:hover { background: #CDD9CA; color: #385541; border-color: #CDD9CA; }
.jdh_footer__sns svg { width: 23px; height: 23px; display: block; }
/* 틱톡(한국어판)·Setmore(영문판, 2026-09-14 지급 흰색 PNG) 는 PNG — filter 로 흰색화해 SVG 아이콘들과 같은 밝기로 맞춘다.
   ⚠ brightness(0) 로 먼저 완전히 검게 만든 뒤 invert(1) 해야 원본 색과 무관하게 흰색이 된다.
   hover 시에는 배경이 밝아지므로 다시 어둡게 뒤집는다(다른 아이콘의 color 반전과 같은 결). */
.jdh_footer__sns img {
	width: 21px; height: 21px; display: block;
	filter: brightness(0) invert(1);
	opacity: .82;
	transition: filter .2s, opacity .2s;
}
.jdh_footer__sns a:hover img { filter: brightness(0) invert(.22); opacity: 1; }
/* 영문판 6개(WhatsApp·Facebook·Instagram·YouTube·X·Setmore) — 52px×6+간격이면 382px 라
   390px 폰(패딩 제외 350px)에서 넘친다 → 모바일에서만 아이콘을 줄여 한 줄(44×6+10×5=314px)에 넣는다.
   ⚠ 위 .jdh_footer__sns svg / img 와 특이도가 같아 **뒤에** 와야 이긴다. */
@media all and (max-width: 480px) {
	.jdh_footer__sns--wide { gap: 10px; }
	.jdh_footer__sns--wide a,
	.jdh_footer__sns--wide button { width: 44px; height: 44px; }
	.jdh_footer__sns--wide svg { width: 20px; height: 20px; }
	.jdh_footer__sns--wide img { width: 19px; height: 19px; }
}

/* ===== 하단 간편예약 바(더 진한 초록) — 화면 최하단 고정 ===== */
/* 기본 숨김 → 히어로 섹션을 벗어나면 .is-visible 로 아래에서 올라옴(JS) */
.jdh_footer__quick {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 90;
	background: #283325;
	box-shadow: 0 -4px 16px rgba(0, 0, 0, .18);
	transform: translateY(100%);
	opacity: 0;
	pointer-events: none;
	transition: transform .35s ease, opacity .35s ease;
}
.jdh_footer__quick.is-visible {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}
/* 도킹 — 푸터가 화면에 들어오면 고정을 풀어 푸터 맨 아래(문서 흐름)에 앉힌다.
 * 2026-08-06: 고정 상태 그대로면 푸터 콘텐츠(저작권 줄·영상 박스 밑단)를 계속 덮는다.
 *   여백(padding-bottom)만으로는 "스크롤이 정확히 최하단에 닿은 순간"에만 안 가려져서
 *   그 직전 구간이 전부 가려진 채로 보였다 — 그래서 겹침 자체를 없앤다.
 * ⚠ margin-top 은 JS 의 GAP 과 같은 값이어야 한다. 도킹 전(padding-bottom = 바 높이 + GAP)과
 *   도킹 후(margin GAP + 바 높이)의 문서 높이가 같아야 전환 순간 스크롤이 튀지 않는다.
 * ⚠ .is-visible 보다 뒤에 선언 — 두 클래스의 특정성이 같아 순서로 이긴다. */
.jdh_footer__quick.is-docked {
	position: static;
	margin-top: 22px;
	transform: none;
	opacity: 1;
	pointer-events: auto;
	box-shadow: none;
	transition: none;
}
/* 모바일 접이식 헤더 — 768↓ 에서만 쓴다(반응형 블록에서 display 를 켠다) */
.jdh_footer__quick-mini { display: none; }
/* 2026-08-10: 입력칸을 키우고(42→50px) 요소 사이 간격을 다시 잡았다(사용자 지시
 * "간격 자연스럽게, 입력칸 좀 크게"). 라벨/폼/전화 세 덩어리의 리듬을 20 → 28px 로 벌리고,
 * 폼 안쪽은 10 → 12px 로 좁게 유지해 한 덩어리로 읽히게 한다. */
.jdh_footer__quick-inner {
	max-width: 1600px; margin: 0 auto; padding: 20px 40px;
	display: flex; align-items: center; gap: 28px;
}
.jdh_footer__quick-label { flex: 0 0 auto; font-size: 16px; font-weight: 700; color: #F1F0E8; }
.jdh_footer__quick-form { display: flex; align-items: center; gap: 12px; flex: 0 1 auto; margin: 0; }
.jdh_footer__qi {
	height: 50px; border: 0; border-radius: 5px; background: #fff;
	padding: 0 16px; font-family: inherit; font-size: 15px; color: #2A2A2A;
}
.jdh_footer__qi:focus { outline: 2px solid #C2A878; outline-offset: 0; }
/* 2026-08-11 사용자 지시로 입력창을 가로로 늘렸다(132/176 → 180/240) */
/* 2026-09-11: 영문판은 문구가 길어 한 줄이 넘친다(1440px 기준 약 130px). 입력칸이 먼저 줄어들게
 *   flex-shrink 를 허용하고(한국어는 여유가 있어 그대로 180/240), 최소폭은 placeholder 가 잘리지 않는 선. */
.jdh_footer__qi { flex: 0 1 auto; }
.jdh_footer__qi--name { width: 180px; min-width: 120px; }
.jdh_footer__qi--phone { width: 240px; min-width: 160px; }
/* 동의 묶음 — 체크박스 라벨 + '자세히 보기' + 팝오버의 기준점 */
.jdh_footer__quick-consent {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: 4px;
}
.jdh_footer__quick-agree {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 4px;
	cursor: pointer;
	user-select: none;
}
.jdh_footer__quick-agree input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.jdh_footer__quick-agree-box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border: 1px solid rgba(255,255,255,0.3);
	border-radius: 3px;
	background: rgba(255,255,255,0.1);
	font-size: 11px;
	color: transparent;
	transition: background .2s, border-color .2s, color .2s;
}
.jdh_footer__quick-agree input:checked + .jdh_footer__quick-agree-box {
	background: #C2A878;
	border-color: #C2A878;
	color: #fff;
}
.jdh_footer__quick-agree-txt {
	font-size: 14px;
	letter-spacing: -.2px;
	color: #DDE1D6;
	white-space: nowrap;
}
.jdh_footer__qi::placeholder { color: #A9A9A9; }

/* ── '자세히 보기' — 개인정보처리방침(/member/policy) 새 탭 링크 ─────────────
 * 2026-08-10 팝오버(수집항목 요약)에서 방침 전문 페이지 이동으로 교체
 * ⚠ 선택자는 a.클래스 로 쓴다 — basic.css 의 a:link/a:visited{color:inherit}(0,1,1)가
 *   클래스 단독(0,1,0)을 이겨 골드색이 무시된다 */
a.jdh_footer__policy-btn {
	flex: 0 0 auto;
	display: inline-block;
	padding: 4px 2px;
	border-bottom: 1px solid rgba(221,225,214,.42);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: -.2px;
	color: #C2A878;
	white-space: nowrap;
	text-decoration: none;
	transition: color .2s, border-color .2s;
}
a.jdh_footer__policy-btn:hover { color: #E2CFA5; border-bottom-color: #C2A878; }

.jdh_footer__quick-btn {
	height: 50px; padding: 0 30px; border: 0; border-radius: 5px;
	background: #C2A878; color: #fff; font-family: inherit; font-size: 15px; font-weight: 700;
	cursor: pointer; transition: background .2s;
	flex: 0 0 auto; white-space: nowrap; /* 영문 "Request Consultation" 이 두 줄로 꺾이지 않게 */
}
.jdh_footer__quick-btn:hover { background: #b3986a; }
/* 영문판 폭 부족분은 동의 문구를 두 줄로 접어 흡수한다(한국어는 짧아 한 줄 그대로). */
@media all and (max-width: 1500px) {
	.jdh_footer__quick-agree { min-width: 0; }
	.jdh_footer__quick-agree-txt { white-space: normal; }
}
/* ⚠ flex-shrink:0 + nowrap 필수 — 영문판은 폼 옆 여백이 좁아 이 블록이 라벨 폭("Phone Consultation")까지
 *   줄어들면서 번호가 "1800-" / "0075" 두 줄로 꺾였다(2026-09-11). 번호는 항상 한 줄. */
.jdh_footer__quick-tel { flex: 0 0 auto; margin-left: auto; text-align: right; line-height: 1.2; white-space: nowrap; }
.jdh_footer__quick-tel-label { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 500; color: #CBD3C2; }
.jdh_footer__quick-tel-num { display: inline-block; font-size: 26px; font-weight: 700; color: #F4F2EA; letter-spacing: .5px; white-space: nowrap; }

/* ===== 반응형 ===== */
@media all and (max-width: 1180px) {
	.jdh_footer__inner { flex-wrap: wrap; gap: 44px 32px; }
	/* wrap 되면 영상이 다른 줄로 내려가 stretch 기준 높이가 사라진다 → 고정 비율로 복귀 */
	.jdh_footer__video { order: 2; align-self: flex-start; aspect-ratio: 16 / 9; min-height: 0; }
	.jdh_footer__side { order: 3; }
}
@media all and (max-width: 900px) {
	.jdh_footer__inner { flex-direction: column; align-items: stretch; padding: 44px 20px 48px; gap: 36px; }
	.jdh_footer__info { max-width: none; }
	.jdh_footer__video { flex: 0 0 auto; width: 100%; max-width: 560px; align-self: flex-start; }  /* column 전환 시 flex-basis 가 높이로 잡히는 것 방지 */
	.jdh_footer__side { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; }
	.jdh_footer__sns { margin-top: 0; }
}
@media all and (max-width: 768px) {
	/* 접이식 — 기본은 미니 바(한 줄)만 보이고 폼은 접혀 있다.
	 * 펼친 상태로 고정하면 세로 화면의 절반을 덮어 본문을 읽을 수 없다(2026-08-06 지적). */
	.jdh_footer__quick-mini {
		display: flex; align-items: center; justify-content: space-between; gap: 12px;
		padding: 0 16px; height: 54px;
	}
	.jdh_footer__quick-toggle {
		display: inline-flex; align-items: center; gap: 8px;
		padding: 0; border: 0; background: none;
		font-family: inherit; font-size: 15px; font-weight: 700; color: #F1F0E8;
		cursor: pointer;
	}
	.jdh_footer__quick-toggle i {
		display: block; width: 8px; height: 8px; margin-top: -3px;
		border-right: 1.6px solid #C2A878; border-bottom: 1.6px solid #C2A878;
		transform: rotate(-135deg);   /* 접힘: 위 화살표(= 열림 유도) */
		transition: transform .25s ease;
	}
	.jdh_footer__quick.is-open .jdh_footer__quick-toggle i { transform: rotate(45deg); margin-top: -6px; }
	/* ⚠ 선택자를 두 단계로 쓰는 이유(2026-08-12): 공통 CSS 의 `a:link { color: inherit }` 은
	 *   특이도가 (0,1,1) 이라 클래스 하나짜리 `.jdh_footer__quick-call`(0,1,0) 을 이긴다.
	 *   그래서 여기 색을 아무리 밝게 적어도 전화번호가 부모 색(#777)을 상속해 회색으로 나왔다.
	 *   부모를 하나 더 붙여 (0,2,0) 으로 올려야 실제로 적용된다 — 단축하지 말 것. */
	.jdh_footer__quick-mini .jdh_footer__quick-call {
		font-size: 20px; font-weight: 700; color: #fff; letter-spacing: .5px; text-decoration: none;
	}
	/* 접힘/펼침 — height 애니메이션 대신 표시 전환(내용 높이가 가변이라 값 고정이 어렵다) */
	.jdh_footer__quick-inner { display: none; }
	.jdh_footer__quick.is-open .jdh_footer__quick-inner {
		display: flex; flex-wrap: wrap; padding: 4px 20px 18px; gap: 12px 14px;
		border-top: 1px solid rgba(255,255,255,.12);
	}
	.jdh_footer__quick-label { flex-basis: 100%; }
	/* 펼친 상태에서는 미니 바에 이미 "간편예약" 이 있으므로 폼 안의 라벨은 중복이다 */
	.jdh_footer__quick.is-open:not(.is-docked) .jdh_footer__quick-label { display: none; }
	.jdh_footer__quick-form { flex-wrap: wrap; width: 100%; gap: 12px; }
	.jdh_footer__qi--name, .jdh_footer__qi--phone { flex: 1 1 120px; width: auto; height: 48px; }
	/* 동의 줄 — 문구가 길어 한 줄을 다 쓴다. '자세히 보기' 는 오른쪽 끝으로 민다. */
	.jdh_footer__quick-consent { flex: 1 1 100%; justify-content: space-between; margin: 2px 0; gap: 10px; }
	.jdh_footer__quick-agree { justify-content: flex-start; margin: 0; min-width: 0; }
	.jdh_footer__quick-agree-txt { white-space: normal; }
	.jdh_footer__quick-btn { flex: 1 1 100%; height: 48px; }
	/* 전화번호는 미니 바에 이미 있으므로 펼친 폼에서는 감춘다 */
	.jdh_footer__quick-tel { display: none; }
	/* ⚠ 도킹(푸터 안으로 내려앉음) 상태에서도 접힘/펼침 규칙을 그대로 둔다.
	 *   도킹될 때만 폼을 펼치게 하면 바 높이가 54 → 335px 로 튀어 문서 높이가 갑자기 늘고,
	 *   그 순간 화면이 밀려 내려간다(JS 의 GAP 계산 전제도 깨진다). */
}