/* ===== K04 About — 스튜디오 소개 =====
   독립 ab-* 클래스. 배경은 body가 담당(메인/approach 패턴), 블록은 텍스트 색만.
   1920 시안 기준 vw 환산 (px/1920*100). 치수는 캡처 추정 — Figma 복구 후 보정. */

body.page-K04 {
  background: var(--color-black);
  color: var(--color-white);
}
.ab--dark {
  color: var(--color-white);
}
.ab--light {
  color: var(--color-black);
}

/* 스크롤 텍스트-fill 리빌 (다크용 white→grey) — JS가 background-position 제어 */
.ab-typo__reveal {
  display: inline-block;
  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;
}

/* ① Hero — 헤드라인(상단 좌측) + V 비주얼(우측) + 본문(우측) */
.ab-hero {
  position: relative;
  overflow: hidden;
  height: 69.167vw; /* 1328 */
  padding-inline: 2.604vw; /* 50 */
}
.ab-hero__visual {
  margin-top: 4.167vw; /* 80 */
  width: 100%;
  margin-inline: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}
.ab-hero__inner {
  position: absolute;
  top: 32.917vw; /* 632 */
  width: calc(100% - 2.604vw * 2);
}
.ab-hero__title {
  font-size: 5.208vw; /* 100 */
  font-weight: 500;
  line-height: 1;
}
.ab-hero__title span {
  line-height: 1;
}
.ab-hero__title [data-lang="ko"] {
  font-size: 4.427vw; /* 85 */
}
.ab-hero__desc {
  width: 52.083vw; /* 1000 */
  margin-top: 5.208vw; /* 100 */
  margin-left: auto;
  font-size: 1.667vw; /* 32 */
  line-height: 1.5;
  color: var(--color-grey-200);
}
.ab-hero__desc img {
  display: inline-block;
  width: 3.802vw;
  height: 1.194vw;
  opacity: 0.8;
}
.ab-hero__desc[data-lang="ko"] {
  font-size: 1.563vw; /* 30 */
}
/* 국문 히어로 행간 — PC 전용 (모바일/영문 영향 없음) */
@media all and (min-width: 641px) {
  .ab-hero__title [data-lang="ko"] {
    line-height: 1.35; /* 135% */
  }
  .ab-hero__desc[data-lang="ko"] {
    line-height: 1.5; /* 150% */
  }
}
.ab-hero__lang-button {
  margin-top: 0.417vw;
  margin-left: auto;
  margin-right: 5.677vw; /* 109: 본문 설명 텍스트 우측 가장자리에 맞춤 */
  display: block;
}

/* ② Product */
.ab-product {
  margin: 0;
}
.ab-product__img {
  display: block;
  width: 100%;
  height: 56.25vw; /* 1080 */
  object-fit: cover;
}
/* main.css의 .vimeo-container 기본값(padding-bottom 16:9 트릭)을 덮어써서
   기존 .ab-product__img 이미지와 동일한 고정 높이로 표시 */
.ab-product .vimeo-container {
  height: 56.25vw; /* 1080 */
  padding-bottom: 0;
}

/* ③ Founder */
.ab-founder {
  margin-top: 6.25vw; /* 120 */
  padding-inline: 2.6042vw; /* 50 */
  padding-bottom: 4.167vw; /* 80 */
}
.ab-founder__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 1.042vw;
  border-bottom: 1px solid var(--color-grey-400);
  margin-bottom: 2.083vw;
}
.ab-founder__label {
  font-size: 1.667vw;
}
.ab-founder__inner {
  display: flex;
  gap: 4.167vw; /* 80 */
}
.ab-founder__portrait {
  width: 33.021vw; /* 634 */
  height: 47.708vw; /* 916 */
  display: block;
  margin: 0;
}
.ab-founder__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ab-founder__body {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.ab-founder__title {
  margin: 0 0 2.083vw; /* 40 */
  font-size: 3.75vw; /* 72 */
  font-weight: 500;
  line-height: 1;
}
.ab-founder__title span {
  line-height: 1.1;
}
@media all and (min-width: 641px) {
  .ab-founder__title [data-lang="ko"] {
    font-size: 3.385vw; /* 65 */
    line-height: 1.4; /* 140% */
  }
}
.ab-founder__text {
  margin-top: auto;
}
.ab-founder__text p {
  margin-bottom: 0.4167vw; /* 8 */
  font-size: 1.458vw; /* 28 */
  line-height: 1.6;
  color: var(--color-grey-100);
}
.ab-founder__text p:last-child {
  margin-bottom: 0;
}
@media all and (min-width: 641px) {
  .ab-founder__text p[data-lang="ko"] {
    font-size: 1.302vw; /* 25 */
    line-height: 1.6; /* 160% */
  }
}
.ab-founder__text p[data-lang="en"] {
  line-height: 1.4;
}
.ab-founder__sign {
  margin-top: 2.083vw; /* 40 */
  font-size: 1.667vw; /* 32 */
  line-height: 1;
  transform: translateY(0.3vw);
}
.ab-founder__sign span {
  display: inline-block;
  margin-left: 2.083vw; /* 40 */
}
/* 영문 본문이 보일 때만 서명 줄 위쪽 여백을 다르게 (국문은 기존 2.083vw 유지) — 데스크탑 전용 */
@media all and (min-width: 641px) {
  .ab-founder__text:has(p[data-lang="en"]:not([hidden])) + .ab-founder__sign {
    margin-top: 1.053vw;
  }
}

/* ④ Our Client */
.ab-client {
  margin-top: 6.25vw; /* 120 */
}
.ab-client__head {
  padding-inline: 2.6042vw; /* 50 */
}
.ab-client__label {
  font-size: 1.667vw; /* 32 */
  padding-block: 1.042vw; /* 20 */
  border-bottom: 1px solid var(--color-grey-400);
}
.ab-client__title {
  margin-top: 2.083vw; /* 40 */
  font-size: 4.167vw; /* 80 */
  line-height: 1;
}
.ab-client__desc {
  width: 52.083vw; /* 1000 */
  margin-top: 5.208vw; /* 100 */
  font-size: 1.667vw; /* 32 */
  line-height: 1.5;
  color: var(--color-grey-200); /* #CBC7C3 */
  margin-left: auto;
}
@media all and (min-width: 641px) {
  .ab-client__title [data-lang="ko"] {
    font-size: 3.385vw; /* 65 */
    line-height: 1.4; /* 140% */
  }
  .ab-client__desc [data-lang="ko"] {
    font-size: 1.302vw; /* 25 */
    line-height: 1.6; /* 160% */
  }
}
/* Our Client — PC 6열×8행(48개) 단위로 페이지 분할, 이전/다음 클릭 시 페이드 전환.
   페이지 청크는 assets/js/modules/about.js의 initClientPager()가 뷰포트별로 재구성. */
.ab-client__pages {
  position: relative;
  margin-top: 6.25vw; /* 120 */
  margin-bottom: 4.167vw; /* 80 */
  display: grid;
}
.ab-client__nav {
  position: absolute;
  bottom: calc(100% + 2.1875vw); /* 42 — 그리드 상단과의 간격, 시안 실측 */
  right: 2.6042vw; /* 50 */
  display: flex;
  gap: 1.094vw; /* 21, 시안 실측 */
}
.ab-client__page {
  grid-area: 1 / 1;
  /* 비활성 페이지는 position:absolute로 그리드 흐름에서 제외해야 함 —
     그대로 두면 항목이 적은 페이지도 항목이 꽉 찬 다른 페이지의 높이에 맞춰
     트랙이 늘어나 하단에 빈 공간이 생김 (48개 미만일 때 레이아웃 깨지는 원인) */
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-content: start;
  gap: 2.083vw; /* 40 */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.ab-client__page.is-active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}
.ab-client__item {
  height: 5vw; /* 96 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.ab-client__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (prefers-reduced-motion: reduce) {
  .ab-client__page {
    transition: none;
  }
}

/* ⑤ Feedback */
.ab-feedback {
  padding: 6.25vw 2.604vw; /* 120 50 */
}
.ab-feedback__label {
  font-size: 1.667vw; /* 32 */
  margin-bottom: 2.083vw; /* 40 */
  padding-block: 1.042vw; /* 20 */
  border-bottom: 1px solid var(--color-grey-400);
}
.ab-feedback__slider {
  position: relative;
  overflow: hidden;
}
.ab-feedback__track {
  display: flex;
  will-change: transform;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.ab-feedback__slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  gap: 3.333vw; /* 64 */
}
.ab-feedback__media {
  margin: 0;
  width: 31.354vw; /* 602 */
  height: 38.698vw; /* 743 */
}
.ab-feedback__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ab-feedback__content {
  flex: 1;
  padding-bottom: 0.625vw; /* 12 */
}
.ab-feedback__quote {
  margin: 0;
  font-size: 2.917vw; /* 56 */
  line-height: 1.35;
}
.ab-feedback__caption {
  margin-top: 1.25vw; /* 24 */
  font-size: 1.25vw; /* 24 */
  line-height: 1.5;
  color: var(--color-grey-300);
}
.ab-feedback__client {
  margin: 2.083vw 0 0; /* 40 */
  display: flex;
  gap: 1.042vw; /* 20 */
  font-size: 1.25vw; /* 24 */
  align-items: center;
}
.ab-feedback__client img {
  height: 3.021vw; /* 58 */
}
.ab-feedback__client-name {
  height: 1.25vw; /* 24 — 클라이언트명 로고 이미지 */
  width: auto;
  object-fit: contain;
  align-self: center;
}
.ab-feedback__client-role {
  color: var(--color-white);
}
.ab-feedback__nav {
  position: absolute;
  top: 0;
  left: 34.688vw; /* 666 */
  display: flex;
  gap: 0.625vw; /* 12 */
}
.ab-client__arrow,
.ab-feedback__arrow {
  width: 3.125vw; /* 60 */
  height: 3.125vw; /* 60 */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-grey-500);
  cursor: pointer;
  transition: opacity 0.25s ease;
}
.ab-client__arrow:disabled,
.ab-feedback__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}
.ab-client__arrow svg,
.ab-feedback__arrow svg {
  width: 0.625vw; /* 12 */
  height: 1.25vw; /* 24 */
}

/* ⑥ Awards */
.ab-awards {
  padding: 6.25vw 2.6042vw; /* 120 50 */
}
.ab-awards__label {
  margin: 0 0 1.563vw; /* 30 */
  font-size: 1.0417vw; /* 20 */
  color: var(--color-grey-400);
}
.ab-awards__head {
  gap: 2.083vw; /* 40 */
  padding: 1.563vw 0; /* 30 */
}
.ab-awards__badge {
  width: 2.604vw; /* 50 */
  height: 2.604vw;
  flex: none;
}
.ab-awards__badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ab-awards__count {
  width: 3.333vw; /* 64 */
  flex: none;
  font-size: 1.667vw; /* 32 */
  font-weight: 600;
}
.ab-awards__name {
  flex: 1;
  font-size: 1.25vw; /* 24 */
  font-weight: 500;
}
.ab-awards__detail {
  margin: 0;
  padding: 0 0 1.563vw 8.073vw; /* 좌측 들여쓰기 — name 컬럼 정렬 */
  list-style: none;
}
.ab-awards__detail-row {
  display: flex;
  justify-content: space-between;
  gap: 2.083vw;
  padding: 0.833vw 0; /* 16 */
  font-size: 1.0417vw; /* 20 */
  border-top: 1px solid var(--color-grey-100);
}
.ab-awards__project {
  color: var(--color-black);
}
.ab-awards__year {
  flex: none;
  color: var(--color-grey-300);
}

/* ⑦ Join us */
.ab-join {
  padding: 0 2.6042vw; /* 0 50 */
}
.ab-join__label {
  padding-block: 1.042vw; /* 20 */
  margin-bottom: 2.083vw; /* 40 */
  font-size: 1.667vw; /* 32 */
  font-weight: 500;
  border-bottom: 1px solid var(--color-grey-400);
}
.ab-join__media {
  width: 100%;
  margin: 0 0 2.083vw; /* 40 */
}
.ab-join__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ab-join__title {
  font-size: 4.167vw; /* 80 */
  font-weight: 500;
  line-height: 1.15;
}
@media all and (min-width: 641px) {
  .ab-join__title [data-lang="ko"] {
    font-size: 3.385vw; /* 65 */
    line-height: 1.4; /* 140% */
  }
}
.ab-join__seg {
  display: inline-block;
  margin-right: 0.28em;
}
.ab-join__mobile-break {
  display: none;
}
.ab-join__desc {
  width: 55.052vw;
  margin-top: 2.604vw; /* 50 */
  font-size: 1.667vw; /* 32 */
  line-height: 1.5;
  color: var(--color-grey-400);
  margin-left: auto;
  padding-bottom: 6.25vw; /* 120 */
}
@media all and (min-width: 641px) {
  .ab-join__desc [data-lang="ko"] {
    font-size: 1.302vw; /* 25 */
    line-height: 1.6; /* 160% */
  }
}
.ab-join__mail {
  color: var(--color-key);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  margin-top: 0.417vw; /* 8 */
  display: flex;
  align-items: flex-start;
  gap: 0.625vw;
  font-size: 1.25vw;
}
.ab-join__mail svg {
  width: 0.677vw;
  height: 0.677vw;
  display: inline-block;
  transform: translateY(0.35em);
  object-fit: cover;
}
.ab-join__list {
  border-top: 1px solid var(--color-grey-400);
}
.ab-join__list li:not(:last-child) {
  border-bottom: 1px solid var(--color-grey-400);
}
.ab-join__list li a {
  display: block;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.667vw; /* 32 */
}

/* 배경 전환 구간 — body.is-bg-dark/light 스코프로 순흑/순백 반전 (전 페이지 공통 방식).
   reveal 그라데이션 텍스트(.ab-typo__reveal)·회색·키컬러·이미지는 제외. */
.ab-client__title,
.ab-feedback__quote,
.ab-feedback__client-role,
.ab-founder__sign-name,
.ab-join__title,
/* 어워드 영역(.ab--light 상단, 전환 구간 포함) — 순흑 텍스트만. 회색 entries·아이콘/토글 이미지는 제외 */
.ab-awards .awards__heading,
.ab-awards .award__count,
.ab-awards .award__name,
.ab-join__role {
  transition: color 0.6s ease;
}
body.is-bg-dark .ab-client__title,
body.is-bg-dark .ab-feedback__quote,
body.is-bg-dark .ab-feedback__client-role,
body.is-bg-dark .ab-founder__sign-name,
body.is-bg-dark .ab-join__title,
body.is-bg-dark .ab-awards .awards__heading,
body.is-bg-dark .ab-awards .award__count,
body.is-bg-dark .ab-awards .award__name,
body.is-bg-dark .ab-join__role {
  color: var(--color-white);
}
body.is-bg-light .ab-client__title,
body.is-bg-light .ab-feedback__quote,
body.is-bg-light .ab-feedback__client-role,
body.is-bg-light .ab-founder__sign-name,
body.is-bg-light .ab-join__title,
body.is-bg-light .ab-awards .awards__heading,
body.is-bg-light .ab-awards .award__count,
body.is-bg-light .ab-awards .award__name,
body.is-bg-light .ab-join__role {
  color: var(--color-black);
}

@media all and (max-width: 640px) {
  .ab-hero {
    height: 184.224vw;
    padding-inline: 4.071vw;
  }
  .ab-hero__inner {
    top: 115.013vw;
  }
  .ab-hero__title {
    font-size: 7.125vw;
    line-height: 1.2;
  }
  .ab-hero__title [data-lang="ko"] {
    font-size: 7.125vw;
  }
  .ab-hero__visual {
    width: 300%;
    margin-left: -100%;
    margin-top: 0;
  }
  .ab-hero__desc {
    width: 100%;
    margin-top: 6.107vw;
    font-size: 4.071vw;
    min-height: 30.533vw; /* 5줄 * 4.071vw * line-height 1.5 — 언어 전환 시 ENG/KR 버튼 위치 고정 */
  }
  .ab-hero__desc br {
    display: none;
  }
  .ab-hero__desc[data-lang="ko"] {
    font-size: 3.562vw; /* 14 */
  }
  .ab-hero__lang-button {
    margin-left: 0;
    margin-right: 0;
    margin-top: 2.545vw;
    color: var(--color-grey-400);
  }

  .ab-product__img {
    height: 191.858vw;
  }
  /* main.css의 모바일 .vimeo-container(height:100%, 히어로 전용)를 덮어써서
     기존 .ab-product__img와 동일한 고정 높이 유지 */
  .ab-product .vimeo-container {
    height: 191.858vw;
    padding-bottom: 0;
  }
  .ab-founder {
    margin-top: 16.285vw;
    padding-inline: 4.071vw;
  }
  .ab-founder__head {
    padding-top: 0;
    padding-bottom: 2.036vw;
    margin-bottom: 5.089vw;
  }
  .ab-founder__label {
    font-size: 3.562vw;
  }
  .ab-founder__inner {
    display: block;
  }
  .ab-founder__portrait {
    width: 100%;
    height: 132.824vw;
  }
  .ab-founder__body {
    margin-top: 6.107vw;
    min-height: 133.333vw; /* 524 (Figma 실측, 393 기준) — 모바일에서도 .ab-founder__text의 margin-top:auto가 서명을 하단 고정할 수 있도록 확보 */
  }
  .ab-founder__title {
    font-size: 6.107vw;
    min-height: 26.871vw; /* 4줄(영문) * 6.107vw * line-height 1.1 — 국문 3줄과 시작 위치 동일하게 고정 */
  }
  .ab-founder__title [data-lang="ko"] {
    font-size: 5.089vw; /* 20 */
  }
  .ab-founder__text {
    margin-top: 5.089vw;
  }
  .ab-founder__text p {
    font-size: 3.562vw;
    margin-bottom: 0;
  }
  .ab-founder__text p[data-lang="ko"] {
    font-size: 3.053vw; /* 12 */
  }
  .ab-founder__sign {
    margin-top: 10.178vw; /* 40 */
    font-size: 3.817vw;
  }
  .ab-join__label,
  .ab-feedback__label,
  .ab-client__label {
    font-size: 3.562vw;
    padding-top: 0;
    padding-bottom: 2.036vw;
  }
  .ab-client__title {
    margin-top: 5.089vw;
    font-size: 6.107vw;
    line-height: 1.2;
    margin-bottom: 21.374vw;
  }
  .ab-client__desc {
    display: none;
  }
  .ab-feedback__label {
    margin-bottom: 5.089vw;
  }
  .ab-feedback__slide {
    display: block;
  }
  .ab-feedback__media {
    width: 100%;
    height: 113.232vw;
  }
  .ab-client__head {
    padding-inline: 4.071vw;
  }
  .ab-client__nav {
    bottom: calc(100% + 7.889vw); /* 31, 시안 실측 */
    left: 4.071vw;
    right: auto;
    gap: 2.29vw; /* 9, 시안 실측 */
  }
  .ab-client__page {
    grid-template-columns: repeat(4, 1fr);
    gap: 4.071vw;
  }
  .ab-client__item {
    height: 8.906vw; /* 35 — 데스크탑 5vw(96px) 그대로 물려받으면 모바일 실측 20px로 너무 작아짐 */
  }
  .ab-awards,
  .ab-feedback {
    padding: 16.285vw 4.071vw;
  }
  .ab-feedback__content {
    margin-top: 16.285vw;
  }
  .ab-feedback__quote {
    font-size: 5.089vw;
  }
  .ab-feedback__caption {
    margin-top: 4.071vw;
    font-size: 3.562vw;
  }
  .ab-feedback__client {
    font-size: 3.562vw;
    margin-top: 5.089vw;
  }
  .ab-feedback__client img {
    height: 5.598vw;
  }
  .ab-feedback__nav {
    left: 0;
    top: 118vw;
    gap: 2.036vw;
  }
  .ab-client__arrow,
  .ab-feedback__arrow {
    width: 6.107vw;
    height: 6.107vw;
  }
  .ab-client__arrow svg,
  .ab-feedback__arrow svg {
    width: 1.272vw;
    height: 2.545vw;
  }
  .ab-awards .awards {
    margin-top: 0;
  }
  .ab-join {
    padding-inline: 4.071vw;
  }
  .ab-join__media {
    aspect-ratio: 361 / 209;
  }
  .ab-join__label {
    margin-bottom: 5.089vw;
  }
  .ab-join__title {
    font-size: 6.107vw;
  }
  .ab-join__title [data-lang="ko"] {
    font-size: 5.089vw; /* 20 */
  }
  .ab-join__mobile-break {
    display: block;
  }
  .ab-join__desc {
    margin: 0;
  }
  .ab-join__desc span {
    display: none;
  }
  .ab-join__mail {
    margin-top: 4.071vw;
    font-size: 3.562vw;
    gap: 2.036vw;
  }
  .ab-join__mail svg {
    width: 3.053vw;
    height: 3.053vw;
  }
  .ab-join__list {
    border-top: none;
  }

  .ab-join__list li a {
    font-size: 5.089vw;
    height: 17.812vw;
  }

  .ab-join__list li a img {
    width: 6.107vw;
    height: 6.107vw;
  }
}