/* ==========================================================================
   리워드 — 시안 리뉴얼 (레드 2026-09-15 핸드오프)

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

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

   ⚠ 그림 경로만 우리 것으로 바꿨다 (assets/ → /assets/design/img/rewards/).
   ========================================================================== */

/* ★ 시안의 body 배경을 <이 화면 안에서만> 재현한다 */
.rwd{ background:var(--rwd-bg); color:var(--rwd-ink); line-height:1.55; }
.rwd *{ box-sizing:border-box; }
/* ═══ 색상 토큰 (시안에서 추출) ═══════════════════════════════ */
:root{
  --rwd-bg:          #050C16;
  --rwd-card:        #0A172A;
  --rwd-card-line:   #1C3555;
  --rwd-panel:       #070E17;
  --rwd-panel-line:  #162944;
  --rwd-panel-edge:  #182C48;
  --rwd-lock:        #081323;

  --rwd-ink:         #E9EFFA;
  --rwd-ink-2:       #8FA1BA;
  --rwd-ink-3:       #5D6E86;

  --rwd-pill:        #152643;
  --rwd-pill-line:   #2A4470;
  --rwd-track:       #1A2C4C;
  --rwd-accent:      #3A619F;
  --rwd-accent-2:    #5B93F0;
  --rwd-ico:         #8FC0F8;

  --rwd-btn:         #C6DCFB;
  --rwd-btn-ink:     #071426;
  --rwd-outline:     #101E38;
  --rwd-stamp-on:    #DCE8F9;

  --rwd-r-lg:18px; --rwd-r-md:14px; --rwd-r-sm:12px;
}

svg{display:block}

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

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

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

/* 상단 카드 배경 (VIP 홀 이미지) — 경로만 바꾸면 교체됩니다 */
.rwd-card.rwd-card--hall{
  position:relative;overflow:hidden;
  background:
    linear-gradient(90deg, rgba(8,18,34,.80) 0%, rgba(8,18,34,.52) 22%, rgba(8,18,34,.45) 52%, rgba(8,18,34,.66) 80%, rgba(8,18,34,.88) 100%),
    linear-gradient(180deg, rgba(8,18,34,.26) 0%, rgba(8,18,34,.08) 42%, rgba(8,18,34,.58) 100%),
    url("/assets/design/img/rewards/vip-hall.jpg") center 42% / cover no-repeat,
    var(--rwd-card);
}

.rwd-card{
  display:flex;flex-direction:column;
  padding:20px 24px;
  border:1px solid var(--rwd-card-line);
  border-radius:var(--rwd-r-lg);
  background:var(--rwd-card);
}
/* 1행 : 좌(등급) + 우(출석 패널) 를 한 카드에 */
.rwd-split{display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:18px;align-items:stretch}
/* 2행 : 카드 2개 */
.rwd-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}

.rwd-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:10px}
.rwd-head--inline{align-items:center}
.rwd-title{margin:0;font-size:18px;font-weight:700;letter-spacing:-.02em}
.rwd-title--lead{font-size:23px;font-weight:900;line-height:1.28;letter-spacing:-.03em}
.rwd-desc{margin:4px 0 0;font-size:13px;color:var(--rwd-ink-2)}

.rwd-pill{
  flex:none;padding:8px 16px;border-radius:999px;
  border:1px solid var(--rwd-pill-line);background:var(--rwd-pill);
  font-size:12.5px;font-weight:500;color:var(--rwd-ink);white-space:nowrap;
}

/* 안쪽 패널 */
.rwd-panel{
  padding:16px 18px;
  background:var(--rwd-panel);
  border:1px solid var(--rwd-panel-edge);
  border-radius:var(--rwd-r-md);
}
.rwd-panel + .rwd-panel{margin-top:12px}
.rwd-panel--flush{display:flex;flex-direction:column}
/* 상단 카드 안쪽 패널은 배경이 비치도록 반투명 */
.rwd-card--hall .rwd-panel{background:rgba(6,12,22,.72);backdrop-filter:blur(7px)}
.rwd-card--hall .rwd-timer,.rwd-card--hall .rwd-sum{background:rgba(5,10,20,.66)}
.rwd-panel--bonus{display:flex;flex-direction:column;padding:18px 20px}

/* 항목 행 */
.rwd-rows{display:flex;flex-direction:column}
.rwd-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 0;font-size:14.5px}
.rwd-rows--ruled .rwd-item + .rwd-item{border-top:1px solid rgba(255,255,255,.05)}
.rwd-item__key{color:var(--rwd-ink-2);display:flex;align-items:center;gap:10px;min-width:0}
.rwd-item__val{font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.rwd-tag{
  padding:4px 11px;border-radius:999px;background:var(--rwd-pill);
  font-size:11px;font-weight:500;font-style:normal;color:var(--rwd-ink-2);
}

/* 아이콘 */
.rwd-ico{flex:none;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
.rwd-ico--dark{filter:none}

/* ═══ 내 등급 ════════════════════════════════════════════════ */
.rwd-grade{display:flex;flex-direction:column;height:100%;justify-content:flex-start}
.rwd-tier{display:flex;align-items:center;gap:24px;flex:0 0 auto}   /* 위로 붙게 (늘어나지 않음) */
.rwd-tier__badge{
  position:relative;flex:none;width:152px;height:152px;display:grid;place-items:center;
}
.rwd-tier__badge::before{        /* 뒤쪽 후광 */
  content:"";position:absolute;inset:6%;border-radius:50%;
  background:radial-gradient(circle,rgba(47,95,168,.42) 0%,rgba(27,58,107,.16) 55%,transparent 72%);
  animation:rwdHalo 4.5s ease-in-out infinite;
}
/* 바깥 테두리 + 게이지 */
.rwd-tier__ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rwd-ring-edge{fill:none;stroke:#132441;stroke-width:1.4}
.rwd-ring-track{fill:none;stroke:var(--rwd-track);stroke-width:5}
.rwd-ring-fill{
  fill:none;stroke:#5B93F0;stroke-width:5;stroke-linecap:round;
  transform:rotate(-90deg);transform-origin:50% 50%;
  filter:drop-shadow(0 0 6px rgba(91,147,240,.85));
  transition:stroke-dasharray .5s ease;
}
.rwd-ring-dot{fill:#CFE3FF}
.rwd-ring-glow{fill:#8CBBFF;opacity:.22;animation:rwdPulse 2.6s ease-in-out infinite;transform-origin:84px 12px}
/* 뱃지 이미지 — 링 안쪽에 살짝 작게 + 빛나는 효과 */
.rwd-tier__badge img{
  position:relative;width:74%;height:74%;object-fit:contain;
  /*
    ★★ <방패만 반짝인다> (레드 2026-09-15 「이거 방패만 반짝임효과 들어가야해」).

      여기 rwdShine 이 걸려 있었다. 그것은 drop-shadow 라 <그림 전체 둘레>가
      빛난다 — 방패뿐 아니라 월계관과 바깥 원형 테두리까지 파랗게 번졌다.
      반짝임이 어디를 가리키는지 흐려져, 눈이 갈 곳을 잃는다.

    ★ 후광은 걷고 <가라앉는 그림자>만 남긴다. 빛나는 일은 아래 sweep 이
      맡는데, 그것은 방패 모양으로 잘려 있어 <방패 안에서만> 지나간다.
  */
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.5));
  animation:rwdFloat 6s ease-in-out infinite;
}
/* 빛이 지나가는 효과 — 방패 파란 면에만
   #rwdShield1~8 = tier-1~8.png 의 방패 안쪽 모양. 등급을 바꾸면 번호를 같이 바꾸세요 */
.rwd-tier__sweep{
  position:absolute;inset:13%;overflow:hidden;pointer-events:none;
  /*
    ⚠⚠ 여기가 <url(#rwdShield2)> 였는데, 그 이름을 가진 clipPath 가
      <문서 어디에도 없었다>. 전달본에 모양 파일이 안 왔다.
      clip-path 는 못 찾은 참조를 <없는 것처럼> 넘겨서 오류가 안 난다 —
      그래서 잘리지 않은 네모가 그대로 남아 뱃지 전체가 반짝였다.

    ★ 모양을 우리가 그렸다(RewardsPage 의 rwdShield). 등급마다 색과 숫자만
      다르고 <방패 윤곽은 여덟 장이 같다> — 그래서 하나면 된다.
    ★ objectBoundingBox 라 크기와 무관하다. 화면이 좁아져 뱃지가 줄어도
      같은 자리를 자른다.
  */
  clip-path:url(#rwdShield);
}
/* 방패 안쪽 은은한 글로우 (항상) */
.rwd-tier__sweep::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(62% 48% at 50% 36%,rgba(120,175,255,.20),rgba(120,175,255,0) 72%);
  animation:rwdInner 3.4s ease-in-out infinite;
}
/* 지나가는 빛줄기 */
.rwd-tier__sweep::after{
  content:"";position:absolute;top:-35%;left:-90%;width:58%;height:170%;
  background:linear-gradient(90deg,
     rgba(255,255,255,0) 0%,
     rgba(200,225,255,.35) 32%,
     rgba(255,255,255,.95) 50%,
     rgba(200,225,255,.35) 68%,
     rgba(255,255,255,0) 100%);
  transform:rotate(18deg);filter:blur(3px);
  animation:rwdSweep 3.6s cubic-bezier(.35,0,.25,1) infinite;
}
@keyframes rwdInner{0%,100%{opacity:.35}50%{opacity:.9}}
@keyframes rwdSweep{0%{left:-90%}48%{left:150%}100%{left:150%}}
@keyframes rwdHalo{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
@keyframes rwdFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes rwdPulse{0%,100%{transform:scale(1);opacity:.18}50%{transform:scale(1.45);opacity:.45}}
@keyframes rwdShine{
  0%,100%{filter:drop-shadow(0 0 7px rgba(91,147,240,.45)) drop-shadow(0 8px 16px rgba(0,0,0,.5))}
  50%    {filter:drop-shadow(0 0 17px rgba(129,178,255,.85)) drop-shadow(0 8px 16px rgba(0,0,0,.5))}
}
.rwd-tier__body{flex:1 1 auto;min-width:0}
.rwd-tier__now{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:-4px}
.rwd-tier__label{font-size:16px;font-weight:500;color:var(--rwd-ink)}
.rwd-tier__level{
  font-size:62px;font-weight:900;letter-spacing:-.045em;line-height:1;
  background:linear-gradient(180deg,#FFFFFF 0%,#96B0D6 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.rwd-tier__next{margin:10px 0 11px;font-size:14.5px;color:var(--rwd-ink)}

.rwd-steps{display:flex;align-items:center;gap:5px;height:16px}
.rwd-steps__seg{flex:1 1 0;height:9px;border-radius:999px;background:var(--rwd-track);overflow:hidden}
.rwd-steps__fill{display:block;height:100%;border-radius:999px;background:var(--rwd-accent-2)}
.rwd-steps__dot{
  flex:none;width:16px;height:16px;border-radius:50%;
  background:#FFFFFF;box-shadow:0 0 0 3px rgba(91,147,240,.2);
}
.rwd-tier__bottom{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:12px}
.rwd-tier__foot{margin:0;font-size:12.5px;color:var(--rwd-ink)}

/* ═══ 버튼 ═══════════════════════════════════════════════════ */
.rwd-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border:0;border-radius:var(--rwd-r-md);
  background:var(--rwd-btn);color:var(--rwd-btn-ink);
  font-family:inherit;font-size:15px;font-weight:700;text-decoration:none;
  cursor:pointer;transition:filter .15s ease;
}
.rwd-btn:hover{filter:brightness(1.05)}
.rwd-btn:disabled{opacity:.45;cursor:default;filter:none}
.rwd-btn--wide{width:100%}
.rwd-btn--pill{border-radius:999px}
.rwd-btn--outline{
  background:var(--rwd-outline);color:var(--rwd-ink);
  border:1px solid var(--rwd-pill-line);
  box-shadow:inset 0 0 20px rgba(58,97,159,.25);
}
.rwd-btn--outline:hover{filter:none;border-color:#3A619F}

/* ═══ 총 보너스 ══════════════════════════════════════════════ */
.rwd-total{margin:0 0 2px;font-size:15px;font-weight:700;color:var(--rwd-ink)}
.rwd-total__sep{height:1px;background:var(--rwd-panel-edge);margin:0 0 6px}
.rwd-total__value{margin:0 0 14px;font-size:36px;font-weight:900;letter-spacing:-.035em;line-height:1.15}

/* ═══ 출석 ═══════════════════════════════════════════════════ */
.rwd-help{
  display:inline-flex;align-items:center;gap:9px;flex:none;
  font-size:13.5px;color:var(--rwd-ink-2);text-decoration:none;
}
.rwd-help:hover{color:var(--rwd-ink)}
.rwd-claim{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-bottom:12px}
.rwd-timer{
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:12px 16px;border-radius:999px;
  border:1px solid var(--rwd-pill-line);background:#060D18;
  font-size:17px;font-weight:700;letter-spacing:-.01em;
}
.rwd-sum{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:auto;padding:15px 18px;border-radius:var(--rwd-r-md);
  border:1px solid var(--rwd-panel-edge);background:#060D18;
}
.rwd-sum__key{display:flex;align-items:center;gap:14px;font-size:14px;color:var(--rwd-ink-2)}
.rwd-sum__val{font-size:26px;font-weight:900;letter-spacing:-.03em;white-space:nowrap}

/* ═══ 출석 도장 ══════════════════════════════════════════════ */
.rwd-stamps__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.rwd-stamps__title{margin:0;font-size:22px;font-weight:900;letter-spacing:-.03em}
.rwd-stamps__nav{display:flex;align-items:center;gap:10px}
.rwd-nav{
  width:42px;height:42px;display:grid;place-items:center;
  border:1px solid var(--rwd-card-line);border-radius:var(--rwd-r-sm);
  background:var(--rwd-card);color:var(--rwd-ink);cursor:pointer;
}
.rwd-nav:hover{border-color:var(--rwd-accent)}

/*
  ══════════════════════════════════════════════════════════════════════
  진행 줄 — 마디가 <제 도장 카드 위에> 선다.

  ★★ 마디를 아래 .rwd-days 와 <같은 칸 너비>로 깐다 (레드 2026-09-16
    「출석 쪽 하이라이팅이 좀 다른 것 같다」).

    전달본은 마디를 <화면에 보이는 수>(7개)만 그려 카드와 1:1 이었다.
    우리는 열넷을 다 그리면서 flex 로 한 줄에 욱여넣어, 실측(폭 1150px)에서
    카드 간격 166px · 마디 간격 85px 로 어긋났다 — 2일차부터 73px 씩 밀렸다.

  ⚠ 마디를 잇는 선(.rwd-link)을 <칸 사이에 두지 않는다>. 격자에서는 그 선도
    한 칸을 차지해 버려 다시 어긋난다. 선은 마디에서 오른쪽으로 뻗는 ::after 다.
  ══════════════════════════════════════════════════════════════════════ */
.rwd-track{
  overflow:hidden;          /* 도장판 스크롤을 따라 움직인다(RewardsPage 가 scrollLeft 를 맞춘다) */
  margin-bottom:13px;
}
.rwd-track__line{
  display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 84px) / 7);
  gap:14px;
  align-items:center;
}
/*
  ⚠ 마디는 <칸 전체>를 차지한다(stretch). 동그라미만큼만 차지하게 두면 잇는 선의
    길이를 칸 너비로 잡아야 하는데, ::after 의 % 는 <마디 상자>(32px) 기준이라
    칸 너비를 알 수가 없다. 칸을 다 차지하면 % 가 곧 칸 너비다.
  동그라미는 ::before 로 그리고, 숫자는 격자 가운데에 둔다.
*/
.rwd-node{
  position:relative;
  justify-self:stretch;
  height:32px;
  display:grid;place-items:center;
  font-size:13px;font-weight:700;color:var(--rwd-ink);
}
.rwd-node::before{
  content:"";position:absolute;left:50%;top:0;
  width:32px;height:32px;margin-left:-16px;
  border-radius:50%;
  border:2px solid var(--rwd-accent);background:var(--rwd-bg);
  box-sizing:border-box;
}
/* 숫자는 동그라미 <위>에 온다. ::before 를 음수 z-index 로 밀면 조상 배경에
   가려질 수 있어, 숫자 쪽을 올린다. */
.rwd-node > i{position:relative;font-style:normal}
/*
  마디를 잇는 선 — 동그라미 오른쪽 끝에서 <다음 칸 동그라미>까지.
  right 의 -14px 이 칸 사이 gap 이다.
  ⚠ 맨 끝 마디에는 안 그린다 — 이을 다음 마디가 없는데 선만 허공으로 나간다.
*/
.rwd-node::after{
  content:"";position:absolute;top:15px;
  left:calc(50% + 16px);right:-14px;
  height:2px;background:var(--rwd-track);
}
.rwd-node:last-child::after{display:none}
/* 이미 받은 날까지는 선이 켜져 있다 */
.rwd-node.is-done::after{background:var(--rwd-accent)}
.rwd-node.is-now::before{background:var(--rwd-accent-2);border-color:var(--rwd-accent-2)}
.rwd-node.is-now{color:#04101F}
.rwd-node.is-off::before{border-color:var(--rwd-track)}
.rwd-node.is-off{color:var(--rwd-ink-3)}

.rwd-days{
  display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 84px) / 7);   /* 한 화면 7칸 */
  gap:14px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;
  padding-bottom:2px;
}
.rwd-days::-webkit-scrollbar{height:0}
.rwd-day{
  position:relative;              /* 완료 도장(.rwd-day__done)이 모서리에 앉는 자리 */
  scroll-snap-align:start;
  display:flex;flex-direction:column;gap:9px;
  padding:13px 13px 14px;
  border:1px solid var(--rwd-panel-edge);border-radius:var(--rwd-r-md);
  background:var(--rwd-panel);
}
.rwd-day__top{display:flex;align-items:center;gap:11px}
.rwd-day__no{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.rwd-day__amt{font-size:14.5px;font-weight:700;color:var(--rwd-ink-2)}
.rwd-day__note{margin:0;font-size:12.5px;color:var(--rwd-ink-3);text-align:center}

.rwd-day--today{background:var(--rwd-stamp-on);border-color:#FFFFFF;color:var(--rwd-btn-ink)}
.rwd-day--today .rwd-day__amt{color:#33465F}
.rwd-day--today .rwd-btn{margin-top:auto;background:#BFD9FD;padding:11px 18px;font-size:14px}

/*
  ═══ 오늘 차례인데 아직 못 받는 날 ═══════════════════════════════════
  (레드 2026-09-16 「당일이면 하이라이팅 처리해 줄래」)

  ★ 조건(입금액 등)을 못 채워 받기가 잠긴 날이다. 그래도 <오늘 자리>는 밝혀
    회원이 어디까지 왔는지 보이게 한다.

  ⚠⚠ 위 --today 와 <같은 모양으로 만들지 않는다>. 밝은 판에 어두운 글자는
    「지금 받을 수 있다」로 읽히는데, 조건을 못 채운 회원이 그것을 보고 누르면
    거절당한다 — 화면이 거짓을 말하는 셈이다.
    그래서 바탕은 어두운 채로 두고 <테두리와 강조선>만 켠다.
*/
.rwd-day--due{
  border-color:var(--rwd-accent-2);
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--rwd-accent-2) 14%, transparent), transparent 62%),
    var(--rwd-panel);
  box-shadow:0 0 0 1px color-mix(in oklab, var(--rwd-accent-2) 30%, transparent);
}
/* 금액은 또렷하게 — 오늘 받을 수 있게 되면 얼마인지가 올라갈 까닭이 된다 */
.rwd-day--due .rwd-day__amt{color:var(--rwd-ink)}

/*
  ═══ 이미 받은 날 ═══════════════════════════════════════════════════
  (레드 2026-09-16 「완료된 건 완료 표기를 해 주는 게 좋을 것 같다」)

  ★ 아래 「받았습니다」는 글자라, 칸이 열넷 늘어서면 눈에 안 들어온다.
    모서리에 도장 하나를 찍어 <한눈에> 보이게 한다.
  ⚠ 흐리게(opacity) 처리하지 않는다. 받은 날은 <이룬 것>이지 꺼진 것이 아니다 —
    흐려 놓으면 못 받은 날과 구별이 되레 어려워진다.
*/
.rwd-day--done{
  border-color:color-mix(in oklab, var(--rwd-ok, #2FA46B) 45%, transparent);
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--rwd-ok, #2FA46B) 10%, transparent), transparent 58%),
    var(--rwd-panel);
}
/* ⚠ 칸 <안쪽>에 앉힌다. 밖으로 내밀면 도장판이 overflow-x:auto 라 잘린다 */
.rwd-day__done{
  position:absolute;top:8px;right:8px;
  width:22px;height:22px;
  display:grid;place-items:center;
  border-radius:999px;
  background:var(--rwd-ok, #2FA46B);
  color:#fff;font-size:12px;font-weight:800;font-style:normal;line-height:1;
  box-shadow:0 2px 8px -2px rgba(0,0,0,.5);
}
/* 받은 날의 금액은 <이미 받은 돈>이라 값 그대로 또렷하게 둔다 */
.rwd-day--done .rwd-day__amt{color:var(--rwd-ink)}

/* ═══ 반응형 ═════════════════════════════════════════════════ */
@media (max-width:1260px){
  .rwd-split{grid-template-columns:1fr}
  .rwd-row{grid-template-columns:1fr}
}
@media (max-width:1240px){
  .rwd-days{grid-auto-columns:calc((100% - 56px) / 5)}
  .rwd-track__line > :nth-child(n+10){display:none}      /* 노드 5개까지 */
}
@media (max-width:980px){
  .rwd-days{grid-auto-columns:calc((100% - 28px) / 3)}
  .rwd-track__line > :nth-child(n+6){display:none}       /* 노드 3개까지 */
}
@media (max-width:640px){
  /* ⚠ 여기에도 padding 이 있었다 — 바깥 여백은 <부모가 준다>(--gutter).
       겹치니 모바일에서만 좌우가 12px 씩 더 들어가, 이 화면만 좁아 보였다.
       데스크톱은 걷었는데 미디어쿼리 안을 놓쳤다. 줄 사이(gap)만 남긴다. */
  .rwd{gap:12px}
  .rwd-card{padding:16px 14px}
  .rwd-split{gap:14px}
  .rwd-head--stack{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:14px}
  .rwd-head--stack > *{align-self:flex-start}
  .rwd-head{gap:10px;margin-bottom:14px}
  .rwd-pill{padding:7px 13px;font-size:11.5px}
  .rwd-title{font-size:16.5px}
  .rwd-title--lead{font-size:19px}
  .rwd-panel{padding:14px 15px}

  .rwd-tier{flex-direction:column;align-items:stretch;gap:10px}
  /* 뱃지를 크게 — 헤더 줄까지 올라와도 됩니다 */
  .rwd-tier__badge{width:248px;height:248px;align-self:center;margin:-42px auto -14px}
  .rwd-head{position:relative;z-index:2}
  .rwd-tier__now{justify-content:center;gap:10px}
  .rwd-tier__level{font-size:42px}
  .rwd-tier__next{text-align:center;margin:8px 0 10px}
  .rwd-tier__bottom{flex-direction:column;align-items:stretch;gap:12px;margin-top:12px}
  .rwd-tier__bottom .rwd-btn{width:100%;order:2}
  .rwd-tier__foot{text-align:center;order:1}

  .rwd-total__value{font-size:29px}
  .rwd-item{font-size:13.5px;padding:8px 0}

  /* 남은시간 + 받기 한 줄 유지 */
  .rwd-claim{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:10px}
  .rwd-timer{padding:12px 12px;font-size:14px;gap:8px}
  .rwd-claim .rwd-btn{padding:12px 14px;font-size:14px}
  /* 아이콘 확대 */
  .rwd-timer svg{width:22px;height:22px}
  .rwd-sum__key svg{width:26px;height:26px}
  .rwd-day__top svg{width:32px;height:32px}
  .rwd-help svg{width:18px;height:18px}
  .rwd-sum{gap:8px;padding:14px 13px}
  .rwd-sum__key{font-size:11.5px;gap:9px;line-height:1.35}
  .rwd-sum__val{font-size:18px}

  .rwd-stamps__title{font-size:18px}
  .rwd-nav{width:38px;height:38px}
  .rwd-days{grid-auto-columns:calc((100% - 10px) / 2);gap:10px}
  .rwd-day{padding:12px 12px 14px}
  .rwd-track__line{display:none}
}
@media (prefers-reduced-motion:reduce){
  .rwd-days{scroll-behavior:auto}
  .rwd-btn{transition:none}
  .rwd-tier__badge img,.rwd-tier__badge::before,.rwd-ring-glow,
  .rwd-tier__sweep::before,.rwd-tier__sweep::after{animation:none}
  .rwd-tier__sweep{display:none}
}
/* ══════════════════════════════════════════════════════════════════════
   못 불러왔을 때 · 못 받는 까닭 (레드 2026-09-16)

   ★ 실패는 <바퀴>가 아니라 <글>로 말한다. 예전에는 불러오기가 깨져도 바퀴만 돌아
     회원이 기다리면 나오는 줄 알았다.
   ★ 출석 버튼이 꺼져 있을 때 <조건과 진행도>를 함께 보여 준다. 서버는 늘 주고 있었다.
   ══════════════════════════════════════════════════════════════════════ */
.rwd-wrap {
    max-width: 640px;
    margin: 0 auto;
    padding: 48px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}

.rwd-note {
    margin: 0;
    color: var(--ex-text-dim, #8a96ad);
    font-size: 14px;
    line-height: 1.6;
}

.rwd-cond {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--ex-text-dim, #8a96ad);
}

.rwd-cond li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

/* ══════════════════════════════════════════════════════════════════════
   VIP 혜택 창 — 등급을 고르고, 그 등급만 크게 본다 (레드 2026-09-16)

   ★ 여덟 등급 × 열여덟 줄짜리 표를 걷어냈다. 가로로 굴리는 표에서는
     회원이 <자기 줄>을 찾느라 시간을 다 쓴다.
   ★ 등급 칩은 가로로 흐르고, 고른 칩만 살아난다. 내 등급에는 딱지가 붙는다.
   ⚠ 값 카드는 <숫자가 먼저>다. 이름을 크게 하면 여덟 칸을 훑을 때 숫자가 안 들어온다.
   ══════════════════════════════════════════════════════════════════════ */
.rw-tier {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 10px;
    scrollbar-width: thin;
}

.rw-tier__chip {
    position: relative;
    /*
      ★ 남는 가로를 <여덟이 나눠 갖는다> (레드 2026-09-16 「가로도 꽉 채워줄래」).
        예전에는 0 0 auto 라 글자 폭만큼만 차지해 오른쪽이 늘 비어 있었다.

      ⚠ 줄어드는 쪽(1)도 열어 두지만 min-width 가 바닥을 잡는다. 좁은 화면에서는
        여덟이 다 들어갈 수 없으므로, 찌그러지는 대신 <가로로 굴러야> 한다.
      ★ 글자가 빠지고 그림만 남았으니(레드 2026-09-16) 여백을 줄여 그림이 칸을 채운다.
    */
    flex: 1 1 auto;
    min-width: 72px;
    padding: 8px 8px 9px;
    border: 1px solid var(--ex-line, #263149);
    border-radius: 12px;
    background: var(--ex-panel, #111827);
    color: var(--ex-text-dim, #8a96ad);
    cursor: pointer;
    text-align: left;
    transition: border-color .15s, background .15s, color .15s, transform .15s;
}

.rw-tier__chip:hover { border-color: var(--ex-primary, #1E4FA8); }

.rw-tier__chip.is-on {
    border-color: var(--ex-primary, #1E4FA8);
    background: linear-gradient(160deg, rgba(30, 79, 168, .35), rgba(30, 79, 168, .08));
    color: #fff;
    transform: translateY(-1px);
}

.rw-tier__no {
    display: block;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

/*
  등급 그림 (전달본 tier-1~8.png). 칩 전체가 이 그림 하나다 — 레드 2026-09-16
  「레벨 표기는 지우고 아이콘으로 꽉 채우자」.

  ⚠ 원본이 360×360 이라 상자를 못 박고 contain 으로 앉힌다.
  ⚠ 칸을 꽉 채우되 위아래에 조금 숨을 둔다. 방패가 칩 테두리에 닿으면 답답해 보이고,
    고른 칩의 테두리(2px)와 그림이 겹쳐 보인다.
*/
.rw-tier__ico {
    display: block;
    width: 100%;
    height: auto;
    max-height: 64px;
    object-fit: contain;
}

/* ⚠ 등급 칩의 「LEVEL n」 줄은 2026-09-16 에 걷어냈다(그림에 번호가 박혀 있어
   같은 말을 두 번 했다). 규칙은 남겨 둔다 — 되돌릴 때 다시 쓰고, 지워도 얻는 것이 없다. */
.rw-tier__name {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.rw-tier__badge {
    position: absolute;
    top: -7px;
    right: 8px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--ex-success, #1F7A4D);
    color: #fff;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    white-space: nowrap;
}

.rw-ben2 { display: flex; flex-direction: column; gap: 18px; }

.rw-ben2__title {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--ex-text-dim, #8a96ad);
}

.rw-ben2__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.rw-ben2__card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid var(--ex-line, #263149);
    border-radius: 12px;
    background: var(--ex-panel, #111827);
}

.rw-ben2__key {
    font-size: 11px;
    color: var(--ex-text-dim, #8a96ad);
    line-height: 1.4;
}

.rw-ben2__val {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

/*
  아래 등급보다 좋아진 칸.

  ★ <숫자 바로 옆>에 붙는다 (레드 2026-09-16). 값 안에 들어와 있으므로
    글자 크기는 제가 정하고(0.58em), 위치는 윗선에 맞춘다 — 숫자와 바닥을
    맞추면 삼각형이 가라앉아 마침표처럼 보인다.
  ⚠ 값 글자가 커지는 자리(모바일 16px 등)에서도 따라 줄도록 em 을 쓴다.
    px 로 박으면 큰 숫자 옆에서 점처럼 작아진다.
*/
.rw-ben2__up {
    margin-left: .3em;
    font-size: .58em;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    vertical-align: .45em;
    color: var(--ex-success, #56C400);
}

@media (max-width: 480px) {
    .rw-ben2__grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
    .rw-tier__chip { min-width: 76px; padding: 9px 11px 10px; }
    .rw-ben2__val { font-size: 16px; }
}

/* 갈래 묶음 — 제목과 카드가 한 덩이로 움직인다 */
.rw-ben2__grp { display: block; }

/* ══════════════════════════════════════════════════════════════════════
   등급이 오를수록 <고급스럽게> (레드 2026-09-16)

   ★ 색은 등급 상자 하나(data-tier)가 정하고, 안의 것들은 그 값을 쓴다.
     화면 코드가 색을 들고 있으면 등급을 늘릴 때 두 곳을 고쳐야 한다.
   ★ 오르는 결: 무채색 → 청색 → 보라 → 금 → 백금.
     아래 등급은 <담백하게> 둔다. 1등급까지 번쩍이면 8등급이 특별해 보이지 않는다.
   ⚠ 8등급만 빛이 흐른다. 움직임에 약한 사람을 위해 prefers-reduced-motion 을 지킨다.
   ══════════════════════════════════════════════════════════════════════ */
.rw-vip {
    --vip: #8C96A8;                        /* 등급 색 */
    --vip-2: #6F7A8C;                      /* 그라데이션 짝 */
    --vip-ink: #E6EBF5;                    /* 숫자 색 */
    --vip-face: rgba(255, 255, 255, .02);  /* 카드 바탕 */
    --vip-edge: rgba(255, 255, 255, .08);  /* 카드 테두리 */
    --vip-glow: transparent;               /* 바깥 빛 */
}

.rw-vip[data-tier="2"] { --vip: #9BB2D6; --vip-2: #6E8CB8; }
.rw-vip[data-tier="3"] { --vip: #4C86E8; --vip-2: #1E4FA8; --vip-face: rgba(76, 134, 232, .06); --vip-edge: rgba(76, 134, 232, .22); }
.rw-vip[data-tier="4"] { --vip: #2FB8E6; --vip-2: #1E6FA8; --vip-face: rgba(47, 184, 230, .07); --vip-edge: rgba(47, 184, 230, .26); }
.rw-vip[data-tier="5"] { --vip: #8A6FE8; --vip-2: #5533C4; --vip-face: rgba(138, 111, 232, .08); --vip-edge: rgba(138, 111, 232, .3); --vip-glow: rgba(138, 111, 232, .18); }
.rw-vip[data-tier="6"] { --vip: #C061E0; --vip-2: #7A2BB0; --vip-face: rgba(192, 97, 224, .09); --vip-edge: rgba(192, 97, 224, .32); --vip-glow: rgba(192, 97, 224, .2); }
.rw-vip[data-tier="7"] { --vip: #E7B93C; --vip-2: #A9761A; --vip-ink: #FFF6DF; --vip-face: rgba(231, 185, 60, .1); --vip-edge: rgba(231, 185, 60, .38); --vip-glow: rgba(231, 185, 60, .26); }
.rw-vip[data-tier="8"] { --vip: #F4E9C9; --vip-2: #C9A227; --vip-ink: #FFFDF5; --vip-face: rgba(244, 233, 201, .12); --vip-edge: rgba(244, 233, 201, .45); --vip-glow: rgba(244, 233, 201, .3); }

/* ── 머리 띠 — 고른 등급을 크게 말한다 ────────────────────────────────── */
.rw-vip__hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding: 14px 16px;
    border: 1px solid var(--vip-edge);
    border-radius: 14px;
    background:
        radial-gradient(120% 160% at 0% 0%, var(--vip-face), transparent 60%),
        linear-gradient(120deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .05));
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .02) inset, 0 10px 30px -18px var(--vip-glow);
    overflow: hidden;
}

/*
  등급 배지 — <전달본 그림>이다 (레드 2026-09-16 「레벨 표기 아이콘으로」).

  ⚠ 칠하지 않는다. 예전에는 등급색 판(linear-gradient)에 숫자를 얹었는데,
    이제 그림 자체가 방패 모양·등급 색·번호를 다 들고 있다. 그 뒤에 판을 깔면
    방패 둘레의 투명한 자리가 네모로 드러난다.
  ⚠ 원본이 360×360 이라 상자를 못 박고 contain 으로 앉힌다.
*/
.rw-vip__badge {
    display: block;
    width: 64px;
    height: 64px;
    flex: 0 0 auto;
    object-fit: contain;
    /* 어두운 판 위에서 방패가 뜨도록 등급색 빛만 살짝 남긴다 */
    filter: drop-shadow(0 6px 14px var(--vip-glow));
}

.rw-vip__name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--vip-ink);
}

.rw-vip__mine {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--ex-success, #1F7A4D);
    color: #fff;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
}

.rw-vip__desc {
    margin-left: auto;
    max-width: 44%;
    text-align: right;
    font-size: 11px;
    line-height: 1.5;
    color: var(--ex-text-dim, #8a96ad);
}

/* 8등급만 빛이 한 줄 흐른다 — 아래 등급은 담백하게 둔다 */
.rw-vip[data-tier="8"] .rw-vip__hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .14) 50%, transparent 65%);
    transform: translateX(-120%);
    animation: rwVipShine 3.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes rwVipShine {
    0%, 55% { transform: translateX(-120%); }
    100%    { transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce) {
    .rw-vip[data-tier="8"] .rw-vip__hero::after { animation: none; opacity: .35; transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   칩 줄 = 등급 사다리.

   ★★ <고르기 전에도> 등급마다 다르다 (레드 2026-09-16 「여기 처음부터 차별화 두자,
     선택했을 때 효과처럼」). 예전에는 고른 칩 하나만 색을 입고 나머지는 전부
     같은 회색이었다 — 그러면 <고르기 전에는> 사다리가 안 보인다.
     8등급이 특별하다는 것을 알려면 8등급을 눌러 봐야 했다는 뜻이다.

   ★ 색은 칩마다 <두 값>으로만 준다.
       --rgb  등급 색 (rw-vip 팔레트와 <같은 값>이다 — 창과 칩이 따로 놀면 안 된다)
       --w    그 색을 얼마나 세게 쓸까. 1등급 .10 → 8등급 .34 로 올라간다
     나머지(테두리·바탕·그림자·고른 상태)는 아래 두 규칙이 그 둘로 만들어 낸다.
     등급을 늘리면 <이 표에 한 줄>만 보태면 된다.

   ⚠ 색을 #hex 로 두면 알파를 따로 못 만든다. rgb 세 값으로 둬야
     rgba(var(--rgb), .12) 처럼 <같은 색의 옅은 판>을 쓸 수 있다.
   ══════════════════════════════════════════════════════════════════════ */
.rw-tier__chip                  { --rgb: 140, 150, 168; --w: .10; }
.rw-tier__chip[data-tier="2"]   { --rgb: 155, 178, 214; --w: .13; }
.rw-tier__chip[data-tier="3"]   { --rgb: 76, 134, 232;  --w: .17; }
.rw-tier__chip[data-tier="4"]   { --rgb: 47, 184, 230;  --w: .20; }
.rw-tier__chip[data-tier="5"]   { --rgb: 138, 111, 232; --w: .24; }
.rw-tier__chip[data-tier="6"]   { --rgb: 192, 97, 224;  --w: .27; }
.rw-tier__chip[data-tier="7"]   { --rgb: 231, 185, 60;  --w: .31; --ink: #FFF6DF; }
.rw-tier__chip[data-tier="8"]   { --rgb: 244, 233, 201; --w: .34; --ink: #FFFDF5; }

/*
  고르지 않은 칩. <담백하되 제 색이 있다> — 테두리와 바탕에 옅게만 깔고,
  숫자만 또렷하게 제 색으로 둔다. 여덟이 한 줄에 서면 그 자체가 사다리다.
*/
.rw-tier__chip {
    border-color: rgba(var(--rgb), var(--w));
    background:
        linear-gradient(165deg, rgba(var(--rgb), calc(var(--w) * .38)), transparent 72%),
        var(--ex-panel, #111827);
}

.rw-tier__chip .rw-tier__no { color: rgb(var(--rgb)); }

.rw-tier__chip:hover {
    border-color: rgba(var(--rgb), calc(var(--w) + .28));
    background:
        linear-gradient(165deg, rgba(var(--rgb), calc(var(--w) * .7)), transparent 72%),
        var(--ex-panel, #111827);
}

/*
  고른 칩. 같은 색을 <세게> 쓴다 — 고르기 전과 다른 색이 아니라 같은 색의 강약이라,
  눌렀을 때 「다른 것이 됐다」가 아니라 「이것이 켜졌다」로 읽힌다.
*/
.rw-tier__chip.is-on {
    border-color: rgb(var(--rgb));
    background:
        linear-gradient(160deg, rgba(var(--rgb), calc(var(--w) + .16)), rgba(var(--rgb), .06)),
        var(--ex-panel, #111827);
    color: var(--ink, #fff);
    box-shadow: var(--sheen), 0 8px 24px -14px rgba(var(--rgb), calc(var(--w) + .3));
}

/* 고른 칩은 숫자도 글자색을 따른다 — 테두리까지 같은 색이라 숫자만 튀면 시끄럽다 */
.rw-tier__chip.is-on .rw-tier__no { color: inherit; }

/*
  금·백금만 위쪽에 얇은 광택 한 줄. 아래 등급까지 넣으면 특별함이 사라진다.

  ⚠ 광택을 `.rw-tier__chip[data-tier="8"]{ box-shadow: … }` 로 <직접> 주면 안 된다.
    그 선택자는 `.rw-tier__chip.is-on` 과 구체성이 (0,2,0) 으로 같고 <뒤에> 있어서,
    8등급을 고른 순간 선택 그림자를 통째로 덮는다 — 제일 화려해야 할 칩만 납작해진다.
    그림자 값이 아니라 <변수>로 넘겨, 두 상태가 각자 합성하게 한다.
*/
.rw-tier__chip { --sheen: 0 0 #0000; box-shadow: var(--sheen); }
.rw-tier__chip[data-tier="7"],
.rw-tier__chip[data-tier="8"] { --sheen: inset 0 1px 0 rgba(255, 255, 255, .10); }

/* ── 값 카드도 등급 색을 따른다 ───────────────────────────────────────── */
.rw-vip .rw-ben2__card {
    border-color: var(--vip-edge);
    background:
        linear-gradient(180deg, var(--vip-face), transparent 70%),
        var(--ex-panel, #111827);
}

.rw-vip .rw-ben2__val { color: var(--vip-ink); }

.rw-vip[data-tier="7"] .rw-ben2__card,
.rw-vip[data-tier="8"] .rw-ben2__card {
    box-shadow: 0 10px 26px -20px var(--vip-glow);
}

/* 위 등급일수록 갈래 제목에 색 실선이 붙는다 */
.rw-vip .rw-ben2__title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rw-vip .rw-ben2__title::before {
    content: '';
    width: 3px;
    height: 12px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--vip), var(--vip-2));
}