/* 자주 묻는 질문 — Figma「2026 디캅 홈페이지 / 자주 묻는 질문」(node 2005:384), 1920 기준
   헤더 · 푸터 · 제목(.sec-title) · 탭(.tabs, .tabs__btn)은 style.css. 동작은 js/faq.js */

/* 시안은 본문을 1366px 로 잡아 두지만, 질문이 적으면 푸터가 한참 아래에 남는다 — 내용만큼만 쓴다 */
.faq
{
  padding: 95px 0 170px;
}
.faq-list
{
  margin-top: 38px;
}

/* ── 질문 줄: 높이 60 · 아래 1px 선 #e4e8f0 · 좌우 20 ── */
.faq-item__head
{
  font-size: inherit;
  font-weight: inherit;
}
.faq-q
{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 60px;
  padding: 0 20px;
  border: 0;
  border-bottom: 1px solid #e4e8f0;
  background: none;
  color: #000;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.faq-q__mark
{
  flex-shrink: 0;
  width: 18px;
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  color: var(--blue);
}
.faq-q__text
{
  flex: 1;
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  transition: color .2s;
}

/* 화살표 14×7, 1px #666 — 닫히면 아래(∨), 열리면 위(∧) */
.faq-q::after
{
  content: "";
  flex-shrink: 0;
  width: 14px;
  height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3E%3Cpath d='M.5.5 7 7 13.5.5' fill='none' stroke='%23666'/%3E%3C/svg%3E") no-repeat center;
  transition: transform .3s ease;
}
.faq-item.is-open .faq-q::after
{
  transform: rotate(180deg);
}

/* hover · 키보드: 질문 글자가 파랗게 (다른 페이지 hover 와 같은 색) */
.faq-q:hover .faq-q__text, .faq-q:focus-visible .faq-q__text
{
  color: var(--blue);
}
.faq-q:focus-visible
{
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

/* ── 답: 바탕 #f7f8fb, 글 15/26. 높이는 grid-template-rows 0fr↔1fr 로 부드럽게 ── */
.faq-a
{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease;
}
.faq-item.is-open .faq-a
{
  grid-template-rows: 1fr;
}
.faq-a__inner
{
  min-height: 0;
  overflow: hidden;
  background: #f7f8fb;
}
/* 여백은 시안 그대로(왼 43 · 위 32 · 오른 107 · 아래 33). 시안은 한글을 글자 단위로 줄바꿈한다 */
.faq-a__body
{
  padding: 32px 107px 33px 43px;
  font-size: 15px;
  line-height: 26px;
  color: #000;
  word-break: normal;
}

.faq-empty
{
  padding: 100px 0;
  font-size: 18px;
  color: #999;
  text-align: center;
}

/* ── 좁은 화면 ── */
@media (max-width: 760px)
{
  .faq
  {
    min-height: 0;
    padding: 56px 0 96px;
  }
  .faq-list
  {
    margin-top: 32px;
  }
  .faq-q
  {
    align-items: flex-start;
    height: auto;
    min-height: 60px;
    padding: 16px 12px;
  }
  .faq-q__mark, .faq-q__text
  {
    font-size: 16px;
    line-height: 24px;
  }
  .faq-q::after
  {
    margin-top: 8px;
  }
  .faq-a__body
  {
    padding: 20px 16px 24px;
    font-size: 14px;
    line-height: 1.7;
  }
}