/* 常見問題頁（faq.html）專用樣式；頁首標題區、麵包屑等共用樣式在 page.css */
.faq-chips{display:flex;flex-wrap:wrap;gap:14px 12px;margin-top:22px}
.faq-chips .chip{
  font-family:var(--font-round);font-weight:700;font-size:16px;letter-spacing:.06em;text-decoration:none;color:var(--ink);
  padding:.55em 1.2em .5em;background:rgba(255,255,255,.55);border:0;border-radius:999px;box-shadow:0 3px 0 var(--ink);position:relative;transition:top .12s,box-shadow .12s,background-color .15s,color .15s;
}
.faq-chips .chip:hover,.faq-chips .chip:focus-visible{background:var(--ink);color:var(--paper);top:-2px;box-shadow:0 5px 0 var(--ink)}
.faq-chips .chip:hover .rough .edge{stroke:var(--paper)}

/* ---------- 問答清單 ---------- */
.faq-wrap{grid-template-columns:minmax(0,1fr);max-width:900px;padding-block:clamp(50px,7vw,90px) 20px;display:grid;gap:clamp(48px,6vw,72px)}
.faq-cat{scroll-margin-top:24px}
.faq-cat-title{
  display:flex;align-items:baseline;gap:14px;margin:0 0 22px;font-family:var(--font-round);font-weight:700;font-size:clamp(26px,3.4vw,38px);line-height:1.1;letter-spacing:.04em;
}
.faq-no{font-family:var(--font-hand);font-weight:400;font-size:max(1rem,.8em);color:var(--brand-ink)}
.faq-list{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.faq-item{
  background:#fff;border:2px solid var(--ink);border-radius:20px;box-shadow:0 4px 0 var(--ink);
  transition:transform .15s,box-shadow .15s,background-color .2s;
}
.faq-item:nth-child(odd){transform:rotate(-.25deg)}
.faq-item:nth-child(even){transform:rotate(.25deg)}
.faq-item:hover{transform:rotate(0) translateY(-2px);box-shadow:0 6px 0 var(--ink)}
.faq-item[open]{background:#bfedf9;transform:rotate(0)}
.faq-item summary{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:18px 20px;cursor:pointer;list-style:none;
  font-family:var(--font-round);font-weight:700;font-size:clamp(16px,1.7vw,19px);line-height:1.45;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:focus-visible{outline:2.5px dashed var(--ink);outline-offset:4px;border-radius:18px}
.faq-q,.faq-aa{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;flex:none;
  font-family:var(--font-hand);font-weight:400;font-size:18px;line-height:1;
}
.faq-q{background:var(--ink);color:#fff}
.faq-aa{background:#fff;border:2px solid var(--ink);color:var(--ink)}
.faq-ico{position:relative;width:22px;height:22px}
.faq-ico::before,.faq-ico::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:3px;border-radius:3px;background:var(--ink);transform:translate(-50%,-50%);transition:transform .25s}
.faq-ico::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-item[open] .faq-ico::after{transform:translate(-50%,-50%) rotate(0deg)}
.faq-a{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:0 20px 22px;animation:faq-in .3s ease both}
.faq-a p{margin:0;padding-top:4px;font-family:var(--font-round);font-weight:500;font-size:clamp(1rem,1.5vw,17px);line-height:1.85;color:rgba(17,17,17,.82)}
@keyframes faq-in{from{opacity:0;transform:translateY(-6px)}}
@media (max-width:575px){
  .faq-item summary{padding:15px 14px;gap:10px}
  .faq-a{padding:0 14px 18px;gap:10px}
}
@media (prefers-reduced-motion:reduce){.faq-a{animation:none}.faq-item,.faq-ico::before,.faq-ico::after{transition:none}}

/* ---------- 進場動畫（Animate.css + WOW.js，class 寫在 faq.html） ---------- */
/* 動畫元素在被捲到之前先隱藏；WOW 沒載入成功時 has-wow 會被移除，內容照常顯示 */
.has-wow .wow{visibility:hidden}
.faq-item.animate__animated{animation-duration:.6s}
.faq-chips .chip.animate__animated{animation-duration:.7s}
/* Q 圓點：滑過題目時輕輕晃一下；展開時 A 圓點彈出 */
.faq-item summary:hover .faq-q{animation:faq-wiggle .4s ease}
.faq-item[open] .faq-aa{animation:faq-pop .35s cubic-bezier(.3,1.6,.5,1) both}
@keyframes faq-wiggle{25%{transform:rotate(-12deg)}75%{transform:rotate(10deg)}}
@keyframes faq-pop{from{transform:scale(.4);opacity:0}}
@media (prefers-reduced-motion:reduce){.faq-item summary:hover .faq-q,.faq-item[open] .faq-aa{animation:none}}