/* 1. 기본 설정 */

/* 사이드바 현재 페이지 하이라이트 효과 */
#page-collector [data-target="frag-collector"],
#page-helter [data-target="frag-2"],
#page-branded [data-target="frag-3"],
#page-duke [data-target="frag-4"],
#page-swallow [data-target="frag-5"],
#page-paprika [data-target="frag-house"],
#page-daisies [data-target="frag-daises"],
#page-lambs [data-target="frag-lambs"],
#page-metempsychosis [data-target="frag-metempsychosis"],
#page-japonais [data-target="frag-japonais"],
#page-women [data-target="frag-women"],
#page-papillon [data-target="frag-papillon"],
#page-leprintemps [data-target="frag-leprintemps"],
#page-la [data-target="frag-la"],
#page-In [data-target="frag-In"] {
    background-color: #000 !important;
    color: #fff !important;
}




/* 폰트 배달왔습니다! 브라우저한테 폰트 파일을 등록하는 과정이야 */
@font-face {
    font-family: 'MyCustomGaramond'; /* 오빠가 부르고 싶은 이름 (마음대로 정해도 돼) */
    src: url('fonts/Libertinage Full_23084 2.ttf') format('opentype'), /* OTF 파일 경로 */

}

/* 특히 로마자와 기호가 있는 부분들을 콕 집어서 한 번 더! */
.num,  .analysis-text p {
    font-family: 'EB Garamond', serif !important;
    font-variant-numeric: lining-nums; /* 숫자 모양을 예쁘게 정렬 */
}
 /* 모든 링크의 기본 스타일 제거 */
a {
    text-decoration: none; /* 밑줄 삭제 */
    color: inherit;        /* 부모(h1)의 글자색을 그대로 따라감 */
    outline: none;         /* 클릭 시 생기는 테두리 방지 */
}

/* 방문한 뒤에도 색이 변하지 않게 고정 */
a:visited {
    color: inherit;
}


* {

margin: 0;

padding: 0;

box-sizing: border-box;

}



body {

background-color: #fff;

overflow-x: hidden;

}



/* 2. 리스트에서 점 제거 및 폰트 정리 */

.sidebar {

position: fixed;

left: 0;

top: 0;

width: 380px;

height: 100vh;

background-color: #fff;

padding: 20px 30px;

z-index: 1000;

display: flex;

flex-direction: column;

justify-content: space-between;

}



/* 제목 스타일 */

.header-area .title {

 font-family: 'EB Garamond', serif !important;

letter-spacing: 0.04em; /* 자간을 살짝 벌려주면 훨씬 우아해 */

font-size: 30px;

line-height: 1.1;

font-weight: normal;

margin-top: 2px;

margin-left: -15px;

}



/* 리스트에서 점(Bullet) 없애기 */

.movie-list {

list-style: none; /* 점 제거 핵심 코드! */

padding: 0;

}



.movie-list li {
 font-family: 'EB Garamond', serif !important;

font-size: 16px;

line-height: 0.8;

color: #000;

margin-bottom: 8px;

margin-left: -15px;

}



/* 3. 오른쪽 콘텐츠: 이미지 확대 및 최적화 */

.content {

margin-left: 250px;

/* [수정] 화면 전체를 채우지 말고, 내용물(이미지) 크기에 딱 맞춥니다 */

width: fit-content;

/* 만약 이미지 너비가 너무 크면 화면 밖으로 나가지 않게 최대치만 설정 */

max-width: calc(100% - 250px);

height: auto;

position: relative;

}



.image-wrapper {

width: 105%;

/* 이미지를 더 크게 보고 싶다면 이 영역의 여백을 조절해 */

}



.bg-main {

width: 100%; /* 콘텐츠 영역 너비에 꽉 채우기 */

height: auto; /* 세로 길이는 14,999px 비율 유지 */

display: block;


/* [확대 팁] 이미지가 시안처럼 꽉 차게 보이도록 함 */

object-fit: contain;


/* 고해상도 이미지의 선명도 유지 */

image-rendering: -webkit-optimize-contrast;

}















/* 조각들의 기준점이 되는 부모 박스 */

.image-wrapper {

position: relative; /* 이게 있어야 조각들이 화면 밖으로 안 도망가! */

}



/* 모든 조각 이미지 공통 설정 */

.fragment {

position: absolute; /* 배경은 무시하고 내 마음대로 위치 잡기 */

z-index: 10; /* 배경보다 위로 올리기 */

top: 0;

left: 0;

}



/* 개별 조각 위치 잡기 (피그마 보면서 하나씩 조절해 봐!) */

.frag-1 {

width: 19vw; /* 조각 크기 */

top: 4vw; /* 위에서 100px 내려오기 */

left: 30vw; /* 왼쪽에서 150px 옆으로 */
height: 19vw;

}

.frag-2 {

top: 46vw; /* 위에서 100px 내려오기 */

left: 9vw; /* 왼쪽에서 150px 옆으로 */

width: 21vw; /* 조각 크기 */
height: 12vw;

}

.frag-3 {

top: 58vw; /* VisBug가 알려준 분홍색 위쪽 수치 */

left: 12.7vw; /* VisBug가 알려준 분홍색 왼쪽 수치 */

width: 21vw; /* 이미지 가로 크기 */
height: 12vw;



}

.frag-4 {

top: 78vw; /* VisBug가 알려준 분홍색 위쪽 수치 */

left: 20.3vw; /* VisBug가 알려준 분홍색 왼쪽 수치 */

width: 22vw; /* 이미지 가로 크기 */


}

.frag-5 {

top: 93vw; /* VisBug가 알려준 분홍색 위쪽 수치 */

left: 47.2vw; /* VisBug가 알려준 분홍색 왼쪽 수치 */

width: 19.5vw; /* 이미지 가로 크기 */

}

.frag-collector {

top: 35vw; /* VisBug가 알려준 분홍색 위쪽 수치 */

left: 47vw; /* VisBug가 알려준 분홍색 왼쪽 수치 */

width: 19.4vw; /* 이미지 가로 크기 */
height: 12vw;

}

.frag-silence {

top: 27.2vw;
    left: 51.3vw;
    width: 19.4vw;

transform: rotate(-15deg); /* [회전 코드] 15도만큼 시계방향으로 회전 */

filter: contrast(1.2); /* 흰색 테두리를 더 밝게 밀어냄 */

mix-blend-mode: multiply;


}

.frag-house {

top: 94vw; /* VisBug가 알려준 분홍색 위쪽 수치 */

left: 8.5vw; /* VisBug가 알려준 분홍색 왼쪽 수치 */

width: 15vw; /* 이미지 가로 크기 */

}

.frag-daises {

top: 108.6vw; /* VisBug가 알려준 분홍색 위쪽 수치 */

left: 8.4vw; /* VisBug가 알려준 분홍색 왼쪽 수치 */

width: 20.2vw; /* 이미지 가로 크기 */
    height: 12vw;

}

.frag-metempsychosis {

top: 126vw; /* VisBug가 알려준 분홍색 위쪽 수치 */

left: 57.5vw; /* VisBug가 알려준 분홍색 왼쪽 수치 */

width: 11vw; /* 이미지 가로 크기 */

}

.frag-japonais {

top: 140vw; /* VisBug가 알려준 분홍색 위쪽 수치 */

left: 49.8vw; /* VisBug가 알려준 분홍색 왼쪽 수치 */

width: 12.8vw;/* 이미지 가로 크기 */

height: 19.5vw;

}

.frag-women {

top: 151vw; /* VisBug가 알려준 분홍색 위쪽 수치 */

left: 18.6vw; /* VisBug가 알려준 분홍색 왼쪽 수치 */

width: 15.4vw; /* 이미지 가로 크기 */

height: 26vw;

}

.frag-leprintemps {

top: 194vw;

left: 41.8vw;
width: 30vw; /* 이미지 가로 크기 */

height: 17.2vw;

}

.frag-papillon {
    top: 175.4vw;
    left: 52.5vw;
    height: 17vw;
    width: 25.4vw; 
}

.frag-lambs {
    top: 124.5vw; 
    left: 10.4vw;
    height: 22vw;
    width: 20vw;
    height: 11vw;

}

.frag-In  {
       top: 244.6vw;
    left: 8.9vw;
    width: 35.4vw;
     height: 25vw;
} 
.frag-la {
    top: 220.5vw;
    left: 23.1vw;
    height: 17vw;
    width: 30vw; 

}
















/* --- 1. 영화 리스트 공통 아이템 (정렬 및 하이라이트) --- */

.nav-item {

cursor: pointer;

transition: all 0.2s ease;


/* 숫자 칸과 제목 칸을 칼정렬하는 그리드 */

display: grid;

grid-template-columns: 30px 1fr; /* 숫자칸을 30px로 타이트하게 조절 */

align-items: center;


/* 박스 시작점: 왼쪽 패딩 0 필수, margin으로 벽과의 거리 조절 */

padding: 2px 10px 1.5px 0px;

margin-left: 15px;

margin-bottom: 2px; /* 아이템 간의 최소 간격 */


width: fit-content;

white-space: nowrap;
 font-family: 'EB Garamond', serif !important;

font-size: 0.95rem;


}
/* 현재 활성화된 페이지의 리스트 항목만 검게 만들기 */
#page-collector [data-target="frag-collector"],
#page-helter [data-target="frag-2"],
#page-branded [data-target="frag-3"],
#page-duke [data-target="frag-4"],
#page-swallow [data-target="frag-5"],
#page-paprika [data-target="frag-house"],
#page-daisies [data-target="frag-daises"],
#page-lambs [data-target="frag-lambs"],
#page-metempsychosis [data-target="frag-metempsychosis"],
#page-japonais [data-target="frag-japonais"],
#page-women [data-target="frag-women"],
#page-papillon [data-target="frag-papillon"],
#page-leprintemps [data-target="frag-leprintemps"],
#page-la [data-target="frag-la"],
#page-In [data-target="frag-In"] {
    background-color: #000 !important;
    color: #fff !important;
    outline: 2px solid #000; /* 아까 정한 박스 두께 유지 */
    border-radius: 0;
    
}

/* 마우스를 올렸을 때(Hover)만 박스가 생기게 하기 */
.nav-item:hover {
    background-color: #000 !important;
    color: #fff !important;
    outline: 2px solid #000;
    border-radius: 0;
  
}


.movie-list li {

display: grid;

/* 1. 로마 숫자 칸(60px) | 2. 영화 제목(1fr) | 3. 대괄호(20px) */

grid-template-columns: 30px 1fr 0px;

align-items: center;

gap: 8px;

margin-bottom: 7px;

}



/* 로마 숫자 영역만 가운데 정렬! */

.roman {

display: block;

text-align: center; /* [핵심] 60px 공간 안에서 정중앙에 배치 */

 font-family: 'EB Garamond', serif !important;

/* 만약 글자 너비를 일정하게 하고 싶다면 아래 속성 추가 */

font-variant-numeric: tabular-nums;

}



/* 마우스 호버 효과 (중복 제거 완료) */

.nav-item.highlight {

background-color: #000;

color: #fff !important;

}



/* --- 2. 이미지 애니메이션 및 색 반전 --- */

.fragment {

position: absolute;

transition: filter 0.4s ease;

}



.fragment.active {

filter: invert(100%);

z-index: 100;

}



/* Remove hover effect for frag-silence */

.fragment.frag-silence.active {

filter: none;

}













/* --- 3. 영화 카테고리 그룹 (대괄호 및 간격) --- */

.movie-group {

position: relative;

/* 그룹 사이의 '엔터' 공간 제거 */

margin-bottom: 0px;


/* 모든 그룹의 대괄호 위치를 일렬로 맞춤 */

width: 220px;

display: flex;

flex-direction: column;

align-items: flex-start;

}



/* 대괄호(가이드라인) 디자인 */

.movie-group::after {

content: "";

position: absolute;

right: 0; /* 215px 지점에 고정 */

top: 4px;

bottom: 10px;

width: 6px;


/* 테두리 두께 및 색상 */

border-right: 1.2px solid #000;

border-top: 1.2px solid #000;

border-bottom: 1.2px solid #000;

opacity: 1.0;


}

/* [추가] ᶈ, ᶆ, ᶋ 심볼 스타일 */

.group-symbol {

position: absolute;

left: 230px; /* 대괄호 바로 오른쪽 끝에 배치 */

top: 50%; /* 세로 정중앙 */

transform: translateY(-50%); /* 정확한 중앙 정렬 */

 font-family: 'Times New Roman', Times, serif;

font-size: 17
px;

color: #000;

cursor: pointer; /* 손가락 모양 추가 */

transition: opacity 0.2s;


}

.group-symbol:hover {

opacity: 0.5; /* 마우스 올리면 살짝 흐려지는 효과 */

}















.title {

/* 기존 폰트 설정 유지 */

    font-family: 'EB Garamond', serif !important;

line-height: 1.2;

}



.sub-title {

display: inline-block; /* 효과가 안정적으로 먹히게 설정 */

transition: all 0.1s ease; /* 부드럽게 변하는 효과 */

cursor: pointer; /* 마우스 올리면 클릭 가능하다는 표시 */

}



/* [핵심] 부제목에 마우스를 올렸을 때만 이탈릭으로! */

.sub-title:hover {

font-style: italic;
 font-family: 'EB Garamond', serif !important;

/* 아르누보 느낌을 더 내고 싶다면 아래 속성도 살짝 추가해봐 */

/* letter-spacing: 1px; */

/* opacity: 0.7; */

}
















/* 3. 전체 위치 더 내리고 싶으면 padding-top 조절 */
.about-main {
    margin-left: 200px;
    width: calc(100% - 380px);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 250px; /* 여기서 숫자를 더 키우면 더 내려가 */
    background-color: #fff;
}

/* 타임라인 컨테이너 */
.timeline-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* 키워드 노드 */
.keyword-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* [핵심] 제목과 화살표를 감싸는 영역 */
.keyword-header {
    position: relative; /* 화살표의 기준점 */
    width: 100%;
    max-width: 500px;  /* 본문 너비와 일치 */
    display: flex;
    justify-content: center; /* 제목은 무조건 정중앙 */
    align-items: center;     /* 제목과 화살표 높이 일치 */
    padding: 15px 0;
         font-family: 'Libertinage' !important;
}

.node-text {
    font-size: 24PX;
    cursor: pointer;
     font-family: 'Libertinage' !important;

}

/* 1. 화살표: 위치를 '절대적'으로 고정해줘야 해 */
.arrow-btn {
    position: absolute; /* [필수] 이게 있어야 right: 0이 먹혀! */
    right: 0;           /* 500px 박스의 맨 오른쪽 끝 */
    top: 50%;           /* 부모 박스의 세로 중앙 */
    transform: translateY(-50%); /* 정확하게 글자 높이랑 나란히 맞춤 */
    font-size: 1.3rem;
    line-height: 1;
    display: none;      /* 평소엔 숨겨두기 */
}

/* 2. 클릭했을 때(active)만 화살표랑 이탤릭체 나오게 */
.keyword-node.active .node-text {
    font-style: italic; /* 오빠가 원한 이탤릭체 복구! */
     font-family: 'EB Garamond', serif !important;
     font-size: 28x;
}

.keyword-node.active .arrow-btn {
    display: block;     /* 클릭하면 오른쪽 끝에 짠! */
    cursor: pointer !important;       /* 무조건 손가락 모양으로 변경 */
    
}

/* 본문 영역 */
.detail-content {
        font-family: 'EB Garamond', serif !important;
    display: none; 
    width: 100%;
    max-width: 500px;
    margin-top: 10px;
    margin-bottom: 20px;
}

.keyword-node.active .detail-content {
    display: block;
}

.description {
    font-family: 'EB Garamond', serif !important;
    font-size: 22px; 
    line-height: 1.4;
    text-align: left;
    margin: 0 20px;
    margin-top: -50px;
    
    
}

/* [절대 안 사라지는] 세로선 패턴 */
.node-line {
    width: 1px;
    height: 60px;
    background-color: #000;
    margin: 5px 0;
    display: block !important; /* 강제로 보이게 함 */
}




/* 링크 글자색도 흰색으로 고정 */
#page-lambs [data-target="frag-lambs"] .movie-link {
    color: #fff !important;
}



/* 기본적으로 문장들은 숨김 */
.detail-content .description {
    display: none;
      font-family: 'EB Garamond', serif !important;
    font-size: 22px; 
    line-height: 1.4;
    text-align: left; /* 시안처럼 중앙 정렬 */
    margin-top: -80px;
    max-width: 600px;
}

/* active 클래스가 붙은 문장만 보임 */
.detail-content .description.active {
    display: block;
  
    
}


/* [핵심] 왼쪽 화살표: 문장 시작점(좌측)으로 보내기 */
.arrow-btn-prev {
    position: absolute; /* [필수] 이게 있어야 right: 0이 먹혀! */
    right: 92%;           /* 500px 박스의 맨 오른쪽 끝 */
    top: 50%;           /* 부모 박스의 세로 중앙 */
    transform: translateY(-50%); /* 정확하게 글자 높이랑 나란히 맞춤 */
    font-size: 1.3rem;
    line-height: 1;
    display: none;

}

/* 설명 박스: 이미지 레이아웃 영역으로 보내기 */
.category-description {
    display: none; 
    position: fixed; 
    width: 520px; /* 박스 전체 너비 고정 */
    background: rgba(255, 255, 255, 0);
    border: 1.2px solid #00000000;
    padding: 10px 40px 10px 10px; /* [수정] 오른쪽(40px)에 화살표 자리를 미리 확보! */
    z-index: 5000;
    font-family: 'Libertinage';
    
}

/* 활성화 상태 */
.category-description.active {
    display: block !important;
}

/* 설명창 안의 제목 스타일 */
/* 2. 설명창 안의 제목과 화살표를 감싸는 영역 (기준점) */
.category-description h3 {
    position: relative; /* [추가] 화살표가 이 제목 줄의 오른쪽 끝에 붙도록 기준 설정 */
    font-size: 26px;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0em;
    font-family: 'Libertinage';
    width: 100%;        /* 부모 너비를 다 쓰게 함 */
}


/* 제목 옆 화살표 스타일 */
.desc-arrow {
    text-decoration: none;
    color: #000;
    margin-left: 0px;
position: absolute !important; 
    
    /* [정렬] 박스의 오른쪽 끝에서 25px 띄우기 (padding 크기만큼) */
 
 
}

/* P (Possessiveness) 전용 */
#desc-p {
    left: 1000px; 
    top: 280px; 
}
#desc-p .desc-arrow {
    right: 138px !important; /* P에 맞는 위치값 */
}

/* M (Metamorphosis) 전용 */
#desc-m {
    left: 380px; 
    top: 750px; 
    color: #fff;
}
#desc-m .desc-arrow {
    right: 186px !important; /* M에 맞는 위치값 (흰색 글자니까 맞춰서 조절) */
    color: #fff !important;
}

/* L (Liberation) 전용 */
#desc-l {
    left: 1000px; 
    top: 800px; 
}
#desc-l .desc-arrow {
    right: 165px !important; /* L에 맞는 위치값 */
}


/* 1. 설명 박스 공통 스타일 (모양만 잡기) */
.category-description {
    display: none; 
    position: fixed; 
    width: 520px; 
    background: rgba(255, 255, 255, 0);
    border: 1.2px solid #00000000;
    padding: 10px;
    z-index: 5000;
     font-family: 'Libertinage';

}



/* 2. [핵심] 각 심볼 클릭 시 나타날 위치 개별 지정 */

/* P (Possessiveness) - 상단 이미지 근처 */
#desc-p {
    left: 1000px; 
    top: 280px; 
}

/* M (Metamorphosis) - 중간쯤, 약간 더 오른쪽으로 */
#desc-m {
    left: 380px; 
    top: 750px; 
    color: #fff;
}

/* L (Liberation) - 하단 이미지 근처, 다시 왼쪽으로 */
#desc-l {
    left: 1000px; 
    top: 800px; 
}

/* 활성화 상태 */
.category-description.active {
    display: block !important;
}







/* 맨 마지막 피니쉬 마크 영역 */
.end-credits {
 width: 100%;
    /* [수정] 위쪽(top) 여백만 60vh로 주고, 나머지는 0으로 설정 */
    /* 순서: padding: 위 오른쪽 아래 왼쪽; */
    padding: 53vh 0vw 0vw 0vw; 
    
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* 오른쪽 정렬 */
    box-sizing: border-box;
    
    /* [추가] 혹시 모를 하단 여백 방지 */
    margin-bottom: 0;
}

.fin-mark {
    font-style: normal;
    font-family: Georgia, 'Times New Roman', Times, serif;
   font-size: 1.8vw;
letter-spacing: 0.2em;
    color: #000;
    display: inline-block;
    margin: 0;
  
}

/* 2. [핵심] 마우스를 올렸을 때(Hover) 스타일 */
.fin-mark:hover .text {
    /* [수정] 이탈릭체(italic)로 변경 */
    font-style: italic; 
    
}

.fin-mark .bracket {
    font-weight: 0;
    color: #000000; /* 대괄호는 살짝 연하게 해서 텍스트를 강조 */
    margin: 0 5px;
    
}
























/* --- [완벽 격리] 상세 페이지 전용 레이아웃 최종판 --- */



/* 1. 본문 영역을 오른쪽 여백 없이 꽉 채우기 */

.detail-page .content {

margin-left: 40px !important; /* 사이드바 여백 유지 */

padding: 60px 40px !important;

width: calc(100% - 460px) !important; /* 이미지 영역 신경 쓰지 말고 꽉 채움 */

max-width: none !important; /* 너비 제한 해제 */

position: relative !important;

display: block !important;

}





/* 2. 메인 페이지에서 쓰던 image-wrapper의 영향을 제거 */

.detail-page .image-wrapper {

width: 100% !important;

position: static !important;
display: grid;

}



/* 3. 본문 안의 글자(텍스트)와 이미지들이 겹치지 않게 '한 줄에 하나씩' 배치 */

.detail-page .content * {

position: static !important; /* absolute 해제 */

display: block !important; /* 무조건 줄바꿈 */

width: auto !important;

max-width: 800px; /* 읽기 편하게 최대 너비 제한 */

margin-bottom: 30px !important;

line-height: 1.6 !important;

    font-family: 'EB Garamond', serif !important;

}



/* 4. 포스터 이미지 크기 고정 (피그마 느낌) */

.detail-page .poster-box img {

width: 300px !important; /* 포스터는 500px 정도로 큼직하게 */

height: auto !important;

margin-top: 20px;

}



/* 5. 텍스트 정렬 */

.detail-page .description {

text-align: justify;

font-size: 1.1rem;

color: #333;

}













/* --- 상세 페이지 콘텐츠 좌측 이동 및 레이아웃 최종 보정 --- */



/* 1. 상세 페이지일 때 본문을 사이드바 바로 옆으로 당기기 */

.detail-page .content {

margin-left: 380px !important; /* 사이드바 너비만큼만 띄우기 */

padding: 80px 0px !important; /* 위아래 여백 60px, 좌우 여백 40px */

width: calc(100% - 380px) !important;

max-width: 1000px !important; /* 본문이 너무 퍼지지 않게 적당히 제한 */

display: block !important;

}



/* 2. 상단 헤더 (포스터 + 제목) 가로 정렬 및 왼쪽 밀착 */

.detail-page .info-header {

display: flex !important;

gap: 40px; /* 포스터와 글자 사이 간격 좁힘 */

align-items: flex-start;

margin-bottom: 50px;

}



/* 3. 포스터 크기 최적화 */

.detail-page .poster-box img {

width: 315px !important; /* 피그마 느낌으로 크기 고정 */

height: auto !important;

margin: 0 !important;

}











/* 5. 메인 페이지의 absolute 잔재들 완전 박멸 */

.detail-page .content * {

position: static !important;

transform: none !important;

margin-left: 0 !important; /* 혹시 모를 왼쪽 마진 초기화 */


}










/* --- 상세 페이지 텍스트 세부 커스텀 --- */



/* 1. 영화 메인 제목 (The Silence of the Lambs) */

.detail-page .movie-title {

    font-family: 'EB Garamond', serif !important;

font-size: 35px !important; /* 크기를 더 키우고 싶으면 조절해 */

font-weight: normal;

letter-spacing: -0.03em; /* 자간을 살짝 좁히면 더 세련돼 보여 */

margin-top: -15px;

color: #000;


}



/* 2. 영화 정보 (1991 | Jonathan Demme) */

.detail-page .movie-meta {

    font-family: 'EB Garamond', serif !important;

font-size: 18px !important;

color: #666 !important; /* 약간 흐리게 해서 제목을 강조 */

margin-top: -35px;

}


/* 3. 도입부 요약 텍스트 (수정본) */
.detail-page .intro-text {
    font-family: 'EB Garamond', serif !important;
    font-style: italic;
    font-size: 18px !important;
    line-height: 1.5 !important; 
    
    /* ★ 자간을 0이나 아주 살짝만 줄여줘 (-1.5px은 너무 과해!) ★ */
    letter-spacing: -0.2px !important; 
    
    /* ★ 확실하게 왼쪽 정렬 고정 ★ */
    text-align: left !important; 
    
    color: #333;
    max-width: 550px; /* 너비를 살짝 줄이면 왼쪽 정렬된 끝선이 더 잘 보여 */
    margin-top: 100px;
}



/* 4. 분석 영역: 본문 너비를 상단 선 끝 지점에 맞춤 */
.detail-page .analysis-container {
    display: flex !important;
    justify-content: flex-start !important; /* 왼쪽 정렬 기준 */
    align-items: flex-start;
    width: 100% !important;
    gap: 60px; /* 본문과 오른쪽 이미지 사이의 여유 공간 */
}


.detail-page .analysis-text {
    /* ★ 핵심: 이 수치를 조절해서 상단 선의 끝부분과 맞추면 돼 ★ */
    /* 현재 스크린샷 기준으로 선 끝에 맞추려면 800px~850px 정도가 적당해 보여 */
    width: 820px !important; 
    flex-shrink: 0 !important;
}



.detail-page .sub-content {

/* 이미지를 화면 맨 우측 빈 공간으로 치워버림 */

width: 250px !important;
margin-left: 30px;
flex-shrink: 0 !important;
text-align: left !important;


}


/* 1. 모든 p 태그의 기본 간격을 일단 0으로 초기화 (정밀 조절을 위해) */
.detail-page .analysis-text p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.4 !important; /* 줄 간격 */
}

/* 2. 첫 번째 p 태그 (∫ Two Cocoons...) */
.detail-page .analysis-text p:nth-child(1) {
    margin-top: -55px !important;    /* 위로 더 올리고 싶으면 마이너스 수치 조절 */
    margin-bottom: 30px !important;  /* 이 문단 아래쪽 여백 (본문과의 간격) */
    font-size: 24px !important; 
    line-height: 38.4px;
    font-family: 'EB Garamond', serif !important;
    
}

/* 3. 두 번째 p 태그 (The Silence of the Lambs is a journey...) */
.detail-page .analysis-text p:nth-child(2) {
    margin-bottom: 50px !important;  /* 본문 아래쪽 여백 (캐릭터 선택창과의 간격) */
    margin-top: -10px !important;  
    line-height: 1.6 !important;     /* 본문은 가독성을 위해 줄 간격을 조금 더 넓게 */
}





/* 5. 분석 본문 내용 (수정본) */
.detail-page .analysis-text p {
   font-family: 'EB Garamond', serif !important;
    font-size: 24px !important;
    
    /* ★ px 대신 숫자를 써봐! 1.2는 매우 촘촘, 1.5는 적당한 간격이야 ★ */
    line-height: 1.4 !important; 
    
    text-align: left !important;
    letter-spacing: -0.01em !important;
    color: #000000 !important;
    margin-top: 20px !important;
}









/* 2. 본문 컨테이너 상단에 직접 라인 만들기 */
.detail-page .analysis-container {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: flex-start;
    width: 100% !important;
    gap: 60px;
    
    
    /* 여기서 직접 라인을 그려! */
    border-top: 1px solid #000000 !important; /* 선 두께, 스타일, 색상 마음대로 조절 가능 */
    padding-top: 70px;     /* 선과 본문 사이의 간격 */
    margin-top: -5px;     /* 선과 위쪽 요소 사이의 간격 */
}


/* 1. p 태그 안의 모든 요소가 줄바꿈 없이 이어지도록 설정 */
.detail-page .analysis-text p * {
    display: inline !important; /* block 요소를 inline으로 강제 변경 */
    margin: 0 !important;       /* 주변 여백 제거 */
    padding: 0 !important;      /* 내부 여백 제거 */
}

/* 2. 만약 em 태그를 썼다면 확실하게 한 번 더 잡아주기 */
.detail-page .analysis-text p em {
    display: inline !important;
    font-style: italic;

}



 /* 1. 처음에는 상세 내용을 완전히 숨김 */
.detail-content {
    display: none; 
    margin-top: 15px;
    padding-left: 10px;
}

/* 2. active 클래스가 붙은 경우에만 보이게 함 */
.keyword-node.active .detail-content {
    display: block !important;
}

/* 3. 클릭할 수 있다는 느낌을 주기 위한 스타일 */
.char-label {
    cursor: pointer;
    font-size: 24px;
    text-decoration: underline;
    text-underline-offset: 6px;
}

.char-label:hover {
    opacity: 0.6;
}

/* [핵심] 상세 내용은 처음에는 무조건 숨김 처리 */
.keyword-node .detail-content {
    display: none !important; /* 처음엔 안 보이게 강제 고정 */
    margin-top: 15px;
    padding-left: 20px;

}

/* [수정] 상세 내용 분석 텍스트 스타일 통일 */
.keyword-node.active .detail-content {
    display: block !important;
    margin-top: 90px;      /* 본문 문단 간격과 통일 */
    margin-bottom: 50px;   /* 아래 버튼과의 간격 */
    padding-left: 0px;
}

.keyword-node.active .detail-content .main-text-block p.description {
    font-family: 'EB Garamond', serif !important;
    font-size: 24px !important;
    line-height: 1.5 !important;
    color: #000 !important;
}




/* 2. 오른쪽 서브스크립트만 따로 조절 (이 코드를 추가하세요) */
.keyword-node.active .detail-content .sub-description {
    /* 본문 설정(24px)을 무시하고 작게 고정 */
    font-size: 18px !important; 
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    
    /* 위치 및 너비 조절 */
    margin-left: 840px !important;
    width: 250px !important;
    display: block !important;
    
    /* 본문보다 위로 올리고 싶을 때 수치 조절 */
    transform: translateY(700px) !important; 
}






/* 클릭할 제목 스타일 */
.char-label {
    cursor: pointer;
    font-size: 24px;
    text-decoration: underline;
    text-underline-offset: 6px;
    display: inline-block;
    margin-bottom: 33px 

}





.hover-img {

display: inline-block;


/* 1. 평소 상태: 크기를 아예 0으로 만들어서 공간 제거 */

width: 200 !important;

height: 0 !important;

opacity: 0;

pointer-events: none;


vertical-align: middle;

margin-top: -130px;

}



/* 2. 글자에 마우스 올렸을 때 (Hover) */

.keyword-header:hover .hover-img {

/* ★여기가 핵심! 오빠가 원하는 조그만 크기를 여기서 정해★ */

width: 200px !important; /* 50px 정도로 조그맣게 (더 줄이려면 30px로!) */

height: auto !important; /* 가로에 맞춰 세로 비율 자동 조절 */
position: absolute;

/* 투명도 조절: 0.3은 반투명, 1은 선명하게 */

opacity: 1 !important;

margin-top: -130px;

margin-left: 10px; /* 글자랑 살짝 간격 띄우기 */


}


/* 1. 기존 <hr> 스타일 제거 및 검은 라인 추가 */
.citation-footer hr {
    display: none; /* 기본 라인 숨기기 */
}

/* [수정] 검은 라인 스타일 */
.black-line {
    width: 100%;
    height: 1px;
    border-top: 1px solid #000000 !important;
    
    /* ★ 핵심: auto를 주면 남는 공간을 다 위로 밀어서 바닥으로 내려가 ★ */
    margin-top: auto !important;  
    padding-top: -10px !important; /* 선 위쪽 여유 공간 */
    margin-bottom: 30px !important;
}




/* 3. 각주 텍스트 정렬 */
.citation-footer ul {
    list-style: none;
    padding-left: 0;
}

.citation-footer li {
    font-size: 18px;
    line-height: 1.3;
    color: #000000;
    margin-bottom: 10px;
    scroll-margin-top: 100px; /* 이동 시 위쪽 여백 */
    padding-bottom: 0px !important; /* 웹사이트 맨 밑에 너무 붙지 않게 여유 */
    
}


/* 2. 각주 전체 영역 (푸터) */
.citation-footer {
    width: 1300px;
    max-width: 1100px; /* 본문 너비랑 맞추기 */
    margin-left: 390px;
}


/* [최종 해결] 경로를 단순화해서 무조건 가로 820px 채우기 */
body.detail-page .bill-image-box {
    width: 820px !important;      /* 본문 너비와 동일하게 */
    max-width: 820px !important;
    height: 360px !important;      /* 세로 300px 고정하면 사진 찌그러지니까 auto로! */
    margin: 40px 0 !important;    /* 위아래 적당한 간격 */
    display: block !important;
}

/* 이미지 자체가 박스 너비를 꽉 채우도록 */
body.detail-page .bill-image-box img {
    width: 100% !important;
    display: block !important;
}
  

/* [수정] 사진 아래 캡션 */
/* [가장 확실한 방법] 경로를 끝까지 다 적어서 캡션만 수정 */
body.detail-page .content .analysis-body .analysis-container .main-text-block .bill-image-box p.bill-img-caption {
    /* 1. 폰트 크기 및 종류 */
    font-family: 'EB Garamond', serif !important;
    font-size: 18px !important; /* ← 여기서 글자 크기 조절해! */
    
    /* 2. 글자 스타일 */
    line-height: 1.4 !important;
    letter-spacing: 0px !important;
    
    /* 3. 위치 및 정렬 */
    text-align: left !important; /* 왼쪽 정렬 */
    margin-top: -20px !important; /* 이미지와의 간격 */
    padding: 0 !important;
    display: block !important;
}




/* 페이지 전체에 부드러운 스크롤 적용 */
html {
    scroll-behavior: smooth;
}

/* 본문의 각주 링크 디자인 */
.footnote-link {
    font-size: 0.7em;       /* 글자를 살짝 작게 */
    vertical-align: super; /* 위첨자처럼 보이게 */
    color: #000;           /* 색상은 검정 */
    text-decoration: none; /* 밑줄 제거 */
    margin-left: 2px;
    transition: color 0.2s;
}





/* --- 클라리스 전용 서브 설명 위치 조절 --- */

#clarice-sub-desc {
     /* 본문 설정(24px)을 무시하고 작게 고정 */
     position: absolute !important;
    font-size: 18px !important; 
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    
    /* 위치 및 너비 조절 */
    margin-left: 840px !important;
    width: 250px !important;
    display: block !important;
    
    /* 본문보다 위로 올리고 싶을 때 수치 조절 */
    transform: translateY(-290px) !important; 
}


/* --- 클라리스 두 번째 문단 전용 조절 --- */



/* --- 클라리스 두 번째 문단(Mid) 전용 조절 --- */

/* 1. 문단 사이의 간격 (높이) 조절 */
#node-clarice .clarice-mid {

    margin-bottom: 40px !important; /* 세 번째 문단과의 간격 */
    
    /* 2. 문단 자체의 줄 간격 */
    line-height: 1.6 !important; 
    
    /* 3. 문단 글자 크기 (혹시 다르게 하고 싶다면) */
    font-size: 24px !important;
    
    /* 4. 왼쪽 여백 (필요할 때만 사용) */
    padding-left: 0px !important;
}

/* 래퍼(감싸는 박스)의 상단 여백도 체크 */
#content-clarice .description-wrapper {
    margin-top: 20px !important; /* 제목(In the case of Clarice)과의 거리 */

}



#node-clarice .clarice-last {
    margin-top: 0px !important;    /* 첫 번째 문단과의 간격 (늘리거나 줄여봐!) */
    margin-bottom: 40px !important; /* 세 번째 문단과의 간격 */
}

#node-bill .bill-min {
 margin-top: 170px !important;    /* 첫 번째 문단과의 간격 (늘리거나 줄여봐!) */
    margin-bottom: 40px !important; /* 세 번째 문단과의 간격 */
    position: relative !important;
}


/* --- 서브 설명 박스 내부 이미지 전용 스타일 --- */


/* 1. 클라리스 섹션 전체를 이미지의 기준점으로 만들기 */
#page-lambs #content-clarice {
    position: relative !important; /* 자식 요소인 이미지가 이 안에서만 움직이게 가둠 */
   
}

/* 2. 클라리스 서브 설명 박스 (이미지 포함) 고정 */
#page-lambs #clarice-sub-desc {
    position: absolute !important;
    right: -400px;      /* 본문 너비(820px) 바깥 오른쪽으로 배치 */
    top: 0 !important;  /* 클라리스 섹션이 시작되는 맨 윗부분에 고정! */
    
    width: 250px !important; 
    display: block !important;
    margin-left: 0 !important; /* 마진 대신 좌표로 조절 */
    transform: none !important; /* 마이너스 이동 제거 */
}
/* 1. 이미지 크기 및 간격 조절 */
#clarice-sub-desc img.sub-img {
    /* [핵심] 800px까지 커지는 공통 스타일을 이겨내고 250px로 고정 */
    width: 400px !important;   /* 박스 너비(250px)에 꽉 채우기 */
    height: auto !important;  /* 가로에 맞춰 세로 비율 자동 조절 */
     margin-top: 10px !important; /* 이미지와의 간격 */

    
}
/* 2. 글자 클릭 시 .visible 클래스가 붙으면 나타날 위치 */
#page-lambs #clarice-sub-desc.visible {
    right: -280px;         /* 원래 오빠가 원했던 위치로 들어옴 */
    opacity: 1;            /* 선명하게 보임 */
    pointer-events: auto;  /* 나타나면 상호작용 가능 */
}

body.detail-page .content .analysis-body .analysis-container  p.clarice-img-caption {
    /* 1. 폰트 크기 및 종류 */
    position: relative; /* 자식 요소인 이미지의 기준점이 됨 */
    font-family: 'EB Garamond', serif !important;
    font-size: 18px !important; /* ← 여기서 글자 크기 조절해! */
    
    /* 2. 글자 스타일 */
    line-height: 1.2 !important;
    letter-spacing: 0px !important;
    
    /* 3. 위치 및 정렬 */
    position: absolute !important;
    text-align: left !important; /* 왼쪽 정렬 */
    margin-top: -20px !important; /* 이미지와의 간격 */
    padding: 0 !important;
    display: block !important;
    
}


/* 1. 클라리스 전체 문단을 감싸는 박스 설정 초기화 */
#content-clarice .description-wrapper {
    display: block !important;    /* flex를 해제해서 문단이 차곡차곡 쌓이게 함 */
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* 1. 본문 내 주석 번호 ([1], [2] 등) 스타일링 */
.footnote-ref {
    text-decoration: none; /* 밑줄 제거 */
    color: #000000;           /* 약간 흐린 회색으로 존재감 낮추기 */
    transition: color 0.2s ease;
}

.footnote-ref sup {
    font-size: 16px !important;  /* 아주 작게 조절 (이미지 속 9.6px 느낌) */
    top: -0.5em;                /* 글자보다 약간 위로 위치 조절 */
    letter-spacing: -0.5px;     /* 글자 간격을 좁혀서 더 밀도 있게 */
    font-weight: 300;           /* 가늘게 */
}

/* 2. 마우스를 올렸을 때만 강조 */
.footnote-ref:hover {
    color: #000;
    text-decoration: underline;
}


.detail-page .movie-title, 
.detail-page .movie-meta, 
.detail-page .intro-text, 
.detail-page .analysis-text p {
    font-family: 'EB Garamond', serif !important; /* 싹 다 가라몬드로! */
}






/* --- 데이지 전용 서브 설명 레이아웃 고정 --- */
#daises-sub-desc {
    position: absolute !important;
    
    /* 1. 크기 작게 고정 (서브 이미지 느낌) */
    width: 250px !important; 
    font-size: 16px !important; 
    line-height: 1.3 !important;
    
    /* 2. 우측으로 밀기 (본문이랑 안 겹치게) */
    margin-left: 840px !important; 
    display: block !important;
    
    /* 3. 높이 조절 (아래로 내리고 싶으면 숫자를 더 키워!) */
    transform: translateY(-405px) !important; 
    
    z-index: 100;
}

/* 이미지 크기도 박스에 맞게 고정 */
#daises-sub-desc .sub-img {
    width: 120% !important;
    height: auto !important;
    margin-bottom: 10px !important;
}

/* --- 데이지 전용 서브 이미지 캡션 스타일 --- */
#daises-sub-desc .daises1-img-caption {
    /* 1. 클라리스랑 똑같이 폰트 크기를 확 줄임 (14px~16px 추천) */
    font-size: 18px !important; 
    
    /* 2. 가라몬드로 통일 */
    font-family: 'EB Garamond', serif !important;
    
    /* 3. 캡션이니까 촘촘한 줄 간격 (디자인 전공자 디테일!) */
    line-height: 1.2 !important; 
    
    /* 4. 이미지와의 간격 및 텍스트 정렬 */
    margin-top: 20px !important;
    text-align: left !important;
    color: #000000 !important; /* 글자색도 살짝 연하게 해서 캡션 느낌 내기 */
    letter-spacing: 0px !important;
    padding: 0 !important;
    display: block !important;
    
}
/* --- 데이지 메인 이미지 (1-1) 크기 조절 --- */
.daises-image-box .main-img {
    /* 1. 너비 조절: 820px이 꽉 찬 상태니까, 600px 정도로 줄이거나 100%로 꽉 채우거나! */
    width: 100% !important; 
    
    /* 2. 높이는 비율에 맞게 자동으로! */
    height: auto !important; 
    
 

}


/* 3. [가장 중요] 캡션을 이미지 옆으로 빼거나 작게 배치 */
body.detail-page .daises-1-img-caption {
    font-family: 'EB Garamond', serif !important;
    font-size: 18px !important; 
    line-height: 1.2 !important;
    color: #000 !important;
    text-align: left !important;
    text-align: left !important; /* 왼쪽 정렬 */
    margin-top: -20px !important; /* 이미지와의 간격 */
    padding: 0 !important;
    display: block !important;
    letter-spacing: 0px !important;
    
    
}

/* --- 데이지 본문 내 이미지 & 캡션 정렬 --- */



.detail-page .Daises-two .hover-word {
    display: inline-block !important; /* 단어들이 옆으로 흐르게 함 */
    position: relative !important;    /* 이미지가 이 단어를 기준으로 나타남 */
    margin: 0 0px !important;         /* 단어 사이 미세한 간격 */
    cursor: pointer;
    
    /* 언더라인 기본 설정 */
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
   
}

/* 호버 시: 글자는 투명하게, 언더라인은 사라지게 */
.hover-word:hover {
    color: transparent;
    text-decoration-color: transparent;
}

/* 2. 이미지: 아래쪽 마진을 최소화해서 캡션을 끌어올림 */
.detail-page .daises-image-box .main-img {
    width: 100% !important;
    height: auto !important;
    margin-bottom: 20px !important; /* 이미지와 캡션 사이 간격 (양들의 침묵 스타일) */
    display: block !important;
}



/* --- 단어 호버 시 이미지 교체 효과 --- */
.detail-page .Daises-two * {
    display: inline-block !important; /* 한 줄에 가로로 나열되게 함 */
    position: relative !important;    /* 단어 하나하나가 이미지의 기준점이 됨 */
    margin-bottom: 0 !important;      /* 단어 사이 간격 벌어짐 방지 */
    vertical-align: baseline;
}

.hover-word {
    display: inline-block;
    position: relative;
  
}

/* 호버했을 때 원래 글자는 투명하게 숨기기 */
.hover-word:hover {
    color: transparent;
}

/* 호버 시 나타날 이미지 설정 (가상 요소 사용) */
.hover-word:hover::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    /* 여기서 이미지 크기를 조절해 (단어 크기에 맞추거나 고정 크기) */
    width: 120px;  
    height: 80px; 
    
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 10;
}

/* 각 단어별 이미지 경로 연결 (HTML의 data-img 속성을 가져옴) */
/* 노가다를 줄이기 위해 속성 선택자를 활용해볼게 */
.hover-word[data-img]:hover::after {
    background-image: var(--bg-image); /* 아래 JS에서 연결해주거나, 노가다로 작성 가능 */
}

/* 노가다 방식 (가장 확실함): */
.hover-word:nth-of-type(1):hover::after { background-image: url('source/gifs/1b.png'); }
.hover-word:nth-of-type(2):hover::after { background-image: url('source/gifs/2b.png'); }
.hover-word:nth-of-type(3):hover::after { background-image: url('source/gifs/3b.png'); }
.hover-word:nth-of-type(4):hover::after { background-image: url('source/gifs/4b.png'); }
.hover-word:nth-of-type(5):hover::after { background-image: url('source/gifs/5b.png'); }
.hover-word:nth-of-type(6):hover::after { background-image: url('source/gifs/6b.png'); }
.hover-word:nth-of-type(7):hover::after { background-image: url('source//gifs/7b.png'); }
.hover-word:nth-of-type(8):hover::after { background-image: url('source/gifs/8b.png'); }
.hover-word:nth-of-type(9):hover::after { background-image: url('source/gifs/9b.png'); }
.hover-word:nth-of-type(10):hover::after { background-image: url('source/gifs/10b.png'); }
.hover-word:nth-of-type(11):hover::after { background-image: url('source/gifs/11b.png'); }
.hover-word:nth-of-type(12):hover::after { background-image: url('source/gifs/12b.png'); }
.hover-word:nth-of-type(13):hover::after { background-image: url('source/gifs/14b.png'); }
 
/* 브라우저 화면 너비가 600px 이하(최대한 줄였을 때)일 때만 작동 */
@media (max-width: 700px) {
    
    /* 1. 왼쪽 사이드바 리스트 완전히 숨기기 */
    .sidebar {
        display: none !important;
    }

    /* 2. 본문(오른쪽 프레임)을 화면에 꽉 차게 중앙 정렬 */
    .content, 
    .detail-page .content {
        /* [핵심] 사이드바가 있던 왼쪽 여백을 0으로 만들어 중앙으로 당김 */
        margin-left: 0 !important; 
        
        /* [핵심] 고정된 fit-content를 지우고, 화면 비율에 맞춤 */
        width: 100% !important; 
        max-width: 90vw !important;  /* 양옆에 살짝 여백(10vw)을 줘서 가독성 확보 */
        margin:  auto !important;   /* 화면 정중앙 배치 */
        
        padding: 40px 0 !important;  /* 위아래 간격만 유지 */
        box-sizing: border-box;      /* 패딩이 너비에 영향을 주지 않게 함 */
        display: block !important;   /* block으로 변경하여 가로 폭 가득 차게 */
    }

   /* 3. [핵심] 820px로 고정했던 텍스트 박스들을 가변형으로 변경 */
    .detail-page .analysis-text,
    .detail-page .analysis-text p,
    .detail-page .intro-text,
    .detail-page .movie-title,
    .detail-page .movie-meta,
    .main-text-block
     {
        /* 고정 너비(820px 등)를 무효화하고 100%로 설정 */
        width: 100% !important; 
        max-width: 100% !important; 
        min-width: 0 !important;
        
        /* 텍스트가 화면 밖으로 나가지 않고 줄바꿈되게 함 */
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important; 
        
        /* 중앙 정렬 느낌을 위해 */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 4. 본문 내의 모든 이미지 박스들도 화면 너비에 맞춰 축소 */
    .poster-box img,
    .bill-image-box, 
    .daises-image-box .main-img,
    .bg-main {
        width: 100% !important;      /* 박스 너비에 맞춤 */
        height: auto !important;     /* 비율 유지하며 축소 */
        max-width: 100% !important;
        display: block !important;
        margin: 0 auto 20px auto !important; /* 이미지 중앙 정렬 및 아래 간격 */
    }
    
    /* 5. 영화 제목 등 헤더 정보 중앙 정렬 */
    .info-header, .movie-summary .movie-meta {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
}

/* 문단들 사이의 간격을 강제로 일정하게 맞춥니다 */
.analysis-text p {
    margin-top: 0 !important;
    margin-bottom: 20px !important; /* 다른 문단들과 동일하게 맞추고 싶은 간격 수치 */
    display: block !important;
}


 
/* 두 번째 문단(Collector-two)의 위쪽 마진 제거 */
.Collector-two {
    margin-top: 40px !important;
}

/* 'page-lambs'가 아닌 페이지의 이미지에만 여백 적용 */
body:not(#page-lambs) .daises-image-box, 
body:not(#page-lambs) .analysis-text img {
    margin-top: 40px !important;
    margin-bottom: 20px !important;
  
}
/* 2. 만약 이미지에 테두리나 배경이 있다면 패딩도 고려해 볼 수 있어요 */
.main-img {
    display: block;
    width: 100% !important;
    height: auto !important;
}




/* 2. [범인 검거] 첫 번째 문단에만 따로 들어갔던 과한 여백 제거 */
.detail-page .analysis-text p:nth-child(3) {
    margin-top: -30px !important; /* 위로 올리는 설정은 유지 */
    margin-bottom: 40px !important; /* ★여기가 30px로 되어 있었다면 다른 문단과 똑같이 15px로 수정★ */
}




/* 이미지 크기도 박스에 맞게 최적화 */
.sub-img2 {
    width: 100PX !important;
    height: 180PX!important;
    display: block;
    margin-top: 50PX;
}


/* --- 상세 페이지 반응형 레이아웃 보정 --- */


.detail-page .analysis-text {
    /* [핵심 수정] 고정 820px을 max-width로 변경 */
    width: 100% !important;        /* 부모 영역 안에서 100% 채우기 */
    max-width: 820px !important;   /* 하지만 아무리 넓어져도 820px은 안 넘음 (칼정렬 유지) */
    
    /* 화면이 줄어들 때 글자가 잘리지 않고 아래로 흐르게 함 */
    flex-shrink: 1 !important; 
    overflow-wrap: break-word;     /* 긴 단어도 화면 밖으로 안 나가게 끊어줌 */
}

/* 이미지 박스들도 본문 너비에 맞춰서 유동적으로! */
body.detail-page .daises-image-box {
    width: 100% !important;
    max-width: 820px !important;
    height: auto !important;
    
}

body.detail-page .bill-image-box {
    width: 100% !important;
    max-width: 820px !important;
    height: 370px !important;
    
    
}


/* 사이드 이미지의 기본 상태 (숨김) */
.sub-description {
    position: fixed;    /* 혹은 절대 위치인 absolute */
    right: -250px;      /* 화면 오른쪽 밖으로 완전히 밀어둠 */
    top: 50%;           /* 원하는 높이 조절 */
    width: 200px;
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1); /* 부드럽고 쫀득한 움직임 */
    z-index: 100;
}

    

/* 스크롤해서 나타났을 때의 상태 */
.sub-description.visible {
    right: -100px;        /* 화면 안으로 30px만큼 들어옴 */
    opacity: 1;
    transform: translateY(-50%) scale(1); /* 원래 크기로 */
}

/* 이미지 '찌뿌' 연출 (아까 결정한 스타일) */
.sub-img2 {
    width: 100% !important;
    height: 120px !important; 
    object-fit: fill !important; 
    display: block;
}


/* 이미지 '찌뿌' 연출 (아까 결정한 스타일) */
.sub-img3 {
    width: 300% !important;
    height: 200px !important; 
    object-fit: fill !important; 
    display: block;
       top: 194vh !important;  /* 50vh가 중간이니까, 70~80 사이로 조절해보세요 */
}


/* 1. 스왈로우 페이지의 사이드 이미지 박스만 타겟팅 */
#page-swallow .sub-description {
    /* 양들의 침묵 페이지는 그대로 두고, 이 페이지만 위치를 아래로 내림 */
    top: 190vh !important;  /* 50vh가 중간이니까, 70~80 사이로 조절해보세요 */
    right: -200px; /* 평소엔 숨김 */
    transition: all 0.6s ease;
}
/* 2. 스크롤해서 나타났을 때의 위치 (스왈로우 전용) */
#page-swallow .sub-description.visible {
    right: -100px !important;
    opacity: 1 !important;
    top: 190vh !important;  /* 50vh가 중간이니까, 70~80 사이로 조절해보세요 */
    

}



/* 클릭할 문장: 회색 하이라이트 스타일 */
.trigger-text {
    padding: 2px 4px;          /* 글자 주변에 아주 살짝 여백 */
      /* 모서리를 살짝 둥글게 */
    cursor: pointer;           /* 마우스 올리면 손가락 모양으로 변경 */
    transition: all 0.2s ease; /* 부드러운 변화 효과 */
    display: inline;           /* 문장 중간에 자연스럽게 섞이도록 */
}

/* 마우스를 올렸을 때 (Hover) */
.trigger-text:hover {
    background-color: #000000; /* 배경색이 조금 더 진해짐 */
    color: #ffffff;               /* 글자색이 완전 검정으로 */
}

/* 이미지가 나타났을 때 문장 상태 (선택사항) */
/* 이미지가 켜져있을 때 문장 색을 바꿔서 '활성화' 상태임을 알릴 수 있어요 */
.trigger-text.active {
    background-color: #d0d0d0;
    font-weight: 500;
}



/* 1. Metempsychosis 페이지 전용 사이드 박스 설정 */
#page-metempsychosis .sub-description {
    top: 100vh !important; /* 위치를 약간 위쪽으로 잡았어요, 조절 가능! */
    right: -300px;
    width: 250px !important; /* 이미지 3개니까 폭을 조금 넓게 */
   
  
}

/* 클릭 시 나타나는 위치 */
#page-metempsychosis .sub-description.visible {
    right: -140px !important;
        top: 100vh !important; 
 
}

/* 2. 이 페이지 안에 있는 3개의 이미지들을 개별 조절 (찌뿌 효과) */
#page-metempsychosis .sub-img3 {
    width: 100% !important;
    height: 160px !important; /* 이미지가 3개니까 높이를 조금 줄여서 찌뿌시켰어요 */
    margin-bottom: 60px !important; /* 이미지끼리 살짝 겹치게 해서 콜라주 느낌 내기 */
    display: block !important;
 
}


/* 1. Metempsychosis 페이지 전용 사이드 박스 설정 */
#page-paprika .sub-description {
    top: 97vh !important; /* 위치를 약간 위쪽으로 잡았어요, 조절 가능! */
    right: -300px;
    width: 270px !important; /* 이미지 3개니까 폭을 조금 넓게 */
    object-fit: fill !important;

    
   
  
}

/* 클릭 시 나타나는 위치 */
#page-paprika .sub-description.visible {
    right: -140px !important;
        top: 97vh !important; 
    
}

/* 3. 이미지 자체를 납작하게 찌뿌시키기 */
#page-paprika .sub-img4 {
    width: 120% !important;
    height: 180px !important;  /* 높이를 확 줄여서 납작하게 만듦 */
    display: block !important;
    object-fit: fill !important;
  
}





/* 1. 파프리카 페이지 서브 이미지 캡션 조절 */
 #page-swallow .clarice-img-caption {
    /* 폰트 크기 및 간격 */
    font-size: 18px !important;      /* 글씨를 본문보다 작게 해서 '주석' 느낌 주기 */
    line-height: 1.2 !important;    /* 행간을 넓혀서 가독성 확보 */
    letter-spacing: -0.02em !important; /* 자간을 살짝 조여서 세련되게 */
    
    
    /* 위치 및 여백 */
    margin-top: -15px !important;    /* ★ 이미지와 캡션 사이의 간격 ★ */
    text-align: left !important;    /* 왼쪽 정렬 (중앙 정렬 원하면 center) */
    
    /* 찌뿌 연출 시 캡션이 너무 넓어지지 않게 너비 제한 */
    max-width: 100% !important;
    word-break: keep-all !important; /* 단어 단위로 끊기 */
}

/* 1. 파프리카 페이지 서브 이미지 캡션 조절 */
#page-paprika .clarice-img-caption {
    /* 폰트 크기 및 간격 */
    font-size: 16px !important;      /* 글씨를 본문보다 작게 해서 '주석' 느낌 주기 */
    line-height: 1.2 !important;    /* 행간을 넓혀서 가독성 확보 */
  
    
    
    /* 위치 및 여백 */
    margin-top: -10px !important;    /* ★ 이미지와 캡션 사이의 간격 ★ */
    text-align: left !important;    /* 왼쪽 정렬 (중앙 정렬 원하면 center) */
    
    /* 찌뿌 연출 시 캡션이 너무 넓어지지 않게 너비 제한 */
    max-width: 90% !important;
    word-break: keep-all !important; /* 단어 단위로 끊기 */
}


/* 1. 파프리카 페이지 서브 이미지 캡션 조절 */
#page-metempsychosis .clarice-img-caption {
    /* 폰트 크기 및 간격 */
    font-size: 16px !important;      /* 글씨를 본문보다 작게 해서 '주석' 느낌 주기 */
    line-height: 1.2 !important;    /* 행간을 넓혀서 가독성 확보 */
  
    
    
    /* 위치 및 여백 */
    margin-top: -15px !important;    /* ★ 이미지와 캡션 사이의 간격 ★ */
    text-align: left !important;    /* 왼쪽 정렬 (중앙 정렬 원하면 center) */
    
    /* 찌뿌 연출 시 캡션이 너무 넓어지지 않게 너비 제한 */
    max-width: 90% !important;
    word-break: keep-all !important; /* 단어 단위로 끊기 */
}


/* 1. 애니메이션 정의 (그대로 유지) */
@keyframes focus-in {
    0% {
        filter: blur(8px);
        opacity: 0;
   
    }
    100% {
        filter: blur(0px);
      
        transform: scale(1);
    }
}

/* 2. [수정] 메인 페이지일 때만 .content에 애니메이션 적용 */
#main-page .content {
    animation: focus-in 2.3s ease-out forwards;
}

/* 다른 페이지(예: lambs.html 등)의 .content는 
   ID가 다르거나 없기 때문에 이 효과가 나타나지 않아! */