.record-circle {
  width: 294px;
  height: 294px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: -12px auto 0;
  background-image: image-set(var(--record-circle-2));
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  padding-bottom: 20px;
}

.record-circle h1 {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

.record-circle_time {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.record-circle_time > p {
  font-size: 32px;
  font-weight: 500;
  margin: 0;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 4px;
}

.record-circle_time button {
  position: absolute !important;
  top: 50%;
  left: 100%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  display: none;
}

.record-circle.recording {
  background-image: image-set(var(--record-circle-orange));
}

.record-circle.recorded {
  background-image: image-set(var(--record-circle-green));
}

.record-circle.recorded button {
  display: block;
}

.record-sec {
  margin-top: -80px;
}

.record-sec > p {
  font-weight: normal;
  min-height: 135px;
}

.btn-record.default img.icon-mic {
  display: block;
}

.btn-record.default img.icon-stop {
  display: none;
}

.btn-record.recording img.icon-mic {
  display: none;
}

.btn-record.recording img.icon-stop {
  display: block;
}

.count-popup {
  position: fixed;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  font-size: 100px;
  font-weight: 700;
  color: var(--white);
  display: none;
}

.count-popup_num {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

/*from common.css*/
.audio_circle {
  width: 116px;
  height: 116px;
  background-image: image-set(var(--record-circle-2));
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 auto 20px;
}