@charset "utf-8";
/* ==========================================================================
   tubevideo — 모바일 세로 피드 (본문 인라인 재생 + 전체화면 모달 + 슬라이드 이동)

   본문 플레이어는 음소거로 자동재생만 하고, 탭은 위에 덮은 버튼이 받는다.
   iframe 은 탭을 안쪽에서 삼켜버려서 "영상을 눌렀다"를 밖에서 알 방법이 없기 때문이다.
   ========================================================================== */

/* ── 본문 인라인 플레이어 (탭하면 피드가 열린다) ───────────────────────── */
.tv_v_player--tap {position:relative}

/* iframe 전체를 덮는 투명 버튼.
   음소거 자동재생이라 방문자가 iframe 안을 직접 누를 일이 없다. */
.tv_v_tap {
    position:absolute; inset:0;
    width:100%; height:100%;
    padding:0; border:0; background:transparent;
    cursor:pointer; z-index:2;
    display:flex; align-items:flex-end; justify-content:center;
    -webkit-tap-highlight-color:transparent;
}
.tv_v_tap_hint {
    display:inline-flex; align-items:center; gap:6px;
    margin-bottom:12px; padding:7px 14px;
    border-radius:999px;
    background:rgba(9,11,15,.72);
    color:#fff; font-size:.82rem; font-weight:600; line-height:1;
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    box-shadow:0 2px 10px rgba(0,0,0,.35);
    pointer-events:none;
}
.tv_v_tap:active .tv_v_tap_hint {transform:scale(.96)}
.tv_v_tap_hint i {font-size:1.05em}

/* 세로 영상은 embed 가 가운데 정렬돼 있어 오버레이도 같은 폭에 맞춘다 */
.tv_v_player--tap.tv_v_player--v .tv_v_tap {
    left:50%; transform:translateX(-50%);
    width:min(100%, 640px);
}

/* ── 전체화면 피드 ────────────────────────────────────────────────────── */
body.tv_feed_open {position:fixed; width:100%; overflow:hidden}

.tv_feed {
    position:fixed; inset:0; z-index:9000;
    background:#000;
    /* 주소창이 접혔다 펴져도 슬라이드 높이가 흔들리지 않게 dvh 를 쓴다 */
    height:100vh;
}
.tv_feed[hidden] {display:none}
@supports (height:100dvh) { .tv_feed {height:100dvh} }

.tv_feed_track {
    height:100%;
    overflow-y:auto; overflow-x:hidden;
    scroll-snap-type:y mandatory;
    /* 피드 끝에서 뒤에 있는 페이지가 같이 밀리는 것을 막는다 */
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
}
.tv_feed_track::-webkit-scrollbar {display:none}

.tv_feed_slide {
    position:relative;
    height:100%;
    scroll-snap-align:start; scroll-snap-stop:always;
    display:flex; align-items:center; justify-content:center;
}

/* 영상 자리 — 가로는 16:9, 세로는 화면 높이를 꽉 채운다 */
.tv_feed_frame {
    position:relative;
    width:100%; aspect-ratio:16/9; max-height:100%;
    background:#000;
}
.tv_feed_slide[data-vert="1"] .tv_feed_frame {
    aspect-ratio:9/16;
    width:auto; height:100%; max-width:100%;
}
.tv_feed_frame iframe {position:absolute; inset:0; width:100%; height:100%; border:0}

/* 아직 마운트되지 않은 슬라이드에 보이는 썸네일 */
.tv_feed_poster {
    position:absolute; inset:0;
    background:#0b0d12 center/cover no-repeat;
}
.tv_feed_poster::after {
    content:"\f04b"; /* fa-play */
    font-family:FontAwesome;
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:62px; height:62px; line-height:62px; text-align:center; text-indent:4px;
    border-radius:50%;
    background:rgba(0,0,0,.5); color:#fff; font-size:1.5rem;
}
.tv_feed_frame.is-on .tv_feed_poster {display:none}

/* ★ iframe 위를 덮는 투명 판 — 이 스킨에서 가장 중요한 한 줄.
   이게 없으면 영상 위에서 민 손가락을 유튜브 iframe 이 가져가 버려서,
   화면을 꽉 채우는 세로 영상에서는 다음 영상으로 넘어갈 방법이 없다.
   스크롤은 이 판이 얹힌 트랙이 그대로 받고, 탭은 재생/일시정지로 쓴다. */
.tv_feed_touch {
    position:absolute; inset:0; z-index:2;
    width:100%; height:100%; padding:0;
    border:0; background:transparent;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    touch-action:pan-y;      /* 세로는 브라우저에, 좌우는 우리에게 */
}

/* 재생/일시정지 표시 — 눌렀을 때 잠깐만 뜬다 */
.tv_feed_pp {
    position:absolute; left:50%; top:50%;
    width:74px; height:74px; margin:-37px 0 0 -37px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%;
    background:rgba(0,0,0,.55); color:#fff; font-size:1.7rem;
    opacity:0; pointer-events:none;
}
.tv_feed_pp i {text-indent:4px}
.tv_feed_pp .fa-pause {text-indent:0}
.tv_feed_pp.is-flash {animation:tv_feed_pp .65s ease-out}
@keyframes tv_feed_pp {
    0%   {opacity:0; transform:scale(.7)}
    25%  {opacity:1; transform:scale(1)}
    100% {opacity:0; transform:scale(1.25)}
}

/* 하단 정보 — 세로 영상은 화면을 꽉 채우므로 영상 위에 겹친다 */
.tv_feed_info {
    position:absolute; left:0; right:0; bottom:0; z-index:3;
    padding:56px 18px calc(20px + env(safe-area-inset-bottom));
    background:linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.55) 45%, transparent 100%);
    color:#fff;
    pointer-events:none;   /* 영상 조작을 가리지 않게, 버튼만 되살린다 */
}

/* ── 가로 영상 (16:9) ──────────────────────────────────────────────────
   9:16 화면에 16:9 를 넣으면 위아래가 크게 빈다. 그 빈자리를 설명으로 채운다.
   영상은 위쪽에 붙이고, 정보는 겹치는 대신 아래로 흐르게 한다. */
.tv_feed_slide[data-vert="0"] {
    display:flex; flex-direction:column;
    align-items:stretch; justify-content:flex-start;
    padding-top:calc(52px + env(safe-area-inset-top));  /* 닫기 버튼·순번과 겹치지 않게 */
}
.tv_feed_slide[data-vert="0"] .tv_feed_frame {flex:0 0 auto; max-height:none}

/* ★ 기본은 스크롤되지 않는다 (overflow:hidden).
   여기에 overflow-y:auto 를 걸어두면 설명 영역이 세로 스와이프를 먹어버려서
   "아래서 위로 밀어 다음 영상"이 죽는다 — 설명 몇 줄 때문에 피드가 멈추는 셈이다.
   긴 설명은 스크롤이 아니라 [더보기]로 편다. */
.tv_feed_slide[data-vert="0"] .tv_feed_info {
    position:static; flex:1 1 auto;
    min-height:0; overflow:hidden;
    padding:18px 18px calc(24px + env(safe-area-inset-bottom));
    background:none;
    pointer-events:auto;
    touch-action:pan-y;   /* 세로는 슬라이드 넘김, 좌우는 우리가 읽는다 */
}
/* 펼친 뒤에만 스크롤을 허용한다 (읽는 중이므로 슬라이드가 딸려가면 안 된다) */
.tv_feed_slide[data-vert="0"] .tv_feed_info.is-open {
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
}
.tv_feed_slide[data-vert="0"] .tv_feed_tit {
    -webkit-line-clamp:3;
    font-size:1.05rem; text-shadow:none;
}
.tv_feed_slide[data-vert="0"] .tv_feed_meta {
    padding-bottom:14px; margin-bottom:14px;
    border-bottom:1px solid rgba(255,255,255,.14);
}

/* 설명 본문 — 가로 영상에만 나온다.
   접힌 상태가 기본. 펴야 스크롤이 생기고, 그전까지 세로 스와이프는 슬라이드 몫이다. */
.tv_feed_desc {
    margin:0 0 10px;
    font-size:.9rem; line-height:1.72;
    color:rgba(255,255,255,.82);
    white-space:pre-line;   /* 본문 줄바꿈을 살린다 */
    word-break:break-word;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.tv_feed_info.is-open .tv_feed_desc {
    -webkit-line-clamp:unset; display:block; overflow:visible;
}
.tv_feed_more {
    display:inline-block; margin:0 0 16px; padding:0;
    border:0; background:none;
    color:#fff; font-size:.85rem; font-weight:700;
    cursor:pointer;
}
.tv_feed_more::after {content:" ⌄"}
.tv_feed_info.is-open .tv_feed_more::after {content:" ⌃"}
.tv_feed_tit {
    margin:0 0 8px;
    font-size:1rem; font-weight:700; line-height:1.45;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    text-shadow:0 1px 3px rgba(0,0,0,.6);
}
.tv_feed_meta {
    margin:0 0 12px;
    font-size:.8rem; color:rgba(255,255,255,.78);
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.tv_feed_meta i {margin-right:3px}
.tv_feed_acts {display:flex; gap:8px; pointer-events:auto}
.tv_feed_btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:9px 15px; border-radius:999px;
    background:rgba(255,255,255,.15);
    border:1px solid rgba(255,255,255,.22);
    color:#fff !important; font-size:.82rem; font-weight:600; text-decoration:none;
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.tv_feed_btn:active {background:rgba(255,255,255,.28)}

/* 닫기 */
.tv_feed_close {
    position:absolute; z-index:5;
    top:calc(10px + env(safe-area-inset-top)); right:12px;
    width:40px; height:40px; padding:0;
    border:0; border-radius:50%;
    background:rgba(0,0,0,.5); color:#fff; font-size:1.15rem;
    cursor:pointer;
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}

/* 위/아래 이동 버튼 — 손가락 제스처가 안 먹는 상황의 확실한 길.
   오른쪽 가장자리에 붙여 영상과 설명을 가리지 않는다. */
.tv_feed_nav {
    position:absolute; z-index:5;
    right:10px; top:50%; transform:translateY(-50%);
    display:flex; flex-direction:column; gap:10px;
}
.tv_feed_nav__b {
    width:40px; height:40px; padding:0;
    border:0; border-radius:50%;
    background:rgba(255,255,255,.14); color:#fff; font-size:1.25rem;
    cursor:pointer;
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.tv_feed_nav__b:active {background:rgba(255,255,255,.3)}
.tv_feed_nav__b[disabled] {opacity:.25; pointer-events:none}

/* 순번 표시 (3 / 20) */
.tv_feed_idx {
    position:absolute; z-index:5;
    top:calc(18px + env(safe-area-inset-top)); left:16px;
    color:rgba(255,255,255,.75); font-size:.8rem; font-weight:600;
    text-shadow:0 1px 3px rgba(0,0,0,.6);
}

/* 처음 열었을 때 한 번만 보여주는 안내 */
.tv_feed_hint {
    position:absolute; z-index:4;
    left:50%; bottom:38%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:8px;
    padding:14px 20px; border-radius:14px;
    background:rgba(0,0,0,.62);
    color:#fff; font-size:.85rem; font-weight:600; white-space:nowrap;
    pointer-events:none;
    animation:tv_feed_hint_up 1.4s ease-in-out infinite;
}
.tv_feed_hint[hidden] {display:none}
.tv_feed_hint i {font-size:1.5rem}
@keyframes tv_feed_hint_up {
    0%,100% {transform:translateX(-50%) translateY(0)}
    50%     {transform:translateX(-50%) translateY(-10px)}
}
@media (prefers-reduced-motion:reduce) {
    .tv_feed_hint {animation:none}
}

/* 태블릿·PC 폭에서 열렸을 때는 가운데로 모아 준다 (피드는 세로 화면 물건이다) */
@media (min-width:781px) {
    .tv_feed_slide {padding:0 max(0px, calc((100% - 520px) / 2))}
}