/* ===== CRM 팝업 id 1 「겨울방학 이벤트」 HTML 판 (2026-11-02) =====
   사용자 「팝업 이미지도 텍스트랑 이미지 분리 가능해? 하고 번역 진행도」. 조각 _src/gen/popup-html/popup-1.html, 그림·별·글꼴 _src/build/popup-1-html.py.
   층: 글자 지운 그림(pc.jpg 1920×1080 · mo.jpg 1083×1610) → HTML 글 → 글자와 겹친 별 스티커(stars-*.png, 원본에서 별이 글자 위에 있다).
   단위 --u = 그림 폭/1920(PC) · /1083(≤1023, hp.css 의 팝업 모바일 경계와 <source> 가 같다). 좌표는 원본 픽셀.
   모바일 그림의 쪽지·모눈종이는 PC 와 같은 소재를 옮겨 놓은 것이다 — 쪽지 (−1214, −11) · 모눈종이 (−789, +561).
   .hpp(크기 컨테이너) 안에서 .hpp__art 가 그림 비율 상자로 가운데 온다 — 팝업 창 비율은 가장 세로로 긴 장이라 그림과 조금 다를 수 있다. */

@font-face { font-family: "HppDoHyeon"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../popup/html/1/dohyeon.woff2?v=834d08eb") format("woff2"); }
@font-face { font-family: "HppJua"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../popup/html/1/jua.woff2?v=acfeb59b") format("woff2"); }

.hpp { position: relative; width: 100%; height: 100%; container-type: size; }
.hpp--1 .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--1 picture { display: block; width: 100%; height: 100%; }
.hp-popup .hpp--1 img.hpp__bg { display: block; width: 100%; height: 100%; object-fit: fill; }
.hpp--1 :where(p) { position: absolute; margin: 0; padding: 0; white-space: nowrap; }

/* 쪽지 「선착순 모집」 — 청록 #10AAD2, 도현체 가로 0.77 · 154, 같은 색 외곽 3 으로 굵기. 글자 덩어리 가운데 (1532, 188.5), -4.1° */
.hpp--1 .hpp1-kicker {
  left: calc(1532 * var(--u)); top: calc(197.1 * var(--u)); transform: translate(-50%, -50%) rotate(-4.1deg);
  font-family: "HppDoHyeon", var(--fs-font); font-size: calc(154 * var(--u)); font-weight: 400; line-height: 1; letter-spacing: calc(-9 * var(--u));
  color: #10AAD2; -webkit-text-stroke: calc(3 * var(--u)) #10AAD2;
}
/* 「포시즌 얼리버드 이벤트 진행중!」 — #262B2D, Pretendard 500 · 24, 가운데 (1538.7, 273.2), -4.1° */
.hpp--1 .hpp1-sub {
  left: calc(1538.7 * var(--u)); top: calc(275.2 * var(--u)); transform: translate(-50%, -50%) rotate(-4.1deg);
  font-family: var(--fs-font); font-size: calc(24 * var(--u)); font-weight: 500; line-height: 1.2; letter-spacing: calc(-0.8 * var(--u));
  color: #262B2D;
}
/* 별 스티커 — 원본 x 1291~1773 · y 142~258 */
.hp-popup .hpp--1 .hpp1-stars { position: absolute; left: calc(1291 * var(--u)); top: calc(142 * var(--u)); width: calc(482 * var(--u)); height: auto; pointer-events: none; }
.hp-popup .hpp--1 .hpp1-stars img { width: 100%; height: auto; object-fit: fill; }
/* 모눈종이 「겨울방학 / 이벤트」 — 분홍 #FEC6EB + 바깥 17 청록 #0EA9D1(외곽 34 를 글자 밑에), 주아체 가로 0.867 · 227, 왼쪽 맞춤 두 줄.
   글자 왼쪽 1137 · 윗줄 글자 위 504 · 아랫줄 글자 위 764. 원본은 두 줄의 글자 사이가 다르다(윗줄 폭 637 · 아랫줄 479) — 윗줄만 ::first-line 자간 */
.hpp--1 .hpp1-title {
  left: calc(1134 * var(--u)); top: calc(495.8 * var(--u)); width: calc(680 * var(--u)); white-space: normal; word-break: keep-all; overflow-wrap: normal;
  font-family: "HppJua", var(--fs-font); font-size: calc(227 * var(--u)); font-weight: 400; line-height: 1.1; letter-spacing: calc(9 * var(--u));
  color: #FEC6EB; -webkit-text-stroke: calc(34 * var(--u)) #0EA9D1; paint-order: stroke fill;
}
:root:lang(ko) .hpp--1 .hpp1-title::first-line { letter-spacing: calc(-5 * var(--u)); }

@media (max-width: 1023px) {
  .hpp--1 .hpp__art { width: min(100cqw, 100cqh * 1083 / 1610); height: min(100cqh, 100cqw * 1610 / 1083); --u: calc(100cqw / 1083); }
  .hpp--1 .hpp1-kicker { left: calc(318 * var(--u)); top: calc(186.1 * var(--u)); }
  .hpp--1 .hpp1-sub { left: calc(324.7 * var(--u)); top: calc(264.2 * var(--u)); }
  .hp-popup .hpp--1 .hpp1-stars { left: calc(78 * var(--u)); top: calc(130 * var(--u)); width: calc(481 * var(--u)); }
  .hpp--1 .hpp1-title { left: calc(345 * var(--u)); top: calc(1056.8 * var(--u)); }
}

/* ── 외국어(라우터가 랭귀지팩으로 글자를 바꾼다). 한국어 크기·자간은 원본 그림에 맞춘 값이라 줄이고 줄바꿈을 허용한다 ── */
/* 쪽지 — 두 글을 한 묶음(.hpp1-note, 글자 칸 x 1301~1771 · y 100~300 을 -4.1° 돌린 상자)으로 아래부터 쌓는다.
   부제는 원본 자리(가운데 y 275)에, 쪽지 제목은 그 위로 두 줄까지 — 가운데 고정으로 두면 두 줄일 때 부제를 덮었다 */
:root:not(:lang(ko)) .hpp--1 .hpp1-note {
  position: absolute; left: calc(1301 * var(--u)); top: calc(100 * var(--u)); width: calc(470 * var(--u)); height: calc(200 * var(--u));
  transform: rotate(-4.1deg); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: calc(11 * var(--u)); box-sizing: border-box;
}
/* 외국어는 별을 글 밑으로 — 별 자리는 한국어 글자에 맞춰져 있어 번역문 글자를 가렸다(mn 「Тэргүүн」·ja 「実施中!」) */
:root:not(:lang(ko)) .hp-popup .hpp--1 .hpp1-stars { z-index: 0; }
:root:not(:lang(ko)) .hpp--1 .hpp1-note { z-index: 1; }
:root:not(:lang(ko)) .hpp--1 .hpp1-note p { position: static; transform: none; width: 100%; white-space: normal; text-align: center; text-wrap: balance; overflow-wrap: normal; }
:root:not(:lang(ko)) .hpp--1 .hpp1-kicker {
  margin-bottom: calc(10 * var(--u)); font-size: calc(68 * var(--u)); line-height: 1.02; letter-spacing: 0; -webkit-text-stroke-width: calc(2 * var(--u));
}
:root:not(:lang(ko)) .hpp--1 .hpp1-sub { font-size: calc(22 * var(--u)); line-height: 1.15; letter-spacing: 0; }
/* 모눈종이 — 한국어처럼 왼쪽 맞춤. 종이 오른쪽 아래가 파여 있다(x 1650 넘어 y 725 아래, 11-02 사용자 화면에서 ja 「ント」가 걸쳤다).
   첫 줄은 글자 칸 오른쪽 끝(1775)까지 쓰고 바닥을 파인 곳 바로 위(--y0)에 둔다. 둘째 줄부터는 파인 곳 왼쪽(1630)까지 —
   오른쪽 띠 float 의 shape-outside 가 첫 줄 높이만큼 위를 비워 둘째 줄부터만 좁힌다. --f 글자 크기 · --f1 첫 줄 크기(그림 px) */
:root:not(:lang(ko)) .hpp--1 .hpp1-title {
  --f: 140; --f1: var(--f); --y0: 718;
  left: calc(1137 * var(--u)); top: calc((var(--y0) - 1.04 * var(--f1)) * var(--u)); width: calc(638 * var(--u));
  font-size: calc(var(--f) * var(--u)); line-height: 1.04; letter-spacing: 0; -webkit-text-stroke-width: calc(0.16 * var(--f) * var(--u));
  text-align: left; text-wrap: wrap; word-break: normal;   /* 한국어 keep-all 이면 「寒假活动」을 못 나눈다. i18n.css 의 외국어 p «pretty» 가 「Winter / Break Event」 로 긴 줄을 아래로 보냈다. 아랍어도 왼쪽 — 오른쪽이면 둘째 줄이 파인 곳에 걸린다 */
}
:root:not(:lang(ko)) .hpp--1 .hpp1-title::first-line { font-size: calc(var(--f1) * var(--u)); -webkit-text-stroke-width: calc(0.16 * var(--f1) * var(--u)); }
:root:not(:lang(ko)) .hpp--1 .hpp1-title::before {
  content: ""; float: right; width: calc(145 * var(--u)); height: calc(600 * var(--u));
  shape-outside: inset(calc((1.04 * var(--f1) + 0.2 * var(--f)) * var(--u)) 0 0 0);
}
/* 언어별 크기 — 둘째 줄부터 가장 긴 낱말이 493 안, 세 줄이면 셋째 줄 바닥이 종이 바닥(약 970) 위 */
:root:lang(en) .hpp--1 .hpp1-title { --f: 124; }
:root:lang(ja) .hpp--1 .hpp1-title { --f: 118; --f1: 195; }   /* 「冬休み / イベント」 — 크기가 같으면 「冬休みイ / ベント」, 첫 줄을 키워 넷째 글자가 못 들어오게 */
/* 「寒假 / 活动」 두 줄 — 한국어 원본(227)과 같은 짜임. 220 은 종이 위·왼쪽 끝에 닿아 200 으로, 한 줄에 석 자가 들어오지 않게 폭을 좁힌다(띠 불필요) */
:root:is(:lang(zh-CN), :lang(zh-TW)) .hpp--1 .hpp1-title { --f: 200; width: calc(482 * var(--u)); padding-left: calc(12 * var(--u)); }
:root:is(:lang(zh-CN), :lang(zh-TW)) .hpp--1 .hpp1-title::before { content: none; }
:root:lang(th) .hpp--1 .hpp1-title { --f: 84; }
:root:lang(vi) .hpp--1 .hpp1-title { --f: 96; }   /* 「Sự kiện kỳ / nghỉ đông」 — 112 면 둘째 줄이 낱말 하나씩 세 줄 */
:root:lang(id) .hpp--1 .hpp1-title { --f: 100; }   /* 「Musim Dingin」 106 이면 1440 에서만 두 줄로 갈렸다(폭 500) */
:root:lang(mn) .hpp--1 .hpp1-title { --f: 72; }   /* 「урамшуулал」 76 이면 497 — 띠 밑으로 떨어졌다 */
:root:lang(mn) .hpp--1 .hpp1-kicker { font-size: calc(44 * var(--u)); }
:root:is(:lang(ru), :lang(vi)) .hpp--1 .hpp1-kicker { font-size: calc(60 * var(--u)); }   /* 두 줄 쪽지 제목 + 두 줄 부제면 68 은 쪽지 위 테이프에 닿았다 */
/* 도현·주아 조각은 한글 몇 자 + 기본 라틴뿐 — 악센트·키릴·태국·아랍·한자가 섞이면 글자마다 꼴이 달라진다 → 영어·인니어 밖은 사이트 글꼴 굵게 */
:root:not(:lang(ko)):not(:lang(en)):not(:lang(id)) .hpp--1 :is(.hpp1-kicker, .hpp1-title) { font-family: var(--fs-font); font-weight: 700; }

@media (max-width: 1023px) {
  :root:not(:lang(ko)) .hpp--1 .hpp1-note { left: calc(87 * var(--u)); top: calc(89 * var(--u)); }
  :root:not(:lang(ko)) .hpp--1 .hpp1-title { --y0: 1279; left: calc(348 * var(--u)); }   /* 모눈종이 (−789, +561) */
}