/* Bootstrap 5.3 위에 얹는 최소 오버라이드. 색/간격은 모두 Bootstrap 변수를 사용한다. */

.hidden { display: none !important; }
.min-w-0 { min-width: 0; }

.msg { color: var(--bs-danger); min-height: 1.2em; }
.msg.ok { color: var(--bs-success); }

/* ---------- 문의 목록 / 상세 ---------- */
.inq-list .list-group-item { text-align: left; }
/* 선택된 항목(파란 배경) 위의 보조 텍스트 대비 확보 */
.inq-list .list-group-item.active .text-body-secondary { color: rgba(255, 255, 255, .75) !important; }

.detail-body { white-space: pre-wrap; overflow-wrap: anywhere; }

@media (min-width: 992px) {
  /* 2단 레이아웃일 때만 목록을 자체 스크롤시킨다 */
  .inq-list { max-height: 70vh; overflow-y: auto; }
}

/* ---------- FAQ 테이블 ---------- */
@media (min-width: 768px) {
  .faq-table-wrap {
    background: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
  }
}

/* 모바일에서는 표 대신 행 단위 카드로 쌓아 보여준다 (td의 data-label이 항목명) */
@media (max-width: 767.98px) {
  .table-stack > thead { display: none; }
  .table-stack,
  .table-stack > tbody,
  .table-stack > tbody > tr,
  .table-stack > tbody > tr > td { display: block; }

  .table-stack > tbody > tr {
    display: flex;
    flex-wrap: wrap;
    background: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: .5rem .75rem;
    margin-bottom: .5rem;
  }
  .table-stack > tbody > tr > td {
    display: flex;
    flex: 1 1 100%;
    gap: .5rem;
    padding: .15rem 0;
    border-bottom: 0;
    box-shadow: none;
    overflow-wrap: anywhere;
  }
  .table-stack > tbody > tr > td::before {
    content: attr(data-label);
    flex: 0 0 4.5rem;
    color: var(--bs-secondary-color);
    font-size: .8125rem;
  }
  /* 짧은 값(ID·언어·정렬)은 한 줄에 나란히 */
  .table-stack > tbody > tr > td.td-inline { order: -1; flex: 0 0 auto; gap: .35rem; margin-right: 1rem; }
  .table-stack > tbody > tr > td.td-inline::before { flex: 0 0 auto; }

  /* data-label 없는 셀 = 관리 버튼 칸 */
  .table-stack > tbody > tr > td:not([data-label]) { margin-top: .5rem; }
  .table-stack > tbody > tr > td:not([data-label])::before { display: none; }
  .table-stack > tbody > tr > td:not([data-label]) .btn { flex: 1; }
}

/* ---------- 중복 검사: 두 본문 나란히 비교 ---------- */
.dup-body { max-height: 40vh; overflow-y: auto; font-size: .875rem; }

/* ---------- 유저 드릴다운 (목록 -> 상세 -> 채널 -> 컨텐츠) ---------- */
.row-link { cursor: pointer; }
.row-link:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: -2px; }

.user-avatar { width: 56px; height: 56px; object-fit: cover; }

/* 대댓글은 한 단계 들여쓰고 왼쪽 선으로 부모와 묶어 보여준다 */
.comment-reply {
  margin-left: 1rem;
  padding-left: .75rem;
  border-left: 2px solid var(--bs-border-color);
}

/* breadcrumb 의 되돌아가기 버튼을 링크처럼 보이게 */
.breadcrumb .btn-link { color: var(--bs-link-color); }