/* ============================================================
   FAQ 手風琴（首頁 + about 共用）
   來源 style.css 行 2611-2765（純搬移，內容未改）
   ============================================================ */

/* FAQ */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  margin-bottom: 30px;
}

.faq-item {
  background: var(--c-bg-white);
  border-radius: 16px;
  box-shadow: var(--sh-card);
  overflow: hidden;
  transition: box-shadow .3s;
}

.faq-item[open] {
  box-shadow: var(--sh-card-strong);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 18px 18px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: var(--fs-base);
  color: var(--c-text);
}

@media (max-width: 767px) {
  .faq-item summary {
    font-size: var(--fs-sm);
  }
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

/* Q */
.q-badge {
  flex-shrink: 0;
  width: 55px;
  height: 50px;
  background: var(--c-bg-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.q-badge span {
  /* font-family: var(--f-display);
  font-weight: 500;
  font-size: 54px;
  color: var(--c-on-dark);
  line-height: 1;
  -webkit-text-stroke: 1px rgba(34, 34, 34, 1);
  letter-spacing: .05em; */
  width: 48px;
  height: 52px;
  background: #000;
  mask-image: url(../../img/Q.svg);
  mask-position: center center;
  mask-size: cover;
  mask-repeat: no-repeat;
}

/* @media (max-width: 767px) {
  .q-badge span {
    font-size: var(--fs-xl);
  }
} */

.q-text {
  flex: 1;
}

/* 收合：橘色下拉箭頭（v 形） */
.faq-toggle {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: transparent;
  border-radius: 8px;
  background: var(--c-bg-white);
  box-shadow: inset 0 -1.83px 6.95px 0 rgba(0, 0, 0, .25);
  transition: background .3s, border .3s;
}

@media (max-width: 767px) {
  .faq-toggle {
    width: 37px;
    height: 37px;
  }
}

.faq-toggle::before,
.faq-toggle::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 2.5px;
  background: var(--c-brand);
  border-radius: 2px;
  top: 50%;
  left: 50%;
  transition: background .3s, transform .3s, width .3s;
}

.faq-toggle::before {
  transform: translate(calc(-50% - 6px), -50%) rotate(45deg);
}

.faq-toggle::after {
  transform: translate(calc(-50% + 6px), -50%) rotate(-45deg);
}

@media (max-width: 767px) {
  .faq-toggle::before,
  .faq-toggle::after {
    width: 15px;
  }

  .faq-toggle::before {
    transform: translate(calc(-50% - 5px), -50%) rotate(45deg);
  }

  .faq-toggle::after {
    transform: translate(calc(-50% + 5px), -50%) rotate(-45deg);
  }
}

/* 展開：白底黑框方塊  */

.faq-item[open] .faq-toggle::before,
.faq-item[open] .faq-toggle::after {
  background: var(--c-text);
}

.faq-item[open] .faq-toggle::before {
  transform: translate(calc(-50% - 6px), -50%) rotate(-45deg);
  /* transform: translate(-50%, -50%) rotate(45deg); */
}

.faq-item[open] .faq-toggle::after {
  transform: translate(calc(-50% + 6px), -50%) rotate(45deg);
  /* transform: translate(-50%, -50%) rotate(-45deg); */
}

@media (max-width: 767px) {
  .faq-item[open] .faq-toggle::before,
  .faq-item[open] .faq-toggle::after {
    width: 15px;
    background: var(--c-text);
  }

  .faq-item[open] .faq-toggle::before {
    transform: translate(calc(-50% - 5px), -50%) rotate(-45deg);
    /* transform: translate(-50%, -50%) rotate(45deg); */
  }

  .faq-item[open] .faq-toggle::after {
    transform: translate(calc(-50% + 5px), -50%) rotate(45deg);
    /* transform: translate(-50%, -50%) rotate(-45deg); */
  }
}

/* 答案黑色條，右側漸橘 */
.faq-a {
  margin: 0 14px 14px;
  padding: 14px;
  display: flex;
  gap: 14px;
  /* background: linear-gradient(170deg, var(--c-bg-black) 0%, var(--c-bg-black) 60%, var(--c-deep) 90%, var(--c-yellow) 100%); */
  border-radius: 12px;
  color: var(--c-on-dark);
  overflow: hidden;
  background: linear-gradient(170deg, var(--c-bg-black) 0%, var(--c-bg-black) 60%, #595959 90%, #737373 100%);
}

.a-badge {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.a-badge span {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--fs-3xl);
  color: var(--c-on-dark);
  line-height: 1;
}

@media (max-width: 767px) {
  .a-badge span {
    font-size: var(--fs-xl);
  }
}

.faq-a p {
  font-size: var(--fs-sm);
  line-height: 1.8em;
  color: var(--c-on-dark);
  margin: 0;
  letter-spacing: .5px;
}