/**
 * Q&A Board v2.0 CSS — "솔루션 고민방"
 * 
 * 글로벌 트렌드 UX:
 * - Stack Overflow: 좌측 통계 + 우측 콘텐츠 레이아웃
 * - SharedIT: 실시간 활동 지표, 주간 MVP 인센티브
 * - B2B SEO: 키워드 클라우드, 구조화된 카테고리 진입점
 */

:root {
  --qa-primary: #2563eb;
  --qa-primary-light: #dbeafe;
  --qa-primary-dark: #1d4ed8;
  --qa-success: #10b981;
  --qa-success-light: #d1fae5;
  --qa-warning: #f59e0b;
  --qa-warning-light: #fef3c7;
  --qa-danger: #ef4444;
  --qa-gray-50: #f9fafb;
  --qa-gray-100: #f3f4f6;
  --qa-gray-200: #e5e7eb;
  --qa-gray-300: #d1d5db;
  --qa-gray-400: #9ca3af;
  --qa-gray-500: #6b7280;
  --qa-gray-600: #4b5563;
  --qa-gray-700: #374151;
  --qa-gray-800: #1f2937;
  --qa-gray-900: #111827;
  --qa-radius: 12px;
  --qa-radius-sm: 8px;
  --qa-max-width: 1100px;
}

.qa-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 24px 60px;
  padding-top: 90px;
}

/* ═══════════════════════════════════
   히어로 (카드형 — 커뮤니티 통일)
   ═══════════════════════════════════ */
.qa-hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #164e63 100%);
  color: #fff;
  padding: 40px 44px;
  border-radius: 20px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
}
.qa-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -15%;
  width: 460px;
  height: 460px;
  background: rgba(255,255,255,0.04);
  border-radius: 50%;
  pointer-events: none;
}
.qa-hero-content {
  position: relative;
  z-index: 1;
  text-align: left;
  flex: 1;
  min-width: 0;
}
.qa-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: rgba(16,185,129,0.15);
  border: 1px solid rgba(16,185,129,0.25);
  border-radius: 20px;
  font-size: 12px;
  color: #6ee7b7;
  margin-bottom: 16px;
}
.qa-hero-title {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 10px;
}
.qa-highlight {
  color: #6ee7b7;
}
.qa-hero-desc {
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  line-height: 1.6;
  margin-bottom: 20px;
}
.qa-hero-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 0;
}

/* 통계 바 — 우측 세로 배치 */
.qa-hero-stats-bar {
  display: flex;
  gap: 24px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.qa-hero-stat {
  text-align: center;
  position: relative;
}
.qa-hero-stat:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -12px;
  top: 15%;
  height: 70%;
  width: 1px;
  background: rgba(255,255,255,0.15);
}
.qa-hero-stat-num {
  font-size: 24px;
  font-weight: 800;
  display: block;
  line-height: 1.2;
}
.qa-hero-stat-label {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  margin-top: 4px;
  display: block;
}
.qa-hero-stat-sep {
  display: none;
}

/* ═══════════════════════════════════
   버튼
   ═══════════════════════════════════ */
.qa-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  background: var(--qa-primary);
  color: #fff;
  border: none;
  border-radius: var(--qa-radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}
.qa-btn-primary:hover { background: var(--qa-primary-dark); transform: translateY(-1px); }
.qa-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.qa-btn-primary.qa-btn-sm { padding: 8px 16px; font-size: 13px; }
.qa-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  background: transparent;
  color: var(--qa-gray-700);
  border: 1px solid var(--qa-gray-300);
  border-radius: var(--qa-radius-sm);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
}
.qa-btn-outline:hover { background: var(--qa-gray-50); border-color: var(--qa-gray-400); }
.qa-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--qa-radius-sm);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.qa-btn-ghost:hover { background: rgba(255,255,255,0.15); }

/* ═══════════════════════════════════
   카테고리 고민방
   ═══════════════════════════════════ */
.qa-rooms-section {
  padding: 32px 20px;
  background: #fff;
  border-bottom: 1px solid var(--qa-gray-200);
}
.qa-rooms-header {
  max-width: var(--qa-max-width);
  margin: 0 auto 20px;
}
.qa-rooms-header h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--qa-gray-900);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.qa-rooms-header p {
  font-size: 14px;
  color: var(--qa-gray-500);
}
.qa-rooms-grid {
  max-width: var(--qa-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}
.qa-room-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--qa-gray-50);
  border: 1px solid var(--qa-gray-200);
  border-radius: var(--qa-radius-sm);
  cursor: pointer;
  transition: all 0.15s;
}
.qa-room-card:hover {
  border-color: var(--qa-primary);
  background: var(--qa-primary-light);
  transform: translateX(2px);
}
.qa-room-icon {
  font-size: 28px;
  flex-shrink: 0;
}
.qa-room-info {
  flex: 1;
}
.qa-room-info h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--qa-gray-800);
  margin-bottom: 3px;
}
.qa-room-stats {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: var(--qa-gray-500);
}
.qa-room-waiting {
  color: var(--qa-warning);
  font-weight: 600;
}
.qa-room-complete {
  color: var(--qa-success);
}
.qa-room-arrow {
  color: var(--qa-gray-300);
  font-size: 12px;
}

/* ═══════════════════════════════════
   트렌딩 + TOP 전문가 (2컬럼)
   ═══════════════════════════════════ */
.qa-trending-section {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  max-width: var(--qa-max-width);
  margin: 0 auto;
  padding: 24px 20px;
}
.qa-trending-col { min-width: 0; }
.qa-experts-col { display: flex; flex-direction: column; gap: 16px; }

/* 트렌딩 박스 */
.qa-trending-box {
  background: #fff;
  border: 1px solid var(--qa-gray-200);
  border-radius: var(--qa-radius);
  overflow: hidden;
}
.qa-trending-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  background: var(--qa-gray-50);
  border-bottom: 1px solid var(--qa-gray-200);
  font-size: 15px;
}
.qa-trending-list {
  padding: 4px 0;
}
.qa-trending-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 18px;
  cursor: pointer;
  transition: background 0.1s;
  border-bottom: 1px solid var(--qa-gray-100);
}
.qa-trending-item:last-child { border-bottom: none; }
.qa-trending-item:hover { background: var(--qa-gray-50); }
.qa-trending-rank {
  font-size: 16px;
  font-weight: 800;
  color: var(--qa-primary);
  width: 24px;
  flex-shrink: 0;
  text-align: center;
}
.qa-trending-body {
  flex: 1;
  min-width: 0;
}
.qa-trending-body h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--qa-gray-800);
  line-height: 1.4;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qa-trending-meta {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: var(--qa-gray-400);
}
.qa-trending-meta i { font-size: 10px; }
.qa-mini-best { color: var(--qa-success); }

/* TOP 전문가 */
.qa-top-experts {
  background: #fff;
  border: 1px solid var(--qa-gray-200);
  border-radius: var(--qa-radius);
  overflow: hidden;
}
.qa-experts-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  background: var(--qa-gray-50);
  border-bottom: 1px solid var(--qa-gray-200);
  font-size: 14px;
}
.qa-experts-list {
  padding: 8px 0;
}
.qa-expert-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
}
.qa-expert-rank {
  font-size: 18px;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}
.qa-expert-info {
  flex: 1;
  min-width: 0;
}
.qa-expert-info strong {
  display: block;
  font-size: 14px;
  color: var(--qa-gray-800);
}
.qa-expert-info small {
  font-size: 11px;
  color: var(--qa-gray-400);
}
.qa-expert-count {
  font-size: 12px;
  color: var(--qa-primary);
  font-weight: 600;
  flex-shrink: 0;
}
.qa-experts-cta {
  padding: 10px 18px;
  font-size: 12px;
  color: var(--qa-gray-400);
  background: var(--qa-gray-50);
  text-align: center;
  border-top: 1px solid var(--qa-gray-200);
}
.qa-no-experts {
  padding: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--qa-gray-400);
}

/* RFQ 퍼널 CTA */
.qa-rfq-cta {
  background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
  border: 1px solid #bfdbfe;
  border-radius: var(--qa-radius);
  padding: 20px;
  text-align: center;
}
.qa-rfq-cta-icon { font-size: 28px; margin-bottom: 8px; }
.qa-rfq-cta h4 { font-size: 14px; font-weight: 700; color: var(--qa-gray-800); margin-bottom: 4px; }
.qa-rfq-cta p { font-size: 12px; color: var(--qa-gray-500); margin-bottom: 12px; line-height: 1.5; }

/* ═══════════════════════════════════
   필터/검색
   ═══════════════════════════════════ */
.qa-filters {
  background: #fff;
  border-bottom: 1px solid var(--qa-gray-200);
  padding: 14px 20px;
  position: sticky;
  top: 60px;
  z-index: 50;
}
.qa-filter-row {
  display: flex;
  gap: 12px;
  align-items: center;
  max-width: var(--qa-max-width);
  margin: 0 auto 8px;
}
.qa-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
}
.qa-tabs::-webkit-scrollbar { display: none; }
.qa-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--qa-gray-500);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.qa-tab:hover { background: var(--qa-gray-100); }
.qa-tab.active { background: var(--qa-primary-light); color: var(--qa-primary); font-weight: 600; }
.qa-tab-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.qa-tab-dot.waiting { background: var(--qa-warning); }
.qa-tab-dot.answered { background: var(--qa-success); }

.qa-search {
  position: relative;
  width: 220px;
  flex-shrink: 0;
}
.qa-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--qa-gray-400);
  font-size: 13px;
}
.qa-search input {
  width: 100%;
  padding: 8px 30px 8px 32px;
  border: 1px solid var(--qa-gray-300);
  border-radius: var(--qa-radius-sm);
  font-size: 13px;
  box-sizing: border-box;
}
.qa-search input:focus {
  outline: none;
  border-color: var(--qa-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
.qa-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--qa-gray-400);
  font-size: 12px;
}

/* 카테고리 칩 */
.qa-category-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  max-width: var(--qa-max-width);
  margin: 0 auto;
}
.qa-category-chips::-webkit-scrollbar { display: none; }
.qa-chip {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--qa-gray-600);
  background: var(--qa-gray-100);
  border: 1px solid transparent;
  border-radius: 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.qa-chip:hover { background: var(--qa-gray-200); }
.qa-chip.active { background: var(--qa-primary-light); color: var(--qa-primary); border-color: rgba(37,99,235,0.2); font-weight: 600; }

/* ═══════════════════════════════════
   질문 리스트 (Stack Overflow 레이아웃)
   ═══════════════════════════════════ */
.qa-list-section {
  max-width: var(--qa-max-width);
  margin: 0 auto;
  padding: 16px 20px 48px;
}
.qa-question-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--qa-gray-200);
  border: 1px solid var(--qa-gray-200);
  border-radius: var(--qa-radius);
  overflow: hidden;
}

/* 질문 카드 (Stack Overflow 스타일) */
.qa-question-card {
  display: flex;
  gap: 16px;
  padding: 16px 18px;
  background: #fff;
  cursor: pointer;
  transition: background 0.1s;
}
.qa-question-card:hover {
  background: var(--qa-gray-50);
}
.qa-question-card.has-best {
  border-left: 3px solid var(--qa-success);
}

/* 좌측: 통계 */
.qa-card-stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 60px;
  flex-shrink: 0;
}
.qa-card-stat {
  text-align: center;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--qa-gray-50);
  border: 1px solid var(--qa-gray-200);
}
.qa-card-stat.active {
  background: #fef3c7;
  border-color: #fcd34d;
}
.qa-card-stat.answered {
  background: var(--qa-success-light);
  border-color: #6ee7b7;
}
.qa-card-stat.waiting {
  background: #fff7ed;
  border-color: #fed7aa;
}
.qa-card-stat-num {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--qa-gray-800);
  line-height: 1;
}
.qa-card-stat.answered .qa-card-stat-num { color: #059669; }
.qa-card-stat.waiting .qa-card-stat-num { color: #c2410c; }
.qa-card-stat-label {
  font-size: 10px;
  color: var(--qa-gray-400);
}

/* 우측: 콘텐츠 */
.qa-card-content {
  flex: 1;
  min-width: 0;
}
.qa-card-top-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.qa-card-cat {
  font-size: 12px;
  color: var(--qa-gray-500);
}
.qa-best-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #059669;
  font-weight: 700;
  padding: 2px 8px;
  background: var(--qa-success-light);
  border-radius: 10px;
}
.qa-waiting-badge {
  font-size: 11px;
  color: #c2410c;
  font-weight: 600;
  padding: 2px 8px;
  background: #fff7ed;
  border-radius: 10px;
}
.qa-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--qa-gray-900);
  line-height: 1.4;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qa-card-excerpt {
  font-size: 13px;
  color: var(--qa-gray-500);
  line-height: 1.5;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.qa-card-tags {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}
.qa-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--qa-primary-light);
  color: var(--qa-primary);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}
.qa-tag button {
  background: none;
  border: none;
  color: var(--qa-primary);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.qa-card-footer {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: var(--qa-gray-400);
}
.qa-card-author {
  display: flex;
  align-items: center;
  gap: 4px;
}
.qa-expert-badge {
  font-size: 12px;
}
.qa-card-mine {
  padding: 1px 6px;
  background: var(--qa-warning-light);
  color: #b45309;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
}

/* ═══════════════════════════════════
   로딩/빈상태/더보기
   ═══════════════════════════════════ */
.qa-loading {
  text-align: center;
  padding: 48px;
  color: var(--qa-gray-500);
}
.qa-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--qa-gray-200);
  border-top-color: var(--qa-primary);
  border-radius: 50%;
  animation: qaSpin 0.8s linear infinite;
  margin: 0 auto 12px;
}
@keyframes qaSpin { to { transform: rotate(360deg); } }
.qa-empty {
  text-align: center;
  padding: 64px 20px;
}
.qa-empty-icon { font-size: 48px; margin-bottom: 12px; }
.qa-empty h3 { font-size: 18px; color: var(--qa-gray-700); margin-bottom: 8px; }
.qa-empty p { color: var(--qa-gray-500); margin-bottom: 16px; }
.qa-load-more { text-align: center; padding: 20px; }

/* ═══════════════════════════════════
   SEO 키워드 클라우드
   ═══════════════════════════════════ */
.qa-seo-keywords {
  padding: 36px 20px;
  background: var(--qa-gray-50);
  border-top: 1px solid var(--qa-gray-200);
  text-align: center;
}
.qa-seo-keywords h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--qa-gray-700);
  margin-bottom: 16px;
}
.qa-keyword-cloud {
  max-width: var(--qa-max-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.qa-seo-keyword {
  display: inline-block;
  padding: 5px 14px;
  background: #fff;
  border: 1px solid var(--qa-gray-200);
  border-radius: 20px;
  color: var(--qa-gray-600);
  text-decoration: none;
  transition: all 0.15s;
  cursor: pointer;
}
.qa-seo-keyword:hover {
  background: var(--qa-primary-light);
  border-color: var(--qa-primary);
  color: var(--qa-primary);
}

/* ═══════════════════════════════════
   모달
   ═══════════════════════════════════ */
.qa-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.qa-modal {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}
.qa-modal-large { max-width: 780px; }
.qa-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--qa-gray-200);
}
.qa-modal-header h2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--qa-gray-900);
  display: flex;
  align-items: center;
  gap: 8px;
}
.qa-modal-header h2 i { color: var(--qa-primary); }
.qa-modal-close {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: var(--qa-gray-100);
  border-radius: 8px; font-size: 18px;
  color: var(--qa-gray-500); cursor: pointer;
}
.qa-modal-close:hover { background: var(--qa-gray-200); }
.qa-modal-body { padding: 22px; overflow-y: auto; flex: 1; }
.qa-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--qa-gray-200);
}

/* 폼 */
.qa-form-group { margin-bottom: 16px; }
.qa-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--qa-gray-700);
  margin-bottom: 5px;
}
.qa-label.required::after { content: ' *'; color: var(--qa-danger); }
.qa-input, .qa-select, .qa-textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--qa-gray-300);
  border-radius: var(--qa-radius-sm);
  font-size: 14px;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.qa-input:focus, .qa-select:focus, .qa-textarea:focus {
  outline: none;
  border-color: var(--qa-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
.qa-textarea { resize: vertical; min-height: 80px; font-family: inherit; line-height: 1.5; }
.qa-char-count { display: block; text-align: right; font-size: 11px; color: var(--qa-gray-400); margin-top: 3px; }
.qa-tag-input { display: flex; gap: 8px; }
.qa-tag-input input { flex: 1; }
.qa-tag-add-btn {
  padding: 8px 14px;
  border: 1px solid var(--qa-gray-300);
  border-radius: var(--qa-radius-sm);
  background: #fff; cursor: pointer;
  color: var(--qa-gray-600);
}

/* 유사 질문 */
.qa-similar-questions {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: var(--qa-radius-sm);
  padding: 14px;
}
.qa-similar-questions h4 {
  font-size: 13px;
  font-weight: 600;
  color: #b45309;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.qa-similar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  cursor: pointer;
  font-size: 13px;
}
.qa-similar-item:hover .qa-similar-title { color: var(--qa-primary); }
.qa-similar-cat { font-size: 11px; color: var(--qa-gray-400); flex-shrink: 0; }
.qa-similar-title { flex: 1; color: var(--qa-gray-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-similar-answers { font-size: 11px; color: var(--qa-success); flex-shrink: 0; }

/* ═══════════════════════════════════
   상세 모달 내부
   ═══════════════════════════════════ */
.qa-detail-question {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--qa-gray-200);
}
.qa-detail-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.qa-detail-cat { font-size: 13px; color: var(--qa-gray-500); }
.qa-detail-time { font-size: 12px; color: var(--qa-gray-400); margin-left: auto; }
.qa-detail-body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--qa-gray-700);
  margin-bottom: 12px;
  white-space: pre-wrap;
}
.qa-detail-tags { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.qa-detail-actions-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.qa-vote-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--qa-gray-300);
  border-radius: 20px;
  background: #fff;
  font-size: 13px;
  color: var(--qa-gray-600);
  cursor: pointer;
  transition: all 0.15s;
}
.qa-vote-btn:hover { border-color: var(--qa-primary); color: var(--qa-primary); }
.qa-vote-btn.voted { background: var(--qa-primary-light); border-color: var(--qa-primary); color: var(--qa-primary); font-weight: 600; }
.qa-vote-btn.sm { padding: 4px 10px; font-size: 12px; }
.qa-detail-views { font-size: 12px; color: var(--qa-gray-400); display: flex; align-items: center; gap: 4px; }
.qa-detail-author { font-size: 13px; color: var(--qa-gray-600); margin-left: auto; display: flex; align-items: center; gap: 4px; }
.qa-action-btn {
  padding: 4px 10px;
  font-size: 12px;
  color: var(--qa-gray-500);
  background: none;
  border: none;
  cursor: pointer;
}
.qa-action-btn:hover { color: var(--qa-gray-700); }
.qa-action-btn.danger:hover { color: var(--qa-danger); }

/* 베스트 답변 */
.qa-best-answer-section {
  margin-bottom: 20px;
}
.qa-best-answer-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: var(--qa-success-light);
  border-radius: var(--qa-radius-sm) var(--qa-radius-sm) 0 0;
  font-size: 14px;
  font-weight: 700;
  color: #059669;
}

/* 답변 목록 */
.qa-answers-section { margin-bottom: 20px; }
.qa-answers-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--qa-gray-800);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.qa-answers-title i { color: var(--qa-primary); }
.qa-answer-item {
  padding: 16px;
  background: var(--qa-gray-50);
  border: 1px solid var(--qa-gray-200);
  border-radius: var(--qa-radius-sm);
  margin-bottom: 10px;
}
.qa-answer-item.best {
  background: #f0fdf4;
  border-color: #86efac;
}
.qa-answer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.qa-answer-author {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--qa-gray-700);
}
.qa-answer-author small { color: var(--qa-gray-400); }
.qa-answer-time { font-size: 12px; color: var(--qa-gray-400); }
.qa-answer-body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--qa-gray-700);
  margin-bottom: 10px;
  white-space: pre-wrap;
}
.qa-answer-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.qa-best-select-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  background: var(--qa-success);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.qa-best-select-btn:hover { background: #059669; }
.qa-no-answers {
  text-align: center;
  padding: 24px;
  color: var(--qa-gray-400);
  font-size: 14px;
}

/* 답변 작성 */
.qa-answer-form {
  background: var(--qa-gray-50);
  border: 1px solid var(--qa-gray-200);
  border-radius: var(--qa-radius);
  padding: 18px;
  margin-bottom: 16px;
}
.qa-answer-form h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--qa-gray-700);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.qa-answer-form-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.qa-login-prompt {
  text-align: center;
  padding: 20px;
  background: var(--qa-gray-50);
  border-radius: var(--qa-radius-sm);
  font-size: 14px;
  color: var(--qa-gray-500);
}
.qa-login-prompt a { color: var(--qa-primary); font-weight: 600; }

/* 상세 내 RFQ CTA */
.qa-detail-rfq-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
  border: 1px solid #bfdbfe;
  border-radius: var(--qa-radius-sm);
}
.qa-detail-rfq-cta i { font-size: 24px; color: var(--qa-primary); flex-shrink: 0; }
.qa-detail-rfq-cta div { flex: 1; }
.qa-detail-rfq-cta strong { display: block; font-size: 14px; color: var(--qa-gray-800); margin-bottom: 2px; }
.qa-detail-rfq-cta p { font-size: 12px; color: var(--qa-gray-500); margin: 0; }
.qa-detail-rfq-cta a { flex-shrink: 0; }

/* ═══════════════════════════════════
   토스트
   ═══════════════════════════════════ */
.qa-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  padding: 12px 24px;
  background: var(--qa-gray-800);
  color: #fff;
  border-radius: 10px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 2000;
  white-space: nowrap;
}
.qa-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.qa-toast.success { background: #059669; }
.qa-toast.warning { background: #d97706; }
.qa-toast.error { background: #dc2626; }

/* ═══════════════════════════════════
   반응형
   ═══════════════════════════════════ */
@media (max-width: 768px) {
  .qa-container { padding: 16px 12px 40px; padding-top: 80px; }
  .qa-hero { flex-direction: column; text-align: center; padding: 28px 20px; gap: 20px; border-radius: 16px; }
  .qa-hero-content { text-align: center; }
  .qa-hero-title { font-size: 22px; }
  .qa-hero-desc { margin-left: auto; margin-right: auto; }
  .qa-hero-actions { justify-content: center; flex-direction: column; gap: 8px; }
  .qa-hero-actions .qa-btn-primary,
  .qa-hero-actions .qa-btn-ghost { width: 100%; justify-content: center; }
  .qa-hero-stats-bar { gap: 16px; }
  .qa-hero-stat-num { font-size: 20px; }
  .qa-rooms-grid { grid-template-columns: 1fr; }
  .qa-trending-section { grid-template-columns: 1fr; }
  .qa-filter-row { flex-direction: column; }
  .qa-search { width: 100%; }
  .qa-question-card { flex-direction: column; gap: 10px; }
  .qa-card-stats { flex-direction: row; gap: 8px; min-width: auto; }
  .qa-card-stat { min-width: 50px; }
  .qa-modal { max-width: 100%; margin: 8px; }
  .qa-detail-rfq-cta { flex-direction: column; text-align: center; }
  .qa-detail-rfq-cta a { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .qa-hero { padding: 24px 16px; border-radius: 12px; }
  .qa-hero-title { font-size: 20px; }
  .qa-hero-stats-bar { flex-wrap: wrap; gap: 12px; }
  .qa-card-title { font-size: 14px; white-space: normal; }
}