@charset "UTF-8";
@import url("rank-radar.css");

/* =========================================================
   トプ100 ｜ 上位カード（1〜10位を1件ずつ見せる）
   ---------------------------------------------------------
   芯は「5項目×20点の五角形」。PC幅では左に商品名・スペック・
   良い/気になる・地の文、右に五角形＋ボタンを置いて、カード1枚の
   高さを抑える（代表指摘 2026-08-21＝10枚並ぶとスクロールが長く
   なりすぎる／2026-08-22＝地の文もカード左列に収める）。
   ========================================================= */

.rank-card {
  margin-block: 24px;
  padding: 16px 24px 20px;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.rank-card--medal-1 { border-color: var(--kaki-light); }

/* ---------- 見出し行（順位＋商品名） ---------- */

.rank-card__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hair);
}

.rank-card__badge {
  display: flex;
  flex: none;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  width: 56px;
  height: 56px;
  padding-top: 14px;
  box-sizing: border-box;
  color: var(--ink-deep);
  background: var(--paper-2);
  border-radius: var(--radius-md);
}

/* メダルは彩度を落とした金銀銅。淡い地＋濃い文字（べた塗りの金は使わない） */
.rank-card--medal-1 .rank-card__badge { background: var(--rank-1-bg); color: var(--rank-1); }
.rank-card--medal-2 .rank-card__badge { background: var(--rank-2-bg); color: var(--rank-2); }
.rank-card--medal-3 .rank-card__badge { background: var(--rank-3-bg); color: var(--rank-3); }

.rank-card__badge-num {
  font-family: var(--num);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.rank-card__badge-unit {
  font-size: 0.75rem;
}

.rank-card__title { min-width: 0; }

.rank-card__maker {
  font-size: 0.75rem;
  color: var(--ink-soft);
}

.rank-card__name {
  margin-top: 2px;
  font-size: 1.25rem;
  line-height: 1.4;
}

/* ---------- 中身：左＝数字と要点／右＝五角形 ---------- */

.rank-card__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px 24px;
  align-items: start; /* 地の文が左列に入るので上で揃える（右列は五角形＋ボタンで固定高） */
  margin-top: 12px;
}

.rank-card--noimage .rank-card__inner {
  grid-template-columns: minmax(0, 1fr) 360px;
}

/* 画像があるときだけ3列（当面は無い＝Amazonの画像はPA-API経由でしか置けない） */
.rank-card:not(.rank-card--noimage) .rank-card__inner {
  grid-template-columns: 160px minmax(0, 1fr) 360px;
}

.rank-card__media img {
  width: 100%;
  height: auto;
  background: var(--paper-2);
  border-radius: var(--radius-md);
}

.rank-card__body { min-width: 0; }

/* ---------- スペック（横に比べる値） ---------- */

.rank-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.rank-card__spec {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 12px;
  background: var(--paper-2);
  border-radius: var(--radius-sm);
}

.rank-card__spec dt {
  font-size: 0.75rem;
  color: var(--ink-soft);
}

.rank-card__spec dd {
  margin: 0;
  font-family: var(--num);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink-deep);
}

/* ---------- 良いところ（＋）／気になるところ（−）：行で積む ---------- */

.rank-card__points {
  display: grid;
  gap: 4px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.rank-card__point {
  position: relative;
  padding-left: 28px;
  font-size: 0.875rem;
  line-height: 1.6;
}

.rank-card__point::before {
  content: "＋";
  position: absolute;
  top: 2px;
  left: 0;
  width: 20px;
  height: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  color: var(--good);
  background: var(--good-tint);
  border-radius: var(--radius-sm);
}

.rank-card__point--con::before {
  content: "−";
  color: var(--alert);
  background: var(--alert-tint);
}

/* ---------- 右列：五角形／旧バー ---------- */

.rank-card__aside { min-width: 0; }

.rank-card__scores {
  display: grid;
  gap: 8px;
  padding: 12px 16px;
  background: var(--kaki-tint);
  border-radius: var(--radius-md);
}

.rank-card__score {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 8px;
}

.rank-card__score-label { font-size: 0.75rem; color: var(--ink-soft); }

.rank-card__bar {
  height: 8px;
  background: rgba(188, 82, 21, 0.12);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.rank-card__bar-fill {
  display: block;
  height: 100%;
  background: var(--kaki);
  border-radius: var(--radius-sm);
}

.rank-card__score-num {
  font-family: var(--num);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink-deep);
  text-align: right;
}

/* ---------- 地の文・ボタン ---------- */

/* 地の文は左列の中（スペック・ポイントの直下）。右列と横に並んでカードの高さを食わない */
.rank-card__text { margin-top: 12px; font-size: 0.9375rem; line-height: 1.8; }
.rank-card__text p + p { margin-top: 12px; }
.rank-card__cta { margin-top: 8px; }

@media (max-width: 767px) {
  .rank-card { padding: 16px 16px 20px; }

  .rank-card__inner,
  .rank-card--noimage .rank-card__inner,
  .rank-card:not(.rank-card--noimage) .rank-card__inner {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .rank-card__media img { max-width: 200px; margin-inline: auto; }
  .rank-card__name { font-size: 1.125rem; }
}