/* 基礎設定維持原本格式... */
body { font-family: -apple-system, system-ui, sans-serif; background: #f0f2f5; margin: 0; padding: 10px 10px 140px 10px; } 
.container { width: 100%; max-width: 600px; margin: 0 auto; }
h1 { font-size: 1.2rem; margin: 10px 0; color: #1c1e21; text-align: center; }

/* 搜尋與按鈕容器维持混合排版 (並排 + 獨立) */
.search-group { display: flex; gap: 8px; margin-bottom: 10px; }
.search-bar { width: 100%; padding: 12px 15px; font-size: 16px; border-radius: 20px; border: 1px solid #ddd; box-sizing: border-box; outline: none; box-shadow: 0 2px 5px rgba(0,0,0,0.05); margin-bottom: 15px; }
.search-group .search-bar { flex: 1; margin-bottom: 0; }
.filter-fav-btn { padding: 0 15px; font-size: 14px; border-radius: 20px; border: 1px solid #ddd; background: white; color: #65676b; cursor: pointer; transition: all 0.3s; box-shadow: 0 2px 5px rgba(0,0,0,0.05); white-space: nowrap; height: 46px; }
.filter-fav-btn.active { background: #ffc107; border-color: #ffc107; color: #000; font-weight: bold; }

/* 卡片基礎樣式 */
.post-card { background: white; padding: 15px; margin-bottom: 12px; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,0.1); cursor: pointer; position: relative; /* 為了讓星星定位 */ }

/* 星星按鈕定位 */
.fav-btn { position: absolute; top: 15px; right: 15px; cursor: pointer; font-size: 1.5em; color: #ccc; transition: color 0.3s, transform 0.2s; user-select: none; z-index: 10; /* 確保星星在最上層 */ }
.fav-btn.active { color: #ffc107; transform: scale(1.1); }

/* 文字與日期樣式 */
.post-date { color: #65676b; font-size: 0.8em; }
.post-title { font-weight: bold; font-size: 1.1em; margin: 5px 0; color: #1c1e21; padding-right: 35px; /* 為星星預留空間 */ }
.post-content { color: #444; font-size: 16px; line-height: 1.8; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; margin-bottom: 10px; /* 文字與圖片的間距 */ }

/* --- 專項修正：卡片內圖片容器 --- */
.thumb-img-container { display: flex;     /* 讓縮圖橫向排列 */ gap: 8px;         /* 圖片間距 */ flex-wrap: nowrap; /* 強制不換行 */ overflow-x: auto; /* 若圖片過多可橫向滑動 */ padding-bottom: 5px; /* 預留滑動條空間 */ width: 100%;       /* 填滿卡片寬度 */}

/* 縮圖基礎樣式 (確保圖片不變形、不縮小) */
.thumb-img { width: 80px !important;   /* 強制寬度 */ height: 80px !important;  /* 強制高度 */ object-fit: cover;        /* 確保圖片裁切不變形 */ border-radius: 8px; border: 1px solid #eee; flex-shrink: 0;           /* 強制圖片不被 flex 擠壓 */}

/* --- 固定底欄、分頁與彈窗維持原樣... --- */
.bottom-dock { position: fixed; bottom: 0; left: 0; width: 100%; background: #ffffff; border-top: 1px solid #ddd; padding: 12px 0; z-index: 1000; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); }
.dock-container { max-width: 600px; margin: 0 auto; padding: 0 15px; }
.control-row { display: flex; gap: 8px; margin-bottom: 8px; }
.control-select { flex: 1; padding: 8px; border-radius: 8px; border: 1px solid #ccc; background: #f9f9f9; font-size: 13px; cursor: pointer; }
.pagination { display: flex; justify-content: space-between; align-items: center; }
.page-btn { background: #1877f2; color: white; border: none; padding: 8px 20px; border-radius: 8px; font-weight: bold; cursor: pointer; font-size: 14px; flex: 1; }
.page-btn:disabled { background: #e4e6eb; color: #bcc0c4; cursor: not-allowed; }
.page-num-display { flex: 1.5; text-align: center; font-weight: bold; color: #4b4f56; font-size: 13px; white-space: pre-line; line-height: 1.3; }
.modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); }
.modal-content { background: #fdfaf2; color: #2d2d2d; margin: 0 auto; width: 100%; max-width: 600px; height: 100%; display: flex; flex-direction: column; overflow: hidden; position: relative; }
.modal-header { padding: 15px 20px; background: #fdfaf2; border-bottom: 1px solid #e5e5e5; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;}
.modal-header-title { font-weight: bold; font-size: 1.1rem; color: #1c1e21; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; padding-right: 10px; }
.close-btn { font-size: 30px; cursor: pointer; color: #888; line-height: 1; }
.modal-body-scroll { flex: 1; overflow-y: auto; padding: 20px; box-sizing: border-box; }
.modal-img { width: 100%; border-radius: 10px; margin-top: 15px; margin-bottom: 10px; display: block;}
#titleFilter { padding-right: 40px !important; border-right: 20px solid transparent !important; /* 數字越大，箭頭越往左 */ margin-right: -35px !important; -webkit-appearance: menulist; /* 強制回復原生外觀以利擠壓 */ appearance: menulist;}