/* ============================================
   FAQ 페이지 (자주 묻는 질문)
   헤더는 게시판(board_list)과 동일한 sectionHead/sectionTitle 사용
   브랜드: --accent #003384
   ============================================ */
/* 헤더(제목+설명) 가운데 정렬 + 위아래 여백 */
.faqPage .sectionHead{
    text-align:center;
    margin-top:24px;
    margin-bottom:118px;
}
.faqPage .sectionDesc{
    max-width:680px;
    margin-left:auto;
    margin-right:auto;
}

/* 본문 폭은 다른 페이지처럼 container 전체 사용 */
.faqPage__body{
    width:100%;
}

/* ── 검색창 ── */
.faqSearch{
    position:relative;
    max-width:520px;
    margin:0 auto 22px;
}
.faqSearch__icon{
    position:absolute;left:16px;top:50%;transform:translateY(-50%);
    color:#9aa3b2;pointer-events:none;
}
.faqSearch__input{
    width:100%;
    padding:14px 18px 14px 46px;
    border:1.5px solid #e6e9ef;border-radius:999px;
    font-size:15px;color:#1a2230;background:#fff;outline:none;
    transition:border-color .2s,box-shadow .2s;
}
.faqSearch__input:focus{
    border-color:var(--accent,#003384);
    box-shadow:0 0 0 4px rgba(0,51,132,.08);
}
.faqSearch__input::placeholder{color:#aab2bf;}

/* ── 카테고리 탭 간격 ── */
.faqTabs{
    justify-content:center;
    margin-bottom:28px;
}

/* ── 검색 결과 없음 ── */
.faq-noresult{
    text-align:center;padding:48px 20px;color:#9aa3b2;font-size:15px;
}

/* ── 아코디언 목록 ── */
.faq-list{list-style:none;margin:0;padding:0;}
.faq-item{
    border:1px solid #e6e9ef;
    border-radius:14px;
    margin-bottom:12px;
    background:#fff;
    overflow:hidden;
    transition:border-color .2s,box-shadow .2s;
}
.faq-item--open{
    border-color:var(--accent,#003384);
    box-shadow:0 6px 22px rgba(0,51,132,.08);
}
.faq-item__q{
    display:flex;align-items:center;gap:14px;
    width:100%;border:none;background:none;cursor:pointer;
    padding:20px 22px;text-align:left;
    font-family:inherit;
}
.faq-item__qmark{
    flex-shrink:0;
    display:inline-flex;align-items:center;justify-content:center;
    width:30px;height:30px;border-radius:8px;
    background:var(--accent,#003384);color:#fff;
    font-size:15px;font-weight:900;
}
.faq-item__qtext{
    flex:1;font-size:17px;font-weight:700;color:#1a2230;line-height:1.5;
}
.faq-item__icon{
    flex-shrink:0;color:#9aa3b2;display:inline-flex;
    transition:transform .25s ease,color .2s;
}
.faq-item--open .faq-item__icon{transform:rotate(180deg);color:var(--accent,#003384);}
.faq-item__q:hover .faq-item__qtext{color:var(--accent,#003384);}

.faq-item__a{
    display:flex;gap:14px;
    padding:0 22px 22px 22px;
    animation:faqFade .25s ease;
}
/* hidden 속성이 있을 때 확실히 숨김 (display:flex가 덮어쓰는 문제 방지) */
.faq-item__a[hidden]{display:none;}
.faq-item__amark{
    flex-shrink:0;
    display:inline-flex;align-items:center;justify-content:center;
    width:30px;height:30px;border-radius:8px;
    background:#eef2f9;color:var(--accent,#003384);
    font-size:15px;font-weight:900;
}
.faq-item__atext{
    flex:1;font-size:15.5px;line-height:1.75;color:#4b5563;
    padding-top:3px;word-break:keep-all;
}
.faq-item__atext a{color:var(--accent,#003384);text-decoration:underline;}
@keyframes faqFade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

/* ── 빈 상태 ── */
.faq-empty{
    text-align:center;padding:60px 20px;color:#9aa3b2;
    border:1px dashed #e6e9ef;border-radius:14px;font-size:15px;
}

/* ── 하단 CTA ── */
.faq-cta{
    margin-top:48px;text-align:center;
    padding:36px 24px;border-radius:18px;
    background:linear-gradient(135deg,#f4f7fc,#eaf0fa);
}
.faq-cta__text{font-size:18px;font-weight:800;color:#1a2230;margin:0 0 16px;}

/* ── 반응형 ── */
@media(max-width:768px){
    .faq-page{padding:44px 16px 72px;}
    .faq-page__title{font-size:26px;}
    .faq-page__desc{font-size:15px;}
    .faq-item__q{padding:16px 16px;gap:11px;}
    .faq-item__qmark,.faq-item__amark{width:26px;height:26px;font-size:13px;}
    .faq-item__qtext{font-size:15.5px;}
    .faq-item__a{padding:0 16px 18px 16px;gap:11px;}
    .faq-item__atext{font-size:14.5px;}
}