/* 공통 버튼 스타일 (메인 선택 버튼) */
button {
  background: linear-gradient(135deg, #4c6fff, #00bcd4); /* 블루 + 시안 */
  border: none;
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  color: #ffffff;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
  transition: background 0.25s ease, transform 0.1s ease, box-shadow 0.1s ease;
}

button:hover {
  background: linear-gradient(135deg, #5a7dff, #00d2ff);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4);
}

button:active {
  transform: translateY(0);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.35);
}


/* 선택지 버튼 공통 */
.choiceBtn,
.mbtiChoiceBtn {
  display: block;
  width: 100%;
  margin: 0.35rem 0;
  padding: 0.65rem 0.8rem;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.06); /* 옅은 흰색 */
  color: #f5f7ff;
  text-align: left;
  transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.1s ease;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.choiceBtn:hover,
.mbtiChoiceBtn:hover {
  background-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}

/* 선택된 보기 강조 (보라색 포인트) */
.choiceBtn.selected,
.mbtiChoiceBtn.selected {
  background: linear-gradient(135deg, #ff8a65, #ff6fb1); /* 코랄 + 핑크 */
  color: #ffffff;
}

/* 메인으로 돌아가기 버튼 톤 다운 */
#quizBackBtn,
#mbtiBackBtn,
#resultBackBtn {
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.9rem;
  padding: 0.45rem 1.1rem;
  box-shadow: none;
}

#quizBackBtn:hover,
#mbtiBackBtn:hover,
#resultBackBtn:hover {
  background: rgba(255, 255, 255, 0.16);
}

/* 결과 박스 */
#resultBox {
  margin-top: 0.8rem;
}

#resultTitle {
  margin: 0 0 0.5rem;
  font-size: 1.3rem;
  color: #ffdeff;
}

#resultText {
  margin-bottom: 0.8rem;
  font-size: 0.95rem;
  color: #071166;
}