/* ===== K03 Approach — 브랜딩 시스템 / 프로세스 소개 =====
   recognition 비의존, ap-* 자체 클래스로 자기완결.
   1920 시안 기준 vw 환산 (px/1920*100). 치수는 캡처 추정 — Figma 복구 후 보정. */

/* 배경은 body가 담당 — JS(watchSectionBg)가 스크롤 시점에 body 배경색을
   전환하고 common.css의 body{transition:background-color}로 부드럽게 크로스페이드.
   각 블록은 텍스트 색만 지정(메인페이지와 동일 패턴). */

body.page-K03 {
  background: var(--color-black);
  color: var(--color-white);
}

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

/* 2톤 블록 — 텍스트 색만 */
.ap--dark {
  color: var(--color-white);
}
.ap--light {
  color: var(--color-black);
}

/* ① Key Visual — 3장 겹쳐 크로스페이드 로테이션 (recognition-key-visual 동일 패턴) */
.ap-key-visual {
  position: relative;
  width: 100%;
  margin-top: 6.25vw; /* 120 */
  aspect-ratio: 3640 / 2112;
}
.ap-key-visual__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.45, 0, 0.55, 1);
  pointer-events: none;
}
.ap-key-visual__slide.is-active {
  opacity: 1;
}
.ap-key-visual__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

/* ② Intro 타이포 — 헤드라인(좌) + 본문(우) 2단 */
.ap-typo {
  margin-top: 3.333vw;
}
/* 스크롤 텍스트-fill 리빌 — JS가 background-position 제어 (다크 배경용 white→grey) */
.ap-typo__reveal {
  font-size: 5.208vw;
  font-weight: 500;
  line-height: 1.1;
  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;
}
/* KO 히어로 타이틀 — .ap-typo__reveal과 동일 크기/여백, 그라디언트 리빌 없이 고정 흰색
   (JS가 .ap-typo__reveal만 선택하므로 stagger 타이밍에 영향 없이 즉시 최종 리빌 상태로 표시) */
.ap-typo__ko {
  font-size: 4.427vw; /* 85 */
  font-weight: 500;
  line-height: 1.35; /* 135% */
  display: inline-block;
  margin-right: 0.28em;
  color: var(--color-white);
}
.ap-typo__mobile-break {
  display: none;
}
.ap-typo__desc {
  width: 52.083vw; /* 1000 */
  margin-top: 5.208vw; /* 100 */
  margin-left: auto;
  font-size: 1.667vw;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-grey-200);
}
.ap-typo__desc[data-lang="ko"] {
  font-size: 1.563vw; /* 30 */
}
/* 페이지 전체 언어 토글 — about 히어로 버튼과 동일한 우측 정렬 배치 */
.ap-typo__lang-button {
  margin-top: 0.417vw; /* 8 */
  margin-left: auto;
  margin-right: 5.677vw; /* 109: 본문 설명 텍스트 우측 가장자리에 맞춤 (about 히어로와 동일) */
  display: block;
}

/* ③ Capability */
.ap-cap {
  margin-top: 6.25vw;
  padding-bottom: 6.25vw; /* 120 */
}
.ap-cap hgroup {
  display: flex;
  justify-content: space-between;
  padding-bottom: 1.042vw; /* 20 */
  border-bottom: 1px solid var(--color-grey-400);
}
.ap-cap__label {
  font-size: 1.667vw; /* 32 */
  color: var(--color-white);
}
.ap-cap__list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  /* 94.792vw 래퍼 밖으로 빼 뷰포트 전체 폭(풀블리드) — transform은 pin/scale과 충돌하므로 margin 방식 */
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
/* 스택형 pin 카드 — 각 행이 100vw×100vh로 뷰포트를 채우며 pin(JS), 다음 행이 올라와 덮음.
   display:grid + align-content:center로 내부(제목/컬럼)를 세로 중앙 배치 —
   자식의 flex-basis/flex는 grid에서 무시되어 기존 블록 레이아웃 그대로 유지된다.
   좌우는 기존 gutter(2.604vw)를 패딩으로 줘 콘텐츠 컬럼 위치 유지.
   배경은 body와 함께 전환되도록 is-bg-dark/light 테마 스코프로 지정. */
.ap-cap__row {
  min-height: 100vh;
  padding-inline: 2.604vw; /* (100−94.792)/2 */
  display: grid;
  align-content: center;
  will-change: opacity;
  transition: background-color 0.6s ease; /* body 배경전환과 동기 */
}
.ap-cap__row:last-child .ap-cap__col:last-child {
  border-bottom: none;
}
body.is-bg-dark .ap-cap__row {
  background-color: var(--color-black);
}
body.is-bg-light .ap-cap__row {
  background-color: var(--color-white);
}
.ap-cap__title {
  margin: 0;
  font-size: 3.02vw; /* 58 */
  font-weight: 500;
  line-height: 1.14;
  flex-basis: 33.49vw;
  margin-block: 2.083vw; /* 40 */
}
.ap-cap__cols {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-grey-400);
}
.ap-cap__col {
  display: flex;
  padding-block: 2.083vw; /* 40 */
  border-bottom: 1px solid var(--color-grey-400);
}
.ap-cap__col-label {
  font-size: 1.25vw;
  color: var(--color-grey-300);
  flex: 1;
}
.ap-cap__services {
  flex-basis: 52.083vw; /* 1000 */
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.417vw; /* 8 */
  font-size: 1.25vw;
  line-height: 1.5;
  color: var(--color-white);
}
/* display:flex가 [hidden]의 기본 display:none을 덮어써 EN/KO 리스트가 동시에 보이는 문제 방지 */
.ap-cap__services[hidden] {
  display: none;
}
.ap-cap__approach {
  margin: 0;
  font-size: 1.25vw;
  line-height: 1.5;
  color: var(--color-white);
  flex-basis: 52.083vw; /* 1000 */
}
.ap-cap__related {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.417vw; /* 8 */
  flex-basis: 52.083vw; /* 1000 */
}
.ap-cap__thumb {
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--color-grey-500);
}
.ap-cap__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 모바일 — 스택 pin/풀블리드/테마배경 해제(JS pin 미생성), 항목을 body 위 단순 세로 나열 */
@media (max-width: 1200px) {
  .ap-cap__list {
    width: auto;
    margin-left: 0;
  }
  .ap-cap__row {
    min-height: 0;
    display: block;
    padding-inline: 0;
    opacity: 1;
    will-change: auto;
  }
  body.is-bg-dark .ap-cap__row,
  body.is-bg-light .ap-cap__row {
    background-color: transparent;
  }
}

/* ④ Process Intro */
.ap-process-intro__media {
  margin: 0;
  width: 100%;
}
.ap-process-intro__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ap-process-intro__body {
  margin-top: 3.333vw; /* 64 */
}
.ap-process-intro__title {
  font-size: 5.208vw; /* 100 */
  font-weight: 500;
  line-height: 1.2;
}
.ap-process-intro__title span {
  line-height: 1;
}
@media all and (min-width: 641px) {
  .ap-process-intro__title [data-lang="ko"] {
    font-size: 4.427vw; /* 85 */
    line-height: 1.35; /* 135% */
  }
}
.ap-process-intro__seg {
  display: inline-block;
  margin-right: 0.28em; /* 단어 사이 간격 — 인접 <br class="...break"> 토글 시 텍스트 공백 collapse 이슈 방지 위해 margin으로 처리 */
}
.ap-process-intro__mobile-break {
  display: none;
}
.ap-process-intro__desc {
  width: 52.083vw; /* 1000 */
  margin-top: 5.208vw; /* 100 */
  margin-left: auto;
  font-size: 1.667vw;
  line-height: 1.5;
  letter-spacing: 0.02em;
  opacity: 0.7;
}
@media all and (min-width: 641px) {
  .ap-process-intro__desc [data-lang="ko"] {
    font-size: 1.563vw; /* 30 */
    line-height: 1.5; /* 150% */
  }
}

/* ⑤ Process */
.ap-process {
  margin-top: 6.25vw;
}
.ap-process hgroup {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.042vw; /* 20 */
}
.ap-process__label {
  font-size: 1.667vw; /* 32 */
}
.ap-process__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-grey-200);
}
.ap-process__step {
  border-bottom: 1px solid var(--color-grey-200);
}
.ap-process__heading {
  margin: 0;
}
/* 아코디언 헤드 — 클릭 토글 (button 리셋) */
.ap-process__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.625vw; /* 12 */
  padding: 2.083vw 0; /* 40 0 */
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 4.167vw;
  font-weight: 500;
  color: var(--color-black);
  text-align: left;
  transition: color 0.3s ease;
}
.ap-process__toggle > span {
  line-height: 1.14;
}
/* 우측 원형 인디케이터 — 닫힘: + / 열림: − (시안 닷 위치 유지).
   기본: 배경 grey-100 + 마크 검정 / 열림: 강조색 배경 + 흰 마크. */
.ap-process__dot {
  position: relative;
  margin-left: auto;
  width: 2.604vw; /* 50 */
  height: 2.604vw; /* 50 */
  flex: none;
  border-radius: 50%;
  background: var(--color-grey-100);
  transition: background-color 0.3s ease;
}
.ap-process__dot::before,
.ap-process__dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.146vw;
  height: 0.104vw; /* 2 */
  background: var(--color-black);
  transform: translate(-50%, -50%);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    background-color 0.3s ease;
}
.ap-process__dot::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.ap-process__step.is-open .ap-process__dot::after {
  opacity: 0;
}
/* 열림 상태 — 글자·닷 강조색, 닷 마크는 흰색 */
.ap-process__step.is-open .ap-process__toggle {
  color: var(--color-key);
}
.ap-process__step.is-open .ap-process__dot {
  background: var(--color-key);
}
.ap-process__step.is-open .ap-process__dot::before,
.ap-process__step.is-open .ap-process__dot::after {
  background: var(--color-white);
}

/* 배경이 검정으로 반전될 때(푸터 진입 등) ap-process 순흑 텍스트도 반전 (전 페이지 공통 방식).
   body.is-bg-dark/light 스코프: 라이트 배경에선 검정, 다크 배경에선 흰색.
   제외: 닷(인디케이터)·회색 sub-label·열림 시 강조색(red) 토글. */
.ap-process__label,
.ap-process__step:not(.is-open) .ap-process__no,
.ap-process__step:not(.is-open) .ap-process__name,
.ap-process__sub-list li {
  transition: color 0.6s ease;
}
body.is-bg-dark .ap-process__label,
body.is-bg-dark .ap-process__step:not(.is-open) .ap-process__no,
body.is-bg-dark .ap-process__step:not(.is-open) .ap-process__name,
body.is-bg-dark .ap-process__sub-list li {
  color: var(--color-white);
}
body.is-bg-light .ap-process__label,
body.is-bg-light .ap-process__step:not(.is-open) .ap-process__no,
body.is-bg-light .ap-process__step:not(.is-open) .ap-process__name,
body.is-bg-light .ap-process__sub-list li {
  color: var(--color-black);
}

/* 수축/팽창 본문 — max-height 트랜지션 (JS가 높이 측정) */
.ap-process__body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.ap-process__sub {
  display: flex;
  border-top: 1px solid var(--color-grey-200);
}
.ap-process__sub-label {
  margin: 0;
  width: 42.708vw;
  font-size: 1.25vw; /* 24 */
  color: var(--color-grey-400);
  height: 4.375vw;
  display: flex;
  align-items: center;
}
.ap-process__sub-list {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.ap-process__sub-list li {
  font-size: 1.458vw; /* 28 */
  line-height: 1.5;
  padding-block: 1.25vw; /* 24 */
}
.ap-process__sub-list li:not(:last-child) {
  border-bottom: 1px solid var(--color-grey-200);
}

/* 배경 전환 구간 — body.is-bg-dark/light 스코프로 순흑/순백 반전 (전 페이지 공통 방식).
   reveal 그라데이션 텍스트(.ap-typo__reveal)·회색·키컬러·이미지는 제외. */
.ap-cap__title,
.ap-cap__approach,
.ap-process-intro__title,
.ap-process-intro__desc {
  transition: color 0.6s ease;
}
body.is-bg-dark .ap-cap__title,
body.is-bg-dark .ap-cap__approach,
body.is-bg-dark .ap-process-intro__title,
body.is-bg-dark .ap-process-intro__desc {
  color: var(--color-white);
}
body.is-bg-light .ap-cap__title,
body.is-bg-light .ap-cap__approach,
body.is-bg-light .ap-process-intro__title,
body.is-bg-light .ap-process-intro__desc {
  color: var(--color-black);
}

@media all and (max-width: 640px) {
  .ap-wrap {
    padding-block: 16.285vw;
    margin-inline: 4.071vw;
    width: calc(100% - 8.142vw);
  }
  .ap-cap__break--desktop {
    display: none;
  }
  .ap-key-visual {
    aspect-ratio: 361 / 209;
  }
  .ap-typo__reveal {
    font-size: 7.125vw; /* 28 */
    line-height: 1.2; /* 120% */
  }
  .ap-typo__ko {
    font-size: 6.107vw; /* 24 */
    line-height: 1.35; /* 135% */
  }
  /* 영문(4줄)과 국문(3줄)의 줄 수가 달라 타이틀 높이가 달라지고, 그 아래 KR/ENG
     버튼 위치가 언어 전환마다 흔들리는 문제 방지 — 더 긴 영문 기준으로 높이 고정 */
  .ap-typo h1 {
    min-height: 34.2vw; /* 4줄 * 7.125vw * line-height 1.2 */
  }
  .ap-typo__mobile-break {
    display: block;
  }
  .ap-typo__break--desktop {
    display: none;
  }
  .ap-typo__desc {
    display: none;
  }
  .ap-typo__lang-button {
    margin: 1.018vw 0 0 0;
  }
  .ap-cap {
    margin-top: 16.285vw;
    padding-bottom: 0;
  }
  .ap-cap hgroup {
    padding-bottom: 2.036vw;
  }
  .ap-cap__label {
    font-size: 3.562vw;
  }
  .ap-cap__title {
    margin-block: 5.089vw;
    font-size: 6.107vw;
  }
  .ap-cap__col {
    display: block;
    padding-block: 5.089vw;
  }
  .ap-cap__col-label {
    font-size: 3.053vw;
    margin-bottom: 3.053vw;
  }
  .ap-cap__services {
    font-size: 3.817vw;
    gap: 0.509vw;
  }
  .ap-cap__approach {
    font-size: 3.817vw;
  }
  .ap-cap__related {
    gap: 1.934vw;
  }
  .ap--light {
    padding-top: 16.285vw;
  }
  .ap-process-intro__media {
    aspect-ratio: 361 / 209;
  }
  .ap-process-intro__title {
    font-size: 7.125vw; /* 28 */
  }
  .ap-process-intro__title [data-lang="en"] {
    line-height: 1.2; /* 120% */
  }
  .ap-process-intro__title [data-lang="ko"] {
    font-size: 6.107vw; /* 24 */
    line-height: 1.35; /* 135% */
  }
  .ap-process-intro__mobile-break {
    display: block;
  }
  .ap-process-intro__break--desktop {
    display: none;
  }
  .ap-process-intro__desc {
    display: none;
  }
  .ap-process-intro__body {
    margin-top: 5.089vw;
  }
  .ap-process {
    margin-top: 10.178vw;
  }
  .ap-process hgroup {
    margin-bottom: 2.036vw;
  }
  .ap-process__label {
    font-size: 3.562vw;
  }
  .ap-process__toggle {
    padding-block: 5.089vw;
    font-size: 6.107vw;
  }
  .ap-process__dot {
    width: 6.107vw;
    height: 6.107vw;
  }
  .ap-process__dot::before {
    width: 3.562vw;
  }
  .ap-process__dot::after {
    width: 3.562vw;
  }
  .ap-process__sub {
    display: block;
    padding-block: 5.089vw;
  }
  .ap-process__sub-label {
    width: 100%;
    font-size: 3.053vw;
    color: var(--color-grey-300);
    margin-bottom: 2.036vw;
  }
  .ap-process__sub-list li {
    font-size: 4.071vw;
    padding-block: 0;
  }
  .ap-process__sub-list li:not(:last-child) {
    border-bottom: none;
  }
}