/* 스티커 그림 자르기와 종이 떼기(peel.js).
   css/ 의 파일은 index.html 에서 번호 순서대로 겹쳐 적용된다(뒤 파일이 앞 파일을 덮는다). 순서를 바꾸지 말 것. */

.composite-sticker {
  position: absolute;
  display: block;
  z-index: 2;
  pointer-events: none;
}
.picture-side.ending-scene {
  grid-template-columns: minmax(0, 1fr);
}

.item-crop {
  width: 100%;
  position: relative;
  display: block;
  overflow: hidden;
}
.item-crop > img {
  position: absolute !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  margin: 0 !important;
}
#sticker-art {
  display: block;
  width: 100%;
}
#sticker-art > img {
  width: 100%;
  height: 85px;
  object-fit: contain;
}
/* The backing sheet remains while its illustrated layer curls away. */
#sticker-art {
  position: relative;
  border-radius: 9px;
  background: repeating-linear-gradient(135deg, #f8f4e9 0 5px, #f1eddf 5px 6px);
}
#sticker-art.paper-lifted > * {
  visibility: hidden;
}
.paper-peel {
  position: fixed;
  z-index: 200;
  pointer-events: none;
  transform-origin: center;
  filter: drop-shadow(0 5px 3px #30271d25);
}
.paper-front,
.paper-fold-clip,
.paper-back,
.paper-shadow {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
}
.paper-fold-clip {
  overflow: visible;
}
.paper-back {
  filter: brightness(0) invert(0.96) sepia(0.16);
  filter: brightness(0) invert(0.96) sepia(0.16) drop-shadow(1px 1px 1px #8d8069);
}
.paper-shadow {
  filter: brightness(0) blur(2px);
  opacity: 0.23;
}
.paper-peel .item-crop {
  width: 100%;
  height: 100% !important;
  aspect-ratio: auto !important;
}
.paper-peel > div > img,
.paper-back > img,
.paper-shadow > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.paper-floating {
  filter: drop-shadow(4px 15px 7px #30271d38);
}
.paper-press {
  filter: drop-shadow(0 1px 1px #30271d22);
}
@media (prefers-reduced-motion: reduce) {
  .scene-layer#after {
    transition: none;
  }
}