/*
 * GAININTER_YOUTUBE_CLICK_TO_LOAD_V1
 * YouTube iframe을 실제 재생 전까지 가벼운 썸네일 버튼으로 표시한다.
 */

.gain-youtube-lite{
    position:relative;
    display:block;
    width:100%;
    min-height:100%;
    aspect-ratio:16 / 9;
    margin:0;
    padding:0;
    overflow:hidden;
    border:0;
    background:#101214;
    color:#fff;
    cursor:pointer;
    font:inherit;
    text-align:center;
    -webkit-tap-highlight-color:transparent;
}

.video-frame > .gain-youtube-lite,
.document-video-frame > .gain-youtube-lite{
    height:100%;
    aspect-ratio:auto;
}

.gain-youtube-lite-thumb{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.gain-youtube-lite-shade{
    position:absolute;
    inset:0;
    background:linear-gradient(to bottom,rgba(0,0,0,.06),rgba(0,0,0,.28));
    pointer-events:none;
}

.gain-youtube-lite-play{
    position:absolute;
    left:50%;
    top:50%;
    width:68px;
    height:68px;
    transform:translate(-50%,-50%);
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:rgba(255,255,255,.96);
    box-shadow:0 2px 10px rgba(0,0,0,.18);
    pointer-events:none;
}

.gain-youtube-lite-play span{
    display:block;
    width:0;
    height:0;
    margin-left:5px;
    border-top:11px solid transparent;
    border-bottom:11px solid transparent;
    border-left:18px solid #17202a;
}

.gain-youtube-lite-label{
    position:absolute;
    left:50%;
    bottom:20px;
    transform:translateX(-50%);
    padding:7px 12px;
    border-radius:999px;
    background:rgba(16,18,20,.78);
    color:#fff;
    font-size:14px;
    line-height:1.2;
    font-weight:800;
    white-space:nowrap;
    pointer-events:none;
}

.gain-youtube-lite:hover .gain-youtube-lite-play{
    background:#fff;
}

.gain-youtube-lite:focus-visible{
    outline:3px solid #155eef;
    outline-offset:-3px;
}

.gain-youtube-lite-template{
    display:none !important;
}

.gain-youtube-lite-noscript{
    margin:10px 0;
}

@media(max-width:560px){
    .gain-youtube-lite-play{
        width:58px;
        height:58px;
    }
    .gain-youtube-lite-play span{
        border-top-width:9px;
        border-bottom-width:9px;
        border-left-width:15px;
    }
    .gain-youtube-lite-label{
        bottom:14px;
        font-size:13px;
    }
}