/* ===== K01 Detail — Work 개별 프로젝트 페이지 ===== */

/* 흰 배경 — 헤더는 mix-blend로 자동 검정 처리 */
body.page-K01 {
  background: var(--color-white);
  color: var(--color-black);
}

/* ----- Container ----- */
.wd {
  display: flex;
  flex-direction: column;
  padding-bottom: 6.25vw; /* 120 */
}

/* 페이지 좌우 패딩(섹션별 적용) */
:where(.wd__title-section, .wd__hero, .wd__info, .wd__related) {
  padding-left: 2.6042vw; /* 50 */
  padding-right: 2.6042vw;
}

/* ① 타이틀 + 서브타이틀 */
.wd__title-section {
  padding-top: 8.0729vw; /* 155 */
  padding-bottom: 1.25vw; /* 24 — 서브타이틀 ↔ 다음 이미지 간격 */
}
.wd__title {
  margin: 0;
  font-size: 2.917vw;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-black);
}
.wd__subtitle {
  margin: 0;
  font-size: 2.917vw;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-black);
  margin-top: 0.417vw;
}

/* ② 히어로 이미지 */
.wd__hero {
  margin: 0;
}
.wd__hero img {
  display: block;
  width: 100%;
  height: auto;
}

/* ③ 정보 + 아코디언 */
.wd__info {
  padding-top: 4.1667vw; /* 80 */
  padding-bottom: 4.1667vw; /* 80 */
  display: flex;
  justify-content: space-between;
}

.wd__info-left {
  width: 26.0417vw; /* 500 */
  flex: none;
  display: flex;
  flex-direction: column;
}
.wd__category {
  display: block;
  font-size: 1.042vw; /* 20 */
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-grey-400);
  margin-bottom: 0.4167vw; /* 8 */
}
.wd__name {
  margin: 0 0 2.6042vw; /* 0 0 50 */
  font-size: 2.917vw; /* 56 */
  font-weight: 500;
  line-height: 1.25;
  color: var(--color-black);
}

.wd__services {
  margin: 0;
}
.wd__label {
  font-size: 1.042vw; /* 20 */
  font-weight: 400;
  color: var(--color-grey-400);
  margin-bottom: 0.4167vw; /* 8 */
}
.wd__services-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.wd__services-list li {
  font-size: 1.667vw;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--color-black);
}

.wd__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;
}
.wd__live-icon {
  width: 1.042vw; /* 20 */
  height: 1.042vw; /* 20 */
  opacity: 0.7;
}

/* ----- Accordion (Overview / Challenges / Solution) ----- */
.wd__info-right {
  width: 51.5625vw; /* 990 */
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 2.083vw; /* 40 */
}

.wd-acc__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.0417vw;
  background: none;
  border: 0;
  font-size: 1.667vw; /* 32 */
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--color-black);
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid var(--color-grey-200);
  padding-block: 0.833vw;
  margin-bottom: 1.042vw;
}

.wd-acc__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6042vw; /* 50 — 원형 배경 */
  height: 2.6042vw;
  border-radius: 50%;
  background: var(--color-grey-100);
  flex: 0 0 auto;
  color: var(--color-black);
  background-image: url("/assets/images/sub/ico_plus.svg");
  background-repeat: no-repeat;
  background-size: 1.458vw;
  background-position: center;
}
.wd-acc.is-open .wd-acc__icon {
  background-image: url("/assets/images/sub/ico_minus.svg");
}

.wd-acc__body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.wd-acc__body-inner p {
  margin: 0;
  font-size: 1.25vw; /* 24 */
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-grey-500);
}

.wd__lang {
  align-self: flex-start;
  color: var(--color-grey-400);
  margin-top: -1.667vw;
}

/* ----- 어드민 에디터 영역 ----- */
.wd__editor {
  display: flex;
  flex-direction: column;
  gap: 1.0417vw; /* 20 */
}
.wd__editor figure {
  margin: 0;
  /* 어드민 영역 이미지는 풀-블리드 (좌우 패딩 없음) */
}
.wd__editor figure img {
  display: block;
  width: 100%;
  height: auto;
}

.wd__editor .con-wrap {
  clear: both;
  display: flex;
  gap: 5%;
  margin-top: 50px;
  margin-bottom: 30px;
}

.wd__editor .tt {
  float: left;
  width: 30%;
  font-size: 1.5em;
  font-weight: 500;
  text-align: center;
}
.wd__editor .con {
  float: right;
  width: 70%;
  font-size: 1.2em;
  font-weight: 400;
}

/* ----- Fade-in-up on scroll (image sections) ----- */
.wd-fade {
  opacity: 0;
  transform: translateY(1.25vw); /* 24px */
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.wd-fade.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* ----- 본문 콘텐츠 이미지 스크롤 인터렉션 (aruliden.com/project/whoop 참고) -----
   히어로 이미지(.wd__hero)는 제외 — .wd__editor 안의 이미지에만 적용.
   이미지 로드 완료(빠른 300ms opacity)와 뷰포트 진입(느린 1.75s fade 키프레임)이
   서로 다른 타이밍으로 겹치면서 자연스러운 깜빡임 효과를 만든다. */
.wd-body-img {
  opacity: 0;
  transform: translate(0, 0); /* 이미지 간 간격(19.6px)이 등장 전후 동일하도록 세로 이동 제거 (기존 25px) */
  transition: all 0.6s ease-out;
}
.wd-body-img.is-loaded {
  opacity: 1;
  transition: opacity 300ms;
}
.wd-body-img.is-in {
  opacity: 1;
  transform: translate(0, 0);
  animation-name: wd-body-img-fade;
  animation-duration: 1.75s;
  animation-timing-function: ease-in;
}
@keyframes wd-body-img-fade {
  from {
    visibility: hidden;
    opacity: 0;
  }
  to {
    visibility: visible;
    opacity: 1;
  }
}

/* ----- 푸터 진입(body.is-bg-dark) 시 글자색 반전 ----- */
body.is-bg-dark .wd__title,
body.is-bg-dark .wd__subtitle,
body.is-bg-dark .wd__category,
body.is-bg-dark .wd__name,
body.is-bg-dark .wd__services-list li,
body.is-bg-dark .wd-acc__head,
body.is-bg-dark .wd-acc__body-inner p,
body.is-bg-dark .wd__lang,
body.is-bg-dark .wd__live,
body.is-bg-dark .wd__related-title,
body.is-bg-dark .wd__card-title,
body.is-bg-dark .wd__card-tags,
body.is-bg-dark .wd__card-tag::after {
  color: var(--color-white);
}

/* ④ View All Work — 관련작업 2단 */
.wd__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;
}
.wd__related-title {
  margin: 0;
  font-size: 2.083vw; /* 40 */
  font-weight: 500;
  line-height: 1.25;
  color: var(--color-black);
}
.wd__related-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 1.25vw; /* 24 */
  width: 62.5vw;
}
/* 이전/이후 중 하나만 있어도 위치가 밀리지 않도록 컬럼 고정 —
   이전 없음(첫 게시물) → 왼쪽 빈 칸, 이후 없음(마지막 게시물) → 오른쪽 빈 칸 */
.wd__related-item--prev {
  grid-column: 1;
}
.wd__related-item--next {
  grid-column: 2;
}

/* 관련작업 카드 */
.wd__card {
  display: flex;
  flex-direction: column;
  gap: 1.0417vw; /* 20 — 이미지 ↔ 타이틀 */
  color: inherit;
  text-decoration: none;
}
.wd__card-media {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--color-light-grey);
}
.wd__card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wd__card-body {
  display: flex;
  flex-direction: column;
  gap: 0.4167vw; /* 8 */
}
.wd__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);
}
/* 호버 시 타이틀 밑줄 그어짐 */
.wd__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;
}
.wd__card:hover .wd__card-title::after,
.wd__card:focus-visible .wd__card-title::after {
  transform: scaleX(1);
}
.wd__card-tags {
  margin: 0;
  font-size: 1.0417vw; /* 20 */
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-grey-400);
}

/* ----- Mobile ----- */
@media all and (max-width: 1200px) {
  :where(.wd__title-section, .wd__hero, .wd__info, .wd__related) {
    padding-left: 20px;
    padding-right: 20px;
  }
  .wd__title-section {
    padding-top: 100px;
  }
  .wd__title,
  .wd__subtitle {
    font-size: 22px;
  }

  .wd__info {
    grid-template-columns: 1fr;
    row-gap: 40px;
    padding: 60px 20px;
  }
  .wd__category {
    font-size: 13px;
  }
  .wd__name {
    font-size: 24px;
    margin-bottom: 32px;
  }
  .wd__label {
    font-size: 13px;
  }
  .wd__services-list li {
    font-size: 16px;
  }
  .wd__live {
    font-size: 13px;
  }
  .wd__live-icon {
    width: 10px;
    height: 10px;
  }

  .wd-acc__head {
    font-size: 18px;
    padding: 20px 0;
  }
  .wd-acc__icon {
    width: 18px;
    height: 18px;
  }
  .wd-acc__body-inner p {
    font-size: 14px;
  }

  .wd__editor figure {
    padding: 0;
  }

  .wd__card-title {
    font-size: 20px;
  }
  .wd__card-tags {
    font-size: 14px;
  }
}

@media all and (max-width: 640px) {
  .wd__title-section {
    padding-top: 16.285vw;
    padding-inline: 4.071vw;
    padding-bottom: 5.089vw;
  }
  .wd__title,
  .wd__subtitle {
    font-size: 5.089vw;
  }
  :where(.wd__title-section, .wd__hero, .wd__info) {
    padding: 0;
  }
  .wd__hero {
    height: 54.453vw;
  }
  .wd__hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .wd__info {
    padding: 10.178vw 4.071vw 10.178vw 4.071vw; /* 40 16 40 16 */
    display: block;
  }
  .wd__info-left {
    width: 100%;
  }
  .wd__info-right {
    width: 100%;
  }
  .wd__category {
    font-size: 3.562vw;
    margin-bottom: 0;
  }
  .wd__name {
    font-size: 6.107vw;
    margin-bottom: 5.089vw;
  }
  .wd__label {
    font-size: 3.562vw;
    margin-bottom: 1.018vw;
  }
  .wd__services-list li {
    font-size: 4.58vw;
  }
  .wd__live {
    margin-top: 5.089vw;
    font-size: 3.562vw;
    gap: 1.018vw;
  }
  .wd__live svg {
    width: 3.053vw;
    height: 3.053vw;
  }
  .wd__lang {
    order: 1;
  }
  .wd-acc {
    order: 2;
  }
  .wd__info-right {
    margin-top: 10.178vw;
    gap: 5.089vw; /* 20 — 데스크탑 2.083vw(40px) 그대로 물려받으면 모바일 실측 8px로 붙어보임 */
  }
  .wd-acc__head {
    padding-block: 2.799vw;
    font-size: 5.089vw;
    margin-bottom: 0;
  }
  .wd-acc__icon {
    width: 5.089vw;
    height: 5.089vw;
    background-size: 3.308vw;
  }
  .wd-acc__body-inner {
    margin-block: 5.089vw 10.178vw;
  }
  .wd-acc__body-inner p {
    font-size: 4.071vw;
  }

  .wd__related {
    flex-direction: column;
    align-items: stretch;
    gap: 4.071vw;
    padding: 0;
    margin-top: 5.089vw;
    padding-top: 4.071vw;
    margin-inline: 4.071vw;
    width: calc(100% - 8.143vw);
  }
  .wd__related-title {
    font-size: 5.089vw;
  }
  .wd__related-grid {
    width: 100%;
    grid-template-columns: 1fr;
    row-gap: 7.125vw;
  }
  .wd__related-item--prev,
  .wd__related-item--next {
    grid-column: auto; /* 모바일은 1열이라 PC용 고정 배치 해제 */
  }
  .wd__card {
    gap: 2.036vw;
  }
  .wd__card-title {
    font-size: 5.089vw;
  }
  .wd__card-media {
    aspect-ratio: 4 / 3;
  }
}