/* 기본 설정 */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'AppleSDGothicNeoB00', 'Malgun Gothic', Arial, sans-serif;
    background-color: #000;
    color: #d1a7a7;
    background-image: url('image/illustration\ mokup.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 콘텐츠 영역 설정 */
.content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px;
    height: 100vh;
}

/* 이미지 섹션 - 왼쪽 하단 배치 */
.image-section {
    width: 30%;
    flex-direction: column; /* 세로 방향으로 배치 */
    align-items: flex-start;
    justify-content: flex-end;
    gap: 10px; /* 모든 이미지 간의 간격 */
    margin-left: 130px; /* 이미지 섹션을 오른쪽으로 20px 이동 */
}

.image-section img {
    width: 100%;
    max-width: 150px; /* 이미지 크기 제한 */
    border-radius: 2px;
    margin-bottom: 10px;
    margin-top: 500px; /* 이미지 위에 50px의 여백 추가 */
}

/* 상단 제목 텍스트 (ILLUSTRATION DESIGN ARTWORK) */
.header-title {
    position: absolute;
    top: 10%; /* 원하는 위치로 상단 여백 설정 */
    left: 10%; /* 원하는 위치로 왼쪽 여백 설정 */
    font-size: 2.5rem;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.8); /* 약간의 투명도 추가 */
}

/* 텍스트 섹션 */
.text-section {
    position: absolute;
    top: 35%; /* "ILLUSTRATION DESIGN ARTWORK"와 맞추기 위해 위치 조정 */
    left: 7%; /* 왼쪽 여백을 상단 텍스트와 동일하게 맞춤 */
    width: 50%; /* 필요에 따라 너비 조정 */
    color: #d1a7a7;
}

.text-section h3 {
    font-size: 60px;
    font-weight: bold;
    color: #ffffff;
    margin: 0 0 10px 0;
    text-transform: uppercase;
}

.text-section p {
    font-size: 1rem;
    line-height: 1.6;
    color: #d1a7a7;
    margin: 0;
}

/* 헤더 메뉴 스타일 */
.header-menu {
    display: flex;
    justify-content: space-between; /* 왼쪽과 오른쪽 메뉴를 양쪽 끝으로 분리 */
    align-items: center; /* 수직 가운데 정렬 */
    padding: 10px 20px; /* 상하좌우 여백 */
    position: fixed; /* 화면 상단 고정 */
    top: 0; /* 상단 고정 위치 */
    width: 100%; /* 전체 화면 너비 확장 */
    background-color: rgba(0, 0, 0, 0.8); /* 투명도 있는 배경 */
    z-index: 10; /* 메뉴가 다른 요소 위로 올라오게 설정 */
}

/* 왼쪽 메뉴 */
.header-menu .left-menu {
    display: flex;
    gap: 15px; /* 메뉴 간 간격 */
    margin-left: 20px; /* 왼쪽 여백 추가 */
}

/* 오른쪽 메뉴 */
.header-menu .right-menu {
    display: flex;
    gap: 15px; /* 메뉴 간 간격 */
    margin-right: 20px; /* 오른쪽 여백 추가 */
    justify-content: flex-end; /* 오른쪽 정렬 */
    position: absolute; /* 위치를 상단 고정 */
    right: 20px; /* 오른쪽 간격 */
    top: 10px; /* 상단 간격 */
}

/* 공통 링크 스타일 */
.header-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.header-menu li {
    display: inline;
}

.header-menu a {
    text-decoration: none;
    font-size: 0.875rem; /* 14px 크기 */
    font-weight: bold;
    color: #ffffff; /* 기본 글자색 */
    padding: 8px 12px; /* 버튼 크기 */
    border-radius: 4px; /* 둥근 모서리 */
    transition: all 0.3s ease; /* 부드러운 전환 효과 */
}

/* 호버 효과 */
.header-menu a:hover {
    color: #000; /* 글자색 변경 */
    background-color: #f0e68c; /* 배경색 변경 */
}

/* 클릭 및 고정 상태(active) */
.header-menu a.active {
    color: #ffffff; /* 글자색 유지 */
    background-color: #d1a7a7; /* 고정 상태 배경색 */
    border: 2px solid #ffffff; /* 고정 상태 테두리 */
    pointer-events: none; /* 클릭 불가 */
}