html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}



/* 기본 헤더 스타일 */
#main-header {
    background-color: #000;
    color: #fff;
    padding: 20px 0;
    border-bottom: 1px solid #444;
    position: relative;
    z-index: 1000;
}

#main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#main-header .logo a {
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
}

#main-header .nav-menu {
    display: flex;
    align-items: center;
}

#main-header .nav-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 30px;
}

#main-header .nav-menu ul li {
    display: inline-block;
}

#main-header .nav-menu ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

#main-header .nav-menu ul li a:hover {
    color: #ccc;
}

/* 모바일에서 햄버거 메뉴 스타일 */
#main-header .hamburger-menu {
    display: none;
    cursor: pointer;
    font-size: 1.8rem;
    color: #fff;
}

/* 반응형 헤더 조정 */
@media (max-width: 768px) {
    #main-header .container {
        flex-direction: row; /* 햄버거 메뉴와 로고 정렬 */
        justify-content: space-between;
        align-items: center;
    }

    /* 로고 크기 축소 */
    #main-header .logo a {
        font-size: 1.5rem; /* 모바일에서 로고 크기 감소 */
        letter-spacing: 1.5px;
    }

    /* 햄버거 메뉴 보이기 */
    #main-header .hamburger-menu {
        display: block; /* 모바일에서 햄버거 메뉴 버튼 보이기 */
    }

    /* 기본적으로 메뉴 숨기기 */
    #main-header .nav-menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 60px;
        right: 20px;
        background-color: #000;
        padding: 20px;
        border: 1px solid #444;
        border-radius: 8px;
    }

    #main-header .nav-menu.open {
        display: flex; /* 햄버거 메뉴를 클릭했을 때만 보이기 */
    }

    /* 메뉴 항목을 세로로 나열 */
    #main-header .nav-menu ul {
        flex-direction: column;
        gap: 15px;
    }

    #main-header .nav-menu ul li {
        text-align: right; /* 메뉴 항목을 우측 정렬 */
    }

    #main-header .nav-menu ul li a {
        font-size: 1.2rem; /* 모바일에서 메뉴 항목 크기 확대 */
    }
}






/* 메인 콘텐츠가 브라우저의 남은 높이를 차지하게 설정 */
.main-wrap {
    flex-grow: 1;
    background-color: #000; /* 배경색 유지 */
    color: #ddd;
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
}

.main-banner {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    box-sizing: border-box;
}

.intro-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: center; /* 작은 이미지들이 큰 이미지의 하단에 정렬되도록 설정 */
}

.intro-section {
    padding: 20px;
}

/* 제목 (h1) 스타일링 */
.intro-section h1 {
    font-size: 3rem; /* 큰 폰트 크기로 고급스러운 느낌 */
    font-weight: 700; /* 두껍고 굵게 */
    color: #f5f5f5; /* 밝은 회색으로 검정 배경과 대비 */
    text-transform: uppercase; /* 대문자로 변환 */
    letter-spacing: 1.5px; /* 글자 간격 넓힘 */
    margin-bottom: 15px;
}

/* 이메일 (p.email) 스타일링 */
.intro-section p.email {
    font-size: 1.2rem; /* 이메일 텍스트 크기 */
    font-weight: 500; /* 굵은 텍스트 */
    color: #ddd; /* 밝은 색상으로 변경하여 검정 배경에서 잘 보이도록 */
    margin-top: 10px;
}

/* 이메일 아이콘 스타일링 */
.intro-section p.email i {
    margin-right: 8px; /* 아이콘과 텍스트 간의 간격 */
    color: #d4af37; /* 금색 계열로 고급스러운 느낌 */
}

/* 이메일 링크 스타일링 */
.intro-section p.email a {
    color: #f5f5f5; /* 기본 링크 색상: 밝은 회색 */
    text-decoration: none; /* 링크 밑줄 제거 */
    transition: color 0.3s ease;
}

/* 이메일 링크 호버 시 스타일링 */
.intro-section p.email a:hover {
    color: #d4af37; /* 호버 시 금색으로 변경 */
    text-decoration: underline; /* 링크 강조 */
}


/* 갤러리 섹션 */
.gallery-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end; /* 작은 이미지들이 큰 이미지의 하단에 정렬되도록 설정 */
    gap: 20px; /* 큰 이미지와 작은 이미지들 사이 간격 */
}

/* 큰 이미지 섹션 */
.main-image-wrapper {
    max-width: 400px; /* 큰 이미지의 최대 너비 */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible; /* overflow 문제 방지 */
}

.main-image {
    transition: transform 0.3s ease; /* 회전 애니메이션과 함께 fade-in 효과 */
    opacity: 1; /* 처음에는 이미지가 보이도록 설정 */
}


.main-image img {
    transition: opacity 0.3s ease; /* opacity와 transform을 img에 적용 */
    opacity: 1; /* 처음에는 이미지가 보이도록 설정 */
    width: 100%;
    height: auto;
    object-fit: contain;
    max-height: 500px; /* 큰 이미지의 최대 높이 */
}

/* 작은 이미지 갤러리 */
.thumbnail-gallery {
    display: flex;  /* 가로로 배치 */
    gap: 15px; /* 작은 이미지들 사이의 간격 */
    align-items: flex-end; /* 작은 이미지들이 하단에 정렬되도록 설정 */
}

.thumbnail {
    width: 100px;
    height: 150px;
    cursor: pointer;
    filter: brightness(50%);
    transition: all 0.3s ease;
    transform: rotate(calc(var(--rotation, 0) * 1deg)); /* 랜덤 기울임 */
}

.thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumbnail:hover {
    filter: brightness(100%);
    transform: scale(1.1) rotate(calc(var(--rotation) * 1deg)); /* 호버 시 확대 */
}


/* 반응형 스타일 */
@media (max-width: 1024px) {
    .intro-section {
        width: 40%;
    }

    .gallery-wrapper {
        width: 55%;
    }
}

@media (max-width: 768px) {
    .main-banner {
        flex-direction: column;
        align-items: center;
    }

    .intro-section, .gallery-wrapper {
        width: 100%;
    }

    .main-image-wrapper {
        max-width: 100%;
    }

    .thumbnail-gallery {
        justify-content: center;
    }

    .intro-section h1 {
        font-size: 2.5rem; /* 모바일에서 h1 크기 조정 */
    }

    .intro-section p.email {
        font-size: 1rem; /* 모바일에서 이메일 크기 조정 */
    }

    .thumbnail {
        width: 80px;
        height: 120px;
    }
}

/* Swiper.js 슬라이더 숨기기 (기본값은 데스크톱 갤러리) */
.swiper-container {
    display: none;
}

/* Swiper 슬라이더 컨테이너 스타일 (모바일 전용) */
@media (max-width: 768px) {
    .swiper-container {
        width: 100%; /* 슬라이더가 화면 너비에 맞게 확장됨 */
        height: auto; /* 슬라이더 높이를 자동으로 조절 */
        overflow: hidden; /* 넘치는 내용 숨기기 */
    }

    /* Swiper 슬라이드 스타일 */
    .swiper-slide {
        display: flex; /* 슬라이드 내부 요소를 중앙에 배치하기 위해 flexbox 사용 */
        justify-content: center;
        align-items: center;
        height: 100%; /* 슬라이드 높이를 부모 컨테이너에 맞추기 */
    }

    /* 슬라이드 내부 이미지 스타일 */
    .swiper-slide img {
        width: 100%; /* 이미지가 화면 너비에 맞게 조정 */
        height: auto; /* 이미지 비율을 유지하면서 크기를 조정 */
        object-fit: cover; /* 이미지가 슬라이드 영역을 가득 채우도록 설정 */
        max-height: 100vh; /* 이미지가 화면 높이를 넘지 않도록 최대 높이 제한 */
    }
}


/* 모바일용 스타일 */
@media (max-width: 768px) {
    .pc-gallery {
        display: none; /* 모바일에서는 갤러리 숨김 */
    }

    .mobile-slider {
        display: block; /* 모바일에서는 슬라이더 표시 */
        width: 100%;
        height: auto;
    }

    .swiper-slide img {
        width: 100%;
        height: 100vh;
        object-fit: cover;
        max-height: 100vh; /* 모바일에서는 이미지가 화면을 넘지 않도록 설정 */
    }
}





/* 푸터 스타일 */
.site-footer {
    border-top: 1px solid #444; /* 날카로운 느낌의 경계선 */
    background-color: #000; /* 진한 검정색 배경 */
    padding: 40px 0; /* 넉넉한 패딩으로 여백 확보 */
    text-align: center;
}

.footer-bottom p {
    color: #f5f5f5; /* 밝은 회색 텍스트 */
    font-size: 1rem;
    font-weight: 500; /* 약간 굵은 폰트 */
    letter-spacing: 1.2px; /* 글자 간격을 넓혀서 고급스럽게 */
    margin: 0; /* 여백 제거 */
}

.footer-bottom p::before {
    content: ""; /* 장식용 선 추가 */
    display: block;
    width: 60px;
    height: 2px;
    background-color: #d4af37; /* 금색 선 */
    margin: 0 auto 15px auto; /* 중앙 정렬 및 여백 */
}

.footer-bottom p::after {
    display: block;
    margin-top: 10px;
    font-size: 0.9rem;
    color: #aaa; /* 약간 흐린 색상으로 저작권 문구 */
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .footer-bottom p {
        font-size: 0.9rem;
    }
}