@charset "utf-8";
/* CSS Document */
body {
  margin:0;
  background:#2b2b2b;
  font-family:sans-serif;
  overflow:hidden;
}

/* Toolbar */
#toolbar {
  height:40px;
  background:#111;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0 10px;
}

#toolbar button {
  background:#333;
  color:#fff;
  border:0;
  padding:6px 10px;
  cursor:pointer;
}

/* Container */
#container {
  height:calc(100vh - 40px);
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  perspective:1500px;/* 3D視角 */
}

/* Flipbook */
#flipbook {
  width:960px;
  height:640px;
  box-shadow:0 0 30px rgba(0,0,0,.6);
  transform-origin:center center;
  position:relative;
  z-index:1;
  transform-style:preserve-3d;
}

/* 書脊 */
#spine {
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%) rotateY(0deg);
  width:36px; /* 書脊厚度40px */
  height:100%;
  z-index:2;
  transform-style:preserve-3d;
}

#spine img {
  width:100%;
  height:100%;
  display:block;
}

/* Page */
.page {
  background:#000;
  transform-style:preserve-3d;
}

.page img {
  width:100%;
  height:100%; /* 原本變形尺寸 */
  display:block;
}