/* 음악정보 동영상 새 게시판 — 모양 (2026-11-08 사용자 요청 04, 시안 C '홈 + 둘 다'. 설명은 video.lib.php 맨 위)
   다크가 기본이고, 화이트는 [data-theme="light"]에서 사이트 웜 그레이 색(theme-light.css의 --lt-*)을 써요.
   사이트의 다른 모양과 겹치지 않게 이름은 모두 vb-로 시작해요. 쇼츠 화면(vb-sf)도 화이트에서는 웜 그레이예요(2026-11-08 요청 1). */
.vb{
  --vb-bg:#000; --vb-surface:#141416; --vb-fill:rgba(255,255,255,.08); --vb-fill-2:rgba(255,255,255,.15);
  --vb-line:#2c2c31; --vb-text:#fff; --vb-t2:#d4d4d8; --vb-t3:#a1a1aa; --vb-t4:#71717a;
  --vb-accent:#ff2e63; --vb-accent-2:#ff6b8f; --vb-accent-soft:rgba(255,46,99,.16); --vb-ink:#fff; --vb-on-ink:#111;
  position:relative; color:var(--vb-text); font-size:14px; line-height:1.45;
}
[data-theme="light"] .vb{
  --vb-bg:var(--lt-bg,#f4f3f0); --vb-surface:var(--lt-surface,#fff); --vb-fill:var(--lt-fill,#f0eeea); --vb-fill-2:var(--lt-fill-hover,#e7e4df);
  --vb-line:var(--lt-border,#dcd8d1); --vb-text:var(--lt-text,#1d1b19); --vb-t2:var(--lt-text-2,#46423d); --vb-t3:var(--lt-text-3,#6f6a63); --vb-t4:var(--lt-text-4,#a39e97);
  --vb-accent:var(--lt-accent,#e0244e); --vb-accent-2:var(--lt-accent-hover,#c81d43); --vb-accent-soft:var(--lt-accent-soft,#fdecef); --vb-ink:var(--lt-text,#1d1b19); --vb-on-ink:#fff;
}
.vb, .vb *{box-sizing:border-box}
.vb button{font:inherit; font-family:inherit; color:inherit; background:none; border:0; padding:0; margin:0; cursor:pointer; vertical-align:middle; -webkit-tap-highlight-color:transparent}
.vb a{color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent}
.vb img{display:block; max-width:none; vertical-align:middle}
.vb h1, .vb h2, .vb p{margin:0; padding:0; font-family:inherit; word-break:keep-all; overflow-wrap:anywhere}
.vb [hidden]{display:none !important}
.vb i.fa-solid, .vb i.fa-brands, .vb i.fa-regular{line-height:1}
html.vb-lock, html.vb-lock body{overflow:hidden !important}

/* 머리: 제목 · 영상 수 (컴퓨터는 맨 윗줄로 올라가요). 그누보드가 그리는 기본 제목(#container_title)은 이 게시판에서만 숨겨요 — 이 파일은 이 게시판에서만 읽어요 */
#container_title{display:none !important}
.va-section-head.vb-pagehead{display:flex; align-items:baseline; justify-content:flex-start; gap:8px; flex-wrap:wrap; margin:2px 0 8px; padding:0; border:0}
.vb-pagehead .va-title{margin:0; font-size:21px; font-weight:850; letter-spacing:-.5px; line-height:1.25}
.vb-pcount{font-size:12.5px; font-weight:600; color:#bbb; white-space:nowrap}
[data-theme="light"] .vb-pcount{color:var(--lt-text-3,#6f6a63)}
.va-topbar > .va-section-head.vb-pagehead{flex:0 0 auto; max-width:45%; min-width:0; flex-wrap:nowrap; margin:0}   /* 제목은 안 줄고 검색창이 줄어요 (아주 긴 이름만 …) */
.va-topbar > .vb-pagehead .va-title{min-width:0; font-size:24px; letter-spacing:-.6px; line-height:40px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.va-topbar > .vb-pagehead .vb-pch{display:none}
@media (max-width:1100px){ .va-topbar > .vb-pagehead .vb-pcount{display:none} }   /* 태블릿 폭: 제목이 잘리지 않게 영상 수는 빼요 (첫 화면 탭에 숫자가 있어요) */
@media (max-width:720px){
  body[data-vb-mode="watch"] .vb-pagehead, body[data-vb-mode="shorts"] .vb-pagehead{display:none}
}

/* 스크립트가 없거나 자료를 못 받았을 때의 목록 · 처음 불러오는 동안 */
.vb-ssr{padding:6px 0 30px}
.vb-ssr-list{margin:0; padding:0; list-style:none}
.vb-ssr-list li{padding:9px 0; border-bottom:1px solid var(--vb-line)}
.vb-ssr-list a{font-weight:700}
.vb-ssr-list span{color:var(--vb-t3); font-size:12.5px; margin-left:6px}
.vb-ssr h1{font-size:19px; font-weight:800; margin:12px 0 6px}
.vb-ssr img{width:100%; max-width:640px; height:auto; border-radius:12px}
.vb-ssr-desc{white-space:normal; color:var(--vb-t2); margin:8px 0; font-size:13px}
.vb-ssr-pages{margin-top:14px}
.vb.vb-on > .vb-ssr{display:none}
.vb-load{display:none; justify-content:center; gap:7px; padding:80px 0}
.vb-load i{width:9px; height:9px; border-radius:50%; background:var(--vb-accent); animation:vbdot 1s infinite ease-in-out}
.vb-load i:nth-child(2){animation-delay:.15s} .vb-load i:nth-child(3){animation-delay:.3s}
@keyframes vbdot{0%,100%{opacity:.25; transform:scale(.8)} 50%{opacity:1; transform:scale(1)}}
.vb.vb-on:not(.vb-ready):not(.vb-fail) > .vb-load{display:flex}

.vb-toast{position:fixed; left:50%; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); transform:translate(-50%,16px); background:rgba(20,20,22,.94); color:#fff; padding:10px 16px; border-radius:12px; font-size:13px; font-weight:600;
  max-width:min(560px,calc(100vw - 32px)); opacity:0; pointer-events:none; transition:.25s; z-index:960; text-align:center; line-height:1.45}
.vb-toast.show{opacity:1; transform:translate(-50%,0)}

/* ── 공통 단추 · 칩 ───────────────────────── */
.vb .vb-pill{display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 14px; border-radius:18px; background:var(--vb-fill); color:var(--vb-text); font-weight:700; font-size:13px; white-space:nowrap; flex:none}
.vb .vb-pill:hover{background:var(--vb-fill-2)}
.vb .vb-pill.pri{background:var(--vb-accent); color:#fff}
.vb .vb-pill.warn{background:var(--vb-accent-soft); color:var(--vb-accent-2)}
.vb .vb-ico{width:36px; height:36px; border-radius:50%; border:1px solid var(--vb-line); display:inline-grid; place-items:center; background:var(--vb-surface); color:var(--vb-t2); flex:none}
.vb-seg{display:inline-flex; background:var(--vb-fill); border-radius:10px; padding:3px; gap:2px; flex:none}
.vb .vb-seg button{height:28px; padding:0 10px; border-radius:7px; font-size:12.5px; font-weight:700; color:var(--vb-t3); display:inline-flex; align-items:center; gap:5px; white-space:nowrap}
.vb .vb-seg button.on{background:var(--vb-fill-2); color:var(--vb-text)}
[data-theme="light"] .vb .vb-seg button.on{background:var(--vb-surface); box-shadow:0 1px 3px rgba(0,0,0,.14)}
.vb-tabs{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; max-width:100%}
.vb-tabs::-webkit-scrollbar, .vb-chs::-webkit-scrollbar, .vb-shelf::-webkit-scrollbar, .vb-sf-top::-webkit-scrollbar{display:none}
.vb .vb-tab{height:32px; padding:0 12px; border-radius:8px; background:var(--vb-fill); font-weight:700; font-size:13px; white-space:nowrap; color:var(--vb-t2); flex:none}
.vb-tab .vb-n{font-weight:600; margin-left:5px; opacity:.6; font-size:12px}
.vb .vb-tab.on{background:var(--vb-ink); color:var(--vb-on-ink)}
.vb-chs{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none}
.vb .vb-chip{display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px 0 4px; border-radius:16px; border:1px solid var(--vb-line); background:var(--vb-surface); white-space:nowrap; font-size:13px; font-weight:600; color:var(--vb-t2); flex:none}
.vb .vb-chip.all{padding-left:12px}
.vb .vb-chip.on{border-color:var(--vb-accent); background:var(--vb-accent-soft); color:var(--vb-accent-2)}
.vb-chip-av{width:24px; height:24px; border-radius:50%; object-fit:cover; flex:none}
.vb-av0{display:inline-grid; place-items:center; background:var(--vb-fill-2); color:var(--vb-t2); font-weight:800; font-size:11px}
/* 거르기 줄: 넓으면 [종류 칸 | 정렬 · 검색칸] + 채널 줄.
   좁으면(560px 아래, 휴대폰): 종류 칸 한 줄(옆으로 밀기) → [정렬 3단추(늘 다 보여요) · 채널 · 돋보기] → 누르면 채널 칩 · 검색칸 (2026-11-08 요청 09: "인기순이 잘려 보여, 고정되어야 해") */
.vb-fbar{container-type:inline-size}
.vb-fb-in{display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:10px 8px; align-items:center}
.vb-fb-in > .vb-tabs{min-width:0}
.vb-fb-ctl{display:flex; gap:6px; align-items:center}
.vb .vb-srch-btn, .vb .vb-ch-btn{display:none}
/* 2026-11-12 작업 06 요청 9 "검색창 아이콘이 상단하고 겹쳐 … 합쳐": 이 게시판의 자기 검색(돋보기 · 제목·채널 칸)은 빼고, 윗줄 검색 하나로 — 이 게시판에서는 통합 검색의 '영상' 탭으로 가요(head.php) */
.vb .vb-srch-btn, .vb .vb-srch, .vb-fbar.so .vb-srch{display:none !important}
.vb-srch{display:flex; align-items:center; gap:6px; height:32px; padding:0 10px; border:1px solid var(--vb-line); border-radius:8px; background:var(--vb-surface); color:var(--vb-t3); width:190px; margin:0}
.vb .vb-srch input.vb-q{border:0; outline:0; background:none; color:var(--vb-text); font:inherit; font-size:13px; width:100%; min-width:0; height:30px; padding:0; margin:0; box-shadow:none; -webkit-appearance:none; appearance:none}
.vb-fb-in .vb-chs{grid-column:1/-1}
.vb .vb-ico.on{border-color:var(--vb-accent); color:var(--vb-accent-2)}
.vb-ch-btn b{position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:var(--vb-accent); color:#fff; font-size:10px; font-weight:800; line-height:16px; text-align:center}
@container (max-width:560px){
  .vb-fb-in{grid-template-columns:minmax(0,1fr); gap:8px}
  .vb .vb-tab{height:34px}
  .vb-fb-ctl{display:grid; grid-template-columns:minmax(0,1fr); grid-auto-flow:column; grid-auto-columns:auto; gap:6px}   /* 정렬 3단추 + 뒤 단추들(채널 단추를 숨겨도 빈칸 없이) */
  .vb-fb-ctl .vb-fb-sort{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); width:100%}
  .vb .vb-fb-ctl .vb-fb-sort button{justify-content:center; height:30px; padding:0 4px}
  .vb .vb-srch-btn, .vb .vb-ch-btn{display:inline-grid; width:36px; height:36px; border-radius:10px; position:relative}
  .vb-srch{display:none; width:100%; height:36px}
  .vb-fbar.so .vb-srch{display:flex}
  .vb-fb-in .vb-chs{display:none; flex-wrap:wrap; overflow:visible}
  .vb-fbar.co .vb-chs{display:flex}
}
.vb-empty{color:var(--vb-t3); padding:30px 0; text-align:center}
.vb .vb-more{display:flex; margin:18px auto 6px; height:38px; padding:0 22px; border-radius:19px; background:var(--vb-fill); font-weight:700; font-size:13px; align-items:center}
.vb .vb-more:hover{background:var(--vb-fill-2)}

/* 썸네일: 가로 영상은 그대로, 세로(쇼츠)는 흐린 바탕 + 가운데 세로 그림 */
.vb-th{position:relative; display:block; border-radius:10px; overflow:hidden; background:#000; aspect-ratio:16/9}
.vb-th > img{width:100%; height:100%; object-fit:cover}
.vb-th.vt > img{filter:blur(14px) brightness(.55); transform:scale(1.2)}
.vb-th-v{position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%); aspect-ratio:9/16; height:100%}
.vb-th-v img{width:100%; height:100%; object-fit:cover}
.vb-dur{position:absolute; right:5px; bottom:6px; background:rgba(0,0,0,.82); color:#fff; font-size:11.5px; font-weight:700; padding:1px 5px; border-radius:4px; font-variant-numeric:tabular-nums; z-index:2; line-height:1.4}
.vb-bdg{position:absolute; left:5px; top:5px; background:rgba(0,0,0,.72); color:#fff; font-size:11px; font-weight:700; padding:2px 6px; border-radius:5px; display:flex; gap:4px; align-items:center; z-index:2; line-height:1.4}
.vb-bdg-h{left:auto; right:5px; background:#b91c1c}
.vb-trk{position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.3); z-index:2}
.vb-trk i{position:absolute; left:0; top:0; bottom:0; background:var(--vb-accent)}
.vb-pv{position:absolute; inset:0; z-index:3; pointer-events:none; background:#000}
.vb-pv iframe{width:100%; height:100%; border:0}

/* 목록 줄 */
.vb-vlist{display:flex; flex-direction:column; gap:2px}
.vb .vb-vi{display:grid; grid-template-columns:160px minmax(0,1fr); gap:10px; padding:6px; border-radius:12px; text-align:left; width:100%; align-items:start}
.vb .vb-vi:hover{background:var(--vb-fill)}
.vb .vb-vi.on{background:var(--vb-accent-soft)}
.vb .vb-vi.bad{opacity:.4}
.vb-vi-tx{display:flex; flex-direction:column; min-width:0; padding-top:1px}
.vb-vi .vb-t{font-size:13.5px; font-weight:700; line-height:1.38; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:keep-all; overflow-wrap:anywhere}
.vb-vi .vb-m{font-size:12px; color:var(--vb-t3); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.vb-tagl{font-size:11.5px; font-weight:800; color:var(--vb-accent-2); display:flex; align-items:center; gap:5px; margin-bottom:3px}
.vb-eq{display:inline-flex; gap:2px; align-items:flex-end; height:10px}
.vb-eq i{width:2px; height:3px; background:currentColor; animation:vbeq .8s infinite ease-in-out}
.vb-eq i:nth-child(2){animation-delay:-.3s} .vb-eq i:nth-child(3){animation-delay:-.55s}
@keyframes vbeq{0%,100%{height:3px} 50%{height:10px}}

/* ── 영상 보기: 큰 플레이어 + 다음 영상 ───────────────────────── */
.vb-wv-wrap{container-type:inline-size}
.vb-wv{display:grid; grid-template-columns:minmax(0,1fr); padding:0 0 40px}
.vb-wv-main{min-width:0}
.vb .vb-wv-back{display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 13px; border-radius:17px; background:var(--vb-fill); font-weight:700; font-size:13px; margin:0 0 12px; justify-self:start}
.vb .vb-wv-back:hover{background:var(--vb-fill-2)}
.vb-wv-stick{position:relative; z-index:6; background:var(--vb-bg)}
.vb-wv-player{position:relative; aspect-ratio:16/9; background:#000; overflow:hidden; border-radius:14px}
.vb-wv-bd{position:absolute; inset:-40px; background:center/cover no-repeat; filter:blur(30px) brightness(.5); opacity:0; transition:opacity .3s}
.vb-wv-player.vert .vb-wv-bd{opacity:1}
.vb-wv-ph{position:absolute; inset:0; z-index:1}
.vb-wv-player.vert .vb-wv-ph{left:50%; right:auto; aspect-ratio:9/16; height:100%; transform:translateX(-50%)}
.vb-wv-ph iframe{width:100%; height:100%; display:block; border:0}
.vb-wv-end{display:flex; align-items:center; gap:12px; padding:10px 12px; margin-top:10px; border-radius:12px; background:var(--vb-surface); border:1px solid var(--vb-line)}
.vb-we-th{width:104px; flex:none; aspect-ratio:16/9; border-radius:8px; overflow:hidden; background:#000}
.vb-we-th img{width:100%; height:100%; object-fit:cover}
.vb-we-tx{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.vb-we-tx small{color:var(--vb-accent-2); font-weight:800; font-size:12px}
.vb-we-tx b{font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.vb-we-tx span{font-size:12px; color:var(--vb-t3)}
.vb-we-btns{display:flex; gap:6px; flex:none}
.vb-wv-info{padding:14px 0 6px}
.vb .vb-wv-title{font-size:19px; font-weight:800; line-height:1.38; margin:0 0 12px; letter-spacing:-.01em}
.vb-wv-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.vb-wv-avw{flex:none; display:block}
.vb-wv-av{width:40px; height:40px; border-radius:50%; object-fit:cover}
.vb-wv-ch{display:flex; flex-direction:column; margin-right:auto; min-width:0}
.vb-wv-ch b{font-size:15px}
.vb-wv-ch span{font-size:12px; color:var(--vb-t3)}
.vb-wv-btns{display:flex; gap:8px; flex-wrap:wrap}
.vb-wv-desc{margin-top:12px; background:var(--vb-fill); border-radius:12px; padding:10px 12px; font-size:13px; line-height:1.55}
.vb-wv-meta{font-weight:800; margin-bottom:3px}
.vb-wv-dtext{white-space:pre-line; color:var(--vb-t2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; min-height:1.5em}
.vb-wv-dtext a{color:var(--vb-accent-2); text-decoration:underline; text-underline-offset:2px}
.vb-dnone{color:var(--vb-t3)}
.vb-wv-desc.open .vb-wv-dtext{display:block; max-height:240px; overflow:auto}
.vb .vb-wv-more{font-weight:800; font-size:12.5px; margin-top:4px; color:var(--vb-text)}
.vb-wv-adm{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px; padding:10px 12px; border:1px dashed var(--vb-line); border-radius:12px}
.vb-adm-l{font-size:12.5px; font-weight:800; color:var(--vb-t3); display:inline-flex; gap:6px; align-items:center}
.vb-adm-x{font-size:12.5px; color:#ef4444; font-weight:700}
.vb-wv-sh{display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 10px; flex-wrap:wrap}
.vb-wv-sh b{font-size:16px; font-weight:800}
.vb-wv-sh b small{font-size:12px; color:var(--vb-t3); font-weight:600; margin-left:6px}
.vb-wv-side .vb-fbar{margin-bottom:10px}
@container (min-width:980px){
  .vb-wv{grid-template-columns:minmax(0,1fr) 384px; gap:24px}
  .vb-wv-main{position:sticky; top:16px; align-self:start}
  .vb-wv-stick{background:none}
}
@container (max-width:979px){
  .vb-wv-player.vert{aspect-ratio:auto; height:min(62vh,640px)}
  .vb-wv-side{padding:12px 0 30px}
  .vb .vb-vi{grid-template-columns:150px minmax(0,1fr)}
  .vb .vb-wv-title{font-size:17px}
}
@container (min-width:640px) and (max-width:979px){
  .vb-wv-side .vb-vlist{display:grid; grid-template-columns:1fr 1fr; gap:4px 14px}
}
/* 세로 화면(휴대폰 · 세로 태블릿)은 플레이어를 위에 붙여 두고 화면 끝까지 넓혀요. 가로 화면의 좁은 창(노트북)은 같이 내려가요 */
@media (orientation:portrait){
  @container (max-width:979px){
    .vb-wv-main{display:contents}   /* 플레이어가 아래 목록 위에서도 붙어 있게 (붙는 범위 = 영상 보기 전체) */
    .vb-wv-stick{position:sticky; top:var(--vb-top,0px)}
  }
}
@media (max-width:720px){
  .vb-wv-stick{margin:0 calc(-1 * var(--vb-pad,0px))}
  .vb-wv-player{border-radius:0}
  .vb-wv-end{margin:0; border-radius:0; border-left:0; border-right:0}
}
@container (max-width:480px){
  .vb .vb-vi{grid-template-columns:136px minmax(0,1fr)}
  .vb-vi .vb-t{font-size:13px}
  .vb-wv-btns{width:100%}
  .vb-wv-btns .vb-pill{flex:1; justify-content:center; padding:0 8px}
  .vb-wv-sh .vb-seg button span{display:none}
  .vb .vb-wv-sh .vb-seg button{padding:0 11px}
  .vb-wv-end{flex-wrap:wrap}
  .vb-we-th{width:84px}
  .vb-we-btns{width:100%}
  .vb-we-btns .vb-pill{flex:1; justify-content:center}
}

/* ── 쇼츠: 영상 하나 = 화면 하나, 세로로 밀기 (본문 칸을 덮어요. 자리는 video.js가 정해요) ───────
   다크는 어두운 극장, 화이트는 사이트 웜 그레이예요 (2026-11-08 요청 1: "검은색 화면으로 나와 — 화이트로"). 영상 칸만 검은색이에요 */
.vb-feed{position:fixed; left:0; top:0; right:0; bottom:0; z-index:900; background:var(--sf-bg)}
.vb-feed, .vb-sf{
  --sf-bg:#0d0d0f; --sf-bar:#0d0d0f; --sf-panel:#141417; --sf-text:#f2f2f2; --sf-sub:#a9a9b0; --sf-line:rgba(255,255,255,.08);
  --sf-fill:rgba(255,255,255,.08); --sf-fill-2:rgba(255,255,255,.18); --sf-ink:#fff; --sf-on-ink:#111; --sf-bd:blur(44px) brightness(.32) saturate(1.3); --sf-bd-op:1;
  --sf-shadow:0 12px 40px rgba(0,0,0,.55); --sf-accent:#ff2d63; --sf-accent-soft:rgba(255,45,99,.22);
}
[data-theme="light"] .vb-feed, [data-theme="light"] .vb-sf{
  --sf-bg:var(--lt-bg,#f4f3f0); --sf-bar:var(--lt-side,#fbfaf8); --sf-panel:var(--lt-surface,#fff); --sf-text:var(--lt-text,#1d1b19); --sf-sub:var(--lt-text-3,#6f6a63); --sf-line:var(--lt-border,#dcd8d1);
  --sf-fill:var(--lt-fill,#f0eeea); --sf-fill-2:var(--lt-fill-hover,#e7e4df); --sf-ink:var(--lt-text,#1d1b19); --sf-on-ink:#fff; --sf-bd:blur(48px) saturate(1.2) brightness(1.08); --sf-bd-op:.32;
  --sf-shadow:0 10px 32px rgba(35,30,25,.22); --sf-accent:var(--lt-accent,#e0244e); --sf-accent-soft:var(--lt-accent-soft,#fdecef);
}
.vb-feed.vb-in .vb-sf{animation:vbFeedIn .28s cubic-bezier(.2,.8,.2,1)}
@keyframes vbFeedIn{from{opacity:0; transform:translateY(18px) scale(.985)}}
@media (prefers-reduced-motion: reduce){ .vb-feed.vb-in .vb-sf{animation:none} }
.vb-sf{position:absolute; inset:0; background:var(--sf-bg); color:var(--sf-text); --sf-top:52px}
.vb-sf-top{position:absolute; left:0; right:0; top:0; height:var(--sf-top); display:flex; align-items:center; gap:8px; padding:0 12px; overflow-x:auto; scrollbar-width:none; z-index:7; border-bottom:1px solid var(--sf-line); background:var(--sf-bar)}
.vb .vb-sf .vb-tab{background:var(--sf-fill); color:var(--sf-text)}
.vb .vb-sf .vb-tab.on{background:var(--sf-ink); color:var(--sf-on-ink)}
.vb-sf .vb-seg{background:var(--sf-fill)}
.vb .vb-sf .vb-seg button{color:var(--sf-sub)}
.vb .vb-sf .vb-seg button.on, [data-theme="light"] .vb .vb-sf .vb-seg button.on{background:var(--sf-fill-2); color:var(--sf-text); box-shadow:none}
.vb .vb-sf .vb-pill{background:var(--sf-fill); color:var(--sf-text); position:relative}
.vb .vb-sf .vb-ico{background:var(--sf-fill); border-color:transparent; color:var(--sf-text)}
.vb .vb-sf .vb-chip{background:var(--sf-panel); border-color:var(--sf-line); color:var(--sf-text)}
.vb .vb-sf .vb-chip.on{background:var(--sf-accent-soft); border-color:var(--sf-accent); color:var(--sf-text)}
.vb-chv{font-size:10px}
.vb-chs-n{position:absolute; top:-3px; right:-3px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:var(--sf-accent,#ff2d63); color:#fff; font-size:10.5px; font-weight:800; display:grid; place-items:center}
.vb-chs-n:empty{display:none}
.vb-sf-top .vb-tabs{flex:none; overflow:visible}
.vb-sf-chs{position:absolute; top:var(--sf-top); left:0; right:0; z-index:9; background:var(--sf-panel); padding:12px; display:flex; flex-wrap:wrap; gap:8px; border-bottom:1px solid var(--sf-line); box-shadow:0 14px 30px rgba(0,0,0,.25)}
.vb-sf-feed{position:absolute; left:0; right:0; bottom:0; top:var(--sf-top); overflow-y:auto; scroll-snap-type:y mandatory; overscroll-behavior:contain; scrollbar-width:none; outline:0}
.vb-sf-feed::-webkit-scrollbar{display:none}
.vb-sl{height:100%; scroll-snap-align:start; scroll-snap-stop:always; position:relative; overflow:hidden; container-type:size}
.vb-sl-bd{position:absolute; inset:-50px; background:center/cover no-repeat; filter:var(--sf-bd); opacity:var(--sf-bd-op); z-index:0}
.vb-sl-in{position:relative; z-index:1; height:100%; display:flex; align-items:center; justify-content:center; gap:22px; padding:12px 24px}
.vb-sl-mw{display:flex; align-items:center; justify-content:center}
.vb-sl-media{position:relative; flex:none; background:#000 center/cover no-repeat; border-radius:14px; overflow:hidden; box-shadow:var(--sf-shadow)}
.vb-sl-media.vt{height:min(calc(100cqh - 24px),calc((100cqw - 370px) * 16 / 9)); aspect-ratio:9/16}
.vb-sl-media.hz{width:min(calc(100cqw - 400px),calc((100cqh - 24px) * 16 / 9)); aspect-ratio:16/9}
.vb-sl-ph{position:absolute; inset:0}
.vb-sl-ph iframe{width:100%; height:100%; border:0; display:block}
.vb-sl-err{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:rgba(0,0,0,.78); color:#fff; text-align:center; padding:20px; font-size:14px}
.vb-sl-err i{font-size:28px; color:#ff2d63}
.vb-sl-err span{color:#bbb; font-size:12.5px}
.vb-sl-side{width:300px; flex:none; align-self:stretch; display:flex; flex-direction:column; justify-content:flex-end; gap:14px; padding:12px 0 18px}
.vb-sl-ch{display:flex; align-items:center; gap:8px; font-size:14px; min-width:0}
.vb-sl-av{width:32px; height:32px; border-radius:50%; object-fit:cover; flex:none}
.vb-sl-ch b{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.vb-sl-k{margin-left:auto; font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--sf-fill); color:var(--sf-sub); white-space:nowrap; flex:none}
.vb .vb-sl-t{margin:8px 0 4px; font-size:16px; font-weight:700; line-height:1.42; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.vb .vb-sl-m{margin:0; color:var(--sf-sub); font-size:12.5px}
.vb .vb-sl-vn{margin:6px 0 0}
.vb-sl-prog{position:relative; height:16px; cursor:pointer}
.vb-sl-prog::before{content:""; position:absolute; left:0; right:0; top:6px; height:4px; border-radius:2px; background:var(--sf-fill-2)}
.vb-sl-prog i{position:absolute; left:0; top:6px; height:4px; border-radius:2px; background:var(--sf-accent); width:0; transition:width .5s linear}
.vb-sl-rail{display:grid; grid-template-columns:repeat(4,1fr); gap:12px 6px}
.vb .vb-sl-rail > *{display:flex; flex-direction:column; align-items:center; gap:5px; font-size:11.5px; color:var(--sf-sub); font-weight:600}
.vb-sl-rail i{width:44px; height:44px; border-radius:50%; background:var(--sf-fill); display:grid; place-items:center; font-size:17px; color:var(--sf-text); transition:background .15s}
.vb-sl-rail > *:hover i{background:var(--sf-fill-2)}
.vb .vb-sl-rail .warn i{background:var(--sf-accent); color:#fff}
.vb .vb-sl-rail .warn{color:var(--sf-text)}
.vb-sf-drawer{position:absolute; top:var(--sf-top); right:0; bottom:0; width:min(380px,100%); background:var(--sf-panel); border-left:1px solid var(--sf-line); z-index:8; display:flex; flex-direction:column; box-shadow:-14px 0 30px rgba(0,0,0,.2)}
.vb-sd-h{display:flex; align-items:center; justify-content:space-between; padding:12px 14px; font-size:15px}
.vb-sf-drawer .vb-vlist{overflow:auto; padding:0 8px 16px}
.vb-sf-drawer .vb-empty{padding:14px 0}
.vb .vb-sf .vb-vi{grid-template-columns:132px minmax(0,1fr)}
.vb-sf .vb-vi .vb-t{color:var(--sf-text)}
.vb-sf .vb-vi .vb-m{color:var(--sf-sub)}
.vb .vb-sf .vb-vi:hover{background:var(--sf-fill)}
.vb .vb-sf .vb-vi.on{background:var(--sf-accent-soft)}
.vb-sf .vb-tagl{color:var(--sf-accent)}
/* 세로로 긴 화면(휴대폰 · 세로 태블릿)이나 좁은 칸: 영상 위, 글 · 단추 아래 */
@container (orientation:portrait) or (max-width:699px){
  .vb-sl-in{flex-direction:column; gap:0; padding:0}
  .vb-sl-mw{flex:1; min-height:0; width:100%}
  .vb-sl-media{border-radius:0; box-shadow:none}
  .vb-sl-media.vt{height:min(100%,calc(100cqw * 16 / 9))}
  .vb-sl-media.hz{width:100%}
  .vb-sl-side{width:100%; align-self:auto; padding:6px 12px 8px; gap:2px; background:var(--sf-bar)}
  .vb-sl-ch{font-size:13px}
  .vb-sl-av{width:24px; height:24px}
  .vb .vb-sl-t{font-size:14px; -webkit-line-clamp:1; margin:4px 0 0}
  .vb .vb-sl-m, .vb .vb-sl-vn{display:none}
  .vb-sl-rail{display:flex; justify-content:space-between; gap:0}
  .vb-sl-rail span{display:none}
  .vb-sl-rail i{width:38px; height:38px; font-size:15px}
}
@media (max-width:720px){
  .vb-sf-drawer{top:auto; left:0; width:100%; height:64%; border-left:0; border-top:1px solid var(--sf-line); border-radius:16px 16px 0 0}
  .vb-sf-top{gap:6px; padding:0 8px}
  .vb-sf .vb-seg button span, .vb-sf .vb-tab .vb-n, .vb-sf-top .vb-pill .vb-chs-l, .vb-sf-top .vb-pill .vb-chv{display:none}
  .vb .vb-sf-top .vb-pill{padding:0 12px}
  .vb .vb-sf .vb-tab{padding:0 11px}
}

/* ── 첫 화면: 쇼츠 한 줄 + 영상 바둑판 ───────── */
.vb-home{container-type:inline-size}
.vb-hm{padding:0 0 40px}
.vb-hm > .vb-fbar{position:sticky; top:var(--vb-top,0px); z-index:5; background:var(--vb-bg); padding:8px 0 12px}
.vb .vb-sh-h{display:flex; align-items:center; gap:8px; font-size:18px; font-weight:800; margin:14px 0 12px; flex-wrap:wrap}
.vb-sh-h > i{color:var(--vb-accent)}
.vb-sh-n{font-size:12.5px; font-weight:600; color:var(--vb-t3)}
.vb-sh-nav{margin-left:auto; display:flex; gap:6px; align-items:center}
.vb-sh-nav .vb-pill{height:32px; padding:0 12px; font-size:12.5px}
.vb-shelf{display:grid; grid-auto-flow:column; grid-auto-columns:172px; gap:12px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; padding-bottom:4px}
.vb .vb-sc{display:flex; flex-direction:column; gap:7px; text-align:left; scroll-snap-align:start; min-width:0}
.vb-sc-th{position:relative; aspect-ratio:9/16; border-radius:12px; overflow:hidden; background:#000; display:block}
.vb-sc-th img{width:100%; height:100%; object-fit:cover}
.vb-sc .vb-t{font-size:13.5px; font-weight:700; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:keep-all; overflow-wrap:anywhere}
.vb-sc .vb-m{font-size:12px; color:var(--vb-t3)}
.vb-sgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:18px 12px}
.vb-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:24px 16px}
.vb .vb-gc{display:flex; flex-direction:column; gap:10px; text-align:left; min-width:0}
.vb-gc .vb-th{border-radius:12px}
.vb-gc-row{display:grid; grid-template-columns:36px minmax(0,1fr); gap:10px}
.vb-gc-av{width:36px; height:36px; border-radius:50%; object-fit:cover}
.vb-gc-tx{display:block; min-width:0}
.vb-gc .vb-t{display:-webkit-box; font-size:14.5px; font-weight:700; line-height:1.4; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:keep-all; overflow-wrap:anywhere}
.vb-gc .vb-m{font-size:12.5px; color:var(--vb-t3); margin-top:3px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.vb .vb-gc:hover .vb-t, .vb .vb-sc:hover .vb-t{color:var(--vb-accent-2)}
@container (max-width:640px){
  .vb-hm > .vb-fbar{margin:0 calc(-1 * var(--vb-pad,0px)); padding:6px var(--vb-pad,0px) 10px}
  .vb .vb-sh-h{margin:10px 0 10px; font-size:16px}
  .vb-shelf{grid-auto-columns:38%; margin:0 calc(-1 * var(--vb-pad,0px)); padding:0 var(--vb-pad,0px) 4px; scroll-padding:0 var(--vb-pad,0px)}
  .vb-sh-nav .vb-ico{display:none}
  .vb-grid{grid-template-columns:1fr 1fr; gap:16px 10px}
  .vb-gc-row{grid-template-columns:minmax(0,1fr)}
  .vb-gc-av{display:none}
  .vb-gc .vb-t{font-size:13px}
  .vb-gc .vb-m{font-size:11.5px}
  .vb-sgrid{grid-template-columns:repeat(3,1fr); gap:12px 8px}
}

/* ── 2026-11-08 2차 (요청 1~9): 라이브 칸 · 관리자 목록 · 인기순(실시간) · 클럽 지도 · 미리보기 ── */
.vb-wv-player{background:#000 center/cover no-repeat}   /* 플레이어가 뜨기 전에는 영상 사진 */
.vb-bdg-l{background:rgba(224,36,78,.92)}
.vb-hot{display:inline-flex; align-items:center; gap:4px; margin-top:3px; font-size:11.5px; font-weight:800; color:var(--vb-accent-2); white-space:nowrap}
.vb-venue{display:inline-flex; align-items:center; gap:4px; margin-top:4px; padding:2px 8px; border-radius:999px; background:var(--vb-accent-soft); color:var(--vb-accent-2); font-size:11.5px; font-weight:800; cursor:pointer;
  max-width:100%; width:max-content; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.vb-venue:hover{text-decoration:underline}
.vb-sf .vb-venue{background:var(--sf-accent-soft); color:var(--sf-accent)}
.vb-catl{display:inline-flex; align-items:center; gap:5px; margin-left:8px; padding:1px 8px; border-radius:999px; background:var(--vb-ink); color:var(--vb-on-ink); font-size:11.5px; font-weight:800; vertical-align:1px}
.vb-wv-meta .vb-hot, .vb-wv-meta .vb-venue{margin:0 0 0 8px; vertical-align:1px}
.vb-gc-tx .vb-hot, .vb-gc-tx .vb-venue, .vb-vi-tx .vb-hot, .vb-vi-tx .vb-venue{display:flex}
.vb-sc .vb-hot{display:flex}
/* 라이브 한 줄: 영상 카드를 옆으로 밀어 보기 */
.vb-shelf.vb-lshelf{grid-auto-columns:300px}
@container (max-width:640px){ .vb-shelf.vb-lshelf{grid-auto-columns:72%} }
/* 관리자 */
.vb .vb-tab.adm{outline:1px dashed var(--vb-line); outline-offset:-1px}
.vb-adm-row{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.vb-adm-row + .vb-adm-row{margin-top:8px}
.vb .vb-catb{height:30px; padding:0 12px; font-size:12.5px}
.vb .vb-catb.on{background:var(--vb-ink); color:var(--vb-on-ink)}
.vb .vb-adm-why{margin:8px 0 0; font-size:12px; color:var(--vb-t3)}
.vb .vb-adm-x{margin:6px 0 0}
.vb-wv-adm{display:block}
.vb-alist{display:flex; flex-direction:column; gap:10px}
.vb-arow{display:grid; grid-template-columns:200px minmax(0,1fr); gap:14px; padding:10px; border:1px solid var(--vb-line); border-radius:14px; background:var(--vb-surface); align-items:start}
.vb-arow-tx{display:flex; flex-direction:column; gap:4px; min-width:0}
.vb .vb-arow-tx .vb-t{font-weight:800; font-size:14px; line-height:1.4; overflow-wrap:anywhere}
.vb-arow-tx .vb-m{font-size:12px; color:var(--vb-t3)}
.vb-arow-why{font-size:12px; font-weight:700; color:var(--vb-accent-2)}
.vb-arow-btns{display:flex; gap:6px; flex-wrap:wrap; margin-top:4px}
@container (max-width:640px){ .vb-arow{grid-template-columns:120px minmax(0,1fr); gap:10px; padding:8px} }
/* 미리보기 중: 사진 둘레에 분홍 테 + '미리보기' 표 */
.vb-th.pv-on, .vb-sc-th.pv-on{box-shadow:0 0 0 2px var(--vb-accent)}
.vb-th.pv-on::after, .vb-sc-th.pv-on::after{content:"미리보기"; position:absolute; left:6px; bottom:7px; z-index:4; padding:1px 7px 1px 17px; border-radius:999px; color:#fff; font-size:10.5px; font-weight:800; line-height:1.6;
  background:radial-gradient(circle at 9px 50%, #ff2d63 3px, transparent 3.6px), rgba(0,0,0,.66); animation:vbPulse 1.4s infinite}
@keyframes vbPulse{50%{opacity:.7}}
@media (prefers-reduced-motion: reduce){ .vb-th.pv-on::after, .vb-sc-th.pv-on::after{animation:none} }
/* 화면 바꿀 때 부드럽게 (View Transitions를 아는 브라우저만) */
::view-transition-old(root), ::view-transition-new(root){animation-duration:.2s}
/* 휴대폰 다듬기 (2026-11-08 요청 09): 칸 제목 줄은 한 줄로(설명이 길면 …), '모두 보기'는 늘 오른쪽 */
@container (max-width:640px){
  .vb .vb-sh-h{flex-wrap:nowrap; min-width:0}
  .vb-sh-tt{flex:none; white-space:nowrap}
  .vb-sh-n{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .vb-sh-nav{flex:none}
}
/* 실시간(인기순) 10개씩 (2026-11-08 사용자: "실시간은 10개씩 해줘"): 사진 왼쪽 위 순위 번호, 1~3위는 분홍 · 주황.
   왼쪽 위 표(순위 · 쇼츠 · 라이브)는 한 묶음이라 겹치지 않고, 미리보기 중에도 보여요 */
.vb-tl{position:absolute; left:5px; top:5px; z-index:4; display:flex; gap:4px; align-items:center; pointer-events:none}
.vb-tl > .vb-bdg{position:static}
.vb-sc-th .vb-tl{left:6px; top:6px}
.vb-rk{display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:24px; padding:0 6px; border-radius:7px; background:rgba(0,0,0,.8); color:#fff;
  font-size:13.5px; font-weight:900; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.3px; box-shadow:0 1px 4px rgba(0,0,0,.35)}
.vb-rk.top{background:linear-gradient(135deg,#ff3b5c,#ff7a45)}
/* 10개가 끝줄에 한 개만 남지 않게: 넓으면 영상 · 라이브는 차트처럼 2줄(사진 왼쪽 · 글 오른쪽, 2 × 5), 쇼츠는 5칸 × 2줄.
   휴대폰은 영상이 원래 2칸(2 × 5)이고, 쇼츠는 3칸 대신 2칸(2 × 5) */
@container (min-width:641px){
  .vb-grid.rk{grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 26px}
  .vb .vb-grid.rk .vb-gc{flex-direction:row; align-items:flex-start; gap:14px}
  .vb-grid.rk .vb-th{flex:0 0 42%; max-width:260px}
  .vb-grid.rk .vb-gc-row{flex:1 1 auto; min-width:0; grid-template-columns:minmax(0,1fr)}
  .vb-grid.rk .vb-gc-av{display:none}
  .vb-sgrid.rk{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@container (max-width:640px){ .vb-sgrid.rk{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* 채널 목록 숨김 (2026-11-08 요청 34, video.js CH_LIST): 머리 글자의 '· 채널 N개'도 빼요(컴퓨터는 원래 안 보였어요) */
.vb-pch{display:none}