/* 전체 배경 및 기본 글자 설정 */
body { 
    background-color: #000000; 
    color: #ffffff; /* 순백색으로 변경하여 가독성 확보 */
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; 
    margin: 0; 
    overflow-x: hidden; 
}

/* 헤더 부분 */
.header { 
    text-align: center; 
    padding: 25px; 
    background: #111111; 
    border-bottom: 4px solid #dc143c; /* 크림슨 레드 */
}

.header h1 {
    margin: 0;
    font-size: 2em;
    letter-spacing: 1px;
}

/* 정보 표시 패널 */
#info-panel { 
    text-align: center; 
    padding: 15px; 
    background: #1a1a1a; 
    color: #ff4d4d; /* 밝은 빨강 */
    font-weight: 800; /* 아주 두껍게 */
    font-size: 1.2em; 
    border-bottom: 1px solid #333;
}

/* 네비게이션 버튼 */
.nav-buttons { 
    display: flex; 
    justify-content: center; 
    gap: 15px; 
    padding: 20px; 
    background: #000000; 
}

button { 
    padding: 12px 25px; 
    background: #2c2c2c; 
    color: #ffffff; 
    border: 2px solid #444; 
    cursor: pointer; 
    border-radius: 6px; 
    font-weight: bold; 
    font-size: 1em;
    transition: all 0.3s ease;
}

button:hover { 
    background: #444; 
    border-color: #dc143c; 
}

button.active { 
    background: #dc143c; 
    border-color: #ffffff; 
    box-shadow: 0 0 10px rgba(220, 20, 60, 0.5);
}

/* 차트 컨테이너 */
#chart-container { 
    width: 95%; 
    height: 750px; 
    margin: 0 auto; 
    background: #000000; 
    border: 1px solid #222;
}