/* ================================
   50mm Q&A - Mobile Category Fix
   Prevent overlap for "전체, 계정/로그인..." buttons
   ================================ */

/* Base: safer button text wrapping and sizing */
.qna-controls a.btn,
.qna-controls button.btn {
  white-space: normal !important;
  line-height: 1.25 !important;
  box-sizing: border-box;
  padding: .6rem .8rem;
  min-height: 44px; /* touch target */
}

/* Container: allow wrapping and consistent gaps */
.qna-controls [role="group"],
.qna-controls .btn-group,
.qna-controls .d-flex.flex-wrap {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: .5rem !important;
  align-items: stretch;
}

/* On small screens, show two columns (prevents overlap and keeps scanning easy) */
@media (max-width: 576px) {
  .qna-controls [role="group"] > a.btn,
  .qna-controls [role="group"] > button.btn,
  .qna-controls .btn-group > a.btn,
  .qna-controls .btn-group > button.btn,
  .qna-controls .d-flex.flex-wrap > a.btn,
  .qna-controls .d-flex.flex-wrap > button.btn {
    flex: 1 1 calc(50% - .5rem);
    max-width: calc(50% - .5rem);
  }
}

/* Extra small phones: stack to one per line */
@media (max-width: 360px) {
  .qna-controls [role="group"] > a.btn,
  .qna-controls [role="group"] > button.btn,
  .qna-controls .btn-group > a.btn,
  .qna-controls .btn-group > button.btn,
  .qna-controls .d-flex.flex-wrap > a.btn,
  .qna-controls .d-flex.flex-wrap > button.btn {
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* If a horizontal scroller was previously used, neutralize it to avoid overlap */
.qna-controls .btn-row,
.tablatest-nav {
  overflow: visible !important;
}

/* Avoid accidental negative margins from theme */
.qna-controls { margin-left: 0 !important; margin-right: 0 !important; }