/* ========================================
   小型論壇 - 主樣式表
   UTF-8 繁體中文
   ======================================== */

/* 基礎重置 */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: "Microsoft JhengHei", "微軟正黑體", "PingFang TC", "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    background: #f0f2f5;
}

a { color: #4a90d9; text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }

/* 容器 */
.container { max-width: 1000px; margin: 0 auto; padding: 0 20px; }

/* 導航列 */
.navbar {
    background: #2c3e50;
    color: #fff;
    padding: 12px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: sticky; top: 0; z-index: 100;
}
.navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.navbar-brand {
    font-size: 20px;
    font-weight: bold;
    color: #fff !important;
    text-decoration: none !important;
    animation: logoGlow 2s ease-in-out infinite;
}
@keyframes logoGlow {
    0%, 100% { text-shadow: 0 0 4px rgba(255,255,255,.3), 0 0 8px rgba(255,255,255,.1); }
    50%      { text-shadow: 0 0 8px rgba(255,255,255,.8), 0 0 16px rgba(255,255,255,.4), 0 0 24px rgba(255,255,255,.2); }
}
.navbar-menu {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.navbar-text {
    color: #bdc3c7;
    font-size: 14px;
}

/* 按鈕 */
.btn {
    display: inline-block;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none !important;
    transition: background 0.2s, opacity 0.2s;
}
.btn:hover { opacity: 0.85; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary  { background: #4a90d9; color: #fff; }
.btn-secondary { background: #6c757d; color: #fff; }
.btn-success  { background: #28a745; color: #fff; }
.btn-danger   { background: #d9534f; color: #fff; }
.btn-warning  { background: #f0ad4e; color: #333; }
.btn-sm       { padding: 4px 10px; font-size: 13px; }
.btn-block    { display: block; width: 100%; }

/* 表單 */
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: bold; color: #555; }

.form-control {
    display: block;
    width: 100%;
    padding: 10px 12px;
    font-size: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: border-color 0.2s;
}
.form-control:focus {
    outline: none;
    border-color: #4a90d9;
    box-shadow: 0 0 0 2px rgba(74,144,217,0.2);
}
.form-control-sm {
    padding: 4px 8px;
    font-size: 13px;
}
.form-row {
    display: flex;
    gap: 15px;
}
.form-row .form-group { flex: 1; }

/* 提示訊息 */
.alert {
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 16px;
}
.alert-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.alert-danger  { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.alert-warning { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; }
.alert-info    { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }

/* 登入／註冊頁面 */
.auth-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.auth-box {
    background: #fff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    width: 100%;
    max-width: 420px;
}
.auth-box h1 {
    text-align: center;
    margin-bottom: 24px;
    color: #333;
}

/* 驗證碼 */
.captcha-row {
    display: flex;
    gap: 10px;
    align-items: center;
}
.captcha-img {
    height: 42px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
}
.captcha-input {
    flex: 1;
    min-width: 0;
}

/* 文章列表 */
.post-list { margin-top: 20px; }

/* 三格直列（全部） */
.post-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.post-grid .post-item {
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}
.post-grid .post-item-thumb {
    width: 100%; height: 160px;
    border-radius: 6px 6px 0 0;
}
.post-grid .post-item-body {
    padding: 14px 16px;
}
.post-grid .post-item-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 分類標籤列 */
.category-tabs {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 16px; padding-bottom: 12px; margin-top: 5px;
    border-bottom: 1px solid #ddd;
}
.cat-tab {
    display: inline-block; padding: 6px 14px;
    border-radius: 20px; font-size: 14px;
    color: #666; background: #e8e8e8;
    text-decoration: none; transition: all 0.2s;
}
.cat-tab:hover { background: #d0d0d0; color: #333; text-decoration: none; }
.cat-tab.active { background: #4a90d9; color: #fff; }

.post-item {
    background: #fff;
    padding: 16px 20px;
    border-radius: 6px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: box-shadow 0.2s;
    display: flex; gap: 16px; align-items: flex-start;
}
.post-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.post-pinned { border-left: 3px solid #f0ad4e; }

.post-item-thumb {
    flex-shrink: 0; width: 120px; height: 80px;
    border-radius: 4px; overflow: hidden; background: #eee;
    display: block; text-decoration: none;
}
.post-item-thumb:hover { opacity: 0.85; }
.post-item-thumb img {
    width: 100%; height: 100%; object-fit: cover;
    display: block;
}
.post-item-body { flex: 1; min-width: 0; }

.post-item-excerpt {
    font-size: 14px; color: #666; line-height: 1.6;
    margin-bottom: 8px; word-break: break-word;
}

.post-item-tags { margin-bottom: 6px; }
.tag-badge {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: 12px; background: #e8f0fe; color: #1967d2;
    text-decoration: none; margin-right: 4px;
}
.tag-badge:hover { background: #d2e3fc; text-decoration: none; }

.post-title { font-size: 18px; margin-bottom: 6px; }
.post-title a { color: #333; }
.post-title a:hover { color: #4a90d9; }

.post-item-meta {
    font-size: 13px;
    color: #888;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.post-item-date {
    color: #999; font-size: 12px;
    margin-left: auto;
}

/* 文章詳細頁 */
.post-detail {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.post-detail-header { margin-bottom: 20px; }
.post-detail-header h1 { font-size: 26px; color: #222; margin-bottom: 10px; }
.post-detail-meta {
    font-size: 13px;
    color: #888;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.post-detail-content {
    line-height: 1.8;
    margin-bottom: 24px;
    word-break: break-word;
}
.post-detail-content img {
    max-width: 100%;
    border-radius: 6px;
    margin: 10px 0;
}
.post-detail-content figure { margin: 10px 0; }
.post-detail-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 10px 0;
}
.post-detail-content table td, .post-detail-content table th {
    border: 1px solid #ddd;
    padding: 8px 12px;
}
.post-detail-content pre {
    background: #f5f5f5;
    padding: 12px;
    border-radius: 4px;
    overflow-x: auto;
    font-size: 14px;
}
.post-detail-content blockquote {
    border-left: 4px solid #4a90d9;
    padding: 8px 16px;
    margin: 10px 0;
    background: #f8f9fa;
}
.post-detail-actions { padding-top: 16px; border-top: 1px solid #eee; display: flex; gap: 8px; }

/* 文章附件 */
.post-attachments {
    margin: 20px 0; padding: 16px;
    background: #f8f9fa; border-radius: 8px;
    border: 1px solid #e0e0e0;
}
.post-attachments h3 { font-size: 16px; margin-bottom: 10px; }
.post-attachments ul { list-style: none; padding: 0; }
.post-attachments li { padding: 6px 0; border-bottom: 1px solid #eee; }
.post-attachments li:last-child { border-bottom: none; }
.post-attachments a { font-weight: bold; }
.attachment-info { font-size: 12px; color: #999; margin-left: 8px; }

/* 隱藏內容區塊 */
.hidden-content {
    border: 2px dashed #f0ad4e;
    border-radius: 8px;
    margin: 15px 0;
    overflow: hidden;
}
.hidden-mask {
    background: #fdf8e4;
    padding: 30px 20px;
    text-align: center;
    color: #8a6d3b;
    font-size: 15px;
}
.hidden-content.revealed {
    border-color: #5cb85c;
    padding: 12px 16px;
}
.hidden-content.revealed .hidden-mask {
    display: none;
}

.youtube-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin: 16px 0;
    border-radius: 6px;
}
.youtube-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 6px;
}

/* 留言區 */
.comments-section { margin-top: 30px; }
.comments-section h2 { font-size: 20px; margin-bottom: 16px; }
.comment-form { margin-bottom: 20px; }
.comment-item {
    background: #fff;
    padding: 14px 18px;
    border-radius: 6px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.comment-header { font-size: 14px; margin-bottom: 6px; }
.comment-time { color: #999; font-size: 12px; margin-left: 10px; }
.comment-body { font-size: 15px; line-height: 1.6; }

/* 角色標籤 */
.role-badge {
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: bold;
}
.role-1 { color: #4a90d9; }
.role-2 { color: #f0ad4e; }
.role-3 { color: #d9534f; }

/* 標籤 */
.badge {
    display: inline-block;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 3px;
    font-weight: bold;
}
.badge-warning  { background: #f0ad4e; color: #333; }
.badge-danger   { background: #d9534f; color: #fff; }
.badge-success  { background: #28a745; color: #fff; }
.badge-points   { background: #5bc0de; color: #fff; }
.badge-free     { background: #28a745; color: #fff; }

/* 表格 */
.table-wrapper { overflow-x: auto; }
.table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.table th, .table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid #eee;
}
.table th {
    background: #f8f9fa;
    font-weight: bold;
    color: #555;
    font-size: 14px;
}
.table tr:hover { background: #fafbfc; }

/* 分頁 */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 20px 0;
}

/* 上傳區域 */
.upload-section {
    background: #fff;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.upload-section h2 { font-size: 18px; margin-bottom: 16px; }

/* 下載表格 */
.download-table-wrapper { margin-top: 20px; }

/* 空白狀態 */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #999;
    font-size: 16px;
}

/* 工具類 */
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.text-center { text-align: center; }
hr { border: none; border-top: 1px solid #eee; margin: 20px 0; }

/* 回應式設計 */
@media (max-width: 768px) {
    .navbar .container { flex-direction: column; gap: 10px; }
    .navbar-menu { justify-content: center; }
    .auth-box { margin: 20px; padding: 24px; }
    .post-detail { padding: 16px; }
    .post-detail-header h1 { font-size: 20px; }
    .form-row { flex-direction: column; gap: 0; }
}

/* 側欄佈局 */
.page-layout { display: flex; gap: 24px; max-width: 1260px; margin: 0 auto; padding: 0 20px; }
.content-main { flex: 1; min-width: 0; }
.forum-sidebar { width: 220px; flex-shrink: 0; position: sticky; top: 80px; align-self: flex-start; }
.forum-sidebar .sidebar-card {
    background: #fff; border-radius: 6px; padding: 14px 16px;
    margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.sidebar-clock { font-size: 22px; font-weight: bold; text-align: center; color: #333; }
.sidebar-date { font-size: 12px; text-align: center; color: #999; margin-top: 2px; }
.sidebar-stat { font-size: 13px; padding: 4px 0; display: flex; justify-content: space-between; color: #555; }
.sidebar-stat span { font-weight: bold; color: #333; }
@media (max-width: 900px) {
    .page-layout { flex-direction: column; }
    .forum-sidebar { width: 100%; }
}