/* video.preview.html — 영상 섹션 새 디자인 + 분류 필터 (2026-10-19) · 생성 ~/tmp/renewal-src/build/batch-1019/video_page.py
   10-20: 위 상영관(‘Film 치아살리기 최용훈원장’) 삭제. 밝은 영상 목록(.bp-vlib): 분류 단추 줄(오른쪽 채널 링크) · 카드 격자(썸네일 16:9 · 이름표 · 제목).
   카드를 누르면 화면 가운데 플레이어 창(<dialog class="bp-vdlg">)에서 재생 — 바깥 · × · Esc 로 닫힘. 직각. */

.bp-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bp-vlib { background: #f1f0ed; padding: 110px 0 130px; }
.bp-vlib__bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.bp-vlib__filter { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.bp-vlib__ch { flex: none; padding-top: 12px; }
.bp-vlib__ch .link-arrow { color: #8a6d35; }
.bp-chip { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border: 1px solid #d6cfc2; background: #fff; font: inherit; font-size: 15px; font-weight: 500; color: #2a2724; cursor: pointer; transition: background-color .25s, border-color .25s, color .25s; }
.bp-chip span { font-size: 13px; color: #9a9184; font-variant-numeric: tabular-nums; transition: color .25s; }
.bp-chip:hover { border-color: #a9843e; }
.bp-chip[aria-pressed="true"] { background: #1e1d1b; border-color: #1e1d1b; color: #fff; }
.bp-chip[aria-pressed="true"] span { color: #e2c27f; }
.bp-chip:focus-visible { outline: 2px solid #a9843e; outline-offset: 3px; }
.bp-vgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 22px; margin: 44px 0 0; padding: 0; list-style: none; }
.bp-vc[hidden] { display: none; }
.bp-vc__a { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid #e2ddd3; transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s, border-color .4s; }
.bp-vc__th { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #ddd; }
.bp-vc__th img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.bp-vc__play { position: absolute; left: 12px; bottom: 12px; width: 34px; height: 34px; border-radius: 50%; background: rgba(20,19,17,.72); }
.bp-vc__play::before { content: ""; position: absolute; left: 13px; top: 10px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #fff; }
.bp-vc__tag { align-self: flex-start; margin: 18px 18px 0; padding: 4px 8px; border: 1px solid #d9c9a6; font-size: 12.5px; line-height: 1; color: #8a6d35; }
.bp-vc__t { display: -webkit-box; margin: 12px 18px 20px; font-size: 16.5px; line-height: 1.55; font-weight: 600; letter-spacing: -0.03em; color: #1a1a1a; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bp-vc__a.is-on { border-color: #a9843e; box-shadow: 0 0 0 1px #a9843e; }
.bp-vc__a.is-on .bp-vc__play { background: #c9a35a; }
.bp-vc__a:focus-visible { outline: 2px solid #a9843e; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .bp-vc__a:hover { transform: translateY(-6px); border-color: #c9a35a; box-shadow: 0 26px 44px -24px rgba(60,48,28,.4); }
  .bp-vc__a:hover .bp-vc__th img { transform: scale(1.05); }
}
.bp-vc.is-show { animation: bpvIn .5s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes bpvIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 1279px) { .bp-vgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1023px) {
  .bp-vlib { padding: 56px 0 88px; }
  .bp-vlib__bar { flex-direction: column; align-items: stretch; gap: 14px; }
  .bp-vlib__ch { order: -1; align-self: flex-start; padding-top: 0; }
  .bp-vlib__filter { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gut) * -1); padding: 0 var(--gut) 6px; scrollbar-width: none; }
  .bp-vlib__filter::-webkit-scrollbar { display: none; }
  .bp-chip { flex: none; height: 40px; padding: 0 14px; font-size: 14.5px; }
  .bp-vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; margin-top: 28px; }
  .bp-vc__tag { margin: 12px 12px 0; }
  .bp-vc__t { margin: 10px 12px 14px; font-size: 15px; }
}
@media (max-width: 599px) { .bp-vgrid { grid-template-columns: minmax(0, 1fr); } .bp-vc__t { font-size: 16px; } }

/* 플레이어 창 — 어두운 덮개 위 16:9 플레이어 + 이름표 · 제목, 오른쪽 위 × */
.bp-vdlg { width: min(1200px, calc(100% - 64px)); max-width: none; max-height: none; margin: auto; padding: 0; border: 0; background: transparent; color: #fff; overflow: visible; }
.bp-vdlg::backdrop { background: rgba(12,11,10,.86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.bp-vdlg[open] { animation: bpvDlg .45s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes bpvDlg { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
.bp-vdlg__box { position: relative; }
.bp-vdlg__player { position: relative; aspect-ratio: 16 / 9; max-height: calc(100vh - 190px); margin: 0 auto; background: #000; box-shadow: 0 40px 90px -30px rgba(0,0,0,.9); }
.bp-vdlg__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bp-vdlg__now { display: flex; align-items: baseline; gap: 16px; margin-top: 20px; }
.bp-vdlg__tag { flex: none; padding: 5px 10px; border: 1px solid rgba(201,163,90,.6); font-size: 13px; line-height: 1; color: #e2c27f; }
.bp-vdlg__title { font-size: clamp(17px, 10px + .7vw, 21px); line-height: 1.5; font-weight: 500; letter-spacing: -0.03em; color: #fff; }
.bp-vdlg__x { position: absolute; right: 0; top: -54px; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.35); background: transparent; cursor: pointer; transition: border-color .25s, background-color .25s; }
.bp-vdlg__x::before, .bp-vdlg__x::after { content: ""; position: absolute; left: 11px; top: 21px; width: 20px; height: 1.5px; background: #fff; transform: rotate(45deg); }
.bp-vdlg__x::after { transform: rotate(-45deg); }
.bp-vdlg__x:hover { border-color: #c9a35a; background: rgba(201,163,90,.18); }
.bp-vdlg__x:focus-visible { outline: 2px solid #e2c27f; outline-offset: 3px; }
@media (max-width: 1023px) {
  .bp-vdlg { width: calc(100% - 32px); }
  .bp-vdlg__now { flex-direction: column; gap: 10px; margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) { .bp-vc.is-show, .bp-vdlg[open] { animation: none; } .bp-vc__a, .bp-vc__th img { transition: none; } }