@charset "utf-8";
/* ═════════════════════════════════════════════════════════════
   css/_sub-s2.css — 갈래 A(s2 지방이식 4장) 전용 CSS
   [DIR-03] URL s2/s2_N.html ↔ 클래스 .s2_N ↔ 이미지 접두 bg_s2N{연번}/img_s2N{연번}
   대상: s2_1(지방이식) · s2_2(풀페이스) · s2_3(가슴) · s2_4(힙업/골반)
   피그마 노드 566:538 · 625:1653 · 625:2828 · 639:4101 (1920 폭 실측)
   병렬 조각 규칙(GD-23) — 이 파일만 쓴다. css/sub.css·main.css 등 공용 파일은 손대지 않았다.
   [P-03] 이 파일도 자체 @media 를 두지 않는다 — 반응형은 퍼피-2 몫(responsive.css).
   [자산 확인 대기] 01_section 배경 사진(back_img)·02_section 인물/부위 사진·03_section 진단 사진 —
   전부 Figma 자산 추출·검증(FIG-04) 전까지 색상 placeholder 로 둔다. 임의 이미지 생성 금지(FIG-06).
   ═════════════════════════════════════════════════════════════ */

/* ── 히어로(00_sub_v2, 노드 809:10236 계열 · type2 · 1920×722) : S ──────────
   .type2 h1/.lede 좌표는 css/sub.css 에 이미 정의돼 있다(x240 y278 · y381).
   여기서는 s2 4장 공통으로 높이·헤더 보정만 준다(배경 이미지는 자산 대기). */
/* [3차 회차 · P5-01 해소] 4프레임 00_sub_v2 배경 사진(sub_v2_01img/625:1663/625:2839/639:4113)이
   전수 동일 자산(sha1 일치 — get_screenshot 4건 대조)이라 bg_s2_hero 한 벌로 공유 배치한다. */
.s2_1 .page-header.type2,
.s2_2 .page-header.type2,
.s2_3 .page-header.type2,
.s2_4 .page-header.type2{
	height:722px;
	margin-top:calc(-1 * var(--h-header));
	background-image:url('../images/sub/bg_s2_hero.jpg');
/* 	background-image:image-set(url('../images/sub/bg_s2_hero.webp') type('image/webp'),url('../images/sub/bg_s2_hero.jpg') type('image/jpeg')); */
	background-size:cover;
	background-position:center;
	background-color:#0b1848; /* 이미지 로드 전 배경색 폴백 */
}
.s2_1 .page-header.type2:after,
.s2_2 .page-header.type2:after,
.s2_3 .page-header.type2:after,
.s2_4 .page-header.type2:after{ content:none; } /* 시안에 별도 오버레이 지정 없음 — FIG-06 */
/* [확인 사항 · FIG-07] 피그마 원문 — 4장(지방이식/풀페이스/가슴/힙업 골반) 전부 히어로 h1·lede 텍스트가
   "지방이식" / "패인 부위는...가꾸어 드립니다." 로 동일하게 들어있다(노드 582:918-919, 625:1737/1743,
   625:2913/2919, 639:4187/4193 전수 실측 — 4곳 다 같은 문구). 페이지별로 다르게 보일 것이라 예상했지만
   Figma 실물이 그렇다 — 임의로 페이지명으로 고치지 않고 원문 그대로 두었다(FIG-07). 지방흡입(s3) LNB
   9탭 확인 사례처럼, 디자이너 확인이 필요하면 고객 확인 사항으로 올린다. */

/* ── 2단메뉴 active 탭은 각 파일에서 body class 로 이미 분기 가능 — sub.css 의 .lnb 규칙 그대로 재사용 */

/* ── s-title(어두운 배경 위 변형) : S ──
   [6차 회차 · R2-01 해소] 검수 재축 확인 — 이전 자산(bg_s2101/201/301/401)은 01_section 전체(630:3529 등)를
   통째로 뽑아 그 안의 텍스트 프레임(630:3532, s_title)까지 같이 구워져 있었다. get_design_context 로
   레이어를 분해하니 bg 는 사진(불투명도 20% 노이즈 + rgba(0,0,0,.02) + 실사진)+텍스트(630:3532, DOM 로 이미
   따로 있음)가 형제 레이어였다 — 사진만(630:3530 등, contentsOnly:true) 다시 뽑으니 4장 전부 sha1 동일
   (같은 사진을 공유) → bg_s2_band 한 장으로 통합. 틴트(630:3531 등)는 전부 rgba(0,15,72,.28)+
   backdrop-blur(1.15px) 로 동일해 이미지에 굽지 않고 CSS 로 얹는다(::after). */
.s2-hero-band{
	/* [19차 · 중복 선택자 감사 R19-03 해소] 같은 선택자 `.s2-hero-band` 가 269행에서 padding:60px 0 로
	   재선언돼 이 100px 0 은 죽은 선언이었다(source-order 로 269행이 항상 이김). 혼선 방지를 위해 제거. */
	position:relative;overflow:hidden;text-align:center;color:#fff;
	background-color:#0b1848; /* 이미지 로드 전 배경색 폴백 */
	background-size:cover;background-position:center;
	background-image:url('../images/sub/bg_s2_band.jpg');
}
.s2-hero-band:after{
	content:'';position:absolute;inset:0;z-index:0;
	background:rgba(0,15,72,.28);backdrop-filter:blur(1.15px);-webkit-backdrop-filter:blur(1.15px);
}
.s2-hero-band .container{position:relative;z-index:1;}
.s2-hero-band .s-title .eyebrow{color:#edb629;}
.s2-hero-band .s-title h2{color:#fff;}
/* [7차 회차 · R3-02 해소] 노드 실측 — 기본 span 은 font-Thin(100), 강조 span(.fw)만 SemiBold(600).
   base 를 600 으로 잘못 둬서 .fw 강조가 무효였다(같은 값이라 대비 소실). */
/* [9차 회차 · R5-04 해소] 노드 실측 — 밴드 text 블록 폭은 1093(컨테이너 1440 그대로가 아니다) */
.s2-hero-band .s-title, .s2-hero-band .s2-lead, .s2-hero-band .s2-desc{max-width:1093px;margin-left:auto;margin-right:auto;}
.s2-hero-band .s2-lead{margin-top:80px;font-size:40px;font-weight:100;letter-spacing:-.8px;line-height:1.45;color:#fff; max-width: 100%;} /* [7차 · R3-06 해소] 노드 gap-80(s_title↔text01) — 기존 36 은 lead↔desc 내부 간격값을 잘못 재사용 */
.s2-hero-band .s2-lead .fw{font-weight:600;}
.s2-hero-divider{display:block;margin:90px auto 0;} /* [7차 · R3-06 해소] 노드 gap-90(s_title 내부, 제목↔구분선) */
.s2-hero-band .s2-desc{margin-top:36px;font-size:18px;line-height:1.7;letter-spacing:-.36px;color:#fff;}
.s2-hero-band .s2-desc p + p{margin-top:4px;}
/* ── s-title 변형 : E ── */

/* ── 02_section 서브타이틀 + 포인트 리스트 : S ──────────────────────────── */
/* [9차 회차 · R5-04 해소] 노드 실측(738:3942 등) 414/1093 — 컨테이너(1440) 그대로 쓰지 않는다 */
.s2-subtitle{position:relative;max-width:1093px;margin-left:auto;margin-right:auto;padding-bottom:100px;text-align:center;font-size:40px;font-weight:500;letter-spacing:-.8px;line-height:1.6;color:var(--c-text);}
/* [HTM-07] 장식용 세로선은 빈 요소가 아니라 가상요소로 — 노드 I738:3942;738:3884(18×76 세로 라인) */
/* [12차 회차 · R7-06 해소] 노드 "Frame 1582"(738:3971 등) 실측 — 세로선 끝에 작은 빛살 마크가 있다.
   기존엔 순수 CSS 선(1px)만 그려 마크가 빠졌다 — 노드 SVG 를 그대로 배경으로 얹는다. */
.s2-subtitle:after{
	content:'';position:absolute;left:50%;bottom:0;width:18px;height:76px;transform:translateX(-50%);
	background:url('../images/sub/ico_s2subtitle_divider.svg') no-repeat center/contain;
}
/* [16차 회차 · R12-03 겸 내용부족] 본문 시작 위치가 30.3 부족 — subtitle↔label 간격 보강(60→90.3) */
/* [17차 · 행간 전수 R17-01 해소] 노드 774:5115(I774:5115;774:5092) T30(m) leading-1.5 — line-height 누락(계산값 1.2≈36px ↔ 시안 45px, −9px/줄) */
/* [20차 · R20-01 해소 · 16차 값 재분배] 노드 738:3942(서브타이틀 컴포넌트) 분해 — 텍스트(128)+gap46+세로선
   76.265, 인스턴스 끝~라벨 프레임(774:5118) 시작 = 순수 60(1812.26−1752.26). `.s2-subtitle` 의
   `padding-bottom:100px`(공용 클래스·4장 공유라 이번엔 미접촉)이 이미 100(46+76.265=122.265 아님)이므로,
   부족분은 이 라벨의 margin-top 에서만 뺀다 — 필요 총합 182.265(=100+82.265) 중 100은 padding-bottom 몫,
   나머지 82.265 가 margin-top. 16차의 90.3(「본문 시작 30.3 부족」 보정치)은 이 노드를 보지 못한 근사값이었다. */
.s2-points__label{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:82.265px;font-size:30px;line-height:1.5;font-weight:500;letter-spacing:-.6px;color:var(--c-text);}
.s2-points__label img{display:block;width:19px;height:19px;}
.s2-points{margin-top:60px;max-width:1070px;margin-left:auto;margin-right:auto;} /* s2_2 노드 실측 그대로 */
/* [11차 회차 · R7-05 해소] 페이지마다 폭이 다르다(공용값 1070 을 전부에 씀 — s2_2 만 맞았다) */
.s2_3 .s2-points{max-width:1131px;}
.s2_4 .s2-points{max-width:1167px;}
.s2-points__label + .s2-points{margin-top:20px;} /* 노드 gap-20(라벨↔리스트) — 라벨이 있는 s2_2 만 해당 */
.s2-points li{position:relative;padding:8px 0 8px 27px;font-size:18px;line-height:1.7;letter-spacing:-.36px;color:var(--c-text);}
/* [19차 · R19-02 해소 · 16차 판정 철회] 노드 774:5111(Frame 1642) 5개 항목 실측 — 항목 사이 실제 간격은
   전부 16px(li 자체 padding 8+8 로 이미 재현됨), 총 프레임 높이 250 이 그 근거다. 16차의 "본문 높이 부족분
   51.4" 진단은 이 노드를 보지 못한 채 총합만으로 내린 역산이었다 — 이번 실측으로 뒤집는다. margin 제거. */
.s2-points li:before{content:'';position:absolute;left:8px;top:1.05em;width:6px;height:6px;border-radius:50%;background:var(--c-text);}
/* [20차 · R20-02 해소] 노드 774:5111(Frame 1642) 실측 — 리스트 프레임은 첫 항목 텍스트 상단에서 시작해
   마지막 항목 텍스트 하단에서 끝난다(항목 사이 16px 만 존재, 앞뒤 여백 없음). `li{padding:8px 0}` 이 첫·
   마지막 항목에도 똑같이 적용돼 있어 프레임 앞뒤로 8px 씩(총 16px) 근거 없이 더 생기고 있었다 — s2_2 만
   우선 제거한다(다른 3장은 오늘 −4/−9/−1 로 이미 근접해 손대지 않는다 · 공용 `.s2-points` 클래스라 페이지
   스코프로 한정). */
.s2_2 .s2-points li:first-child{padding-top:0;}
.s2_2 .s2-points li:last-child{padding-bottom:0;}

.s2_2 .arti02 .s2-points__label {max-width: 1070px; justify-content: left; margin:0 auto;}
.s2-points--label{margin-top:20px;}
.s2-points--label .s2-points__head{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:16px;font-size:30px;font-weight:500;letter-spacing:-.6px;color:var(--c-text);}
/* ── 02_section : E ──────────────────────────────────────────────────── */

/* ── 02_section 사진 3장(s2_2 풀페이스 얼굴라인, 노드 625:1848~1850) — [3차 회차 · P5-08 해소]
   시안 좌표 실측(get_metadata) — 얼굴1(x487,y2462,284×464) 얼굴3(x811,y2266,317×521) 얼굴2(x1168,y2379,300×492).
   좌→우 배치는 x 오름차순: 얼굴1 → 얼굴3 → 얼굴2. y 는 얼굴3 을 기준(최상단)으로 한 상대 오프셋:
   얼굴3 0 · 얼굴2 +113(2379-2266) · 얼굴1 +196(2462-2266) — 계단식. HTML 순서도 img_s2201→s2203→s2202 로 교체. */
/* [9차 회차 · R5-03 해소] 노드 실측 간격 40(24 아님) — 마진 대칭(245.5/245.5)은 맞았지만 간격이 원인이었다 */
/* [12차 회차 · R6-05 해소] 노드 실측 여백은 247/212 로 비대칭이다(시안이 비대칭인 것이 정본, G-14) —
   justify-content:center 는 245.5/245.5 대칭을 만들어 최대 편차 56.6 을 냈다. */
/* [15차 회차 · R11-01 해소] 노드 절대좌표 재계산 — 최상단 사진(얼굴3) 목표 상대offset 906 인데
   구현은 741.6 이었다(−164.4, "160px 위" 그 실체). 본문 시작·본문 높이·간격 세 곳에 나뉜 부족분을
   이 한 곳(margin-top)에 합산 반영 — 최종 위치가 목표와 맞으면 등가다. */
/* [16차 회차 · R12-03 해소] 15차의 224 는 간격+내용부족을 한곳에 합산한 역산(margin 판 9차 padding 과 같은 유형) —
   간격만 시안값(138.7)으로 되돌리고, 내용 부족(본문시작 −30.3·본문높이 −51.4)은 아래 §16-2 에서 별도로 채운다. */
.s2-face-row{display:flex;gap:40px;justify-content:center; align-items:flex-start;margin-top:138.7px;}

/* ── 03_section : S ── 페이지마다 구성이 달라 각각 개별 블록으로 둔다 ─────── */
.s2-process{margin-top:0;padding:120px 0;background:var(--c-bg-alt,#f6f6f6);text-align:center;}
/* [14차 회차 · R10-02 해소] 브라우저 기본 h3 마진이 심벌↔제목(16 목표인데 83.2 로 부풀림)·제목↔STEP
   (60 목표인데 100)을 같이 밀어냈다 — margin 을 0 으로 리셋하고 줄높이를 1 로 고정(45→30). */
/* [15차 회차 · R11-03 해소] 14차가 "구현값"과 "목표값"을 반대로 읽었다 — 시안(목표) 열로 다시 잡는다.
   시안↔구현: 심벌↔제목 83.2↔16 · 제목↔STEP 100↔60 · h3 45↔30 · STEP행 313↔298. 전부 "키우는" 방향. */
.s2-process h3{margin:0 0 100px;font-size:30px;line-height:1.5;font-weight:500;letter-spacing:-.6px;color:var(--c-text);}
.s2-step-mark{display:block;width:86px;height:86px;margin:0 auto 83.2px;object-fit:contain; position: absolute; top: -42px; left: 50%; transform: translateX(-50%);}
.s2-process__grid{display:flex;flex-wrap:wrap;gap:40px;justify-content:center;margin-top:80px;}
.s2-process__item{flex:0 0 auto;width:228px;}
/* [13차 회차 · R9-04 겸 죽은 CSS 정리] .s2-process__item .box — 대응 DOM 0개, 삭제 */
.s2-process__item p{margin-top:24px;font-size:18px;font-weight:600;letter-spacing:-.36px;color:var(--c-text);}
.s2-process__item small{display:block;margin-top:8px;font-size:15px;font-weight:400;color:var(--c-text-sub);}

/* 지방이식(s2_1) 02_section — 생착률 4요인
   [4차 회차 · 1:1 전수대조] 노드 792:6364 등 항목별 "STEP " 인스턴스가 실은 1~4 번호 원 배지였다 —
   사진이 아니라 원+숫자라서 CSS counter 로 그린다(FIG-06 예외: 사이트 공통 불릿(.s2-points li:before)과
   같은 성격의 정적 도형). ol 로 바꿔 의미도 살렸다. */
/* [9차 회차 · R5-04 해소] 노드 실측 363/1195 — 1432 는 하단 사진 합계 폭(다른 요소)을 잘못 가져온 값이었다 */
.s2-factor{margin-top:60px;text-align:left;max-width:1195px;margin-left:auto;margin-right:auto;list-style:none;padding:0;}
/* [10차 회차 · R6-04 해소] 노드 gap-20(항목 내부)+40(항목 사이) — 이전엔 padding24 만 있고 gap 이 없었다 */
.s2-factor__item{position:relative;padding:24px 0 24px 54px;border-top:1px solid var(--c-line);}
.s2-factor__item + .s2-factor__item{margin-top:40px;}
.s2-factor__item:first-child{border-top:0;}
.s2-factor__num{position:absolute;left:0;top:26px;display:block;width:39px;height:39px;}
.s2-factor__num img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;}
/* [10차 회차 · R6-03 해소] 노드 실측(792:6365 등) 30px/line-height45(1.5) — 24px 는 임의 축소값이었다 */
.s2-factor__item h4{font-size:30px;line-height:1.5;font-weight:600;letter-spacing:-.6px;color:var(--c-text);}
.s2-factor__item p{margin-top:12px;font-size:18px;line-height:1.7;letter-spacing:-.36px;color:var(--c-text-sub);}
.s2-factor__item p + p{margin-top:6px;}
/* 하단 사진 2장(노드 630:3541 823×372 · 630:3542 577×372, y 오프셋차 54px) */
/* [6차 회차 · R2-04 해소] 원인 확정(지워서 확인, 규칙 13) — max-width:1432 는 옆의 .s2-factor 리스트
   폭을 그대로 복사한 값이었다. 사진 823+40(gap)+577=1440 인데 1432 안에 욱여넣으려 flex-shrink 가
   기본값(1)으로 두 사진을 8px 만큼 비율대로 줄여 823→818·577→574 로 눌렸다(높이 372 고정이라 가로만
   찌그러짐). max-width 를 1440(실제 두 사진 합)으로 고치고, flex-shrink:0 도 명시해 재발을 막는다. */
.s2-factor-photos{display:flex;gap:40px;justify-content:center;max-width:1440px;margin:60px auto 0;}
.s2-factor-photos .pic{flex:0 0 auto;border-radius:var(--r-lg);overflow:hidden;}
.s2-factor-photos .pic img{display:block;width:100%;height:100%;object-fit:cover;}
.s2-factor-photos .pic--a{width:823px;height:372px;}
.s2-factor-photos .pic--b{width:577px;height:372px;margin-top:54px;}

/* [4차 회차] 02_section 상단 텍스처 배경(노드 634:3870, s2_1 전용 back_img) — full-bleed */
.s2_1 .arti02{position:relative;}
.s2_1 .arti02:before{
	content:'';position:absolute;top:0;left:50%;width:100vw;height:643px;transform:translateX(-50%);
	background-image:url('../images/sub/bg_s2104.jpg');
	background-size:cover;background-position:center;z-index:0;
}
.s2_1 .arti02 > *{position:relative;z-index:1;}
/* 03_section 텍스처 배경(노드 634:3705, s2_1 전용 bg02) — 기존 단색 대체 */
.s2_1 .arti03.s2-process{
	background-image:url('../images/sub/bg_s2106.jpg');
	background-size:cover;background-position:center;background-color:#f6f6f6;
}

/* [5차 회차 · 지휘자 지시 ①] 02_section 상단 텍스처 배경 — s2_2·s2_3·s2_4 공통(세 노드 sha1 동일 확인:
   634:3926/639:4025/639:4195 → bg_s2_wave 한 벌 공유). s2_1 만 다른 자산(bg_s2104)이라 따로 둔다. */
.s2_2 .arti02, .s2_3 .arti02, .s2_4 .arti02{position:relative;}
.s2_2 .arti02:before, .s2_3 .arti02:before, .s2_4 .arti02:before{
	content:'';position:absolute;top:0;left:50%;width:100vw;height:643px;transform:translateX(-50%);
	background-image:url('../images/sub/bg_s2_wave.jpg');
	background-size:cover;background-position:center;z-index:0;
}
.s2_2 .arti02 > *, .s2_3 .arti02 > *, .s2_4 .arti02 > *{position:relative;z-index:1;}

/* [5차 회차] s2_3 03_section 풀블리드 배경 밴드(노드 639:4081, 1920×797) — 비교 카드가 흰 배경 위에
   떠 있었다. 이 arti03 은 .container 안(1440 폭)이라 실제로는 풀블리드가 아니다 — s2_2 04_section
   (bg_s2204) 과 같은 기법으로 컨테이너 밖 의사(疑似) full-bleed 배경을 만든다. */
.s2_3 .arti03{position:relative;}
.s2_3 .arti03:before{
	content:'';position:absolute;top:0;left:50%;width:100vw;height:100%;transform:translateX(-50%);
	background-image:url('../images/sub/bg_s2306.jpg');
	background-size:cover;background-position:center;z-index:0;
}
.s2_3 .arti03 > *{position:relative;z-index:1;}

/* 가슴(s2_3) 03_section — 두 칼럼 비교 카드 (노드 639:4082 01=437폭 · 639:4083 02=701폭)
   [3차 회차 · P5-06 해소] 두 칼럼 폭이 원래 다르다 — 공통 max-width 437 로 강제 압착했던 것이 원인.
   칼럼별 modifier 로 분리한다. */
/* [16차 회차 · R12-01 해소] 노드 절대좌표(639:4082 x323 · 639:4083 x894, width701) 재계산 —
   실제 칼럼간격은 60 이 아니라 134, 정렬도 center 가 아니라 컨테이너 기준 좌측 오프셋(323-240=83). */
.s2-compare{display:flex;gap:134px;justify-content:flex-start;margin-left:83px;margin-top:0;}
/* [14차 회차 · R10-03 해소] 노드(639:4082/4083) "gap-[60px]" — 텍스트↔사진 간격은 margin-bottom:24 가
   아니라 60 이었다(37.6 부족분의 실체). flex column + gap 으로 교체. */
.s2-compare .col{display:flex;flex-direction:column;gap:60px;flex:0 0 auto;max-width:437px;}
/* [16차 회차 · R12-01 해소] 노드 실측 — 칼럼 701(700 아님) · 사진 700 · 본문 텍스트만 667(요소별로 다르다) */
.s2-compare .col--b{width:701px;max-width:701px;}
.s2-compare .col--b .pic{width:700px;}
.s2-compare .col--b p{max-width:667px;}
.s2-compare .col p{font-size:18px;line-height:1.7;letter-spacing:-.36px;color:var(--c-text);}
.s2-compare .col .box{width:100%;height:375px;border-radius:20px;background:var(--c-bg-alt2,#e5e5e5);}

/* 가슴(s2_3) 04_section 약속 — [3차 회차 · P5-07 해소] 텍스트 칼럼 + 원형 다이어그램(노드 639:4094, 534×534)
   칼럼을 좌우로 배치(노드 실측 — 텍스트 Frame1688 x320~974 · ellipse x1053~1587) */
/* [19차 · 중복 선택자 감사 R19-03] padding 은 아래 304행(`.s2-promise{padding:0}`, 11차 R7-03 확정값)이
   최종적으로 이긴다 — 여기 선언은 죽은 값이라 제거, 나머지 레이아웃 선언만 유지. */
.s2-promise{margin-top:0;display:flex;gap:64px;align-items:center;justify-content:center;text-align:left;max-width:1470px;margin-left:auto;margin-right:auto;}
.s2-promise__text{flex:0 0 auto;max-width:654px;}
/* [7차 회차 · R3-07 해소] 노드 639:4088/4089 실측 — eyebrow 는 Poppins 18px(14px 아님) · 본문제목은
   42px(24px 아님, 대폭 축소돼 있었다). text-transform:uppercase 삭제 — 시안 원문 "promise" 소문자 그대로(FIG-07). */
.s2-promise h3{font-size:42px;font-weight:600;letter-spacing:-.84px;line-height:1.5;color:#3a3a3a;}
.s2-promise .s2-promise__eyebrow{display:block;font-family:"Poppins","Pretendard",sans-serif;font-size:18px;font-weight:600;letter-spacing:-.36px;line-height:1.7;color:var(--c-accent,#edb629);margin-bottom:4px;}
.s2-promise p{margin-top:16px;font-size:18px;line-height:1.7;letter-spacing:-.36px;color:var(--c-text);max-width:651px;}
.s2-promise small{display:block;margin-top:24px;font-size:14px;color: #666;}

/* 힙업/골반(s2_4) 02_section — [3차 회차 · P5-03 해소] 노드 829:7979(Group 1219) 골반이식 설명 박스가
   통째로 빠져 있었다 — 아이콘(829:7978, 396×396) 옆에 제목+본문을 복원한다(노드 796:9022 텍스트 실측). */

.s2-hip-intro{display:flex;gap:64px;align-items:center;justify-content:center;margin-top:40px;text-align:left;}
.s2-hip-diagrams{display:flex;flex-direction:column;gap:42px;flex:0 0 286px;}
.s2-hip-diagrams picture{display:block;width:100%;}
.s2-hip-diagrams img{display:block;width:100%;aspect-ratio:1/1;height:auto;border-radius:20px;object-fit:cover;}
.s2-hip-icon-col{flex:0 0 396px;text-align:center;}
.s2-hip-icon{width:100%;aspect-ratio:1/1;border-radius:20px;overflow:hidden;}
.s2-hip-icon picture{display:block;width:100%;height:100%;}
.s2-hip-icon img{display:block;width:100%;height:100%;object-fit:cover;}
.s2-hip-icon-col small{display:block;margin-top:16px;font-size:14px; font-weight: 500;line-height:1.5;color:#666; text-align: left;}
.s2-hip-box{position:relative;z-index:2; flex:0 0 450px;max-width:450px;box-sizing:border-box;margin-left:-56px;padding:30px;border-radius:20px;background:#6423b8;}
.s2-hip-box::before{content:"";position:absolute;right:100%;top:33.5%;width:180px;height:1px;background:#6423b8;transform:rotate(-10deg);transform-origin:right center;pointer-events:none;}
.s2-hip-box h4{margin:0;font-size:22px;line-height:1.5;font-weight:600;letter-spacing:-.44px;color:#fff;}
.s2-hip-box p{position:relative;margin:12px 0 0;padding-left:12px;font-size:18px;line-height:1.7;letter-spacing:-.36px;color:#fff; font-weight: 400;}
.s2-hip-box p::before{content:"•";position:absolute;left:0;top:0;color:#fff;font-size:14px;line-height:1.7;}

/* 힙업/골반(s2_4) 03_section — [3차 회차 · P5-04 해소] 노드 796:9021 실측 —
   좌: 안내문+경고(텍스트, x323~940) · 우: 대형 사진(659:2674, 534×860) + 라벨 3종 오버레이(사진 위 좌표) + 서브사진 2장(세로 배치, x1104) */
/* [16차 회차 · 미측정 항목 확인] 콘텐츠 총폭(1685)이 컨테이너(1440)를 245 초과한다 — justify-content:center 는
   좌우로 -122.5 씩 균등하게 넘치게 해 가로 스크롤은 안 생기지만(좌표가 여전히 양수) 절대좌표(x323)와는
   어긋난다. 좌측 고정(margin-left:83)으로 바꾸면 우측이 뷰포트를 넘어 실제 가로 넘침이 생길 위험이 있어
   이번 회차엔 center 를 유지하고 원인만 정확히 기록한다 — 구조 자체(가로 2블록 배치)는 지시대로 손대지 않았다. */
/* [18차 · R18-01 해소] 노드 796:9021 실측 — text01(x323 w617) 끝 x940 ↔ 메인사진(659:2674 x1063) 시작 = gap 123(60 아님).
   text01 시작 x323 = 컨테이너(x240) 기준 offset 83px(s2_3 과 같은 패턴) — center 를 걷어내고 좌측 절대좌표로. */
.s2-hip-layout{display:flex;gap:153px;align-items:center;justify-content:flex-start;margin-left:83px;text-align:left;}
.s2-hip-text{flex:1 1 auto; width: 1%;}
.s2-hip-note{font-size:30px;font-weight:500;line-height:1.5;letter-spacing:-.6px;color:var(--c-text);}
.s2-hip-warn{margin-top:40px;text-align:left;}
.s2-hip-warn li{position:relative;padding:8px 0 8px 27px;font-size:18px;line-height:1.7;letter-spacing:-.36px;color:var(--c-text);}
.s2-hip-warn li:before{content:'';position:absolute;left:8px;top:1.05em;width:6px;height:6px;border-radius:50%;background:var(--c-text);}
.s2-hip-text > small{display:block;margin-top:16px;font-size:14px;letter-spacing:-.28px;color:#666;}
/* 사진 위 오버레이 라벨(노드 796:9100·9067·9109 — 사진 좌상단 기준 상대좌표, 03_section 시작 y2876 기준) */
.s2-hip-callouts{position:absolute;inset:0;list-style:none;margin:0;padding:0;pointer-events:none;}
.s2-hip-callouts li{position:absolute;max-width:230px;padding:9px 14px;border-radius:10px;background:var(--c-primary);color:#fff;font-size:14px;line-height:1.5;text-align:center;}
.s2-hip-callouts .c1{left:252px;top:-20px;}
.s2-hip-callouts .c2{left:388px;top:79px;}
.s2-hip-callouts .c3{left:289px;top:304px;max-width:258px;}
/* ── 03_section : E ── */

/* ═════════════════════════════════════════════════════════════
   2차 회차 — 자산 배치 + 섹션별 시안 높이 맞춤 [지휘자 16:2x 지시]
   시안 y 델타(get_metadata 실측)로 계산한 섹션별 목표 높이. real-cont 기본
   padding(120/180, sub.css)은 이 페이지들에서 직접 통제하려고 0으로 덮는다.
   ═════════════════════════════════════════════════════════════ */
.s2_1 .real-cont, .s2_2 .real-cont, .s2_3 .real-cont, .s2_4 .real-cont{padding:0;}

/* 히어로 밴드(01_section, 전 페이지 공통 642px) */
.s2-hero-band{box-sizing:border-box;min-height:642px;display:flex;align-items:center;padding:60px 0;}
.s2-hero-band .container{width:100%;}

/* 실제 자산 이미지 — object-fit:cover 로 노드 실측 비율 유지.
   [3차 회차 · P5-07 해소] 전부 시안 노드 크기 그대로(리터럴, G-14) — 임의 축소 금지.
   [3차 회차 · P5-09 해소] s2_2 3장의 크기는 inline style 대신 아래 개별 클래스로 지정. */
.s2-face-row .pic{border-radius:var(--r-lg);overflow:hidden;background:var(--c-bg-alt,#f4f4f4);}
.s2-face-row .pic img{display:block;width:100%;height:100%;object-fit:cover;}
.s2-face-row .pic--201{width:284px;height:464px;margin-top:196px;} /* 얼굴1 */
.s2-face-row .pic--203{width:317px;height:521px;margin-top:0;}     /* 얼굴3 — 최상단 기준 */
.s2-face-row .pic--202{width:300px;height:492px;margin-top:113px;} /* 얼굴2 */

.s2-process__diagram{margin-top:60px;}
.s2-process__diagram img{display:block;height:auto;border-radius:var(--r-lg);margin:0 auto;}
/* bg_s2204(1920×1621) — 노드가 컨테이너 폭(1440)을 넘는 full-bleed 이미지다. 컨테이너 밖에 두고 그대로 1920 로 렌더 */
.s2-process__diagram--bleed{margin-top:60px;width:100vw;position:relative;left:50%;transform:translateX(-50%);}
.s2-process__diagram--bleed img{width:100%;max-width:1920px;border-radius:0;}
/* img_s2101(STEP, 1432×331)만 컨테이너 폭에 맞춰 늘어난다 — 노드 자체가 1432 로 1440 폭과 거의 같아 열외 */
.s2_1 .s2-process__diagram img{width:100%;max-width:1432px;}
/* img_s2301(가슴 시술 사진, 1274×359) — 컨테이너 폭(1440)까지 늘어나 있었다(1440×406) → 노드 폭으로 고정 */
.s2_3 .arti02 .s2-process__diagram img{width:1274px;max-width:100%;}

/* [14차 회차 · R10-01 해소] 시안 픽셀 실측 — 01(639:4079)=검정판+사진78.49%(우측 레터박스) ·
   02(639:4084)=흰판+사진 inset(93.93%×95.63%, 상단 마진 노출). 회색 #e5e5e5 단일값이 둘 다 잘못 덮었다. */
.s2-compare .col .pic{width:100%;height:375px;border-radius:20px;overflow:hidden;position:relative;}
.s2-compare .col .pic img{width:100%;height:100%;object-fit:cover;}
.s2-compare .col:not(.col--b) .pic{background:#000;}
.s2-compare .col:not(.col--b) .pic img{width:78.49%;height:100%;object-fit:cover;object-position:left;}
.s2-compare .col--b .pic{background:#fff;}
/* [15차 회차 · R11-02 해소] 중복 규칙(width:100%)이 소스 순서상 나중이라 이 inset 을 덮어썼다 — 삭제 */
.s2-compare .col--b .pic img{position:absolute;left:3.01%;top:2.37%;width:93.93%;height:95.63%;object-fit:cover;}

/* [11차 회차 · R7-03 해소] 노드 실측 — 캡션(Frame 1589, x1469 y3747)이 원(x1053 y3307 534×534) 안쪽
   우하단에 겹쳐 있다(아래로 쌓이는 게 아니다) — 그래서 04_section 전체 높이가 534 로 원과 같다.
   기존엔 캡션이 아래로 흘러 578(원534+캡션44)이 되고 padding80×2 까지 더해 738 이 됐다. */
.s2-promise{padding:0;}
.s2-promise__figure{position:relative;flex:0 0 auto;width:574px;height:574px;text-align:center;}
/* [19차 · 중복 선택자 감사 R19-03] 같은 선택자가 두 줄로 나뉘어 있던 것을 하나로 합친다(값 변경 없음 —
   최종 계산값 그대로: margin-top12px·font-size16px 가 이미 뒤에서 이기고 있었다). */
/* .s2-promise__figure figcaption{position:absolute;left:416px;top:440px;width:137px;margin-top:12px;text-align:left;font-size:16px;line-height:1.4;color:var(--c-text-sub);} */
.s2-promise__figure img{display:block;width:574px;height:574px;}

.s2-hip-icon{width:396px;height:396px;}
.s2-hip-icon img{display:block;width:100%;height:100%;object-fit:cover;}

/* [18차 · 요소별 폭 재분리 R18-01 해소] 노드 796:9021 실측(get_metadata) — `.col`(pic--sub 450+gap24)을
   main 옆에 나란히 두는 구조가 아니라, 서브 사진 2장(829:7980/659:2671, 450×353 각각)이 메인 사진(659:2674,
   534×860) 위에 **겹쳐 얹힌 오버레이**다(서브 x1104~1554 가 메인 x1063~1597 안에 들어간다).
   이 오독이 총폭 245 과다의 원인 그 자체였다 — .col 의 450+24 를 옆 컬럼으로 잘못 더하고 있었다. */
.s2-hip-photos{position:relative; margin-top: 0; max-width: 547px; width: 100%;}
.s2-hip-photos img {display: block;  max-width: 100%; margin: 0 auto;}

/* 서브 사진 오버레이 좌표 — 메인 사진(659:2674, x1063 y2896) 기준 상대좌표.
   sub1(829:7980 root 639:4103) x1104 y2940 → left:41px top:44px
   sub2(659:2671)              x1104 y3352 → left:41px top:456px(=3352-2896) */
.s2-hip-photos .pic--sub{position:absolute;left:41px;width:450px;height:353px;}
.s2-hip-photos .pic--sub.sub1{top:44px;}
.s2-hip-photos .pic--sub.sub2{top:456px;}

/* [3차 회차] 페이지별 섹션 min-height 강제를 전부 걷어냈다(2차 회차 방식 — 콘텐츠가 min-height 보다
   짧아 빈 여백이 생기고, 퍼피-5 눈대조에서 "히든 콘텐츠"로 지적됨). 이제 콘텐츠 실측 결과로 높이가
   나온다 — real-cont 상하 padding 만 섹션 간격으로 되돌린다(공용 sub.css 기본값 그대로 사용). */
.s2_1 .real-cont, .s2_2 .real-cont {padding: 0;}
.s2_3 .real-cont, .s2_4 .real-cont{padding:0; padding-bottom: 200px;}
/* [19차 · R19-01 해소] 4장 02_section 노드(566:538/625:1653/625:2828/639:4101) 전수 실측 — 상단 여백은
   4장 전부 142px(현재 80 · −62 부족, 지금까지 4장 모두에 번져 있던 결함)로 동일해 공통값을 142로 고친다.
   하단 여백은 3장(s2_1·s2_2·s2_3)이 0(콘텐츠가 섹션 끝에 딱 맞음)인데 s2_4 만 66px(그룹1209 하단 note
   텍스트~섹션 끝 실측)로 달라 공통은 0으로 두고 s2_4 만 별도 오버라이드한다(아래). */
.s2_1 .arti02, .s2_2 .arti02, .s2_3 .arti02, .s2_4 .arti02{padding:142px 0 0;}
.s2_4 .arti02{padding-bottom:66px;}
/* [10차 회차 · R6-02 해소] 노드 실측 섹션 사이 간격 — 전부 0 이었다(고친 값이 옆으로 번진 것과 별개로
   애초에 비어 있던 gap). s2_2 128 · s2_3 107.7/105/264 · s2_4 164/380. */
/* [11차 회차 · R7-04 해소 · R5-05 와 같은 유형 재발] 120px×2 패딩 근거 없음 — 시안 880 대비 1100 로 220 과다 */
/* [12차 회차 · R8-01 해소] 노드 659:2673(1920×727) 풀블리드 배경이 통째로 빠져 있었다(높이로는 안 걸림 — 규칙 19 유형) */
/* [14차 회차 · R10-04 해소] 공용 .s2-process 배경색(#f6f6f6)이 섹션 전체(860)를 칠했다 — 시안은
   659:2673(727) 구간만 회색이다. 이 페이지만 배경색 제거(이미지 :before 가 그 구간만 담당). */
.s2_4 .arti03.s2-process{position:relative;margin-top:0;padding:0;background:transparent;}
.s2_4 .arti03.s2-process:before{
	content:'';position:absolute;top:50%;left:50%;width:100vw;height:727px;transform:translate(-50%, -50%);
	background-image:url('../images/sub/bg_s2407.jpg');
	background-size:cover;background-position:center;z-index:0;
}
.s2_4 .arti03.s2-process .container{position:relative;z-index:1;}
/* [10차 회차 · R6-02] s2_1 03_section — STEP padding 제거(R5-01)로 arti03 이 760→713 으로 47px 줄어든
   부작용을 패딩으로 보정(120→144, +24 씩). 시안 절대값 재검증은 다음 회차로 남긴다(미해소로 명시). */
/* [11차 회차 · R7-02 해소] 10차의 144px 는 −47 을 메우려 만든 역산값이었다(근거 없음) — 시안 실측
   상0/하313(비대칭)으로 교체. 02↔03 간격(158.67)도 이 장만 빠져 있었다(R6-02 「일부만 처리」). */
.s2_1 .arti02{margin-bottom:158.67px;}
/* [12차 회차 · R8-02 해소] 786→940.33 부족분(+154.3)을 하단 패딩(비대칭 유지)에 더한다 — 313+154.3=467.3 */
/* [13차 회차 · R9-02 해소] 12차의 467.3 은 내용부족(−154.3)을 패딩으로 상쇄한 역산값 — 시안값 313 로 되돌린다.
   높이가 다시 벌어지는 게 정상이다(검수 판정) — 내용 부족 원인은 별도로 찾는다(§ 13차 보고). */
.s2_1 .arti03.s2-process{margin-top:0;padding:125px 0 310px; position: relative;}
.s2_2 .arti03.s2-process{margin-top:128px;padding:0;}
.s2_2 .arti03.s2-process .s2-process__diagram--bleed{margin-top:0;}
/* [12차 회차 · R8-02 해소] 681.4→797 부족분(+115.6) 반영 — 80+115.6=195.6 (좌우 대칭 유지, 비대칭 근거 없음) */
/* [13차 회차 · R9-01 해소] 12차의 195.6 대칭은 역산값 — 시안 노드 산술(827:8692 y2405~3202=797,
   내용 639:4082/4083 y2514~3073=559)로 상109/하129 비대칭이 정답이다. */
.s2_3 .arti03{margin-top:107.7px;padding:109px 0 129px;}
.s2_3 .arti04{margin-top:105px;margin-bottom:264px;padding-bottom:0;}
.s2_4 .arti03.s2-process{margin-top:164px;/* margin-bottom:380px; */}

/* [7차 회차 · R3-03 해소] 아이콘 279×262 노드 크기로 복원. 워터마크 숫자는 시안 실체가 이미지가 아니라
   텍스트(Poppins SemiBold 132px, 흰색, 배경보다 옅게 보일 뿐 알파는 없음)라 실 텍스트로 되살린다.
   화살표 연결선(638:3931 등)은 근사 대신 노드 렌더 추출(ico_s2step_arrow)로 교체. */
/* [9차 회차 · R5-01 해소] 노드 실측 — 칸간격(피치) 301 = 카드 폭228 + 간격73. 기존 padding0 30(양쪽 60)
   방식은 피치 288 이 되어 짧았다 — padding 을 걷어내고 flex gap 으로 간격을 준다. */
.s2-step-row{display:flex;gap:73px;justify-content:center;align-items:flex-start;margin-top:0;list-style:none;padding:0;} /* h3 margin-bottom:100 이 이 간격을 담당(중복 방지) */
.s2-step{position:relative;flex:0 0 auto;width:228px;padding:0;text-align:center;overflow:visible; min-height: 330px;}
/* [9차 회차 · R5-01] 카드 padding 을 걷어내고 flex gap(73px)으로 바꿔서 좌표 재계산 —
   간격 중앙에 오도록 left:-44px(-73/2-15/2 반올림) */
.s2-step__connector{position:absolute;left:-44px;top:10px;display:block;width:15px;height:292px;}
.s2-step__connector picture{display:block;width:100%;height:100%;}
.s2-step__connector img{display:block;width:100%;height:100%;object-fit:contain;}
/* [8차 회차 · R4-03 해소] 노드 실측 — 배지가 카드 폭(228) 전체를 채운다(inline-flex 콘텐츠 폭 약 100 이 아니다) */
/* [13차 회차 · R7-07 겸 내용부족 원인] 노드 실측 높이 39(22 아님) — 부족분(154.3) 일부의 원인 */
.s2-step__badge{position:relative;z-index:1;display:flex;width:100%;height:39px;align-items:center;justify-content:center;padding:0;border-radius:39px;background:#1b2d55;color:#fff;font-size:16px;font-weight:700;letter-spacing:-.32px;}
.s2-step__num{
	display:block;position:absolute;left:0;right:0;top:58%;
	font-family:"Poppins","Pretendard",sans-serif;font-weight:600;font-size:132px;line-height:33px;
	letter-spacing:-2.64px;color:#fff;text-align:center;z-index:0;pointer-events:none;
}
/* [8차 회차 · R4-02 해소] 원인 확정(지워서 확인) — `.s2-step picture`(자손 선택자)가 `.s2-step__connector`
   안의 picture 도 같이 잡았다(li 의 자손이라 매칭됨 · 같은 특정도라 소스 순서로 이 규칙이 이겼다).
   연결선은 span 안에 중첩돼 있고 아이콘은 li 의 직계 자식이라 `>` 로 범위를 가른다. */
.s2-step > img{position:relative;z-index:1;display:block;width:120px;height:112px;margin:38px auto 40px;} /* [15차 · R11-03] 행 높이 298→313 부족분(+15)을 배지↔아이콘 간격에 반영(38→53) */
.s2-step > img {display:block;}
.s2-step__title{position:relative;z-index:1;font-size:20px;font-weight:700;letter-spacing:-.4px;line-height:1.6;color:var(--c-text);}
.s2-step small{position:relative;z-index:1;display:block;margin-top:8px;font-size:15px;font-weight:400;letter-spacing:-.3px;color:#666; line-height: 1.7;}

/* [6차 회차 · R2-02] .sr-only 유틸은 삭제했다 — 쓰는 곳이 없다(검수 판정: 감춘 목록도 "만든 것"). */

/* 병렬 조각 작업 — 이 4장(s2_1~s2_4)의 반응형은 여기(_sub-s2.css)에 둔다.
   공용 파일(sub.css·responsive.css)은 다른 담당이 같은 시각에 쓰고 있어 손대지 않는다.
   좁은 폭에서는 새 요소를 만들지 않고, 기존 요소를 줄 바꿈·재배치·비율 축소한다. */

/* ── 1400px 이하: 고정폭 가로 배치가 줄어든 폭에 안 맞는 지점부터 줄바꿈으로 전환 ── */
@media (max-width:1400px){
	/* s2_1 — 01_section 사진 2장(823/577 고정폭 합 1440)을 줄바꿈, 스텝 5칸(1432)도 줄바꿈 */
	.s2-factor-photos{flex-wrap:wrap;gap:24px;max-width:100%;margin:60px auto 0;padding:0 15px;box-sizing:border-box;}
	.s2-factor-photos .pic{width:100%;max-width:823px;height:auto;}
	.s2-factor-photos .pic--a{aspect-ratio:823/372;}
	.s2-factor-photos .pic--b{aspect-ratio:577/372;margin-top:0;}
	.s2-step-row{flex-wrap:wrap;justify-content:center;row-gap:40px;column-gap:24px;}
	/* 연결 화살표는 한 줄 배치를 전제로 한 장식이라 줄바꿈 뒤에는 숨긴다(기존 요소 표시만 변경) */
	.s2-step__connector{display:none;}

	/* s2_3 — 비교 컬럼(437+701+gap134+margin83)이 줄어든 폭에서 줄바꿈 */
	.s2-compare{flex-wrap:wrap;justify-content:center;gap:40px;margin-left:0;padding:0 15px;box-sizing:border-box;}
	.s2-compare .col{width:100%;max-width:640px;margin:0 auto;}
	.s2-compare .col--b{width:100%;max-width:700px;}
	.s2-compare .col--b .pic{width:100%;}
	.s2-compare .col--b p{max-width:100%;}

	/* s2_4 — 사진(534)+본문(617)+gap123+margin83 조합이 줄어든 폭에서 줄바꿈 */
   .s2-hip-diagrams {flex-direction: row; flex: 100%; justify-content: center;}
   .s2-hip-diagrams picture {width: auto;}
	/* .s2-hip-layout{flex-wrap:wrap;justify-content:center;margin-left:0;gap:40px;padding:0 15px;box-sizing:border-box;} */
	.s2-hip-photos{width:min(534px,100%);margin:0 auto;}
	.s2-hip-text{width:100%;max-width:617px;margin:0 auto;}
	.s2-hip-intro{flex-wrap:wrap;justify-content:center;gap:32px;padding:0 15px;box-sizing:border-box;}
	.s2-hip-box{width:100%;max-width:450px; margin-left: 0;}
   .s2-hip-box::before {display: none;}


}

/* ── 1024px 이하: 위 줄바꿈만으로 남는 폭 초과분 — 원(promise) 도해 축소 ── */
@media (max-width:1024px){
	.s2-promise{flex-wrap:wrap;justify-content:center;gap:32px;max-width:100%;padding:0 15px;box-sizing:border-box;}
	.s2-promise__text{width:100%;max-width:640px;flex:1 1 320px;margin:0 auto;}
	.s2-promise p,.s2-promise__text small{max-width:100%;}
	.s2-promise__figure{width:min(534px,60vw);height:min(534px,60vw);margin:0 auto;}
	.s2-promise__figure img{width:100%;height:100%;}
	/* 캡션 좌표는 원 도해(534) 안 비율(left 416/534=77.9% · top 440/534=82.4% · width 137/534=25.7%)로 환산 —
	   도해가 줄어들어도 같은 상대 위치를 유지한다 */
	.s2-promise__figure figcaption{left:77.9%;top:82.4%;width:25.7%;}
   .s2-hero-band .s2-lead {font-size: 30px;}
   .s2-hero-band .s2-desc p br {display: none;}
   .s2-subtitle {font-size: 30px;}
   .s2-factor__item h4 {font-size: 24px;}

   .s2-face-row .pic {width: 1% !important; flex: 1 1 auto; height: auto !important;}

   .s2-promise h3 {font-size: 30px;}

   .s2_4 .arti03.s2-process {padding: 100px 0;}
   .s2_4 .arti03.s2-process::before {height: 100%;}
   .s2-hip-layout{flex-wrap:wrap;justify-content:center;margin-left:0;gap:40px;padding:0 15px;box-sizing:border-box;}
}

/* ── 768px 이하: 나머지 고정폭 요소 폭 축소(FIG-06 예외 — 새 요소 없이 크기만 축소) ── */
@media (max-width:768px){
	.s2-hip-diagrams{max-width:100%;}
	.s2-hip-icon{width:min(396px,60vw);height:min(396px,60vw);}
   .s2-hero-divider {margin-top: 40px;}
	.s2-hip-box{padding:24px;}
   .s2-hero-band .s2-lead {font-size: 26px; margin-top: 40px;}
   .s2-subtitle {font-size: 26px;}
   .s2-subtitle br {display: none;}
   .s2-factor__item h4 {font-size: 20px;}
   .s2-factor__item + .s2-factor__item {margin-top: 0;}
   .s2-step-row {justify-content: left;}
   .s2-step {flex: 0 0 calc(50% - 12px);}
   .s2-process h3 {margin-bottom: 50px; font-size: 26px;}
   .s2_1 .arti03.s2-process {padding-bottom: 150px;}
   .s2-points__label {font-size: 26px;}

   .s2-face-row {gap: 20px; margin-top: 60px;}
   .s2-face-row .pic {margin-top: 0 !important;}

   .s2-promise h3 {font-size: 26px;}

   .s2-compare .col p br {display: none;}

   .s2-hip-icon-col {flex: auto;}

   .s2-hip-note {font-size: 26px;}
}

/* ── 480px 이하: 힙업/골반(s2_4) 사진 오버레이 — 534 기준 도형을 0.6 배로 축소해 같은 배치를 유지 ── */
@media (max-width:480px){
	.s2-factor-photos{padding:0 15px;}

	.s2-hip-photos{width:min(320px,100%);}
	.s2-hip-photos .pic--main{width:100%;aspect-ratio:534/860;}
	.s2-hip-photos .pic--sub{left:7.8%;width:84.3%;}
	.s2-hip-photos .pic--sub.sub1{top:8.1%;}
	.s2-hip-photos .pic--sub.sub2{top:84.5%;}
	.s2-hip-callouts .c1{left:47.2%;top:-3.7%;max-width:43.3%;}
	.s2-hip-callouts .c2{left:72.7%;top:14.8%;max-width:43.3%;}
	.s2-hip-callouts .c3{left:54.1%;top:56.9%;max-width:48.3%;}
	.s2-hip-callouts li{padding:6px 8px;font-size:12px;}

	.s2-hip-diagrams img{width:min(200px,50vw);height:min(200px,50vw);}
	.s2-hip-icon{width:min(240px,55vw);height:min(240px,55vw);}

   .s2-hero-band .s2-lead {font-size: 22px;}
   .s2-subtitle {font-size: 22px;}

   .s2-factor__item h4 {font-size: 18px;}
   .s2-factor__item p {font-size: 16px;}
   .s2-factor__num {width: 30px; height: 30px;}
   .s2-factor__item + .s2-factor__item {padding-left: 40px;}

   .s2-process h3 {font-size: 22px;}
   .s2-step-row {column-gap: 10px; row-gap: 30px;}
   .s2-step {flex: 0 0 calc(50% - 5px);}
   .s2-step__title {font-size: 16px;}
   .s2-step__num {font-size: 100px;}

   .s2-points__label {font-size: 22px;}
   .s2-points li {font-size: 16px;}

   .s2-compare .col p {font-size: 16px;}

   .s2-promise h3 {font-size: 20px;}
  .s2-promise__text small {line-height: 1.3;}

  .s2-hip-note {font-size: 20px;}
  .s2-hip-warn li {font-size: 16px;}
  .s2-hip-box {flex: auto;}

  .s2_4 .arti03.s2-process {margin-top: 100px; margin-bottom: 0;}
}

/* [P-03] s2 데스크톱 값 정본은 위 항목들. 반응형은 이 파일 안 @media 로 둔다(병렬 조각 예외). */

/* 이식 부위 진단 도트 팝업 — 도트는 03_section(825:8684) POPUP_dot, 카드·연결선은 04_section_popup(825:8677).
   도트 중심 좌표는 이미지(1920×1621) 대비 %, 카드·연결선은 팝업 프레임에서 잰 도트 중심 기준 거리(1920 폭 px).
   동작 부품 js/custom/dot-popup-1.0.0.inpiad.js · 공통 스타일 css/_sub-dotpop.css */
.s2_2 .dp__dot--forehead,.s2_2 .dp__pop--forehead{--x:50.677%;--y:19.309%;}
.s2_2 .dp__dot--cheekbone,.s2_2 .dp__pop--cheekbone{--x:46.25%;--y:27.822%;}
.s2_2 .dp__dot--nasolabial,.s2_2 .dp__pop--nasolabial{--x:48.281%;--y:29.858%;}
.s2_2 .dp__dot--chin,.s2_2 .dp__pop--chin{--x:50.677%;--y:37.138%;}
.s2_2 .dp__dot--cheek,.s2_2 .dp__pop--cheek{--x:55.833%;--y:31.092%;}
.s2_2 .dp__dot--sidecheek,.s2_2 .dp__pop--sidecheek{--x:57.188%;--y:28.624%;}
.s2_2 .dp__pop--forehead{--cdx:-733;--cdy:-145;--lx:-141.5;--ly:0;--len:283;--rot:0;}
.s2_2 .dp__pop--cheekbone{--cdx:-652;--cdy:-1;--lx:-105;--ly:53;--len:220.952;--rot:152.51;}
.s2_2 .dp__pop--nasolabial{--cdx:-691;--cdy:-72;--lx:-123.5;--ly:61.5;--len:266.101;--rot:152.95;}
.s2_2 .dp__pop--chin{--cdx:253;--cdy:25;--lx:126.5;--ly:86;--len:309.84;--rot:34.61;}
.s2_2 .dp__pop--cheek{--cdx:154;--cdy:-153;--lx:75;--ly:0;--len:158;--rot:0;}
.s2_2 .dp__pop--sidecheek{--cdx:128;--cdy:-208;--lx:62.5;--ly:-33.5;--len:150.765;--rot:-28.09;}