/* 로그인/가입은 이제 항상 풀스크린(셸 밖으로 pop-out)이라 하단 네비가 없다.
   예전의 92px 네비-회피 여백은 세로중앙 콘텐츠를 위로 밀어 로고가 잘리고 스크롤됐다(사장님 제보).
   → 일반 여백만. 콘텐츠가 길면 스크롤은 허용(클리핑 방지). */
.auth-wrap { padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important; overflow-y: auto !important; }

/* ═══════════ 🔐 소셜 로그인 버튼 + 온보딩 (2026-07-24) ═══════════ */
.social-auth { margin-top: 18px; display: flex; flex-direction: column; gap: 9px; }
.social-div { display: flex; align-items: center; gap: 10px; color: #6b7080; font-size: 12px; font-weight: 700; margin: 6px 0 8px; }
.social-div::before, .social-div::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.1); }
.soc-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; height: 50px; border-radius: 13px; border: none; cursor: pointer;
  font-size: 15px; font-weight: 800; transition: filter .12s, transform .1s;
}
.soc-btn:active { transform: scale(.98); filter: brightness(.95); }
.soc-ic { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 900; }
.soc-kakao { background: #FEE500; color: #191600; }
.soc-google { background: #fff; color: #1f1f1f; }
.soc-google .soc-g { background: #fff; color: #4285F4; font-size: 16px; }
.soc-naver { background: #03C75A; color: #fff; }
.soc-naver .soc-n { background: #fff; color: #03C75A; }
.soc-apple { background: #000; color: #fff; border: 1px solid rgba(255,255,255,.22); }
.soc-apple .soc-a { width: 17px; height: 20px; border-radius: 0; background: transparent; }
.soc-passkey { background: #22252e; color: #eef1f7; border: 1px solid rgba(255,255,255,.14); }
.soc-passkey .soc-ic { background: transparent; }
.soc-hint { font-size: 12.5px; line-height: 1.55; color: #9aa2b5; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 12px 14px; text-align: center; }
.soc-hint b { color: #cfd6e6; }

/* 온보딩 모달 */
.soc-onboard { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; padding: 22px; background: rgba(0,0,0,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.soco-card { width: 100%; max-width: 380px; background: #16181f; border: 1px solid rgba(255,255,255,.09); border-radius: 20px; padding: 24px 20px; box-shadow: 0 24px 60px rgba(0,0,0,.6); }
.soco-title { font-size: 20px; font-weight: 900; color: #fff; }
.soco-sub { font-size: 13px; color: #9aa2b5; margin: 4px 0 18px; }
.soco-input { width: 100%; box-sizing: border-box; height: 50px; border-radius: 13px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #fff; font-size: 16px; padding: 0 14px; }
.soco-input:focus { outline: none; border-color: rgba(140,165,255,.8); }
.soco-msg { font-size: 12px; min-height: 16px; margin: 6px 2px 4px; color: #35e0a0; font-weight: 700; }
.soco-msg.bad { color: #ff6b6b; }
.soco-check { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: #c9cfdb; margin: 8px 0; line-height: 1.4; }
.soco-check input { margin-top: 2px; flex: none; }
.soco-check a { color: #7aa0ff; }
.soco-btn { width: 100%; height: 52px; margin-top: 14px; border-radius: 14px; border: none; cursor: pointer; background: linear-gradient(135deg, #3d6bff, #5a86ff); color: #fff; font-size: 16px; font-weight: 900; }
.soco-btn:disabled { opacity: .6; }

/* 확장 온보딩(닉·생년·성별·지역·전화) */
.soco-full { max-height: 88dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.soco-lab { display: block; font-size: 12.5px; font-weight: 800; color: #aeb5c6; margin: 14px 2px 6px; }
.soco-lab em { font-style: normal; font-size: 11px; color: #ff8a8a; font-weight: 800; margin-left: 4px; }
.soco-lab em.opt { color: #7d8496; }
.soco-select { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239aa2b5' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.soco-chips { display: flex; gap: 8px; }
.soco-chip { flex: 1; height: 46px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #cfd4df; font-size: 15px; font-weight: 800; cursor: pointer; transition: .12s; }
.soco-chip.on { background: rgba(90,134,255,.22); border-color: #5a86ff; color: #fff; }