/**
 * DXCMS — boards/skins/faq/style.css v3.0.0
 * 헤더 구조는 기본 list CSS 그대로 사용
 */

/* ── 기본 list 헤더 CSS 그대로 ── */
.dx-list-wrap { background:var(--bg-card); border:1px solid var(--border); border-radius:16px; overflow:hidden; }
.dx-list-title { font-size:1.05rem; font-weight:800; color:var(--text-main); margin:0; }
.dx-list-head  { display:flex; flex-direction:column; gap:0; padding:0; }
.dx-lh-row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 30px 4px;
  gap: 10px;
}
.dx-lh-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.dx-lh-row2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 30px 8px;
}
.dx-lh-left2  { display: flex; align-items: center; gap: 10px; }
.dx-lh-right2 { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.dx-lh-total   { font-size: .8rem; color: var(--text-muted); white-space: nowrap; }
.dx-lh-total b { color: var(--p); font-weight: 700; }
@media (max-width: 540px) {
  .dx-list-wrap  { padding: 2px 5px; }
  .dx-lh-row1    { padding: 11px 14px 9px; }
  .dx-lh-row2    { padding: 7px 14px 9px; flex-wrap: wrap; gap: 8px; }
  .dx-lh-right2  { flex-wrap: nowrap; }
}

/* ── 검색 ── */
.faq-search-form { display: inline-flex; align-items: center; gap: 4px; }
.faq-search-input {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: .82rem;
  background: var(--bg-body);
  color: var(--text-main);
  outline: none;
  width: 140px;
  transition: border-color .15s;
}
.faq-search-input:focus { border-color: var(--p); }
.faq-search-btn {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 7px;
  background: var(--bg-body); cursor: pointer;
  color: var(--text-muted); font-size: .75rem;
}
.faq-search-btn:hover { border-color: var(--p); color: var(--p); }

/* ── 글쓰기 버튼 ── */
.faq-write-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border: none; border-radius: 8px;
  background: var(--p); color: #fff;
  font-size: .78rem; font-weight: 700;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(26,115,232,.25);
}
.faq-write-btn:hover { opacity: .88; color: #fff; }

/* ── 카테고리 탭 ── */
.faq-cats {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 30px; border-bottom: 1px solid var(--border);
}
.faq-cat-btn {
  padding: 5px 14px; font-size: .78rem; font-weight: 600;
  border: 1px solid var(--border); border-radius: 99px;
  background: var(--bg-card); color: var(--text-muted);
  text-decoration: none; transition: all .15s;
}
.faq-cat-btn:hover, .faq-cat-btn.active {
  background: var(--p); border-color: var(--p); color: #fff;
}

/* ── 아이템 ── */
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-item:last-child { border-bottom: none; }

.faq-q-row {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 30px; cursor: pointer; user-select: none;
  transition: background .12s;
}
.faq-q-row:hover { background: var(--bg-body); }
.faq-item.open .faq-q-row { background: var(--bg-body); }

.faq-q-badge {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  background: var(--p); color: #fff;
  font-size: .75rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.faq-q-text {
  flex: 1; font-size: .9rem; font-weight: 600;
  color: var(--text-main); line-height: 1.4;
}
.faq-q-cat {
  font-size: .7rem; font-weight: 700; color: var(--p);
  background: rgba(26,115,232,.08); border-radius: 99px;
  padding: 3px 10px; white-space: nowrap; flex-shrink: 0;
}
.faq-q-arrow {
  flex-shrink: 0; font-size: .65rem; color: var(--text-muted);
  transition: transform .25s ease;
}
.faq-item.open .faq-q-arrow { transform: rotate(180deg); }

/* A 본문 */
.faq-a-body { display: none; padding: 0 30px 20px 70px; }
.faq-item.open .faq-a-body { display: block; }
.faq-a-content {
  font-size: .875rem; line-height: 1.85; color: var(--text-main);
  border-top: 1px dashed var(--border); padding-top: 14px;
}
.faq-a-content img { max-width: 100%; height: auto; cursor: default !important; pointer-events: none !important; }

/* 관리자 버튼 */
.faq-admin-row {
  display: none; align-items: center; gap: 6px;
  padding: 0 30px 12px 70px;
}
.faq-item.open .faq-admin-row { display: flex; }
.faq-admin-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; font-size: .72rem; font-weight: 600;
  border: 1px solid var(--border); border-radius: 5px;
  background: var(--bg-card); color: var(--text-muted);
  text-decoration: none; cursor: pointer; transition: all .12s;
}
.faq-admin-btn:hover { background: var(--bg-body); color: var(--text-main); }
.faq-admin-btn.danger { color: #ef4444; }
.faq-admin-btn.danger:hover { background: #fef2f2; border-color: #fca5a5; }

/* 빈 상태 */
.faq-empty {
  text-align: center; padding: 60px 0;
  color: var(--text-muted); font-size: .9rem;
}
.faq-empty i { font-size: 2rem; display: block; margin-bottom: 12px; opacity: .3; }

/* 페이지네이션 */
.faq-pager {
  display: flex; justify-content: center; gap: 4px;
  padding: 16px; border-top: 1px solid var(--border); flex-wrap: wrap;
}
.faq-pg-btn {
  min-width: 32px; height: 32px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-card); color: var(--text-muted);
  font-size: .8rem; font-weight: 600; text-decoration: none; transition: all .12s;
}
.faq-pg-btn:hover { border-color: var(--p); color: var(--p); }
.faq-pg-btn.on  { background: var(--p); border-color: var(--p); color: #fff; }
.faq-pg-btn.off { opacity: .35; pointer-events: none; }

@media (max-width: 640px) {
  .faq-q-row     { padding: 14px 16px; }
  .faq-a-body    { padding: 0 16px 16px 16px; }
  .faq-admin-row { padding: 0 16px 10px 16px; }
  .faq-q-cat     { display: none; }
}