@charset "utf-8";
/* =========================================================================
 * JDH Before & After 슬라이드 (공통 컴포넌트)
 * · 짝: /js/jdh_baslide.js — jdh_ba.css 다음에 로드한다(뷰어 한 장의 스타일은 jdh_ba.css 담당).
 * · 사용 페이지: /solution/pore · wrinkle · lifting · pigment
 *
 * ── 왜 만들었나 ────────────────────────────────────────────────────────
 * 증상별 솔루션 페이지의 전후 뷰어는 증례가 한 쌍뿐이었다. 병원에서 사진이 계속
 * 추가되므로(2026-08-10 사용자 요청) 여러 쌍을 넘겨 볼 수 있는 슬라이드로 감쌌다.
 * 사진을 더 받으면 각 JSP 상단의 baCases 배열에 줄만 추가하면 된다.
 *
 * ── 왜 스크롤 스냅인가 ─────────────────────────────────────────────────
 * 전후 비교에서 드래그 UI 를 걷어낸 이유(jdh_ba.css 상단 주석)와 같은 맥락이다.
 * 트랙을 JS 로 transform 하며 터치 드래그를 직접 구현하면 세로 스크롤과 충돌한다.
 * 브라우저 네이티브 가로 스크롤 + scroll-snap 을 쓰면
 *   · 모바일 스와이프가 세로 스크롤을 전혀 막지 않고(브라우저가 축을 판별한다)
 *   · JS 가 죽어도 슬라이드를 손으로 밀어 볼 수 있다.
 * JS 는 화살표/도트/카운터만 얹는다.
 * ========================================================================= */

.jdh_baslide {
	position: relative;
	/* 톤은 페이지에서 --ba-* 로 넘어온다(.jdh_ba 와 같은 이름을 쓴다 — 한 번만 지정하면
	   슬라이드 컨트롤과 뷰어가 함께 물든다). 값이 없을 때를 위한 기본값. */
	--ba-ink:   #1C1E1A;
	--ba-green: #3B5843;
	--ba-gold:  #C2A878;
	--ba-line:  #E7E2D8;
}

/* ── 트랙 ──────────────────────────────────────────────────────────────
 * 상하 패딩은 스테이지 그림자가 잘리지 않게 두는 여유다(음수 마진으로 되돌린다).
 * 좌우 패딩은 두지 않는다 — scroll-snap 기준점이 어긋나 슬라이드가 반 칸 밀린다. */
.jdh_baslide__track {
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 24px 0 32px;
	margin: -24px 0 -32px;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;   /* 끝에서 더 밀어도 페이지/뒤로가기로 넘어가지 않게 */
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;            /* 스크롤바는 감춘다 — 위치는 도트가 알려준다 */
	-ms-overflow-style: none;
}
.jdh_baslide__track::-webkit-scrollbar { display: none; }

.jdh_baslide__item {
	position: relative;
	flex: 0 0 100%;
	min-width: 0;
	scroll-snap-align: start;
	scroll-snap-stop: always;         /* 한 번에 여러 장 건너뛰지 않게 */
}

/* 슬라이드 안의 뷰어는 그림자를 한 단계 낮춘다 — 트랙이 좌우를 잘라
   원래 그림자(0 26px 54px)는 옆면이 직선으로 끊겨 보인다. */
/* ⚠ 2026-08-11 사용자 지시로 카드 아래 그림자를 **제거**했다. 되살리지 말 것.
   (원래 값: 0 18px 38px rgba(76,64,44,.18)) */
.jdh_baslide .jdh_ba__stage { box-shadow: none; }

/* ── 증례 라벨 (사진 우상단 칩) ────────────────────────────────────────
 * 사진 아래에 두면 컨트롤 바와 겹쳐 하단이 붐빈다. BEFORE/AFTER 캡이 좌상단이라
 * 반대쪽 모서리를 쓴다. */
.jdh_baslide__label {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	/* 2026-08-11 사용자 지시: "CASE 04" 번호는 마크업에서 뺐고(.jdh_baslide__no 삭제)
	   남은 시술명은 13 → 18px 로 키웠다. 번호를 되살리지 말 것. */
	padding: 10px 20px;
	border-radius: 999px;
	background: rgba(20,26,20,.58);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.3px;
	line-height: 1;
	color: #FFFDF8;
	white-space: nowrap;
}

/* ── 컨트롤 바 ────────────────────────────────────────────────────── */
.jdh_baslide__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin: 20px 0 0;
}

/* 도트 — 현재 위치만 알약으로 늘어난다(개수가 늘어도 줄이 넘치지 않게 wrap) */
.jdh_baslide__dots {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	min-width: 0;
}
.jdh_baslide__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(28,30,26,.2);
	cursor: pointer;
	transition: width .34s cubic-bezier(.22,.61,.36,1), background .3s ease;
}
.jdh_baslide__dot:hover { background: rgba(28,30,26,.4); }
.jdh_baslide__dot.is-on {
	width: 26px;
	background: var(--ba-green);
}

/* 화살표 + 카운터 */
.jdh_baslide__nav {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
}
.jdh_baslide__btn {
	position: relative;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid var(--ba-line);
	border-radius: 50%;
	background: rgba(255,253,248,.9);
	cursor: pointer;
	transition: background .3s ease, border-color .3s ease, opacity .3s ease;
}
/* 화살촉 — 이미지 없이 두 변 + 회전 (개선 포인트 칩의 체크와 같은 방식) */
.jdh_baslide__btn::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	border-top: 1.6px solid var(--ba-ink);
	border-right: 1.6px solid var(--ba-ink);
	transition: border-color .3s ease;
}
.jdh_baslide__btn--prev::before { transform: translate(-40%, -50%) rotate(-135deg); }
.jdh_baslide__btn--next::before { transform: translate(-60%, -50%) rotate(45deg); }
.jdh_baslide__btn:hover:not(:disabled) {
	background: var(--ba-green);
	border-color: var(--ba-green);
}
.jdh_baslide__btn:hover:not(:disabled)::before { border-color: #FFFDF8; }
.jdh_baslide__btn:disabled { opacity: .3; cursor: default; }

.jdh_baslide__count {
	font-family: 'Cormorant Garamond', serif;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 1px;
	line-height: 1;
	color: rgba(28,30,26,.42);
	white-space: nowrap;
}
.jdh_baslide__count em {
	font-style: normal;
	font-size: 20px;
	color: var(--ba-green);
}

/* 증례가 한 쌍뿐이면 컨트롤을 감춘다(JS 가 붙인다) */
.jdh_baslide.is-single .jdh_baslide__bar { display: none; }

/* ── 반응형 ──────────────────────────────────────────────────────── */
@media all and (max-width: 768px) {
	.jdh_baslide__track { padding: 18px 0 24px; margin: -18px 0 -24px; }
	.jdh_baslide__label { top: 12px; right: 12px; padding: 6px 11px; font-size: 12px; }
	.jdh_baslide__bar { margin-top: 16px; gap: 12px; }
	.jdh_baslide__btn { width: 42px; height: 42px; }
	.jdh_baslide__count { font-size: 16px; }
}
@media all and (max-width: 480px) {
	/* 도트가 두 줄로 접히면 바가 들쭉날쭉해진다 → 좁은 화면에서는 카운터만 남긴다 */
	.jdh_baslide__dots { display: none; }
	.jdh_baslide__bar { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.jdh_baslide__track { scroll-behavior: auto; }
	.jdh_baslide__dot { transition: none; }
}

/* 등록된 증례가 없을 때 (2026-09-11, /include/solution_ba.jsp) — 빈 슬라이드 대신 한 줄 안내 */
.jdh_baslide__empty {
	margin: 0;
	padding: 48px 24px;
	border: 1px dashed rgba(28,30,26,.18);
	border-radius: 8px;
	text-align: center;
	font-size: 15px; line-height: 1.6;
	color: rgba(28,30,26,.55);
	word-break: keep-all;
}