*{ box-sizing: border-box; }
body{margin: 0;}
/* ===== 本畫布自訂 CSS（畫布層） ===== */
/* css/_faq.css */
.tpl-faq .faq-list {
  border-top: var(--BorderPrimary, 1px solid #dcdcdc);
}
.tpl-faq .faq-item {
  padding: 0.5rem 2rem;
  border-bottom: var(--BorderPrimary, 1px solid #dcdcdc);
}
.tpl-faq .faq-question {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 72px;
  padding: 14px 0;
  color: var(--TextColorPrimary, #2a2a2a);
  font-size: clamp(17px, 1.2vw, 20px);
  font-weight: 500;
  text-align: left;
  list-style: none;
  cursor: pointer;
  transition: color 0.15s;
}
.tpl-faq .faq-question::-webkit-details-marker {
  display: none;
}
.tpl-faq .faq-question::before {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  padding-bottom: 0.2em;
  border-radius: 50%;
  color: var(--TextColorPrimary, #2a2a2a);
  background: #ffffff;
  content: "Q";
  font-weight: 700;
  line-height: 1;
  transition: color 0.15s, background-color 0.15s;
}
.tpl-faq .faq-question::after {
  flex: none;
  width: 22px;
  height: 22px;
  margin-left: auto;
  background: currentColor;
  content: "";
  transition: transform 0.15s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
}
@media (hover: hover) and (pointer: fine) {
.tpl-faq .faq-question:hover {
    color: var(--ColorPrimary, #b3540f);
  }
}
.tpl-faq .faq-question:is(:active, :focus-visible) {
  color: var(--ColorPrimary, #b3540f);
}
.tpl-faq .faq-item[open] > .faq-question::before {
  color: #ffffff;
  background: var(--ColorPrimary, #b3540f);
}
.tpl-faq .faq-item[open] > .faq-question::after {
  transform: rotate(180deg);
}
.tpl-faq .faq-answer {
  display: flex;
  gap: 16px;
  overflow: hidden;
  transition: height 0.3s ease;
}
.tpl-faq .faq-answer::before {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  padding-bottom: 0.2em;
  border-radius: 50%;
  color: #ffffff;
  background: var(--ColorSecondary, #3a1f14);
  content: "A";
  font-weight: 700;
  line-height: 1;
}
.tpl-faq .faq-answer .description {
  padding: 5px 0 24px;
}
@media (prefers-reduced-motion: reduce) {
.tpl-faq .faq-answer {
    transition: none;
  }
}
@media (max-width: 767px) {
.tpl-faq .faq-item {
    padding: 0.5rem;
  }
}