.faq-list {
    --grd-sp-dyn: .44rem;
    --faq-list-open-fg: var(--white);
    --faq-list-idx-clr: rgba(0, 0, 0, 0.1);
    --faq-list-idx-clr-hvr: rgba(244, 240, 232, 0.6);

    [data-colors$="-dark"] & {
        --faq-list-open-fg: var(--black);
        --faq-list-idx-clr: rgba(244, 240, 232, 0.6);
        --faq-list-idx-clr-hvr: rgba(0, 0, 0, 0.1);
    }

    /* ── Accordion container ─────────────────────────────── */

    border-radius: 0.625rem;
    overflow: hidden;
    counter-reset: faq-counter;

    /* ── Item (details element) ──────────────────────────── */

    .faq-list-item {
        counter-increment: faq-counter;
        transition: background-color var(--g-trn-sp) var(--g-trn-tf) 0s, color var(--g-trn-sp) var(--g-trn-tf) 0s;

        & + .faq-list-item {
            border-top: 1px solid rgba(0, 0, 0, 0.1);
        }
    }

    details[open].faq-list-item,
    .faq-list-item:is(:hover, :focus-visible) {
        background-color: var(--callout);
        color: var(--faq-list-open-fg);
    }

    /* ── Summary row ─────────────────────────────────────── */

    .faq-list-smry {
        display: flex;
        align-items: center;
        gap: 3rem;
        padding: 2.5rem 3.5rem;
        cursor: pointer;
        list-style: none;

        &::-webkit-details-marker,
        &::marker {
            display: none;
        }
    }

    /* ── Number + crown block ────────────────────────────── */

    .faq-list-num {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-shrink: 0;
        width: 3.9rem;

        .flr_hd {
            --flr-mrg-bt: 0;
        }
    }

    .faq-list-crown {
        color: rgba(0, 0, 0, 0.12);
        transition: color var(--g-trn-sp) var(--g-trn-t) 0s;
        font-size: var(--flr-bx-w-clc);

        path {
            stroke: currentColor;
        }
    }

    details[open] .flr_hd,
    .faq-list-item:is(:hover, :focus-visible) .flr_hd {
        color: rgba(244, 240, 232, 0.5);
    }

    .faq-list-idx {
        font-family: var(--fnt-t-1-ff);
        font-size: 2.2rem;
        line-height: 1;
        color: var(--faq-list-idx-clr);

        &::before {
            content: counter(faq-counter, decimal-leading-zero);
        }
    }

    details[open] .faq-list-idx,
    .faq-list-item:is(:hover, :focus-visible) .faq-list-idx {
        color: var(--faq-list-idx-clr-hvr);
    }

    /* ── Question title ──────────────────────────────────── */

    .faq-list-ttl {
        flex: 1;
        font-family: var(--fnt-t-1-ff);
        font-size: clamp(1.5rem, 2.5vw, 2.5rem);
        line-height: 0.9;
        font-weight: var(--fnt-t-1-w);
        text-transform: var(--fnt-t-1-tt);
    }

    /* ── Toggle icons ────────────────────────────────────── */

    .faq-list-tog {
        flex-shrink: 0;
        width: 3rem;
        height: 3rem;

        svg {
            width: 100%;
            height: 100%;
        }

        .tb-open {
            display: block;
        }

        .tb-close {
            display: none;
        }
    }

    details[open] .faq-list-tog {
        .tb-open {
            display: none;
        }

        .tb-close {
            display: block;
        }
    }

    /* ── Answer body ─────────────────────────────────────── */

    .faq-list-ans {
        padding: 0 3.5rem 2.5rem;
        font-size: clamp(1rem, 1.5vw, 1.2rem);
        line-height: 1.4;
    }

    /* ── Mobile ──────────────────────────────────────────── */

    @media screen and (min-width:1280px) {
        & {
            .faq-list-idx {
                font-size: 3.78rem; 
            }
        }
    }

    @media screen and (max-width: 699px) {

        .faq-list-smry {
            gap: 1.25rem;
            padding: 1.5rem 1.25rem;
        }

        .faq-list-num {
            width: 2.5rem;
        }

        .faq-list-idx {
            font-size: 2rem;
        }

        .faq-list-ans {
            padding: 0 1.25rem 1.5rem;
        }

        .faq-list-tog {
            width: 2.25rem;
            height: 2.25rem;
        }
    }
}