/* HANDY Burn Rewards — 실 서비스 화면 스타일 (2026-10-25)
   시안(9화면)의 레이아웃·간격·색을 기준으로, 기존 style.css / style.v2.css 위에
   덧붙인다. 기존 규칙은 덮어쓰지 않고 필요한 것만 추가·보정한다. */

:root {
  --bn-navy: #0b2a4a;
  --bn-blue: #2879EA;      /* V3 §22 */
  --bn-cyan: #18B7B1;      /* V3 §22 */
  --bn-ink: #16202c;
  --bn-dim: #7b8aa0;
  --bn-faint: #9fb0c6;
  --bn-line: #e4eaf2;
  --bn-bg: #f3f6fa;
  --bn-card: #ffffff;
  --bn-ok: #0f9d58;
  --bn-warn: #c77700;
  --bn-bad: #d33;
}

/* ── 기본 ─────────────────────────────────────────── */
* { -webkit-tap-highlight-color: transparent; }
body { background: var(--bn-bg); }

.app-root { min-height: 100dvh; }

.mobile-shell { display: flex; justify-content: center; background: var(--bn-bg); }
.mobile-ui {
  width: min(460px, 100%);
  min-height: 100dvh;
  background: var(--bn-card);
  display: flex;
  flex-direction: column;
  position: relative;
}
.mobile-content {
  flex: 1;
  padding: 14px 16px calc(84px + env(safe-area-inset-bottom));
  overflow-x: hidden;
}

/* ── 헤더 ─────────────────────────────────────────── */
.mobile-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  height: 54px; padding: 0 12px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--bn-line);
}
.mobile-header h1 {
  margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.02em;
  flex: 1; text-align: center; color: var(--bn-ink);
}
.mobile-header .brand { display: flex; align-items: center; gap: 7px; }
.mobile-header .brand b { font-size: 16px; letter-spacing: 0.01em; color: var(--bn-navy); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: 0 0 36px;
  border: 0; border-radius: 10px; background: transparent;
  color: var(--bn-ink); cursor: pointer;
}
.icon-btn:active { background: #eef2f7; }

.chip {
  border: 1px solid var(--bn-line); background: #f7f9fc;
  color: var(--bn-ink); border-radius: 999px;
  padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── 하단 네비 ────────────────────────────────────── */
.mobile-bottom {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: min(460px, 100%); z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: saturate(160%) blur(8px);
  border-top: 1px solid var(--bn-line);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-item {
  border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 0 8px; color: var(--bn-faint); font-size: 10.5px; font-weight: 600;
}
.nav-item.active { color: var(--bn-blue); }
.nav-item span { letter-spacing: -0.03em; }

/* ── 카드 / 공통 ─────────────────────────────────── */
.card {
  background: var(--bn-card);
  border: 1px solid var(--bn-line);
  border-radius: 16px;
}
.cardpad { padding: 16px; }
.card + .card { margin-top: 10px; }

.section-title {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin: 20px 0 10px;
}
.section-title h2 { margin: 0; font-size: 15px; font-weight: 700; color: var(--bn-ink); }

.between { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.center { text-align: center; }
.muted { color: var(--bn-faint); }
.positive { color: var(--bn-ok); }
.mt20 { margin-top: 14px; }
.top-space { margin-top: 7px; }
.pad { padding: 18px 0; }
.break { word-break: break-all; }
.hide { display: none !important; }
.numbers { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

.info-table { display: flex; flex-direction: column; }
.info-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 9px 0; font-size: 13.5px;
  border-bottom: 1px dashed var(--bn-line);
}
.info-row:last-child { border-bottom: 0; }
.info-row > span:first-child { color: var(--bn-dim); flex: 0 0 auto; }
.info-row > span:last-child { color: var(--bn-ink); text-align: right; word-break: break-all; }

.sub { color: var(--bn-dim); font-size: 13px; }
.fine-print {
  margin: 12px 0 0; font-size: 11.5px; line-height: 1.7; color: var(--bn-faint);
}
small { font-size: 12px; color: var(--bn-dim); }

/* ── 버튼 ─────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 12px; border: 1px solid transparent;
  padding: 13px 16px; font-size: 14.5px; font-weight: 700;
  cursor: pointer; line-height: 1.2; transition: opacity .12s, transform .06s;
}
.btn:active { transform: scale(0.985); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-block { display: flex; width: 100%; }
.btn-block + .btn-block { margin-top: 8px; }
.btn-sm { padding: 8px 13px; font-size: 12.5px; border-radius: 10px; }

/* V3 §22 — Primary 버튼은 흰 글씨를 고정한다.
   배경이 밝아져 글씨가 묻히는 일이 없도록 굵기와 그림자까지 같이 잡는다. */
.btn-primary {
  background: linear-gradient(135deg, #2879EA 0%, #18B7B1 100%);
  color: #FFFFFF !important;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  box-shadow: 0 2px 10px rgba(40, 121, 234, 0.22);
}
.btn-primary:disabled { box-shadow: none; text-shadow: none; }
.btn-primary svg { stroke: #FFFFFF; }
.btn-outline { background: #fff; border-color: var(--bn-line); color: var(--bn-ink); }
.btn-soft { background: #eaf2ff; color: var(--bn-blue); }
.btn-ghost { background: none; border: 0; color: var(--bn-dim); font-weight: 600; }

.btn-row { display: flex; gap: 8px; margin-top: 12px; }
.btn-row .btn { flex: 1; }

.link-btn {
  background: none; border: 0; padding: 0;
  color: var(--bn-blue); font-size: 12.5px; font-weight: 600; cursor: pointer;
}

/* ── 태그 ─────────────────────────────────────────── */
.tag {
  display: inline-block; padding: 4px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
  background: #e8f5ee; color: var(--bn-ok);
}
.tag.amber { background: #fff4e0; color: var(--bn-warn); }
.tag.red { background: #ffeaea; color: var(--bn-bad); }
.tag.gray { background: #eef2f7; color: var(--bn-dim); }

/* ── 알림 박스 ───────────────────────────────────── */
.alert {
  margin-top: 12px; padding: 12px 14px; border-radius: 12px;
  background: #f4f7fb; border: 1px solid var(--bn-line);
  font-size: 12.5px; line-height: 1.75; color: #42526a;
}
.alert.warn { background: #fff8ec; border-color: #f3e2c4; color: #7a5a1a; }
.alert.soft { background: #eef5ff; border-color: #d9e6fb; color: #2d4e82; }

/* ── 입력 ─────────────────────────────────────────── */
.field { margin-bottom: 13px; }
.field:last-of-type { margin-bottom: 0; }
.field label {
  display: block; margin-bottom: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--bn-dim);
}
.field input, .amt-wrap input, .pw-wrap input {
  width: 100%; box-sizing: border-box;
  padding: 13px 14px; border: 1px solid var(--bn-line); border-radius: 12px;
  font-size: 15px; color: var(--bn-ink); background: #fbfcfe;
  font-variant-numeric: tabular-nums;
}
.field input:focus, .amt-wrap input:focus, .pw-wrap input:focus {
  outline: none; border-color: var(--bn-blue); background: #fff;
  box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.1);
}
.field input::placeholder { color: #b9c4d2; }
.field-hint {
  display: block; margin-top: 6px;
  font-size: 11.5px; line-height: 1.6; color: var(--bn-faint);
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

.pw-wrap, .amt-wrap { position: relative; }
.pw-wrap input { padding-right: 46px; }
.pw-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border: 0; background: none;
  font-size: 16px; cursor: pointer; opacity: .6;
}
.amt-wrap input { padding-right: 62px; }
.amt-max {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  border: 1px solid var(--bn-line); background: #fff; border-radius: 8px;
  padding: 6px 10px; font-size: 12px; font-weight: 700; color: var(--bn-blue);
  cursor: pointer;
}

/* ── 로그인 ───────────────────────────────────────── */
.login-screen { padding-top: 14px; }
.login-logo { text-align: center; margin-bottom: 14px; }
.login-title {
  margin: 0 0 8px; text-align: center;
  font-size: 21px; font-weight: 800; line-height: 1.35; letter-spacing: -0.02em;
  color: var(--bn-ink);
}
.login-sub {
  margin: 0 0 20px; text-align: center;
  font-size: 13px; line-height: 1.7; color: var(--bn-dim);
}
.login-help { margin-top: 20px; text-align: center; }
.login-help p { margin: 0 0 8px; font-size: 12.5px; color: var(--bn-dim); }

/* ── 랜딩 ─────────────────────────────────────────── */
.landing-hero {
  margin: 2px 0 16px; border-radius: 20px; overflow: hidden;
  background: linear-gradient(160deg, #eaf4ff, #dcecff);
  aspect-ratio: 1 / 1;
}
.landing-hero img { display: block; width: 100%; height: 100%; object-fit: cover; }

.landing-title {
  margin: 0 0 8px; text-align: center;
  font-size: 27px; font-weight: 800; line-height: 1.22; letter-spacing: -0.025em;
  color: var(--bn-navy);
}
.landing-sub {
  margin: 0 0 18px; text-align: center;
  font-size: 13.5px; line-height: 1.7; color: var(--bn-dim);
}
.landing-mini { display: flex; gap: 8px; margin-bottom: 10px; }
.landing-mini > div {
  flex: 1; text-align: center;
  padding: 12px 6px; border: 1px solid var(--bn-line); border-radius: 13px;
  background: #fbfcfe;
}
.landing-mini small { display: block; font-size: 11px; margin-bottom: 4px; }
.landing-mini strong {
  font-size: 16px; font-weight: 800; color: var(--bn-blue);
  font-variant-numeric: tabular-nums;
}

.mine-peek { margin-top: 14px; background: linear-gradient(160deg, #f7fbff, #fff); }

.how-list { margin-top: 6px; }
.how-row { display: flex; gap: 11px; align-items: flex-start; padding: 8px 0; }
.how-no {
  flex: 0 0 23px; height: 23px; border-radius: 50%;
  background: #eaf2ff; color: var(--bn-blue);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
}
.how-row p { margin: 2px 0 0; font-size: 13px; line-height: 1.6; color: #42526a; }

/* ── 지갑 패널 ───────────────────────────────────── */
.wallet-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 14px; margin-bottom: 14px;
  background: linear-gradient(135deg, #f6fbff, #fff);
}
.wallet-card.as-button { width: 100%; text-align: left; cursor: pointer; font: inherit; }
.wallet-left { display: flex; align-items: center; gap: 11px; min-width: 0; }
.coin-circle {
  flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--bn-blue), var(--bn-cyan));
  color: #fff; font-weight: 800; font-size: 19px;
  display: inline-flex; align-items: center; justify-content: center;
}
.coin-circle.mini { flex: 0 0 30px; width: 30px; height: 30px; font-size: 14px; }
.coin-circle.big { width: 56px; height: 56px; font-size: 24px; margin: 0 auto 12px; }
.wallet-balance { font-size: 19px; font-weight: 800; margin-top: 2px; }
.wallet-balance span { font-size: 12px; font-weight: 600; color: var(--bn-dim); }
.wallet-sub { display: block; font-size: 11px; margin-top: 2px; }

/* ── 구간 카드 ───────────────────────────────────── */
.tier-section-title { margin: 4px 0 10px; }
.tier-section-title h2 { margin: 0; font-size: 15px; font-weight: 700; }
.tier-list { display: flex; flex-direction: column; gap: 10px; }

.tier-card {
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  background: #fff; border: 1.5px solid var(--bn-line); border-radius: 16px;
  padding: 14px 15px; transition: border-color .12s, box-shadow .12s;
}
.tier-card.selected {
  border-color: var(--bn-blue);
  box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.09);
  background: #fbfdff;
}
.tier-card.disabled { opacity: .5; cursor: not-allowed; }
.tier-first { display: flex; align-items: center; justify-content: space-between; }
.tier-amount { font-size: 16px; font-weight: 800; color: var(--bn-ink); }
.tier-chevron { color: #c3cedc; font-size: 20px; line-height: 1; }
.pick-dot {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--bn-blue); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.tier-rate {
  margin: 4px 0 6px; font-size: 24px; font-weight: 800;
  color: var(--bn-blue); letter-spacing: -0.02em;
}
.tier-hint { font-size: 12.5px; color: var(--bn-dim); }
.tier-hint.sub { margin-top: 2px; font-size: 11.5px; color: var(--bn-faint); }
.tier-foot { margin-top: 9px; }
.cap-free { color: var(--bn-ok); font-weight: 600; }
.tier-continue { margin-top: 14px; }

.progress {
  margin-top: 5px; height: 5px; border-radius: 999px;
  background: #e9eef5; overflow: hidden;
}
.progress span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--bn-blue), var(--bn-cyan));
  transition: width .3s ease;
}

/* ── 참여 단계 ───────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-bottom: 16px; }
.step { text-align: center; }
.step-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: #eef2f7; color: #9aa9bb;
  font-size: 12.5px; font-weight: 800; margin-bottom: 5px;
}
.step small { display: block; font-size: 10.5px; letter-spacing: -0.03em; color: var(--bn-faint); }
.step.active .step-no { background: var(--bn-blue); color: #fff; }
.step.active small { color: var(--bn-blue); font-weight: 700; }
.step.done .step-no { background: #d7ebff; color: var(--bn-blue); }

.selected-tier h2 { margin: 3px 0 0; font-size: 22px; font-weight: 800; }
.rate-badge {
  padding: 9px 14px; border-radius: 13px;
  background: linear-gradient(135deg, var(--bn-blue), var(--bn-cyan));
  color: #fff; font-size: 18px; font-weight: 800;
}

.addr-box {
  margin: 10px 0 0; padding: 13px 14px; border-radius: 12px;
  background: #f4f7fb; border: 1px solid var(--bn-line);
  font-size: 12.5px; line-height: 1.65; word-break: break-all; color: #22303f;
}

/* ── 보상 화면 ───────────────────────────────────── */
.hero-card { background: linear-gradient(160deg, #f5faff, #fff); }
.big-number { margin-top: 3px; font-size: 28px; font-weight: 800; letter-spacing: -0.025em; }
.big-number span { font-size: 13px; font-weight: 600; color: var(--bn-dim); }

.reward-grid, .org-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 11px;
}
.reward-grid .card, .org-stats .card { padding: 13px; }
.reward-grid small, .org-stats small { display: block; font-size: 11.5px; }
.reward-grid b, .org-stats b { display: block; margin-top: 4px; font-size: 17px; font-weight: 800; }
.org-stats b span { font-size: 12px; font-weight: 600; color: var(--bn-dim); }

.part-list { display: flex; flex-direction: column; gap: 9px; }
.part-row {
  background: #fff; border: 1px solid var(--bn-line);
  border-radius: 14px; padding: 13px 14px;
}
.part-row .sub small { font-size: 11.5px; }
.tx-link {
  margin-top: 8px; border: 0; background: none; padding: 0;
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--bn-blue); font-size: 11.5px; font-weight: 600; cursor: pointer;
}

.activity-list { display: flex; flex-direction: column; }
.activity-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 11px 0; border-bottom: 1px solid #f0f3f8;
}
.activity-row:last-child { border-bottom: 0; }
.activity-row b { font-size: 13.5px; font-weight: 700; }
.activity-row p { margin: 3px 0 0; font-size: 11.5px; color: var(--bn-faint); }
.activity-row .ar-right { text-align: right; }
.activity-row.total { border-top: 1.5px solid var(--bn-line); padding-top: 12px; }

/* ── 추천 / 조직 ─────────────────────────────────── */
.code-card { background: linear-gradient(160deg, #f6fbff, #fff); }
.code-big {
  margin: 5px 0 4px; font-size: 25px; font-weight: 800; letter-spacing: 0.04em;
  color: var(--bn-navy);
}
.code-card .sub { font-size: 11.5px; }

.referral-rewards { display: flex; flex-direction: column; gap: 8px; margin-top: 11px; }
.mini-pay {
  display: flex; align-items: center; gap: 11px;
  background: #fff; border: 1px solid var(--bn-line);
  border-radius: 13px; padding: 12px 13px;
}
.mini-icon {
  flex: 0 0 36px; width: 36px; height: 36px; border-radius: 11px;
  background: #eaf2ff; color: var(--bn-blue);
  display: inline-flex; align-items: center; justify-content: center;
}
.mini-icon.purple { background: #f0ebff; color: #6b4ee6; }
.mini-pay b { display: block; margin-top: 2px; font-size: 15px; font-weight: 800; }

.tabs { display: flex; gap: 6px; margin: 16px 0 11px; }
/* V3 §22 — 활성 탭 글씨가 배경에 묻히던 문제.
   흰 배경 + 진한 블루 글씨 + 하단 보더로 간다. 대비가 가장 확실하다. */
.tabs {
  background: #f4f7fb;
  border: 1px solid var(--bn-line);
  border-radius: 13px;
  padding: 4px;
  gap: 4px;
}
.tab {
  flex: 1; border: 0; background: transparent;
  border-radius: 10px; padding: 11px 6px;
  font-size: 13px; font-weight: 700; color: #8294aa; cursor: pointer;
  transition: background .12s, color .12s;
}
.tab.active {
  background: #FFFFFF;
  color: #2879EA;
  box-shadow: 0 1px 4px rgba(16, 24, 35, 0.1);
}

.tree { display: flex; flex-direction: column; gap: 9px; }
.tree-node { display: flex; align-items: center; gap: 11px; }
.tree-node.child { margin-left: 18px; position: relative; }
.tree-node.child::before {
  content: ''; position: absolute; left: -11px; top: 50%;
  width: 9px; height: 1px; background: #d7dfea;
}
.node-letter {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px;
  background: #eaf2ff; color: var(--bn-blue);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
}
.node-letter.lime { background: #e9f7ea; color: #2f9e44; }
.tree-info b { display: block; font-size: 13.5px; font-weight: 700; }
.tree-info small { font-size: 11.5px; }

.reward-metrics { display: flex; gap: 9px; }
.reward-metrics > div {
  flex: 1; background: #fff; border: 1px solid var(--bn-line);
  border-radius: 13px; padding: 13px; text-align: center;
}
.reward-metrics small { display: block; font-size: 11.5px; }
.reward-metrics b { display: block; margin-top: 4px; font-size: 17px; font-weight: 800; }

.next-rank {
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--bn-line);
}

/* ── 더보기 ───────────────────────────────────────── */
.profile-card strong { font-size: 16px; }
.more-links { display: flex; flex-direction: column; gap: 7px; }
.more-link {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; text-align: left; font: inherit;
  background: #fff; border: 1px solid var(--bn-line); border-radius: 13px;
  padding: 14px 15px; font-size: 13.5px; font-weight: 600;
  color: var(--bn-ink); cursor: pointer;
}
.more-link:active { background: #f7f9fc; }

.gate { padding: 34px 18px; }
.gate p { margin: 0; font-size: 13.5px; color: var(--bn-dim); line-height: 1.7; }

/* ── 빈 상태 ─────────────────────────────────────── */
.empty-state { padding: 30px 16px; text-align: center; }
.empty-state img { opacity: .5; margin-bottom: 10px; }
.empty-state p { margin: 0; font-size: 13px; color: var(--bn-faint); }

/* ── 모달 ─────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(13, 22, 34, 0.46);
  animation: bn-fade .15s ease-out;
}
.modal {
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(460px, 100%); z-index: 301;
  animation: bn-up .2s cubic-bezier(.22,.9,.3,1);
}
@keyframes bn-fade { from { opacity: 0 } }
@keyframes bn-up { from { transform: translate(-50%, 18px); opacity: 0 } }
.modal-body {
  background: #fff; border-radius: 22px 22px 0 0;
  padding: 22px 18px calc(20px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 34px rgba(13, 22, 34, 0.2);
  max-height: 86dvh; overflow-y: auto;
}
.modal-body h2 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.modal-body h3 { margin: 16px 0 6px; font-size: 14px; font-weight: 700; }

.success-mark {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 12px;
  background: #e8f5ee; color: var(--bn-ok);
  display: inline-flex; align-items: center; justify-content: center;
}

/* ── 로딩 ─────────────────────────────────────────── */
.busy-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(255, 255, 255, 0.55);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(1px);
}
.spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid #d9e3f0; border-top-color: var(--bn-blue);
  animation: bn-spin .7s linear infinite;
}
@keyframes bn-spin { to { transform: rotate(360deg) } }

.skeleton-wrap { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.skeleton {
  border-radius: 14px;
  background: linear-gradient(90deg, #eef2f7 25%, #f7f9fc 37%, #eef2f7 63%);
  background-size: 400% 100%;
  animation: bn-sheen 1.3s ease-in-out infinite;
}
.sk-hero { aspect-ratio: 1/1; border-radius: 20px; }
.sk-line { height: 16px; }
.sk-line.short { width: 60%; }
.sk-card { height: 72px; }
@keyframes bn-sheen { 0% { background-position: 100% 50% } 100% { background-position: 0 50% } }

/* ── 토스트 ───────────────────────────────────────── */
#toast {
  position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom));
  transform: translate(-50%, 14px);
  z-index: 500; max-width: min(420px, calc(100% - 32px));
  padding: 12px 17px; border-radius: 13px;
  background: rgba(16, 24, 35, 0.93); color: #fff;
  font-size: 13px; line-height: 1.55; text-align: center;
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.bad { background: rgba(176, 36, 36, 0.95); }

/* ── 작은 화면 보정 ──────────────────────────────── */
@media (max-width: 359px) {
  .mobile-content { padding-left: 13px; padding-right: 13px; }
  .landing-title { font-size: 24px; }
  .tier-rate { font-size: 22px; }
  .big-number { font-size: 25px; }
  .landing-mini strong { font-size: 15px; }
}


/* ── V3 전체 소각 현황 ──────────────────────────────── */
.stats-screen .reward-grid { margin-top: 10px; }
.stat-cell small { display: block; font-size: 11.5px; }
.stat-cell b { display: block; margin-top: 4px; font-size: 17px; font-weight: 800; }
.stat-cell b span { font-size: 11.5px; font-weight: 600; color: var(--bn-dim); }

.stat-tiers { display: flex; flex-direction: column; gap: 9px; }
.stat-tier {
  background: #fff; border: 1px solid var(--bn-line);
  border-radius: 14px; padding: 13px 14px;
}
.stat-tier b { font-size: 14.5px; font-weight: 800; }
.stat-tier .sub { margin-top: 3px; }
.stat-tier .sub small { font-size: 11.5px; }
.stat-tier .share {
  display: block; margin-top: 5px;
  font-size: 11px; color: var(--bn-faint); text-align: right;
}
.rate-chip {
  padding: 3px 9px; border-radius: 999px;
  background: #eaf2ff; color: #2879EA;
  font-size: 12px; font-weight: 800;
}

/* 주소 박스는 소각주소라 눈에 띄게 */
.addr-box {
  background: #eef5ff;
  border-color: #d3e3fb;
  color: #12335c;
  font-weight: 600;
  letter-spacing: 0.01em;
}


/* V3 출금 확인표 보조 */
.mt8 { margin-top: 8px; }
.negative { color: #d8544f; font-weight: 800; }
#wd-preview .row:last-child { border-top: 1px solid var(--bn-line); padding-top: 9px; }

/* ═══════════════════════════════════════════════════════════
   [V4] 프로그램 화면 신설 / 홈 요약 허브 / 예상 보상 확인
   ─ 기존 클래스는 건드리지 않고 덧붙이기만 한다.
   ═══════════════════════════════════════════════════════════ */
.dim{color:#7b8ea4;font-weight:450}
.mt8{margin-top:8px}

/* 홈 — 이번 주 재단 소각 발표 */
.home-weekly{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.home-weekly>div+div{border-left:1px solid #e7eef5;padding-left:12px}
.home-weekly small{display:block;font-size:10px;color:#72889c}
.home-weekly b{display:block;margin-top:5px;font-size:14px;color:#0b2e58}

/* 홈 — 로그인 전 안내 */
.gate-soft{background:#f7fbfd}
.gate-soft p{font-size:12px;line-height:1.7;color:#5d7690}

/* 참여 상세 — 예상 보상 확인 */
.expect-card{background:#f8fcfe}
.expect-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.expect-grid>div{background:#fff;border:1px solid #e7eef5;border-radius:10px;padding:11px}
.expect-grid small{display:block;font-size:10px;color:#788c9e}
.expect-grid b{display:block;font-size:14px;margin-top:5px;color:#0b2e58}
.expect-grid b span{font-size:10px;font-weight:650;color:#7b8ea4}

/* 프로그램 화면 */
.program-screen{padding-bottom:18px}
.program-hero{position:relative;border-radius:20px;overflow:hidden;background:#071f47;color:#fff}
.program-hero>img{width:100%;height:230px;object-fit:cover;object-position:center;display:block;opacity:.85}
.program-copy{padding:17px 18px 21px;background:linear-gradient(180deg,rgba(7,31,71,.2),#071f47)}
.program-copy span{font-size:10px;font-weight:800;letter-spacing:.06em;color:#5ee3d2}
.program-copy h1{font-size:27px;line-height:1.16;margin:8px 0;color:#fff;letter-spacing:-.6px}
.program-copy p{font-size:12px;line-height:1.7;color:#c7d8e8}

.program-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.program-feats .card{padding:12px 6px;text-align:center}
.program-feats small{display:block;font-size:9px;color:#72889f}
.program-feats b{display:block;margin-top:5px;font-size:15px;color:#0783d0}

.program-steps{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.program-steps>div{background:#fff;border:1px solid #e2ebf3;border-radius:12px;padding:12px 10px;text-align:center}
.program-steps b{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#e6f6f4;color:#07a795;font-size:11px}
.program-steps span{display:block;font-weight:800;font-size:12px;margin-top:7px;color:#0b2e58}
.program-steps small{display:block;font-size:10px;color:#7b8da0;margin-top:4px;line-height:1.5}

.program-tiers{display:grid;gap:6px}
.program-tiers>div{display:grid;grid-template-columns:1.15fr .5fr 1.35fr;gap:8px;align-items:center;
  background:#fff;border:1px solid #e3ebf2;border-radius:10px;padding:11px 12px;font-size:11px}
.program-tiers b{color:#0783d0;font-size:14px;text-align:center}
.program-tiers strong{text-align:right;font-size:11px;color:#0b2e58}

.program-burn b{font-size:12px;color:#0b2e58}
.program-burn p{font-size:11px;line-height:1.75;color:#637a91;margin-top:7px}

@media(max-width:360px){
  .program-feats{grid-template-columns:repeat(2,1fr)}
  .program-hero>img{height:180px}
  .program-copy h1{font-size:24px}
}

/* [V4 §07-B] 재단 주간 소각 발표 카드 */
.announce-list{display:grid;gap:9px}
.announce-card b{font-size:13px;color:#0b2e58}
.announce-period{font-size:10px;color:#7b8ea4;margin-top:7px}
.announce-memo{font-size:11px;line-height:1.75;color:#5d7690;margin-top:12px;
  background:#f7fafc;border-radius:9px;padding:10px 11px;white-space:pre-wrap}

/* ───────────────────────────────────────────────────────────
   [V4 §06 탭1] 조직도 — A/B 라인 묶음 + 노드 상세 진입
   ─────────────────────────────────────────────────────────── */
.line-head { display: flex; align-items: center; gap: 11px; margin-top: 14px;
  padding: 9px 11px; border-radius: 12px; background: #f2f6fb; }
.line-head:first-of-type { margin-top: 4px; }
.line-head.lime { background: #f1f8f2; }
.line-head .tree-info b { font-size: 13px; }
.line-empty { margin-left: 18px; font-size: 11.5px; color: #93a3b5; padding: 7px 0; }

/* 노드는 누를 수 있어야 하므로 button 이다 — 기본 버튼 외형을 지운다 */
.org-node { width: 100%; border: 0; background: transparent; padding: 8px 6px 8px 0;
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  border-radius: 11px; }
.org-node:active { background: #f4f7fa; }
.org-node .tree-info { flex: 1; min-width: 0; }
.node-nums { display: flex; gap: 12px; margin-top: 3px; flex-wrap: wrap; }
.node-nums span { font-size: 11px; color: #7b8ea4; }
.node-nums b { font-weight: 700; color: #334a5e; }
.node-arrow { font-size: 19px; color: #b7c3d1; flex: 0 0 auto; line-height: 1; }

@media (max-width: 360px) {
  .node-nums { gap: 8px; }
  .node-nums span { font-size: 10.5px; }
}

/* ───────────────────────────────────────────────────────────
   [2026-10-26] 카드 박스 크기 통일
     같은 줄에 있는 카드인데도 글자 길이에 따라 높이가 달라 보였다.
     (예: "421,982.01" 은 두 줄로 접히고 "0 건" 은 한 줄)
     grid 칸을 늘려 채우고, 안쪽은 세로 가운데로 맞춘다.
   ─────────────────────────────────────────────────────────── */
.reward-grid, .org-stats, .program-feats { align-items: stretch; }

.reward-grid > .card,
.org-stats  > .card {
  height: 100%;
  min-height: 84px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}
/* 숫자가 접혀서 칸 높이를 밀어올리지 않게 한다 */
.reward-grid b.numbers, .org-stats b.numbers {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cell-note {
  display: block;
  margin-top: 5px;
  font-size: 10.5px;
  font-style: normal;
  color: #8295a8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.program-feats > .card {
  height: 100%;
  min-height: 76px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}

.program-steps { align-items: stretch; }
.program-steps > div {
  height: 100%;
  min-height: 118px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

/* 입금 주소가 아직 없을 때 */
.addr-empty {
  color: #93a3b5;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0;
}

/* [2026-10-26] 카드 세로 어긋남의 진짜 원인
     .card + .card { margin-top: 10px } 가 세로 목록용 규칙인데
     그리드 안에서도 먹어서 두 번째 칸부터만 10px 내려가 있었다.
     그리드에서는 gap 이 간격을 책임지므로 이 margin 을 끈다. */
.reward-grid .card + .card,
.org-stats  .card + .card,
.program-feats .card + .card { margin-top: 0; }

/* [2026-10-26] 지갑 카드 — 전체 자산 / 출금 가능을 같은 크기로 나란히 */
.wallet-card-2 { display: block; }
.wallet-top {
  display: flex; align-items: center; gap: 9px;
  padding-bottom: 11px; border-bottom: 1px solid #edf2f7;
}
.wallet-top .wallet-addr { flex: 1; min-width: 0; font-size: 11px; color: #8295a8;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wallet-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 11px; }
.wallet-two > div { min-width: 0; }
.wallet-two small { display: block; font-size: 11.5px; color: #72889f; }
.wallet-two b {
  display: block; margin-top: 3px; font-size: 18px; font-weight: 800; color: #0b2e58;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wallet-two > div:last-child b { color: #0783d0; }
.wallet-two em {
  display: block; margin-top: 3px; font-size: 10px; font-style: normal; color: #93a3b5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 360px) {
  .wallet-two b { font-size: 16px; }
  .wallet-two em { font-size: 9.5px; }
}

/* [2026-10-26] 토큰 구분 머리글 (wHANDY / HANDY) */
.tok-head {
  display: flex; align-items: baseline; gap: 7px;
  padding-top: 12px; margin-top: 2px;
}
.tok-head + .wallet-two { padding-top: 7px; }
.wallet-card-2 .tok-head:first-of-type { padding-top: 11px; }
.tok-head b { font-size: 13px; font-weight: 800; color: #0b2e58; letter-spacing: .2px; }
.tok-head span { font-size: 10px; color: #93a3b5; }
.wallet-card-2 .tok-head ~ .tok-head { border-top: 1px solid #edf2f7; margin-top: 12px; }