@charset "utf-8";
/* =========================================================================
 * 항노화 / 스킨부스터 > 수액테라피 (www/antiaging/iv.jsp 전용)
 * Figma node 463:218 (1920w light) — 원본이 거의 미완성이라 구성은 새로 짰다.
 * 로드 순서: main_hero.css → jdh_sub.css → 이 파일
 * 선택자는 모두 .iv 하위로 스코프 한정 → 다른 페이지 오염 없음
 *
 * ── 형제 페이지(줄기세포 · 스킨부스터)와의 관계 ───────────────────────
 * 하단 두 섹션(차별화 진단 시스템 · 4대 강점 배너)은 형제 페이지와 **완전히 동일**하게 간다.
 * 그 위 섹션들은 이 페이지 주제에 맞게 다르게 구성했다(사용자 요청).
 *   · 탭 없음 — 수액은 제품군이 갈리지 않고 메뉴 나열이 자연스럽다
 *   · Before&After 없음 — 피로 회복·컨디션은 전후 사진으로 보여줄 수 있는 성질이 아니다
 *   · 대신 [비움·채움 3포인트] → [수액 메뉴 4종] → [이런 분께 추천] 으로 구성
 *
 * ── 히어로 색 (페이지 구별 지점) ─────────────────────────────────────
 *   · 줄기세포   = 딥 그린   + 분자 그래픽
 *   · 스킨부스터 = 딥 브론즈 + 실크 드레이프
 *   · 수액테라피 = 딥 아쿠아 + 물방울(jd_water_bg.png → iv/hero_water.jpg)
 *
 * ── 타이포 스케일 ────────────────────────────────────────────────────
 * 46(h1) / 40(h2) / 26(카드명) / 19(리드) / 18(본문) / 16(설명)
 * ※ 최하단 4대 강점 배너 `.iv_merit` 는 Figma 원본 크기(32 / 13) 유지 → 2026-08-10 설명문만 16px 로 상향
 * ========================================================================= */

/* headHtml·main_hero.css 에 없는 서체만 이 페이지에서 로드 */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Noto+Serif+KR:wght@400;500;600;700&display=swap');

.iv {
	--iv-green:      #3B5843;
	--iv-teal:       #2A6068;
	--iv-ink:        #1C1E1A;
	--iv-gold:       #C2A878;
	--iv-gold-lite:  #D8C49A;
	--iv-cream:      #FBF9F2;
	--iv-line:       #E7E2D8;
	--iv-paper:      #FFFDF8;

	/* 타이포 스케일 */
	--iv-t-h1:   46px;   /* 히어로 타이틀 — 이 페이지 최대 크기 */
	--iv-t-h2:   40px;
	--iv-t-card: 26px;
	--iv-t-lead: 19px;
	--iv-t-body: 18px;
	--iv-t-txt:  16px;

	font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
	color: var(--iv-ink);
	background: #fff;
	overflow-x: clip;
}
.iv .iv_inner { max-width: 1320px; margin: 0 auto; padding: 0 40px; }

/* ── 섹션 공통 타이포 ─────────────────────────────────────────────── */
.iv .iv_eyebrow {
	display: block;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 4.6px;
	text-transform: uppercase;
	color: #6E8874;
}
.iv .iv_title {
	margin: 16px 0 0;
	font-weight: 700;
	font-size: var(--iv-t-h2);
	line-height: 1.3;
	letter-spacing: -1.4px;
	color: var(--iv-ink);
	word-break: keep-all;
}

/* =========================================================================
 * 1. 히어로 — 딥 아쿠아 + 물방울 (촉촉한 톤)
 *    배경 이미지 /img/antiaging/iv/hero_water.jpg 는 사용자가 지정한 jd_water_bg.png(4MB,
 *    원본은 www 밖 k:\jdhskin\_unused_img_20260804\img_root\ 로 이동)를
 *    1920px JPG 로 변환한 것. 실제 물방울·반짝임·웨이브가 들어 있어,
 *    앞서 쓰던 유체 라인 패턴(brand/story bg_pattern)보다 주제에 직접적이다.
 *    ⚠ 물방울 띠는 이미지 세로 62% 지점에 있어 cover 크롭 시 화면 70% 부근(하단)에 온다 →
 *      중앙 카피와 겹치지 않는다. background-position 을 바꾸면 이 균형이 깨진다.
 * ========================================================================= */
.iv_hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 520px;
	padding: 132px 0 128px;
	text-align: center;
	background-color: #17403F;
	background-image:
		/* ① 좌상단 아쿠아 광 */
		radial-gradient(124% 104% at 18% 4%, rgba(126,196,196,.38) 0%, rgba(126,196,196,0) 58%),
		/* ② 우하단 비네트 */
		radial-gradient(108% 92% at 92% 100%, rgba(3,16,18,.48) 0%, rgba(3,16,18,0) 62%),
		/* ③ 베이스: 딥 아쿠아 → 다크 틸 대각 그라데이션 */
		linear-gradient(146deg, #2B6266 0%, #215256 38%, #194247 70%, #0E3034 100%);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	overflow: hidden;
}
/* 물방울 레이어 — 원본이 밝은 펄 베이지라 그대로 깔면 카피가 죽는다.
 * grayscale → brightness(중간톤 아래로) → contrast(물방울·반짝임과 배경 분리) 후 screen.
 * 그 결과 배경 면은 거의 검정이 되어 무시되고, 물방울 테두리·하이라이트와 별빛만 남는다.
 * 2026-08-03 "너무 어둡다" 피드백 — brightness .46 → .60, contrast 5.5 → 4.6.
 * ⚠ contrast 를 그대로 둔 채 brightness 만 올리면 하이라이트가 흰색으로 타 버린다(항상 같이 낮출 것). */
.iv_hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url('/img/antiaging/iv/hero_water.jpg') center center / cover no-repeat;
	filter: grayscale(1) brightness(.60) contrast(4.6);
	mix-blend-mode: screen;
	opacity: 1;
	pointer-events: none;
}
/* 카피 뒤 스크림 — 물방울이 화면 하단에 몰려 있어 중앙은 세게 누르지 않는다.
 * (CSS 로 흩뿌리던 빛망울은 실제 물방울과 겹쳐 지저분해져서 제거했다) */
.iv_hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(58% 74% at 50% 46%, rgba(4,20,22,.28) 0%, rgba(4,20,22,.11) 54%, rgba(4,20,22,0) 78%),
		linear-gradient(180deg, rgba(3,16,18,.28) 0%, rgba(3,16,18,0) 26%),
		linear-gradient(0deg,   rgba(3,16,18,.22) 0%, rgba(3,16,18,0) 22%);
	pointer-events: none;
}
.iv_hero > .iv_inner { position: relative; z-index: 1; width: 100%; }
.iv_hero__eyebrow {
	margin: 0;
	font-size: 18px;
	font-weight: 400;
	letter-spacing: .3px;
	color: rgba(236,250,248,.86);   /* 배경을 밝히면서 스크림을 줄인 만큼 글자는 진하게 */
	word-break: keep-all;
}
.iv_hero__title {
	margin: 18px 0 0;
	font-weight: 800;
	font-size: var(--iv-t-h1);
	line-height: 1.2;
	letter-spacing: -1.8px;
	color: #F2FBF9;
}
.iv_hero__desc {
	margin: 22px auto 0;
	max-width: 900px;
	font-size: var(--iv-t-body);
	font-weight: 300;
	line-height: 1.8;
	color: rgba(236,250,248,.84);
	word-break: keep-all;
}

/* =========================================================================
 * 2. 인트로 — 비움 / 채움 / 유지 3포인트
 * ========================================================================= */
.iv_intro {
	position: relative;
	padding: 100px 0 104px;
	background:
		radial-gradient(58% 68% at 82% 12%, rgba(106,168,170,.18) 0%, rgba(106,168,170,0) 62%),
		radial-gradient(52% 62% at 6% 90%,  rgba(59,88,67,.10)   0%, rgba(59,88,67,0)   64%),
		linear-gradient(162deg, #F2F7F6 0%, #E8F0EF 48%, #DCE8E7 100%);
	border-bottom: 1px solid rgba(106,168,170,.30);
	overflow: hidden;
}
/* 오버레이: 사선 스트라이프 무늬 → 부드러운 그라데이션으로 교체(2026-08-03, 사용자 요청).
   무늬 없이도 면이 밋밋하지 않도록 상단/하단에 옅은 화이트 빛만 얹는다. */
.iv_intro::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(255,255,255,.42) 0%,
		rgba(255,255,255,.10) 38%,
		rgba(255,255,255,0)   62%,
		rgba(255,255,255,.30) 100%);
	pointer-events: none;
}
.iv_intro > .iv_inner { position: relative; z-index: 1; }
.iv_intro__head { text-align: center; max-width: 900px; margin: 0 auto 52px; }
.iv_intro__desc {
	margin: 22px 0 0;
	font-size: var(--iv-t-body);
	font-weight: 300;
	line-height: 1.82;
	color: rgba(28,30,26,.6);
	word-break: keep-all;
}
.iv_flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* 2026-08-18 가독성 개선 — 카드 면을 불투명 흰색으로 올리고 본문을 키웠다.
   ⚠ background 를 반투명(.72)으로 되돌리지 말 것. 섹션 배경(옅은 아쿠아 그라데이션)이 비쳐
     본문 회색과의 대비가 떨어지는 게 이 카드가 흐릿해 보이던 주된 원인이었다. */
.iv_flow__item {
	position: relative;
	padding: 42px 34px 40px;
	background: #FFFFFF;
	border: 1px solid rgba(150,190,190,.28);
	border-radius: 12px;
	text-align: center;
	box-shadow: 0 16px 34px rgba(28,50,50,.08);
}
/* ⚠ 카드 넘버링(.iv_flow__no)은 2026-08-18 사용자 지시로 마크업째 제거했다 — 되살리지 말 것.
   번호가 빠진 만큼 이름의 상단 여백을 0 으로 두어 카드 위 여백이 벌어지지 않게 한다. */
.iv_flow__name {
	display: block;
	margin: 0;
	font-weight: 700;
	font-size: 24px;
	letter-spacing: -.8px;
	color: var(--iv-ink);
}
.iv_flow__txt {
	margin: 16px 0 0;
	font-size: var(--iv-t-body);
	font-weight: 400;
	line-height: 1.8;
	color: rgba(28,30,26,.78);
	word-break: keep-all;
}

/* =========================================================================
 * 2-1. 개선 포인트 배너 (수액 메뉴 앞) — 2026-08-05 사용자 요청
 *      증상별 솔루션 4형제의 `_hl` 섹션과 같은 조형이되, 배경은 그린이 아니라
 *      이 페이지 주제색(수액 = 딥 아쿠아)으로 간다. 형제 페이지(booster·stemcell)와 달리
 *      탭이 없는 페이지라 색은 하나로 고정한다.
 *      ⚠ 질감(광원·비네트)은 ::after 오버레이가 만든다 — 베이스 색만 바꾸면 결은 그대로 유지된다.
 * ========================================================================= */
/* 2026-08-18 — 단색 아쿠아 면에 사용자 지급 물결 사진(www/img/iv_bg.png)을 깔았다.
 * ⚠ 카피는 흰색 그대로다 — 사진이 밝은 하늘색이라 아래 아쿠아 오버레이가 반드시 함께 있어야 읽힌다.
 *   오버레이 알파를 .55 아래로 내리지 말 것.
 * ⚠ 원본이 740x323 로 작다. 배너 폭(1600+)에서 2배 넘게 늘어나지만 물결 텍스처라 흐려져도
 *   자연스럽다 — 더 큰 파일로 억지로 늘려 저장하지 말 것(용량만 늘고 선명해지지 않는다). */
.iv_hl {
	--hl-base: 18,65,74;             /* 수액테라피 — 딥 아쿠아. 오버레이용이라 RGB 만 */
	position: relative;
	padding: 88px 0 94px;
	background: #12414A url('/img/antiaging/iv/hl_bg.jpg') center center / cover no-repeat;
	overflow: hidden;
	text-align: center;
}
.iv_hl::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 92% at 84% 6%,   rgba(255,232,196,.14) 0%, rgba(255,232,196,0) 56%),
		radial-gradient(92% 120% at 10% 0%,   rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 62%),
		/* 사진을 아쿠아로 물들이는 본 레이어 — 가운데는 조금 열어 물결 무늬가 비치게 한다 */
		radial-gradient(86% 96% at 50% 50%,   rgba(var(--hl-base),.54) 0%, rgba(var(--hl-base),.74) 100%),
		linear-gradient(180deg, rgba(var(--hl-base),.60) 0%, rgba(var(--hl-base),.50) 46%, rgba(var(--hl-base),.66) 100%);
	pointer-events: none;
}
/* 배경 워터마크 — 면이 비어 보이지 않게 브랜드 이니셜을 크게 깐다 */
.iv_hl::before {
	content: 'JDH';
	position: absolute;
	right: -1%;
	top: 50%;
	z-index: 1;
	transform: translateY(-50%);
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 340px;
	line-height: 1;
	letter-spacing: -10px;
	color: rgba(255,255,255,.055);
	pointer-events: none;
}
.iv_hl > .iv_inner { position: relative; z-index: 2; }
.iv_hl__eyebrow {
	display: block;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 4.6px;
	text-transform: uppercase;
	color: var(--iv-gold-lite);
}
.iv_hl__title {
	margin: 16px 0 0;
	font-size: 34px;
	font-weight: 700;
	line-height: 1.34;
	letter-spacing: -1px;
	color: #fff;
	word-break: keep-all;
}
.iv_hl__title em { font-style: normal; color: var(--iv-gold-lite); }
.iv_hl__list {
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}
.iv_hl__list li {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 22px 38px;
	border-radius: 12px;
	background: rgba(255,255,255,.96);
	font-size: var(--iv-t-lead);
	font-weight: 600;
	letter-spacing: -.3px;
	color: var(--iv-ink);
	box-shadow: 0 12px 30px rgba(0,0,0,.16);
}
/* 체크 아이콘 — 이미지 없이 두 변만 남긴 사각형을 45° 돌려 만든다 */
.iv_hl__list i {
	flex: 0 0 auto;
	width: 17px;
	height: 10px;
	margin-top: -6px;
	border-left: 2.5px solid var(--iv-green);
	border-bottom: 2.5px solid var(--iv-green);
	transform: rotate(-45deg);
}

/* =========================================================================
 * 3. 수액 메뉴 — 시술명 + 소요시간 배지 + 설명 + 효과 태그
 *    (Figma 원본 카드가 소요시간을 함께 보여주던 것을 살렸다)
 * ========================================================================= */
.iv_menu { padding: 104px 0 110px; background: var(--iv-cream); }
.iv_menu__head { text-align: center; margin: 0 0 52px; }
.iv_menu__desc {
	margin: 20px auto 0;
	max-width: 900px;
	font-size: var(--iv-t-body);
	font-weight: 300;
	line-height: 1.75;
	color: rgba(28,30,26,.55);
	word-break: keep-all;
}
/* 2026-08-10 개편 — 2열 박스 카드 → **에디토리얼 행 레이아웃**(사용자 지시:
 * "카드 형식 말고 세련되고 AI 느낌 안 나게, 가독성 좋게 시원한 느낌").
 * 항노화 3종(stemcell·booster·iv)이 같은 규격이다 — 한 곳만 고치지 말 것.
 * iv 만 다른 점: 좌측 축에 **소요시간 배지**가 함께 붙는다(메뉴 성격이라 시간이 정보다).
 * ⚠ grid-area 로 자리를 잡으므로 마크업 순서(top→sub→txt→tags)를 바꾸면 배치가 깨진다.
 *   (예전 2열 고정 주석은 폐기 — 이제 시술 수가 홀수여도 어긋나지 않는다.) */
/* 2026-08-18 재개편 — 좌 360px 축 + 우 설명의 **가로 2열 행**을 걷어내고 **세로 2×2 블록**으로 바꿨다
 * (사용자: "다른 UI로, 가독성 좋고 심플하게").
 *   · 좌우로 벌어진 축 사이 72px 을 건너뛰며 읽어야 해서 시선이 끊겼다 → 이름 밑에 설명이 바로 온다.
 *   · 4개가 세로로 나열돼 섹션이 길었다 → 2열로 접어 한 화면에 들어온다.
 * ⚠ 박스 카드로 만들지 말 것(2026-08-10 지시 유지) — 면·그림자·라운드 없이 **구분선만** 쓴다.
 *   바로 위 비움·채움·유지가 흰 박스 카드라, 여기까지 박스면 두 섹션이 같은 조형으로 반복된다. */
.iv_menu__list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	max-width: 1120px;
	margin: 0 auto;
	/* 각 블록이 border-top 을 그리므로 목록 아래쪽 마감선은 여기서 한 번만 긋는다 */
	border-bottom: 1px solid var(--iv-line);
}
.iv_card {
	padding: 40px 48px 42px;
	border-top: 1px solid var(--iv-line);
	transition: background-color .35s ease;
}
/* 바깥쪽 열은 안쪽 여백만 남긴다 — 좌우 끝을 섹션 폭에 맞춰야 구분선이 가지런하다 */
.iv_card:nth-child(odd)  { padding-left: 0; }
.iv_card:nth-child(even) { padding-right: 0; border-left: 1px solid var(--iv-line); }
.iv_card:hover { background: rgba(255,255,255,.55); }
.iv_card__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 6px 14px;
}
.iv_card__name {
	margin: 0;
	font-weight: 700;
	font-size: var(--iv-t-card);
	line-height: 1.34;
	letter-spacing: -.9px;
	color: var(--iv-ink);
	word-break: keep-all;
}
/* 소요시간 — 알약을 빼고 텍스트로. 앞의 작은 원만 시계 기호로 남긴다. */
.iv_card__time {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: -.1px;
	color: var(--iv-teal);
	white-space: nowrap;
}
.iv_card__time::before {
	content: '';
	width: 11px;
	height: 11px;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	position: relative;
	opacity: .7;
}
.iv_card__sub {
	margin: 8px 0 0;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -.2px;
	color: var(--iv-teal);
}
.iv_card__txt {
	margin: 18px 0 0;
	font-size: var(--iv-t-body);
	font-weight: 400;
	line-height: 1.82;
	letter-spacing: -.2px;
	color: rgba(28,30,26,.76);      /* 가독성 — .68 은 크림 배경에서 흐렸다 */
	word-break: keep-all;
}
/* 태그 — pill 을 없애고 얇은 구분선으로 나열 */
.iv_card__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 18px;
	margin: 18px 0 0;
}
.iv_card__tags i {
	position: relative;
	font-style: normal;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -.1px;
	color: var(--iv-green);
}
.iv_card__tags i + i::before {
	content: '';
	position: absolute;
	left: -10px;
	top: 50%;
	width: 1px;
	height: 11px;
	margin-top: -5px;
	background: rgba(59,88,67,.28);
}

/* =========================================================================
 * 4. 이런 분께 추천 — 체크리스트
 * ========================================================================= */
/* 카드를 화이트 유리(글래스)로 바꾸면서 섹션 배경도 함께 손봤다(2026-08-04 사용자 요청).
 * ⚠ 배경이 순백(#fff)이면 반투명·블러가 아무것도 비추지 않아 유리로 보이지 않는다.
 *   아주 옅은 아쿠아 틴트를 깔아야 카드가 그 위에 떠 있는 유리판으로 읽힌다. */
.iv_reco {
	position: relative;
	padding: 100px 0 104px;
	background:
		radial-gradient(54% 62% at 86% 18%, rgba(42,96,104,.07) 0%, rgba(42,96,104,0) 100%),
		radial-gradient(48% 56% at 6% 92%, rgba(194,168,120,.07) 0%, rgba(194,168,120,0) 100%),
		linear-gradient(180deg, #FFFFFF 0%, #F7FAFA 52%, #F1F5F5 100%);
	overflow: hidden;
}
.iv_reco > * { position: relative; z-index: 1; }
.iv_reco__grid {
	display: grid;
	grid-template-columns: minmax(300px, 440px) 1fr;
	gap: 0 78px;
	align-items: center;
}
.iv_reco__desc {
	margin: 24px 0 0;
	font-size: var(--iv-t-txt);
	font-weight: 400;
	line-height: 1.85;
	color: rgba(28,30,26,.62);
	word-break: keep-all;
}
.iv_reco__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}
/* 화이트 유리 카드 — 반투명 화이트 그라디언트 + backdrop blur + 상단 하이라이트.
 * 테두리는 두 겹이다: 바깥 흰 선(빛 받는 면) + inset 아쿠아 실선(유리 두께).
 * backdrop-filter 미지원 브라우저에서도 rgba 배경만으로 카드가 보이도록 색을 잡았다. */
.iv_reco__list li {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	padding: 21px 23px;
	background: linear-gradient(148deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.62) 100%);
	border: 1px solid rgba(255,255,255,.8);
	border-radius: 12px;
	box-shadow:
		0 10px 26px rgba(26,52,56,.06),
		0 2px 6px rgba(26,52,56,.035),
		inset 0 1px 0 rgba(255,255,255,.95),
		inset 0 0 0 1px rgba(42,96,104,.05);
	backdrop-filter: blur(14px) saturate(135%);
	-webkit-backdrop-filter: blur(14px) saturate(135%);
	font-size: var(--iv-t-txt);
	font-weight: 500;
	line-height: 1.6;
	color: var(--iv-ink);
	word-break: keep-all;
}
/* 체크 아이콘 — 아이콘 폰트 없이 두 선분을 회전해 만든다 */
.iv_check {
	flex: 0 0 auto;
	position: relative;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	border-radius: 50%;
	background: rgba(42,96,104,.10);
}
.iv_check::after {
	content: '';
	position: absolute;
	left: 7px;
	top: 4px;
	width: 5px;
	height: 9px;
	border: solid var(--iv-teal);
	border-width: 0 1.8px 1.8px 0;
	transform: rotate(45deg);
}

/* =========================================================================
 * 5. 시술 과정 — 원형 디스크 (형제 페이지와 동일 조형)
 * ========================================================================= */
.iv_process {
	padding: 104px 0 108px;
	background: #F2EEE7 url('/img/antiaging/iv/process_bg.jpg') center center / cover no-repeat;
}
/* 시술 과정 — 좌측 축(2026-08-04, 증상별 솔루션 4종과 동일 규격).
 * 페이지 안 헤더가 전부 가운데 정렬이면 섹션이 바뀌어도 같은 화면으로 읽힌다.
 * eyebrow 가 없는 섹션이라 짧은 골드 라인이 그 자리를 대신한다. */
.iv_process__head { text-align: left; max-width: none; margin: 0 0 56px; }
.iv_process__head::before {
	content: '';
	display: block;
	width: 44px;
	height: 2px;
	margin: 0 0 22px;
	background: linear-gradient(90deg, var(--iv-gold) 0%, rgba(194,168,120,.25) 100%);
}
.iv_process__desc {
	max-width: 760px;
	margin: 22px 0 0;
	font-size: var(--iv-t-body);
	font-weight: 300;
	line-height: 1.82;
	color: rgba(28,30,26,.6);
	word-break: keep-all;
}
.iv_steps {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 20px;
}
.iv_step { position: relative; padding: 0 10px; text-align: center; }
/* 단계 사이 점선 연결선은 사용자 지시로 제거(2026-08-03) — 원만 나열한다 */
.iv_step__disc {
	position: relative;
	display: block;
	width: 180px;
	max-width: 100%;
	margin: 0 auto;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	background: #EDE7DC;
	box-shadow: 0 14px 30px rgba(76,64,44,.16);
	transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease;
}
.iv_step__disc img { width: 100%; height: 100%; object-fit: cover; display: block; }
.iv_step__disc::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,.75);
	/* 2026-08-18 — STEP 04(캘린더)처럼 배경이 흰 컷이 오면 크림 면과 섞여 원의 윤곽이 사라진다.
	   골드 인셋 링을 한 단계 올려(.30 → .42) 어떤 사진이 와도 원형이 읽히게 했다. */
	box-shadow: inset 0 0 0 1px rgba(194,168,120,.42);
	pointer-events: none;
}
.iv_step:hover .iv_step__disc {
	transform: translateY(-5px);
	box-shadow: 0 20px 38px rgba(76,64,44,.24);
}
.iv_step__no {
	margin-top: 22px;
	display: block;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 3.4px;
	text-transform: uppercase;
	color: var(--iv-gold);
}
.iv_step__name {
	display: block;
	margin: 10px 0 0;
	font-weight: 600;
	font-size: var(--iv-t-lead);
	line-height: 1.44;
	letter-spacing: -.7px;
	color: var(--iv-ink);
	word-break: keep-all;
}

/* =========================================================================
 * 6. 차별화 진단 시스템 — 형제 페이지와 완전히 동일 (사용자 지시)
 * ========================================================================= */
.iv_diag {
	position: relative;
	padding: 104px 0 110px;
	background:
		radial-gradient(64% 58% at 18% 10%, rgba(194,168,120,.13) 0%, rgba(194,168,120,0) 64%),
		radial-gradient(58% 54% at 86% 88%, rgba(59,88,67,.08) 0%, rgba(59,88,67,0) 66%),
		linear-gradient(180deg, #FFFFFF 0%, #FBF8F2 100%);
	overflow: hidden;
}
.iv_diag__head { text-align: center; max-width: 1000px; margin: 0 auto; }
.iv_diag__desc {
	margin: 22px 0 0;
	font-size: var(--iv-t-body);
	font-weight: 300;
	line-height: 1.82;
	color: rgba(28,30,26,.6);
	word-break: keep-all;
}
.iv_diag__label {
	margin: 54px 0 22px;
	text-align: center;
	font-size: var(--iv-t-lead);
	font-weight: 700;
	color: var(--iv-ink);
}
.iv_diag__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
/* 크림 단색 카드 → 반투명 유리(2026-08-05 사용자 요청 · wrinkle/pigment/lifting 과 동일 규격).
 * ⚠ 불투명도(.58)를 더 올리면 유리감이 사라지고 그냥 흰 카드가 된다. */
.iv_dev {
	position: relative;
	padding: 0 0 26px;
	background: rgba(255,255,255,.58);
	-webkit-backdrop-filter: blur(18px) saturate(1.3);
	backdrop-filter: blur(18px) saturate(1.3);
	border: 1px solid rgba(255,255,255,.9);
	border-radius: 12px;
	box-shadow: 0 14px 36px rgba(28,30,26,.09), inset 0 1px 0 rgba(255,255,255,.95);
	overflow: hidden;
	text-align: center;
	transition: background .5s ease, box-shadow .5s ease;
}
.iv_dev:hover {
	background: rgba(255,255,255,.74);
	box-shadow: 0 20px 46px rgba(28,30,26,.13), inset 0 1px 0 #fff;
}
.iv_dev__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: rgba(233,229,220,.55);   /* 이미지 로드 전 폴백 — 유리 톤에 맞춰 반투명 */
	border-radius: 8px 8px 0 0;
}
.iv_dev__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.iv_dev__name {
	display: block;
	margin: 24px 0 0;
	font-weight: 700;
	font-size: 21px;
	letter-spacing: -.6px;
	color: var(--iv-ink);
}
.iv_dev__txt {
	margin: 10px 24px 0;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.68;
	color: rgba(28,30,26,.58);
	word-break: keep-all;
}

/* =========================================================================
 * 7. 4대 강점 배너 — 형제 페이지와 동일 (원본 폰트 크기 32 / 13 유지 → 2026-08-10 설명문만 16px 로 상향)
 * ========================================================================= */
/* ⚠ 2026-08-10 — 제목(국내최대크기·전용회복공간…)을 걷어내고 문장만 남겼다(사용자 원고).
 *   제목 32px 이 빠진 만큼 ① 문장을 16→19px 로 키우고 ② 항목 사이에 세로 헤어라인을 넣는다.
 *   ※ 증상별 솔루션 4형제 + 항노화 3형제 **7개 페이지 공통 규격**이니 한쪽만 바꾸지 말 것. */
.iv_merit {
	padding: 66px 0 70px;
	background: #EFECE4 url('/img/antiaging/iv/cat_bg.jpg') center center / cover no-repeat;
}
.iv_merit__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.iv_merit__item { position: relative; padding: 0 30px; text-align: center; }
/* 칸 사이 구분선 — 첫 칸 왼쪽에는 붙지 않는다(인접 형제 선택자) */
.iv_merit__item + .iv_merit__item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 1px;
	height: 64px;
	transform: translateY(-50%);
	background: rgba(28,30,26,.14);
}
/* 2026-08-11 가독성 상향(사용자 지시) — 19→21.5px / 500→600. 7개 페이지 공통 규격 */
.iv_merit__item p {
	margin: 0;
	font-size: 21.5px;
	font-weight: 600;
	line-height: 1.7;
	letter-spacing: -.4px;
	color: rgba(28,30,26,.74);
	word-break: keep-all;
}

/* =========================================================================
 * 반응형
 * ========================================================================= */
@media all and (max-width: 1440px) {
	.iv { --iv-t-h1: 42px; --iv-t-h2: 36px; --iv-t-card: 24px; }
	.iv_reco__grid { gap: 0 52px; }
	.iv_step__disc { width: 164px; }
}

@media all and (max-width: 1200px) {
	.iv { --iv-t-h1: 38px; --iv-t-h2: 33px; --iv-t-lead: 18px; --iv-t-body: 17px; }
	.iv_hero { min-height: 430px; padding: 100px 0 96px; }
	.iv_intro, .iv_reco { padding: 84px 0 88px; }
	.iv_menu, .iv_process, .iv_diag { padding: 84px 0 88px; }
	.iv_menu__list { max-width: none; }
	.iv_reco__grid { grid-template-columns: 1fr; gap: 40px 0; }
	.iv_steps { grid-template-columns: repeat(2, 1fr); gap: 34px 16px; }
	.iv_step__disc { width: 156px; }
}

@media all and (max-width: 1024px) {
	.iv_flow { grid-template-columns: 1fr; gap: 18px; }
	.iv_diag__grid { grid-template-columns: 1fr 1fr; }
	/* 2열에서는 왼쪽 칸(1·3번째)의 구분선을 지운다 — 남기면 섹션 좌측에 선이 뜬다 */
	.iv_merit__grid { grid-template-columns: 1fr 1fr; gap: 32px 0; }
	.iv_merit__item:nth-child(2n+1)::before { display: none; }
	/* 2열은 유지하되 블록 안쪽 여백을 줄인다(768↓ 에서 1열로 내려간다) */
	.iv_card { padding: 34px 30px 36px; }
}

@media all and (max-width: 768px) {
	.iv { --iv-t-h1: 29px; --iv-t-h2: 26px; --iv-t-card: 21px; --iv-t-lead: 17px; --iv-t-body: 16px; --iv-t-txt: 15px; }
	/* 좁은 폭에서 어절 중간이 갈리지 않게 페이지 루트에 한 번만 건다(항노화 3종 공통 처리) */
	.jdh_sub.iv { word-break: keep-all; }
	.iv .iv_inner { padding: 0 24px; }
	.iv .iv_eyebrow { font-size: 14px; letter-spacing: 3.6px; }

	.iv_hero { min-height: 330px; padding: 72px 0 68px; }
	.iv_hero__eyebrow { font-size: 15px; }
	.iv_hero__desc { font-size: 15px; }
	.iv_hero__desc br { display: none; }

	.iv_intro, .iv_reco { padding: 62px 0 66px; }
	.iv_hl { padding: 62px 0 66px; }
	.iv_hl::before { font-size: 210px; }
	.iv_hl__title { font-size: 25px; }
	.iv_hl__list { margin-top: 28px; gap: 12px; }
	.iv_hl__list li { gap: 11px; padding: 17px 24px; font-size: 17px; }
	.iv_hl__list i { width: 15px; height: 9px; }

	.iv_menu, .iv_process, .iv_diag { padding: 62px 0 66px; }
	.iv_menu__head { margin-bottom: 32px; }
	.iv_process__head { margin-bottom: 36px; }
	.iv_process__head::before { width: 34px; margin-bottom: 16px; }
	/* 2열을 유지할 폭이 없다 — 1열로 세우고, 열을 나누던 세로 구분선도 지운다 */
	.iv_menu__list { grid-template-columns: 1fr; }
	.iv_card { padding: 30px 2px 32px; }
	.iv_card:nth-child(even) { padding-right: 2px; border-left: 0; }
	.iv_card__txt  { margin-top: 16px; }
	.iv_card__tags { margin-top: 16px; }

	.iv_reco__list { grid-template-columns: 1fr; }

	/* 2026-08-12 — 진행 단계를 **가로 스와이프**로. 480 이하에서 쓰던 1열은 화면 하나를 먹었다.
	 * 번호가 붙은 순서형이라 옆으로 넘기는 흐름과 맞다(솔루션·줄기세포·부스터와 같은 처리).
	 * ⚠ 음수 마진(-24px)은 .iv_inner 의 좌우 패딩과 짝이다(480 이하는 18px → 아래 블록에서 다시 잡는다). */
	.iv_steps {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 62%;
		gap: 0 12px;
		margin: 0 -24px;
		padding: 0 24px 14px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scroll-padding-left: 24px;
		-webkit-overflow-scrolling: touch;
	}
	.iv_steps::-webkit-scrollbar { height: 3px; }
	.iv_steps::-webkit-scrollbar-track { background: rgba(60,68,78,.10); border-radius: 999px; }
	.iv_steps::-webkit-scrollbar-thumb { background: rgba(60,68,78,.34); border-radius: 999px; }
	.iv_step { padding: 0 4px; scroll-snap-align: start; }
	.iv_step__disc { width: 132px; }
	.iv_step__no { margin-top: 16px; }

	/* 진단 3종도 같은 이유로 가로 스와이프(1열 세로 나열은 1,000px 을 넘었다) */
	.iv_diag__grid {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 82%;
		gap: 12px;
		margin: 0 -24px;
		padding: 0 24px 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 24px;
		-webkit-overflow-scrolling: touch;
	}
	.iv_diag__grid::-webkit-scrollbar { height: 3px; }
	.iv_diag__grid::-webkit-scrollbar-track { background: rgba(60,68,78,.10); border-radius: 999px; }
	.iv_diag__grid::-webkit-scrollbar-thumb { background: rgba(60,68,78,.34); border-radius: 999px; }
	.iv_diag__grid > * { scroll-snap-align: center; }
	.iv_diag__label { margin: 38px 0 18px; }

	.iv_merit { padding: 50px 0 54px; }
	.iv_merit__item { padding: 0 16px; }
	.iv_merit__item p { font-size: 19px; }
}

@media all and (max-width: 480px) {
	.iv { --iv-t-h1: 25px; --iv-t-h2: 23px; }
	.iv .iv_inner { padding: 0 18px; }
	.iv_hero { min-height: 280px; padding: 58px 0 56px; }
	/* 가로 스와이프는 위 768 블록이 담당한다 — 여기서는 .iv_inner 패딩(18px)에 맞춰
	   음수 마진만 다시 맞춘다(어긋나면 첫 칸이 본문 축에서 밀린다). */
	.iv_steps,
	.iv_diag__grid { margin: 0 -18px; padding: 0 18px 14px; scroll-padding-left: 18px; }
	.iv_step__disc { width: 150px; }
	/* 2열에서는 문장이 두세 단어씩 끊긴다 → 1열로 풀고 세로 구분선도 없앤다 */
	.iv_merit__grid { grid-template-columns: 1fr; gap: 20px 0; }
	.iv_merit__item { padding: 0; }
	.iv_merit__item + .iv_merit__item::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.iv_card,
	.iv_card::before { transition: none; }
	.iv_card:hover { transform: none; }
}