/* 성경 (BSB) — 씨앗 교적관리와 같은 결.
 *
 * 유리는 교적관리 public/styles.css 의 **3차까지 다듬은 Liquid Glass** 를 그대로
 * 옮겼다. 요약하면 유리가 유리로 보이는 이유는 색이 아니라 빛이다:
 *   ① 가장자리 반사(specular rim) — 위가 밝고 아래로 사그라든다 → 두께가 생긴다
 *   ② 판 안쪽 위 하이라이트 / 아래 그늘 — 판이 아니라 덩어리로 보인다
 *   ③ 뒤를 그냥 흐리지 않고 모아서 밝힌다 (saturate + brightness)
 * 테두리는 border 로는 안 된다 — 사면이 같은 색이라 두께가 안 산다. 가장자리만
 * 남기는 마스크(xor)로 그라디언트 링을 그린다.
 */

:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --border: #e2e5ea;
  --text: #1a1d21;
  --text-dim: #656d78;
  --accent: #2f6b4f;
  --accent-dim: #e6f0ea;
  --bad: #c0392b;

  --glass-bg: rgba(255, 255, 255, 0.42);
  --glass-brd: rgba(255, 255, 255, 0.7);
  --glass-brd-fb: rgba(255, 255, 255, 0.28); /* 흐림 폴백일 때만 쓰는 진한 테두리 */
  --glass-sh: 0 8px 32px rgba(31, 38, 135, 0.1);

  --lg-rim-top: rgba(255, 255, 255, 0.98);
  --lg-rim-mid: rgba(255, 255, 255, 0.45);
  --lg-rim-bot: rgba(255, 255, 255, 0.70);
  --lg-in-top: rgba(255, 255, 255, 0.75);
  --lg-in-bot: rgba(0, 0, 0, 0.06);
  --lg-filter: blur(34px) saturate(200%) brightness(1.04);

  /* 유리가 굴절시킬 대상이 있어야 유리처럼 보인다 — 바탕에 은은한 색 덩어리 */
  --mesh-1: rgba(47, 107, 79, 0.18);
  --mesh-2: rgba(120, 180, 220, 0.16);
  --mesh-3: rgba(230, 190, 130, 0.14);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15181c;
    --surface: #1e2227;
    --border: #313740;
    --text: #e8eaed;
    --text-dim: #9aa3ae;
    --accent: #6cc296;
    --accent-dim: #1f3229;
    --bad: #ff8a80;

    --glass-bg: rgba(32, 37, 44, 0.40);
    --glass-brd: rgba(255, 255, 255, 0.1);
    --glass-brd-fb: rgba(0, 0, 0, 0.25);
    --glass-sh: 0 8px 32px rgba(0, 0, 0, 0.36);

    /* 어두운 곳에서 흰 테두리를 아끼면 「배경에 뚫린 구멍」처럼 보인다.
       실제 iOS 26 은 어두운 배경에서 가장자리가 또렷하게 빛난다. */
    --lg-rim-top: rgba(255, 255, 255, 0.85);
    --lg-rim-mid: rgba(255, 255, 255, 0.26);
    --lg-rim-bot: rgba(255, 255, 255, 0.42);
    --lg-in-top: rgba(255, 255, 255, 0.22);
    --lg-in-bot: rgba(0, 0, 0, 0.30);
    --lg-filter: blur(34px) saturate(210%) brightness(1.12);

    --mesh-1: rgba(60, 140, 100, 0.22);
    --mesh-2: rgba(70, 120, 170, 0.2);
    --mesh-3: rgba(150, 120, 70, 0.16);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background-color: var(--bg);
  background-attachment: fixed;
  background-image:
    radial-gradient(60rem 40rem at 8% -10%, var(--mesh-1), transparent 60%),
    radial-gradient(50rem 36rem at 100% 8%, var(--mesh-2), transparent 62%),
    radial-gradient(46rem 34rem at 50% 108%, var(--mesh-3), transparent 60%);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Pretendard',
    'Malgun Gothic', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

/* ══════════════════════════════════════════════════════════════
   유리 한 벌 — 이 앱에서 유리인 것은 둘뿐이다.
   돋보기 버튼 · 검색 알약.
   ──────────────────────────────────────────────────────────────
   ⚠️ 유리(칠·흐림·테두리)는 **요소 자신이 아니라 가상요소에** 얹는다.
      사파리 26 은 화면 위·아래 가장자리의 고정 요소에서 요소 자신의
      background-color 와 backdrop-filter 를 표본해 상태바/홈 인디케이터 뒤를
      그 색으로 칠해 버린다. 절대배치 가상요소는 표본하지 않는다 (WebKit #302272).
   ══════════════════════════════════════════════════════════════ */
.glass {
  position: relative;
  isolation: isolate;
  background: none;
  border: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* ②③ 칠 + 안쪽 빛무리 + 뒤를 모아서 밝히기 */
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: var(--glass-bg);
  background-image: radial-gradient(120% 90% at 30% -20%, var(--lg-in-top), transparent 60%);
  box-shadow:
    inset 0 1px 0 var(--lg-in-top),
    inset 0 -1px 0 var(--lg-in-bot);
}
/* ① 가장자리 반사 — 왼쪽 위가 가장 밝고 아래는 반사광만 옅게 */
.glass::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(155deg,
    var(--lg-rim-top) 0%,
    var(--lg-rim-mid) 30%,
    transparent 52%,
    var(--lg-rim-bot) 100%);
  /* 안쪽을 도려내 테두리 1px 만 남긴다 */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .glass::before {
    -webkit-backdrop-filter: var(--lg-filter);
    backdrop-filter: var(--lg-filter);
  }
}
/* 흐림을 못 쓰는 브라우저 — 반투명만 남으면 형태가 사라진다.
   배경은 불투명에 가깝게, 테두리는 얇게 진하게. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass::before {
    background-color: color-mix(in srgb, var(--surface) 88%, transparent);
    border: 1px solid var(--glass-brd-fb);
  }
}
/* 사파리에 진짜 리퀴드 글래스 CSS 가 있지만 아직 웹에는 잠겨 있다.
   열리는 날 자동으로 진짜 유리가 되도록 걸어만 둔다. */
@supports (-apple-visual-effect: -apple-system-glass-material) {
  .glass { -apple-visual-effect: -apple-system-glass-material; }
}

/* ══════════════════════════════════════════════════════════════
   상단 — 바가 아니다. 배경도 테두리도 없고 제목만 떠 있다.
   ══════════════════════════════════════════════════════════════ */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  padding: calc(env(safe-area-inset-top) + 10px) 14px 10px;
  pointer-events: none;
}
/* ⚠️ 전면폭 가림막에 색을 칠하지 않는다. 색 대신 흐림만 얹고, 아래로 갈수록
   마스크로 풀어 경계선도 남기지 않는다. */
.topbar::before {
  content: '';
  position: absolute;
  inset: 0;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--bg) 62%, transparent),
    color-mix(in srgb, var(--bg) 24%, transparent) 70%,
    transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent);
  mask-image: linear-gradient(to bottom, #000 58%, transparent);
  pointer-events: none;
}
.tb-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  /* ⚠️ position 을 주지 않으면 제목이 ::before 보다 **먼저** 그려진다.
     자리 잡힌 ::before 가 나중에 그려지면서 제목까지 흐려 얼룩처럼 보인다. */
  position: relative;
  text-align: center;
  /* 아이폰 내비게이션 제목 규격 — 17pt SF Semibold, 살짝 죄인 자간 */
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

/* ── 하단 — 돋보기 하나. 엄지가 가장 편하게 닿는 오른쪽 끝. ── */
nav.tabbar {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(env(safe-area-inset-bottom) + 12px);
  z-index: 38;
  display: flex;
  justify-content: flex-end;
  padding: 0 14px;
  pointer-events: none;
}
.gbtn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  min-width: 52px;
  padding: 0;
  border-radius: 999px;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
}
.gbtn:active { transform: scale(0.94); filter: brightness(0.96); } /* 유리가 눌리면 빛도 눌린다 */

/* 아이콘 — 이모지는 기기마다 그림도 색도 제멋대로다. 유리 위에 알록달록한 것이
   떠 있으면 유리로 보이지 않는다. currentColor 를 따르는 선 그림만 쓴다. */
.ic { width: 22px; height: 22px; display: block; flex: 0 0 auto; }

/* ══════════════════════════════════════════════════════════════
   검색 판 — 아이폰 메시지 앱 검색과 같은 모양
   ──────────────────────────────────────────────────────────────
   바깥 상자가 없다. 「돋보기 든 유리 알약」 하나뿐이다. 안내줄은 두지 않는다 —
   키보드가 올라오면 사파리 주소창과 이 알약 둘만 보이게(2026-09-27 사장님).
   입력 자체가 유리라 칸 테두리도 포커스 링도 두지 않는다.
   ══════════════════════════════════════════════════════════════ */
.dock-panel {
  position: fixed;
  left: 0; right: 0;
  /* --kb: 키보드가 판을 덮으면 app.js 가 덮인 만큼 넣어 준다 (아래 주석 참조) */
  bottom: calc(env(safe-area-inset-bottom) + 76px + var(--kb, 0px));
  z-index: 39;
  padding: 0 14px;
  display: flex;
  justify-content: center;
  pointer-events: none;
  transition: bottom 0.15s ease-out;
}
.dock-panel[hidden] { display: none; }
.dock-panel > .inner {
  pointer-events: auto;
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.searchpill {
  width: 100%;
  height: 50px;
  border-radius: 999px;
}
.searchpill input {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 999px;
  /* 왼쪽은 알약 안에 든 돋보기 자리 */
  padding: 0 18px 0 46px;
  /* 16px 미만이면 사파리가 입력할 때 화면을 확대해 버린다. */
  font-size: 17px;
  font-family: inherit;
  color: var(--text);
  background: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.8' cy='10.8' r='6.2' fill='none' stroke='rgba(255,255,255,0.55)' stroke-width='1.8'/%3E%3Cpath d='M15.4 15.4 20 20' stroke='rgba(255,255,255,0.55)' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 15px center;
  background-size: 21px;
}
@media (prefers-color-scheme: light) {
  .searchpill input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.8' cy='10.8' r='6.2' fill='none' stroke='rgba(0,0,0,0.45)' stroke-width='1.8'/%3E%3Cpath d='M15.4 15.4 20 20' stroke='rgba(0,0,0,0.45)' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  }
}
.searchpill input:focus { outline: none; border: none; box-shadow: none; }
.searchpill input::placeholder { color: var(--text-dim); }
/* 없는 책 — 따로 알림을 띄우지 않고 글씨 색만 바꾼다(2026-09-27 사장님: 키보드가
   올라오면 사파리 주소창과 검색창 둘만 보이게). */
.searchpill.bad input { color: var(--bad); }

/* ⓧ 지우기 — 사파리 주소창과 같은 자리·모양. 글이 없으면 숨는다. */
.searchpill input { padding-right: 48px; }
.searchpill .clear {
  position: absolute;
  top: 0; right: 4px; bottom: 0;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-dim);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.searchpill .clear .ic { width: 19px; height: 19px; opacity: 0.85; }
.searchpill .clear:active .ic { opacity: 0.55; }
.searchpill input:placeholder-shown + .clear { display: none; }

/* ── 검색 중에는 알약이 비켜 준다 ──────────────────────
   키보드가 올라온 좁은 화면에서 돋보기까지 떠 있으면 어수선하고, 무엇보다
   검색창과 돋보기는 **둘 중 하나만** 있으면 된다. */
body:has(.dock-panel:not([hidden])) nav.tabbar,
body:has(.dock-panel input:focus) nav.tabbar {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
/* 알약이 숨었으므로 판은 그 자리까지 내려가 키보드에 바짝 붙는다. */
body:has(.dock-panel input:focus) .dock-panel {
  bottom: calc(env(safe-area-inset-bottom) + 8px + var(--kb, 0px));
}

/* ── 본문 ────────────────────────────────────────── */
main {
  /* 위는 떠 있는 제목 + 안전영역, 아래는 돋보기 알약 높이만큼 */
  padding: calc(env(safe-area-inset-top) + 68px) 20px calc(env(safe-area-inset-bottom) + 104px);
  max-width: 720px;
  margin: 0 auto;
  /* 성경 본문은 세로로 길게 읽는 글이다. 화면 UI(15px)보다 크게, 줄간도 넉넉히. */
  font-size: 17px;
  line-height: 1.75;
}

main h2 {
  margin: 28px 0 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-dim);
}
main h2:first-child { margin-top: 0; }

.subtitle { margin: 0 0 14px; font-style: italic; color: var(--text-dim); }
.para { margin: 0 0 14px; text-align: justify; hyphens: auto; }
.poem { margin: 0 0 14px; }
.poem .v { display: block; }
.poem .line { display: block; }
.poem .line.p2 { padding-left: 1.6em; }

/* 절 번호 — 본문을 밀어내지 않게 위첨자로 작게. */
.vn {
  font-size: 0.66em;
  font-weight: 700;
  color: var(--accent);
  vertical-align: 0.45em;
  margin-right: 0.25em;
  user-select: none;
}
.poem .vn { vertical-align: 0.35em; }

/* 검색으로 뛰어온 절 — 어디로 왔는지 잠깐 알려주고 사라진다. */
.v.hit { background: var(--accent-dim); border-radius: 4px; transition: background 0.6s ease; }
.v.hit.fade { background: transparent; }
@media (prefers-reduced-motion: reduce) {
  .v.hit, .dock-panel, nav.tabbar { transition: none; }
}

.status { color: var(--text-dim); text-align: center; padding: 40px 0; }