/* ===== 이벤트 상세 안내판 — 그림을 글자·그림으로 나눈 HTML 판 (2026-10-29, 시범: 벨로테로 리바이브 173733366) =====
   사용자 「긴 이벤트 이미지를 텍스트·이미지 분리해 HTML 로」. 원본 안내판 b1bb28303e07d.jpg(1280×7129)을 실측해 옮겼다.
   설계 단위 --u = 문서 폭 / 1280 — 상세 문서 상자(860)에서 원본과 같은 비율이 된다. 좁은 화면은 글자만 최소 크기로 받친다.
   그림 조각은 assets/events/html/<idx>/ — 만드는 스크립트 _src/build/ev-1029-html-assets.py (좌표 근거가 거기 있다).
   42.css 의 .fs-evd-doc img { width:100% } 가 아이콘·로고까지 늘리므로 그림 규칙은 .fs-evd-doc .evh img.… 로 이긴다. */
@font-face { font-family: "EvhNum"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../events/html/oswald-700-num.woff2?v=a805fd49") format("woff2"); }   /* Oswald Bold(OFL) — 숫자·.·% 만 */

.fs-evd-doc .evh {
  --u: calc(100cqw / 1280);
  container-type: inline-size; position: relative; overflow: hidden;
  background: #fff; color: #454545; font-family: var(--fs-font); text-align: center;   /* 외국어는 라우터가 --fs-font 에 Noto 를 넣는다 */
  font-kerning: normal; word-break: keep-all;
}
.fs-evd-doc .evh img { width: auto; max-width: none; }

/* ⓪ 맨 위 배너(원본 a50cad689e7ab.jpg 1280×819, 2026-10-30 추가) — 원본과 같은 비율 상자에 사진·흐린 제품·워드마크를 제자리에 놓고
   제목·띠·배지만 글자로 얹는다. 좌표는 원본 픽셀(_src/build/ev-1029-html-assets.py 7절). */
.evh-banner { position: relative; aspect-ratio: 1280 / 819; }
.fs-evd-doc .evh img.evh-banner__photo { position: absolute; left: calc(620 * var(--u)); top: calc(64 * var(--u)); width: calc(660 * var(--u)); height: auto; }
.fs-evd-doc .evh img.evh-banner__ghost { position: absolute; left: 0; top: calc(290 * var(--u)); width: calc(400 * var(--u)); height: auto; }
.fs-evd-doc .evh img.evh-banner__logo { position: absolute; left: calc(657 * var(--u)); top: calc(29 * var(--u)); width: calc(245 * var(--u)); height: auto; }
.evh-banner__copy { position: absolute; left: calc(89 * var(--u)); top: calc(195 * var(--u)); width: calc(436 * var(--u)); }
.evh-banner__title {
  position: relative; left: calc(3.5 * var(--u));   /* 원본 제목 중심 314 · 띠 중심 307 */
  width: fit-content; margin-inline: auto;
  font-size: calc(131 * var(--u)); font-weight: 700; line-height: 1.153; letter-spacing: -0.035em;
  background: linear-gradient(90deg, #42B9B3 22%, #028983 80%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.evh-banner__launch {
  display: grid; place-items: center; height: calc(66 * var(--u)); margin-top: calc(19 * var(--u));
  background: linear-gradient(90deg, #42B9B3 23%, #028983 72%); color: #fff;
  font-size: calc(38 * var(--u)); font-weight: 700; letter-spacing: -0.03em;
}
/* 배지는 긴 그림 배지의 0.62배(바깥 반지름 80, 중심 640.5,197.5) */
.evh-banner .evh-badge { left: calc(559.65 * var(--u)); top: calc(116.65 * var(--u)); width: calc(161.7 * var(--u)); gap: calc(0.6 * var(--u)); padding-top: calc(4.9 * var(--u)); }
.evh-banner .evh-badge__name { font-size: calc(39.7 * var(--u)); }
.evh-banner .evh-badge__pick { font-size: calc(38.4 * var(--u)); color: #FEFAA3; }

/* ① 사진 + 워드마크 + 배지 */
.evh-hero { position: relative; }
.fs-evd-doc .evh img.evh-hero__photo { width: 100%; height: auto; }
.fs-evd-doc .evh img.evh-hero__logo { position: absolute; left: calc(75 * var(--u)); top: calc(70 * var(--u)); width: calc(484 * var(--u)); height: auto; }
.evh-badge {
  position: absolute; left: calc(954.5 * var(--u)); top: calc(67.5 * var(--u)); width: calc(260 * var(--u)); aspect-ratio: 1;
  display: grid; place-content: center; gap: calc(1 * var(--u)); padding-top: calc(3 * var(--u));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-130 -130 260 260'%3E%3Cpath fill='%2342B9B3' d='M129.0 0.0L126.8 8.3L121.2 16.0L115.2 22.9L111.6 29.9L111.2 37.8L112.9 46.8L113.9 56.2L111.7 64.5L105.6 70.6L97.0 74.4L88.3 77.5L81.7 81.7L77.5 88.3L74.4 97.0L70.6 105.6L64.5 111.7L56.2 113.9L46.8 112.9L37.8 111.2L29.9 111.6L22.9 115.2L16.0 121.2L8.3 126.8L0.0 129.0L-8.3 126.8L-16.0 121.2L-22.9 115.2L-29.9 111.6L-37.8 111.2L-46.8 112.9L-56.2 113.9L-64.5 111.7L-70.6 105.6L-74.4 97.0L-77.5 88.3L-81.7 81.7L-88.3 77.5L-97.0 74.4L-105.6 70.6L-111.7 64.5L-113.9 56.2L-112.9 46.8L-111.2 37.8L-111.6 29.9L-115.2 22.9L-121.2 16.0L-126.8 8.3L-129.0 0.0L-126.8 -8.3L-121.2 -16.0L-115.2 -22.9L-111.6 -29.9L-111.2 -37.8L-112.9 -46.8L-113.9 -56.2L-111.7 -64.5L-105.6 -70.6L-97.0 -74.4L-88.3 -77.5L-81.7 -81.7L-77.5 -88.3L-74.4 -97.0L-70.6 -105.6L-64.5 -111.7L-56.2 -113.9L-46.8 -112.9L-37.8 -111.2L-29.9 -111.6L-22.9 -115.2L-16.0 -121.2L-8.3 -126.8L-0.0 -129.0L8.3 -126.8L16.0 -121.2L22.9 -115.2L29.9 -111.6L37.8 -111.2L46.8 -112.9L56.2 -113.9L64.5 -111.7L70.6 -105.6L74.4 -97.0L77.5 -88.3L81.7 -81.7L88.3 -77.5L97.0 -74.4L105.6 -70.6L111.7 -64.5L113.9 -56.2L112.9 -46.8L111.2 -37.8L111.6 -29.9L115.2 -22.9L121.2 -16.0L126.8 -8.3Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  color: #fff; font-weight: 700; line-height: 1;
}
.evh-badge__name { font-size: calc(64 * var(--u)); letter-spacing: -0.03em; }
.evh-badge__pick { font-size: calc(62 * var(--u)); color: #FCF8A0; letter-spacing: -0.01em; }

/* ② 제목 · 런칭 띠 · 소개글 — 제목은 사진 아래 회색 띠에 걸친다(원본 글자 위 1471, 사진 끝 1557) */
.evh-intro { position: relative; padding-bottom: calc(154 * var(--u)); }
.evh-title {
  position: relative; left: calc(-4.5 * var(--u));   /* 원본 제목·소개글 중심은 635~639 — 가운데(640)보다 왼쪽 */
  width: fit-content; margin: calc(-106 * var(--u)) auto 0;
  font-size: calc(131 * var(--u)); font-weight: 700; line-height: 1.2; letter-spacing: -0.035em;
  background: linear-gradient(90deg, #41B9B2 18%, #028983 58%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.evh-launch {
  display: grid; place-items: center; width: calc(632 * var(--u)); height: calc(109 * var(--u)); margin: calc(31 * var(--u)) auto 0;
  background: linear-gradient(90deg, #42B9B3 25%, #028983 80%); color: #fff;
  font-size: max(15px, calc(65 * var(--u))); font-weight: 700; letter-spacing: -0.03em;
}
.evh-lead {
  margin-top: calc(85 * var(--u)); padding-right: calc(11 * var(--u));
  font-size: max(14px, calc(51.5 * var(--u))); line-height: 1.757; letter-spacing: -0.064em;
}
.evh-lead mark { background: #B8F0ED; color: #028982; font-weight: 700; padding: 0 0.17em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ③ 제품 그림 — 지시선은 그림에 남기고 효과 글자 4개만 HTML(좌표 = 원본 2440~3540 잘라 낸 그림 기준 %) */
.evh-diagram { position: relative; margin: 0; }
.fs-evd-doc .evh img.evh-diagram__img { width: 100%; height: auto; }
.evh-diagram__labels { position: absolute; inset: 0; }
.evh-diagram__label { position: absolute; font-weight: 700; color: #393939; line-height: 1; letter-spacing: -0.04em; white-space: nowrap; }
.evh-diagram__label--barrier { right: calc(165 * 100% / 1280); top: calc((2468 - 2440) * 100% / 1100); font-size: max(13px, calc(69 * var(--u))); }
.evh-diagram__label--acne    { right: calc(166 * 100% / 1280); top: calc((2660 - 2440) * 100% / 1100); font-size: max(11px, calc(50 * var(--u))); font-weight: 600; }
.evh-diagram__label--texture { left: calc(157 * 100% / 1280);  top: calc((3199 - 2440) * 100% / 1100); font-size: max(13px, calc(69 * var(--u))); letter-spacing: -0.045em; }
.evh-diagram__label--balance { left: calc(163 * 100% / 1280);  top: calc((3408 - 2440) * 100% / 1100); font-size: max(13px, calc(69 * var(--u))); }

/* ④ 특징 카드 3장 — 흐린 제품 그림(고스트)은 원본이 곱하기 합성이다. 카드 배경 위·아이콘과 글 아래에 깐다.
   카드는 쌓임 맥락을 만들지 않는다(z-index·opacity·transform 금지) — 그래야 고스트가 카드 배경과 섞이고 글은 위로 뜬다. */
.evh-feats { position: relative; isolation: isolate; background: #fff; padding: calc(170 * var(--u)) calc(95 * var(--u)) calc(131 * var(--u)); text-align: left; }
.fs-evd-doc .evh img.evh-feats__ghost { position: absolute; left: 0; bottom: calc(8 * var(--u)); z-index: 1; width: calc(818 * var(--u)); height: auto; mix-blend-mode: multiply; pointer-events: none; }
.evh-feats__list { display: grid; gap: calc(54 * var(--u)); }
.evh-feat { display: flex; align-items: center; gap: calc(45 * var(--u)); min-height: calc(363 * var(--u)); padding: calc(30 * var(--u)) calc(40 * var(--u)) calc(30 * var(--u)) calc(72 * var(--u)); background: #49BCB5; }
.evh-feat__icon { position: relative; z-index: 2; flex: 0 0 calc(260 * var(--u)); display: grid; place-items: center; }
.fs-evd-doc .evh .evh-feat__icon img { width: calc(var(--w) * var(--u)); height: auto; }
.evh-feat__body { position: relative; z-index: 2; min-width: 0; }
.evh-feat__title { color: #FFFD76; font-size: max(15px, calc(72 * var(--u))); font-weight: 700; line-height: 1.2; letter-spacing: -0.04em; }
.evh-feat__desc { margin-top: calc(25 * var(--u)); color: #fff; font-size: max(12px, calc(41 * var(--u))); line-height: 1.5; letter-spacing: -0.041em; }

/* ⑤ 가격 — 바탕은 원본 바탕 픽셀의 평면 맞춤(잔차 1 이하)을 그대로 옮긴 사선 그라데이션 */
.evh-price { background: linear-gradient(152.9deg, #42B9B3, #038A83); color: #fff; padding: calc(48 * var(--u)) calc(67 * var(--u)) calc(201 * var(--u)) calc(66 * var(--u)); }
.evh-price__meta { display: flex; flex-wrap: wrap; justify-content: center; column-gap: calc(48 * var(--u)); font-size: max(12px, calc(36 * var(--u))); font-weight: 500; line-height: 1.5; letter-spacing: -0.037em; }
.evh-price__head { margin-top: calc(48 * var(--u)); font-size: max(22px, calc(104 * var(--u))); font-weight: 700; line-height: 1.3; letter-spacing: -0.05em;
  transform: scaleX(.955); }   /* 원본 머리글은 좁은 굵은 고딕이다 — Pretendard 를 4.5% 좁힌다 */
.evh-price__hl { position: relative; z-index: 0; margin-left: 0.15em; color: #FAF599; letter-spacing: -0.06em; }
.evh-price__hl::before { content: ""; position: absolute; z-index: -1; left: -1%; right: -1%; bottom: -0.12em; height: 0.75em;
  background: url("../events/html/173733366/brush.png?v=746b35d2") center / 100% 100% no-repeat; }
.evh-price__pct { font-family: "EvhNum", var(--fs-font); font-size: 1.42em; letter-spacing: -0.08em; }
.evh-price__list { display: grid; gap: calc(54 * var(--u)); margin-top: calc(57 * var(--u)); counter-reset: evh; text-align: left; }
.evh-card { counter-increment: evh; display: flex; flex-direction: column; justify-content: center; gap: calc(59 * var(--u));
  min-height: calc(461 * var(--u)); padding: calc(40 * var(--u)) calc(38 * var(--u)) calc(40 * var(--u)) calc(41 * var(--u));
  background: #fff; box-shadow: calc(7.5 * var(--u)) calc(8 * var(--u)) calc(16 * var(--u)) rgba(0, 0, 0, .3);   /* 원본 그림자 단면을 맞춤: σ 8 · 진하기 0.30 · 무채색 */ color: #4B4B4B; }
.evh-card__name { display: grid; grid-template-columns: calc(75 * var(--u)) 1fr; column-gap: calc(20 * var(--u)); align-items: start;
  font-size: max(16px, calc(74 * var(--u))); font-weight: 500; line-height: 1.2; letter-spacing: -0.048em; }
.evh-card__name::before { content: counter(evh, decimal-leading-zero); display: grid; place-items: center; width: calc(75 * var(--u)); aspect-ratio: 1; margin-top: 0.28em;
  border-radius: 50%; background: #41B9B2; color: #fff; font-size: calc(36 * var(--u)); font-weight: 700; letter-spacing: -0.02em; }
.evh-card__name b { color: #41B9B2; font-weight: 600; }
.evh-card__price { display: flex; justify-content: flex-end; align-items: center; column-gap: calc(33 * var(--u)); line-height: 1; }
.evh-card__price del { color: #B9B9B9; font-size: max(20px, calc(89 * var(--u))); font-weight: 500; letter-spacing: -0.045em;
  text-decoration-thickness: calc(7 * var(--u)); text-decoration-color: #B9B9B9; }
.evh-card__price strong { display: flex; align-items: center; column-gap: calc(15 * var(--u)); color: #7D0707; font-family: "EvhNum", var(--fs-font); font-size: max(30px, calc(123 * var(--u))); font-weight: 700; letter-spacing: -0.02em;
  position: relative; top: calc(-5.5 * var(--u)); }   /* Oswald 줄 상자가 Pretendard 와 달라 가운데 맞춤이 글자 기준으로 5px 내려간다 */
.evh-card__dot { margin-inline: -0.05em; }   /* 원본 숫자는 Oswald 보다 좁다 — 폭을 다 맞추면 점이 눌려 「495」로 읽혀서 점 둘레만 조금 좁힌다 */
.evh-card__won { writing-mode: vertical-rl; text-orientation: upright; font-family: var(--fs-font); color: #4B4B4B; font-size: max(11px, calc(39 * var(--u))); font-weight: 500; letter-spacing: 0;
  position: relative; top: calc(11 * var(--u)); }   /* 세로쓰기 줄 상자 탓에 원본보다 11px 높게 선다 */

/* ⑥ 외국어(라우터 /<언어>/, 2026-10-30) — 한국어 화면은 그대로 두고 번역문이 길어 생기는 넘침만 푼다.
   글자는 번역 단위(_src/lang/<언어>.json)로 바뀐다. 가격은 팩에 「495,000 KRW」 꼴로 손번역(원 단위 숫자), 상표·이름은 라틴 표기. */
:root:not(:lang(ko)) .evh-badge__name { width: min-content; margin-inline: auto; font-size: calc(44 * var(--u)); line-height: 1.05; letter-spacing: -0.02em; }   /* 「Kim So-hyun」 — 세 글자 자리에 11자라 두 줄(Kim / So-hyun)로 */
:root:not(:lang(ko)) .evh-banner .evh-badge__name { font-size: calc(28 * var(--u)); }
:root:not(:lang(ko)) .evh-banner__title { font-size: calc(100 * var(--u)); }   /* 「Belotero」 한 줄이 칸(436)에 들어가고 배지(x 560~)에 닿지 않게 */
:root:not(:lang(ko)) .evh-banner__launch { height: auto; min-height: calc(66 * var(--u)); padding: calc(8 * var(--u)) calc(16 * var(--u)); line-height: 1.2; }
:root:not(:lang(ko)) .evh-launch {
  width: fit-content; min-width: calc(632 * var(--u)); max-width: calc(1100 * var(--u)); height: auto; min-height: calc(109 * var(--u));
  padding: calc(14 * var(--u)) calc(48 * var(--u)); line-height: 1.25;
}
/* 제품 그림 설명 — 지시선(그림에 구워짐) 위에 앉도록 아래 끝을 한국어 줄 상자 아래 끝에 맞추고, 길면 위로 줄을 늘린다(지시선 길이 360~370) */
:root:not(:lang(ko)) .evh-diagram__label { top: auto; white-space: normal; width: max-content; max-width: calc(380 * 100% / 1280); line-height: 1.15;
  font-size: max(11px, calc(46 * var(--u))); letter-spacing: -0.02em; }
:root:not(:lang(ko)) .evh-diagram__label--barrier { bottom: calc((1100 - 97) * 100% / 1100); text-align: right; }
:root:not(:lang(ko)) .evh-diagram__label--acne    { bottom: calc((1100 - 270) * 100% / 1100); text-align: right; font-size: max(10px, calc(36 * var(--u))); }
:root:not(:lang(ko)) .evh-diagram__label--texture { bottom: calc((1100 - 828) * 100% / 1100); text-align: left; }
:root:not(:lang(ko)) .evh-diagram__label--balance { bottom: calc((1100 - 1037) * 100% / 1100); text-align: left; }
:root:is(:lang(ja), :lang(zh-CN), :lang(zh-TW)) .evh-diagram__label { font-size: max(12px, calc(56 * var(--u))); }   /* 한자·가나는 짧아서 덜 줄인다 */
:root:is(:lang(ja), :lang(zh-CN), :lang(zh-TW)) .evh-diagram__label--acne { font-size: max(10px, calc(42 * var(--u))); }
/* 「KRW」 는 가로로, 숫자 밑줄에 맞춘다(한국어 「만원」 만 세로쓰기) */
:root:not(:lang(ko)) .evh-card__price strong { align-items: baseline; }
:root:not(:lang(ko)) .evh-card__won { writing-mode: horizontal-tb; top: 0; font-size: max(11px, calc(40 * var(--u))); }