/* ============================================================
   ENDOLPHIN — 엔치원 Q&A 스타일 (공통)
   ------------------------------------------------------------
   Q&A 페이지와 소개관이 같이 씁니다.
   ⚠️ 색·모서리·그림자는 기존 토큰(theme.css)만 씁니다.
      새 디자인 체계를 만들지 않았습니다.
   ⚠️ 소개관은 어두운 배경이라 색이 반대입니다. 그쪽 색 보정은
      소개관 CSS(intro.css / intro-mobile.css)의 .scene--qa 안에만
      두었습니다 — 이 파일은 밝은 화면 기준입니다.
   ============================================================ */

.qa-list{ display:grid; gap:10px; margin-top:18px; }

.qa-item{
  border:1.5px solid var(--line); border-radius:14px;
  background:var(--surface); overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.qa-item.on{ border-color:rgba(255,143,177,.55); box-shadow:var(--shadow); }

/* ── 질문 (누르는 곳) ─────────────────────────────────── */
.qa-q{
  width:100%; display:flex; align-items:flex-start; gap:11px;
  padding:16px 16px; cursor:pointer; text-align:left;
  background:transparent; border:0; font-family:inherit; color:var(--ink);
  min-height:56px;                       /* 손가락으로 누르기 편하게 */
}
.qa-q:hover .qa-qt{ color:var(--pink-ink); }

.qa-no{
  flex:0 0 auto; font-family:'Jua',sans-serif; font-size:13px; line-height:1.5;
  color:#fff; background:var(--pink); border-radius:999px; padding:3px 9px;
  margin-top:1px;
}
.qa-item.on .qa-no{ background:var(--pink-ink,#d1467c); }

.qa-qt{
  flex:1 1 auto; font-size:16px; font-weight:700; line-height:1.55;
  word-break:keep-all;                   /* 긴 질문이 단어 중간에서 안 끊기게 */
  transition:color .18s ease;
}

.qa-ar{
  flex:0 0 auto; font-size:19px; line-height:1; color:var(--ink-3);
  transition:transform .24s ease, color .2s ease; margin-top:2px;
}
.qa-item.on .qa-ar{ transform:rotate(180deg); color:var(--pink-ink); }

/* ── 답변 (펼쳐지는 곳) ───────────────────────────────── */
.qa-a{
  height:0; overflow:hidden;
  transition:height .24s cubic-bezier(.2,.9,.3,1);
}
.qa-in{ padding:2px 16px 18px 52px; }    /* 왼쪽 52px = 번호 칸과 줄 맞춤 */
.qa-in p{
  font-size:15px; line-height:1.8; color:var(--ink-2);
  word-break:keep-all; margin-top:9px;
}
.qa-in p:first-child{ margin-top:0; }
.qa-in b{ color:var(--ink); font-weight:800; }

/* 짧은 핵심 답 — "아닙니다" · "네, 가능합니다" */
.qa-hi{
  font-family:'Jua',sans-serif; font-size:18px !important; line-height:1.5 !important;
  color:var(--pink-ink) !important; margin-bottom:4px;
}

/* ── 맺음말 ───────────────────────────────────────────── */
.qa-outro{
  margin-top:22px; padding:24px 22px; border-radius:16px;
  border:1.5px solid rgba(255,143,177,.4);
  background:linear-gradient(160deg, rgba(255,143,177,.09), rgba(167,139,250,.07));
  text-align:center;
}
.qa-outro h3{
  font-family:'Jua',sans-serif; font-weight:400; font-size:21px; color:var(--ink);
}
.qa-outro p{
  font-size:15px; line-height:1.85; color:var(--ink-2);
  word-break:keep-all; margin-top:11px;
}
.qa-outro b{ color:var(--pink-ink); font-weight:800; }
.qa-last{
  margin-top:16px !important; padding-top:15px;
  border-top:1px dashed rgba(255,143,177,.45);
  font-family:'Jua',sans-serif; font-size:16.5px !important; color:var(--ink) !important;
}
.qa-empty{ margin-top:18px; color:var(--ink-3); font-size:14.5px; }

/* ── 대표 질문 (소개관 진입 화면) ────────────────────────── */
.qa-teaser{ list-style:none; display:grid; gap:9px; margin:0; padding:0; }
.qa-teaser li{
  position:relative; padding:11px 15px 11px 34px; border-radius:12px;
  font-size:15px; line-height:1.55; word-break:keep-all;
  border:1.5px solid var(--line); background:var(--surface); color:var(--ink-2);
  text-align:left;
}
.qa-teaser li::before{
  content:"Q"; position:absolute; left:13px; top:11px;
  font-family:'Jua',sans-serif; font-size:13.5px; color:var(--pink);
}

/* ── 폰 ────────────────────────────────────────────────── */
@media (max-width:560px){
  .qa-q{ padding:15px 13px; gap:9px; }
  .qa-qt{ font-size:15.5px; }            /* 더 줄이지 않습니다 — 읽기가 먼저 */
  .qa-in{ padding:2px 13px 17px 13px; }  /* 폰에서는 들여쓰기를 풀어 글 폭을 넓힙니다 */
  .qa-in p{ font-size:15px; }
  .qa-hi{ font-size:17px !important; }
  .qa-outro{ padding:20px 16px; }
  .qa-outro p{ font-size:14.5px; }
  .qa-teaser li{ font-size:14.5px; padding:10px 13px 10px 31px; }
}