// 라이브 상세보기 페이지 스타일
.liveContainer {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
  overflow: hidden;
}

// 메인 콘텐츠 영역
.mainContent {
  display: flex;
  flex: 1;
  overflow: hidden;

  // 모바일: 세로 스택
  @media (max-width: 768px) {
    flex-direction: column;
  }

  // 태블릿 이상: 가로 배치
  @media (min-width: 769px) {
    flex-direction: row;
  }
}

// 채팅 섹션
.chatSection {
  // 모바일: 전체 너비, 남은 공간 차지
  @media (max-width: 768px) {
    flex: 1;
    width: 100%;
    min-height: 0;
  }

  // 태블릿 이상: 고정 너비 사이드바
  @media (min-width: 769px) {
    width: 350px;
    flex-shrink: 0;
  }

  // 데스크톱: 더 넓은 채팅창
  @media (min-width: 1200px) {
    width: 400px;
  }
}

// 다크 모드 대응 (옵션)
@media (prefers-color-scheme: dark) {
  .liveContainer {
    background-color: #1f2937;
  }
}