/* 기본 스타일 초기화 및 폰트 설정 */
body, html {
    margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;
    font-family: 'Noto Sans KR', sans-serif;background:#000;
}

/* 사선 스플릿 컨테이너 */
.split-container-diagonal {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #1a1a1a;
}

/* 개별 스플릿 섹션 */
.split-section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    color: white;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    /* clip-path 애니메이션을 위한 transition */
    transition: clip-path 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

/* clip-path로 사선 모양 만들기 */
.it-section {
    background-image: url('left-bg.jpg');
    clip-path: polygon(0 0, 55% 0, 45% 100%, 0 60%);
}

.fb-section {
    background-image: url('right-bg.jpg');
    clip-path: polygon(55% 0, 100% 0, 100% 100%, 45% 60%);
}

/* === ★★★ 핵심 변경점: 호버 시 섹션 확장 애니메이션 복원 ★★★ === */
/* 마우스를 올린 섹션이 전체 화면을 덮도록 clip-path 변경 */
.split-container-diagonal:hover .it-section:hover,
.split-container-diagonal:hover .fb-section:hover {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* 배경 어둡게 + 줌인 효과를 위한 가상요소 (이전과 동일) */
.split-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.5s ease;
}

.split-section:hover::before {
    transform: scale(1.15);
    background-color: rgba(0, 0, 0, 0.6);
}

/* 콘텐츠 블록 - 텍스트 위치 고정 (이전과 거의 동일) */
.content {
    position: absolute;
    top: 50%;
    z-index: 2;
    max-width: 450px;
    text-align: center;
    /* === 삭제: 콘텐츠 위치 이동을 위한 transition 제거 === */
    /* transition: all 0.5s ease; */
}

.it-section .content {
    left: 30%;
    transform: translate(-50%, -50%);
}

.fb-section .content {
    left: 70%;
    transform: translate(-50%, -50%);
}

/* === 삭제: 호버 시 콘텐츠가 화면 중앙으로 이동하는 부분 === */
/* .split-section:hover .content { left: 50%; } */

/* 콘텐츠 내부 요소들의 애니메이션 설정 (이전과 동일) */
.content h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    transition: all 0.5s ease;
}

.content p, .content .cta-button {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s;
}

.split-section:hover p,
.split-section:hover .cta-button {
    opacity: 1;
    transform: translateY(0);
}

/* 순차적 등장을 위한 delay */
.split-section:hover .cta-button {
    transition-delay: 0.3s;
}

/* 버튼 스타일 (이전과 동일) */
.cta-button {
    display: inline-block; padding: 12px 30px; border: 2px solid white; color: white;
    text-decoration: none; font-size: 1rem; font-weight: 700; border-radius: 50px;
    margin-top: 1rem;
    transition: background-color 0.3s, color 0.3s;
}
.cta-button:hover { background-color: white; color: #333; }

/* 모바일 화면 대응 (이전과 동일) */
@media (max-width: 768px) {
    .it-section { clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%); }
    .fb-section { clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%); }
    .it-section .content, .fb-section .content {
        left: 50%; top: 25%; width: 80%;
    }
    .fb-section .content { top: 75%; }
    .content p, .content .cta-button { opacity: 1; transform: translateY(0); }
}