/* ===== 이벤트 글 514 「11월 리프팅 프로모션」 본문 그림의 HTML 판 (2026-10-30) =====
   승인자 「11월 프로모션도 분리」 — 원본 /hp/uploads/board/event/202610/30-fd3b83b7e8.jpg(1280×1860)을 실측해 옮겼다.
   route.php hp_event_html 이 이 파일을 42-evh.css 뒤에 붙인다. 단위 --u = 문서 폭 / 1280(42-evh.css), 아래 숫자는 원본 픽셀이다.
   그림 조각 _src/build/ev-1030-html-post-514.py · 클래스 접두어 evh-lf- (513 과 같은 꼴의 짝 글이지만 규칙은 나눠 둔다).
   본문 상자 .hp-post__body(hp.css)의 p 여백·img 여백·overflow-wrap:anywhere·line-height 가 새어 들어오므로 선택자를 두 단계 이상으로 쓴다.
   글꼴(잉크 겹침으로 고름) — 큰 제목 Anton(가로 1.16배) · 카드 제목·날짜·가격 GmarketSans Bold · 설명·띠·위 줄 Pretendard. */
@font-face { font-family: "EvhLfAnton"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../events/html/post-514/title.woff2?v=3e150542") format("woff2"); }   /* Anton(OFL) 「AUTUMN LIFTING SPECIAL」 글자만 */

.fs-evd-doc .evh--post-514 { --lf-purple: #8268D6; --lf-taupe: #B4A298; background: #fff; color: #000; text-align: left; overflow-wrap: normal; line-height: 1.2; }
.fs-evd-doc .evh--post-514 :where(p, h2, h3, ul, li, del, strong, section) { margin: 0; padding: 0; list-style: none; font-weight: inherit; }
.fs-evd-doc .evh--post-514 img { display: block; margin: 0; max-width: none; }

/* 짜임 — 한 격자 줄에 겹쳐 놓는다. 세로선 = 0 · 537(카드 3 왼쪽) · 648(사진 2 오른쪽 = 주황 면 왼쪽) · 1280.
   오른쪽 줄(위 줄·사진 1·카드 3장)이 문서 높이를 정한다. 번역문이 길어 카드가 늘면 사진 2·주황 면은 바닥에 붙은 채 남는다 */
.evh--post-514 .evh-lf { display: grid; grid-template-columns: calc(537 * var(--u)) calc(111 * var(--u)) 1fr; }
.evh--post-514 .evh-lf > * { grid-row: 1; min-width: 0; }
.evh--post-514 .evh-lf-head { grid-column: 1 / 3; position: relative; z-index: 1; height: calc(830 * var(--u)); }
.evh--post-514 .evh-lf-main { grid-column: 2 / 4; position: relative; z-index: 2; padding: calc(127.5 * var(--u)) 0 calc(77 * var(--u)); }
.fs-evd-doc .evh--post-514 img.evh-lf-photo--2 { grid-column: 1 / 3; align-self: end; width: calc(648 * var(--u)); height: auto; }   /* x 0–647 · y 896–1859 */
.evh--post-514 .evh-lf-orange { grid-column: 3; align-self: end; height: calc(263 * var(--u)); background: #FC9E74; }           /* x 648–1279 · y 1597–1859 */

/* ① 머리 — 제목(Anton, 영문이라 번역 단위가 아니다) · Pesta 손글씨(그림) · 기간 */
.evh--post-514 .evh-lf-title { position: absolute; left: calc(70 * var(--u)); top: calc(151 * var(--u)); width: calc(490 * var(--u)); color: var(--lf-purple);
  font-family: "EvhLfAnton", var(--fs-font); font-weight: 400; font-size: calc(134.4 * var(--u)); line-height: calc(158.5 * var(--u)); letter-spacing: 0.01em; white-space: nowrap; }
.evh--post-514 .evh-lf-title span { display: block; width: fit-content; transform: scaleX(1.16); transform-origin: 0 50%; }   /* 원본 글자가 Anton 보다 1.16배 넓다(세 줄 폭으로 풀었다).
   h2 폭(490)은 늘린 글자(최대 479)를 담으라고 준다 — 폭을 안 주면 외국어 화면에서 i18n.js fitHeads 가 «늘린 글자가 상자를 넘친다» 로 재서 제목을 63% 로 줄였다 */
.fs-evd-doc .evh--post-514 img.evh-lf-pesta { position: absolute; left: calc(86 * var(--u)); top: calc(577 * var(--u)); width: calc(382 * var(--u)); height: auto; pointer-events: none; }
.evh--post-514 .evh-lf-period { position: absolute; left: calc(70 * var(--u)); top: calc(770.5 * var(--u)); max-width: calc(520 * var(--u));
  display: flex; flex-wrap: wrap; align-items: center; column-gap: calc(31 * var(--u));
  color: var(--lf-purple); font-family: "GmarketSans", var(--fs-font); font-weight: 700; font-size: max(11px, calc(31 * var(--u))); line-height: 1.2; letter-spacing: -0.03em; white-space: nowrap; }
.evh--post-514 .evh-lf-dates { display: flex; align-items: center; }
.evh--post-514 .evh-lf-dash { width: calc(117 * var(--u)); height: 1px; margin: 0 calc(3 * var(--u)) 0 calc(17 * var(--u)); background: #7E769B; }   /* x 154–270 · y 789 */
.evh--post-514 .evh-lf-vat { position: relative; top: calc(-2.5 * var(--u)); letter-spacing: -0.035em; }   /* 원본 「※ VAT포함」 은 날짜보다 2~3px 높다 */

/* ② 오른쪽 줄 — 위 줄(오른쪽 끝 1217) · 사진 1(x 611–1279 · y 197–732) · 카드 */
.evh--post-514 .evh-lf-promo { padding-right: calc(62 * var(--u)); text-align: right; color: var(--lf-purple);
  font-size: max(11px, calc(34 * var(--u))); font-weight: 400; line-height: 1.2; letter-spacing: -0.07em; }
.fs-evd-doc .evh--post-514 img.evh-lf-photo--1 { width: calc(669 * var(--u)); height: auto; margin: calc(28.5 * var(--u)) 0 0 calc(74 * var(--u)); }

/* 카드 — 흰 바탕, 테두리 2 #AFA5A2, 그림자 없음. 카드마다 --x 왼쪽 들임(537 기준) · --w 폭 · --h 높이 · --mt 위 간격 · 글 들임 --pl/--pr ·
   제목 위 --pt · 띠 위 --tm · 띠 들임 --tl · 목록 위 --lm · 구분선 들임 --dl/--dr · 자간(em) 제목 --hls · 띠 --tls · 설명 --dls · 옛값과 새값 사이 --pg
   (원본은 카드마다 자간·간격이 조금씩 다르다 — 줄마다 글자 상자 끝을 원본 ±6px 안에 두려고 나눴다) */
.evh--post-514 .evh-lf-card { box-sizing: border-box; position: relative; width: calc(var(--w) * var(--u)); min-height: calc(var(--h) * var(--u));
  margin: calc(var(--mt) * var(--u)) 0 0 calc(var(--x) * var(--u));
  padding: calc(var(--pt) * var(--u)) calc(var(--pr) * var(--u)) calc(20 * var(--u)) calc(var(--pl) * var(--u));
  background: #fff; border: max(1px, calc(2 * var(--u))) solid #AFA5A2; }
.evh--post-514 .evh-lf-card--1 { --x: 64; --w: 615; --h: 321; --mt: -47; --pt: 18; --pl: 37; --pr: 36; --tm: 20; --tl: 9;  --lm: 20.3; --dl: 0; --dr: 0; --hls: -0.059em; --tls: -0.055em; --dls: -0.045em; --pg: 18; }   /* x 601–1215 · y 686–1006 */
.evh--post-514 .evh-lf-card--2 { --x: 64; --w: 615; --h: 341; --mt: 32;  --pt: 18; --pl: 37; --pr: 36; --tm: 23; --tl: 9;  --lm: 13.3; --dl: 0; --dr: 0; --hls: -0.059em; --tls: -0.055em; --dls: -0.04em;  --pg: 18; }   /* x 601–1215 · y 1039–1379 */
.evh--post-514 .evh-lf-card--3 { --x: 0;  --w: 676; --h: 376; --mt: 27;  --pt: 20; --pl: 29; --pr: 29; --tm: 21; --tl: -1; --lm: 13.3; --dl: 9; --dr: 8; --hls: -0.08em;  --tls: -0.075em; --dls: -0.055em; --pg: 15; }    /* x 537–1212 · y 1407–1782 */

.evh--post-514 .evh-lf-card__title { margin-inline: calc(var(--dl) * var(--u)) calc(var(--dr) * var(--u)); padding-bottom: calc(20 * var(--u));
  border-bottom: max(1px, calc(2 * var(--u))) solid #B2A6A0;
  color: var(--lf-taupe); font-family: "GmarketSans", var(--fs-font); font-weight: 700; font-size: max(12px, calc(32.5 * var(--u))); line-height: 1.2; letter-spacing: var(--hls); text-align: center; }
.evh--post-514 .evh-lf-card__tag { width: fit-content; margin: calc(var(--tm) * var(--u)) 0 0 calc(var(--tl) * var(--u)); padding: 0 calc(11 * var(--u)) 0 calc(8.5 * var(--u));
  background: #FFE0D3; color: #C95A2A; font-weight: 500; font-size: max(12px, calc(32 * var(--u))); line-height: 1.28; letter-spacing: var(--tls); text-wrap: balance; }
.evh--post-514 .evh-lf-card__list { margin-top: calc(var(--lm) * var(--u)); }

/* 줄 — 설명(1~2줄)과 가격. 가격은 설명 마지막 줄 오른쪽에 붙거나(기본), 원본처럼 다음 줄 오른쪽에 둔다(--below). 넓이가 모자라면 저절로 다음 줄로 */
.evh--post-514 .evh-lf-row { display: flex; flex-wrap: wrap; align-items: last baseline; column-gap: calc(10 * var(--u)); }
.evh--post-514 .evh-lf-row + .evh-lf-row { margin-top: calc(17 * var(--u)); }
.evh--post-514 .evh-lf-card--3 .evh-lf-row:nth-child(2) { margin-top: calc(28 * var(--u)); }   /* 원본 카드 3 은 둘째 줄만 11px 더 띄웠다 */
.evh--post-514 .evh-lf-row__desc { font-size: max(12px, calc(31 * var(--u))); font-weight: 400; line-height: 1.161; letter-spacing: var(--dls); text-wrap: balance; }
.evh--post-514 .evh-lf-line { display: block; }   /* 원본 두 줄 설명 — <br> 대신 줄마다 블록으로 둬야 좁은 화면·번역문에서 줄마다 balance 가 걸린다(<br> 뒤 줄은 크롬이 안 고른다 — ar 「… + V-Fit / 5cc」) */
.evh--post-514 .evh-lf-row__price { display: flex; align-items: baseline; justify-content: flex-end; column-gap: calc(var(--pg) * var(--u)); margin: 0 calc(2 * var(--u)) 0 auto; white-space: nowrap;
  position: relative; top: calc(-1.5 * var(--u));   /* 원본 가격 밑줄은 설명 밑줄보다 줄마다 +2 ~ −4.6px — 가운데값만큼 올린다 */
  font-family: "GmarketSans", var(--fs-font); font-weight: 700; font-size: max(12px, calc(32.5 * var(--u))); line-height: 0.95; letter-spacing: -0.06em; }   /* 줄 상자가 설명(36)보다 작아야 밑줄 맞춤이 줄을 안 늘린다 */
.evh--post-514 .evh-lf-row--below .evh-lf-row__price { flex-basis: 100%; top: 0; margin-top: calc(3 * var(--u)); }
.evh--post-514 .evh-lf-card--3 .evh-lf-row--below .evh-lf-row__price { margin-top: calc(9 * var(--u)); }   /* 카드 3 은 가격 줄을 6px 더 띄웠다 */
.evh--post-514 .evh-lf-row__price del { position: relative; color: var(--lf-taupe); text-decoration: none; }
.evh--post-514 .evh-lf-row__price del::after { content: ""; position: absolute; left: 0; right: 0.06em; top: 54%; height: max(1px, calc(2 * var(--u))); background: currentColor; }   /* 원본 취소선 2px, 글자 위에서 55% */
.evh--post-514 .evh-lf-row__price strong { color: var(--lf-purple); font-weight: 700; }

/* ③ 좁은 화면(문서 폭 600 미만 — 글자가 최소 크기에 걸린다) — 원본 자간(−0.04~−0.08em)을 그대로 두면 12px 에서 낱말 사이가 붙어 「탄력이부족할」 로 읽힌다 */
@container (max-width: 599px) {
  .evh--post-514 .evh-lf-card__title, .evh--post-514 .evh-lf-card__tag, .evh--post-514 .evh-lf-row__desc, .evh--post-514 .evh-lf-promo { letter-spacing: -0.02em; }
}

/* ④ 외국어(라우터 /<언어>/) — 한국어 화면은 그대로 두고 번역문이 길어 생기는 줄 나눔만 고른다. 제목·날짜는 영문·숫자라 번역 단위가 아니다.
   가격은 팩에 「1,500,000 KRW」 꼴(원 단위 숫자, 옛값 「만」 은 화면 읽기용 숨김 → KRW). i18n.css 의 p { text-wrap-style: pretty } (0,2,1) 가
   카드 글줄을 «… + Wrinkle / Injection 2cc» 처럼 끊어서 balance 로 되돌린다 */
:root:not(:lang(ko)) .evh--post-514 :is(.evh-lf-row__desc, .evh-lf-card__tag, .evh-lf-promo) { text-wrap-style: balance; }
/* 아랍어 — 짜임은 LTR 그대로 두고 글줄만 RTL 로. i18n.css 의 `:lang(ar) :is(p, h3…) { unicode-bidi: plaintext }` 는 자손 결합자라 .evh 의 lang="ko" 와
   상관없이 걸린다 — plaintext 는 「Thermage 300 طلقة …」 처럼 라틴 상표로 시작하는 줄을 LTR 로 잡아 「بوتوكس البشرة 2cc」 가 「2 بوتوكس البشرةcc」 로
   갈라졌다 → isolate + rtl 로 바탕 방향을 못박는다. 카드 제목 끝 「]」 는 RTL 바탕에서 뒤집혀 「[」 로 보이므로 뒤에 LRM 을 붙여 라틴 쪽에 묶는다 */
:root:lang(ar) .evh--post-514 :is(.evh-lf-promo, .evh-lf-vat, .evh-lf-card__title, .evh-lf-card__tag, .evh-lf-row__desc) { direction: rtl; unicode-bidi: isolate; }
:root:lang(ar) .evh--post-514 .evh-lf-row__desc { text-align: start; }
:root:lang(ar) .evh--post-514 .evh-lf-card__title::after { content: "\200E"; }
/* 일본어 — i18n.css 가 모든 요소에 word-break:normal !important 를 걸어 「300ショ / ット」 처럼 낱말 가운데서 끊긴다 → 구 단위(제목과 같은 auto-phrase) */
:root:lang(ja) .evh--post-514 :is(.evh-lf-row__desc, .evh-lf-line, .evh-lf-card__tag, .evh-lf-promo) { word-break: auto-phrase !important; }   /* 줄 블록(span)도 — 그 규칙이 자식마다 직접 걸린다 */