/* 常見問題 (pj3 / e3ai / customized 共用) 20261109
   用 <details> 收合:答案文字一直在 HTML 裡,搜尋引擎與 AI 都讀得到 */
.utt-faq { max-width: 860px; margin: 0 auto; }
.utt-faq__item { border-bottom: 1px solid #e3e7ef; }
.utt-faq__item:first-child { border-top: 1px solid #e3e7ef; }
.utt-faq__item summary {
    list-style: none; cursor: pointer; position: relative;
    padding: 18px 44px 18px 4px; font-weight: 700; font-size: 1.05rem; line-height: 1.6; color: #1e2022;
}
.utt-faq__item summary::-webkit-details-marker { display: none; }
.utt-faq__item summary::after {
    content: ""; position: absolute; right: 12px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
    transition: transform .2s; opacity: .55;
}
.utt-faq__item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.utt-faq__item summary:hover { color: #377dff; }
.utt-faq__item summary:focus-visible { outline: 2px solid #377dff; outline-offset: 2px; }
.utt-faq__item p { margin: 0; padding: 0 4px 20px; line-height: 1.85; color: #4a5468; }
.utt-faq__item p a { text-decoration: underline; }

/* pj3:沿用 pj3.css 的顏色 */
.utt-faq--pj3 summary { color: var(--p3-ink, #1f2b45); }
.utt-faq--pj3 summary:hover { color: var(--p3-accent, #c8102e); }

/* e3ai:放在左側內容欄,不置中 */
.utt-faq--e3ai { max-width: none; margin: 0 0 3rem; }
.utt-faq--e3ai summary { color: var(--e3-ink, #1b2335); }
.utt-faq--e3ai summary:hover { color: var(--e3-blue, #4f7cf3); }

/* customized (Front 版型) */
.utt-faq--front { max-width: none; margin: 1rem 0 0; }

@media (max-width: 575px) {
    .utt-faq__item summary { font-size: 1rem; padding: 16px 36px 16px 2px; }
}