.tab-panel[hidden] {
    display: none;
}

.tab-btn.active {
    font-weight: 700;
}

.infoContent {
    max-height: calc(100% - 45px); /* 필요에 맞춰 높이 조절 */
    overflow: auto;
}

    .infoContent.daily-panel[hidden] {
        display: none;
    }

    .table-container thead th {
        position: sticky;
        top: 0;
        z-index: 5;
        background-color: #2a2a2a;
    }

.filter-section {
    display: flex;
    background-color: #2a2a2a;
    padding: 0px 0;
}

.filter-item {
    padding: 8px 20px;
    color: #888888;
    cursor: pointer;
    transition: color 0.2s ease;
}

    .filter-item.active {
        color: #ffffff;
        font-weight: 500;
    }

    .filter-item:hover {
        color: #cccccc;
    }

.table-container table {
    width: 100%;
    border-collapse: collapse;
}

.table-container table th {
    background-color: #2a2a2a;
    color: #cccccc;
    padding: 10px 15px;
    text-align: center;
    font-weight: normal;
    font-size: 17px;
    border-bottom: 1px solid #404040;
}

.table-container table td {
    padding: 10px 15px;
    text-align: center;
    font-size: 17px;
    border-bottom: 1px solid #404040;
}

.table-container table tr:hover {
    background-color: #333333;
}

.table-container table .date {
    color: #ffffff;
}

    .table-container table .price-up {
        color: var(--red-up);
    }

    .table-container table .price-down {
        color: var(--blue-down);
    }

.table-container table .change-up {
    color: var(--red-up);
}

    .table-container table .change-up::before {
        content: "▲";
        margin-right: 2px;
    }

.table-container table .change-down {
    color: var(--blue-down);
}

    .table-container table .change-down::before {
        content: "▼";
        margin-right: 2px;
    }


.table-container table .percentage {
    color: #ffffff;
}

.table-container table .volume {
    color: #ffffff;
}

.table-container table .price-data {
    color: #ffffff;
}

/* 정확한 컬럼 너비 설정 */
.table-container table .col-number {
    width: 40px;
}

.table-container table .col-date {
    width: 100px;
}

.table-container table .col-price {
    width: 80px;
}

.table-container table .col-change {
    width: 80px;
}

.table-container table .col-percent {
    width: 60px;
}

.table-container table .col-volume {
    width: 120px;
}

.table-container table .col-open {
    width: 80px;
}

.table-container table .col-high {
    width: 80px;
}

.table-container table .col-low {
    width: 80px;
}