/* 테이블 컨테이너 추가 - 반응형 처리를 위해 */
.table-container {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 16px;
}

table.metadata-table {
    all: unset; /* Reset existing table styles */
    display: table;
    width: 100%;
    min-width: 500px; /* 최소 너비 설정 */
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid #d3d3d3; /* Add border to the entire table */
    border-radius: 8px; /* Round corners for the entire table */
    margin-bottom: 16px;
    table-layout: auto; /* fixed에서 auto로 변경 */
}

    table.metadata-table thead {
        background-color: #f9f9f9; /* Light gray background for header */
    }

    table.metadata-table .metadata-header-row th {
        text-align: left;
        padding: 8px 12px; /* Increased horizontal padding for columns */
        border-bottom: 1px solid #d3d3d3;
        font-weight: bold;
        font-size: 12px;
        color: #333;
        white-space: nowrap; /* 헤더 텍스트 줄바꿈 방지 */
    }

        /* Apply rounded corners to the first and last cells of the first row */
        table.metadata-table .metadata-header-row th:first-child {
            border-top-left-radius: 8px;
        }

        table.metadata-table .metadata-header-row th:last-child {
            border-top-right-radius: 8px;
        }

    table.metadata-table .metadata-row td {
        padding: 8px 12px; /* Increased horizontal padding for columns */
        border-bottom: 1px solid #d3d3d3;
        vertical-align: top;
        font-size: 12px;
        color: #444;
        /* 텍스트 오버플로우 처리 - 핵심 추가 부분 */
        max-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Apply rounded corners to the first and last cells of the last row */
    table.metadata-table .metadata-row:last-child td:first-child {
        border-bottom-left-radius: 8px;
    }

    table.metadata-table .metadata-row:last-child td:last-child {
        border-bottom-right-radius: 8px;
    }

    /* Remove bottom border from last row cells to avoid overlap with table border */
    table.metadata-table .metadata-row:last-child td {
        border-bottom: none;
    }

    table.metadata-table .metadata-label {
        width: 180px;
        min-width: 180px; /* 최소 너비 보장 */
        font-weight: 600;
        white-space: nowrap; /* 라벨은 항상 한 줄로 */
    }

    table.metadata-table .metadata-value {
        width: auto;
        max-width: 400px; /* 최대 너비 제한 추가 */
    }

        table.metadata-table .metadata-value a {
            color: #0366d6; /* GitHub blue color for links */
            text-decoration: none;
        }

            table.metadata-table .metadata-value a:hover {
                text-decoration: underline; /* Underline links on hover */
            }

    table.metadata-table .nuget-link img {
        margin-top: 2px;
        margin-bottom: -2px;
        height: 16px;
        margin-left: 10px; /* Space between text and NuGet icon */
    }

    /* Add subtle border between columns */
    table.metadata-table td:not(:last-child),
    table.metadata-table th:not(:last-child) {
        border-right: 1px solid #eaeaea; /* Light border between columns */
    }

/* 반응형 미디어 쿼리 추가 */
@media (max-width: 768px) {
    .table-container {
        overflow-x: scroll;
    }

    table.metadata-table {
        min-width: 400px; /* 모바일에서 최소 너비 줄이기 */
    }

        table.metadata-table .metadata-label {
            width: 120px;
            min-width: 120px;
        }

        table.metadata-table .metadata-value {
            max-width: 250px;
        }

        table.metadata-table .metadata-header-row th,
        table.metadata-table .metadata-row td {
            padding: 6px 8px; /* 모바일에서 패딩 줄이기 */
            font-size: 11px;
        }
}

@media (max-width: 480px) {
    table.metadata-table {
        min-width: 320px;
    }

        table.metadata-table .metadata-label {
            width: 100px;
            min-width: 100px;
        }

        table.metadata-table .metadata-value {
            max-width: 200px;
        }

        table.metadata-table .metadata-header-row th,
        table.metadata-table .metadata-row td {
            padding: 4px 6px;
            font-size: 10px;
        }
}

/* 툴팁 기능 추가 (선택사항) */
.tooltip {
    position: relative;
    cursor: help;
}

    .tooltip:hover::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: #333;
        color: white;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 11px;
        white-space: nowrap;
        z-index: 1000;
        margin-bottom: 5px;
        pointer-events: none;
    }

    .tooltip:hover::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 5px solid transparent;
        border-top-color: #333;
        margin-bottom: -5px;
        pointer-events: none;
    }