/* shared/bible-book.css - 성경 찾기·읽기 화면 (member/js/bible.js)
   선교회 홈 자료 → 성경 (section.html) 과 신학원 홈 찾기 → 성경 (pastor/main.html) 이 같이 쓴다.
   (예전에는 member/css/section.css 안에 있었다) */

/* 신학원 쪽에는 선교회의 버튼 모양(sc-*)이 없으므로 성경 화면 안에서만 같은 모양으로 */
.bb .sc-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 9px 18px; border: 1px solid var(--brand-200); border-radius: 999px;
    background: #fff; color: var(--brand-700); font: inherit; font-size: 14px; font-weight: 700;
    cursor: pointer; white-space: nowrap; text-decoration: none; box-shadow: none; transform: none; width: auto; margin: 0;
}
.bb .sc-btn:hover { background: var(--brand-50); }
.bb .sc-btn-primary { border-color: transparent; background: var(--brand-gradient); color: #fff; }
.bb .sc-btn-primary:hover { background: var(--brand-gradient); filter: brightness(1.05); }
.bb .sc-link {
    border: none; background: none; padding: 8px 12px; border-radius: 8px; width: auto; margin: 0;
    font: inherit; font-size: 15px; font-weight: 700; color: var(--brand-700); cursor: pointer; box-shadow: none;
}
.bb .sc-link:hover { background: var(--brand-100); }
.bb .about-empty { padding: 30px; text-align: center; color: var(--ink-muted); }
.bb .hy-count { margin: 0 2px; font-size: 13.5px; font-weight: 700; color: var(--ink-muted); }
.bb { max-width: 860px; margin: 0 auto; display: grid; gap: 18px; }
.bb-version { margin: 0 0 -6px; text-align: center; font-family: 'Gowun Batang', serif; font-size: 20px; font-weight: 700; color: var(--brand-700); letter-spacing: 0.3px; }
.bb-search {
    display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px;
    border: 1px solid var(--brand-200); border-radius: 999px; background: #fff; box-shadow: 0 4px 14px -10px rgba(var(--lw-900-rgb, 11, 61, 115), 0.3);
}
.bb-search svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--brand-600, #1570cc); stroke-width: 2; stroke-linecap: round; }
.bb-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; color: var(--ink); }
.bb-search .sc-btn { padding: 8px 16px; }
.bb-group { display: grid; gap: 10px; }
.bb-group h3, .bb-title { margin: 0; font-size: 18px; font-weight: 800; color: var(--brand-700); }
.bb-title small { font-size: 14px; font-weight: 600; color: var(--muted, #8a94a6); margin-left: 6px; }
.bb-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.bb-books button, .bb-chapters button {
    padding: 10px 8px; border: 1px solid var(--line); border-radius: 10px; background: #fff;
    font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; text-align: center;
}
.bb-books button:hover, .bb-chapters button:hover { border-color: var(--brand-200); background: var(--brand-50); color: var(--brand-700); }
.bb-chapters { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 8px; }
.bb-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; color: var(--muted, #8a94a6); }
.bb-crumbs b { color: var(--ink); }
.bb-text { padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; font-family: 'Gowun Batang', serif; }
.bb-v { margin: 0 0 10px; font-size: 18px; line-height: 1.9; color: var(--ink); border-radius: 6px; padding: 2px 6px; scroll-margin-top: 90px; }
.bb-v sup { margin-right: 6px; font-family: var(--lw-font, 'Noto Sans KR', sans-serif); font-size: 12px; font-weight: 800; color: var(--brand-600, #1570cc); }
.bb-v.is-hl { background: #fff4c2; }
.bb-v i, .bb-hit i { color: #5b6577; }
.bb-passage { display: grid; gap: 8px; }
.bb-passage-link { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: var(--brand-200); text-underline-offset: 4px; }
.bb-passage-link:hover { color: var(--brand-600, #1570cc); }
.bb-nav { display: flex; justify-content: space-between; gap: 10px; }
.bb-results-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.bb-results-head .hy-count { margin: 0; }
.bb-scopes { display: flex; gap: 6px; }
.bb-heads { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.bb-scopes button {
    padding: 6px 12px; border: 1px solid var(--brand-200); border-radius: 999px; background: #fff;
    font: inherit; font-size: 13px; font-weight: 700; color: var(--brand-700); cursor: pointer;
}
.bb-scopes button.is-active { background: var(--brand-600, #1570cc); border-color: var(--brand-600, #1570cc); color: #fff; }
.bb-results { display: grid; gap: 8px; }
.bb-hit {
    display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff;
    font: inherit; text-align: left; cursor: pointer;
}
.bb-hit:hover { border-color: var(--brand-200); background: var(--brand-50); }
.bb-hit b { font-size: 13px; color: var(--brand-700); }
.bb-hit span { font-family: 'Gowun Batang', serif; font-size: 16px; line-height: 1.7; color: var(--ink); }
.bb-hit b small { margin-left: 6px; font-weight: 600; color: var(--muted, #8a94a6); }
.bb-hit .bb-ko { font-family: var(--lw-font, 'Noto Sans KR', sans-serif); font-size: 14.5px; line-height: 1.7; color: #5b6577; padding-left: 10px; border-left: 3px solid var(--brand-200); }
.bb-hit mark, .bb-v mark { background: #ffe58a; color: inherit; padding: 0 1px; border-radius: 3px; }
.bb-more { text-align: center; }

/* 구절 고르기 (네모) · 아래 선택 막대 */
.bb-v { display: flex; align-items: flex-start; gap: 8px; }
.bb-v > span { flex: 1; min-width: 0; }
.bb-ck { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 30px; margin-left: -4px; cursor: pointer; }
.bb-ck input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand-600, #1570cc); cursor: pointer; }
.bb-hit { display: flex; align-items: flex-start; gap: 6px; }
.bb-hit .bb-ck { height: 24px; }
.bb-hit-main { flex: 1; min-width: 0; display: grid; gap: 4px; cursor: pointer; outline-offset: 3px; }
.bb-title-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.bb-title-row .sc-link { font-size: 13px; }
.bb-selbar {
    position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 50;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px;
    width: min(620px, calc(100% - 24px)); padding: 10px 14px; border-radius: 16px;
    background: #fff; border: 1px solid var(--brand-200); box-shadow: 0 12px 30px -10px rgba(var(--lw-900-rgb, 11, 61, 115), 0.45);
}
.bb-selbar[hidden] { display: none; }
.bb-selbar-n { font-size: 14px; font-weight: 800; color: var(--brand-700); }
.bb-selbar-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bb-selbar .sc-btn { padding: 7px 14px; font-size: 13px; }
.bb-selbar-vers { display: inline-flex; border: 1px solid var(--brand-200); border-radius: 999px; overflow: hidden; }
.bb-selbar-vers button {
    padding: 6px 11px; border: 0; background: #fff; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--brand-700); cursor: pointer;
}
.bb-selbar-vers button + button { border-left: 1px solid var(--brand-200); }
.bb-selbar-vers button.is-on { background: var(--brand-600, #1570cc); color: #fff; }
.bb-selbar-vers button.is-on::before { content: '✓ '; }
.bb { padding-bottom: 70px; }   /* 선택 막대가 마지막 구절을 가리지 않게 */
.bb-note { margin: 0; font-size: 12.5px; color: var(--muted, #8a94a6); text-align: center; }

/* 같이 볼 번역 - 위쪽 버튼 + 구절마다 번역을 차례로 (1 ES / 1 KO / 2 ES / 2 KO …) */
.bb-showvers { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: -6px; }
.bb-showvers > span { font-size: 13px; font-weight: 800; color: var(--ink-muted); margin-right: 2px; }
.bb-showvers button {
    padding: 6px 14px; border: 1px solid var(--brand-200); border-radius: 999px; background: #fff;
    font: inherit; font-size: 13px; font-weight: 700; color: var(--brand-700); cursor: pointer;
}
.bb-showvers button.is-on { background: var(--brand-600, #1570cc); border-color: var(--brand-600, #1570cc); color: #fff; }
.bb-showvers button.is-on::before { content: '✓ '; }
.bb-multi { display: grid; gap: 4px; flex: 1; min-width: 0; }
.bb-line { display: block; }
.bb-line + .bb-line { padding-top: 4px; border-top: 1px dashed var(--line); }
.bb-line-ko { font-family: var(--lw-font, 'Noto Sans KR', sans-serif); font-size: 16px; line-height: 1.8; color: #34405a; }
.bb-line-en { font-size: 16.5px; color: #3d4757; }
.bb-tag {
    display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 5px; vertical-align: 2px;
    background: var(--brand-50); color: var(--brand-600, #1570cc); font-family: var(--lw-font, 'Noto Sans KR', sans-serif);
    font-size: 11.5px; font-style: normal; font-weight: 800; letter-spacing: 0.3px;
}
.bb-line-ko .bb-tag { background: #fdf2e9; color: #c2410c; }
.bb-line-en .bb-tag { background: #ecfdf5; color: #047857; }

/* 글씨 모양 · 크기 (bible.js textPref: .bb.bb-f-<모양> + --bb-scale) - 구절 글씨만 바뀐다 */
.bb-textstyle { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.bb-textstyle > span:first-child { font-size: 13px; font-weight: 800; color: var(--ink-muted); margin-right: 2px; }
.bb-textstyle button {
    min-width: 44px; padding: 6px 14px; border: 1px solid var(--brand-200); border-radius: 999px; background: #fff;
    font-size: 13px; font-weight: 700; color: var(--brand-700); cursor: pointer;
}
.bb-textstyle button.is-on { background: var(--brand-600, #1570cc); border-color: var(--brand-600, #1570cc); color: #fff; }
.bb-textstyle button:disabled { opacity: 0.4; cursor: default; }
.bb-font-batang { font-family: 'Gowun Batang', serif; }
.bb-font-gothic { font-family: var(--lw-font, 'Noto Sans KR', sans-serif); }
.bb-font-classic { font-family: Georgia, 'Times New Roman', serif; }
.bb-size { display: inline-flex; margin-left: 6px; }
.bb-size button { border-radius: 0; margin-left: -1px; }
.bb-size button:first-child { border-radius: 999px 0 0 999px; margin-left: 0; }
.bb-size button:last-child { border-radius: 0 999px 999px 0; }
.bb-size .bb-size-now { min-width: 62px; padding: 6px 8px; color: var(--ink); font-weight: 800; }
.bb .bb-v { font-size: calc(18px * var(--bb-scale, 1)); }
.bb .bb-v sup { font-size: calc(12px * var(--bb-scale, 1)); }
.bb .bb-line-ko { font-size: calc(16px * var(--bb-scale, 1)); }
.bb .bb-line-en { font-size: calc(16.5px * var(--bb-scale, 1)); }
.bb .bb-hit span { font-size: calc(16px * var(--bb-scale, 1)); }
.bb .bb-hit .bb-ko { font-size: calc(14.5px * var(--bb-scale, 1)); }
.bb.bb-f-gothic .bb-text, .bb.bb-f-gothic .bb-line, .bb.bb-f-gothic .bb-hit span { font-family: var(--lw-font, 'Noto Sans KR', sans-serif); }
.bb.bb-f-classic .bb-text, .bb.bb-f-classic .bb-line, .bb.bb-f-classic .bb-hit span { font-family: Georgia, 'Times New Roman', serif; }
.bb.bb-f-batang .bb-line-ko, .bb.bb-f-batang .bb-hit .bb-ko { font-family: 'Gowun Batang', serif; }