:root{
  --brand:#1538b5;
  --bg:#e9edf4;
  --line:#dce2ec;
  --text:#152036;
  --top:62px;
  --bottom:58px;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:Arial,"Noto Sans KR",sans-serif;background:var(--bg);color:var(--text)}
button{font:inherit}
.app{height:100dvh;display:grid;grid-template-rows:var(--top) 3px 1fr var(--bottom)}
.topbar{display:grid;grid-template-columns:150px 1fr 100px;align-items:center;background:#fff;border-bottom:1px solid var(--line);z-index:40;padding:0 12px;padding-top:env(safe-area-inset-top)}
.top-btn{border:0;background:transparent;color:var(--brand);cursor:pointer;border-radius:12px;height:42px}
.top-btn:active{background:#eef2ff}
.menu-btn{display:flex;align-items:center;gap:9px;padding:0 11px;font-weight:700}
.full-btn{font-size:13px}
.hamb{width:18px;display:grid;gap:3px}.hamb i{height:2px;background:currentColor;border-radius:2px}
.brand{text-align:center;line-height:1.08}.brand strong{display:block;font-size:15px}.brand span{display:block;font-size:11px;color:#7b8597;margin-top:3px}
.progress{height:3px;background:#dfe4ed;z-index:39}.progress>div{height:100%;background:var(--brand);width:0;transition:width .18s linear}

.viewer{position:relative;min-height:0;display:flex;align-items:center;justify-content:center;padding:14px 76px;overflow:hidden}

/* ---------------- PC BOOK ---------------- */
.desktop-book{display:block;position:relative;perspective:2800px}
.spread{position:relative;display:flex;align-items:stretch;transform-style:preserve-3d}
.page-slot{position:relative;background:#fff;overflow:hidden}
.page-slot img{
  display:block;
  max-height:calc(100dvh - var(--top) - var(--bottom) - 42px);
  max-width:38vw;width:auto;height:auto;background:#fff;
  user-select:none;-webkit-user-drag:none;
}
.left-slot{box-shadow:-12px 12px 26px rgba(24,37,64,.13)}
.right-slot{box-shadow:12px 12px 26px rgba(24,37,64,.13)}
.gutter-shadow{position:absolute;top:0;bottom:0;width:34px;pointer-events:none;z-index:5}
.gutter-left{right:0;background:linear-gradient(90deg,transparent,rgba(0,0,0,.11))}
.gutter-right{left:0;background:linear-gradient(90deg,rgba(0,0,0,.11),transparent)}
.center-fold{position:absolute;z-index:12;left:50%;top:0;bottom:0;width:20px;transform:translateX(-50%);pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.075),rgba(255,255,255,.14) 48%,rgba(0,0,0,.075))}
.book-floor-shadow{position:absolute;left:5%;right:5%;bottom:-19px;height:30px;border-radius:50%;background:rgba(27,40,67,.18);filter:blur(15px);z-index:-1}
.rest-curl{position:absolute;right:0;bottom:0;width:46px;height:46px;z-index:7;pointer-events:none;clip-path:polygon(100% 0,100% 100%,0 100%);background:linear-gradient(135deg,transparent 48%,rgba(255,255,255,.96) 50%,rgba(225,228,235,.95) 70%,rgba(120,130,148,.30) 100%)}

/* Flip sheet exactly overlays one page, preventing double-image confusion */
.flip-sheet{
  position:absolute;top:0;right:0;width:50%;height:100%;
  transform-style:preserve-3d;transform-origin:left center;
  z-index:30;opacity:0;pointer-events:none;
}
.flip-face{position:absolute;inset:0;overflow:hidden;background:#fff;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip-face img{width:100%;height:100%;object-fit:contain;background:#fff}
.flip-back{transform:rotateY(180deg)}
.front-light{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.02),rgba(0,0,0,.18));opacity:0}
.back-light{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.16),rgba(255,255,255,.08));opacity:.35}
.flip-edge{position:absolute;top:0;right:-3px;width:14px;height:100%;background:linear-gradient(90deg,transparent,rgba(0,0,0,.16));filter:blur(2px);transform:translateZ(2px)}

.desktop-book.is-turning .rest-curl{opacity:0}
.desktop-book.turn-next .flip-sheet{opacity:1;animation:turnNext .72s cubic-bezier(.22,.61,.36,1) forwards}
.desktop-book.turn-prev .flip-sheet{opacity:1;left:0;right:auto;transform-origin:right center;animation:turnPrev .72s cubic-bezier(.22,.61,.36,1) forwards}

.desktop-book.turn-next .flip-sheet .front-light{animation:shadeNext .72s ease-in-out forwards}
.desktop-book.turn-prev .flip-sheet .front-light{animation:shadePrev .72s ease-in-out forwards}

@keyframes turnNext{
  0%   {transform:rotateY(0deg) translateZ(0) scaleX(1); border-radius:0 0 0 0}
  18%  {transform:rotateY(-24deg) translateZ(10px) scaleX(.988); border-radius:0 10px 10px 0}
  42%  {transform:rotateY(-68deg) translateZ(24px) scaleX(.968); border-radius:0 22px 22px 0}
  50%  {transform:rotateY(-90deg) translateZ(29px) scaleX(.958); border-radius:0 28px 28px 0}
  58%  {transform:rotateY(-112deg) translateZ(24px) scaleX(.968); border-radius:22px 0 0 22px}
  82%  {transform:rotateY(-156deg) translateZ(10px) scaleX(.988); border-radius:10px 0 0 10px}
  100% {transform:rotateY(-180deg) translateZ(0) scaleX(1); border-radius:0}
}
@keyframes turnPrev{
  0%   {transform:rotateY(0deg) translateZ(0) scaleX(1); border-radius:0}
  18%  {transform:rotateY(24deg) translateZ(10px) scaleX(.988); border-radius:10px 0 0 10px}
  42%  {transform:rotateY(68deg) translateZ(24px) scaleX(.968); border-radius:22px 0 0 22px}
  50%  {transform:rotateY(90deg) translateZ(29px) scaleX(.958); border-radius:28px 0 0 28px}
  58%  {transform:rotateY(112deg) translateZ(24px) scaleX(.968); border-radius:0 22px 22px 0}
  82%  {transform:rotateY(156deg) translateZ(10px) scaleX(.988); border-radius:0 10px 10px 0}
  100% {transform:rotateY(180deg) translateZ(0) scaleX(1); border-radius:0}
}
@keyframes shadeNext{
  0%,100%{opacity:0}
  28%{opacity:.10}
  47%{opacity:.34}
  53%{opacity:.42}
  72%{opacity:.12}
}
@keyframes shadePrev{
  0%,100%{opacity:0}
  28%{opacity:.10}
  47%{opacity:.34}
  53%{opacity:.42}
  72%{opacity:.12}
}
  20%{opacity:.08}
  38%{opacity:.22}
  50%{opacity:.38}
  62%{opacity:.22}
  80%{opacity:.08}
}
  38%{opacity:.34}
  52%{opacity:.46}
  70%{opacity:.18}
}

/* ---------------- MOBILE ---------------- */
.mobile-book{display:none;position:relative;perspective:2200px}
.mobile-stage{position:relative;transform-style:preserve-3d;filter:drop-shadow(0 10px 18px rgba(20,34,64,.15))}
.mobile-under{position:absolute;inset:0;z-index:1;background:#fff}
.mobile-page{position:relative;z-index:5;background:#fff;transform-style:preserve-3d;transform-origin:left center}
.mobile-page img,.mobile-under img{
  display:block;max-width:100vw;max-height:calc(100dvh - var(--top) - var(--bottom) - 16px);
  width:auto;height:auto;background:#fff;user-select:none;-webkit-user-drag:none
}
.mobile-page-shadow{position:absolute;inset:0;background:linear-gradient(90deg,transparent 74%,rgba(0,0,0,.08));pointer-events:none;opacity:.35}
.mobile-curl{position:absolute;right:0;bottom:0;width:42px;height:42px;z-index:9;pointer-events:none;clip-path:polygon(100% 0,100% 100%,0 100%);background:linear-gradient(135deg,transparent 48%,#fff 50%,#e4e7ee 71%,rgba(130,139,155,.32))}
.mobile-book.turn-next .mobile-page{animation:mobileNext .64s cubic-bezier(.22,.61,.36,1) forwards}
.mobile-book.turn-prev .mobile-page{transform-origin:right center;animation:mobilePrev .64s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes mobileNext{
  0%{transform:rotateY(0)}
  20%{transform:rotateY(-20deg) translateZ(6px)}
  50%{transform:rotateY(-90deg) translateZ(18px)}
  80%{transform:rotateY(-160deg) translateZ(6px)}
  100%{transform:rotateY(-180deg)}
}
@keyframes mobilePrev{
  0%{transform:rotateY(0)}
  20%{transform:rotateY(20deg) translateZ(6px)}
  50%{transform:rotateY(90deg) translateZ(18px)}
  80%{transform:rotateY(160deg) translateZ(6px)}
  100%{transform:rotateY(180deg)}
}

/* navigation */
.nav-arrow{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:82px;border:0;border-radius:16px;background:rgba(21,56,181,.94);color:#fff;font-size:42px;cursor:pointer;box-shadow:0 8px 22px rgba(21,56,181,.22);z-index:35}
.nav-arrow:disabled{opacity:.2;cursor:default}.nav-arrow.prev{left:14px}.nav-arrow.next{right:14px}

/* menu */
.menu-panel{position:fixed;left:0;top:0;bottom:0;width:min(88vw,410px);background:#fff;z-index:70;transform:translateX(-102%);transition:transform .25s ease;box-shadow:16px 0 34px rgba(10,22,48,.20);padding-top:env(safe-area-inset-top)}
.menu-panel.open{transform:translateX(0)}.backdrop{position:fixed;inset:0;background:rgba(11,22,48,.42);z-index:60;opacity:0;pointer-events:none;transition:opacity .25s ease}.backdrop.show{opacity:1;pointer-events:auto}
.menu-header{height:76px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 12px 0 20px}.menu-header b{display:block;font-size:17px}.menu-header span{display:block;font-size:11px;color:#7b8597;margin-top:5px}
.close-btn{width:42px;height:42px;border:0;background:transparent;border-radius:12px;font-size:27px;color:#657087;cursor:pointer}
.toc{height:calc(100% - 76px);overflow:auto;padding:10px 12px 22px}
.toc-item{width:100%;display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;border:0;background:#fff;border-radius:12px;padding:11px 10px;text-align:left;cursor:pointer;color:var(--text)}
.toc-item:hover,.toc-item:active{background:#f1f4fb}.toc-item.active{background:#edf2ff}
.toc-num{width:30px;height:30px;border-radius:9px;background:#eef2f8;color:#6d7890;display:grid;place-items:center;font-size:11px;font-weight:700}.toc-item.active .toc-num{background:var(--brand);color:#fff}
.toc-title{font-size:13px;line-height:1.3}.toc-page{font-size:11px;color:#8b94a4}

.bottom{display:flex;align-items:center;justify-content:center;gap:26px;background:#fff;border-top:1px solid var(--line);z-index:35;padding-bottom:env(safe-area-inset-bottom)}
.foot-btn{height:38px;padding:0 14px;border:1px solid #d7ddea;background:#fff;border-radius:12px;color:#26344f;cursor:pointer;font-size:13px}
.page-indicator{min-width:88px;text-align:center;font-variant-numeric:tabular-nums}.page-indicator strong{font-size:17px;color:var(--brand);margin-right:5px}.page-indicator span{font-size:12px;color:#7b8596}
.mobile-hint{position:fixed;left:50%;bottom:76px;transform:translateX(-50%) translateY(10px);padding:8px 13px;border-radius:999px;background:rgba(16,28,53,.87);color:#fff;font-size:12px;z-index:50;white-space:nowrap;opacity:0;pointer-events:none;transition:.25s}.mobile-hint.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(max-width:720px){
  :root{--top:56px;--bottom:56px}
  .topbar{grid-template-columns:105px 1fr 56px;padding:0 5px}.menu-btn{font-size:12px;gap:7px;padding:0 7px}
  .full-btn{font-size:0}.full-btn::after{content:"⛶";font-size:22px}
  .brand strong{font-size:13px}.brand span{font-size:10px}
  .viewer{padding:7px 42px}
  .desktop-book{display:none}.mobile-book{display:block}
  .nav-arrow{display:block;width:36px;height:62px;border-radius:12px;font-size:34px;background:rgba(21,56,181,.82);box-shadow:0 6px 14px rgba(21,56,181,.18)}
  .nav-arrow.prev{left:4px}.nav-arrow.next{right:4px}
  .bottom{gap:18px}.foot-btn{height:36px;padding:0 11px;font-size:12px}.page-indicator{min-width:68px}
}
@media(max-width:390px){
  .viewer{padding-left:38px;padding-right:38px}.menu-panel{width:92vw}.topbar{grid-template-columns:96px 1fr 50px}.menu-btn{font-size:11px}
  .nav-arrow{width:32px;height:56px;font-size:30px}
}
@media(prefers-reduced-motion:reduce){
  .desktop-book.turn-next .flip-sheet,.desktop-book.turn-prev .flip-sheet,.mobile-book.turn-next .mobile-page,.mobile-book.turn-prev .mobile-page{animation-duration:.01ms}
}

/* v7 breakpoint safety: never show both renderers at once */
@media (min-width:721px){
  .desktop-book{display:block!important}
  .mobile-book{display:none!important}
}
@media (max-width:720px){
  .desktop-book{display:none!important}
  .mobile-book{display:block!important}
}
.flip-sheet{visibility:hidden}
.desktop-book.turn-next .flip-sheet,
.desktop-book.turn-prev .flip-sheet{visibility:visible}