/* Shared Top 10 button — /56 modal + /56/[slug] scope inject */
.dr-top10-btn{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  margin-top:16px;
  padding:14px 18px;
  border-radius:12px;
  text-decoration:none;
  box-sizing:border-box;
  background:linear-gradient(180deg,rgba(51,203,143,.12),rgba(51,203,143,.06));
  border:1px solid #0f7a49;
  color:#15211c;
  font-family:"Space Grotesk",system-ui,sans-serif;
  font-weight:600;
  font-size:15px;
  transition:transform .15s,box-shadow .15s,border-color .15s,background .15s;
}
.dr-top10-btn:hover{
  transform:translateY(-1px);
  border-color:#33CB8F;
  background:linear-gradient(180deg,rgba(51,203,143,.18),rgba(51,203,143,.08));
  box-shadow:0 10px 28px -14px rgba(15,122,73,.35);
}
.dr-top10-btn .ic{
  color:#0f7a49;
  font-size:1rem;
  flex-shrink:0;
  line-height:1;
}
.dr-top10-btn .tx{
  display:flex;
  flex-direction:column;
  line-height:1.2;
  min-width:0;
  color:#0f7a49;
}
.dr-top10-btn .tx small{
  font-family:"IBM Plex Mono",monospace;
  font-weight:400;
  font-size:.62rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#5d6f66;
  margin-top:4px;
}
.dr-top10-btn .ar{
  margin-left:auto;
  color:#0f7a49;
  font-size:1.1rem;
  flex-shrink:0;
}
.dr-top10-btn.is-soon{
  cursor:default;
  pointer-events:none;
  opacity:.78;
  border-color:#d3ddd8;
  background:#f6f8f7;
}
.dr-top10-btn.is-soon:hover{
  transform:none;
  box-shadow:none;
  border-color:#d3ddd8;
  background:#f6f8f7;
}
.dr-top10-btn.is-soon .tx{color:#5d6f66}
.dr-top10-btn.is-soon .ic,
.dr-top10-btn.is-soon .ar{color:#9aa8a1}

.modal-top10{padding:16px 24px 18px;border-bottom:1px solid #e6ece9;background:#fff}
.modal-top10 .dr-top10-btn{margin-top:0}

/* Scope /56/[slug] — header placement beside .sub */
header:has(.o56-header-meta){align-items:center}
header .o56-header-meta{
  display:flex;
  align-items:center;
  gap:clamp(10px,1.4vw,18px);
  flex-shrink:0;
  max-width:min(100%,560px);
}
header .o56-header-meta .sub{
  text-align:right;
  flex:0 1 auto;
}
header .o56-header-meta .dr-top10-btn{
  width:auto;
  max-width:min(38vw,300px);
  margin:0;
  flex-shrink:0;
  padding:8px 12px;
  gap:8px;
  font-size:12px;
  border-radius:10px;
  white-space:nowrap;
}
header .o56-header-meta .dr-top10-btn .tx small{
  font-size:.54rem;
  letter-spacing:.08em;
  margin-top:2px;
}
header .o56-header-meta .dr-top10-btn.is-soon{
  white-space:normal;
  max-width:min(42vw,320px);
}

@media (max-width:860px){
  header .o56-header-meta{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    width:100%;
    max-width:none;
  }
  header .o56-header-meta .sub{
    text-align:left;
  }
  header .o56-header-meta .dr-top10-btn{
    max-width:100%;
    width:100%;
    white-space:normal;
  }
}

@media (min-width:861px){
  .dr-top10-btn{margin-top:10px;padding:11px 14px;gap:10px;font-size:14px}
  header .o56-header-meta .dr-top10-btn{margin-top:0;padding:8px 12px;font-size:12px}
  .modal-top10 .dr-top10-btn{margin-top:0;padding:14px 18px;font-size:15px}
}