/* videos.html 専用（v- prefixで衝突回避） */

.v-searchbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin: 10px 0 10px;
}

.v-q{
  flex: 1 1 360px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}

.v-cat, .v-sort{
  flex: 0 0 220px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}

.v-status{
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 10px;
}

/* 1行（既存 .row を活かしつつ、動画ページだけ横並び化） */
.v-thumbrow{
  display:flex;
  gap:14px;
  align-items:flex-start;
}

.v-left{
  flex:1;
  min-width:0;
}

/* サムネ（右詰め） */
.v-thumb{
  width: 200px;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius:12px;
  margin-left:auto;
  display:block;
  border:1px solid var(--line);
  background:#fff;
}

/* カテゴリ/タグのチップ */
.v-chips{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:6px;
}

.v-chip{
  font-size:12px;
  color: var(--muted);
  border:1px solid var(--line);
  border-radius:999px;
  padding:3px 8px;
  background:#fff;
}

/* エラー */
.v-error{
  margin-top:12px;
  padding:10px 12px;
  border:1px solid #f0b9b9;
  border-radius:12px;
  background:#fff5f5;
  color:#6b1111;
  font-size:13px;
  line-height:1.6;
}

@media (max-width: 700px){
  .v-cat, .v-sort{ flex: 1 1 220px; }
  .v-thumbrow{ flex-direction:column; }
  .v-thumb{ width:100%; }
}
.v-meta2{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;     /* 画面が狭いときは自然に折り返す */
  margin-top: 4px;
}
/*公開日の追加の文字スタイル*/
.v-pub{
  font-size: 0.85em;
  opacity: 0.75;
  white-space: nowrap; /* 公開日が途中で折れない */
}

/* 既存の v-chips が上マージン持ってる場合に備えて打ち消し */
.v-meta2 .v-chips{
  margin-top: 0;
}