/* 📌 전체 Intro 섹션 */
/* 📌 intro-section 내부 요소들을 가로 정렬 */
.intro-section {
  display: flex; /* 🔥 플렉스박스 적용 */
  flex-direction: column; /* 🔥 수평 정렬 (가로 배치) */
  justify-content: center; /* 🔥 중앙 정렬 */
  align-items: center; /* 🔥 수직 중앙 정렬 */
  gap: 40px; /* 🔥 요소들 사이 간격 */
}

.intro-frame {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 32px 24px;
  gap: 24px;

  width: 1200px;
  height: auto;

  background: #f4f7f9;
  border: 1px solid #ececec;
  border-radius: 4px;
}

/* 📌 헤더 (섹션 상단) */
.intro-header {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center; /* 🔥 내부 요소 수직 중앙 정렬 */
  padding: 0px 0px 24px;
  gap: 8px;

  width: 1122px;
  height: 64px;

  border-bottom: 1px solid #ececec;
}

/* 📌 노란색 배지 (HPI) */
.intro-badge {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 16px;
  gap: 8px;

  width: 92px;
  height: 40px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 24px;
  color: #ffffff;
  text-align: center;
}

/* 📌 타이틀 (HOGAN PERSONALITY INVENTORY) */
.intro-title {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 🔥 내부 텍스트 수직 중앙 정렬 */
  align-items: flex-start;
  padding: 0px;
  width: 100%;
  height: 100%; /* 🔥 부모 요소의 높이를 따라감 */
  gap: 8px;
}

/* 📌 서브타이틀 */
.intro-subtitle {
  font-weight: 500;
  font-size: 14px;
  line-height: 100%;
  text-align: center;
  color: rgba(31, 38, 44, 0.8);
  margin: 0;
}

/* 📌 설명 (본문) */
.intro-description {
  width: 1122px;
  height: auto;
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: #1f262c;
}

.intro-description p {
  margin: 0 0 12px;
}

.intro-description p:last-child {
  margin-bottom: 0;
}

.bg-yellow {
  background: #fec426;
}

.bg-red {
  background: #e62137;
}

.bg-gray {
  background: #5d8ab5;
}