/* --- 기본 설정 --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-snap-type: y mandatory; /* Y축 강제 스냅 */
    scroll-behavior: smooth; /* 부드러운 스크롤 */
}

body {
    font-family: 'Noto Sans KR', sans-serif;
    background-color: #f4f4f4; 
    color: #1a1a1a;
    overflow-x: hidden;
    transition: background-color 1s ease, color 0.5s ease;
}

/* --- 테마별 배경색 및 포인트 컬러 --- */
body[data-theme="1980"] { background-color: #F4F4F4; --point-color: #4167FF; --title-font: 'Righteous', cursive; 
    --font-weight: 400;  }
body[data-theme="1990"] { background-color: #F4F4F4; --point-color: #B30000; --title-font: 'Playfair Display', serif;
    --font-weight: 900;  }
body[data-theme="2000"] { background-color: #F4F4F4; --point-color: #FF84DA; --title-font: 'Silkscreen', cursive; 
    --font-weight: 400; }
body[data-theme="2010"] { background-color: #F4F4F4; --point-color: #FF00AE; --title-font: 'Poppins', sans-serif;
    --font-weight: 600;  }
body[data-theme="2020"] { background-color: #F4F4F4; --point-color: #DC8CA4; --title-font: 'PyeongChangPeace-Light', sans-serif;
    --font-weight: 300; }

/* --- 사이드바 --- */
.sidebar {
    position: fixed; top: 50px; left: 50px; width: 250px; z-index: 100;
}
.main-title {
    font-family: var(--title-font);
    font-weight: var(--font-weight);
    
    font-size: 2.5rem; line-height: 1.2;
    margin-bottom: 40px; color: inherit;
    border-bottom: 4px solid var(--point-color); padding-bottom: 20px;
    display: inline-block; 
    transition: border-color 0.5s ease; /* 폰트 변경은 깜빡임 방지를 위해 transition 제외 */
}
.nav-item { display: flex; align-items: center; margin-bottom: 15px; cursor: pointer; }
.nav-checkbox {
    appearance: none; width: 20px; height: 20px; border: 2px solid currentColor;
    margin-right: 15px; cursor: pointer; transition: all 0.3s ease;
}
.nav-checkbox:checked { background-color: var(--point-color); border-color: var(--point-color); }
.nav-item label {
    font-family: var(--title-font); /* 메인 제목과 동일한 폰트 변수 사용 */
    font-weight: var(--font-weight);
    
    font-size: 1.2rem;
    cursor: pointer; transition: color 0.3s;
}
.nav-checkbox:checked + label { color: var(--point-color); }

/* --- 타임라인 --- */
.timeline-container {
    position: relative; width: 100%; max-width: 1200px; margin: 0 auto; padding-top: 100px;
}
/* --- 타임라인 (수정) --- */
.timeline-line {
    position: absolute; top: 0; bottom: 0; left: 50%; width: 12px;
    background-color: #1a1a1a; transform: translateX(-50%); 
    
    /* [수정] 배경(1~4)보다 위, 메인사진(10)보다 아래 */
    z-index: 5 !important; 
}

/* --- 연도별 섹션 (수정) --- */
.year-section {
    position: relative; min-height: 100vh; display: flex; justify-content: center; align-items: center; 
    
    /* [삭제] z-index: 1;  <-- 이 줄을 지우세요! */
    /* 부모가 z-index를 가지면 자식들이 라인과 섞이지 못합니다. */
    
    scroll-snap-align: start; scroll-snap-stop: always;
}
.content-wrapper {
    display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; gap: 80px;
}
.content-wrapper.reverse { flex-direction: row-reverse; }
.text-box {
    width: 300px; padding: 20px; position: absolute; top: 30%;
}
.left-align { text-align: right; right: 60%; } 
.right-align { text-align: left; left: 60%; }
/* 1980s (임시) */
#section-1980 h2 { font-family: 'Righteous', cursive; font-weight: 400; }

/* 1990s: Playfair Display Black */
#section-1990 h2 { font-family: 'Playfair Display', serif; font-weight: 900; }

/* 2000s (임시) */
#section-2000 h2 { font-family: 'Silkscreen', cursive; font-weight: 400; }

/* 2010s: Poppins SemiBold */
#section-2010 h2 { font-family: 'Poppins', sans-serif; font-weight: 600; }

/* 2020s: PyeongChang Peace Light */
#section-2020 h2 { font-family: 'PyeongChangPeace-Light', sans-serif; font-weight: 700; top: 60%;}
.text-box h2 {
    font-size: 5rem; color: var(--point-color);
    margin-bottom: 10px; line-height: 1; transition: color 0.5s ease;
}
.text-box h3 {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 700; 
    font-size: 1.3rem; text-transform: uppercase; letter-spacing: 2px; 
}

/* --- 이미지 컨테이너 (기본 설정) --- */
.image-container {
    width: 500px; height: 700px; position: relative; z-index: 10 !important; cursor: pointer;
    /* 기본 위치 (중앙 정렬) - 개별 조정으로 덮어쓸 예정 */
    left: 50%; transform: translateX(-50%);
}

/* --- [핵심] 모든 이미지 흑백 -> 호버 시 컬러 --- */
/* 메인 이미지 */
.main-img {
    width: 100%; height: 100%; object-fit: contain;
    position: absolute; top: 0; left: 0;
    transition: opacity 0.5s ease;
    drop-shadow(0 10px 10px rgba(0,0,0,0.1));
}

/* 1. 흑백 이미지 (밑에 깔림) */
.gray { opacity: 1; z-index: 1; }

/* 2. 컬러 이미지 (위에 덮임, 평소엔 안 보임) */
.color { opacity: 0; z-index: 2; }

/* 호버 시 컬러 이미지가 나타남 */
.image-container:hover .color { opacity: 1; }

/* 콜라주 아이템 (날아오는 이미지들) */
.fly-in-item {
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.5s ease; /* 필터 전환 추가 */
}
.fly-in-item:hover {
    z-index: 60; /* 호버한 이미지를 맨 앞으로 */
}


/* --- [핵심] 시대별 이미지 위치 세밀 조정 (Fine-Tuning) --- */
/* Tip: transform: translateX() 값을 조절하여 좌우 위치를 미세하게 맞추세요.
   -50%가 정중앙이며, 값이 커질수록 오른쪽, 작아질수록 왼쪽으로 이동합니다.
   top 값을 조절하여 높낮이를 맞추세요.
*/

/* 1980s: 선을 왼쪽에서 살짝 덮음 */
.img-1980 {
    left: 50%;
    transform: translateX(-70%); /* 중앙보다 약간 오른쪽으로 치우침 */
    top: 0px; /* 높이 조정 */
}

/* 1990s: 선을 오른쪽에서 많이 덮음 */
.img-1990 {
    left: auto; right: 50%; /* 오른쪽 기준 */
    transform: translateX(60%); /* 중앙보다 왼쪽으로 많이 치우침 */
    top: 50px; /* 80년대보다 조금 아래로 */
    width: 800px;  /* 숫자를 줄이면 작아지고, 늘리면 커집니다 */
    height: 750px; /* 이미지 비율에 맞춰 적절히 조절하세요 */
}

/* 2000s: 정중앙에 딱 맞춤 */
.img-2000 {
    left: 47%;
    transform: translateX(-60%);
    top: -20px; /* 약간 위로 */
    width: 750px;  /* 숫자를 줄이면 작아지고, 늘리면 커집니다 */
    height: 550px; /* 이미지 비율에 맞춰 적절히 조절하세요 */
}

/* 2010s: 오른쪽에서 살짝 덮음 */
.img-2010 {
    left: auto; right: 50%;
    transform: translateX(100%);
    top: 0px;
    width: 400px;  /* 숫자를 줄이면 작아지고, 늘리면 커집니다 */
    height: 600px; /* 이미지 비율에 맞춰 적절히 조절하세요 */
}

/* 2020s: 왼쪽에서 많이 덮음 */
.img-2020 {
    left: 47%;
    transform: translateX(-90%);
    bottom: -100px;
}


/* --- 날아오는 콜라주 아이템 --- */
.collage-group {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 1; visibility: hidden;
}
.collage-group.active {
    visibility: visible;
    pointer-events: auto; /* 활성화되면 클릭 가능 */
}
.collage-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease; /* 1.5초 동안 서서히 등장 */
}
.collage-group.active .collage-bg { opacity: 1; }

.image-container.active {
    z-index: 60 !important; /* 배경(50)보다 높게! */
}
.image-container.active .color {
    opacity: 1 !important; /* 호버 안 해도 컬러 유지 */
}

.collage-img {
    position: absolute;
    opacity: 0;
    /* 화면 오른쪽 밖에서 대기, 살짝 회전 */
    transform: translateX(100vw) rotate(5deg); 
    transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1); /* 슈우욱~ (고급스러운 움직임) */
    z-index: 10;
}

.collage-group.active .collage-img {
    opacity: 1;
    transform: translateX(0) rotate(0deg); /* 원래 위치로 */
}

/* 시간차 등장 (딜레이) */
.item-1 { transition-delay: 0.1s; }
.item-2 { transition-delay: 0.2s; }
.item-3 { transition-delay: 0.3s; }
.item-4 { transition-delay: 0.4s; }
.item-5 { transition-delay: 0.5s; }


/* --------------------------------------------------------
   👇 [사용자 조정 영역] 1980년대 사진 위치 & 크기 조절
   top, left, right, bottom, width 값으로 자유롭게 배치하세요!
-------------------------------------------------------- */

/* 사진 1 (우측 상단) */
#collage-1980 .item-1 {
    bottom: 0; left: 0;
    width: 450px;
}

/* 사진 2 (중앙 우측) */
#collage-1980 .item-2 {
    bottom: 0; left: 30%;
    width: 300px;
}

/* 사진 3 (상단 중앙) */
#collage-1980 .item-3 {
    top: 0%; left: 50%;
    width: 330px;
}

/* 사진 4 (맨 밑 맨 왼쪽 - 요청하신 고정 위치) */
#collage-1980 .item-4 {
      top: 1%; left: 38%;
    width: 180px; /* 크기 */
}

/* 사진 5 (중앙 하단) */
#collage-1980 .item-5 {
    top: 0%;; right: 0%;
    width: 380px;
}


/* 3. 텍스트 스타일 (레퍼런스 디자인 반영) */
/* 3. 텍스트 스타일 수정 (우측 하단 고정 & 페이드인만 적용) */
.collage-text {
    position: absolute;
    
    /* 👇 [수정] 너비를 좁게 설정하세요 (예: 400px) */
    width: 400px; 
    
    text-align: center; /* 오른쪽 정렬 */
    color: white;
    z-index: 20; 
    
    /* 위치 */
    bottom: 10px;  
    right: -10px;   
    
    opacity: 0; 
    transition: opacity 1s ease; 
    transition-delay: 1.5s; 
}

.collage-group.active .collage-text {
    opacity: 1; /* 보이게 됨 */
    /* ❌ transform: translate(-50%, -50%);  <-- 이 줄을 삭제했습니다! (중앙 정렬 해제) */
}

/* 폰트 스타일 (기존 유지) */
.text-sub {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 1.5rem; font-weight: 300; letter-spacing: 2px;
    margin-bottom: 10px;
}

.text-main {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 3rem; font-weight: 900; 
    line-height: 1.1; margin-bottom: 20px;
    letter-spacing: -2px;
}

.text-desc {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 1.3rem; font-weight: 400; 
    margin-bottom: -10px;
}

.text-body {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 1.1rem; 
    line-height: 1.6; 
    font-weight: 400;
    
    /* 👇 [수정] 본문도 오른쪽 정렬 (원하시는 느낌에 따라 left로 하셔도 됨) */
    text-align: left; 
    
    /* 👇 [핵심 수정] 글자가 박스 끝에서 무조건 줄바꿈됨 (단어 중간이라도) */
    word-break: break-all; 
    
    padding: 50px;
    display: block; 
}

/* =========================================
   [1990s 전용 꼴라주 스타일]
========================================= */

/* 1. 레이어 순서 정리 (Z-Index) */
/* 배경(collage-bg)의 z-index는 기본값이 auto이나 부모인 .collage-group이 1입니다. */
/* 내부에서 순서를 정해줍니다. */

#collage-1990 .layer-back {
    z-index: 0 !important; /* 배경보다 뒤 */
}

#collage-1990 .collage-bg {
    z-index: 5 !important; /* 기준 */
}

#collage-1990 .layer-front {
    z-index: 10 !important; /* 배경보다 앞 */
}

#collage-1990 .collage-text {
    z-index: 20 !important; /* 텍스트 맨 앞 */
}

/* 2. 텍스트 좌우 분리 레이아웃 */
.collage-text.left-bottom {
    /* 기존 위치 설정 초기화 */
    top: 0; left: 0; bottom: 0; right: 0;
    width: 100%; 
    height: 100%;
    max-width: none; /* 중앙으로 모이는 현상 제거 */
    
    pointer-events: none; /* 클릭 통과 */
    
    /* Flex 관련 속성 제거 (독립 배치를 위함) */
    display: block; 
}

/* 2. 왼쪽 텍스트 그룹 (제목) 위치 고정 */
.text-group-left {
    position: absolute;
    left: 50px;   /* 왼쪽 벽에서 50px 떨어짐 */
    bottom: 50px; /* 바닥에서 50px 떨어짐 */
    
    text-align: left;
    pointer-events: auto;
}

/* 3. 오른쪽 텍스트 그룹 (설명) 위치 고정 & 너비 고정 */
.text-group-right {
    position: absolute;
    right: 26px;  /* 오른쪽 벽에서 50px 떨어짐 (화면 끝에 붙음) */
    bottom: 50px; /* 바닥에서 50px 떨어짐 */
    
    /* 👇 [핵심] 너비 강제 고정 */
    width: 210px;      /* 너비 230px */
    min-width: 180px;  /* 최소 너비도 230px (줄어듬 방지) */
    
    text-align: left;  /* 박스 안에서 글자 왼쪽 정렬 */
    pointer-events: auto;
}

/* 오른쪽 본문 스타일 */
.text-group-right .text-body {
    background: transparent; 
    padding: 0; 
    margin-top: 35px; 
    
    /* 글자 설정 */
    font-size: 1.1rem; /* 글자 크기 조절 (필요 시) */
    line-height: 1.5;
    word-break: keep-all; /* 단어 끊김 방지 */
}

/* 3. 1990s 사진 위치 조정 */
#collage-1990 .item-1 { bottom: 0%; right: 28%; width: 300px; } /* Back */
#collage-1990 .item-2 { bottom: 8.5%; right: 16%; width: 310px; } /* Back */
#collage-1990 .item-3 { top: 35%; left: 15%; width: 200px; } /* Back */
#collage-1990 .item-4 { top: 0%; right: 0%; width: 240px; } /* Front */
#collage-1990 .item-5 { top: -1%; right: 0%; width: 360px;}

/* =========================================
   [2000s 전용 꼴라주 스타일]
========================================= */

/* 1. 배경 순서 (검은 선 뒤로) */
/* .collage-bg는 이미 z-index가 낮게 설정되어 있어 자동으로 선(z-index:5) 뒤로 갑니다. */

/* 2. 사진 위치 (위2, 아래2) */
/* [Top 1] 왼쪽 위 */
#collage-2000 .item-1 {
    top: 0%; 
    left: 30%; 
    width: 190px;
}

/* [Top 2] 중앙 위 (텍스트 피해서 배치) */
#collage-2000 .item-2 {
    bottom: 0%; 
    left: 17%; /* 텍스트가 오른쪽에 있으므로 조금 중앙 쪽으로 */
    width: 330px;
}

/* [Bottom 1] 왼쪽 아래 (3번째 사진) */
#collage-2000 .item-3 {
    top: 0%; 
    right: 15%; 
    width: 250px;
    
    /* [수정] 메인 이미지(active 시 60)보다 무조건 높아야 함 */
}

/* [Bottom 2] 중앙 아래 */
#collage-2000 .item-4 {
    bottom: 0%; 
    left: 3%; 
    width: 330px;
}


/* 3. 텍스트 오른쪽 중앙 배치 */
.collage-text.right-center {
    /* 기존 위치 초기화 */
    top: 70%;
    bottom: auto;
    left: auto;
    right: 25px; /* 오른쪽 벽에서 50px 떨어짐 */
    color: #1a1a1a;
    
    /* 수직 중앙 정렬 */
    transform: translateY(-50%); 
    
    width: 400px;
    text-align: center; /* 제목들 오른쪽 정렬 */
}

/* 2000년대 텍스트 등장 시 중앙 정렬 유지하며 페이드인 */
.collage-group.active .collage-text.right-center {
    opacity: 1;
    transform: translateY(-50%); /* translateY 유지 */
}

/* 본문 스타일 (오른쪽 정렬 박스 안에서도 본문은 왼쪽 정렬 추천) */
.right-center .text-body {
    text-align: left;
    margin-top: 0px;
    font-size: 1.1rem; /* 글자 크기 조절 (필요 시) */
}

/* =========================================
   [2010s 전용 꼴라주 스타일]
========================================= */

/* =========================================
   [2010s 전용 꼴라주 스타일]
========================================= */

/* 1. 배경 줄무늬 (Div 방식) */
.collage-bg-stripes-div {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1; /* 배경: 라인(5)보다 뒤 */
    pointer-events: none;
}

.stripe-bar {
    position: absolute;
    left: 0; width: 100%; /* 화면 가로 꽉 채움 */
    background-color: #FF00AE; /* 핑크색 (원하는 색으로 변경 가능) */
    opacity: 0; /* 처음에 안 보임 */
    transition: opacity 1.5s ease; /* 서서히 등장 */
}

/* 활성화 시 줄무늬 등장 */
.collage-group.active .stripe-bar { opacity: 1; }


/* --------------------------------------------------------
   👇 [사용자 조정 영역] 2010s 줄무늬 두께 & 위치 조절
   height: 두께 / top, bottom: 위치
-------------------------------------------------------- */

/* [줄무늬 1] 얇은 줄 (위쪽) */
.bar-1 {
    height: 20px;  /* 두께 */
    top: 26%;      /* 위치 */
}

/* [줄무늬 2] 중간 줄 (중앙) */
.bar-2 {
    height: 120px; /* 두께 */
    bottom: 27%;      /* 위치 */
}

/* [줄무늬 3] 두꺼운 줄 (아래쪽) */
.bar-3 {
    height: 145.5px; /* 두께 */
    bottom: 0%;   /* 위치 */
}
/* [사진] 4장 위치 배치 */
/* 사진 1 (왼쪽 위) */
#collage-2010 .item-1 {
    bottom: 0%; left: 0%;
    width: 290px;
    z-index: 10; /* 줄무늬 위로 올라오게 */
}

/* 사진 2 (오른쪽 위) */
#collage-2010 .item-2 {
    top: -0.01%; left: 20%;
    width: 220px;
    z-index: 10;
}

/* 사진 3 (중앙 왼쪽) */
#collage-2010 .item-3 {
    top: -3%; right: 16%;
    width: 400px;
    z-index: 10;
}

/* 사진 4 (오른쪽 아래) */
#collage-2010 .item-4 {
    bottom: 0%; right: 0%;
    width: 280px;
    z-index: 10;
}



/* 1. 텍스트 컨테이너 (화면 전체 너비 사용) */
.collage-text.bottom-split-2010 {
    position: absolute;
    bottom: 13px; /* 바닥에서 50px 띄움 */
    left: 250px;   /* 왼쪽 여백 */
    right: 220px;  /* 오른쪽 여백 */
    width: auto;  /* left, right가 있으므로 auto */
    height: auto;
    
    /* 텍스트 등장 애니메이션 */
    opacity: 0;
    transition: opacity 1s ease 1.5s;
    
    /* 클릭 통과 (중요) */
    pointer-events: none;
    z-index: 60;
}

/* 활성화 시 등장 */
.collage-group.active .collage-text.bottom-split-2010 {
    opacity: 1;
}

/* 2. 왼쪽 그룹 (제목들) */
.bottom-split-2010 .text-group-left {
    position: absolute;
    left: 60;
    bottom: 0;
    text-align: left;
    pointer-events: auto; /* 텍스트 드래그 가능하게 */
}

/* 3. 오른쪽 그룹 (설명글) - 가로로 길게 */
.bottom-split-2010 .text-group-right {
    position: absolute;
    right: 0;
    bottom: 0;
    
    /* 👇 [핵심] 가로로 길게 설정 */
    width: 500px; 
    text-align: left; /* 그룹 자체는 오른쪽 정렬 */
    pointer-events: auto;
}

/* 오른쪽 본문 스타일 */
.bottom-split-2010 .text-body {
    text-align: left; /* 글자는 왼쪽 정렬로 읽기 편하게 */
    background: transparent;
    padding: 0;
    margin-top: 20px;
    
    /* 👇 가로로 긴 본문 */
    width: 100%; 
    word-break: keep-all;
    line-height: 1.6;

}=========================================
   [2020s 전용 꼴라주 스타일 (추가할 부분)]
========================================= */

/* =========================================
   [2020s 전용 꼴라주 스타일]
========================================= */

/* 1. 레이어 순서 정리 (Z-Index) */
/* 사이드바(.sidebar)의 z-index는 100입니다. */

#collage-2020 .layer-back {
    z-index: -1; /* 배경보다 뒤 */
}

#collage-2020 .collage-bg {
    z-index: 5; /* 중간 (배경) */
}

#collage-2020 .layer-front {
    z-index: 50; /* 배경보다 앞, 하지만 사이드바(100)보다는 뒤! */
}
/* 1. 레이어 순서 정리 (Z-Index) */
/* 사이드바(.sidebar)의 z-index는 100입니다. */

#collage-2020 .layer-back {
    z-index: -1; /* 배경보다 뒤 */
}

#collage-2020 .collage-bg {
    z-index: 5; /* 중간 (배경) */
}

#collage-2020 .layer-front {
    z-index: 10; /* 배경보다 앞, 하지만 사이드바(100)보다는 뒤! */
}

#collage-2020 .collage-text {
    z-index: 60; /* 텍스트는 사진들보다 앞 */
    color: #1a1a1a; 
}


#section-2020 .text-box {
    /* 기존 top: 30%를 덮어씁니다 */
    top: 60%; /* 숫자가 커질수록 아래로 내려갑니다 (예: 50%, 70%) */
    
    /* 혹시 바닥을 기준으로 잡고 싶다면 아래 주석을 풀고 사용하세요 */
    /* top: auto; */
    /* bottom: 10%; */
}
/* 2. 텍스트 우측 하단 배치 (3줄 구성용) */
.collage-text.bottom-right-2020 {
    bottom: 40px; 
    right: 49px; 
    width: 250px;
    text-align: left;
    
    /* 텍스트 등장 애니메이션 */
    opacity: 0;
    transition: opacity 1s ease 1.5s; /* 1.5초 딜레이 */
}

.collage-group.active .collage-text.bottom-right-2020 {
    opacity: 1;
    transform: translateX(-50%);
}
/* [추가] 2020년대만 큰 제목 사이즈 줄이기 */
.bottom-right-2020 .text-main {
    font-size: 2.2rem; /* 기존 3~4rem보다 작게 조정 (원하는 크기로 숫자 변경 가능) */
    line-height: 1.2;
    margin-bottom: 15px;
    text-align: left;
}
.bottom-right-2020 .text-sub {
     font-size: 1.2rem; /* 기존 3~4rem보다 작게 조정 (원하는 크기로 숫자 변경 가능) */
    text-align: left;
}

/* 2020s 본문 스타일 (오른쪽 정렬 박스 내 왼쪽 정렬) */
.bottom-right-2020 .text-body {
    text-align: left;
    background: transparent; /* 배경 없음 */
    padding: 0;
    width: 200px;
    margin-top: 20px;
    word-break: keep-all;
    color: #1a1a1a; /* 2020s는 밝은 배경이라 글자색 진하게 */
}
.bottom-right-2020 .text-body strong {
    font-weight: normal; /* 일반 굵기로 변경 */
    color: inherit; /* 색상도 본문과 똑같이 */
}


/* --------------------------------------------------------
   👇 [사용자 조정 영역] 2020년대 사진 위치 & 크기 조절
   top, left, right, bottom, width 값으로 배치하세요!
-------------------------------------------------------- */

/* [배경 뒤] 사진 1 (item-1) - 왼쪽 위 */
#collage-2020 .item-1 {
    top: 5%; left: 20%;
    width: 500px;
}

/* [배경 뒤] 사진 2 (item-2) - 중앙 아래 */
#collage-2020 .item-2 {
    top: 3%; right: 0%;
    width: 770px;
}

/* [배경 앞] 사진 3 (item-3) - 왼쪽 아래 (내비게이션 근처) */
/* z-index가 50이라 배경보단 앞에 있지만, 사이드바(100)보단 뒤에 있어서 체크박스 밑으로 들어갑니다 */
#collage-2020 .item-3 {
    bottom: 0%; left: 0%;
    width: 350px;
}

#section-2020 .text-box {
    position: absolute;
    /* 배경(z-index:5)보다 높고, 날아오는 사진(z-index:50)보다는 낮게 설정 */
    /* 만약 날아오는 사진보다도 위에 두고 싶다면 60 이상으로 높이세요 */
    z-index: 30 !important; 
}