/* 산타 선물 상자(2026-11-09) — 겨울 배너(htk-winter-2026.css) 위에 얹는 조각
   산타 등장 → 상자 낙하 → 끈 끌어 풀기 → 2,000원 쿠폰. 움직임은 htk-santa-2026.js
   2026-11-09 사실판: 상자·리본·끈을 실제 사진 질감으로(상자 = 리넨 종이 상자 사진 · 리본 = 새틴 매듭 사진 · 끈 = 새틴 끈 사진을 늘어진 모양대로 입힘) */
.htk-santa {
  --box: clamp(108px, 11.8vw, 230px);
  --gx: 53%;
  --gb: 5%;
  --rw: calc(var(--box) * 1.3);
  --cw: max(216px, calc(var(--box) * 1.86));
  --u: calc(var(--cw) / 316);
  --ink: #15171c;
  --paper: #fbf6ea;
  --rib: #b3141d;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* 배너 전체가 링크이던 것을 풀고 「컬렉션 보기」만 링크로 */
.htk-santa .htk-winter__copy { pointer-events: none; }
.htk-santa .htk-winter__btn { pointer-events: auto; text-decoration: none; }
.htk-santa .htk-winter__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.htk-santa .htk-winter__link:hover .htk-winter__bg { transform: none; }
.htk-santa .htk-winter__link:hover .htk-winter__btn { gap: 10px; }
.htk-santa .htk-winter__link .htk-winter__btn:hover { gap: 16px; }

.htk-santa__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: rgba(8, 10, 18, .32);
  opacity: 0;
  transition: opacity .7s var(--ease-out);
  pointer-events: none;
}
.htk-santa.is-open .htk-santa__scrim { opacity: 1; }

/* 바닥 그림자 */
.htk-santa__floor-shadow {
  position: absolute; z-index: 2;
  left: var(--gx);
  bottom: calc(var(--gb) - var(--box) * .05);
  width: calc(var(--box) * 1.3);
  height: calc(var(--box) * .15);
  margin-left: calc(var(--box) * -.65);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(6, 6, 10, .58), rgba(6, 6, 10, .26) 60%, rgba(6, 6, 10, 0));
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

/* 상자 (사진 비율 640×544 · 뚜껑 200 · 몸통 344 · 뚜껑 윗면 = 위 7.73%) */
.htk-santa__gift {
  position: absolute; z-index: 3;
  left: var(--gx);
  bottom: var(--gb);
  width: var(--box);
  aspect-ratio: 640 / 544;
  margin-left: calc(var(--box) / -2);
  transform-origin: 50% 100%;
  will-change: transform;
  --lift: 0;
}
.htk-santa__body, .htk-santa__lid { position: absolute; left: 0; width: 100%; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.htk-santa__body { z-index: 2; bottom: 0; height: 63.24%; }
.htk-santa__lidset {
  position: absolute; z-index: 3; left: 0; top: 0; width: 100%; height: 36.76%;
  transform: translateY(calc(var(--lift) * -7%));
  pointer-events: none;
}
.htk-santa__lid { top: 0; height: 100%; }

/* 뚜껑이 열리면 보이는 상자 속(안쪽 뒷벽) */
.htk-santa__mouth {
  position: absolute; z-index: 0;
  left: 3%; right: 3%;
  bottom: calc(63.24% - 2px);
  height: 6.6%;
  background:
    linear-gradient(90deg, rgba(48, 36, 22, .34), rgba(48, 36, 22, 0) 13%, rgba(48, 36, 22, 0) 87%, rgba(48, 36, 22, .34)),
    linear-gradient(180deg, #f1eadc 0, #ece4d4 10%, #d2c7b3 17%, #a89c87 62%, #7b705f 100%);
  border-radius: 1px 1px 0 0;
  opacity: clamp(0, calc(var(--lift) * 30), 1); /* 끌어서 뚜껑이 살짝 들리면 틈으로 속이 보임 */
  pointer-events: none;
}
.htk-santa.is-open .htk-santa__mouth { opacity: 1; transition: opacity .16s .24s linear; }

/* 둘러 묶은 끈(새틴 사진 질감) */
.htk-santa__band {
  position: absolute; pointer-events: none;
  left: 50%; width: 11%; margin-left: -5.5%;
  background-image: var(--band-light, none), var(--rib-tex);
  background-size: 100% 100%, 100% auto;
  background-repeat: no-repeat, repeat-y;
  background-color: var(--rib);
  box-shadow: 0 0 0 .5px rgba(70, 6, 12, .32), .7px 1px 1.8px rgba(52, 32, 12, .3);
  clip-path: inset(-4px);
  transition: clip-path .3s cubic-bezier(.55, 0, .85, .35);
}
.htk-santa__band--body {
  z-index: 2; top: 36.76%; bottom: .4%;
  background-position: 0 0, 50% 0;
  /* 뚜껑 턱 그늘 → 가운데 → 아래로 갈수록 살짝 어둡게(상자 사진과 같은 빛) */
  --band-light: linear-gradient(180deg, rgba(24, 3, 6, .62) 0, rgba(24, 3, 6, .22) 4.5%, rgba(24, 3, 6, 0) 11%, rgba(24, 3, 6, 0) 58%, rgba(24, 3, 6, .2) 100%);
}
.htk-santa__band--front {
  top: 21.03%; bottom: 0;
  background-position: 0 0, 50% 37%;
  /* 뚜껑 모서리에서 꺾이는 곳이 살짝 빛남 · 아래 턱 쪽은 살짝 어둡게 */
  --band-light: linear-gradient(180deg, rgba(255, 214, 214, .26) 0, rgba(255, 214, 214, 0) 9%, rgba(24, 3, 6, 0) 74%, rgba(24, 3, 6, .22) 100%);
}
.htk-santa__band--top {
  top: 0; height: 21.03%;
  background-position: 0 0, 50% 61%;
  box-shadow: 0 0 0 .5px rgba(70, 6, 12, .24);
  /* 윗면 = 빛을 바로 받아 조금 밝게 · 안쪽(뒤)은 조금 어둡게 */
  --band-light: linear-gradient(180deg, rgba(24, 3, 6, .3) 0, rgba(255, 214, 214, .08) 55%, rgba(255, 214, 214, .16) 100%);
}
.htk-santa.is-open .htk-santa__band { clip-path: inset(calc(100% + 4px) -4px -4px -4px); }

/* 늘어진 끈(그림판에 새틴 사진을 모양대로 입혀 그림)과 매듭 */
.htk-santa__tails { position: absolute; left: 0; top: 0; z-index: 4; max-width: none; max-height: none; pointer-events: none; }
.htk-santa__bow {
  position: absolute; left: 0; top: 0; z-index: 4;
  max-width: none;
  user-select: none; -webkit-user-drag: none; pointer-events: none;
  filter: drop-shadow(0 1px 1.4px rgba(40, 6, 10, .4));
  will-change: transform, opacity;
}
.htk-santa__ribbon { position: absolute; left: 0; top: 0; z-index: 4; overflow: visible; pointer-events: none; }
.htk-santa__tail-hit { fill: none; stroke: transparent; stroke-width: 44px; stroke-linecap: round; pointer-events: stroke; cursor: grab; touch-action: none; }
.htk-santa.is-grabbing .htk-santa__tail-hit { cursor: grabbing; }
.htk-santa:not(.is-ready) .htk-santa__tail-hit { pointer-events: none; }

/* 잡는 곳: 끈 끝의 작은 고리 */
.htk-santa__handle {
  position: absolute; left: 0; top: 0; z-index: 6;
  width: 48px; height: 48px; margin: -24px 0 0 -24px;
  padding: 0; border: 0; border-radius: 50%; background: none;
  cursor: grab; touch-action: none;
  display: grid; place-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease-out);
}
.htk-santa.is-ready .htk-santa__handle { opacity: 1; visibility: visible; }
.htk-santa.is-grabbing .htk-santa__handle { cursor: grabbing; opacity: 0; }
.htk-santa__handle span {
  position: relative; width: 16px; height: 16px; border-radius: 50%;
  background: rgba(255, 255, 255, .22); border: 2px solid #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .5);
  transition: transform .25s var(--ease-out), background-color .25s var(--ease-out);
}
.htk-santa__handle span::after {
  content: ''; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid #fff; opacity: 0;
  animation: htk-santa-ping 2.2s var(--ease-out) infinite;
}
@media (hover: hover) { .htk-santa__handle:hover span { transform: scale(1.22); background: rgba(255, 255, 255, .5); } }
.htk-santa__handle:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
@keyframes htk-santa-ping {
  0% { transform: scale(1); opacity: .85; }
  70%, 100% { transform: scale(2.3); opacity: 0; }
}

/* 안내 글 */
.htk-santa__hint {
  position: absolute; z-index: 7;
  left: 0; top: 0;
  margin: 0;
  padding: .5em .85em;
  background: #12141b;
  color: #fff;
  font-family: 'Pretendard', 'IBM Plex Sans KR', var(--sans, sans-serif);
  font-size: clamp(12.5px, .92vw, 15px); font-weight: 600; letter-spacing: -.01em;
  white-space: nowrap;
  transform: translateY(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.htk-santa__hint::after {
  content: ''; position: absolute;
  left: var(--px, 50%); bottom: -6px;
  width: 12px; height: 7px; margin-left: -6px;
  background: #12141b;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.htk-santa.is-ready .htk-santa__hint { opacity: 1; transform: none; }
.htk-santa.is-grabbing .htk-santa__hint { opacity: 0; }

/* 쿠폰 */
.htk-santa__glow {
  position: absolute; z-index: 0;
  left: 50%; bottom: 40%;
  width: calc(var(--box) * 2.7); height: calc(var(--box) * 2.2);
  margin-left: calc(var(--box) * -1.35);
  background: radial-gradient(closest-side, rgba(255, 226, 170, .62), rgba(255, 226, 170, 0));
  opacity: 0; pointer-events: none;
}
.htk-santa.is-open .htk-santa__glow { animation: htk-santa-glow .9s .38s var(--ease-out) forwards; }
@keyframes htk-santa-glow { to { opacity: 1; } }

.htk-santa__coupon-wrap {
  position: absolute; z-index: 1;
  left: 50%;
  bottom: calc(63.24% - 5px);
  width: var(--cw);
  margin-left: calc(var(--cw) / -2);
  transform-origin: 50% 100%;
  transform: translateY(calc(var(--box) * .46)) scale(.42); /* 몸통(상자 폭의 .54) 안에 숨음 — 밑으로 안 삐져나옴 */
  visibility: hidden;
  filter: drop-shadow(0 calc(var(--u) * 10) calc(var(--u) * 22) rgba(6, 8, 14, .34));
}
.htk-santa.is-open .htk-santa__coupon-wrap {
  visibility: visible;
  animation: htk-santa-rise 1.05s .36s both;
}
@keyframes htk-santa-rise {
  0% { transform: translateY(calc(var(--box) * .46)) scale(.42); animation-timing-function: cubic-bezier(.3, .7, .3, 1); }
  48% { transform: translateY(0) scale(.42); animation-timing-function: cubic-bezier(.3, 1.45, .55, 1); }
  100% { transform: translateY(0) scale(1); }
}
.htk-santa__coupon {
  --nh: max(7px, calc(var(--u) * 9));
  position: relative;
  aspect-ratio: 316 / 186;
  display: grid; grid-template-rows: 61fr 39fr;
  background: var(--paper);
  color: var(--ink);
  border-radius: 3px;
  font-family: 'Pretendard', 'IBM Plex Sans KR', var(--sans, sans-serif);
  word-break: keep-all;
  -webkit-mask-image: radial-gradient(circle var(--nh) at 0 61%, transparent 97%, #000), radial-gradient(circle var(--nh) at 100% 61%, transparent 97%, #000);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(circle var(--nh) at 0 61%, transparent 97%, #000), radial-gradient(circle var(--nh) at 100% 61%, transparent 97%, #000);
  mask-composite: intersect;
}
.htk-santa__coupon::before {
  content: ''; position: absolute; top: 61%;
  left: calc(var(--nh) + 6px); right: calc(var(--nh) + 6px);
  border-top: 1.5px dashed rgba(21, 23, 28, .28);
}
.htk-santa__coupon-top {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: max(2px, calc(var(--u) * 3));
  padding: max(6px, calc(var(--u) * 8)) 10px 0;
}
.htk-santa__eyebrow {
  margin: 0; color: rgba(21, 23, 28, .72);
  font-size: max(11px, calc(var(--u) * 13)); font-weight: 500; letter-spacing: -.01em;
  white-space: nowrap;
}
.htk-santa__price {
  margin: 0; display: flex; align-items: baseline; gap: max(4px, calc(var(--u) * 7));
  white-space: nowrap;
}
.htk-santa__price strong {
  color: var(--rib);
  font-size: calc(var(--u) * 48); font-weight: 800; letter-spacing: -.045em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.htk-santa__price span { font-size: max(11.5px, calc(var(--u) * 16)); font-weight: 600; letter-spacing: -.02em; }
.htk-santa__coupon-bottom { display: flex; align-items: center; padding: 0 max(12px, calc(var(--u) * 18)); }
.htk-santa__claim {
  width: 100%; height: max(36px, calc(var(--u) * 44));
  border: 0; border-radius: 0;
  background: var(--ink); color: #fff;
  font: inherit; font-size: max(12.5px, calc(var(--u) * 15)); font-weight: 600; letter-spacing: -.01em;
  cursor: pointer;
  transition: background-color .2s var(--ease-out), transform .2s var(--ease-out);
}
@media (hover: hover) { .htk-santa__claim:hover { background: #000; } }
.htk-santa__claim:active { transform: translateY(1px); }
.htk-santa__claim:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.htk-santa.is-claimed .htk-santa__claim { background: #e7e1d2; color: #15171c; cursor: default; }

/* 끈이 풀린 뒤 뚜껑이 튀어 올라 옆에 떨어짐 (% = 뚜껑 크기 기준 · 마지막 = 뚜껑 아랫변이 땅에 닿는 자리) */
.htk-santa.is-open .htk-santa__lidset {
  z-index: 5;
  animation: htk-santa-lid .98s .2s both;
}
@keyframes htk-santa-lid {
  0% { transform: translate(0, calc(var(--lift, 0) * -7%)) rotate(0); animation-timing-function: cubic-bezier(.2, .7, .35, 1); }
  34% { transform: translate(34%, -175%) rotate(14deg); animation-timing-function: cubic-bezier(.55, 0, .85, .4); }
  78% { transform: translate(122%, 172%) rotate(2deg); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  89% { transform: translate(127%, 158%) rotate(-1deg); animation-timing-function: cubic-bezier(.55, 0, .85, .4); }
  100% { transform: translate(129%, 172%) rotate(0); }
}

/* 산타 */
.htk-santa__rider {
  position: absolute; left: 0; top: 0; z-index: 5;
  width: var(--rw); aspect-ratio: 1085 / 946;
  visibility: hidden; pointer-events: none;
  will-change: transform;
}
.htk-santa__rider img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }

/* 흩날리는 조각(눈가루 · 금박) */
.htk-santa__bit { position: absolute; z-index: 6; left: 0; top: 0; pointer-events: none; backface-visibility: visible; }

.htk-santa__status { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* 아주 넓은 화면: 사진이 위아래로 많이 잘리므로 땅이 보이게 */
@media (min-width: 1959px) {
  .htk-santa .htk-winter__bg { object-position: 50% 66%; }
}
/* 태블릿: 왼쪽 글과 겹치지 않게 오른쪽으로 */
@media (max-width: 1100px) {
  .htk-santa { --gx: 60%; --gb: 6.5%; }
}
/* 폰: 위 사진 + 아래 어두운 글자 자리 */
@media (max-width: 640px) {
  .htk-santa {
    --box: 124px; --gx: 46%;
    --stage: 610px; --photo: 366px;
    --gb: calc(var(--stage) - var(--photo) + 18px);
  }
  .htk-santa .htk-winter__link { height: var(--stage); background: #0b0d14; }
  .htk-santa .htk-winter__link::before {
    background: linear-gradient(180deg, rgba(11, 13, 20, 0) calc(var(--photo) - 70px), #0b0d14 var(--photo));
  }
  .htk-santa .htk-winter__bg { height: var(--photo); bottom: auto; object-position: 51% 50%; }
  .htk-santa__scrim { bottom: auto; height: var(--photo); }
  .htk-santa.is-open .htk-santa__lidset { animation-name: htk-santa-lid-narrow; }
}
@keyframes htk-santa-lid-narrow {
  0% { transform: translate(0, calc(var(--lift, 0) * -7%)) rotate(0); animation-timing-function: cubic-bezier(.2, .7, .35, 1); }
  34% { transform: translate(28%, -175%) rotate(14deg); animation-timing-function: cubic-bezier(.55, 0, .85, .4); }
  78% { transform: translate(96%, 172%) rotate(2deg); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  89% { transform: translate(100%, 158%) rotate(-1deg); animation-timing-function: cubic-bezier(.55, 0, .85, .4); }
  100% { transform: translate(102%, 172%) rotate(0); }
}

/* 움직임 줄이기 설정: 산타·튀는 동작 없이 바로 상자, 쿠폰은 살짝 나타남 */
@media (prefers-reduced-motion: reduce) {
  .htk-santa__handle span::after { animation: none; }
  .htk-santa__band { transition: opacity .2s linear; }
  .htk-santa.is-open .htk-santa__band { clip-path: inset(-4px); opacity: 0; }
  .htk-santa__tails { transition: opacity .2s linear; }
  .htk-santa.is-open .htk-santa__tails { opacity: 0; }
  .htk-santa.is-open .htk-santa__lidset { animation: htk-santa-fade-out .25s both; }
  .htk-santa.is-open .htk-santa__mouth { transition: none; }
  .htk-santa.is-open .htk-santa__glow { animation: none; opacity: .8; }
  .htk-santa__coupon-wrap { transform: none; opacity: 0; }
  .htk-santa.is-open .htk-santa__coupon-wrap { animation: htk-santa-fade-in .3s both; }
}
@keyframes htk-santa-fade-out { to { opacity: 0; } }
@keyframes htk-santa-fade-in { to { opacity: 1; } }