.hc-deck {
  /* Pop edition tokens. Override these on a wrapper to match another app. */
  --hc-ink: #141c43;
  --hc-subtle: #625970;
  --hc-paper: #fff;
  --hc-line: #ead1e1;
  --hc-edge: #ae165f;
  --hc-accent: #d71178;
  --hc-focus: #a30060;
  --hc-card-radius: 22px;
  --hc-card-foil: linear-gradient(125deg, #e72b98, #fcf29d 22%, #3bdded 39%, #c4abff 54%, #fe61b5 72%, #32d4e4);
  --hc-foil-pattern: repeating-linear-gradient(120deg, #fe7bbe 0%, #ffc584 14%, #ffffac 23%, #60ecf4 34%, #b5a2ff 45%, #fe7bbe 58%);
  --hc-glare-streak: linear-gradient(115deg, transparent 25%, #ffffff10 36%, #ffffffc2 48%, #ffffff36 52%, transparent 64%);
  --hc-glare-spot: #fff9;
  --hc-foil-mask: radial-gradient(ellipse at center, #0002 15%, #0009 55%, #000 82%);
  --hc-card-shadow: 5px 7px 0 #21c9dc66, 0 20px 34px -19px #7c174499;
  --hc-button-shadow: 2px 2px #141c4329;
  --hc-rear-shadow: 0 3px 7px #0002;
  --hc-stage-padding: 30px 38px 36px;
  --hc-card-padding: 7px;
  --hc-paper-padding: 12px;
  --hc-paper-gap: 10px;
  --hc-foil-opacity: 1;

  min-width: 0;
  max-width: 620px;
  color: var(--hc-ink);
  font-family: "Noto Sans KR Variable", "Apple SD Gothic Neo", sans-serif;
}

.hc-deck, .hc-deck * { box-sizing: border-box; }
.hc-deck button { font: inherit; }
.hc-deck__label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 0 4px;
  color: var(--hc-subtle);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 1.8px;
}
.hc-deck__label span:last-child { letter-spacing: 1px; }
.hc-deck__stage { padding: var(--hc-stage-padding); }
.hc-deck__stack {
  position: relative;
  width: min(100%, 438px);
  aspect-ratio: 3 / 4;
  margin: auto;
  isolation: isolate;
  perspective: 1100px;
  touch-action: pan-y pinch-zoom;
}
.hc-deck__layer {
  position: absolute;
  inset: 0;
  transform-origin: 50% 85%;
}
.hc-deck__active {
  z-index: 3;
  animation: hc-arrive .4s cubic-bezier(.2, .75, .25, 1) both;
  touch-action: pan-y pinch-zoom;
}
.hc-deck__behind { pointer-events: none; filter: saturate(.8); }
.hc-deck__behind--1 { z-index: 2; transform: translate(12px, 3px) rotate(3.5deg) scale(.98); }
.hc-deck__behind--2 { z-index: 1; transform: translate(22px, 3px) rotate(6.5deg) scale(.95); }
.hc-deck__behind .hc-card { box-shadow: var(--hc-rear-shadow); }
.hc-deck__leaving {
  z-index: 4;
  pointer-events: none;
  animation: hc-depart .4s cubic-bezier(.4, 0, .8, .3) both;
}

.hc-card__anchor {
  width: 100%;
  height: 100%;
  perspective: 1100px;
  --hc-tilt-x: 0deg;
  --hc-tilt-y: 0deg;
  --hc-light-x: 50%;
  --hc-light-y: 50%;
  --hc-foil-active: 0;
}
.hc-card__float {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  animation: hc-idle-float 3.6s linear infinite;
  animation-play-state: paused;
}
.hc-card__anchor[data-idle-motion="running"] .hc-card__float { animation-play-state: running; }
.hc-card__anchor:hover .hc-card__float,
.hc-card__anchor:focus-within .hc-card__float { animation-play-state: paused; }

.hc-card {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: var(--hc-card-padding);
  border: 1px solid var(--hc-edge);
  border-radius: var(--hc-card-radius);
  background: var(--hc-card-foil);
  color: var(--hc-ink);
  text-align: left;
  box-shadow: var(--hc-card-shadow);
  transform: rotateX(var(--hc-tilt-x, 0deg)) rotateY(var(--hc-tilt-y, 0deg));
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .3s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y pinch-zoom;
}
.hc-card__anchor[data-tilting] .hc-card {
  transition: transform .1s linear, box-shadow .3s;
  will-change: transform;
}
button.hc-card { cursor: zoom-in; }
button.hc-card:focus-visible { outline: 3px solid var(--hc-focus); outline-offset: 7px; }
.hc-card__paper {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
  gap: var(--hc-paper-gap);
  padding: var(--hc-paper-padding);
  border: 1px solid color-mix(in srgb, var(--hc-edge) 25%, var(--hc-paper));
  border-radius: calc(var(--hc-card-radius) - var(--hc-card-padding));
  background: var(--hc-paper);
  overflow: hidden;
}
.hc-card__edition {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--hc-subtle);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  line-height: 1.5;
}
.hc-card__edition span:last-child { margin-left: auto; letter-spacing: 1px; }
.hc-card__sparkle { color: var(--hc-accent); font-size: 13px; }
.hc-card__window {
  display: block;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--hc-line);
  border-radius: calc(var(--hc-card-radius) / 3);
  background: var(--hc-paper);
}
.hc-card__window img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
}
.hc-card__caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 5px 3px 1px;
}
.hc-card__caption strong { display: block; font-size: 17px; font-weight: 850; letter-spacing: -.6px; }
.hc-card__caption small { display: block; margin-top: 5px; color: var(--hc-subtle); font-size: 10px; font-weight: 500; }
.hc-card__number { font-size: 29px; font-weight: 850; letter-spacing: -1px; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hc-card__number small { display: inline; font-size: 11px; letter-spacing: 0; }
.hc-card__foil, .hc-card__glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  transition: opacity .38s;
}
.hc-card__foil {
  background-image: var(--hc-foil-pattern);
  background-size: 220% 220%;
  background-position: var(--hc-light-x, 50%) var(--hc-light-y, 50%);
  mix-blend-mode: soft-light;
  opacity: calc(var(--hc-foil-active, 0) * var(--hc-foil-opacity));
  -webkit-mask-image: var(--hc-foil-mask);
  mask-image: var(--hc-foil-mask);
}
.hc-card__glare {
  background-image: var(--hc-glare-streak), radial-gradient(ellipse at var(--hc-light-x, 50%) var(--hc-light-y, 50%), var(--hc-glare-spot), transparent 65%);
  background-size: 240% 100%, 100% 100%;
  background-position: var(--hc-light-x, 50%) 50%, center;
  mix-blend-mode: screen;
  opacity: calc(var(--hc-foil-active, 0) * .46);
}
.hc-card__anchor:not([data-tilting]) .hc-card__foil {
  animation: hc-idle-reflection 3.6s ease-in-out infinite;
  animation-play-state: paused;
}
.hc-card__anchor:not([data-tilting]) .hc-card__glare {
  animation: hc-idle-gloss 3.6s ease-in-out infinite;
  animation-play-state: paused;
}
.hc-card__anchor[data-idle-motion="running"]:not([data-tilting]) .hc-card__foil,
.hc-card__anchor[data-idle-motion="running"]:not([data-tilting]) .hc-card__glare { animation-play-state: running; }
.hc-card__anchor:focus-within:not([data-tilting]) .hc-card__foil,
.hc-card__anchor:focus-within:not([data-tilting]) .hc-card__glare { animation-play-state: paused; }
.hc-card__anchor[data-motion-mode="interaction-only"] .hc-card__foil,
.hc-card__anchor[data-motion-mode="interaction-only"] .hc-card__glare { animation: none; }

.hc-deck__controls { display: flex; justify-content: center; align-items: center; gap: 13px; padding: 3px 4px 12px; }
.hc-deck__controls button {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 2px solid var(--hc-ink);
  border-radius: 14px;
  background: var(--hc-paper);
  color: var(--hc-ink);
  box-shadow: var(--hc-button-shadow);
  cursor: pointer;
  font-size: 30px;
  line-height: 1;
}
.hc-deck__controls button:focus-visible { outline: 3px solid var(--hc-focus); outline-offset: 3px; }
.hc-deck__position { min-width: 58px; text-align: center; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.hc-deck__position small { color: var(--hc-subtle); font-size: 12px; font-weight: 500; }
.hc-deck__controls .hc-deck__expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  margin-left: 10px;
  padding: 8px 12px;
  border: 1px solid var(--hc-line);
  box-shadow: none;
  font-size: 13px;
  font-weight: 650;
}

@keyframes hc-idle-reflection {
  0%, 100% { opacity: .2; background-position: 85% 20%; }
  50% { opacity: calc(var(--hc-foil-opacity) * .9); background-position: 20% 80%; }
}
@keyframes hc-idle-gloss {
  0%, 100% { opacity: .12; background-position: 90% 50%, center; }
  50% { opacity: .38; background-position: 10% 50%, center; }
}
@keyframes hc-arrive {
  0% { opacity: .5; transform: translate(calc(var(--hc-turn-direction, 1) * 16px), 8px) rotate(calc(var(--hc-turn-direction, 1) * 2deg)) scale(.97); }
  100% { opacity: 1; transform: none; }
}
@keyframes hc-depart {
  0% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translate(calc(var(--hc-turn-direction, 1) * -22%), 5%) rotate(calc(var(--hc-turn-direction, 1) * -8deg)) scale(.94); }
}

@media (max-width: 600px) {
  .hc-deck { --hc-stage-padding: 23px 29px 29px 18px; --hc-card-padding: 5px; --hc-paper-padding: 8px; --hc-paper-gap: 7px; }
  .hc-deck__stack { max-width: 342px; }
  .hc-deck__behind--1 { transform: translate(10px, 2px) rotate(3.5deg) scale(.98); }
  .hc-deck__behind--2 { transform: translate(17px, 2px) rotate(6deg) scale(.95); }
  .hc-deck__label { gap: 8px; font-size: 9px; letter-spacing: 1.1px; }
  .hc-card__edition { font-size: 7px; letter-spacing: .8px; }
  .hc-card__edition span:last-child { font-size: 7px; letter-spacing: .8px; }
  .hc-card__sparkle { font-size: 10px; }
  .hc-card__caption { padding: 4px 1px 1px; }
  .hc-card__caption strong { font-size: 13px; letter-spacing: -.4px; }
  .hc-card__caption small { margin-top: 4px; font-size: 9px; }
  .hc-card__number { font-size: 23px; }
  .hc-card__number small { font-size: 9px; }
  .hc-deck__controls { gap: 10px; padding-bottom: 5px; }
  .hc-deck__position { min-width: 46px; }
  .hc-deck__controls .hc-deck__expand { margin-left: auto; padding: 8px 10px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .hc-deck__active, .hc-deck__leaving, .hc-card__foil, .hc-card__glare { animation: none !important; }
  .hc-deck__leaving { display: none; }
  .hc-card__float { animation: none !important; transform: none !important; }
  .hc-card { transform: none !important; transition: none !important; }
  .hc-card__foil, .hc-card__glare { opacity: 0 !important; }
}

/* 48 evenly sampled steps reconstruct the original smooth float path. */
@keyframes hc-idle-float {
  0% { transform: translate3d(0px, 0px, 0) rotateX(-2.8284deg) rotateY(-7deg) rotate(0deg); }
  2.0833% { transform: translate3d(0.3916px, -0.077px, 0) rotateX(-2.435deg) rotateY(-6.9401deg) rotate(0.1044deg); }
  4.1667% { transform: translate3d(0.7765px, -0.3067px, 0) rotateX(-2deg) rotateY(-6.7615deg) rotate(0.2071deg); }
  6.25% { transform: translate3d(1.1481px, -0.6851px, 0) rotateX(-1.5307deg) rotateY(-6.4672deg) rotate(0.3061deg); }
  8.3333% { transform: translate3d(1.5px, -1.2058px, 0) rotateX(-1.0353deg) rotateY(-6.0622deg) rotate(0.4deg); }
  10.4167% { transform: translate3d(1.8263px, -1.8598px, 0) rotateX(-0.5221deg) rotateY(-5.5535deg) rotate(0.487deg); }
  12.5% { transform: translate3d(2.1213px, -2.636px, 0) rotateX(0deg) rotateY(-4.9497deg) rotate(0.5657deg); }
  14.5833% { transform: translate3d(2.3801px, -3.5211px, 0) rotateX(0.5221deg) rotateY(-4.2613deg) rotate(0.6347deg); }
  16.6667% { transform: translate3d(2.5981px, -4.5px, 0) rotateX(1.0353deg) rotateY(-3.5deg) rotate(0.6928deg); }
  18.75% { transform: translate3d(2.7716px, -5.5558px, 0) rotateX(1.5307deg) rotateY(-2.6788deg) rotate(0.7391deg); }
  20.8333% { transform: translate3d(2.8978px, -6.6706px, 0) rotateX(2deg) rotateY(-1.8117deg) rotate(0.7727deg); }
  22.9167% { transform: translate3d(2.9743px, -7.8253px, 0) rotateX(2.435deg) rotateY(-0.9137deg) rotate(0.7932deg); }
  25% { transform: translate3d(3px, -9px, 0) rotateX(2.8284deg) rotateY(0deg) rotate(0.8deg); }
  27.0833% { transform: translate3d(2.9743px, -10.1747px, 0) rotateX(3.1734deg) rotateY(0.9137deg) rotate(0.7932deg); }
  29.1667% { transform: translate3d(2.8978px, -11.3294px, 0) rotateX(3.4641deg) rotateY(1.8117deg) rotate(0.7727deg); }
  31.25% { transform: translate3d(2.7716px, -12.4442px, 0) rotateX(3.6955deg) rotateY(2.6788deg) rotate(0.7391deg); }
  33.3333% { transform: translate3d(2.5981px, -13.5px, 0) rotateX(3.8637deg) rotateY(3.5deg) rotate(0.6928deg); }
  35.4167% { transform: translate3d(2.3801px, -14.4789px, 0) rotateX(3.9658deg) rotateY(4.2613deg) rotate(0.6347deg); }
  37.5% { transform: translate3d(2.1213px, -15.364px, 0) rotateX(4deg) rotateY(4.9497deg) rotate(0.5657deg); }
  39.5833% { transform: translate3d(1.8263px, -16.1402px, 0) rotateX(3.9658deg) rotateY(5.5535deg) rotate(0.487deg); }
  41.6667% { transform: translate3d(1.5px, -16.7942px, 0) rotateX(3.8637deg) rotateY(6.0622deg) rotate(0.4deg); }
  43.75% { transform: translate3d(1.1481px, -17.3149px, 0) rotateX(3.6955deg) rotateY(6.4672deg) rotate(0.3061deg); }
  45.8333% { transform: translate3d(0.7765px, -17.6933px, 0) rotateX(3.4641deg) rotateY(6.7615deg) rotate(0.2071deg); }
  47.9167% { transform: translate3d(0.3916px, -17.923px, 0) rotateX(3.1734deg) rotateY(6.9401deg) rotate(0.1044deg); }
  50% { transform: translate3d(0px, -18px, 0) rotateX(2.8284deg) rotateY(7deg) rotate(0deg); }
  52.0833% { transform: translate3d(-0.3916px, -17.923px, 0) rotateX(2.435deg) rotateY(6.9401deg) rotate(-0.1044deg); }
  54.1667% { transform: translate3d(-0.7765px, -17.6933px, 0) rotateX(2deg) rotateY(6.7615deg) rotate(-0.2071deg); }
  56.25% { transform: translate3d(-1.1481px, -17.3149px, 0) rotateX(1.5307deg) rotateY(6.4672deg) rotate(-0.3061deg); }
  58.3333% { transform: translate3d(-1.5px, -16.7942px, 0) rotateX(1.0353deg) rotateY(6.0622deg) rotate(-0.4deg); }
  60.4167% { transform: translate3d(-1.8263px, -16.1402px, 0) rotateX(0.5221deg) rotateY(5.5535deg) rotate(-0.487deg); }
  62.5% { transform: translate3d(-2.1213px, -15.364px, 0) rotateX(0deg) rotateY(4.9497deg) rotate(-0.5657deg); }
  64.5833% { transform: translate3d(-2.3801px, -14.4789px, 0) rotateX(-0.5221deg) rotateY(4.2613deg) rotate(-0.6347deg); }
  66.6667% { transform: translate3d(-2.5981px, -13.5px, 0) rotateX(-1.0353deg) rotateY(3.5deg) rotate(-0.6928deg); }
  68.75% { transform: translate3d(-2.7716px, -12.4442px, 0) rotateX(-1.5307deg) rotateY(2.6788deg) rotate(-0.7391deg); }
  70.8333% { transform: translate3d(-2.8978px, -11.3294px, 0) rotateX(-2deg) rotateY(1.8117deg) rotate(-0.7727deg); }
  72.9167% { transform: translate3d(-2.9743px, -10.1747px, 0) rotateX(-2.435deg) rotateY(0.9137deg) rotate(-0.7932deg); }
  75% { transform: translate3d(-3px, -9px, 0) rotateX(-2.8284deg) rotateY(0deg) rotate(-0.8deg); }
  77.0833% { transform: translate3d(-2.9743px, -7.8253px, 0) rotateX(-3.1734deg) rotateY(-0.9137deg) rotate(-0.7932deg); }
  79.1667% { transform: translate3d(-2.8978px, -6.6706px, 0) rotateX(-3.4641deg) rotateY(-1.8117deg) rotate(-0.7727deg); }
  81.25% { transform: translate3d(-2.7716px, -5.5558px, 0) rotateX(-3.6955deg) rotateY(-2.6788deg) rotate(-0.7391deg); }
  83.3333% { transform: translate3d(-2.5981px, -4.5px, 0) rotateX(-3.8637deg) rotateY(-3.5deg) rotate(-0.6928deg); }
  85.4167% { transform: translate3d(-2.3801px, -3.5211px, 0) rotateX(-3.9658deg) rotateY(-4.2613deg) rotate(-0.6347deg); }
  87.5% { transform: translate3d(-2.1213px, -2.636px, 0) rotateX(-4deg) rotateY(-4.9497deg) rotate(-0.5657deg); }
  89.5833% { transform: translate3d(-1.8263px, -1.8598px, 0) rotateX(-3.9658deg) rotateY(-5.5535deg) rotate(-0.487deg); }
  91.6667% { transform: translate3d(-1.5px, -1.2058px, 0) rotateX(-3.8637deg) rotateY(-6.0622deg) rotate(-0.4deg); }
  93.75% { transform: translate3d(-1.1481px, -0.6851px, 0) rotateX(-3.6955deg) rotateY(-6.4672deg) rotate(-0.3061deg); }
  95.8333% { transform: translate3d(-0.7765px, -0.3067px, 0) rotateX(-3.4641deg) rotateY(-6.7615deg) rotate(-0.2071deg); }
  97.9167% { transform: translate3d(-0.3916px, -0.077px, 0) rotateX(-3.1734deg) rotateY(-6.9401deg) rotate(-0.1044deg); }
  100% { transform: translate3d(0px, 0px, 0) rotateX(-2.8284deg) rotateY(-7deg) rotate(0deg); }
}