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

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