/* [1] 상세페이지 전체 컨테이너 (1200px 중앙 정렬) */
.work-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 0; 
}

.work-nav a{
    padding: 20px 0;
    display: block;
}

/* [2] 본문과 사이드바를 감싸는 레이아웃 박스 */
.work-layout {
    display: flex;
    flex-direction: row-reverse; 
    justify-content: space-between;
    align-items: flex-start; /* 사이드바가 본문 길이에 상관없이 상단 고정되게 */
    gap: 80px; 
}

/* [3] 사이드바 영역 (Index & Credits) */
.work-sidebar {
    width: 250px;
    flex-shrink: 0; 
    position: sticky;
    top: 140px; /* 헤더 높이를 고려해 상단에서 멈추는 위치 (헤더가 80px라면 +40px 여유) */
    max-height: calc(100vh - 160px); 
    overflow-y: auto;
    padding-left: 30px;
    border-left: 1px solid #eee;
}

.side-title {
    position: relative;
    font-size: 14px;
    padding-left: 10px;
    font-weight: 600;
    color: #2B2B2B;
    margin-bottom: 20px;
    text-transform: uppercase; /* 소문자로 써도 대문자로 표시 */
    letter-spacing: 0.05em;
}
.side-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%); /* 세로 중앙 정렬 */
    width: 3px;          /* 선 두께 */
    height: 14px;        /* 선 높이 (글자 크기와 맞추거나 살짝 작게) */
    background-color: var(--primary-color);
    border-radius: 1px;  /* 선 끝을 아주 살짝 둥글게 (선택사항) */
}

/* 서브 네비게이션(index) */
.side-index {
    margin-bottom: 60px; /* Credits 영역과의 간격 */
}
.side-index ul {
    padding-left: 15px; /* 10~20px 사이 지혜 님 취향대로 조절 */
}
.side-index ul li {
    margin-bottom: 12px;
}
.side-index ul li a {
    font-size: 14px;
    font-weight: 300;
    color: #666; 
    transition: color 0.3s;
}
.side-index ul li a.active {
    color: #535353; /* 활성화 시 진하게 */
    font-weight: 500;
}
.side-index ul li a:hover{
    color: var(--primary-color); 
    font-weight: 500;
}

/* 크레딧 (Credits) */
.side-credits dl {
    padding-left: 15px;
    margin-bottom: 30px;
}
.side-credits dt {
    font-size: 14px;
    font-weight: 500;
    color: #535353;
    margin-bottom: 8px;
}
.side-credits dd {
    font-size: 13px;
    font-weight: 300;
    line-height: 1.8;
    color: #666;
    position: relative; /* 불릿 위치 조절을 위한 기준 */
    padding-left: 12px; /* 불릿이 들어갈 공간 확보 */
}
.side-credits dd::before {
    content: ""; /* 빈 컨텐츠 */
    position: absolute;
    left: 0;
    top: 8px; /* 텍스트 높이에 맞춰 조정 */
    width: 3px;
    height: 3px;
    background-color: #999; /* 불릿 색상 */
    border-radius: 50%; /* 동그랗게 */
}
.side-credits dd.no-bullet::before {
    display: none;
}
.side-credits dd.no-bullet {
    padding-left: 0; /* 불릿 공간 삭제 */
    color: #999;
    line-height: 3;
}



/* [4] 메인 컨텐츠 영역 */
.work-content {
    flex-grow: 1;
    min-width: 0;
}


/* [1] 상세페이지 메인 타이틀 */
.work-main-title {
    font-size: 120px;
    font-weight: 300;
    line-height: 0.9;
    letter-spacing: -0.06em;
    margin-bottom: 20px;
    color: #2B2B2B;
}

.work-main-title span {
    color: var(--primary-color); 
    margin-left: 2px;
    font-weight: 800;
}

/* [2] 상단 서브 설명 텍스트 */
.work-sub-title {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.6;
    color: #2B2B2B; 
    max-width: 600px; 
    margin-bottom: 60px;
}

/* article 프로젝트본문 */
.project-sections{
    margin: 100px 0;
}



@media (max-width: 768px) {
    .work-layout {
        flex-direction: column; /* 세로로 쌓기 */
    }
    .work-sidebar {
        width: 100%;
        position: static; /* 스크롤 따라오기 해제 */
        border-left: none;
        padding-left: 0;
    }
    .work-main-title {
        font-size: 60px; /* 타이틀 크기만 줄이기 */
    }
}