/**
 * Joyn LMS — Gumlet HLS 커스텀 플레이어 UI
 * ============================================================
 * 파일 경로: joyn-lms/assets/css/joyn-lms-gumlet.css
 * ============================================================
 */

/* ── 플레이어 래퍼 ──────────────────────────────────────── */
.jg-player {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    cursor: none; /* 컨트롤 숨길 때 커서도 숨김 */
}
.jg-player.jg-active { cursor: default; }

/* ── 비디오 엘리먼트 ──────────────────────────────────── */
#joyn-gumlet-video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: #000;
}
/* 네이티브 컨트롤 완전 제거 */
#joyn-gumlet-video::-webkit-media-controls { display: none !important; }
#joyn-gumlet-video::-webkit-media-controls-enclosure { display: none !important; }
#joyn-gumlet-video::-moz-media-controls { display: none !important; }
#joyn-gumlet-video::--internal-media-controls-download-button { display: none !important; }

/* ── 클릭 투명 레이어 ────────────────────────────────── */
.jg-click {
    position: absolute;
    inset: 0;
    z-index: 10;
    cursor: default;
}

/* ── 중앙 재생 아이콘 (클릭 피드백) ─────────────────── */
.jg-center-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 64px;
    height: 64px;
    background: rgba(255,255,255,.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    pointer-events: none;
    z-index: 20;
    transition: transform 0s, opacity 0.4s;
    opacity: 0;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.jg-center-icon svg { width: 28px; height: 28px; }
.jg-center-icon.jg-pulse {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    transition: transform 0.15s cubic-bezier(.2,.8,.4,1), opacity 0s;
}
.jg-center-icon.jg-pulse-out {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}

/* ── 컨트롤 UI (하단 그라디언트 + 시크바 + 바) ─────── */
.jg-ui {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 15;
    background: linear-gradient(transparent, rgba(0,0,0,.75) 60%, rgba(0,0,0,.9));
    padding: 32px 0 0;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}
.jg-player.jg-active .jg-ui {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* 10초 스킵: Material replay_10 / forward_10 스타일(원형 화살표+10) — 재생 버튼보다 아이콘 확대 */
.jg-btn.jg-btn-skip {
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0;
}
.jg-btn.jg-btn-skip .jg-icon-skip {
    width: 32px;
    height: 32px;
    display: block;
    flex-shrink: 0;
}

/* ── 시크바 ──────────────────────────────────────────── */
.jg-seek-wrap {
    position: relative;
    height: 16px;
    margin: 0 12px;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.jg-seek-track {
    position: relative;
    width: 100%;
    height: 3px;
    background: rgba(255,255,255,.25);
    border-radius: 3px;
    overflow: hidden;
    transition: height 0.15s;
}
.jg-seek-wrap:hover .jg-seek-track { height: 5px; }
.jg-seek-buf {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: rgba(255,255,255,.35);
    border-radius: 3px;
    width: 0;
}
.jg-seek-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: #4f8ef7;
    border-radius: 3px;
    width: 0;
    transition: width 0.1s linear;
}
.jg-seek-thumb {
    position: absolute;
    width: 13px;
    height: 13px;
    background: #fff;
    border-radius: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.15s;
    pointer-events: none;
    box-shadow: 0 1px 4px rgba(0,0,0,.5);
    left: 0;
    z-index: 2;
}
.jg-seek-wrap:hover .jg-seek-thumb,
.jg-seek-wrap.jg-dragging .jg-seek-thumb { transform: translate(-50%, -50%) scale(1); }
.jg-seek-wrap.jg-dragging .jg-seek-track { height: 5px; }
.jg-seek-wrap.jg-dragging .jg-seek-fill { transition: none; }

/* ── 컨트롤 바 ───────────────────────────────────────── */
.jg-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px 8px;
    gap: 4px;
}
.jg-bar-l, .jg-bar-r {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* ── 버튼 공통 ───────────────────────────────────────── */
.jg-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.12s;
}
.jg-btn:hover { background: rgba(255,255,255,.12); }
.jg-btn:active { background: rgba(255,255,255,.2); }
.jg-btn--disabled {
    opacity: 0.3;
    pointer-events: none;
}
.jg-icon {
    width: 20px;
    height: 20px;
    display: block;
    flex-shrink: 0;
}

/* ── Bunny 다국어 자막(CC) ───────────────────────────── */
.jg-caption-group {
    position: relative;
    display: flex;
    align-items: center;
}
.jg-caption-btn.is-active {
    color: #fff !important;
    background: rgba(79, 70, 229, .9) !important;
}
.jg-caption-btn.jg-btn--disabled {
    opacity: .34;
    cursor: not-allowed;
}
.jg-caption-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 60;
    min-width: 160px;
    max-height: min(310px, 55vh);
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    list-style: none;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    background: rgba(17,18,24,.97);
    box-shadow: 0 14px 34px rgba(0,0,0,.42);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.jg-caption-menu[hidden] { display: none !important; }
.jg-caption-menu li {
    position: relative;
    min-height: 38px;
    padding: 9px 34px 9px 12px;
    border-radius: 8px;
    color: rgba(255,255,255,.82);
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
    cursor: pointer;
}
.jg-caption-menu li:hover { background: rgba(255,255,255,.09); color: #fff; }
.jg-caption-menu li.is-active { background: rgba(79,70,229,.25); color: #fff; font-weight: 700; }
.jg-caption-menu li.is-active::after { content: "✓"; position: absolute; right: 12px; color: #8f88ff; }
#joyn-gumlet-video::cue {
    color: #fff;
    background: rgba(0,0,0,.92);
    font-size: 1.05em;
    line-height: 1.45;
    text-shadow: 0 1px 2px rgba(0,0,0,.9);
}
.jg-custom-captions {
    position: absolute;
    left: 50%;
    bottom: 30px;
    z-index: 14;
    display: block;
    width: max-content;
    max-width: 92%;
    padding: 3px 8px;
    transform: translateX(-50%);
    border: 0;
    border-radius: 3px;
    background: rgba(0,0,0,.85);
    color: #fff;
    font-size: clamp(18px, 1.7vw, 24px);
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    text-shadow: 0 1px 1px #000;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    pointer-events: none;
    box-shadow: none;
}
.jg-custom-captions[hidden] { display: none !important; }

/* 재생/일시정지 아이콘 상태 */
#joyn-gumlet-video:not([data-playing]) ~ .jg-ui .jg-icon-pause,
.jg-icon-pause { display: none; }
.jg-player.jg-playing .jg-icon-play  { display: none; }
.jg-player.jg-playing .jg-icon-pause { display: block; }

/* 전체화면 아이콘 상태 */
.jg-player.jg-fullscreen .jg-icon-fs      { display: none; }
.jg-player.jg-fullscreen .jg-icon-exit-fs { display: block; }

/* ── 시간 표시 ───────────────────────────────────────── */
.jg-time {
    font-size: 12px;
    color: rgba(255,255,255,.85);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.3px;
    white-space: nowrap;
    padding: 0 6px;
    line-height: 1;
}

/* ── 볼륨 그룹 ───────────────────────────────────────── */
.jg-vol-group {
    display: flex;
    align-items: center;
    gap: 0;
}
.jg-vol-bar {
    width: 0;
    overflow: hidden;
    transition: width 0.2s ease;
    display: flex;
    align-items: center;
}
.jg-vol-group:hover .jg-vol-bar,
.jg-vol-group:focus-within .jg-vol-bar { width: 60px; }
.jg-vol-track {
    position: relative;
    width: 52px;
    height: 3px;
    background: rgba(255,255,255,.25);
    border-radius: 3px;
    cursor: pointer;
    margin-right: 8px;
    flex-shrink: 0;
}
.jg-vol-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: #fff;
    border-radius: 3px;
}

/* ── 배속 그룹 ───────────────────────────────────────── */
.jg-speed-group {
    position: relative;
}
.jg-speed-btn {
    width: auto !important;
    padding: 0 8px !important;
    font-size: 12px !important;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: rgba(255,255,255,.85) !important;
    border-radius: 4px;
}
.jg-speed-menu {
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    background: rgba(20,20,20,.95);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    list-style: none;
    margin: 0;
    padding: 4px 0;
    min-width: 80px;
    box-shadow: 0 4px 20px rgba(0,0,0,.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 50;
    overflow: hidden;
}
.jg-speed-menu li {
    padding: 8px 16px;
    font-size: 13px;
    color: rgba(255,255,255,.75);
    cursor: pointer;
    text-align: center;
    transition: background 0.1s, color 0.1s;
}
.jg-speed-menu li:hover { background: rgba(255,255,255,.08); color: #fff; }
.jg-speed-menu li.is-active { color: #4f8ef7; font-weight: 700; }

/* ── 시청 진도 바 (플레이어 하단 외부) ──────────────── */
.joyn-gumlet-progress {
    margin: 10px 0 16px;
    padding: 0 2px;
}
.joyn-gumlet-progress__track {
    position: relative;
    height: 5px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: visible;
}
.joyn-gumlet-progress__fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    border-radius: 3px;
    width: 0;
    transition: width 0.5s ease;
}
.joyn-gumlet-progress__fill--complete {
    background: linear-gradient(90deg, #22c55e, #4ade80);
}
.joyn-gumlet-progress__marker {
    position: absolute;
    top: -3px;
    width: 2px;
    height: 11px;
    background: #ef4444;
    border-radius: 1px;
    z-index: 2;
    cursor: help;
}
.joyn-gumlet-progress__marker::after {
    content: attr(title);
    display: none;
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: #1f2937;
    color: #fff;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
}
.joyn-gumlet-progress__marker:hover::after { display: block; }
.joyn-gumlet-progress__info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
    font-size: 12px;
    color: #6b7280;
}
.joyn-gumlet-progress__text { font-weight: 600; color: #374151; }
.joyn-gumlet-progress__required { font-size: 11px; color: #ef4444; opacity: .8; }

/* ── 이어보기 토스트 ─────────────────────────────────── */
.joyn-gumlet-resume {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #eff6ff, #f0fdf4);
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    margin: 10px 0;
    font-size: 13px;
    color: #374151;
    animation: jgSlideIn 0.3s ease;
}
.joyn-gumlet-resume span { flex: 1; }
@keyframes jgSlideIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── 잠금 버튼 ───────────────────────────────────────── */
.joyn-btn--locked { opacity: .55; cursor: not-allowed !important; }
.joyn-lock-icon { display: inline-block; vertical-align: middle; margin-right: 4px; }

/* ── 어드민: Gumlet 비디오 선택 ─────────────────────── */
.joyn-gumlet-search-wrap { margin-top: 8px; }
.joyn-gumlet-search-input { width: 100%; padding: 6px 10px; border: 1px solid #d0d5dd; border-radius: 6px; font-size: 13px; }
.joyn-gumlet-video-list { max-height: 300px; overflow-y: auto; margin-top: 8px; border: 1px solid #e5e7eb; border-radius: 6px; }
.joyn-gumlet-video-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #f3f4f6; cursor: pointer; transition: background 0.15s; }
.joyn-gumlet-video-item:last-child { border-bottom: none; }
.joyn-gumlet-video-item:hover { background: #f9fafb; }
.joyn-gumlet-video-item.selected { background: #eff6ff; border-left: 3px solid #3b82f6; }
.joyn-gumlet-video-item__thumb { width: 80px; height: 45px; object-fit: cover; border-radius: 4px; background: #1f2937; flex-shrink: 0; }
.joyn-gumlet-video-item__info { flex: 1; min-width: 0; }
.joyn-gumlet-video-item__title { font-size: 13px; font-weight: 500; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.joyn-gumlet-video-item__meta { font-size: 11px; color: #9ca3af; margin-top: 2px; }
.joyn-gumlet-selected-video { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 6px; margin-top: 8px; }
.joyn-gumlet-selected-video__title { font-weight: 500; color: #166534; flex: 1; }
.joyn-gumlet-selected-video__remove { color: #dc2626; cursor: pointer; font-size: 18px; line-height: 1; padding: 0 4px; }

/* ── 반응형 ──────────────────────────────────────────── */
@media (max-width: 480px) {
    .jg-vol-group:hover .jg-vol-bar,
    .jg-vol-group:focus-within .jg-vol-bar { width: 0; } /* 모바일 볼륨 슬라이더 숨김 */
    .jg-time { font-size: 11px; padding: 0 4px; }
    .jg-speed-btn { padding: 0 5px !important; }
    .jg-btn { width: 32px; height: 32px; }
    .jg-icon { width: 18px; height: 18px; }
    .jg-btn.jg-btn-skip {
        width: 36px;
        min-width: 36px;
        height: 36px;
    }
    .jg-btn.jg-btn-skip .jg-icon-skip {
        width: 28px;
        height: 28px;
    }
}

/* 모바일: 자막 언어 메뉴를 영상 안에 유지하고 자막 배경의 가독성을 높임 */
@media (max-width: 900px) {
    .jg-caption-menu {
        right: -6px;
        width: min(184px, calc(100vw - 32px));
        min-width: 0;
        max-height: min(190px, calc(100dvh - 170px));
        padding: 4px;
        border-radius: 8px;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }
    .jg-caption-menu li {
        min-height: 34px;
        padding: 7px 30px 7px 10px;
        border-radius: 5px;
        font-size: 14px;
        line-height: 20px;
    }
    .jg-caption-menu li.is-active::after { right: 10px; }
    #joyn-gumlet-video::cue {
        background: rgba(0,0,0,.985);
        border-radius: 0 !important;
        text-shadow: 0 1px 2px #000;
    }
    .jg-custom-captions {
        position: absolute;
        left: 50%;
        bottom: 14px;
        z-index: 14;
        display: block;
        width: max-content;
        max-width: 94%;
        padding: 2px 6px;
        transform: translateX(-50%);
        border: 0;
        border-radius: 3px;
        background: rgba(0,0,0,.85);
        color: #fff;
        font-size: clamp(15px, 3.6vw, 17px);
        font-weight: 500;
        line-height: 1.3;
        letter-spacing: 0;
        text-align: center;
        text-shadow: 0 1px 1px #000;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        pointer-events: none;
        box-shadow: none;
    }
    .jg-custom-captions[hidden] { display: none !important; }
    .jg-speed-menu {
        right: -4px;
        width: 88px;
        min-width: 88px;
        max-height: min(184px, calc(100dvh - 170px));
        padding: 3px;
        overflow-x: hidden;
        overflow-y: auto;
        border-radius: 7px;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }
    .jg-speed-menu li {
        min-height: 29px;
        padding: 5px 8px;
        border-radius: 4px;
        font-size: 14px;
        line-height: 19px;
    }
}

/* ── Gumlet HLS 플레이어 사용 시 구형 컨트롤 완전 숨김 ──
   PHP 조건과 무관하게 CSS 레벨에서 이중 차단.
   .jg-player 가 DOM에 존재하면 .joyn-lv-video-area 내
   구형 요소들을 모두 display:none 처리 ─────────────────── */
#joyn-gumlet-player-wrap ~ .joyn-lv-vid-timer,
#joyn-gumlet-player-wrap ~ .joyn-lv-vid-progress,
#joyn-gumlet-player-wrap ~ .joyn-lv-vid-controls,
.joyn-lv-video-area:has(.jg-player) .joyn-lv-vid-timer,
.joyn-lv-video-area:has(.jg-player) .joyn-lv-vid-progress,
.joyn-lv-video-area:has(.jg-player) .joyn-lv-vid-controls,
.joyn-lv-video-area:has(.jg-player) .joyn-lv-speed-btn {
    display: none !important;
}

/* ── autoplay 거부 시 중앙 플레이 버튼 (다음 강의 버튼과 동일한 파란 배경 + 흰색 아이콘) ─────────────────── */
#jg-play-overlay.jg-play-prompt,
.jg-play-prompt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: var(--joyn-lv-p, #4541FF);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    z-index: 30;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.jg-play-prompt:hover {
    background: color-mix(in srgb, var(--joyn-lv-p, #4541FF) 85%, white);
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow: 0 4px 20px rgba(69, 65, 255, 0.45);
}
#jg-play-overlay.jg-play-prompt svg,
.jg-play-prompt svg {
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    flex-shrink: 0; /* 플렉스에서 축소 방지 — 레슨 시작 시 아이콘이 점처럼 보이는 현상 방지 */
    margin-left: 6px; /* 삼각형 시각 중앙 보정 */
}

/* ── HLS 초기 로딩 스피너 ─────────────────────────────── */
.jg-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.5);
    z-index: 25;
    pointer-events: none;
}
.jg-loading svg {
    width: 48px;
    height: 48px;
    animation: jgSpin 0.9s linear infinite;
}
@keyframes jgSpin { to { transform: rotate(360deg); } }