/* 페이지 전체에서 공유하는 색상 토큰입니다. 상태와 브랜드 색상을 한곳에서 관리합니다. */
:root {
    --surface: #ffffff;
    --surface-subtle: #f5f7fb;
    --ink: #172033;
    --muted: #687386;
    --line: #dfe4ec;
    --brand: #5b5ce2;
    --brand-dark: #4748c8;
    --success: #16a36a;
    --danger: #c94040;
}

/* 기본 문서 크기와 배경: 패널 밖은 옅은 회색, 실제 기능 영역은 흰색으로 구분합니다. */
html {
    font-size: 14px;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    min-height: 100vh;
    margin: 0;
    background: #eef1f7;
    color: var(--ink);
}

.navbar {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(12px);
}

.navbar-brand {
    font-weight: 800;
    letter-spacing: -0.03em;
}
/* 화면 공유 페이지의 제목, 설명문, 현재 상태 배지 영역입니다. */
.screen-share-page {
    padding: 2.5rem 0 3rem;
}

.page-heading, .panel-heading, .share-controls {
    display: flex;
    align-items: center;
}

.page-heading {
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.75rem;
}

.eyebrow, .panel-label {
    margin: 0 0 0.35rem;
    color: var(--brand);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.page-heading h1 {
    margin: 0;
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 800;
    letter-spacing: -0.055em;
}

.lead-text {
    max-width: 670px;
    margin: 0.6rem 0 0;
    color: var(--muted);
    font-size: 1.04rem;
}

.status-badge {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.status-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: #aab2c0;
}

.status-active {
    border-color: #a9dfc8;
    color: #087c4d;
}

    .status-active .status-dot {
        background: var(--success);
        box-shadow: 0 0 0 4px rgba(22, 163, 106, 0.13);
    }

.status-error {
    border-color: #efc1c1;
    color: var(--danger);
}

    .status-error .status-dot {
        background: var(--danger);
    }

/* HTTPS/API 미지원 같은 실행 불가 사유를 페이지 상단에 표시합니다. */
.compatibility-message {
    margin-bottom: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid #efc1c1;
    border-radius: 12px;
    background: #fff4f4;
    color: #983030;
}

/* LiveKit 방 접속 정보와 현재 참가자 수를 표시합니다. */
.room-panel {
    margin-bottom: 1.25rem;
}

.room-controls {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) auto auto;
    gap: 0.75rem;
    align-items: end;
}

    .room-controls label {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 0.35rem;
        color: var(--muted);
        font-size: 0.76rem;
        font-weight: 700;
    }

    .room-controls input {
        width: 100%;
        min-height: 42px;
        padding: 0.6rem 0.7rem;
        border: 1px solid var(--line);
        border-radius: 9px;
        background: white;
        color: var(--ink);
        font: inherit;
    }

        .room-controls input:focus {
            border-color: var(--brand);
            outline: 3px solid rgba(91, 92, 226, 0.13);
        }

        .room-controls input:disabled {
            background: var(--surface-subtle);
        }

.room-summary {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.8rem;
    color: var(--muted);
    font-size: 0.78rem;
}

#room-status[data-state="connected"] {
    color: var(--success);
    font-weight: 750;
}

#room-status[data-state="error"] {
    color: var(--danger);
    font-weight: 750;
}

.voice-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line);
}

.voice-status {
    color: var(--muted);
    font-size: 0.78rem;
}

    .voice-status.is-active {
        color: var(--success);
        font-weight: 700;
    }

/* 원격 마이크 트랙은 소리만 재생하므로 audio 요소를 화면 밖에 배치합니다. */
.remote-audio-elements {
    position: fixed;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

/* LiveKit 방과 같은 ID를 사용하는 Share 전용 SignalR 채팅입니다. */
.share-chat-panel {
    margin-bottom: 1.25rem;
}

#share-chat-status[data-state="connected"] {
    color: var(--success);
    font-weight: 750;
}

#share-chat-status[data-state="error"] {
    color: var(--danger);
    font-weight: 750;
}

.share-chat-messages {
    display: flex;
    min-height: 160px;
    max-height: 280px;
    margin: 0;
    padding: 0.85rem;
    overflow-y: auto;
    flex-direction: column;
    gap: 0.55rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-subtle);
    list-style: none;
}

.share-chat-message {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.5rem;
    align-items: baseline;
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    background: white;
    overflow-wrap: anywhere;
}

.share-chat-message strong {
    color: var(--brand-dark);
}

.share-chat-message time {
    color: var(--muted);
    font-size: 0.7rem;
}

.share-chat-message.is-system {
    grid-template-columns: 1fr auto;
    color: var(--muted);
    font-size: 0.78rem;
    font-style: italic;
}

.share-chat-empty {
    margin: auto;
    color: var(--muted);
    text-align: center;
}

.share-chat-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
    margin-top: 0.8rem;
}

.share-chat-form input {
    min-width: 0;
    padding: 0.72rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    font: inherit;
}

.share-chat-form input:focus {
    border-color: var(--brand);
    outline: 3px solid rgba(91, 92, 226, 0.13);
}

.share-chat-form input:disabled {
    background: var(--surface-subtle);
}

/* 화면 공유 미리보기와 Unity 수신 화면을 같은 비율의 두 열로 배치합니다. */
.workspace-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

/* 각 기능을 독립된 카드처럼 보이게 하는 공통 패널 스타일입니다. */
.panel {
    min-width: 0;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface);
    box-shadow: 0 18px 50px rgba(35, 43, 67, 0.07);
}

.panel-heading {
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

    .panel-heading h2 {
        margin: 0;
        font-size: 1.12rem;
        font-weight: 750;
    }

.resolution {
    color: var(--muted);
    font-size: 0.78rem;
}

/* 공유할 화면을 보여 주는 어두운 미리보기 무대입니다. */
.preview-stage {
    position: relative;
    display: grid;
    overflow: hidden;
    place-items: center;
    border-radius: 14px;
    background: #111522;
}

.preview-stage {
    min-height: 360px;
    aspect-ratio: 16 / 9;
}

/* 공유 시작 전에는 video를 숨기고, is-sharing 상태에서만 실제 프레임을 표시합니다. */
#screen-share-source {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #090b12;
}

.preview-stage.is-sharing #screen-share-source {
    display: block;
}

.preview-placeholder {
    display: flex;
    max-width: 390px;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    padding: 2rem;
    color: #aeb7ca;
    text-align: center;
}

    .preview-placeholder strong {
        color: #f4f6fb;
    }

.preview-stage.is-sharing .preview-placeholder {
    display: none;
}

.monitor-icon {
    width: 60px;
    height: 40px;
    margin-bottom: 0.5rem;
    border: 3px solid #778197;
    border-radius: 5px;
}

    .monitor-icon span {
        display: block;
        width: 24px;
        margin: 45px auto 0;
        border-top: 3px solid #778197;
    }
/* 화면 공유 시작/중지 및 오디오 선택 컨트롤입니다. */
.share-controls {
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.btn-share {
    padding: 0.72rem 1rem;
    border: 1px solid transparent;
    border-radius: 10px;
    font-weight: 750;
    transition: transform 120ms ease, background-color 120ms ease;
}

    .btn-share:not(:disabled):active {
        transform: translateY(1px);
    }

.btn-share-primary {
    background: var(--brand);
    color: white;
}

    .btn-share-primary:hover:not(:disabled) {
        background: var(--brand-dark);
    }

.btn-share-secondary {
    border-color: var(--line);
    background: white;
    color: var(--ink);
}

.btn-share:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

/* LiveKit 원격 video를 텍스처로 표시하는 Unity WebGL 영역입니다. */
.webgl-host {
    position: relative;
    display: grid;
    min-height: 360px;
    overflow: hidden;
    place-items: center;
    aspect-ratio: 16 / 10;
    border: 1px solid #30384b;
    border-radius: 14px;
    background: #111522;
}

#unity-canvas {
    display: block;
    width: 100%;
    height: 100%;
    background: #090b12;
    object-fit: contain;
}

.unity-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    padding: 2rem;
    background: #111522;
    color: #aeb7ca;
    text-align: center;
}

    .unity-loading strong {
        color: #f4f6fb;
    }

.webgl-host.is-ready .unity-loading {
    display: none;
}

.unity-progress {
    width: min(220px, 70%);
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #30384b;
}

    .unity-progress span {
        display: block;
        width: 0;
        height: 100%;
        border-radius: inherit;
        background: var(--brand);
        transition: width 120ms linear;
    }

.unity-warning {
    position: absolute;
    inset: 0 0 auto;
    z-index: 2;
}

    .unity-warning div {
        padding: 0.65rem 0.8rem;
        background: #ffefad;
        color: #4d3b00;
        font-size: 0.78rem;
    }

    .unity-warning .error {
        background: #b42323;
        color: white;
    }

.unity-fullscreen {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 2;
    padding: 0.45rem 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 8px;
    background: rgba(9, 11, 18, 0.76);
    color: white;
    font-size: 0.75rem;
}

.webgl-mark {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 1px solid #778197;
    border-radius: 12px;
    color: white;
    font-size: 1.25rem;
    font-weight: 900;
}

.security-note {
    margin: 1rem 0 0;
    color: var(--muted);
    font-size: 0.78rem;
}

/* 참가자마다 하나씩 생성되는 원격 WebRTC 영상 카드입니다. */
.remote-panel {
    margin-top: 1.25rem;
}

.remote-streams {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.remote-empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 2rem;
    border: 1px dashed var(--line);
    border-radius: 12px;
    color: var(--muted);
    text-align: center;
}

.remote-stream-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #111522;
}

.remote-stream-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem 0.8rem;
    background: white;
    font-size: 0.78rem;
}

    .remote-stream-header span {
        color: var(--muted);
    }

.remote-stream-card[data-state="active"] .remote-stream-header span {
    color: var(--success);
}

.remote-stream-card[data-state="error"] .remote-stream-header span {
    color: var(--danger);
}

.remote-stream-card.is-speaking {
    border-color: var(--success);
    box-shadow: 0 0 0 3px rgba(22, 163, 106, 0.14);
}

.remote-stream-card video {
    display: none;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #090b12;
    object-fit: contain;
}

.remote-stream-card.has-stream video {
    display: block;
}

.remote-stream-placeholder {
    display: grid;
    min-height: 190px;
    margin: 0;
    place-items: center;
    padding: 1rem;
    color: #aeb7ca;
    text-align: center;
}

.remote-stream-card.has-stream .remote-stream-placeholder {
    display: none;
}

/* 태블릿 이하에서는 방 입력 영역을 두 열로 정리합니다. */
@media (max-width: 991px) {
    .workspace-grid {
        grid-template-columns: 1fr;
    }

    .room-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 작은 모바일 화면에서는 여백과 미리보기 최소 높이를 줄이고 오디오 옵션을 새 줄로 보냅니다. */
@media (max-width: 575px) {
    .screen-share-page {
        padding-top: 1.25rem;
    }

    .page-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .preview-stage {
        min-height: 230px;
    }

    .room-controls, .remote-streams {
        grid-template-columns: 1fr;
    }

    .share-chat-message {
        grid-template-columns: 1fr auto;
    }

    .share-chat-message strong {
        grid-column: 1 / -1;
    }

    .room-summary {
        align-items: flex-start;
        flex-direction: column;
    }
}