* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.container {
width: 100%;
    
    /* 자식 요소들을 무조건 가로 중앙 정렬시키는 Flex 세팅 */
    display: flex;
    position: relative;
    flex-direction: column;   /* 위에서 아래로 차곡차곡 배치 */        
     padding: 0 80px 20px;
    padding-left: 10px;
      max-width: 1300px;
    margin: 0 auto;

}
.container_archive {
  width: 100%;
  max-width: 1410px;
  margin: 0 auto;               /* 💡 margin: 0 auto 대신 margin: 0 으로 설정하여 좌측 정렬 */
  /* padding: 0 10px; */
    padding-left: 40px;
    padding-bottom: 20px;
  min-height: auto;
}
.thumbnail-box {   
position: relative;
  margin-top: 40px; /* absolute를 떼고 단순히 위 드롭다운과의 여백만 지정 */
  float: right;     /* 필요 시 오른쪽 정렬을 float으로 유지 */
  clear: both;
    
    padding-bottom: 20px;
  right: auto;        /* 기존 absolute 좌표 초기화 */
  bottom: auto;
  z-index: 10;        /* 텍스트 위에 떠있도록 레이어 지정 */
  pointer-events: auto;
     mix-blend-mode: multiply;
}

.thumbnail-box img {
 width: 150px;

  height: auto;
  display: block;
  border-radius: 4px;
     
}

/* 마우스 호버 상태 */
.thumbnail-box img:hover {
 box-shadow: 0 0 25px 6px rgba(245, 73, 39, 0.7); /* 블러 크기(25px)와 퍼짐(6px)을 키워 더 진하게 번지게 함 */
  transform: scale(1.02);
}

body{
 font-family: "DM Mono", monospace;
  font-weight: 400;
  font-style: normal;
letter-spacing: -0.3px;
line-height: 1.5;
/* Background-color: #FFFD03; */
    color: #F54927;
    padding-top:20px;
    
}

a, p, h1, h2, h3, h4, h5, h6, li, summary {
  max-width: 750px;  
  width: 100%;           /* 화면이 좁아지면 가변적으로 줄어듦 */
  word-break: keep-all;  /* 한글/단어 단위 깨짐 방지 */
  overflow-wrap: break-word; /* 너무 긴 단어/URL이 들어올 때 박스를 뚫고 나가지 않도록 방지 */
color: #F54927;

    font-size: 14px;
}
/* 2차 수정본(상세페이지)*/

/* 2. 분할 레이아웃 */

/* [왼쪽] 아카이브 목록 */
.archive-section {
    width: 55%;
    padding: 40px;
    /* border-right: 1px solid #eee; */
}

.archive-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

}

.project-item {
    position: relative;
    cursor: pointer;
}

.project-title {
 position: static;
  z-index: 90;
  color: #F54927;
  font-size: 14px;
  padding: 4px 0;
  cursor: pointer;
    /* padding-top: 20px; */
    
}

.project-title::-webkit-details-marker {
    display: none; /* 브라우저 기본 화살표 숨김 */
}

.project-title:hover {
    text-decoration: underline;
}


/* [오른쪽] 상세 패널 영역 */
.detail-panel-area {
    width: 45%;
    position: relative;
}

.empty-state {
    padding: 40px;
    color: #999;
    font-size: 0.85rem;
}
.dropdown-thumbnail{
    width: 30%;            /* 썸네일 가로 크기 */
  height: auto;           /* 썸네일 세로 크기 */
    min-width: 300px;
  object-fit: cover;      /* 이미지 비율 유지하며 채우기 */
  flex-shrink: 0;         /* 공간 부족해도 썸네일 크기 유지 */
  transition: transform 0.2s ease;
}
/* 💡 핵심: 드롭다운이 열렸을 때 (왼쪽 텍스트 : 오른쪽 이미지 2열) */
.dropdown-content {
    display: flex;
  flex-direction: column; /* 위에서 아래로 배치 */
  gap: 20px;
  padding: 20px 0;
  /* margin-top: 30px; */
}
details[open] > summary::before {
  content: "☞"; /* 💡 펼쳐졌을 때 바뀔 기호 (또는 회전효과) */
font-size: 1.5em;
    font-weight: bold;
}

summary {
  list-style: none;
}
summary::-webkit-details-marker {
  display: none;
}

.hero-media {
  width: 100%;
  position: static; /* sticky가 아니므로 스크롤을 따라 위로 올라감 */
}

.hero-media img {
  width: 100%;
  height: auto;
  max-height: 600px;  /* 필요 시 최대 높이 제한 (생략 가능) */
  object-fit: cover;  /* 비율 유지 */
  display: block;
}
.hero-media2 {
  width: 100%;
  position: static; /* sticky가 아니므로 스크롤을 따라 위로 올라감 */
}

.hero-media2 img {
  width: 80%;
  height: auto;
  object-fit: cover;  /* 비율 유지 */
  display: block;
}
/* 2. 각 드롭다운 기본 상태 (닫혔을 때 - 1칸 차지) */
.project-dropdown {
justify-content: center;
  width: 100%;
}

/* 💡 핵심: 3. 드롭다운이 열렸을 때 (open) -> 전체 4열을 다 차지하도록 확장 */
.project-dropdown[open] {
  grid-column: 1 / -1; /* 첫 번째 컬럼부터 끝까지 (4컬럼 전체 너비 차지) */
}
/* 열린 상태의 링크 강조 */
.project-item[open] .project-title {
   position: sticky;
  /* top: 60px; /* finder-nav 바로 아래에 착 붙는 위치 */ */
  z-index: 90;

  list-style: none;
  padding-top: 10px;
}
.project-dropdown[open] .dropdown-thumbnail {
  display: none;
}
/* 왼쪽 텍스트 정보 */
.project-info {
   position: static;
  /* top: 30px; /* 💡 finder-nav(60px) + project-title 높이(~35px) 바로 아래 */ */
  z-index: 80;
  padding: 12px 0;
    
}

.project-info p {
    font-size: 0.85rem;
  line-height: 1.6;
  color: #222;
  white-space: pre-line;
}

/* 오른쪽 이미지 미디어 (2열 균등 배치) */
.detail-media {
    display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  width: 100%;
}

.detail-media img {
    width: 90%;
    height: auto;
    display: block;
}
/* 하위 드롭다운 */

.sub-dropdown-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

/* 서브 드롭다운 아이템 */
.sub-dropdown {
  width: 100%;
}

.sub-dropdown[open] {
}

/* 서브 드롭다운 타이틀 바 */
.sub-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 16px;
  font-size: 0.8;
  font-weight: 400;
    color: #F54927;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.sub-header:hover{
    
    color: #F54927;
    text-decoration: underline;
}
    

.sub-header::-webkit-details-marker {
  display: none;
}

/* 서브 열렸을 때 아이콘 변경 */
.sub-dropdown[open] .sub-icon::before {
  content: "−";
}

/* 서브 드롭다운 내부 펼침 콘텐츠 */
.sub-content {
  padding: 16px;
}

/* 이미지 미디어 그리드는 기존 2열 유지 */
.sub-content .detail-media {
      display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  width: 100%;
}

.sub-content .detail-media img {
  width: 90%;
    height: auto;
    display: block;}
.full-width-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  
  /* 위아래 간격만 지정 */
  margin-top: 20px;
  margin-bottom: 20px;
}

/* 화면이 좁아지는 모바일 환경 분기 */
@media (max-width: 768px) {
    .container_archive {
        padding: 0 20px 40px 20px;
    }
    
    .dropdown-content {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .detail-media {
        grid-template-columns: 1fr;
    }
    
    .project-info {
        position: static;
    }

    body, summary, p {
    font-weight: 500; /* 모바일에서만 한 단계 두껍게 */
  }
}