.plp_title h1 {
  font-size: 17px;
  margin-bottom: 20px;
  font-weight: 700;
}

.plp_title p {
  font-size: 12px;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
  font-weight: 400;
}

.plp_title strong {
  font-weight: 700;
}

.bst_new_section {
  padding: 20px 20px;
  text-align: center;
  font-family: "Balaan", sans-serif;
}
.product_lineup_button,
.faq_button {
  text-align: center;
  margin-bottom: 72px;
}

.bst_new_section h2 {
  padding: 60px 0 0;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
}

.bst_new_section p {
  font-size: 14px;
  line-height: 1.6;
  max-width: 500px;
  margin: 0 auto;
  font-weight: 400;
}

.bst_new_section p:first-of-type {
  margin-bottom: 10px;
}

.bst_new_section a.content_button,
.content_button {
  display: inline-block;
  padding: 15px 30px;
  background-color: transparent;
  color: #000000; /* Button text color */
  text-decoration: none;
  border: 2px solid #000000; /* Border color and thickness */
  border-radius: 0; /* No border radius for rectangular shape */
  font-size: 18px;
  font-weight: bold;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.bst_new_section a.content_button:hover,
.content_button:hover {
  background-color: #000000; /* Background color on hover */
  color: white; /* Text color on hover */
  border-color: #000000; /* Border color on hover */
}

.product_lineup,
.faq_section {
  padding: 20px 20px;
  text-align: left;
  font-family: "Balaan", sans-serif;
}

.product_lineup h2,
.faq_section h2 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
  margin-top: 20px;
}

.product_lineup h3,
.faq_section h3 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 10px;
}

.product_lineup p,
.faq_section p {
  font-size: 14px;
  line-height: 1.6;
  max-width: 500px;
  margin: 0 auto;
  font-weight: 400;
}

.faq_list,
.product_list_item {
  border-top: 1px solid #e5e5e5; /* 위쪽 선 */
  padding: 17px 0; /* 선과 내용 사이의 여백 */
}

.product_description {
  text-align: center;
  margin-bottom: 72px;
}

.faq_list {
  cursor: pointer; /* 클릭 가능한 영역임을 나타냄 */
  position: relative;
}
.faq_list.active {
  border-top: 2px solid #000000; /* 활성화된 항목 위쪽에 두꺼운 선 추가 */
}

.faq_list p {
  padding-top: 20px;
}

.faq_list h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding-right: 2rem; /* 화살표 아이콘을 위한 여백 */
  overflow: hidden; /* 글씨가 넘칠 때 겹쳐 보이지 않도록 */
  text-overflow: ellipsis; /* 넘치는 텍스트를 생략 부호로 표시 */
  position: relative; /* 화살표 아이콘의 위치 조정을 위해 필요 */
}

.faq_list h3:after {
  content: "";
  width: 1.6rem;
  height: 1.6rem;
  background: url("https://i.balaan.io/mobile/img/icons/icon-arrow-up-20.svg") no-repeat center center;
  background-size: contain;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(180deg); /* 기본적으로 아래쪽을 가리킴 */
  transition: transform 0.3s;
}

.faq_list.active h3:after {
  transform: translateY(-50%) rotate(0deg); /* 클릭 시 위쪽을 가리킴 */
}

.faq_list p {
  display: none; /* 기본적으로 숨김 */
}

.faq_list.active p {
  display: block; /* active 클래스가 추가되면 표시 */
}

.product_list_item,
.faq_list {
  display: none; /* 기본적으로 숨김 */
}

.product_list_item.visible,
.faq_list.visible {
  display: block; /* 토글 시 표시 */
}
