/* ---------------------------------------
   HERO
--------------------------------------- */
.hero {
    height: 60vh;
    /* 1번: 은은한 틸 라이트 + 다크 그라데이션 */
    background: radial-gradient( circle at center top, rgba(0,200,210,0.12) 0%, rgba(29,29,29,1) 65% ), linear-gradient(180deg, #1d1d1d 0%, #262728 100%);
    border-bottom: 1px solid var(--color-darkGray);
    justify-content: center; /* 화면 약간 위쪽이 더 자연스러움 */
    align-items: center;
    padding-top: 3rem;
}


/* ---------------------------------------
   FAQ LIST
--------------------------------------- */

.faq-list {
    margin: 4rem auto;
    gap: 3rem;
    padding-bottom: 5rem;
}

/* ---------------------------------------
   CARD
--------------------------------------- */

.faq-card {
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid var(--color-darkGray);
    box-shadow: 0 4px 12px rgba(255,255,255,0.06), /* 은은한 화이트 */
    0 4px 16px rgba(0,0,0,0.6); /* 기존 다크 그림자 */
    transition: 0.25s;
}

    .faq-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 14px rgba(255,255,255,0.09), 0 10px 26px rgba(0,0,0,0.55);
    }



/* ---------------------------------------
   HEADER (summary)
--------------------------------------- */

.faq-header {
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    cursor: pointer;
    border-bottom: 1px solid var(--color-darkGray);
}

    .faq-header .number {
        margin-right: 1rem;
    }

    .faq-header .title {
        flex: 1;

    }

    .faq-header .arrow {
        transition: 0.25s;
    }

.faq-card[open] .arrow {
    transform: rotate(90deg);
}



/* ---------------------------------------
   CONTENT
--------------------------------------- */



.faq-card[open] .faq-content {
    opacity: 1;
    padding: 1rem 1.5rem;
}