.custom-btn {
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    background-color: rgb(0, 160, 253);
    color: white;
    border-radius: 10px;
    font-size: 14px;
    border: none;
}
.custom-btn:hover {
    background-color: rgba(0, 160, 253, .8);
    color : white;
}
.custom-red-btn {
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    background-color: rgb(231, 109, 109);
    color: white;
    border-radius: 10px;
    font-size: 14px;
    border: none;
}
.custom-red-btn:hover {
    background-color: rgba(231, 109, 109, .8);
    color : white;
}

/* 공통 BLUE 버튼 스타일 */
.common-btn {
    padding: 5px 10px 5px 10px;

    cursor:pointer;
    box-shadow: rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
    background-color: #e8e8e8;
    
    border-style: solid;
    border-width: 2px;
    border-radius: 10px;

    transition: transform 400ms cubic-bezier(.68,-0.55,.27,2.5), 
    border-color 400ms ease-in-out,
    background-color 400ms ease-in-out;
    word-spacing: -2px;
}

/* 마우스 올렸을 때 효과 */
.common-btn:hover {
    background-color: #eee;
    transform: scale(101%);
    animation: movingBorders 3s infinite;
}

.blue-btn {
    color: var(--main-color);
    border-color: var(--main-color);
}
.blue-btn:hover {
  background-color: var(--main-color);
  border-color: var(--main-color);
  color: white; /* 글자색 변경 */
}
.blue-btn:disabled {
  background-color: var(--main-color);
  border-color: var(--main-color);
  color: white; /* 글자색 변경 */
}

.red-btn {
    color: rgba(255, 51, 51, .8); /* 테두리 색상 */
    border-color: rgba(255, 51, 51, .8); /* 테두리 색상 */
}

/* 마우스 올렸을 때 효과 */
.red-btn:hover {
    background-color: rgba(255, 51, 51, .8); /* 배경색 변경 */
    color: white; /* 글자색 변경 */
}

.neumorph-btn {
    border-radius: 20px;
    border: none;
    outline: none;
    font-size: 14px;
    font-weight: bold;
    padding: 15px 0;
    letter-spacing: 10px;
    cursor: pointer;
    transition: transform 80ms ease-in;

    color : black;

    box-shadow: -5px -5px 10px #fff, 5px 5px 8px #babebc;
}

.neumorph-btn:active,
.neumorph-button:disabled
 {
    box-shadow: inset 1px 1px 2px #babebc, inset -1px -1px 2px #fff;
}

/*━━━━━━━━━ Active-btn (E) ━━━━━━━━━*/
.active-neumorph-button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 25px 20px 22px;
  box-shadow: rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  background-color: #e8e8e8;
  border-color: #ffe2e2;
  border-style: solid;
  border-width: 9px;
  border-radius: 35px;
  font-size: 25px;
  font-weight: 900;
  color: rgb(134, 124, 124);
  font-family: monospace;
  transition: transform 400ms cubic-bezier(.68,-0.55,.27,2.5), 
  border-color 400ms ease-in-out,
  background-color 400ms ease-in-out;
  word-spacing: -2px;
}

@keyframes movingBorders {
  0% {
    border-color: #fce4e4;
  }

  50% {
    border-color: #ffd8d8;
  }

  90% {
    border-color: #fce4e4;
  }
}

.active-neumorph-button:hover {
  background-color: #eee;
  transform: scale(105%);
  animation: movingBorders 3s infinite;
}

.active-neumorph-button svg {
  fill: rgb(255, 110, 110);
  margin-right: 13px;
}

@keyframes beatingHeart {
  0% {
    transform: scale(1);
  }

  15% {
    transform: scale(1.15);
  }

  30% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.15);
  }

  60% {
    transform: scale(1);
  }
}

.active-neumorph-button:hover svg {
  animation: beatingHeart 1.2s infinite;
}
/*━━━━━━━━━ Active-btn (E) ━━━━━━━━━*/

/*━━━━━━━━━ neumorph-black-btn (S) ━━━━━━━━━*/
.neumorph-black-btn {
  color : white;
  border-radius: 10px;
  border: 4px solid #090909;
  background-color: transparent;
  background-image: linear-gradient(145deg, #171717, #444245);
  box-sizing: border-box;
  box-shadow: inset 2px 2px 0 #7d7c7e, inset -2px -2px 0px #1c1c1c;
}

.neumorph-black-btn.active{
  color: rgb(0, 215, 0);
  box-shadow: inset -2px -2px 0 #5e5e5e, inset 2px 2px 0 #1c1c1c;
  border: 4px solid rgb(0, 215, 0);
  animation: animeBorder 0.3s linear alternate-reverse infinite;
}

.neumorph-black-btn.non-active{
  color: rgba(255, 0, 0, 0.883);
  box-shadow: inset -2px -2px 0 #5e5e5e, inset 2px 2px 0 #1c1c1c;
  border: 4px solid rgba(255, 0, 0, 0.883);
  animation: animeBorder-red 0.3s linear alternate-reverse infinite;
}

@keyframes animeBorder {
  to {
    border-color: rgba(0, 215, 0, 0.861);
    color: rgba(0, 215, 0, 0.861);
  }
}

@keyframes animeBorder-red {
  to {
    border-color: rgba(255, 0, 0, 0.757);
    color: rgba(255, 0, 0, 0.757);
  }
}
/*━━━━━━━━━ neumorph=black-btn (E) ━━━━━━━━━*/