/* =========================================================
   POSE 16 · 나의 생각하는 자세 — 스타일
   1080×1920 고정 아트보드를 뷰포트에 스케일(원본 시안 위치 그대로 재현)
   ========================================================= */

@font-face {
  font-family: 'Pretendard';
  src: url('assets/fonts/PretendardVariable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #000622;
  --bg-soft: #0a1130;
  --line: rgba(150, 170, 255, 0.22);

  --pink: #ff63c7;
  --violet: #b58bee;
  --teal: #74f7d2;
  --grad: linear-gradient(95deg, #ff63c7 0%, #b58bee 48%, #74f7d2 100%);

  --text: #eaf0ff;
  --muted: #97a2ce;
  --muted-dim: #6d78a6;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

/* 스크린리더/크롤러 전용(화면엔 안 보임) — SEO 헤딩용 */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

html { -webkit-text-size-adjust: 100%; overflow: hidden; }

body {
  font-family: 'Pretendard', 'Malgun Gothic', -apple-system, system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  /* 뷰포트에 고정 → 1080×1920 고정 스테이지가 넘쳐도 레이아웃 뷰포트가 확장되지 않음
     (모바일에서 innerWidth 가 커져 스케일이 부족하게 계산되던 '확대' 버그 방지) */
  position: fixed; inset: 0;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}

/* 레터박스 영역까지 은은한 글로우 */
body::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(120% 55% at 50% 0%, rgba(120, 90, 200, 0.10), transparent 60%),
    radial-gradient(90% 45% at 50% 100%, rgba(0, 200, 180, 0.06), transparent 60%);
  pointer-events: none; z-index: 0;
}

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* ---------- 스테이지: 1080×1920 고정, 뷰포트에 맞춰 scale ---------- */
.stage {
  position: relative; z-index: 1;
  width: 1080px; height: 1920px;
  flex: none;
  transform: scale(var(--scale, 1));
  transform-origin: center center;
  overflow: hidden;
  background:
    radial-gradient(120% 42% at 50% 0%, rgba(120, 90, 200, 0.07), transparent 58%),
    radial-gradient(90% 34% at 50% 100%, rgba(0, 200, 180, 0.04), transparent 58%),
    var(--bg);
}

.screen {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column;
  animation: fade .5s ease both;
}
.screen.is-active { display: flex; }
@keyframes fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- 버튼 공통 ---------- */
.btn {
  font-family: inherit; cursor: pointer;
  border: 0; background: none; color: var(--text);
  transition: transform .15s ease, filter .2s ease, box-shadow .25s ease;
}
.btn:active { transform: scale(.98); }

/* 그라디언트 테두리 라운드-사각형 버튼 */
.btn--pill {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 26px;
  padding: 34px 70px;
  font-size: 50px; font-weight: 800; letter-spacing: .02em;
  border-radius: 22px;
  color: #fff;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    var(--grad) border-box;
  border: 3px solid transparent;
  box-shadow: 0 0 40px rgba(180, 120, 230, 0.28), inset 0 0 30px rgba(120, 200, 220, 0.06);
}
.btn--pill:hover { filter: brightness(1.08); }
.btn__arrow { font-weight: 700; font-size: 1.15em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.btn--ghost {
  font-size: 34px; font-weight: 600; color: var(--muted);
  padding: 24px 52px; border-radius: 999px;
  border: 2px solid var(--line);
  background: rgba(255,255,255,0.02);
}
.btn--ghost:hover { color: var(--text); border-color: rgba(150,170,255,.4); }

/* =========================================================
   1. 인트로  (원본 좌표 절대배치)
   ========================================================= */
.screen--intro { display: none; padding: 0; }
.screen--intro.is-active { display: block; }

/* 원본 시안(.ai)을 그대로 렌더한 이미지 — 폰트/간격/장식 100% 일치 */
.intro-img { position: absolute; inset: 0; width: 1080px; height: 1920px; display: block; }

/* '시작하기' 버튼 위에 얹는 투명 클릭 영역 */
.intro-start {
  position: absolute; left: 288px; top: 1552px; width: 504px; height: 152px;
  background: transparent; border: 0; cursor: pointer; border-radius: 24px;
  -webkit-tap-highlight-color: transparent;
}
.intro-start:active { background: rgba(255, 255, 255, .05); }

/* =========================================================
   2. 질문
   ========================================================= */
.screen--question { justify-content: flex-start; padding: 92px 80px 80px; }

.q-topnote {
  text-align: center; font-size: 21px; color: var(--muted); font-weight: 400;
  letter-spacing: .01em; margin-bottom: 0;
}
.q-topnote b { color: var(--muted); font-weight: 400; }

/* 도형 배치용 스페이서(제목/옵션을 하단부로 밀어줌); 실제 이미지는 절대좌표 배치 */
.q-figure {
  flex: 0 0 auto; height: 850px; margin-top: 130px; padding: 0;
}
/* 시안 아트보드 좌표(1080×1920) 그대로 배치 — left/top/width/height 는 JS가 질문별로 주입 */
.q-figure img {
  position: absolute; object-fit: contain;
  filter: drop-shadow(0 12px 60px rgba(120, 120, 220, 0.25));
  animation: floaty 6s ease-in-out infinite;
}
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }

.q-body { flex: 0 0 auto; margin-top: 44px; text-align: center; }
.q-title {
  text-align: center; font-weight: 800; color: #fff;
  font-size: 50px; line-height: 1.26; margin-bottom: 38px; word-break: keep-all;
}
.q-title span:first-child { color: var(--text); }

/* 시안: 버튼 폭이 문구 길이에 맞춰 가변, 그룹 내 두 버튼은 넓은 쪽에 맞춰 동일폭, 가로 중앙 */
.q-options { display: inline-grid; gap: 22px; }
.opt {
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: auto; max-width: 940px; min-height: 84px; padding: 22px 38px;
  font-family: inherit; font-size: 31px; font-weight: 500; line-height: 1.34;
  color: #eaf0ff; cursor: pointer; border-radius: 20px;
  position: relative;
  /* 시안: 투명 채움 + 흰색 아웃라인(2번 선택지 기본) */
  background: transparent;
  border: 2px solid rgba(255, 255, 255, .82); word-break: keep-all;
  transition: transform .14s ease, box-shadow .25s ease, filter .2s ease;
}
/* 기본은 모든 선택지가 동일한 흰색 아웃라인(시안 통일) — 선택 시에만 그라디언트로 전환 */
.opt.is-picked {
  border-color: transparent;
  filter: brightness(1.22);
  animation: opt-pick .5s cubic-bezier(.2, .85, .25, 1) both;
}
/* 선택 순간: 흐르는 핑크→틸 그라디언트 테두리(잘 보이게 애니메이션) */
.opt.is-picked::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 3px;
  background: linear-gradient(95deg, #ff63c7, #b58bee 42%, #74f7d2 60%, #b58bee 80%, #ff63c7);
  background-size: 240% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
  animation: opt-grad-flow .9s linear infinite;
}
.opt:hover { filter: brightness(1.12); }
.opt:active { transform: scale(.99); }
/* 선택 강조: 살짝 커졌다가 안정 + 글로우 펄스 */
@keyframes opt-pick {
  0%   { transform: scale(1);     box-shadow: 0 0 0 rgba(180, 120, 230, 0); }
  38%  { transform: scale(1.045); box-shadow: 0 0 78px rgba(180, 120, 230, .9); }
  100% { transform: scale(1);     box-shadow: 0 0 58px rgba(180, 120, 230, .62); }
}
@keyframes opt-grad-flow { to { background-position: 240% 0; } }
.opt__letter { font-weight: 500; color: #cfd7ff; white-space: nowrap; }

.q-foot {
  flex: 0 0 auto; margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 24px; padding-top: 0;
}
/* ? 버튼: 핑크→틸 그라디언트 링 + 흰색 글리프 (시안) */
.help-btn {
  width: 84px; height: 84px; border-radius: 50%;
  font-family: inherit; font-size: 38px; font-weight: 500; color: #fff; cursor: pointer;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    var(--grad) border-box;
  border: 3px solid transparent;
  display: grid; place-items: center;
  transition: transform .15s ease, filter .2s ease;
}
.help-btn:hover { filter: brightness(1.12); }
.help-btn:active { transform: scale(.9); }
.q-pager { font-size: 22px; color: #c7cff0; font-weight: 400; letter-spacing: .04em; }
.q-pager #q-cur { color: var(--muted); }

/* 도움말 팝오버 (? 위) */
.help-sheet[hidden] { display: none; }
/* 도움말: ? 버튼 바로 위 작은 말풍선(툴팁). 배경 딤 없이 질문/선택지가 그대로 보임 */
.help-sheet {
  position: absolute; inset: 0; z-index: 30;
  display: flex; align-items: flex-end; justify-content: center;
  background: transparent;
  padding: 0 0 245px;
  animation: fade .18s ease both;
}
.help-card {
  position: relative; width: 460px;
  background: rgba(43, 49, 76, 0.98); border: 1px solid rgba(150, 170, 255, .26);
  border-radius: 22px; padding: 22px 28px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
  animation: pop .26s cubic-bezier(.2, .9, .25, 1) both;
}
.help-card::after {
  content: ''; position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%);
  border: 16px solid transparent; border-bottom: 0; border-top-color: rgba(43, 49, 76, .98);
}
@keyframes pop { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
.help-heading { font-size: 21px; font-weight: 800; color: #fff; margin-bottom: 12px; line-height: 1.35; }
.help-lines { display: flex; flex-direction: column; gap: 8px; }
.help-line { line-height: 1.25; }
.help-line__key { font-size: 23px; font-weight: 800; color: #eef1ff; }
.help-line__key .k { color: var(--pink); }
.help-line__val { font-size: 20px; color: var(--muted); margin-top: 2px; }

/* =========================================================
   3. 로딩
   ========================================================= */
.screen--loading { align-items: center; justify-content: center; padding: 0; }
.loading-ring {
  position: absolute; left: 50%; top: 813px; transform: translate(-50%, -50%);
  width: 1003px; aspect-ratio: 1; display: grid; place-items: center;
  /* 컨테이너: 살짝 커졌다 작아지는 호흡(펄스) — 안쪽 img의 회전과 합성됨 */
  animation: ring-pulse 3.6s ease-in-out infinite;
}
.loading-ring__img {
  width: 100%; height: 100%; object-fit: contain;
  animation: spin 22s linear infinite;   /* 천천히 회전 */
  filter: drop-shadow(0 0 70px rgba(120,140,230,.3));
}
@keyframes spin { to { transform: rotate(360deg); } }
/* translate(위치 지정)를 유지한 채 scale 만 미세하게 변화 */
@keyframes ring-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.04); }
}
.loading-cta {
  position: absolute; left: 50%; top: 1544px; transform: translate(-50%, -50%);
  min-width: 486px; justify-content: center;
  /* hidden 해제로 표시될 때(display:none→flex) 뚝 뜨지 않고 부드럽게 등장.
     fill 없음 → 종료 후 :active(scale) 등 기본 상태로 복귀 */
  animation: cta-rise-in .5s cubic-bezier(.2, .8, .2, 1);
}
.loading-cta:active { transform: translate(-50%, -50%) scale(.98); }
/* 중앙 정렬 translate 를 유지한 채 살짝 떠오르며 페이드 인 */
@keyframes cta-rise-in {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 14px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* =========================================================
   4. 결과
   ========================================================= */
.screen--result { justify-content: center; align-items: center; gap: 56px; padding: 70px 80px; }

.result-card {
  position: relative; width: 860px; border-radius: 44px; padding: 56px 52px 64px; text-align: center;
  background:
    radial-gradient(120% 62% at 50% 0%, rgba(44, 32, 86, 0.10), transparent 62%),
    linear-gradient(180deg, #05081b, #04061a);
  box-shadow: 0 30px 90px rgba(0,0,0,.5);
}
.result-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 3px;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .85; pointer-events: none;
}
.result-pose { display: flex; justify-content: center; margin-bottom: 18px; }
.result-pose img {
  width: auto; max-height: 900px; max-width: 86%; object-fit: contain;
  filter: drop-shadow(0 16px 60px rgba(130,120,230,.35));
}
.result-nick { font-size: 46px; font-weight: 800; color: #fff; margin-bottom: 2px; }
.result-code { font-weight: 900; font-size: 180px; line-height: 1; letter-spacing: .02em; margin: 6px 0 14px; }
.result-desc { font-size: 37px; line-height: 1.5; color: var(--muted); font-weight: 500; word-break: keep-all; max-width: 600px; margin: 0 auto; }

.result-share { display: flex; align-items: center; gap: 40px; padding: 0 30px; }
.result-qr {
  flex: 0 0 auto; width: 210px; aspect-ratio: 1;
  border-radius: 22px; padding: 12px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--grad) border-box;
  border: 3px solid transparent;
  box-shadow: 0 10px 34px rgba(0,0,0,.4);
}
.result-qr img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.result-share-text { font-size: 33px; line-height: 1.5; color: #cdd6f5; font-weight: 500; text-align: left; }
.result-share-text b { color: #fff; font-weight: 800; }

/* =========================================================
   화면 등장 모션 — "딱 뜨는" 느낌 제거, 통일된 페이드+상승 언어
   · 각 .screen 은 display:none→flex 로 표시될 때 CSS 애니메이션이 재생됨
     → 세션마다(재시작 포함) 매번 다시 재생된다.
   · Q2~Q4 는 app.js 의 swapQuestion(WAAPI 크로스페이드)이 담당하므로
     여기 질문 stagger 는 화면이 실제로 뜨는 Q1 진입에서만 재생된다.
   ========================================================= */
@keyframes fade-plain { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise-in    { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* ---- 1. 인트로: 풀블리드 이미지가 밀려 올라오지 않도록 순수 페이드(살짝 길게) ---- */
.screen--intro { animation: fade-plain .6s ease both; }

/* ---- 2. 질문(Q1 진입): 배경 페이드 + 안내문→제목→선택지→하단 순차 등장 ---- */
.screen--question { animation: fade-plain .5s ease both; }
.screen--question.is-active .q-topnote { animation: rise-in .6s cubic-bezier(.2,.8,.2,1) .04s both; }
.screen--question.is-active .q-title   { animation: rise-in .6s cubic-bezier(.2,.8,.2,1) .20s both; }
.screen--question.is-active .q-options { animation: rise-in .6s cubic-bezier(.2,.8,.2,1) .32s both; }
.screen--question.is-active .q-foot    { animation: rise-in .6s cubic-bezier(.2,.8,.2,1) .44s both; }

/* ---- 3. 로딩: 링이 화면과 함께 툭 뜨지 않고 부드럽게(기존 ring-pulse 와 합성) ---- */
.loading-ring { animation: ring-pulse 3.6s ease-in-out infinite, fade-plain .7s ease both; }

/* ---- 4. 결과: 웅장한 등장 — 카드가 규모감 있게 떠오르고(오버슈트), 코드는 글로우 블룸, 공유는 뒤이어 ---- */
.screen--result { animation: fade-plain .55s ease both; }
.screen--result.is-active .result-card {
  animation: result-rise .9s cubic-bezier(.2, .86, .27, 1.02) both;
}
@keyframes result-rise {
  from { opacity: 0; transform: translateY(54px) scale(.9); }
  to   { opacity: 1; transform: none; }
}
/* 거대한 유형 코드(예: GVFA): 카드가 자리잡을 무렵 보라빛 글로우가 피었다 가라앉는 클라이맥스 */
.screen--result.is-active .result-code {
  animation: code-glow 1.1s ease .5s both;
}
@keyframes code-glow {
  0%   { text-shadow: 0 0 0 rgba(181, 139, 238, 0); }
  50%  { text-shadow: 0 0 48px rgba(181, 139, 238, .6); }
  100% { text-shadow: 0 0 0 rgba(181, 139, 238, 0); }
}
.screen--result.is-active .result-share {
  animation: rise-in .7s cubic-bezier(.2, .8, .2, 1) .55s both;
}