/* ===== CRM 팝업 id 4 「한번 더! BEST 시술」(블랙프라이데이) HTML 판 (2026-11-11) =====
   사용자 「이벤트 팝업을 추가했는데 번역이 안 되고 있어. 이미지와 글을 분리하고, 분리된 텍스트를 다국어 진행해줘」.
   조각 _src/gen/popup-html/popup-4.html, 그림·글꼴 _src/build/popup-4-html.py. 층: 한글 지운 그림(pc.jpg 1920×1080 · mo.jpg 1083×1610) → HTML 글.
   단위 --u = 그림 폭/1920(PC) · /1083(≤1023, hp.css 의 팝업 모바일 경계와 <source> 가 같다). 좌표·크기는 원본 그림 px 로 잰 값.
   글꼴 넷은 ascent 80% · descent 20% 로 못 박았다 — line-height 1 이면 글자 기준선 = 상자 위 + 0.8em(운영체제마다 글꼴 지표가 달라 생기는 위아래 어긋남 방지).
   한국어 = 원본 그림 그대로(왼쪽 두 줄 G마켓 산스 Bold · 카드 Pretendard SemiBold/Medium · 가격 숫자 Oswald Bold).
   외국어 = 같은 자리의 상자 안에서 줄바꿈(아래 「외국어」 절). 모바일 그림은 왼쪽 두 줄뿐이라 카드·가격·아래 안내는 PC 에서만 그린다. */

@font-face { font-family: "Hpp4Gm"; font-style: normal; font-weight: 700; font-display: swap; ascent-override: 80%; descent-override: 20%; line-gap-override: 0%;
  src: url("../popup/html/4/gm-bold.woff2?v=dd823e37") format("woff2"); }
@font-face { font-family: "Hpp4Sans"; font-style: normal; font-weight: 600; font-display: swap; ascent-override: 80%; descent-override: 20%; line-gap-override: 0%;
  src: url("../popup/html/4/pre-600.woff2?v=fea5c416") format("woff2"); }
@font-face { font-family: "Hpp4Sans"; font-style: normal; font-weight: 500; font-display: swap; ascent-override: 80%; descent-override: 20%; line-gap-override: 0%;
  src: url("../popup/html/4/pre-500.woff2?v=bb7996f5") format("woff2"); }
@font-face { font-family: "Hpp4Num"; font-style: normal; font-weight: 700; font-display: swap; ascent-override: 80%; descent-override: 20%; line-gap-override: 0%;
  src: url("../events/html/oswald-700-num.woff2?v=a805fd49") format("woff2"); }   /* 이벤트 안내판의 Oswald Bold(OFL) 조각 — 숫자·,·.·% */

.hpp { position: relative; width: 100%; height: 100%; container-type: size; }
.hpp--4 .hpp__art {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; container-type: inline-size;
  width: min(100cqw, 100cqh * 1920 / 1080); height: min(100cqh, 100cqw * 1080 / 1920);
  --u: calc(100cqw / 1920);
}
.hp-popup .hpp--4 picture { display: block; width: 100%; height: 100%; }
.hp-popup .hpp--4 img.hpp__bg { display: block; width: 100%; height: 100%; object-fit: fill; }
.hpp--4 :where(p) { position: absolute; margin: 0; padding: 0; white-space: nowrap; line-height: 1; }
.hpp--4 :where(del, strong) { font-weight: inherit; text-decoration: none; }

/* ── 한국어(원본 그림과 같은 자리) — left = 첫 글자 원점, top = 기준선 − 0.8 × 크기 ── */
/* 왼쪽 두 줄 — G마켓 산스 Bold, 분홍 #FF3BEA · 연보라 #BF86FF, 둘레 그림자(원본 글자 둘레 약 10px 어둡다) */
.hpp--4 :is(.hpp4-h1, .hpp4-h2) { font-family: "Hpp4Gm", var(--fs-font-gm); font-weight: 700; text-shadow: 0 0 calc(9 * var(--u)) rgb(0 0 0 / .5); }
.hpp--4 .hpp4-h1 { left: calc(296 * var(--u)); top: calc(707.6 * var(--u)); font-size: calc(45.5 * var(--u)); letter-spacing: -0.079em; color: #FF3BEA; }
.hpp--4 .hpp4-h2 { left: calc(225 * var(--u)); top: calc(762.9 * var(--u)); font-size: calc(44.5 * var(--u)); letter-spacing: -0.0575em; color: #BF86FF; }
/* 카드 시술명 — Pretendard SemiBold, 검정 */
.hpp--4 .hpp4-name { font-family: "Hpp4Sans", var(--fs-font); font-weight: 600; color: #000; }
.hpp--4 .hpp4-name--1 { left: calc(1044 * var(--u)); top: calc(187.3 * var(--u)); font-size: calc(40.86 * var(--u)); letter-spacing: -0.0274em; }
.hpp--4 .hpp4-name--2 { left: calc(1044 * var(--u)); top: calc(472.5 * var(--u)); font-size: calc(35.8 * var(--u)); line-height: 1.3268; letter-spacing: 0; }   /* 기준선 507 · 554.5 · 602 */
.hpp--4 .hpp4-name--3 { left: calc(1040 * var(--u)); top: calc(765.5 * var(--u)); font-size: calc(37.4 * var(--u)); line-height: 1.2433; letter-spacing: -0.026em; }   /* 기준선 800 · 846.5 */
.hpp--4 .hpp4-note { left: calc(1041 * var(--u)); top: calc(869.3 * var(--u)); font-family: "Hpp4Sans", var(--fs-font); font-weight: 500; font-size: calc(20.9 * var(--u)); letter-spacing: -0.036em; color: #A7A7A7; }
/* 아래 분홍 안내 — Pretendard SemiBold #DC12CD */
.hpp--4 .hpp4-foot { left: calc(1075 * var(--u)); top: calc(978.6 * var(--u)); font-family: "Hpp4Sans", var(--fs-font); font-weight: 600; font-size: calc(26.8 * var(--u)); letter-spacing: -0.0413em; color: #DC12CD; }
/* 가격 — p 는 그림 원점의 빈 상자, 안의 정가(del)·할인가(.hpp4-num)·「만」을 따로 놓는다.
   정가 = Oswald 회색 #B1B1B1 + 두께 4 취소선(원본은 숫자 잉크 폭 그대로, 기준선 위 17.5~18 — 글꼴 취소선 자리(0.35em)보다 높아 배경 선으로 긋는다) */
.hpp--4 .hpp4-price { left: 0; top: 0; width: 0; height: 0; }
.hpp--4 .hpp4-price del {
  position: absolute; font-family: "Hpp4Num", var(--fs-font); font-weight: 700; font-size: calc(42.5 * var(--u)); line-height: 1; color: #B1B1B1;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 0.338em / 100% 0.094em;
}
.hpp--4 .hpp4-num { position: absolute; font-family: "Hpp4Num", var(--fs-font); font-weight: 700; font-size: calc(66.3 * var(--u)); line-height: 1; color: #EC0BD4; }
.hpp--4 .hpp4-won { position: absolute; font-family: "Hpp4Sans", var(--fs-font); font-weight: 500; font-size: calc(38.5 * var(--u)); line-height: 1; color: #000; }
.hpp--4 .hpp4-price--1 del { left: calc(1517 * var(--u)); top: calc(269.4 * var(--u)); font-size: calc(42 * var(--u)); letter-spacing: -0.02em; }
.hpp--4 .hpp4-price--1 .hpp4-num { left: calc(1580 * var(--u)); top: calc(259.5 * var(--u)); letter-spacing: -0.0621em; }
.hpp--4 .hpp4-price--1 .hpp4-won { left: calc(1688 * var(--u)); top: calc(284.7 * var(--u)); }
.hpp--4 .hpp4-price--2 del { left: calc(1540 * var(--u)); top: calc(559.5 * var(--u)); letter-spacing: 0.01em; }
.hpp--4 .hpp4-price--2 .hpp4-num { left: calc(1624 * var(--u)); top: calc(549.5 * var(--u)); letter-spacing: -0.109em; }   /* 원본 숫자가 Oswald 보다 폭이 고르다(99 · 77 이 같은 폭) */
.hpp--4 .hpp4-price--2 .hpp4-won { left: calc(1688 * var(--u)); top: calc(574.7 * var(--u)); }
.hpp--4 .hpp4-price--3 del { left: calc(1558 * var(--u)); top: calc(850.2 * var(--u)); font-size: calc(41 * var(--u)); letter-spacing: -0.03em; }
.hpp--4 .hpp4-price--3 .hpp4-num { left: calc(1625 * var(--u)); top: calc(840 * var(--u)); letter-spacing: 0.0075em; }
.hpp--4 .hpp4-price--3 .hpp4-won { left: calc(1685 * var(--u)); top: calc(864.7 * var(--u)); }

/* 「30%↓」 별 — 원본에서 할인가 「5」 오른쪽 위를 덮는다. 그림에도 남아 있고, 떼어 낸 같은 조각(x 1676~1763 · y 186~274)을 글자 위에 한 번 더 얹는다 */
.hp-popup .hpp--4 img.hpp4-badge { position: absolute; left: calc(1676 * var(--u)); top: calc(186 * var(--u)); width: calc(87 * var(--u)); height: auto; object-fit: fill; pointer-events: none; }

/* 카드 묶음(11-11) — 한국어는 상자 없이(display: contents) 위 그림 좌표 그대로, 알약 조각은 그림에 있어 숨긴다. 외국어는 아래 「외국어」 절의 HTML 카드 */
.hpp--4 :is(.hpp4-side, .hpp4-card, .hpp4-row, .hpp4-pcol) { display: contents; }
.hp-popup .hpp--4 img.hpp4-pill { display: none; }

@media (max-width: 1023px) {
  .hpp--4 .hpp__art { width: min(100cqw, 100cqh * 1083 / 1610); height: min(100cqh, 100cqw * 1610 / 1083); --u: calc(100cqw / 1083); }
  .hpp--4 :is(.hpp4-item, .hpp4-price, .hpp4-foot), .hp-popup .hpp--4 img.hpp4-badge { display: none; }
  .hpp--4 .hpp4-h1 { left: calc(242 * var(--u)); top: calc(958.4 * var(--u)); font-size: calc(59.5 * var(--u)); letter-spacing: -0.0624em; }
  .hpp--4 .hpp4-h2 { left: calc(147 * var(--u)); top: calc(1029.4 * var(--u)); font-size: calc(59.5 * var(--u)); letter-spacing: -0.0589em; }
}

/* ── 외국어(라우터가 랭귀지팩으로 글자를 바꾼다) — 한국어 자리를 상자로 잡고 그 안에서 줄을 바꾼다 ──
   글꼴은 사이트 글꼴(언어별 Noto). G마켓 조각은 한글 몇 자 + 기본 라틴뿐이라 영어·인니어만 왼쪽 두 줄에 그대로 쓴다. */
/* 왼쪽 두 줄 — 풍선 끈 아래(~655)부터 기간 위(848)까지, 가운데 x 520 */
:root:not(:lang(ko)) .hpp--4 .hpp4-head {
  position: absolute; left: calc(130 * var(--u)); top: calc(664 * var(--u)); width: calc(780 * var(--u)); height: calc(172 * var(--u));
  display: flex; flex-direction: column; align-items: center; justify-content: center; row-gap: calc(8 * var(--u));
}
:root:not(:lang(ko)) .hpp--4 .hpp4-head p {
  position: static; width: 100%; white-space: normal; text-align: center; text-wrap: balance; overflow-wrap: normal;
  font-family: var(--fs-font); font-weight: 800; line-height: 1.12; letter-spacing: 0;
}
:root:not(:lang(ko)) .hpp--4 .hpp4-h1 { font-size: calc(var(--f1, 40) * var(--u)); }
:root:not(:lang(ko)) .hpp--4 .hpp4-h2 { font-size: calc(var(--f2, 36) * var(--u)); }
:root:is(:lang(en), :lang(id)) .hpp--4 .hpp4-head p { font-family: "Hpp4Gm", var(--fs-font); font-weight: 700; }
/* 카드(11-11 사용자 「상품 설명이 카드 영역을 벗어나 … 카드 높이가 콘텐츠에 맞춰 늘어나도록, 글자 크기를 줄이거나 자르지 말고」 — 몽골어 3번 시술명 5줄이 카드 밖으로 나갔다)
   그림의 흰 카드(x 1002~1802 · y 77~948, 직각 · 그림자 없음)를 같은 자리·같은 모양의 HTML 카드로 덮는다. 알약은 그림에서 뗀 조각(pill-N.png), 점선은 그림과 같은 6px 선 · 2px 틈 #A1A1A1.
   칸 = [알약 / 시술명·주석 | 가격 열(첫 칸은 30%↓ 별 + 가격)] 그리드. 칸 높이는 글에 맞춰 늘고, 글이 짧으면 세 칸이 고르게 나눠 원래 카드 높이(871)를 채운다.
   카드가 늘면 아래 분홍 안내가 카드 밑으로 따라 내려간다(한 묶음 .hpp4-side). 시술명 열 = 카드 안쪽 폭 − 가격 열 − 간격(440 → 약 480). */
:root:not(:lang(ko)) .hpp--4 .hpp4-side { position: absolute; left: calc(1002 * var(--u)); top: calc(77 * var(--u)); width: calc(800 * var(--u)); display: flex; flex-direction: column; }
:root:not(:lang(ko)) .hpp--4 .hpp4-card { display: flex; flex-direction: column; min-height: calc(871 * var(--u)); padding: 0 calc(44 * var(--u)); box-sizing: border-box; background: #fff; }
:root:not(:lang(ko)) .hpp--4 .hpp4-row {
  flex: 1 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr;
  column-gap: calc(24 * var(--u)); row-gap: calc(18 * var(--u)); padding: calc(46 * var(--u)) 0 calc(30 * var(--u));
}
:root:not(:lang(ko)) .hpp--4 .hpp4-row + .hpp4-row {
  background: repeating-linear-gradient(90deg, #A1A1A1 0 calc(6 * var(--u)), transparent 0 calc(8 * var(--u))) left top / 100% max(1px, calc(1 * var(--u))) no-repeat;
}
:root:not(:lang(ko)) .hp-popup .hpp--4 img.hpp4-pill { grid-column: 1; grid-row: 1; display: block; width: calc(167 * var(--u)); height: auto; }
:root:not(:lang(ko)) .hpp--4 .hpp4-item { grid-column: 1; grid-row: 2; min-width: 0; display: flex; flex-direction: column; row-gap: calc(10 * var(--u)); }
:root:not(:lang(ko)) .hpp--4 .hpp4-item p { position: static; white-space: normal; overflow-wrap: break-word; word-break: normal; letter-spacing: 0; font-family: var(--fs-font); }   /* 사이트 keep-all(fs.css)이면 중국어·일본어가 글자 사이에서 안 꺾인다 */
:root:not(:lang(ko)) .hpp--4 .hpp4-name { font-size: calc(var(--fn, 30) * var(--u)); line-height: 1.25; }
:root:not(:lang(ko)) .hpp--4 .hpp4-note { font-size: calc(19 * var(--u)); line-height: 1.25; }
/* 가격 열 — 칸 오른쪽 아래, 정가 위 · 할인가 아래 오른쪽 맞춤(「385,000 KRW」 처럼 길어 한 줄에 둘이 안 들어간다). 첫 칸은 별이 가격 위에(겹치지 않는다) */
:root:not(:lang(ko)) .hpp--4 .hpp4-pcol { grid-column: 2; grid-row: 1 / 3; align-self: end; display: flex; flex-direction: column; align-items: flex-end; row-gap: calc(8 * var(--u)); }
:root:not(:lang(ko)) .hp-popup .hpp--4 img.hpp4-badge { position: static; order: -1; width: calc(87 * var(--u)); height: auto; }
:root:not(:lang(ko)) .hpp--4 .hpp4-price { position: static; width: auto; height: auto; display: flex; flex-direction: column; align-items: flex-end; row-gap: calc(2 * var(--u)); }
:root:not(:lang(ko)) .hpp--4 .hpp4-price :is(del, .hpp4-num, .hpp4-won) { position: static; letter-spacing: 0; }
:root:not(:lang(ko)) .hpp--4 .hpp4-price del { font-size: calc(30 * var(--u)); }
:root:not(:lang(ko)) .hpp--4 .hpp4-price strong { display: block; white-space: nowrap; line-height: 1; }
:root:not(:lang(ko)) .hpp--4 .hpp4-num { font-size: calc(46 * var(--u)); }
:root:not(:lang(ko)) .hpp--4 .hpp4-won { font-family: var(--fs-font); font-weight: 600; font-size: calc(20 * var(--u)); margin-left: 0.2em; }
/* 아래 분홍 안내 — 카드 바로 밑, 카드 폭 가운데, 두 줄까지 */
:root:not(:lang(ko)) .hpp--4 .hpp4-foot { word-break: normal;
  position: static; margin-top: calc(12 * var(--u)); padding: 0 calc(16 * var(--u)); box-sizing: border-box;
  white-space: normal; overflow-wrap: break-word; text-align: center; text-wrap: balance; font-family: var(--fs-font); font-size: calc(23 * var(--u)); line-height: 1.25; letter-spacing: 0;
}

@media (max-width: 1023px) {
  /* 풍선 아래(~875)부터 기간 위(~1175)까지, 가운데 x 541 */
  :root:not(:lang(ko)) .hpp--4 .hpp4-head { left: calc(50 * var(--u)); top: calc(880 * var(--u)); width: calc(983 * var(--u)); height: calc(285 * var(--u)); row-gap: calc(12 * var(--u)); }
  :root:not(:lang(ko)) .hpp--4 .hpp4-h1 { font-size: calc(var(--f1m, 56) * var(--u)); }
  :root:not(:lang(ko)) .hpp--4 .hpp4-h2 { font-size: calc(var(--f2m, 50) * var(--u)); }
  :root:not(:lang(ko)) .hpp--4 .hpp4-side { display: none; }
}