@charset "utf-8";

/* =========================================================
   다이트 자주묻는 질문 (FAQ 아코디언)
   ========================================================= */

.faq_wrap { padding: 70px 16.66% 100px; box-sizing: border-box; }

/* ----- 제목 + 검색 ----- */
.faq_head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 48px; }
.faq_title { font-size: 46px; line-height: 1.2; letter-spacing: -0.02em; color: #29203B; white-space: nowrap; }
.faq_search { display: flex; align-items: center; gap: 10px; flex: 1; max-width: 620px; }
.faq_search .search_field { flex: 1; display: flex; align-items: center; border: 1px solid #DFDFDF; border-radius: 100px;
    padding: 10px 24px; box-sizing: border-box; background: url(../images/icon_search.png) no-repeat right 20px center; background-size: 20px; }
.faq_search input.search { width: 100%; border: none; outline: none; background: transparent;
    font-family: 'Spoqa Han Sans Neo', sans-serif; font-weight: 300; font-size: 18px; line-height: 26px; letter-spacing: -0.02em; color: #242424; }
.faq_search input.search::placeholder { color: #999; }
.faq_search .search_submit { flex: none; border: none; cursor: pointer; color: #fff; background: #8556E3; border-radius: 100px;
    font-weight: 700; font-size: 18px; line-height: 26px; padding: 11px 32px; }
.faq_search .search_submit:hover { background: #7343d6; }

/* ----- 카테고리 탭 (밑줄형) ----- */
.faq_tabs { display: flex; flex-wrap: wrap; gap: 8px 36px; border-bottom: 1px solid #E5E5E5; margin-bottom: 8px; }
.faq_tabs a { position: relative; display: block; padding: 14px 4px; font-size: 18px; color: #888; transition: color .15s; }
.faq_tabs a:hover { color: #29203B; }
.faq_tabs a.on { color: #29203B; font-weight: 600; }
.faq_tabs a.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: #29203B; }

/* ----- 아코디언 목록 ----- */
.faq_list { border-top: 2px solid #29203B; }
.faq_list .faq_item { border-bottom: 1px solid #E7E7E7; }

.faq_list .question { display: flex; align-items: center; gap: 24px; padding: 28px 16px; cursor: pointer; }
.faq_list .cate { flex: none; width: 72px; color: #8556E3; font-weight: 500; font-size: 18px; letter-spacing: -0.02em; }
.faq_list .question p { flex: 1; min-width: 0; font-weight: 400; font-size: 20px; line-height: 1.4; color: #29203B; letter-spacing: -0.02em; }
.faq_list .question .arrow { flex: none; width: 16px; height: 16px; border-right: 2px solid #999; border-bottom: 2px solid #999;
    transform: rotate(45deg); margin-top: -6px; transition: transform .25s; }
.faq_list .faq_item.active .question .arrow { transform: rotate(225deg); margin-top: 4px; }
.faq_list .faq_item.active .question p { font-weight: 600; }

/* 관리자 버튼 */
.faq_list .faq_admin_btns { flex: none; }
.faq_list .faq_admin_btns .btn_admin { display: inline-block; padding: 3px 10px; background: #f0f0f0; border: 1px solid #ccc;
    border-radius: 4px; font-size: 12px; color: #333 !important; text-decoration: none; }
.faq_list .faq_admin_btns .btn_admin:hover { background: #e0e0e0; }

/* 답변 (펼침) */
.faq_list .answer { display: none; padding: 28px 16px 32px 112px; background: #FAF8FE; font-size: 17px; line-height: 1.7; color: #444; }
.faq_list .answer img { max-width: 100%; height: auto; }
.faq_list .faq_item.active .answer { display: block; }

/* ----- 빈 목록 ----- */
.faq_empty { width: 100%; text-align: center; padding: 80px 0; color: #888; font-size: 16px; border-top: 2px solid #29203B; border-bottom: 1px solid #E7E7E7; }

/* ----- 글쓰기 버튼 (관리자) ----- */
.faq_write_box { text-align: right; margin-top: 28px; }
.faq_write_box .btn_write { background: #8556E3; color: #fff; border: none; border-radius: 8px; padding: 11px 30px; cursor: pointer; font-weight: 700; font-size: 16px; }
.faq_write_box .btn_write:hover { background: #7343d6; }

/* ----- 페이지네이션 (그누보드 pg_wrap) ----- */
.pagination_box { margin-top: 50px; text-align: center; }
.pagination_box .pg_wrap { display: inline-block; }
.pagination_box .pg { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.pagination_box .pg_page,
.pagination_box .pg_current { display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 6px; border-radius: 50%;
    font-family: 'Inter', sans-serif; font-weight: 400; font-size: 18px; color: #555; text-decoration: none; box-sizing: border-box; }
.pagination_box a.pg_page:hover { color: #8556E3; }
.pagination_box .pg_current { background: rgba(220, 204, 255, 0.42); color: #8556E3; font-weight: 600; }
.pagination_box .pg_start, .pagination_box .pg_prev,
.pagination_box .pg_next, .pagination_box .pg_end { color: #999; font-size: 16px; }

/* =========================================================
   반응형
   ========================================================= */
@media screen and (max-width:1540px) { .faq_wrap { padding: 70px 12% 100px; } }
@media screen and (max-width:1440px) { .faq_wrap { padding: 70px 8% 100px; } }
@media screen and (max-width:1058px) { .faq_wrap { padding: 56px 6% 90px; } }

@media screen and (max-width:1024px) {
    .faq_head { flex-direction: column; align-items: stretch; gap: 18px; margin-bottom: 32px; }
    .faq_title { font-size: 30px; text-align: left; }
    .faq_search { max-width: none; }
    .faq_tabs { gap: 4px 20px; }
    .faq_tabs a { font-size: 16px; }
    .faq_list .question p { font-size: 17px; }
}

@media screen and (max-width:768px) {
    .faq_wrap { padding: 36px 5% 60px; }
    .faq_title { font-size: 24px; }
    .faq_search input.search { font-size: 15px; }
    .faq_search .search_submit { font-size: 15px; padding: 10px 20px; }
    .faq_tabs { gap: 2px 14px; }
    .faq_tabs a { font-size: 14px; padding: 12px 2px; }
    .faq_list .question { gap: 12px; padding: 20px 6px; }
    .faq_list .cate { width: 56px; font-size: 14px; }
    .faq_list .question p { font-size: 15px; }
    .faq_list .answer { padding: 20px 6px 24px 6px; font-size: 15px; }
    .pagination_box .pg_page, .pagination_box .pg_current { min-width: 34px; height: 34px; font-size: 16px; }
}