/* ================================
   ピースの明暗と視覚効果（一覧画面）
   ================================ */
/* 未登録（選択不可）のピースは暗くする */
.puzzle-item.inactive img {
    filter: brightness(0.35) grayscale(0.5); /* 暗くし、少し色味も落とす */
    cursor: not-allowed; /* クリックできないことを示すカーソル */
}

.active::after {
    display: none; 
}

/* ================================
   タイトルエリア
   ================================ */
.view-title {
    text-align: center; /* タイトルを中央揃えに */
    margin-top: 0;
    margin-bottom: 25px;
    color: #5a4a42;
}

/* ================================
   画像情報エリア（中央配置に修正）
   ================================ */
.info-section {
    display: flex;
    flex-direction: column; /* ★中身を「縦並び」にする */
    align-items: center;    /* ★縦並びにしたものを「中央揃え」にする */
    justify-content: center;
    gap: 15px;              /* 画像と文字の隙間 */
    background: #fffdf0; 
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 30px;
    border: 1px solid #faedcd;
}

/* 画像自体の設定（念のため大きさを整える） */
.preview-img {
    max-width: 200px; /* 画像が大きくなりすぎないように制限 */
    height: auto;
    border-radius: 5px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* ================================
   下部のアクションエリア（戻るボタンなど）
   ================================ */
.action-area {
    text-align: center; /* ボタンを中央揃えに */
    margin-top: 30px;
}

.novel-text {
    /* フォント設定 */
    font-family: 'Sawarabi Mincho', 'Noto Serif JP', '游明朝', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
    font-size: 1.05rem; /* 長文が読みやすいサイズ */
    line-height: 2.0;   /* 長文なので行間は少し詰めて視線移動を楽に */
    color: #3e312b; 
    letter-spacing: 0.05em; 
    text-align: justify; 
    word-break: break-all;
    
    /* 背景と枠のデザイン */
    background-color: #fffdf9; 
    padding: 30px 40px;
    border-radius: 8px;
    border: 1px solid #f2e8e3;
    box-shadow: inset 0 0 15px rgba(226, 149, 120, 0.05);
    
    max-height: 50vh; /* 画面の高さの約半分をテキストエリアの最大値にする */
    overflow-y: auto; /* はみ出した分はスクロールできるようにする */
}

/* テキストエリア内のスクロールバーをサイトの色に合わせてオシャレにする */
.novel-text::-webkit-scrollbar {
    width: 8px;
}
.novel-text::-webkit-scrollbar-track {
    background: #fffdf9;
    border-radius: 4px;
}
.novel-text::-webkit-scrollbar-thumb {
    background: #e29578; /* テラコッタピンク */
    border-radius: 4px;
}