/* Root CSS 변수 설정 (전체 색상 테마) */
:root {
	--primary-color: #18609C;
	--secondary-color: #1E88E5;
	--tertiary-color: #64B5F6;
	--bg-light: #F5F9FC;
	--text-dark: #1a1a1a;
	--text-light: #666;
	--border-color: #e5e7eb;
}

/* Body 기본 스타일 */
body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	background-color: var(--bg-light);
	color: var(--text-dark);
	line-height: 1.6;
	/* 아래의 패딩은 고정 네비게이션 바로 인한 콘텐츠 가림을 방지하기 위한 것입니다 */
	padding-top: 60px; /* 네비게이션 바 높이에 맞게 조정 */
}


/* ==================================================== */
/* 네비게이션 바 디자인 */
/* ==================================================== */

/* 네비게이션 바 기본 스타일 */
.navbar {
	background-color: #1E88E5; /* 단일 색상으로 변경 */
	padding: 0.5rem 0;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 브랜드명 스타일 */
.navbar-brand {
	color: #fff !important;
	font-weight: 700;
	font-size: 1.2rem;
}

/* 네비게이션 링크 기본 스타일 */
.navbar-nav .nav-link {
	position: relative;
	color: #fff !important;
	padding: 0.5rem 1rem !important;
	font-weight: 500;
	transition: color 0.3s ease;
}

/* 네비게이션 링크 호버 효과 - 밑줄 애니메이션 */
.navbar-nav .nav-link::after {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	bottom: 5px;
	left: 50%;
	background-color: #fff;
	transition: width 0.3s ease, left 0.3s ease;
}

/* 네비게이션 링크 호버 시 밑줄 효과 */
.navbar-nav .nav-link:hover::after {
	width: calc(100% - 2rem);
	left: 1rem;
}

/* 햄버거 버튼 기본 스타일 */
.navbar-toggler {
	border: 1px solid rgba(255,255,255,0.5);
	padding: 0.25rem 0.75rem;
}

/* 햄버거 아이콘 기본 상태 */
.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;
}

/* 햄버거 버튼 클릭 상태 스타일 */
.navbar-toggler:focus,
.navbar-toggler:active {
	outline: none;
	box-shadow: none;
}

/* 햄버거 버튼 클릭 시 아이콘 색상 유지 */
.navbar-toggler[aria-expanded="true"] .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;
}

/* 모바일 메뉴 스타일 */
@media (max-width: 991.98px) {
	.navbar-collapse {
		background-color: #1E88E5;
		padding: 0.5rem 0;
	}
	
	/* 모바일에서 메뉴 항목 간격 조정 */
	.navbar-nav .nav-link {
		padding: 0.7rem 1rem !important;
	}
	
	/* 모바일에서 밑줄 위치 조정 */
	.navbar-nav .nav-link::after {
		bottom: 3px;
	}
}



/* ======================= */
/* index.php - 기존 코드의 스타일 */
/* ======================= */

/* Hero Section 전체 CSS */
.hero-section {
    background-color: var(--primary-color);
    background-image: 
        radial-gradient(circle at 10% 20%, var(--secondary-color) 0%, transparent 20%),
        radial-gradient(circle at 90% 80%, var(--tertiary-color) 0%, transparent 20%),
        linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: 8rem 0 6rem;
    position: relative;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
    margin-bottom: 4rem;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(45deg, rgba(255,255,255,0.1) 25%, transparent 25%) -50px 0,
        linear-gradient(-45deg, rgba(255,255,255,0.1) 25%, transparent 25%) -50px 0;
    background-size: 100px 100px;
    opacity: 0.1;
}

/* 히어로 섹션 스타일 */
.hero-section {
    background-color: #1E88E5;  /* 배경색 */
    color: #fff;               /* 텍스트 색상 */
    padding: 4rem 0;          /* 상하 여백 */
    position: relative;
    overflow: hidden;
}

/* 히어로 섹션 내 텍스트 스타일 */
.hero-section h1 {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.hero-section .lead {
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.hero-section p {
    margin-bottom: 1rem;
}

/* 히어로 이미지 스타일 */
.hero-image {
    max-width: 40%;
    height: auto;
    transition: transform 0.3s ease;
    mix-blend-mode: multiply;
}

.hero-image:hover {
    transform: translateY(-5px);
}

/* 반응형 스타일 */
@media (max-width: 991px) {
    .hero-section {
        padding: 3rem 0;
    }
    
    .hero-section h1 {
        font-size: 2.2rem;
    }
    
    .hero-section .lead {
        font-size: 1.1rem;
    }
    
    .hero-image {
        max-width: 25%;
        margin-top: 1rem;
    }
}

@media (max-width: 576px) {
    .hero-section {
        padding: 2rem 0;
    }
    
    .hero-section h1 {
        font-size: 1.8rem;
    }
    
    .hero-section .lead {
        font-size: 1rem;
    }
    
    .hero-image {
        max-width: 25%;
    }
}


/* Feature Cards 스타일 */
.feature-card {
	border: 1px solid var(--border-color);
	border-radius: 1rem;
	background: white;
	box-shadow: 0 4px 6px -1px rgba(24, 96, 156, 0.1);
	transition: all 0.3s ease;
	height: 100%;
	overflow: hidden;
	padding: 2rem;
}

.feature-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 20px -5px rgba(24, 96, 156, 0.15);
	border-color: var(--primary-color);
}

.feature-icon {
	width: 56px;
	height: 56px;
	background: var(--bg-light);
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--primary-color);
	font-size: 1.75rem;
	margin-bottom: 1.5rem;
	transition: all 0.3s ease;
	margin: 0 auto 1.5rem;
}

.feature-card:hover .feature-icon {
	background: var(--primary-color);
	color: white;
	transform: scale(1.1);
}

.feature-link {
	color: #145792;
}

.feature-link:hover {
	color: #145792;
}


/* ===================================
// 성과 통계 섹션 스타일
// =================================== */
/* 성과 통계 카드 스타일 */
.stat-card {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    padding: 2rem;
    height: 100%;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(24, 96, 156, 0.1);
}

.stat-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-color);
    box-shadow: 0 10px 20px -5px rgba(24, 96, 156, 0.15);
}

.stat-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.stat-icon {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-right: 0.5rem;
}

.stat-title {
    font-size: 1.125rem;
    color: var(--text-dark);
    font-weight: 500;
}

.stat-value {
    display: flex;
    justify-content: center;
    align-items: baseline;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 500; /* 더 얇게 조정 */
    color: var(--text-dark);
    margin-right: 0.25rem;
}

.stat-unit {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--text-dark);
}



/* Quick Access Buttons 스타일 */
.quick-btn {
	background: white;
	border: 1px solid var(--border-color);
	border-radius: 1rem;
	padding: 2rem;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: var(--text-dark);
	transition: all 0.3s ease;
	box-shadow: 0 4px 6px -1px rgba(24, 96, 156, 0.1);
}

.quick-btn:hover {
	transform: translateY(-5px);
	border-color: var(--primary-color);
	box-shadow: 0 10px 20px -5px rgba(24, 96, 156, 0.15);
	color: var(--primary-color);
}

.quick-btn i {
	font-size: 2rem;
	color: var(--primary-color);
	margin-bottom: 1rem;
	transition: all 0.3s ease;
}

.quick-btn:hover i {
	transform: scale(1.1);
}

/* FAQ Section 스타일 */
.faq-section {
	background: white;
	border-radius: 1.5rem;
	box-shadow: 0 4px 20px -5px rgba(24, 96, 156, 0.15);
	overflow: hidden;
	margin: 4rem 0;
}

.faq-header {
	background: var(--primary-color);
	padding: 2rem;
	color: white;
	position: relative;
	overflow: hidden;
}

.faq-header::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -20%;
	width: 300px;
	height: 300px;
	background: var(--secondary-color);
	border-radius: 50%;
	opacity: 0.1;
}

.faq-container {
	padding: 2rem;
}

.faq-item {
	background: white;
	border-radius: 1rem;
	margin-bottom: 1rem;
	border: 1px solid var(--border-color);
	transition: all 0.3s ease;
}

.faq-item:hover {
	border-color: var(--primary-color);
	box-shadow: 0 4px 12px -2px rgba(24, 96, 156, 0.1);
}

.faq-question {
	padding: 1.5rem;
	font-weight: 600;
	color: var(--text-dark);
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	user-select: none;
}

.faq-question i {
	transition: transform 0.3s ease;
	color: var(--primary-color);
	font-size: 1.25rem;
}

.faq-answer {
	color: var(--text-light);
	padding: 0 1.5rem;
	max-height: 0;
	overflow: hidden;
	transition: all 0.3s ease;
	line-height: 1.6;
}

.faq-item.active {
	background: var(--bg-light);
	border-color: var(--primary-color);
}

.faq-item.active .faq-question {
	color: var(--primary-color);
}

.faq-item.active .faq-question i {
	transform: rotate(180deg);
}

.faq-item.active .faq-answer {
	padding: 0 1.5rem 1.5rem;
	max-height: 1000px;
}

.faq-category {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	border-radius: 1rem;
	background: rgba(24, 96, 156, 0.1);
	color: var(--primary-color);
	font-size: 0.875rem;
	margin-right: 0.5rem;
}

/* Footer 스타일 */
.index_footer {
	background: var(--text-dark);
	color: white;
	padding: 1rem 0;
	margin-top: 4rem;
}

.index_footer a {
	color: rgba(255, 255, 255, 0.7);
	transition: color 0.3s ease;
}

.index_footer a:hover {
	color: white;
}
	
	
/* ======================= */
/* Sub Page - 기존 코드의 스타일 */
/* create.php, edit.php */
/* ======================= */
.my-container {
  max-width: 700px !important; /* 필요 시 600~800px 사이로 조정 */
  margin: 0 auto;
  padding: 1rem;
}

/* 카드 헤더에서 섹션 제목에 아이콘과 함께 표시 */
.section-title {
  display: flex;
  align-items: center;
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0;
}
.section-title i {
  margin-right: 0.5rem;
}

/* 안내 문구 */
.section-desc {
  font-size: 0.875rem;
  color: #666;
  margin: 0.25rem 0 0;
}

.card {
  margin-bottom: 10px;
}

/* 줄바꿈 유지 */
.preview-text {
  white-space: pre-line;
}

/* 상주/계좌 목록 아이템 */
.entry {
  background-color: #f8f9fa;
  padding: 1rem;
  border-radius: 4px;
  margin-bottom: 1rem;
}

/* 일정 정보 레이블 스타일 */
.schedule-label {
	color: #666;
	font-size: 0.85rem;
	margin-bottom: 0.25rem;
	font-weight:700 !important;
}

.border-custom {
	border-color: #929292 !important;  /* 일정 정보 상하 구분선 */
}

.subpage_footer {
	background-color: #f8f9fa;
	padding: 2rem 0;
	margin-top: 3rem;
	border-top: 1px solid #dee2e6 !important;
}

/* 모바일에서 label, input 등을 세로 배치하는 그리드 조정 예시 (선택사항) */
@media (max-width: 576px) {
  .row-cols-2 > * {
	flex: 0 0 100%;
	max-width: 100%;
  }
}