:root {
  --bg: #fbfaf7;
  --bg-card: #ffffff;
  --fg: #232b33;
  --fg-soft: #6b7682;
  --line: #e7e3da;
  --accent: #b5651d;
  --accent-soft: #f3e7d8;
  --verse-num: #b09a7e;
  --reader-font: 20px;
  --serif: "Noto Serif KR", "Apple SD Gothic Neo", "Malgun Gothic", serif;
  --sans: "Apple SD Gothic Neo", "Malgun Gothic", -apple-system, system-ui, sans-serif;
}
body.dark {
  --bg: #161b21;
  --bg-card: #1f262e;
  --fg: #e6e9ec;
  --fg-soft: #9aa6b2;
  --line: #2c343d;
  --accent: #e0a868;
  --accent-soft: #2a2620;
  --verse-num: #7d8a78;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0;
  height: 100%; overflow: hidden;
  overscroll-behavior: none;
}
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  line-height: 1.6;
  touch-action: manipulation;
}
.hidden { display: none !important; }

/* PIN 게이트 (인증 안 됐을 때 풀스크린) */
.pin-gate {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  padding: 20px;
}
.pin-card {
  width: 100%; max-width: 320px;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 18px; padding: 32px 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  text-align: center;
}
.pin-card__title {
  font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--accent);
  margin-bottom: 8px;
}
.pin-card__sub { font-size: 14px; color: var(--fg-soft); margin-bottom: 24px; }
.pin-form { display: flex; flex-direction: column; gap: 10px; }
.pin-form input {
  width: 100%; min-width: 0; box-sizing: border-box;
  padding: 14px 16px; font-size: 20px; text-align: center; letter-spacing: 0.2em;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); color: var(--fg); font-family: var(--sans);
}
.pin-form input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.pin-form button {
  width: 100%; padding: 14px; border: none; border-radius: 10px;
  background: var(--accent); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
}
.pin-form button:disabled { opacity: 0.5; }
.pin-error {
  margin-top: 14px; font-size: 13px; color: #c0562b; font-weight: 600;
}
.member-select {
  width: 100%; min-width: 0; box-sizing: border-box;
  padding: 14px 16px; font-size: 16px; text-align: center;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); color: var(--fg); font-family: var(--sans);
  appearance: none; -webkit-appearance: none;
}
.member-select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* 상단 바 — body 스크롤 안 함으로 sticky → fixed */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: calc(env(safe-area-inset-top) + 10px) 14px 10px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar__ref {
  display: flex; align-items: center; gap: 6px;
  font-size: 18px; font-weight: 700; color: var(--fg);
  background: none; border: none; padding: 6px 8px; border-radius: 10px;
  cursor: pointer;
}
.topbar__ref:active { background: var(--accent-soft); }
.topbar__actions { display: flex; gap: 4px; }
.chev { font-size: 12px; color: var(--fg-soft); }
.iconbtn {
  background: none; border: none; font-size: 19px; cursor: pointer;
  padding: 7px; border-radius: 10px; line-height: 1; color: var(--fg);
}
.iconbtn:active { background: var(--accent-soft); }
.iconbtn svg { display: block; }

/* 읽기 영역 — body 가 스크롤 X, reader 자체가 스크롤 컨테이너 (iPad 의 rubber-band 차단) */
.reader {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  overflow-y: auto; overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  padding-top: calc(env(safe-area-inset-top) + 56px);
  padding-bottom: calc(env(safe-area-inset-bottom) + 90px);
  padding-left: 0; padding-right: 0;
}
.reader > *:not(.chapter-nav) {
  max-width: 720px;
  margin-left: auto; margin-right: auto;
  padding-left: 20px; padding-right: 20px;
}
.chapter-title {
  font-family: var(--serif);
  font-size: 26px; font-weight: 700; margin: 8px 0 18px;
  letter-spacing: -0.01em;
}

/* 요약 카드 */
.summary {
  background: var(--accent-soft); border-radius: 14px;
  margin: 10px 0 22px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.summary__head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: none; border: none; cursor: pointer;
  padding: 15px 16px 13px; font-size: 15px; font-weight: 700; color: var(--accent);
}
.summary__title { display: inline-flex; align-items: center; gap: 7px; }
.summary__claude { flex: 0 0 auto; }
.summary__ai {
  font-size: 10px; font-weight: 700; letter-spacing: 0.03em; color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 4px; padding: 1px 4px;
}
.summary__body {
  padding: 0 16px 15px; font-size: 15.5px; line-height: 1.72; color: var(--fg);
  white-space: pre-wrap;
}
.summary__body.collapsed { display: none; }
.summary__body em { color: var(--fg-soft); font-style: normal; }
.summary__intro { padding: 14px 16px 15px; border-bottom: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.summary__intro-head { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 6px; }
.summary__intro-body { font-size: 14.5px; line-height: 1.66; color: var(--fg); white-space: pre-wrap; }

/* 구절 */
.verses { font-family: var(--serif); font-size: var(--reader-font); }
.verse { margin: 0 0 6px; padding: 4px 2px; border-radius: 8px; scroll-margin-top: 80px; }
.verse__num {
  font-family: var(--sans); font-size: 0.66em; font-weight: 700;
  color: var(--verse-num); vertical-align: 0.32em; margin-right: 6px;
  min-width: 1.4em; display: inline-block; text-align: right;
}
.verse__txt { }
/* 시편 표제(superscription) — 1절 위 heading. 본문 아닌 안내 톤(이탤릭·연한 색). */
.verse-superscript {
  font-family: var(--serif); font-style: italic;
  font-size: 0.86em; color: var(--fg-soft);
  margin: 2px 2px 10px; padding: 0 2px; line-height: 1.5;
}
/* 절 전체 하이라이트 — 배경 채움 대신 본문 텍스트에 색 밑줄 (줄 형식) */
.verse.hl-1 .verse__txt,
.verse.hl-2 .verse__txt,
.verse.hl-3 .verse__txt,
.verse.hl-4 .verse__txt,
.verse.hl-5 .verse__txt {
  text-decoration-line: underline; text-decoration-thickness: 2px;
  text-underline-offset: 3px; text-decoration-skip-ink: none;
}
.verse.hl-1 .verse__txt { text-decoration-color: #f1c40f; }
.verse.hl-2 .verse__txt { text-decoration-color: #67c172; }
.verse.hl-3 .verse__txt { text-decoration-color: #5aa8ff; }
.verse.hl-4 .verse__txt { text-decoration-color: #ff7aa3; }
.verse.hl-5 .verse__txt { text-decoration-color: #ff9c3b; }
.verse.flash { background: #fff3bf; }
body.dark .verse.flash { background: #4a4416; }
/* 하이라이트 도트 모드 — 밑줄 대신 절 번호 옆 작은 색 점 */
body.hl-dot .verse.hl-1 .verse__txt,
body.hl-dot .verse.hl-2 .verse__txt,
body.hl-dot .verse.hl-3 .verse__txt,
body.hl-dot .verse.hl-4 .verse__txt,
body.hl-dot .verse.hl-5 .verse__txt { text-decoration: none; }
body.hl-dot .verse__num::after {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-left: 5px; vertical-align: 0.18em; background: transparent;
}
body.hl-dot .verse.hl-1 .verse__num::after { background: #f1c40f; }
body.hl-dot .verse.hl-2 .verse__num::after { background: #67c172; }
body.hl-dot .verse.hl-3 .verse__num::after { background: #5aa8ff; }
body.hl-dot .verse.hl-4 .verse__num::after { background: #ff7aa3; }
body.hl-dot .verse.hl-5 .verse__num::after { background: #ff9c3b; }
/* 부분 하이라이트 — 절 안 selection 범위만 색 입히기 (도트 모드와 무관, 항상 색 표시) */
.hl-part { border-radius: 3px; padding: 1px 2px; }
.hl-part.hl-1 { background: #fff3bf; }
.hl-part.hl-2 { background: #d3f0d1; }
.hl-part.hl-3 { background: #cfe5ff; }
.hl-part.hl-4 { background: #ffd9e6; }
.hl-part.hl-5 { background: #ffe0b8; }
body.dark .hl-part.hl-1 { background: #4a4416; }
body.dark .hl-part.hl-2 { background: #1f3a22; }
body.dark .hl-part.hl-3 { background: #1d3450; }
body.dark .hl-part.hl-4 { background: #4a2030; }
body.dark .hl-part.hl-5 { background: #4a3618; }
/* 부분 하이라이트 floating 팔레트 */
.part-hl-popover {
  position: fixed; z-index: 50;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 14px; padding: 6px 8px;
  display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
.part-hl-row { display: flex; gap: 6px; align-items: center; }
.part-hl-popover .hl-swatch { width: 24px; height: 24px; }
.part-hl-popover .hl-swatch.hl-clear {
  width: auto; height: 24px; border-radius: 12px; padding: 0 10px;
  font-size: 12px; color: var(--fg-soft); background: var(--bg);
}
.hl-memo-btn {
  width: auto; height: 24px; border-radius: 12px; padding: 0 10px;
  font-size: 13px; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg); color: var(--fg-soft);
}
.hl-memo-btn.is-on { background: var(--accent, #3b82f6); color: #fff; border-color: transparent; }
.part-hl-memo { display: flex; flex-direction: column; gap: 6px; width: 240px; max-width: 72vw; }
.part-hl-memo textarea {
  width: 100%; box-sizing: border-box; resize: vertical;
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px;
  font: inherit; font-size: 14px; background: var(--bg); color: var(--fg);
}
.part-hl-memo .textbtn { align-self: flex-end; }
/* 메모가 달린 부분 하이라이트 — 점선 밑줄로 표시 */
.hl-part--memo { border-bottom: 1.5px dotted currentColor; cursor: pointer; }
.verse__alt {
  display: block; font-family: var(--sans); font-size: 0.82em;
  color: var(--fg-soft); margin: 2px 0 0 1.9em; line-height: 1.55;
}
/* 절 번호 왼쪽 마크 영역 — 메모·말씀노트 표식 (절 텍스트 흐름에서 분리) */
.verse__marks {
  display: inline-flex; align-items: center; gap: 3px;
  vertical-align: 0.32em; margin-right: 4px;
}
.verse__memo {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); vertical-align: middle;
}
.verse__sermon {
  display: inline-block; width: 7px; height: 7px; border-radius: 2px;
  background: #3a9d5c; vertical-align: middle; cursor: pointer;
}
.verse__sermon:active { transform: scale(0.9); }
body.dark .verse__sermon { background: #7fd29a; }
.verse__word {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #9b6dd6; vertical-align: middle; cursor: pointer;
}
.verse__word:active { transform: scale(0.9); }
body.dark .verse__word { background: #c4a3f0; }
/* 연결된 구절 마커 — 속이 빈 청록 링(연결 느낌, 채운 도트들과 구분), 탭 시 연결 구절 팝오버 */
.verse__link {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  border: 2px solid #2f9e8f; background: transparent; box-sizing: border-box;
  vertical-align: middle; cursor: pointer;
}
.verse__link:active { transform: scale(0.9); }
body.dark .verse__link { border-color: #57c9b7; }
/* 원어 단어연구가 가리키는 본문 단어 — 보라 음영 (하이라이트 색과 구분, 탭 시 뜻 표시) (#10·#11) */
.verse__wref {
  background: rgba(155, 109, 214, 0.20);
  border-radius: 3px; padding: 0 1px; cursor: pointer;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.verse__wref:active { background: rgba(155, 109, 214, 0.34); }
body.dark .verse__wref { background: rgba(196, 163, 240, 0.26); }
/* 원어 뜻 팝오버의 히/헬 태그 */
.wmean-lang {
  font-size: 11px; font-weight: 600; color: #fff; background: #9b6dd6;
  border-radius: 6px; padding: 1px 6px; margin-left: 4px; vertical-align: middle;
}
/* 참조 라벨 팝오버 (#8) */
.ref-pop {
  position: fixed; z-index: 55; max-width: 260px;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px;
  padding: 4px; display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.ref-pop__item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%;
  background: none; border: none; text-align: left; cursor: pointer;
  padding: 7px 10px; border-radius: 8px; color: var(--fg);
}
.ref-pop__item:active { background: var(--accent-soft); }
.ref-pop__label { font-size: 14px; font-weight: 700; color: #9b6dd6; }
body.dark .ref-pop__label { color: #c4a3f0; }
/* 연결 구절 팝오버 항목은 연결 테마(청록)로 */
.ref-pop__item[data-goto] .ref-pop__label { color: #2f9e8f; }
body.dark .ref-pop__item[data-goto] .ref-pop__label { color: #57c9b7; }
.ref-pop__sub { font-size: 12px; color: var(--fg-soft); }

/* 말씀노트 복습 (#1) */
.review-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px calc(env(safe-area-inset-bottom) + 8px); }
.review-empty { text-align: center; color: var(--fg-soft); padding: 44px 20px; line-height: 1.7; }
.review-meta { font-size: 13px; color: var(--fg-soft); margin-bottom: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.review-badge { background: var(--accent-soft); color: var(--accent); border-radius: 10px; padding: 1px 8px; font-weight: 700; font-size: 12px; }
.review-passage { color: var(--accent); font-weight: 600; cursor: pointer; }
.review-title { font-size: 19px; font-weight: 700; line-height: 1.4; margin-bottom: 12px; }
.review-preacher { font-size: 15px; font-weight: 500; color: var(--fg-soft); }
.review-note { font-size: 16px; line-height: 1.75; }
.review-note p { margin: 0 0 10px; }
.review-none { color: var(--fg-soft); }
.review-sec { margin: 18px 0 6px; font-size: 13px; font-weight: 700; color: var(--accent); border-top: 1px solid var(--line); padding-top: 14px; }
.review-out { font-size: 15px; line-height: 1.7; }
.review-nav { display: flex; align-items: center; gap: 8px; padding: 10px 12px calc(env(safe-area-inset-bottom) + 10px); border-top: 1px solid var(--line); }
.review-nav .textbtn { flex: 1; justify-content: center; }
.review-nav #reviewMark { flex: 1.5; }
.review-nav .textbtn:disabled { opacity: 0.4; }
/* AI 복습 퀴즈 (#14) */
.quiz-msg { text-align: center; color: var(--fg-soft); padding: 40px 20px; line-height: 1.7; }
.quiz-msg--load { color: var(--accent); }
.quiz-head { font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 12px; }
.quiz-item { border-top: 1px solid var(--line); padding: 14px 0; }
.quiz-item:first-of-type { border-top: none; padding-top: 0; }
.quiz-q { font-size: 16px; line-height: 1.6; margin-bottom: 8px; }
.quiz-hint { font-size: 13px; color: var(--fg-soft); margin-bottom: 8px; }
.quiz-reveal {
  background: var(--accent-soft); color: var(--accent); border: none; cursor: pointer;
  border-radius: 8px; padding: 6px 14px; font-size: 14px; font-weight: 600;
}
.quiz-reveal:active { opacity: 0.75; }
.quiz-a {
  margin-top: 8px; padding: 10px 12px; background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 10px; font-size: 15px; line-height: 1.6;
}
.quiz-back { margin-top: 16px; }
/* 본문 끝 절 뒤 '이 본문 말씀노트' 인라인 카드 */
.vnote {
  display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left;
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 10px; padding: 9px 13px; margin: 10px 0 14px; cursor: pointer;
  color: var(--fg); font-family: var(--sans);
}
.vnote:active { filter: brightness(0.97); }
.vnote__meta { font-size: 12px; font-weight: 700; color: var(--accent); }
.vnote__title { font-size: 14px; }
.verse.selected { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
body.selecting .verse { cursor: pointer; }

/* 장 이동 */
.chapter-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
  display: flex; gap: 8px; justify-content: center;
  padding: 10px 14px calc(env(safe-area-inset-bottom) + 10px);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
.chapter-nav__btn {
  flex: 1; max-width: 200px;
  background: var(--bg-card); color: var(--fg);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 12px; font-size: 15px; font-weight: 600; cursor: pointer;
}
.chapter-nav__btn:active { background: var(--accent-soft); }
.chapter-nav__btn { font-size: 20px; line-height: 1; }
.chapter-nav__arrow { font-size: 24px; }
.chapter-nav__check { flex: 0 0 52px; font-size: 19px; color: var(--fg-soft); }
.chapter-nav__check.is-on { color: #3a9d5c; background: #e8f5ec; border-color: #b7e0c4; }
body.dark .chapter-nav__check.is-on { color: #7fd29a; background: #18301f; border-color: #2d5237; }

/* 오버레이 공통 */
.overlay {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(0, 0, 0, 0.42);
  display: flex; align-items: flex-end; justify-content: center;
}
.overlay__panel {
  width: 100%; max-width: 720px; max-height: 86vh;
  background: var(--bg); border-radius: 18px 18px 0 0;
  display: flex; flex-direction: column; overflow: hidden;
  animation: slideUp 0.22s ease;
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.overlay__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.overlay__bar strong { font-size: 16px; }
/* 챗 헤더 — [목록] [제목(가변)] [새 대화] [닫기] */
#chatTitle { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.chat__new { color: var(--accent); }

/* ── 책/장 선택: 계층형 (넓은 화면 3칸 [구약·신약|책|장], 좁은 폰 2칸 + 상단 토글) ── */
.nav-cols {
  flex: 1 1 auto; min-height: 0;
  display: grid; gap: 1px; background: var(--line); /* gap = 칸 사이 구분선 */
  grid-template-columns: minmax(74px, auto) 1.05fr 1.4fr;
  grid-template-areas: "test books chapters";
}
.nav-col { background: var(--bg); overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch; }
.nav-col--test { grid-area: test; display: flex; flex-direction: column; gap: 6px; padding: 12px 10px; }
.nav-col--books { grid-area: books; padding: 4px 12px 24px; }
.nav-col--chapters { grid-area: chapters; padding: 12px; align-content: start; }
.nav-test-btn {
  padding: 11px 8px; border: 1px solid var(--line); background: var(--bg-card);
  border-radius: 10px; font-size: 15px; font-weight: 700; color: var(--fg-soft);
  cursor: pointer; text-align: center; white-space: nowrap;
}
.nav-test-btn.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }
/* 책 칸: 카테고리별 톤 블록(라벨 + 약어 셀 그리드) — 장 그리드와 디자인 통일 */
.nav-cat { border-radius: 12px; padding: 6px 8px 9px; margin-bottom: 8px; }
.nav-cat .cat-label { padding: 3px 2px 7px; }
.nav-book-grid {
  display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
}
.nav-book-cell {
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 2px; font-size: 14px; font-weight: 600; color: var(--fg);
  cursor: pointer; text-align: center; white-space: nowrap;
}
.nav-book-cell:active { background: var(--accent-soft); }
.nav-book-cell.is-current { border-color: var(--accent); }
.nav-book-cell.is-selected { background: var(--accent); color: #fff; border-color: var(--accent); }
/* 카테고리 톤 (구약 4·신약 5분류를 4색 순환). 살짝 다른 파스텔. 다크 모드 별도. */
.nav-cat--0 { background: #f6efe0; }
.nav-cat--1 { background: #e8f3ea; }
.nav-cat--2 { background: #e7eef9; }
.nav-cat--3 { background: #f2eaf7; }
body.dark .nav-cat--0 { background: #2f2a1e; }
body.dark .nav-cat--1 { background: #1e2a22; }
body.dark .nav-cat--2 { background: #1d2531; }
body.dark .nav-cat--3 { background: #292031; }
.grid--chapters {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
}
@media (max-width: 559px) {
  .nav-cols {
    grid-template-columns: 1fr 1.25fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "test test"
      "books chapters";
  }
  .nav-col--test { flex-direction: row; overflow: visible; padding: 10px 12px; }
  .nav-test-btn { flex: 1; }
}
.cat-label {
  font-size: 12.5px; font-weight: 700; color: var(--fg-soft);
  padding: 15px 2px 8px; letter-spacing: 0.02em;
}
.cat-label:first-child { padding-top: 6px; }
.cell {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 4px; font-size: 14px; font-weight: 600; cursor: pointer; text-align: center;
  color: var(--fg);
}
.cell:active { background: var(--accent-soft); }
.cell.is-current { background: var(--accent); color: #fff; border-color: var(--accent); }
.cell.is-read { position: relative; }
.cell.is-read::after {
  content: "✓"; position: absolute; top: 2px; right: 5px;
  font-size: 9px; font-weight: 700; color: #3a9d5c;
}
.cell.is-read.is-current::after { color: #d7ffe4; }
.cell--books.is-read::after { content: ""; }
.linkbtn {
  background: none; border: none; color: var(--accent); font-size: 14px; font-weight: 600;
  cursor: pointer; padding: 12px 16px 4px; text-align: left;
}

/* 검색 */
.search-input {
  flex: 1; min-width: 0; box-sizing: border-box;
  -webkit-appearance: none; appearance: none;
  border: 1px solid var(--line); background: var(--bg-card); color: var(--fg);
  border-radius: 10px; padding: 11px 13px; font-size: 16px; line-height: 1.2;
  font-family: var(--sans);
}
/* iOS Safari 네이티브 검색 데코(돋보기·취소 X) 제거 — 텍스트와 겹치던 원인 */
.search-input::-webkit-search-decoration,
.search-input::-webkit-search-cancel-button,
.search-input::-webkit-search-results-button,
.search-input::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; }
.search-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.search-meta { padding: 8px 16px; font-size: 13px; color: var(--fg-soft); }
.search-results { overflow-y: auto; padding: 0 8px 20px; }
/* 검색 — 상단 풀폭 검색창, 아래 왼쪽 히스토리 / 오른쪽 실시간 결과 */
.search-panel { height: 86vh; display: flex; flex-direction: column; }
.search-topbar { border-bottom: 1px solid var(--line); }
.search-topbar .search-input { flex: 1; }
.search-split { display: grid; grid-template-columns: minmax(220px, 34%) 1fr; flex: 1; min-height: 0; }
.search-left { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.search-history { overflow-y: auto; min-height: 0; flex: 1; padding: 4px 8px 16px; }
.search-right { display: flex; flex-direction: column; min-height: 0; }
.search-right .search-results { flex: 1; min-height: 0; }
@media (max-width: 639px) {
  .search-split { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .search-left { border-right: none; border-bottom: 1px solid var(--line); }
  .search-history { max-height: 24vh; }
}
/* 같은 책 묶음 — '책 이름 │ 장 목록' (책 이름 한 번, 세로줄, 장들 세로 나열) */
.qa-group { display: flex; align-items: flex-start; gap: 10px; padding: 6px 8px; }
.qa-group__book {
  flex: 0 0 auto; min-width: 62px; max-width: 40%;
  font-size: 15px; font-weight: 700; padding-top: 9px; color: var(--fg);
  word-break: keep-all;
}
.qa-group__chaps {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  border-left: 2px solid var(--accent); border-radius: 1px; padding-left: 10px;
}
.qa-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  color: var(--fg); padding: 7px 4px; border-bottom: 1px solid var(--line);
}
.qa-chip:last-child { border-bottom: none; }
.qa-chip:active { background: var(--accent-soft); border-radius: 8px; }
.qa-chip__c { font-size: 15px; font-weight: 500; }
.result {
  display: block; width: 100%; text-align: left; background: none; border: none;
  border-bottom: 1px solid var(--line); padding: 13px 8px; cursor: pointer; color: var(--fg);
}
.result__ref { font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 3px; }
.result__txt { font-size: 15px; line-height: 1.55; }
.result__preacher { font-size: 13px; color: var(--fg-soft); }
.result__txt mark { background: #ffe08a; color: inherit; padding: 0 1px; border-radius: 2px; }
body.dark .result__txt mark { background: #6b5a1e; color: #fff; }
/* 히스토리(최근·고정 본문) 행 — 책 이름 + 장 한 줄 */
.result--qa { padding: 11px 8px; white-space: nowrap; }
.result--qa .qa-name { font-size: 15px; font-weight: 600; }
.result--qa .qa-chap { color: var(--fg-soft); font-weight: 400; }
/* 연속된 같은 책 묶음 — 왼쪽 세로 연결선(줄기) */
.qa-thread { position: relative; padding-left: 15px; }
.qa-thread::before {
  content: ""; position: absolute; left: 5px; top: 19px; bottom: 19px;
  width: 2px; border-radius: 1px; background: var(--accent); opacity: 0.4;
}
.ref-link {
  display: inline; color: var(--accent); font-weight: 600;
  border-bottom: 1px dashed currentColor; cursor: pointer; user-select: none;
}
.ref-link:active { opacity: 0.7; }
.result svg { display: block; }
.result__del,
.result__fav,
.result__pin {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  cursor: pointer; color: var(--fg-soft);
}
.result__del { float: right; }
.result__del:active { background: color-mix(in srgb, #c0562b 12%, transparent); color: #c0562b; }
.result__fav { float: right; margin-left: 2px; }
.result__fav.is-on { color: var(--accent); }
.result__fav:active { background: var(--accent-soft); }
.result__pin { float: left; margin-right: 4px; opacity: 0.55; }
.result__pin.is-on { color: var(--accent); opacity: 1; }
.result__pin:active { background: var(--accent-soft); opacity: 1; }
.qa-head {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 14px 8px 6px; font-size: 12px; font-weight: 700;
  color: var(--fg-soft); letter-spacing: 0.02em;
}
.qa-head:first-child { padding-top: 6px; }
.qa-head svg { color: var(--accent); }

/* 설정 */
.settings { padding: 8px 16px 26px; overflow-y: auto; }
.settings__head {
  padding: 18px 2px 6px; font-size: 12px; font-weight: 700;
  color: var(--fg-soft); letter-spacing: 0.04em; text-transform: uppercase;
}
.settings__head:first-child { padding-top: 4px; }
.settings__sub { display: block; font-size: 11.5px; font-weight: 400; color: var(--fg-soft); margin-top: 2px; }
.settings__row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px;
}
.settings__row select, .settings__row input[type="range"] { font-size: 15px; }
.settings__row select {
  background: var(--bg-card); color: var(--fg); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 9px;
}
.settings__row input[type="range"] { flex: 1; max-width: 180px; accent-color: var(--accent); }
.settings__hint { font-size: 12px; font-weight: 400; color: var(--fg-soft); }
.settings__row--switch input { width: 22px; height: 22px; accent-color: var(--accent); }
.settings .linkbtn { padding: 16px 0 0; }

/* 토스트 */
.toast {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 96px);
  transform: translateX(-50%); z-index: 60;
  background: var(--fg); color: var(--bg); padding: 10px 18px; border-radius: 22px;
  font-size: 14px; font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,.25);
  animation: fadeIn 0.18s ease;
}
@keyframes fadeIn { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* 절 액션 시트 — 화면을 가리지 않는 하단 시트(본문 계속 탭 가능) */
.vsheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  max-width: 720px; margin: 0 auto;
  background: var(--bg); border-radius: 18px 18px 0 0;
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
  max-height: 68vh; overflow-y: auto;
  animation: slideUp 0.2s ease;
  padding-bottom: env(safe-area-inset-bottom);
}
.vsheet__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--bg);
}
.vsheet__bar strong { font-size: 15px; }

/* 설정 메뉴 행 */
.menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; background: none; border: none; border-bottom: 1px solid var(--line);
  padding: 15px 2px; font-size: 15px; color: var(--fg); cursor: pointer; text-align: left;
}
.menu-item::after { content: "›"; color: var(--fg-soft); font-size: 18px; line-height: 1; }
.menu-item:active { background: var(--accent-soft); }
.menu-item--danger { color: #c0562b; }
/* 예은 성경읽기 연동 */
.yn-connect { padding: 4px 2px 2px; }
.yn-select {
  width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 11px;
  font-size: 15px; font-family: var(--sans); background: var(--bg-card); color: var(--fg);
}
.yn-select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.yn-status { font-size: 13px; color: var(--fg-soft); padding: 8px 2px 2px; }
.yn-note { font-size: 12px; color: var(--fg-soft); padding: 6px 2px 2px; line-height: 1.5; }
.yn-connect .menu-item { margin-top: 8px; }

/* 절 액션 시트 */
.sheet__text {
  font-family: var(--serif); font-size: 17px; line-height: 1.72;
  padding: 14px 18px; color: var(--fg); border-bottom: 1px solid var(--line);
  max-height: 32vh; overflow-y: auto;
}
.sheet__actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14px 16px 4px; }
.sheet__actions--2 { grid-template-columns: repeat(2, 1fr); }
.sheet__actions--tight { padding-top: 8px; }
/* 절 액션 — 한 줄 5개 아이콘 버튼(복사·메모·하이라이트·말씀노트·연결) */
.sheet__actions--icons { grid-template-columns: repeat(5, 1fr); padding: 14px 16px 6px; }
.sheet__ibtn {
  display: flex; align-items: center; justify-content: center;
  padding: 13px 0; border: 1px solid var(--line); background: var(--bg-card);
  color: var(--fg); border-radius: 12px; cursor: pointer;
}
.sheet__ibtn:active { background: var(--accent-soft); }
.sheet__ibtn.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.sheet__ibtn svg { display: block; }
.sheet__hint { margin: 0; padding: 4px 18px 14px; font-size: 12.5px; color: var(--fg-soft); }
.sheet__btn {
  padding: 13px; border: 1px solid var(--line); background: var(--bg-card); color: var(--fg);
  border-radius: 12px; font-size: 15px; font-weight: 600; cursor: pointer;
}
.sheet__btn:active { background: var(--accent-soft); }
.sheet__btn.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.sheet__btn--accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.sheet__memo { padding: 0 16px 18px; }
.sheet__memoinput {
  width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 11px;
  font-size: 15px; font-family: var(--sans); background: var(--bg-card); color: var(--fg); resize: vertical;
}
.sheet__memoinput:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.sheet__memobtns { display: flex; gap: 8px; margin-top: 10px; }
.sheet__memobtns .sheet__btn { flex: 1; }
/* 연결 성경 — 절 시트 연결 박스 */
.link-add { display: flex; gap: 8px; }
.link-add input {
  flex: 1; border: 1px solid var(--line); border-radius: 10px; padding: 11px;
  font-size: 15px; font-family: var(--sans); background: var(--bg-card); color: var(--fg);
}
.link-add input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.link-add .sheet__btn { flex: 0 0 auto; padding-left: 18px; padding-right: 18px; }
.link-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.link-empty { font-size: 13px; color: var(--fg-soft); padding: 4px 2px; }
.link-item { display: flex; align-items: center; gap: 8px; }
.link-go {
  flex: 1; text-align: left; background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 10px; padding: 11px; font-size: 15px; font-weight: 600; color: #2f9e8f; cursor: pointer;
}
body.dark .link-go { color: #57c9b7; }
.link-go:active { background: var(--accent-soft); }
.link-del {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--bg-card); color: var(--fg-soft); cursor: pointer;
}
.link-del:active { color: #c0562b; background: color-mix(in srgb, #c0562b 12%, transparent); }

/* 여러 절 선택 바 */
.select-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px calc(env(safe-area-inset-bottom) + 12px);
  background: var(--fg); color: var(--bg);
}
.select-bar__count { flex: 1; font-weight: 700; font-size: 15px; }
.select-bar__btn {
  padding: 9px 16px; border-radius: 20px; border: 1px solid rgba(127, 127, 127, 0.5);
  background: transparent; color: var(--bg); font-size: 14px; font-weight: 600; cursor: pointer;
}
.select-bar__btn--accent { background: var(--accent); border-color: var(--accent); color: #fff; }

/* 읽기 진행률 */
.progress-body { overflow-y: auto; padding: 14px 16px 24px; }
.prog-overall { padding: 4px 2px 16px; }
.prog-overall__num { font-size: 17px; font-weight: 700; margin-bottom: 9px; }
.bar { position: relative; height: 8px; background: var(--line); border-radius: 6px; overflow: hidden; }
.bar__fill { position: relative; z-index: 1; display: block; height: 100%; background: var(--accent); border-radius: 6px; transition: width 0.3s; }
.bar__expect { position: absolute; top: 0; left: 0; height: 100%; background: color-mix(in srgb, var(--accent) 22%, transparent); }
.prog-overall__plan { font-size: 12px; color: var(--fg-soft); margin-top: 6px; }
.prog-overall__plan .ahead { color: #3a9d5c; font-weight: 700; }
.prog-overall__plan .behind { color: #c0562b; font-weight: 700; }
/* 이번 달 읽기 범위 (월별 배정) */
.prog-month {
  padding: 12px; margin-bottom: 18px; border-radius: 12px;
  background: var(--accent-soft); border: 1px solid var(--line);
}
.prog-month__head { font-size: 14px; font-weight: 700; margin-bottom: 9px; }
.prog-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.prog-chip {
  font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: 13px;
  border: 1px solid var(--line); background: var(--bg-card); color: var(--fg); cursor: pointer;
}
.prog-chip b { font-weight: 700; color: var(--fg-soft); margin-left: 2px; }
.prog-chip.is-done { background: var(--accent); border-color: var(--accent); color: #fff; }
.prog-chip.is-done b { color: rgba(255, 255, 255, 0.85); }
.prog-chip:active { opacity: 0.8; }
/* 하이라이트 목록 색 도트 */
.hl-dotmark { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.hl-dotmark.hl-1 { background: #f1c40f; }
.hl-dotmark.hl-2 { background: #67c172; }
.hl-dotmark.hl-3 { background: #5aa8ff; }
.hl-dotmark.hl-4 { background: #ff7aa3; }
.hl-dotmark.hl-5 { background: #ff9c3b; }
.prog-book__right { display: inline-flex; align-items: center; gap: 8px; }
.prog-book__all {
  font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg-card); color: var(--fg-soft); cursor: pointer;
}
.prog-book__all.is-on { background: var(--accent); color: #fff; border-color: var(--accent); }
.prog-book { margin-bottom: 16px; }
.prog-book__name { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; font-weight: 600; margin: 0 0 7px; }
.prog-book__count { font-size: 12px; color: var(--fg-soft); font-weight: 600; }
.prog-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.prog-cell {
  aspect-ratio: 1; border: 1px solid var(--line); background: var(--bg-card);
  border-radius: 6px; font-size: 10.5px; color: var(--fg-soft); cursor: pointer; padding: 0;
}
.prog-cell.is-read { background: var(--accent); color: #fff; border-color: var(--accent); }
.prog-cell:active { opacity: 0.8; }
.prog-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; border-bottom: 1px solid var(--line);
  padding: 11px 2px; cursor: pointer; color: var(--fg); text-align: left;
}
.prog-row:active { background: var(--accent-soft); }
.prog-row__name { flex: 0 0 7.6em; font-size: 14px; }
.prog-row__count { flex: 0 0 3.8em; font-size: 12px; color: var(--fg-soft); text-align: right; }
.bar--mini { flex: 1; height: 6px; }
.prog-row.is-done .prog-row__count { color: #3a9d5c; font-weight: 700; }
.prog-row.is-done .bar__fill { background: #3a9d5c; }

/* 말씀노트 */
.sheet__actions--4 { grid-template-columns: repeat(2, 1fr); }
.bar__spacer { flex: 1; }
.textbtn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; color: var(--fg-soft);
  font-size: 14px; font-weight: 600; cursor: pointer; padding: 6px 8px;
}
.textbtn svg { display: block; }
.textbtn--accent { color: var(--accent); }
.req { color: var(--accent); }

/* 말씀노트 스플릿 패널 — 본문(읽기) 영역과 시각적으로 분리되도록 톤·폰트·배경 따로
   . 배경: var(--bg-card)  → 본문 var(--bg) 와 한 톤 차이
   . 폰트: var(--sans)    → 본문 serif 와 명확히 구분 (노트는 입력·읽기 모두 sans)
   . 내부 입력칸은 var(--bg) 로 다시 한 톤 → 카드 안 카드 구조
   . portrait(세로): 화면 전체 폭 + 하단 52vh
   . landscape(가로): 오른쪽 50% 우측 패널 (아래 media query 에서 override) */
.sermon-split {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 24;
  height: 52vh;
  background: var(--bg-card); color: var(--fg); font-family: var(--sans);
  border-top: 2px solid var(--accent);
  border-radius: 16px 16px 0 0; box-shadow: 0 -10px 32px rgba(0, 0, 0, 0.28);
  display: flex; flex-direction: column; animation: slideUp 0.2s ease;
}
.sermon-split textarea,
.sermon-split input[type="text"],
.sermon-split input[type="date"] {
  background: var(--bg);
}
.ss__bar {
  display: flex; align-items: center; gap: 6px; padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-card));
}
.ss__bar strong { font-size: 15px; }
.ss__draft { font-size: 11.5px; color: var(--fg-soft); margin-left: 8px; }
.ss__body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 16px calc(env(safe-area-inset-bottom) + 16px); display: flex; flex-direction: column; }
.ss__main { min-height: 24vh; flex: 1 1 auto; }
.ss__more { margin-top: 12px; }
.ss__more > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent); padding: 8px 0; list-style: none; }
.ss__more > summary::-webkit-details-marker { display: none; }
.ss__more > summary::before { content: "▸ "; }
.ss__more[open] > summary::before { content: "▾ "; }

.ss__meta { margin-bottom: 4px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.ss__meta > summary {
  cursor: pointer; list-style: none; padding: 8px 4px;
  font-size: 13px; color: var(--fg-soft); font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.ss__meta > summary::-webkit-details-marker { display: none; }
.ss__meta > summary::before { content: "▸"; font-size: 11px; color: var(--fg-soft); flex: 0 0 auto; }
.ss__meta[open] > summary::before { content: "▾"; }
.ss__meta[open] > summary { color: var(--accent); border-bottom: 1px dashed var(--line); margin-bottom: 8px; padding-bottom: 6px; }
.ss__meta-sum { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* portrait 세로 스플릿: 본문은 위 절반, 노트는 아래 52vh. chapter-nav 는 가린다는 피드백으로 다시 숨김 */
body.split-open #reader { padding-bottom: 54vh; }
body.split-open .chapter-nav { display: none; }
/* 절 시트는 항상 화면 밑에서 슬라이드. 본문 padding 은 시트 실제 높이(JS ResizeObserver 가 --vsheet-h 갱신) + 여유만큼.
   고정 vh 값이 아니라 동적이라 시트 안 메모/하이라이트 펼쳐서 커져도 자동으로 따라감. */
body.vsheet-open #reader { padding-bottom: calc(var(--vsheet-h, 320px) + 24px); }
body.vsheet-open.split-open #reader { padding-bottom: calc(var(--vsheet-h, 320px) + 24px); }

/* 가로(landscape) = 2열: 왼쪽 성경, 오른쪽 말씀노트 */
@media (orientation: landscape) {
  .sermon-split {
    top: 0; right: 0; bottom: 0; left: auto;
    width: 50%; max-width: none; height: 100%; max-height: 100%; margin: 0;
    border-radius: 0; border-top: none; border-left: 1px solid var(--line);
    animation: none;
  }
  body.split-open #reader {
    max-width: none; margin: 0;
    padding-right: 50%;
    padding-bottom: calc(env(safe-area-inset-bottom) + 90px);
  }
  body.split-open .topbar { padding-right: calc(50% + 14px); }
  body.split-open .chapter-nav { display: flex; right: 50%; }
  body.split-open .vsheet { left: 0; right: 50%; max-width: none; margin: 0; }
}
.overlay__panel.sermon { height: 88vh; }
.sermon__body { flex: 1; overflow-y: auto; padding: 12px 16px 24px; }
.sermon__row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.sermon__row label { flex: 0 0 48px; font-size: 13px; color: var(--fg-soft); font-weight: 600; }
.sermon__row input,
.sermon__ta {
  width: 100%; border: 1px solid var(--line); background: var(--bg-card); color: var(--fg);
  border-radius: 10px; padding: 10px 11px; font-size: 15px; font-family: var(--sans);
}
.sermon__row input { flex: 1; border-radius: 8px; padding: 9px 11px; }
.sermon__ta { line-height: 1.6; resize: vertical; }
/* 설교자 커스텀 드롭다운 — 입력칸 바로 아래 붙는 자체 제안 목록 */
.preacher-field { flex: 1; position: relative; }
.preacher-field input { width: 100%; }
.preacher-drop {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  max-height: 210px; overflow-y: auto; padding: 4px;
  -webkit-overflow-scrolling: touch;
}
.preacher-drop.hidden { display: none; }
.preacher-opt {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: 10px; border-radius: 7px; font-size: 15px; color: var(--fg);
  cursor: pointer; font-family: var(--sans);
}
.preacher-opt:active { background: var(--accent-soft); }
.preacher-opt--new { padding: 10px; font-size: 13px; color: var(--fg-soft); }
.preacher-opt--new b { color: var(--accent); font-weight: 600; }
/* AI 결과 라벨 줄 — 라벨 + 편집 토글 */
.sermon__lbl--out { display: flex; align-items: center; justify-content: space-between; }
/* AI 결과 미리보기 — 마크다운을 서식으로 렌더 (저장은 원문 그대로) */
.ss__out-view {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--line); background: var(--bg-card); color: var(--fg);
  border-radius: 10px; padding: 12px 13px;
  font-size: 15px; font-family: var(--sans); line-height: 1.65;
  word-break: break-word;
}
.ss__out-view.is-empty::before {
  content: attr(data-placeholder); color: var(--fg-soft);
}
.ss__out-view h3.note-h {
  font-size: 15.5px; font-weight: 700; color: var(--accent);
  margin: 14px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--line);
}
.ss__out-view h3.note-h:first-child { margin-top: 0; }
.ss__out-view p { margin: 6px 0; }
.ss__out-view ul, .ss__out-view ol { margin: 6px 0; padding-left: 1.4em; }
.ss__out-view li { margin: 3px 0; }
.ss__out-view strong { font-weight: 700; }
.ss__out-view em { font-style: italic; }
/* 노트(seNotes) 만 contenteditable div — 서식·표 시각적 렌더. textarea 가 아님 */
div.sermon__ta[contenteditable] {
  resize: none; min-height: 24vh; overflow-y: auto;
  white-space: pre-wrap; word-break: break-word;
}
div.sermon__ta[contenteditable]:empty::before {
  content: attr(data-placeholder);
  color: var(--fg-soft);
  pointer-events: none;
}
div.sermon__ta[contenteditable]:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
/* 표 삽입/삭제 시 contenteditable 이 만든 <p> 의 브라우저 기본 margin(1em) 제거 —
   표를 뺀 뒤 남은 <p> 때문에 줄간이 갑자기 벌어지던 현상 방지. 빈 줄은 line-height 만큼만 유지. */
div.sermon__ta[contenteditable] p { margin: 0; }
div.sermon__ta b, div.sermon__ta strong { font-weight: 700; }
div.sermon__ta i, div.sermon__ta em { font-style: italic; }
div.sermon__ta u { text-decoration: underline; }
div.sermon__ta table {
  border-collapse: collapse; width: 100%; margin: 10px 0;
  background: var(--bg); table-layout: fixed;
}
div.sermon__ta th, div.sermon__ta td {
  border: 1px solid var(--line); padding: 7px 10px;
  text-align: left; vertical-align: top;
  word-break: break-word; overflow-wrap: break-word;
}
div.sermon__ta th { background: var(--accent-soft); font-weight: 700; color: var(--accent); }
.sermon__row input:focus,
.sermon__ta:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.sermon__lbl { display: block; font-size: 13px; font-weight: 600; color: var(--fg-soft); margin: 14px 0 6px; }
.sermon__gen {
  width: 100%; margin: 14px 0 4px; padding: 13px; border: none; border-radius: 12px;
  background: var(--accent); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
}
.sermon__gen:disabled { opacity: 0.6; }

/* 노트 라벨 옆 작은 버튼 (표 삽입 등) */
.sermon__lbl-btn {
  margin-left: 8px; background: none; border: 1px solid var(--accent);
  color: var(--accent); border-radius: 14px; padding: 3px 10px;
  font-size: 12px; font-weight: 600; cursor: pointer;
}
.sermon__lbl-btn:active { background: var(--accent-soft); }

.sermon__actions { display: flex; gap: 8px; margin-top: 14px; }
.sermon__actions .sheet__btn { flex: 1; }

/* 하이라이트 색 팔레트 */
.hl-palette { display: flex; align-items: center; gap: 10px; padding: 4px 16px 16px; flex-wrap: wrap; }
.hl-swatch { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); cursor: pointer; padding: 0; }
.hl-swatch:active { transform: scale(0.92); }
.hl-swatch.hl-1 { background: #fff3bf; }
.hl-swatch.hl-2 { background: #d3f0d1; }
.hl-swatch.hl-3 { background: #cfe5ff; }
.hl-swatch.hl-4 { background: #ffd9e6; }
.hl-swatch.hl-5 { background: #ffe0b8; }
.hl-swatch.hl-clear { width: auto; height: 30px; border-radius: 15px; padding: 0 12px; font-size: 13px; color: var(--fg-soft); background: var(--bg-card); }
/* 전체 절 / 일부 단어 선택 */
.hl-choice { display: flex; gap: 10px; padding: 4px 16px 16px; }
.hl-choice .sheet__btn { flex: 1; }

/* 단어 탭 모드 — 어절 span + 하단 안내 바 */
.wtap { cursor: pointer; border-radius: 4px; padding: 1px 0; transition: background 0.1s; }
.wtap:active { background: var(--accent-soft); }
.wtap--sel { background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; }
.wordtap-bar {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 20px);
  transform: translateX(-50%); z-index: 61; display: flex; align-items: center; gap: 12px;
  max-width: calc(100% - 24px);
  background: var(--fg); color: var(--bg); padding: 10px 12px 10px 18px; border-radius: 24px;
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
}
.wordtap-bar__hint { font-size: 13.5px; font-weight: 600; }
.wordtap-bar__cancel {
  background: color-mix(in srgb, var(--bg) 22%, transparent); color: var(--bg);
  border: none; border-radius: 16px; padding: 6px 14px; font-size: 13px; font-weight: 600;
  cursor: pointer; flex-shrink: 0;
}
.wordtap-bar__cancel:active { opacity: 0.75; }

/* 말씀노트 캘린더 뷰 */
.calhead { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 6px; }
.calhead strong { font-size: 15px; }
.calnav { background: var(--bg-card); border: 1px solid var(--line); border-radius: 8px; padding: 4px 14px; font-size: 16px; color: var(--fg); cursor: pointer; }
.calnav:active { background: var(--accent-soft); }
.calgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 0 12px 20px; }
.calgrid--dow { padding-bottom: 4px; }
.calcell {
  aspect-ratio: 1/1.15; background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 8px; padding: 4px 5px; font-size: 11px; color: var(--fg); cursor: pointer;
  display: flex; flex-direction: column; align-items: stretch; text-align: left; overflow: hidden;
}
.calcell:disabled { opacity: 0.55; cursor: default; }
.calcell--blank { background: transparent; border: none; cursor: default; opacity: 1; }
.calcell--dow { aspect-ratio: auto; background: none; border: none; padding: 4px 0; text-align: center; font-size: 12px; color: var(--fg-soft); font-weight: 600; cursor: default; }
.calcell--sun { color: #c0562b; }
.calcell--has { border-color: var(--accent); background: var(--accent-soft); }
.calcell__d { font-size: 11.5px; font-weight: 700; color: var(--fg-soft); line-height: 1; }
.calcell--has .calcell__d { color: var(--accent); }
.calcell__body {
  margin-top: 3px; display: flex; flex-direction: column; gap: 1px; min-width: 0;
  overflow: hidden;
}
.calcell__title {
  font-size: 10.5px; font-weight: 700; color: var(--fg); line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.calcell__passage {
  font-size: 9.5px; color: var(--accent); line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.calcell__preacher {
  font-size: 9.5px; color: var(--fg-soft); line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.calcell__more { font-size: 9.5px; color: var(--fg-soft); font-style: italic; }

/* 말씀노트 미니바 / 요일 / 본문 지우기 */
.sermon-mini {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 14px); transform: translateX(-50%);
  z-index: 26; background: var(--accent); color: #fff; border: none; border-radius: 24px;
  padding: 12px 20px; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
.sermon__dow { font-size: 13px; color: var(--fg-soft); font-weight: 600; }
/* 날짜 입력 — button 가 visible yyyy-mm-dd, input[type=date] 는 button 위에 absolute opacity 0 (클릭/picker 통과) */
.sermon__row--date { position: relative; }
.se-date-label {
  flex: 1; text-align: left; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg-card); color: var(--fg);
  font-size: 15px; font-family: var(--sans); cursor: pointer;
}
.se-date-label:active { background: var(--accent-soft); }
.se-date-hidden {
  position: absolute; left: 58px; right: 0; top: 0; bottom: 0;
  opacity: 0; width: auto; pointer-events: none;
}
.sermon__xbtn { flex: 0 0 auto; background: none; border: none; color: var(--fg-soft); font-size: 14px; cursor: pointer; padding: 4px 6px; }
.sermon__xbtn--accent { color: var(--accent); font-weight: 700; font-size: 16px; }
/* 본문 pill — 잘못 담은 본문을 개별 ✕ 로 삭제, pill 탭은 해당 본문으로 이동 */
.sermon__row--passage { align-items: flex-start; }
.sermon__row--passage label { padding-top: 9px; }
.passage-chips { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 38px; padding: 3px 0; }
.passage-chips__ph { color: var(--fg-soft); opacity: 0.7; font-size: 14px; padding: 5px 2px; }
.passage-chip {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--accent-soft); color: var(--accent);
  border-radius: 999px; padding: 5px 5px 5px 11px;
  font-size: 13px; font-weight: 600; cursor: pointer; max-width: 100%;
}
.passage-chip:active { opacity: 0.75; }
.passage-chip__t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.passage-chip__del {
  flex: 0 0 auto; border: none; background: none; cursor: pointer;
  color: var(--accent); opacity: 0.55; font-size: 12px; line-height: 1;
  padding: 3px 5px; border-radius: 999px;
}
.passage-chip__del:active { opacity: 1; background: rgba(0, 0, 0, 0.08); }

/* 성경 도우미 챗봇 */
.chat { height: 86vh; }
.chat__log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.chat__msg {
  max-width: 82%; padding: 10px 13px; border-radius: 14px; font-size: 15px;
  line-height: 1.55; white-space: pre-wrap; word-break: break-word;
}
.chat__msg--user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.chat__msg--assistant {
  align-self: flex-start; background: var(--bg-card); border: 1px solid var(--line);
  color: var(--fg); border-bottom-left-radius: 4px;
}
.chat__msg--typing { color: var(--fg-soft); }
/* 챗봇 답변 마크다운 렌더 여백 — <p> 기본 margin 으로 버블이 벌어지지 않게 정리 */
.chat__msg--assistant p { margin: 0; }
.chat__msg--assistant p + p { margin-top: 7px; }
.chat__msg--assistant ul, .chat__msg--assistant ol { margin: 6px 0; padding-left: 1.3em; }
.chat__msg--assistant li { margin: 2px 0; }
.chat__msg--assistant h3.note-h { font-size: 15px; font-weight: 700; color: var(--accent); margin: 8px 0 4px; }
.chat__msg--assistant strong { font-weight: 700; }
.chat__msg--assistant em { font-style: italic; }
.chat__inputbar {
  display: flex; gap: 8px; padding: 10px 12px calc(env(safe-area-inset-bottom) + 12px);
  border-top: 1px solid var(--line); background: var(--bg);
}
.chat__input {
  flex: 1; border: 1px solid var(--line); background: var(--bg-card); color: var(--fg);
  border-radius: 22px; padding: 11px 16px; font-size: 16px; font-family: var(--sans);
  resize: none; line-height: 1.4; max-height: 120px; overflow-y: auto;
}
.chat__input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.chat__inputbar { align-items: flex-end; }
/* 챗 세션 목록 패널 (헤더 아래 드롭다운) */
.chat__sessions {
  max-height: 45vh; overflow-y: auto; border-bottom: 1px solid var(--line);
  background: var(--bg-card);
}
.chat-sess {
  display: flex; align-items: center; gap: 8px; padding: 11px 16px;
  border-bottom: 1px solid var(--line); cursor: pointer;
}
.chat-sess:last-child { border-bottom: none; }
.chat-sess:active { background: var(--accent-soft); }
.chat-sess.is-cur { background: var(--accent-soft); }
.chat-sess__t {
  flex: 1; font-size: 14px; color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-sess.is-cur .chat-sess__t { font-weight: 700; color: var(--accent); }
.chat-sess__del {
  flex: 0 0 auto; border: none; background: none; cursor: pointer;
  color: var(--fg-soft); font-size: 14px; padding: 4px 6px; border-radius: 6px;
}
.chat-sess__del:active { background: rgba(0, 0, 0, 0.08); color: var(--fg); }
.chat__send {
  flex: 0 0 44px; height: 44px; border-radius: 50%; border: none;
  background: var(--accent); color: #fff; font-size: 20px; font-weight: 700; cursor: pointer;
}
.chat__send:active { opacity: 0.85; }

@media (min-width: 640px) {
  .overlay { align-items: center; }
  .overlay__panel { border-radius: 18px; max-height: 80vh; }
}

/* iOS 키보드 보정 — visualViewport 가 줄어든 만큼 하단 fixed 요소를 끌어올림.
   --kb-h 는 JS(setupKbViewport)가 갱신. chapter-nav 는 본문 볼 때 키보드가 안 뜨므로 제외
   (transform 자체가 fixed containing block 을 바꿔 미세하게 들떠 보이는 회귀 방지). */
@media (orientation: portrait) {
  .vsheet,
  .sermon-mini,
  .sermon-split {
    transform: translateY(calc(-1 * var(--kb-h, 0px)));
    transition: transform 0.15s ease;
  }
  /* 토스트는 left:50% 중앙 정렬이라 translateX(-50%) 를 유지해야 함
     (안 그러면 fadeIn 끝난 뒤 오른쪽으로 밀림) */
  .toast {
    transform: translate(-50%, calc(-1 * var(--kb-h, 0px)));
    transition: transform 0.15s ease;
  }
}

/* 부가 정보 접이식 (원어·참조 문헌·찬양) — 펼치기 전엔 노트 높이를 안 뺏음 */
.ss__extra { margin-top: 12px; border-top: 1px solid var(--line); }
.ss__extra > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent); padding: 9px 0; list-style: none; }
.ss__extra > summary::-webkit-details-marker { display: none; }
.ss__extra > summary::before { content: "▸ "; }
.ss__extra[open] > summary::before { content: "▾ "; }

/* 원어 단어 / 참조 문헌 카드 */
.sermon__words { margin: 4px 0 2px; }
.sermon__refs { margin: 16px 0 2px; }
.sermon__words-hint { font-weight: 400; font-size: 11px; color: var(--fg-soft); margin-left: 6px; }
#seWordList, #seRefList { display: flex; flex-direction: column; gap: 6px; }
/* 한 줄 컴팩트 행 — 넘치면 자연 줄바꿈 (카드형 스택 제거) */
.word-row, .ref-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.word-lang { flex: 0 0 auto; border: 1px solid var(--line); background: var(--bg-card); color: var(--fg); border-radius: 7px; padding: 6px 2px; font-size: 12.5px; }
.word-cell { flex: 1 1 60px; min-width: 0; border: 1px solid var(--line); background: var(--bg-card); color: var(--fg); border-radius: 7px; padding: 6px 7px; font-size: 12.5px; }
.word-cell:focus, .word-lang:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.word-del { flex: 0 0 auto; background: none; border: none; color: var(--fg-soft); font-size: 14px; cursor: pointer; padding: 2px 4px; }
/* 성구 참조 pill 입력칸 (원어 '참조'·참고문헌 '관련 구절') — 여러 구절을 pill 로, 각 ✕ 삭제 */
.refpill-field { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; padding: 4px 5px; cursor: text; }
.refpill-input { flex: 1 1 44px; min-width: 44px; border: none; background: none; outline: none; color: var(--fg); font-size: 12.5px; font-family: var(--sans); padding: 2px; }
.refpill { display: inline-flex; align-items: center; gap: 1px; background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 2px 3px 2px 8px; font-size: 11.5px; font-weight: 600; }
.refpill__t { white-space: nowrap; }
.refpill__del { border: none; background: none; color: var(--accent); opacity: 0.6; font-size: 11px; line-height: 1; cursor: pointer; padding: 1px 4px; border-radius: 999px; }
.refpill__del:active { opacity: 1; background: rgba(0, 0, 0, 0.08); }
/* 비고 추가 버튼 (비고는 선택) */
.word-addnote { flex: 1 1 60px; min-width: 0; background: none; border: 1px dashed var(--line); color: var(--fg-soft); border-radius: 7px; padding: 6px 7px; font-size: 12.5px; cursor: pointer; }
.word-addnote:active { background: var(--accent-soft); color: var(--accent); }
.sermon__addword { margin-top: 6px; background: none; border: 1px dashed var(--line); color: var(--accent); border-radius: 8px; padding: 7px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.sermon__addword:active { background: var(--accent-soft); }