/* --------------------------------------------------
   SeeMedi AI 통역 서비스 - 진입 페이지 (index.html) 스타일
-------------------------------------------------- */

/* 기본 폰트 설정 및 배경색 */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f7f9fb;
}

/* 컨테이너 카드 스타일 (메인 스크린) */
.container-card {
    border-radius: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
}

/* -------------------- 방 목록 아이템 스타일 -------------------- */

/* 개별 방 항목 (div) 스타일 */
.room-item {
    background-color: #f9fafb; /* bg-gray-50 */
    padding: 1.25rem; /* p-5 */
    border-radius: 0.75rem; /* rounded-xl */
    border: 1px solid #e5e7eb; /* border border-gray-200 */
    display: flex; /* flex */
    justify-content: space-between; /* justify-between */
    align-items: center; /* items-center */
    transition: all 0.3s ease; /* transition */
}

/* 호버 시 그림자 효과 */
.room-item:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06); /* hover:shadow-md */
    transform: translateY(-2px);
}

/* -------------------- 버튼 스타일 -------------------- */

/* '입장하기' 버튼 스타일 */
.join-room-btn {
    padding: 0.5rem 1.5rem; /* px-6 py-2 */
    background-color: #2563eb; /* bg-blue-600 */
    color: white; /* text-white */
    font-weight: 600; /* font-semibold */
    border-radius: 0.5rem; /* rounded-lg */
    transition: all 0.3s ease; /* transition */
}
.join-room-btn:hover {
    background-color: #1d4ed8; /* hover:bg-blue-700 */
    transform: scale(1.05); /* transform hover:scale-105 */
}

/* '새 회의실 시작' 버튼 컨테이너 스타일 */
.new-room-container {
    padding-top: 1.5rem; /* pt-6 */
    border-top: 1px solid #d1d5db; /* border-t border-gray-300 */
    margin-top: 1.5rem; /* mt-6 */
}

/* '새 회의실 시작' 버튼 스타일 */
.start-new-room-btn {
    padding: 0.75rem 1.5rem; /* px-6 py-3 */
    background-color: #10b981; /* bg-green-600 */
    color: white; /* text-white */
    font-weight: 600; /* font-semibold */
    border-radius: 0.5rem; /* rounded-lg */
    width: 100%; /* w-full */
    transition: all 0.3s ease; /* transition */
}
.start-new-room-btn:hover {
    background-color: #059669; /* hover:bg-green-700 */
    transform: scale(1.01); /* transform hover:scale-[1.01] */
}

/* -------------------- 텍스트 스타일 (옵션) -------------------- */

/* 방 이름 */
.room-title {
    font-size: 1.125rem; /* text-lg */
    font-weight: 700; /* font-bold */
    color: #1f2937; /* text-gray-800 */
}

/* 통역 언어 설명 */
.room-info {
    font-size: 0.875rem; /* text-sm */
    color: #6b7280; /* text-gray-500 */
}