/* 섹션 전체 컨테이너 */
.썸네일 {
  display: flex;
  flex-direction: column;
  align-items: center;  /* 모든 자식 요소를 수평 중앙 */
  justify-content: center;
  width: 100%;
}

/* 포트폴리오 타이틀 */
.썸네일 .portfolio {
  position: relative;
  top: -50px;
  left: 0;               /* ✅ X축 보정 제거 */
  display: flex;
  flex-direction: column;
  align-items: center;   /* ✅ 중앙 정렬 */
  justify-content: center;
  text-align: center;
  width: 100%;
}

/* 타이틀 글자 */
.썸네일 .portfolio h2 {
  font-weight: 200;
  letter-spacing: 1px;
  color: #585858;
  font-size: 28px;
  font-family: sans-serif;
  text-align: center;
  margin: 0;
  position: relative;
  left: 0;               /* ✅ 90px 오프셋 제거 */
  top: -50px;
}

/* 제목 위 세로선 (│) */
.썸네일 .portfolio h2::before {
  content: '│';
  display: block;
  margin: 0 auto 8px;
  color: #7e7e7e;
  font-weight: 500;
  font-size: 30px;
  line-height: 1;
}

/* 썸네일 리스트 전체 중앙 정렬 */
.썸네일 .썸네일-리스트 {
  display: flex;
  justify-content: center;   /* ✅ 가운데 정렬 */
  align-items: flex-start;
  gap: 20px 70px;
  width: 100%;
  max-width: 1200px;
  margin: -50px auto 0;      /* 상단 여백 조정 */
  flex-wrap: wrap;
  transform: none;           /* ✅ X축 이동 제거 */
}

/* 카드 크기 동일 */
.썸네일 .썸네일-리스트 .graphic,
.썸네일 .썸네일-리스트 .multimedia,
.썸네일 .썸네일-리스트 .advertising {
  flex: 0 1 320px;
  max-width: 320px;
  position: relative;
  overflow: hidden;
  background-color: transparent;
  transition: .2s ease-in-out;
  animation: reveal 1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

/* 이미지 위 텍스트 */
.썸네일 .썸네일-리스트 .imtext {
  position: absolute;
  left: 50%;
  bottom: 20px;                    /* ✅ 이미지 아래쪽 여백 10px */
  transform: translateX(-50%);     /* ✅ 가운데 정렬 */
  z-index: 2;
  color: white;
  text-align: center;
  font-size: 11pt;
  font-family: sans-serif;
  font-weight: lighter;
  pointer-events: none;
  line-height: 1.2;
}

/* 기본 상태: 이미지 밝기 + 부드러운 전환 */
.썸네일 .썸네일-리스트 img {
  filter: brightness(1);
  transition: filter .25s ease-in-out;
  will-change: filter;
}

/* 카드 전체에 마우스 올리면 이미지만 어둡게 */
.썸네일 .썸네일-리스트 .graphic:hover img,
.썸네일 .썸네일-리스트 .multimedia:hover img,
.썸네일 .썸네일-리스트 .advertising:hover img {
  filter: brightness(0.82);
}

/* 텍스트는 클릭/호버 막지 않기 (이미 설정돼 있으면 OK) */
.썸네일 .썸네일-리스트 .imtext {
  pointer-events: none;
}

/* 터치 환경에서는 호버 비활성화 (선택) */
@media (hover: none) {
  .썸네일 .썸네일-리스트 .graphic:hover img,
  .썸네일 .썸네일-리스트 .multimedia:hover img,
  .썸네일 .썸네일-리스트 .advertising:hover img {
    filter: none;
  }
}


/* 반응형 대응 */
@media (max-width: 1000px) {
  .썸네일 .썸네일-리스트 .graphic,
  .썸네일 .썸네일-리스트 .multimedia,
  .썸네일 .썸네일-리스트 .advertising {
    flex: 0 1 calc(50% - 15px);
    max-width: calc(50% - 15px);
  }
}

@media (max-width: 640px) {
  .썸네일 .썸네일-리스트 .graphic,
  .썸네일 .썸네일-리스트 .multimedia,
  .썸네일 .썸네일-리스트 .advertising {
    flex: 0 1 100%;
    max-width: 100%;
  }
}