/* [공지] 레이아웃 코드는 100% 원본 그대로 유지하고, 색상값만 교체했습니다. */

/* 기본 설정 */
html { scroll-behavior: smooth; }
body { 
    /* 남색을 버리고 아주 깊은 와인색 배경으로 교체 */
    background-color: #1a0505; 
    color: #fff; 
    margin: 0; 
    font-family: 'Pretendard', sans-serif; 
    overflow-x: hidden; 
}
img { max-width: 100%; height: auto; display: block; }
.wrapper { max-width: 900px; margin: 0 auto; padding: 0 40px; position: relative; }

/* 1. 사이드 네비게이션: 보라색 배경 + 와인색 테두리 */
/* 사이드 네비게이션: 동그라미 제거 및 중앙 정렬 */
.side-nav { 
    position: fixed; 
    right: 20px; 
    top: 50%; 
    transform: translateY(-50%); 
    z-index: 2000; 
    background: #213128; /* 요청하신 짙은 초록색 */
    padding: 20px 10px; /* 좌우 여백 살짝 조정 */
    border-radius: 15px; 
    backdrop-filter: blur(15px); 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

.side-nav ul { 
    list-style: none; /* 이 코드가 동그라미를 없애줍니다 */
    padding: 0; 
    margin: 0; 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
}

.side-nav li { 
    text-align: center; /* 글씨를 가운데로 */
}

.side-nav a { 
    color: #eee6d3; 
    text-decoration: none; 
    font-size: 0.75rem; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    transition: 0.3s; 
    font-weight: 800;
    display: block;
    padding: 5px 15px;
}

.side-nav a:hover { 
    color: #fff; 
    transform: scale(1.1);
    text-shadow: 0 0 8px rgba(255,255,255,0.5);
}

/* 2. 헤더: 와인색 그라데이션 강화 */

.header-box { 
    width: 100vw; 
    min-height: 1200px; 
    position: relative; 
    left: 50%; 
    right: 50%; 
    margin-left: -50vw; 
    margin-right: -50vw;
    
    background: linear-gradient(to bottom, 
        rgba(26, 5, 5, 0) 0%,      
        rgba(26, 5, 5, 0.5) 30%,      
        rgba(26, 5, 5, 0.4) 40%,      
        rgba(26, 5, 5, 0.7) 45%,
        rgba(26, 5, 5, 0.85) 50%,     
        #1a0505 70%                   
    ), 
    url('images/Header.png') center/cover no-repeat; 
    
    display: flex; 
    flex-direction: column;           
    align-items: center; 
    justify-content: flex-start;      
    
    /* [수정] 포스터와 로고가 더 내려오도록 패딩 값을 키웠습니다 */
    padding-top: 300px;               /* 기존 180px -> 300px로 변경 */
    
    margin-bottom: 0; 
    z-index: 1;
}

/* 1. 부모 박스 설정 */
.header-box { 
    width: 100vw; 
    min-height: 1100px; 
    position: relative; 
    left: 50%; 
    right: 50%; 
    margin-left: -50vw; 
    margin-right: -50vw;
    
    /* [오류 해결] (...) 대신 실제 색상값과 경로를 모두 적어주어야 합니다 */
    background: linear-gradient(to bottom, 
        rgba(26, 5, 5, 0.85) 0%,      
        rgba(26, 5, 5, 0.5) 30%,      
        rgba(26, 5, 5, 0.4) 40%,      
        rgba(26, 5, 5, 0.7) 45%,
        rgba(26, 5, 5, 0.85) 50%,     
        #1a0505 70%                   
    ), 
    url('images/Header.png') center/cover no-repeat; 
    
    display: flex; 
    flex-direction: column;           
    align-items: center;              
    justify-content: flex-start;      
    
    padding-top: 0;                   
    margin-bottom: 0; 
    z-index: 1;
}

/* 내용물만 아래로 내리기 */
.header-inner { 
    max-width: 900px; 
    width: 100%; 
    padding: 0 40px; 
    
    position: relative;
    top: 300px; /* ★ 이 숫자를 조절하면 이미지 크기 변화 없이 내용만 내려갑니다 ★ */
}

.header-inner { max-width: 900px; margin: 0 auto; width: 100%; padding: 0 40px; }
.main-title-text { font-size: 70px; margin: 0; font-weight: 900; letter-spacing: -3px; color: #fff; text-shadow: 0 4px 10px rgba(0,0,0,0.5); }
.meta-info { font-size: 1.2rem; color: #eee6d3; font-weight: 700; margin: 10px 0 40px 0; }
.header-bottom-flex { display: flex; gap: 40px; align-items: center; }
.header-poster-wrap { width: 240px; flex-shrink: 0; border-radius: 15px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.8); }
.header-description-wrap { flex: 1; }
.summary-text { font-size: 1.1rem; line-height: 1.8; color: #eee; margin-bottom: 25px; max-width: 500px; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }

.main-title-logo img {
    height: 200px;    /* 로고 높이 (원하시는 크기에 따라 숫자를 조절하세요) */
    width: auto;      /* 비율 유지 */
    display: block;
    margin-bottom: 10px;
    /* 텍스트 효과 대신 이미지에 그림자를 주어 가독성을 높입니다 */
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5));
}

/* 기존 .main-title-text가 있던 자리를 이미지 로고 클래스로 교체 */
.main-title-logo {
    margin: 0;
    padding: 0;
}

/* 3. 장르 태그: 보라색 포인트 */
.genre-tags { display: flex; gap: 10px; }
.genre-tags span { 
    padding: 6px 18px; 
    border-radius: 20px; 
    background: #213128; 
    font-size: 0.8rem; 
    border: 1px solid rgba(255,255,255,0.3); 
    color: #fff; 
}

/* 4. 섹션 타이틀: 초록색 포인트 */
.center-section { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 100px 0; box-sizing: border-box; width: 100%; }
.section-title { 
    text-align: center; font-size: 0.8rem; letter-spacing: 5px; 
    color: #eee6d3; 
    text-transform: uppercase; margin-bottom: 60px; font-weight: 900; 
}

/* 5. 비디오 및 카드: 초록색 테두리 */
.video-container { width: 100%; aspect-ratio: 16/9; border-radius: 20px; overflow: hidden; background: #000; box-shadow: 0 10px 30px rgba(0,0,0,0.5); border: 1px solid #1a3c34; }
.video-container video { width: 100%; height: 100%; object-fit: cover; }

/* 6. 갤러리: 호버 시 와인색 테두리 */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; width: 100%; }
.gallery-grid img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 12px; cursor: zoom-in; transition: 0.3s; border: 1px solid rgba(255,255,255,0.1); }
.gallery-grid img:hover { transform: translateY(-5px); border-color: #581014; }

/* 7. 슬라이더: 와인색 내비게이션 */
.slider-wrap, .storyboard-wrap { position: relative; overflow: hidden; border-radius: 20px; width: 100%; }
.slider-container { display: flex; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
.slider-container img { width: 100%; flex-shrink: 0; cursor: zoom-in; }
.nav-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(88, 16, 20, 0.9); color: #eee6d3; border: none; width: 45px; height: 45px; border-radius: 50%; cursor: pointer; z-index: 10; font-weight: bold; }
.next { right: 15px; } .prev { left: 15px; }

/* 8. 캐릭터 아트: 초록색/상아색 조화 */
/* --- 캐릭터 아트 섹션 전체 레이아웃 고정 --- */

/* 1. 전체 그리드 컨테이너 */
.char-layout-grid {
    display: grid;
    grid-template-columns: 110px 1fr; /* 왼쪽 썸네일 영역 슬림하게 */
    gap: 30px;
    width: 100%;
    max-width: 950px;
    height: 600px; /* ★전체 레이아웃의 절대 높이 고정★ */
    align-items: start;
    margin: 0 auto;
}

/* 2. 좌측 네비게이션 리스트 */
.char-side-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: none; /* Firefox 스크롤바 제거 */
}
.char-side-list::-webkit-scrollbar { display: none; } /* Chrome/Safari 스크롤바 제거 */

.char-item-wrap {
    width: 100%;
    text-align: center;
}

/* 썸네일 박스 크기 고정 */
.char-thumb {
    width: 100%;
    aspect-ratio: 3 / 4; /* 썸네일 가로세로 비율 고정 */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.4;
    transition: 0.3s ease;
    background-color: #000;
}

.char-thumb.active {
    opacity: 1;
    border: 2px solid #581014;
    box-shadow: 0 0 15px rgba(88, 16, 20, 0.5);
}

.char-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 썸네일은 꽉 채우기 */
}

.char-thumb-name {
    margin-top: 8px;
    font-size: 0.7rem;
    color: #eee6d3;
    text-transform: uppercase;
    font-weight: 500;
}

/* 3. 우측 메인 표시 영역 (슬라이더) */
.char-main-area {
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: 100%;
}

/* ★메인 이미지 프레임 크기 고정★ */
.char-slider-container {
    flex: 1; /* 설명창을 제외한 영역을 모두 차지 */
    position: relative;
    background: #000; /* 이미지 외 영역은 검은색 처리 */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.char-slider-viewport {
    width: 100%;
    height: 100%;
}

.char-slider-track {
    display: flex;
    height: 100%;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ★핵심: 이미지 가로세로 크기 일치 및 공백 검은색 처리★ */
.char-slider-track img {
    width: 100%; /* 부모(viewport) 너비에 꽉 맞춤 */
    height: 100%; /* 부모(viewport) 높이에 꽉 맞춤 */
    flex-shrink: 0;
    
    /* contain: 이미지가 잘리지 않게 비율을 유지하며 프레임 안에 맞춤. 
       이미지가 가로로 길면 위아래에, 세로로 길면 좌우에 
       부모의 배경색인 '검은색' 공백이 생깁니다.
    */
    object-fit: contain; 
    
    background-color: #000; /* 혹시 모를 배경색 다시 한번 고정 */
    border-radius: 10px;
}

/* 4. 하단 정보 박스 */
.char-info-box {
    background: rgba(88, 16, 20, 0.1);
    padding: 20px;
    border-left: 4px solid #581014;
    border-radius: 0 10px 10px 0;
    min-height: 100px; /* 설명창 높이도 최소한으로 잡아주면 안정적입니다 */
}

/* 5. 네비게이션 버튼 */
.char-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 15px 10px;
    cursor: pointer;
    border-radius: 5px;
    transition: 0.3s;
}
.char-nav-btn:hover { background: #581014; }
.prev { left: 15px; }
.next { right: 15px; }

/* 9. 배경 아트: 활성화 시 깊은 와인색 배경 */
.bg-push-stack-container { display: flex; gap: 15px; height: 500px; position: relative; overflow: hidden; width: 100%; }
.bg-stack-card { flex: 1; display: flex; border-radius: 15px; overflow: hidden; background: #0d0101; cursor: pointer; transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); height: 500px; border: 1px solid rgba(255,255,255,0.05); }
.card-thumb-part { width: 100%; height: 500px; flex-shrink: 0; }
.card-thumb-part img { width: 100%; height: 500px; object-fit: cover; }
.card-expanded-part { width: 0; opacity: 0; overflow: hidden; transition: 0.6s; display: flex; flex-direction: column; gap: 10px; height: 500px; }
.card-expanded-part img { border-radius: 8px; cursor: zoom-in; width: 100%; height: calc(50% - 5px); object-fit: cover; }
.bg-push-stack-container.pushing .bg-stack-card:not(.active) { flex: 0; width: 0; margin: 0; opacity: 0; pointer-events: none; }
.bg-stack-card.active { flex: 1; cursor: default; gap: 20px; padding: 20px; background: #2a0a0b; border-color: #581014; }
.bg-stack-card.active .card-thumb-part { width: 40%; }
.bg-stack-card.active .card-expanded-part { width: 60%; opacity: 1; }

/* 10. 애니마틱: 초록색/상아색 */
.animatic-vertical-col { display: flex; flex-direction: column; gap: 40px; width: 100%; }
.video-card-vertical { width: 100%; background: rgba(26, 60, 52, 0.15); padding: 20px; border-radius: 15px; border: 1px solid #1a3c34; }
.video-card-vertical h4 { font-size: 0.8rem; color: #eee6d3; margin-bottom: 15px; text-transform: uppercase; }
.video-mini-container { width: 100%; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; background: #000; }
.video-mini-container video { width: 100%; height: 100%; object-fit: cover; }

/* 11. 스토리보드: 와인색 도트 */
.storyboard-wrap { background: rgba(255, 255, 255, 0.02); padding: 40px 0; }
#story-slider img { width: 100%; max-height: 70vh; flex-shrink: 0; cursor: zoom-in; object-fit: contain; padding: 0 40px; box-sizing: border-box; }
.story-nav-dots { display: flex; justify-content: center; gap: 10px; margin-top: 25px; flex-wrap: wrap; }
.dot { width: 8px; height: 8px; background: #333; border-radius: 50%; cursor: pointer; transition: 0.3s; }
.dot.active { background: #581014; transform: scale(1.3); }

/* 12. 크레딧: 보라색 테두리 */
.credit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; width: 100%; }
.profile-img { width: 100%; aspect-ratio: 1/1; border-radius: 50%; overflow: hidden; background: #222; margin-bottom: 15px; border: 2px solid #213128; transition: 0.3s; }
.profile-img:hover { border-color: #581014; }
.profile-img img { width: 100%; height: 100%; object-fit: cover; }
.name { font-size: 1rem; color: #fff; margin: 5px 0; }
.email { font-size: 0.7rem; color: #888; }

/* 13. 모달: 와인색 내비게이션 */
.modal { 
    display: none; 
    position: fixed; 
    z-index: 9999; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    background: rgba(0,0,0,0.95); 
    align-items: center; 
    justify-content: center; 
}

.modal-inner { 
    position: relative; /* 화살표 배치의 기준점 */
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 100%; 
    height: 100%; 
}

.modal-content-box { 
    z-index: 10001; 
}

.modal-content-box img { 
    max-width: 80vw; 
    max-height: 85vh; 
    border-radius: 10px; 
    border: 2px solid #581014; 
}

/* 화살표 공통 설정 */
.modal-nav { 
    position: absolute; /* 부모인 modal-inner 기준으로 절대 위치 */
    top: 50%; 
    transform: translateY(-50%); /* 세로 중앙 정렬 */
    background: none; 
    border: none; 
    color: #581014; 
    font-size: 4rem; 
    cursor: pointer; 
    padding: 20px; 
    z-index: 10002; 
    transition: 0.3s;
}

.modal-nav:hover {
    color: #fff;
    text-shadow: 0 0 10px #581014;
}

/* 왼쪽 화살표 위치 */
.prev-m { 
    left: 30px; 
}

/* 오른쪽 화살표 위치 */
.next-m { 
    right: 30px; 
}

/* 모바일 대응: 화살표 크기 조절 */
@media (max-width: 768px) {
    .modal-nav { font-size: 2.5rem; padding: 10px; }
    .prev-m { left: 10px; }
    .next-m { right: 10px; }
}