/* 기본 리셋 및 설정 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --header-height: 140px;
    /* 헤더 전용 높이 설정 (원하는 값) */
    --footer-height: 40px;
    /* 푸터 전용 높이 설정 (원하는 값) */
    --title-height: 100px;
    /* [수정] Title 영역 고정 높이 */
}

body {
    font-family: 'Poppins', sans-serif;
    color: #ffffff;
    min-height: 100vh;
    position: relative;
    background-color: rgb(6, 4, 12);
    overflow-x: hidden;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle 15vmax at 15% 38%, rgba(0, 255, 231, 0.15), transparent),
        radial-gradient(circle 12vmax at 50% 50%, rgba(168, 85, 247, 0.2), transparent);
    z-index: -2;
}

#particle-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 4vw;
    display: flex;
    min-height: 100dvh;
}

/* =============================================== */
/* 그리드 레이아웃                                 */
/* =============================================== */
.main-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.5fr;
    grid-template-rows:
        var(--header-height)
        /* 1. header 행 (고정 높이) */
        var(--title-height)
        /* 2. title 행 (고정 높이) */
        0.9fr
        /* 3. content/object/image 행 (남은 공간 모두 차지) */
        var(--footer-height);
    /* 4. footer 행 (고정 높이) */

    grid-template-areas:
        "header  header  header"
        "title   title   title"
        "content object  image"
        "footer  footer  footer";
}

/* 그리드 영역 할당 */
.main-header {
    grid-area: header;
}

.hero-section {
    grid-area: title;
}

.main-content-left {
    grid-area: content;
}

.central-object-wrapper {
    grid-area: object;
}

.ai-image-wrapper {
    grid-area: image;
}

.main-footer {
    grid-area: footer;
}

/* =============================================== */
/* 그리드 자식 요소 스타일링                       */
/* =============================================== */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 2rem;
}

.main-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: #666;
    font-size: 0.9rem;
}

.hero-section {
    grid-area: title;
    position: relative;

    /* [수정] Flexbox로 수직 중앙 정렬 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; /* 가로 정렬은 왼쪽 시작으로 유지 */

    /* transform: translateY(15px); - 제거 */
    padding: 0; /* 패딩 제거 */
    text-align: left;
    transform: translateY(15px);
}

.main-content-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 50px; 
}

.info-box-wrapper {
    flex: 3;
    /* [비율] 인포 박스 영역 (3/5) */
    display: flex;
    flex-direction: column;
    justify-content: center;
    
}

.content-lower-section {
    flex: 2;
    /* [비율] 버튼/애니메이션 영역 (2/5) */
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: center;
    /* [수정] 버튼/애니메이션 그룹을 위로 미세 조정 */
    margin-top: 0px; 
    width: 100%;
    transform: translateY(40px);
}

.ai-image-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* =============================================== */
/* 개별 컴포넌트 스타일링                          */
/* =============================================== */

/* [추가] 모바일 전용 텍스트는 기본(데스크톱)에서 숨김 */
.mobile-only {
    display: none;
}

.logo {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 3rem;
    font-weight: 700;
}

.logo-ai {
    color: #FF6600;
    text-shadow: 0 0 7px rgba(255, 165, 0, 0.6);
}

.logo img {
    height: 40px;
}

.logo span {
    text-shadow: 0 0 8px rgba(173, 85, 255, 0.7);
}

/* [추가] 데스크톱에서 내비게이션 메뉴 숨기기 */
.main-nav {
    display: none;
}

.main-nav ul {
    list-style: none;
    display: flex;
    gap: 2.5rem;
}

.main-nav a {
    text-decoration: none;
    color: #e0e0e0;
    font-size: 1rem;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.main-nav a:hover {
    color: #fff;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
}

.hero-section h1 {
    /* [수정] 부모 Flexbox가 정렬 처리하므로 padding-top 제거 */
    padding-top: 0;

    /* 기존 스타일 유지 */
    font-size: clamp(2rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.5;
    word-spacing: 0.8em;
    text-align: left;
}

/* [추가] H1 내부 span에 대한 word-spacing 초기화 및 기본 색상 설정 */
.hero-section h1 span.h1-line {
    word-spacing: normal;
    display: inline-block;
    color: #ffffff;
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
}

/* [추가] 그라데이션을 적용할 특정 텍스트에만 스타일 적용 */
.hero-section h1 span.gradient-text {
    background: linear-gradient(90deg, #6a82fb, #c766e4);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}


/* [추가] 모바일에서만 줄바꿈을 유도하는 클래스 (기본은 인라인) */
.mobile-break {
    display: inline;
}


.main-quote {
    /* DESKTOP 정렬: 우측 상단 배치 */
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(-110px, -50%);
    font-size: clamp(2.5rem, 3vw, 3.5rem);
    font-weight: 600;
    color: #e0e0e0;
    white-space: nowrap;
    padding: 2rem 0;
}

.cta-button {
    background-color: transparent;
    border: 1px solid #a855f7;
    color: #fff;
    padding: 1rem 1.8rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    
}

.cta-button:hover {
    background-color: rgba(168, 85, 247, 0.2);
    transform: translateY(-2px);
}

.ai-image {
    width: 90%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 30px rgba(106, 130, 251, 0.3));
    -webkit-mask-image: linear-gradient(to bottom, black 30%, transparent 80%);
    mask-image: linear-gradient(to bottom, black 30%, transparent 80%);
    transform: translate(50px, 50px);
    /* AI 이미지 크기 및 위치 조절부 (DESKTOP 유지) */
}

.info-box-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.info-box {
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: background-color 0.3s ease;
    background: rgba(255, 255, 255, 0.02);
    padding: 0.8rem;
    border-radius: 8px;
}

.info-box:hover {
    background: rgba(255, 255, 255, 0.07);
}

.icon-wrapper {
    flex-shrink: 0;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(173, 85, 255, 0.1);
    border: 1px solid rgba(173, 85, 255, 0.3);
}

.info-box img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.info-box .box-content h4 {
    color: #c792ff;
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1.4;
}

.info-box .box-content p {
    color: #aaa;
    font-size: 1rem;
    font-weight: 300;
}

.animation-group {
    display: flex;
    gap: 1rem;
    /* [수정] 데스크톱에서 파형 그룹이 부모 너비를 따르도록 100% 설정 */
    width: 100%;
}

.animation-card {
    position: relative;
    width: 100%;
    aspect-ratio: 2.5 / 1;
    cursor: pointer;
    border-radius: 6px;
    overflow: hidden;
}

/* 스캐너 라인 스타일 */
.scanner-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    /* 스캐너 라인 두께 */
    height: 100%;
    background-color: #00ffff;
    /* 스캐너 색상 (청록색) */
    box-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff;
    opacity: 0;
    /* 처음엔 숨김 */
    transform: translateX(-100%);
}

/* 플레이스홀더 텍스트 스타일 */
.placeholder {
    color: #555;
    /* 플레이스홀더 색상 */
}

.card-base-text,
.overlay-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1rem, 4vw, 1.2rem);
    font-weight: 600;
    color: #fff;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
}

.overlay-image {
    object-fit: cover;
}

/* 중앙 오브젝트 영역 */
.central-object-wrapper {
    grid-area: object;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 400px;
    position: relative;
    z-index: 10;
}


/* =============================================== */
/* 반응형 디자인                                   */
/* =============================================== */
@media (max-width: 992px) {

    /* [추가] 정보 박스 내 모바일 전용 줄바꿈 클래스 (H4 줄바꿈용) */
    .break-point {
        display: block;
    }

    /* [수정] 데스크톱 전용 텍스트는 모바일에서 숨김 */
    .desktop-only {
        display: none;
    }

    /* [추가] 모바일 전용 텍스트는 모바일에서 표시 */
    .mobile-only {
        display: inline;
    }

    /* [수정] 모바일에서 내비게이션 메뉴 숨기기 */
    .main-nav {
        display: none;
    }

    /* [추가] 모바일에서만 줄바꿈을 유도 */
    .mobile-break {
        display: block;
    }

    /* [수정] 로고 크기 조정 */
    .logo {
        /* [수정] 모바일에서 텍스트 크기 확대 */
        font-size: 2.1rem;
        gap: 0.5rem;
    }

    /* [수정] 헤더 (로고+네비) 세로 배열 및 중앙 정렬 */
    .main-header {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        height: auto;
        /* [수정] 최상단 여백 추가 */
        padding: 2rem 0 0 0;
    }

    .main-nav ul {
        gap: 1.5rem;
        /* 네비게이션 간격 축소 */
    }

    /* [수정] Hero Section 정렬 재정의: 중앙 정렬 및 AnyGeul 위에 배치 */
    .hero-section {
        text-align: center;
        max-width: none;
        margin: 0;
        padding: 0;
        
        /* [수정] 모바일에서 중앙 정렬을 위해 Flexbox 속성 조정 */
        display: flex;             /* Flex 컨테이너 유지 */
        flex-direction: column;    /* 세로 방향 유지 */
        justify-content: center;   /* 수직 중앙 정렬 */
        align-items: center;       /* 수평 중앙 정렬 */
    }

    /* [추가/수정] Hero Section H1 조정 (2줄 분배 목표) */
    .hero-section h1 {
        font-size: 1.8rem;
        /* 모바일에서 고정 크기 설정 */
        line-height: 1.3;
        /* 줄 간격 축소 */
        text-align: center;
        /* H1 중앙 정렬 (모바일) */

        /* [수정] 모바일: 짧은 띄어쓰기 적용 */
        word-spacing: 0.2em;
    }

    /* [추가] H1 내부 span에 대한 word-spacing 초기화 */
    .hero-section h1 span.h1-line {
        word-spacing: normal;
    }

    /* [추가] 콘텐츠와 버튼 사이의 간격 추가 */
    .content-lower-section {
        padding-top: 1.5rem;
    }

    .main-grid {
        /* [수정] 큐브와 AI 이미지를 가로 배치하기 위한 Grid 재정의 */
        grid-template-columns: 1fr 1fr;
        /* 2열로 분할 */
        
        /* [핵심 수정] Grid 행 높이 설정 (100vh 확보 및 content/footer 스크롤 유도) */
        grid-template-rows: 
            auto /* header: 로고 높이만큼 */
            auto /* title: AnyGeul + Hero 텍스트 높이만큼 */
            1fr  /* object/image: 남은 수직 공간을 유연하게 확장 */
            auto /* content: 내용물 높이만큼 (스크롤 영역) */
            auto /* footer: 내용물 높이만큼 (스크롤 영역) */
        ;
        /* [핵심 추가] 그리드의 최소 높이를 화면 높이(100vh) 이상으로 설정 */
        min-height: 100vh;
        
        grid-template-areas:
            "header header"
            "title title"
            "object image"
            /* object와 image를 나란히 배치 */
            "content content"
            "footer footer";
        text-align: center;
        /* [수정] 행 사이 간격 넓힘 */
        gap: 2rem 0;
        padding-bottom: 2rem; /* Grid 끝에 여백 추가 */
    }

    /* =============================================== */
    /* [핵심 수정] 큐브/AI 이미지 배치 및 중앙 정렬 개선 */
    /* =============================================== */

    /* Content 섹션 중앙 정렬 */
    .main-content-left {
        grid-area: content;
        align-items: center;
        max-width: none;
        margin: 0;
        flex: unset;
    }

    /* [정보 박스 중앙 정렬] */
    .info-box {
        justify-content: flex-start;
        align-items: center;
        max-width: none;
        padding: 0.8rem 1rem;
    }

    .info-box .box-content {
        flex-grow: 1;
        text-align: center;
    }

    .info-box .box-content h4,
    .info-box .box-content p {
        text-align: center;
    }

    .icon-wrapper {
        margin: 0;
        flex-shrink: 0;
    }


    /* 큐브 컨테이너 (object 영역) - 좌측 배치 */
    .central-object-wrapper {
        grid-area: object;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: none;
        min-height: 100px;
        padding: 0;
        margin: 0;
        /* [수정] 좌우 쏠림 방지를 위해 패딩 5px로 통일 */
        padding-left: 5px;
        position: relative;
        /* [수정] 간격을 넓게 하기 위해 상단 마진 추가 */
        margin-top: 30px; 
    }

    /* [AI 이미지 래퍼] - 우측 배치 */
    .ai-image-wrapper {
        grid-area: image;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        min-height: 100px;
        padding: 0;
        margin: 0;
        /* [수정] 좌우 쏠림 방지를 위해 패딩 5px로 통일 */
        padding-left: 5px;
        position: relative;
        /* [수정] 간격을 넓게 하기 위해 상단 마진 추가 */
        margin-top: 30px; 
    }

    /* [AI 이미지 시각적 보정] - 치우침 보정 */
    .ai-image {
        transform: none;
        max-width: 90%;
        height: auto;
        transform: translateX(5%);
        /* AI 이미지 치우침 보정 유지 */
    }

    /* 큐브 스타일 (좌측 상단 미세 조정) */
    .central-object-wrapper .scene {
        width: 60px;
        height: 60px;
        /* [수정] 큐브를 상단으로 -40px, 좌우 보정 제거 */
        transform: translateY(-40px);
        margin-right: 0;
    }

    /* [파형 이미지 잘림 방지] */
    .animation-group-wrapper {
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }

    /* [파형 이미지 크기 제어] */
    .animation-group {
        justify-content: center;
        width: 100%;
        /* [수정] 파형 그룹의 크기 축소 */
        max-width: 360px;
        margin: 0 auto;
        gap: 0.5rem;
    }

    .animation-card {
        aspect-ratio: 2 / 1;
        flex-shrink: 0;
        /* [수정] 개별 카드 최대 너비를 더 축소 */
        max-width: 110px;
    }

    .main-quote {
        position: static;
        transform: none;
        display: block;
        text-align: center;
        
        /* [수정] AnyGeul™을 Hero 텍스트 위로 올리고 중앙 정렬 */
        order: -1; 
        padding: 0 0 1rem 0; /* 아래쪽에만 여백 1rem 추가 */
        font-size: 2rem; 
        font-weight: 600;
    }

    /* 큐브 3D 크기 조정 */
    .front {
        transform: rotateY(0deg) translateZ(30px);
    }

    .back {
        transform: rotateY(180deg) translateZ(30px);
    }

    .right {
        transform: rotateY(90deg) translateZ(30px);
    }

    .left {
        transform: rotateY(-90deg) translateZ(30px);
    }

    .top {
        transform: rotateX(90deg) translateZ(30px);
    }

    .bottom {
        transform: rotateX(-90deg) translateZ(30px);
    }
}

/* =============================================== */
/* CSS 3D Cube 스타일 (160px 크기로 수정)         */
/* =============================================== */

/* 3D 효과를 위한 원근감(perspective) 설정 */
.scene {
    width: 80px;
    height: 80px;
    perspective: 800px;
    transform: translateY(-100px);
    /* DESKTOP 유지 */
}

/* 반응형 크기 조절 (기존 150px -> 120px로 함께 줄임) */
@media (max-width: 992px) {
    .scene {
        width: 60px;
        height: 60px;
        transform: translateY(-30px);
    }
}

/* 큐브 전체를 감싸는 컨테이너 */
.cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: rotate-cube 15s infinite linear;
}

/* 큐브의 각 면(face)에 대한 공통 스타일 */
.face {
    position: absolute;
    width: 100%;
    height: 100%;
    /* ---------------------- [수정 부분 시작] ---------------------- */
    /* 1. 테두리 불투명하게 (완전 불투명) */
    border: 1px solid rgb(137, 226, 255);

    /* 2. 배경 완전 불투명하게 (opacity: 1) */
    background: rgb(80, 21, 136);

    /* 3. 그림자는 불투명하게 하거나, 완전히 불투명한 색으로 변경 */
    box-shadow: inset 0 0 20px rgb(168, 85, 247);
    /* ---------------------- [수정 부분 끝] */
}

/* 각 면을 3D 공간에 배치 */
.front {
    transform: rotateY(0deg) translateZ(40px);
}

.back {
    transform: rotateY(180deg) translateZ(40px);
}

.right {
    transform: rotateY(90deg) translateZ(40px);
}

.left {
    transform: rotateY(-90deg) translateZ(40px);
}

.top {
    transform: rotateX(90deg) translateZ(40px);
}

.bottom {
    transform: rotateX(-90deg) translateZ(40px);
}

@media (max-width: 992px) {
    .front {
        transform: rotateY(0deg) translateZ(30px);
    }

    .back {
        transform: rotateY(180deg) translateZ(30px);
    }

    .right {
        transform: rotateY(90deg) translateZ(30px);
    }

    .left {
        transform: rotateY(-90deg) translateZ(30px);
    }

    .top {
        transform: rotateX(90deg) translateZ(30px);
    }

    .bottom {
        transform: rotateX(-90deg) translateZ(30px);
    }
}

/* 큐브 회전 애니메이션 정의 */
@keyframes rotate-cube {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }

    100% {
        transform: rotateX(-360deg) rotateY(-360deg);
    }
}