@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

:root {
    --bg-color: #f4f4f4;
    --text-black: #111111;
    --text-gray: #666666;
    --border-color: #000000;
}

* { margin: 0; padding: 0; box-sizing: border-box; text-decoration: none; list-style: none; }

body {
    background-color: var(--bg-color);
    color: var(--text-black);
    font-family: 'Pretendard', sans-serif;
    padding: 30px;
}

/* 갤러리 전체 랩 */
.gallery-wrap {
    max-width: 1600px;
    margin: 0 auto;
    background: #fff;
    border-top: 4px solid var(--text-black);
    border-bottom: 4px solid var(--text-black);
}

/* === 1. 헤더 === */
header {
    border-bottom: 1px solid var(--border-color);
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 40px 0;
    margin: 0 40px;
    border-bottom: 1px solid #ddd;
}

.title-area h1 {
    font-size: 4.5rem;
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -2px;
}

.subtitle {
    text-align: right;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-gray);
    line-height: 1.4;
}

.nav-bar {
    width: 100%;
    box-sizing: border-box; /* 패딩을 줘도 전체 너비가 안 깨지게 고정 */
    margin: 0 auto;
    
    /* ★ 헷갈리지 않게 따로따로 설정합니다 ★ */
    
    /* 1. 위아래 공기층 (이 숫자를 늘리면 메뉴바가 두툼해집니다) */
    padding-top: 20px; 
    padding-bottom: 20px;
    
    /* 2. 양옆 여백 (상단 타이틀 라인과 맞추는 용도) */
    /* 아까 맞춘 40px 그대로 유지하세요 */
    padding-left: 40px;
    padding-right: 40px;
}
/* 2. 메뉴 리스트 (핵심: 양쪽 끝 정렬) */
.nav-list {
    display: flex;
    
    /* ★ 핵심: 아이템을 양쪽 끝으로 밀어내기 ★ */
    /* 기존: justify-content: center; (가운데 모으기) */
    justify-content: space-between; 
    
    align-items: center;
    list-style: none;
    
    /* list 기본 패딩 제거 (이게 있어야 왼쪽 끝이 딱 맞음) */
    padding: 0; 
    margin: 0;
    
    width: 100%; /* 부모 너비 꽉 채우기 */}

.nav-list li a {
    font-size: 0.95rem;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    transition: 0.3s;
}

.nav-list li a:hover {
    color: var(--text-black);
    text-decoration: underline; 
}

/* === 2. 메인 그리드 === */
.main-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    min-height: 80vh;
}

/* 사이드바 */
.sidebar {
    border-right: 1px solid var(--border-color);
    padding: 40px;
    background: #fcfcfc;
}

.sidebar img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    filter: grayscale(100%);
    margin-bottom: 30px;
    border: 1px solid #ddd;
}
.sidebar img:hover { filter: grayscale(0%); transition: 0.5s; }

.info-block { margin-bottom: 25px; }
.info-block h4 { font-size: 0.8rem; color: var(--text-gray); margin-bottom: 5px; text-transform: uppercase; font-weight: 800; }
.info-block p { font-size: 1rem; font-weight: 500; color: #333; line-height: 1.5; }

/* === [중요] 콘텐츠 영역 레이아웃 수정 === */
.content-area {
    padding: 50px;
    display: grid;
    /* 2개의 컬럼 생성 */
    grid-template-columns: 1fr 1fr;
    /* 행 높이는 내용에 따라 자동 조절 */
    grid-template-rows: auto auto; 
    gap: 40px;
}

/* 개별 아이템 위치 지정 */
/* 01. Identity: 왼쪽 첫 번째 */
.gallery-item:nth-child(1) {
    grid-column: 1;
    grid-row: 1; 
}

/* 02. Playlist: 오른쪽 전체 (2칸 차지) */
.gallery-item:nth-child(2) {
    grid-column: 2;
    grid-row: 1 / 3; /* 1번 줄부터 3번 줄까지 (=2칸) 차지 */
    height: 100%; /* 높이를 꽉 채움 */
}

/* 03. Place: 왼쪽 두 번째 */
.gallery-item:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
}

/* 카드 공통 스타일 */
.gallery-item {
    background: white;
    padding: 30px;
    border: 1px solid #e0e0e0;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 10px 10px 0px rgba(0,0,0,1);
    border-color: black;
}

.item-num {
    font-size: 2.5rem;
    font-weight: 900;
    color: #eee;
    margin-bottom: -15px;
}
.item-title {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 20px;
    position: relative;
}

.map-box {
    width: 100%;
    height: 200px;
    background: #eee;
    margin-top: 20px;
    border: 1px solid #000;
}

.song-link {
    display: block;
    background: black;
    color: white;
    text-align: center;
    padding: 15px;
    font-weight: bold;
    margin-top: 20px;
    font-size: 0.9rem;
    transition: 0.3s;
}
.song-link:hover { background: #444; }

/* === 3. 푸터 === */
footer {
    border-top: 1px solid var(--border-color);
    padding: 30px 40px;
    background: #f9f9f9;
    font-size: 0.85rem;
    color: #555;
    line-height: 1.6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 1024px) {
    .main-grid { grid-template-columns: 1fr; }
    .content-area { grid-template-columns: 1fr; } /* 모바일에서는 1줄로 */
    .gallery-item:nth-child(2) { grid-column: auto; grid-row: auto; } /* 모바일 해제 */
    .sidebar { border-right: none; border-bottom: 1px solid black; padding-bottom: 40px; }
    .content-area { padding: 30px; }
    .header-top { flex-direction: column; align-items: flex-start; gap: 20px; }
    .title-area h1 { font-size: 3.5rem; }
    footer { flex-direction: column; text-align: center; gap: 10px; }
}

/* =========================================
   [추가됨] 로고 이미지 스타일
   ========================================= */
.logo-container {
    margin: 30px 0;    
    text-align: center; /* 로고를 가운데로 정렬 */
}

.identity-logo {
    max-width: 180px; 
    height: auto; 
    display: inline-block; /* 가운데 정렬을 위해 inline-block 속성 사용 */
}
/* =========================================
   [추가] 이력서(Resume) 페이지 전용 스타일
   ========================================= */

/* 이력서 콘텐츠 영역 (갤러리 그리드 해제 후 통으로 사용) */
.resume-area {
    padding: 60px 80px; /* 갤러리보다 여백을 좀 더 줌 */
    background-color: #fff;
    /* 갤러리처럼 2단으로 나누지 않고 1단으로 쭉 보여줌 */
    display: block; 
}

/* 각 섹션 공통 */
.resume-section {
    margin-bottom: 70px; /* 섹션 간 간격 */
}

/* 섹션 제목 */
.resume-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-black);
    border-bottom: 2px solid var(--text-black);
    padding-bottom: 15px;
    margin-bottom: 30px;
    letter-spacing: -1px;
}

/* 본문 텍스트 */
.resume-text {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #444;
    word-break: keep-all; /* 한글 줄바꿈 깔끔하게 */
}

/* 리스트 스타일 (학력, 경력) */
.resume-list {
    border-left: 1px solid #ddd; /* 왼쪽에 얇은 타임라인 선 */
    padding-left: 30px;
}

.resume-list li {
    display: flex;
    margin-bottom: 30px;
    position: relative;
}

/* 타임라인 점 (장식) */
.resume-list li::before {
    content: '';
    position: absolute;
    left: -35px; /* 선 위에 점 찍기 */
    top: 6px;
    width: 10px;
    height: 10px;
    background: var(--text-black);
    border-radius: 50%;
}

/* 날짜 영역 */
.resume-list .date {
    width: 180px; /* 날짜 너비 고정 */
    font-weight: 700;
    color: var(--text-black);
    font-size: 1rem;
    flex-shrink: 0; /* 너비 줄어들지 않게 */
}

/* 내용 영역 */
.resume-list .desc {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
}
.resume-list .desc strong {
    font-size: 1.1rem;
    color: #000;
    display: block;
    margin-bottom: 5px;
}

/* =========================================
  스킬 섹션 (텍스트 리스트 스타일)
   ========================================= */

.skill-text-wrap {
    display: grid;
    /* 화면 크기에 따라 1열 혹은 2열로 자동 배치 */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 40px; /* 항목 간 간격 */
}

.skill-category {
    border-top: 2px solid #111; /* 상단에 굵은 선으로 강조 */
    padding-top: 15px;
}

.skill-category h3 {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 10px;
    color: var(--text-black);
}

.skill-category p {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
    word-break: keep-all;
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .skill-text-wrap {
        grid-template-columns: 1fr; /* 모바일에서는 한 줄로 */
        gap: 30px;
    }
}
/* =========================================
   [수정] 스토리 페이지 (이미지 확대 & 바로가기 기능)
   ========================================= */

/* 1. 부드러운 스크롤 효과 (필수) */
html {
    scroll-behavior: smooth;
}

/* 2. 중앙 래퍼 */
.story-full-wrap {
    min-height: 80vh;
    padding: 60px 0;
    background-color: #fff;
    display: flex;
    justify-content: center;
}

/* 3. 콘텐츠 폭 확대 (이미지 크게 보기 위함) */
.story-content {
    width: 100%;
    /* 기존 1000px -> 1400px로 대폭 확대 */
    max-width: 1400px; 
    padding: 0 40px;
}

/* 4. 인트로 및 바로가기 메뉴 */
.story-intro {
    text-align: center;
    margin-bottom: 80px;
}
.story-intro h2 {
    font-size: 3rem; /* 제목도 키움 */
    font-weight: 900;
    margin-bottom: 10px;
}
.story-intro p {
    color: #666;
    font-size: 1.1rem;
    margin-bottom: 40px;
}

/* [추가됨] 바로가기 버튼 스타일 */
.local-nav {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap; /* 화면 좁으면 줄바꿈 */
}

.local-nav a {
    display: inline-block;
    padding: 12px 25px;
    border: 1px solid #ddd;
    color: #555;
    font-weight: 700;
    font-size: 1rem;
    transition: 0.3s;
    background: #fff;
    border-radius: 50px; /* 둥근 버튼 */
}

.local-nav a:hover {
    background: #111;
    color: #fff;
    border-color: #111;
    transform: translateY(-3px);
}

/* 5. 개별 블록 */
.story-block {
    /* 상단 메뉴바에 가려지지 않도록 스크롤 위치 보정 */
    scroll-margin-top: 50px; 
    margin-bottom: 150px; /* 블록 간 간격 더 넓게 */
}
.story-block:last-child {
    margin-bottom: 0;
}

.story-subtitle {
    font-size: 2rem; /* 부제목도 키움 */
    font-weight: 800;
    color: #111;
    border-bottom: 3px solid #111;
    padding-bottom: 20px;
    margin-bottom: 40px;
    letter-spacing: -1px;
}

/* 6. 이미지 프레임 (꽉 차게) */
.slide-frame img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .story-content { padding: 0 20px; }
    .story-subtitle { font-size: 1.5rem; }
    .local-nav a { padding: 10px 15px; font-size: 0.9rem; }
}
/* =========================================
   [수정] Top 버튼 (이미지 로고 버전)
   ========================================= */

/* 1. 버튼 컨테이너 (위치 및 기본 설정) */
#topBtn {
    /* [기존 유지] 우측 하단 고정 및 숨김 처리 */
    position: fixed;
    bottom: 30px; /* 바닥에서 얼마나 띄울지 */
    right: 30px;  /* 오른쪽에서 얼마나 띄울지 */
    z-index: 999; /* 다른 요소들보다 위에 오도록 */
    
    /* [변경 핵심] 기존 배경색과 테두리 제거 -> 투명하게 */
    background: none !important; /* 혹시 모를 기존 배경색 강제 제거 */
    border: none !important;
    padding: 0; /* 안쪽 여백 제거 */
    border-radius: 0; /* 둥근 모서리 제거 (로고 모양 그대로) */
    
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
    
    /* 버튼 자체의 크기 설정 (로고 크기 조절용) */
    width: 60px; 
    height: 60px;
}

/* 2. 버튼 안의 로고 이미지 스타일 */
.top-btn-img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 비율 유지하며 칸에 맞춤 */
    
    /* (선택사항) 로고가 배경에 묻히지 않게 그림자 추가 */
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
}


/* 3. 마우스 올렸을 때 효과 (Hover) */
#topBtn:hover {
    /* 배경색 변경 대신, 살짝 위로 떠오르는 효과 */
    background: none !important; /* 배경색 변경 방지 */
    transform: translateY(-5px) scale(1.05); /* 위로 살짝 올라가며 커짐 */
}
/* =========================================
   [추가] 앨범(Album) 페이지 전용 스타일 - Masonry Layout
   ========================================= */

.album-full-wrap {
    min-height: 80vh;
    padding: 60px 0;
    background-color: #fff;
    display: flex;
    justify-content: center;
}

.album-content {
    width: 100%;
    max-width: 1400px; /* 넓은 화면 */
    padding: 0 40px;
}

/* 인트로 텍스트 */
.album-intro {
    text-align: center;
    margin-bottom: 60px;
}
.album-intro h2 {
    font-size: 3rem;
    font-weight: 900;
    margin-bottom: 10px;
    letter-spacing: -1px;
}
.album-intro p {
    color: #666;
    font-size: 1.1rem;
    font-family: 'Playfair Display', serif; /* 있으면 적용, 없으면 기본 폰트 */
    font-style: italic;
}

/* ★ 매이슨리(벽돌) 그리드 핵심 코드 ★ */
.masonry-grid {
    column-count: 3; /* 가로 3열 배치 */
    column-gap: 30px; /* 열 사이 간격 */
}

/* 개별 사진 아이템 */
.grid-item {
    display: inline-block; /* 벽돌처럼 쌓이게 함 */
    width: 100%;
    margin-bottom: 30px; /* 아래쪽 간격 */
    position: relative; /* 오버레이를 위해 필수 */
    overflow: hidden;   /* 이미지 확대 시 넘침 방지 */
    border-radius: 0;   /* 모던함을 위해 각지게 (원하면 px 조절) */
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    break-inside: avoid; /* 이미지가 열 사이에서 잘리지 않도록 */
}

.grid-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

/* 사진 위에 마우스 올렸을 때 효과 */
.grid-item:hover img {
    transform: scale(1.05); /* 사진 살짝 확대 */
    filter: brightness(0.8); /* 사진 살짝 어둡게 */
}

/* 캡션 오버레이 (평소엔 숨김) */
.overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4); /* 검은색 반투명 배경 */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0; /* 투명하게 숨김 */
    transition: opacity 0.3s ease;
}

.overlay .txt {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.5); /* 얇은 테두리 장식 */
    padding: 10px 20px;
    backdrop-filter: blur(2px);
}

/* 마우스 올리면 오버레이 등장 */
.grid-item:hover .overlay {
    opacity: 1;
}

/* 반응형: 화면 줄어들면 열 개수 조절 */
@media (max-width: 1024px) {
    .masonry-grid { column-count: 2; } /* 태블릿: 2열 */
}
@media (max-width: 600px) {
    .masonry-grid { column-count: 1; } /* 모바일: 1열 */
    .album-content { padding: 0 20px; }
}
/* =========================================
   [추가] 라이트박스 (전체화면 확대) 스타일
   ========================================= */

/* 클릭 가능한 이미지에 커서 모양 변경 */
.clickable-img {
    cursor: zoom-in;
}

/* 모달창 배경 영역 (검은색 반투명) */
.lightbox-modal {
    display: none; /* 평소엔 숨김 */
    position: fixed; /* 화면에 고정 */
    z-index: 1000; /* 가장 위에 오도록 */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* 이미지가 너무 크면 스크롤 */
    background-color: rgba(0,0,0,0.9); /* 짙은 검은색 배경 */
    
    /* 내용물 중앙 정렬 */
    justify-content: center;
    align-items: center;
    
    /* 나타날 때 부드럽게 */
    animation: fadeIn 0.3s ease;
}

/* 확대된 이미지 스타일 */
.lightbox-content {
    margin: auto;
    display: block;
    max-width: 90%; /* 화면 꽉 차지 않게 여백 줌 */
    max-height: 90vh; /* 높이도 화면 90%까지만 */
    border: 5px solid #fff; /* 사진 테두리 (선택사항) */
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
    
    /* 이미지 나타날 때 줌인 효과 */
    animation: zoomIn 0.3s ease;
}

/* 닫기 버튼 (X) 스타일 */
.close-btn {
    position: absolute;
    top: 30px;
    right: 50px;
    color: #f1f1f1;
    font-size: 50px;
    font-weight: bold;
    transition: 0.3s;
    z-index: 1001;
    cursor: pointer;
}

.close-btn:hover,
.close-btn:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 애니메이션 정의 */
@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes zoomIn {
    from {transform: scale(0.8); opacity: 0;}
    to {transform: scale(1); opacity: 1;}
}

/* 모바일에서 닫기 버튼 위치 조정 */
@media (max-width: 768px) {
    .close-btn {
        top: 15px;
        right: 30px;
        font-size: 40px;
    }
    .lightbox-content {
        max-width: 95%;
    }
}
/* =========================================
   [수정] 버킷리스트 (타이포그래피 리스트 스타일)
   ========================================= */

.bucket-full-wrap {
    min-height: 80vh;
    padding: 60px 0;
    background-color: #fff;
    display: flex;
    justify-content: center;
}

.bucket-content {
    width: 100%;
    max-width: 1200px;
    padding: 0 40px;
}

/* 인트로 */
.bucket-intro {
    text-align: center;
    margin-bottom: 80px;
}
.bucket-intro h2 {
    font-size: 3rem;
    font-weight: 900;
    margin-bottom: 10px;
}
.bucket-intro p {
    color: #666;
    font-size: 1.1rem;
    font-style: italic;
}

/* 리스트 컨테이너 */
.bucket-list-wrap {
    border-top: 2px solid #111; /* 상단 굵은 선 */
}

/* 개별 리스트 (한 줄) */
.bucket-row {
    display: flex;
    justify-content: space-between; /* 텍스트와 이미지 양끝 배치 */
    align-items: center;
    border-bottom: 1px solid #eee; /* 하단 얇은 선 */
    padding: 30px 20px;
    transition: all 0.3s ease;
}

/* 마우스 올렸을 때 효과 */
.bucket-row:hover {
    background-color: #f9f9f9; /* 배경색 살짝 변경 */
    padding-left: 40px; /* 오른쪽으로 살짝 이동하는 애니메이션 */
}

/* 텍스트 영역 (왼쪽) */
.bucket-row .txt-area {
    width: 60%; /* 텍스트가 60% 차지 */
}

.bucket-row .idx {
    display: block;
    font-size: 3.5rem; /* 숫자 엄청 크게 */
    font-weight: 900;
    color: #e0e0e0; /* 연한 회색 */
    line-height: 1;
    margin-bottom: 10px;
    transition: 0.3s;
}

/* 호버 시 숫자 색 진하게 */
.bucket-row:hover .idx {
    color: #111;
}

.bucket-row .goal {
    font-size: 1.6rem;
    font-weight: 800;
    color: #111;
    margin-bottom: 15px;
    word-break: keep-all;
}

.bucket-row .status {
    font-size: 1rem;
    color: #666;
}
.bucket-row .status i {
    margin-right: 5px;
    font-size: 1.2rem;
}
.bucket-row .status .label {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8rem;
}

/* 이미지 영역 (오른쪽) */
.bucket-row .img-area {
    width: 35%; /* 이미지가 35% 차지 */
    height: 180px; /* 높이 고정 (와이드 형태) */
    overflow: hidden;
}

.bucket-row .img-area img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 영역 꽉 채우기 */
    filter: grayscale(100%); /* 평소엔 흑백으로 차분하게 */
    transition: 0.5s ease;
}

/* 호버 시 이미지가 컬러로 바뀌고 확대됨 */
.bucket-row:hover .img-area img {
    filter: grayscale(0%);
    transform: scale(1.1);
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .bucket-row {
        flex-direction: column-reverse; /* 모바일엔 이미지가 위로 */
        align-items: flex-start;
        padding: 40px 0;
    }
    .bucket-row:hover { padding-left: 0; } /* 모바일 이동 효과 제거 */
    
    .bucket-row .img-area {
        width: 100%;
        height: 200px;
        margin-bottom: 20px;
    }
    .bucket-row .txt-area {
        width: 100%;
    }
    .bucket-row .idx { font-size: 2.5rem; }
    .bucket-row .goal { font-size: 1.4rem; }
}
/* =========================================
   [수정] 서브 페이지 전용 헤더 (중앙 정렬 + 넓은 간격)
   ========================================= */

/* 메인 페이지는 건드리지 않고, 'sub-header' 클래스가 있는 경우만 적용 */
.sub-header {
    width: 100%;
    background-color: #fff;
    /* 위아래 여백을 충분히 주어 답답하지 않게 함 */
    padding-top: 20px; 
    padding-bottom: 20px;
    
}

.sub-header .nav-bar {
    display: flex;
    justify-content: center; /* 화면 중앙 정렬 */
    align-items: center;
    width: 100%;
}

.sub-header .nav-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; 
    
    /* ★ 여기를 조절하세요! 메뉴 사이의 가로 간격 */
    gap: 30px;  /* 기존 10px -> 40px로 대폭 늘림 (넉넉한 여백) */
    
    margin: 0;
    padding: 0;
}



/* 모바일에서는 너무 넓으면 깨지니까 간격 자동 조절 */
@media (max-width: 768px) {
    .sub-header { padding-top: 40px; padding-bottom: 20px; }
    .sub-header .nav-list { gap: 15px; } /* 모바일은 좁게 */
}
/* =========================================
   [Final] 포트폴리오 다크룸 + 레이아웃 수정
   ========================================= */

/* 스무스 스크롤 (버튼 클릭 시 부드럽게 이동) */
html {
    scroll-behavior: smooth;
}

.portfolio-dark-body {
    background-color: #111;
    color: #fff;
}

/* =========================================
   [Final 수정] A4 비율 이미지 박스 적용
   ========================================= */

/* 1. 3D 장면 설정 (기존 유지) */
.carousel-scene-dark {
    position: relative;
    width: 100%;
    height: 100vh; /* 높이 확보 */
    min-height: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    perspective: 2000px; /* 원근감 깊게 */
    background: radial-gradient(circle at center, #333 0%, #111 60%, #000 100%);
}

/* 안내 문구 */
.carousel-intro-dark {
    position: absolute; top: 40px; left: 40px; z-index: 5; color: #fff;
}
.carousel-intro-dark h2 { font-size: 1.5rem; font-weight: 800; }
.carousel-intro-dark h2 span { display: inline-block; animation: spinArrow 3s infinite linear; }
@keyframes spinArrow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }


/* 2. 회전판 (A4 이미지가 돌 충분한 공간 확보) */
.carousel-wrap {
    position: relative;
    width: 400px; 
    height: 600px; /* 이미지가 길어지므로 높이 확보 */
    transform-style: preserve-3d;
    transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1); /* 부드러운 회전 */
    cursor: grab;
}
.carousel-wrap:active { cursor: grabbing; }


/* 3. 개별 아이템 카드 (투명 컨테이너) */
.c-item {
    position: absolute;
    top: 50%; left: 50%; /* 중앙 배치 */
    /* 내용물 크기만큼만 차지 */
    width: auto; height: auto; 
    
    /* 중심점 잡고 밀어내기 */
    transform: translate(-50%, -50%) rotateY(calc(var(--i) * 60deg)) translateZ(500px);
    
    /* 카드 자체는 투명하게 처리 */
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
    
    /* 바닥 반사 효과 */
    -webkit-box-reflect: below 20px linear-gradient(transparent 60%, rgba(0,0,0,0.3));
    
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* ★ 4. 이미지 박스 (A4 비율 핵심 적용) ★ */
.c-thumb {
    /* A4 세로 비율 (210mm : 297mm) 고정 */
    aspect-ratio: 210 / 297;
    /* 너비만 정하면 높이는 자동으로 길어짐 */
    width: 280px; 
    
    overflow: hidden;
    margin-bottom: 25px; /* 캡션과 간격 */
    
    /* 포스터 느낌의 테두리와 그림자 */
    border: 3px solid rgba(255,255,255,0.15);
    box-shadow: 0 15px 40px rgba(0,0,0,0.6);
    background: #000;
    transition: transform 0.3s, border-color 0.3s;
}

/* 이미지 꽉 채우기 */
.c-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 비율 안 맞으면 잘라서 A4에 맞춤 */
}

/* 호버 시 강조 */
.c-item:hover .c-thumb {
    border-color: #fff;
    transform: scale(1.03); /* 살짝 확대 */
}


/* 5. 3D 캡션 (이미지 아래 텍스트) */
.c-caption-3d {
    text-align: center;
    color: #fff;
    /* 글씨 잘 보이게 반투명 배경 추가 */
    background: rgba(0,0,0,0.7);
    padding: 12px 25px;
    border-radius: 30px; /* 둥근 알약 모양 */
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(5px); /* 배경 흐림 효과 (지원 브라우저만) */
}
.c-caption-3d h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 5px; }
.c-caption-3d p { font-size: 0.85rem; color: #bbb; font-weight: 300; }


/* 모바일 대응 */
@media (max-width: 768px) {
    .carousel-scene-dark { min-height: 600px; perspective: 1000px; }
    .carousel-wrap { width: 300px; height: 500px; }
    /* 모바일에서는 A4 이미지 너비를 줄임 */
    .c-thumb { width: 200px; } 
    /* 거리도 좁힘 */
    .c-item { transform: translate(-50%, -50%) rotateY(calc(var(--i) * 60deg)) translateZ(350px); }
    .c-caption-3d { padding: 10px 20px; }
    .c-caption-3d h3 { font-size: 1rem; }
    .c-caption-3d p { font-size: 0.75rem; }
}

/* 2. 네비게이션 버튼 (Highlights 아래 위치) */
.anchor-nav-wrap {
    background-color: #111;
    padding: 20px 0;
    border-bottom: 1px solid #333;
    position: sticky; /* 스크롤 시 상단 고정 (선택사항) */
    top: 0;
    z-index: 100;
}
.anchor-nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}
.anchor-nav a {
    color: #888;
    border: 1px solid #444;
    padding: 10px 25px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 700;
    transition: 0.3s;
}
.anchor-nav a:hover {
    color: #111;
    background: #fff;
    border-color: #fff;
}


/* 3. 아카이브 공통 스타일 */
.dark-archive-wrap {
    background-color: #111;
    padding: 100px 40px;
    color: #fff;
}
.archive-sect {
    max-width: 1200px;
    margin: 0 auto 150px;
    padding-top: 60px; /* 네비게이션 이동 시 여백 확보 */
}
.sect-title {
    font-size: 2.2rem; margin-bottom: 10px; border-left: 5px solid #fff; padding-left: 20px;
}
.sect-desc { font-size: 1rem; color: #888; margin-bottom: 50px; padding-left: 25px; }

/* 그리드 */
.archive-grid { display: grid; gap: 40px; }
.vertical-mode { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.mixed-mode { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* 유닛 공통 */
.archive-unit { display: flex; flex-direction: column; }
.a-img-box { position: relative; border: 1px solid #333; margin-bottom: 15px; overflow: hidden; }
.a-img-box img, .a-img-box iframe { width: 100%; height: 100%; object-fit: cover; display: block; }
.a-caption h4 { font-size: 1.1rem; margin-bottom: 5px; color: #fff; }
.a-caption p { font-size: 0.9rem; color: #888; }


/* =========================================
   [수정] Digital Photo & Video (숏츠 크기 확대 & 텍스트 우측 배치)
   ========================================= */

/* 1. 컨테이너: 세로 방향(Column) 정렬 (브이로그와 숏츠를 위아래로 나눔) */
.pv-row-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 80px; /* 브이로그와 숏츠 사이 간격 더 넓힘 */
    width: 100%;
    margin-bottom: 100px;
}

/* ----------------------------------------------------
   [Part A] 브이로그 (상단, 꽉 찬 가로)
   ---------------------------------------------------- */
.pv-vlog-box {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.pv-vlog-box .a-img-box {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9; /* 16:9 비율 유지 */
    position: relative;
    border: 1px solid #333;
    background: #000;
    margin-bottom: 25px;
}

.pv-vlog-box .a-img-box iframe {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;
}


.pv-shorts-box {
    display: flex;
    flex-direction: row; 
    align-items: center; 
    gap: 60px; /* 간격도 조금 더 넓힘 */
}

/* 아이폰 프레임 (대형 사이즈) */
.iphone-frame {
    /* ★ 수정됨: 기존 340px -> 400px 로 확대 ★ */
    width: 400px;
    
    /* ★ 수정됨: 기존 650px -> 720px 로 확대 (16:9 비율 유지) ★ */
    height: 720px; 
    
    background: #000;
    border-radius: 60px; /* 둥근 모서리도 더 크게 */
    border: 15px solid #222; /* 테두리 두껍게 */
    position: relative;
    overflow: hidden;
    box-shadow: 0 40px 80px rgba(0,0,0,0.7); /* 그림자도 더 깊게 */
    flex-shrink: 0;
}

/* 숏츠 영상 */
.iphone-frame iframe {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border: none;
    display: block;
    transform: scale(1.02); 
}

/* 노치 디자인 (프레임 크기에 맞춰 확대) */
.notch {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    
    /* ★ 수정됨: 노치 크기 확대 ★ */
    width: 150px; 
    height: 35px;
    
    background: #222;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    z-index: 10;
}


/* ----------------------------------------------------
   [Part C] 텍스트 설명 스타일
   ---------------------------------------------------- */
.a-caption {
    text-align: left;
}

/* 숏츠 옆 텍스트 전용 스타일 */
.pv-shorts-box .a-caption {
    max-width: 400px; /* 텍스트가 너무 길게 퍼지지 않도록 제한 */
}
.pv-shorts-box .a-caption h4 {
    font-size: 1.8rem; /* 제목 좀 더 키움 */
    margin-bottom: 20px;
}
.pv-shorts-box .a-caption p {
    font-size: 1rem;
    line-height: 1.8;
}


/* 모바일 대응 (화면 좁을 땐 다시 위아래로) */
@media (max-width: 900px) {
    .pv-shorts-box {
        flex-direction: column; /* 다시 세로 배치 */
        align-items: flex-start;
        gap: 30px;
    }
    .iphone-frame {
        width: 100%; max-width: 300px; /* 모바일에선 적당히 줄임 */
        height: 550px;
    }
    .pv-shorts-box .a-caption {
        max-width: 100%;
    }
}

.mini-slider {
    position: relative; width: 100%; aspect-ratio: 16 / 9;
    overflow: hidden; background: #000; border: 1px solid #333; margin-bottom: 15px;
}
.mini-slider .slide { display: none; width: 100%; height: 100%; animation: fade 0.5s; }
.mini-slider .slide.active { display: block; }
.mini-slider img { object-fit: cover; }
@keyframes fade { from {opacity: 0.5} to {opacity: 1} }

.btn-prev, .btn-next {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,0.5); color: #fff; border: none;
    padding: 15px; cursor: pointer; font-size: 1.2rem;
}
.btn-next { right: 0; }
.badge {
    position: absolute; top: 20px; left: 20px;
    background: #c00; color: #fff; padding: 5px 10px; font-weight: bold; font-size: 0.8rem;
}


/* 모바일 대응 */
@media (max-width: 900px) {
    .carousel-scene-dark { min-height: 600px; } /* 모바일 높이 조정 */
    .pv-row-container { flex-direction: column; } /* 브이로그/숏츠 위아래 배치 */
    .pv-vlog-box, .pv-shorts-box { width: 100%; }
    .pv-vlog-box { height: 300px; }
    .anchor-nav { gap: 10px; }
    .anchor-nav a { font-size: 0.75rem; padding: 8px 15px; }
}
/* =========================================
   [수정] 영상과 슬라이더 크기 통일 (16:9 비율)
   ========================================= */

/* 1. 모션그래픽(.video-full)과 슬라이더(.mini-slider)를 동시에 선택 */
.video-full, 
.mini-slider
.pv-vlog-box .a-img-box {
    width: 100%;
    
    /* ★ 여기 숫자를 조절해서 두 녀석의 크기를 같이 키우거나 줄이세요 ★ */
    max-width: 1100px; 
    
    /* 16:9 비율 고정 */
    aspect-ratio: 16 / 9;
    
    /* 중앙 정렬 */
    margin: 0 auto 20px auto;
    
    /* 테두리 및 배경 통일 */
    background: #000;
    border: 1px solid #333;
}

/* 내부 콘텐츠(이미지/영상) 꽉 채우기 */
.video-full iframe,
.mini-slider img
.pv-vlog-box iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* =========================================
   [수정] 슬라이더 이미지 잘림 방지 (전체 다 보이게)
   ========================================= */

.mini-slider img {
    width: 100%;
    height: 100%;
    
    /* ★ 핵심 변경 사항 ★ */
    /* cover: 꽉 채우기 (잘림 발생) -> contain: 비율 유지하며 다 보여주기 (여백 발생) */
    object-fit: contain; 
    
    /* 남는 여백은 배경과 같은 검은색으로 처리해서 자연스럽게 */
    background-color: #000; 
}
/* =========================================
   [수정 v4] Exhibition Page (리얼한 갤러리 조명)
   ========================================= */

/* 1. 전시 공간: 벽면에 '핀 조명'이 떨어진 듯한 배경 */
.exhibition-scene {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 150px 20px 100px;
    
    /* ★ 핵심 1: 벽면 조명 효과 ★ */
    /* 중앙은 다크 그레이(#222), 가장자리는 완전 블랙(#000)으로 그라데이션 */
    /* 마치 중앙에 조명이 비추고 있는 듯한 벽을 만듭니다. */
    background: radial-gradient(circle at center, #2a2a2a 0%, #111 40%, #000 100%);
}

/* 2. 패널 프레임 */
.panel-frame {
    position: relative; /* 가상요소 기준점 */
    max-width: 900px;
    width: 100%;
    margin-bottom: 50px;
    
    /* 벽에서 붕 떠있는 깊은 그림자 */
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8);
    
    /* 프레임 자체는 얇게 처리 */
    border: 1px solid #333;
}

/* ★ 핵심 2: 패널 위에 맺히는 '조명 반사광' (Overlay) ★ */
.panel-frame::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    
    /* 중앙 위쪽에서 빛이 내려꽂히는 느낌의 그라데이션 */
    /* 중앙은 투명하고, 가장자리는 살짝 어둡게 눌러줌 (비네팅) */
    background: radial-gradient(
        circle at 50% 30%, 
        rgba(255, 255, 255, 0.05) 0%, /* 빛의 중심 (아주 살짝 밝음) */
        transparent 60%, 
        rgba(0, 0, 0, 0.4) 100% /* 가장자리 어둠 */
    );
    
    pointer-events: none; /* 마우스 클릭 통과 */
    z-index: 5;
}

/* 3. 상단 하이라이트 (조명이 위에서 때리는 느낌) */
.panel-frame::before {
    content: '';
    position: absolute;
    top: -1px; left: 0; width: 100%; height: 1px;
    /* 윗면 모서리에만 살짝 빛이 맺힘 */
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
    z-index: 6;
}


/* 패널 이미지 (원본 유지) */
.panel-frame img {
    width: 100%;
    height: auto;
    display: block;
    /* 이미지는 건드리지 않음 (가상요소가 빛 효과를 대신함) */
}


/* 텍스트 설명 (동일) */
.panel-info {
    text-align: center;
    color: #fff;
    animation: fadeInUp 1s ease-out;
    position: relative;
    z-index: 10;
}
.panel-info h2 {
    font-size: 1.8rem; font-weight: 700; margin-bottom: 15px; letter-spacing: 1px; color: #ddd;
}
.panel-info p {
    font-size: 1rem; color: #888; line-height: 1.6; margin-bottom: 20px; font-weight: 300;
}
.panel-info .date {
    display: inline-block; border: 1px solid #444; padding: 8px 20px; border-radius: 30px; font-size: 0.85rem; color: #666;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
    .panel-frame { max-width: 100%; }
}

/* =========================================
   [추가] Poster Page (모던 갤러리 초대장)
   ========================================= */

/* 1. 초대장 전체 배경 (어두운 갤러리 공간) */
.invitation-scene {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 120px 20px 100px; /* 헤더/푸터 안 겹치게 여백 */
    background: radial-gradient(circle at center, #222 0%, #000 80%);
}

/* 2. 초대장 카드 본체 (핵심) */
.invitation-card {
    /* ★ 요청하신 고정 사이즈 800 x 1000 ★ */
    width: 800px;
    height: 1000px;
    /* 화면이 작을 경우를 대비한 반응형 비율 설정 */
    max-width: 90vw;
    aspect-ratio: 4 / 5; /* 800:1000 = 4:5 비율 유지 */
    
    background: #111; /* 카드 배경색 (어두운 종이 느낌) */
    color: #fff;
    position: relative;
    overflow: hidden; /* 내부 요소 넘침 방지 */
    
    /* 조명 받은 듯한 깊은 그림자 */
    box-shadow: 0 30px 70px rgba(0,0,0,0.8);
    border: 1px solid #222;
    
    display: flex;
    flex-direction: column;
    padding: 60px 50px; /* 카드 내부 여백 */

    animation: cardFadeIn 1.2s ease-out; /* 등장 애니메이션 */
}

/* 등장 애니메이션 정의 */
@keyframes cardFadeIn {
    from { opacity: 0; transform: translateY(30px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}


/* --- 카드 내부 요소 스타일 --- */

/* 상단 헤더 */
.card-header {
    text-align: center;
    margin-bottom: 40px;
    z-index: 2; /* 사진 위에 글씨 오게 */
}
.card-logo { width: 60px; margin-bottom: 20px; } /* 이미지 로고 사용 시 */
.text-logo { /* 텍스트 로고 사용 시 */
    font-family: 'Montserrat', sans-serif; /* 세련된 영문 폰트 추천 */
    font-size: 1.5rem; font-weight: 700; letter-spacing: 3px; margin-bottom: 25px;
}
.card-header h2 {
    font-size: 2.8rem; font-weight: 300; letter-spacing: 5px; margin-bottom: 10px;
    text-transform: uppercase;
}
.sub-txt { font-size: 0.9rem; color: #888; font-weight: 300; letter-spacing: 1px; }


/* 중앙 사진 영역 (Editorial 느낌으로 겹치게 배치) */
.card-photo-frame {
    position: absolute; /* 절대 위치로 배치 */
    top: 180px; left: 50px; right: 50px; bottom: 250px; /* 위치 지정 */
    z-index: 1; /* 글씨보다 뒤로 */
    overflow: hidden;
    opacity: 0.6; /* 사진을 살짝 어둡게 눌러서 글씨 강조 */
    filter: grayscale(100%) contrast(1.2); /* 흑백 + 대비 증가 (모던함 강조) */
    /* 만약 컬러로 하고 싶으면 filter 줄을 지우세요 */
}
.card-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 꽉 채우기 유지 */

    /* [수정] 사진의 '상단(top)'을 기준으로 배치 */
    object-position: center 7%;
}


/* 하단 정보 영역 */
.card-info {
    margin-top: auto; /* 하단으로 밀어내기 */
    z-index: 2;
    display: flex;
    justify-content: space-between; /* 좌우 배치 */
    align-items: flex-end;
    border-top: 1px solid rgba(255,255,255,0.1); /* 구분선 */
    padding-top: 30px;
}

.info-group h3 {
    font-size: 0.8rem; color: #666; margin-bottom: 15px; letter-spacing: 1px;
}
.info-group ul li {
    margin-bottom: 10px; font-size: 0.95rem; display: flex; align-items: center; color: #ccc;
}
.info-group ul li i {
    margin-right: 12px; color: #888; font-size: 0.9rem; width: 15px; text-align: center;
}
.info-group a {
    color: #ccc; transition: color 0.3s; text-decoration: none;
}
.info-group a:hover { color: #fff; }

/* 홈페이지 링크 강조 */
.homepage-link a {
    font-size: 1.1rem; font-weight: 600; color: #fff; border-bottom: 1px solid #fff; padding-bottom: 2px;
}
.homepage-link i { font-size: 0.9rem; margin-left: 5px; }

/* 하단 장식 라인 */
.deco-line {
    position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
    width: 50px; height: 2px; background: rgba(255,255,255,0.3);
}

/* 모바일 대응 (화면이 800보다 작을 때) */
@media (max-width: 850px) {
    .invitation-card { padding: 40px 30px; height: auto; aspect-ratio: 4/5; } /* 높이 자동 조절 */
    .card-header h2 { font-size: 2rem; }
    .card-photo-frame { top: 150px; bottom: 220px; left: 30px; right: 30px;}
    .card-info { flex-direction: column; gap: 30px; align-items: flex-start; } /* 정보 상하 배치 */
}
/* =========================================
   [추가] 초대장 이미지 로고 스타일
   ========================================= */

.card-logo-img {
    /* 1. 로고 크기 조절 (원하는 만큼 숫자를 바꾸세요) */
    max-width: 120px; 
    width: 100%;
    height: auto; /* 비율 유지 */
    
    /* 2. 중앙 정렬 및 여백 */
    display: block;
    margin: 0 auto 30px auto; /* 위 0, 좌우 자동(중앙), 아래 30px */
    
    /* (팁) 만약 로고가 검은색이라서 안 보인다면 아래 주석을 해제해서 흰색으로 만드세요 */
    /* filter: invert(1) brightness(100); */
    /* [수정] 위로 20px 만큼 끌어올리기 */
    /* 숫자가 커질수록(-30px, -40px...) 더 위로 올라갑니다 */
    margin-top: -20px; 
    
    /* 아래쪽 텍스트("YOU ARE INVITED")와의 간격 */
    margin-bottom: 30px; 
    
    margin-left: auto;
    margin-right: auto;
}

/* =========================================
   [Final] 포스터 이미지 매핑 (링크 연결)
   ========================================= */

/* 1. 포스터 전체를 감싸는 기준틀 */
.poster-link-wrap {
    position: relative; /* 자식(링크박스)들의 기준점 */
    width: 800px; /* 초대장 원본 너비 */
    height: auto;
    box-shadow: 0 30px 70px rgba(0,0,0,0.5);
}

/* 배경 이미지 (캡처본) */
.poster-bg-img {
    width: 100%;
    display: block;
}

/* 2. 링크 박스 공통 스타일 */
.link-box {
    position: absolute; /* 자유로운 배치 */
    display: block;
    cursor: pointer;
    z-index: 10;
    
}

/* 3. 각 링크 위치 잡기 (F12 눌러서 미세조정 필요) */
/* 화면에 빨간 박스가 보이면, 개발자 도구(F12)로 top, left 숫자를 바꿔서 글씨 위에 딱 맞추세요. */


/* 이메일 (왼쪽 하단 두번째) */
.link-email {
    top: 88%; /* 위에서 얼마나 떨어졌는지 (퍼센트 추천) */
    left: 6%; /* 왼쪽에서 얼마나 떨어졌는지 */
    width: 40%; /* 박스 너비 */
    height: 25px; /* 박스 높이 */
}

/* 인스타그램 (왼쪽 하단 세번째) */
.link-insta {
    top: 91%;
    left: 6%;
    width: 25%;
    height: 25px;
}

/* 홈페이지 (오른쪽 하단) */
.link-home {
    top: 91%;
    right: 6%;  /* 오른쪽 기준 */
    width: 33%;
    height: 42px;
}

/* 모바일 대응 (화면이 작아지면 박스도 같이 줄어듦) */
@media (max-width: 820px) {
    .poster-link-wrap {
        width: 95%; /* 화면 꽉 차게 */
    }
}
/* [추가] 포스터 상단 로고 유튜브 링크 위치 */
.link-logo {
    /* 상단에서 떨어진 거리 (이미지 보면서 조절 필요) */
    top: 4%; 
    
    /* 가로 정중앙 배치 공식 */
    left: 50%;
    transform: translateX(-50%);
    
    /* 로고 크기만큼 영역 잡기 */
    width: 15%;  /* 또는 100px 등 고정값 */
    height: 120px; /* 로고 높이에 맞춰 조절 */
    

    
    z-index: 20; /* 다른 링크보다 우선순위 높게 */
}
/* =========================================
   [추가] Album Page (인터랙티브 아코디언)
   ========================================= */

/* 1. 앨범 전체 스테이지 (헤더 제외한 나머지 높이 꽉 채움) */
.album-stage {
    display: flex; /* 가로로 배치 */
    width: 100%;
    /* 헤더 높이(약 80px)를 뺀 나머지 공간을 다 씁니다 */
    height: calc(100vh - 80px); 
    overflow: hidden;
    background: #000;
}

/* 2. 개별 패널 (기둥) */
.album-panel {
    position: relative;
    flex: 1; /* 처음엔 4개가 똑같은 크기(1:1:1:1) */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    
    /* ★ 핵심: 부드러운 늘어남 효과 ★ */
    transition: flex 0.7s cubic-bezier(0.25, 1, 0.5, 1);
    
    /* 패널 사이 아주 얇은 경계선 */
    border-right: 1px solid rgba(255,255,255,0.1);
}
.album-panel:last-child { border-right: none; }


/* 3. ★ 마우스 호버 시 효과 ★ */
.album-panel:hover {
    flex: 5; /* 마우스 올린 녀석만 크기가 5배로 커짐 */
}


/* 4. 어두운 오버레이 & 텍스트 */
.panel-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* 평소에는 어둡게 눌러서 글씨를 숨김 */
    background: rgba(0,0,0,0.6); 
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* 텍스트 아래로 */
    padding: 60px 40px;
    
    transition: background 0.5s;
}

/* 호버하면 이미지가 밝아짐 */
.album-panel:hover .panel-overlay {
    background: rgba(0,0,0,0.2); 
}


/* 5. 텍스트 내용물 */
.panel-content {
    color: #fff;
    opacity: 0; /* 처음엔 숨김 */
    transform: translateY(20px); /* 아래에 내려가 있음 */
    transition: all 0.5s ease;
    white-space: nowrap; /* 글씨 줄바꿈 방지 */
}

/* 호버하면 텍스트 등장 */
.album-panel:hover .panel-content {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s; /* 패널이 커진 뒤에 글씨 등장 */
}


/* 타이포그래피 */
.panel-num {
    display: block;
    font-size: 4rem;
    font-weight: 800;
    opacity: 0.3;
    margin-bottom: -10px;
}
.panel-content h2 {
    font-size: 3.5rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 15px;
    letter-spacing: 2px;
}
.panel-content p {
    font-size: 1.1rem;
    color: #ddd;
    margin-bottom: 30px;
    font-weight: 300;
}

/* 갤러리 보기 버튼 */
.view-btn {
    padding: 12px 30px;
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s;
}
.view-btn:hover {
    background: #fff;
    color: #000;
}


/* 모바일 대응 (세로로 쌓기) */
@media (max-width: 768px) {
    .album-stage { flex-direction: column; } /* 세로 배치 */
    .album-panel:hover { flex: 3; } /* 조금 덜 커지게 */
    .panel-content h2 { font-size: 2rem; }
    .panel-num { font-size: 3rem; }
    
    /* 모바일에서는 글씨가 항상 보이게 하거나, 터치 시 반응 */
    .panel-content { opacity: 0.8; transform: translateY(0); }
}
/* =========================================
   [추가] 갤러리 팝업창 (Lightbox) 스타일
   ========================================= */

/* 1. 어두운 배경 (Overlay) */
.modal-overlay {
    display: none; /* 평소엔 숨김 */
    position: fixed;
    z-index: 1000; /* 제일 위에 뜨게 */
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* 짙은 검정 배경 */
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 2. 이미지와 버튼을 감싸는 컨텐츠 박스 */
.modal-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 3. 실제 이미지 */
#modalImg {
    max-width: 80vw;  /* 화면 너비의 80%까지만 */
    max-height: 80vh; /* 화면 높이의 80%까지만 */
    object-fit: contain; /* 비율 유지 */
    box-shadow: 0 0 20px rgba(255,255,255,0.1);
    border: 2px solid #333;
}

/* 4. 닫기 버튼 (X) */
.close-btn {
    position: absolute;
    top: 30px; right: 50px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1001;
    transition: color 0.3s;
}
.close-btn:hover { color: #aaa; }

/* 5. 이전/다음 화살표 버튼 */
.nav-btn {
    background: none;
    border: none;
    color: white;
    font-size: 50px;
    cursor: pointer;
    padding: 20px;
    user-select: none; /* 드래그 방지 */
    transition: transform 0.2s;
}
.nav-btn:hover { transform: scale(1.2); color: #ddd; }

/* 화살표 위치 미세조정 */
.prev { margin-right: 20px; }
.next { margin-left: 20px; }

/* 6. 하단 페이지 번호 */
.image-counter {
    position: absolute;
    bottom: -40px;
    color: #fff;
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: 2px;
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .nav-btn { font-size: 30px; padding: 10px; }
    #modalImg { max-width: 100%; }
}
/* [추가] 갤러리 캡션(설명글) 스타일 */
.modal-caption {
    position: absolute;
    bottom: -40px; /* 이미지 아래쪽으로 배치 (카운터 위) */
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.5;
    padding: 0 20px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8); /* 글씨 잘 보이게 그림자 */
    
    /* 애니메이션 */
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInUp 0.5s forwards 0.3s; /* 사진 뜨고 0.3초 뒤에 뜸 */
}

@keyframes fadeInUp {
    to { opacity: 1; transform: translateY(0); }
}

/* 캡션이 추가되면서 카운터 위치를 좀 더 아래로 조정 */
.image-counter {
    bottom: -110px; /* 기존보다 더 아래로 내림 */
    font-size: 0.9rem;
    opacity: 0.7;
}
/* bucket.html 전용 스타일 (gallery.css 맨 아래에 추가하세요) */

/* 설명글 스타일 추가 */
.bucket-row .txt-area .desc {
    font-size: 0.95rem;    /* 글자 크기: 본문보다 약간 작게 */
    color: #666;           /* 글자 색상: 진한 회색 */
    margin-top: 10px;      /* 제목과의 간격 */
    margin-bottom: 25px;   /* 상태 표시(체크박스)와의 간격 */
    line-height: 1.6;      /* 줄 간격 */
    font-weight: 400;      /* 글자 두께: 보통 */
    word-break: keep-all;  /* 단어 단위 줄바꿈 (한글 가독성) */
    max-width: 80%;        /* 설명이 너무 길어지면 적당히 줄바꿈 */
}

/* (참고) 모바일 화면에서 설명글 너비 조정 */
@media (max-width: 768px) {
    .bucket-row .txt-area .desc {
        max-width: 100%;
        font-size: 0.9rem;
    }
}
/* =========================================
   [최종 수정] 네비게이션 슬래시(/) 색상 자동 구분
   ========================================= */

/* 1. 배경이 흰색인 페이지 (Bucket List 등) -> 슬래시를 '검은색'으로 */
.sub-header.white-nav .nav-list li {
    color: #000000 !important;
}
.sub-header.white-nav .nav-list li a {
    color: #333 !important; /* 메뉴 글씨도 어둡게 */
}


/* 2. 배경이 검은색인 페이지 (Portfolio, Album, Exhibition, Poster 등) -> 슬래시를 '흰색'으로 */
/* ★ 이 부분이 빠져서 안 보였던 겁니다! ★ */
.sub-header.dark-mode .nav-list li {
    color: #ffffff !important;
}
.sub-header.dark-mode .nav-list li a {
    color: #111 !important; /* 메뉴 글씨는 밝은 회색 */
}
/* =========================================
   [추가] 포트폴리오 텍스트 상세 스타일
   ========================================= */

/* 캡션 박스 내부 여백 조정 */
.a-caption {
    padding: 15px 5px; /* 위아래 여백 추가 */
}

/* 작품 제목 (Title) */
.a-caption h4 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

/* 작품 설명 (Description) */
.a-caption p.long-desc {
    font-size: 0.95rem;
    color: #aaa;      /* 회색 톤으로 본문 처리 */
    line-height: 1.6; /* 줄 간격 넓게 (가독성) */
    word-break: keep-all; /* 한글 단어 끊김 방지 */
    font-weight: 300;
    margin-top: 5px;
}

/* (선택) 설명이 너무 길면 3줄까지만 보여주기 (더보기 느낌) */
/* 필요 없으면 이 부분은 안 넣으셔도 됩니다 */
/*
.a-caption p.long-desc {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
*/

/* =========================================
   [추가] 포스터형 슬라이더 스타일 (A4 비율용)
   ========================================= */
.poster-slider {
    position: relative;
    width: 100%;
    height: 100%; /* 부모(a-img-box) 높이에 꽉 차게 */
}

.poster-slider .slide {
    display: none; /* 기본적으로 숨김 */
    width: 100%;
    height: 100%;
    animation: fade 0.5s; /* 페이드 효과 */
}

.poster-slider .slide.active {
    display: block; /* 활성화된 슬라이드만 보임 */
}

.poster-slider img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 비율 유지하며 꽉 채움 */
}

/* 슬라이드 버튼 스타일 (기존 버튼 재사용) */
.poster-slider .btn-prev,
.poster-slider .btn-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    padding: 15px;
    cursor: pointer;
    font-size: 1.2rem;
    z-index: 10;
    opacity: 0; /* 평소엔 숨김 */
    transition: opacity 0.3s;
}
.poster-slider:hover .btn-prev,
.poster-slider:hover .btn-next {
    opacity: 1; /* 마우스 올리면 보임 */
}
.poster-slider .btn-next { right: 0; }
.poster-slider .btn-prev { left: 0; }