/* static/landing/faq.css — /faq 公開頁樣式
   共用 design token 來自 /static/css/tokens.css；不引用 landing.css。 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: var(--font-family);
  color: var(--color-text);
  background: #FBF5E6;              /* 米色字面值——tokens.css 無此色，禁 var(--color-bg) */
  line-height: 1.7;
}
a { color: inherit; text-decoration: none; }

.site-header {
  background: var(--color-text);
  position: sticky; top: 0; z-index: 100;
}
.header-inner {
  max-width: 1195px; margin: 0 auto; padding: 20px 24px;
  display: flex; align-items: center; gap: 24px;
}
.header-inner a { color: #FFFFFF; font-weight: 500; letter-spacing: 0.1em; }
.header-inner a:hover { color: var(--color-primary); }
.header-home { margin-left: auto; }

.faq-main { max-width: 860px; margin: 0 auto; padding: 48px 24px 80px; }
.faq-title { font-size: 34px; font-weight: 700; letter-spacing: 0.1em; margin-bottom: 8px; }
.faq-intro { color: var(--color-text-tertiary); margin-bottom: 32px; }

.faq-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.faq-filter-btn {
  cursor: pointer; font-family: inherit; font-size: 14px;
  background: #FFFFFF; border: 1px solid var(--color-border);
  border-radius: 999px; padding: 8px 18px; color: var(--color-text);
}
.faq-filter-btn.active {
  background: var(--color-primary); border-color: var(--color-primary); font-weight: 700;
}

.faq-item {
  background: #FFFFFF; border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg); margin-bottom: 12px; overflow: hidden;
}
.faq-question {
  width: 100%; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 17px; font-weight: 500; color: var(--color-text);
  background: none; border: none; padding: 18px 22px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.faq-chevron { transition: transform .2s ease; flex: none; color: var(--color-primary); }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-answer {
  display: none; padding: 0 22px 20px; color: var(--color-text-secondary);
  line-height: 1.9;
}
.faq-item.open .faq-answer { display: block; }
.faq-empty { color: var(--color-text-tertiary); text-align: center; padding: 40px 0; }

.faq-footer {
  text-align: center; padding: 32px 24px; color: var(--color-text-tertiary);
  font-size: 14px; letter-spacing: 0.1em;
}

@media (max-width: 767px) {
  .faq-title { font-size: 26px; }
  .faq-main { padding: 32px 16px 56px; }
}