@charset "utf-8";
/* =========================================================================
 * JDH 전후사진 그리드 (공통 컴포넌트)  — 2026-08-03
 * · 사용 페이지: /signature/juvegen · repot · slimcare · custom
 * · 짝이 되는 뷰어형 컴포넌트: /css/jdh_ba.css (전/후 전환 + 함께 보기)
 *
 * ── 왜 뷰어(jdh_ba)가 아니라 그리드인가 ────────────────────────────────
 * jdh_ba 는 증례 한 쌍을 크게 보여 주는 컴포넌트다. 시그니처 페이지는
 * 같은 시술의 증례가 6쌍씩 있어 한 쌍만 크게 두면 나머지가 묻힌다.
 * 여기서는 "사진만" 나열한다 — 섹션 제목·설명·장식 배경 없이 사진과
 * BEFORE/AFTER 배지, 그리고 개인차 고지 한 줄만 둔다(사용자 지시).
 *   ※ 고지 문구(.jdh_bagrid__note)는 의료광고 요건이라 빼지 말 것.
 *
 * 자산: /img/before_after/split/{시술}_{번호}_{before|after}.jpg (360x496 세로형)
 * ========================================================================= */

/* 2026-08-07: 배경을 흰색 → 옅은 크림으로 바꿨다(사용자 지시 "밑 섹션과 구분되어 보이게").
 * 시그니처 4종 모두 이 섹션 **뒤가 FAQ(#fff)** 라 흰 배경끼리 맞닿아 경계가 사라졌었다.
 * 앞 섹션(추천)이 #FBF7F0 로 끝나므로 그 색에서 받아 조금 더 눌러 준다.
 * ⚠ 아래 헤어라인까지 빼면 다시 뒤 섹션과 붙어 보인다. 함께 유지할 것. */
.jdh_bagrid {
	position: relative;
	padding: 88px 0 92px;
	background: linear-gradient(180deg, #FBF7F0 0%, #F5EEE2 100%);
}
.jdh_bagrid::after {
	content: '';
	position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
	background: linear-gradient(90deg, rgba(166,139,91,0) 0%, rgba(166,139,91,.34) 50%, rgba(166,139,91,0) 100%);
}
.jdh_bagrid__inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 40px;
}
/* 3열 — grid(repeat(3,1fr)) 가 아니라 flex 로 짠다.
 * grid 는 증례 수가 3의 배수가 아닐 때(slimcare 는 2쌍) 남는 칸이 오른쪽에 비어
 * 사진 뭉치가 왼쪽으로 쏠려 보인다. flex + justify-content:center 면 열 폭은 같고
 * 마지막 줄만 가운데로 모인다. 6쌍(repot) 처럼 딱 떨어지면 결과는 grid 와 동일. */
.jdh_bagrid__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 26px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* 열 폭 = (100% - gap 24px x 2) / 3 */
.jdh_bagrid__item {
	flex: 0 1 calc((100% - 48px) / 3);
	max-width: calc((100% - 48px) / 3);
	margin: 0;
}
/* 증례가 딱 2쌍이면 3열 폭을 쓸 이유가 없다 — 가운데 두 칸만 채워 사진이 작아 보인다.
 * 이때만 2열로 벌리고 리스트 폭을 1120px 로 묶는다(사용자 지시 "사진 카드 좀 더 크게", 2026-08-10).
 * 2026-08-10 기준 해당 페이지는 슬림케어뿐이다(쥬브젠·리팟은 6쌍).
 * ⚠ **반드시 min-width 미디어쿼리 안에 둘 것.** `:has()` 가 붙으면 특이도가 (0,3,0) 이라
 *   아래 반응형의 `.jdh_bagrid__item`(0,1,0) 규칙을 덮어 버린다 → 모바일에서 1열로 안 내려간다.
 *   1240px 이하는 기존 2열/1열 규칙에 그대로 맡긴다.
 * ⚠ :has() 미지원 브라우저는 위 3열 규칙이 그대로 적용된다 — 깨지지 않는다. */
@media all and (min-width: 1241px) {
	.jdh_bagrid__list:has(> .jdh_bagrid__item:nth-child(2):last-child) {
		max-width: 1120px;
		margin-left: auto;
		margin-right: auto;
	}
	.jdh_bagrid__list:has(> .jdh_bagrid__item:nth-child(2):last-child) .jdh_bagrid__item {
		flex-basis: calc((100% - 24px) / 2);
		max-width: calc((100% - 24px) / 2);
	}
}

/* 한 증례 = 전/후 두 장을 항상 나란히. 순서(왼쪽 전 → 오른쪽 후)가 곧 설명이다. */
.jdh_bagrid__pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	margin: 0;
}
.jdh_bagrid__shot {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 4;         /* 원본 360x496 에 맞춘 세로 비율 */
	background: #ECE7DE;
}
/* 바깥 두 모서리만 둥글게 — 붙어 있는 안쪽은 각지게 둬야 한 쌍으로 읽힌다 */
.jdh_bagrid__shot:first-child  { border-radius: 8px 0 0 8px; }
.jdh_bagrid__shot:last-child   { border-radius: 0 8px 8px 0; }
.jdh_bagrid__shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.jdh_bagrid__shot i {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 5px 11px;
	border-radius: 999px;
	font-style: normal;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.4px;
	line-height: 1;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.jdh_bagrid__shot:first-child i { background: rgba(20,26,20,.62);   color: #fff; }
.jdh_bagrid__shot:last-child  i { background: rgba(255,253,248,.92); color: #1C1E1A; }

/* 개인차 고지 — ⚠ 의료광고 요건. 임의로 빼지 말 것 */
.jdh_bagrid__note {
	margin: 22px 0 0;
	text-align: center;
	font-size: 13px;
	line-height: 1.6;
	color: rgba(28,30,26,.44);
	word-break: keep-all;
}

/* ── 변형: 타이틀 + 프레임 (`.jdh_bagrid--framed`) — 2026-08-07 ─────────
 * "사진만 있어 밋밋하다"(사용자 지시)에 따라 추가했다. 위 주석의 '제목 없이 사진만' 은
 * 이 변형을 쓰지 않는 페이지에만 해당한다.
 *   · 타이틀 블록(.jdh_bagrid__head)은 자리만 잡고, 글자 스펙은 페이지 CSS 가 맡는다
 *     (슬림케어는 .slm_eyebrow / .slm_title / .slm_lead 를 그대로 얹었다).
 *   · 프레임은 사진 쌍을 흰 카드에 앉히고 아래를 시술명 캡션으로 받는 구조다.
 * ⚠ 변형 클래스가 없으면 아무 것도 바뀌지 않는다 — 나머지 3종은 지금 모습 그대로다. */
.jdh_bagrid__head { margin: 0 0 48px; text-align: center; }
.jdh_bagrid--framed .jdh_bagrid__pair {
	padding: 12px;
	background: #fff;
	border: 1px solid #EBE4D8;
	border-radius: 10px;
	box-shadow: 0 16px 34px -26px rgba(70, 58, 40, .5);
	transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}
.jdh_bagrid--framed .jdh_bagrid__item:hover .jdh_bagrid__pair {
	transform: translateY(-5px);
	box-shadow: 0 26px 44px -26px rgba(70, 58, 40, .55);
}
/* 배지는 사진 기준으로 붙어 있어야 하므로 프레임 패딩만큼 안쪽으로 당기지 않는다(그대로 둔다) */
.jdh_bagrid--framed .jdh_bagrid__shot { border-radius: 6px 0 0 6px; }
.jdh_bagrid--framed .jdh_bagrid__shot:last-child { border-radius: 0 6px 6px 0; }
/* 시술명 캡션 — ⚠ grid 자식이라 열 전체를 쓰도록 명시해야 세 번째 칸으로 밀리지 않는다.
 * 캡션이 없는 페이지(쥬브젠·리팟: 증례가 모두 같은 시술이라 반복이 의미 없다)는
 * 이 요소를 아예 두지 않으면 된다 — 프레임 아래 패딩만 남는다. */
.jdh_bagrid__cap {
	grid-column: 1 / -1;
	display: flex; align-items: center; justify-content: center;
	height: 46px; margin-bottom: -4px;
	font-weight: 700; font-size: 17px; letter-spacing: -0.2px; color: #284232;
}

/* ── 반응형 ──────────────────────────────────────────────────────── */
@media all and (max-width: 1240px) {
	.jdh_bagrid__inner { padding: 0 28px; }
	.jdh_bagrid__list { gap: 22px 20px; }
	.jdh_bagrid__item { flex-basis: calc((100% - 20px) / 2); max-width: calc((100% - 20px) / 2); }
}
@media all and (max-width: 768px) {
	.jdh_bagrid { padding: 54px 0 58px; }
	.jdh_bagrid__inner { padding: 0 20px; }
	/* 2026-08-12 — 1열 세로 나열은 증례 6쌍에서 1,440px 을 썼다(사용자 지시로 가로 스와이프 전환).
	 * ⚠ 이 파일은 시그니처 3종(쥬브젠·리팟·슬림케어) 공용이다 — 세 페이지가 함께 바뀐다.
	 *   슬림케어는 증례가 2쌍뿐이라 스크롤 폭이 짧지만, 넘기는 동작 자체는 동일하게 성립한다.
	 * ⚠ flex-wrap 을 nowrap 으로 바꾸는 게 핵심이다. 위 블록들이 flex-basis 로 열 수를 정하고 있어
	 *   wrap 인 채로 overflow 만 걸면 그대로 접혀 스크롤이 생기지 않는다.
	 * ⚠ 음수 마진(-20px)은 .jdh_bagrid__inner 의 좌우 패딩과 짝이다(같은 블록 위쪽에서 20px). */
	.jdh_bagrid__list {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 12px;
		margin: 0 -20px;
		padding: 0 20px 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 20px;
		-webkit-overflow-scrolling: touch;
	}
	.jdh_bagrid__list::-webkit-scrollbar { height: 3px; }
	.jdh_bagrid__list::-webkit-scrollbar-track { background: rgba(70,58,40,.10); border-radius: 999px; }
	.jdh_bagrid__list::-webkit-scrollbar-thumb { background: rgba(70,58,40,.34); border-radius: 999px; }
	.jdh_bagrid__item { flex: 0 0 88%; max-width: 88%; scroll-snap-align: center; }
	.jdh_bagrid__shot i { top: 8px; left: 8px; padding: 4px 9px; font-size: 10px; }
	.jdh_bagrid__note { margin-top: 18px; font-size: 12.5px; }
	.jdh_bagrid__head { margin-bottom: 32px; }
	.jdh_bagrid--framed .jdh_bagrid__pair { padding: 9px; }
	.jdh_bagrid__cap { height: 40px; font-size: 16px; }
}