/* CDB Reverse Rank modern styles (responsive & labeled) */
.cdb-ref-card {
  --cdb-surface: mistyrose;
  --cdb-border: #1d2836;
  --cdb-text: #222;
  --cdb-muted: #555;
  background: var(--cdb-surface);
  color: var(--cdb-text);
  border: 1px solid var(--cdb-border);          /* ← 枠線復活 */
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
  overflow: hidden;
  margin: 8px 0 18px;
}

.cdb-ref-header {
  display:flex; align-items:center; justify-content:flex-start;
  padding:8px 10px;
  background: mistyrose;
  border-bottom:0 !important;
  gap:6px; flex-wrap:nowrap;
}
.cdb-ref-title { font-weight:700; letter-spacing:.2px; font-size:16px; }

.cdb-ref-controls { display:flex; gap:5px; align-items:center; flex-wrap:nowrap; width:100%; }
.cdb-ref-controls #cdb-ref-form { display:flex !important; gap:7px !important; align-items:center; justify-content:flex-start; flex-wrap:nowrap !important; width:100%; position:relative; }

.cdb-ref-controls label { font-size:12px; color: var(--cdb-muted); display:flex; gap:6px; align-items:center; }
.cdb-ref-controls select,
.cdb-ref-controls input,
.cdb-ref-controls button {
  background:#fff; color:#222; border:1px solid #c9aeb2;
  border-radius:7px; padding:5px 6px; font-size:11px;
}
.cdb-ref-controls button {
  cursor:pointer;
  padding:2px 7px !important;
  line-height:1.25 !important;
  min-height:0 !important;
  height:auto !important;
  width:auto !important;
}
.cdb-period-note {
  color:#000;
  font-size:21px;
  font-weight:800;
  line-height:1.25;
  white-space:nowrap;
  position:absolute;
  left:0;
  right:0;
  width:100%;
  transform:translateX(1em);
  text-align:center;
  display:inline-flex;
  align-items:baseline;
  justify-content:center;
  pointer-events:none;
}
.cdb-title-do {
  color:#e60012;
  font-size:25px;
  font-weight:900;
  line-height:1;
  display:inline-flex;
  align-items:baseline;
  align-self:baseline;
}

.cdb-ref-table { width:100%; border-collapse:separate; border-spacing:0; background:#fff; margin:0 !important; padding:0 !important; }
.cdb-ref-card .cdb-ref-table { table-layout: fixed; }
.cdb-ref-table thead th {
  text-align:left; font-size:12px !important; font-weight:700 !important; letter-spacing:0; text-transform:none;
  color:#000 !important; padding:10px 3px !important;
  border-bottom:1px solid var(--cdb-border);   /* ← 見出しボーダー */
  white-space:nowrap;
}
.cdb-ref-card .cdb-ref-table thead th,
.cdb-ref-card .cdb-ref-table thead th.cdb-count {
  color:#000 !important;
  font-size:12px !important;
  font-weight:700 !important;
  line-height:1.35 !important;
  text-align:left !important;
}
.cdb-ref-table tbody td {
  padding:2px 3px !important;
  font-size:12px;
  line-height:1.35;
  vertical-align:middle !important;
  border-bottom:1px solid var(--cdb-border);   /* ← 行ボーダー復活（PC） */
}
.cdb-ref-table tbody tr:hover { background: rgba(78,168,255,.06); }

/* 3列の中身を文字のベースラインではなく、同じ上下中央基準で揃える */
.cdb-ref-card .cdb-ref-table tbody td > .cdb-val {
  display:flex !important;
  align-items:center !important;
  min-height:18px;
  margin:0 !important;
  padding:0 !important;
}
.cdb-ref-card .cdb-ref-table tbody td[data-col="rank"] > .cdb-val {
  justify-content:center !important;
}
.cdb-ref-card .cdb-ref-table tbody td[data-col="label"] > .cdb-val {
  justify-content:flex-start !important;
}
.cdb-ref-card .cdb-ref-table tbody td[data-col="count"] > .cdb-val {
  justify-content:flex-end !important;
}

/* 長い参照元（URL/タイトル）でも横はみ出しを防ぐ */
.cdb-label,
.cdb-label a,
.cdb-ref-table td,
.cdb-ref-table th {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.cdb-label { min-width: 0; }
.cdb-label a { min-width: 0; display: inline; }

.cdb-rank-badge {
  display:inline-flex; align-items:center; justify-content:center;
  width:auto !important; height:auto !important; min-width:0; border-radius:0;
  background:transparent; border:0;
  font-size:10px !important; line-height:18px !important;
  font-weight:700; color:#000; margin:0; flex:0 0 auto;
}
.cdb-ref-table tbody tr:nth-child(-n+10) .cdb-rank-badge {
  width:18px !important; height:18px !important; min-width:18px;
  border-radius:2px; background:#e60012 !important; color:#fff !important;
}
.cdb-ref-table tbody tr:nth-child(n+11):nth-child(-n+30) .cdb-rank-badge {
  width:18px !important; height:18px !important; min-width:18px;
  border-radius:50%; background:#f39800 !important; color:#fff !important;
}
.cdb-ref-table tbody tr:nth-child(n+31) .cdb-rank-badge {
  width:auto !important; height:auto !important; min-width:0;
  border-radius:0; background:transparent !important; color:#000 !important;
}

.cdb-top-1 .cdb-label a, .cdb-top-1 .cdb-label { font-size:12px; font-weight:800; }
.cdb-top-2 .cdb-label a, .cdb-top-2 .cdb-label { font-size:12px; font-weight:800; }
.cdb-top-3 .cdb-label a, .cdb-top-3 .cdb-label { font-size:12px; font-weight:700; }
.cdb-top-4 .cdb-label a, .cdb-top-4 .cdb-label,
.cdb-top-5 .cdb-label a, .cdb-top-5 .cdb-label { font-weight:700; }
.cdb-ref-table tbody tr:nth-child(-n+10) .cdb-label,
.cdb-ref-table tbody tr:nth-child(-n+10) .cdb-label a { font-weight:800 !important; }

.cdb-partner-chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px; border-radius:999px; font-size:12px;
  background:rgba(34,197,94,.12); color:#34d399; border:1px solid rgba(34,197,94,.25);
  margin-left:8px;
}
.cdb-count { text-align:right !important; font-variant-numeric:tabular-nums; white-space:nowrap; color:#000 !important; }
.cdb-lastseen { color:var(--cdb-muted); font-size:13px; white-space:nowrap; }

/* 狭いサイドカラム向けの3列表示 */
.cdb-ref-table th:nth-child(1), .cdb-ref-table td:nth-child(1) { width:10% !important; text-align:center !important; padding-left:0 !important; padding-right:0 !important; }
.cdb-ref-table th:nth-child(2), .cdb-ref-table td:nth-child(2) { width:80% !important; text-align:left !important; }
.cdb-ref-table th:nth-child(3), .cdb-ref-table td:nth-child(3) { width:10% !important; text-align:right !important; }
.cdb-ref-card .cdb-ref-table tbody td { padding:2px 3px !important; }
.cdb-ref-card .cdb-label { font-size:16px !important; line-height:1.35; word-break:normal; overflow-wrap:anywhere; }
.cdb-ref-card .cdb-label a,
.cdb-ref-card .cdb-label .cdb-val { font-size:16px !important; line-height:1.05 !important; word-break:normal; overflow-wrap:anywhere; margin:0 !important; padding:0 !important; }
.cdb-ref-card .cdb-label .cdb-val { display:block !important; }
.cdb-ref-card .cdb-count { font-size:12px !important; }
.cdb-ref-card .cdb-lastseen { font-size:10px !important; }
.cdb-ref-card .cdb-ref-table tbody tr { height:auto !important; min-height:0 !important; }
.cdb-ref-title { flex:0 0 25px; }
.cdb-ref-title img { display:block; width:48px !important; height:auto !important; margin:0 !important; object-fit:contain; image-rendering:-webkit-optimize-contrast; }
.cdb-ref-controls button { margin-left:auto; }
.cdb-ref-footer {
  background:mistyrose;
  color:#000;
  font-size:10px !important;
  line-height:1.1;
  text-align:center;
  padding:0 4px !important;
  margin:0 !important;
  height:28px;
  min-height:28px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  width:100%;
  max-width:100%;
  overflow:hidden;
}
.cdb-ref-card::after { content:none; display:none; }

/* ====== モバイル最適化（<= 640px）====== */
@media (max-width: 640px) {
  .cdb-ref-controls { width:100%; }
  .cdb-ref-controls label { width:calc(50% - 6px); }
  .cdb-ref-controls input[type="number"] { width:100%; }
  .cdb-ref-controls button { width:100%; }

  /* 見出しは隠し、各セルにラベルを追加表示 */
  .cdb-ref-table thead { display:none; }

  .cdb-ref-table tbody tr {
    display:block;
    border-top:1px solid var(--cdb-border);     /* ← 行の上ボーダー（カード化） */
    border-bottom:1px solid var(--cdb-border);  /* ← 行の下ボーダー */
    margin:8px 0;
    padding:4px 0;
    background: transparent;
  }

  .cdb-ref-table tbody td {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 14px;
    border-bottom:1px dashed var(--cdb-border); /* ← セル間ボーダー（モバイル） */
  }
  .cdb-ref-table tbody td:last-child {
    border-bottom:none;                          /* 最後はボーダー無し */
  }

  /* 各セル左にラベルを表示（data-label を使用） */
  .cdb-ref-table tbody td {
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
  }

  /* 値側（PHPで <span class="cdb-val"> に包んでいる） */
  .cdb-ref-table .cdb-val {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    text-align: right;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .cdb-ref-table tbody td::before {
    content: attr(data-label);
    color: var(--cdb-muted);
    font-size:12px;
    margin-right:12px;
    flex: 1 1 auto;
    text-align:left;
  }

  /* 値側は右寄せ（参照元は左寄せのまま） */
  .cdb-ref-table tbody td[data-col="count"],
  .cdb-ref-table tbody td[data-col="lastseen"] {
    justify-content: flex-end;
  }
  .cdb-ref-table tbody td[data-col="label"] {
    justify-content: flex-start;
  }
  .cdb-ref-table tbody td[data-col="label"] .cdb-val {
    text-align: left;
  }
}



/* CDB Credit badge (required) */
.cdb-rr-credit{
  position:static;
  width:max-content;
  max-width:100%;
  margin:3px auto 5px;
  padding:0;
  background:transparent;
  color:#666;
  font-size:9px;
  line-height:1.2;
  text-align:center;
  border-radius:0;
  box-shadow:none;
  z-index:auto;
  opacity:.8;
}
.cdb-rr-credit svg{width:10px;height:10px;vertical-align:middle;margin-right:2px}
.cdb-rr-credit a{color:#666;text-decoration:none;font-weight:600}
.cdb-rr-locked{padding:16px;border:1px dashed #e00;background:#fff5f5;color:#c00;border-radius:8px}