/* ============================================================
   작품 목록 페이지 (Figma: works-grid / works-list)
   - 상단 바: 흰 박스 + 검정 글자 + mix-blend-difference → 박스 파랑 / 글자 노랑
   ============================================================ */
/* body 배경은 style.css white 고정 — 페이지색은 .works 에서 제어 */
.works {
  min-height: 100dvh;
  background-color: var(--color-primary-02);
  padding: 72px 0 0;
}

/* 헤더: 배경(페이지색) + 텍스트(blend) 분리 */
body.works-page .nav::before {
  background-color: var(--color-primary-02);
}

body.works-page .nav__logo,
body.works-page .nav > .nav__link,
body.works-page .nav__lang {
  color: var(--color-white);
  isolation: isolate;
  mix-blend-mode: difference;
}

/* 상단 바 */
.works__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 var(--spacing-20);
  font-family: var(--font-family-en);
  font-size: var(--font-size-caption-lg);
  mix-blend-mode: difference;
}

/* 자폭(scaleX)과 blend 를 분리 — iOS Safari 는 같은 요소에 둘 다 있으면 blend 무시
   바깥(outer): scaleX만 / 안쪽(filters·views): blend만 */
.works__filters-outer,
.works__views-outer {
  width: fit-content;
  max-width: 100%;
  transform: scaleX(0.83);
  transform-origin: left center;
}

.works__filters,
.works__views {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  /* difference(옐로우 배경): 흰 박스→파랑, 검정 글자→노랑 */
  background: var(--color-white);
  color: var(--color-black);
  -webkit-mix-blend-mode: difference;
  mix-blend-mode: difference;
}

.filter,
.view {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  text-underline-position: from-font;
  padding: 0;
}

.filter.is-active,
.view.is-active {
  text-decoration: underline;
}

/* ------------------------------------------------------------
   그리드 뷰: 4열 일반 grid
   ------------------------------------------------------------ */
.works__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
  gap: var(--spacing-8);
  padding: 0;
  width: 100%;
  min-width: 0;
}

.works__status {
  margin: 0;
  padding: var(--spacing-20) 0;
  font-family: var(--font-family-en);
  font-size: var(--font-size-caption-lg);
}

/* list 뷰: grid 숨기고 list 표시 */
.works.is-list-view .works__grid {
  display: none;
}

.works__list {
  display: none;
  padding: 0;
}

.works.is-list-view .works__list {
  display: block;
}

/* 셀 높이에 늘어나지 않게 → absolute 제목이 이미지 우하단에 붙음 */
.grid-item {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  /* iOS: 링크/이미지 위에서도 페이지 세로 스크롤 허용 */
  touch-action: pan-y;
}

.grid-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* 바깥 박스: 배경색(primary-02)만 담당 — 블렌드 없이 그대로 표시 */
.grid-item__title {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 0 2px;
  background: var(--color-primary-02);
  font-family: var(--font-family-ko);
  font-weight: var(--font-weight-regular-ko);
  font-size: var(--font-size-caption-sm);
  line-height: 1.2;
}

/* 안쪽 글자: 흰색 + 블렌드(뒤 배경과 색이 반전되어 보임) */
.grid-item__title-text {
  color: var(--color-white);
  isolation: isolate;
  mix-blend-mode: difference;
}

/* ------------------------------------------------------------
   리스트 뷰: 제목 | 카테고리 | 날짜 (아래 밑줄)
   ------------------------------------------------------------ */

.list-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--spacing-8);
  padding: 20px 0 4px 0;
  border-bottom: 3px solid;
  font-family: var(--font-family-en);
  font-size: var(--font-size-title);
  line-height: 1.05;
  cursor: pointer;
}

.list-row__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-family-ko);
  font-weight: var(--font-weight-regular-ko);
}

.list-row__cat {
  flex: 0 0 auto;
  text-align: center;
}

.list-row__date {
  flex: 0 0 auto;
  text-align: right;
}

/* 호버 썸네일 (마우스를 따라다님) */
.works__preview {
  position: fixed;
  top: 0;
  left: 0;
  width: 180px;
  height: auto;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  z-index: 30;
  transition: opacity 0.15s ease;
}

.works__preview.is-visible {
  opacity: 1;
}

/* ============================================================
   Work 페이지 반응형 (Figma Mobile — body.works-page 만 적용)
   - 767px 이하: Mobile Mode Variables + 2열 grid
   - 480px 이하: bar 세로 2줄 (필터 / 뷰)
   - 1024~1439: Desktop (기본 스타일)
   - 1440px~: Wide (Desktop 유지)
   ============================================================ */

/* --- Mobile (max-width: 767px) --- */
@media (max-width: 767px) {
  body.works-page {
    --font-size-caption-lg: 22px;
    --font-size-caption-sm: 16px;
  }

  body.works-page .works {
    padding: 49px 0 0;
    max-width: 100%;
    /* overflow-x:hidden 은 blend 를 끊을 수 있음 → grid/list 쪽으로만 제한 */
  }

  body.works-page .works__bar {
    padding: 0 2px var(--spacing-20);
  }

  body.works-page .works__filters-outer,
  body.works-page .works__views-outer {
    max-width: 100%;
  }

  body.works-page .works__filters,
  body.works-page .works__views {
    font-size: var(--font-size-caption-lg);
    line-height: 1;
    padding: 0 2px 4px;
    box-sizing: border-box;
  }

  /* Figma: 2열 grid, gap 8px, 이미지 full width
     overflow-x:hidden 사용 금지 — iOS 에서 overflow-y:auto 중첩 스크롤 함정 유발 */
  body.works-page .works__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-4);
    padding: 0;
  }

  body.works-page .grid-item__title {
    font-size: var(--font-size-caption-sm);
    line-height: 1;
  }

  /* Figma list: caption-lg 22px, 행 간 gap 20px, 구분선 2px */
  body.works-page .works.is-list-view .works__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-20);
    padding: 0;
  }

  body.works-page .list-row {
    padding: 0 2px 4px;
    font-size: var(--font-size-caption-lg);
    line-height: 1;
    border-bottom: 2px solid;
  }

  /* 모바일: 호버 썸네일 숨김 */
  body.works-page .works__preview {
    display: none;
  }
}

/* --- Small mobile (max-width: 480px) --- */
@media (max-width: 480px) {
  /* Figma: 필터 / 뷰 토글 세로 2줄 */
  body.works-page .works__bar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-8);
  }

  body.works-page .works__filters {
    flex-wrap: wrap;
  }
}

/* --- Tablet (768px ~ 1023px) --- */
@media (min-width: 768px) and (max-width: 1023px) {
  body.works-page .works {
    padding-top: 60px;
    max-width: 100%;
  }

  body.works-page .works__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Desktop bar 복귀 (1024px ~) --- */
@media (min-width: 1024px) {
  body.works-page .works__bar {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}