/* hf265 (마스터 A+B안 · 전구 1안) + hf266 (전구 5px · 순록 썰매 왕복 · 접속 후 5분만 움직임) + hf267 (썰매 16초 U자 · 5초 쉼) + hf269 (늘어진 전선 · 물결) + hf273 (5분 멈춤 없앰 · 계속 움직임) + hf274 (하단 눈사람) + hf275 (눈사람 2배 · 메뉴판 앞): 첫 화면 크리스마스 장식 — assets/js/season-decor.js가 기간에만 html.has-xmas-decor를 붙이고 제목(h1) 안에 넣는다.
   숫자는 440 도화지 기준(landing-fit.js가 작은 폰에서 같은 비율로 줄인다). 제목 상자 위 = 도화지 44, 선 높이 = 제목 상자 위 24.7. */
html.has-xmas-decor body.phone-mode.is-landing .hero h1.landing-title {
  position: relative !important;
  overflow: visible !important;
}

html.has-xmas-decor body.phone-mode.is-landing .hero h1.landing-title .landing-title-main {
  position: relative !important;
  z-index: 1 !important;
}

/* hf293 (마스터 B안): 머리글자 M 초록 · O 빨강 — 필수템 리본 첫 줄(landing-stage.css is-green · is-red)과 같은 색.
   hf308: 리본 초록은 가는 글자라 #a6eab9로 밝혀 M(#7fcf95)과 같은 밝기로 보이게 했다.
   제목은 -webkit-text-fill-color로 칠해져 있어 그것까지 바꾼다. 움직임은 없다(사파리 흐린 글자 걱정 없음). */
html.has-xmas-decor body.phone-mode.is-landing .hero h1.landing-title .landing-title-main .xmas-initial {
  display: inline !important;
  position: static !important;
  font-style: normal !important;
}

html.has-xmas-decor body.phone-mode.is-landing .hero h1.landing-title .landing-title-main .xmas-initial.is-green {
  color: #7fcf95 !important;
  -webkit-text-fill-color: #7fcf95 !important;
}

html.has-xmas-decor body.phone-mode.is-landing .hero h1.landing-title .landing-title-main .xmas-initial.is-red {
  color: #f26b5f !important;
  -webkit-text-fill-color: #f26b5f !important;
}

/* 전구 줄: 한쪽 5개 (바깥 → 제목 쪽 금 · 빨강 · 금 · 초록 · 금).
   hf269 (마스터 B안): 곧은 선 대신 늘어진 전선(SVG)에 전구가 매달려 함께 물결치듯 일렁인다 — season-decor.js drawString.
   .xmas-string은 hf264 선 자리(높이 = 선 가운데)에 놓이고, 그 안 SVG는 선 높이를 y 0으로 그린다(위 6 · 아래 16 여유). */
.hero h1.landing-title .xmas-string {
  position: absolute !important;
  height: 0 !important;
  pointer-events: none;
  z-index: 2;
}

.xmas-wire {
  position: absolute;
  left: 0;
  top: -6px;
  overflow: visible;
}

.xmas-wire-line {
  fill: none;
  stroke: rgba(218, 180, 102, 0.6);
  stroke-width: 1;
  stroke-linejoin: round;
}

/* 장식이 있는 동안 hf264의 곧은 선은 숨긴다(전선이 그 자리를 대신한다). hf273: 기간 내내 (5분 뒤 되돌림 없앰) */
html.has-xmas-decor body.phone-mode.is-landing:not(.ipad-detail) .page-shell .hero h1.landing-title::before,
html.has-xmas-decor body.phone-mode.is-landing:not(.ipad-detail) .page-shell .hero h1.landing-title::after {
  background: transparent !important;
}

/* 1안 반짝반짝: 거의 켜진 채로 전구마다 제각각 잠깐 어두워진다. 전구별 길이(2.4~4.8초)·시작점은 season-decor.js가 정한다.
   hf266: 전구 지름 5 · 빛 번짐 지름 8 (SVG 원 r 2.5 · 옅은 원 r 4) */
.xmas-bulb {
  opacity: 0.95;
  animation: xmas-blink 3.6s ease-in-out infinite;
}

@keyframes xmas-blink {
  0%, 36%, 64%, 100% { opacity: 0.95; }
  50% { opacity: 0.28; }
}

/* 제목 위 가운데 작은 금색 별: 4.8초마다 한 번 반짝 */
.hero h1.landing-title .xmas-star {
  position: absolute !important;
  left: 50%;
  top: -26px;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  pointer-events: none;
  z-index: 2;
  opacity: 0.55;
  animation: xmas-star 4.8s ease-in-out infinite;
}

.xmas-star svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: #f3d08a;
  filter: drop-shadow(0 0 4px rgba(243, 201, 117, 0.8));
}

@keyframes xmas-star {
  0%, 68%, 100% { opacity: 0.55; transform: scale(0.75) rotate(0deg); }
  82% { opacity: 1; transform: scale(1.12) rotate(45deg); }
}

/* 금빛 눈: 도화지 맨 위(0)부터 검색창 윗선(112)까지만, 글자 뒤로 지나간다.
   hf278 (마스터): 위쪽만 흐리게 하고 끝까지 떨어져 검색창 윗선에서 사라진다.
   hf281 (마스터 「제거해줘」): hf278~279의 검색창 위 눈 쌓임(.xmas-cap)은 없앴다 */
.hero h1.landing-title .xmas-snow {
  position: absolute !important;
  top: -44px;
  left: -18px;
  right: -18px;
  height: 112px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 100%);
}

.xmas-flake {
  position: absolute;
  top: 0;
  border-radius: 50%;
  background: rgba(255, 246, 226, 0.95);
  box-shadow: 0 0 4px rgba(255, 248, 230, 0.45);
  opacity: 0;
  animation: xmas-fall 12s linear infinite;
}

.xmas-flake.is-gold {
  background: rgba(240, 200, 120, 0.95);
}

@keyframes xmas-fall {
  0% { opacity: 0; transform: translate3d(0, -8px, 0); }
  12% { opacity: var(--flake-opacity, 0.7); }
  50% { transform: translate3d(var(--drift, 0px), 50px, 0); }
  97% { opacity: var(--flake-opacity, 0.7); transform: translate3d(0, 107px, 0); }
  100% { opacity: 0; transform: translate3d(0, 107px, 0); }
}

/* hf266 (마스터): 순록 두 마리가 끄는 썰매가 제목 위 하늘(도화지 0~46)을 난다. 뒤로 금가루 꼬리.
   hf267 (마스터): 한 번에 16초(속도 절반), 빠져나가고 5초 쉰 뒤 반대 방향으로 — season-decor.js가 첫 화면을 연 지 3초 뒤부터
   21초마다 .xmas-sky에 is-ltr / is-rtl을 번갈아 붙여 한 번씩 날린다(5분 동안 14번).
   궤적은 두 방향 모두 U자: 화면 맨 위 높이로 들어와 가운데에서 「Menu Order」 글자 윗선 약 5px 위까지 내려왔다가 다시 맨 위로 빠져나간다
   (가장 낮은 곳에서 별 앞을 스친다). is-rtl은 썰매를 뒤집어 순록이 왼쪽을 본다.
   .xmas-sleigh-x가 가로, .xmas-sleigh가 높이·기울기, .xmas-sleigh-art가 좌우 뒤집기를 맡는다. */
.hero h1.landing-title .xmas-sky {
  position: absolute !important;
  top: -44px;
  left: -18px;
  right: -18px;
  height: 46px;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

.xmas-sleigh-x {
  position: absolute;
  left: 0;
  top: 0;
  width: 64px;
  height: 17px;
  visibility: hidden;
  transform: translateX(-120px);
}

.xmas-sky.is-flying .xmas-sleigh-x {
  visibility: visible;
}

.xmas-sleigh,
.xmas-sleigh-art {
  position: absolute;
  inset: 0;
}

.xmas-sky.is-ltr .xmas-sleigh-x { animation: xmas-fly-ltr-x 16s linear both; }
.xmas-sky.is-ltr .xmas-sleigh { animation: xmas-fly-ltr-y 16s ease-in-out both; }
.xmas-sky.is-rtl .xmas-sleigh-x { animation: xmas-fly-rtl-x 16s linear both; }
.xmas-sky.is-rtl .xmas-sleigh { animation: xmas-fly-rtl-y 16s ease-in-out both; }
/* hf279 (마스터 「작은 폰에서는 존재감이 없을 것 같애」): 썰매 그림·꼬리·가루를 통째로 1.3배(64×17 → 약 83×22) */
.xmas-sky .xmas-sleigh-art { transform: scale(1.3); }
.xmas-sky.is-rtl .xmas-sleigh-art { transform: scale(-1.3, 1.3); }

.xmas-sleigh svg {
  display: block;
  width: 64px;
  height: 17px;
  fill: #f3d08a;
  stroke: #f3d08a;
  filter: drop-shadow(0 0 3px rgba(243, 201, 117, 0.55));
}

/* 금가루 꼬리: 썰매 뒤로 옅어지는 선 + 반짝이는 가루 세 알 (뒤집으면 함께 오른쪽으로) */
.xmas-sleigh-art::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 12px;
  width: 44px;
  height: 1px;
  background: linear-gradient(to right, rgba(243, 208, 138, 0), rgba(243, 208, 138, 0.6));
}

.xmas-dust {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #f6dc9f;
  box-shadow: 0 0 3px rgba(243, 201, 117, 0.9);
}

.xmas-sky.is-flying .xmas-dust {
  animation: xmas-dust 0.9s ease-in-out infinite alternate; /* 날 때만 반짝인다 */
}

.xmas-dust:nth-child(2) { left: -9px; top: 10px; }
.xmas-dust:nth-child(3) { left: -21px; top: 13.5px; }
.xmas-dust:nth-child(4) { left: -33px; top: 9.5px; }
.xmas-sky.is-flying .xmas-dust:nth-child(3) { animation-delay: -0.3s; }
.xmas-sky.is-flying .xmas-dust:nth-child(4) { animation-delay: -0.6s; }

@keyframes xmas-dust {
  from { opacity: 0.2; }
  to { opacity: 1; }
}

@keyframes xmas-fly-ltr-x {
  from { transform: translateX(-120px); }
  to { transform: translateX(470px); }
}

/* U자: 맨 위 → 글자 윗선 가까이 → 맨 위. 내려갈 때 코가 아래, 올라갈 때 코가 위.
   hf279: 1.3배 썰매(위아래로 2.55씩 커짐)에 맞춰 5 → 22 → 5 — 가장 낮을 때 썰매 아래끝 약 41.5, 글자 윗선(약 48)보다 6~7 위 */
@keyframes xmas-fly-ltr-y {
  0% { transform: translateY(5px) rotate(6deg); }
  50% { transform: translateY(22px) rotate(0deg); }
  100% { transform: translateY(5px) rotate(-6deg); }
}

@keyframes xmas-fly-rtl-x {
  from { transform: translateX(470px); }
  to { transform: translateX(-120px); }
}

/* 같은 U자, 왼쪽을 보는 썰매라 기울기 방향만 반대 */
@keyframes xmas-fly-rtl-y {
  0% { transform: translateY(5px) rotate(-6deg); }
  50% { transform: translateY(22px) rotate(0deg); }
  100% { transform: translateY(5px) rotate(6deg); }
}

/* hf274 (마스터 1안): 하단 여백 눈사람 — season-decor.js ground(). 한 바퀴 13초, 모두 같은 13초 시계로 맞춘다.
   자리: 메뉴 테두리 바로 아래(위치는 JS가 정한다), 띠 폭 282(도화지 18~300, 빌드 번호 왼쪽) · 높이 30 · 눈 바닥선 y 22.
   눈사람 가운데 = 도화지 x 220(띠 안 202). 몸 11 · 머리 7.5 · 모자 포함 키 약 21.5. 아이폰 사파리 아래 흐림 띠에 아래쪽 몇 px가 걸린다.
   0~19%   양쪽 끝에서 눈덩이가 굴러오며 커짐 (왼쪽 큰 덩이 = 몸, 오른쪽 작은 덩이 = 머리)
   19~25%  머리가 몸 위로 톡 올라감
   25~33%  모자 · 눈 · 코 · 목도리 · 단추 · 팔이 차례로 생김
   33~71%  5초 동안 살아 있는 듯: 눈 깜빡임 · 고개 갸웃 · 손 흔들기 · 폴짝
   71~83%  손 흔들며 반짝이는 눈가루로 흩어짐, 83~100% 잠깐 쉼
   hf294 (마스터 「담기를 놓친 손님이 오래 기다려」 → C안): 한 바퀴 15.5 → 9.3초(40%). 구간별로 덜어 냈다 —
   굴러오기 5 → 4초 · 머리·장식 2.2 → 1.7초 · 살아 있는 듯 4.2 → 2.2초 · 흩어짐 2 → 1.1초 · 빈 화면 2.2 → 0.3초.
   아래 키프레임의 %는 이 시간표로 옮겨 적은 값이다(순서 · 동작은 그대로). landing-stage.js SNOWMAN_MS와 같게 */
/* hf275 (마스터 A안 「너무 작아」): 장면 상자 404 × 52(도화지 x 18~422), 눈 바닥선 y 50(도화지 약 736).
   눈사람은 .sm-scale로 2배 — 키 약 44로 메뉴 테두리 아랫선(707) 앞에 서고 모자 꼭대기가 아래 두 카드 사이 틈(약 692)까지.
   눈덩이는 상자 양 끝 바깥에서 굴러 들어온다(상자 overflow hidden → 옆 스크롤 없음). 아래 끝 738 < 도화지 739 */
.page-shell > .xmas-ground {
  position: absolute !important;
  display: block !important;
  width: 404px;
  height: 62px; /* hf278: 52 → 62 (눈사람 2.4배, 위로 10) */
  overflow: visible; /* hf291: 2.64배 모자가 상자 위로 넘쳐도 보이게 — 좌우 · 아래만 자른다(굴러오는 눈덩이는 메뉴판 폭 밖에서 안 보이게) */
  clip-path: inset(-30px 0 0 0);
  pointer-events: none;
  z-index: 1;
}

/* hf278 (마스터): 눈사람 둘레에만 내리는 눈 — 메뉴 카드 아랫선 아래(상자 y 16)부터 눈 둔덕(약 58)까지, 눈사람 뒤 */
.sm-snow {
  left: 0;
  top: 16px;
  width: 404px;
  height: 44px;
  overflow: hidden;
}

.sm-snow .xmas-flake {
  animation-name: sm-snowfall;
}

@keyframes sm-snowfall {
  0% { opacity: 0; transform: translate3d(0, -6px, 0); }
  15% { opacity: var(--flake-opacity, 0.6); }
  50% { transform: translate3d(var(--drift, 0px), 18px, 0); }
  88% { opacity: var(--flake-opacity, 0.6); }
  100% { opacity: 0; transform: translate3d(0, 40px, 0); }
}

body:not(.is-landing) .page-shell > .xmas-ground {
  display: none !important;
}

.xmas-ground i {
  position: absolute;
  display: block;
  font-style: normal;
}

/* hf275 (마스터 「선명하게」): 눈 바닥선은 빌드 번호와 상관없이 오른쪽 끝까지 또렷하게 (0.42 → 0.7, 굵기 2) */
.sm-drift { /* hf277: 둔덕(.sm-bank)으로 바뀌어 쓰지 않음 */
  display: none !important;
  left: 0;
  right: 0;
  top: 50px;
  height: 2px;
  border-radius: 1px;
  background: rgba(244, 234, 213, 0.7);
}


/* hf277 (마스터): 울퉁불퉁한 눈 둔덕 — 옅게 채운 눈 더미 + 또렷한 윗선. 눈사람 무대 앞에 놓인다 */
.sm-bank {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
}

.sm-bank-fill {
  fill: rgba(244, 234, 213, 0.18);
}

.sm-bank-ridge {
  fill: none;
  stroke: rgba(244, 234, 213, 0.75);
  stroke-width: 1.6;
  stroke-linejoin: round;
}

/* 눈사람 무대: 아래 1배 좌표(바닥 y 50)를 바닥선 가운데(202, 50)를 기준으로 2배 */
.sm-scale { /* hf278 (마스터 「20% 키워 줘」): 2 → 2.4배, 1배 좌표 +10 (바닥 y 60) */
  left: 0;
  top: 0;
  width: 404px;
  height: 62px;
  transform: scale(2.64); /* hf291 (마스터 「눈사람도 10% 키워서」): 2.4 → 2.64, 바닥 가운데 기준이라 위로 커진다 */
  transform-origin: 202px 60px;
}

.sm-crowd {
  inset: 0;
  transform-origin: 202px 53px;
  animation: sm-crowd 9.3s infinite;
}

@keyframes sm-crowd {
  0%, 79.03% { opacity: 1; transform: translateY(0) scale(1); }
  80.51% { transform: translateY(-2.5px); }
  81.99% { transform: translateY(0); }
  83.46% { transform: translateY(-2.5px); }
  84.95%, 88.1% { opacity: 1; transform: translateY(0) scale(1); }
  96.77%, 100% { opacity: 0; transform: translateY(0) scale(1.15); }
}

.sm-ball {
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fffdf6 0, #efe5d0 55%, #b9ac93 100%);
  box-shadow: 0 0 3px rgba(255, 248, 230, 0.35);
}

/* 굴러가는 게 보이도록 옅은 얼룩 하나 */
.sm-ball::after {
  content: "";
  position: absolute;
  left: 22%;
  top: 58%;
  width: 20%;
  height: 20%;
  border-radius: 50%;
  background: rgba(150, 135, 110, 0.35);
}

/* 몸: 상자 왼쪽 바깥(1배 좌표 x 87 → 2배 화면 x −28)에서 가운데(196.5)까지, 바닥에 붙은 채 0.35배 → 1배로 커지며 굴러온다 */
.sm-body-pos {
  left: 0;
  top: 49px;
  width: 11px;
  height: 11px;
  transform-origin: 50% 100%;
  animation: sm-body-move 9.3s infinite;
}

@keyframes sm-body-move {
  0% { transform: translateX(106.2px) scale(0.35); animation-timing-function: cubic-bezier(0.3, 0.6, 0.4, 1); } /* hf278: 2.4배에서도 화면 x −28에서 들어오게 */
  43.01%, 100% { transform: translateX(196.5px) scale(1); }
}

.sm-ball.is-big {
  animation: sm-roll-big 9.3s infinite;
}

@keyframes sm-roll-big {
  0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.3, 0.6, 0.4, 1); }
  43.01%, 100% { transform: rotate(1440deg); }
}

/* 머리: 상자 오른쪽 바깥(1배 x 307 → 2배 화면 x 412)에서 몸 오른쪽 옆(208)까지 굴러와, 몸 위(198.25, -10)로 톡 */
.sm-head-pos {
  left: 0;
  top: 52.5px;
  width: 7.5px;
  height: 7.5px;
  transform-origin: 50% 100%;
  animation: sm-head-move 9.3s infinite;
}

@keyframes sm-head-move {
  0% { transform: translate(289.5px, 0) scale(0.35); animation-timing-function: cubic-bezier(0.3, 0.6, 0.4, 1); } /* hf278: 화면 x 412에서 들어오게 */
  38.08%, 43.01% { transform: translate(208px, 0) scale(1); animation-timing-function: ease-out; }
  46.4% { transform: translate(203px, -16px) scale(1); animation-timing-function: ease-in; }
  49.77%, 100% { transform: translate(198.25px, -10px) scale(1); }
}

.sm-ball.is-small {
  animation: sm-roll-small 9.3s infinite;
}

@keyframes sm-roll-small {
  0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.3, 0.6, 0.4, 1); }
  38.08%, 100% { transform: rotate(-1800deg); }
}

.sm-head-tilt {
  inset: 0;
  transform-origin: 50% 100%;
  animation: sm-tilt 9.3s infinite ease-in-out;
}

@keyframes sm-tilt {
  0%, 61.29% { transform: rotate(0deg); }
  65.72% { transform: rotate(-12deg); }
  71.64% { transform: rotate(9deg); }
  76.82% { transform: rotate(-6deg); }
  81.25%, 100% { transform: rotate(0deg); }
}

.sm-hat {
  left: -0.75px;
  top: -4.6px;
  width: 9px;
  height: 5px;
  opacity: 0;
  animation: sm-hat 9.3s infinite;
}

.sm-hat::before,
.sm-hat::after {
  content: "";
  position: absolute;
  background: #2a2016;
}

.sm-hat::before {
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.4px;
  border-radius: 1px;
}

.sm-hat::after {
  left: 1.75px;
  width: 5.5px;
  bottom: 1px;
  height: 4px;
  border-radius: 1px 1px 0 0;
  box-shadow: inset 0 -1px 0 #d9b46a;
}

@keyframes sm-hat {
  0%, 50.21% { opacity: 0; transform: translateY(-5px); }
  52.05%, 100% { opacity: 1; transform: translateY(0); }
}

.sm-eye {
  left: 1.9px;
  top: 2.4px;
  width: 1.2px;
  height: 1.2px;
  border-radius: 50%;
  background: #2b2219;
  opacity: 0;
  animation: sm-eye 9.3s infinite;
}

.sm-eye.is-right {
  left: 4.4px;
}

@keyframes sm-eye {
  0%, 52.05% { opacity: 0; transform: scaleY(1); }
  53.68%, 67.94% { opacity: 1; transform: scaleY(1); }
  68.53% { transform: scaleY(0.1); }
  69.12%, 77.55% { transform: scaleY(1); }
  78.15% { transform: scaleY(0.1); }
  78.74%, 100% { opacity: 1; transform: scaleY(1); }
}

.sm-nose {
  left: 3.6px;
  top: 3.4px;
  width: 2.8px;
  height: 1.1px;
  border-radius: 0 60% 60% 0;
  background: #e38b3e;
  opacity: 0;
  animation: sm-pop-a 9.3s infinite;
}

@keyframes sm-pop-a {
  0%, 52.59% { opacity: 0; }
  54.23%, 100% { opacity: 1; }
}

.sm-scarf {
  left: 0.5px;
  top: -0.6px;
  width: 10px;
  height: 2px;
  border-radius: 1px;
  background: #c8473f;
  opacity: 0;
  animation: sm-pop-b 9.3s infinite;
}

.sm-scarf::after {
  content: "";
  position: absolute;
  right: 1px;
  top: 1.4px;
  width: 1.6px;
  height: 3.6px;
  border-radius: 0 0 1px 1px;
  background: #b23d36;
}

.sm-button {
  left: 4.9px;
  top: 3.8px;
  width: 1.2px;
  height: 1.2px;
  border-radius: 50%;
  background: #2b2219;
  opacity: 0;
  animation: sm-pop-b 9.3s infinite;
}

.sm-button.is-low {
  top: 6.6px;
}

@keyframes sm-pop-b {
  0%, 54.23% { opacity: 0; }
  55.86%, 100% { opacity: 1; }
}

/* 나뭇가지 팔: 왼팔은 위로 비스듬히 그대로, 오른팔은 살아 있을 때 · 흩어질 때 손을 흔든다 */
.sm-arm {
  top: 3.5px;
  width: 7px;
  height: 1px;
  border-radius: 1px;
  background: #8b6b46;
  opacity: 0;
}

.sm-arm.is-left {
  left: -6.5px;
  transform-origin: 100% 50%;
  animation: sm-arm-left 9.3s infinite;
}

.sm-arm.is-right {
  left: 10.5px;
  transform-origin: 0 50%;
  animation: sm-arm-right 9.3s infinite ease-in-out;
}

@keyframes sm-arm-left {
  0%, 54.77% { opacity: 0; transform: rotate(20deg) scaleX(0); }
  57.49%, 100% { opacity: 1; transform: rotate(20deg) scaleX(1); }
}

@keyframes sm-arm-right {
  0%, 54.77% { opacity: 0; transform: rotate(-20deg) scaleX(0); }
  57.49%, 64.25% { opacity: 1; transform: rotate(-20deg) scaleX(1); }
  67.2% { transform: rotate(-55deg) scaleX(1); }
  70.16% { transform: rotate(-20deg) scaleX(1); }
  73.12% { transform: rotate(-55deg) scaleX(1); }
  76.08%, 85.73% { transform: rotate(-20deg) scaleX(1); }
  87.31% { transform: rotate(-60deg) scaleX(1); }
  88.88% { transform: rotate(-25deg) scaleX(1); }
  90.46% { transform: rotate(-60deg) scaleX(1); }
  92.04%, 100% { opacity: 1; transform: rotate(-20deg) scaleX(1); }
}

/* 흩어질 때 눈사람 가운데에서 반짝이는 눈가루 여섯 알 */
.sm-sparkles {
  left: 202px;
  top: 52px;
  width: 0;
  height: 0;
}

.sm-sparkles i {
  width: 2px;
  height: 2px;
  margin: -1px 0 0 -1px;
  border-radius: 50%;
  background: #fff6dc;
  box-shadow: 0 0 3px rgba(255, 240, 200, 0.9);
  opacity: 0;
  animation: sm-spark 9.3s infinite ease-out;
}

.sm-sparkles i:nth-child(1) { --dx: -14px; --dy: -10px; }
.sm-sparkles i:nth-child(2) { --dx: 14px; --dy: -10px; }
.sm-sparkles i:nth-child(3) { --dx: -19px; --dy: 1px; }
.sm-sparkles i:nth-child(4) { --dx: 19px; --dy: 1px; }
.sm-sparkles i:nth-child(5) { --dx: -8px; --dy: -16px; }
.sm-sparkles i:nth-child(6) { --dx: 8px; --dy: -16px; }

@keyframes sm-spark {
  0%, 88.1% { opacity: 0; transform: translate(0, 0) scale(0.5); }
  90.46% { opacity: 1; }
  96.96%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1); }
}


html.xmas-paused .xmas-bulb,
html.xmas-paused .xmas-star,
html.xmas-paused .xmas-flake,
html.xmas-paused .xmas-sleigh-x,
html.xmas-paused .xmas-sleigh,
html.xmas-paused .xmas-dust,
html.xmas-paused .xmas-ground i {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .hero h1.landing-title .xmas-snow,
  .hero h1.landing-title .xmas-sky,
  .page-shell > .xmas-ground {
    display: none !important;
  }

  .xmas-bulb {
    animation: none !important;
    opacity: 0.95;
  }

  .hero h1.landing-title .xmas-star {
    animation: none !important;
    opacity: 0.85;
  }
}