/* 후원 페이지 전용 (brand.css 토큰 위에서 동작) */

.sec-title { font-size: var(--fs-xl); margin-bottom: var(--sp-4); }

.notice {
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  border-radius: var(--r);
  background: rgba(255, 217, 122, .05);
  color: var(--text-dim);
  font-size: var(--fs-sm);
  max-width: 72ch;
}
.notice strong { color: var(--warn); margin-right: 6px; }
.notice em { color: var(--text); font-style: normal; font-weight: 600; }

/* ---- 후원 수단 카드 ---- */

.pay-grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

.pay {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-2);
  transition: border-color var(--dur-fast), transform var(--dur-fast) var(--ease);
}
.pay:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 45%, var(--line)); }
.pay.is-off { opacity: .55; }
.pay.is-off:hover { transform: none; border-color: var(--line); }

.pay-top { display: flex; align-items: center; gap: var(--sp-3); }
.pay-ico {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center; border-radius: 12px; font-size: 19px;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
}
.pay h3 { font-size: var(--fs-md); }
.pay p { color: var(--text-dim); font-size: var(--fs-sm); flex: 1; }
.pay .btn { --btn-bg: var(--c); --btn-fg: #0b0b12; align-self: flex-start; }
.pay .btn:disabled { --btn-bg: var(--bg-3); --btn-fg: var(--text-faint); }

.copy-value {
  font-family: var(--font-mono); font-size: var(--fs-sm);
  padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--bg-1); border: 1px solid var(--line);
  color: var(--text); word-break: break-all;
}

/* ---- 운영비 ---- */

.cost-list { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.cost-list li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg-2);
}
.cost-list b { font-weight: 600; min-width: 9em; }
.cost-list .v { color: var(--cyan); font-weight: 700; margin-left: auto; }
.cost-list .n { color: var(--text-faint); font-size: var(--fs-xs); width: 100%; }

/* ---- 후원자 ---- */

.supporter-empty {
  padding: var(--sp-6);
  border: 1px dashed var(--line-2); border-radius: var(--r-lg);
  text-align: center; color: var(--text-dim); font-size: var(--fs-sm);
}

/* ---- 이번 달 목표 ---- */

.goal {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5);
  margin-bottom: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(600px 200px at 10% 0%, rgba(255, 92, 168, .12), transparent 65%),
    var(--bg-2);
}
.goal-top {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3);
}
.goal-label { font-size: var(--fs-sm); font-weight: 700; color: var(--text-dim); }
.goal-num { font-size: var(--fs-sm); color: var(--text-dim); }
.goal-num b { font-size: var(--fs-xl); color: var(--pink); font-weight: 800; letter-spacing: -.02em; }

.goal-bar {
  height: 10px; border-radius: var(--r-full);
  background: var(--bg-1); border: 1px solid var(--line);
  overflow: hidden;
}
.goal-bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--pink), var(--accent));
  border-radius: inherit;
  transition: width .8s var(--ease);
}
.goal-bar i.done { background: linear-gradient(90deg, var(--ok), var(--cyan)); }

/* ---- 후원자 명단 ---- */

.supporter {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2);
  padding: 10px 16px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--bg-2);
  font-size: var(--fs-sm);
}
.supporter-list {
  display: flex; flex-direction: column; gap: var(--sp-2);
  margin: 0; padding: 0; list-style: none;
}
.sup-name { font-weight: 700; }
.sup-amount {
  font-size: var(--fs-xs); font-weight: 700; color: var(--pink);
  padding: 2px 8px; border-radius: var(--r-full);
  background: rgba(255, 92, 168, .12);
}
.sup-msg { color: var(--text-dim); font-size: var(--fs-xs); flex: 1; min-width: 140px; }
.sup-when { margin-left: auto; color: var(--text-faint); font-size: var(--fs-xs); }