/* index.css */
@font-face {
  font-family: "HancomMalangMalang-Regular";
  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/2406-1@1.0/HancomMalangMalang-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

*:not(i) {
  font-family: "HancomMalangMalang-Regular" !important;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  color: inherit;
}

body {
  margin: 0;
  background-color: transparent; /* HUD 위에 투명 배경 */
  display: grid;
  place-items: center;
  height: 100vh;
  font-family: Tahoma, Arial, sans-serif;
}

.skillcheck {
  position: relative;
  width: 260px;
  height: 260px;
}
svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* 진행도 링 */
.progress-ring {
  stroke: #0f0; /* 초록색 */
  stroke-width: 4; /* 얇게 */
  fill: none;
  opacity: 0.9;
  stroke-linecap: round; /* 끝 둥글게 */
  filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 2px #000); /* 검은 외곽 */
  transition: stroke-dashoffset 0.28s ease-out; /* 부드럽게 차오름 */
}

/* 본체 링/존/바늘 */
.ring,
.zone,
.great,
.needle-line {
  filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 2px #000);
}
.ring {
  stroke: #fff;
  stroke-width: 3;
  fill: none;
}
.zone {
  stroke: #fff;
  stroke-width: 10;
  stroke-linecap: butt;
  fill: none;
}
.great {
  stroke: #fff;
  stroke-width: 4;
  stroke-linecap: butt;
  fill: none;
  opacity: 0.75;
}
.needle-line {
  stroke: #ff2a2a;
  stroke-width: 4;
  stroke-linecap: round;
}

/* 중앙 키 라벨 */
.key-pill {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid #fff;
  border-radius: 10px;
  padding: 6px 16px;
  color: #fff;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0.5px;
  background: transparent;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 0 3px #000) drop-shadow(0 0 3px #000);
}

/* 상태 색상 */
.good {
  stroke: #a4ffb0 !important;
}
.greatGlow {
  stroke: #8ae1ff !important;
}
.fail {
  stroke: #ff4d4f !important;
}