/* 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;
}


/* 전체 사이트 기본 폰트로 설정 */
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%);
}


/* 네비게이션 바 */
.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;
  }
}










































:root {
  /* 히어로 전용 변수(조정이 편하도록 중앙에 위치) */
  --hero-h1-size: 3rem;
  --hero-h1-lineheight: 4rem;
  --hero-p-size: 1.3rem;
  --hero-p-lineheight: 2rem;
  --hero-max-content-width: 60rem; /* 960px -> 60rem */
  --hero-content-padding: clamp(1.25rem, 1.6%, 1.25rem); /* 20px -> 1.25rem */
}

/* 메인 히어로 섹션 */
.main-hero {
  position: relative;
  width: 100%;
  height: 60vh;
  min-height: 26.25rem; /* 420px -> 26.25rem */
  max-height: 43.75rem; /* 700px -> 43.75rem */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #222;
  padding-top: 3.75rem; /* 60px -> 3.75rem */
}

/* 배경 이미지 레이어 */
.main-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: url('0.\ castware\ -\ 복사본.png') no-repeat center center;
  background-size: cover;
  opacity: 1;
}

/* 히어로 콘텐츠(텍스트) */
.main-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
  color: #eeeeee;
  margin-top: 0;
  box-sizing: border-box;   /* 가독성을 위해 텍스트 블록의 최대 너비를 제한 */
}

.main-hero-content h1 {
  font-size: var(--hero-h1-size);
  font-weight: bold;
  margin-bottom: 1.125rem; /* 18px -> 1.125rem */
  letter-spacing: var(--hero-h1-letterspacing);
  line-height: var(--hero-h1-lineheight);
  max-width: calc(var(--hero-max-content-width));
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--hero-content-padding);
}

/* 설명(요약) 텍스트 스타일: 가독성(줄간격)과 너비 제한으로 라인 브레이크 제어 */
.main-hero-content p {
  font-size: var(--hero-p-size);
  font-weight: medium;
  letter-spacing: -0.03125rem; /* -0.5px -> -0.03125rem */
  line-height: var(--hero-p-lineheight);
  margin: 0 auto;
  max-width: calc(var(--hero-max-content-width));
  padding: 0 var(--hero-content-padding);
  margin-top: 0.375rem; /* 6px -> 0.375rem */
  color: #e3e3e3;
}

/* 로고 섹션 */
.main-logo-section {
  background: #fff;
  width: 100%;
  padding: 6.5625rem 0 6.5625rem 0; /* 105px -> 6.5625rem (이미 rem이었음) */
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-logo-img {
  height: 4.375rem; /* 70px -> 4.375rem (이미 rem이었음) */
  width: auto;
  max-width: 70%;
  object-fit: contain;
  display: block;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 텍스트(h1) 먼저 올라옴 */
.main-hero-content h1 {
  animation: fadeInUp 0.8s 0.1s both;
}

/* 설명(p) 두 번째로 올라옴 */
.main-hero-content p {
  animation: fadeInUp 0.8s 0.35s both;
}

/* 로고(img) 마지막으로 올라옴 */
.main-logo-img {
  animation: fadeInUp 0.8s 0.65s both;
}





/* 공통 원칙
   - 각 섹션은 이미지(절대 위치, 좌/우)에 대해 동일한 너비(기본 50%)를 사용합니다.
   - section { display:flex; align-items:center }를 통해 이미지의 세로 중심과 컨텐츠의 세로 중심이 항상 일치합니다
     (따라서 "이미지 기준 중앙"에 텍스트가 정확히 정렬됩니다).
   - .section-content 는 높이 100%, display:flex, align-items:center 로 세로 가운데 정렬을 보장합니다.
   - .align-outside-left / .align-outside-right 는 이미지가 있는 쪽의 반대편(바깥쪽)에 텍스트를 배치하고
     텍스트 정렬까지 조정합니다.
   - 필요 시 --image-width CSS 변수를 조정하여 이미지 영역 비율을 통일(또는 각 섹션별로 조정)할 수 있습니다.
*/

/* 조정 가능한 변수 */
:root {
  /* 이미지가 차지하는 가로 비율 (반응형) */
  --image-width: clamp(34%, 40%, 50%);

  /* 이미지 내부 여유: 20px -> 1.25rem (반응형 clamp 사용) */
  --image-inner-padding: clamp(1.25rem, 3%, 3.75rem);

  /* 화면 가장자리에서 이미지/컨텐츠가 떨어져 있을 여유(gutter).
     clamp(min, % 기반, max) 형태로 지정하면 작은 화면에선 픽셀 단위,
     큰 화면에선 뷰포트 비율을 사용해 자연스럽게 확대됩니다. */
  --edge-inset: clamp(2.5rem, 5%, 6.25rem); /* 40px -> 2.5rem, 100px -> 6.25rem */

  /* 간단한 이미지 바깥 이동(기본 2px = 0.125rem) */
  --img-outset: -1.5rem; /* 원하는 만큼 변경: 0.25rem(≈4px) 등 */

  
  /* 컨텐츠 내부 패딩 (반응형) */
  --content-padding: clamp(1.5rem, 4%, 4rem); /* 24px -> 1.5rem, 64px -> 4rem */

  /* fallback / 이전값을 정리한 상대단위 버전 */
  --content-gap: 1.25rem; /* 20px -> 1.25rem */
  --section-bg: #ffffff;
  --text-color: #000;   /* 요청대로 모든 섹션 텍스트 기본은 검정 */
  --max-content-width: 43.75rem; /* 700px -> 43.75rem */
  --mobile-image-height: 40vh;
}

/* 이미지 컨테이너에 패딩 추가 */
.cai-bg, .cloud-bg, .solution-bg, .here-bg {
  padding-inline-start: var(--image-inner-padding);
  padding-inline-end: var(--image-inner-padding);
  box-sizing: border-box;
}

/* 이미지는 컨테이너의 가용폭(패딩 제외)에 맞춤 */
.cai-bg img,
.cloud-bg img,
.solution-bg img,
.here-bg img {
  height: 100%;
  width: auto;
  max-width: calc(100% - (var(--image-inner-padding) * 2));
  display: block;
  object-fit: cover;
}

/* 공통 레이아웃: 모든 섹션에 적용 */
.cai-section,
.cloud-section,
.solution-section,
.here-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;    /* 이미지와 컨텐츠의 수직 중앙을 맞추기 위함 */
  justify-content: center;
  background: var(--section-bg);
  font-family: 'KoPub돋움';
  box-sizing: border-box;
}

/* A. 섹션 내부 <img>가 잘리는 문제 해결: 컨테이너 overflow 조정 + 이미지 비율 유지 */
.cai-bg, .cloud-bg, .solution-bg, .here-bg {
  position: absolute;
  top: 0;
  height: 100%;
  width: var(--image-width);
  z-index: 1;
  display: flex;
  align-items: center;
  pointer-events: none;
  overflow: visible;                 /* 기존 hidden -> visible: 잘림 방지 */
  padding-inline-start: var(--image-inner-padding);
  padding-inline-end: var(--image-inner-padding);
  box-sizing: border-box;
}

/* 좌측 이미지(예: cloud, here) */
.cloud-bg,
.here-bg {
  left: var(--edge-inset);
  justify-content: flex-start;
}

/* 우측 이미지(예: cai, solution) */
.cai-bg,
.solution-bg {
  right: var(--edge-inset);
  justify-content: flex-end;
}


.cai-bg img,
.cloud-bg img,
.solution-bg img,
.here-bg img {
  width: 100%;                        /* 컨테이너 너비 기준으로 맞춤 */
  height: auto;                       /* 종횡비 유지 */
  max-width: 100%;
  display: block;
  object-fit: contain;                /* 자르지 않고 전체 보이기 */
  object-position: center;            /* 중앙을 기준으로 표시 */
  transform: none;                    /* 혹시 transform으로 잘려있다면 해제(필요시 조정) */
}

/* 만약 이미지가 transform으로 살짝 밖으로 나가게 설정돼 있었으면,
   overflow: visible 로 바꾼 뒤 transform을 유지하거나 줄이면 됩니다. */
/* 각 이미지의 보여지는 부분을 명시적으로 고정 (좌/우 중앙) */
.cloud-bg img,
.here-bg img { 
  object-position: left center; 
  transform: translateX(var(--img-outset));
  transition: transform 160ms ease;
}

.cai-bg img,
.solution-bg img { 
  object-position: right center;
  transform: translateX(calc(-1 * var(--img-outset)));
  transition: transform 160ms ease;
 }

/* 컨텐츠 공통: 이미지 높이(섹션 높이)와 정확히 일치하도록 세로 중앙 정렬 */
.section-content {
  position: relative;
  z-index: 2;
  width: calc(100% - var(--image-width) - var(--edge-inset)); /* 남은 영역을 사용 (이미지 너비만큼 남김) */
  height: 100%;
  display: flex;
  align-items: center;    /* 세로 중앙 정렬 - 이미지 중심과 일치 */
  box-sizing: border-box;
  padding: 0 var(--content-padding);
  max-width: none;
}

/* 내부 컨테이너로 최대 너비 제한 및 텍스트 래핑 제어 */
.section-content > .cai-inner,
.section-content > .cloud-inner,
.section-content > .solution-inner,
.section-content > .here-inner {
  max-width: none;
  width: 100%;
  box-sizing: border-box;
}

/* 바깥쪽 정렬 도구 클래스
   - align-outside-left: 이미지가 오른쪽에 있을 때(예: cai, solution) 사용.
     문구는 이미지의 왼쪽 바깥(페이지 안쪽이 아닌 바깥쪽)으로 정렬됨.
   - align-outside-right: 이미지가 왼쪽에 있을 때(예: cloud, here) 사용.
     문구는 이미지의 오른쪽 바깥으로 정렬됨.
*/
.align-outside-left {
  margin-right: calc(var(--image-width)); /* 보수적으로 이미지쪽 공간을 확보 (안정성) */
  justify-content: flex-start;            /* 컨텐츠 내부는 왼쪽(이미지에서 먼 쪽)으로 정렬 */
  text-align: left;
  padding-left: var(--content-padding);
  padding-right: calc(var(--content-padding) * 0.5);
}

.align-outside-right {
  margin-left: calc(var(--image-width));
  justify-content: flex-end;             /* 컨텐츠 내부는 오른쪽(이미지에서 먼 쪽)으로 정렬 */
  text-align: right;
  padding-right: var(--content-padding);
  padding-left: calc(var(--content-padding) * 0.5);
}

/* 텍스트 색상 및 타이포그래피 (요청: 검정) */
.cai-content, .cloud-content, .solution-content, .here-text,
.cai-content h2, .cloud-content h2, .solution-content h2, .here-text h2,
.cai-content p, .cloud-content p, .solution-content p, .here-text p,
.cai-desc, .cloud-desc {
  color: var(--text-color);
}


/* 섹션별 세부 스타일 (타입별 여백/폰트 크기 조절 유지) */
/* 변경 요약: 메인 타이틀 = 3rem, font-weight = bold(700), 설명 = 1.3rem, font-weight = medium(500),
   타이틀과 설명 간격 = 1.25rem (h2 margin-bottom으로 설정), 오타(font: size ...) 수정 및 strong은 강조용으로 700 설정 */
.cai-content .cai-inner .cai-reference {
  font-size: 0.875rem;
  color: #000000;
  margin-bottom: 1.125rem;
} /* 14px,18px */

.cai-content h2 {
  font-size: 3rem;              /* 메인 타이틀 크기: 3rem */
  font-weight: bold;             /* 메인 타이틀 두께: bold (700) */
  margin: 0 0 3;          /* 타이틀과 설명 간격: 1.25rem */
}

.cai-star {
  color: #000000;
  font-size: 1.4rem;
  margin-right: 0.375rem;
}

.cai-ai {
  display: block;
  font-size: 1rem;
  color: #8d8d8d;
  margin-top: 0.375rem;
  opacity: .9;
}

.cai-desc {
  font-size: 1.3rem;            /* 설명(본문) 크기: 1.3rem */
  font-weight: medium;             /* 설명 두께: medium (500) */
  margin: 0;                    /* h2의 margin-bottom(1.25rem)에 의해 간격 결정되므로 본문 상단 마진은 0으로 둠 */
  margin-top: 0;
  line-height: 2rem;
}
.cai-desc strong {
  font-weight: bold;             /* 강조 텍스트는 bold로 유지 */
}

/* 동일한 규칙을 다른 섹션에도 동일하게 적용 */
.cloud-content h2,
.solution-content h2,
.here-text h2 {
  font-size: 3rem;              /* 메인 타이틀 크기: 3rem */
  font-weight: bold;             /* 메인 타이틀 두께: bold (700) */
  margin: 0 0 2rem;          /* 타이틀과 설명 간격: 1.25rem */
}

.cloud-desc,
.solution-content p,
.here-text p {
  font-size: 1.3rem;            /* 설명(본문) 크기: 1.3rem */
  font-weight: medium;             /* 설명 두께: medium (500) */
  margin: 0;                    /* 타이틀의 margin-bottom으로 간격 확보 */
  margin-top: 0;
  line-height: 2rem;
}

.cloud-desc strong,
.solution-content p strong,
.here-text p strong {
  font-weight: bold;             /* 강조 텍스트는 bold */
}


@keyframes zoomInOnce {
  0% {
    opacity: 0;
    transform: scale(0.85);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeInUpOnce {
  0% {
    opacity: 0;
    transform: translateY(36px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 기본상태: 숨겨둠 */
.scroll-animate,
.scroll-animate-text {
  opacity: 0;
  will-change: transform, opacity;
}

/* 활성화시 애니메이션 발동 */
.scroll-animate.visible {
  animation: zoomInOnce 0.8s cubic-bezier(.33,1.3,.7,1) forwards;
}
.scroll-animate-text.visible {
  animation: fadeInUpOnce 0.8s 0.18s cubic-bezier(.33,1.3,.7,1) forwards;
}




/* 모바일: 이미지는 하단(또는 상단)으로 내려서 높이를 축소하고,
   텍스트는 이미지와 분리되어 전체 너비를 사용.
   (이미지와 텍스트의 수직 중심 정렬 규칙은 모바일에서는 달라집니다.) */
@media (max-width: 720px) {
  :root { --image-width: 100%; --content-padding: 1.25rem; --mobile-image-height: 35vh; } /* 20px -> 1.25rem */
  .cai-bg, .cloud-bg, .solution-bg, .here-bg {
    position: absolute;
    left: 0; right: 0;
    width: 100%;
    height: var(--mobile-image-height);
    top: auto;
    bottom: 0;
    justify-content: center;
  }
  .cai-bg img, .cloud-bg img, .solution-bg img, .here-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* 텍스트는 전체 너비 사용, 상단에 위치하도록 변경 */
  .section-content {
    width: 100%;
    height: auto;
    align-items: flex-start;
    padding: 1.5rem; /* 24px -> 1.5rem */
  }
  .align-outside-left, .align-outside-right {
    margin: 0;
    padding: 1.25rem; /* 20px -> 1.25rem */
    text-align: left;
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .cai-bg img, .solution-bg img,
  .cloud-bg img, .here-bg img {
    transform: none;
  }
}



@media (max-width: 720px) {
  /* 전체 기본 패딩 간격 조정 */
  body, .section-content, .footer-inner {
    padding: 1rem !important;
  }

  /* 내비게이션·로고정렬: 세로스택(가로폭 부족) */
  .main-hero-content h1 {
    font-size: 2.1rem;
    line-height: 2.6rem;
    padding: 0.4rem;
  }
  .main-hero-content p {
    font-size: 0.95rem;
    line-height: 1.3rem;
    padding: 0.2rem;
  }
  .main-logo-section {
    padding: 2rem 0;
  }
  .main-logo-img {
    height: 2.5rem;
    max-width: 100px;
  }

  /* 주요 상세/이미지/아이콘 구역 */
  .section-content, .history-timeline, .footer-left, .footer-right {
    padding: 0.5rem !important;
    gap: 0.7rem !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  .history-timeline .history-item {
    flex-direction: column;
    align-items: flex-start;
  }

  /* 테이블, 폼 등은 가로스크롤 허용 */
  table, .responsive-table {
    width: 100% !important;
    font-size: 0.92rem !important;
    overflow-x: auto;
    display: block !important;
  }
  .main-hero {
    height: 35vh !important;
    min-height: 180px !important;
    padding-top: 1rem !important;
  }

  /* 구글맵 iframe 등도 100% 폭 고정 */
  iframe,
  .contact-map iframe {
    width: 100% !important;
    height: 180px !important;
    min-height: 120px !important;
    max-width: 100% !important;
    border-radius: 16px !important;
  }
}




















































/* 푸터 (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; /* 모바일에서 전체 블록으로 변경 */
            }
        }