/* village-onboarding.css — 첫 실행 온보딩(전체계획 #268). village-ui.css 의
   --vg-* 토큰만 쓴다(새 팔레트를 만들지 않는다). */
.vg-onb-veil{
  position:fixed; inset:0; z-index:9400; /* 스플래시(cover-screen)보다 아래, 하루 HUD보다 위 */
  display:flex; align-items:center; justify-content:center;
  /* 2026-09-16 [최초 진입 가이드] §2 — 아주 약한 dim + blur. 팔레트는 village-guide.css 와 같다. */
  padding:24px; background:rgba(41,37,63,.40); backdrop-filter:blur(2.5px); -webkit-backdrop-filter:blur(2.5px);
  opacity:1; transition:opacity .26s ease;
}
.vg-onb-veil.is-gone{ opacity:0; }
.vg-onb-card{
  position:relative; width:100%; max-width:340px;
  /* 2026-09-16 [최초 진입 가이드] §1·§2 — Warm Ivory 카드 + 얇은 Champagne Gold 선(장식 과다 금지) */
  background:#FFF9F1; color:#29253F;
  border:1px solid #D6B77A; border-radius:22px;
  box-shadow:0 10px 30px rgba(41,37,63,.22), inset 0 0 0 1px rgba(255,255,255,.6);
  padding:28px 24px 24px; text-align:center;
}
.vg-onb-close{
  position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:50%;
  border:none; background:rgba(41,37,63,.07); color:#5B5573;
  font-size:18px; line-height:1; cursor:pointer;
}
.vg-onb-close:hover{ background:rgba(74,51,18,.16); }
.vg-onb-dots{ display:flex; justify-content:center; gap:6px; margin-bottom:18px; }
.vg-onb-dot{ width:6px; height:6px; border-radius:50%; background:var(--vg-line, #dcc4a1); }
.vg-onb-dot.is-on{ background:var(--vg-gold-line, #D9A441); width:16px; border-radius:4px; }
.vg-onb-eyebrow{
  margin:0 0 6px; font-size:12px; letter-spacing:.04em; color:#5B5573;
}
.vg-onb-title{
  margin:0 0 12px; font-size:20px; line-height:1.35; font-weight:700; word-break:keep-all;
}
.vg-onb-desc{
  margin:0 0 20px; font-size:13.5px; line-height:1.55; color:#5B5573;
}
.vg-onb-row{ display:flex; gap:8px; margin-bottom:12px; }
.vg-onb-select, .vg-onb-input{
  flex:1; min-width:0; padding:9px 8px; border-radius:var(--vg-r-sm, 10px);
  border:1px solid rgba(113,99,166,.28); background:#FFFDF9;
  color:#29253F; font-size:14px; text-align:center;
  font-family:inherit;   /* 2026-09-15 PHASE B-2 — 폼 요소 기본 글꼴(Roboto)로 떨어지지 않게 카드 글꼴을 잇는다 */
}
/* 2026-09-15 PHASE B-2 — 네이티브 드롭다운 모양을 걷는다. 화살표 규칙은 이 앱에서 가장 완성된 select 인
   mbti-quiz.css .mq-field-select(:123-131) 의 것을 그대로 옮기고, 색·radius·배경은 이 카드의 토큰을 쓴다. */
.vg-onb-select{
  appearance:none; -webkit-appearance:none;
  padding-right:22px; height:40px; box-sizing:border-box;
  background-image:linear-gradient(45deg, transparent 50%, var(--vg-ink, #4a3312) 50%), linear-gradient(135deg, var(--vg-ink, #4a3312) 50%, transparent 50%);
  background-position:calc(100% - 13px) 55%, calc(100% - 8px) 55%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
.vg-onb-select:focus{ outline:2px solid var(--vg-gold-line, #D9A441); outline-offset:1px; }
.vg-onb-input{ margin-bottom:20px; text-align:left; }
.vg-onb-btnrow{ display:flex; gap:10px; }
.vg-onb-cta, .vg-onb-skip{
  flex:1; padding:12px 14px; border-radius:var(--vg-r-md, 14px); font-size:14.5px; font-weight:700;
  cursor:pointer; border:1px solid transparent;
}
.vg-onb-cta{ background:#7163A6; color:#FFF9F1; }
.vg-onb-cta:hover{ filter:brightness(1.05); }
.vg-onb-skip{ background:transparent; color:#29253F; border-color:#D6B77A; }
.vg-onb-body > .vg-onb-cta{ width:100%; }
@media (prefers-reduced-motion: reduce){ .vg-onb-veil{ transition:none; } }