/* public_html/assets/css/style.css */
:root {
--primary: #004ea2; /* 동행복권 블루 */
--accent: #f5f5f5;
--text: #333;
--ball-y: #fbc400; /* 1-10 */
--ball-b: #69c8f2; /* 11-20 */
--ball-r: #ff7272; /* 21-30 */
--ball-g: #aaa; /* 31-40 (회색) - 실제 공색은 회색/검정 계열 */
--ball-gn: #b0d840; /* 41-45 (녹색) */
}
body { font-family: 'Noto Sans KR', sans-serif; margin: 0; padding: 0; color: var(--text); background: #f9f4eb; }
a { text-decoration: none; color: inherit; }
/* 레이아웃 */
.container { max-width: 800px; margin: 0 auto; padding: 20px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.05); min-height: 80vh; }
header, footer { text-align: center; padding: 20px 0; }
header h1 { margin: 0; color: var(--primary); font-size: 1.8rem; }
.nav-links { margin-top: 10px; font-size: 0.9rem; }
.nav-links a { margin: 0 10px; color: #666; font-weight: bold; }
/* 회차 컨트롤 */
.round-control { display: flex; justify-content: space-between; align-items: center; margin: 10px 0 30px 0; background: var(--accent); padding: 15px; border-radius: 10px; }
.btn-nav { padding: 10px 20px; background: #fff; border: 1px solid #ddd; border-radius: 5px; font-weight: bold; cursor: pointer; }
.btn-nav:hover { background: #eee; }
.current-round { font-size: 1.5rem; font-weight: 900; color: var(--primary); }
.date-info { font-size: 0.9rem; color: #888; margin-top: 5px; text-align: center; }
/* 로또 공 */
.balls-wrapper { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 30px 0; }
.ball { width: 45px; height: 45px; line-height: 45px; border-radius: 50%; text-align: center; color: #fff; font-weight: bold; font-size: 1.2rem; box-shadow: 2px 2px 5px rgba(0,0,0,0.2); text-shadow: 1px 1px 2px rgba(0,0,0,0.3); }
.bonus-sign { align-self: center; font-size: 1.5rem; color: #ccc; margin: 0 5px; }
/* 공 색상 로직 (JS/PHP에서 클래스 추가) */
.ball.c1 { background: var(--ball-y); color: #333; text-shadow: none; } /* 1-10 */
.ball.c2 { background: var(--ball-b); } /* 11-20 */
.ball.c3 { background: var(--ball-r); } /* 21-30 */
.ball.c4 { background: var(--ball-g); } /* 31-40 */
.ball.c5 { background: var(--ball-gn); } /* 41-45 */
/* 당첨금 테이블 */
.win-table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 0.95rem; }
.win-table th { background: #f0f4f8; padding: 12px; border-bottom: 2px solid #ddd; color: #555; font-weight: 600; }
.win-table td { padding: 12px; border-bottom: 1px solid #eee; text-align: center; }
.win-table tr:hover { background: #fdfdfd; }
.rank-badge { display: inline-block; padding: 3px 8px; border-radius: 4px; background: #eee; font-size: 0.8rem; font-weight: bold; }
.rank-1 { background: var(--ball-y); color: #000; }
.rank-2 { background: var(--ball-b); color: #fff; }
.money { font-family: 'Roboto', sans-serif; font-weight: 500; }
.real-money { color: #d32f2f; font-weight: 900; font-size: 1.1em; } /* 실수령액 강조 */
.tax-info { margin-top: 20px; font-size: 0.8rem; color: #888; text-align: right; line-height: 1.4; }
/* 모바일 대응 */
@media (max-width: 600px) {
.ball { width: 35px; height: 35px; line-height: 35px; font-size: 1rem; }
.win-table th, .win-table td { padding: 8px 4px; font-size: 0.8rem; }
.hide-mobile { display: none; } /* 모바일에서 덜 중요한 컬럼 숨김 */
}
/* 탭 디자인 개선 */
.tab-nav { display: flex; border-bottom: 2px solid #e0e0e0; margin-bottom: 20px; }
.tab-btn {
padding: 15px 30px;
cursor: pointer;
font-weight: bold;
color: #888;
background: #f9f9f9;
border-radius: 10px 10px 0 0;
margin-right: 5px;
transition: 0.3s;
}
.tab-btn:hover { background: #eee; color: #555; }
.tab-btn.active {
color: #fff;
background: var(--primary);
border-bottom: 2px solid var(--primary);
}
/* 랭킹 페이지 지도 레이아웃 */
.rank-layout { display: flex; gap: 20px; height: 600px; }
.rank-list-area { flex: 1; overflow-y: auto; background: #fff; border: 1px solid #eee; border-radius: 8px; }
.rank-map-area { flex: 1.5; border-radius: 8px; overflow: hidden; border: 1px solid #ddd; }
@media (max-width: 768px) {
.rank-layout { flex-direction: column-reverse; height: auto; }
.rank-map-area { height: 300px; }
.rank-list-area { height: 400px; }
}
/* 랭킹 리스트 아이템 */
.rank-item { padding: 15px; border-bottom: 1px solid #f0f0f0; cursor: pointer; display: flex; align-items: center; }
.rank-item:hover { background: #f0f8ff; }
.rank-item.selected { background: #e3f2fd; border-left: 4px solid var(--primary); }
.rank-badge-num { width: 30px; height: 30px; background: #eee; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; margin-right: 15px; color: #555; flex-shrink: 0; }
.rank-badge-num.top3 { background: #fbc400; color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.2); }
.rank-info { flex: 1; }
.rank-name { font-weight: bold; font-size: 1rem; color: #333; margin-bottom: 4px; display: block; }
.rank-addr { font-size: 0.8rem; color: #888; display: block; }
.rank-count { font-weight: bold; color: var(--primary); font-size: 1.1rem; }
/* 작은 로또볼 (차트용) */
.ball-sm {
width: 28px; height: 28px; line-height: 28px;
border-radius: 50%; text-align: center; color: #fff;
font-weight: bold; font-size: 0.85rem;
box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
display: inline-block;
}
.ball-sm.c1 { background: var(--ball-y); color:#333; }
.ball-sm.c2 { background: var(--ball-b); }
.ball-sm.c3 { background: var(--ball-r); }
.ball-sm.c4 { background: var(--ball-g); }
.ball-sm.c5 { background: var(--ball-gn); }
/* 번호 분석 탭 - 쿨 톤 (적게 나온 번호) */
.cold-rank .chart-bar { background: linear-gradient(90deg, #a1c4fd 0%, #c2e9fb 100%); }
.cold-rank .chart-value { color: #1e88e5; }
/* 번호 분석 탭 - 핫 톤 (기존 스타일 보강) */
.hot-rank .chart-bar { background: linear-gradient(90deg, #ff9a9e 0%, #ff6b6b 100%); }
.hot-rank .chart-value { color: #d32f2f; }
/* --- style.css 맨 아래 추가 (홈 화면 대시보드용) --- */
.section-divider { margin: 40px 0 20px; border-top: 1px dashed #ddd; }
.section-title { font-size: 1.2rem; font-weight: bold; color: #333; margin-bottom: 20px; text-align: center; }
/* 기능 그리드 (카드 레이아웃) */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-bottom: 40px; }
.feature-card {
background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 25px;
transition: transform 0.2s, box-shadow 0.2s; cursor: pointer; position: relative; overflow: hidden;
display: flex; flex-direction: column; justify-content: space-between;
}
.feature-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.08); border-color: var(--primary); }
/* 카드 내부 꾸미기 */
.f-icon { font-size: 2.5rem; margin-bottom: 15px; }
.f-title { font-size: 1.1rem; font-weight: bold; color: #333; margin-bottom: 5px; }
.f-desc { font-size: 0.9rem; color: #777; line-height: 1.4; margin-bottom: 15px; }
.f-data { font-size: 0.85rem; background: #f8f9fa; padding: 8px 12px; border-radius: 8px; color: #555; font-weight: bold; }
.f-data strong { color: var(--primary); }
/* 바로가기 화살표 */
.f-arrow { position: absolute; top: 20px; right: 20px; color: #ddd; font-size: 1.2rem; transition: 0.2s; }
.feature-card:hover .f-arrow { color: var(--primary); right: 15px; }
/* 배너 스타일 (전국지도 강조) */
.banner-card {
background: linear-gradient(135deg, var(--primary) 0%, #4facfe 100%);
color: white; border: none; grid-column: 1 / -1; /* 전체 너비 차지 */
flex-direction: row; align-items: center; justify-content: space-between;
}
.banner-card:hover { border: none; transform: translateY(-3px); }
.banner-card .f-title, .banner-card .f-desc { color: white; opacity: 0.95; }
.banner-card .f-icon { margin-bottom: 0; margin-right: 20px; font-size: 3rem; }
.banner-card .f-data { background: rgba(255,255,255,0.2); color: white; }
.banner-card .f-data strong { color: #ffd700; }
.btn-nav.disabled {
background-color: #f5f5f5;
color: #ccc;
border-color: #eee;
cursor: default;
pointer-events: none; /* 클릭 방지 */
box-shadow: none;
}
/* 네비게이션 활성화(Active) 스타일 */
.nav-links a.active {
color: var(--primary) !important; /* 브랜드 컬러(파랑) 적용 */
border-bottom: 2px solid var(--primary); /* 하단 밑줄 */
opacity: 1;
}
/* (옵션) 모바일에서 줄바꿈 될 때 간격 조정 */
.nav-links a {
padding-bottom: 5px; /* 밑줄과 글자 사이 간격 */
border-bottom: 2px solid transparent; /* 평소에는 투명한 밑줄 (위치 고정용) */
}