/* =====================================================
   [사용자 Q&A 목록] 모바일 카드형 (JSP 수정 없이)
   컬럼: 1 번호 / 2 제목 / 3 답변상태 / 4 작성자 / 5 조회수 / 6 등록일
===================================================== */

/* 0) 글자 세로 찢어짐 방지(기존 전역 규칙이 있으면 덮어쓰기) */
.table-responsive .table th,
.table-responsive .table td {
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

/* 1) 모바일에서만 카드형 변환 */
@media (max-width: 768px) {

  /* 헤더 숨김 */
  .table-responsive .table thead {
    display: none !important;
  }

  /* table 구조를 block으로 바꿔 카드화 */
  .table-responsive .table,
  .table-responsive .table tbody,
  .table-responsive .table tr,
  .table-responsive .table td {
    display: block !important;
    width: 100% !important;
  }

  /* 한 행(tr)을 카드로 */
  .table-responsive .table tbody tr {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    margin: 12px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
  }

  /* td를 라벨(좌)+값(우) 가로 정렬 */
  .table-responsive .table tbody td {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 8px 0 !important;
    border: 0 !important;
    text-align: left !important;

    /* 값이 길어도 자연 줄바꿈 */
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  /* 라벨 영역(왼쪽) */
  .table-responsive .table tbody td::before {
    content: "" !important;
    flex: 0 0 86px !important;   /* 라벨폭: 80~110 사이로 취향 조절 */
    font-weight: 800 !important;
    color: #64748b !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
  }

  /* 값 영역(오른쪽) */
  .table-responsive .table tbody td > * {
    min-width: 0 !important;
    white-space: normal !important;
    text-align: left !important;
  }

  /* ===== 라벨 주입 (컬럼 순서 기준) ===== */
  .table-responsive .table tbody td:nth-child(1)::before { content: "번호" !important; }
  .table-responsive .table tbody td:nth-child(2)::before { content: "제목" !important; }
  .table-responsive .table tbody td:nth-child(3)::before { content: "답변상태" !important; }
  .table-responsive .table tbody td:nth-child(4)::before { content: "작성자" !important; }
  .table-responsive .table tbody td:nth-child(5)::before { content: "조회수" !important; }
  .table-responsive .table tbody td:nth-child(6)::before { content: "등록일" !important; }

  /* 제목 링크가 너무 길면 보기 좋게 (옵션: 2줄까지만) */
  .table-responsive .table tbody td:nth-child(2) a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* 답변상태 배지 정렬 */
  .table-responsive .table tbody td:nth-child(3) .badge {
    margin-top: 1px;
  }
}