/* 모드 페이지의 "서버" 콘텐츠 카드.
   모드 카드와 달리 접속자 수와 주소가 가장 중요해서 그 둘을 앞세웁니다. */

.mods-server-bar {
  margin: 0 0 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.mods-server-chip {
  padding: 8px 13px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #9fb0a7;
  background: #141b17;
  border: 1px solid #26312b;
  border-radius: 999px;
  font: inherit;
  font-size: .74rem;
  font-weight: 750;
  cursor: pointer;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}

.mods-server-chip:hover { color: #e6f0ea; border-color: #37453e; }
.mods-server-chip i { font-size: .68rem; color: #5d6f66; }

.mods-server-chip.active {
  color: #07140c;
  background: #1bd96a;
  border-color: #1bd96a;
}
.mods-server-chip.active i { color: #07140c; }

.mods-server-grid { display:grid!important;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))!important;gap:16px!important;width:100%!important; }

.mods-server-card {
  min-width: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #111715;
  border: 1px solid rgba(255, 255, 255, .08);
  min-height:210px;border-radius:16px;
  transition: border-color .18s ease, transform .18s ease;
}

.mods-server-card:hover { border-color: rgba(27, 217, 106, .3); transform: translateY(-2px); }

.mods-server-top {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
}

.mods-server-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #5f7168;
  background: #1b241f;
  border-radius: 11px;
}
.mods-server-icon img { width: 100%; height: 100%; object-fit: cover; }

.mods-server-heading { min-width: 0; display: grid; gap: 3px; }
.mods-server-heading strong {
  overflow: hidden;
  color: #f1f7f4;
  font-size: .92rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mods-server-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #7e8f86;
  font-size: .62rem;
  font-weight: 750;
}
.mods-server-tag i { font-size: .55rem; color: #4f6058; }

/* 접속자 수 — 초록 점이 살아 있음을 뜻합니다. */
.mods-server-players {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  color: #8ea79b;
  font-size: .82rem;
  font-weight: 850;
  white-space: nowrap;
}
.mods-server-players small { color: #63736b; font-size: .62rem; font-weight: 700; }
.mods-server-players i { font-size: .5rem; }

.mods-server-card.is-online .mods-server-players { color: #4fe08a; }
.mods-server-card.is-online .mods-server-players i { color: #1bd96a; }
.mods-server-card.is-offline .mods-server-players,
.mods-server-card.is-unknown .mods-server-players { color: #8a6f6f; font-size: .68rem; }
.mods-server-card.is-offline .mods-server-players i { color: #d2554f; }

.mods-server-blurb {
  margin: 0;
  color: #93a49b;
  font-size: .72rem;
  line-height: 1.6;
}

.mods-server-motd {
  margin: 0;
  padding: 8px 10px;
  overflow: hidden;
  color: #7d8f86;
  background: #0d1310;
  border-radius: 8px;
  font-size: .64rem;
  line-height: 1.5;
}
.mods-server-motd[hidden] { display: none; }

.mods-server-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mods-server-address {
  min-width: 0;
  padding: 7px 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #cddfd5;
  background: #18211c;
  border: 1px solid #27332c;
  border-radius: 8px;
  font: inherit;
  font-size: .68rem;
  font-weight: 750;
  cursor: pointer;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.mods-server-address span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mods-server-address i { flex: 0 0 auto; color: #6d8078; font-size: .64rem; }
.mods-server-address:hover { color: #fff; background: #1f2c25; border-color: #35463d; }
.mods-server-address.copied { color: #07140c; background: #1bd96a; border-color: #1bd96a; }
.mods-server-address.copied i { color: #07140c; }

.mods-server-version {
  flex: 0 0 auto;
  overflow: hidden;
  color: #67786f;
  font-size: .61rem;
  font-weight: 700;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 서버도 모드 카탈로그와 정확히 같은 카드 뼈대와 그리드를 사용합니다. */
body.mods-server-mode #modsResults.mods-grid{grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:20px}
body.mods-server-mode .mods-server-card{min-width:0;min-height:0;padding:10px 10px 0;gap:0;border-radius:20px;background:var(--mods-panel)}
.mods-server-cover-art{width:100%;height:100%;display:grid;place-items:center;color:#1bd96a;font-size:4rem;background:radial-gradient(circle at 28% 22%,rgba(27,217,106,.24),transparent 36%),linear-gradient(135deg,#17261f,#0c1511 58%,#13261c)}
.mods-server-cover-art i{filter:drop-shadow(0 10px 22px rgba(0,0,0,.35))}
body.mods-server-mode .mods-server-icon{display:grid;place-items:center;color:#1bd96a;font-size:1.55rem;overflow:hidden}
body.mods-server-mode .mods-server-icon img{width:100%;height:100%;display:block;object-fit:cover}
.mods-server-spec{min-height:72px}.mods-server-motd{margin:0;display:-webkit-box;overflow:hidden;color:#91a098;font-size:.66rem;line-height:1.45;-webkit-box-orient:vertical;-webkit-line-clamp:2}.mods-server-meta{gap:8px}.mods-server-players{display:inline-flex;align-items:center;gap:5px;color:#1bd96a;font-size:.66rem;white-space:nowrap}.mods-server-players small{color:#68766f;font-size:.58rem}.mods-server-address{min-width:0;margin-left:auto;padding:0;display:inline-flex;align-items:center;gap:5px;overflow:hidden;color:#85938c;background:none;border:0;font:inherit;cursor:pointer}.mods-server-address span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mods-server-address:hover,.mods-server-address.copied{color:#1bd96a;background:none}
.mods-weekly-server{flex:0 0 310px;overflow:hidden;color:inherit;background:var(--mods-panel);border:1px solid var(--mods-line);border-radius:15px;cursor:pointer}.mods-weekly-server-media{display:grid;place-items:center;color:#1bd96a;font-size:2.3rem;background:radial-gradient(circle at 35% 30%,rgba(27,217,106,.24),transparent 42%),#101a15}.mods-weekly-server-thumb{display:grid;place-items:center;color:#1bd96a;background:#18251e}

@media (max-width: 620px) {
  .mods-server-grid { grid-template-columns: 1fr; }
  .mods-server-foot { align-items: stretch; flex-direction: column; gap: 7px; }
  .mods-server-version { text-align: left; }
}