/* ═══════════════════════════════════════════════════════════
   CONCERNS — concerns.css
   "예비 점주님들이 항상 하시는 말씀" Q&A 3카드 (세로 스택)
   · 각 카드 = 위[점주 말풍선: 질문+공감, 회색] + 아래[다폰의 답, 골드 강조]
   · section--tint(연노랑) 밴드 → 회색 질문 / 골드 답이 또렷이 구분
   · 등장: scroll-reveal(data-reveal, 반복재생/unobserve 금지)
   · 검정·이모지 금지. 흰/연노랑/골드 톤.
═══════════════════════════════════════════════════════════ */

.concerns {
  scroll-margin-top: 80px;
}
.concerns__head {
  text-align: center;
  margin-bottom: 48px;
}

.concerns__list {
  max-width: 1040px; /* 넓혀서 좌/우 카드 간격(지그재그) 더 크게 */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* ── 한 묶음(질문→답) — 채팅 말풍선 지그재그 ── */
.qa {
  position: relative; /* 캐릭터(절대배치)가 질문+답 묶음 전체에 걸치도록 기준 */
  display: flex;
  flex-direction: column;
  width: 76%; /* 컨테이너보다 좁게 → 좌/우 치우침(지그재그) 폭 확대 */
  max-width: 690px;
}
.qa:nth-child(odd) {
  align-self: flex-start; /* Q1, Q3 왼쪽 */
  padding-left: clamp(186px, 22vw, 256px); /* 왼쪽 캐릭터 칼럼 공간 확보 */
}
.qa:nth-child(even) {
  align-self: flex-end; /* Q2 오른쪽 */
  padding-right: clamp(186px, 22vw, 256px); /* 오른쪽 캐릭터 칼럼 공간 확보 */
}
/* 오른쪽 카드: 말풍선 꼬리·답 들여쓰기 방향을 오른쪽으로 미러링 */
.qa:nth-child(even) .qa__ask::after {
  left: auto;
  right: 44px;
}
.qa:nth-child(even) .qa__answer {
  margin-left: 0;
  margin-right: 28px;
}

/* ── 점주 말풍선 옆 캐릭터 이미지 자리(플레이스홀더) ── */
.qa__ask-row {
  display: flex;
  align-items: center; /* 말풍선과 세로 중앙 정렬 */
  gap: 16px;
  margin-bottom: 20px; /* 답까지 간격(기존 .qa__ask 여백을 row 로 이전) */
}
.qa__ask-row .qa__ask {
  flex: 1;
  min-width: 0;
  margin-bottom: 0; /* 여백은 row 가 담당 → 꼬리/답 간격 동일 유지 */
}
/* 오른쪽 카드(Q2): 캐릭터를 말풍선 오른쪽으로(지그재그 방향 맞춤) */
.qa:nth-child(even) .qa__ask-row {
  flex-direction: row-reverse;
}
/* 캐릭터 — 질문+답 묶음 전체에 걸치는 큰 크기(절대배치, 세로 중앙).
   src="#"(빈 상태)에서도 고정 width/aspect-ratio 로 자리 유지 + 옅은 플레이스홀더 박스 */
.qa__char {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(160px, 20vw, 230px); /* 기존 88~116px → 대폭 확대 */
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 20px;
  background: color-mix(in srgb, var(--gold, #f0c000) 8%, #ffffff);
  border: 1px dashed color-mix(in srgb, var(--gold, #f0c000) 26%, #ffffff);
  color: transparent; /* 빈/깨진 상태의 alt·아이콘 노출 최소화 */
  font-size: 0;
  overflow: hidden;
}
.qa:nth-child(odd) .qa__char {
  left: 0; /* 왼쪽 카드 → 캐릭터 왼쪽 */
}
.qa:nth-child(even) .qa__char {
  right: 0; /* 오른쪽 카드 → 캐릭터 오른쪽 */
}

/* 점주 말풍선 (질문 + 공감) — 회색빛 */
.qa__ask {
  position: relative;
  background: #f1f2f4;
  border: 1px solid #e5e6ea;
  border-radius: 16px;
  padding: 22px 26px;
  margin-bottom: 20px; /* 꼬리 + 답 간격 */
}
/* 말풍선 꼬리 (아래쪽, 답을 향함) */
.qa__ask::after {
  content: '';
  position: absolute;
  left: 44px;
  bottom: -9px;
  width: 18px;
  height: 18px;
  background: #f1f2f4;
  border-right: 1px solid #e5e6ea;
  border-bottom: 1px solid #e5e6ea;
  transform: rotate(45deg);
}
.qa__q {
  font-size: clamp(1.04rem, 1.7vw, 1.2rem);
  font-weight: 800;
  line-height: 1.45;
  color: var(--color-text, #1a1a1a);
  margin: 0 0 8px;
  word-break: keep-all;
}
.qa__empathy {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--color-text-sub, #555);
  margin: 0;
  word-break: keep-all;
}

/* 다폰의 답 — 골드 강조(흰 배경 + 골드 좌측 보더 + 배지) */
.qa__answer {
  position: relative;
  margin-left: 28px; /* 답은 살짝 들여써 본사가 답하는 느낌 */
  background: #ffffff;
  border: 1px solid color-mix(in srgb, var(--gold, #f0c000) 30%, #ffffff);
  border-left: 4px solid var(--gold, #f0c000);
  border-radius: 14px;
  padding: 20px 24px;
  box-shadow: 0 8px 22px rgba(240, 192, 0, 0.12);
}
.qa__badge {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: var(--gold-dark, #c9a000);
  background: color-mix(in srgb, var(--gold, #f0c000) 14%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--gold, #f0c000) 40%, #ffffff);
  border-radius: 999px;
  padding: 3px 12px;
  margin-bottom: 10px;
}
.qa__a {
  font-size: 0.97rem;
  font-weight: 500;
  line-height: 1.7;
  color: var(--color-text, #1a1a1a);
  margin: 0;
  word-break: keep-all;
}
.qa__a em {
  font-style: normal;
  color: var(--gold-dark, #c9a000);
  font-weight: 700;
}

/* ══════════════════════════════════════════════════════════
   반응형
══════════════════════════════════════════════════════════ */
/* 좁은 화면: 지그재그 풀고 세로 1열 풀폭 중앙(좌우 치우침 답답함 방지) */
@media (max-width: 720px) {
  .qa,
  .qa:nth-child(odd),
  .qa:nth-child(even) {
    width: 100%;
    max-width: 100%;
    align-self: stretch;
    padding-left: 0; /* 캐릭터 숨김 → 칼럼 공간 회수 */
    padding-right: 0;
  }
  /* 꼬리·답 들여쓰기 왼쪽 기준으로 복귀 */
  .qa:nth-child(even) .qa__ask::after {
    left: 44px;
    right: auto;
  }
  .qa:nth-child(even) .qa__answer {
    margin-left: 28px;
    margin-right: 0;
  }
  /* 좁은 화면: 캐릭터 숨김(레이아웃 답답함 방지 — 권장) */
  .qa__char {
    display: none;
  }
  .qa:nth-child(even) .qa__ask-row {
    flex-direction: row; /* 한 칸이라 의미 없지만 명시 복귀 */
  }
}

/* 모바일 (44px 터치 여백) */
@media (max-width: 640px) {
  .concerns__head {
    margin-bottom: 36px;
  }
  .concerns__list {
    gap: 26px;
  }
  .qa__ask {
    padding: 18px 20px;
  }
  .qa__answer {
    margin-left: 14px;
    padding: 18px 20px;
  }
}