.md3dr-rank{margin:16px 0}
.md3dr-rank-header{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 10px 0;gap:10px}
.md3dr-rank-title{font-weight:700}
.md3dr-rank-week{opacity:.7;font-size:.9em;white-space:nowrap}

.md3dr-list{list-style:none;margin:0;padding:0}
.md3dr-item{display:flex;gap:12px;padding:12px 8px;border-top:1px solid rgba(0,0,0,.08)}
.md3dr-item:first-child{border-top:none}
.md3dr-rankno{width:52px;flex:0 0 52px;font-weight:700;text-align:center}
.md3dr-rankno .md3dr-rankno-main{font-size:1.05em}
.md3dr-rankno .md3dr-rankno-badge{display:inline-block;margin-top:6px;padding:2px 6px;border-radius:4px;font-size:.8em;line-height:1.2}
.md3dr-rankno-badge.up{background:#e6f7e6;color:#0a7a0a;font-weight:700}
.md3dr-rankno-badge.down{background:rgba(0,0,0,.06);color:#444;font-weight:700}
.md3dr-rankno-badge.stay{background:rgba(0,0,0,.04);color:#666}

.md3dr-thumb{width:84px;flex:0 0 84px}
.md3dr-thumb-img{width:84px;height:auto;display:block;border-radius:4px}
.md3dr-thumb-ph{width:84px;height:84px;background:rgba(0,0,0,.06);border-radius:4px}

.md3dr-thumb-link{display:inline-block;position:relative;}

/* Rank overlay (enabled only on mobile) */
.md3dr-rank-overlay{display:none;position:absolute;left:-6px;top:-6px;z-index:2;background:rgba(255,255,255,.92);border:1px solid rgba(0,0,0,.15);border-radius:6px;padding:3px 6px;line-height:1.1;text-align:center;}
.md3dr-rank-overlay-main{display:block;font-weight:800;font-size:.95em;}
.md3dr-rank-overlay-badge{display:inline-block;margin-top:3px;padding:1px 6px;border-radius:4px;font-size:.75em;font-weight:800;}
.md3dr-rank-overlay-badge.up{background:#e6f7e6;color:#0a7a0a;}
.md3dr-rank-overlay-badge.down{background:rgba(0,0,0,.06);color:#444;}
.md3dr-rank-overlay-badge.stay{background:rgba(0,0,0,.04);color:#666;}

.md3dr-body{flex:1 1 auto;min-width:0}
.md3dr-title a{text-decoration:none;font-weight:700}
.md3dr-sub{margin-top:2px;font-size:.92em;opacity:.8;display:flex;flex-wrap:wrap;gap:8px}

.md3dr-meta{margin-top:6px;font-size:.95em;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.md3dr-price-now{font-weight:700}
.md3dr-price-was{text-decoration:line-through;margin-left:6px;opacity:.6}
.md3dr-price-off{margin-left:6px;color:#c00;font-weight:700}

.md3dr-badges{margin-top:6px;display:flex;flex-wrap:wrap;gap:6px}
.md3dr-badge{display:inline-block;padding:2px 8px;border-radius:999px;background:rgba(0,0,0,.06);font-size:.85em}
a.md3dr-badge{text-decoration:none}
a.md3dr-badge:hover{text-decoration:underline}
.md3dr-badge.md3dr-badge-genre{background:#eef2f5}

.md3dr-delta{margin-top:8px;font-size:.9em;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.md3dr-delta-badge{display:inline-block;padding:2px 8px;border-radius:4px;background:#e6f7e6;color:#0a7a0a;font-weight:700}
.md3dr-delta-sub{opacity:.75}

.md3dr-kv{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;font-size:.9em}
.md3dr-kv .k{opacity:.7}
.md3dr-kv .v{font-weight:700}
.md3dr-kv .v.plus{color:#0a7a0a}
.md3dr-kv .v.minus{color:#c00}

.md3dr-table-wrap{overflow-x:auto}
.md3dr-table{width:100%;border-collapse:collapse}
.md3dr-table th,.md3dr-table td{border-top:1px solid rgba(0,0,0,.08);padding:10px 8px;text-align:left;white-space:nowrap;vertical-align:top}
.md3dr-td-rank{font-weight:700;width:60px}
.md3dr-td-circle{max-width:420px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md3dr-td-tags{max-width:560px;white-space:normal}

/* Circle name: always bold (even when wrapped by a link / theme overrides) */
.md3dr-circle-link{font-weight:800 !important}
.md3dr-circle-name{font-weight:700 !important}

.md3dr-more{margin-top:10px;text-align:center}
.md3dr-more a{text-decoration:none;font-weight:700}

/* Mobile: 1行目=作品名, 2行目=金額, 3行目=ランキング/スコア情報 */
@media (max-width: 560px){
  .md3dr-list{padding-left:0;margin-left:0}
  /* Works list: prioritize content width (thumb + text). */
  .md3dr-item{gap:10px;padding:10px 0;position:relative;align-items:flex-start}

  /*
   * Move rank + UP/DOWN badge out of the left column.
   * We overlay it on the thumbnail area so the thumbnail can be larger.
   */
  /* Use overlay variant so we can reclaim width for thumbnail */
  .md3dr-rankno{display:none}
  .md3dr-rank-overlay{display:flex}

  /* thumbnail (larger on mobile) */
  .md3dr-thumb{width:92px;flex:0 0 92px;margin-left:0;position:relative}
  .md3dr-thumb-img,.md3dr-thumb-ph{width:92px}

  /* meta lines */
  /* Price line: use horizontal space (sale price can sit next to normal price) */
  .md3dr-meta{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px}
  .md3dr-kv{gap:8px}

  /* Circle table: change layout for mobile (card-like rows) */
  .md3dr-table-wrap{overflow-x:visible}
  .md3dr-table thead{display:none}
  .md3dr-table,
  .md3dr-table tbody,
  .md3dr-table tr,
  .md3dr-table td{display:block;width:100%}

  .md3dr-table tr{border-top:1px solid rgba(0,0,0,.08);padding:10px 6px}
  .md3dr-table tr:first-child{border-top:none}
  .md3dr-table td{border-top:none;padding:6px 0;white-space:normal}

  /* First line: Rank + Circle/Features */
  .md3dr-table td.md3dr-td-rank{padding-top:0;padding-bottom:2px;font-size:1.05em}
  .md3dr-table td.md3dr-td-circle{padding-top:0;padding-bottom:8px}
  .md3dr-table td.md3dr-td-rank:before,
  .md3dr-table td.md3dr-td-circle:before{content:'';display:none}

  /* Metrics lines with labels */
  .md3dr-table td:nth-child(3),
  .md3dr-table td:nth-child(4),
  .md3dr-table td:nth-child(5),
  .md3dr-table td:nth-child(6){display:flex;justify-content:space-between;gap:12px}

  .md3dr-table td:nth-child(3)::before{content:'平均スコア';opacity:.7}
  .md3dr-table td:nth-child(4)::before{content:'前週比';opacity:.7}
  .md3dr-table td:nth-child(5)::before{content:'4週トレンド';opacity:.7}
  .md3dr-table td:nth-child(6)::before{content:'作品数';opacity:.7}

  /* Ensure circle name stays bold even if theme overrides link styles */
  .md3dr-table td.md3dr-td-circle a.md3dr-circle-link{font-weight:800 !important;font-size:18px;line-height:1.25}
}