/*
 * colonMeeting — 다크 UI 공용 스타일
 * static 리소스이므로 JTE 파서를 거치지 않는다 (room.jte/rooms.jte/detail.jte 는 여기 링크만 건다).
 * 폰트(Pretendard / JetBrains Mono), 스크롤바, 캔버스 질감, 커스텀 keyframes/media query 를 담당.
 */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

/* 스크롤바 — 다크 배경에서도 눈에 띄지 않게 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #333B4F;
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: #4A5468;
}
* {
    scrollbar-width: thin;
    scrollbar-color: #333B4F transparent;
}

/* 비디오 그리드 / 입장 게이트 배경 — 도트 캔버스 질감 (빈 상태를 의도된 디자인처럼 보이게) */
.stage-canvas {
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 22px 22px;
}

@media (max-width: 640px) {
    .stage-canvas {
        background-size: 16px 16px;
    }
}

/* 카드 / 패널 진입 모션 */
@keyframes mm-fade-up {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.animate-fade-up {
    animation: mm-fade-up 0.45s ease-out both;
}

/* 스포트라이트(확대) 모드 — 확대 타일은 가용 영역 전체를 쓰고, 나머지 타일은 하단 필름스트립으로 */
.spot-tile {
    width: 100%;
    height: 100%;
    aspect-ratio: auto !important; /* Tailwind aspect-video(16/9) 해제 — 가용 높이에 맞춤 */
}
.spot-tile video {
    object-fit: contain !important; /* 확대 화면은 잘리면 안 됨 (문서/슬라이드) */
    background: #0A0D14;
}
#grid.filmstrip {
    display: flex;
    overflow-x: auto;
    gap: 0.75rem;
}
#grid.filmstrip > div {
    flex: 0 0 auto;
    width: 11rem;
}
/* 화면공유 타일은 그리드에서도 cover 크롭 금지 (가장자리 잘림 방지) */
.screen-tile video {
    object-fit: contain !important;
    background: #0A0D14;
}
/* 전체화면 진입 시 검정 배경으로 레터박스 */
#spotlightWrap:fullscreen {
    background: #0A0D14;
}

/* 녹음 중 버튼 글로우 펄스 (상단 배지는 Tailwind animate-pulse 사용) */
@keyframes mm-glow {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
    }
}
.recording-glow {
    animation: mm-glow 1.8s ease-in-out infinite;
}