header {
  padding: 10px;
  border-bottom: 2px solid #ccc; /* 헤더 아래 선 추가 */
}

img {
  max-width: 100%; /* 이미지의 최대 너비를 부모 요소의 100%로 설정 */
  height: auto; /* 비율을 유지하면서 이미지의 높이를 자동 조정 */
  border: 1px solid #ccc; /* 이미지 주변에 테두리 추가 (옵션) */
}

.container {
  display: flex;
  justify-content: center;
  align-items: stretch;
  height: 100vh; /* 뷰포트의 100% 높이를 사용하여 세로 가운데 정렬 */
}

input {
  width: 100%; /* 현재 부모 요소의 100%로 너비를 설정합니다. */
  padding: 12px; /* 원하는 패딩 값을 지정하여 크기를 조절할 수 있습니다. */
  box-sizing: border-box; /* 패딩과 테두리를 포함한 크기로 설정합니다. */
  border: 1px solid #ccc;
  border-radius: 4px;
}

h2 {
  color: #333;
}

p {
  color: #666;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  margin-bottom: 20px;
}

li label {
  font-weight: bold;
}

button {
  padding: 40px 300px; /* 내부 여백을 통해 크기 조절 */
  font-size: 16px; /* 텍스트 크기 조절 */
  font-weight: bold; /* 텍스트에 볼드 적용 */
  display: inline-block; /* 가로 정렬을 위한 인라인 블록 요소로 설정 */
  vertical-align: middle; /* 수직 정렬을 중앙으로 설정 */
  background-color: rgba(31, 30, 30, 0.685); /* 배경색을 빨간색으로 설정 */
  color: white; /* 텍스트 색을 흰색으로 설정 */
  border: none; /* 테두리 제거 */
  border-radius: 10px; /* 라운드 코너를 10px로 설정 */
  cursor: pointer; /* 마우스 오버 시 커서 스타일 변경 */
}

.answer {
  font-size: 12px;
  max-width: 100%;
  width: 1832px;
  height: 140px;
  border: 1px solid black;
  border-radius: 5px;
  padding: 5px;
  margin-left: 9px;
}