@charset "utf-8";
/* =========================================================================
 * JDH 메인 컨텐츠 섹션 (히어로 하단) — www/index.jsp 에서만 로드
 * ========================================================================= */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;700&display=swap');

/* ===== 실적 배너 (Performance Banner) — Figma 331:2 =====
 * 타입스케일: 가장 큰 글자(통계 수치)를 히어로 타이틀급으로 맞추고 전체 축소 */
/* 공통: 스크롤 진입 애니메이션 (fade-up) */
.jdh-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .6s ease, transform .6s ease;
	will-change: opacity, transform;
}
.jdh-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.jdh-reveal { opacity: 1; transform: none; transition: none; }
}

.jdh_perf {
	/* jd_bg_02(다크그린 리프 패턴) + 다크 오버레이 — 중앙이 밝은 이미지라 흰 텍스트 대비 확보.
	   ⚠ 2026-08-24 사용자 요청 "살짝 밝게" → 오버레이 .70 → .56. 이 값이 곧 섹션의 밝기다.
	     더 낮추면 리프 패턴이 세져 흰 수치와 경합한다(대비 확보가 이 겹의 원래 목적). */
	background:
		linear-gradient(180deg, rgba(24,40,29,.56) 0%, rgba(17,29,21,.56) 100%),
		url('/img/jd_bg_02.jpg') center / cover no-repeat;
	background-color: #2D4636;   /* 이미지 로드 전 폴백 */
	padding: 80px 20px;
	margin: 0;   /* 2026-08-11 — 아래 인프라 섹션과도 딱 붙인다(사용자 지시). 흰 띠를 만들지 말 것 */
}
.jdh_perf * { box-sizing: border-box; }
.jdh_perf__inner { max-width: 1200px; margin: 0 auto; }

/* 헤더 — 중앙 정렬, 넉넉한 여백 */
.jdh_perf__head { margin-bottom: 60px; text-align: center; }
/* 제목 위 영문 아이브로우 공통 규격 — Cormorant Garamond 700 / 17px / 4.6px / UPPER.
   전 페이지가 같은 규격을 쓴다(2026-08-03 통일). 색만 섹션별로 다르게 둔다. */
.jdh_perf__eyebrow {
	display: block;
	margin-bottom: 18px;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.4;
	letter-spacing: 4.6px;
	text-transform: uppercase;
	color: #C1A27A;
}
.jdh_perf__title {
	margin: 0 0 16px;
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 700;
	font-size: 40px;   /* 섹션 타이틀 = 히어로 타이틀 상한(40px) */
	line-height: 1.35;
	letter-spacing: -0.4px;
	color: #fff;
}
.jdh_perf__accent { color: #C1A27A; }
.jdh_perf__desc {
	margin: 0;
	font-family: 'Pretendard', sans-serif;
	font-weight: 500;
	font-size: 20px;
	line-height: 1.6;
	color: #AEBBAB;
}

/* 통계 3분할 — 카드 제거, 배경 위에 시원하게 오픈 + 얇은 구분선 */
.jdh_perf__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}
.jdh_perf__box {
	padding: 8px 28px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.jdh_perf__box + .jdh_perf__box { border-left: 1px solid rgba(255, 255, 255, .12); }
.jdh_perf__label {
	margin-bottom: 16px;
	font-family: 'Pretendard', sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: 2px;
	color: #C1A27A;
}
.jdh_perf__name {
	margin-bottom: 20px;
	font-family: 'Pretendard', sans-serif;
	font-weight: 500;
	font-size: 22px;
	line-height: 1.4;
	color: #CBD3C2;
}
.jdh_perf__num {
	margin: 0;
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: 40px;   /* 섹션 최대 글자(히어로 타이틀 40px 상한) */
	line-height: 1;
	letter-spacing: -1px;
	color: #fff;
}
.jdh_perf__num .jdh_perf__unit {
	margin-left: 4px;
	font-size: 21px;
	font-weight: 500;
	color: #AEBBAB;
}
/* 수치 근거·집계기간 (그리드 하단, 보조 정보라 작고 흐리게) */
.jdh_perf__note {
	margin: 24px 0 0;
	text-align: center;
	font-family: 'Pretendard', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: -.2px;
	color: rgba(255, 255, 255, .55);
}

/* 반응형 */
@media all and (max-width: 768px) {
	.jdh_perf { padding: 56px 16px; }
	.jdh_perf__head { margin-bottom: 40px; }
	.jdh_perf__eyebrow { font-size: 14px; letter-spacing: 3.6px; }
	.jdh_perf__title { font-size: 28px; }
	.jdh_perf__desc { font-size: 16px; line-height: 1.6; }
	.jdh_perf__label { font-size: 14px; }
	.jdh_perf__name { font-size: 19px; }
	/* ⚠ 2026-08-12 — 이 섹션을 가로 스와이프로 바꿨다가 **원복**했다(사용자 지시: "슬라이드가 안 어울린다").
	 *   수치 3개는 한눈에 나란히 읽혀야 하는 값이라, 옆으로 밀어야 나머지가 보이면 '증명' 이 안 된다.
	 *   캐러셀 처리를 여기까지 넓히지 말 것.
	 * 2026-09-04 사용자 지시 — 세로 3단 → **가로 3열**. 위 취지("한눈에 나란히")와 같은 방향이다.
	 *   390px 화면에서 칸 하나가 약 116px 이라 글자를 함께 줄이고, 구분선도 세로선으로 되돌린다. */
	.jdh_perf__grid { grid-template-columns: repeat(3, 1fr); gap: 0; }
	.jdh_perf__box { padding: 18px 6px; }
	.jdh_perf__box + .jdh_perf__box { border-left: 1px solid rgba(255, 255, 255, .12); border-top: 0; }
	.jdh_perf__label { margin-bottom: 10px; font-size: 11px; letter-spacing: 1.2px; }
	.jdh_perf__name { margin-bottom: 12px; font-size: 15px; letter-spacing: -.3px; }
	.jdh_perf__num { font-size: 25px; letter-spacing: -.8px; }
	.jdh_perf__num .jdh_perf__unit { margin-left: 2px; font-size: 13px; }
	.jdh_perf__note { margin-top: 18px; font-size: 13px; }
}


/* ===== 클리닉 인프라 (Premium Clinic Infrastructure) — Figma 273:46 =====
 * 2026-08-11 전면 개편(사용자 지급 시안). **레이아웃이 핵심**이다.
 *   위: [좌 카피 | 우 아이콘 4개]  /  아래: [좌 큰 슬라이드 | 우 카드 2장]
 * ⚠ 이전 구조(가운데 헤드 → 4열 특징 → 풀블리드 캐러셀)의 클래스
 *   (.jdh_infra__cards / __card-tit / __card-desc / __slider / __slide-eng ...)는 전부 걷어냈다.
 *   되살릴 때는 마크업(include/main_infra.jsp)부터 함께 되돌릴 것.
 *
 * 2026-08-11 — 배경: 지급 이미지(jd_main_bg_01.png)의 파생본 1920px JPG(/img/main/infra_bg.jpg).
 *   2026-08-24 원본이 **흰 대리석 텍스처**로 교체되어 파생본을 다시 뽑았다(2816x1536 → 1920x1047, 43KB).
 *   ⚠ 만드는 법이 바뀌었다 — 직전 컷(원·도트 패턴 시안)은 340px 로 줄였다 되키워 **흐릿하게 구웠지만**,
 *     대리석은 결 자체가 배경이라 뭉개면 그냥 흰 판이 된다. 지금은 1920px 리사이즈 + ColorMatrix 로
 *     톤만 살짝(1.02배 +0.02) 올린다. 원본이 또 갈리면 컷 성격을 보고 방식을 정할 것.
 *   흰색 반투명 겹의 농도가 곧 배경의 톤이다 — 톤 조절은 이 값 하나로 한다.
 *   ⚠ .62 → .34 (2026-08-24): 대리석은 이미 거의 흰색이라 .62 를 덮으면 결이 통째로 사라진다.
 *   직전 파생본은 infra_bg_old20260811.jpg 로 남겨 두었다(원복용).
 * ⚠ margin 0: 위(.jdh_perf)·아래(.jdh_equip) 섹션과 딱 붙인다. 세 값이 한 벌이다. */
.jdh_infra {
	background:
		linear-gradient(rgba(255,255,255,.34), rgba(255,255,255,.34)),
		#fff url('/img/main/infra_bg.jpg?v=20260824') center top / cover no-repeat;
	padding: 92px 20px 96px;
	margin: 0;
	overflow-x: clip;
}
.jdh_infra * { box-sizing: border-box; }
.jdh_infra__inner { max-width: 1400px; margin: 0 auto; }

/* ── 위: 가운데 카피 + 특징 박스 ─────────────────────────────────
   2026-08-11(2차) 좌우 2단 → **가운데 정렬**(사용자 지급 시안). */
.jdh_infra__top { margin-bottom: 56px; }
.jdh_infra__head { text-align: center; margin-bottom: 44px; }
.jdh_infra__eyebrow {
	display: block;
	margin-bottom: 18px;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 15.5px;
	line-height: 1.2;
	letter-spacing: 3.6px;
	text-transform: uppercase;
	color: #B0966A;
}
/* 타이틀 — 시안은 세리프. 사이트 공통 세리프(Cormorant)는 한글이 없어 본문 폰트로 두되
   자간을 좁혀 시안의 밀도를 맞춘다. */
.jdh_infra__title {
	margin: 0 0 24px;
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: 46px;
	line-height: 1.32;
	letter-spacing: -1.6px;
	color: #1A1A1A;
}
.jdh_infra__title em { font-style: normal; color: #2F5138; }   /* JDH 만 딥그린 */
/* "300평!" — 골드 형광펜 강조(슬림케어 '강력한 효과!' 와 같은 방식).
   ⚠ position:relative + z-index:0 이 함께 있어야 한다. 없으면 ::after 의 z-index:-1 이
     섹션 배경 뒤로 내려가 형광펜이 통째로 사라진다.
   ⚠ 글자색은 검정 — 골드 바 위에서 대비가 가장 세다. 옅은 골드로 되돌리지 말 것(글자가 묻힌다). */
.jdh_infra__accent {
	position: relative;
	z-index: 0;
	color: #1A1A1A;
}
.jdh_infra__accent::after {
	content: '';
	position: absolute;
	z-index: -1;
	left: -6px; right: -6px; bottom: 6px; height: 17px;
	background: linear-gradient(90deg, rgba(216,189,139,.72) 0%, rgba(216,189,139,.36) 100%);
	border-radius: 2px;
}
.jdh_infra__desc {
	margin: 0 auto;
	max-width: 640px;
	font-family: 'Pretendard', sans-serif;
	font-weight: 400;
	font-size: 16.5px;
	line-height: 1.85;
	color: #7C7D75;
	word-break: keep-all;
}

/* 4개 특징 — 2026-08-11(3차) **카드(흰 박스) 제거**(사용자 지시).
   판·테두리·그림자를 걷어내고 타이포만으로 세운다. 구분은 세로 헤어라인 하나뿐.
   ⚠ 흰 박스를 되살리지 말 것 — "카드 형식 말고 텍스트를 크게" 가 이 블록의 요구다. */
.jdh_infra__facts {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
/* 2026-08-13 — 원형 아이콘 제거(사용자 지시). 아이콘이 빠지면 글이 칸 왼쪽에 치우쳐
   4열의 축이 흐트러지므로 텍스트 블록을 칸 가운데로 세운다. ⚠ .jdh_infra__ficon 되살리지 말 것. */
.jdh_infra__fact {
	position: relative;
	display: flex; align-items: center; justify-content: center;
	padding: 4px 16px;   /* 22 → 16: 글자가 커진 만큼 좌우 여백을 줄여 두 줄 유지 */
	text-align: center;
}
.jdh_infra__fact + .jdh_infra__fact::before {
	content: '';
	position: absolute; left: 0; top: 4px; bottom: 4px;
	width: 1px; background: #E7E1D4;
}
.jdh_infra__ftxt { min-width: 0; }
/* 2026-08-11 — 카드를 걷어낸 만큼 글자를 키워 이 블록이 스스로 서게 한다.
   17 → 21 → 24 → **34px**(2026-08-13 "크고 강조되게" 지시).
   ⚠ 상한은 히어로 타이틀(54px) — 그 위로 올리지 말 것. */
.jdh_infra__fname {
	display: block;
	margin-bottom: 12px;
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: 34px;
	line-height: 1.26;
	letter-spacing: -1.4px;
	color: #1A2620;
}
/* 설명도 함께 키우고 한 톤 진하게 — 옅은 배경 위에서 13.5px/#8A8C82 는 읽기 힘들었다 */
.jdh_infra__fdesc {
	display: block;
	font-family: 'Pretendard', sans-serif;
	font-weight: 400;
	font-size: 19px;
	line-height: 1.62;
	letter-spacing: -0.5px;
	color: #676B61;
	word-break: keep-all;
}

/* ── 아래: 좌측 큰 슬라이드 + 우측 카드 2장 ─────────────────────────
   ⚠ 좌측 1.42 : 우측 1 이 시안의 비율이다. 좌측이 더 좁아지면 큰 컷의 '무대' 느낌이 사라진다. */
.jdh_infra__gallery {
	display: grid;
	grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
	gap: 0 24px;
}

/* 좌측 무대
   ⚠ 우상단만 크게 굴린다(2026-08-11 사용자 지시). 네 모서리를 같은 값으로 맞추지 말 것 —
     한 귀만 크게 열어 두는 게 이 컷의 인상이다. */
.jdh_infra__stage {
	position: relative;
	border-radius: 10px 64px 10px 10px;
	overflow: hidden;
}
.jdh_infra__swiper { height: 100%; }
.jdh_infra__slide { position: relative; overflow: hidden; }
.jdh_infra__slide-media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 11;
	overflow: hidden;
	background: #EFEAE1;
}
.jdh_infra__slide-media img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover; display: block;
	transform: scale(1.02);
	transition: transform 6s ease;
}
.jdh_infra__slide-media--right img { object-position: 72% center; }
.jdh_infra__swiper .swiper-slide-active .jdh_infra__slide-media img { transform: scale(1.08); }   /* 천천히 밀어주는 켄번 */
/* 하단 스크림 — 캡션 가독성용 */
.jdh_infra__slide::after {
	content: '';
	position: absolute; left: 0; right: 0; bottom: 0; height: 52%;
	background: linear-gradient(to top, rgba(16,22,17,.82) 0%, rgba(16,22,17,.42) 42%, rgba(16,22,17,0) 100%);
	pointer-events: none;
}
.jdh_infra__slide-cap {
	position: absolute; left: 34px; right: 34px; bottom: 34px; z-index: 2;
	display: flex; flex-direction: column; align-items: flex-start;
}
/* 번호 아래 짧은 흰 선 — 시안 요소 */
.jdh_infra__slide-no {
	position: relative;
	padding-bottom: 12px; margin-bottom: 12px;
	font-family: 'Cormorant Garamond', serif; font-weight: 700;
	font-size: 17px; letter-spacing: 1.6px; color: #F0EADC;
}
.jdh_infra__slide-no::after {
	content: ''; position: absolute; left: 0; bottom: 0;
	width: 34px; height: 2px; background: rgba(255,255,255,.85);
}
.jdh_infra__slide-name {
	font-family: 'Pretendard', sans-serif; font-weight: 700;
	font-size: 26px; line-height: 1.25; letter-spacing: -0.6px; color: #fff;
}
.jdh_infra__slide-txt {
	margin-top: 8px;
	font-family: 'Pretendard', sans-serif; font-weight: 400;
	font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.82);
}

/* 컨트롤 — 2026-08-11(2차) 시안: 화살표는 무대 **좌우 세로 중앙**,
   진행 표시 [01 ─●─ 03] 는 하단 가운데에 따로 둔다. */
.jdh_infra__ctrl {
	position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
	z-index: 3;
	display: flex; align-items: center; gap: 14px;
}
.jdh_infra__cnum {
	font-family: 'Cormorant Garamond', serif; font-weight: 700;
	font-size: 14px; letter-spacing: 1.4px; color: rgba(255,255,255,.9);
}
.jdh_infra__nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	z-index: 3;
	width: 44px; height: 44px;
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0; border: 0; border-radius: 50%;
	background: rgba(255,255,255,.92); color: #2F4436;
	cursor: pointer; outline: none;
	transition: background .2s, transform .15s;
}
.jdh_infra__nav--prev { left: 22px; }
.jdh_infra__nav--next { right: 22px; }
.jdh_infra__nav:hover { background: #fff; }
.jdh_infra__nav:active { transform: translateY(-50%) scale(.94); }
/* 화살촉은 테두리 두 변을 회전시켜 만든다(아이콘 파일 없이) */
.jdh_infra__nav::before {
	content: '';
	width: 9px; height: 9px;
	border-top: 1.8px solid currentColor; border-right: 1.8px solid currentColor;
}
.jdh_infra__nav--prev::before { transform: rotate(-135deg); margin-left: 3px; }
.jdh_infra__nav--next::before { transform: rotate(45deg); margin-right: 3px; }
/* 페이지네이션 — 숫자 사이의 작은 점들(시안)
   2026-08-13 — 슬라이드가 3 → 10장이 되어 간격 8 → 6px, 점 6 → 5px 로 좁혔다.
   ⚠ Swiper 의 dynamicBullets 는 쓰지 말 것 — 이 페이저는 flex + static 커스텀이라 겹쳐 보인다(main_infra.jsp 주석). */
.jdh_infra__pager { display: flex; align-items: center; gap: 6px; width: auto !important; position: static !important; }
.jdh_infra__pager .swiper-pagination-bullet {
	width: 5px; height: 5px; margin: 0 !important;
	background: rgba(255,255,255,.5); opacity: 1;
	transition: background .3s, width .3s;
}
.jdh_infra__pager .swiper-pagination-bullet-active { width: 26px; border-radius: 999px; background: #fff; }

/* 우측 카드 2장 — 2026-08-11(2차) [텍스트|이미지] 분할 → **사진 위 텍스트 오버레이**(시안).
   좌측 큰 컷과 같은 언어(사진 위 흰 글씨)로 통일된다. */
.jdh_infra__side { display: grid; grid-template-rows: 1fr 1fr; gap: 24px; }
.jdh_infra__card {
	position: relative;
	display: block;
	border-radius: 10px;
	overflow: hidden;
	background: #24382C;
	text-decoration: none;
	color: #fff !important;   /* 전역 a 색상 규칙이 이기므로 명시 */
	transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}
.jdh_infra__card:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -24px rgba(20,30,22,.6); }
.jdh_infra__card-media { position: absolute; inset: 0; overflow: hidden; }
.jdh_infra__card-media img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover; display: block;
	transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.jdh_infra__card:hover .jdh_infra__card-media img { transform: scale(1.06); }
/* 좌측에서 오른쪽으로 걷히는 스크림 — 글이 앉는 왼쪽만 확실히 눌러 준다 */
.jdh_infra__card-media::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(100deg, rgba(14,22,16,.86) 0%, rgba(14,22,16,.62) 42%, rgba(14,22,16,.12) 78%, rgba(14,22,16,0) 100%);
}
.jdh_infra__card-body {
	position: relative; z-index: 1;
	display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
	height: 100%;
	padding: 30px 30px;
}
/* 번호 아래 짧은 흰 선 — 좌측 큰 컷의 캡션과 같은 장치 */
.jdh_infra__card-no {
	position: relative;
	padding-bottom: 10px; margin-bottom: 10px;
	font-family: 'Cormorant Garamond', serif; font-weight: 700;
	font-size: 15px; letter-spacing: 1.6px; color: rgba(240,234,220,.85);
}
.jdh_infra__card-no::after {
	content: ''; position: absolute; left: 0; bottom: 0;
	width: 28px; height: 2px; background: rgba(255,255,255,.8);
}
.jdh_infra__card-name {
	margin: 0 0 10px;
	font-family: 'Pretendard', sans-serif; font-weight: 700;
	font-size: 23px; line-height: 1.25; letter-spacing: -0.6px; color: #fff;
}
.jdh_infra__card-txt {
	font-family: 'Pretendard', sans-serif; font-weight: 400;
	font-size: 14.5px; line-height: 1.7; color: rgba(255,255,255,.82);
	word-break: keep-all;
}

/* 반응형 */
@media all and (max-width: 1200px) {
	.jdh_infra__title { font-size: 40px; }
	.jdh_infra__fact { padding: 4px 12px; }
	.jdh_infra__fname { font-size: 27px; letter-spacing: -1.1px; }
	.jdh_infra__fdesc { font-size: 16.5px; }
	.jdh_infra__gallery { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
	.jdh_infra__card-body { padding: 24px 22px; }
	.jdh_infra__card-name { font-size: 21px; }
}
@media all and (max-width: 1024px) {
	.jdh_infra { padding: 72px 20px 76px; }
	.jdh_infra__title { font-size: 34px; letter-spacing: -1.2px; }
	/* 특징은 2×2 로 접는다 — 4열을 유지하면 항목 하나가 두 줄로 터진다 */
	.jdh_infra__facts { grid-template-columns: repeat(2, 1fr); gap: 26px 0; padding: 0; }
	.jdh_infra__stage { border-radius: 10px 44px 10px 10px; }
	/* 2열에서는 왼쪽 칸이 1·3번째다 — 3번째 칸의 세로선을 지워야 축이 맞는다 */
	.jdh_infra__fact:nth-child(2n+1)::before { display: none; }
	/* 갤러리는 세로로 쌓는다. 우측 카드는 나란히 2열로 눕힌다 */
	.jdh_infra__gallery { grid-template-columns: 1fr; gap: 24px 0; }
	.jdh_infra__side { grid-template-rows: none; grid-template-columns: 1fr 1fr; min-height: 240px; }
	.jdh_infra__slide-cap { left: 24px; right: 24px; bottom: 24px; }
	.jdh_infra__slide-name { font-size: 22px; }
	.jdh_infra__nav--prev { left: 14px; }
	.jdh_infra__nav--next { right: 14px; }
}
@media all and (max-width: 768px) {
	.jdh_infra { padding: 52px 16px 56px; }
	.jdh_infra__head { margin-bottom: 30px; }
	.jdh_infra__eyebrow { font-size: 13px; letter-spacing: 2.8px; margin-bottom: 16px; }
	.jdh_infra__title { font-size: 27px; letter-spacing: -1px; margin-bottom: 18px; }
	.jdh_infra__accent::after { bottom: 3px; height: 10px; }
	.jdh_infra__desc { font-size: 15.5px; }
	.jdh_infra__desc br { display: none; }
	/* 좁은 화면에서는 1열 — 항목 사이는 가로 헤어라인으로 끊는다 */
	/* 2026-09-04 사용자 지시 — 모바일만 **카드 2×2**(한 줄에 두 개씩 두 줄).
	 * ⚠ 위 기본 규칙의 "흰 박스를 되살리지 말 것" 은 **데스크톱** 얘기다(거기선 타이포만으로 세운다).
	 *   좁은 화면에서는 4개가 세로로 늘어져 훑기 어려워 카드로 묶었다 — 데스크톱까지 옮기지 말 것.
	 * ⚠ 섹션 배경이 흰색이라 흰 카드는 안 보인다 → 옅은 크림 + 테두리로 판을 만든다. */
	.jdh_infra__facts { grid-template-columns: 1fr 1fr; gap: 10px; padding: 0; }
	.jdh_infra__fact {
		padding: 20px 10px 18px;
		background: #FBF9F3;
		border: 1px solid #ECE7DC;
		border-radius: 12px;
	}
	.jdh_infra__fact:nth-child(n)::before { display: none; }
	.jdh_infra__fact + .jdh_infra__fact { border-top: 1px solid #ECE7DC; padding-top: 20px; }
	.jdh_infra__fname { margin-bottom: 8px; font-size: 18px; letter-spacing: -.6px; line-height: 1.3; }
	.jdh_infra__fdesc { font-size: 13.5px; line-height: 1.55; letter-spacing: -.3px; }
	.jdh_infra__stage { border-radius: 8px 32px 8px 8px; }
	.jdh_infra__fdesc br { display: none; }
	.jdh_infra__slide-media { aspect-ratio: 16 / 12; }
	.jdh_infra__slide-cap { left: 18px; right: 18px; bottom: 18px; }
	.jdh_infra__slide-name { font-size: 19px; }
	.jdh_infra__slide-txt { font-size: 13.5px; }
	.jdh_infra__ctrl { bottom: 16px; gap: 10px; }
	.jdh_infra__nav { width: 36px; height: 36px; }
	.jdh_infra__nav--prev { left: 8px; }
	.jdh_infra__nav--next { right: 8px; }
	/* 카드 2장은 세로로 쌓는다 — 나란히 두면 사진 위 글이 들어갈 폭이 안 나온다 */
	.jdh_infra__side { grid-template-columns: 1fr; gap: 16px; min-height: 0; }
	.jdh_infra__card { min-height: 190px; }
	.jdh_infra__card-body { padding: 22px 20px; }
	.jdh_infra__card-name { font-size: 19px; }
	.jdh_infra__card-txt br { display: none; }
}


/* ===== 프리미엄 리프팅 장비 라인업 — Figma 538:221 ===== */
.jdh_equip {
	position: relative;
	aspect-ratio: 1920 / 850;   /* 폭 비례라 모든 화면 동일 비율. 배너 축소(1.5×)로 겹침 해소, 과한 여백도 방지 */
	/* 2026-08-11 — 지급 배경(jd_collection.png)으로 교체.
	   ⚠ 원본은 2390x1334·3.1MB PNG 다 → 1920px JPG(109KB)로 구워 쓴다(/img/main/collection_room.jpg).
	   ⚠ `center bottom` 을 유지할 것. 이 컷은 비율이 1.79 라 2.26 인 이 섹션에서 위쪽이 잘리는데,
	     정작 살아야 할 것은 장비가 서는 바닥과 스탠드 불빛(아래쪽)이다. center 로 바꾸면 바닥이 잘린다.
	   ※ 직전 배경은 /img/main/equip_room.jpg — 파일은 남겨 뒀다. */
	background: #14201a url('/img/main/collection_room.jpg') center bottom / cover no-repeat;
	margin: 0;   /* 2026-08-11 — 위 인프라 섹션과도 딱 붙인다(사용자 지시). 아래 증상별 섹션과는 원래 붙어 있었다 */
	overflow: hidden;
}
/* 크리스프 장비 라인업(투명 PNG)을 빈 방 배경 위에 오버레이 — 밝게 빛나는 느낌(brightness + 웜 글로우) */
/* 2026-08-05 equip_lineup_2026.png(1903x279) → equip_lineup_2026_v2.png(2853x340).
 * 이전 컷은 누끼 잔재(반투명 흰 배경)가 있어 어두운 배경 위에서 장비 사이가 뿌옇게 번졌다.
 * 새 컷은 장비별 PNG 17종을 이어 붙인 것이라 배경 잔재가 없다 → 아래 글로우도 함께 낮췄다.
 * ⚠ 원본이 2853px 라 그 이상으로 늘리면 흐려진다. max-width 를 더 키우지 말 것. */
.jdh_equip__lineup {
	position: absolute;
	left: 50%;
	bottom: 4%;   /* 2026-08-11 1% → 4%. 사용자 지시로 살짝 위로(섹션 높이 비례라 화면 폭과 무관하게 같은 비율) */
	transform: translateX(-50%);
	/* 104% → 100%. 104% 는 14종 컷이 납작해 존재감을 키우려던 값인데, 17종은 장비가 촘촘해서
	   넘치면 양 끝 장비가 반토막 난다. 100% 로 두면 첫(쿨소닉)·끝(올리지오)까지 온전히 보인다. */
	width: 100%;
	max-width: 2000px;
	z-index: 2;
}
.jdh_equip__lineup img {
	width: 100%; height: auto; display: block;
	/* 글로우 30px/.45 → 20px/.28. 예전 컷은 흰 안개가 깔려 있어 강한 글로우가 묻혔지만,
	   깨끗한 누끼에서는 같은 값이 장비 윤곽을 뿌옇게 흐린다. 조명 느낌만 남긴다. */
	filter: brightness(1.06) saturate(1.05) drop-shadow(0 0 20px rgba(255,228,180,.28));
}
/* 상단 헤딩 가독성용 스크림 (상단을 더 어둡게) */
.jdh_equip::before {
	content: '';
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 66%;
	z-index: 1;
	background: linear-gradient(180deg, rgba(6,10,8,.95) 0%, rgba(6,10,8,.55) 32%, rgba(6,10,8,0) 100%);
	pointer-events: none;
}
/* 하단(기기) 웜 글로우 + 가장자리 비네팅으로 대비 강조 */
.jdh_equip::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(ellipse 60% 52% at 50% 90%, rgba(255,236,200,.42) 0%, rgba(255,228,185,.16) 42%, rgba(255,228,185,0) 72%),
		radial-gradient(ellipse 125% 100% at 50% 46%, rgba(5,9,6,0) 48%, rgba(5,9,6,.62) 100%);
}
.jdh_equip__inner {
	position: absolute;
	left: 0; right: 0;
	top: 24%;                 /* 헤딩 위치 (기기와 여백 균형) */
	z-index: 3;
	padding: 0 20px;
	text-align: center;       /* 가로 중앙정렬 */
}
.jdh_equip__eyebrow {
	display: block;
	margin-bottom: clamp(8px, 0.83vw, 16px);
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	/* 다른 아이브로우와 같은 고정 규격으로 맞춘다(이전 clamp 는 화면 폭에 따라 10~14px 로 흔들려
	   같은 줄에 놓이는 다른 섹션 아이브로우보다 작아 보였다) */
	font-size: 17px;
	letter-spacing: 4.6px;
	text-transform: uppercase;
	color: #B0966A;
}
.jdh_equip__title {
	margin: 0 0 clamp(7px, 0.73vw, 14px);
	font-family: 'Pretendard', sans-serif;
	font-weight: 800;
	/* 섹션이 폭에 비례(aspect-ratio)하므로 타이틀도 폭에 비례(vw)시켜 모든 화면 동일 비율 → 기기와 겹침 방지.
	   1920px 에서 60px(히어로 40px의 1.5배, 사용자 지정), 폭이 줄면 같은 비율로 축소 */
	font-size: clamp(24px, 3.125vw, 60px);
	line-height: 1.2;
	letter-spacing: -0.34px;
	color: #fff;
}
/* 타이틀 + 배너 그룹 (배너 폭은 JS 가 '타이틀 텍스트 실측 폭'으로 설정) */
.jdh_equip__titlewrap { display: block; }
/* 골드 배너 이미지 (문구는 이미지 안에 있다 — include/main_equip.jsp 주석 참조) */
.jdh_equip__banner {
	display: block;
	margin: clamp(3px, 0.31vw, 6px) auto 0;
	max-width: 100%;      /* JS 실행 전/모바일 폴백: 컨테이너 폭 초과 방지 */
	height: auto;
	filter: saturate(0.88);   /* 채도 살짝 낮춤 */
	/* 2026-08-14 — 위·아래 끝도 배경으로 녹인다. 좌우는 이미지 자체가 페이드된 파생본이고,
	   상하는 원본에 어두운 띠가 있어 여기서 마스크로 처리한다.
	   ⚠ 12%/88% 보다 안쪽으로 좁히지 말 것 — 글자(세로 30~70% 구간) 윤곽이 흐려진다. */
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
	        mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}

/* 1920px 이상: 비율 대신 높이 고정(폭은 100% 유지) → 큰 화면에서 세로만 안 커지고 잘림 없음 */
@media all and (min-width: 1920px) {
	.jdh_equip { aspect-ratio: auto; height: 850px; }
}
@media all and (max-width: 768px) {
	/* 2026-08-12 — 모바일에서는 **골드 배너와 장비 18종 라인업 컷을 숨긴다**(사용자 지시).
	 * 라인업은 원본이 2853px 폭에 장비가 18개 붙어 있어, 화면 폭에 맞추면 기기 하나가 20px 남짓이라
	 * 무엇인지 알아볼 수 없었다. 배너 글자도 같은 이유로 뭉갰다.
	 * → 이 섹션은 배경(빈 시술실) 위 헤딩만 남긴다. 장비 이름은 바로 아래 증상별 솔루션 칩이 담당한다.
	 * ⚠ 라인업을 숨기면서 섹션을 지탱하던 요소가 사라지므로 아래 세 가지를 함께 바꿔야 한다.
	 *   ① inner 의 absolute(top 24%) 해제 → 텍스트가 흐름 안에서 자리를 잡는다
	 *   ② min-height 해제 → 텍스트 높이 + 패딩만큼만 차지한다(빈 배경이 남지 않게)
	 *   ③ 상단 스크림(::before) 66% → 100% (텍스트가 중앙으로 내려와 스크림 밖으로 나간다) */
	/* 2026-09-04 사용자 지시 — 모바일에서 **배경 사진을 걷었다**("섹션 간 뚝 잘리는 느낌 없도록").
	 * 위 인프라 섹션은 흰색이고 아래 증상별 섹션은 상단이 거의 검정(#070B08)이라,
	 * 그 사이에 어두운 사진 띠가 190px 만 끼어 있어 두 번 잘려 보였다.
	 * → 이 섹션을 **흰색에서 검정으로 넘어가는 다리**로 쓴다. 위아래 어디와도 경계가 생기지 않는다.
	 * ⚠ 그래서 스크림(::before)·비네팅(::after)도 함께 끈다 — 어두운 판이 남으면 다리가 되지 않는다.
	 * ⚠ 글자가 밝은 구간(위 24~55%)에 놓이므로 **글자색을 어둡게** 바꾼다(아래 규칙). */
	.jdh_equip {
		aspect-ratio: auto;
		min-height: 0;
		background: linear-gradient(180deg, #fff 0%, #FAF8F2 34%, #EFECE3 54%, #3A4A3E 84%, #070B08 100%);
	}
	.jdh_equip::before,
	.jdh_equip::after { display: none; }
	.jdh_equip__banner,
	.jdh_equip__lineup { display: none; }
	/* ⚠ static 이 아니라 relative 여야 한다. 기본 규칙의 z-index:3 은 positioned 요소에만 먹으므로,
	 *   static 으로 두면 텍스트가 스크림·비네팅 **아래**로 깔린다(2026-08-12 실제로 그랬다).
	 *   지금은 그 둘을 껐지만, 되살릴 때를 대비해 relative 를 유지한다. absolute 만 푸는 게 목적이다.
	 * 아래 여백을 크게 둔 것은 그라데이션이 검정으로 내려앉을 자리를 벌기 위해서다 —
	 * 줄이면 글자 바로 밑에서 갑자기 어두워져 다시 경계가 보인다. */
	.jdh_equip__inner { position: relative; top: auto; padding: 62px 16px 128px; }
	/* 배경이 밝아졌으므로 글자를 어둡게 — 흰 글씨 + 그림자를 되돌리지 말 것(2026-09-04) */
	.jdh_equip__eyebrow { font-size: 14px; letter-spacing: 3.6px; color: #A5854B; text-shadow: none; }
	/* keep-all 이 없으면 '18 컬렉 / 션' 처럼 낱말 중간에서 갈린다 */
	.jdh_equip__title { font-size: 34px; margin-bottom: 0; word-break: keep-all; color: #1C2A20; text-shadow: none; }
}


/* ===== 증상별 솔루션 뷰어 (버튼 클릭 → 이미지/설명 교체) — Figma 280:2 ===== */
.jdh_skin {
	/* 2026-08-14 — 배경을 사용자 지급 실크 컷으로 교체(이전 /img/jd_bg_1.jpg).
	 * ⚠ 원본 /img/jd_collection_bg.png 는 2816x1536·7.4MB 라 그대로 쓰면 안 된다.
	 *   2200px JPG(382KB)로 줄인 /img/main/collection_bg.jpg 를 쓴다(care_bg.jpg 와 같은 방식).
	 * ⚠ 원본은 중간 톤이라 오버레이 없이 깔면 흰 글씨와 어두운 장비 카드가 모두 묻힌다.
	 *   아래 알파(.88~.93)가 "실크 결은 보이되 글자는 또렷한" 선이다. 더 낮추지 말 것. */
	background:
		/* 상단 이음매 — 위 섹션(.jdh_equip)은 거의 검정으로 끝나는데 여기는 한 톤 밝은 실크 면이라,
		   맞닿는 선이 그대로 드러나 화면이 가로로 뚝 잘려 보였다(2026-09-01 사용자 지적).
		   위 섹션의 끝 색으로 시작해 20% 지점에서 사라지는 페이드로 두 면을 잇는다.
		   ⚠ 이 레이어는 반드시 **맨 위**에 있어야 한다(뒤로 밀면 실크 배경에 가려 효과가 없다). */
		linear-gradient(180deg, #070B08 0%, rgba(7,11,8,.88) 5%, rgba(7,11,8,.42) 12%, rgba(7,11,8,0) 20%),
		linear-gradient(155deg, rgba(20,28,23,0.74) 0%, rgba(7,10,8,0.86) 60%),
		url('/img/main/collection_bg.jpg') center / cover no-repeat;
	padding: 100px 20px;   /* 상하 패딩 확대 */
	margin: 0 0 64px;
}
.jdh_skin * { box-sizing: border-box; }
.jdh_skin__inner { max-width: 1240px; margin: 0 auto; }

/* 상단 뷰어 — 에디토리얼 레이아웃(카드 박스 제거, 이미지 + 열린 정보) */
.jdh_skin__viewer {
	display: grid;
	grid-template-columns: 1.04fr 1fr;
	align-items: center;
	gap: 60px;
	min-height: 560px;
	background: transparent;   /* 어두운 박스 제거 → 섹션 배경 위에 개방형 */
}
/* 이미지 — 라운드 프레임 + 골드 인셋 라인 + 깊은 그림자 */
.jdh_skin__photo {
	position: relative;
	height: 560px;
	border-radius: 8px;    /* 이미지 박스 공통 radius */
	overflow: hidden;
	/* 2026-08-05 다크그린 → 샴페인 골드 → **2026-08-11 어두운 스포트라이트**(사용자 지시).
	   가운데만 밝고 가장자리로 갈수록 어두워지는 radial — 장비가 조명 아래 놓인 것처럼 보인다.
	   ⚠ linear 로 되돌리지 말 것. 이 연출의 요점은 '가운데가 밝다'는 것이고,
	     그래야 화면 한가운데 놓인 장비의 윤곽이 배경에서 떠오른다.
	   ⚠ 중앙을 더 밝히면(#6x 대) 흰 장비가 배경에 묻힌다. 이 대비가 상한이다.
	   ※ 장비 PNG 17종은 누끼가 깨끗해 어두운 배경에서도 흰 안개가 비치지 않는다
	     (구 14종은 그 문제가 있었다 — include/main_skin.jsp 주석 참조). */
	background:
		radial-gradient(112% 84% at 50% 44%,
			#54625A 0%, #3D4A41 30%, #26302A 58%, #161D18 82%, #0F140F 100%);
	box-shadow: 0 34px 80px -34px rgba(0,0,0,.75);
}
.jdh_skin__photo::after {   /* 내부 골드 프레임(에디토리얼 디테일) */
	content: '';
	position: absolute; inset: 14px;
	/* 배경이 다시 어두워졌다 → 금갈색 라인은 묻힌다. 밝은 샴페인 라인으로(2026-08-11) */
	border: 1px solid rgba(226,208,170,.26);
	border-radius: 2px;    /* 외곽 8px - inset 14px → 거의 직각 */
	pointer-events: none; z-index: 2;
}
/* 2026-08-05 cover → contain.
   장비 사진이 /img/skin_solution/jd_*.png (세로형 누끼)로 바뀌면서, cover 로는 560px 박스에
   좌우를 맞추느라 장비 위아래가 잘려 무슨 장비인지 알 수 없었다(바퀴·핸드피스가 사라짐).
   솔루션 페이지 장비 카드도 같은 이유로 contain 이다(page_lifting.css 참고). */
.jdh_skin__photo img {
	position: absolute;
	inset: 0;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 30px 26px;   /* 2026-08-05 PNG 투명 여백을 트림한 뒤라 46/40 은 과했다 */
	object-fit: contain;
	object-position: center;
	display: block;
	transition: opacity .4s ease, transform .8s cubic-bezier(.22,.61,.36,1);
}
/* 모바일 슬라이드용 이전/다음 버튼 — 데스크톱에서는 감춘다(2026-09-09 사용자 요청).
   데스크톱은 아래 버튼 그리드가 18종을 한눈에 보여주므로 화살표가 할 일이 없다.
   실제 표시 규칙은 아래 max-width:768px 미디어쿼리에 있다. */
.jdh_skin__nav { display: none; }
/* ── 정보 패널 (2026-08-03 재설계) ────────────────────────────────────
 * 이전에는 [숫자 — 카테고리] / 큰 이름 / 설명만 세로로 쌓여 있어, 카테고리와
 * 장비명의 위계가 흐릿하고 아래가 허전했다. 아래 네 가지를 바꿨다.
 *   1) 좌측 세로 골드 라인으로 정보 블록을 하나로 묶는다
 *   2) 인덱스는 "01 / 14" 로 — 지금 몇 번째 장비를 보고 있는지 드러낸다
 *   3) 카테고리는 알약 배지 → 장비명(큰 흰 텍스트)과 역할이 분리된다
 *   4) 장비명 아래 골드 언더라인 + 하단 CTA 로 시선이 끝까지 이어진다
 * 장비명은 히어로 타이틀(54px)을 넘지 않도록 상한을 둔다(사이트 공통 규칙). */
.jdh_skin__info {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 4px 8px 4px 32px;
	transition: opacity .4s ease, transform .4s ease;
}
.jdh_skin__info::before {   /* 좌측 세로 액센트 라인 */
	content: '';
	position: absolute;
	left: 0; top: 6px; bottom: 6px;
	width: 2px;
	border-radius: 2px;
	background: linear-gradient(180deg,
		rgba(232,215,182,0) 0%,
		rgba(232,215,182,.55) 18%,
		rgba(232,215,182,.28) 62%,
		rgba(232,215,182,0) 100%);
}
/* 메타 라인: 인덱스(01 / 14) — 규칙선 — 카테고리 배지 */
.jdh_skin__meta { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
/* 인덱스 숫자 — 2026-09-01 사용자 지시로 세리프(Cormorant)에서 Pretendard 로 교체.
   ⚠ 자간은 세리프 때 값(1px / .5px)을 그대로 쓰지 말 것 — Pretendard 숫자는 폭이 넓어
     그대로 두면 "0 1" 처럼 벌어져 보인다. 산세리프에 맞춰 좁혔다. */
.jdh_skin__idx {
	display: inline-flex; align-items: baseline; gap: 4px;
	font-family: 'Pretendard', sans-serif; font-weight: 700; font-size: 34px; line-height: 1;
	color: #E8D7B6; letter-spacing: -0.4px;
}
.jdh_skin__total {
	font-family: 'Pretendard', sans-serif; font-weight: 500; font-size: 17px;
	color: rgba(232,215,182,.42); letter-spacing: -0.2px;
}
.jdh_skin__meta-rule { flex: 0 0 auto; width: 40px; height: 1px; background: rgba(232,215,182,.42); }
.jdh_skin__cat {
	display: inline-flex; align-items: center;
	padding: 7px 16px;
	border: 1px solid rgba(203,175,126,.42);
	border-radius: 999px;
	font-family: 'Pretendard', sans-serif; font-weight: 600; font-size: 14px;
	letter-spacing: 2.4px; color: #D9C193;
}
/* 전환 시 살짝 슬라이드/줌 세틀 */
.jdh_skin__viewer.is-swapping .jdh_skin__photo img { opacity: .25; transform: scale(1.05); }
.jdh_skin__viewer.is-swapping .jdh_skin__info { opacity: 0; transform: translateY(12px); }
.jdh_skin__name {
	position: relative;
	margin: 0 0 30px;
	padding-bottom: 22px;
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: clamp(34px, 3.6vw, 54px);   /* 히어로 타이틀(54px) 이하 — 사이트 공통 상한 */
	line-height: 1.16;
	letter-spacing: -1px;
	color: #ffffff !important;   /* 어두운 배경 위 가독성 위해 흰색 강제 */
}
.jdh_skin__name::after {     /* 이름 아래 짧은 골드 언더라인 */
	content: '';
	position: absolute;
	left: 0; bottom: 0;
	width: 62px; height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, #E8D7B6 0%, rgba(232,215,182,.15) 100%);
}
/* 장비 슬로건 — 2026-08-05 사용자 원고에 장비마다 한 줄 카피가 있어 이름과 설명 사이에 넣었다 */
.jdh_skin__slogan {
	margin: 0 0 14px;
	font-family: 'Pretendard', sans-serif;
	font-weight: 600;
	font-size: 20px;
	letter-spacing: -0.3px;
	color: #E8D7B6 !important;   /* 어두운 배경 위 골드 */
}
/* 특징 4줄(· 로 시작하는 목록) — 줄이 여러 개라 행간을 조금 좁혔다 */
.jdh_skin__desc {
	margin: 0; max-width: 560px;
	font-family: 'Pretendard', sans-serif;
	font-weight: 400;
	font-size: 17px;
	line-height: 1.78;
	letter-spacing: -0.2px;
	color: rgba(224,233,222,.82) !important;
}
/* 특징 한 항목 = 한 블록 (2026-09-16 사용자 지시 — 5개 언어 공통)
 *   접힌 둘째 줄이 불릿(·) 아래가 아니라 **글자 시작선**에 맞춰 들여쓰기(hanging indent) 되게.
 *   padding-left 만큼 밀고 첫 줄만 text-indent 로 되돌린다. 값은 불릿+공백의 **실측 폭**이다
 *   (Pretendard 17px 에서 「· 」 = 8.07px = 0.475em, 2026-09-16 Playwright 실측) — 둘째 줄이 첫 글자와 정확히 나란히 선다.
 *   일본어 불릿 「・ 」 는 따로 잰 값(1.17em, 같은 날 실측 0.1px). 불릿 문자나 글꼴을 바꾸면 다시 재서 맞출 것.
 *   ⚠ 모바일(≤768) 은 아래 미디어쿼리에서 글자 크기가 바뀌지만 em 단위라 비율이 그대로 따라온다.
 *   ⚠ main_skin.jsp 5벌(한·영·중·일·몽)이 JSP 초기 렌더와 JS 교체 양쪽에서 이 span 을 만든다. */
.jdh_skin__desc-li { display: block; padding-left: .475em; text-indent: -.475em; }
html[lang="ja"] .jdh_skin__desc-li { padding-left: 1.17em; text-indent: -1.17em; }
/* 하단 CTA — 정보가 설명에서 끊기지 않도록 다음 행동으로 잇는다 */
.jdh_skin__cta {
	display: inline-flex; align-items: center; gap: 12px;
	align-self: flex-start;
	margin-top: 34px;
	padding-bottom: 9px;
	border-bottom: 1px solid rgba(232,215,182,.34);
	font-family: 'Pretendard', sans-serif; font-weight: 600; font-size: 15.5px;
	letter-spacing: .2px; color: #E8D7B6; text-decoration: none;
	transition: color .25s ease, border-color .25s ease, gap .25s ease;
}
.jdh_skin__cta:hover { color: #F6EBD4; border-color: rgba(232,215,182,.7); gap: 18px; }
/* 화살표 — 2026-08-07 사용자 지시로 CSS 로 그리던 '가는 선 + 45° 촉' 을 이미지로 교체.
 * ⚠ background-image 가 아니라 **mask** 다. 이 CTA 는 hover 에 글자색이 밝아지므로(#E8D7B6 → #F6EBD4)
 *   화살표도 currentColor 를 따라가야 한다.
 * ⚠ 같은 화살표가 시그니처 4종(repot·juvegen·custom·slimcare)의 FAQ CTA 에도 있다. 고칠 때 함께 볼 것. */
.jdh_skin__cta i {
	display: block; width: 28px; height: 11px;
	background-color: currentColor;
	-webkit-mask: url('/img/jd_cursor_arrow.png') center / contain no-repeat;
	        mask: url('/img/jd_cursor_arrow.png') center / contain no-repeat;
}

/* 버튼 그리드 — 유리질 카드 + 좌측 골드 액센트, 선택 시 골드 필 */
/* 장비 14종 = 7열 × 2줄. 2026-08-04 사용자 지시로 5열(마지막 줄 4개라 오른쪽이 비었다) → 7열.
 * ⚠ 14 의 약수는 2 와 7 뿐이라 이 둘만 줄이 딱 떨어진다. 장비 수가 바뀌면 열 수도 다시 볼 것.
 * inner 1240px 기준 카드 폭 = (1240 − gap 16×6) ÷ 7 ≈ 163px — 가장 긴 이름(소프라노 티타늄)이
 * 한 줄에 들어가는 하한선이라, 여기서 padding·폰트를 더 키우면 이름이 두 줄로 접힌다. */
.jdh_skin__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 16px;
	margin-top: 28px;
}
.jdh_skin__btn {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	/* 2026-08-06 VIEW 블록을 걷어내며 카드가 [카테고리/장비명] 두 줄이 됐다 → 위아래 여백을 균형에 맞춰 조정 */
	padding: 20px 16px 20px;
	text-align: left;
	background: linear-gradient(158deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.025) 100%);
	border: 1px solid rgba(232,215,182,.22);
	border-radius: 14px;
	overflow: hidden;
	cursor: pointer;
	outline: none;                              /* 클릭 시 나타났다 사라지는 포커스 링 제거 */
	-webkit-tap-highlight-color: transparent;
	transition: background .25s ease, transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease;
	/* border-color 트랜지션 제외 → 선택 전환 시 테두리 크로스페이드(잔상) 방지 */
}
.jdh_skin__btn:focus, .jdh_skin__btn:focus-visible { outline: none; }
/* 좌측 골드 액센트 바 (hover/선택 시 위→아래로 차오름) */
.jdh_skin__btn::before {
	content: '';
	position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
	background: linear-gradient(180deg, #E8D7B6 0%, #B0966A 100%);
	transform: scaleY(0); transform-origin: 50% 0;
	transition: transform .32s cubic-bezier(.22,.61,.36,1);
}
.jdh_skin__btn-cat {
	font-family: 'Pretendard', sans-serif;
	font-weight: 600;
	font-size: 11.5px;
	line-height: 1;
	letter-spacing: 1.6px;
	color: #C7AC7C;
	transition: color .25s ease;
}
.jdh_skin__btn-label {
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: 16.5px;
	line-height: 1.35;
	letter-spacing: -0.4px;
	white-space: nowrap;            /* 이름이 접히면 카드 높이가 행 전체로 번진다 — 폰트/여백으로 폭을 맞춘다 */
	color: #EDF2EB;                 /* 기본은 흰색 계열 → 어두운 배경에서 확실히 보이게 */
	transition: color .25s ease;
}
/* ⚠ .jdh_skin__view / .jdh_skin__arrow 는 현재 미사용 —
 *   2026-08-06 사용자 요청으로 카드의 VIEW + 화살표를 마크업에서 걷어냈다(main_skin.jsp).
 *   되살릴 일이 없다면 이 두 블록과 아래 hover 규칙의 .jdh_skin__view 부분을 지워도 된다. */
.jdh_skin__view {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin-top: 10px;
	padding-top: 11px;
	border-top: 1px solid rgba(232,215,182,.18);
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 1.6px;
	color: #B4C4B4;
	transition: color .25s ease, border-color .25s ease;
}
/* 화살표(→) — CSS 로만 그린 얇은 셰브론
 * ⚠ 촉의 transform-origin 은 반드시 center 로 둘 것(2026-08-03 수정).
 *   이전에는 100% 50% 였는데, 그 기준으로 45° 돌리면 촉이 축선 위로 들려 화살표가 어긋나 보인다.
 *   center 로 두고 translate 로만 맞추면 정사각 촉의 회전 중심이 그대로라 축 끝에 정확히 얹힌다. */
.jdh_skin__arrow {
	position: relative;
	display: inline-block;
	width: 26px; height: 10px;
	transition: transform .25s cubic-bezier(.22,.61,.36,1);
}
/* 2026-08-05 1px → 1.6px. 12px VIEW 글자(700) 옆에서 1px 축은 실처럼 가늘어 흐려 보였다.
   축과 촉의 두께는 반드시 같은 값이어야 한 획으로 이어져 보인다. */
.jdh_skin__arrow::before {   /* 가로 축 */
	content: ''; position: absolute; left: 0; top: 50%;
	width: 100%; height: 1.6px; background: currentColor;
	border-radius: 1px;      /* 축 끝 마감 — 두꺼워질수록 각진 끝이 눈에 띈다 */
	transform: translateY(-50%);
}
.jdh_skin__arrow::after {    /* 촉 */
	content: ''; position: absolute; right: 0; top: 50%;
	width: 8px; height: 8px;
	border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor;
	border-top-right-radius: 2px;   /* 꼭짓점을 살짝 둥글게 — 뾰족한 끝이 덜 날카롭다 */
	/* 두께가 늘어난 만큼 촉을 안쪽으로 더 당겨야 축 끝과 정확히 맞물린다(1px → 1.4px) */
	transform: translate(-1.4px, -50%) rotate(45deg); transform-origin: center;
}

/* hover */
.jdh_skin__btn:hover {
	background: linear-gradient(158deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.045) 100%);
	transform: translateY(-3px);
	box-shadow: 0 18px 34px -20px rgba(0,0,0,.8);
}
.jdh_skin__btn:hover::before { transform: scaleY(1); }
.jdh_skin__btn:hover .jdh_skin__view { color: #E8D7B6; border-top-color: rgba(232,215,182,.34); }
.jdh_skin__btn:hover .jdh_skin__arrow { transform: translateX(3px); }

/* 선택(active) — 골드 필 + 다크 텍스트로 가장 강한 대비 */
.jdh_skin__btn.is-active {
	background: linear-gradient(158deg, #E0CCA3 0%, #BE9F6D 100%);
	border-color: #E8D7B6;
	box-shadow: 0 16px 34px -16px rgba(194,168,120,.55);   /* 전역 button 규칙에 덮이지 않도록 box-shadow 사용 */
}
.jdh_skin__btn.is-active::before { transform: scaleY(0); }
.jdh_skin__btn.is-active .jdh_skin__btn-cat { color: #6B5525; }
.jdh_skin__btn.is-active .jdh_skin__btn-label { color: #17210F; }
.jdh_skin__btn.is-active .jdh_skin__view { color: #3B3016; border-top-color: rgba(23,33,15,.22); }
.jdh_skin__btn.is-active:hover { transform: none; }

/* 반응형 */
@media all and (max-width: 1024px) {
	/* 7열은 inner 1240px 를 다 쓸 때만 성립한다 — 여기부터는 카드가 넓어지므로
	 * 안여백·글자 크기를 원래 값으로 되돌린다(7열용 축소값 해제) */
	.jdh_skin__grid { grid-template-columns: repeat(3, 1fr); }
	.jdh_skin__btn { padding: 18px 18px 14px; }
	.jdh_skin__btn-cat { font-size: 12px; letter-spacing: 2px; }
	.jdh_skin__btn-label { font-size: 17px; letter-spacing: -0.3px; }
}
@media all and (max-width: 900px) {
	.jdh_skin__viewer { grid-template-columns: 1fr; gap: 32px; min-height: 0; }
	.jdh_skin__photo { height: 420px; }
	.jdh_skin__info { padding: 2px 0 2px 22px; }
}
@media all and (max-width: 768px) {
	.jdh_skin { padding: 48px 16px; }
	/* 2026-09-01 — 높이 고정(340px)을 비율로 바꿨다(사용자 지적 "모바일에서 어색함").
	   장비 PNG 17종은 **세로형 누끼**인데 340px 가로 박스에 contain 으로 넣으면 좌우가
	   통째로 비고 장비만 작게 앉는다. 4/5 세로 박스면 같은 폭에서 장비가 훨씬 커 보인다.
	   ⚠ height 고정으로 되돌리지 말 것. 폭이 기기마다 달라 여백 비율이 다시 어긋난다. */
	/* ⚠ max-height 는 태블릿(641~768px)용 상한이다 — 폭이 700px 을 넘으면 4/5 비율만으로는
	   사진 높이가 900px 가까이 되어 한 화면을 통째로 먹는다. 휴대폰 폭(≤430px)에서는
	   비율 높이가 이 값 아래라 걸리지 않는다. */
	.jdh_skin__photo { height: auto; aspect-ratio: 4 / 5; max-height: 480px; }
	.jdh_skin__photo::after { inset: 10px; }
	/* 안여백도 함께 줄인다 — 위 비율 변경분을 여백이 다시 먹으면 장비가 그대로 작다 */
	.jdh_skin__photo img { padding: 22px 18px; }
	/* 2026-09-09 — 장비가 박스 안에서 왼쪽/오른쪽으로 쏠려 보이던 것 보정(사용자 지시 "중앙정렬").
	 * 박스(좌우 16px)도 골드 프레임(inset 10px)도 대칭이고 이미지 사각형도 정중앙에 온다 —
	 * 쏠려 보인 원인은 **PNG 안에서 장비 실루엣이 한쪽에 치우쳐 있기 때문**이다.
	 *   예: 쿨소닉은 케이블이 좌하단으로 길게 늘어져 알파 사각형의 왼쪽을 채운다 →
	 *       사각형은 중앙이어도 본체는 왼쪽에 앉는다(실측 좌여백 92 / 우여백 107px).
	 * 보정량 = (알파 무게중심 + 행별 실루엣 중점의 중앙값) 평균을 이미지 렌더 폭에 환산한 값.
	 *   두 지표를 섞은 이유 — 무게중심만 쓰면 온다처럼 위로 뻗은 아치가 본체를 반대로 밀고,
	 *   중점 중앙값만 쓰면 쿨소닉처럼 늘어진 케이블에 과보정된다.
	 * ⚠ 데스크톱에는 넣지 않는다 — 박스가 넓어 좌우 여백이 150px 대라 이 정도는 보이지 않는다.
	 * ⚠ 3px 미만(울쎄라·티타늄·슈링크·포텐자·쥬브젠·CO2)은 규칙을 두지 않았다.
	 * ⚠ 값의 기준은 폭 390px 화면(이미지 렌더 폭이 박스 높이에 비례하므로 375~430 에서 ±8% 오차).
	 * ⚠ src 에는 JS 가 붙이는 ?v=타임스탬프가 따라온다 — 그래서 *= 부분일치로 잡는다.
	 * ⚠ 장비 PNG 를 교체하면 이 값도 다시 재야 한다(계산식은 위 두 지표 그대로). */
	/* 좌우 이동 버튼 — 사진을 손가락으로 미는 슬라이드의 어포던스 겸 탭 이동(2026-09-09 사용자 요청).
	   ⚠ z-index 3 — 골드 프레임(::after, z-index 2) 위에 와야 눌린다.
	   ⚠ 사진 안쪽 10px 에 붙인다: 더 바깥으로 빼면 프레임 선과 겹쳐 지저분하다. */
	.jdh_skin__nav {
		display: flex; align-items: center; justify-content: center;
		position: absolute; top: 50%; z-index: 3;
		width: 38px; height: 38px; margin-top: -19px; padding: 0;
		background: rgba(16,22,19,.42);
		border: 1px solid rgba(232,215,182,.28);
		border-radius: 999px;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	.jdh_skin__nav:focus, .jdh_skin__nav:focus-visible { outline: none; }
	.jdh_skin__nav--prev { left: 10px; }
	.jdh_skin__nav--next { right: 10px; }
	.jdh_skin__nav span {                       /* 셰브론 — 정사각의 두 변만 남겨 45° 로 돌린다 */
		display: block; width: 9px; height: 9px;
		border-top: 1.6px solid #E8D7B6; border-right: 1.6px solid #E8D7B6;
	}
	.jdh_skin__nav--prev span { transform: translateX(2px) rotate(-135deg); }
	.jdh_skin__nav--next span { transform: translateX(-2px) rotate(45deg); }

	.jdh_skin__photo img[src*="jd_thermage"]   { object-position: calc(50% - 3px) center; }
	.jdh_skin__photo img[src*="jd_density"]    { object-position: calc(50% + 3px) center; }
	.jdh_skin__photo img[src*="jd_coolsonic"]  { object-position: calc(50% + 10px) center; }
	.jdh_skin__photo img[src*="jd_sofwave"]    { object-position: calc(50% + 6px) center; }
	.jdh_skin__photo img[src*="jd_oligio"]     { object-position: calc(50% - 4px) center; }
	.jdh_skin__photo img[src*="jd_repod"]      { object-position: calc(50% + 5px) center; }
	.jdh_skin__photo img[src*="jd_onda"]       { object-position: calc(50% + 8px) center; }
	.jdh_skin__photo img[src*="jd_tuneface"]   { object-position: calc(50% - 5px) center; }
	.jdh_skin__photo img[src*="jd_inmode"]     { object-position: calc(50% + 5px) center; }
	.jdh_skin__photo img[src*="jd_dueltoning"] { object-position: calc(50% + 11px) center; }
	.jdh_skin__photo img[src*="jd_levinas"]    { object-position: calc(50% + 4px) center; }
	.jdh_skin__photo img[src*="jd_corage"]     { object-position: calc(50% + 5px) center; }
	/* 정보 블록 — 좁은 화면에서는 좌측 세로 액센트 라인을 걷고 **가운데 정렬**한다(2026-09-01 사용자 지시).
	   선 + 들여쓰기(22px)가 남으면 사진 카드(좌측 16px)와 글 시작선(38px)이 어긋나 보인다.
	   ⚠ 데스크톱에서는 이 선이 정보 블록을 하나로 묶는 장치다 — 그쪽까지 지우지 말 것.
	   ⚠ 이름 아래 골드 언더라인(::after)은 left:0 기준이라 함께 가운데로 옮겨야 한다. */
	.jdh_skin__info { padding: 2px 0; text-align: center; }
	.jdh_skin__info::before { display: none; }
	.jdh_skin__name::after { left: 50%; transform: translateX(-50%); }
	.jdh_skin__meta { gap: 12px; margin-bottom: 16px; justify-content: center; }
	.jdh_skin__name { font-size: clamp(30px, 8.4vw, 40px); margin-bottom: 22px; padding-bottom: 16px; }
	.jdh_skin__name::after { width: 48px; }
	/* 데스크톱 값(34/17)과 같은 비율로 줄인다 — 세리프 시절 값(30/15)을 그대로 두면
	   Pretendard 로 바뀐 지금은 좁은 화면에서 숫자가 이름보다 무겁게 보인다 */
	.jdh_skin__idx { font-size: 27px; }
	.jdh_skin__total { font-size: 14px; }
	.jdh_skin__cat { font-size: 12.5px; letter-spacing: 1.8px; padding: 6px 13px; }
	.jdh_skin__slogan { font-size: 17px; margin-bottom: 11px; }
	/* 설명은 '· ' 로 시작하는 항목 나열이라 글줄까지 가운데로 흘리면 항목 시작점이 줄마다
	   어긋나 읽기 어렵다 → **덩어리는 가운데, 글줄은 왼쪽**. 화면에는 중앙 정렬로 보인다.
	   ⚠ max-width 는 좌우 여백 확보용 — 없으면 긴 줄이 화면 끝에 그대로 닿는다. */
	/* ⚠ inline-block + 부모 text-align:center 로는 가운데로 오지 않는다(실제로 좌측에 붙었다).
	   width:fit-content + margin auto 조합으로 덩어리 자체를 가운데에 놓는다. */
	.jdh_skin__desc {
		display: block; width: fit-content; max-width: 320px;
		margin-left: auto; margin-right: auto;
		text-align: left; font-size: 15px; line-height: 1.7;
	}
	.jdh_skin__cta { margin-top: 26px; font-size: 14.5px; }
	/* 2026-08-12 — 장비 18종이 2열 × 9줄 카드로 쌓여 섹션이 화면 세 개 분량이었다.
	 * → **한 줄짜리 버튼을 흘려 나열**(사용자 선택). 카드가 아니라 뷰어를 바꾸는 탭 컨트롤이므로,
	 *   이렇게 흘리면 18종이 한 화면에 다 들어오고 원하는 장비를 스크롤 없이 바로 누를 수 있다.
	 * ⚠ 가로 스와이프(2줄 캐러셀)를 먼저 만들었다가 걷어냈다 — 세로는 더 짧았지만
	 *   지금 어느 장비까지 봤는지 알 수 없고, 뒤쪽 장비는 존재 자체가 가려졌다.
	 *   되살리지 말 것(overflow-x/scroll-snap/grid-auto-flow 를 여기 다시 넣지 말 것).
	 * ⚠ 카테고리(.jdh_skin__btn-cat)는 여기서 숨긴다 — 같은 값이 상단 뷰어 메타에 이미 뜬다.
	 *   두 줄짜리 버튼이 되면 줄 수가 두 배가 된다.
	 * ⚠ 2026-09-09 — 모서리를 **알약(999px) → 데스크톱과 같은 사각 버튼(12px)** 으로(사용자 지시).
	 *   나열 방식(flex wrap)은 그대로 둔다 — 위의 "한 화면에 다 들어온다"가 이 화면폭의 전제다.
	 *   ⚠ 2열 그리드로 각을 맞추는 방법은 쓰지 않았다: 18종이면 9줄이 되어 다시 길어지고,
	 *     3열은 가장 긴 이름(슈링크유니버스)이 휴대폰 폭에서 한 줄에 들어가지 않는다(375px 기준 셀 109px < 필요 115px). */
	.jdh_skin__grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		grid-template-columns: none;
		gap: 8px;
		margin-top: 22px;
	}
	.jdh_skin__btn {
		flex: 0 0 auto;
		flex-direction: row;
		align-items: center;
		gap: 0;
		padding: 11px 15px;
		border-radius: 12px;
	}
	/* 좌측 골드 액센트 바 — 사각 버튼에서는 모양이 살지만, 나타나는 계기가 hover 뿐이라
	   터치 화면에서는 어느 때도 보이지 않는다(선택 시엔 scaleY(0)). 그대로 숨겨 둔다. */
	.jdh_skin__btn::before { display: none; }
	.jdh_skin__btn-cat { display: none; }
	.jdh_skin__btn-label { font-size: 14.5px; line-height: 1.2; }
	.jdh_skin__view { font-size: 11px; letter-spacing: 1.2px; margin-top: 8px; padding-top: 9px; }
}


/* ===== JD SHORTS — 좌측 카피 + 우측 중앙강조 캐러셀 (2026-08-11 개편, 사용자 지급 시안) =====
 * 이전 구조: [좌측 큰 피처 카드] + [우측 썸네일 릴], 타이틀은 섹션 맨 위 한 줄.
 * 현재 구조: [좌측 카피 블록(아이브로우·타이틀·설명·CTA)] + [우측 캐러셀(가운데 카드 확대)].
 * ⚠ 캐러셀은 Swiper(centeredSlides)로 돈다 — 인프라 섹션과 같은 방식이다.
 *   이전의 직접 DOM 조작 릴(.jdh_shorts__reel / __feature / __thumb)은 마크업과 함께 걷어냈다. */
.jdh_shorts {
	background: #F8F6F0;   /* 2026-08-05 #FCFBF7 → 한 톤 진하게. 아래 .jdh_care::before 반원도 같은 값이어야 이어진다 */
	margin-top: -64px;                /* 위 섹션(.jdh_skin margin-bottom:64px) 상쇄 → 딱 붙임 */
	padding: 92px 0 48px;
	overflow: hidden;                 /* 캐러셀 우측 잘림 클립 + 가로 스크롤 방지 */
}
.jdh_shorts * { box-sizing: border-box; }
/* 2단 배치 — 좌측 카피는 본문 컬럼에 맞추고, 우측 캐러셀은 화면 오른쪽 끝까지 풀블리드로 흘린다.
   ⚠ 우측에 패딩을 주지 말 것. 카드가 화면 끝에서 잘려 나가는 '더 있다'는 느낌이 이 시안의 핵심이다. */
.jdh_shorts__inner {
	display: grid;
	grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
	align-items: center;
	gap: 0 90px;   /* 카피와 왼쪽 잘린 카드 사이 숨통 — 좁히면 카드가 글자에 닿아 보인다 */
	padding-left: max(40px, calc((100% - 1400px) / 2 + 20px));
}

/* 진입 애니메이션 */
.jdh_shorts .jdh-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.jdh_shorts .jdh-reveal.is-in { opacity: 1; transform: none; }

/* ── 좌측 카피 ─────────────────────────────────────────────────── */
.jdh_shorts__eyebrow {
	display: flex; align-items: center; gap: 16px;
	margin-bottom: 26px;
	font-family: 'Cormorant Garamond', serif; font-weight: 700;
	font-size: 17px; letter-spacing: 4.6px; text-transform: uppercase; color: #4A5C4C;
}
/* 라벨 오른쪽 짧은 선(시안 요소) — 텍스트 폭만큼만 차지하도록 flex 로 붙인다 */
.jdh_shorts__eyebrow::after {
	content: ''; width: 34px; height: 1px; background: #B6B2A6;
}

/* ── 우측 캐러셀 ───────────────────────────────────────────────── */
.jdh_shorts__carousel { position: relative; min-width: 0; padding: 26px 0 0; }
/* 왼쪽 경계 페이드 — overflow:hidden 이 카드를 칼로 자른 듯 끊는 자리를 덮는다(2026-08-11 지시).
   ⚠ mask-image 를 쓰지 않는 이유: 마스크는 합성 레이어를 만들어 coverflow 의 3D(preserve-3d)를
     평평하게 눌러 버릴 수 있다. 섹션 배경이 단색(#F8F6F0)이라 같은 색 그라디언트를 얹는 편이
     안전하면서 결과도 동일하다. ⚠ 섹션 배경색을 바꾸면 이 값도 함께 바꿔야 한다.
   ⚠ 화살표(z-index:5)보다 낮게 둘 것 — 3 이면 페이드가 화살표를 가리지 않는다. */
.jdh_shorts__carousel::before {
	content: '';
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 150px;
	z-index: 3;
	pointer-events: none;
	background: linear-gradient(90deg,
		#F8F6F0 0%, rgba(248,246,240,.92) 34%, rgba(248,246,240,.55) 66%, rgba(248,246,240,0) 100%);
}
/* ⚠ overflow 는 반드시 hidden 이다. visible 로 두면 centeredSlides 특성상 왼쪽 슬라이드들이
   컨테이너 밖으로 뻗어 **좌측 카피 위를 덮는다**(2026-08-11 실제로 발생).
   대신 위아래 padding 으로 확대(scale 1.16)된 가운데 카드가 잘릴 자리를 벌고, 같은 값의
   음수 margin 으로 레이아웃 높이를 되돌린다 — 인프라 섹션 캐러셀과 같은 방식. */
.jdh_shorts__swiper { overflow: hidden; padding: 42px 0 34px; margin: -42px 0 -34px; }
/* 카드 비율 9:16 — 유튜브 쇼츠 썸네일(oar2)·임베드와 같은 비율이라 상하가 잘리지 않는다.
   폭은 vw 비례: 화면이 넓어지면 카드도 함께 커진다(시안의 '큼직한 가운데 카드'). */
/* ⚠ 여기(.jdh_shorts__slide)에는 transform 을 걸지 말 것.
   coverflow 효과가 이 요소의 transform 을 매 프레임 직접 덮어쓴다 — 걸어 두면 둘이 싸워
   회전이 튀거나 확대가 사라진다. 확대·채도 연출은 전부 아래 .jdh_shorts__card 담당. */
.jdh_shorts__slide {
	width: clamp(190px, 15.6vw, 268px);
	height: auto;
}
.jdh_shorts__swiper .swiper-slide-active.jdh_shorts__slide { z-index: 2; }
.jdh_shorts__card {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 9 / 16;
	border-radius: 12px;    /* 시안의 라운드 — 이미지 박스 공통 8px 보다 크게 잡았다 */
	overflow: hidden;
	background: linear-gradient(155deg, #dfe5de 0%, #b9c4b8 100%);
	text-decoration: none;
	cursor: pointer;
	/* 양옆 카드는 살짝 작고 색이 죽는다 → 가운데 카드가 앞으로 나온 것처럼 읽힌다.
	   2026-08-11 — 거리에 따라 **초점도 흐려진다**(사용자 지시). 3단계:
	     바깥쪽(기본) 1.8px → 바로 옆(prev/next) 0.7px → 가운데 0.
	   ⚠ 값을 더 올리지 말 것. 2px 를 넘으면 썸네일의 제목 글씨가 뭉개져 무슨 영상인지 안 읽힌다. */
	transform: scale(.94);
	filter: saturate(.7) brightness(.97) blur(1.8px);
	box-shadow: 0 16px 34px -20px rgba(28,34,26,.5);
	transition: transform .62s cubic-bezier(.22,.61,.36,1), filter .62s ease, box-shadow .62s ease;
}
.jdh_shorts__swiper .swiper-slide-prev .jdh_shorts__card,
.jdh_shorts__swiper .swiper-slide-next .jdh_shorts__card {
	filter: saturate(.84) brightness(.98) blur(.7px);
}
.jdh_shorts__swiper .swiper-slide-active .jdh_shorts__card {
	transform: scale(1.1);
	filter: none;
	box-shadow: 0 30px 60px -26px rgba(24,30,22,.62);   /* 앞으로 나온 만큼 그림자도 깊게 */
}
/* 재생 중인 카드는 흐리게 두지 않는다 — 임베드가 얹혀도 카드 자체 filter 는 그대로 걸리기 때문 */
.jdh_shorts__card.is-playing { filter: none; }
/* 카드 이미지 — data-img / 유튜브 썸네일을 JS 가 background-image 로 넣는다 */
.jdh_shorts__media {
	position: absolute; inset: 0;
	background-position: center; background-size: cover; background-repeat: no-repeat;
	transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.jdh_shorts__card:hover .jdh_shorts__media { transform: scale(1.05); }

/* 재생 버튼 — 시안은 카드 하단 가운데의 반투명 원.
   ⚠ 썸네일에 이미 제목이 박혀 있어 캡션 오버레이를 두지 않는다. 이 버튼이 유일한 오버레이다. */
.jdh_shorts__play {
	position: absolute; z-index: 2;
	left: 50%; bottom: 18px; transform: translateX(-50%);
	width: 42px; height: 42px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: rgba(20,26,20,.42);
	border: 1px solid rgba(255,255,255,.72);
	color: #fff;
	backdrop-filter: blur(2px);
	transition: background .25s ease, transform .25s ease;
}
.jdh_shorts__play svg { width: 15px; height: 15px; margin-left: 2px; display: block; }
.jdh_shorts__card:hover .jdh_shorts__play { background: rgba(20,26,20,.68); transform: translateX(-50%) scale(1.08); }
/* 비활성 카드의 재생 버튼은 흐리게 — 누를 수 있는 건 가운데 카드뿐이다(JS 와 짝) */
.jdh_shorts__slide:not(.swiper-slide-active) .jdh_shorts__play { opacity: .5; }

/* 인라인 재생 — 클릭 시 JS 가 유튜브 임베드 iframe 을 카드 위에 덮는다(include/main_shorts.jsp) */
.jdh_shorts__player {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	border: 0; z-index: 3;
	background: #000;
}

/* ※ 하단 진행 표시(.jdh_shorts__progress / __pnum / __pbar / __toggle)는 2026-08-11
     사용자 지시로 제거했다. 마크업·스크립트도 함께 걷어냈다. */

/* 화살표(원형) — 시안의 베이지 버튼 */
.jdh_shorts__arrow {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
	width: 52px; height: 52px;
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0; border: 0; border-radius: 999px;
	/* 2026-08-14 — 베이지 → **딥그린**(사용자 지시: 밝은 썸네일 위에서 화살표가 묻혀 안 보였다).
	   hover 는 종전 베이지로 되돌아온다(= 색이 뒤바뀐 셈). 두 값을 다시 맞바꾸지 말 것. */
	background: #2F5138; color: #fff;
	cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent;
	box-shadow: 0 8px 20px rgba(20,32,25,.22);
	transition: background .2s, color .2s, transform .15s;
}
.jdh_shorts__arrow:hover { background: #EFE9DC; color: #3C4A3C; }
.jdh_shorts__arrow:active { transform: translateY(-50%) scale(.94); }
.jdh_shorts__arrow[disabled] { opacity: .35; cursor: default; pointer-events: none; }
.jdh_shorts__arrow svg { width: 22px; height: 22px; display: block; }
/* 2026-08-11 — 화살표는 캐러셀 기준 좌우로 옮겼다(이전에는 피처 카드 좌표에 고정돼 있었다).
   좌: 카피와 카드 사이 / 우: 가운데 카드 오른쪽. 시안의 베이지 원형 버튼. */
.jdh_shorts__arrow--prev { left: -30px; }
/* ⚠ 하한 40px → 112px (2026-08-14). 40px 이면 화면 우측 고정 퀵메뉴(right 33px + 폭 62px)와
   정확히 겹쳐 다음 화살표가 카카오톡 버튼 뒤에 숨었다 — 화살표가 안 보인다는 지적의 실제 원인. */
.jdh_shorts__arrow--next { left: auto; right: max(112px, calc((100% - 1400px) / 2 + 20px)); }

/* 섹션 헤더(좌측 카피 블록) */
.jdh_shorts__head { max-width: none; }
.jdh_shorts__title {
	margin: 0 0 24px;
	font-family: 'Pretendard', sans-serif; font-weight: 700;
	font-size: 40px; line-height: 1.42;   /* 히어로 타이틀 상한 */
	letter-spacing: -1px; color: #1C1E1A;
}
/* 마지막 줄(JDH의 모든 이야기)만 딥그린 — 시안의 색 위계 */
.jdh_shorts__title em { font-style: normal; color: #2F5138; }
.jdh_shorts__amp { color: #C1A27A; }   /* & 만 골드 포인트(옛 카피용, 남겨 둔다) */
.jdh_shorts__desc {
	margin: 0 0 38px; max-width: 600px;
	font-family: 'Pretendard', sans-serif; font-weight: 400; font-size: 16.5px; line-height: 1.85;
	color: #6B7269;   /* 기존 #97A895 보다 대비 강화(가독성) */
}
/* CTA — 시안은 채움 버튼이 아니라 얇은 아웃라인 알약이다 */
.jdh_shorts__more {
	display: inline-flex; align-items: center; gap: 14px;
	padding: 16px 30px; border-radius: 999px;
	border: 1px solid #C6C1B2;
	background: transparent;
	color: #2C3A2E !important;   /* 전역 a 색상 오버라이드 방지 */
	text-decoration: none;
	font-family: 'Pretendard', sans-serif; font-weight: 600; font-size: 16px;
	transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.jdh_shorts__more i { display: block; line-height: 0; transition: transform .25s ease; }
.jdh_shorts__more i svg { width: 15px; height: 15px; display: block; }
.jdh_shorts__more:hover { background: #2F4436; border-color: #2F4436; color: #fff !important; }
.jdh_shorts__more:hover i { transform: translateX(4px); }

/* 유튜브 버전 CTA (2026-08-14) — 유튜브로 나간다는 걸 색과 마크로 알린다.
 * ⚠ 마크는 hover 에서 색이 **반전**된다: 평상시 [빨간 몸통 + 흰 삼각] → hover [흰 몸통 + 빨간 삼각].
 *   삼각형에 fill 을 직접 박지 말 것(--yt-tri 로 갈아끼우는 구조가 깨진다). */
.jdh_shorts__more--yt {
	--yt-red: #FF0000;
	--yt-tri: #fff;
	gap: 11px;
	padding-left: 24px;
	border-color: rgba(255, 0, 0, .38);
}
.jdh_shorts__ytmark { color: var(--yt-red); transform: none !important; }   /* 앞쪽 마크는 hover 로 밀지 않는다 */
.jdh_shorts__ytmark svg { width: 27px; height: 19px; display: block; }
.jdh_shorts__yttri { fill: var(--yt-tri); }
.jdh_shorts__more--yt:hover {
	--yt-tri: var(--yt-red);
	background: var(--yt-red);
	border-color: var(--yt-red);
	color: #fff !important;
}
.jdh_shorts__more--yt:hover .jdh_shorts__ytmark { color: #fff; }

/* ── 브랜드 로고 마퀴 (2026-08-11 신설) ────────────────────────────────
 * 섹션 하단을 가로지르며 로고가 끊기지 않고 흐른다.
 * ⚠ 트랙 **두 벌**을 나란히 두고 둘 다 `translateX(-100% - gap)` 만큼 민다.
 *   한 트랙에 2배로 넣고 -50% 를 주는 흔한 방식은 트랙 사이 gap 이 계산에서 빠져
 *   한 바퀴마다 이음매가 gap/2 씩 튄다. 아래 -64px 는 --mq-gap 과 반드시 같은 값이어야 한다.
 * ⚠ 좌우 끝은 mask 로 페이드 — 없으면 로고가 화면 모서리에서 뚝 잘린다. */
.jdh_shorts__marquee {
	--mq-gap: 64px;
	display: flex;
	gap: var(--mq-gap);
	margin: 96px 0 0;   /* 2026-08-11 52 → 96: 캐러셀 카드 밑단과 로고 줄이 붙어 보였다 */
	padding: 34px 0 6px;
	border-top: 1px solid rgba(28,30,26,.08);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
	        mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.jdh_shorts__mtrack {
	display: flex;
	flex: 0 0 auto;
	align-items: center;   /* 높이가 조금씩 다른 로고들의 세로 중심을 맞춘다 */
	gap: var(--mq-gap);
	/* 2026-08-11 — 속도 절반(사용자 지시). 34s → 88s.
	   ⚠ 단순히 68s(=34×2)가 아닌 이유: 로고가 5장 → 8장으로 늘어 트랙이 길어졌다.
	     체감 속도는 `트랙폭 ÷ 시간` 이라, 늘어난 폭을 반영해야 실제로 절반이 된다. */
	animation: jdhShortsMarquee 88s linear infinite;
}
.jdh_shorts__marquee:hover .jdh_shorts__mtrack { animation-play-state: paused; }
.jdh_shorts__mitem { flex: 0 0 auto; line-height: 0; }
/* 2026-08-11 — opacity .5 → 1(사용자 지시 "선명하게"). 원본이 2000px 이상이라 이 높이에서
   해상도는 충분했고, 흐려 보이던 건 이 투명도 하나였다.
   ⚠ 좌우 끝 페이드는 marquee 의 mask 가 담당한다 — 로고 자체를 다시 반투명하게 만들지 말 것.
   ⚠ height 는 네 로고에 **같은 값**을 준다. 02(1줄)와 03~05(2줄)는 비율이 다르지만
     JDH 심볼이 각 이미지의 세로를 꽉 채우는 구성이라, height 를 맞추면 심볼 크기가 나란해진다.
     30px → 36px: 2줄짜리(03~05)가 30px 에서는 아래 줄 글자가 뭉개져 읽히지 않았다. */
.jdh_shorts__mitem img { display: block; height: 36px; width: auto; opacity: 1; }
/* 2026-08-13 — 02(영문 1줄)만 유독 커 보인다는 지적. 실측하면 심볼 높이는 네 로고가 같지만
   영문 문구가 차지하는 비율이 02 는 61%(112/184), 03~05 는 39%(89/230) 라
   같은 height 를 주면 02 의 글자만 약 1.5배로 커진다(가로 폭도 444px vs 320px).
   → 02 만 28px 로 낮춰 글자 크기와 줄 길이를 나머지와 비슷하게 맞춘다.
   ⚠ 네 로고를 다시 같은 height 로 되돌리지 말 것 — 원본 구성이 달라 눈에는 어긋나 보인다. */
.jdh_shorts__mitem img[src*="jdh_logo_02"] { height: 28px; }
@keyframes jdhShortsMarquee {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-100% - var(--mq-gap))); }
}
@media (prefers-reduced-motion: reduce) {
	.jdh_shorts__mtrack { animation: none; }
}

/* ※ 옛 구조(피처 카드 + 릴) 잔재였던 .jdh_shorts__foot / 채움형 .jdh_shorts__more 블록은
     2026-08-11 개편에서 지웠다. 뒤에 남아 있는 동안 새 아웃라인 CTA 를 덮어
     버튼이 딥그린으로 채워져 나왔다(같은 선택자, 뒤에 오는 쪽이 이김). */

/* 반응형 — 2026-08-11 개편 구조(좌 카피 / 우 캐러셀) 기준으로 다시 잡았다 */
@media all and (max-width: 1400px) {
	.jdh_shorts__inner { grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 0 44px; }
	.jdh_shorts__title { font-size: 36px; }
}
@media all and (max-width: 1024px) {
	.jdh_shorts { padding: 72px 0 44px; }
	/* 2단이 성립하지 않는 폭 → 카피를 위로 세우고 캐러셀은 아래로 (풀블리드는 유지) */
	.jdh_shorts__inner { grid-template-columns: 1fr; gap: 40px 0; padding-left: 24px; }
	.jdh_shorts__head { padding-right: 24px; }
	.jdh_shorts__title { font-size: 32px; line-height: 1.38; }
	.jdh_shorts__title br { display: none; }   /* 가로가 넓어졌으므로 3줄 강제 줄바꿈을 푼다 */
	.jdh_shorts__desc { margin-bottom: 28px; }
	.jdh_shorts__slide { width: clamp(180px, 26vw, 240px); }
	.jdh_shorts__arrow { width: 46px; height: 46px; }
	.jdh_shorts__arrow--prev { left: 10px; }
	.jdh_shorts__arrow--next { right: 88px; }   /* 퀵메뉴(우측 78px 점유)를 피한다 — 위 주석 참조 */
	.jdh_shorts__carousel::before { width: 90px; }   /* 1열 배치에서는 왼쪽 여백이 좁다 */
}
@media all and (max-width: 768px) {
	.jdh_shorts { padding: 52px 0 36px; }
	.jdh_shorts__inner { padding-left: 16px; }
	.jdh_shorts__head { padding-right: 16px; }
	.jdh_shorts__eyebrow { font-size: 14px; letter-spacing: 3.6px; margin-bottom: 18px; }
	.jdh_shorts__title { font-size: 27px; margin-bottom: 16px; }
	.jdh_shorts__desc { font-size: 15.5px; margin-bottom: 24px; }
	.jdh_shorts__desc br { display: none; }
	.jdh_shorts__more { padding: 13px 24px; font-size: 15px; }
	/* 좁은 화면에서는 확대 배율을 낮춘다 — 1.1 이면 가운데 카드가 화면 밖으로 넘친다 */
	.jdh_shorts__slide { width: 46vw; }
	.jdh_shorts__swiper .swiper-slide-active .jdh_shorts__card { transform: scale(1.04); }
	.jdh_shorts__play { width: 36px; height: 36px; bottom: 12px; }
	.jdh_shorts__play svg { width: 13px; height: 13px; }
	/* 2026-09-01 — 화살표를 카드 위 좌우에서 **카드 아래 가운데**로 내렸다(사용자 지적).
	   우측 고정 퀵메뉴(세로 중앙)를 피하려고 next 만 right:84px 로 밀어 둔 탓에 좌우 여백이
	   6px 대 84px 로 어긋나 있었고, 두 버튼이 카드의 자막 위를 덮고 있었다.
	   아래로 내리면 퀵메뉴를 피할 이유가 사라져 좌우가 대칭이 된다.
	   ⚠ .jdh_shorts__carousel 은 overflow 가 visible 이라 bottom 배치가 잘리지 않는다
	     (overflow:hidden 은 안쪽 .jdh_shorts__swiper 에만 걸려 있다).
	   ⚠ 기본 규칙의 :active 는 translateY(-50%) 를 품고 있다 — 여기서 함께 풀지 않으면
	     버튼을 누르는 순간 위로 튄다. */
	.jdh_shorts__carousel { padding-bottom: 60px; }
	.jdh_shorts__arrow { width: 42px; height: 42px; top: auto; bottom: 0; transform: none; }
	.jdh_shorts__arrow:active { transform: scale(.94); }
	.jdh_shorts__arrow--prev { left: 50%; right: auto; margin-left: -51px; }
	.jdh_shorts__arrow--next { left: 50%; right: auto; margin-left: 9px; }
}


/* ===== 한·양방 협진이란 (Integrative Cooperative Care) — Figma 252:351 =====
 * 원래 이 한 섹션에 [협진 철학 + 4단계 상세]가 모두 들어 있어 과밀했다.
 * 진료 4단계는 아래 .jdh_flow 섹션(/include/main_flow.jsp)으로 분리했다. */
/* 2026-08-11 개편(사용자 지시): 좌측 진료 사진을 빼고 **섹션 전체를 풀블리드 배경 이미지**로.
 * ⚠ 배경 컷은 우측에 인물, 좌측이 빈 구도다 → 글은 좌측 한 컬럼에만 두고 우측은 비운다.
 *   `background-position` 을 center 로 바꾸면 인물이 글 위로 올라온다. `right center` 유지.
 * ⚠ 원본 `/img/jd_main_bg_02.png` 는 그대로 쓰면 안 된다(2026-08-28 갱신본 3633x1867·5.0MB).
 *   파생본 care_bg.jpg(2200x1700, 168KB)를 쓴다 — 원본이 갈릴 때마다 이 파생본을 다시 만들 것.
 *   2026-08-24 원본이 새 컷(정면 상반신·초록 드레스)으로 바뀌었고, 2026-08-28 같은 구도의
 *   다른 컷으로 한 번 더 교체돼 파생본 2종(care_bg.jpg · care_bg_m.jpg)을 다시 뽑았다.
 *   구도는 이전 컷들과 같다(모델 우측 · 좌측 여백) → 아래 `right top / cover` 를 그대로 유지한다.
 *   ⚠ 파생본 만드는 법 — 캔버스 2200x1700 에 원본을 2050px 폭(=1053px 높이)으로 좌상단에 그린 뒤
 *     ① 우측 150px : 사진 안쪽(가장자리에서 8px) 2px 열을 가로로 늘려 채운다.
 *        2026-08-21 "PC 에서 모델을 조금만 더 왼쪽으로" 요청의 결과물이다. 더/덜 옮기려면 이 폭을 조절.
 *        background-position 을 `right` 밖으로(예: right -60px) 미는 방법은 쓰지 않았다 —
 *        이미지 폭이 화면과 같아지는 초광폭(2560↑)에서 왼쪽에 배경색 띠가 드러난다.
 *     ② 아래 647px : 캔버스 비율(1.294)을 만들기 위한 여백이다.
 *        ⚠ 이 세로 여백이 핵심이다. 새 컷은 세로가 짧아(1867) 사진 그대로 쓰면 비율 2.09 →
 *          cover 가 세로를 맞추느라 크게 확대돼 **모델이 글·원형 카드 위로 올라온다**(실측 확인).
 *          1700 까지 늘리면 1600~1900 폭에서 폭 맞춤이 되어 모델 왼쪽 끝이 화면 50% 에 고정된다.
 *        ⚠⚠ 2026-09-07 — 이 여백을 **전부 세로 스트레치로 채우면 안 된다**(care_bg.jpg 가 그랬다).
 *          늘린 픽셀이 화면에 그대로 노출돼 **드레스와 팔이 아래로 죽 늘어나 보인다**. 게다가 노출량이
 *          cover 배율에 따라 달라져(1920px 화면 25.8% / 1280px 38%) "브라우저 크기에 따라 늘어난다"는
 *          지적이 나왔다. → 현재 파생본 **care_bg_v3.jpg** 는 이음매용 150px 만 늘리고
 *          사진 안쪽 460px 지점부터 사진 마지막 줄까지 배경색(#15191A)으로 완전히 페이드아웃한다.
 *          ⚠⚠ 2026-09-09 — 종전(340px 페이드 + 완료 지점을 사진 밖 30px 뒤에 둠)은 사진 마지막 줄이
 *            아직 14% 남은 채(밝기 41.5) 순수 배경색(24.0)과 만나 **가로 한 줄로 뚝 잘린 선**이 보였다.
 *            지금은 페이드가 사진 마지막 줄에서 정확히 배경색에 닿아 행간 밝기차 1.07 까지 내려갔다.
 *          나머지 약 500px 은 순수 배경색이라 어느 배율에서도 늘어난 픽셀이 보이지 않는다.
 *          (만드는 스크립트: docs/care_bg_fade.py — 사진부는 care_bg.jpg 것을 그대로 쓰고
 *           그 아래만 다시 그린다. 페이드 목표색은 반드시 .jdh_care 의 background-color 와 같게.)
 *     ⚠ 늘릴 행·열은 반드시 가장자리에서 몇 px 안쪽에서 뽑을 것 — 축소 보간 때문에 맨 가장자리
 *       행/열이 밝게 나와 그대로 쓰면 이음새가 밝은 선으로 보인다.
 *   직전 파생본은 care_bg_old20260821.jpg / care_bg_old20260811.jpg 로 남겨 두었다(원복용).
 *   ⚠ 파일명을 그대로 두고 내용만 갈았으므로 url 의 ?v= 를 함께 올려야 캐시가 갱신된다.
 * ⚠ 위 숏츠 섹션과 이어 붙던 크림 반원(::before)은 어두운 배경과 맞지 않아 제거했다. */
.jdh_care {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 780px;
	padding: 120px 20px;
	/* Y 축이 `top` 인 이유: 이 컷은 인물의 얼굴이 위쪽에 있다. center 로 두면 화면 세로가
	   가운데를 잘라 얼굴이 잘려 나간다 → 위쪽을 보여줘야 얼굴이 온전히 들어온다(2026-08-11 요청). */
	background: #15191A url('/img/main/care/care_bg_v3.jpg?v=20260909a') right top / cover no-repeat;
	overflow: hidden;
}
.jdh_care * { box-sizing: border-box; }
/* 스크림 — 좌측(글 자리)은 짙게, 우측(인물)은 옅게. 전체를 한 겹 더 눌러 "살짝 어둡게". */
.jdh_care::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(14,20,18,.82) 0%, rgba(14,20,18,.66) 36%, rgba(14,20,18,.28) 64%, rgba(14,20,18,.12) 100%),
		linear-gradient(180deg, rgba(14,20,18,.26) 0%, rgba(14,20,18,.06) 40%, rgba(14,20,18,.30) 100%);
	pointer-events: none;
}
/* 그레인(노이즈) — 2200px 로 줄인 JPG 라 넓은 화면에서 배경이 매끈해 보인다.
   필름 그레인을 얇게 얹어 압축 티를 덮고 질감을 준다(2026-08-11 요청).
   ⚠ 이미지 파일이 아니라 인라인 SVG(feTurbulence) 다 — 추가 요청 0건, 200px 타일 반복이라 용량도 없다.
   ⚠ data URI 안의 `#` 은 반드시 `%23` 로 써야 한다(CSS 파서가 조각으로 끊는다).
   ⚠ z-index 0 → 본문(.jdh_care__inner, z-index 1) 아래에만 깔린다. 글자에는 노이즈가 얹히지 않는다.
   ⚠ feComponentTransfer(slope 2, intercept -0.5) = 평균 회색은 그대로 두고 대비만 2배.
     이 단계가 없으면 fractalNoise 대비가 너무 낮아, 어두운 배경 + overlay 조합에서
     그레인이 눌려 4배 확대해도 보이지 않는다(2026-08-11 실측: 밝기 편차 σ 1.5 → 배경과 구분 불가).
   ⚠ 강도는 실측으로 잡았다 — 이 값이 σ≈4.3 으로 "질감은 느껴지되 모델 피부는 매끈한" 선이다.
     slope 3 / opacity .75 (σ≈7.8) 는 인물 피부까지 거칠어 보여 과하다. 올리지 말 것. */
.jdh_care::after {
	content: '';
	position: absolute; inset: 0; z-index: 0;
	pointer-events: none;
	opacity: .6;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2' intercept='-0.5'/%3E%3CfeFuncG type='linear' slope='2' intercept='-0.5'/%3E%3CfeFuncB type='linear' slope='2' intercept='-0.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 200px 200px;
}
.jdh_care__inner { position: relative; z-index: 1; width: 100%; max-width: 1240px; margin: 0 auto; }
.jdh_care__col { max-width: 620px; }   /* 우측은 비워 배경 인물이 보이게 둔다 */

/* 헤더 — 좌측 정렬 */
.jdh_care__head { margin: 0 0 44px; }
.jdh_care__eyebrow {
	display: block; margin: 0 0 16px;
	font-family: 'Cormorant Garamond', serif; font-weight: 700;
	font-size: 19px; letter-spacing: 4.8px; text-transform: uppercase; color: #D9C08A;
}
.jdh_care__title {
	margin: 0 0 18px;
	font-family: 'Pretendard', sans-serif; font-weight: 800;
	font-size: 40px; line-height: 1.35; letter-spacing: -0.4px; color: #FFFDF8;   /* 히어로 타이틀 상한 */
	text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
/* ⚠ 2026-08-11 사용자 지시 — **타이틀(40px)만 두고 나머지 텍스트를 크게** 올렸다("가독성 좋게 꽤 많이").
   리드 17.5→21 / 포인트 제목 21→24.5 / 설명 16.5→19 / 노트 16→18.5 / 번호 26→31.
   옛 값으로 되돌리지 말 것. 최대 폰트는 여전히 타이틀이라 [[font-size-cap-hero-title]] 도 지켜진다. */
.jdh_care__lead {
	margin: 0; max-width: 600px;
	font-family: 'Pretendard', sans-serif; font-weight: 400;
	font-size: 21px; line-height: 1.72; color: rgba(255,253,248,.8); word-break: keep-all;
}

/* 진입 애니메이션 (.jdh-reveal) */
.jdh_care .jdh-reveal,
.jdh_flow .jdh-reveal {
	opacity: 0; transform: translateY(24px);
	transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
}
.jdh_care .jdh-reveal.is-in,
.jdh_flow .jdh-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.jdh_care .jdh-reveal,
	.jdh_flow .jdh-reveal { opacity: 1; transform: none; transition: none; }
}

/* 협진 포인트 3 — 어두운 배경 위 텍스트라 구분선·본문 모두 흰색 계열 알파로 낸다.
   (밝은 배경 시절의 #ECE7DD·#5B615A 같은 값으로 되돌리면 배경에 묻혀 안 보인다) */
.jdh_care__plist { margin: 0; padding: 0; list-style: none; }
.jdh_care__point {
	display: flex; gap: 22px; align-items: flex-start;
	padding: 24px 0;
}
.jdh_care__point + .jdh_care__point { border-top: 1px solid rgba(255,253,248,.16); }
.jdh_care__point:first-child { padding-top: 0; }

/* ── 트라이앵글 배열 (2026-08-14, 사용자 지시) ─────────────────────────
 * 01 위 가운데 / 02·03 아래 좌우. 원 안에 번호·제목·설명이 모두 들어간다.
 * ⚠ 지름 280 + 간격 24 = 584px 로, 좌측 컬럼(620px) 안에 딱 들어가는 값이다.
 *   더 키우면 배경 인물 위로 원이 올라탄다.
 * ⚠ 설명 문구가 길어지면 원 안에서 넘친다 — 45자 안팎이 상한이다(현재 01 이 45자). */
.jdh_care__plist--tri {
	--tri-d: 280px;
	--tri-gap: 24px;
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, var(--tri-d));
	justify-content: center;
	gap: 40px var(--tri-gap);
	width: calc(var(--tri-d) * 2 + var(--tri-gap));
	/* ⚠ 가운데(auto) 정렬하지 말 것 — 헤더 카피가 좌측 정렬이라 축이 어긋나 보이고,
	   오른쪽 원이 배경 인물 위로 올라탄다. 왼쪽 축에 맞춘다. */
	margin: 6px 0 0;
}
/* ⚠ 세 원의 중심을 잇던 점선 삼각형은 2026-08-14 사용자 지시로 **제거**했다. 되살리지 말 것.
   (원 세 개의 배치만으로 삼각 구도가 읽히고, 점선이 배경 사진 위에서 지저분했다.) */
.jdh_care__plist--tri .jdh_care__point {
	position: relative; z-index: 1;
	width: var(--tri-d); height: var(--tri-d);
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 0; padding: 0 34px; border: 0;
	border-radius: 50%;
	text-align: center;
	/* ⚠ 배경(인물 사진) 위에 얹히는 원이라 **불투명도가 충분해야** 글자가 읽힌다.
	   유리처럼 맑게(알파 .05~.16) 두면 밝은 인물 쪽 원 두 개에서 글자가 배경에 묻힌다. */
	background:
		radial-gradient(circle at 50% 24%, rgba(32,44,38,.72) 0%, rgba(16,23,20,.80) 68%, rgba(10,15,13,.86) 100%);
	box-shadow: inset 0 0 0 1px rgba(217,192,138,.55), 0 20px 46px rgba(0,0,0,.34);
	-webkit-backdrop-filter: blur(7px);
	        backdrop-filter: blur(7px);
	transition: box-shadow .3s ease, transform .3s ease;
}
.jdh_care__plist--tri .jdh_care__point:hover {
	transform: translateY(-4px);
	box-shadow: inset 0 0 0 1px rgba(217,192,138,.85), 0 26px 54px rgba(0,0,0,.36);
}
/* 첫 항목만 위 가운데 — 나머지 둘이 아래 두 칸을 채워 삼각이 된다 */
.jdh_care__plist--tri .jdh_care__point:first-child { grid-column: 1 / -1; justify-self: center; }
.jdh_care__plist--tri .jdh_care__point-num {
	min-width: 0; margin-bottom: 6px;
	font-size: 30px; line-height: 1;
}
.jdh_care__plist--tri .jdh_care__point-txt { width: 100%; }
.jdh_care__plist--tri .jdh_care__point-tit { font-size: 20px !important; line-height: 1.4; }
.jdh_care__plist--tri .jdh_care__point-desc { margin-top: 9px; font-size: 14.5px; line-height: 1.62; }
/* 좁은 화면(≤640px) — 2026-09-01 사용자 지시로 **원형을 유지**한다("PC 일 때처럼 원모양으로").
   직전에는 원을 풀어 [번호 | 텍스트] 목록으로 되돌렸는데, 배경 인물 사진 위에 글자가 그대로
   얹혀 밝은 부분(얼굴·어깨)에서 대비가 떨어졌다 — 원의 어두운 면이 곧 가독성 장치였다.
   ⚠ 원을 유지하는 방법은 **1열로 쌓고 지름을 화면 폭까지 키우는 것**이다.
     PC 처럼 2열 삼각으로 두면 지름이 170px 남짓이 되어 설명이 원 밖으로 넘친다
     (예전에 원을 푼 이유가 그것이다 — 2열로 되돌리지 말 것).
   ⚠ 지름 min(86vw, 340px) 이면 좌우 패딩 30px 을 빼도 내부 폭이 PC(212px)보다 넓어
     45자 안팎의 설명이 들어간다. 설명을 더 늘리려면 여기 지름부터 확인할 것. */
/* ⚠ 2026-09-04 사용자 지시로 **삼각 배치로 다시 바꿨다** — "한눈에 보이게 PC 버전처럼".
   위 2026-09-01 주석의 "2열로 되돌리지 말 것" 은 이 지시로 대체됐다(1열로 쌓으면 세 개를 한 화면에
   볼 수 없다는 것이 이번 지적). 대신 그때 우려한 "설명이 원 밖으로 넘친다" 를 아래 두 가지로 막는다.
     ① 지름을 화면 폭이 허용하는 최대(45.5vw·상한 182px)로 잡고 좌우 안여백을 34 → 14px 로 줄인다
     ② 번호·제목·설명 글자를 원 크기에 맞춰 함께 줄인다(설명 11.5px)
   ⚠ 설명 문구를 늘리면 바로 원 밖으로 넘친다 — 현재 45자가 상한이다. 문구를 고치면 여기부터 확인할 것. */
@media all and (max-width: 640px) {
	.jdh_care__plist--tri {
		--tri-d: min(45.5vw, 182px);
		--tri-gap: 8px;
		grid-template-columns: repeat(2, var(--tri-d));
		justify-content: center;
		justify-items: center;
		width: auto;
		gap: 10px var(--tri-gap);
		margin: 4px 0 0;
	}
	/* 첫 항목만 위 가운데 — 나머지 둘이 아래 두 칸을 채워 삼각이 된다(PC 와 같은 규칙) */
	.jdh_care__plist--tri .jdh_care__point:first-child { grid-column: 1 / -1; justify-self: center; }
	/* ⚠ 안여백은 **원의 중앙 폭** 기준으로 잡아야 한다. 지름 177px 원에서 텍스트 블록이 상하 ±55px 를
	   차지하면 그 높이의 원 폭은 약 140px 뿐이다 — 좌우 18px 을 비워 텍스트 폭을 141px 로 맞췄다.
	   14px 로 두면 글줄 양 끝이 원 밖(배경 사진 위)으로 삐져나온다. */
	.jdh_care__plist--tri .jdh_care__point { padding: 0 18px; }
	.jdh_care__plist--tri .jdh_care__point-num { font-size: 18px; margin-bottom: 2px; }
	.jdh_care__plist--tri .jdh_care__point-tit { font-size: 13px !important; line-height: 1.28; }
	.jdh_care__plist--tri .jdh_care__point-desc { margin-top: 4px; font-size: 10.5px; line-height: 1.4; letter-spacing: -.3px; }
}
/* 2026-08-13 — 번호 31 → 46px(사용자 지시 "넘버링 더 크게").
   ⚠ Cormorant 의 올드스타일 숫자는 캡 높이가 낮아 제목과 윗선을 맞추려면 padding-top 이 필요 없다
     (3px 을 남기면 번호만 아래로 처져 보인다). 폭은 min-width 로 고정해 01/02/03 의 제목 시작선을 맞춘다. */
.jdh_care__point-num {
	flex: 0 0 auto; min-width: 62px; padding-top: 0;
	font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 46px; line-height: 1.05;
	color: #D9C08A;
}
.jdh_care__point-txt { min-width: 0; }
/* ⚠ `!important` 가 필요하다: 공통 content.css 에 `h3 { color:#222 !important }` 가 있어
   클래스 선택자로는 못 이긴다. 어두운 배경에서는 제목이 통째로 사라진다(2026-08-11 실제 발생).
   밝은 배경 시절에는 지정색(#1C1E1A)과 #222 의 차이가 미미해 드러나지 않았을 뿐이다. */
.jdh_care .jdh_care__point-tit {
	margin: 0;
	font-family: 'Pretendard', sans-serif; font-weight: 700;
	font-size: 24.5px; line-height: 1.45; letter-spacing: -0.3px;
	color: #FFFDF8 !important;
}
/* 강조어(초록)는 한 덩어리로 유지한다 — 두 줄로 접힐 때 여기서 잘리면 안 된다.
   일본어에서 「二つの診療を ひ / とつの空間 で」처럼 강조어 한 글자만 앞줄 끝에 붙었다
   (CJK 는 아무 글자에서나 줄을 나눌 수 있어서 생긴다. 2026-09-04 사용자 지적).
   nowrap 이면 강조어가 통째로 다음 줄로 내려간다. 한국어는 이미 한 줄이라 영향이 없다. */
.jdh_care__point-tit em { font-style: normal; color: #A8C7AE; white-space: nowrap; }
.jdh_care__point-desc {
	margin: 11px 0 0;
	font-family: 'Pretendard', sans-serif; font-weight: 400;
	font-size: 19px; line-height: 1.75; color: rgba(255,253,248,.76); word-break: keep-all;
}

/* 진료 연결 안내 콜아웃 — 골드 좌측 액센트 + 유리 느낌 반투명
   2026-08-13 — 앞의 방패 아이콘(.jdh_care__note-ic) 제거(사용자 지시). 되살리지 말 것. */
.jdh_care__note {
	margin-top: 30px;
	padding: 20px 24px; border-radius: 0 8px 8px 0;
	background: rgba(255,253,248,.08); border-left: 3px solid #C2A878;
	backdrop-filter: blur(6px);
}
.jdh_care__note-txt {
	margin: 0;
	font-family: 'Pretendard', sans-serif; font-weight: 500;
	font-size: 18.5px; line-height: 1.75; color: rgba(255,253,248,.86); word-break: keep-all;
}
.jdh_care__note-txt b { font-weight: 700; color: #FFFDF8; }
/* 2026-08-27 사용자 지시 — 콜아웃 문장을 **한 줄**로 붙인다(두 줄로 접히던 것).
   ⚠ 문장이 좌측 컬럼(.jdh_care__col 620px)보다 길어 nowrap 만으로는 글자가 박스 밖으로 삐져나온다
     → width:max-content 로 박스를 문장 길이에 맞춰 늘려야 배경·좌측 골드선이 문장을 감싼다.
   ⚠ 1024 이하는 화면이 좁아 한 줄이 들어가지 않는다 → 데스크톱에서만 적용하고 그 아래는 접히게 둔다.
     (문구가 길어지면 여기도 다시 볼 것 — 넓은 화면에서도 우측 배경 인물 쪽으로 박스가 더 뻗는다) */
@media all and (min-width: 1025px) {
	.jdh_care__note { width: max-content; }
	.jdh_care__note-txt { white-space: nowrap; }
}

/* ===== 진료 4단계 (Care Process) — main_care 에서 분리한 두 번째 섹션 ===== */
.jdh_flow {
	position: relative;
	background: #FCFBF7;
	padding: 118px 20px 124px;   /* 카드를 걷어낸 만큼 여백으로 시원함을 낸다 */
}
.jdh_flow * { box-sizing: border-box; }
.jdh_flow__inner { max-width: 1240px; margin: 0 auto; }

.jdh_flow__head { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.jdh_flow__eyebrow {
	display: block; margin: 0 0 14px;
	font-family: 'Cormorant Garamond', serif; font-weight: 700;
	font-size: 17px; letter-spacing: 4.6px; text-transform: uppercase; color: #B0966A;
}
.jdh_flow__title {
	margin: 0 0 16px;
	font-family: 'Pretendard', sans-serif; font-weight: 800;
	font-size: 34px; line-height: 1.35; letter-spacing: -0.4px; color: #1C1E1A;
}
/* max-width 600 → 720: 600px 에서는 '…오래 / 유지시킵니다' 로 마지막 어절만 넘어갔다 */
.jdh_flow__lead {
	margin: 0 auto; max-width: 720px;
	font-family: 'Pretendard', sans-serif; font-weight: 400;
	font-size: 17px; line-height: 1.7; color: #62675E; word-break: keep-all;
}

/* 4단계 — 2026-08-11 카드(흰 박스+테두리)를 걷어내고 열린 타임라인으로 바꿨다(사용자 지시:
 * "카드 형식 말고 세련되고 시원하게"). 조형은 세 가지뿐이다.
 *   ① 네 단계를 관통하는 가로 진행선 + 단계마다 도트
 *   ② 열을 가르는 얇은 세로선(박스가 아니라 선으로만 나눈다)
 *   ③ 큰 세리프 번호
 * ⚠ 배경·테두리·그림자·radius 를 다시 넣지 말 것 — 그 순간 카드로 되돌아간다. */
.jdh_flow__list {
	position: relative;
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
	margin: 0; padding: 0; list-style: none;
}
/* ① 진행선 — 도트의 중심(top:6px)을 지난다 */
.jdh_flow__list::before {
	content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 1px;
	background: linear-gradient(90deg, rgba(200,180,137,0) 0%, rgba(200,180,137,.85) 9%, rgba(200,180,137,.85) 91%, rgba(200,180,137,0) 100%);
}
/* 2026-08-11 — 가운데 정렬(사용자 지시). 위 인프라 4특징과 같은 축으로 맞춘다.
   ⚠ align-items:center 가 함께 있어야 한다 — flex 컬럼이라 text-align 만으로는
     키워드 칩 묶음(.jdh_flow__keys)이 왼쪽에 붙은 채로 남는다. */
.jdh_flow__item {
	position: relative;
	display: flex; flex-direction: column; align-items: center;
	padding: 40px 30px 0;
	text-align: center;
}
/* 양 끝 칸은 안쪽 여백을 지워 글의 좌우 끝을 섹션 헤더와 같은 축에 맞춘다 */
.jdh_flow__item:first-child { padding-left: 0; }
.jdh_flow__item:last-child  { padding-right: 0; }
/* ② 열 구분선 — 첫 칸 왼쪽에는 긋지 않는다 */
.jdh_flow__item + .jdh_flow__item::before {
	content: ''; position: absolute; left: 0; top: 40px; bottom: 6px; width: 1px;
	background: linear-gradient(180deg, rgba(28,30,26,.10) 0%, rgba(28,30,26,.04) 72%, rgba(28,30,26,0) 100%);
}
/* 진행선 위의 단계 도트 — 2026-08-11 가운데 정렬에 맞춰 칸의 중앙으로 옮겼다.
   ⚠ 좌측 고정값(left:34px)과 첫 칸 예외(left:0)로 되돌리지 말 것 — 글이 가운데인데
     도트만 왼쪽에 있으면 진행선 위 마커가 어느 단계 것인지 읽히지 않는다. */
.jdh_flow__item::after {
	content: ''; position: absolute; left: 50%; transform: translateX(-50%); top: 0; z-index: 1;
	width: 13px; height: 13px; border-radius: 50%;
	background: #FCFBF7; border: 1px solid #C8B489;
	box-shadow: inset 0 0 0 2.5px #FCFBF7, inset 0 0 0 5px #C2A878;
	transition: box-shadow .35s ease, border-color .35s ease;
}
.jdh_flow__item:hover::after { border-color: #3B5843; box-shadow: inset 0 0 0 2.5px #FCFBF7, inset 0 0 0 5px #3B5843; }
/* ③ 2026-08-07 가독성 개선(사용자 지시) — 골드 계열의 명도를 낮추고 본문은 한 톤 진하게.
 *    옅은 값으로 되돌리지 말 것.
 * 2026-08-11 — 단계 번호(.jdh_flow__num, 54px 세리프)를 사용자 지시로 걷어냈다.
 *    영문 라벨이 칸의 첫 줄이 되므로 위 여백(margin-top 14px)도 함께 지웠다 —
 *    남겨 두면 칸 위쪽만 14px 더 내려가 4칸의 첫 줄이 어긋난다.
 * 2026-08-31 — 그 영문 라벨(.jdh_flow__eng)마저 사용자 지시로 제거했다(마크업·CSS 모두).
 *    → 단계명(.jdh_flow__name)이 칸의 첫 줄이 되므로 그 위 여백(8px)도 0 으로 내렸다.
 *    ⚠ 되살리지 말 것. 골드 세리프 소제목이 필요하면 섹션 헤더의 .jdh_flow__eyebrow 를 쓴다. */
/* 번호가 빠진 자리의 시각 앵커 → 22px 에서 키웠다(2026-08-11 사용자 지시).
   ⚠ `.jdh_flow` 를 앞에 붙이고 `!important` 를 쓰는 이유: 공통 content.css 에
     `h3 { font-size:17px !important }` 가 있어 클래스 선택자로는 못 이긴다.
     그래서 이 값은 **여태 한 번도 적용된 적이 없었다**(22px 로 적어 뒀지만 화면은 17px).
     .jdh_care__point-tit 이 같은 이유로 이미 같은 처리를 하고 있다 — 함께 유지할 것. */
.jdh_flow .jdh_flow__name {
	margin: 0;
	font-family: 'Pretendard', sans-serif; font-weight: 700;
	font-size: 28px !important; line-height: 1.38; letter-spacing: -0.5px;
	color: #16180F !important;
}
.jdh_flow__desc {
	margin: 16px 0 22px;
	font-family: 'Pretendard', sans-serif; font-weight: 400;
	font-size: 16px; line-height: 1.75; color: #464C45; word-break: keep-all;
}
/* 키워드 — 박스 없이 얇은 대시 목록으로 */
/* 키워드 — 2026-08-11 사용자 지시로 스타일 교체.
   이전: 골드 대시(–) + 세로 3줄 나열. 세 줄이 세로로 늘어서 칸마다 아래가 길어졌다.
   현재: **알약 칩**을 가로로 흘린다(wrap). 폭이 남으면 두 개가 한 줄에 붙어 칸 높이가 짧아지고,
        본문(줄글)과 키워드(조각)의 성격 차이가 형태로 드러난다.
   ⚠ margin-top:auto(=칸 바닥에 붙임)는 유지 — 4칸의 키워드 줄 시작선을 맞추는 장치다. */
.jdh_flow__keys {
	margin: auto 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;   /* 칸이 가운데 정렬이므로 칩 묶음도 가운데(2026-08-11) */
	gap: 8px;
}
.jdh_flow__keys li {
	padding: 7px 14px;
	border: 1px solid rgba(59,88,67,.16);
	border-radius: 999px;
	background: rgba(59,88,67,.045);
	font-family: 'Pretendard', sans-serif;
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1.35;
	letter-spacing: -0.3px;
	color: #31503A;
	white-space: nowrap;   /* 칩 안에서 줄바꿈되면 알약 모양이 무너진다 */
	transition: background .3s ease, border-color .3s ease;
}
.jdh_flow__item:hover .jdh_flow__keys li {
	background: rgba(194,168,120,.16);
	border-color: rgba(183,158,107,.42);
}

/* 반응형 */
@media all and (max-width: 1024px) {
	.jdh_care { min-height: 700px; padding: 96px 20px; }
	.jdh_care__col { max-width: 540px; }
	/* 2열에서는 가로 진행선이 첫 행에만 맞으므로 걷어내고, 오른쪽 칸의 세로선만 남긴다 */
	.jdh_flow__list { grid-template-columns: repeat(2, 1fr); gap: 46px 0; }
	.jdh_flow__list::before { display: none; }
	.jdh_flow__item { padding: 30px 28px 0; }
	/* 도트는 칸 가운데 고정(2026-08-11 가운데 정렬) — 여기서 left 를 다시 잡지 않는다.
	   2열에서는 **왼쪽 칸이 1·3번째**라 좌우 패딩만 정리한다. */
	.jdh_flow__item:nth-child(2n+1) { padding-left: 0; }
	.jdh_flow__item:nth-child(2n) { padding-right: 0; }
	.jdh_flow__item + .jdh_flow__item::before { display: none; }
	.jdh_flow__item:nth-child(2n)::before { display: block; top: 30px; }
}
/* 좁아지면 인물이 글 쪽으로 밀려 온다 → 배경을 더 오른쪽으로 당기고 스크림을 세운다 */
/* ⚠ 2026-09-04 — 이 배경 전환 지점을 900 → **1200px** 로 올렸다(사용자 지적: "브라우저를 줄이면
     뒷배경 모델이 늘어진다"). 늘어난 게 아니라 **cover 의 세로 맞춤 확대**가 원인이다:
     화면이 좁아지면 글이 세로로 쌓여 섹션이 세로로 길어지는데(1200px 폭에서 이미 1185x1229,
     비율 0.96), 거기에 가로형 데스크톱 컷(2200x1700 · 비율 1.29)을 cover 로 깔면
     세로를 채우느라 가로가 크게 확대돼 인물만 화면을 뒤덮는다.
     실측한 가로 확대율 — 1440px 1.12배 / 1200px 1.34 / 1024px 1.56 / 901px **1.77배**.
     900px 에서 세로 컷으로 갈아타며 1.00배로 뚝 떨어지는 계단이 있었다. 그 구간을 없앤다.
     세로 컷(3:4)은 같은 폭에서 가로 맞춤이 되어 확대가 1.00배다.
   ⚠ 컬럼 폭(.jdh_care__col)과 min-height 는 **900px 이하에서만** 푼다 — 901~1200 은
     [좌측 글 / 우측 인물] 2단 구도를 그대로 두는 구간이라 함께 올리면 레이아웃이 바뀐다.
     그래서 배경·스크림만 이 블록에서 먼저 바꾼다. */
@media all and (max-width: 1200px) {
	/* 2026-08-21 — 새 컷(얼굴이 큰 가로형)을 세로로 긴 모바일 섹션에 cover 로 깔면
	   세로 맞춤 확대가 심해 얼굴 일부만 잘려 보인다(폭의 51%만 표시).
	   → 인물 영역만 3:4 로 다시 자른 **모바일 전용 파생본**을 쓴다.
	     care_bg_m.jpg = 원본 /img/jd_main_bg_02.png 의 우측 인물 영역(x2050~3450) → 1200x1600.
	   ⚠ 원본 컷이 갈리면 데스크톱 care_bg.jpg 와 **이 파일을 함께** 다시 만들 것.
	   ⚠ position-x 는 얼굴 중심이 표시 창 가운데 오도록 계산한 값이다(창이 이미지 폭의 51%).
	     p = (얼굴중심비율 − 0.255) / 0.49.
	     2026-08-28 컷은 얼굴 중심이 **32.5%** 라 14%. (08-24 컷 42%→34% / 그 전 55%→60%)
	     얼굴 중심은 파생본에서 머리카락(어두운 픽셀)의 x 분포 평균으로 재면 대체로 맞는다.
	     컷이 갈리면 이 값도 반드시 다시 계산할 것 — 안 고치면 얼굴이 창 밖으로 밀린다. */
	/* ⚠ 2026-09-04 2차 — 세로 컷으로 갈아탄 뒤에도 "여전히 모델이 크다"는 지적.
	     세로 컷은 인물이 프레임을 꽉 채운 3:4 컷이라, cover 로 깔면 확대가 없어도(1.00배)
	     **인물이 화면 폭을 통째로 차지**한다. 데스크톱에서 인물이 차지하는 폭은 화면의 40% 뿐이라
	     좁은 화면에서만 인물이 두 배 이상 크게 보였던 것이다.
	     → cover 를 버리고 **폭을 지정해 작게** 깐다(화면의 78%, 넓어지면 640px 로 상한).
	       1100px 에서 이미지 폭 640px = 화면의 59%, 390px 에서 304px = 78%.
	   ⚠ 그러려면 사진 가장자리가 배경에 녹아 있어야 한다 — 원본 care_bg_m.jpg 는 가장자리까지
	     밝은 컷이라(가장자리 밝기 150~200) 작게 놓으면 사각 경계가 그대로 드러난다.
	     그래서 좌·상·하를 섹션 배경색(#15191A)으로 페이드아웃한 파생본 care_bg_m_soft.jpg 를 쓴다.
	     (우측은 화면 끝에 붙이므로 페이드하지 않았다. 만드는 법은 아래 값 그대로 —
	      좌 0~34% 0→1 · 하 60~100% 1→0 · 상 0~7% 0.72→1, smoothstep 보간)
	   ⚠ **배경색과 페이드 색이 같아야 이음매가 없다.** 위 .jdh_care 의 background-color 를
	     바꾸면 이 파생본도 그 색으로 다시 만들 것.
	   ⚠ 이제 사진이 화면을 다 덮지 않으므로 background-position-x 로 얼굴을 맞출 필요가 없다
	     (right 정렬이면 인물이 통째로 보인다). 옛 `14%` 계산식은 cover 시절의 것이라 뺐다. */
	.jdh_care {
		background-image: url('/img/main/care/care_bg_m_soft.jpg?v=20260904');
		background-size: min(78%, 640px) auto;
		background-position: right top;
	}
	.jdh_care::before {
		background:
			linear-gradient(90deg, rgba(14,20,18,.92) 0%, rgba(14,20,18,.82) 50%, rgba(14,20,18,.62) 100%),
			linear-gradient(180deg, rgba(14,20,18,.30) 0%, rgba(14,20,18,.14) 40%, rgba(14,20,18,.42) 100%);
	}
}
@media all and (max-width: 900px) {
	.jdh_care { min-height: 0; }
	.jdh_care__col { max-width: none; }
}
@media all and (max-width: 768px) {
	.jdh_care { padding: 62px 16px 66px; }
	/* 데스크톱에서 본문을 키운 만큼 모바일 값도 함께 올렸다(2026-08-11) — 타이틀만 그대로 */
	.jdh_care__eyebrow { font-size: 15px; letter-spacing: 3.6px; }
	.jdh_care__title { font-size: 30px; }
	.jdh_care__lead { font-size: 18px; }
	.jdh_care__head { margin-bottom: 32px; }
	.jdh_care__point { gap: 16px; padding: 22px 0; }
	.jdh_care__point-num { font-size: 36px; min-width: 48px; }
	.jdh_care .jdh_care__point-tit { font-size: 21px; }
	.jdh_care__point-desc { font-size: 17px; }
	.jdh_care__note { padding: 18px 20px; }
	.jdh_care__note-txt { font-size: 16.5px; }

	.jdh_flow { padding: 60px 16px 68px; }
	.jdh_flow__head { margin-bottom: 34px; }
	.jdh_flow__eyebrow { font-size: 14px; letter-spacing: 3.6px; }
	.jdh_flow__title { font-size: 26px; }
	.jdh_flow__lead { font-size: 15.5px; }
	/* 2026-08-12 — 4단계를 세로로 쌓으면 한 단계가 한 화면을 먹어 섹션이 지나치게 길었다.
	 * → **가로 스와이프 4장**. 도트·세로선·가로 구분선은 모두 걷고 카드 경계로만 나눈다.
	 * ⚠ 데스크톱의 "카드 금지(열린 타임라인)" 원칙은 여기에 적용하지 않는다 — 가로로 미는 순간
	 *   각 단계의 경계가 보이지 않으면 어디까지가 한 단계인지 읽히지 않는다. 데스크톱 규칙은 그대로 둘 것.
	 * ⚠ flex 기본 stretch 라 네 장의 높이가 같아지고, .jdh_flow__keys 의 margin-top:auto 가
	 *   칩 줄을 카드 바닥에 맞춰 준다 — 높이를 고정값으로 박지 말 것. */
	.jdh_flow__list {
		display: flex;
		grid-template-columns: none;
		gap: 12px;
		margin: 0 -16px;
		padding: 0 16px 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 16px;
		-webkit-overflow-scrolling: touch;
	}
	.jdh_flow__list::-webkit-scrollbar { height: 3px; }
	.jdh_flow__list::-webkit-scrollbar-track { background: rgba(28,30,26,.08); border-radius: 999px; }
	.jdh_flow__list::-webkit-scrollbar-thumb { background: rgba(194,168,120,.75); border-radius: 999px; }
	.jdh_flow__item {
		flex: 0 0 84%;
		scroll-snap-align: center;
		padding: 26px 20px 24px;
		border: 1px solid rgba(28,30,26,.10);
		border-radius: 8px;
		background: #fff;
	}
	.jdh_flow__item:first-child { padding-left: 20px; }
	.jdh_flow__item:last-child  { padding-right: 20px; }
	.jdh_flow__item::after { display: none; }
	.jdh_flow__item + .jdh_flow__item::before { display: none; }
	.jdh_flow__item:nth-child(2n)::before { display: none; }
	.jdh_flow .jdh_flow__name { font-size: 22px !important; }   /* content.css h3 !important 를 덮어야 한다 */
	.jdh_flow__desc { font-size: 15px; margin-bottom: 18px; }
}