@import url('https://fonts.googleapis.com/css2?family=Grandiflora+One&family=Noto+Sans+KR:wght@100..900&display=swap');

/* CSS 변수 정의 */
:root {
  /* 앱의 주요 테마 색상을 여기에 설정하세요. */
  --main-theme-color: #e98b20;

  /* 폰트 간격을 조정합니다. */
  --title-letter-spacing: -0.05em;
  --subtitle-letter-spacing: -0.025em;
  --main-line-height: 1.6;

  /* 안내 문구 사각 틀의 테두리 스타일을 조정합니다. */
  --guide-border-color: #f0f0f0;
  --guide-border-width: 1px;
  --guide-border-style: solid;
}

/* 제목 폰트 스타일 */
.custom-title {
  font-family: 'Grandiflora One', sans-serif;
  font-weight: bold;
  font-style: normal;
  color: var(--main-theme-color);
  letter-spacing: var(--title-letter-spacing);
}

/* 부제목 폰트 스타일 */
.custom-subtitle {
  font-family: 'Noto Sans KR', sans-serif;
  color: #4a5568;
  font-weight: bold;
  letter-spacing: var(--subtitle-letter-spacing);
}

/* 본문 폰트 스타일 */
.main-text {
  line-height: var(--main-line-height);
  color: black;
}

/* 작은 텍스트 스타일 */
.text-sm {
  color: gray;
  font-size: 10px;
}

/* 특정 클래스 색상 */
.mb-4 {
  color: var(--main-theme-color);
}

/* 안내 문구 사각 틀 스타일 */
#guide-box {
  border-color: var(--guide-border-color);
  border-width: var(--guide-border-width);
  border-style: var(--guide-border-style);
}

/* 결과 버튼 스타일 */
.result-button:disabled {
  background-color: #a0aec0; /* Tailwind gray-400 */
  cursor: not-allowed;
}

/* 버튼 호버 효과 */
.result-button:not(:disabled):hover {
  background-color: #c05621; /* Tailwind orange-700 */
  color:white;
}

/* 라디오 버튼 선택 시 스타일 */
.selected-label .radio-circle {
    background-color: var(--main-theme-color);
    border-color: var(--main-theme-color);
    color: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.selected-label span {
    font-weight: bold;
    color: var(--main-theme-color);
}