/* HVC single video page v2 — layout + sidebar accordion + related grid */
.hvc-pg-layout{display:flex;gap:1.5rem;align-items:flex-start}
.hvc-pg-main{flex:1;min-width:0}
.hvc-pg-side{width:280px;flex:0 0 280px;transition:flex-basis .25s,width .25s}
.hvc-pg-side .hvc-panel{background:var(--base-3,#fff);border:1px solid var(--base-2,#f7f9fb);
  border-radius:.75rem;box-shadow:0 2px 12px rgba(18,20,26,.06);padding:.75rem;
  max-height:70vh;display:flex;flex-direction:column;position:relative}
.hvc-pg-side .hvc-collapse{position:absolute;top:.5rem;right:.25rem;z-index:2;border:0;background:transparent;
  cursor:pointer;font-size:1rem;line-height:1;color:var(--base,#4d5d80);padding:.25rem .5rem;border-radius:.35rem}
.hvc-pg-side .hvc-collapse:hover{background:var(--base-2,#f7f9fb)}
.hvc-pg-side.is-collapsed{width:44px;flex-basis:44px}
.hvc-pg-side.is-collapsed .hvc-panel{padding:.5rem .25rem;max-height:none}
.hvc-pg-side.is-collapsed .hvc-acc{display:none}
.hvc-acc{overflow-y:auto;overscroll-behavior:contain;min-height:0;padding-right:.25rem}
.hvc-acc::-webkit-scrollbar{width:6px}
.hvc-acc::-webkit-scrollbar-thumb{background:var(--contrast-3,#363d4d);opacity:.35;border-radius:3px}
.hvc-acc::-webkit-scrollbar-track{background:transparent}
.hvc-cat{border-bottom:1px solid var(--base-2,#f7f9fb)}
.hvc-cat:last-child{border-bottom:0}
.hvc-cat-head{display:flex;align-items:center;gap:.5rem;width:100%;border:0;background:transparent;
  color:inherit;padding:.7rem .5rem;font-size:.95rem;font-weight:600;cursor:pointer;text-align:left;border-radius:.4rem}
.hvc-cat-head:hover{background:var(--base-2,#f7f9fb)}
.hvc-cat-head .hvc-arrow{font-size:.75rem;transition:transform .2s;color:var(--base,#4d5d80)}
.hvc-cat.is-open .hvc-cat-head .hvc-arrow{transform:rotate(90deg)}
.hvc-cat-head .hvc-label{flex:1}
.hvc-pill{background:var(--base-2,#f7f9fb);color:var(--base,#4d5d80);border-radius:100px;
  font-size:.72rem;font-weight:600;padding:.1rem .55rem}
.hvc-cat.is-open .hvc-cat-head{color:var(--accent)}
.hvc-cat.is-open .hvc-pill{background:var(--accent);color:#fff}
.hvc-cat-body{display:none;padding:.25rem 0 .6rem}
.hvc-cat.is-open .hvc-cat-body{display:block}
.hvc-list{display:flex;flex-direction:column;gap:.4rem;max-height:260px;overflow-y:auto;overscroll-behavior:contain}
.hvc-list::-webkit-scrollbar{width:6px}
.hvc-list::-webkit-scrollbar-thumb{background:var(--contrast-3,#363d4d);opacity:.35;border-radius:3px}
.hvc-item{position:relative;display:flex;gap:.6rem;align-items:center;border-radius:.45rem;
  padding:.4rem .5rem .4rem .65rem;background:transparent;transition:background .15s;
  text-align:left;width:100%;text-decoration:none;color:inherit}
.hvc-item:hover{background:var(--base-2,#f7f9fb)}
.hvc-item:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hvc-item::before{content:"";position:absolute;left:0;top:.45rem;bottom:.45rem;width:3px;border-radius:2px;
  background:transparent;transition:background .15s}
.hvc-item.is-playing{background:var(--base-2,#f7f9fb)}
.hvc-item.is-playing::before{background:var(--accent)}
.hvc-thumb-wrap{position:relative;flex:0 0 96px}
.hvc-item img,.hvc-item .hvc-ph{width:96px;height:54px;object-fit:cover;border-radius:.3rem;display:block}
.hvc-item .hvc-ph{background:var(--contrast-3,#363d4d);color:#fff;display:flex;align-items:center;
  justify-content:center;font-size:.65rem}
.hvc-item .hvc-dur{position:absolute;right:3px;bottom:3px;background:rgba(0,0,0,.75);color:#fff;
  font-size:.65rem;line-height:1;padding:2px 4px;border-radius:3px}
.hvc-it-body{min-width:0}
.hvc-it-title{font-size:.85rem;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.hvc-empty{opacity:.7;font-size:.9rem;padding:.5rem}

/* page content */
.hvc-bc ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:0 0 1rem;font-size:.875rem}
.hvc-bc a{color:var(--accent)}
.hvc-single-stage .video-js{border-radius:.5rem;overflow:hidden}
.hvc-single-title{margin:1rem 0 .25rem}
.hvc-mute-hint{margin:.25rem 0 .5rem;font-size:.85rem;color:var(--base,#4d5d80)}
.hvc-mute-hint button{border:0;background:none;color:var(--accent);cursor:pointer;font:inherit;font-weight:600;text-decoration:underline;padding:0}
.hvc-single-desc{margin:1rem 0}
.hvc-single-cta{margin:1.5rem 0 0}
.hvc-related{margin-top:3rem}
.hvc-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.hvc-rel-card{display:block;text-decoration:none;color:inherit;border:1px solid var(--base-2,#f7f9fb);border-radius:.5rem;overflow:hidden;transition:box-shadow .2s,transform .2s}
.hvc-rel-card:hover{box-shadow:0 6px 24px rgba(18,20,26,.12);transform:translateY(-2px)}
.hvc-rel-thumb{position:relative;display:block;aspect-ratio:16/9;background:var(--contrast-3,#363d4d)}
.hvc-rel-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.hvc-rel-thumb .hvc-dur{position:absolute;right:.5rem;bottom:.5rem;background:rgba(0,0,0,.75);color:#fff;font-size:.75rem;padding:.1rem .4rem;border-radius:.25rem}
.hvc-rel-title{display:block;padding:.75rem 1rem 1rem;font-weight:600;font-size:.95rem;line-height:1.4}
.hvc-all-link{display:inline-block;margin-top:1.5rem;color:var(--accent);font-weight:600;text-decoration:none}
.hvc-all-link:hover{text-decoration:underline}

@media (max-width:767px){
  .hvc-pg-layout{flex-direction:column}
  .hvc-pg-main{order:-1;width:100%}
  .hvc-pg-side{width:100%;flex:none}
  .hvc-pg-side .hvc-panel{max-height:none}
  .hvc-pg-side .hvc-collapse{display:none}
  .hvc-pg-side .hvc-acc{max-height:45vh}
  .hvc-related-grid{grid-template-columns:1fr}
}