/*
 * 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');

/* 본문 기준 글자 크기.
   Tailwind 의 크기·여백이 전부 rem 이라 **여기 한 곳만 올리면 화면 전체가 같은 비율로 커진다**
   (text-sm 13.6px, text-lg 19.1px …). 화면마다 클래스를 바꾸면 반드시 몇 군데가 빠진다. */
html { font-size: 18px; }

/* ⚠️ hidden 속성이 이겨야 한다.
   Tailwind 의 display 유틸리티(flex/grid/block…)는 **작성자 스타일**이라
   브라우저 기본 `[hidden]{display:none}` 을 이긴다 → el.hidden = true 인데 계속 보인다.
   (2026-09-14 전사문 도구 버튼이 접힌 상태에서도 노출된 사고. ADMIN_PAGE_RULE §2.7 같은 함정) */
[hidden] { display: none !important; }

/* 스크롤바 — 다크 배경에서도 눈에 띄지 않게 */
::-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;
}
/* 화면공유 + 얼굴 합성(2026-10-20) — 받은 합성 영상에서 화면 부분만 잘라 보이고, 얼굴 칸은 동그란 창으로 */
.share-on { container-type: size; }
.share-stage {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    aspect-ratio: var(--ar);
    width: min(100cqw, calc(100cqh * (var(--ar))));
    overflow: hidden; background: #0A0D14;
}
.share-on .share-stage > video.share-main {
    position: absolute; left: 0; top: 0; max-width: none;
    width: var(--mw) !important; height: var(--mh) !important;
    object-fit: fill !important; background: transparent;
}
.face-wrap {
    position: absolute; right: 2.5%; bottom: 3.5%;
    width: var(--fs, 18%); min-width: 44px;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    cursor: default; z-index: 2;
}
.face-bubble {
    position: relative; width: 100%; aspect-ratio: 1 / 1;
    border-radius: 9999px; overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
    background: #0A0D14;
}
.share-on .face-bubble video {
    position: absolute; top: 0; max-width: none;
    object-fit: fill !important; background: transparent;
}
.face-bar {
    display: flex; gap: 4px; opacity: 0; transition: opacity .15s;
    position: absolute; bottom: 100%; margin-bottom: 6px;
}
.face-wrap:hover .face-bar, .face-wrap.show-bar .face-bar { opacity: 1; }
.face-bar button, .face-show {
    font-size: 12px; line-height: 1; color: #fff;
    background: rgba(0, 0, 0, 0.65); border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 9999px; padding: 5px 9px;
}
.face-bar button:disabled { opacity: .35; }
.face-show { position: absolute; right: 10px; bottom: 10px; z-index: 2; }
/* 필름스트립(작은 타일)에선 얼굴 창 조작 버튼 숨김 */
#grid.filmstrip .face-bar, #grid.filmstrip .face-show { display: none; }
.face-wrap.hidden, .face-show.hidden { display: none; }

/* 전체화면 진입 시 검정 배경으로 레터박스 */
#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;
}