/*
Theme Name: MBService Remote Theme
Theme URI: https://mbservice.store
Author: MBService Team
Description: React(TypeScript) 기반 원격 제어 솔루션을 WordPress로 이식한 고성능 테마
Version: 1.0.0
License: GNU GPLv2 or later
Text Domain: mbs-remote
*/

/* ==========================================================================
   1. 기본 초기화 및 변수
   ========================================================================== */
:root {
    --mbs-blue-primary: #2563eb;
    --mbs-blue-hover: #1d4ed8;
    --mbs-slate-900: #0f172a;
    --mbs-slate-800: #1e293b;
    --mbs-slate-50: #f8fafc;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   2. 원격 제어 비디오 캔버스 (Host/Client View 핵심)
   ========================================================================== */
#remote-video-container {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#remote-video {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 리액트의 object-contain 대응 */
    transition: transform 0.2s ease;
}

/* 마우스 커서 숨김 처리 (제어 중일 때) */
.is-controlling #remote-video {
    cursor: none;
}

/* ==========================================================================
   3. 채팅 및 패널 애니메이션 (ChatPanel.tsx 대응)
   ========================================================================== */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #cbd5e1;
}

/* 탭 활성화 스타일 */
.active-tab-style {
    background-color: white;
    color: var(--mbs-blue-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.inactive-tab-style {
    color: #64748b;
}

.inactive-tab-style:hover {
    color: #334155;
}

/* ==========================================================================
   4. 툴바 및 모달 특수 효과 (RemoteToolbar.tsx & Modals)
   ========================================================================== */
#remote-toolbar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#remote-toolbar:hover {
    bottom: 28px;
    background-color: rgba(255, 255, 255, 0.95);
}

/* 드롭다운 메뉴 애니메이션 */
.animate-in {
    animation: mbs-fade-in 0.2s ease-out;
}

@keyframes mbs-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   5. 대시보드 및 카드 스타일 (Pricing.tsx / Features.tsx)
   ========================================================================== */
.pricing-card {
    transition: all 0.3s ease;
}

.pricing-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* ==========================================================================
   6. 모바일 대응 (Responsive)
   ========================================================================== */
@media (max-width: 768px) {
    #remote-toolbar {
        width: 90%;
        bottom: 12px;
        padding: 8px;
    }
    
    .toolbar-btn span {
        display: none; /* 모바일에서는 아이콘만 표시 */
    }
}