.container {
  background-color: #f9f9f9 !important;
}

.result-container,
.description-container {
  max-width: 580px;
  margin: 0 auto;
}

.main-title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 10px;
}

/* 공통 글박스 스타일 */
.section-box {
  background: #fff;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-bottom: 15px;
}

/* 섹션 박스 내 제목 스타일 (h3) */
.section-box h3 {
  font-size: 1.2rem;
  margin: 0 0 10px;
  font-weight: bold;
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
  text-align: center;
}

/* 애착유형 박스 (이미지, 유형명, 인구비율 등) */
.type-box {
  text-align: center;
}
.result-title {
  font-size: 2.5rem;
  font-weight: bold;
}
.result-percentages {
  font-size: 1.1rem;
  color: #777777;
}

/* 점수 전체를 감싸는 박스 (회피/불안 점수를 한 박스에 2열) */
.score-container {
  display: flex;
  justify-content: space-around;
  gap: 20px; /* 좌우 간격 */
}

/* 각 점수 박스 */
.score-box {
  flex: 1;
  text-align: center;
}

.score-box:not(:first-child) {
  border-left: 1px solid #ddd; /* 회색 세로 구분선 */
  padding-left: 20px; /* 여백 추가 */
}

/* 점수 제목 */
.score-box h2 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

/* 점수 숫자 */
.score {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 5px;
}

/* 상위 몇% 표기 */
.score-percent {
  font-size: 0.95rem;
  color: #555;
}

/* 설명 영역 */
.description-container p {
  margin-bottom: 16px;
}

/* 반응형 */
@media (max-width: 480px) {
  .main-title {
    font-size: 1.2rem;
  }
  .result-title {
    font-size: 1.5rem;
  }
  .score-box h2 {
    font-size: 1.1rem;
  }
  .score {
    font-size: 1.6rem;
  }
  .score-percent {
    font-size: 0.85rem;
  }
}