/* 漢一「常見問題」頁 — 只放這一頁專用的規則；共用樣式在 style.css、頁首與選單在 about.css（都不改）。
   一頁純閱讀的長文：十一題答案全部攤開，單欄、每行約四十字。 */

/* ---------- ① 頁首：沿用關於頁的標題元件，沒有封面照 ---------- */
.page-faq .ab-title{padding-bottom:56px}
.page-faq .ab-head{margin-bottom:28px}
/* 關於頁的 h1 是 flex（單行大字）；這一頁標題 10 個字、窄螢幕要在「漢一室內裝修｜常見問題」之間折行，所以改成一般行內排版 */
.page-faq .ab-head h1{display:block;font-size:96px}
.fq-w{display:inline-block}
.page-faq .ab-head .dot{vertical-align:baseline}
.page-faq .ab-intro{margin-bottom:0}

/* ---------- ② 問答：單欄、行寬約四十字（16px × 40em ≒ 640px） ---------- */
.fq{padding:0 0 100px}
.fq-list{max-width:40em;border-bottom:1px solid var(--line)}
.fq-item{padding:40px 0;border-top:1px solid var(--line)}
.fq-item h2{font-size:20px;line-height:1.5;letter-spacing:0;color:var(--navy);margin-bottom:14px}
.fq-a p{font-size:16px;line-height:1.85}
.fq-a p + p{margin-top:12px}
.fq-a p.fq-note,.fq-a p.fq-link{font-size:14px;line-height:1.7}
.fq-a p.fq-note{color:var(--note)}

/* ---------- ③ 收尾 ---------- */
.fq-end{padding:0 0 110px}
.fq-end-t{font-size:28px;line-height:1.4;font-weight:600;color:var(--navy);margin-bottom:22px}

/* ---------- 平板／手機 ---------- */
@media (max-width:820px){
  .page-faq .ab-head h1{font-size:56px}
  .fq{padding-bottom:70px}
  .fq-item{padding:32px 0}
  .fq-end{padding-bottom:80px}
  .fq-end-t{font-size:22px}
}
@media (max-width:420px){
  .page-faq .ab-head h1{font-size:44px}
}



.h1c-faq-page{padding:150px 0 110px;background:var(--bg)}
.h1c-faq-page>.wrap{max-width:1040px}
.h1c-breadcrumb{margin:0 0 34px;font-size:13px;color:var(--ink-2)}
.h1c-breadcrumb a,.h1c-faq-page a{color:var(--brick);text-underline-offset:3px}
.h1c-faq-head{position:static;inset:auto;z-index:auto;max-width:800px;margin-bottom:34px;background:transparent}
.h1c-faq-head h1{font-size:clamp(38px,5vw,68px);line-height:1.12;letter-spacing:-.035em;color:var(--navy)}
.h1c-faq-head p{margin-top:24px;max-width:720px;color:var(--ink-2);font-size:17px;line-height:1.9}
.h1c-faq-nav{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 68px;padding-bottom:28px;border-bottom:1px solid var(--line)}
.h1c-faq-nav a{padding:9px 15px;border:1px solid var(--line);color:var(--navy);font-size:14px;font-weight:600;text-decoration:none}
.h1c-faq-nav a:hover,.h1c-faq-nav a:focus-visible{border-color:var(--brick);color:var(--brick)}
.h1c-faq-page section{margin-top:64px;scroll-margin-top:100px}
.h1c-faq-page section h2{margin-bottom:14px;font-size:28px;line-height:1.35;color:var(--navy)}
.h1c-faq-item{border-bottom:1px solid var(--line)}
.h1c-faq-item:first-of-type{border-top:1px solid var(--line)}
.h1c-faq-item summary{list-style:none}
.h1c-faq-item summary::-webkit-details-marker{display:none}
.h1c-faq-item .faq-q{cursor:pointer}
.h1c-faq-item[open] .faq-a,.h1c-faq-item.open .faq-a{grid-template-rows:1fr}
.h1c-faq-item[open] .faq-a>div,.h1c-faq-item.open .faq-a>div{visibility:visible;transition-delay:0s}
.h1c-faq-item[open] .ar,.h1c-faq-item.open .ar{background:var(--brick);border-color:var(--brick);color:var(--navy-3)}
.h1c-faq-item[open] .ar i,.h1c-faq-item.open .ar i{transform:rotate(45deg)}
.h1c-faq-a a{color:var(--brick)}
.h1c-faq-page section[aria-labelledby="faq-next"]{margin-top:84px;padding:40px;border:1px solid var(--line)}
.h1c-faq-page section[aria-labelledby="faq-next"] p{margin-top:14px;color:var(--ink-2);line-height:1.8}
.h1c-btn{display:inline-flex;padding:12px 20px;background:var(--line-green);color:#fff!important;text-decoration:none;font-weight:700}
@media(max-width:700px){
  .h1c-faq-page{padding:112px 0 90px}
  .h1c-faq-head h1{font-size:38px}
  .h1c-faq-head p{font-size:15px}
  .h1c-faq-nav{gap:8px;margin-bottom:52px}
  .h1c-faq-nav a{padding:8px 11px;font-size:13px}
  .h1c-faq-page section{margin-top:50px}
  .h1c-faq-page section h2{font-size:23px}
  .h1c-faq-page section[aria-labelledby="faq-next"]{padding:26px 20px}
}