/* 로미위키 우측 사이드바 랜덤 유튜브 위젯
   v5: 최근 변경 박스 폭 고정 + 16:10 비율 + 전체 플레이리스트 수집 개선 */
.lomi-youtube-sidebar-card {
    display: none;
}

@media (min-width: 1024px) {
    .lomi-youtube-sidebar-card {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-top: 0.75rem;
        border: 1px solid #e1e8ed;
        border-radius: 0.35rem;
        overflow: hidden;
        background: #fff;
        box-sizing: border-box;
        contain: layout paint;
    }

    .lomi-youtube-sidebar-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0.55rem 0.7rem;
        border-bottom: 1px solid #e1e8ed;
        background: #f5f8fa;
        font-size: 0.92rem;
        line-height: 1.2;
        box-sizing: border-box;
    }

    .lomi-youtube-sidebar-head strong {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .lomi-youtube-sidebar-reroll {
        flex: 0 0 auto;
        width: 1.75rem;
        height: 1.75rem;
        border: 1px solid #d6dee6;
        border-radius: 0.25rem;
        background: #fff;
        color: #444;
        font-size: 1rem;
        line-height: 1;
        cursor: pointer;
    }

    .lomi-youtube-sidebar-reroll:hover,
    .lomi-youtube-sidebar-reroll:focus {
        background: #eef4fb;
        outline: none;
    }

    .lomi-youtube-sidebar-player-wrap {
        position: relative;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        aspect-ratio: 16 / 10;
        background: #111;
        overflow: hidden;
        box-sizing: border-box;
    }

    .lomi-youtube-sidebar-player-wrap .lomi-youtube-sidebar-iframe,
    .lomi-youtube-sidebar-player-wrap iframe {
        position: absolute;
        inset: 0;
        display: block;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        border: 0;
    }

    .lomi-youtube-sidebar-loading {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        color: #ddd;
        font-size: 0.86rem;
        text-align: center;
        box-sizing: border-box;
    }

    .lomi-youtube-sidebar-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0.45rem 0.7rem;
        border-top: 1px solid #e1e8ed;
        font-size: 0.78rem;
        color: #6b7280;
        background: #fff;
        box-sizing: border-box;
    }

    .lomi-youtube-sidebar-foot a {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .lomi-youtube-sidebar-links {
        display: flex;
        align-items: center;
        gap: 0.45rem;
        flex: 0 0 auto;
    }

    .lomi-youtube-sidebar-current-link[hidden] {
        display: none !important;
    }

    .lomi-youtube-sidebar-status {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .lomi-youtube-sidebar-direct-link {
        position: absolute;
        right: 0.4rem;
        bottom: 0.35rem;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.16rem 0.38rem;
        border-radius: 0.25rem;
        background: rgba(0, 0, 0, 0.64);
        color: #fff !important;
        font-size: 0.72rem;
        line-height: 1.2;
        text-decoration: none !important;
    }

    .lomi-youtube-sidebar-direct-link:hover,
    .lomi-youtube-sidebar-direct-link:focus {
        background: rgba(0, 0, 0, 0.82);
        color: #fff !important;
    }

    body.theseed-dark-mode .lomi-youtube-sidebar-card {
        border-color: #777;
        background: #000;
    }

    body.theseed-dark-mode .lomi-youtube-sidebar-head,
    body.theseed-dark-mode .lomi-youtube-sidebar-foot {
        border-color: #777;
        background: #000;
        color: #ddd;
    }

    body.theseed-dark-mode .lomi-youtube-sidebar-reroll {
        border-color: #777;
        background: #16171a;
        color: #ddd;
    }

    body.theseed-dark-mode .lomi-youtube-sidebar-reroll:hover,
    body.theseed-dark-mode .lomi-youtube-sidebar-reroll:focus {
        background: #383b40;
    }
}