클론코딩 중 오류가 나서 질문드립니다

                <ul class="input-area">
                      <!-- radio 버튼 (공백 표시) -->
                      <li class="gender-selection">
                          <!-- 남자 선택 버튼 영역 -->
                          <label class="radio-button-entire" for="gender-man">
                              <input id="gender-man" name="gender" type="radio" class="radio-button-input" value="MALE" onclick="checkOnlyOne(this)"/>
                            <!-- 버튼만 해당 -->
                            <span class="radio-button">
                                <!-- 체크할 때 안에 버튼 표시 영역 -->
                                <div class="radio-button-inner-area"></div>
                            </span>
                              <span aria-labelledby="gender-man" class="button-text-area">남자</span>
                          </label>
                          <!-- 여자 선택 버튼 영역 -->
                          <label class="radio-button-entire" for="gender-woman">
                              <input id="gender-woman" name="gender" type="radio" class="radio-button-input" value="FEMALE" onclick="checkOnlyOne(this)"/>
                              <!-- 버튼만 해당 -->
                              <span class="radio-button">
                                <!-- 체크할 때 안에 버튼 표시 영역 -->
                                <div class="radio-button-inner-area"></div>
                            </span> 
                            <span aria-labelledby="gender-woman" class="button-text-area">여자</span>
                          </label>
                          <!-- 선택안함의 버튼 영역 -->
                          <label class="radio-button-entire" for="gender-none">
                              <input id="gender-none" name="gender" type="radio" class="radio-button-input" value="NONE" onclick="checkOnlyOne(this)"/>
                              <!-- 버튼만 해당 -->
                              <span class="none-checked-button-area">
                                <!-- 체크할 때 안에 버튼 표시 영역 -->
                                <div class="none-checked-inner-area"></div>
                             </span>
                            <span aria-labelledby="gender-none" class="button-text-area">선택안함</span>
                          </label>
                        </li>
                    </ul>
                  <!-- 버튼 자리(레이아웃 체크용) -->
                  <span class="button-area-space"></span>
                </ul>

이건 html

.gender-selection {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}

.radio-button-entire {
  position: relative;
  display: flex;
  align-items: center;
  padding: 12px 0px 9px;
}

 input[type=checkbox], input[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

.radio-button-inner-area {
  width: 10px;
  height: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.gender-selection > label > span {
  font-size: 14px;
}

.button-text-area {
  position: relative;
  font-size: 16px;
  margin-left: 12px;
}

.radio-button-input {
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(0px, 0px, 0px, 0px);
}

.radio-button {
  min-width: 24px;
  min-height: 24px;
  display: inline-block;
  position: relative;
  border-radius: 50%;
  background-color: white;
  border: 1px solid rgb(221, 221, 221);
}

.none-checked-button-area {
  min-width: 24px;
  min-height: 24px;
  display: inline-block;
  position: relative;
  border-radius: 50%;
  background-color: rgb(95, 0, 128);
}

.none-checked-inner-area {
  width: 10px;
  height: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: white;
}

이건 css코드입니다

css 입힌 상태에서는 라디오 버튼이 눌리지도 않고 있는데 문제가 뭘까요?

구글링을 해봐도 당최 나오지를 않아서 질문 드립니다