.kr-newyear {
  position: relative;
  min-height: max(760px, 100svh);
  overflow: hidden;
  color: var(--kr-blue);
  background: #fff;
  isolation: isolate;
}

.kr-newyear::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.04) 0 42%, rgba(255,255,255,.18) 72%, rgba(255,255,255,.42));
  pointer-events: none;
  content: "";
}

.kr-newyear__video {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: left center;
}

.kr-newyear__snow {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  color: var(--kr-blue);
  pointer-events: none;
}

.kr-newyear__snow i {
  position: absolute;
  font-style: normal;
  line-height: 1;
  opacity: .1;
  animation: kr-newyear-snow 7s ease-in-out infinite;
}

.kr-newyear__snow i::before { content: "❄"; }
.kr-newyear__snow i:nth-child(1) { top: 10%; left: 6%; font-size: 26px; animation-delay: -1s; }
.kr-newyear__snow i:nth-child(2) { top: 72%; left: 4%; font-size: 42px; animation-delay: -4.2s; }
.kr-newyear__snow i:nth-child(3) { top: 19%; left: 31%; font-size: 19px; animation-delay: -2.6s; }
.kr-newyear__snow i:nth-child(4) { top: 82%; left: 32%; font-size: 28px; animation-delay: -5.4s; }
.kr-newyear__snow i:nth-child(5) { top: 8%; left: 50%; font-size: 34px; animation-delay: -3.2s; }
.kr-newyear__snow i:nth-child(6) { top: 66%; left: 54%; font-size: 21px; animation-delay: -6.1s; }
.kr-newyear__snow i:nth-child(7) { top: 16%; left: 75%; font-size: 23px; animation-delay: -2s; }
.kr-newyear__snow i:nth-child(8) { top: 80%; left: 78%; font-size: 37px; animation-delay: -4.8s; }
.kr-newyear__snow i:nth-child(9) { top: 34%; left: 91%; font-size: 20px; animation-delay: -1.7s; }
.kr-newyear__snow i:nth-child(10) { top: 58%; left: 93%; font-size: 31px; animation-delay: -5.8s; }

.kr-newyear__layout {
  position: relative;
  z-index: 2;
  min-height: max(760px, 100svh);
}

.kr-newyear__stage {
  position: relative;
  width: min(72%, 1040px);
  min-height: max(760px, 100svh);
  margin-left: auto;
  background: transparent;
  box-shadow: none;
  filter: none;
  outline: none;
}

.kr-newyear__stage:focus-visible .kr-newyear__envelope-back {
  box-shadow: 18px 18px 0 var(--kr-red), 0 0 0 3px rgba(6,76,172,.22);
}

.kr-newyear__fan {
  position: absolute;
  z-index: 7;
  top: clamp(72px, 9vh, 110px);
  right: -1%;
  left: -1%;
  height: 555px;
  background: transparent;
  box-shadow: none;
  filter: none;
  pointer-events: none;
}

.kr-newyear__card {
  --ny-x: 0px;
  --ny-y: 170px;
  --ny-r: 0deg;
  --ny-s: .5;
  position: absolute;
  top: 274px;
  left: 50%;
  width: clamp(285px, 22vw, 330px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 7px solid #fff;
  color: #fff;
  background: #fff;
  box-shadow: none;
  filter: none;
  opacity: 0;
  backface-visibility: hidden;
  transform: translate(-50%, 155px) scale(.48);
  transform-origin: 50% 125%;
  transition: transform .8s cubic-bezier(.18,.86,.2,1), opacity .25s ease, scale .25s ease;
}

.kr-newyear__card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.kr-newyear__card--hero { --ny-x: 0px; --ny-y: -112px; --ny-r: 0deg; --ny-s: 1.16; z-index: 8; }
.kr-newyear__card--1 { --ny-x: -390px; --ny-y: 112px; --ny-r: -18deg; --ny-s: .78; z-index: 1; }
.kr-newyear__card--2 { --ny-x: -268px; --ny-y: 34px; --ny-r: -12deg; --ny-s: .88; z-index: 2; }
.kr-newyear__card--3 { --ny-x: -138px; --ny-y: -16px; --ny-r: -6deg; --ny-s: .96; z-index: 5; }
.kr-newyear__card--4 { --ny-x: 188px; --ny-y: 28px; --ny-r: 10deg; --ny-s: .91; z-index: 4; }
.kr-newyear__card--5 { --ny-x: 348px; --ny-y: 105px; --ny-r: 18deg; --ny-s: .8; z-index: 2; }

.kr-newyear__stage.is-open .kr-newyear__fan { z-index: 11; pointer-events: auto; }
.kr-newyear__stage.is-open .kr-newyear__card { opacity: 1; transform: translate(calc(-50% + var(--ny-x)), var(--ny-y)) rotate(var(--ny-r)) scale(var(--ny-s)); }

.kr-newyear__stage.is-open .kr-newyear__card:hover,
.kr-newyear__stage.is-open .kr-newyear__card:focus-visible {
  z-index: 30;
  filter: none;
  box-shadow: none;
  scale: 1.14;
}

.kr-newyear__stage.is-open .kr-newyear__card:focus-visible {
  outline: 3px solid var(--kr-red);
  outline-offset: 2px;
}

.kr-newyear__stage.is-open .kr-newyear__card--hero:hover,
.kr-newyear__stage.is-open .kr-newyear__card--hero:focus-visible { scale: 1.08; }

.kr-newyear__envelope {
  position: absolute;
  z-index: 10;
  bottom: 6%;
  left: 50%;
  width: min(560px, 94%);
  height: 350px;
  color: var(--kr-blue);
  perspective: 1400px;
  transform: translateX(-50%);
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.18,.86,.2,1);
}

.kr-newyear__envelope-back {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 270px;
  border: 4px solid var(--kr-blue);
  background: #fff;
  box-shadow: 18px 18px 0 var(--kr-red);
}

.kr-newyear__flap {
  position: absolute;
  z-index: 4;
  top: 80px;
  right: 0;
  left: 0;
  width: 100%;
  height: 135px;
  display: block;
  overflow: visible;
  fill: #fff;
  stroke: rgba(6,76,172,.24);
  stroke-linejoin: round;
  stroke-width: 2;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  pointer-events: none;
  transition: transform .9s cubic-bezier(.18,.86,.2,1);
}

.kr-newyear__envelope-front {
  position: absolute;
  z-index: 6;
  top: 80px;
  right: 0;
  left: 0;
  width: 100%;
  height: 270px;
  display: block;
  overflow: visible;
  fill: none;
  stroke: rgba(6,76,172,.24);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  pointer-events: none;
}

.kr-newyear__postmark {
  position: absolute;
  z-index: 13;
  top: 220px;
  left: 50%;
  width: 88%;
  color: var(--kr-blue);
  text-align: center;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.kr-newyear__postmark strong {
  display: block;
  font-family: "KR Blagovest", Impact, sans-serif;
  font-size: clamp(38px, 3.2vw, 46px);
  font-weight: 400;
  line-height: .82;
  letter-spacing: .04em;
  transition: opacity .16s ease, transform .22s ease;
}

.kr-newyear__postmark strong span { display: block; }
.kr-newyear__postmark.is-changing strong { opacity: 0; transform: translateY(7px); }
.kr-newyear__postmark.is-category strong { font-size: clamp(34px, 3vw, 43px); line-height: .9; }

.kr-newyear__stage.is-open .kr-newyear__envelope { transform: translateX(-50%) translateY(22px); }
.kr-newyear__stage.is-open .kr-newyear__flap { z-index: 2; transform: rotateX(178deg); }

@keyframes kr-newyear-snow {
  0%, 100% { transform: translate3d(0,-5px,0) rotate(-6deg); opacity: .07; }
  50% { transform: translate3d(9px,8px,0) rotate(9deg); opacity: .16; }
}

@media (max-width: 1180px) {
  .kr-newyear__stage { width: 75%; }
  .kr-newyear__card { width: 285px; }
  .kr-newyear__card--1 { --ny-x: -325px; }
  .kr-newyear__card--2 { --ny-x: -220px; }
  .kr-newyear__card--3 { --ny-x: -112px; }
  .kr-newyear__card--4 { --ny-x: 158px; }
  .kr-newyear__card--5 { --ny-x: 290px; }
  .kr-newyear__envelope { width: min(520px, 94%); }
}

@media (max-width: 900px) {
  .kr-newyear { min-height: 960px; }
  .kr-newyear::before { background: linear-gradient(180deg, transparent 0 38%, rgba(255,255,255,.72) 58%, #fff 100%); }
  .kr-newyear__video { top: 18px; left: -5%; width: 150%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; object-position: left top; }
  .kr-newyear__layout { min-height: 960px; display: flex; align-items: flex-end; }
  .kr-newyear__stage { width: 100%; min-height: 650px; margin: 0; }
  .kr-newyear__fan { top: 2px; }
  .kr-newyear__card { top: 252px; width: 250px; }
  .kr-newyear__card--hero { --ny-y: -92px; --ny-s: 1.12; }
  .kr-newyear__card--1 { --ny-x: -270px; --ny-y: 88px; }
  .kr-newyear__card--2 { --ny-x: -180px; --ny-y: 24px; }
  .kr-newyear__card--3 { --ny-x: -88px; --ny-y: -14px; }
  .kr-newyear__card--4 { --ny-x: 135px; --ny-y: 22px; }
  .kr-newyear__card--5 { --ny-x: 245px; --ny-y: 84px; }
  .kr-newyear__envelope { bottom: 28px; }
}

@media (max-width: 640px) {
  .kr-newyear { min-height: 900px; }
  .kr-newyear__video { top: 28px; left: -8%; width: 170%; }
  .kr-newyear__layout { min-height: 900px; width: 100%; }
  .kr-newyear__stage { min-height: 605px; }
  .kr-newyear__fan { top: 0; height: 355px; }
  .kr-newyear__card { top: 216px; width: 190px; border-width: 4px; }
  .kr-newyear__card--hero { --ny-x: 0px; --ny-y: -72px; --ny-r: 0deg; --ny-s: 1.1; }
  .kr-newyear__card--1 { --ny-x: -135px; --ny-y: 56px; --ny-r: -17deg; --ny-s: .68; }
  .kr-newyear__card--2 { --ny-x: -91px; --ny-y: 5px; --ny-r: -11deg; --ny-s: .76; }
  .kr-newyear__card--3 { --ny-x: -45px; --ny-y: -29px; --ny-r: -5deg; --ny-s: .82; }
  .kr-newyear__card--4 { --ny-x: 74px; --ny-y: 4px; --ny-r: 10deg; --ny-s: .76; }
  .kr-newyear__card--5 { --ny-x: 135px; --ny-y: 55px; --ny-r: 17deg; --ny-s: .68; }
  .kr-newyear__envelope { bottom: 26px; width: min(350px, calc(100% - 22px)); height: 242px; }
  .kr-newyear__envelope-back { height: 190px; border-width: 3px; box-shadow: 9px 9px 0 var(--kr-red); }
  .kr-newyear__flap { top: 52px; height: 95px; }
  .kr-newyear__envelope-front { top: 52px; height: 190px; }
  .kr-newyear__postmark { top: 151px; width: 92%; }
  .kr-newyear__postmark strong { font-size: 29px; }
  .kr-newyear__postmark.is-category strong { font-size: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  .kr-newyear__snow i { animation: none; }
  .kr-newyear__card,
  .kr-newyear__envelope,
  .kr-newyear__flap,
  .kr-newyear__postmark strong { transition: none; }
}