.recognition-wrap {
  width: 94.792vw;
  margin-inline: auto;
  margin-top: 12.24vw;
  padding-bottom: 6.667vw;
}

.recognition-key-visual {
  position: relative;
  height: 55vw;
}

/* 3장이 같은 자리에 겹쳐 있다가 .is-active 만 보임 — 0.9s 크로스페이드 */
.recognition-key-visual__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.45, 0, 0.55, 1);
  pointer-events: none;
}
.recognition-key-visual__slide.is-active {
  opacity: 1;
}
.recognition-key-visual__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .recognition-key-visual__slide {
    transition: none;
  }
}

.recognition-typo {
  margin-top: 3.333vw;
}

.recognition-typo h2 span {
  font-size: 5.208vw;
  line-height: 1.2;
  font-weight: 500;
}

/* 메인 manifesto/recognition과 동일한 스크롤 텍스트-fill 모션 — JS가 background-position 제어 */
.recognition-typo__reveal {
  display: inline-block;
  margin-right: 0.28em; /* 단어 사이 간격 — 인접 <br class="...break"> 토글 시 텍스트 공백 collapse 이슈 방지 위해 margin으로 처리 */
  background-image: linear-gradient(
    to right,
    var(--color-black) 40%,
    var(--color-grey-300) 60%
  );
  background-size: 300% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.recognition-typo__mobile-break {
  display: none;
}

.recognition-nav {
  margin-top: 3.333vw;
  display: flex;
  justify-content: space-between;
}

.recognition-nav .filter-tabs__link {
  font-size: 1.25vw;
}

.recognition-nav__link {
  display: flex;
  align-items: center;
  gap: 0.625vw;
  font-size: 1.25vw;
  font-weight: 500;
  /* <button>으로도 사용 — 기본 스타일 리셋 */
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}

.recognition-nav__link span {
  width: 2.604vw;
  height: 2.604vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-grey-100);
  border-radius: 50%;
}

.recognition-nav__link span img {
  width: 1.354vw;
  height: 1.354vw;
}

.recognition-list {
  margin-top: 1.094vw;
  border-top: 1px solid var(--color-grey-400);
}
.recognition-list__item {
  padding-block: 3.333vw;
  border-bottom: 1px solid var(--color-grey-400);
}

/* 카드 entrance — work 페이지와 동일: opacity + translateY(20%) → 0, 1s power1.inOut */
.recognition-list__item.is-anim-ready {
  opacity: 0;
  transform: translateY(20%);
}
.recognition-list__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) {
  .recognition-list__item.is-anim-ready {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ----- Recognition Card (이미지 좌 / 라벨·타이틀·브랜드 우) ----- */
.recognition-item {
  display: flex;
  align-items: stretch;
  gap: 2.931vw;
  color: inherit;
  text-decoration: none;
}

.recognition-item__media {
  margin: 0;
  width: 41.667vw;
  aspect-ratio: 800 / 548;
  overflow: hidden;
  background: var(--color-light-grey);
}

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

.recognition-item__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.recognition-item__label {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5ch;
  font-size: 1.458vw; /* 28 */
  line-height: 1.5;
  color: var(--color-grey-400);
}

.recognition-item__heading {
  display: flex;
  flex-direction: column;
  gap: 0.4167vw; /* 8 */
}

.recognition-item__title {
  position: relative;
  display: inline-block;
  align-self: flex-start;
  margin: 0;
  font-size: 2.917vw; /* 56 */
  font-weight: 500;
  line-height: 1.2;
  /* 제목이 2줄로 감싸질 때 absolute ::after 바는 실제 줄 폭/위치를 따라가지 못해
     줄 사이에 선이 어긋나 보임(모바일도 동일 이슈로 이미 native underline으로 전환) —
     데스크탑도 각 줄을 그대로 따라가는 native underline으로 통일 */
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 0.104vw; /* 2 */
  text-underline-offset: 0.15vw;
  transition: text-decoration-color 0.35s ease;
}
.recognition-item:hover .recognition-item__title,
.recognition-item:focus-visible .recognition-item__title {
  text-decoration-color: currentColor;
}

.recognition-item__brand {
  margin: 0;
  font-size: 1.875vw; /* 36 */
  font-weight: 500;
  line-height: 1.5;
  margin-top: 0.208vw;
}

.recognition-item__title,
.recognition-item__brand {
  color: var(--color-black);
  transition: color 0.6s; /* footer 진입 배경 페이드(body 0.6s)와 동기화 */
}
/* 푸터 진입으로 body 배경이 검정으로 반전될 때 텍스트도 흰색으로 반전 */
body.is-bg-dark .recognition-item__title,
body.is-bg-dark .recognition-item__brand,
body.is-bg-dark .pagination a.active {
  color: var(--color-white);
}

.pagination {
  margin-top: 4.375vw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.667vw; /* 32 */
}

.pagination a {
  font-size: 1.458vw; /* 28 */
  color: var(--color-grey-300);
  transition: color 0.6s; /* footer 진입 배경 페이드와 동기화 */
}

.pagination a.active {
  color: var(--color-black);
  font-weight: 500;
}

.pagination .prev, .pagination .next {
  font-size: 0;
  width: 2.604vw;
  height: 2.604vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-grey-100);
  border-radius: 50%;
}

.pagination .prev img,
.pagination .next img {
  width: 1.771vw;
  height: 0.938vw;
}

.pagination .prev {
  margin-right: 0.938vw;
}

.pagination .next {
  margin-left: 0.938vw;
}

@media all and (max-width: 640px) {
  .recognition-wrap {
    margin: 21.374vw 4.071vw 16.285vw 4.071vw;
    width: calc(100% - 8.142vw);
  }
  .recognition-key-visual {
    height: 53.435vw;
  }
  .recognition-typo {
    margin-top: 5.089vw;
  }
  .recognition-typo {
    margin-top: 5.089vw;
  }
  .recognition-typo h2 span {
    font-size: 7.125vw;
    line-height: 1.2;
  }
  .recognition-typo__mobile-break {
    display: block;
  }
  .recognition-typo__break--desktop {
    display: none;
  }
  .recognition-nav {
    margin-top: 10.178vw;
  }

  .recognition-nav .filter-tabs {
    gap: 3.562vw;
  }

  .recognition-nav .filter-tabs__link {
    font-size: 3.562vw;
  }

  .recognition-nav .recognition-nav__link {
    font-size: 3.562vw;
    gap: 2.036vw;
    align-items: center;
  }
  .recognition-nav .recognition-nav__link span {
    width: 5.089vw;
    height: 5.089vw;
  }
  .recognition-nav .recognition-nav__link span img {
    height: 3.562vw;
    width: 3.562vw;
  }

  .recognition-list {
    margin-top: 2.036vw;
  }

  .recognition-list__item {
    padding-block: 5.089vw;
  }

  .recognition-item {
    display: block;
  }

  .recognition-item__media {
    width: 100%;
    aspect-ratio: 362 / 248;
  }
  .recognition-item__body {
    margin-top: 4.071vw;
  }
  .recognition-item__label {
    font-size: 3.562vw;
  }
  .recognition-item__title {
    margin-top: 1.018vw;
    font-size: 7.125vw;
    /* 데스크탑의 ::after 바는 inline-block이 여러 줄로 감싸질 때 컨테이너 전체 폭을 차지해
       버려 밑줄이 실제 텍스트보다 넓게 나옴 — 모바일은 각 줄 폭을 그대로 따라가는
       네이티브 underline으로 대체 (아래 ::after display:none 규칙과 세트) */
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 0.509vw; /* 2 */
    text-underline-offset: 0.3vw;
    transition: text-decoration-color 0.35s ease;
  }
  .recognition-item__title::after {
    display: none;
  }
  .recognition-item:hover .recognition-item__title,
  .recognition-item:focus-visible .recognition-item__title {
    text-decoration-color: currentColor;
  }
  .recognition-item__brand {
    font-size: 4.071vw;
    margin-top: 0.509vw;
  }

  .pagination {
    margin-top: 5.216vw;
    gap: 2.036vw;
  }

  .pagination a {
    font-size: 3.562vw;
  }

  .pagination .prev, .pagination .next {
    width: 5.089vw;
    height: 5.089vw;
  }

  .pagination .prev img,
  .pagination .next img {
    height: 2.799vw;
    width: 1.399vw;
  }

  .pagination .prev {
    margin-right: 2.036vw;
  }

  .pagination .next {
    margin-left: 2.036vw;
  }
}