/* 기본 여백 초기화 및 바탕화면 흰색 설정 */
body {
    margin: 0;
    padding: 0;
    background-color: #ffffff; 
    display: flex; /* 화면 전체 내용을 Flexbox로 제어 */
    justify-content: center; /* 수평 정중앙 */
    align-items: center; /* 수직 정중앙 */
    min-height: 100vh; /* 화면 전체 높이를 차지하도록 설정 */
    font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; /* 깔끔한 산세리프 폰트 적용 */
}

/* 이미지와 텍스트를 묶는 메인 컨텐츠 그룹 */
.main-content-group {
    display: inline-flex; /* 그룹 내 요소를 Flexbox로 제어 */
    flex-direction: column; /* 요소를 세로 방향(이미지 -> 텍스트)으로 정렬 */
    align-items: center; /* 그룹 내 요소들을 가로 방향 중앙으로 정렬 */
}

/* 메인 이미지 스타일 */
#main-image {
    width: 120px; /* 텍스트 폭과 비슷한 가로 크기로 고정 (이미지 크기도 여기에 맞춰짐) */
    max-width: 100%; /* 모바일 등 작은 화면에서는 튀어나가지 않고 화면에 맞게 줄어들도록 설정 */
    height: auto; /* 원본 이미지의 가로세로 비율이 깨지지 않도록 자동 조절 */
    cursor: pointer;
}

/* 텍스트 링크 스타일 */
#text-link {
    display: block; /* 텍스트 영역을 블록으로 설정해 전체 공간을 차지하게 함 */
    text-decoration: none; /* 기본 링크 밑줄 제거 */
    color: #333333; /* 짙은 회색으로 세련된 느낌 적용 */
    font-size: 10px;
    font-weight: 500; /* 텍스트를 약간 도톰하게 설정해 가독성 확보 */
    letter-spacing: -0.5px;
    white-space: nowrap; /* 중요: 텍스트가 절대 줄바꿈되지 않고 한 줄로 유지되게 함 */
    padding-top: 15px; /* 이미지와 텍스트 사이의 간격 (이미지 바로 아래에 붙도록 좁게 설정) */
    transition: color 0.3s ease; /* 마우스 오버 시 부드러운 색상 전환 */
    text-align: center; /* 텍스트 내용을 중앙 정렬 */
}

/* 텍스트에 마우스를 올렸을 때의 스타일 */
#text-link:hover {
    color: #006cb2;
}