/**
 * YouTube Player Widget - Fixed Bottom Right
 * 엔터프라이즈 스타일, 최소한의 애니메이션
 */

/* 플레이어 컨테이너 - header(1000), sticky-cta(999) 아래로 배치 */
.logstack-youtube-player {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 320px;
    height: 180px;
    z-index: 998;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, bottom 0.25s ease;
    pointer-events: none;
}

.logstack-youtube-player.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.logstack-youtube-player.hidden {
    display: none;
}

/* 스티키 CTA 바가 보일 때 플레이어를 CTA 위로 올려 겹침 방지 */
.logstack-youtube-player.logstack-youtube-player--above-cta {
    bottom: 88px;
}

/* 플레이어 래퍼 */
.logstack-youtube-player__wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background: #000;
    cursor: pointer;
}

/* 재생 중: 썸네일·플레이 버튼 숨김 */
.logstack-youtube-player__wrapper.logstack-youtube-player__wrapper--playing .logstack-youtube-player__thumbnail,
.logstack-youtube-player__wrapper.logstack-youtube-player__wrapper--playing .logstack-youtube-player__play-button,
.logstack-youtube-player__wrapper.logstack-youtube-player__wrapper--playing .logstack-youtube-player__link {
    display: none !important;
}

/* 임베드 iframe (클릭 시 삽입, 자동재생) */
.logstack-youtube-player__embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 12px;
    display: none;
}
.logstack-youtube-player__wrapper.logstack-youtube-player__wrapper--playing .logstack-youtube-player__embed {
    display: block;
}

.logstack-youtube-player__wrapper.logstack-youtube-player__wrapper--playing {
    cursor: default;
}

/* 썸네일 이미지 */
.logstack-youtube-player__thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.2s ease;
}

.logstack-youtube-player__wrapper:hover .logstack-youtube-player__thumbnail {
    opacity: 0.9;
}

/* 플레이 버튼 오버레이 */
.logstack-youtube-player__play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background: rgba(255, 0, 0, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background 0.2s ease;
    pointer-events: none;
}

.logstack-youtube-player__wrapper:hover .logstack-youtube-player__play-button {
    transform: translate(-50%, -50%) scale(1.1);
    background: rgba(255, 0, 0, 1);
}

.logstack-youtube-player__play-icon {
    width: 0;
    height: 0;
    border-left: 20px solid #fff;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    margin-left: 4px;
}

/* 링크 (접근성) */
.logstack-youtube-player__link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-indent: -9999px;
    overflow: hidden;
    z-index: 1;
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .logstack-youtube-player {
        width: 240px;
        height: 135px;
        bottom: 16px;
        right: 16px;
    }

    .logstack-youtube-player.logstack-youtube-player--above-cta {
        bottom: 76px;
    }

    .logstack-youtube-player__play-button {
        width: 48px;
        height: 48px;
    }

    .logstack-youtube-player__play-icon {
        border-left-width: 16px;
        border-top-width: 10px;
        border-bottom-width: 10px;
        margin-left: 3px;
    }

}

/* 태블릿 대응 */
@media (min-width: 769px) and (max-width: 1024px) {
    .logstack-youtube-player {
        width: 280px;
        height: 157.5px;
    }
}

/* 작은 모바일 대응 */
@media (max-width: 480px) {
    .logstack-youtube-player {
        width: calc(100vw - 32px);
        max-width: 240px;
        right: 16px;
        left: auto;
    }
}

/* 접근성: 포커스 스타일 */
.logstack-youtube-player__link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
}

/* 인쇄 시 숨김 */
@media print {
    .logstack-youtube-player {
        display: none !important;
    }
}