/* ============================================================
   페이지 전용 스타일 — 시스템 토큰은 design.css 참조
   테마: 젤뭉 컨테이너 + 두 캐릭터 함께 등장 (32 차별화 포인트)
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .summary-score-line { opacity: 1 !important; transform: none !important; }
  .delta-line, .avg-label { opacity: 1 !important; transform: none !important; }
  .score-pop { display: none !important; }
  .trend-path { stroke-dashoffset: 0 !important; }
}

* { 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;
}

/* ============================================================
   공통 카드
   ============================================================ */
.summary-card,
.overview-card,
.trend-card,
.regions-card,
.brag-card {
  background: var(--card);
  border-radius: var(--rd-md);
  scroll-margin-top: var(--sp-2);
  opacity: 0;
  transform: translateY(-28px);
  animation: dropDown var(--motion-duration-base) var(--motion-ease-natural) forwards;
}
.summary-card { animation-delay: 0.05s; }
.overview-card{ animation-delay: 0.12s; }
.trend-card   { animation-delay: 0.20s; }
.regions-card { animation-delay: 0.30s; } /* 두 번째 .regions-card는 인라인 style로 0.40s 덮어씀 */
.brag-card    { animation-delay: 0.50s; }

/* ============================================================
   누적 점수 카드 — 30 히어로 패턴 기반
   ============================================================ */
.summary-card {
  position: relative;
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}
.summary-hero-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--sp-3);
}
.summary-hero-sub {
  font-size: var(--ft-body-s);
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  letter-spacing: -0.01em;
}
.summary-kicker {
  font-size: var(--ft-h1);
  font-weight: 800;
  color: var(--jelmmung-deep);
  text-align: center;
}
.summary-title {
  font-size: var(--ft-display-l);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: var(--text-main);
  text-align: center;
  word-break: keep-all;
}
.summary-title-line {
  display: block;
  white-space: nowrap;
}
.summary-score-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  margin: var(--sp-2) 0 2px;
}
.summary-score-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  position: relative;
  opacity: 0;
  transform: scale(0.72);
}
.summary-score-line.is-visible {
  animation: scoreStampIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes scoreStampIn {
  0%   { opacity: 0; transform: scale(0.72); }
  60%  { opacity: 1; transform: scale(1.18); }
  82%  { opacity: 1; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}
.score-pop {
  position: absolute;
  inset: -80px -90px -80px -90px;
  pointer-events: none;
  overflow: visible;
}
.score-dot {
  position: absolute;
  width: 22px;
  height: 9px;
  border-radius: var(--rd-pill);
  opacity: 0;
  left: calc(50% + var(--sx, 0px));
  top: calc(50% + var(--sy, 0px));
  margin-left: -11px;
  margin-top: -4.5px;
  transform: translate(0, 0) rotate(var(--rot, 0deg)) scale(0.3);
}
.score-dot.d1  { --sx: -36px; --sy:  -6px; --tx:  -34px; --ty:   +6px; --rot: -24deg; --dly: 0s;    background: var(--c-life-main); }
.score-dot.d2  { --sx: +18px; --sy: -24px; --tx:  +40px; --ty:  +36px; --rot:  18deg; --dly: .05s;  background: var(--c-lang-main); }
.score-dot.d3  { --sx: +38px; --sy:  +8px; --tx:  -13px; --ty:  -78px; --rot:  22deg; --dly: .02s;  background: var(--c-politics-main); }
.score-dot.d4  { --sx: -20px; --sy: +20px; --tx:  +20px; --ty:  +44px; --rot: -28deg; --dly: .08s;  background: var(--c-law-main); }
.score-dot.d5  { --sx:  +6px; --sy: +34px; --tx:  +30px; --ty:  -64px; --rot: -16deg; --dly: .04s;  background: var(--c-history-main); }
.score-dot.d6  { --sx: -42px; --sy: +10px; --tx:  -35px; --ty:  -69px; --rot:  32deg; --dly: .01s;  background: var(--c-human-main); }
.score-dot.d7  { --sx: +30px; --sy: -12px; --tx:  +14px; --ty:  +71px; --rot: -36deg; --dly: .09s;  background: var(--c-econ-main); }
.score-dot.d8  { --sx: -14px; --sy: -30px; --tx:  -28px; --ty:  +64px; --rot:  14deg; --dly: .06s;  background: var(--c-science-main); }
.score-dot.d9  { --sx: -28px; --sy: +28px; --tx:  +74px; --ty:  +11px; --rot:  -8deg; --dly: .03s;  background: var(--c-news-main); }
.score-dot.d10 { --sx: +42px; --sy: -18px; --tx:  -71px; --ty:  -12px; --rot:  26deg; --dly: .07s;  background: var(--c-digital-main); }
.score-dot.d11 { --sx: +12px; --sy: +18px; --tx:  +52px; --ty:  -52px; --rot: -40deg; --dly: .11s;  background: var(--jelmmung); }
.score-dot.d12 { --sx: -34px; --sy: -18px; --tx:  -46px; --ty:  +57px; --rot:  34deg; --dly: .13s;  background: var(--jelttok); }
.score-pop.is-active .score-dot {
  animation: scorePillBurst 1.6s cubic-bezier(0.22, 1, 0.36, 1) var(--dly, 0s) both;
}
@keyframes scorePillBurst {
  0%   { opacity: 0; transform: translate(0, 0) rotate(var(--rot, 0deg)) scale(0.3); }
  15%  { opacity: 1; }
  60%  { opacity: 0.95; }
  100% { opacity: 0; transform: translate(var(--tx, 0), var(--ty, 0)) rotate(var(--rot, 0deg)) scale(1); }
}
.score-main {
  font-size: var(--ft-stat-xl);
  font-weight: 900;
  line-height: 1;
  color: var(--jelmmung-deep);
  letter-spacing: -0.04em;
}
.score-suffix {
  font-size: var(--ft-stat);
  font-weight: 900;
  color: var(--text-main);
  margin-left: 4px;
}
.delta-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ft-body-l);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-main);
  gap: var(--sp-2);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.24s ease, transform 0.24s ease;
}
.delta-line.is-visible { opacity: 1; transform: translateY(0); }
.delta-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 32px;
  padding: 0 var(--sp-4);
  border-radius: var(--rd-pill);
  border: 2px solid currentColor;
  background: var(--card);
  font-size: var(--ft-h2);
  font-weight: 800;
  letter-spacing: -0.01em;
  flex-shrink: 0;
  white-space: nowrap;
  color: var(--jelmmung-deep);
}
.delta-pill.is-positive,
.delta-pill.is-negative { color: var(--jelmmung-deep); }
/* 평균 비교 트랙 — 30 히어로 섹션 게이지 그대로 가져옴 */
.track-container {
  position: relative;
  width: 100%;
  height: 60px;
  margin-top: var(--sp-5);
}
.track-bg {
  position: absolute;
  top: 24px; left: 0;
  width: 100%; height: 12px;
  background: var(--neutral-a);
  border-radius: var(--rd-pill);
}
.track-fill {
  position: absolute;
  top: 24px; left: 0;
  width: 0; height: 12px;
  background: var(--jelmmung-deep);
  border-radius: var(--rd-pill);
  transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.avg-marker {
  position: absolute;
  top: 14px; left: 0;
  height: 32px; width: 4px;
  background: var(--text-main);
  border-radius: var(--rd-pill);
  transform: translateX(-50%);
  z-index: 2;
  transition: left 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.avg-label {
  position: absolute;
  top: -12px; left: 0;
  transform: translateX(-50%);
  font-size: var(--ft-body);
  font-weight: 800;
  color: var(--text-main);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.avg-label.is-visible { opacity: 1; }

/* 세션 결과 화면에서는 예시 배지를 숨긴다. */
body.has-session-result .sample-banner,
body.has-session-result .example-pill { display: none; }
body.has-session-result.is-logged-out .sample-cta { display: flex; }

.summary-meta {
  font-size: var(--ft-label);
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
}
.summary-meta strong {
  color: var(--text-main);
  font-weight: 800;
}

/* ============================================================
   점수 추이 카드 — 미니 라인 차트 (지난 4주, 32 신규)
   ============================================================ */
.trend-card {
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.card-head-main {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}
.card-head-title {
  font-size: var(--ft-h2);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--text-main);
}
.card-head-sub {
  font-size: var(--ft-body-s);
  font-weight: 700;
  color: var(--text-muted);
}
.trend-copy {
  margin: 0 0 var(--sp-2);
}
.trend-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  margin: 0 0 var(--sp-2);
  font-size: var(--ft-caption);
  font-weight: 700;
  color: var(--text-muted);
}
.trend-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.trend-legend-line {
  width: 18px;
  height: 0;
  border-top: 3px solid transparent;
  border-radius: var(--rd-pill);
  flex: none;
}
.trend-legend-line.self {
  border-color: var(--jelmmung-deep);
}
.trend-legend-line.avg {
  border-color: var(--jelttok);
}
/* 차트 SVG는 라인·영역·점만. 텍스트는 div 라인으로 분리 (스케일 영향 차단) */
.trend-chart {
  width: 100%;
  height: auto;
  display: block;
}
.trend-area {
  fill: var(--jelmmung);
  opacity: 0.18;
}
.trend-path {
  fill: none;
  stroke: var(--jelmmung-deep);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* dasharray/offset은 JS에서 path 길이 기반으로 설정. is-drawing으로 애니메이션 트리거 */
}
.trend-path.avg {
  stroke: var(--jelttok);
  stroke-width: 2.2;
}
.trend-path.is-drawing {
  animation: trendDraw 1.2s var(--motion-ease-natural) forwards;
}
@keyframes trendDraw {
  to { stroke-dashoffset: 0; }
}
.trend-dot {
  fill: var(--card);
  stroke: var(--jelmmung-deep);
  stroke-width: 2.4;
  opacity: 0;
  animation: dotPop 0.3s var(--motion-ease-bounce) forwards;
  /* animation-delay는 JS에서 인라인으로 부여 (점 N개 가변) */
}
.trend-dot.avg {
  stroke: var(--jelttok);
  stroke-width: 2.2;
}
@keyframes dotPop {
  from { opacity: 0; r: 0; }
  to   { opacity: 1; r: 5; }
}
/* 차트 wrap — SVG와 값 라벨을 같은 부모로 묶어 absolute 레이어 배치 */
.trend-chart-wrap {
  position: relative;
}
/* 값 라벨 — 점 위에 absolute 레이어. SVG 좌표 cx/cy를 %로 환산해 인라인 left/top */
.trend-value {
  position: absolute;
  transform: translate(-50%, calc(-100% - 12px));
  font-size: var(--ft-body-s);
  font-weight: 900;
  color: var(--text-main);
  letter-spacing: -0.01em;
  white-space: nowrap;
  pointer-events: none;
}
/* 회차 라벨 — 차트 아래 grid 4등분, 토큰 두 단계 업 (caption → body-s → body) */
.trend-axis-labels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
  font-size: var(--ft-body);
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.01em;
}

/* ============================================================
   영역별 카드 — 30 패턴 가져옴 (절대 평가 / 상대 평가)
   ============================================================ */
.regions-card {
  padding: var(--sp-4) var(--sp-5) var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
/* 영역별 카드 head — 30 패턴 (아이콘 + 제목, 절대 평가는 우측 점수 추가) */
.regions-card .card-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sp-3);
  font-size: var(--ft-display-s);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-main);
}
.overview-card .card-head,
.trend-card .card-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sp-3);
  font-size: var(--ft-display-s);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-main);
}
.regions-card .card-head-main {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}
.regions-card .absolute-head {
  width: 100%;
  justify-content: space-between;
  gap: var(--sp-2);
}
.absolute-head-score {
  flex: none;
  font-size: var(--ft-h1);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text-main);
  white-space: nowrap;
}
.absolute-head-score-hit {
  color: var(--jelmmung-deep);
}
.card-head-icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex: none;
  transform: translateY(2px);
}
.card-head-icon-stack {
  position: relative;
  width: 44px;
  height: 34px;
  flex: none;
  transform: translateY(2px);
}
.card-head-icon-stack img {
  position: absolute;
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.card-head-icon-stack img.jm {
  left: 0;
  top: 0;
  transform: rotate(-6deg);
}
.card-head-icon-stack img.jt {
  right: 0;
  bottom: 0;
  transform: rotate(6deg);
}
.regions-copy {
  margin: 0 0 var(--sp-2);
  font-size: var(--ft-body-s);
  line-height: 1.55;
  color: var(--text-muted);
  word-break: keep-all;
}
.regions-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  margin: 0 0 var(--sp-2);
  font-size: var(--ft-caption);
  font-weight: 700;
  color: var(--text-muted);
}
.regions-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.regions-legend-fill,
.regions-legend-marker { flex: none; }
.regions-legend-fill {
  width: 18px;
  height: 8px;
  border-radius: var(--rd-pill);
  background: var(--jelmmung-deep);
}
.regions-legend-marker {
  width: 4px;
  height: 14px;
  border-radius: var(--rd-pill);
  background: var(--text-main);
}

.region-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.region-row {
  display: grid;
  grid-template-columns: 70px 1fr 78px;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-2) 0;
}
.region-row + .region-row {
  border-top: 1px solid var(--neutral-a);
}
.region-list.compare .region-row {
  grid-template-columns: 96px minmax(0, 1fr) var(--sp-6) 48px;
  column-gap: var(--sp-4);
  padding: var(--sp-4) 0 var(--sp-2);
}
.region-list.absolute .region-row {
  grid-template-columns: 96px 1fr 78px;
  column-gap: var(--sp-4);
  padding: var(--sp-2) 0;
}
.region-name {
  font-size: var(--ft-body);
  font-weight: 800;
  color: var(--rg-deep, var(--text-main));
  letter-spacing: -0.01em;
}
/* 상대 평가 영역명 — 알약 outline + dot */
.region-list.compare .region-name {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  min-width: 56px;
  min-height: 32px;
  padding: 0 var(--sp-3);
  gap: var(--sp-2);
  border: 2px solid var(--rg-main, var(--jelmmung));
  border-radius: var(--rd-pill);
  background: var(--card);
  font-size: var(--ft-h2);
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}
.region-list.absolute .region-name {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  min-width: 56px;
  min-height: 32px;
  padding: 0 var(--sp-3);
  gap: var(--sp-2);
  border: 2px solid var(--rg-main, var(--jelmmung));
  border-radius: var(--rd-pill);
  background: var(--card);
  font-size: var(--ft-h2);
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}
.region-list.compare .region-name::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: var(--rd-pill);
  background: currentColor;
}
.region-list.absolute .region-name::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: var(--rd-pill);
  background: currentColor;
}
.gauge-track {
  width: 100%;
  height: 10px;
  background: var(--neutral-a);
  border-radius: var(--rd-pill);
  overflow: hidden;
}
.gauge-track.compare {
  position: relative;
  overflow: visible;
  grid-column: 2 / 4;
  width: 100%;
  align-self: center;
  justify-self: stretch;
}
.gauge-fill {
  width: 0;
  height: 100%;
  border-radius: var(--rd-pill);
  background: var(--rg-main, var(--text-muted));
  transition: width 1s var(--motion-ease-natural);
}
.gauge-marker {
  position: absolute;
  top: 50%;
  left: 0;
  width: 4px;
  height: 18px;
  border-radius: var(--rd-pill);
  background: var(--text-main);
  transform: translate(-50%, -50%);
  z-index: 2;
}
.gauge-marker-label {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  transform: translateX(-50%);
  font-size: var(--ft-caption);
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}
.region-score {
  text-align: right;
  font-size: var(--ft-body);
  font-weight: 800;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
}
.region-score.delta {
  grid-column: 4;
  letter-spacing: -0.02em;
}
.region-score.delta.is-positive { color: var(--c-news-deep); }
.region-score.delta.is-negative { color: var(--state-error-fg); }

/* 영역별 색상 주입 */
.r-life     { --rg-main: var(--c-life-main);     --rg-deep: var(--c-life-deep);     --rg-soft: var(--c-life-soft); }
.r-lang     { --rg-main: var(--c-lang-main);     --rg-deep: var(--c-lang-deep);     --rg-soft: var(--c-lang-soft); }
.r-politics { --rg-main: var(--c-politics-main); --rg-deep: var(--c-politics-deep); --rg-soft: var(--c-politics-soft); }
.r-law      { --rg-main: var(--c-law-main);      --rg-deep: var(--c-law-deep);      --rg-soft: var(--c-law-soft); }
.r-history  { --rg-main: var(--c-history-main);  --rg-deep: var(--c-history-deep);  --rg-soft: var(--c-history-soft); }
.r-human    { --rg-main: var(--c-human-main);    --rg-deep: var(--c-human-deep);    --rg-soft: var(--c-human-soft); }
.r-econ     { --rg-main: var(--c-econ-main);     --rg-deep: var(--c-econ-deep);     --rg-soft: var(--c-econ-soft); }
.r-science  { --rg-main: var(--c-science-main);  --rg-deep: var(--c-science-deep);  --rg-soft: var(--c-science-soft); }
.r-news     { --rg-main: var(--c-news-main);     --rg-deep: var(--c-news-deep);     --rg-soft: var(--c-news-soft); }
.r-digital  { --rg-main: var(--c-digital-main);  --rg-deep: var(--c-digital-deep);  --rg-soft: var(--c-digital-soft); }

/* ============================================================
   성적 요약 카드 — strongest/weakest + 카테고리 젤뭉
   ============================================================ */
.overview-card {
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.overview-copy {
  margin: 0 0 var(--sp-2);
  font-size: var(--ft-body-s);
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-muted);
  word-break: keep-all;
}
.overview-meta-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
}
.overview-meta-pill {
  min-width: 0;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--rd-pill);
  background: var(--neutral-a);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
}
.overview-meta-label {
  font-size: var(--ft-caption);
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-muted);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.overview-meta-value {
  font-size: var(--ft-h2);
  font-weight: 900;
  line-height: 1.1;
  color: var(--text-main);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.overview-footnote {
  margin: 0;
  font-size: var(--ft-body-s);
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-muted);
  text-align: center;
  word-break: keep-all;
}
.overview-footnote strong {
  color: var(--jelmmung-deep);
  font-weight: 800;
}
.overview-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 224px;
  column-gap: var(--sp-3);
  row-gap: 28px;
  align-items: start;
}
.overview-left {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  align-items: flex-start;
}
.overview-stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-4);
  width: 100%;
  max-width: none;
  justify-items: center;
  align-items: start;
  padding: 0 58px;
}
.overview-stat:nth-child(1) { grid-column: 1; }
.overview-stat:nth-child(2) { grid-column: 3; }
.overview-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  align-items: center;
  text-align: center;
}
.overview-stat-line {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  line-height: 1;
}
.overview-stat-main {
  font-size: var(--ft-stat-l);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--jelmmung-deep);
}
.overview-stat-suffix {
  font-size: var(--ft-body-l);
  font-weight: 900;
  color: var(--text-main);
}
.overview-stat-label {
  font-size: var(--ft-body-s);
  font-weight: 700;
  color: var(--text-muted);
  line-height: 1.45;
  white-space: nowrap;
}
.overview-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  align-self: start;
  transform: translateX(-8px);
  margin-top: 0;
}
.overview-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: center;
}
.overview-item:last-child {
  transform: translateY(6px);
}
.overview-label {
  font-size: var(--ft-body-s);
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: -0.01em;
  text-align: center;
}
.overview-line {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  justify-content: center;
}
.overview-delta-line {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  line-height: 1;
}
.overview-delta-main {
  font-size: var(--ft-stat-l);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--rg-deep, var(--text-main));
}
.overview-delta-suffix {
  font-size: var(--ft-body-l);
  font-weight: 900;
  color: var(--rg-deep, var(--text-main));
}
.overview-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 var(--sp-2);
  gap: var(--sp-2);
  border: 2px solid var(--rg-main, var(--jelmmung));
  border-radius: var(--rd-pill);
  background: var(--card);
  color: var(--rg-deep, var(--text-main));
  font-size: var(--ft-body-s);
  font-weight: 800;
  white-space: nowrap;
}
.overview-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--rd-pill);
  background: currentColor;
  flex: none;
}
.overview-mascot-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
}
.overview-mascot {
  width: 224px;
  height: 224px;
  object-fit: contain;
  transform: translateX(8px) translateY(-6px);
  filter: drop-shadow(0 10px 20px rgba(43, 54, 67, 0.12));
}

/* 한 줄 통합 stats — A·B 공통 */
.overview-stats-line {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--neutral-a);
  border-radius: var(--rd-md);
  font-size: var(--ft-body);
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  letter-spacing: -0.01em;
}
.overview-stats-line strong {
  color: var(--text-main);
  font-weight: 900;
  font-size: var(--ft-h2);
}
/* footnote — A·B 공통 (강조 강화) */
.overview-footnote-v2 {
  margin: var(--sp-3) 0 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--neutral-a);
  border-radius: var(--rd-md);
  font-size: var(--ft-h1);
  font-weight: 800;
  line-height: 1.3;
  color: var(--text-main);
  text-align: center;
  white-space: nowrap;
}
.overview-footnote-v2 strong {
  color: var(--jelmmung-deep);
  font-weight: 900;
}
.overview-footnote-area {
  color: var(--rg-main, var(--text-main));
  font-weight: 800;
}
.overview-footnote-strong {
  color: var(--strong-main, var(--text-main));
  font-weight: 900;
}
.overview-footnote-weak {
  color: var(--weak-main, var(--text-main));
  font-weight: 900;
}

/* ====== 성적표 개요: 이미지 → 색 박스 페어 ====== */
.overview-pair {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  min-height: 196px;
  padding: var(--sp-4) var(--sp-3);
  border-radius: var(--rd-md);
  background: var(--rg-soft, var(--neutral-a));
}
.overview-pair + .overview-pair {
  margin-top: var(--sp-4);
}
.overview-pair-mascot {
  width: 132px;
  height: 132px;
  object-fit: contain;
}
.overview-pair-box {
  width: auto;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  column-gap: var(--sp-2);
  row-gap: var(--sp-2);
  text-align: left;
  color: var(--rg-deep, var(--text-main));
}
.overview-pair-label {
  font-size: var(--ft-body-s);
  font-weight: 700;
  color: var(--rg-deep, var(--text-muted));
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.overview-pair-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 var(--sp-3);
  gap: var(--sp-2);
  border: 2px solid var(--rg-main, var(--text-muted));
  border-radius: var(--rd-pill);
  background: var(--card);
  font-size: var(--ft-body-s);
  font-weight: 800;
  color: var(--rg-deep, var(--text-main));
  white-space: nowrap;
  justify-self: center;
}
.overview-pair-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--rd-pill);
  background: currentColor;
  flex: none;
}
.overview-pair-delta {
  font-size: var(--ft-display-l);
  font-weight: 900;
  color: var(--rg-deep, var(--text-main));
  letter-spacing: -0.03em;
  grid-column: 1 / -1;
  justify-self: center;
  margin-left: 0;
  transform: translateY(-2px);
  text-align: center;
  white-space: nowrap;
}
.overview-pair-note {
  margin: 0;
  font-size: var(--ft-body-s);
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-muted);
  text-align: center;
  word-break: keep-all;
}
.overview-pair-note strong {
  color: var(--jelmmung-deep);
  font-weight: 900;
}
/* ============================================================
   자랑 카드 — 어려운데 맞힌 문제 TOP 3 (32 신규, 바이럴 포인트)
   ============================================================ */
.brag-card {
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.brag-card .card-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sp-3);
  font-size: var(--ft-display-s);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-main);
}
.brag-copy {
  margin: 0;
}
.brag-copy + .brag-copy {
  margin-top: -6px;
}
.brag-copy-accent {
  white-space: nowrap;
}
.brag-list {
  list-style: none;
  margin: var(--sp-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.brag-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  background: var(--neutral-a);
  border-radius: var(--rd-md);
}
.brag-rank {
  width: 32px;
  height: 32px;
  border-radius: var(--rd-pill);
  background: var(--jelmmung-deep);
  color: var(--text-inverse);
  font-size: var(--ft-h2);
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.brag-question {
  font-size: var(--ft-body);
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.4;
  letter-spacing: -0.015em;
  word-break: keep-all;
}
.brag-rate {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  color: var(--jelmmung-deep);
  line-height: 1.1;
}
.brag-rate-label {
  font-size: var(--ft-caption);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.brag-rate-value {
  font-size: var(--ft-h2);
  font-weight: 900;
  letter-spacing: -0.02em;
}
.learn-card .brag-rank {
  background: var(--jelttok-deep);
}
.learn-card .brag-rate {
  color: var(--jelttok-deep);
}

/* ============================================================
   CTA — 시스템 .btn-cta + 변형은 design.css.
   위계: 한 판 더(pri-jm 채움, 퀴즈=젤뭉) > 시험 성적표(sec-jm 아웃라인) > 홈(ghost-jm-deep 투명)
   ============================================================ */
.cta-section {
  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.60s forwards;
}
.share-section {
  opacity: 0;
  transform: translateY(-28px);
  animation: dropDown var(--motion-duration-base) var(--motion-ease-natural) 0.32s forwards;
}
/* 32 비로그인 = 예시 페이지. 공유 버튼·TOC 링크 모두 숨김. (정책 11.1) */
body.is-sample .share-section,
body.is-sample .toc-link[data-target="share-section"] { display: none !important; }

/* ── 히어로 공유 버튼(v5) — 누적 점수 카드 바로 아래 독립 행동 존 ─────────── */
.hero-share-section { position: relative; z-index: 1; }
.hero-share {
  width: 100%; display: flex; align-items: center; gap: var(--sp-3);
  min-height: 56px; padding: 0 var(--sp-4);
  border: 0; border-radius: var(--rd-sm);
  background: var(--jelttok-deep); color: #fff; text-align: left;
  font-family: inherit; cursor: pointer;
}
.hero-share .hs-ic { width: 22px; height: 22px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.hero-share .hs-ic svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.hero-share .hs-shelf-text { display: flex; flex-direction: column; gap: 1px; }
.hero-share .hs-shelf-title { font-size: var(--ft-h2); font-weight: 900; letter-spacing: -0.02em; line-height: 1.15; }
.hero-share .hs-shelf-sub { font-size: var(--ft-caption); font-weight: 700; opacity: 0.78; line-height: 1.1; }
.hero-share .hs-chevron { margin-left: auto; font-size: var(--ft-h1); font-weight: 900; }
/* 노출 규칙 — 하단 공유(.share-section)와 동일: 샘플·공유뷰에선 숨김 */
body.is-sample .hero-share-section { display: none !important; }
body.is-share-view .hero-share-section { display: none; }
body.is-share-view .share-section,
body.is-share-view #share-btn,
body.is-share-view #play-btn,
body.is-share-view #report-btn,
body.is-share-view .toc-fab-wrap { display: none; }
body.is-share-view #home-btn {
  background: var(--jelmmung-deep) !important;
  color: var(--text-inverse) !important;
  border-color: var(--jelmmung-deep) !important;
}
.cta-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: calc(var(--sp-5) - var(--sp-4));
}

.summary-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
}

/* ============================================================
   공유 포스터 프리뷰 — 32 공유 여정용 템플릿
   ============================================================ */
.share-poster-overlay[hidden] {
  display: none;
}
.share-poster-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  background: var(--scrim);
  overflow-y: auto;
}
.share-poster-sheet {
  width: min(100%, 420px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.share-poster {
  width: 100%;
  border-radius: calc(var(--rd-md) + 6px);
  padding: var(--sp-5);
  background: var(--cg-bg);
  box-shadow: var(--sh-modal);
}
.share-poster-inner {
  min-height: 640px;
  padding: var(--sp-5);
  border-radius: var(--rd-md);
  background: var(--card);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.poster-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.poster-brand-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--ft-display-s);
  font-weight: 900;
  color: var(--text-main);
  letter-spacing: -0.03em;
}
.poster-brand-text .jm {
  color: var(--jelmmung-deep);
}
.poster-brand-text .jt {
  color: var(--jelttok-deep);
}
.poster-badge {
  height: 28px;
  padding: 0 var(--sp-3);
  border-radius: var(--rd-pill);
  background: var(--jelmmung-deep);
  color: var(--text-inverse);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ft-caption);
  font-weight: 900;
  letter-spacing: -0.01em;
}
.poster-score {
  text-align: center;
}
.poster-score-kicker {
  margin: 0 0 var(--sp-1);
  font-size: var(--ft-body-s);
  font-weight: 800;
  color: var(--jelmmung-deep);
}
.poster-score-line {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  color: var(--jelmmung-deep);
}
.poster-score-main {
  font-size: var(--ft-stat-xl);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.poster-score-suffix {
  margin-left: 4px;
  font-size: var(--ft-stat);
  font-weight: 900;
  color: var(--text-main);
}
.poster-delta {
  min-height: 48px;
  border-radius: var(--rd-pill);
  background: var(--neutral-a);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-size: var(--ft-body);
  font-weight: 800;
  color: var(--text-main);
}
.poster-delta strong {
  color: var(--jelmmung-deep);
  font-size: var(--ft-h1);
  font-weight: 900;
  letter-spacing: -0.02em;
}
.poster-highlight,
.poster-weak-card {
  display: grid;
  grid-template-columns: 1fr 122px;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-4);
  border-radius: var(--rd-md);
  --poster-top-shift: 0px;
  --poster-bottom-shift: 0px;
  background: var(--rg-soft, var(--jelmmung-soft));
}
.poster-weak-card {
  background: var(--rg-soft, var(--neutral-a));
}
.poster-highlight-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}
.poster-area-line {
  width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  justify-self: center;
}
.poster-area-head {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
}
.poster-area-label {
  font-size: var(--ft-body-s);
  font-weight: 800;
  color: var(--text-muted);
  white-space: nowrap;
}
.poster-area-chip {
  width: fit-content;
  min-height: 30px;
  padding: 0 var(--sp-3);
  border: 2px solid var(--rg-main, var(--text-main));
  border-radius: var(--rd-pill);
  background: var(--card);
  color: var(--rg-deep, var(--text-main));
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--ft-body-s);
  font-weight: 900;
  white-space: nowrap;
  flex: none;
}
.poster-area-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--rd-pill);
  background: currentColor;
  flex: none;
}
.poster-area-delta {
  font-size: var(--ft-display-s);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--rg-deep, var(--text-main));
  transform: translateX(-6px);
}
.poster-weak-card .poster-area-delta {
  transform: translateX(-10px);
}
.poster-highlight-img,
.poster-weak-img {
  width: 122px;
  height: 122px;
  object-fit: contain;
  justify-self: center;
  transform: translateX(-14px);
}
.poster-mini-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--rd-md);
  background: var(--neutral-a);
}
.poster-mini-rank {
  width: 30px;
  height: 30px;
  border-radius: var(--rd-pill);
  background: var(--jelmmung-deep);
  color: var(--text-inverse);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ft-body-s);
  font-weight: 900;
  flex: none;
}
.poster-mini-card.learn .poster-mini-rank {
  background: var(--jelttok-deep);
}
.poster-mini-copy {
  min-width: 0;
}
.poster-mini-label {
  display: block;
  margin-bottom: 2px;
  font-size: var(--ft-caption);
  font-weight: 800;
  color: var(--text-muted);
}
.poster-mini-title {
  display: block;
  font-size: var(--ft-body-s);
  font-weight: 800;
  line-height: 1.35;
  color: var(--text-main);
  word-break: keep-all;
}
.poster-mini-rate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: var(--ft-h2);
  font-weight: 900;
  color: var(--jelmmung-deep);
  white-space: nowrap;
}
.poster-mini-rate-label {
  font-size: var(--ft-caption);
  font-weight: 800;
  color: var(--text-muted);
  line-height: 1;
}
.poster-mini-rate-value {
  font-size: var(--ft-h2);
  font-weight: 900;
  line-height: 1;
}
.poster-mini-card.learn .poster-mini-rate {
  color: var(--jelttok-deep);
}
.poster-cta-block {
  margin-top: auto;
}
/* 포스터 안 CTA는 html2canvas-pro 호환 위해 inline-flex → flex 로 강제. */
.poster-cta-copy.btn-cta {
  display: flex;
  width: 100%;
  font-size: var(--ft-h1);
}
.poster-cta-copy .cta-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}
.poster-cta-copy .cta-helper-inside {
  font-size: var(--ft-caption);
  font-weight: 700;
  color: var(--text-inverse);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.poster-cta-copy .cta-copy-main {
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
}
.share-poster-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
.share-poster-action {
  height: 44px;
  border-radius: var(--rd-sm);
  border: 2px solid var(--jelmmung-deep);
  background: var(--card);
  color: var(--jelmmung-deep);
  font-family: inherit;
  font-size: var(--ft-body);
  font-weight: 900;
  cursor: pointer;
}
.share-poster-action.primary {
  border-color: var(--jelttok-deep);
  background: var(--jelttok-deep);
  color: var(--text-inverse);
}
.share-poster-action:disabled {
  cursor: wait;
  opacity: 0.72;
}
.share-fallback[hidden] {
  display: none;
}
.share-fallback {
  padding: var(--sp-4);
  border-radius: var(--rd-md);
  background: var(--card);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  box-shadow: var(--sh-fallback);
}
.share-fallback-copy {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--ft-body-s);
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  word-break: keep-all;
}
.share-fallback-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
.share-policy-note {
  padding: var(--sp-3);
  border-radius: var(--rd-md);
  background: var(--neutral-a);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  text-align: center;
}
.share-policy-note p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--ft-caption);
  font-weight: 700;
  line-height: 1.45;
  word-break: keep-all;
}
.share-policy-note strong {
  color: var(--text-main);
  font-weight: 900;
}
.share-fallback .share-poster-action {
  border-color: var(--jelttok-deep);
  background: var(--jelttok-deep);
  color: var(--text-inverse);
}
.share-fallback .share-poster-action:first-child {
  border-color: var(--jelmmung-deep);
  background: var(--jelmmung-deep);
}

/* ============================================================
   플로팅 목차 — 긴 종합 성적표 빠른 이동
   ============================================================ */
.toc-fab-wrap {
  position: fixed;
  right: var(--sp-3);
  bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-3);
}
@media (min-width: 620px) {
  .toc-fab-wrap {
    right: max(var(--sp-3), calc(50vw - 324px));
  }
}
.toc-panel {
  width: 164px;
  padding: var(--sp-3);
  border-radius: var(--rd-md);
  background: var(--card);
  box-shadow: var(--sh-2);
  border: 1px solid var(--neutral-b);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  transform-origin: right bottom;
  transform: translateY(8px) scale(0.96);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-duration-fast) var(--motion-ease-natural),
              transform var(--motion-duration-fast) var(--motion-ease-natural);
}
.toc-fab-wrap.is-open .toc-panel {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.toc-panel-title {
  padding: var(--sp-1) var(--sp-2) var(--sp-2);
  font-size: var(--ft-body);
  font-weight: 900;
  color: var(--jelttok-deep);
  letter-spacing: -0.01em;
  text-align: center;
}
.toc-link {
  width: 100%;
  min-height: 36px;
  padding: 0 var(--sp-3);
  border: 0;
  border-radius: var(--rd-sm);
  background: transparent;
  color: var(--text-main);
  font-family: inherit;
  font-size: var(--ft-body-s);
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  transition: var(--motion-transition);
}
.toc-link:hover {
  background: var(--neutral-a);
}
.toc-fab {
  height: 48px;
  min-width: 64px;
  padding: 0 var(--sp-3);
  border: 2px solid var(--jelttok-deep);
  border-radius: var(--rd-pill);
  background: var(--card);
  color: var(--jelttok-deep);
  box-shadow: var(--sh-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-family: inherit;
  font-size: var(--ft-body);
  font-weight: 900;
  cursor: pointer;
  transition: var(--motion-transition);
}
.toc-fab:hover {
  transform: translateY(-2px);
}

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

/* ── 젤리 글래스 (구 redesign.css 화면32 흡수 · !important 제거)
   30과 동일 리포트 레시피, 요약카드만 .is-overall-report 스코프. ── */
.summary-card, .overview-card, .trend-card, .regions-card, .brag-card, .cta-stack,
.sample-banner, .sample-cta, .info-accordion, .locked-group,
.result-empty-header, .empty-result-card { position: relative; z-index: 1; }
.summary-card, .overview-card, .trend-card, .regions-card, .brag-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-overall-report .summary-card {
  background: var(--cg-surface-50);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--cg-shadow);
}
.overview-meta-pill, .time-pill, .brag-item {
  background: var(--cg-surface-50);
  border: 1px solid rgba(255, 255, 255, 0.95);
}
.overview-meta-pill, .time-pill {
  box-shadow:
    0 7px 18px rgba(43, 33, 66, 0.22),
    0 2px 5px rgba(43, 33, 66, 0.12),
    inset 0 1px 1px rgba(255, 255, 255, 0.7);
}
.brag-item {
  box-shadow:
    0 5px 13px rgba(43, 33, 66, 0.16),
    inset 0 1px 1px rgba(255, 255, 255, 0.6);
}
.info-accordion {
  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);
}
.gauge-track { background: var(--neutral-b); }

/* 공유 확인 모달 (30과 동일) */
.share-confirm-card { max-width: 380px; }
.share-confirm-list {
  width: 100%;
  margin: var(--sp-3) 0 var(--sp-4);
  padding: var(--sp-3);
  border-radius: var(--rd-md);
  background: var(--neutral-a);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  text-align: center;
}
.share-confirm-list p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--ft-body-s);
  font-weight: 700;
  line-height: 1.45;
  word-break: keep-all;
}
.share-confirm-list strong { color: var(--text-main); font-weight: 900; }
.share-confirm-actions {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}