/* ================================================================
   marketingStyle.css
   Marketing 페이지 전용 스타일 — 모든 클래스에 mkt- 접두사 사용
   다른 페이지 CSS(style.css, enterpriseStyle.css 등)와 충돌 없음

   [구성 순서]
   View(Marketing.view.xml)의 렌더 순서와 동일하게 정렬한다.
     0. 디자인 토큰(변수)
     1. 페이지 / 래퍼 리셋 · 공용 요소
     2. HEADER
     3. HERO
     4. HIGHLIGHTS (통계 4개)
     5. WHAT WE OPTIMIZE
     6. CORE AI AREAS
     7. OPTIMIZATION SYSTEM
     8. HOW WE WORK
     9. CONTACT US & FOOTER
    10. 공용 모션 (control-bar / scroll reveal / keyframes)
    11. RESPONSIVE

   [색상 규칙]
   - 브랜드 색은 모두 :root 성격의 .mkt-page 변수로만 관리한다.
   - 컴포넌트 규칙에서는 색상 리터럴(#xxxxxx)을 직접 쓰지 않고
     반드시 var(--mkt-*) 변수를 참조한다.
   - 색을 바꾸고 싶으면 아래 "변수" 블록 한 곳만 수정하면 된다.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,700;9..40,800&display=swap');
@import url('https://cdn.jsdelivr.net/gh/webfontworld/nanumSquareNeo/nanumSquareNeo.css');

/* ================================================================
   0. 디자인 토큰 (변수)
   ================================================================ */
.mkt-page {
  /* 브랜드 컬러 */
  --mkt-accent:        #FF8D74;   /* 섹션 태그·카드 번호 등 포인트 컬러 */
  --mkt-teal:          #005957;   /* 카드 테두리·강조 제목·네비/버튼 */
  --mkt-teal-hover:    #007A77;   /* teal 호버 */

  /* 중립 컬러 */
  --mkt-black:         #1A1A1A;
  --mkt-gray:          #6B7280;
  --mkt-border:        #E5E7EB;
  --mkt-white:         #FFFFFF;

  /* 푸터 전용 컬러 */
  --mkt-footer-bg:     #2D2D2D;
  --mkt-footer-title:  #FFFFFF;
  --mkt-footer-text:   #A3AFA8;
  --mkt-footer-desc:   #E2E8F0;
  --mkt-footer-copy:   #6B7280;
  --mkt-footer-line:   rgba(255, 255, 255, 0.1);
  --mkt-glow-blue:     rgba(103, 166, 236, 0.30);
  --mkt-glow-purple:   rgba(154, 124, 188, 0.25);
  --mkt-cta-grad-from: #6FA2E7;
  --mkt-cta-grad-to:   #C6AA7A;

  /* 타이포 */
  --mkt-font:          'DM Sans', sans-serif;

  /* 레이아웃 */
  --mkt-pad-h:         60px;
  --mkt-pad-v:         80px;
  --mkt-max-w:         1300px;
  --mkt-footer-max-w:  1200px;
  --mkt-radius:        10px;
  --mkt-card-border:   1px solid var(--mkt-teal);
}

/* ================================================================
   1. 페이지 / 래퍼 리셋 · 공용 요소
   ================================================================ */
.mkt-page,
.mkt-page .sapMPageBgStandard {
  background-color: var(--mkt-white) !important;
}

.mkt-page .sapMPage > section {
  padding: 0 !important;
}

.mkt-wrap {
  width: 100%;
  max-width: var(--mkt-max-w);
  margin: 0 auto !important;
}

/* ── 구분선 ── */
hr.mkt-divider {
  border: none;
  border-top: 1px solid var(--mkt-border);
  margin: 0 var(--mkt-pad-h);
}

/* ── 섹션 태그 (소제목 라벨) ── */
.mkt-tag.sapMText {
  font-family: var(--mkt-font) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--mkt-accent) !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
  display: block !important;
  margin-bottom: 12px !important;
}

/* ── 섹션 대제목 (공용) ── */
.mkt-section-title.sapMText {
  font-family: var(--mkt-font) !important;
  font-size: 36px !important;
  font-weight: 800 !important;
  color: var(--mkt-black) !important;
  letter-spacing: -1px !important;
  margin-bottom: 36px !important;
  display: block !important;
}

/* ================================================================
   2. HEADER
   ================================================================ */
.mkt-header.sapMBar {
  background-color: var(--mkt-white) !important;
  border-bottom: 1px solid var(--mkt-border) !important;
  box-shadow: none !important;
  height: 72px !important;
  padding: 0 !important;
  position: relative !important; 
  overflow: visible !important;
}

.mkt-header.sapMBar .sapMBarMiddle {
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mkt-header-inner {
  width: 100% !important;
  max-width: var(--mkt-max-w) !important;
  margin: 0 auto !important;
  padding: 0 var(--mkt-pad-h) !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* ── 로고 ── */
.mkt-logo { gap: 0 !important; }

.mkt-logo-bold.sapMText,
.mkt-logo-regular.sapMText {
  font-family: var(--mkt-font) !important;
  font-size: 22px !important;
  color: var(--mkt-teal) !important;
  letter-spacing: -0.5px !important;
  line-height: 1 !important;
}

.mkt-logo-bold.sapMText    { font-weight: 800 !important; }
.mkt-logo-regular.sapMText { font-weight: 400 !important; }

.mkt-logo img:focus,
.mkt-logo img:active,
.mkt-logo img:focus-visible {
    outline: none !important;
}

.mkt-logo .sapMImgFocusable:focus,
.mkt-logo .sapMImgFocusable:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* ── 네비게이션 ── */
.mkt-nav { gap: 0 !important; }

.mkt-nav-btn.sapMBtn .sapMBtnInner {
  font-family: var(--mkt-font) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--mkt-teal) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 18px !important;
  height: auto !important;
  border-radius: 0 !important;
  letter-spacing: -0.2px !important;
}

.mkt-nav-btn.sapMBtn .sapMBtnInner:hover {
  color: var(--mkt-teal-hover) !important;
  background: transparent !important;
}

/* 헤더 버튼 파란 테두리 완전 제거 — 본체(.sapMBtn) + 안쪽(.sapMBtnInner) 모두 */
.mkt-nav-btn.sapMBtn,
.mkt-nav-btn.sapMBtn:focus,
.mkt-nav-btn.sapMBtn:focus-within,
.mkt-nav-btn.sapMBtn.sapMBtnActive,
.mkt-nav-btn.sapMBtn .sapMBtnInner,
.mkt-nav-btn.sapMBtn:focus .sapMBtnInner {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* UI5 포커스 링이 가상 요소로 그려지는 경우까지 차단 */
.mkt-nav-btn.sapMBtn:focus::after,
.mkt-nav-btn.sapMBtn:focus::before,
.mkt-nav-btn.sapMBtn .sapMBtnInner::after,
.mkt-nav-btn.sapMBtn .sapMBtnInner::before {
  display: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  content: none !important;
}

/* CTA 버튼은 평상시 teal 테두리 유지, 포커스 시 파란색만 teal로 강제 */
.mkt-cta-btn.sapMBtn:focus,
.mkt-cta-btn.sapMBtn:focus-within,
.mkt-cta-btn.sapMBtn.sapMBtnActive,
.mkt-cta-btn.sapMBtn:focus .sapMBtnInner {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--mkt-teal) !important;
}
.mkt-cta-btn.sapMBtn:focus::after,
.mkt-cta-btn.sapMBtn .sapMBtnInner::after {
  display: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── CTA 버튼 (Project consultation) ── */
.mkt-cta-btn.sapMBtn {
  height: 38px !important;
  padding: 0 !important;
}

.mkt-cta-btn.sapMBtn .sapMBtnInner {
  font-family: var(--mkt-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--mkt-white) !important;
  background-color: var(--mkt-teal) !important;
  border: 1px solid var(--mkt-teal) !important;
  border-radius: 8px !important;
  padding: 0 24px !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  letter-spacing: -0.2px !important;
  text-shadow: none !important;
  background-image: none !important;
}

.mkt-cta-btn.sapMBtn .sapMBtnInner:hover {
  background-color: var(--mkt-teal-hover) !important;
  border-color: var(--mkt-teal-hover) !important;
}

.mkt-cta-btn.sapMBtn .sapMBtnInner:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* ── 우측 액션(메뉴 + CTA) 간격 ── */
.mkt-header-right-actions {
  gap: 24px !important;
  height: 100% !important;
}

/* ================================================================
   3. HERO
   ================================================================ */
.mkt-hero {
  padding: 64px var(--mkt-pad-h) 80px !important;
  gap: 40px !important;
  align-items: stretch !important;   /* 전체폭 세로 배치 */
}

/* ── 텍스트 영역 (전체폭, 좌측 정렬) ── */
.mkt-hero-title {
  opacity: 0;
  animation: heroFadeUp 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  gap: 20px !important;
  align-items: flex-start !important;
  width: 100% !important;
}

/* NEXT MARKETING 알약 라벨 */
.mkt-hero-pill.sapMText {
  font-family: var(--mkt-font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--mkt-teal) !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
  border: 1px solid var(--mkt-teal) !important;
  border-radius: 999px !important;
  padding: 8px 20px !important;
  display: inline-block !important;
  width: fit-content !important;
}

/* 메인 제목 (FormattedText) */
.mkt-maintitle .sapMFT,
.mkt-maintitle {
  font-family: var(--mkt-font) !important;
  font-size: 36px !important;
  font-weight: 300 !important;
  color: var(--mkt-black) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.8px !important;
  width: 100% !important;
}

.mkt-maintitle strong {
  font-weight: 800 !important;
  color: var(--mkt-black) !important;
}

.mkt-hero-desc {
  max-width: 900px !important;
  gap: 0px !important;
}

.mkt-desc-text.sapMText {
  font-family: var(--mkt-font) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: var(--mkt-gray) !important;
  line-height: 1.5 !important;
}


/* ── 이미지 + 겹친 카드 컨테이너 ── */
.mkt-hero-media {
  position: relative !important;
  width: 100% !important;
  opacity: 0;
  animation: heroFadeUp 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 0.3s;
}

/* 좌측 하단 겹친 카드 */
.mkt-hero-card.mkt-hero-card-overlay {
  position: absolute !important;
  left: 72px !important;
  bottom: 32px !important;
  width: 36% !important;
  max-width: 440px !important;
  background: rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25) !important;
  z-index: 2 !important;
}

/* overlay 카드 안 글자색 (투명 배경 위라 밝게) */
.mkt-hero-card-overlay .mkt-hero-card-tag.sapMText {
  color: var(--mkt-accent) !important;   /* AI/AX POWERED — 주황 유지(잘 보임) */
}

.mkt-hero-card-overlay .mkt-hero-card-title.sapMText {
  color: var(--mkt-white) !important;
}

.mkt-hero-card-overlay .mkt-hero-card-desc.sapMText {
  color: rgba(255, 255, 255, 0.9) !important;
}

.mkt-hero-card-overlay .mkt-hero-chip.sapMText {
  color: var(--mkt-white) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

/* ── 메인 이미지 (전체폭) ── */
.mkt-hero-img {
  overflow: hidden !important;
  border-radius: var(--mkt-radius) !important;
  box-sizing: border-box !important;
  opacity: 0;
  animation: heroFadeUp 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 0.3s;
}

.mkt-hero-img img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: var(--mkt-radius) !important;
}

/* ── AI/AX 카드 ── */
.mkt-hero-card {
  border: var(--mkt-card-border) !important;
  border-radius: var(--mkt-radius) !important;
  padding: 22px 24px !important;
  gap: 10px !important;
  background: var(--mkt-white) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04) !important;
  box-sizing: border-box !important;
}

.mkt-hero-card-tag.sapMText {
  font-family: var(--mkt-font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--mkt-accent) !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
}

.mkt-hero-card-title.sapMText {
  font-family: var(--mkt-font) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--mkt-teal) !important;
  letter-spacing: -0.5px !important;
}

.mkt-hero-card-desc.sapMText {
  font-family: var(--mkt-font) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--mkt-gray) !important;
  line-height: 1.55 !important;
}

/* ── 칩 ── */
.mkt-hero-chips {
  gap: 10px !important;
  margin-top: 8px !important;
}

.mkt-hero-chip.sapMText {
  font-family: var(--mkt-font) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--mkt-teal) !important;
  border: 1px solid var(--mkt-teal) !important;
  border-radius: 999px !important;
  padding: 4px 12px !important;
}


/* ================================================================
   4. HIGHLIGHTS (통계 4개)
   ================================================================ */
.mkt-stats {
  padding: var(--mkt-pad-v) var(--mkt-pad-h) !important;
  gap: 24px !important;
}

.mkt-stat-item {
  flex: 1 !important;
  gap: 8px !important;
}

.mkt-stat-num.sapMText {
  font-family: var(--mkt-font) !important;
  font-size: 36px !important;
  font-weight: 800 !important;
  color: var(--mkt-teal) !important;
  letter-spacing: -0.5px !important;
  text-align: center !important;
}

.mkt-stat-label.sapMText {
  font-family: var(--mkt-font) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--mkt-gray) !important;
  text-align: center !important;
}

/* ================================================================
   5. EXECUTIVE SUMMARY
   ================================================================ */
.mkt-transform {
  padding: var(--mkt-pad-v) var(--mkt-pad-h) !important;
  gap: 60px !important;
  align-items: flex-start !important;   /* 우측 단락이 길어 상단 정렬 */
}

.mkt-transform-left {
  flex: 1 !important;
  max-width: 520px !important;
}

.mkt-transform-title.sapMText {
  font-family: var(--mkt-font) !important;
  font-size: 36px !important;
  font-weight: 800 !important;
  color: var(--mkt-black) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.8px !important;
}

.mkt-transform-right {
  flex: 1 !important;
  padding-top: 8px;
  gap: 20px !important;                  /* 강조 문장 + 단락 2개 간격 */
}

/* 우측 상단 강조 문장 (검정·볼드, 일부 더 굵게) */
.mkt-transform-lead .sapMFT,
.mkt-transform-lead {
  font-family: var(--mkt-font) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--mkt-black) !important;
  line-height: 1.5 !important;
}

.mkt-transform-lead strong {
  font-weight: 800 !important;
  color: var(--mkt-black) !important;
}

.mkt-transform-desc.sapMText {
  font-family: var(--mkt-font) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: var(--mkt-gray) !important;
  line-height: 1.8 !important;
}

/* ================================================================
   6. CORE VALUE & IDENTITY
   ================================================================ */
.mkt-core {
  padding: var(--mkt-pad-v) var(--mkt-pad-h) !important;
}

/* 제목·태그만 가운데 정렬 (카드 내부는 좌측 유지) */
.mkt-core-centered .mkt-tag.sapMText,
.mkt-core-centered .mkt-section-title.sapMText {
  text-align: center !important;
}

.mkt-cards-grid.sapUiLayout {
  width: 100% !important;
}

.mkt-ai-card {
  border: var(--mkt-card-border) !important;
  border-radius: var(--mkt-radius) !important;
  padding: 36px 28px !important;
  gap: 10px !important;
  background: var(--mkt-white) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
  min-height: 280px !important;
  box-sizing: border-box !important;
}

.mkt-ai-card:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-2px) !important;
}

/* 카드 아이콘 (이모지) */
.mkt-card-icon.sapMText {
  font-size: 32px !important;
  line-height: 1 !important;
  margin-bottom: 12px !important;
}

.mkt-card-num.sapMText {
  font-family: var(--mkt-font) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--mkt-teal) !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

.mkt-card-title.sapMText {
  font-family: var(--mkt-font) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--mkt-black) !important;
  line-height: 1.4 !important;
}

.mkt-card-desc.sapMText {
  font-family: var(--mkt-font) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--mkt-gray) !important;
  line-height: 1.65 !important;
}

/* ── 가운데 강조 카드 (teal 배경) ── */
.mkt-ai-card-featured {
  background: var(--mkt-teal) !important;
  border-color: var(--mkt-teal) !important;
}

.mkt-ai-card-featured .mkt-card-num.sapMText {
  color: rgba(255, 255, 255, 0.7) !important;
}

.mkt-ai-card-featured .mkt-card-title.sapMText {
  color: var(--mkt-white) !important;
}

.mkt-ai-card-featured .mkt-card-desc.sapMText {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ================================================================
   7. OUR SERVICES & SOLUTIONS
   ================================================================ */
/* 섹션 좌우 패딩은 행(row)이 자체적으로 가져가므로 컨테이너는 패딩 없이 */
.mkt-services {
  padding: var(--mkt-pad-v) 0 !important;
}

/* 제목·태그·부제는 가운데 정렬, 좌우 패딩 부여 */
.mkt-services-tag.sapMText,
.mkt-services-titlemain.sapMText {
  text-align: center !important;
  padding: 0 var(--mkt-pad-h) !important;
}

.mkt-services-subtitle.sapMText {
  font-family: var(--mkt-font) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: var(--mkt-gray) !important;
  line-height: 1.6 !important;
  padding: 0 var(--mkt-pad-h) !important;
  margin-bottom: 40px !important;
  text-align: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ── 서비스 행 (번호 + 아이콘 + 본문) ── */
.mkt-service-row {
  padding: 48px var(--mkt-pad-h) !important;
  gap: 28px !important;
  align-items: flex-start !important;
}

/* 짝수 행 회색 배경 */
.mkt-service-row-alt {
  background-color: #F5F6F5 !important;
  border-radius: var(--mkt-radius) !important;
}

.mkt-service-num.sapMText {
  font-family: var(--mkt-font) !important;
  font-size: 40px !important;
  font-weight: 800 !important;
  color: var(--mkt-black) !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  min-width: 56px !important;
}

.mkt-service-icon.sapMText {
  font-size: 30px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

.mkt-service-body {
  flex: 1 !important;
  gap: 8px !important;
}

.mkt-service-eyebrow.sapMText {
  font-family: var(--mkt-font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--mkt-teal) !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
}

.mkt-service-title.sapMText {
  font-family: var(--mkt-font) !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  color: var(--mkt-black) !important;
  letter-spacing: -0.5px !important;
}

.mkt-service-lead.sapMText {
  font-family: var(--mkt-font) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  font-style: italic !important;
  color: var(--mkt-gray) !important;
  line-height: 1.5 !important;
  margin-bottom: 8px !important;
}

/* ── AI/AX APPLIED 박스 ── */
.mkt-service-aibox {
  background-color: rgba(0, 89, 87, 0.05) !important;
  border-left: 3px solid var(--mkt-teal) !important;
  border-radius: 8px !important;
  padding: 20px 24px !important;
  gap: 12px !important;
}

.mkt-service-aibadge.sapMText {
  font-family: var(--mkt-font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--mkt-white) !important;
  background-color: var(--mkt-teal) !important;
  border-radius: 6px !important;
  padding: 5px 12px !important;
  letter-spacing: 0.5px !important;
  display: inline-block !important;
  width: fit-content !important;
}

.mkt-service-aitext.sapMText {
  font-family: var(--mkt-font) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--mkt-gray) !important;
  line-height: 1.7 !important;
}

/* ── 칩 ── */
.mkt-service-chips {
  gap: 10px !important;
  margin-top: 16px !important;
}

.mkt-service-chip.sapMText {
  font-family: var(--mkt-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--mkt-black) !important;
  background-color: var(--mkt-white) !important;
  border: 1px solid var(--mkt-border) !important;
  border-radius: 999px !important;
  padding: 7px 16px !important;
}

/* ================================================================
   8. THE SPRONEXT ENGINE
   ================================================================ */
.mkt-engine {
  padding: var(--mkt-pad-v) var(--mkt-pad-h) !important;
}

/* 제목·태그·부제 가운데 정렬 */
.mkt-engine-tag.sapMText,
.mkt-engine-titlemain.sapMText {
  text-align: center !important;
}

.mkt-engine-subtitle.sapMText {
  font-family: var(--mkt-font) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: var(--mkt-gray) !important;
  line-height: 1.6 !important;
  text-align: center !important;
  width: 100% !important;
  margin-bottom: 56px !important;
}

/* ── 2x2 그리드 래퍼 (중앙 허브 절대배치 기준) ── */
.mkt-engine-grid-wrap {
  position: relative !important;
  display: grid !important;
  /* 카드 | 화살표 | 카드 */
  grid-template-columns: 1fr auto 1fr !important;
  align-items: stretch !important;
  justify-items: center !important;
  column-gap: 32px !important;
  row-gap: 32px !important;
}

/* 카드가 셀 폭·높이를 꽉 채우도록 (같은 행 카드 높이 통일) */
.mkt-engine-grid-wrap .mkt-engine-card {
  width: 100% !important;
  height: 100% !important;
  max-height: 300px;
}

/* 중간 행 가운데 빈칸(허브가 올라갈 자리) */
.mkt-engine-spacer {
  width: 100% !important;
  height: 100% !important;
}

/* ── 엔진 카드 ── */
.mkt-engine-card {
  border: 1px solid var(--mkt-border) !important;
  border-radius: var(--mkt-radius) !important;
  padding: 32px !important;
  gap: 8px !important;
  background: var(--mkt-white) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
  min-height: 220px !important;
  box-sizing: border-box !important;
}

.mkt-engine-card:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-2px) !important;
  border-color: var(--mkt-teal) !important;
}

.mkt-engine-icon.sapMText {
  font-size: 30px !important;
  line-height: 1 !important;
  margin-bottom: 12px !important;
}

.mkt-engine-eyebrow.sapMText {
  font-family: var(--mkt-font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--mkt-teal) !important;
  letter-spacing: 0.3px !important;
}

.mkt-engine-title.sapMText {
  font-family: var(--mkt-font) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--mkt-black) !important;
  letter-spacing: -0.5px !important;
}

.mkt-engine-desc.sapMText {
  font-family: var(--mkt-font) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--mkt-gray) !important;
  line-height: 1.65 !important;
  margin-top: 4px !important;
}

/* ── 중앙 허브 (2x2 교차점에 절대배치) ── */
.mkt-engine-hub {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 120px !important;
  height: 120px !important;
  border-radius: 50% !important;
  background: var(--mkt-teal) !important;
  box-shadow: 0 0 0 8px rgba(0, 89, 87, 0.12), 0 8px 24px rgba(0, 89, 87, 0.25) !important;
  z-index: 5 !important;
  gap: 4px !important;
}

.mkt-engine-hub-icon.sapMText {
  font-size: 22px !important;
  line-height: 1 !important;
}

.mkt-engine-hub-text.sapMText {
  font-family: var(--mkt-font) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: var(--mkt-white) !important;
  text-align: center !important;
  letter-spacing: 0.5px !important;
  line-height: 1.25 !important;
}

/* ── 연결 화살표 (그리드 셀 안 배치) ── */
.mkt-engine-arrow.sapMText {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--mkt-teal) !important;
  text-align: center !important;
  z-index: 1 !important;
}

/* 가로 화살표(→) 셀: 카드 행 높이를 꽉 채우고 그 안에서 중앙 */
.mkt-engine-arrow-h.sapMText {
  align-self: stretch !important;
  justify-self: stretch !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 세로 화살표(↓) 셀: 중간 행을 꽉 채우고 그 안에서 중앙 */
.mkt-engine-arrow-v.sapMText {
  align-self: stretch !important;
  justify-self: stretch !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ── 하단 프로세스 플로우 바 ── */
.mkt-engine-flow {
  margin-top: 40px !important;
  border: 1px solid var(--mkt-border) !important;
  border-radius: var(--mkt-radius) !important;
  padding: 24px 32px !important;
  gap: 12px !important;
}

/* 항목 한 칸(● + 라벨) */
.mkt-engine-flow-cell {
  gap: 7px !important;
}

/* ● 동그라미 (teal) */
.mkt-engine-flow-dot.sapMText {
  font-size: 10px !important;
  color: var(--mkt-teal) !important;
  line-height: 1 !important;
}

/* 라벨 글자 (회색) */
.mkt-engine-flow-item.sapMText {
  font-family: var(--mkt-font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--mkt-gray) !important;
}

/* 마지막 항목 라벨만 teal 강조 */
.mkt-engine-flow-item-last.sapMText {
  color: var(--mkt-teal) !important;
}

/* 구분 화살표 (teal) */
.mkt-engine-flow-sep.sapMText {
  font-family: var(--mkt-font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--mkt-teal) !important;
  margin: 0 4px !important;
}


/* ================================================================
   8-1. WHY SPRONEXT?
   ================================================================ */
.mkt-why {
  padding: var(--mkt-pad-v) var(--mkt-pad-h) !important;
}

/* 제목·태그·부제 가운데 정렬 */
.mkt-why-tag.sapMText,
.mkt-why-titlemain.sapMText {
  text-align: center !important;
}

.mkt-why-subtitle.sapMText {
  font-family: var(--mkt-font) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: var(--mkt-gray) !important;
  line-height: 1.6 !important;
  text-align: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 40px !important;
}

/* ── 카드 ── */
.mkt-why-card {
  border: 1px solid var(--mkt-border) !important;
  border-radius: var(--mkt-radius) !important;
  padding: 32px 28px !important;
  gap: 10px !important;
  background: var(--mkt-white) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
  
  min-height: 360px !important;
  height: 100%;
  box-sizing: border-box !important;
}

.mkt-why-card:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-2px) !important;
}

/* 번호 (teal) */
.mkt-why-num.sapMText {
  font-family: var(--mkt-font) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--mkt-teal) !important;
  letter-spacing: 0.5px !important;
}

/* 아이콘 (이모지) */
.mkt-why-icon.sapMText {
  font-size: 30px !important;
  line-height: 1 !important;
  margin: 8px 0 4px !important;
}

/* 제목 (black) */
.mkt-why-title.sapMText {
  font-family: var(--mkt-font) !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  color: var(--mkt-black) !important;
  line-height: 1.35 !important;
  letter-spacing: -0.3px !important;
}

/* 본문 (FormattedText) */
.mkt-why-desc .sapMFT,
.mkt-why-desc {
  font-family: var(--mkt-font) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--mkt-gray) !important;
  line-height: 1.7 !important;
}

/* 본문 강조어 (bold, 검정) */
.mkt-why-desc strong {
  font-weight: 700 !important;
  color: var(--mkt-black) !important;
}


/* ================================================================
   8-2. HOW WE WORK
   ================================================================ */
.mkt-howwork {
  padding: var(--mkt-pad-v) var(--mkt-pad-h) !important;
}

/* 제목·태그·부제 가운데 정렬 */
.mkt-howwork-tag.sapMText,
.mkt-howwork-titlemain.sapMText {
  text-align: center !important;
}

.mkt-howwork-subtitle.sapMText {
  font-family: var(--mkt-font) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: var(--mkt-gray) !important;
  line-height: 1.6 !important;
  text-align: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 48px !important;
}

/* ── 카드 → 카드 → 카드 → 카드 (7열) ── */
.mkt-howwork-grid {
  display: grid !important;
  /* 카드 화살표 카드 화살표 카드 화살표 카드 */
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr !important;
  align-items: stretch !important;
  justify-items: center !important;
  column-gap: 16px !important;
  overflow-x: scroll;
}

/* ── 카드 ── */
.mkt-howwork-grid .mkt-howwork-card {
  border: 1px solid var(--mkt-border) !important;
  border-radius: var(--mkt-radius) !important;
  padding: 28px 24px !important;
  gap: 8px !important;
  background: var(--mkt-white) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
  min-height: 240px !important;
  width: 100% !important;
  min-width: 200px;
  box-sizing: border-box !important;
}

.mkt-howwork-grid .mkt-howwork-card:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-2px) !important;
}

/* 번호 (teal, 큼직) */
.mkt-howwork-num.sapMText {
  font-family: var(--mkt-font) !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  color: var(--mkt-teal) !important;
  line-height: 1 !important;
}

/* 영문 단계 라벨 */
.mkt-howwork-eyebrow.sapMText {
  font-family: var(--mkt-font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--mkt-teal) !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  margin-top: 8px !important;
}

/* 제목 (black) */
.mkt-howwork-title.sapMText {
  font-family: var(--mkt-font) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--mkt-black) !important;
  line-height: 1.35 !important;
  letter-spacing: -0.3px !important;
}

/* 본문 */
.mkt-howwork-desc.sapMText {
  font-family: var(--mkt-font) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--mkt-gray) !important;
  line-height: 1.6 !important;
  margin-top: 4px !important;
}

/* ── 04 강조 카드 (teal 배경) ── */
.mkt-howwork-grid .mkt-howwork-card-featured {
  background: var(--mkt-teal) !important;
  border-color: var(--mkt-teal) !important;
}

.mkt-howwork-card-featured .mkt-howwork-num.sapMText {
  color: rgba(255, 255, 255, 0.45) !important;
}

.mkt-howwork-card-featured .mkt-howwork-eyebrow.sapMText {
  color: rgba(255, 255, 255, 0.8) !important;
}

.mkt-howwork-card-featured .mkt-howwork-title.sapMText {
  color: var(--mkt-white) !important;
}

.mkt-howwork-card-featured .mkt-howwork-desc.sapMText {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ── 화살표 (셀 안 중앙) ── */
.mkt-howwork-arrow.sapMText {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--mkt-teal) !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}



/* ================================================================
   9. CONTACT US & FOOTER
   ================================================================ */
.mkt-footer-wrapper {
  position: relative;
  background-color: var(--mkt-footer-bg) !important;
  overflow: hidden;
  width: 100%;
  /* max-width: var(--mkt-footer-max-w) !important; */
  margin: 0 auto !important;
  z-index: 0;
}

/* ── 푸터 영역 글자 번짐(text-shadow) 제거 ── */
.mkt-footer-wrapper .sapMText,
.mkt-footer-wrapper .sapMLnk,
.mkt-footer-wrapper .sapMBtn,
.mkt-footer-wrapper .sapMBtnInner,
.mkt-footer-wrapper .sapUiIcon {
  text-shadow: none !important;
}

/* ── 배경 글로우 효과 ── */
.mkt-glow-blue,
.mkt-glow-purple {
  position: absolute;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  pointer-events: none;
}

.mkt-glow-blue {
  background: radial-gradient(circle, var(--mkt-glow-blue) 0%, rgba(103, 166, 236, 0) 70%);
  top: 15%;
  left: 10%;
}

.mkt-glow-purple {
  background: radial-gradient(circle, var(--mkt-glow-purple) 0%, rgba(154, 124, 188, 0) 70%);
  top: 30%;
  right: 15%;
}

/* ── Contact Us 섹션 ── */
.mkt-contact-section {
  padding: 100px var(--mkt-pad-h) 80px !important;
  max-width: 800px !important;
  margin: 0 auto !important;
  z-index: 1;
}

.mkt-contact-title.sapMText {
  font-family: var(--mkt-font) !important;
  font-size: 44px !important;
  font-weight: 600 !important;
  color: var(--mkt-footer-title) !important;
  margin-bottom: 24px !important;
}

.mkt-contact-desc.sapMText {
  font-family: var(--mkt-font) !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  color: var(--mkt-footer-desc) !important;
  line-height: 1.7 !important;
  margin-bottom: 40px !important;
}

/* ── GET IN TOUCH 버튼 ── */
.mkt-contact-btn.sapMBtn .sapMBtnInner {
  font-family: var(--mkt-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--mkt-white) !important;
  background: linear-gradient(90deg, var(--mkt-cta-grad-from), var(--mkt-cta-grad-to)) !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 0 32px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: -1;
}

.mkt-contact-btn.sapMBtn .sapMBtnInner:hover {
  opacity: 0.9 !important;
}

/* ── 하단 Footer ── */
.mkt-footer {
  padding: 0 var(--mkt-pad-h) 80px !important;
  max-width: 800px;
  margin: 0 auto !important;
  z-index: 1;
}

.mkt-footer-grid.sapUiLayout {
  width: 100% !important;
  margin-bottom: 60px !important;
}

.mkt-footer-col {
  gap: 16px !important;
}

.mkt-footer-col-title.sapMText {
  font-family: var(--mkt-font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--mkt-footer-title) !important;
  margin-bottom: 12px !important;
  display: block !important;
}

.mkt-footer-link.sapMLnk,
.mkt-footer-link .sapMLnk {
  font-family: var(--mkt-font) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--mkt-footer-text) !important;
  text-decoration: none !important;
}

.mkt-footer-link.sapMLnk:hover {
  color: var(--mkt-white) !important;
}

/* ── 연락처 항목 (아이콘 + 텍스트) ── */
.mkt-contact-item {
  gap: 12px !important;
  align-items: flex-start !important;
}

.mkt-contact-icon.sapUiIcon {
  font-size: 16px !important;
  color: var(--mkt-white) !important;
  margin-top: 2px !important;
}

.mkt-footer-text.sapMText {
  font-family: var(--mkt-font) !important;
  font-size: 13px !important;
  color: var(--mkt-footer-text) !important;
  line-height: 1.65 !important;
}

/* ── 소셜 미디어 버튼 ── */
.mkt-social-icons {
  gap: 16px !important;
}

.mkt-social-btn-new.sapMBtn {
  height: 24px !important;
  padding: 0 !important;
}

.mkt-social-btn-new.sapMBtn .sapMBtnInner {
  background-color: transparent !important;
  border: none !important;
  color: var(--mkt-white) !important;
  font-size: 18px !important;
  padding: 0 !important;
  width: auto !important;
}

.mkt-social-btn-new.sapMBtn .sapMBtnInner:hover {
  color: var(--mkt-cta-grad-to) !important;
}

/* ── Copyright 구분선 및 텍스트 ── */
hr.mkt-footer-divider {
  border: none;
  border-top: 1px solid var(--mkt-footer-line);
  margin: 0 0 30px;
}

.mkt-footer-copy.sapMText {
  font-family: var(--mkt-font) !important;
  font-size: 12px !important;
  color: var(--mkt-footer-copy) !important;
  text-align: center !important;
}

/* ================================================================
   10. 공용 모션 (control-bar / scroll reveal / keyframes)
   ================================================================ */
/* ── 스크롤 리빌 ── */
.mkt-scroll-section .reveal-item {
    opacity: 0 !important;
    transform: translateY(50px) !important; /* 30px 아래에서 대기 */
    
    /* 제자리로 돌아올 때의 부드러운 속도 곡선 */
    transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1) , 
                opacity 1s cubic-bezier(0.25, 1, 0.5, 1),
                box-shadow 0.2s ease !important;
}

.mkt-scroll-section.mkt-active .reveal-item {
    opacity: 1 !important;
    transform: translateY(0) !important; /* 제자리 안착 */
}

.mkt-scroll-section.mkt-active .delay-1 { transition-delay: 0.0s !important; }
.mkt-scroll-section.mkt-active .delay-2 { transition-delay: 0.3s !important; }
.mkt-scroll-section.mkt-active .delay-3 { transition-delay: 0.6s !important; }
.mkt-scroll-section.mkt-active .delay-4 { transition-delay: 0.9s !important; }
.mkt-scroll-section.mkt-active .delay-5 { transition-delay: 1.2s !important; }
.mkt-scroll-section.mkt-active .delay-6 { transition-delay: 1.5s !important; }

/* ── HERO 등장 키프레임 ── */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   11. RESPONSIVE
   ================================================================ */
@media (max-width: 1024px) {
    .mkt-page {
        --mkt-pad-h: 32px;
        --mkt-pad-v: 60px;
    }

    .mkt-hero-card.mkt-hero-card-overlay {
        display: none;
    }


    .mkt-engine-grid-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 24px !important;
    width: 100% !important;
  }

  
  .mkt-engine-arrow,
  .mkt-engine-arrow-h,
  .mkt-engine-arrow-v,
  .mkt-engine-spacer {
    display: none !important;
  }

 
  .mkt-engine-grid-wrap .mkt-engine-card {
    width: 100% !important;
    max-width: 600px !important; 
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    padding: 28px !important;
  }

  
  .mkt-engine-hub {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 auto 12px !important;
    
    
    grid-column: auto !important;
    order: -1 !important; 
    
    width: 110px !important;
    height: 110px !important;
    flex-shrink: 0 !important;
  }

  .mkt-engine-arrow,
  .mkt-engine-arrow-h,
  .mkt-engine-arrow-v,
  .mkt-engine-spacer {
    display: none !important;
  }
}


@media screen and (max-width: 1023px) and (min-width: 568px) {
    .mkt-stat-item {
        flex: 1 1 calc(50% - 1.5rem) !important;
        max-width: calc(50% - 1.5rem) !important;
    }

    
    .mkt-engine-grid-wrap {
        grid-template-columns: 1fr 1fr !important;
    }

    
    .mkt-engine-grid-wrap .mkt-engine-card {
        max-height: none !important;     
        height: auto !important;         
        overflow: visible !important;   
    }

    .mkt-engine-grid-wrap .mkt-engine-card {
        max-width: 100% !important;
        padding: 24px !important; 
    }

    
    .mkt-engine-flow {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 20px !important;
    }

    .mkt-engine-flow-cell {
        width: 100% !important;
        justify-content: center !important;
    }

    .mkt-engine-flow-sep {
        transform: rotate(90deg) !important;
        margin: 6px 0 !important;
        display: inline-block !important;
    }

    
    .mkt-engine-grid-wrap > div:has(.mkt-engine-arrow),
    .mkt-engine-grid-wrap > div:has(.mkt-engine-spacer),
    .mkt-engine-arrow,
    .mkt-engine-arrow-h,
    .mkt-engine-arrow-v,
    .mkt-engine-spacer {
        display: none !important;
    }
}

/* ==========================================================================
   3. 모바일 구간 (567px 이하 전체) 
   ========================================================================== */
@media (max-width: 567px) {
    .mkt-page {
        --mkt-pad-h: 20px;
        --mkt-pad-v: 48px;
    }

    .mkt-title-light.sapMText,
    .mkt-title-bold.sapMText { 
        font-size: 34px !important; 
    }
    
    .mkt-stat-item {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        text-align: center;
        margin-bottom: 1.5rem; 
    }
    
    .mkt-stat-item:last-child {
        margin-bottom: 0px;
    }

    .mkt-transform,
    .mkt-optimization { 
        flex-direction: column !important; 
        gap: 32px !important; 
    }

    .mkt-transform-left,
    .mkt-opt-left { 
        max-width: 100% !important; 
    }

    .mkt-header .sapMBarLeft   { padding-left: 20px !important; }
    .mkt-header .sapMBarRight  { padding-right: 20px !important; }
    .mkt-header .sapMBarMiddle { display: none !important; }

    .mkt-header-right-actions { gap: 12px !important; }

    .mkt-stats {
        justify-content: center !important;
    }

    
    .mkt-engine-grid-wrap .mkt-engine-card {
        max-height: none !important;
        height: auto !important;
        overflow: visible !important; 
    }

    .mkt-service-icon {
        display: none;
    }
    .mkt-service-row {
        gap: 4px !important;
    }

    /* 🎯 모바일 유령 래퍼 박멸 */
    .mkt-engine-grid-wrap > div:has(.mkt-engine-arrow),
    .mkt-engine-grid-wrap > div:has(.mkt-engine-spacer),
    .mkt-engine-arrow,
    .mkt-engine-arrow-h,
    .mkt-engine-arrow-v,
    .mkt-engine-spacer {
        display: none !important;
    }
}