/* =====================================================================
 *  친구초대 — 우리가 더한 자리 (2026-08-30)
 *
 *  ★ 전달본 referral.css 는 <고치지 않는다>. 새 자리만 여기에 적는다 —
 *    전달본이 갱신되어도 우리 것이 안 지워진다.
 *
 *  ⚠ 여기 있는 것은 전달본에 없던 기능이다:
 *      · 초대 코드 변경 (레드 2026-08-30 "링크는 변경가능함")
 *      · 아직 친구가 없을 때의 안내
 * ===================================================================== */

/* 코드 변경 — 링크 아래 작게. 주인공(복사 버튼)을 가리지 않는다 */
.rf-code-toggle {
    margin-top: 10px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted, #8b93a7);
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
}
.rf-code-toggle:hover { color: var(--text, #e8ecf5); }

.rf-code-edit {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
}

/* ⚠ 되돌릴 수 없는 일이라 <경고를 먼저> 읽게 둔다 */
.rf-code-warn {
    margin: 0 0 10px;
    color: #ffb86b;
    font-size: 12.5px;
    line-height: 1.5;
}

.rf-code-row { display: flex; gap: 8px; flex-wrap: wrap; }

.rf-code-row input {
    flex: 1 1 180px;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    background: rgba(0, 0, 0, .25);
    color: inherit;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.rf-code-notice {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--muted, #8b93a7);
}

/* 아직 어필리에이터가 아닐 때 — 모든 값이 0 인 까닭을 적는다 */
.rf-inactive {
    margin: 0 0 18px;
    padding: 12px 16px;
    border-left: 3px solid var(--cta, #D8DEE6);
    border-radius: 8px;
    background: rgba(124, 92, 255, .08);
    color: var(--muted, #8b93a7);
    font-size: 13.5px;
    line-height: 1.6;
}

/* 코드 변경 안내 — 성공과 실패를 <색으로> 가른다.
   ⚠ 둘 다 회색이면 실패가 바탕에 묻힌다. 회원은 「눌러도 아무 일이 없다」로 겪는다.
      (레드 2026-09-13 「초대코드 변경이안되네」 — 서버는 까닭을 주고 있었다) */
.rf-code-notice.is-bad  { color: var(--cta); font-weight: 700; }
.rf-code-notice.is-good { color: var(--sp-soccer); font-weight: 700; }
.rf-code-notice i { margin-right: 2px; }

/* ── 초대 링크 발급 (레드 2026-09-13) ──────────────────────────────
   ★ 코드는 <눌러야 나온다>. 화면을 열기만 해도 발급되던 것을 멈췄다 —
     쓸 생각이 없는 회원에게도 코드가 붙고, 폐기한 글자는 다시 못 쓴다.
   ★ 발급 자리는 링크 자리와 <같은 높이>를 쓴다. 발급하면 그 자리에
     링크가 들어서므로, 높이가 다르면 화면이 한 번 튄다. */
.rf-issue {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
}

.rf-issue__desc {
  flex: 1 1 260px;
  min-width: 0;
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text-3);
}

/* 바꿀 수 없다는 것을 <발급 뒤에도> 적어 둔다.
   ⚠ 경고가 아니라 안내다 — 회원이 잘못한 것이 없으므로 색을 쓰지 않는다. */
.rf-code-fixed {
  margin: 10px 0 0;
  font-size: var(--fs-xs);
  color: var(--text-5);
}

/* ── 적립 갈래별 (레드 2026-09-13) ────────────────────────────────
   ★ 위의 두 줄(이번 달 · 지금까지)은 <합계>고, 이 줄들은 그 안쪽이다.
     같은 굵기로 두면 다섯 줄이 나란히 서서 어느 것이 합인지 안 보인다.
   ⚠ 셋이 서로 다른 엔진에서 나온다 — 카지노·슬롯은 콤프, 스포츠는 낙첨.
     캐시백은 갈래가 없어 있을 때만 온다. */
.rf-rake-split {
  display: grid;
  gap: 2px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.rf-kv--sub span { color: var(--text-5); font-size: var(--fs-xs); }
.rf-kv--sub b {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}