/* KoPub 돋움(로컬 설치 폰트) 적용: navbar-styles.css 맨 위에 추가하세요 */
@font-face {
  font-family: 'KoPub돋움';
  src: local('KoPub돋움체_Pro Medium'); /* 로컬에 설치된 정확한 이름 사용 */
  font-weight: medium; /* Medium에 해당하는 가중치(필요시 600 또는 700으로 조정) */
  font-style: normal;
  font-display: swap;
}

/* (선택) 볼드 스타일이 별도 이름으로 설치되어 있다면 아래처럼 추가하면 좋습니다. */
@font-face {
  font-family: 'KoPub돋움';
  src: local('KoPub돋움체_Pro Bold'); 
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}


:root{
  /* CTA 변수 (통합) */
  --cta-gap: 1.125rem;
  --cta-margin-left: 2.375rem;
  --cta-margin-bottom: 1.5rem;
  --cta-padding-y: 0.9375rem;
  --cta-padding-x: 2.625rem;
  --cta-font-size: 1rem;
  --cta-font-weight: bold;
  --cta-color: #000000;
  --cta-hover-color: #122858;
  --cta-bg: transparent;
  --cta-radius: 1.375rem;
  --cta-transition: color .18s ease;
  --cta-sep-color: #e6e6e6;
  --cta-sep-gap: 0.5rem;      /* cloud 파일에서 사용되는 구분자 간격 변수 */
}

/* 전체 사이트 기본 폰트로 설정 */
body {
  margin: 0;
  padding: 0;
  font-family: 'KoPub돋움', /*'Noto Sans KR', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", */ sans-serif;
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
  min-height: 100vh;
}

/* 네비게이션 바 */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;   /* 또는 100% */
  z-index: 10000;  /* 다른 고정 요소보다 위에 오도록 z-index 상향 조정 */
  height: 3.75rem; /* 60px -> 3.75rem */
  background: #f4f6fb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6.25rem; /* 0 100px -> 0 6.25rem */
  box-sizing: border-box;
}



.logo {
  font-weight: bold;
  color: #2339b4;
  font-size: 1.375rem; /* 22px -> 1.375rem */
}

.logo a {
  color: inherit;
  text-decoration: none;
  font-weight: bold;
  font-size: inherit;
  cursor: pointer;
}
.logo a:hover {
  color: inherit; 
  text-decoration: none;
}



.menu {
  list-style: none;
  display: flex;
  gap: 2rem; /* 32px -> 2rem */
  margin: 0;
  padding: 0;
}

.menu li {
  font-size: 1rem; /* 16px -> 1rem */
  color: #222;
  cursor: pointer;
  position: relative;
}

.menu a {
  color: inherit;         /* 부모의 글씨 색상 상속 */
  text-decoration: none;  /* 밑줄 제거 */
  font-weight: inherit;   /* (필요시) 굵기도 상속 */
}

/* 마우스를 올렸을 때 색상 변화 등 커스텀 */
.menu a:hover,
.menu a:focus {
  color: #38a1db;         /* 원하는 포커스/호버 색상 */
  text-decoration: underline; /* (원하면 호버시만 밑줄) */
}

/* 드롭다운 메뉴와 상위 메뉴 항목 사이의 간격을 채워 마우스 이동 시 메뉴가 닫히는 현상을 방지합니다. */
.menu li::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1.25rem; /* 20px */
  height: 1.25rem;
}

/* 드롭다운 메뉴 기본적으로 숨기기 */
.dropdown-menu {
  display: none;
  position: absolute;
  top: 2.25rem; /* 36px -> 2.25rem */
  left: 0;
  background: #fff;
  border-radius: 0.625rem; /* 10px -> 0.625rem */
  box-shadow: 0 0.125rem 0.625rem rgba(34,57,180,0.08); /* 0 2px 10px -> 0 0.125rem 0.625rem */
  min-width: 8.125rem; /* 130px -> 8.125rem */
  z-index: 10030;
  padding: 0.5rem 0; /* 8px 0 -> 0.5rem 0 */
  list-style: none;         /* ← 동그란 원 없앰 */
  margin: 0;                /* ← 여백 제거 */
}

.dropdown-menu li {
  color: #222;
  padding: 0.625rem 1.25rem; /* 10px 20px -> 0.625rem 1.25rem */
  white-space: nowrap;
    list-style: none;         /* ← 동그란 원 없앰 */
}

.dropdown-menu li:hover {
  background: #f0f4ff;
}

/* 마우스 올렸을 때만 드롭다운 보이기 */
.dropdown:hover .dropdown-menu {
  display: block;
}

@media (max-width: 720px) {
  /* 헤더 전체 스타일 */
  .navbar {
    height: 3.75rem;
    padding: 0 1rem; /* 좌우 모두 1rem으로 축소 */
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    min-width: 320px;
    max-width: 100%;
  }

  /* 햄버거 버튼 (또는 라벨) */
  .hamburger, 
  .menu-toggle {
    margin-right: 4rem;  /* 기존 1rem에서 2rem 으로 간격을 늘림 */
    /* 기존 스타일 유지 */
    display: block !important;
    cursor: pointer;
    position: relative;
    order: 0;
    margin-left: 0;
    padding-left: 0;
    left: 0;
    z-index: 11000;
    font-size: 2rem;
  }

  /* 체크박스 숨기기 */
  input.menu-toggle[type="checkbox"] {
    display: none !important;
  }

  /* 메뉴 스타일 */
  .menu {
    order: 2; /* 헤더 내 상위 순서 */
    display: none; /* 기본 안 보임 */
    flex-direction: column;
    position: absolute;
    top: 3.75rem; /* 헤더 높이 하단 위치 */
    left: 0;
    right: 0;
    background: #f4f6fb;
    padding: 1rem 0;
    z-index: 10999; /* cta 바(9999)보다 높게, 햄버거(11000)보다 낮게 설정 */
    gap: 1rem; /* 메뉴 간격 조정 */
    font-size: 1rem;
    white-space: nowrap;
  }

  /* 체크박스가 체크되면 메뉴 보이기 */
  .menu-toggle:checked + .hamburger + .menu {
    display: flex;
  }

  /* 메뉴 아이템 */
  .menu li {
    padding: 0 1.5rem;
    white-space: nowrap;
    flex: 0 0 auto;
  }

  /* 로고 스타일 */
  .logo {
    order: 1; /* 햄버거 다음 */
    flex-grow: 1;
    font-size: 1.2rem;
    height: 1.2rem;
    margin: 0 auto; /* 좌우 마진 auto로 중앙 배치 */
  }

  .logo img {
    height: 1.3rem;
    width: auto;
  }

  /* --- JS 기반 아코디언 스타일 (v3) --- */
  .dropdown:hover .dropdown-menu {
    display: none; /* 모바일에서 호버 비활성화 */
  }

  /* 드롭다운 항목을 flex로 만들어 링크와 버튼 정렬 */
  .menu .dropdown {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }

  .menu .dropdown > a {
    flex-grow: 1; /* 링크가 남는 공간을 모두 차지하도록 */
  }

  /* 새로운 토글 버튼 스타일 */
  .accordion-toggle-btn {
    display: block;
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    cursor: pointer;
    text-align: center;
    line-height: 2.5rem;
  }

  /* 토글 버튼 아이콘 (+) */
  .accordion-toggle-btn::before {
    content: '+';
    font-size: 1.5rem;
    color: #333;
  }

  /* .open 클래스가 있을 때 아이콘 변경 (-) */
  .dropdown.open .accordion-toggle-btn::before {
    content: '–';
  }

  /* 드롭다운 메뉴 기본 숨김 및 스타일 */
  .dropdown-menu {
    /* flex 아이템이 전체 너비를 차지하도록 설정 */
    flex-basis: 100%; 
    position: static;
    display: none;
    background: #e9edf5;
    box-shadow: none;
    border-radius: 0;
    margin-top: 0.5rem;
    padding: 0.5rem 1rem;
  }

  /* .open 클래스가 있을 때 드롭다운 메뉴 보이기 */
  .dropdown.open .dropdown-menu {
    display: block;
  }

  .dropdown-menu li {
    padding: 0.5rem 0;
  }
  
  .menu a:hover,
  .menu a:focus {
    color: inherit;
    text-decoration: none;
  }
  
  .dropdown-menu li:hover {
    background: none;
  }
}


@media (min-width: 721px) {

    .hamburger {
    display: none;
  }

  .menu-toggle {
    display: none !important;
  }
  .menu {
    display: flex !important;
    position: static;
    flex-direction: row;
    gap: 2rem;
  }
}




















































/* 전체: px -> rem 변환 (기준: 1rem = 16px). 텍스트 크기(요청)는 유지했습니다. */

/* 메인 홈 - 텍스트 정렬/크기/간격 조정 */
.cloud-main-visual {
  width: 100%;
  height: 25rem; /* 400px -> 25rem */
  background: url('2-0. 클라우드 - 복사본.png') center center / cover no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3.75rem; /* 60px -> 3.75rem */
}

.cloud-main-visual-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.36);

  display: flex;
  flex-direction: column;   /* 제목과 설명을 세로로 쌓음 */
  align-items: center;      /* 가로 중앙 정렬 */
  justify-content: center;  /* 세로 중앙 정렬 */
  gap: 1.5rem;              /* 제목과 설명 사이 간격: 1.5rem */
  box-sizing: border-box;
  padding: 0 1rem;          /* 작은 화면 여백 방지 (16px -> 1rem) */
}

.cloud-title {
  color: #eeeeee;
  font-size: 3rem;   /* 메인 타이틀 크기 유지 */
  font-weight: bold;
  margin: 0;         /* gap으로 간격 제어 */
  text-align: center;
}

.cloud-subtitle {
  color: #e3e3e3;
  font-size: 1.3rem; /* 설명 크기 유지 */
  font-weight: medium;
  line-height: 2rem;
  margin: 0;         /* gap으로 간격 제어 */
  text-align: center;
}


@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-in-up {
  opacity: 0;
  animation: fadeInUp 0.9s cubic-bezier(.33, 1.25, .68, 1) forwards;
  animation-delay: 0.2s;
}





/* 클라우드 상세 설명 섹션 - h2 폰트 및 줄간 설정 */
.cloud-detail-section {
  width: 100%;
  background: #fff;
  padding: 4rem 0 4rem 0; /* 64px -> 4rem */
  display: flex;
  justify-content: center;
}

.cloud-detail-inner {
  max-width: 93.75rem; /* 1500px -> 93.75rem */
  width: auto;
  margin: 0 auto;
  text-align: center;
}

.cloud-detail-inner h2 {
  font-size: 2.5rem;      /* 요청: 폰트 크기 2.5rem */
  line-height: 3.5rem;    /* 요청: 줄간 3.5rem (행간) */
  margin-bottom: 1.625rem; /* 기존 하단 여백 유지 (필요시 조정) */
  font-weight: bold;
  color: #122858;
}

/* 클라우드 관련 상세 설명 */
.cloud-service-tabs-section {
  width: 100%;
  background: #ffffff;
  padding: 0 0 6.25rem 0; /* 100px -> 6.25rem */
  max-width: 312.5rem;    /* 5000px -> 312.5rem (대형값을 rem으로 변환) */
  margin: 0 auto;
}

/* 그룹 왼쪽 정렬 유지, flex gap은 사용하지 않음(구분자에 의해 간격 제어) */
.cloud-tab-btn-group {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;                         /* gap을 비활성화 해서 구분자가 중앙에 오도록 함 */
  margin-bottom: var(--cta-margin-bottom);
  margin-left: var(--cta-margin-left);
  box-sizing: border-box;
}

/* 버튼 스타일: 배경 투명, 기본 글자색 #000 */
.cloud-tab-btn {
  padding: var(--cta-padding-y) var(--cta-padding-x);
  font-size: var(--cta-font-size);
  font-weight: var(--cta-font-weight);
  color: var(--cta-color);
  background: var(--cta-bg) !important;
  border: none;
  border-radius: var(--cta-radius);
  cursor: pointer;
  transition: var(--cta-transition);
  outline: none;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  margin: 0; /* 버튼 자체에는 여백을 주지 않음 — 구분자(.cta-sep)로만 간격 제어 */
  z-index: 2;
}

/* hover / active 상태에서 텍스트 색상만 변경 */
.cloud-tab-btn:hover,
.cloud-tab-btn:active,
.cloud-tab-btn.active {
  color: var(--cta-hover-color);
  background: transparent !important;
}

/* 기존에 ::before로 넣어둔 자동 구분자를 사용 중이라면 우선 숨겨 덮어쓰기 */
.cloud-tab-btn + .cloud-tab-btn::before {
  display: none !important;
}

/* 직접 삽입한 구분자(.cta-sep) 스타일 — 이 요소가 IaaS와 MSP 사이에 정확히 오게 됨 */
.cta-sep { 
  display: inline-block;
  color: var(--cta-sep-color);
  margin: 0 var(--cta-sep-gap); /* 구분자와 좌우 버튼 사이 간격을 이 값으로 고정 */
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  vertical-align: middle;
  user-select: none;
  pointer-events: none; /* 클릭 방해 방지 */
  z-index: 1;
}

/* -----------------------------
   CTA styles merged in from cta_styles.css
   These are added so the cloud CSS supports the same CTA wrapper / sticky behavior
   and common CTA button styles used elsewhere.
   ----------------------------- */

/* CTA wrapper는 전체 폭 사용 (v1처럼 왼쪽에 붙도록) */
.cta-wrapper {
  width: 100%;
  box-sizing: border-box;
}

/* CTA 그룹: 기본적으로 왼쪽 정렬 (v1 위치 기준) */
.cta-groups {
  display: flex;
  align-items: center;
  justify-content: flex-start;      /* 왼쪽 정렬 유지 */
  gap: 0;
  padding-left: var(--cta-margin-left); /* 왼쪽 여백: v1 값 */
  margin: 0 0 var(--cta-margin-bottom) 0;
  max-width: none;
  box-sizing: border-box;

  /* sticky 기본값 (브라우저 지원 시) */
  position: -webkit-sticky;
  position: sticky;
  top: 3.75rem; /* 네비 높이와 동일 */
  transition: box-shadow .18s ease, background-color .18s ease, padding .18s ease;
  z-index: 9900;
}

/* 버튼 그룹, 구분자, 버튼 스타일 (공통) */
.cta-groups > .left-group,
.cta-groups > .right-group,
.cta-groups > .ai-tab-btn-group,
.cta-groups > .cloud-tab-btn-group {
  display:flex; gap:var(--cta-gap); align-items:center; margin:0;
}

/* Re-use existing .cloud-tab-btn styles above; add ai-tab and generic cta-btn */
.ai-tab-btn,
.cta-btn {
  padding: var(--cta-padding-y) var(--cta-padding-x);
  font-size: var(--cta-font-size);
  font-weight: var(--cta-font-weight);
  color: var(--cta-color);
  background: var(--cta-bg);
  border: none;
  border-radius: var(--cta-radius);
  cursor: pointer;
  transition: var(--cta-transition);
  outline: none;
  line-height:1; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap;
}
.ai-tab-btn:hover, .ai-tab-btn:active, .ai-tab-btn.active,
.cta-btn:hover, .cta-btn:active, .cta-btn.active { color: var(--cta-hover-color); }


/* stuck 강조 (시각) */
.cta-groups.stuck {
  background-color:#ffffff;
  box-shadow: 0 0.5rem 1rem rgba(34,57,180,0.06);
  border-bottom: 1px solid rgba(34,57,180,0.04);
  padding-top:0.5rem; padding-bottom:0.5rem;
}

/* fixed fallback 시 시각 스타일 */
.cta-groups.fixed {
  box-shadow: 0 0.5rem 1rem rgba(34,57,180,0.06);
  background-color: rgba(255,255,255,0.98);
  border-bottom: 1px solid rgba(34,57,180,0.04);
  padding-top: 0.375rem; padding-bottom:0.375rem;
}

/* placeholder: fixed일 때 원래 공간을 차지 */
.cta-placeholder {
  height: 0;
  transition: height .12s ease;
}

/* -----------------------------
   End merged CTA styles
   ----------------------------- */





/* IaaS 배경 비주얼 + 오버레이 */
.iaas-visual-bg {
  width: 100%;
  height: 21.25rem; /* 340px -> 21.25rem */
  background: url('2-1. IaaS - 복사본.png') center center / cover no-repeat;
  position: relative;
  border-radius: 1rem 1rem 0 0; /* 16px -> 1rem */
  margin-bottom: 0;
  overflow: hidden;
}
.iaas-visual-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.36);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  gap: 1.5rem;  /*<-- 메인 타이틀과 하단 문구(요소 간) 사이를 정확히 4rem으로 고정 */
  box-sizing: border-box;
  padding: 0 1rem; /* 좌우 여백 약간 추가(작은 화면 보호) */
}
.iaas-title {
  color: #eeeeee;
  font-size: 3rem;
  font-weight: bold;
  margin: 0;            /* gap으로 간격 제어하므로 기본 margin 제거 */
  gap : 1.5rem; /*     내부 행간은 단위 없는 값으로 유지 (요소간 간격은 gap으로 제어) */
  text-align: center;
}

.iaas-desc {
  color: #e3e3e3;
  font-size: 1.3rem;
  font-weight: medium;     /* medium */
  margin: 0;            /* gap으로 간격 제어하므로 기본 margin 제거 */
  line-height: 2rem;    /* 문장 내부 줄간(행간)은 이 값으로 유지(요청값과 혼동 방지) */
  text-align: center;
}

/* 메인 설명 */
.iaas-bottom-main-desc {
  background: #fff;
  font-size: 2.5rem;
  font-weight: bold;
  color: #122858;
  text-align: center;
  padding: 2.25rem 1rem 1.125rem 1rem; /* 36px 16px 18px 16px -> 2.25rem 1rem 1.125rem 1rem */
  line-height: 3.5rem;
  margin-top: 2.5rem; /* 40px -> 2.5rem */
  margin-bottom: 2.5rem; /* 40px -> 2.5rem */
}

/* IaaS 3분할 설명 */
.iaas-explain-full-bg {
  width: 100%;
  /* Removed position: relative, left, right, margin-left, margin-right to prevent overflow */
  background: #fff;
  padding: 2.625rem 0 3rem 0; /* 42px 0 48px 0 -> 2.625rem 0 3rem 0 */
  z-index: 1;
  box-sizing: border-box; /* Ensure padding is included in width */
}

.iaas-feature-list {
  display: flex;
  gap: 2rem; /* 32px -> 2rem */
  justify-content: center;
  align-items: flex-start;
  background: #fff;
  padding: 1.125rem 1rem 0 1rem; /* 18px 16px 0 16px -> rem */
  max-width: 87.5rem; /* 1400px -> 87.5rem */
  width: 100%;
  margin: 0 auto;
  border-radius: 0;
  margin-bottom: 2.5rem; /* 40px -> 2.5rem */
}

/* 각 카드(아이템) 크기 및 내부 간격 */
.iaas-feature {
  flex: 1 1 0;
  max-width: 26.9rem; /* 상단 바폭과 맞춘 rem 값(예: 26.5rem ~ 424px) */
  background: #fff;
  border-radius: 0.75rem; /* 12px -> 0.75rem */
  display: flex;
  align-items: flex-start;
  gap: 0.625rem; /* 10px -> 0.625rem */
  padding: 1rem; /* 내부 여백 추가 (16px -> 1rem) */
  box-sizing: border-box;
}
.iaas-feature-icon {
  font-size: 1.6em;
  color: #ffffff;
  margin-top: 0.4375rem; /* 7px -> 0.4375rem */
}

.iaas-feature-icon-img {
  width: 2.5rem; /* 40px -> 2.5rem */
  height: 2.5rem;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
}

.iaas-feature-title {
  font-weight: bold;
  font-size: 1.5rem;
  margin-bottom: 0.4375rem; /* 7px -> 0.4375rem */
  color: #3d3d3d;
}
.iaas-feature-desc {
  font-weight: medium;
  font-size: 1.3rem;
  color: #494949;
  line-height: 2rem;
}


/* MSP 배경 비주얼 + 오버레이 */
.msp-visual-bg {
  width: 100%;
  height: 21.25rem; /* 340px -> 21.25rem */
  background: url('2-2. MSP - 복사본.png') center center / cover no-repeat;
  position: relative;
  border-radius: 1rem 1rem 0 0; /* 16px -> 1rem */
  margin-bottom: 0;
  overflow: hidden;
}

.msp-visual-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.36);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  gap: 1.5rem;  /*<-- 메인 타이틀과 하단 문구(요소 간) 사이를 정확히 4rem으로 고정 */
  box-sizing: border-box;
  padding: 0 1rem; /* 좌우 여백 약간 추가(작은 화면 보호) */
}
.msp-title {
  color: #eeeeee;
  font-size: 3rem;
  font-weight: bold;
  margin: 0;            /* gap으로 간격 제어하므로 기본 margin 제거 */
  gap : 1.5rem; /*     내부 행간은 단위 없는 값으로 유지 (요소간 간격은 gap으로 제어) */
  text-align: center;
}
.msp-desc {
  color: #e3e3e3;
  font-size: 1.3rem;
  font-weight: medium;     /* medium */
  margin: 0;            /* gap으로 간격 제어하므로 기본 margin 제거 */
  line-height: 2rem;    /* 문장 내부 줄간(행간)은 이 값으로 유지(요청값과 혼동 방지) */
  text-align: center;
}

.msp-main-desc-section {
  background: #fff;
  font-size: 2.5rem;
  font-weight: bold;
  color: #122858;
  text-align: center;
  padding: 2.25rem 1rem 1.125rem 1rem; /* 36px 16px 18px 16px -> 2.25rem 1rem 1.125rem 1rem */
  line-height: 3.5rem;
  margin-top: 2.5rem; /* 40px -> 2.5rem */
  margin-bottom: 2.5rem; /* 40px -> 2.5rem */
}

.msp-main-desc-sub {
  background: #fff;
  font-size: 1.3rem;
  font-weight: bold;
  color: #3d3d3d;
  text-align: center;
  padding: 2.25rem 1rem 1.125rem 1rem; /* 36px 16px 18px 16px -> 2.25rem 1rem 1.125rem 1rem */
  line-height: 2rem;
  margin-top: 2.5rem; /* 40px -> 2.5rem */
  margin-bottom: 2.5rem; /* 40px -> 2.5rem */
}

/* 클라우드 전환 및 구축 관련 스타일 */
.migration-visual-bg {
  width: 100%;
  height: 21.25rem; /* 340px -> 21.25rem */
  background: url('2-3. 클라우드 전환 및 구축 - 복사본.png') center center / cover no-repeat;
  position: relative;
  border-radius: 1rem 1rem 0 0; /* 16px -> 1rem */
  margin-bottom: 0;
  overflow: hidden;
}

.migration-visual-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.36);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  gap: 1.5rem;  /*<-- 메인 타이틀과 하단 문구(요소 간) 사이를 정확히 4rem으로 고정 */
  box-sizing: border-box;
  padding: 0 1rem; /* 좌우 여백 약간 추가(작은 화면 보호) */
}
.migration-title {
  color: #eeeeee;
  font-size: 3rem;
  font-weight: bold;
  margin: 0;            /* gap으로 간격 제어하므로 기본 margin 제거 */
  gap : 1.5rem; /*     내부 행간은 단위 없는 값으로 유지 (요소간 간격은 gap으로 제어) */
  text-align: center;
}
.migration-desc {
  color: #e3e3e3;
  font-size: 1.3rem;
  font-weight: medium;     /* medium */
  margin: 0;            /* gap으로 간격 제어하므로 기본 margin 제거 */
  line-height: 2rem;    /* 문장 내부 줄간(행간)은 이 값으로 유지(요청값과 혼동 방지) */
  text-align: center;
}


.migration-bottom-main-desc {
  background: #fff;
  font-size: 2.5rem;
  font-weight: bold;
  color: #122858;
  text-align: center;
  padding: 2.25rem 1rem 1.125rem 1rem; /* 36px 16px 18px 16px -> 2.25rem 1rem 1.125rem 1rem */
  line-height: 3.5rem;
  margin-top: 2.5rem; /* 40px -> 2.5rem */
  margin-bottom: 2.5rem; /* 40px -> 2.5rem */
}


.migration-feature-list {
  display: flex;
  gap: 2rem; /* match IaaS: 32px -> 2rem */
  justify-content: center;
  align-items: flex-start;
  background: #ffffff; /* kept original migration background */
  padding: 1.125rem 1rem 0 1rem; /* 18px 16px 0 16px -> rem */
  max-width: 87rem; /*섹션 나뉘는거 감싸는 전체 넓이*/
  width: 100%;
  margin: 0 auto 2.5rem auto;
  box-sizing: border-box;
}

/* 각 카드(아이템) 크기 및 내부 간격 - follow IaaS card sizing/spacing */
.migration-feature {
  flex: 1 1 0;
  max-width: 26.9rem; /* match IaaS card max-width */
  background: #fff;
  border-radius: 0.75rem; /* 12px -> 0.75rem */
  display: flex;
  align-items: flex-start;
  gap: 0.625rem; /* match IaaS: 10px -> 0.625rem */
  padding: 1rem; /* 16px -> 1rem */
  box-sizing: border-box;
  min-width: 16.25rem; /* keep sensible min-width from original (260px -> 16.25rem) */
}

.migration-feature-list .migration-feature {
  flex: 1 1 30rem !important; /* 기본 너비 30rem, 필요시 조절 */
  max-width: none !important; /* 기존 제한 제거 */
  min-width: 0 !important;
}

/* icon sizing/alignment - aligned to IaaS */
.migration-feature-icon-img,
.migration-feature-icon {
  width: 2.5rem; /* 40px -> 2.5rem */
  height: 2.5rem;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  font-size: 1.6em;
  margin-top: 0.4375rem; /* 7px -> 0.4375rem */
  color: #c5cfc7; /* use IaaS green for icons if desired (adjust as needed) */
}

/* title & description typographic scale - match IaaS */
.migration-feature-title {
  font-weight: bold;
  font-size: 1.5rem; /* match IaaS title size */
  margin: 0 0 0.4375rem 0; /* 7px -> 0.4375rem */
  color: #3d3d3d;
  line-height: 1.1;
}

.migration-feature-desc {
  font-weight: medium; /* medium */
  font-size: 1.3rem; /* match IaaS description size */
  color: #494949;
  line-height: 2rem; /* match IaaS line-height */
  margin: 0;
}















@media (max-width: 720px) {
  .cta-wrapper {
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden; /* Prevent horizontal scrolling */
    background: transparent;
  }

  .cta-groups {
    /* Sticky functionality */
    position: -webkit-sticky;
    position: sticky;
    top: 3.75rem; /* Height of the navbar */
    z-index: 9900;
    
    /* Style for when it is stuck */
    background-color: #ffffff;
    
    /* Layout properties to prevent overflow */
    justify-content: center; /* Center the items */
    flex-wrap: wrap; /* Allow items to wrap */
    padding-left: 0;
    margin-left: 0;
    gap: 0.5rem; /* Add a gap for wrapped items */
    max-width: 100%;
    box-sizing: border-box;
  }

  .cloud-tab-btn {
      padding: 0.6rem 1.2rem; /* Adjust padding to make buttons narrower */
  }

  .cloud-tab-btn-group {
    gap: 0;
    margin-left: 1rem;
    flex-wrap: nowrap; /* Ensure it stays on one line */
  }
  .cta-sep { display: inline-block; } /* Ensure separator is visible */
  .cloud-tab-btn { padding: 0.6rem 1rem; font-size: 0.95rem; }

  .cloud-detail-inner {
    max-width: 100%;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: hidden; /* Prevent horizontal scroll within this element */
  }
  .cloud-detail-inner h2 {
   font-size: 1.4rem;
    line-height: 2rem;
    white-space: normal !important;
    word-break: keep-all;
    margin-bottom: 1.2rem;
  }
  .iaas-feature-list {
    flex-direction: row; /* Change from column to row */
    flex-wrap: wrap;     /* Allow items to wrap */
    justify-content: center; /* Center items when they wrap */
    gap: 1rem;           /* Add a gap between wrapped items */
    padding: 1rem;       /* Adjust padding for mobile */
    max-width: 100%;     /* Ensure it respects parent width */
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;  /* Ensure no horizontal scroll within the list */
  }
  .iaas-feature {
    flex: 1 1 auto;      /* Allow items to grow and shrink */
    max-width: 100%;     /* Default to full width on very small screens */
    margin-bottom: 1rem; /* Add spacing between wrapped items */
    box-sizing: border-box;
  }

  .iaas-bottom-main-desc,
  .msp-main-desc-section,
  .migration-bottom-main-desc {
    font-size: 1.5rem;
    line-height: 1.5;
    padding: 0.7rem;
    box-sizing: border-box;
    word-break: keep-all;
  }

  .migration-feature-list {
    flex-direction: row;     /* Change from column to row */
    flex-wrap: wrap;         /* Allow items to wrap */
    justify-content: center; /* Center items when they wrap */
    gap: 1rem;               /* Add a gap between wrapped items */
    padding: 1rem;           /* Adjust padding for mobile */
    max-width: 100%;         /* Ensure it respects parent width */
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;      /* Ensure no horizontal scroll within the list */
  }
  .migration-feature {
    flex: 1 1 auto;          /* Allow items to grow and shrink */
    max-width: 100%;         /* Default to full width on very small screens */
    margin-bottom: 1rem;     /* Add spacing between wrapped items */
    box-sizing: border-box;
  }

  .iaas-title,
  .msp-title,
  .migration-title {
  font-size: 2rem;
}

.iaas-desc,
.msp-desc, 
.migration-desc{
  font-size: 1.2rem;
    line-height: 1.5rem;
}
}























































/* 푸터 (px -> rem 변환, 좌측 텍스트 기준으로 우측 연락처 크기 조정) */
.site-footer {
    background: #122858;
    color: #fff;
    width: 100%;
    padding: 3.375rem 0 2rem 0; /* 54px 0 32px 0 */
    font-size: 1rem; /* 기본 텍스트 크기 */
}

.footer-inner {
    max-width: 82.5rem; /* 1320px */
    margin: 0 auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2.5rem; /* 40px */
}

.footer-left {
    flex: 1 1 12rem;
}

/* 회사명: 좌측 기준 텍스트 */
.footer-company {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 0.5rem; /* 8px */
}

.footer-desc {
    line-height: 1.7;
    margin-bottom: 1.125rem; /* 18px */
}

/* 저작권 영역: 링크와 텍스트를 모두 포함하며 한 줄로 표시 */
.footer-copyright {
    font-size: 1rem;
    opacity: 0.8;
    /* Flexbox를 사용하여 내부 요소들을 한 줄에 정렬 */
    display: flex;
    align-items: center; /* 수직 중앙 정렬 */
    flex-wrap: wrap; /* 작은 화면에서 필요하면 줄 바꿈 허용 */
    gap: 0.5rem; /* 요소들 간의 간격 */
}

     .footer-right {
            flex: 0 0 auto; /* 성장하지 않고, 내용물의 너비만큼만 차지합니다. */
            min-width: 15rem;
            display: flex;
            flex-direction: column;
            align-items: flex-start; /* 내부 항목(contact-phone, email)은 왼쪽 정렬 */
            gap: 0; 
            font-size: 1rem;
            color: #fff;
            text-align: left; /* 텍스트 정렬도 왼쪽으로 복구 */
        }

        /* 연락처 스타일 */
        .footer-contact .contact-phone,
        .footer-contact .contact-email {
            margin-bottom: 0.5rem;
            font-size: 1.1rem;
            font-weight: medium;
            line-height: 1.3;
            color: #ffffff;
        }

        /* 정책 링크 스타일 */
        .policy-link {
            font-size: 1rem;
            color: #fff;
            text-decoration: none;
            opacity: 0.8;
            transition: opacity 0.3s;
        }

        .policy-link:hover {
            opacity: 1;
            text-decoration: underline;
        }

        /* 구분자 스타일 */
        .policy-separator {
            color: #fff;
            opacity: 0.5;
            font-size: 1rem;
        }

        /* --- 사용하지 않는 CSS 제거 --- */
        .policy-links-group {
            /* 이전에 사용된 블록 스타일을 제거하거나 덮어씁니다. */
            display: inline; /* 인라인으로 강제 변경 */
            margin: 0;
            padding: 0;
        }
        /* --- 사용하지 않는 CSS 제거 --- */


        /* 반응형 */
        @media (max-width: 720px) {
            .footer-inner {
                flex-direction: column;
                gap: 0.5rem !important; /* gap을 1rem 이하로 줄이면 두 영역이 더 가깝게 */
                padding-left: 1rem !important;
                padding-right: 1rem !important;
            }

            .footer-left {
    width: 100% !important;
    margin-bottom: 0.5rem !important; /* 각 칸 아래 여백 최소화 */
    padding: 0 !important;
            }
           .footer-right {
    width: 100% !important;
    margin-bottom: 0.5rem !important; /* 각 칸 아래 여백 최소화 */
    padding: 0 !important;
            }

            .site-footer {
                padding: 2rem 0 1.5rem 0;
            }
            
            /* 모바일에서 저작권 및 링크가 너무 길 경우 줄바꿈 허용 */
            .footer-copyright {
                display: block; /* 모바일에서 전체 블록으로 변경 */
            }
        }