/* ============================================================
   페이지 전용 스타일 — 시스템 토큰은 design.css 참조
   ============================================================ */
* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: block;
  background: var(--card);
  color: var(--text-main);
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  overflow-x: hidden;
}

/* ============================================================
   앱 컨테이너 — 모바일 프레임 (젤뭉 그래디언트)
   ============================================================ */
.app-container.page-exit-up {
  animation: pageExitUp var(--motion-duration-base) var(--motion-ease-exit) forwards;
  pointer-events: none;
}

/* ============================================================
   메타 행 — 단계 / 영역 뱃지 (최상단: 시선 동선 진입점)
   ============================================================ */
.meta-row {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(-28px);
  animation: dropDown var(--motion-duration-base) var(--motion-ease-natural) forwards;
}

.badge {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--sp-4);
  border-radius: var(--rd-pill);
  font-size: var(--ft-body);
  font-weight: 800;
  letter-spacing: -0.02em;
  background: var(--card);
  color: var(--jelmmung-deep);
}
/* 영역 뱃지 — 영역 소프트 배경 + 영역 딥 글자.
   --sel-soft / --sel-deep 은 .app-container 단위로 JS가 주입. 영역 바뀌면 자동 동기화. */
.badge.category {
  background: var(--sel-soft, var(--jelmmung-soft));
  color: var(--sel-deep, var(--jelmmung-deep));
}

/* ============================================================
   진행 카드 — 레거시 패턴 이식
   타이머 뱃지 (좌) + 진행 텍스트(우) + 게이지 트랙
   페이즈 동안 게이지가 100%→0%로 줄어듦. 3초 이하 = urgent(딥).
   ============================================================ */
.progress-card {
  background: var(--card);
  border-radius: var(--rd-md);
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  opacity: 0;
  transform: translateY(-28px);
  animation: dropDown var(--motion-duration-base) var(--motion-ease-natural) 0.08s forwards;
}

.progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.timer-badge {
  min-width: 64px;
  height: 36px;
  padding: 0 var(--sp-4);
  border-radius: var(--rd-pill);
  background: var(--card);
  /* 테두리는 메인(파스텔). 글자는 딥 유지 — 숫자 가독성 확보.
     urgent 진입하면 둘 다 딥(빨강)으로 점프해서 변화 임팩트. */
  border: 2px solid var(--jelttok);
  color: var(--jelttok-deep);
  font-size: var(--ft-h2);
  font-weight: 900;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--motion-duration-fast) var(--motion-ease-natural),
              border-color var(--motion-duration-fast) var(--motion-ease-natural);
}
.timer-badge.is-urgent {
  color: var(--jelmmung-deep);
  border-color: var(--jelmmung-deep);
}

.progress-text {
  font-size: var(--ft-h2);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--text-main);
}
.progress-text .current { color: var(--jelmmung-deep); }
.progress-text .sep     { color: var(--text-muted); margin: 0 var(--sp-1); }
.progress-text .total   { color: var(--text-muted); }
.progress-unit {
  margin-left: var(--sp-1);
  color: var(--text-muted);
}

.progress-track {
  width: 100%;
  height: 10px;
  background: var(--neutral-a);
  border-radius: var(--rd-pill);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 100%;
  /* 메인(파스텔)으로 — 넓은 면적 규칙. urgent에서만 딥. */
  background: var(--jelttok);
  border-radius: var(--rd-pill);
  transition: width 0.08s linear, background-color var(--motion-duration-fast) var(--motion-ease-natural);
}
.progress-fill.is-urgent {
  background: var(--jelmmung-deep);
}

/* ============================================================
   문제 카드 — 이 페이지의 히어로
   ============================================================ */
.question-card {
  background: var(--card);
  border-radius: var(--rd-md);
  padding: var(--sp-6) var(--sp-5);
  opacity: 0;
  transform: translateY(-28px);
  animation: dropDown var(--motion-duration-base) var(--motion-ease-natural) 0.16s forwards;
}

.question-text {
  margin: 0;
  font-size: var(--ft-display-s);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: -0.03em;
  color: var(--text-main);
  word-break: keep-all;
}

/* ============================================================
   보기 — 4지선다 (읽기 페이즈에는 숨김)
   문제 폰트와 동일 위계: display-s
   각 보기 간격 = 카드 간격(--sp-4)과 동일하게 통일
   ============================================================ */
.options {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  opacity: 0;
  transform: translateY(-28px);
  animation: dropDown var(--motion-duration-base) var(--motion-ease-natural) 0.24s forwards;
}

.option {
  width: 100%;
  min-height: 72px;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--rd-sm);
  border: 3px solid transparent;
  background: var(--card);
  color: var(--text-main);
  font-family: inherit;
  font-size: var(--ft-display-s);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  word-break: keep-all;
  appearance: none;
  -webkit-appearance: none;
  transition: transform var(--motion-duration-fast) var(--motion-ease-natural),
              border-color var(--motion-duration-fast) var(--motion-ease-natural),
              box-shadow var(--motion-duration-fast) var(--motion-ease-natural),
              background-color var(--motion-duration-fast) var(--motion-ease-natural),
              color var(--motion-duration-fast) var(--motion-ease-natural),
              opacity var(--motion-duration-fast) var(--motion-ease-natural);
}
.option:hover:not(:disabled) { transform: translateY(-2px); }
.option:active:not(:disabled) {
  transform: scale(var(--state-pressed-scale));
  filter: brightness(var(--state-pressed-brightness));
}
.option:focus-visible {
  outline: 3px solid var(--sel-deep, var(--jelttok-deep));
  outline-offset: 2px;
}
/* disabled가 브라우저 기본 페이드를 걸지 않도록 명시.
   흐리게 처리는 .is-dimmed가 단독 담당 → 선택된 보기는 풀 불투명 유지. */
.option:disabled { cursor: default; opacity: 1; }

/* 읽기 페이즈 — 보기 자체를 숨김 */
.option.is-hidden { display: none; }

/* 보기 번호 원 — display-s 폰트 위계에 맞춰 큰 사이즈 */
.option-num {
  width: 40px;
  height: 40px;
  border-radius: var(--rd-pill);
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ft-h1);
  font-weight: 900;
  color: var(--text-inverse);
  background: var(--text-main);
  transition: background-color var(--motion-duration-fast) var(--motion-ease-natural),
              color var(--motion-duration-fast) var(--motion-ease-natural);
}

/* 선택됨 — 영역 메인 컬러 강조 (디자인 시스템 선택 상태 패턴 동일)
   --sel-main / --sel-deep 은 JS가 문제 영역에 따라 .options에 주입 */
.option.is-selected {
  transform: translateY(-4px);
  background: var(--sel-deep, var(--jelmmung-deep));
  color: var(--text-inverse);
  border-color: var(--sel-deep, var(--jelmmung-deep));
  opacity: 1;
}
.option.is-selected:disabled {
  transform: translateY(-4px);
  background: var(--sel-deep, var(--jelmmung-deep));
  color: var(--text-inverse);
  border-color: var(--sel-deep, var(--jelmmung-deep));
  opacity: 1;
}
.option.is-selected .option-num {
  background: var(--text-inverse);
  color: var(--sel-deep, var(--jelmmung-deep));
}

/* 선택 후 나머지 — 흐리게 (수정 불가) */
.option.is-dimmed { opacity: var(--state-dimmed-opacity); }

/* ============================================================
   하단 액션 버튼 — "바로 보기" 패턴 (레거시 이식)
   읽기 페이즈: "바로 보기" 클릭 시 즉시 답하기로 전환
   답하기 페이즈: 텍스트 숨기고 마스코트만 (idle, 클릭 차단)
   ============================================================ */
.cta-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-4);
  opacity: 0;
  transform: translateY(-28px);
  animation: dropDown var(--motion-duration-base) var(--motion-ease-natural) 0.32s forwards;
}

/* CTA — 시스템 .btn-cta.character + .pri-jm은 design.css. 페이지 특수만 여기 유지 */
.btn-cta {
  position: relative;
  overflow: hidden;
}
/* idle 상태(답하기 페이즈)에서는 hover/active 비활성 */
.btn-cta:hover.is-idle,
.btn-cta:active.is-idle { transform: none; filter: none; }
/* 페이지 한정 비활성: 시스템 .is-disabled 토큰 톤 대신 단순 dim */
.btn-cta:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-cta-icon {
  transition: opacity var(--motion-duration-fast) var(--motion-ease-natural);
}

/* 평소(바로 보기 상태) — 젤뭉 아이콘 + 텍스트. 모션은 빼서 모바일 시선 분산 방지. */
.btn-cta .btn-cta-icon {
  display: block;
}

/* idle 상태 (답하기 페이즈) — 버튼·젤뭉은 유지, 텍스트만 마스코트 대사로 교체.
   클릭은 차단. "(소곤소곤) / 왜? 나? 젤뭉" 2줄 뮤트톤. */
.btn-cta.is-idle {
  cursor: default;
  pointer-events: none;
}
.btn-idle-text {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
  font-size: var(--ft-body-s);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text-inverse);
  opacity: 0.78;
  line-height: 1.3;
}
.btn-cta.is-idle .btn-label,
.btn-cta.is-idle .action-copy { display: none; }
.btn-cta.is-idle .btn-idle-text { display: flex; }

/* ============================================================
   모션 — 시스템 원자 @keyframes 재사용
   ============================================================ */
/* dropDown / pageExitUp keyframes는 design.css 공통 */
@keyframes float {
  0%   { transform: translateY(0)    scale(1); }
  50%  { transform: translateY(-6px) scale(1); }
  100% { transform: translateY(0)    scale(1); }
}

/* A11y — 스크린 리더 전용 */
.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;
}

/* ============================================================
   신규 유저 온보딩 모달 — 첫 시험 진입 직전 1회 노출
   ============================================================ */
.onboarding-card {
  max-width: 380px;
  padding: var(--sp-6) var(--sp-5);
  gap: var(--sp-3);
  text-align: center;
}
.onboarding-modal {
  background: var(--scrim);
}
.onb-kicker {
  margin: 0;
  font-size: var(--ft-body-s);
  font-weight: 800;
  color: var(--jelmmung-deep);
  letter-spacing: 0.02em;
}
.onb-title {
  margin: 0;
  font-size: var(--ft-h1);
  font-weight: 900;
  color: var(--text-main);
}
.onb-desc {
  margin: 0;
  font-size: var(--ft-body-s);
  color: var(--text-muted);
  line-height: 1.55;
}
.onb-range {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  font-size: var(--ft-body);
  font-weight: 800;
  color: var(--text-main);
}
.onb-range-input {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}
.onb-range-input input {
  width: 64px;
  height: 48px;
  padding: 0 var(--sp-2);
  border: 2px solid var(--neutral-b);
  border-radius: var(--rd-sm);
  font-family: inherit;
  font-size: var(--ft-h2);
  font-weight: 900;
  text-align: center;
  color: var(--text-main);
  background: var(--card);
  -moz-appearance: textfield;
}
.onb-range-input input::-webkit-outer-spin-button,
.onb-range-input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.onb-range-input input:focus {
  outline: 2px solid var(--jelmmung-deep);
  outline-offset: 1px;
  border-color: var(--jelmmung-deep);
}
.onb-range-sep {
  color: var(--text-muted);
  font-weight: 700;
}
.onb-hint {
  margin: 0;
  font-size: var(--ft-body);
  color: var(--text-muted);
  font-weight: 800;
}
.onb-error {
  margin: 0;
  font-size: var(--ft-caption);
  color: var(--jelmmung-deep);
  font-weight: 800;
}
.onb-submit {
  width: 100%;
  margin-top: var(--sp-3);
}
.onb-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ── 젤리 글래스 (구 redesign.css 화면20 흡수 · !important 제거)
   bare 셀렉터를 베이스 뒤에 append → 순서로 이김. 게이지 트랙은 20 전용(.progress-track),
   리포트의 .gauge-track은 각 리포트 css에서 처리. ── */
.meta-row, .progress-card, .question-card, .options, .cta-section { position: relative; z-index: 1; }
.progress-card {
  background: var(--cg-card-bg);
  backdrop-filter: blur(var(--cg-blur)); -webkit-backdrop-filter: blur(var(--cg-blur));
  border: var(--cg-card-border);
  border-radius: var(--cg-radius);
  box-shadow: var(--cg-shadow);
}
.question-card {
  background: var(--cg-surface-70);
  backdrop-filter: blur(26px) saturate(1.25); -webkit-backdrop-filter: blur(26px) saturate(1.25);
  border: var(--cg-card-border);
  border-radius: var(--cg-radius);
  box-shadow:
    0 6px 16px rgba(217, 64, 64, 0.10),
    0 22px 48px rgba(217, 64, 64, 0.18),
    inset 0 1px 2px rgba(255, 255, 255, 0.85);
}
.option:not(.is-selected) {
  background: var(--cg-surface-70);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 12px rgba(43, 54, 67, 0.08);
}
.progress-track { background: var(--neutral-b); }
.badge.stage {
  background: var(--cg-surface-50);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow:
    0 5px 13px rgba(43, 33, 66, 0.16),
    inset 0 1px 1px rgba(255, 255, 255, 0.6);
}
.badge.category {
  box-shadow:
    0 5px 13px rgba(43, 33, 66, 0.14),
    inset 0 1px 1px rgba(255, 255, 255, 0.5);
}
.timer-badge {
  background: var(--cg-surface-70);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}