/* -------------------------------------
    0. 전체 폰트 및 리셋
    ------------------------------------- */
body {
    margin: 0;
    padding: 0;
    /* ⭐️ Pretendard 폰트 전체 적용 ⭐️ */
    font-family: 'Pretendard', sans-serif;
}

/* -------------------------------------
    1. 메인 섹션 1 (#main1) 스타일
    ------------------------------------- */
#main1 {
    min-height: 100vh; /* 화면을 가득 채우도록 뷰포트 높이 설정 */

    background-image: none;
    background-size: cover;
    background-position: center;
    background-color: #080026;
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 0;
}

.main-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 5;
}

/* 배경 영상 스타일 */
.bg-video {
    position: absolute;
    top: 50%;
    left: 50%;

    /* ⭐️ PC/모바일 모두 100%로 설정하여 화면을 꽉 채움 (스크롤 줌 기능 삭제) ⭐️ */
    width: 100%;
    height: 100%;

    z-index: 1;
    /* 중앙 배치만 유지, scale 트랜스폼 삭제 */
    transform: translate(-50%, -50%);
    /* 스크롤 애니메이션 트랜지션 삭제 */
    transition: none;
    object-fit: cover;

    min-width: 0;
    min-height: 0;
}

#main1-content {
    padding: 100px 0 100px 0;
    position: relative;
    z-index: 10;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

#main1 .main1-wrap {
    z-index: 10;
    color: white;
    padding: 0 5%;
}

#main1 .wave-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 20px;
    color: white;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

#main1 .wave-title.show {
    opacity: 1;
    transform: translateY(0);
}

/* 기본: PC에서는 모바일 전용 줄바꿈을 숨김 */
.mo-br { display: none; }

/* 모바일에서만 줄바꿈 보이게 */
@media (max-width: 768px) {
    .mo-br { display: inline; }
}


#main1 .wave-desc {
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.8;
    color: white;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease-out 0.3s, transform 1s ease-out 0.3s;
}

#main1 .wave-desc.show {
    opacity: 1;
    transform: translateY(0);
}

.main-slide {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    opacity: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 1s ease-in-out;
}

.main-slide.active {
    opacity: 1;
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    padding: 0;
    height: auto;
}


/* -------------------------------------
    2. 메인 섹션 2, 3 (#main2, #main3) 스타일
    ------------------------------------- */

/* 섹션 높이 고정 및 기본 패딩 */
#main2, #main3 {
    min-height: 60vh;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#main2 {
    background-color: #ffffff;
    padding: 120px 0; /* 섹션 2 패딩 유지 */
}

#main3 {
    background-color: #fff;
    padding: 0;
}

.main-section-padding {
    padding: 120px 0;
}

/* -------------------------------------
    3. 섹션 2 전용 스타일
    ------------------------------------- */

.main2-container {
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
}

/* 큰 제목 전체를 감싸는 래퍼 */
.main-title-wrap {
    margin-bottom: 100px; /* 요청: 여백 100px로 증가 */
}

/* 큰 제목 스타일 (한국어/h1 스타일) */
.main-title-large {
    font-size: 75px;
    font-weight: 800;
    margin: 0;
    color: #1a1a1a;
    line-height: 1;
    display: block;
}

/* 작은 제목 스타일 (영어/p 스타일) */
.main-title-subtitle {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 10px 0;
    color: #080026;
    line-height: 1.2;
}

/* 가로선 스타일 */
.main2-horizontal-line {
    width: 100%;
    height: 1px;
    background-color: #ccc;
    margin-bottom: 50px;
}

/* 3분할 컨텐츠 래퍼 */
.main2-content-wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
}

/* 콘텐츠 아이템 스타일 */
.main2-item {
    flex: 1;
    text-align: left;
    padding: 0 10px;
}

/* ⭐️ 아이콘 박스 스타일 (기본 모드) ⭐️ */
.main2-icon-box {
    width: 60px;
    height: 60px;
    background-color: #080026; /* 아이콘 배경색: 네이비 */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
    transition: background-color 1s ease-in-out; /* 다크 모드 전환 애니메이션 */
}

.main2-icon-box i {
    font-size: 24px;
    color: #ffffff; /* ⭐️ 아이콘 색상: 흰색 ⭐️ */
    transition: color 1s ease-in-out; /* 다크 모드 전환 애니메이션 */
}


/* 콘텐츠 내부 H1 스타일 (영어 폰트 기준) */
.main2-h1 {
    font-size: 22px;
    /*font-weight: 600;*/
    margin-bottom: 30px;
    color: #080026;
}

.main2-p {
    font-size: 1rem;
    line-height: 1.6;
    color: #555;
    font-weight: 300;
}

/* 세로선 스타일 */
.main2-vertical-line {
    width: 1px;
    min-height: 210px;
    background-color: #eee;
    margin: 0 10px;
}


/* -------------------------------------
    4. 섹션 3 전용 스타일 (2단 레이아웃 및 메뉴)
    ------------------------------------- */

#main3 {
    text-align: left;
}

.main3-container {
    width: 100%;
    max-width: 100%; /* 좌우 여백 제거 */
    margin: 0; /* 가운데 정렬 여백 제거 */
    display: flex;
    align-items: stretch;
    min-height: 700px; /* ⭐️ 섹션 높이 확보 ⭐️ */
}

/* 4-1. 좌측 이미지 영역: 50% 폭 및 딱 붙는 배치 (PC 전용) */
.main3-left-image {
    flex: 0 0 50%;
    overflow: hidden;
    height: 100%; /* 부모(main3-container) 높이 100% 상속 받도록 명시 */
    position: relative; /* ⭐️ 자식 이미지 정렬을 위해 유지 ⭐️ */
    background-color: #000000;
}

/* ⭐️ 이미지 표시 문제 해결: height 100% 및 object-fit:cover로 영역 꽉 채우기 ⭐️ */
.main3-left-image img {
    width: 100%; /* 너비를 부모에 맞춤 */
    height: 815px; /* 높이를 부모에 맞춤 (섹션 높이 전체) */
    object-fit: cover; /* 이미지가 잘리더라도 비율을 유지하며 꽉 채움 */

    position: relative; /* ⭐️ 요청에 따라 relative 유지 ⭐️ */
    top: 0;
    left: 0;
    transform: none;

    display: block; /* ⭐️ 블록 요소로 강제 지정 ⭐️ */
    border-radius: 0;
    transition: opacity 0.5s ease;
}

/* 4-2. 우측 메뉴 영역: 나머지 50% 폭 및 내부 패딩 */
.main3-right-content {
    flex: 0 0 50%;
    padding: 60px 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.main3-subtitle {
    font-size: 1rem;
    font-weight: 600;
    color: #080026;
    margin-bottom: 15px;
    text-transform: uppercase;
    /*letter-spacing: 1px;*/
}

.main3-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.main3-menu-item {
    cursor: pointer;
    padding: 25px 0;
    border-bottom: none; /* 보더 제거 */
    transition: background-color 0.3s;
    position: relative;
}

/* 호버 시 텍스트 색상 변경 (CSS로 처리) */
/* .main3-menu-item:hover .menu-title {
    color: #0D4765;
} */

.main3-menu-item .menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 메뉴 타이틀 및 밑줄 컨테이너 */
.main3-menu-item .menu-title {
    font-size: 60px;
    font-weight: 800;
    line-height: 1.2;
    color: #1a1a1a;
    transition: color 0.3s;

    /* 밑줄 애니메이션을 위한 설정 */
    display: inline-block;
    position: relative;
    padding-bottom: 10px;
}

/* 밑줄 애니메이션 (::after) */
.main3-menu-item .menu-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 4px;
    background-color: #fff;
    transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 활성화된 메뉴 아이템 밑줄 */
.main3-menu-item.active .menu-title::after {
    width: 100%;
}


/* 활성화된 메뉴 아이템 스타일 */
.main3-menu-item.active .menu-title {
    color: #080026;
}

/* ⭐️ 화살표 스타일 (수정됨: 항상 보이도록 opacity 1로 고정) ⭐️ */
.menu-arrow {
    font-size: 1.5rem;
    color: #fff;
    opacity: 1; /* 항상 보이도록 1로 고정 */
    transition: transform 0.3s ease-out, color 0.3s ease-out; /* opacity 제거 */
}

/* ⭐️ Active 상태: 90도 회전 (opacity는 기본 스타일에서 처리) ⭐️ */
.main3-menu-item.active .menu-arrow {
    transform: rotate(90deg);
}

/* ⭐️ Hover 상태: JS에서 opacity 조절 (JS 로직은 제거되었으나 CSS 호버 효과가 없어 이 상태로 유지) ⭐️ */
.main3-menu-item:not(.active):hover .menu-arrow {
    transform: rotate(0deg);
}


/* 아코디언 설명 영역 */
.menu-description {
    max-height: 0;
    overflow: hidden;
    padding: 0 0 0 5px;
    /* ⭐️ 모바일에서 이미지까지 수용하기 위해 트랜지션을 길게 설정 ⭐️ */
    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
}

.main3-menu-item.active .menu-description {
    /* PC의 기본 높이 (JS에서 모바일은 1000px로 오버라이드) */
    max-height: 200px;
    padding: 15px 0 0 5px;
}

.menu-description p {
    font-size: 1rem;
    line-height: 1.6;
    color: #555;
    margin: 0;
}

/* -------------------------------------
    4-3. 모바일 전용 이미지 스타일 (기본적으로 숨김)
    ------------------------------------- */
.mobile-menu-image-wrap {
    /* PC에서는 숨김 */
    display: none;
    overflow: hidden;
    opacity: 0;
    max-height: 0;
    /* ⭐️ max-height와 opacity의 transition을 분리하여 max-height만 빠르게 처리 ⭐️ */
    transition: max-height 0.3s ease-out, opacity 0.5s ease-in-out 0.1s, margin-top 0.3s ease-out;
}

.mobile-menu-image-wrap img {
    width: 100%;
    /* ⭐️ 이미지 잘림 방지: 높이 고정 없이 자동으로 설정 ⭐️ */
    height: auto;
    display: block;
    object-fit: cover;
    /*border-radius: 8px; !* 모바일에서 보기 좋게 둥근 모서리 추가 *!*/
}

/* -------------------------------------
    5. 모바일 반응형 조정
    ------------------------------------- */
@media (max-width: 1024px) {

    .main-bg-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0);
        z-index: 5;
    }

    /* 섹션 2: 모바일 제목 여백 조정 */
    .main-title-wrap {
        margin-bottom: 50px;
    }

    /* 섹션 2: 3분할 -> 1단 스택 */
    .main2-content-wrap {
        flex-direction: column;
        gap: 0; /* 아이템 사이 기본 간격 제거 */
        padding: 0 5%; /* 모바일에서 좌우 패딩 추가 */
    }

    /* ⭐️ 섹션 2: 아이템 사이에 구분선 추가 ⭐️ */
    .main2-item {
        padding: 20px 0; /* 상하 패딩으로 여백 확보 */
        border-bottom: 1px solid #eee; /* 구분선 추가 */
        flex: none; /* 플렉스 비율 제거 */
        width: 100%; /* 너비 100% 확보 */
    }

    /* ⭐️ 모바일 전용 이미지 표시 ⭐️ */
    .mobile-menu-image-wrap {
        display: block; /* 모바일에서 표시 */
    }

    /* 마지막 아이템의 하단 구분선 제거 */
    .main2-item:last-child {
        border-bottom: none;
    }

    /* PC에서 사용하던 세로선 숨김 */
    .main2-vertical-line {
        display: none;
    }

    /* 섹션 3: 2단 레이아웃 -> 1단 스택 */
    #main3 {
        padding: 40px 0; /* 모바일에서 섹션 패딩 추가 */
    }

    .main3-container {
        flex-direction: column;
        gap: 40px;
        min-height: auto;
        width: 100%; /* 모바일에서 다시 100% 확보 */
    }

    /* ⭐️ PC 전용 이미지 영역을 숨기고 높이를 0으로 설정 ⭐️ */
    .main3-left-image {
        display: none;
        height: 0;
        min-height: 0;
        order: 2;
        flex: 0 0 0;
    }

    /* 이미지와 컨텐츠 폭 100%로 설정 */
    .main3-left-image,
    .main3-right-content {
        flex: 0 0 100%;
        min-width: 100%;
        height: auto;
    }

    .main3-right-content {
        order: 1;
        padding: 0 5%; /* 모바일에서 좌우 패딩만 유지 */
    }

    /* 메뉴 타이틀 폰트 크기 조정 */
    .main3-menu-item .menu-title {
        font-size: 2rem;
        padding-bottom: 5px;
    }

    /* 섹션 1 텍스트 크기 조정 */
    #main1 .wave-title {
        font-size: 1.2rem;
    }

    #main1 .wave-desc {
        font-size: 0.7rem;
    }

    /* 섹션 2 텍스트 크기 조정 */
    .main-title-large {
        font-size: 25px;
    }

    .main-title-subtitle {
        font-size: 13px;
    }

    #main2 {
        padding: 50px 0; /* 모바일 섹션 2 패딩 조정 */
    }

    .main2-item .main2-h1 {
        font-size: 1.1rem;
    }
    .main2-item .main2-p {
        font-size: 0.85rem;
    }

    .menu-description p {
        font-size: 0.7rem;
    }

    /* ⭐️ 모바일 전용 이미지 표시 ⭐️ */
    .mobile-menu-image-wrap {
        display: block;
    }
}


/* -------------------------------------
    6. 다크 테마 전환 스타일
    ------------------------------------- */

/* 배경/텍스트 색상 전환에 애니메이션 효과 추가 */
#main2, #main3,
body,
.main2-h1,
.main-title-large,
.main-title-subtitle,
.main3-subtitle,
.main3-menu-item .menu-title,
.menu-arrow,
.menu-description p {
    transition: background-color 1s ease-in-out, color 1s ease-in-out;
}

/* ⭐️ 다크 테마 클래스 정의 (body에 dark-theme-active 클래스가 붙었을 때) ⭐️ */
body.dark-theme-active #main2,
body.dark-theme-active #main3 {
    background-color: #191919; /* 검은색 배경 */
}


/* 텍스트 색상 전환 */
body.dark-theme-active #main2,
body.dark-theme-active #main3,
body.dark-theme-active .main2-p,
body.dark-theme-active .main-title-subtitle,
body.dark-theme-active .main3-subtitle,
body.dark-theme-active .menu-description p {
    color: #ffffff;
}

body.dark-theme-active .main-title-large,
body.dark-theme-active .main2-h1 {
    color: #ffffff;
}

/* ⭐️ 섹션 2: 다크 모드 아이콘 색상 반전 ⭐️ */
body.dark-theme-active .main2-icon-box {
    background-color: #ffffff; /* 아이콘 배경: 흰색 */
}

body.dark-theme-active .main2-icon-box i {
    color: #000; /* 아이콘 색상: 네이비 */
}


/* 섹션 2: 다크 테마 시 선 색상도 변경 */
body.dark-theme-active .main2-horizontal-line,
body.dark-theme-active .main2-vertical-line {
    background-color: #444;
}

/* ⭐️ 모바일 구분선 다크 테마 시 변경 ⭐️ */
@media (max-width: 1024px) {
    body.dark-theme-active .main2-item {
        border-bottom: 1px solid #444;
    }
}


/* 섹션 3: 다크 테마 시 메뉴 색상 */
body.dark-theme-active .main3-menu-item .menu-title {
    color: #ffffff;
}

/* 다크 테마 활성화 메뉴 스타일 */
body.dark-theme-active .main3-menu-item.active .menu-title {
    color: #8c8c8c; /* 활성화된 항목은 살짝 옅은 흰색으로 */
}

body.dark-theme-active .main3-menu-item.active .menu-title::after {
    background-color: #8c8c8c; /* 밑줄 색상도 옅은 흰색으로 */
}

body.dark-theme-active .main3-menu-item.active .menu-arrow {
    color: #8c8c8c;
}

/* 섹션 3 좌측 배경 색상 유지 (이미 #000000 이므로) */
body.dark-theme-active .main3-left-image {
    background-color: #000000;
}