/* FAQ 페이지 전용 스타일 */
/* 공통 CSS 우선 적용, 기존 구조 절대 건드리지 않음 */

/* ==================== FAQ 리스트 콘텐츠 폰트 사이즈 ==================== */
/* 기존 공통 CSS 구조 유지하면서 폰트 사이즈만 피그마 기준으로 조정 */
.customer #content.faq .faq_item .tit {
    font-size: 18px; /* PC 기준 18px */
}

.customer #content.faq .faq_details .txt {
    font-size: 18px; /* PC 기준 18px */
}

/* ==================== FAQ 컨테이너 ==================== */
.customer #content.faq {
    background: #F1F1F1;
    padding: 120px 0 180px;
}

/* ==================== 검색 영역 ==================== */
.faq_search_area {
    display: flex;
    justify-content: center;
    margin-bottom: 80px;
}

.faq_search_form {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 530px;
}

.faq_search_input_wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 56px;
    background: #FFFFFF;
    border: 1px solid #E3E3E3;
    border-right: none;
    box-sizing: border-box;
}

.faq_search_input {
    flex: 1;
    height: 28px;
    border: none;
    outline: none;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 16px;
    line-height: 28px;
    color: #2e2e2e;
    background: transparent;
}

.faq_search_input::placeholder {
    color: #A5A5A5;
    font-weight: 400;
}

.faq_search_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 56px;
    background: #0E3480;
    border: none;
    color: #FFFFFF;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 28px;
    cursor: pointer;
    box-sizing: border-box;
}

.faq_search_btn:hover {
    background: #003480;
}

/* ==================== 카테고리 태그 영역 ==================== */
.faq_category_area {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
    padding: 0 20px;
    gap: 12px;
}

.faq_category_tags_wrapper {
    display: flex;
    flex-direction: row;
    justify-content: flex-start; /* 피그마 기준 왼쪽 정렬 */
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px 4px; /* 세로 12px, 가로 4px */
    max-width: 1398px;
    width: 100%;
}

.faq_category_tag {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 24px;
    height: 42px;
    background: #FFFFFF;
    border: 1px solid #0E3480;
    border-radius: 50px;
    color: #0E3480;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 23px;
    letter-spacing: -0.02em;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    box-sizing: border-box;
}

.faq_category_tag:hover {
    background: #f8f9fa;
}

.faq_category_tag.active {
    background: #0E3480;
    border: 1px solid #0E3480;
    color: #FFFFFF;
}

.faq_category_tag.disabled {
    background: #FFFFFF;
    border: 1px solid #A5A5A5;
    color: #A5A5A5;
    cursor: not-allowed;
}

.faq_category_tag.disabled:hover {
    background: #FFFFFF;
}

.faq_category_notice {
    align-self: stretch;
    text-align: left; /* 피그마 기준 좌측 정렬 */
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 17px;
    letter-spacing: -0.02em;
    color: #AAAAAA;
    margin: 0;
}

/* ==================== 검색 결과 없음 영역 ==================== */
.no_result_area {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 120px 0;
    gap: 80px;
    width: 100%;
    max-width: 1398px;
    margin: 0 auto;
}

.no_result_message {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    color: #000000;
    text-align: center;
}

.no_result_action {
    display: flex;
    justify-content: center;
}

.btn_list {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    width: 165px;
    height: 56px;
    background: #0E3480;
    border: none;
    color: #FFFFFF;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 28px;
    cursor: pointer;
    box-sizing: border-box;
    white-space: nowrap; /* 텍스트 줄바뿜 방지 */
}

.btn_list:hover {
    background: #003480;
}

/* ==================== 페이징 영역 ==================== */
.faq_pagination_area {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0;
    gap: 10px;
    width: 100%;
    max-width: 1398px;
    height: 56px;
    margin: 60px auto 0; /* 리스트와 페이징 사이 간격 추가 */
}

/* 페이지 개수 선택 */
.faq_per_page_selector {
    display: flex;
    align-items: center;
    width: 175px;
    height: 56px;
}

.faq_per_page_select {
    width: 100%;
    height: 100%;
    padding: 0 50px 0 20px; /* 화살표 공간 확보 */
    background: #FFFFFF;
    border: 1px solid #E3E3E3;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 18px; /* PC 기준 18px */
    font-weight: 400;
    line-height: 28px;
    color: #666666;
    cursor: pointer;
    box-sizing: border-box;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 40 40'%3e%3cpath stroke='%23666666' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m12 15 8 8 8-8'/%3e%3c/svg%3e");
    background-position: right 8px center;
    background-repeat: no-repeat;
    background-size: 40px 40px; /* 정확한 40x40 사이즈 */
}

/* 페이지 네비게이션 */
.faq_page_navigation {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0 185px 0 0;
    gap: 8px;
    flex: 1;
    height: 36px;
}

.faq_page_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: 'Noto Sans KR', sans-serif;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

/* 이전/다음 버튼 */
.faq_page_prev,
.faq_page_next {
    width: 36px;
    height: 36px;
    background: #F1F1F1;
    border: 1px solid #666666;
    border-radius: 0;
}

/* 이전 버튼 활성화 시 파란색 배경 */
.faq_page_prev:not(:disabled) {
    background: #11337B;
    border-color: #11337B;
}

/* 다음 버튼 활성화 시 파란색 배경 */
.faq_page_next:not(:disabled) {
    background: #11337B;
    border-color: #11337B;
}

.faq_page_prev:hover:not(:disabled),
.faq_page_next:hover:not(:disabled) {
    background: #0E3480;
    border-color: #0E3480;
}

.faq_page_prev:disabled,
.faq_page_next:disabled {
    background: #F1F1F1;
    border-color: #CCCCCC;
    cursor: not-allowed;
}

/* 페이지 아이콘 */
.faq_page_icon {
    width: 16px;
    height: 16px;
    display: block;
}

.faq_page_icon.prev {
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='%23C3CBDE' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m10 12-4-4 4-4'/%3e%3c/svg%3e") no-repeat center;
}

.faq_page_icon.next {
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='%23C3CBDE' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 4 4 4-4 4'/%3e%3c/svg%3e") no-repeat center;
}

/* disabled 상태 아이콘 색상 */
.faq_page_prev:disabled .faq_page_icon.prev,
.faq_page_next:disabled .faq_page_icon.next {
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='%23CCCCCC' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m10 12-4-4 4-4'/%3e%3c/svg%3e") no-repeat center;
}

.faq_page_next:disabled .faq_page_icon.next {
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='%23CCCCCC' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 4 4 4-4 4'/%3e%3c/svg%3e") no-repeat center;
}

/* 페이지 번호들 */
.faq_page_numbers {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0;
    gap: 0; /* 피그마 기준 버튼 간 간격 없음 */
}

.faq_page_number {
    width: 36px;
    height: 36px;
    padding: 8px 13px;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 16px; /* 피그마 기준 PC/모바일 16px */
    font-weight: 500; /* 피그마 기준 500 */
    line-height: 20px; /* 피그마 기준 20px */
    color: #666666;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.faq_page_number.active {
    font-weight: 700; /* 피그마 기준 700 */
    color: #003480; /* 피그마 기준 색상 */
    background: transparent;
}

.faq_page_number:hover:not(.active) {
    background: #F8F9FA;
}

/* PC에서 JavaScript로 페이지 번호 동적 제어 */

/* ==================== 반응형: 모바일 (공통 CSS 기준 1024px) ==================== */
@media (max-width: 1024px) {
    .customer #content.faq {
        padding: 50px 20px 60px;
    }
    
    .faq_search_area {
        margin-bottom: 30px;
    }
    
    .faq_search_form {
        max-width: 100%;
    }
    
    .faq_search_input_wrapper {
        flex: 1;
        min-width: 0; /* flex 아이템 최소 너비 제한 해제 */
    }
    
    .faq_search_input {
        font-size: 16px; /* iOS 줌 방지 */
    }
    
    .faq_search_btn {
        width: 80px;
        font-size: 16px;
    }
    
    /* 카테고리 태그 모바일 스타일 */
    .faq_category_area {
        align-items: flex-start;
        padding: 0;
        gap: 12px;
    }
    
    .faq_category_tags_wrapper {
        justify-content: flex-start;
        gap: 12px 4px; /* 모바일도 동일한 간격 */
        width: 100%;
    }
    
    .faq_category_tag {
        min-width: 62px;  /* 피그마 최소 버튼 너비 */
        max-width: 105px; /* 피그마 최대 버튼 너비 */
        padding: 0 18px;
        height: 38px;
        font-size: 14px;
        line-height: 20px;
        box-sizing: border-box;
    }
    
    .faq_category_notice {
        font-size: 14px;
        line-height: 17px;
        text-align: left;
        align-self: flex-start;
    }
    
    /* FAQ 리스트 콘텐츠 모바일 폰트 사이즈 */
    .customer #content.faq .faq_item .tit {
        font-size: 16px; /* 모바일 기준 16px */
    }
    
    .customer #content.faq .faq_details .txt {
        font-size: 16px; /* 모바일 기준 16px */
    }
    
    /* 검색 결과 없음 모바일 스타일 */
    .no_result_area {
        padding: 60px 0;
        gap: 40px;
    }
    
    .no_result_message {
        width: 333px;
        max-width: 333px;
        margin: 0 auto;
        font-size: 18px;
        line-height: 22px;
        text-align: center;
    }
    
    .btn_list {
        width: 165px; /* PC와 동일한 사이즈 */
        height: 56px;
        font-size: 16px;
        white-space: nowrap; /* 텍스트 줄바뿜 방지 */
    }
    
    /* 페이징 모바일 스타일 */
    .faq_pagination_area {
        flex-direction: column;
        gap: 30px; /* 드롭박스-페이지네이션 간격 30px */
        height: auto;
        padding: 0;
        margin-top: 30px; /* 리스트-드롭박스 간격 30px */
    }
    
    .faq_per_page_selector {
        width: 100%;
        max-width: 100%; /* FAQ 박스와 동일한 전체 너비 */
        order: 1; /* 드롭박스가 위로 */
    }
    
    .faq_per_page_select {
        font-size: 16px; /* 모바일 기준 16px */
    }
    
    .faq_page_navigation {
        padding: 0;
        gap: 8px;
        width: 100%;
        max-width: 100%; /* FAQ 박스와 동일한 전체 너비 */
        justify-content: center;
        order: 2; /* 페이지네이션이 아래로 */
    }
    
    .faq_page_numbers {
        gap: 0; /* 피그마 기준 간격 없음 */
    }
    
    .faq_page_number {
        width: 36px;
        height: 36px;
        font-family: 'Noto Sans KR', sans-serif;
        font-size: 16px; /* 모바일도 16px 유지 */
        font-weight: 500;
        line-height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }
    
    .faq_page_prev,
    .faq_page_next {
        width: 36px;
        height: 36px;
    }
    
    /* 모바일에서 JavaScript로 페이지 번호 동적 제어 */
    
    /* ==================== 모바일 FAQ 아이템 간격 조정 ==================== */
    /* 피그마 기준: 모바일에서 .tit와 .btn_plus 사이 20px 간격 */
    .customer #content.faq .faq_item .tit {
        display: flex;
        align-items: flex-start;
        gap: 20px; /* 피그마 기준 20px 간격 */
    }
    
    /* 제목 텍스트 영역 - 남은 공간 최대한 활용 */
    .customer #content.faq .faq_item .tit {
        flex: 1; /* 텍스트가 가능한 모든 공간 사용 */
        min-width: 0; /* flex 아이템의 최소 너비 제한 해제 */
    }
    
    .customer #content.faq .faq_item .tit .btn_plus {
        flex-shrink: 0; /* 버튼 크기 고정 */
        margin-left: auto; /* 버튼을 우측 끝으로 밀어냄 */
    }
}