/* 폰트 및 기본 여백 제거 */
body {
    margin: 0;
    padding: 40px;
    font-family: 'Helvetica', 'Arial', sans-serif;
    background-color: #fff;
    color: #333;
}

/* 1. header 설정 */
header {
    display: flex;
    flex-direction: column; 
    align-items: flex-start; 
    margin-bottom: 100px;    
}

/* 2. h1 설정 (하나만 남기세요) */
h1 {
    font-size: 30px;        /* 원하는 크기 */
    font-weight: 800;        /* 원하는 두께 */
    margin: 0 0 25px 0; 
    letter-spacing: -0.02em;
    font-family: 'Helvetica', 'Arial', sans-serif;
}

/* h1 a 스타일 (이것도 추가해두면 링크 색상이 검정으로 고정됩니다) */
h1 a {
    text-decoration: none;
    color: #000;
}

/* 3. nav 설정 (중복 삭제 후 하나로 통일) */
nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column; 
    gap: 15px; 
}

nav a {
    text-decoration: none;
    color: #999;
    font-size: 18px; /* 메뉴 글씨도 조금 키웠습니다 */
    transition: 0.3s;
}

nav a:hover {
    color: #000;
}
/* 갤러리 그리드 레이아웃 */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); /* 유동적인 그리드 */
    gap: 40px;
}

.item img {
    width: 100%;
    height: auto;
    display: block;
    filter: grayscale(10%); /* 약간의 차분한 느낌 부여 */
}

/* 모바일 대응 */
@media (max-width: 600px) {
    body { padding: 20px; }
    header { flex-direction: column; gap: 20px; }
    .gallery { grid-template-columns: 1fr; }
}

/* About 페이지 스타일 */
.about-container {
    max-width: 600px; /* 글이 너무 길게 퍼지지 않게 너비 제한 */
    margin: 0 auto;   /* 가운데 정렬 */
    padding-top: 50px;
    line-height: 1.8;  /* 줄 간격을 넓혀 가독성 향상 */
    color: #333;
}

.bio {
    margin-bottom: 80px; /* 소개글과 연락처 사이 여백 */
    font-size: 1.1rem;
}

.contact h3 {
    font-size: 0.9rem;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 20px;
    color: #999; /* Contact 제목은 살짝 흐리게 처리하여 세련된 느낌 부여 */
}

.contact p {
    font-size: 0.9rem;
    margin: 10px 0;
}

.contact a {
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #eee; /* 링크 아래에 얇은 밑줄 */
    transition: 0.3s;
}

.contact a:hover {
    border-bottom: 1px solid #333;
}

.gallery-container {
    width: 100%;
    height: 70vh; /* 화면 높이의 70% 정도 사용 */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer; /* 마우스를 올리면 클릭 가능하다는 표시 */
    position: relative;
    overflow: hidden;
}

.slides {
    position: relative;
    width: 100%;
    height: 100%;
}

.slide {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 화면 정중앙 배치 */
    max-width: 90%;
    max-height: 100%;
    opacity: 0;           /* 기본적으로는 안 보이게 */
    transition: opacity 0.5s ease; /* 부드럽게 나타나는 효과 */
    pointer-events: none; /* 클릭 방해 금지 */
}

.slide.active {
    opacity: 1;           /* active 클래스가 붙은 사진만 보임 */
    pointer-events: auto;
}