/* ============================
   MAIN — index.php 전용
   ============================ */

.page-MAIN {
  background-color: var(--color-black);
}

/* 인트로 스플래시 — ynldesign.com(구 사이트)과 동일 구성 */
.intro-video {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 999999;
  background-color: #000;
  opacity: 1;
  transition: opacity 0.4s ease;
}
.intro-video.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.intro-video video {
  max-width: 1000px;
  width: 100%;
}

/* Hero (S01) */
.hero {
  position: relative;
  width: 100%;
  height: 56.25vw; /* 1080 */
  min-height: 31.25vw; /* 600 */
  overflow: hidden;
}

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

.vimeo-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 비율 유지 (9 / 16 = 0.5625) */
  height: 0;
  overflow: hidden;
}

.vimeo-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ============================
   Manifesto (S02)
   ============================ */
.manifesto {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  padding: 0 11.4063vw; /* 219 */
  overflow: hidden;
}

.manifesto__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  text-decoration: none;
}

.manifesto__copy {
  margin: 0;
  font-size: 5.2083vw; /* 100 */
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--color-grey-500);
}

.manifesto__line {
  display: block;
  white-space: nowrap;
  line-height: 1.2;
}

.manifesto__text {
  display: inline-block;
  margin-right: 0.28em; /* 단어 사이 간격 — 인접 <br class="...break"> 토글 시 텍스트 공백 collapse 이슈 방지 위해 margin으로 처리 */
  background-image: linear-gradient(
    to right,
    var(--color-white) 40%,
    var(--color-grey-500) 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;
  line-height: 1;
}

.manifesto__mobile-break {
  display: none;
}

@media all and (max-width: 1200px) {
  .manifesto {
    height: auto;
    padding: 80px 24px;
  }
  .manifesto__copy {
    font-size: 32px;
  }
}

/* ============================
   Services (S03)
   ============================ */
.service {
  color: var(--color-white);
  /* 모바일 브라우저의 빠른 스크롤 방향 전환 시 발생하는 리페인트(잔상) 버그 완화 —
     명시적으로 GPU 레이어를 할당해 스크롤 위치와 다른 곳에 페인트된 채 남는 현상을 방지 */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.service__inner {
  padding: 6.25vw 2.6042vw; /* 120 50 */
}

.service__title {
  margin: 0 0 3.3333vw 0; /* 64 */
  font-size: 1.6667vw; /* 32 */
  font-weight: 500;
  letter-spacing: 0.02em;
}

.service__layout {
  display: grid;
  grid-template-columns: 41.3542vw 1fr; /* 794 + rest */
  gap: 4.1667vw; /* 80 */
  align-items: flex-start;
}

.service__visual {
  position: sticky;
  top: 7.8125vw; /* 150 */
  align-self: start;
  width: 41.3542vw; /* 794 */
  height: 30.9375vw; /* 594 */
  overflow: hidden;
  background: var(--color-grey-500);
}

.service__visual-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.03);
  transition:
    opacity 0.3s ease,
    transform 0.5s ease;
}
.service__visual-img.is-active {
  opacity: 1;
  transform: scale(1);
}

.service__list {
  margin: -6vw 0 0 0;
  padding: 0;
  list-style: none;
}

.service__item {
  display: block;
}

.service__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0;
  font-size: 5.2083vw; /* 100 */
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-grey-500);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.25s ease;
  overflow: hidden;
  opacity: 0.2;
}
/* 배경 반전 구간 가독성 — 비활성/활성/hover 모두 body.is-bg-dark/light 스코프로 통일 (전 페이지 공통 방식).
   hover·is-active가 body 스코프 규칙보다 우선하도록 동일 스코프에서 명시. */
/* 비활성 */
body.is-bg-light .service__link {
  color: var(--color-grey-500);
}
body.is-bg-dark .service__link {
  color: var(--color-white);
}
/* 비활성 hover */
body.is-bg-light .service__link:hover,
body.is-bg-dark .service__link:hover {
  color: var(--color-grey-300);
  opacity: 1;
}

.service__icon {
  display: inline-flex;
  width: 0;
  height: 2.8125vw; /* 54 */
  margin-right: 0;
  flex: 0 0 auto;
  overflow: hidden;
  transition:
    width 0.3s ease,
    margin-right 0.3s ease;
}
.service__icon svg {
  width: 2.8125vw; /* 54 */
  height: 2.8125vw;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.service__name {
  display: inline-block;
  white-space: nowrap;
}

/* 활성 — 강조: 라이트 배경에선 검정, 다크 배경에선 흰색 */
body.is-bg-light .service__item.is-active .service__link {
  color: var(--color-black);
  opacity: 1;
}
body.is-bg-dark .service__item.is-active .service__link {
  color: var(--color-white);
  opacity: 1;
}
.service__item.is-active .service__icon {
  width: 2.8125vw; /* 54 */
  margin-right: 0.7813vw; /* 15 — Figma layout_MCZ4WN gap */
}
.service__item.is-active .service__icon svg {
  transform: translateX(0);
}

/* 활성 hover — 활성 색 유지 (배경별 반전) */
body.is-bg-light .service__item.is-active .service__link:hover {
  color: var(--color-black);
}
body.is-bg-dark .service__item.is-active .service__link:hover {
  color: var(--color-white);
}

@media all and (max-width: 1200px) {
  .service__inner {
    padding: 80px 20px;
  }
  .service__title {
    font-size: 20px;
    margin-bottom: 24px;
  }
  .service__layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .service__visual {
    width: 100%;
    height: 70vw;
    position: relative;
    top: auto;
  }
  .service__link {
    font-size: 36px;
  }
  .service__icon {
    height: 24px;
  }
  .service__icon svg {
    width: 24px;
    height: 24px;
  }
  .service__item.is-active .service__icon {
    width: 24px;
    margin-right: 8px;
  }
}

/* ===== S04 Recent Work ===== */
.recent-work {
  display: flex;
  flex-direction: column;
  gap: 3.3333vw; /* 64 */
  padding: 6.25vw 0; /* 120 */
  color: var(--color-black);
}

.recent-work__head {
  padding: 0 2.6042vw; /* 0 50 */
}

.recent-work__title {
  margin: 0;
  font-size: 1.6667vw; /* 32 */
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--color-black);
}

.recent-work__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.3333vw; /* 64 */
}

.recent-work__row {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  gap: 1.4583vw; /* 28 */
  padding: 0 2.6042vw; /* 0 50 */
}

.recent-work__more {
  width: 94.7917vw; /* 1820 */
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
}

/* ----- Card ----- */
.work-card {
  display: flex;
  flex-direction: column;
  gap: 1.0417vw; /* 20 */
  text-decoration: none;
  color: inherit;
}

.work-card--full {
  width: 94.7917vw; /* 1820 */
}
.work-card--left {
  width: 62.7083vw; /* 1204 */
  align-self: flex-start; /* 호버 영역을 카드 폭으로 한정 */
  margin-left: 2.6042vw; /* 50 — 좌측 패딩과 동일 */
}
.work-card--half {
  width: 31.0417vw; /* 596 */
}

.work-card__media {
  margin: 0;
  overflow: hidden;
  background: var(--color-light-grey);
  clip-path: inset(10% 20% 0% 20% round 30px);
  transition: clip-path 1.4s cubic-bezier(0.33, 1, 0.68, 1);
  will-change: clip-path;
}
.work-card.is-revealed .work-card__media {
  clip-path: inset(0% 0% 0% 0% round 4px);
}
.work-card__media--full {
  width: 100%;
  height: 43.125vw; /* 828 */
}
.work-card__media--left {
  width: 100%;
  height: 43.125vw; /* 828 */
}
.work-card__media--half {
  width: 100%;
  height: 38.8542vw; /* 746 */
}

.work-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.1);
  transition: transform 1.4s cubic-bezier(0.33, 1, 0.68, 1);
  will-change: transform;
}
.work-card.is-revealed .work-card__img {
  transform: scale(1);
}

.work-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.4167vw; /* 8 (시안 미명시, 시각 보정) */
  opacity: 0;
  transform: translateY(1.5625vw); /* 30 */
  transition:
    opacity 1s ease 0.35s,
    transform 1s cubic-bezier(0.33, 1, 0.68, 1) 0.35s;
  will-change: opacity, transform;
}
.work-card.is-revealed .work-card__body {
  opacity: 1;
  transform: translateY(0);
}

.work-card__title {
  position: relative;
  display: inline-block;
  align-self: flex-start; /* flex column 안에서 텍스트 폭만큼 hug */
  margin: 0;
  font-size: 1.875vw; /* 36 */
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--color-black);
}

/* 푸터 메뉴와 동일 패턴: scaleX(0) → scaleX(1) 좌→우 그어짐 */
.work-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;
}

.work-card__desc {
  margin: 0;
  font-size: 1.25vw; /* 24 */
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--color-grey-400);
}

/* hover: 타이틀 밑줄만 (좌→우 그어짐) */
.work-card:hover .work-card__title::after,
.work-card:focus-visible .work-card__title::after {
  transform: scaleX(1);
}

/* ----- View All 버튼 ----- */
.btn--link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625vw; /* 12 */
  text-decoration: none;
}
.btn--link-arrow .btn__label {
  font-size: 1.25vw; /* 24 */
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--color-grey-400);
}
.btn--link-arrow .btn__arrow {
  display: inline-flex;
  width: 2.0833vw; /* 40 */
  height: 2.0833vw;
  background-color: var(--color-grey-100);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn--link-arrow .btn__arrow svg {
  width: 1.458vw;
  height: 1.458vw;
}
/* 배경 반전 구간 — 화살표 버튼 배경 어둡게 + 아이콘 흰색 (전 페이지 공통 is-bg-dark 방식) */
body.is-bg-dark .btn--link-arrow .btn__arrow {
  background-color: var(--color-grey-500);
}
body.is-bg-dark .btn--link-arrow .btn__arrow svg path {
  stroke: var(--color-white);
}
.btn--link-arrow:hover .btn__label {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media all and (max-width: 1200px) {
  .recent-work {
    gap: 40px;
    padding: 80px 0;
  }
  .recent-work__head {
    padding: 0 20px;
  }
  .recent-work__title {
    font-size: 20px;
  }
  .recent-work__list {
    gap: 40px;
  }
  .recent-work__row {
    flex-direction: column;
    gap: 40px;
    padding: 0 20px;
  }
  .recent-work__more {
    width: auto;
    padding: 0 20px;
  }

  .work-card {
    gap: 16px;
  }
  .work-card--full,
  .work-card--left {
    width: 100%;
    padding: 0 20px;
    margin-left: 0;
    align-self: stretch;
  }
  .work-card--half {
    width: 100%;
  }

  .work-card__media--full,
  .work-card__media--left,
  .work-card__media--half {
    width: 100%;
    height: 60vw;
  }

  .work-card__title {
    font-size: 22px;
  }
  .work-card__desc {
    font-size: 15px;
  }

  .btn--link-arrow .btn__label {
    font-size: 16px;
  }
  .btn--link-arrow .btn__arrow {
    width: 32px;
    height: 32px;
  }
}

/* ===== S05 Awards & Latest News (Recognition) ===== */
.recognition {
  display: flex;
  flex-direction: column;
  gap: 3.3333vw; /* 64 */
  padding: 6.25vw 0; /* 120 */
  color: var(--color-white);
}

.recognition__head {
  padding: 0 2.6042vw; /* 50 */
}

.recognition__title {
  margin: 0;
  font-size: 1.6667vw; /* 32 */
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--color-white);
}

/* 배경 전환 구간 — body.is-bg-dark/light 스코프로 텍스트 색 반전 (전 페이지 공통 방식).
   work-card 텍스트는 transform 조상(.work-card__body)으로 mix-blend-mode가 격리돼 깨지므로
   클래스 기반으로 처리. 배경 페이드(0.6s)와 동기되도록 color 전환. */
.recent-work__title,
.work-card__title,
.work-card__desc,
.recognition__title {
  transition: color 0.6s ease;
}
body.is-bg-dark .recent-work__title,
body.is-bg-dark .work-card__title,
body.is-bg-dark .recognition__title {
  color: var(--color-white);
}
body.is-bg-light .recent-work__title,
body.is-bg-light .work-card__title,
body.is-bg-light .recognition__title {
  color: var(--color-black);
}
/* 설명 텍스트는 회색 유지 — 라이트/다크 각각 가독 회색으로 반전 */
body.is-bg-light .work-card__desc {
  color: var(--color-grey-400);
}
body.is-bg-dark .work-card__desc {
  color: var(--color-grey-300);
}

.recognition__body {
  display: flex;
  flex-direction: column;
  gap: 8.3333vw; /* 160 */
}

.recognition__block {
  display: flex;
  flex-direction: column;
  gap: 6.25vw; /* 120 */
}

.recognition__intro {
  padding: 0 2.6042vw; /* 50 */
}

.recognition__headline {
  margin: 0;
  font-size: 5.2083vw; /* 100 */
  font-weight: 500;
  color: var(--color-white);
  line-height: 1.1;
}

.recognition__headline span {
  line-height: 1.1;
}

/* Manifesto와 동일한 색 채워지는 모션 — JS가 background-position 제어 */
.recognition__reveal {
  display: inline-block;
  margin-right: 0.28em; /* 단어 사이 간격 — 인접 <br class="...break"> 토글 시 텍스트 공백 collapse 이슈 방지 위해 margin으로 처리 */
  background-image: linear-gradient(
    to right,
    var(--color-white) 40%,
    var(--color-grey-500) 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__mobile-break {
  display: none;
}

.recognition__more {
  width: 94.7917vw; /* 1820 */
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
}

.btn--link-arrow--dark .btn__label {
  color: var(--color-grey-200);
}

/* ----- Award Card ----- */
.award-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 1.25vw; /* 24 */
}

/* studio-size.com/work/ 모션: opacity + translateY 페이드업 (1s, power1.inOut, 스태거) */
.award-card {
  display: flex;
  flex-direction: column;
  gap: 1.5625vw; /* 30 */
  width: 30.8333vw; /* 592 */
  color: inherit;
  text-decoration: none;
  opacity: 0;
  transform: translateY(20%);
  transition:
    opacity 1s cubic-bezier(0.4, 0, 0.2, 1) var(--reveal-delay, 0s),
    transform 1s cubic-bezier(0.4, 0, 0.2, 1) var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.award-card.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.award-card__media {
  position: relative;
  width: 100%;
  height: 35.4167vw; /* 680 */
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid var(--color-grey-400);
}

.award-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.award-card__body {
  display: flex;
  flex-direction: column;
}

.award-card__year {
  font-size: 1.25vw; /* 24 */
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-grey-100);
}

.award-card__title {
  position: relative;
  display: inline-block;
  align-self: flex-start;
  margin: 0;
  font-size: 1.4583vw; /* 28 */
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-white);
}

.award-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;
}
.award-card:hover .award-card__title::after,
.award-card:focus-visible .award-card__title::after {
  transform: scaleX(1);
}

/* ----- Press Card ----- */
.press-list {
  list-style: none;
  margin: 0;
  padding: 0 2.6042vw; /* 50 */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25vw; /* 24 */
}
/* grid item의 min-width: auto가 자식의 nowrap min-content를 셀까지 끌고 올라가
   ellipsis/언더라인 폭을 무력화함 → 0으로 끊어줌 */
.press-list > li {
  min-width: 0;
}

/* studio-size.com/work/ 모션: opacity + translateY 페이드업 (1s, power1.inOut, 스태거) */
.press-card {
  display: flex;
  flex-direction: column;
  gap: 1.5625vw; /* 30 */
  color: inherit;
  text-decoration: none;
  opacity: 0;
  transform: translateY(20%);
  transition:
    opacity 1s cubic-bezier(0.4, 0, 0.2, 1) var(--reveal-delay, 0s),
    transform 1s cubic-bezier(0.4, 0, 0.2, 1) var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.press-card.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.press-card__media {
  position: relative;
  width: 100%;
  height: 38.125vw; /* 732 */
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid var(--color-grey-400);
}

.press-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.press-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.625vw;
}

.press-card__title {
  position: relative;
  align-self: flex-start; /* 텍스트 폭만큼 hug */
  margin: 0;
  font-size: 1.4583vw; /* 28 */
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-white);
}

/* work-card / award-card와 동일 패턴: scaleX(0) → scaleX(1) 좌→우 그어짐 */
.press-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;
}
.press-card:hover .press-card__title::after,
.press-card:focus-visible .press-card__title::after {
  transform: scaleX(1);
}

.press-card__desc {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  font-size: 1.0417vw; /* 20 */
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-grey-300);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media all and (max-width: 1200px) {
  .recognition {
    padding: 80px 0;
    gap: 40px;
  }
  .recognition__head {
    padding: 0 20px;
  }
  .recognition__title {
    font-size: 20px;
  }
  .recognition__body {
    gap: 80px;
  }
  .recognition__block {
    gap: 48px;
  }
  .recognition__intro {
    padding: 0 20px;
  }
  .recognition__headline {
    font-size: 36px;
  }
  .recognition__more {
    width: auto;
    padding: 0 20px;
  }

  .award-list {
    flex-direction: column;
    padding: 0 20px;
    gap: 32px;
  }
  .award-card {
    width: 100%;
  }
  .award-card__media {
    height: 90vw;
    border-radius: 8px;
  }
  .award-card__year {
    font-size: 14px;
  }
  .award-card__title {
    font-size: 18px;
  }

  .press-list {
    grid-template-columns: 1fr;
    padding: 0 20px;
    gap: 40px;
  }
  .press-card__media {
    height: 80vw;
  }
  .press-card__title {
    font-size: 18px;
  }
  .press-card__desc {
    font-size: 14px;
  }
}

@media all and (max-width: 640px) {
  .hero {
    height: 100dvh;
  }
  .vimeo-container {
    height: 100%;
    padding-bottom: 0; /* 데스크톱의 16:9 비율 고정을 해제하고 히어로 전체 높이를 채움 */
  }
  .vimeo-container iframe {
    /* 모바일 전용 세로(11:16) 영상을 화면에 꽉 차게(cover) */
    top: 50%;
    left: 50%;
    width: 68.75dvh; /* 100dvh * 11/16 */
    height: 100dvh;
    min-width: 100%;
    min-height: 145.45vw; /* 100vw * 16/11 */
    transform: translate(-50%, -50%);
  }
  .vimeo-container video {
    /* <video>는 object-fit으로 간단하게 cover 처리 가능 */
    position: absolute;
    inset: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .manifesto {
    height: 100dvh;
  }
  .manifesto__copy {
    font-size: 9.415vw;
  }
  .manifesto__line {
    white-space: normal;
  }
  .manifesto__mobile-break {
    display: inline-block;
  }
  .service__layout {
    gap: 10.178vw;
  }
  .service__inner {
    padding: 16.285vw 4.071vw;
  }
  .service {
    /* 부모(.service)의 GPU 레이어 transform이 걸려 있으면 fixed 자식의 containing
       block이 뷰포트가 아닌 .service 자신이 되어(스펙상 transform ancestor는
       fixed의 기준이 됨) .service__visual이 화면에 고정되지 않고 섹션을 따라
       스크롤되어 버린다 — 모바일에서만 해제해 실제 뷰포트 기준 fixed로 동작시킴 */
    transform: none;
  }
  .service__visual {
    position: fixed;
    top: auto;
    left: auto;
    right: 4.071vw;
    bottom: 4.071vw;
    width: 60vw;
    height: auto;
    aspect-ratio: 4 / 3;
    z-index: 20;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    border-radius: 12px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* opacity로 디졸브 + visibility는 opacity 트랜지션 끝나는 시점에 맞춰 전환
       (visibility는 hidden으로 갈 때만 트랜지션 종료 시점에 값이 바뀜)
       → 다음 섹션 위에 겹쳐 보이기 전에 이미 투명해져 있어 잔상 없이 사라짐 */
    transition:
      opacity 0.4s ease,
      visibility 0.4s ease;
  }
  .service__visual.is-in-view {
    opacity: 1;
    visibility: visible;
  }
  .service__title {
    margin-bottom: 8.142vw;
    font-size: 3.562vw;
  }
  .service__list {
    order: 1;
    margin: 0;
  }
  .service__link {
    font-size: 10.178vw;
  }
  .service__item {
    height: 12vw;
  }
  .service__icon {
    display: none;
  }

  .recent-work {
    padding: 16.285vw 0;
    gap: 8.142vw;
  }
  .recent-work__list {
    gap: 7.125vw;
  }
  .work-card--full,
  .work-card--left {
    padding: 0 4.071vw;
  }
  .work-card {
    gap: 4.071vw;
  }
  .work-card__media--full,
  .work-card__media--left,
  .work-card__media--half {
    height: 90.585vw;
    border-radius: 0;
  }
  .work-card__body {
    gap: 0.509vw;
  }
  .work-card__title {
    font-size: 5.089vw;
  }
  .work-card__desc {
    font-size: 3.562vw;
  }
  .recognition__more,
  .recent-work__more {
    margin-right: 0;
    padding-inline: 0 4.071vw;
  }
  .btn--link-arrow {
    gap: 1.018vw;
  }
  .btn--link-arrow .btn__label {
    font-size: 3.562vw;
  }
  .btn--link-arrow .btn__arrow {
    width: 5.089vw;
    height: 5.089vw;
  }
  .btn--link-arrow .btn__arrow svg {
    width: 3.562vw;
    height: 3.562vw;
  }
  .recognition {
    padding-block: 16.285vw;
  }
  .recognition__head,
  .recognition__intro,
  .award-list {
    padding-inline: 4.071vw;
  }
  .recognition__title {
    font-size: 3.562vw;
  }
  .recognition__headline {
    font-size: 7.125vw;
  }
  .recognition__mobile-break {
    display: block;
  }
  .recognition__break--desktop {
    display: none;
  }
  .recognition__block {
    gap: 7.125vw;
  }
  .award-list {
    gap: 7.125vw;
  }
  .award-card {
    gap: 4.58vw;
  }
  .award-card__media {
    border-radius: 0;
    height: auto;
    aspect-ratio: 361 / 415; /* 모바일 전용 세로형 썸네일(361*415) 비율 */
  }
  .award-card__year {
    font-size: 3.562vw;
  }
  .award-card__title {
    font-size: 4.58vw;
    line-height: 1.2;
  }
  .press-list {
    padding-inline: 4.071vw;
    gap: 7.125vw;
  }
  .press-card {
    gap: 4.58vw;
  }
  .press-card__media {
    height: auto;
    aspect-ratio: 361 / 415; /* 모바일 전용 세로형 썸네일(361*415) 비율 */
    border-radius: 0;
  }
  .press-card__body {
    gap: 0.509vw;
  }
  .press-card__title {
    font-size: 4.58vw;
    line-height: 1.2;
  }
  .press-card__desc {
    font-size: 3.562vw;
  }
  .recognition__more {
    margin-right: 0;
  }
}