/* =====================================================================
 * NEONIX 라이더 UI 스킨 (rider_ui.css)  — 2026-09-02
 * ---------------------------------------------------------------------
 * 대상은 **라이더가 보는 두 화면**뿐이다.
 *   (1) 라이더 로그인  /rider          -> `body.gate-body--rider`
 *   (2) 개인실적 확인  대시보드 오버레이 · /rider/me 현황탭
 *                                      -> `.sl-entry` / `#sl-gate` / `#sl-result`
 *
 * 왜 있나 (오너 지적 2026-09-02: "답도 없이 알록달록하다")
 *   memo/UI_UX_ONE_POINT_REFACTOR_PLAN.md 의 처방을 이 두 화면에만 적용한다.
 *   원칙: **90% 무채색 + 액션 1색(시안) + 실시간 핑(초록 점) 뿐.**
 *   숫자는 tabular-nums + 자간 -0.03em 으로 응집시킨다.
 *
 * ⛔ 범위 밖으로 새지 말 것 — `renderMiniMissionCards` / `.peak-card` / `.progress-fill`
 *    은 **지사장 관제판이 같이 쓰는 부품**이다. 그래서 여기서는 전부
 *    `#sl-result` 안쪽으로만 눌러 덮는다(`!important` 는 인라인 스타일을 이기려는 것).
 *    선택자에서 `#sl-result` 를 떼면 그 순간 라이브 관제판이 같이 바뀐다.
 *
 * ⚠️ 반드시 `neonix-theme.css` **뒤에** 로드한다. 라이트 모드 오버라이드
 *    (`html[data-theme="light"] #sl-overlay ...`)와 특정성이 맞물려 있어,
 *    앞에 두면 라이트에서 옛 색이 되살아난다.
 * ===================================================================== */

/* ── 0. 숫자 타이포 (memo §1-병목5) ────────────────────────────────── */
.nx-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    letter-spacing: -0.03em;
}


/* ═══════════════════════════════════════════════════════════════════
   1. 라이더 로그인 문짝 (/rider)
   지사장 문짝(login/register/recovery)은 건드리지 않는다 — 저긴 승인된 화면이라
   `--rider` 한 겹으로만 갈라 놓는다.
   ═══════════════════════════════════════════════════════════════════ */

/* 상단 청록 헤이즈 제거 */
.gate-body--rider .gate-main::before { display: none; }

/* 시안->보라 그라데이션 링 제거. 카드는 1px 선 + 미세 그림자만 (memo §1-병목5) */
.gate-body--rider .gate-card::before { display: none; }
.gate-body--rider .gate-card {
    background: var(--dr-surface);
    border: 1px solid var(--dr-line);
    border-radius: 16px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}

/* 브랜드 마크 — 네온 글로우 제거. SVG 가 currentColor 라 색은 여기서 정한다 */
.gate-body--rider .brand-mark {
    width: 34px;
    height: 34px;
    margin-bottom: 14px;
    filter: none;
    color: var(--dr-muted);
}

/* "라이더 전용" — 시안 알약 + 발광 점 -> 무채색 라벨 */
.gate-body--rider .door-badge {
    background: transparent;
    border: 1px solid var(--dr-line);
    color: var(--dr-muted);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.26rem 0.6rem;
    margin-bottom: 0.85rem;
}
.gate-body--rider .door-badge .dot { display: none; }

.gate-body--rider .door-title {
    font-size: clamp(1.32rem, 5.4vw, 1.5rem);
    font-weight: 800;
    letter-spacing: -0.4px;
}
.gate-body--rider .door-sub { font-size: 0.85rem; }
.gate-body--rider .door-head { margin-bottom: 1.6rem; }

.gate-body--rider .door-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--dr-muted);
}
.gate-body--rider .gate-card input {
    border-radius: 10px;
    padding: 0.82rem 0.9rem;
    font-size: 0.95rem;
    background: var(--dr-bg);
}
.gate-body--rider .gate-card input:focus {
    border-color: var(--dr-brand);
    background: var(--dr-bg);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12);
}

/* 유일한 액션 컬러. 30px 청록 발광은 걷어내고 1px 깊이만 남긴다 */
.gate-body--rider .door-btn {
    border-radius: 10px;
    font-weight: 700;
    padding: 0.85rem 1.4rem;
}
.gate-body--rider .door-btn--primary {
    background: var(--dr-brand);
    color: #04121a;
    border: 1px solid rgba(0, 0, 0, 0.14);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}
.gate-body--rider .door-btn--primary:hover { filter: brightness(1.05); }
/* 보조 버튼("다시 입력") — door.css 의 기본 .door-btn 은 border:0 + 투명이라 안 보인다 */
.gate-body--rider .door-btn:not(.door-btn--primary) {
    background: transparent;
    border: 1px solid var(--dr-line);
    color: var(--dr-muted);
}
.gate-body--rider .door-btn:not(.door-btn--primary):hover {
    border-color: var(--dr-muted);
    color: var(--dr-txt);
}

/* 겸업 라이더 지사 선택 줄 */
.gate-body--rider .rb-item {
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.94rem;
    padding: 0.85rem 0.95rem;
}
.gate-body--rider .rb-item:hover,
.gate-body--rider .rb-item:focus-visible {
    border-color: var(--dr-muted);
    background: var(--dr-surface2);
}
.gate-body--rider .rb-go { color: var(--dr-muted); font-weight: 600; font-size: 0.8rem; }

.gate-body--rider .door-foot a { font-weight: 500; }


/* ═══════════════════════════════════════════════════════════════════
   2. 개인실적 확인 — 진입 카드 (대시보드 본문)
   좌측 4px 컬러 띠 + 파스텔 아이콘 박스가 "신호등"의 정체였다 (memo §1-병목1,2)
   ═══════════════════════════════════════════════════════════════════ */
.sl-entry {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-sizing: border-box;
    cursor: pointer;
    text-decoration: none;
    /* ⚠️ `<a>` 로도 쓰인다 — color 를 안 주면 브라우저 기본 링크색(#0000EE)을
       상속한다. 자식들이 각자 색을 갖고 있어 눈엔 안 띄지만, 새 글자를 넣는 순간
       파랗게 나온다 (2026-09-02 probe_color 로 발견). */
    color: var(--text-main);
    transition: border-color 0.15s, background 0.15s;
}
.sl-entry:hover {
    border-color: var(--text-dim);
    background: var(--surface-2);
}
.sl-entry__ico {
    flex: none;
    width: 20px;
    height: 20px;
    display: block;
    color: var(--text-sub);
}
.sl-entry__txt { flex: 1; min-width: 0; }
.sl-entry__kicker {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-sub);
    margin-bottom: 2px;
}
.sl-entry__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.25;
    word-break: keep-all;
}
.sl-entry__go {
    flex: none;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-sub);
}

/* ── .sl-entry 변형 (2026-09-03, 관제판 4카드 오와열 통일) ─────────────
   메인 피크 카드 아래 4개(B마트 · SLA · 개인실적 · 라이더미터)가 서로 다른
   규격이라 "키메라" 로 보였다(오너 지적). 전부 이 카드 규격으로 맞춘다. */

/* 클릭 대상이 아닌 카드(B마트 현황). ⛔ 화살표를 달지 않는다 —
   갈 곳이 없는데 화살표를 달면 그게 거짓말이다. hover 도 끈다. */
.sl-entry--static {
    cursor: default;
}
.sl-entry--static:hover {
    border-color: var(--border-color);
    background: var(--bg-card);
}

/* 숫자가 본문인 타이틀 — 값이 바뀔 때 자리가 안 흔들리게 등폭으로 고정 */
.sl-entry__title--nums {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.sl-entry__title--nums b {
    font-weight: 800;
}
.sl-entry__title--nums .sl-sep {
    color: var(--text-dim);
    font-weight: 500;
    margin: 0 4px;
}



/* ═══════════════════════════════════════════════════════════════════
   3. 개인실적 확인 — 게이트(이름 + 뒤 4자리)
   ═══════════════════════════════════════════════════════════════════ */
/* ⛔ 게이트를 맨 위 좌측에 그냥 두지 말 것 — 아래로 화면 절반이 빈 채라
   "공중에 뜬" 화면이 된다(memo §1-병목3). 카드로 묶어 라이더 로그인(/rider)과
   같은 물건으로 읽히게 한다. rider_home 의 `#sl-gate` 는 항상 숨김이라 영향 없다. */
#sl-overlay #sl-gate {
    max-width: 360px;
    margin: 6vh auto 0;
    padding: 22px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
}

.sl-gate__title {
    font-size: 1.28rem;
    font-weight: 800;
    letter-spacing: -0.4px;
    color: var(--text-main);
    margin-bottom: 4px;
}
.sl-gate__sub {
    font-size: 0.84rem;
    color: var(--text-sub);
    margin-bottom: 20px;
    word-break: keep-all;
}
.sl-gate__form { display: flex; flex-direction: column; gap: 8px; }

.sl-gate-input {
    width: 100%;
    min-height: 46px;
    padding: 12px 14px;
    box-sizing: border-box;
    background: var(--bg-base);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.95rem;
}
.sl-gate-input::placeholder { color: var(--text-dim); }

.sl-gate-btn {
    width: 100%;
    min-height: 48px;
    margin-top: 6px;
    padding: 13px 16px;
    background: var(--neon-blue);
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
    color: #04121a;
    font-family: inherit;
    font-size: 0.96rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.15s;
}
.sl-gate-btn:hover { filter: brightness(1.05); }
html[data-theme="light"] .sl-gate-btn { color: #ffffff; }


/* 게이트 안내/오류 줄 — 파란 글씨 대신 한 겹의 면 */
#sl-overlay #sl-msg {
    margin-top: 14px;
    padding: 11px 13px;
    background: var(--surface-2);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-main);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    word-break: keep-all;
}

/* 오버레이 헤더 버튼 (뒤로 / 연결 해제) */
.sl-topbtn {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 9px 13px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-main);
    font-family: inherit;
    font-weight: 600;
    font-size: 0.84rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.sl-topbtn:hover { border-color: var(--text-dim); background: var(--surface-2); }
.sl-topbtn--ghost {
    background: transparent;
    color: var(--text-sub);
    font-size: 0.78rem;
}


/* ═══════════════════════════════════════════════════════════════════
   4. 개인실적 확인 — 결과 본문 (#sl-result)
   ═══════════════════════════════════════════════════════════════════ */
.sl-head { margin-bottom: 18px; }
.sl-head__kicker {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-sub);
    margin-bottom: 3px;
}
.sl-head__name {
    font-size: 1.62rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--text-main);
}

/* 섹션 제목 — 이전엔 900 두께라 카드 제목과 싸웠다 */
.sl-sec {
    margin: 20px 0 8px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-sub);
}

/* ── 요약 카드 ──
   ⛔ 안쪽 칸에 테두리를 다시 두르지 말 것 (Box-in-Box, docs/front 제1원칙).
      카드 하나 안에서 **가로 띠 + 1px 구분선**으로만 계층을 낸다.
      전엔 카드 > 3칸 박스 + 4줄 박스 + 피크 박스로 상자가 세 겹이었다. */
.sl-sum {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
}
.sl-sum__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
}
.sl-sum__id { display: flex; align-items: center; gap: 8px; min-width: 0; }

/* 플랫폼 뱃지 — 발광 솔리드 -> 무채색 아웃라인 (memo §2-③) */
.sl-plat {
    flex: none;
    padding: 3px 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--text-sub);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}
.sl-branch {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 수집 신선도 — 유일하게 허용한 초록 점(memo §1-병목1) */
.sl-fresh {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text-sub);
    white-space: nowrap;
}
.sl-fresh__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-dim);
}
.sl-fresh--live .sl-fresh__dot { background: var(--neon-green); }

/* ── 3분할 지표 ── */
.sl-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-top: 1px solid var(--border-color);
}
.sl-cell {
    min-width: 0;
    padding: 13px 6px;
    text-align: center;
}
.sl-cell + .sl-cell { border-left: 1px solid var(--border-color); }
.sl-cell__k {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-sub);
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sl-cell__v {
    font-size: 1.16rem;
    font-weight: 700;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sl-cell__v .sl-sub { font-size: 0.74rem; font-weight: 600; color: var(--text-sub); }

/* ── 거절 4단 리스트 — 파랑/파랑/빨강/노랑 4색을 무채색 한 계층으로 ── */
.sl-rows { border-top: 1px solid var(--border-color); }
.sl-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
}
.sl-row + .sl-row { border-top: 1px solid var(--border-color); }
.sl-row__k {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-sub);
}
.sl-row__v {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    white-space: nowrap;
}
.sl-row__v .sl-sub { font-size: 0.78rem; font-weight: 600; color: var(--text-sub); }

/* ── 활성 피크 하단 알약 ── */
.sl-pills {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.sl-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    background: var(--surface-2);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-sub);
    white-space: nowrap;
}
.sl-pill b {
    color: var(--text-main);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}
.sl-pill__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--neon-green);
}

/* ── 홈 화면 추가 안내 (접힘) ── */
.sl-pwa {
    margin-bottom: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}
.sl-pwa__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 11px 14px;
    background: none;
    border: 0;
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.sl-pwa__lead { display: flex; align-items: center; gap: 7px; min-width: 0; }
.sl-pwa__tag {
    flex: none;
    padding: 2px 7px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    color: var(--text-sub);
    font-size: 0.68rem;
    font-weight: 600;
}
.sl-pwa__arrow {
    flex: none;
    font-size: 0.72rem;
    color: var(--text-sub);
    transition: transform 0.2s;
}
.sl-pwa__body {
    display: none;
    padding: 4px 14px 14px;
    border-top: 1px solid var(--border-color);
    background: var(--surface-2);
}
.sl-pwa__step {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 0;
    font-size: 0.79rem;
    font-weight: 500;
    color: var(--text-main);
    line-height: 1.45;
    word-break: keep-all;
}
.sl-pwa__step + .sl-pwa__step { border-top: 1px solid var(--border-color); }
.sl-pwa__no {
    flex: none;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--text-sub);
    font-size: 0.7rem;
    font-weight: 700;
}
.sl-pwa__step b { font-weight: 700; }
.sl-pwa__tip {
    margin-top: 10px;
    font-size: 0.74rem;
    color: var(--text-sub);
    text-align: center;
    word-break: keep-all;
}


/* ═══════════════════════════════════════════════════════════════════
   5. `#sl-result` 안쪽에서만 공용 부품 톤다운
   ⛔ 이 블록의 선택자에서 `#sl-result` 를 떼면 지사장 관제판이 같이 바뀐다.
      인라인 스타일을 이겨야 해서 `!important` 를 쓴다 (인라인 제거는
      renderMiniMissionCards 를 관제판과 공유하므로 불가).
   ═══════════════════════════════════════════════════════════════════ */

/* 활성 피크 카드 — 좌측 상태색 띠 제거 */
#sl-result .peak-card.mega-active,
html[data-theme="light"] #sl-result .peak-card.mega-active {
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    background: var(--bg-card) !important;
    box-shadow: none !important;
}
#sl-result .peak-pct { color: var(--text-main) !important; font-weight: 700 !important; }
#sl-result .peak-title { font-weight: 700 !important; }
#sl-result .peak-detail {
    font-weight: 500 !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

/* 게이지 — 네온 그라데이션 + 글로우 + 4색(파랑/초록/노랑/빨강)이었다.
   ⛔ `fill-*` 별 색을 되살리지 말 것 — 같은 상태를 바로 옆 상태 칩이 **글자로**
      이미 말한다("여유 · 인당 6.9건"). 두 번 말하면서 화면만 시끄러워졌다.
      바가 말하는 건 "얼마나 찼나" 하나다. 폭이 그걸 말한다. */
#sl-result .progress-track {
    height: 6px !important;
    border-radius: 3px !important;
    background: var(--surface-3) !important;
    margin-bottom: 0 !important;
}
#sl-result .progress-fill,
#sl-result .progress-fill.fill-blue,
#sl-result .progress-fill.fill-green,
#sl-result .progress-fill.fill-gold,
#sl-result .progress-fill.fill-red {
    border-radius: 3px !important;
    box-shadow: none !important;
    background: rgba(255, 255, 255, 0.44) !important;
}
html[data-theme="light"] #sl-result .progress-fill,
html[data-theme="light"] #sl-result .progress-fill.fill-blue,
html[data-theme="light"] #sl-result .progress-fill.fill-green,
html[data-theme="light"] #sl-result .progress-fill.fill-gold,
html[data-theme="light"] #sl-result .progress-fill.fill-red {
    background: #64748b !important;
}

/* 미션 카드 — 좌측 4px 신호등 띠 제거, 색은 상태 칩 글자 하나로 압축 */
#sl-result .mini-mission-card,
html[data-theme="light"] #sl-result .mini-mission-card {
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    background: var(--bg-card) !important;
    box-shadow: none !important;
}
#sl-result .mini-mission-card.mission-achieved {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

#sl-result .mm-chip,
html[data-theme="light"] #sl-result .mm-chip {
    background: transparent !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 999px !important;
    padding: 3px 9px !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
/* 상태 칩의 색은 **행동을 바꾸는 상태**에만 남긴다: 여유(초록)·집중(노랑)·부족(빨강).
   진행중/달성/종료(시안)와 예정(보라)은 정보일 뿐인데 카드마다 색을 하나씩 더 얹고 있었다.
   ⚠️ 색이 인라인이라 속성 선택자로 잡는다 (neonix-theme.css 의 다른 오버라이드와 같은 방식). */
#sl-result .mm-chip[style*="--neon-blue"],
#sl-result .mm-chip[style*="a78bfa"],
html[data-theme="light"] #sl-result .mm-chip[style*="--neon-blue"],
html[data-theme="light"] #sl-result .mm-chip[style*="a78bfa"] {
    color: var(--text-sub) !important;
}
#sl-result .mm-title { font-weight: 700 !important; }
#sl-result .mm-reward {
    color: var(--text-main) !important;
    font-weight: 700 !important;
    font-size: 0.98rem !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em !important;
}
#sl-result .mm-won { color: var(--text-sub) !important; font-weight: 600 !important; }
#sl-result .mm-time {
    color: var(--text-sub) !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    font-variant-numeric: tabular-nums;
}
#sl-result .mm-sum {
    color: var(--text-sub) !important;
    font-weight: 500 !important;
    font-size: 0.82rem !important;
    font-variant-numeric: tabular-nums;
}
/* ⚠️ background/border 까지 눌러야 한다 — neonix-theme.css 의
   `html[data-theme="light"] .mini-mission-card span[style*="var(--neon-blue)"]` 가
   이 칸을 **초록 알약**으로 칠한다(인라인 색이 `var(--neon-blue)` 라서 걸린다). */
#sl-result .mm-pct,
html[data-theme="light"] #sl-result .mm-pct {
    color: var(--text-main) !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    font-weight: 700 !important;
    font-size: 0.86rem !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em !important;
}
#sl-result .mm-ok,
html[data-theme="light"] #sl-result .mm-ok {
    color: var(--text-main) !important;
    background: var(--surface-2) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 999px !important;
    padding: 3px 10px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
/* 금색 반짝임 스윕 제거 — 정보가 아니라 장식이다 */
#sl-result .mm-ok::after { display: none !important; }
#sl-result .mm-my { color: var(--text-sub) !important; }
#sl-result .mm-my b {
    color: var(--text-main) !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}
#sl-result .mm-mypct,
html[data-theme="light"] #sl-result .mm-mypct {
    color: var(--text-sub) !important;
    background: transparent !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 999px !important;
    padding: 2px 8px !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums;
}

/* 미션 제목 옆 "성공" 뱃지 */
#sl-result .m-success-badge,
html[data-theme="light"] #sl-result .m-success-badge {
    color: var(--text-sub) !important;
    background: transparent !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 999px !important;
    padding: 2px 8px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}