html { width: 100%; overflow-x: clip; touch-action: pan-y; }
body { width: 100%; min-width: 0; overflow-x: clip; }
/* The books' words are not picked up and carried off: nothing on screen is selected, held for a copy menu or dragged
   away, except in the fields where one types (client/dom.js stops copying too). */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, select, [contenteditable="true"] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
img { -webkit-user-drag: none; }
input { font: inherit; color: inherit; }
button, select, input { touch-action: manipulation; }
button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid #b3c8a6; outline-offset: 3px; }
button:disabled { cursor: default; opacity: .5; }
[hidden] { display: none !important; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.text-actions { margin-top: 12px; }
.button.secondary { min-height: 42px; font-size: 12px; }
.server-status { color: var(--green-dark); font-size: 12px; line-height: 1.6; }
.server-status.error { color: var(--danger); }
.server-status:empty { display: none; }
.connection { padding: 18px; margin-bottom: 16px; }
.connection h2 { font-size: 17px; margin: 0; }
.connection p { font-size: 12px; color: var(--muted); }
.connection form { display: flex; gap: 8px; }
.connection input { min-width: 0; width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.connection button { flex-shrink: 0; }
.photo-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.photo-item { aspect-ratio: auto; overflow: visible; border: 0; background: transparent; }
.photo-item img { display: block; height: 116px; border-radius: 12px; border: 1px solid var(--line); }
.photo-number { top: 87px; bottom: auto; }
.remove-photo { width: 32px; height: 32px; }
.photo-order { display: flex; justify-content: space-between; gap: 3px; margin-top: 5px; }
.photo-order button { border: 1px solid var(--line); border-radius: 8px; min-width: 40px; min-height: 38px; background: var(--card); }
.photo-state { margin: 5px 0; font-size: 10px; color: var(--green-dark); }
.photo-state.error { color: var(--danger); }
.field-label { display: block; margin: 15px 0 8px; font-size: 11px; color: var(--muted); }
.title-input { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--field); font-size: 14px; }
.direction-card { margin-top: 20px; padding: 16px; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--soft); }
.direction-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
/* Folded unless opened (the choice is remembered): the heading is the only line shown. */
summary.direction-heading { cursor: pointer; list-style: none; }
summary.direction-heading::-webkit-details-marker { display: none; }
summary.direction-heading::after { content: '▾'; margin-left: 6px; color: var(--muted); }
.direction-card[open] > summary.direction-heading { margin-bottom: 10px; }
.direction-card[open] > summary.direction-heading::after { content: '▴'; }
summary.direction-heading .ai-badge { margin-left: auto; }
.direction-heading .eyebrow { font-size: 11px; letter-spacing: 0; margin: 0; }
.ai-badge { font-size: 10px; background: var(--soft-2); padding: 4px 7px; border-radius: 6px; color: var(--badge-ink); }
#direction-summary { font-size: 12px; line-height: 1.8; margin: 9px 0 13px; overflow-wrap: anywhere; }
.voice-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.voice-controls label { font-size: 11px; color: var(--muted-2); }
.voice-controls select { min-height: 40px; max-width: 160px; font-size: 12px; }
.reading-controls { margin-top: 14px; }
/* In the listening settings: one setting per row, label on the left, under a small group title. */
.direction-card .voice-controls { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); align-items: center; gap: 8px 14px; }
.direction-card .voice-controls select, .direction-card .voice-controls #sleep-select { width: 100%; max-width: none; }
.direction-card .voice-controls label { font-size: 13px; }
.controls-title { grid-column: 1 / -1; margin-top: 4px; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--green-dark); }
/* The settings' groups (재생, 글자, 학습) set apart: room and a fine line between them, a little under each title. */
.direction-card .voice-controls + .voice-controls { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.direction-card .controls-title { margin: 0 0 4px; }
body.webbook .direction-card .reading-controls { margin-top: 0; padding-top: 0; border-top: 0; }
.player { gap: 10px; }
.play-toggle { width: 48px; height: 48px; }
audio { width: 100%; height: 44px; margin-top: 12px; }
.library-card { padding: 19px; margin-top: 20px; }
.library-empty { padding: 20px 8px; text-align: center; color: var(--muted); font-size: 12px; }
.library-item { display: flex; align-items: center; gap: 12px; padding: 15px 0; border-top: 1px solid var(--line); }
.library-open { flex: 1; min-width: 0; border: 0; background: transparent; text-align: left; padding: 5px 0; cursor: pointer; }
.library-open strong { display: block; overflow-wrap: anywhere; font-size: 14px; font-weight: 600; }
.library-open span { display: block; margin-top: 7px; font-size: 11px; color: var(--muted); }
/* One size for every number (1 or 12): a roomy rounded square. */
.order-badge { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 28px; box-sizing: border-box; border-radius: 9px; background: var(--number, #7f9c86); color: #fff; font-size: 14px; font-weight: 700; line-height: 1; vertical-align: middle; font-variant-numeric: tabular-nums; }
.library-open { display: flex; align-items: center; gap: 12px; }
.library-open .order-badge { display: inline-flex; margin: 0; width: 40px; height: 34px; border-radius: 11px; font-size: 16px; color: #fff; }
.library-open .reading-thumb { position: relative; flex: none; width: 60px; height: 42px; margin: 0; border-radius: 10px; overflow: hidden; background: var(--soft); }
.library-open .reading-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.library-open .reading-thumb.empty { visibility: hidden; }
.library-open .library-words { display: block; flex: 1; min-width: 0; margin: 0; font-size: inherit; color: inherit; }
.library-words .library-unnamed { color: var(--muted); font-weight: 500; }
.library-open .library-progress { display: inline; margin: 0; }
.nav-title .order-badge { margin-right: 2px; font-size: 13px; }
.library-delete { min-width: 44px; min-height: 44px; border: 0; border-radius: 10px; background: var(--warm); color: var(--warm-ink); font-size: 11px; }
.book-capture { padding: 19px; margin: 16px 0; }
.book-select { width: 100%; max-width: none; min-height: 46px; font-size: 14px; padding: 10px; }
#book-form button, #rename-form button { margin-top: 12px; }
.book-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 17px; }
.book-list .library-empty { grid-column: 1/-1; }
.book-list .empty-trash { grid-column: 1/-1; justify-self: end; margin: 0; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
/* "＋ 새 책" as the first card of the bookshelf (client/library.js renderLibrary). */
.book-list #add-book { align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 110px; margin: 0; padding: 14px 12px; border: 1.5px dashed var(--green); border-radius: 15px; background: color-mix(in srgb, var(--green) 6%, transparent); color: var(--green-dark); font-size: 15px; font-weight: 700; box-shadow: none; cursor: pointer; transition: background .15s, transform .15s; }
/* A big round plus that asks to be tapped. */
.book-list #add-book::before { content: '+'; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--green); color: #fff; font-size: 34px; font-weight: 300; line-height: 1; box-shadow: 0 6px 16px color-mix(in srgb, var(--green) 35%, transparent); }
.book-list #add-book:hover, .book-list #add-book:focus-visible { background: color-mix(in srgb, var(--green) 12%, transparent); transform: translateY(-1px); }
.book-list #add-book[aria-expanded="true"] { border-style: solid; background: var(--soft); }
.book-list #add-book[aria-expanded="true"]::before { content: '×'; background: var(--muted-2); box-shadow: none; }
/* A book's title and the labels under it (classic, translated, shared), on a band across the bottom of the book. */
.book-band { display: block; position: relative; z-index: 1; padding: 10px 10px 10px 21px; }
.book-band strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 15px; line-height: 1.4; word-break: keep-all; overflow-wrap: anywhere; }
.book-badges { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
.book-badges:empty { display: none; }
/* Solid labels with white letters, clear over any picture and in either theme. */
.book-badges > span { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 7px; border-radius: 999px; color: #fff; font-size: 10px; font-weight: 700; line-height: 1.7; }
.book-badges > .classic-badge { background: #4f7d5c; }
.book-badges > .family-badge { background: #a8673a; }
.book-badges > .translated-badge { background: #3d5a80; }
.book-badges > .serial-badge, .serial-badge { background: #8a4f9e; }
.showcase-row .serial-badge, .showcase-row .mine-badge { display: inline-block; padding: 0 7px; border-radius: 999px; color: #fff; font-size: 10px; font-weight: 700; line-height: 1.7; vertical-align: middle; }
.book-detail { display: block; overflow: hidden; margin-top: 5px; font-size: 11px; line-height: 1.5; white-space: nowrap; text-overflow: ellipsis; color: var(--ink-soft); }
/* The bookshelf's books look like books: a spine down the left, the pages' edges showing at the side and bottom, and
   each leaning a little until it is touched, when it stands up straight. */
.book-list { gap: 16px 14px; padding: 4px 6px 8px 2px; }
.book-open { --book-face: color-mix(in srgb, var(--field) 86%, #e9dcc3); --page-edge: color-mix(in srgb, var(--field) 62%, #e9dcc3); position: relative; border-radius: 4px 12px 12px 4px; background: var(--book-face); display: flex; flex-direction: column; justify-content: flex-start; aspect-ratio: 3 / 4; min-height: 0; padding: 0; overflow: hidden; border: 1px solid var(--line); text-align: left; cursor: pointer; transform: rotate(var(--lean, -1.5deg)); transform-origin: 50% 100%;
  box-shadow: 1px 1px 0 var(--page-edge), 2px 2px 0 var(--line-strong), 3px 3px 0 var(--page-edge), 4px 4px 0 var(--line-strong), 5px 5px 0 var(--page-edge), 6px 6px 0 var(--line-strong), 7px 10px 16px rgba(0, 0, 0, .16);
  transition: transform .28s cubic-bezier(.2, .8, .3, 1.2), box-shadow .28s ease; }
.book-open::after { content: ''; position: absolute; z-index: 2; inset: 0 auto 0 0; width: 12px; border-radius: 4px 0 0 4px; background: linear-gradient(90deg, rgba(0, 0, 0, .2), rgba(255, 255, 255, .18) 45%, rgba(0, 0, 0, .1) 80%, rgba(0, 0, 0, .18)); pointer-events: none; }
.book-open.selected { --book-face: color-mix(in srgb, var(--soft) 84%, #e9dcc3); border-color: var(--line-strong); }
.book-open.has-cover { justify-content: flex-end; }
.book-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.book-open.has-cover .book-band { background: color-mix(in srgb, var(--book-face) 62%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.book-open:nth-child(4n+2) { --lean: 2deg; }
.book-open:nth-child(4n+3) { --lean: -1deg; }
.book-open:nth-child(4n) { --lean: 1.2deg; }
.book-open:hover, .book-open:focus-visible, .book-open:active, .book-open.standing { transform: rotate(0) translateY(-5px); box-shadow: 1px 1px 0 var(--page-edge), 2px 2px 0 var(--line-strong), 3px 3px 0 var(--page-edge), 4px 4px 0 var(--line-strong), 5px 5px 0 var(--page-edge), 6px 6px 0 var(--line-strong), 8px 16px 24px rgba(0, 0, 0, .22); }
@media (prefers-reduced-motion: reduce) { .book-open { transition: none; } }
#folder-detail { margin-top: 20px; border-top: 1px solid var(--line); }
#folder-title { font-size: 19px; line-height: 1.6; overflow-wrap: anywhere; }
.voice-wave { display: block; width: 100%; height: 46px; margin: 10px 0 4px; touch-action: pan-y; cursor: grab; }
.voice-wave:active { cursor: grabbing; }
.sync-status { color: var(--green-dark); }
.sync-status.error { color: var(--danger); }
.file-types { margin: 6px 0 0; color: var(--muted); font-size: 11px; }
.folder-primary { margin: 6px 0 14px; }
.share-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 6px 0 12px; padding: 14px 16px; border-radius: 16px; background: var(--warm); color: var(--warm-ink); }
.share-cta-copy { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.share-cta-copy strong { font-size: 15px; }
.share-cta-copy span { font-size: 12px; line-height: 1.5; opacity: .85; }
.share-cta > .button { flex: none; min-width: 88px; }
.share-cta #link-ready { flex-basis: 100%; }
.share-cta #link-ready .actions { margin-top: 8px; }
.folder-primary .button { width: 100%; }
/* Book management at the bottom: settings-list rows, the destructive one in red. */
.book-manage { margin-top: 16px; padding: 14px 16px 4px; border: 1px solid color-mix(in srgb, var(--green) 18%, var(--line)); border-radius: 15px; background: color-mix(in srgb, var(--green) 6%, var(--card)); }
/* The card's title stands above its rows: larger and bold; the rows, in ordinary weight, set in a little under it. */
.book-manage h3 { font-size: 17px; font-weight: 700; margin: 0; }
.book-manage > :not(summary) { margin-left: 10px; width: calc(100% - 10px); }
/* The whole card folds, like the voice card: the title row opens and closes it. */
summary.book-manage-title { display: flex; align-items: center; justify-content: space-between; min-height: 36px; padding-bottom: 10px; cursor: pointer; list-style: none; }
summary.book-manage-title::-webkit-details-marker { display: none; }
summary.book-manage-title::after { content: '▾'; color: var(--muted); }
.book-manage[open] > summary.book-manage-title::after { content: '▴'; }
.book-manage:not([open]) > summary.book-manage-title { padding-bottom: 8px; }
.manage-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 48px; padding: 12px 2px; border: 0; border-top: 1px solid var(--line); background: none; color: inherit; font: inherit; font-size: 14px; font-weight: 400; text-align: left; cursor: pointer; list-style: none; }
.manage-row::-webkit-details-marker { display: none; }
.manage-row::after { content: '›'; color: var(--muted); font-size: 18px; transition: transform .15s; }
.book-settings[open] > .manage-row::after { transform: rotate(90deg); }
.book-settings > form { padding: 2px 0 14px; }
.book-settings #rename-book { width: 100%; margin-top: 4px; }
.manage-row.danger { color: var(--danger); }
.manage-row:disabled { opacity: .5; cursor: default; }
.chapter-order { display: flex; flex-direction: column; gap: 3px; }
.chapter-order button { min-width: 36px; min-height: 32px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); }
/* Sharing folds into the book management card, opened like the settings above it. */
.book-share { padding: 12px 14px; margin: 0 0 12px; background: var(--soft); border-radius: 12px; }
.book-share h3 { font-size: 14px; margin: 0 0 12px; }
.share-option { display: flex; align-items: center; gap: 8px; min-height: 40px; font-size: 12px; line-height: 1.5; }
.share-option input { width: 18px; height: 18px; accent-color: var(--green); }
a.button { text-decoration: none; }
.camera-dialog { display: none; width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; margin: 0; padding: max(16px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom)); border: 0; background: #121c17; color: #f7f5ef; overflow: hidden; }
.camera-dialog[open] { display: block; position: fixed; inset: 0; padding: 0; }
.camera-dialog::backdrop { background: #121c17; }
.camera-top { position: absolute; z-index: 2; top: 0; left: 0; right: 0; padding: max(18px,env(safe-area-inset-top)) 16px 35px; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: linear-gradient(#000a,transparent); text-shadow: 0 1px 3px #000; }
.camera-top h2 { margin: 0; font-size: 17px; }
.camera-top span { font-size: 12px; color: #c8d6c8; }
.camera-frame { position: absolute; inset: 0; overflow: hidden; background: #080e0b; }
.camera-frame video { display: block; width: 100%; height: 100%; object-fit: contain; touch-action: none; }
.camera-frame.captured { animation: camera-flash .25s ease-out; }
@keyframes camera-flash { from { opacity: .35; } to { opacity: 1; } }
.camera-thumb { position: absolute; bottom: calc(140px + env(safe-area-inset-bottom)); left: 16px; width: 54px; height: 72px; object-fit: cover; border: 2px solid white; border-radius: 8px; }
.camera-note { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; margin: 0; padding: 20px 16px calc(100px + env(safe-area-inset-bottom)); color: #fff; background: linear-gradient(transparent,#000c); font-size: 12px; line-height: 1.6; text-align: center; pointer-events: none; }
.camera-controls { position: absolute; z-index: 3; left: 0; right: 0; bottom: max(20px,env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: center; gap: 20px; }
.camera-shutter { width: 84px; height: 64px; border: 4px solid #d7e4d3; border-radius: 32px; background: #f7f5ef; color: #26362f; font-size: 17px; font-weight: 700; }
.camera-finish { min-width: 78px; height: 50px; border: 1px solid #657763; border-radius: 15px; background: #2a3b2f; color: white; font-size: 16px; }
.camera-fallback { position: absolute; z-index: 3; left: 50%; top: 45%; transform: translateX(-50%); padding: 12px 20px; border: 1px solid #657763; border-radius: 12px; background: #2a3b2f; color: white; }
@media (max-width: 600px) { input, textarea { font-size: 16px; } select, .voice-controls select, .book-select { font-size: 14px; } .app { max-width: 100%; } .connection form, .actions, .voice-controls { min-width: 0; } }
@media (max-height: 500px) { .camera-top { padding-top: 8px; } .camera-note { padding-bottom: 68px; } .camera-controls { bottom: 8px; } .camera-shutter { height: 48px; } .camera-finish { height: 44px; } .camera-thumb { bottom: 105px; height: 54px; width: 40px; } }
@media (max-width: 360px) { .app { padding-left: 14px; padding-right: 14px; } .photo-list { grid-template-columns: repeat(2,minmax(0,1fr)); } }
/* Dropdowns can be smaller than 16px: the viewport's maximum-scale=1 already stops the zoom-on-focus. */
@media (pointer: coarse) { .app { width: 100%; max-width: 100%; } input, textarea { font-size: 16px; } select, .voice-controls select, .book-select { font-size: 14px; } }
.storage-notice { margin: 12px 0; padding: 14px; border: 1px solid var(--warm-line); border-radius: 12px; background: var(--warm); font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.storage-notice[hidden] { display: none; }
.text-count { margin: 6px 0 0; text-align: right; font-size: 11px; color: var(--muted); }
.text-count.over { color: var(--danger); font-weight: 600; }
/* The whole reading (amber) and the current part (green) share one layout: label, thin bar, time on the right. */
.progress-row { display: grid; grid-template-columns: 3.6em minmax(0, 1fr) 7.8em; align-items: center; gap: 10px; margin-top: 8px; font-size: 11px; font-variant-numeric: tabular-nums; }
/* Both times (whole and part) are set alike; only their colours differ. */
.progress-row > :last-child, #chapter-time, #seek-time { font-family: inherit; font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: 0; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.progress-label { color: var(--muted); white-space: nowrap; }
.seek input { -webkit-appearance: none; appearance: none; width: 100%; min-width: 0; height: 22px; margin: 0; background: transparent; cursor: pointer; }
.seek input::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--green) var(--fill, 0%), var(--soft-2) var(--fill, 0%)); }
.seek input::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border: 0; border-radius: 50%; background: var(--green); }
.seek input::-moz-range-track { height: 4px; border-radius: 2px; background: var(--soft-2); }
.seek input::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--green); }
.seek input::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--green); }
.seek input:disabled { cursor: default; opacity: .6; }
.seek span#seek-time { color: var(--green-dark); }
.resume-card { display: flex; align-items: center; gap: 12px; width: 100%; margin: 4px 0 16px; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--soft); color: inherit; text-align: left; cursor: pointer; }
.resume-icon { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--green); color: white; font-size: 14px; }
.resume-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.resume-copy strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resume-label { font-size: 11px; font-weight: 700; color: var(--green-dark); }
.resume-icon.has-cover { width: 44px; height: 58px; border-radius: 6px; background-size: cover; background-position: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); text-shadow: 0 1px 3px rgba(0, 0, 0, .8); font-size: 16px; }
.resume-copy span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-player { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 20; display: flex; align-items: center; gap: 10px; max-width: 520px; margin: 0 auto; padding: 8px 12px 8px 8px; border: 1px solid var(--line); border-radius: 18px; background: var(--card-glass); box-shadow: 0 8px 28px rgba(40, 52, 40, .18); }
.mini-toggle { flex-shrink: 0; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--green); color: white; font-size: 15px; }
.mini-copy { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; border: 0; background: transparent; color: inherit; text-align: left; padding: 0; }
.mini-copy strong, .mini-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-copy strong { font-size: 13px; }
.mini-copy span { font-size: 11px; color: var(--muted); }
body.has-mini-player main { padding-bottom: 88px; }


@keyframes dajeong-spin { to { transform: rotate(360deg); } }
.play-toggle, .mini-toggle { position: relative; }
.play-toggle.loading, .mini-toggle.loading { color: transparent !important; opacity: 1 !important; }
.play-toggle.loading::after, .mini-toggle.loading::after { content: ''; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: dajeong-spin .8s linear infinite; }
/* A button whose work is under way: a small spinner before its label, at full strength even while disabled. */
button.working, .button.working { opacity: 1 !important; cursor: progress; }
button.working::before { content: ''; display: inline-block; flex-shrink: 0; width: 12px; height: 12px; margin-right: 7px; vertical-align: -2px; border: 2px solid rgba(127, 140, 120, .35); border-top-color: currentColor; border-radius: 50%; animation: dajeong-spin .8s linear infinite; }
.manage-row.working { justify-content: flex-start; }
.manage-row.working::after { margin-left: auto; }
.status.working::before { content: ''; display: inline-block; width: 11px; height: 11px; margin-right: 7px; vertical-align: -1px; border: 2px solid var(--line-strong); border-top-color: var(--green); border-radius: 50%; animation: dajeong-spin .8s linear infinite; }
.status.alert { color: var(--danger); font-weight: 700; }
.status.alert.working { animation: dajeong-blink 1.3s ease-in-out infinite; }
@keyframes dajeong-blink { 50% { opacity: .3; } }
.status.alert.working::before { border-color: color-mix(in srgb, var(--danger) 25%, transparent); border-top-color: var(--danger); }
@media (prefers-reduced-motion: reduce) { .play-toggle.loading::after, .mini-toggle.loading::after, .status.working::before, button.working::before { animation-duration: 2.4s; } }

.google-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; border: 1px solid #dadce0; border-radius: 12px; background: #fff; color: #3c4043; font-size: 14px; font-weight: 600; cursor: pointer; }
.google-button:disabled { opacity: .6; }
/* The plan button at the top right (an icon for the plan: client/plans.js); a tap opens the account under it: the plan,
   who is signed in, what is used, and its buttons. */
.plan-menu { position: relative; flex-shrink: 0; }
.plan-button svg { width: 17px; height: 17px; display: block; }
.plan-button[data-plan="trial"] { color: var(--muted-2); }
.plan-button[data-plan="free"], .plan-button[data-plan="basic"] { color: var(--green); border-color: var(--green); }
.plan-button[data-plan="premium"] { color: var(--warm-ink); border-color: var(--warm-line); background: var(--warm); }
.account-bar { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  width: max-content; min-width: 220px; max-width: min(300px, calc(100vw - 32px)); padding: 14px; border: 1px solid var(--line-strong); border-radius: 14px;
  background: var(--card); box-shadow: 0 10px 30px rgba(0, 0, 0, .14); font-size: 12px; text-align: left; }
.account-plan { font-size: 14px; color: var(--green-dark); }
.account-bar .account-plans { margin-top: 6px; align-self: stretch; }
.account-email { font-weight: 700; overflow-wrap: anywhere; }
.account-usage { min-width: 0; color: var(--muted); }
.account-usage.empty { color: var(--danger); font-weight: 600; }
.link-button { border: 0; background: none; padding: 4px 0; color: var(--green-dark); font-size: 12px; text-decoration: underline; cursor: pointer; }

/* Three screens: 서재 (library) → 책 (book) → 분량 (reading). */
.screen-nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 15; display: flex; align-items: center; gap: 10px; margin: 0 -4px 14px; padding: 8px 4px; background: var(--paper-glass); backdrop-filter: blur(6px); }
.nav-back { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 12px 0 8px; border: 0; border-radius: 20px; background: var(--green-dark); color: #fff; box-shadow: 0 2px 6px rgba(47, 66, 49, .22); font-size: 13px; font-weight: 600; cursor: pointer; max-width: 45%; }
.nav-back:active { transform: scale(.97); }
.nav-back span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-back span:first-child { font-size: 20px; line-height: 1; }
.nav-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
/* The bookshelf screen's three pages (client/screens.js showTab). */
.library-tabs { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 14; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 0 0 14px; padding: 4px; border-radius: 14px; background: var(--paper-glass); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px var(--line); }
.library-tabs button { min-height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--muted-2); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.library-tabs button[aria-selected="true"] { background: var(--green); color: #fff; }
.tab-page { display: none; padding: 20px 16px; overflow: hidden; }
.tab-page-title { margin: 0 0 6px; font-size: 20px; }
.tab-page .family-panel { margin: 0; padding: 0; border: 0; background: none; }
.tab-page .family-panel > summary { display: none; }
.tab-page #classics-list, .tab-page #showcase-list { max-height: none; overflow: visible; }
body:not([data-screen="library"]) .library-tabs { display: none !important; }
body[data-screen="library"][data-tab="classics"] #classics-page, body[data-screen="library"][data-tab="writers"] #writers-page { display: block; }
body[data-screen="library"]:not([data-tab="mine"]) #hero, body[data-screen="library"]:not([data-tab="mine"]) .library-card, body[data-screen="library"]:not([data-tab="mine"]) #resume-card, body[data-screen="library"]:not([data-tab="mine"]) #capture-book { display: none !important; }
body[data-screen="library"] .upload-card, body[data-screen="library"] .text-card, body[data-screen="library"] #folder-detail { display: none !important; }
body[data-screen="library"] #capture-book label[for="book-select"], body[data-screen="library"] #book-select { display: none; }
body[data-screen="book"] #hero, body[data-screen="book"] #capture-book, body[data-screen="book"] .upload-card, body[data-screen="book"] .text-card, body[data-screen="book"] #resume-card { display: none !important; }
body[data-screen="book"] .library-card > :not(#folder-detail) { display: none !important; }
body[data-screen="book"] #folder-title { display: none; }
body[data-screen="reading"] #hero, body[data-screen="reading"] #capture-book, body[data-screen="reading"] .library-card, body[data-screen="reading"] #resume-card { display: none !important; }
.status:empty { display: none; }

#capture-book { display: none !important; }
#library-title .page-count { margin-left: 6px; font-family: inherit; font-size: 12px; font-weight: 500; vertical-align: 2px; }
.library-card #book-form { margin: 4px 0 14px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--field); }
body[data-screen="book"] #folder-detail { border-top: 0; margin-top: 0; }

/* Admin cost table (only for admin accounts). */
.admin-card { display: none; }
body[data-screen="admin"] .admin-card { display: block; }
body[data-screen="admin"] #hero, body[data-screen="admin"] .library-card, body[data-screen="admin"] .upload-card, body[data-screen="admin"] .text-card, body[data-screen="admin"] #resume-card { display: none !important; }
.plan-badge { display: inline-block; white-space: nowrap; margin-left: 4px; padding: 1px 6px; border-radius: 6px; background: var(--soft-2); color: var(--badge-ink); font-size: 10px; font-weight: 600; }
.plan-badge.waiting { background: var(--warm); color: var(--warm-ink); }

body[data-screen="admin"] .admin-card { padding: 22px 18px; }
/* Compact admin table: more columns fit on a phone screen. */
.admin-card h2 { font-size: 15px; }
.admin-card .text-hint, #admin-summary { font-size: 10.5px; }
.admin-card #admin-refresh { min-height: 34px; font-size: 11px; }
/* Portrait phones: one card per account instead of a wide table. */
@media (max-width: 640px) {
                  }
.header-side { display: flex; align-items: center; gap: 8px; }
.lang-select { max-width: 96px; padding: 5px 6px; font-size: 11px; }

/* Translation: original text viewer and book badge. */
.source-text-box { margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); }
.source-text-box summary { padding: 10px 12px; font-size: 12px; color: var(--green-dark); cursor: pointer; }
.source-text { max-height: 260px; overflow: auto; padding: 0 12px 12px; font-size: 13px; line-height: 1.7; white-space: pre-wrap; color: var(--ink-soft); }
#translate-text { margin-top: 10px; }
.classic-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: var(--soft-2); color: var(--green-dark); font-size: 10px; font-weight: 600; vertical-align: 1px; }
.translated-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: #e8eef6; color: #3d5a80; font-size: 10px; font-weight: 600; vertical-align: 1px; }
.book-source-lang { width: 100%; }
#book-form select.book-source-lang, #rename-form select.book-source-lang { display: block; width: 100% !important; max-width: none; }
.translate-option { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 4px; font-size: 13px; line-height: 1.5; }
.translate-option input { margin-top: 3px; }

/* Scene illustrations and segment navigation. */
.scene-art { position: relative; margin: 14px 0 0; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 16px; background: linear-gradient(110deg, var(--soft) 30%, var(--field) 50%, var(--soft) 70%); background-size: 200% 100%; animation: art-shimmer 1.6s linear infinite; }
.scene-art img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; }
.scene-art.ready { animation: none; background: var(--soft); }
.scene-art.ready img { opacity: 1; }
.scene-art-loading { position: absolute; inset: auto 0 10px; text-align: center; font-size: 11px; color: var(--muted); }
.scene-art.ready .scene-art-loading { display: none; }
@keyframes art-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .scene-art { animation: none; } }
.segment-controls { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.seg-nav { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--green-dark); font-size: 20px; line-height: 1; cursor: pointer; }
.seg-nav:disabled { opacity: .35; cursor: default; }


/* Listening is its own screen: 분량 만들기 (photos, text) → 듣기 (style, pictures, player). */
.listen-card { display: none; padding: 20px 18px; }
body[data-screen="listen"] .listen-card { display: block; }
body[data-screen="listen"] #hero, body[data-screen="listen"] .library-card, body[data-screen="listen"] .upload-card, body[data-screen="listen"] .text-card, body[data-screen="listen"] #resume-card, body[data-screen="listen"] #capture-book { display: none !important; }
.listen-card h2 { min-width: 0; margin: 0; font-size: 17px; overflow-wrap: anywhere; }
.listen-card .direction-card { margin-top: 14px; }
/* Phones: no card around the listening screen, so the player, settings and book page (each a box of its own)
   get the full width instead of a box inside a box. */
@media (max-width: 699px) {
  body[data-screen="listen"]:not(.immersive) .listen-card { padding: 4px 0 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
  .listen-card .book-page { padding: 22px 18px 26px; }
}
.listen-open { font-size: 15px; }

/* Audio options: one collapsed menu, each action with a one-line explanation. */
.audio-tools { margin: 14px 0 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--field); }
.audio-tools summary { padding: 12px 14px; font-size: 13px; font-weight: 600; color: var(--green-dark); cursor: pointer; list-style: none; }
.audio-tools summary::-webkit-details-marker { display: none; }
.audio-tools summary::after { content: '▾'; float: right; color: var(--muted); }
.audio-tools[open] summary::after { content: '▴'; }
.audio-tool { padding: 10px 14px; border-top: 1px solid var(--line); }
.audio-tool .button { width: 100%; }
.audio-tool .text-hint { margin: 6px 2px 0; }
.audio-tool .text-hint.remake-result { color: var(--green-dark); font-weight: 600; }
.audio-tool .text-hint.remake-result.error { color: var(--danger); }

/* Full-screen listening: the picture fills the screen, the controls sit on top. */
.immersive-exit, .immersive-captions, .immersive-text, .immersive-caption { display: none; }
.player .immersive-enter { flex-basis: 100%; min-height: 38px; }
body.immersive { overflow: hidden; overscroll-behavior: none; background: #0e110e; }
/* iPhone: once a swipe ran past the end of the full-screen text it carried on to the page behind, and the text
   stopped taking swipes until the next part reset it. Keep swipes inside the text and the page itself still. */
html:has(body.immersive) { overflow: hidden; overscroll-behavior: none; }
body.immersive .immersive-text { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
body.immersive .app > *:not(.listen-card), body.immersive .screen-nav, body.immersive .mini-player { display: none !important; }
body.immersive .listen-card { position: fixed; inset: 0; z-index: 50; display: block; margin: 0; padding: 0; border: 0; border-radius: 0; background: #0e110e; }
body.immersive .listen-card > *:not(.scene-art):not(.player):not(.progress-row):not(.immersive-exit):not(.immersive-captions):not(.immersive-text):not(.immersive-caption):not(audio) { display: none !important; }
body.immersive .scene-art { position: absolute; inset: 0 0 150px; margin: 0; border-radius: 0; aspect-ratio: auto; background: #0e110e; animation: none; display: block !important; }
body.immersive .scene-art img { object-fit: contain; }
body.immersive .immersive-exit { display: block; position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); right: 12px; z-index: 3; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .85); color: #222; font-size: 18px; cursor: pointer; }
/* Full-screen subtitles and text sized to the screen: a phone's 18px, growing with the screen's width and height up
   to 46px on a large one (times the reader's own text size), and never in lines too long to follow. */
body.immersive { --caption-size: clamp(18px, calc(1vw + 1.5vh), 46px); }
body.immersive.no-art .immersive-text { display: block; position: absolute; inset: calc(64px + env(safe-area-inset-top, 0px)) 0 160px; margin: 0; padding: 0 max(24px, calc((100% - 38em) / 2)); overflow-y: auto; color: #f1efe6; font-family: var(--book-font); font-size: calc(var(--caption-size) * 1.15 * var(--book-scale, 1)); line-height: calc(1.8 * var(--book-leading, 1)); white-space: pre-wrap; }
body.immersive.no-art .scene-art { display: none !important; }
/* Subtitles: the part's text over the bottom of the picture, switched with the 자막 button (and, with no picture,
   the full-screen text itself). */
/* The subtitles' button and the subtitles sit inside the picture as shown (client/screens.js placeOverArt sets
   --art-top/right/bottom/left/height), never in the bands a large screen leaves around it. */
body.immersive .immersive-captions { display: block; position: absolute; top: max(calc(10px + env(safe-area-inset-top, 0px)), calc(var(--art-top, 0px) + 10px)); right: max(62px, calc(var(--art-right, 0px) + 10px)); z-index: 3; height: 42px; padding: 0 16px; border: 0; border-radius: 21px; background: rgba(255, 255, 255, .85); color: #222; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
body.immersive .immersive-captions[aria-pressed="false"] { background: rgba(255, 255, 255, .4); color: #555; text-decoration: line-through; }
body.immersive:not(.no-art) .immersive-text { display: none; }
body.immersive.captions-on:not(.no-art) .immersive-caption { display: block; position: absolute; left: calc(var(--art-left, 0px) + 20px); right: calc(var(--art-right, 0px) + 20px); bottom: max(calc(150px + env(safe-area-inset-bottom, 0px)), calc(var(--art-bottom, 0px) + 18px)); z-index: 1; margin: 0; color: #fff; text-align: center; max-width: 34em; margin-inline: auto; font-family: var(--book-font); font-size: calc(var(--caption-size) * var(--book-scale, 1)); line-height: 1.5; font-weight: 600; text-shadow: 0 0 2px #000, 0 1px 3px #000, 0 0 8px rgba(0, 0, 0, .8); pointer-events: none; transition: bottom .5s ease; }
body.immersive.no-art:not(.captions-on) .immersive-text { display: none; }
body.immersive .player { position: absolute; left: 12px; right: 12px; bottom: calc(52px + env(safe-area-inset-bottom, 0px)); z-index: 2; background: var(--card-glass); }
body.immersive .player .immersive-enter, body.immersive #stop-reading { display: none; }
body.immersive .seek { position: absolute; left: 20px; right: 20px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 2; margin: 0; }
body.immersive .seek span#seek-time { color: #ddd; }
body.immersive .progress-label { color: #bbb; }
body.immersive .listen-card > .progress-row { display: grid !important; }

/* Narrator faces: a row to pick from under the voice lists, and the narrator now reading. */
.narrator-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 12px 6px; margin: 10px 0 4px; padding: 4px 2px; }
.narrator-choice { display: grid; justify-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.narrator-face { display: block; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px transparent; transition: box-shadow .15s, transform .15s; }
.narrator-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.narrator-choice[aria-checked="true"] .narrator-face { box-shadow: 0 0 0 3px var(--green); transform: scale(1.04); }
.narrator-name { font-size: 10px; line-height: 1.25; color: var(--muted); text-align: center; word-break: keep-all; }
.narrator-choice[aria-checked="true"] .narrator-name { color: var(--green-dark); font-weight: 700; }
.narrator-choice:disabled { opacity: .35; cursor: not-allowed; }
.narrator-now { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.narrator-now .book-settings-summary { margin: 0; }
.narrator-face-large { flex-shrink: 0; width: 44px; height: 44px; }

/* Voice and illustration style are book settings: the listening screen only shows them. */
#book-form select.book-choice, #rename-form select.book-choice, #add-art-form select.book-choice { display: block; width: 100% !important; max-width: none; }
.voice-controls label[for="voice-select"], #voice-select, .voice-controls label[for="art-select"], #art-select, .art-hint { display: none !important; }
.book-settings-summary { margin: 4px 0 0; font-size: 12px; font-weight: 600; color: var(--green-dark); }
.player { flex-wrap: wrap; }
.player .immersive-enter { order: 9; flex: 1 0 100%; }

/* Book text reads like a printed book: a Myeongjo (serif) face; app controls keep the UI font. */
:root { --book-font: 'Noto Serif KR', 'Nanum Myeongjo', 'AppleMyungjo', 'Batang', 'Noto Serif CJK KR', serif; }

/* In-app browsers (KakaoTalk etc.) can't do Google sign-in: send people to a real browser. */
.inapp-notice { margin: 10px 0; padding: 12px 14px; border: 1px solid var(--warm-line); border-radius: 12px; background: var(--warm); color: var(--warm-ink); font-size: 13px; line-height: 1.6; }
.inapp-notice p { margin: 0 0 10px; }

.next-chapter { order: 10; flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 6px; }
.next-chapter[hidden] { display: none !important; }
.next-chapter .button { flex: 1 0 100%; }
.next-chapter .text-hint { margin: 0; }
body.immersive .next-chapter { position: absolute; left: 12px; right: 12px; bottom: calc(150px + env(safe-area-inset-bottom, 0px)); z-index: 3; padding: 10px; border-radius: 14px; background: var(--card-glass); }

/* Whole-reading progress above the part's seek bar. */
.chapter-bar { height: 4px; border-radius: 2px; background: var(--soft-2); overflow: hidden; }
.chapter-bar span { display: block; height: 100%; width: 0; background: var(--green); transition: width .4s linear; }
body.immersive .progress-row.whole { position: absolute; left: 20px; right: 20px; bottom: calc(44px + env(safe-area-inset-bottom, 0px)); z-index: 2; margin: 0; }
body.immersive .chapter-bar { background: rgba(255, 255, 255, .25); }
.library-progress { color: var(--green-dark); font-weight: 600; }
#sleep-select { min-height: 40px; max-width: 160px; font-size: 12px; }

.start-guide { grid-column: 1 / -1; padding: 16px; border: 1px dashed var(--line-strong); border-radius: 14px; background: var(--soft); }
.start-guide strong { font-size: 14px; }
.start-guide ol { margin: 10px 0 14px; padding-left: 20px; font-size: 13px; line-height: 1.8; color: var(--ink-soft); }
.start-guide .button { width: 100%; }


.art-toggle { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 13px; cursor: pointer; }
.art-toggle[hidden] { display: none; }

/* Landscape full screen: the picture fills the screen; controls float see-through and fade away while playing. */
@media (orientation: landscape) {
  body.immersive .scene-art { inset: 0; }
  body.immersive.no-art .immersive-text { bottom: 24px; }
  body.immersive .player { background: var(--card-veil); backdrop-filter: blur(6px); }
  body.immersive .immersive-exit, body.immersive .immersive-captions { background: rgba(255, 255, 255, .55); }
  body.immersive .player, body.immersive .progress-row, body.immersive .immersive-exit, body.immersive .immersive-captions { transition: opacity .5s ease; }
  body.immersive.controls-idle .player, body.immersive.controls-idle .progress-row, body.immersive.controls-idle .immersive-exit, body.immersive.controls-idle .immersive-captions { opacity: 0; pointer-events: none; }
  body.immersive.captions-on:not(.no-art) .immersive-caption { bottom: max(calc(140px + env(safe-area-inset-bottom, 0px)), calc(var(--art-bottom, 0px) + 18px)); }
  body.immersive.controls-idle.captions-on:not(.no-art) .immersive-caption { bottom: calc(var(--art-bottom, 0px) + 18px + env(safe-area-inset-bottom, 0px)); }
}

/* Portrait full screen: the buttons keep the top row; the picture sits in the middle of the room above the controls
   and the subtitle reads just under it, in the dark, never over the picture. */
@media (orientation: portrait) {
  body.immersive.captions-on:not(.no-art) .scene-art { inset: calc(62px + env(safe-area-inset-top, 0px)) 0 calc(270px + env(safe-area-inset-bottom, 0px)); }
  body.immersive.captions-on:not(.no-art) .immersive-caption { top: calc(var(--art-top, 0px) + var(--art-height, 0px) + 16px); bottom: auto; left: 20px; right: 20px; font-size: calc(var(--caption-size) * var(--book-scale, 1)); }
  body.immersive .immersive-captions { top: calc(10px + env(safe-area-inset-top, 0px)); right: 62px; }
}

/* The whole-reading bar is amber so it never reads as the current part's (green) seek bar. */
.chapter-bar { background: var(--warm); }
.chapter-bar span { background: #d89a3c; }
body.immersive .chapter-bar span { background: #f0b45a; }

.chapter-time { color: var(--warm-ink); }
body.immersive .chapter-time { color: #f0c27a; }

.service-notice { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--warm); color: var(--warm-ink); font-size: 12px; line-height: 1.55; white-space: pre-line; }
.link-signin { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: rgba(10, 13, 11, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.link-signin[hidden] { display: none; }
.link-signin-card { width: min(100%, 380px); padding: 24px 20px 16px; border-radius: 20px; background: var(--card); color: var(--ink); box-shadow: 0 18px 48px rgba(0, 0, 0, .35); text-align: center; }
.link-signin-card strong { display: block; font-size: 20px; line-height: 1.4; }
.link-signin-card p { margin: 8px 0 14px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.link-signin-perks { margin: 0 0 18px; padding: 0; list-style: none; text-align: left; font-size: 14px; line-height: 1.5; }
.link-signin-perks li { position: relative; padding: 6px 0 6px 26px; }
.link-signin-perks li::before { content: '✓'; position: absolute; left: 4px; top: 6px; color: var(--green); font-weight: 800; }
.link-signin-card .button { width: 100%; min-height: 48px; font-size: 16px; }
.link-signin-card .link-button { display: block; margin: 10px auto 0; }
body.immersive .service-notice { position: absolute; left: 12px; right: 12px; top: calc(62px + env(safe-area-inset-top, 0px)); z-index: 3; margin: 0; background: var(--warm); }
body.immersive .listen-card > .service-notice:not([hidden]) { display: block !important; }

/* The three ways to add pages sit on one row, equal width. */
.capture-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.capture-actions .button { width: 100%; min-width: 0; padding-left: 6px; padding-right: 6px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Reading actions: "listen" across the top, the three secondary actions on one row beneath. */
.text-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.text-actions .listen-open { grid-column: 1 / -1; width: 100%; }
.text-actions .button.secondary { width: 100%; min-width: 0; padding-left: 6px; padding-right: 6px; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Admin: tabs, then each tab's tiles, charts and cards. Phones stack everything in one column; wider screens
   widen the page and put sections side by side. */
.admin-tabs { display: flex; gap: 6px; margin: 12px -18px 4px; padding: 2px 18px 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.admin-tabs::-webkit-scrollbar { display: none; }
.admin-tabs button { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--field); color: var(--ink-soft); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.admin-tabs button[aria-selected="true"] { border-color: var(--green-dark); background: var(--green-dark); color: #fff; }
.admin-tab-badge { min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--warm); color: var(--warm-ink); font-size: 11px; line-height: 18px; text-align: center; }
.admin-panel { margin-top: 6px; }
.admin-tiles, .admin-user-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.admin-tiles { margin: 6px 0 12px; }
.admin-tile { padding: 10px 12px; border-radius: 12px; background: var(--soft); min-width: 0; }
.admin-tile strong { display: block; font-size: 16px; color: var(--green-dark); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.admin-tile span { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); }
.admin-tile small { display: block; margin-top: 2px; font-size: 10.5px; color: var(--muted); }
.admin-user-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.admin-user-stats .admin-tile { padding: 8px 10px; }
.admin-user-stats strong { font-size: 14px; }
.admin-todos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.admin-todos:empty { display: none; }
.admin-todo { min-height: 36px; padding: 0 14px; border: 1px solid var(--warm-line); border-radius: 18px; background: var(--warm); color: var(--warm-ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.admin-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.admin-section { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 15px; background: var(--field); }
.admin-section h3 { margin: 0 0 10px; font-size: 14px; }
.admin-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; margin: 6px 0 4px; }
.admin-toolbar select.title-input { width: 100% !important; max-width: none; }
.admin-toolbar input { grid-column: 1 / -1; }
.admin-toolbar .title-input { margin: 0; min-height: 40px; }
.admin-toolbar .button { min-height: 40px; }
.admin-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 10px 0; }
.admin-list > .text-hint, .admin-list > .admin-tiles { grid-column: 1 / -1; }
.admin-more { grid-column: 1 / -1; justify-self: center; min-width: 200px; }
/* Bars (one measure, longest first) and columns (one measure over time): one green, values on hover and in text. */
.admin-bars { display: grid; gap: 6px; }
.admin-bar-row { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 12px; }
.admin-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); }
.admin-bar-track { position: relative; height: 10px; border-radius: 4px; background: var(--soft-2); overflow: hidden; }
.admin-bar-fill { display: block; height: 100%; border-radius: 4px; background: var(--green-dark); }
.admin-bar-value { font-variant-numeric: tabular-nums; color: var(--ink-soft); white-space: nowrap; }
.admin-share { display: grid; gap: 3px; margin: 10px 0 0; }
.admin-share-label { font-size: 10.5px; color: var(--muted); }
.admin-chart-scale { font-size: 10.5px; color: var(--muted); margin-bottom: 4px; }
.admin-columns { display: flex; align-items: stretch; gap: 2px; height: 120px; }
.admin-column { flex: 1 1 0; min-width: 0; display: grid; grid-template-rows: 1fr auto; gap: 4px; cursor: default; }
.admin-column-track { display: flex; align-items: flex-end; border-bottom: 1px solid var(--line); }
.admin-column-fill { display: block; width: 100%; border-radius: 4px 4px 0 0; background: var(--green-dark); }
.admin-column:hover .admin-column-fill { opacity: .75; }
.admin-column-label { min-height: 12px; font-size: 9.5px; color: var(--muted); text-align: center; white-space: nowrap; overflow: visible; }
.admin-rates { display: grid; gap: 8px; }
.admin-rate { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; align-items: baseline; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.admin-rate:last-child { border-bottom: 0; padding-bottom: 0; }
.admin-rate span { font-size: 13px; color: var(--ink-soft); }
.admin-rate strong { font-size: 15px; color: var(--green-dark); font-variant-numeric: tabular-nums; }
.admin-rate small { grid-column: 1 / -1; font-size: 10.5px; color: var(--muted); }
.admin-rank { margin: 0; padding: 0; list-style: none; counter-reset: rank; display: grid; gap: 6px; }
.admin-rank li { counter-increment: rank; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 0 8px; align-items: baseline; font-size: 13px; }
.admin-rank li::before { content: counter(rank); grid-row: 1 / span 2; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.admin-rank li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-rank li > small { grid-column: 2; grid-row: 2; font-size: 10.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-rank li > strong { grid-column: 3; grid-row: 1; color: var(--green-dark); font-variant-numeric: tabular-nums; }
.admin-user { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 15px; background: var(--field); }
.admin-user.waiting { border-color: var(--warm-line); background: var(--warm); }
.admin-user-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 10px; }
.admin-user-head .user-email { min-width: 0; font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.admin-user-head .plan-badge { margin-left: 0; }
.admin-user-head > .button, .admin-user-head > .link-button { margin-left: auto; min-height: 0; padding: 6px 12px; font-size: 12px; white-space: nowrap; }
.admin-book .admin-user-head { margin-bottom: 4px; }
.admin-user-usage { margin: 10px 0 6px; font-size: 12px; color: var(--ink-soft); overflow-wrap: anywhere; }
.admin-user-costs p, .admin-user-costs { margin: 2px 0 0; font-size: 11px; color: var(--muted); line-height: 1.6; }
.admin-user-costs b { color: var(--ink-soft); font-weight: 600; margin-right: 2px; }
.admin-note { margin: 12px 0; font-size: 12px; color: var(--muted); }
.admin-note summary { cursor: pointer; padding: 6px 0; }
.admin-note p { margin: 4px 0 0; line-height: 1.6; }
.admin-push { padding-top: 4px; }
@media (min-width: 560px) {
  .admin-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-toolbar { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
  .admin-toolbar:not(:has(.button)) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .admin-toolbar input { grid-column: auto; }
  .admin-user-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  body[data-screen="admin"] .app { width: min(100%, 1240px); }
  body[data-screen="admin"] .admin-card { padding: 26px 28px; }
  .admin-tabs { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; flex-wrap: wrap; }
  .admin-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .admin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-list .admin-user-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-columns { height: 160px; }
}
@media (min-width: 1200px) { #admin-books { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Family sharing: the panel in the library, the toggle per book, and read-only shared books. */
.family-panel { margin: 4px 0 12px; border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; }
.family-panel > summary { min-height: 44px; display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; }
.family-panel > summary::-webkit-details-marker { display: none; }
.family-panel > summary::after { content: '›'; margin-left: auto; color: var(--muted); font-size: 18px; transition: transform .15s; }
.family-panel[open] > summary::after { transform: rotate(90deg); }
.family-count { color: var(--muted); font-size: 12px; font-weight: 500; }
/* Library extras: grouped lists under the bookshelf ("add more books", "people") instead of a stack of loose boxes. */
.panel-section { margin-top: 22px; }
.panel-section:not(:has(.panel-group > :not([hidden]))) { display: none; }
.panel-section-title { margin: 0 0 8px 2px; font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.panel-group { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.panel-group > .family-panel { margin: 0; border: 0; border-radius: 0; }
.panel-group > :not([hidden]) ~ :not([hidden]) { border-top: 1px solid var(--line); }
.panel-group > .family-panel[open] { padding-bottom: 12px; }
.group-row { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 14px; border: 0; background: transparent; color: inherit; font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
.group-row::after { content: '›'; margin-left: auto; color: var(--muted); font-size: 18px; }
.group-row:disabled { opacity: .5; cursor: default; }
.family-count.asked { color: var(--danger); font-weight: 700; }
.family-list { display: grid; gap: 2px; }
.family-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.family-who { display: grid; min-width: 0; flex: 1; }
.family-who strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.family-who span { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.family-row.asked .family-who span { color: var(--danger); }
.family-actions { display: flex; gap: 12px; flex-shrink: 0; }
.family-actions .danger { color: var(--danger); }
.family-form { padding: 6px 0 14px; }
.family-invite-row { display: flex; gap: 8px; }
.family-invite-row .title-input { flex: 1; min-width: 0; margin: 0; }
.family-invite-row .button { flex-shrink: 0; }
.family-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: var(--warm); color: var(--warm-ink); font-size: 10px; font-weight: 600; vertical-align: 1px; }
.manage-row[aria-pressed]::after { content: none; }
.manage-row[aria-pressed="true"] { color: var(--green-dark); }
.shared-note { margin: -4px 0 10px; color: var(--warm-ink); }
.classic-book .folder-primary,
.shared-book .folder-primary, .shared-book .book-share, .shared-book .book-manage,
.shared-book .library-delete, .shared-book .chapter-order { display: none !important; }
/* A book that came by link: who shared it, and the app introducing itself to someone who may not know it. */
.link-promo { margin: 4px 0 16px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--soft); }
.link-promo[hidden] { display: none; }
body.link-book:not([data-screen="library"]) #connection, body.link-book:not([data-screen="library"]) #server-status { display: none !important; }
.link-promo { margin-top: 18px; }
.link-promo h4 { margin: 0 0 6px; font-size: 15px; }
.link-promo-by { margin: 0 0 8px; font-size: 12px; color: var(--green-dark); }
.link-promo-by:empty { display: none; }
.link-promo .actions { margin-top: 12px; }
.shared-reading #edit-reading, .shared-reading #export-text, .shared-reading #download-audio, .shared-reading #next-reading,
.shared-reading #new-reading, .shared-reading #save-reading, .shared-reading .upload-card, .shared-reading #book-select,
.shared-reading label[for="book-select"] { display: none !important; }
/* The reading as a page of a book (client/book-page.js): book type, justified paragraphs with an indent, wide
   margins, and the part being read softly glowing. It scrolls by itself, so following the reading never moves
   the rest of the screen. */
.book-page { margin: 18px 0 10px; padding: 26px 22px 30px; max-height: 64vh; overflow-y: auto; overscroll-behavior: contain; border: 0; border-radius: 14px; background: var(--page); color: var(--page-ink); font-family: var(--book-font); font-size: calc(17px * var(--book-scale, 1)); line-height: calc(1.95 * var(--book-leading, 1)); letter-spacing: -.005em; word-break: keep-all; overflow-wrap: anywhere; }
.book-page-title { margin: 4px 0 1.6em; font-family: var(--book-font); font-size: 1.12em; font-weight: 700; text-align: center; letter-spacing: .02em; color: var(--ink); }
/* Justified only where lines are long enough: on a phone it opened wide gaps between words. */
.book-page p { margin: 0 0 .85em; text-indent: 1em; text-align: start; }
/* 학습 (client/study.js): a paragraph's translation, small under it. */
.book-page p.study-line { margin: -.45em 0 1.05em; text-indent: 0; text-align: start; font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; font-size: .8em; line-height: 1.65; letter-spacing: 0; opacity: .68; word-break: normal; }
.book-page p.study-line.working { opacity: .45; }
body.study-tap .book-page p:not(.study-line) { cursor: pointer; }
.study-status { margin: 6px 0 0; }
/* No line around the page: its words fade softly away at its top and bottom edges as they scroll past. */
.book-page { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 34px, #000 calc(100% - 26px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 34px, #000 calc(100% - 26px), transparent 100%); }
/* A picture opened full screen from the page is not held inside it, faded (the fade would hold it to the page). */
.book-page:has(.book-page-art.zoomed) { -webkit-mask-image: none; mask-image: none; }
/* A writer's marks (client/book-page.js): a "## " sub-heading in bold with room above it, a "> " quotation set in
   with a rule beside it. The same under the editor (#text-preview). */
.book-page .book-page-sub, .text-preview .book-page-sub { margin: 1.5em 0 .7em; text-indent: 0; font-weight: 700; text-align: start !important; }
.book-page .book-page-quote, .text-preview .book-page-quote { margin: 0 0 .85em .4em; padding-left: .9em; border-left: 3px solid color-mix(in srgb, var(--page-ink, var(--ink)) 35%, transparent); text-indent: 0; text-align: start !important; }
.text-preview { margin: 10px 0 4px; padding: 14px 16px; border: 1px dashed var(--line); border-radius: 12px; background: var(--page); color: var(--page-ink); font-family: var(--book-font); line-height: 1.8; max-height: 40vh; overflow-y: auto; }
.text-preview p { margin: 0 0 .7em; }
.text-preview .book-page-sub:first-child { margin-top: 0; }
/* The part being read stands out by the rest of the page stepping back: the other parts fade to a lighter ink
   (no glow or marks on the letters themselves). */
.read-part { transition: color .8s ease; }
.book-page.reading .read-part:not(.current) { color: color-mix(in srgb, var(--page-ink) 62%, transparent); }
/* Tablets: a wider column and a roomier page. */
@media (min-width: 700px) {
  .app { width: min(100%, 720px); }
  .book-page { padding: 40px 48px 44px; font-size: calc(18px * var(--book-scale, 1)); }
  .book-page p { text-align: justify; }
}
/* While listening the reading window fits the screen under the book's name (client/screens.js fitListen scrolls the
   header out of sight): the card is at least a screen tall, and the book page is a screen's height of reading. */
body[data-screen="listen"]:not(.immersive) .listen-card { min-height: calc(100dvh - var(--nav-height, 58px) - 14px); }
@media (max-width: 1039px) {
  /* One column: the listening settings under the player and the page, so opening, closing or changing them never
     moves the page out of its place on the screen. */
  body[data-screen="listen"]:not(.immersive) .listen-card { display: flex; flex-direction: column; }
  body[data-screen="listen"]:not(.immersive) .listen-card > .direction-card { order: 1; }
  body[data-screen="listen"]:not(.immersive) .book-page { height: var(--listen-room, calc(100dvh - var(--nav-height, 58px) - 40px)); max-height: none; margin: 12px 0; }
}
/* Computers and tablets held sideways: the page on the left, the player and its settings on the right. */
@media (min-width: 1040px) {
  body[data-screen="listen"] .app { width: min(100%, 1240px); }
  /* The listening card is the screen's height (under the bar at the top to a little above the bottom) and scrolls
     within itself: the page on the left fills it whatever the screen's size and never moves, the settings and the
     player scroll on the right. */
  body[data-screen="listen"]:not(.immersive) .listen-card { display: grid; grid-template-columns: minmax(0, 1fr) 400px; column-gap: 32px; align-items: start;
    height: calc(100dvh - var(--nav-height, 58px) - 24px); min-height: 0; padding: 16px 18px; overflow-y: auto; overscroll-behavior: contain;
    position: sticky; top: calc(var(--nav-height, 58px) + 12px); }
  /* What the app says while listening floats over the bottom of the screen instead of pushing the card down. */
  body[data-screen="listen"]:not(.immersive) .status:not(:empty) { position: fixed; left: 50%; bottom: 22px; z-index: 40; max-width: min(560px, calc(100vw - 48px)); margin: 0; padding: 9px 16px; border-radius: 999px; background: var(--card); box-shadow: 0 8px 28px rgba(0, 0, 0, .18); transform: translateX(-50%); }
  body[data-screen="listen"]:not(.immersive) .listen-card > * { grid-column: 2; }
  /* The listening settings first on the right, level with the page's top (the reading's title and the audiobook/web
     book switch under them). */
  body[data-screen="listen"]:not(.immersive) .listen-card > .direction-card { order: -1; margin-top: 0; }
  body[data-screen="listen"]:not(.immersive) .listen-card > .card-heading { margin-top: 14px; }
  body[data-screen="listen"]:not(.immersive) .listen-card > .book-page { grid-column: 1; grid-row: 1 / span 30; align-self: start; position: sticky; top: 16px; margin: 0; height: calc(100dvh - var(--nav-height, 58px) - 24px - 34px); max-height: none; padding: 56px 64px 64px; font-size: calc(19px * var(--book-scale, 1)); }
}

/* Screen mode toggle beside the language: device setting (half circle), light (sun), dark (moon). */
.theme-button { display: inline-grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--card); color: var(--muted-2); font-size: 15px; line-height: 1; cursor: pointer; }
/* On a phone the app's name wraps only between words and the date gives way to it. */
.brand { min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }
.header-side { flex-shrink: 0; }

/* Whose words the book holds (book settings) and what that allows (share panel). */
.rights-field { margin: 4px 0 12px; }
.rights-field .share-option span { line-height: 1.55; }
.rights-state { margin: 6px 0 0; }
.rights-state.open, .rights-note.open { color: var(--green-dark); }
.rights-note { margin: 0 0 12px; padding: 0 0 10px; border-bottom: 1px solid var(--line); color: var(--muted-2); font-size: 12px; line-height: 1.6; }

/* My profile in the open library: a round photo (or the nickname's first letter), nickname and status. */
/* The creative shelf. */
.showcase-dialog { width: min(440px, calc(100% - 32px)); padding: 20px; border: 0; border-radius: 18px; background: var(--card); color: var(--ink); }
.showcase-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.showcase-dialog h2 { margin: 0 0 6px; font-size: 18px; }
.showcase-dialog .share-option { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0; font-size: 14px; line-height: 1.5; }
.showcase-dialog .share-option input { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.showcase-dialog .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.showcase-rules { margin: 6px 0 10px; padding: 8px 10px; border-radius: 10px; background: var(--warm); color: var(--ink); font-size: 12px; font-weight: 600; line-height: 1.5; }
#showcase-order { margin-bottom: 6px; }
/* Each work a card, its picture faint behind it as in the classics library. */
.showcase-row .mine-badge { background: var(--green); }
.showcase-row.mine { cursor: pointer; }
.showcase-row.mine:hover { border-color: var(--green); }
.showcase-row { position: relative; isolation: isolate; overflow: hidden; align-items: flex-start; min-height: 96px; margin: 8px 0; padding: 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--card); }
.showcase-row + .showcase-row { border-top: 1px solid var(--line-strong); }
.showcase-art { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; transition: opacity .3s; }
.showcase-row.has-art .showcase-art { opacity: .22; }
.showcase-row.has-art { border-color: color-mix(in srgb, var(--green) 30%, var(--line-strong)); }
.showcase-row.has-art .family-who strong { text-shadow: 0 0 6px var(--card), 0 0 2px var(--card); }
:root[data-theme="dark"] .showcase-row.has-art .showcase-art { opacity: .3; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .showcase-row.has-art .showcase-art { opacity: .3; } }
.showcase-rank { flex: none; width: 24px; padding-top: 2px; color: var(--green); font-weight: 800; font-size: 15px; text-align: center; }
.showcase-excerpt { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 3px; color: var(--ink-soft) !important; }
#showcase-list { max-height: 60vh; overflow-y: auto; }
/* Members to follow: a row of cards scrolled sideways under "나와 함께 읽는 사람". */
.member-strip { margin: 0 0 10px; }
.member-strip-title { margin: 0 0 6px; color: var(--muted); font-size: 12px; }
.member-cards { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; }
.member-card { flex: none; display: grid; justify-items: center; align-content: start; gap: 4px; width: 104px; padding: 10px 8px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--card); text-align: center; scroll-snap-align: start; }
.member-card .member-face { width: 44px; height: 44px; font-size: 18px; }
.member-card strong { max-width: 100%; overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.member-card span:not(.member-face) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; color: var(--muted); font-size: 11px; line-height: 1.3; }
.member-card .member-alike { color: var(--green); font-weight: 600; }
.member-card .button { min-height: 30px; margin-top: 2px; padding: 0 12px; font-size: 12px; }
.profile-mini, .profile-photo { display: inline-grid; place-items: center; flex-shrink: 0; overflow: hidden; border-radius: 50%; background: var(--soft-2); color: var(--green-dark); font-weight: 700; }
.profile-mini { width: 24px; height: 24px; font-size: 12px; }
.profile-photo { width: 72px; height: 72px; font-size: 28px; }
.profile-mini img, .profile-photo img { width: 100%; height: 100%; object-fit: cover; }
#profile-summary.empty { color: var(--danger); }
.profile-form { padding: 4px 0 14px; }
.profile-photo-row { display: flex; align-items: center; gap: 14px; margin: 4px 0 6px; }
.profile-form .button[type="submit"] { width: 100%; margin-top: 4px; }

/* Following: people as rows (photo, nickname, status) and the books a followed person opened. */
.follow-face { width: 36px; height: 36px; font-size: 15px; }
.follow-books { margin: 6px 0 10px; padding: 4px 12px 6px; border-radius: 12px; background: var(--soft); }
.follow-books-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; font-size: 13px; }
.follow-book .button { flex-shrink: 0; min-height: 36px; padding: 0 12px; font-size: 12px; }

/* Thanks under a book opened to followers. */
/* One line about a book, shown to followers. */
.book-note { margin: 4px 0 12px; }
.book-note .title-input { margin: 0; }
.book-note-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.follow-notes { margin: 4px 0 10px; }
.follow-note { align-items: flex-start; }
.follow-note q { display: block; margin-top: 3px; color: var(--ink); font-size: 14px; quotes: '“' '”'; }
.thanks { margin: 16px 0 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.thanks h3 { margin: 0 0 10px; font-size: 15px; }
.thanks-form { display: grid; gap: 8px; margin-bottom: 8px; }
.thanks-form textarea { width: 100%; margin: 0; resize: vertical; min-height: 64px; font: inherit; font-size: 14px; color: var(--ink); }
.thanks-form .button { justify-self: end; }
.thanks-note { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.thanks-note .profile-mini { width: 32px; height: 32px; font-size: 14px; }
.thanks-body { flex: 1; min-width: 0; }
.thanks-head { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.thanks-head span { color: var(--muted); font-size: 11px; }
.thanks-head .link-button { margin-left: auto; font-size: 11px; }
.thanks-body p { margin: 3px 0 0; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; white-space: pre-wrap; }

/* Reporting a followed book, and the reports on the admin page. */
.report-box { margin: 10px 0 4px; font-size: 13px; }
.report-box > summary { color: var(--muted); cursor: pointer; min-height: 36px; display: flex; align-items: center; }
.report-box form { display: grid; gap: 8px; padding: 4px 0 10px; }
.report-box select { width: 100%; max-width: none; margin: 0; }
.report-box textarea { width: 100%; min-height: 60px; height: auto; margin: 0; font: inherit; font-size: 13px; color: var(--ink); resize: vertical; }
.report-box .danger-button { justify-self: end; color: var(--danger); }
#public-book.held { color: var(--danger); }
.admin-reports { display: grid; gap: 10px; margin: 0 0 18px; }
.admin-reports h3 { margin: 0; font-size: 15px; }
.report-text { margin: 6px 0; padding: 8px 10px; border-left: 3px solid var(--warm-line); background: var(--warm); font-size: 13px; line-height: 1.6; white-space: pre-wrap; }
.report-excerpt summary { cursor: pointer; font-size: 12px; color: var(--green-dark); }
.report-excerpt p { margin: 6px 0; font-family: var(--book-font); font-size: 13px; line-height: 1.8; white-space: pre-wrap; }
.report-actions { margin-top: 8px; }

/* The classics library: search, Korean/world filter and the works. */
/* The search first, at the top of the library; the shelves under it, set apart from the full list by a line. */
.classics-tools { display: grid; gap: 8px; margin: 6px 0 10px; }
.classics-shelves:not([hidden]) { margin-bottom: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.classics-tools .title-input { margin: 0; }
.classics-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.classics-filter button { flex: none; white-space: nowrap; min-height: 32px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--card); color: var(--muted-2); font-size: 12px; cursor: pointer; }
.classics-filter button[aria-pressed="true"] { border-color: var(--green); background: var(--green); color: #fff; }
.classic-row .button { flex-shrink: 0; min-height: 36px; padding: 0 12px; font-size: 12px; }
.classic-row.taken .family-who, .classic-row.taken .button { opacity: .45; }
.classic-row.taken .button:hover, .classic-row.taken .button:focus-visible { opacity: 1; }
#classics-list { max-height: 60vh; overflow-y: auto; }
.classics-genre { width: 100%; max-width: none; margin: 0; }
.classics-more { width: 100%; margin-top: 8px; }
/* Recommendation shelves: a title (lists the whole shelf below) over a row of cards scrolled sideways. */
.classics-shelves { display: grid; gap: 12px; margin: 6px 0 10px; }
.classics-shelf { min-width: 0; }
.classics-shelf.divided { margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--line); }
.classics-shelf-title { display: flex; align-items: center; gap: 6px; padding: 2px 0 6px; border: 0; background: none; color: inherit; font-size: 14px; font-weight: 700; text-align: left; cursor: pointer; }
.classics-shelf-title::after { content: ' ›'; color: var(--muted-2); }
.classics-shelf-title[aria-expanded="true"] { color: var(--green); }
.classics-shelf-title[aria-expanded="true"]::after { content: ' ⌄'; color: var(--green); }
/* Shelf icons (client/classics.js): line drawings that take the text colour, a little brighter in the title. */
.shelf-icon { flex-shrink: 0; width: 20px; height: 20px; color: var(--green); }
.classics-picked .shelf-icon { width: 16px; height: 16px; color: inherit; }
.classics-picked .shelf-icon.close { width: 14px; height: 14px; opacity: .85; }
.classics-cards { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
/* No scrollbar under the rows of cards: a finger swipes them, a mouse drags them (client/screens.js). */
.classics-cards, .member-cards { scrollbar-width: none; cursor: grab; }
.classics-cards::-webkit-scrollbar, .member-cards::-webkit-scrollbar { display: none; }
.classics-cards.open { cursor: auto; }
.classics-cards.dragging, .member-cards.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.classics-cards.dragging *, .member-cards.dragging * { pointer-events: none; }
.classics-card { flex: none; display: grid; align-content: start; gap: 4px; width: 112px; min-height: 84px; padding: 10px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--card); color: inherit; text-align: left; cursor: pointer; scroll-snap-align: start; }
/* A shelf opened in place: every card shown, wrapping into rows. */
.classics-cards.open { flex-wrap: wrap; overflow: visible; scroll-snap-type: none; }
.classics-rank { justify-self: start; min-width: 22px; padding: 0 5px; border-radius: 6px; background: var(--green); color: #fff; font-size: 11px; font-style: normal; font-weight: 700; line-height: 18px; text-align: center; }
.classics-card-more { align-content: center; justify-items: center; color: var(--green-dark); font-size: 12px; font-weight: 600; }
.classics-card.selected { border-color: var(--green); box-shadow: 0 0 0 2px var(--green) inset; }
/* The work a shelf card was pressed for: its details, and the button that takes it. */
/* The new-book form in a window over the dimmed bookshelf (client/screens.js). */
.book-dialog { width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); padding: 0; border: 0; border-radius: 22px; background: var(--card); color: var(--ink); box-shadow: 0 24px 70px rgba(0, 0, 0, .35); overflow: hidden; }
/* Round at every corner: only the form inside scrolls (a scroll bar on the window itself squared its right side), its
   title and ✕ staying above it. */
.book-dialog[open] { display: flex; flex-direction: column; }
.book-dialog::backdrop { background: rgba(14, 17, 14, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.book-dialog-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 8px; }
.book-dialog-head strong { font-size: 18px; }
.book-dialog-x { flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--soft); color: var(--ink); font-size: 14px; cursor: pointer; }
.book-dialog #book-form { min-height: 0; margin: 0; padding: 0 20px 20px; border: 0; background: transparent; overflow-y: auto; overscroll-behavior: contain; }
/* A work pressed in the library (client/classics.js showDetail): a window over the dimmed library. */
.classic-dialog { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); padding: 0; border: 0; border-radius: 22px; background: var(--card); color: var(--ink); box-shadow: 0 24px 70px rgba(0, 0, 0, .35); overflow: hidden; }
.classic-dialog[open] { display: flex; flex-direction: column; }
.classic-dialog .classic-dialog-art { flex: none; }
.classic-dialog::backdrop { background: rgba(14, 17, 14, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.classic-dialog-art { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--soft); }
.classic-dialog-words { min-height: 0; padding: 18px 20px 20px; overflow-y: auto; overscroll-behavior: contain; }
.classic-dialog-words strong { display: block; font-size: 19px; line-height: 1.35; }
.classic-dialog-words .classics-detail-original { display: block; margin-top: 3px; color: var(--muted-2); font-size: 13px; }
.classic-dialog-words .text-hint { margin: 8px 0 0; }
.classic-dialog-what { margin: 14px 0 16px; font-size: 14px; line-height: 1.6; }
.classic-dialog-words .actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.classic-dialog-words .actions .classics-edition { flex: 1 1 140px; width: auto; }
.classic-dialog-words .actions .button:not(.secondary) { flex: 1 1 160px; }
.classic-dialog-x { position: absolute; top: 12px; right: 12px; z-index: 1; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; font-size: 14px; cursor: pointer; }
.classics-detail { margin: 4px 0 14px; padding: 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--card); }
.classics-detail[hidden] { display: none; }
.classics-detail strong { display: block; font-size: 15px; }
.classics-detail-original { display: block; margin-top: 2px; color: var(--muted-2); font-size: 12px; }
.classics-detail .text-hint { margin: 6px 0 10px; }
.classics-card strong { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.3; }
.classics-card span { overflow: hidden; color: var(--muted-2); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.classics-card.taken { border-color: var(--green); }
/* A row's first card: its theme as a big picture in the row's own colour. */
.classics-card.shelf-cover { justify-items: center; align-content: center; gap: 6px; text-align: center; border-color: color-mix(in srgb, var(--tone) 45%, var(--line-strong)); background: color-mix(in srgb, var(--tone) 13%, var(--card)); color: var(--tone); }
.classics-card.shelf-cover strong { color: var(--ink); font-size: 12px; -webkit-line-clamp: 2; }
.shelf-cover-icon { width: 44px; height: 44px; stroke-width: 1.5; }
.classics-card.shelf-cover:hover { background: color-mix(in srgb, var(--tone) 20%, var(--card)); }
.classics-folds { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 14px; margin: 0 0 6px; }
.classics-fold { display: block; font-size: 12px; }
.classics-fold::after { content: " ▴"; text-decoration: none; display: inline-block; margin-left: 3px; }
.classics-fold[aria-expanded="false"]::after { content: " ▾"; }
/* A painted work: its picture laid faintly behind the card's words. */
.classics-card.has-art { position: relative; overflow: hidden; isolation: isolate; }
.classics-card-art { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: .22; pointer-events: none; }
.classics-card.has-art .classics-rank { position: relative; }
:root[data-theme="dark"] .classics-card-art { opacity: .3; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .classics-card-art { opacity: .3; } }
.classics-picked { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin: 0 0 6px; padding: 0 10px 0 12px; border: 1px solid var(--green); border-radius: 16px; background: var(--green); color: #fff; font-size: 12px; cursor: pointer; }

.book-settings select[hidden], .book-settings label[hidden] { display: none; }

/* Tablets and computers: the bookshelf's pages and a book's page use the width (phones keep one column). */
@media (min-width: 700px) {
  .book-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .classics-card { width: 132px; min-height: 92px; }
}
@media (min-width: 900px) {
  body[data-screen="library"] .app, body[data-screen="book"] .app { width: min(100%, 1180px); }
  .library-tabs { width: min(100%, 520px); margin-left: auto; margin-right: auto; }
  .book-list { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .tab-page { padding: 28px 32px; }
  .classics-tools { grid-template-columns: minmax(0, 2fr) auto minmax(0, 1fr); align-items: center; }
  .tab-page #classics-list, .tab-page #showcase-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; align-content: start; }
  .tab-page #classics-list > :not(.family-row), .tab-page #showcase-list > :not(.family-row) { grid-column: 1 / -1; }
  .classics-card { width: 150px; min-height: 100px; }
  .tab-page #showcase-list { column-gap: 16px; }
  .member-card { width: 120px; }
}
@media (min-width: 1200px) {
  .tab-page #classics-list, .tab-page #showcase-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

}
@media (min-width: 700px) { .book-list { align-items: start; } }
/* Computers and tablets held sideways: making a reading puts the pages (photos) and the text side by side. */
@media (min-width: 1040px) {
  body[data-screen="reading"] .app { width: min(100%, 1240px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); column-gap: 24px; align-items: start; }
  body[data-screen="reading"] .app > * { grid-column: 1 / -1; }
  body[data-screen="reading"] .app > .upload-card { grid-column: 1; position: sticky; top: 16px; }
  body[data-screen="reading"] .app > .text-card { grid-column: 2; margin-top: 0; }
  body[data-screen="reading"] #recognized-text { min-height: 52vh; }
}
/* A classic's book settings are shown, not edited (client/library.js): only the book's details. */
#rename-form.classic-book > :not(#classic-info) { display: none !important; }
.classic-info dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 4px 0 10px; font-size: 14px; }
.classic-info dt { color: var(--muted); }
.classic-info dd { margin: 0; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.classic-info .text-hint { margin: 4px 0 0; }
.classic-info .info-looks { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 2px 0 10px; }
.classic-info .info-look { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); }
.classic-info .info-picture { flex: none; width: 44px; height: 44px; overflow: hidden; border-radius: 50%; background: var(--soft); }
.classic-info .info-look.art .info-picture { width: 62px; height: 44px; border-radius: 8px; }
.classic-info .info-picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
.classic-info .info-words { display: grid; min-width: 0; }
.classic-info .info-words small { color: var(--muted); font-size: 11px; }
.classic-info .info-words strong { font-size: 14px; overflow-wrap: anywhere; }

/* Ready-made profile pictures (client/avatars.js). */
.avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 10px; margin: 10px 0 4px; }
.avatar-grid[hidden] { display: none; }
.avatar-choice { padding: 0; border: 2px solid transparent; border-radius: 50%; background: none; cursor: pointer; aspect-ratio: 1; overflow: hidden; }
.avatar-choice img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.avatar-choice[aria-checked="true"] { border-color: var(--green-dark); box-shadow: 0 0 0 2px var(--card); }

/* Publishing a book of one's own (client/showcase.js). */
.publish-scope { margin: 6px 0 10px; padding: 0; border: 0; display: grid; gap: 2px; }
.publish-scope legend { padding: 0; margin-bottom: 4px; }
.publish-form textarea { resize: vertical; min-height: 84px; }

.admin-prepare-langs { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0; font-size: 14px; }
.admin-prepare-langs label { display: inline-flex; align-items: center; gap: 4px; }
/* Admin: YouTube videos of a classic's reading. */
#admin-video select { display: block; width: 100%; margin: 8px 0; }
.video-result { display: grid; gap: 10px; margin-top: 12px; }
.video-result .button { text-align: center; text-decoration: none; }
.video-text { width: 100%; font-size: 13px; line-height: 1.6; white-space: pre-wrap; }
#admin-video .video-kind { display: block; width: 100%; max-width: 320px; }
.video-search { display: block; width: 100%; margin: 8px 0 4px; }
.video-found { display: grid; gap: 4px; max-height: 320px; overflow-y: auto; }
.video-found-row { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--card); color: inherit; text-align: left; cursor: pointer; }
.video-found-row:hover { border-color: var(--green); }
.video-found-row[aria-selected="true"] { border-color: var(--green); box-shadow: 0 0 0 2px var(--green) inset; }
.video-found-row strong { font-size: 14px; }
.video-found-row span { font-size: 12px; color: var(--muted-2); }
.video-pending { margin-top: 8px; font-size: 13px; }
.video-pending summary { cursor: pointer; color: var(--muted-2); }
.video-pending p { margin: 4px 0 0 14px; }
.video-picked { margin: 10px 0 0; font-size: 14px; font-weight: 700; color: var(--green-dark); }
.video-picked:empty { display: none; }
.video-auto { display: flex; align-items: center; gap: 6px; margin: 4px 0 8px; font-size: 13px; color: var(--muted-2); }
/* The progress: a bar cut into a block per video, each filling as it is made. */
.video-steps { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 14px; }
.video-steps[hidden] { display: none; }
.video-step { padding: 0; color: inherit; cursor: default; position: relative; flex: 1 0 34px; max-width: 72px; height: 30px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--card); }
.video-step-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--green); opacity: .45; transition: width .3s; }
.video-step em { position: relative; display: grid; place-items: center; height: 100%; font-size: 11px; font-style: normal; font-weight: 700; color: var(--ink); }
.video-step.active { border-color: var(--green); box-shadow: 0 0 0 2px var(--green) inset; }
.video-step.done .video-step-fill { opacity: 1; }
.video-step.done em { color: #fff; }
.video-step.failed { border: 1.5px dashed #c0392b; background: transparent; cursor: pointer; }
.video-step.failed em { color: #c0392b; }
.video-step.failed:hover { background: rgba(192, 57, 43, .08); }
.video-step.stopped { border-style: dashed; cursor: pointer; }
.video-status { margin-top: 8px; }
.video-row { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px; }
.video-row strong { font-size: 13px; word-break: break-all; }
.video-row-actions { display: flex; gap: 8px; }
.video-row-actions .button { flex: 1; min-height: 36px; font-size: 13px; }
.video-row .is-done { pointer-events: none; opacity: .6; }
.video-failed { margin: 0; color: #c0392b; }
.terms-footer { text-align: center; margin: 18px 0 8px; }
.consent-note { margin-top: 10px; font-size: 12px; }
.link-button.danger { color: var(--danger); }
/* The header's profile: one's picture and follow counts; a tap opens one's profile. */
.header-profile { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 3px 10px 3px 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--field); color: var(--ink); }
.header-me { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.header-counts { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; font-size: 10.5px; color: var(--muted-2); }
.header-count { padding: 4px 3px; border: 0; background: none; color: var(--ink-soft); font: inherit; font-size: 11px; white-space: nowrap; cursor: pointer; }
.header-count:hover, .header-count:focus-visible { color: var(--green-dark); text-decoration: underline; }
.header-profile[hidden] { display: none; }
.header-avatar { flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; overflow: hidden; border-radius: 50%; background: var(--soft-2); font-size: 13px; font-weight: 800; color: var(--green-dark); }
.header-avatar img { width: 100%; height: 100%; object-fit: cover; }
.header-follow { display: flex; flex-direction: column; min-width: 0; font-size: 11px; line-height: 1.3; color: var(--ink-soft); text-align: left; }
.header-who { display: flex; gap: 6px; min-width: 0; white-space: nowrap; }
.header-who strong { color: var(--ink); font-size: 12px; }
.header-who span { overflow: hidden; text-overflow: ellipsis; }
.header-profile { min-width: 0; max-width: 260px; }
.brand { white-space: nowrap; min-width: 0; }
/* On a phone with one's profile in the header: the app's name keeps the first line, and one's profile, the theme and
   the language take a roomy line below it. */
@media (max-width: 479px) {
  header:has(.header-profile:not([hidden])) { flex-wrap: wrap; row-gap: 12px; }
  header:has(.header-profile:not([hidden])) .header-side { flex: 1 0 100%; min-width: 0; }
  header:has(.header-profile:not([hidden])) .header-profile { flex: 1 1 0; max-width: none; margin-right: 4px; }
  header:has(.header-profile:not([hidden])) .header-side > :not(.header-profile) { flex-shrink: 0; }
}
/* One's plan in the profile panel. */
.plan-box { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0 4px; padding: 12px 14px; border-radius: 14px; background: var(--soft); }
.plan-box[hidden] { display: none; }
.plan-now { font-size: 14px; font-weight: 700; }
.plan-box .button { min-height: 38px; padding: 0 16px; }
/* The plans side by side (stacked on a phone). */
.plans-card { width: min(100%, 560px); max-height: calc(100vh - 40px); overflow-y: auto; }
.plan-list { display: grid; gap: 10px; margin: 14px 0 10px; text-align: left; }
@media (min-width: 620px) { .plan-list { grid-template-columns: repeat(3, 1fr); } }
.plan-item { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--field); }
.plan-item.featured { border-color: var(--green); box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 25%, transparent); }
.plan-item h3 { margin: 0; font-size: 16px; }
.plan-price { margin: 0; font-size: 18px; font-weight: 800; color: var(--green-dark); }
.plan-item ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.55; color: var(--ink-soft); flex: 1; }
.plan-item .button { width: 100%; min-height: 40px; font-size: 14px; margin-top: 4px; }
.plan-tag { margin: 4px 0 0; font-size: 12px; font-weight: 700; color: var(--green-dark); }
.plan-tag[hidden] { display: none; }
/* A person's followers and the people they follow. */
.people-card { width: min(100%, 420px); max-height: calc(100vh - 40px); display: flex; flex-direction: column; text-align: left; }
.people-head { display: flex; align-items: center; gap: 10px; }
.people-head .link-button { font-size: 22px; padding: 0 6px; }
.people-face { width: 48px; height: 48px; font-size: 18px; flex-shrink: 0; }
.people-who { display: flex; flex-direction: column; min-width: 0; }
.people-who strong { font-size: 16px; }
.people-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--ink-soft); }
.people-tabs { display: grid; grid-template-columns: 1fr 1fr; margin: 14px 0 6px; border-bottom: 1px solid var(--line); }
.people-tabs button { padding: 10px 4px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted-2); font: inherit; font-weight: 700; cursor: pointer; }
.people-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--green); }
.people-list { flex: 1; min-height: 120px; overflow-y: auto; }
.people-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 2px; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.people-row-face { width: 40px; height: 40px; flex-shrink: 0; font-size: 15px; }
.people-row .people-who { flex: 1; }
.people-mark { flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--green-dark); }
.people-card > .link-button { margin: 10px auto 0; }
.follow-open { cursor: pointer; }
.quiet-link { margin-left: 10px; font-size: 11px; opacity: .6; }
.biz-line { font-size: 11px; }
/* Following now lives in the header's lists: the old panel stays out of sight (its parts move into the dialog). */
#follow-panel { display: none !important; }
.people-actions { display: flex; gap: 8px; margin-top: 12px; }
.people-actions[hidden] { display: none; }
.people-actions .button { flex: 1; min-height: 38px; }
/* The card borrows the sign-in card's look, whose buttons fill its width: here they size to their words (the
   search row, a followed book's take button), and only the two actions share the row. */
.people-card .button { width: auto; min-height: 38px; font-size: 14px; }
.people-card .family-invite-row .title-input { flex: 1; min-width: 0; }
.people-more:empty { display: none; }
.people-more { margin-top: 12px; }
.people-more .follow-books { margin: 0; }
/* The trash, a small icon at the right end of the shelf's chips. */
.shelf-filter { display: flex; align-items: center; }
.shelf-filter .shelf-trash { margin-left: auto; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; color: var(--muted-2); }
.shelf-filter .shelf-trash[aria-pressed="true"] { color: #fff; }
.terms-footer a, .consent-note a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 2px; }
.terms-footer a:hover, .consent-note a:hover { color: var(--ink); }
.book-open { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.book-open.carried { opacity: .35; }
.book-ghost { position: fixed; left: 0; top: 0; transform-origin: 0 100%; z-index: 60; pointer-events: none; margin: 0; box-shadow: 0 18px 40px rgba(0, 0, 0, .25); transition: none; }
.shelf-drop { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 55; display: flex; gap: 10px; padding: 10px; border-radius: 22px; background: var(--card-glass); border: 1px solid var(--line-strong); box-shadow: 0 10px 30px rgba(0, 0, 0, .18); backdrop-filter: blur(8px); }
.shelf-drop[hidden] { display: none; }
.shelf-drop button { min-width: 88px; padding: 16px 14px; border-radius: 16px; border: 1.5px dashed var(--line-strong); background: var(--field); color: var(--ink); font: inherit; font-weight: 600; }
.shelf-drop button[data-shelf="trash"] { color: var(--danger); }
.shelf-drop button.over { border-style: solid; border-color: var(--green); background: var(--soft-2); transform: scale(1.06); }
.shelf-drop button[data-shelf="trash"].over { border-color: var(--danger); }
#brand-home { cursor: pointer; }
.book-open img { -webkit-user-drag: none; user-drag: none; }
/* A blurred band inside a tilted book escapes the book's rounded clip in Chromium: the cover and the band carry
   the corners themselves. */
.book-cover { border-radius: 3px 11px 11px 3px; }
.book-open.has-cover .book-band { border-radius: 0 0 11px 3px; }
/* The edition picker beside a classic's take button: as wide as its words. */
.classics-detail .classics-edition { width: auto; min-width: 150px; flex: 0 1 auto; }
/* The player's row: the controls and the words beside them first (the words taking what is left, never squeezed to a
   letter a line), then the restart and send buttons sharing a row, then full screen. */
.player .segment-controls { flex: 0 0 auto; }
.player .player-copy { flex: 1 1 0; min-width: 9em; }
.player .player-title, .player .player-subtitle { overflow-wrap: anywhere; }
.player #stop-reading, .player #player-share { order: 8; flex: 1 1 40%; min-height: 38px; }

/* A one-line note marked as giving the story away: blurred under a label until tapped (client/notes.js noteLine). */
.book-note-spoiler { display: inline-flex; align-items: center; gap: 5px; margin-right: 10px; font-size: 13px; color: var(--muted); cursor: pointer; }
.note-spoiler { position: relative; display: block; width: 100%; margin: 2px 0 0; padding: 4px 0; border: 0; background: none; font: inherit; text-align: start; cursor: pointer; }
.note-spoiler q { filter: blur(6px); user-select: none; }
.note-spoiler-label { position: absolute; inset: 0; display: grid; place-items: center start; padding-left: 4px; color: var(--danger); font-size: 13px; font-weight: 700; }
.classic-not-here { color: var(--danger); font-weight: 600; }
#admin-batch-status { white-space: pre-line; }

/* How to read (client/webbook.js): the switch beside the reading's title, and the web book itself: read with the eyes,
   the player and every narration setting out of the way (the type settings stay), the whole page in full ink, the
   book's next readings following below. */
.book-mode { display: inline-flex; flex: none; margin-left: auto; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; }
.book-mode button { padding: 5px 12px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.book-mode button[aria-pressed="true"] { background: var(--green); color: #fff; }
.listen-card .card-heading { gap: 10px; }
/* The reading's "edit text" as a round pencil beside the audiobook / web book switch. */
.listen-card #edit-reading.icon-only { display: grid; place-items: center; flex: none; width: 38px; height: 38px; min-height: 0; padding: 0; border-radius: 50%; }
body.webbook .listen-card > *:not(.card-heading):not(.direction-card):not(.book-page):not(audio):not(.link-signin) { display: none !important; }
body.webbook .direction-card #direction-summary, body.webbook .direction-card .narrator-now,
body.webbook .direction-card .voice-controls:not(.reading-controls):not(.study-controls), body.webbook .direction-card .art-hint, body.webbook .mini-player { display: none !important; }
body.webbook .book-page.reading .read-part:not(.current) { color: inherit; }
.book-page-other { margin-top: 3em; padding-top: 2.2em; border-top: 1px solid var(--line); }
/* A reading added above the open one: the line between them over the open reading's title, none at the top of the page. */
.book-page-other:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.book-page-other ~ .book-page-title { margin-top: 3em; padding-top: 2.2em; border-top: 1px solid var(--line); }
/* A web book's pictures, each set above the paragraph where its part begins, whole (not cut to a frame) and fading
   softly into the page at every edge; a tap shows it whole on the screen. */
.book-page-art { position: relative; margin: 1.8em auto; cursor: zoom-in; }
/* The admin's way to take a wrong picture away (client/webbook.js dropPicture). */
.book-page-art .art-drop { position: absolute; top: 10px; right: 10px; z-index: 2; padding: 5px 11px; border: 0; border-radius: 999px; background: color-mix(in srgb, #000 58%, transparent); color: #fff; font: 600 12px/1.2 'Pretendard', 'Apple SD Gothic Neo', sans-serif; cursor: pointer; }
.book-page-art.zoomed .art-drop { top: 16px; right: 16px; }
.book-page-art img { display: block; width: 100%; height: auto; border-radius: 22px; opacity: 0; transform: scale(.985); transition: opacity 1.1s ease, transform 1.1s ease;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent); mask-composite: intersect; }
.book-page-art.shown img, .book-page-art.zoomed img { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .book-page-art img { transition: none; transform: none; } }
.book-page-art.zoomed { position: fixed; inset: 0; z-index: 1000; margin: 0; display: flex; align-items: center; justify-content: center; background: #0e110e; cursor: zoom-out; }
.book-page-art.zoomed img { width: auto; max-width: 100%; max-height: 100%; border-radius: 0; -webkit-mask-image: none; mask-image: none; }
/* The page shows the pictures; the scene's own picture is the full screen's (and the lock screen's). */
body:not(.immersive) .listen-card:has(> .book-page:not([hidden])) > .scene-art { display: none !important; }
.book-page-loading.working::after { content: ''; display: block; width: 22px; height: 22px; margin: 12px auto 0; border: 2.5px solid var(--line-strong); border-top-color: var(--green); border-radius: 50%; animation: dajeong-spin .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .book-page-loading.working::after { animation-duration: 2.4s; } }
.book-page-loading .book-page-more { margin-left: 6px; padding: 4px 12px; font-size: 13px; }
/* An audiobook's page tapped to play or pause: the sign shown a moment over its middle (client/book-page.js). */
.page-tap-sign { position: fixed; z-index: 30; display: grid; place-items: center; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 55%, transparent); color: #fff; font-size: 24px; pointer-events: none; opacity: 0; animation: page-tap-sign .7s ease-out; }
@keyframes page-tap-sign { 15% { opacity: .9; } 100% { opacity: 0; transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .page-tap-sign { animation-duration: 1.2s; } }
body:not(.webbook) .book-page { cursor: pointer; }
/* While an audiobook's page is paused, a soft round play button rests over its middle (client/book-page.js): sticky
   in the page's own scroll, so it stays in the middle as the page scrolls, and of no height, so it moves no text. It
   fades in gently once playback stops and out at once when it starts (or while the next part loads). */
.page-play-hint { position: sticky; top: calc(50% - 34px); z-index: 2; height: 0; display: flex; justify-content: center; pointer-events: none; }
/* Shown, the circle takes the touch first (over a picture too: the page plays); hidden, touches pass to what is under it. */
.page-play-hint > span { pointer-events: auto; cursor: pointer; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: rgba(0, 0, 0, .26); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); color: rgba(255, 255, 255, .95); box-shadow: 0 4px 18px rgba(0, 0, 0, .12); opacity: .85; transition: opacity .7s ease .35s, transform .7s ease .35s; }
/* The triangle is drawn with its weight at the middle of its box (its centroid), so it needs no nudge. */
.page-play-hint svg { display: block; width: 28px; height: 28px; }
body.playing .page-play-hint > span, body:has(#play-toggle.loading) .page-play-hint > span { pointer-events: none; opacity: 0; transform: scale(.9); transition-duration: .2s; transition-delay: 0s; }
body.webbook .page-play-hint, body.immersive .page-play-hint { display: none; }
@media (prefers-reduced-motion: reduce) { .page-play-hint > span { transition: opacity .4s; transform: none !important; } }
.book-page-loading.working { animation: dajeong-blink 1.3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .book-page-loading.working { animation-duration: 3s; } }
.book-page-loading { color: var(--muted); text-align: center !important; text-indent: 0 !important; font-size: .9em; }
/* A book's genre tints the app a little while it is open (client/book-look.js): the accent, the paper and the readings' numbers only,
   the cards and the words as they are; light and dark each have their own. */
:root[data-look="ink"] { --number: #7d8ba3; --green: #56657a; --green-dark: #3d4b60; --badge-ink: #4c5d73; --soft: #f0f2f4; --soft-2: #e1e5eb; --line-strong: #ccd3dc; --glow: rgba(220, 226, 236, .7); --paper: #f4f4f1; --paper-glass: rgba(244, 244, 241, .96); }
:root[data-look="rose"] { --number: #b08690; --green: #8a5a63; --green-dark: #6e424b; --badge-ink: #7d5059; --soft: #f7f0ee; --soft-2: #efe1df; --line-strong: #e0cdca; --glow: rgba(240, 222, 220, .7); --paper: #f8f3ef; --paper-glass: rgba(248, 243, 239, .96); }
:root[data-look="apricot"] { --number: #bf9068; --green: #93633a; --green-dark: #774b25; --badge-ink: #85582f; --soft: #f8f1e7; --soft-2: #f0e3d1; --line-strong: #e3d0b6; --glow: rgba(244, 228, 206, .7); --paper: #f9f4ea; --paper-glass: rgba(249, 244, 234, .96); }
:root[data-look="teal"] { --number: #6f9c9f; --green: #3f6f72; --green-dark: #2c5558; --badge-ink: #3a6366; --soft: #edf4f3; --soft-2: #dde9e8; --line-strong: #c6d8d7; --glow: rgba(214, 232, 230, .7); --paper: #f3f6f3; --paper-glass: rgba(243, 246, 243, .96); }
:root[data-look="amber"] { --number: #a8975d; --green: #7b6a33; --green-dark: #5f5020; --badge-ink: #6e5f2c; --soft: #f5f2e6; --soft-2: #ebe5cf; --line-strong: #dbd2b2; --glow: rgba(236, 228, 200, .7); --paper: #f8f5ec; --paper-glass: rgba(248, 245, 236, .96); }
:root[data-look="mauve"] { --number: #9789ad; --green: #6d5f80; --green-dark: #534666; --badge-ink: #625575; --soft: #f3f1f4; --soft-2: #e7e2ea; --line-strong: #d6cfdb; --glow: rgba(230, 224, 236, .7); --paper: #f6f4f2; --paper-glass: rgba(246, 244, 242, .96); }
:root[data-theme="dark"][data-look="ink"] { --green: #8b9cb8; --green-dark: #5f7596; --badge-ink: #b3c0d6; --soft: #1f2329; --soft-2: #2a2f37; --line-strong: #3a414c; --glow: rgba(70, 82, 104, .28); --paper: #13161a; --paper-glass: rgba(19, 22, 26, .94); }
:root[data-theme="dark"][data-look="rose"] { --green: #c08f98; --green-dark: #9a6670; --badge-ink: #dcb6bc; --soft: #2a2124; --soft-2: #362a2e; --line-strong: #4a3a3f; --glow: rgba(110, 70, 80, .28); --paper: #191416; --paper-glass: rgba(25, 20, 22, .94); }
:root[data-theme="dark"][data-look="apricot"] { --green: #c99a6c; --green-dark: #9a6c42; --badge-ink: #e2c09c; --soft: #2a241d; --soft-2: #362e25; --line-strong: #4b3f32; --glow: rgba(110, 84, 56, .28); --paper: #191611; --paper-glass: rgba(25, 22, 17, .94); }
:root[data-theme="dark"][data-look="teal"] { --green: #6fa9ac; --green-dark: #467f82; --badge-ink: #a3cdcf; --soft: #1d2727; --soft-2: #263333; --line-strong: #364646; --glow: rgba(56, 96, 98, .28); --paper: #121818; --paper-glass: rgba(18, 24, 24, .94); }
:root[data-theme="dark"][data-look="amber"] { --green: #b4a466; --green-dark: #85743a; --badge-ink: #d3c695; --soft: #26241b; --soft-2: #312e22; --line-strong: #464131; --glow: rgba(100, 90, 50, .28); --paper: #171610; --paper-glass: rgba(23, 22, 16, .94); }
:root[data-theme="dark"][data-look="mauve"] { --green: #a698b9; --green-dark: #78698f; --badge-ink: #c8bdd6; --soft: #242129; --soft-2: #2f2b35; --line-strong: #423c4a; --glow: rgba(88, 76, 104, .28); --paper: #161419; --paper-glass: rgba(22, 20, 25, .94); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-look="ink"] { --green: #8b9cb8; --green-dark: #5f7596; --badge-ink: #b3c0d6; --soft: #1f2329; --soft-2: #2a2f37; --line-strong: #3a414c; --glow: rgba(70, 82, 104, .28); --paper: #13161a; --paper-glass: rgba(19, 22, 26, .94); }
  :root:not([data-theme="light"])[data-look="rose"] { --green: #c08f98; --green-dark: #9a6670; --badge-ink: #dcb6bc; --soft: #2a2124; --soft-2: #362a2e; --line-strong: #4a3a3f; --glow: rgba(110, 70, 80, .28); --paper: #191416; --paper-glass: rgba(25, 20, 22, .94); }
  :root:not([data-theme="light"])[data-look="apricot"] { --green: #c99a6c; --green-dark: #9a6c42; --badge-ink: #e2c09c; --soft: #2a241d; --soft-2: #362e25; --line-strong: #4b3f32; --glow: rgba(110, 84, 56, .28); --paper: #191611; --paper-glass: rgba(25, 22, 17, .94); }
  :root:not([data-theme="light"])[data-look="teal"] { --green: #6fa9ac; --green-dark: #467f82; --badge-ink: #a3cdcf; --soft: #1d2727; --soft-2: #263333; --line-strong: #364646; --glow: rgba(56, 96, 98, .28); --paper: #121818; --paper-glass: rgba(18, 24, 24, .94); }
  :root:not([data-theme="light"])[data-look="amber"] { --green: #b4a466; --green-dark: #85743a; --badge-ink: #d3c695; --soft: #26241b; --soft-2: #312e22; --line-strong: #464131; --glow: rgba(100, 90, 50, .28); --paper: #171610; --paper-glass: rgba(23, 22, 16, .94); }
  :root:not([data-theme="light"])[data-look="mauve"] { --green: #a698b9; --green-dark: #78698f; --badge-ink: #c8bdd6; --soft: #242129; --soft-2: #2f2b35; --line-strong: #423c4a; --glow: rgba(88, 76, 104, .28); --paper: #161419; --paper-glass: rgba(22, 20, 25, .94); }
}

/* A book of one's own held after a report: what happened and a way to ask for it to be looked at again. */
.held-review { margin: 10px 0; padding: 12px 14px; border: 1px solid var(--warm-line); border-radius: 12px; background: var(--warm); }
.held-review-state { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--warm-ink); }
.held-review .button { margin-top: 8px; }

/* New readings a writer added to a book on the shelf: how many, in a small circle on the book; "새 분량" on each reading. */
.fresh-badge { position: absolute; top: 6px; right: 6px; z-index: 2; display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 11px; background: var(--danger); color: #fff; font-size: 12px; font-weight: 700; line-height: 1; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
/* A reading being made on the server now (client/classics.js markMaking): its number and a word by its title blink. */
.making-mark { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); font-size: 10px; font-weight: 700; vertical-align: middle; }
.library-item.making .making-mark { animation: dajeong-blink 1.3s ease-in-out infinite; }
.library-item.making .order-badge { animation: dajeong-blink 1.3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .status.alert.working, .library-item.making .making-mark, .library-item.making .order-badge { animation-duration: 3s; } }
/* A work's genre by its title on the writers' shelf, and the row of genres to see it by. */
.genre-badge { display: inline-block; padding: 1px 7px; border-radius: 6px; background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green-dark); font-size: 10px; font-weight: 700; vertical-align: middle; }
.showcase-genres { margin-top: -4px; }
.showcase-genres[hidden] { display: none; }
/* The end of a reading: its book recommended (client/recommend.js). */
.recommend { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0; padding: 12px 14px; border-radius: 14px; background: var(--soft); }
.recommend[hidden] { display: none; }
.recommend-ask { font-size: 13px; font-weight: 600; }
.recommend-button { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 6px 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--card); color: var(--ink); font-size: 13px; font-weight: 700; cursor: pointer; }
.recommend-button[aria-pressed="true"] { border-color: var(--green); background: color-mix(in srgb, var(--green) 16%, var(--card)); color: var(--green-dark); }
.recommend-icon { flex: none; fill: none; }
/* The book's page: a small mark when it was recommended, pressed to take it back. */
.recommend-mark { display: inline-flex; align-items: center; gap: 5px; margin: 2px 0 8px; padding: 4px 11px 4px 9px; border: 1px solid color-mix(in srgb, var(--green) 45%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green-dark); font-size: 12px; font-weight: 700; cursor: pointer; }
.recommend-mark[hidden] { display: none; }
.recommend-mark .recommend-icon { width: 14px; height: 14px; fill: currentColor; }
/* A library card's recommendations, in its bottom right corner. */
.classics-card:has(.classics-card-likes) { position: relative; }
.classics-card-likes { position: absolute; right: 10px; bottom: 9px; z-index: 1; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 6px; border-radius: 999px; background: color-mix(in srgb, var(--card) 82%, transparent); color: var(--green-dark); font-size: 12px; font-weight: 700; line-height: 1; }
.classics-card-likes .recommend-icon { width: 14px; height: 14px; fill: currentColor; }
.recommend-button[aria-pressed="true"] .recommend-icon { fill: currentColor; }
.fresh-mark { display: inline-block; padding: 1px 6px; border-radius: 6px; background: var(--warm); color: var(--warm-ink); font-size: 10px; font-weight: 700; vertical-align: middle; }

/* A book's readings: the contents (one to a line) or tiles, chosen above the list (client/library.js); ordering and
   deleting only while "순서 편집" is on. */
.reading-tools { display: flex; align-items: center; gap: 12px; margin: 14px 0 6px; }
.reading-tools .reading-view { margin-left: 0; }
.reading-edit { margin-left: auto; font-size: 13px; font-weight: 600; }
.reading-edit[aria-pressed="true"] { color: var(--danger); }
#library-list:not(.editing) .chapter-order, #library-list:not(.editing) .library-delete { display: none; }
/* The contents: no picture room when the book has none; on a wide screen each reading's opening words. */
#library-list:not(.view-tiles):not(.has-thumbs) .reading-thumb { display: none; }
.library-open .library-excerpt { display: none; }
@media (min-width: 600px) {
  #library-list:not(.view-tiles) .library-open .library-excerpt { display: block; margin-top: 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--muted-2); font-size: 12px; }
}
/* Tiles: two to a line on a phone, three on a tablet, four on a computer, read left to right like an album; the
   picture above, the number on it (large, in its place, while it has none), the title below. */
#library-list.view-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-content: start; padding-top: 6px; }
#library-list.view-tiles > :not(.library-item) { grid-column: 1 / -1; }
@media (min-width: 600px) { #library-list.view-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 900px) { #library-list.view-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.view-tiles .library-item { position: relative; flex-direction: column; align-items: stretch; gap: 0; padding: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--card); }
.view-tiles .library-open { flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
.view-tiles .library-open .reading-thumb { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 0; visibility: visible; }
/* A little nearer, so the paper's edge some pictures are painted with stays out of the tile. */
.view-tiles .library-open .reading-thumb img { transform: scale(1.08); }
.view-tiles .library-open .reading-thumb.empty { display: grid; place-items: center; background: var(--soft); }
.view-tiles .library-open .reading-thumb.empty::after { content: attr(data-n); font-size: 34px; font-weight: 700; color: var(--number, #7f9c86); font-variant-numeric: tabular-nums; }
.view-tiles .library-open .order-badge { position: absolute; top: 8px; left: 8px; z-index: 1; width: 32px; height: 26px; border-radius: 8px; font-size: 13px; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.view-tiles .library-open:has(.reading-thumb.empty) .order-badge { display: none; }
.view-tiles .library-open .library-words { padding: 10px 12px 12px; }
.view-tiles .library-open strong { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.view-tiles .library-open .library-words > span { margin-top: 5px; }

/* The full screen's 음악 beside 자막: the same button, to its left (client/music.js). */
body.immersive .immersive-music { right: max(132px, calc(var(--art-right, 0px) + 80px)); }
/* Admin: the books' music (each score's cues, to hear and mend). */
.admin-score-head small { color: var(--muted, #777); }
.admin-score-cue { padding: 10px 0; border-top: 1px solid var(--line, rgba(127,127,127,.2)); }
.admin-score-cue audio { display: block; width: 100%; margin-top: 6px; }
.admin-score-cue .actions { margin-top: 6px; }
/* ── The welcome over an empty bookshelf (client/welcome.js): a dark, cinematic window of its own (its pictures are
   painted at night and dusk, so it is dark in either theme), each step sliding in over the last. ── */
body.welcome-open { overflow: hidden; }
.welcome { position: fixed; inset: 0; z-index: 80; overflow-y: auto; overscroll-behavior: contain; background: #0d1117; color: #f4f1ea; opacity: 1; transition: opacity .35s ease; }
.welcome.leaving { opacity: 0; pointer-events: none; }
.welcome-step { position: relative; min-height: 100%; box-sizing: border-box; padding: max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); max-width: 980px; margin: 0 auto; opacity: 0; transform: translateX(28px); transition: opacity .45s ease, transform .45s cubic-bezier(.2, .7, .2, 1); }
.welcome-step.in { opacity: 1; transform: none; }
.welcome-title { margin: 14px 0 18px; font-family: var(--book-font); font-size: clamp(24px, 6.4vw, 40px); line-height: 1.3; font-weight: 700; letter-spacing: -.01em; text-shadow: 0 2px 18px rgba(0, 0, 0, .55); }
.welcome-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.welcome-back, .welcome-later { border: 0; background: rgba(255, 255, 255, .1); color: inherit; font: inherit; font-size: 14px; padding: 8px 14px; border-radius: 999px; cursor: pointer; }
.welcome-later { background: transparent; color: rgba(244, 241, 234, .7); text-decoration: underline; text-underline-offset: 3px; }
/* The first step: the genres' pictures slowly following one another behind the two ways in. */
.welcome-step:has(.welcome-show) { max-width: none; display: flex; flex-direction: column; justify-content: flex-end; min-height: 100dvh; }
.welcome-show { position: fixed; inset: 0; z-index: 0; }
.welcome-show img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: welcome-show 32s linear infinite; }
.welcome-show::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(13, 17, 23, .15) 0%, rgba(13, 17, 23, .35) 45%, rgba(13, 17, 23, .94) 78%, #0d1117 100%); }
@keyframes welcome-show { 0% { opacity: 0; transform: scale(1.08); } 3% { opacity: 1; } 12.5% { opacity: 1; } 16% { opacity: 0; transform: scale(1); } 100% { opacity: 0; } }
.welcome-front { position: relative; z-index: 1; width: 100%; max-width: 980px; margin: 0 auto; }
.welcome-ways { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 14px; }
@media (min-width: 640px) { .welcome-ways { grid-template-columns: 1fr 1fr; } }
.welcome-way { position: relative; display: grid; gap: 4px; align-content: end; min-height: 128px; padding: 18px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 18px; overflow: hidden; background: #1b222c; color: #fff; text-align: start; font: inherit; cursor: pointer; transition: transform .25s ease, border-color .25s ease; }
.welcome-way img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: opacity .3s ease, transform .6s ease; }
.welcome-way::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, .1)); }
.welcome-way > strong, .welcome-way > span { position: relative; z-index: 2; }
.welcome-way > strong { font-size: 21px; }
.welcome-way > span { font-size: 14px; color: rgba(255, 255, 255, .82); }
.welcome-way:hover img, .welcome-way:focus-visible img { opacity: .75; transform: scale(1.04); }
.welcome-way:active { transform: scale(.985); }
/* The genres, as painted cards. */
.welcome-genres { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 720px) { .welcome-genres { grid-template-columns: repeat(4, 1fr); } }
.welcome-genre { position: relative; aspect-ratio: 3 / 4; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: #1b222c; color: #fff; font: inherit; cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); transition: transform .25s ease; }
.welcome-genre img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.welcome-genre::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .75) 0%, transparent 45%); }
.welcome-genre > strong { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 12px; text-align: start; font-size: 19px; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.welcome-genre:hover img, .welcome-genre:focus-visible img { transform: scale(1.06); }
.welcome-genre:active { transform: scale(.97); }
/* A genre's three picks under its picture; a cover pressed plays. */
.welcome-hero { position: relative; margin: 12px -16px 4px; height: 38vh; min-height: 200px; display: flex; align-items: flex-end; padding: 0 16px; overflow: hidden; }
.welcome-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.welcome-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(13, 17, 23, 0) 30%, #0d1117 100%); }
.welcome-hero .welcome-title { position: relative; z-index: 1; margin-bottom: 8px; }
.welcome-picks { display: grid; gap: 12px; margin: 8px 0 16px; }
.welcome-pick { display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; background: rgba(255, 255, 255, .06); color: inherit; font: inherit; text-align: start; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.welcome-pick:hover, .welcome-pick:focus-visible { background: rgba(255, 255, 255, .11); }
.welcome-pick:active { transform: scale(.985); }
.welcome-cover { width: 76px; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: #2a3340; box-shadow: 0 6px 18px rgba(0, 0, 0, .4); }
.welcome-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.welcome-pick-words { display: grid; gap: 4px; min-width: 0; }
.welcome-pick-words strong { font-size: 17px; overflow-wrap: anywhere; }
.welcome-pick-words span { font-size: 13px; color: rgba(244, 241, 234, .7); }
.welcome-play { white-space: nowrap; padding: 8px 14px; border-radius: 999px; background: #f4f1ea; color: #0d1117; font-size: 14px; font-weight: 700; }
.welcome-more { display: block; margin: 0 auto; }
/* One's own book: how it goes, then the two ways to start. */
.welcome-steps { list-style: none; margin: 8px 0 18px; padding: 0; display: grid; gap: 12px; }
.welcome-steps li { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 12px; font-size: 16px; }
.welcome-steps b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.welcome-own { display: grid; gap: 10px; }
@media (min-width: 640px) { .welcome-own { grid-template-columns: 1fr 1fr; } }
.welcome-own-button { width: 100%; min-height: 52px; font-size: 17px; }
.welcome-own-note { margin-top: 12px; color: rgba(244, 241, 234, .65) !important; }
@media (prefers-reduced-motion: reduce) {
  .welcome-step { transform: none; transition: opacity .3s; }
  .welcome-show img { animation: none; } .welcome-show img:first-child { opacity: 1; }
  .welcome-genre img, .welcome-way img { transition: none; }
}

/* The sign-in window (client/signin.js): the way in on the left, the genres' pictures on the right (above, on a phone). */
.link-signin-card.signin-card { position: relative; width: min(100%, 860px); max-height: calc(100dvh - 40px); overflow-y: auto; padding: 0; display: grid; grid-template-columns: 1fr 1fr; text-align: start; border-radius: 24px; }
.signin-side { order: 1; display: flex; flex-direction: column; justify-content: center; gap: 0; padding: 40px 34px 30px; }
.signin-card .signin-side > strong { font-size: 26px; line-height: 1.35; letter-spacing: -.01em; }
.signin-card .signin-side > p#link-signin-text { margin: 10px 0 24px; font-size: 15px; }
.signin-art { order: 2; position: relative; min-height: 420px; overflow: hidden; background: #0d1117; }
.signin-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: signin-art 20s linear infinite; }
.signin-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(13, 17, 23, 0) 40%, rgba(13, 17, 23, .45) 100%); }
@keyframes signin-art { 0% { opacity: 0; transform: scale(1.08); } 5% { opacity: 1; } 25% { opacity: 1; } 30% { opacity: 0; transform: scale(1); } 100% { opacity: 0; } }
.signin-ways { display: grid; gap: 12px; }
.signin-way { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 50px; padding: 0 18px; border: 1px solid var(--line-strong, #d6d6d6); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.signin-way:hover, .signin-way:focus-visible { background: var(--soft, #f4f4f4); border-color: var(--ink-soft, #999); }
.signin-email { display: grid; gap: 10px; }
.signin-email[hidden], .signin-ways[hidden], .signin-verify[hidden] { display: none; }
.signin-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.signin-links { display: flex; justify-content: space-between; gap: 10px; }
.signin-verify { display: grid; gap: 10px; }
.signin-verify p { margin: 0; font-size: 15px; line-height: 1.6; }
.signin-note { min-height: 1.4em; margin: 12px 0 0 !important; font-size: 14px !important; }
.signin-note.bad { color: var(--danger, #c0392b) !important; }
.signin-consent { margin-top: 18px !important; font-size: 12.5px !important; }
.signin-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #222; font-size: 24px; line-height: 1; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .2); }
@media (max-width: 720px) {
  .link-signin-card.signin-card { grid-template-columns: 1fr; width: min(100%, 440px); }
  .signin-art { order: 0; min-height: 0; height: 170px; }
  .signin-side { padding: 24px 20px 20px; }
  .signin-card .signin-side > strong { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .signin-art img { animation: none; } .signin-art img:first-child { opacity: 1; } }

/* Installing the web app (client/install.js): a sheet rising from the bottom of the screen. */
.install-sheet { position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 70; max-width: 520px; margin: 0 auto; padding: 16px 16px 12px; border-radius: 20px; background: var(--card); color: var(--ink); box-shadow: 0 14px 44px rgba(0, 0, 0, .28); transform: translateY(140%); transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.install-sheet.in { transform: none; }
.install-head { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; }
.install-icon { width: 52px; height: 52px; border-radius: 14px; }
.install-words { display: grid; gap: 2px; }
.install-words strong { font-size: 16px; line-height: 1.35; }
.install-words span { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }
.install-body p { margin: 10px 0 0; font-size: 14px; color: var(--ink-soft); line-height: 1.6; }
.install-steps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.install-steps li { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 10px; font-size: 14.5px; }
.install-steps b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--soft, #eee); font-size: 13px; }
.install-steps svg { vertical-align: -3px; margin-left: 2px; }
.install-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .install-sheet { transition: none; } }

/* Admin: the books one to a line, a classic's making as a bar. */
.admin-book-list { display: grid; gap: 0; border: 1px solid var(--line-strong, #ddd); border-radius: 14px; overflow: hidden; background: var(--card); }
.admin-book-row { display: grid; grid-template-columns: minmax(180px, 2.2fr) minmax(120px, 1.3fr) minmax(160px, 2fr) minmax(110px, 1.2fr) 92px; gap: 12px; align-items: center; padding: 9px 14px; border-top: 1px solid var(--line, rgba(127, 127, 127, .15)); font-size: 13.5px; }
.admin-book-row:first-child { border-top: 0; }
.admin-book-row.waiting { background: color-mix(in srgb, #d9822b 8%, transparent); }
.admin-book-headrow { font-size: 12px; font-weight: 700; color: var(--ink-soft); background: var(--soft, #f4f4f4); }
.admin-book-name, .admin-book-who { display: grid; min-width: 0; }
.admin-book-name strong, .admin-book-name span, .admin-book-who span, .admin-book-who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-book-name span, .admin-book-who small, .admin-book-when { color: var(--ink-soft); font-size: 12px; }
.admin-book-bar { position: relative; height: 22px; border-radius: 6px; background: var(--soft, #eee); overflow: hidden; }
.admin-book-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--green, #587560); opacity: .85; }
.admin-book-bar em { position: relative; display: block; padding: 0 8px; font-style: normal; font-size: 12px; line-height: 22px; font-weight: 700; color: var(--ink); white-space: nowrap; mix-blend-mode: normal; text-shadow: 0 0 3px var(--card); }
.admin-book-bar.none { background: transparent; }
.admin-book-bar.none em { color: var(--ink-soft); font-weight: 500; padding: 0; text-shadow: none; }
.admin-book-marks { display: flex; flex-wrap: wrap; gap: 4px; }
@media (max-width: 760px) {
  .admin-book-row { grid-template-columns: 1fr 1fr; }
  .admin-book-headrow { display: none; }
  .admin-book-bar { grid-column: 1 / -1; }
}

/* The admin's books: the whole width (the cards' three columns no longer), small type, the pages under it. */
#admin-books { display: block !important; }
#admin-books > * { margin-bottom: 10px; }
.admin-toolbar:has(#admin-book-sort) select.title-input { min-width: 0; }
@media (min-width: 760px) { .admin-toolbar:has(#admin-book-sort) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) !important; } .admin-toolbar:has(#admin-book-sort) input { grid-column: auto; } }
.admin-book-row { font-size: 12px; padding: 7px 12px; grid-template-columns: minmax(160px, 2.2fr) minmax(120px, 1.4fr) minmax(220px, 2.4fr) minmax(110px, 1.3fr) 84px; }
.admin-book-name strong { font-size: 13px; }
.admin-book-name span, .admin-book-who small, .admin-book-when { font-size: 11px; }
.admin-book-headrow { font-size: 11px; }
.admin-book-bar { height: 18px; }
.admin-book-bar em { font-size: 11px; line-height: 18px; }
.admin-pager { display: flex; justify-content: center; align-items: center; gap: 12px; font-size: 12px; color: var(--ink-soft); }
.admin-pager .button { min-height: 34px; padding: 0 14px; font-size: 13px; }

/* Admin: the books tab's views, and the classics' making by language (the voice's bar the widest). */
.admin-views { display: inline-flex; gap: 4px; padding: 4px; margin: 6px 0 8px; border-radius: 999px; background: var(--soft, #f1f1f1); }
.admin-view { border: 0; border-radius: 999px; padding: 6px 14px; background: transparent; color: var(--ink-soft); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.admin-view[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.admin-progress-toolbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; max-width: 560px; }
.admin-progress-row { grid-template-columns: minmax(170px, 2fr) minmax(110px, 1.1fr) minmax(260px, 3fr) 92px 64px; }
.admin-voice-bar { height: 20px; }
.admin-voice-bar .admin-book-fill { background: #c9853a; }
.admin-progress-text { font-size: 11px; color: var(--ink-soft); }
.admin-recount { font-size: 11px; }
@media (max-width: 760px) { .admin-progress-row { grid-template-columns: 1fr 1fr; } }

/* The classics' making: a thin bar a kind (text, voice, pictures, music), each its colour. */
.admin-progress-row { grid-template-columns: minmax(170px, 2fr) minmax(110px, 1.1fr) minmax(300px, 3.6fr) 0 64px !important; }
.admin-meters { display: grid; gap: 3px; }
.admin-meter { display: grid; grid-template-columns: 30px minmax(0, 1fr) 150px; align-items: center; gap: 8px; font-size: 11px; }
.admin-meter b { font-weight: 700; color: var(--ink-soft); }
.admin-meter-track { position: relative; height: 7px; border-radius: 4px; background: var(--soft, #eee); overflow: hidden; }
.admin-meter .admin-book-fill { opacity: 1; }
.admin-meter.text .admin-book-fill { background: #6b8fb5; }
.admin-meter.voice .admin-book-fill { background: #c9853a; }
.admin-meter.art .admin-book-fill { background: #6f9a6c; }
.admin-meter.music .admin-book-fill { background: #9b7bb5; }
.admin-meter em { font-style: normal; color: var(--ink-soft); white-space: nowrap; }
.admin-meter.voice em { color: var(--ink); font-weight: 700; }
/* The classics' making as one bar, its kinds laid over one another (text widest and palest, the voice thinnest, on top). */
.admin-stack { display: grid; gap: 4px; }
.admin-stack-track { position: relative; height: 16px; border-radius: 5px; background: var(--soft, #eee); overflow: hidden; }
.admin-layer { position: absolute; left: 0; border-radius: 5px; }
.admin-layer.text { top: 0; bottom: 0; background: #b9cde3; }
.admin-layer.art { top: 3px; bottom: 3px; background: #7faa7b; }
.admin-layer.voice { top: 5px; bottom: 5px; background: #d1873a; }
.admin-stack-words { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; }
.admin-stack-words .text { color: #5b7da3; } .admin-stack-words .art { color: #557f52; }
.admin-stack-words .voice { color: #b06a22; font-weight: 700; } .admin-stack-words .music { color: #876aa0; }
/* Pointed at or tapped, the bar's kinds apart in a small window under it. */
.admin-stack { position: relative; outline: none; }
.admin-stack-detail { display: none; position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); min-width: 320px; padding: 10px 12px; border-radius: 10px; background: var(--card); box-shadow: 0 8px 26px rgba(0, 0, 0, .2); border: 1px solid var(--line-strong, #ddd); }
.admin-stack:hover .admin-stack-detail, .admin-stack:focus .admin-stack-detail, .admin-stack:focus-within .admin-stack-detail { display: block; }
.admin-stack-detail .admin-meter { grid-template-columns: 30px minmax(0, 1fr) 190px; }
.admin-stack-words .art.none { color: var(--ink-soft); }
.admin-stack-detail .admin-meter.art { grid-template-columns: 30px 1fr; }
/* The classics' making in the app's own green: the text a pale wash, the voice laid over it solid, the same height;
   the figures in quiet grey with the voice's in green. */
.admin-stack-track { height: 10px; border-radius: 999px; background: var(--soft, #efefea); }
.admin-layer { top: 0 !important; bottom: 0 !important; border-radius: 999px; }
.admin-layer.text { background: color-mix(in srgb, var(--green, #587560) 26%, transparent); }
.admin-layer.voice { background: var(--green, #587560); }
.admin-stack-words { gap: 2px 12px; }
.admin-stack-words span, .admin-stack-words .text, .admin-stack-words .art, .admin-stack-words .music { color: var(--ink-soft); font-weight: 500; }
.admin-stack-words .voice { color: var(--green-dark, #3f5a46); font-weight: 800; }
.admin-stack-words .art.none { opacity: .6; }
.admin-meter .admin-book-fill { background: var(--green, #587560) !important; }
.admin-meter.text .admin-book-fill { background: color-mix(in srgb, var(--green, #587560) 45%, transparent) !important; }
.admin-meter.music .admin-book-fill { background: color-mix(in srgb, var(--green, #587560) 70%, transparent) !important; }
.admin-meter-track { height: 6px; border-radius: 999px; }
.admin-progress-row { grid-template-columns: minmax(170px, 2fr) minmax(110px, 1.1fr) minmax(300px, 3.6fr) 0 76px !important; }
.admin-recount { white-space: nowrap; font-size: 11px; }
.admin-recount { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line-strong, #ddd); border-radius: 50%; background: var(--card); color: var(--ink-soft); cursor: pointer; }
.admin-recount:hover, .admin-recount:focus-visible { color: var(--green-dark, #3f5a46); border-color: var(--green, #587560); }
.admin-recount.working svg { animation: admin-turn 1s linear infinite; }
@keyframes admin-turn { to { transform: rotate(360deg); } }
.admin-progress-row { grid-template-columns: minmax(170px, 2fr) minmax(110px, 1.1fr) minmax(300px, 3.6fr) 0 40px !important; }
/* The cover's dot before the bar (orange: the work has its first picture; nothing, but its room kept, when it has not). */
.admin-stack-line { display: grid; grid-template-columns: 10px minmax(0, 1fr); align-items: center; gap: 6px; }
.admin-cover-dot { width: 9px; height: 9px; border-radius: 50%; background: #e08a2e; }
.admin-cover-dot.none { background: transparent; }
.admin-stack-words { padding-left: 16px; }

/* The admin's five menus, each page's switch under them. */
.admin-subtabs { margin: 2px 0 10px; }
.admin-subtabs[hidden] { display: none; }