@property --fill {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
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);
}

.dk {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
}

.dk__ring {
  position: relative;
  width: 168px;
  height: 168px;
  flex: 0 0 auto;
}

.dk__ticks {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(from 224deg, rgba(23, 20, 26, 0.85) 0 1.6deg, rgba(23, 20, 26, 0) 1.6deg 27deg);
}

.dk__arc {
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: conic-gradient(from 225deg, rgba(23, 20, 26, 0.82) 0 calc(var(--fill, 0) * 270deg), rgba(23, 20, 26, 0.1) calc(var(--fill, 0) * 270deg) 270deg, rgba(23, 20, 26, 0) 270deg 360deg);
}

.dk__needle {
  position: absolute;
  inset: 0;
  transform: rotate(calc(var(--angle, -135) * 1deg));
}

.dk__needle::before {
  content: "";
  position: absolute;
  top: 2px;
  left: calc(50% - 2px);
  width: 4px;
  height: 14px;
  border-radius: 999px;
  background: #17141a;
}

.dk__knobWrap {
  position: absolute;
  inset: 30px;
  display: grid;
  place-items: center;
}

.dk__knob {
  position: relative;
  width: 108px;
  height: 108px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: grab;
  touch-action: none;
  font-family: inherit;
  transform: rotate(calc(var(--angle, -135) * 1deg));
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  background: repeating-conic-gradient(rgba(23, 20, 26, 0.24) 0 5deg, rgba(23, 20, 26, 0.05) 5deg 11deg), linear-gradient(145deg, rgba(255, 247, 230, 0.55), rgba(23, 20, 26, 0.28)), #ffffff;
  box-shadow: 0 10px 18px rgba(23, 20, 26, 0.35), inset 0 2px 2px rgba(255, 247, 230, 0.55);
}

.dk__knob:active {
  cursor: grabbing;
}

.dk__knob:focus-visible {
  outline: 2px solid #17141a;
  outline-offset: 3px;
}

.dk__knob::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(23, 20, 26, 0.2)), #ffffff;
  box-shadow: inset 0 -3px 8px rgba(23, 20, 26, 0.22), inset 0 2px 2px rgba(255, 255, 255, 0.8);
}

.dk__knob::after {
  content: "";
  position: absolute;
  top: 8px;
  left: calc(50% - 2.5px);
  width: 5px;
  height: 26px;
  border-radius: 999px;
  background: #17141a;
}

.dk__scaleMin, .dk__scaleMax {
  position: absolute;
  top: 128px;
  font-weight: 800;
  font-size: 11px;
  line-height: 1;
  color: #17141a;
}

.dk__scaleMin {
  left: 2px;
}

.dk__scaleMax {
  right: 2px;
}

.dk__side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.dk__label {
  margin: 0;
  font-weight: 800;
  font-size: clamp(11px, 2.8vw, 13px);
  line-height: 1;
  letter-spacing: 0.22em;
  color: #17141a;
}

.dk__readout {
  position: relative;
  margin: 0;
  height: 44px;
  min-width: 108px;
}

.dk__value {
  display: flex;
  align-items: center;
  font-weight: 800;
  font-size: clamp(28px, 7.5vw, 38px);
  line-height: 1;
  color: #17141a;
}

.dk__demoDigits {
  display: none;
  position: absolute;
  inset: 0;
}

.dk__digit {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  font-style: normal;
  font-weight: 800;
  font-size: clamp(28px, 7.5vw, 38px);
  line-height: 1;
  color: #17141a;
}

.dk__hint {
  margin: 0;
  font-weight: 700;
  font-size: clamp(9px, 2.4vw, 11px);
  line-height: 1.5;
  color: #17141a;
}

.dk.is-demo .dk__needle, .dk.is-demo .dk__knob {
  animation-name: dkSweep;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  animation-iteration-count: infinite;
}

@keyframes dkSweep {
  0% {
    transform: rotate(-135deg);
  }
  45% {
    transform: rotate(135deg);
  }
  50% {
    transform: rotate(135deg);
  }
  95% {
    transform: rotate(-135deg);
  }
  100% {
    transform: rotate(-135deg);
  }
}
.dk.is-demo {
  animation-name: dkFill;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes dkFill {
  0% {
    --fill: 0;
  }
  45% {
    --fill: 1;
  }
  50% {
    --fill: 1;
  }
  95% {
    --fill: 0;
  }
  100% {
    --fill: 0;
  }
}
.dk.is-demo .dk__value {
  visibility: hidden;
}

.dk.is-demo .dk__demoDigits {
  display: block;
}

.dk.is-demo .dk__digit {
  opacity: 0;
  animation-duration: 2s;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}

.dk.is-demo .dk__digit--0 {
  animation-name: dkDigit-0;
}

.dk.is-demo .dk__digit--1 {
  animation-name: dkDigit-1;
}

.dk.is-demo .dk__digit--2 {
  animation-name: dkDigit-2;
}

.dk.is-demo .dk__digit--3 {
  animation-name: dkDigit-3;
}

.dk.is-demo .dk__digit--4 {
  animation-name: dkDigit-4;
}

.dk.is-demo .dk__digit--5 {
  animation-name: dkDigit-5;
}

@keyframes dkDigit-0 {
  0% {
    opacity: 1;
  }
  9% {
    opacity: 0;
  }
  86% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes dkDigit-1 {
  0% {
    opacity: 0;
  }
  9% {
    opacity: 1;
  }
  18% {
    opacity: 0;
  }
  77% {
    opacity: 1;
  }
  86% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes dkDigit-2 {
  0% {
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  27% {
    opacity: 0;
  }
  68% {
    opacity: 1;
  }
  77% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes dkDigit-3 {
  0% {
    opacity: 0;
  }
  27% {
    opacity: 1;
  }
  36% {
    opacity: 0;
  }
  59% {
    opacity: 1;
  }
  68% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes dkDigit-4 {
  0% {
    opacity: 0;
  }
  36% {
    opacity: 1;
  }
  45% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  59% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes dkDigit-5 {
  0% {
    opacity: 0;
  }
  45% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@media (max-width: 340px) {
  .dk {
    gap: 12px;
  }
  .dk__ring {
    width: 128px;
    height: 128px;
  }
  .dk__arc {
    inset: 5px;
  }
  .dk__knobWrap {
    inset: 24px;
  }
  .dk__knob {
    width: 80px;
    height: 80px;
  }
  .dk__knob::after {
    height: 19px;
    top: 6px;
  }
  .dk__needle::before {
    height: 11px;
  }
  .dk__scaleMin, .dk__scaleMax {
    top: 98px;
    font-size: 9px;
  }
  .dk__readout {
    height: 36px;
    min-width: 84px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dk.is-demo .dk__needle {
    animation: none !important;
    transform: rotate(-135deg) !important;
  }
  .dk.is-demo .dk__knob {
    animation: none !important;
    transform: rotate(calc(var(--angle, -135) * 1deg)) !important;
  }
  .dk.is-demo {
    animation: none !important;
    --fill: 0 !important;
  }
  .dk.is-demo .dk__value {
    visibility: visible !important;
  }
  .dk.is-demo .dk__demoDigits {
    display: none !important;
  }
}