/* 통계 필터 버튼 */
.stats-filter {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 15px;
}

.filter-btn {
    background: none;
    border: 1px solid var(--border);
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-sub);
    transition: all 0.2s;    
}

.filter-btn.active {
    /* 배경을 살짝만 채워 부드럽게 표현 */
    background: rgba(var(--text-main-rgb), 0.1); 
    color: var(--text-main);
    border-color: var(--text-main);
    font-weight: 700;
}

/* 통계 요약 그리드 */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
}

.stat-item {
    background: rgba(var(--bg-rgb), 0.5); /* 배경색에 맞춰 조정 */
    padding: 15px;
    border-radius: 12px;
    border: 1px solid var(--border);
    text-align: center;
}

.stat-label {
    display: block;
    font-size: 12px;
    color: var(--text-sub);
    margin-bottom: 5px;
}

.stat-value {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-main);
}

/* 데이터 테이블 */
.data-table-container {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    table-layout: fixed; /* 핵심: 내용에 상관없이 지정한 너비를 유지함 */
}
/* 2. 각 열(Column)의 너비를 명시적으로 지정 */
.data-table th:nth-child(1), .data-table td:nth-child(1) { width: 50px; text-align: center; } /* 순위 */
.data-table th:nth-child(2), .data-table td:nth-child(2) { width: auto; }                    /* 곡 제목 (남는 공간 다 사용) */
.data-table th:nth-child(3), .data-table td:nth-child(3) { width: 30%; }                    /* 가수 */
.data-table th:nth-child(4), .data-table td:nth-child(4) { width: 60px; text-align: center; } /* 횟수 */

.data-table th {
    text-align: left;
    padding: 12px 8px;
    border-bottom: 2px solid var(--border);
    color: var(--text-sub);
}

/* 3. 제목이나 가수가 너무 길 경우 '...' 처리 (말줄임) */
.data-table td {
    padding: 12px 8px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;      /* 줄바꿈 방지 */
    overflow: hidden;         /* 넘치는 부분 숨김 */
    text-overflow: ellipsis;  /* 넘치는 부분 '...' 표시 */
}

/*셀렉트 박스*/
/* 차트 섹션 배치 */
.chart-section {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.chart-container {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    padding: 15px;
    border-radius: 12px;
    height: 250px; /* 차트 높이 고정 */
    min-width: 0;  /* 캔버스 깨짐 방지 */
}
/* 모달 배경 */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(5px);
}

/* 모달 컨텐츠 */
.modal-content {
    width: 90%; max-width: 400px;
    padding: 25px;
    position: relative;
    animation: fadeIn 0.3s ease;
}

.modal-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 20px;
}

.modal-header h3 { margin: 0; color: var(--text-main); font-size: 1.2rem; }

.close-btn {
    background: none; border: none; color: #888;
    font-size: 28px; cursor: pointer; line-height: 1;
}

.modal-info p { margin: 8px 0; font-size: 14px; color: var(--text-sub); }
.modal-info strong { color: var(--text-main); }

/* 날짜 목록 스타일 */
.date-list {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 10px; max-height: 200px; overflow-y: auto;
}

.date-tag {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    padding: 4px 10px; border-radius: 20px;
    font-size: 12px; color: #aaa;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 테이블 행에 커서 포인터 추가 */
.data-table tbody tr { cursor: pointer; transition: background 0.2s; }
.data-table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }

/* 모달 내 가수 정보 스타일링 */
#modal-artist {
    color: #e0e0e0 !important; /* 어두운 배경에서도 잘 보이는 밝은 회색/흰색 */
    font-size: 1.1em;
    margin-left: 5px;
}

/* 횟수 강조 */
#modal-count {
    color: #ffce56; /* 횟수는 노란색 계열로 포인트 */
    font-weight: bold;
}

/* 곡 제목 강조 */
#modal-title {
    color: #ffffff;
    font-size: 1.25rem;
    line-height: 1.4;
}
/* 1. 검색 버튼: 필터 버튼과 높이, 라운드(20px)를 통일 */
.search-btn {
    background: var(--accent) !important; /* 필터 버튼보다 한 단계 강조된 남색 */
    color: var(--text-main) !important;
    border: 1px solid var(--accent-bright) !important; /* 테두리에 밝은 포인트 */
    border-radius: 20px !important; /* 필터 버튼(.filter-btn)과 동일하게 수정 */
    padding: 0 25px !important;
    height: 38px; /* 필터 버튼과 비슷한 높이 확보 */
    cursor: pointer;
    font-weight: 500;
    font-size: 13px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 마우스 올렸을 때: 필터 버튼의 호버 느낌과 유사하게 */
.search-btn:hover {
    background: var(--accent-bright) !important;
    color: #fff !important;
    box-shadow: 0 0 12px var(--accent-glow);
}

/* 2. 검색 입력창: 필터 버튼들과 조화로운 스타일 */
#search-input {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--border) !important;
    border-radius: 20px !important; /* 입력창도 둥글게 통일 */
    padding: 10px 20px !important;
    color: var(--text-main) !important;
    font-size: 13px;
    height: 38px;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

#search-input:focus {
    border-color: var(--accent-bright) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    outline: none;
}

/* 3. 검색 컨테이너 배치 조정 */
.search-container {
    margin-top: 10px;
    margin-bottom: 25px;
    display: flex;
    gap: 10px;
    align-items: center;
}

/* 모바일 대응 (화면 너비가 900px 이하일 때) */
@media (max-width: 900px) {
    /* 1. 필터 버튼과 셀렉트 박스를 세로로 배치 */
    .stats-filter {
        flex-direction: column; /* 세로 정렬 */
        align-items: stretch;   /* 너비를 꽉 차게 */
        gap: 15px;
    }

    /* 2. 연도/월 선택 박스(date-selectors) 그룹 설정 */
    #date-selectors {
        display: flex;
        gap: 8px;
        width: 100%;
    }

    #date-selectors select {
        flex: 1; /* 선택창이 가로로 나란히 꽉 차도록 */
        font-size: 14px;
        padding: 10px;
    }

    /* 3. 통계 요약 상자(stats-grid)를 한 줄에 하나씩 배치 */
    .stats-grid {
        grid-template-columns: 1fr; /* 무조건 한 줄에 1개 */
        gap: 10px;
    }

    .stat-item {
        padding: 20px; /* 터치하기 쉽고 시원하게 크기 조절 */
    }

    .stat-value {
        font-size: 22px; /* 모바일에서 숫자가 더 잘 보이게 강조 */
    }

    /* 4. 데이터 테이블 글자 크기 조정 */
    .data-table {
        font-size: 13px;
    }
    
    .data-table th, .data-table td {
        padding: 10px 5px; /* 좌우 여백 줄여서 공간 확보 */
    }

    /* 더보기 버튼 너비 조정 */
    button[onclick="loadMore()"], 
    button[onclick="resetVisibleCount()"] {
        width: 100% !important; /* 모바일에서는 버튼을 꽉 차게 */
    }
    .chart-section {
        flex-direction: column;
    }
    .chart-container {
        height: 220px;
    }
    /* 1. 모바일에서 각 열의 너비 재조정 */
    /* 순위 열은 더 좁게, 가수 열은 퍼센트 대신 고정폭으로 조절 가능 */
    .data-table th:nth-child(1), .data-table td:nth-child(1) { width: 35px; } /* 순위 */
    .data-table th:nth-child(2), .data-table td:nth-child(2) { width: auto; } /* 제목 (최대한 확보) */
    .data-table th:nth-child(3), .data-table td:nth-child(3) { width: 80px; } /* 가수 (모바일은 30%보다 고정값이 안전) */
    .data-table th:nth-child(4), .data-table td:nth-child(4) { width: 45px; } /* 횟수 */

    /* 2. 글자가 너무 길어 '...'이 생길 때 가독성 확보 */
    .data-table td {
        padding: 10px 4px; /* 여백을 줄여 글자 노출 공간 확보 */
        font-size: 12px;   /* 모바일은 글씨를 살짝 줄임 */
    }

    /* 3. 만약 가수 이름이 너무 길어 제목이 안 보인다면? */
    .data-table td:nth-child(3) {
        font-size: 11px;   /* 가수 이름만 더 작게 */
        color: #888;       /* 살짝 흐리게 하여 제목을 강조 */
    }
}

#date-selectors select:focus {
    border-color: var(--text-main);
}