@charset "utf-8";
/* ========================================
   本とデスクのレイアウト・骨格 (book-layout.css)
======================================== */

body { margin: 0; padding: 0; }

.desk-container { max-width: 1200px; margin: 30px auto; display: flex; flex-direction: column; align-items: center; position: relative; }
.open-book { display: flex; flex-direction: row; width: 1000px; height: 800px; margin-bottom: 10px; position: relative; overflow: hidden; flex-shrink: 1; }
.book-page { flex: 1; padding: 40px; height: 100%; position: relative; box-sizing: border-box; }

.book-left { display: flex; flex-direction: column; flex: 4;}
.book-spine { position: absolute; top: 0; right: 0; width: 30px; height: 100%; pointer-events: none; }
.book-cover-wrapper { margin: 0 auto 15px; width: 140px; height: 200px; flex-shrink: 0; }
.book-cover-image { width: 100%; height: 100%; object-fit: cover; }

.book-title { text-align: center; margin-bottom: 10px; }
.book-meta { margin-bottom: 10px; padding-bottom: 10px; }
.book-description { margin-bottom: 15px; max-height: 280px; overflow-y: auto; overflow-wrap: break-word; word-break: break-word; white-space: pre-wrap; }

.book-right { padding: 0; flex: 1; min-height: 0; display: flex; flex-direction: column; flex: 6;}
.story-container { flex: 1; min-height: 0; overflow-y: auto; padding: 40px 40px 100px 40px; box-sizing: border-box; }
.story-part { margin-bottom: 40px; padding-bottom: 20px; }
.story-part:last-child { margin-bottom: 0; }
.story-text { margin-bottom: 15px; }
.story-footer { display: flex; justify-content: space-between; align-items: center; }

/* ヘッダー・フッターの配置 */
.site-header { width: 100%; padding: 12px 0; }
.header-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.site-title { margin: 0; }
.user-menu { display: flex; align-items: center; gap: 15px; }
.header-nickname { margin-right: 15px; }
.btn-outline { display: inline-block; padding: 6px 18px; }

.header-navigation { display: flex; align-items: center; gap: 15px; margin-top: 10px; padding-top: 10px; width: 100%; }
.header-nav-buttons { display: grid; grid-template-columns: repeat(10, 1fr); gap: 10px; width: 100%; }
.header-btn-jump { padding: 6px 0; width: 100%; box-sizing: border-box; text-align: center; }

.site-footer { padding: 15px 0; margin-top: 40px; text-align: center; }
.footer-inner { max-width: 1300px; margin: 0 auto; padding: 0 20px; }

/* 執筆エリアの配置 */
.writing-desk { position: absolute; top: 20px; left: 105px; width: 950px; z-index: 100; margin-top: 0; }
.writing-desk.is-minimized { width: 280px; left: 120px; top: auto; bottom: 350px; }
.form-container { padding: 20px; }
.paper-textarea { width: 100%; height: 550px; resize: vertical; }
.btn-primary { padding: 10px 20px; float: right; margin-top: 15px; }

/* コメントエリアの配置 */
.post-comments-area { position: fixed; top: 170px; left: 20px; width: 400px; max-height: 75vh; padding: 20px; z-index: 1000; overflow-y: auto; resize: both; overflow: auto;}
.post-comments-area::before { display: block; margin-bottom: 15px; padding-bottom: 5px; text-align: center; position: sticky; top: -20px; padding-top: 20px; z-index: 10; }
.single-comment { margin-bottom: 12px; padding: 10px; }
.comment-author { display: block; margin-bottom: 5px; }
.comment-text { display: block; }
.comment-time { display: block; text-align: right; margin-top: 5px; }
.comment-form { display: flex; flex-direction: column; gap: 8px; margin-top: 15px; position: sticky; bottom: -20px; padding-bottom: 20px; padding-top: 15px; }
.input-comment-text { width: 100%; padding: 8px; box-sizing: border-box; }
.btn-close-comment { position: absolute; top: 15px; right: 15px; padding: 4px 10px; z-index: 10; }
.book-title-mobile { display: none; }

/* ========================================
   レスポンシブ (スマホ向けレイアウトの整理完了版)
======================================== */
@media screen and (max-width: 768px) {
    .desk-container { display: flex; flex-direction: column; align-items: center; }
    .writing-desk { position: static; width: 100%; order: -1; margin-top: 0; margin-bottom: 10px; }
    .writing-desk.is-minimized { width: 100%; }
    .open-book { order: 1; display: flex; flex-direction: column; height: 88vh; width: 95%; }
    .paper-textarea { height: 350px; }
    .header-inner { flex-direction: column; gap: 10px; text-align: center; }
    .user-menu { flex-direction: column; gap: 8px; }
    .header-nav-buttons { grid-template-columns: repeat(5, 1fr); }
    .book-left { width: 100%; padding: 15px; box-sizing: border-box; max-height: 200px; }
    .book-right { width: 100%; flex: 1; min-height: 0; padding: 0; }
    .story-container { width: 100%; flex: 1; min-height: 0; padding: 20px; box-sizing: border-box; overflow-y: auto; }
    .book-meta, .book-cover-wrapper { display: none; }
    .book-title-mobile { display: block; margin-bottom: 0; }
    .book-description { margin-bottom: 0; max-height: 200px; overflow-y: auto; }
    .form-container { padding: 15px; }
    .post-comments-area { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-height: 60vh; }
}