/* ---------------------------- 
   HERO - 브랜드형 고급 UI
---------------------------- */
.hero {
    height:100vh;
    position: relative;
    text-align: center;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    justify-content: center;
}

.background-video{
    position:absolute;
    top:0;
    left:50%;
    width:100%;
    height:100%;
    object-fit:cover;
    transform:translateX(-50%);
    z-index:-1;
    opacity:0.7;
}


.hero-btns {
    margin-top: 3rem;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}



/* ---------------------------- 
   Vision Section
---------------------------- */
.vision-section {
    padding: 8rem 0;
    position: relative;
}

.vision-container {
    justify-content: center;
    align-items: center;
    gap: 6rem;
}

.vision-text,
.vision-image {
    flex: 1 1 35rem;
    position: relative;
    max-width: 35rem; /* 중요 */
}

.vision-label {
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.vision-text h2 {
    line-height: 1.3;
    margin-bottom: 1.5rem;
}

.vision-text p {
    line-height: 1.8;
}

.vision-points .point {
    display: flex;
    align-items: center;
}

    .vision-points .point .dot {
        width: 0.8rem;
        height: 0.8rem;
        border-radius: 50%;
        margin-right: 0.8rem;
    }

.vision-glass {
    width: 100%;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(1.2rem);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);

}

    .vision-glass img {
        border-radius: 1.5rem;
        width: 100%;
        object-fit: cover;
        max-height:35rem;
    }

.vision-bg-gradient {
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width: 50rem;
    height: 50rem;
    z-index: -1;
    background: radial-gradient(circle, rgba(0,200,210,0.2) 0%, rgba(255,255,255,0) 75%);
}

/* ---------------------------- 
   STORY Section
---------------------------- */
.story-section {
    padding: 15rem 0;
    background: linear-gradient(rgba(35, 35, 35, 1) 0%, rgba(35, 35, 35, 0.6) 50%, rgba(35, 35, 35, 1) 100%), url('/images/bg_pattern2.jpg'); /* 배경 이미지 */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.story-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

.story-card {
    flex: 1 1;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
}

    .story-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    }

.story-dot {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    margin-bottom: 0.5rem;
}

.story-card h3 {
    margin-bottom: 0.8rem;
}

/* ---------------------------- 
   SHOWCASE Section - 현대적인 갤러리 UI
---------------------------- */
.showcase-section {
    padding: 10rem 0;
}

.showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 1.5rem;
}

.showcase-card {
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    position: relative;
}

    .showcase-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
    }

    .showcase-card img {
        width: 100%;
        height: 15rem;
        object-fit: cover;
        display: block;
        transition: transform 0.3s ease-in-out;
    }

    .showcase-card:hover img {
        transform: scale(1.05);
    }

.card-caption {
    padding: 1rem;
}

    .card-caption p {
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; /* 긴 텍스트는 '...'으로 표시 */
    }

/* ---------------------------- 
   CTA Section
---------------------------- */
.cta-soft {
    padding: 6rem 0;
    text-align: center;
}

    .cta-soft h2 {
        margin-bottom: 1rem;
    }

    .cta-soft p {
        font-size: 1.2rem;
        margin-bottom: 2rem;
    }

.btn-cta {
    padding: 1rem 2rem;
    border-radius: 2rem;
    text-decoration: none;
    transition: 0.3s;
}


@media(max-width:992px) {
    .vision-text,
    .vision-image {
        flex: 1 1 auto;
        max-width: none;
    }

    .vision-container {
        gap: 2rem;
    }

    .vision-glass img {
        max-height: none;
    }
}