/* ============================================================
   InterVoca 웹 체험판(/demo) 스타일
   src/constants/theme.ts 값을 CSS 변수로 이식해 앱과 톤을 맞춘다.
   ============================================================ */

:root {
  /* 색상 (theme.ts colors) */
  --white: #ffffff;
  --gray1: #f7f7f7;
  --gray2: #d0cdd1;
  --gray3: #868188;
  --base: #ffffff;
  --base2: #faf8f5;
  --card: #f7f7f7;
  --hairline: #c7c7c7;
  --text: #222222;
  --primary: #473efd;
  --secondary: #908bf7;
  --accent: #ff5eb9;
  --progress-bar: #0ef070;
  --success: #2ad474;
  --success-light: #0ef070;
  --error: #e7645f;
  --dark1: #212323;
  --dark2: #1a1a2e;
  /* 퀵버튼 카드 배경 (theme.ts themePackBackground / commonPackBackground) */
  --theme-pack-bg: #ededfe;
  --common-pack-bg: #edfbf3;

  /* spacing (theme.ts spacing) */
  --sp-xxs: 2px;
  --sp-xs: 6px;
  --sp-sm: 10px;
  --sp-md: 14px;
  --sp-base: 18px;
  --sp-lg: 20px;
  --sp-xl: 24px;
  --sp-xxl: 32px;
  --sp-xxxl: 40px;

  /* radius (theme.ts borderRadius) */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-round: 9999px;

  /* 폰트: 단어 표제어는 RobotoSlab 톤 (웹폰트), 본문은 시스템 */
  --font-body: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Pretendard',
    'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;
  --font-lemma: 'Roboto Slab', 'RobotoSlab', Georgia, serif;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: #e9e9ef;
}

/* 키보드가 올라와도 페이지 자체가 스크롤되어 윗부분이 잘리는 것 방지.
   화면 크기는 그대로 두고(축소하지 않음) 키보드만 화면 위로 덮이게 함. */
html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: fixed;
  overscroll-behavior: none;
}

/* ── 폰 목업 프레임 ─────────────────────────────────────── */
.demo-stage {
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.phone {
  position: relative;
  width: 100%;
  max-width: 420px;
  height: min(860px, calc(100dvh - 32px));
  background: var(--base);
  border-radius: 36px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 화면 컨테이너 (스크롤 영역) */
.screen {
  flex: 1;
  display: none;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.screen.active {
  display: flex;
}

.screen-body {
  flex: 1;
  padding: var(--sp-lg);
}

/* 언어 선택 (홈 상단 우측) */
.lang-bar {
  display: flex;
  justify-content: flex-end;
  padding: var(--sp-md) var(--sp-lg) 0;
}
.lang-select {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--gray2);
  border-radius: var(--r-md);
  padding: 6px 10px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23868188' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 26px;
}
.lang-select:focus {
  outline: none;
  border-color: var(--primary);
}

/* 마법사(처음부터 선택하기) 단계: 콘텐츠가 짧으면 세로 중앙, 길면 위에서부터 스크롤 */
.wizard-body {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.wizard-inner {
  margin: auto 0;
  width: 100%;
}

/* 화면 하단 고정 버튼 영역 */
.screen-footer {
  padding: var(--sp-md) var(--sp-lg) var(--sp-xxl);
  border-top: 1px solid var(--hairline);
  background: var(--base);
}

/* ── 상단 헤더 (뒤로가기 등) ─────────────────────────── */
.app-header {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-base) var(--sp-lg) var(--sp-sm);
  min-height: 52px;
}
.app-header .back-btn {
  border: none;
  background: none;
  font-size: 22px;
  color: var(--text);
  cursor: pointer;
  padding: 4px 8px;
  margin-left: -8px;
  line-height: 1;
}
.app-header .title {
  font-size: 18px;
  font-weight: 700;
}

/* ── 타이포 ─────────────────────────────────────────── */
.h1 {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 var(--sp-sm);
}
.h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 var(--sp-sm);
}
.subtle {
  color: var(--gray3);
  font-size: 14px;
  line-height: 1.5;
}
/* 과목 선택 화면의 학년 라벨 (앱 'Y1') */
.grade-label {
  color: var(--primary);
  font-size: 20px;
  font-weight: 800;
}
.lemma {
  font-family: var(--font-lemma);
  font-weight: 600;
}

/* ── Flat3D 버튼 (theme.ts Flat3DButton 재현) ───────── */
.btn3d {
  position: relative;
  display: inline-flex;
  width: 100%;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  height: 52px;
  font-family: inherit;
}
.btn3d .btn3d-face {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 47px; /* height - shadowHeight(5) */
  background: var(--primary);
  color: var(--white);
  border-radius: var(--r-round);
  font-size: 16px;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transform: translateY(0);
  transition: transform 0.04s ease-out;
}
.btn3d .btn3d-shadow {
  position: absolute;
  left: 0;
  right: 0;
  top: 5px;
  height: 47px;
  background: var(--primary);
  border-radius: var(--r-round);
  filter: brightness(0.7); /* 어두운 그림자 레이어 */
}
.btn3d:active .btn3d-face {
  transform: translateY(5px);
}
.btn3d:disabled {
  opacity: 0.5;
  cursor: default;
}
.btn3d:disabled:active .btn3d-face {
  transform: translateY(0);
}

/* 변형 색상 */
.btn3d.accent .btn3d-face,
.btn3d.accent .btn3d-shadow {
  background: var(--accent);
}
.btn3d.success .btn3d-face,
.btn3d.success .btn3d-shadow {
  background: var(--success);
}
.btn3d.ghost .btn3d-face {
  background: var(--card);
  color: var(--text);
  border-color: var(--hairline);
}
.btn3d.ghost .btn3d-shadow {
  background: var(--gray2);
}
.btn3d.inline {
  width: auto;
}

/* 작은 텍스트 버튼 */
.btn-text {
  border: none;
  background: none;
  color: var(--primary);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  padding: var(--sp-sm);
}

/* ── 카드 / 칩 ──────────────────────────────────────── */
.card {
  background: var(--card);
  border-radius: var(--r-lg);
  padding: var(--sp-lg);
}
.select-card {
  background: var(--card);
  border-radius: var(--r-lg);
  padding: var(--sp-base) var(--sp-lg);
  margin-bottom: var(--sp-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.12s, background 0.12s;
  text-align: left;
  width: 100%;
  font-family: inherit;
  font-size: 16px;
}
.select-card:hover {
  border-color: var(--secondary);
}
/* 테마팩 썸네일 (96x128 세로형) */
.select-card .card-thumb {
  width: 44px;
  height: 59px;
  object-fit: cover;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  background: var(--gray1);
}
.select-card.has-thumb {
  padding: var(--sp-sm) var(--sp-md);
}
/* 테마팩 챕터 화면 상단 설명 박스 */
.theme-desc {
  display: flex;
  gap: var(--sp-md);
  background: var(--base2);
  border-radius: var(--r-md);
  padding: var(--sp-md);
  margin: var(--sp-sm) 0 var(--sp-base);
}
.theme-desc-thumb {
  width: 60px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  background: var(--gray1);
}
.theme-desc-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--gray3);
}
/* 전체 무료 제공 팩 안내 */
.free-pack-notice {
  background: var(--commonPackBackground, #edfbf3);
  background: #edfbf3;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  border-radius: var(--r-md);
  padding: var(--sp-md);
  margin: var(--sp-sm) 0 var(--sp-base);
}
.select-card .label {
  font-weight: 600;
  color: var(--text);
}
.select-card .sub {
  font-size: 13px;
  color: var(--gray3);
  margin-top: 2px;
}
.select-card .chev {
  color: var(--gray3);
  font-size: 18px;
}

/* 잠긴 카드 */
.select-card.locked {
  opacity: 0.65;
  cursor: pointer;
}
.select-card.locked .label {
  color: var(--gray3);
}

/* 게임 진입 카드 */
.select-card.game-entry {
  background: var(--commonPackBackground, #edfbf3);
  background: #edfbf3;
}

/* ── 퀵버튼 화면 (앱 quickSelect) ───────────────────── */
/* 콘텐츠를 화면 세로 중앙에 */
.qs-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-lg);
}
.qs-title {
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 var(--sp-base);
}
/* 퀵 카드: primary 보더 + 타입별 배경, 제목 primary 색 */
.qs-card {
  background: var(--white);
  border: 2px solid var(--primary);
}
.qs-card:hover {
  border-color: var(--primary);
}
.qs-card.qs-theme {
  background: var(--theme-pack-bg);
}
.qs-card.qs-common {
  background: var(--common-pack-bg);
}
.qs-card .label {
  color: var(--primary);
}
.qs-card .chev {
  color: var(--primary);
}
/* 퀵 카드 아이콘 (이모지) */
.qs-icon {
  width: 36px;
  text-align: center;
  font-size: 24px;
  flex-shrink: 0;
}
/* 보조 버튼 (과목 선택하기 / 처음부터 선택하기) — 회색 카드형, 보더 없음 */
.qs-secondary {
  display: block;
  width: 100%;
  background: var(--card);
  border: none;
  border-radius: var(--r-lg);
  padding: var(--sp-base) var(--sp-lg);
  margin-bottom: var(--sp-sm);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  cursor: pointer;
  transition: background 0.12s;
}
.qs-secondary:active {
  background: var(--gray2);
}

/* 게임 화면 (iframe) */
.game-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #000;
}
/* 게임 헤더: 검은 배경이라 글씨를 밝게 */
.game-screen .app-header .title,
.game-screen .app-header .back-btn {
  color: #fff;
}
.game-frame {
  flex: 1;
  width: 100%;
  border: none;
  display: block;
}

/* 상태 칩 */
.chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
  flex-shrink: 0;
}
.chip.free {
  background: var(--accent);
}
.chip.pro {
  background: var(--gray3);
}
.chip.done {
  background: var(--success);
}

/* ── 진행 점(스텝 도트) ─────────────────────────────── */
.step-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) 0;
}
.step-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gray1);
  transition: background 0.15s;
}
.step-dot.active {
  background: var(--primary);
}

/* 진행 바 */
.progress-track {
  height: 10px;
  background: var(--gray1);
  border-radius: var(--r-round);
  overflow: hidden;
}
/* 목록(챕터 카드)은 회색 카드 배경 위라 트랙을 흰색으로 */
.chapter-card .progress-track {
  background: var(--white);
}
.progress-fill {
  height: 100%;
  background: var(--progress-bar);
  border-radius: var(--r-round);
  width: 0;
  transition: width 0.4s ease;
}

/* 학습 진도 헤더 (앱처럼: 오늘 진도 + 챕터 진도 + 초록바) */
.study-progress {
  padding: 0 var(--sp-lg) var(--sp-xs);
}
.study-progress-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: var(--sp-sm);
}
.study-progress-label .today {
  color: var(--primary);
}
.study-progress-label .chapter {
  color: var(--gray2);
  font-weight: 700;
}

/* ── 학습 화면 (StudyCard) - 누적 구조 ───────────────── */
.study-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* 누적 콘텐츠 영역 (스크롤) — 기본은 세로 중앙 정렬 (앱과 동일) */
.study-stack {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-base) var(--sp-lg) var(--sp-lg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-lg);
}
/* 내용이 넘칠 때 위쪽이 잘리지 않도록 (justify-content:center + overflow 보완) */
.study-stack > :first-child { margin-top: auto; }
.study-stack > :last-child { margin-bottom: auto; }
/* 쓰기(step6) 스텝은 가상키보드 고려해 위 정렬 */
.study-stack.top {
  justify-content: flex-start;
}
.study-stack.top > :first-child { margin-top: 0; }
.study-stack.top > :last-child { margin-bottom: 0; }
/* 하단 고정 "다음 단계로" 버튼 */
.study-footer {
  padding: var(--sp-md) var(--sp-lg) var(--sp-xxl);
  background: var(--base);
}

/* 누적 블록 (각 스텝이 추가됨) */
.study-block {
  animation: fadeIn 0.3s ease;
}
/* 예문 화면 상단 인스트럭션 (앱 stageInstruction) */
.study-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray3);
  margin-bottom: var(--sp-md);
  text-align: center;
}

/* 챕터 배지 (단어 정보 화면 상단) */
.chapter-badge {
  align-self: center;
  background: var(--gray1);
  color: var(--gray3);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--r-round);
  margin-bottom: var(--sp-md);
}

/* 예문 화면 (단어 정보와 분리, 가운데 정렬) */
.sb-ex-screen {
  text-align: center;
  width: 100%;
}

/* 단어 블록 (가운데 정렬) */
.sb-word-block {
  text-align: center;
}
/* 뜻 블록도 가운데 정렬 (앱과 동일) */
.sb-mean-block {
  text-align: center;
}
.study-word {
  font-family: var(--font-lemma);
  font-size: 40px;
  font-weight: 600;
  color: var(--text);
  word-break: break-word;
  line-height: 1.3;
}
.study-word.typing {
  letter-spacing: 0.06em;
}
.study-ipa {
  color: var(--gray3);
  font-size: 16px;
  margin-top: var(--sp-xs);
}
.study-pos {
  color: var(--gray3);
  font-size: 13px;
  margin-top: var(--sp-xs);
  font-style: italic;
}
.study-term {
  font-size: 24px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: var(--sp-sm);
}
.study-gloss {
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
}
.study-gloss-tr {
  font-size: 15px;
  line-height: 1.5;
  color: var(--gray3);
  margin-top: var(--sp-xs);
}
.study-example {
  font-size: 19px;
  line-height: 1.7;
  color: var(--text);
}
/* 예문 빈칸(밑줄) / 채워진 글자 */
.study-example .blank {
  color: var(--gray2);
  font-weight: 700;
  letter-spacing: 1px;
}
.study-example .fill {
  color: var(--primary);
  font-weight: 700;
}
.study-example-tr {
  font-size: 15px;
  color: var(--gray3);
  margin-top: var(--sp-sm);
  line-height: 1.5;
}

/* Step 6 쓰기 연습 (반복 + 카운트) */
.write-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}
.write-hint {
  text-align: center;
  margin-bottom: 0;
}
.write-hint-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray3);
  margin-bottom: var(--sp-sm);
}

/* 입력 행: 입력창 + 카운트 */
.write-input-row {
  display: flex;
  align-items: stretch;
  gap: var(--sp-sm);
}
.write-input-wrap {
  position: relative;
  flex: 1;
  overflow: hidden;
  border-radius: var(--r-md);
}
.write-input {
  font-family: var(--font-lemma);
  font-size: 22px;
  text-align: center;
  width: 100%;
  background: var(--gray1);
  border: 2px solid transparent;
  border-radius: var(--r-md);
  padding: var(--sp-sm) var(--sp-base) var(--sp-md);
  color: var(--text);
  outline: none;
  position: relative;
  z-index: 1;
}
.write-input::placeholder {
  color: var(--gray2);
  font-family: var(--font-body);
  letter-spacing: 2px;
}
.write-input.correct {
  border-color: var(--success);
  background: #e8f5e9;
}
.write-input.wrong {
  border-color: var(--error);
  background: #ffebee;
}
/* 프로그레스 오버레이 (정답 녹색/오답 빨강이 줄어듦) */
.write-progress {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  z-index: 2;
  border-radius: var(--r-md);
}
.write-progress.ok {
  background: rgba(42, 212, 116, 0.25);
}
.write-progress.no {
  background: rgba(255, 152, 148, 0.25);
}

/* 정답 카운트 (롤링) */
.write-count {
  min-width: 44px;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--gray1);
  border-radius: var(--r-md);
  font-family: var(--font-lemma);
  font-size: 22px;
  font-weight: 700;
  color: var(--primary);
}
.write-count.show {
  display: flex;
}
.write-count.roll {
  animation: countRoll 0.3s ease;
}
@keyframes countRoll {
  from { transform: translateY(-12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.write-check {
  margin-top: 0;
}
.write-result {
  text-align: center;
  min-height: 22px;
}
.write-result .verdict {
  font-size: 16px;
  font-weight: 700;
}
.write-result .verdict.ok {
  color: var(--success);
}
.write-result .answer {
  font-size: 22px;
  color: var(--error);
}

/* ── 퀴즈 ───────────────────────────────────────────── */
.quiz-question {
  background: var(--card);
  border-radius: var(--r-lg);
  padding: var(--sp-sm) var(--sp-lg);
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: var(--sp-md);
}
.quiz-term {
  font-size: 24px;
  font-weight: 700;
  color: var(--success);
  margin-bottom: var(--sp-sm);
}
.quiz-gloss {
  font-size: 15px;
  color: var(--gray3);
  line-height: 1.5;
}
.quiz-score {
  text-align: right;
  font-size: 28px;
  font-weight: 800;
  color: var(--accent);
}
.quiz-score .lbl {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--gray2);
}
.quiz-feedback {
  text-align: center;
  padding: var(--sp-lg);
  border-radius: var(--r-md);
  background: var(--card);
  margin-bottom: var(--sp-md);
}
.quiz-feedback .verdict {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: var(--sp-sm);
}
.quiz-feedback .verdict.ok {
  color: var(--success);
}
.quiz-feedback .verdict.no {
  color: var(--error);
}
.quiz-feedback .answer-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray3);
  margin-top: var(--sp-xs);
}
.quiz-feedback .answer {
  font-family: var(--font-lemma);
  font-size: 22px;
}
.quiz-feedback .builder-answer-text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}
.quiz-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray3);
  text-align: center;
  margin-bottom: var(--sp-sm);
}

/* ── 번개 퀴즈 시작 버튼 (AnimatedQuizButton 재현) ──── */
.quiz-launch {
  position: relative;
  margin-top: var(--sp-lg);
}
.quiz-launch-btn {
  opacity: 0;
}
.quiz-launch.burst .quiz-launch-btn {
  animation: quizBoing 0.56s ease-out forwards;
}
@keyframes quizBoing {
  0% { opacity: 0; transform: scale(0); }
  20% { opacity: 1; transform: scale(1.15); }
  45% { transform: scale(0.95); }
  65% { transform: scale(1.1); }
  82% { transform: scale(0.98); }
  92% { transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}
.lightning {
  position: absolute;
  width: 30px;
  height: 30px;
  left: 50%;
  top: 4px;
  margin-left: -15px;
  opacity: 0;
  image-rendering: pixelated;
  z-index: 10;
  pointer-events: none;
}
.quiz-launch.burst .lt1 { animation: ltBurst 0.6s ease-out forwards; --tx: -100px; --ty: -34px; --rot: 90deg; }
.quiz-launch.burst .lt2 { animation: ltBurst 0.6s ease-out 0.04s forwards; --tx: 100px; --ty: -34px; --rot: -180deg; }
.quiz-launch.burst .lt3 { animation: ltBurst 0.6s ease-out 0.08s forwards; --tx: -100px; --ty: 34px; --rot: 0deg; }
.quiz-launch.burst .lt4 { animation: ltBurst 0.6s ease-out 0.12s forwards; --tx: 100px; --ty: 34px; --rot: -90deg; }
@keyframes ltBurst {
  0% { opacity: 0; transform: translate(0, 0) scale(0) rotate(var(--rot)); }
  15% { opacity: 1; transform: translate(calc(var(--tx) * 0.7), calc(var(--ty) * 0.7)) scale(1) rotate(var(--rot)); }
  55% { opacity: 1; transform: translate(calc(var(--tx) * 0.6), calc(var(--ty) * 0.6)) scale(1) rotate(var(--rot)); }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0.8) rotate(var(--rot)); }
}

/* ── 퀴즈 모드 선택 ──────────────────────────────────── */
.quiz-mode-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-md);
}
.quiz-mode-card {
  background: var(--card);
  border-radius: var(--r-xl);
  border-radius: var(--r-lg);
  padding: var(--sp-lg);
  min-height: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.12s;
  width: 100%;
  font-family: inherit;
}
.quiz-mode-card:hover {
  border-color: var(--primary);
}
.quiz-mode-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
.quiz-mode-desc {
  font-size: 13px;
  color: var(--gray3);
  text-align: center;
}

/* ── 퀴즈 입력행 + 힌트 버튼 ─────────────────────────── */
.quiz-input-row {
  display: flex;
  align-items: stretch;
  gap: var(--sp-sm);
}
.quiz-input-wrap {
  flex: 1;
}
.quiz-hint-btn {
  width: 52px;
  border: 1px solid var(--hairline);
  background: var(--card);
  border-radius: var(--r-md);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quiz-hint-btn.used {
  opacity: 0.4;
  cursor: default;
}

/* ── 빈칸 채우기 ─────────────────────────────────────── */
.quiz-fill-question {
  align-items: stretch;
}
.quiz-fill-sentence {
  font-size: 19px;
  line-height: 1.8;
  color: var(--text);
  text-align: center;
}
.quiz-fill-gloss {
  font-size: 14px;
  color: var(--gray3);
  text-align: center;
  margin-top: var(--sp-md);
}
.quiz-fill-tr {
  font-size: 14px;
  color: var(--gray3);
  text-align: center;
  margin-top: var(--sp-sm);
  line-height: 1.6;
}
.fill-blank {
  color: var(--gray3);
  font-weight: 700;
  letter-spacing: 2px;
  border-bottom: 2px solid var(--primary);
  padding: 0 4px;
}
.fill-blank.filled {
  color: var(--primary);
  border-bottom: none;
  letter-spacing: normal;
}

/* 문장 학습 배지 (목록) */
.chip.sentence {
  background: var(--secondary);
}

/* ── 문장 재배열 ─────────────────────────────────────── */
.builder-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray3);
  margin: var(--sp-md) 0 var(--sp-xs);
}
/* 단어 라벨 + 힌트 버튼 한 줄 */
.builder-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.builder-hint-btn {
  border: 1px solid var(--hairline);
  background: var(--card);
  border-radius: var(--r-sm);
  width: 40px;
  height: 30px;
  font-size: 16px;
  cursor: pointer;
}
/* 조립 학습: 정답확인 프로그레스바 오버레이용 래퍼 */
.builder-answer-wrap {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
}
.builder-answer-wrap .write-progress {
  border-radius: var(--r-md);
}
.builder-answer {
  min-height: 64px;
  background: var(--gray1);
  border-radius: var(--r-md);
  padding: var(--sp-sm);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  align-content: flex-start;
}
.builder-placeholder {
  color: var(--gray3);
  font-size: 14px;
  font-style: italic;
  align-self: center;
  margin: auto;
}
.builder-words {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.builder-chip {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: 8px 14px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.1s;
}
.builder-chip.sel {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}
.builder-chip.used {
  opacity: 0;
  pointer-events: none;
}
.shake {
  animation: shake 0.4s;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

/* ── 완료 화면 (앱 CompletionScreen 연출) ───────────── */
.cp-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-lg);
  padding: var(--sp-xl) var(--sp-lg);
  justify-content: center;
}
.cp-footer {
  border-top: none;
}
.cp-btn-row {
  display: flex;
  gap: var(--sp-sm);
}
.cp-btn-row > * {
  flex: 1;
}

/* 불꽃 (JS가 background-position 제어, 12프레임 × 200px) */
.flame {
  width: 180px;
  height: 180px;
  background-image: url('/demo/sprite/sprite-streak-flame.png');
  background-repeat: no-repeat;
  background-size: 2160px 180px;
  background-position: 0 0;
  image-rendering: pixelated;
}
.cp-streak {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.streak-num {
  font-size: 52px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  margin-top: -10px;
}
.streak-num.roll {
  animation: fadeIn 0.3s ease;
}
.streak-label {
  font-size: 14px;
  color: var(--gray3);
  margin-top: 4px;
}

/* XP/레벨 카드 */
.cp-xpcard {
  width: 100%;
  background: var(--card);
  border-radius: var(--r-lg);
  padding: var(--sp-lg);
}
.cp-xprow {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-sm);
}
.cp-lv {
  background: var(--primary);
  color: var(--white);
  font-weight: 700;
  font-size: 13px;
  padding: 3px 10px;
  border-radius: var(--r-round);
}
.cp-totalxp {
  font-size: 13px;
  color: var(--gray3);
  flex: 1;
}
.cp-gem {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.cp-gemgain {
  font-size: 13px;
  font-weight: 700;
  color: var(--success);
}
.cp-xptrack {
  height: 12px;
  background: var(--white);
  border-radius: var(--r-round);
  overflow: hidden;
}
.cp-xpfill {
  height: 100%;
  width: 0;
  background: var(--primary);
  border-radius: var(--r-round);
}
.cp-xpgain {
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  margin-top: 6px;
  min-height: 16px;
}

/* 결과 */
.cp-results {
  width: 100%;
  background: var(--card);
  border-radius: var(--r-lg);
  padding: var(--sp-lg);
}
.cp-result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-xs) 0;
}
.cp-result-key {
  font-size: 15px;
  color: var(--gray3);
}
.cp-result-val {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
}
.cp-retry-msg {
  margin-top: var(--sp-sm);
  font-size: 14px;
  color: var(--error);
  text-align: center;
  line-height: 1.5;
}

/* ── 모달 (PRO 안내 등) ─────────────────────────────── */
.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-lg);
  z-index: 50;
}
.modal-overlay.active {
  display: flex;
}
.modal {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: var(--sp-xl);
  width: 100%;
  max-width: 320px;
  text-align: center;
}
.modal .emoji {
  font-size: 44px;
}
.modal .modal-title {
  font-size: 20px;
  font-weight: 800;
  margin: var(--sp-sm) 0;
}
.modal .modal-body {
  font-size: 14px;
  color: var(--gray3);
  line-height: 1.55;
  margin-bottom: var(--sp-lg);
}
.modal .modal-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

/* PRO 안내 모달 */
.pro-modal .modal-body {
  margin-bottom: var(--sp-md);
}
.pro-pitch {
  background: var(--base2);
  border-radius: var(--r-md);
  padding: var(--sp-md) var(--sp-base);
  text-align: left;
  margin-bottom: var(--sp-md);
}
.pro-pitch-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: var(--sp-sm);
  text-align: center;
}
.pro-pitch-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.7;
}
.pro-pitch-list b {
  color: var(--primary);
}
.pro-stores {
  display: flex;
  justify-content: center;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-sm);
}
.pro-stores .store-btn img {
  height: 40px;
  width: auto;
  display: block;
}

/* ── 안내 배너 (localStorage 경고 등) ───────────────── */
.notice {
  font-size: 12px;
  color: var(--gray3);
  background: var(--base2);
  border-radius: var(--r-md);
  padding: var(--sp-sm) var(--sp-md);
  line-height: 1.5;
}


/* 그룹 헤더 (위계 트리) */
.group-header {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray3);
  margin: var(--sp-lg) 0 var(--sp-sm);
}
.group-header:first-child {
  margin-top: 0;
}

/* fade 전환 */
.fade-in {
  animation: fadeIn 0.25s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.center-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
  gap: var(--sp-base);
}

/* ── 홈 화면 이미지 ─────────────────────────────────── */
.home-logo {
  width: 160px;
  max-width: 60%;
  height: auto;
}
.home-hello {
  width: 260px;
  max-width: 80%;
  height: auto;
  image-rendering: pixelated; /* 픽셀 아트 선명하게 */
  margin-top: var(--sp-sm);
}

/* ── 스토어 버튼 (앱 홈과 동일) ─────────────────────── */
.store-buttons {
  display: flex;
  justify-content: center;
  gap: var(--sp-sm);
  margin-top: var(--sp-md);
}
.store-btn {
  display: inline-block;
}
.store-btn img {
  height: 44px;
  width: auto;
  display: block;
}