/* ==================================================================
   젤방 디자인 시스템 — 공통 토큰 (Single Source of Truth)
   원전: D:\LaFF\Zelbang\art\design_system\zelbang_design_system.html
   규칙: 페이지별 :root 재선언 금지. 페이지 전용 토큰만 페이지 내부 :root에.
   ================================================================== */
:root {
  /* ---------- 텍스트 ---------- */
  --text-main:    #2B3643;
  --text-muted:   #3E4C5A;
  --text-inverse: #ffffff;
  --card:         #ffffff;

  /* ---------- 캐릭터 브랜드 ---------- */
  --jelmmung:      #FF6D6D;
  --jelttok:       #80F4AB;
  --jelmmung-deep: #d94040;
  --jelttok-deep:  #2da06b;
  --jelmmung-soft: color-mix(in srgb, var(--jelmmung) 50%, var(--card) 50%);
  --jelttok-soft:  color-mix(in srgb, var(--jelttok) 50%, var(--card) 50%);

  /* ---------- 10영역 팔레트 ---------- */
  /* 생존 */
  --c-life-main:     #F5B074;   --c-life-deep:     #9A4C0E;   /* 28° 애프리콧 / 번트 오렌지 */
  --c-lang-main:     #F0A3C0;   --c-lang-deep:     #B03366;   /* 332° 로즈 / 딥 로즈 */
  /* 제도 */
  --c-politics-main: #9BA8E2;   --c-politics-deep: #3A4CB0;   /* 232° 페리윙클 / 인디고 */
  --c-law-main:      #D89BC2;   --c-law-deep:      #9A2A78;   /* 322° 더스티 플럼 / 딥 플럼 */
  /* 맥락 */
  --c-history-main:  #C6D580;   --c-history-deep:  #56721A;   /* 82° 소프트 라임 / 다크 올리브 */
  --c-human-main:    #CFA6DE;   --c-human-deep:    #82369C;   /* 288° 라벤더 / 마젠타 퍼플 */
  --c-econ-main:     #F4C842;   --c-econ-deep:     #84630E;   /* 46° 골드 / 다크 앰버 */
  --c-science-main:  #82D5D1;   --c-science-deep:  #0F787B;   /* 180° 아쿠아 / 틸 */
  /* 시의 */
  --c-news-main:     #8DC9E6;   --c-news-deep:     #1565A4;   /* 206° 라이트 스카이 / 스카이 블루 */
  --c-digital-main:  #B5A3EA;   --c-digital-deep:  #643BB4;   /* 265° 소프트 바이올렛 / 바이올렛 */

  --c-life-soft:     color-mix(in srgb, var(--c-life-main) 50%, var(--card) 50%);
  --c-lang-soft:     color-mix(in srgb, var(--c-lang-main) 50%, var(--card) 50%);
  --c-politics-soft: color-mix(in srgb, var(--c-politics-main) 50%, var(--card) 50%);
  --c-law-soft:      color-mix(in srgb, var(--c-law-main) 50%, var(--card) 50%);
  --c-history-soft:  color-mix(in srgb, var(--c-history-main) 50%, var(--card) 50%);
  --c-human-soft:    color-mix(in srgb, var(--c-human-main) 50%, var(--card) 50%);
  --c-econ-soft:     color-mix(in srgb, var(--c-econ-main) 50%, var(--card) 50%);
  --c-science-soft:  color-mix(in srgb, var(--c-science-main) 50%, var(--card) 50%);
  --c-news-soft:     color-mix(in srgb, var(--c-news-main) 50%, var(--card) 50%);
  --c-digital-soft:  color-mix(in srgb, var(--c-digital-main) 50%, var(--card) 50%);

  /* ---------- 타이포그래피 ---------- */
  --ft-display-xl: clamp(3.5rem, 3rem + 2.2vw, 4.75rem);   /* 56 → 76px — 홈 히어로 전용 */
  --ft-display-l:  clamp(2rem, 1.7rem + 1.4vw, 2.75rem);   /* 32 → 44px */
  --ft-display-s:  clamp(1.5rem, 1.3rem + 1vw, 2rem);      /* 24 → 32px */
  --ft-h1:        1.25rem;                                  /* 20px — 페이지 타이틀 */
  --ft-h2:        1.125rem;                                 /* 18px — 섹션 타이틀 */
  --ft-h3:        1rem;                                     /* 16px — 서브섹션 */
  --ft-body-l:    1rem;                                     /* 16px — 퀴즈 발문/중요 본문 */
  --ft-body:      0.9375rem;                                /* 15px — 일반 본문/4지선다 */
  --ft-body-s:    0.875rem;                                 /* 14px — 보조 설명 */
  --ft-label:     0.9375rem;                                /* 15px — 버튼/알약/태그 */
  --ft-caption:   0.75rem;                                  /* 12px — 주석/헬퍼 */
  --ft-stat-xl:   clamp(5.4rem, 14vw, 6.4rem);             /* 86 → 102px — 리포트 점수 전용 */
  --ft-stat-l:    clamp(2rem, 1.6rem + 1.9vw, 3rem);       /* 32 → 48px */
  --ft-stat:      clamp(1.25rem, 1.14rem + 0.5vw, 1.5rem); /* 20 → 24px */
  --fw-label:     700;

  /* ---------- 여백 ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 48px;
  --sp-9: 64px;

  /* ---------- 둥글기 축 ---------- */
  /* 규칙: 버튼 = sm(10) · 카드/컨테이너 = md(30) · 배지/알약 = pill(999) */
  --rd-sm:   10px;
  --rd-md:   30px;
  --rd-pill: 999px;

  /* ---------- 점 크기 ---------- */
  --dot-sm: 6px;   /* 문장 앞 작은 불릿 */
  --dot-md: 10px;  /* 라벨 앞 강조 점 */

  /* ---------- 젤리 마크 ---------- */
  --jelly-foot-opacity: 0.82;

  /* ---------- 그림자 스케일 ---------- */
  --sh-1: 0 6px  18px rgba(43, 54, 67, 0.08);
  --sh-2: 0 16px 40px rgba(43, 54, 67, 0.12);
  --sh-fallback: 0 12px 32px rgba(43, 54, 67, 0.12);
  --sh-gate: 0 18px 44px rgba(43, 54, 67, 0.16);
  --sh-modal: 0 28px 70px rgba(43, 54, 67, 0.24);

  /* ---------- 중립 레이어 ---------- */
  --border-subtle: var(--bg-neutral-b);
  --scrim: rgba(43, 54, 67, 0.75);

  /* ---------- Login modal ---------- */
  --modal-z: 80;
  --modal-backdrop-padding: var(--sp-5);
  --modal-login-width: 360px;
  --modal-login-padding: var(--sp-5);
  --modal-login-radius: var(--rd-md);
  --modal-login-shadow: var(--sh-2);
  --modal-login-enter-y: 20px;
  --modal-login-close-size: 32px;
  --modal-login-close-offset: var(--sp-3);
  --modal-login-close-font-size: 1.25rem;
  --modal-login-mascot-size: 96px;
  --modal-login-mascot-gap: var(--sp-3);
  --modal-login-title-size: var(--ft-display-s);
  --modal-login-title-line: 1.2;
  --modal-login-title-tracking: -0.03em;
  --modal-login-sub-gap: 1px;
  --modal-login-sub-size: var(--ft-body-s);
  --modal-login-sub-line: 1.45;
  --login-benefit-group-gap: var(--sp-2);
  --login-benefit-gap: var(--sp-2);
  --login-benefit-height: 26px;
  --login-benefit-pad-x: var(--sp-3);
  --login-benefit-radius: var(--rd-pill);
  --login-benefit-font-size: var(--ft-caption);
  --login-benefit-font-weight: 800;
  --modal-policy-note-gap: var(--sp-3);
  --modal-policy-note-size: var(--ft-caption);
  --modal-policy-note-weight: 700;
  --modal-policy-note-line: 1.45;
  --modal-policy-link-gap: var(--sp-1);
  --modal-policy-link-underline-offset: 2px;
  --sso-btn-height: 52px;
  --sso-btn-pad-x: var(--sp-4);
  --sso-btn-radius: var(--rd-sm);
  --sso-btn-gap: var(--sp-3);
  --sso-btn-font-size: var(--ft-h2);
  --sso-btn-font-weight: 800;
  --sso-btn-tracking: -0.01em;
  --sso-btn-hover-y: -2px;
  --sso-kakao-gap-top: var(--sp-7);
  --sso-google-gap-top: var(--sp-2);
  --sso-icon-size: 20px;
  --sso-kakao-bg: #FEE500;
  --sso-brand-ink: #1A1A1A;
  --sso-google-border: #DADCE0;

  /* ---------- 배경 그래디언트 ---------- */
  --bg-jelmmung:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,0.15), transparent 55%),
    linear-gradient(180deg, #ff7a83 0%, #ff8890 48%, #ffb0b5 100%);
  --bg-jelttok:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,0.15), transparent 55%),
    linear-gradient(180deg, #86ddb0 0%, #98e3bc 46%, #c9f0db 100%);
  --bg-overall-report:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,0.15), transparent 55%),
    linear-gradient(135deg,
      #ff8890 0%,
      #ffb0b5 28%,
      #e6dac4 50%,
      #c9f0db 72%,
      #98e3bc 100%
    );
  --bg-neutral-a: #eef0f3;
  --bg-neutral-b: #d5d9e0;

  /* ---------- 페이지 컨테이너 ---------- */
  --page-shell-pad-x: var(--sp-5);
  --page-shell-pad-y: var(--sp-5);
  --page-shell-gap: var(--sp-4);

  /* ---------- 상태 토큰 ---------- */
  /* disabled — bg/border는 neutral 별칭, fg만 별도 hex (비활성 신호용 가운데 톤) */
  --state-disabled-bg:     var(--bg-neutral-a);
  --state-disabled-fg:     #9aa0a6;
  --state-disabled-border: var(--bg-neutral-b);
  /* pressed */
  --state-pressed-scale:      0.97;
  --state-pressed-brightness: 0.92;
  /* error — 언어(딥 로즈) */
  --state-error-bg:     var(--c-lang-main);
  --state-error-fg:     var(--c-lang-deep);
  --state-error-border: var(--c-lang-deep);
  /* success — 뉴스(정답 O 표준 파랑) */
  --state-success-bg:     var(--c-news-main);
  --state-success-fg:     var(--c-news-deep);
  --state-success-border: var(--c-news-deep);
  /* warning — 경제(다크 앰버) */
  --state-warning-bg:     var(--c-econ-main);
  --state-warning-fg:     var(--c-econ-deep);
  --state-warning-border: var(--c-econ-deep);
  /* info — 디지털(바이올렛) */
  --state-info-bg:     var(--c-digital-main);
  --state-info-fg:     var(--c-digital-deep);
  --state-info-border: var(--c-digital-deep);

  /* ---------- 상태 아이콘 ---------- */
  --icon-error:   "●";   /* U+25CF */
  --icon-success: "✓";   /* U+2713 */
  --icon-warning: "⚠";   /* U+26A0 */
  --icon-info:    "ⓘ";   /* U+24D8 */

  /* ---------- 모션 토큰 ---------- */
  --motion-duration-fast: 0.2s;
  --motion-duration-base: 0.3s;
  --motion-duration-slow: 1.2s;
  --motion-ease-natural: cubic-bezier(0.22, 0.61, 0.36, 1);
  --motion-ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --motion-ease-exit:    cubic-bezier(0.55, 0, 0.85, 0.25);
  --motion-transition:   all var(--motion-duration-fast) var(--motion-ease-natural);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 점 원자 ---------- */
.dot,
.dot-sm,
.dot-md {
  display: inline-block;
  border-radius: var(--rd-pill);
  background: currentColor;
  flex: none;
}

.dot,
.dot-sm {
  width: var(--dot-sm);
  height: var(--dot-sm);
}

.dot-md {
  width: var(--dot-md);
  height: var(--dot-md);
}

/* ==================================================================
   젤리 마크 — 정답 개수/장식용 영역 실루엣
   몸통은 main, 하단 굴곡은 deep을 사용한다.
   ================================================================== */
.jelly-mark {
  --jelly-main: var(--rg-main, var(--jelmmung));
  --jelly-deep: var(--rg-deep, var(--jelmmung-deep));
  width: 30px;
  height: 30px;
  flex: none;
  display: block;
  overflow: visible;
}
.jelly-mark-sm {
  width: 22px;
  height: 22px;
}
.jelly-mark-md {
  width: 30px;
  height: 30px;
}
.jelly-mark-lg {
  width: 40px;
  height: 40px;
}
.jelly-mark-body {
  fill: var(--jelly-main);
}
.jelly-mark-foot {
  fill: var(--jelly-deep);
  opacity: var(--jelly-foot-opacity);
}

/* ==================================================================
   CTA 버튼 — 미디엄 .btn-cta(62px) + .character(84px 캐릭터 컨테이너 직배치)
   원전: art/design_system/zelbang_design_system.html (.btn-demo + .cta + .character)
   변형: pri-jm/jt(채움) · sec-jm/jt(흰 배경 아웃라인) · ghost/ghost-jt/ghost-jm(투명 3종)
   ================================================================== */
.btn-cta {
  width: 100%;
  height: 62px;
  padding: 0 var(--sp-5);
  border-radius: var(--rd-sm);
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  text-decoration: none;
  font-family: inherit;
  font-size: var(--ft-display-s);
  font-weight: 900;
  letter-spacing: -0.03em;
  cursor: pointer;
  transition: var(--motion-transition);
}
.btn-cta:hover  { transform: translateY(-2px); }
.btn-cta:active {
  transform: scale(var(--state-pressed-scale));
  filter: brightness(var(--state-pressed-brightness));
}

/* character — 84px, 캐릭터(젤뭉/젤똑) 그래디언트 컨테이너 직배치.
   카드 없이 자체 볼륨이 큰 컨텍스트라 gap 키워서 아이콘+텍스트 시원하게. */
.btn-cta.character {
  height: 84px;
  gap: var(--sp-3);
}
.btn-cta-icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex: none;
}

/* primary — 채움 (그래디언트보다 확 진한 캐릭터 딥 배경 + 흰 텍스트) */
.btn-cta.pri-jm { background: var(--jelmmung-deep); color: var(--text-inverse); }
.btn-cta.pri-jt { background: var(--jelttok-deep);  color: var(--text-inverse); }
/* secondary — 아웃라인 (흰 배경 + 캐릭터 딥 테두리·텍스트) */
.btn-cta.sec-jm { background: var(--card); color: var(--jelmmung-deep); border: 2px solid var(--jelmmung-deep); }
.btn-cta.sec-jt { background: var(--card); color: var(--jelttok-deep);  border: 2px solid var(--jelttok-deep); }
/* ghost — 투명 + 테두리 4종 (ghost-jm 흰 · ghost-jt 검정 · ghost-jm-deep 젤뭉 딥 · ghost-jt-deep 젤똑 딥) */
.btn-cta.ghost-jm      { background: transparent; color: var(--text-inverse);  border: 2px solid var(--text-inverse); }
.btn-cta.ghost-jt      { background: transparent; color: var(--text-main);     border: 2px solid var(--text-main); }
.btn-cta.ghost-jm-deep { background: transparent; color: var(--jelmmung-deep); border: 2px solid var(--jelmmung-deep); }
.btn-cta.ghost-jt-deep { background: transparent; color: var(--jelttok-deep);  border: 2px solid var(--jelttok-deep); }

/* ==================================================================
   페이지 컨테이너 — 공통 세로 스택 + 안전영역 패딩
   배경은 modifier 클래스로 분기
   ================================================================== */
.page-shell {
  position: relative;
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding:
    var(--page-shell-pad-y)
    var(--page-shell-pad-x)
    calc(var(--page-shell-pad-y) + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: var(--page-shell-gap);
  border-radius: var(--rd-md);
  overflow-x: hidden;
}

.page-shell.is-jelmmung {
  background: var(--bg-jelmmung);
}

.page-shell.is-jelttok {
  background: var(--bg-jelttok);
}

.page-shell.is-overall-report {
  background: var(--bg-overall-report);
}

/* ==================================================================
   정책 페이지 — 약관/개인정보 처리방침 공통 레이아웃
   ================================================================== */
.policy-shell {
  --page-shell-gap: var(--sp-4);
  --policy-hero-min-height: 300px;
  --policy-accent: var(--jelmmung-deep);
  --policy-main: var(--jelmmung);
  --policy-soft: var(--jelmmung-soft);
  padding: var(--sp-5);
  background: var(--policy-main);
}

.policy-shell.is-jelmmung {
  --policy-accent: var(--jelmmung-deep);
  --policy-main: var(--jelmmung);
  --policy-soft: var(--jelmmung-soft);
}

.policy-shell.is-jelttok {
  --policy-accent: var(--jelttok-deep);
  --policy-main: var(--jelttok);
  --policy-soft: var(--jelttok-soft);
}

.policy-shell-tall-hero {
  --policy-hero-min-height: 336px;
}

.policy-card {
  width: 100%;
  border-radius: var(--rd-md);
  background: var(--card);
  padding: var(--sp-5);
  opacity: 0;
  transform: translateY(-28px);
  animation: dropDown var(--motion-duration-base) var(--motion-ease-natural) forwards;
}

.policy-shell > .policy-hero {
  width: 100%;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  opacity: 1;
  transform: none;
  animation: none;
}

.policy-hero-inner {
  position: relative;
  min-height: var(--policy-hero-min-height);
  overflow: hidden;
  border-radius: var(--rd-md);
  background: linear-gradient(180deg, var(--policy-soft) 0%, var(--card) 100%);
  padding: var(--sp-6) var(--sp-5) calc(var(--sp-8) + var(--sp-6));
  text-align: center;
}

.policy-hero-visual {
  position: absolute;
  right: calc(var(--sp-4) * -1);
  bottom: calc(var(--sp-4) * -1);
  width: 142px;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.policy-kicker {
  margin: 0 0 var(--sp-1);
  color: var(--policy-accent);
  font-size: var(--ft-h2);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.policy-title {
  margin: 0;
  color: var(--text-main);
  font-size: var(--ft-display-l);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.policy-date {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  border: 2px solid var(--policy-accent);
  border-radius: var(--rd-pill);
  background: var(--card);
  padding: var(--sp-1) var(--sp-3);
}

.policy-date-label {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--ft-caption);
  font-weight: 900;
  line-height: 1.2;
}

.policy-date-text {
  margin: 0;
  color: var(--text-main);
  font-size: var(--ft-caption);
  font-weight: var(--fw-label);
}

.policy-sub {
  margin: var(--sp-4) 0 0;
  color: var(--text-main);
  font-size: var(--ft-body);
  font-weight: var(--fw-label);
  line-height: 1.55;
  word-break: keep-all;
}

.policy-summary {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--policy-soft);
}

.policy-summary-head {
  padding: var(--sp-2) var(--sp-2) var(--sp-1);
}

.policy-summary-title {
  margin: 0;
  color: var(--text-main);
  font-size: var(--ft-h1);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.policy-summary-item {
  border-radius: var(--rd-md);
  background: var(--card);
  padding: var(--sp-4);
}

.policy-summary-label {
  display: block;
  margin-bottom: var(--sp-1);
  color: var(--policy-accent);
  font-size: var(--ft-caption);
  font-weight: 900;
  line-height: 1.2;
}

.policy-summary-text {
  margin: 0;
  color: var(--text-main);
  font-size: var(--ft-body);
  font-weight: var(--fw-label);
  line-height: 1.45;
  word-break: keep-all;
}

.policy-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.policy-section h2 {
  margin: 0;
  color: var(--text-main);
  font-size: var(--ft-h1);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.policy-section h2::before {
  content: "";
  display: inline-block;
  width: var(--dot-md);
  height: var(--dot-md);
  margin-right: var(--sp-2);
  border-radius: var(--rd-pill);
  background: var(--policy-accent);
  vertical-align: 0.15em;
}

.policy-section h3 {
  margin: var(--sp-2) 0 0;
  color: var(--text-main);
  font-size: var(--ft-h2);
  font-weight: var(--fw-label);
}

.policy-section p,
.policy-section li {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--ft-body);
  font-weight: 500;
  line-height: 1.65;
  word-break: keep-all;
}

.policy-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin: 0;
  padding-left: 1.1em;
}

.policy-section p strong {
  color: var(--text-main);
  font-weight: var(--fw-label);
}

.policy-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  /* page-shell gap 16px + 4px = card-to-button 20px */
  margin-top: var(--sp-1);
}

@media (prefers-reduced-motion: reduce) {
  .policy-card {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ==================================================================
   페이지 진입·퇴장 모션 — 30·31 공통 추출
   dropDown: 카드 위에서 살짝 떨어지며 페이드 인
   pageExitUp: 화면 위로 빠지며 페이드 아웃 (페이지 이동 직전)
   ================================================================== */
@keyframes dropDown {
  from { opacity: 0; transform: translateY(-28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pageExitUp {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-48px); }
}

/* ==================================================================
   비로그인 예시 화면 — demo banner / example pill / login CTA
   원전: art/design_system/zelbang_design_system.html (분자 15)
   ================================================================== */
.demo-banner {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
  padding: var(--sp-4);
  border-radius: var(--rd-md);
  background: var(--jelmmung-soft);
  color: var(--text-main);
  font-size: var(--ft-body-s);
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  opacity: 0;
  transform: translateY(-28px);
  animation: dropDown var(--motion-duration-base) var(--motion-ease-natural) 0.09s forwards;
}
.demo-banner-icon {
  width: 104px;
  height: 104px;
  flex: none;
  object-fit: contain;
  justify-self: center;
}
.demo-banner-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  justify-self: center;
}
.demo-banner-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-size: var(--ft-body);
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}
.demo-banner-body {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--ft-body-s);
  line-height: 1.45;
  color: var(--text-muted);
  font-weight: 700;
  word-break: keep-all;
}
.demo-banner-chip,
.example-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: 30px;
  padding: 1px var(--sp-3) 0;
  border-radius: var(--rd-pill);
  background: var(--text-main);
  color: var(--text-inverse);
  font-size: var(--ft-label);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
body:not(.is-demo) .example-pill,
body:not(.is-demo) .demo-banner,
body:not(.is-demo) .demo-cta {
  display: none;
}
body.is-demo .share-section {
  display: none;
}

.demo-cta {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--sp-5);
  border-radius: var(--rd-md);
  background: var(--card);
  box-shadow: var(--sh-2);
  text-align: center;
  align-items: center;
  opacity: 0;
  transform: translateY(-28px);
  animation: dropDown var(--motion-duration-base) var(--motion-ease-natural) 0.30s forwards;
}
.demo-cta-mascot {
  width: 128px;
  height: 128px;
  object-fit: contain;
  margin-bottom: var(--sp-3);
}
.demo-cta-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  margin-top: var(--sp-1);
  word-break: keep-all;
}
.demo-cta-kicker {
  color: var(--text-main);
  font-size: var(--ft-h1);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.demo-cta-main {
  color: var(--text-muted);
  font-size: var(--ft-body-s);
  font-weight: 700;
  line-height: 1.45;
}
.demo-cta .login-benefits {
  margin-top: var(--sp-2);
}
.demo-cta-warning {
  margin: var(--sp-6) 0 var(--sp-1);
  color: var(--text-main);
  font-size: var(--ft-body-s);
  font-weight: 800;
  line-height: 1.45;
  word-break: keep-all;
}
.demo-cta .btn-cta {
  width: 100%;
  margin-top: 0;
}

/* ==================================================================
   CTA 내부 텍스트/아이콘 조합 — 결과 페이지 공통
   ================================================================== */
/* ==================================================================
   결과 없음 카드 — 30 성적표 / 31 답지 공통 빈 상태
   원전: art/design_system/zelbang_design_system.html (분자 17)
   ================================================================== */
.result-empty-card {
  display: none;
  padding: var(--sp-6) var(--sp-5);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--sp-3);
  border-radius: var(--rd-md);
  background: var(--card);
  opacity: 0;
  transform: translateY(-28px);
  animation: dropDown var(--motion-duration-base) var(--motion-ease-natural) forwards;
}
.result-empty-icon {
  width: 96px;
  height: 96px;
  object-fit: contain;
}
.result-empty-title {
  margin: 0;
  font-size: var(--ft-display-s);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.04em;
  color: var(--text-main);
  word-break: keep-all;
}
.result-empty-copy {
  margin: 0;
  font-size: var(--ft-body);
  font-weight: 700;
  line-height: 1.55;
  color: var(--text-muted);
  word-break: keep-all;
}
.result-empty-title + .result-empty-copy {
  margin-top: calc(var(--sp-2) * -1);
}
.result-empty-card .btn-cta {
  width: 100%;
  margin-top: var(--sp-2);
}

.cta-copy {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}
.cta-helper-inside {
  font-size: var(--ft-caption);
  font-weight: 700;
  color: var(--text-inverse);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.cta-copy-main {
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
}
.sample-sub-cta .cta-helper-inside {
  color: currentColor;
  opacity: 0.78;
}
.overall-cta-32 {
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,0.15), transparent 55%),
    linear-gradient(135deg, #ff8890 0%, #ffb0b5 28%, #e6dac4 50%, #c9f0db 72%, #98e3bc 100%);
  color: var(--text-main);
}
.overall-cta-32 .cta-helper-inside {
  /* 킥커 컬러는 헤드(.cta-copy-main)와 동일하게 부모 색상(--text-main) 상속 */
  color: currentColor;
}
.cta-icon-stack {
  position: relative;
  width: 68px;
  height: 56px;
  flex: none;
}
.cta-icon-stack img {
  position: absolute;
  width: 44px;
  height: 44px;
  object-fit: contain;
}
.cta-icon-stack img.jm { left: 0; top: 0; transform: rotate(-6deg); }
.cta-icon-stack img.jt { right: 0; bottom: 0; transform: rotate(6deg); }

/* ==================================================================
   공유 보조 CTA — 30/32 공통
   ================================================================== */
.share-btn {
  height: 42px;
  justify-content: center;
  padding: 0 var(--sp-5);
}
.share-btn-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-width: 0;
}
.share-btn-icon {
  width: 20px;
  height: 20px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--jelttok-deep);
}
.share-btn-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}
.share-btn-title {
  font-size: var(--ft-h2);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--jelttok-deep);
  line-height: 1;
}

/* ==================================================================
   로그인 게이트 — 로그인 모달 및 온보딩 폼
   ================================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--modal-z);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--modal-backdrop-padding);
  background: var(--scrim);
}
.modal-backdrop.is-active {
  display: flex;
}

.modal-login {
  position: relative;
  width: 100%;
  max-width: var(--modal-login-width);
  padding: var(--modal-login-padding);
  border-radius: var(--modal-login-radius);
  background: var(--card);
  box-shadow: var(--modal-login-shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
  transform: translateY(var(--modal-login-enter-y));
  transition: transform var(--motion-duration-base) var(--motion-ease-natural);
}
.modal-backdrop.is-active .modal-login {
  transform: translateY(0);
}

.modal-login-close {
  position: absolute;
  top: var(--modal-login-close-offset);
  right: var(--modal-login-close-offset);
  width: var(--modal-login-close-size);
  height: var(--modal-login-close-size);
  border: 0;
  border-radius: var(--rd-pill);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--modal-login-close-font-size);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--motion-transition);
}
.modal-login-close:hover {
  background: var(--bg-neutral-a);
}

.modal-login-mascots {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-bottom: var(--modal-login-mascot-gap);
}
.modal-login-mascots img {
  width: var(--modal-login-mascot-size);
  height: var(--modal-login-mascot-size);
  object-fit: contain;
}
.modal-login-title {
  margin: 0;
  font-size: var(--modal-login-title-size);
  font-weight: 900;
  line-height: var(--modal-login-title-line);
  color: var(--text-main);
  text-align: center;
  letter-spacing: var(--modal-login-title-tracking);
  word-break: keep-all;
}
.modal-login-sub {
  margin: var(--modal-login-sub-gap) 0 0;
  font-size: var(--modal-login-sub-size);
  color: var(--text-muted);
  text-align: center;
  line-height: var(--modal-login-sub-line);
  word-break: keep-all;
}
.login-benefits {
  width: 100%;
  display: block;
}
.modal-login .login-benefits {
  margin-top: var(--login-benefit-group-gap);
}
.login-benefits-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--login-benefit-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.login-benefits-list li {
  display: inline-flex;
  align-items: center;
  min-height: var(--login-benefit-height);
  padding: 0 var(--login-benefit-pad-x);
  border-radius: var(--login-benefit-radius);
  background: var(--card);
  font-size: var(--login-benefit-font-size);
  font-weight: var(--login-benefit-font-weight);
  line-height: 1;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px currentColor;
}
.login-benefits-list li:nth-child(1) { color: var(--c-politics-deep); }
.login-benefits-list li:nth-child(2) { color: var(--c-history-deep); }
.login-benefits-list li:nth-child(3) { color: var(--c-digital-deep); }

.modal-policy-note {
  margin: var(--modal-policy-note-gap) 0 0;
  color: var(--text-muted);
  font-size: var(--modal-policy-note-size);
  font-weight: var(--modal-policy-note-weight);
  line-height: var(--modal-policy-note-line);
  word-break: keep-all;
}
.modal-policy-links {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--modal-policy-link-gap);
  white-space: nowrap;
}
.modal-policy-link {
  color: var(--text-main);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: var(--modal-policy-link-underline-offset);
}

.sso-btn {
  width: 100%;
  height: var(--sso-btn-height);
  padding: 0 var(--sso-btn-pad-x);
  border-radius: var(--sso-btn-radius);
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sso-btn-gap);
  font: inherit;
  font-size: var(--sso-btn-font-size);
  font-weight: var(--sso-btn-font-weight);
  letter-spacing: var(--sso-btn-tracking);
  cursor: pointer;
  transition: var(--motion-transition);
}
.sso-btn:hover {
  transform: translateY(var(--sso-btn-hover-y));
}
.sso-btn:active {
  transform: scale(var(--state-pressed-scale));
}
.sso-btn.kakao {
  margin-top: var(--sso-kakao-gap-top);
  background: var(--sso-kakao-bg);
  color: var(--sso-brand-ink);
}
.sso-btn.google {
  margin-top: var(--sso-google-gap-top);
  background: var(--card);
  color: var(--sso-brand-ink);
  border: 1px solid var(--sso-google-border);
}
.sso-icon {
  width: var(--sso-icon-size);
  height: var(--sso-icon-size);
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sso-icon svg {
  width: 100%; height: 100%;
}

.onboarding-textarea {
  width: 100%; 
  height: 90px; 
  padding: var(--sp-3); 
  border: 2px solid var(--state-disabled-border); 
  border-radius: var(--rd-sm); 
  font-family: inherit; 
  font-size: var(--ft-body); 
  color: var(--text-main); 
  outline: none; 
  resize: none;
  transition: border-color var(--motion-duration-fast) var(--motion-ease-natural);
}
.onboarding-textarea:focus {
  border-color: var(--jelttok-deep);
}

/* ==================================================================
   31 답지 페이드 게이트 — 비로그인 상태에서 3번 이후 답지 잠금
   ================================================================== */
body.is-demo .answer-list.is-gated .answer-card:nth-of-type(n + 3) {
  position: relative;
  overflow: hidden;
}
body.is-demo .answer-list.is-gated .answer-card:nth-of-type(n + 3) .answer-card-content {
  filter: blur(7px);
  pointer-events: none;
  user-select: none;
}
body.is-demo .answer-list.is-gated .answer-card:nth-of-type(n + 4) .answer-card-content {
  filter: blur(9px);
}
.answer-gate-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--gate-overlay-height, 450px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  background: transparent;
  text-align: center;
  z-index: 5;
}
.answer-gate-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 25%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 25%, #000 100%);
  pointer-events: none;
  z-index: 0;
}
body:not(.is-demo) .answer-gate-overlay {
  display: none;
}
.answer-gate-box {
  position: relative;
  z-index: 1;
  width: min(100%, 380px);
  padding: var(--sp-5);
  border-radius: var(--rd-md);
  background: var(--card);
  box-shadow: var(--sh-gate);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.answer-gate-mascot {
  width: 128px;
  height: 128px;
  object-fit: contain;
  margin-bottom: var(--sp-3);
}
.answer-gate-text-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  margin-top: var(--sp-1);
}
.answer-gate-title {
  margin: 0;
  font-size: var(--ft-h1);
  font-weight: 900;
  line-height: 1.25;
  color: var(--text-main);
  letter-spacing: -0.02em;
  word-break: keep-all;
}
.answer-gate-copy {
  margin: 0;
  font-size: var(--ft-body-s);
  font-weight: 700;
  line-height: 1.45;
  color: var(--text-muted);
  word-break: keep-all;
}
.answer-gate-box .btn-cta {
  width: 100%;
  margin-top: 0;
}
.answer-gate-box .login-benefits {
  margin-top: var(--sp-2);
}
.answer-gate-warning {
  margin: var(--sp-6) 0 var(--sp-1);
  color: var(--text-main);
  font-size: var(--ft-body-s);
  font-weight: 800;
  line-height: 1.45;
  word-break: keep-all;
}

/* ==================================================================
   개발용 플로팅 토글 — 화면 구석 검수 UI
   ================================================================== */
.dev-toggle-trigger {
  position: fixed;
  right: var(--sp-3);
  bottom: var(--sp-3);
  z-index: 40;
  height: 36px;
  padding: 0 var(--sp-4);
  border: 0;
  border-radius: var(--rd-pill);
  background: var(--text-main);
  color: var(--text-inverse);
  font-family: inherit;
  font-size: var(--ft-caption);
  font-weight: var(--fw-label);
  letter-spacing: -0.01em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: var(--motion-transition);
}
.dev-toggle-trigger:hover { transform: translateY(-1px); opacity: 0.9; }
.dev-toggle {
  position: fixed;
  right: var(--sp-3);
  bottom: var(--sp-3);
  z-index: 39;
  width: auto;
  max-width: min(calc(100vw - var(--sp-6)), 300px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--rd-md);
  background: var(--card);
  border: 1px solid var(--text-muted);
  transform-origin: bottom right;
  opacity: 1;
  transform: scale(1);
  transition: opacity var(--motion-duration-fast) var(--motion-ease-natural), transform var(--motion-duration-fast) var(--motion-ease-natural);
}
.dev-toggle.is-collapsed {
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
}
.dev-toggle-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.dev-toggle-label {
  flex: 1;
  text-align: center;
  font-size: var(--ft-caption);
  font-weight: var(--fw-label);
  color: var(--text-muted);
}
.dev-row-label {
  margin: 0;
  text-align: center;
  font-size: var(--ft-caption);
  font-weight: var(--fw-label);
  color: var(--text-muted);
}
.dev-toggle-close {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: var(--ft-body);
  font-weight: 900;
  line-height: 1;
  padding: var(--sp-1) var(--sp-2);
  cursor: pointer;
  border-radius: var(--rd-pill);
}
.dev-toggle-close:hover { background: var(--bg-neutral-a); }
.dev-toggle-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-2);
}
.dev-chip {
  height: 36px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--text-muted);
  border-radius: var(--rd-pill);
  background: var(--card);
  color: var(--text-muted);
  font-family: inherit;
  font-size: var(--ft-caption);
  font-weight: var(--fw-label);
  cursor: pointer;
  transition: var(--motion-transition);
}
.dev-chip:hover { transform: translateY(-1px); }
.dev-chip.is-active {
  border-color: var(--text-main);
  background: var(--text-main);
  color: var(--text-inverse);
}

/* ==================================================================
   개발 토글 노출 분기 — html.is-dev-mode일 때만 표시
   활성화: URL에 ?dev=1 또는 localStorage 'zelbang-dev'='1'
   비활성화: URL에 ?dev=0 (localStorage 클리어)
   ================================================================== */
html:not(.is-dev-mode) .dev-toggle-trigger,
html:not(.is-dev-mode) .dev-toggle { display: none !important; }

/* 발문 핵심 단서 강조 — 대괄호 [ ] 구간을 젤뭉 딥으로 */
.q-emph { color: var(--jelmmung-deep); }