/* ===== WORK 페이지: 좌측 이미지 미리보기 + 우측 프로젝트명 호버 인덱스 ===== */

.work-main {
  display: flex; align-items: flex-start; gap: 48px;
  padding-top: 130px; padding-bottom: 120px; padding-left: 2cm;
}

/* 좌측: 호버 시 이미지가 나오는 미리보기 (스크롤해도 따라옴) */
.work-preview {
  position: sticky; top: 130px; flex: 1 1 auto;
  aspect-ratio: 3 / 2; max-height: 72vh; overflow: hidden; background: var(--matte);
}
.work-preview img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transform: scale(1.06);
  transition: opacity .5s ease, transform 1.1s var(--ease);
}
.work-preview img.show { opacity: 1; transform: scale(1); }

/* 좌측: 목록 (왼쪽 정렬). 이미지 미리보기는 우측 */
.work-index { order: -1; flex: 0 0 300px; text-align: left; }

.filters { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; margin-bottom: 40px; }
.filter {
  background: none; border: none; cursor: pointer; color: #fff; opacity: .45;
  font-family: inherit; font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: -0.2px; padding: 2px 0;
  transition: opacity .25s;
}
.filter:hover { opacity: .8; }
.filter.on { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }

.proj-list { list-style: none; }
.proj-list a {
  display: block; padding: 6px 0; color: #fff; cursor: pointer;
  font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: -0.3px;
  opacity: .55; transition: opacity .25s ease, transform .35s var(--ease);
}
/* 목록에 마우스 올리면 나머지는 흐리게, 호버 항목만 강조 */
.proj-list:hover a { opacity: .3; }
.proj-list a:hover { opacity: 1; transform: translateX(10px); }
.proj-list a.hidden { display: none; }

/* 스크롤 리빌 (공통) */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity .8s ease, transform .8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* 모바일 전용 그리드 (기본 숨김) */
.work-mobile { display: none; }

@media (max-width: 760px) {
  .work-main { display: block; padding-top: 86px; padding-bottom: 80px; }
  .work-preview, .work-index { display: none; }
  .work-mobile { display: block; }

  .wm-filters { display: flex; justify-content: center; align-items: center; gap: 16px; margin-bottom: 30px; font-size: 15px; font-weight: 700; letter-spacing: -0.3px; }
  .wm-filter { background: none; border: none; color: #fff; opacity: .45; cursor: pointer; font: inherit; padding: 2px 0; }
  .wm-filter.on { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
  .wm-filters span { color: #fff; opacity: .3; }

  .wm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 12px; }
  .wm-card { color: #fff; }
  .wm-thumb { aspect-ratio: 3 / 4; overflow: hidden; background: #1f1f1f; }
  .wm-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .wm-name { margin-top: 9px; font-size: 12px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.4; }
}