/* BASIC css start */
/* BASIC css start */
/* BASIC css start */
#faqWrap {
    padding: 15px;
}
 
        /* 3. 고객센터 메뉴 그리드 */
        .cs-grid {display: grid;grid-template-columns: repeat(3, 1fr);border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;border-left: 1px solid #ddd;}
        .cs-grid > div {border-right: 1px solid #ddd;border-bottom: 1px solid #ddd;text-align: center;font-size: 12px;color: #333333;letter-spacing: -0.02em;}
        
        .cs-grid > div > a {padding: 7px 0;display: block;font-size: 12px;color: #333333;letter-spacing: -0.02em;}
        .cs-grid > div:nth-child(3n) {/* border-right: none; */}
        .cs-grid > div:nth-last-child(-n+3) { border-bottom: none; }
        .cs-grid > div.active > a { background-color: #555; color: #fff; font-weight: 500; }

        /* 4. 검색 영역 */
        .search-section { padding: 20px; background-color: #f9f9f9; text-align: center; }
        .search-section h2 { font-size: 18px; margin-bottom: 15px; font-weight: 700; }
        .search-box {display: flex;background: #fff;border: 1px solid #333;border-radius: 20px;align-items: center;height: 30px;width: 100%;padding: 0 10px;box-sizing: border-box;}
        .search-box input {flex: 1;border: none;outline: none;font-size: 12px;letter-spacing: -0.02em;font-weight: 400;height: 95%;background: transparent;padding: 0;}
.search-box input ::placeholder {color:#aaa;}

.search-box a img {
    width: 17px;
}
        /* 5. 필터 및 FAQ 리스트 */
/* 필터 영역 가운데 정렬 */
.filter-wrap {
    text-align: center;
    padding: 15px 0;
}

/* Select 박스 커스텀 스타일 */
.filter-wrap select {
    appearance: none; /* 브라우저 기본 디자인 제거 */
    -webkit-appearance: none; /* 사파리/크롬 대응 */
    -moz-appearance: none; /* 파이어폭스 대응 */
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 5px 30px 5px 15px;
    background-color: #fff;
    font-size: 13px;
    color: #555;
    cursor: pointer;
    font-family: inherit;
    
    /* 오른쪽에 꺾쇠(∨) 모양 커스텀 화살표 배경으로 삽입 */
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0L5 5L10 0' stroke='%23555' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px 6px;
    height: 30px;
    width: 100px;
}

/* 포커스 시 테두리 아웃라인 제거 */
.filter-wrap select:focus {
    outline: none;
    border-color: #333;
}
        .faq-list {margin: 0 10px;border-top: 1px solid #ddd;}
        .faq-item {border-bottom: 1px solid #ddd;}
        .faq-q {display: flex;align-items: center;    padding: 8px 7px 8px 10px;cursor: pointer;}
        .faq-q .icon-q {width: 24px;height: 24px;background: #777777;color: #fff;border-radius: 50%;display: flex;justify-content: center;align-items: center;font-size: 14px;font-weight: bold;flex-shrink: 0;}
        .faq-q .q-text {flex: 1;margin: 0 10px;font-size: 12px;color: #333;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
        .faq-q .toggle-icon {color: #888;font-size: 14px;width: 16px;height: 16px;background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23404040' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center;transition: transform 0.3s ease;flex-shrink: 0;}
        
        .faq-a {display: none;background-color: #f4f6f8;padding: 10px;border-top: 1px solid #ddd;color: #333333;font-size: 12px;font-weight: bold;}
        .faq-a .icon-a {width: 24px;height: 24px;background: #14ada8;color: #fff;border-radius: 50%;display: flex;justify-content: center;align-items: center;font-size: 14px;font-weight: bold;flex-shrink: 0;line-height: 1;}
        .faq-a .a-text { font-size: 13px; color: #333; line-height: 1.5; font-weight: 500; }

        /* 기본적으로 열려있는 항목 설정용 클래스 */
        .faq-item.open .faq-a {display: flex !important;gap: 10px;}
        .faq-item.open .faq-q .toggle-icon { transform: rotate(180deg); }

     

.faq-section {
    background: #f2f4f6;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 25px;
    gap: 13px;
    margin-top: 15px;
    border-radius: 4px;
}

.faq-section h2 {
    color: #000000;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: -0.02em;
}

#faqWrap .mypage-cs-info {
    border: 1px solid #eeeeee;
} 
#faqWrap .cs-bank {
    border-top: 1px solid #eee;
}
#faqWrap .cs-phone > a {
    color: #000;
}

/* BASIC css end */


/* BASIC css end */