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

/* ============================================================
   공통 카드 — 카드 자체는 하나, 내부 배치만 역할별로 분기
   ============================================================ */
.mission-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;
}
.mission-lead.is-question { animation-delay: 0.03s; }
.mission-lead.is-answer  { animation-delay: 0.12s; }

/* 인트로/히어로 내용 배치 — 질문/답 콘텐츠 */
.mission-lead {
  position: relative;
  overflow: hidden;
  padding: var(--sp-7) var(--sp-5) var(--sp-6);
  text-align: center;
}
.hero-kicker {
  font-size: var(--ft-body);
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-2);
}
.hero-tagline {
  margin: 0;
  font-size: var(--ft-display-l);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.04em;
  color: var(--text-main);
  word-break: keep-all;
}
.hero-tagline .accent-jm { color: var(--jelmmung-deep); }
.hero-tagline .accent-jt { color: var(--jelttok-deep); }
/* 인트로 카드용 단일 마스코트 (인문 영역) */
.hero-mascot-single {
  width: 192px;
  height: 192px;
  object-fit: contain;
  display: block;
  margin: var(--sp-5) auto 0;
}
/* 히어로 카드용 듀오 마스코트 (젤뭉 + 젤똑) */
.hero-mascots {
  position: relative;
  width: 200px;
  height: 160px;
  margin: var(--sp-5) auto 0;
}
.hero-mascots img {
  position: absolute;
  width: 128px;
  height: 128px;
  object-fit: contain;
}
.hero-mascots img.jm { left: 0; bottom: 0; transform: rotate(-6deg); }
.hero-mascots img.jt { right: 0; top: 0; transform: rotate(6deg); }
.hero-sub {
  margin-top: var(--sp-5);
  font-size: var(--ft-body-l);
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-muted);
  word-break: keep-all;
}

/* ============================================================
   작은 질문 카드 (3장) — 01·02·03 세 챕터, 컬러로 차별
   ============================================================ */
.chapter-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.mission-chapter {
  position: relative;
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  overflow: hidden;
}
.mission-chapter.c1 { animation-delay: 0.18s; --chap-main: var(--c-politics-main); --chap-deep: var(--c-politics-deep); --chap-soft: var(--c-politics-soft); }
.mission-chapter.c2 { animation-delay: 0.28s; --chap-main: var(--c-history-main);  --chap-deep: var(--c-history-deep);  --chap-soft: var(--c-history-soft); }
.mission-chapter.c3 { animation-delay: 0.38s; --chap-main: var(--c-digital-main); --chap-deep: var(--c-digital-deep); --chap-soft: var(--c-digital-soft); }

/* 타이틀 — "작은 질문 1 · 지식의 상식" 점이 있는 줄 */
.chapter-num {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--ft-h3);
  font-weight: 800;
  color: var(--chap-deep);
  letter-spacing: -0.01em;
}
.chapter-num-pip {
  display: inline-block;
  width: var(--dot-md);
  height: var(--dot-md);
  border-radius: var(--rd-pill);
  background: var(--chap-deep);
}
/* 헤드 카피 — 본 카드의 큰 글씨 질문 */
.chapter-title {
  margin: 0;
  font-size: var(--ft-display-s);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--text-main);
  word-break: keep-all;
}
.chapter-question-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.chapter-question-list li {
  font-size: var(--ft-body);
  font-weight: 600;
  line-height: 1.6;
  color: var(--text-muted);
  word-break: keep-all;
  padding-left: var(--sp-3);
  position: relative;
}
.chapter-question-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: var(--dot-sm);
  height: var(--dot-sm);
  border-radius: var(--rd-pill);
  background: var(--chap-main);
}
.chapter-anchor {
  margin-top: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--rd-md);
  background: var(--chap-soft);
  color: var(--chap-deep);
  font-size: var(--ft-body);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  word-break: keep-all;
}
.chapter-anchor-label {
  display: block;
  font-size: var(--ft-caption);
  font-weight: 800;
  letter-spacing: 0;
  margin-bottom: var(--sp-1);
  color: var(--chap-deep);
}
.chapter-bridge {
  margin: var(--sp-2) 0 0;
  font-size: var(--ft-body-s);
  font-weight: 700;
  line-height: 1.55;
  color: var(--text-main);
  word-break: keep-all;
}
.chapter-bridge .strong {
  color: var(--chap-deep);
  font-weight: 900;
}

/* ============================================================
   브랜드 내용 — 3번 작은 질문 카드 직후, '젤방' 대따 큰 글자 + 태그라인
   ============================================================ */
.mission-brand {
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  animation-delay: 0.45s;
}
.brand-big {
  font-size: var(--ft-stat-xl);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: 0;
}
.brand-big .accent-jm { color: var(--jelmmung-deep); }
.brand-big .accent-jt { color: var(--jelttok-deep); }
.brand-body {
  margin: 0;
  font-size: var(--ft-body-l);
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-main);
  letter-spacing: -0.01em;
}

/* ============================================================
   CTA 섹션
   ============================================================ */
.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.55s forwards;
}
.cta-headline {
  font-size: var(--ft-h2);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text-main);
  text-align: center;
  word-break: keep-all;
  margin-bottom: var(--sp-1);
}
.cta-headline .accent {
  color: var(--jelmmung-deep);
}

/* ============================================================
   공통 모션 — design.css의 dropDown / pageExitUp 그대로 사용
   ============================================================ */

/* ── 젤리 글래스 (구 redesign.css 화면41 흡수 · !important 제거) ── */
.is-mission .mission-card,
.is-mission .chapter-stack,
.is-mission .cta-section { position: relative; z-index: 1; }
.is-mission .mission-lead,
.is-mission .mission-brand {
  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-mission .mission-chapter {
  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);
}