:root {
    --bg-color: #f0f2f5;
    --text-color: #333;
    --editor-bg: #fff;
    --accent-color: #2c3e50;
    --btn-color: #3498db;
}

body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    padding: 0;
}

header {
    background-color: var(--accent-color);
    color: white;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header h1 {
    margin: 0;
    font-size: 1.5rem;
}

button {
    background-color: var(--btn-color);
    color: white;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.2s;
}

button:hover {
    background-color: #2980b9;
    transform: scale(1.02);
}

.container {
    display: flex;
    gap: 20px;
    padding: 20px;
    height: calc(100vh - 100px);
}

.editor-area, .preview-area {
    flex: 1;
    background: var(--editor-bg);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    overflow-y: auto;
}

.form-group {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 0.9rem;
    color: #555;
}

input[type="text"], textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    font-family: inherit;
    resize: vertical;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    margin-bottom: 15px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

.term-entry {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 15px;
    border-left: 5px solid var(--btn-color);
}

/* PDF用プレビュー（紙っぽく） */
.document {
    background: white;
    padding: 40px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    min-height: 800px;
}

.document h1 {
    text-align: center;
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 10px;
    margin-bottom: 30px;
}

.doc-section {
    margin-top: 40px;
}

.doc-section h2 {
    color: var(--accent-color);
    border-bottom: 1px dashed #ccc;
    padding-bottom: 5px;
    font-size: 1.3rem;
}

.preview-term-item {
    margin-bottom: 20px;
    list-style-type: none;
}

.preview-term-name {
    font-weight: bold;
    font-size: 1.1em;
    color: #2c3e50;
    margin-bottom: 5px;
}

#preview-desc {
    line-height: 1.8;
}

#preview-terms-list {
    padding-left: 0;
}

:root {
    --bg-color: #f4f6f9;
    --text-color: #333;
    --accent-color: #2c3e50;
    --primary-color: #e67e22; /* 創作意欲を刺激する色に */
    --border-color: #ddd;
}

body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    background-color: var(--bg-color);
    margin: 0; padding: 0;
}

header {
    background-color: var(--accent-color);
    color: white;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

button, .btn-secondary {
    border: none; padding: 8px 15px; border-radius: 4px;
    font-weight: bold; cursor: pointer; transition: 0.2s;
    font-size: 0.9rem; display: inline-block;
}
.btn-primary { background: var(--primary-color); color: white; }
.btn-primary:hover { filter: brightness(1.1); }
.btn-secondary { background: #7f8c8d; color: white; }
.btn-secondary:hover { background: #95a5a6; }

.container { display: flex; gap: 20px; padding: 20px; height: calc(100vh - 80px); box-sizing: border-box; }
.editor-area, .preview-area {
    flex: 1; background: white; padding: 20px; border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); overflow-y: auto;
}

.box { border: 1px solid var(--border-color); padding: 15px; border-radius: 6px; margin-bottom: 15px; background: #fafafa; }
label { font-weight: bold; font-size: 0.85rem; color: #555; display: block; margin-bottom: 5px; }
input[type="text"], textarea { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-bottom: 10px;}

.add-section-area { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.add-section-area button { background: #3498db; color: white; }

/* エディター内のセクション（ドラッグ可能） */
.editor-section {
    background: #fff; border: 2px solid #eee; padding: 15px; border-radius: 8px; margin-bottom: 15px;
    border-left: 5px solid var(--primary-color); position: relative;
}
.drag-handle { cursor: grab; color: #999; margin-right: 10px; font-size: 1.2rem; }
.delete-btn { position: absolute; right: 15px; top: 15px; background: #e74c3c; color: white; padding: 5px 10px; }

/* プレビュー（紙） */
.document { background: white; padding: 40px; box-shadow: 0 0 15px rgba(0,0,0,0.1); min-height: 297mm; }
.cover-page { text-align: center; border-bottom: 3px double var(--accent-color); padding-bottom: 30px; margin-bottom: 40px; }
.cover-page img { max-width: 100%; max-height: 400px; object-fit: contain; margin-bottom: 20px; border-radius: 8px; }

.preview-sec { margin-bottom: 40px; }
.preview-sec h2 { color: var(--accent-color); border-bottom: 1px solid #ccc; padding-bottom: 5px; }
.term-grid { display: grid; grid-template-columns: 100px 1fr; gap: 5px; margin-bottom: 15px; font-size: 0.9rem; }
.term-grid strong { background: #f0f0f0; padding: 5px; border-radius: 3px; }
.timeline-item { border-left: 2px solid var(--primary-color); padding-left: 15px; margin-bottom: 10px; position: relative; }
.timeline-item::before { content: ''; position: absolute; left: -6px; top: 5px; width: 10px; height: 10px; background: var(--primary-color); border-radius: 50%; }

:root {
    --bg-color: #f4f6f9;
    --text-color: #333;
    --accent-color: #2c3e50;
    --primary-color: #e67e22; 
    --border-color: #ddd;
}

body { font-family: "Helvetica Neue", Arial, sans-serif; background-color: var(--bg-color); margin: 0; padding: 0; }

header { background-color: var(--accent-color); color: white; padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; }
.header-btns { display: flex; gap: 10px; }

button, .btn-secondary, .custom-file-upload {
    border: none; padding: 8px 15px; border-radius: 4px;
    font-weight: bold; cursor: pointer; transition: 0.2s; font-size: 0.9rem; display: inline-block;
}
.btn-primary { background: var(--primary-color); color: white; }
.btn-secondary { background: #7f8c8d; color: white; cursor: pointer;}
.btn-login { background: white; color: #db4437; border: 1px solid #ddd; }
.btn-add { background: #27ae60; color: white; }

.container { display: flex; gap: 20px; padding: 20px; height: calc(100vh - 80px); box-sizing: border-box; }
.editor-area, .preview-area { flex: 1; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); overflow-y: auto; }

.box { border: 1px solid var(--border-color); padding: 15px; border-radius: 6px; margin-bottom: 15px; background: #fafafa; }
label { font-weight: bold; font-size: 0.85rem; color: #555; display: block; margin-bottom: 5px; }
input[type="text"], textarea, select { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-bottom: 10px; font-family: inherit;}

.select-add-group { display: flex; gap: 10px; }
.select-add-group select { flex: 1; margin-bottom: 0; }

/* ファイルアップロードをおしゃれに */
input[type="file"] { display: none; }
.custom-file-upload { background-color: #ecf0f1; border: 1px solid #bdc3c7; color: #34495e; text-align: center; }
.custom-file-upload:hover { background-color: #bdc3c7; }
.file-name-display { font-size: 0.8rem; color: #7f8c8d; margin-top: 5px; }

/* エディター内セクション */
.editor-section { background: #fff; border: 2px solid #eee; padding: 15px; border-radius: 8px; margin-bottom: 15px; border-left: 5px solid var(--primary-color); position: relative; }
.drag-handle { cursor: grab; color: #999; margin-right: 10px; font-size: 1.2rem; }
.delete-btn { position: absolute; right: 15px; top: 15px; background: #e74c3c; color: white; padding: 5px 10px; }
.sec-header { margin-bottom: 15px; display: flex; align-items: center; padding-right: 40px;}

/* プレビュー */
.document { background: white; padding: 40px; box-shadow: 0 0 15px rgba(0,0,0,0.1); min-height: 297mm; }
.cover-page { text-align: center; border-bottom: 3px double var(--accent-color); padding-bottom: 30px; margin-bottom: 40px; }
.cover-page img { max-width: 100%; max-height: 400px; object-fit: contain; margin-bottom: 20px; border-radius: 8px; }
.preview-sec { margin-bottom: 40px; }
.preview-sec h2 { color: var(--accent-color); border-bottom: 1px solid #ccc; padding-bottom: 5px; margin-bottom: 15px;}

/* キャラプレビュー */
.char-preview { display: flex; gap: 20px; margin-bottom: 20px; background: #fdfdfd; padding: 15px; border: 1px solid #eee; border-radius: 8px; }
.char-img-preview { width: 120px; height: 120px; object-fit: cover; border-radius: 8px; border: 1px solid #ddd; }
.char-info { flex: 1; }
.char-info h3 { margin: 0 0 10px 0; color: var(--primary-color); }

.term-grid { display: grid; grid-template-columns: 100px 1fr; gap: 5px; margin-bottom: 15px; font-size: 0.9rem; }
.term-grid strong { background: #f0f0f0; padding: 5px; border-radius: 3px; }

:root {
    --bg-color: #f4f6f9;
    --text-color: #333;
    --accent-color: #2c3e50;
    --primary-color: #e67e22; 
    --border-color: #ddd;
}

body { font-family: "Helvetica Neue", Arial, sans-serif; background-color: var(--bg-color); margin: 0; padding: 0; }

/* 導線ナビゲーション */
.top-nav { background-color: #1a252f; padding: 8px 2rem; display: flex; gap: 20px; }
.top-nav a { color: #bdc3c7; text-decoration: none; font-size: 0.85rem; font-weight: bold; transition: 0.2s; }
.top-nav a:hover { color: #fff; }

header { background-color: var(--accent-color); color: white; padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; }
header h1 { margin: 0; font-size: 1.4rem; }
.header-btns { display: flex; gap: 10px; }

button, .btn-secondary, .custom-file-upload {
    border: none; padding: 8px 15px; border-radius: 4px;
    font-weight: bold; cursor: pointer; transition: 0.2s; font-size: 0.9rem; display: inline-block;
}
.btn-primary { background: var(--primary-color); color: white; }
.btn-secondary { background: #7f8c8d; color: white; }
.btn-login { background: white; color: #db4437; border: 1px solid #ddd; }
.btn-add { background: #27ae60; color: white; }

.container { display: flex; gap: 20px; padding: 20px; height: calc(100vh - 120px); box-sizing: border-box; }
.editor-area, .preview-area { flex: 1; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); overflow-y: auto; }

.box { border: 1px solid var(--border-color); padding: 15px; border-radius: 6px; margin-bottom: 15px; background: #fafafa; }
label { font-weight: bold; font-size: 0.85rem; color: #555; display: block; margin-bottom: 5px; }
input[type="text"], textarea, select { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-bottom: 10px; font-family: inherit;}
.select-add-group { display: flex; gap: 10px; }
.select-add-group select { flex: 1; margin-bottom: 0; }

input[type="file"] { display: none; }
.custom-file-upload { background-color: #ecf0f1; border: 1px solid #bdc3c7; color: #34495e; text-align: center; }
.custom-file-upload:hover { background-color: #bdc3c7; }
.file-name-display { font-size: 0.8rem; color: #7f8c8d; margin-top: 5px; }

.editor-section { background: #fff; border: 2px solid #eee; padding: 15px; border-radius: 8px; margin-bottom: 15px; border-left: 5px solid var(--primary-color); position: relative; }
.drag-handle { cursor: grab; color: #999; margin-right: 10px; font-size: 1.2rem; }
.delete-btn { position: absolute; right: 15px; top: 15px; background: #e74c3c; color: white; padding: 5px 10px; }
.sec-header { margin-bottom: 15px; display: flex; align-items: center; padding-right: 40px;}

.document { background: white; padding: 40px; box-shadow: 0 0 15px rgba(0,0,0,0.1); min-height: 297mm; }
.cover-page { text-align: center; border-bottom: 3px double var(--accent-color); padding-bottom: 30px; margin-bottom: 40px; }
.cover-page img { max-width: 100%; max-height: 400px; object-fit: contain; margin-bottom: 20px; border-radius: 8px; }
.preview-sec { margin-bottom: 40px; }
.preview-sec h2 { color: var(--accent-color); border-bottom: 1px solid #ccc; padding-bottom: 5px; margin-bottom: 15px;}

.char-preview { display: flex; gap: 20px; margin-bottom: 20px; background: #fdfdfd; padding: 15px; border: 1px solid #eee; border-radius: 8px; }
.char-img-preview { width: 120px; height: 120px; object-fit: cover; border-radius: 8px; border: 1px solid #ddd; }
.char-info { flex: 1; }
.char-info h3 { margin: 0 0 10px 0; color: var(--primary-color); }

/* 関係図プレビュー用 */
.rel-img-preview { width: 100%; max-height: 400px; object-fit: contain; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 8px; }

.term-grid { display: grid; grid-template-columns: 100px 1fr; gap: 5px; margin-bottom: 15px; font-size: 0.9rem; }
.term-grid strong { background: #f0f0f0; padding: 5px; border-radius: 3px; }

/* header付近のボタンのスタイルを上書きしてね！ */
.header-btns { display: flex; gap: 10px; align-items: center; }

button, .btn-secondary, .custom-file-upload {
    border: none; padding: 0 15px; border-radius: 4px;
    font-weight: bold; cursor: pointer; transition: 0.2s; font-size: 0.9rem; 
    display: inline-flex; align-items: center; justify-content: center;
    height: 36px; box-sizing: border-box; /* ここで高さを完全に統一！ */
}

/* --- 前回のCSSの一番下に追加してね！ --- */

/* スマホ用レスポンシブ対応 */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
        height: auto; /* スマホだとスクロールできるように */
        padding: 10px;
    }
    .editor-area, .preview-area {
        width: 100%;
        margin-bottom: 20px;
        box-sizing: border-box;
    }
    .top-nav {
        flex-wrap: wrap; /* ナビも折り返す */
        padding: 10px;
    }
    header {
        flex-direction: column;
        align-items: flex-start;
        padding: 15px;
    }
    .header-btns {
        margin-top: 15px;
        flex-wrap: wrap;
        width: 100%;
    }
    .header-btns button {
        flex: 1; /* スマホだとボタンが横いっぱいに広がるように */
        min-width: 120px;
        margin-bottom: 5px;
    }
}

/* トースト通知のおしゃれなデザイン */
.toast {
    visibility: hidden;
    min-width: 250px;
    background-color: rgba(44, 62, 80, 0.95);
    color: #fff;
    text-align: center;
    border-radius: 8px;
    padding: 16px 20px;
    position: fixed;
    z-index: 9999;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    font-size: 0.95rem;
    font-weight: bold;
    box-shadow: 0px 5px 15px rgba(0,0,0,0.3);
    opacity: 0;
    transition: opacity 0.3s, bottom 0.3s;
}
.toast.show {
    visibility: visible;
    opacity: 1;
    bottom: 40px; /* ふわっと浮き上がる */
}

/* ヘルプモーダル（ダイアログ） */
.modal {
    display: none; 
    position: fixed; 
    z-index: 2000; 
    left: 0; top: 0; 
    width: 100%; height: 100%; 
    background-color: rgba(0,0,0,0.6); 
    backdrop-filter: blur(3px);
}
.modal-content {
    background-color: #fff;
    margin: 10% auto; 
    padding: 30px; 
    border-radius: 12px;
    width: 85%; 
    max-width: 600px;
    line-height: 1.8;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.modal-content h2 { color: var(--accent-color); margin-top: 0; border-bottom: 2px solid #eee; padding-bottom: 10px; }
.modal-content ul { padding-left: 20px; }
.modal-content li { margin-bottom: 15px; }
.close-btn {
    color: #999;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}
.close-btn:hover { color: #333; }

/* --- ナビゲーションの基本設定 --- */
.top-nav { 
    background-color: #1a252f; 
    padding: 8px 2rem; 
    display: flex; 
    align-items: center;
    position: relative; /* スマホメニューを絶対配置するための基準 */
}
.nav-links {
    display: flex;
    gap: 20px;
    width: 100%;
}
.nav-links a { color: #bdc3c7; text-decoration: none; font-size: 0.85rem; font-weight: bold; transition: 0.2s; }
.nav-links a:hover { color: #fff; }
.help-link-style { margin-left: auto; color: #f1c40f !important; }

/* スマホでは隠すハンバーガーアイコン */
.hamburger {
    display: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
}

/* --- スマホ用レスポンシブ対応 --- */
@media (max-width: 768px) {
    .top-nav {
        padding: 10px 15px;
    }
    .hamburger {
        display: block; /* スマホで三本線を表示！ */
    }
    .nav-links {
        display: none; /* 最初はメニューを隠す */
        flex-direction: column;
        background-color: #2c3e50;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        padding: 10px 0;
        z-index: 1000;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    .nav-links.active {
        display: flex; /* クラスがついたら表示する */
    }
    .nav-links a {
        padding: 10px 20px;
        border-bottom: 1px solid #34495e;
    }
    .help-link-style { 
        margin-left: 0; /* スマホでは右寄せを解除 */
    }
    
    /* 以下は前回のスマホ対応CSSと同じ */
    .container { flex-direction: column; height: auto; padding: 10px; }
    .editor-area, .preview-area { width: 100%; margin-bottom: 20px; box-sizing: border-box; }
    header { flex-direction: column; align-items: flex-start; padding: 15px; }
    .header-btns { margin-top: 15px; flex-wrap: wrap; width: 100%; }
    .header-btns button { flex: 1; min-width: 120px; margin-bottom: 5px; }
}

/* ※既存のCSSに以下を追加・上書きしてね！ */

/* --- 長文の自動改行対応 --- */
.document {
    word-break: break-all; /* 限界まできたら強制改行！ */
    overflow-wrap: break-word;
}
.preview-sec p { white-space: pre-wrap; } /* テキストエリアの改行をそのまま反映 */

/* --- 🎨 パレットのアコーディオン（折りたたみ）デザイン --- */
.color-palette-box summary {
    font-weight: bold; color: var(--accent-color); cursor: pointer;
    list-style: none; padding: 5px; outline: none; transition: 0.2s;
}
.color-palette-box summary::-webkit-details-marker { display: none; }
.color-palette-box summary:hover { color: var(--primary-color); }
.color-palette-box[open] summary { border-bottom: 1px dashed #ccc; padding-bottom: 10px; margin-bottom: 15px; }

/* パレットを丸くて可愛く */
.palette-container { display: flex; justify-content: space-around; flex-wrap: wrap; }
.color-item { display: flex; flex-direction: column; align-items: center; font-size: 0.8rem; font-weight: bold; color: #666; }
input[type="color"] {
    -webkit-appearance: none; border: 3px solid #fff; width: 50px; height: 50px;
    border-radius: 50%; cursor: pointer; padding: 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 50%; }
input[type="color"]:hover { transform: scale(1.15) translateY(-2px); box-shadow: 0 8px 15px rgba(0,0,0,0.2); }

/* --- スマホ時のボタン群ハンバーガー化 --- */
.tools-hamburger { display: none; color: white; font-size: 1.5rem; cursor: pointer; }

@media (max-width: 768px) {
    /* ナビのハンバーガー */
    .top-nav { justify-content: space-between; }
    .hamburger { display: block; }
    .nav-links { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; width: 100%; background: #2c3e50; z-index: 1000; }
    .nav-links.active { display: flex; }
    
    /* ツールボタンのハンバーガー */
    header { flex-direction: row; justify-content: space-between; position: relative; }
    .tools-hamburger { display: block; padding: 10px; }
    .header-btns {
        display: none; /* 最初は隠す */
        position: absolute; top: 100%; right: 0; width: 200px;
        background: white; flex-direction: column; padding: 15px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.2); border-radius: 0 0 8px 8px; z-index: 999;
    }
    .header-btns.active { display: flex; }
    .header-btns button { width: 100%; margin-bottom: 8px; justify-content: flex-start; }
}

/* パレットの折りたたみ部分に追加してね！ */
.color-palette-box summary {
    display: flex; justify-content: space-between; align-items: center;
    font-weight: bold; color: var(--accent-color); cursor: pointer;
    list-style: none; padding: 5px; outline: none; transition: 0.2s;
}
.color-palette-box summary .arrow-icon {
    transition: transform 0.3s ease; /* くるっと回るアニメーション */
}
/* 開いた時に矢印を180度回転させて ▲ にする！ */
.color-palette-box[open] summary .arrow-icon {
    transform: rotate(180deg);
}
/* プレビュー（紙） */
.document {
    background-color: var(--doc-bg, #ffffff); /* ここを変更 */
    color: var(--doc-text, #333333);           /* ここを変更 */
    padding: 40px;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
    min-height: 297mm;
}

/* --- 👑 Pro専用 デザインテンプレート --- */
/* アンティーク */
.template-antique {
    background-color: #fdf6e3 !important; color: #5c4a3d !important;
    font-family: "Sawarabi Mincho", "Yu Mincho", serif !important;
}
.template-antique h2 { border-bottom: 2px double #cba276 !important; color: #8b5a2b !important; }
.template-antique .char-preview { background-color: #fff9ed !important; border-color: #e5c9a8 !important; }

/* ダークファンタジー */
.template-dark-fantasy {
    background-color: #1a1a1a !important; color: #d0d0d0 !important;
    font-family: "Sawarabi Mincho", "Yu Mincho", serif !important;
}
.template-dark-fantasy h2 { border-bottom: 1px solid #8b0000 !important; color: #ff4c4c !important; }
.template-dark-fantasy .char-preview { background-color: #252525 !important; border-color: #444 !important;}

/* サイバーパンク */
.template-cyberpunk {
    background-color: #050510 !important; color: #00ffcc !important;
    font-family: "Courier New", monospace !important;
}
.template-cyberpunk h2 { border-bottom: 2px dashed #ff00ff !important; color: #ff00ff !important; }
.template-cyberpunk .char-preview { background-color: #0a0a2a !important; border: 1px solid #00ffcc !important;}

/* 目次のデザイン */
.toc-container { margin-bottom: 40px; padding: 20px; background: rgba(128,128,128,0.05); border-radius: 8px; }
.toc-list { list-style: none; padding: 0; }
.toc-list li { margin-bottom: 8px; font-weight: bold; border-bottom: 1px dotted #ccc; }

/* --- PDFのページまたぎ（分割）を防ぐ --- */
.preview-sec, .char-preview, .rel-img-preview, .term-grid {
    page-break-inside: avoid; /* 古いブラウザ・PDFライブラリ用 */
    break-inside: avoid;      /* 新しいブラウザ用 */
    margin-bottom: 20px;
}

/* --- 長文改行・PDF見切れ防止・アコーディオン矢印 --- */
.document { word-break: break-all; overflow-wrap: break-word; }
.preview-sec p { white-space: pre-wrap; }
.preview-sec, .char-preview, .rel-img-preview, .term-grid {
    page-break-inside: avoid; break-inside: avoid; margin-bottom: 20px;
}
.color-palette-box summary { display: flex; justify-content: space-between; align-items: center; }
.color-palette-box summary .arrow-icon { transition: transform 0.3s ease; }
.color-palette-box[open] summary .arrow-icon { transform: rotate(180deg); }