/* 커스텀 스타일 및 디자인 개선 */
        :root {
		
			--primary-color: #007bff;
            --secondary-color: #6c757d;
            --success-color: #28a745;
            --danger-color: #dc3545;
            --light-color: #f8f9fa;
            --dark-color: #343a40;
			
            --primary-blue: #3498db;  /* 신뢰감을 주는 파란색 */
            --primary-green: #2ecc71; /* 활력을 주는 녹색 */
            --dark-color: #2c3e50;    /* 진한 회색 */
            --light-bg: #f7f9fb;      /* 연한 배경색 */
			
			 /* 🔵 블루 계열 (8개) */
			--blue-50: #e3f2fd;
			--blue-100: #bbdefb;
			--blue-200: #90caf9;
			--blue-300: #64b5f6;
			--blue-400: #42a5f5;
			--blue-500: #2196f3;
			--blue-600: #1e88e5;
			--blue-700: #1976d2;
			--blue-800: #1565c0;

			/* 🟢 그린 계열 (6개) */
			--green-50: #e8f5e8;
			--green-100: #c8e6c9;
			--green-200: #a5d6a7;
			--green-300: #81c784;
			--green-400: #66bb6a;
			--green-500: #4caf50;
			--green-600: #43a047;

			/* 🟡 옐로우/오렌지 계열 (5개) */
			--yellow-100: #fff9c4;
			--yellow-500: #ffeb3b;
			--yellow-700: #fbc02d;
			--orange-500: #ff9800;
			--orange-700: #f57c00;

			/* 🔴 레드/핑크 계열 (5개) */
			--red-100: #ffcdd2;
			--red-300: #e57373;
			--red-500: #f44336;
			--red-700: #d32f2f;
			--pink-500: #e91e63;
			--pink-700: #c2185b;

			/* 🟣 퍼플 계열 (4개) */
			--purple-100: #e1bee7;
			--purple-300: #ba68c8;
			--purple-500: #9c27b0;
			--purple-700: #7b1fa2;
			--deep-purple-500: #673ab7;

			/* ⚫ 그레이 계열 (4개) */
			--gray-100: #f5f5f5;
			--gray-300: #e0e0e0;
			--gray-500: #9e9e9e;
			--gray-700: #616161;
			--gray-900: #212121;

			/* 🎨 특수 색상 (4개) */
			--teal-500: #009688;      /* 청록색 */
			--cyan-500: #00bcd4;      /* 시안 */
			--amber-500: #ffc107;     /* 호박색 */
			--indigo-500: #3f51b5;    /* 남색 */
        }
		
        body {
            font-family: 'Poppins', 'Noto Sans KR', sans-serif;
            color: var(--dark-color);
            line-height: 1.6;
            background-color: white; /* 기본 배경 흰색 */
        }
		
		/* 고정 헤더 때문에 앵커 스크롤이 가려지는 문제 해결 + 섹션이 약간 위로 올라오게 */
		html {
			scroll-padding-top: 90px;   /* ← 이 한 줄만 추가해도 거의 완벽 해결! */
		}
			
        /* 스크롤바 스타일링 */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        ::-webkit-scrollbar-thumb {
            background: var(--primary-blue);
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: var(--primary-green);
        }
        
        /* Flag icons in Navbar */
        .navbar .dropdown-menu img {
            margin-right: 8px;
            border-radius: 2px;
        } 
		
		.navbar {
			/*background-color: var(--dark-color); */
			background-color: #343a40;
		}
		
		 
		
		/* 아이콘과 텍스트 사이 간격 */
        .nav-link i.bi {
            margin-right: 8px;
        }

        /* 2. Hero 섹션 */
        .hero-section {
            background-color: var(--light-bg);
            padding-top: 120px;    /* 위쪽 패딩 */
			padding-bottom: 40px; /* 아래쪽 패딩 */
			padding-left: 0;       /* 왼쪽 패딩 */
			padding-right: 0;      /* 오른쪽 패딩 */
        }
        /* PC 버전에선 좌측 정렬, 모바일에서는 중앙 정렬 */
        .hero-content {
            text-align: center; /* 기본 모바일 중앙 정렬 */
        }
        @media (min-width: 992px) { /* PC (Large 이상) */
            .hero-content {
                text-align: left; /* PC에서 좌측 정렬 */
            }
        }
        
        .hero-title {
            font-size: 4rem;
            font-weight: 800;
            line-height: 1.1;
            margin-bottom: 20px;
        }
        .hero-title .highlight-blue { color: var(--primary-blue); }
        .hero-title .highlight-green { color: var(--primary-green); }
        .hero-illustration {
            width: 100%;
            max-width: 600px; /* PC 가로 배치 시 크기 조정 */
            height: auto;
            margin-top: 30px; /* 모바일에서만 상단 여백 */
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            border-radius: 15px;
        }
        @media (min-width: 992px) {
            .hero-illustration {
                margin-top: 0; /* PC에서 여백 제거 */
            }
        }


        /* 3. CTA 버튼 */
        .custom-btn-main {
            background-color: var(--primary-green);
            border-color: var(--primary-green);
            color: white;
            transition: all 0.3s ease;
            font-weight: 600;
            box-shadow: 0 6px 15px rgba(46, 204, 113, 0.4);
        }
        .custom-btn-main:hover {
            background-color: #27ae60;
            border-color: #27ae60;
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(46, 204, 113, 0.5);
        }

        /* 4. 특징 박스 및 모든 섹션 스타일 통일 */
        .features-section { padding: 40px 0; }
        .features-section.bg-light { background-color: var(--light-bg) !important; }
        
        .feature-box {
            background-color: white; /* 내부 박스는 흰색으로 변경 */
            border: 1px solid #ddd;
            padding: 30px;
            border-radius: 10px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            height: 100%;
        }
        .feature-box:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); /* 호버 효과 강화 */
        }
        .feature-box .feature-icon {  
            font-size: 3.5rem; /* 아이콘 크기 */
            color: var(--primary-blue); /* 아이콘 기본 색상 */
            margin-bottom: 20px;  
            display: block; /* 블록 요소로 만들어 중앙 정렬 */
            line-height: 1; /* 아이콘 라인 높이 조절 */
        }
        .feature-box h4 { color: var(--dark-color); font-weight: 700; margin-bottom: 15px; }
		
		
        /* 5. 팝업창 스타일 */
        .modal-title-custom { color: var(--primary-green); font-weight: 700; }
        
        /* 6. Community Board 스타일 */
        .board-table .table thead th {
            border-bottom: 2px solid var(--primary-blue);
            font-weight: 600;
            color: var(--dark-color);
        }
        .board-table .table tbody tr:hover {
            background-color: rgba(46, 204, 113, 0.1); /* 호버 시 연한 녹색 배경 */
        }
        .btn-primary-custom { /* 원래는 .custom-btn-main 사용 */
            background-color: var(--primary-blue);
            border-color: var(--primary-blue);
            color: white;
            transition: all 0.3s ease;
        }
        .btn-primary-custom:hover {
            background-color: #2980b9;
            border-color: #2980b9;
            color: white;
        }

        /* 7. FAQ 아코디언 스타일 */
        .faq-item {
            margin-bottom: 15px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        .faq-question {
            padding: 18px 25px;
            background-color: white;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s;
            display: flex;
            align-items: center;
            color: var(--dark-color);
        }
        .faq-question:hover {
            background-color: #f0f0f0;
        }
        .faq-question i {
            color: var(--primary-green);
            transition: transform 0.3s ease;
        }
        /* ⭐ 펼쳐졌을 때 X 모양으로 보이기 위한 스타일 (45도 회전) ⭐ */
        .faq-question.active i {
            transform: rotate(45deg); 
        }
        .faq-answer {
            padding: 0 25px;
            background-color: #fff;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
        }
        .faq-answer p {
            padding-bottom: 18px;    
            margin-bottom: 0;
            padding-top: 10px;
            color: #555;
        }
        .faq-answer.show {
            max-height: 200px; /* 충분히 큰 값으로 설정 (내용에 따라 조절) */
            padding-top: 10px;
            padding-bottom: 18px;
        }

        /* 8. Footer 스타일 */
        footer {
            background-color: var(--dark-color);
            color: rgba(255, 255, 255, 0.8);
            padding: 50px 0 20px;
            font-size: 0.95rem;
        }
        footer h5 {
            color: white;
            font-weight: 700;
            margin-bottom: 20px;
        }
        footer ul {
            list-style: none;
            padding: 0;
        }
        footer ul li {
            margin-bottom: 10px;
        }
        footer ul li a {
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            transition: color 0.3s;
        }
        footer ul li a:hover {
            color: var(--primary-green);
        }
        footer i {
            font-size: 1.1em;
            color: var(--primary-green);
            margin-right: 5px;
        }
        .fab { /* 소셜 미디어 아이콘 색상 */
            color: white;
            transition: color 0.3s;
        }
        .fab:hover {
            color: var(--primary-green);
        }
		
		 
		 /* 로그인, 회원가입 때문에 추가로 생성된 것 - 시작  */
.nav-tabs .nav-link {
    color: var(--dark-color);
    border: none;
    border-radius: 0;
    margin-bottom: -1px; /* 탭 구분선 제거 */
}
.nav-tabs .nav-link.active {
    color: var(--primary-green) !important;
    background-color: white;
    border-bottom: 3px solid var(--primary-green); /* 활성 탭 강조 */
    font-weight: 700;
}
.btn-primary-custom { /* 회원가입 버튼에 파란색 적용 */
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
    color: white;
    transition: all 0.3s ease;
}
.btn-primary-custom:hover {
    background-color: #2980b9;
    border-color: #2980b9;
    color: white;
}
.btn-outline-primary { /* 소셜 로그인 버튼 색상 조정 */
    color: var(--primary-blue);
    border-color: var(--primary-blue);
}
.btn-warning { /* 카카오 버튼 */
    background-color: #FEE500;
    border-color: #FEE500;
    color: #3C1E1E;
}
/* 로그인, 회원가입 때문에 추가로 생성된 것 - 끝  */		 
		 
		 
		 
@media (min-width: 992px) {
    .navbar .dropdown:hover .dropdown-menu {
        display: block;
        opacity: 1;
        visibility: visible;
    }
    
    .navbar .dropdown-menu {
        display: none;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        margin-top: 0;
    }
    
    .navbar .dropdown-menu.show {
        display: block;
        opacity: 1;
        visibility: visible;
    }
}


/* Community 드롭다운 토글의 밑줄 제거 */
@media (min-width: 992px) {
    .navbar .nav-item.dropdown .nav-link.dropdown-toggle::after {
        display: none !important;
    }
    
    /* 호버 시에도 밑줄 제거 */
    .navbar .nav-item.dropdown .nav-link.dropdown-toggle:hover::after {
        display: none !important;
    }
    
    /* 활성 상태에서도 밑줄 제거 */
    .navbar .nav-item.dropdown .nav-link.dropdown-toggle.active::after {
        display: none !important;
    }
}


/* alertModal의 컨텐츠 박스(흰색 부분)의 최대 높이를 설정합니다. */
#alertModal .modal-content {
	max-height: 500px; /* 원하는 높이로 조절하세요 (예: 500px, 80vh 등) */
	/* height: 500px; 으로 하면 항상 고정된 높이가 됩니다. */
}

/* 내용이 길어질 경우 modal-body 안에 스크롤이 생기도록 합니다. */
#alertModal .modal-body {
	overflow-y: auto;
}
 
/* 데스크탑 퀵 메뉴 스타일 */
#quick-menu {
	right: 20px; /* 오른쪽에서 20px 떨어지게 */
	top: 50%; /* 화면 중앙에 위치 */
	transform: translateY(-50%); /* 정확히 중앙 정렬 */
	background-color: white;
	border: 1px solid #ddd;
	border-radius: 8px; /* 둥근 모서리 */
	box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 그림자 효과 */
	z-index: 1000; /* 다른 요소 위에 표시 */
	width: 100px; /* 메뉴의 고정 너비 */
	text-align: center;
}

/* "맨위로TOP" 위 <li>의 border-top 색상 변경 */
#quick-menu ul li.border-top {
	border-color: black !important; 
}
	
#quick-menu ul li a {
	padding: 10px 5px;
	font-size: 14px;
	color: #333;
	transition: background-color 0.3s ease; /* 호버 효과 부드럽게 */
}

#quick-menu ul li a:hover {
	background-color: #f0f0f0;
	border-radius: 5px;
	color: #007bff; /* 호버 시 색상 변경 */
}

#quick-menu ul li i {
	font-size: 1.2rem; /* 아이콘 크기 */
	margin-bottom: 5px;
}

/* 모바일 하단 고정 메뉴 스타일 */
#mobile-quick-menu {
	/* Bootstrap fixed-bottom, bg-white, border-top, shadow 클래스로 기본 스타일 제공 */
	height: 60px; /* 메뉴 높이 고정 */
	display: flex; /* 내부 요소 정렬을 위해 */
	align-items: center; /* 세로 중앙 정렬 */
	box-shadow: 0 -2px 5px rgba(0,0,0,0.1); /* 위쪽으로 그림자 효과 */
}

#mobile-quick-menu ul {
	width: 100%; /* 하위 ul이 nav 영역 전체를 차지하도록 */
}

#mobile-quick-menu ul li a {
	font-size: 12px; /* 모바일에 맞게 글자 크기 조정 */
	color: #333;
	transition: color 0.3s ease;
}

#mobile-quick-menu ul li a:hover {
	color: #007bff; /* 호버/터치 시 색상 변경 */
}

#mobile-quick-menu ul li i {
	font-size: 1.3rem; /* 아이콘 크기 */
	margin-bottom: 2px;
}


.site-title {
            font-weight: 700;
            margin-bottom: 0.5rem;
        }
        
        .site-subtitle {
            opacity: 0.9;
            font-size: 1.1rem;
        }
        
        .sitemap-section {
            margin-bottom: 2.5rem;
        }
        
        .section-title {
            color: #2c3e50;
            border-bottom: 2px solid #3498db;
            padding-bottom: 0.5rem;
            margin-bottom: 1.5rem;
            position: relative;
        }
        
        .section-title::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 60px;
            height: 2px;
            background-color: #e74c3c;
        }
        
        .sitemap-item {
            background-color: white;
            border-radius: 8px;
            padding: 1.25rem;
            margin-bottom: 1rem;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            border-left: 4px solid #3498db;
        }
        
        .sitemap-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            border-left-color: #e74c3c;
        }
        
        .sitemap-item a {
            color: #2c3e50;
            text-decoration: none;
            font-weight: 600;
            display: block;
            margin-bottom: 0.5rem;
        }
        
        .sitemap-item a:hover {
            color: #e74c3c;
        }
        
        .sitemap-description {
            color: #666;
            font-size: 0.9rem;
            margin-bottom: 0;
        }
		
		.item-icon {
            color: #3498db;
            margin-right: 0.75rem;
            font-size: 1.1rem;
        }