/* simple_community Board Skin - FAQ List Styles */

.faq_list { margin-bottom: 20px; border-top: 1px solid var(--border-color); }
.faq_item { border-bottom: 1px solid var(--border-color); background: #fff; transition: background 0.2s ease; }
.faq_item:hover { background: #f8fafc; }

/* FAQ Question (Header) */
.faq_header { display: flex; align-items: flex-start; padding: 18px 20px; cursor: pointer; position: relative; gap: 15px; }
.faq_header .q_icon { 
    display: inline-flex; align-items: center; justify-content: center; 
    width: 24px; height: 24px; border-radius: 50%; 
    background: var(--point-color); color: #fff; 
    font-size: 14px; font-weight: 800; flex-shrink: 0;
    margin-top: 1px;
}
.faq_header .title_area { flex: 1; min-width: 0; }
.faq_header .category { display: block; font-size: 12px; color: var(--point-color); font-weight: 700; margin-bottom: 4px; }
.faq_header .title_text { font-size: 15px; font-weight: 600; color: var(--text-main); line-height: 1.5; word-break: break-all; }

.faq_header .arrow_icon { 
    width: 20px; height: 20px; color: var(--text-mute); transition: transform 0.3s ease; flex-shrink: 0; margin-top: 2px;
}
.faq_item.active .faq_header { background: #f0f4ff; }
.faq_item.active .faq_header .arrow_icon { transform: rotate(180deg); color: var(--point-color); }

/* FAQ Answer (Content) */
.faq_body { display: none; background: #fafbff; border-top: 1px dashed var(--border-color); }
.faq_body_inner { padding: 25px 20px 25px 59px; position: relative; }
.faq_body_inner .a_icon { 
    position: absolute; left: 20px; top: 25px;
    display: inline-flex; align-items: center; justify-content: center; 
    width: 24px; height: 24px; border-radius: 50%; 
    background: #475569; color: #fff; 
    font-size: 14px; font-weight: 800;
}
.faq_body_inner .content_area { font-size: 14px; line-height: 1.8; color: #334155; }
.faq_body_inner .content_area img { max-width: 100%; height: auto; border-radius: 8px; margin: 10px 0; }

/* Admin Controls in FAQ */
.faq_header .admin_chk { margin-right: 5px; margin-top: 4px; }
.faq_footer { display: flex; justify-content: flex-end; padding: 10px 20px; gap: 10px; border-top: 1px solid #f1f5f9; }

/* Responsive */
@media (max-width: 768px) {
    .faq_header { padding: 15px; gap: 10px; }
    .faq_header .q_icon { width: 22px; height: 22px; font-size: 12px; }
    .faq_header .title_text { font-size: 14px; }
    .faq_body_inner { padding: 20px 15px 20px 47px; }
    .faq_body_inner .a_icon { left: 15px; top: 20px; width: 22px; height: 22px; font-size: 12px; }
}