/* ── StPageFlip base styles ──
   Ported from the vendored lib's own runtime style-injection (disabled in
   js/vendor/page-flip.js since the site's CSP style-src has no unsafe-inline
   and blocks dynamically-inserted <style> tags). Keep in sync if re-vendored. */
.stf__parent {
    position: relative;
    display: block;
    box-sizing: border-box;
    transform: translateZ(0);
    touch-action: none;
}
.stf__wrapper { position: relative; width: 100%; height: 100%; box-sizing: border-box; }
.stf__parent canvas { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
.stf__block { position: absolute; width: 100%; height: 100%; box-sizing: border-box; perspective: 2000px; }
.stf__item { display: none; position: absolute; transform-style: preserve-3d; }
.stf__outerShadow, .stf__innerShadow, .stf__hardShadow, .stf__hardInnerShadow { position: absolute; left: 0; top: 0; }

/* ── Reader shell ── */
.reader {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100vh;
    height: 100dvh;
    color: var(--cream);
    visibility: hidden;
    opacity: 0;
    transition: opacity 360ms ease, visibility 0s linear 360ms;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}
.reader.is-open { visibility: visible; opacity: 1; transition: opacity 360ms ease, visibility 0s; }
.reader-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(70vmax 50vmax at 50% 48%, rgba(230, 200, 130, 0.08), transparent 62%),
        radial-gradient(130vmax 100vmax at 50% 45%, var(--navy-800), var(--navy-950) 72%);
}
.reader-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.04;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 180px 180px;
}

/* top bar */
.reader-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 60px;
    padding: calc(var(--safe-t) + 8px) max(14px, var(--safe-r)) 6px max(16px, var(--safe-l));
    transition: transform 420ms var(--ease-out), opacity 300ms ease;
}
.reader-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.reader-logo { display: none; height: 26px; width: auto; flex: none; opacity: 0.92; }
.reader-section { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.reader-section-th {
    font-size: 16px;
    font-weight: 500;
    color: var(--gold-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.reader-section-en {
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cream-mute);
    white-space: nowrap;
}
.reader-tools { display: flex; align-items: center; gap: 6px; flex: none; }
.tool {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--cream-dim);
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.tool .ico { width: 20px; height: 20px; }
@media (hover: hover) {
    .tool:hover { background: rgba(255, 255, 255, 0.07); color: var(--cream); }
}
.tool:active { background: rgba(255, 255, 255, 0.1); }
.tool.is-active { color: var(--gold-bright); background: var(--gold-soft); }
.tool-desk { display: none; }
.tool-line {
    border-color: rgba(6, 199, 85, 0.42);
    background: rgba(6, 199, 85, 0.1);
    color: var(--cream);
    padding: 0 14px 0 11px;
}
.tool-line .ico { color: var(--line-green); }
@media (hover: hover) {
    .tool-line:hover { background: rgba(6, 199, 85, 0.2); border-color: var(--line-green); }
}
.tool-close {
    width: 42px;
    padding: 0;
    justify-content: center;
    margin-left: 4px;
    border-color: var(--cream-faint);
    background: rgba(255, 255, 255, 0.06);
    color: var(--cream);
}
.ico-fs-exit { display: none; }
.reader.is-fullscreen .ico-fs-enter,
.reader.is-immersive .ico-fs-enter { display: none; }
.reader.is-fullscreen .ico-fs-exit,
.reader.is-immersive .ico-fs-exit { display: block; }

/* stage + book */
.reader-stage { position: relative; min-height: 0; }
.book-area {
    position: absolute;
    inset: 6px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.book-rig {
    position: relative;
    flex: none;
    transition: transform 720ms cubic-bezier(.3, .7, .2, 1);
}
.book-rig.no-anim { transition: none; }
.book-rig::before {
    /* soft floor shadow under the open book */
    content: "";
    position: absolute;
    left: 4%; right: 4%;
    bottom: -3%;
    height: 12%;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), transparent 70%);
    filter: blur(8px);
    pointer-events: none;
    z-index: -1;
}
#catFlipbook { position: absolute; inset: 0; opacity: 1; transition: opacity 200ms ease; }
.reader.is-launching #catFlipbook { opacity: 0; transition: none; }
.reader.is-desktop #catFlipbook canvas { cursor: zoom-in; }
.spine-shade {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 8%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2) 50%, transparent);
    pointer-events: none;
    z-index: 3;
    transition: opacity 300ms ease;
}
.reader.is-portrait .spine-shade,
.reader.is-single .spine-shade { opacity: 0; }
.pageblock {
    position: absolute;
    top: 0.4%; bottom: 0.4%;
    width: 3px;
    background: repeating-linear-gradient(180deg, #d8c9a8 0 1px, #efe6d0 1px 2px, #bda77b 2px 3px);
    opacity: 0.6;
    border-radius: 2px;
    pointer-events: none;
    transition: width 300ms ease, opacity 300ms ease;
    z-index: 1;
}
.pageblock-left { right: 100%; }
.pageblock-right { left: 100%; }
.reader.is-portrait .pageblock { opacity: 0; }
.pageblock.is-hidden { opacity: 0; }

.toc-hotspots {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 50%;
    display: none;
    z-index: 4;
}
.reader.is-portrait .toc-hotspots { left: 0; width: 100%; }
.toc-hotspots.is-visible { display: block; }
.toc-hotspot {
    position: absolute;
    left: 18%; right: 4%;
    margin: 0; padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    transition: background-color 150ms ease, box-shadow 150ms ease;
}
@media (hover: hover) {
    .toc-hotspot:hover { background: rgba(201, 164, 94, 0.12); box-shadow: inset 0 0 0 1.5px rgba(201, 164, 94, 0.6); }
}

/* side arrows (desktop) */
.side-nav {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: none;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    margin-top: -28px;
    padding: 0;
    border: 1px solid var(--gold-line);
    border-radius: 999px;
    background: rgba(11, 20, 36, 0.55);
    color: var(--gold-bright);
    cursor: pointer;
    transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease, opacity 200ms ease;
}
.side-nav svg { width: 24px; height: 24px; }
.side-prev { left: max(18px, var(--safe-l)); }
.side-next { right: max(18px, var(--safe-r)); }
@media (hover: hover) {
    .side-nav:hover { background: var(--gold-soft); border-color: var(--gold); transform: scale(1.06); }
}
.side-nav:active { transform: scale(0.95); }
.side-nav:disabled { opacity: 0.2; cursor: default; transform: none; }

/* end card */
.end-card {
    position: absolute;
    z-index: 6;
    left: 50%; top: 50%;
    width: min(340px, 44%);
    padding: 30px 26px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid var(--gold-line);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(19, 34, 59, 0.96), rgba(11, 20, 36, 0.96));
    box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.8);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) scale(0.96);
    transition: opacity 420ms ease, transform 520ms var(--ease-out), visibility 0s linear 420ms;
}
.reader.is-landscape .end-card { left: 75%; }
.reader.is-portrait .end-card {
    top: auto;
    bottom: calc(8px - var(--rig-gap, 0px));
    width: min(360px, 94%);
    padding: 16px 18px 12px;
    transform: translate(-50%, 12px);
}
.reader.is-end .end-card {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
    transition: opacity 420ms ease 350ms, transform 520ms var(--ease-out) 350ms, visibility 0s;
}
.reader.is-end.is-portrait .end-card { transform: translate(-50%, 0); }
.end-rule { width: 48px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.end-brand { margin: 14px 0 8px; font-size: 11px; font-weight: 500; letter-spacing: 0.34em; color: var(--gold); }
.end-title { font-size: 22px; font-weight: 400; line-height: 1.35; color: var(--cream); }
.end-sub { margin: 6px 0 18px; font-size: 13.5px; line-height: 1.6; color: var(--cream-dim); }
.end-line { height: 50px; padding: 0 22px 0 18px; font-size: 15px; }
.end-line .ico { width: 20px; height: 20px; }
.end-links { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 13px; color: var(--cream-mute); }
.end-link {
    padding: 4px 2px;
    border: 0;
    background: none;
    color: var(--cream-dim);
    font-size: 13px;
    text-decoration: none;
    border-bottom: 1px solid var(--cream-faint);
    cursor: pointer;
}
.end-link:hover { color: var(--gold-bright); border-color: var(--gold-line); }
.reader.is-portrait .end-brand, .reader.is-portrait .end-rule { display: none; }
.reader.is-portrait .end-title { font-size: 16.5px; }
.reader.is-portrait .end-sub { display: none; }
.reader.is-portrait .end-line { height: 46px; margin-top: 10px; }
.reader.is-portrait .end-links { margin-top: 10px; }

/* hint + return chip */
.reader-hint {
    grid-area: 1 / 1;
    align-self: center;
    justify-self: center;
    max-width: 100%;
    padding: 9px 18px;
    border: 1px solid var(--gold-line);
    border-radius: 999px;
    background: rgba(8, 14, 26, 0.9);
    color: var(--cream);
    font-size: 13.5px;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 400ms ease, transform 400ms var(--ease-out);
}
.reader-hint.is-visible { opacity: 1; transform: translateY(0); }
.reader-bottom.has-hint .scrub { opacity: 0; pointer-events: none; }
.return-chip {
    position: absolute;
    left: 50%;
    top: 8px;
    z-index: 7;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 16px;
    border: 1px solid var(--gold-line);
    border-radius: 999px;
    background: rgba(11, 20, 36, 0.9);
    color: var(--gold-bright);
    font-size: 13px;
    cursor: pointer;
}
.return-chip[hidden] { display: none; }
.return-chip:hover { background: var(--gold-soft); }

/* bottom: scrubber + mobile toolbar */
.reader-bottom {
    padding: 4px max(14px, var(--safe-r)) calc(var(--safe-b) + 8px) max(14px, var(--safe-l));
    transition: transform 420ms var(--ease-out), opacity 300ms ease;
}
.reader-bottom-row { display: grid; }
.scrub {
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    height: 40px;
    transition: opacity 300ms ease;
}
.scrub-label {
    flex: none;
    min-width: 76px;
    font-size: 13.5px;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    color: var(--cream);
    white-space: nowrap;
}
.scrub-total { flex: none; font-size: 12.5px; color: var(--cream-mute); white-space: nowrap; }
.scrub-track { position: relative; flex: 1; height: 40px; display: flex; align-items: center; }
.scrub-ticks { position: absolute; left: 11px; right: 11px; top: 50%; height: 12px; margin-top: -6px; pointer-events: none; }
.scrub-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(245, 240, 230, 0.28); }
.scrub-input {
    --p: 0%;
    position: relative;
    width: 100%;
    height: 40px;
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    touch-action: none;
}
.scrub-input:focus-visible { outline-offset: 0; border-radius: 8px; }
.scrub-input::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--gold) 0, var(--gold-bright) var(--p), rgba(245, 240, 230, 0.16) var(--p));
}
.scrub-input::-moz-range-track {
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--gold) 0, var(--gold-bright) var(--p), rgba(245, 240, 230, 0.16) var(--p));
}
.scrub-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px; height: 22px;
    margin-top: -9px;
    border: 3px solid var(--navy-900);
    border-radius: 50%;
    background: var(--gold-bright);
    box-shadow: 0 0 0 1px var(--gold), 0 4px 12px rgba(0, 0, 0, 0.5);
    transition: transform 150ms ease;
}
.scrub-input::-moz-range-thumb {
    width: 16px; height: 16px;
    border: 3px solid var(--navy-900);
    border-radius: 50%;
    background: var(--gold-bright);
    box-shadow: 0 0 0 1px var(--gold), 0 4px 12px rgba(0, 0, 0, 0.5);
}
.scrub-input:active::-webkit-slider-thumb { transform: scale(1.15); }
.scrub-preview {
    position: absolute;
    bottom: 44px;
    left: 0;
    z-index: 8;
    width: 92px;
    padding: 5px 5px 7px;
    border: 1px solid var(--gold-line);
    border-radius: 10px;
    background: rgba(8, 14, 26, 0.95);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55);
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 6px);
    transition: opacity 150ms ease, transform 150ms ease;
}
.scrub-preview.is-visible { opacity: 1; transform: translate(-50%, 0); }
.scrub-preview img { display: block; width: 100%; height: auto; border-radius: 4px; background: #f3efe6; }
.scrub-preview span { display: block; margin-top: 5px; font-size: 11.5px; color: var(--cream); white-space: nowrap; }

.mobile-bar {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 2px;
    max-width: 520px;
    margin: 2px auto 0;
}
.mtool {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 54px;
    padding: 0 2px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--cream-dim);
    font-size: 11px;
    font-weight: 400;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}
.mtool .ico { width: 22px; height: 22px; }
.mtool span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mtool:active { background: rgba(255, 255, 255, 0.08); color: var(--cream); }
.mtool:disabled { opacity: 0.3; }
.mtool.is-active { color: var(--gold-bright); }

/* immersive (iPhone "full screen" fallback) */
.immersive-exit {
    position: absolute;
    top: calc(var(--safe-t) + 10px);
    right: max(12px, var(--safe-r));
    z-index: 9;
    display: none;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px 0 12px;
    border: 1px solid var(--cream-faint);
    border-radius: 999px;
    background: rgba(8, 14, 26, 0.72);
    color: var(--cream);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}
.immersive-exit .ico { width: 18px; height: 18px; }
.reader.is-immersive { grid-template-rows: 0 minmax(0, 1fr) 0; }
.reader.is-immersive .reader-top { transform: translateY(-110%); opacity: 0; pointer-events: none; }
.reader.is-immersive .reader-bottom { transform: translateY(110%); opacity: 0; pointer-events: none; }
.reader.is-immersive .immersive-exit { display: inline-flex; }
.reader.is-immersive .book-area { inset: calc(var(--safe-t) + 4px) 4px calc(var(--safe-b) + 4px); }

/* ── Contents drawer (desktop) / bottom sheet (mobile) ── */
.contents { position: absolute; inset: 0; z-index: 20; visibility: hidden; transition: visibility 0s linear 380ms; }
.contents.is-open { visibility: visible; transition: visibility 0s; }
.contents-scrim {
    position: absolute;
    inset: 0;
    background: rgba(4, 8, 15, 0.6);
    opacity: 0;
    transition: opacity 320ms ease;
}
.contents.is-open .contents-scrim { opacity: 1; }
.contents-panel {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: min(86%, 760px);
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--gold-line);
    border-radius: 22px 22px 0 0;
    background: linear-gradient(180deg, #11203a, #0b1424 40%);
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.5);
    transform: translateY(100%);
    transition: transform 380ms var(--ease-out);
}
.contents.is-open .contents-panel { transform: translateY(0); }
.contents-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 10px 22px;
}
.contents-head::before {
    content: "";
    position: absolute;
    top: 8px; left: 50%;
    width: 40px; height: 4px;
    margin-left: -20px;
    border-radius: 4px;
    background: rgba(245, 240, 230, 0.2);
}
.contents-title { font-size: 20px; font-weight: 500; color: var(--cream); }
.contents-body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding: 0 16px calc(var(--safe-b) + 24px);
    -webkit-overflow-scrolling: touch;
}
.contents-sections { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.contents-section {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 8px 12px 8px 8px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--cream);
    text-align: left;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease;
}
.contents-section img { display: block; width: 46px; height: 65px; object-fit: cover; border-radius: 4px; background: #efe9dd; }
.contents-section-th { display: block; font-size: 15.5px; font-weight: 500; line-height: 1.35; }
.contents-section-en { display: block; margin-top: 2px; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-mute); }
.contents-section-pages { font-size: 12.5px; color: var(--gold); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (hover: hover) {
    .contents-section:hover { background: var(--gold-soft); border-color: var(--gold-line); }
}
.contents-section.is-current { border-color: var(--gold-line); background: rgba(201, 164, 94, 0.1); }
.contents-subtitle {
    margin: 24px 4px 12px;
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--cream-mute);
}
.contents-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; }
.contents-thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--cream-mute);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}
.contents-thumb img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 160 / 226;
    border-radius: 4px;
    background: #efe9dd;
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition: outline-color 150ms ease, transform 150ms ease;
}
@media (hover: hover) {
    .contents-thumb:hover img { outline-color: var(--gold-line); transform: translateY(-2px); }
}
.contents-thumb.is-current { color: var(--gold-bright); }
.contents-thumb.is-current img { outline-color: var(--gold-bright); }

/* ── Zoom viewer ── */
.zoom {
    position: absolute;
    inset: 0;
    z-index: 30;
    background: rgba(4, 8, 15, 0.97);
    visibility: hidden;
    opacity: 0;
    transition: opacity 260ms ease, visibility 0s linear 260ms;
}
.zoom.is-open { visibility: visible; opacity: 1; transition: opacity 260ms ease, visibility 0s; }
.zoom-viewport {
    position: absolute;
    inset: 0;
    overflow: hidden;
    touch-action: none;
    cursor: grab;
}
.zoom-viewport.is-dragging { cursor: grabbing; }
.zoom-content {
    position: absolute;
    left: 0; top: 0;
    display: flex;
    transform-origin: 0 0;
    will-change: transform;
}
.zoom-content.is-animating { transition: transform 300ms var(--ease-out); }
.zoom-sheet {
    position: relative;
    flex: none;
    background: #f3efe6;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.zoom-sheet img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    -webkit-user-drag: none;
    pointer-events: none;
}
.zoom-sheet .zoom-hi { opacity: 0; transition: opacity 250ms ease; }
.zoom-sheet .zoom-hi.is-loaded { opacity: 1; }
.zoom-close { position: absolute; top: calc(var(--safe-t) + 12px); right: max(12px, var(--safe-r)); z-index: 2; background: rgba(11, 20, 36, 0.8); }
.zoom-bar {
    position: absolute;
    left: 50%;
    bottom: calc(var(--safe-b) + 16px);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border: 1px solid var(--cream-faint);
    border-radius: 999px;
    background: rgba(11, 20, 36, 0.88);
    transform: translateX(-50%);
}
.zoom-bar .icon-btn { border-color: transparent; background: transparent; }
.zoom-level { min-width: 52px; font-size: 13px; text-align: center; font-variant-numeric: tabular-nums; color: var(--cream); }
.zoom-hint {
    position: absolute;
    left: 50%;
    top: calc(var(--safe-t) + 18px);
    z-index: 2;
    max-width: calc(100% - 140px);
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(11, 20, 36, 0.85);
    color: var(--cream-dim);
    font-size: 13px;
    text-align: center;
    pointer-events: none;
    transform: translateX(-50%);
    transition: opacity 500ms ease;
}
.zoom-hint.is-faded { opacity: 0; }

/* toast + launch ghost */
.toast {
    position: absolute;
    left: 50%;
    bottom: calc(var(--safe-b) + 90px);
    z-index: 40;
    padding: 12px 20px;
    border: 1px solid var(--gold-line);
    border-radius: 999px;
    background: rgba(11, 20, 36, 0.95);
    color: var(--cream);
    font-size: 14px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 10px);
    transition: opacity 250ms ease, transform 250ms var(--ease-out);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.ghost {
    position: fixed;
    left: 0; top: 0;
    z-index: 200;
    display: none;
    transform-origin: 0 0;
    pointer-events: none;
    will-change: transform;
}
.ghost.is-flying { display: block; }
.ghost img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 2px 5px 5px 2px;
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.8);
}

/* ── Desktop chrome ── */
@media (min-width: 820px) {
    .reader-top { min-height: 72px; padding: calc(var(--safe-t) + 12px) max(20px, var(--safe-r)) 8px max(24px, var(--safe-l)); }
    .reader-logo { display: block; }
    .reader-id { gap: 18px; }
    .reader-section { padding-left: 18px; border-left: 1px solid var(--cream-faint); }
    .reader-section-th { font-size: 17px; }
    .tool-desk { display: inline-flex; }
    .tool-line span { display: inline; }
    .side-nav { display: inline-flex; }
    .book-area { inset: 8px 96px 4px; }
    .mobile-bar { display: none; }
    .reader-bottom { padding: 6px max(24px, var(--safe-r)) calc(var(--safe-b) + 14px) max(24px, var(--safe-l)); }
    .scrub { height: 44px; gap: 16px; }
    .toast { bottom: calc(var(--safe-b) + 84px); }

    .contents-panel {
        top: 0; bottom: 0; left: 0; right: auto;
        width: 420px;
        height: auto;
        border-top: 0;
        border-right: 1px solid var(--gold-line);
        border-radius: 0 22px 22px 0;
        transform: translateX(-100%);
    }
    .contents.is-open .contents-panel { transform: translateX(0); }
    .contents-head { padding: calc(var(--safe-t) + 22px) 18px 14px 26px; }
    .contents-head::before { display: none; }
    .contents-body { padding: 0 20px 28px; }
    .contents-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 820px) and (max-width: 1060px) {
    .tool-desk span, .tool-line span { display: none; }
    .tool-desk, .tool-line { width: 42px; padding: 0; justify-content: center; }
}
@media (min-width: 820px) and (max-height: 560px) {
    .reader-top { min-height: 52px; padding-top: calc(var(--safe-t) + 4px); padding-bottom: 2px; }
    .reader-logo { height: 20px; }
    .tool { height: 38px; }
    .tool-close { width: 38px; }
    .side-nav { width: 46px; height: 46px; margin-top: -23px; }
    .book-area { inset: 2px 76px 2px; }
    .reader-bottom { padding-bottom: calc(var(--safe-b) + 4px); }
    .scrub { height: 34px; }
}
@media (max-width: 819px) {
    .reader-top .tool-line span { display: none; }
    .reader-top .tool-line { width: 42px; padding: 0; justify-content: center; }
    .contents-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 380px) {
    .reader-hint { font-size: 12px; padding: 8px 12px; }
    .scrub-label { min-width: 64px; font-size: 12.5px; }
    .scrub-total { display: none; }
    .mtool { font-size: 10px; }
    .contents-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .reader, .reader.is-open, .book-rig, .contents-panel, .contents-scrim, .zoom, .end-card, .reader-hint, .toast, .zoom-content.is-animating { transition-duration: 1ms !important; transition-delay: 0s !important; }
}