/* ===== FAQ PAGE STYLES ===== */
/* FAQ Content Section */
.faq-content-section {
    padding: var(--spacing-12) 0; /* 48px */
}

/* Tab Navigation - tabs.css 스타일 활용 */
.faq-content-section .tab-nav {
    display: flex;
    gap: var(--spacing-5); /* 20px */
    height: 2.5rem; /* 40px */
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-16); /* 64px */
}

.faq-content-section .tab-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 var(--spacing-4); /* 0 16px */
    gap: var(--spacing-2); /* 8px */
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    border: none;
    position: relative;
}

.faq-content-section .tab-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 2px;
    background-color: var(--color-primary-500);
    border-radius: 0;
}

.faq-content-section .tab-item.active .tab-text {
    color: var(--color-primary-600);
    font-weight: var(--font-weight-bold);
}

.faq-content-section .tab-item:not(.active) {
    color: var(--color-text-black);
}

.faq-content-section .tab-text {
    font-size: var(--font-size-lg); /* 20px */
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-figma);
}

/* FAQ Accordion */
.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1); /* 4px */
}

/* FAQ Item */
.faq-item {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg); /* 16px */
    overflow: hidden;
    transition: all 0.3s ease;
    gap: var(--spacing-1);
}

/* FAQ Header */
.faq-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-4); /* 16px */
    height: 4rem; /* 64px */
    padding: var(--spacing-5); /* 20px */
    background-color: var(--color-bg-contents);
    border-radius: var(--radius-lg); /* 16px */
    cursor: pointer;
    transition: all 0.2s ease;
}

.faq-header:hover {
    background-color: var(--color-text-200);
}

/* FAQ Item Active State */
.faq-item.active .faq-header {
    background-color: var(--color-secondary-500);
    color: var(--color-text-white);
}

.faq-item.active .faq-header .faq-question p {
    color: var(--color-text-white);
}

/* FAQ Icon */
.faq-icon {
    width: 2rem; /* 32px */
    height: 2rem; /* 32px */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq-icon svg {
    width: 100%;
    height: 100%;
    color: var(--color-secondary-500);
}

/* FAQ Toggle */
.faq-toggle {
    width: 0.875rem; /* 14px */
    height: 0.875rem; /* 14px */
    flex-shrink: 0;
    color: var(--color-secondary-500);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.faq-toggle svg {
    width: 100%;
    height: 100%;
    stroke: var(--color-secondary-500);
    stroke-width: 2;
    transition: stroke 0.2s ease;
}

/* FAQ Icon Colors - Active State */
.faq-item.active .faq-icon svg,
.faq-item.active .faq-toggle {
    color: var(--color-text-white);
}

/* FAQ Question */
.faq-question {
    flex: 1;
    display: flex;
    align-items: center;
}

.faq-question p {
    font-size: var(--font-size-lg); /* 20px */
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-figma);
    color: var(--color-text-black);
    margin: 0;
}

/* FAQ Content */
.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background-color: var(--color-text-white);
}

.faq-item.active .faq-content {
    max-height: 20rem; /* 320px */
    border: 1px solid var(--color-text-300);
    border-radius: var(--radius-lg);
}

/* FAQ Answer */
.faq-answer {
    padding: var(--spacing-5); /* 20px */
}

.faq-answer p {
    font-size: var(--font-size-lg); /* 20px */
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-figma);
    color: var(--color-text-black);
    margin: 0 0 var(--spacing-2) 0; /* 0 0 8px 0 */
}

.faq-answer p:last-child {
    margin-bottom: 0;
}

/* Responsive Design - variables.css의 반응형 변수 활용 */
@media (max-width: 992px) {
    .faq-content-section .tab-nav {
        flex-wrap: wrap;
        gap: var(--spacing-3);
        margin-bottom: var(--spacing-12);
    }
    
    .faq-content-section .tab-item {
        padding: 0 var(--spacing-3);
    }
}

@media (max-width: 576px) {
    .faq-content-section .tab-nav {
        flex-direction: column;
        height: auto;
        gap: var(--spacing-2);
    }
    
    .faq-content-section .tab-item {
        width: 100%;
        height: 2.25rem;
        justify-content: center;
        border: 1px solid var(--color-text-400);
        transition: none;
    }

    .faq-content-section .tab-item.active {
        background-color: var(--color-primary-500);
        border: none;
    }

    .faq-content-section .tab-item.active .tab-text {
        color: var(--color-text-white);
    }

    .faq-header {
        height: 3.5rem;
    }
    
    .faq-icon {
        width: 1.5rem;
        height: 1.5rem;
    }
}