.cd-wrapper {
  position: relative;
  overflow: hidden;
  width: 100svw;
  height: 100svh;

  background: black;

}

.cd-loader {
  position: fixed;
  inset: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.cd-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  animation: cd-spin 0.8s linear infinite;
}

@keyframes cd-spin {
  to { transform: rotate(360deg); }
}

.cd-viewport {
  width:  100svw;
  height: 100svh;
  overflow: hidden;
  position: relative;
  cursor: grab;
}

.cd-viewport.dragging {
  cursor: grabbing;
}

.cd-canvas {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  /* width / height は JS で img.naturalWidth/Height px に設定 */
}

.cd-canvas > img {
  display: block;
  width: max-width;
  height: auto;
  aspect-ratio: 2600 / 1900;
  object-fit: contain;
  max-width: none;
  max-height: none;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0;
}

.cd-sticker,
.cd-menu {
  position: absolute;
  cursor: pointer;
  opacity: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: rotate(var(--cd-rotate, 0deg));
  transform-origin: center;
}

.cd-menu {
  appearance: none;
  border: none;
  padding: 0;
  background-color: transparent;
  transition: transform 0.2s ease;
}

@media (hover: hover) {
  .cd-menu:not(.cd-menu--hover-swap):hover {
    transform: rotate(var(--cd-rotate, 0deg)) scale(1.1);
  }
}
.cd-menu:not(.cd-menu--hover-swap).is-tapped {
  transform: rotate(var(--cd-rotate, 0deg)) scale(1.1);
}

.cd-menu--hover-swap::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--cd-peel-bg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: all 0.2s cubic-bezier(0.5, 0, 0.84, 0);
  transform-origin: 0 0;
  pointer-events: none;
}
@media (hover: hover) {
  .cd-menu--hover-swap:hover::after {
    transform: translate(-30%, -30%) rotate(-30deg);
    opacity: 0;
  }
}
.cd-menu--hover-swap.is-tapped::after {
  transform: translate(-30%, -30%) rotate(-30deg);
  opacity: 0;
}
.cd-sticker {
  transition: opacity 0.2s ease;
}

@media (hover: hover) {
  .cd-sticker:hover {
    animation: cd-sway 1s ease-in-out infinite;
  }
}
.cd-sticker.is-tapped {
  animation: cd-sway 1s ease-in-out infinite;
}

.cd-modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.cd-modal-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

.cd-modal-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
  background: #fff;
  border-radius: 8px;
  padding: 24px;
}

.cd-modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  appearance: none;
  border: none;
  background: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.cd-zoom-controls {
  position: fixed;
  bottom: 38px;
  right: 0px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
}

.cd-zoom-controls button {
  width: 48px;
  height: 48px;
  border: none;
  background: #272727;
  color: var(--vivant-color-primary);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.15s, opacity 0.15s, color 0.15s;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.cd-zoom-controls button:disabled {
  color: #000;
  cursor: default;
}

/* ステッカー個別 */
@media (hover: hover) {
  .cd-sticker[data-id="kuruma"]:hover {
    animation: cd-drive-away-ur 2s cubic-bezier(0.2, 0.95, 0.1, 1);
  }
  .cd-sticker[data-id="kuruma-2"]:hover {
    animation: cd-drive-away-ul 2s cubic-bezier(0, 0.95, 0.1, 1);
  }
  .cd-sticker[data-id="vivant-chan-c"]:hover {
    animation: cd-pop-sway-ur 3s linear infinite;
  }
  .cd-sticker[data-id="vivant-chan-a-3"]:hover {
    animation: cd-pop-sway-dr 3s linear infinite;
  }
  .cd-sticker[data-id="vivant-chan-a-2"]:hover {
    animation: cd-pop-sway-dl 3s linear infinite;
  }
  .cd-sticker[data-id="vivant-chan-b"]:hover {
    animation: cd-vivant-chan-switch 1s ease infinite;
  }
}

/* ステッカー個別: SP */
.cd-sticker[data-id="kuruma"].is-tapped {
  animation: cd-drive-away-ur 2s cubic-bezier(0.2, 0.95, 0.1, 1);
}
.cd-sticker[data-id="kuruma-2"].is-tapped {
  animation: cd-drive-away-ul 2s cubic-bezier(0, 0.95, 0.1, 1);
}
.cd-sticker[data-id="vivant-chan-c"].is-tapped {
  animation: cd-pop-sway-ur 3s linear infinite;
}
.cd-sticker[data-id="vivant-chan-a-3"].is-tapped {
  animation: cd-pop-sway-dr 3s linear infinite;
}
.cd-sticker[data-id="vivant-chan-a-2"].is-tapped {
  animation: cd-pop-sway-dl 3s linear infinite;
}
.cd-sticker[data-id="vivant-chan-b"].is-tapped {
  animation: cd-vivant-chan-switch 1s ease infinite;
}

@media (hover: hover) {
  .cd-zoom-controls button:not(:disabled):hover {
    background: rgba(255, 255, 255, 0.2);
  }
}

/* 揺れる */
@keyframes cd-sway {
  0%, 100% {
    transform: rotate(var(--cd-rotate, 0deg));
  }
  25% {
    transform: rotate(calc(var(--cd-rotate, 0deg) - 5deg));
  }
  75% {
    transform: rotate(calc(var(--cd-rotate, 0deg) + 5deg));
  }
}

/* 右上 */
@keyframes cd-drive-away-ur {
  0% {
    transform: translate(0, 0) rotate(var(--cd-rotate));
    opacity: 1;
  }
  20% {
    transform: translate(-10px, 10px) rotate(var(--cd-rotate));
    opacity: 1;
  }
  75% {
    transform: translate(80vw, -50vh) rotate(var(--cd-rotate));
    opacity: 0;
  }
  76% {
    transform: translate(0, 0) rotate(var(--cd-rotate));
    opacity: 0;
  }
  100% {
    transform: translate(0, 0) rotate(var(--cd-rotate));
    opacity: 1;
  }
}

/* 左上 */
@keyframes cd-drive-away-ul {
  0% {
    transform: translate(0, 0) rotate(var(--cd-rotate));
    opacity: 1;
  }
  20% {
    transform: translate(10px, 10px) rotate(var(--cd-rotate));
    opacity: 1;
  }
  75% {
    transform: translate(-80vw, -50vh) rotate(var(--cd-rotate));
    opacity: 0;
  }
  76% {
    transform: translate(0, 0) rotate(var(--cd-rotate));
    opacity: 0;
  }
  100% {
    transform: translate(0, 0) rotate(var(--cd-rotate));
    opacity: 1;
  }
}

@keyframes cd-pop-sway-ur {
  0% {
    transform: rotate(var(--cd-rotate, 0deg));
    animation-timing-function: cubic-bezier(0.05, 0.9, 0.1, 1.2);
  }
  10% {
    transform: translate(16px, -12px) scale(1.12) rotate(calc(var(--cd-rotate, 0deg) + 2deg));
    animation-timing-function: ease-in-out;
  }
  25%, 100% {
    transform: translate(16px, -12px) scale(1.12) rotate(calc(var(--cd-rotate, 0deg) - 5deg));
  }
  37.5% {
    transform: translate(16px, -12px) scale(1.12) rotate(calc(var(--cd-rotate, 0deg) + 5deg));
  }
  50% {
    transform: translate(16px, -12px) scale(1.12) rotate(calc(var(--cd-rotate, 0deg) - 5deg));
  }
  62.5% {
    transform: translate(16px, -12px) scale(1.12) rotate(calc(var(--cd-rotate, 0deg) + 5deg));
  }
  75% {
    transform: translate(16px, -12px) scale(1.12) rotate(calc(var(--cd-rotate, 0deg) - 5deg));
  }
  87.5% {
    transform: translate(16px, -12px) scale(1.12) rotate(calc(var(--cd-rotate, 0deg) + 5deg));
  }
}

@keyframes cd-pop-sway-dr {
  0% {
    transform: rotate(var(--cd-rotate, 0deg));
    animation-timing-function: cubic-bezier(0.05, 0.9, 0.1, 1.2);
  }
  10% {
    transform: translate(12px, 12px) scale(1.12) rotate(calc(var(--cd-rotate, 0deg) + 2deg));
    animation-timing-function: ease-in-out;
  }
  25%, 100% {
    transform: translate(12px, 12px) scale(1.12) rotate(calc(var(--cd-rotate, 0deg) - 5deg));
  }
  37.5% {
    transform: translate(12px, 12px) scale(1.12) rotate(calc(var(--cd-rotate, 0deg) + 5deg));
  }
  50% {
    transform: translate(12px, 12px) scale(1.12) rotate(calc(var(--cd-rotate, 0deg) - 5deg));
  }
  62.5% {
    transform: translate(12px, 12px) scale(1.12) rotate(calc(var(--cd-rotate, 0deg) + 5deg));
  }
  75% {
    transform: translate(12px, 12px) scale(1.12) rotate(calc(var(--cd-rotate, 0deg) - 5deg));
  }
  87.5% {
    transform: translate(12px, 12px) scale(1.12) rotate(calc(var(--cd-rotate, 0deg) + 5deg));
  }
}

@keyframes cd-pop-sway-dl {
  0% {
    transform: rotate(var(--cd-rotate, 0deg));
    animation-timing-function: cubic-bezier(0.05, 0.9, 0.1, 1.2);
  }
  10% {
    transform: translate(-16px, 12px) scale(1.12) rotate(calc(var(--cd-rotate, 0deg) - 2deg));
    animation-timing-function: ease-in-out;
  }
  25%, 100% {
    transform: translate(-16px, 12px) scale(1.12) rotate(calc(var(--cd-rotate, 0deg) - 5deg));
  }
  37.5% {
    transform: translate(-16px, 12px) scale(1.12) rotate(calc(var(--cd-rotate, 0deg) + 5deg));
  }
  50% {
    transform: translate(-16px, 12px) scale(1.12) rotate(calc(var(--cd-rotate, 0deg) - 5deg));
  }
  62.5% {
    transform: translate(-16px, 12px) scale(1.12) rotate(calc(var(--cd-rotate, 0deg) + 5deg));
  }
  75% {
    transform: translate(-16px, 12px) scale(1.12) rotate(calc(var(--cd-rotate, 0deg) - 5deg));
  }
  87.5% {
    transform: translate(-16px, 12px) scale(1.12) rotate(calc(var(--cd-rotate, 0deg) + 5deg));
  }
}

@keyframes cd-vivant-chan-switch {
  0%, 49.9% {
    background-image: url(../img/sticker/sticker/sticker-vivant-chan-b.webp);
  }
  50%, 100% {
    background-image: url(../img/sticker/sticker/sticker-vivant-chan-a.webp);
  }
}