/* ============================================================
   페이지 공용 스타일, 테스트 토큰은 design.css 참조
   ============================================================ */

@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; }
}

* { 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 라운드)
   ============================================================ */
.summary-card,
.regions-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;
}
.summary-card { animation-delay: 0.05s; }
.regions-card { animation-delay: 0.2s; }

/* ============================================================
   히어로(summary-card) 영역 레거시 40_report_main 세팅
   색은 현재 페이지 테마(젤뭉)에 맞게 세팅
   ============================================================ */
.summary-card {
  position: relative;
  padding: clamp(20px, 5vw, 24px) clamp(18px, 4.6vw, 22px) clamp(22px, 5.2vw, 26px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}

.summary-kicker {
  font-size: var(--ft-body-l);
  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 var(--sp-1);
}

.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/top 50%에 이징을 줘서 */
  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);
}
/* 12방향 영역 메인 10 + 젤뭉/젤똑 메인 2 */
.score-dot.d1  { --sx: -36px; --sy:  -6px; --tx:  -34px; --ty:   +6px; --rot: -24deg; --dly: 0s;    background: var(--c-life-main); }      /* 주황: 9시 */
.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); }  /* 파랑: 12시 30분 */
.score-dot.d4  { --sx: -20px; --sy: +20px; --tx:  +20px; --ty:  +44px; --rot: -28deg; --dly: .08s;  background: var(--c-law-main); }       /* 보라: 6시 */
.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: var(--sp-1);
}

.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 var(--jelmmung-deep);
  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); }

.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.is-logged-out .share-section,
body.is-sample .info-accordion { display: none; }

/* ── 히어로 공유 버튼(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-logged-out .hero-share-section { display: none; }
body.has-session-result.is-logged-out .hero-share-section,
body.has-session-result.is-guest-session-result .hero-share-section { display: block; }
body.has-empty-result .hero-share-section,
body.is-result-loading .hero-share-section,
body.is-share-view .hero-share-section { display: none; }
body.has-session-result.is-logged-out .share-section,
body.has-session-result.is-guest-session-result .share-section { display: block; }
body.has-session-result:not(.is-logged-out):not(.is-guest-session-result) .sample-banner,
body.has-session-result:not(.is-logged-out):not(.is-guest-session-result) .example-pill { display: none; }
body.has-session-result.is-logged-out .sample-cta,
body.has-session-result.is-guest-session-result .sample-cta { display: flex; }
body.is-share-view .share-section,
body.is-share-view #share-btn,
body.is-share-view #answer-btn,
body.is-share-view #overall-btn { display: none; }
body.is-share-view.is-guest-session-result .sample-banner,
body.is-share-view.is-guest-session-result .locked-group,
body.is-share-view.is-guest-session-result .info-accordion { display: none; }
body.is-share-view.is-guest-session-result .sample-cta {
  display: flex;
}
body.is-share-view.is-guest-session-result .cta-stack {
  margin-top: 0;
}
body.is-share-view.is-guest-session-result .sample-cta .btn-cta,
body.is-share-view.is-guest-session-result .sample-cta-warning,
.sample-cta-kicker-share {
  display: none;
}
body.is-share-view.is-guest-session-result .sample-cta-kicker-default {
  display: none;
}
body.is-share-view.is-guest-session-result .sample-cta-kicker-share {
  display: inline;
}
body.is-share-view #home-btn {
  background: var(--jelmmung-deep) !important;
  color: var(--text-inverse) !important;
  border-color: var(--jelmmung-deep) !important;
}
body.has-empty-result .summary-card,
body.has-empty-result .sample-banner,
body.has-empty-result .locked-group,
body.has-empty-result .info-accordion,
body.has-empty-result .sample-cta,
body.has-empty-result .cta-stack,
body.is-result-loading .summary-card,
body.is-result-loading .sample-banner,
body.is-result-loading .locked-group,
body.is-result-loading .info-accordion,
body.is-result-loading .sample-cta,
body.is-result-loading .cta-stack { display: none; }

.empty-result-card {
  display: none;
}
body.has-empty-result .empty-result-header,
body.is-result-loading .empty-result-header { display: flex; }
body.has-session-result .empty-result-header { display: none; }
body.has-empty-result .empty-result-card,
body.is-result-loading .empty-result-card { display: flex; }
body.has-session-result .empty-result-card { display: none; }
.empty-result-loading-visual,
.empty-result-loading-text { display: none; }
body.is-result-loading .empty-result-empty-visual,
body.is-result-loading .empty-result-empty-text,
body.is-result-loading .empty-result-action { display: none; }
body.is-result-loading .empty-result-loading-visual { display: block; }
body.is-result-loading .empty-result-loading-text { display: inline; }
.summary-meta {
  font-size: var(--ft-label);
  font-weight: 700;
  color: var(--text-muted);
  margin-top: var(--sp-2);
  text-align: center;
}

/* ============================================================
   영역별 카드 및 10영역 전체 나열. 등장 안 한 영역은 0/0 비활성
   ============================================================ */
.regions-card {
  padding: var(--sp-4) var(--sp-5) var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.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-copy-line {
  display: block;
}
.regions-copy-strong {
  color: var(--jelmmung-deep);
  font-weight: 800;
}
.absolute-variant-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.absolute-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-2) 0;
}
.absolute-pair + .absolute-pair {
  border-top: var(--border-subtle);
}
.absolute-variant-row {
  display: grid;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
}
.variant-region-name {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 32px;
  padding: 0 var(--sp-3);
  border: 2px solid var(--rg-main, currentColor);
  border-radius: var(--rd-pill);
  background: var(--card);
  font-size: var(--ft-h2);
  font-weight: 800;
  color: var(--rg-deep, var(--text-main));
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.variant-region-name::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: var(--rd-pill);
  background: currentColor;
}
.absolute-v1-list .absolute-variant-row {
  grid-template-columns: 92px minmax(54px, 1fr);
  gap: var(--sp-2);
  background: var(--card);
  border-radius: var(--rd-md);
}
.variant-mini-jellies {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sp-2);
  justify-self: center;
  min-width: 66px;
  min-height: 30px;
}
.absolute-v1-list .variant-region-name {
  justify-self: start;
}
.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: var(--sp-2);
}
.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);
}
.card-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--ft-display-s);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-main);
}
.card-head-main {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}
.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);
}
.highlight-card {
  padding: var(--sp-4) var(--sp-5);
}
.time-pill-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
}
.time-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;
}
.time-pill-label {
  font-size: var(--ft-caption);
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-muted);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.time-pill-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-pair-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.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.is-compact {
  min-height: 132px;
  justify-content: center;
}
.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, currentColor);
  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 {
  grid-column: 1 / -1;
  justify-self: center;
  margin-left: 0;
  font-size: var(--ft-display-l);
  font-weight: 900;
  line-height: 1;
  color: var(--rg-deep, var(--text-main));
  letter-spacing: -0.03em;
  text-align: center;
  white-space: nowrap;
  transform: translateY(-2px);
}
.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);
}

.region-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.region-list.absolute-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2) var(--sp-3);
}
.region-row {
  display: grid;
  grid-template-columns: 70px 1fr 58px;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-2) 0;
}
.region-list.absolute-grid .region-row {
  grid-template-columns: 68px 1fr auto;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--card);
  border-radius: var(--rd-md);
  box-shadow: inset 0 0 0 2px var(--rg-main);
}
.region-row + .region-row {
  border-top: var(--border-subtle);
}
.region-list.absolute-grid .region-row + .region-row {
  border-top: none;
}
.region-list.compare .region-row {
  grid-template-columns: calc(96px + var(--sp-4)) minmax(0, 1fr) 72px;
  column-gap: 0;
  padding: calc(var(--sp-2) + 12px) 0 10px;
}
.region-name {
  font-size: var(--ft-body);
  font-weight: 800;
  color: var(--rg-deep, var(--text-main));
  letter-spacing: -0.01em;
}
.region-list.absolute-grid .region-name {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: stretch;
  gap: var(--sp-2);
  text-align: center;
  white-space: nowrap;
}
.region-list.absolute-grid .region-name::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: var(--rd-pill);
  background: currentColor;
}
.region-list.compare .region-name {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  width: 96px;
  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;
}
.gauge-track {
  width: 100%;
  height: 10px;
  background: var(--neutral-a);
  border-radius: var(--rd-pill);
  overflow: hidden;
}
.gauge-track.compare {
  position: relative;
  overflow: visible;
  width: 100%;
  align-self: center;
  justify-self: stretch;
}
.gauge-fill {
  height: 100%;
  border-radius: var(--rd-pill);
  background: var(--rg-main, var(--text-muted));
}
.absolute-jelly-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  justify-self: center;
  transform: translateX(0);
}
.absolute-jelly {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex: none;
}
.absolute-jelly-svg {
  width: 30px;
  height: 30px;
  flex: none;
  display: block;
}
.absolute-empty-face {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  font-size: var(--ft-caption);
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: -0.08em;
  line-height: 1;
  white-space: nowrap;
}
.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% + var(--sp-2));
  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-list.absolute-grid .region-score {
  transform: translateX(-4px);
}
.region-score.delta {
  letter-spacing: -0.02em;
}
.region-score.delta.is-positive { color: var(--c-news-deep); }
.region-score.delta.is-negative { color: var(--state-error-fg); }

/* 등장 안 한 영역의 흐리게 처리 */
.region-row.is-empty .region-name { color: var(--text-muted); opacity: 0.55; }
.region-row.is-empty .region-score { color: var(--text-muted); opacity: 0.55; }

/* 영역별 색상 주입 */
.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-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-human    { --rg-main: var(--c-human-main);    --rg-deep: var(--c-human-deep);    --rg-soft: var(--c-human-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); }

/* ============================================================
   점수 해석 아코디언 컴포넌트 CTA 직전 배치.
   내용 파악 마지막 단계에서 "궁금하면 열어봐" 장치.
   껍데기 버전: 3개 슬롯만, 공식 확정 시 내용 주입.
   ============================================================ */
.info-accordion {
  background: var(--card);
  border-radius: var(--rd-md);
  opacity: 0;
  transform: translateY(-28px);
  animation: dropDown var(--motion-duration-base) var(--motion-ease-natural) 0.3s forwards;
  user-select: none;
  -webkit-user-select: none;
}
.info-accordion > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--ft-h2);
  font-weight: 800;
  color: var(--state-info-fg);
  letter-spacing: -0.01em;
}
.info-accordion > summary::-webkit-details-marker { display: none; }
.info-accordion-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.info-accordion-badge {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--state-info-fg);
}
.info-accordion-badge svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.info-accordion-arrow {
  position: relative;
  left: -6px;
  width: 18px;
  height: 12px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--motion-duration-fast) var(--motion-ease-natural);
}
.info-accordion-arrow svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}
.info-accordion[open] .info-accordion-arrow {
  transform: rotate(180deg);
}
.info-accordion-body {
  padding: 0 var(--sp-4) var(--sp-3);
  display: flex;
  flex-direction: column;
}
.info-row {
  padding: var(--sp-3) 0;
  border-top: var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.info-row-label {
  font-size: var(--ft-body);
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.01em;
}
.info-row-value {
  font-weight: 800;
  color: var(--jelmmung-deep);
  margin-left: var(--sp-1);
}
.info-row-desc {
  font-size: var(--ft-body-s);
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ============================================================
   CTA 텍스트, .btn-cta + pri/sec/ghost 변형은 design.css.
   위계: 답지(pri-jt 채움) > 종합(pri-jm 채움) > 홈(ghost-jm-deep 투명)
   ============================================================ */
.cta-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: 0;
  opacity: 0;
  transform: translateY(-28px);
  animation: dropDown var(--motion-duration-base) var(--motion-ease-natural) 0.35s forwards;
}
.share-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  opacity: 0;
  transform: translateY(-28px);
  animation: dropDown var(--motion-duration-base) var(--motion-ease-natural) 0.32s forwards;
}
.cta-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: calc(var(--sp-5) - var(--sp-4));
}


.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: 0;
  padding: var(--sp-5);
  border-radius: var(--rd-md);
  background: var(--card);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.poster-brand,
.poster-score,
.poster-delta,
.share-poster-actions { display: flex; }
.poster-brand { 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; 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: 800; white-space: nowrap; }
.poster-score { flex-direction: column; align-items: center; text-align: center; }
.poster-score-label { margin: 0 0 var(--sp-1); font-size: var(--ft-body-s); font-weight: 800; color: var(--jelmmung-deep); }
.poster-score-main { font-size: var(--ft-stat-xl); font-weight: 900; line-height: 0.95; letter-spacing: -0.04em; color: var(--jelmmung-deep); }
.poster-score-suffix { margin-left: var(--sp-1); 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); align-items: center; justify-content: center; gap: var(--sp-2); font-size: var(--ft-body-s); 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-detail {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
body.is-logged-out .poster-detail { display: none; }
.poster-highlight,
.poster-weak-card {
  display: grid;
  grid-template-columns: 1fr 116px;
  align-items: center;
  gap: var(--sp-3);
  min-height: 132px;
  padding: var(--sp-4);
  border-radius: var(--rd-md);
  background: var(--rg-soft, var(--jelmmung-soft));
}
.poster-weak-card {
  grid-template-columns: 1fr;
  min-height: 96px;
  background: var(--rg-soft, var(--neutral-a));
}
.poster-area-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  text-align: 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(--rg-deep, var(--text-muted));
  white-space: nowrap;
}
.poster-area-chip {
  min-height: 30px;
  padding: 0 var(--sp-3);
  border: 2px solid var(--rg-main, currentColor);
  border-radius: var(--rd-pill);
  background: var(--card);
  color: var(--rg-deep, var(--text-main));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-size: var(--ft-body-s);
  font-weight: 900;
  white-space: nowrap;
}
.poster-area-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--rd-pill);
  background: var(--rg-deep, currentColor);
}
.poster-area-delta {
  color: var(--rg-deep, var(--text-main));
  font-size: var(--ft-display-s);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
}
.poster-highlight-img {
  width: 116px;
  height: 116px;
  object-fit: contain;
}
.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-s); font-weight: 800; cursor: pointer; }
.share-poster-action.primary { border-color: var(--jelttok-deep); background: var(--jelttok-deep); color: var(--text-inverse); }
.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); }
.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-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-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);
}
.share-fallback-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.dev-link-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
/* ============================================================
   로그인 게이트 상세 카드 묶음 — 로그인 전에는 예시 데이터, 로그인 후 REAL 데이터
   ============================================================ */
.locked-group {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

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

/* ── 젤리 글래스 (구 redesign.css 화면30 흡수 · !important 제거)
   bare 카드 레시피는 베이스 뒤 append로 이김. 요약카드는 .is-test-report 스코프(0,2,0)로 영롱. ── */
.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-test-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);
}
.is-test-report .variant-mini-jellies { justify-content: center; }
.gauge-track { background: var(--neutral-b); }