/* slots-modal.css: 게임 상태 저장/불러오기 모달 전용 스타일 */

/* 모달 컨텐츠 영역을 더 넓게 만듭니다. */
#timerSlotsModal .modal-content {
    max-width: 900px;
    width: 95%;
}

/* 10x2 그리드 컨테이너 설정 */
#slot-grid-container {
    display: grid
;
    grid-template-columns: repeat(10, 1fr);
    gap: 12px;
    margin: 20px 0;
    padding: 10px;
    background-color: #111827;
    border-radius: 8px;
    max-width: 100%;
    overflow: auto;
}

/* 개별 슬롯 아이템 */
.slot-item {
    aspect-ratio: 1 / 1; /* 1:1 비율의 정사각형 */
    background-color: #374151;
    border: 2px solid #4b5563;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5px;
    box-sizing: border-box;
    text-align: center;
    max-height: 100px;
}

.slot-item:hover {
    border-color: #6b7280;
    transform: translateY(-2px);
}

/* 사용 중인 슬롯 스타일 */
.slot-item.used {
    background-color: #1e40af;
    border-color: #2563eb;
}

/* 선택된 슬롯 스타일 */
.slot-item.selected {
    border-color: #f59e0b; /* 노란색 테두리로 선택 강조 */
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
    transform: scale(1.05);
}

.slot-number {
    font-size: 1.2rem;
    font-weight: bold;
    color: #f9fafb;
}

.slot-name {
    font-size: 0.8rem;
    margin-top: 5px;
    word-break: break-all; /* 긴 이름이 넘치지 않도록 줄바꿈 */
    color: #d1d5db;
}

.slot-item.used .slot-name {
    color: #fff;
    font-weight: 500;
}

/* 슬롯 아래의 액션 버튼 영역 */
.slot-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #4b5563;
    flex-wrap: wrap;
}

.slot-actions button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* 아이콘과 텍스트 사이 간격 */
}

.slot-actions button:disabled {
    background-color: #374151;
    cursor: not-allowed;
    opacity: 0.6;
}



#closeTimerSlotsModalBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 28px;
    font-size: 1.05rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: bold;
    background-color: #a7aab0;    
}


#closeTimerSlotsModalBtn:hover {    
    background-color: #f0f0f0;    
}