/* 도네온 후원 페이지(/donate/{slug}·결제 완료)와 시청자 페이지(/my/, 구독하기)의 틀과 부품(2026-10-16 리뉴얼 → 2026-10-20 공용 기준 /ui.css 로 정리).
   색·글자 단계·단추·입력·묶음·구독 상품·결제 수단 고르기·머리 줄은 /ui.css(맨 마지막에 불러 덮는다). 여기는 페이지 틀(.page·.head)과 후원 페이지 부품(결과 그림·채팅 후원 칸 머리·채널 링크·순위).
   스크립트(donate.js·my*.js)가 쓰는 이름은 바꾸지 않는다. /my/ 는 CSP 가 style 속성을 막으니 HTML 에 style="" 을 쓰지 않는다 */
.page { max-width: 520px; margin: 0 auto; padding: 0 16px 48px; }
.head { margin: 0 0 12px; }
.head > h1 { margin-top: 12px; }
.intro { margin: 8px 0 0; color: var(--body); font-size: 15px; white-space: pre-wrap; }
.intro:empty { display: none; }

/* 결과(후원 결과·구독 결과)의 동그라미 그림: 기다리는 중은 도는 선, ok 는 체크, bad 는 가로줄. 글자는 /ui.css(.status·.result) */
.resicon { position: relative; width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 50%; background: var(--bg); }
.resicon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 3px solid var(--faint); border-right-color: transparent; animation: spin 1s linear infinite; }
.result.ok .resicon { background: var(--ok-bg); }
.result.ok .resicon::after { width: 28px; height: 14px; margin: -11px 0 0 -14px; border: 0; border-left: 4px solid var(--ok-ink); border-bottom: 4px solid var(--ok-ink); border-radius: 2px; transform: rotate(-45deg); animation: none; }
.result.bad .resicon { background: var(--danger-bg); }
.result.bad .resicon::after { width: 28px; height: 4px; margin: -2px 0 0 -14px; border: 0; border-radius: 2px; background: var(--danger-ink); animation: none; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (min-width: 720px) {
  .page { padding-top: 12px; }
}

/* 채팅 후원 칸 머리(2026-10-20): 종류 이름 + 한 줄 설명 */
.form-head { padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.form-head .fine { margin: 4px 0 0; }

/* 크리에이터 홈(2026-10-19): 채널 링크 줄, 이번 달 후원 순위, 다른 크리에이터 찾기 */
.links { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 11px; border: 0; border-radius: 8px; background: var(--bg); color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none; }
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.chip:hover { background: #e9ecef; }
.chip.k-youtube::before { background: #ff0033; } .chip.k-chzzk::before { background: #00d564; } .chip.k-soop::before { background: #0545b1; }
.chip.k-twitch::before { background: #9146ff; } .chip.k-instagram::before { background: #e1306c; } .chip.k-x::before { background: #111; }
.chip.k-tiktok::before { background: #25f4ee; } .chip.k-discord::before { background: #5865f2; } .chip.k-naver-cafe::before { background: #03c75a; }
.chip.more { cursor: pointer; }
.chip.more::before { display: none; }
.toplist { list-style: none; margin: 0; padding: 0; }
.toplist li { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 15px; }
.toplist li:first-child { border-top: 0; }
.toplist .r { flex: none; min-width: 2.4em; font-weight: 700; color: var(--ink); }
.toplist li:first-child .r { color: var(--gold-ink); }
.toplist .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-weight: 600; }
.toplist .t { flex: none; font-weight: 600; color: var(--ink); }
.findlink { margin: 24px 0 0; text-align: center; font-size: 13px; }
.findlink a { color: var(--muted); font-weight: 600; }
.findlink a:hover { color: var(--ink); }

/* 알림 음성 목소리 고르기(D-076·D-090·D-091, donate-voice.js): 고른 목소리 한 줄 → 펼치면 캐릭터 칸(그림 · 이름 · 재생) */
.field.voicefield { margin-bottom: 24px; }
.voicepick { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; margin-top: 8px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--ui-fill); color: var(--ui-text); font-size: 15px; font-weight: 600; cursor: pointer; }
.voicepick small { color: var(--ui-sub); font-size: 13px; font-weight: 500; }
.voicepick span { margin: 0; }
.voicegrid-in { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-top: 6px; }
.vtile { display: flex; align-items: center; min-height: 44px; border-radius: 10px; background: var(--ui-fill); }
.vtile.active { background: var(--ui-ink); }
.vtile .vname { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; height: 44px; padding: 0 0 0 12px; border: 0; background: none; color: var(--ui-text); font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
.vtile .vname img { flex: none; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.vtile .vname span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vtile:has(img) .vname { padding-left: 6px; }
.vtile .vplay { display: flex; align-items: center; justify-content: center; width: 40px; height: 44px; border: 0; background: none; color: var(--ui-sub); cursor: pointer; }
.vtile.active .vname, .vtile.active .vplay { color: #fff; }
.voicenote { margin: 8px 0 0; color: var(--ui-red); }