/*
 * funhobby 통합 스타일시트 (css/style.css)
 * 경로: /hosting/funhobby2026/html/css/style.css
 * 수정사항:
 * 1. [흔들림 방지] 스크롤바 영역 상시 확보(html overflow-y) 및 컨텐츠 최소 높이 설정.
 * 2. [디자인 통합] 마이페이지 전적 및 서비스 신청 UI 스타일 최적화.
 * 3. [종목별 테마] 3구(파랑), 4구(초록) 활성 탭 색상 적용.
 * 4. [원칙 준수] 모든 디자인 요소를 이 파일에서 통합 관리함.
 */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');

/* --- [흔들림 방지] 페이지 레이아웃 안정화 --- */
html {
    overflow-y: scroll; /* 스크롤바 영역을 항상 확보하여 페이지 이동 시 좌우 흔들림 방지 */
}

body { font-family: 'Noto Sans KR', sans-serif; background-color: #f8f9fa; color: #333; overflow-x: hidden; }
.main-wrapper { padding-top: 100px; min-height: calc(100vh - 200px); }

/* 컨텐츠 최소 높이 설정 (탭 전환 시 급격한 높이 변화 방지) */
.match-content-area {
    min-height: 900px;
}

/* --- 네비게이션 --- */
.navbar { background-color: rgba(255, 255, 255, 0.98) !important; backdrop-filter: blur(10px); box-shadow: 0 2px 15px rgba(0,0,0,0.05); }
.nav-link { color: #555 !important; font-weight: 600; transition: color 0.3s; white-space: nowrap !important; }
.nav-link:hover, .nav-link.active { color: #2d3748 !important; }
.btn-nav-login { background-color: #4a5568; border: none; color: white !important; border-radius: 30px; font-weight: bold; padding: 8px 25px !important; transition: 0.3s; }
.btn-nav-login:hover { background-color: #2d3748; transform: translateY(-2px); }

/* --- 공통 섹션 및 카드 --- */
.section-title { font-weight: 900; margin-bottom: 50px; text-align: center; color: #111; position: relative; }
.section-title::after { content: ''; display: block; width: 50px; height: 4px; background: #4a5568; margin: 15px auto 0; border-radius: 2px; }

.solution-card, .feature-card, .reg-card, .dash-card { 
    border-radius: 20px; border: none; background: #fff; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: 0.3s; 
}
.solution-card:hover, .shadow-hover:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important; }

/* --- 마이페이지 (개인 전적) 스타일 --- */
.profile-side-card { position: sticky; top: 110px; border-radius: 20px; border: none; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.profile-avatar { 
    width: 80px; height: 80px; border-radius: 50%; 
    display: flex; align-items: center; justify-content: center; 
}
.info-list .border-bottom:last-child { border-bottom: none !important; }

/* 3구/4구 종목별 탭 디자인 */
.nav-pills .nav-link { border-radius: 12px; font-weight: 600; padding: 12px; transition: 0.3s; color: #555; }

/* 3구 활성화: 밝은 파랑 */
.tab-3ball.active { 
    background-color: #007bff !important; 
    color: #ffffff !important; 
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3); 
}

/* 4구 활성화: 초록 계열 */
.tab-4ball.active { 
    background-color: #28a745 !important; 
    color: #ffffff !important; 
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3); 
}

/* 간소화된 날짜 검색 버튼 그룹 스타일 */
.btn-group-sm .btn { padding: 8px 16px; font-size: 0.85rem; border-radius: 8px !important; margin: 0 2px; }

/* 통계 그래프 및 테이블 스타일 */
.chart-container { position: relative; margin: 0 auto; }
canvas { max-width: 100%; }

.table { font-size: 0.85rem; }
.table thead th { font-weight: 600; color: #718096; border-bottom-width: 1px; background-color: #f8f9fa; }
.table tbody td { padding: 12px 8px; vertical-align: middle; }

/* 필터 소형화 */
.form-select-sm, .form-control-sm { font-size: 0.8rem; border-radius: 8px; border: 1px solid #e9ecef; }
.form-select-sm:focus { border-color: #2d3748; box-shadow: none; }

/* --- 서비스 신청 페이지 스타일 --- */
.solution-card-check { 
    transition: 0.3s; cursor: pointer; border: 2px solid #edf2f7 !important; 
}
.solution-card-check:hover { background-color: #f7fafc; border-color: #cbd5e0 !important; }
.form-check-input:checked + .form-check-label .fw-bold { color: #2d3748; }

/* --- 관리자 페이지 스타일 --- */
.admin-nav-active {
    background-color: #212529 !important; /* bg-dark */
    color: #ffffff !important;           /* 흰색 글자 고정 */
    font-weight: 600 !important;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.nav-pills .nav-link:not(.admin-nav-active):hover {
    background-color: #f1f3f5;
    color: #000 !important;
}

/* --- 공통 유틸리티 --- */
.bg-opacity-10 { --bs-bg-opacity: 0.1; }
.rounded-4 { border-radius: 1rem !important; }
.shadow-none:focus { box-shadow: none !important; }