@charset "utf-8";
/* 이미지에 박혀 있던 라벨·선·설명을 HTML 로 분리 — 2026-10-21
 * 배경은 글자·요소를 지운 *_clean 이미지(원본 이미지는 그대로 둠).
 * .dj-stage 는 원래의 background: center/cover 와 똑같이 커지고 잘린다(min-width/min-height + aspect-ratio).
 * 안의 요소는 원본 이미지의 픽셀 좌표(--x, --y …)로 적고 % 로 바꿔 놓으며, 글자 크기는 cqw 라 이미지와 같은 비율로 커진다.
 * 좌표·크기는 섹션별 블록(.dj-s31 …)에 PC(원본 PC 이미지 기준)·모바일(원본 모바일 이미지 기준) 두 벌로 둔다. */

.dj-split { position: relative; overflow: hidden; }
.dj-split > .wrap { position: relative; z-index: 1; }
.dj-stage {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	min-width: 100%; min-height: 100%; aspect-ratio: var(--W) / var(--H);
	background: var(--bg) no-repeat center / 100% 100%;
	container-type: inline-size;
	letter-spacing: 0;
}
.dj-stage > div { display: contents; }
.dj-stage .dj-tag, .dj-stage .dj-line, .dj-stage .dj-desc {
	position: absolute; margin: 0;
	left: calc(var(--x) * 100% / var(--W)); top: calc(var(--y) * 100% / var(--H));
}
.dj-tag {
	width: calc(var(--pw) * 100% / var(--W)); height: calc(var(--tagh) * 100% / var(--H));
	display: flex; align-items: center; justify-content: center;
	border-radius: 999px; background: #fff; color: #111; font-weight: 700;
	font-size: max(var(--min-tag, 0px), calc(var(--fs-tag) * 100cqw / var(--W)));
	white-space: nowrap;
}
.dj-line {
	width: calc((var(--x2) - var(--x)) * 100% / var(--W)); height: 1px;
	background: rgba(255, 255, 255, .9);
}
.dj-line::after {
	content: ""; position: absolute; top: 50%; right: 0;
	width: calc(var(--dot) * 100cqw / var(--W)); aspect-ratio: 1;
	border-radius: 50%; background: #fff; transform: translate(50%, -50%);
}
.dj-line.dl::after { right: auto; left: 0; transform: translate(-50%, -50%); }   /* 라벨이 오른쪽, 점이 왼쪽 끝 */
.dj-desc {
	color: #222; font-weight: 400; white-space: nowrap;
	font-size: max(var(--min-desc, 0px), calc(var(--fs-desc) * 100cqw / var(--W)));
	line-height: calc(var(--lh) / var(--fs-desc));
}
.dj-desc .dj-mo { display: none; }
@media (max-width: 990px) {
	.dj-desc .dj-pc { display: none; }
	.dj-desc .dj-mo { display: inline; }
}

/* 실리프팅(sub3_1) — 시술 부위. 원본 sub04_01_sec04_bg.jpg(2000×800) / sub04_01_sec04_bgm.png(1080×1343) */
.sub4_1 .sec04.dj-s31 { background: #b0b5c8; }
.dj-s31 .dj-stage { --W: 2000; --H: 800; --bg: url(../img/sub/sub04_01_sec04_bg_clean.jpg); --tagh: 40; --pw: 120; --dot: 12; --fs-tag: 20; --fs-desc: 16.25; --lh: 30; }
.dj-s31 .p1 .dj-tag { --x: 700; --y: 207; }
.dj-s31 .p1 .dj-line { --x: 820; --y: 227; --x2: 1170; }
.dj-s31 .p1 .dj-desc { --x: 718; --y: 261; }
.dj-s31 .p2 .dj-tag { --x: 465; --y: 405; }
.dj-s31 .p2 .dj-line { --x: 585; --y: 425; --x2: 1045; }
.dj-s31 .p2 .dj-desc { --x: 483; --y: 459; }
.dj-s31 .p3 .dj-tag { --x: 605; --y: 558; }
.dj-s31 .p3 .dj-line { --x: 725; --y: 578; --x2: 1045; }
.dj-s31 .p3 .dj-desc { --x: 623; --y: 612; }
@media (max-width: 990px) {
	.sub4_1 .sec04.dj-s31 { background: #a9aec2; }
	.dj-s31 .dj-stage { --W: 1080; --H: 1343; --bg: url(../img/sub/sub04_01_sec04_bgm_clean.jpg); --tagh: 42; --pw: 147; --dot: 12; --fs-tag: 28; --fs-desc: 19.75; --lh: 30; --min-tag: 9.5px; --min-desc: 8px; }
	.dj-s31 .p1 .dj-tag { --x: 115; --y: 581; }
	.dj-s31 .p1 .dj-line { --x: 262; --y: 601; --x2: 571.5; }
	.dj-s31 .p1 .dj-desc { --x: 113; --y: 639; }
	.dj-s31 .p2 .dj-tag { --x: 51; --y: 774; }
	.dj-s31 .p2 .dj-line { --x: 198; --y: 795; --x2: 470.5; }
	.dj-s31 .p2 .dj-desc { --x: 50; --y: 833; }
	.dj-s31 .p3 .dj-tag { --x: 81; --y: 1012; }
	.dj-s31 .p3 .dj-line { --x: 228; --y: 1033; --x2: 489.5; }
	.dj-s31 .p3 .dj-desc { --x: 80; --y: 1071; }
}

/* 보톡스·필러(sub3_2) — 시술 부위. 원본 sub04_02_sec04_bg.jpg(2000×800) / sub04_02_sec04_bgm.jpg(1080×1343) */
.sub4_1.sub6_2 .sec04.dj-s32 { background: #8b95ab; }
.dj-s32 .dj-stage { --W: 2000; --H: 800; --bg: url(../img/sub/sub04_02_sec04_bg_clean.jpg); --tagh: 40; --pw: 120; --dot: 12; --fs-tag: 20; }
.dj-s32 .p1 .dj-tag { --x: 530; --y: 335; }
.dj-s32 .p1 .dj-line { --x: 650; --y: 355; --x2: 999.5; }
.dj-s32 .p2 .dj-tag { --x: 711; --y: 399; }
.dj-s32 .p2 .dj-line { --x: 831; --y: 419; --x2: 1067.0; }
.dj-s32 .p3 .dj-tag { --x: 1441; --y: 448; }
.dj-s32 .p3 .dj-line { --x: 1256.5; --y: 468; --x2: 1441; }
.dj-s32 .p4 .dj-tag { --x: 1423; --y: 608; }
.dj-s32 .p4 .dj-line { --x: 1170.5; --y: 628; --x2: 1423; }
@media (max-width: 990px) {
	.sub4_1.sub6_2 .sec04.dj-s32 { background: #919bb1; }
	.dj-s32 .dj-stage { --W: 1080; --H: 1343; --bg: url(../img/sub/sub04_02_sec04_bgm_clean.jpg); --tagh: 55; --pw: 172; --dot: 12; --fs-tag: 29; --min-tag: 9.5px; }
	.dj-s32 .p1 .dj-tag { --x: 59; --y: 747; }
	.dj-s32 .p1 .dj-line { --x: 231; --y: 773; --x2: 351.5; }
	.dj-s32 .p2 .dj-tag { --x: 59; --y: 819; }
	.dj-s32 .p2 .dj-line { --x: 231; --y: 845; --x2: 413.0; }
	.dj-s32 .p3 .dj-tag { --x: 849; --y: 885; }
	.dj-s32 .p3 .dj-line { --x: 649.0; --y: 912; --x2: 849; }
	.dj-s32 .p4 .dj-tag { --x: 849; --y: 1092; }
	.dj-s32 .p4 .dj-line { --x: 520.5; --y: 1118; --x2: 849; }
}

/* 줄기세포 올인원 셀 케어(sub4_3) — 시술 부위. 원본 sub02_03_sec04_bg.jpg(2000×800) / sub02_03_sec04_bg_m.jpg(1080×1343) */
.sub2_3 .sec04.dj-s43 { background: #949db3; }
.dj-s43 .dj-stage { --W: 2000; --H: 800; --bg: url(../img/sub/sub02_03_sec04_bg_clean.jpg); --tagh: 40; --pw: 120; --dot: 12; --fs-tag: 20; }
.dj-s43 .p1 .dj-tag { --x: 669; --y: 261; }
.dj-s43 .p1 .dj-line { --x: 789; --y: 281; --x2: 1138.5; }
.dj-s43 .p2 .dj-tag { --x: 675; --y: 375; }
.dj-s43 .p2 .dj-line { --x: 795; --y: 395; --x2: 984.5; }
.dj-s43 .p3 .dj-tag { --x: 1468; --y: 403; }
.dj-s43 .p3 .dj-line { --x: 1308.5; --y: 423; --x2: 1468; }
.dj-s43 .p4 .dj-tag { --x: 695; --y: 426; }
.dj-s43 .p4 .dj-line { --x: 815; --y: 446; --x2: 1082.5; }
.dj-s43 .p5 .dj-tag { --x: 1477; --y: 449; }
.dj-s43 .p5 .dj-line { --x: 1151.0; --y: 468; --x2: 1477; }
.dj-s43 .p6 .dj-tag { --x: 669; --y: 478; }
.dj-s43 .p6 .dj-line { --x: 789; --y: 498; --x2: 1042.5; }
.dj-s43 .p7 .dj-tag { --x: 1372; --y: 509; }
.dj-s43 .p7 .dj-line { --x: 1212.5; --y: 529; --x2: 1372; }
.dj-s43 .p8 .dj-tag { --x: 1467; --y: 577; }
.dj-s43 .p8 .dj-line { --x: 1163.5; --y: 597; --x2: 1467; }
.dj-s43 .p9 .dj-tag { --x: 1480; --y: 629; }
.dj-s43 .p9 .dj-line { --x: 1176.5; --y: 649; --x2: 1480; }
@media (max-width: 990px) {
	.sub2_3 .sec04.dj-s43 { background: #919bb1; }
	.dj-s43 .dj-stage { --W: 1080; --H: 1343; --bg: url(../img/sub/sub02_03_sec04_bg_m_clean.jpg); --tagh: 55; --pw: 172; --dot: 12; --fs-tag: 29; --min-tag: 9.5px; }
	.dj-s43 .p1 .dj-tag { --x: 59; --y: 656; }
	.dj-s43 .p1 .dj-line { --x: 231; --y: 682; --x2: 499.5; }
	.dj-s43 .p2 .dj-tag { --x: 59; --y: 776; }
	.dj-s43 .p2 .dj-line { --x: 231; --y: 802; --x2: 340.5; }
	.dj-s43 .p3 .dj-tag { --x: 849; --y: 814; }
	.dj-s43 .p3 .dj-line { --x: 699.5; --y: 841; --x2: 849; }
	.dj-s43 .p4 .dj-tag { --x: 59; --y: 837; }
	.dj-s43 .p4 .dj-line { --x: 231; --y: 863; --x2: 425.5; }
	.dj-s43 .p5 .dj-tag { --x: 849; --y: 875; }
	.dj-s43 .p5 .dj-line { --x: 518.5; --y: 901; --x2: 849; }
	.dj-s43 .p6 .dj-tag { --x: 59; --y: 914; }
	.dj-s43 .p6 .dj-line { --x: 231; --y: 940; --x2: 395.5; }
	.dj-s43 .p7 .dj-tag { --x: 849; --y: 935; }
	.dj-s43 .p7 .dj-line { --x: 614.0; --y: 960; --x2: 849; }
	.dj-s43 .p8 .dj-tag { --x: 849; --y: 1019; }
	.dj-s43 .p8 .dj-line { --x: 520.5; --y: 1045; --x2: 849; }
	.dj-s43 .p9 .dj-tag { --x: 849; --y: 1092; }
	.dj-s43 .p9 .dj-line { --x: 520.5; --y: 1118; --x2: 849; }
}

/* ── 그림(img) 위에 글자를 얹는 경우 ───────────────────────────────────────────
 * .dj-fig 가 원래 img 의 크기 규칙(원래 크기, 최대 100%)을 그대로 따르고, img 는 그 안을 꽉 채운다.
 * 안의 요소는 원본 그림의 픽셀 좌표 × --u(= 그림 1px 이 지금 몇 px 인지)로 놓아 그림과 함께 줄어든다. */
.dj-fig { position: relative; display: inline-block; margin: 0; width: calc(var(--W) * 1px); max-width: 100%; container-type: inline-size; letter-spacing: 0; line-height: 1.2; text-align: left; }
.dj-fig > img { display: block; width: 100% !important; height: auto; }
.dj-fig .dj-a { --u: calc(100cqw / var(--W)); position: absolute; margin: 0; padding: 0; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); }

/* 리프팅(sub3_5) — 피부층 표. 원본 sub03_sec03.png(1141×444) */
.dj-f35 { --W: 1141; }
.dj-f35 .tri { --x: 597; --y: 108; width: calc(70 * var(--u)); height: calc(43 * var(--u)); clip-path: polygon(100% 0, 0 100%, 100% 100%); background: linear-gradient(90deg, #c57c97 55%, #9a6074); }
.dj-f35 .card { --x: 666; --y: 108; width: calc(457 * var(--u)); list-style: none; box-shadow: 0 0 calc(22 * var(--u)) rgba(0, 0, 0, .3); background: #fff; }
.dj-f35 .card li { position: relative; box-sizing: border-box; height: calc(69 * var(--u)); border: 1px solid #bfac9c; border-bottom: 0; background: #fff; }
.dj-f35 .card li:nth-child(odd) { background: #fff2f3; }
.dj-f35 .card li:first-child { height: calc(70 * var(--u)); border: 0; }
.dj-f35 .card li:last-child { height: calc(70 * var(--u)); border-bottom: 1px solid #bfac9c; }
.dj-f35 .card b, .dj-f35 .card span { position: absolute; top: 50%; transform: translateY(-50%); white-space: nowrap; }
.dj-f35 .card b { --u: calc(100cqw / 1141); left: calc(51 * var(--u)); width: calc(139 * var(--u)); height: calc(40 * var(--u)); display: flex; align-items: center; justify-content: center; border-radius: 999px; background: #ff74af; color: #fff; font-weight: 700; font-size: max(7.5px, calc(18 * var(--u))); }
.dj-f35 .card span { --u: calc(100cqw / 1141); left: calc(222 * var(--u)); color: #444; font-weight: 500; font-size: max(8px, calc(18 * var(--u))); }
.dj-f35 .dash { width: calc(var(--w) * var(--u)); height: max(1px, calc(1 * var(--u))); background: repeating-linear-gradient(90deg, #ff75b3 0 calc(4 * var(--u)), transparent 0 calc(6 * var(--u))); }
.dj-f35 .d1 { --x: 600; --y: 145; --w: 117; }
.dj-f35 .d2 { --x: 667; --y: 211; --w: 50; }
.dj-f35 .d3 { --x: 667; --y: 281; --w: 50; }
.dj-f35 .d4 { --x: 667; --y: 351; --w: 50; }

/* 줄기세포 올인원(sub4_3) — 원형 도식. 원본 sub2_3_sec03_01.png(572×538). 좌표는 글자 가운데 */
.dj-f43 { --W: 572; }
.dj-f43 .lb { transform: translate(-50%, -50%); white-space: nowrap; color: #1c1c1c; font-weight: 700; font-size: max(10px, calc(18 * var(--u))); }
.dj-f43 .lb.c { font-size: max(13.5px, calc(27 * var(--u))); }
.dj-f43 .c  { --x: 285.5; --y: 280; }
.dj-f43 .l1 { --x: 285;   --y: 101.5; }
.dj-f43 .l2 { --x: 489.5; --y: 253.5; }
.dj-f43 .l3 { --x: 417;   --y: 472.5; }
.dj-f43 .l4 { --x: 181.5; --y: 472.5; }
.dj-f43 .l5 { --x: 80;    --y: 253.5; }

/* 줄기세포(sub4_1) — DNA 그림 문구. 원본 sub02_sec07_img.jpg(600×360). 좌표는 글자 왼쪽·아래 */
.dj-f71 { --W: 600; }
@media (max-width: 1024px) { .dj-f71 { width: 100%; } }   /* 원래 img 규칙(.area_07 .col_wrap > div img {width:100%})과 같게 */
.dj-f71 .t { display: block; transform: translateY(-100%); white-space: nowrap; line-height: 1; color: #fff; font-weight: 600; font-size: max(9px, calc(19 * var(--u))); }
.dj-f71 .t b { color: #88273b; font-weight: 800; }
.dj-f71 .t b.no { font-size: 1.3em; }
.dj-f71 .t1 { --x: 34;  --y: 103; }
.dj-f71 .t2 { --x: 458; --y: 179; }
.dj-f71 .t3 { --x: 398; --y: 299; }

/* 동안성형(sub2_3) — 미니거상술 그림의 「박리범위」 라벨. 원본 img2/sub2_3_5.png(400×250) */
.dj-f23 { --W: 400; display: block; flex: none; }                 /* 원래 img: display:block, 줄어들지 않음 */
@media (max-width: 1024px) { .dj-f23 { width: 70%; } }             /* 원래 img 규칙(.sub4_1.sub2_1 .area_02 li img {width:70%})과 같게 */
.dj-f23 .tag { --x: 202; --y: 179; width: calc(71 * var(--u)); height: calc(25 * var(--u)); display: flex; align-items: center; justify-content: center; background: #d21a1a; color: #fff; font-weight: 500; font-size: max(8px, calc(18 * var(--u))); white-space: nowrap; }

/* 메인(index) — 진료과목 카드 4장의 영문 문구. 원본 img2/clinic_1~4.png(380×600). .img 상자 안에서 사진과 함께 커지고 hover 때 같이 움직인다 */
.dj-cq { container-type: inline-size; }
.dj-cl { position: absolute; z-index: 1; left: calc(43 * 100cqw / 380); bottom: calc(124 * 100cqw / 380); pointer-events: none;
	font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: calc(60 * 100cqw / 380); line-height: calc(63 / 60); letter-spacing: 0; color: rgba(255, 255, 255, .72); text-align: left; white-space: nowrap; }

/* 시술 페이지 제품 카드(sub3_1·3_2·3_3) — 원래 카드 그림 한 장(로고+원형 제품 사진)을 두 장으로 나눠 원래 자리에 겹쳐 놓는다.
 * 좌표는 원래 그림의 픽셀(--W×--H 기준). 글자로만 된 제품명(자가혈·줄기세포 주사)은 HTML 글자. */
.dj-card { position: relative; display: block; flex: none; margin: 0; width: calc(var(--W) * 1px); max-width: 100%; aspect-ratio: var(--W) / var(--H); container-type: inline-size; }
@media (max-width: 1024px) { .dj-card { width: 70%; } }   /* 원래 img 규칙(.sub4_1.sub2_1 .area_02 li img {width:70%})과 같게 */
.dj-card > * { position: absolute; left: calc(var(--x) * 100% / var(--W)); top: calc(var(--y) * 100% / var(--H)); }
.dj-card > img { width: calc(var(--w) * 100% / var(--W)) !important; height: auto; max-width: none; }
.dj-card > .dj-name { white-space: nowrap; line-height: 1; letter-spacing: -0.04em; color: #464646; font-weight: 800; font-size: calc(var(--fs) * 1.06 * 100cqw / var(--W)); }
.dj-card > .dj-name small { font-weight: 400; font-size: calc(var(--fs2) * 100cqw / var(--W)); }

/* 메인(index) 비주얼 슬라이드 — visual2~5 의 문구를 HTML 로. 좌표는 원본 그림 픽셀(--W×--H), 글자 크기는 그림 폭에 비례 */
.visual .item .dj-vis { position: relative; width: 100%; max-width: 2000px; margin: 0 auto; container-type: inline-size; }
.visual .item .dj-vis > img { display: block; width: 100%; }
.dj-vis .dj-l { position: absolute; left: calc(var(--x) * 100% / var(--W)); top: calc(var(--y) * 100% / var(--H)); font-size: calc(var(--fs) * 100cqw / var(--W));
	line-height: 1; white-space: nowrap; letter-spacing: calc(var(--ls, 0) * 1em); color: var(--c); font-weight: var(--fw); font-family: "Pretendard Variable", Pretendard, sans-serif; }
.dj-vis .dj-l.c { transform: translateX(-50%); }
.dj-vis .dj-l b { font-weight: 800; color: var(--bc, inherit); }

/* 오시는 길(sub1_5) — 상담 버튼 2개의 글자. 원본 btn_phone.png·btn_kakao.png(260×46). 좌표는 글자 왼쪽·위 — 2026-10-22 */
.dj-fbtn { --W: 260; vertical-align: middle; }   /* 원래 img 규칙(img {vertical-align:middle})과 같게 */
.dj-fbtn .t { --x: 48; --y: 15.1; white-space: nowrap; line-height: 1; font-weight: 700; font-size: calc(18.7 * var(--u)); }
.dj-fbtn.phone .t { color: #fff; letter-spacing: 0.010em; }
.dj-fbtn.kakao .t { color: #3c1e1e; letter-spacing: 0.005em; }

/* 리얼모델 지원(sub6_5) — 예시 사진 3장 아래 라벨. 원본 sub06_pt01.png(553×239). 좌표는 글자 가운데 — 2026-10-22 */
.dj-f65 { --W: 553; width: 100%; vertical-align: middle; }   /* 원래 img 규칙(.area_realmodel .area_reserv img {width:100%}, img {vertical-align:middle})과 같게 */
.dj-f65 .lb { transform: translate(-50%, -50%); white-space: nowrap; line-height: 1; color: #fff; font-weight: 700; letter-spacing: -0.022em; font-size: max(10px, calc(16 * var(--u))); }
.dj-f65 .l1 { --x: 90.3; --y: 223.8; }
.dj-f65 .l2 { --x: 276.5; --y: 224.6; letter-spacing: -0.066em; }
.dj-f65 .l3 { --x: 462.3; --y: 223.8; }