/* 本のページカード（本文が表示される） */
.manual-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto; /* height: 100%を削除 */
  background: transparent;
  color: #333;
  padding: 20px; /* パディング追加で読みやすく */
  border-radius: 0;
  border: none;
  overflow-y: visible; /* auto → visible */
  box-sizing: border-box;
  opacity: 0;
  z-index: var(--z-background);
  
  /* 本のページらしい行間と文字サイズ */
  line-height: 1.9; /* 行間を少し広く */
  font-size: 20px; /* 24px→20px に調整 */
  
  /* 上詰め配置を強制 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  white-space: pre-line; /* \n文字を改行として表示 */
}

/* 現在表示中のページ */
.manual-card.active {
  opacity: 1;
  z-index: var(--z-content);
}

/* カードコンテンツの上詰め配置 */
.card-content {
  display: block;
  margin: 0;
  padding: 0;
  align-self: flex-start;
  justify-self: flex-start;
  width: 100%;
  white-space: pre-line; /* \n文字を改行として表示 */
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-weight: 400; /* 文字の太さを調整 */
  letter-spacing: 0.02em; /* 文字間隔を少し広く */
}

/* PC版（デスクトップレイアウト）専用のcard-contentスタイル */
html[data-layout="desktop"] .card-content {
  background: transparent;
  color: #333;
  font-size: 20px;
  line-height: 1.9;
  min-height: auto;
}


/* ページめくり完了（非表示） */
.manual-card.page-flipped {
  opacity: 0;
  z-index: var(--z-background);
}

/* 次のページ（準備中・非表示） */
.manual-card.next {
  opacity: 0;
  z-index: var(--z-background);
}


/* scroll_manual_panel_autoheight.css */
/* scroll_manual_panel_autoheight.css */
/* 本文コンテンツセクション（左ページ内） - 本のページらしい自然な表示 */
.content-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 上詰めに変更 */
  background: transparent; /* 背景を透明に */
  border-radius: 0; /* 角丸を削除 */
  padding: 0; /* パディング削除 */
  box-shadow: none; /* 影を削除 */
  position: relative;
  overflow: hidden;
  max-height: 100%; /* 左ページの高さに制限 */
  border: none; /* 枠線を削除 */
  box-sizing: border-box;
}

/* より幅が狭い場合の調整 - style_responsive.cssで統一管理されるため、
   ここでは.detail-panel以外の設定のみ残す */
@media (max-width: 768px) {
  .content-section {
    display: block; /* モバイルでも表示 */
    position: static;
    flex: 1;
    background: transparent;
    border-radius: 0;
    padding: 15px;
    box-shadow: none;
    border: none;
    max-height: none;
    overflow: visible;
  }
}

/* ページめくり用コンテナ（PC専用 - 左ページ内） */
html[data-layout="desktop"] .book-spread-container .detail-scroll-container {
  position: relative;
  flex: 1 1 auto;
  height: 100%;
  box-sizing: border-box;
  padding: 0;
  overflow: hidden;
  perspective: 1500px; /* 3D効果用 - 深度を増加 */
  display: flex;
  align-items: flex-start; /* 上詰め強制 */
  justify-content: flex-start; /* 左詰め強制 */
}

/* ページ前進時（右→左）の陰影エフェクト */
.manual-card.page-curl-forward::before {
  content: '';
  position: absolute;
  top: 0;
  right: -2px;  /* 右端の陰影 */
  width: 8px;
  height: 100%;
  background: 
    linear-gradient(
      to left,
      rgba(0,0,0,0.2) 0%,      /* 右端の影 */
      rgba(0,0,0,0.1) 50%,     /* 中間 */
      transparent 100%         /* 左端は透明 */
    );
  transform: translateZ(2px);
  z-index: var(--z-background);
  border-radius: 0 30% 30% 0;  /* 右側の丸み */
  pointer-events: none;
}

.manual-card.page-curl-forward::after {
  content: '';
  position: absolute;
  top: 5%;
  right: -5px;  /* 右端の裏側 */
  width: 6px;
  height: 90%;
  background: 
    linear-gradient(
      to left,
      rgba(150,150,150,0.5) 0%,   /* 裏側の色 */
      rgba(200,200,200,0.3) 70%,  /* 中間 */
      transparent 100%            /* 透明 */
    );
  transform: rotateY(70deg) translateZ(5px);  /* 右向きの回転 */
  z-index: -1;
  border-radius: 0 20% 20% 0;  /* 右側の丸み */
  pointer-events: none;
}

/* ページ戻り時（左→右）の陰影エフェクト */
.manual-card.page-curl-backward::before {
  content: '';
  position: absolute;
  top: 0;
  right: -3px;  /* 右端の陰影 */
  width: 12px;
  height: 100%;
  background: 
    radial-gradient(
      ellipse 15px 100% at 0% 50%,
      rgba(0,0,0,0.3) 0%,
      rgba(0,0,0,0.15) 40%,
      rgba(0,0,0,0.05) 70%,
      transparent 90%
    );
  transform: translateZ(3px);
  z-index: var(--z-background);
  border-radius: 0 40% 40% 0;  /* 右側の丸み */
  pointer-events: none;
}

.manual-card.page-curl-backward::after {
  content: '';
  position: absolute;
  top: 3%;
  right: -8px;  /* 右端の裏側 */
  width: 10px;
  height: 94%;
  background: 
    linear-gradient(
      to left,
      rgba(180,180,180,0.7) 0%,
      rgba(210,210,210,0.4) 60%,
      transparent 100%
    );
  transform: rotateY(85deg) translateZ(8px);  /* 右向きの回転 */
  z-index: -1;
  border-radius: 0 25% 25% 0;  /* 右側の丸み */
  pointer-events: none;
}

/* スクロールバー非表示 */
.detail-scroll-container::-webkit-scrollbar {
  display: none;
}
.detail-scroll-container {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ページインジケータ（ノンブル風 - 左ページの左下隅） */
[data-layout="desktop"] .book-spread-container .detail-scroll-info,
.book-spread-container .detail-scroll-info {
  position: absolute;
  bottom: 15px;
  left: 50px; /* 左ページのパディングに合わせて調整 */
  top: auto; /* topの値をリセット */
  right: auto; /* rightの値をリセット */
  font-size: 18px; /* 14px→18px */
  font-weight: 600;
  color: #444;
  background: transparent;
  padding: 0;
  border-radius: 0;
  z-index: var(--z-overlay);
  pointer-events: none;
  border: none;
  font-family: 'Times New Roman', serif;
  letter-spacing: 0.5px;
  display: block;
}

/* モバイルレイアウト時はノンブルを非表示 */
[data-layout="mobile"] .detail-scroll-info {
  display: none;
}

/* 右ページ内のキャラクター画像 - より大きなサイズ */
.cutin-face-right-page {
  width: 85%;
  max-width: 200px;
  height: auto;
  max-height: 400px; /* より高い画像に対応 */
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 
    0 12px 40px rgba(0,0,0,0.3),
    0 6px 16px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.3);
  cursor: pointer;
  transition: all 0.3s ease;
  opacity: 0; /* 初期は非表示 */
  
  /* 本のページらしい装飾 */
  border: 4px solid rgba(255, 255, 255, 0.9);
}

.cutin-face-right-page:hover {
  transform: scale(1.05) rotate(0.5deg);
  box-shadow: 
    0 16px 48px rgba(0,0,0,0.4),
    0 8px 20px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.4);
}

.cutin-face-right-page.visible {
  opacity: 1;
}