/* ================================================
   TOTAL_BBS7 — 자주묻는질문 아코디언 (네이티브 details/summary, JS 없음)
   ================================================ */

.bbs7_qna {
  position: relative;
  width: 100%;
  border-top: 1px solid var(--bbs7-border-color, #e5e7eb);
  border-bottom: 1px solid var(--bbs7-border-color, #e5e7eb);
}

/* 항목 */
.bbs7_item {
  position: relative;
}
.bbs7_item + .bbs7_item {
  border-top: 1px solid var(--bbs7-border-color, #e5e7eb);
}

/* summary(질문 버튼) — 네이티브 마커 제거
   ★ align-items: baseline → Q 라벨이 커져도 텍스트 첫 줄 baseline에 자동 정렬
      (1줄=중앙처럼 보임 / 여러 줄=텍스트 첫 줄 윗선 정렬) */
.bbs7_summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: clamp(8px, calc(0.3125vw + 7px), 12px);
  width: 100%;
  padding: var(--bbs7-summary-padding, clamp(20px, calc(0.78vw + 17.5px), 30px) clamp(56px, calc(0.625vw + 54px), 66px) clamp(20px, calc(0.78vw + 17.5px), 30px) clamp(16px, calc(0.625vw + 14px), 24px));
  background: var(--bbs7-summary-bg, #fff);
  word-break: keep-all;
  transition: background-color 0.3s ease, color 0.3s ease;
  position: relative;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.bbs7_summary::-webkit-details-marker { display: none; }
.bbs7_summary::marker { content: ''; display: none; }

/* + 아이콘 */
.bbs7_icon {
  position: absolute;
  top: 50%;
  right: clamp(16px, calc(0.625vw + 14px), 24px);
  transform: translateY(-50%);
  width: clamp(28px, calc(0.3125vw + 27px), 32px);
  height: clamp(28px, calc(0.3125vw + 27px), 32px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  font-size: clamp(20px, calc(0.625vw + 18px), 28px);
  font-weight: 300;
  line-height: 1;
  transition: color 0.25s ease, transform 0.35s ease;
}
.bbs7_icon::before {
  content: '+';
  display: block;
  transition: transform 0.35s ease;
}
.bbs7_item[open] > .bbs7_summary .bbs7_icon {
  color: var(--bbs7-q-color, var(--primary, #b58c5e));
}
.bbs7_item[open] > .bbs7_summary .bbs7_icon::before {
  content: '−';
  transform: rotate(180deg);
}

/* 활성(열린) summary 배경 */
.bbs7_item[open] > .bbs7_summary {
  background-color: var(--bbs7-active-bg, rgba(0,0,0,0.04));
}

/* Q 라벨
   ★ 정렬 규칙: 1줄=세로 중앙처럼, 2줄+=텍스트 첫 줄 윗선과 자연 정렬
   원리: Q의 line-height를 텍스트(.bbs7_qtxt)와 동일하게 강제 →
         같은 line-box로 baseline 정렬되어 Q를 키워도 첫 줄과 어긋나지 않음.
         font-size 차로 인한 baseline 오차는 translateY로 광학 보정. */
.bbs7_q {
  display: inline-block;
  flex-shrink: 0;
  margin-right: clamp(8px, calc(0.3125vw + 7px), 12px);
  font-size: var(--bbs7-q-size, clamp(18px, calc(0.3125vw + 17px), 22px));
  font-weight: 700;
  /* 텍스트와 동일한 line-height — 1줄 중앙·2줄 윗선 정렬의 핵심 */
  line-height: 1.6;
  color: var(--bbs7-q-color, var(--primary, #b58c5e));
}

/* 질문 텍스트 */
.bbs7_qtxt {
  flex: 1;
  font-size: var(--bbs7-title-size, clamp(15px, calc(0.3125vw + 14px), 19px));
  font-weight: 500;
  line-height: 1.6;
  color: var(--bbs7-title-color, #1f2937);
  transition: color 0.3s ease;
}
.bbs7_item[open] > .bbs7_summary .bbs7_qtxt {
  color: var(--bbs7-q-color, var(--primary, #b58c5e));
}

/* ───── body — JS가 height/opacity 직접 트랜지션 ───── */
.bbs7_body {
  /* 닫힘 상태(open 없음): 숨김 */
  height: 0;
  overflow: hidden;
  opacity: 0;
  background: var(--bbs7-content-bg, #f9fafb);
  border-top: 0 solid var(--bbs7-border-color, #e5e7eb);
}

/* 열린 상태 — JS가 height: auto + opacity 1로 만들어주거나,
   초기 [open]으로 마크업에 박혀있을 때 폴백 표시 */
.bbs7_item[open] > .bbs7_body {
  height: auto;
  opacity: 1;
  border-top-width: 1px;
  background: var(--bbs7-content-active-bg, var(--bbs7-content-bg, #f9fafb));
}

/* 내용 — ★ align-items: baseline (Q/A 정렬 규칙 동일) */
.bbs7_content {
  display: flex;
  align-items: baseline;
  gap: clamp(8px, calc(0.3125vw + 7px), 12px);
  padding: var(--bbs7-content-padding, clamp(20px, calc(0.94vw + 17px), 32px) clamp(16px, calc(0.625vw + 14px), 24px));
  word-break: keep-all;
}

/* A 라벨 — Q와 동일 규칙 (line-height를 답변 텍스트와 맞춤) */
.bbs7_a {
  display: inline-block;
  flex-shrink: 0;
  margin-right: clamp(8px, calc(0.3125vw + 7px), 12px);
  font-size: var(--bbs7-q-size, clamp(18px, calc(0.3125vw + 17px), 22px));
  font-weight: 700;
  /* 답변 텍스트와 동일한 line-height — 1줄 중앙·여러 줄 윗선 정렬 */
  line-height: 1.8;
  color: var(--bbs7-a-color, #1f2937);
}

/* 답변 텍스트 */
.bbs7_atxt {
  flex: 1;
  font-size: var(--bbs7-content-size, clamp(14px, calc(0.234vw + 13.25px), 16px));
  line-height: 1.8;
  color: var(--bbs7-content-color, #4b5563);
}

.bbs7_atxt p { margin: 0; }
.bbs7_atxt p + p { margin-top: 8px; }

/* 빈 상태 */
.bbs7_empty {
  display: block;
  padding: 24px;
  text-align: center;
  color: #999;
}

/* 모바일 */
@media only all and (max-width: 767px) {
  .bbs7_summary {
    padding: 16px 50px 16px 16px;
  }
  .bbs7_content {
    padding: 16px;
  }
  .bbs7_q,
  .bbs7_a {
    font-size: 16px;
  }
  .bbs7_qtxt {
    font-size: 14px;
  }
  .bbs7_atxt {
    font-size: 13px;
  }
  .bbs7_icon {
    right: 14px;
    width: 24px;
    height: 24px;
    font-size: 22px;
  }
}