/* ===== V1.2規則新增：TL;DR摘要框與FAQ問答框（SEO/GEO優化區塊） ===== */
.tldr-box {
  background: #17243d;
  border-left: 4px solid #4fd1c5;
  border-radius: 6px;
  padding: 14px 18px;
  margin: 18px 0 24px;
  font-size: 0.98rem;
  line-height: 1.7;
  color: #e8edf7;
}

.faq-box {
  background: #111a2e;
  border: 1px solid #2b3a5c;
  border-radius: 6px;
  padding: 16px 20px;
  margin: 24px 0;
  color: #d7deec;
}

.faq-box h4 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1.05rem;
  color: #4fd1c5;
}

.faq-box p {
  margin: 8px 0;
  line-height: 1.7;
  color: #d7deec;
}

.faq-box p strong {
  color: #7c9cff;
}

/* ===== v1.8 新增：文章頁「分類＋年月」篩選面板（article-filter-panel.js 專用） ===== */
.filter-panel {
  margin: 32px 0 24px;
  padding: 20px 22px;
  background: #fafbfc;
  border: 1px solid #e5e8eb;
  border-radius: 8px;
}

.filter-panel-title {
  margin: 0 0 14px;
  font-size: 1.05rem;
  color: #1f2d3d;
}

.filter-group {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.filter-label {
  flex: 0 0 auto;
  font-size: 0.9rem;
  color: #6b7684;
  padding-top: 4px;
  min-width: 40px;
}

.filter-chip-cat,
.filter-chip-ym {
  cursor: pointer;
  user-select: none;
}

.filter-chip-cat.active,
.filter-chip-ym.active {
  background: #2f7dd1;
  color: #fff;
  border-color: #2f7dd1;
}

.filter-result-list {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-result-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #eceef0;
  text-decoration: none;
  color: #1f2d3d;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.filter-result-item:hover {
  border-color: #2f7dd1;
  background: #f0f7ff;
}

.filter-result-title {
  font-size: 0.95rem;
  font-weight: 500;
}

.filter-result-meta {
  flex: 0 0 auto;
  font-size: 0.82rem;
  color: #8a94a0;
  white-space: nowrap;
}

@media (max-width: 620px) {
  .filter-result-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}