/* ==========================================================================
   자주하는 질문 (pages/service/help.php)
   test.biz-quick.com custom.css 의 .fq-* 규칙을 운영 토큰(--bs-*)으로 이식.
   · 답변 본문은 notice.css 의 .nt-body 와 같은 요소에 .fq-body 를 함께 붙여 타이포를 공유한다.
   · <details> 네이티브 아코디언이라 스크립트가 없다.
   ========================================================================== */

/* main.css 의 전역 a{display:block} 보정 — 리드 문장·답변 본문의 인라인 링크가 줄바꿈되지 않도록 */
.fq-lead a,
.fq-body a { display: inline; }

.fq-chip {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  padding: .375rem .875rem;
  border-radius: 2rem;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--bs-gray-700);
  background: var(--bs-gray-200);
  text-decoration: none;
  border: 1px solid transparent;
  transition: color .2s, background-color .2s, border-color .2s;
}
.fq-chip:hover { color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .08); }
.fq-chip.is-active { color: #fff; background: var(--bs-primary); border-color: var(--bs-primary); }

.fq-chip-n {
  font-size: .75rem;
  font-weight: 700;
  padding: 0 .375rem;
  border-radius: 2rem;
  background: rgba(0, 0, 0, .07);
  color: inherit;
  min-width: 1.5rem;
  text-align: center;
}
.fq-chip.is-active .fq-chip-n { background: rgba(255, 255, 255, .25); }

.fq-item {
  background: #fff;
  border: 1px solid var(--bs-gray-200);
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.fq-item + .fq-item { margin-top: .75rem; }
.fq-item[open] {
  border-color: rgba(var(--bs-primary-rgb), .35);
  box-shadow: 0 .375rem 1.25rem rgba(var(--bs-primary-rgb), .08);
}

.fq-q {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: .75rem;
  row-gap: .25rem;
  padding: .875rem 1rem;
  cursor: pointer;
  list-style: none;
}
.fq-q::-webkit-details-marker { display: none; }
.fq-q:hover .fq-q-text { color: var(--bs-primary); }
.fq-q:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: -2px; border-radius: 1rem; }

.fq-cat {
  font-size: .75rem;
  font-weight: 700;
  color: var(--bs-gray-600);
  background: var(--bs-gray-100);
  border-radius: 2rem;
  padding: .125rem .5rem;
  white-space: nowrap;
}

.fq-q-text {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--bs-gray-800);
}
.fq-q-text mark {
  background: rgba(255, 213, 79, .55);
  color: inherit;
  padding: 0 .125rem;
  border-radius: .25rem;
}

.fq-chev { color: var(--bs-gray-500); transition: transform .2s; }
.fq-item[open] .fq-chev { transform: rotate(180deg); }

.fq-a {
  padding: 0 1rem 1rem;
  border-top: 1px solid var(--bs-gray-200);
  margin-top: .25rem;
  padding-top: 1rem;
}
.fq-body { margin-top: .25rem; }
.fq-a-meta { margin-top: .75rem; }

/* «10개씩» 라벨이 잘리지 않도록 최소 폭 확보 (test 98px 실측) */
.fq-search .fq-l { min-width: 6.25rem; }

.fq-help { background: var(--bs-gray-100); border: 1px solid var(--bs-gray-200); }
.fq-empty { padding-top: 5rem; padding-bottom: 5rem; }
.fq-empty-ico { font-size: 2.75rem; color: var(--bs-gray-400); }

/* Phoenix 의 --bs-secondary 는 외곽선 버튼에 너무 옅다 — 공지 화면과 같은 보정 */
.fq-toggle.btn-outline-secondary {
  --bs-btn-color: var(--bs-gray-800);
  --bs-btn-border-color: var(--bs-gray-400);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-gray-700);
  --bs-btn-hover-border-color: var(--bs-gray-700);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-gray-800);
  --bs-btn-active-border-color: var(--bs-gray-800);
}

@media (max-width: 575.98px) {
  .fq-q {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: .75rem .875rem;
  }
  .fq-q-marks { grid-column: 1 / -1; order: -1; }
  .fq-q-text { font-size: .9375rem; }
  .fq-search { flex-wrap: wrap; }
  .fq-search .fq-input { flex: 1 1 100%; }
}