LiveVideoSection.module.scss 892 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. // 영상 섹션
  2. .videoSection {
  3. flex: 1;
  4. display: flex;
  5. flex-direction: column;
  6. background: white;
  7. // 모바일
  8. @media (max-width: 768px) {
  9. flex: none;
  10. height: auto;
  11. }
  12. // 태블릿 이상
  13. @media (min-width: 769px) {
  14. border-right: 1px solid #e5e7eb;
  15. }
  16. }
  17. // 비디오 플레이어 래퍼
  18. .videoPlayerWrapper {
  19. width: 100%;
  20. aspect-ratio: 16/9;
  21. background: #f3f4f6;
  22. // 모바일: 자동 높이 (16:9 비율 유지)
  23. @media (max-width: 768px) {
  24. height: auto;
  25. }
  26. // 태블릿 이상: 16:9 비율로 고정
  27. @media (min-width: 769px) {
  28. flex-shrink: 0;
  29. }
  30. }
  31. // 빈 공간 컨테이너
  32. .emptySpace {
  33. background: #ffffff;
  34. // 모바일에서는 표시하지 않음
  35. @media (max-width: 768px) {
  36. display: none;
  37. }
  38. // 태블릿 이상에서는 남은 공간 차지
  39. @media (min-width: 769px) {
  40. flex: 1;
  41. min-height: 0;
  42. }
  43. }