@font-face {
  font-family: 'Nanum Gothic';
  src: url('./fonts/NanumGothic-Regular.woff2') format('woff2'),
       url('./fonts/NanumGothic-Regular.woff') format('woff'),
       url('./fonts/NanumGothic-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
  background-color: white;
  display: block;
  max-width: 480px; /* 최대 너비 설정으로 반응형 디자인 개선 */
  margin: auto;
  text-align: center; /* 모든 인라인 요소를 중앙 정렬 */
  font-family: "Nanum Gothic", sans-serif; /* 전체적으로 폰트 스타일 적용 */
  border-radius: 10px;
  box-sizing: border-box;
}

.logo, .header, #main, #result, footer {
  width: 100%; /* 너비를 100%로 설정하여 부모 요소의 너비에 맞게 조정 */
  margin: auto; /* 중앙 정렬 */
}

.logo {
  max-width: 480px; /* 로고 이미지의 최대 너비를 지정 */
  display: block; /* 이미지를 블록 레벨 요소로 만들어 가로 중앙에 배치 */
}

.header {
  position: relative;
}

#main, #result {
  border-radius: 10px;
  padding: 20px 15px;
  background-color: white;
}

#result {
  font-size: 24px;
  line-height: 200%;
}

/* 선택 요소 스타일 개선 */
#aa, #bb, #cc, #dd {
  width: 100%; /* 너비를 100%로 설정하여 부모 요소의 너비에 맞게 조정 */
  max-width: 380px; /* 최대 너비 설정 */
  height: 50px; /* 높이 조정 */
  border: 2px solid #56a099;
  background-color: white;
  padding-left: 10px;
  color: #56a099;
  font-size: 16px; /* 폰트 크기 조정 */
}

/* 버튼 스타일을 단순화하고, 중복 속성을 제거합니다. */
#retry-btn {
  display: block;
  width: 250px; /* 버튼의 너비 */
  margin: 20px auto; /* 버튼을 중앙에 배치하고, 상하 여백 추가 */
  border: none; /* 테두리 제거 */
  border-radius: 30px; /* 둥근 모서리 */
  color: white; /* 글자 색상 */
  background-color: #56a099; /* 배경 색상 */
  font-size: 22px; /* 글자 크기 */
  padding: 10px 0; /* 패딩 */
  text-align: center; /* 텍스트 중앙 정렬 */
  font-weight: bold; /* 글자 두껍게 */
  cursor: pointer; /* 마우스 오버 시 커서 변경 */
  transition: background-color 0.3s; /* 배경 색상 변화 애니메이션 */
}
#retry-btn:hover {
  background-color: #c43d3f;/* 마우스 오버 시 배경 색상 변경 */
}

#share-btn {
  display: block;
  width: 250px; /* 버튼의 너비 */
  margin: 20px auto; /* 버튼을 중앙에 배치하고, 상하 여백 추가 */
  border: none; /* 테두리 제거 */
  border-radius: 30px; /* 둥근 모서리 */
  color: white; /* 글자 색상 */
  background-color: #56a099; /* 배경 색상 */
  font-size: 22px; /* 글자 크기 */
  padding: 10px 0; /* 패딩 */
  text-align: center; /* 텍스트 중앙 정렬 */
  font-weight: bold; /* 글자 두껍게 */
  cursor: pointer; /* 마우스 오버 시 커서 변경 */
  transition: background-color 0.3s; /* 배경 색상 변화 애니메이션 */
}
#share-btn:hover {
  background-color: orange;  /* 마우스 오버 시 배경 색상 변경 */
}

.result-button {
  display: block;
  width: 250px; /* 버튼의 너비 */
  margin: 20px auto; /* 버튼을 중앙에 배치하고, 상하 여백 추가 */
  border: none; /* 테두리 제거 */
  border-radius: 30px; /* 둥근 모서리 */
  color: white; /* 글자 색상 */
  background-color: #56a099; /* 배경 색상 */
  font-size: 22px; /* 글자 크기 */
  padding: 10px 0; /* 패딩 */
  text-align: center; /* 텍스트 중앙 정렬 */
  font-weight: bold; /* 글자 두껍게 */
  cursor: pointer; /* 마우스 오버 시 커서 변경 */
  transition: background-color 0.3s; /* 배경 색상 변화 애니메이션 */
}
.result-button:hover {
  background-color: #c43d3f; /* 마우스 오버 시 배경 색상 변경 */
}

footer {
  width: 480px;
  margin: auto;
  color: #56a099; /* 텍스트 색상 설정 */
  text-align: center;
  font-size: 12px;
  }