@charset "utf-8";
/* ========================================
   全体およびライブ小説のレイアウト・骨格 (live-layout.css)
======================================== */

/* 全体の基本設定 */
body { margin: 0; padding: 0; display: flex; flex-direction: column; min-height: 100vh; }
.site-header { padding: 15px 0; position: sticky; top: 0; z-index: 1000; }
.header-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; }
.site-title { margin: 0; }
.user-menu { display: flex; gap: 10px; align-items: center; }
.login-status { margin-right: 5px; }
.btn-outline { padding: 8px 18px; }
.site-footer { text-align: center; padding: 30px 0; margin-top: auto; }
.footer-inner p { margin: 0; }

.main-content { flex: 1; padding: 40px 20px; }
.content-wrapper { max-width: 800px; margin: 0 auto; }
.form-section { margin-top: 40px; margin-bottom: 20px; }

/* 物語の表示エリア */
.story-container { padding: 40px; margin-bottom: 40px; max-height: 60vh; overflow-y: auto; }
.story-container::-webkit-scrollbar { width: 8px; }
.story-part { padding-bottom: 25px; margin-bottom: 25px; }
.story-part:last-child { margin-bottom: 0; padding-bottom: 0; }
.story-text { margin-top: 20px; margin-bottom: 10px; white-space: pre-wrap; }
.story-meta { text-align: right; }
.empty-message { text-align: center; }

/* 投稿フォームエリア */
textarea { width: 100%; height: 300px; padding: 15px; box-sizing: border-box; resize: vertical; margin-bottom: 15px; }
.btn-primary { width: 100%; max-width: 300px; margin: 10px auto; display: block; padding: 12px; }
.btn-secondary { display: inline-block; padding: 10px 30px; margin-top: 15px; }

/* 本エリア */
.story-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; }
.book-cover-container { display: flex; align-items: flex-start; gap: 40px; margin-bottom: 40px; padding: 0 10px; }
.book-cover-wrapper { flex-shrink: 0; }
.book-cover-image { width: 180px; height: auto; max-width: 100%; }
.book-info { flex: 1; padding-top: 10px; }
.book-title { margin: 0 0 15px 0; padding-bottom: 5px; display: inline-block; }

/* コメントエリア */
.post-comments-area { margin-top: 10px; padding: 12px 15px; }
.single-comment { padding: 8px 0; margin-bottom: 0; display: flex; align-items: flex-start; }
.comment-author { margin-right: 8px; white-space: nowrap;  flex-shrink: 0; }
.comment-text { flex: 1; overflow-wrap: break-word; }
.comment-time { margin-left: 8px; white-space: nowrap; flex-shrink: 0; }
.comment-form { display: flex; gap: 8px; align-items: flex-start; margin-top: 5px; padding-top: 10px; }
.input-comment-text { flex: 1; padding: 8px; min-height: 40px; resize: vertical; line-height: 1.5; font-family: inherit; }

/* ナビゲーション（ジャンプ） */
.post-navigation { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; padding: 10px 15px; }
.nav-buttons { display: flex; flex-wrap: wrap; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.nav-buttons::-webkit-scrollbar { display: none; }
.btn-jump { padding: 6px 14px; white-space: nowrap; }

/* レスポンシブ */
@media screen and (max-width: 768px) {
    .book-cover-container { flex-direction: column; align-items: center; text-align: center; }
    .book-cover-image { margin-bottom: 20px; }
    .comment-form { flex-direction: column; }
    .input-comment-name { width: 100%; }
}