/* ===== 이벤트 글 513 「11월 피부 프로모션」 본문 그림의 HTML 판 (2026-10-30) =====
   승인자 「11월 프로모션도 분리」 — 원본 /hp/uploads/board/event/202610/30-0a9aeb721f.jpg(1600×2263)을 실측해 옮겼다.
   route.php hp_event_html 이 이 파일을 42-evh.css 뒤에 붙인다. 단위 --u = 문서 폭 / 1600, 아래 숫자는 원본 픽셀이다.
   그림 조각 _src/build/ev-1030-html-post-513.py · 클래스 접두어 evh-sk- (42-evh.css 의 벨로테로 규칙과 안 섞이게).
   본문 상자 .hp-post__body(hp.css)의 p 여백·img 여백·overflow-wrap:anywhere 가 새어 들어오므로 선택자를 두 단계 이상으로 쓴다.
   원본 글자는 사이트 글꼴보다 약 8% 좁다(장평) — 크기는 글자 높이에 맞추고 남는 폭은 자간으로 줄였다(겹침 점수가 scaleX 보다 높다). */
@font-face { font-family: "EvhSkAnton"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../events/html/post-513/anton-title.woff2?v=bd8dad19") format("woff2"); }   /* Anton(OFL) 「AUTUMN SKIN CARE」 글자만 */

.fs-evd-doc .evh--post-513 { --u: calc(100cqw / 1600); background: #FAF5F2; color: #050505; text-align: left; overflow-wrap: normal; line-height: 1.2; }
.fs-evd-doc .evh--post-513 :where(p, h2, h3, ul, li, del) { margin: 0; padding: 0; list-style: none; }
.fs-evd-doc .evh--post-513 img { display: block; margin: 0; max-width: none; }

/* 짜임 — 두 세로줄을 한 격자 줄에 겹쳐 놓는다. 선 = 0 · 691(주황 판·사진 2 끝) · 746(카드 5 왼쪽) · 795(카드 1·3 오른쪽) · 1600.
   번역문이 길어 카드가 늘면 같은 줄 아래 것만 밀리고, 문서 높이는 더 긴 줄을 따른다 */
.evh--post-513 .evh-sk-grid { display: grid; grid-template-columns: calc(691 * var(--u)) calc(55 * var(--u)) calc(49 * var(--u)) 1fr; }
.evh--post-513 .evh-sk-col { grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; position: relative; z-index: 1; min-width: 0; }
.evh--post-513 .evh-sk-col--left { grid-column: 1 / 4; z-index: 2; }   /* 카드 1 오른쪽 위 모서리가 사진 1(오른쪽 줄) 위에 얹힌다 — x 785–795 · y 534–615 */
.evh--post-513 .evh-sk-col--right { grid-column: 3 / 5; padding-bottom: calc(60 * var(--u)); }
.evh--post-513 .evh-sk-orange { grid-row: 1; grid-column: 2 / 5; align-self: end; height: calc(337 * var(--u)); background: #FDA075; }   /* y 1926–2263 */

.fs-evd-doc .evh--post-513 img.evh-sk-photo--top { width: calc(815 * var(--u)); height: auto; margin-left: calc(39 * var(--u)); }   /* x 785–1600 · y 0–615 */
.fs-evd-doc .evh--post-513 img.evh-sk-photo--bottom { width: calc(691 * var(--u)); height: auto; margin-top: auto; }                 /* x 0–690 · y 1410–2263, 왼쪽 줄 바닥에 붙인다 */

/* ① 머리 — 부제 · 제목(Anton, 영문이라 번역 단위가 아니다) · Pesta 손글씨(그림) · 기간 */
.evh--post-513 .evh-sk-head { position: relative; width: calc(795 * var(--u)); height: calc(534 * var(--u)); }
.evh--post-513 .evh-sk-sub { position: absolute; left: calc(127 * var(--u)); top: calc(58 * var(--u)); color: #6CA45D; font-size: max(10px, calc(31 * var(--u))); line-height: 1.2; letter-spacing: 0; white-space: nowrap; }
.evh--post-513 .evh-sk-title { position: absolute; left: calc(124 * var(--u)); top: calc(115.5 * var(--u)); width: calc(600 * var(--u)); color: #6CA45D;
  font-family: "EvhSkAnton", var(--fs-font); font-weight: 400; font-size: calc(131.4 * var(--u)); line-height: calc(135.5 * var(--u)); letter-spacing: 0; white-space: nowrap; }
.evh--post-513 .evh-sk-title span { display: block; width: fit-content; margin-left: calc(4 * var(--u)); transform: scaleX(1.16); transform-origin: 0 50%; }   /* 원본 글자가 Anton 보다 1.16배 넓다 */
.evh--post-513 .evh-sk-title span + span { margin-left: 0; transform: scaleX(1.178); }   /* SKIN CARE 는 x 130–703 — 한 배율로는 9px 좁다 */
/* 상자(h2)를 늘린 글자보다 넓게, 왼쪽 들임은 상자에 — i18n.js fitHeads 는 글자 범위(변형 포함)가 상자를 넘으면 «넘침» 으로 보고 다른 언어에서 제목을 63% 까지 줄였다 */
.fs-evd-doc .evh--post-513 img.evh-sk-pesta { position: absolute; left: calc(138 * var(--u)); top: calc(320 * var(--u)); width: calc(376 * var(--u)); height: auto; pointer-events: none; }
.evh--post-513 .evh-sk-date { position: absolute; left: calc(124 * var(--u)); top: calc(458 * var(--u)); display: flex; align-items: center; gap: calc(62 * var(--u));
  color: #6CA45D; font-family: "GmarketSans", var(--fs-font); font-weight: 700; font-size: max(10px, calc(37.4 * var(--u))); line-height: 1.2; letter-spacing: -0.056em; white-space: nowrap; }
.evh--post-513 .evh-sk-period { display: flex; align-items: center; }
.evh--post-513 .evh-sk-vat { margin-left: calc(-5 * var(--u)); font-size: max(10px, calc(33.6 * var(--u))); }   /* 「※ VAT포함」 은 기간보다 작다 — 글자 높이 27 vs 31 */
.evh--post-513 .evh-sk-period__line { width: calc(137 * var(--u)); height: max(1px, calc(1.2 * var(--u))); margin-inline: calc(14 * var(--u)); background: #9FAF96; }   /* x 224–360 */

/* ② 카드 — 흰 바탕, 테두리 1.5 #B1A6A1. 자리·크기는 카드마다(--x 왼쪽 들임 · --w 폭 · --h 높이(원본, 번역문이 길면 늘어난다) · --mt 위 간격 · --pl/--pr 글 들임 · --dl/--dr 구분선 들임
   · --tm/--tb/--tl 띠 위 간격·높이·들임). 오른쪽 카드 셋(2·4·5)은 원본 글자가 왼쪽 둘보다 3~4% 좁게 짜여 있어 자간을 따로 준다(--nls 이름 · --tls 띠) */
.evh--post-513 .evh-sk-card { box-sizing: border-box; position: relative; z-index: 1; width: calc(var(--w) * var(--u)); min-height: calc(var(--h) * var(--u));
  margin-left: calc(var(--x) * var(--u)); margin-top: calc(var(--mt) * 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(1.5 * var(--u))) solid #B1A6A1; }
.evh--post-513 .evh-sk-card { --pt: 26.5; --nls: -0.044em; --tls: -0.063em; }
.evh--post-513 :is(.evh-sk-card--2, .evh-sk-card--4, .evh-sk-card--5) { --nls: -0.067em; --tls: -0.085em; }
.evh--post-513 .evh-sk-card--1 { --x: 50; --w: 746; --h: 390; --mt: 0;   --pl: 47.5; --pr: 44.5; --dl: 46; --dr: 46; --tm: 25; --tb: 50; --tl: 8; }
.evh--post-513 .evh-sk-card--3 { --x: 50; --w: 746; --h: 414; --mt: 38;  --pl: 47.5; --pr: 44.5; --dl: 46; --dr: 44; --tm: 31; --tb: 50; --tl: 5; margin-bottom: calc(34 * var(--u)); }
.evh--post-513 .evh-sk-card--2 { --x: 194; --w: 614; --h: 698; --mt: -121; --pl: 38.5; --pr: 42.5; --dl: 40; --dr: 38; --tm: 27; --tb: 48; --tl: -3; }
.evh--post-513 .evh-sk-card--4 { --x: 91; --w: 717; --h: 479; --mt: 41;  --pl: 45.5; --pr: 44.5; --dl: 46; --dr: 44; --tm: 30.5; --tb: 47; --tl: -2; }
.evh--post-513 .evh-sk-card--5 { --x: 0;  --w: 808; --h: 449; --mt: 41;  --pl: 35.5; --pr: 36.5; --dl: 48.5; --dr: 47.5; --tm: 27.5; --tb: 47; --tl: -2; }

.evh--post-513 .evh-sk-card__head { margin-inline: calc((var(--dl) - var(--pl)) * var(--u)) calc((var(--dr) - var(--pr)) * var(--u));
  padding-bottom: calc(20.5 * var(--u)); border-bottom: max(1px, calc(2.2 * var(--u))) solid #B5A29D;
  color: #B6A39A; font-family: "GmarketSans", var(--fs-font); font-weight: 700; font-size: max(12px, calc(39 * var(--u))); line-height: 1.2; letter-spacing: -0.06em; text-align: center; text-wrap: balance; }
.evh--post-513 .evh-sk-card__tag { width: fit-content; margin: calc(var(--tm) * var(--u)) 0 0 calc(var(--tl) * var(--u)); padding: 0 calc(15 * var(--u));
  background: #FEE1D1; color: #CD6333; font-weight: 500; font-size: max(12px, calc(39.4 * var(--u))); line-height: max(1.18em, calc(var(--tb) * var(--u))); letter-spacing: var(--tls); text-wrap: balance; }
.evh--post-513 .evh-sk-card__extra { width: fit-content; margin: calc(15 * var(--u)) 0 0 calc(1 * var(--u)); padding: 0 calc(17.5 * var(--u));
  background: #FBA075; color: #fff; font-weight: 600; font-size: max(11px, calc(29 * var(--u))); line-height: max(1.38em, calc(40 * var(--u))); letter-spacing: -0.04em; }

/* 줄 — 이름(1~2줄)과 가격. 가격은 이름 마지막 줄에 붙거나(기본), 원본처럼 다음 줄 오른쪽에 둔다(--below). 넓이가 모자라면 저절로 다음 줄로 */
.evh--post-513 .evh-sk-item { display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: calc(20 * var(--u)); margin-top: calc(var(--mt) * var(--u)); }
.evh--post-513 .evh-sk-item__name { font-weight: 400; font-size: max(12px, calc(38.4 * var(--u))); line-height: max(1.12em, calc(43 * var(--u))); letter-spacing: var(--nls); text-wrap: balance; }   /* 줄 높이 하한 — 글자 하한(12px)이 걸리는 좁은 폭에서 줄이 겹치지 않게 */
.evh--post-513 .evh-sk-item__price { display: flex; align-items: baseline; justify-content: flex-end; column-gap: calc(var(--pg, 17) * var(--u)); margin-left: auto; white-space: nowrap;
  font-family: "GmarketSans", var(--fs-font); font-weight: 700; font-size: max(12px, calc(39.5 * var(--u))); line-height: 1; letter-spacing: -0.06em; }
.evh--post-513 .evh-sk-item--below .evh-sk-item__price { flex-basis: 100%; margin-top: calc(var(--pm, 0) * var(--u)); }
.evh--post-513 .evh-sk-item__price del { position: relative; color: #B6A39A; text-decoration: none; }
.evh--post-513 .evh-sk-item__price del::after { content: ""; position: absolute; left: 0; right: 0; top: 52%; height: max(1px, calc(2 * var(--u))); background: currentColor; }   /* 원본 취소선 2px, 글자 높이 57% */
.evh--post-513 .evh-sk-item__price b { color: #69A05A; font-weight: 700; }

/* ③ 다른 언어 — 한국어 자리는 그대로 두고 길어지는 곳만 푼다. 제목 「AUTUMN SKIN CARE」·옛 가격 숫자는 한글이 없어 번역 단위가 아니다 */
:root:not(:lang(ko)) .evh--post-513 .evh-sk-sub { top: calc(94 * var(--u)); width: calc(640 * var(--u)); white-space: normal; line-height: 1.1; text-wrap: balance; transform: translateY(-100%); }   /* 아랫변을 한국어 자리(y 94)에 두고 길면 위로 접힌다 — 사진 1(x 785–)에 안 닿게. bottom 으로 잡으면 날짜 줄이 접혀 머리가 늘 때 제목 위로 내려왔다(ar 390) */
:root:not(:lang(ko)) .evh--post-513 .evh-sk-head { box-sizing: border-box; height: auto; min-height: calc(534 * var(--u)); padding: calc(458 * var(--u)) 0 calc(30 * var(--u)); }
:root:not(:lang(ko)) .evh--post-513 .evh-sk-date { position: static; flex-wrap: wrap; width: calc(650 * var(--u)); margin-left: calc(124 * var(--u)); row-gap: calc(6 * var(--u)); column-gap: calc(40 * var(--u)); }   /* 「※ VAT included」 가 사진 1 에 닿으면 다음 줄 — 카드 1 이 그만큼 내려간다 */
:root:not(:lang(ko)) .evh--post-513 .evh-sk-vat { margin-left: 0; }
:root:not(:lang(ko)) .evh--post-513 .evh-sk-item__name { line-height: max(1.25em, calc(46 * var(--u))); }
:root:not(:lang(ko)) .evh--post-513 .evh-sk-item--below .evh-sk-item__price { margin-top: calc(4 * var(--u)); }
/* 아랍어 — i18n.css 의 :lang(ar) 글줄 방향(plaintext)이 .evh 의 lang="ko" 에 막혀 「باقة Thermage x」 순서가 뒤집혔다 */
:root:lang(ar) .evh--post-513 :is(p, h3) { unicode-bidi: plaintext; }