/* 기본 리셋 및 폰트 설정 */
body {
    margin: 0;
    padding: 0;
    font-family: 'Battambang', serif; /* 이미지처럼 세리프체 사용 */
    background-color: #EFEFEF; /* 밝은 배경 */
    color: #333333;
    overflow-x: hidden; /* 가로 스크롤 방지 */
}

/* 전체 화면 섹션 */
.full-screen {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* 헤더 스타일 */
header {
    width: 100%;
    position: absolute;
    top: 20px;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    letter-spacing: 2px;
    font-family: 'Archivo';
    font-weight: 900;
}
.center-text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* 홈 섹션 */
#home-section {
    cursor: pointer; /* 클릭 가능한 느낌을 주기 위함 */
}
.content-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.main-title {
    font-size: 23vw; /* 화면 크기에 반응하는 큰 글씨 */
    font-weight: 600;
    letter-spacing: -0.5vw;
    margin: 0;
    line-height: 1;
    color: rgba(0, 0, 0, 0.9);
    
    /* ⬇️ Battambang 폰트 적용 ⬇️ */
    font-family: 'Battambang', serif;
}
.click-hint {
    position: absolute;
    bottom: 40px;
    font-size: 0.9rem;
    opacity: 0.6;
    transition: opacity 0.3s;
}
#home-section.clicked .click-hint {
    display: none; /* 클릭 후 힌트 숨김 */
}

/* 1. 홈 섹션: 카세트테이프 스택 애니메이션 */
#tape-stack-container {
    position: absolute;
    /* ARCHIVE 텍스트의 가운데 하단에 위치하도록 조정 */
    bottom: -100px; /* 초기 위치 조정 */
    left: 50%;
    transform: translateX(-50%);
}

.stacked-tape {
    position: absolute;
    width: 500px; /* 테이프 크기 */
    height: 100px;
    /* 테이프 이미지 사용: 사용자의 실제 이미지를 background-image로 대체 */
    background-color: #333;
    border: 1px solid #111;
    display: block;
    opacity: 0;
    transition: all 0.5s ease-out; /* 부드러운 애니메이션 */
    transform: translate(0, 50px) rotate(0deg); /* 초기 상태: 아래에서 시작, 투명 */
}

/* 쌓이는 애니메이션 효과 (JavaScript에서 'active' 클래스 추가) */
.stacked-tape.active {
    opacity: 1;
    transform: translate(var(--tape-x), var(--tape-y)) rotate(var(--tape-rot));
    z-index: 10;
}
/* 예시로 텍스트 라벨을 추가하는 경우 (이미지 대신) */
.tape-label {
    color: white;
    font-size: 0.7rem;
    padding: 5px;
    background: rgba(100, 100, 100, 0.7);
}


/* 2. 아카이브 섹션: 프로젝트 목록 (스크롤 후) */
#archive-section {
    background-color: #f0f0f0;
    padding-top: 100px;
    height: auto; /* 내용 길이에 따라 높이 자동 조정 */
    min-height: 100vh;
}
.archive-wrapper {
    width: 80%;
    max-width: 1200px;
    margin: 50px auto;
}
.tape-list-container {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    gap: 50px;
}

.project-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    transition: transform 0.3s ease;
}

.tape-vertical {
    width: 58.41px; /* 세로 테이프 크기 */
    height: 347.08px;
    object-fit: cover;
    display: block;
    /* 테이프 이미지 교체 필요 */
    background-color: #333;
    border: 1px solid #111;
    cursor: pointer;
}
/* style.css 파일 */

/* 1. 클릭 영역 확장 */
.click-area {
    display: block; /* label이 영역을 차지하도록 */
    width: 100%;
    height: 100%;
    position: relative;
    cursor: pointer;
    display: flex; /* 내부 요소 정렬을 위해 flex 사용 */
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 2. 테이프 초기 상태 (숨겨진 상태) */
.stacked-tape {
    /* 기존 스타일 유지 */
    opacity: 0;
    transform: translate(0, 50px) rotate(0deg);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* 부드러운 전환 */
    
    /* 포지셔닝 조정 (이전 JS 코드의 CSS 변수 대신) */
    position: absolute;
    width: 150px; 
    height: 100px;
}

/* 3. 각 테이프의 최종 위치와 순차적 딜레이 */
.tape-1 {
    z-index: 12;
    /* 최종 위치: tape-1 x: -15px, y: 40px, rot: 2deg */
    --final-x: -15px; 
    --final-y: 40px;
    --final-rot: 2deg;
}
.tape-2 {
    z-index: 11;
    /* 최종 위치: tape-2 x: 10px, y: 0px, rot: -5deg */
    --final-x: 10px;
    --final-y: 0px;
    --final-rot: -5deg;
}
.tape-3 {
    z-index: 10;
    /* 최종 위치: tape-3 x: -5px, y: -40px, rot: 3deg */
    --final-x: -5px;
    --final-y: -40px;
    --final-rot: 3deg;
}

/* 4. 체크박스가 체크되었을 때 (클릭되었을 때) 테이프 활성화 */
#tape-stack-trigger:checked ~ .click-area .stacked-tape {
    opacity: 1;
    transform: translate(var(--final-x), var(--final-y)) rotate(var(--final-rot));
}

/* 5. 순차적인 애니메이션 (딜레이를 이용) */
#tape-stack-trigger:checked ~ .click-area .tape-1 {
    transition-delay: 0.1s;
}
#tape-stack-trigger:checked ~ .click-area .tape-2 {
    transition-delay: 0.3s; /* 0.1s + (0.6s * 0.3) 정도의 시차 */
}
#tape-stack-trigger:checked ~ .click-area .tape-3 {
    transition-delay: 0.5s;
}

/* 클릭 후 힌트 숨기기 */
#tape-stack-trigger:checked ~ .click-area .click-hint {
    opacity: 0;
    pointer-events: none;
}

/* 티켓 오버레이 스타일 */
.ticket-overlay {
    position: absolute;
    top: 50%; /* 테이프 중앙 높이에 맞춤 */
    right: 100px; /* 테이프 옆에 위치 */
    width: 350px; /* 티켓 크기 */
    height: 200px;
    background-color: #ccc; /* 티켓 배경색 (실제 이미지로 대체 필요) */
    transform: translateY(-50%) translateX(100%); /* 초기: 오른쪽으로 완전히 숨겨진 상태 */
    opacity: 0;
    pointer-events: none; /* 상호작용 비활성화 */
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
    border-radius: 5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* 마우스 호버 시 티켓 나타나는 애니메이션 */
.project-item:hover .ticket-overlay {
    transform: translateY(-50%) translateX(0); /* 최종: 제자리에 나타남 */
    opacity: 1;
    pointer-events: auto; /* 상호작용 활성화 */
    z-index: 20;
}

/* 티켓 내용 스타일 (세부 그래픽은 사용자가 직접 디자인에 맞게 수정) */
.ticket-content {
    padding: 20px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    font-family: monospace; /* 티켓에 어울리는 폰트 */
    font-size: 0.8rem;
}
.project-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 5px;
}
.ticket-content ul {
    list-style: none;
    padding: 0;
    margin-top: 10px;
}

/* 티켓에 맞춰 테이프 위치 조정 (선택 사항) */
.project-item:hover .tape-vertical {
    transform: translateY(-5px); /* 호버 시 살짝 위로 이동 */
}