/**
 * Q&A 게시판 전용 스타일 - HC Design System v2
 */

.badge-status {
    display: inline-flex;
    align-items: center;
    gap: var(--hc-space-xs, 4px);
    padding: var(--hc-space-xs, 4px) var(--hc-space-sm, 8px);
    border-radius: var(--hc-radius-full, 9999px);
    font-size: var(--hc-font-size-xs, 12px);
    font-weight: var(--hc-font-weight-medium, 500);
}

.badge-status.status-pending {
    background: var(--hc-warning-light, rgba(245, 158, 11, 0.1));
    color: var(--hc-warning, #F59E0B);
}

.badge-status.status-answered {
    background: var(--hc-success-light, rgba(34, 197, 94, 0.1));
    color: var(--hc-success, #22C55E);
}

.badge-status.status-solved {
    background: var(--hc-info-light, rgba(59, 130, 246, 0.1));
    color: var(--hc-info, #3B82F6);
}

/* 답변 개수 - 상태 배지와 동일한 스타일 (은은하게) */
.badge-answers {
    display: inline-flex;
    align-items: center;
    padding: var(--hc-space-xs, 4px) var(--hc-space-sm, 8px);
    background: var(--hc-info-light, rgba(59, 130, 246, 0.1));
    color: var(--hc-info, #3B82F6);
    font-size: var(--hc-font-size-xs, 12px);
    font-weight: var(--hc-font-weight-medium, 500);
    border-radius: var(--hc-radius-full, 9999px);
    margin-left: var(--hc-space-xs, 4px);
    vertical-align: middle;
}

.helpdesk-status-filter {
    display: flex;
    gap: var(--hc-space-md, 16px);
    margin-bottom: var(--hc-space-lg, 24px);
    flex-wrap: wrap;
}

.helpdesk-status-btn {
    padding: var(--hc-space-sm, 8px) var(--hc-space-md, 16px);
    background: var(--hc-glass-bg, rgba(255,255,255,0.05));
    backdrop-filter: blur(var(--hc-glass-blur, 12px));
    -webkit-backdrop-filter: blur(var(--hc-glass-blur, 12px));
    border: 1px solid var(--hc-glass-border, rgba(255,255,255,0.1));
    border-radius: var(--hc-radius-full, 9999px);
    font-size: var(--hc-font-size-sm, 14px);
    font-weight: var(--hc-font-weight-medium, 500);
    color: var(--hc-text-dark-secondary, #94A3B8);
    cursor: pointer;
    transition: all var(--hc-transition-fast, 150ms ease);
}

.helpdesk-status-btn:hover {
    background: var(--hc-glass-bg-light, rgba(255,255,255,0.08));
    border-color: var(--hc-accent, #3B82F6);
    color: var(--hc-text-dark-primary, #F8FAFC);
}

.helpdesk-status-btn.active {
    background: var(--hc-accent-light, rgba(59, 130, 246, 0.1));
    backdrop-filter: blur(var(--hc-glass-blur, 12px));
    -webkit-backdrop-filter: blur(var(--hc-glass-blur, 12px));
    border-color: var(--hc-accent, #3B82F6);
    color: var(--hc-accent, #3B82F6);
}

.helpdesk-qa-detail {
    padding: var(--hc-space-lg, 24px) 0;
}

.helpdesk-qa-detail-header {
    margin-bottom: var(--hc-space-lg, 24px);
    padding-bottom: var(--hc-space-lg, 24px);
    border-bottom: 2px solid var(--hc-border-dark, rgba(255,255,255,0.1));
}

.helpdesk-qa-detail-title {
    font-size: var(--hc-font-size-xl, 20px);
    font-weight: var(--hc-font-weight-bold, 700);
    color: var(--hc-text-dark-primary, #F8FAFC);
    margin: 0 0 var(--hc-space-md, 16px) 0;
}

.helpdesk-qa-detail-meta {
    display: flex;
    gap: var(--hc-space-md, 16px);
    flex-wrap: wrap;
    font-size: var(--hc-font-size-sm, 14px);
    color: var(--hc-text-dark-secondary, #94A3B8);
}

.helpdesk-qa-detail-content {
    padding: var(--hc-space-lg, 24px) 0;
    line-height: 1.75;
    color: var(--hc-text-dark-secondary, #94A3B8);
}

.helpdesk-qa-answers {
    margin-top: var(--hc-space-xl, 32px);
    padding-top: var(--hc-space-xl, 32px);
    border-top: 2px solid var(--hc-border-dark, rgba(255,255,255,0.1));
}

.helpdesk-qa-answers-title {
    font-size: var(--hc-font-size-lg, 18px);
    font-weight: var(--hc-font-weight-bold, 700);
    color: var(--hc-text-dark-primary, #F8FAFC);
    margin: 0 0 var(--hc-space-lg, 24px) 0;
}

.helpdesk-qa-answer {
    padding: var(--hc-space-lg, 24px);
    background: var(--hc-glass-bg, rgba(255,255,255,0.05));
    border: 1px solid var(--hc-glass-border, rgba(255,255,255,0.1));
    border-radius: var(--hc-radius-md, 8px);
    margin-bottom: var(--hc-space-md, 16px);
}

.helpdesk-qa-answer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--hc-space-sm, 8px);
    padding-bottom: var(--hc-space-sm, 8px);
    border-bottom: 1px solid var(--hc-border-dark, rgba(255,255,255,0.1));
}

.helpdesk-qa-answer-author {
    font-weight: var(--hc-font-weight-bold, 700);
    color: var(--hc-text-dark-primary, #F8FAFC);
}

.helpdesk-qa-answer-date {
    font-size: var(--hc-font-size-sm, 14px);
    color: var(--hc-text-dark-tertiary, #64748B);
}

.helpdesk-qa-answer-content {
    line-height: 1.7;
    color: var(--hc-text-dark-secondary, #94A3B8);
}

.helpdesk-qa-answer-form {
    margin-top: var(--hc-space-lg, 24px);
    padding: var(--hc-space-lg, 24px);
    background: var(--hc-glass-bg, rgba(255,255,255,0.05));
    border: 1px solid var(--hc-glass-border, rgba(255,255,255,0.1));
    border-radius: var(--hc-radius-md, 8px);
}

.helpdesk-qa-answer-form h4 {
    font-size: var(--hc-font-size-base, 16px);
    font-weight: var(--hc-font-weight-bold, 700);
    color: var(--hc-text-dark-primary, #F8FAFC);
    margin: 0 0 var(--hc-space-md, 16px) 0;
}