/* ============================================
   FAQ 페이지 (자주 묻는 질문) — site4
   site1 faq.css 이식, site4 에듀리온 브랜드 팔레트 적용
   accent: var(--green-dark) #2B51D8
   ============================================ */
.faqPage{padding:80px 0 120px;}

/* ── 헤더(제목+설명) ── */
.faqPage__head{
    text-align:center;
    margin-top:24px;
    margin-bottom:70px;
}
.faqPage__title{
    margin:0;
    font-size:33px;
    letter-spacing:-.5px;
    line-height:1.25;
    color:var(--fg,#1a1a1a);
    font-weight:900;
}
.faqPage__title--accent{color:var(--green-dark,#2B51D8);}
.faqPage__desc{
    margin:14px auto 0;
    max-width:680px;
    color:var(--muted,#888);
    font-size:17px;
    line-height:1.65;
    font-weight:600;
}
.faqPage__desc a{color:var(--green-dark,#2B51D8);text-decoration:underline;font-weight:800;}

.faqPage__body{width:100%;max-width:900px;margin:0 auto;}

/* ── 검색창 ── */
.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 var(--border,#e8e0d4);border-radius:999px;
    font-size:15px;color:var(--fg,#1a1a1a);background:#fff;outline:none;
    transition:border-color .2s,box-shadow .2s;
}
.faqSearch__input:focus{
    border-color:var(--green-dark,#2B51D8);
    box-shadow:0 0 0 4px rgba(61,107,250,.14);
}
.faqSearch__input::placeholder{color:#aab2bf;}

/* ── 카테고리 탭 (base는 style.css .categoryTabs 사용) ── */
.faqTabs{
    justify-content:center;
    margin-bottom:28px;
}
.categoryTabs__count{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:20px;height:20px;padding:0 6px;
    border-radius:999px;font-size:11.5px;font-weight:800;
    background:rgba(0,0,0,.08);
}
.categoryTabs__item--active .categoryTabs__count{
    background:rgba(255,255,255,.28);
}

/* ── 검색 결과 없음 ── */
.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 var(--border,#e8e0d4);
    border-radius:14px;
    margin-bottom:12px;
    background:#fff;
    overflow:hidden;
    transition:border-color .2s,box-shadow .2s;
}
.faq-item--open{
    border-color:var(--green-dark,#2B51D8);
    box-shadow:0 6px 22px rgba(61,107,250,.14);
}
.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(--green-dark,#2B51D8);color:#fff;
    font-size:15px;font-weight:900;
}
.faq-item__qtext{
    flex:1;font-size:17px;font-weight:700;color:var(--fg,#1a1a1a);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(--green-dark,#2B51D8);}
.faq-item__q:hover .faq-item__qtext{color:var(--green-dark,#2B51D8);}

.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:#F5F5F7;color:var(--green-dark,#2B51D8);
    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(--green-dark,#2B51D8);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 var(--border,#e8e0d4);border-radius:14px;font-size:15px;
}

/* ── 하단 CTA ── */
.faq-cta{
    margin-top:48px;text-align:center;
    padding:36px 24px;border-radius:18px;
    background:#F5F5F7;
}
.faq-cta__text{font-size:18px;font-weight:800;color:var(--fg,#1a1a1a);margin:0 0 16px;}

/* ── 반응형 ── */
@media(max-width:768px){
    .faqPage{padding:44px 0 72px;}
    .faqPage__title{font-size:26px;}
    .faqPage__desc{font-size:15px;}
    .faqPage__head{margin-bottom:44px;}
    .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;}
}