body {
    font-family: "Yu Gothic", sans-serif;
    background: #f5f5f5;
    margin: 0;
    padding: 20px;
}

h1, h2 {
    color: #333;
    margin-bottom: 10px;
}

a {
    color: #0066cc;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* 投稿カード */
.post-card {
    background: #fff;
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0px 2px 4px rgba(0,0,0,0.1);
}

/* 日付と名前 */
.post-header {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

/* コメント */
.post-comment {
    font-size: 16px;
    margin-bottom: 10px;
    line-height: 1.6;
}

/* ギャラリーを3列に並べる */
.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.gallery img {
    width: calc(33.33% - 10px);
    border-radius: 5px;
    border: 1px solid #ccc;
    display: inline-block !important;
}

.gallery {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.gallery img {
    width: calc(33.33% - 10px) !important;
    border-radius: 5px !important;
    border: 1px solid #ccc !important;
    display: block !important;
}

/* --- レイアウトの全体中央寄せ --- */
body {
    max-width: 900px;  /* 画面の最大横幅（お好みに合わせて調整してください） */
    margin: 0 auto;    /* 左右の余白を自動にして中央に配置 */
    padding: 20px;
    background-color: #ffffff;
}

/* --- 投稿フォームの囲み線と薄いネズミ色（グレー）の復活 --- */
.form-container {
    background-color: #f5f5f5; /* 薄いネズミ色 */
    border: 1px solid #cccccc; /* 周りの囲み線（グレー） */
    padding: 20px;
    border-radius: 5px;        /* 角を少し丸くする */
    margin-bottom: 30px;
}

/* --- 投稿画像のサイズ制限（大きすぎる写真を自動縮小） --- */
.post-img {
    max-width: 200px !important;   /* 横幅を最大200画素に制限 */
    max-height: 200px !important;  /* 縦幅も最大200画素に制限 */
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    margin: 5px;
    border: 1px solid #ddd;
    padding: 3px;
    background: #fff;
    display: inline-block;
    vertical-align: top;
}

/* 投稿一覧の枠線（見やすく区切る場合） */
.post-item {
    padding: 15px 0;
}

/* ===================================================
   ★ 右上・小文字グレー配置の「ホームに戻る」
   =================================================== */
.home-link-container {
    max-width: 75%;
    margin: 10px auto;
    text-align: right;
}
.home-link {
    font-size: 11px;
    color: #666666;
    text-decoration: none;
}
.home-link:hover { text-decoration: underline; }


/* ===================================================
   ★ 画像投稿欄（フォーム）の横幅拡大設定（66.6%）
   =================================================== */
.form-container {
    max-width: 66.6% !important;
    margin: 0 auto 30px auto !important;
    background-color: #f5f5f5 !important;
    border: 1px solid #cccccc !important;
    padding: 20px !important;
    border-radius: 5px !important;
}

/* 斜体タイトル「akesuの画像掲示板」 */
.form-container h2 {
    font-size: 0 !important;
}
.form-container h2::after {
    content: "akesuの画像掲示板" !important;
    font-size: 24px !important;
    font-family: "Yu Mincho", "MS PMincho", serif !important;
    font-style: italic !important;
    color: #333333 !important;
    letter-spacing: 1px !important;
}


/* ===================================================
   ★ 投稿一覧（親カード）のデザイン・配置設定
   =================================================== */
.post-list {
    display: flex !important;
    flex-direction: column !important;
}

/* コメントと写真の間の点線を消去 */
.post-comment-underlined {
    font-size: 16px;
    margin-top: 15px;
    margin-bottom: 10px;
    line-height: 1.6;
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

/* 【重要修正】通常の写真を小さくさせず、横幅を「200px」に完全固定する設定 */
.gallery img.post-img {
    width: 200px !important;      /* 横幅をご希望通りの「200px」に完全固定 */
    height: auto !important;      /* 縦の長さは写真本来の比率で自動伸縮 */
    object-fit: contain !important;
    border-radius: 4px !important;
    border: 1px solid #cccccc !important; /* どんな比率でも形にぴったり沿う均一な細枠線 */
    display: inline-block !important;
    margin: 5px !important;
    box-sizing: border-box !important;
}

/* 返信ボタンの右寄せ・小文字化 */
.reply-trigger-container {
    text-align: right;
    margin-top: 10px;
}
.reply-btn {
    background: #f5f5f5; border: 1px solid #ccc; color: #333333; cursor: pointer; 
    font-size: 11px; padding: 3px 12px; border-radius: 4px;
}
.reply-btn:hover { background: #e8e8e8; color: #000000; }


/* ===================================================
   ★【親枠内完全合体・隙間極小化CSS】
   =================================================== */

/* 通常の親投稿カード（最新が上になるように数値を完全固定） */
.post-card[data-no="1"]  { order: 2000 !important; }
.post-card[data-no="2"]  { order: 1900 !important; }
.post-card[data-no="3"]  { order: 1800 !important; }
.post-card[data-no="4"]  { order: 1700 !important; }
.post-card[data-no="5"]  { order: 1600 !important; }
.post-card[data-no="6"]  { order: 1500 !important; }
.post-card[data-no="7"]  { order: 1400 !important; }
.post-card[data-no="8"]  { order: 1300 !important; }
.post-card[data-no="9"]  { order: 1200 !important; }
.post-card[data-no="10"] { order: 1100 !important; }

/* 返信投稿（>>No.〇）を、親投稿の「すぐ真下」へ強制移動 */
.post-card[data-reply-to="1"]  { order: 2001 !important; }
.post-card[data-reply-to="2"]  { order: 1901 !important; }
.post-card[data-reply-to="3"]  { order: 1801 !important; }
.post-card[data-reply-to="4"]  { order: 1701 !important; }
.post-card[data-reply-to="5"]  { order: 1601 !important; }
.post-card[data-reply-to="6"]  { order: 1501 !important; }
.post-card[data-reply-to="7"]  { order: 1401 !important; }
.post-card[data-reply-to="8"]  { order: 1301 !important; }
.post-card[data-reply-to="9"]  { order: 1201 !important; }
.post-card[data-reply-to="10"] { order: 1101 !important; }

/* 返信がある親カードの下側角丸と下線を消し、一体化の準備をします */
.post-card:has(+ .post-card[data-reply-to]:not([data-reply-to="0"])) {
    border-bottom: none !important;
    border-radius: 8px 8px 0 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 5px !important;
}

/* 親の枠の中に潜り込んできたように見せる、返信カード全体のドッキングデザイン */
.post-card[data-reply-to]:not([data-reply-to="0"]) {
    background-color: #f9f9f9 !important;
    border-left: 1px solid #cccccc !important;
    border-right: 1px solid #cccccc !important;
    border-bottom: 1px solid #cccccc !important;
    border-top: none !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03) !important;
    
    margin: 0 auto 20px 0 !important; 
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 0 0 8px 8px !important;
    padding: 0px 15px 5px 15px !important; 
}

/* 投稿写真のすぐ下に引く、細く短い返信用ライン（境線） */
.post-card[data-reply-to]:not([data-reply-to="0"])::before {
    content: "" !important;
    display: block !important;
    width: 30% !important;
    border-top: 1px solid #cccccc !important;
    margin: 0 0 5px 0 !important;
}

/* 返信カードの中の不要な「返信」ボタンを完全に消去 */
.post-card[data-reply-to]:not([data-reply-to="0"]) .reply-trigger-container {
    display: none !important;
}

/* 投稿者名とコメント文字の間隔を限界まで細く縮める設定 */
.post-card[data-reply-to]:not([data-reply-to="0"]) .post-header {
    margin-bottom: -5px !important;
    padding-bottom: 0 !important;
}
.post-card[data-reply-to]:not([data-reply-to="0"]) .post-comment-underlined {
    display: block !important;
    text-align: left !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-bottom: none !important;
}

/* 不要なアンカー文字を見えなくする設定 */
.post-card[data-reply-to]:not([data-reply-to="0"]) .post-comment-underlined::first-line {
    color: transparent !important;
    font-size: 0 !important;
}


/* ===================================================
   ★【CSS大画面拡大機能】
   =================================================== */
.modal-check-toggle { display: none !important; }
.css-modal-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85) !important; z-index: 9999; justify-content: center; align-items: center;
}
.css-modal-body {
    position: relative; background: #ffffff !important; padding: 20px !important;
    border-radius: 8px !important; max-width: 85% !important; max-height: 85% !important;
    box-shadow: 0 4px 25px rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center;
}
.css-modal-body img { max-width: 100% !important; max-height: 75vh !important; width: auto !important; height: auto !important; object-fit: contain !important; }
.css-modal-close {
    position: fixed; top: 25px; right: 25px; width: 36px; height: 36px;
    background: #333333 !important; color: #ffffff !important; border-radius: 50% !important;
    text-align: center !important; line-height: 32px !important; font-size: 22px !important; 
    cursor: pointer !important; border: 2px solid #ffffff !important; font-family: sans-serif !important; 
    font-weight: bold !important; z-index: 10000; box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.css-modal-close:hover { background: #000000 !important; }
.modal-check-toggle:checked + .css-modal-overlay { display: flex !important; }