/* AI革命通信：紙面をめくって読むビューア
 * JS が動いたときだけ html に .flip-on が付き、この見た目になる。
 * JS が無いとき・印刷のときは、元の「縦に並んだA4」のまま。 */

.flip-on,.flip-on body{height:100%}
.flip-on body{padding:0!important;margin:0;background:#2b2724;overflow:hidden;display:flex;flex-direction:column}

.flip-on .nlweb-bar{position:relative;flex:none}
.flip-on .nlweb-bar>span{min-width:0}
.flip-on .nlweb-stage{width:100%}
.nlweb-bar .fb-issues{display:inline-flex;gap:14px;align-items:center}

.flip-on .nlweb-stage{flex:1;min-height:0;padding:0!important;display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#4a423c 0%,#2b2724 70%)}

.fb-view{position:relative;flex:none;overflow:visible;touch-action:pan-y pinch-zoom}
.nlweb-bar a{white-space:nowrap}
.fb-single .fb-view{overflow:hidden}
.fb-book{position:absolute;left:0;top:0;width:calc(var(--pw) * 2);height:var(--ph);perspective:calc(var(--pw) * 5);
  transition:transform .7s cubic-bezier(.3,.1,.2,1)}
.fb-single .fb-book{left:calc(var(--pw) * -.5)}

.fb-leaf{position:absolute;left:50%;top:0;width:var(--pw);height:var(--ph);transform-origin:0 50%;transform-style:preserve-3d;
  transition:transform .9s cubic-bezier(.35,.05,.2,1)}
.fb-leaf.is-turned{transform:rotateY(-180deg)}

.fb-face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fff;
  box-shadow:0 10px 22px rgba(0,0,0,.28)}
.fb-back{transform:rotateY(180deg)}
.fb-face.is-blank{background:transparent;box-shadow:none}

/* 綴じ目の陰：右ページは左端、左ページは右端 */
.fb-face::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:20;transition:opacity .9s}
.fb-front::after{background:linear-gradient(to right,rgba(0,0,0,.22) 0,rgba(0,0,0,.06) 3%,transparent 8%)}
.fb-back::after{background:linear-gradient(to left,rgba(0,0,0,.22) 0,rgba(0,0,0,.06) 3%,transparent 8%)}
.fb-face.is-blank::after{display:none}
/* めくっている最中の紙に落ちる影 */
.fb-leaf.is-flipping .fb-face::before{content:"";position:absolute;inset:0;z-index:21;pointer-events:none;
  background:linear-gradient(to left,rgba(0,0,0,.18),transparent 60%);animation:fb-shade .9s ease both}
@keyframes fb-shade{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
/* 表紙だけ・裏表紙だけの時は、綴じ目の陰を消す */
.fb-book[data-edge="start"] .fb-leaf:first-child .fb-front::after,
.fb-book[data-edge="end"] .fb-leaf:last-child .fb-back::after{opacity:0}

/* 紙面（A4）を枠いっぱいに縮める */
.flip-on .fb-face .pg{position:absolute!important;left:0;top:0;margin:0!important;box-shadow:none!important;
  transform:scale(var(--s))!important;transform-origin:0 0!important}

/* 操作 */
.fb-ctrl{flex:none;display:flex;align-items:center;gap:18px;margin-top:16px;color:#f3ede8;
  font-family:"Noto Sans JP",sans-serif;font-size:14px;letter-spacing:.04em}
.fb-btn{appearance:none;border:1px solid rgba(255,255,255,.45);background:transparent;color:#fff;font:inherit;
  padding:9px 18px;border-radius:999px;cursor:pointer;min-width:96px;transition:background .2s,opacity .2s}
.fb-btn:hover{background:rgba(255,255,255,.12)}
.fb-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.fb-btn[disabled]{opacity:.3;cursor:default;background:transparent}
.fb-count{min-width:92px;text-align:center;font-variant-numeric:tabular-nums}
.fb-mode{appearance:none;border:0;background:none;color:rgba(255,255,255,.7);font:inherit;font-size:13px;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.fb-mode:hover{color:#fff}

/* 左右の大きな矢印（広い画面だけ） */
.fb-side{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;font-size:22px;line-height:48px;text-align:center;transition:background .2s,opacity .2s;z-index:60}
.fb-side:hover{background:rgba(255,255,255,.25)}
.fb-side[disabled]{opacity:0;pointer-events:none}
.fb-side--prev{left:18px}.fb-side--next{right:18px}
.fb-single .fb-side{display:none}

/* 「スクロールで読む」にしたとき：切り替えボタンだけを右下に残す */
html:not(.flip-on) .fb-side{display:none}
html:not(.flip-on) .nlweb-stage .pg[style*="zoom"]{transform:none!important;margin-bottom:26px!important}
.fb-ctrl--flat{position:fixed;right:16px;bottom:16px;z-index:60;margin:0;padding:10px 18px;border-radius:999px;background:#1a1a1a;
  box-shadow:0 6px 18px rgba(0,0,0,.25)}
.fb-ctrl--flat .fb-btn,.fb-ctrl--flat .fb-count{display:none}
.fb-ctrl--flat .fb-mode{color:#fff}

@media (max-width:640px){
  .fb-ctrl{gap:10px;margin-top:10px;font-size:13px}
  .fb-btn{min-width:0;padding:8px 14px}
  .nlweb-bar{font-size:12px!important;padding:8px 12px!important;gap:4px 10px!important}
  .nlweb-bar>span{flex:1 1 100%}
  .nlweb-bar>span:empty{display:none}
}

@media (prefers-reduced-motion:reduce){
  .fb-book,.fb-leaf{transition-duration:.01s}
  .fb-leaf.is-flipping .fb-face::before{animation:none}
}

/* 印刷は元の紙面どおりに */
@media print{
  .flip-on,.flip-on body{height:auto;overflow:visible;display:block;background:#fff}
  .fb-ctrl,.fb-side{display:none!important}
  .fb-view,.fb-book,.fb-leaf,.fb-face{position:static!important;transform:none!important;width:auto!important;height:auto!important;
    overflow:visible!important;box-shadow:none!important;perspective:none!important}
  .fb-face::after,.fb-face::before{display:none!important}
  .fb-face.is-blank{display:none}
  .flip-on .fb-face .pg{position:relative!important;transform:none!important;break-after:page;page-break-after:always}
  .flip-on .fb-leaf:last-child .fb-face:not(.is-blank) .pg{break-after:auto;page-break-after:auto}
  .flip-on .nlweb-stage{background:none!important}
}