/* GATE 가입 · KYC 안내(gate-guide.html · 2026-10-15) — 챕터형 튜토리얼(위 진행바 · 한 단계씩 · 아래 「다음」).
   색은 invite 와 같은 검정 바탕 + 파란 강조. JS 없으면(.no-js) 모든 단계가 세로로 다 보인다. */
:root{
  --g-bg:#05070c;--g-panel:#0b0f18;--g-panel2:#0e1420;--g-line:#ffffff14;--g-line2:#ffffff24;
  --g-ink:#f5f7fb;--g-body:#c9d1dd;--g-sub:#a4aebe;--g-mut:#95a0b1;
  --g-blue:#2997ff;--g-blue2:#176ff2;--g-teal:#26a17b;--g-teal2:#5fd3ad;--g-red:#ff5a3c;
  --g-sans:"Noto Sans KR","Apple SD Gothic Neo","Pretendard","Malgun Gothic",system-ui,sans-serif
}
*{box-sizing:border-box}
html{background:var(--g-bg);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body.gg-page{margin:0;min-height:100vh;background:radial-gradient(90% 55% at 50% -8%,#0f2547 0%,#08101f 42%,var(--g-bg) 75%) no-repeat,var(--g-bg);color:var(--g-body);font:400 16px/1.65 var(--g-sans);-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word;overflow-x:clip}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
.skip-link{position:absolute;left:-9999px;top:8px;z-index:60;background:var(--g-ink);color:var(--g-bg);padding:8px 12px;border-radius:8px}
.skip-link:focus{left:12px}

/* 위 — 돌아가기 · 진행바 · N/8 */
.gg-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;padding:12px clamp(16px,5vw,32px);background:#05070cdb;border-bottom:1px solid var(--g-line);backdrop-filter:blur(10px)}
.gg-back{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px 0 8px;border:1px solid var(--g-line2);border-radius:999px;font-size:13px;font-weight:700;color:var(--g-sub);white-space:nowrap}
.gg-back:hover{color:var(--g-ink);border-color:var(--g-blue)}
.gg-back svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gg-prog{flex:1;height:6px;border-radius:999px;background:#ffffff12;overflow:hidden}
.gg-prog i{display:block;height:100%;width:12.5%;border-radius:999px;background:linear-gradient(90deg,var(--g-blue2),var(--g-blue));transition:width .25s ease}
.gg-count{margin:0;font-size:12.5px;font-weight:700;color:var(--g-sub);font-variant-numeric:tabular-nums;white-space:nowrap}

/* 단계 */
.gg{width:min(620px,100%);margin:0 auto;padding:clamp(24px,5vw,40px) clamp(16px,5vw,32px) 140px}
.no-js .gg-step[hidden]{display:block!important}   /* JS 없으면 전부 보이기 */
.no-js .gg-dock{display:none}
.gg-step{animation:gg-in .3s ease}
.no-js .gg-step{margin-bottom:48px;padding-bottom:40px;border-bottom:1px solid var(--g-line)}
@keyframes gg-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.gg-step{animation:none}}
.gg-kicker{margin:0 0 8px;font-size:12.5px;font-weight:800;letter-spacing:.14em;color:var(--g-blue)}
.gg-h1{margin:0;font-size:clamp(28px,6vw,38px);font-weight:900;line-height:1.25;letter-spacing:-.03em;color:var(--g-ink)}
.gg-h2{margin:0;font-size:clamp(23px,4.5vw,28px);font-weight:900;letter-spacing:-.02em;color:var(--g-ink)}
.gg-lead,.gg-p{margin:12px 0 0;font-size:15px;line-height:1.75;color:var(--g-body)}

/* 준비물 · 주의(1단계) */
.gg-ready{display:flex;flex-direction:column;gap:10px;margin:22px 0 0;padding:0;list-style:none}
.gg-ready li{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--g-line2);border-radius:14px;background:var(--g-panel);font-size:14.5px;color:var(--g-ink)}
.gg-ready b{flex:none;padding:4px 10px;border-radius:999px;background:#2997ff26;color:#8cc4ff;font-size:12px;font-weight:700;white-space:nowrap}
.gg-warn{margin:18px 0 0;padding:14px 16px;border:1px solid #2997ff55;border-radius:14px;background:#2997ff14;font-size:14px;line-height:1.7;color:var(--g-body)}
.gg-warn b{color:var(--g-ink)}

/* 추천인 링크 칸(2026-10-15) — 초대 주소(?g=)가 있을 때만: 추천 코드 + 가입 버튼 */
.gg-ref{margin:18px 0 0}
.gg-code{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px dashed var(--g-line2);border-radius:12px;background:#00000040}
.gg-code span{font-size:12.5px;color:var(--g-sub);white-space:nowrap}
.gg-code b{flex:1;min-width:0;font-size:16px;font-weight:700;letter-spacing:.06em;color:var(--g-ink);overflow:hidden;text-overflow:ellipsis}
.gg-copy{flex:none;min-height:34px;padding:0 12px;border:1px solid var(--g-line2);border-radius:9px;background:#ffffff0d;color:var(--g-ink);font:700 12.5px/1 var(--g-sans);cursor:pointer}
.gg-copy:hover{border-color:var(--g-blue)}
.gg-go{display:flex;align-items:center;justify-content:center;gap:8px;min-height:54px;margin-top:12px;border-radius:14px;background:linear-gradient(180deg,var(--g-blue2),#0e57c9);color:#fff;font-size:16px;font-weight:700;box-shadow:0 12px 30px #176ff240,inset 0 1px #ffffff40}
.gg-go:hover{filter:brightness(1.08)}
.gg-fine{margin:10px 0 0;font-size:12.5px;line-height:1.6;color:var(--g-mut);text-align:center}
.gg-go:focus-visible,.gg-copy:focus-visible{outline:2px solid #8cc4ff;outline-offset:3px}

/* 할 일 목록 — 그림의 빨간 번호와 같은 번호 배지 */
.gg-do{display:flex;flex-direction:column;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.gg-do li{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--g-line);border-radius:14px;background:var(--g-panel);font-size:14.5px;line-height:1.6}
.gg-do li>b{flex:none;margin-top:1px;padding:3px 8px;border-radius:999px;background:var(--g-red);color:#fff;font-size:12px;font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap}
.gg-do span{color:var(--g-body)}
.gg-do span b{color:var(--g-ink)}
.gg-tips{display:flex;flex-direction:column;gap:4px;margin:12px 0 0;padding:12px 16px;border:1px dashed var(--g-line2);border-radius:12px;background:#00000040;list-style:none;font-size:13.5px;color:var(--g-sub)}
.gg-tips li::before{content:"· "}

/* 그림 — 흰 UI 캡처라 흰 카드 위에 */
.gg-shot{margin:18px 0 0;border:1px solid var(--g-line2);border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 24px 60px #0008}
.gg-shot img{display:block;width:100%;height:auto}

/* 완료 카드(마지막 단계) */
.gg-done{margin:20px 0 0;padding:18px;border:1px solid #26a17b66;border-radius:16px;background:#26a17b12}
.gg-done-h{display:flex;align-items:center;gap:8px;margin:0;font-size:17px;font-weight:900;color:var(--g-ink)}
.gg-done-h svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--g-teal2);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.gg-done-d{margin:8px 0 0;font-size:14px;line-height:1.7;color:var(--g-body)}
.gg-done-d b{color:var(--g-teal2)}

/* 아래 고정 — 다음 · 지원금 신청 */
.gg-dock{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:12px clamp(16px,5vw,32px) calc(12px + env(safe-area-inset-bottom));background:linear-gradient(180deg,transparent,#05070c 30%)}
.gg-next{display:flex;align-items:center;justify-content:center;gap:8px;width:min(620px,100%);min-height:54px;margin:0 auto;border:0;border-radius:14px;background:linear-gradient(180deg,var(--g-blue2),#0e57c9);color:#fff;font:700 16px/1 var(--g-sans);cursor:pointer;box-shadow:0 12px 30px #176ff240,inset 0 1px #ffffff40}
.gg-next:hover{filter:brightness(1.08)}
.gg-next-a{background:linear-gradient(180deg,#0d8049,#0a6338);box-shadow:0 12px 30px #26a17b40,inset 0 1px #ffffff40}
.gg-back:focus-visible,.gg-next:focus-visible{outline:2px solid #8cc4ff;outline-offset:3px}
.gg-foot{padding:24px clamp(16px,5vw,32px) 120px;border-top:1px solid var(--g-line);text-align:center;font-size:12px;line-height:1.7;color:var(--g-mut)}
.gg-foot p{margin:2px 0}