LiveLayout.module.scss 971 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. // 라이브 상세보기 페이지 스타일
  2. .liveContainer {
  3. display: flex;
  4. flex-direction: column;
  5. height: 100vh;
  6. background-color: #f5f5f5;
  7. overflow: hidden;
  8. }
  9. // 메인 콘텐츠 영역
  10. .mainContent {
  11. display: flex;
  12. flex: 1;
  13. overflow: hidden;
  14. // 모바일: 세로 스택
  15. @media (max-width: 768px) {
  16. flex-direction: column;
  17. }
  18. // 태블릿 이상: 가로 배치
  19. @media (min-width: 769px) {
  20. flex-direction: row;
  21. }
  22. }
  23. // 채팅 섹션
  24. .chatSection {
  25. // 모바일: 전체 너비, 남은 공간 차지
  26. @media (max-width: 768px) {
  27. flex: 1;
  28. width: 100%;
  29. min-height: 0;
  30. }
  31. // 태블릿 이상: 고정 너비 사이드바
  32. @media (min-width: 769px) {
  33. width: 350px;
  34. flex-shrink: 0;
  35. }
  36. // 데스크톱: 더 넓은 채팅창
  37. @media (min-width: 1200px) {
  38. width: 400px;
  39. }
  40. }
  41. // 다크 모드 대응 (옵션)
  42. @media (prefers-color-scheme: dark) {
  43. .liveContainer {
  44. background-color: #1f2937;
  45. }
  46. }