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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    background: white;
}

/* 메인 이미지 섹션 */
.main-image-section {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
}

/* 메인 키비주얼 (첫 번째 이미지) - 배경색 적용 */
.main-image-section:first-child {
    background: #1a365d; /* 다크 블루 배경 */
}

.main-image {
    width: 100%;
    max-width: 1440px;
    height: auto;
    display: block;
}

/* 이미지와 링크가 있는 섹션 */
.image-with-links {
    position: relative;
    width: 100%;
    max-width: 1440px;
}

/* 링크 오버레이 */
.link-overlay {
    position: absolute;
    display: block;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

/* main_09.png의 버튼 위치에 맞게 조정 (데스크톱 기준) */
.link-entry {
    /* 접수하기 */
    top: 22.1%;
    left: 16.9%;
    width: 32.1%;
    height: 6.3%;
}

.link-check {
    /* 접수 확인 */
    top: 22.1%;
    left: 50.9%;
    width: 32.1%;
    height: 6.3%;
}

.link-inquiry {
    /* 1:1 문의 게시판 */
    top: 30.8%;
    left: 16.9%;
    width: 66.2%;
    height: 6.2%;
}

/* 링크 호버 효과 (디버깅 시 색 확인용) */
.link-overlay:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

/* 푸터 이미지 섹션 */
.footer-image-section {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0; /* 상하 여백 제거 */
    margin: 0; /* 상하 여백 제거 */
}

.footer-image {
    width: 100%;
    max-width: 1440px;
    height: auto;
    display: block;
}

/* 푸터 링크 컨테이너 */
.footer-links-container {
    position: relative;
    width: 100%;
    max-width: 1440px;
}

/* 푸터 링크 기본 스타일 */
.footer-link {
    position: absolute;
    display: block;
    cursor: pointer;
    transition: background-color 0.2s ease;
    z-index: 10;
}

/* INUSCOMMUNITY 링크 영역 */
.inus-link {
    top: 27.6%;
    left: 25%;
    width: 17.5%;
    height: 7.5%;
}

/* Table. 링크 영역 */
.table-link {
    top: 27.6%;
    left: 46%;
    width: 10.5%;
    height: 7.5%;
}

/* POPPLY 링크 영역 */
.popply-link {
    top: 27.6%;
    left: 60%;
    width: 14.5%;
    height: 7.5%;
}

/* 푸터 링크 호버 효과 (개발자 도구에서 확인용) */
/* .footer-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
} */

/* 푸터 전체 */
.footer {
    width: 100%;
    padding: 0; /* 상하 여백 제거 */
    margin: 0; /* 상하 여백 제거 */
}

/* AI 공모전 모달 스타일 */
.ai-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.ai-modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: modalFadeIn 0.3s ease-out;
}

.ai-modal-content {
    position: relative;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    max-width: 700px; /* 더 크게 설정 */
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    animation: modalSlideIn 0.3s ease-out;
    display: flex;
    flex-direction: column;
}

.ai-modal-image {
    width: 100%;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; /* iOS 스크롤 부드럽게 */
    border-radius: 12px 12px 0 0; /* 상단만 라운드 처리 */
    /* 스크롤바 스타일링 */
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f1f1f1;
}

.ai-modal-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* 웹킷 브라우저용 스크롤바 스타일링 */
.ai-modal-image::-webkit-scrollbar {
    width: 6px;
}

.ai-modal-image::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.ai-modal-image::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.ai-modal-image::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

.ai-modal-buttons {
    display: flex;
    gap: 0;
    background: #f8f9fa;
    border-radius: 0 0 12px 12px;
}

.ai-modal-btn {
    flex: 1;
    padding: 15px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.3s;
}

.ai-modal-today {
    color: #6c757d;
    border-right: 1px solid #dee2e6;
}

.ai-modal-today:hover {
    background: #e9ecef;
}

.ai-modal-close {
    color: #007bff;
}

.ai-modal-close:hover {
    background: #e7f3ff;
}

/* 모달 애니메이션 */
@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes modalSlideIn {
    from {
        transform: scale(0.9) translateY(-20px);
        opacity: 0;
    }
    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* 반응형 */
@media (max-width: 768px) {
    .main-image,
    .footer-image {
        width: 100%;
        height: auto;
    }

    /* 모바일 버튼 영역 보정 */
    .link-entry {
        top: 22.1%;
        left: 16.9%;
        width: 32.1%;
        height: 6.3%;
    }

    .link-check {
        top: 22.1%;
        left: 50.9%;
        width: 32.1%;
        height: 6.3%;
    }

    .link-inquiry {
        top: 30.8%;
        left: 16.9%;
        width: 66.2%;
        height: 6.2%;
    }

    /* 모바일 푸터 링크 영역 보정 */
    .inus-link {
        top: 27.6%;
        left: 25%;
        width: 17.5%;
        height: 7.5%;
    }

    .table-link {
        top: 27.6%;
        left: 46%;
        width: 10.5%;
        height: 7.5%;
    }

    .popply-link {
        top: 27.6%;
        left: 60%;
        width: 14.5%;
        height: 7.5%;
    }

    /* 모바일에서 모달 크기 조정 */
    .ai-modal-content {
        width: 95%;
        max-width: 95%;
        max-height: 85vh;
    }

    .ai-modal-btn {
        padding: 12px;
        font-size: 13px;
    }
    
    /* 모바일에서 스크롤바 더 얇게 */
    .ai-modal-image::-webkit-scrollbar {
        width: 4px;
    }
}