:root {
    --primary: #007AFF;           /*  블루 */
    --primary-dark: #0056CC;      
    --secondary: #5856D6;         /*  퍼플 */
    --accent: #FF9500;            /*  오렌지 */
    --bg-dark: #000000;           /* 완전한 블랙 */
    --bg-light: #1C1C1E;          /* 다크 그레이 */
    --text-dark: #FFFFFF;         /* 순백 텍스트 */
    --text-light: #98989D;        /* 회색 텍스트 */
    --white: #FFFFFF;
    --gradient: linear-gradient(135deg, var(--primary), var(--secondary));
    --gradient-bg: radial-gradient(circle at center top, rgba(0, 122, 255, 0.1) 0%, rgba(0, 0, 0, 1) 70%);
}




.lesson.common-container {
    min-height: fit-content;
    background: black;
    display: grid;
    padding: 0;
    height: calc(var(--lvh) * 75);
    .content-text {
        grid-column: 2 / 12;
        grid-row: 2 / 7;
        height: 100%;
        z-index: 1;
        flex:1;
        text-align: center;
        h1 {
            background: unset;
            background-clip: unset;
            -webkit-background-clip: unset;
            -webkit-text-fill-color: unset;
            
            color:white;
        }

    }

    .content-visual {
        grid-column: 2 / 12;
        grid-row: 3 / 8;
        height: fit-content;
        z-index: 0;
        flex:1;
        video {
            width:100%; height:100%; filter:brightness(0.5);
            object-fit: contain;
        }
        video#landscapeVideo {
            max-height: calc(var(--lvh) * 60);
        }
        video#portraitVideo {
        }
    }
    .content-visual::after {
        content: " ";
        left: 0;
        bottom: 0;
        width: 100%;
        height: 20%;
        background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 100%);
        z-index: 1;
        position: absolute;
    }

    .content-wrapper {
        width: 100%;
        max-width: var(--max-container-width);
        display: grid;
        grid-template-columns: 1fr;
    }

    .content {

        #landscapeVideo {
            display: block;
        }

        #portraitVideo {
            display: none;
        }
        background: unset;
        display: grid;
        grid-auto-rows: 1fr;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 0;
        align-items: start;
        min-height: fit-content;
    }



    .content-text p {
        color: var(--text-light);
        strong {
            color:white;
        }
    }

    .cta-button:hover {
        box-shadow: 0 12px 40px rgba(0, 122, 255, 0.4);
    }

    .content-visual {
        border-radius: 0;
        color: var(--white);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);

    }

}

.courses.common-container {
    background: black;

    .overlay-background {
        position: absolute;
        width: 100lvw;
        height: 90%;
        bottom: 0;
        left:50%;
        z-index: -1;
        transform: translateX(-50%);
        img {
            filter: brightness(0.5);
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    }

    h2.content-title {
        color:white;
    }


    .course-card {
        background-color: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(64px);
        h3 {
            color:white;
        }
        h4 {
            color:var(--text-light);
        }
        .course-image {
            img {
                filter: brightness(1);
            }
        }
    }
    .course-card + .course-card {
        background-color: rgba(200, 200, 200, 0.1);
    }
    


    .course-card > p {
        color:white;
    }
    .course-features {
        p {
            color:white;
        }
    }

}

@media (max-width: 768px) {
    .courses.common-container {
        .courses-grid {
            .course-card, .courses-card:nth-last-of-type(even) {
                padding: 0;


                h3 {
                    color:white;
                }
                .course-image {
                    z-index: 0;
                    min-height: 0;
                    img {
                        filter: brightness(0.75);
                    }
                }

                .course-features {
                    z-index: 1;
                    p {
                        color: white;
                    }
                }
            }
        }
    }
    .courses-replica {
        .course-replica-content {
            * {
                margin:0;
            }
            background-color: rgba(255, 255, 255, 0);
            .card {

                background-color: rgba(0, 0, 0, 0.75);
                backdrop-filter: blur(64px);
            }
            h3 {
                color:white;
                line-height: 1.47;
            }
            h4 {
                color: var(--text-light);
            }
            .course-texts {
                p {
                    line-height: 1.47;
                    color:white
                }
            }
            .close-replica {
                background-color: rgba(210,210,215,0.64);
                span {
                    color:rgba(0,0,0,0.56);
                }
            }
        }
    }

    .courses-replica.entrance .course-replica-content {
        backdrop-filter: blur(16px);            
        background-color: rgba(255, 255, 255, 0.1);
        .card {
            transform: translateY(0);
        }
    }
    .courses-replica.out .course-replica-content {
        backdrop-filter: blur(0px);
        background-color: rgba(255, 255, 255, 0);
        .card {
            transform: translateY(100%);
        }
    }



}


/* Process Section - Dark Theme */
.process.common-container {
    background: #121212; /* 어두운 배경 */
    .content-title {
        color:white;
    }
    .step {
        background: rgba(255, 255, 255, 0.03); /* 살짝 밝은 카드 배경 */
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .step:hover {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }

    .step-number {
        background: var(--gradient);
        color: var(--white);
    }

    .step h4 {
        color: #fff;
    }

    .step p {
        color: rgba(255, 255, 255, 0.6);
    }
}
/* Contact CTA */
.contact-cta {
    background: linear-gradient(135deg, #1e1e2f, #2a2a3d);
    color: #ffffff;
}


.contact-cta h2 {
    color: #ffffff;
}

.contact-cta p {
    color: rgba(255, 255, 255, 0.85);
}


a.contact-button {
    background: var(--gradient);
    color: white;
}

a.contact-button:hover {
    color: white;
    box-shadow: 0 12px 40px rgba(0, 122, 255, 0.4);
}

/* FAQ Section */
.faq.common-container {
    background: linear-gradient(135deg, rgba(30, 30, 47, 0.95), rgba(42, 42, 61, 0.95));

    .content-title {
        color: #ffffff;
    }

    .faq-item {
        background: #2c2c3c;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);

        &:hover {
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
        }

        .faq-question {
            background: #2c2c3c;
        }

        .faq-question:hover {
            background: rgba(99, 102, 241, 0.15);
        }

        .faq-question span {
            color: #ffffff;
        }

        .faq-answer {
            background: rgba(45, 45, 65, 0.85);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        .faq-answer p {
            color: rgba(255, 255, 255, 0.85);
        }
    }
}





/* Mobile Responsiveness */
@media (max-width: 968px) {

    .lesson.common-container {
        .content-wrapper {
            max-width: 100%;
        }
        .content-visual {
            background: var(--bg-dark);
        }
    }

    @media (orientation: portrait) {
        .lesson.common-container {
            .content {
                grid-template-columns: 1fr;
                #landscapeVideo {
                    display: none;
                }
                #portraitVideo {
                    display: block;
                }
                
            }
            .content-text {
                grid-column: 1;
                grid-row: 2 / 12;
                height: 100%;
                z-index: 1;
                flex:1;
                text-align: center;
            }

            .content-visual {
                grid-column: 1;
                grid-row: 1 / 12;
                height: fit-content;
                z-index: 0;
            }
        }
    }
}