/* =========================================================================
 * test.css — 심리테스트 허브/러너 전용 스타일
 *  (1) 타이포그래피: Pretendard + 한글 자간·행간·줄바꿈 정밀화
 *  (2) 인터랙션: 문항 전환·선택 피드백·결과 등장·축하 연출
 *  .test-scope 안에서만 적용되도록 스코프 한정(다른 페이지 영향 없음).
 * ========================================================================= */

/* ---------- (1) Typography ---------- */
.test-scope {
  /* 장평: Pretendard 의 균형 잡힌 자형으로 본문 가독성·밀도 개선. 미로드 시 시스템 한글체 */
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
    'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', system-ui, sans-serif;
  /* 행간: 한글 본문은 넉넉하게 */
  line-height: 1.68;
  /* 자간: 한글 본문 살짝 좁혀 또렷하게 */
  letter-spacing: -0.01em;
  /* 줄바꿈: 단어 중간에서 끊기지 않게(한글 핵심) */
  word-break: keep-all;
  overflow-wrap: anywhere;
  /* 렌더링 품질 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'tnum' 1, 'case' 1; /* 고정폭 숫자·문장부호 정렬 */
}

/* 제목: 자간 더 좁히고 행간 타이트하게(헤드라인 밀도) */
.test-scope h1 { letter-spacing: -0.035em; line-height: 1.24; }
.test-scope h2 { letter-spacing: -0.03em;  line-height: 1.3; }
.test-scope h3 { letter-spacing: -0.025em; line-height: 1.35; }

/* 본문 리드(설명) 행간 더 여유 있게 */
.test-scope .leading-relaxed { line-height: 1.75 !important; }

/* MBTI 결과 코드: 폭 넓은 자간으로 라벨감 */
.test-scope #testResultCode { letter-spacing: 0.32em; font-variant-numeric: tabular-nums; }

/* 숫자(진행 N/총)·% 는 고정폭 */
.test-scope #testProgressText,
.test-scope #testScoreBars { font-variant-numeric: tabular-nums; }


/* ---------- (2) Interactions ---------- */
:root { --t-ease: cubic-bezier(0.22, 0.61, 0.36, 1); }

@media (prefers-reduced-motion: reduce) {
  .test-scope * { animation: none !important; transition: none !important; }
}

/* 문항 등장: 아래에서 부드럽게 떠오름 */
@keyframes qEnter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.q-enter { animation: qEnter 0.34s var(--t-ease) both; }

/* 선택지: hover 살짝 떠오르고, 누르면 눌리는 느낌 */
.test-scope #testOptions > button {
  transition: transform 0.14s var(--t-ease), border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
  will-change: transform;
}
.test-scope #testOptions > button:hover { transform: translateY(-2px); box-shadow: 0 6px 18px -10px rgba(0,0,0,0.25); }
.test-scope #testOptions > button:active { transform: scale(0.985); }

/* 선택 직후: 채워지는 강조 + 체크, 잠깐 보여주고 다음 문항 */
@keyframes optPick { 0% { transform: scale(1); } 40% { transform: scale(1.015); } 100% { transform: scale(1); } }
.test-scope #testOptions > button.opt-selected {
  border-color: currentColor;
  box-shadow: inset 0 0 0 2px currentColor;
  animation: optPick 0.32s var(--t-ease);
}
.test-scope #testOptions > button.opt-selected::after {
  content: '✓'; float: right; font-weight: 800; opacity: 0; animation: fadeIn 0.2s ease forwards;
}
@keyframes fadeIn { to { opacity: 1; } }

/* 진행 막대: 부드럽게 + 은은한 광택 흐름 */
.test-scope #testProgressBar { position: relative; overflow: hidden; }
.test-scope #testProgressBar::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: translateX(-100%); animation: barShine 2.2s var(--t-ease) infinite;
}
@keyframes barShine { to { transform: translateX(100%); } }

/* 결과 등장: 요소들이 순차적으로 떠오름(stagger) */
@keyframes revealUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.is-revealing > * { animation: revealUp 0.5s var(--t-ease) both; }
.is-revealing > *:nth-child(1) { animation-delay: 0.02s; }
.is-revealing > *:nth-child(2) { animation-delay: 0.10s; }
.is-revealing > *:nth-child(3) { animation-delay: 0.18s; }
.is-revealing > *:nth-child(4) { animation-delay: 0.26s; }
.is-revealing > *:nth-child(5) { animation-delay: 0.34s; }
.is-revealing > *:nth-child(6) { animation-delay: 0.42s; }

/* 결과 이모지: 톡 튀어 들어옴 */
@keyframes emojiPop { 0% { opacity: 0; transform: scale(0.4) rotate(-12deg); } 60% { transform: scale(1.18) rotate(4deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
.emoji-pop { animation: emojiPop 0.62s var(--t-ease) both; display: inline-block; }

/* 점수 막대: 폭이 차오르는 연출(인라인 width 와 함께 transition) */
.test-scope #testScoreBars .bar-fill { transition: width 0.7s var(--t-ease); }

/* 시작 버튼: 은은한 호흡(주목 유도, 과하지 않게) */
@keyframes ctaBreathe { 0%,100% { box-shadow: 0 8px 24px -12px rgba(0,0,0,0.45); } 50% { box-shadow: 0 12px 30px -10px rgba(0,0,0,0.55); } }
.test-scope #testStartBtn { animation: ctaBreathe 3.4s ease-in-out infinite; }
.test-scope #testStartBtn:hover { transform: translateY(-1px); }
.test-scope #testStartBtn:active { transform: scale(0.99); }

/* 축하 sparkle: 결과 등장 시 잔잔히 떠오르는 입자(차분·진중한 톤) */
.celebrate-layer { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.celebrate-layer span {
  position: absolute; bottom: 38%; font-size: 18px; opacity: 0;
  animation: sparkleFloat 1.5s var(--t-ease) forwards;
}
@keyframes sparkleFloat {
  0% { opacity: 0; transform: translateY(0) scale(0.6); }
  20% { opacity: 0.95; }
  100% { opacity: 0; transform: translateY(-160px) scale(1.1); }
}

/* 허브 카드: hover 입체감 + 화살표 슬쩍 */
.test-card { transition: transform 0.18s var(--t-ease), box-shadow 0.18s var(--t-ease); }
.test-card:hover { box-shadow: 0 18px 40px -22px rgba(30,30,60,0.4); }