/* ============================================
   index.php 전용 CSS 스타일
   ============================================ */

/* ============================================
   CSS 변수 정의 (Color Palette)
   적용 위치: 전체 페이지에서 사용되는 색상 변수
   - --bs-primary: Bootstrap 기본 primary 색상 (보라색)
   - --primary-color: 메인 primary 색상
   - --primary-dark: primary 색상의 어두운 버전
   - --secondary-color: 보조 색상 (녹색)
   - --text-dark: 어두운 텍스트 색상
   - --text-light: 밝은 텍스트 색상
   - --bg-light: 밝은 배경 색상
   ============================================ */
:root {
   --bs-primary: #4F46E5;
   --bs-primary-rgb: 79, 70, 229;
   --primary-color: #4F46E5;
   --primary-dark: #4338CA;
   --secondary-color: #10B981;
   --text-dark: #1F2937;
   --text-light: #6B7280;
   --bg-light: #F9FAFB;
}

/* ============================================
   기본 Body 스타일
   ============================================ */
body {
   font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   color: var(--text-dark);
   line-height: 1.6;
}

/* ============================================
   Bootstrap 커스텀 오버라이드
   ============================================ */

/* 상단 정보 바 (Top Bar) - 2_eln_nav.php */
.top-bar .text-muted {
   color: #6c757d !important;
}

.top-bar i {
   margin-right: 0.25rem;
}

/* 모바일 해상도에서 왼쪽 상단 정보 숨김 및 우측 정렬 */
@media (max-width: 576px) {
   .top-bar .col-md-6:first-child {
      display: none;
   }

   .top-bar .col-md-6:last-child {
      text-align: right !important;
   }
}

/* 네비게이션 바 스타일 */
.navbar {
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
   padding-top: calc(0.25rem + 10px);
   padding-bottom: calc(0.25rem + 10px);
   overflow: visible !important;
}

/* 헤더에 position relative 추가 (메가 메뉴 패널 위치 지정용) */
header {
   position: relative;
}

/* 로고 브랜드 스타일 */
.navbar-brand {
   font-size: 1.5rem;
   font-weight: 700;
   color: var(--primary-color) !important;
   transition: transform 0.3s ease;
}

/* 로고 호버 효과 */
.navbar-brand:hover {
   transform: scale(1.05);
}

/* 로고 이미지 전환 효과 */
.navbar-brand img {
   transition: transform 0.3s ease;
}

/* 로고 이미지 호버 효과 */
.navbar-brand:hover img {
   transform: scale(1.05);
}

/* 네비게이션 링크 기본 스타일 */
.navbar-nav .nav-link {
   font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   font-weight: 500;
   font-size: 0.9375rem;
   /* 15px */
   color: #6c757d !important;
   position: relative;
   margin: 0 0.5rem;
   padding: 0.5rem 0.75rem;
   overflow: visible;
}

/* 네비게이션 링크 하단 라인 (기본 상태: 숨김) */
.navbar-nav .nav-link::after {
   content: '';
   position: absolute;
   bottom: -4px;
   left: 50%;
   width: 0;
   height: 1px;
   background: #adb5bd !important;
   transition: all 0.3s ease;
   transform: translateX(-50%);
   opacity: 0;
   z-index: 1000;
   pointer-events: none;
}

/* 네비게이션 링크 호버 시 하단 라인 (표시) */
.navbar-nav .nav-link:hover::after {
   width: 100% !important;
   opacity: 1 !important;
   background: #A6A6A6 !important;
}

/* 네비게이션 링크 호버 시 텍스트 색상 변경 */
.navbar-nav .nav-link:hover {
   color: #000000 !important;
}

/* ============================================
   드롭다운 메뉴 호버 효과
   ============================================ */

/* 데스크톱에서 드롭다운 호버 시 메뉴 표시 */
@media (min-width: 1200px) {
   .navbar-nav .dropdown:hover .dropdown-menu {
      display: block;
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
   }

   /* 드롭다운 메뉴 기본 스타일 */
   .navbar-nav .dropdown-menu {
      display: block;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px);
      transition: all 0.3s ease;
      margin-top: 5px;
      /* 메뉴 박스를 아래로 5px 이동 */
      border: none;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
   }

   /* 드롭다운 메뉴 호버 시 */
   .navbar-nav .dropdown:hover .dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
   }

   /* 전체 메뉴 (메가 메뉴) 스타일 */
   .navbar-nav .mega-menu {
      min-width: 300px;
      max-height: 80vh;
      overflow-y: auto;
   }

   .navbar-nav .mega-menu .dropdown-header {
      font-weight: 700;
      color: var(--primary-color);
      padding: 0.75rem 1rem 0.5rem;
      font-size: 1rem;
      text-transform: uppercase;
   }

   /* PC 해상도에서 네비게이션 링크 하단 라인 호버 시 표시 */
   .navbar-nav .nav-link:hover::after {
      width: 100% !important;
      opacity: 1 !important;
      background: #A6A6A6 !important;
      visibility: visible !important;
      bottom: -1px !important;
   }

   /* 드롭다운 메뉴 또는 서브 메뉴 항목 호버 시에도 카테고리 메뉴 아래 라인 표시 */
   .navbar-nav .dropdown:hover .nav-link::after {
      width: 100% !important;
      opacity: 1 !important;
      background: #A6A6A6 !important;
      visibility: visible !important;
      bottom: -1px !important;
   }

   /* PC 해상도에서 네비게이션 바 overflow 설정 */
   .navbar {
      overflow: visible !important;
   }

   .navbar-nav {
      overflow: visible !important;
   }

   .navbar-collapse {
      overflow: visible !important;
   }
}

/* 드롭다운 메뉴 항목 폰트 크기 조정 */
.navbar-nav .dropdown-item {
   font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   font-size: 0.875rem;
   /* 14px */
   padding: 0.5rem 1rem;
}

/* 드롭다운 메뉴 구분선 너비 80% */
.navbar-nav .dropdown-divider {
   width: 80%;
   margin-left: auto;
   margin-right: auto;
}

/* ============================================
   메가 메뉴 슬라이드 패널
   ============================================ */
.mega-menu-panel {
   position: absolute;
   top: 100%;
   left: 0;
   right: 0;
   background: white;
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.4s ease-in-out;
   z-index: 1000;
}

.mega-menu-panel.active {
   max-height: 600px;
   padding: 2rem 0;
}

/* 메가 메뉴 패널의 각 카테고리를 동일한 너비로 설정 */
.mega-menu-panel .row {
   display: flex;
   flex-wrap: wrap;
}

.mega-menu-panel .row>div {
   flex: 1;
   min-width: 0;
}

.mega-menu-list {
   list-style: none;
   padding: 0;
   margin: 0;
}

.mega-menu-list li {
   margin-bottom: 0.5rem;
}

.mega-menu-list a {
   color: var(--text-dark);
   text-decoration: none;
   display: block;
   padding: 0.5rem 0;
   transition: all 0.3s ease;
}

.mega-menu-list a:hover {
   color: var(--primary-color);
   padding-left: 0.5rem;
}

.mega-menu-divider {
   margin: 0.75rem 0;
   border-color: #e5e7eb;
}

/* Primary 버튼 스타일 */
.btn-primary {
   background-color: var(--primary-color);
   border-color: var(--primary-color);
}

/* Primary 버튼 호버 효과 */
.btn-primary:hover {
   background-color: var(--primary-dark);
   border-color: var(--primary-dark);
   transform: translateY(-2px);
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* ============================================
   상단 정보 바 (Top Bar) - 2_eln_nav.php
   적용 위치: index.php - 2_eln_nav.php의 .top-bar div
   설명: 페이지 상단에 표시되는 연락처 정보 영역
   - 왼쪽: "www.elearnnet.kr Since 1999"
   - 오른쪽: 이메일 및 전화번호
   ============================================ */
.top-bar {
   font-size: 0.875rem;
   background-color: #f8f9fa !important;
}

/* PC 해상도에서 기본 배경색 오버라이드
   적용 위치: index.php - PC 해상도(1200px 이상)에서 상단 정보 바를 투명하게 설정
   설명: 메인 슬라이드 위에 오버레이되도록 투명 배경 적용
*/
@media (min-width: 1200px) {
   .top-bar {
      background-color: transparent !important;
   }
}

/* ============================================
   PC 해상도에서 상단 영역을 투명하게 하고 슬라이드 위에 오버레이
   적용 위치: index.php - PC 해상도(1200px 이상)에서만 적용
   설명: 메인 슬라이드가 전체 화면을 차지할 때 상단 네비게이션을 투명하게 하여
         슬라이드 이미지 위에 오버레이되도록 설정
   ============================================ */
@media (min-width: 1200px) {

   /* 헤더를 절대 위치로 설정하여 슬라이드 위에 배치
      적용 위치: index.php - header 요소
      설명: header를 absolute로 설정하여 메인 슬라이드 위에 배치
   */
   header {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      width: 100%;
   }

   /* 상단 정보 바 배경 투명 - 모든 가능한 배경 속성 오버라이드 */
   header .top-bar,
   header .top-bar.bg-light,
   .top-bar,
   .top-bar.bg-light,
   div.top-bar {
      background-color: transparent !important;
      background: transparent !important;
      background-image: none !important;
      background-clip: border-box !important;
      border-bottom: none !important;
   }

   /* 네비게이션 바 배경 투명 - 모든 가능한 배경 속성 오버라이드 */
   header .navbar,
   header .navbar.navbar-expand-xl,
   header .navbar.navbar-light,
   .navbar,
   .navbar.navbar-expand-xl,
   .navbar.navbar-light,
   nav.navbar {
      background-color: transparent !important;
      background: transparent !important;
      background-image: none !important;
      background-clip: border-box !important;
      box-shadow: none !important;
   }

   /* 네비게이션 컨테이너도 투명하게 */
   .navbar .container,
   header .navbar .container {
      background-color: transparent !important;
      background: transparent !important;
      background-image: none !important;
   }

   /* 네비게이션 콜랩스 영역도 투명하게 */
   .navbar-collapse,
   header .navbar-collapse {
      background-color: transparent !important;
      background: transparent !important;
      background-image: none !important;
   }

   /* 상단 정보 바와 네비게이션 바의 직접 자식 요소만 투명하게 */
   header .top-bar *,
   header .navbar * {
      background-color: transparent !important;
   }

   /* 예외: 드롭다운 메뉴는 배경 유지 */
   header .dropdown-menu {
      background-color: #ffffff !important;
   }

   /* 예외: 컨테이너 내부 요소는 투명하게 */
   header .container {
      background-color: transparent !important;
   }

   /* 네비게이션 링크 색상을 흰색으로 변경 (슬라이드 위에서 보이도록) */
   .navbar-nav .nav-link {
      color: #ffffff !important;
   }

   .navbar-nav .nav-link:hover {
      color: #ffffff !important;
   }

   /* 로고 브랜드 색상도 흰색으로 변경 */
   .navbar-brand {
      color: #ffffff !important;
   }

   /* 상단 정보 바 텍스트 색상을 흰색으로 변경 */
   .top-bar .text-muted {
      color: rgba(255, 255, 255, 0.9) !important;
   }

   /* 네비게이션 토글 버튼 아이콘 색상도 흰색으로 */
   .navbar-toggler-icon {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
   }
}

/* ============================================
   애니메이션
   ============================================ */
@keyframes fadeInUp {
   from {
      opacity: 0;
      transform: translateY(30px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

/* ============================================
   반응형 디자인 (Responsive)
   ============================================ */

/* 태블릿 이하 (768px 이하) */
@media (max-width: 768px) {
   .hero h1 {
      font-size: 2.5rem;
   }

   .hero p {
      font-size: 1.125rem;
   }

   .section-title {
      font-size: 2rem;
   }

   /* 태블릿 해상도에서도 모바일과 동일한 메뉴 스타일 적용 */
   .navbar-nav {
      text-align: left !important;
      list-style: disc;
      padding-left: 1.5rem;
      width: 100%;
   }

   .navbar-nav .nav-item {
      list-style: disc;
      display: list-item;
      text-align: left !important;
      width: 100%;
   }

   .navbar-nav .nav-link {
      text-align: left !important;
      padding-left: 0.5rem !important;
      padding-right: 2rem !important;
      position: relative;
      width: 100%;
      display: flex !important;
      justify-content: space-between;
      align-items: center;
   }

   /* 카테고리 명 앞에 블릿 삭제 */
   .navbar-nav .nav-link::before {
      content: '';
      display: none;
   }

   /* 메뉴 오른쪽 끝에 > 표시 추가 */
   .navbar-nav .nav-link::after {
      content: '>' !important;
      position: absolute;
      right: 0.5rem;
      color: #6c757d;
      font-weight: bold;
      font-size: 1rem;
      transition: transform 0.3s ease;
      opacity: 1 !important;
      width: auto !important;
      height: auto !important;
      background: none !important;
      bottom: auto !important;
      left: auto !important;
      transform: none !important;
      pointer-events: none;
      border: none !important;
      box-shadow: none !important;
   }

   /* 드롭다운이 열렸을 때 아래 화살표로 변경 */
   .navbar-nav .nav-link[aria-expanded="true"]::after {
      content: '▼' !important;
      transform: none;
   }

   /* 태블릿 해상도에서 호버 전후 회색 라인 제거 */
   .navbar-nav .nav-link:hover::after {
      background: none !important;
      width: auto !important;
      height: auto !important;
      opacity: 1 !important;
   }

   /* 서브메뉴 리스트 형태 및 좌측 정렬 */
   .navbar-nav .dropdown-menu {
      text-align: left !important;
      list-style: disc;
      padding-left: 2rem;
      border: none;
      box-shadow: none;
      background-color: transparent;
      width: 100%;
   }

   .navbar-nav .dropdown-item {
      text-align: left !important;
      padding-left: 0.5rem;
      list-style: disc;
      display: list-item;
      width: 100%;
   }
}

/* 모바일 (576px 이하) */
@media (max-width: 576px) {
   .hero {
      padding: 4rem 0;
   }

   .hero h1 {
      font-size: 2rem;
   }

   /* 모바일 해상도에서 카테고리 메뉴 리스트 형태 및 좌측 정렬 */
   .navbar-nav {
      text-align: left !important;
      list-style: disc;
      padding-left: 1.5rem;
      width: 100%;
   }

   .navbar-nav .nav-item {
      list-style: disc;
      display: list-item;
      text-align: left !important;
      width: 100%;
   }

   .navbar-nav .nav-link {
      text-align: left !important;
      padding-left: 0.5rem !important;
      padding-right: 2rem !important;
      padding-bottom: 0.75rem !important;
      margin-bottom: 0.5rem;
      position: relative;
      width: 100%;
      display: flex !important;
      justify-content: space-between;
      align-items: center;
   }

   /* 각 메뉴 하단에 90% 너비 라인 추가 */
   .navbar-nav .nav-link::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 5%;
      width: 90%;
      height: 1px;
      background-color: #e5e7eb;
      display: block;
   }

   /* 메뉴 오른쪽 끝에 > 표시 추가 */
   .navbar-nav .nav-link::after {
      content: '>' !important;
      position: absolute;
      right: 0.5rem;
      color: #6c757d;
      font-weight: bold;
      font-size: 1rem;
      transition: transform 0.3s ease;
      opacity: 1 !important;
      width: auto !important;
      height: auto !important;
      background: none !important;
      bottom: auto !important;
      left: auto !important;
      transform: none !important;
      pointer-events: none;
      border: none !important;
      box-shadow: none !important;
   }

   /* 드롭다운이 열렸을 때 아래 화살표로 변경 */
   .navbar-nav .nav-link[aria-expanded="true"]::after {
      content: '▼' !important;
      transform: none;
   }

   /* 모바일 해상도에서 호버 전후 회색 라인 제거 */
   .navbar-nav .nav-link:hover::after {
      background: none !important;
      width: auto !important;
      height: auto !important;
      opacity: 1 !important;
   }

   /* 모바일 해상도에서 > 표시 우측 패딩 10px */
   .navbar-nav .nav-link::after {
      right: 10px !important;
   }

   /* 서브메뉴 리스트 형태 및 좌측 정렬 */
   .navbar-nav .dropdown-menu {
      text-align: left !important;
      list-style: none;
      padding-left: 1rem;
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
      border: none;
      box-shadow: none;
      background-color: #f5f5f5;
      width: 100%;
      margin-top: 0.5rem;
      margin-bottom: 0.5rem;
   }

   .navbar-nav .dropdown-item {
      text-align: left !important;
      padding-left: 1.5rem;
      padding-right: 2rem !important;
      padding-top: 0.75rem !important;
      padding-bottom: 0.75rem !important;
      margin-bottom: 0;
      list-style: none;
      display: flex !important;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      position: relative;
   }

   /* 서브메뉴 앞에 블릿 추가 */
   .navbar-nav .dropdown-item::before {
      content: '•';
      position: absolute;
      left: 0.5rem;
      color: #6c757d;
      font-weight: bold;
      z-index: 2;
   }

   /* 서브메뉴 하단에 90% 너비 라인 추가 */
   .navbar-nav .dropdown-item:not(:last-child) {
      position: relative;
      padding-bottom: 0.75rem !important;
   }

   .navbar-nav .dropdown-item:not(:last-child)::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 5%;
      width: 90%;
      height: 1px;
      background-color: #9ca3af;
      display: block;
      z-index: 0;
   }

   /* 서브메뉴 오른쪽에 > 표시 추가 */
   .navbar-nav .dropdown-item {
      padding-right: 2.5rem !important;
      position: relative;
   }

   /* 마지막 항목이 아닌 경우에만 라인 표시 (우선순위 높임) */
   .navbar-nav .dropdown-item:not(:last-child)::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 5%;
      width: 90%;
      height: 1px;
      background-color: #9ca3af;
      display: block;
      z-index: 0;
   }

   /* 마지막 항목에는 > 표시만 표시 */
   .navbar-nav .dropdown-item:last-child::after {
      content: '>';
      position: absolute;
      right: 15px;
      color: #6c757d;
      font-weight: bold;
      font-size: 1rem;
      pointer-events: none;
      z-index: 2;
      bottom: 50%;
      transform: translateY(50%);
   }

   /* 모바일 해상도에서 서브메뉴 2개씩마다 생기던 구분선 제거 */
   .navbar-nav .dropdown-divider {
      display: none !important;
   }
}

/* ============================================
   서브페이지 전용 스타일은 assets/css/sub.css 파일로 분리되었습니다.
   eln-2505.php 같은 서브페이지는 sub.css를 로드해야 합니다.
   ============================================ */

.top-bar .text-muted {
   color: #6c757d !important;
}

.top-bar i {
   margin-right: 0.25rem;
}

/* ============================================
   네비게이션 바 스타일 - 2_eln_nav.php
   ============================================ */
.navbar {
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
   padding-top: calc(0.25rem + 10px);
   padding-bottom: calc(0.25rem + 10px);
   overflow: visible !important;
   background-color: #ffffff;
}

/* 헤더에 position relative 추가 */
header {
   position: relative;
}

/* 로고 브랜드 스타일 */
.navbar-brand {
   font-size: 1.5rem;
   font-weight: 700;
   color: var(--primary-color) !important;
   transition: transform 0.3s ease;
}

/* 로고 호버 효과 */
.navbar-brand:hover {
   transform: scale(1.05);
}

/* 로고 이미지 전환 효과 */
.navbar-brand img {
   transition: transform 0.3s ease;
}

/* 로고 이미지 호버 효과 */
.navbar-brand:hover img {
   transform: scale(1.05);
}

/* 네비게이션 링크 기본 스타일 */
.navbar-nav .nav-link {
   font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   /* index.php와 서브 페이지 통일 */
   font-weight: 500;
   font-size: 0.9375rem;
   /* 15px - index.php와 서브 페이지 통일 */
   color: #6c757d !important;
   position: relative;
   padding: 0.5rem 0.75rem;
   /* index.php와 서브 페이지 통일 */
   margin: 0 0.5rem;
   overflow: visible;
}

/* 네비게이션 링크 하단 라인 (기본 상태: 숨김) */
.navbar-nav .nav-link::after {
   content: '';
   position: absolute;
   bottom: -4px;
   left: 50%;
   width: 0;
   height: 1px;
   background: #adb5bd !important;
   transition: all 0.3s ease;
   transform: translateX(-50%);
   opacity: 0;
   z-index: 1000;
   pointer-events: none;
}

/* 네비게이션 링크 호버 시 하단 라인 (표시) */
.navbar-nav .nav-link:hover::after {
   width: 100% !important;
   opacity: 1 !important;
   background: #A6A6A6 !important;
}

/* 네비게이션 링크 호버 시 텍스트 색상 변경 */
.navbar-nav .nav-link:hover {
   color: #000000 !important;
}

/* ============================================
   드롭다운 메뉴 호버 효과 - 2_eln_nav.php
   ============================================ */

/* 데스크톱에서 드롭다운 호버 시 메뉴 표시 */
@media (min-width: 1200px) {
   .navbar-nav .dropdown:hover .dropdown-menu {
      display: block;
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
   }

   /* 드롭다운 메뉴 기본 스타일 */
   .navbar-nav .dropdown-menu {
      display: block;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px);
      transition: all 0.3s ease;
      margin-top: 5px;
      /* 메뉴 박스를 아래로 5px 이동 */
      border: none;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
   }

   /* 드롭다운 메뉴 호버 시 */
   .navbar-nav .dropdown:hover .dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
   }

   /* PC 해상도에서 네비게이션 링크 하단 라인 호버 시 표시 */
   .navbar-nav .nav-link:hover::after {
      width: 100% !important;
      opacity: 1 !important;
      background: #A6A6A6 !important;
      visibility: visible !important;
      bottom: -1px !important;
   }

   /* 드롭다운 메뉴 또는 서브 메뉴 항목 호버 시에도 카테고리 메뉴 아래 라인 표시 */
   .navbar-nav .dropdown:hover .nav-link::after {
      width: 100% !important;
      opacity: 1 !important;
      background: #A6A6A6 !important;
      visibility: visible !important;
      bottom: -1px !important;
   }

   /* PC 해상도에서 네비게이션 바 overflow 설정 */
   .navbar {
      overflow: visible !important;
   }

   .navbar-nav {
      overflow: visible !important;
   }

   .navbar-collapse {
      overflow: visible !important;
   }
}

/* 드롭다운 메뉴 항목 폰트 크기 조정 */
.navbar-nav .dropdown-item {
   font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   /* index.php와 서브 페이지 통일 */
   font-size: 0.875rem;
   /* 14px - index.php와 서브 페이지 통일 */
   padding: 0.5rem 1rem;
   /* index.php와 서브 페이지 통일 */
}

/* 드롭다운 메뉴 구분선 너비 80% */
.navbar-nav .dropdown-divider {
   width: 80%;
   margin-left: auto;
   margin-right: auto;
}

/* ============================================
   Main Slide 섹션 (메인 슬라이드 영역)
   적용 위치: 3_eln_main_slide.php
   ============================================ */
.main-slide-section {
   position: relative;
   overflow: hidden;
}

.main-slide-section .carousel {
   height: 600px;
}

.main-slide-section .carousel-item {
   height: 600px;
}

/* PC 해상도에서 메인 슬라이드 영역을 브라우저 전체 높이로 설정 */
@media (min-width: 1200px) {
   .main-slide-section {
      height: 100vh;
   }

   .main-slide-section .carousel {
      height: 100vh;
   }

   .main-slide-section .carousel-item {
      height: 100vh;
   }
}

.main-slide-section .carousel-item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.main-slide-section .carousel-control-prev,
.main-slide-section .carousel-control-next {
   width: 5%;
   opacity: 0.8;
}

.main-slide-section .carousel-control-prev {
   left: 220px;
}

.main-slide-section .carousel-control-next {
   right: 220px;
}

.main-slide-section .carousel-control-prev:hover,
.main-slide-section .carousel-control-next:hover {
   opacity: 1;
}

/* 화살표 아이콘 크기 (70% 크기) */
.main-slide-section .carousel-control-prev-icon,
.main-slide-section .carousel-control-next-icon {
   width: 7rem;
   height: 7rem;
   background-size: 7rem 7rem;
}

.main-slide-section .carousel-indicators {
   margin-bottom: 1.5rem;
}

.main-slide-section .carousel-indicators button {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background-color: rgba(255, 255, 255, 0.5);
   border: 2px solid rgba(255, 255, 255, 0.8);
   margin: 0 5px;
}

.main-slide-section .carousel-indicators button.active {
   background-color: var(--primary-color);
   border-color: var(--primary-color);
}

/* 메인 슬라이드 캡션 스타일 */
/* 적용 위치: 3_eln_main_slide.php - 각 슬라이드의 carousel-caption */
.main-slide-section .carousel-caption {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   right: auto;
   bottom: auto;
   padding: 2rem;
   text-align: center;
}

/* 메인 슬라이드 제목 (h5) 스타일 */
/* 적용 위치: 3_eln_main_slide.php - carousel-caption 내부의 h5 태그 */
.main-slide-section .carousel-caption h5 {
   font-size: 3.5rem;
   font-weight: 700;
   color: #ffffff;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
   margin-bottom: 1.5rem;
}

/* 메인 슬라이드 설명 (p) 스타일 */
/* 적용 위치: 3_eln_main_slide.php - carousel-caption 내부의 p 태그 */
.main-slide-section .carousel-caption p {
   font-size: 1.5rem;
   color: #ffffff;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
   margin-bottom: 0;
}

/* 메인 슬라이드 상세페이지 바로가기 버튼 스타일 */
/* 적용 위치: 3_eln_main_slide.php - carousel-caption 내부의 .btn-slide-detail 클래스 */
/* "상세페이지 바로가기", "할인이벤트 보기" 버튼에 적용 */
.main-slide-section .carousel-caption .btn-slide-detail {
   min-width: 300px;
   padding: 12px 40px;
   font-size: 1.2rem;
   font-weight: 600;
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.2);
   transition: all 0.3s ease;
}

/* 메인 슬라이드 버튼 호버 효과 (눌려진 효과) */
.main-slide-section .carousel-caption .btn-slide-detail:hover {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);
   transform: translateY(2px);
}

/* 스크롤 화살표 스타일 */
.scroll-down-arrow {
   position: absolute;
   bottom: 120px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 10;
   animation: bounce 2s infinite;
}

.scroll-down-link {
   display: flex;
   align-items: center;
   justify-content: center;
   color: #ffffff;
   font-size: 7rem;
   text-decoration: none;
   transition: all 0.3s ease;
   opacity: 0.8;
   text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}

.scroll-down-link:hover {
   color: #ffffff;
   transform: scale(1.1);
   opacity: 1;
   text-shadow: 2px 2px 12px rgba(0, 0, 0, 0.7);
}

/* 위아래로 움직이는 애니메이션 */
@keyframes bounce {
   0%, 20%, 50%, 80%, 100% {
      transform: translateX(-50%) translateY(0);
   }
   40% {
      transform: translateX(-50%) translateY(-10px);
   }
   60% {
      transform: translateX(-50%) translateY(-5px);
   }
}

/* 모바일에서 스크롤 화살표 크기 조정 */
@media (max-width: 768px) {
   .scroll-down-arrow {
      bottom: 80px;
   }
}

/* ============================================
   Features 섹션 (기능 소개 영역)
   적용 위치: index.php - "준비되어 있는 LMS" 섹션
   - cardCarouselTop: 위쪽 swiper 캐러셀
   - cardCarouselBottom: 아래쪽 swiper 캐러셀
   - feature-card: 각 LMS 카드 스타일
   ============================================ */
.features {
   padding: 5rem 0;
   background: #F3F3F3;
}

/* 카드 캐러셀 스타일 */
.features .carousel {
   position: relative;
}

.features .carousel-control-prev,
.features .carousel-control-next {
   width: 50px;
   height: 50px;
   background-color: rgba(0, 0, 0, 0.5);
   border-radius: 50%;
   top: 50%;
   transform: translateY(-50%);
   opacity: 0.7;
}

.features .carousel-control-prev:hover,
.features .carousel-control-next:hover {
   opacity: 1;
}

.features .carousel-control-prev {
   left: -25px;
}

.features .carousel-control-next {
   right: -25px;
}

/* 섹션 제목 스타일 */
.section-title {
   font-size: 2.5rem;
   font-weight: 700;
   color: var(--text-dark);
}

/* 준비되어 있는 LMS 영역 섹션 제목 스타일 */
/* 적용 위치: index.php - "준비되어 있는 LMS" 섹션의 h2.section-title */
.features .section-title {
   color: #595959;
}

/* 준비되어 있는 LMS 영역 카드 제목 스타일 */
/* 적용 위치: index.php - 위쪽 swiper (cardCarouselTop)의 모든 카드 제목 */
.features .feature-card .card-title {
   color: #595959;
   text-align: center;
}

/* 준비되어 있는 LMS 영역 아래쪽 swiper 카드 제목 스타일 */
/* 적용 위치: index.php - 아래쪽 swiper (cardCarouselBottom)의 모든 카드 제목 */
.features .cardCarouselBottom .feature-card .card-title {
   color: #595959;
   text-align: center;
}

/* 섹션 부제목 스타일 */
.section-subtitle {
   font-size: 1.125rem;
   color: var(--text-light);
}

/* Swiper 캐러셀 스타일 */
.cardCarouselTop,
.cardCarouselBottom {
   padding: 10% 0;
}

.cardCarouselTop {
   margin-bottom: 1rem !important;
}

/* PC 해상도에서 캐러셀 간격 50% 줄이기 */
@media (min-width: 1200px) {
   .cardCarouselTop {
      margin-bottom: 0.5rem !important;
   }

   .cardCarouselTop,
   .cardCarouselBottom {
      padding: 5% 0;
   }
}

.cardCarouselTop .swiper-slide,
.cardCarouselBottom .swiper-slide {
   height: auto;
}

.cardCarouselTop .swiper-button-prev,
.cardCarouselTop .swiper-button-next,
.cardCarouselBottom .swiper-button-prev,
.cardCarouselBottom .swiper-button-next {
   top: calc(50% + 30px);
   transform: translateY(-50%);
   width: 60px;
   height: 60px;
   border-radius: 50%;
   background-color: rgba(255, 255, 255, 0.4);
   color: #808080;
}

.cardCarouselTop .swiper-button-prev,
.cardCarouselBottom .swiper-button-prev {
   left: -20px;
}

.cardCarouselTop .swiper-button-next,
.cardCarouselBottom .swiper-button-next {
   right: -20px;
}

.cardCarouselTop .swiper-button-prev:after,
.cardCarouselTop .swiper-button-next:after,
.cardCarouselBottom .swiper-button-prev:after,
.cardCarouselBottom .swiper-button-next:after {
   font-size: 40px;
}

/* 기능 카드 스타일 */
.feature-card {
   height: 100%;
   transition: all 0.3s ease;
   border: 1px solid #e5e7eb;
   border-radius: 12px;
   background: #ffffff;
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
   overflow: hidden;
}

/* 카드 바로가기 버튼 스타일 */
.btn-round {
   border-radius: 50px;
   padding: 10px 30px;
   font-weight: 500;
   transition: all 0.3s ease;
   width: 100%;
   text-decoration: none;
   display: inline-block;
}

.btn-round:hover {
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(25, 135, 84, 0.3);
   background-color: #198754;
   border-color: #198754;
   opacity: 0.9;
}

/* 기능 카드 이미지 래퍼 */
/* 적용 위치: index.php - "준비되어 있는 LMS" 및 "포트폴리오" 영역의 모든 카드 이미지 */
/* 이미지 하단에 회색 테두리 추가 */
.feature-card .card-img-wrapper {
   position: relative;
   width: 100%;
   height: 200px;
   overflow: hidden;
   border-radius: 12px 12px 0 0;
   border-bottom: 0.5px solid #CCCCCC;
}

/* 기능 카드 이미지 */
.feature-card .card-img-top {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.3s ease;
}

/* 기능 카드 내부 배경색 */
.feature-card .card-body {
   background: #ffffff;
   border-radius: 12px;
   transition: background-color 0.3s ease;
}

/* 기능 카드 호버 효과 */
.feature-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
   border-color: #d1d5db;
}

/* 카드 호버 시 이미지 확대 */
.feature-card:hover .card-img-wrapper {
   overflow: hidden;
}

.feature-card:hover .card-img-top {
   transform: scale(1.1);
}

/* 카드 호버 시 내부 배경색 변경 */
.feature-card:hover .card-body {
   background-color: #ffffff !important;
}

/* 기능 카드 제목 */
.feature-card .card-title {
   font-size: 1.75rem;
   font-weight: 700;
   color: var(--text-dark);
   margin-bottom: 1rem;
   line-height: 1.3;
}

/* 기능 카드 부제목 */
.feature-card .card-subtitle {
   font-size: 1rem;
   color: var(--text-light);
   line-height: 1.6;
   margin-bottom: 1.5rem;
   font-weight: 400;
}

/* 기능 카드 리스트 */
.feature-card .card-feature-list {
   list-style: none;
   padding: 0;
   margin: 0;
}

.feature-card .card-feature-list li {
   padding: 0.5rem 0;
   padding-left: 1.5rem;
   position: relative;
   color: var(--text-dark);
   font-size: 0.95rem;
   line-height: 1.6;
}

.feature-card .card-feature-list li::before {
   content: '•';
   position: absolute;
   left: 0;
   color: var(--primary-color);
   font-weight: bold;
   font-size: 1.2rem;
}

/* 기능 카드 텍스트 (레거시) */
.feature-card .card-text {
   color: var(--text-light);
   line-height: 1.8;
}

/* ============================================
   제품소개서 / 회사소개서 버튼 영역
   적용 위치: index.php - "제품소개서 / 회사소개서 버튼 영역" 섹션
   - brochure-section: 배경 이미지와 오버레이가 있는 섹션
   - btn-brochure: 제품소개서/회사소개서 버튼 기본 스타일
   - btn-brochure-product: 제품소개서 버튼 (밝은 녹색)
   ============================================ */
.brochure-section {
   padding: 0;
   background-image: url('../images/index/elearnnet/elearnnet_10.jpg') !important;
   background-repeat: no-repeat !important;
   background-position: center center !important;
   background-size: cover !important;
   background-color: transparent !important;
   text-align: center;
   position: relative;
   min-height: 400px;
   display: flex;
   align-items: center;
}

/* 배경 이미지 위에 50% 어두운 오버레이 추가 */
.brochure-section::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 0;
}

/* 버튼이 오버레이 위에 표시되도록 */
.brochure-section .container {
   position: relative;
   z-index: 1;
}

.btn-brochure {
   padding: 18px 36px;
   font-size: 18px;
   font-weight: 500;
   border-radius: 0;
   text-decoration: none;
   transition: all 0.3s ease;
   min-width: 200px;
}

/* 제품소개서 버튼 - 밝은 녹색 */
.btn-brochure-product {
   background-color: #6EDC6E !important;
   border-color: #6EDC6E !important;
}

.btn-brochure-product:hover {
   background-color: #5EDC5E !important;
   border-color: #5EDC5E !important;
}

.btn-brochure:hover {
   text-decoration: none;
   transform: translateY(-2px);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn-brochure:focus {
   text-decoration: none;
   box-shadow: 0 0 0 0.25rem rgba(92, 184, 92, 0.5);
}

/* ============================================
   CTA 섹션 (Call to Action 영역)
   적용 위치: index.php - "이런넷닷컴의 LMS 저작권" 섹션
   - cta: 저작권 이미지 캐러셀이 있는 영역
   - copyrightCarousel: 저작권 이미지 swiper 캐러셀
   - copyright-img: 저작권 이미지 스타일
   - copyright-caption: 저작권 이미지 하단 설명 텍스트
   ============================================ */
.cta {
   padding: 5rem 0;
   background: #C8EBFA;
   color: white;
}

/* CTA 제목 */
.cta h2 {
   font-size: 2.5rem;
   font-weight: 700;
   color: #5FB3D3;
}

/* CTA 설명 텍스트 */
.cta p {
   font-size: 1.25rem;
   opacity: 0.95;
   color: #5FB3D3;
}

/* 저작권 이미지 스타일 */
.copyrightCarousel {
   padding: 20px 0;
}

.copyrightCarousel .swiper-slide {
   height: auto;
}

.copyright-img {
   max-width: 100%;
   max-height: 300px;
   object-fit: contain;
   transition: transform 0.3s ease;
   filter: brightness(1.1);
}

.copyright-img:hover {
   transform: scale(1.1);
   filter: brightness(1.2);
}

.copyright-caption {
   font-size: 0.75rem;
   color: #5FB3D3;
   font-weight: 500;
}

/* 저작권 캐러셀 Swiper 버튼 위치 조정 */
.copyrightCarousel .swiper-button-prev,
.copyrightCarousel .swiper-button-next {
   top: 50%;
   transform: translateY(-50%);
}

/* ============================================
   반응형 디자인 (Responsive)
   적용 위치: 전체 페이지
   - 태블릿 (768px 이하): 메인 슬라이드, 저작권 캐러셀, 네비게이션 메뉴 스타일 조정
   - 모바일 (576px 이하): 메인 슬라이드, 네비게이션 메뉴 리스트 형태로 변경
   ============================================ */

/* 태블릿 이하 (768px 이하) */
@media (max-width: 768px) {
   .section-title {
      font-size: 2rem;
   }

   .cta h2 {
      font-size: 2rem;
   }

   /* 메인 슬라이드 태블릿 스타일 */
   .main-slide-section .carousel {
      height: 400px;
   }

   .main-slide-section .carousel-item {
      height: 400px;
   }

   .main-slide-section .carousel-control-prev {
      left: 15px;
   }

   .main-slide-section .carousel-control-next {
      right: 15px;
   }

   /* 태블릿에서 화살표 크기 조정 */
   .main-slide-section .carousel-control-prev-icon,
   .main-slide-section .carousel-control-next-icon {
      width: 2rem;
      height: 2rem;
      background-size: 2rem 2rem;
   }
   
   /* 태블릿에서 스크롤 화살표 크기 조정 */
   .scroll-down-link {
      font-size: 2.5rem;
   }
   
   /* 태블릿에서 캡션 패딩 및 너비 조정 */
   .main-slide-section .carousel-caption {
      padding: 1.5rem 0.75rem;
      width: 80%;
      max-width: 80%;
      left: 50%;
      transform: translate(-50%, -50%);
   }

   /* 모바일에서 저작권 이미지 크기 조정 */
   .copyright-img {
      max-height: 200px;
   }

   .copyright-caption {
      font-size: 0.625rem;
   }

   /* 태블릿 해상도에서 저작권 캐러셀 버튼 위치 조정 */
   .copyrightCarousel .swiper-button-prev,
   .copyrightCarousel .swiper-button-next {
      top: calc(50% - 100px);
      transform: translateY(-50%);
   }
}

/* lg(992px) 이상에서는 상단 메뉴가 가로로 표시되도록 유지 */
@media (min-width: 992px) {
   .navbar-collapse {
      display: flex !important;
   }
   
   .navbar-nav {
      flex-direction: row;
   }
   
   /* lg 해상도에서 메인 슬라이드 캡션 영역 너비 조정 */
   .main-slide-section .carousel-caption {
      width: 80%;
      max-width: 80%;
      left: 50%;
      transform: translate(-50%, -50%);
   }
   
   /* lg 해상도에서 좌우 화살표 위치 및 크기 조정 */
   .main-slide-section .carousel-control-prev {
      left: 80px;
   }
   
   .main-slide-section .carousel-control-next {
      right: 80px;
   }
   
   .main-slide-section .carousel-control-prev-icon,
   .main-slide-section .carousel-control-next-icon {
      width: 5rem;
      height: 5rem;
      background-size: 5rem 5rem;
   }
   
   /* lg 해상도에서 아래로 스크롤 화살표 위치 및 크기 조정 */
   .scroll-down-arrow {
      bottom: 70px;
   }
   
   .scroll-down-link {
      font-size: 5rem;
   }
}

/* md 사이즈(768px~991px)에서 로고가 확실히 보이도록 보장 */
@media (min-width: 768px) and (max-width: 991.98px) {
   #navbar-logo {
      display: block !important;
      opacity: 1 !important;
      visibility: visible !important;
   }
   
   .navbar-brand {
      display: flex !important;
      opacity: 1 !important;
      visibility: visible !important;
   }
   
   /* md 해상도에서 메인 슬라이드 캡션 영역 너비 조정 */
   .main-slide-section .carousel-caption {
      width: 80%;
      max-width: 80%;
      left: 50%;
      transform: translate(-50%, -50%);
   }
   
   /* md 해상도에서 좌우 화살표 위치 및 크기 조정 */
   .main-slide-section .carousel-control-prev {
      left: 50px;
   }
   
   .main-slide-section .carousel-control-next {
      right: 50px;
   }
   
   .main-slide-section .carousel-control-prev-icon,
   .main-slide-section .carousel-control-next-icon {
      width: 4rem;
      height: 4rem;
      background-size: 4rem 4rem;
   }
   
   /* md 해상도에서 아래로 스크롤 화살표 크기 및 위치 조정 */
   .scroll-down-arrow {
      bottom: 40px;
   }
   
   .scroll-down-link {
      font-size: 4rem;
   }
}

/* 모바일 (767.98px 이하)에서만 리스트 형태로 변경 */
@media (max-width: 767.98px) {
   /* 태블릿 해상도에서도 모바일과 동일한 메뉴 스타일 적용 */
   .navbar-nav {
      text-align: left !important;
      list-style: disc;
      padding-left: 1.5rem;
      width: 100%;
   }

   .navbar-nav .nav-item {
      list-style: disc;
      display: list-item;
      text-align: left !important;
      width: 100%;
   }

   .navbar-nav .nav-link {
      text-align: left !important;
      padding-left: 0.5rem !important;
      padding-right: 2rem !important;
      position: relative;
      width: 100%;
      display: flex !important;
      justify-content: space-between;
      align-items: center;
   }

   /* 카테고리 명 앞에 블릿 삭제 */
   .navbar-nav .nav-link::before {
      content: '';
      display: none;
   }

   /* 메뉴 오른쪽 끝에 > 표시 추가 */
   .navbar-nav .nav-link::after {
      content: '>' !important;
      position: absolute;
      right: 0.5rem;
      color: #6c757d;
      font-weight: bold;
      font-size: 1rem;
      transition: transform 0.3s ease;
      opacity: 1 !important;
      width: auto !important;
      height: auto !important;
      background: none !important;
      bottom: auto !important;
      left: auto !important;
      transform: none !important;
      pointer-events: none;
      border: none !important;
      box-shadow: none !important;
   }

   /* 드롭다운이 열렸을 때 아래 화살표로 변경 */
   .navbar-nav .nav-link[aria-expanded="true"]::after {
      content: '▼' !important;
      transform: none;
   }

   /* 태블릿 해상도에서 호버 전후 회색 라인 제거 */
   .navbar-nav .nav-link:hover::after {
      background: none !important;
      width: auto !important;
      height: auto !important;
      opacity: 1 !important;
   }

   /* 서브메뉴 리스트 형태 및 좌측 정렬 */
   .navbar-nav .dropdown-menu {
      text-align: left !important;
      list-style: disc;
      padding-left: 2rem;
      border: none;
      box-shadow: none;
      background-color: transparent;
      width: 100%;
   }

   .navbar-nav .dropdown-item {
      text-align: left !important;
      padding-left: 0.5rem;
      list-style: disc;
      display: list-item;
      width: 100%;
   }
}

/* SM 해상도 (576px~767px) */
@media (min-width: 576px) and (max-width: 767.98px) {
   /* SM 해상도에서 아래로 스크롤 화살표 위치 조정 */
   .scroll-down-arrow {
      bottom: 40px;
   }
   
   /* SM 해상도에서 메인 슬라이드 캡션 텍스트 크기 조정 */
   .main-slide-section .carousel-caption h5 {
      font-size: 2.5rem;
      margin-bottom: 1rem;
   }
   
   .main-slide-section .carousel-caption p {
      font-size: 1.2rem;
      margin-bottom: 1rem;
   }
   
   .main-slide-section .carousel-caption .btn-slide-detail {
      font-size: 1rem;
      padding: 10px 24px;
   }
}

/* 모바일 (576px 이하) */
@media (max-width: 576px) {

   /* 메인 슬라이드 모바일 스타일 */
   .main-slide-section .carousel {
      height: 500px;
   }

   .main-slide-section .carousel-item {
      height: 500px;
   }

   .main-slide-section .carousel-control-prev {
      left: 10px;
   }

   .main-slide-section .carousel-control-next {
      right: 10px;
   }

   /* 모바일에서 화살표 크기 조정 */
   .main-slide-section .carousel-control-prev-icon,
   .main-slide-section .carousel-control-next-icon {
      width: 1.5rem;
      height: 1.5rem;
      background-size: 1.5rem 1.5rem;
   }
   
   /* 모바일에서 스크롤 화살표 크기 및 위치 조정 */
   .scroll-down-arrow {
      bottom: 60px;
   }
   
   .scroll-down-link {
      font-size: 2rem;
   }
   
   /* 모바일에서 메인 슬라이드 캡션 텍스트 크기 조정 */
   .main-slide-section .carousel-caption h5 {
      font-size: 1.8rem;
      margin-bottom: 0.75rem;
      line-height: 1.3;
   }
   
   .main-slide-section .carousel-caption p {
      font-size: 1.05rem;
      line-height: 1.4;
      margin-bottom: 0.75rem;
   }
   
   .main-slide-section .carousel-caption .btn-slide-detail {
      min-width: auto;
      padding: 10px 24px;
      font-size: 1.05rem;
      margin-top: 0.5rem;
   }
   
   /* 모바일에서 캡션 패딩 및 너비 조정 */
   .main-slide-section .carousel-caption {
      padding: 1.25rem 0.75rem;
      width: 80%;
      max-width: 80%;
      left: 50%;
      transform: translate(-50%, -50%);
   }

   /* 모바일에서 인디케이터 크기 조정 */
   .main-slide-section .carousel-indicators {
      margin-bottom: 1rem;
   }

   .main-slide-section .carousel-indicators button {
      width: 8px;
      height: 8px;
      margin: 0 3px;
   }

   /* 모바일에서 CTA 제목 크기 조정 */
   .cta h2 {
      font-size: 2rem;
   }

   /* 모바일 해상도에서 저작권 캐러셀 버튼 위치 조정 */
   .copyrightCarousel .swiper-button-prev,
   .copyrightCarousel .swiper-button-next {
      top: 50%;
      transform: translateY(-50%);
   }

   /* 모바일 해상도에서 왼쪽 상단 정보 숨김 및 우측 정렬 */
   .top-bar .col-md-6:first-child {
      display: none;
   }

   .top-bar .col-md-6:last-child {
      text-align: right !important;
   }

   /* 모바일 해상도에서 카테고리 메뉴 리스트 형태 및 좌측 정렬 */
   .navbar-nav {
      text-align: left !important;
      list-style: disc;
      padding-left: 1.5rem;
      width: 100%;
   }

   .navbar-nav .nav-item {
      list-style: disc;
      display: list-item;
      text-align: left !important;
      width: 100%;
   }

   .navbar-nav .nav-link {
      text-align: left !important;
      padding-left: 0.5rem !important;
      padding-right: 2rem !important;
      padding-bottom: 0.75rem !important;
      margin-bottom: 0.5rem;
      position: relative;
      width: 100%;
      display: flex !important;
      justify-content: space-between;
      align-items: center;
   }

   /* 각 메뉴 하단에 90% 너비 라인 추가 */
   .navbar-nav .nav-link::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 5%;
      width: 90%;
      height: 1px;
      background-color: #e5e7eb;
      display: block;
   }

   /* 메뉴 오른쪽 끝에 > 표시 추가 */
   .navbar-nav .nav-link::after {
      content: '>' !important;
      position: absolute;
      right: 0.5rem;
      color: #6c757d;
      font-weight: bold;
      font-size: 1rem;
      transition: transform 0.3s ease;
      opacity: 1 !important;
      width: auto !important;
      height: auto !important;
      background: none !important;
      bottom: auto !important;
      left: auto !important;
      transform: none !important;
      pointer-events: none;
      border: none !important;
      box-shadow: none !important;
   }

   /* 드롭다운이 열렸을 때 아래 화살표로 변경 */
   .navbar-nav .nav-link[aria-expanded="true"]::after {
      content: '▼' !important;
      transform: none;
   }

   /* 모바일 해상도에서 호버 전후 회색 라인 제거 */
   .navbar-nav .nav-link:hover::after {
      background: none !important;
      width: auto !important;
      height: auto !important;
      opacity: 1 !important;
   }

   /* 모바일 해상도에서 > 표시 우측 패딩 10px */
   .navbar-nav .nav-link::after {
      right: 10px !important;
   }

   /* 서브메뉴 리스트 형태 및 좌측 정렬 */
   .navbar-nav .dropdown-menu {
      text-align: left !important;
      list-style: none;
      padding-left: 1rem;
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
      border: none;
      box-shadow: none;
      background-color: #f5f5f5;
      width: 100%;
      margin-top: 0.5rem;
      margin-bottom: 0.5rem;
   }

   .navbar-nav .dropdown-item {
      text-align: left !important;
      padding-left: 1.5rem;
      padding-right: 2rem !important;
      padding-top: 0.75rem !important;
      padding-bottom: 0.75rem !important;
      margin-bottom: 0;
      list-style: none;
      display: flex !important;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      position: relative;
   }

   /* 서브메뉴 앞에 블릿 추가 */
   .navbar-nav .dropdown-item::before {
      content: '•';
      position: absolute;
      left: 0.5rem;
      color: #6c757d;
      font-weight: bold;
      z-index: 2;
   }

   /* 서브메뉴 하단에 90% 너비 라인 추가 */
   .navbar-nav .dropdown-item:not(:last-child) {
      position: relative;
      padding-bottom: 0.75rem !important;
   }

   .navbar-nav .dropdown-item:not(:last-child)::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 5%;
      width: 90%;
      height: 1px;
      background-color: #9ca3af;
      display: block;
      z-index: 0;
   }

   /* 서브메뉴 오른쪽에 > 표시 추가 */
   .navbar-nav .dropdown-item {
      padding-right: 2.5rem !important;
      position: relative;
   }

   /* 마지막 항목이 아닌 경우에만 라인 표시 (우선순위 높임) */
   .navbar-nav .dropdown-item:not(:last-child)::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 5%;
      width: 90%;
      height: 1px;
      background-color: #9ca3af;
      display: block;
      z-index: 0;
   }

   /* 마지막 항목에는 > 표시만 표시 */
   .navbar-nav .dropdown-item:last-child::after {
      content: '>';
      position: absolute;
      right: 15px;
      color: #6c757d;
      font-weight: bold;
      font-size: 1rem;
      pointer-events: none;
      z-index: 2;
      bottom: 50%;
      transform: translateY(50%);
   }

   /* 모바일 해상도에서 서브메뉴 2개씩마다 생기던 구분선 제거 */
   .navbar-nav .dropdown-divider {
      display: none !important;
   }
}

/* ============================================
   Footer 스타일
   적용 위치: 6_eln_footer.php
   - footer: 하단 푸터 전체 영역 (배경 이미지 + 어두운 오버레이)
   - footer-section: 푸터 내 각 카테고리 섹션 (About, LMS 메뉴, 고객센터 등)
   - footer-event-title: "할인이벤트" 제목 (진한 노란색)
   - footer-bottom: 푸터 하단 저작권 영역
   ============================================ */
footer {
   background: #EFEFEF url('https://www.elearnnet.kr/images/bg/img_bg_04.jpg') no-repeat center center;
   background-size: cover;
   color: #FFFFFF;
   padding: 91px 0;
   font-size: 13px;
   position: relative;
}

/* 풋터 배경 검정색 스크린 85% */
footer::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.85);
   z-index: 0;
}

/* 풋터 내용이 스크린 위에 표시되도록 */
footer>* {
   position: relative;
   z-index: 1;
}

/* 푸터 섹션 제목 */
.footer-section h3 {
   font-size: 14px;
   color: #FFFFFF;
   margin-bottom: 15px;
   font-weight: 700;
}

/* 할인이벤트 제목 진한 노란색 */
.footer-section .footer-event-title {
   color: #FFD700;
}

/* 푸터 리스트 스타일 */
.footer-section ul {
   list-style: none;
   padding: 0;
   font-size: 13px;
   color: #FFFFFF;
   margin-bottom: 0;
}

/* 푸터 리스트 항목 간격 */
.footer-section ul li {
   margin-bottom: 0;
   color: #555555;
}

/* 푸터 링크 스타일 */
.footer-section a {
   color: rgba(255, 255, 255, 0.5);
   text-decoration: none;
   transition: color 0.3s ease;
   font-size: 13px;
}

/* 푸터 링크 호버 효과 */
.footer-section a:hover {
   color: rgba(255, 255, 255, 0.8);
}

/* 푸터 텍스트 스타일 */
.footer-section p {
   color: #555555;
   font-size: 13px;
   line-height: 1.6;
}

/* 푸터 하단 영역 */
.footer-bottom {
   padding-top: 0;
   border-top: none;
   color: #555555;
   font-size: 13px;
   text-align: center;
}

/* ============================================
   포트폴리오 영역 스타일
   적용 위치: index.php - "포트폴리오" 섹션
   - portfolio-section: 포트폴리오 전체 섹션 (배경색 #F3F3F3)
   - portfolio-section .section-title: "포트폴리오" 제목
   - portfolio-section .feature-card: 포트폴리오 카드 (준비되어 있는 LMS 카드와 동일한 스타일)
   - portfolio-section .feature-card .card-title: 포트폴리오 카드 제목 (중앙정렬, 색상 #595959)
   - portfolio-section .feature-card .card-subtitle: 포트폴리오 카드 설명 (색상 #595959)
   ============================================ */
.portfolio-section {
   background-color: #F3F3F3;
   padding: 80px 0;
}

/* 포트폴리오 섹션 제목 스타일 */
.portfolio-section .section-title {
   font-size: 2.5rem;
   font-weight: 700;
   color: #595959;
   margin-bottom: 1rem;
   letter-spacing: -0.03em;
}

.portfolio-section .section-subtitle {
   font-size: 1.1rem;
   color: #6B7280;
   margin-bottom: 3rem;
   font-weight: 400;
}

/* 포트폴리오 카드 제목 스타일 */
.portfolio-section .feature-card .card-title {
   font-size: 1.25rem;
   text-align: center !important;
   color: #595959;
}

/* 포트폴리오 카드 부제목 스타일 */
.portfolio-section .feature-card .card-subtitle {
   color: #595959;
}

/* 포트폴리오 카드 body 중앙정렬 */
.portfolio-section .feature-card .card-body {
   text-align: center;
}

/* 포트폴리오 연도별 버튼 스타일 */
/* 적용 위치: index.php - 포트폴리오 섹션 하단의 3개 연도별 버튼 */
.portfolio-year-btn {
   padding: 20px 20px;
   font-size: 1rem;
   font-weight: 500;
   border-radius: 8px;
   transition: all 0.3s ease;
   text-decoration: none;
   display: block;
   text-align: center;
}

.portfolio-year-btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
   text-decoration: none;
}

/* PC 해상도에서 포트폴리오 버튼 영역 하단 여백 */
@media (min-width: 1200px) {
   .portfolio-section .portfolio-buttons-row {
      margin-bottom: 50px;
   }
}

/* 태블릿 해상도 */
@media (max-width: 1199.98px) {
   .portfolio-section {
      padding-top: 60px;
      padding-bottom: 50px;
   }

   /* 태블릿 해상도에서 포트폴리오 카드 9개만 표시 (10번째부터 숨김) */
   .portfolio-section .row.g-4>div:nth-child(n+10) {
      display: none;
   }
}

/* 모바일 해상도 */
@media (max-width: 767.98px) {
   .portfolio-section {
      padding-top: 40px;
      padding-bottom: 50px;
   }

   .portfolio-section .section-title {
      font-size: 2rem;
   }

   .portfolio-section .section-subtitle {
      font-size: 1rem;
      margin-bottom: 2rem;
   }

   /* 모바일 해상도에서 포트폴리오 카드 6개만 표시 (7번째부터 숨김) */
   .portfolio-section .row.g-4>div:nth-child(n+7) {
      display: none;
   }
}

/* ============================================
   PC 해상도에서 상단 영역을 투명하게 하고 슬라이드 위에 오버레이
   적용 위치: 2_eln_nav.php의 header, .top-bar, .navbar
   ============================================ */
@media (min-width: 1200px) {

   /* 헤더를 절대 위치로 설정하여 슬라이드 위에 배치 */
   header {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      width: 100%;
      transition: all 0.3s ease;
   }

   /* 스크롤 시 헤더를 fixed로 변경하고 배경색 white 적용 */
   header.scrolled {
      position: fixed !important;
      background-color: #ffffff !important;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   }

   /* 스크롤 시 상단 정보 바 배경 white */
   header.scrolled .top-bar {
      background-color: #ffffff !important;
      border-bottom: 1px solid #e9ecef;
      position: relative;
   }

   /* 스크롤 시 top-bar 아래에 hr 추가 */
   header.scrolled .top-bar::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      right: 0;
      height: 1px;
      background-color: #e9ecef;
      border: none;
   }

   /* 스크롤 시 네비게이션 바 배경 white */
   header.scrolled .navbar {
      background-color: #ffffff !important;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   }

   /* 스크롤 시 네비게이션 링크 색상을 검정색으로 변경 */
   header.scrolled .navbar-nav .nav-link {
      color: #333333 !important;
   }

   header.scrolled .navbar-nav .nav-link:hover {
      color: #000000 !important;
   }

   /* 스크롤 시 로고 브랜드 색상을 검정색으로 변경 */
   header.scrolled .navbar-brand {
      color: #333333 !important;
   }

   /* 스크롤 시 상단 정보 바 텍스트 색상을 검정색으로 변경 */
   header.scrolled .top-bar .text-muted {
      color: #6c757d !important;
   }

   /* 스크롤 시 네비게이션 토글 버튼 아이콘 색상을 검정색으로 */
   header.scrolled .navbar-toggler-icon {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
   }

   /* 상단 정보 바 배경 투명 - 모든 가능한 배경 속성 오버라이드 */
   header .top-bar,
   header .top-bar.bg-light,
   .top-bar,
   .top-bar.bg-light,
   div.top-bar {
      background-color: transparent !important;
      background: transparent !important;
      background-image: none !important;
      background-clip: border-box !important;
      border-bottom: none !important;
   }

   /* 네비게이션 바 배경 투명 - 모든 가능한 배경 속성 오버라이드 */
   header .navbar,
   header .navbar.navbar-expand-xl,
   header .navbar.navbar-light,
   .navbar,
   .navbar.navbar-expand-xl,
   .navbar.navbar-light,
   nav.navbar {
      background-color: transparent !important;
      background: transparent !important;
      background-image: none !important;
      background-clip: border-box !important;
      box-shadow: none !important;
   }

   /* 네비게이션 컨테이너도 투명하게 */
   .navbar .container,
   header .navbar .container {
      background-color: transparent !important;
      background: transparent !important;
      background-image: none !important;
   }

   /* 네비게이션 콜랩스 영역도 투명하게 */
   .navbar-collapse,
   header .navbar-collapse {
      background-color: transparent !important;
      background: transparent !important;
      background-image: none !important;
   }

   /* 상단 정보 바와 네비게이션 바의 직접 자식 요소만 투명하게 */
   header .top-bar *,
   header .navbar * {
      background-color: transparent !important;
   }

   /* 예외: 드롭다운 메뉴는 배경 유지 */
   header .dropdown-menu {
      background-color: #ffffff !important;
   }

   /* 예외: 컨테이너 내부 요소는 투명하게 */
   header .container {
      background-color: transparent !important;
   }

   /* 네비게이션 링크 색상을 흰색으로 변경 (슬라이드 위에서 보이도록) */
   .navbar-nav .nav-link {
      color: #ffffff !important;
   }

   .navbar-nav .nav-link:hover {
      color: #ffffff !important;
   }

   /* 로고 브랜드 색상도 흰색으로 변경 */
   .navbar-brand {
      color: #ffffff !important;
   }

   /* 상단 정보 바 텍스트 색상을 흰색으로 변경 */
   .top-bar .text-muted {
      color: rgba(255, 255, 255, 0.9) !important;
   }

   /* 네비게이션 토글 버튼 아이콘 색상도 흰색으로 */
   .navbar-toggler-icon {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
   }
}

/* ============================================
   애니메이션
   ============================================ */
@keyframes fadeInUp {
   from {
      opacity: 0;
      transform: translateY(30px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

/* ============================================
   반응형 디자인 (Responsive)
   ============================================ */

/* 태블릿 이하 (768px 이하) */
@media (max-width: 768px) {
   .hero h1 {
      font-size: 2.5rem;
   }

   .hero p {
      font-size: 1.125rem;
   }

   .section-title {
      font-size: 2rem;
   }

   /* 태블릿 해상도에서도 모바일과 동일한 메뉴 스타일 적용 */
   .navbar-nav {
      text-align: left !important;
      list-style: disc;
      padding-left: 1.5rem;
      width: 100%;
   }

   .navbar-nav .nav-item {
      list-style: disc;
      display: list-item;
      text-align: left !important;
      width: 100%;
   }

   .navbar-nav .nav-link {
      text-align: left !important;
      padding-left: 0.5rem !important;
      padding-right: 2rem !important;
      position: relative;
      width: 100%;
      display: flex !important;
      justify-content: space-between;
      align-items: center;
   }

   /* 카테고리 명 앞에 블릿 삭제 */
   .navbar-nav .nav-link::before {
      content: '';
      display: none;
   }

   /* 메뉴 오른쪽 끝에 > 표시 추가 */
   .navbar-nav .nav-link::after {
      content: '>' !important;
      position: absolute;
      right: 0.5rem;
      color: #6c757d;
      font-weight: bold;
      font-size: 1rem;
      transition: transform 0.3s ease;
      opacity: 1 !important;
      width: auto !important;
      height: auto !important;
      background: none !important;
      bottom: auto !important;
      left: auto !important;
      transform: none !important;
      pointer-events: none;
      border: none !important;
      box-shadow: none !important;
   }

   /* 드롭다운이 열렸을 때 아래 화살표로 변경 */
   .navbar-nav .nav-link[aria-expanded="true"]::after {
      content: '▼' !important;
      transform: none;
   }

   /* 태블릿 해상도에서 호버 전후 회색 라인 제거 */
   .navbar-nav .nav-link:hover::after {
      background: none !important;
      width: auto !important;
      height: auto !important;
      opacity: 1 !important;
   }

   /* 서브메뉴 리스트 형태 및 좌측 정렬 */
   .navbar-nav .dropdown-menu {
      text-align: left !important;
      list-style: disc;
      padding-left: 2rem;
      border: none;
      box-shadow: none;
      background-color: transparent;
      width: 100%;
   }

   .navbar-nav .dropdown-item {
      text-align: left !important;
      padding-left: 0.5rem;
      list-style: disc;
      display: list-item;
      width: 100%;
   }
}

/* 모바일 (576px 이하) */
@media (max-width: 576px) {
   .hero {
      padding: 4rem 0;
   }

   .hero h1 {
      font-size: 2rem;
   }

   /* 모바일 해상도에서 카테고리 메뉴 리스트 형태 및 좌측 정렬 */
   .navbar-nav {
      text-align: left !important;
      list-style: disc;
      padding-left: 1.5rem;
      width: 100%;
   }

   .navbar-nav .nav-item {
      list-style: disc;
      display: list-item;
      text-align: left !important;
      width: 100%;
   }

   .navbar-nav .nav-link {
      text-align: left !important;
      padding-left: 0.5rem !important;
      padding-right: 2rem !important;
      padding-bottom: 0.75rem !important;
      margin-bottom: 0.5rem;
      position: relative;
      width: 100%;
      display: flex !important;
      justify-content: space-between;
      align-items: center;
   }

   /* 각 메뉴 하단에 90% 너비 라인 추가 */
   .navbar-nav .nav-link::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 5%;
      width: 90%;
      height: 1px;
      background-color: #e5e7eb;
      display: block;
   }

   /* 메뉴 오른쪽 끝에 > 표시 추가 */
   .navbar-nav .nav-link::after {
      content: '>' !important;
      position: absolute;
      right: 0.5rem;
      color: #6c757d;
      font-weight: bold;
      font-size: 1rem;
      transition: transform 0.3s ease;
      opacity: 1 !important;
      width: auto !important;
      height: auto !important;
      background: none !important;
      bottom: auto !important;
      left: auto !important;
      transform: none !important;
      pointer-events: none;
      border: none !important;
      box-shadow: none !important;
   }

   /* 드롭다운이 열렸을 때 아래 화살표로 변경 */
   .navbar-nav .nav-link[aria-expanded="true"]::after {
      content: '▼' !important;
      transform: none;
   }

   /* 모바일 해상도에서 호버 전후 회색 라인 제거 */
   .navbar-nav .nav-link:hover::after {
      background: none !important;
      width: auto !important;
      height: auto !important;
      opacity: 1 !important;
   }

   /* 모바일 해상도에서 > 표시 우측 패딩 10px */
   .navbar-nav .nav-link::after {
      right: 10px !important;
   }

   /* 서브메뉴 리스트 형태 및 좌측 정렬 */
   .navbar-nav .dropdown-menu {
      text-align: left !important;
      list-style: none;
      padding-left: 1rem;
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
      border: none;
      box-shadow: none;
      background-color: #f5f5f5;
      width: 100%;
      margin-top: 0.5rem;
      margin-bottom: 0.5rem;
   }

   .navbar-nav .dropdown-item {
      text-align: left !important;
      padding-left: 1.5rem;
      padding-right: 2rem !important;
      padding-top: 0.75rem !important;
      padding-bottom: 0.75rem !important;
      margin-bottom: 0;
      list-style: none;
      display: flex !important;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      position: relative;
   }

   /* 서브메뉴 앞에 블릿 추가 */
   .navbar-nav .dropdown-item::before {
      content: '•';
      position: absolute;
      left: 0.5rem;
      color: #6c757d;
      font-weight: bold;
      z-index: 2;
   }

   /* 서브메뉴 하단에 90% 너비 라인 추가 */
   .navbar-nav .dropdown-item:not(:last-child) {
      position: relative;
      padding-bottom: 0.75rem !important;
   }

   .navbar-nav .dropdown-item:not(:last-child)::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 5%;
      width: 90%;
      height: 1px;
      background-color: #9ca3af;
      display: block;
      z-index: 0;
   }

   /* 서브메뉴 오른쪽에 > 표시 추가 */
   .navbar-nav .dropdown-item {
      padding-right: 2.5rem !important;
      position: relative;
   }

   /* 마지막 항목이 아닌 경우에만 라인 표시 (우선순위 높임) */
   .navbar-nav .dropdown-item:not(:last-child)::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 5%;
      width: 90%;
      height: 1px;
      background-color: #9ca3af;
      display: block;
      z-index: 0;
   }

   /* 마지막 항목에는 > 표시만 표시 */
   .navbar-nav .dropdown-item:last-child::after {
      content: '>';
      position: absolute;
      right: 15px;
      color: #6c757d;
      font-weight: bold;
      font-size: 1rem;
      pointer-events: none;
      z-index: 2;
      bottom: 50%;
      transform: translateY(50%);
   }

   /* 모바일 해상도에서 서브메뉴 2개씩마다 생기던 구분선 제거 */
   .navbar-nav .dropdown-divider {
      display: none !important;
   }
}

/* ============================================
   서브페이지 전용 스타일은 assets/css/sub.css 파일로 분리되었습니다.
   eln-2505.php 같은 서브페이지는 sub.css를 로드해야 합니다.
   ============================================ */