/* ============================================================
   말씀 한 절 암송 테스트 — 등록 시스템과 동일한 톤
   ============================================================ */
:root {
  --navy: #1a3a6b;
  --navy-dark: #0d1b3e;
  --gold: #c8a84b;
  --cream: #fdf8f0;
  --white: #ffffff;
  --gray: #6b7280;
  --light: #f3f0ea;
  --border: #ddd6c8;
  --green: #2c5f2d;
  --error: #c0392b;
}

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

body {
  font-family: "Noto Sans KR", sans-serif;
  background: var(--cream);
  color: #222;
  min-height: 100vh;
}

/* ---------- 브랜드 헤더 ---------- */
.page-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(135deg, #0d1b3e 0%, #1a3a6b 40%, #0d4a7a 100%);
  padding: 12px 20px 16px;
  width: 100%;
}
.logo-wrap {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  padding: 16px 28px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
  width: 100%;
  max-width: 480px;
}
.logo-wrap img { width: 50px; height: auto; display: block; flex-shrink: 0; }
.logo-tagline { display: flex; flex-direction: column; gap: 2px; }
.logo-tagline .tagline-main {
  font-size: 16px; font-weight: 800; color: #0d1b3e;
  letter-spacing: -0.3px; line-height: 1.3;
}
.logo-tagline .tagline-sub {
  font-size: 12px; font-weight: 500; color: #1a5276; letter-spacing: 0.5px;
}
.hero-subtitle {
  font-size: 13px; font-weight: 500;
  color: rgba(255, 255, 255, 0.65); letter-spacing: 3px;
}

/* ---------- 본문 래퍼 ---------- */
#app {
  max-width: 600px;
  margin: 0 auto;
  padding: 22px 16px 60px;
}

h1 {
  font-family: "Nanum Myeongjo", serif;
  font-size: 12.6px; /* 기존 18px의 0.7배 */
  font-weight: 800;
  color: var(--navy);
  text-align: center;
  letter-spacing: -0.3px;
  margin-bottom: 20px;
}

.error { color: var(--error); }

/* 메인 화면 '알림 구독' 버튼 */
.remind-cta {
  display: block;
  max-width: 340px;
  margin: 0 auto 18px;
  text-align: center;
  background: #eef1f8;
  border: 1.5px solid var(--navy);
  color: var(--navy);
  font-weight: 700;
  text-decoration: none;
  padding: 11px 16px;
  border-radius: 22px;
  font-size: 14px;
  transition: background 0.15s, color 0.15s;
}
.remind-cta:hover { background: var(--navy); color: #fff; }

/* 본문 상단 제목 (가운데 정렬) */
.page-title {
  display: block;
  text-align: center;
  font-family: "Noto Sans KR", sans-serif; /* 헤더 tagline-main과 동일 폰트 */
  font-size: 12.8px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.3px;
  margin-bottom: 20px;
}

/* ---------- 화면 1: 구절 목록 ---------- */
.verse-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 가로로 긴 카드(한 줄 = 한 구절) */
.verse-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(26, 58, 107, 0.08);
  transition: transform 0.12s, box-shadow 0.12s;
}
.verse-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(26, 58, 107, 0.14);
}
.verse-card.status-done {
  border-color: var(--gold);
  background: #fffdf6;
}

.verse-no {
  font-family: "Nanum Myeongjo", serif;
  color: var(--gold);
  font-size: 15px;
  font-weight: 800;
  min-width: 30px;
  text-align: center;
}
.verse-ref {
  font-weight: 700;
  font-size: 15px;
  color: var(--navy);
  white-space: nowrap;
}
.verse-hint {
  flex: 1;
  color: var(--gray);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 진행 상태 배지 */
.verse-status {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
  white-space: nowrap;
}
.verse-status.status-none { color: var(--gray); background: var(--light); }
.verse-status.status-s1 { color: var(--navy); background: #e7ecf5; }
.verse-status.status-s2 { color: var(--white); background: var(--navy); }
.verse-status.status-done { color: var(--navy-dark); background: #f4e3ad; }

/* 구절 목록 카드 '듣기' 버튼(아이콘, 한 줄 유지) */
.card-listen {
  flex-shrink: 0;
  width: 36px; height: 36px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: #eef1f8; border: 1px solid var(--border);
  border-radius: 999px; font-size: 17px; cursor: pointer;
  transition: background 0.15s;
}
.card-listen:hover { background: #dde4f2; }

/* ---------- 화면 2: 테스트 ---------- */
.test-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.test-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 정답 보기 + 음성 암송 버튼을 한 줄에 */
.btn-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.btn-row .answer-btn,
.btn-row .voice-btn,
.btn-row .voice-stop {
  margin-top: 0;
  flex: 1 1 0;
  max-width: 170px;
  justify-content: center;
  padding: 11px 12px;
}
.btn-row .voice-stop { border-radius: 22px; }
.voice-btn:disabled,
.voice-stop:disabled { opacity: 0.4; cursor: not-allowed; }

.back-btn,
.answer-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #eef1f8; /* 옅은 네이비 톤 */
  border: 1.5px solid var(--navy);
  color: var(--navy);
  font-weight: 700;
  cursor: pointer;
  padding: 7px 15px;
  border-radius: 20px;
  font-size: 13px;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.back-btn:hover,
.answer-btn:hover { background: var(--navy); color: var(--white); }

.test-screen {
  max-width: 480px;
  margin: 0 auto;
}

.test-card {
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(26, 58, 107, 0.08);
}

/* 단계 위 설교 영상 링크 */
.sermon-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #0d1b3e 0%, #1a3a6b 100%);
  color: var(--white);
  text-decoration: none;
  padding: 12px 16px;
  border-radius: 10px;
  margin-top: 18px;
}
.sermon-banner:hover { filter: brightness(1.1); }
.sermon-banner-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy-dark);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sermon-banner-text { display: flex; flex-direction: column; gap: 1px; line-height: 1.35; }
.sermon-banner-title { font-size: 14px; font-weight: 700; }
.sermon-banner-pastor { font-size: 11px; color: rgba(255, 255, 255, 0.7); }

.test-stage {
  display: inline-block;
  background: var(--navy);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 12px;
  letter-spacing: 1px;
}
.test-ref {
  font-family: "Nanum Myeongjo", serif;
  font-weight: 800;
  font-size: 15.4px;
  color: var(--navy);
  letter-spacing: 0.3px;
  padding-left: 10px;
  border-left: 3px solid var(--gold);
  line-height: 1.1;
}
.test-sentence {
  font-family: "Gowun Batang", serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 2.1;
  margin-bottom: 20px;
  color: #1a1a1a;
}
.word-fixed { margin-right: 4px; }

.word-input {
  text-align: center;
  font-family: "Gowun Batang", serif;
  font-weight: 700;
  font-size: 19px;
  min-width: 2.5em;
  margin: 0 3px;
  padding: 0 2px;
  border: none;
  border-bottom: 2px solid var(--border);
  outline: none;
  background: transparent;
  color: #222;
}
.word-input:focus { border-bottom-color: var(--navy); }
.word-input.correct { border-bottom-color: var(--green); color: var(--green); }
.word-input.wrong {
  border-bottom-color: var(--error);
  color: var(--error);
  animation: shake 0.2s;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

/* ---------- 정답 보기 ---------- */
/* .answer-btn 스타일은 .back-btn과 통일 (위쪽 공통 규칙 참고) */

.answer-panel {
  margin-top: 14px;
  padding: 16px;
  background: var(--light);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.answer-panel[hidden] { display: none; }
.answer-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.answer-text {
  font-family: "Gowun Batang", serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.95;
  color: #1a1a1a;
}
.answer-text .ans-word {
  color: var(--navy);
  background: #f4e3ad;
  border-radius: 3px;
  padding: 0 3px;
  font-weight: 700;
}
.back-to-test-btn {
  margin-top: 14px;
  background: var(--navy);
  color: var(--white);
  border: none;
  padding: 9px 18px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
}
.back-to-test-btn:hover { background: #16315c; }

/* ---------- 음성 암송 ---------- */
.voice-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 14px;
  background: var(--gold);
  color: var(--navy-dark);
  border: none;
  font-weight: 800;
  cursor: pointer;
  padding: 10px 18px;
  border-radius: 22px;
  font-size: 14px;
  font-family: inherit;
}
.voice-btn:hover { filter: brightness(1.05); }

.voice-panel {
  margin-top: 14px;
  padding: 16px;
  background: var(--light);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-align: center;
}
.voice-panel[hidden] { display: none; }
.voice-status { font-size: 13px; color: var(--navy); font-weight: 700; }
.voice-live { margin: 10px 0; min-height: 22px; font-size: 15px; color: #333; line-height: 1.6; }
.voice-stop {
  background: var(--error); color: #fff; border: none; font-weight: 700;
  padding: 9px 18px; border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 13px;
}

.voice-result { margin-top: 14px; }
.voice-result:empty { display: none; }
.voice-summary { font-size: 14px; color: var(--gray); margin-bottom: 10px; }
.voice-pct { font-weight: 800; }
.voice-pct.pass { color: var(--green); }
.voice-pct.fail { color: var(--error); }
.voice-words { font-size: 17px; line-height: 1.9; margin-bottom: 10px; }
.voice-words .v-ok { color: var(--green); font-weight: 700; }
.voice-words .v-no { color: var(--error); text-decoration: line-through; opacity: 0.7; }
.voice-heard { font-size: 12px; color: var(--gray); background: var(--cream); border: 1px dashed var(--border); border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; }
.voice-msg { font-size: 13px; color: var(--gray); line-height: 1.7; margin-top: 12px; }

/* ---------- 결과 ---------- */
#result-area { margin-top: 14px; text-align: center; }
#result-area:empty { display: none; }
.result-score {
  font-family: "Nanum Myeongjo", serif;
  font-size: 34px;
  font-weight: 800;
  color: var(--navy);
  margin-top: 20px;
}
.result-label { color: var(--gray); margin-top: 2px; }
.result-actions { margin-top: 14px; }

.next-btn {
  background: var(--navy);
  color: var(--white);
  border: none;
  padding: 10px 22px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
}
.next-btn:hover { background: #16315c; }

.complete-badge {
  display: inline-block;
  background: var(--navy);
  color: var(--gold);
  font-weight: 800;
  font-size: 16px;
  padding: 9px 20px;
  border-radius: 24px;
  margin-bottom: 12px;
  font-family: "Nanum Myeongjo", serif;
}
.sermon-link {
  display: block;
  margin-top: 8px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.sermon-link:hover { text-decoration: underline; }

/* ============================================================
   첫 방문 인트로 + 도움말
   ============================================================ */

/* 도움말 버튼 — '매일 암송 구절 알림 받기'(remind-cta)와 동일 스타일 */
.help-btn {
  display: block; max-width: 340px; width: 100%; margin: 0 auto 18px;
  text-align: center;
  background: #eef1f8; border: 1.5px solid var(--navy); color: var(--navy);
  font-weight: 700; font-size: 14px; padding: 11px 16px; border-radius: 22px;
  cursor: pointer; font-family: inherit;
  transition: background 0.15s, color 0.15s, transform 0.12s, box-shadow 0.15s;
}
.help-btn:hover { background: var(--navy); color: #fff; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(13,27,62,.28); }
.help-btn:active { transform: translateY(0); box-shadow: none; }

/* ---------- 인트로(첫 방문) ---------- */
.intro-screen { padding: 18px 14px 40px; }
.intro-card {
  max-width: 420px; margin: 0 auto; background: var(--white);
  border: 1px solid var(--border); border-radius: 18px;
  padding: 34px 24px 24px; text-align: center;
  box-shadow: 0 6px 24px rgba(13, 27, 62, 0.08);
}
.intro-icon { font-size: 52px; line-height: 1; margin-bottom: 14px; }
.intro-title {
  font-family: "Nanum Myeongjo", serif; font-weight: 800;
  font-size: 1.4rem; color: var(--navy); margin-bottom: 14px;
}
.intro-body { color: #444; font-size: 0.98rem; line-height: 1.65; min-height: 110px; }
.intro-dots { display: flex; justify-content: center; gap: 7px; margin: 18px 0 20px; }
.intro-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); transition: background 0.15s; }
.intro-dot.on { background: var(--navy); }
.intro-nav { display: flex; gap: 10px; }
.intro-skip {
  flex: 0 0 auto; padding: 13px 18px; border-radius: 12px;
  background: transparent; border: 1px solid var(--border); color: var(--gray);
  font-weight: 500; font-size: 0.95rem; cursor: pointer; font-family: inherit;
}
.intro-next {
  flex: 1; padding: 13px; border-radius: 12px; border: none;
  background: var(--navy); color: #fff; font-weight: 700; font-size: 1.02rem;
  cursor: pointer; font-family: inherit; transition: background 0.15s;
}
.intro-next:hover { background: var(--navy-dark); }
.intro-foot { margin-top: 16px; font-size: 0.78rem; color: var(--gray); }

/* ---------- 도움말 화면 ---------- */
.help-screen { padding: 14px 14px 50px; }
.help-card {
  max-width: 560px; margin: 0 auto; background: var(--white);
  border: 1px solid var(--border); border-radius: 16px;
  padding: 22px 22px 26px; box-shadow: 0 4px 18px rgba(13, 27, 62, 0.06);
}
.help-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px; border-bottom: 1px solid var(--light); padding-bottom: 12px;
}
.help-title {
  font-family: "Nanum Myeongjo", serif; font-size: 1.3rem;
  font-weight: 800; color: var(--navy); margin: 0;
}
.help-close {
  background: transparent; border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 13px; font-size: 0.85rem; color: var(--gray); cursor: pointer; font-family: inherit;
  transition: background .15s, color .15s, border-color .15s;
}
.help-close:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.help-section { padding: 16px 2px; border-bottom: 1px solid var(--light); }
.help-section h3 {
  font-size: 1.02rem; color: var(--navy); margin: 0 0 8px;
  font-family: "Noto Sans KR", sans-serif; font-weight: 800;
}
.help-section p { color: #444; font-size: 0.92rem; line-height: 1.6; margin: 6px 0 0; }
.help-section ul { margin: 6px 0 0; padding-left: 18px; }
.help-section li { color: #444; font-size: 0.92rem; line-height: 1.7; }
.help-section b { color: var(--navy); }
.help-go {
  display: block; width: 100%; margin-top: 20px; padding: 14px;
  border: none; border-radius: 12px; background: var(--navy); color: #fff;
  font-weight: 700; font-size: 1.02rem; cursor: pointer; font-family: inherit;
  transition: background .15s, transform .12s, box-shadow .15s;
}
.help-go:hover { background: var(--navy-dark); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(13,27,62,.28); }

/* ============================================================
   앱 시작 스플래시 (광고용, 최소 5초)
   ============================================================ */
#splash{
  position:fixed; inset:0; z-index:9999;
  background:linear-gradient(135deg,#0d1b3e 0%,#1a3a6b 50%,#0d4a7a 100%);
  display:flex; align-items:center; justify-content:center;
  opacity:1; transition:opacity .45s ease;
}
#splash.hide{ opacity:0; pointer-events:none; }
.splash-inner{ text-align:center; animation:splashPop .5s ease; padding:24px; }
#splash-logo{
  width:112px; height:auto; margin-bottom:30px;
  background:rgba(255,255,255,.92); border-radius:18px; padding:12px;
  box-shadow:0 8px 26px rgba(0,0,0,.28);
}
.splash-title{
  font-family:"Nanum Myeongjo",serif; color:#fff; font-size:1.15rem;
  font-weight:800; letter-spacing:.5px; line-height:1.4; padding:0 10px;
}
.splash-sub{ color:rgba(255,255,255,.8); font-size:.95rem; margin-top:12px; padding:0 10px; }
@keyframes splashPop{ from{ transform:scale(.92); opacity:0 } to{ transform:scale(1); opacity:1 } }

/* ============================================================
   야간(다크) 모드
   ============================================================ */
.page-header{ position: relative; }
.theme-toggle{
  position:absolute; top:8px; right:12px; z-index:5;
  width:34px; height:34px; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.35);
  font-size:16px; line-height:1; color:#fff;
}
.theme-toggle:hover{ background:rgba(255,255,255,.28); }

.dark{
  --cream:#0f1218; --white:#1b2233; --light:#232c3f;
  --border:#33405a; --gray:#9aa6b8;
}
.dark body{ background:#0f1218; color:#e6e9ef; }

/* 네이비 계열 글씨 → 밝게 */
.dark .page-title, .dark .verse-ref, .dark .test-ref, .dark .test-stage,
.dark .answer-title, .dark .intro-title, .dark .help-title{ color:#cdd9f2; }
/* 카드·본문 텍스트 */
.dark .verse-card, .dark .test-card, .dark .answer-panel, .dark .voice-result,
.dark .test-sentence, .dark .word-fixed, .dark .intro-card{ color:#e6e9ef; }
.dark .verse-hint, .dark .help-section p, .dark .help-section li,
.dark .intro-body, .dark .intro-foot{ color:#aeb8c8; }
.dark .help-section b{ color:#cdd9f2; }

/* 옅은 네이비 버튼 → 어두운 표면 */
.dark .remind-cta, .dark .back-btn, .dark .answer-btn, .dark .help-btn,
.dark .card-listen, .dark .back-to-test-btn, .dark .intro-skip{
  background:#232c3f; color:#cdd9f2; border-color:#3a4a68;
}
.dark .remind-cta:hover, .dark .answer-btn:hover, .dark .help-btn:hover{ background:#2e3a52; color:#fff; }

/* 입력창 */
.dark .word-input{ background:#232c3f; color:#e6e9ef; border-color:#3a4a68; }
.dark .word-input.correct{ background:#1f3b2a; border-color:#2c5f2d; color:#dff5e3; }

/* 상태 카드 톤 */
.dark .verse-card.status-done{ background:#20261c; }
.dark .answer-text, .dark .voice-heard, .dark .voice-words,
.dark .voice-summary, .dark .voice-status, .dark .voice-live{ color:#cdd3dd; }