/* E79 S1 우리 팀 후원(/support · /support/thanks · /supporters) 전용 CSS — 이 파일은 그 화면 담당만 고친다.
   tip.css 의 앱 바·틀·단추·.rows 를 그대로 쓰고(page({ styles: [tip.css, support.css] })) 후원 화면에만 필요한 칸만 더한다.
   색·모양은 기존 토큰만 쓰고 디자이너가 나중에 손본다. 인라인 style·script 는 쓰지 않는다(조건부 칸은 :has 로 연다). */

.support-page .support-gives { display: grid; gap: var(--sp-1); margin: 0; padding-left: var(--sp-4); }
.support-page .support-gives li { line-height: var(--lh-ui); word-break: keep-all; }
.support-page .support-official { display: grid; gap: var(--sp-2); }
.support-page .warnline { padding: var(--sp-3); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); font-weight: var(--fw-strong); }

/* 금액 고르기(라디오라서 스크립트 없이 고른다) */
.support-page .support-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr)); gap: var(--sp-2); }
.support-page .support-tier { position: relative; display: grid; place-items: center; min-height: 52px; margin: 0; max-width: none; padding: 0 var(--sp-2); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg); font-weight: var(--fw-strong); text-align: center; cursor: pointer; }
/* 공용 .field input 규칙(폭 100%·높이 48px)보다 앞서도록 .field 를 한 번 더 건다 */
.support-page .field .support-tiers input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; padding: 0; margin: 0; }
.support-page .support-tier:has(input:checked) { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.support-page .support-tier:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.support-page .support-tier.is-off { color: var(--muted); background: var(--surface); border-style: dashed; cursor: not-allowed; }

/* 라디오 줄 */
.support-page .support-choices { display: grid; gap: var(--sp-1); }
.support-page .support-choices label { display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; margin: 0; max-width: none; cursor: pointer; }
.support-page .field .support-choices input[type="radio"] { width: 22px; height: 22px; min-height: 0; padding: 0; margin: 0; flex: none; accent-color: var(--ink); }

/* 고른 방식에 따라 열리는 칸 — 서버가 다시 그릴 때는 is-visible */
.support-page .support-sub { display: none; gap: var(--sp-1); padding-top: var(--sp-2); }
.support-page .support-sub.is-visible,
.support-page .support-display:has(input[name="display_choice"][value="name"]:checked) .support-sub-name,
.support-page .support-receipt:has(input[name="receipt_kind"][value="cash_receipt"]:checked) .support-sub-cash,
.support-page .support-receipt:has(input[name="receipt_kind"][value="tax_invoice"]:checked) .support-sub-tax { display: grid; }

/* 완료 화면 계좌 줄 */
.support-page .bank-line { font-weight: var(--fw-bold); overflow-wrap: anywhere; word-break: break-all; }
.support-page .support-thanks code { overflow-wrap: anywhere; word-break: break-all; }

/* 서포터 명단 */
.support-page .support-names { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.support-page .support-names li { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius); word-break: keep-all; }
.support-page .support-names .namebtn { color: inherit; text-decoration: none; }

/* 반응형 웹(RW3, 10/16) — 휴대폰(767px 이하)은 위 규칙 그대로.
   태블릿(768px 이상)은 한 열 읽기 폭(tip.css 가 760px 로 잡는다). 신청서는 칸을 2열로 접어 짧게, 금액 알약은 한 줄에 여러 개.
   PC(1080px 이상)는 두 열: 왼쪽 안내(쓰이는 곳·기부금 아님·받는 것·공식 계좌), 오른쪽 신청서.
   신청서가 안내보다 길어서 화면을 따라 내려오는(sticky) 쪽은 왼쪽 안내다 — 신청서를 쓰는 동안 공식 계좌 경고가 계속 보인다. */
/* 안내 세 구역을 묶은 칸 — 휴대폰에서는 예전처럼 구역 사이 16px 만 두고, PC 에서 왼쪽 열이 된다 */
.support-page .support-aside { display: grid; gap: var(--sp-4); align-content: start; }

@media (min-width: 768px) {
  .support-page .support-tiers { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
  .support-page .support-form { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-5); align-items: start; }
  .support-page .support-form > * { grid-column: 1 / -1; }
  .support-page .support-form > div.field,
  .support-page .support-form > fieldset.support-display,
  .support-page .support-form > fieldset.support-receipt { grid-column: auto; }
  .support-page .support-form > .btn { justify-self: center; }
  .support-page .support-names { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
  .support-supporters > section > p { max-width: 760px; }
  .support-page.support-thanks .rows > div { grid-template-columns: 9em 1fr; }
}

@media (min-width: 1080px) {
  .support-page:has(> .support-form) { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); column-gap: 48px; row-gap: 0; align-items: start; max-width: calc(1200px + 64px); }
  .support-page:has(> .support-form) > .support-aside { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: calc(60px + var(--sp-5)); }
  .support-page:has(> .support-form) > .form-error { grid-column: 2; grid-row: 1; margin-bottom: var(--sp-4); }
  .support-page:has(> .support-form) > .support-form { grid-column: 2; grid-row: 2; grid-template-columns: minmax(0, 1fr); }
  .support-page:has(> .support-form) > .tip-links { grid-column: 1 / -1; grid-row: 3; margin-top: var(--sp-5); }
  .support-page .support-form > .btn { justify-self: stretch; width: 100%; }
  .support-page .support-choices { display: flex; flex-wrap: wrap; gap: 0 var(--sp-5); }
  .support-page.support-supporters { max-width: calc(1200px + 64px); }
  .support-page .support-names { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
  .support-page.support-thanks { max-width: calc(760px + 64px); }
}

/* 으샤으샤 커뮤니티(G16): /support 위쪽 사회적 증거 — 입금을 확인한 서포터 수와 최근 확인 날짜뿐(이름·금액 없음). 휴대폰 그대로, 768·1080 에서는 안내 칸 폭을 따른다. */
.support-page .support-proof { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: grid; gap: var(--sp-1); padding: var(--sp-3) var(--sp-4); }
.support-page .support-proof p { margin: 0; max-width: none; }
.support-page .support-proof-count, .support-page .support-proof-zero { font-weight: var(--fw-bold); }
@media (min-width: 768px) {
  .support-page .support-proof { padding: var(--sp-3) var(--sp-5); }
}
@media (min-width: 1080px) {
  .support-page .support-aside .support-proof { padding: var(--sp-4) var(--sp-5); }
}