/* ============================================================================
 * 서명전에 — iOS Help / FAQ Tab
 * ========================================================================== */

/* Large title subtitle (도움말 히어로용) */
.largetitle__sub {
  margin: 6px 0 8px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--label-secondary);
  opacity: 0.78;
  max-width: 320px;
  text-wrap: pretty;
}

/* ---------- 사용 방법 3단계 ---------- */
.help-howto {
  margin: 0 16px 22px;
  padding: 16px 16px 14px;
  border-radius: 16px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--brand) 8%, var(--surface)) 0%,
    var(--surface) 100%
  );
  box-shadow: inset 0 0 0 0.5px var(--separator);
}
.help-howto__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.help-howto__list {
  display: flex; flex-direction: column; gap: 14px;
}
.help-howto__item {
  display: flex; gap: 14px;
  align-items: flex-start;
}
.help-howto__step {
  flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 14px;
  background: var(--brand);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-num);
  font-size: 14px;
  font-weight: 700;
  margin-top: 1px;
}
.help-howto__n { letter-spacing: -0.01em; line-height: 1; }
.help-howto__body { flex: 1; min-width: 0; }
.help-howto__h {
  font-size: 15px;
  font-weight: 600;
  color: var(--label);
  letter-spacing: -0.015em;
  margin-bottom: 3px;
}
.help-howto__p {
  font-size: 14px;
  line-height: 1.45;
  color: var(--label-secondary);
  text-wrap: pretty;
  word-break: keep-all;
}

/* ---------- 바로가기 링크 ---------- */
.help-quickrow {
  padding: 0 16px;
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 10px;
}
.help-quick {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 0;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: inset 0 0 0 0.5px var(--separator);
  cursor: pointer;
  font-family: inherit;
  color: var(--label);
  transition: background 160ms;
}
.help-quick:active { background: var(--fill-3); }
.help-quick__ic {
  width: 32px; height: 32px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.help-quick__label {
  flex: 1;
  text-align: left;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.help-quick__chev {
  color: var(--label-secondary);
  opacity: 0.45;
  display: flex; align-items: center;
}

/* ---------- FAQ ---------- */
/* 개별 행은 TDS BoardRow(BoardRow.jsx)가 렌더링.
   여기에는 카테고리 그룹/목록 컨테이너만 남긴다. */
.faq-group {
  margin: 0 16px 18px;
}
.faq-group__cat {
  padding: 0 2px 6px;
  font-size: var(--sub-ty-9-fs);
  font-weight: var(--w-semibold);
  color: var(--label-secondary);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.7;
}
.faq-group__list {
  background: var(--surface);
  border-radius: 12px;
  box-shadow: inset 0 0 0 0.5px var(--separator);
  overflow: hidden;
}

/* ---------- 문의 CTA ---------- */
.help-contact {
  margin: 12px 16px 18px;
  padding: 18px 16px 16px;
  border-radius: 14px;
  background: var(--fill-3);
  text-align: center;
}
.help-contact__h {
  font-size: 15px;
  font-weight: 600;
  color: var(--label);
  letter-spacing: -0.015em;
  margin-bottom: 4px;
}
.help-contact__p {
  font-size: 13px;
  color: var(--label-secondary);
  margin-bottom: 14px;
  line-height: 1.45;
  word-break: keep-all;
  text-wrap: pretty;
}
.help-contact__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.help-contact__btn {
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: var(--surface);
  color: var(--brand);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  transition: background 160ms;
  box-shadow: inset 0 0 0 0.5px var(--separator);
}
.help-contact__btn:active { background: var(--fill-2); }