/* 2列レイアウト */
.section-title{max-width:1100px;margin:16px auto 10px;padding:0 14px}
.post-list,.song-list{max-width:1100px;margin:12px auto 30px;padding:0 14px;display:grid;gap:22px}
@media(min-width:900px){ .post-list,.song-list{grid-template-columns:1fr 1fr} }

/* LIST/REG と同じ系の見た目補強 */
.btn-like{ background:#ffd1e1; color:#5c001e; }
.btn-like[disabled]{ opacity:.7; cursor:not-allowed; }

/* 黒幕は必ず薄く（競合に勝つ） */
.playerBox .overlay-dim{ background: rgba(0,0,0,.18) !important; }
/* === TOPのカードの動画枠サイズを統一（16:9） === */
.post-card .left .playerBox,
.song-card .left .playerBox{
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--line);
}

/* YouTubeプレイヤーのマウントを全面フィット */
.post-card .left .playerBox > [id^="ytp_"]{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* 曲カードの iframe も全面フィット（念のため明示） */
.song-card .left .playerBox .ytbox{ position: absolute; inset: 0; }
.song-card .left .playerBox .ytbox iframe{ width: 100%; height: 100%; border: 0; display: block; }

/* 黒幕は必ず薄く（他CSSに勝つ） */
.playerBox .overlay-dim{ background: rgba(0,0,0,.18) !important; }

/* ▶/↻ の表示ロジックを強制（初期は▶のみ、終了後↻） */
.playerBox .overlay-center{ display:none !important; } /* デフォ非表示 */
.playerBox.overlay-show  .overlay-center{ display:grid !important; }  /* 初期：▶ */
.playerBox.overlay-hide  .overlay-center{ display:none !important; }  /* 再生中：非表示 */
.playerBox.overlay-ended .overlay-center{ display:grid !important; }  /* 終了後：↻ 表示 */
.playerBox .overlay-center .replay{ display:none; }                    /* 初期は隠す */
.playerBox.overlay-ended .overlay-center .play{ display:none; }
.playerBox.overlay-ended .overlay-center .replay{ display:inline-flex; }

/* 薄い黒を常に適用（初期＆終了時のみ表示） */
.playerBox .overlay-dim{ display:none !important; background: rgba(0,0,0,.18) !important; }
.playerBox.overlay-show  .overlay-dim,
.playerBox.overlay-ended .overlay-dim{ display:block !important; }

/* ♪ 替え歌： の文字サイズを「登録日」と揃える */
.post-card .right .lyrics{ font-size:12px; color:#dfe3ee; line-height:1.6; }

#cta-chips{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
#cta-chips > li{ display:flex; }
#cta-chips > li > a{
  display:flex; align-items:center; justify-content:center;
  text-align:center; line-height:1.2; box-sizing:border-box;
  padding:12px 20px; border-radius:999px;   /* 既存の丸ボタンを維持 */
}
/* 必要なら最低高さ（任意） */
#cta-chips > li > a{ min-height:48px; }

#cta-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
#cta-row > li{ display:flex; }

/* 黄色ボタン（既存の装飾に左右されないよう強めに指定） */
#cta-row .cta-yellow{
  display:inline-flex; align-items:center; justify-content:center;
  height:52px;                 /* 2つを同じ高さに固定 */
  padding:0 22px;              /* 左右の余白 */
  background:#ffd100;          /* 黄色 */
  color:#111;                  /* 文字色 */
  text-decoration:none;
  border-radius:999px;         /* まるボタン */
  font-weight:700;
  line-height:1;               /* 行高でズレないように */
  box-sizing:border-box;
  border:2px solid rgba(0,0,0,.15);
  position:relative; z-index:1; /* 他要素に隠れない保険 */
}
#cta-row .cta-yellow:hover{ filter:brightness(.98); }
#cta-row .cta-yellow:active{ transform:translateY(1px); }

/* CTA ボタン行を左寄せに */
#cta-row {
  display: flex;        /* 横並びにする */
  justify-content: flex-start; /* 左寄せ */
  gap: 12px;            /* ボタン間の間隔 */
  padding-left: 0;      /* ul のデフォルト余白を消す */
  margin-left: 0;
  list-style: none;     /* li の点を消す */
}

/* ★ 「見る」「いいね」行のスタイル統一 */
.post-card .controls {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

/* 「見る」ボタン */
.post-card .controls .btn-wide {
  background: #007BFF; /* play_list の「見る」と同色に合わせる */
  color: #fff;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  display: inline-block;
}

/* 「いいね」ボタン：play_list.html と同じデザイン */
.post-card .controls .btn-like {
  background: #ffd1e1;
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  display: inline-block;
}

/* 押された状態（inactive） */
.post-card .controls .btn-like.liked {
  opacity: 0.7; /* 少し薄く表示 */
  cursor: default;
}

/* like数の span 表示調整 */
.post-card .controls .btn-like .like-num {
  margin-left: 4px;
  font-weight: bold;
}

/* 「見る」と「いいね」の高さを統一 */
.post-card .controls .btn-wide,
.post-card .controls .btn-like {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;   /* ←高さを固定（調整可） */
  line-height: 1.2;
  padding: 0 14px;    /* 左右だけ余白にして高さはmin-heightで揃える */
  font-weight: 900;
}

/* === TOPカード：見る & いいね を同じ高さに（見る基準） === */
.post-card .controls .btn-wide,
.post-card .controls .btn-like{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:42px;           /* ← 見るボタン基準の固定高さ（必要なら微調整OK） */
  padding:0 14px;        /* 高さは固定、左右だけ余白 */
  line-height:1;
  font-weight:900;
  font-size:14px;
  border-radius:8px;
  gap:6px;
}

/* 色の指定：見る = #34b3ff、いいね = #ffd1e1 */
.post-card .controls .btn-wide{
  background:#34b3ff !important;
  color:#111 !important;
  border:0;
  box-shadow:2px 2px 0 #0b4a66; /* 既存の見た目を踏襲 */
}

.post-card .controls .btn-like{
  background:#ffd1e1 !important;
  color:#5c001e;                 /* 既存トーンを維持 */
  border:1px solid var(--line);
  box-shadow:none;
}

/* カウントの体裁 */
.post-card .controls .btn-like .like-num{
  margin-left:4px; font-weight:700;
}

/* 押下後などの無効化（既存と整合） */
.post-card .controls .btn-like.liked,
.post-card .controls .btn-like[disabled]{
  opacity:.7; cursor:not-allowed;
}
/* === TOPカード：見る＆いいねを完全同高さ（見る基準）にそろえる === */
:root{ --card-btn-h: 44px; }  /* 必要ならここだけ数値を変えれば両方一括で調整可 */

/* 両ボタンの共通仕様（高さ固定・ボックスサイズ統一） */
.post-card .controls .btn-wide,
.post-card .controls .btn-like{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:var(--card-btn-h) !important;     /* ← 見る基準の固定高さ */
  padding:0 14px !important;               /* 上下は0、左右のみ */
  line-height:1 !important;
  font-weight:900;
  font-size:14px;
  border-radius:8px;
  box-sizing:border-box;
  vertical-align:middle;
  margin-top:0 !important;                 /* 既存の margin を打ち消し */
  -webkit-appearance:none; appearance:none;/* UA差異を打ち消し */
}

/* 色＆境界（高さに影響しないよう border を両方1pxに統一） */
.post-card .controls .btn-wide{
  background:#34b3ff !important;
  color:#111 !important;
  border:1px solid transparent !important; /* ← 1px確保（見た目は従来どおり） */
  box-shadow:2px 2px 0 #0b4a66;
}
.post-card .controls .btn-like{
  background:#ffd1e1 !important;
  color:#5c001e !important;
  border:1px solid var(--line) !important; /* ← 1pxで高さパリティを確保 */
  box-shadow:none;
}

/* いいね内の数字体裁 */
.post-card .controls .btn-like .like-num{
  margin-left:4px; font-weight:700;
}

/* 押下後の見た目（既存と整合） */
.post-card .controls .btn-like.liked,
.post-card .controls .btn-like[disabled]{
  opacity:.7; cursor:not-allowed;
}

/* もっと見る：黄色の角丸 */
.cta-yellow{
  display:inline-block;
  padding:12px 28px;
  border-radius:9999px;
  background:#ffd100;
  color:#111;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
  transition: transform .12s ease, box-shadow .12s ease;
}
.cta-yellow:hover{
  transform: translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,.16);
}