/* TASK-FE-PUBLIC-ROADMAP */
.rm-wrap { max-width: 1080px; margin: 0 auto; padding: 44px 20px 60px; }
.rm-header { text-align: center; margin-block-end: 30px; }
.rm-header h1 { font-size: clamp(24px, 4vw, 32px); margin: 0 0 10px; }
.rm-sub { color: var(--ent-mute, rgba(232,238,245,0.62)); margin: 0; font-size: 14.5px; }

.rm-section { margin-block-end: 34px; }
.rm-section h2 { font-size: 18px; margin: 0 0 14px; }

.rm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.rm-item {
  background: var(--ent-surface, #0F1C30);
  border: 1px solid var(--ent-border, rgba(255,255,255,0.08));
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rm-item-head { display: flex; align-items: center; gap: 8px; }
.rm-badge {
  font-size: 14px;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 600;
}
.rm-badge.live      { background: rgba(0,212,180,0.15); color: #00D4B4; }
.rm-badge.progress  { background: rgba(255,193,0,0.15); color: #FFC100; }
.rm-badge.planned   { background: rgba(91,141,239,0.15); color: #5B8DEF; }
.rm-badge.exploring { background: rgba(148,163,184,0.2); color: #94A3B8; }

.rm-item-title { margin: 0; font-size: 15.5px; font-weight: 700; line-height: 1.3; }
.rm-item-desc { margin: 0; color: var(--ent-mute, rgba(232,238,245,0.72)); font-size: 13px; line-height: 1.5; }

.rm-vote {
  align-self: flex-start;
  background: rgba(91,141,239,0.08);
  border: 1px solid rgba(91,141,239,0.25);
  color: #5B8DEF;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-block-start: 4px;
  min-height: 44px;
}
.rm-vote:hover { background: rgba(91,141,239,0.15); }
.rm-vote.voted { background: #00D4B4; color: #0B1524; border-color: #00D4B4; }
.rm-vote:focus-visible { outline: 2px solid #00D4B4; outline-offset: 2px; }

.rm-footer-note { text-align: center; margin-block-start: 32px; color: var(--ent-mute, rgba(232,238,245,0.62)); font-size: 13.5px; }
.rm-footer-note a { color: #00D4B4; text-decoration: none; }

@media (max-width: 520px) {
  .rm-grid { grid-template-columns: 1fr; }
}