@charset "UTF-8";
/* =========================================================
   rankings.css — Rankings 専用（PC 1996:14807 / TB 1996:14813 / SP 1996:14819）
   値は Figma 実値（px ÷ 10 = rem）。トークンは common.css :root（再定義しない）
   ========================================================= */

/* =========================================================
   Headline + Subhead
   PC: py80 / w1050 / gap20   TB: py40 / w690 / gap20   SP: py30 / w315 / gap10
   ========================================================= */
.rk-head { padding: 8rem 0; }
.rk-head__inner { width: var(--content-w); margin-inline: auto; display: flex; flex-direction: column; gap: 2rem; }
.rk-head__title { font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-h2); }
.rk-head__lead { font-size: var(--fs-sub); line-height: var(--lh-sub); }

@media (max-width: 1279.98px) {
  .rk-head { padding: 4rem 0; }
}
@media (max-width: 833.98px) {
  .rk-head { padding: 3rem 0; }
  .rk-head__inner { gap: 1rem; }
  .rk-head__title { font-size: 2.8rem; line-height: 1.4; }   /* Figma SP: 28px / 1.4 */
}

/* =========================================================
   Tab bar（Today / This Week / This Month / All Time ・SPは 1d / 7d / 30d / All Time）
   h60・均等4分割・px30。選択中は下線 2px #858584
   ========================================================= */
.rk-tabs__list { width: 105rem; margin-inline: auto; display: flex; align-items: flex-start; }
.rk-tab {
  flex: 1 1 0; min-width: 0; height: 6rem;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3rem;
  border-bottom: 0.2rem solid transparent;
  color: var(--color-caption);
  font-weight: 600; font-size: 2.2rem; line-height: 1.4; white-space: nowrap;
  transition: color .2s ease, border-color .2s ease;
}
.rk-tab[aria-selected="true"] { color: var(--color-text); border-bottom-color: var(--color-caption); }
.rk-tab:hover { color: var(--color-text); }

@media (max-width: 1279.98px) {
  .rk-tabs__list { width: 68rem; }
  .rk-tab { font-size: 1.6rem; }
}
@media (max-width: 833.98px) {
  .rk-tabs__list { width: 31.5rem; }
}

/* =========================================================
   Rankings（表）
   py40 / gap20。ヘッダー h46 枠 #3B3B3B、行 #3B3B3B 角丸20
   列：# 30 | Artist(可変) | Change 160 | NFTs Sold 160 | Volume 160（gap20・px20）
   TB：# 24（見出しは30）| Change 100 | Volume 100、行 h60、アバター24
   SP：# 24 | Artist | Volume 80、行 h50、px10・gap10
   ========================================================= */
.rk-list { padding: 4rem 0; }
.rk-table {
  --rk-positive: #00AC4F;            /* Figma: Change の上昇色（※common.css へのトークン化を提案中） */
  width: var(--content-w); margin-inline: auto;
  display: flex; flex-direction: column; gap: 2rem;
}
.rk-table__body { display: flex; flex-direction: column; gap: 2rem; }

.rk-table__head-row, .rk-row { display: flex; align-items: center; gap: 2rem; }
.rk-table__head-row {
  height: 4.6rem; padding: 0 2rem;
  border: 0; box-shadow: 0 0 0 1px var(--color-bg-secondary); border-radius: var(--radius); /* Figma：外側ストローク1px */
  font-family: var(--ff-mono); font-size: 1.6rem; line-height: 1.4; color: var(--color-caption);
}
.rk-table__th { flex-shrink: 0; white-space: nowrap; }
.rk-table__th--rank { width: 3rem; text-align: center; }
.rk-table__th--artist { flex: 1 1 0; min-width: 0; }
.rk-table__th--stat { width: 16rem; overflow: hidden; }

.rk-row {
  position: relative;
  min-height: 8.4rem; padding: 1.2rem 2rem;
  border-radius: var(--radius); background: var(--color-bg-secondary);
  transition: transform .25s ease, background-color .2s ease;
}
.rk-row:hover { transform: translateY(-0.2rem); }
.rk-row__rank {
  flex-shrink: 0; width: 3rem; height: 3rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius); background: var(--color-bg);
}
.rk-row__num { font-family: var(--ff-mono); font-size: 1.6rem; line-height: 1.4; color: var(--color-caption); white-space: nowrap; }
.rk-row__artist { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 2rem; }
.rk-row__artist picture { display: block; flex-shrink: 0; }
.rk-row__avatar { width: 6rem; height: 6rem; }
.rk-row__name {
  flex: 1 1 0; min-width: 0;
  font-weight: 600; font-size: 2.2rem; line-height: 1.4; text-transform: capitalize;
}
/* 行全体をクリック領域に（リンクは名前セルに1つだけ置き、疑似要素で行を覆う） */
.rk-row__name::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.rk-row__name:focus-visible { outline: none; }
.rk-row__name:focus-visible::after { outline: 2px solid var(--color-cta); outline-offset: 2px; }
.rk-row__stat {
  flex-shrink: 0; width: 16rem; overflow: hidden;
  font-family: var(--ff-mono); font-size: 1.6rem; line-height: 1.4; color: var(--color-text); white-space: nowrap;
}
.rk-row__stat--change { color: var(--rk-positive); }

@media (max-width: 1279.98px) {
  .rk-table__th--stat, .rk-row__stat { width: 10rem; }
  .rk-row { height: 6rem; min-height: 0; padding: 0 2rem; }
  .rk-row__rank { width: 2.4rem; height: 2.4rem; background: none; }
  .rk-row__num { transform: translate(-1px, -1px); }            /* Figma TB: left/top calc(50% - 1px) */
  .rk-row__artist { gap: 1.2rem; }
  .rk-row__avatar { width: 2.4rem; height: 2.4rem; }
}
@media (max-width: 833.98px) {
  .rk-table__head-row, .rk-row { gap: 1rem; }
  .rk-table__head-row { padding: 0 1rem; }
  .rk-table__th--rank { width: 2.4rem; }
  .rk-table__th--artist, .rk-table__th--volume { font-size: 1.2rem; line-height: 1.1; }
  .rk-table__th--stat, .rk-row__stat { width: 8rem; }
  .rk-row { height: 5rem; padding: 0 1rem; }
  .rk-row__num { font-size: 1.2rem; line-height: 1.1; transform: translateY(0.5px); }  /* Figma SP: top calc(50% + .5px) */
  .rk-row__name { font-weight: 400; font-size: 1.6rem; line-height: 1.4; text-transform: none; }
  .rk-row__stat { font-size: 1.2rem; line-height: 1.1; }
}