로 우회하던 방법(lip-cupid §7 ·
mouth-botox §6)을 이제 안 써도 된다 — 다만 이미 감싼 자리는 그대로 둔다. */
.gd-medfig.gd-sbody--lead{margin-top:clamp(24px,4.27vw,82px)}
/* 원본 해상도가 낮은 도해는 확대하면 라벨이 뭉갠다. 원본 폭에서 멈춘다. */
.gd-medfig--sm{max-width:595px}
/* 원본보다 크게 늘리지 않는다. 상자가 원본보다 넓으면 상자가 이미지를 감싼다 —
.gd-medfig 의 배경(#e9eef6)은 로딩 플레이스홀더라 드러나면 띠로 보인다 */
.gd-medfig--nat{width:max-content;max-width:100%}
.gd-medfig--nat img{width:auto;max-width:100%}
/* 도해 한 장만 놓는 단독 밴드용. --nat 이 width:max-content 라 부모의 text-align:center
로는 가운데로 오지 않는다(블록 요소는 정렬이 아니라 여백으로 가운데에 선다).
2026-08-20 philtrum-lipline §5b(만족도 그래프)·§8b(사례 사진)에서 필요해졌다 —
밴드를 쪼개면 «도해 한 장뿐인 밴드»가 생기는데 sub.css 에 그걸 가운데 세우는 수단이
없었다. 새 셀렉터라 이 클래스를 붙이지 않은 나머지 60장의 픽셀에는 영향이 0이다. */
.gd-medfig--ctr{margin-inline:auto}
/* 기관 인증 마크는 도해가 아니라 배지다 — 옆 인물컷의 87% 폭을 먹으면 위계가 뒤집힌다 */
.gd-medfig--badge{max-width:clamp(190px,20.8vw,300px)}
/* 원형 도해를 «원만» 보이게 자른다. 원문에서 잘라 온 원은 정사각 상자 안에 네 변에
딱 닿아 있어(face-implant 절개 도해: 651x651, 중심 325 반지름 325) CSS 원과 그림 원이
그대로 겹친다. 알파 PNG 로 만들면 2048^2 이 5MB 를 넘어 이 방법이 훨씬 싸다(알파 0바이트).
2026-08-20 사용자 요청 — 「원형만 필요. 그 밑에 네모난 박스 모양이 필요없어」. */
.gd-medfig--circle{border-radius:50%}
/* 여러 칸에 나란히 놓는 그림칸을 **한 크기**로 맞춘다. 원문에서 잘라 온 조각은
높이가 제각각일 수 있다 — lift-neck §8 STEP 은 1행 384x375 / 2행 384x302 로,
2행은 그림 위에 겹쳐 구워진 「선택 가능」 배지를 빼느라 위에서 끊었기 때문이다
(배지 둘레가 흰 여백이 아니라 어깨 살색이라 지우면 구멍이 난다 — 실측).
.gd-step-media(object-fit:cover)로 맞추면 목선이 잘리므로, 자르지 않고 **상자만**
같은 비율로 세우고 그림은 그 안에서 줄인다. 남는 자리는 원문 그림칸과 같은 흰색이라
보이지 않는다. 원본보다 키우지도 않는다(width/height:auto).
2026-08-20 사용자 요청 — 「이미지 사이즈가 동일하지 않아. step1처럼 그 사이즈로」. */
.gd-medfig--fit{aspect-ratio:384/375;display:grid;place-items:center;background:#fff}
.gd-medfig--fit picture{display:grid;place-items:center;width:100%;height:100%;min-height:0}
.gd-medfig--fit img{width:auto;height:auto;max-width:100%;max-height:100%}
/* 19d. 비교형 — 같은 축으로 여러 제품·술식을 나란히 견주는 자리.
.gd-checks 로도 담기지만 그러면 속성이
로 이어붙은 한 덩어리 문장이 되어
"무엇이 다른가"가 안 읽힌다(skin-juvelook §7 = 제품 4종 × 속성 4개).
카드마다 같은
축을 세워 눈이 세로로 내려가게 한다. 이미지 0장.
크림 밴드 위에서 --gd-cardline 은 1.38:1 이라 경계 구실을 못 하므로
.gd-numcard 와 같은 방식으로 **흰 면**으로 경계를 만든다. */
.gd-compare{
margin-top:clamp(20px,2.08vw,40px);
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
gap:clamp(10px,1.04vw,20px);
}
/* 견줄 대상이 2종뿐인 자리(일반 시술 VS 골든디아망 술식). 4열에 2장을 넣으면
오른쪽 절반이 빈다. 값을 하나도 버리지 않고 열 수만 바꾸는 한 줄이라
.gd-steps--2 / --4 / --5 와 같은 사유다(RESUME 절대규칙 4).
≤768 은 파일 말미 .gd-compare 2열 규칙이, ≤480 은 1열 규칙이 그대로 이긴다. */
.gd-compare--2{grid-template-columns:repeat(2,minmax(0,1fr))}
/* 비교 대상이 3종이면 기본 4열에서 오른쪽 한 칸이 빈다. 값은 하나도 안 버리고 열 수만 바꾼다 */
.gd-compare--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.gd-compare>li{
background:#fff;border-radius:var(--gd-r);
padding:clamp(16px,1.46vw,28px) clamp(14px,1.25vw,24px);
}
.gd-compare-t{
padding-bottom:clamp(9px,.78vw,15px);border-bottom:1px solid var(--gd-cardline);
font-size:clamp(13.5px,1.04vw,20px);font-weight:700;line-height:1.35;
letter-spacing:-.035em;color:var(--gd-ink);
}
.gd-compare dl{display:grid;gap:0;margin:clamp(10px,.94vw,18px) 0 0}
/* 한 항목(라벨+값)이 한 «행»으로 읽히게 묶는다. 기본은 gap 하나로 dt·dd 를 균등하게
띄워서, 「수술시간→6시간」 간격과 「6시간→개선범위」 간격이 같았다. 그래서 여덟 줄이
그냥 흘러내리고 표로 안 보인다(2026-08-20 사용자 지적 — lift-oneday §11 · lift-neck).
라벨→값은 붙이고, 항목 사이만 띄우고 실선을 그어 눈이 가로로 건너가게 한다.
채워진 칸(is-me)은 갈색 바탕이라 --gd-cardline 이 안 보여 흰 선으로 바꾼다. */
.gd-compare dt+dd{margin-top:clamp(3px,.26vw,5px)}
.gd-compare dd+dt{
margin-top:clamp(10px,.94vw,18px);padding-top:clamp(10px,.94vw,18px);
border-top:1px solid var(--gd-cardline);
}
.gd-compare>li.is-me dd+dt{border-top-color:rgba(255,255,255,.22)}
/* 19e. RANGE — 인물 위에 지시 라벨을 얹는 도해.
원문(lift-neck §6)은 평평한 회색 판 위에 인물 + 알약 라벨 6개 + 지시선 6개가
**통째로 구워진** 한 장이었다. 구운 글자라 확대하면 뭉개지고, 밴드 배경색이
바뀌면 회색 판이 그대로 드러난다. 인물만 투명 배경으로 뽑고
(tools/make_assets_43_range.py) 라벨·지시선은 여기서 다시 그린다.
좌표계를 원본과 같은 1451x840 으로 두어 실측 좌표가 %·viewBox 로 그대로 옮겨진다.
2026-08-20 사용자 요청 — 「투명 배경으로 중간에 모델이 있고, html 로 요소들을
다시 재현. 텍스트로 전체 폰트랑 잘 맞는 폰트로」. 알약 글자는 본문과 같은
var(--gd-sans) 를 그대로 쓴다(별도 폰트 로딩 0). */
.gd-range{position:relative;aspect-ratio:1451/840;margin-top:clamp(20px,2.08vw,40px)}
.gd-range-fig{position:absolute;inset:0;margin:0}
.gd-range-fig picture{display:block;width:100%;height:100%}
.gd-range-fig img{width:100%;height:100%;object-fit:contain}
/* viewBox 가 컨테이너와 같은 비율이라 meet 로 좌표가 1:1 로 맞는다 */
.gd-range-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.gd-range-svg line{stroke:var(--gd-brown-dp);stroke-width:2;stroke-linecap:round;opacity:.7}
.gd-range-svg circle{fill:var(--gd-brown-dp);opacity:.9}
/* 알약은 «선이 나가는 모서리» 를 붙박아 둔다 — 글자 길이가 달라도 선 시작점이 안 움직인다.
⚠ 세로 가운데 맞춤에 transform 을 쓰면 안 된다 — 알약에 .gd-reveal 이 함께 붙어 있고
main.css 114 의 `.gd-reveal.is-in{transform:none}`(0,2,0)이 여기(0,1,0)를 **이긴다.**
그래서 리빌이 끝나는 순간 -50% 가 사라져 알약이 제 높이의 절반만큼 아래로 내려앉고,
SVG 지시선 여섯 줄이 전부 알약 위쪽 허공에서 시작했다
(2026-08-21 실측: x 는 오차 0.1px 인데 y 만 일정하게 -21.6px = 알약 높이의 절반).
독립 속성 `translate` 는 transform 과 따로 합성되므로 리빌이 덮어쓰지 못한다. */
.gd-range-t{
position:absolute;translate:0 -50%;margin:0;
padding:clamp(5px,.62vw,12px) clamp(11px,1.32vw,26px);
background:#fff;border:1px solid var(--gd-cardline);border-radius:999px;
font-size:clamp(11px,1.25vw,24px);font-weight:700;line-height:1.3;
letter-spacing:-.035em;color:var(--gd-ink);white-space:nowrap;
}
/* 2026-08-21 사용자 요청 「표 안에 있는 제목들을 강조해줬으면 좋겠어」(skin-inmode-onda §7).
행 이름(에너지 방식·주요 목적…)이 10.5~13px weight 500 회색이라 카드에서 가장 먼저
사라진다 — 값보다 작고 흐려서 «무엇을 견주는 축인지»가 안 읽혔다. 작은 라벨은 이 사이트
공통으로 --gd-brown-dp 700 이다(.gd-check-no · .gd-numcard b · .gd-numlist b 와 같은 처리).
흰 카드 대비 5.99:1 로 소형 텍스트 AA 를 넘는다. 값(dd)보다는 여전히 작아 위계는 그대로다.
전역 규칙이라 .gd-compare 를 쓰는 10장에 같이 걸린다([[gd-reference-page-not-frozen]]). */
.gd-compare dt{
font-size:clamp(11px,.78vw,15px);font-weight:700;letter-spacing:.02em;
color:var(--gd-brown-dp);
}
.gd-compare dd{
margin:0;font-size:clamp(12.5px,.83vw,16px);line-height:1.45;
letter-spacing:-.02em;color:#3d4352;
}
/* 그 페이지가 다루는 제품 한 칸만 채워 세운다 — 어느 칸이 주인공인지가 비교표의
정보다. 흰 글자를 얹으므로 --gd-brown(4.7:1) 이 아니라 -dp(6.0:1) 를 쓴다. */
.gd-compare>li.is-me{background:var(--gd-brown-dp)}
.gd-compare>li.is-me .gd-compare-t{color:#fff;border-bottom-color:rgba(255,255,255,.3)}
/* .68 은 #173fae 위에서 3.75:1 이라 10.5~13px 라벨에 못 미친다(4.5:1 필요).
.82 = 4.64:1. 값을 재서 올렸다. */
.gd-compare>li.is-me dt{color:rgba(255,255,255,.82)}
.gd-compare>li.is-me dd{color:#fff}
/* 19f. 대비형(VS) — 두 술식을 «같은 행»에서 맞대는 자리.
(19e 는 위 RANGE 가 이미 쓰고 있어 f 로 매긴다)
.gd-compare 는 카드마다 축을 따로 세우므로 (1) 행 이름이 양쪽에 두 번 적히고
(2) 두 카드의 행이 우연히만 맞는다(값 길이가 달라지는 순간 어긋난다).
원문(lift-brow-endoscopic §9 = 0c9cbc4fed62b.jpg)은 좌우 두 열 사이에 「구분」 칸을
세운 3열 표라 그 구조를 그대로 받는다.
진짜 로 짠다 — 행 정렬이 조판이 아니라 **구조로** 보장되고, 스크린리더가
「시술 방법 · 실리프팅 · 고정된 실이…」처럼 행·열을 짚어 읽는다.
견줄 대상이 3종 이상이면 이게 아니라 .gd-compare 다(가운데 축이 하나뿐이라 2종 전용). */
.gd-vs{
width:100%;margin-top:clamp(20px,2.08vw,40px);
border-collapse:separate;border-spacing:0;table-layout:fixed;
background:#fff;border-radius:var(--gd-r);overflow:hidden;
}
/* 가로 패딩이 넉넉해야 값 칸의 글줄이 원문처럼 두 줄로 접힌다. 26px 이면 값 칸이
585px 이 되어 「내시경을 이용하여…당겨줌」이 한 줄 570px 로 늘어진다(1440 실측). */
.gd-vs th,.gd-vs td{
padding:clamp(12px,1.15vw,22px) clamp(14px,3vw,58px);
text-align:center;vertical-align:middle;
border-bottom:1px solid var(--gd-cardline);
}
/* ⚠ tbody 로 좁혀야 한다. 안의 도 그 부모의 마지막 자식이라
`.gd-vs tr:last-child` 로 쓰면 **머리행 밑줄까지 지워진다**(실측: thead 셀
border-bottom-width 가 0 이 되어 채운 열이 한 덩어리로 보였다). */
.gd-vs tbody tr:last-child th,.gd-vs tbody tr:last-child td{border-bottom:0}
.gd-vs thead th{
font-size:clamp(13px,1.04vw,20px);font-weight:700;
letter-spacing:-.03em;line-height:1.35;color:var(--gd-ink);
}
.gd-vs tbody td{
font-size:clamp(12.5px,.83vw,16px);font-weight:500;line-height:1.5;
letter-spacing:-.02em;color:#3d4352;
}
/* 가운데 축 — 이 칸이 행 이름 노릇을 한다. 폭을 고정해 양쪽 값 칸이 같은 폭이 된다 */
.gd-vs .gd-vs-ax{
width:clamp(92px,13.2vw,190px);background:var(--gd-cream);
font-size:clamp(11.5px,.83vw,16px);font-weight:700;letter-spacing:-.02em;
color:var(--gd-ink-2);
}
/* 그 페이지가 다루는 술식 열만 채워 세운다 — 어느 쪽이 주인공인지가 비교표의 정보다.
흰 글자를 얹으므로 --gd-brown(4.7:1) 이 아니라 -dp(6.0:1) 를 쓴다(.gd-compare 와 같은 사유). */
.gd-vs .is-me{background:var(--gd-brown-dp)}
.gd-vs thead .is-me,.gd-vs tbody .is-me{color:#fff}
.gd-vs tbody .is-me{font-weight:700}
/* 채운 열 안에서는 흰 선이 아니면 행 경계가 안 보인다. .28 은 #173fae 위에서 너무 묽어
한 덩어리로 보였다(1440 캡처 확인) — 흰 칸의 --gd-cardline 과 눈으로 같아지는 값. */
.gd-vs .is-me{border-bottom-color:rgba(255,255,255,.42)}
/* 머리행과 값행 사이는 한 단계 진하게 — 세 열이 같은 높이에서 갈라져야 표로 읽힌다 */
.gd-vs thead th{border-bottom-color:var(--gd-brown-dp)}
.gd-vs thead .is-me{border-bottom-color:rgba(255,255,255,.62)}
/* 모바일에서만 쓰는 열 이름(각 값 칸의 data-col). 3열을 390px 에 밀어넣으면
칸당 100px 이 안 돼 「고정된 / 실이 / 한 곳」처럼 두세 글자씩 끊긴다 */
.gd-vs td::before{display:none}
@media (max-width:768px){
/* 컨테이너가 728px 밑으로 내려가면 알약 글자가 8px 이하가 되어 못 읽는다.
겹치게 두느니 그림 아래로 펴고, 어느 지점을 가리키는지는 img[alt] 가 받는다. */
.gd-range{aspect-ratio:auto}
.gd-range-fig{position:static}
.gd-range-fig img{height:auto}
.gd-range-svg{display:none}
.gd-range-t{position:static;transform:none;translate:none;display:inline-block;margin:8px 8px 0 0}
/* 4열이면 카드 폭이 150px 밑으로 떨어져 dd 가 두세 글자씩 끊긴다 */
.gd-compare{grid-template-columns:repeat(2,minmax(0,1fr))}
.gd-branch li{grid-template-columns:minmax(0,1fr);gap:6px;align-items:start}
.gd-branch li::before{top:clamp(20px,5vw,26px)}
.gd-ratio-seg{padding:14px 16px}
}
@media (max-width:480px){
.gd-compare{grid-template-columns:minmax(0,1fr)}
}
/* .gd-vs 3열을 좁은 화면에 그대로 두면 값 칸이 100px 밑으로 떨어져 「고정된 / 실이 /
한 곳」처럼 두세 글자씩 끊긴다. 행마다 [구분 → 좌값 → 우값] 세 줄로 편다.
을 그리드로 바꿔야 가운데(DOM 2번째)인 축 칸을 order 로 맨 위에 올릴 수 있다 —
display:block 만으로는 순서를 못 바꾼다. 열 이름은 각 값 칸의 data-col 로 되살린다. */
@media (max-width:640px){
.gd-vs,.gd-vs tbody{display:block}
.gd-vs thead{display:none}
.gd-vs tbody tr{display:grid;grid-template-columns:minmax(0,1fr);border-bottom:1px solid var(--gd-cardline)}
.gd-vs tbody tr:last-child{border-bottom:0}
.gd-vs th,.gd-vs td{border-bottom:0;text-align:left;padding:12px 16px}
.gd-vs .gd-vs-ax{order:-1;width:auto}
.gd-vs td::before{
content:attr(data-col);display:block;margin-bottom:3px;
font-size:11px;font-weight:700;letter-spacing:.01em;opacity:.72;
}
.gd-vs .is-me{border-bottom:0}
}
/* --- 20. OPTCARD — 흰 카드 + 먹색 알약 목록 ------------------------------
두 갈래(연령대·타입)를 나란히 놓고 «어느 쪽에 무엇이 있는가»만 보여 주는 자리.
.gd-compare 는 두 카드에 **같은 축(dt)** 이 설 때 쓰는 것이라, 항목 수가 서로
다르면(eye §5 = 3개 vs 4개) 축을 세울 수 없다. 원문(21a08e76a367e.png)도 축 없이
흰 카드 안에 먹색 알약을 쌓아 둔 조판이라 그대로 받는다.
크림 밴드 위에서 --gd-cardline 은 1.38:1 이라 경계 구실을 못 하므로 **흰 면**으로
경계를 만든다(.gd-numcard · .gd-compare 와 같은 사유). 새 셀렉터라 다른 페이지 영향 0. */
.gd-optcard{
/* .gd-2col 이 align-items:start 라 항목 수가 다르면 두 카드 높이가 갈린다.
원문도 두 카드가 같은 높이라 행 높이를 채우게 둔다(짧은 쪽 아래가 여백이 된다). */
align-self:stretch;
background:#fff;border-radius:var(--gd-r);
padding:clamp(22px,2.08vw,40px) clamp(18px,1.77vw,34px) clamp(24px,2.29vw,44px);
}
/* 20b. NOTELIST — 「시술 전 후 주의사항」처럼 짧은 문장이 여러 줄 서는 자리.
.gd-snote 는 13px 회색 한 덩어리라 7줄이 되면 눈이 미끄러진다(2026-08-21 사용자 지적
— 「주의사항 내용이 잘 안 보여. 라운드 박스에 문장씩 담아서 나열하고 글자도 키워줘」).
문장마다 흰 라운드 박스로 끊고 글자를 13 → 16.6px(@1440)로 올린다. 낱말은 그대로다.
가운뎃점은 원문의 «글자»가 아니라 목록 기호라 CSS 로 세운다(마크업에서는 뺀다).
새 셀렉터라 이 클래스를 붙이지 않은 나머지 페이지 픽셀에는 영향이 0이다. */
.gd-notelist{margin-top:clamp(16px,1.46vw,28px);display:grid;gap:clamp(8px,.68vw,13px)}
.gd-notelist li{
display:grid;grid-template-columns:auto minmax(0,1fr);
gap:clamp(7px,.57vw,11px);align-items:start;
padding:clamp(12px,1.11vw,21px) clamp(15px,1.35vw,26px);
background:#fff;border-radius:var(--gd-r);
font-size:clamp(13px,1.15vw,22px);line-height:1.5;
letter-spacing:-.028em;color:var(--gd-ink);
}
.gd-notelist li::before{content:"\00B7";font-weight:700;color:var(--gd-brown-dp)}
.gd-pilllist{display:grid;gap:clamp(8px,.78vw,15px);margin-top:clamp(16px,1.46vw,28px)}
.gd-pilllist li{
display:flex;align-items:center;justify-content:center;
min-height:clamp(42px,3.28vw,63px);
padding:clamp(8px,.68vw,13px) clamp(12px,1.15vw,22px);
background:var(--gd-deep);border-radius:999px;
font-size:clamp(12.5px,.89vw,17px);font-weight:700;line-height:1.4;
letter-spacing:-.025em;color:#fff;text-align:center;
}