/* style.css */

/* ✅ style.css 최상단에 추가: 폰트 로드 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/pretendard.css');

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: #fff; /* 또는 원하는 색상 (예: #0d1128) */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

body {
  padding-top: 104px; /* 헤더 높이만큼 공간 확보 */
}

/* 블랙바 (topbar) 고정 */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 32px;
  background-color: #111827;
  color: white;
  z-index: 1000;
  overflow: hidden;
}

/* 메인 메뉴바 고정 */
.main-header {
  position: fixed;
  top: 32px; /* 블랙바 아래로 */
  left: 0;
  right: 0;
  z-index: 999;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 본문 영역 여백 확보 */
main {
  margin-top: 0px; /* topbar + header 높이 */
}

/* 예시: 데모 요청 버튼 */
.header-cta {
  background-color: #4f46e5;
  color: white;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  transition: background-color 0.3s ease;
}
.header-cta:hover {
  background-color: #4338ca;
}

/* 상단 전체 고정 */
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

/* 본문 공통 섹션 스타일 */
.section-default {
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
  padding: 4rem 1rem;
}

/* 섹션 제목 */
.section-title {
  font-size: 1.875rem; /* text-3xl */
  font-weight: 600;     /* font-semibold */
  margin-bottom: 1rem;
  color: #111827;       /* text-gray-900 */
}

.section-heading {
  font-size: 1.25rem;       /* text-lg */
  font-weight: 600;         /* font-semibold */
  margin-top: 2rem;         /* mt-8 */
  margin-bottom: 1rem;      /* mb-4 */
  color: #1f2937;           /* text-gray-800 */
  line-height: 1.6;
}

/* 섹션 본문 문단 */
.section-paragraph {
  margin-bottom: 1.5rem;
  line-height: 1.75rem;
  color: #4B5563;       /* text-gray-700 */
}

/* 링크 호버 효과 */
.section-link {
  color: #6B7280;       /* text-gray-400 */
  font-size: 0.875rem;
}
.section-link:hover {
  color: #ffffff;
}

/* 화살표 스타일 조정 */
.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 1.25rem;     /* text-xl 수준 */
  font-weight: 700;       /* bold */
  color: white;
}

/* 페이지네이션 점 스타일 */
.swiper-pagination-bullet {
  width: 12px !important;
  height: 12px !important;
  background-color: white !important;
  opacity: 0.6 !important;
  margin: 0 8px !important;
}
.swiper-pagination-bullet-active {
  opacity: 1 !important;
}

.swiper-pagination {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
}

.swiper-container {
  position: relative;

  background-color: white !important;

}

.swiper-button-wrapper {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 10;
  display: flex;
  gap: 10px;
}

/* 화살표 스타일 */
.custom-swiper-button {
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  position: absolute;
  bottom: -20px;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.swiper-button-prev.custom-swiper-button {
  left: calc(50% - 48px);
}

.swiper-button-next.custom-swiper-button {
  left: calc(50% + 12px);
}

.swiper-button-prev,
.swiper-button-next {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.swiper-button-prev {
  background-color: #007bff;
}

.swiper-button-next {
  background-color: #cce0ff;
}

.swiper-button-prev svg,
.swiper-button-next svg {
  width: 16px;
  height: 16px;
  color: white;
}

/* 메인 배너 Swiper용 기본 버튼 유지 */

html,
body,
.swiper-container,
.swiper-wrapper,
.swiper-slide,
.main-banner {
  background-color: white !important;
}

.main-banner .swiper-button-prev,
.main-banner .swiper-button-next {
  background-color: transparent !important;  /* 배경 제거 */
  width: auto; /* 원형 제거 */
  height: auto;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

.main-banner .swiper-button-prev {
  background-color: #007bff;
}
.main-banner .swiper-button-next {
  background-color: #cce0ff;
}

.main-banner .swiper-button-prev::after,
.main-banner .swiper-button-next::after {
  font-size: 2.5rem; /* 크기 적당히 조절 */
  font-weight: 700;
  color: white;
}

/* 카드 섹션 화살표 (custom-swiper-button) 전용 */
/* 카드 섹션 Swiper 전용 */
.card-section .swiper {
  position: relative;
  z-index: 1;
}

.card-section .swiper-slide {
  transition: transform 0.3s ease;
}

/* 커스텀 화살표 버튼 공통 스타일 */
.card-section .custom-swiper-button {
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20; /* 반드시 높게 */
}

/* 버튼 내부 아이콘 (SVG) */
.card-section .custom-swiper-button svg {
  width: 20px;
  height: 20px;
  fill: white;
  pointer-events: none; /* 클릭 충돌 방지 */
}

/* 버튼 위치 컨테이너 */
.card-section .custom-button-wrapper {
  position: absolute;
  bottom: -36px;     /* 높이 조정 가능 */
  left: 40px;        /* 카드 기준 정렬 */
  display: flex;
  gap: 12px;
  z-index: 30;       /* 최상단 배치 */
}

/* 각 버튼 배경색 (하드코딩된 클래스 그대로 둘 경우 없어도 됨) */
.card-swiper-button-prev {
  position: absolute;
  bottom: -5px;
  left: -20px;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background-color: #7bace5; /* bg-blue-600 */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.card-swiper-button-next {
  position: absolute;
  bottom: -5px;
  left: 40px;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background-color: #2563eb; /* bg-blue-300 */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* CSS에 추가 */
.card-gradient-bottom-shadow::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background: linear-gradient(to bottom, rgba(29, 29, 29, 0.3), rgba(232, 227, 227, 0.931));
  z-index: 0;
  pointer-events: none;
}

.card-strong-bottom-shadow {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); /* X=0, Y=10px, blur=20px */
}

.no-focus-link-container a {
  color: inherit; /* 글자 색 그대로 유지 */
  text-decoration: underline;
  text-decoration-color: #5278cb; /* 파란색 밑줄 */
  text-decoration-thickness: 2px; /* 밑줄 굵기 조절 */
  text-underline-offset: 7px; /* 글자와 밑줄 사이 간격 */
  transition: text-decoration-color 0.3s ease;
}

.no-focus-link-container a:hover {
  text-decoration-color: #22c55e; /* hover 시 초록색 (Tailwind: green-500) */
}

.no-focus-link-container a:focus {
  outline: none;
  box-shadow: none;
}

.text-switch .ko {
  display: none;
}

.text-switch:hover .en {
  display: none;
}

.text-switch:hover .ko {
  display: inline;
}

.no-focus-link-container1 a {
  color: inherit; /* 글자 색 그대로 유지 */
  text-decoration: underline;
  text-decoration-color: #5278cb; /* 파란색 밑줄 */
  text-decoration-thickness: 1px; /* 밑줄 굵기 조절 */
  text-underline-offset: 3px; /* 글자와 밑줄 사이 간격 */
  transition: text-decoration-color 0.3s ease;
}

.no-focus-link-container1 a:hover {
  text-decoration-color: #22c55e; /* hover 시 초록색 (Tailwind: green-500) */
}

.no-focus-link-container1 a:focus {
  outline: none;
  box-shadow: none;
}

.no-focus-link-container2 a {
  color: inherit; /* 글자 색 그대로 유지 */
  text-decoration: underline;
  text-decoration-color: #f4f5f7; /* 파란색 밑줄 */
  text-decoration-thickness: 2px; /* 밑줄 굵기 조절 */
  text-underline-offset: 7px; /* 글자와 밑줄 사이 간격 */
  transition: text-decoration-color 0.3s ease;
}

.no-focus-link-container2 a:hover {
  text-decoration-color: #22c55e; /* hover 시 초록색 (Tailwind: green-500) */
}

.no-focus-link-container2 a:focus {
  outline: none;
  box-shadow: none;
}

html, body {
  height: 100%;
}

#popup {
  z-index: 9999 !important;
}

#newsContainer ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
}
#newsContainer ol {
  list-style-type: decimal;
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
}
#newsContainer li {
  margin-bottom: 0.5rem;
}
#newsContainer strong, #newsContainer b {
  font-weight: bold;
}
#newsContainer h1, #newsContainer h2, #newsContainer h3 {
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
}

/* Section 1 Enhanced Animations and Interactions */

/* 키프레임 애니메이션 정의 */
@keyframes section1-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes section1-fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes section1-slide-in-left {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes section1-slide-in-right {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes section1-zoom-in {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes section1-float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes section1-float-reverse {
  0%, 100% { transform: translateY(-10px); }
  50% { transform: translateY(0px); }
}

/* 애니메이션 클래스 */
.section1-fade-in {
  animation: section1-fade-in 1s ease-out;
}

.section1-fade-in-up {
  animation: section1-fade-in-up 1s ease-out;
}

.section1-slide-in-left {
  animation: section1-slide-in-left 0.8s ease-out;
}

.section1-slide-in-right {
  animation: section1-slide-in-right 0.8s ease-out;
}

.section1-zoom-in {
  animation: section1-zoom-in 1s ease-out;
}

.section1-float {
  animation: section1-float 3s ease-in-out infinite;
}

.section1-float-reverse {
  animation: section1-float-reverse 3s ease-in-out infinite;
}

/* 지연 시간 클래스 */
.section1-delay-200 { animation-delay: 0.2s; }
.section1-delay-400 { animation-delay: 0.4s; }
.section1-delay-500 { animation-delay: 0.5s; }
.section1-delay-600 { animation-delay: 0.6s; }
.section1-delay-700 { animation-delay: 0.7s; }
.section1-delay-800 { animation-delay: 0.8s; }
.section1-delay-900 { animation-delay: 0.9s; }
.section1-delay-1000 { animation-delay: 1s; }
.section1-delay-1100 { animation-delay: 1.1s; }

/* 기능 항목 호버 효과 */
.section1-feature-item {
  transition: all 0.3s ease;
  border-radius: 0.5rem;
}

.section1-feature-item:hover {
  background-color: rgb(239 246 255); /* blue-50 */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.section1-feature-item:nth-child(1):hover {
  background-color: rgb(239 246 255); /* blue-50 */
}

.section1-feature-item:nth-child(2):hover {
  background-color: rgb(236 253 245); /* emerald-50 */
}

.section1-feature-item:nth-child(3):hover {
  background-color: rgb(250 245 255); /* purple-50 */
}

.section1-feature-item:nth-child(4):hover {
  background-color: rgb(238 242 255); /* indigo-50 */
}

.section1-feature-item:nth-child(5):hover {
  background-color: rgb(240 253 250); /* teal-50 */
}

.section1-feature-item:nth-child(6):hover {
  background-color: rgb(255 247 237); /* orange-50 */
}

/* 우측 기능 항목 호버 효과 */
.section1-feature-item-right {
  transition: all 0.3s ease;
  border-radius: 0.5rem;
}

.section1-feature-item-right:nth-child(1):hover {
  background-color: rgb(253 242 248); /* pink-50 */
}

.section1-feature-item-right:nth-child(2):hover {
  background-color: rgb(236 254 255); /* cyan-50 */
}

.section1-feature-item-right:nth-child(3):hover {
  background-color: rgb(254 249 195); /* yellow-50 */
}

.section1-feature-item-right:nth-child(4):hover {
  background-color: rgb(254 242 242); /* red-50 */
}

.section1-feature-item-right:nth-child(5):hover {
  background-color: rgb(245 243 255); /* violet-50 */
}

.section1-feature-item-right:nth-child(6):hover {
  background-color: rgb(247 254 231); /* lime-50 */
}

.section1-feature-item-right:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* 아이콘 래퍼 호버 효과 */
.section1-icon-wrapper {
  transition: all 0.3s ease;
}

.section1-feature-item:nth-child(1):hover .section1-icon-wrapper {
  background-color: rgb(191 219 254); /* blue-200 */
}

.section1-feature-item:nth-child(2):hover .section1-icon-wrapper {
  background-color: rgb(167 243 208); /* emerald-200 */
}

.section1-feature-item:nth-child(3):hover .section1-icon-wrapper {
  background-color: rgb(221 214 254); /* purple-200 */
}

.section1-feature-item:nth-child(4):hover .section1-icon-wrapper {
  background-color: rgb(199 210 254); /* indigo-200 */
}

.section1-feature-item:nth-child(5):hover .section1-icon-wrapper {
  background-color: rgb(153 246 228); /* teal-200 */
}

.section1-feature-item:nth-child(6):hover .section1-icon-wrapper {
  background-color: rgb(254 215 170); /* orange-200 */
}

.section1-feature-item-right:nth-child(1):hover .section1-icon-wrapper {
  background-color: rgb(251 207 232); /* pink-200 */
}

.section1-feature-item-right:nth-child(2):hover .section1-icon-wrapper {
  background-color: rgb(165 243 252); /* cyan-200 */
}

.section1-feature-item-right:nth-child(3):hover .section1-icon-wrapper {
  background-color: rgb(254 240 138); /* yellow-200 */
}

.section1-feature-item-right:nth-child(4):hover .section1-icon-wrapper {
  background-color: rgb(254 202 202); /* red-200 */
}

.section1-feature-item-right:nth-child(5):hover .section1-icon-wrapper {
  background-color: rgb(221 214 254); /* violet-200 */
}

.section1-feature-item-right:nth-child(6):hover .section1-icon-wrapper {
  background-color: rgb(217 249 157); /* lime-200 */
}

/* 텍스트 호버 효과 */
.section1-feature-text {
  transition: color 0.3s ease;
}

.section1-feature-item:nth-child(1):hover .section1-feature-text {
  color: rgb(29 78 216); /* blue-700 */
}

.section1-feature-item:nth-child(2):hover .section1-feature-text {
  color: rgb(4 120 87); /* emerald-700 */
}

.section1-feature-item:nth-child(3):hover .section1-feature-text {
  color: rgb(109 40 217); /* purple-700 */
}

.section1-feature-item:nth-child(4):hover .section1-feature-text {
  color: rgb(67 56 202); /* indigo-700 */
}

.section1-feature-item:nth-child(5):hover .section1-feature-text {
  color: rgb(15 118 110); /* teal-700 */
}

.section1-feature-item:nth-child(6):hover .section1-feature-text {
  color: rgb(194 65 12); /* orange-700 */
}

.section1-feature-item-right:nth-child(1):hover .section1-feature-text {
  color: rgb(190 24 93); /* pink-700 */
}

.section1-feature-item-right:nth-child(2):hover .section1-feature-text {
  color: rgb(14 116 144); /* cyan-700 */
}

.section1-feature-item-right:nth-child(3):hover .section1-feature-text {
  color: rgb(161 98 7); /* yellow-700 */
}

.section1-feature-item-right:nth-child(4):hover .section1-feature-text {
  color: rgb(185 28 28); /* red-700 */
}

.section1-feature-item-right:nth-child(5):hover .section1-feature-text {
  color: rgb(109 40 217); /* violet-700 */
}

.section1-feature-item-right:nth-child(6):hover .section1-feature-text {
  color: rgb(77 124 15); /* lime-700 */
}

/* 화살표 그룹 호버 효과 */
.section1-arrow-group {
  cursor: pointer;
}

.section1-arrow {
  transition: transform 0.3s ease;
}

.section1-arrow-group:hover .section1-arrow {
  transform: scale(1.1);
}

.section1-arrow-bg,
.section1-arrow-path,
.section1-arrow-stroke {
  transition: all 0.3s ease;
}

.section1-arrow-group:hover .section1-arrow-bg {
  fill: rgb(239 246 255); /* blue-50 */
}

.section1-arrow-group:hover .section1-arrow-path {
  fill: rgb(37 99 235); /* blue-600 */
}

.section1-arrow-group:hover .section1-arrow-stroke {
  stroke: rgb(37 99 235); /* blue-600 */
}

.section1-arrow-glow {
  transition: opacity 0.3s ease;
}

.section1-arrow-group:hover .section1-arrow-glow {
  opacity: 0.2;
}

/* 중앙 이미지 호버 효과 */
.section1-center-image {
  transition: transform 0.5s ease;
}

.section1-center-image-wrapper:hover .section1-center-image {
  transform: scale(1.05);
}

/* 녹색 호버 링크 스타일 */
.link-green-hover {
  font-size: 1rem;
  line-height: 1.5;
  color: #374151; /* text-gray-700 */
  font-weight: 600; /* font-semibold */
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: #72a9db;
  text-underline-offset: 4px;
  transition: all 0.3s ease;
}

.link-green-hover:hover {
  color: #66686b; /* text-green-600 */
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: #059669;
  text-underline-offset: 4px;
}

.gradient-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}


/* 카드 설명 텍스트 말줄임 */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 카드 공통 */
.card-slide { display:flex; flex-direction:column; height:100%; }
.card-body  { display:flex; flex-direction:column; gap:0.5rem; flex:1 1 auto; }

/* 제목/설명 말줄임 */
.clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.clamp-4{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}

/* 카드 섹션 하단 여백 + 화살표 위치 안정화 */
/* 화살표 기준 컨테이너에도 여백을 줌 */
.card-section > .max-w-7xl > .relative{ 
    padding-bottom: 7rem;  /* 또는 7rem, 8rem으로 더 늘려보세요 */
}

/* 화살표를 더 아래로 떨어뜨림(컨테이너 기준) */
.card-arrows { 
    position: absolute; 
    left: 1rem; 
    bottom: -4rem;  /* 기존 -1rem에서 -2rem으로 변경 (더 아래로) */
    z-index: 20; 
    display: flex; 
    gap: .5rem;  
}

@media (min-width:1024px){ .card-arrows{ left:1rem; bottom:1rem; } } /* 데스크톱도 고정 */

/* 카드 공통 레이아웃(높이 고정) */
.card-slide{display:flex;flex-direction:column;min-height:380px;}       /* md 이상은 한 장 높이 고정 */
@media (min-width:768px){ .card-slide{min-height:420px;} }

.card-media{width:100%;height:140px;}                                   /* 이미지 높이 고정 */
@media (min-width:768px){ .card-media{height:156px;} }

.card-body{display:flex;flex-direction:column;gap:.5rem;flex:1 1 auto;} /* 본문이 남은 높이 채움 */

/* 제목/설명 줄수 고정(넘치면 …) */
.card-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-desc {display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
@media (min-width:1024px){ .card-desc{-webkit-line-clamp:4} }           /* 데스크톱은 4줄로 약간 줄임 */

/* 화살표 자리 확보 + 위치 고정 */
.card-section{ position:relative; padding-bottom:3.5rem; }             /* 섹션 바닥 여유 */
.card-arrows{ position:absolute; left:1rem; bottom:-2rem; z-index:20; display:flex; gap:.5rem; }

#lets-talk { position:relative; }
#demo-placeholder > section{ min-height: 520px; padding-bottom: 2.5rem; }
@media (max-width: 767px){
  #demo-placeholder > section{ min-height: 640px; padding-bottom: 3.5rem; }
}

/* Let's Talk include가 다음 섹션과 겹치지 않게 */
#lets-talk{ position:relative; z-index:0; /*overflow:hidden;*/ }

/* include 루트(section)가 장식 absolute들을 내부에서만 보이게 클립 */
#demo-placeholder > section{ position:relative; overflow:visible; }

/* (가능성이 높음) include 안의 절대배치 장식 레이어는 뒤로 */
#demo-placeholder > section > .absolute{ z-index:0; pointer-events:none; }
/* 실제 내용 컨테이너가 relative라면 앞쪽으로 */
#demo-placeholder > section > .relative{ position:relative; z-index:10; }
/* 진한 남색 섹션의 위 여백 (클래스가 다르면 해당 섹션에 추가) */
.section-after-demo{ margin-top: 1rem; position:relative; z-index:1; }

/* 1) 카드 섹션(위쪽)의 추가 바닥여백: PC에선 확 줄이기 */
@media (min-width:1024px){
  .card-section { padding-bottom: 2rem; }                  /* 3.5rem → 2rem */
  .card-section > .max-w-7xl > .relative { padding-bottom: 1rem; } /* 3.5rem → 1rem */
  .card-arrows { bottom: -2rem; }                        /* 버튼도 살짝 올림 */
}

/* Demo 래퍼의 마진 컬랩스 방지 + 여백 제거 */
#lets-talk{ display: flow-root; margin-bottom:0 !important; padding-bottom:0 !important; }

/* include 루트(section)의 바닥 여백 제거 (있다면) */
#demo-placeholder > section{ margin-bottom:0 !important; padding-bottom:0 !important; }

/* 푸터를 바로 붙이기 */
footer.section-after-demo{ margin-top:0 !important; }

/* 래퍼 위쪽 여백 완전 제거 */
#lets-talk { padding-top: 0 !important; margin-top: 0 !important; }

/* 실제 파란 섹션(인클루드된 section) 쪽에만 상단 패딩을 부여 */
#demo-placeholder > section { padding-top: 2.5rem; }
@media (min-width: 768px){
  #demo-placeholder > section { padding-top: 3.5rem; }
}

/* 혹시 남아 있는 위쪽 마진도 차단 */
#demo-placeholder > section { margin-top: 0 !important; }

/* 1) 데모 섹션은 자기 키를 확실히 갖도록 */
#demo-placeholder { position: relative; }
#demo-placeholder > section {
  position: relative;
  overflow: visible;              /* 잘리지 않게 */
  min-height: 460px;              /* 기본 높이 */
  padding-bottom: 88px;           /* 하단 여유 */
}

/* 모바일일수록 더 여유(이메일/버튼 내려올 때 대비) */
@media (max-width: 767.98px) {
  #demo-placeholder > section {
    min-height: 640px;
    padding-bottom: 112px;
  }
}

/* 2) 절대배치 요소가 있어도 항상 바닥 여유를 추가(섹션 가짜 스페이서) */
#demo-placeholder > section::after {
  content: "";
  display: block;
  height: 72px;                   /* 필요 여유 (모바일에서 CTA/문구가 겹치던 부분) */
}
@media (min-width: 768px) {
  #demo-placeholder > section::after { height: 56px; }
}

/* 3) 바로 다음(진한 남색) 섹션은 위로 겹치지 않게만 처리 */
.section-after-demo { position: relative; z-index: 1; margin-top: 0; }

/* ✅ 전역 폰트 스택 변수 */
:root{
  --app-font: "Pretendard","system-ui","-apple-system","Segoe UI","Roboto",
              "Helvetica Neue","Arial","Apple SD Gothic Neo","Noto Sans KR",
              "Malgun Gothic","Segoe UI Emoji","Segoe UI Symbol","Apple Color Emoji","sans-serif";
  /* 필요하면 'Nanum Gothic'을 맨 끝 폴백으로 추가 가능:
     --app-font: "Pretendard", ..., "Apple Color Emoji","Nanum Gothic","sans-serif"; */
}

/* ✅ html/body에만 폰트 지정 (과격한 * 선택자 대신) */
html, body {
  font-family: var(--app-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}


/* ✅ 유지/추가: 컴포넌트 폰트 상속 */
.swiper, .swiper * { font-family: inherit !important; }
button, a, p, h1, h2, h3, h4, h5, h6 { font-family: inherit; }

/* 1) 컨테이너를 상대 기준으로 (swiper도 포함) */
.swiper, .swiper-container {
  position: relative;
}

/* 2) 기본 화살표를 세로 가운데로 고정 */
.main-banner .swiper-button-prev,
.main-banner .swiper-button-next {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* 3) 좌우 위치 지정 */
.main-banner .swiper-button-prev { left: 16px !important; right: auto !important; }
.main-banner .swiper-button-next { right: 16px !important; left: auto !important; }

/* 4) (선택) 배경·모양 충돌 정리: 투명하게 쓰려면 아래 4줄 유지 */
.main-banner .swiper-button-prev,
.main-banner .swiper-button-next {
  background-color: transparent !important;
  width: auto; height: auto; box-shadow: none; border-radius: 0; padding: 0;
}
.main-banner .swiper-button-prev::after,
.main-banner .swiper-button-next::after {
  font-size: 2.5rem;
  font-weight: 700;
  color: white;
}

.main-banner .swiper-button-prev,
.main-banner .swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
}

.main-banner .swiper-button-prev { left: 1rem; }
.main-banner .swiper-button-next { right: 1rem; }

/* 컨테이너 기준을 확실히: main-banner(.swiper)에 relative 부여 */
.main-banner { position: relative !important; }

/* 버튼을 컨테이너의 '직계 자식'으로 한정해 강하게 지정 */
.main-banner > .swiper-button-prev,
.main-banner > .swiper-button-next {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 30 !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 좌우 고정 */
.main-banner > .swiper-button-prev { left: 16px !important; right: auto !important; }
.main-banner > .swiper-button-next { right: 16px !important; left: auto !important; }

/* 혹시 이전 커스텀 규칙이 배경색/크기를 망치면 무력화 */
.main-banner .swiper-button-prev,
.main-banner .swiper-button-next {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* 아이콘 크기/색 유지 */
.main-banner .swiper-button-prev::after,
.main-banner .swiper-button-next::after {
  font-size: 2.2rem !important;
  color: #fff !important;
}

@media (max-width: 639px) {
  #lets-talk { display: none !important; }
}

.ai-quote { font-weight: 500; }

  .no-scrollbar::-webkit-scrollbar { display: none; }
  .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

  @media (max-width: 767.98px){
  .main-banner .swiper-button-next,
  .main-banner .swiper-button-prev,
  .main-banner .swiper-pagination{
    display: none !important;
  }
}