/* 가이드 문서 공용 프리미티브 — guide.html / quickstart.html / onboarding.html 이 공유한다.
   페이지 레이아웃(.g-shell, 사이드바, 히어로 타이포)은 각 페이지의 인라인 스타일에 둔다.
   design_system.css 이후에 로드할 것. */

/* 절차(번호) 리스트 */
.g-steps { list-style: none; counter-reset: gstep; margin: 12px 0 16px; padding: 0; }
.g-steps li { counter-increment: gstep; position: relative; padding: 0 0 14px 40px; margin: 0;
  font-size: 15px; line-height: 1.8; }
.g-steps li::before { content: counter(gstep); position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 50%; background: var(--primary-soft); color: var(--primary);
  font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.g-steps li + li::after { content: ""; position: absolute; left: 13px; top: -12px; bottom: auto;
  height: 10px; width: 1px; background: var(--border); }

/* 스크린샷 카드 */
figure.g-shot { margin: 14px 0 22px; border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: var(--card); }
figure.g-shot img { display: block; width: 100%; height: auto; }
figure.g-shot figcaption { padding: 10px 16px; font-size: 14px; color: var(--text-sub);
  border-top: 1px solid var(--border); line-height: 1.6; background: var(--bg); }
.g-shot-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* 팁 / 주의 박스 */
.g-tip, .g-warn { border-radius: var(--radius); padding: 12px 16px; margin: 12px 0 16px; font-size: 14px; line-height: 1.75; }
.g-tip  { background: var(--primary-soft); border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent); }
.g-warn { background: var(--warning-soft); border: 1px solid var(--warning-border); }
.g-tip b, .g-warn b { font-weight: 700; }

/* 흐름 다이어그램(칩) */
.g-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 18px; }
.g-flow .f { padding: 8px 14px; border-radius: 99px; background: var(--card); border: 1px solid var(--border);
  font-size: 14px; font-weight: 650; white-space: nowrap; }
.g-flow .f.hl { background: var(--primary-action); border-color: var(--primary-action); color: #fff; }
.g-flow .a { color: var(--muted); font-size: 14px; }

/* 버튼 라벨 인라인 표기 */
kbd.btn-label { display: inline-block; padding: 2px 9px; border-radius: var(--radius-sm); background: var(--card);
  border: 1px solid var(--border); font-size: 13px; font-weight: 650; font-family: inherit;
  color: var(--text); white-space: nowrap; }

/* 상태 마크 표 */
table.g-table { width: 100%; border-collapse: collapse; margin: 10px 0 16px; font-size: 14px; }
table.g-table th, table.g-table td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; line-height: 1.6; }
table.g-table th { background: var(--bg); font-weight: 650; }

@media (max-width: 760px) {
  .g-shot-row { grid-template-columns: 1fr; }
  .g-flow .f, kbd.btn-label { white-space: normal; }
  table.g-table { display: block; overflow-x: auto; }
}

/* 인쇄 (브라우저 인쇄 → PDF 배포본) — 공통 규칙. 페이지별 추가 규칙은 각 페이지 인라인에. */
@page { margin: 14mm; }
@media print {
  .classes-header, .no-print { display: none !important; }
  body { background: var(--paper); }
  figure.g-shot { break-inside: avoid; page-break-inside: avoid; }
  .g-tip, .g-warn { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}