/* wiki.css 에서 떼어 낸 성경 본문 읽기 레인 (/bible/{책}/{장}, /bible/v/{판}/{책}/{장}): 본문 도구·절 선택·형광펜·아래 고정 띠·읽기 배경·읽어 주기 음성 */
/* ───── 성경 읽기(2026-10-09): 본문 화면 도구·절 선택·형광펜·아래 고정 띠·보기 설정·책/첫 화면·내 표시·통독 ───── */
:root{--hl-y:#fff3a3;--hl-g:#d6f5d6;--hl-b:#d6e9ff;--hl-p:#ffd9e6;--sel:rgba(0,164,149,.14)}
html[data-theme=dark]{--hl-y:#5a4d00;--hl-g:#1f4a24;--hl-b:#1f3a5e;--hl-p:#5a2340;--sel:rgba(79,211,196,.18)}
.doc--bible{max-width:860px;margin:0 auto}
.has-bbar .doc--bible{padding-bottom:84px}
.has-bbar .wset{bottom:72px}
.bhead{display:flex;align-items:flex-start;gap:10px 16px;flex-wrap:wrap;margin:0 0 6px}
.btools{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding-top:8px}
.btool{padding:5px 10px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--ink2);font:inherit;font-size:.86em;cursor:pointer;white-space:nowrap;text-decoration:none;line-height:1.4}
.btool:hover{border-color:var(--g);color:var(--g-d);text-decoration:none}.btool.on{background:var(--g);border-color:var(--g);color:#fff}
.btool--link{color:var(--g-d)}
.bhint{margin:2px 0 8px}
.verse__en{display:block;margin-top:4px;font-style:italic}
/* 본문: 절마다 한 줄(mode-line) 또는 문단으로 이어 읽기(mode-para) */
.chapter{font-size:1.06em;line-height:1.85;margin:4px 0 10px}
.chapter.font-serif{font-family:"Noto Serif KR","Nanum Myeongjo","Apple Myungjo","AppleMyungjo",Batang,"Noto Serif CJK KR",serif}
.chapter.lh-w{line-height:2.15}
.chapter .v{position:relative;margin:2px 0;padding:3px 10px 3px 8px;border-left:3px solid transparent;border-radius:0 6px 6px 0;cursor:pointer;scroll-margin-top:64px}
.chapter.mode-line .v{display:block}
.chapter.mode-para .v{display:inline;padding:2px 2px;border-left:0;border-radius:3px;margin:0}
.chapter.mode-para .v::after{content:" "}
.chapter .v:hover{background:var(--soft)}
.chapter .v.on{background:var(--t-teal);border-left-color:var(--g);font-weight:600}
.chapter .v.sel{background:var(--sel);box-shadow:inset 0 0 0 1px var(--g)}
.chapter .v.speaking{background:var(--g-l);box-shadow:inset 0 0 0 2px var(--g-d)}
.chapter .v__n{color:var(--g-d);font-size:.66em;font-weight:700;margin-right:4px;vertical-align:top}.chapter .v__n a{color:inherit}.chapter .v__n a:hover{text-decoration:none;background:var(--g-l);border-radius:3px}
.chapter.no-num .v__n{display:none}
.chapter.en .v__en{display:block}.chapter.en.mode-para .v__en{display:inline;margin-left:4px}
.chapter.no-gloss .gl{border-bottom:0;color:inherit;pointer-events:none}
.chapter .v__doc{font-size:.68em;text-decoration:none;margin-left:5px;padding:0 5px;border:1px solid var(--g);border-radius:9px;color:var(--g-d);vertical-align:2px;white-space:nowrap}.chapter .v__doc:hover{background:var(--g-l);text-decoration:none}
.chapter .v__note{border:0;background:transparent;cursor:pointer;font-size:.85em;margin-left:4px;padding:0 2px}
.chapter .v__notebox{display:block;margin:2px 0 4px 1.6em;padding:5px 10px;border-left:3px solid #e0a800;background:var(--t-yellow);font-size:.9em;line-height:1.55;color:var(--ink2);white-space:pre-wrap;border-radius:0 6px 6px 0;cursor:default}
.chapter.mode-para .v__notebox{display:none}
.chapter.no-hl .v__notebox,.chapter.no-hl .v__note{display:none}
.chapter .v.hl-y,.chapter.mode-para .v.hl-y .v__kr{background:var(--hl-y)}.chapter .v.hl-g,.chapter.mode-para .v.hl-g .v__kr{background:var(--hl-g)}.chapter .v.hl-b,.chapter.mode-para .v.hl-b .v__kr{background:var(--hl-b)}.chapter .v.hl-p,.chapter.mode-para .v.hl-p .v__kr{background:var(--hl-p)}
.chapter.mode-para .v.hl-y,.chapter.mode-para .v.hl-g,.chapter.mode-para .v.hl-b,.chapter.mode-para .v.hl-p{background:transparent}
.chapter.no-hl .v.hl-y,.chapter.no-hl .v.hl-g,.chapter.no-hl .v.hl-b,.chapter.no-hl .v.hl-p,.chapter.no-hl .v .v__kr{background:transparent}
.chapter__h{font-size:1em;color:var(--g-d);margin:18px 0 4px 8px;font-weight:700}.chapter__h:first-child{margin-top:4px}
.chapter.mode-para .chapter__h{display:block;margin-top:18px}
.chapnav--big{align-items:center;margin:16px 0 8px}.chapnav--big .btn{margin:0}
.btn--soft{background:var(--chip);color:var(--ink)}.btn--soft.on{background:var(--ok);color:#fff}
.btn--sm{padding:4px 10px;font-size:.9em}
.bplanline{margin:4px 0 10px;padding:7px 12px;border-left:3px solid var(--g);background:var(--t-teal);border-radius:0 6px 6px 0}
/* 절을 골랐을 때 뜨는 도구 띠 */
.vbar{position:fixed;left:0;right:0;bottom:56px;z-index:41;display:flex;justify-content:center;padding:0 8px;pointer-events:none}
.vbar>*{pointer-events:auto}
.vbar__in{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;max-width:860px;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.28);padding:8px 10px;font-size:.9em}
.vbar__ref{font-weight:700;color:var(--g-d);margin-right:4px;white-space:nowrap}
.vbar__in button,.vbar__in a{border:1px solid var(--line);background:var(--soft);color:var(--ink);border-radius:6px;padding:4px 8px;font:inherit;font-size:.92em;cursor:pointer;text-decoration:none;white-space:nowrap}
.vbar__in button:hover,.vbar__in a:hover{border-color:var(--g)}
.vbar__hl{display:inline-flex;gap:4px;align-items:center;padding:0 4px;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.vbar__hl button{width:24px;height:24px;padding:0;border-radius:50%;border:2px solid transparent}
.vbar__hl button[data-c=y]{background:var(--hl-y)}.vbar__hl button[data-c=g]{background:var(--hl-g)}.vbar__hl button[data-c=b]{background:var(--hl-b)}.vbar__hl button[data-c=p]{background:var(--hl-p)}
.vbar__hl button.on{border-color:var(--g-d)}
.vbar__note{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);width:min(560px,calc(100vw - 24px));background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.28);padding:10px}
.vbar__note textarea{width:100%;font:inherit;font-size:.95em;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink);resize:vertical;margin-bottom:6px}
.vbar__msg{position:absolute;bottom:calc(100% + 6px);margin:0;background:var(--ink);color:var(--bg);padding:6px 12px;border-radius:8px;font-size:.88em}
/* 아래 고정 띠 */
.bbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;justify-content:center;align-items:stretch;gap:6px;padding:7px 8px calc(7px + env(safe-area-inset-bottom,0px));background:var(--card);border-top:1px solid var(--line);box-shadow:0 -2px 10px rgba(0,0,0,.12)}
.bbar__btn{display:inline-flex;align-items:center;justify-content:center;min-width:42px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:var(--soft);color:var(--ink);font:inherit;font-size:1.15em;font-weight:700;cursor:pointer;text-decoration:none}
.bbar__btn:hover{border-color:var(--g);text-decoration:none}.bbar__btn.is-off{opacity:.3;cursor:default}.bbar__btn.on{background:var(--g);color:#fff;border-color:var(--g)}
.bbar__pick{flex:0 1 320px;min-width:0;padding:7px 12px;border:1px solid var(--line);border-radius:8px;background:var(--soft);color:var(--ink);font:inherit;font-weight:700;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bbar__pick:hover{border-color:var(--g)}
.bpanel{position:fixed;left:50%;transform:translateX(-50%);bottom:62px;z-index:42;width:min(420px,calc(100vw - 20px));max-height:calc(100vh - 140px);overflow:auto;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.3);padding:12px 14px;font-size:14px}
.bpanel .wset__h{margin-top:8px}.bpanel .wset__h:first-child{margin-top:0}
.bpick__row{display:flex;gap:6px}.bpick__row select{flex:1;min-width:0;padding:7px 8px;font:inherit;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink)}.bpick__row .btn{margin:0;border:0;cursor:pointer;font:inherit;font-weight:600}
.wset__col{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}.wset__col label{cursor:pointer}
.bpanel--tts{left:auto;right:12px;transform:none;bottom:62px;width:auto;display:flex;align-items:center;gap:6px;padding:8px 10px}
.bpanel--tts button{border:1px solid var(--line);background:var(--soft);color:var(--ink);border-radius:6px;padding:4px 9px;font:inherit;font-size:1em;cursor:pointer}
@media (max-width:640px){
  .btools{padding-top:0}.btool{font-size:.82em;padding:4px 8px}
  .chapter{font-size:1.04em}
  .vbar{bottom:60px}.vbar__in{font-size:.86em;gap:4px}
  .bbar__pick{flex:1 1 auto}
}
@media (min-width:900px){.bbar{left:auto;right:auto;width:860px;margin:0 auto;border-radius:12px 12px 0 0;border:1px solid var(--line);border-bottom:0;left:50%;transform:translateX(-50%)}}
/* 읽기 화면 바탕색·글자색 (보기 설정, wb_opts.bg/fg). 색 섞기는 color-mix (미지원 브라우저는 사이트 색 그대로) */
.doc--bible.rt{background:var(--rb);color:var(--rf);--card:var(--rb);--ink:var(--rf);--ink2:var(--rf);--bg:var(--rb);--mute:color-mix(in srgb,var(--rf) 62%,var(--rb));--soft:color-mix(in srgb,var(--rf) 7%,var(--rb));--chip:color-mix(in srgb,var(--rf) 12%,var(--rb));--line:color-mix(in srgb,var(--rf) 20%,var(--rb));--t-teal:color-mix(in srgb,var(--g) 16%,var(--rb));--g-l:color-mix(in srgb,var(--g) 22%,var(--rb));--sel:color-mix(in srgb,var(--g) 24%,var(--rb));--t-yellow:color-mix(in srgb,#e0a800 18%,var(--rb))}
.doc--bible[data-rt=light]{--hl-y:#fff3a3;--hl-g:#d6f5d6;--hl-b:#d6e9ff;--hl-p:#ffd9e6;--g-d:#00846f;--link:#0b5fb3;--link2:#2d5f85}
.doc--bible[data-rt=dark]{--hl-y:#5a4d00;--hl-g:#1f4a24;--hl-b:#1f3a5e;--hl-p:#5a2340;--g-d:#4fd3c4;--link:#8cc4f7;--link2:#9fc3dc}
.doc--bible[data-rt=light] .chapter .v.hl-y,.doc--bible[data-rt=light] .chapter .v.hl-g,.doc--bible[data-rt=light] .chapter .v.hl-b,.doc--bible[data-rt=light] .chapter .v.hl-p{color:#1a1a1a}
.doc--bible[data-rt=dark] .chapter .v.hl-y,.doc--bible[data-rt=dark] .chapter .v.hl-g,.doc--bible[data-rt=dark] .chapter .v.hl-b,.doc--bible[data-rt=dark] .chapter .v.hl-p{color:#f2f2f2}
.doc--bible.rt .vbar__msg{background:var(--rf);color:var(--rb)}
/* 2026-10-22: 어두운 테마의 "입력창 바탕 검정" 규칙(wiki.css, :not() 때문에 특이도 0,2,3)이 보기 설정 바탕색을 이겨 판 고르기·대역 select 가
   검정 바탕 + 어두운 글자로 보이지 않던 것. 읽기 테마가 켜지면 입력 요소도 고른 바탕색·글자색을 따르고, 펼침 목록도 그 밝기(color-scheme)로 */
html[data-theme=dark] body .doc--bible.rt :is(select,textarea,input:not([type=checkbox],[type=radio],[type=color],[type=range],[type=file],[type=submit],[type=button],[type=image],[type=reset])){background-color:var(--rb);color:var(--rf)}
html[data-theme=dark] body .doc--bible.rt .br-sels #bwith{color:var(--g-d)}
.doc--bible[data-rt=light]{color-scheme:light}.doc--bible[data-rt=dark]{color-scheme:dark}
.bthemes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px}
.bthemes button{border:2px solid var(--line);border-radius:8px;padding:6px 4px;cursor:pointer;font:inherit;background:var(--soft);color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1.2}
.bthemes button span{font-size:1.05em;font-weight:700}.bthemes button small{font-size:.68em;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.bthemes button.on{border-color:var(--g);box-shadow:0 0 0 2px var(--g)}
.bcol{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px;font-size:.95em}.bcol label{display:inline-flex;align-items:center;gap:4px}.bcol input[type=color]{width:34px;height:26px;padding:0;border:1px solid var(--line);border-radius:5px;background:transparent;cursor:pointer}.bcol .btn{margin:0;cursor:pointer;font:inherit;font-weight:600}

/* ───── 성경 읽어 주기 음성: 등장인물 목소리 고르기 (/bible/audio, 2026-10-09) ───── */
.au-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin:12px 0}
@media(max-width:720px){.au-top{grid-template-columns:minmax(0,1fr)}}
.au-sub__h{margin-bottom:4px}.au-sub__n{margin:4px 0}.bar--wide{display:block;width:100%;height:10px;margin:6px 0}
.au-prog__n{font-size:1.15em}.au-prog__n b{color:var(--g)}
.au-legend{margin:0 0 8px}
.au-g{margin:18px 0 6px;font-size:1.05em}
.au-tbl td{vertical-align:middle}.au-tbl tr.has td{background:var(--t-teal)}html[data-theme=dark] .au-tbl tr.has td{background:var(--t-teal)}
.au-tbl__who{width:34%}.au-tbl__voice{width:44%}.au-tbl__act{text-align:right}
.au-name{font:inherit;color:var(--link);text-align:left;padding:0}.au-name:hover{text-decoration:underline}
@media(max-width:720px){.au-tbl,.au-tbl tbody,.au-tbl tr,.au-tbl td{display:block;width:auto}.au-tbl tr{border:1px solid var(--line);border-radius:6px;margin:0 0 8px;padding:6px 8px}.au-tbl td{border:0;padding:3px 0}.au-tbl__act{text-align:left}}
.au-player{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:10px;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:999px;box-shadow:0 6px 24px rgba(0,0,0,.3);padding:8px 14px;max-width:calc(100vw - 32px);font-size:.92em}
.au-player__stop{border:0;background:var(--err);color:#fff;border-radius:50%;width:28px;height:28px;cursor:pointer;flex:none}
.au-player__t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60vw}
.au-player__bar{display:inline-block;width:120px;height:6px;background:var(--chip);border-radius:3px;overflow:hidden;flex:none}.au-player__bar i{display:block;height:100%;background:var(--g);width:0}
button.playing{background:var(--err)!important;color:#fff!important;border-color:var(--err)!important}
.au-help code{background:var(--chip);padding:1px 5px;border-radius:3px;font-size:.9em}
.chip--ko{background:var(--t-green);color:var(--ok)}
/* 고르기 창 */
.au-dlg{width:min(1180px,calc(100vw - 24px));max-width:none;max-height:calc(100vh - 24px);border:1px solid var(--line);border-radius:10px;padding:0;background:var(--card);color:var(--ink);overflow:hidden}
.au-dlg::backdrop{background:rgba(0,0,0,.55)}
.au-dlg__close{position:absolute;right:10px;top:8px;margin:0}.au-dlg__close button{border:0;background:var(--chip);color:var(--ink);width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:1em}
.au-dlg__head{padding:14px 18px 8px;border-bottom:1px solid var(--line)}.au-dlg__head h2{margin:0 36px 2px 0;font-size:1.2em}.au-dlg__head p{margin:0}
.au-dlg__body{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:0;max-height:calc(100vh - 110px);overflow:auto}
.au-pick{padding:12px 16px;border-right:1px solid var(--line)}.au-set{padding:12px 16px;background:var(--soft)}
@media(max-width:860px){.au-dlg__body{grid-template-columns:minmax(0,1fr)}.au-pick{border-right:0;border-bottom:1px solid var(--line)}}
.au-filters{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px}
.au-filters input[type=search],.au-filters select,.au-reco input,.au-set select,.au-set input[type=text],.au-set input[type=number],.au-set textarea{padding:6px 8px;border:1px solid var(--line);border-radius:4px;background:var(--card);color:var(--ink);font:inherit;font-size:.93em}
.au-filters input[type=search]{flex:1 1 160px;min-width:0}
.au-reco{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:8px}.au-reco input{flex:1 1 240px;min-width:0}
.au-voices{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.au-v{border:1px solid var(--line);border-radius:6px;padding:8px 10px;background:var(--card)}.au-v.sel{border-color:var(--g);box-shadow:0 0 0 2px var(--g-l)}
.au-v__h{margin-bottom:2px}.au-v__b{margin-top:6px;display:flex;flex-wrap:wrap;gap:4px}.au-v__b .btn{margin:0}
.au-set__voice{padding:8px 10px;border:1px dashed var(--line);border-radius:6px;margin-bottom:10px;background:var(--card)}
.au-row{display:block;margin:0 0 10px}.au-row>span{display:block;font-weight:600;font-size:.92em;margin-bottom:3px}
.au-row select,.au-row textarea,.au-row input[type=text]{width:100%;box-sizing:border-box}
.au-range input[type=range]{width:100%}
.au-emo label{display:block;margin:2px 0}.au-emo__preset{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0 0 20px}.au-emo__preset select{flex:1 1 140px}.au-emo__preset .au-range{flex:2 1 160px;display:flex;align-items:center;gap:6px;font-size:.9em}
.au-emo__ctx{margin:6px 0 0 20px;display:grid;gap:4px}.au-emo__ctx input{width:100%;box-sizing:border-box}
.au-vol label{display:flex;align-items:center;gap:6px;margin:2px 0;font-size:.93em}.au-vol input[type=range]{flex:1}.au-vol input[type=number]{width:80px}
.au-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:12px}.au-actions .btn{margin:0}
#au-msg.bad,#au-vmsg.bad{color:var(--err);font-weight:600}

.btn--rpg{background:linear-gradient(135deg,#d97a1f,#b8336a);color:#fff;border:0;font-weight:700;padding:6px 14px}.btn--rpg:hover{filter:brightness(1.08);background:linear-gradient(135deg,#d97a1f,#b8336a)}   /* 교회백과 → 성경 인물 RPG 단추 (2026-10-17, /game/rpg) */

/* 구절 뜻풀이 (2026-10-25, bible.js noteFor): 절 바로 아래 본문 흐름에 끼워 넣는 상자 — 떠 있는 레이어가 아니다 */
.vnote{margin:6px 0 12px;padding-top:9px}
.vnote__in{position:relative;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 4px 16px rgba(0,0,0,.14);padding:10px 34px 10px 13px;font-size:.92em;line-height:1.6}
.vnote__in:after,.vnote__in:before{content:"";position:absolute;left:22px;border:9px solid transparent;border-top:0}
.vnote__in:after{top:-9px;border-bottom-color:var(--card)}
.vnote__in:before{top:-10px;border-bottom-color:var(--line)}
.vnote__x{position:absolute;right:4px;top:4px;border:0;background:none;color:var(--mute);font:inherit;font-size:.95em;cursor:pointer;padding:3px 7px;border-radius:6px}
.vnote__x:hover{background:var(--soft);color:var(--ink)}
.vnote__h{font-weight:700;color:var(--g-d);font-size:.88em;margin:0 0 3px}
.vnote__b--wait{color:var(--mute)}
.vnote__b--wait:after{content:"";display:inline-block;width:.9em;height:.9em;margin-left:6px;vertical-align:-2px;border:2px solid var(--line);border-top-color:var(--g);border-radius:50%;animation:vnote-spin .8s linear infinite}
@keyframes vnote-spin{to{transform:rotate(360deg)}}
.vnote__s{margin:0}
.vnote__more{margin:7px 0 0;font-size:.9em}.vnote__more a{color:var(--g-d)}