/* 전체 페이지 공통 스타일 */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    background-color: #000000; /* 검은색 배경 */
    color: #ffffff; /* 기본 텍스트 색상 흰색 */
}

/* 사이트 전체를 감싸는 컨테이너 */
.site-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    text-align: center;
}

/* 헤더와 네비게이션 메뉴 */
header {
    padding: 30px 0;
}

.main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 25px;
}

.main-nav a {
    text-decoration: none;
    color: #a0a0a0;
    font-size: 1rem;
    padding: 5px 10px;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.main-nav a:hover {
    color: #ffffff;
}

/* 메인 콘텐츠 영역 */
main.main-content {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px; /* 좌우 여백 추가 */
}

.hero-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.profile-photo {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 30px;
    border: 2px solid #555;
}

/* 추가된 텍스트 컨테이너 */
.intro-text {
    max-width: 650px; /* 텍스트의 최대 너비를 제한하여 가독성 높임 */
}

.intro-text h1 {
    font-size: 2.8rem;
    font-weight: normal;
    letter-spacing: 5px;
    margin: 0;
    color: #ffffff;
}

.intro-text .subtitle {
    font-size: 1.2rem;
    color: #a0a0a0;
    margin: 10px 0 25px 0;
    letter-spacing: 2px;
}

.intro-text .quote {
    font-style: italic; /* 이탤릭체 적용 */
    font-size: 1rem;
    color: #ffffff;
    margin: 0 0 25px 0;
}

.intro-text .bio {
    font-size: 0.95rem;
    color: #a0a0a0;
    line-height: 1.7; /* 줄 간격 조절 */
    margin: 8px 0; /* 각 bio 문단의 위아래 여백을 조절 */
}

/* ==============================================
 Featured Works Section Styles
==============================================
*/
#featured-works {
    padding: 60px 20px;
    width: 100%;
    max-width: 1200px; /* 전체 섹션의 최대 너비를 조금 늘려줍니다. */
    margin: 40px auto 0 auto;
    border-top: 1px solid #333;
    box-sizing: border-box; /* 패딩을 너비 계산에 포함시킵니다. */
}

.section-title {
    font-size: 1.8rem;
    color: #ffffff;
    margin-bottom: 40px;
    font-weight: normal;
    letter-spacing: 3px;
    text-align: center;
}

.works-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.work-item {
    flex: 1 1 400px; /* 아이템이 유연하게 늘어나고 줄어들도록 설정 (최소 400px) */
    max-width: 500px; /* 아이템이 너무 커지는 것을 방지 */
    text-align: left;
}

.work-item img,
.video-container { /* 이미지와 비디오 컨테이너에 공통 스타일 적용 */
    width: 100%;
    border: 1px solid #555;
    margin-bottom: 15px;
    display: block;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 비율 */
    height: 0;
    background-color: #000;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.work-item h3 {
    font-size: 1.2rem;
    color: #ffffff;
    margin: 0 0 5px 0;
}

.work-item p {
    font-size: 0.9rem;
    color: #a0a0a0;
    margin: 0 0 15px 0;
}

.work-link {
    display: inline-block;
    padding: 8px 15px;
    border: 1px solid #a0a0a0;
    color: #a0a0a0;
    text-decoration: none;
    transition: all 0.3s ease;
}

.work-link:hover {
    background-color: #ffffff;
    color: #000000;
    border-color: #ffffff;
}

.awards {
    margin-bottom: 15px;
}

.award-info {
    font-size: 0.85rem;
    color: #d4af37;
    font-style: italic;
    margin: 5px 0 !important;
    line-height: 1.5;
} /* ### 수정된 부분: 닫는 중괄호 } 추가 ### */

/* ==============================================
 About Page Styles
==============================================
*/
.page-container {
    max-width: 900px; /* 콘텐츠 최대 너비 */
    margin: 40px auto; /* 위아래, 좌우 여백 및 중앙 정렬 */
    padding: 20px;
    text-align: left; /* 페이지 내용은 왼쪽 정렬 */
    box-sizing: border-box; /* 패딩을 너비 계산에 포함 */
}

.page-title {
    font-size: 2.5rem;
    font-weight: normal;
    letter-spacing: 4px;
    text-align: center; /* 페이지 제목만 중앙 정렬 */
    margin-bottom: 50px;
    color: #fff;
}

.about-layout {
    display: flex;
    gap: 40px; /* 사진과 텍스트 사이 간격 */
    align-items: flex-start; /* 핵심: 상단 정렬로 변경 */
    flex-wrap: wrap; /* 화면이 좁아지면 줄바꿈 되도록 설정 */
}

/* style.css 파일에서 이 부분을 찾아서 교체하세요 */

.about-photo {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column; /* ### 수정: 사진들을 세로로 쌓도록 변경 */
    justify-content: flex-start; /* 상단 정렬 */
    align-items: center; /* 가로 중앙 정렬 */
    gap: 20px; /* ### 추가: 사진들 사이의 간격 */
}

.about-photo img {
    max-width: 100%; /* 부모 컨테이너(about-photo)를 넘지 않도록 */
    height: auto;
    width: 300px; /* 사진 자체의 너비를 300px로 제한 */
    border: 1px solid #555;
    display: block;
}

.about-text {
    flex: 1; /* 텍스트 영역이 남은 공간을 모두 차지하도록 */
    min-width: 400px; /* 텍스트 영역의 최소 너비 설정 (너무 좁아지는 것 방지) */
}

.about-text p {
    font-size: 1rem;
    line-height: 1.8;
    color: #a0a0a0;
    margin-top: 0;
    margin-bottom: 20px;
}

/* ==============================================
 Button Styles
==============================================
*/
.button-container {
    margin-top: 40px; /* 텍스트와 버튼 사이의 간격 */
    display: flex;
    gap: 15px; /* 버튼 사이의 간격 */
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid #a0a0a0;
    color: #a0a0a0;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.btn:hover {
    background-color: #ffffff;
    color: #000000;
    border-color: #ffffff;
}

/* ==============================================
 Responsive Adjustments for About Page
 화면이 좁아질 때 (모바일 등) 레이아웃 조정
==============================================
*/
@media (max-width: 768px) {
    .about-layout {
        flex-direction: column; /* 사진과 텍스트를 세로로 쌓기 */
        align-items: center; /* 세로로 쌓을 때는 모두 중앙 정렬 */
        gap: 30px;
    }
}
    .about-photo {
        flex: none; /* 플렉스 속성 제거 */
        width: 100%; /* 사진 컨테이너 너비를 100%로 */
        max-width: 300px; /* 하지만 최대 너비는 300px */
    }
    
    .about-photo img {
        width: 100%;
        max-width: 30
    }
 /* ==============================================
 Works List Page Styles (Updated)
==============================================
*/
.works-category {
    margin-bottom: 50px; /* 각 장르 섹션 사이의 간격 */
}

.category-title {
    font-size: 1.5rem;
    color: #fff;
    border-bottom: 1px solid #555;
    padding-bottom: 10px;
    margin-bottom: 30px;
    font-weight: normal;
    letter-spacing: 2px;
}

.work-entry {
    margin-bottom: 15px; /* 각 작품 사이의 간격을 조금 줄임 */
    padding-bottom: 15px;
    border-bottom: 1px solid #333;
}

.work-entry:last-child {
    border-bottom: none;
}

.work-title {
    /* ### 수정: 폰트 크기 줄임 ### */
    font-size: 1.1rem; 
    margin: 0 0 5px 0;
    color: #fff;
    font-weight: normal; /* 굵은 글씨체 제거 */
}

/* ### 추가: 작품 제목 앞에 점(•) 추가 ### */
.work-title::before {
    content: '•';
    color: #a0a0a0; /* 점 색상을 회색으로 */
    margin-right: 12px; /* 점과 제목 사이 간격 */
    font-size: 1.3rem; /* 점 크기를 살짝 키움 */
    vertical-align: middle;
}

.work-details {
    font-size: 0.95rem;
    color: #a0a0a0;
    margin: 3px 0;
    font-style: italic;
    padding-left: 28px; /* 점 위치에 맞춰 들여쓰기 */
}

.work-links {
    margin-top: 15px;
    padding-left: 28px; /* 점 위치에 맞춰 들여쓰기 */
}

.work-link-inline {
    margin-right: 15px;
    color: #0099ff;
    text-decoration: none;
    font-size: 0.9rem;
}

.work-link-inline:hover {
    text-decoration: underline;
}

/* ### 수정: 링크가 있는 제목에 밑줄 추가 ### */
.work-title a {
    color: #ffffff;
    text-decoration: underline; /* 밑줄 추가 */
    text-decoration-color: #555; /* 밑줄 색상을 어두운 회색으로 */
    text-underline-offset: 4px; /* 텍스트와 밑줄 사이 간격 */
    transition: all 0.3s ease;
}

.work-title a:hover {
    color: #a0a0a0;
    text-decoration-color: #a0a0a0; /* 마우스 올리면 밑줄 색상도 변경 */
}
/* ==============================================
 Work Detail Page - Additions
==============================================
*/
.work-featured-image {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #555;
}

.work-credits {
    margin-top: 40px; /* 프로그램 노트와 간격 */
}

.work-credits-list {
    list-style-type: none; /* 목록 앞의 점 제거 */
    padding-left: 0;
    font-size: 0.95rem;
    color: #a0a0a0;
    text-align: left;
}

.work-credits-list li {
    margin-bottom: 12px; /* 각 항목 사이의 간격 */
    line-height: 1.6;
}

.work-credits-list a {
    color: #0099ff;
    text-decoration: none;
}

.work-credits-list a:hover {
    text-decoration: underline;
}
/* ==============================================
 Work Detail Page Styles (Behind the Mirror... etc.)
==============================================
*/

/* 작품 상세 페이지의 기본 레이아웃 (미디어 + 정보) */
.work-detail-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* 왼쪽 미디어(동영상+이미지) 컬럼 */
.media-column {
    flex: 1 1 35%; /* ### 수정: 너비를 25% -> 35%로 늘림 */
    min-width: 250px;
    display: flex;
    flex-direction: column; /* 아이템을 세로로 정렬 */
    gap: 20px; /* 영상과 이미지 사이의 간격 */
}

/* 오른쪽 정보(텍스트) 컬럼 */
.info-column {
    flex: 2 1 55%; /* ### 수정: 왼쪽이 늘어난 만큼 비율을 65% -> 55%로 줄임 */
    text-align: left;
}

/* 컬럼 안의 이미지 스타일 */
.work-featured-image {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #555;
    margin-top: 0;
}

/* 작품 부제 스타일 */
.work-subtitle {
    text-align: center;
    color: #a0a0a0;
    margin-top: -40px;
    margin-bottom: 50px;
    font-size: 1rem;
}

/* 정보 컬럼 안의 제목 스타일 */
.info-title {
    font-size: 1.3rem;
    color: #fff;
    border-bottom: 1px solid #555;
    padding-bottom: 8px;
    margin-top: 0;
    margin-bottom: 20px;
    font-weight: normal;
}

/* 텍스트 콘텐츠 단락 스타일 */
.text-content p {
    font-size: 1rem;
    line-height: 1.8;
    color: #a0a0a0;
    margin-top: 0;
    margin-bottom: 20px;
}

/* ==============================================
  Work Detail Page - Responsive Adjustments
==============================================
*/
@media (max-width: 768px) {
    .work-detail-layout {
        flex-direction: column; /* 화면이 좁으면 세로로 쌓기 */
    }
}
/* ==============================================
 Piano Page - Image Link Styles
==============================================
*/

/* 비디오 아이템 안의 이미지 링크 스타일 */
.video-item a {
    display: block; /* 링크 영역을 블록으로 만듦 */
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.video-item a:hover {
    opacity: 0.8; /* 마우스를 올리면 살짝 투명하게 */
}

/* 이미지 링크 안의 이미지 스타일 */
.video-item a img {
    width: 100%;
    border: 1px solid #555;
    display: block;
}
/* ==============================================
 비디오와 이미지 비율/사이즈 통일 (모든 페이지 적용)
==============================================
*/

/* 모든 비디오 컨테이너에 적용되는 비율 유지 */
.video-container,
/* 이제 이미지 링크도 이 비율 컨테이너 안에 넣어서 비디오와 동일하게 만듦 */
.image-link-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 비율 유지 */
    height: 0;
    overflow: hidden; /* 내용이 넘치면 숨김 */
    background-color: #000; /* 로딩 중 배경색 */
    border: 1px solid #555; /* 비디오와 동일한 테두리 */
}

/* 이미지 링크 컨테이너 안의 이미지 스타일 */
.image-link-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지가 컨테이너를 꽉 채우도록 */
    border: none; /* 컨테이너에 이미 테두리가 있으므로 이미지 자체에는 테두리 제거 */
}

/* 기존 .video-item a img 스타일 제거 (새로운 .image-link-container img가 대체) */
/* (혹시 모를 충돌 방지를 위해 기존 스타일을 찾아서 제거하거나 이 코드를 추가) */
.video-item a img {
    border: none; /* 새 컨테이너가 테두리를 가짐 */
}
/* ==============================================
 Gallery Page Styles
==============================================
*/

/* 메인 갤러리 컨테이너 */
.gallery-main {
    max-width: 900px; /* 전체 갤러리 너비 제한 */
    margin: 40px auto; /* 중앙 정렬 */
    text-align: center; /* 내부 요소 중앙 정렬 */
}

/* 메인 이미지 영역 */
.main-image-container {
    position: relative;
    padding-bottom: 60%; /* 이미지 비율 유지 (예: 5:3 또는 16:10 등, 필요에 따라 조절) */
    height: 0;
    overflow: hidden;
    background-color: #000;
    border: 1px solid #555;
    margin-bottom: 20px;
}

.main-image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* 이미지가 잘리지 않고 컨테이너 안에 맞춰짐 */
    background-color: #000; /* 여백이 생길 경우 검은색 배경 */
}

/* 좌우 네비게이션 버튼 */
.gallery-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    padding: 10px 15px;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 10; /* 이미지 위에 오도록 */
    transition: background-color 0.3s ease;
}

.gallery-nav-btn:hover {
    background-color: rgba(0, 0, 0, 0.9);
}

.gallery-nav-btn.prev {
    left: 0;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.gallery-nav-btn.next {
    right: 0;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}


/* 썸네일 컨테이너 */
.thumbnail-container {
    display: flex;
    justify-content: center; /* 중앙 정렬 */
    gap: 10px; /* 썸네일 간 간격 */
    flex-wrap: wrap; /* 여러 줄로 감싸기 */
    max-width: 100%; /* 부모 너비에 맞춤 */
    overflow-x: auto; /* 넘치면 가로 스크롤 */
    padding: 10px 0;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
/* 스크롤바 숨기기 (웹킷 기반 브라우저) */
.thumbnail-container::-webkit-scrollbar {
    display: none;
}


/* 개별 썸네일 이미지 */
.thumbnail-item {
    width: 100px; /* 썸네일 고정 너비 */
    height: 60px; /* 썸네일 고정 높이 (비율에 따라 조절) */
    overflow: hidden;
    cursor: pointer;
    border: 1px solid #777;
    transition: border-color 0.2s ease, transform 0.2s ease;
    flex-shrink: 0; /* 썸네일이 줄어들지 않도록 */
}

.thumbnail-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 썸네일 컨테이너를 꽉 채우도록 */
    display: block;
}

.thumbnail-item:hover {
    border-color: #fff;
    transform: scale(1.05);
}

.thumbnail-item.active {
    border-color: #fff; /* 활성화된 썸네일 강조 */
    transform: scale(1.05);
}

/* ==============================================
 Gallery Page - Responsive Adjustments
==============================================
*/
@media (max-width: 768px) {
    .gallery-main {
        margin: 20px auto;
        padding: 0 15px; /* 모바일에서 좌우 여백 */
    }

    .main-image-container {
        padding-bottom: 70%; /* 모바일에서 더 넓은 비율 */
    }

    .thumbnail-item {
        width: 80px;
        height: 50px;
    }
}
/* ==============================================
 Contact Page Styles
==============================================
*/

.contact-info-container {
    text-align: center; /* 텍스트 중앙 정렬 */
    max-width: 600px; /* 텍스트 최대 너비 제한 */
    margin: 60px auto; /* 위아래 및 좌우 자동 여백으로 중앙 배치 */
}

.contact-info-container p {
    font-size: 1rem;
    color: #a0a0a0;
    line-height: 1.8;
    margin-bottom: 30px; /* 단락 사이 간격 */
}

.contact-email a {
    font-size: 1.2rem;
    color: #ffffff; /* 이메일 주소는 흰색으로 강조 */
    text-decoration: none; /* 기본 밑줄 제거 */
    border-bottom: 1px dotted #a0a0a0; /* 점선 밑줄 추가 */
    padding-bottom: 3px;
    transition: all 0.3s ease;
}

.contact-email a:hover {
    color: #a0a0a0;
    border-bottom-color: #ffffff;
}
/* ==============================================
 Contact Page Styles - Image
==============================================
*/

.contact-info-container img {
    max-width: 80%; /* 컨테이너 너비의 최대 80% */
    height: auto; /* 비율 유지 */
    margin-top: 40px; /* 이메일 주소와의 상단 여백 */
    border: 1px solid #555; /* 깔끔한 테두리 */
    display: block; /* 중앙 정렬을 위해 블록 요소로 */
    margin-left: auto; /* 중앙 정렬 */
    margin-right: auto; /* 중앙 정렬 */
}