/* ===== K02 Detail — Recognition 개별 보도/수상 페이지 =====
   work-detail와 독립. 모든 스타일은 rd-* 자체 클래스로 자기완결 정의. */

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

/* ----- Container ----- */
.rd {
  display: flex;
  flex-direction: column;
}

/* ① 상단 Behance 스크린샷 (통이미지) — 풀폭 + 고정 헤더 클리어런스 */
.rd__shot {
  margin: 0;
  height: 51.615vw;
}
.rd__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ② 메타 영역 — 좌우 2단 */
.rd__info {
  display: flex;
  justify-content: space-between;
  padding-inline: 0;
  padding-block: 2.083vw 7.292vw;
  border-top: 1px solid var(--color-grey-200);
  margin-top: 4.167vw;
}
.rd__info-left {
  width: 26.0417vw; /* 500 */
  flex: none;
  display: flex;
  flex-direction: column;
}
.rd__category {
  display: block;
  font-size: 1.042vw; /* 20 */
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-grey-300);
  margin-bottom: 0.4167vw; /* 8 */
}
.rd__name {
  margin: 0 0 1.667vw; /* 32 */
  font-size: 2.917vw; /* 56 */
  font-weight: 500;
  line-height: 1.25;
  color: var(--color-black);
}
.rd__date {
  margin: 0;
  font-size: 1.563vw;
  font-weight: 400;
  line-height: 1.5;
}
.rd__live {
  margin-top: 1.667vw; /* 32 */
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.417vw; /* 8 */
  font-size: 1.042vw; /* 20 */
  color: var(--color-grey-400);
  text-decoration: underline;
  text-underline-offset: 0.3125em;
}
.rd__live-icon {
  width: 1.042vw; /* 20 */
  height: 1.042vw; /* 20 */
  opacity: 0.7;
}

/* ② 메타 우측 — 설명 단락 */
.rd__info-right {
  width: 51.5625vw; /* 990 */
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 2.083vw; /* 40 */
}
.rd__desc {
  margin: 0;
  font-size: 1.25vw; /* 24 */
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-grey-400);
}

/* ③ 어드민 에디터 영역 — 풀폭 이미지 세로 스택 */
.rd__editor {
  display: flex;
  flex-direction: column;
  gap: 1.0417vw; /* 20 */
}
.rd__editor figure {
  margin: 0;
}
.rd__editor figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* ----- Fade-in on scroll ----- */
.rd-fade {
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity;
}
.rd-fade.is-in {
  opacity: 1;
}

/* ----- 푸터 진입(body.is-bg-dark) 시 글자색 반전 ----- */
body.is-bg-dark .rd__category,
body.is-bg-dark .rd__name,
body.is-bg-dark .rd__date,
body.is-bg-dark .rd__live,
body.is-bg-dark .rd__desc,
body.is-bg-dark .rd__related-title,
body.is-bg-dark .rd__card-title,
body.is-bg-dark .rd__card-tags,
body.is-bg-dark .rd__card-tag::after {
  color: var(--color-white);
}

/* ④ View All Work — 관련작업 2단 */
.rd__related {
  padding-top: 2.083vw;
  border-top: 1px solid var(--color-grey-300);
  margin-top: 2.083vw;
  display: flex;
  gap: 15.104vw;
  justify-content: space-between;
}
.rd__related-title {
  margin: 0;
  font-size: 2.083vw; /* 40 */
  font-weight: 500;
  line-height: 1.25;
  color: var(--color-black);
}
.rd__related-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 1.25vw; /* 24 */
  width: 62.5vw;
}
/* 이전/이후 중 하나만 있어도 위치가 밀리지 않도록 컬럼 고정 */
.rd__related-item--prev {
  grid-column: 1;
}
.rd__related-item--next {
  grid-column: 2;
}

/* 관련작업 카드 */
.rd__card {
  display: flex;
  flex-direction: column;
  gap: 1.0417vw; /* 20 — 이미지 ↔ 타이틀 */
  color: inherit;
  text-decoration: none;
}
.rd__card-media {
  margin: 0;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--color-light-grey);
}
.rd__card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rd__card-body {
  display: flex;
  flex-direction: column;
  gap: 0.4167vw; /* 8 */
}
.rd__card-title {
  position: relative;
  display: inline-block;
  align-self: flex-start;
  margin: 0;
  font-size: 1.5625vw; /* 30 (시안 미확정) */
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--color-black);
}
/* 호버 시 타이틀 밑줄 그어짐 */
.rd__card-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s ease;
}
.rd__card:hover .rd__card-title::after,
.rd__card:focus-visible .rd__card-title::after {
  transform: scaleX(1);
}
.rd__card-tags {
  margin: 0;
  font-size: 1.0417vw; /* 20 */
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-grey-400);
}
.rd__card-tag::after {
  content: " / ";
  color: var(--color-grey-400);
}

/* ----- Mobile ----- */
@media all and (max-width: 1200px) {
  .rd__info {
    flex-direction: column;
    row-gap: 40px;
    padding: 60px 0;
  }
  .rd__info-left,
  .rd__info-right {
    width: 100%;
  }
  .rd__category {
    font-size: 13px;
  }
  .rd__name {
    font-size: 24px;
    margin-bottom: 16px;
  }
  .rd__date {
    font-size: 13px;
  }
  .rd__live {
    font-size: 13px;
  }
  .rd__live-icon {
    width: 10px;
    height: 10px;
  }
  .rd__desc {
    font-size: 16px;
  }
  .rd__editor figure {
    padding: 0;
  }
  .rd__card-title {
    font-size: 20px;
  }
  .rd__card-tags {
    font-size: 14px;
  }
}

@media all and (max-width: 640px) {
  .rd__info {
    padding-block: 10.178vw;
  }
  .rd__category {
    font-size: 3.308vw;
  }
  .rd__name {
    font-size: 6.107vw;
    margin-bottom: 8.142vw;
  }
  .rd__date {
    font-size: 4.58vw;
  }
  .rd__desc {
    font-size: 4.071vw;
  }
  .rd__live {
    font-size: 3.562vw;
    margin-top: 8.142vw;
  }
  .rd__live svg {
    width: 3.308vw;
    height: 3.308vw;
  }
  .rd-wrap {
    margin: 16.285vw 4.071vw;
    width: calc(100% - 8.143vw);
  }
  .rd__related {
    flex-direction: column;
    align-items: stretch;
    gap: 4.071vw;
    padding: 0;
    margin-top: 5.089vw;
    padding-top: 4.071vw;
  }
  .rd__related-title {
    font-size: 5.089vw;
  }
  .rd__related-grid {
    width: 100%;
    grid-template-columns: 1fr;
    row-gap: 7.125vw;
  }
  .rd__related-item--prev,
  .rd__related-item--next {
    grid-column: auto;
  }
  .rd__card {
    gap: 2.036vw;
  }
  .rd__card-title {
    font-size: 5.089vw;
  }
  .rd__card-media {
    aspect-ratio: 4 / 3;
  }
  .rd__card-tags {
    font-size: 14px;
    color: var(--color-grey-300);
  }
}