/* ==========================================================================
   rewards — 리워드 수령
   내 등급·총 보너스 / 리워드출석·낙첨 포인트 / 출석 일자 — 두 칸씩 세 줄
   섹션 제목과 좌우 화살표는 components.css 의 .sec 부품을 그대로 쓴다.
   ========================================================================== */

/* ---- 리워드 쪽 전체 -----------------------------------------------------
   바깥 .container 는 섹션 사이를 --gap-sec(24) 로 벌린다. 그것은 화면 전체의
   결이라 손대면 다른 화면이 같이 움직인다.

   ★ 리워드는 <한 덩어리로 읽히는 격자>다 — 줄 사이도 칸 사이와 같은 16 이
     맞다. 세로만 넓으면 두 줄이 서로 다른 구역처럼 갈라져 보인다.
   ------------------------------------------------------------------------ */
.rw-page{ display:flex; flex-direction:column; gap:var(--gap-card); }

/* ---- 두 칸 한 줄 (2026-09-15 레드가 배치를 다시 잡았다) ---------------
   1줄  내 등급 | 총 보너스      ← 내가 어디까지 왔나
   2줄  리워드출석 | 낙첨 포인트   ← 오늘 받을 것과 저절로 쌓이는 것
   3줄  출석 일자 (한 줄 전체)

   ★ align-items:stretch 다. 한 줄에 놓인 두 카드가 아래 끝을 안 맞추면
     줄이 아니라 <떠 있는 카드 두 장>으로 읽힌다.
   ------------------------------------------------------------------------ */
.rw-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-card); align-items:stretch; }

/* 히어로가 <반폭>으로 들어왔다. 전달본의 한 줄 짜임(1fr auto auto)은
   이 폭에서 제목과 알약이 서로를 밀어낸다 — 세로로 쌓고 달력 이모지는 뺀다. */
/* ★ 금액을 카드 <하단>으로 (레드 2026-09-15).
     옆 칸(낙첨 포인트)이 여섯 줄이라 히어로가 함께 늘어난다. 내용이 위에만
     몰리면 아래가 통째로 비어 <덜 만든 카드>로 보인다.
     align-content:space-between — 제목 덩이는 위, 금액 상자는 바닥에 붙는다. */
.rw-row .rw-hero{
  grid-template-columns:1fr; align-content:space-between;
  gap:16px; padding:24px;
}
.rw-row .rw-hero__art{ display:none; }
/* ★ 금액을 <오른쪽 끝>으로 (레드 2026-09-15).
     전달본에서는 이 상자가 히어로 오른쪽의 <좁은 칸>이라 라벨 아래 금액을
     쌓는 것이 맞았다. 반폭 배치에서는 상자가 카드 폭만큼 넓어져
     긴 라벨 아래 금액만 왼쪽에 남아 <버려진 숫자>로 보인다.
   ★ 바로 옆 낙첨 포인트의 .rw-kv 와 같은 짜임이다 — 라벨 왼쪽, 값 오른쪽.
     한 줄에 놓인 두 카드가 같은 결로 읽혀야 한다.
   ⚠ 좁아지면 줄을 바꿔 쌓는다. 붙여 두면 긴 금액이 라벨을 밀어낸다. */
.rw-row .rw-hero__sum{
  min-width:0;
  display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:4px 16px;
}
.rw-row .rw-hero__sum span{ flex:1 1 auto; min-width:0; }
.rw-row .rw-hero__sum b{ margin-top:0; text-align:right; }
.rw-row .rw-hero__title{ font-size:var(--fs-xl); }
.rw-row .rw-hero__title b{ font-size:var(--fs-2xl); }

/* ---- VIP 등급별 혜택 표 (모달) ----------------------------------------
   ★ <행이 혜택, 열이 등급>이다. 회원이 알고 싶은 것은 「내 콤프가 위 등급에서
     얼마가 되나」라서, 한 줄을 왼쪽에서 오른쪽으로 읽으면 답이 나온다.
   ★ 여덟 등급이 <한 화면에> 들어가야 한다. 옆으로 넘치면 제일 보고 싶은
     최고 등급이 화면 밖으로 밀린다 — 처음에 실제로 그랬다.
     그래서 큰 금액은 줄여 쓰고(1.5억), 등급 이름은 숫자를 앞세운다.
   ------------------------------------------------------------------------ */
.rw-ben{ overflow-x:auto; }
.rw-ben__tbl{
  width:100%; border-collapse:separate; border-spacing:0;
  font-size:var(--fs-sm);
  /* 숫자가 세로로 줄을 맞춘다 — 등급 사이 차이가 눈에 들어오는 까닭이다 */
  font-variant-numeric:tabular-nums;
}
.rw-ben__tbl th,
.rw-ben__tbl td{ padding:9px 10px; text-align:right; white-space:nowrap; }

/* ── 머리 줄 — 등급 ──
   ★ 선을 긋지 않는다. 줄 대신 <바탕 없는 여백>으로 가른다 —
     칸마다 테두리를 두르면 표가 격자무늬가 되어 숫자가 안 읽힌다. */
.rw-ben__tbl thead th{
  position:sticky; top:0; z-index:2;
  padding:12px 10px 10px;
  background:var(--surface-1);
  border-bottom:1px solid var(--line);
  font-weight:700; line-height:1.25;
}
.rw-ben__no{
  display:block;
  font-size:var(--fs-lg); font-weight:900; color:var(--text-2);
  letter-spacing:-.01em;
}
.rw-ben__name{
  display:block; margin-top:1px;
  font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-5);
}

/* ── 첫 칸 — 혜택 이름. 굴러도 붙어 있는다 ──
   ⚠ 배경이 없으면 굴릴 때 숫자가 이름 위로 지나간다. */
.rw-ben__tbl tbody th,
.rw-ben__tbl thead th:first-child{
  position:sticky; left:0;
  text-align:left; background:var(--surface-1);
}
.rw-ben__tbl thead th:first-child{ z-index:3; }
.rw-ben__tbl tbody th{
  z-index:1;
  font-size:var(--fs-xs); font-weight:700; color:var(--text-3);
  padding-left:2px;
}

/* ── 값 ── */
.rw-ben__tbl tbody td{ font-weight:800; color:var(--text); }
/* 줄을 짚어 준다. 열한 줄을 가로로 훑을 때 한 칸 아래를 읽기 쉽다 */
.rw-ben__tbl tbody tr:hover th,
.rw-ben__tbl tbody tr:hover td{ background:var(--surface-2); }

/* ── 갈래 띠 ──
   ★ 선 하나로 끊지 않고 <이름을 붙여> 끊는다. 「돌려받는 것」과
     「걸 수 있는 금액」은 회원에게 아예 다른 이야기다. */
.rw-ben__grp th{
  position:sticky; left:0;
  padding:16px 2px 6px;
  text-align:left; background:var(--surface-1);
  font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-5);
}
.rw-ben__tbl tbody tr:first-child .rw-ben__grp th,
.rw-ben__grp:first-child th{ padding-top:8px; }

/* ── 내 등급 열 ──
   ★ 칸마다 칠하지 않고 <기둥 하나>로 세운다. 위아래로 이어지는 띠가
     「이 열이 나다」를 한눈에 말해 준다 — 칸별 칠은 얼룩으로 보인다. */
.rw-ben__tbl .is-mine{
  background:linear-gradient(
      to bottom,
      color-mix(in srgb, var(--primary) 20%, transparent),
      color-mix(in srgb, var(--primary) 9%, transparent));
}
.rw-ben__tbl thead th.is-mine{
  border-bottom-color:var(--primary);
  border-radius:var(--r-sm) var(--r-sm) 0 0;
}
.rw-ben__tbl thead th.is-mine .rw-ben__no{ color:var(--text); }
.rw-ben__tbl thead th.is-mine .rw-ben__name{ color:var(--primary); }
.rw-ben__tbl tbody tr:hover td.is-mine{
  background:color-mix(in srgb, var(--primary) 26%, transparent);
}

.rw-ben__note{ margin:14px 0 0; font-size:var(--fs-xs); line-height:1.6; color:var(--text-4); }

/* 좁은 화면 — 표는 제 상자 안에서 옆으로 구른다(쪽 전체가 밀리면 안 된다) */
@media (max-width:640px){
  .rw-ben__tbl th,
  .rw-ben__tbl td{ padding:8px; }
  .rw-ben__tbl{ font-size:var(--fs-xs); }
}

/* ---- 인증 유도 · 누적 수령 보너스 (2단) --------------------------------
   한 줄로 길게 늘이면 가운데가 빈다. 반폭 두 칸으로 나눠
   왼쪽은 행동(인증), 오른쪽은 표기(누적 수령)로 역할을 갈랐다.
   ------------------------------------------------------------------------ */
.rw-2up{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-card); align-items:stretch; }
.rw-2up--solo{ grid-template-columns:1fr; }   /* 인증을 마친 회원 — 오른쪽 칸만 남는다 */
/* ⚠ .rw-2up / .rw-kyc 는 2026-09-15 배치에서 <화면에 안 나온다>(레드가 걷었다).
     KYC 화면이 제 몫을 하게 되면 그대로 되살릴 수 있어 규칙은 남겨 둔다. */

/* 두 줄 짜임 — 윗줄은 아이콘+문구, 아랫줄은 게이지+버튼.
   게이지가 왼쪽, `인증 계속하기` 가 오른쪽. 화면 폭이 바뀌어도 이 순서를 지킨다. */
.rw-kyc{
  display:grid; align-content:center;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:
    "ico txt txt"
    "bar bar btn";
  gap:14px 12px;
  padding:16px 20px; border-radius:var(--r);
  background:var(--surface-1); border:1px solid var(--line);
  transition:border-color var(--t-color), background var(--t-bg);
}
.rw-kyc:hover{ border-color:var(--primary); background:var(--surface-2); }
.rw-kyc__ico{ grid-area:ico; font-size:26px; line-height:1; }
.rw-kyc__txt{ grid-area:txt; min-width:0; align-self:center; }
.rw-kyc__txt b{ display:block; font-size:var(--fs-sm); font-weight:800; }
.rw-kyc__txt small{ display:block; margin-top:2px; font-size:var(--fs-xs); color:var(--text-4); }
.rw-kyc__bar{
  grid-area:bar; align-self:center; min-width:80px; height:6px;
  border-radius:var(--r-full); background:var(--surface-3); overflow:hidden;
}
.rw-kyc__bar i{ display:block; height:100%; border-radius:var(--r-full); background:var(--primary); }
.rw-kyc .btn{ grid-area:btn; }

/* ---- 누적 수령 보너스 — 표기 전용, 누르는 곳이 없다 --------------------- */
.rw-total{
  display:flex; flex-direction:column;
  padding:16px 20px; border-radius:var(--r);
  background:var(--surface-1); border:1px solid var(--line);
}
.rw-total__title{ font-size:var(--fs-sm); font-weight:800; color:var(--text-2); }
.rw-total__amt{ display:block; margin-top:4px; font-size:var(--fs-2xl); font-weight:900; }
.rw-total__list{ margin-top:auto; padding-top:12px; display:grid; gap:6px; list-style:none; }
.rw-total__list li{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.rw-total__list span{ font-size:var(--fs-xs); color:var(--text-4); }
.rw-total__list b{ font-size:var(--fs-xs); font-weight:700; color:var(--text-2); }

/* ---- 히어로 ------------------------------------------------------------ */
.rw-hero{
  display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:24px;
  padding:28px; border-radius:var(--r);
  background:var(--surface-1); border:1px solid var(--line);
}
.rw-hero__title{ font-size:var(--fs-2xl); font-weight:700; line-height:1.15; }
.rw-hero__title b{ display:block; font-size:var(--fs-3xl); font-weight:700; }
.rw-hero__title em{ font-style:normal; color:var(--cta); }
.rw-hero__help{
  display:inline-flex; align-items:center; gap:6px; margin-top:10px;
  font-size:var(--fs-sm); font-weight:700; color:var(--text-2);
}
.rw-hero__help:hover{ color:var(--text); }

/* 타이머와 받기 버튼이 하나의 알약 안에 들어간다 */
.rw-claim{
  display:flex; align-items:center; gap:4px; margin-top:16px;
  width:266px; height:44px; padding:4px;
  border-radius:16px; background:var(--bg);
}
.rw-claim__timer{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  width:129px; height:36px; font-size:var(--fs-xs); font-weight:700; color:var(--text-2);
}
.rw-claim__btn{
  width:125px; height:36px; border-radius:12px;
  font-size:var(--fs-xs); font-weight:900;
  background:var(--cta); color:var(--text-on-cta);
}
.rw-claim__btn:hover{ background:var(--cta-hi); }
.rw-claim__btn[disabled]{ background:transparent; color:var(--text-5); }

.rw-hero__art{ font-size:64px; line-height:1; }
.rw-hero__sum{
  min-width:210px; padding:16px 20px; border-radius:var(--r);
  background:var(--surface-2); border:1px solid var(--line);
}
.rw-hero__sum span{ display:block; font-size:var(--fs-xs); color:var(--text-4); }
.rw-hero__sum b{ display:block; margin-top:6px; font-size:var(--fs-2xl); font-weight:900; }

/* ---- 날짜 카드 줄 ------------------------------------------------------
   루벳 Vault Schedule 규격 (문서 §3.1) — 카드 288 × 268, 간격 16.
   4장이 한 화면(1200)에 들어가고 나머지는 좌우 화살표로 넘긴다.
   ------------------------------------------------------------------------ */
.rw-days{ display:flex; gap:var(--gap-card); }
.rw-day{
  /* 폭을 고정하지 않는다. 화면이 좁아도 4장이 잘리지 않고 딱 들어가게 나눈다.
     컨테이너가 1200 일 때 288 이 되므로 실측값(§3.1)과 어긋나지 않는다. */
  flex:0 0 calc((100% - 3 * var(--gap-card)) / 4);
  aspect-ratio:288 / 268;          /* 폭이 줄면 높이도 같은 비율로 줄어든다 */
  display:flex; flex-direction:column;
  scroll-snap-align:start;
  border-radius:var(--r); overflow:clip;
  background:var(--surface-1); border:1px solid var(--line);
}

/* 머리 — 날짜 · 요일 · 금액. 본문보다 한 단계 밝다. */
.rw-day__head{
  display:flex; align-items:center; gap:8px;
  flex:none; height:60px; padding:0 16px; background:var(--surface-3);
}
.rw-day__num{
  display:grid; place-items:center; flex:none;
  width:44px; height:44px; border-radius:8px;
  background:rgba(0,0,0,.22);
  font-size:28px; font-weight:900; line-height:1;
}
.rw-day__meta{ min-width:0; }
.rw-day__label{ display:block; font-size:16px; font-weight:900; }
.rw-day__amt{ display:block; margin-top:2px; font-size:12px; font-weight:500; color:var(--text-3); }

/* 본문 — 가운데 한 줄. 받을 것이 없는 날도 카드를 감추지 않는다. */
.rw-day__body{
  flex:1; min-height:0; display:grid; place-items:center; align-content:center; gap:10px;
  padding:16px; text-align:center;
}
.rw-day__state{ font-size:var(--fs-sm); color:var(--text-5); }
.rw-day__mark{ font-size:34px; line-height:1; opacity:.5; }

/* 받은 날 */
.rw-day--claimed .rw-day__amt{ text-decoration:line-through; opacity:.6; }
.rw-day--claimed .rw-day__mark{ color:var(--success); opacity:1; }

/* 오늘 — 머리를 노랗게 하고 본문에 받기 버튼을 둔다 */
.rw-day--today{ border-color:var(--cta); }
.rw-day--today .rw-day__head{ background:var(--cta); }
.rw-day--today .rw-day__label{ color:var(--text-on-cta); }
.rw-day--today .rw-day__amt{ color:rgba(0,0,0,.6); }
.rw-day--today .rw-day__num{ background:rgba(0,0,0,.16); color:var(--text-on-cta); }
.rw-day--today .rw-day__body{ background:rgba(255,206,0,.06); }

/* 큰 보상이 걸린 날 */
.rw-day--big .rw-day__amt{ color:var(--cta); font-weight:800; }
.rw-day--big .rw-day__mark{ opacity:.9; }

/* ---- 낙첨 포인트 · 내 등급 (2단) --------------------------------------- */
.rw-cols{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-card); }
.rw-panel{
  padding:20px; border-radius:var(--r);
  background:var(--surface-1); border:1px solid var(--line);
}
.rw-panel__title{ font-size:var(--fs-md); font-weight:900; }
.rw-panel__sub{ margin-top:4px; font-size:var(--fs-xs); color:var(--text-4); }
.rw-kv{ display:flex; justify-content:space-between; align-items:baseline; margin-top:16px; }
.rw-kv span{ font-size:var(--fs-sm); color:var(--text-3); }
.rw-kv b{ font-size:var(--fs-lg); font-weight:900; }
/* 줄 이름 옆에 붙는 작은 알림 — `적립 마감` 처럼 그 줄에만 걸리는 단서 */
.rw-kv__note{
  display:inline-block; margin-left:6px; padding:2px 8px;
  border-radius:var(--r-full); background:var(--surface-3);
  font-size:var(--fs-sm); font-style:normal; font-weight:700;
  color:var(--text-4); white-space:nowrap;
}
.rw-rate{
  display:inline-block; margin-top:12px; padding:4px 10px; border-radius:var(--r-full);
  background:var(--surface-3); font-size:var(--fs-xs); font-weight:800; color:var(--text-2);
}
.rw-panel .btn{ margin-top:16px; }

/* ---- 내 등급 카드 -------------------------------------------------------
   왼쪽에 팔각 뱃지(8등급 = 8각) + 링 게이지, 오른쪽 끝에 등급명.
   그 아래 한 줄 게이지가 여덟 칸을 끊지 않고 잇는다. 은색에서 금색으로 흐른다.
   등급 조건표는 넣지 않는다 — VIP 클럽 페이지가 맡는다 (문서 §7.5).
   ------------------------------------------------------------------------ */
.tierA{ display:flex; flex-direction:column; position:relative; overflow:hidden; }
/* 왼쪽 아래에 깔리는 옅은 빛 — 뱃지를 카드 위에 띄워 보이게 하는 층 */
.tierA::before{
  content:""; position:absolute; inset:auto auto -40% -18%;
  width:320px; height:320px; border-radius:var(--r-full);
  background:radial-gradient(circle, color-mix(in oklab, var(--primary) 34%, transparent), transparent 68%);
  pointer-events:none;
}
.tierA > *{ position:relative; }

.tierA__head{ display:flex; align-items:center; justify-content:space-between; gap:16px; }   /* 문구가 빠져 한 줄이다 */
.tierA__step{
  flex:none; padding:5px 12px; border-radius:var(--r-full);
  background:var(--surface-2); border:1px solid var(--line);
  font-size:var(--fs-sm); font-weight:700; color:var(--text-4); white-space:nowrap;
}
.tierA__step b{ font-size:var(--fs-base); font-weight:900; color:var(--text); }

.tierA__main{
  flex:1; display:grid; grid-template-columns:138px 1fr; align-items:center;
  gap:20px; margin-top:32px;
}

/* 뱃지 ------------------------------------------------------------------- */
.tierA__badge{ position:relative; width:138px; height:138px; animation:tierA-rise .5s var(--ease-pop) both; }
.tierA__badge svg{ display:block; width:100%; height:100%; overflow:visible; }
.tierA__sheen{
  position:absolute; inset:14px; border-radius:var(--r-full);
  background:conic-gradient(from 0deg, transparent 0 62%,
    color-mix(in oklab, var(--tier-silver-hi) 40%, transparent) 76%, transparent 88%);
  opacity:.5; pointer-events:none; animation:tierA-turn 14s linear infinite;
}
.tierA__ring-track{ fill:none; stroke:var(--surface-2); stroke-width:9; }
/* 채운 길이는 화면에서 계산해 style 로 넣는다 (둘레 2π×66) */
.tierA__ring-fill{
  fill:none; stroke:url(#tierA-grad); stroke-width:9; stroke-linecap:round;
  transform:rotate(-90deg); transform-origin:50% 50%;
}
.tierA__plate{ fill:url(#tierA-plate); stroke:var(--line); stroke-width:1.5; }
.tierA__bevel{ fill:none; stroke:var(--tier-silver-lo); stroke-width:1.5; opacity:.5; }
.tierA__num{
  fill:var(--tier-silver-hi); font-family:var(--font); font-size:46px; font-weight:900;
  text-anchor:middle; dominant-baseline:central;
}
.tierA__numcap{
  fill:var(--tier-silver-lo); font-family:var(--font); font-size:10px; font-weight:700;
  letter-spacing:.14em; text-anchor:middle;
}
.tierA__badge, .tierA__sheen{ transition:transform var(--t-zoom); }
.tierA:hover .tierA__badge{ transform:translateY(-3px) scale(1.02); }

/* 등급명 — 한 줄로 오른쪽 끝에 붙인다 */
.tierA__info{
  min-width:0; align-self:stretch;
  display:flex; flex-direction:column; justify-content:flex-start; gap:16px;
}
.tierA__now{ display:flex; align-items:baseline; justify-content:flex-end; gap:10px; }
.tierA__now em{ flex:none; font-style:normal; font-size:var(--fs-xs); font-weight:800; color:var(--text-5); }
/* 실버는 은색이다. 위에서 빛을 받는 금속 결. */
.tierA__now b{
  font-size:var(--fs-hero); line-height:1.04; font-weight:900;
  background:linear-gradient(168deg, var(--tier-silver-hi) 0%, var(--tier-silver-mid) 42%,
    var(--tier-silver-lo) 58%, var(--tier-silver-hi) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* 게이지 머리말 — 왼쪽은 남은 정도, 오른쪽은 쌓인 점수 */
.tierA__cap{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px; }
.tierA__next{ font-size:var(--fs-base); color:var(--text-4); }
.tierA__next b{ font-weight:900; color:var(--cta); }
.tierA__next strong{ font-size:var(--fs-lg); font-weight:900; color:var(--text-2); }
.tierA__pts{ flex:none; font-size:var(--fs-sm); font-weight:800; color:var(--text-5); white-space:nowrap; }
.tierA__pts b{ font-size:var(--fs-base); font-weight:900; color:var(--text-2); }

/* 게이지 — 여덟 칸을 끊지 않는다. 눈금은 칸 경계만 알린다. */
.tierA__track{
  position:relative; height:14px; border-radius:var(--r-full);
  background:var(--surface-2); box-shadow:inset 0 1px 0 rgba(0,0,0,.35);
}
.tierA__fill{
  position:absolute; inset:0 auto 0 0; border-radius:var(--r-full); overflow:hidden;
  background:linear-gradient(90deg, var(--tier-silver-lo), var(--tier-silver-hi) 34%,
    var(--primary) 68%, var(--cta));
}
.tierA__fill::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  animation:tierA-sweep 2.8s ease-in-out infinite;
}
.tierA__ticks{ position:absolute; inset:0; display:flex; }
.tierA__ticks i{ flex:1; border-right:1px solid color-mix(in oklab, var(--bg) 70%, transparent); }
.tierA__ticks i:last-child{ border-right:0; }
.tierA__dot{
  position:absolute; top:50%; width:16px; height:16px;
  transform:translate(-50%,-50%); border-radius:var(--r-full);
  background:var(--cta); box-shadow:0 0 0 3px color-mix(in oklab, var(--cta) 26%, transparent);
}

.tierA__foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:16px; padding-top:12px; border-top:1px solid var(--line);
}
.tierA__note{ font-size:var(--fs-xs); color:var(--text-5); }
.tierA .tierA__cta{ margin-top:0; flex:none; }

@keyframes tierA-turn{ to{ transform:rotate(360deg); } }
@keyframes tierA-rise{ from{ opacity:0; transform:translateY(10px) scale(.92); } to{ opacity:1; transform:none; } }
@keyframes tierA-sweep{ 0%,100%{ transform:translateX(-100%); } 60%{ transform:translateX(100%); } }

/* ---- 좁은 화면 --------------------------------------------------------- */
@media (max-width:1024px){
  .rw-hero{ grid-template-columns:1fr; gap:16px; padding:20px; }
  .rw-hero__art{ display:none; }
  .rw-hero__sum{ min-width:0; }
  .rw-day{ flex:0 0 232px; aspect-ratio:auto; height:224px; }   /* 좁은 화면은 4장을 고집하지 않는다 */
  .rw-day__num{ width:38px; height:38px; font-size:23px; }
  .rw-cols{ grid-template-columns:1fr; }
  /* 두 칸을 위아래로 쌓는다. 쌓이면 히어로는 다시 제 폭을 갖는다 */
  .rw-row{ grid-template-columns:1fr; }
  .rw-row .rw-hero{ padding:20px; }
  /* 좁은 화면에서는 두 칸을 위아래로 쌓는다.
     인증 칸 안의 게이지·버튼 배치는 그대로 — 게이지 왼쪽, 버튼 오른쪽. */
  .rw-2up{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .tierA__main{ grid-template-columns:108px 1fr; gap:16px; }
  .tierA__badge{ width:108px; height:108px; }
  .tierA__now b{ font-size:var(--fs-3xl); line-height:var(--lh-3xl); }
  .tierA__cap{ flex-direction:column; align-items:flex-start; gap:2px; }
  .tierA__foot{ flex-direction:column; align-items:stretch; }
  .rw-claim{ width:100%; }
  .rw-claim__timer{ flex:1; }
  .rw-claim__btn{ flex:none; }
}