/* ===========================================================
   CONSULTING PAGE  (컨설팅 서비스 소개)
   - 공통 요소(사이드바/네비/푸터/상담/개인정보)는 style.css 재사용
   - 상단 이미지(co1) → 그 아래는 흰 배경
   - 스크롤 리빌: 카피 상승 / 이미지 좌측 진입 + 파란 도형 와이프 / 번호 리스트 하나씩 상승
=========================================================== */

/* 본문 영역: 사이드바 폭만큼 밀기 (히어로 아래는 흰 배경) */
.cons {
  margin-left: var(--sidebar-w);
  width: calc(100% - var(--sidebar-w));
  background: #ffffff;
  position: relative;
  z-index: 1;
  /* 컨설팅 솔루션 카피 · 서비스 헤딩의 공통 좌측 시작점 */
  --cxo-inset: clamp(48px, 9vw, 160px);
}

/* ===========================================================
   1) HERO (상단 이미지 = co1)
=========================================================== */
.cons-hero {
  position: relative;
  height: 60vh;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
}
.cons-hero__bg {
  position: absolute;
  inset: 0;
  background: url("../01_images/works/co1.png") center 42% / cover no-repeat;
  transform: scale(1.08);
  animation: consZoom 7s ease forwards;
}
@keyframes consZoom {
  to { transform: scale(1); }
}
.cons-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(6, 10, 32, 0.55) 0%,
    rgba(6, 10, 32, 0.38) 45%,
    rgba(6, 10, 32, 0.58) 100%
  );
}
.cons-hero__inner {
  position: relative;
  z-index: 2;
  padding: 0 6vw;
  transform: translateY(18px);
  opacity: 0;
  animation: consRise 1s ease 0.25s forwards;
}
@keyframes consRise {
  to { transform: translateY(0); opacity: 1; }
}
.cons-hero__eyebrow {
  font-family: "SUIT", sans-serif;
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 500;
  letter-spacing: 6px;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 24px;
}
.cons-hero__title {
  font-size: clamp(30px, 4.2vw, 60px);
  font-weight: 800;
  line-height: 1.32;
  letter-spacing: -1px;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.35);
}

/* ===========================================================
   2) SOLUTION (흰 배경 · 카피 상승 + 이미지 좌측 진입 + 파란 도형 와이프)
=========================================================== */
.cxo {
  background: #ffffff;
  /* 오른쪽은 0 → 이미지가 화면 우측 끝까지 이어지도록 */
  padding: clamp(80px, 12vw, 160px) 0 clamp(80px, 12vw, 160px) var(--cxo-inset);
  overflow: hidden;
}
.cxo__inner {
  display: block;
}

/* --- 상단 카피: 왼쪽 정렬 + 아래에서 위로 상승 --- */
.cxo__copy {
  max-width: 760px;
  padding-right: 5vw;
  margin-bottom: clamp(40px, 5vw, 72px);
  text-align: left;
  transform: translateY(48px);
  opacity: 0;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 1s ease;
}
.cxo.in .cxo__copy { transform: translateY(0); opacity: 1; }

.cxo__eyebrow {
  font-family: "SUIT", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--point);
  margin-bottom: 22px;
}
.cxo__title {
  font-size: clamp(30px, 3.6vw, 52px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -1.5px;
  color: #14161f;
  margin-bottom: 26px;
}
.cxo__desc {
  font-size: clamp(15px, 1.15vw, 18px);
  font-weight: 400;
  line-height: 2;
  color: #55596b;
  max-width: 520px;
}
.cxo__desc b { color: var(--point); font-weight: 700; }

/* --- 비주얼: 가로로 길게 우측 끝까지 · 이미지(co) 우→좌 진입 + 파란 도형 와이프 --- */
.cxo__visual {
  position: relative;
  width: 100%;
  height: clamp(300px, 34vw, 560px);
  border-radius: 0;   /* 라운드 없음 */
  overflow: hidden;
}
.cxo__img {
  position: absolute;
  inset: 0;
  background: url("../01_images/works/co.png") center 40% / cover no-repeat;
  /* 오른쪽에 있다가 왼쪽으로 진입 */
  transform: translateX(90px);
  opacity: 0;
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s,
    opacity 0.8s ease 0.15s;
}
.cxo.in .cxo__img { transform: translateX(0); opacity: 1; }

/* 파란색감 도형: 이미지 위로 따라왔다가 왼쪽으로 걷힘 */
.cxo__shape {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, #0000b8 0%, #3a5bff 55%, #6f8cff 100%);
  transform: translateX(-102%);
  z-index: 2;
  pointer-events: none;
}
.cxo.in .cxo__shape {
  animation: cxoWipe 1.5s cubic-bezier(0.7, 0, 0.2, 1) forwards;
}
@keyframes cxoWipe {
  0%   { transform: translateX(-102%); }
  45%  { transform: translateX(0); }      /* 이미지 위로 따라와 덮음 */
  100% { transform: translateX(102%); }   /* 걷히며 이미지 리빌 */
}

/* ===========================================================
   3) FEATURES (번호 리스트 · 스크롤에 맞춰 하나씩 상승)
=========================================================== */
.cfeat {
  background: #ffffff;
  padding: clamp(80px, 10vw, 130px) 0 clamp(90px, 11vw, 140px);
}
.cfeat__head {
  text-align: left;
  /* 헤딩 좌측 시작점은 컨설팅 솔루션 카피와 동일하게 */
  padding: 0 5vw 0 var(--cxo-inset);
  margin: 0 0 clamp(30px, 3.5vw, 48px);
}
.cfeat__eyebrow {
  font-family: "SUIT", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--point);
  margin-bottom: 16px;
}
.cfeat__title {
  font-size: clamp(28px, 3.4vw, 48px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -1px;
  color: #222;
}
.cfeat__title b { color: #222; }

.cfeat__list {
  width: min(1080px, 92%);
  margin: 0 auto;               /* 리스트 블록 · 구분선 가운데 정렬 */
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid #e5e5e5;   /* 선으로 구분 */
}
.cfeat__item {
  position: relative;
  display: flex;
  align-items: flex-start;          /* 이전 구조: 번호 왼쪽 · 글씨 왼쪽 정렬 */
  text-align: left;
  gap: clamp(18px, 2.6vw, 40px);
  padding: clamp(34px, 4vw, 56px) 6px;
  border-bottom: 1px solid #e5e5e5; /* 항목 구분선 (음영 없음) */
  background: none;
  /* 밑에서 올라오는 리빌 */
  opacity: 0;
  transform: translateY(56px);
  transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.cfeat__item.show { opacity: 1; transform: translateY(0); }

/* 검은색 원형 + 흰색 글씨 */
.cfeat__num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(44px, 3.4vw, 54px);
  height: clamp(44px, 3.4vw, 54px);
  border-radius: 50%;
  background: #2b2b2b;
  color: #ffffff;
  font-family: "SUIT", sans-serif;
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.cfeat__body { flex: 1 1 auto; }
.cfeat__name {
  font-size: clamp(19px, 1.8vw, 26px);
  font-weight: 800;
  color: #222;
  letter-spacing: -0.5px;
  margin-bottom: 14px;
}
.cfeat__txt {
  font-size: clamp(14px, 1.1vw, 17px);
  font-weight: 400;
  line-height: 1.9;
  color: #9a9aa0;
}
.cfeat__txt b { color: #555; font-weight: 700; }

/* ===========================================================
   반응형
=========================================================== */
@media (max-width: 900px) {
  .cxo__visual { height: clamp(240px, 46vw, 420px); }
}

@media (max-width: 768px) {
  :root { --sidebar-w: 64px; }

  .cons-hero { min-height: 440px; }
  .cons-hero__title { font-size: clamp(24px, 7vw, 34px); }

  .cxo { padding: 64px 22px; }
  .cxo__desc { max-width: none; }

  .cfeat { padding: 64px 0 76px; }
  .cfeat__head { padding: 0 22px; }
  .cfeat__item { gap: 12px; padding: 30px 4px; }
}

/* 모션 최소화 선호 시 애니메이션 끔 */
@media (prefers-reduced-motion: reduce) {
  .cxo__copy, .cxo__img, .cfeat__item { transition: none; }
  .cxo__shape { display: none; }
}