.khrr-ranking {
  --khrr-border: rgba(15, 23, 42, .10);
  --khrr-border-strong: rgba(15, 23, 42, .16);
  --khrr-bg: #fff;
  --khrr-bg-soft: #f8fafc;
  --khrr-text: #1f2937;
  --khrr-muted: #64748b;
  --khrr-accent: #2563eb;
  --khrr-star: #f59e0b;
  --khrr-shadow: 0 10px 28px rgba(15, 23, 42, .06);
  margin: 1.75rem 0;
  color: var(--khrr-text);
}

.khrr-ranking-section {
  margin: 0 0 1.75rem;
}

.khrr-ranking-title {
  margin: 0 0 .9rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: clamp(1.08rem, 2vw, 1.28rem);
  line-height: 1.45;
  font-weight: 800;
  letter-spacing: .01em;
}

.khrr-list {
  display: grid;
  gap: .75rem;
  margin: 0;
  padding: 0;
}

.khrr-item {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: .85rem;
  align-items: center;
  padding: .9rem 1rem;
  border: 1px solid var(--khrr-border);
  border-radius: 16px;
  background: var(--khrr-bg);
  box-shadow: 0 1px 0 rgba(15, 23, 42, .03);
  color: var(--khrr-text);
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease;
}

.khrr-item:hover,
.khrr-item:focus-visible {
  transform: translateY(-1px);
  border-color: var(--khrr-border-strong);
  box-shadow: var(--khrr-shadow);
  outline: none;
  text-decoration: none;
}

.khrr-item:focus-visible {
  box-shadow: var(--khrr-shadow), 0 0 0 3px rgba(37, 99, 235, .18);
}

.khrr-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  background: var(--khrr-bg-soft);
  border: 1px solid var(--khrr-border);
  color: #334155;
  font-weight: 800;
  font-size: .95rem;
  line-height: 1;
}

.khrr-item--rank-1 .khrr-rank {
  background: #fef3c7;
  border-color: #facc15;
  color: #713f12;
}

.khrr-item--rank-2 .khrr-rank {
  background: #e2e8f0;
  border-color: #cbd5e1;
  color: #334155;
}

.khrr-item--rank-3 .khrr-rank {
  background: #fed7aa;
  border-color: #fb923c;
  color: #7c2d12;
}

.khrr-main {
  display: block;
  min-width: 0;
}

.khrr-name {
  display: inline-flex;
  max-width: 100%;
  color: var(--khrr-text);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.4;
  text-decoration: none;
}

.khrr-item:hover .khrr-name,
.khrr-item:focus-visible .khrr-name {
  color: var(--khrr-text);
  text-decoration: none;
}

.khrr-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem .65rem;
  margin-top: .35rem;
  font-size: .88rem;
  color: var(--khrr-muted);
}

.khrr-rating {
  display: inline-flex;
  align-items: center;
  height: 1.65rem;
  padding: 0 .55rem;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 800;
  line-height: 1;
}

.khrr-count,
.khrr-score {
  display: inline-flex;
  align-items: center;
  height: 1.65rem;
  padding: 0 .55rem;
  border-radius: 999px;
  background: var(--khrr-bg-soft);
  color: #475569;
  white-space: nowrap;
  line-height: 1;
}

.khrr-stars {
  position: relative;
  display: inline-block;
  width: 5.25em;
  height: 1em;
  line-height: 1;
  font-size: .95rem;
  letter-spacing: .05em;
  color: #d6dbe3;
  overflow: hidden;
  vertical-align: -.08em;
}

.khrr-stars-base,
.khrr-stars-fill {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  white-space: nowrap;
}

.khrr-stars-fill {
  color: var(--khrr-star);
  overflow: hidden;
}

.khrr-note {
  margin: .7rem 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #64748b;
  font-size: .74rem;
  line-height: 1.7;
}

.khrr-empty {
  margin: 0;
  padding: .95rem 1rem;
  border: 1px dashed var(--khrr-border-strong);
  border-radius: 14px;
  background: var(--khrr-bg-soft);
  color: var(--khrr-muted);
  font-size: .94rem;
  line-height: 1.7;
}

.khrr-ranking--all {
  display: grid;
  gap: 1.25rem;
}

.khrr-debug {
  margin: 1rem 0;
  padding: .9rem 1rem;
  border: 1px dashed rgba(0,0,0,.25);
  border-radius: 10px;
  background: #fffdf5;
  font-size: .82rem;
  color: #333;
}
.khrr-debug summary { cursor: pointer; font-weight: 700; }
.khrr-debug-body { margin-top: .75rem; }
.khrr-debug code { background: rgba(0,0,0,.06); padding: .1em .25em; border-radius: 4px; }
.khrr-debug-scroll { overflow: auto; max-width: 100%; }
.khrr-debug-table { border-collapse: collapse; min-width: 760px; width: 100%; }
.khrr-debug-table th,
.khrr-debug-table td { border: 1px solid rgba(0,0,0,.12); padding: .35rem .45rem; text-align: left; vertical-align: top; }
.khrr-debug-table th { background: rgba(0,0,0,.04); }

@media (max-width: 600px) {
  .khrr-item {
    grid-template-columns: 2.25rem minmax(0, 1fr);
    align-items: start;
    gap: .7rem;
    padding: .85rem;
    border-radius: 14px;
  }
  .khrr-rank {
    width: 2.05rem;
    height: 2.05rem;
    font-size: .86rem;
  }
  .khrr-meta {
    gap: .35rem .45rem;
    font-size: .82rem;
  }
  .khrr-rating,
  .khrr-count,
  .khrr-score {
    height: 1.55rem;
    padding: 0 .48rem;
  }
}


/* Theme reset: SWELL等の見出し装飾をランキング内では打ち消す */
.khrr-ranking .khrr-ranking-title {
  border: 0 !important;
  border-left: 0 !important;
  padding-left: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.khrr-ranking .khrr-ranking-title::before,
.khrr-ranking .khrr-ranking-title::after {
  content: none !important;
  display: none !important;
}

/* 注意文はメタ情報相当の控えめ表示 */
.khrr-ranking .khrr-note {
  margin: .55rem 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #64748b !important;
  font-size: .76rem !important;
  line-height: 1.65 !important;
}