/* ════════════════════════════════════════════════════════════════════════
   marathon-badge.css — 대회 뱃지 (러너온 공식 개최 / 추천 / 제휴 6종)

   뷰: Views/Shared/_MarathonBadges.cshtml

   🐞 처음엔 알약 3개를 나란히 놓았는데 두 가지가 무너졌다(2026-08-06 지적).
      ① 목록 카드의 .marathon_card_body 가 세로 flex 라, 뱃지 묶음이 한 줄을 통째로
         차지해 카드가 늘어지고 줄바꿈이 났다. → 마크업에서 D-day·지역과 한 줄로 묶었다.
      ② D-day 가 이미 '파란 채움 알약' 인데 공식 뱃지도 파란 채움이라 둘이 싸웠다.
         같은 무게가 셋이면 아무것도 강조되지 않는다.

   그래서 **채움 → 테두리 → 글자만** 세 단계로 위계를 나눈다.
      공식 개최 : 채움(가장 강함) — 딱 하나뿐인 표식
      추천      : 테두리
      제휴      : 글자 + 앞점(가장 약함)

   ⚠ 색: 공식은 고정색(딥그린 + 흰 글자)이라 두 테마 모두 안전하다.
      나머지는 토큰을 쓰되, 글자가 얹히는 배경엔 틴트 토큰을 쓰지 않는다.
      [[home-refine-layer]] — 다크에서 -50 계열이 라이트 값으로 남는 사례를 실측했다.
   ══════════════════════════════════════════════════════════════════════ */

.ro-mbadges {
    display: inline-flex;      /* ⚠ block 이면 세로 flex 부모에서 한 줄을 통째로 먹는다 */
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    vertical-align: middle;
}

.ro-mbadge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.01em;
    white-space: nowrap;
    box-sizing: border-box;
}

/* ── 1단계: 공식 개최 — 유일하게 채운다 ──
   딥그린은 브랜드 로고색 계열이고, D-day 의 파랑과 색상환에서 멀어 서로 안 싸운다.
   두 색 다 고정이라 라이트·다크 어디서든 흰 글자 대비 5.9 가 유지된다. */
.ro-mbadge--official {
    background: #3F6B06;
    color: #fff;
    border-color: #3F6B06;
    padding-left: 7px;
}
.ro-mbadge--official::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 1px;
    background: currentColor;
    transform: rotate(45deg);   /* 작은 마름모 — 이모지 없이 '인증' 느낌만 준다 */
    opacity: 0.9;
}

/* ── 2단계: 추천 — 테두리만 ── */
.ro-mbadge--featured {
    background: transparent;
    color: var(--ro-accent-700, #416106);
    border-color: currentColor;
}

/* ── 3단계: 제휴 — 글자 + 앞점 ──
   가장 약한 표식이라 배경도 테두리도 없다. 점 색으로만 유형을 구분한다. */
.ro-mbadge--brand,
.ro-mbadge--promo,
.ro-mbadge--campaign,
.ro-mbadge--affiliate {
    background: transparent;
    border-color: transparent;
    color: var(--ro-text-sub);
    padding-left: 2px;
    padding-right: 4px;
    font-weight: 700;
}
.ro-mbadge--brand::before,
.ro-mbadge--promo::before,
.ro-mbadge--campaign::before,
.ro-mbadge--affiliate::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ro-mbadge--brand::before    { background: var(--ro-primary-600); }
.ro-mbadge--promo::before    { background: #D97706; }
.ro-mbadge--campaign::before { background: #0891B2; }
.ro-mbadge--affiliate::before{ background: var(--ro-text-muted); }

/* ── 크기 ── */
.ro-mbadges--sm .ro-mbadge { height: 20px; padding: 0 8px; font-size: 10.5px; }
.ro-mbadges--sm .ro-mbadge--official { padding-left: 6px; }
.ro-mbadges--lg .ro-mbadge { height: 28px; padding: 0 13px; font-size: 12.5px; gap: 5px; }
.ro-mbadges--lg .ro-mbadge--official { padding-left: 11px; }

/* 상세 히어로에선 제목 위 한 줄을 따로 쓴다 */
.ro-mbadges--lg { display: flex; margin-bottom: 10px; }

/* ── 다크 보정 ──
   추천의 accent-700 은 다크에서 밝은 그린으로 뒤집히므로 그대로 두면 된다.
   제휴 글자는 --ro-text-sub 이 뒤집히므로 역시 그대로. 공식은 고정색이라 손댈 것이 없다. */

/* ── 목록 카드 한 줄 ──
   D-day·지역·뱃지를 한 줄에 놓는다. 좁아지면 자연스럽게 접힌다. */
.marathon_card_tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
}

@media (max-width: 520px) {
    /* 좁은 화면에선 제휴 글자까지 넣으면 두 줄이 된다 — 가장 약한 것부터 감춘다 */
    .ro-mbadges--sm .ro-mbadge--brand,
    .ro-mbadges--sm .ro-mbadge--promo,
    .ro-mbadges--sm .ro-mbadge--campaign,
    .ro-mbadges--sm .ro-mbadge--affiliate { display: none; }
}