/*
 * 회중 화면 스타일.
 *
 * 전제: 예배당은 어둡고, 폰은 저사양 안드로이드가 섞여 있고, 읽는 사람은 고개를 들었다 내렸다 한다.
 * 그래서 ① 시스템 폰트(다운로드 0·한/영/베 전부 안전) ② 다크 우선 자동 ③ 큰 기본 글자
 * ④ 애니메이션 최소(저사양폰에서 프레임이 떨어지면 읽기가 더 힘들다)를 택했다.
 */
:root {
  --bg: #faf9f7;
  --fg: #1c1b19;
  --muted: #6b6862;
  --card: #ffffff;
  --accent: #3d5a80;
  --warn: #b45309;
  --line: #e6e3de;
  --size: 1.25rem;          /* 설정에서 바뀐다 */
  --top-h: 3.2rem;          /* 고정 상단(헤더·배너) 높이 — live.js 가 실측값으로 덮어쓴다 */
  --on-warn: #fff;          /* 경고색 위 글자 */
  --on-accent: #fff;        /* 강조색 위 글자 */
  /* 지난 말씀 글자색 — opacity 로 흐리게 하면 대비가 AA(4.5:1) 아래로 떨어져 "되짚어 읽기"가 어려워진다.
     그래서 색만 한 단계씩 낮춘다. 얼마나 흐리게 할지는 대표 결정 사항 — 이 두 값만 바꾸면 된다.
     라이트: 배경 #faf9f7 대비 past 6.4:1 / recent 10.3:1.  다크: 배경 #16181c 대비 past 7.2:1 / recent 10.7:1. */
  --past-fg: #5e5b55;
  --recent-fg: #3f3d39;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16181c; --fg: #f2f0ec; --muted: #9a978f; --card: #212429;
    --accent: #8fb3d9; --warn: #f0b429; --line: #2c2f35;
    --on-warn: #1a1200; --on-accent: #0b0d10;
    --past-fg: #a8a59e; --recent-fg: #cbc8c2;
  }
}
html[data-size="l"]  { --size: 1.5rem; }
html[data-size="xl"] { --size: 1.9rem; }

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

/*
 * hidden 속성이 항상 이긴다.
 * 이 한 줄이 없으면 .center/.sheet 의 display:flex 가 hidden 을 덮어써서, 숨겼다고 믿은 화면들이
 * 전부 겹쳐 그려진다 — 실제로 회중 화면 전체가 설정 시트의 반투명 막에 덮이는 것을 QA 스크린샷에서 잡았다.
 */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  /* system-ui 는 기기 기본 글꼴로 떨어진다 — 한글·베트남어 성조 부호까지 안전하고 다운로드가 없다. */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--size);
  line-height: 1.65;
  padding-bottom: env(safe-area-inset-bottom);
}

/* ── 상단 바 ─────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: .6rem;
  padding: .25rem .8rem; padding-top: calc(.25rem + env(safe-area-inset-top));
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  font-size: .8rem;
}
.icon {
  background: none; border: 0; color: var(--fg); font-size: 1.2rem; cursor: pointer;
  /* 터치 타깃 44px 이상 — 한 손·저사양 폰에서 오탭이 잦았다. */
  min-width: 44px; min-height: 44px; margin: 0 0 0 -.6rem; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.conn { display: inline-flex; align-items: center; gap: .35rem; flex: none; min-height: 44px; }
.conn-label { font-size: .75rem; color: var(--warn); }
.conn-label:empty { display: none; }
.title { color: var(--muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot { width: .55rem; height: .55rem; border-radius: 50%; background: #4ade80; flex: none; }
.dot.off { background: #f0b429; }
.draft {
  font-size: .7rem; padding: .1rem .4rem; border-radius: .5rem;
  background: var(--warn); color: var(--on-warn); flex: none;
}

/* ── 배너 ───────────────────────────────────────────── */
.banner {
  position: sticky; top: 0; z-index: 9;
  background: var(--warn); color: var(--on-warn);
  padding: .5rem .8rem; font-size: .85rem; text-align: center;
}
.banner.ok { background: #15803d; color: #fff; }

/* ── 중앙 정렬 화면(대기·언어선택·종료) ────────────────── */
.center {
  min-height: 70vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1rem; padding: 2rem 1.2rem; text-align: center;
}
.big { font-size: 2.5rem; margin: 0; }
.lead { margin: 0; color: var(--muted); }
.lead.sub { font-size: .85em; }
.retry { min-height: 48px; padding-inline: 1.6rem; }
.langs { display: flex; flex-direction: column; gap: .6rem; width: 100%; max-width: 20rem; }
.lang, .close {
  padding: .9rem 1rem; font-size: 1.05rem; font-family: inherit;
  border: 1px solid var(--line); border-radius: .8rem;
  background: var(--card); color: var(--fg); cursor: pointer;
}
.lang[data-suggested] { border-color: var(--accent); border-width: 2px; }

/* ── 본문 스택 ──────────────────────────────────────── */
.stage { padding: 1rem .9rem 6rem; }
.stack { display: flex; flex-direction: column; gap: .9rem; overflow-anchor: none; /* 스크롤 보정은 live.js 가 직접 한다 */ }

.blk {
  padding: .85rem 1rem;
  border-radius: .9rem;
  background: transparent;
  /* 지나간 블록일수록 글자색만 한 단계 낮춘다(opacity 는 대비를 AA 아래로 떨어뜨려서 쓰지 않는다).
     현재 블록과의 구분은 카드 배경·왼쪽 막대가 맡는다. */
  color: var(--past-fg);
  /* 고정 상단 바에 첫 줄이 가리지 않도록 — scrollIntoView·앵커 이동 어디서든 같은 여백을 지킨다. */
  scroll-margin-top: calc(var(--top-h) + .5rem);
}
.blk.recent { color: var(--recent-fg); }
.blk.current {
  background: var(--card);
  color: var(--fg);
  border-left: 4px solid var(--accent);
  box-shadow: 0 1px 3px rgb(0 0 0 / .08);
}
.blk .head {
  display: block; font-size: .72rem; color: var(--muted);
  letter-spacing: .02em; margin-bottom: .3rem;
}
.blk .ko {
  display: block; margin-top: .45rem; padding-top: .45rem;
  border-top: 1px dashed var(--line); font-size: .82em; color: var(--muted);
}
.blk .ref { font-size: .75em; color: var(--accent); }
.blk .verse-ref { display: block; font-weight: 600; color: var(--accent); }
.blk .verse-note { border-top: 0; margin-top: .2rem; padding-top: 0; font-size: .85em; }

.pause {
  margin: 1.2rem .2rem; padding: .8rem 1rem;
  border: 1px dashed var(--line); border-radius: .8rem;
  color: var(--muted); font-size: .9rem; text-align: center;
}

/* ── "최신으로" 배지 ────────────────────────────────── */
.jump {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(1.2rem + env(safe-area-inset-bottom));
  padding: .7rem 1.2rem; border: 0; border-radius: 2rem;
  background: var(--accent); color: var(--on-accent); font-family: inherit; font-size: .95rem; min-height: 44px;
  box-shadow: 0 3px 12px rgb(0 0 0 / .25); cursor: pointer; z-index: 8;
}
/* 오래 놓쳤을 때만 색을 바꿔 알린다 — 강제로 끌고 가지는 않는다(선택권은 회중에게). */
.jump.urgent { background: var(--warn); color: var(--on-warn); }

/* ── 설정 바텀시트 ──────────────────────────────────── */
.sheet { position: fixed; inset: 0; background: rgb(0 0 0 / .4); z-index: 20; display: flex; align-items: flex-end; }
.sheet-inner {
  width: 100%; background: var(--bg); border-radius: 1.2rem 1.2rem 0 0;
  padding: .6rem 1.1rem calc(1.4rem + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 1rem;
}
.handle { width: 2.5rem; height: .25rem; background: var(--line); border-radius: 1rem; margin: .2rem auto .6rem; }
.row { display: flex; flex-direction: column; gap: .45rem; }
.lbl { font-size: .8rem; color: var(--muted); }
.seg { display: flex; gap: .4rem; }
.seg button {
  flex: 1; min-height: 44px; padding: .7rem .4rem; font-family: inherit; font-size: .95rem;
  border: 1px solid var(--line); border-radius: .7rem; background: var(--card); color: var(--fg); cursor: pointer;
}
.seg button[aria-pressed="true"] { border-color: var(--accent); border-width: 2px; color: var(--accent); font-weight: 600; }
#segSize button[data-size="l"]  { font-size: 1.2rem; }
#segSize button[data-size="xl"] { font-size: 1.5rem; }

@media (prefers-reduced-motion: no-preference) {
  .blk { transition: color .3s ease; }
}

.toast {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 30;
  bottom: calc(1.5rem + env(safe-area-inset-bottom)); max-width: 90vw;
  background: var(--fg); color: var(--bg); padding: .7rem 1.1rem; border-radius: 1.5rem; font-size: .9rem; text-align: center;
}