/* static/css/pages/help.css — 도움말 화면(help.html) 전용 스타일.
   이 페이지에만 있는 메일 버튼과 화면 스크린샷 figure.

   이 페이지가 로드하는 층: tokens + shell + doc + 이 파일.
   공유 컴포넌트를 여기에 넣지 말 것 — 두 페이지 이상이 쓰게 되는 순간 그 층으로 올린다. */

/* 도움말 전용 스타일 — 공통 문서 레이아웃(본문 기둥·목차·카드형 섹션·단계 목록·비교 표·
   FAQ)은 /css/doc.css, 디자인 토큰·폰트·헤더·푸터·모달은 /css/shell.css 가 갖는다.
   여기에는 이 페이지에만 있는 컴포넌트만 남긴다. */
.mail{display:inline-flex;align-items:center;gap:7px;margin-top:16px;text-decoration:none;
  font:600 15px/1 var(--font);color:var(--ink);background:var(--accentSoft);border-radius:999px;padding:11px 16px}
.mail:hover{filter:brightness(.95)}

/* 화면 스크린샷 — 이미지 파일은 다른 곳(/img/help/*.png)에서 서빙하고 여기서는 표시만 한다.
   width/height 속성은 로드 전 자리를 잡아 레이아웃 시프트를 막기 위한 것이고(실제 비율은
   height:auto 가 로드 후 덮어쓴다), 사용자 콘텐츠가 아니라 우리 UI 사진이라 배경은
   테마를 따라간다. */
figure.shot{margin:18px 0 0}
/* width 를 100% 로 강제하지 않는 것이 중요하다 — 잘라 찍은 작은 스크린샷(예: 옵션 영역만
   담은 515px 짜리)까지 카드 폭으로 늘리면 흐려진다. max-width 로 상한만 두면 큰 캡처는
   줄어들어 선명하고, 작은 캡처는 원래 크기 그대로 놓인다. */
figure.shot img{display:block;max-width:100%;height:auto;border:1px solid var(--line);
  border-radius:12px;background:var(--panel2)}
figure.shot figcaption{margin-top:9px;font:400 13.5px/1.55 var(--font);color:var(--muted);text-wrap:pretty}