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

  background-color: #0d1139;
  background-image: url(../img/bg.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

}

.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-chara {
  position: absolute;
  cursor: pointer;
  opacity: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform .1s linear;
  &:hover {
    transform: scale(1.05);
  }
}

.cd-dialog {
  position: fixed;
  margin: auto;
  aspect-ratio: 1440 / 814;
  width: auto;
  height: auto;
  max-width: min(90svw, 1440px);
  max-height: 80svh;
  border: none;
  box-shadow: 0 0 10px #000000cc;
  z-index: 200;
  background-color: #000;
  font-family: var(--font-jp);
}

.cd-dialog::backdrop {
  background: rgba(0, 0, 0, 0.7);
}

.cd-dialog__close {
  appearance: none;
  border: none;
  outline: none;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 100%;
  background-color: var(--color-red);
  color: #fff;
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1;
  top: 1rem;
  right: 1rem;
  z-index: 1;
  cursor: pointer;
  user-select: none;
}

.cd-dialog__body {
  position: relative;
  height: 100%;
  overflow: hidden;
  .picture {
    position: absolute;
    z-index: -1;
    inset: 0;
    width: 100%;
    height: 100%;
    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: opacity .15s ease;
    }
  }
  .meta {
    display: grid;
    align-content: flex-end;
    grid-gap: .5rem;
    width: 50%;
    height: 100%;
    background-image: linear-gradient(to right, #000, #00000000);
    padding: 0 5% min(5rem, 5vh) min(5rem, 5vw);
    .team {
      aspect-ratio: 420 / 74;
      max-width: 280px;
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
    .catch {
      color: #fff;
      font-size: 16px;
      line-height: 1.5;
      text-shadow: 0 0 2px #00000066;
    }
    .name {
      display: grid;
      grid-gap: .2rem;
      color: #fff;
      text-shadow: 0 0 2px #00000066;
      .ja {
        font-size: 54px;
        line-height: 1.1;
      }
      .en {
        font-size: 20px;
        line-height: 1.5;
      }
    }
    .profile {
      color: #fff;
      font-size: 14px;
      line-height: 1.4;
      white-space: pre-line;
      text-shadow: 0 0 2px #00000066;
    }
  }
  &[data-id="miyaokaryosuke"] {
    .meta {
      padding-right: 10%;
    }
  }
  &[data-id="hiokimasashi"] {
    .meta {
      padding-right: 9%;
    }
  }
  &[data-id="urushibarayuji"] {
    .meta {
      padding-right: 7%;
    }
  }
}

.cd-zoom-controls {
  position: fixed;
  bottom: 1em;
  right: 1em;
  display: flex;
  flex-direction: column;
  gap: .5em;
  z-index: 9999;
}

.cd-zoom-controls button {
  width: 48px;
  height: 48px;
  border: none;
  /* border: 2px solid rgba(255, 255, 255, 0.4); */
  /* border-radius: 50%; */
  background: #B81C2A;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  border-radius: 100%;
  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: #ffffff44;
  cursor: default;
}

@media (hover: hover) {
  .cd-zoom-controls button:not(:disabled):hover {
    background: rgba(184, 28, 42, 0.6);
  }
}

@media (max-width: 991.98px) {
  .cd-dialog {
    aspect-ratio: unset;
    max-width: min(95svw, 800px);
    max-height: 95svh;
  .cd-dialog__close {
    width:  36px;
    height: 36px;
    font-size: 1.4rem;
    top: .5rem;
    right: .5rem;
  }
    .cd-dialog__body {
      overflow: auto;
      .picture {
        display: block;
        position: relative;
        &::after {
          content: '';
          display: block;
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 21svw;
          background-image: linear-gradient(to top, #000, #00000000);
        }
      }
      .meta {
        margin-top: -19svw;
        width: 100%;
        height: unset;
        background-image: unset;
        padding: 0 1rem 2rem;
        .catch {
          color: #fff;
          font-size: 16px;
          line-height: 1.5;
        }
        .name {
          display: grid;
          grid-gap: .2rem;
          color: #fff;
          .ja {
            font-size: 48px;
          }
          .en {
            font-size: 20px;
          }
        }
        .profile {
          font-size: 14px;
        }
      }
    }
  }
  .cd-zoom-controls {
    bottom: .5em;
    right:  .5em;
  }
}