/* -------------------------------------------------------
   XW WPP RANKING（1〜3位＝金銀銅、4位以下＝段階カラー）
------------------------------------------------------- */
.xw-wpp-ranking { counter-reset: xw-wpp-rank; }
.xw-wpp-ranking .xw-post-article-list__item { position: relative; }

/* 丸バッジ（順位） */
.xw-wpp-ranking .xw-post-article-list__item::after {
  counter-increment: xw-wpp-rank;
  content: counter(xw-wpp-rank);
  position: absolute;
  top: 8px;
  left: 8px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  z-index: 2;
}

/* -------------------------------------------------------
   1位：金
------------------------------------------------------- */
.xw-wpp-ranking .xw-post-article-list__item:nth-child(1)::after {
  background: linear-gradient(135deg, #ffd700, #ffb400, #ffea70);
  box-shadow: 0 0 15px rgba(255,215,0,0.8);
}

/* -------------------------------------------------------
   2位：銀
------------------------------------------------------- */
.xw-wpp-ranking .xw-post-article-list__item:nth-child(2)::after {
  background: linear-gradient(135deg, #cfd8dc, #b0bec5, #eceff1);
  box-shadow: 0 0 15px rgba(200,200,200,0.7);
}

/* -------------------------------------------------------
   3位：銅
------------------------------------------------------- */
.xw-wpp-ranking .xw-post-article-list__item:nth-child(3)::after {
  background: linear-gradient(135deg, #d69b6f, #b87333, #f1b37d);
  box-shadow: 0 0 15px rgba(200,120,50,0.7);
}

/* -------------------------------------------------------
   4位〜段階カラー（オレンジ→グレージュへ）
   グローなし・落ち着いたトーン
------------------------------------------------------- */
.xw-wpp-ranking .xw-post-article-list__item:nth-child(4)::after {
  background: linear-gradient(135deg, #ffc977, #f7ac50);
  box-shadow: none;
}
.xw-wpp-ranking .xw-post-article-list__item:nth-child(5)::after {
  background: linear-gradient(135deg, #e0b080, #d19a6a);
  box-shadow: none;
}
.xw-wpp-ranking .xw-post-article-list__item:nth-child(n+6)::after {
  background: linear-gradient(135deg, #bfbfbf, #a9a9a9);
  box-shadow: none;
}

/* -------------------------------------------------------
   縁取り（枠線）– 上側のみradius
------------------------------------------------------- */
.xw-wpp-ranking .xw-post-article-list__item--fig { position: relative; }

/* 1位：金リング */
.xw-wpp-ranking .xw-post-article-list__item:nth-child(1) .xw-post-article-list__item--fig::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 10px 10px 0 0;
  border: 5px solid rgba(255,215,0,0.95);
  box-shadow: 0 0 20px rgba(255,215,0,0.55), 0 0 40px rgba(255,180,0,0.40);
  pointer-events: none; z-index: 1;
}

/* 2位：銀リング */
.xw-wpp-ranking .xw-post-article-list__item:nth-child(2) .xw-post-article-list__item--fig::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 10px 10px 0 0;
  border: 5px solid rgba(230,230,230,0.95);
  box-shadow: 0 0 20px rgba(210,210,210,0.55), 0 0 36px rgba(255,255,255,0.35);
  pointer-events: none; z-index: 1;
}

/* 3位：銅リング */
.xw-wpp-ranking .xw-post-article-list__item:nth-child(3) .xw-post-article-list__item--fig::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 10px 10px 0 0;
  border: 5px solid rgba(205,133,63,0.95);
  box-shadow: 0 0 20px rgba(205,133,63,0.55), 0 0 36px rgba(255,180,90,0.40);
  pointer-events: none; z-index: 1;
}

/* like ボタンを前面へ */
.xw-wpp-ranking .xw-post-article-list__item--fig .like-btn-wrap {
  position: absolute;
  z-index: 2;
}

/* タイトル強調（上位3位） */
.xw-wpp-ranking .xw-post-article-media__body--title {
  transition: color 0.15s ease;
}
.xw-wpp-ranking .xw-post-article-list__item:nth-child(-n+3) .xw-post-article-media__body--title {
  font-weight: 700;
}

/* モバイル微調整 */
@media (max-width:640px){
  .xw-wpp-ranking .xw-post-article-list__item::after {
    top:6px; left:6px; width:30px; height:30px; font-size:13px;
  }
}

.xw-wpp-ranking .xw-post-article-list__item--fig img{
  clip-path: inset(0 round var(--block--img--border-radius-md,10px) var(--block--img--border-radius-md,10px) 0 0);
}

/* 外に出したボタンを元の位置に固定配置（右下は例。好みで変えてOK） */
.articleList__item .like-btn--moved-out{
  z-index: 100;          /* 他より前面 */
  pointer-events:auto;
}
.articleList__item .like-btn--moved-out *{ pointer-events:auto; }