/* H-1020-05: 후원 화면(함께하기) — 어두운 FUI 패널 · 진행 단계 · 금액 칩 · 여덟 카드 */
.gv .lead { max-width: 62ch; }
.gv-steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative; }
.gv-steps li { position: relative; padding: 14px 12px 0 0; border-top: 2px solid rgba(181,212,108,.25); display: flex; flex-direction: column; gap: 4px; color: #aab394; font-size: 14.5px; }
.gv-steps li b { font: 800 12px/1 var(--lat); letter-spacing: .3em; color: #7d8a62; }
.gv-steps li::before { content: ""; position: absolute; top: -6px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: #2a3719; box-shadow: 0 0 0 2px rgba(181,212,108,.35); }
.gv-steps li.on { color: #fff; border-top-color: var(--lime); }
.gv-steps li.on b { color: var(--lime); }
.gv-steps li.on::before { background: var(--lime); box-shadow: 0 0 0 4px rgba(181,212,108,.25); animation: gvp 2.4s ease-in-out infinite; }
@keyframes gvp { 50% { box-shadow: 0 0 0 9px rgba(181,212,108,0); } }
.gv-panel { margin-top: 32px; padding: clamp(20px, 3vw, 40px); border: 1px solid rgba(181,212,108,.35); border-radius: 18px; background: linear-gradient(160deg, rgba(181,212,108,.09), rgba(255,255,255,.02)); position: relative; overflow: hidden; }
.gv-panel::before, .gv-panel::after { content: ""; position: absolute; width: 22px; height: 22px; border: 2px solid var(--lime); opacity: .8; }
.gv-panel::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.gv-panel::after { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
.gv-tabs { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(0,0,0,.35); }
.gv-tabs button { appearance: none; border: 0; background: transparent; color: #cdd5b8; font: 700 15px/1 var(--sans); min-height: 44px; padding: 0 22px; border-radius: 999px; cursor: pointer; }
.gv-tabs button.on { background: var(--lime); color: #13200a; }
.gv-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.gv-chips button { appearance: none; cursor: pointer; min-height: 84px; border-radius: 14px; border: 1.5px solid rgba(181,212,108,.4); background: rgba(0,0,0,.28); color: #fff; font: 900 clamp(22px, 2.4vw, 32px)/1 var(--sans); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; transition: transform .2s, background .2s, border-color .2s; }
.gv-chips button small { font: 700 12px/1 var(--sans); color: #aab394; }
.gv-chips button:hover { transform: translateY(-2px); border-color: var(--lime); }
.gv-chips button[aria-pressed="true"] { background: var(--lime); color: #13200a; border-color: var(--lime); }
.gv-chips button[aria-pressed="true"] small { color: #31440f; }
.gv-sum { margin: 18px 0 0; font-size: 17px; color: #fff; min-height: 1.6em; }
.gv-note, .gv-small { margin: 6px 0 0; font-size: 13.5px; color: #b9c2a2; line-height: 1.6; }
.gv-gift { margin: 10px 0 0; font-weight: 700; color: var(--amber); }
.gv-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.gv-cta .btn { min-width: 200px; min-height: 56px; font-size: 17px; }
.btn.ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); }
.btn.ghost:hover { background: #fff; color: var(--green-dd); }
.gv-h3 { margin: 48px 0 0; font-size: var(--t5); font-weight: 900; }
.gv-ways { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gv-ways li { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 14px; border: 1px solid rgba(181,212,108,.3); background: rgba(255,255,255,.04); }
.gv-ways li::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 40%; background: var(--lime); border-radius: 2px; }
.gv-ways li.soon { border-style: dashed; border-color: rgba(255,255,255,.22); }
.gv-ways li.soon::before { background: var(--amber); }
.gv-st { font: 700 12px/1 var(--sans); color: var(--lime); letter-spacing: .04em; }
.gv-ways li.soon .gv-st { color: var(--amber); }
.gv-ways h4 { margin: 4px 0 0; font-size: 19px; font-weight: 900; color: #fff; }
.gv-ways p { margin: 0; font-size: 14.5px; line-height: 1.65; color: #c4cbb2; flex: 1; }
.gv-ways a { color: var(--lime); font-weight: 700; font-size: 14.5px; margin-right: 10px; }
.gv-ways .acct.sm { font-size: 17px; color: #fff; }
.gv-ways .copy { align-self: flex-start; }
.gv-brace { margin: 22px 0 0; padding: 16px 20px; border-left: 3px solid var(--amber); background: rgba(255,207,115,.07); font-size: 14.5px; color: #dfe5cf; }
.gv-brace a { color: var(--lime); font-weight: 700; }
@media (max-width: 1000px) { .gv-ways { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .gv-ways { grid-template-columns: 1fr; } .gv-chips { gap: 8px; } .gv-chips button { min-height: 76px; } .gv-cta .btn { width: 100%; } .gv-steps li { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .gv-steps li.on::before { animation: none; } .gv-chips button { transition: none; } }
/* H-1020-06 감사 팔찌 신청 폼 */
.br-form { margin-top: 28px; }
.br-box { margin-top: 14px; padding: 22px; border: 1px solid rgba(181,212,108,.35); border-radius: 14px; background: rgba(255,255,255,.04); max-width: 640px; }
.br-box label { display: block; margin: 0 0 14px; font: 700 14px/1.4 var(--sans); color: #dfe5cf; }
.br-box input:not([type="checkbox"]), .br-box select { display: block; width: 100%; min-height: 48px; margin-top: 6px; padding: 0 14px; border-radius: 10px; border: 1.5px solid rgba(255,255,255,.35); background: #0f1608; color: #fff; font: 400 16px var(--sans); box-sizing: border-box; }
.br-box input:focus, .br-box select:focus { outline: 2px solid var(--lime); outline-offset: 2px; }
.br-box .br-consent { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 13.5px; }
.br-box .br-consent input { width: 22px; height: 22px; margin-top: 2px; flex: none; accent-color: var(--lime); }
.br-err { margin: 0 0 12px; color: var(--amber); font-size: 14px; }
.br-dl { display: grid; grid-template-columns: 96px 1fr; gap: 8px 12px; margin: 0 0 16px; font-size: 15px; }
.br-dl dt { color: var(--lime); font-weight: 700; } .br-dl dd { margin: 0; word-break: break-all; }
.br-row { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 560px) { .br-box { padding: 16px; } .br-row .btn { flex: 1; } }

/* H-1020-07 카카오 로그인 */
.br-login { margin: 14px 0 0; max-width: 640px; }
.br-lg-off { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0; }
.btn.kakao { background: #fee500; color: #191919; border: 0; min-height: 48px; font-weight: 700; }
.btn.kakao:disabled { opacity: .7; cursor: default; }
.br-lg-note { font-size: 13.5px; color: #dfe5cf; }
.br-list { margin: 8px 0 0; padding-left: 18px; font-size: 14px; }
.br-link { background: none; border: 0; color: var(--lime); text-decoration: underline; cursor: pointer; font: inherit; min-height: 44px; }