/* 1. 기본 스타일 초기화 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #f4f4f4;
    color: #212121;
    font-family: 'Pretendard', sans-serif;
    overflow-x: hidden;
}

.eng-text {
    font-family: 'Gowun Dodum', sans-serif;
}

/* 전체 이미지 흑백톤 처리 */
img {
    filter: grayscale(100%); /* dial: 0%~100% 사이로 조절하면 흑백 강도 조절 가능 */
}

/* 2. 히어로 섹션 */
.hero-section {
    width: 100%;
    padding: 40px 40px 0 40px; 
    display: flex;
    flex-direction: column;
}

/* 3. 로고 영역: 가로로 아주 길게 꽉 차되, 세로 높이가 첫 화면의 45%를 넘지 못하게 차단 */
.logo-area {
    width: 100%;
    height: 25vh; /* 첫 화면에서 차지할 공간 */
    position: relative;
}

.main-logo {
    position: fixed; 
    top: 40px;
    left: 40px;
    width: 1200px; /* 👈 처음 시작할 때의 거대한 크기 */
    height: auto;
    display: block;
    z-index: 100;
    transform-origin: left top; /* 왼쪽 상단 기준 축소 */
    will-change: width, top;   /* 실시간 크기 변경을 부드럽게 만들기 위한 필수 코드 */
}

.main-logo.shrunk {
    top: 25px;
    left: 40px;
    width: 160px; 
}

/* 4. 슬로건 영역: 첫 화면의 15% 높이를 쓰면서 우측 끝 정렬 */
.slogan-wrapper {
    width: 100%;
    height: 50vh; /* 첫 화면의 15% 높이 차지 */
    display: flex;
    justify-content: flex-end;
    align-items: flex-end; /* 이미지 바로 위에 딱 붙도록 바닥 정렬 */
    padding-bottom: 20px; /* 이미지와의 최소 간격 */
}

.slogan-wrapper .eng-text {
    font-size: 16px;
    letter-spacing: -0.02em;
    font-weight: 400;
}

/* 5. 메인 이미지 영역: 첫 화면 남은 높이(40%)에 걸치기 시작해서 아래로 무한대로 늘어남 */
.image-wrapper {
    width: 100%;
}

.hero-img {
    width: 100%;
    height: 1400px; /* 원본 비율대로 아래로 길게 늘어남 (스크롤하면 끝까지 다 보임) */
    display: block;
}

/* 6. 두 번째 비전 섹션 */
.vision-section {
    width: 100%;
    height: 100vh;
    background-color: #f4f4f4;
    padding: 100px 40px;
}

/* 6. 두 번째 어바웃 섹션 */
.about-section {
    width: 100%;
    height: 100vh;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 40px;
}

.about-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center; /* 모든 요소를 가운데로 정렬 */
}

/* 1단: 상단 작은 날짜 */
.about-date {
    font-size: 14px;
    letter-spacing: 0.05em;
    color: #212121;
    margin-bottom: 30px; /* 2단 문구와의 간격 */
}

/* 2단: 중앙 메인 한글 문구 */
.about-main-text {
    font-size: 32px; /* 32px 세팅 유지 */
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: #212121;
    word-break: keep-all;
    margin-bottom: 25px; /* 👈 이 숫자를 조절하면 한글 문장과 아래 가로선 사이의 간격이 바뀝니다 */
}

/* ⭐ 2단 문장 밑에 들어가는 1단(날짜) 길이의 정갈한 가로선 */
.about-line {
    width: 65px; /* 👈 1단 날짜(2026.09)의 가로 폭과 딱 들어맞는 정교한 고정 길이 */
    height: 1px;
    background-color: #212121;
}



/* 7. 지그재그 3칸 섹션 (이미지-텍스트 교차 배치) */
.zigzag-section {
    width: 100%;
    padding: 60px 40px; /* dial: 위아래 여백 */
    display: flex;
    flex-direction: column;
    gap: 250px; /* dial: 칸과 칸 사이 간격 */
}

.zigzag-row {
    display: flex;
    align-items: center;
    gap: 80px; /* dial: 이미지-텍스트 사이 간격 */
}

/* 텍스트-이미지 순서로 뒤집는 칸 (2번째 칸) */
.zigzag-row.reverse {
    flex-direction: row-reverse;
}

.zigzag-media {
    flex: 1 1 55%;
}

.zigzag-media img {
    width: 100%;
    height: 480px; /* dial: 이미지 높이 */
    object-fit: cover;
    display: block;
}

.zigzag-text {
    flex: 1 1 45%;
    padding: 0 20px; /* dial: 텍스트 좌우 여백 */
}

.zigzag-num {
    font-size: 13px;
    letter-spacing: 0.05em;
    color: #777777;
    margin-bottom: 20px; /* dial: 넘버-타이틀 간격 */
}

.zigzag-title {
    font-size: 36px; /* dial: 타이틀 크기 */
    font-weight: 300;
    letter-spacing: -0.02em;
    margin-bottom: 22px; /* dial: 타이틀-본문 간격 */
}

.zigzag-desc {
    font-size: 15px;
    line-height: 1.7;
    font-weight: 300;
    color: #212121;
    word-break: keep-all;
    max-width: 320px; /* dial: 본문 줄바꿈 폭 */
}

/* 768px 이하: 세로로 쌓기 (이미지-텍스트 순서 통일) */
@media (max-width: 768px) {
    .zigzag-section {
        gap: 70px;
        padding: 40px 24px;
    }
    .zigzag-row,
    .zigzag-row.reverse {
        flex-direction: column;
        gap: 30px;
    }
    .zigzag-media img {
        height: 320px;
    }
    .zigzag-text {
        padding: 0;
    }
    .zigzag-desc {
        max-width: none;
    }
}

/* ⭐ 768px 이하 공통 모바일 대응: 히어로 / 슬로건 / 어바웃 / 푸터 */
@media (max-width: 768px) {
    .hero-section {
        padding: 24px 24px 0 24px; /* dial: 좌우 여백 */
    }

    .logo-area {
        height: 14vh; /* dial: 로고 영역 확보 높이 (모바일에선 로고가 작아지므로 축소) */
    }

    /* main-logo의 실제 크기는 script.js에서 화면 너비별로 계산해 인라인으로 적용됨.
       여기 값은 JS 실행 전(초기 렌더) 순간의 안전한 기본값 역할. */
    .main-logo {
        width: 560px; /* dial: JS 초기값과 동일하게 맞춰 깜빡임 방지 */
    }

    .slogan-wrapper {
        height: 30vh; /* dial: 모바일에서 슬로건 영역 비율 축소 */
        padding-bottom: 14px;
    }

    .slogan-wrapper .eng-text {
        font-size: 12px; /* dial: 모바일 슬로건 글자 크기 */
    }

    .hero-img {
        height: 480px; /* dial: 모바일 히어로 이미지 높이 */
    }

    .about-section {
        height: auto;
        padding: 100px 24px; /* dial: 모바일 어바웃 상하 여백 */
    }

    .about-main-text {
        font-size: 22px; /* dial: 모바일 어바웃 문구 크기 */
    }

    .footer-logo-wrap {
        padding: 0 24px;
        margin-bottom: 24px;
    }

    .footer-info-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 0 24px;
    }

    .info-left {
        flex-direction: column;
        gap: 10px; /* dial: 모바일에서 기업정보 줄 간격 */
    }

    .info-right {
        flex-wrap: wrap;
        gap: 16px 24px; /* dial: 모바일에서 링크 간격 */
    }
}

/* ⭐ 480px 이하: 더 작은 화면 추가 보정 */
@media (max-width: 480px) {
    .logo-area {
        height: 10vh;
    }

    .main-logo {
        width: 320px; /* dial: JS 초기값과 동일하게 맞춤 */
    }

    .slogan-wrapper {
        height: 22vh;
    }

    .hero-img {
        height: 340px; /* dial: 소형 화면 히어로 이미지 높이 */
    }

    .about-main-text {
        font-size: 19px;
    }

    .dots-corridor {
        height: 300px; /* dial: 소형 화면 어바웃-푸터 간격 */
    }
}

/* ⭐ 어바웃 ↔ 푸터 사이, 스크롤 점 애니메이션이 지나가는 넉넉한 여백 구간 */
.dots-corridor {
    width: 100%;
    height: 620px; /* 👈 이 숫자를 늘리면 어바웃-푸터 간격이 더 넓어지고, 점이 움직이는 여유도 커집니다 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 42px;
    background-color: #f4f4f4;
}

.dots-corridor .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: block;
    opacity: 0;
    transform: translateY(-30px);
}

/* 🎛️ 구간 진입 시 딱 한 번, 순서대로 '쪼로록' 떨어지는 재생 애니메이션 */
.dots-corridor.dots-play .dot {
    animation: dotFall 1.0s ease-in forwards;
}

.dots-corridor.dots-play .dot:nth-child(1) { animation-delay: 0s; }
.dots-corridor.dots-play .dot:nth-child(2) { animation-delay: 0.12s; }
.dots-corridor.dots-play .dot:nth-child(3) { animation-delay: 0.24s; }
.dots-corridor.dots-play .dot:nth-child(4) { animation-delay: 0.36s; }
.dots-corridor.dots-play .dot:nth-child(5) { animation-delay: 0.48s; }

@keyframes dotFall {
    0% {
        opacity: 0;
        transform: translateY(-30px);
    }
    25% {
        opacity: 1;
        transform: translateY(6px);
    }
    40% {
        opacity: 1;
        transform: translateY(0);
    }
    /* 👈 잠깐 제자리에 머물렀다가(40%~65%), 이후 아래로 가라앉으며 사라짐 */
    65% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(120px); /* 👈 이 숫자를 늘리면 푸터 속으로 더 깊이 스며드는 느낌 */
    }
}



/* 10. 공식 푸터 섹션 (로고 이미지 교체 및 여백 조절 버전) */
.main-footer {
    width: 100%;
    background-color: #111111;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    
    /* 📍 dots-corridor가 간격을 대신 만들어주므로 푸터 자체 여백은 줄였습니다 */
    padding-top: 80px; 
    padding-bottom: 40px;
}

/* 로고 이미지 감싸는 박스 */
.footer-logo-wrap {
    width: 100%;
    
    /* 🔴 다른 섹션들과 좌우 라인을 똑같이 맞추기 위해 양옆 패딩 부여 */
    padding: 0 40px; 
    box-sizing: border-box;
    
    /* 📍 [여기서 조절 2] 로고 이미지와 맨 밑 기업 정보 사이의 간격입니다. */
    margin-bottom: 30px; 
}

/* 🔴 3. 로고 이미지 크기 세팅 */
.footer-img-logo {
    width: 100%; /* 박스 가로 폭에 맞춰 양끝으로 칼같이 100% 찢어지게 설정 */
    height: auto; /* 비율 깨지지 않게 자동 조절 */
    display: block;
}

/* 하단 정보 정렬 바 */
.footer-info-bar {
    width: 100%;
    display: flex;
    
    /* 🔴 다시 좌우 끝으로 찢어서 양끝 40px 라인을 칼같이 맞춥니다! */
    justify-content: space-between; 
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    
    /* 다른 섹션들과 좌우 라인을 완벽하게 일치시키는 패딩 */
    padding: 0 40px; 
    box-sizing: border-box;
}

/* 글자 크기 (13px 유지) */
.footer-info-bar span, 
.footer-link {
    font-size: 13px;
    font-weight: 300;
    color: #777777;
    letter-spacing: 0.05em;
    text-decoration: none;
}

.info-left {
    display: flex;
    gap: 90px; /* 👈 간격을 90px로 획기적으로 넓혀서 중앙이 휑하지 않게 채워줍니다! */
}

/* 명칭과 실제 데이터(김정재 등) 사이의 여백 */
.info-left .val {
    color: #aaaaaa;
    margin-left: 10px; 
}

/* 🔴 오른쪽 그룹: 오른쪽 정렬을 유지하되, 얘네도 서로 멀찍이 떨어뜨려서 균형 맞춤 */
.info-right {
    display: flex;
    gap: 60px; /* 👈 이용약관 / 개인정보 / 카피라이트 사이를 시원하게 찢음 */
    align-items: center;
}

.footer-link:hover {
    color: #ffffff;
}

/* 카피라이트 크기 유지 */
.copyright {
    color: #555555 !important;
    font-size: 12px;
}

/* ⭐ 마우스 커서를 따라다니는 단어 트레일 (PROPERTY) - 전체 페이지 공통 */
.cursor-word-trail {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 9999;
}

.cursor-word-trail .trail-letter {
    position: absolute;
    top: 0;
    left: 0;
    font-family: 'Gowun Dodum', sans-serif;
    font-size: 13px;
    letter-spacing: 0;
    font-weight: 400;
    color: #212121;
    mix-blend-mode: difference; /* 밝은 배경/어두운 푸터 어디서든 잘 보이게 */
    white-space: nowrap;
    will-change: transform;
}

/* 마우스가 없는 모바일/터치 기기에서는 숨김 */
@media (hover: none), (pointer: coarse) {
    .cursor-word-trail {
        display: none;
    }
}