/* =============================================================================
   QNAMaker — Q&A 카드 모양 시스템 (프로덕션)
   -----------------------------------------------------------------------------
   설계 계약(중요):
   · "표시방식"(qnaVisualStyle) = 카드 컨테이너 클래스  .qna-style-{classic|bubble|message|text|interview|transcript}
   · "모양"(shape)             = 카드 컨테이너 속성   [data-shape="..."]
     현재 모양: 말풍선형(bubmini 미니멀라운드 · bubretro 레트로),
               메시지형(msgbasic 기본 · msgangular 각진 · msglift 그림자리프트),
               문자형(txtmini) · 인터뷰형(ivcard) · 대본형(trclassic 클래식)
   · "색 처리"                 = JS(applyBubbleVars)가 각 말풍선 요소에 CSS 변수만 세팅.
       --bubble-bg      채움색
       --bubble-border  테두리색 (안 쓰면 transparent)
       --bubble-fg      글자색
       --bubble-shadow  추가 그림자 (기본 없음 → 0 0 transparent)
       --lift-shadow    그림자리프트 전용 그림자색
       --accent         라벨(강조)색
   · 테두리 "굵기"와 반경/꼬리 기하학은 모양별로 여기서 고정. 색만 변수로 주입.
   ============================================================================= */

/* ── 채팅형 공통 레이아웃 (말풍선 / 메시지 / 문자) ── */
.qna-card.qna-style-bubble .qna-block,
.qna-card.qna-style-message .qna-block,
.qna-card.qna-style-text .qna-block{ display:flex!important; flex-direction:column!important; gap:11px!important; }

.qna-card.qna-style-bubble .qna-question,  .qna-card.qna-style-bubble .qna-answer,
.qna-card.qna-style-message .qna-question, .qna-card.qna-style-message .qna-answer,
.qna-card.qna-style-text .qna-question,    .qna-card.qna-style-text .qna-answer{
  position:relative!important;
  color:var(--bubble-fg,inherit)!important;
  max-width:82%!important; margin:0!important;
}
.qna-card.qna-style-bubble .qna-question,
.qna-card.qna-style-message .qna-question,
.qna-card.qna-style-text .qna-question{ align-self:flex-start!important; text-align:left!important; }
.qna-card.qna-style-bubble .qna-answer,
.qna-card.qna-style-message .qna-answer,
.qna-card.qna-style-text .qna-answer{ align-self:flex-end!important; text-align:right!important; flex-direction:column!important; align-items:flex-end!important; gap:5px!important; }
.qna-card.qna-style-text .qna-answer > span:not(.qna-lbl-badge),
.qna-card.qna-style-bubble .qna-answer > span:not(.qna-lbl-badge),
.qna-card.qna-style-message .qna-answer > span:not(.qna-lbl-badge){ text-align:right!important; align-self:flex-end!important; }

/* 기본적으로 잔여 꼬리 제거(각 모양이 필요한 것만 다시 켬) */
.qna-card.qna-style-bubble .qna-question::before, .qna-card.qna-style-bubble .qna-answer::before,
.qna-card.qna-style-bubble .qna-question::after,  .qna-card.qna-style-bubble .qna-answer::after,
.qna-card.qna-style-message .qna-question::before,.qna-card.qna-style-message .qna-answer::before,
.qna-card.qna-style-message .qna-question::after, .qna-card.qna-style-message .qna-answer::after{ content:none; }


/* ═══════════════════════════ 말풍선형 (5) ═══════════════════════════ */
.qna-card.qna-style-bubble .qna-question,
.qna-card.qna-style-bubble .qna-answer{
  padding:10px 14px!important;
  background:var(--bubble-bg,#f1f2f4)!important;
  border:1px solid var(--bubble-border,#e4e6ea)!important;
  box-shadow:var(--bubble-shadow,0 0 transparent)!important;
}


/* ── 미니멀라운드 (1px 테두리, 둥근, 부드러운 그림자, 하단 다이아 꼬리) ── */
.qna-card.qna-style-bubble[data-shape="bubmini"] .qna-question,
.qna-card.qna-style-bubble[data-shape="bubmini"] .qna-answer{ border-width:1px!important; border-radius:16px!important; box-shadow:0 1px 2px rgba(20,30,50,.05), var(--bubble-shadow,0 0 transparent)!important; }
.qna-card.qna-style-bubble[data-shape="bubmini"] .qna-question::after{ content:""!important; position:absolute!important; left:16px!important; bottom:-6px!important; width:14px!important; height:11px!important; background:var(--bubble-bg,#fff)!important; border-right:1px solid var(--bubble-border,#e0e3e9)!important; border-bottom:1px solid var(--bubble-border,#e0e3e9)!important; transform:rotate(45deg)!important; }
.qna-card.qna-style-bubble[data-shape="bubmini"] .qna-answer::after{ content:""!important; position:absolute!important; right:16px!important; bottom:-6px!important; width:14px!important; height:11px!important; background:var(--bubble-bg,#fff)!important; border-right:1px solid var(--bubble-border,#e0e3e9)!important; border-bottom:1px solid var(--bubble-border,#e0e3e9)!important; transform:rotate(45deg)!important; }

/* ── 레트로 (2px 테두리, 하드 오프셋 그림자, 하단 단색 꼬리 · 내부 채움꼬리 없음) ── */
.qna-card.qna-style-bubble[data-shape="bubretro"] .qna-question,
.qna-card.qna-style-bubble[data-shape="bubretro"] .qna-answer{ border-width:2px!important; border-radius:2px!important; box-shadow:4px 4px 0 var(--bubble-border,#16181d), var(--bubble-shadow,0 0 transparent)!important; font-weight:600!important; }
.qna-card.qna-style-bubble[data-shape="bubretro"] .qna-question::before{ content:""!important; position:absolute!important; bottom:-13px!important; left:16px!important; width:0!important; height:0!important; border:8px solid transparent!important; border-top-color:var(--bubble-border,#16181d)!important; border-bottom:0!important; }
.qna-card.qna-style-bubble[data-shape="bubretro"] .qna-answer::before{ content:""!important; position:absolute!important; bottom:-13px!important; right:16px!important; width:0!important; height:0!important; border:8px solid transparent!important; border-top-color:var(--bubble-border,#16181d)!important; border-bottom:0!important; }


/* ═══════════════════════════ 메시지형 (3) ═══════════════════════════ */
.qna-card.qna-style-message .qna-question,
.qna-card.qna-style-message .qna-answer{
  padding:9px 13px!important; border:0!important;
  background:var(--bubble-bg,#eceef1)!important;
}

/* ── 기본 (구 텔레그램: 작은 하단 옆꼬리) ── */
.qna-card.qna-style-message[data-shape="msgbasic"] .qna-question{ border-radius:12px 12px 12px 4px!important; box-shadow:0 1px 2px rgba(0,0,0,.12), var(--bubble-shadow,0 0 transparent)!important; }
.qna-card.qna-style-message[data-shape="msgbasic"] .qna-answer{ border-radius:12px 12px 4px 12px!important; box-shadow:0 1px 2px rgba(0,0,0,.12), var(--bubble-shadow,0 0 transparent)!important; }
.qna-card.qna-style-message[data-shape="msgbasic"] .qna-question::after{ content:""!important; position:absolute!important; bottom:0!important; left:-5px!important; width:0!important; height:0!important; border:6px solid transparent!important; border-top-color:var(--bubble-bg,#fff)!important; border-right:0!important; }
.qna-card.qna-style-message[data-shape="msgbasic"] .qna-answer::after{ content:""!important; position:absolute!important; bottom:0!important; right:-5px!important; width:0!important; height:0!important; border:6px solid transparent!important; border-top-color:var(--bubble-bg,#eeffde)!important; border-left:0!important; }

/* ── 각진 (각진 말풍선 + 옆 삼각 꼬리) ── */
.qna-card.qna-style-message[data-shape="msgangular"] .qna-question,
.qna-card.qna-style-message[data-shape="msgangular"] .qna-answer{ border-radius:7px!important; box-shadow:var(--bubble-shadow,0 0 transparent)!important; }
.qna-card.qna-style-message[data-shape="msgangular"] .qna-question::after{ content:""!important; position:absolute!important; bottom:4px!important; left:-6px!important; width:0!important; height:0!important; border:7px solid transparent!important; border-right-color:var(--bubble-bg,#eceef1)!important; border-left:0!important; }
.qna-card.qna-style-message[data-shape="msgangular"] .qna-answer::after{ content:""!important; position:absolute!important; bottom:4px!important; right:-6px!important; width:0!important; height:0!important; border:7px solid transparent!important; border-left-color:var(--bubble-bg,#4a7cf0)!important; border-right:0!important; }

/* ── 그림자리프트 (플로팅, 꼬리 없음) ── */
.qna-card.qna-style-message[data-shape="msglift"] .qna-question{ border-radius:16px!important; box-shadow:0 10px 22px -8px var(--lift-shadow,rgba(20,30,50,.35))!important; }
.qna-card.qna-style-message[data-shape="msglift"] .qna-answer{ border-radius:16px!important; box-shadow:0 12px 24px -8px var(--lift-shadow,rgba(20,30,50,.35))!important; }


/* ═══════════════════════════ 문자형 (미니 · 고정) ═══════════════════════════ */
.qna-card.qna-style-text .qna-question,
.qna-card.qna-style-text .qna-answer{
  padding:6px 11px!important; border:1px solid var(--bubble-border,transparent)!important; border-radius:9px!important;
  background:var(--bubble-bg,#eef0f2)!important; box-shadow:var(--bubble-shadow,0 0 transparent)!important;
}
.qna-card.qna-style-text .qna-block{ gap:6px!important; }


/* ═══════════════════════════ 인터뷰형 (카드분리 · 고정) ═══════════════════════════ */
.qna-card.qna-style-interview .qna-block{
  background:var(--bubble-bg,rgba(0,0,0,.03))!important;
  border:1px solid var(--bubble-border,var(--card-border-color,#e6e8ec))!important;
  border-radius:12px!important; padding:12px 14px!important; margin-bottom:10px!important;
  box-shadow:var(--bubble-shadow,0 0 transparent)!important;
}
.qna-card.qna-style-interview .qna-block:last-child{ margin-bottom:0!important; }
.qna-card.qna-style-interview .qna-question{ font-weight:700!important; color:var(--bubble-fg,inherit)!important; }
.qna-card.qna-style-interview .qna-answer{ margin-top:5px!important; color:var(--bubble-fg,inherit)!important; opacity:.86!important; }


/* ═══════════════════════════ 대본형 (5) · 색은 --accent ═══════════════════════════ */
.qna-card.qna-style-transcript .qna-block{ display:block!important; }
.qna-card.qna-style-transcript .qna-question{ font-weight:700!important; }
.qna-card.qna-style-transcript .qna-answer{ opacity:.8!important; }

/* ── 클래식 (구분선 · 첫 블록은 상단선 없음) ── */
.qna-card.qna-style-transcript[data-shape="trclassic"] .qna-block{ border-top:1px solid var(--card-border-color,#e3e6ec)!important; padding:11px 0!important; }
.qna-card.qna-style-transcript[data-shape="trclassic"] .qna-block:first-child,
.qna-card.qna-style-transcript[data-shape="trclassic"] .card-label + .qna-block{ border-top:0!important; padding-top:2px!important; }
.qna-card.qna-style-transcript[data-shape="trclassic"] .qna-answer{ margin-top:4px!important; }



/* 채팅형(말풍선/메시지/문자) 답변은 세로 스택이라 라벨 세로정렬 규칙이 가로정렬로 작동함 → 라벨을 항상 오른쪽에 고정 */
.qna-card.qna-style-bubble .qna-answer > .qna-lbl-badge,
.qna-card.qna-style-message .qna-answer > .qna-lbl-badge,
.qna-card.qna-style-text .qna-answer > .qna-lbl-badge{ align-self:flex-end!important; }