/* ============================================================
       페이지 전용 스타일 — 시스템 토큰은 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;
    }

    /* ============================================================
       공통 카드 — 시스템 규칙 (흰 배경, 30px 라운드)
       ============================================================ */
    .header-card,
    .answer-card {
      background: var(--card);
      border-radius: var(--rd-md);
      opacity: 0;
      transform: translateY(-28px);
      animation: dropDown var(--motion-duration-base) var(--motion-ease-natural) forwards;
    }
    .header-card { animation-delay: 0.05s; }

    /* ============================================================
       헤더 카드 — 젤똑 아이콘 + 타이틀
       ============================================================ */
    .header-card {
      padding: var(--sp-4) var(--sp-5);
      display: flex;
      align-items: center;
      gap: var(--sp-3);
    }
    .header-icon {
      width: 64px;
      height: 64px;
      object-fit: contain;
      flex: none;
    }
    .header-copy {
      display: flex;
      flex-direction: column;
      gap: var(--sp-1);
    }
    .header-title {
      font-size: var(--ft-display-s);
      font-weight: 900;
      line-height: 1.1;
      letter-spacing: -0.03em;
      color: var(--jelttok-deep);
    }
    /* 부제(kicker) — 타이틀 위에 작은 글씨로 (캐릭터 보이스) */
    .header-sub {
      font-size: var(--ft-body-s);
      font-weight: 800;
      color: var(--text-muted);
      line-height: 1.4;
    }

    /* ============================================================
       답지 카드 리스트
       ============================================================ */
    .answer-list {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: var(--sp-4);
    }
    .answer-list.is-gated {
      max-height: var(--gate-list-height, 1180px);
      overflow: hidden;
    }
    body.is-answer-loading .answer-header-card,
    body.is-answer-loading .answer-list,
    body.is-answer-loading .cta-section,
    body.is-answer-loading .fab-stack { display: none; }
    body.has-empty-answer .answer-header-card,
    body.has-empty-answer .answer-list,
    body.has-empty-answer .cta-section,
    body.has-empty-answer .fab-stack { display: none; }

    .answer-loading-card,
    .answer-empty-card {
      display: none;
    }
    body.is-answer-loading .answer-empty-header,
    body.has-empty-answer .answer-empty-header { display: flex; }
    body.is-answer-loading .answer-loading-card { display: flex; }
    body.has-empty-answer .answer-empty-card { display: flex; }

    .answer-card {
      position: relative;
      flex: 0 0 auto;
      padding: var(--sp-4) var(--sp-5);
      display: flex;
      flex-direction: column;
      gap: var(--sp-3);
      overflow: hidden;
    }
    /* stagger 애니메이션 — 20문제 카드 각각 0.03s 시차 */
    .answer-card:nth-child(1)  { animation-delay: 0.10s; }
    .answer-card:nth-child(2)  { animation-delay: 0.13s; }
    .answer-card:nth-child(3)  { animation-delay: 0.16s; }
    .answer-card:nth-child(4)  { animation-delay: 0.19s; }
    .answer-card:nth-child(5)  { animation-delay: 0.22s; }
    .answer-card:nth-child(6)  { animation-delay: 0.25s; }
    .answer-card:nth-child(7)  { animation-delay: 0.28s; }
    .answer-card:nth-child(8)  { animation-delay: 0.31s; }
    .answer-card:nth-child(9)  { animation-delay: 0.34s; }
    .answer-card:nth-child(10) { animation-delay: 0.37s; }
    .answer-card:nth-child(11) { animation-delay: 0.40s; }
    .answer-card:nth-child(12) { animation-delay: 0.43s; }
    .answer-card:nth-child(13) { animation-delay: 0.46s; }
    .answer-card:nth-child(14) { animation-delay: 0.49s; }
    .answer-card:nth-child(15) { animation-delay: 0.52s; }
    .answer-card:nth-child(16) { animation-delay: 0.55s; }
    .answer-card:nth-child(17) { animation-delay: 0.58s; }
    .answer-card:nth-child(18) { animation-delay: 0.61s; }
    .answer-card:nth-child(19) { animation-delay: 0.64s; }
    .answer-card:nth-child(20) { animation-delay: 0.67s; }
    .answer-card-content {
      display: flex;
      flex-direction: column;
      gap: var(--sp-3);
      transition: filter var(--motion-duration-fast) var(--motion-ease-natural);
    }
    body.is-sample .answer-list.is-gated .answer-card:nth-of-type(n + 3) {
      background: var(--card);
      border-radius: var(--rd-md);
      filter: blur(6px);
      -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 86%);
      mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 86%);
      pointer-events: none;
      user-select: none;
    }
    body.is-sample .answer-list.is-gated .answer-card:nth-of-type(n + 3) .answer-card-content {
      filter: none;
    }
    body.is-sample .answer-list.is-gated .answer-card:nth-of-type(n + 4) .answer-card-content {
      opacity: 0;
    }

    /* 알약 줄 — Q번호 + 단계 + 영역 + 서브태그 */
    .pill-row {
      display: flex;
      flex-wrap: wrap;
      gap: var(--sp-2);
      align-items: center;
    }
    /* 알약 — 시스템 .pill-outline 스펙 (height 32px, ft-label/700, currentColor 테두리) */
    .pill {
      display: inline-flex;
      align-items: center;
      gap: var(--sp-2);
      height: 32px;
      padding: 0 var(--sp-4);
      border-radius: var(--rd-pill);
      font-size: var(--ft-label);
  font-weight: 700;
      letter-spacing: -0.01em;
      white-space: nowrap;
      background: var(--card);
      color: var(--text-muted);
      border: 2px solid currentColor;
      flex-shrink: 0;
    }
    .pill .dot {
      width: 6px;
      height: 6px;
      border-radius: var(--rd-pill);
      background: currentColor;
    }
    .pill.pill-q {
      font-variant-numeric: tabular-nums;
      color: var(--text-main);
    }
    /* 영역 알약 — 영역 딥 색 currentColor (테두리·텍스트·dot 동시 적용) */
    .pill.region {
      color: var(--rg-deep);
    }

    /* 영역색 주입 (regions-card와 동일 스킴) */
    .answer-card.r-life     { --rg-main: var(--c-life-main);     --rg-deep: var(--c-life-deep); }
    .answer-card.r-lang     { --rg-main: var(--c-lang-main);     --rg-deep: var(--c-lang-deep); }
    .answer-card.r-politics { --rg-main: var(--c-politics-main); --rg-deep: var(--c-politics-deep); }
    .answer-card.r-law      { --rg-main: var(--c-law-main);      --rg-deep: var(--c-law-deep); }
    .answer-card.r-history  { --rg-main: var(--c-history-main);  --rg-deep: var(--c-history-deep); }
    .answer-card.r-human    { --rg-main: var(--c-human-main);    --rg-deep: var(--c-human-deep); }
    .answer-card.r-econ     { --rg-main: var(--c-econ-main);     --rg-deep: var(--c-econ-deep); }
    .answer-card.r-science  { --rg-main: var(--c-science-main);  --rg-deep: var(--c-science-deep); }
    .answer-card.r-news     { --rg-main: var(--c-news-main);     --rg-deep: var(--c-news-deep); }
    .answer-card.r-digital  { --rg-main: var(--c-digital-main);  --rg-deep: var(--c-digital-deep); }

    /* 발문 — 한 단계 다운(display-s → h1). 위치(카드 최상단) + 굵기로 위계 잡음 */
    .question-text {
      margin: 0;
      font-size: var(--ft-h1);
      font-weight: 800;
      line-height: 1.5;
      letter-spacing: -0.015em;
      color: var(--text-main);
      word-break: keep-all;
      overflow-wrap: anywhere;
    }

    /* 결과 박스 — 내 답 / 정답. 정답이어도 grid는 2열 유지 (반쪽짜리) */
    .answer-pair {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--sp-2);
    }
    @media (max-width: 520px) {
      .answer-pair {
        grid-template-columns: 1fr;
      }
    }
    .answer-box {
      padding: var(--sp-3) var(--sp-4);
      border-radius: var(--rd-md);
      background: var(--card);
      border: 2px solid var(--neutral-b);
      min-width: 0;
      display: flex;
      align-items: center;
      gap: var(--sp-3);
    }
    .answer-box > .answer-text {
      flex: 1;
      min-width: 0;
    }
    .answer-label {
      display: block;
      margin-bottom: var(--sp-1);
      font-size: var(--ft-body-s);
      font-weight: 800;
      line-height: 1;
      letter-spacing: 0;
      color: var(--text-muted);
    }
    .answer-value {
      display: block;
      font-size: var(--ft-h1); /* 선택·정답 박스 동일 (두 단계 업: body-l → h2 → h1) */
      font-weight: 800;
      line-height: 1.3;
      color: var(--text-main);
      word-break: keep-all;
      overflow-wrap: anywhere;
    }
    /* O/X 표식 — 큰 글자, 배경 없음. 색은 박스 fg 상속(currentColor).
       글리프 측면 베어링으로 우측 공백 더 커 보이는 현상 보정 (음수 마진) */
    .answer-mark {
      flex: 0 0 auto;
      font-size: var(--ft-display-l); /* 32~44px */
      font-weight: 900;
      line-height: 1;
      color: currentColor;
      margin: 0 -4px 0 0;
    }
    /* 선택 박스 — 테두리 없음 (배경색만으로 정/오 구분) */
    .answer-box.user {
      position: relative;
      border-color: transparent;
      padding-right: calc(var(--sp-4) + 44px);
    }
    .answer-box.user .answer-mark {
      position: absolute;
      top: 50%;
      right: var(--sp-4);
      transform: translateY(-50%);
      margin: 0;
    }
    /* 내 답: 맞춤 — OX 퀴즈 표준 파란 O (시스템 success 토큰) */
    .answer-box.user.is-correct {
      background: var(--state-success-bg);
      color: var(--state-success-fg);
    }
    .answer-box.user.is-correct .answer-label,
    .answer-box.user.is-correct .answer-value { color: inherit; }
    /* 내 답: 틀림·시간초과 — 시스템 error(언어 로즈/딥 로즈) */
    .answer-box.user.is-wrong,
    .answer-box.user.is-timeout {
      background: var(--state-error-bg);
      color: var(--state-error-fg);
    }
    .answer-box.user.is-wrong .answer-label,
    .answer-box.user.is-wrong .answer-value,
    .answer-box.user.is-timeout .answer-label,
    .answer-box.user.is-timeout .answer-value { color: inherit; }
    /* 시간초과 — flex 베이스 그대로, 라벨만 미렌더 */
    /* 정답 박스 — success outline (흰 배경 + 성공 테두리·텍스트) */
    .answer-box.correct {
      background: var(--card);
      border-color: var(--state-success-border);
      color: var(--state-success-fg);
    }
    .answer-box.correct .answer-label { color: var(--text-muted); }
    .answer-box.correct .answer-value { color: var(--text-main); }

    /* 출처 한 줄 — 라벨 없이 텍스트만 (레거시 계승) */
    .source-text {
      font-size: var(--ft-caption);
      font-weight: 500;
      line-height: 1.4;
      color: var(--text-muted);
      word-break: keep-all;
    }

    /* 정답률 게이지 카드 */
    .rate-card {
      padding: var(--sp-3) var(--sp-4);
      border-radius: var(--rd-md);
      background: var(--neutral-a);
      display: flex;
      flex-direction: column;
      gap: var(--sp-2);
    }
    .rate-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: var(--sp-3);
    }
    .rate-label {
      font-size: var(--ft-body-s);
      font-weight: 800;
      color: var(--text-muted);
      letter-spacing: -0.01em;
    }
    .rate-value {
      font-size: var(--ft-body);
      font-weight: 900;
      color: var(--text-main);
      font-variant-numeric: tabular-nums;
    }
    .rate-track {
      height: 8px;
      background: var(--neutral-b);
      border-radius: var(--rd-pill);
      overflow: hidden;
    }
    .rate-fill {
      width: var(--rate, 0%);
      height: 100%;
      background: var(--jelttok-deep);
      border-radius: var(--rd-pill);
      transition: width 1s var(--motion-ease-natural);
    }



    /* ============================================================
       CTA — 시스템 .btn-cta + pri/sec/ghost 변형은 design.css.
       위계: 종합(pri-jm 채움) > 성적표 복귀(sec-jt 아웃라인) > 홈(ghost-jm-deep 투명)
       ============================================================ */
    .cta-section {
      display: flex;
      flex-direction: column;
      gap: var(--sp-3);
      margin-top: var(--sp-2);
      opacity: 0;
      transform: translateY(-28px);
      animation: dropDown var(--motion-duration-base) var(--motion-ease-natural) 0.40s forwards;
    }


    /* ============================================================
       위/아래 점프 fab 스택 — 메인 컨테이너 바로 옆 우측에 세로 스택.
       작은 화면(<620px): viewport 우측에 안쪽으로
       큰 화면(≥620px): 컨테이너(480) 우측 외부에 붙음
       ============================================================ */
    .fab-stack {
      position: fixed;
      right: var(--sp-4);
      bottom: calc(var(--sp-4) + 56px + var(--sp-3));
      display: flex;
      flex-direction: column;
      gap: var(--sp-3);
      z-index: 31;
    }
    @media (min-width: 620px) {
      /* 컨테이너 우측 끝(50% + 240) + 간격(sp-3) + fab 폭(56) = 50% + 308.
         right = 100% - (50% + 308) = 50% - 308px */
      .fab-stack { right: calc(50% - 308px); }
    }
    .fab {
      width: 56px;
      height: 56px;
      border-radius: var(--rd-pill);
      background: var(--card);
      color: var(--text-main);
      border: 2px solid var(--neutral-b);
      box-shadow: var(--sh-1);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: opacity 0.18s ease, visibility 0.18s ease,
                  transform 0.18s ease, filter 0.18s ease;
    }
    .fab:hover { transform: translateY(-2px); }
    .fab:active {
      transform: scale(var(--state-pressed-scale));
      filter: brightness(var(--state-pressed-brightness));
    }
    .fab.is-hidden {
      opacity: 0;
      visibility: hidden;
      transform: translateY(8px);
      pointer-events: none;
    }
    .fab svg {
      width: 24px;
      height: 24px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* 모션 — dropDown / pageExitUp keyframes는 design.css 공통 */

/* ── 젤리 글래스 (구 redesign.css 화면31 흡수 · !important 제거) ── */
.is-answer-report .header-card,
.is-answer-report .answer-list,
.is-answer-report .answer-card,
.is-answer-report .cta-section,
.is-answer-report .result-empty-header,
.is-answer-report .answer-loading-card,
.is-answer-report .answer-empty-card { position: relative; z-index: 1; }
.is-answer-report .header-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);
}
.is-answer-report .answer-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);
}
.is-answer-report .rate-card {
  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);
}
.is-answer-report .pill.pill-q { color: var(--jelmmung-deep); }
.is-answer-report .pill.stage { color: var(--jelttok-deep); }
.fab {
  background: var(--cg-surface-70);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.9);
}