/* Shared reader layout for every book. Artwork files and reading state are untouched. */
.reader-site{
  background:linear-gradient(90deg,#2e1d13,#4b301d 22%,#3c2619 70%,#2e1d13);
  padding-bottom:30px;
}
.reader-site .actual-reader{padding:8px 2.5% 0;min-height:0}
.reader-site .site-header{background:#352215 url('/assets/book-room-blank-v2.png') center top/auto 1500px}
.reader-site .reader-toolbar{margin:0 6%;gap:12px;color:#f7e7cb}
.reader-site .reader-toolbar .language-tabs{background:#f1e2c7;border:1px solid #b5996f;color:#392818}
.reader-site .reading-tools{color:inherit}
.reader-site .reader-context{margin:10px 6% 14px;font-size:12px;opacity:1;flex-wrap:wrap;color:#ead6b7}
.reader-site .flowing-book{
  position:relative;isolation:isolate;margin:0;background:none;
  border:0;outline:0;box-shadow:none;border-radius:0;
  --book-top:clamp(72px,9vw,160px);
  --book-bottom:clamp(64px,7.8vw,138px);
}
.reader-book-art{position:absolute;inset:0;z-index:-1;pointer-events:none}
.reader-mobile-texture{display:none}
.book-slice{position:absolute;left:0;width:100%;display:block;overflow:hidden}
.book-slice-top{top:0;height:var(--book-top)}
.book-slice-middle{top:var(--book-top);height:calc(100% - var(--book-top) - var(--book-bottom) + 1px)}
.book-slice-bottom{bottom:0;height:var(--book-bottom)}
.reader-site .flowing-book .spread-content,
.reader-site .flowing-book.together .spread-content{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:9%;row-gap:0;align-items:center;
  padding:clamp(60px,5.6vw,100px) 8% clamp(68px,6.2vw,110px)!important;
  min-height:48vw;
}
.reader-site .flowing-book .real-illustration,
.reader-site .flowing-book.together .real-illustration{
  width:100%;max-width:none;min-width:0;margin:0;align-self:center;
  display:flex;align-items:center;justify-content:center;
}
.illustration-mat{
  position:relative;display:flex;justify-content:center;align-items:center;
  max-width:100%;padding:clamp(12px,1.3vw,23px);
  background:#fff9e93b;border:1px solid #ad92645e;
  box-shadow:inset 0 0 10px #92713d12;
}
.illustration-mat::before{content:'';position:absolute;inset:5px;border:1px solid #bea57438;pointer-events:none}
.reader-site .flowing-book .real-illustration img,
.reader-site .flowing-book.together .real-illustration img{
  display:block;width:auto;height:auto;max-width:100%;max-height:640px;
  min-height:0;object-fit:contain;box-shadow:0 0 0 1px #9d815335;
}
.print-corner{position:absolute;width:17px;height:17px;border-top:1px solid #a68a55;border-left:1px solid #a68a55;pointer-events:none}
.print-corner::before{content:'';position:absolute;top:3px;left:3px;width:10px;height:10px;border-top:1px solid #a68a5570;border-left:1px solid #a68a5570}
.print-corner::after{content:'';position:absolute;top:6px;left:6px;width:4px;height:4px;border:1px solid #a68a5570}
.print-corner.nw{top:3px;left:3px}.print-corner.ne{top:3px;right:3px;transform:rotate(90deg)}
.print-corner.se{bottom:3px;right:3px;transform:rotate(180deg)}.print-corner.sw{bottom:3px;left:3px;transform:rotate(270deg)}
.reader-site .flowing-book .bilingual{display:grid;grid-template-columns:minmax(0,1fr);gap:38px;min-width:0;width:100%}
.reader-site .flowing-book.together .real-illustration{align-self:start;position:sticky;top:28px}
.reader-site .flowing-book .passage{min-width:0;width:100%;align-self:center}
.reader-site .flowing-book .passage h2{
  font-size:18px;letter-spacing:.04em;margin:0 0 20px;padding:0 0 12px;
  border-bottom:1px solid #b5986959;color:#80613f;
}
.reader-site .flowing-book .passage p{font-size:var(--reading-size);line-height:1.8;word-break:normal;overflow-wrap:break-word}
.reader-site .flowing-book .passage[lang|="ko"] p{word-break:keep-all;line-height:1.9}
.reader-site .flowing-book .passage-body p+p{margin-top:.75em}
.reader-site .flowing-book .narration{margin-top:22px;gap:9px;font-size:13px;color:#785d3b;line-height:1.6}
.reader-site .flowing-book .narration audio{display:block;width:100%;min-width:0;max-width:100%;height:42px}
.reader-site .page-navigation{bottom:auto;margin:14px 7% 0;color:#f8e8cd;gap:16px}
.reader-site .page-navigation button{min-height:48px;padding:10px 16px}
@media(min-width:1800px){.reader-site .actual-reader{max-width:1800px;margin:auto}.reader-site .flowing-book .spread-content{min-height:810px}}
/* A single leaf on narrow screens: the original paper texture has no centre fold. */
@media(max-width:900px){
  .reader-site{background:linear-gradient(#50331ee6,#2f1c10ee),url('/assets/book-room-blank-v2.png') center top/cover}
  .reader-site .site-header{min-height:70px;height:auto;padding:12px 20px;background-size:auto 2400px}
  .reader-site .site-header .wordmark{font-size:33px;letter-spacing:-1px}
  .reader-site .actual-reader{padding:10px 18px 0}
  .reader-site .reader-toolbar{display:flex;flex-wrap:wrap;margin:0;gap:10px;color:#f8e9cc}
  .reader-site .reader-toolbar>.back{width:100%}
  .reader-site .language-tabs{background:#f3e3c8;color:#3b2414;width:100%;justify-content:center}
  .reader-site .language-tabs button{flex:1;font-size:20px}
  .reader-site .reading-tools{margin:0!important;width:100%;justify-content:center;background:#edddc0;color:#392818;border:1px solid #bba375;padding:4px}
  .reader-site .reader-context{margin:14px 0;color:#f5e5c7;font-size:12px;gap:6px}
  .reader-site .reader-context>span{width:100%}
  .reader-site .flowing-book{
    background:#f4e7cf;
    border:1px solid #bca580;border-left:3px solid #c6b18c;border-radius:2px 6px 7px 2px;
    box-shadow:2px 3px #d2bf9a,4px 5px #b39f7c,6px 7px #454732;
  }
  .reader-site .reader-book-art{display:none}
  .reader-mobile-texture{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;border-radius:inherit}
  .reader-site .flowing-book .spread-content,
  .reader-site .flowing-book.together .spread-content{
    display:flex;flex-direction:column;min-height:0;
    padding:28px clamp(18px,4vw,36px) 38px!important;gap:34px;
  }
  .reader-site .flowing-book .real-illustration img,
  .reader-site .flowing-book.together .real-illustration img{max-height:640px}
  .reader-site .flowing-book.together .real-illustration{position:static;align-self:center}
  .reader-site .flowing-book .bilingual{gap:36px}
  .reader-site .flowing-book .passage h2{margin-bottom:18px}
  .reader-site .page-navigation{margin:20px 0 0;gap:4px}
  .reader-site .page-navigation button{padding:10px;min-width:44px;font-size:18px}
  .reader-site .page-count{font-size:14px;white-space:nowrap}
}