/*
  style.css

  KIIP 예비시험 연습 사이트를 위한 기본 스타일시트입니다. 간결하고 깔끔한 UI를
  제공하기 위해 레이아웃과 버튼, 결과 표시 등에 대한 스타일을 정의합니다. 필요에 따라
  테마 색상이나 폰트를 조정할 수 있습니다.
*/

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f5f8fa;
  color: #333;
}

header {
  background-color: #0A2239;
  color: white;
  padding: 20px;
  text-align: center;
}

main {
  padding: 20px;
  max-width: 1200px;
  margin: auto;
}

main > p:first-child {
  text-align: center;
  font-size: 120%;
  margin-top: 40px;
}

/* 인덱스 페이지 테스트 카드 레이아웃 */
.test-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 60px;
  min-height: 500px;
}

.test-card {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.test-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.test-card h2 {
  margin: 0 0 10px;
}

.test-card p {
  font-size: 130%;
  margin-top: 45px;
}

.logo {
  display: block;
  margin: 50px auto;
  width: 150px;
}

/* 시험 페이지 요소 스타일 */
.question {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.question h3 {
  margin-top: 0;
  font-size: 1.1em;
  white-space: pre-line;
  line-height: 2;
}

.options {
  margin-top: 10px;
}

.options label {
  display: block;
  margin-bottom: 8px;
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.options input[type="radio"] {
  margin-right: 8px;
}

/* 정답과 오답을 구분하기 위한 색상 */
.correct-answer {
  background-color: #e7ffe7;
  border: 1px solid #64c864;
}

.incorrect-answer {
  background-color: #ffe7e7;
  border: 1px solid #c86464;
}

.controls {
  margin-top: 30px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.controls button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-color: #0A2239;
  color: white;
  transition: background-color 0.2s ease;
}

.controls button:hover {
  background-color: #174C88;
}

.result {
  margin-top: 20px;
  padding: 15px;
  background-color: #f7f9fb;
  border-left: 4px solid #0A2239;
  display: none;
}

.result h4 {
  margin: 0 0 10px;
}