/* 자주묻는질문 CSS */
:root {

    /* 1000px 기준 변경 */
    --faq-padding-base: 5px;
    --faq-border-radius: 18px;
    --faq-icon-width: clamp(24px, 3.2vw, 32px);
    --faq-category-width: clamp(40px, 13vw, 130px);

    --faq-question-after-width: clamp(5px, 1.5vw, 15px);
    --faq-question-after-border-width: clamp(2px, 0.3vw, 3px);
    --faq-question-grid-colums: 
        var(--faq-icon-width) 
        var(--faq-category-width) 
        auto
    ;
    --faq-answer-grid-colums: 
        var(--faq-icon-width)
        auto
    ;
    --faq-grid-gap: clamp(10px, 2vw, 20px);
    --faq-table-padding: clamp(5px, 1vw, 10px);
}

.faq-container {
    padding-bottom: var(--mobile-content-vertical-gap-big);

    @media screen and (max-width: 640px) {
        padding-bottom: var(--mobile-content-vertical-gap-sm);
    }
}

.faq-list-wrap {
    display: flex;
    flex-direction: column;
    border-top: 3px solid var(--color-text-02);
    margin-bottom: var(--mobile-content-vertical-gap-big);

    @media screen and (max-width: 640px) {
        margin-bottom: var(--mobile-content-vertical-gap-sm);
    }

    & .no-data {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: calc(var(--faq-padding-base) * 4);
        border-bottom: 1px solid var(--color-line-01);
        font-size: var(--font-size-18);
    }

    & .faq-list-item {
        display: flex;
        flex-direction: column;

        & .faq-icon {
            display: flex;
            justify-content: center;
            align-items: center;
            width: var(--faq-icon-width);
            aspect-ratio: 1/1;
            border-radius: 50%;
            font-size: var(--font-size-18);
            font-weight: var(--font-weight-bold);
            color: var(--color-main-white);

            @media screen and (max-width: 1000px) {
                & {font-size: var(--font-size-14);}
            }

            &.question {background-color: var(--color-main-03);}
            &.answer {background-color: var(--color-main-02);}
        }

        & .faq-question {
            position: relative;
            display: grid;
            grid-template-columns: var(--faq-question-grid-colums);
            align-items: center;
            gap: var(--faq-grid-gap);
            padding: calc(var(--faq-padding-base) * 4);
            border-bottom: 1px solid var(--color-line-01);
            cursor: pointer;

            &.active {border-bottom: 0;}

            &::after {
                position: absolute;
                top: 50%;
                right: calc(var(--faq-padding-base) * 4);
                width: var(--faq-question-after-width);
                aspect-ratio: 1/1;
                border-width: 
                    var(--faq-question-after-border-width) 
                    var(--faq-question-after-border-width) 
                    0 
                    0
                ;
                border-style: solid;
                border-color: var(--color-text-02);
                transform: translateY(-50%) rotate(135deg);
                transition: transform 0.5s ease;
                content: '';
            }
            &.active::after {transform: translateY(-50%) rotate(-45deg);}

            & .faq-category {
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: var(--font-size-16);
                color: var(--color-main-03);

                @media screen and (max-width: 1000px) {
                    & {font-size: var(--font-size-14);}
                }
                @media screen and (max-width: 640px) {
                    & {font-size: var(--font-size-12);}
                }
            }
            & .faq-question-text {
                margin-right: 10px;
                padding-right: calc(var(--faq-question-after-width) * 1.66);
                font-size: var(--font-size-20);
                font-weight: var(--font-weight-bold);
                line-height: 1.3;

                @media screen and (max-width: 1000px) {
                    & {font-size: var(--font-size-18);}
                }
                @media screen and (max-width: 640px) {
                    & {font-size: var(--font-size-16);}
                }
            }
        }

        & .faq-answer {
            /* display: grid; */
            grid-template-columns: var(--faq-answer-grid-colums);
            gap: var(--faq-grid-gap);

            padding: calc(var(--faq-padding-base) * 4);
            border-radius: var(--faq-border-radius);
            background-color: var(--color-main-04);

            & .faq-answer-text {
                padding-top: clamp(2px, 0.4vw, 4px);
                line-height: 1.5;

                & strong {font-weight: var(--font-weight-bold);}

                & table {
                    background-color: var(--color-main-white);

                    @media screen and (max-width: 640px) {
                        & {font-size: var(--font-size-12);}
                        & th {width: 29%; word-break: keep-all;}
                        & th:first-child {width: 13%;}
                        & td {width: 29%;}
                    }

                    & strong {color: red;}
                    & thead tr {
                        border: 1px solid var(--color-line-02);
                        & th:not(:last-child) {border-right: 1px solid var(--color-line-02);}
                        & th {
                            padding: var(--faq-table-padding);
                            font-weight: var(--font-weight-bold);
                        }
                    }
                    & tbody tr {
                        border: 1px solid var(--color-line-02);
                        & th {
                            padding: var(--faq-table-padding);
                            border-right: 1px solid var(--color-line-02);
                            font-weight: var(--font-weight-bold);
                        }
                        & td:not(:last-child) {border-right: 1px solid var(--color-line-02);}
                        & td {padding: var(--faq-table-padding);}
                    }
                }
            }
        }
    }
}

/*======================================================
// 페이지네이션
=======================================================*/
:root {
    --pagination-anchor-width: 36px;
}
.pagination {
        
    & a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: var(--pagination-anchor-width);
        aspect-ratio: 1/1;
        border-radius: 50%;

        &.active {
            background-color: var(--color-main-03);
            color: var(--color-main-white);
        }
    }
}

:root {
    --article-category-wrap-max-width: 1000px;
    --article-category-wrap-list-border-radius: 27px;
}
.article-category-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: var(--article-category-wrap-max-width);
    margin: 
        var(--mobile-content-vertical-gap-sm) 
        auto 
        0
    ;
    padding: 5px;
    border-radius: calc(var(--article-category-wrap-list-border-radius) * 1.2);
    background-color: var(--color-category-01);
    font-size: var(--font-size-18);
    text-align: center;

    @media screen and (max-width: 1000px) {
        & {font-size: var(--font-size-16);}
    }
    @media screen and (max-width: 400px) {
        & {font-size: var(--font-size-13);}
    }

    & li {
        flex: 1;

        @media screen and (max-width: 560px) {
            & {flex: auto;}
        }

        & a {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            padding: calc(var(--faq-padding-base) * 4);
            font-weight: var(--font-weight-bold);
            color: var(--color-category-02);

            @media screen and (max-width: 1000px) {
                & {padding: calc(var(--faq-padding-base) * 2);}
            }
        }

        &.active a {
            border-radius: var(--article-category-wrap-list-border-radius);
            background-color: var(--color-main-03);
            color: var(--color-main-white);
        }
    }
}