/* ==========================================================================
   FAQ page styles
   ========================================================================== */

:root {
    --faq-blue: #3476f0;
    --faq-blue-hover: #245ec7;
    --faq-blue-light: #6ea8fe;
    --faq-border: #d2d2d2;
    --faq-ink: #111111;
    --faq-body: #495057;
    --faq-blue-rgb: 52, 118, 240;

    --faq-card: #ffffff;
    --faq-card-hover: #e6f0ff;
    --faq-card-border: #d2d2d2;
    --faq-card-open-border: #3476f0;
    --faq-card-open-bg: #ffffff;

    --faq-category-btn-bg: #ffffff;
    --faq-category-btn-color: #212529;
    --faq-category-btn-border: #d2d2d2;
    --faq-category-btn-hover-bg: rgba(52, 118, 240, 0.08);
    --faq-category-btn-hover-color: #3476f0;
    --faq-category-btn-hover-border: #3476f0;

    --faq-divider: #d2d2d2;
    --faq-open-title: #3476f0;
    --faq-open-icon: #3476f0;
}

[data-bs-theme="dark"],
html[data-bs-theme="dark"] {
    --faq-blue: #3476f0;
    --faq-blue-hover: #3880ff;
    --faq-blue-light: #89b2ff;
    --faq-border: #12203b;
    --faq-ink: #f0f0f5;
    --faq-body: #c3c3cd;
    --faq-blue-rgb: 52, 118, 240;

    /* 이전 다크모드 스타일 복원: figma-raised (#172e58) 네이비 블루 카드 */
    --faq-card: #172e58;
    --faq-card-hover: #11233b;
    --faq-card-border: #1a2e50;
    --faq-card-open-border: #3880ff;
    --faq-card-open-bg: #172e58;

    /* 카테고리 알약 버튼 다크모드 색상 */
    --faq-category-btn-bg: #101f38;
    --faq-category-btn-color: #c3c3cd;
    --faq-category-btn-border: #1c3258;
    --faq-category-btn-hover-bg: #11233b;
    --faq-category-btn-hover-color: #3880ff;
    --faq-category-btn-hover-border: #3880ff;

    /* 검색박스 다크모드 색상 */
    --faq-divider: rgba(255, 255, 255, 0.18);
    --faq-open-title: #3880ff;
    --faq-open-icon: #3880ff;
}

[data-faq-root] [hidden] {
    display: none !important;
}

/* --------------------------------------------------------------------------
   본문 컨테이너 및 푸터 하단 여백 (Footer Spacing)
   -------------------------------------------------------------------------- */
.support-faq-page .support-page-content,
[data-faq-root] .support-page-content {
    padding-bottom: 72px !important;
}

/* --------------------------------------------------------------------------
   툴바 & 검색 영역
   -------------------------------------------------------------------------- */
.support-faq-toolbar {
    margin-bottom: 2rem;
}

/* --------------------------------------------------------------------------
   카테고리 개별 알약 칩 버튼 (Pill Chips, 자동 줄바꿈)
   -------------------------------------------------------------------------- */
.support-faq-categories {
    margin-bottom: 2.25rem;
    overflow: visible !important;
}

#categoryBtnGroup,
.support-faq-category-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center;
    gap: 0.6rem 0.5rem !important;
    border: none !important;
    border-radius: 30px;
    background: transparent !important;
    padding: 8px 4px !important;
    overflow: visible !important;
    max-width: 900px;
    margin: 0 auto;
    box-shadow: none !important;
}

#categoryBtnGroup .btn,
.support-faq-category-btn {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center;
    justify-content: center;
    min-width: fit-content;
    height: 44px;
    margin: 0 !important;
    padding: 0 20px !important;
    border: 1px solid var(--faq-category-btn-border, var(--faq-border)) !important;
    border-radius: 999px !important;
    color: var(--faq-category-btn-color, var(--faq-ink)) !important;
    background: var(--faq-category-btn-bg, #ffffff) !important;
    font-size: 15px;
    font-weight: 500 !important;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
    cursor: pointer;
    position: relative;
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

#categoryBtnGroup .btn:hover,
.support-faq-category-btn:hover {
    color: var(--faq-category-btn-hover-color, var(--faq-blue)) !important;
    border-color: var(--faq-category-btn-hover-border, var(--faq-blue)) !important;
    background: var(--faq-category-btn-hover-bg, rgba(var(--faq-blue-rgb), 0.06)) !important;
    transform: translateY(-2px);
    z-index: 2 !important;
}

#categoryBtnGroup .btn:focus,
#categoryBtnGroup .btn:focus-visible,
.support-faq-category-btn:focus,
.support-faq-category-btn:focus-visible {
    outline: 2px solid var(--faq-blue) !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(var(--faq-blue-rgb), 0.35) !important;
    z-index: 3 !important;
}

#categoryBtnGroup .btn.active,
#categoryBtnGroup .btn[aria-pressed="true"],
.support-faq-category-btn.active,
.support-faq-category-btn[aria-pressed="true"] {
    border-radius: 999px !important;
    color: #ffffff !important;
    background: var(--faq-blue) !important;
    border-color: var(--faq-blue) !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(var(--faq-blue-rgb), 0.4) !important;
    transform: translateY(-1px);
    z-index: 1 !important;
}

/* --------------------------------------------------------------------------
   검색 결과 카운트 & 빈 상태
   -------------------------------------------------------------------------- */
.support-faq-status-wrap {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 0.5rem;
    margin-bottom: 1rem;
}

.support-faq-status {
    font-size: 0.9rem;
    color: var(--bs-secondary-color, #6c757d);
    font-weight: 500;
}

.support-faq-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    margin: 2rem 0;
    background-color: var(--bs-tertiary-bg, #f8f9fa);
    border-radius: 1.25rem;
    border: 1px dashed var(--faq-border);
}

.support-faq-empty-text {
    font-size: 1.05rem;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 1.25rem;
}

.support-faq-empty .support-faq-reset-btn {
    border: 1px solid var(--faq-blue);
    color: var(--faq-blue);
    border-radius: 2rem;
    padding: 0.5rem 1.5rem;
    width: auto;
    height: auto;
    background-color: var(--bs-body-bg, #ffffff) !important;
    font-weight: 600;
    font-size: 0.95rem;
}

.support-faq-empty .support-faq-reset-btn:hover {
    background-color: var(--faq-blue) !important;
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   FAQ 질문 카드 목록 & 아코디언 컴포넌트
   -------------------------------------------------------------------------- */
.support-faq-groups {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.support-faq-group {
    scroll-margin-top: 100px;
}

.support-faq-group h2 {
    margin: 0 0 16px;
    color: var(--faq-ink);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: break-word;
}

.support-faq-accordion-item {
    border: 1px solid var(--faq-card-border, var(--faq-border)) !important;
    border-radius: 24px !important;
    background: var(--faq-card, #ffffff) !important;
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    scroll-margin-top: 100px;
}

.support-faq-accordion-item:hover {
    border-color: var(--faq-card-open-border, var(--faq-blue)) !important;
    background: var(--faq-card-hover, #e6f0ff) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    z-index: 1;
    color: var(--figma-blue);
    transform: translateX(4px);
    transition: all 0.2s ease;
    cursor: pointer;
}

.support-faq-accordion-item[open] {
    border: 2px solid var(--faq-card-open-border, var(--faq-blue)) !important;
    background: var(--faq-card-open-bg, var(--faq-card, #ffffff)) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35) !important;
}

.support-faq-question {
    display: flex !important;
    align-items: center !important;
    gap: 24px;
    border: 0;
    color: var(--figma-ink);
    text-align: left;
    width: 100%;
    min-height: 76px;
    padding: 20px 40px !important;
    cursor: pointer;
    user-select: none;
    list-style: none;
    position: relative;
    background: transparent;
    transition: background-color 0.15s ease;
}

.support-faq-question::-webkit-details-marker,
.support-faq-question::marker,
.support-faq-question::before,
.support-faq-question::after {
    display: none !important;
}

.support-faq-question:hover {
    background: rgba(var(--landing-blue-rgb, 13, 110, 253), 0.05) !important;
    border-color: var(--figma-blue) !important;
    transform: translateX(4px);
}

[data-faq-root] .support-faq-accordion-item:has(> .support-faq-question:focus-visible) {
    border-color: var(--faq-card-open-border, var(--faq-blue)) !important;
    box-shadow: 0 0 0 3px rgba(var(--faq-blue-rgb), 0.35) !important;
}

.support-faq-question,
.support-faq-question:focus,
.support-faq-question:focus-visible,
summary.support-faq-question,
summary.support-faq-question:focus,
summary.support-faq-question:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* 카테고리 알약 배지 */
.support-inline-badge,
.support-faq-question .support-inline-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 80px !important;
    max-width: none !important;
    height: 32px;
    padding: 0 16px !important;
    border-radius: 20px;
    border: 1px solid rgba(var(--landing-violet-rgb), 0.16);
    letter-spacing: 0.04em;
    background: var(--faq-blue, #3476f0);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap !important;
    text-align: center;
    flex-shrink: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* 세로 구분선 */
.support-faq-divider {
    display: inline-block;
    width: 1px;
    height: 24px;
    background: var(--faq-divider, var(--faq-border));
    margin: 0 16px;
    flex-shrink: 0;
}

/* 질문 제목 */
.support-faq-question-title {
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    margin: 0;
    flex: 1 1 auto;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--faq-ink);
    word-break: keep-all;
    overflow-wrap: break-word;
    transition: color 0.15s ease;
}

.support-faq-accordion-item[open] > .support-faq-question .support-faq-question-title {
    color: var(--faq-open-title, var(--faq-blue));
    font-weight: 700;
}

/* Preserve the current card hover and toggle icon appearance. */
.support-faq-accordion-item:hover .support-faq-question-title,
.support-faq-question:hover .support-faq-question-title {
    color: var(--figma-blue, #0d6efd);
}

.support-faq-accordion-item:hover .support-item-icon,
.support-faq-question:hover .support-item-icon {
    color: var(--figma-blue, #0d6efd);
    transform: scale(1.2);
    transition: transform 0.2s ease, color 0.2s ease;
}

/* 우측 토글 기호 (+ / -) */
.support-item-icon {
    margin-left: 16px;
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
    color: var(--figma-ink);
    text-align: center;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    transition: color 0.15s ease;
}

.support-item-icon::after {
    content: "+";
    display: block;
}

.support-faq-accordion-item[open] > .support-faq-question .support-item-icon::after {
    content: "−";
    color: var(--faq-open-icon, var(--faq-blue));
    font-weight: 400;
}

/* --------------------------------------------------------------------------
   답변 본문
   -------------------------------------------------------------------------- */
.support-faq-answer,
div.support-faq-answer {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    padding: 8px 40px 24px 40px !important;
    line-height: 1.85 !important;
    color: var(--faq-body) !important;
    border-top: none !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

.support-faq-answer p,
div.support-faq-answer p {
    margin: 0 0 0.75rem 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: 1rem !important;
    line-height: 1.85 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

.support-faq-answer p:last-child,
div.support-faq-answer p:last-child {
    margin-bottom: 0 !important;
}

.support-faq-answer em {
    font-style: normal;
    color: var(--bs-danger, #dc3545);
    font-weight: 600;
}

.support-faq-answer a {
    color: var(--faq-blue) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 500;
}

.support-faq-answer a:hover {
    color: var(--faq-blue-hover) !important;
}

/* --------------------------------------------------------------------------
   다크 테마 지원
   -------------------------------------------------------------------------- */
[data-bs-theme="dark"] .support-faq-accordion-item {
    background: var(--faq-card, #172e58) !important;
    border-color: var(--faq-card-border, #1a2e50) !important;
}

[data-bs-theme="dark"] .support-faq-accordion-item:hover {
    background: var(--faq-card-hover, #11233b) !important;
    border-color: var(--faq-card-open-border, #3880ff) !important;
    color: #3880ff !important;
}

[data-bs-theme="dark"] .support-faq-accordion-item[open] {
    background: var(--faq-card-open-bg, #172e58) !important;
    border-color: var(--faq-card-open-border, #3880ff) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.45) !important;
}

[data-bs-theme="dark"] #categoryBtnGroup .btn,
[data-bs-theme="dark"] .support-faq-category-btn {
    background: var(--faq-category-btn-bg, #101f38) !important;
    border-color: var(--faq-category-btn-border, #1c3258) !important;
    color: var(--faq-category-btn-color, #c3c3cd) !important;
}

[data-bs-theme="dark"] #categoryBtnGroup .btn:hover,
[data-bs-theme="dark"] .support-faq-category-btn:hover {
    background: var(--faq-category-btn-hover-bg, #11233b) !important;
    border-color: var(--faq-category-btn-hover-border, #3880ff) !important;
    color: var(--faq-category-btn-hover-color, #3880ff) !important;
}

[data-bs-theme="dark"] #categoryBtnGroup .btn.active,
[data-bs-theme="dark"] #categoryBtnGroup .btn[aria-pressed="true"],
[data-bs-theme="dark"] .support-faq-category-btn.active,
[data-bs-theme="dark"] .support-faq-category-btn[aria-pressed="true"] {
    background: var(--faq-blue, #3476f0) !important;
    border-color: var(--faq-blue, #3476f0) !important;
    color: #ffffff !important;
}


/* --------------------------------------------------------------------------
   태블릿 반응형 (iPad Mini 768px ~ 991.98px)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991.98px) {
    .support-faq-question {
        padding: 16px 24px !important;
        min-height: 68px;
    }

    .support-inline-badge,
    .support-faq-question .support-inline-badge {
        height: 28px;
        padding: 0 12px !important;
        font-size: 13px;
    }

    .support-faq-divider {
        margin: 0 12px;
        height: 20px;
    }

    .support-faq-question-title {
        font-size: 1.05rem;
        font-weight: 600;
    }

    .support-faq-answer,
    div.support-faq-answer {
        padding: 6px 24px 20px 24px !important;
        font-size: 0.95rem !important;
    }

    .support-faq-page .support-page-content,
    [data-faq-root] .support-page-content {
        padding-bottom: 56px !important;
    }
}

/* --------------------------------------------------------------------------
   모바일 반응형 (< 768px: 카테고리 뱃지와 질문 제목을 2줄로 분리 배치)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .support-faq-group h2 {
        font-size: 1.25rem;
    }


    #categoryBtnGroup,
    .support-faq-category-buttons {
        gap: 0.45rem 0.35rem !important;
        border-radius: 20px;
    }

    #categoryBtnGroup .btn,
    .support-faq-category-btn {
        height: 38px;
        padding: 0 13px !important;
        font-size: 0.85rem;
    }

    /* 뱃지와 질문을 2줄 수직 배치하여 긴 뱃지에도 제목 영역이 좁아지지 않도록 개선 */
    .support-faq-question {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        position: relative !important;
        padding: 16px 54px 16px 18px !important;
        min-height: auto !important;
        gap: 8px !important;
    }

    /* 1줄: 카테고리 뱃지 */
    .support-inline-badge,
    .support-faq-question .support-inline-badge {
        flex-shrink: 0 !important;
        height: 26px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
        line-height: 1 !important;
    }

    /* 2줄 배치 시 세로 구분선 숨김 */
    .support-faq-divider {
        display: none !important;
    }

    /* 2줄: 질문 제목 (가로 전체 폭 활용) */
    .support-faq-question-title {
        width: 100% !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        line-height: 1.45 !important;
        margin: 0 !important;
        word-break: keep-all;
        overflow-wrap: break-word;
    }

    /* 우측 토글 기호 (+ / -): 카드 우측 수직 중앙 배치 */
    .support-item-icon {
        position: absolute !important;
        right: 18px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        font-size: 24px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 28px !important;
        height: 28px !important;
    }

    .support-faq-answer,
    div.support-faq-answer {
        padding: 6px 18px 20px 18px !important;
        font-size: 0.925rem !important;
    }

    .support-faq-page .support-page-content,
    [data-faq-root] .support-page-content {
        padding-bottom: 44px !important;
    }
}