.c-rank-movement {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 22px;
  padding: 3px 7px;
  border: 0 !important;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.c-rank-movement--up,
.c-rank-movement--new {
  background-color: #ffe7ef !important;
  color: #cf3566 !important;
}

.c-rank-movement--down {
  background-color: #e9f5ff !important;
  color: #2f76b4 !important;
}

.c-rank-movement--same,
.c-rank-movement--unknown {
  background-color: #f0f1f2 !important;
  color: #6c7278 !important;
}

.c-rank-new {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 3px 6px;
  border-radius: 3px;
  background: #34383d;
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
  white-space: nowrap;
}

.c-ranking-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-width: 0;
  margin: 0 0 10px;
  padding: 7px 10px;
  border-radius: 8px;
  background: #f5f6f7;
}

.c-ranking-card-head__rank {
  color: #363b41;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.c-ranking-card-head__status {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
}

.c-ranking-item--rank1 .c-ranking-card-head,
.c-home-rank__item--rank1 .c-ranking-card-head { background: #fff8dc; }
.c-ranking-item--rank2 .c-ranking-card-head,
.c-home-rank__item--rank2 .c-ranking-card-head { background: #f1f3f6; }
.c-ranking-item--rank3 .c-ranking-card-head,
.c-home-rank__item--rank3 .c-ranking-card-head { background: #fff0e6; }

.c-ranking-item--rank1 .c-ranking-card-head__rank,
.c-home-rank__item--rank1 .c-ranking-card-head__rank { color: #9a7410; }
.c-ranking-item--rank2 .c-ranking-card-head__rank,
.c-home-rank__item--rank2 .c-ranking-card-head__rank { color: #66707e; }
.c-ranking-item--rank3 .c-ranking-card-head__rank,
.c-home-rank__item--rank3 .c-ranking-card-head__rank { color: #9a5d35; }

.c-home-rank--realtime {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  overflow: visible !important;
}
.c-home-rank--realtime .c-home-rank__item { width:100% !important; min-width:0 !important; margin:0 !important; }
.c-home-rank--realtime .c-home-rank__item--rank1 { background:linear-gradient(180deg,#fffdf5 0%,#fff 40%); }
.c-home-rank--realtime .c-home-rank__item--rank2 { background:linear-gradient(180deg,#f8f9fb 0%,#fff 40%); }
.c-home-rank--realtime .c-home-rank__item--rank3 { background:linear-gradient(180deg,#fff8f3 0%,#fff 40%); }
.c-realtime-ranking__more { margin-top:20px; }

.c-ranking-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:22px; }
.c-ranking-tab { display:flex; align-items:center; justify-content:center; min-height:52px; padding:12px 16px; border:1px solid #dfe2e5; border-radius:10px; background:#f3f4f5; color:#555d65; font-size:15px; font-weight:800; line-height:1.3; text-decoration:none; }
.c-ranking-tab.is-active { border-color:#df4f7d; background:#df4f7d; color:#fff; box-shadow:0 4px 14px rgba(223,79,125,.2); }
.c-ranking-updated { margin:10px 0 0; color:#858b92; font-size:12px; line-height:1.7; }
.c-ranking-list { display:grid; gap:16px; }

.c-ranking-item { position:relative; display:grid !important; grid-template-columns:minmax(180px,30%) minmax(0,1fr) minmax(180px,220px) !important; grid-template-areas:"head head head" "thumb body cta"; gap:14px 18px !important; align-items:start !important; }
.c-ranking-item > .c-ranking-card-head { grid-area:head; margin-bottom:0; }
.c-ranking-item > .c-ranking-thumb { grid-area:thumb; width:100% !important; min-width:0 !important; margin:0 !important; }
.c-ranking-item > .c-ranking-item__body { grid-area:body; min-width:0; }
.c-ranking-item > .c-cta-ranking { grid-area:cta; width:100%; min-width:0; margin:0; }
.c-ranking-item--rank1 { background:linear-gradient(180deg,#fffdf5 0%,#fff 42%); }
.c-ranking-item--rank2 { background:linear-gradient(180deg,#f8f9fb 0%,#fff 42%); }
.c-ranking-item--rank3 { background:linear-gradient(180deg,#fff8f3 0%,#fff 42%); }

.c-side-product--ranked { display:grid !important; grid-template-columns:72px minmax(0,1fr) !important; grid-template-areas:"head head" "thumb body"; gap:7px 10px !important; align-items:start !important; }
.c-side-rank-head { grid-area:head; display:flex; align-items:center; justify-content:space-between; gap:6px; width:100%; min-width:0; padding:5px 7px; border-radius:6px; background:#f5f6f7; }
.c-side-rank-head__rank { font-size:10px; font-weight:800; line-height:1.2; white-space:nowrap; }
.c-side-rank-head__status { display:inline-flex; align-items:center; gap:3px; }
.c-side-product--ranked .c-side-product__thumb { grid-area:thumb; width:72px; margin:0; }
.c-side-product--ranked .c-side-product__body { grid-area:body; min-width:0; }
.c-side-product--ranked .c-rank-movement { min-width:31px; min-height:18px; padding:2px 4px; font-size:8px; }
.c-side-product--ranked .c-rank-new { min-height:18px; padding:2px 4px; font-size:7px; }
.c-side-product--rank-1 .c-side-rank-head { background:#fff8dc; }
.c-side-product--rank-2 .c-side-rank-head { background:#f1f3f6; }
.c-side-product--rank-3 .c-side-rank-head { background:#fff0e6; }

@media (max-width:700px) {
  .c-ranking-page .c-section__head { display:block; }
  .c-ranking-tabs { gap:8px; margin-top:18px; }
  .c-ranking-tab { min-height:48px; padding:10px 8px; font-size:13px; }
  .c-home-rank--realtime { grid-template-columns:minmax(0,1fr) !important; gap:14px !important; }
  .c-home-rank--realtime .c-home-rank__item { width:100% !important; max-width:none !important; min-width:0 !important; }
  .c-ranking-item { grid-template-columns:108px minmax(0,1fr) !important; grid-template-areas:"head head" "thumb body" "cta cta"; gap:10px 12px !important; padding:13px !important; }
  .c-ranking-item > .c-ranking-thumb { width:108px !important; }
  .c-ranking-item__body h3 { margin-top:0; font-size:14px; line-height:1.5; }
  .c-ranking-item__body p { display:none; }
  .c-ranking-item__body .c-rating { margin-top:7px; flex-wrap:wrap; font-size:12px; }
  .c-ranking-item > .c-cta-ranking { padding:0; }
  .c-ranking-item .c-cta-ranking .c-price { justify-content:flex-start; }
  .c-ranking-item .c-cta-ranking .c-btn { width:100%; }
  .c-ranking-card-head { margin-bottom:8px; padding:6px 8px; }
  .c-ranking-item > .c-ranking-card-head { margin-bottom:0; }
  .c-ranking-card-head__rank { font-size:11px; }
  .c-rank-movement { min-width:34px; min-height:20px; padding:2px 5px; font-size:9px; }
  .c-rank-new { min-height:20px; padding:2px 5px; font-size:7px; }
}

@media (max-width:390px) {
  .c-ranking-item { grid-template-columns:94px minmax(0,1fr) !important; gap:9px 10px !important; padding:11px !important; }
  .c-ranking-item > .c-ranking-thumb { width:94px !important; }
  .c-ranking-card-head__rank { font-size:10px; }
}