body { margin: 0; font-family: Arial, sans-serif; background-color: #333; color: white; display: flex; flex-direction: column; height: 100vh; }

.header { background-color: #1a6287; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 5px rgba(0,0,0,0.5); z-index: 10; }
.header h1 { margin: 0; font-size: 18px; font-weight: normal; }

.pdf-navigation-menu { background-color: #ffffff; padding: 15px 10px; display: flex; flex-direction: column; align-items: center; gap: 12px; border-bottom: 1px solid #dddddd; z-index: 9; }
.menu-row { display: flex; justify-content: center; gap: 10px; width: 100%; flex-wrap: wrap; }

/* ボタン基本 */
.book-nav-btn { padding: 8px 24px; font-size: 14px; font-weight: bold; border-radius: 8px; cursor: pointer; text-align: center; min-width: 80px; }
.book-nav-btn.active { background-color: #007bff; color: #ffffff; border: 1px solid #007bff; }
.book-nav-btn.inactive { background-color: #ffffff; color: #007bff; border: 1px solid #007bff; }

.chap-nav-btn { padding: 6px 20px; font-size: 13px; font-weight: bold; border-radius: 6px; background-color: #fdfdfd; color: #1c833c; border: 1px solid #1c833c; cursor: pointer; min-width: 70px; transition: all 0.2s; }
.chap-nav-btn.active { background-color: #1c833c; color: #ffffff; border: 1px solid #1c833c; }
/* ★追加：未完了のCHAPはグレーアウトしてクリック不可のように見せる */
.chap-nav-btn.locked { background-color: #eeeeee; color: #999999; border: 1px solid #cccccc; cursor: not-allowed; }

.controls { background-color: #222; padding: 10px; text-align: center; border-bottom: 1px solid #444; }
.controls button { padding: 5px 15px; margin: 0 5px; cursor: pointer; background-color: #555; color: white; border: none; border-radius: 4px; }
.controls button:hover { background-color: #777; }
.controls button:disabled { background-color: #333; color: #666; cursor: not-allowed; }
.page-info { margin: 0 15px; font-size: 14px; }

.pdf-container { flex-grow: 1; overflow: auto; text-align: center; padding: 20px; }
canvas { box-shadow: 0 4px 8px rgba(0,0,0,0.5); background-color: white;

#loadingMsg { margin-top: 50px; font-size: 18px; color: #ccc; }