/* =========================================
   1. 全域設定 (Global Settings)
   ========================================= */
body {
    margin: 0;
    padding: 0;
    font-family: "Microsoft JhengHei", "Heiti TC", sans-serif;
    background-color: #f0f2f5;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* 讓內容靠上對齊，避免內容少時垂直置中 */
    min-height: 100vh;
    padding-top: 80px; /* 避開固定在頂部的 Navbar */
    box-sizing: border-box;
}

/* 修正所有輸入框寬度計算，避免 padding 撐破版面 */
textarea, input[type="text"], input[type="password"], input[type="datetime-local"], input[type="number"], select {
    box-sizing: border-box; 
}

a { text-decoration: none; color: inherit; }

/* =========================================
   2. 版面佈局 (Layout Containers)
   ========================================= */
/* 通用卡片容器 (首頁、登入、註冊用) */
.container {
    display: flex;
    width: 900px;
    background: white;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border-radius: 12px;
    overflow: hidden;
    flex-wrap: wrap;
    margin-bottom: 50px;
}

/* 單欄垂直佈局 (活動、討論區、宣言用) - 修正版面錯位關鍵 */
.column-layout {
    flex-direction: column !important; /* 強制垂直排列 */
    align-items: center;               /* 內容水平置中 */
    width: 800px;
    background: transparent;           /* 去除白底 */
    box-shadow: none;
    overflow: visible;
    margin-top: 20px;
    padding-bottom: 50px;
    display: flex;
}

/* 頂部導覽列 */
.navbar {
    width: 100%;
    background-color: #2c3e50;
    color: white;
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 1000;
    box-sizing: border-box;
}

.nav-brand { font-size: 1.5em; font-weight: bold; }
.nav-links a { color: white; margin-left: 20px; font-size: 1em; transition: opacity 0.2s; }
.nav-links a:hover { opacity: 0.8; text-decoration: underline; }
.btn-logout { background: #b21f1f; padding: 5px 10px; border-radius: 4px; }

/* =========================================
   3. 元件樣式 (UI Components)
   ========================================= */
/* 按鈕 */
button, .btn {
    padding: 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    transition: background 0.3s, transform 0.1s;
    display: inline-block;
    text-align: center;
}
button:active, .btn:active { transform: scale(0.98); }

.btn-primary { background-color: #1a2a6c; color: white; }
.btn-primary:hover { background-color: #2c3e50; }

.btn-success { background-color: #28a745; color: white; }
.btn-success:hover { background-color: #218838; }

.btn-danger { background-color: #dc3545; color: white; }
.btn-danger:hover { background-color: #c82333; }

.btn-warning { background-color: #ffc107; color: #333; font-weight: bold; }
.btn-warning:hover { background-color: #e0a800; }

.btn-secondary { background-color: #6c757d; color: white; }
.btn-secondary:hover { background-color: #5a6268; }

.btn-disabled { background-color: #ccc; cursor: not-allowed; color: #666; }

/* 特殊按鈕 */
.btn-submit { /* 討論區發表鈕 */
    width: auto !important; padding: 8px 25px; border-radius: 20px;
    background-color: #1a2a6c; color: white; font-weight: bold;
}
.btn-reply-small { /* 留言送出鈕 */
    width: auto !important; padding: 5px 15px; border-radius: 15px; font-size: 0.9em;
    background-color: #6c757d; color: white; white-space: nowrap;
}
.btn-upload { /* 上傳圖片按鈕 */
    display: inline-flex; align-items: center; gap: 5px;
    background-color: #f0f2f5; color: #555; padding: 8px 15px; border-radius: 20px;
    cursor: pointer; font-size: 0.9em; font-weight: bold; margin-right: 10px;
    border: 1px solid #ddd;
}
.btn-upload:hover { background-color: #e4e6eb; color: #333; }

/* 表單 */
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: bold; }
.form-group input, .form-group select, .form-group textarea {
    width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px;
}
.form-row { display: flex; gap: 15px; }
.form-group.half { flex: 1; }

/* 連結與圖示 */
.action-btn { 
    padding: 5px 10px; border: none; border-radius: 4px; cursor: pointer; color: white; font-size: 0.85em; margin-right: 5px; 
}
.btn-link { background: #17a2b8; text-decoration: none; display: inline-block; margin: 2px; }

.delete-icon { color: #dc3545; cursor: pointer; font-size: 0.9em; opacity: 0.6; margin-left: 10px; }
.delete-icon:hover { opacity: 1; }
.delete-reply-icon { color: #dc3545; cursor: pointer; font-size: 0.8em; margin-left: 10px; opacity: 0.5; }
.delete-reply-icon:hover { opacity: 1; }

/* 通用文字顏色 */
.text-male { color: #00b0ff !important; font-weight: bold; }
.text-female { color: #ff69b4 !important; font-weight: bold; }

/* =========================================
   4. 頁面樣式 (Pages)
   ========================================= */

/* --- 首頁與登入 (Index/Login) --- */
.info-section { flex: 1.5; padding: 40px; background: #1a2a6c; color: white; }
.login-section { flex: 1; padding: 40px; display: flex; align-items: center; justify-content: center; background-color: #fff; }
.login-card { width: 100%; }
.rule-box, .join-box { background: rgba(255, 255, 255, 0.1); padding: 20px; border-radius: 8px; margin-bottom: 20px; }
.btn-apply-big {
    display: block; width: 100%; background: linear-gradient(135deg, #ff512f, #dd2476); color: white;
    text-align: center; padding: 20px; font-size: 1.5em; font-weight: bold; border-radius: 8px;
    box-shadow: 0 4px 15px rgba(221, 36, 118, 0.4);
    box-sizing: border-box; /* 關鍵修正 */
}
.btn-apply-big:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(221, 36, 118, 0.6); }

/* --- 註冊頁 (Register) --- */
.register-card { 
    background: white; padding: 40px; border-radius: 10px; box-shadow: 0 5px 20px rgba(0,0,0,0.1); 
    width: 600px; margin: 20px 0; 
}
.form-section { background: #f8f9fa; padding: 20px; border-radius: 8px; margin-bottom: 20px; border: 1px solid #eee; }
.upload-group { background: white; padding: 15px; border: 1px dashed #ccc; border-radius: 5px; }

/* --- 個人檔案 (Profile) --- */
.profile-container { align-items: flex-start; padding: 0; }
.profile-sidebar { flex: 1; background: #f8f9fa; padding: 30px; text-align: center; border-right: 1px solid #eee; }
.profile-content { flex: 2; padding: 40px; }
.avatar { 
    width: 100%; max-width: 200px; aspect-ratio: 1/1; object-fit: cover;
    border-radius: 50%; border: 5px solid #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.1); margin-bottom: 20px; 
}
.badges-section { margin: 20px 0; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.badge-item { padding: 5px 15px; border-radius: 20px; font-size: 0.9em; font-weight: bold; display: flex; align-items: center; gap: 5px; }
.badge-item.verified { background: #e3f2fd; color: #0d47a1; border: 1px solid #0d47a1; }
.badge-item.real-person { background: #fff3cd; color: #856404; border: 1px solid #856404; }
.info-block { margin-bottom: 25px; text-align: left; }
.info-block h3 { border-bottom: 2px solid #eee; padding-bottom: 10px; color: #333; font-size: 1.2em; }
.photo-grid { display: flex; gap: 10px; flex-wrap: wrap; }
.photo-item { width: 100px; height: 100px; background-size: cover; border-radius: 8px; background-color: #ddd; cursor: pointer; }

/* --- 訊息中心 (Messages) --- */
.message-container { height: 85vh; display: flex; overflow: hidden; width: 900px; background: white; border-radius: 12px; }
.chat-sidebar { width: 300px; background: #fff; border-right: 1px solid #ddd; display: flex; flex-direction: column; }
.sidebar-header { padding: 20px; background: #f0f2f5; border-bottom: 1px solid #ddd; }
#contact-list { flex: 1; overflow-y: auto; }
.contact-item { display: flex; align-items: center; padding: 15px; cursor: pointer; border-bottom: 1px solid #f0f0f0; transition: background 0.2s; }
.contact-item:hover { background-color: #f5f5f5; }
.contact-avatar { width: 40px; height: 40px; border-radius: 50%; margin-right: 15px; }
.chat-window { flex: 1; display: flex; flex-direction: column; background-color: #fff; }
.chat-header { padding: 15px 20px; border-bottom: 1px solid #ddd; display: flex; justify-content: space-between; align-items: center;}
.warning-box { background: #fff3cd; color: #856404; padding: 10px; font-size: 0.9em; border-radius: 4px; margin-bottom: 5px;}
.chat-box { flex: 1; padding: 20px; overflow-y: auto; background-color: #e5ddd5; }
.message-row { display: flex; margin-bottom: 10px; }
.message-row.sent { justify-content: flex-end; } .message-row.sent .message-bubble { background-color: #dcf8c6; border-radius: 10px 0 10px 10px; }
.message-row.received { justify-content: flex-start; } .message-row.received .message-bubble { background-color: #fff; border-radius: 0 10px 10px 10px; }
.message-bubble { padding: 10px 15px; max-width: 60%; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.chat-input-area { padding: 15px; background: #f0f2f5; display: flex; gap: 10px; }
#msg-input { flex: 1; padding: 12px; border-radius: 20px; border: 1px solid #ccc; outline: none; }
#send-btn { width: 50px; border-radius: 50%; background: #1a2a6c; }
.mobile-back-btn { display: none; background: none; border: none; font-size: 1.2em; color: #1a2a6c; margin-right: 15px; cursor: pointer; }

/* --- 討論區 (Board) --- */
.board-header-card { background: white; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); margin-bottom: 20px; overflow: hidden; width: 100%; }
.bg-purple { background: linear-gradient(135deg, #667eea, #764ba2); color: white; padding: 20px; }
.category-tabs { display: flex; gap: 10px; margin-bottom: 0; padding: 15px; overflow-x: auto; }
.tab-btn { padding: 8px 20px; border: 1px solid #1a2a6c; background: white; color: #1a2a6c; border-radius: 20px; transition: 0.3s; }
.tab-btn.active, .tab-btn:hover { background: #1a2a6c; color: white; }
.post-creation-card { background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); margin-bottom: 30px; width: 100%; box-sizing: border-box; }
#post-content { height: 80px; margin-bottom: 10px; width: 100%; }
.post-actions { display: flex; justify-content: flex-end; gap: 10px; }
.btn-icon { font-size: 1.5em; color: #666; cursor: pointer; margin-right: 15px; padding: 5px; }
.action-left { display: flex; align-items: center; }

/* 討論區 RWD Grid */
.posts-wrapper { width: 100%; }
.mobile-grid-item { display: none; } /* 桌機預設隱藏手機卡片 */
.desktop-post-card { display: block; background: white; border-radius: 8px; padding: 20px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.post-img { width: 100%; aspect-ratio: 16 / 9; background-size: cover; background-position: center; border-radius: 5px; }
.post-body-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; margin-top: 10px; display: block; }
.post-time, .reply-time { font-size: 0.8em; color: #aaa; margin-left: 5px; }
.post-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.post-author, .reply-user { text-decoration: none; font-weight: bold; margin-right: 5px; }
.replies-section { background: #f9f9f9; padding: 10px; border-radius: 5px; margin-top: 10px; }
.reply-item { font-size: 0.9em; padding: 5px 0; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; }
.reply-input-box { display: flex; gap: 5px; margin-top: 10px; }

/* --- 線下活動 (Events) --- */
.top-bar { width: 100%; margin-bottom: 20px; }
.btn-block-create {
    width: 100%; padding: 15px; font-size: 1.2em; background: #28a745; color: white;
    border: none; border-radius: 8px; cursor: pointer; font-weight: bold;
}
.event-form-card { background: white; border-radius: 10px; padding: 20px; margin-bottom: 30px; width: 100%; box-sizing: border-box; }
.bg-green { background: linear-gradient(135deg, #11998e, #38ef7d); color: white; padding: 20px; border-radius: 10px 10px 0 0; margin: -20px -20px 20px -20px; }
/* Grid 佈局 */
.event-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; width: 100%; }
.event-grid-item { background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); cursor: pointer; transition: transform 0.2s; }
.event-grid-item:hover { transform: translateY(-3px); }
.ev-thumb { width: 100%; aspect-ratio: 1 / 1; background-size: cover; background-position: center; position: relative; }
.ev-status { position: absolute; top: 10px; right: 10px; padding: 3px 8px; border-radius: 4px; font-size: 0.8em; color: white; }
.ev-status.open { background: rgba(40, 167, 69, 0.9); }
.ev-status.processing { background: rgba(255, 193, 7, 0.9); color: #333; }
.ev-status.payment { background: rgba(23, 162, 184, 0.9); }
.ev-status.active { background: rgba(0, 123, 255, 0.9); }
.ev-status.finished { background: rgba(108, 117, 125, 0.9); }
.ev-content { padding: 10px; }
.ev-title { font-weight: bold; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.1em; }
.ev-date { font-size: 0.85em; color: #666; margin-bottom: 5px; }
.ev-org { font-size: 0.9em; font-weight: bold; }
.ev-stats { background: #f0f2f5; padding: 10px; border-radius: 5px; margin: 10px 0; text-align: center; }
.ev-modal-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 15px; }
.result-box { padding: 10px; border-radius: 5px; margin-top: 10px; font-weight: bold; text-align: center; }
.result-box.success { background: #d4edda; color: #155724; }

/* --- 宣言頁 (Declarations) --- */
.declaration-form-card { background: white; border-radius: 10px; width: 100%; box-shadow: 0 5px 15px rgba(0,0,0,0.1); margin-bottom: 20px; overflow: hidden; }
.blockchain-viewer { width: 100%; }
.block-item { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px; position: relative; margin-bottom: 20px; }
.hash-info { background: #2d2d2d; color: #00ff00; padding: 10px; border-radius: 4px; font-family: monospace; font-size: 0.8em; margin-top: 10px; word-break: break-all; }
.chain-link { text-align: center; font-size: 1.5em; color: #ccc; margin-top: 10px; }

/* --- 後台管理 (Admin) --- */
.admin-container { 
    width: 100%; max-width: 1200px; margin: 30px auto; padding: 20px; 
    background: #fff; box-sizing: border-box; min-height: 600px; border-radius: 8px;
}
.tabs { display: flex; border-bottom: 2px solid #ddd; margin-bottom: 20px; overflow-x: auto; }
.tab { padding: 10px 20px; cursor: pointer; font-weight: bold; color: #666; white-space: nowrap; }
.tab.active { color: #1a2a6c; border-bottom: 4px solid #1a2a6c; }
.tab-content { display: none; }
.tab-content.active { display: block; }
.table-responsive { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.9em; min-width: 800px; }
th, td { padding: 12px 10px; border-bottom: 1px solid #eee; text-align: left; vertical-align: middle; }
th { background: #f8f9fa; color: #333; font-weight: bold; border-top: 2px solid #1a2a6c; }
.waitlist-section { margin-top: 40px; border-top: 2px dashed #ccc; padding-top: 20px; background: #fafafa; padding: 20px; border-radius: 5px; }

/* =========================================
   5. 全域 Modal & RWD
   ========================================= */

/* Modal (桌機預設置中) */
.post-modal {
    display: none; position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); justify-content: center; align-items: center;
}
.modal-content {
    background: white; width: 600px; max-width: 90%; max-height: 85vh;
    border-radius: 12px; padding: 20px; overflow-y: auto; position: relative; box-shadow: 0 5px 25px rgba(0,0,0,0.2);
}
.close-modal { position: absolute; top: 10px; right: 20px; font-size: 2em; cursor: pointer; color: #999; z-index: 10; }
.modal-main-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; margin: 10px 0; }
.modal-post-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; }
.modal-user-info { display: flex; flex-direction: column; }
.modal-meta-info { display: flex; flex-direction: column; align-items: flex-end; }

/* Cropper Modal */
.crop-modal {
    display: none; position: fixed; z-index: 10000; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85); justify-content: center; align-items: center;
}
.crop-container { background: white; width: 90%; max-width: 600px; border-radius: 10px; padding: 20px; display: flex; flex-direction: column; }
.crop-area { width: 100%; height: 400px; background: #333; overflow: hidden; margin-bottom: 20px; }
.crop-area img { max-width: 100%; display: block; }
.crop-actions { display: flex; justify-content: flex-end; gap: 10px; }
.btn-clear-img { position: absolute; top: 5px; right: 5px; background: rgba(0,0,0,0.5); color: white; width: 25px; height: 25px; border-radius: 50%; display: flex; justify-content: center; align-items: center; border: none; cursor: pointer; }

/* RWD 設定 */
@media (max-width: 768px) {
    /* Layout */
    .container { flex-direction: column; width: 100%; border-radius: 0; margin-bottom: 0; box-shadow: none; }
    .column-layout { width: 100%; margin-top: 0; padding-bottom: 60px; }
    .info-section, .login-section { padding: 30px 20px; }
    .profile-container { flex-direction: column; }
    .profile-sidebar { width: 100%; border-right: none; border-bottom: 1px solid #eee; }
    .navbar { padding: 15px 20px; }

    /* Events */
    .event-grid { grid-template-columns: 1fr 1fr; padding: 0 10px; }
    .top-bar { width: 95%; margin: 20px auto; }
    
    /* Messages */
    .message-container { flex-direction: column; height: calc(100vh - 60px); width: 100%; border-radius: 0; }
    .chat-sidebar { width: 100%; height: 100%; border-right: none; display: flex; }
    .chat-window { display: none; width: 100%; height: 100%; }
    .warning-box { display: none; }
    .mobile-back-btn { display: block; }
    .message-container.mobile-chat-active .chat-sidebar { display: none; }
    .message-container.mobile-chat-active .chat-window { display: flex; }

    /* Board */
    .posts-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 10px; }
    .post-wrapper { display: contents; }
    .mobile-grid-item { display: flex; flex-direction: column; background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); cursor: pointer; height: 200px; }
    .desktop-post-card { display: none; }
    .grid-text { padding: 8px; font-size: 0.9em; font-weight: bold; flex: 1; overflow: hidden; text-overflow: ellipsis; }
    .grid-footer { display: flex; justify-content: space-between; padding: 0 8px 8px; }
    .grid-cat, .grid-time { font-size: 0.7em; color: #999; }
    .post-img.no-img { background: #f0f2f5; display: flex; justify-content: center; align-items: center; color: #ccc; font-size: 2em; }

    /* Modal Mobile (Bottom Sheet) */
    .post-modal { align-items: flex-end; }
    .modal-content { width: 100%; height: 85vh; border-radius: 20px 20px 0 0; animation: slideUp 0.3s; }
    @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
    .modal-reply-box { position: absolute; bottom: 0; left: 0; width: 100%; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); }
}

/* =========================================
   7. 宣言頁時間軸 (Timeline)
   ========================================= */

.timeline-container {
    width: 100%;
    position: relative;
    padding: 20px 0;
}

/* 時間軸中線 */
.timeline {
    position: relative;
    width: 100%;
}
.timeline::after {
    content: '';
    position: absolute;
    width: 4px;
    background-color: #ddd;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -2px;
    border-radius: 2px;
}

/* 時間軸項目 (卡片) */
.timeline-item {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%; /* 佔一半寬度 */
    box-sizing: border-box;
}

/* 左側卡片 */
.timeline-item.left {
    left: 0;
}
/* 右側卡片 */
.timeline-item.right {
    left: 50%;
}

/* 連接點 (圓點) */
.timeline-item::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    right: -8px; /* 左側卡片的點在右邊 */
    background-color: white;
    border: 4px solid #1a2a6c;
    top: 25px;
    border-radius: 50%;
    z-index: 1;
}
.timeline-item.right::after {
    left: -8px; /* 右側卡片的點在左邊 */
}

/* 卡片內容樣式 */
.timeline-content {
    padding: 20px;
    background-color: white;
    position: relative;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.2s;
    border-top: 3px solid #1a2a6c;
}
.timeline-content:hover {
    transform: translateY(-5px);
}

/* 標頭資訊 */
.tl-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 0.9em;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
}
.tl-user { font-weight: bold; color: #1a2a6c; }
.tl-time { color: #999; font-size: 0.8em; }

/* 內文區 */
.tl-body {
    font-size: 1em;
    line-height: 1.6;
    color: #444;
    word-wrap: break-word;
}
/* 讓 Markdown 的元素有些基本樣式 */
.tl-body h1, .tl-body h2, .tl-body h3 { margin-top: 10px; font-size: 1.1em; }
.tl-body blockquote { border-left: 3px solid #ccc; padding-left: 10px; color: #666; }
.tl-body code { background: #f4f4f4; padding: 2px 5px; border-radius: 3px; }

/* 閱讀全文按鈕 */
.btn-read-more {
    background: none; border: none; color: #17a2b8; cursor: pointer;
    padding: 0; margin-top: 10px; font-size: 0.9em; text-decoration: underline;
}

/* 底部功能區 */
.tl-footer {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px dashed #eee;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.hash-group { display: flex; gap: 10px; }

.btn-hash, .btn-verify {
    flex: 1;
    padding: 6px;
    border: 1px solid #ddd;
    background: #f8f9fa;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8em;
    color: #555;
    transition: 0.2s;
}
.btn-hash:hover { background: #e2e6ea; color: #333; }
.btn-verify:hover { background: #e2e6ea; color: #1a2a6c; }

.verify-result { font-size: 0.85em; margin-top: 5px; min-height: 20px; }

/* 箭頭指示 */
.timeline-item.left::before {
    content: " ";
    height: 0; position: absolute; top: 22px; width: 0; z-index: 1;
    right: 30px; border: medium solid white;
    border-width: 10px 0 10px 10px; border-color: transparent transparent transparent white;
}
.timeline-item.right::before {
    content: " ";
    height: 0; position: absolute; top: 22px; width: 0; z-index: 1;
    left: 30px; border: medium solid white;
    border-width: 10px 10px 10px 0; border-color: transparent white transparent transparent;
}

/* RWD: 手機版調整 (變為單欄垂直) */
@media (max-width: 768px) {
    .timeline::after {
        left: 31px; /* 線移到左側 */
    }
    
    .timeline-item {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }
    
    .timeline-item.left, .timeline-item.right {
        left: 0; /* 全部靠左對齊 (實際上是靠線的右邊) */
    }
    
    /* 點點位置 */
    .timeline-item::after {
        left: 23px; /* 點點對齊線 */
    }
    .timeline-item.right::after {
        left: 23px; 
    }
    
    /* 箭頭調整 */
    .timeline-item.left::before, .timeline-item.right::before {
        left: 60px;
        border-width: 10px 10px 10px 0;
        border-color: transparent white transparent transparent;
    }
}