/* ══════════════════════════════════════════════════════════════════════════════
   help.css — 도움말(1g) · 비밀번호 재설정에서 **2단계에 새로 생긴 것만**
   2026-09-15 4차 "당근형" 리뉴얼 2단계.

   ⚠️ 1g 의 뼈대(.help-search .help-topic .help-cta .help-list .acc .auth-form)는
      1단계에서 이미 apps.css §4 · §6 에 들어가 있다. **여기서 다시 쓰지 않는다.**
      apps.css 는 다른 담당의 파일이라 손대지 않고, 2단계에서 더 필요해진 것만 이 파일에 둔다.
      그래서 두 파일을 함께 불러온다:
        layout_head(['css' => ['assets/css/apps.css', 'assets/css/help.css']])

   여기 있는 것
     · .help-crumb     — 글·주제·검색 화면의 "도움말 › 주제" 한 줄
     · mark            — 검색 결과에서 찾은 말 표시
     · .help-list__topic · .help-sub · .help-acc__more
     · .pw-tip         — 비밀번호 재설정 화면의 작은 안내 줄

   색·크기는 전부 styles.css 의 토큰만 쓴다(직접 색을 적지 않는다).
   호버는 2026-09-15 규칙대로 — 면은 @media (hover: hover) 안에서 --surface/--line 한 단계씩,
   transition 은 공통 규칙이 이미 걸어 두므로 부품마다 따로 적지 않는다.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 현재 위치 한 줄 ─────────────────────────────────────────────────────── */
.help-crumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  font: 600 var(--fs-meta) / 1.6 var(--font); color: var(--ink-3);
}
.help-crumb a { color: var(--ink-3); }
@media (hover: hover) { .help-crumb a:hover { color: var(--carrot-ink); } }
.help-crumb > svg { width: 14px; height: 14px; fill: var(--ink-4); flex: none; }
/* 바로 뒤에 오는 제목이 붙어 보이지 않게 — apps.css 의 .ap-h2 는 margin-top:24px 다 */
.help-crumb + .ap-h2 { margin-top: 10px; }

/* ── 검색 결과에서 찾은 말 ───────────────────────────────────────────────── */
.app mark {
  /* tint(#FFF7F1) 는 흰 바탕 위에서 거의 안 보인다 — 짝이 되는 테두리색을 바탕으로 쓴다 */
  background: var(--tint-line);
  color: inherit;
  border-radius: 3px;
  padding: 0 2px;
  /* 굵기를 올리지 않는다 — 제목(600)과 미리보기(400)의 위계를 흐트러뜨리지 않기 위해 */
}

/* ── 검색 결과 줄의 주제 꼬리표 ──────────────────────────────────────────── */
.help-list__topic {
  display: inline-block; margin-top: 6px;
  font: 700 var(--fs-mini) / 1.5 var(--font); color: var(--ink-3);
}

/* ── 글 화면 안의 작은 제목("같은 주제의 다른 글") ───────────────────────── */
.help-sub {
  margin: 26px 0 10px;
  font: 800 var(--fs-md) / var(--lh-tight) var(--font); color: var(--ink);
}

/* ── 아코디언 본문 끝의 "이 글만 따로 보기" ─────────────────────────────── */
.help-acc__more {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 10px;
  font: 700 var(--fs-xs) / 1.5 var(--font); color: var(--carrot-ink);
}
.help-acc__more > svg { width: 14px; height: 14px; fill: currentColor; }

/* ── 비밀번호 재설정 화면의 작은 안내 줄 ────────────────────────────────── */
.pw-tip {
  margin-top: 14px;
  font: 400 var(--fs-xs) / var(--lh-body) var(--font); color: var(--ink-3);
}

/* ── 반응형 ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .help-sub { margin-top: 22px; }
}