@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Sans+TC:wght@400;700&family=Roboto:wght@400;700&display=swap');

:root {
    /* 原本的顏色 0~9 */
    --color-0: #7eb37e; /* 三葉草綠 (全部) */
    --color-1: #ffcc99; /* 淡橙 */
    --color-2: #99ccff; /* 淡藍 */
    --color-3: #b3e6b3; /* 淡綠 */
    --color-4: #ff9999; /* 淡紅 */
    --color-5: #ffb6c1; /* 淡粉 */
    --color-6: #cccccc; /* 淡灰 */
    --color-7: #99ffff; /* 淡水藍 */
    --color-8: #ffff99; /* 淡黃 */
    --color-9: #cc99ff; /* 淡紫 */
    /* 新增的顏色 10~14 */
    --color-10: #f46455; /* HASUNOSORA FANTASY */
    --color-11: #3ad6df; /* 能登聯動 */
    --color-12: #cc5a5a; /* 石川大觀光II聯動 */
    --color-13: #3E7F96; /* 加賀溫泉鄉聯動 */
    --color-14: #787878; /* 其他 */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: 'Roboto', 'Noto Sans TC', 'Noto Sans JP', sans-serif;
    display: flex; height: 100vh; overflow: hidden; color: #333;
}

/* 左側菜單 (15%) */
#sidebar {
    width: 15%; background-color: #fff; border-right: 1px solid #eee;
    display: flex; flex-direction: column; padding: 20px 0;
}
.menu-btn {
    border: none; background: transparent; padding: 15px 20px;
    text-align: left; font-size: 16px; cursor: pointer; transition: 0.3s;
    color: #555;
}
.menu-btn:hover { background-color: #f9f9f9; }
.menu-btn.active { background-color: #eeeeee; font-weight: 700; color: #000; }

/* 右側主頁面 (85%) */
#main-content {
    width: 85%; padding: 40px; overflow-y: auto; background-color: #fafafa;
}
.page { display: none; }
.page.active { display: block; }

/* 標題與分割線 */
.page-title { font-size: 32px; font-weight: 700; margin-bottom: 10px; }
.divider { border: 0; border-top: 1px solid rgba(0,0,0,0.1); margin-bottom: 30px; }

/* 標籤過濾器 */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.filter-tag {
    border: 1px solid #ddd; border-radius: 20px; padding: 8px 16px;
    cursor: pointer; background: #fff; transition: 0.2s; font-size: 14px;
    color: #333;
}
.filter-tag.active { font-weight: 700; border-color: transparent; color: #000;}

/* 內容分割 6:4 */
.split-layout { display: flex; gap: 20px; min-height: 65vh; height: auto; }
.left-pane { width: 60%; display: flex; flex-direction: column; gap: 20px; height: auto; }
.right-pane { width: 40%; overflow-y: auto; background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }

/* 地圖與月曆容器 */
#map, #calendar-container { height: 50vh; border-radius: 8px; background: #eee; min-height: 300px; z-index: 1;}

/* 列表項目 */
.list-item { display: flex; padding: 15px; border-bottom: 1px solid #eee; cursor: pointer; transition: 0.2s; }
.list-item:hover { background: #f9f9f9; }
.list-item.selected { background: #e0e0e0; }
.list-item img { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; margin-right: 15px; background: #eee;}
.list-item .info { flex: 1; }
.list-item .title { font-weight: 700; margin-bottom: 5px; font-size: 16px; }
.tags { display: flex; gap: 5px; flex-wrap: wrap; }
.tag { font-size: 12px; padding: 3px 8px; border-radius: 12px; color: #000; }

/* 詳細資料表格 */
.details-panel { background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);}
.details-table { width: 100%; border-collapse: collapse; margin-bottom: 15px; }
.details-table th, .details-table td { padding: 8px; border-bottom: 1px solid #eee; text-align: left; font-size: 14px; vertical-align: top; }
.details-table th { width: 100px; color: #666; white-space: nowrap; }
.btn-map { background: #4285F4; color: white; padding: 8px 12px; border: none; border-radius: 4px; cursor: pointer; text-decoration: none; font-size: 13px; display: inline-block;}



/* 圖片庫 */
.gallery { display: flex; gap: 10px; overflow-x: auto; margin-top: 10px;}
.gallery img { width: 100px; height: 100px; object-fit: cover; cursor: pointer; border-radius: 4px;}

/* 簡單日曆 */
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; text-align: center; }
.cal-header { font-weight: bold; padding: 10px; }
.cal-day { border: 1px solid #eee; padding: 10px; min-height: 60px; cursor: pointer; background: #fff;}
.cal-day:hover { background: #f0f0f0; }
.cal-day.has-event { border-bottom: 3px solid var(--color-4); }
.cal-event-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin: 2px; }

/* ===== 主頁：進行中聯動卡片 ===== */
.section-title { font-size: 22px; font-weight: 700; margin-bottom: 15px; }
.ongoing-grid { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; margin-bottom: 30px; }
.ongoing-card {
  width: 400px; height: 360px; background: #fff; border-radius: 8px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08); cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}
.ongoing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}
.ongoing-card img {
  display: block; width: 100%; height: 220px;
  object-fit: cover; background: #eee;
}
.ongoing-info { padding: 12px 15px 15px; }
.ongoing-title {
  font-weight: 700; font-size: 16px; margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px;
}
.ongoing-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.ongoing-desc { font-size: 13px; color: #666; line-height: 1.6; }
.ongoing-date { font-size: 12px; color: #999; margin-top: 8px; }

/* 手機版適配 */
@media (max-width: 768px) {
    body { flex-direction: column; }
    #sidebar { width: 100%; flex-direction: row; padding: 0; overflow-x: auto; border-bottom: 1px solid #eee; }
    #main-content { width: 100%; padding: 15px; }
    .split-layout { flex-direction: column; height: auto; }
    .left-pane, .right-pane { width: 100%; }
}