.tangram-loader {
    width: 200px;
    height: 200px;
    margin: 50px auto;
    display: block;
  }

  .piece {
    transform-box: fill-box;
    transform-origin: center;
    animation: moveIn 1.5s ease-in-out forwards; /* 무한 반복 제거, 마지막 프레임 유지 */
    opacity: 0;
  }

  .piece1 {
    fill: #e74c3c;
    transform: translate(-100px, -100px);
    animation-delay: 0s;
  }
  .piece2 {
    fill: #3498db;
    transform: translate(100px, -100px);
    animation-delay: 0.1s;
  }
  .piece3 {
    fill: #f1c40f;
    transform: translate(-100px, 100px);
    animation-delay: 0.2s;
  }
  .piece4 {
    fill: #2ecc71;
    transform: translate(0, 100px);
    animation-delay: 0.3s;
  }
  .piece5 {
    fill: #9b59b6;
    transform: translate(100px, 100px);
    animation-delay: 0.4s;
  }
  .piece6 {
    fill: #1abc9c;
    transform: translate(50px, -100px);
    animation-delay: 0.5s;
  }
  .piece7 {
    fill: #e67e22;
    transform: translate(-50px, -100px);
    animation-delay: 0.6s;
  }

  @keyframes moveIn {
    0% {
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
    100% {
      transform: translate(0, 0);
      opacity: 1;
    }
  }