/* BOOK-3D-P2 VER-1.1 — page-local port of the authenticated P1.1. */
.book-page .book-cover-wrap.kk-book3d {
  --book-w: clamp(180px, 25vw, 352px);
  --book-h: calc(var(--book-w) * 1.25);
  --book-d: calc(var(--book-w) * .1875);
  --board: 2.3px; --rx: -7deg; --ry: 28deg; --float-y: 0px;
  position: relative; flex: 1 1 460px; min-width: 0; width: 100%; max-width: 530px;
  display: block; color: #f4f7ff; text-align: center;
}
.kk-book3d *, .kk-book3d *::before, .kk-book3d *::after { box-sizing: border-box; }
.kk-book3d [hidden] { display: none !important; }
.kk-book3d-fallback { display: block; }
.kk-book3d-fallback img { display: block; width: var(--book-w); max-width: 100%; height: auto; margin: auto; }
.kk-book3d.is-ready .kk-book3d-fallback { display: none; }
.kk-book3d-stage {
  position: relative; display: grid; place-items: center; width: 100%;
  height: calc(var(--book-h) + 120px); perspective: 1450px; perspective-origin: 50% 47%;
  touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none;
  cursor: grab; outline: none;
}
.kk-book3d-stage.is-dragging { cursor: grabbing; }
.kk-book3d-stage:focus-visible { outline: 2px solid #65b7ff; outline-offset: -4px; border-radius: 8px; }
/* Translation belongs to this wrapper; P1.1 rotation belongs to the book. */
.kk-book3d-float {
  width: var(--book-w); height: var(--book-h); transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d; transform: translateY(var(--float-y));
  filter: none; opacity: 1; overflow: visible; isolation: auto;
}
.kk-book3d-book {
  position: relative; width: var(--book-w); height: var(--book-h);
  transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry)); will-change: transform;
  /* Grouping effects here flatten the children, even with preserve-3d. */
  filter: none; opacity: 1; overflow: visible; isolation: auto;
}
.kk-book3d-face {
  position: absolute; left: 50%; top: 50%;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background-color: #080a0e; background-repeat: no-repeat;
  background-position: center; background-size: 100% 100%;
  box-shadow: inset 0 0 0 .45px rgb(255 255 255 / .17);
}
/* Each face has an outward normal; no negative scale or mirrored texture. */
.kk-book3d-front, .kk-book3d-back { width: var(--book-w); height: var(--book-h); }
.kk-book3d-front {
  transform: translate(-50%, -50%) translateZ(calc(var(--book-d) / 2));
  background-image: url("../img/book3d/front-fr.webp");
}
.kk-book3d-back {
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(calc(var(--book-d) / 2));
  background-image: url("../img/book3d/back-fr.webp");
}
.kk-book3d-front::after, .kk-book3d-back::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 2px 0 2px rgb(255 255 255 / .05), inset -2px 0 3px rgb(0 0 0 / .3);
}
.kk-book3d-spine {
  width: var(--book-d); height: var(--book-h);
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(calc(var(--book-w) / 2));
  /* 8034.png kept byte-for-byte. CSS window: x532, y96, w166, h1400.
     Excludes the source mockup's surrounding black and photographed paper top. */
  background-image: url("../img/book3d/spine.png");
  background-size: 740.3614457831% 109.7142857143%;
  background-position: 50.0470366886% 70.5882352941%;
  box-shadow: inset 2px 0 3px rgb(255 255 255 / .1), inset -2px 0 4px rgb(0 0 0 / .38);
}
/* Six matching planes close the volume; dark rails suggest the cover boards.
   Paper layers run across depth, consistently on fore-edge, head and tail. */
.kk-book3d-fore {
  width: var(--book-d); height: var(--book-h);
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(calc(var(--book-w) / 2));
  background:
    linear-gradient(90deg, #10131a 0 var(--board), transparent var(--board) calc(100% - var(--board)), #10131a calc(100% - var(--board))),
    linear-gradient(0deg, rgb(0 0 0 / .22), transparent 8% 92%, rgb(0 0 0 / .14)),
    repeating-linear-gradient(90deg, #eeeae1 0 .8px, #ccc7bc .8px 1.2px, #f0ede6 1.2px 2.7px);
  box-shadow: inset 5px 0 7px rgb(0 0 0 / .18), inset -5px 0 7px rgb(0 0 0 / .12);
}
.kk-book3d-top, .kk-book3d-bottom { width: var(--book-w); height: var(--book-d); }
.kk-book3d-top {
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(calc(var(--book-h) / 2));
  background:
    linear-gradient(0deg, #12161c 0 var(--board), transparent var(--board) calc(100% - var(--board)), #12161c calc(100% - var(--board))),
    linear-gradient(90deg, rgb(0 0 0 / .25), transparent 7% 95%, rgb(0 0 0 / .08)),
    repeating-linear-gradient(0deg, #f1eee7 0 .8px, #d1ccc1 .8px 1.2px, #f6f2eb 1.2px 2.7px);
}
.kk-book3d-bottom {
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(calc(var(--book-h) / 2));
  background:
    linear-gradient(0deg, #101319 0 var(--board), transparent var(--board) calc(100% - var(--board)), #101319 calc(100% - var(--board))),
    linear-gradient(90deg, rgb(0 0 0 / .24), transparent 7% 95%, rgb(0 0 0 / .08)),
    repeating-linear-gradient(0deg, #c9c4b9 0 .8px, #aaa597 .8px 1.2px, #d2cec3 1.2px 2.7px);
}

.kk-book3d-front, .kk-book3d-back { background-size: contain; }

.kk-book3d-controls {
  display: inline-flex; justify-content: center; gap: 6px; max-width: 100%;
  margin-inline: auto; padding: 7px; border: 1px solid #38424f; border-radius: 999px;
  background: #090e17;
}
.kk-book3d-controls button {
  appearance: none; border: 1px solid transparent; border-radius: 999px;
  background: #202b3b; color: #f4f7ff; font: 600 12px/1.2 system-ui, sans-serif;
  padding: 10px 12px; min-width: 44px; min-height: 44px; cursor: pointer;
}
.kk-book3d-controls button:hover { background: #34465e; }
.kk-book3d-controls button:focus-visible { outline: 2px solid #65b7ff; outline-offset: 2px; }
.kk-book3d-hint { margin: 14px 0 0; color: #b6c7dc; font: 400 12px/1.6 system-ui, sans-serif; }
.kk-book3d-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 980px) {
  .book-page .book-cover-wrap.kk-book3d { flex: none; --book-w: clamp(180px, 66vw, 352px); }
}
@media (max-width: 360px) {
  .kk-book3d-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 250px; border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .kk-book3d-float { transform: none; }
}