/* ===== K01 Work — 갤러리형 리스트 ===== */
.page-K01 {
  background: var(--color-black);
  color: var(--color-white);
}

.work-list {
  padding: 12.2396vw 2.6042vw 6.25vw; /* 235 50 120 */
  display: flex;
  flex-direction: column;
  gap: 0;
}
.work-list__head {
  margin-bottom: 2.708vw;
} /* 64 — 타이틀 ↔ 탭 */
.work-list__filter {
  margin-bottom: 1.6667vw;
} /* 32 — 탭(or 펼친 sub) ↔ 리스트 */

.work-list__title {
  margin: 0;
  font-size: 5.208vw;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--color-black);
}

/* 라인 마스크 슬라이드 업 — S06 contact와 동일 패턴 */
.work-list__title-line {
  display: block;
}
.work-list__title-line-inner {
  display: inline-block;
  will-change: transform;
}
.work-list__mobile-break {
  display: none;
}
.work-list__seg--nowrap {
  white-space: nowrap;
}
.work-list__title.is-anim-ready .work-list__title-line {
  overflow: hidden;
}
.work-list__title.is-anim-ready .work-list__title-line-inner {
  transform: translateY(110%);
}
/* transition은 reveal 단계에만 — 초기 .is-anim-ready 적용 시 트랜지션이 끼어드는 것 차단 */
.work-list__title.is-anim-ready.is-revealed .work-list__title-line-inner {
  transform: translateY(0);
  transition: transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

/* ----- Filter ----- */
.work-list__filter {
  margin-top: 0;
}

/* ----- Sub-filter (By Industry / By Expertise 펼침) ----- */
.work-subfilter {
  overflow: hidden;
  max-height: 0; /* 기본 닫힘 */
  transition: max-height 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}
/* max-height는 JS가 콘텐츠 실제 높이를 측정해서 설정 */

.work-subfilter__inner {
  margin-top: 1.6667vw; /* 32 — 메인 탭 ↔ 펼침 영역 사이 간격 (overflow:hidden 안에 포함) */
  padding: 1.25vw 0;
  border-top: 2px solid var(--color-grey-200);
  border-bottom: 2px solid var(--color-grey-200);
}

.work-subfilter__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 0.417vw;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* By Expertise만 4열 대신 3열 그리드로 배치 — 관리자 목록 순서 그대로 행 우선(왼→오, 위→아래)
   자동 채움. 컬럼 너비는 내용에 맞춰 자동(max-content), 항목 수가 바뀌어도 grid가 줄 수를
   자동 조정하므로 깨지지 않음. */
.work-subfilter--expertise .work-subfilter__inner {
  width: 94.792vw; /* 1820, 고정 */
  padding: 1.25vw 0.417vw; /* 24 8 */
}
.work-subfilter__list--expertise {
  grid-template-columns: repeat(3, max-content);
  column-gap: 14.167vw; /* 272 */
}

.work-subfilter__link {
  position: relative;
  display: inline-block;
  font-size: 1.6667vw; /* 32 */
  font-weight: 500;
  height: 2.5vw;
  display: inline-block;
  line-height: 2.5vw;
  letter-spacing: 0.02em;
  color: var(--color-black);
  text-decoration: none;
}

/* filter-tabs와 동일 패턴: scaleX(0) → scaleX(1) 좌→우 그어짐 */
.work-subfilter__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s ease;
}
.work-subfilter__link:hover::after,
.work-subfilter__link:focus-visible::after,
.work-subfilter__link.is-active::after {
  transform: scaleX(1);
}

.work-subfilter__count {
  font-size: 0.7292vw; /* 14 */
  font-weight: 400;
  vertical-align: super;
  margin-left: 0.2083vw; /* 4 */
  color: var(--color-black);
}

/* ----- Grid ----- */
.work-grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 1.25vw; /* 24 */
  row-gap: 3.3333vw; /* 64 */
}

.work-grid__item {
  display: block;
}

.work-grid.all-work {
  row-gap: 6.7708vw; /* 130 */
}

.work-grid.all-work .work-grid__item:nth-child(4n) {
  grid-column: span 3;
}

.work-grid.all-work .work-grid__item:nth-child(4n) > a {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

.work-grid.all-work .work-grid__item:nth-child(4n) .work-item__media {
  width: 62.969vw;
}

.work-grid.all-work .work-grid__item:nth-child(8n) > a {
  justify-content: space-between;
}

.work-grid.all-work .work-grid__item:nth-child(8n) .work-item__media {
  order: 2;
}

.work-grid.all-work .work-grid__item:nth-child(8n) .work-item__body {
  order: 1;
}

/* ----- Card ----- */
.work-item {
  display: flex;
  flex-direction: column;
  gap: 1.0417vw; /* 20 — 이미지 ↔ 타이틀 */
  color: inherit;
  text-decoration: none;
}

.work-item__media {
  margin: 0;
  width: 100%;
  aspect-ratio: 590 / 440;
  overflow: hidden;
  background: var(--color-light-grey);
  clip-path: inset(0% 0% 0% 0% round 4px);
}

.work-item__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-item__body {
  display: flex;
  flex-direction: column;
}

.work-item__title {
  position: relative;
  display: inline-block;
  align-self: flex-start;
  margin: 0;
  font-size: 1.875vw; /* 36 */
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--color-black);
}

/* 호버 시 타이틀 밑줄 그어짐 — recent-work와 동일 모션 */
.work-item__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.104vw;
  width: 100%;
  height: 0.104vw;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s ease;
}
.work-item:hover .work-item__title::after,
.work-item:focus-visible .work-item__title::after {
  transform: scaleX(1);
}

.work-item__tags {
  margin: 0;
  font-size: 1.25vw;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-grey-300);
}

/* 카드 entrance — studio-size.com 패턴: 카드 전체 opacity + translateY(20%) → 0%, power1.inOut 1s */
.work-grid__item.is-anim-ready {
  opacity: 0;
  transform: translateY(20%);
}
.work-grid__item.is-anim-ready.is-in-view {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 1s cubic-bezier(0.45, 0, 0.55, 1),
    transform 1s cubic-bezier(0.45, 0, 0.55, 1);
}

@media (prefers-reduced-motion: reduce) {
  .work-grid__item.is-anim-ready {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media all and (max-width: 1200px) {
  .work-list {
    padding: 100px 20px 80px;
    gap: 32px;
  }
  .work-list__head {
    padding: 0;
  }
  .work-list__title {
    font-size: 32px;
  }
  .work-subfilter__inner {
    padding: 24px 0;
  }
  .work-subfilter--expertise .work-subfilter__inner {
    width: auto;
    padding: 24px 0;
  }
  .work-subfilter__list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 16px;
    row-gap: 12px;
  }
  .work-subfilter__link {
    font-size: 22px;
  }
  .work-subfilter__count {
    font-size: 11px;
  }
  .work-item {
    gap: 12px;
  }
  .work-item__title {
    font-size: 20px;
  }
  .work-item__tags {
    font-size: 14px;
  }
}

@media all and (max-width: 640px) {
  .work-list {
    padding: 16.285vw 4.071vw 21.374vw;
  }
  .work-list__title {
    font-size: 7.125vw;
    line-height: 1.2;
    margin-bottom: 5.089vw;
  }
  .work-list__title span {
    line-height: 1.2;
  }
  .work-list__mobile-break {
    display: inline-block;
  }
  .work-list {
    gap: 0;
  }
  .work-list__filter {
    margin-bottom: 2.036vw;
  }
  .work-subfilter__list {
    gap: 6px 0;
  }
  .work-subfilter__inner {
    padding-block: 4.071vw;
    border-width: 1px;
  }
  .work-subfilter--expertise .work-subfilter__inner {
    width: auto;
    padding-block: 4.071vw;
  }
  .work-subfilter__link {
    font-size: 4.071vw;
    height: 6.107vw;
    line-height: 6.107vw;
  }

  /* all-work 와이드 카드(span 3 / 가로 flex) 해제 → 강제 1열 */
  .work-grid {
    grid-template-columns: 1fr;
  }
  .work-grid.all-work .work-grid__item:nth-child(4n),
  .work-grid.all-work .work-grid__item:nth-child(8n) {
    grid-column: auto;
  }
  .work-grid.all-work .work-grid__item:nth-child(4n) > a {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .work-grid.all-work .work-grid__item:nth-child(4n) .work-item__media {
    width: 100%;
  }
  .work-grid.all-work .work-grid__item:nth-child(8n) .work-item__media,
  .work-grid.all-work .work-grid__item:nth-child(8n) .work-item__body {
    order: unset;
  }
  .work-item {
    gap: 4.071vw;
  }
  .work-item__media {
    aspect-ratio: 361 / 269;
  }
  .work-item__body {
    gap: 0.509vw;
  }
  .work-item__title {
    font-size: 5.089vw;
  }
  .work-item__tags {
    font-size: 3.562vw;
  }
  .work-grid.all-work {
    row-gap: 7.125vw;
  }
}