/* === レイアウト：2列（画面幅が狭いときは1列） === */
#list{ display:grid; gap:18px; }
@media(min-width:780px){ #list{ grid-template-columns: 1fr 1fr; } }

/* いいねボタン（LIST） */
.btn-like{ background:#ffd1e1; color:#5c001e; }
.btn-like[disabled]{ opacity:.7; cursor:not-allowed; }

/* LISTカード内のプレイヤー枠（最小補強。既存CSSと競合しない程度） */
.post-card .left .playerBox{ position:relative; aspect-ratio:16/9; border-radius:10px; overflow:hidden; background:#000; }
.post-card .left .playerBox > #ytp_dummy,
.post-card .left .playerBox > [id^="ytp_"]{ position:absolute; inset:0; width:100%; height:100%; }
.post-card .left .playerBox .overlay-dim{ position:absolute; inset:0; background:rgba(0,0,0,.18); display:none; z-index:10; }
.post-card .left .playerBox .overlay-center{
  position:absolute; inset:0; display:none; align-items:center; justify-content:center; z-index:20;
}
.post-card .left .playerBox .overlay-btn{
  padding:10px 16px; border-radius:999px; font-weight:900; border:none; cursor:pointer;
}
.post-card .left .playerBox .overlay-btn.play{ background:#ffee00; color:#111; }  /* 黄色の再生 */
.post-card .left .playerBox .overlay-btn.replay{ background:#222; color:#fff; }  /* もう一度 */

/* オーバーレイの表示状態（初期は▶、再生中は非表示、終了後は↻） */
.post-card .left .playerBox.overlay-show .overlay-dim,
.post-card .left .playerBox.overlay-show .overlay-center{ display:flex; }
.post-card .left .playerBox.overlay-hide .overlay-dim,
.post-card .left .playerBox.overlay-hide .overlay-center{ display:none; }
.post-card .left .playerBox .overlay-center .replay{ display:none; }
.post-card .left .playerBox.overlay-ended .overlay-center{ display:flex; }
.post-card .left .playerBox.overlay-ended .overlay-center .play{ display:none; }
.post-card .left .playerBox.overlay-ended .overlay-center .replay{ display:inline-flex; }
/* LISTの動画オーバーレイを必ず薄く（0.18）する */
#list .post-card .playerBox .overlay-dim { background: rgba(0,0,0,.18) !important; }
/* （他ページの“他の作品も見る”にも同じ薄さを適用したい場合） */
.others-grid .song-card .left .thumb .overlay-dim { background: rgba(0,0,0,.18) !important; }
/* --- カテゴリー・タグ色を #ffee00 に --- */
.tag{
  background:#ffee00 !important;
  color:#111 !important;
  border:1px solid #c7b800 !important;
}

/* --- タグフィルタUI --- */
.filter-bar{
  max-width:1100px; margin:10px auto 16px; padding:0 12px;
  display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center;
}
.filter-bar .group-title{ font-weight:900; color:#fff; margin-right:6px; }
.filter-bar label{
  display:inline-flex; align-items:center; gap:6px;
  color:#fff; font-size:14px; background:#1a1c24; border:1px solid #333; 
  border-radius:999px; padding:6px 10px; cursor:pointer;
}
.filter-bar input[type="checkbox"]{ accent-color:#ffee00; }

/* ===== SmartPhone tweaks (play_list) ===== */
.plist-section .post-card{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  grid-template-areas:
    "left right"
    "tags right";
}
.plist-section .post-card .left{  grid-area:left; }
.plist-section .post-card .right{ grid-area:right; }

/* 動画直下に差し込むタグの置き場 */
.plist-section .post-card .tags-under{
  grid-area:tags;
  margin:6px 0 0;
  display:flex; gap:8px; flex-wrap:wrap;
}

/* スマホでは 1 カラム化（動画 → タグ → 本文） */
@media (max-width: 900px){
  .plist-section .post-card{
    grid-template-columns: 1fr;
    grid-template-areas:
      "left"
      "tags"
      "right";
  }
}