/* ============================================================================
   pages-pro.css — 전역 페이지 공통 패턴 (2026-05-28 도입)

   목적:
     - 깨진 .runneron_highlight (gradient text-fill transparent) 전역 정상화
     - 출발선 카운터 / 도움말 카드 패턴을 어느 페이지에서나 재사용
     - 라이트·다크 모두 토큰만으로 작동

   _Layout.cshtml 에서 site.css·tokens 다음에 1회 로드 → 모든 페이지에 적용
   ============================================================================ */

/* ─────────────────────────────────────────────────────────────────────────
   1. .runneron_highlight 안전화
   기존: linear-gradient + -webkit-text-fill-color: transparent
        → 폰트/브라우저 이슈 시 글자 자체가 안 보이는 버그.
   변경: 단색 + opaque, 살짝 줄어든 무게(weight 800)로 본문 위계 보호
   ───────────────────────────────────────────────────────────────────────── */
.runneron_highlight {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--ro-primary-600, #16a34a) !important;
    font-weight: 800 !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   2. 페이지 공용 출발선/카운터 알약 — .ro-hero-stat
   사용처: 어떤 페이지든 큰 숫자 강조가 필요할 때 (대회 N개, 멤버 N명 등)
   ───────────────────────────────────────────────────────────────────────── */
.ro-hero-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    margin: 10px 0 4px;
    padding: 8px 16px 8px 14px;
    background: var(--ro-primary-50, rgba(34,197,94,0.10));
    color: var(--ro-primary-700);
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    border: 1px solid transparent;
}
.ro-hero-stat__num {
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--ro-primary-700);
}
.ro-hero-stat__text {
    font-weight: 600;
    color: var(--ro-primary-700);
    opacity: 0.85;
}
[data-theme="dark"] .ro-hero-stat,
html[data-theme="dark"] .ro-hero-stat {
    background: rgba(34,197,94,0.12);
    border-color: rgba(34,197,94,0.20);
}

/* 다른 색 변형 (예: accent / warn) — 페이지 컨텍스트에 따라 */
.ro-hero-stat--accent  { background: var(--ro-accent-50,  rgba(99,102,241,0.10));  color: var(--ro-accent-700,  #4338ca); }
.ro-hero-stat--accent  .ro-hero-stat__num,
.ro-hero-stat--accent  .ro-hero-stat__text { color: var(--ro-accent-700,  #4338ca); }
.ro-hero-stat--warn    { background: var(--ro-warn-50,    rgba(234,179,8,0.10));   color: var(--ro-warn-700,    #a16207); }
.ro-hero-stat--warn    .ro-hero-stat__num,
.ro-hero-stat--warn    .ro-hero-stat__text { color: var(--ro-warn-700,    #a16207); }
.ro-hero-stat--success { background: var(--ro-success-50, rgba(16,185,129,0.10)); color: var(--ro-success-700, #047857); }
.ro-hero-stat--success .ro-hero-stat__num,
.ro-hero-stat--success .ro-hero-stat__text { color: var(--ro-success-700, #047857); }

/* ─────────────────────────────────────────────────────────────────────────
   3. 페이지 공용 도움말 카드 — .ro-help-card
   사용처: "사용 방법" "이용 안내" 류 4단계 번호 카드
   토글 버튼: data-help-target="<id>" 속성으로 site.js 가 처리
   ───────────────────────────────────────────────────────────────────────── */
.ro-help-card {
    margin-top: 18px;
    max-width: 760px;
    padding: 22px;
    background: var(--ro-surface);
    border: 1px solid var(--ro-border);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.04);
}
[data-theme="dark"] .ro-help-card,
html[data-theme="dark"] .ro-help-card {
    box-shadow: 0 1px 2px rgba(0,0,0,0.30), 0 2px 8px rgba(0,0,0,0.20);
}
.ro-help-card__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 720px) {
    .ro-help-card__list { grid-template-columns: 1fr 1fr; gap: 18px 22px; }
}
.ro-help-card__item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.ro-help-card__num {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 10px;
    background: var(--ro-primary-50, rgba(34,197,94,0.10));
    color: var(--ro-primary-700);
    font-weight: 900;
    font-size: 12.5px;
    letter-spacing: -0.02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}
.ro-help-card__item > div { min-width: 0; }
.ro-help-card__item strong {
    display: block;
    font-size: 14.5px;
    font-weight: 800;
    color: var(--ro-text);
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}
.ro-help-card__item p {
    margin: 0;
    font-size: 13px;
    color: var(--ro-text-sub);
    line-height: 1.65;
}

/* ─────────────────────────────────────────────────────────────────────────
   4. 페이지 공용 액션 행 — primary + ghost 같은 사이즈
   ───────────────────────────────────────────────────────────────────────── */
.ro-hero-actions {
    margin-top: 22px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.ro-hero-actions .ro-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    font-size: 14px;
    border-radius: 12px;
    line-height: 1.2;
}
.ro-hero-actions .ro-btn svg { flex-shrink: 0; }
@media (max-width: 480px) {
    .ro-hero-actions .ro-btn { flex: 1 1 calc(50% - 5px); justify-content: center; }
}