/* 반응형 폰트 크기 CSS 변수 정의 */
:root {
    --fs-title: clamp(1.2rem, 4vw, 1.5rem);
    --fs-room-name: clamp(1rem, 3.5vw, 1.25rem);
    --fs-room-info: clamp(0.8rem, 2.5vw, 0.9rem);
    --fs-status: clamp(0.8rem, 2.5vw, 0.9rem);
}

.custom-card {
    background-color: rgba(215, 245, 244, 0.7); /* #D7F5F4 + 투명도 70% */
    /* background-image: url('../img/meeting_room.jpeg');*/
    border-radius: 30px;
}

.reservation_date{
    width: 8.7rem;
    height: 2.5rem;
}

.location_select{
    height: 2.5rem;
}

/* 반응형 텍스트 크기 적용 */
.location_text {
    font-size: var(--fs-title) !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

.room-name-text {
    font-weight: 800;
    font-size: var(--fs-room-name);
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.color_icon{
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 0.3rem;
}

.room-info-text {
    font-size: var(--fs-room-info) !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

.status-text {
    font-weight: 600;
    font-size: var(--fs-status) !important;
    white-space: nowrap;
}

.status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 0.3rem;
    flex-shrink: 0;
}

.time-slots-container {
    background-color: white;
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
    border: 1px solid #e0e0e0;
}

.time-slots-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    cursor: grab;
    user-select: none;
}

.time-slots-wrapper:active {
    cursor: grabbing;
}

.time-slots {
    display: flex;
    min-width: max-content;
    gap: 0;
}

.time-slot {
    flex: 0 0 40px;
    height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    font-size: 11px;
    color: #666;
    background-color: transparent;
    cursor: pointer;
    position: relative;
    padding: 5px 0;
}

.time-slot.half-hour {
    flex: 0 0 40px;
}

.time-slot::after {
    content: '';
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 20px;
    background-color: #ddd;
    transition: all 0.2s;
}

.time-slot.half-hour::after {
    height: 12px;
    width: 1px;
    background-color: #ccc;
}

/* 타임슬롯 컨테이너 포지션 설정 */
.time-slots {
    position: relative; /* reservation-block의 절대위치 기준점 */
    --slot-width: 40px; /* 슬롯 너비 변수 정의 */
}

/* 예약 블록 스타일 */
.reservation-block {
    top: 30%;
    position: absolute;
    height: 45px;
    background-color: rgba(220, 53, 69, 0.5); /* 빨간색 반투명 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 500;
    color: white;
    text-align: center;
    z-index: 10;
    cursor: pointer;
    transition: all 0.2s ease;
}

.reservation-block:hover {
    background-color: rgba(220, 53, 69, 0.7);
}

/* 예약 블록이 있는 타임슬롯 스타일 조정 */
.time-slot.has-reservation {
    color: #dc3545;
}

.time-slot.has-reservation::after {
    background-color: #dc3545;
    height: 30px;
    width: 3px;
}

/* 반응형 조정 */
@media (max-width: 768px) {
    .reservation-block {
        font-size: 0.7rem;
        height: 55px;
    }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.floor{
    color:#666;
}

.floor-indicator {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 14px;
    font-weight: 500;
    color: #666;
}

/* 숨김 전용 클래스 */
.time-slots-wrapper.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.time-slots-wrapper.hide-scrollbar::-webkit-scrollbar {
  height: 0; 
}

/* 작은 화면에서 카드 패딩 조정 */
@media (max-width: 768px) {
    .custom-card .card-body {
        padding: 1rem 1.5rem;
    }
    
    /* 카드 제목 영역 간격 조정 */
    .card-title {
        gap: 0.5rem;
    }
}

@media (max-width: 576px) {
    .custom-card .card-body {
        padding: 0.75rem 1rem;
    }
    
    /* 제목 영역 세로 정렬로 변경 */
    .d-flex.gap-3.align-items-center.mb-4 {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 1rem !important;
    }
}

/* 비로그인 상태에서 카드 인터랙션/호버 제거 */
.custom-card.login-blocked { cursor: default !important; }
.custom-card.login-blocked .time-slots-wrapper { pointer-events: auto; }
.custom-card.login-blocked:hover { box-shadow: none !important; transform: none !important; }
.custom-card.login-blocked .btn, 
.custom-card.login-blocked [data-room-id], 
.custom-card.login-blocked [data-room-name] { pointer-events: none; }