/* ============================================================
   페이지 전용 스타일 — 시스템 토큰은 design.css 참조
   ============================================================ */
* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: block;
  /* 중립 배경 — 캐릭터 그래디언트는 app-container 안쪽 전용(시스템 원칙) */
  background: var(--card);
  color: var(--text-main);
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  overflow-x: hidden;
}

/* ============================================================
   앱 컨테이너 — 모바일 프레임
   ============================================================ */
.app-container {
  position: relative;
}
.app-container.page-exit-up {
  animation: pageExitUp var(--motion-duration-base) var(--motion-ease-exit) forwards;
  pointer-events: none;
}

/* ============================================================
   상단 네비 (E안) — 투명 띠, 알약 컴포넌트들만 떠 있음
   좌측 젤방 알약 (텍스트는 검정 — 본문 brand와 위계 일관)
   우측 액션: 비로그인=로그인만 / 로그인=알림+로그아웃
   ============================================================ */
.home-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 간격은 page-shell의 gap(sp-4)이 자동 적용 — 추가 margin 불필요 */
}
.nav-logo {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--sp-4);
  border-radius: var(--rd-pill);
  background: var(--card);
  color: var(--text-main);
  font-size: var(--ft-label);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  text-decoration: none;
}
.nav-logo .jm,
.nav-logo .jt { color: inherit; }
.nav-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.nav-pill {
  align-items: center;
  justify-content: center;
  height: 32px;
  border-radius: var(--rd-pill);
  background: var(--card);
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  font-size: var(--ft-label);
  font-weight: 700;
  color: var(--jelmmung-deep);
  border: 2px solid var(--jelmmung-deep);
  cursor: pointer;
  text-decoration: none;
  letter-spacing: -0.01em;
  line-height: 1;
  transition: var(--motion-transition);
  display: none; /* 기본 숨김 — body 클래스로 분기 */
}
.nav-pill:hover { transform: translateY(-2px); }
.nav-pill.login,
.nav-pill.logout,
.nav-pill.profile { padding: 0 var(--sp-4); }
.nav-pill.login {
  background: var(--jelmmung-deep);
  color: var(--text-inverse);
  border-color: var(--jelmmung-deep);
}
.nav-pill.logout {
  border-color: var(--neutral-b);
  color: var(--text-muted);
}
.nav-pill.profile {
  border-color: var(--jelmmung-deep);
  color: var(--jelmmung-deep);
}
.nav-pill.bell {
  padding: 0 var(--sp-4);
  position: relative;
  display: inline-flex; /* 알림은 로그인 상태 무관, 항상 노출 */
  border-color: var(--text-main);
  color: var(--text-main);
}
.notice-icon-svg {
  flex: 0 0 auto;
  color: currentColor;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-pill.bell .notice-nav-icon {
  width: 24px;
  height: 24px;
  display: block;
}
.nav-pill.bell .dot {
  position: absolute;
  top: var(--sp-1);
  right: var(--sp-1);
  width: var(--dot-sm);
  height: var(--dot-sm);
  border-radius: 50%;
  background: var(--text-main);
  border: 2px solid var(--card);
}
.nav-pill.bell .dot[hidden] {
  display: none;
}
/* 상태별 노출 — 비로그인: 로그인 / 로그인: 로그아웃 (알림은 위에서 항상 표시) */
body.is-logged-out .nav-pill.login { display: inline-flex; }
body.is-logged-in .nav-pill.profile { display: inline-flex; }
body.is-logged-in .nav-pill.logout { display: inline-flex; }
/* ============================================================
   히어로·루트 카드 — 페이지 내부 조립물(시스템 "카드" 분자 + 원자들)
   시스템 규칙: 흰 배경, 30px 라운드, 그림자 없음
   ============================================================ */
.hero-card,
.route-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;
}

.hero-card {
  position: relative;
  overflow: hidden;
  /* 세로로 넉넉하게 — 위/아래 여백 확대 */
  padding: var(--sp-8) var(--sp-5) var(--sp-8);
  text-align: center;
}

.brand {
  margin-top: 0;
  font-size: var(--ft-display-l);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.05em;
  color: var(--text-main);
}

.brand-sub {
  margin-top: var(--sp-2);
  font-size: var(--ft-display-xl);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.06em;
}
.brand-sub .accent-jm { color: var(--jelmmung-deep); }
.brand-sub .accent-jt { color: var(--jelttok-deep); }

.mascot {
  width: clamp(224px, 60vw, 304px);
  height: clamp(224px, 60vw, 304px);
  object-fit: contain;
  display: block;
  margin: var(--sp-5) auto 0;
  transform-origin: bottom center;
  /* 레거시 젤뭉 입장 연출 — 단일 squeezeDrop에 7단계 바운스가 모두 들어감.
     1.16s 찌부 후 바로 float 루프로 이어짐. */
  animation:
    squeezeDrop 1.16s ease-in-out 0s both,
    float 3s ease-in-out 1.16s infinite;
}

.hero-tagline {
  margin-top: var(--sp-5);
}
.hero-tagline-head {
  font-size: var(--ft-h1);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--text-main);
  word-break: keep-all;
}
.hero-tagline-body {
  margin-top: var(--sp-2);
  font-size: var(--ft-body);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--text-muted);
  word-break: keep-all;
}
.hero-beta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  margin-top: var(--sp-4);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: var(--ft-body-s);
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  text-underline-offset: 4px;
}
.hero-beta-link:hover {
  color: var(--jelmmung-deep);
}
.hero-beta-link:focus-visible {
  outline: 2px solid var(--jelmmung-deep);
  outline-offset: 4px;
  border-radius: var(--rd-pill);
}
.hero-beta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}
.hero-beta-text {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* ============================================================
   루트 카드 (퀴즈 / 리포트)
   ============================================================ */
.routes {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.route-card {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  position: relative;
}

.routes .route-card:nth-child(1) { animation-delay: 0.1s; }
.routes .route-card:nth-child(2) { animation-delay: 0.2s; }

.route-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.route-icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex: none;
}

.route-kicker {
  font-size: var(--ft-caption);
  font-weight: 700;
  color: var(--text-muted);
}

.route-title {
  margin-top: var(--sp-1);
  font-size: var(--ft-display-s);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.route-title.primary   { color: var(--jelmmung-deep); }
.route-title.secondary { color: var(--jelttok-deep); }

.route-desc {
  font-size: var(--ft-body);
  font-weight: 500;
  line-height: 1.55;
  color: var(--text-main);
  word-break: keep-all;
}

/* 갱신 배지 — 빨간 점 대신 시스템 state-info(디지털) 틴트 알약 */
.route-update-badge {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--sp-3);
  border-radius: var(--rd-pill);
  background: var(--state-info-bg);
  color: var(--state-info-fg);
  font-size: var(--ft-caption);
  font-weight: 700;
  letter-spacing: -0.01em;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity var(--motion-duration-fast) var(--motion-ease-natural),
              transform var(--motion-duration-fast) var(--motion-ease-natural);
  pointer-events: none;
}

.route-card.has-update .route-update-badge {
  opacity: 1;
  transform: scale(1);
}

/* ============================================================
   공지 모달 — 알림 알약 클릭 시
   ============================================================ */
.notice-card {
  max-width: 400px;
  padding: var(--sp-5);
  gap: var(--sp-3);
  align-items: stretch;
  text-align: left;
}
.notice-modal-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: var(--border-subtle);
}
.notice-card .modal-login-title {
  text-align: left;
  margin: var(--sp-1) 0 0;
  font-size: var(--ft-display-s);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.notice-modal-copy {
  display: flex;
  flex-direction: column;
}
.notice-modal-kicker {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--ft-caption);
  font-weight: 700;
}
.notice-modal-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  display: block;
  object-fit: contain;
}
.notice-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-height: 60vh;
  overflow-y: auto;
}
.notice-item {
  padding: var(--sp-3) var(--sp-4);
  background: var(--neutral-a);
  border-radius: var(--rd-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.notice-item-date {
  font-size: var(--ft-caption);
  color: var(--text-muted);
  font-weight: 800;
}
.notice-item-title {
  font-size: var(--ft-body);
  font-weight: 900;
  color: var(--text-main);
}
.notice-item-divider {
  width: 100%;
  height: 0;
  margin: var(--sp-1) 0 var(--sp-2);
  border-top: var(--border-subtle);
}
.notice-item-body {
  margin: 0;
  font-size: var(--ft-body-s);
  color: var(--text-muted);
  line-height: 1.65;
  word-break: keep-all;
}
.notice-highlight {
  color: var(--jelmmung-deep);
  font-weight: 900;
}
.notice-empty {
  padding: var(--sp-5);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--ft-body-s);
}

/* ============================================================
   푸터 카드 — 페이지 가장 끝
   소개/정책/소통 메뉴 모음
   ============================================================ */
.about-card {
  background: var(--card);
  border-radius: var(--rd-md);
  padding: var(--sp-5);
  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.55s forwards;
}
.about-card-title {
  margin: 0;
  font-size: var(--ft-h2);
  font-weight: 900;
  color: var(--text-main);
  letter-spacing: -0.02em;
}
.about-links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.about-link {
  --about-deep: var(--text-main);
  --about-soft: var(--neutral-a);
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-2);
  border-radius: var(--rd-sm);
  border: 0;
  background: transparent;
  color: var(--text-main);
  font-family: inherit;
  font-size: var(--ft-body);
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  transition: var(--motion-transition);
}
.about-link:hover {
  background: var(--about-soft);
  transform: translateY(-1px);
}
.about-link--character {
  --about-deep: var(--jelmmung-deep);
  --about-soft: var(--jelmmung-soft);
}
.about-link--mission {
  --about-deep: var(--jelttok-deep);
  --about-soft: var(--jelttok-soft);
}
.about-link--vision {
  --about-deep: var(--c-digital-deep);
  --about-soft: var(--c-digital-soft);
}
.about-link--donate {
  --about-deep: var(--c-econ-deep);
  --about-soft: var(--c-econ-soft);
}
.about-link--feedback {
  --about-deep: var(--c-news-deep);
  --about-soft: var(--c-news-soft);
}
.about-link--terms {
  --about-deep: var(--c-law-deep);
  --about-soft: var(--c-law-soft);
}
.about-link--privacy {
  --about-deep: var(--c-politics-deep);
  --about-soft: var(--c-politics-soft);
}
.about-link--instagram {
  --about-deep: var(--c-lang-deep);
  --about-soft: var(--c-lang-soft);
}
.about-link--x {
  --about-deep: var(--text-main);
  --about-soft: var(--neutral-a);
}
.about-link--updates {
  --about-deep: var(--jelttok-deep);
  --about-soft: var(--jelttok-soft);
}
.about-link-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rd-pill);
  background: var(--about-deep);
  color: var(--text-inverse);
}
.about-link-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.about-link-icon.donate-glyph svg {
  width: 20px;
  height: 20px;
  stroke: none;
  fill: currentColor;
}
.about-link-icon.brand-glyph {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
.about-link-icon.brand-glyph img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}
.about-link-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.about-link-label {
  color: var(--about-deep);
  font-size: var(--ft-body);
  font-weight: 800;
  line-height: 1.1;
}
.about-link-desc {
  color: var(--text-muted);
  font-size: var(--ft-caption);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.about-link-arrow {
  color: var(--text-muted);
  font-size: var(--ft-body);
}
.footer-contact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  color: var(--text-muted);
  font-size: var(--ft-caption);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.footer-contact-mail {
  color: var(--text-main);
  font-weight: 800;
}
.footer-contact-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  width: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--rd-pill);
  background: var(--card);
  color: var(--text-main);
  font-family: inherit;
  font-size: var(--ft-caption);
  font-weight: 800;
  cursor: pointer;
}
.footer-contact-copy:active {
  transform: translateY(1px);
}
.footer-contact-copy svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* CTA 버튼 — 시스템 .btn-cta(62px) + 변형은 design.css. pri-jm / sec-jt 사용 */

/* ============================================================
   모션 — 시스템 원자 @keyframes (공통 이름 재사용)
   ============================================================ */
@keyframes squeezeDrop {
  0%   { transform: translateY(-120px) scale(0.8, 1.25);   opacity: 0; }
  38%  { transform: translateY(22px)   scale(1.16, 0.84);  opacity: 1; }
  56%  { transform: translateY(-18px)  scale(0.91, 1.1);   opacity: 1; }
  72%  { transform: translateY(8px)    scale(1.04, 0.96);  opacity: 1; }
  84%  { transform: translateY(-9px)   scale(0.97, 1.04);  opacity: 1; }
  93%  { transform: translateY(3px)    scale(1.015, 0.985); opacity: 1; }
  100% { transform: translateY(0)      scale(1, 1);        opacity: 1; }
}
/* dropDown / pageExitUp keyframes는 design.css 공통.
   float은 10 한정(캐릭터 부유 효과) */
@keyframes float {
  0%   { transform: translateY(0)    scale(1); }
  50%  { transform: translateY(-12px) scale(1); }
  100% { transform: translateY(0)    scale(1); }
}

/* ============================================================
   신규 유저 view (B · 맛보기형) — 결과 없는/로그아웃 유저용
   뷰 토글: 판별 전엔 둘 다 숨김(중립 대기) → 결정되면 하나만 contents로 노출
   ============================================================ */
.home-view { display: none; }
.home-view.is-active { display: contents; }

.home-b-hook {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--card); border-radius: var(--rd-md); padding: var(--sp-5);
}
.home-b-hook img { width: calc(var(--sp-7) + var(--sp-6)); height: calc(var(--sp-7) + var(--sp-6)); object-fit: contain; flex: none; }
.home-b-hook h1 {
  margin: 0; font-size: var(--ft-display-s); font-weight: 900;
  letter-spacing: -0.02em; line-height: 1.25; color: var(--text-main); word-break: keep-all;
}
.home-b-hook h1 .accent { color: var(--jelmmung-deep); }

.home-b-question-card { background: var(--card); border-radius: var(--rd-md); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.home-b-sample-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.home-b-badge { display: inline-flex; align-items: center; min-height: var(--sp-7); flex: none; padding: 0 var(--sp-4); border-radius: var(--rd-pill); white-space: nowrap; font-size: var(--ft-body); font-weight: 800; letter-spacing: -0.02em; }
.home-b-badge.is-category { background: var(--c-life-soft); color: var(--c-life-deep); }
.home-b-sample-tag { flex: none; white-space: nowrap; text-align: right; font-size: var(--ft-h2); font-weight: 900; letter-spacing: -0.02em; color: var(--text-main); }
.home-b-question-text { margin: 0; font-size: var(--ft-display-s); font-weight: 900; line-height: 1.35; letter-spacing: -0.03em; color: var(--text-main); word-break: keep-all; }

.home-b-options { display: flex; flex-direction: column; gap: var(--sp-4); }
.home-b-option { width: 100%; min-height: calc(var(--sp-9) + var(--sp-2)); padding: var(--sp-4) var(--sp-5); border-radius: var(--rd-sm); border: calc(var(--sp-1) / 2) solid transparent; background: var(--card); color: var(--text-main); font-family: inherit; font-size: var(--ft-display-s); font-weight: 900; letter-spacing: -0.03em; line-height: 1.3; text-align: left; cursor: pointer; display: flex; align-items: center; gap: var(--sp-4); word-break: keep-all; appearance: none; -webkit-appearance: none; transition: var(--motion-transition); }
.home-b-option:hover:not(:disabled) { transform: translateY(calc(var(--sp-1) * -0.5)); }
.home-b-option:active:not(:disabled) { transform: scale(var(--state-pressed-scale)); filter: brightness(var(--state-pressed-brightness)); }
.home-b-option:focus-visible { outline: calc(var(--sp-1) / 2) solid var(--jelttok-deep); outline-offset: calc(var(--sp-1) / 2); }
.home-b-option:disabled { cursor: default; opacity: 1; }
.home-b-option-num { width: calc(var(--sp-7) + var(--sp-2)); height: calc(var(--sp-7) + var(--sp-2)); border-radius: var(--rd-pill); flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: var(--ft-h1); font-weight: 900; color: var(--text-inverse); background: var(--text-main); transition: var(--motion-transition); }
.home-b-option.is-correct { background: var(--state-success-bg); border-color: var(--state-success-border); color: var(--state-success-fg); }
.home-b-option.is-correct .home-b-option-num { background: var(--state-success-border); color: var(--text-inverse); }
.home-b-option.is-wrong { background: var(--state-error-bg); border-color: var(--state-error-border); color: var(--state-error-fg); }
.home-b-option.is-wrong .home-b-option-num { background: var(--state-error-border); color: var(--text-inverse); }
.home-b-option.is-dimmed { opacity: var(--state-dimmed-opacity); }

.home-b-result-slot { display: grid; }
.home-b-result-slot > * { grid-area: 1 / 1; align-self: center; }
.home-b-sample-result { visibility: hidden; display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3) var(--sp-4); border-radius: var(--rd-sm); background: var(--card); text-align: center; }
.home-b-sample-result.is-show { visibility: visible; }
.home-b-sample-result .home-b-result-title { font-size: var(--ft-body); font-weight: 900; color: var(--text-main); }
.home-b-sample-result .home-b-result-lead.is-ok { color: var(--state-success-fg); }
.home-b-sample-result .home-b-result-lead.is-no { color: var(--jelmmung-deep); }
.home-b-sample-result .home-b-result-em { color: var(--jelmmung-deep); }
.home-b-sample-hint { text-align: center; font-size: var(--ft-body-s); font-weight: 700; color: var(--text-main); margin: 0; }
.home-b-sample-hint.is-hidden { visibility: hidden; }

.home-b-start-block { display: flex; flex-direction: column; gap: var(--sp-3); }
.btn-cta.home-b-start-cta.is-pulse { animation: homeBNudge calc(var(--motion-duration-slow) * 2) ease-in-out infinite; }
.home-b-start-cta .cta-copy { align-items: flex-start; }
.home-b-start-cta .cta-main { font-size: inherit; font-weight: inherit; line-height: 1.05; }
.home-b-reassure { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; }
.home-b-reassure li { display: inline-flex; align-items: center; gap: var(--dot-sm); min-height: var(--sp-7); padding: 0 var(--sp-3); border-radius: var(--rd-pill); background: var(--card); color: var(--text-main); font-size: var(--ft-caption); font-weight: 800; line-height: 1; white-space: nowrap; }
.home-b-reassure li .home-b-dot { width: var(--dot-sm); height: var(--dot-sm); border-radius: 50%; background: var(--jelttok-deep); }
.home-b-reassure li:nth-child(2) .home-b-dot { background: var(--c-econ-deep); }
.home-b-reassure li:nth-child(3) .home-b-dot { background: var(--c-digital-deep); }

.mini-footer { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-3) 0 var(--sp-2); }
.mini-footer .footer-contact-copy { border: 0; }
.mini-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sp-2); }
.mini-links a { color: var(--text-main); font-size: var(--ft-body-s); font-weight: 800; text-decoration: none; }
.mini-links a:hover { text-decoration: underline; }
.mini-links .sep { color: var(--text-muted); }

@keyframes homeBNudge {
  0%, 88%, 100% { transform: translateY(0); }
  92% { transform: translateY(calc(var(--sp-1) * -1)); }
  96% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-cta.home-b-start-cta.is-pulse { animation: none; }
}

/* ── 젤리 글래스 (구 redesign.css 화면10 흡수 · !important 제거)
   홈 카드·home-b·공지항목. bare 셀렉터를 베이스 뒤에 append → 순서로 이김.
   모달(.modal-backdrop/.modal-login)은 홈·리포트 공용이라 design.css로 이동. ── */
.home-nav, .hero-card, .routes, .route-card, .about-card, .footer-contact, .cta-stack { position: relative; z-index: 1; }
.home-b-hook, .home-b-question-card, .home-b-options, .home-b-result-slot, .home-b-start-block, .mini-footer { position: relative; z-index: 1; }

.hero-card, .route-card, .about-card {
  background: var(--cg-card-bg);
  backdrop-filter: blur(var(--cg-blur)); -webkit-backdrop-filter: blur(var(--cg-blur));
  border: var(--cg-card-border);
  border-radius: var(--cg-radius);
  box-shadow: var(--cg-shadow);
}
.route-card, .about-card {
  background: var(--cg-surface-70);
  backdrop-filter: blur(26px) saturate(1.25); -webkit-backdrop-filter: blur(26px) saturate(1.25);
  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);
}
/* 푸터단 about 카드 3개(소통·정책·소개) = 본문 읽는 카드라 가독 우선 → 더 또렷하게.
   scrim .72 → 0.90 (새 값. route-card는 .72 유지). 블러는 그대로(원칙: 스크림만 올림). */
.about-card { background: var(--cg-surface-90); }

.home-b-hook {
  background: var(--cg-card-bg);
  backdrop-filter: blur(var(--cg-blur)); -webkit-backdrop-filter: blur(var(--cg-blur));
  border: var(--cg-card-border);
  border-radius: var(--cg-radius);
  box-shadow: var(--cg-shadow);
}
.home-b-question-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);
}
.home-b-option:not(.is-correct):not(.is-wrong) {
  background: var(--cg-surface-70);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 12px rgba(43, 54, 67, 0.08);
}
.home-b-reassure li {
  background: var(--cg-surface-70);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.notice-item {
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.72);
}