/* 記事コンテンツの適切な幅制御CSS（シンプル版） */

/* ========== 基本方針 ========== */
/* 1. 記事コンテンツの幅制御はするが、サイト全体のレイアウトは保持 */
/* 2. 狭すぎるHTML要素は適度に拡張、広すぎる要素は制限 */
/* 3. 3カラムレイアウト（左広告・記事・右サイドバー）を維持 */

/* ========== 記事コンテンツ全体の制御 ========== */
.post-content,
.post-excerpt {
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    box-sizing: border-box;
}

/* ========== 狭すぎる要素の修正 ========== */
/* インラインスタイルで極端に狭く指定された要素を適度に拡張 */
.post-content [style*="width: 1"],
.post-content [style*="width: 2"],
.post-content [style*="width: 3"],
.post-content [style*="width: 4"],
.post-content [style*="width: 5"],
.post-content [style*="width:1"],
.post-content [style*="width:2"],
.post-content [style*="width:3"],
.post-content [style*="width:4"],
.post-content [style*="width:5"],
.post-excerpt [style*="width: 1"],
.post-excerpt [style*="width: 2"],
.post-excerpt [style*="width: 3"],
.post-excerpt [style*="width: 4"],
.post-excerpt [style*="width: 5"],
.post-excerpt [style*="width:1"],
.post-excerpt [style*="width:2"],
.post-excerpt [style*="width:3"],
.post-excerpt [style*="width:4"],
.post-excerpt [style*="width:5"] {
    min-width: 300px;
    width: auto;
}

/* パーセンテージで狭く指定された要素も適度に拡張 */
.post-content [style*="width: 10%"],
.post-content [style*="width: 20%"],
.post-content [style*="width: 30%"],
.post-content [style*="width:10%"],
.post-content [style*="width:20%"],
.post-content [style*="width:30%"],
.post-excerpt [style*="width: 10%"],
.post-excerpt [style*="width: 20%"],
.post-excerpt [style*="width: 30%"],
.post-excerpt [style*="width:10%"],
.post-excerpt [style*="width:20%"],
.post-excerpt [style*="width:30%"] {
    min-width: 300px;
    width: auto;
}

/* よく使われる狭い幅のクラス名も修正 */
.post-content .prose,
.post-content .container,
.post-excerpt .prose,
.post-excerpt .container {
    min-width: 300px;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* ========== 広すぎる要素の制限 ========== */
/* 画像・動画等のメディア要素 */
.post-content img,
.post-content video,
.post-content iframe,
.post-content embed,
.post-content object,
.post-excerpt img,
.post-excerpt video,
.post-excerpt iframe,
.post-excerpt embed,
.post-excerpt object {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 10px auto;
}

/* テーブルの制御 */
.post-content table,
.post-excerpt table {
    width: 100%;
    max-width: 100%;
    table-layout: auto;
    overflow-x: auto;
    display: block;
    white-space: nowrap;
}

.post-content table th,
.post-content table td,
.post-excerpt table th,
.post-excerpt table td {
    padding: 8px 12px;
    text-align: left;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ========== テキストの改行制御 ========== */
/* 長いURL等のテキストの制御 */
.post-content a,
.post-content p,
.post-content div,
.post-excerpt a,
.post-excerpt p,
.post-excerpt div {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* コードブロックの制御 */
.post-content pre,
.post-content code,
.post-excerpt pre,
.post-excerpt code {
    max-width: 100%;
    overflow-x: auto;
    word-wrap: break-word;
    white-space: pre-wrap;
}

/* ========== レスポンシブ対応 ========== */
@media (max-width: 768px) {
    .post-content [style*="width"],
    .post-excerpt [style*="width"] {
        min-width: 200px;
    }
    
    .post-content .prose,
    .post-content .container,
    .post-excerpt .prose,
    .post-excerpt .container {
        min-width: 200px;
    }
}

@media (max-width: 480px) {
    .post-content [style*="width"],
    .post-excerpt [style*="width"] {
        min-width: 150px;
    }
    
    .post-content .prose,
    .post-content .container,
    .post-excerpt .prose,
    .post-excerpt .container {
        min-width: 150px;
    }
}

/* ========== 特殊ケース対応 ========== */
/* フローティング要素の制御 */
.post-content [style*="float"],
.post-excerpt [style*="float"] {
    float: none;
    display: block;
    margin: 10px auto;
}

/* 絶対位置指定要素の制御 */
.post-content [style*="position: absolute"],
.post-content [style*="position:absolute"],
.post-excerpt [style*="position: absolute"],
.post-excerpt [style*="position:absolute"] {
    position: relative;
}