/* matching.css */

/* 히트맵 셀 애니메이션 및 효과 */
.heatmap-cell {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    cursor: pointer;
}

.heatmap-cell:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

/* 가로 스크롤 영역 스크롤바 숨기기 (깔끔한 UI용) */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    /* Matchmaker cards - smaller on mobile */
    #matchmakers-container > div {
        min-width: 150px !important;
        padding: 10px !important;
    }

    #matchmakers-container .text-lg {
        font-size: 14px;
    }

    #matchmakers-container .text-sm {
        font-size: 12px;
    }

    /* Participant cards */
    #participants-container .h-40 {
        height: 120px;
    }

    #participants-container .p-4 {
        padding: 8px;
    }

    #participants-container .text-lg {
        font-size: 14px;
    }

    #participants-container .text-sm {
        font-size: 12px;
    }

    /* Heatmap table */
    #heatmap-head th,
    #heatmap-body td {
        padding: 4px;
        font-size: 11px;
    }

    .heatmap-cell {
        padding: 4px !important;
        height: 48px !important;
    }

    .heatmap-cell .text-xl {
        font-size: 14px;
    }

    .heatmap-cell .text-\[9px\] {
        font-size: 8px;
    }

    /* Final choice diagram */
    #final-males img,
    #final-females img {
        width: 48px !important;
        height: 48px !important;
    }

    #final-males .text-sm,
    #final-females .text-sm {
        font-size: 11px;
    }

    /* Modal - comments scroll area */
    #modal-comments {
        max-height: 25vh !important;
    }
}