/* 브라우저의 '웹페이지 어둡게'(강제 다크 모드)를 끈다 - <head> 의 <meta name="color-scheme">
   와 짝이다(그 표는 계산값에 안 나타나서 검사가 못 잰다. 규칙은 나타난다). */
:root { color-scheme: only light; }

html, body {
  margin: 0;
  min-height: 100%;
  font-family: -apple-system, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  background: #f7f7fa;
  color: #1a1a2e;
  /* 당겨서 새로고침 차단 - 이 페이지는 병합 대상이 아니라 여기서 직접 넣는다.
     검색 결과를 길게 스크롤하다 위쪽에서 더 당기면 새로고침이 발동하는데,
     새로고침해도 캐시에서 같은 화면이 다시 뜰 뿐이고 입력한 검색어만 날아간다. */
  overscroll-behavior-y: contain;
}

.search-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #1a1a2e;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
}

.search-topbar a {
  color: #e8b64a;
  text-decoration: none;
  font-size: 13px;
}

.search-topbar h1 {
  font-size: 14px;
  margin: 0;
  font-weight: 600;
}

.search-box {
  padding: 12px;
  background: #fff;
  border-bottom: 1px solid #e4e4ea;
}

.search-box input {
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
}

/* 홈페이지 / 성경 거르기 단추. 결과가 없을 때는 자리를 차지하지 않는다 */
.search-kinds {
  display: none;
  gap: 6px;
  padding: 10px 12px 0;
}
.search-kinds.show { display: flex; }

.search-kinds button {
  flex: 1 1 0;
  font-family: inherit;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  padding: 9px 6px;
  border: 1px solid #dcdce4;
  border-radius: 999px;
  background: #fff;
  color: #6b6b7a;
  cursor: pointer;
}
.search-kinds button.on {
  background: #1a1a2e;
  border-color: #1a1a2e;
  color: #fff;
  font-weight: bold;
}

/* "전체"에서 갈래를 나누는 머리글 */
.search-group {
  margin: 10px 2px 6px;
  font-size: 12px;
  font-weight: 600;
  color: #6b6b7a;
}

/* 미리보기로 잘렸을 때 그 갈래를 다 보여주는 단추 */
.search-more {
  display: block;
  width: 100%;
  margin: 0 0 10px;
  padding: 11px;
  font-family: inherit;
  font-size: 13px;
  border: 1px solid #dcdce4;
  border-radius: 10px;
  background: #fff;
  color: #1d4ed8;
  cursor: pointer;
}

.search-status {
  padding: 8px 16px;
  font-size: 12px;
  color: #6b6b7a;
}

.search-results {
  padding: 4px 12px 24px;
}

.search-result {
  display: block;
  background: #fff;
  border: 1px solid #e4e4ea;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  text-decoration: none;
  color: #1a1a2e;
}

/*
 * **읽는 글자는 사용자가 고른 크기를 따라간다** (사용자 요청 2026-09-05 - "결과 글자가 작다").
 * --search-font 는 search.js 가 bookApp:fontSize(pt)에서 계산해 넣는다(기본 16px = 12pt).
 * 주소·개수·단추는 그대로 둔다 - 곁들이는 글까지 키우면 카드가 화면을 덮는다.
 */
.search-result .r-title {
  font-weight: 600;
  font-size: var(--search-font, 16px);
  margin-bottom: 4px;
}

/* 미리보기는 일치한 자리의 앞뒤 문맥이라 줄이 길어질 수 있다 - 3줄까지만 보이고 자른다 */
.search-result .r-snippet {
  /* 미리보기는 제목보다 한 단계 작게 - 둘이 같으면 어느 것이 제목인지 눈에 안 들어온다 */
  font-size: calc(var(--search-font, 16px) * 0.9);
  color: #6b6b7a;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-result .r-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 5px;
}

.search-result .r-path {
  font-size: 11px;
  color: #a2a2ac;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 이 페이지 안에 검색어가 몇 곳 있는지 (문맥을 읽어온 뒤에 채워진다) */
.search-result .r-count {
  flex: 0 0 auto;
  font-size: 11px;
  color: #8a7a3a;
  background: #fff6d9;
  border-radius: 9px;
  padding: 1px 7px;
}

/* 검색어가 통째로는 없고 조각(바이그램)만 걸린 결과 */
.search-result .r-count.is-weak {
  color: #8a8a95;
  background: #eeeef2;
}

/*
 * 성경은 절 단위다 (사용자 결정 2026-09-16 - 갓피플처럼).
 * 책 머리글("데살로니가후서 2건") 아래에 절이 한 줄씩. **절이 곧 읽는 글이라** 어디인지(장:절)를
 * 작게 위에, 절 본문을 본문 크기로 아래에 두고 자르지 않는다 - 홈페이지 결과와 반대다
 * (거기는 제목이 읽는 글이고 미리보기가 곁들이다).
 */
.search-book {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 12px 2px 6px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #e9ebf1;
  color: #1a1a2e;
  font-weight: 600;
  font-size: calc(var(--search-font, 16px) * 0.95);
}
.search-book .search-book-n {
  font-weight: 400;
  font-size: 12px;
  color: #6b6b7a;
}
.search-result.search-verse .r-title {
  font-weight: 500;
  font-size: calc(var(--search-font, 16px) * 0.8);
  color: #2563eb;
  margin-bottom: 2px;
}
.search-result.search-verse .r-snippet {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  font-size: var(--search-font, 16px);
  color: #1a1a2e;
  line-height: 1.6;
}

.search-result mark {
  background: #fff2c0;
  color: inherit;
  border-radius: 2px;
}

/* 성경 장·절 바로 가기 ("요 3:16"). 본문 검색 결과와 성격이 다르므로 눈에 띄게 구분한다 */
.search-result.search-ref {
  border-color: #c7d7ff;
  background: #f3f7ff;
}

.search-result.search-ref .r-title {
  color: #1d4ed8;
}

.search-empty {
  text-align: center;
  color: #9a9aa8;
  padding: 40px 16px;
  font-size: 13px;
}

/*
 * 검색 인덱스를 받는 동안의 **진짜 진행 막대** (2026-09-05).
 * 이 파일은 4.9MB 이고 서버가 길이를 알려주므로 몇 %인지 셀 수 있다 - 그때는 "하는 중"
 * 띠를 안 쓴다는 것이 이 프로젝트의 규칙이다(본문 통째 받기와 같다).
 */
.search-status .s-prog {
  height: 6px;
  margin: 2px 0 6px;
  border-radius: 999px;
  background: #e4e4ea;
  overflow: hidden;
}
.search-status .s-prog > i {
  display: block;
  height: 100%;
  background: #1a1a2e;
  border-radius: 999px;
  transition: width .15s linear;
}