/* ===========================
   consulting.css — AX 컨설팅 페이지 전용 스타일
   web-renewal/src/app/consulting/page.tsx + ConsultingFaq.tsx의
   Tailwind/inline 스타일을 순수 CSS로 이식.
   공통 클래스(.section-*, .btn-pill, .r-*, .r-text-faq)는 renewal.css에서 재사용한다.
   =========================== */

/* base.html의 main(.max-w-6xl mx-auto px-4)을 벗어나 풀블리드로 펼치기 위한 래퍼.
   각 섹션이 화면 전체 폭을 차지해야 하므로 뷰포트 폭으로 강제 확장한다. */
.consulting-page {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  font-family: 'Pretendard', sans-serif;
}

/* 섹션 내부 콘텐츠 컨테이너 공통값 */
.consulting-page .cs-container {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* ===========================
   1. Hero (Frame 143)
   =========================== */
.cs-hero {
  position: relative;
  overflow: hidden;
  min-height: 796px;
  display: flex;
  align-items: center;
  background-color: #1f0e4d;
}
/* 좌측 벡터 장식 — color-dodge 블렌드 */
.cs-hero__vec {
  position: absolute;
  bottom: 0;
  height: 842px;
  mix-blend-mode: color-dodge;
}
.cs-hero__vec--l {
  left: 6.15%;
  right: 50%;
}
.cs-hero__vec--r {
  left: 50%;
  right: 6.15%;
}
.cs-hero__vec img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
}
.cs-hero__vec--l img { transform: rotate(180deg); }
.cs-hero__vec--r img { transform: rotate(-90deg); }

.cs-hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 200px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 55px;
}
.cs-hero__heads {
  display: flex;
  flex-direction: column;
  gap: 21px;
  align-items: center;
  width: 100%;
}
.cs-hero__titles {
  display: flex;
  flex-direction: column;
  gap: 13px;
  align-items: center;
  width: 100%;
  margin: 0;
}
.cs-hero__title {
  font-size: 80px;
  font-weight: 800;
  color: white;
  letter-spacing: -1.5px;
  line-height: 92px;
  text-align: center;
  margin: 0;
}
.cs-hero__title--row { white-space: nowrap; }
.cs-hero__title em {
  font-style: normal;
  color: #ff7900;
}
.cs-hero__subtitle {
  font-size: 20px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
  line-height: 33px;
}
.cs-hero__subtitle p { margin: 0; }

.cs-hero__buttons {
  display: flex;
  gap: 22px;
}
/* 공통 버튼 베이스 */
.cs-btn {
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: opacity 0.2s;
}
.cs-btn:hover { opacity: 0.9; }
.cs-btn--primary {
  background-color: #ff7900;
  color: white;
  border: none;
  padding: 18px 32px;
  box-shadow: 0px 8px 12px rgba(255, 121, 0, 0.35);
}
.cs-btn--ghost {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 18px 33px;
}

/* ===========================
   2. Service (Frame 145)
   =========================== */
.cs-service {
  background-color: #1b1b1b;
  padding: 100px 0 130px;
}
.cs-service__inner {
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.cs-service__body {
  display: flex;
  flex-direction: column;
  gap: 90px;
  align-items: center;
}
.cs-service__cards {
  display: flex;
  gap: 24px;
  height: 504px;
  width: 100%;
}
.cs-svc-card {
  flex: 1 0 0;
  background-color: #101010;
  border: 1px solid #7543ff;
  border-radius: 13px;
  position: relative;
  overflow: clip;
  min-width: 0;
}
/* 카드 보라색 글로우 사각형 (좌하단 라운드) */
.cs-svc-card__glow {
  position: absolute;
  left: 122px;
  top: 323px;
  width: 341px;
  height: 180px;
  background-color: rgba(131, 86, 255, 0.2);
  border-top-left-radius: 223px;
}
.cs-svc-card__text {
  position: absolute;
  left: 36px;
  top: 50px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.cs-svc-card__title {
  font-size: 48px;
  font-weight: 800;
  color: white;
  letter-spacing: -0.8px;
  line-height: 52px;
  margin: 0;
  white-space: nowrap;
}
.cs-svc-card__desc {
  font-size: 24px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  line-height: 36px;
  margin: 0;
}

/* Card 1 일러스트 */
.cs-svc-card__ring {
  position: absolute;
  left: 155px;
  top: 192px;
  width: 242px;
  height: 242px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-svc-card__ring img {
  width: 172px;
  height: 172px;
  transform: rotate(-40.11deg);
}
.cs-svc-card__search {
  position: absolute;
  top: 53.14%;
  left: 48.04%;
  right: 30.31%;
  bottom: 26.93%;
}
.cs-svc-card__search img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cs-svc-card__dot {
  position: absolute;
  left: 334px;
  top: 268px;
  width: 97px;
  height: 97px;
}
/* Card 2 일러스트 */
.cs-svc-card__union {
  position: absolute;
  left: 186px;
  top: 251px;
  width: 247px;
  height: 210px;
}
/* Card 3 일러스트 */
.cs-svc-card__bldg {
  position: absolute;
  left: 245px;
  top: 219px;
  width: 186px;
  height: 252px;
}

/* "한 번의 프로젝트로 끝나지 않습니다" */
.cs-service__tagline {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.cs-service__tagline-title {
  font-size: 56px;
  font-weight: 700;
  background: linear-gradient(90deg, #7543ff 0%, #c4b0ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.8px;
  line-height: 52px;
  margin: 0;
  white-space: nowrap;
}
.cs-service__tagline-sub {
  font-size: 18px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  line-height: 28.56px;
  margin: 0;
  max-width: 583px;
}

/* ===========================
   3. Process (Frame 150)
   =========================== */
.cs-process {
  background-color: #1f0e4d;
  padding: 100px 0 130px;
}
.cs-process__inner {
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.cs-process__body {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: center;
}
.cs-process__steps {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
}
.cs-step {
  flex: 1 0 0;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 33px 25px 29px;
  display: flex;
  flex-direction: column;
  gap: 6.8px;
  min-width: 0;
}
.cs-step__badge {
  background-color: #ff7900;
  border-radius: 999px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0px 0px 6px rgba(255, 121, 0, 0.4);
}
.cs-step__badge span {
  font-size: 15px;
  font-weight: 800;
  color: white;
}
.cs-step__title {
  font-size: 19px;
  font-weight: 700;
  color: white;
  letter-spacing: -0.38px;
  margin: 0;
  padding-top: 11.2px;
}
.cs-step__desc {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  line-height: 21.7px;
  margin: 0;
  padding-bottom: 9.735px;
  white-space: pre-line;
}
.cs-process__arrow {
  width: 18px;
  height: 33px;
  flex-shrink: 0;
}
.cs-process__note {
  background-color: rgba(255, 121, 0, 0.15);
  border-radius: 16px;
  padding: 23px 33px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cs-process__note p {
  font-size: 16px;
  font-weight: 700;
  color: #ffb987;
  letter-spacing: 0.24px;
  margin: 0;
  white-space: nowrap;
}

/* ===========================
   4. Reference (Section 8)
   =========================== */
.cs-reference {
  background-color: #f7f8fa;
  padding: 130px 0 140px;
}
.cs-reference__inner {
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.cs-reference__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.cs-reference__cards {
  display: flex;
  gap: 15px;
}
.cs-ref-card {
  flex: 1 0 0;
  background-color: white;
  border: 0.88px solid #c7cbce;
  border-radius: 14px;
  padding: 55.88px 36.88px 35.88px;
  display: flex;
  flex-direction: column;
  gap: 63px;
  min-width: 0;
}
.cs-ref-card__logo {
  height: 80px;
  width: 279px;
  position: relative;
}
.cs-ref-card__logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cs-ref-card__content {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.cs-ref-card__tag {
  background-color: #0d1b3e;
  border-radius: 22px;
  padding: 5px 18px;
  display: inline-flex;
  gap: 12px;
  align-items: center;
}
.cs-ref-card__tag img {
  width: 18px;
  height: 20px;
}
.cs-ref-card__tag span {
  font-size: 16px;
  font-weight: 600;
  color: white;
  line-height: 29.996px;
}
.cs-ref-card__title {
  font-size: 34px;
  font-weight: 700;
  color: #111;
  letter-spacing: -0.48px;
  line-height: 44px;
  margin: 0;
}
.cs-ref-card__result {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cs-ref-card__result-label {
  font-size: 22px;
  font-weight: 700;
  color: #8356ff;
  line-height: 48.368px;
}
.cs-ref-card__result-body {
  border-top: 1px solid #c7cbce;
  padding-top: 23px;
}
.cs-ref-card__result-body p {
  font-size: 24px;
  font-weight: 600;
  color: #686868;
  line-height: 36px;
  margin: 0;
  max-width: 396px;
}

/* ===========================
   5. FAQ (Section 9)
   =========================== */
.cs-faq {
  background-color: white;
  padding: 130px 0 140px;
}
.cs-faq__inner {
  display: flex;
  flex-direction: column;
  gap: 56px;
  align-items: center;
}
.cs-faq__list {
  display: flex;
  flex-direction: column;
  gap: 26px;
  width: 100%;
}
/* <details> 기반 아코디언. 기본 마커 제거 후 직접 chevron 렌더 */
.cs-faq__item {
  background-color: white;
  border: 0.88px solid #c7cbce;
  border-radius: 14px;
  padding: 45.88px 36.88px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.cs-faq__item[open] {
  border-color: #ff7900;
  box-shadow: 0px 0px 10px rgba(86, 94, 116, 0.15);
}
.cs-faq__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}
.cs-faq__summary::-webkit-details-marker { display: none; }
.cs-faq__q {
  display: flex;
  gap: 22px;
  align-items: center;
  min-width: 0;
}
.cs-faq__q-badge {
  background-color: #ffead5;
  border-radius: 6px;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cs-faq__q-badge img {
  width: 13px;
  height: 15px;
}
.cs-faq__q-text {
  font-size: 28px;
  font-weight: 700;
  color: #111;
  letter-spacing: -0.48px;
  line-height: 35px;
}
.cs-faq__chevron {
  width: 24px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cs-faq__chevron img {
  width: 15px;
  height: 24px;
  transform: rotate(90deg);
  transition: transform 0.2s;
}
.cs-faq__item[open] .cs-faq__chevron img {
  transform: rotate(-90deg) scaleY(-1);
}
.cs-faq__answer {
  padding-left: 58px;
  padding-top: 22px;
}
.cs-faq__answer span {
  font-size: 18px;
  font-weight: 400;
  color: #686868;
  line-height: 28.56px;
}

/* ===========================
   6. CTA (Section 7)
   =========================== */
.cs-cta {
  background-image: linear-gradient(135.4deg, #1f0e4d 0%, #3a10aa 100%);
  padding: 100px 0;
}
.cs-cta__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  display: flex;
  flex-direction: column;
  gap: 27px;
  align-items: center;
}
.cs-cta__header {
  align-items: center;
  width: 100%;
}
.cs-cta__title {
  font-size: 48px;
  color: white;
  text-align: center;
  white-space: nowrap;
}
.cs-cta__subtitle {
  font-size: 17.6px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  margin: 0;
}
.cs-cta__btn {
  background-color: white;
  color: #1f0e4d;
  border: none;
  border-radius: 10px;
  padding: 22px 52px;
  font-size: 17.6px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0px 12px 16px rgba(0, 0, 0, 0.2);
  transition: opacity 0.2s;
}
.cs-cta__btn:hover { opacity: 0.9; }
.cs-cta__contacts {
  display: flex;
  gap: 24px;
  align-items: center;
}
.cs-cta__contact {
  display: flex;
  gap: 12px;
  align-items: center;
}
.cs-cta__contact img {
  flex-shrink: 0;
}
.cs-cta__contact--email img { width: 20px; height: 16px; }
.cs-cta__contact--phone img { width: 18px; height: 18px; }
.cs-cta__contact span,
.cs-cta__contact-text {
  font-size: 20px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}
.cs-cta__dot {
  width: 5px;
  height: 5px;
}

/* ===========================
   7. 모바일 반응형 (max-width: 767px)
   인라인 r-* 유틸이 못 잡는 전용 보정만 추가
   =========================== */
@media (max-width: 767px) {
  .cs-hero { min-height: 0; }
  .cs-hero__content { padding: 80px 24px; gap: 32px; }
  .cs-hero__title { font-size: 36px; line-height: 44px; letter-spacing: -0.8px; }
  .cs-hero__buttons { flex-direction: column; width: 100%; }
  .cs-btn { text-align: center; }

  .cs-service { padding: 60px 0; }
  .cs-service__cards { height: auto; }
  /* 절대배치 카드 → 일반 흐름으로 전환 */
  .cs-svc-card { min-height: 360px; }

  .cs-process { padding: 60px 0; }
  .cs-process__steps { flex-wrap: wrap; }
  .cs-process__note { padding: 16px 20px; }
  .cs-process__note p { white-space: normal; text-align: center; }

  .cs-reference { padding: 60px 0; }
  .cs-reference__head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .cs-ref-card__title { font-size: 26px; line-height: 34px; }

  .cs-faq { padding: 60px 0; }
  .cs-faq__item { padding: 28px 24px; }
  .cs-faq__q-text { font-size: 18px; line-height: 26px; }
  .cs-faq__answer { padding-left: 0; }

  .cs-cta { padding: 60px 0; }
  .cs-cta__title { font-size: 28px; line-height: 36px; white-space: normal; }
  .cs-cta__contacts { flex-wrap: wrap; gap: 8px 16px; justify-content: center; }
}

@media (min-width: 768px) and (max-height: 900px) {
  .cs-hero { min-height: 736px; }
  .cs-hero__vec { height: 778px; }
}