/* 기본 설정 */
body {
    margin: 0;
    padding: 0;
    background-color: #111;
    color: #fff;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    overflow-x: hidden;
}

.hidden { display: none !important; }

/* 메인 화면 레이아웃 */
.container {
    display: flex;
    height: 100vh;
}

.left-panel, .right-panel {
    flex: 1;
    display: flex;
    padding: 50px;
    position: relative;
}

/* 왼쪽 패널 (제목 영역) 수정됨 */
.left-panel {
    flex-direction: column;     /* 세로 정렬 */
    justify-content: center;    /* 중앙 위치 */
    align-items: flex-start;    /* 왼쪽 정렬 */
}

/* 메인 제목 (ARCHIVE) 스타일 */
.main-title {
    font-size: 3rem;
    font-weight: 700;
    margin: 0;
    line-height: 0.9;
    letter-spacing: -3px;
    color: #fff;
}

/* 서브 제목 (SEOJUNG LEE) 스타일 */
.sub-title {
    font-size: 1rem;
    font-weight: normal;
    margin-top: 15px;
    letter-spacing: -1px;
    color: #fff;
}

.right-panel {
    justify-content: flex-end; /* 오른쪽 정렬의 핵심 */
    align-items: center;       /* 세로 중앙 정렬 */
    text-align: right;         /* 텍스트도 오른쪽 정렬 */
}

/* 연도 목록 텍스트 정렬 확실하게 */
#year-list {
    list-style: none;
    padding: 0;
    text-align: right;
    width: 100%; /* 너비를 꽉 채워야 오른쪽 정렬이 잘 먹힙니다 */
}

#year-list li {
    font-size: 2rem;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 20px;
    opacity: 0.5;
    transition: opacity 0.3s;
}

#year-list li:hover {
    opacity: 1;
    text-decoration: none;
    color: #fff;
    transform: translateX(-20px);
    transition: transform 0.3s;
}

/* 하단 연락처 스타일 */
.contact-info {
    position: absolute;
    bottom: 50px;
    left: 50px;
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
}

.contact-info a {
    color: #666;
    text-decoration: none;
    border-bottom: 1px solid #666;
}

.contact-info a:hover {
    color: #fff;
    border-bottom-color: #fff;
}

/* 아카이브(영상 목록) 화면 */
#archive-screen {
    padding: 40px;
    max-width: 800px;
    margin: 0 auto;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
    position: sticky;
    top: 0;
    background-color: #111;
    padding: 20px 0;
    border-bottom: 1px solid #333;
    z-index: 10;
}

#back-btn {
    background: none;
    border: 1px solid #fff;
    color: #fff;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 1rem;
    font-family: 'Helvetica Neue', sans-serif;
}

#back-btn:hover { background: #fff; color: #000; }

.video-item { margin-bottom: 100px; }

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin-bottom: 20px;
}

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

.video-info h3 { margin: 0 0 10px 0; font-size: 1.5rem; }
.video-info .date { color: #888; font-size: 0.9rem; margin-bottom: 10px; display: block; }
.video-info p { line-height: 1.6; color: #ccc; }

/* 왼쪽 패널을 '세로 정렬'로 강제하는 코드 */
.left-panel {
    flex: 1;
    display: flex;
    flex-direction: column !important; /* 핵심: 무조건 세로로 쌓기 */
    justify-content: center;           /* 세로 중앙 정렬 */
    align-items: flex-start;           /* 왼쪽 정렬 */
    padding: 50px;
    position: relative;
}