/* Maintenance: edit this SCSS, then generate css/flipbook.css using scripts/build-css.py.
   For conventional Sass projects, `sass sass/flipbook.scss css/flipbook.css` also works. */
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; }
body { margin: 0; min-height: 100%; font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif; color: #162d2a; background: #f3f6f1; }
button, a { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .37; }
button:focus-visible, a:focus-visible, .reader__canvas:focus-visible { outline: 3px solid #ceaa4a; outline-offset: 3px; }
.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 21px; height: 21px; display: inline-block; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; stroke-linecap: round; flex: 0 0 auto; }
.reader { display:flex; flex-direction:column; min-height: 100vh; min-height: 100dvh; max-height: 100dvh; overflow: hidden; background: #f3f6f1; }
.reader__header { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap: 24px; padding: 14px clamp(22px,4vw,65px); color: #fff; background: linear-gradient(102deg, #5c1644, #a72471 68%, #08694d); box-shadow: 0 6px 24px rgba(6,55,41,.12); position:relative; z-index:5; }
.reader__brand, .reader__header-actions, .reader__action, .reader__nav, .reader__zoom, .reader__footer, .reader__progress { display: flex; align-items:center; }
.reader__brand { gap: 14px; min-width: 0; }
.reader__brand-mark { background: rgba(255,255,255,.12); width: 47px; height: 47px; border:1px solid rgba(255,255,255,.22); display:grid; place-items:center; border-radius: 15px; }
.reader__brand-mark .icon { width:28px; height:28px; }
.reader__eyebrow { font-size: 10px; letter-spacing:.21em; font-weight:700; margin:0 0 4px; color:#b4d9cd; }
.reader__eyebrow b { color:#e4b45d; }
.reader__title { font-size: clamp(16px,1.6vw,21px); letter-spacing:.04em; font-weight:800; margin:0; white-space:nowrap; }
.reader__title span { font-weight:500; opacity:.88; }
.reader__header-actions { gap: 10px; }
.reader__edition { font-size: 13px; font-weight:800; letter-spacing: .05em; color:#c8e4d9; margin-right: 13px; white-space:nowrap; }
.reader__edition span { font-size:10px; font-weight:500; }
.reader__action { gap:8px; padding: 11px 15px; min-height:43px; border-radius: 12px; color:#e7f5ee; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); font-size:12px; text-decoration:none; font-weight:700; white-space:nowrap; }
.reader__action:hover { background:rgba(255,255,255,.2); }
.reader__action--save { background: #fff; color:#a72471; }
.reader__action--save:hover { background:#f0f6ed; }
.reader__action .icon { width:18px; height:18px; }
.reader__main { flex:1 1 auto; display:flex; flex-direction:column; min-height:0; padding: 18px clamp(18px,4vw,65px) 0; }
.reader__subheading { flex: 0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:14px; font-size:12px; color: #687872; padding: 1px 2px 15px; }
.reader__chapter { font-size:10px; font-weight:800; letter-spacing:.13em; display:flex; align-items:center; gap:8px; color:#a72471; }
.reader__chapter-dot { width:7px; height:7px; background: #e4b45d; border-radius:50%; }
.reader__subheading-right { font-weight:600; }
.reader__canvas { flex:1 1 auto; position:relative; min-height: 0; display:flex; border:1px solid #e3eae2; border-radius:19px; background: radial-gradient(circle at 52% 38%, #fff 0, #f8f9f4 45%, #edf1e8 100%); box-shadow: inset 0 1px 3px rgba(255,255,255,.9); overflow:hidden; }
.reader__canvas::before, .reader__canvas::after { pointer-events:none; position:absolute; content:""; left:20px; right:20px; border-radius:50%; height:40px; background:rgba(8,57,43,.04); filter:blur(25px); }
.reader__canvas::before { top: 10%; }.reader__canvas::after { bottom: 4%; }
.reader__scroll { touch-action: pan-y; overscroll-behavior-x: contain; width:100%; flex:1 1 auto; min-width:0; min-height:0; overflow:auto; display:flex; align-items:center; padding:20px 36px; scrollbar-color:#c0cbc0 transparent; scrollbar-width:thin; }
.flipbook { --page-w:290px; --page-h:410px; --cover-scale:1; position:relative; flex:0 0 auto; width:calc(var(--page-w) * 2); height:var(--page-h); margin:auto; perspective:2200px; transform-style:preserve-3d; filter:drop-shadow(0 19px 16px rgba(19,48,37,.18)); }
.flipbook::before { content:""; position:absolute; inset:0; border-radius:3px; background:#eae7da; box-shadow: 2px 4px 0 #d9d9cc, 4px 8px 0 #e7e7dd, 6px 11px 0 rgba(100,95,76,.2); }
.flipbook__page { position:absolute; top:0; width:50%; height:100%; overflow:hidden; background:#fffdf8; box-shadow: inset 0 0 28px rgba(81,69,42,.065); }
.flipbook__page--left { left:0; border-radius:3px 0 0 3px; background-image: linear-gradient(110deg, #f5f1e7, #fffdf8 90%); box-shadow: inset -20px 0 23px -20px rgba(0,0,0,.22); }
.flipbook__page--right { left:50%; border-radius:0 3px 3px 0; box-shadow:inset 20px 0 23px -20px rgba(0,0,0,.22); }
.flipbook__page--empty { background:linear-gradient(90deg, #faf9f4, #fffdf9 55%, #f5f2e7); }
/* Do not let the author-level image display rule override the browser's [hidden] default. */
.flipbook__page img[hidden] { display:none; }
/* A closed book is a centered single cover, not an open spread with a blank half. */
.flipbook--front-cover, .flipbook--turn-to-front { transform-origin:75% 50%; transform:translateX(-25%) scale(var(--cover-scale)); }
.flipbook--back-cover, .flipbook--turn-to-back { transform-origin:25% 50%; transform:translateX(25%) scale(var(--cover-scale)); }
.flipbook--flipping.flipbook--front-cover, .flipbook--flipping.flipbook--back-cover { transform:translateX(0) scale(1); }
.flipbook--front-cover:not(.flipbook--flipping)::before { left:50%; width:50%; }
.flipbook--back-cover:not(.flipbook--flipping)::before { right:50%; width:50%; }
.flipbook--front-cover:not(.flipbook--flipping) .flipbook__page--left,
.flipbook--back-cover:not(.flipbook--flipping) .flipbook__page--right { visibility:hidden; }
.flipbook--front-cover:not(.flipbook--flipping) .flipbook__spine,
.flipbook--back-cover:not(.flipbook--flipping) .flipbook__spine { display:none; }
.flipbook__page img, .flipbook__leaf-side img { display:block; width:100%; height:100%; object-fit:fill; pointer-events:none; user-select:none; }
.flipbook__leaf { position:absolute; z-index:5; left:50%; top:0; width:50%; height:100%; transform-origin:0 50%; transform-style:preserve-3d; visibility:hidden; will-change:transform; }
.flipbook--flipping .flipbook__leaf { visibility:visible; }
.flipbook__leaf-side { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; overflow:hidden; background:#fffdf8; box-shadow: 0 0 18px rgba(4,21,17,.21); }
.flipbook__leaf-side--front { transform:rotateY(0); box-shadow:inset 10px 0 12px rgba(0,0,0,.07), 1px 0 8px rgba(0,0,0,.15); }
.flipbook__leaf-side--back { transform:rotateY(180deg); box-shadow:inset -10px 0 13px rgba(0,0,0,.08), -2px 0 8px rgba(0,0,0,.18); }
.flipbook__leaf-side::after { position:absolute; content:""; inset:0; pointer-events:none; background:linear-gradient(90deg, rgba(0,0,0,.09), transparent 20%, transparent 70%, rgba(0,0,0,.08)); }
.flipbook__spine { position:absolute; z-index:6; left:calc(50% - 5px); width:10px; top:0; bottom:0; pointer-events:none; background:linear-gradient(90deg, transparent,rgba(29,25,19,.18) 42%,rgba(255,255,255,.3) 52%,transparent); }
.flipbook--flipping .flipbook__spine { z-index:3; }
.flipbook--single { width:var(--page-w); transform:none; }
.flipbook--single::before { border-radius:3px; }
.flipbook--single .flipbook__page--left { display:none; }
.flipbook--single .flipbook__page--right { left:0; width:100%; }
.flipbook--single .flipbook__spine { display:none; }
.flipbook--single .flipbook__leaf { left:0; width:100%; }
.reader--zoomed .reader__scroll { touch-action:auto; }
.reader__edge { position:absolute; top:50%; z-index:7; width:46px; height:54px; border-radius:14px; border:1px solid #e5ebe5; background:rgba(255,255,255,.95); color:#a72471; box-shadow:0 5px 18px rgba(5,31,24,.1); display:grid; place-items:center; transform:translateY(-50%); }
.reader__edge:hover:not(:disabled) { background:#a72471; color:#fff; }
.reader__edge--prev { left:14px; }.reader__edge--next { right:14px; }
.reader__hint { text-align:center; font-size:11px; color:#819089; min-height:30px; padding:11px 0 0; margin:0; }
.reader__hint span { font-size:16px; line-height:0; margin-right:8px; }
.reader__footer { flex:0 0 auto; padding: 12px clamp(22px,4vw,65px) 16px; background:#fff; border-top:1px solid #dde6df; gap:24px; justify-content:space-between; }
.reader__progress { gap:13px; min-width:220px; }
.reader__progress-label { color:#8d9d94; font-size:10px; letter-spacing:.15em; font-weight:700; }
.reader__counter { color:#a72471; font-size:15px; font-weight:800; letter-spacing:.04em; white-space:nowrap; }
.reader__counter span { color:#9ea9a2; font-size:12px; font-weight:500; }
.reader__progress-track { height:4px; background:#e3ebe5; width:100px; border-radius:30px; overflow:hidden; }
.reader__progress-bar { display:block; height:100%; width:25%; background: #e4b45d; border-radius:30px; transition:width .35s; }
.reader__nav { gap:7px; }
.reader__zoom { gap:6px; }
.reader__control { display:grid; place-items:center; flex:0 0 auto; width:40px; height:40px; border:1px solid #e2e9e2; border-radius:11px; background:white; color:#527065; }
.reader__control:hover:not(:disabled) { color:#a72471; background:#edf4ed; }
.reader__control--primary { background:#a72471; color:#fff; border-color:#a72471; }
.reader__control--primary:hover:not(:disabled) { background:#137456; color:#fff; }
.reader__control .icon { width:19px; height:19px; }
.reader__zoom-value { background:none; border:none; min-width:48px; color:#162d2a; font-size:12px; font-weight:800; }
.reader__toolbar-divider { height:27px; width:1px; background:#dde6df; margin:0 6px; }
.thumbnails { border:0; padding:0; border-radius:19px; width:min(820px,calc(100vw - 28px)); max-height:min(88vh,760px); color:#162d2a; box-shadow:0 35px 90px rgba(0,0,0,.28); }
.thumbnails::backdrop { background:rgba(12,35,28,.63); backdrop-filter:blur(3px); }
.thumbnails__header { padding:24px 28px 19px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #dde6df; }
.thumbnails__header h2 { margin:4px 0 0; font-size:22px; }.thumbnails__eyebrow { margin:0; color:#a72471; font-size:10px; letter-spacing:.16em; font-weight:800; }
.thumbnails__close { display:grid; place-items:center; border:1px solid #dde6df; background:#fff; border-radius:10px; width:39px; height:39px; }
.thumbnails__list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; padding:24px 28px 30px; overflow:auto; }
.thumbnails__item { padding:10px; text-align:left; border:2px solid transparent; background:#f6f8f5; border-radius:13px; color:#162d2a; min-width:0; }
.thumbnails__item img { display:block; width:100%; aspect-ratio:1965/2779; object-fit:contain; box-shadow:0 3px 9px rgba(0,0,0,.14); margin-bottom:10px; }
.thumbnails__item span { font-size:11px; display:block; line-height:1.7; }.thumbnails__item b { color:#a72471; margin-right:4px; }
.thumbnails__item:hover, .thumbnails__item--active { border-color:#a72471; background:#ebf3ed; }
@media (max-width: 980px) { .reader__edition { display:none; } .reader__progress { min-width:145px; }.reader__progress-track { width:44px; } .reader__footer { gap:10px; } }
@media (max-width:759px) {
 .reader__header { padding: 12px 15px; gap:8px; }.reader__brand { gap:9px; }.reader__brand-mark { width:37px; height:37px; border-radius:11px; }.reader__brand-mark .icon { width:23px; height:23px; }.reader__eyebrow { font-size:8px; }.reader__title { font-size:14px; }.reader__title span { display:none; }
 .reader__header-actions { gap:7px; }.reader__action { width:37px; height:37px; min-height:37px; border-radius:10px; padding:0; display:grid; place-items:center; }.reader__action span { display:none; }
 .reader__main { padding: 13px 9px 0; }.reader__subheading { padding:0 10px 11px; font-size:10px; }.reader__chapter { font-size:9px; }.reader__canvas { border-radius:13px; }.reader__scroll { padding:12px 19px; }.reader__edge { width:33px; height:41px; border-radius:10px; }.reader__edge--prev { left:5px; }.reader__edge--next { right:5px; }.reader__edge .icon { width:17px; }.reader__hint { padding:8px 5px 0; font-size:9px; min-height:27px; }
 .reader__footer { display:grid; grid-template-columns:1fr 1fr; justify-items:center; gap:10px 7px; padding: 10px 12px max(13px,env(safe-area-inset-bottom)); }.reader__progress { grid-column:1 / 3; grid-row:1; justify-content:center; min-width:0; }.reader__progress-track { width:60px; }.reader__nav { grid-column:1; grid-row:2; }.reader__zoom { grid-column:2; grid-row:2; }.reader__control { width:36px; height:36px; border-radius:9px; }.reader__nav { gap:4px; }.reader__zoom { gap:3px; }.reader__zoom-value { min-width:38px; font-size:11px; }.reader__toolbar-divider { margin:0 2px; }
 .thumbnails__list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:14px; }.thumbnails__header { padding:16px; }
}
@media (max-width:360px) { .reader__zoom .reader__control:last-child, .reader__toolbar-divider { display:none; } .reader__title { font-size:13px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration:0.01ms !important; animation-duration:0.01ms !important; } }


/* v4 compact reading UI: preserve controls while prioritizing the document. */
.reader__header { padding: 6px clamp(8px, 1.5vw, 22px); min-height: 48px; gap: 8px; box-shadow: 0 2px 8px rgba(6,55,41,.13); }
.reader__brand { gap: 8px; }
.reader__brand-mark { width: 32px; height: 32px; border-radius: 8px; }
.reader__brand-mark .icon { width: 19px; height: 19px; }
.reader__eyebrow { display: none; }
.reader__title { font-size: clamp(13px,1.3vw,17px); }
.reader__header-actions { gap: 5px; }
.reader__action { padding: 5px 9px; min-height: 34px; height:34px; border-radius: 8px; font-size: 11px; gap: 5px; }
.reader__action .icon { width: 17px; height: 17px; }
.reader__main { padding: 0; min-width: 0; }
.reader__subheading, .reader__hint { display: none; }
.reader__canvas { border: 0; border-radius: 0; box-shadow: none; background: radial-gradient(circle at 50% 42%,#fff 0%,#f4f7f1 55%,#edf2eb 100%); }
.reader__scroll { padding: 3px 5px; }
.reader__edge { width: 30px; height: 42px; border-radius: 9px; opacity: .78; }
.reader__edge--prev { left: 2px; } .reader__edge--next { right: 2px; }
.reader__edge .icon { width: 16px; height: 16px; }
.reader__edge:focus-visible, .reader__edge:hover:not(:disabled) { opacity: 1; }
.reader__footer { min-height: 48px; padding: 5px clamp(7px, 1.5vw, 22px) max(5px,env(safe-area-inset-bottom)); gap: 8px; }
.reader__progress { min-width: 0; gap: 6px; }
.reader__progress-label, .reader__progress-track { display:none; }
.reader__counter { font-size: 13px; }
.reader__counter span { font-size: 11px; }
.reader__nav { gap: 4px; }
.reader__zoom { gap: 3px; }
.reader__control { width: 33px; height: 33px; border-radius: 8px; }
.reader__control .icon { width: 16px; height: 16px; }
.reader__zoom-value { min-width: 39px; font-size: 11px; }
.reader__toolbar-divider { height: 21px; margin:0 2px; }
.reader__fit[aria-pressed="true"] { background: #e5efe9; color: #a72471; border-color: #9cc8b6; }
.sharing { border:0; padding:0; width:min(520px,calc(100vw - 24px)); color:#162d2a; border-radius:16px; box-shadow:0 30px 90px rgba(0,0,0,.3); }
.sharing::backdrop { background:rgba(12,35,28,.65); }
.sharing__heading { display:flex; justify-content:space-between; gap:18px; padding:18px 20px 13px; border-bottom:1px solid #dde6df; }
.sharing__heading h2 { font-size:17px; margin:0 0 5px; }.sharing__heading p { margin:0; color:#687872; font-size:12px; line-height:1.6; }
.sharing__close { display:grid; place-items:center; width:34px; height:34px; border:1px solid #dde6df; border-radius:8px; background:#fff; }
.sharing__body { padding:18px 20px 20px; display:grid; gap:14px; }
.sharing__field label { display:block; margin-bottom:7px; font-weight:750; font-size:12px; }
.sharing__field-line { display:flex; align-items:stretch; gap:6px; }
.sharing__field-line input { min-width:0; flex:1; height:39px; padding:0 9px; border:1px solid #ccd9d0; border-radius:7px; background:#f7faf6; color:#162d2a; font-size:12px; }
.sharing__field-line button { flex:0 0 auto; min-width:70px; background:#a72471; color:#fff; border:0; border-radius:7px; font-size:12px; font-weight:700; }
.sharing__field-line button:disabled,.sharing__native:disabled { opacity:.45; cursor:not-allowed; }
.sharing__native { justify-self:start; display:flex; align-items:center; gap:7px; padding:8px 11px; color:#a72471; background:#eaf4ed; border:1px solid #c4dfd1; border-radius:8px; font-size:12px; font-weight:700; }
.sharing__native .icon { width:17px; height:17px; }
.sharing__status { margin:0; min-height:20px; font-size:11px; line-height:1.6; color:#687872; }
@media (max-width: 759px) {
 .reader__header { min-height:43px; padding: 4px 7px; gap:5px; }
 .reader__brand { gap:5px; }.reader__brand-mark { display:none; }
 .reader__title { font-size:12px; letter-spacing:0; }
 .reader__title span { display:none; }
 .reader__header-actions { gap:4px; }
 .reader__action { padding:0; width:34px; height:34px; min-height:34px; display:grid; place-items:center; border-radius:7px; }
 .reader__action span { display:none; }
 .reader__main { padding:0; }.reader__scroll { padding:2px 4px; }
 .reader__edge { width:25px; height:35px; border-radius:7px; }
 .reader__footer { display:flex; justify-content:space-between; flex-wrap:nowrap; min-height:49px; padding:5px 5px max(5px,env(safe-area-inset-bottom)); gap:3px; }
 .reader__progress { grid-column:auto; grid-row:auto; flex:0 0 auto; }
 .reader__counter { font-size:12px; }.reader__counter span { font-size:10px; }
 .reader__nav { grid-column:auto; grid-row:auto; gap:2px; }
 .reader__zoom { grid-column:auto; grid-row:auto; gap:1px; }
 .reader__control { width:30px; height:31px; border-radius:7px; }
 .reader__control .icon { width:15px; height:15px; }
 .reader__nav #firstPage,.reader__nav #lastPage { display:none; }
 .reader__zoom-value { min-width:34px; font-size:10px; }
 .reader__toolbar-divider { display:none; }
 .thumbnails__header { padding:14px; }
}
@media (max-width: 374px) { .reader__title { font-size:11px; } .reader__fit { display:none; } .reader__zoom-value { min-width:30px; } }

.reader__fit:disabled { display: none; }

/* Native PDF hyperlink overlays; visible only on hover/focus. */
.flipbook__links { position:absolute; inset:0; pointer-events:none; z-index:2; }
.flipbook__links a { position:absolute; display:block; pointer-events:auto; border-radius:2px; outline-offset:1px; }
.flipbook__links a:hover { box-shadow: inset 0 0 0 2px rgba(5,83,64,.46); background:rgba(220,245,230,.12); }
.flipbook__links a:focus-visible { outline:3px solid #d6ab45; }
.flipbook--flipping .flipbook__links a { pointer-events:none; }
.thumbnails__item img { aspect-ratio: var(--page-aspect); }
.reader__brand-copy { min-width:0; }
@media(max-width:759px) { .reader__brand-copy { overflow:hidden; } .reader__title { overflow:hidden; text-overflow:ellipsis; max-width:calc(100vw - 150px); } }

/* v7: 2-finger pinch is implemented by the viewer instead of page magnification.
   Still allow 1-finger scrolling in the zoomed document. */
.reader__scroll { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.reader--zoomed .reader__scroll { touch-action: pan-x pan-y; }