/* ==========================================================================
   추천 프로그램 — 시안 리뉴얼 (레드 2026-09-15 핸드오프)

   ★ 전달본 referral.css 는 <고치지 않는다>. 이 파일이 새 시안이고,
     클래스가 전부 .ref- 접두어라 옛 .rf- 와 섞이지 않는다.

   ⚠ 시안의 <전역 규칙 셋>(*{box-sizing} · html,body{margin} · body{배경·글꼴})은
     걷어냈다. 그대로 넣으면 <이 화면 하나 때문에> 앱 전체의 바탕색과 글꼴이
     바뀐다 — 시안은 홀로 뜨는 파일이라 그것이 맞지만, 우리는 한 껍데기 안이다.
     바탕은 .ref 가 제 몫만 칠하게 아래에서 따로 준다.

   ⚠ 히어로 그림 경로만 우리 것으로 바꿨다(--ref-hero-art).
   ========================================================================== */

/* ★ 시안의 body 배경을 <이 화면 안에서만> 재현한다 */
.ref{ background:var(--ref-bg); color:var(--ref-ink); line-height:1.6; }
.ref *{ box-sizing:border-box; }
/* ═══ 색상 토큰 (시안에서 추출) ═══════════════════════════════ */
:root{
  --ref-bg:          #04070D;   /* 페이지 배경 */
  --ref-hero-bg:     #0A1324;   /* 히어로 카드 */
  --ref-hero-line:   #1A2B45;   /* 히어로 테두리 */
  --ref-card:        #0C1322;   /* 카드 */
  --ref-card-line:   #1E2B41;   /* 카드 테두리 */
  --ref-panel:       #080C14;   /* 카드 안쪽 패널 */
  --ref-panel-line:  #1B283C;   /* 안쪽 패널 테두리 */
  --ref-input:       #070C16;   /* 링크 입력 배경 */
  --ref-input-line:  #1D2A3C;

  --ref-ink:         #E8EDF7;   /* 본문 */
  --ref-ink-2:       #8494A8;   /* 보조 */
  --ref-ink-3:       #5C6B7E;   /* 각주 */

  --ref-bar-from:    #144CB6;   /* 진행바 시작 */
  --ref-bar-to:      #CFD7E7;   /* 진행바 끝 */
  --ref-bar-track:   #1E2C47;   /* 진행바 트랙 */
  --ref-pill:        #1C2A44;   /* 다음 등급 뱃지 */
  --ref-pill-ink:    #E8EDF7;
  --ref-btn:         #F4F7FC;   /* 링크 복사 버튼 */
  --ref-btn-ink:     #0A111B;
  --ref-ok:          #2BD98C;   /* 복사 완료 */

  --ref-r-lg:16px; --ref-r-md:12px;

  /* 히어로 일러스트 경로 — 여기만 교체 */
  --ref-hero-art: url("/assets/design/img/referral-hero-20260915.png");
}


/* ═══ 레이아웃 ═══════════════════════════════════════════════ */
/*
  ★★ 가로는 <사이트 기본 폭>을 따른다 (레드 2026-09-15 「기존 가로사이즈로」).

    시안은 제 폭(1400px)과 제 여백을 들고 있었다. 홀로 뜨는 파일이니 맞는데,
    우리 껍데기 안에서는 <부모(.container)가 이미 1200px 로 잡고> 여백도 준다.
    둘이 겹치니 안쪽이 한 겹 더 줄어 이 화면만 좁아 보였다.

  ⚠ 숫자를 다시 박지 않는다. 폭은 --container 한 곳에서 정하고, 여기는
    <아무 말도 안 하는> 것이 맞다 — 그래야 그 값을 바꾸는 날 같이 따라온다.
*/
.ref{ margin:0; padding:0; display:flex; flex-direction:column; gap:18px}

/* ═══ 히어로 ═════════════════════════════════════════════════ */
.ref-hero{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  min-height:264px;
  padding:32px 34px;
  border:1px solid var(--ref-hero-line);
  border-radius:var(--ref-r-lg);
  background:
    /* 좌측 텍스트 가독성용 그라데이션 */
    linear-gradient(90deg,
      var(--ref-hero-bg) 0%,
      var(--ref-hero-bg) 26%,
      rgba(10,19,36,.55) 38%,
      rgba(10,19,36,0) 50%),
    /* 오른쪽 이음새 가리는 페이드 */
    linear-gradient(270deg,
      var(--ref-hero-bg) 0%,
      rgba(10,19,36,.85) 10%,
      rgba(10,19,36,0) 24%),
    /* 일러스트 — 위치/크기는 이 한 줄만 조정하면 됩니다 */
    var(--ref-hero-art) 58% center / auto 130% no-repeat,
    var(--ref-hero-bg);
  overflow:hidden;
}
.ref-hero__copy{position:relative;z-index:2;max-width:660px;flex:1 1 auto;min-width:0}
.ref-hero__title{margin:0 0 8px;font-size:30px;font-weight:900;letter-spacing:-.03em}
.ref-hero__desc{margin:0 0 20px;font-size:14.5px;color:var(--ref-ink-2)}

.ref-link{
  display:flex;align-items:center;gap:10px;
  width:100%;max-width:660px;
  padding:9px 9px 9px 18px;
  background:var(--ref-input);
  border:1px solid var(--ref-input-line);
  border-radius:var(--ref-r-md);
}
.ref-link__url{
  flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:inherit;font-size:15px;color:var(--ref-ink);
  background:none;border:0;outline:none;
}
.ref-link__copy{
  flex:none;padding:10px 22px;border:0;border-radius:999px;
  background:var(--ref-btn);color:var(--ref-btn-ink);
  font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;
  transition:background .15s ease;
}
.ref-link__copy:hover{background:#FFFFFF}
.ref-link__copy.is-done{background:var(--ref-ok);color:#04140C}
.ref-hero__note{margin:14px 0 0;font-size:13px;color:var(--ref-ink-3)}

/* 이번 달 수익 */
.ref-earn{
  position:relative;z-index:2;flex:none;
  width:238px;padding:16px 18px;text-align:center;
  border:1px solid var(--ref-card-line);
  border-radius:var(--ref-r-md);
  background:rgba(8,12,20,.82);
  backdrop-filter:blur(8px);
}
.ref-earn__label{font-size:12.5px;color:var(--ref-ink-2)}
.ref-earn__value{margin:3px 0 11px;font-size:30px;font-weight:900;letter-spacing:-.03em;line-height:1.1}
.ref-earn__note{padding-top:10px;border-top:1px solid var(--ref-card-line);font-size:11.5px;color:var(--ref-ink-2)}

/* ═══ 2단 그리드 ═════════════════════════════════════════════ */
.ref-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:18px;align-items:start}

.ref-card{
  display:flex;flex-direction:column;
  padding:26px;
  border:1px solid var(--ref-card-line);
  border-radius:var(--ref-r-lg);
  background:var(--ref-card);
}
.ref-card__title{margin:0 0 6px;font-size:18px;font-weight:700;letter-spacing:-.02em}
.ref-card__desc{margin:0 0 18px;font-size:13.5px;color:var(--ref-ink-2)}
.ref-card__foot{margin:18px 0 0;font-size:13px;color:var(--ref-ink-3)}

.ref-panel{
  padding:20px 22px;
  background:var(--ref-panel);
  border:1px solid var(--ref-panel-line);
  border-radius:var(--ref-r-md);
}
.ref-panel + .ref-panel{margin-top:14px}

/* ── 등급 ── */
.ref-tier__head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ref-tier__now{display:flex;align-items:baseline;gap:12px;min-width:0}
.ref-tier__grade{font-size:30px;font-weight:900;letter-spacing:-.04em;line-height:1}
.ref-tier__meta{font-size:14px;color:var(--ref-ink-2)}
.ref-tier__pill{
  flex:none;padding:8px 16px;border-radius:999px;
  background:var(--ref-pill);color:var(--ref-pill-ink);
  font-size:13.5px;font-weight:700;
}

.ref-progress__top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:20px 0 10px}
.ref-progress__label{font-size:14px;color:var(--ref-ink-2)}
.ref-progress__count{font-size:15px;font-weight:700;letter-spacing:-.01em}
.ref-progress__bar{height:10px;border-radius:999px;background:var(--ref-bar-track);overflow:hidden}
.ref-progress__fill{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--ref-bar-from) 0%,var(--ref-bar-to) 100%);
  transition:width .4s ease;
}

/* ── 행 ── */
.ref-rows{display:flex;flex-direction:column}
.ref-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 0;font-size:14.5px}
.ref-row + .ref-row{border-top:1px solid rgba(255,255,255,.045)}
.ref-row__key{color:var(--ref-ink-2)}
.ref-row__val{font-weight:700;letter-spacing:-.01em;text-align:right}
.ref-row--lg{padding:14px 0}
.ref-row--lg .ref-row__key{color:var(--ref-ink);font-size:15px}
.ref-row--lg .ref-row__val{font-size:24px;font-weight:900;letter-spacing:-.03em}
.ref-row--muted .ref-row__key,.ref-row--muted .ref-row__val{color:var(--ref-ink-2);font-weight:500}

/* ═══ 반응형 ═════════════════════════════════════════════════ */
@media (max-width:1180px){
  .ref-grid{grid-template-columns:1fr}
  .ref-earn{width:210px}
}

/* ── 태블릿 ── */
@media (max-width:900px){
  /* ⚠ 여기에도 padding 이 있었다 — 바깥 여백은 <부모가 준다>(--gutter).
       겹치니 모바일에서만 좌우가 12px 씩 더 들어가, 이 화면만 좁아 보였다.
       데스크톱은 걷었는데 미디어쿼리 안을 놓쳤다. 줄 사이(gap)만 남긴다. */
  .ref{gap:16px}
  .ref-hero{
    flex-direction:column;align-items:stretch;min-height:0;gap:20px;
    padding:24px 26px;
    background:
      linear-gradient(90deg,
        var(--ref-hero-bg) 0%,
        rgba(10,19,36,.92) 40%,
        rgba(10,19,36,.55) 70%,
        rgba(10,19,36,.35) 100%),
      var(--ref-hero-art) right center / auto 150% no-repeat,
      var(--ref-hero-bg);
  }
  .ref-earn{width:100%}
  .ref-hero__title{font-size:24px}
}

/* ── 모바일 ──
   일러스트를 히어로 카드 전체 배경으로 깔고, 그 위에 어두운 그라데이션을
   덮어 글자 가독성을 확보합니다. (경계선 없이 카드 전체에 깔림) */
@media (max-width:640px){
  /* ⚠ 여기에도 padding 이 있었다 — 바깥 여백은 <부모가 준다>(--gutter).
       겹치니 모바일에서만 좌우가 12px 씩 더 들어가, 이 화면만 좁아 보였다.
       데스크톱은 걷었는데 미디어쿼리 안을 놓쳤다. 줄 사이(gap)만 남긴다. */
  .ref{gap:12px}

  .ref-hero{
    display:block;
    padding:0 18px 22px;
    overflow:hidden;
    border-radius:var(--ref-r-lg);
    background:var(--ref-hero-bg);
  }
  /* 상단 일러스트 — 카드 폭 꽉 채우고 아래쪽만 배경색으로 서서히 사라짐
     크기 조절: aspect-ratio 값(가로/세로)만 바꾸면 됩니다 */
  .ref-hero::before{
    content:"";
    display:block;
    margin:0 -18px 4px;
    aspect-ratio:1.86;
    background:
      linear-gradient(180deg,
        rgba(10,19,36,0) 68%,
        rgba(10,19,36,.45) 86%,
        rgba(10,19,36,.88) 95%,
        var(--ref-hero-bg) 100%),
      var(--ref-hero-art) 81% 45% / 227% auto no-repeat;
  }
  .ref-hero__copy{max-width:none}
  .ref-hero__title{font-size:20px;line-height:1.35;margin-bottom:6px}
  .ref-hero__desc{font-size:13.5px;margin-bottom:16px}
  .ref-hero__note{margin-top:10px;font-size:12px}

  /* 링크: URL 왼쪽 / 복사 버튼 오른쪽 — 한 줄 유지 */
  .ref-link{flex-wrap:nowrap;gap:8px;padding:7px 7px 7px 14px}
  .ref-link__url{flex:1 1 auto;min-width:0;font-size:12.5px}
  .ref-link__copy{flex:none;padding:10px 16px;font-size:13px}

  /* 이번 달 수익: 한 줄로 압축 */
  .ref-earn{
    width:100%;margin-top:18px;
    display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
    gap:4px 10px;padding:13px 16px;text-align:left;
    background:var(--ref-panel);backdrop-filter:none;
  }
  .ref-earn__label{font-size:13px}
  .ref-earn__value{margin:0;font-size:22px}
  .ref-earn__note{flex:1 1 100%;padding-top:9px;margin-top:2px;font-size:11.5px}

  /* 카드 */
  .ref-card{padding:18px 16px}
  .ref-card__title{font-size:16.5px}
  .ref-card__desc{font-size:13px;margin-bottom:14px}
  .ref-card__foot{font-size:12.5px;margin-top:14px}
  .ref-panel{padding:14px 15px}
  .ref-panel + .ref-panel{margin-top:10px}

  /* 등급 헤더 */
  .ref-tier__head{gap:8px}
  .ref-tier__now{flex:1 1 auto;flex-direction:column;align-items:flex-start;gap:2px}
  .ref-tier__grade{font-size:24px}
  .ref-tier__meta{font-size:12.5px}
  .ref-tier__pill{padding:7px 13px;font-size:12px}

  .ref-progress__top{margin:16px 0 9px;gap:8px}
  .ref-progress__label{font-size:12.5px}
  .ref-progress__count{font-size:13px;white-space:nowrap}
  .ref-progress__bar{height:8px}

  /* 행 */
  .ref-row{padding:10px 0;font-size:13.5px;gap:12px}
  .ref-row__key{flex:0 1 auto}
  .ref-row__val{flex:0 0 auto;white-space:nowrap}
  .ref-row--lg{padding:12px 0}
  .ref-row--lg .ref-row__key{font-size:14px}
  .ref-row--lg .ref-row__val{font-size:19px}
}

/* ── 소형 단말 ── */
@media (max-width:380px){
  .ref-hero__title{font-size:18.5px}
  .ref-link{padding-left:12px}
  .ref-link__url{font-size:11.5px}
  .ref-link__copy{padding:10px 13px;font-size:12.5px}
  .ref-row{font-size:12.5px}
  .ref-row--lg .ref-row__val{font-size:17px}
  .ref-panel{padding:14px 13px}
  .ref-progress__label{font-size:11.5px;white-space:nowrap}
  .ref-progress__count{font-size:11.5px}
}

@media (prefers-reduced-motion:reduce){ .ref-progress__fill{transition:none} }
/* ⚠ 나쁜 소식은 색으로도 가른다 */
.ref-hero__note.is-bad{ color:#ff6b6b; }


/* ==========================================================================
   친구 표 — 모바일에서 <머리글이 세로로 접히던 것> (레드 2026-09-15)

   ⚠ 「가입일」이 「가 / 입 / 일」로, 「내 수익」이 「내 / 수 / 익」으로 쪼개졌다.
     칸이 다섯인데 폭이 261px 이라, 브라우저가 글자 사이에서 줄을 바꿔 버린다.
     한 글자씩 세로로 선 글자는 <읽는 것>이 아니라 <세는 것>이 된다.

   ★ 고침은 둘이다.
     ① 글자를 <안 접는다>(nowrap). 접히느니 칸이 넓어지는 편이 낫다.
     ② 「충전 금액」도 접는다. 이미 「베팅 횟수」는 접혀 있었는데 그것만으로는
        모자랐다 — 좁은 화면에서 회원이 궁금한 것은 <누가·언제·얼마 벌어줬나>
        셋이다. 충전액은 그 셋을 밀어낼 만큼 급하지 않다.
   ========================================================================== */
@media (max-width:640px){
  .rf-table th,
  .rf-table td{ white-space:nowrap; }
  /* ⚠ 3번째(베팅 횟수)는 referral.css 가 이미 접는다. 여기서는 4번째(충전 금액) */
  .rf-table th:nth-child(4),
  .rf-table td:nth-child(4){ display:none; }
  .rf-table th{ font-size:11.5px; }
}