/* ========== フリースペース要素の文字列改行処理 ========== */
/* 長い文字列が画面からはみ出ないようにする専用CSS */
/* 作成日: 2025-01-23 */

/* フリースペース共通設定 - 管理画面用 */
.free-space,
.freespace,
#freeSpace,
#topUpperFreeSpace,
#topLowerFreeSpace,
#articleUpperFreeSpace,
#articleLowerFreeSpace,
[class*="free_space"],
[class*="free-space"],
[id*="free_space"],
[id*="freeSpace"] {
    /* 最強の改行設定 - どんな文字でも必ず改行 */
    word-wrap: break-word !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
    
    /* 最大幅制限 - 絶対に親要素を超えない */
    max-width: 100% !important;
    width: 100% !important;
    
    /* オーバーフロー対策 - はみ出したらスクロール */
    overflow-x: auto !important;
    overflow-y: visible !important;
    
    /* ボックスモデル調整 */
    box-sizing: border-box !important;
    
    /* 追加の安全対策 */
    display: block !important;
    position: relative !important;
    
    /* 空白文字の処理 */
    white-space: pre-wrap !important;
}

/* 生成されたサイト用のフリースペース設定 */
.free-space,
.free-space-container,
.top-free-space,
.bottom-free-space,
.article-free-space,
.article-upper-free-space {
    /* 最強の改行設定 - どんな文字でも必ず改行 */
    word-wrap: break-word !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
    
    /* 最大幅とオーバーフロー - 絶対に親要素を超えない */
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    
    /* ボックスモデル */
    box-sizing: border-box !important;
    
    /* 追加の安全対策 */
    display: block !important;
    position: relative !important;
    
    /* 空白文字の処理 */
    white-space: pre-wrap !important;
}

/* フリースペース内のテキストエリア */
textarea[name*="free_space"],
textarea[name*="freeSpace"],
textarea.free-space,
textarea.freespace,
#top_free_space,
#bottom_free_space,
#article_free_space,
#article_upper_free_space {
    /* 長い単語の改行 */
    word-wrap: break-word !important;
    word-break: break-all !important;
    overflow-wrap: break-word !important;
    
    /* 幅制限 */
    max-width: 100% !important;
    width: 100% !important;
    
    /* リサイズと高さ */
    resize: vertical !important;
    min-height: 100px !important;
    
    /* ボックスモデル */
    box-sizing: border-box !important;
    
    /* 横スクロール */
    overflow-x: auto !important;
    overflow-y: auto !important;
    
    /* ホワイトスペースの保持 */
    white-space: pre-wrap !important;
    
    /* フォント */
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
    font-size: 13px !important;
}

/* フリースペース内の全ての子要素 */
.free-space *,
.freespace *,
.free-space-container *,
.top-free-space *,
.bottom-free-space *,
.article-free-space *,
.article-upper-free-space *,
[class*="free_space"] *,
[class*="free-space"] *,
[id*="free_space"] *,
[id*="freeSpace"] * {
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* フリースペース内のテーブル */
.free-space table,
.free-space-container table,
.freespace table {
    table-layout: fixed !important;
    width: 100% !important;
}

/* フリースペース内の画像 */
.free-space img,
.free-space-container img,
.freespace img {
    max-width: 100% !important;
    height: auto !important;
}

/* フリースペース内のiframe */
.free-space iframe,
.free-space-container iframe,
.freespace iframe {
    max-width: 100% !important;
}

/* コードブロックやpreタグ */
.free-space pre,
.free-space code,
.free-space-container pre,
.free-space-container code,
.freespace pre,
.freespace code {
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    overflow-x: auto !important;
    max-width: 100% !important;
    padding: 10px !important;
    background-color: #f5f5f5 !important;
    border-radius: 4px !important;
}

/* プレビューや表示時のフリースペース */
.article-content .free-space,
.content-area .free-space,
.preview-content [class*="free"],
.generated-content .free-space {
    word-wrap: break-word !important;
    word-break: break-all !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    overflow-x: auto !important;
}

/* TinyMCEエディタ内のフリースペース */
.tinymce-editor[name*="free_space"],
.mce-content-body .free-space {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
}

/* モバイル対応 */
@media (max-width: 768px) {
    .free-space,
    .freespace,
    .free-space-container,
    .top-free-space,
    .bottom-free-space,
    .article-free-space,
    .article-upper-free-space,
    [class*="free_space"],
    [class*="free-space"],
    [id*="free_space"],
    [id*="freeSpace"] {
        padding: 10px !important;
        font-size: 14px !important;
    }
    
    /* モバイルでのテキストエリア */
    textarea[name*="free_space"],
    textarea[name*="freeSpace"] {
        font-size: 12px !important;
        min-height: 80px !important;
    }
}

/* 印刷対応 */
@media print {
    .free-space,
    .freespace,
    .free-space-container {
        word-break: break-word !important;
        overflow: visible !important;
    }
}