/* ============================================================
   말씀 한 절 암송 테스트 — 등록 시스템과 동일한 톤
   ============================================================ */
: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;
}

/* ---------- 카카오톡 인앱 브라우저 안내 배너 ---------- */
.kakao-ext-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
  background: #fee500; color: #3a1d1d; /* 카카오 옐로 */
  padding: 9px 14px; font-size: 13px; font-weight: 600;
}
.kakao-ext-bar .kakao-ext-msg { flex: 1 1 auto; min-width: 140px; }
.kakao-ext-bar .kakao-ext-open {
  background: #1a3a6b; color: #fff; text-decoration: none;
  padding: 6px 12px; border-radius: 16px; font-weight: 700; white-space: nowrap;
}
.kakao-ext-bar .kakao-ext-close {
  background: transparent; border: none; color: #3a1d1d;
  font-size: 15px; cursor: pointer; padding: 2px 4px; line-height: 1;
}
.kakao-ext-bar .kakao-ext-hint {
  flex: 1 0 100%; font-size: 11px; font-weight: 500; color: #6b4e00;
}

/* ---------- 브랜드 헤더 ---------- */
.page-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(135deg, #0d1b3e 0%, #1a3a6b 40%, #0d4a7a 100%);
  padding: 8px 20px 10px;
  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: 10px 24px;
  margin-bottom: 6px;
  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: 13px; 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: 12px 16px 28px;
}

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;
  width: 100%;
  margin: 0 0 8px;
  text-align: center;
  background: #eef1f8;
  border: 1.5px solid var(--navy);
  color: var(--navy);
  font-weight: 700;
  text-decoration: none;
  padding: 12px;
  border-radius: 12px;
  font-size: .98rem;
  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;
}

/* 진입 화면 헤더 (가운데 정렬 타이틀 + 부제) */
.entry-header { text-align: center; margin-bottom: 2px; }
.entry-main-title {
  font-family: "Noto Sans KR", sans-serif;
  font-size: 18px; font-weight: 800; color: var(--navy);
  letter-spacing: -0.3px; line-height: 1.25; margin: 0;
}
.entry-sub-title {
  font-family: "Nanum Myeongjo", serif;
  font-weight: 600; color: #1a5276; margin: 4px 0 0;
  /* 모바일에서도 한 줄 유지: 화면 폭에 맞춰 글자 크기 축소 */
  white-space: nowrap;
  font-size: clamp(11px, 3.7vw, 15px);
  letter-spacing: -0.2px;
}

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

/* 가로로 긴 카드(한 줄 = 한 구절) */
.verse-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 7px 14px;
  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-card.weekly-verse {
  border: 2px solid var(--gold);
  background: #fffaf0;
  padding-top: 18px;
}
.weekly-list-badge {
  position: absolute; top: -8px; left: 12px;
  background: var(--gold); color: var(--navy-dark);
  border-radius: 999px; padding: 2px 9px;
  font-size: 10px; font-weight: 800; line-height: 1.4;
  box-shadow: 0 2px 8px rgba(200,162,75,.25);
}

.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;
  min-width: 0; /* flex 항목이 줄어들며 ellipsis 되도록(한 줄 유지) */
  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: 6px;
  flex-wrap: nowrap;
}
.btn-row .answer-btn,
.btn-row .voice-btn,
.btn-row .voice-stop {
  margin-top: 0;
  flex: 1 1 0;
  min-width: 0;
  max-width: 170px;
  justify-content: center;
  padding: 9px 6px;
  font-size: 12px;
  white-space: nowrap;
}
.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; }

/* ============================================================
   회원 버전 — 진입(식별)·요약·목록 네비
   ============================================================ */

/* ---------- 진입(식별) 화면 ---------- */
.entry-screen { padding: 4px 14px 20px; }
.entry-card {
  max-width: 460px; margin: 0 auto; background: var(--white);
  border: 1px solid var(--border); border-radius: 16px;
  padding: 16px 18px; box-shadow: 0 6px 20px rgba(13,27,62,.06);
}
.entry-title {
  font-family: "Nanum Myeongjo", serif; color: var(--navy);
  font-size: 1.2rem; text-align: center; margin-bottom: 6px;
}
.entry-sub {
  color: var(--gray); font-size: .8rem; text-align: center;
  line-height: 1.45; margin-bottom: 14px;
}
.entry-field { margin-bottom: 11px; }
.entry-label {
  font-weight: 700; color: var(--navy); font-size: .85rem; margin-bottom: 5px;
}
/* 라벨 + 입력칸을 한 줄에 (목장·학년·성명) */
.entry-field.inline { display: flex; align-items: center; gap: 10px; }
.entry-field.inline .entry-label { margin-bottom: 0; flex: 0 0 auto; min-width: 42px; }
.entry-field.inline .entry-input { flex: 1 1 auto; }
.entry-input {
  width: 100%; padding: 9px 12px; font-size: .95rem;
  border: 1px solid var(--border); border-radius: 10px; background: var(--cream);
  font-family: inherit;
}
.entry-input:focus { outline: none; border-color: var(--navy); background: #fff; }

.radio-row { display: flex; gap: 6px; }
/* 교구·부서 칩은 4열 그리드로 고정(좁은 화면에서도 한 줄에 4개) */
.radio-row.wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.radio-chip { position: relative; cursor: pointer; }
.radio-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.radio-chip span {
  display: inline-block; padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--cream);
  font-size: .85rem; color: #444; transition: all .15s; user-select: none;
}
/* 그리드 칸을 가득 채우도록 */
.radio-row.wrap .radio-chip span {
  display: block; text-align: center; padding: 7px 4px;
}
.radio-chip input:checked + span {
  background: var(--navy); color: #fff; border-color: var(--navy); font-weight: 700;
}

.entry-error {
  color: var(--error); font-size: .82rem; text-align: center;
  margin-bottom: 8px; font-weight: 500;
}
.privacy-box {
  border: 1px solid var(--border); border-radius: 12px;
  background: #f7f4ee; padding: 11px 12px; margin: 10px 0 12px;
  text-align: left;
}
.privacy-title {
  color: var(--navy); font-weight: 800; font-size: .92rem; margin-bottom: 4px;
}
.privacy-box p {
  margin: 0; color: #555; font-size: .8rem; line-height: 1.55;
}
.privacy-more {
  margin: 8px 0 7px; padding: 5px 10px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--white); color: var(--navy);
  font-size: .78rem; font-weight: 700; cursor: pointer; font-family: inherit;
}
.privacy-more:hover { background: #eef2f8; }
.privacy-consent {
  display: flex; align-items: flex-start; gap: 7px; color: #333;
  font-size: .82rem; font-weight: 700; line-height: 1.45; cursor: pointer;
}
.privacy-consent input { margin-top: 3px; flex: none; }
.entry-submit {
  width: 100%; padding: 11px; font-size: 1rem; font-weight: 700;
  color: #fff; background: var(--navy); border: none; border-radius: 12px;
  cursor: pointer; font-family: inherit; transition: background .15s;
}
.entry-submit:hover { background: var(--navy-dark); }

/* ---------- 본인 기록 요약 화면 ---------- */
.summary-screen { padding: 8px 14px 16px; }
.summary-card {
  position: relative;
  max-width: 460px; margin: 0 auto; background: var(--white);
  border: 1px solid var(--border); border-radius: 16px;
  padding: 16px 18px; box-shadow: 0 6px 20px rgba(13,27,62,.06); text-align: center;
}
/* 인사말(왼쪽 가운데) + 아이콘(오른쪽)을 같은 줄에 */
.summary-headrow {
  display: flex; align-items: center; gap: 4px; margin-bottom: 6px;
}
.summary-icons {
  display: flex; gap: 5px; flex: none;
}
.summary-icon {
  width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--bg); color: var(--navy);
  font-size: 16px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.summary-icon:hover { background: #eef2f8; }
.dark .summary-icon { background: #223049; border-color: #33465f; color: #e6e9ef; }
/* 설정 화면 헤더: 제목 중앙 + 우측 작은 '뒤로' 버튼 */
.settings-head {
  position: relative; display: flex; align-items: center;
  justify-content: center; margin: 2px 0 12px;
}
.settings-head .rank-title { margin: 0; }
.settings-back-btn {
  position: absolute; right: 0;
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--navy);
  font-size: 14px; font-weight: 700; cursor: pointer;
}
.settings-back-btn:hover { background: #eef2f8; }
.dark .settings-back-btn { background: #223049; border-color: #33465f; color: #e6e9ef; }

/* 설정 화면 — 듣기 속도 선택 */
.setting-block {
  border: 1px solid var(--border); border-radius: 12px;
  padding: 12px; margin: 0 0 8px; background: var(--bg);
}
.setting-label {
  font-weight: 700; color: var(--navy); font-size: .96rem; margin-bottom: 8px;
}
.sync-status {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--white); padding: 10px 11px; margin: 0 0 10px;
  text-align: left;
}
.sync-status.compact { margin: 0 0 10px; padding: 9px 10px; }
.sync-title {
  color: var(--navy); font-size: .9rem; font-weight: 800; line-height: 1.3;
}
.sync-detail {
  color: var(--gray); font-size: .76rem; line-height: 1.45; margin-top: 2px;
}
.sync-retry {
  flex: 0 0 auto; border: 1px solid var(--border); border-radius: 999px;
  background: #eef1f8; color: var(--navy); font-family: inherit;
  font-size: .76rem; font-weight: 800; padding: 6px 10px; cursor: pointer;
}
.sync-retry:hover { background: #dde4f2; }
.sync-retry:disabled { opacity: .55; cursor: wait; }
.sync-status.success { border-color: #bcdfc1; background: #f3fbf5; }
.sync-status.success .sync-title { color: var(--green); }
.sync-status.error { border-color: #f0c9c6; background: #fff5f4; }
.sync-status.error .sync-title { color: var(--error); }
.sync-status.saving { border-color: #ecd9a0; background: #fffaf0; }
.sync-status.saving .sync-title { color: #9a7b28; }
.sync-status.local { border-color: #d6dbe5; background: #f7f8fb; }
.tts-rate-row { display: flex; gap: 6px; margin-bottom: 8px; }
.tts-rate-row button {
  flex: 1; padding: 9px 4px; font-size: .86rem; font-weight: 700;
  border: 1.5px solid var(--border); border-radius: 9px;
  background: var(--white); color: var(--navy); cursor: pointer; font-family: inherit;
}
.tts-rate-row button.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.tts-preview {
  width: 100%; padding: 10px; font-size: .92rem; font-weight: 700;
  border: 1.5px solid var(--navy); border-radius: 10px;
  background: #eef1f8; color: var(--navy); cursor: pointer; font-family: inherit;
}
.tts-preview:hover { background: #dce3f5; }
.dark .setting-block { background: #1c2536; border-color: #33465f; }
.dark .setting-label { color: #e6e9ef; }
.dark .tts-rate-row button { background: #223049; color: #cdd9f2; border-color: #3a4a68; }
.dark .tts-rate-row button.on { background: #3a4a68; color: #fff; border-color: #4a5f8a; }
.dark .tts-preview { background: #232c3f; color: #cdd9f2; border-color: #3a4a68; }
.summary-hello {
  flex: 1; /* 아이콘 영역을 제외한 나머지 폭에서 가운데 정렬 */
  font-family: "Nanum Myeongjo", serif; color: var(--navy);
  font-size: 0.82rem; /* 0.91rem의 0.9배 */ line-height: 1.35; margin-bottom: 0;
}
/* 인사 문구 내 소속(화평-20 등)과 '성도님'은 작게, 이름만 크게 */
.summary-hello .summary-affil,
.summary-hello .summary-honor { font-size: 0.8rem; font-weight: 600; color: var(--navy); }
/* 인사 문구 내 로그인 정보(이름·소속) 강조 */
.summary-hello .summary-user {
  font-size: 1rem; /* 기존 1.25rem의 0.8배 */ font-weight: 800; color: var(--navy);
  letter-spacing: -0.3px;
}
.gauge-wrap { margin-bottom: 6px; }
.gauge-pct {
  font-size: 2.6rem; font-weight: 800; color: var(--gold);
  font-family: "Nanum Myeongjo", serif; line-height: 1;
}
.gauge-bar {
  height: 12px; background: var(--light); border-radius: 999px;
  overflow: hidden; margin: 0 0 4px;
}
.gauge-fill {
  height: 100%; background: linear-gradient(90deg, var(--gold), #e0c674);
  border-radius: 999px; transition: width .5s ease;
}
.gauge-sub { color: var(--gray); font-size: .85rem; }
.gauge-sub b { color: var(--navy); }

.stat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px; margin-bottom: 12px;
}
.stat-box {
  border-radius: 12px; padding: 8px 6px; border: 1px solid var(--border);
  background: var(--cream);
}
.stat-num { font-size: 1.5rem; font-weight: 800; color: var(--navy); }
.stat-lbl { font-size: .72rem; color: var(--gray); margin-top: 2px; }
.stat-box.status-done { background: #eaf5ec; border-color: #bcdfc1; }
.stat-box.status-done .stat-num { color: var(--green); }
.stat-box.status-s2 { background: #fff6e0; border-color: #ecd9a0; }
.stat-box.status-s1 { background: #f0f4fb; border-color: #c9d8ef; }

.weekly-card {
  border: 1.5px solid var(--gold);
  border-radius: 14px;
  background: #fffaf0;
  padding: 12px;
  margin: 0 0 12px;
  text-align: left;
}
.weekly-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.weekly-kicker {
  display: inline-block;
  background: var(--gold);
  color: var(--navy-dark);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: .75rem;
  font-weight: 800;
  white-space: nowrap;
}
.weekly-ref {
  color: var(--navy);
  font-family: "Nanum Myeongjo", serif;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.35;
}
.weekly-title {
  color: #6b5a2a;
  font-size: .86rem;
  font-weight: 700;
  margin-top: 2px;
}
.weekly-text {
  color: #333;
  font-size: .9rem;
  line-height: 1.55;
  margin: 8px 0;
}
.weekly-state {
  display: inline-block;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: .76rem;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(13,27,62,.08);
}
.weekly-state.status-none { color: var(--gray); background: var(--light); }
.weekly-state.status-s1 { color: var(--navy); background: #e7ecf5; }
.weekly-state.status-s2 { color: var(--white); background: var(--navy); }
.weekly-state.status-done {
  color: var(--navy-dark);
  background: linear-gradient(135deg,#ffe7a8 0%,#f4c95d 100%);
  border: 1px solid #d6a928;
  font-size: .82rem;
}
.weekly-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.weekly-actions.single { grid-template-columns: 1fr; }
.weekly-actions .weekly-primary,
.weekly-actions .weekly-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border-radius: 10px;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 800;
  text-decoration: none;
}
.weekly-primary {
  background: var(--navy);
  color: #fff;
  border: 1.5px solid var(--navy);
  cursor: pointer;
}
.weekly-secondary {
  background: #fff;
  color: var(--navy);
  border: 1.5px solid var(--border);
}
.weekly-primary:hover { background: var(--navy-dark); border-color: var(--navy-dark); }
.weekly-secondary:hover { background: #eef2f8; }
@media (max-width: 360px) {
  .weekly-topline { flex-direction: row; align-items: center; gap: 6px; }
}

.summary-next {
  font-size: .92rem; color: #444; margin-bottom: 12px;
  padding: 9px; background: var(--cream); border-radius: 10px;
}
.summary-next b { color: var(--navy); }

/* 세 버튼 공통 크기·테두리(조화) — 채움 색으로만 위계 구분 */
.summary-go {
  width: 100%; padding: 12px; font-size: .98rem; font-weight: 700;
  color: #fff; background: var(--navy); border: 1.5px solid var(--navy); border-radius: 12px;
  cursor: pointer; font-family: inherit; margin-bottom: 8px;
  transition: background .15s, transform .12s, box-shadow .15s;
}
.summary-go:hover {
  background: var(--navy-dark); border-color: var(--navy-dark);
  transform: translateY(-2px); box-shadow: 0 6px 16px rgba(13,27,62,.28);
}
.summary-go:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(13,27,62,.22); }
.summary-install {
  display: block;
  width: 100%;
  margin: 0 0 8px;
  text-align: center;
  background: #eef1f8;
  border: 1.5px solid var(--navy);
  color: var(--navy);
  font-weight: 700;
  text-decoration: none;
  padding: 12px;
  border-radius: 12px;
  font-size: .98rem;
  cursor: pointer;
  font-family: "Noto Sans KR", sans-serif;
  transition: background 0.15s;
}
.summary-install:hover { background: #dce3f5; }

/* ---------- 공유하기 버튼 ---------- */
.summary-share {
  display: block;
  width: 100%;
  margin: 0 0 8px;
  text-align: center;
  background: #eef5ee;
  border: 1.5px solid var(--green);
  color: var(--green);
  font-weight: 700;
  padding: 12px;
  border-radius: 12px;
  font-size: .98rem;
  cursor: pointer;
  font-family: "Noto Sans KR", sans-serif;
  transition: background 0.15s;
}
.summary-share:hover { background: #d6ecd6; }

/* ---------- 공유 토스트 ---------- */
.share-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(26, 58, 107, 0.93);
  color: #fff;
  padding: 12px 22px;
  border-radius: 24px;
  font-size: .92rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 9999;
  pointer-events: none;
  max-width: 90vw;
  word-break: keep-all;
}
.share-toast.share-toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.summary-change {
  margin-bottom: 8px;
  width: 100%; padding: 12px; font-size: .98rem; font-weight: 600;
  color: var(--gray); background: #fff; border: 1.5px solid var(--border);
  border-radius: 12px; cursor: pointer; font-family: inherit;
}
.summary-change:hover { background: var(--cream); }

/* 요약 화면 도움말 버튼 (한 줄 전체) */
.summary-help {
  width: 100%; padding: 12px; font-size: .98rem; font-weight: 700;
  color: var(--navy); background: #eef1f8; border: 1.5px solid var(--navy);
  border-radius: 12px; cursor: pointer; font-family: inherit; margin-bottom: 8px;
  transition: background .15s, color .15s;
}
.summary-help:hover { background: var(--navy); color: #fff; }

/* ---------- 목록 상단 네비 ---------- */
.list-nav {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  max-width: 720px; margin: 0 auto 6px; padding: 2px 0;
}
/* 기록보기: 요약 화면 '암송하러 가기'와 동일 스타일 — 채운 네이비 */
.list-nav .nav-record {
  max-width: none; width: 100%; text-align: center;
  padding: 12px; font-size: .98rem; font-weight: 700; border-radius: 12px;
  background: var(--navy); color: #fff; border: 1.5px solid var(--navy);
}
.list-nav .nav-record:hover { background: var(--navy-dark); color: #fff; }
/* 도움말: 요약 화면 '도움말 보기'와 동일 스타일 — 옅은 네이비 + 네이비 테두리 */
.list-nav .help-btn {
  width: 100%; padding: 12px; font-size: .98rem; font-weight: 700; border-radius: 12px;
  background: #eef1f8; color: var(--navy); border: 1.5px solid var(--navy);
}
.list-nav .help-btn:hover { background: var(--navy); color: #fff; }
.nav-btn {
  background: transparent; border: 1px solid var(--border); border-radius: 999px;
  padding: 7px 14px; font-size: .85rem; color: var(--navy); cursor: pointer;
  font-family: inherit; font-weight: 500;
}
.nav-btn:hover { background: var(--white); }
/* 로그인 정보를 담은 '내 기록' 버튼 — 알림 버튼(remind-cta)과 동일 스타일 */
.nav-record {
  margin: 0; cursor: pointer; font-family: inherit;
  font-size: .88rem; /* remind-cta .98rem의 0.9배 */
}
.nav-record:hover { background: var(--navy); color: #fff; }
.nav-user {
  display: flex; flex-direction: column; align-items: flex-end;
  color: var(--navy); font-weight: 700; line-height: 1.25; text-align: right;
}
.nav-user .nav-user-l1 { font-size: .82rem; white-space: nowrap; }
.nav-user .nav-user-l2 { font-size: .9rem; white-space: nowrap; }

/* ============================================================
   첫 방문 인트로 + 도움말
   ============================================================ */
.help-btn {
  background: #eef1f8; border: 1px solid var(--navy); color: var(--navy);
  font-weight: 700; font-size: 13px; padding: 6px 13px; border-radius: 999px;
  cursor: pointer; font-family: inherit; transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.help-btn:hover { background: var(--navy); color: #fff; }

/* ---------- 인트로(첫 방문) ---------- */
.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); }

/* ============================================================
   매일 말씀 암송 도전(챌린지) + 순위
   ============================================================ */

/* 요약 화면의 도전 버튼 강조 (골드 계열) */
.summary-go.challenge-cta{
  background:linear-gradient(135deg,#c8a84b 0%,#d9bd68 100%);
  color:var(--navy-dark); border:1.5px solid var(--gold);
}
.summary-go.challenge-cta:hover{ background:linear-gradient(135deg,#bd9c3f 0%,#ccae59 100%); color:var(--navy-dark); }

/* 도전 화면 배지 */
.test-stage.challenge-badge{ background:var(--gold); color:var(--navy-dark); }
.challenge-hint-line{
  text-align:center; color:var(--gray); font-size:.86rem; line-height:1.5; margin:2px 0 14px;
}
.challenge-hint-line b{ color:var(--navy); }

/* 도전 완료 화면 */
.cd-card{ text-align:center; }
.cd-emoji{ font-size:52px; line-height:1; margin-bottom:6px; }
.cd-title{ font-family:"Nanum Myeongjo",serif; font-weight:800; color:var(--navy); font-size:1.5rem; }
.cd-sub{ color:var(--gray); font-size:.92rem; margin-top:6px; }
.cd-count{ margin:12px 0 20px; font-size:1rem; color:#444; }
.cd-count b{ color:var(--gold); font-weight:800; }

/* 순위 화면 */
.rank-screen{ max-width:520px; margin:0 auto; }
.rank-title{
  text-align:center; font-family:"Nanum Myeongjo",serif; color:var(--navy);
  font-size:1.35rem; font-weight:800; margin:4px 0 14px;
}
.rank-filter{ display:flex; gap:7px; justify-content:center; flex-wrap:wrap; margin-bottom:16px; }
.rank-filter button{
  border:1px solid var(--border); background:#fff; color:var(--navy);
  border-radius:999px; padding:7px 14px; font-size:.85rem; font-weight:600;
  cursor:pointer; font-family:inherit; transition:all .15s;
}
.rank-filter button:hover{ background:var(--cream); }
.rank-filter button.on{ background:var(--navy); color:#fff; border-color:var(--navy); }

/* 내 순위 (최상단 고정) */
.my-rank{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:linear-gradient(135deg,#0d1b3e 0%,#1a3a6b 100%); color:#fff;
  border-radius:14px; padding:14px 16px; margin-bottom:14px;
  box-shadow:0 4px 16px rgba(13,27,62,.18);
}
.my-rank .mr-label{ font-size:.78rem; color:rgba(255,255,255,.75); }
.my-rank .mr-rank{ font-size:1.3rem; font-weight:800; min-width:1.6em; text-align:center; }
.my-rank .mr-name{ font-weight:800; font-size:1.05rem; }
.my-rank .mr-cnt{ margin-left:auto; font-weight:800; color:var(--gold); }
.my-rank .mr-cnt.none{ color:rgba(255,255,255,.85); font-weight:600; font-size:.85rem; }

/* 순위 리스트 */
.rank-list{ display:flex; flex-direction:column; gap:7px; }
.rank-row{
  display:flex; align-items:center; gap:12px;
  background:#fff; border:1px solid var(--border); border-radius:11px; padding:11px 14px;
}
.rank-row.top{ border-color:var(--gold); background:#fffdf6; }
.rank-row.me{ box-shadow:0 0 0 2px var(--navy) inset; }
.rank-row .rk-no{ font-size:1.05rem; font-weight:800; color:var(--navy); min-width:1.8em; text-align:center; }
.rank-row .rk-name{ font-weight:700; color:#222; }
.rank-row .rk-so{ color:var(--gray); font-size:.82rem; }
.rank-row .rk-cnt{ margin-left:auto; font-weight:800; color:var(--navy); }
.rank-row.top .rk-cnt{ color:var(--gold); }
.rank-msg{ text-align:center; color:var(--gray); padding:30px 10px; line-height:1.6; }
.rank-msg.err{ color:var(--error); }
.rank-more{ text-align:center; color:var(--gray); font-size:.82rem; margin-top:10px; }

/* 도전 화면 — 남은 빈칸 표시 */
.challenge-remain{
  text-align:center; font-size:.9rem; font-weight:700; color:var(--gray);
  margin:12px 0 4px; transition:color .15s;
}
.challenge-remain.clear{ color:var(--green); }

/* 순위 화면 — 날짜 직접 선택 (한 줄에 들어오도록 작게) */
.rank-dates{
  display:flex; align-items:center; justify-content:center; gap:5px;
  flex-wrap:nowrap; margin-bottom:16px;
}
.rank-dates input[type=date]{
  flex:1 1 0; min-width:0;
  padding:6px 6px; border:1px solid var(--border); border-radius:8px;
  background:#fff; font-family:inherit; font-size:.76rem; color:var(--navy);
}
.rank-dates .rd-sep{ flex:0 0 auto; color:var(--gray); font-size:.8rem; }
.rank-dates .rd-go{
  flex:0 0 auto; padding:7px 13px; border:none; border-radius:999px; background:var(--navy);
  color:#fff; font-weight:700; font-size:.82rem; cursor:pointer; font-family:inherit;
}
.rank-dates .rd-go:hover{ background:var(--navy-dark); }

/* ---- 순위/내참여 모드 전환 바 ---- */
.rank-mode{ display:flex; gap:8px; justify-content:center; margin:2px 0 12px; }
.rank-mode button{
  flex:1 1 0; max-width:200px; padding:10px; border:1.5px solid var(--navy);
  background:#eef1f8; color:var(--navy); font-weight:700; font-size:.92rem;
  border-radius:12px; cursor:pointer; font-family:inherit; transition:all .15s;
}
.rank-mode button.on{ background:var(--navy); color:#fff; }
.rank-mode button:hover{ background:var(--navy); color:#fff; }

/* ---- 내 참여 달력 ---- */
.myrec-ctrl{ display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:14px; flex-wrap:nowrap; }
.myrec-toggle{ display:flex; gap:4px; flex:0 0 auto; }
.myrec-toggle button{
  border:1px solid var(--border); background:#fff; color:var(--navy);
  border-radius:999px; padding:6px 11px; font-size:.8rem; font-weight:700;
  cursor:pointer; font-family:inherit; white-space:nowrap;
}
.myrec-toggle button.on{ background:var(--navy); color:#fff; border-color:var(--navy); }
.myrec-nav{ display:flex; align-items:center; gap:5px; flex:0 0 auto; }
.myrec-nav button{
  border:1px solid var(--border); background:#fff; color:var(--navy);
  border-radius:8px; width:28px; height:28px; cursor:pointer; font-size:.8rem; font-family:inherit; flex:0 0 auto;
}
.myrec-nav button:hover{ background:var(--cream); }
.myrec-nav #mr-label{ font-weight:700; color:var(--navy); font-size:.82rem; min-width:76px; text-align:center; white-space:nowrap; }

.mc-summary{ text-align:center; margin-bottom:10px; font-size:.9rem; color:#444; }
.mc-summary b.done{ color:var(--green); }
.mc-summary b.miss{ color:var(--error); }
.mc-summary .mc-sub{ color:var(--gray); font-size:.8rem; }

.mc-week-head{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-bottom:5px; }
.mc-week-head span{ text-align:center; font-size:.75rem; color:var(--gray); font-weight:600; }
.mc-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.mc-cell{
  min-height:52px; border:1px solid var(--border); border-radius:9px; background:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:4px 2px;
}
.mc-cell.blank{ border:none; background:transparent; }
.mc-cell .mc-day{ font-size:.8rem; font-weight:700; color:#333; }
.mc-cell .mc-cnt{ font-size:.72rem; font-weight:700; color:var(--green); }
.mc-cell .mc-cnt.miss{ color:var(--border); font-size:1rem; line-height:1; }
.mc-cell.done{ background:#eaf5ec; border-color:#bcdfc1; }
.mc-cell.miss{ background:#fbeceb; border-color:#f0c9c6; }
.mc-cell.future{ background:var(--light); opacity:.55; }
.mc-cell.today{ box-shadow:0 0 0 2px var(--gold) inset; }
/* 요일/공휴일 색: 일·공휴일 빨강, 토 파랑 */
.mc-day.sun{ color:var(--error) !important; }
.mc-day.sat{ color:#1a5fd0 !important; }
.mc-week-head span.sun{ color:var(--error); }
.mc-week-head span.sat{ color:#1a5fd0; }

/* ============================================================
   앱 시작 스플래시 + 화면 전환 로딩
   ============================================================ */
#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; }
.splash-denom{ display:block; width:230px; max-width:74vw; height:auto;
  margin:calc(24px + 2cm) auto 0;
  background:rgba(255,255,255,.85); border-radius:12px; padding:8px 12px;
  backdrop-filter:blur(2px); box-shadow:0 2px 12px rgba(0,0,0,.12); }
.splash-ver{ color:rgba(255,255,255,.6); font-size:.78rem; margin-top:10px; letter-spacing:.5px; }
.app-status{ font-size:.78rem; color:var(--gray); text-align:center; margin:2px 0 8px; }
.dark .app-status{ color:#aeb8c8; }
.btn-sub{ display:block; font-size:.82rem; font-weight:600; opacity:.8; margin-top:2px; }
.push-off{ display:block; margin:0 auto 8px; background:none; border:none; color:var(--gray);
  font-size:.85rem; font-weight:600; text-decoration:underline; cursor:pointer; font-family:inherit; padding:4px; }
.push-off:hover{ color:var(--error); }
.dark .push-off{ color:#aeb8c8; }
@keyframes splashPop{ from{ transform:scale(.92); opacity:0 } to{ transform:scale(1); opacity:1 } }

/* 화면 전환 로딩(로고 + 불러오는 중...) */
.app-loading{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:56px 20px; gap:14px;
}
.app-loading .al-logo{
  width:64px; height:auto; border-radius:14px;
  animation:alPulse 1.1s ease-in-out infinite;
}
.app-loading .al-text{ color:var(--gray); font-size:.95rem; font-weight:600; }
@keyframes alPulse{ 0%,100%{ transform:scale(1); opacity:.65 } 50%{ transform:scale(1.08); opacity:1 } }

/* ============================================================
   야간(다크) 모드
   ============================================================ */
.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 .rank-title,
.dark .summary-hello, .dark .cd-title, .dark .entry-title, .dark .help-title,
.dark .stat-num, .dark .rk-name, .dark .rk-cnt, .dark .mr-label,
.dark .test-stage, .dark .answer-title, .dark .gauge-pct, .dark .rank-row .rk-no{
  color:#cdd9f2;
}
/* 카드·패널 텍스트 */
.dark .verse-card, .dark .test-card, .dark .summary-card, .dark .entry-card,
.dark .answer-panel, .dark .rank-row, .dark .kpi, .dark .stat-box,
.dark .my-rank, .dark .mc-cell, .dark .voice-result, .dark .test-sentence,
.dark .word-fixed{ color:#e6e9ef; }
.dark .verse-hint, .dark .entry-sub, .dark .cd-sub, .dark .gauge-sub,
.dark .summary-next, .dark .help-section p, .dark .help-section li,
.dark .challenge-hint-line, .dark .rank-msg, .dark .mc-summary{ color:#aeb8c8; }
.dark .help-section b, .dark .summary-next b, .dark .gauge-sub b{ color:#cdd9f2; }

/* 옅은 네이비 버튼 → 어두운 표면 */
.dark .remind-cta, .dark .back-btn, .dark .answer-btn, .dark .help-btn,
.dark .summary-help, .dark .summary-change, .dark .nav-btn, .dark .nav-record,
.dark .rank-filter button, .dark .card-listen, .dark .myrec-toggle button,
.dark .myrec-nav button, .dark .rank-dates .rd-go, .dark .back-to-test-btn{
  background:#232c3f; color:#cdd9f2; border-color:#3a4a68;
}
.dark .remind-cta:hover, .dark .answer-btn:hover, .dark .help-btn:hover,
.dark .rank-filter button:hover{ background:#2e3a52; color:#fff; }
.dark .rank-filter button.on, .dark .myrec-toggle button.on{ background:#3a4a68; color:#fff; }

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

/* 상태/달력 배경 톤 살짝 조정 */
.dark .verse-card.status-done, .dark .rank-row.top{ background:#20261c; }
.dark .mc-cell.done{ background:#17301f; border-color:#2c5f2d; }
.dark .mc-cell.miss{ background:#3a2020; border-color:#6b2f2f; }
.dark .mc-cell.future{ background:#171c26; }
.dark .stat-box.status-done{ background:#17301f; }

.page-header{ position: relative; }

/* 다크: 밝게 남은 카드/버튼 보정 (요약 화면) */
.dark .stat-box.status-s2{ background:#2b2717; border-color:#4a4327; }
.dark .stat-box.status-s2 .stat-num{ color:#e8d9a3; }
.dark .stat-box.status-s1{ background:#1b2740; border-color:#33405a; }
.dark .stat-box.status-s1 .stat-num{ color:#a8c4f0; }
.dark .stat-box.status-done .stat-num{ color:#8fd7a0; }
.dark .summary-install{ background:#232c3f; color:#cdd9f2; border-color:#3a4a68; }
.dark .summary-install:hover{ background:#2e3a52; }
.dark .summary-share{ background:#17301f; color:#bfe6c9; border-color:#2c5f2d; }
.dark .summary-share:hover{ background:#1f3f2a; }
.dark .radio-chip span{ color:#cdd3dd; }
.dark .answer-text, .dark .voice-heard, .dark .voice-words,
.dark .voice-summary, .dark .voice-status, .dark .voice-live{ color:#cdd3dd; }
.dark .privacy-box{ background:#1b2333; border-color:#33465f; }
.dark .privacy-title{ color:#cdd9f2; }
.dark .privacy-box p, .dark .privacy-consent{ color:#cdd3dd; }
.dark .privacy-more{ background:#232c3f; color:#cdd9f2; border-color:#3a4a68; }
.dark .privacy-more:hover{ background:#2e3a52; color:#fff; }
.dark .verse-card.weekly-verse{ background:#2b2717; border-color:#8d7531; }
.dark .weekly-list-badge, .dark .weekly-kicker{ background:#d3b45b; color:#17213a; }
.dark .weekly-card{ background:#2b2717; border-color:#8d7531; }
.dark .weekly-ref{ color:#e8d9a3; }
.dark .weekly-title{ color:#d7c78e; }
.dark .weekly-text{ color:#e6e9ef; }
.dark .weekly-secondary{ background:#232c3f; color:#cdd9f2; border-color:#3a4a68; }
.dark .weekly-secondary:hover{ background:#2e3a52; color:#fff; }
.dark .sync-status{ background:#1b2333; border-color:#33465f; }
.dark .sync-title{ color:#cdd9f2; }
.dark .sync-detail{ color:#aeb8c8; }
.dark .sync-retry{ background:#232c3f; color:#cdd9f2; border-color:#3a4a68; }
.dark .sync-retry:hover{ background:#2e3a52; color:#fff; }
.dark .sync-status.success{ background:#17301f; border-color:#2c5f2d; }
.dark .sync-status.success .sync-title{ color:#8fd7a0; }
.dark .sync-status.error{ background:#3a2020; border-color:#6b2f2f; }
.dark .sync-status.error .sync-title{ color:#ffaaa2; }
.dark .sync-status.saving{ background:#2b2717; border-color:#4a4327; }
.dark .sync-status.saving .sync-title{ color:#e8d9a3; }

/* 복습 모드 버튼/배지 (요약 화면 + 복습 화면) */
.summary-go.review-cta{
  background:linear-gradient(135deg,#2c7a7b 0%,#37a0a0 100%);
  color:#fff; border:1.5px solid #2c7a7b;
}
.summary-go.review-cta:hover{ filter:brightness(1.06); background:linear-gradient(135deg,#2c7a7b 0%,#37a0a0 100%); }
.test-stage.review-badge{ background:#2c7a7b; color:#fff; }

/* 로그인 방법 도움말 버튼(진입/인트로) + 단계 안내 */
.login-help-btn{
  display:inline-block; margin-top:10px;
  background:#eef1f8; border:1.5px solid var(--navy); color:var(--navy);
  font-weight:700; font-size:.9rem; padding:8px 16px; border-radius:999px;
  cursor:pointer; font-family:inherit; transition:background .15s, color .15s;
}
.login-help-btn:hover{ background:var(--navy); color:#fff; }
.dark .login-help-btn{ background:#232c3f; color:#cdd9f2; border-color:#3a4a68; }
/* '로그인 방법' 버튼을 구분 위 오른쪽에 */
.login-help-row{ text-align:right; margin-bottom:8px; }
.login-help-row .login-help-btn{ margin:0; padding:6px 12px; font-size:.8rem; }

.lh-intro{ color:#444; font-size:.95rem; line-height:1.6; margin:2px 0 12px; }
/* 로그인 방법 탭(교구/교회학교) */
.lh-tabs{ display:flex; gap:8px; margin-bottom:16px; }
.lh-tabs button{
  flex:1 1 0; padding:11px; border:1.5px solid var(--navy); background:#eef1f8;
  color:var(--navy); font-weight:800; font-size:1rem; border-radius:12px;
  cursor:pointer; font-family:inherit; transition:all .15s;
}
.lh-tabs button.on{ background:var(--navy); color:#fff; }
.lh-tabs button:hover{ background:var(--navy); color:#fff; }
.dark .lh-tabs button{ background:#232c3f; color:#cdd9f2; border-color:#3a4a68; }
.dark .lh-tabs button.on{ background:#3a4a68; color:#fff; }
.dark .lh-intro{ color:#c3ccd9; }
.login-steps{ display:flex; flex-direction:column; gap:11px; }
.lh-step{ display:flex; align-items:flex-start; gap:12px; font-size:1rem; line-height:1.5; color:#333; }
.dark .lh-step{ color:#dfe4ec; }
.lh-step .lh-no{
  flex-shrink:0; width:28px; height:28px; border-radius:50%;
  background:var(--navy); color:#fff; font-weight:800; font-size:.95rem;
  display:flex; align-items:center; justify-content:center;
}
.lh-step b{ color:var(--navy); }
.dark .lh-step b{ color:#a8c4f0; }
.lh-tip{
  margin-top:16px; padding:11px 13px; border-radius:10px;
  background:var(--cream); border:1px solid var(--border);
  color:#555; font-size:.88rem; line-height:1.6;
}
.dark .lh-tip{ color:#aeb8c8; }