
.video_lightbox[data-v-b5397506] {
    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-b5397506] {
    flex-direction: column;
}
/* stage + peek 세로 묶음 — 유튜브 쇼츠처럼 현재 영상 박스 아래 다음 영상 박스가 gap 두고 분리.
   center 정렬, viewport 안에 stage+gap+peek 가 들어가도록 stage 높이를 아래에서 줄임. */
.video_lightbox .vlb_feed[data-v-b5397506] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
/* 가로(인터뷰) 16:9 — PC 더 크게(가용 높이 채움). */
.video_lightbox .vlb_stage[data-v-b5397506] {
    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-b5397506] {
    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-b5397506] 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-b5397506] {
    position: absolute;
    inset: 0;
    z-index: 1;
    cursor: pointer;
    /* 투명 — 영상이 그대로 보이되 터치·클릭은 우리가 받음. native 스크롤·줌 차단(전환 제스처 충돌 방지). */
    touch-action: none;
    background: transparent;
}

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

/* ── 소리 버튼 (좌상단, 작게) ── */
.video_lightbox .vlb_sound_btn[data-v-b5397506] {
    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-b5397506]:hover { background: rgba(0, 0, 0, 0.7);
}
.video_lightbox .vlb_sound_btn svg[data-v-b5397506] { display: block;
}

/* ── 하단 커스텀 컨트롤 (타임라인 seek + 시간) — 제스처 레이어보다 위 z 4 라 seek 가 스와이프에 안 먹힘 ── */
.video_lightbox .vlb_controls[data-v-b5397506] {
    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-b5397506] {
    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-b5397506] {
    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-b5397506] {
    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-b5397506] {
    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-b5397506] {
    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-b5397506] {
    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-b5397506]:hover { opacity: 1;
}
.video_lightbox .vlb_peek_img[data-v-b5397506] {
    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-b5397506] {
    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-b5397506] {
    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-b5397506]: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-b5397506] {
    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-b5397506] {
    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-b5397506] { display: block;
}
.video_lightbox .vlb_nav_h button[data-v-b5397506]:hover { background: rgba(255, 255, 255, 0.3);
}

/* ── 가로(인터뷰) 제목 — 영상 stage 밖 아래. ── */
.video_lightbox .vlb_info_below[data-v-b5397506] {
    width: min(94vw, 1320px);
    margin-top: 14px;
    color: #fff;
    flex: 0 0 auto;
}
.video_lightbox .vlb_info_below_title[data-v-b5397506] {
    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-b5397506] {
    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-b5397506] {
    /* 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-b5397506] {
    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-b5397506] {
    width: auto;
    height: var(--vlb-stage-h);
    max-width: 92vw;
    max-height: none;
    aspect-ratio: 9 / 16;
    border-radius: 12px;
}
/* PC 세로(쇼츠) 단일 영상(리스트 1개 · hasList=false) — peek 이 렌더 안 돼(v-if hasList) feed 를
   flex-end 로 두면 stage 위에 빈 공간이 생겨 아래로 쏠려 보인다. 단일일 때만 상하 대칭 중앙 정렬 +
   높이 회복(상단 24 + 하단 24 균등). 리스트 2개 이상(peek 있음)은 vlb-solo 미부여 → 기존 flex-end 유지. */
.video_lightbox.vlb-portrait.vlb-solo[data-v-b5397506] {
    --vlb-stage-h: calc(100vh - 48px);
    padding-bottom: 24px;
}
.video_lightbox.vlb-portrait.vlb-solo .vlb_feed[data-v-b5397506] {
    justify-content: center;
}

/* ── 유튜브식 오버레이 (가로·세로 공통) — .vlb_stage 위에 겹침 ── */
/* 닫기(×) 영상 우상단 오버레이 */
.video_lightbox .vlb_close_ov[data-v-b5397506] {
    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-b5397506]:hover { background: rgba(0, 0, 0, 0.7);
}
/* 세로(쇼츠) 전용 — 제목 + 작성자 좌하단 오버레이 (최대 2줄). 하단 타임라인 위로 띄움. */
.video_lightbox .vlb_info_ov[data-v-b5397506] {
    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-b5397506] {
    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-b5397506] {
    flex: 0 0 auto;
    font-size: 13px;
    opacity: 0.85;
    white-space: nowrap;
}
.video_lightbox .vlb_info_meta[data-v-b5397506]::before {
    content: '·';
    margin-right: 6px;
    opacity: 0.7;
}
/* PC 위/아래 화살표 세로 스택 — lightbox 직속 형제(stage overflow 클리핑 무관). */
.video_lightbox .vlb_nav_v[data-v-b5397506] {
    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-b5397506] {
    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-b5397506] { display: block;
}
.video_lightbox .vlb_nav_v button[data-v-b5397506]:hover { background: rgba(255, 255, 255, 0.3);
}

/* 아래 방향 chevron 2개 세로 시차 페이드 힌트 — PC·모바일 공통, 영상 하단 가운데. */
.video_lightbox .vlb_swipe_hint[data-v-b5397506] {
    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-b5397506] { display: block; margin-top: -16px;
}
.video_lightbox .vlb_swipe_hint .vlb_chev1[data-v-b5397506] { animation: vlbChevFade-b5397506 1.5s ease-in-out infinite;
}
.video_lightbox .vlb_swipe_hint .vlb_chev2[data-v-b5397506] { animation: vlbChevFade-b5397506 1.5s ease-in-out infinite 0.25s;
}
@keyframes vlbHintBounce-b5397506 {
0%, 100% { transform: translateY(0);
}
50% { transform: translateY(8px);
}
}
@keyframes vlbHintFade-b5397506 {
from { opacity: 0;
}
to { opacity: 1;
}
}
@keyframes vlbHintAuto-b5397506 {
0% { opacity: 1;
}
78% { opacity: 1;
}
100% { opacity: 0;
}
}
/* chevron 2개 시차 fade(아래 방향 흐름) */
@keyframes vlbChevFade-b5397506 {
0%, 100% { opacity: 0.25; transform: translateY(0);
}
50% { opacity: 1; transform: translateY(4px);
}
}

/* ── 모바일 — 폭 없이 화면 꽉 채운 진짜 풀화면 (유튜브 쇼츠/모바일과 동일) ── */
@media (max-width: 768px) {
.video_lightbox[data-v-b5397506] {
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding: 0;
}
.video_lightbox .vlb_feed[data-v-b5397506] {
        width: 100%;
        height: 100dvh;
        gap: 0;
        justify-content: center;
        align-items: stretch;
}
    /* 가로(인터뷰) 16:9 — 폭 100vw, 세로 가운데 */
.video_lightbox .vlb_stage[data-v-b5397506] {
        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-b5397506],
    .video_lightbox .vlb_player[data-v-b5397506] iframe { border-radius: 0;
}
.video_lightbox .vlb_info_ov[data-v-b5397506] { border-radius: 0;
}
    /* 모바일 peek 숨김(PC 세로 전용) */
.video_lightbox .vlb_peek[data-v-b5397506] { display: none;
}
    /* 가로(인터뷰) 상단 바·제목 아래 — 모바일 폭 맞춤 + 좌우 패딩 */
.video_lightbox .vlb_top_bar[data-v-b5397506],
    .video_lightbox .vlb_info_below[data-v-b5397506] {
        width: 100vw;
        max-width: 100vw;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
}
    /* 가로(인터뷰) 상단 바 — 화면 위에서 띄움(safe-area 고려). 닫기(×)만 우상단. */
.video_lightbox .vlb_top_bar[data-v-b5397506] {
        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-b5397506] {
        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-b5397506] {
        width: 44px;
        height: 44px;
}
    /* 세로(쇼츠) 우측 세로 네비 숨김(딤 영역 좁음) — 전환은 스와이프 + 자동 다음 */
.video_lightbox .vlb_nav_v[data-v-b5397506] { display: none;
}
    /* 세로(쇼츠) 9:16 — 화면 꽉(full height). */
.video_lightbox.vlb-portrait[data-v-b5397506] {
        align-items: stretch;
        padding-bottom: 0;
}
    /* 모바일은 세로 팝업이 이미 full-height 중앙(위 규칙) — PC 전용 vlb-solo 의 padding-bottom:24 를
       리셋해 모바일 단일 영상도 검정 여백 없이 풀스크린 유지(base vlb-solo 가 specificity 로 이기므로 명시 리셋). */
.video_lightbox.vlb-portrait.vlb-solo[data-v-b5397506] {
        padding-bottom: 0;
}
.video_lightbox.vlb-portrait .vlb_feed[data-v-b5397506] {
        align-items: center;
        justify-content: center;
}
.video_lightbox.vlb-portrait .vlb_stage[data-v-b5397506] {
        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-b5397506] {
        bottom: 60px;
}
    /* D1 — 모바일 화살표 힌트를 조금 위로(18% → 24%). */
.video_lightbox .vlb_swipe_hint[data-v-b5397506] {
        bottom: 24%;
}
}


/* 페이지 컨테이너 — 왼쪽 사이드바 없음(요구사항). 기존 .sub_con_wrapC 는 항상 aside 를 전제로
   #content 폭을 calc(100% - 332px) 로 잡아서 이 페이지엔 그대로 못 쓴다(사이드바 없이는 좌측이 빈다) —
   그래서 시각 언어(상단 여백·구분선·본문 최대폭)만 그대로 옮겨 자체 래퍼로 둔다. */
.clip_wrap[data-v-001aeb8e] {
  position: relative;
  margin-top: 130px;
  border-top: 1px solid #1D1E20;
}
.clip_wrap #content[data-v-001aeb8e] {
  margin: 0 auto;
  padding: 80px 40px;
  max-width: 1340px;
  width: 100%;
}
@media (max-width: 950px) {
.clip_wrap[data-v-001aeb8e] { margin-top: 14.4rem;
}
  /* padding-top 3.2rem — 표준 후기 목록(videoReview.vue 등)이 #lnb_my(아래 2차메뉴 탭) 아래에 두는
     여백(aside_full #content padding-top 3.2rem)을 실측 이식. 탭이 위로 옮겨진 만큼 제목 위 공간을
     맞춰야 제목 위치가 다른 목록 페이지와 같아 보인다(직접 대조 확인 — 아래 §검증 참고). */
.clip_wrap #content[data-v-001aeb8e] { padding: 3.2rem 4.8rem 8rem; width: 100%;
}
}
.title[data-v-001aeb8e] { display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
.clip_title_ico[data-v-001aeb8e] { display: inline-flex; align-items: center; flex: 0 0 auto;
}

/* 카테고리 2차메뉴 — asideReview.vue 가 모바일 폭에서 렌더링하는 밑줄 탭(#lnb_my .lnb_menu.lnb_tabs,
   layout.css 약 467~480행)과 동일한 시각 언어(활성=흰색 굵게+하단 흰 밑줄바, 비활성=흐린 회색, 하단
   전체폭 구분선). 그 CSS는 모바일 전용 미디어쿼리 안에만 있어 PC 엔 적용되지 않는데, 이 페이지는
   좌측 사이드바가 없어 PC도 같은 탭 형태를 그대로 쓴다 — 모바일 rem 값을 그대로 px 로 옮기지 않고
   PC 폭에 어울리는 크기로 재조정했다(실측 대조: /reviews 모바일 폭 렌더링 vs 이 블록, 2026-08-11).
   구분선은 GNB 바로 아래 폭 전체(.clip_wrap 상단 구분선과 동일하게 풀블리드), 탭 목록만 본문 폭
   (1340px)에 맞춰 정렬. 우측 여백은 스크롤 끝까지 0 — scroll-snap 미사용(마지막 탭이 잘려 보이지 않게). */
.clip_tabs[data-v-001aeb8e] {
  position: relative;
  border-bottom: 1px solid #282A2C;
}
.clip_tabs ul[data-v-001aeb8e] {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 32px;
  max-width: 1340px;
  width: 100%;
  margin: 0 auto;
  padding: 0 0 0 40px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  box-sizing: border-box;
}
.clip_tabs ul[data-v-001aeb8e]::-webkit-scrollbar { display: none;
}
.clip_tabs li[data-v-001aeb8e] { flex: 0 0 auto;
}
.clip_tabs button[data-v-001aeb8e] {
  position: relative;
  display: block;
  padding: 18px 0;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.36);
  white-space: nowrap;
  transition: color 0.2s;
}
.clip_tabs button[data-v-001aeb8e]:hover { color: rgba(255, 255, 255, 0.7);
}
.clip_tabs li.on button[data-v-001aeb8e] { color: #fff; font-weight: 700;
}
/* 밑줄 인디케이터 — 활성 탭 아래 흰 바가 위 border-bottom 라인 위에 겹쳐 앉는다(모바일 정본과 동일 비율). */
.clip_tabs li.on button[data-v-001aeb8e]::after {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  content: '';
  background-color: #fff;
  border-radius: 2px 2px 0 0;
}
@media (max-width: 950px) {
.clip_tabs[data-v-001aeb8e] { margin-bottom: 6rem;
}
.clip_tabs ul[data-v-001aeb8e] { max-width: none; gap: 4.8rem; padding: 0 0 0 4.8rem;
}
.clip_tabs button[data-v-001aeb8e] { padding: 2.8rem 0; font-size: 2.6rem;
}
.clip_tabs li.on button[data-v-001aeb8e]::after { bottom: -0.2rem; height: 0.4rem; border-radius: 0.2rem 0.2rem 0 0;
}
}

/* 유튜브 채널 쇼츠 탭처럼 — PC 5열 */
.review_clip ul[data-v-001aeb8e] {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.review_clip ul li[data-v-001aeb8e] {
  width: calc((100% - 24px * 4) / 5);
}
/* 태블릿 — 3열 */
@media (max-width: 1200px) {
.review_clip ul li[data-v-001aeb8e] { width: calc((100% - 24px * 2) / 3);
}
}
.review_clip .photo.photo_portrait[data-v-001aeb8e] {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.review_clip .photo.photo_portrait img[data-v-001aeb8e] {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.review_clip .infor[data-v-001aeb8e] {
  padding: 10px 2px 0;
}
/* 제목 — 카드 하단 주 정보 (조회수 표기 제거됨, 제목만 노출). 최대 2줄까지 표시 후 말줄임. */
.review_clip .infor .tit[data-v-001aeb8e] {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 14px;
  line-height: 1.4;
  opacity: 0.85;
  overflow: hidden;
}
.clip_empty[data-v-001aeb8e] {
  padding: 80px 0;
  text-align: center;
  opacity: 0.5;
}
/* 모바일 — 2~3열 (좁은 화면 2열) */
@media (max-width: 640px) {
.review_clip ul[data-v-001aeb8e] { gap: 14px;
}
.review_clip ul li[data-v-001aeb8e] { width: calc((100% - 14px) / 2);
}
}

