/* 기본 스타일 */
* {
    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; /* 상하 여백 제거 */
}

/* 반응형 */
@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%;
    }
}