/* village-firstrun.css — 첫 실행 [60초 안에 나] (village-firstrun.js). 색은 village-guide.css 의 --vgd-* 와 같은 값만 쓴다. */
.fr-veil{ position:fixed; inset:0; z-index:9500; display:flex; align-items:center; justify-content:center;
  background:rgba(41,37,63,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  padding:max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  opacity:1; transition:opacity .3s ease; font-family:inherit; color:#FFF9F1; }
.fr-veil.is-gone{ opacity:0; pointer-events:none; }
.fr-stage{ width:100%; max-width:420px; max-height:100%; display:flex; flex-direction:column; align-items:center; gap:14px; }

.fr-card{ width:100%; background:#FFF9F1; color:#29253F; border-radius:22px; padding:24px 20px 18px;
  box-shadow:0 12px 40px rgba(0,0,0,.35); animation:fr-rise .35s ease both; }
.fr-title{ margin:0 0 6px; font-size:22px; font-weight:800; }
.fr-desc{ margin:0 0 16px; font-size:14px; color:#5B5573; line-height:1.5; }
.fr-row{ display:flex; gap:8px; margin-bottom:12px; }
.fr-select{ flex:1; min-width:0; height:46px; border-radius:12px; border:1px solid rgba(113,99,166,.28);
  background:#fff; color:#29253F; font-size:16px; padding:0 8px; }
.fr-gender{ justify-content:flex-start; }
.fr-chip{ height:40px; padding:0 22px; border-radius:20px; border:1px solid rgba(113,99,166,.28); background:#fff;
  color:#5B5573; font-size:15px; }
.fr-chip.is-on{ background:#7163A6; border-color:#7163A6; color:#fff; }
.fr-err{ min-height:18px; margin:0 0 6px; font-size:13px; color:#B0506A; }
.fr-btnrow{ display:flex; gap:10px; }
.fr-cta, .fr-skip{ flex:1; height:48px; border-radius:24px; font-size:16px; font-weight:700; border:0; }
.fr-cta{ background:#7163A6; color:#fff; }
.fr-skip{ background:transparent; color:#5B5573; border:1px solid rgba(113,99,166,.28); }
.fr-stage--talk .fr-skip, .fr-stage--card .fr-skip{ color:#FFF9F1; border-color:rgba(255,249,241,.4); }

/* 콜드리딩 — 하루 말풍선 */
.fr-stage--talk{ justify-content:center; }
.fr-haru{ width:120px; height:120px; object-fit:contain; animation:fr-rise .4s ease both; }
.fr-bubble{ width:100%; min-height:110px; background:#FFF9F1; color:#29253F; border-radius:20px; padding:16px 18px;
  box-shadow:0 10px 30px rgba(0,0,0,.3); }
.fr-name{ display:block; font-size:12px; font-weight:700; color:#7163A6; margin-bottom:6px; }
.fr-say{ margin:0; font-size:19px; line-height:1.55; font-weight:600; min-height:2.9em; }
.fr-answers{ width:100%; }

/* 운명의 첫 카드 — 전체화면 1장 */
.fr-stage--card{ justify-content:center; }
.fr-cardhint{ margin:0; font-size:14px; color:rgba(255,249,241,.8); }
.fr-flip{ position:relative; width:min(52vw, 230px); aspect-ratio:2/3; perspective:900px; cursor:pointer; }
.fr-flip-inner{ position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .8s cubic-bezier(.3,.7,.2,1); }
.fr-flip-inner.is-flipped{ transform:rotateY(180deg); }
.fr-face{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.45); }
.fr-face img{ width:100%; height:100%; object-fit:cover; display:block; }
.fr-front{ transform:rotateY(180deg); }
.fr-burst{ position:absolute; left:50%; top:50%; width:260%; max-width:none; transform:translate(-50%,-50%) scale(.4);
  mix-blend-mode:screen; opacity:0; pointer-events:none; }
.fr-burst.is-burst{ animation:fr-burst 1.2s ease-out .35s 1 both; }
.fr-reading{ width:100%; text-align:center; }
.fr-line{ margin:0 0 6px; font-size:15px; line-height:1.55; opacity:0; transform:translateY(6px); transition:opacity .5s ease, transform .5s ease; }
.fr-line.is-in{ opacity:1; transform:none; }
.fr-line--fixed{ margin-top:10px; color:#D6B77A; font-weight:700; }
.fr-cta--enter{ flex:none; width:100%; max-width:320px; opacity:0; transition:opacity .5s ease; }
.fr-cta--enter.is-in{ opacity:1; }

@keyframes fr-rise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@keyframes fr-burst{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(.4); } 30%{ opacity:.95; } 100%{ opacity:0; transform:translate(-50%,-50%) scale(1.1); } }
@media (prefers-reduced-motion: reduce){
  .fr-card, .fr-haru{ animation:none; }
  .fr-flip-inner, .fr-line, .fr-veil{ transition:none; }
  .fr-burst.is-burst{ animation:none; }
}
.fr-veil [hidden]{ display:none !important; }