@charset "utf-8";
/* =========================================================================
 * JDH Before & After 뷰어 (공통 컴포넌트)
 * · 사용 페이지: /solution/pore, /solution/wrinkle (증상별 솔루션 공통)
 * · 짝: /js/jdh_ba.js — 페이지에서 두 파일을 headHtml include 다음에 로드한다.
 *
 * ── 왜 드래그 비교 슬라이더를 걷어냈나 ──────────────────────────────────
 * 이전 구현은 사진 위 손잡이를 좌우로 끄는 방식이었다. 아래 문제가 있었다.
 *   1) 모바일에서 사진 위 가로 드래그가 세로 스크롤과 충돌 — 페이지가 걸린다.
 *      (touchmove 를 preventDefault 해야 해서 스크롤을 막을 수밖에 없었다)
 *   2) 손잡이를 잡고 있는 동안에만 비교가 되고, 손을 떼면 전/후가 반씩 잘린
 *      어중간한 화면이 남는다 — 전체 얼굴을 온전히 볼 수 있는 순간이 없다.
 *   3) "끌어야 한다"는 조작을 모르는 사용자는 그냥 사진 한 장으로 인식한다.
 *
 * ── 대체 방식 ──────────────────────────────────────────────────────────
 * [시술 전][시술 후][함께 보기] 세그먼트 + 자동 디졸브 전환.
 *   · 탭/클릭 한 번으로 전환 — 세로 스크롤을 전혀 방해하지 않는다.
 *   · 자동 전환이 기본으로 돌아 조작법을 몰라도 변화가 눈에 들어온다.
 *     (뷰어가 화면에 보일 때만 동작, 사용자가 직접 고르면 즉시 정지)
 *   · '함께 보기'는 2분할이라 나란히 대조도 된다 — 드래그로는 불가능했던 것.
 *   · 전/후 모두 항상 사진 전체가 보인다.
 *
 * ── 컨트롤 없이 쓰는 방식 (증상별 솔루션 4개 페이지, 2026-08-03) ────────
 * .jdh_ba[data-mode="split"] 만 두고 .jdh_ba__ctrl 블록을 아예 넣지 않으면
 * 2분할 고정 뷰어가 된다 — 조작 없이 전후가 바로 대조된다(사용자 지시).
 * 이때 jdh_ba.js 는 버튼을 못 찾고 즉시 return 하므로 스크립트 로드도 생략한다.
 * 세그먼트+자동 전환이 필요한 페이지(antiaging/stemcell·booster)는 기존 그대로 쓴다.
 * ========================================================================= */

.jdh_ba {
	--ba-radius: 8px;          /* 이미지 박스 radius 규칙 */
	/* 증례 사진이 세로형(360x496)으로 통일돼 비율을 세로 쪽으로 내렸다(2026-08-03).
	   가로형 1.42 를 유지하면 얼굴 위아래가 30% 넘게 잘린다. */
	--ba-ratio: .85 / 1;
	--ba-ink: #1C1E1A;
	--ba-green: #3B5843;
	--ba-gold: #C2A878;
	--ba-line: #E7E2D8;
	position: relative;
}

/* ── 스테이지 ──────────────────────────────────────────────────────────
 * 전/후 두 장을 CSS Grid 같은 칸(1/1)에 겹쳐 둔다.
 * '함께 보기'에서는 같은 요소를 2열로 풀어 놓기만 하면 되므로
 * position:absolute 겹침보다 전환이 매끄럽고 마크업도 단순하다. */
.jdh_ba__stage {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	aspect-ratio: var(--ba-ratio);
	border-radius: var(--ba-radius);
	overflow: hidden;
	background: #E9E5DC;
	box-shadow: 0 26px 54px rgba(76,64,44,.22);
	transition: gap .5s cubic-bezier(.22,.61,.36,1), aspect-ratio .5s cubic-bezier(.22,.61,.36,1);
}
.jdh_ba__frame {
	grid-area: 1 / 1;          /* 두 장을 같은 칸에 포갠다 */
	position: relative;
	margin: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transition: opacity .62s cubic-bezier(.4,0,.2,1), visibility 0s linear .62s;
}
.jdh_ba__frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.045);
	transition: transform 1.1s cubic-bezier(.22,.61,.36,1);
}

/* 현재 모드에 해당하는 장면만 노출 */
.jdh_ba[data-mode="before"] .jdh_ba__frame--before,
.jdh_ba[data-mode="after"]  .jdh_ba__frame--after {
	opacity: 1;
	visibility: visible;
	transition: opacity .62s cubic-bezier(.4,0,.2,1), visibility 0s;
}
.jdh_ba[data-mode="before"] .jdh_ba__frame--before img,
.jdh_ba[data-mode="after"]  .jdh_ba__frame--after img {
	transform: none;           /* 아주 옅은 줌아웃으로 "바뀌었다"는 신호를 준다 */
}

/* 함께 보기 — 같은 두 장을 2열로 풀어 놓는다.
 * 폭이 반으로 줄어드는 만큼 스테이지를 넓게 잡는다. 안 그러면 칸이 세로로 길어져
 * 가로형 증례 사진의 좌우가 크게 잘린다(이 뷰어의 기본 화면이라 특히 중요). */
.jdh_ba[data-mode="split"] .jdh_ba__stage {
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	aspect-ratio: 1.7 / 1;   /* 세로형 두 장 나란히 — .85 x 2 */
	background: #DCD6C8;
}
.jdh_ba[data-mode="split"] .jdh_ba__frame {
	grid-area: auto;
	opacity: 1;
	visibility: visible;
	transition: opacity .5s ease;
}
.jdh_ba[data-mode="split"] .jdh_ba__frame img { transform: none; }

/* ── 회원 전용 잠금 (2026-09-11) ──────────────────────────────────────────
 * 증상별 솔루션 4개 페이지의 전후 슬라이드(/include/solution_ba.jsp)가 미로그인이면
 * .jdh_ba 에 is-locked 를 붙인다. 사진만 흐리고 BEFORE/AFTER 라벨은 그대로 둔다.
 * /community/gallery 와 달리 안내 배지는 없다(사용자 지시).
 * ⚠ blur 는 가장자리를 바깥과 섞어 테두리가 비쳐 보이므로 scale 로 살짝 키워
 *   .jdh_ba__frame(overflow:hidden) 밖으로 밀어낸다 — split 모드의 transform:none 보다 뒤에 둬야 이긴다. */
.jdh_ba.is-locked .jdh_ba__frame img,
.jdh_ba.is-locked[data-mode="split"] .jdh_ba__frame img {
	filter: blur(12px);
	transform: scale(1.08);
}
.jdh_ba.is-locked .jdh_ba__frame::after {
	content: '';
	position: absolute; inset: 0;
	z-index: 1;
	background: rgba(20,22,20,.28);
	pointer-events: none;
}
/* 다국어 전용 — 로그인이 없어 항상 잠기므로 사진을 상세 링크로 감싸고 안내 배지를 얹는다
   (마크업은 /include/solution_ba.jsp 의 sbaI18n 분기, 규칙은 page_gallery.css 의 .gl_lock 과 동일). */
.jdh_ba__link { display: block; color: inherit; text-decoration: none; }
.jdh_ba__lock { display: none; }
.jdh_ba.is-locked .jdh_ba__lock {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	position: absolute; left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;
	padding: 11px 18px;
	background: rgba(20,22,20,.62);
	border: 1px solid rgba(255,253,248,.34);
	border-radius: 8px;
	color: #FFFDF8;
	font-size: 14px; font-weight: 600; letter-spacing: .2px;
	white-space: nowrap;
	pointer-events: none;
}
.jdh_ba__lock i {
	display: block; width: 7px; height: 7px;
	border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor;
	transform: translateX(-1px) rotate(45deg);
}

/* 사진 위 라벨 */
.jdh_ba__cap {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	padding: 7px 15px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.2px;
	line-height: 1;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.jdh_ba__frame--before .jdh_ba__cap { background: rgba(20,26,20,.62);   color: #fff; }
.jdh_ba__frame--after  .jdh_ba__cap { background: rgba(255,253,248,.92); color: var(--ba-ink); }

/* ── 컨트롤 바 ────────────────────────────────────────────────────── */
.jdh_ba__ctrl {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 16px 0 0;
}
.jdh_ba__seg {
	position: relative;
	display: flex;
	padding: 4px;
	border: 1px solid var(--ba-line);
	border-radius: 999px;
	background: rgba(255,253,248,.86);
}
.jdh_ba__btn {
	position: relative;
	z-index: 1;
	padding: 10px 22px;
	border: 0;
	border-radius: 999px;
	background: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -.3px;
	color: rgba(28,30,26,.52);
	white-space: nowrap;
	transition: color .3s ease;
}
.jdh_ba__btn:hover { color: var(--ba-ink); }
.jdh_ba__btn.is-on { color: #FFFDF8; }
/* 선택 표식 — JS 가 left/width 만 지정하고 이동은 CSS 가 잇는다 */
.jdh_ba__ink {
	position: absolute;
	top: 4px;
	left: 4px;
	height: calc(100% - 8px);
	width: 0;
	border-radius: 999px;
	background: var(--ba-green);
	box-shadow: 0 4px 12px rgba(59,88,67,.28);
	transition: left .42s cubic-bezier(.22,.61,.36,1), width .42s cubic-bezier(.22,.61,.36,1);
}

/* 자동 전환 토글 — 남은 시간이 밑줄로 차오른다 */
.jdh_ba__auto {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 4px 11px;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	color: rgba(28,30,26,.5);
	transition: color .3s ease;
}
.jdh_ba__auto:hover { color: var(--ba-ink); }
.jdh_ba__auto-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgba(28,30,26,.22);
	transition: background .3s ease, box-shadow .3s ease;
}
.jdh_ba__auto[aria-pressed="true"] { color: var(--ba-green); }
.jdh_ba__auto[aria-pressed="true"] .jdh_ba__auto-dot {
	background: var(--ba-gold);
	box-shadow: 0 0 0 3px rgba(194,168,120,.24);
}
.jdh_ba__auto::after {
	content: '';
	position: absolute;
	left: 4px;
	right: 4px;
	bottom: 2px;
	height: 2px;
	border-radius: 2px;
	background: var(--ba-gold);
	transform: scaleX(0);
	transform-origin: left center;
	opacity: 0;
}
/* 재생 중일 때만 진행 애니메이션 — is-tick 클래스를 JS 가 매 주기 껐다 켠다 */
.jdh_ba.is-playing .jdh_ba__auto::after { opacity: .55; }
.jdh_ba.is-playing.is-tick .jdh_ba__auto::after { animation: jdhBaTick 3400ms linear forwards; }
@keyframes jdhBaTick {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

.jdh_ba__note {
	margin: 14px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: rgba(28,30,26,.42);
	word-break: keep-all;
}

/* ── 반응형 ──────────────────────────────────────────────────────── */
@media all and (max-width: 768px) {
	.jdh_ba__ctrl { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 14px; }
	.jdh_ba__seg { justify-content: space-between; }
	.jdh_ba__btn { flex: 1 1 0; padding: 10px 8px; font-size: 13px; }
	.jdh_ba__auto { align-self: center; }
	.jdh_ba__cap { top: 12px; left: 12px; padding: 6px 12px; font-size: 11px; }
	/* 2026-09-02 사용자 지시 — 좁은 화면에서도 **두 장을 좌우로** 둔다.
	   직전에는 위아래로 쌓았다(얼굴이 작아진다는 이유). 하지만 전·후를 나란히 놓고 비교하는 것이
	   이 뷰어의 목적이라, 세로로 쌓으면 두 장이 한 화면에 같이 들어오지 않아 비교 자체가 어려웠다.
	   ⚠ 세로 쌓기(grid-template-rows: 1fr 1fr + aspect-ratio 1/1.7)로 되돌리지 말 것.
	   ⚠ 비율은 데스크톱과 같은 1.7/1 을 그대로 쓴다(여기서 재정의하지 않는다) — 폭 345px 기준
	     칸 하나가 약 170×203px 라 세로형 증례 사진(0.85)이 잘리지 않고 들어간다.
	   ⚠ 이 규칙은 공통 컴포넌트다 — 증상별 솔루션 4종과 항노화(stemcell)가 함께 쓴다. */
	.jdh_ba[data-mode="split"] .jdh_ba__stage {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		gap: 4px;
	}
}
@media all and (max-width: 480px) {
	.jdh_ba { --ba-ratio: .9 / 1; }
}

/* 모션 최소화 환경 — 자동 전환은 JS 가 아예 끄고, 남은 전환도 즉시 처리 */
@media (prefers-reduced-motion: reduce) {
	.jdh_ba__frame,
	.jdh_ba__frame img,
	.jdh_ba__stage,
	.jdh_ba__ink { transition: none; }
	.jdh_ba.is-playing.is-tick .jdh_ba__auto::after { animation: none; }
}