/* 허브 답변 층(BUILD:HUBANSWERS) — 허브마다 본문 끝에 오는 '이 페이지에 대하여 · 자주 묻는 질문'.
   허브 디자인 계약을 따른다: 유리면 + var(--glass-line), 불투명 hex 표면 금지.
   페이지마다 CSS가 다르므로 여기서는 .hubfaq 아래로만 규칙을 건다(요소 선택자 금지 — hub.css 의
   header{position:sticky} 같은 사고를 되풀이하지 않는다). */

/* 폭은 페이지의 .wrap 에 기대지 않고 여기서 못박는다 — 허브마다 본문 컨테이너 폭이 다르고
   (용어사전 1080 · 다른 허브 1200) 문답은 긴 줄이 읽기 나쁘다. 어디서나 같은 읽기 폭으로 둔다.
   .wrap 보다 한 칸 높은 특이도(.hubfaq.wrap)로 페이지 CSS 순서에 영향받지 않게 한다. */
.hubfaq.wrap {
  max-width: 960px;
  margin: 96px auto 24px;
  padding-top: 40px;
  border-top: 1px solid var(--glass-line);
}
.hubfaq .hubfaq-head { margin-bottom: 18px }
.hubfaq .hubfaq-eyebrow {
  font-family: "Space Grotesk", var(--font-sans);
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ember); margin: 0 0 10px;
}
.hubfaq h2 {
  font-family: "Space Grotesk", var(--font-sans);
  font-size: clamp(24px, 3.4vw, 34px); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin: 0;
}
.hubfaq h2 em {
  font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; padding-right: .08em;
}
.hubfaq .hubfaq-lede {
  max-width: 760px; margin: 0 0 26px;
  font-size: 15.5px; line-height: 1.75; color: var(--txt-dim); word-break: keep-all;
}
.hubfaq .hubfaq-list { display: grid; gap: 10px }
.hubfaq .hubfaq-item {
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: 14px;
  backdrop-filter: blur(14px); overflow: hidden;
  transition: border-color .2s;
}
.hubfaq .hubfaq-item:hover { border-color: rgba(var(--plasma-rgb),.34) }
.hubfaq .hubfaq-item > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 20px; font-size: 15px; font-weight: 600; color: var(--txt); word-break: keep-all;
}
.hubfaq .hubfaq-item > summary::-webkit-details-marker { display: none }
.hubfaq .hubfaq-item > summary::after {
  content: "+"; flex: 0 0 auto;
  font-family: "Space Grotesk", var(--font-sans); font-size: 19px; font-weight: 400; color: var(--ember);
  transition: transform .2s;
}
.hubfaq .hubfaq-item[open] > summary::after { transform: rotate(45deg) }
.hubfaq .hubfaq-item > p {
  margin: 0; padding: 0 20px 18px;
  font-size: 14.5px; line-height: 1.8; color: var(--txt-dim); word-break: keep-all;
}
@media (prefers-reduced-motion: reduce) {
  .hubfaq .hubfaq-item, .hubfaq .hubfaq-item > summary::after { transition: none }
}
@media (max-width: 560px) {
  .hubfaq.wrap { margin-top: 64px }
  .hubfaq .hubfaq-item > summary { padding: 14px 16px; font-size: 14.5px }
  .hubfaq .hubfaq-item > p { padding: 0 16px 16px }
}
