/* 크리에이터 홈 = 후원 페이지(2026-10-30 가로형 최종 시안 docs/mockups/home-v3/final.html, D-117. 전 모양은 같은 날 시안 B(D-114), 그 전은 2026-10-20 "크리에이터 홈 안 A").
   흰 바탕, 칸은 옅은 선(1px #dfe3e8)으로만 — 회색 바탕 · 그림자 없음. 폭은 1800 까지(양옆 40px).
   머리 줄 → 커버(올렸을 때만) → 프로필 → [왼쪽] 영상(시청 모드) + 후원 띠 / [오른쪽 440] 게시글 · 응원 · 순위 · 채팅 붙박이 칸(1100 부터 두 칸).
   후원 띠 안: 종류 타일 → 왼쪽 금액 · 이름 · 메시지 · 목소리, 오른쪽 결제 칸(카드 결제 | 계좌 이체 → 금액 요약 → 결제하기). 1600 부터 금액 | 이름·메시지·목소리 | 결제 세 칸.
   폰(~959px)은 한 줄로: 프로필 → 영상(위에 붙어 따라옴) → 후원 → 게시판. 색·글자 단계·단추·입력·구독 상품 글자는 /ui.css(맨 마지막, 공용 기준) — 여기는 배치와 이 화면만의 부품.
   ui.css 가 뒤에 와서 덮으므로 여기 규칙은 .app 을 앞에 붙여 더 세게 둔다. CSP 가 style 속성을 막으니 모양은 전부 CSS 파일에서 */
.app { background: #fff; --ui-sub: #5b6472; --ui-line: #eef0f3; --edge: #dfe3e8; }
.app .wrap { max-width: 1800px; margin: 0 auto; padding: 0 20px; }
.app .page { max-width: 1800px; padding: 0 0 32px; }
.app .head { margin: 0; background: #fff; border-bottom: 1px solid var(--ui-line); }
.app .topline { min-height: 56px; }

/* 공용 작은 것들. 선 아이콘(page.html 맨 위 sprite): 한 굵기, 색은 글자색 */
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pbody.clamp { -webkit-line-clamp: 8; }
.app .sprite { position: absolute; }
.app .ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app .panel { padding: 20px; background: #fff; border-top: 8px solid #f4f5f7; }

/* 커버: 올렸을 때만. 끝까지 넓게 */
.app .cover { aspect-ratio: 3 / 1; max-height: 320px; background: var(--ui-line); overflow: hidden; }
.app .cover img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 프로필: 사진(커버에 걸침) + 이름 · 주소 · 소개 · 링크, 오른쪽에 시청 모드 · 즐겨찾기 · 주소 복사 */
.app .profile { background: #fff; }
.app .profile-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 14px; align-items: start; padding: 0 20px 20px; }
.app .avatar.big { position: relative; display: grid; place-items: center; width: 84px; height: 84px; margin-top: -42px; border: 4px solid #fff; border-radius: 50%; background: var(--ui-gold); color: var(--ui-ink); font-size: 32px; font-weight: 700; overflow: hidden; }
.app .cover[hidden] + .profile .avatar.big { margin-top: 16px; }
.app .avatar.big img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar.has-img .letter { visibility: hidden; }
.app .pinfo { min-width: 0; padding-top: 10px; }
.app .namerow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.app .namerow h1 { font-size: 22px; }
.app .livepill { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--ui-red); color: #fff; font-size: 12px; font-weight: 700; }
.app .livepill .ic { width: 14px; height: 14px; stroke-width: 2.2; }
.app .handle { margin: 2px 0 0; font-size: 14px; color: var(--ui-sub); }
/* 소개: 두 줄만, "더보기"를 누르면 아래로 펼친다(창 없음 — 2026-10-30 사용자 "밑에서 올라오니까 이상해") */
.app .profile .intro { margin: 10px 0 0; border-radius: 0; font-size: 15px; line-height: 1.55; color: var(--ui-text); }
.app .profile .intro.open { display: block; -webkit-line-clamp: unset; }
.app #introMore { margin-top: 2px; }
/* 채널 링크: 전부 그림 — 아는 서비스는 그 마크, 모르는 주소는 파비콘(없으면 첫 글자). 이름은 올려 두면(donate-home.js) */
.app .links { margin-top: 12px; gap: 8px; }
.app .links .sico { position: relative; display: grid; place-items: center; width: 38px; height: 38px; min-height: 0; padding: 0; border: 1px solid var(--edge); border-radius: 11px; background: #fff; text-decoration: none; transition: transform .12s, border-color .12s; }
.app .links .sico::before { display: none; }
.app .links .sico:hover { transform: translateY(-2px); border-color: #b9c2cf; background: #fff; }
.app .links .sico svg, .app .links .sico img { display: block; width: 22px; height: 22px; border-radius: 5px; }
.app .links .sico b { position: absolute; font-size: 13px; font-weight: 700; color: var(--ui-sub); }
.app .links .sico img { position: relative; z-index: 1; background: #fff; }
.app .links .sico span { position: absolute; left: 50%; bottom: calc(100% + 6px); z-index: 2; transform: translateX(-50%); padding: 4px 8px; border-radius: 6px; background: var(--ui-ink); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s; }
.app .links .sico:hover span, .app .links .sico:focus-visible span { opacity: 1; }
.app .actions { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 14px; }
.app .gbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 16px; border: 1px solid var(--edge); border-radius: 12px; background: #fff; color: var(--ui-ink); font-size: 15px; font-weight: 600; cursor: pointer; }
.app .gbtn:hover { border-color: #b9c2cf; }
.app .gbtn.follow { flex: 1; }
.app .gbtn.icon { flex: none; width: 44px; padding: 0; }
.app .gbtn .ico svg { width: 18px; height: 18px; }
.app .gbtn.follow.on { border-color: var(--ui-gold); background: var(--ui-gold-soft); color: var(--ui-gold-ink); }
.app .sw { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px 0 16px; border: 1px solid var(--edge); border-radius: 22px; background: #fff; color: var(--ui-ink); font-size: 14px; font-weight: 600; cursor: pointer; }
.app .sw i { position: relative; display: inline-block; width: 40px; height: 22px; border-radius: 11px; background: #c9ced6; transition: background .15s; }
.app .sw i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; }
.app .sw[aria-pressed="true"] i { background: var(--ui-ink); }
.app .sw[aria-pressed="true"] i::after { left: 20px; }
.app #homeMsg { grid-column: 1 / -1; margin: 12px 0 0; }

/* 본문: 폰은 한 줄(영상 → 후원 → 게시판), PC 는 두 칸(아래 미디어 쿼리) */
.app .cols { display: flex; flex-direction: column; gap: 0; }
.app .left { display: flex; flex-direction: column; min-width: 0; }
.app .donatebox, .app .livebox { min-width: 0; }
.app .content { min-width: 0; display: flex; flex-direction: column; gap: 0; }
/* 입력 칸 · 금액 단추: 흰 칸 + 옅은 테두리, 이름표는 진하게 */
.app .field { font-size: 13px; color: var(--ui-text); }
.app .field > span { margin-bottom: 6px; }
.app .field input, .app .field textarea, .app .field select { border: 1px solid var(--edge); background: #fff; }
.app .field input:focus, .app .field textarea:focus, .app .field select:focus { border-color: var(--ui-ink); }
/* 동의 줄 · 카드 입력 화면의 동의 칸: 회색 바탕 대신 흰 칸 + 선 */
.app .agree, .app .cf-agree { background: #fff; border: 1px solid var(--edge); }

/* 후원 띠 */
.app .donatebox form { margin: 0; }
.app .form-head { display: flex; align-items: center; gap: 10px; padding: 0; margin: 0; border: 0; }
.app .form-head .ic { width: 24px; height: 24px; color: var(--ui-ink); }
.app .form-head h2 { font-size: 20px; }
/* 종류 타일(그림 위 이름): 고른 것은 검정 채움(2026-10-30 사용자 "뭐가 눌렀는지 보이질 않잖아") */
.app .kinds { display: flex; gap: 6px; margin: 18px -20px 0; padding: 0 20px; overflow-x: auto; scrollbar-width: none; }
.app .kinds::-webkit-scrollbar { display: none; }
.app .kinds button { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 72px; padding: 10px 10px 8px; border: 1px solid var(--edge); border-radius: 12px; background: #fff; color: var(--ui-sub); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.app .kinds button:hover { border-color: #b9c2cf; color: var(--ui-ink); }
.app .kinds button .ic { width: 28px; height: 28px; }
.app .kinds button[aria-pressed="true"] { border-color: var(--ui-ink); background: var(--ui-ink); color: #fff; font-weight: 700; }
/* 종류 칸 둘(D-118): 모드 줄(#partTop, 금액 위)과 종류 칸(#partBox, 금액 아래 · 결제 칸 왼쪽). 비어 있으면 숨긴다(donate-part.js) */
.app .partbox { margin-top: 16px; }
.app #partTop { margin-top: 12px; }
.app .partbox .field:first-child { margin-top: 0; }
.app .partbox .paylist { margin: 0; }
.app .partbox .paylist + .fine { margin: 8px 0 0; }
/* 모드 줄 · 카드 결제 | 계좌 이체: 흰 단추에 선, 고른 것은 검정 채움(회색 바탕 · 그림자 없음) */
.app .modeseg { display: flex; gap: 6px; margin: 0; padding: 0; border-radius: 0; background: transparent; }
.app .modeseg button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 42px; padding: 0 12px; border: 1px solid var(--edge); border-radius: 12px; background: #fff; color: var(--ui-sub); font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.app .modeseg button:hover { border-color: #b9c2cf; color: var(--ui-ink); }
.app .modeseg button[aria-pressed="true"] { border-color: var(--ui-ink); background: var(--ui-ink); color: #fff; box-shadow: none; }
.app .modeseg.payseg { margin: 0 0 12px; }
.app .modeseg.payseg button { padding: 0 14px 0 10px; }
.app .modeseg.payseg button .ic { width: 20px; height: 20px; }
.app #form > section { margin: 0; padding: 0; border: 0; }
.app #form > #amountSection { margin-top: 20px; }
/* 금액 이름표(종류가 정한다, donate-part.js): "상금 · 5,000원부터 · 지금 결제, 결과에 따라 취소" 한 줄 */
.app .amtlabel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--ui-ink); }
.app .amtlabel small { font-size: 13px; font-weight: 400; color: var(--ui-sub); }
/* 이름표 옆 작은 글자(미션 내용 40자까지 · 제한 시간 수락한 때부터 · 응원금 N원 남고 M원 취소) */
.app .field > span small { margin-left: 4px; }
.app #customField { margin-top: 8px; }
.app #customField > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.app #customField input { min-height: 44px; font-size: 15px; }
.bigamt { margin: 0; font-size: 34px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: var(--ui-ink); }
.bigamt span { font-size: 20px; margin-left: 2px; }
.app .presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; }
.app .presets button { height: 44px; padding: 0 8px; border: 1px solid var(--edge); border-radius: 10px; background: #fff; color: var(--ui-ink); font-size: 15px; font-weight: 600; cursor: pointer; transition: background .12s, border-color .12s; }
.app .presets button:hover { border-color: #b9c2cf; }
.app .presets button.active { border-color: var(--ui-ink); background: var(--ui-ink); color: #fff; }
/* 지금 종류의 최소(상금 · 증거금)보다 작은 금액 단추(donate.js) */
.app .presets button:disabled { color: var(--ui-faint); border-color: var(--ui-line); background: #fff; cursor: default; }
/* "직접 입력"(donate.js): 점선 단추, 눌러야 입력 칸이 나온다 */
.app .presets .custom { border-style: dashed; color: var(--ui-sub); }
.app .presets .custom.active { border-style: solid; color: #fff; }
.app .voicefield { margin-bottom: 0; }
.app .voicefield .voicepick { display: flex; align-items: center; gap: 8px; min-height: 54px; margin-top: 0; padding: 0 14px 0 12px; border: 1px solid var(--edge); border-radius: 12px; background: #fff; }
.app .voicepick span, .app .voicepick small { display: inline; margin: 0; }
.app .voicepick .vlabel { font-size: 14px; font-weight: 600; color: var(--ui-sub); }
.app .voicepick #voiceName { margin-left: auto; font-size: 15px; font-weight: 600; color: var(--ui-ink); }
.app .voicepick small { flex: none; }
.app .voicepick .ic { color: var(--ui-sub); }
.app .voicepick .vthumb { flex: none; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
/* 결제 칸: 제목 → 카드 결제 | 계좌 이체 → 금액 요약 → 결제하기(비회원은 누르면 카드 입력 화면, 회원은 등록한 카드) */
.app #form > #paySection { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--ui-line); }
.app .pay-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.app .pay-head h2 { font-size: 16px; font-weight: 700; color: var(--ui-ink); }
.app .sum { display: grid; gap: 6px; margin: 0 0 14px; padding: 14px 16px; border: 1px solid var(--edge); border-radius: 12px; font-size: 15px; color: var(--ui-text); }
.app .sum:empty { display: none; }
.app .sum div { display: flex; justify-content: space-between; gap: 12px; }
.app .sum b { font-weight: 700; color: var(--ui-ink); }
.app .sum .t { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--ui-line); font-size: 17px; font-weight: 700; color: var(--ui-ink); }
.app .sum small { margin-left: 6px; font-size: 13px; font-weight: 400; color: var(--ui-sub); }
/* 시청 모드의 카드 결제 결과(donate-result.js inBox): 결제 칸 안에 결과 페이지와 같은 모양. 금액 요약 · 보내는 방법 줄은 숨긴다(결과 줄에 금액이 있다) */
.app.pay-done #paySection > :not(.pay-head):not(#payBox) { display: none; }
.app .payresult { padding: 20px 4px 4px; }
.app .paysub { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--ui-sub); text-align: center; }
/* 계좌 이체 칸(donate-bank.js): 입금자명 칸은 요약 칸 바로 아래, 단추와는 띄운다(2026-10-30 사용자 "입금자명이랑 계좌번호가 너무 붙어있잖아") */
.app #bankBox > .field { margin-top: 0; }
.app #bankBox > .field input { min-height: 48px; }
.app #bankBox > .btn { margin-top: 16px; }
.app #bankBox > .msg.err { margin: 10px 0 0; }
.app .paysub .linkbtn { display: inline; min-height: 0; padding: 0; color: var(--ui-ink); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.app .way { border: 1px solid var(--edge); background: #fff; }
.app .way:hover { border-color: var(--ui-ink); }
.app .paylist { display: grid; gap: 8px; }
.app #login { margin-top: 16px; }
.app .btn .ic { margin-right: 8px; }
/* 월 구독(donate-plans.js): 후원 종류 "월 구독"을 고르면 금액 · 이름 · 결제 칸 대신 상품 카드 */
.app.kind-plans #textSection, .app.kind-plans #paySection { display: none; }
.app .plans { display: grid; gap: 12px; margin: 0; }
/* 구독 혜택(donate-subchat.js, D-118): 금액 · 이름 칸 없이 메시지 · 목소리만, 결제 칸 자리에는 남은 횟수 + 무료로 보내기 */
.app.kind-sub #paySection > :not(#subBox) { display: none; }
.app .subbox { display: grid; gap: 12px; }
.app .subhead { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--edge); border-radius: 12px; }
.app .subhead strong { font-size: 17px; font-weight: 700; color: var(--ui-ink); }
.app .subhead span { font-size: 13px; color: var(--ui-sub); }
.app .subbox .btn .ic { margin-right: 8px; }
.app .subbox .msg { margin: 0; }
/* 투표(donate-vote.js): 제목 줄 · 항목(표 수 · 막대) · 표 수 조절 */
.app .part-head { display: grid; gap: 2px; margin: 0 0 12px; }
.app .part-head strong { font-size: 16px; font-weight: 700; color: var(--ui-ink); }
.app .part-head .fine { margin: 0; }
.app .voteopt { align-items: flex-start; }
.app .voteopt .payopt-text { flex: 1; }
.app .votebar { display: block; width: 100%; height: 6px; margin-top: 8px; border-radius: 3px; background: var(--ui-fill); overflow: hidden; }
.app .votebar i { display: block; height: 100%; border-radius: 3px; background: var(--ui-ink); }
.app .votecount { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.app .votecount .fine { flex: 1; margin: 0; font-size: 14px; font-weight: 600; color: var(--ui-text); }
.app .votecount .btn.small { width: 42px; min-height: 42px; padding: 0; border: 1px solid var(--edge); background: #fff; font-size: 18px; }
.app .votecount input { width: 64px; min-height: 42px; padding: 0 8px; border: 1px solid var(--edge); border-radius: 12px; background: #fff; text-align: center; font-size: 16px; font-weight: 600; color: var(--ui-ink); }
.app .votecount strong { margin-left: 4px; font-size: 16px; color: var(--ui-ink); white-space: nowrap; }
/* 룰렛(donate-roulette.js): 칸별 확률 표 */
.app .odds { display: grid; gap: 4px; margin-top: 12px; padding: 12px 16px; border: 1px solid var(--edge); border-radius: 12px; }
.app .odds > .fine { margin: 0 0 4px; }
.app .odds-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--ui-text); }
.app .odds-row strong { color: var(--ui-ink); }
.app .partbox > .fine:last-child { margin: 10px 0 0; }
.app .plan { padding: 18px; border: 1px solid var(--edge); background: #fff; }
.app .plan-price { margin: 4px 0 0; font-size: 24px; font-weight: 700; letter-spacing: -.02em; white-space: normal; }
.app .plan-price span { font-size: 16px; }
.app .plan-price small { display: block; font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--ui-sub); }

/* 방송(영상 칸 · 폰에서 위에 붙기 · 입력하는 동안)은 live.css */

/* 게시글 · 응원 · 순위 · 채팅 묶음: 탭이 맨 위, 공지 한 줄 */
.app .feedbox { padding: 0 20px 20px; }
.app .hometabs { position: sticky; top: 0; z-index: 5; display: flex; margin: 0 -20px; padding: 0 8px; background: #fff; border-bottom: 1px solid var(--ui-line); }
.app .hometabs button { position: relative; flex: 1; min-height: 48px; padding: 0 8px; border: 0; background: transparent; color: var(--ui-sub); font-size: 15px; font-weight: 600; cursor: pointer; }
.app .hometabs button[aria-selected="true"] { color: var(--ui-ink); font-weight: 700; }
.app .hometabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 2px; background: var(--ui-ink); }
.app .hometabs #tabChat::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--ui-red); vertical-align: 2px; }
.app .noticebar { display: flex; align-items: center; gap: 10px; width: 100%; margin: 14px 0 0; padding: 12px 14px; border: 0; border-radius: 12px; background: var(--ui-gold-soft); color: var(--ui-gold-ink); font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
.app .noticebar .ntext { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app .tabpanel { padding: 0; }
.app .post.card { margin: 0; padding: 16px 0; border: 0; border-bottom: 1px solid var(--ui-line); border-radius: 0; }
.app .cheerwrite { padding: 16px 0 8px; }
.app .tabpanel .note { margin: 24px 0; }
.app #rankBox { padding: 12px 0; }
/* 유튜브 채팅 탭: 끼워 넣은 채팅 + 유튜브에서 쓰기 */
.app .tabpanel.chat { display: flex; flex-direction: column; min-height: 440px; padding-top: 12px; }
.app .chatframe { flex: 1; min-height: 360px; border: 1px solid var(--edge); border-radius: 12px; overflow: hidden; background: #fff; }
.app .chatframe iframe { display: block; width: 100%; height: 100%; min-height: 360px; border: 0; }
.app .tabpanel.chat .btn { margin-top: 8px; }
.app .findlink { margin: 8px 20px 0; text-align: left; font-size: 14px; }
.app .foot { margin-top: 24px; padding: 20px 0 32px; border-top: 1px solid var(--ui-line); background: #fff; text-align: left; }

/* 계좌 이체 후원(2026-10-26, donate-bank.js): "후원 신청됐습니다" 한 줄 → 계좌번호 칸(번호는 길게 눌러 통째로 고를 수 있게) 안에 보낼 금액·입금자명 → 남은 시간(2026-10-30) */
.bank-done { margin-top: 16px; }
.bank-done strong { display: block; font-size: 17px; font-weight: 700; color: var(--ui-ink); }
.bank-done span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--ui-sub); }
.bankacct { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--edge); border-radius: 12px; background: #fff; }
.acct-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.acct-row > div { min-width: 0; }
.acct-bank { display: block; font-size: 13px; color: var(--ui-sub); overflow-wrap: anywhere; }
.acct-num { display: block; margin-top: 2px; font-size: 18px; font-weight: 700; color: var(--ui-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.acct-row .btn.small { flex: none; }
.acct-send { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--ui-line); font-size: 15px; line-height: 1.5; }
.acct-send dt { color: var(--ui-sub); }
.acct-send dd { margin: 0; font-weight: 700; color: var(--ui-ink); overflow-wrap: anywhere; }
.bank-state { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 14px; color: var(--ui-sub); font-variant-numeric: tabular-nums; }
/* 후원 종류 칸(참여형 후원, donate-part.js): 종류마다의 칸 */
.bankres .btn { margin-top: 12px; }

/* 960 부터: 한 줄(영상 → 후원 띠 → 게시판)이되 후원 띠 안은 가로(왼쪽 금액 · 이름 · 메시지 · 목소리, 오른쪽 결제 칸) */
@media (min-width: 960px) {
  .app .wrap { padding: 0 40px; }
  .app .topline { min-height: 64px; }
  .app .brand img { height: 20px; }
  .app .cover { aspect-ratio: auto; height: 320px; max-height: none; }
  .app .profile-body { grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 24px; padding: 0 40px 24px; }
  .app .avatar.big { width: 150px; height: 150px; margin-top: -75px; border-width: 5px; font-size: 48px; }
  .app .cover[hidden] + .profile .avatar.big { margin-top: 24px; }
  .app .pinfo { padding-top: 14px; }
  .app .namerow h1 { font-size: 30px; }
  .app .profile .intro { max-width: 720px; font-size: 16px; line-height: 1.6; }
  .app .actions { grid-column: 3; grid-row: 1; align-items: center; margin-top: 14px; }
  .app .gbtn.follow { flex: none; width: 150px; height: 48px; }
  .app .gbtn.icon { width: 48px; height: 48px; }
  .app .sw { height: 48px; }
  .app .page { padding: 8px 40px 64px; }
  .app .cols { gap: 24px; }
  .app .left { gap: 24px; }
  /* 패널: 흰 카드에 선만 */
  .app .panel { padding: 0; border: 0; border-radius: 0; }
  .app .donatebox { padding: 24px 28px 28px; border: 1px solid var(--edge); border-radius: 18px; }
  .app .feedbox { padding: 0; }
  /* 후원 띠 안쪽 그리드(D-118): 머리 → 종류 → 모드 줄 → [금액 | 결제] → [종류 칸 | 결제] → [이름·메시지·목소리 | 결제] */
  .app #form { display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "head head" "kinds kinds" "top top" "amt pay" "part pay" "text pay"; column-gap: 40px; align-items: start; }
  .app .form-head { grid-area: head; }
  .app #kindSeg { grid-area: kinds; justify-content: flex-start; gap: 8px; margin: 16px 0 0; padding: 0; overflow: visible; }
  .app .kinds button { flex: 0 0 120px; padding: 10px 4px 8px; }
  .app #partTop { grid-area: top; }
  .app #partTop .modeseg { justify-content: flex-start; }
  .app #partTop .modeseg button { flex: 0 0 auto; padding: 0 18px; }
  .app #partBox { grid-area: part; }
  /* 월 구독 상품 카드는 띠 전체 폭(결제 칸이 없다) */
  .app.kind-plans #partBox { grid-column: 1 / -1; }
  .app.kind-plans .plans { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .app #form > #amountSection { grid-area: amt; margin-top: 24px; }
  .app #form > #textSection { grid-area: text; margin-top: 16px; }
  .app #form > #paySection { grid-area: pay; margin-top: 24px; padding: 0 0 0 40px; border-top: 0; border-left: 1px solid var(--ui-line); }
  /* 구독 혜택: 결제 칸 자리에 남은 횟수 · 무료로 보내기(위 머리 줄과 맞춘다) */
  .app.kind-sub #form > #textSection { margin-top: 24px; }
  .bigamt { font-size: 38px; }
  .bigamt span { font-size: 22px; }
  /* 게시판 칸: 선 카드, 탭 줄은 칸 안에서 */
  .app .feedbox { border: 1px solid var(--edge); border-radius: 18px; overflow: hidden; }
  .app .hometabs { position: static; margin: 0; padding: 0 8px; }
  .app .hometabs button { flex: 1; min-height: 50px; padding: 0 8px; font-size: 15px; }
  .app .hometabs button[aria-selected="true"]::after { left: 12px; right: 12px; }
  .app .sidebody { padding: 0 18px 18px; }
  .app .findlink { margin: 12px 0 0; }
  .app .foot { margin-top: 0; }
}
/* 1100 부터: 두 칸 — 왼쪽 영상 + 후원 띠, 오른쪽 440 붙박이 칸(안에서 스크롤) */
@media (min-width: 1100px) {
  .app .cols { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 20px; align-items: start; }
  .app .content { position: sticky; top: 16px; }
  .app .feedbox { display: flex; flex-direction: column; height: calc(100vh - 32px); }
  .app .hometabs { flex: none; }
  .app .sidebody { flex: 1; min-height: 0; overflow: auto; }
  .app .tabpanel.chat { min-height: 0; height: 100%; }
}
/* 1600 부터: 후원 띠 세 칸(금액 | 이름·메시지·목소리 | 결제) */
@media (min-width: 1600px) {
  .app #form { grid-template-columns: minmax(300px, 1fr) minmax(0, 1.3fr) 320px; grid-template-areas: "head head head" "kinds kinds kinds" "top top top" "amt text pay" "part text pay"; }
  .app #form > #textSection { margin-top: 24px; padding-left: 40px; border-left: 1px solid var(--ui-line); }
  .app #textSection .field:first-child, .app #textSection .field[hidden] + .field { margin-top: 0; }
}