/* ==========================================
   小説本文ページ専用スタイル（土台）
   ========================================== */

:root {
    /* 作品ごとに変えたい要素の「デフォルト値」を設定 */
    --bg-novel: #fdfbf7;
    /* 本文背景色（デフォルトは生成り） */
    --text-novel: #4a4238;
    /* 本文文字色 */
    --font-novel: 'M PLUS Rounded 1c', sans-serif;
    /* 本文フォント */
    --novel-max-width: 680px;
    /* 小説本文の横幅（読みやすい最適な幅） */
    --novel-line-height: 2.0;
    /* 行間（小説は広めが読みやすい） */
    --novel-font-size: 1.05rem;
    /* 文字サイズ */
    --novel-letter-spacing: 0.08em;
    /* 文字と文字の間隔 */
}

/* 小説ページのボディ（変数で動的に変わる） */
.novel-body {
    background-color: var(--bg-novel) !important;
    color: var(--text-novel) !important;
    font-family: var(--font-novel), sans-serif !important;
    background-image: none;
    /* トップページの背景パターンをリセット */
}

/* 作品ごとのメインビジュアル（サムネイル）エリア */
.novel-thumbnail-header {
    width: 100%;
    max-width: var(--novel-max-width);
    margin: 40px auto 20px auto;
    padding: 0 20px;
    text-align: center;
}

/* サムネイル画像（HTML側でsrc指定、あるいは未設置でも崩れない仕様） */
.novel-thumbnail-header img {
    width: 100%;
    height: auto;
    max-height: 300px;
    /* 大きくなりすぎないよう制限 */
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* 小説タイトルまわり */
.novel-header {
    text-align: center;
    max-width: var(--novel-max-width);
    margin: 0 auto 40px auto;
    padding: 0 20px;
}

.novel-title {
    font-size: 1.8rem;
    line-height: 1.4;
    margin-bottom: 10px;
    color: inherit;
    /* 本文の色に追従 */
}

.novel-subtitle {
    font-size: 0.9rem;
    opacity: 0.7;
}

/* 小説本文が通るコンテナ */
.novel-wrapper {
    max-width: var(--novel-max-width);
    margin: 0 auto;
    padding: 0 24px 100px 24px;
    /* 下部を広めにあけて余韻を持たせる */
}

/* 小説の文章そのもの */
.novel-text {
    font-size: var(--novel-font-size);
    line-height: var(--novel-line-height);
    letter-spacing: var(--novel-letter-spacing);
    text-align: justify;
    /* 両端揃えで本の紙面のような美しさに */
    word-wrap: break-word;
}

/* 段落間の調整（空行を挟むスタイル・1行あけるスタイルどちらにも対応） */
.novel-text p {
    margin-bottom: 1.5em;
    min-height: 1em;
    /* 空白行が無視されないようにする */
}

/* 夢小説の名前置換部分を強調したい場合用（お好みで） */
.dream-last,
.dream-first {
    font-weight: bold;
    color: inherit;
    /* 世界観を壊さないよう、文字色に馴染ませる */
}

/* ページ下部のナビゲーション（目次へ戻る、前へ、次へなど） */
.novel-footer-nav {
    margin-top: 60px;
    padding-top: 20px;
    border-top: 1px dashed rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
}

.novel-footer-nav a {
    color: inherit;
    opacity: 0.7;
    text-decoration: underline;
}

.novel-footer-nav a:hover {
    opacity: 1;
}

/* ==========================================
   スマホ用の微調整
   ========================================== */
@media screen and (max-width: 560px) {
    :root {
        --novel-font-size: 0.95rem;
        /* スマホでは文字をわずかに小さく */
        --novel-line-height: 1.9;
        /* 行間をスマホに最適化 */
    }

    .novel-title {
        font-size: 1.4rem;
    }

    .novel-wrapper {
        padding: 0 18px 80px 18px;
    }
}