.c-help-section {
  display: grid;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-16);
}
.l-help-list {
  display: grid;
  overflow: hidden;
}
.help-item {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--color-border-base-middle);
  &:last-child {
    border-bottom: none;
  }
  &.open {
    .help-answer-content {
      visibility: visible;
      opacity: 1;
      height: auto;
      overflow: visible;
      padding-block: var(--spacing-8);
      padding-inline: var(--spacing-6);
    }
    .toggle-icon {
      &:after {
        transform: rotate(0);
      }
    }
  }
  .help-question {
    button {
      border: none;
      background: transparent;
      display: flex;
      align-items: flex-start;
      padding: 0;
      gap: var(--spacing-4);
      padding-block: var(--spacing-8);
      padding-inline: var(--spacing-6);
      width: 100%;
      &:before {
        content: "Q.";
        font-size: var(--font-size-8);
        font-weight: bold;
        color: var(--color-text-primary);
        font-weight: bold;
        line-height: var(--line-height-1);
        transform: translateY(-1px);
      }
    }
    .question-title {
      flex: 1;
      text-align: left;
    }
  }
  .help-answer-content {
    display: flex;
    gap: var(--spacing-4);
    padding-block: 0;
    visibility: hidden;
    opacity: 0;
    height: 0;
    overflow: hidden;
    background: var(--color-surface-base-primary);
    &:before {
      content: "A.";
      font-size: var(--font-size-8);
      font-weight: bold;
      line-height: var(--line-height-1);
      color: var(--color-text-info);
      transform: translateY(-1px);
    }
    .answer-content {
      flex: 1;
      display: grid;
      gap: var(--spacing-2);
    }
  }
  .toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-round);
    border: 1.5px solid var(--color-border-primary);
    position: relative;
    &:before,
    &:after {
      content: "";
      width: 8px;
      height: 1.25px;
      background: var(--color-border-primary);
      border-radius: 2px;
      position: absolute;
      left: calc(50% - 4px);
      top: calc(50% - 0.75px);
    }
    &:after {
      transform: rotate(90deg);
    }
  }
}