@charset "utf-8";
/* =========================================================================
 * JD시그니처 > 주름 X 쥬브젠 (www/signature/juvegen.jsp 전용)
 * Figma node 339:529
 * 로드 순서: main_hero.css → jdh_sub.css → 이 파일
 * ========================================================================= */
/* 영문 아이브로우용 세리프 — 이 파일은 Cormorant 를 쓰면서 @import 가 빠져 있어,
   폰트가 로드되지 않고 기본 serif 로 대체되고 있었다(2026-08-03 추가) */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&display=swap');

.jvg {
	--jvg-gold:      #B2A678;   /* 세리프 아이브로우 골드 */
	--jvg-gold-deep: #A68B5B;   /* 골드 그라데이션 끝 */
	--jvg-gold-lite: #C8A66A;   /* 히어로 카피 골드 */
	--jvg-green:     #284232;   /* 포인트 딥그린 */
	--jvg-ink:       #26231D;   /* 헤드라인 */
	--jvg-body:      #7C746B;   /* 본문 */
	--jvg-body-2:    #6E6A60;   /* 보조 본문 */
	--jvg-line:      #E7E0D3;   /* 헤어라인 */
	font-family: 'Pretendard', sans-serif;
	color: var(--jvg-ink);
}
.jvg .jvg_inner { max-width: 1440px; margin: 0 auto; padding: 0 40px; }

/* 공통 헤더 블록 */
.jvg_head { text-align: center; }
.jvg_eyebrow {
	display: block;
	font-weight: 700; font-size: 16px; line-height: 1.45; letter-spacing: -0.1px;
	color: #B79C63;
}
/* 영문 아이브로우 공통 규격 — Cormorant Garamond 700 / 17px / 4.6px / UPPER (전 페이지 동일).
   ⚠ 이전의 italic 은 제거했다(2026-08-03 전체 통일) — 되살리지 말 것.
   .jvg_eyebrow(한글용) 는 Pretendard 라 이 규격을 적용하지 않는다. */
.jvg_eyebrow--serif,
.jvg_eyebrow--line {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700; font-style: normal; font-size: 17px; letter-spacing: 4.6px;
	text-transform: uppercase; color: var(--jvg-gold);
}
.jvg_title {
	margin: 26px 0 0;
	font-weight: 800; font-size: 40px; line-height: 1.31; letter-spacing: -0.72px;
	color: var(--jvg-ink);
}
.jvg_title--left { text-align: left; }
.jvg_lead {
	margin: 26px 0 0;
	font-weight: 400; font-size: 20px; line-height: 1.47; color: var(--jvg-body);
	/* keep-all 이 없으면 좁은 폭에서 '시술입니 / 다.' 처럼 단어 중간이 갈린다(2026-08-12 모바일에서 확인) */
	word-break: keep-all;
}
.jvg_lead--tight { margin-top: 14px; }
.jvg_lead--left { text-align: left; }

/* ===== 1. 히어로 ===== */
.jvg_hero {
	position: relative;
	overflow: hidden;
	/* 배경: jd_juv_hero_02(샴페인 글리터, 1920×668 = 히어로 높이와 동일) 의 JPEG 최적화본.
	 * 원본 그대로 선명·밝게 보이도록 화이트 베일은 카피가 얹히는 좌측에만 옅게 남긴다
	 * (우측 글리터 영역은 베일 0 → 반짝임이 그대로 살아난다). */
	background:
		linear-gradient(100deg, rgba(255,253,249,.34) 0%, rgba(255,252,246,.20) 44%, rgba(255,252,246,.06) 74%, rgba(255,252,246,0) 100%),
		url('/img/signature/juvegen/hero_bg.jpg') center center / cover no-repeat;
	background-color: #EFE3D5;   /* 이미지 로드 전 폴백 */
}
/* 모델 컷은 흰 배경 위 촬영본 → multiply 로 베이지 배경에 자연스럽게 얹음 */
/* 모델 컷(/img/jd_juv_img_01.png) — 배경 투명 PNG.
 * 원본이 머리 위쪽에서 잘린 컷이므로 히어로 최상단에 여백 없이 붙이고(top:0),
 * 폭이 아니라 높이를 히어로에 맞춰 어떤 화면 폭에서도 잘리지 않게 한다.
 * 이미지 교체 시: 배경 투명 + 상단 여백 없는 컷, 권장 830x666(가로:세로 ≈ 1.25) */
.jvg_hero__media {
	position: absolute;
	/* right 11% — 히어로 높이를 666 → 720px 로 키우면서(2026-08-04) 모델 표시폭도 830 → 897px 로
	 * 늘어났다. 14% 그대로 두면 그만큼 카피 쪽으로 밀고 들어와, 늘어난 폭을 우측으로 상쇄한 값. */
	right: 11%; top: 0; bottom: auto;   /* 우측 끝에서 안쪽으로 / 상단 밀착 */
	width: auto; height: 100%;
	line-height: 0;
	pointer-events: none;
}
.jvg_hero__media img { width: auto; height: 100%; display: block; }
.jvg_hero__inner {
	position: relative; z-index: 1;
	max-width: 1440px; margin: 0 auto; padding: 0 40px;
	/* 시그니처 4종 공통 히어로 높이 — repot · slimcare · custom 과 같은 값.
	 * 2026-08-04 사용자 요청으로 666 → 720px (custom 히어로 모델이 아래쪽에서 잘리던 문제) */
	min-height: 720px;
	display: flex; align-items: center;
}
.jvg_hero__copy { max-width: 620px; }
.jvg_hero__eyebrow {
	display: block;
	font-family: 'Cormorant Garamond', serif;
	/* 히어로는 타이틀이 커서 크기(20px)만 위계용으로 남기고, 서체·굵기·자간·대문자는 공통 규격 */
	font-weight: 700; font-style: normal; font-size: 20px;
	letter-spacing: 4.6px; text-transform: uppercase;
	color: var(--jvg-gold-lite);
}
.jvg_hero__title {
	margin: 18px 0 0;
	font-weight: 800;
	/* 상한 80px — 시그니처 히어로 타이틀만 사용자 지정 예외(2026-08-04).
	 * 다른 서브페이지 h1(46px)·메인 히어로(54px) 상한을 넘지만 의도된 값이니 내리지 말 것. */
	font-size: clamp(40px, 4.6vw, 80px);
	line-height: .94; letter-spacing: -0.62px;
	color: var(--jvg-green);
}
.jvg_hero__title em { font-style: normal; }
/* ⚠ 색: 원래 --jvg-gold-lite(#D8BD8B) 였는데 밝은 히어로 배경에 묻혔다(2026-08-07 지적).
 *   딥브론즈로 낮추고 크기·굵기를 한 단 올렸다. 시그니처 3종(쥬브젠·리팟·커스텀) 공통값이다. */
.jvg_hero__desc {
	margin: 22px 0 0;
	font-weight: 500; font-size: 22px; line-height: 1.45;
	color: #5A4A2E;
}

/* ===== 2. 시술 개요 ===== */
.jvg_intro {
	padding: 120px 0;
	background: #F7EEE2 url('/img/signature/juvegen/sec2_bg.jpg') center top / cover no-repeat;
}
/* 4단계 플로우 */
.jvg_flow {
	display: flex; align-items: flex-start; justify-content: center;
	gap: 40px; margin: 60px 0 0; padding: 0; list-style: none;
}
.jvg_flow__step {
	flex: 0 0 250px;
	display: flex; flex-direction: column; align-items: center;
	padding: 0 8px; text-align: center;
}
/* 2026-08-06: 원 안 이미지를 옛 수술 원리 컷(skin1~3.jpg)으로 바꿨다. 사각 이미지라 여기서 원형으로 자른다.
 * ⚠ object-fit 은 cover 여야 한다(contain 이면 원 안에 사각 이미지가 그대로 들어가 여백이 생긴다).
 *   컷 가운데에 피사체가 있어 object-position 은 center 로 충분하다.
 * 크기: 84 → 118 → 160px (2026-08-07 사용자 지시). 피부 단면 컷은 작을수록 무엇인지 안 보인다.
 *
 * ⚠ 원 배경색(#FBF5EC)이 실제로 보이게 하는 장치가 mix-blend-mode:multiply 다.
 *   skin1~3.jpg 는 배경이 거의 흰색(251,250,248)인 JPG 라 그냥 깔면 원 안이 흰 동그라미가 된다
 *   (크림색 섹션 배경 위에서 흰 원만 도드라진다는 지적). multiply 는 흰색을 아래 배경색 그대로 통과시켜
 *   이미지 파일을 건드리지 않고 배경만 크림톤으로 바꿔 준다.
 *   · isolation:isolate 가 없으면 섹션 배경(sec2_bg.jpg)까지 섞여 일러스트가 탁해진다 — 반드시 함께 둘 것.
 *   · 배경색을 더 어둡게 바꾸면 일러스트도 그만큼 어두워진다(곱셈이라서). 밝은 크림 범위를 벗어나지 말 것.
 *   · 배경이 투명한 PNG 컷을 새로 받으면 multiply 와 isolation 을 걷어내면 된다. */
.jvg_flow__ic {
	display: block; width: 160px; height: 160px;
	border-radius: 50%; overflow: hidden; line-height: 0;
	background: #FBF5EC;
	isolation: isolate;
	/* inset 헤어라인 — 배경색을 섹션과 비슷한 크림으로 낮추면서 원 윤곽이 묻혔다. 테두리로 형태만 잡아 준다
	 * (흰 테두리를 두르면 다시 흰 원처럼 도드라져 애초 문제로 돌아간다) */
	box-shadow: 0 16px 30px -20px rgba(70, 58, 40, .5), inset 0 0 0 1px rgba(166, 139, 91, .22);
}
.jvg_flow__ic img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.jvg_flow__name {
	display: block; margin-top: 18px;
	font-weight: 700; font-size: 20px; letter-spacing: -0.17px; color: var(--jvg-green);
}
.jvg_flow__desc {
	margin: 9px 0 0;
	font-weight: 400; font-size: 16px; line-height: 1.43; color: var(--jvg-body-2);
}
/* 단계 사이 화살표 (CSS) — 위치는 원(160px)의 세로 중앙 기준 = 80 − 화살표 높이(14)/2 */
.jvg_flow__step + .jvg_flow__step { position: relative; }
/* 화살표 — 2026-08-06(2차) CSS 로 그리던 축+촉을 이미지로 교체(사용자 지정 jd_cursor.png).
 * 원본 여백을 트림한 `/img/jd_cursor_arrow.png` 를 쓴다(원본은 여백이 70%라 그대로 쓰면 작아진다).
 * ⚠ 같은 화살표가 page_custom.css · page_slimcare.css 에도 있다. 고칠 때 셋을 함께 볼 것. */
.jvg_flow__step + .jvg_flow__step::before {
	content: '';
	position: absolute; top: 73px; left: -44px;
	width: 34px; height: 14px;
	background: url('/img/jd_cursor_arrow.png') center / contain no-repeat;
}
.jvg_flow__step + .jvg_flow__step::after { content: none; }

/* 4개 효과 썸네일 카드 */
/* 학술 근거 한 줄 — 리드 아래 작은 배지. 자랑이 아니라 출처 표시라 톤을 눌러 둔다.
 * (내용 출처: 개발처 진성형외과 페이지. 우리 병원 실적으로 읽히지 않게 문장을 바꾸지 말 것) */
.jvg_note {
	display: inline-block; margin: 20px 0 0; padding: 8px 18px;
	background: rgba(120, 98, 58, .07); border-radius: 999px;
	font-weight: 500; font-size: 14.5px; letter-spacing: -0.2px; color: var(--jvg-body-2);
}
.jvg_effect {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: 30px; margin: 60px 0 0; padding: 0; list-style: none;
}
/* 카드가 2장만 남으면(2026-08-06) 4열 그리드에서 좌측으로 쏠린다 → 2열 + 폭 제한으로 가운데에 세운다 */
.jvg_effect--two {
	grid-template-columns: repeat(2, 1fr);
	max-width: 860px; margin-left: auto; margin-right: auto;
}
.jvg_effect__item {
	border-radius: 8px;   /* 이미지 박스 공통 radius */
	overflow: hidden;
	background: #fff;
	box-shadow: 0 14px 30px -22px rgba(70, 58, 40, .45);
	transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}
.jvg_effect__item:hover {
	transform: translateY(-5px);
	box-shadow: 0 22px 40px -22px rgba(70, 58, 40, .5);
}
.jvg_effect__thumb { display: block; aspect-ratio: 286 / 154; line-height: 0; }   /* 세로 1.2배(128→154) */
.jvg_effect__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jvg_effect__label {
	display: flex; align-items: center; justify-content: center;
	height: 60px;   /* 세로 1.2배(50→60) */
	font-weight: 700; font-size: 20px; letter-spacing: -0.2px; color: var(--jvg-green);
}

/* ===== 3. 새살로 완성하는 쥬브젠 ===== */
.jvg_about { padding: 120px 0; background: #fff; }
.jvg_about__grid {
	display: grid; grid-template-columns: 764fr 637fr;
	gap: 39px; align-items: end;
}
.jvg_about__media {
	border-radius: 8px; overflow: hidden; line-height: 0;
	background: #F6EFE6;
}
.jvg_about__media img { width: 100%; height: auto; display: block; }
.jvg_about__body { display: flex; flex-direction: column; }
.jvg_about__title {
	margin: 20px 0 0;
	font-weight: 700; font-size: 28px; line-height: 1.42; letter-spacing: -0.2px; color: #111;
}
.jvg_about__title em { font-style: normal; color: var(--jvg-green); }
.jvg_about__desc {
	margin: 24px 0 0;
	font-weight: 400; font-size: 20px; line-height: 1.5; letter-spacing: -0.2px; color: #333;
}
.jvg_about__desc + .jvg_about__desc { margin-top: 20px; }

/* 시술 정보 4칸 */
/* ⚠ 열 간격·좌우 패딩을 줄인 이유(2026-08-10): 이 블록은 배너 우측 컬럼 안이라 칸이 115px 밖에
 * 안 되고, gap 20 + padding 12 를 빼면 91px 만 남아 '24~36개월' 이 두 줄로 접혔다.
 * 값이 한 줄로 들어가는 최소치로 맞춘 값이니 다시 벌리지 말 것. */
.jvg_spec {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: 20px 12px; margin: 56px 0 0; padding: 0; list-style: none;
}
.jvg_spec__item {
	display: flex; flex-direction: column; align-items: center;
	padding: 8px 4px;
	text-align: center;
}
/* 2026-08-10 — 원형 SVG 아이콘(.jvg_spec__ic)과 영문 라벨(.jvg_spec__label)을 걷어내고
 * 사용자가 준 픽토그램 이미지 한 장으로 대체했다(아이콘 + 라벨을 둘 다 대신한다).
 * ⚠ 라벨(TIME·ANESTHESIA…)을 되살리지 말 것 — 이미지에 아이콘만 있고 라벨은 없는 것이 지시다.
 * 크기 88px = 옛 아이콘(52px) + 라벨 줄(18+13px) 자리를 합친 만큼. 시그니처 4개 페이지 공통 규격. */
.jvg_spec__pic {
	display: block;
	width: 88px;
	height: 88px;
	object-fit: contain;
}
/* 항목명(2026-08-11) — 픽토그램만으로 마취/회복이 구분되지 않는다는 지적으로 추가.
   ⚠ 되살리지 말라던 건 영문 라벨(TIME·ANESTHESIA…)이다. 이 한글 항목명은 지우지 말 것. */
.jvg_spec__name {
	display: block; margin-top: 14px;
	font-weight: 500; font-size: 13px; letter-spacing: -0.2px; color: rgba(28,30,26,.5);
}
.jvg_spec__value {
	display: block; margin-top: 5px;
	font-weight: 700; font-size: 20px; letter-spacing: -0.2px; color: var(--jvg-green);
}

/* ===== 4. 쥬브젠의 다양한 효과 =====
 * 배경 = jd_juv_img_bg_01(1920×957) — 우측에 쥬브젠 장비가 이미 합성된 컷.
 * 장비(팔 끝 ~ 받침대)가 이미지 상·하단에 거의 꽉 차 있어 세로로 자르면 바로 잘려 보인다.
 * → `auto 100%`(높이 기준)로 깔아 세로 크롭을 원천 차단하고, 섹션 높이는 콘텐츠가 정한다.
 * → 화면 전체가 아니라 **콘텐츠 컨테이너 폭(1440px) 기준 우측 정렬**(::before)로 깔아
 *   장비가 화면 오른쪽 끝으로 밀려나지 않고 카드 옆에 붙는다.
 * → 컨테이너 밖 좌/우 여백은 원본의 왼쪽·오른쪽 끝 1px 을 세로로 늘린 스트립으로 채운다.
 *   ::before 와 스트립 모두 세로 범위가 섹션 높이와 같아 y 매핑이 일치 → 이음새가 안 보인다.
 * 콘텐츠(문구·카드)는 그리드 좌측 컬럼만 쓰고, 우측 컬럼은 비워 배경 장비를 노출한다. */
/* 2026-08-06: 배경 합성 장비 컷(.jvg_benefit::before)을 걷어내고 그라데이션만 남겼다(사용자 요청).
 * 우측 자리는 영상 블록(.jvg_benefit__video)이 대신한다. */
.jvg_benefit {
	position: relative;
	overflow: hidden;
	/* 2026-08-14 96px → 150px(사용자 지시 "세로를 좀 늘려"). 배경 실크 컷이 위아래로 더 드러나
	   섹션이 여유 있게 읽힌다. ⚠ 아래 768 블록에도 모바일 값이 따로 있으니 함께 볼 것. */
	padding: 150px 0;
	/* 2026-08-14: 배경 컷을 사용자 지급 jd_juve_bg_02.png(실크 그라데이션)로 교체.
	 * ⚠ 원본은 2816x1536·8.3MB 라 그대로 쓰지 않는다 → 2200px JPG(553KB) benefit_bg_v2.jpg.
	 * ⚠ 이전 컷(jd_juve_bg.png)에 있던 **원형 단상이 새 컷에는 없다** → 영상 위치에 맞추던
	 *   가로 오프셋(58%/64%)도 함께 없앴다. center 로 두는 게 맞다. 되살리지 말 것.
	 * ⚠ 새 컷은 밝다 — 좌측 흰 카드가 묻히지 않도록 아래 ::before 스크림으로 카드 쪽만 살짝 눌러 둔다.
	 * 그라데이션은 이미지 로드 전/좌우가 남을 때의 폴백 — 컷의 크림 톤과 맞춘 값이다. */
	background:
		url('/img/signature/juvegen/benefit_bg_v2.jpg?v=20260814') center / cover no-repeat,
		linear-gradient(100deg, #EFE6D8 0%, #F1EADD 55%, #EFE7DA 100%);
}
/* 좌측 스크림 — 새 실크 컷은 왼쪽 위에 **밝은 골드 하이라이트**가 지나가는데, 하필 그 자리가
 * 골드색 아이브로우("피부 본연의 힘을 깨우는 근본적인 변화")와 겹쳐 글자가 배경에 녹아 버린다.
 * ⚠ 오른쪽(영상 자리)까지 덮지 말 것 — 55% 지점에서 완전히 투명해져 실크 결이 그대로 보여야 한다.
 * ⚠ .jvg_inner 가 z-index 1 이므로 이 스크림(z-index 0)은 항상 글·카드 아래에 깔린다. */
.jvg_benefit::before {
	content: '';
	position: absolute; inset: 0; z-index: 0;
	background: linear-gradient(90deg, rgba(255,252,246,.74) 0%, rgba(255,252,246,.48) 34%, rgba(255,252,246,0) 55%);
	pointer-events: none;
}
/* ⚠ 2026-08-14 — 이 섹션만 넓히던 예외(max-width 1720px + padding-right 0)를 **되돌렸다**(사용자 지시:
 *   "이 섹션만 가로로 너무 길다"). 이제 공통 컨테이너(.jvg_inner = 1440px / padding 0 40px)를 그대로 쓴다.
 *   → 좌우 여백이 위아래 섹션과 정확히 맞는다. 영상이 배경 단상에서 조금 멀어져도 이 정렬을 우선한다.
 *   카드 크기는 .jvg_benefit__list 의 max-width(520px)가 잡으므로 컬럼이 좁아져도 그대로다. */
.jvg_benefit > .jvg_inner {
	position: relative; z-index: 1;
}

/* 우측 영상 자리 — 지금은 임시 썸네일 + 재생 아이콘.
 * <video> 로 바꿔도 규격이 유지되도록 비율·radius 는 래퍼가 잡는다. */
.jvg_benefit__video {
	position: relative;
	/* 컬럼보다 넓게 잡고 우측으로 밀어, 배경 컷의 단상 위에 오도록 한다(2026-08-06 요청).
	 * margin-right 음수만큼 컨테이너 패딩 밖으로 나간다 — 섹션 overflow:hidden 이라 화면 밖은 잘리므로
	 * 우측 끝이 섹션 경계를 넘지 않는 선(-40px ≈ .jvg_inner 의 우측 패딩)까지만 민다.
	 * ⚠ 배경 position(62%)과 짝이다. 한쪽만 바꾸면 단상과 영상의 중심이 어긋난다. */
	/* 우측 패딩은 위 .jvg_benefit > .jvg_inner 에서 이미 0 이라 컬럼 폭 그대로 쓴다.
	 * ⚠ width:%% + margin-left:auto 조합은 쓰지 말 것 — 폭이 컬럼을 넘는 순간 auto 가 0 이 되어
	 *   음수 margin-right 만큼 우측으로 더 밀려 섹션 밖에서 잘린다(실제 겪음). */
	width: 100%;
	aspect-ratio: 16 / 10;
	/* 이미지 박스 radius 는 8px 이 공통 규칙이지만, 금테를 두르면 8px 은 각져 보여 10px 로 예외를 뒀다 */
	border-radius: 10px;
	/* 배경 컷이 크림 톤이라 옅은 골드는 묻힌다 → 한 톤 진한 금색 + 안쪽 흰 선으로 테두리를 살린다 */
	border: 2px solid #C3A469;
	overflow: hidden; line-height: 0;
	background: #CFC6B9;
	box-shadow: 0 30px 54px -34px rgba(70, 58, 40, .7), inset 0 0 0 1px rgba(255, 255, 255, .55);
}
.jvg_benefit__video img,
.jvg_benefit__video video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 재생 아이콘 — 실제 영상(controls)이 들어오면 이 요소는 지운다 */
.jvg_benefit__play {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	width: 66px; height: 66px;
	background: rgba(255,255,255,.9); border-radius: 50%;
	box-shadow: 0 10px 24px -12px rgba(60, 50, 34, .6);
}
.jvg_benefit__play::before {
	content: '';
	position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%);
	border-left: 17px solid var(--jvg-green);
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
}
/* 2026-08-06: 카드가 크다는 지적에 좌측 칸을 좁혔다(1fr → .86fr).
 * 남는 폭은 우측 영상이 가져가므로 영상은 그만큼 커진다. */
.jvg_benefit__grid {
	/* 2026-08-06(2차): 영상이 크다는 지적에 우측 칸을 줄였다(1.02 → .88fr) */
	display: grid; grid-template-columns: 1fr 1.35fr;
	gap: 60px; align-items: center;
}
/* 5개 → 3+2 로 줄바꿈, 두 번째 줄은 가운데 정렬 */
.jvg_benefit__list {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: 16px; margin: 40px 0 0; padding: 0; list-style: none;
	max-width: 520px;
}
.jvg_benefit__item {
	position: relative;   /* ::after 구분선 기준 */
	flex: 0 0 calc((100% - 32px) / 3);
	aspect-ratio: 1 / 1;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 16px;
	padding: 20px 12px;
	/* 2026-08-06: 시그니처 4종의 효과 카드 규격을 통일했다(커스텀·리팟과 동일).
	 *   좌측 굵은 라인 + 텍스트 아래 짧은 구분선(::after) 이 이 카드의 식별 요소다 — 빼면 다른 페이지와 어긋난다. */
	background: linear-gradient(158deg, #FFFFFF 0%, #FFFFFF 48%, #FBF8F2 100%);
	border: 1px solid #E9E2D6;
	border-left: 5px solid #C8BFAB;
	border-radius: 8px;
	text-align: center;
	box-shadow: 0 12px 26px -20px rgba(120, 98, 58, .32);
	transition: border-color .3s ease, box-shadow .3s ease, transform .3s cubic-bezier(.22,.61,.36,1);
}
/* 텍스트 아래 짧은 구분선 — 커스텀(.cst_benefit__item::after)과 같은 규격 */
.jvg_benefit__item::after {
	content: '';
	position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
	width: 46px; height: 1px; background: #C8BFAB;
}
.jvg_benefit__item:hover {
	transform: translateY(-5px);
	border-left-color: var(--jvg-green);   /* 커스텀·리팟과 같은 호버 — 좌측 라인이 포인트색으로 */
	box-shadow: 0 22px 38px -22px rgba(120, 98, 58, .45);
}
.jvg_benefit__ic { display: inline-flex; color: var(--jvg-gold); }
.jvg_benefit__ic svg { width: 41px; height: 41px; }   /* 카드 축소 복구 */
.jvg_benefit__item strong {
	font-weight: 700; font-size: 18px; letter-spacing: -0.3px; color: var(--jvg-green);
}
/* .jvg_benefit__media(장비 <img>) 는 배경 합성으로 대체되어 제거됨 */

/* ===== 5. 쥬브젠 수술 원리 ===== */
.jvg_step {
	padding: 110px 0 120px;
	background: linear-gradient(180deg, #FFFFFF 0%, #F7F6F1 100%);
}
.jvg_step__list {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: 40px; margin: 56px 0 0; padding: 0; list-style: none;
}
.jvg_step__card {
	position: relative;
	display: flex; flex-direction: column; align-items: center;
	padding: 34px 26px 26px;
	background: linear-gradient(180deg, #FFFFFF 0%, #FDFBF6 100%);
	border: 1px solid #EFE7D8;
	border-radius: 8px;
	text-align: center;
	box-shadow: 0 12px 28px -22px rgba(120, 98, 58, .35);
	transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease;
}
/* 상단 골드 라인 — hover 시 좌→우로 확장 */
.jvg_step__card::after {
	content: '';
	position: absolute; left: 0; right: 0; top: 0; height: 2px;
	background: linear-gradient(90deg, var(--jvg-gold-deep) 0%, #E4D5B4 100%);
	border-radius: 8px 8px 0 0;
	transform: scaleX(0); transform-origin: 0 50%;
	transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.jvg_step__card:hover {
	transform: translateY(-6px);
	border-color: #DFCFAC;
	box-shadow: 0 26px 44px -26px rgba(120, 98, 58, .55);
}
.jvg_step__card:hover::after { transform: scaleX(1); }
.jvg_step__card:hover .jvg_step__name { color: var(--jvg-gold-deep); }
.jvg_step__card:hover .jvg_step__img img { transform: scale(1.05); }
/* 카드 사이 화살표 */
.jvg_step__card + .jvg_step__card::before {
	content: '';
	position: absolute; top: 50%; left: -26px;
	width: 10px; height: 10px;
	border-top: 1.5px solid #C9BCA2; border-right: 1.5px solid #C9BCA2;
	transform: translateY(-50%) rotate(45deg);
}
.jvg_step__name {
	font-weight: 700; font-size: 22px; letter-spacing: -0.4px; color: var(--jvg-green);
	transition: color .3s ease;
}
.jvg_step__desc {
	position: relative;
	margin: 24px 0 0; padding-top: 24px;
	font-weight: 400; font-size: 16px; line-height: 1.7; letter-spacing: -0.2px;
	color: #5D6459;   /* 대비 강화 */
	word-break: keep-all;
}
.jvg_step__desc::before {
	content: '';
	position: absolute; top: 0; left: 50%; transform: translateX(-50%);
	width: 1px; height: 14px; background: #D8CDB6;
}
/* 일러스트 — 라운드 프레임 안에 안착, hover 시 살짝 확대 */
.jvg_step__img {
	display: block; width: 100%; margin-top: 26px;
	line-height: 0; border-radius: 8px; overflow: hidden;
}
.jvg_step__img img {
	width: 100%; height: auto; display: block;
	mix-blend-mode: multiply;
	transition: transform .5s cubic-bezier(.22,.61,.36,1);
}

/* ===== 6. 이런 분께 추천합니다 (디자인 개선) ===== */
.jvg_reco {
	padding: 110px 0;
	background: linear-gradient(180deg, #FFFFFF 0%, #FBF7F0 100%);
}
.jvg_reco__grid {
	display: grid; grid-template-columns: 1fr 1.12fr;
	gap: 52px; align-items: center;
}
/* ⚠ 원본(sec6_device.jpg)은 단상 밑동이 이미지 하단에 딱 붙어 있어 그대로 두면 잘린 것처럼 보인다
 * (2026-08-06 지적). 카드 배경을 컷의 크림 톤으로 깔고 이미지 하단을 마스크로 흐려 배경에 녹인다.
 * 하단 여백만 주면 단상이 공중에 뜬 것처럼 보이므로 페이드가 필요하다. */
.jvg_reco__media {
	border-radius: 8px; overflow: hidden; line-height: 0;
	padding-bottom: 5%;
	background: #EFE9DE;
	box-shadow: 0 26px 50px -34px rgba(90, 74, 48, .5);
}
.jvg_reco__media img {
	width: 100%; height: auto; display: block;
	-webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
	        mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
}
.jvg_reco__title {
	margin: 18px 0 0;
	font-weight: 800; font-size: 34px; line-height: 1.35; letter-spacing: -0.6px; color: var(--jvg-ink);
}
.jvg_reco__title em { font-style: normal; color: var(--jvg-gold-deep); }
/* ⚠ 2026-08-07 사용자 지시로 마크업에서 뺐다(타이틀 아래 바로 리스트). 되살릴 때를 대비해 규칙만 남긴다. */
.jvg_reco__desc {
	margin: 20px 0 0;
	font-weight: 400; font-size: 18px; line-height: 1.7; color: var(--jvg-body);
	word-break: keep-all; text-wrap: pretty;
}
/* 2열 체크 리스트 — 박스 없이 헤어라인으로 구획.
 * 2026-08-07 가독성 보강(사용자 지시): 글자 16 → 17.5 / 행간 1.5 → 1.6 / 자간 -0.4 → -0.25 /
 * 칸 높이 17 → 21 / 열 간격 28 → 32 / 글자색 한 단 진하게 / 체크 20 → 22.
 * ⚠ 시그니처 4종(repot·juvegen·custom·slimcare)이 같은 값이다. 한 곳만 고치면 어긋난다. */
.jvg_reco__list {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 32px; margin: 36px 0 0; padding: 0; list-style: none;
	grid-auto-rows: 1fr;   /* 항목 길이가 달라도 모든 행 높이를 통일 → 좌우 줄맞춤 */
	border-top: 1px solid var(--jvg-line);
}
.jvg_reco__list li {
	display: flex; align-items: center; gap: 14px;
	padding: 21px 2px;
	border-bottom: 1px solid var(--jvg-line);
	font-weight: 500; font-size: 17.5px; line-height: 1.6; letter-spacing: -0.25px;
	color: #3B382F;
	word-break: keep-all;   /* 단어 중간 줄바꿈 방지 */
	text-wrap: pretty;      /* 마지막 줄 한 글자만 떨어지는 현상 완화 */
	transition: color .25s ease;
}
.jvg_reco__list li:hover { color: var(--jvg-green); }
/* 얇은 원형 체크 */
.jvg_check {
	position: relative; flex: 0 0 auto;
	width: 22px; height: 22px;
	border: 1px solid #D6C6A4; border-radius: 50%;
	transition: background .25s ease, border-color .25s ease;
}
.jvg_check::after {
	content: '';
	position: absolute; left: 5.5px; top: 6.5px;
	width: 9px; height: 4.5px;
	border-left: 1.5px solid var(--jvg-gold-deep); border-bottom: 1.5px solid var(--jvg-gold-deep);
	transform: rotate(-45deg);
	transition: border-color .25s ease;
}
.jvg_reco__list li:hover .jvg_check { background: var(--jvg-gold-deep); border-color: var(--jvg-gold-deep); }
.jvg_reco__list li:hover .jvg_check::after { border-left-color: #fff; border-bottom-color: #fff; }

/* ===== 7. 자주하는 질문 (디자인 개선) ===== */
.jvg_faq { padding: 110px 0 120px; background: #fff; }
.jvg_faq__grid {
	display: grid; grid-template-columns: 380px minmax(0, 1fr);
	gap: 80px; align-items: start;
}
.jvg_faq__head { position: sticky; top: 110px; }
.jvg_faq__head .jvg_title { margin-top: 18px; }
.jvg_faq__head .jvg_lead { margin-top: 18px; font-size: 18px; line-height: 1.7; }
.jvg .jvg_faq__cta {
	display: inline-flex; align-items: center; gap: 10px;
	margin-top: 32px; padding: 14px 28px;
	border: 1px solid var(--jvg-green); border-radius: 999px;
	font-weight: 700; font-size: 16px; color: var(--jvg-green); text-decoration: none;
	transition: background .25s ease, color .25s ease;
}
/* 화살표 — 2026-08-07 사용자 지시로 CSS 로 그리던 '가는 선 + 45° 촉' 을 이미지로 교체.
 * ⚠ background-image 가 아니라 **mask** 다(hover 에 글자가 흰색이 되므로 currentColor 를 따라가야 한다).
 * ⚠ 같은 화살표가 repot·custom·slimcare 의 FAQ CTA 와 main_content 의 .jdh_skin__cta 에도 있다. */
.jvg .jvg_faq__cta i {
	display: inline-block; width: 24px; height: 9px;
	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;
}
.jvg .jvg_faq__cta:hover { background: var(--jvg-green); color: #fff; }

/* 아코디언 — 인셋 배경 리스트 (2026-08-10 리디자인, 시그니처 4종 공통 규격)
 * ⚠ 열고 닫을 때 글자가 좌우로 움직이면 안 된다. 예전엔 .is-open 에 padding-left 를 더해
 *   질문 줄이 오른쪽으로 밀렸는데(사용자 지적), 지금은 항목 자체에
 *   `margin: 0 -인셋 / padding: 0 인셋` 을 깔아 **배경만** 좌우로 퍼지게 한다.
 * ⚠ 구분선은 border 가 아니라 ::before/::after 다 — 인셋 배경보다 안쪽(콘텐츠 폭)에 맞춰야 하고,
 *   열린 항목 위아래만 골라서 지워야 카드처럼 떠 보이기 때문.
 * ⚠ Q 는 원형 배지를 걷어내고 세리프 레터로, 답변 머리에는 CSS 로 A 를 붙인다(마크업 수정 불필요).
 *   질문 텍스트 시작선(22+16=38px) 과 답변 들여쓰기를 같은 값으로 맞춰 둔 것이니 한쪽만 바꾸지 말 것. */
.jvg_acc {
	--acc-inset: 24px;
	position: relative;
	margin: 0 calc(var(--acc-inset) * -1);
	padding: 0 var(--acc-inset);
	border-radius: 8px;
	transition: background-color .35s ease;
}
.jvg_acc::before, .jvg_acc::after {
	content: ''; position: absolute; left: var(--acc-inset); right: var(--acc-inset);
	height: 1px; background: var(--jvg-line);
	transition: opacity .3s ease;
}
.jvg_acc::before { top: 0; opacity: 0; }          /* 리스트 맨 윗선 — 첫 항목만 노출 */
.jvg_acc::after  { bottom: 0; }
.jvg_acc:first-child::before { opacity: 1; }
.jvg_acc.is-open::before, .jvg_acc.is-open::after { opacity: 0; }
.jvg_acc:has(+ .jvg_acc.is-open)::after { opacity: 0; }
.jvg_acc:hover:not(.is-open) { background: #FAF8F3; }
.jvg_acc__q {
	position: relative;
	display: flex; align-items: flex-start; gap: 16px;
	width: 100%; padding: 26px 44px 26px 0;
	background: none; border: 0; cursor: pointer; text-align: left;
	transition: padding-bottom .4s cubic-bezier(.22,.61,.36,1);
	outline: none; -webkit-tap-highlight-color: transparent;
}
/* 21px×1.25 = 26.25px — 질문 텍스트 첫 줄(18×1.45=26.1px) 과 광학 정렬 */
.jvg_acc__mark {
	flex: 0 0 22px;
	font-family: 'Cormorant Garamond', serif; font-weight: 700;
	font-size: 21px; line-height: 1.25; color: #C0AC7E;
	transition: color .3s ease;
}
.jvg_acc__txt {
	flex: 1 1 auto;
	font-weight: 600; font-size: 18px; line-height: 1.45; letter-spacing: -0.3px; color: #33302A;
	transition: color .3s ease;
}
/* +/− 토글 — 세로획만 눕혀서 마이너스가 된다. top 은 질문 첫 줄 중앙(26+13) */
.jvg_acc__chev {
	position: absolute; right: 2px; top: 39px;
	width: 15px; height: 15px; margin-top: -7px;
}
.jvg_acc__chev::before, .jvg_acc__chev::after {
	content: ''; position: absolute; left: 0; top: 50%;
	width: 100%; height: 1.5px; margin-top: -0.75px; border-radius: 2px;
	background: #B3AB9E;
	transition: transform .4s cubic-bezier(.22,.61,.36,1), background-color .3s ease;
}
.jvg_acc__chev::after { transform: rotate(90deg); }
.jvg_acc__q:hover .jvg_acc__txt { color: var(--jvg-green); }
.jvg_acc__q:hover .jvg_acc__mark { color: var(--jvg-gold-deep); }
.jvg_acc__q:hover .jvg_acc__chev::before,
.jvg_acc__q:hover .jvg_acc__chev::after { background: var(--jvg-gold-deep); }
/* 답변 — 높이 애니메이션 */
.jvg_acc__a {
	display: grid; grid-template-rows: 0fr;
	transition: grid-template-rows .4s cubic-bezier(.22,.61,.36,1);
}
.jvg_acc__a > p {
	position: relative; overflow: hidden;
	margin: 0; padding: 0 44px 0 38px; max-width: 820px;
	font-weight: 400; font-size: 16px; line-height: 1.85; color: var(--jvg-body);
	opacity: 0; transition: opacity .3s ease, padding .4s ease;
}
.jvg_acc__a > p::before {
	content: 'A'; position: absolute; left: 0; top: 0;
	font-family: 'Cormorant Garamond', serif; font-weight: 700;
	font-size: 20px; line-height: 1.85; color: var(--jvg-green); opacity: .5;
}
.jvg_acc.is-open { background: #FAF7F0; }
.jvg_acc.is-open .jvg_acc__q { padding-bottom: 14px; }
.jvg_acc.is-open .jvg_acc__mark { color: var(--jvg-gold-deep); }
.jvg_acc.is-open .jvg_acc__txt { color: var(--jvg-green); }
.jvg_acc.is-open .jvg_acc__chev::after { transform: rotate(0deg); }
.jvg_acc.is-open .jvg_acc__chev::before,
.jvg_acc.is-open .jvg_acc__chev::after { background: var(--jvg-gold-deep); }
.jvg_acc.is-open .jvg_acc__a { grid-template-rows: 1fr; }
.jvg_acc.is-open .jvg_acc__a > p { opacity: 1; padding-bottom: 30px; }

/* ===== 8. 장덕한방병원의 약속 ===== */
/* 마지막 섹션 — 그라데이션이 흰색으로 끝나면 푸터 사이에 흰 띠처럼 보이므로
   연한 그린 톤으로 마감하고 여백/마진을 0 으로 정리 */
.jvg_promise {
	padding: 110px 0 100px;
	margin-bottom: 0;
	background: linear-gradient(180deg, #FFFFFF 0%, #F1F5EA 42%, #E9F0DF 100%);
}
.jvg_promise + * { margin-top: 0; }
.jdh_sub { margin-bottom: 0; }
.jdh_sub + footer.jdh_footer { margin-top: 0; }
.jvg_promise__list {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: 0; margin: 60px 0 0; padding: 0; list-style: none;
}
.jvg_promise__item {
	padding: 6px 34px;
	text-align: center;
}
.jvg_promise__item + .jvg_promise__item { border-left: 1px solid #E2E7DA; }
/* ⚠ 항목 넘버링(.jvg_promise__no 01~04)은 2026-08-11 사용자 지시로 마크업째 제거했다 — 되살리지 말 것.
   번호가 빠진 만큼 이름의 상단 여백을 0 으로 둔다(시그니처 4종 공통). */
.jvg_promise__name {
	display: block; margin-top: 0;
	font-weight: 700; font-size: 22px; letter-spacing: -0.4px; color: #223224;
}
.jvg_promise__desc {
	margin: 22px 0 0;
	font-weight: 400; font-size: 16px; line-height: 1.75; color: #67706A;
}
/* 하단 문구 바 */
/* ⚠ 2026-08-11 배경을 흰색 → **서명 이미지의 크림 종이색(#F2EEE5)** 으로 맞췄다.
   새 서명(sign_center.jpg)은 배경이 투명하지 않아, 박스 색이 다르면 이미지 사각형이 드러난다.
   같은 이유로 아래 `_promise__sign img` 의 `mix-blend-mode: multiply` 도 뺐다(곱하면 그 자리만 어두워진다). */
.jvg_promise__foot {
	display: flex; align-items: center; justify-content: center; gap: 48px;
	margin: 64px 0 0; padding: 26px 40px;
	background: #F2EEE5;
	border: 1px solid #E4DBC6; border-radius: 8px;
}
.jvg_promise__foot-txt {
	margin: 0;
	font-weight: 400; font-size: 16px; line-height: 1.75; color: #67706A;
}
.jvg_promise__sign { flex: 0 0 auto; line-height: 0; }
.jvg_promise__sign img { width: 390px; height: auto; display: block; }

/* =========================================================================
 * 반응형
 * ========================================================================= */
@media all and (max-width: 1280px) {
	.jvg .jvg_inner, .jvg_hero__inner { padding: 0 28px; }
	.jvg_hero__inner { min-height: 600px; }   /* 시그니처 4종 공통 */
	.jvg_faq__grid { grid-template-columns: 320px minmax(0, 1fr); gap: 52px; }
	.jvg_reco__grid { gap: 44px; }
	.jvg_step__list, .jvg_effect { gap: 22px; }
	.jvg_promise__item { padding: 6px 20px; }
}
@media all and (max-width: 1024px) {
	.jvg_intro, .jvg_about, .jvg_benefit, .jvg_step, .jvg_reco, .jvg_faq, .jvg_promise { padding: 76px 0; }
	.jvg_benefit { padding: 104px 0; }   /* 데스크톱(150px)과 같은 비율로 이 섹션만 더 여유 있게 */
	.jvg_title { font-size: 32px; margin-top: 20px; }
	.jvg_lead { font-size: 18px; margin-top: 18px; }
	/* 히어로: 카피 위 / 이미지 아래
	 * ⚠ 2026-08-12 — 주석은 처음부터 이 순서를 말하고 있었지만 실제로는 반대였다.
	 *   마크업이 [모델 컷 → 카피] 순이라, position:absolute 를 푸는 순간 DOM 순서 그대로
	 *   사진이 위로 올라갔던 것. 그래서 좁은 화면에서 머리가 잘린 컷이 헤더 바로 밑에 놓이고
	 *   타이틀은 화면 밖으로 밀려 "이 페이지가 무엇인지" 가 첫 화면에 안 보였다.
	 *   → .jvg_hero 를 flex 컬럼으로 세우고 order 로 카피를 먼저 올린다.
	 *   ⚠ order 를 지우려면 마크업 순서부터 바꿀 것. 데스크톱은 여전히 absolute 라 영향 없다. */
	.jvg_hero { display: flex; flex-direction: column; }
	.jvg_hero__inner { order: 1; min-height: 0; padding: 60px 28px 34px; }
	.jvg_hero__media {
		order: 2;
		position: relative; right: auto;
		width: 100%; max-width: 560px; height: auto; max-height: none; margin: 0 auto;
	}
	/* 모델 컷 원본이 어깨 아래에서 직선으로 잘린 컷이라, 데스크톱(하단이 히어로 바닥에 붙음)과 달리
	 * 1열 전환 시 잘린 단면이 그대로 드러난다 → 위치·크기는 그대로 두고 잘린 끝단에만
	 * 알파 페이드를 걸어 경계선만 지운다. 모바일 레이아웃에서만 적용.
	 * 2026-09-02 — **윗변에도 같은 페이드**를 넣었다(사용자 지적 "모델 위가 잘려 보인다").
	 *   이 컷은 자체 배경(크림 글리터)을 품고 있어, 카피 면과 만나는 윗변이 수평선으로 드러났다.
	 *   ⚠ 상단 8% 보다 깊게 지우지 말 것 — 모델의 머리 윗부분까지 옅어진다. */
	.jvg_hero__media img {
		width: 100%; height: auto;
		-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0, #000 8%, #000 92%, rgba(0,0,0,.6) 97%, rgba(0,0,0,0) 100%);
		mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0, #000 8%, #000 92%, rgba(0,0,0,.6) 97%, rgba(0,0,0,0) 100%);
	}
	.jvg_hero__copy { max-width: none; text-align: center; }
	.jvg_hero__desc { font-size: 19px; }
	/* 플로우: 2열 */
	/* 2026-08-06 단계가 4개 → 3개가 되면서 50%(2+1 로 접힘)는 마지막 칸이 좌측에 남는다 → 3열 유지 */
	.jvg_flow { flex-wrap: wrap; gap: 34px 0; }
	.jvg_flow__step { flex: 0 0 33.33%; }
	.jvg_flow__step + .jvg_flow__step::before,
	.jvg_flow__step + .jvg_flow__step::after { display: none; }
	/* 효과 카드 2열 */
	.jvg_effect { grid-template-columns: repeat(2, 1fr); }
	/* 좌우 2열 → 1열 */
	.jvg_about__grid, .jvg_benefit__grid, .jvg_reco__grid { grid-template-columns: 1fr; gap: 36px; }
	/* 1열 전환 시: 배경으로 깔지 않고 장비 컷을 카드 위 이미지 블록으로 보여준다
	 * (기존 .jvg_benefit__media order:-1 과 동일한 흐름) */
	.jvg_benefit {
		padding: 56px 0;
		background: radial-gradient(120% 90% at 78% 45%, #FFFDF8 0%, #FBF6EC 42%, #FFFFFF 100%);
	}
	/* 1열에서는 영상이 카드 위로 올라간다(예전 장비 컷 블록과 같은 흐름).
	 * 배경 합성 컷(::before)과 1열용 컷(.jvg_benefit__grid::before)은 2026-08-06 에 함께 걷어냈다. */
	/* 1열에서는 컬럼 폭에 맞춘다(데스크톱의 104%·우측 붙임은 배경 단상에 맞추려던 값이라 여기선 불필요) */
	.jvg_benefit__video { order: -1; aspect-ratio: 16 / 9; width: 100%; margin-left: 0; margin-right: 0; }
	.jvg_benefit__play { width: 56px; height: 56px; }
	.jvg_benefit__list { margin-top: 30px; }
	.jvg_spec { margin-top: 40px; }
	.jvg_about__title { font-size: 24px; }
	.jvg_about__desc { font-size: 18px; }
	/* 1열로 떨어지면 사진 아래에 글이 통째로 놓인다 — 왼쪽 정렬로 두면 넓은 오른쪽이 비어 보인다.
	 * 시그니처 4종(repot·juvegen·custom·slimcare)이 같은 규칙이다(2026-08-07 사용자 지시). */
	.jvg_about__body { text-align: center; }
	/* 원문 <br> 로 잡아 둔 줄이 좁은 폭에서 한 번 더 접힌다 — keep-all 이 없으면 단어 중간에서 갈린다.
	 * ⚠ <br> 자체는 숨기면 안 된다(원문에 공백이 없어 단어가 붙는다). */
	.jvg_about__desc { word-break: keep-all; }
	.jvg_reco__title { font-size: 28px; }
	/* 수술 원리 1열 */
	.jvg_step__list { grid-template-columns: 1fr; gap: 44px; max-width: 520px; margin-left: auto; margin-right: auto; }
	.jvg_step__card + .jvg_step__card::before { top: -28px; left: 50%; transform: translateX(-50%) rotate(135deg); }
	/* FAQ 1열 */
	.jvg_faq__grid { grid-template-columns: 1fr; gap: 34px; }
	.jvg_faq__head { position: static; }
	/* 약속 2열 */
	.jvg_promise__list { grid-template-columns: repeat(2, 1fr); gap: 40px 0; }
	.jvg_promise__item:nth-child(odd) { border-left: 0; }
	.jvg_promise__foot { flex-direction: column; gap: 22px; text-align: center; }
	.jvg_promise__sign img { width: 280px; }
}
@media all and (max-width: 768px) {
	.jvg .jvg_inner, .jvg_hero__inner { padding: 0 18px; }
	.jvg_intro, .jvg_about, .jvg_benefit, .jvg_step, .jvg_reco, .jvg_faq, .jvg_promise { padding: 56px 0; }
	.jvg_hero__inner { padding: 44px 18px 26px; }
	.jvg_hero__eyebrow { font-size: 18px; letter-spacing: 3.6px; }
	.jvg_hero__desc { font-size: 16px; margin-top: 18px; }
	.jvg_title { font-size: 28px; }
	.jvg_eyebrow { font-size: 14px; }
	.jvg_eyebrow--serif,
	.jvg_eyebrow--line { font-size: 14px; letter-spacing: 3.6px; }
	.jvg_lead { font-size: 17px; }
	/* 주의: 원문 줄바꿈(<br>)에 공백이 없어 br 을 숨기면 단어가 붙는다 → 모바일에서도 유지 */
	/* 플로우 — 2026-08-12: 1열 세로 카드(원 140px + 이름 + 설명)는 한 단계가 240px,
	 * 세 단계에 720px 을 썼다(사용자: "세로로 너무 길다").
	 * → **좌 원형 / 우 텍스트의 가로 행**으로 눕힌다. 한 단계 ≈ 100px 로 줄어든다.
	 * ⚠ 원(.jvg_flow__ic)은 가로=세로를 반드시 유지할 것 — 한쪽만 줄이면 타원이 된다.
	 * ⚠ .jvg_flow__desc br 을 숨기는 건 마크업의 <br> 앞에 공백을 넣어 둔 덕분이다
	 *   (signature/juvegen.jsp 주석 참조). 공백을 지우면 단어가 붙으니 함께 볼 것. */
	.jvg_flow { gap: 18px 0; margin-top: 32px; }
	/* ⚠ grid-template-areas 를 반드시 함께 줄 것. 자식이 [원 / 이름 / 설명] 셋인데 2열만 잡으면
	 *   설명이 두 번째 행의 **첫 칸**(=원 아래 96px 폭)으로 떨어져 세로로 길게 늘어난다
	 *   — 눕히려다 오히려 높아진다(2026-08-12 실제로 그랬다). */
	.jvg_flow__step {
		flex: 0 0 100%;
		display: grid;
		grid-template-columns: 96px minmax(0, 1fr);
		grid-template-areas: "ic name" "ic desc";
		align-content: center;
		gap: 0 16px;
		padding: 0; text-align: left;
	}
	.jvg_flow__ic { grid-area: ic; align-self: center; width: 96px; height: 96px; }   /* 원형이므로 가로=세로 유지 */
	.jvg_flow__name { grid-area: name; align-self: end; font-size: 17px; margin-top: 0; }
	.jvg_flow__desc { grid-area: desc; align-self: start; font-size: 14px; margin-top: 5px; word-break: keep-all; }
	.jvg_flow__desc br { display: none; }
	.jvg_note { margin-top: 16px; padding: 7px 15px; font-size: 13px; }
	/* 효과 카드 */
	.jvg_effect { gap: 12px; margin-top: 36px; }
	.jvg_effect__label { height: 53px; font-size: 16px; }   /* 세로 1.2배(44→53) */
	/* 개요/스펙 */
	.jvg_about__title { font-size: 22px; }
	.jvg_about__desc { font-size: 16px; }
	.jvg_spec { grid-template-columns: repeat(2, 1fr); gap: 26px 10px; }
	.jvg_spec__pic { width: 72px; height: 72px; }
	.jvg_spec__value { font-size: 18px; }
	/* 효과 카드(5개) 2열 */
	.jvg_benefit__list { gap: 10px; }
	.jvg_benefit__item { flex-basis: calc((100% - 10px) / 2); padding: 20px 10px; gap: 10px; }
	/* 2026-08-12 — 효과가 5개라 2열에서 마지막 하나가 wrap 된 뒤 justify-content:center 때문에
	 * 두 열 사이 중앙에 떠 있었다(사용자: "카드 정렬이 안 되어 있다").
	 * → 마지막 카드만 한 줄을 다 쓰게 하고, 넓어진 만큼 아이콘·글자를 가로로 눕힌다.
	 *   정사각(aspect-ratio)을 그대로 두면 폭이 두 배가 되면서 높이까지 두 배가 된다 — 반드시 함께 해제할 것.
	 * ⚠ 효과 개수가 짝수로 바뀌면 이 규칙을 지울 것(짝수에서는 마지막 줄이 이미 꽉 찬다). */
	.jvg_benefit__item:last-child {
		flex-basis: 100%;
		aspect-ratio: auto;
		flex-direction: row;
		justify-content: center;
		gap: 12px;
		padding: 20px 12px 26px;
	}
	.jvg_benefit__item strong { font-size: 16px; }
	.jvg_benefit__ic svg { width: 34px; height: 34px; }   /* 28px 의 1.2배 */
	/* 수술 원리 */
	.jvg_step__card { padding: 26px 18px 0; }
	.jvg_step__name { font-size: 20px; }
	.jvg_step__desc { font-size: 16px; }
	/* 추천 리스트 1열 */
	.jvg_reco__title { font-size: 24px; }
	.jvg_reco__desc { font-size: 16px; }
	.jvg_reco__list { grid-template-columns: 1fr; margin-top: 26px; }
	.jvg_reco__list li { font-size: 16.5px; padding: 17px 2px; }
	/* FAQ */
	.jvg_acc { --acc-inset: 14px; }   /* inner padding 18px 보다 좁게 — 넘치면 가로 스크롤 생긴다 */
	.jvg_acc__q { gap: 12px; padding: 20px 30px 20px 0; }
	.jvg_acc.is-open .jvg_acc__q { padding-bottom: 12px; }
	.jvg_acc__chev { right: 0; top: 33px; width: 13px; height: 13px; }
	.jvg_acc__mark { flex-basis: 18px; font-size: 19px; }
	.jvg_acc__txt { font-size: 17px; }
	.jvg_acc__a > p { padding: 0 0 0 30px; font-size: 16px; }
	.jvg_acc__a > p::before { font-size: 18px; }
	.jvg_acc.is-open .jvg_acc__a > p { padding-bottom: 22px; }
	.jvg .jvg_faq__cta { margin-top: 24px; padding: 12px 22px; font-size: 16px; }
	/* 약속 1열 */
	/* 2026-09-02 사용자 지시 — 좁은 화면에서 **한눈에 들어오도록 카드 2×2**로 바꾼다.
	   1열 + 구분선 목록은 네 항목이 세로로만 800px 넘게 늘어져 한 번에 훑기 어려웠다.
	   ⚠ 1열로 되돌리지 말 것. 시그니처 4종(juvegen·repot·custom·slimcare)이 같은 규칙이다 —
	     한 파일만 고치면 페이지끼리 어긋난다.
	   ⚠ 기본 규칙의 `__item + __item { border-left }` 를 이기려면 인접 선택자를 함께 적어야 한다
	     (예전의 `border-left:0 !important` 는 이 방식으로 대체했다). */
	.jvg_promise__list { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 32px; }
	.jvg_promise__item,
	.jvg_promise__item + .jvg_promise__item {
		padding: 20px 12px 18px;
		background: rgba(255,255,255,.72);
		border: 1px solid #E2E7DA;
		border-radius: 10px;
	}
	/* ⚠ keep-all 필수 — 칸이 149px 로 좁아 없으면 '시스/템', '진/료' 처럼 낱말 중간에서 갈린다 */
	.jvg_promise__name { font-size: 16px; letter-spacing: -.3px; word-break: keep-all; }
	.jvg_promise__desc { font-size: 13px; line-height: 1.62; margin-top: 8px; word-break: keep-all; }
	.jvg_promise__foot { margin-top: 40px; padding: 22px 18px; }
	.jvg_promise__foot-txt { font-size: 15px; }
	.jvg_promise__sign img { width: 230px; }
}