@charset "UTF-8";

/* 뷰포트 스크롤바는 html(문서 루트)에 생기므로 html/body 모두 잠가야
   모달 뒤 배경 스크롤바가 완전히 사라진다. */
html.scroll-blocked,
body.scroll-blocked {
  height: 100svh;
  touch-action: none;
  -webkit-overflow-scrolling: none;
  overflow: hidden;
  overscroll-behavior: none;
}

.hashbox-opening[data-box-grade="Iron"] [data-action-redraw],
.hashbox-opening[data-box-grade="Iron"] [data-action-share] {
  display: none;
}

.draw-scene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  height: 100svh;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.draw-scene ::selection {
  background: transparent;
  color: inherit;
}
.draw-scene[hidden] {
  display: none !important;
}

.scene {
  width: 100%;
  min-height: 100svh;
  padding: 64px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
@media (max-width: 512px) {
  .scene {
    padding: 10rem 0;
  }
}
.scene__boot {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  pointer-events: none;
}
.scene__boot[hidden] {
  display: none !important;
}
.scene__boot-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-top-color: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  animation: card-loader-spin 0.75s linear infinite;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.12));
}
.scene--booting {
  pointer-events: none;
  user-select: none;
}
.scene--booting .scene__preopen {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.scene__actions {
  display: none;
}
.scene__fx {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.scene__slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100%;
}

.scene__preopen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(100%, 468px);
  z-index: 2;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.5s ease,
    visibility 0.5s ease;
}
.scene__preopen-head {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(75vw, 440px);
  margin-bottom: min(32px, 3vw);
}
.scene__preopen-head.scene__preopen-head--mb-0 {
  margin-bottom: 0;
}
.scene__preopen-headline {
  display: block;
  width: 100%;
  height: auto;
}
.scene__open-hints {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  max-width: 100%;
  padding: 8px 16px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
  flex-wrap: wrap;
}
.scene__open-hints.scene__open-hints--big {
  padding: 2rem;
  background-color: transparent;
  border: 1px solid #fff;
}
.scene__open-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 300px;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  white-space: nowrap;
}
.scene__open-hint.scene__open-hint--big {
  flex-direction: column;
  padding: 1rem;
}
.scene__open-hint-icon {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}
.scene__open-hint-icon.scene__open-hint-icon--big {
  width: 3em;
  height: 4em;
}
.scene__open-hint-divider {
  display: block;
  width: 1px;
  height: 34px;
  background: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}
.scene__preopen-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.scene__preopen-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
  padding-top: 32px;
}
.scene__preopen-copy {
  margin: 0;
  color: var(--text-color);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  word-break: keep-all;
}
.scene__preopen-copy span {
  display: inline-block;
}
.scene__preopen-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}
.scene__preopen-action {
  margin: 0;
  padding: 8px 16px;
  border: 1px solid var(--color-preopen-action-border);
  border-radius: 40px;
  background: transparent;
  color: var(--text-color);
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.scene__preopen-action[data-preopen-notice] {
  color: #3b3b3b;
  background: rgba(255, 255, 255, 0.96);
}
.scene__phase2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: min(100%, 468px);
  z-index: 1;
}
.scene__phase2:not(.scene__phase2--ready) > .scene__cards,
.scene__phase2:not(.scene__phase2--ready) > .scene__prize,
.scene__phase2:not(.scene__phase2--ready) > .scene__toolbar {
  display: none;
}
.scene__cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.scene__hint {
  width: 100%;
  color: var(--text-color);
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  text-align: center;
  word-break: keep-all;
}
.scene__prize {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 10px;
}
.scene__price {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.scene__price-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 0;
  color: #fff;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 2px;
  white-space: nowrap;
  border-radius: 1000px;
  transition: box-shadow 10ms ease;
}
.scene__price-banner[data-grade="e"] {
  box-shadow:
    0 0 16px rgba(114, 113, 113, 0.6) inset,
    0 0 64px rgba(114, 113, 113, 0.8) inset;
}
.scene__price-banner[data-grade="d"] {
  box-shadow:
    0 0 16px rgba(34, 172, 56, 0.6) inset,
    0 0 64px rgba(34, 172, 56, 0.8) inset;
}
.scene__price-banner[data-grade="c"] {
  box-shadow:
    0 0 16px rgba(0, 166, 233, 0.6) inset,
    0 0 64px rgba(0, 166, 233, 0.8) inset;
}
.scene__price-banner[data-grade="b"] {
  box-shadow:
    0 0 16px rgba(230, 55, 40, 0.6) inset,
    0 0 64px rgba(230, 55, 40, 0.8) inset;
}
.scene__price-banner[data-grade="a"] {
  box-shadow:
    0 0 16px rgba(126, 49, 142, 0.6) inset,
    0 0 64px rgba(126, 49, 142, 0.8) inset;
}
.scene__price-banner[data-grade="x"] {
  box-shadow:
    0 0 16px rgba(231, 197, 0, 0.6) inset,
    0 0 64px rgba(231, 197, 0, 0.8) inset;
}
.scene__price-label,
.scene__price-unit {
  font-size: min(24px, 6vw);
  font-weight: 700;
}
.scene__price-value {
  display: inline-flex;
  justify-content: flex-end;
  align-items: baseline;
  width: 50%;
  font-size: min(40px, 8vw);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.scene__price-digit-slot {
  display: inline-block;
  height: 1em;
  overflow: hidden;
  vertical-align: baseline;
  line-height: 1;
}
.scene__price-digit-slot--sep {
  min-width: 0.22em;
}
.scene__price-digit-slot--sep .scene__price-digit-face {
  width: 0.22em;
}
.scene__price-digit-roll {
  display: flex;
  flex-direction: column;
  transform: translate3d(0, 0, 0);
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.scene__price-digit-roll.is-rolling-down .scene__price-digit-face:last-child {
  opacity: 0;
}
.scene__price-digit-roll.is-rolling-down
  .scene__price-digit-face--placeholder:last-child {
  opacity: 0;
}
.scene__price-digit-face {
  flex: 0 0 1em;
  height: 1em;
  width: 0.65em;
  line-height: 1;
  text-align: center;
  transition: opacity 0s cubic-bezier(0.22, 1, 0.36, 1);
}
.scene__price-digit-face--placeholder {
  opacity: 0;
}
.scene__product-title {
  text-align: center;
  color: var(--text-color);
  font-size: min(20px, 5vw);
  font-weight: 700;
  line-height: normal;
  word-break: keep-all;
  height: 3rem;
}
.scene__product-title--swap {
  animation: prize-title-swap-down 0.26s ease both;
}
.scene__toolbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: min(360px, 100%);
}
.scene__toolbar[hidden] {
  display: none !important;
}
.scene__action {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  min-height: 64px;
  padding: 16px;
  border: 0;
  border-radius: 8px;
  background: rgba(41, 55, 83, 50%);
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.scene__action--large {
  grid-column: span 2;
}
.scene__action:disabled {
  opacity: 0.3;
  cursor: default;
}
.scene__action:not(:disabled):hover {
  opacity: 0.92;
}
@media (max-width: 320px) {
  .scene__action {
    grid-template: 1fr/2fr;
  }
}
.scene__action-icon {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
  justify-self: center;
}
.scene__action-icon--convert {
  width: 32px;
  height: 32px;
}
.scene__action-icon--inventory {
  width: 28px;
  height: 28px;
}
.scene__action-text {
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  min-width: 0;
}
.scene__action-label {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}
.scene__action-point {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: normal;
}
.scene[data-phase="pre-open"] .scene__phase2,
.scene[data-phase="box-swap"] .scene__phase2,
.scene[data-phase="box-exit"] .scene__phase2 {
  display: none;
}
.scene:not([data-phase="pre-open"]):not([data-phase="box-swap"]):not(
    [data-phase="box-exit"]
  )
  .scene__preopen {
  display: none;
}
.scene[data-phase="box-swap"] .scene__preopen-head,
.scene[data-phase="box-swap"] .scene__open-hints,
.scene[data-phase="box-swap"] .scene__preopen-foot,
.scene[data-phase="box-exit"] .scene__preopen-head,
.scene[data-phase="box-exit"] .scene__open-hints,
.scene[data-phase="box-exit"] .scene__preopen-foot {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--box-fade-duration) ease;
}
.scene:not(.scene--ten-plus-one) .scene__stage {
  --card-size: 240px;
}
.scene--ten-plus-one .scene__phase2 {
  width: min(100%, 1130px);
}
.scene--ten-plus-one .scene__preopen-head {
  width: min(60vw, 300px);
  margin-bottom: min(24px, 2.5vw);
}
.scene--ten-plus-one .scene__preopen {
  width: min(100%, 1130px);
}
.scene--ten-plus-one .scene__prize {
  display: none !important;
}
.scene--ten-plus-one [data-box-open].scene__grid {
  width: auto;
  gap: 0;
  align-items: self-start;
  --box-cell-size: 200px;
}
.scene--ten-plus-one [data-box-open].scene__grid .box-stage--bonus {
  --box-cell-size: 220px;
}

.roller--multiple.roller--bonus::after,
.box-stage--bonus::after {
  bottom: -32px;
  content: "보너스";
  margin-top: 6px;
  padding: 4px 1.6em;
  border-radius: 16px;
  color: #fff;
  background: #741bff;
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  pointer-events: none;
}
.scene__spacer {
  display: none;
}
.scene__stage {
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 0;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease 0.12s;
}
.scene__stage.scene__stage--fade-prep .roller {
  opacity: 0;
  transition: none;
}
.scene__stage.scene__stage--fade-in .roller {
  opacity: 1;
  transition: opacity var(--card-fade-duration) ease;
  transition-delay: var(--fade-delay, 0ms);
}
.scene__stage--gathered .roller {
  transform: translate(var(--spread-x, 0), var(--spread-y, 0))
    scale(var(--spread-scale, 0.42));
  z-index: var(--spread-stack, 0);
  transition: none;
}
.scene__stage--spreading .roller {
  transform: translate(0, 0) scale(1);
  z-index: auto;
  transition:
    transform var(--card-spread-duration) var(--box-open-ease),
    filter 0.12s ease;
  transition-delay: var(--spread-delay, 0ms);
}
.scene[data-phase="pre-open"] .scene__stage {
  opacity: 0;
  pointer-events: none;
  transition: none;
}
.scene[data-phase="pre-open"] .box-stage {
  opacity: 1;
  visibility: visible;
  transition: none;
}
.scene[data-phase="pre-open"] [data-box-open].scene__grid {
  opacity: 1;
  visibility: visible;
  transition: none;
}

.scene.scene--instant-reset .scene__stage,
.scene.scene--instant-reset .box-stage,
.scene.scene--instant-reset .scene__grid,
.scene.scene--instant-reset .scene__preopen,
.scene.scene--instant-reset .box-stage__img,
.scene.scene--instant-reset .roller,
.scene.scene--instant-reset .roller * {
  transition: none !important;
  animation: none !important;
}
.scene.scene--instant-reset .scene__fx {
  transition: none !important;
}
.scene[data-phase="box-exit"] .scene__stage {
  opacity: 0;
  pointer-events: none;
  transition: none;
}
.scene[data-phase="box-exit"] .box-stage__hint {
  opacity: 0;
}
.scene[data-phase="box-exit"] .box-stage__img {
  animation: none;
  transform: rotate(0deg) translateY(0) scale(1);
  filter: drop-shadow(0 0 var(--box-open-glow) var(--color-box-open-glow));
}
.scene[data-phase="opening"] .scene__stage {
  opacity: 1;
  pointer-events: auto;
  transition: none;
}
.scene[data-phase="box-swap"] .box-stage__img {
  animation: box-open-burst var(--box-swap-duration) var(--box-open-ease)
    forwards;
  animation-delay: var(--box-open-delay, 0ms);
}
.scene--rolling::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 80% 60% at 50% 42%,
    var(--color-roll-scene-glow-inner) 0%,
    var(--color-roll-scene-glow-mid) 35%,
    transparent 70%
  );
  animation: roll-scene-glow 1.1s ease-in-out infinite alternate;
}
.scene--rolling .scene__slot {
  position: relative;
  z-index: 1;
}

.scene__preopen .box-stage,
.scene__preopen [data-box-open].scene__grid {
  position: relative;
  z-index: auto;
  padding-bottom: 0;
}

.box-stage,
[data-box-open].scene__grid {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.box-stage,
.box-stage *,
[data-box-open].scene__grid,
[data-box-open].scene__grid * {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.box-stage:focus,
.box-stage:focus-visible,
[data-box-open].scene__grid:focus,
[data-box-open].scene__grid:focus-visible {
  outline: none;
}

.box-stage {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--box-size);
  margin: 0;
  padding: 0;
  padding-bottom: 96px;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
  touch-action: none;
  transform-origin: center center;
  overflow: visible;
}
.box-stage--pressing {
  transition: none;
}
.box-stage--pressing .box-stage__img {
  transition: none;
}
.box-stage--exit-down {
  animation: none;
  opacity: 0;
  transition: opacity var(--box-fade-duration) ease;
}
.box-stage--hidden {
  visibility: hidden;
  pointer-events: none;
}
.box-stage:disabled {
  cursor: default;
}
.box-stage__img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  background-repeat: no-repeat;
  background-size: 200% 100%;
  background-position: 0% 50%;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  transform-origin: center bottom;
  will-change: filter;
  transform: rotate(var(--box-press-r, 0deg))
    translateY(var(--box-press-y, 0px))
    scale(var(--box-press-sx, 1), var(--box-press-sy, 1));
  filter: drop-shadow(
    0 0 var(--box-press-glow, 0px) var(--color-box-press-glow)
  );
  transition: filter 0.08s ease;
}
.box-stage[data-box-state="open"] .box-stage__img {
  background-position: 100% 50%;
}

/* 다시뽑기 PRE_OPEN: B/A/X만 상자 글로우 — 카드와 동일 --edge-glow-* 재사용 */
.box-stage[data-grade="a"],
.box-stage--cell[data-grade="a"] {
  --grade-color: rgb(225, 77, 255);
  --edge-glow-bright: rgb(221, 50, 255);
  --edge-glow-mid: rgba(195.5629316669, 116.6368418848, 211.9631581152, 0.62);
  --edge-glow-outer: rgba(238, 156, 255, 0.48);
  --color-box-press-glow: var(--edge-glow-bright);
  --color-box-open-glow: var(--edge-glow-bright);
}
.box-stage[data-grade="b"],
.box-stage--cell[data-grade="b"] {
  --grade-color: rgb(255, 40, 21);
  --edge-glow-bright: rgb(255, 40, 21);
  --edge-glow-mid: rgba(255, 40, 21, 0.62);
  --edge-glow-outer: rgba(255, 40, 21, 0.48);
  --color-box-press-glow: var(--edge-glow-bright);
  --color-box-open-glow: var(--edge-glow-bright);
}
.box-stage[data-grade="x"],
.box-stage--cell[data-grade="x"] {
  --grade-color: rgb(255, 220, 23);
  --edge-glow-bright: rgb(255, 229, 81);
  --edge-glow-mid: rgb(255 232 97 / 62%);
  --edge-glow-outer: rgb(255 243 174 / 48%);
  --color-box-press-glow: var(--edge-glow-bright);
  --color-box-open-glow: var(--edge-glow-bright);
}
.box-stage[data-grade="a"] .box-stage__img,
.box-stage[data-grade="b"] .box-stage__img,
.box-stage[data-grade="x"] .box-stage__img {
  filter: drop-shadow(
    0 0 max(var(--box-press-glow, 0px), calc(var(--box-open-glow) * 0.4))
      var(--color-box-press-glow)
  );
}

.scene__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr) 1.5fr;
  gap: 32px;
  width: min(1130px, 100vw - 32px);
}

[data-box-open].scene__grid {
  position: absolute;
  z-index: 2;
  align-items: center;
  justify-items: center;
  margin: 0;
  padding: 0 0 48px;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
  touch-action: none;
  transform-origin: center center;
  outline: none;
  gap: 8px;
}
[data-box-open].scene__grid.box-stage--pressing {
  transition: none;
}
[data-box-open].scene__grid.box-stage--pressing .box-stage__img {
  transition: none;
}
[data-box-open].scene__grid.box-stage--pressing .box-stage--cell {
  transform-origin: center bottom;
  animation: box-cell-press-wiggle var(--box-cell-dur, 0.26s) ease-in-out
    infinite alternate;
  animation-delay: var(--box-cell-delay, 0s);
}
[data-box-open].scene__grid.box-stage--pressing .box-stage--cell:nth-child(1) {
  --box-cell-delay: 0s;
  --box-cell-dur: 0.248s;
  --box-cell-r-amp: 0.245deg;
  --box-cell-y-amp: 1.02px;
  --box-cell-glow-mul: 0.935;
}
[data-box-open].scene__grid.box-stage--pressing .box-stage--cell:nth-child(2) {
  --box-cell-delay: -0.038s;
  --box-cell-dur: 0.276s;
  --box-cell-r-amp: 0.29deg;
  --box-cell-y-amp: 1.34px;
  --box-cell-glow-mul: 0.97;
}
[data-box-open].scene__grid.box-stage--pressing .box-stage--cell:nth-child(3) {
  --box-cell-delay: -0.076s;
  --box-cell-dur: 0.304s;
  --box-cell-r-amp: 0.335deg;
  --box-cell-y-amp: 1.66px;
  --box-cell-glow-mul: 1.005;
}
[data-box-open].scene__grid.box-stage--pressing .box-stage--cell:nth-child(4) {
  --box-cell-delay: -0.114s;
  --box-cell-dur: 0.332s;
  --box-cell-r-amp: 0.38deg;
  --box-cell-y-amp: 0.7px;
  --box-cell-glow-mul: 1.04;
}
[data-box-open].scene__grid.box-stage--pressing .box-stage--cell:nth-child(5) {
  --box-cell-delay: -0.152s;
  --box-cell-dur: 0.22s;
  --box-cell-r-amp: 0.425deg;
  --box-cell-y-amp: 1.02px;
  --box-cell-glow-mul: 1.075;
}
[data-box-open].scene__grid.box-stage--pressing .box-stage--cell:nth-child(6) {
  --box-cell-delay: -0.19s;
  --box-cell-dur: 0.248s;
  --box-cell-r-amp: 0.47deg;
  --box-cell-y-amp: 1.34px;
  --box-cell-glow-mul: 0.9;
}
[data-box-open].scene__grid.box-stage--pressing .box-stage--cell:nth-child(7) {
  --box-cell-delay: -0.228s;
  --box-cell-dur: 0.276s;
  --box-cell-r-amp: 0.2deg;
  --box-cell-y-amp: 1.66px;
  --box-cell-glow-mul: 0.935;
}
[data-box-open].scene__grid.box-stage--pressing .box-stage--cell:nth-child(8) {
  --box-cell-delay: -0.266s;
  --box-cell-dur: 0.304s;
  --box-cell-r-amp: 0.245deg;
  --box-cell-y-amp: 0.7px;
  --box-cell-glow-mul: 0.97;
}
[data-box-open].scene__grid.box-stage--pressing .box-stage--cell:nth-child(9) {
  --box-cell-delay: -0.304s;
  --box-cell-dur: 0.332s;
  --box-cell-r-amp: 0.29deg;
  --box-cell-y-amp: 1.02px;
  --box-cell-glow-mul: 1.005;
}
[data-box-open].scene__grid.box-stage--pressing .box-stage--cell:nth-child(10) {
  --box-cell-delay: -0.342s;
  --box-cell-dur: 0.22s;
  --box-cell-r-amp: 0.335deg;
  --box-cell-y-amp: 1.34px;
  --box-cell-glow-mul: 1.04;
}
[data-box-open].scene__grid.box-stage--pressing .box-stage--cell:nth-child(11) {
  --box-cell-delay: -0.38s;
  --box-cell-dur: 0.248s;
  --box-cell-r-amp: 0.38deg;
  --box-cell-y-amp: 1.66px;
  --box-cell-glow-mul: 1.075;
}
[data-box-open].scene__grid.box-stage--pressing
  .box-stage--cell.box-stage--bonus {
  --box-cell-r-amp: 0.38deg;
  --box-cell-y-amp: 1.35px;
  --box-cell-dur: 0.3s;
  --box-cell-glow-mul: 1.08;
}
[data-box-open].scene__grid.box-stage--exit-down {
  animation: none;
  opacity: 0;
  transition: opacity var(--box-fade-duration) ease;
}
[data-box-open].scene__grid.box-stage--hidden {
  visibility: hidden;
  pointer-events: none;
}
[data-box-open].scene__grid:disabled {
  cursor: default;
}
[data-box-open].scene__grid .box-stage--cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--box-cell-size);
  margin: 0;
  padding: 0;
  pointer-events: none;
  box-sizing: content-box;
}
[data-box-open].scene__grid .box-stage--bonus {
  --box-cell-size: 200px;
  grid-column: 6;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: center;
}
[data-box-open].scene__grid .box-stage__img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  background-repeat: no-repeat;
  background-size: 200% 100%;
  background-position: 0% 50%;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  transform-origin: center bottom;
  transform: rotate(var(--box-press-r, 0deg))
    translateY(var(--box-press-y, 0px))
    scale(var(--box-press-sx, 1), var(--box-press-sy, 1));
  filter: drop-shadow(
    0 0 calc(var(--box-press-glow, 0px) * var(--box-cell-glow-mul, 1))
      var(--color-box-press-glow)
  );
  transition: filter 0.08s ease;
}
[data-box-open].scene__grid .box-stage--cell[data-grade="a"] .box-stage__img,
[data-box-open].scene__grid .box-stage--cell[data-grade="b"] .box-stage__img,
[data-box-open].scene__grid .box-stage--cell[data-grade="x"] .box-stage__img {
  filter: drop-shadow(
    0 0
      max(
        calc(var(--box-press-glow, 0px) * var(--box-cell-glow-mul, 1)),
        calc(var(--box-open-glow) * 0.35)
      )
      var(--color-box-press-glow)
  );
}
[data-box-open].scene__grid
  .box-stage--cell[data-box-state="open"]
  .box-stage__img {
  background-position: 100% 50%;
}

@keyframes box-cell-press-wiggle {
  from {
    transform: rotate(calc(var(--box-cell-r-amp, 0.28deg) * -1))
      translateY(calc(var(--box-cell-y-amp, 1px) * -1));
  }
  to {
    transform: rotate(var(--box-cell-r-amp, 0.28deg))
      translateY(var(--box-cell-y-amp, 1px));
  }
}
@keyframes prize-title-swap-down {
  from {
    opacity: 0.35;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes box-open-burst {
  0% {
    transform: rotate(var(--box-press-r, 0deg))
      translateY(var(--box-press-y, 0px))
      scale(var(--box-press-sx, 1), var(--box-press-sy, 1));
    filter: drop-shadow(
      0 0 var(--box-press-glow, 0px) var(--color-box-press-glow)
    );
  }
  12% {
    transform: rotate(0deg) translateY(0) scale(var(--box-open-s));
    filter: drop-shadow(0 0 var(--box-open-glow) var(--color-box-open-glow));
  }
  100% {
    transform: rotate(0deg) translateY(0) scale(1);
    filter: drop-shadow(0 0 var(--box-open-glow) var(--color-box-open-glow));
  }
}
.roller {
  --grade-color: #727171;
  --pointer-x: 0;
  --pointer-y: 0;
  --card-hover-scale: 1.2;
  --card-tilt-max: 12deg;
  justify-self: center;
  align-self: center;
  position: relative;
  width: var(--card-size);
  transform-style: preserve-3d;
  will-change: transform, filter;
  transition: filter 0.12s ease;
  padding: 1rem;
  box-sizing: content-box;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.roller--hover:not(.roller--rolling) .card__tilt,
.roller--hover.roller--interact-ready .card__tilt,
.roller--gyro-tilt:not(.roller--rolling) .card__tilt,
.roller--gyro-tilt.roller--interact-ready .card__tilt {
  transform: rotateX(calc(var(--pointer-y) * var(--card-tilt-max)))
    rotateY(calc(var(--pointer-x) * var(--card-tilt-max) * -1));
  transition: transform 0.12s ease-out;
}
.roller--hover:not(.roller--rolling) .card__sheen,
.roller--hover.roller--interact-ready .card__sheen,
.roller--gyro-tilt:not(.roller--rolling) .card__sheen,
.roller--gyro-tilt.roller--interact-ready .card__sheen {
  opacity: 1;
}

.roller--gyro-tilt:not(.roller--rolling) .card__tilt,
.roller--gyro-tilt.roller--interact-ready .card__tilt {
  transition: none;
}
.roller--hover:not(.roller--rolling) .card__tilt,
.roller--hover.roller--interact-ready .card__tilt {
  transform: scale(var(--card-hover-scale))
    rotateX(calc(var(--pointer-y) * var(--card-tilt-max) * 1.5))
    rotateY(calc(var(--pointer-x) * var(--card-tilt-max) * -0.75));
}
.roller--multiple {
  --card-size: 180px;
  gap: 32px;
}
.roller--multiple.roller--bonus {
  --card-size: 200px;
  grid-column: 6;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}
.roller--loading .card__canvas {
  visibility: hidden;
}
.roller:not(.roller--loading) .roller__loader {
  display: none;
}

.roller:not(.roller--loading):not(.roller--rolling)
  .card.card--edge-glow[data-grade="c"]
  .card__frame {
  --frame-edge-glow:
    0 0 8.8px 2.64px var(--edge-glow-bright),
    0 0 19.36px 0.88px var(--edge-glow-mid);
}
.roller:not(.roller--loading):not(.roller--rolling)
  .card.card--edge-glow[data-grade="d"]
  .card__frame {
  --frame-edge-glow:
    0 0 8.8px 2.64px var(--edge-glow-bright),
    0 0 19.36px 0.88px var(--edge-glow-mid);
}
.roller:not(.roller--loading):not(.roller--rolling)
  .card.card--edge-glow[data-grade="e"]
  .card__frame {
  --frame-edge-glow:
    0 0 8.8px 2.64px var(--edge-glow-bright),
    0 0 19.36px 0.88px var(--edge-glow-mid);
}
.roller:not(.roller--loading):not(.roller--rolling)
  .card.card--edge-glow[data-grade="a"]
  .card__frame {
  --frame-edge-glow:
    0 0 4px 2px var(--edge-glow-bright), 0 0 42px 4px var(--edge-glow-mid),
    0 0 64px 0px var(--edge-glow-outer);
}
.roller:not(.roller--loading):not(.roller--rolling)
  .card.card--edge-glow[data-grade="b"]
  .card__frame {
  --frame-edge-glow:
    0 0 4px 2px var(--edge-glow-bright), 0 0 42px 4px var(--edge-glow-mid),
    0 0 64px 0px var(--edge-glow-outer);
}
.roller:not(.roller--loading):not(.roller--rolling)
  .card.card--edge-glow[data-grade="x"]
  .card__frame {
  --frame-edge-glow:
    0 0 4px 2px var(--edge-glow-bright), 0 0 42px 4px var(--edge-glow-mid),
    0 0 64px 0px var(--edge-glow-outer);
}
.roller.roller--rolling {
  cursor: pointer;
}
.roller.roller--rolling:not(.roller--interact-ready) .card__tilt {
  pointer-events: auto;
}

.roller.roller--rolling:not(.roller--loading)
  .card.card--edge-glow[data-grade="c"]
  .card__frame {
  --frame-edge-glow:
    0 0 10px 3px var(--edge-glow-bright), 0 0 22px 1px var(--edge-glow-mid);
}
.roller.roller--rolling:not(.roller--loading)
  .card.card--edge-glow[data-grade="d"]
  .card__frame {
  --frame-edge-glow:
    0 0 10px 3px var(--edge-glow-bright), 0 0 22px 1px var(--edge-glow-mid);
}
.roller.roller--rolling:not(.roller--loading)
  .card.card--edge-glow[data-grade="e"]
  .card__frame {
  --frame-edge-glow:
    0 0 10px 3px var(--edge-glow-bright), 0 0 22px 1px var(--edge-glow-mid);
}
.roller.roller--rolling:not(.roller--loading)
  .card.card--edge-glow[data-grade="a"]
  .card__frame {
  --frame-edge-glow:
    0 0 5.12px 2.56px var(--edge-glow-bright),
    0 0 53.76px 5.12px var(--edge-glow-mid),
    0 0 81.92px 0px var(--edge-glow-outer);
}
.roller.roller--rolling:not(.roller--loading)
  .card.card--edge-glow[data-grade="b"]
  .card__frame {
  --frame-edge-glow:
    0 0 5.12px 2.56px var(--edge-glow-bright),
    0 0 53.76px 5.12px var(--edge-glow-mid),
    0 0 81.92px 0px var(--edge-glow-outer);
}
.roller.roller--rolling:not(.roller--loading)
  .card.card--edge-glow[data-grade="x"]
  .card__frame {
  --frame-edge-glow:
    0 0 5.12px 2.56px var(--edge-glow-bright),
    0 0 53.76px 5.12px var(--edge-glow-mid),
    0 0 81.92px 0px var(--edge-glow-outer);
}
.roller__loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 36%;
  aspect-ratio: 1;
  margin: -18% 0 0 -18%;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-top-color: #fff;
  border-radius: 50%;
  animation: card-loader-spin 0.8s linear infinite;
  pointer-events: none;
}

@keyframes card-loader-spin {
  to {
    transform: rotate(360deg);
  }
}
.card {
  --card-radius: 4px;
  /* iOS mix-blend-mode(soft-light) 안정화 — sheen 블렌드 배경 확보 */
  --card-background-color: #000;
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  perspective: 1600px;
}
.card.card--appear {
  animation: card-appear-punch 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.card.card--appear .card__glare {
  animation: card-appear-glare 0.48s ease-out both;
}
@keyframes card-appear-punch {
  0% {
    transform: scale(1);
  }
  26% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes card-appear-glare {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  60% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
.card[data-grade="e"] {
  --grade-color: rgb(114, 113, 113);
}
.card[data-grade="d"] {
  --grade-color: rgb(34, 255, 71);
}
.card[data-grade="c"] {
  --grade-color: rgb(37, 193, 255);
}
.card[data-grade="b"] {
  --grade-color: rgb(255, 40, 21);
}
.card[data-grade="a"] {
  --grade-color: rgb(225, 77, 255);
}
.card[data-grade="x"] {
  --grade-color: rgb(255, 220, 23);
}
.card[data-grade="c"] {
  --edge-glow-bright: rgba(134, 134, 134, 0.5);
  --edge-glow-mid: rgba(175, 175, 175, 0.24);
  --edge-glow-outer: rgba(175, 175, 175, 0.24);
}
.card[data-grade="d"] {
  --edge-glow-bright: rgba(134, 134, 134, 0.5);
  --edge-glow-mid: rgba(175, 175, 175, 0.24);
  --edge-glow-outer: rgba(175, 175, 175, 0.24);
}
.card[data-grade="e"] {
  --edge-glow-bright: rgba(134, 134, 134, 0.5);
  --edge-glow-mid: rgba(175, 175, 175, 0.24);
  --edge-glow-outer: rgba(175, 175, 175, 0.24);
}
.card[data-grade="a"] {
  --edge-glow-bright: rgb(221, 50, 255);
  --edge-glow-mid: rgba(195.5629316669, 116.6368418848, 211.9631581152, 0.62);
  --edge-glow-outer: rgba(238, 156, 255, 0.48);
}
.card[data-grade="b"] {
  --edge-glow-bright: #ff6456;
  --edge-glow-mid: rgba(255, 79, 67, 0.62);
  --edge-glow-outer: rgba(255, 90, 75, 0.48);
}
.card[data-grade="x"] {
  --edge-glow-bright: rgb(255, 229, 81);
  --edge-glow-mid: rgb(255 232 97 / 62%);
  --edge-glow-outer: rgb(255 243 174 / 48%);
}

.card--edge-glow .card__frame {
  box-shadow: var(--frame-edge-glow, none);
}

.card.card--grade-glow.card--edge-glow[data-grade="a"] .card__frame {
  --edge-glow-bright: rgb(227, 114, 255);
  --edge-glow-mid: rgba(227, 85, 255, 0.774);
  --edge-glow-outer: rgba(230, 105, 255, 0.712);
  --frame-edge-glow:
    0 0 22px 10px var(--edge-glow-bright), 0 0 42px 7px var(--edge-glow-mid),
    0 0 68px 3px var(--edge-glow-outer);
}
.card.card--grade-glow.card--edge-glow[data-grade="b"] .card__frame {
  --edge-glow-bright: rgb(255, 66, 56);
  --edge-glow-mid: rgba(255, 48, 29, 0.815);
  --edge-glow-outer: rgba(255, 48, 29, 0.815);
  --frame-edge-glow:
    0 0 22px 10px var(--edge-glow-bright), 0 0 42px 7px var(--edge-glow-mid),
    0 0 68px 3px var(--edge-glow-outer);
}
.card.card--grade-glow.card--edge-glow[data-grade="x"] .card__frame {
  --edge-glow-bright: rgb(255, 248, 212);
  --edge-glow-mid: rgba(255, 221, 27, 0.64);
  --edge-glow-outer: rgba(255, 223, 40, 0.46);
  --frame-edge-glow:
    0 0 22px 10px var(--edge-glow-bright), 0 0 42px 7px var(--edge-glow-mid),
    0 0 68px 3px var(--edge-glow-outer);
}
.card.card--grade-glow-soft.card--edge-glow[data-grade="c"] .card__frame {
  --edge-glow-bright: rgba(95, 207, 255, 0.884);
  --edge-glow-mid: rgba(23, 189, 255, 0.781);
  --edge-glow-outer: rgba(0, 160, 223, 0.705);
  --frame-edge-glow:
    0 0 12px 4px var(--edge-glow-bright), 0 0 26px 3px var(--edge-glow-mid),
    0 0 40px 1px var(--edge-glow-outer);
}
.card.card--grade-glow-soft.card--edge-glow[data-grade="d"] .card__frame {
  --edge-glow-bright: rgba(85, 255, 116, 0.863);
  --edge-glow-mid: rgba(49, 255, 83, 0.822);
  --edge-glow-outer: rgba(0, 224, 37, 0.3);
  --frame-edge-glow:
    0 0 12px 4px var(--edge-glow-bright), 0 0 26px 3px var(--edge-glow-mid),
    0 0 40px 1px var(--edge-glow-outer);
}
.card.card--grade-glow-soft.card--edge-glow[data-grade="e"] .card__frame {
  --edge-glow-bright: rgba(221, 221, 221, 0.87);
  --edge-glow-mid: rgba(209, 209, 209, 0.774);
  --edge-glow-outer: rgba(197, 197, 197, 0.801);
  --frame-edge-glow:
    0 0 12px 4px var(--edge-glow-bright), 0 0 26px 3px var(--edge-glow-mid),
    0 0 40px 1px var(--edge-glow-outer);
}
.card__frame.goods_detail_trigger {
  cursor: pointer;
}
.card__tilt {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: scale(1) rotateX(0deg) rotateY(0deg);
  transition: transform 0.35s ease-out;
}
.card__frame {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border-radius: var(--card-radius);
  background: var(--card-background-color);
  overflow: visible;
  /* iOS mix-blend-mode — sheen이 카드 내부에서만 블렌드되도록 격리 */
  isolation: isolate;
  box-shadow: var(--frame-edge-glow, none);
  transition:
    opacity 0.08s linear,
    box-shadow var(--grade-glow-in, 3ms) ease-out;
}
.card__sheen {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: soft-light;
  background: linear-gradient(
    125deg,
    rgb(43, 43, 43) 0%,
    rgb(255, 255, 255) 19%,
    rgb(84, 84, 84) 37%,
    rgb(184, 184, 184) 55%,
    rgb(130, 130, 130) 72%,
    rgb(217, 217, 217) 89%,
    rgb(0, 0, 0) 100%
  );
  background-size: 240% 240%;
  background-position: calc(50% + var(--pointer-x) * 38%)
    calc(50% + var(--pointer-y) * 38%);
  transition: opacity 0.2s ease;
}
.card__glare {
  --glare-offset: -14px;
  position: absolute;
  z-index: 3;
  inset: var(--glare-offset);
  width: calc(100% - var(--glare-offset) * 2);
  height: calc(100% - var(--glare-offset) * 2);
  border-radius: var(--card-radius);
  background: #ffffff;
  filter: blur(10px);
  pointer-events: none;
  opacity: 0;
}
.card__border {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 1px solid white;
  box-shadow:
    inset 0 0 7px 0 var(--edge-glow-bright, var(--grade-color)),
    inset 0 0 14px 1px var(--edge-glow-mid, transparent);
  border-radius: var(--card-radius);
  pointer-events: none;
}
.card__viewport {
  position: relative;
  z-index: 0;
  flex-shrink: 0;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--card-radius);
  overflow: hidden;
  background: #ffffff;
}
.card__canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.card__light-shaft,
.box-stage__light-shaft {
  --light-shaft-frames: 17;
  --light-shaft-step-duration: 1.5s;
  --light-shaft-pulse-duration: 0.2s;
  --light-shaft-expand: 50%;
  position: absolute;
  z-index: 1;
  top: calc(var(--light-shaft-expand) * -1);
  left: calc(var(--light-shaft-expand) * -1);
  width: calc(100% + var(--light-shaft-expand) * 2);
  height: calc(100% + var(--light-shaft-expand) * 2);
  aspect-ratio: 1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0 0;
  mix-blend-mode: plus-lighter;
  animation: light-shaft-stripe var(--light-shaft-step-duration)
    steps(var(--light-shaft-frames)) infinite;
  animation-play-state: paused;
}
.box-stage__light-shaft {
  --light-shaft-expand: 15%;
  top: 0;
  left: calc(var(--light-shaft-expand) * -1);
  z-index: 0;
  transform-origin: center bottom;
  transform: translateY(var(--box-press-y, 0px))
    scale(var(--box-press-sx, 1), var(--box-press-sy, 1));
  will-change: transform;
}
.box-stage > .box-stage__img,
.box-stage--cell > .box-stage__img {
  position: relative;
  z-index: 1;
}
.card[data-grade="a"] .card__light-shaft,
.box-stage[data-grade="a"] .box-stage__light-shaft {
  visibility: visible;
  background-image: url("../img/opening/effect/light_shaft_a.webp");
  animation:
    light-shaft-stripe var(--light-shaft-step-duration)
      steps(var(--light-shaft-frames)) infinite,
    light-shaft-pulse var(--light-shaft-pulse-duration) ease-in-out infinite;
  animation-play-state: running;
}
.card[data-grade="b"] .card__light-shaft,
.box-stage[data-grade="b"] .box-stage__light-shaft {
  visibility: visible;
  background-image: url("../img/opening/effect/light_shaft_b.webp");
  animation:
    light-shaft-stripe var(--light-shaft-step-duration)
      steps(var(--light-shaft-frames)) infinite,
    light-shaft-pulse var(--light-shaft-pulse-duration) ease-in-out infinite;
  animation-play-state: running;
}
.card[data-grade="x"] .card__light-shaft,
.box-stage[data-grade="x"] .box-stage__light-shaft {
  visibility: visible;
  background-image: url("../img/opening/effect/light_shaft_x.webp");
  animation:
    light-shaft-stripe var(--light-shaft-step-duration)
      steps(var(--light-shaft-frames)) infinite,
    light-shaft-pulse var(--light-shaft-pulse-duration) ease-in-out infinite;
  animation-play-state: running;
}

@keyframes roll-scene-glow {
  from {
    opacity: 0.55;
  }
  to {
    opacity: 1;
  }
}
@keyframes light-shaft-stripe {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}
@keyframes light-shaft-pulse {
  0%,
  100% {
    opacity: 0.9;
  }
  50% {
    opacity: 0.8;
  }
}
.cta {
  position: fixed;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  padding: 16px 32px;
  border: none;
  border-radius: 1000px;
  background: #fff;
  color: var(--cta-text);
  font-family: inherit;
  font-size: 32px;
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 0 6px var(--glow);
  z-index: 10;
  transition: opacity 0.2s;
}
.cta:disabled {
  opacity: 0.45;
  cursor: default;
}
.cta--ghost {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.55);
  box-shadow: none;
}

@media (max-width: 1400px) {
  :root {
    --box-size: min(70vw, 203px);
  }
  .scene:not(.scene--ten-plus-one) .scene__stage {
    --card-size: min(60vw, 300px);
  }
  .scene__grid {
    width: auto;
    grid-template-columns: repeat(8, 1fr);
    gap: 0;
  }
  .scene--ten-plus-one [data-box-open].scene__grid .box-stage {
    --box-cell-size: min(24.5vw, 160px);
    grid-column: span 2;
  }
  .scene--ten-plus-one [data-box-open].scene__grid .box-stage--bonus {
    --box-cell-size: min(24.5vw, 160px);
    grid-area: span 1 / span 2;
  }
  .roller--multiple {
    --card-size: min(20vw, 160px);
    grid-column: span 2;
    padding: 0.75rem;
    align-self: self-start;
  }
  .roller--multiple.roller--bonus {
    --card-size: min(20vw, 160px);
    grid-column: span 2;
    grid-row: span 1;
  }
  .roller--multiple.roller--bonus::after {
    position: initial;
  }
  .scene__spacer--1,
  .scene__spacer--2,
  .scene__spacer--3,
  .scene__spacer--4,
  .scene__spacer--5,
  .scene__spacer--6,
  .scene__spacer--7,
  .scene__spacer--9,
  .scene__spacer--10 {
    display: none;
  }
  .scene__spacer--8 {
    display: block;
  }
}
@media (max-width: 425px) {
  :root {
    --box-size: min(70vw, 160px);
  }
  .hashbox-opening {
    --unboxing-light-shaft-box-size: min(1130px, calc(100vw - 16px));
  }
  .scene--ten-plus-one [data-box-open].scene__grid .box-stage {
    --box-cell-size: min(32vw, 130px);
  }
  .scene--ten-plus-one [data-box-open].scene__grid .box-stage--bonus {
    --box-cell-size: min(32vw, 130px);
  }
  .box-stage__hint {
    margin-top: 8px;
    font-size: 14px;
  }
  .cta {
    padding: 8px 16px;
    font-size: 16px;
  }
  .scene__toolbar {
    width: min(360px, 92vw);
  }
  .scene__open-hints {
    gap: 8px;
    padding: 8px 12px;
  }
  .scene__open-hint {
    padding: 6px;
    font-size: 14px;
  }
  .scene__open-hint-divider {
    height: 28px;
  }
  .scene__preopen-foot {
    padding-top: 24px;
  }
  .scene__preopen-copy,
  .scene__preopen-action {
    font-size: 14px;
  }
  .scene__spacer--1 {
    display: none;
  }
  .scene__spacer--2 {
    display: none;
  }
  .scene__spacer--3 {
    display: none;
  }
  .scene__spacer--4 {
    display: none;
  }
  .scene__spacer--5 {
    display: none;
  }
  .scene__spacer--6 {
    display: none;
  }
  .scene__spacer--7 {
    display: none;
  }
  .scene__spacer--8 {
    display: none;
  }
  .scene__spacer--9 {
    display: none;
  }
  .scene__spacer--10 {
    display: none;
  }
  .scene__spacer--9 {
    display: block;
  }
  .scene--ten-plus-one .scene__grid {
    width: auto;
    gap: 0;
    grid-template-columns: repeat(6, 1fr);
  }
  .scene--ten-plus-one .roller--multiple {
    --card-size: 26vw;
    padding: 2vw;
  }
}

@media (max-width: 345px) {
  .scene__open-hint-divider {
    background-color: transparent;
  }
}
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --card-size: 240px;
  --box-size: 278px;
  --box-swap-duration: 0.48s;
  --box-fade-duration: 0.32s;
  --card-spread-duration: 0.72s;
  --card-fade-duration: 0.52s;
  --box-open-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* 상자 open burst */
  --box-open-s: 1.22;
  --box-open-glow: 64px;

  overflow-x: hidden;
  overflow-y: auto;
}

.hashbox-opening {
  --text-color: #fff;
  font-family: "Pretendard", "Segoe UI", sans-serif;
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100svh;
  background-color: #010c1e;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  /* 10+1 scene__grid 기준 — unboxing light shaft 크기 (단뽑 동일 적용) */
  --unboxing-light-shaft-box-size: min(1130px, calc(100vw - 32px));
  --color-box-open-glow: rgb(74, 174, 255);
  --color-box-press-glow: rgb(96, 197, 255);
  --color-roll-scene-glow-inner: rgba(255, 251, 132, 0.07);
  --color-roll-scene-glow-mid: rgba(227, 78, 58, 0.03);
  --color-preopen-action-border: #fff;
}
.hashbox-opening ::selection {
  background: transparent;
  color: inherit;
}
.hashbox-opening[hidden] {
  display: none !important;
}

.hashbox-opening--scroll-lock {
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: none;
}

/* 배경 관련 */
/* 박스 오픈 시 배경 요소가 커지는 효과 */
.hashbox-opening-background {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100svh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.hashbox-opening-background__src {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  will-change: transform;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* 기본 효과 등록 */
.hashbox-opening-background__src--nebula {
  transition-duration: 600ms;
  transition-timing-function: cubic-bezier(0, 0, 0.02, 1);
  transform: scale(1);
}
.hashbox-opening-background__src--small-noise {
  transition-duration: 600ms;
  transition-timing-function: cubic-bezier(0.423, 0.277, 0.331, 0.977);
  transform: scale(1);
}
.hashbox-opening-background__src--large-noise {
  transition-duration: 600ms;
  transition-timing-function: cubic-bezier(0, 0.477, 0.392, 0.946);
  transform: scale(1);
}

/* 상자 오픈 시 효과 */
.hashbox-opening:not([data-phase="pre-open"])
  .hashbox-opening-background__src--nebula {
  transition-delay: 0;
  transform: scale(1.15);
}
.hashbox-opening:not([data-phase="pre-open"])
  .hashbox-opening-background__src--small-noise {
  transition-delay: 0;
  transform: scale(1.2);
}
.hashbox-opening:not([data-phase="pre-open"])
  .hashbox-opening-background__src--large-noise {
  transition-delay: 0;
  transform: scale(1.1);
}

/* 상자 꾹 누를 때 효과 */
.hashbox-opening[data-phase="box-press"]
  .hashbox-opening-background__src--nebula {
  transition-duration: 20s;
  transition-timing-function: linear;
  transform: scale(1.075);
}
.hashbox-opening[data-phase="box-press"]
  .hashbox-opening-background__src--small-noise {
  transition-duration: 20s;
  transition-timing-function: linear;
  transform: scale(1.1);
}
.hashbox-opening[data-phase="box-press"]
  .hashbox-opening-background__src--large-noise {
  transition-duration: 20s;
  transition-timing-function: linear;
  transform: scale(1.05);
}

/* 유의사항 관련 */
.hashbox-opening__notice {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  z-index: 1;
  color: #fff;
  font-size: 14px;
  border-radius: 1rem;
  cursor: pointer;
}

.hashbox-opening__notice--hide {
  display: none;
}

.hashbox-opening__notice--show {
  display: flex;
}

.hashbox-opening__notice-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 92vw;
  padding: 80px 10vw;
  background: rgb(0 0 0 / 75%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(16px);
  gap: 1.5em;
}

.hashbox-opening__notice-text span {
  display: inline-block;
}

.hashbox-opening__notice-text li {
  word-break: keep-all;
  margin-bottom: 0.75em;
}

.hashbox-opening__notice-text li:last-child {
  margin-bottom: 0;
}

.hashbox-opening__notice-button {
  color: #fff;
  border: 1px solid #fff;
  border-radius: 1000px;
  padding: 0.5rem 3rem;
  font-size: 16px;
  font-weight: 400;
  text-align: center;
}

.hashbox-opening__notice-button span {
  display: inline-block;
}

/* 오프닝 오버레이(.hashbox-opening 은 z-index:10000) 위에 토스트를 띄운다.
   기존 2000 은 오버레이(10000)보다 낮아 토스트가 뒤에 가려졌음.
   커스텀 다이얼로그(100000)보다는 낮게 유지. */
body:has(.hashbox-opening:not([hidden])) .copy_wrapper {
  z-index: 10001;
}

/* ========== Share page (3_53_share_v2) ========== */
.share-page {
  font-family: "Pretendard", "Segoe UI", sans-serif;
  position: fixed;
  inset: 0;
  z-index: 10000;
  width: 100%;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  overflow: hidden;
  background: #0c1a32;
}
.share-page .hashbox-opening-background {
  z-index: 0;
}
.share-page__fx.scene__fx {
  z-index: 2;
  pointer-events: none;
}
.share-page__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: min(100%, 468px);
  padding: 24px 16px;
  box-sizing: border-box;
}
.share-page__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
  word-break: keep-all;
}
.share-page__meta {
  display: grid;
  grid-template: repeat(2, 1fr) / 64px 1fr;
  gap: 0 1rem;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
}
.share-page__box-img {
  grid-row: span 2;
  width: 100%;
}
.share-page__box-name,
.share-page__date,
.share-page__user {
  margin: 0;
}
.share-page__user {
  font-size: 20px;
  font-weight: 700;
  text-align: right;
  flex-shrink: 0;
}
.share-page__roller.roller {
  --card-size: 360px;
  --card-hover-scale: 1.06;
  --card-tilt-max: 10deg;
  width: var(--card-size);
  height: var(--card-size);
  padding: 0;
  z-index: 3;
}
.share-page__roller .card {
  --card-radius: 12px;
  --card-background-color: #fff;
}
.share-page__frame.card__frame {
  border-radius: 12px;
  box-shadow:
    0 0 32px 4px rgba(255, 255, 255, 0.6),
    var(--frame-edge-glow, none);
}
.share-page__product-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.share-page__footer {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}
.share-page__title {
  margin: 0;
  width: 100%;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  line-height: normal;
  word-break: keep-all;
}
.share-page__hint.scene__hint {
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
}
.share-page .scene__price-banner {
  width: 100%;
}
.share-page .scene__price-value {
  width: auto;
  justify-content: center;
}

@media (max-width: 512px) {
  .share-page__content {
    gap: 28px;
    padding: 20px 16px;
  }
  .share-page__roller.roller {
    --card-size: min(72vw, 320px);
  }
  .share-page__title {
    font-size: 20px;
  }
  .share-page__user {
    font-size: 18px;
  }
  .share-page__meta {
    font-size: 14px;
  }
}