/* === 푸터(Footer) 스타일 시작 === */

/* 1. 푸터 전체 영역 설정 */
footer {
    background-color: #f9f9f9; /* 배경색 (연한 회색) */
    padding: 30px 20px;        /* 상하 30px, 좌우 20px 여백 */
    text-align: center;        /* 텍스트 가운데 정렬 */
    font-size: 14px;           /* 기본 글자 크기 */
    color: #666;               /* 기본 글자 색상 (진한 회색) */
    border-top: 1px solid #eee; /* 상단에 연한 테두리 선 추가 */
    margin-top: auto;          /* 페이지 내용이 적어도 푸터를 하단에 고정 */
}

/* 2. 회사 정보 (상단 copyright 부분) */
.corp-info {
    margin-bottom: 20px;       /* 아래 링크들과의 간격 */
    line-height: 1.6;          /* 줄 간격 */
    color: #333;               /* 글자색을 조금 더 진하게 */
}

/* 3. 링크 모음 컨테이너 (가로 정렬의 핵심!) */
.footer-links {
    display: flex;             /* Flexbox 레이아웃 사용 */
    justify-content: center;   /* 가로 방향 가운데 정렬 */
    align-items: center;       /* 세로 방향 가운데 정렬 */
    flex-wrap: wrap;           /* 화면이 좁으면 자동으로 줄 바꿈 */
    gap: 15px;                 /* 각 링크와 구분선 사이의 간격 */
    margin-bottom: 25px;       /* 아래 면책 조항과의 간격 */
}

/* 4. 개별 링크 스타일 (스크린샷 2번처럼 파란색+밑줄) */
.footer-link {
    color: #0056b3;            /* 링크 색상 (파란색 계열) */
    text-decoration: underline; /* 밑줄 표시 */
    font-weight: 500;          /* 글자 두께를 약간 두껍게 */
    transition: color 0.2s;    /* 마우스 올렸을 때 색상 변화 부드럽게 */
}

/* 마우스 올렸을 때 링크 효과 */
.footer-link:hover {
    color: #003d82;            /* 마우스 오버 시 더 진한 파란색 */
}

/* 5. 구분선 (|) 스타일 */
.separator {
    color: #ccc;               /* 연한 회색으로 설정 */
    font-weight: 300;          /* 얇게 표시 */
}

/* 6. 하단 면책 조항 (Disclaimer) */
.disclaimer {
    font-size: 12px;           /* 글자 크기를 작게 */
    color: #999;               /* 글자 색상을 연하게 */
    line-height: 1.5;          /* 읽기 편한 줄 간격 */
    max-width: 900px;          /* 너무 넓게 퍼지지 않도록 최대 너비 제한 */
    margin: 0 auto;            /* 가운데 정렬 */
}

/* === 푸터 스타일 끝 === */

/* === 하단 가로 배너 스타일 === */

.wide-banner-wrap {
    max-width: 600px;  /* 위의 카드 2개 합친 너비와 비슷하게 제한 */
    margin: 40px auto; /* 위아래 간격 40px, 좌우 가운데 정렬 */
    padding: 0 20px;   /* 모바일에서 양옆 여백 확보 */
    text-align: center;
}

.wide-banner-img {
    width: 100%;       /* 부모 너비에 꽉 차게 (반응형) */
    height: auto;      /* 높이는 비율에 맞춰 자동 조절 */
    border-radius: 20px; /* 위의 카드들과 똑같은 둥근 모서리 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* 은은한 그림자 */
    transition: all 0.2s ease; /* 부드러운 움직임 */
    display: block;    /* 이미지 하단 여백 제거 */
}

/* 마우스 올렸을 때 효과 (위의 카드들과 통일) */
.wide-banner-img:hover {
    transform: translateY(-5px); /* 살짝 위로 떠오름 */
    box-shadow: 0 8px 25px rgba(0,0,0,0.1); /* 그림자가 진해짐 */
    cursor: pointer;
}