/* 맨 왼쪽 끝 고정 */
.site-title {
    position: fixed;
    top: 30px;
    left: 30px;      /* 왼쪽에서 30px 띄움 */
    color: white;
    font-size: 14px;
    line-height: 1.4;
    z-index: 100;
}

/* 화면의 약 1/3 지점 */
.year-text {
    position: fixed;
    top: 30px;
    left: 33%;       /* 남은 공간의 3분의 1 지점에 배치 */
    color: white;
    font-size: 14px;
    z-index: 100;
}

/* 화면의 약 2/3 지점 */
.to-text {
    position: fixed;
    top: 30px;
    left: 66%;       /* 남은 공간의 3분의 2 지점에 배치 */
    color: white;
    font-size: 14px;
    z-index: 100;
}

/*  맨 오른쪽 끝 고정 및 우측 정렬 */
.social-text {
    position: fixed;
    top: 30px;
    right: 30px;     
    color: white;
    font-size: 14px;
    line-height: 1.4;
    text-align: right; 
    z-index: 100;
}

.social-text a {
    color: inherit;
    text-decoration: none;
}

.social-text a:hover {
    text-decoration: underline;
}
/* 전체 배경 및 스크롤 설정 */
body {
    background-image: url('cloud.jpg'); 
    background-size: cover; 
    background-position: center; 
    background-attachment: fixed; 
    margin: 0; 
}

/* small / large 버튼 위치 */
.button-group {
    position: fixed; 
    left: 80px;      
    top: 55%;        
    display: flex;   
    gap: 5px;  
    z-index: 100; /* 동영상보다 위에 뜨게  */      
}


/*  top 버튼 위치 및 스크롤 동작 */
.top-btn {
    position: fixed;
    left: 80px;      
    top: 15%;
    z-index: 200;
    cursor: pointer;

    /* 💡 스크롤 시 등장 효과, 처음에는 숨겨둠 */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s ease; 
}


/* 스크롤 감지 시 top 버튼 노출 */
.top-btn.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* 동영상 중앙 정렬  */
.video-container {
    display: flex;
    justify-content: center; 
    align-items: center;     
    height: 100vh;           
}

/* 동영상 스타일 및 검은색 배경 날리기 */
.video-container video {
    max-width: 95%;
    max-height: 90vh;
    width: 95%;
    height: auto;
    
    /* 검은색 배경을 투명하게  */
    mix-blend-mode: screen; 
}

/* 컨테이너 전체를 동영상 영역 위로 살짝 끌어올림 */
.stacking-container {
    position: relative;
    width: 100%;
    
    /* 첫 화면(100vh) 밑에서부터 25%만큼 위로 땡겨 올려서 미리 보이게 만듬 */
    margin-top: -5vh; 
    
    /* 동영상이나 다른 요소들보다 위로 자연스럽게 덮이도록 설정 */
    z-index: 50; 
}

/* 각각의 이미지 레이어 설정 */
.stacking-item {
    position: sticky;
    
    /* 스크롤해서 올라왔을 때 화면 맨 위에서 10% 띄운 지점에서 멈춤 */
    top: 10vh; 
    height: 100vh; /* 각 레이어의 높이 */
    
    display: flex;
    justify-content: center; 
    
    /* 이미지가 자기 구역의 맨 위에 딱 붙게 만듬 */
    align-items: flex-start;
}

/* 이미지 사이즈 및 효과 */
.stacking-item img {
    width: auto;
    height: auto;
    max-width: 90vw;
    
    /* 화면을 넘어가지 않게 방지 */
    max-height: 80vh; 
    
    /* 위쪽으로 올라올 때 그림자 추가 */
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.4); 
    
    object-fit: contain;
}

/* 검은 배경 제거 (b1, b2, 6) */
.stacking-item img.no-bg {
    mix-blend-mode: screen;
    box-shadow: none;
}
/* small 버튼 클릭 시 아카이브 */
.stacking-container.grid-view {
    display: block;
    column-count: 3;
    column-gap: 20px;
    padding: 50px;
}

.stacking-container.grid-view .stacking-item {
    position: relative;
    top: auto;
    height: auto;
    width: 100%;
    display: inline-block;
    margin-bottom: 20px;
    padding: 0;
    break-inside: avoid;
}

.stacking-container.grid-view .stacking-item img {
    width: 100%;
    height: auto;
    max-height: none;
    max-width: none;
    box-shadow: none;
}