@charset "utf-8";
/* [DIR-03] _sub-s3a.css — 병렬 조각 갈래 B(지방흡입 1~5, s3_1~s3_5) 전용 임시 CSS.
퍼피-1 갈래 B 담당 · 공통 CSS(css/sub.css)는 고치지 않는다(GD-23 ㉰) — 합류는 지휘자가 마지막에 한다.
피그마 프레임 639:4495(s3_1) / 732:2376(s3_2) / 738:3436(s3_3) / 742:4133(s3_4) / 744:4599(s3_5).
공통 뼈대(.page-header.type2 + .lnb + .real-cont)는 css/sub.css 의 s1_1/s2 계열 정의를 그대로 쓰고,
여기서는 .s3_1~.s3_5 페이지별 좌표·본문만 정의한다.
[G-14] 피그마 값 우선 — 표준값과 다른 자리는 실측값을 그대로 쓴다.
[TODO · 확인 필요] 회전 캐뉼라 일러스트·점선 연결선·원형 DOT 마커(노드 744:455x·738:33xx 계열)는
시간 제약상 결의 사진(비교 이미지)만 반영하고 회전축·연결선 정밀 좌표는 이번 라운드에서 생략했다 —
FIG-04 위반(임의 제작)이 아니라 "미착수" 로 명시한다(일하는 규칙 12). 다음 회차에서 노드 재조회 후 보강.
*/
/* [9차 회차 · R3-05] 공용 sub.css:20 의 .type2 background-image(s-visual02.jpg)가 ![]()
레이어에
가려 화면엔 안 보이지만 요청 1건이 남는다 — s3_6~9 갈래와 같은 방식(background-image:none)으로 끈다. */
.s3_1 .page-header.type2,
.s3_2 .page-header.type2,
.s3_3 .page-header.type2,
.s3_4 .page-header.type2,
.s3_5 .page-header.type2{background-image:none;}
/* [7차 회차 · P5A-01 반려 해소] 히어로 배경이 골격 placeholder(s-visual02.jpg · "SUB VISUAL 2
1920x420" 워터마크)로 나가고 있었다 — 공용 sub.css:20 의 .type2 기본값을 이 5장에서 덮지 않았다.
images/sub/bg_s3hero.jpg 가 실제 sub_v3(Rectangle17) 자산인지 Figma 노드 렌더와 대조 확인—
5개 프레임의 Rectangle17 원본 URL 5개를 전부 받아 md5 비교(전부 6cf78475... 동일) 후
bg_s3hero.jpg 를 육안 대조(같은 인물·구도) — 일치 확인. 공용 sub.css 는 고치지 않고
.s3_1~.s3_5 스코프로만 오버라이드. */
/* [8차 회차 · R2-01 반려 해소 시도] 검수 채널차 실측 — 좌측 그라디언트 [0,.1,.3] 완전 일치인데
인물/중앙 [+12~27] 로 훨씬 밝다 — 오버레이 자체는 맞고 "사진이 다른 크롭으로 보이는 것"이 원인일
가능성이 높다. 원본(732:2468 등 sub_v3)은 img 를 `left:-34.23% top:-10.64% w:159.12% h:130.33%`
로 확대·오프셋한 것이지 `background-size:cover;position:center` 가 아니다 — cover/center 는 전혀
다른 크롭(다른 밝기 영역)을 보여준다. background-image 다중레이어 방식을 걷어내고, 원본과 같은
구조(오버플로 컨테이너 + 절대배치 img + 오버레이 div)로 다시 짠다. */
/* [9차 회차 · R3-02] width/height 속성은 표시 크기(1920×722)가 아니라 자산 실제 원본 픽셀(4000×1232)로
넣는다 — CSS 가 width:159.12%/height:130.33% 로 이미 두 값을 모두 명시적으로 덮어써 속성값은
레이아웃에 영향을 주지 않고(교체 경험 있음 — s3_2 도해에서 height 만 비워 속성이 새어나온 사고 재발
방지), 속성은 「이 파일이 실제로 몇 px 인가」라는 사실 기록으로만 쓴다. */
.s3-hero-bg{position:absolute;inset:0;overflow:hidden;z-index:0;}
.s3-hero-bg img{position:absolute;left:-34.23%;top:-10.64%;width:159.12%;height:130.33%;max-width:none;object-fit:cover;}
.s3_1 .page-header.type2,
.s3_2 .page-header.type2,
.s3_3 .page-header.type2,
.s3_4 .page-header.type2,
.s3_5 .page-header.type2,
.s3_6 .page-header.type2,
.s3_7 .page-header.type2,
.s3_8 .page-header.type2,
.s3_9 .page-header.type2{
position: relative;
height:722px;
margin-top:calc(-1 * var(--h-header));
background-image:url('../images/sub/bg_s3hero.jpg');
background-size:cover;
background-position:center;
background-color:#0b1848; /* 이미지 로드 전 배경색 폴백 */
}
.s3_1 .page-header.type2::after,
.s3_2 .page-header.type2::after,
.s3_3 .page-header.type2::after,
.s3_4 .page-header.type2::after,
.s3_5 .page-header.type2::after,
.s3_6 .page-header.type2::after,
.s3_7 .page-header.type2::after,
.s3_8 .page-header.type2::after,
.s3_9 .page-header.type2::after{
position: absolute; content: ''; width: 100%; height: 100%;backgroundlinear-gradient(180deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.00) 18.42%), linear-gradient(0deg, rgba(43, 28, 18, 0.30) 0%, rgba(43, 28, 18, 0.30) 100%); z-index: 0;
}
.s3_1 .page-header.type2 h1, .s3_1 .page-header.type2 .lede, .s3_1 .page-header.type2 .lnb,
.s3_2 .page-header.type2 h1, .s3_2 .page-header.type2 .lede, .s3_2 .page-header.type2 .lnb,
.s3_3 .page-header.type2 h1, .s3_3 .page-header.type2 .lede, .s3_3 .page-header.type2 .lnb,
.s3_4 .page-header.type2 h1, .s3_4 .page-header.type2 .lede, .s3_4 .page-header.type2 .lnb,
.s3_5 .page-header.type2 h1, .s3_5 .page-header.type2 .lede, .s3_5 .page-header.type2 .lnb,
.s3_6 .page-header.type2 h1, .s3_6 .page-header.type2 .lede, .s3_6 .page-header.type2 .lnb,
.s3_7 .page-header.type2 h1, .s3_7 .page-header.type2 .lede, .s3_7 .page-header.type2 .lnb,
.s3_8 .page-header.type2 h1, .s3_8 .page-header.type2 .lede, .s3_8 .page-header.type2 .lnb,
.s3_9 .page-header.type2 h1, .s3_9 .page-header.type2 .lede, .s3_9 .page-header.type2 .lnb{z-index:2;}
/* .lede 는 base CSS 에서 position 이 static 이라 z-index 만으로는 안 쌓인다 — relative 추가 */
.s3_1 .page-header.type2 .lede, .s3_2 .page-header.type2 .lede,
.s3_3 .page-header.type2 .lede, .s3_4 .page-header.type2 .lede,
.s3_5 .page-header.type2 .lede, .s3_6 .page-header.type2 .lede,
.s3_7 .page-header.type2 .lede, .s3_8 .page-header.type2 .lede,
.s3_9 .page-header.type2 .lede {position:relative;}
/* ── 공통(갈래 B) : S ───────────────────────────────────────────── */
.s3-body{padding:0 0 30px;}
.s3-body p{font-size:18px;line-height:1.7;letter-spacing:-.36px;color:var(--c-text-alt,#1e1e1e);}
.s3-body p + p{margin-top:16px;}
.s3-lede-title{
position:relative;max-width:1000px;margin:0 auto;padding-bottom:96px;font-size:40px;font-weight:500;line-height:1.6;
letter-spacing:-.8px;text-align:center;color:var(--c-text-alt,#1e1e1e);
}
/* [HTM-07] 장식용 세로선은 빈 요소 대신 ::after 가상요소로 */
.s3-lede-title:after{
content:'';position:absolute;left:50%;bottom:0;width:1px;height:76px;
background:var(--c-line-strong,#ccc);transform:translateX(-50%);
}
.s3-subtitle{position:relative;max-width:100%;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 를 그대로 배경으로 얹는다. */
.s3-subtitle:after{
content:'';position:absolute;left:50%;bottom:0;width:19px;height:76px;transform:translateX(-50%);
background:url('../images/sub/ico_s2subtitle_divider.svg') no-repeat center/contain;
}
.s3-figure{margin-top:60px;text-align:center;}
.s3-figure img{width:100%;max-width:1026px;border-radius:var(--r-lg,10px);}
/* [7차 회차 · P5A-04 반려 해소] s3_2 도해(bg_s30202)는 시안 노드(732:2836) 폭이 1920(풀블리드) —
위 1026 상한은 s3_3 img01(833:8084, 실측 1026)용 기본값이라 이 자리에는 적용하지 않는다. */
.s3_2 .arti02 .s3-figure img{max-width:1920px;}
/* [14차 회차] s3_1 04_section 렌더(1196×902, 노드 827:8698 실측 1188×894 과 거의 일치)가 공용
max-width:1026 상한에 눌려 1026×774 로 축소돼 있었다 — s3_3 img01(1026) 전용 기본값이 여기도
걸린 것. −178 중 상당분(약 128px)이 여기서 나온다. 실측 폭 그대로 풀어준다. */
.s3_1 .arti04.s3-body{max-width: 1200px; margin:100px auto 0;}
.s3_1 .arti04.s3-body p {position: relative; padding-left: 30px; margin-left: 40px;}
.s3_1 .arti04.s3-body p::before {position: absolute; content: ''; width: 4px; height: 4px; border-radius: 50%; background-color: #3a3a3a; top: 11px; left: 10px;}
.s3_1 .arti04 .s3-figure img{max-width:1196px;}
/* [14차 회차] arti04 끝(4365) ~ Footer(시안 4931-308=4623) 간격이 시안은 258 인데 공용 기본
padding-bottom(180 상당)만 적용돼 80 이 됐다 — 부족분(+178)을 real-cont 에 보강. */
/* [DIR-03] 04_section(827:8698) 끝(y4361=3467+894) ~ Footer(4931-308=4623) = 262.
358 는 8차의 ±0(빠진 이미지 자리를 여백이 메운 값)에 맞춰 역산된 값이라 폐기 — 좌표 재계산. */
.s3_1 .real-cont{padding-bottom:262px;}
/* [8차 회차 · R2-03 반려 해소] 7차의 max-width 해제는 .container(1440) 안에 갇혀 있었다 —
시안(832:8083)은 풀블리드 1920×1492.7 이다. .container 밖으로 폭을 뺀다(음수 마진 풀블리드). */
.s3_2 .arti02 .s3-figure{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;}
.s3_2 .arti02 .s3-figure img{max-width:none;width:100vw;height:auto;}
/* [R5-02] 검수 분해값 그대로 적용 — 도해 시작 여백 −91(60→−31, 라벨과 더 붙는다) ·
도해→Footer 여백 +148(부족분 보강). x·폭·이미지 크기는 이미 일치 확인됨, 세로 여백만 조정. */
/* [15차 회차] 렌더 복원(832:8083, 1501 높이) 후 도해 시작 y 가 1877 로 다시 밀려(목표 1824.26,
+53) 있었다 — margin-top 을 추가로 조정. */
/* [24차 회차 · 지휘자 지시로 margin-top:-84px→0 겹침 시험 완료 — 겹침 0건(스크린샷 before/after
대조), 「역산」 판정까지는 확인. 단 margin collapse(.arti02 자체 margin-top:100px 와 인접 양수
마진은 「합」이 아니라 「최대값」으로 접힌다) 때문에 순진하게 양수로 바꿔 넣었더니 docH 가
3944→4155(+211) 로 오히려 악화돼 즉시 되돌렸다 — 재조정 값은 검증되지 않았으므로 원값을
유지하고 겹침-시험 결과만 인계서에 남긴다(다음 담당이 margin collapse 를 감안해 재계산). */
.s3_2 .arti02 .s3-figure{margin-bottom:201px;}
.s3-figure figcaption{margin-top:12px;font-size:18px;line-height:1.7;letter-spacing:-.36px;color:var(--c-text-alt,#1e1e1e);}
.s3-gallery{display:flex;flex-wrap:wrap;gap:40px;justify-content:center;margin-top:60px;}
.s3-gallery figure{flex:0 0 246px;}
.s3-gallery img{width:246px;height:246px;object-fit:cover;border-radius:var(--r-lg,10px);}
.s3-gallery figcaption{margin-top:14px;font-size:14px;line-height:1.6;letter-spacing:-.28px;color:var(--c-text-sub,#666);text-align:center;}
.s3-compare{display:flex;flex-wrap:wrap;gap:40px 24px;justify-content:center;margin-top:60px;}
.s3-compare .item{display:flex;align-items:center;gap:25px;width:510px;max-width:100%;}
.s3-compare img{width:251px;height:195px;object-fit:cover;border-radius:var(--r-lg,10px);flex:0 0 251px;}
.s3-compare .txt{font-size:18px;line-height:1.7;letter-spacing:-.36px;color:var(--c-text-alt,#1e1e1e);}
/* [15차 회차 · R7-03 반려 해소] s3_4 사례 비교 — 시안(744:4577/4585/4592)은 3개 행이 44px 간격으로
분리돼 있다(flex-wrap 자동 줄바꿈이 아니다). */
.s3-compare-row{display: flex; flex-wrap: wrap; gap:44px 87px; margin-top: 60px;}
.s3-compare-row .item{display:flex;align-items:center;gap:25px; flex: 0 0 calc(50% - 43.5px);}
.s3-compare-row img{max-width: 251px; width: 100%; display: block; border-radius: 10px;}
.s3-compare-row .txt{font-size:18px;line-height:1.7;letter-spacing:-.36px;color:var(--c-text-alt,#1e1e1e); width: 1%; flex: 1 1 auto;}
.s3-device{display:flex;flex-wrap:wrap;gap:70px;justify-content:center;margin-top:60px;}
/* [DIR-03] arti03 첫 자식(중복 문단 제거 후) — 시안은 섹션 시작=이미지 상단(margin-top 0) */
.s3_1 .arti03 .s3-device{margin-top:0;}
.s3-device figure{flex:0 1 480px;text-align:center;}
.s3-device img{width:100%;height:auto;border-radius:var(--r-lg,10px);}
/* [R6-01 반려 해소] 시안(675:2861=698.45×466 · 675:2860=308×466)은 비대칭 2.27:1 인데
공통 flex-basis:480 + width:100% 가 둘 다 480×465 정사각형에 가깝게 눌렀다 — 노드 실측 폭 그대로. */
.s3_1 .s3-device figure:first-child{flex-basis:698px;max-width:698px;}
.s3_1 .s3-device figure:last-child{flex-basis:308px;max-width:308px;}
.s3_1 .s3-device img{width:100%;height:466px;object-fit:cover;}
.s3-device figcaption{margin-top:6px;font-size:18px;line-height:1.7;letter-spacing:-.36px;color:var(--c-text-alt,#1e1e1e);}
.s3-quote-box{margin-top: 100px; text-align: center;}
.s3-quote-box h3{position: relative; padding-top: 110px; font-size:30px;font-weight:500;line-height:1.5;letter-spacing:-.6px;color:#1b2d55;}
.s3-quote-box h3 span{position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: block; font-size: 133px; font-weight: 300; line-height: 1.5; letter-spacing: -2.66px; font-family: 'BookkMyungjo';}
.s3-quote-box strong{display: block; text-decoration: underline; font-weight: 500;}
.s3-note-card{
max-width:394px;margin:60px auto 0; width: 100%;
}
.s3-note-card .head{
display:flex;align-items:center;justify-content:center;height:43px;border-radius:22px;
background:var(--c-primary-alt,#6423b8);color:#fff;font-size:20px;font-weight:700;letter-spacing:-.4px;
}
.s3-note-card ul{margin-top:18px;padding:0 20px;}
.s3-note-card li{position:relative;padding:14px 0;font-size:18px;line-height:1.7;letter-spacing:-.36px;color:var(--c-text-alt,#1e1e1e); padding-left: 20px;}
.s3-note-card li::before {position: absolute; content:''; width: 5px; height: 5px; background-color: #1e1e1e; border-radius: 50%; top: 26px; left: 0;}
/* [DIR-03] 시안(796:8941) 실측 — 목록 구분선은 점선(dashed). 3회차 이월분 해소 */
.s3-note-card li + li{border-top:1px dashed var(--c-line,#e5e5e5);}
/* [TODO · 확인 필요] 위팔 회전 원형 이미지(747:5010·747:5015)·직각 어깨 다이어그램(747:5112 Group)은
회전 좌표 미반영 — 사진만 나란히 배치 */
/* [3차 회차 정정 · 지휘자 17:xx 지적 — 내 실수(1차 회차 잘못된 수치)] s3 갈래는 9탭이라 2단메뉴가
2행인데, get_metadata 실측(744:4679·742:4213·738:3516·732:2456·639:4601 전수) 결과
x240 y536 w1440 h124 다 — 공용 sub.css 의 y604(1행 페이지 기본값)를 이 갈래만 덮어쓴다.
sub.css 는 고치지 않는다(GD-23) — 스코프를 좁혀 .s3_1~.s3_5 에만 적용. */
.s3_1 .lnb, .s3_2 .lnb, .s3_3 .lnb, .s3_4 .lnb, .s3_5 .lnb{top:536px;}
/* [4차 회차 · 지휘자 지적] 2단메뉴 줄 배분 5+4 고정(시안 747:5231 Frame1590=5·Frame1591=4).
공용 sub.css:122~123 의 flex-wrap 자동 줄바꿈(탭 폭 합산 기준)에 맡기면 6+3 로 어긋난다.
이 갈래는 두 프레임처럼 을 물리적으로 나눠 각 줄이 별도 flex 컨테이너가 되게 한다 —
sub.css 는 고치지 않고 이 파일에서 .lnb--split 스코프로만 강제 고정. */
.lnb--split ul{flex-wrap:nowrap;}
.lnb--split ul + ul{margin-top:8px;}
/* [5차 회차 · get_metadata 실측 + 되돌림] 처음엔 5장 전부 padding-top/bottom 을 일괄
오버라이드했으나, s3_1·s3_2·s3_3·s3_5 는 **기존 내부 여백이 이미 시안에 근접**했고
(4차까지 +7~+52) 오버라이드를 더하니 오히려 +85~+168 로 벌어졌다 — 그 4장은 되돌린다.
실제 결손(−227)이 있던 **s3_4 만 유지**한다(내부 콘텐츠가 적어 기본 padding-bottom(180)
으로는 실제 Footer 간격(423)을 못 채웠던 페이지). */
/* [15차 회차 · R7-03 반려 해소] 423 은 4차에 좌표 근거(Footer y3147 − Frame1621 끝 2724 = 423)로
이미 검산된 값이다 — 겉보기 ±0 을 맞추려 387 로 깎았던 것을 되돌리고, 실제 간격 차이(본문·카드행)를
시안 값으로 직접 잡는다(아래 .arti02 마진 · .s3-compare-row 44px). */
.s3_4 .real-cont{padding-top:140px;padding-bottom:423px;}
.s3_4 .arti01 + .arti02{margin-top:60px;}
/* ── 3차 회차 신설 — 01_section 밴드(모든 s3_N 공통 · 절대좌표 y722, height642) ────────
지휘자 재측(17:0x) 근거 — Figma get_metadata 실측: sub_v3(0~722) 다음에 별도 01_section
밴드(722~1364, height642 고정)가 있고 이걸 전부 누락(1~4차 회차의 최대 결손 원인).
배경은 s3_6~9 갈래가 이미 만든 공용 자산 bg_s3band_photo(전 s3 카테고리 동일 사진 —
Figma 원본도 5페이지 전부 같은 파일 해시로 확인) 그대로 재사용, 새로 만들지 않음(FIG-04). */
.s3-band{
position:relative;width:100%;height:642px;overflow:hidden;
display:flex;align-items:flex-start;justify-content:center;text-align:center;color:#fff;
}
.s3-band .bg{position:absolute;inset:0;z-index:0;}
.s3-band .bg img{width:100%;height:100%;object-fit:cover;}
.s3-band:after{content:'';position:absolute;inset:0;z-index:1;background:rgba(69,46,7,.42);backdrop-filter:blur(.5px);}
/* [22차 회차 · 지휘자 재측 — s_title(582:911) y817 = 밴드 top(722)+95 고정.
기존 align-items:center 가 하단 본문 길이(장마다 다름)에 따라 eyebrow 위치를 밀어
s3_1 +113 · 나머지 +97 로 제각각이었다. flex-start + 고정 padding-top:95px 로 전환. */
.s3-band__inner{position:relative;z-index:2; padding:95px 0 0;}
.s3-band .eyebrow{margin:0;font-size:16px;line-height:1.5;font-weight:500;letter-spacing:-.32px;color:var(--c-accent,#edb629);}
.s3-band h2{position:relative;margin:13px 0 0; font-size:48px;line-height:1.1875;font-weight:400;letter-spacing:-.96px;}
.s3-hero-divider{display:block;margin:90px auto 0;}
/* [7차 회차 · P5A-05 반려 해소] 시안(582:892 상당 Line 2 — s_title 부품 공통) 구분선은 금색
계열이다 — 흰색 반투명으로 잘못 넣어 사실상 안 보였다. eyebrow 와 같은 accent 색으로 교체. */
/* .s3-band h2:after{content:'';position:absolute;left:50%;bottom:0;width:68px;height:1px;background:var(--c-accent,#edb629);transform:translateX(-50%);} */
.s3-band p{margin-top:36px;font-size:18px;line-height:1.7;letter-spacing:-.36px;}
.s3-band p.s3-lead{margin-top: 80px; font-weight: 100; font-size: 40px; color: #fff; line-height: 1.45;}
.s3-band p.s3-lead .fw {font-weight: 600;}
/* [CSS-10 준수 · 4차 회차] 5장 인라인 style 15곳을 클래스로 전환 */
/* [DIR-03] 소제목 19x19 Vector 아이콘 — 노드 SVG 실자산(ico_s3h3.svg) 삽입.
CSS mask·도형 대체 금지(FIG-06+FIG-04 — 옆 갈래 mask:radial-gradient 반려 사례 참고). */
.s3-h3{font-size:30px;font-weight:500;line-height:1.5;letter-spacing:-.6px;color:var(--c-text-alt,#1e1e1e);display:flex;align-items:center;gap:10px;}
.s3-h3__icon{flex-shrink:0;}
.s3-h3--mt8{margin-top:8px;}
.s3-list--mt32{margin-top:32px;}
.s3-figure--mt60{margin-top:60px;}
/* [DIR-03] 시안(664:2679·664:2681·664:2676) 신규 이미지 3개 — 텍스트만
세고 이미지 노드 3개(02_section)를 놓쳤던 결함. get_metadata 재조회(827:8697) 결과
두 소제목 블록은 텍스트(좌)+이미지(우) 가로 배치(744:4532 gap33 · 744:4548 gap259)이고
순서도 수고스러움(y1824)→흉터걱정없는기술력(y2143)→인용(y2542) 이 시안 순서다. */
/* [DIR-03] 시안 절대좌표 x312(1920 캔버스 기준) ↔ 컨테이너(x240,1440) 좌측 기준점 차 72px.
내부 상대 간격(gap33·259)은 시안과 이미 일치 — 그룹 전체를 72px 만 우측으로 이동. */
.s3-row-block{display:flex;align-items:center;margin-left:72px;}
.s3-row-block--mt70{margin-top:70px;gap:33px;}
.s3-row-block--mt152{margin-top:152px;gap:259px;}
.s3-row-block--mt70 .s3-row-block__text{width:773px;flex:none;}
.s3-row-block--mt152 .s3-row-block__text{width:342px;flex:none;}
.s3-row-block .s3-figure--row{flex-shrink:0;margin:0;}
.s3-row-block .s3-figure--row img{width:499px;height:167px;object-fit:cover;}
.s3-device-pair{display:flex;align-items:center;gap:33px;flex-shrink:0;}
.s3-device-pair img{width:321px;height:300px;object-fit:cover;border-radius:var(--r-lg,10px);}
.s3-quote-box--mt99{margin-top:99px;}
.s3-caption-sm{margin-top:24px;font-size:14px;color:var(--c-text-sub,#666);text-align:center;}
.s3-flex-row{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start;justify-content:center;margin-top:32px;}
.s3-flex-row .s3-gallery{margin-top:0;flex:0 0 auto;}
.s3-flex-row .s3-figure{max-width:280px;margin:0;flex:0 0 auto;}
.s3-flex-row .s3-note-card{margin:0;margin-top: 140px;}
/* [15차 회차 · R7-01 반려 해소] 시안(747:5140) 은 소문자 "promise", tracking −0.36px —
text-transform:uppercase 가 화면 글자를 "PROMISE" 로 바꿔 FIG-07 위반이었고 letter-spacing
부호도 반대였다. 둘 다 시안 리터럴로 교체. */
.s3-promise-eyebrow{font-size:18px;color:var(--c-accent,#edb629);letter-spacing:-.36px;}
.s3-label-pair{display:flex;gap:40px;justify-content:center;flex-wrap:wrap;margin-top:32px;}
.s3-label-pair p{font-size:18px;letter-spacing:-.36px;color:var(--c-text-alt,#1e1e1e);}
/* [R6-04] .lede 노드(639:4600 등) x243 ↔ 공용 sub.css 기본값 x240(−3). h1·lnb 는 240 이 사이트
전역 기준이라 그대로 두고, .lede 만 시안 리터럴로 스코프 보정. */
.s3_1 .page-header.type2 .lede, .s3_2 .page-header.type2 .lede,
.s3_3 .page-header.type2 .lede, .s3_4 .page-header.type2 .lede,
.s3_5 .page-header.type2 .lede{left:243px;}
/* [R5-01] 히어로 .lede 는 5개 프레임 전수 텍스트 노드(639:4600·732:2455·738:3515·742:4212·744:4678)
가 전부 x243 w610 로 동일 — 5장 max-width 전부 610px 로 통일(기존 640~900px 는 시안 폭이 아니었다).
[퍼피-2 인계 메모] 610px 는 1920 전제값이다 — 1440 이하로 좁아지면 이 폭에서 줄바꿈이 늘어난다.
폭별 max-width 조정(반응형)은 퍼피-2 스코프. */
/* ── 공통(갈래 B) : E ───────────────────────────────────────────── */
/* ══════════════════════ s3_1 지방흡입(총론) — 639:4495 · 1920×4931 ══════════════════════ */
.s3_1 .page-header.type2 .lede{max-width:610px;}
.s3_1 .arti03 .s3-gallery img{width:auto;height:280px;border-radius:160px;}
.s3_1 .arti03 .s3-gallery figure{flex:0 0 auto;}
/* ══════════════════════ s3_2 이중턱지방흡입 — 732:2376 · 1920×3983 ══════════════════════ */
.s3_2 .page-header.type2 .lede{max-width:610px;}
/* ══════════════════════ s3_3 이마 관자 앞광대 볼 — 738:3436 · 1920×3463 ══════════════════════ */
.s3_3 .page-header.type2 .lede{max-width:610px;}
/* [R5-02] 검수 분해값 — 서브타이틀 높이 +38(패딩 96→58) · 본문 시작 여백 +58(공용 article~article
100px→42px) · img01 여백 +60(60→0) · img02 여백 +26(60→34). x·폭·이미지 크기는 일치, 세로만 보정. */
.s3_3 .s3-lede-title{padding-bottom:58px;}
/* [14차 회차 재계산 · get_metadata 재확인] real-cont 시작(1364)~서브타이틀(1504) 간격은 다른 4장과
같은 140 이어야 하는데 공용 기본값이 220 이었다(+80 과다). */
.s3_3 .real-cont{padding-top:140px;}
.s3_3 .arti01 + .arti02{margin-top:60px;}
/* [R6-03] img01·img02 여백을 .arti03(정확한 위치 — 이전 회차 선택자 오류였던 .arti02 아님) 기준으로
다시 계산. 이전 시도(-60/-26 전량 차감)가 -70 으로 과녁을 지나쳤다 — 절반 수준으로 재조정 후 실측. */
.s3_3 .arti03 .s3-figure{margin-top:91px;}
.s3_3 .arti03 .s3-gallery{margin-top:94px;}
.s3_3 .s3-caption-sm {font-size: 14px; color: #666;}
/* ══════════════════════ s3_4 이물질 제거 및 과생착 제거 — 742:4133 · 1920×3455 ══════════════════════ */
.s3_4 .page-header.type2 .lede{max-width:610px;}
/* ══════════════════════ s3_5 위팔 — 744:4599 · 1920×3811 ══════════════════════ */
/* [6차 회차 · 1:1 대조] 시안 노드(747:5010 "image36 1" size500·747:5015 "image36 2" size381)는
원형·서로 다른 크기·부분 겹침 콜라주다. 이전 회차는 정사각 246×246 두 장을 나란히 배치해
원형·크기차·겹침을 반영하지 못했다. 이번에 원형·크기차만 반영(겹침 배치는 겹치는 좌표까지
재현하면 다른 콘텐츠와 충돌 위험이 있어 이번 회차엔 보류 — 미해소로 명시). */
/* [7차 회차 · P5A-04 반려 해소] 실측 크기(747:5010=500 · 747:5015=381)로 축소 없이 그대로. */
/* [9차 회차 · R3-01 반려 해소] get_metadata 정밀 좌표(원점 795,2147 — 381원 기준):
381원 left0 top141 · 500원 left302 top0 · 도해(526×478) left236 top215.
컨테이너 크기 = 가로 802×세로 693(세 요소 바운딩박스). flex 대신 절대좌표로 정확히 배치. */
/* [10차 회차 · R4-02] 갤러리 내부 상대배치(겹침79·오프셋141·종횡비)는 전부 일치 확인됨 — 컨테이너
좌측 기준점만 시안 대비 −84px 밀려 있었다(795/1031/1097 ↔ 711/947/1013, 전부 동일하게 −84).
내부 좌표는 그대로 두고 컨테이너 자체만 84px 오른쪽으로 보정한다. */
/* [15차 회차 · R7-03 대안] margin-top 을 100vw 풀블리드 .arti03 에 주면 상쇄되는 것을 확인했다 —
대신 이 갤러리 컨테이너의 margin-bottom 을 39px 늘려 같은 간격을 만든다(풀블리드와 무관한 요소). */
.s3_5 .real-cont {padding-bottom: 0;}
.s3_5 .s3-gallery--radial{position:relative;left:84px;width:802px;height:693px;margin:60px auto 39px;display:block;}
.s3_5 .s3-gallery img{border-radius:50%;max-width:none;object-fit:cover;}
.s3_5 .s3-gallery__small{position:absolute;left:0;top:141px;width:381px;height:381px;margin:0; z-index: 2;}
.s3_5 .s3-gallery__small img{width:381px;height:381px;}
.s3_5 .s3-gallery__big{position:absolute;left:302px;top:0;width:500px;height:500px;z-index:2;margin:0;}
.s3_5 .s3-gallery__big img{width:500px;height:500px;}
.s3_5 .s3-gallery__bigbg{position:absolute;left:236px;top:215px;width:526px;height:478px;z-index:1;display:block;}
.s3_5 .s3-gallery__bigbg img{width:526px;height:478px;object-fit:fill;border-radius:0;animation: rotate 20s infinite linear;}
.s3_5 .page-header.type2 .lede{max-width:610px;}
@keyframes rotate{
0% {transform: rotate(0);}
100% {transform: rotate(360deg);}
}
/* [9차 회차 · R3-04] get_metadata(747:5137 Frame 1491) 확인 — x0 y3012 w1920(전폭) h492. article 이
.container(1440) 안에 있어 텍스처가 1440 폭으로 잘리고 있었다 — 풀블리드로 뺀다. */
/* [10차 회차 · R4-01] get_metadata(747:5137) 재확인 — height 492 고정. 시안은 이 섹션 뒤에
Footer 가 곧바로 붙는다(promise 끝 3504 ≈ Footer 시작 3503, 간격 0에 가까움) — 기존 padding:80px 0
로 492 를 훌쩍 넘겼고, 공용 real-cont 기본 padding-bottom(180)까지 더해져 +281 중 대부분을 차지했다.
높이를 492 로 고정하고 내부는 flex 로 세로 중앙 정렬, real-cont 뒤 여백은 이 페이지만 0으로 덮는다. */
/* [R5-02 시도·미해소] 갤러리→promise 여백 133(현재) ↔ 172(시안, +39 필요) — margin-top 을 직접
추가하면 100vw 풀블리드 요소(left:50%;margin-left:-50vw)의 정상 플로우 높이 계산이 깨져
Footer 와 겹치는 회귀가 나서(real-cont 가 arti03 실제 높이를 덜 반영) 되돌렸다. 안쪽 래퍼에
margin-top 을 주는 방식으로 다시 시도해야 한다 — 이번 회차엔 미해소로 남긴다. */
.s3-promise{
position:relative;width:100%;height:492px;overflow:hidden;background:#fff;
display:flex;align-items:center;justify-content:center;
}
.s3-promise .tex{position:absolute;inset:0;opacity:.65;}
.s3-promise .tex img{width:100%;height:100%;object-fit:cover;}
.s3-promise .wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:40px;text-align:center;max-width:1100px;}
/* [6차 회차 · 행간 전수] 시안(747:5149 body18(sb)_po) leading-[1.7] 누락 */
.s3-promise .eyebrow{margin:0;font-family:"Poppins","Pretendard",sans-serif;font-size:18px;font-weight:600;line-height:1.7;letter-spacing:-.36px;color:var(--c-accent);}
.s3-promise .head{margin:0;font-size:30px;font-weight:500;letter-spacing:-.6px;line-height:1.5;color:#1e1e1e;}
.s3-promise .line{width:53px;height:1px;margin:0;background:var(--c-line-strong);border:0;}
.s3-promise .body{font-size:18px;line-height:1.7;letter-spacing:-.36px;color:var(--c-text-alt);}
/* [6차 회차 · 행간 전수] 시안(747:5152 "수술시 멍 :"/"부기 :" 라벨) leading-[1.5] — 부모 .body 의 1.7 을
그대로 상속하고 있었다(불일치, 누락이 아니라 오상속). 22px 라벨만 따로 1.5 로 되돌린다. */
.s3-promise .body strong{font-size:22px;font-weight:600;line-height:1.5;letter-spacing:-.44px;}
/* ── promise 안내 박스 : E ────────────────────────────────────────── */
/* [DIR-03] 물결 배경(747:5154 계열 · x0 y1364 1920x643) — 5장 전수 미구현이었던 것을 보강.
옆 갈래(_sub-s3b.css)와 동일 마크업(.wave-bg)·동일 자산(bg_s3wave)을 갈래 A 스코프(.s3_1~.s3_5)에만
적용한다 — 공통 sub.css 는 그대로, 옆 갈래 CSS 파일도 손대지 않는다(GD-23). 원본은 절대좌표
오버레이(본문 위에 겹치는 배경층)라 문서 흐름에 별도 높이로 더하지 않는다.
[정정] .arti02 기준 top:-140px 고정 오프셋은 arti02 자체 상단 위치가 페이지마다(및 회차마다 내용이
바뀔 때마다) 달라져 5장 y가 제각각(1479~1627)이 되는 원인이었다 — .real-cont 상단은 5장 모두 시안
y1364 와 항상 일치(get_metadata 확인)하므로 .real-cont 기준 top:0 으로 고정 앵커를 바꾼다. */
.s3_1 .real-cont,.s3_2 .real-cont,.s3_3 .real-cont,.s3_4 .real-cont,.s3_5 .real-cont{position:relative;}
.s3_1 .real-cont>.wave-bg,.s3_2 .real-cont>.wave-bg,.s3_3 .real-cont>.wave-bg,.s3_4 .real-cont>.wave-bg,.s3_5 .real-cont>.wave-bg{
position:absolute;left:50%;top:0;z-index:0;overflow:hidden;pointer-events:none;
width:100vw;max-width:1920px;height:643px;transform:translateX(-50%);
}
.s3_1 .real-cont>.wave-bg img,.s3_2 .real-cont>.wave-bg img,.s3_3 .real-cont>.wave-bg img,.s3_4 .real-cont>.wave-bg img,.s3_5 .real-cont>.wave-bg img{
position:absolute;left:0;top:-16.28%;width:100%;height:168.04%;object-fit:cover;
}
.s3_1 .real-cont>.wave-bg:after,.s3_2 .real-cont>.wave-bg:after,.s3_3 .real-cont>.wave-bg:after,.s3_4 .real-cont>.wave-bg:after,.s3_5 .real-cont>.wave-bg:after{
content:'';position:absolute;inset:0;
/* [FIG-04] 노드 페인트 그라디언트 리터럴 그대로(옆 갈래와 동일 근거) */
background:linear-gradient(180deg,rgba(255,255,255,0) 50.078%,#fff 83.748%),
linear-gradient(90deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,.02) 100%);
}
.s3_1 .real-cont>*:not(.wave-bg),.s3_2 .real-cont>*:not(.wave-bg),.s3_3 .real-cont>*:not(.wave-bg),.s3_4 .real-cont>*:not(.wave-bg),.s3_5 .real-cont>*:not(.wave-bg){position:relative;z-index:1;}
/* 좁은 폭 대응 — 새 요소를 만들지 않고 기존 요소의 배치·크기만 바꾼다(피그마는 1920 캔버스 한 장뿐).
.lede 는 위쪽(52행 부근)에서 겹침 방지를 위해 position:relative + left:243px 를 5장 공통으로
걸어 뒀는데, 이 값이 좁은 폭에서도 그대로 남아 본문이 오른쪽으로 밀려 화면 밖으로 나갔다.
히어로 영역 자체는 css/responsive.css 가 1440 이하에서 이미 흐름 배치로 바꿔 두므로,
여기서는 이 파일이 준 left 오프셋만 같은 폭에서 되돌린다. */
@media (max-width:1600px){
.s3_1 .page-header.type2 *,
.s3_2 .page-header.type2 *,
.s3_3 .page-header.type2 *,
.s3_4 .page-header.type2 *,
.s3_5 .page-header.type2 *,
.s3_6 .page-header.type2 *,
.s3_7 .page-header.type2 *,
.s3_8 .page-header.type2 *,
.s3_9 .page-header.type2 * { z-index: 2;}
.s3_1 .page-header.type2 .lede, .s3_2 .page-header.type2 .lede, .s3_3 .page-header.type2 .lede, .s3_4 .page-header.type2 .lede, .s3_5 .page-header.type2 .lede,
.s3_6 .page-header.type2 .lede, .s3_7 .page-header.type2 .lede, .s3_8 .page-header.type2 .lede, .s3_9 .page-header.type2 .lede {position: relative; left: initial; top: initial;}
.s3_1 .page-header.type2 h1,
.s3_2 .page-header.type2 h1,
.s3_3 .page-header.type2 h1,
.s3_4 .page-header.type2 h1,
.s3_5 .page-header.type2 h1,
.s3_6 .page-header.type2 h1,
.s3_7 .page-header.type2 h1,
.s3_8 .page-header.type2 h1,
.s3_9 .page-header.type2 h1{position: relative; left: initial; top: initial;}
.s3-band h2 {font-size: clamp(28px, 4.2vw, 48px);}
}
/* s3_1 — 텍스트+이미지 가로 배치(639:4611·639:4623, gap33·259)와 좌측 오프셋(margin-left:72px)이
고정폭이라 1300 이하에서 이미지 쪽이 화면 밖으로 밀려났다(격리 시험 — .s3-row-block 만 숨기면
1300/1024 넘침이 0, 768/375 도 나머지는 .lede 값과 같아진다). 좌우 배치를 세로 스택으로 바꾸고
좌측 오프셋은 뺀다 — 새 요소 없이 기존 두 자식(텍스트·이미지)의 순서·너비만 조정. */
@media (max-width:1300px){
.s3-row-block{flex-wrap:wrap;margin-left:0;gap:24px;}
.s3-row-block--mt70 .s3-row-block__text,
.s3-row-block--mt152 .s3-row-block__text{width:100%;}
.s3-row-block .s3-figure--row{width:100%;}
.s3-row-block .s3-figure--row img{width:100%;height:auto;}
.s3-device-pair{width:100%;justify-content:center;flex-wrap:wrap;}
.s3-device-pair img{width:calc(50% - 17px);height:auto;}
}
@media (max-width:1024px){
.s3-band p.s3-lead {font-size: 30px;}
.s3-subtitle {font-size: 30px;}
.s3-h3 {font-size: 26px;}
.s3-compare-row {gap: 44px;}
.s3-compare-row .item {flex-wrap: wrap; justify-content: center; align-items: flex-start; flex: 0 0 calc(50% - 22px);}
.s3-compare-row .txt {width: 100%; text-align: center;}
}
/* s3_5 — 위팔 갤러리 콜라주(747:5010·747:5015·747:5112)는 802×693 절대좌표 3장 겹침 구성이라
768 이하에서 컨테이너 폭(802px)이 그대로 남아 화면 밖으로 나갔다(격리 시험 — .s3-gallery--radial
숨기면 768/375 넘침이 .lede 값 수준까지 떨어진다). 컨테이너를 가변 폭으로 줄이고 내부 3장은
컨테이너 대비 %로 다시 잡아 같은 겹침 비율을 유지한다 — 원본 좌표(795,2147 기준)를 컨테이너
802×693 대비 비율로 환산한 값이다(381/802=47.5% · 500/802=62.3% · 526/802=65.6% 등). */
@media (max-width:768px){
.s3-band__inner {padding: 90px 15px 0;}
.s3-hero-divider {margin-top: 40px;}
.s3-band p.s3-lead {margin-top: 40px; font-size: 26px;}
.s3-band p br {display: none;}
.s3-subtitle {font-size: 26px;}
.s3-subtitle br {display: none;}
.s3-h3 {font-size: 20px;}
.s3-quote-box h3 {font-size: 22px;}
.s3_1 .arti04.s3-body p {margin-left: 0;}
.s3_1 .arti04 .s3-figure img {max-width: 100%; height: auto;}
.s3_5 .s3-gallery--radial{
position:relative;left:auto;width:100%;max-width:380px;height:auto;aspect-ratio:802/693;
margin:60px auto 39px;
}
.s3_5 .s3-gallery__small{position:absolute;left:0;top:20.3%;width:47.5%;height:auto;aspect-ratio:1/1;margin:0;}
.s3_5 .s3-gallery__small img{width:100%;height:100%;}
.s3_5 .s3-gallery__big{position:absolute;left:37.7%;top:0;width:62.3%;height:auto;aspect-ratio:1/1;margin:0;}
.s3_5 .s3-gallery__big img{width:100%;height:100%;}
.s3_5 .s3-gallery__bigbg{position:absolute;left:29.4%;top:31%;width:65.6%;height:auto;aspect-ratio:526/478;}
.s3_5 .s3-gallery__bigbg img{width:100%;height:100%;}
}
/* 이중턱 도트 팝업 — 도트는 02_section(832:8083) 이중턱DOT, 카드·연결선은 02_section_popup(832:8082).
도트 중심 좌표는 도해 이미지(1920×1501) 대비 %, 카드·연결선은 팝업 프레임에서 잰 도트 중심 기준 거리(1920 폭 px).
동작 부품 js/custom/dot-popup-1.0.0.inpiad.js · 공통 스타일 css/_sub-dotpop.css */
.s3_2 .arti02 .dp{max-width:none;}
.s3_2 .dp__dot--doublechin,.s3_2 .dp__pop--doublechin{--x:39.062%;--y:39.49%;}
.s3_2 .dp__pop--doublechin{--cw:527;--cdx:305;--cdy:-362;--lx:159;--ly:-15.5;--len:293.068;--rot:-4.89;}
@media (max-width: 768px){
.s3_1 .real-cont {padding-bottom: 80px;}
.s3-subtitle {font-size: 22px;}
.s3_3 .real-cont {padding-top: 50px;}
.s3_4 .real-cont {padding-top: 50px; padding-bottom: 80px;}
.s3-compare-row {align-items: flex-start;}
.s3-promise .head {font-size: 26px; padding: 0 15px;}
}
@media (max-width: 480px){
.s3-band p.s3-lead {font-size: 22px;}
.s3-h3 {font-size: 18px;}
.s3-body p {font-size: 16px;}
.s3-quote-box h3 {font-size: 20px;}
.s3_1 .s3-device img {height: auto;}
.s3-compare-row {gap:40px 20px;}
.s3-compare-row .item {flex: 0 0 calc(50% - 10px); gap: 15px;}
.s3-compare-row .txt {font-size: 16px;}
.s3-note-card .head {font-size: 18px;}
.s3-note-card li {font-size: 16px; padding: 10px 0;}
.s3-promise .head {font-size: 22px;}
.s3-promise {padding: 40px 0 80px; height: auto;}
.s3-promise .body strong {font-size: 18px;}
.s3-promise .body {font-size: 16px;}
}