html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ff4d1f;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

@property --num {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}
.bg {
  --num: 64;
  box-sizing: border-box;
  display: grid;
  justify-items: center;
  gap: 16px;
  color: #fff7e6;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
}

.bg__dial {
  position: relative;
  display: grid;
  place-items: center;
}

.bg__svg {
  width: clamp(92px, 28vw, 104px);
  height: clamp(92px, 28vw, 104px);
}

.bg__rings {
  transform: rotate(-90deg);
  transform-origin: 52px 52px;
}

.bg__track {
  fill: none;
  stroke: rgba(255, 247, 230, 0.28);
  stroke-width: 12;
}

.bg__ring {
  fill: none;
  stroke: #fff7e6;
  stroke-width: 12;
  stroke-linecap: round;
  stroke-dasharray: 276.46;
  stroke-dashoffset: calc(276.46 * (1 - var(--num) / 100));
  transition: stroke-dashoffset 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bg__check {
  fill: none;
  stroke: #fff7e6;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bg__num {
  position: absolute;
  font-size: clamp(19px, 6vw, 22px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  transition: opacity 220ms ease-out;
}

.bg__num::after {
  counter-reset: n var(--num);
  content: counter(n) "%";
}

.bg.is-done .bg__num {
  opacity: 0;
}

.bg.is-done .bg__check {
  stroke-dashoffset: 0;
}

.bg__btn {
  border: 0;
  border-radius: 999px;
  background: #17141a;
  color: #fff7e6;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  padding: 8px 16px;
  cursor: pointer;
  transition: transform 220ms cubic-bezier(0.2, 1.4, 0.4, 1);
}

.bg__btn:hover, .bg__btn:focus-visible {
  transform: translateY(-2px);
}

.bg.is-demo .bg__ring {
  animation: bg-wind 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

@keyframes bg-wind {
  0% {
    stroke-dashoffset: 276.46;
  }
  35%, 70% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 276.46;
  }
}
.bg.is-demo .bg__check {
  animation: bg-draw 2s ease-out infinite;
}

@keyframes bg-draw {
  0%, 35% {
    stroke-dashoffset: 100;
  }
  50%, 62% {
    stroke-dashoffset: 0;
  }
  72%, 100% {
    stroke-dashoffset: 100;
  }
}
.bg.is-demo .bg__num {
  animation: bg-fade 2s ease-out infinite;
}

@keyframes bg-fade {
  0%, 33% {
    opacity: 1;
  }
  42%, 64% {
    opacity: 0;
  }
  74%, 100% {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bg.is-demo .bg__ring, .bg.is-demo .bg__check, .bg.is-demo .bg__num {
    animation: none !important;
  }
  .bg__ring, .bg__check, .bg__num, .bg__btn {
    transition: none;
  }
}