/* =========================================
   BASE & RESET
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;900&display=swap');

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --color-bg: #FEFEFE;
  --color-mustard: #F5A623;
  --color-blue: #2F60A3;
  --color-red: #DB4427;
  --color-text: #1A1A2E;
  --color-text-sub: #555577;
  --color-text-light: #888899;
  --color-border: #E8E8F0;
  --color-card-bg: #FAFAFA;
  --color-success: #27AE60;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.07);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.13);
  --transition: 0.22s ease;
  --font: 'Noto Sans KR', sans-serif;
}

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  background: #F3F4F8;
  color: var(--color-text);
  min-height: 100vh;
  min-height: 100dvh;
  line-height: 1.6;
  word-break: keep-all;             /* 한국어 의미단위 줄바꿈 */
  overflow-wrap: break-word;        /* 불가피할 때만 강제 줄바꿈 */
  -webkit-tap-highlight-color: transparent;
}

a, button, input, select, textarea, .choice-card, .gender-avatar-card, .btn-circle-back {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: var(--font); }
img { max-width: 100%; display: block; }
ul { list-style: none; }

/* =========================================
   APP CONTAINER
   ========================================= */
#app {
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
  background: var(--color-bg);
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  overflow-x: hidden;
  box-shadow: 0 0 32px rgba(0,0,0,0.06);
}

/* =========================================
   SCREENS
   ========================================= */
.screen {
  display: none;
  min-height: 100vh;
  flex-direction: column;
  animation: fadeIn 0.3s ease;
}

.screen.active {
  display: flex;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================
   SCREEN: COVER
   ========================================= */
/* =========================================
   SCREEN: COVER (다음 화면과 톤앤매너 통일한 촘촘한 배치)
   ========================================= */
#screen-cover {
  background: #FEFEFE;
  justify-content: flex-start;
  align-items: stretch;
  padding: 20px 24px max(24px, calc(16px + env(safe-area-inset-bottom)));
  text-align: left;
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex-direction: column;
}

/* 메인 커버 콘텐츠 레이아웃 — 요소 간 밀집 중앙 배치 */
.screen-content-group.cover-content-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 0;
  min-height: 0;
  width: 100%;
  gap: 0;
}

.cover-top-spacer {
  display: none;
}

/* 상단 레이블 */
.cover-label {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-mustard);
  letter-spacing: 0.2px;
  padding: 0;
  margin-bottom: 6px;
  text-align: left;
}

/* 메인 텍스트 영역 */
.cover-text-area {
  flex-shrink: 0;
  padding: 0;
  text-align: left;
  margin-bottom: 4px;
}

/* 타이틀 (폰트/행간/자간 절대 유지) */
.cover-title {
  font-size: 28px;
  font-weight: 900;
  color: var(--color-text);
  line-height: 1.28;
  letter-spacing: -1px;
  margin-bottom: 8px;
}

/* 서브타이틀 (폰트/행간/자간 절대 유지) */
.cover-subtitle {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-sub);
  line-height: 1.65;
  margin-bottom: 0;
}

/* 일러스트 영역: 텍스트 바로 아래 밀집 배치 */
.cover-illust-wrap {
  width: 100%;
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
  margin: 0 auto 8px auto;
  overflow: hidden;
  text-align: center;
  max-height: 50vh;
}

.cover-illust {
  width: 100%;
  max-width: 380px;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* 일러스트 이미지 */
.cover-illust-img {
  width: 100%;
  max-width: 380px;
  height: auto;
  max-height: 100%;
  display: block;
  margin: 0 auto;
  object-fit: contain;
  object-position: center;
}

/* 버튼 위치: 그림 바로 아래 밀착 */
.cover-btn-wrap {
  flex-shrink: 0;
  width: 100%;
  padding: 0;
  margin-top: 4px;
}

/* 공통 오른쪽 화살표 아이콘 애니메이션 */
.btn-arrow-icon {
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

button:hover:not(:disabled) .btn-arrow-icon {
  transform: translateX(4px);
}

/* 시작 버튼 (Royal Blue) */
.btn-cover-new {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 54px;
  background: var(--color-blue);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  padding: 0 24px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  box-shadow: 0 6px 18px rgba(47, 96, 163, 0.25);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  letter-spacing: -0.3px;
  text-align: center;
}

.btn-cover-new:hover {
  background: #24508A;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(47, 96, 163, 0.38);
}

.btn-cover-new:active { transform: scale(0.98); }

.btn-cover-new:focus-visible {
  outline: 3px solid var(--color-mustard);
  outline-offset: 3px;
}

.cover-illust {
  width: 100%;
  max-width: 480px;
  height: auto;
  object-fit: contain;
  display: block;
}

/* 일러스트 이미지 — 가능한 최대 크기로 표시:
   높이를 컨테이너(.cover-illust-wrap)의 100%까지 채우고,
   가로가 넘칠 경우에만 max-width로 제한(비율 유지, 잘림 없음).
   이전(width:100% 고정) 방식보다 세로 여유 공간을 훨씬 더 크게 활용함 */
.cover-illust-img {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
}

/* =========================================
   BUTTONS
   ========================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 15px 28px;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 700;
  border: none;
  transition: all var(--transition);
  min-height: 52px;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}

.btn:focus-visible {
  outline: 3px solid var(--color-mustard);
  outline-offset: 3px;
}

.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--color-mustard);
  color: #fff;
  box-shadow: 0 4px 16px rgba(245,166,35,0.38);
}

.btn-primary:hover { background: #e09510; box-shadow: 0 6px 20px rgba(245,166,35,0.45); }

.btn-cover {
  background: #FEFEFE;
  color: var(--color-blue);
  font-size: 16px;
  font-weight: 800;
  padding: 16px 48px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.22);
}

.btn-cover:hover { background: #f8f8ff; transform: translateY(-2px); }

.btn-secondary {
  background: transparent;
  color: var(--color-blue);
  border: 2px solid var(--color-blue);
}

.btn-secondary:hover { background: #EEF3FB; }

.btn-outline {
  background: transparent;
  color: var(--color-text-sub);
  border: 1.5px solid var(--color-border);
}

.btn-outline:hover { background: var(--color-card-bg); }

.btn-full { width: 100%; }

.btn-sm {
  padding: 10px 20px;
  font-size: 13px;
  min-height: 40px;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* =========================================
   공통: 원형 뒤로가기 버튼 (이미지 참고)
   ========================================= */
.btn-circle-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #FEFEFE;
  border: 1.5px solid var(--color-border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.09);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition), box-shadow var(--transition);
}

.btn-circle-back:hover { background: #F5F5F8; box-shadow: 0 3px 12px rgba(0,0,0,0.13); }
.btn-circle-back:active { transform: scale(0.95); }
.btn-circle-back:focus-visible { outline: 3px solid var(--color-blue); outline-offset: 2px; }

/* =========================================
   공통: 뒤로 버튼 absolute 고정 + 콘텐츠 중앙 그룹
   ========================================= */

/* 뒤로 버튼 — 화면 좌상단 absolute 고정 */
.screen-back-btn {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10;
}

/* 콘텐츠 그룹 — 남는 세로 공간을 모두 차지하며 내부 콘텐츠를 세로 중앙 정렬.
   버튼 영역(.cta-fixed-zone)은 이 그룹의 형제 요소로 분리되어 있어
   콘텐츠 길이와 무관하게 버튼이 항상 화면 내 동일한 위치에 오게 됨 */
.screen-content-group {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  width: 100%;
}

/* =========================================
   공통: 하단 CTA 버튼 위치 (모바일 반응형 & Safe Area 보정)
   ========================================= */
.cta-fixed-zone {
  flex-shrink: 0;
  width: 100%;
  padding-block-start: 14px;
  padding-block-end: max(20px, calc(16px + env(safe-area-inset-bottom)));
  margin-top: auto;
}

/* =========================================
   SCREEN: GENDER
   ========================================= */
/* 나는요 화면 (가로 스크롤/밀림 현상 완벽 방지) */
#screen-gender {
  min-height: 100vh;
  min-height: 100dvh;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}

.gender-screen-wrap {
  padding: 20px 24px max(20px, calc(16px + env(safe-area-inset-bottom)));
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: #FEFEFE;
  min-height: 100%;
  overflow-y: auto;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  position: relative;
  width: 100%;
}

/* 타이틀 */
.gender-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.5px;
  margin: 0 0 20px;
}

/* 카드 그리드 — 그림자 및 외부 테두리가 짤리지 않도록 8px 패딩 및 음수 마진 적용 */
.gender-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
  width: 100%;
  padding: 8px;
  margin: -8px 0 12px;
  box-sizing: border-box;
}

/* 아바타 카드 (가로 밀림 없이 세련된 선택 피드백) */
.gender-avatar-card {
  background: #FEFEFE;
  border: 2px solid var(--color-border);
  border-radius: 20px;
  padding: 20px 10px 18px;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  width: 100%;
  box-sizing: border-box;
}

.gender-avatar-card:hover {
  border-color: #B8D0EF;
  box-shadow: 0 6px 18px rgba(47, 96, 163, 0.12);
  transform: translateY(-2px);
}

.gender-avatar-card:active {
  transform: scale(0.97);
}

.gender-avatar-card:focus-visible {
  outline: 3px solid var(--color-blue);
  outline-offset: 2px;
}

/* 선택 시 선명한 파란 테두리 (4면 전체 짤림 없음) */
.gender-avatar-card.selected {
  border-color: #4A7FCC;
  background: linear-gradient(180deg, #F4F8FE 0%, #FFFFFF 100%);
  box-shadow: 0 6px 20px rgba(74, 127, 204, 0.22);
  transform: translateY(-2px);
  animation: cardPulse 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cardPulse {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-4px); }
  100% { transform: translateY(-2px); }
}

/* 우상단 선택 팝 체크 뱃지 */
.gender-check-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  display: none;
  line-height: 0;
  border-radius: 50%;
}

.gender-avatar-card.selected .gender-check-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: badgePop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes badgePop {
  0%   { opacity: 0; transform: scale(0.3); }
  70%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

/* 아바타 이미지 영역 */
.gender-avatar-img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: #F5F6F8;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  border: 2.5px solid transparent;
}

.gender-avatar-card.selected .gender-avatar-img {
  border-color: #4A7FCC;
  box-shadow: 0 4px 14px rgba(74, 127, 204, 0.25);
}

.gender-avatar-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  transition: transform 0.3s ease;
}

.gender-avatar-card:hover .gender-avatar-img img {
  transform: scale(1.05);
}

.gender-avatar-placeholder {
  display: none;                 /* 이미지 로드 성공 시 JS onerror가 없으면 숨김 유지 */
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.gender-avatar-placeholder--dad { background: #EEF3F8; }
.gender-avatar-placeholder--mom { background: #FDF0F4; }

/* 카드 레이블 */
.gender-avatar-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.3px;
  transition: all 0.25s ease;
}

.gender-avatar-card.selected .gender-avatar-label {
  color: #2F60A3;
  font-weight: 800;
}

/* 다음으로 버튼 — 상하 위치는 공통 규칙 .cta-fixed-zone이 담당 (좌우는 부럐 wrap이 이부 담당) */
.gender-btn-wrap {
  margin-top: 0;
}

.btn-gender-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 54px;
  background: #B8CAE0;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  padding: 0 24px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  letter-spacing: -0.3px;
  text-align: center;
}

.btn-gender-next:hover {
  background: #A0B8D8;
}

.btn-gender-next:active { transform: scale(0.98); }
.btn-gender-next:focus-visible { outline: 3px solid var(--color-blue); outline-offset: 3px; }

/* 선택 완료 시 지정 파란 */
.btn-gender-next.ready {
  background: #4A7FCC;
  box-shadow: 0 6px 18px rgba(74, 127, 204, 0.28);
}

.btn-gender-next.ready:hover {
  background: #3A6DB8;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(74, 127, 204, 0.38);
}

/* =========================================
   SCREEN: INTRO
   ========================================= */
/* 안내 화면 */
#screen-intro {
  min-height: 100vh;
  min-height: 100dvh;
  height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 공통 상단 원형 뒤로가기 버튼 — absolute 고정 & 세련된 쉐입 */
.btn-circle-back,
.screen-back-btn {
  position: absolute;
  top: 18px;
  left: 20px;
  z-index: 20;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FEFEFE;
  border: 1.5px solid #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0;
  margin: 0;
  outline: none;
}

.btn-circle-back:hover,
.screen-back-btn:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.09);
  transform: translateX(-2px);
}

.btn-circle-back:active,
.screen-back-btn:active {
  transform: scale(0.95);
}

.intro-screen-wrap {
  padding: 20px 24px max(20px, calc(16px + env(safe-area-inset-bottom)));
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;   /* 콘텐츠 세로 중앙 정렬은 .screen-content-group(flex:1)이 담당, 버튼 위치는 .cta-fixed-zone이 담당 */
  background: #FEFEFE;
  min-height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

/* 안내 화면 & 성별 화면 콘텐츠 그룹 상단 여백 (뒤로가기 버튼과 말풍선 그림 겹침 100% 방지) */
.intro-screen-wrap .screen-content-group,
.gender-screen-wrap .screen-content-group {
  padding-top: 48px;
}

/* 말풍선 아이콘 */
.intro-icon {
  margin: 0 0 8px;               /* 위 margin 제거 */
  line-height: 0;
}

/* 타이틀 */
.intro-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.5px;
  margin-bottom: 16px;           /* 위 margin 제거 */
}

/* 번호 카드 목록 */
.intro-card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  margin-bottom: 24px;
}

/* 번호 카드 (색상 보존 & 세련된 쉐입/입체감 강화) */
.intro-num-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #FEFEFE;
  border: 1.5px solid var(--color-border);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  transition: all 0.22s ease;
}

.intro-num-card:hover {
  transform: translateY(-1px);
  border-color: #D8D8E5;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

/* 번호 뱃지 (기존 머스타드 색상 엄수 & 앰비언트 글로우) */
.intro-num-badge {
  width: 30px;
  height: 30px;
  min-width: 30px;
  background: var(--color-mustard);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
  letter-spacing: 0.3px;
  box-shadow: 0 2.5px 8px rgba(245, 166, 35, 0.32);
  margin-top: 1px;
}

/* 카드 텍스트 (기존 폰트/컬러 엄수) */
.intro-num-text {
  font-size: 14px;
  color: var(--color-text-sub);
  line-height: 1.6;
  margin: 0;
}

.intro-num-text strong {
  color: var(--color-text);
  font-weight: 700;
}

/* 예시 문항 버튼 영역 — 상하 위치는 공통 규칙 .cta-fixed-zone이 담당 (좌우는 부럐 wrap이 이부 담당) */
.intro-btn-wrap {
  margin-top: 0;
}

.btn-intro-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 54px;
  background: #4A7FCC;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  padding: 0 24px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  box-shadow: 0 6px 18px rgba(74, 127, 204, 0.28);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  letter-spacing: -0.3px;
  text-align: center;
}

.btn-intro-next:hover {
  background: #3A6DB8;
  box-shadow: 0 10px 24px rgba(74, 127, 204, 0.38);
  transform: translateY(-2px);
}

.btn-intro-next:active { transform: scale(0.98); }
.btn-intro-next:focus-visible { outline: 3px solid var(--color-blue); outline-offset: 3px; }

/* =========================================
   SCREEN: QUIZ — 완전 재구성
   ========================================= */

/* 퀴즈 화면 전체 레이아웃: 헤더 + body(flex:1) + nav 고정 */
#screen-quiz {
  display: none;
  flex-direction: column;
  height: 100dvh; /* 동적 뷰포트 높이 */
  min-height: 100dvh;
  overflow: hidden;
  background: #F7F8FA;
}

#screen-quiz.active {
  display: flex;
}

/* ── 일반 문항 헤더 (진행바 영역만 — 상단 고정) ── */
/* ── 일반 문항 헤더 (진행바 영역만 — 상단 고정) ── */
.quiz-normal-header {
  flex-shrink: 0;
  padding: max(48px, calc(36px + env(safe-area-inset-top))) 18px 6px;
  background: #F7F8FA;
}

/* 진행바 행 */
.quiz-header-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 4px;
}

/* 진행바 */
.progress-bar-wrap {
  flex: 1;
  background: #E2E4EA;
  border-radius: 50px;
  height: 6px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: var(--color-mustard);
  border-radius: 50px;
  transition: width 0.35s ease;
}

/* 카운터: "7 / 16  43%" */
.quiz-counter {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-sub);
  flex-shrink: 0;
  white-space: nowrap;
}

.quiz-pct-badge {
  background: var(--color-mustard);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  line-height: 1.5;
}

/* ── 상황 카드 (그림과 질문 사이 간격 여유 조율) ── */
.quiz-situation-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  background: none;
  border-radius: 0;
  padding: 6px 18px 2px;
  margin: 6px 0 6px;
  min-height: auto;
}

.quiz-sit-emoji {
  font-size: 52px;
  flex-shrink: 0;
  line-height: 1;
  font-style: normal;
  -webkit-text-fill-color: initial;
  color: initial;
  filter: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Twemoji로 치환된 <img class="emoji"> 크기를 부모 폰트 크기에 맞춤 */
.quiz-sit-emoji img.emoji,
img.emoji {
  width: 1em;
  height: 1em;
  vertical-align: middle;
  display: inline-block;
}

/* 이모지 전체 컬러 강제 — 모든 이모지 요소 */
emoji, [class*="emoji"], .quiz-sit-emoji,
.gender-emoji, .cover-emoji, .intro-icon,
.result-type-emoji, .placeholder-emoji {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif !important;
  -webkit-text-fill-color: initial !important;
  color: initial !important;
  filter: none !important;
  opacity: 1 !important;
}

.quiz-sit-text {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.35;
  letter-spacing: -0.4px;
  margin: 0;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 안내 문구 */
.quiz-instruction {
  font-size: 13px;
  color: var(--color-text-sub);
  line-height: 1.45;
  margin: 4px 0 10px;
  padding: 0 18px;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.quiz-instruction strong { color: var(--color-text); font-weight: 700; }

/* ── 예시 문항 전용 헤더 (뱃지·안내·상황카드 포함 — 상단 고정) ── */
.quiz-practice-header {
  flex-shrink: 0;
  padding: 44px 18px 0;
  background: #F7F8FA;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

/* 예시 뱃지 */
.quiz-practice-badge {
  display: inline-flex;
  align-items: center;
  background: #E8F5E8;
  color: #3A7A3A;
  border: 1px solid #C4E0C4;
  border-radius: 50px;
  padding: 4px 14px;
  font-size: 12.5px;
  font-weight: 600;
  width: fit-content;
}

/* 결과 미반영 안내 */
.quiz-practice-notice {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #F4F7FC;
  border: 1px solid #D4E0F0;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  color: #4A5568;
  line-height: 1.4;
}

/* ── 중앙 영역: 상황카드 + 선택지 (100% 뷰포트 내 수용) ── */
.quiz-center-zone {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding-top: 6px;
  padding-bottom: 6px;
  overflow-y: hidden;
  gap: 0;
}

/* 상황카드 + 안내문 블록 */
.quiz-content-block {
  flex-shrink: 0;
  padding: 0;
}

/* 일반 문항 콘텐츠 블록 */
#quiz-content-normal {
  margin-top: 0;
}

/* 예시문항 뱃지 + 안내 묶음 — 상황카드 바로 위 */
.practice-top {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 18px 20px;
  margin-top: 10px;
  position: relative;
  top: 0;
}

/* ── 선택지 영역 ── */
.quiz-body {
  flex: 0 0 auto;
  padding: 14px 18px 0;
  display: flex;
  flex-direction: column;
}

/* 더 이상 단독 스페이서 불필요 — quiz-center-zone이 흡수 */
.quiz-spacer {
  display: none;
}

/* quiz-nav를 quiz-center-zone 안에서 하단에 붙이는 대신,
   center-zone 전체를 중앙으로 두기 위해 nav는 zone 내 flex 자식으로 자연 흐름 */

.choice-list-unified {
  display: flex;
  flex-direction: column;
  gap: 10px;    /* 8 → 10px: 행간 여유 */
  flex-shrink: 0;
}

/* 선택지 카드 — 내용 기반 크기, 세련된 모션 및 라운딩 */
.choice-card {
  background: #FEFEFE;
  border: 1.5px solid #E2E8F0;
  border-radius: 16px;
  padding: 16px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  width: 100%;
  text-align: left;
  font-family: var(--font);
  position: relative;
  flex-shrink: 0;
  min-height: 56px;
}

.choice-card:hover:not(:disabled):not(.disabled):not(.selected-first):not(.selected-second) {
  border-color: #CBD5E1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
}

.choice-card:active:not(:disabled) {
  transform: scale(0.98);
}

.choice-card:focus-visible {
  outline: 3px solid var(--color-mustard);
  outline-offset: 2px;
}

/* 카드 이모지 아이콘 - 숨김 */
.choice-card-icon { display: none; }

/* 텍스트 */
.choice-card-text {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.4;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 순위 뱃지 — 머스타드(1) & 파란색(2) 색상 엄수, 팝 애니메이션 적용 */
.choice-card-rank {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
  opacity: 0;
  background: transparent;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 1순위 선택 (머스타드 노란색 — 즉시 눈에 띄는 강한 테두리, 터치/포커스/호버 시에도 절대 유지) */
.choice-card.selected-first,
.choice-card.selected-first:hover,
.choice-card.selected-first:focus,
.choice-card.selected-first:active {
  border: 2.5px solid var(--color-mustard) !important;
  background: linear-gradient(180deg, #FFFDF7 0%, #FFFFFF 100%) !important;
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.25), 0 4px 14px rgba(245, 166, 35, 0.22) !important;
  transform: translateY(-1px);
  will-change: transform, box-shadow;
}

.choice-card.selected-first .choice-card-rank {
  opacity: 1;
  background: var(--color-mustard);
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(245, 166, 35, 0.4);
  animation: rankBadgePop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.choice-card.selected-first .choice-card-text { font-weight: 700; color: #1A1A2E; }

/* 2순위 선택 (로열 파란색 — 즉시 눈에 띄는 강한 테두리, 터치/포커스/호버 시에도 절대 유지) */
.choice-card.selected-second,
.choice-card.selected-second:hover,
.choice-card.selected-second:focus,
.choice-card.selected-second:active {
  border: 2.5px solid #4A7FCC !important;
  background: linear-gradient(180deg, #F4F8FE 0%, #FFFFFF 100%) !important;
  box-shadow: 0 0 0 3px rgba(74, 127, 204, 0.25), 0 4px 14px rgba(74, 127, 204, 0.22) !important;
  transform: translateY(-1px);
  will-change: transform, box-shadow;
}

.choice-card.selected-second .choice-card-rank {
  opacity: 1;
  background: #4A7FCC;
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(74, 127, 204, 0.4);
  animation: rankBadgePop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.choice-card.selected-second .choice-card-text { font-weight: 700; color: #1A1A2E; }

@keyframes rankBadgePop {
  0%   { transform: scale(0.3); opacity: 0; }
  70%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* 비활성화 */
.choice-card.disabled,
.choice-card:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── 하단 네비게이션 ── */
.quiz-nav {
  padding-inline: 18px;
  background: #F7F8FA;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 원형 이전 버튼 (세련된 피드백 & 아이콘 모션) */
.btn-quiz-prev-circle {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-quiz-prev-circle svg {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-quiz-prev-circle:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

.btn-quiz-prev-circle:hover svg {
  transform: translateX(-2px);
}

.btn-quiz-prev-circle:active { transform: scale(0.94); }
.btn-quiz-prev-circle:focus-visible { outline: 3px solid var(--color-blue); outline-offset: 2px; }

/* 다음 문항 버튼 (비활성화 -> Vibrant Royal Blue) */
.btn-quiz-next {
  background: #D1D5DB;
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 0 24px;
  height: 54px;
  font-size: 16px;
  font-weight: 700;
  flex: 1;
  cursor: not-allowed;
  font-family: var(--font);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  letter-spacing: -0.3px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-quiz-next:focus-visible { outline: 3px solid var(--color-mustard); outline-offset: 3px; }

/* 선택 완료 상태 — 파란색 */
.btn-quiz-next.ready {
  background: #4A7FCC;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(74, 127, 204, 0.28);
}

.btn-quiz-next.ready:hover {
  background: #3A6DB8;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(74, 127, 204, 0.38);
}

/* 1·2순위 미완료 상태 — 클릭 불가 및 은은한 스타일 */
.btn-quiz-next:disabled {
  cursor: not-allowed;
  opacity: 0.65;
  box-shadow: none;
}
.btn-quiz-next:disabled:hover { transform: none; }

/* 마지막 문항 (결과 보기) */
.btn-quiz-next.is-last.ready {
  background: var(--color-blue);
  box-shadow: 0 6px 18px rgba(47, 96, 163, 0.28);
}

.btn-quiz-next.is-last.ready:hover {
  background: #24508A;
  box-shadow: 0 10px 24px rgba(47, 96, 163, 0.38);
}

/* =========================================
   SCREEN: LOADING (뇌 애니메이션 리디자인)
   ========================================= */
/* =========================================
   SCREEN: LOADING (100% 정밀 중앙 정렬 & 판타스틱 모션)
   ========================================= */
#screen-loading {
  background: #FEFEFE;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  height: 100dvh;
  padding: 40px 24px;
  box-sizing: border-box;
}

/* 뇌 SVG 컨테이너 (정밀 수평/수직 정렬 & 광원 아우라) */
.loading-brain-wrap {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0 auto 36px auto;
  background: radial-gradient(circle at center, rgba(74, 127, 204, 0.15) 0%, rgba(245, 166, 35, 0.08) 50%, transparent 70%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 뇌 SVG 자체 (입체 무중력 들림 & 로얄 네온 드롭 섀도) */
.loading-brain-svg {
  width: 100%;
  height: 100%;
  animation: brainFloat 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  display: block;
  margin: 0 auto;
}

@keyframes brainFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 8px 16px rgba(124, 92, 191, 0.28)) drop-shadow(0 0 10px rgba(74, 127, 204, 0.2));
  }
  50% {
    transform: translateY(-10px) scale(1.06);
    filter: drop-shadow(0 18px 28px rgba(74, 127, 204, 0.42)) drop-shadow(0 0 16px rgba(245, 166, 35, 0.35));
  }
}

/* 뇌 주변 동심원 펄스 링 (수평 정밀 센터) */
.loading-brain-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  margin-top: -50%;
  margin-left: -50%;
  border-radius: 50%;
  border: 2px solid rgba(74, 127, 204, 0.35);
  box-shadow: 0 0 16px rgba(74, 127, 204, 0.2);
  animation: ringPulse 2.4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  pointer-events: none;
}

.loading-brain-ring:nth-child(2) {
  animation-delay: 0.8s;
  border-color: rgba(245, 166, 35, 0.3);
  box-shadow: 0 0 16px rgba(245, 166, 35, 0.2);
}

.loading-brain-ring:nth-child(3) {
  animation-delay: 1.6s;
  border-color: rgba(124, 92, 191, 0.25);
  box-shadow: 0 0 16px rgba(124, 92, 191, 0.15);
}

@keyframes ringPulse {
  0%   { transform: scale(0.8); opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* 4방향 대칭 시냅스 파티클 (12시, 3시, 6시, 9시 완전 대칭 정렬) */
.loading-spark {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
}

.loading-spark:nth-child(4) {
  top: 2px; left: 50%; transform: translateX(-50%);
  background: var(--color-mustard);
  box-shadow: 0 0 12px var(--color-mustard);
  animation: sparkTwinkleTop 2s ease-in-out infinite;
}

.loading-spark:nth-child(5) {
  top: 50%; right: 2px; transform: translateY(-50%);
  background: #4A7FCC;
  box-shadow: 0 0 12px #4A7FCC;
  animation: sparkTwinkleRight 2s ease-in-out 0.5s infinite;
}

.loading-spark:nth-child(6) {
  bottom: 2px; left: 50%; transform: translateX(-50%);
  background: var(--color-mustard);
  box-shadow: 0 0 12px var(--color-mustard);
  animation: sparkTwinkleBottom 2s ease-in-out 1s infinite;
}

.loading-spark:nth-child(7) {
  top: 50%; left: 2px; transform: translateY(-50%);
  background: #7C5CBF;
  box-shadow: 0 0 12px #7C5CBF;
  animation: sparkTwinkleLeft 2s ease-in-out 1.5s infinite;
}

@keyframes sparkTwinkleTop {
  0%, 100% { opacity: 0.3; transform: translateX(-50%) scale(0.7); }
  50%       { opacity: 1; transform: translateX(-50%) scale(1.4) translateY(-4px); }
}

@keyframes sparkTwinkleRight {
  0%, 100% { opacity: 0.3; transform: translateY(-50%) scale(0.7); }
  50%       { opacity: 1; transform: translateY(-50%) scale(1.4) translateX(4px); }
}

@keyframes sparkTwinkleBottom {
  0%, 100% { opacity: 0.3; transform: translateX(-50%) scale(0.7); }
  50%       { opacity: 1; transform: translateX(-50%) scale(1.4) translateY(4px); }
}

@keyframes sparkTwinkleLeft {
  0%, 100% { opacity: 0.3; transform: translateY(-50%) scale(0.7); }
  50%       { opacity: 1; transform: translateY(-50%) scale(1.4) translateX(-4px); }
}

.loading-title {
  font-size: 24px;
  font-weight: 900;
  color: #1E293B;
  margin-bottom: 10px;
  letter-spacing: -0.6px;
  text-align: center;
}

.loading-subtitle {
  font-size: 14.5px;
  color: #64748B;
  margin-bottom: 36px;
  line-height: 1.6;
  font-weight: 500;
  text-align: center;
}

/* 하단 웨이브 로딩 점 (중앙 정렬) */
.loading-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 0 auto;
}

.loading-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  animation: dotWave 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.loading-dot:nth-child(1) {
  background: #4A7FCC;
  box-shadow: 0 3px 10px rgba(74, 127, 204, 0.4);
}

.loading-dot:nth-child(2) {
  animation-delay: 0.2s;
  background: var(--color-mustard);
  box-shadow: 0 3px 10px rgba(245, 166, 35, 0.4);
}

.loading-dot:nth-child(3) {
  animation-delay: 0.4s;
  background: #2F60A3;
  box-shadow: 0 3px 10px rgba(47, 96, 163, 0.4);
}

@keyframes dotWave {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.5; }
  50%       { transform: translateY(-10px) scale(1.3); opacity: 1; }
}

/* =========================================
   SCREEN: RESULT (전면 재구성)
   ========================================= */
#screen-result {
  background: #F7F8FA;
  min-height: 100vh;
  min-height: 100dvh;
  height: auto;
  overflow-y: visible;
  padding-bottom: max(40px, calc(28px + env(safe-area-inset-bottom)));
}

/* 이미지 저장 캡처 대상: Hero ~ 저자 소통 카드까지 */
#result-capture-area {
  background: #FEFEFE;
  padding-bottom: 24px;
}

/* ── Hero 배너 (카카오톡/사파리 상단바 커버 완벽 방지 100px 탑 여백) ── */
.result-hero {
  background: #FEFEFE;
  padding: max(100px, calc(80px + env(safe-area-inset-top))) 24px 24px;
  text-align: center;
  position: relative;
  overflow: visible;
  border-bottom: 1px solid #E8EBF0;
}

.result-hero::before {
  display: none;  /* 장식 원 제거 */
}

.result-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(47,96,163,0.08);
  border: 1.5px solid rgba(47,96,163,0.25);
  border-radius: 50px;
  padding: 6px 18px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-blue);
  letter-spacing: 0.3px;
  margin-bottom: 14px;
}

.result-name {
  font-size: 32px;
  font-weight: 900;
  color: #1E293B;
  letter-spacing: -0.6px;
  margin-top: 8px;
  margin-bottom: 24px;
  line-height: 1.3;
  position: relative;
  z-index: 10;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.result-name span { color: var(--color-mustard); }

.result-oneline {
  font-size: 14px;
  color: var(--color-text-sub);
  line-height: 1.65;
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.result-image-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 380px;
  margin: 24px auto 12px auto;
  border-radius: 20px;
  overflow: visible;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.result-image {
  width: 100%;
  max-width: 380px;
  height: auto;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  display: block;
  margin: 0 auto;
}

.result-image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  gap: 6px;
}

.result-image-placeholder .placeholder-emoji { font-size: 64px; }
.result-image-placeholder .placeholder-text {
  font-size: 11px;
  color: var(--color-text-light);
  font-weight: 500;
}

/* ── 섹션 컨텐츠 — 카드 기반 레이아웃으로 시각적 분리감 극대화 ── */
.result-content {
  padding: 16px 16px 0;
  background: #F7F8FA;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.result-section {
  background: #FEFEFE;
  border-radius: 20px;
  padding: 24px 20px;
  border: 1px solid #E8EBF0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.result-section:last-child { border-bottom: none; }

/* 섹션 제목 — 시선 유도 계층 구조 */
.result-section-title {
  font-size: 17px;
  font-weight: 900;
  color: #1E293B;
  margin-bottom: 16px;
  letter-spacing: -0.4px;
  padding-bottom: 12px;
  border-bottom: 2px solid #F0F2F5;
  display: flex;
  align-items: center;
  gap: 8px;
}

.result-section-text {
  font-size: 14.5px;
  color: #555577;
  line-height: 1.85;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.result-section-text p {
  margin-bottom: 10px;
}

.result-section-text p:last-child {
  margin-bottom: 0;
}

.result-impact {
  background: #FFF8EE;
  border-left: 4px solid var(--color-mustard);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 14px 16px;
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.8;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ① 한 줄 정의 섹션 — 히어로 바로 아래 핵심 메시지 카드 */
.result-section-oneline {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  margin-top: -8px;
}

.result-section-oneline .result-oneline {
  background: linear-gradient(135deg, #EEF3FB 0%, #F0F5FF 100%);
  border-radius: 16px;
  padding: 20px 20px;
  font-size: 15px;
  font-weight: 700;
  color: #1B3A6B;
  line-height: 1.65;
  margin-bottom: 0;
  width: 100%;
  word-break: keep-all;
  overflow-wrap: break-word;
  border: 1px solid rgba(47, 96, 163, 0.12);
  text-align: center;
}

/* 질문 그래프: ①첫 질문(1순위) / ②두 번째 질문(2순위) 컴팩트 블록 */
.result-graph-block {
  margin-bottom: 16px;
}
.result-graph-block:last-child {
  margin-bottom: 0;
}
.result-graph-block-second {
  padding-top: 14px;
  border-top: 1.5px dashed #E8EBF0;
}
.result-graph-block-third {
  padding-top: 14px;
  border-top: 1.5px dashed #E8EBF0;
}
.result-graph-subtitle {
  font-size: 13.5px;
  font-weight: 800;
  color: #1E293B;
  margin-bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  letter-spacing: -0.2px;
}
.result-graph-subtitle-desc {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-sub);
}

/* 유형 태그 */
.result-type-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

/* 예시 질문 인용구 */
.result-trait-examples {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.result-trait-example {
  background: #F8FAFB;
  border-left: 3px solid var(--color-blue);
  border-radius: 0 12px 12px 0;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #1E293B;
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ④ 아이의 뇌에는 어떤 변화가 일어날까요? */
.result-section-brain {
  background: linear-gradient(135deg, #F8F5FF 0%, #F0ECFA 100%);
  border-radius: 20px;
  padding: 24px 20px;
  border: 1px solid rgba(124, 92, 191, 0.15);
  box-shadow: 0 2px 12px rgba(124, 92, 191, 0.06);
}

.result-section-brain .result-section-title {
  border-bottom-color: rgba(124, 92, 191, 0.12);
}

.result-brain-areas {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.result-brain-area-tag {
  display: inline-flex;
  align-items: center;
  background: rgba(124,92,191,0.12);
  border: 1.5px solid rgba(124,92,191,0.25);
  border-radius: 50px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #7C5CBF;
}

.result-section-brain .result-section-text p {
  margin-bottom: 10px;
}
.result-section-brain .result-section-text p:last-child {
  margin-bottom: 0;
}

/* ⑤ 이 유형이 아이에게 주는 선물 */
.result-section-gifts {
  border: 1px solid #E8EBF0;
}

.result-gifts-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.result-gifts-list li {
  position: relative;
  padding-left: 28px;
  font-size: 14.5px;
  color: var(--color-text);
  line-height: 1.65;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.result-gifts-list li::before {
  content: '🌱';
  position: absolute;
  left: 0;
  top: 0;
  font-size: 14px;
}

/* ⑥ 질문 균형 분석 */
.result-balance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.result-balance-box {
  border-radius: 16px;
  padding: 16px 14px;
}

.result-balance-sufficient {
  background: #EDF8F1;
  border: 1.5px solid rgba(39,174,96,0.2);
}

.result-balance-complement {
  background: #FFF7ED;
  border: 1.5px solid rgba(245,166,35,0.2);
}

.result-balance-heading {
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 10px;
  letter-spacing: -0.2px;
}

.result-balance-sufficient .result-balance-heading { color: var(--color-success); }
.result-balance-complement .result-balance-heading { color: #D4891A; }

.result-balance-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.result-balance-list li {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  position: relative;
  padding-left: 14px;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.result-balance-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--color-text-light);
}

/* ⑦ 오늘의 새로운 첫 질문 — 독립 카드 섹션 */
.result-today-wrap {
  background: #FEFEFE;
  margin: 0 16px;
  padding: 24px 20px;
  border-radius: 20px;
  border: 1px solid #E8EBF0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.result-today-wrap .result-section-title {
  border-bottom-color: rgba(47, 96, 163, 0.1);
}

.result-today-question {
  background: linear-gradient(135deg, #2F60A3 0%, #4A7FCC 100%);
  color: #fff;
  border-radius: 16px;
  padding: 20px 20px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.6;
  margin-bottom: 16px;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: break-word;
  box-shadow: 0 6px 20px rgba(47, 96, 163, 0.2);
}

.result-today-tips p {
  font-size: 13.5px;
  color: #555577;
  line-height: 1.75;
  margin-bottom: 8px;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.result-today-tips p:last-child { margin-bottom: 0; }

/* ⑧ 기억하세요 (공통 메시지) — 따뜻한 톤 카드 */
.result-reminder-wrap {
  background: linear-gradient(135deg, #FFF9F0 0%, #FFF5E6 100%);
  margin: 16px 16px;
  padding: 24px 20px;
  border-radius: 20px;
  border: 1px solid rgba(245,166,35,0.18);
  box-shadow: 0 2px 8px rgba(245, 166, 35, 0.06);
}

.result-reminder-wrap .result-section-title {
  color: #C9770F;
  border-bottom-color: rgba(245, 166, 35, 0.12);
}

.result-reminder-text {
  font-size: 13.5px;
  color: #555555;
  line-height: 1.9;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.type-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
}

.type-tag-main { background: var(--color-blue); color: #fff; }
.type-tag-sub  { background: rgba(47,96,163,0.1); color: var(--color-blue); border: 1px solid rgba(47,96,163,0.2); }

/* 질문 그래프: 컴팩트 슬림 가로 막대 그래프 (슬림 12px 트랙 & 알약 캡슐 타입) */
.result-bar-graph {
  background: #F8FAFC;
  border: 1px solid #EEF0F3;
  border-radius: 12px;
  padding: 10px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.result-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.result-bar-row-label {
  width: 40px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: #1E293B;
  text-align: left;
  word-break: keep-all;
}

.result-bar-row-track {
  position: relative;
  flex: 1;
  height: 12px;
  background: #EBF0F5;
  border-radius: 50px;
  overflow: hidden;
}

.result-bar-row-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 50px;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.result-bar-row-pct {
  width: 38px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.result-chart-layout {
  display: flex;
  align-items: center;
  gap: 16px;
}

.result-donut-wrap {
  position: relative;
  width: 130px;
  height: 130px;
  flex-shrink: 0;
}

.result-rank-table {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.result-rank-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 1;
}

.result-rank-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #9AA3B0;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.result-rank-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.result-rank-label {
  flex: 1;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1;
  display: flex;
  align-items: center;
}

.result-rank-pct {
  font-weight: 800;
  color: var(--color-blue);
  font-size: 13px;
  min-width: 42px;
  text-align: right;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* ── 책 아코디언 — 통합 카드 ── */
.result-accordion-wrap {
  padding: 0 16px;
  margin-bottom: 0;
}

.result-accordion {
  background: #FEFEFE;
  border-radius: 16px;
  border: 1px solid #E8EBF0;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.result-accordion-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: #1E293B;
  list-style: none;
  user-select: none;
  gap: 10px;
}

.result-accordion-summary::-webkit-details-marker { display: none; }
.result-accordion-summary::marker { display: none; }

.result-accordion-label { flex: 1; }

.result-accordion-icon {
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.result-accordion[open] .result-accordion-icon {
  transform: rotate(180deg);
}

.result-accordion-body {
  padding: 0 20px 18px;
}

.result-book-btn {
  width: 100%;
  background: var(--color-mustard);
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  text-align: center;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 12px rgba(245, 166, 35, 0.2);
}

.result-book-btn:hover { background: #D4891A; box-shadow: 0 6px 18px rgba(245, 166, 35, 0.3); transform: translateY(-1px); }
.result-book-btn:active { transform: scale(0.98); }

/* ── 저자 소통 — 통합 카드 ── */
.result-social-wrap {
  padding: 0 16px;
  margin-bottom: 0;
}

.result-social-label {
  background: #FEFEFE;
  border: 1px solid #E8EBF0;
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  padding: 16px 20px 10px;
  font-size: 13px;
  color: #777;
  display: block;
  text-align: center;
  font-weight: 600;
}

.result-social-grid {
  background: #FEFEFE;
  border: 1px solid #E8EBF0;
  border-top: none;
  border-radius: 0 0 16px 16px;
  padding: 0 20px 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.result-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1.5px solid #EEF0F3;
  background: #FAFBFC;
  font-size: 14px;
  font-weight: 700;
  color: #1E293B;
  cursor: pointer;
  font-family: var(--font);
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.result-social-btn--insta:hover {
  background: #FFF5F7;
  border-color: #F77737;
  box-shadow: 0 4px 14px rgba(247,119,55,0.18);
  transform: translateY(-2px);
}

.result-social-btn--yt:hover {
  background: #FFF5F5;
  border-color: #FF0000;
  box-shadow: 0 4px 14px rgba(255,0,0,0.18);
  transform: translateY(-2px);
}

.result-social-btn:active { transform: scale(0.97); }

/* 이미지 캡처 하단 워터마크 표시 영역 */
.result-capture-footer {
  text-align: center;
  padding: 24px 16px 28px;
  background: #FEFEFE;
  border-top: 1px solid #E8EBF0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.result-watermark-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, #F8FAFC 0%, #EDF2F7 100%);
  border: 1px solid #E2E8F0;
  padding: 8px 20px;
  border-radius: 50px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.result-watermark-tag {
  font-size: 13.5px;
  font-weight: 800;
  background: linear-gradient(135deg, #833AB4 0%, #FD1D1D 50%, #FCB045 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.3px;
}

/* ── 결과 공유하기 카드 ── */
.result-share-wrap {
  padding: 0 16px;
  margin-bottom: 16px;
}

.result-share-card {
  background: #FEFEFE;
  border-radius: 20px;
  border: 1px solid #E8EBF0;
  padding: 24px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.result-share-header {
  text-align: center;
  margin-bottom: 16px;
}

.result-share-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(47,96,163,0.08);
  border: 1px solid rgba(47,96,163,0.2);
  border-radius: 50px;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 800;
  color: var(--color-blue);
  margin-bottom: 6px;
}

.result-share-subtitle {
  font-size: 12.5px;
  color: var(--color-text-sub);
  margin: 0;
}

.result-share-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.result-share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.result-share-btn--link {
  background: #EFF5FE;
  border: 1.5px solid #D2E3FC;
  color: #2F60A3;
}

.result-share-btn--link:hover {
  background: #E2ECFE;
  border-color: #2F60A3;
  box-shadow: 0 6px 16px rgba(47,96,163,0.18);
  transform: translateY(-2px);
}

.result-share-btn--image {
  background: #FFF8EE;
  border: 1.5px solid #FDE68A;
  color: #D97706;
}

.result-share-btn--image:hover {
  background: #FEF3C7;
  border-color: #D97706;
  box-shadow: 0 6px 16px rgba(217,119,6,0.18);
  transform: translateY(-2px);
}

.result-share-btn:active { transform: scale(0.97); }

/* ── 다시 테스트하기 ── */
.restart-wrap {
  padding: 8px 16px 36px;
}

.btn-restart {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 56px;
  background: linear-gradient(135deg, #1E293B 0%, #334155 100%);
  color: #FFFFFF;
  border: none;
  border-radius: 50px;
  padding: 0 24px;
  font-size: 16px;
  font-weight: 800;
  font-family: var(--font);
  cursor: pointer;
  text-align: center;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  letter-spacing: -0.3px;
  box-shadow: 0 8px 20px rgba(30,41,59,0.22);
}

.btn-restart:hover {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  box-shadow: 0 12px 28px rgba(15,23,42,0.35);
  transform: translateY(-2px);
}

.btn-restart svg {
  transition: transform 0.4s ease;
}

.btn-restart:hover svg {
  transform: rotate(-180deg);
}

.btn-restart:active { transform: scale(0.98); }
.btn-restart:focus-visible { outline: 3px solid var(--color-mustard); outline-offset: 3px; }

/* =========================================
   MODAL OVERLAY & IMAGE PREVIEW MODAL
   ========================================= */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeIn 0.2s ease;
}

.modal-box {
  background: #FEFEFE;
  border-radius: 24px;
  padding: 24px 20px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.image-preview-box {
  max-width: 380px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  padding: 20px 18px;
}

.image-preview-wrap {
  width: 100%;
  max-height: 52vh;
  overflow-y: auto;
  border-radius: 14px;
  border: 1.5px solid #E2E8F0;
  background: #F8FAFC;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 6px;
  -webkit-overflow-scrolling: touch;
}

.image-preview-wrap img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* =========================================
   COVER: 이미지 스타일은 위의 .cover-illust-img 참조
   =========================================*/

/* =========================================
   RESPONSIVE — 퀴즈 화면 핵심
   모든 화면에서 여백 없이 꽉 채우기
   ========================================= */

/* body.quiz-active 클래스 상태일 때만 overflow:hidden 적용 */
body.quiz-active {
  overflow: hidden;
  height: 100dvh;
}

/* 퀴즈 화면: body.quiz-active + #app 구조 */
body.quiz-active #app {
  height: 100dvh;
  overflow: hidden;
}

/* 퀴즈 화면만 100dvh 고정, 나머지 화면은 스크롤 허용 */
#screen-quiz {
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}

/* =========================================
   RESPONSIVE BREAKPOINTS
   ========================================= */

/* ── 모바일 기본 (< 480px) ── */
@media (max-width: 479px) {
  /* 모바일 CTA 버튼 위치 하향 조정 — 실제 기기(모바일) 테스트 결과,
     선택지 목록 등 콘텐츠와 버튼이 겹치는 문제가 확인되어
     모든 화면(커버/성별/안내/퀴즈)의 버튼을 화면 기준 3cm 아래로 이동.
     dvh 기준 padding-block-end 값을 3cm만큼 줄여 버튼을 그만큼 아래로 내림
     (padding-block-end가 작아질수록 위 콘텐츠 영역이 커져 버튼이 더 아래로 밀림) */
  .cta-fixed-zone {
    padding-block-end: max(0px, calc(30vh - 3cm));
  }
  @supports (height: 100dvh) {
    .cta-fixed-zone {
      padding-block-end: max(0px, calc(30dvh - 3cm));
    }
  }

  /* 커버 */
  .cover-title { font-size: 24px; }
  .cover-subtitle { font-size: 13px; }
  .cover-label { padding: 24px 20px 0; }
  .cover-text-area { padding: 10px 20px 0; }
  .cover-btn-wrap { padding-inline: 20px; }

  /* 퀴즈 헤더 (갤럭시/모바일 세로 스크롤 100% 차단 컴팩트 비례) */
  .quiz-normal-header { padding: max(42px, calc(30px + env(safe-area-inset-top))) 14px 4px; }
  .quiz-practice-header { padding: 38px 14px 0; }
  #quiz-content-normal { margin-top: 0; }
  .quiz-center-zone { padding-top: 4px; padding-bottom: 2px; }
  .quiz-situation-card { padding: 4px 10px; gap: 18px; margin: 4px 0; }
  .quiz-sit-emoji { font-size: 46px; }
  .quiz-sit-text { font-size: 18px; line-height: 1.35; }
  .quiz-instruction { font-size: 12px; margin: 4px 0 6px; }

  /* 선택지 */
  .quiz-body { padding: 2px 12px 0; }
  .choice-list-unified { gap: 6px; }
  .choice-card { min-height: 46px; padding: 10px 12px; border-radius: 14px; }
  .choice-card-text { font-size: 13px; line-height: 1.35; }

  /* 하단 버튼 */
  .quiz-nav { padding-inline: 12px; gap: 8px; height: 50px; }
  .btn-quiz-prev-circle { width: 48px; height: 48px; }
  .btn-quiz-next { height: 48px; font-size: 14px; }

  /* 성별 화면 */
  .gender-title { font-size: 22px; }
  .gender-card-grid { gap: 12px; }
  .screen-back-btn { top: 16px; left: 16px; }

  /* 결과 화면 — 카드 레이아웃 모바일 최적화 */
  .result-hero { padding: 24px 16px 0px; }
  .result-name { font-size: 22px; }
  .result-image-wrap { width: calc(100% + 32px); margin: 0 -16px -14px -16px; }
  .result-section-title { font-size: 15px; padding-bottom: 10px; margin-bottom: 14px; }
  .result-content { padding: 12px 12px 0; gap: 12px; }
  .result-section { padding: 20px 16px; border-radius: 16px; }
  .result-section-oneline { padding: 0; }
  .result-section-oneline .result-oneline { padding: 16px 16px; font-size: 14px; }
  .result-today-wrap { margin: 0 12px; padding: 20px 16px; border-radius: 16px; }
  .result-reminder-wrap { margin: 12px 12px; padding: 20px 16px; border-radius: 16px; }
  .result-accordion-wrap { padding: 0 12px; }
  .result-social-wrap { padding: 0 12px; }
  .result-share-wrap { padding: 0 12px; }
  .restart-wrap { padding: 8px 12px 28px; }
  .result-balance-grid { gap: 8px; }
  .result-balance-box { padding: 14px 12px; border-radius: 14px; }

  /* 도넛 차트 모바일 */
  .result-donut-wrap { width: 120px; height: 120px; }
  .result-rank-row { font-size: 12px; gap: 6px; }
  .result-rank-num { width: 18px; height: 18px; font-size: 10px; }
  .result-rank-pct { font-size: 12px; min-width: 36px; }
}

/* ── 태블릿 (480px ~ 767px) ── */
@media (min-width: 480px) and (max-width: 767px) {
  /* 퀴즈 헤더 */
  .quiz-normal-header { padding: 66px 18px 12px; }
  .quiz-practice-header { padding: 46px 18px 0; }
  .quiz-situation-card { padding: 12px 14px; }
  .quiz-sit-text { font-size: 20px; }

  /* 선택지 */
  .quiz-body { padding: 30px 18px 6px; }
  .choice-card { min-height: 52px; }
  .choice-card-text { font-size: 14px; }

  /* 하단 버튼 — .cta-fixed-zone 공통 규칙으로 다른 화면과 동일 위치 유지, height는 52px로 고정(다른 화면 버튼과 동일) */
  .quiz-nav { padding-inline: 18px; }
  .btn-quiz-next { font-size: 15px; }
}

/* ── PC / 와이드 (768px+) ── */
@media (min-width: 768px) {
  /* 앱 컨테이너 중앙 정렬 */
  #app {
    max-width: 480px;
    margin: 0 auto;
    box-shadow: 0 0 40px rgba(0,0,0,0.12);
    min-height: 100dvh;
  }

  /* body 배경 회색 */
  body { background: #E8EBF0; overflow: auto; }

  /* 퀴즈 화면: PC에서도 높이 고정 */
  #screen-quiz {
    height: 100dvh !important;
  }

  /* 커버 타이틀 더 크게 */
  .cover-title { font-size: 30px; }

  /* 성별 화면 여백 — 버튼 위치는 .cta-fixed-zone 공통 규칙이 담당 */
  .gender-screen-wrap { padding: 20px 28px 0; }
  /* 안내 화면 — 버튼 위치는 .cta-fixed-zone 공통 규칙이 담당 */
  .intro-screen-wrap { padding: 20px 28px 0; }

  /* 결과 화면 — 이미지와 "당신은" 설명 사이 간격 최소화 */
  .result-hero { padding: 40px 32px 0px; }
  .result-name { font-size: 28px; }
  .result-image-wrap { width: calc(100% + 64px); margin: 0 -32px -20px -32px; }
  .result-section-title { font-size: 17px; }
  .result-content { padding: 0 28px; }
  .result-accordion-wrap { padding: 0 28px; }
  .result-social-wrap { padding: 0 28px; }
  .result-share-wrap { padding: 0 28px; }
  .restart-wrap { padding: 8px 28px 40px; }

  /* 퀴즈 헤더 */
  .quiz-normal-header { padding: 76px 22px 12px; }
  .quiz-practice-header { padding: 56px 22px 0; }
  .quiz-body { padding: 32px 22px 6px; }
  /* 하단 버튼 — .cta-fixed-zone 공통 규칙으로 다른 화면과 동일 위치 유지 */
  .quiz-nav { padding-inline: 22px; }

  /* 선택지 카드 */
  .choice-card { min-height: 58px; padding: 0 18px; }
  .choice-card-text { font-size: 15px; }
  /* CTA 버튼 height는 52px로 고정(다른 화면 버튼과 동일) — 별도 오버라이드 없음 */
}

.share-btn.kakao { border-color: #F9E000; background: #FFFCE8; }
.share-btn.kakao:hover { background: #FFF8C0; }
.share-btn.kakao .share-btn-label { color: #7A6800; }

.restart-wrap { padding: 20px 24px 0; }

/* =========================================
   TOAST
   ========================================= */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  background: #1A1A2E;
  color: #fff;
  padding: 12px 22px;
  border-radius: 50px;
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: 0 6px 24px rgba(0,0,0,0.22);
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.28s ease, transform 0.28s ease;
  white-space: nowrap;
  max-width: 90vw;
  text-align: center;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}

.toast.success { background: var(--color-success); }
.toast.error   { background: var(--color-red); }

/* =========================================
   MODAL
   ========================================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 8888;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.modal-overlay.show {
  opacity: 1;
  pointer-events: all;
}

.modal-box {
  background: var(--color-bg);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 28px 24px 36px;
  width: 100%;
  max-width: 480px;
  transform: translateY(20px);
  transition: transform 0.25s ease;
  text-align: center;
}

.modal-overlay.show .modal-box { transform: translateY(0); }

.modal-title {
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 8px;
}

.modal-desc {
  font-size: 13.5px;
  color: var(--color-text-sub);
  line-height: 1.65;
  margin-bottom: 20px;
}

.modal-actions { display: flex; flex-direction: column; gap: 10px; }

/* =========================================
   STATS PAGE
   ========================================= */
.stats-container {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px 60px;
  background: var(--color-bg);
  min-height: 100vh;
}

.stats-header {
  background: linear-gradient(135deg, #1B3A6B, #2F60A3);
  padding: 28px 24px;
  margin: 0 -16px 28px;
  color: #fff;
}

.stats-header h1 {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 4px;
}

.stats-header p {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
}

.stats-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.stats-refresh-btn,
.stats-export-btn,
.stats-reset-btn {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  transition: background var(--transition);
  white-space: nowrap;
}

.stats-refresh-btn:hover,
.stats-export-btn:hover { background: rgba(255,255,255,0.25); }

/* 엑셀 다운로드 버튼 — 초록 계열로 구분 */
.stats-export-btn {
  background: rgba(39,174,96,0.85);
  border-color: rgba(39,174,96,0.9);
}
.stats-export-btn:hover { background: rgba(39,174,96,1); }

/* 데이터 초기화 버튼 — 위험 동작이므로 붉은 계열로 구분 */
.stats-reset-btn {
  background: rgba(219,68,39,0.15);
  border-color: rgba(219,68,39,0.5);
  color: #FFD9CE;
}
.stats-reset-btn:hover { background: rgba(219,68,39,0.32); color: #fff; }

/* ===========================================
   데이터 초기화 확인 모달
   =========================================== */
.reset-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}

.reset-modal-box {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  max-width: 360px;
  width: 100%;
  box-shadow: var(--shadow-lg);
}

.reset-modal-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--color-red);
  margin-bottom: 12px;
}

.reset-modal-desc {
  font-size: 13.5px;
  color: var(--color-text-sub);
  line-height: 1.65;
  margin-bottom: 16px;
  word-break: keep-all;
}

.reset-modal-input {
  width: 100%;
  height: 44px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0 14px;
  font-size: 14px;
  font-family: var(--font);
  margin-bottom: 8px;
}

.reset-modal-input:focus { outline: 2px solid var(--color-red); border-color: var(--color-red); }

/* =========================================
   RESPONSIVE — 창(뷰포트) 세로 높이가 작을 때 (퀴즈 화면 전용)
   ※ 이 블록은 max-width 기준 모바일/PC 스타일과는 완전히 별개이며,
   기존 규칙을 덮어쓰지 않는다. "브라우저 창을 세로로 작게 줄였을 때"만
   해당 되는 케이스로, 텍스트가 겹쳐 보이던 문제를 해결하기 위한
   높이(max-height) 기준 전용 보정이다. 모바일 실기기(항상 dvh가 충분히
   큼)나 PC 풀스크린에는 아래 규칙이 전혀 적용되지 않는다.
   ========================================= */
@media (max-height: 700px) {
  /* 콘텐츠가 영역보다 커질 때 justify-content:center가 위쪽(헤더 방향)으로
     넘쳐 겹치게 만드는 문제 방지 → 창이 작을 때는 위에서부터 쌓이도록 전환 */
  #screen-quiz .quiz-center-zone {
    justify-content: flex-start;
  }
  #screen-quiz .quiz-normal-header {
    padding-top: 28px;
    padding-bottom: 6px;
  }
  #screen-quiz .quiz-practice-header {
    padding-top: 16px;
  }
  #screen-quiz .quiz-situation-card {
    margin-top: 0;         /* 음수 마진 제거 → 헤더와의 겹침 방지 */
    padding-bottom: 2px;
    gap: 6px;
  }
  #screen-quiz .quiz-sit-emoji {
    font-size: 34px;
  }
  #screen-quiz .quiz-sit-text {
    font-size: 17px;
  }
  #screen-quiz .quiz-instruction {
    font-size: 12px;
    margin-top: 2px;
  }
  #screen-quiz .practice-top {
    padding-bottom: 12px;
  }
  #screen-quiz .quiz-body {
    padding-top: 12px;
  }
  #screen-quiz .choice-list-unified {
    gap: 6px;
  }
  #screen-quiz .choice-card {
    min-height: 44px;
    padding: 10px 14px;
  }
  #screen-quiz .cta-fixed-zone,
  .cta-fixed-zone {
    padding-block-end: max(16px, calc(10px + env(safe-area-inset-bottom)));
    padding-block-start: 8px;
  }
}

/* 아주 작은 높이(모바일 브라우저 주소창 노출 등)에서 한 번 더 축소 */
@media (max-height: 560px) {
  #screen-quiz .quiz-normal-header {
    padding-top: 18px;
    padding-bottom: 4px;
  }
  #screen-quiz .quiz-practice-header {
    padding-top: 10px;
  }
  #screen-quiz .quiz-sit-emoji {
    font-size: 26px;
  }
  #screen-quiz .quiz-sit-text {
    font-size: 15px;
  }
  #screen-quiz .choice-card {
    min-height: 40px;
    padding: 8px 12px;
  }
  #screen-quiz .choice-card-text {
    font-size: 12.5px;
  }
}

/* =========================================
   RESPONSIVE — 창(뷰포트) 세로 높이가 작을 때 (결과 화면 전용)
   ※ 결과 캐릭터 이미지는 aspect-ratio:1/1(정사각형)이라 "가로폭" 기준으로
   높이가 결정된다. 창을 세로로 짧게 줄이면 이미지 높이는 그대로인데
   화면(뷰포트)만 작아져서, 이미지 위쪽(캐릭터 얼굴 등)이 화면 밖으로
   밀려나 스크롤해야만 보이는 "잘림" 문제가 있었다. 창이 세로로 작을
   때만 이미지의 최대 높이를 뷰포트 높이 비율로 제한해 항상 이미지
   전체가 한 화면에 들어오도록 한다. 모바일 실기기나 PC 풀스크린에는
   전혀 적용되지 않는다. */
@media (max-height: 700px) {
  #screen-result .result-image-wrap {
    aspect-ratio: unset;
    height: min(100vw, 42vh);
  }
  #screen-result .result-hero {
    padding-top: 20px;
  }
}

@media (max-height: 560px) {
  #screen-result .result-image-wrap {
    height: min(100vw, 34vh);
  }
  #screen-result .result-hero {
    padding-top: 14px;
  }
  #screen-result .result-name {
    font-size: 19px;
    margin-bottom: 4px;
  }
  #screen-result .result-type-badge {
    margin-bottom: 6px;
  }
}

.reset-modal-progress {
  font-size: 12.5px;
  color: var(--color-text-sub);
  margin-bottom: 8px;
}

.reset-modal-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.reset-modal-btn {
  flex: 1;
  height: 46px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  font-family: var(--font);
  transition: all var(--transition);
}

.reset-modal-btn-cancel {
  background: #F0F1F5;
  color: var(--color-text-sub);
}
.reset-modal-btn-cancel:hover { background: #E4E6EB; }

.reset-modal-btn-danger {
  background: var(--color-red);
  color: #fff;
}
.reset-modal-btn-danger:hover:not(:disabled) { background: #C13A22; }
.reset-modal-btn-danger:disabled {
  background: #E8B8AE;
  cursor: not-allowed;
}

.reset-modal-btn-primary {
  background: var(--color-blue);
  color: #fff;
}
.reset-modal-btn-primary:hover { background: #234C82; }

/* ===========================================
   관리자 접속용 투명 버튼 (커버 화면 우측 상단)
   =========================================== */
.admin-access-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 64px;
  height: 64px;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: default;
  z-index: 50;
  -webkit-tap-highlight-color: transparent;
}

.admin-pw-error {
  font-size: 12.5px;
  color: var(--color-red);
  margin-bottom: 8px;
}

/* KPI cards */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}

.kpi-card {
  background: var(--color-card-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px 12px;
  text-align: center;
}

.kpi-value {
  font-size: 28px;
  font-weight: 900;
  color: var(--color-blue);
  line-height: 1.1;
  margin-bottom: 4px;
}

.kpi-label {
  font-size: 11px;
  color: var(--color-text-light);
  font-weight: 600;
}

/* Stats sections */
.stats-section {
  background: var(--color-card-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 20px;
}

.stats-section-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.stats-chart-wrap { position: relative; height: 260px; }
.stats-chart-wrap-sm { position: relative; height: 200px; }

/* Ranking bars */
.ranking-list { display: flex; flex-direction: column; gap: 12px; }

.ranking-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ranking-num {
  font-size: 13px;
  font-weight: 800;
  color: var(--color-text-light);
  min-width: 22px;
  text-align: right;
}

.ranking-info { flex: 1; }

.ranking-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
}

.ranking-percent {
  font-size: 12px;
  color: var(--color-text-sub);
  font-weight: 500;
}

.ranking-bar-bg {
  background: var(--color-border);
  border-radius: 50px;
  height: 7px;
  overflow: hidden;
}

.ranking-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-blue), #4A7FCC);
  border-radius: 50px;
  transition: width 0.6s ease;
}

/* Recent table */
.recent-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.recent-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  min-width: 400px;
}

.recent-table th {
  background: #F0F2F6;
  font-weight: 700;
  color: var(--color-text-sub);
  padding: 8px 10px;
  text-align: left;
  border-bottom: 2px solid var(--color-border);
  font-size: 11.5px;
  letter-spacing: 0.3px;
}

.recent-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  vertical-align: middle;
}

.recent-table tr:last-child td { border-bottom: none; }
.recent-table tr:hover td { background: #F5F7FA; }

.gender-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
}

.gender-badge.dad { background: #EEF3FB; color: var(--color-blue); }
.gender-badge.mom { background: #FFF0F0; color: #C0392B; }

.stats-source-note {
  font-size: 11px;
  color: var(--color-text-light);
  margin-top: 12px;
  text-align: right;
}

/* =========================================
   UTILITY
   ========================================= */
.mt-auto { margin-top: auto; }
.text-center { text-align: center; }
.mb-0 { margin-bottom: 0 !important; }

/* =========================================
   RESPONSIVE (desktop for stats)
   ========================================= */
@media (min-width: 640px) {
  .stats-container { padding: 0 24px 60px; }
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .stats-header { margin: 0 -24px 28px; padding: 32px 28px; }
  .stats-header h1 { font-size: 22px; }
  .stats-chart-wrap { height: 300px; }
}

@media (max-width: 360px) {
  .cover-title { font-size: 25px; }
  .cover-badge-text { font-size: 10px; }
  .gender-emoji { font-size: 42px; }
  .quiz-body { padding: 38px 16px 14px; }
  /* 좌우 패딩만 지정 — 상하 위치(버튼 하향 이동)는 .cta-fixed-zone 공통 규칙이 담당하도록
     padding-block-end를 별도로 덮어쓰지 않음 (이전에는 padding shorthand가
     .cta-fixed-zone의 3cm 하향 조정 값을 24px로 되돌려 겹침 문제를 유발했음) */
  .quiz-nav { padding-inline: 16px; }
  .screen-inner { padding: 28px 18px 32px; }
  .choice-card-text { font-size: 13.5px; }
}

/* =========================================
   QUIZ 선택 상태 강화 보완
   ========================================= */

/* 선택된 카드 텍스트 굵기 강화 */
.choice-card.selected-first .choice-card-text,
.choice-card.selected-second .choice-card-text {
  font-weight: 700;
  color: var(--color-text);
}

/* 순위 뱃지 항상 자리 잡음 (크기 고정) */
.choice-card-rank {
  min-width: 28px;
}

/* 힌트 선택 완료 상태 */
.quiz-rank-hint .hint-done {
  font-size: 12px;
  color: var(--color-success);
  font-weight: 700;
  margin-left: auto;
}

/* 퀴즈 완료 피드백 카드 */
.choice-card.both-done {
  /* 두 순위 모두 선택 완료 시 추가 시각 효과 없음 - 깔끔하게 유지 */
}

/* 선택 순서 가이드 텍스트 */
.choice-card::before {
  content: '';
}

/* 커버 소형 반응형 */
@media (max-width: 380px) {
  .cover-badges { gap: 7px; }
  .cover-badge { padding: 12px 6px; }
  .cover-badge-icon { font-size: 22px; }
}