/* 050305.css — FAQ
   수치는 design/050305_FAQ.png(1920×2800) 픽셀 실측 기준.
   히어로·헤더·푸터는 common.css 를 그대로 쓴다. */

/* 히어로 끝 503 → 탭 584 (상 81).
   하단은 시안 실측(685) 대신 다른 목록 페이지와 같은 160 으로 맞춘다.
   실제 항목 수가 시안보다 적어 아래가 텅 비어 보이는 문제. */
.faq-section__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 81px var(--gutter-pc) 160px;
}

/* ── 필터 : 탭(높이 44)과 검색창(높이 52)은 위쪽 584 로 정렬 ── */
.faq-filter {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.faq-tabs {
  display: flex;
  gap: 17px; /* 텍스트 간격 50 = padding 16.5×2 + 17 */
}

.faq-tab {
  height: 44px;
  padding: 0 16.5px;
  display: flex;
  align-items: center;
  border-radius: 20px;
  font-size: 17px; /* "서류전형" 잉크폭 59 (16px 는 55) */
  line-height: 1;
  color: var(--color-text-sub);
  transition: background-color .2s ease, color .2s ease;
}

.faq-tab:hover {
  color: var(--color-text);
}

.faq-item__head:hover .faq-item__q {
  color: var(--color-primary);
}

/* 활성 탭 : rect 63×44 rx20, fill #1740C4 10% */
.faq-tab--active {
  background: var(--color-tag-bg);
  font-weight: 700;
  color: var(--color-primary);
}

/* 검색창(.search-box)과 페이지네이션은 common.css 의 공통 컴포넌트를 쓴다 */

/* ── 목록 : 탭 끝 636 → 리스트 상단 676 (40) ── */
/* 상단선(#57606A)은 시안에서 첫 행 위에 겹쳐 그려진다.
   border-top 으로 주면 내용이 1px 밀리므로 레이아웃에 영향 없는 inset 그림자로 그린다. */
.faq-list {
  margin-top: 40px;
  box-shadow: inset 0 1px 0 var(--color-text-sub);
}

.faq-item {
  border-bottom: 1px solid var(--color-card-line);
}

/* 카테고리 탭으로 걸러진 항목 (js/page/faq.js) */
.faq-item--hidden {
  display: none;
}

/* 결과 0건일 때 : 위 구분선만 남으면 어색하므로 지운다 */
.faq-list--empty {
  box-shadow: none;
}

.faq-empty {
  display: none;
  margin-top: 40px;
  padding: 60px 0;
  border-top: 1px solid var(--color-text-sub);
  border-bottom: 1px solid var(--color-card-line);
  text-align: center;
  font-size: 16px;
  color: var(--color-text-sub);
}

.faq-empty--show {
  display: block;
}

/* 행 피치 76 = 내용 75 + 경계선 1.
   height 가 아니라 min-height 여야 좁은 폭에서 질문이 줄바꿈돼도 넘치지 않는다
   (PC 에서는 내용이 한 줄이라 결과가 75 로 동일). */
.faq-item__head {
  width: 100%;
  min-height: 75px;
  padding-right: 8px; /* 셰브론 박스 우측 1528, 리스트 우측 1536 */
  display: flex;
  align-items: center;
  text-align: left;
}

/* 열린 항목은 경계선이 답변 아래에 있으므로 머리 높이가 1px 더 크다 (752~828) */
.faq-item--open .faq-item__head {
  min-height: 76px;
}

.faq-item__no {
  width: 59.5px; /* 384 → 배지열 443.5 */
  font-size: 16px;
  line-height: 1;
  color: var(--color-muted);
}

/* 배지는 폭이 달라도 중심 472 로 정렬된다 */
.faq-item__cat {
  width: 57px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
}

/* 카테고리명이 DB 값이라 길이를 모른다. 고정폭 대신 좌우 여백으로 늘어나게 */
.faq-badge {
  height: 22px;
  min-width: 37px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  background: var(--color-card-line);
  color: #646d76;
}

/* --5/--6/--7 = DB category_fk */
.faq-badge--interview,
.faq-badge--6 {
  background: #e6f5ee;
  color: #047d42;
}

/* 서류전형만 시안에서 rx11(알약)로 그려져 있다 */
.faq-badge--document,
.faq-badge--5 {
  border-radius: 11px;
  background: var(--color-icon-bg);
  color: var(--color-primary);
}

/* 남는 폭을 질문이 다 먹고, 조회수·화살표는 오른쪽 끝에 고정 */
.faq-item__q {
  flex: 1;
  min-width: 0;
  margin-left: 19.5px; /* 배지열 끝 500.5 → 질문 520 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.4px; /* 행3 질문 잉크폭 547 (18px 기본 565) */
  line-height: 1;
  color: var(--color-text);
  transition: color .2s ease;
}

.faq-item__arrow {
  margin-left: auto;
  flex-shrink: 0;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

.faq-item--open .faq-item__arrow {
  transform: rotate(180deg);
}

/* ── 답변 : 828~1224, 본문 x520 부터. 열린 항목에서만 보인다 ── */
.faq-item__answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 0 0 136px;
  transition: max-height .3s cubic-bezier(.4, 0, .2, 1),
              padding .3s cubic-bezier(.4, 0, .2, 1);
  font-size: 17.5px; /* 단독 문단 잉크폭 163/505 로 역산 */
  letter-spacing: -0.1px;
  line-height: 28px;
  color: var(--color-text-sub);
}

/* max-height 는 실제 높이보다 넉넉히. 값이 모자라면 긴 답변이 잘린다 */
.faq-item--open .faq-item__answer {
  max-height: 2000px;
  padding: 7px 0 24px 136px;
}

/* 시안 최대 줄 폭 1009 에 맞춘다. 안 주면 줄바꿈 지점이 시안과 달라진다 */
.faq-item__answer p {
  max-width: 1010px;
}

/* DB 본문의 인라인 스타일(FONT-SIZE:10pt 등) 무력화 */
.faq-item__answer p,
.faq-item__answer span,
.faq-item__answer div,
.faq-item__answer font,
.faq-item__answer li {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

.faq-item__answer img,
.faq-item__answer table {
  max-width: 100%;
  height: auto;
}

/* 문단 사이는 빈 줄 한 칸(28) */
.faq-item__answer p + p {
  margin-top: 28px;
}

/* ── 페이지네이션 : 리스트 끝 1832 → 1880 (48). 모양은 common.css ── */
.pagination {
  margin-top: 48px;
}

/* ── 조회수 : 화살표 왼쪽에 붙는 고정 열 ── */
.faq-item__views {
  margin-left: 16px;
  margin-right: 24px;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 14px;
  color: #999999;
}

.faq-item__views .view-count {
  margin-left: 4px;   /* 조회수 글자와 숫자 사이 간격 */
  font-style: normal;
}

/* ── 반응형 : 모바일 시안이 없으므로 1단 스택 + 좌우 20px (CLAUDE.md §4) ── */
@media (max-width: 1023px) {
  .faq-section__inner {
    padding: 64px var(--gutter-mo) 96px;
  }

  .faq-item__q {
    line-height: 26px; /* 줄바꿈되면 1 로는 줄이 붙는다 */
  }

  .faq-item__answer {
    padding-left: 116.5px; /* 번호 59.5 + 배지 57 */
  }

  .faq-item__answer p {
    max-width: none;
  }
}

@media (max-width: 767px) {
  .faq-section__inner {
    padding: 48px var(--gutter-mo) 64px;
  }

  .faq-filter {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .faq-tabs {
    flex-wrap: wrap;
    gap: 8px;
  }

  .faq-tab {
    height: 38px;
    padding: 0 14px;
    font-size: 15px;
  }

  .faq-item__head {
    padding: 18px 8px 18px 0;
    align-items: flex-start;
  }

  .faq-item__no {
    width: 30px;
    font-size: 14px;
    line-height: 24px;
  }

  .faq-item__cat {
    width: 57px;
    flex-shrink: 0;
  }

  .faq-item__q {
    margin-left: 12px;
    white-space: normal;   /* 좁은 폭에서는 말줄임 대신 줄바꿈 */
    font-size: 16px;
    line-height: 24px;
  }

  /* 375 폭에서는 조회수까지 넣으면 제목이 두세 줄이 된다 */
  .faq-item__views {
    display: none;
  }

  .faq-item__arrow {
    margin-top: 2px;
  }

  .faq-item__answer {
    padding: 0 0 20px 42px;
    font-size: 15px;
    line-height: 24px;
  }

  .faq-item__answer p + p {
    margin-top: 24px;
  }
}