.video_lightbox[data-v-5fe68ed8] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.92);
    /* 모바일 하단 고정 네비바(#footer .foot_fix_menu z-index:300)·GNB 위로 확실히 덮음 */
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}
/* 가로(인터뷰)는 세로 스택 — 상단바(닫기·네비)가 영상 위, 제목이 영상 아래로 쌓이게. */
.video_lightbox.vlb-landscape[data-v-5fe68ed8] {
    flex-direction: column;
}
/* stage + peek 세로 묶음 — 유튜브 쇼츠처럼 현재 영상 박스 아래 다음 영상 박스가 gap 두고 분리.
   center 정렬, viewport 안에 stage+gap+peek 가 들어가도록 stage 높이를 아래에서 줄임. */
.video_lightbox .vlb_feed[data-v-5fe68ed8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
/* 가로(인터뷰) 16:9 — PC 더 크게(가용 높이 채움). */
.video_lightbox .vlb_stage[data-v-5fe68ed8] {
    position: relative;
    width: min(94vw, 1320px);   /* PC 가로(인터뷰) 거의 꽉 — 양옆 여백 축소 (16:9 라 height 따라옴) */
    max-height: 86vh;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
    border-radius: 12px;
}
/* YouTube Player(div→iframe) — stage 채움. */
.video_lightbox .vlb_player[data-v-5fe68ed8] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 12px;
}
/* YT API 가 만든 iframe 은 Vue scoped data 속성이 없어 .vlb_player scoped 룰이 안 먹음 →
   stage 직속 iframe 을 :deep 으로 강제로 stage 꽉 채움(영상 아래·우측 검은 여백 방지). */
.video_lightbox .vlb_stage[data-v-5fe68ed8] iframe {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0;
    border-radius: 12px;
}

/* ── 영상 위 전면 제스처 레이어 — 위아래 스와이프(전환·최우선) + 탭(재생/일시정지) ──
   iframe 위(z 1) / 커스텀 컨트롤(타임라인 z 4·소리 z 4)보다 아래. 영상 위 전부 덮음(가로·세로). */
.video_lightbox .vlb_gesture[data-v-5fe68ed8] {
    position: absolute;
    inset: 0;
    z-index: 1;
    cursor: pointer;
    /* 투명 — 영상이 그대로 보이되 터치·클릭은 우리가 받음. native 스크롤·줌 차단(전환 제스처 충돌 방지). */
    touch-action: none;
    background: transparent;
}

/* (센터 재생/일시정지 아이콘 스타일 제거 — 유튜브 자체 일시정지 화면과 중복되어 표시 안 함.) */

/* ── 소리 버튼 (좌상단, 작게) ── */
.video_lightbox .vlb_sound_btn[data-v-5fe68ed8] {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 38px;
    height: 38px;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
}
.video_lightbox .vlb_sound_btn[data-v-5fe68ed8]:hover { background: rgba(0, 0, 0, 0.7);
}
.video_lightbox .vlb_sound_btn svg[data-v-5fe68ed8] { display: block;
}

/* ── 하단 커스텀 컨트롤 (타임라인 seek + 시간) — 제스처 레이어보다 위 z 4 라 seek 가 스와이프에 안 먹힘 ── */
.video_lightbox .vlb_controls[data-v-5fe68ed8] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    padding: 8px 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
    pointer-events: none; /* 컨테이너는 통과 — 자식 타임라인만 받음(여백 클릭은 제스처로) */
}
/* 타임라인 — 두께 ~6px, 클릭 hit-area ~14px(상하 패딩). 클릭/드래그 seek. */
.video_lightbox .vlb_timeline[data-v-5fe68ed8] {
    position: relative;
    width: 100%;
    height: 6px;
    padding: 4px 0;            /* hit-area ~14px (6 + 4*2) */
    cursor: pointer;
    pointer-events: auto;     /* 컨트롤 컨테이너는 통과지만 타임라인은 받음 */
    touch-action: none;       /* 드래그 seek 시 스크롤·스와이프 충돌 방지 */
}
.video_lightbox .vlb_timeline_track[data-v-5fe68ed8] {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.3);
}
.video_lightbox .vlb_timeline_progress[data-v-5fe68ed8] {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 6px;
    border-radius: 3px;
    background: #ff0000;       /* 유튜브식 빨강 진행 */
    pointer-events: none;
}
.video_lightbox .vlb_timeline_thumb[data-v-5fe68ed8] {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ff0000;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.video_lightbox .vlb_time[data-v-5fe68ed8] {
    font-size: 12px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

/* ── PC 세로(쇼츠) 다음 영상 peek — stage 아래 gap, stage 와 정확히 같은 폭, 상단 ~40px 만 보이게. ──
   폭을 stage 와 동일하게: stage 는 width:auto + height:var(--vlb-stage-h) + aspect-ratio 9/16 이라
   실폭 = stage 높이 * 9/16. peek 도 동일 계산식으로 폭을 고정해 stage 와 좌우 동폭·동정렬(feed center)로 맞춤. */
.video_lightbox .vlb_peek[data-v-5fe68ed8] {
    width: calc(var(--vlb-stage-h, 80vh) * 9 / 16);
    max-width: 92vw;
    height: 40px;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    background: #000;
    cursor: pointer;
    flex: 0 0 auto;
    opacity: 0.82;
    transition: opacity 0.15s ease;
}
.video_lightbox .vlb_peek[data-v-5fe68ed8]:hover { opacity: 1;
}
.video_lightbox .vlb_peek_img[data-v-5fe68ed8] {
    width: 100%;
    height: auto;
    display: block;
    /* 썸네일 상단부만 보이게(중앙 상단 crop) */
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center top;
       object-position: center top;
}

/* ── 가로(인터뷰) 상단 바 — 영상 stage 바깥 위쪽. 닫기(×) 우상단만(위아래 네비는 .vlb_nav_h 로 분리). ── */
.video_lightbox .vlb_top_bar[data-v-5fe68ed8] {
    width: min(94vw, 1320px);
    display: flex;
    align-items: center;
    justify-content: flex-end;   /* 닫기 우상단 */
    margin-bottom: 12px;
    z-index: 5;
}
.video_lightbox .vlb_top_close[data-v-5fe68ed8] {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
    font-size: 26px;
    line-height: 1;
    padding-bottom: 2px;
}
.video_lightbox .vlb_top_close[data-v-5fe68ed8]:hover { background: rgba(255, 255, 255, 0.3);
}

/* ── 가로(인터뷰) 위/아래 네비 — PC: 영상 stage 우측 바깥 옆. lightbox 직속 형제(클리핑 무관). ──
   stage 우측 가장자리 = viewport 중앙 + stageWidth/2. viewport 우측에서 그 지점까지 거리 =
   (100vw - stageWidth)/2. 거기서 네비 폭(52)+gap(12) 만큼 안쪽으로 두면 stage 우측 바로 옆. */
.video_lightbox .vlb_nav_h[data-v-5fe68ed8] {
    position: absolute;
    top: 50%;
    /* stage 우측 바깥 옆. 좁은 PC 에서 음수(viewport 밖)로 빠지지 않게 하한 8px. */
    right: max(8px, calc((100vw - min(94vw, 1320px)) / 2 - 64px));
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 6;
}
.video_lightbox .vlb_nav_h button[data-v-5fe68ed8] {
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}
.video_lightbox .vlb_nav_h button svg[data-v-5fe68ed8] { display: block;
}
.video_lightbox .vlb_nav_h button[data-v-5fe68ed8]:hover { background: rgba(255, 255, 255, 0.3);
}

/* ── 가로(인터뷰) 제목 — 영상 stage 밖 아래. ── */
.video_lightbox .vlb_info_below[data-v-5fe68ed8] {
    width: min(94vw, 1320px);
    margin-top: 14px;
    color: #fff;
    flex: 0 0 auto;
}
.video_lightbox .vlb_info_below_title[data-v-5fe68ed8] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
}
.video_lightbox .vlb_info_below_meta[data-v-5fe68ed8] {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    opacity: 0.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* PC 세로(쇼츠) — 영상+gap+peek 가 viewport 를 채우고 peek 바닥이 viewport 바닥에 붙게(아래 검정 여백 0).
   상단 padding 만 24px, 아래 padding 0. feed 를 바닥(flex-end) 정렬해 peek 가 viewport 바닥에 닿게 함. */
.video_lightbox.vlb-portrait[data-v-5fe68ed8] {
    /* stage 높이 = viewport - 상단 padding(24) - gap(10) - peek(40). peek 폭 계산(--vlb-stage-h)에도 사용. */
    --vlb-stage-h: calc(100vh - 24px - 10px - 40px);
    align-items: stretch;       /* feed 가 컨테이너 폭을 채우고 그 안에서 가로 center */
    padding-bottom: 0;          /* 아래 검정 여백 0 — peek 가 viewport 바닥에 붙게 */
}
.video_lightbox.vlb-portrait .vlb_feed[data-v-5fe68ed8] {
    justify-content: flex-end;  /* 바닥 정렬 — peek 가 viewport 바닥(컨테이너 아래 padding 0)에 붙음 */
}
/* 세로(쇼츠) 9:16 — 상단 padding(24) + gap(10) + peek(40) 를 뺀 가용 높이를 stage 가 차지.
   → 영상 아래 gap·peek 가 viewport 바닥에 붙고 빈 여백 없음. */
.video_lightbox.vlb-portrait .vlb_stage[data-v-5fe68ed8] {
    width: auto;
    height: var(--vlb-stage-h);
    max-width: 92vw;
    max-height: none;
    aspect-ratio: 9 / 16;
    border-radius: 12px;
}

/* ── 유튜브식 오버레이 (가로·세로 공통) — .vlb_stage 위에 겹침 ── */
/* 닫기(×) 영상 우상단 오버레이 */
.video_lightbox .vlb_close_ov[data-v-5fe68ed8] {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    border: 0;
    border-radius: 50%;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 2px;
}
.video_lightbox .vlb_close_ov[data-v-5fe68ed8]:hover { background: rgba(0, 0, 0, 0.7);
}
/* 세로(쇼츠) 전용 — 제목 + 작성자 좌하단 오버레이 (최대 2줄). 하단 타임라인 위로 띄움. */
.video_lightbox .vlb_info_ov[data-v-5fe68ed8] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 56px;   /* 하단 커스텀 컨트롤(타임라인+시간 ~46px) 위로 띄워 가독성 확보 */
    padding: 0 16px 10px;
    color: #fff;
    z-index: 2;
    pointer-events: none;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 8px;            /* 제목 + 우측 상세정보 한 줄(공간 부족 시 줄바꿈) */
}
/* 세로(쇼츠) 오버레이 — 제목(한 줄). 상세정보를 우측에 두므로 1줄·말줄임. (2026-06-25 우측 배치) */
.video_lightbox .vlb_info_title[data-v-5fe68ed8] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 0 1 auto;
    min-width: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
}
/* 세로(쇼츠) 오버레이 — 상세정보(classtitle)를 제목 우측에. 이름 중복 제거됨. 가운뎃점 구분. */
.video_lightbox .vlb_info_meta[data-v-5fe68ed8] {
    flex: 0 0 auto;
    font-size: 13px;
    opacity: 0.85;
    white-space: nowrap;
}
.video_lightbox .vlb_info_meta[data-v-5fe68ed8]::before {
    content: '·';
    margin-right: 6px;
    opacity: 0.7;
}
/* PC 위/아래 화살표 세로 스택 — lightbox 직속 형제(stage overflow 클리핑 무관). */
.video_lightbox .vlb_nav_v[data-v-5fe68ed8] {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 4;
}
.video_lightbox .vlb_nav_v button[data-v-5fe68ed8] {
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}
.video_lightbox .vlb_nav_v button svg[data-v-5fe68ed8] { display: block;
}
.video_lightbox .vlb_nav_v button[data-v-5fe68ed8]:hover { background: rgba(255, 255, 255, 0.3);
}

/* 아래 방향 chevron 2개 세로 시차 페이드 힌트 — PC·모바일 공통, 영상 하단 가운데. */
.video_lightbox .vlb_swipe_hint[data-v-5fe68ed8] {
    display: flex;
    position: absolute;
    left: 50%;
    bottom: 18%;          /* 하단 ~18% 지점 (PC 기본) */
    transform: translateX(-50%);
    z-index: 4;
    pointer-events: none;
    flex-direction: column;
    align-items: center;
    color: rgba(255, 255, 255, 0.9);
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6));
    opacity: 1;
}
.video_lightbox .vlb_swipe_hint .vlb_chev[data-v-5fe68ed8] { display: block; margin-top: -16px;
}
.video_lightbox .vlb_swipe_hint .vlb_chev1[data-v-5fe68ed8] { animation: vlbChevFade-5fe68ed8 1.5s ease-in-out infinite;
}
.video_lightbox .vlb_swipe_hint .vlb_chev2[data-v-5fe68ed8] { animation: vlbChevFade-5fe68ed8 1.5s ease-in-out infinite 0.25s;
}
@keyframes vlbHintBounce-5fe68ed8 {
0%, 100% { transform: translateY(0);
}
50% { transform: translateY(8px);
}
}
@keyframes vlbHintFade-5fe68ed8 {
from { opacity: 0;
}
to { opacity: 1;
}
}
@keyframes vlbHintAuto-5fe68ed8 {
0% { opacity: 1;
}
78% { opacity: 1;
}
100% { opacity: 0;
}
}
/* chevron 2개 시차 fade(아래 방향 흐름) */
@keyframes vlbChevFade-5fe68ed8 {
0%, 100% { opacity: 0.25; transform: translateY(0);
}
50% { opacity: 1; transform: translateY(4px);
}
}

/* ── 모바일 — 폭 없이 화면 꽉 채운 진짜 풀화면 (유튜브 쇼츠/모바일과 동일) ── */
@media (max-width: 768px) {
.video_lightbox[data-v-5fe68ed8] {
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding: 0;
}
.video_lightbox .vlb_feed[data-v-5fe68ed8] {
        width: 100%;
        height: 100dvh;
        gap: 0;
        justify-content: center;
        align-items: stretch;
}
    /* 가로(인터뷰) 16:9 — 폭 100vw, 세로 가운데 */
.video_lightbox .vlb_stage[data-v-5fe68ed8] {
        width: 100vw;
        max-width: 100vw;
        height: auto;
        max-height: none;
        aspect-ratio: 16 / 9;
        border-radius: 0;
        flex: 0 0 auto;
}
.video_lightbox .vlb_player[data-v-5fe68ed8],
    .video_lightbox .vlb_player[data-v-5fe68ed8] iframe { border-radius: 0;
}
.video_lightbox .vlb_info_ov[data-v-5fe68ed8] { border-radius: 0;
}
    /* 모바일 peek 숨김(PC 세로 전용) */
.video_lightbox .vlb_peek[data-v-5fe68ed8] { display: none;
}
    /* 가로(인터뷰) 상단 바·제목 아래 — 모바일 폭 맞춤 + 좌우 패딩 */
.video_lightbox .vlb_top_bar[data-v-5fe68ed8],
    .video_lightbox .vlb_info_below[data-v-5fe68ed8] {
        width: 100vw;
        max-width: 100vw;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
}
    /* 가로(인터뷰) 상단 바 — 화면 위에서 띄움(safe-area 고려). 닫기(×)만 우상단. */
.video_lightbox .vlb_top_bar[data-v-5fe68ed8] {
        margin-bottom: 10px;
        padding-top: calc(16px + env(safe-area-inset-top, 0px));
        justify-content: flex-end;  /* 닫기 우상단 */
}
    /* 모바일 가로(인터뷰) 위아래 네비 — 화면(viewport) 우하단 고정. (2026-06-25 수정)
       이전: stage 세로 중앙 기준 calc 로 영상 위에 겹쳐 배치됐음(영상 304~523 안에 버튼 378~476).
       변경: 영상(16:9·세로 가운데)·제목(.vlb_info_below) 모두 그 아래 빈 영역에 위치하므로
            제목 아래 빈 영역의 우하단(viewport 바닥 기준)으로 고정 — 영상·제목과 겹침 0.
            safe-area 고려해 하단 16px 띄움. 실측: 버튼 y730~828(vh844), stage/제목과 겹침 false. */
.video_lightbox .vlb_nav_h[data-v-5fe68ed8] {
        top: auto;
        right: 12px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        transform: none;
        gap: 10px;
}
.video_lightbox .vlb_nav_h button[data-v-5fe68ed8] {
        width: 44px;
        height: 44px;
}
    /* 세로(쇼츠) 우측 세로 네비 숨김(딤 영역 좁음) — 전환은 스와이프 + 자동 다음 */
.video_lightbox .vlb_nav_v[data-v-5fe68ed8] { display: none;
}
    /* 세로(쇼츠) 9:16 — 화면 꽉(full height). */
.video_lightbox.vlb-portrait[data-v-5fe68ed8] {
        align-items: stretch;
        padding-bottom: 0;
}
.video_lightbox.vlb-portrait .vlb_feed[data-v-5fe68ed8] {
        align-items: center;
        justify-content: center;
}
.video_lightbox.vlb-portrait .vlb_stage[data-v-5fe68ed8] {
        width: auto;
        max-width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        aspect-ratio: 9 / 16;
        border-radius: 0;
}
    /* 세로(쇼츠) 제목 오버레이 — 하단 커스텀 컨트롤 위로 띄움(겹침 방지). */
.video_lightbox.vlb-portrait .vlb_info_ov[data-v-5fe68ed8] {
        bottom: 60px;
}
    /* D1 — 모바일 화살표 힌트를 조금 위로(18% → 24%). */
.video_lightbox .vlb_swipe_hint[data-v-5fe68ed8] {
        bottom: 24%;
}
}