/* 플로팅 비디오 컴포넌트 스타일 */

/* 플로팅 비디오 메인 컨테이너 */
.floating-video-container {
    position: fixed;           /* 고정 위치 */
    top: 20px;                /* 하단에서 20px */
    left: 20px;               /* 우측에서 20px */
    width: 480px;             /* 기본 너비 */
    height: 320px;            /* 기본 높이 */
    background: #000;         /* 검은색 배경 */
    border-radius: 8px;       /* 모서리 둥글게 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);  /* 그림자 효과 */
    z-index: 1000;           /* 다른 요소 위에 표시 */
    overflow: hidden;         /* 넘치는 내용 숨김 */
    resize: none;            /* 기본 크기 조정 비활성화 */
    min-width: 200px;        /* 최소 너비 */
    min-height: 150px;       /* 최소 높이 */
    max-width: 80vw;         /* 최대 너비 (화면의 80%) */
    max-height: 80vh;        /* 최대 높이 (화면의 80%) */
}

/* 드래그 중일 때의 스타일 */
.floating-video-container.dragging {
    user-select: none;       /* 텍스트 선택 방지 */
    cursor: grabbing;        /* 잡는 중 커서 */
}

/* 플로팅 비디오 헤더 영역 */
.floating-video-header {
    position: absolute;       /* 절대 위치 */
    top: 0;                   /* 상단에 위치 */
    left: 0;                  /* 좌측에 위치 */
    right: 0;                 /* 우측까지 확장 */
    height: 40px;             /* 헤더 높이 증가 */
    /* 그라데이션 배경 */
    /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
    background: var(--color-blue-01);
    display: flex;            /* 플렉스 레이아웃 */
    justify-content: space-between;  /* 양끝 정렬 */
    align-items: center;      /* 세로 중앙 정렬 */
    cursor: grab;             /* 잡기 커서 */
    z-index: 1001;           /* 비디오보다 위에 표시 */
    border-radius: 8px 8px 0 0;  /* 상단 모서리만 둥글게 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  /* 하단 그림자 */
    padding-left: 12px;
    padding-right: 12px;
}

/* 헤더 활성화 상태 (클릭 중) */
.floating-video-header:active {
    cursor: grabbing;         /* 잡는 중 커서 */
}

/* 비디오 제목 텍스트 */
.floating-video-title {
    color: white;             /* 흰색 텍스트 */
    font-size: 14px;          /* 폰트 크기 증가 */
    font-weight: 600;         /* 폰트 굵기 증가 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);  /* 텍스트 그림자 */
}

/* 컨트롤 버튼 컨테이너 */
.floating-video-controls {
    display: flex;            /* 플렉스 레이아웃 */
    gap: 5px;                /* 버튼 간 간격 */
}

/* 컨트롤 버튼 기본 스타일 */
.floating-video-btn {
    width: 28px;              /* 버튼 너비 증가 */
    height: 28px;             /* 버튼 높이 증가 */
    border: none;             /* 테두리 없음 */
    border-radius: 6px;       /* 모서리 더 둥글게 */
    cursor: pointer;          /* 포인터 커서 */
    font-size: 28px;          /* 폰트 크기 증가 */
    display: flex;            /* 플렉스 레이아웃 */
    align-items: center;      /* 세로 중앙 정렬 */
    justify-content: center;  /* 가로 중앙 정렬 */
    transition: all 0.2s ease;  /* 모든 속성 전환 효과 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);  /* 버튼 그림자 */
}

/* 최소화 버튼 스타일 */
.floating-video-minimize {
    background-color: white;  /* 노란색 배경 */
    color: var(--color-blue-01);                /* 검은색 텍스트 */
}

/* 닫기 버튼 스타일 */
.floating-video-close {
    background-color: white;  /* 빨간색 배경 */
    color: var(--color-blue-01);               /* 흰색 텍스트 */
}


/* 비디오 콘텐츠 영역 */
.floating-video-content {
    width: 100%;             /* 전체 너비 */
    height: calc(100% - 40px); /* 전체 높이에서 헤더 높이 제외 (40px로 변경) */
    position: relative;       /* 상대적 위치 */
    top: 40px;               /* 헤더 높이만큼 아래로 이동 (40px로 변경) */
    background: #000;        /* 검은색 배경 */
    padding: 0;              /* 패딩 제거 */
}

/* 비디오 요소 스타일 */
.floating-video-content video {
    width: 100%;             /* 전체 너비 사용 (패딩 제거) */
    height: 100%;            /* 전체 높이 사용 (패딩 제거) */
    object-fit: contain;      /* 비율 유지하며 맞춤 */
    background: #000;         /* 검은색 배경 */
    border-radius: 0;         /* 비디오 모서리 둥글게 제거 */
}

/* 최소화된 상태의 컨테이너 */
.floating-video-container.minimized {
    height: 40px;             /* 헤더 높이만 남김 (40px로 변경) */
    min-height: 40px;         /* 최소 높이도 40px로 변경 */
    resize: none;             /* 크기 조정 비활성화 */
}

/* 최소화된 상태에서 콘텐츠 숨김 */
.floating-video-container.minimized .floating-video-content {
    display: none;            /* 비디오 영역 숨김 */
}

/* 최소화 상태에서 복원 버튼 스타일 */
.floating-video-container.minimized .floating-video-minimize {
    background-color: #28a745;  /* 녹색 배경 */
}

/* 최소화 상태에서 복원 버튼 호버 효과 */
.floating-video-container.minimized .floating-video-minimize:hover {
    background-color: #34ce57;  /* 밝은 녹색 */
    transform: scale(1.05);     /* 살짝 확대 효과 */
}

/* 커스텀 크기 조정 핸들 */
.floating-video-resize-handle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background: var(--color-blue-01);
    opacity: 0.5;
    cursor: nw-resize;
    z-index: 1002;
    border-radius: 0 0 8px 0;
}

.floating-video-resize-handle:hover {
    opacity: 1;
}

.floating-video-resize-handle::before {
    content: '';
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-bottom: 8px solid rgba(255, 255, 255, 0.8);
}

/* 기본 크기 조정 핸들 숨김 (WebKit 기반 브라우저) */
.floating-video-container::-webkit-resizer {
    display: none;
}

/* 모바일 반응형 디자인 */
@media (max-width: 768px) {
    .floating-video-container {
        width: 280px;         /* 모바일에서 너비 증가 */
        height: 200px;        /* 모바일에서 높이 증가 */
        bottom: 10px;         /* 하단 여백 줄임 */
        right: 10px;          /* 우측 여백 줄임 */
    }
    
    .floating-video-header {
        height: 45px;         /* 모바일에서 헤더 높이 증가 */
        padding: 0 12px;      /* 패딩 조정 */
    }
    
    .floating-video-btn {
        width: 32px;          /* 모바일에서 버튼 크기 증가 */
        height: 32px;         /* 모바일에서 버튼 크기 증가 */
        font-size: 20px;      /* 모바일에서 폰트 크기 증가 */
    }
    
    .floating-video-content {
        height: calc(100% - 45px); /* 모바일 헤더 높이에 맞춘 조정 */
        top: 45px;                 /* 모바일 헤더 높이에 맞춘 조정 */
        padding: 0;                /* 모바일에서도 패딩 제거 */
    }
}