/* 읽기 화면: 책이 주인공. 막대는 가운데를 누를 때만, 바탕은 기기 설정을 따르거나 밝음·세피아·어두움 */
:root {
  --sans: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --serif: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --seal: #D2271D;
}
body[data-theme="light"] { --bg: #FBFAF7; --fg: #1D1C1A; --dim: #6E6A63; --hair: rgba(29, 28, 26, .13); --bar: rgba(251, 250, 247, .94); --panel: #FFFFFF; --on: #1D1C1A; --onfg: #FBFAF7; }
body[data-theme="sepia"] { --bg: #F3EAD7; --fg: #3B3024; --dim: #7A6B57; --hair: rgba(59, 48, 36, .16); --bar: rgba(243, 234, 215, .95); --panel: #F8F1E2; --on: #3B3024; --onfg: #F3EAD7; }
body[data-theme="dark"] { --bg: #141311; --fg: #DAD5CB; --dim: #8F8A81; --hair: rgba(218, 213, 203, .14); --bar: rgba(20, 19, 17, .94); --panel: #1C1B19; --on: #DAD5CB; --onfg: #141311; }
* { box-sizing: border-box; }
html, body { height: 100%; }
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--sans); font-weight: 400; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; transition: background .3s, color .3s; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 1px solid var(--fg); outline-offset: 2px; }
.stage { position: fixed; inset: 0; }
foliate-view { display: block; width: 100%; height: 100%; }

/* 위·아래 막대: 가운데나 위·아래 화살표를 누르면, 마우스를 위·아래 끝에 대면 나타나고, 쪽을 넘기면 숨는다 */
.rbar { position: fixed; z-index: 20; left: 0; right: 0; background: var(--bar); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform .32s cubic-bezier(.2, .7, .1, 1), opacity .32s; }
.rbar--top { top: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; height: 56px; padding: 0 clamp(12px, 2.4vw, 28px); border-bottom: 1px solid var(--hair); }
.rbar--bottom { bottom: 0; padding: 10px clamp(16px, 3vw, 40px) calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hair); }
body:not(.is-bars) .rbar--top { transform: translateY(-100%); opacity: 0; pointer-events: none; }
body:not(.is-bars) .rbar--bottom { transform: translateY(100%); opacity: 0; pointer-events: none; }
.rbar__back { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-size: 13.5px; color: var(--dim); justify-self: start; }
.rbar__back:hover { color: var(--fg); }
.rbar__mid { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.rbar__title { margin: 0; max-width: 46vw; font-size: 14px; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.rbar__mid.has-lang .rbar__title { line-height: 1.35; }
/* 언어 상자: 제목 아래 작게, 누르면 기기 기본 목록 */
.rlang { position: relative; display: inline-flex; align-items: center; }
.rlang[hidden] { display: none; }
#rlang { min-height: 26px; padding: 2px 20px 2px 6px; -webkit-appearance: none; appearance: none; background: none; border: 0; border-radius: 0; color: var(--dim); font: inherit; font-size: 12px; letter-spacing: .06em; cursor: pointer; }
#rlang:hover { color: var(--fg); }
#rlang option { background: var(--panel); color: var(--fg); }
body[data-theme="dark"] #rlang { color-scheme: dark; }
.rlang svg { position: absolute; right: 2px; width: 14px; height: 14px; fill: none; stroke: var(--dim); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rbar__tools { display: flex; gap: 2px; justify-self: end; }
.tool { display: grid; place-items: center; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; color: var(--fg); }
.tool svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tool[aria-pressed="true"] svg { fill: var(--seal); stroke: var(--seal); }
.tool--aa { font-family: var(--serif); font-size: 19px; }
.hist { display: flex; justify-content: space-between; min-height: 0; }
.hist__btn { margin: 0 0 6px; padding: 6px 10px; background: none; border: 1px solid var(--hair); font-size: 12.5px; color: var(--fg); cursor: pointer; }
.hist__btn[data-act="hfwd"] { margin-left: auto; }
.timeline { position: relative; height: 28px; }
.timeline__ticks { position: absolute; left: 9px; right: 9px; top: 50%; height: 9px; margin-top: -4px; pointer-events: none; }
.timeline__ticks i { position: absolute; top: 0; width: 1px; height: 9px; background: var(--dim); opacity: .45; }
#timeline { position: relative; width: 100%; height: 28px; margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
#timeline::-webkit-slider-runnable-track { height: 1px; background: var(--dim); }
#timeline::-moz-range-track { height: 1px; background: var(--dim); }
#timeline::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--seal); border: 3px solid var(--bg); }
#timeline::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--seal); border: 3px solid var(--bg); }
.status { display: flex; align-items: center; gap: 16px; margin: 4px 0 0; font-size: 12.5px; color: var(--dim); }
.status__chap { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fg); }
.status__left { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status__pct { font-variant-numeric: tabular-nums; }
/* 위치 번호 단추와 입력 칸: 같은 자리에 번갈아 나옴. 입력 칸 글자는 16px(휴대폰에서 눌러도 화면이 확대되지 않게) */
.status__loc { position: relative; flex: none; min-height: 28px; padding: 0 8px; background: none; border: 1px solid var(--hair); font: inherit; color: var(--fg); white-space: nowrap; font-variant-numeric: tabular-nums; cursor: pointer; }
.status__loc::after { content: ""; position: absolute; inset: -8px 0; }
.status__loc:hover { border-color: var(--dim); }
.status__loc[hidden], .locgo[hidden] { display: none; }
.locgo { display: flex; flex: none; align-items: center; gap: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.locgo input { width: 5.5em; height: 28px; padding: 0 6px; background: var(--bg); border: 1px solid var(--dim); border-radius: 0; font: inherit; font-size: 16px; color: var(--fg); text-align: right; }
.locgo input:focus { outline: 1px solid var(--seal); outline-offset: 0; }
/* 위치 입력 중 휴대폰 글쇠판 높이만큼 아래 막대를 올림(--kb는 reader.js locLift) */
.rbar--bottom { translate: 0 calc(-1 * var(--kb, 0px)); }
@media (max-width: 480px) { .status { gap: 10px; } .locgo input { width: 4.5em; } .status.is-loc .status__left { display: none; } }
/* 막대가 숨었을 때: 위 가운데 아래로 내리는 화살표, 아래 가운데 올리는 화살표 + 작은 진도(킨들처럼 고를 수 있음). 누르면 위·아래 막대가 나온다 */
.rpull { position: fixed; z-index: 15; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 72px; padding: 0 18px; background: none; border: 0; color: var(--dim); cursor: pointer; transition: opacity .3s, color .2s; }
.rpull svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: opacity .3s, transform .3s; }
.rpull:hover { color: var(--fg); }
.rpull--top { top: calc(4px + env(safe-area-inset-top)); height: 40px; }
.rpull--top:hover svg { transform: translateY(2px); }
.rpull--bottom { bottom: calc(6px + env(safe-area-inset-bottom)); min-height: 40px; min-width: 140px; }
.rpull--bottom svg { width: 18px; height: 18px; }
.rpull--bottom:hover svg { transform: translateY(-2px); }
body.is-bars .rpull--top { opacity: 0; pointer-events: none; }
body.is-bars .rpull--bottom { pointer-events: none; visibility: hidden; transition: visibility 0s .3s; }
body.is-bars .rpull--bottom .mini.is-toast { visibility: visible; }
body.is-bars .rpull--bottom svg { opacity: 0; }
.mini { display: block; margin: 0; font-size: 11.5px; line-height: 1.3; letter-spacing: .04em; white-space: nowrap; transition: opacity .3s; }
body.is-bars .mini:not(.is-toast) { opacity: 0; }
.mini.is-toast { color: var(--fg); }

/* 차례·설정 창: PC는 옆에서, 휴대폰은 아래에서 */
.scrim { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .28); }
.panel { position: fixed; z-index: 31; top: 0; bottom: 0; width: min(380px, 92vw); display: flex; flex-direction: column; background: var(--panel); color: var(--fg); border-color: var(--hair); box-shadow: 0 0 40px rgba(0, 0, 0, .2); }
.panel--toc { left: 0; border-right: 1px solid var(--hair); }
.panel--set { right: 0; border-left: 1px solid var(--hair); }
.panel[hidden] { display: none; }
.panel__tabs { display: flex; align-items: center; gap: 4px; padding: 8px 8px 0 16px; border-bottom: 1px solid var(--hair); }
.panel__tab { padding: 14px 10px; background: none; border: 0; border-bottom: 2px solid transparent; font-size: 14px; color: var(--dim); cursor: pointer; }
.panel__tab[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--seal); }
.panel__h { margin: 0; padding: 14px 0; font-size: 14px; }
.panel__close { margin-left: auto; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; color: var(--dim); font-size: 15px; }
.ptoc, .pmarks { list-style: none; margin: 0; padding: 8px 0 24px; overflow-y: auto; flex: 1; }
.ptoc__item { display: block; width: 100%; padding: 11px 22px; background: none; border: 0; text-align: left; font-family: var(--serif); font-size: 16.5px; cursor: pointer; color: var(--fg); }
.ptoc__item--sub { padding-left: 38px; font-size: 15.5px; }
.ptoc__item:hover { background: var(--hair); }
.ptoc__item.is-now { color: var(--seal); }
.pmark { display: flex; border-bottom: 1px solid var(--hair); }
.pmark__go { flex: 1; display: flex; justify-content: space-between; gap: 12px; padding: 14px 22px; background: none; border: 0; text-align: left; cursor: pointer; font-family: var(--serif); font-size: 16px; }
.pmark__go small { font-family: var(--sans); font-size: 12px; color: var(--dim); }
.pmark__del { width: 48px; background: none; border: 0; color: var(--dim); cursor: pointer; }
.pmarks__empty { padding: 20px 22px; font-size: 13.5px; line-height: 1.7; color: var(--dim); }
.set { padding: 10px 20px 28px; overflow-y: auto; }
.set__row { padding: 14px 0; border-bottom: 1px solid var(--hair); }
.set__k { display: block; margin-bottom: 10px; font-size: 12.5px; letter-spacing: .06em; color: var(--dim); }
.set__size { display: flex; align-items: center; gap: 10px; }
.set__size button { width: 40px; height: 40px; background: none; border: 1px solid var(--hair); cursor: pointer; font-size: 13px; }
.set__size button.big { font-size: 19px; }
.set__size input { flex: 1; accent-color: var(--seal); }
.seg { display: flex; flex-wrap: wrap; border: 1px solid var(--hair); }
.seg button { flex: 1 1 auto; min-height: 40px; padding: 8px 10px; background: none; border: 0; border-right: 1px solid var(--hair); cursor: pointer; font-size: 13px; color: var(--fg); }
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { background: var(--on); color: var(--onfg); }
.seg .f-serif { font-family: var(--serif); font-size: 15px; }
@media (max-width: 760px) { .set__row--wide { display: none; } }

/* 책을 펼치는 중 */
.loading { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: var(--bg); font-size: 13px; letter-spacing: .14em; color: var(--dim); transition: opacity .5s, visibility .5s; padding: 0 24px; text-align: center; }
.loading.is-done { opacity: 0; visibility: hidden; }

@media (max-width: 760px) {
  .rbar--top { height: 52px; grid-template-columns: auto 1fr auto; }
  .rbar__back span:last-child { display: none; }
  .rbar__title { max-width: 100%; font-size: 13px; }
  .panel { top: auto; left: 0; right: 0; width: auto; max-height: 78vh; border: 0; border-top: 1px solid var(--hair); }
  .panel--set, .panel--toc { left: 0; right: 0; }
}
@media (prefers-reduced-motion: reduce) { .rbar, body, .loading, .mini, .rpull, .rpull svg { transition: none; } }

/* 소리 막대(오디오북, 11/2 2판): PC는 글 아래 가운데 떠 있는 막대, 휴대폰은 아래 끝에 붙음. 읽기 막대가 열리면 그 안에 함께 놓임 */
:root { --au-h: 64px; --au-gap: 16px; }
.tool--au { width: auto; min-width: 44px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; letter-spacing: .04em; }
.tool--au[hidden] { display: none; }
.tool--au[aria-pressed="true"] { color: var(--seal); }
.tool--au[aria-pressed="true"] svg { fill: none; stroke: var(--seal); }
.au { position: fixed; z-index: 22; left: 50%; bottom: calc(var(--au-gap) + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(680px, calc(100% - 32px)); height: var(--au-h);
  background: var(--panel); border: 1px solid var(--hair); box-shadow: 0 8px 28px rgba(0, 0, 0, .1); }
.au[hidden] { display: none; }
/* 듣는 동안 아래 읽기 막대·작은 진도 글은 숨김(소리 막대가 대신함). 알림 글만 소리 막대 위에 잠깐 */
body.is-listen .rbar--bottom { display: none; }
body.is-listen .rpull--bottom { bottom: calc(var(--au-h) + var(--au-gap) + 6px + env(safe-area-inset-bottom)); visibility: hidden; }
body.is-listen .rpull--bottom .mini.is-toast { visibility: visible; opacity: 1; }
.au__row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; height: 100%; padding: 0 8px; }
.au__seek { position: absolute; left: 0; right: 0; top: -9px; width: 100%; height: 18px; margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; --p: 0%; }
.au__seek::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right, var(--seal) var(--p), var(--hair) var(--p)); }
.au__seek::-moz-range-track { height: 2px; background: var(--hair); }
.au__seek::-moz-range-progress { height: 2px; background: var(--seal); }
.au__seek::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -5px; border-radius: 50%; background: var(--seal); border: 0; }
.au__seek::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--seal); }
.au__ctl { display: flex; align-items: center; gap: 2px; }
.au__info { min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.au__chap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.au__time { color: var(--dim); font-size: 12px; letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.au__end { display: flex; align-items: center; gap: 2px; }
.au__btn { position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--fg); cursor: pointer; border-radius: 50%; }
.au__btn:hover { background: var(--hair); }
.au__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* 재생 단추만 꽉 찬 원: 가장 먼저 눈에 들어오게 */
.au__pp { width: 46px; height: 46px; background: var(--on); color: var(--onfg); }
.au__pp:hover { background: var(--on); opacity: .88; }
.au__pp svg { width: 20px; height: 20px; }
.au__pp .i-play { fill: currentColor; stroke: none; transform: translateX(1px); }
.au__pp .i-pause { stroke-width: 2.2; }
.au__pp .i-pause, .au.is-playing .au__pp .i-play { display: none; }
.au.is-playing .au__pp .i-pause { display: block; }
.au__skip b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -44%); font-size: 8.5px; font-weight: 600; letter-spacing: -.02em; }
.au__close { color: var(--dim); }
.au__close svg { width: 18px; height: 18px; }
.au__rate { flex: none; min-width: 50px; height: 32px; padding: 0 8px; border: 1px solid var(--hair); background: none; color: var(--fg); font: inherit; font-size: 12.5px; font-variant-numeric: tabular-nums; cursor: pointer; }
.au__rate:hover { border-color: var(--dim); }
/* 손으로 넘긴 뒤 두 갈래: 듣는 곳으로 / 이 쪽부터 듣기 */
.au__mid { min-width: 0; }
.au__chips { display: flex; gap: 8px; white-space: nowrap; }
#au.is-away .au__info { display: none; }
.au__chips[hidden] { display: none; }
.au__chip { min-height: 36px; padding: 0 14px; border: 1px solid var(--dim); background: var(--panel); color: var(--fg); font: inherit; font-size: 13px; cursor: pointer; }
.au__chip--main { border-color: var(--seal); }
.au__chip:hover { border-color: var(--fg); }
/* 불러오는 중, 브라우저가 막아 눌러 달라고 할 때 */
.au__pp.is-load svg { opacity: .3; }
.au__pp.is-load::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--onfg); animation: auSpin .9s linear infinite; }
@keyframes auSpin { to { transform: rotate(360deg); } }
.au__pp.is-wait { animation: auWait 1.4s ease-in-out infinite; }
@keyframes auWait { 50% { box-shadow: 0 0 0 7px rgba(210, 39, 29, .22); } }
@media (max-width: 760px) {
  :root { --au-gap: 0px; --au-h: 62px; }
  .au { left: 0; right: 0; transform: none; width: auto; height: calc(var(--au-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); border-width: 1px 0 0; box-shadow: none; }
  .au__row { gap: 8px; padding: 0 6px 0 4px; }
  .au__chap { display: none; }
  .au__rate { min-width: 44px; padding: 0 5px; font-size: 12px; }
  .au__close { width: 36px; }
}
@media (max-width: 600px) { .tool--au .tool__t { display: none; } .tool--au { padding: 0; } }
@media (max-width: 360px) { .au__btn { width: 40px; } .au__pp { width: 42px; height: 42px; } .au__close { width: 30px; } .au__time { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { .au__pp.is-load::after { animation-duration: 2.4s; } .au__pp.is-wait { animation: none; } }
/* 빠르기 목록(3판): 단추 위로 열림 */
.au__ratebox { position: relative; }
.au__rates { position: absolute; right: 0; bottom: calc(100% + 12px); z-index: 2; min-width: 112px; margin: 0; padding: 6px 0; list-style: none; background: var(--panel); border: 1px solid var(--hair); box-shadow: 0 8px 28px rgba(0, 0, 0, .14); }
.au__rates[hidden] { display: none; }
.au__rates button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 40px; padding: 0 16px; border: 0; background: none; color: var(--fg); font: inherit; font-size: 13.5px; font-variant-numeric: tabular-nums; text-align: left; cursor: pointer; }
.au__rates button:hover, .au__rates button:focus-visible { background: var(--hair); outline: none; }
.au__rates button[aria-selected="true"] { color: var(--seal); }
.au__rates button[aria-selected="true"]::after { content: ""; width: 8px; height: 8px; background: var(--seal); }
/* 4판: 문장 앞뒤 단추, 잠들기 타이머, 진도 막대의 듣는 자리 */
.au__skip svg { width: 18px; height: 18px; fill: currentColor; stroke: currentColor; stroke-width: 1.4; }
.au__sleep { display: inline-flex; align-items: center; gap: 4px; min-width: 36px; height: 32px; padding: 0 8px; border: 1px solid transparent; background: none; color: var(--dim); font: inherit; font-size: 12px; font-variant-numeric: tabular-nums; cursor: pointer; }
.au__sleep svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.au__sleep:hover { color: var(--fg); }
.au__sleep.is-on { color: var(--seal); border-color: var(--hair); }
.au__sleep span:empty { display: none; }
@media (max-width: 760px) { .au__sleep { min-width: 32px; padding: 0 5px; } }
@media (max-width: 360px) { .au__time span + span, .au__time { font-size: 10.5px; } .au__sleep { padding: 0 3px; } }
/* 5판: 글을 가리지 않게 */
.au__book { color: var(--dim); }
@media (min-width: 761px) {
  /* 평소 읽기의 아래 막대를 한 줄로: 아까 자리 · 장 · 진도 막대 · 남은 시간 · % · 위치. 높이 56px = 글 아래 여백 안 */
  .rbar--bottom { display: flex; align-items: center; gap: 18px; height: calc(56px + env(safe-area-inset-bottom)); padding: 0 clamp(16px, 3vw, 40px) env(safe-area-inset-bottom); }
  .rbar--bottom .hist { flex: none; gap: 6px; }
  .rbar--bottom .hist__btn { margin: 0; }
  .rbar--bottom .timeline { flex: 1; min-width: 160px; }
  .rbar--bottom .status { flex: 0 1 auto; min-width: 0; max-width: 48%; margin: 0; }
  .rbar--bottom .status__chap { flex: 0 1 auto; max-width: 240px; }
}
@media (max-width: 760px) {
  .au__book { display: none; }
  /* 손으로 넘긴 뒤: 재생 · 두 갈래 · 끄기만 */
  #au.is-away .au__skip, #au.is-away .au__ratebox { display: none; }
  .au__chips { gap: 6px; }
  .au__chip { min-height: 36px; padding: 0 10px; font-size: 12.5px; }
}
@media (max-width: 360px) { .au__chip { padding: 0 7px; font-size: 12px; } }
@media (max-width: 760px) {
  /* 휴대폰 평소 읽기의 아래 막대도 한 줄(52px = 글 아래 여백): 아까 자리 · 진도 막대 · % · 위치. 장·남은 시간은 막대를 닫았을 때 아래 작은 글로 */
  .rbar--bottom { display: flex; align-items: center; gap: 10px; height: calc(52px + env(safe-area-inset-bottom)); padding: 0 14px env(safe-area-inset-bottom); }
  .rbar--bottom .hist { flex: none; gap: 4px; }
  .rbar--bottom .hist__btn { margin: 0; padding: 5px 8px; font-size: 12px; }
  .rbar--bottom .timeline { flex: 1; min-width: 90px; }
  .rbar--bottom .status { flex: none; margin: 0; gap: 8px; }
  .rbar--bottom .status__chap, .rbar--bottom .status__left { display: none; }
}
/* 6판: 휴대폰 작은 막대 + 올라오는 판, 낮은 화면 */
.au__more { display: none; color: var(--dim); }
.aus { position: fixed; inset: 0; z-index: 32; background: rgba(0, 0, 0, .3); display: flex; align-items: flex-end; }
.aus[hidden] { display: none; }
.aus__panel { width: 100%; padding: 6px 18px calc(18px + env(safe-area-inset-bottom)); background: var(--panel); border-top: 1px solid var(--hair); animation: ausUp .24s cubic-bezier(.2, .7, .1, 1); }
@keyframes ausUp { from { transform: translateY(40px); opacity: 0; } }
.aus__grab { display: flex; justify-content: center; align-items: center; width: 100%; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; }
.aus__grab i { width: 40px; height: 4px; border-radius: 2px; background: var(--hair); }
.aus__chap { margin: 4px 0 14px; font-size: 14px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aus__seek { display: block; width: 100%; height: 28px; margin: 0; background: none; -webkit-appearance: none; appearance: none; --p: 0%; }
.aus__seek::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(to right, var(--seal) var(--p), var(--hair) var(--p)); }
.aus__seek::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7.5px; border-radius: 50%; background: var(--seal); border: 0; }
.aus__seek::-moz-range-track { height: 3px; background: var(--hair); }
.aus__seek::-moz-range-progress { height: 3px; background: var(--seal); }
.aus__seek::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--seal); }
.aus__times { display: flex; justify-content: space-between; margin-top: 2px; font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }
.aus__ctl { display: flex; justify-content: space-between; align-items: center; max-width: 340px; margin: 14px auto 18px; }
.aus__ctl .au__btn { width: 48px; height: 48px; }
.aus__pp { width: 64px !important; height: 64px !important; background: var(--on); color: var(--onfg); }
.aus__pp svg { width: 26px; height: 26px; }
.aus .i-pause, .aus.is-playing .i-play { display: none; }
.aus.is-playing .i-pause { display: block; }
.aus__row { padding: 12px 0; border-top: 1px solid var(--hair); }
.aus__k { display: block; margin-bottom: 9px; font-size: 12.5px; letter-spacing: .06em; color: var(--dim); }
.aus__seg { display: flex; border: 1px solid var(--hair); }
.aus__seg button { flex: 1 1 0; min-width: 0; min-height: 42px; padding: 0 2px; border: 0; border-right: 1px solid var(--hair); background: none; color: var(--fg); font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; }
.aus__seg button:last-child { border-right: 0; }
.aus__seg button[aria-checked="true"] { background: var(--on); color: var(--onfg); }
.aus__off { display: block; width: 100%; min-height: 46px; margin-top: 6px; border: 1px solid var(--hair); background: none; color: var(--fg); font: inherit; font-size: 14px; cursor: pointer; }
@media (max-width: 760px) {
  /* 작은 막대: 재생 · 장/시간 · 이전·다음 문장 · 더 보기. 빠르기·타이머·끄기는 판으로 */
  .au__end { display: none; }
  .au__more { display: grid; width: 40px; }
  .au__row { grid-template-columns: auto 1fr auto auto; }
  .au__ctl { order: 0; }
  .au__ctl #auBack, .au__ctl #auFwd { order: 2; }
  .au__ctl { display: contents; }
  #auPlay { order: 0; grid-column: 1; }
  .au__mid { order: 1; grid-column: 2; }
  #auBack { grid-column: 3; } #auFwd { grid-column: 4; }
  .au__more { grid-column: 5; }
  .au__row { grid-template-columns: auto 1fr auto auto auto; gap: 4px; }
  .au__info { cursor: pointer; padding-left: 6px; }
  .au__chap { display: block; font-size: 13px; }
  #au.is-away .au__skip { display: none; }
}
@media (max-width: 380px) { .aus__seg button { font-size: 12px; } .aus__panel { padding-left: 14px; padding-right: 14px; } }
/* 낮은 화면(가로 휴대폰 등): 막대·여백을 줄여 글자리 확보 */
@media (max-height: 520px) {
  :root { --au-h: 50px; --au-gap: 6px; }
  .au__pp { width: 38px; height: 38px; }
  .au__btn { width: 38px; height: 38px; }
  .au__chap { display: none; }
  .aus__panel { max-height: 92vh; overflow-y: auto; }
  .aus__ctl { margin: 6px auto 8px; }
  .aus__row { padding: 8px 0; }
}

@media (max-width: 760px) {
  /* 작은 막대 칸 배치(위 규칙을 정리): 재생 | 장·시간 | 이전 문장 | 다음 문장 | 더 보기 */
  .au__row { grid-template-columns: auto minmax(0, 1fr) auto auto auto; gap: 4px; padding: 0 6px; }
  .au__ctl { display: contents; }
  #auPlay { grid-area: 1 / 1; } .au__mid { grid-area: 1 / 2; } #auBack { grid-area: 1 / 3; } #auFwd { grid-area: 1 / 4; } .au__more { grid-area: 1 / 5; }
  #au.is-away .au__mid { grid-column: 2 / 5; }
}
/* 판 손잡이: 보이는 막대는 작게, 누르는 자리는 손가락 크기(44px) */
.aus__grab { height: 44px; margin: -6px 0 -10px; }
/* 판의 15초 단추: 화살표는 선으로(채우면 뭉개짐) */
.aus__ctl #ausBack15 svg, .aus__ctl #ausFwd15 svg { fill: none; stroke-width: 1.6; width: 26px; height: 26px; }
.aus__ctl #ausBack15 b, .aus__ctl #ausFwd15 b { font-size: 9px; }
/* 7판 문장 앞뒤. PC = 네모 글자 단추「‹ 이전 문장 / 다음 문장 ›」(빠르기 상자와 같은 선) */
.au__sent { width: auto; height: 34px; padding: 0 11px 0 8px; border: 1px solid var(--hair); border-radius: 0; font: inherit; font-size: 12.5px; color: var(--fg); white-space: nowrap; }
#auFwd.au__sent { padding: 0 8px 0 11px; }
.au__sent:hover { background: none; border-color: var(--dim); }
.au__sent .au__q { display: none; }
.au__lbl { display: inline-flex; align-items: center; gap: 3px; }
.au__lbl svg { width: 14px; height: 14px; stroke-width: 1.9; }
/* 휴대폰 작은 막대 = 동그라미 화살표 안에 따옴표(15초 단추와 같은 그림 말: 한 문장 되돌리기·건너뛰기) */
@media (max-width: 760px) {
  .au__sent, #auFwd.au__sent { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; }
  .au__sent:hover { background: var(--hair); }
  .au__sent .au__lbl { display: none; }
  .au__sent .au__q { display: block; width: 27px; height: 27px; stroke-width: 1.5; }
  #au.is-away .au__sent { display: none; }
}
@media (max-width: 360px) { .au__sent, #auFwd.au__sent { width: 40px; } }
.au__q .qd { fill: currentColor; stroke: none; }
.au__q .qt { stroke-width: 1.45; }
/* 올리는 판: 맨 위 장 이름 + 듣기 끄기(엄지에서 먼 자리라 잘못 누를 일이 적음), 맨 아래 이전·다음 문장 */
.aus__head { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; }
.aus__head .aus__chap { flex: 1; min-width: 0; margin: 0; text-align: left; }
.aus__head .aus__off { flex: none; width: auto; min-height: 40px; margin: 0; padding: 0 12px; font-size: 13px; color: var(--dim); }
.aus__ctl { max-width: 260px; margin: 16px auto 14px; }
.aus__sents { display: flex; gap: 8px; }
.aus__s { flex: 1 1 0; min-width: 0; min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 4px 8px; border: 1px solid var(--hair); background: none; color: var(--fg); font: inherit; font-size: 14.5px; line-height: 1.25; text-align: center; cursor: pointer; }
.aus__s svg { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.aus__s:active { background: var(--hair); }
@media (max-width: 380px) { .aus__s { font-size: 13.5px; padding: 4px 6px; } }
@media (max-height: 520px) { .aus__ctl { margin: 6px auto 8px; } .aus__s { min-height: 46px; } }

/* 잠들기 칸: '이 장 끝까지'·'End of chapter'가 좁은 휴대폰에서 잘리지 않게 글자만큼 넓히고 두 줄까지 */
#ausSleeps button { flex: 1 1 auto; white-space: normal; line-height: 1.15; padding: 2px 6px; }
/* 두 줄일 땐 둘 다 단어마다 줄을 나눔: Previous / sentence, Next / sentence */
.aus__sents.is-2 .aus__s span { width: min-content; }
.aus__s span { word-break: keep-all; }
/* AI 표시(11/4, 낭독 목소리 Supertonic F1 이용 조건: 기계로 만든 소리임을 밝힘. 이름은 관장님이 정한 'AI 도슨트 누리')
   PC = 막대 시간 옆 작고 흐린 글자, 휴대폰 = 막대에 자리가 없어 올라오는 판의 시간 줄 가운데 */
.au__ai { margin-left: 10px; font-size: 11px; letter-spacing: .02em; opacity: .85; white-space: nowrap; }
@media (max-width: 760px) { .au__ai { display: none; } }
.aus__ai { font-size: 11px; letter-spacing: .02em; opacity: .85; }

/* LibriVox 사람 낭독(11/4 밤): AI 표시 자리에 낭독자 '낭독 ○○ (LibriVox)'. 이름이 길면 줄여 끝을 …(마우스를 올리면 전체),
   앞뒤 단추는 문장 대신 15초라 아이콘 안의 따옴표를 뺌(둥근 화살표만) */
#au.is-lv .au__ai { display: inline-block; max-width: 24em; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
@media (max-width: 760px) { #au.is-lv .au__ai { display: none; } }
.aus__ai { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 8px; }
#au.is-lv .au__q .qd, #au.is-lv .au__q .qt { display: none; }