/* 사용 설명서 (/guide — web/guide.html)
   화면: 맨 위 '빠른 시작'(5단계 · 자주 막히는 곳 TOP 5) → '자세한 설명서' 12장(장마다 접힘 · 찾기 칸)
         큰 화면은 왼쪽에 붙는 목차, 작은 화면(960px 이하)은 위쪽에 붙는 접는 목차
   인쇄·PDF(@media print) 두 가지 — node cloud/tools/make_guide_pdf.js 가 둘 다 만듦
     · 전체 설명서(기본 · web/assets/guide/user-guide.pdf): A4 표지 → 차례 → 장마다 새 쪽(모두 펼침), 빠른 시작은 빼고, 아래 가운데 쪽 번호
     · 빠른 시작 안내서(<html data-print="quick"> · web/assets/guide/quick-start.pdf): 첫 쪽 위 띠(회사 이름) + 5단계 + TOP 5, A4 2쪽 */

/* ---------- 머리 ---------- */
.g-head { padding-bottom: clamp(32px, 4vw, 48px); }
.g-head .lead { margin: 12px 0 0; max-width: 640px; }
.g-meta-small { margin: 14px 0 0; color: var(--muted); font-size: 14px; }
.g-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.g-ic { width: 18px; height: 18px; flex: none; }
.g-cover, .g-qcover, .g-print-only { display: none; }

/* ---------- 틀: 목차 + 본문 ---------- */
.g-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; padding-bottom: var(--section); }
.g-side { position: sticky; top: calc(var(--header-h) + 24px); max-height: calc(100vh - var(--header-h) - 48px); overflow: auto; padding: 4px 4px 16px 0; }
.g-toc-title { margin: 0 0 10px 10px; font-size: 13px; font-weight: 800; color: var(--muted); letter-spacing: .04em; }
.g-toc-print-title, .g-toc-desc { display: none; }
.g-toc { list-style: none; margin: 0; padding: 0; }
.g-toc a { display: flex; gap: 8px; align-items: baseline; padding: 7px 10px; border-radius: 10px; color: var(--ink-2); font-size: 15px; font-weight: 600; line-height: 1.45; text-decoration: none; }
.g-toc a:hover { background: var(--bg-soft); color: var(--ink); text-decoration: none; }
.g-toc a[aria-current="true"] { background: var(--bg-tint); color: var(--primary); }
.g-toc .n { flex: none; min-width: 20px; color: var(--faint); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.g-toc a[aria-current="true"] .n { color: var(--primary); }
/* 목차 맨 위 '빠른 시작' + '자세한 설명서' 소제목 */
.g-toc-top a { font-weight: 800; color: var(--ink); }
.g-toc-top .n { color: var(--primary); align-self: center; }
.g-toc-ic svg { display: block; width: 15px; height: 15px; }
.g-toc-pill { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); font-size: 12px; font-weight: 800; line-height: 1.6; vertical-align: 1px; }
.g-toc-sub { margin: 16px 0 6px 10px; font-size: 12px; font-weight: 800; color: var(--faint); letter-spacing: .04em; }
.g-toc-m { display: none; }
.g-body { min-width: 0; max-width: 840px; }

/* ---------- 빠른 시작 (3분 · 5단계) ---------- */
.g-quick { margin-bottom: clamp(56px, 7vw, 88px); }
.g-quick-head { margin-bottom: 24px; }
.g-quick-kicker { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 5px 12px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); font-size: 14px; font-weight: 800; }
.g-quick-kicker svg { width: 16px; height: 16px; flex: none; }
.g-quick h2 { font-size: clamp(30px, 4.2vw, 42px); font-weight: 800; letter-spacing: -0.035em; margin: 0 0 10px; }
.g-quick-lead { margin: 0; max-width: 640px; color: var(--ink-2); font-size: clamp(17px, 1.8vw, 20px); line-height: 1.7; }
.g-qs { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.g-qs-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 28px; align-items: center; padding: 26px 28px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: var(--shadow-sm); }
.g-qs-no { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--primary); color: #fff; font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 28%, transparent); }
.g-qs-step h3 { font-size: clamp(21px, 2.3vw, 25px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.35; margin: 14px 0 8px; }
.g-qs-step p { margin: 0 0 8px; color: var(--ink-2); font-size: 17px; line-height: 1.75; }
.g-qs-step p b { color: var(--ink); }
/* '자세히 보기' — 손가락으로 누르기 좋게 44px */
.g-more { display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: 8px; min-height: 44px; font-size: 16px; font-weight: 800; }
.g-more-ch { color: var(--muted); font-size: 14px; font-weight: 600; }
.g-more-ch::before { content: "→" / ""; margin-right: 6px; color: var(--primary); }
.g-qs-shot { margin: 0; }
/* 그림은 같은 3:2 틀에 위쪽부터 (세로 그림은 윗부분만) */
.g-qs-shot img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 0; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-soft); box-shadow: var(--shadow); }

/* 자주 막히는 곳 TOP 5 */
.g-top5 { margin-top: 20px; padding: 22px 24px; border-radius: 20px; background: var(--warn-bg); border: 1px solid color-mix(in srgb, var(--warn) 22%, white); }
.g-top5 h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 12px; }
.g-top5-list { list-style: none; counter-reset: top5; margin: 0; padding: 0; display: grid; gap: 10px; }
.g-top5-list li { counter-increment: top5; position: relative; padding-left: 34px; color: var(--ink-2); font-size: 16px; line-height: 1.65; }
.g-top5-list li::before { content: counter(top5); position: absolute; left: 0; top: 1px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; background: #fff; border: 1px solid color-mix(in srgb, var(--warn) 30%, white); color: var(--warn); font-size: 13px; font-weight: 800; }
.g-top5-list a { color: var(--ink); font-weight: 800; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--warn) 45%, transparent); text-underline-offset: 3px; }
.g-top5-list a:hover { color: var(--primary); text-decoration-color: currentColor; }
.g-top5-more { margin: 14px 0 0; font-size: 15px; font-weight: 700; }
.g-qs-foot { margin: 16px 0 0; color: var(--muted); font-size: 15px; }

/* ---------- 자세한 설명서: 나누는 줄 · 찾기 ---------- */
.g-divider { margin: 0 0 20px; padding-top: 32px; border-top: 2px solid var(--line); }
.g-divider-h { font-size: clamp(23px, 2.8vw, 29px); font-weight: 800; letter-spacing: -0.03em; margin: 0 0 6px; }
.g-divider-p { margin: 0; color: var(--muted); font-size: 16px; }
.g-search { margin: 0 0 18px; }
.g-search-label { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 800; }
.g-search-row { display: flex; align-items: center; gap: 10px; }
.g-search-box { position: relative; flex: 1 1 auto; min-width: 0; }
.g-search-ic { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.g-search-input { width: 100%; min-height: 50px; padding: 10px 14px 10px 42px; font: inherit; font-size: 16px; color: var(--ink); background: #fff; border: 1px solid var(--line-2); border-radius: 12px; transition: border-color .15s, box-shadow .15s; }
.g-search-input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent); }
.g-expand { flex: none; }
.g-search-msg { margin: 8px 0 0; color: var(--ink-2); font-size: 15px; }
.g-search-msg:empty { display: none; }
::highlight(g-find) { background-color: #fde68a; color: inherit; }

/* ---------- 장 (접힘 — 제목을 누르면 펼침) ---------- */
.g-ch + .g-ch { margin-top: 12px; }
.g-det { border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow-sm); transition: border-color .2s, box-shadow .2s; }
.g-det[open] { border-color: var(--line-2); box-shadow: var(--shadow); }
.g-sum { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 20px; grid-template-areas: "no title hit chev" "no desc hit chev"; align-items: center; column-gap: 14px; row-gap: 2px; min-height: 76px; padding: 16px 20px; border-radius: 18px; cursor: pointer; list-style: none; }
.g-sum::-webkit-details-marker { display: none; }
.g-sum:hover { background: var(--bg-soft); }
.g-det[open] > .g-sum { border-radius: 18px 18px 0 0; border-bottom: 1px solid var(--line); }
.g-sum::after { grid-area: chev; justify-self: center; content: ""; width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-3px) rotate(45deg); transition: transform .2s; }
.g-det[open] > .g-sum::after { transform: translateY(3px) rotate(-135deg); }
.g-sum .g-ch-no { grid-area: no; margin: 0; min-width: 54px; text-align: center; }
.g-sum h2 { grid-area: title; margin: 0; font-size: clamp(19px, 2.3vw, 23px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.35; }
.g-sum-desc { grid-area: desc; color: var(--muted); font-size: 14px; line-height: 1.5; }
.g-sum-hit { grid-area: hit; padding: 3px 10px; border-radius: 999px; background: #fde68a; color: #6b4e00; font-size: 13px; font-weight: 800; white-space: nowrap; }
.g-det-body { padding: 24px 28px 36px; }
.g-ch-no { display: inline-block; margin: 0 0 10px; padding: 4px 12px; border-radius: 999px; background: var(--bg-tint); color: var(--primary); font-size: 14px; font-weight: 800; }
.g-ch-lead { font-size: clamp(17px, 1.6vw, 19px); color: var(--ink-2); line-height: 1.7; margin-bottom: 8px; }
.g-h3 { font-size: 20px; font-weight: 800; margin: 40px 0 12px; }
.g-list { margin: 0 0 12px; padding-left: 20px; color: var(--ink-2); list-style: disc; }
.g-list li + li { margin-top: 6px; }
.g-list li::marker { color: var(--faint); }
.g-list b, .g-step p b { color: var(--ink); }

/* 단계 번호 */
.g-steps { list-style: none; counter-reset: gstep; margin: 28px 0 0; padding: 0; }
.g-step { position: relative; counter-increment: gstep; padding-left: 52px; }
.g-step + .g-step { margin-top: 40px; }
.g-step::before { content: counter(gstep); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 15px; font-weight: 800; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.g-step > h3 { font-size: 20px; font-weight: 800; line-height: 1.35; margin: 4px 0 10px; }
.g-step > p { color: var(--ink-2); margin: 0 0 12px; }

/* 누르는 곳 (버튼·메뉴 이름) */
/* inline-block: 버튼 이름이 줄 끝에서 둘로 나뉘지 않게 (한 줄보다 길 때만 상자 안에서 줄바꿈) */
.ui { display: inline-block; max-width: 100%; padding: 0 7px; border-radius: 7px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); font-weight: 700; font-size: .94em; line-height: 1.5; box-shadow: 0 1px 0 var(--line); }
kbd { display: inline-block; padding: 0 6px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 6px; background: var(--bg-soft); font-family: var(--font); font-size: .88em; font-weight: 700; color: var(--ink); line-height: 1.6; }

/* 알림 상자 (site.css 의 .notice 위에) */
.g-note { margin: 16px 0 0; font-size: 15px; line-height: 1.65; }
.g-label { display: inline-block; margin-right: 8px; padding: 0 8px; border-radius: 6px; background: color-mix(in srgb, var(--primary) 14%, white); color: var(--primary); font-size: 13px; font-weight: 800; }
.notice-warn .g-label { background: color-mix(in srgb, var(--warn) 16%, white); color: var(--warn); }

/* 화면 그림 */
.shot { margin: 20px 0 4px; }
.shot img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); }
.shot figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); line-height: 1.55; }
.shot-md { max-width: 560px; }
.shot-sm { max-width: 400px; }
.shot-xs { max-width: 300px; }
.shot-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; max-width: 720px; }
.shot-row .shot { margin-bottom: 0; }
.g-split { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; align-items: start; }
.g-split .shot { margin-top: 28px; }

/* 소재 현황 표 */
.g-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.g-dl > div { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.g-dl dt { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.g-dl dd { margin: 2px 0 0; color: var(--ink-2); font-size: 15px; }
.g-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--faint); }
.g-dot-script { background: #14b8a6; }
.g-dot-making { background: #9ca3af; }
.g-dot-review { background: #f59e0b; }
.g-dot-ready { background: #F07B2E; }
.g-dot-uploading { background: #3b82f6; }
.g-dot-live { background: #22c55e; }
.g-dot-hold { background: #ef4444; }
.g-dot-excluded { background: #d1d5db; }

/* 자주 막히는 곳 */
.g-qa { padding: 20px 22px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow-sm); }
.g-qa + .g-qa { margin-top: 14px; }
.g-ch-lead + .g-qa { margin-top: 24px; }
.g-qa h3 { font-size: 18px; font-weight: 800; margin: 0 0 8px; }
.g-qa h3::before { content: "Q"; display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 8px; border-radius: 7px; background: var(--bg-tint); color: var(--primary); font-size: 13px; vertical-align: 2px; }
.g-qa p, .g-qa .g-list { color: var(--ink-2); margin-bottom: 0; }
.g-qa .shot { margin-top: 16px; }
/* 빠른 시작의 TOP 5 에서 눌러 온 질문은 잠깐 표시 */
.g-qa:target { border-color: color-mix(in srgb, var(--warn) 45%, white); box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn) 14%, transparent); }

/* 도움 받기 */
.g-contact { display: grid; gap: 4px; margin: 0 0 14px; padding: 16px 18px; border-radius: 14px; background: var(--bg-soft); border: 1px solid var(--line); }
.g-contact p { display: flex; gap: 16px; margin: 0; font-weight: 700; }
.g-contact-k { min-width: 48px; color: var(--muted); font-weight: 600; }
.g-end { margin-top: 32px; color: var(--muted); font-size: 15px; }

/* ---------- 작은 화면 ---------- */
@media screen and (max-width: 960px) {
  html { scroll-padding-top: calc(var(--header-h) + 68px); }
  .g-layout { display: block; }
  .g-side { display: none; }
  .g-toc-m { display: block; position: sticky; top: var(--header-h); z-index: 40; margin: 0 -32px 28px; background: color-mix(in srgb, white 94%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(12px); backdrop-filter: saturate(1.6) blur(12px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .g-toc-m summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 32px; cursor: pointer; list-style: none; font-weight: 800; }
  .g-toc-m summary::-webkit-details-marker { display: none; }
  .g-toc-m summary::after { content: ""; width: 9px; height: 9px; margin-left: auto; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-2px) rotate(45deg); transition: transform .2s; flex: none; }
  .g-toc-m[open] summary::after { transform: translateY(2px) rotate(-135deg); }
  .g-toc-m-cur { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--primary); font-weight: 700; font-size: 15px; }
  /* 펼친 목차는 본문 위에 겹쳐 띄움 (본문이 밀리지 않게) */
  .g-toc-m .g-toc-pop { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - var(--header-h) - 72px); overflow: auto; padding: 4px 22px 14px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
  .g-toc-m .g-toc a { padding: 10px; }
  .g-toc-m .g-toc-sub { margin-top: 10px; }
  .g-split { grid-template-columns: minmax(0, 1fr); }
  .g-split .shot { margin: 8px 0 0 52px; }
}
@media screen and (max-width: 640px) {
  .g-toc-m { margin: 0 -20px 24px; }
  .g-toc-m summary { padding: 0 20px; }
  .g-toc-m .g-toc-pop { padding: 4px 10px 12px; }
  .g-actions .btn { flex: 1 1 100%; }
  .g-qs-step { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 20px; border-radius: 18px; }
  .g-qs-no { width: 40px; height: 40px; border-radius: 12px; font-size: 19px; }
  .g-qs-step h3 { margin-top: 12px; }
  .g-qs-step p { font-size: 16.5px; }
  .g-top5 { padding: 18px; border-radius: 18px; }
  .g-top5-list li { font-size: 15.5px; }
  .g-sum { grid-template-columns: auto minmax(0, 1fr) 16px; grid-template-areas: "no title chev" "no desc chev" "no hit chev"; column-gap: 12px; min-height: 68px; padding: 14px 16px; }
  .g-sum .g-ch-no { min-width: 0; padding: 4px 10px; font-size: 13px; }
  .g-sum h2 { font-size: 19px; }
  .g-sum-desc { font-size: 13.5px; }
  .g-sum-hit { justify-self: start; margin-top: 4px; }
  .g-det-body { padding: 18px 16px 28px; }
  .g-step { padding-left: 0; }
  .g-step::before { position: static; display: grid; margin-bottom: 10px; }
  .g-split .shot { margin-left: 0; }
  .shot-row { grid-template-columns: minmax(0, 1fr); }
  .shot-sm, .shot-xs { max-width: 300px; }
  .g-dl { grid-template-columns: minmax(0, 1fr); }
  .g-qa { padding: 18px; }
}

/* ---------- 인쇄·PDF (A4) ---------- */
@page {
  size: A4;
  margin: 16mm 15mm 17mm;
  @bottom-center { content: counter(page); font-size: 8.5pt; color: #98A0B3; }
}
/* 전체 설명서 표지 (첫 쪽은 여백 없이 꽉 채움 — .g-cover 가 이 쪽을 씀) */
@page cover {
  margin: 0;
  @bottom-center { content: none; }
}
/* 빠른 시작 안내서 (2쪽 — .g-qcover·.g-quick 가 이 쪽을 씀) */
@page quick {
  margin: 12mm 13mm 13mm;
  @bottom-center { content: counter(page) " / " counter(pages); font-size: 8.5pt; color: #98A0B3; }
}
@media print {
  /* 인쇄는 이 사이트에 있는 Pretendard(400·500·600)로 — 바깥 글꼴 서버에 기대지 않고, PDF 에 글꼴이 덜 들어가게 */
  :root { --font: Pretendard, "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; }
  html { scroll-padding-top: 0; }
  body { font-size: 10.5pt; line-height: 1.65; background: #fff; color: #0B1020; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .skip, .test-banner, .site-header, .site-footer, .g-head, .g-toc-m, .g-toc-title { display: none !important; }
  /* 전체 설명서에는 빠른 시작·찾기·접힘 표시를 넣지 않음 (빠른 시작은 따로 2쪽 PDF) */
  .g-qcover, .g-quick, .g-divider, .g-search, .g-toc-top, .g-toc-sub, .g-sum-desc, .g-sum-hit { display: none !important; }
  .g-print-only { display: inline; }
  a { color: inherit; text-decoration: none; }
  .wrap { max-width: none; padding: 0; }

  /* 표지 (첫 쪽은 여백 없이 꽉 채움) */
  .g-cover {
    page: cover;
    display: flex; flex-direction: column; justify-content: space-between;
    height: 297mm; padding: 22mm 20mm 20mm; break-after: page;
    background: linear-gradient(150deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 55%, var(--accent)) 58%, var(--accent) 100%);
    color: #fff;
  }
  .g-cover-top { display: flex; align-items: center; gap: 4mm; font-size: 14pt; font-weight: 800; letter-spacing: -0.02em; }
  .g-cover .logo-mark { width: 12mm; height: 12mm; border-radius: 3.5mm; background: rgba(255, 255, 255, .18); box-shadow: none; }
  .g-cover .logo-mark svg { width: 7mm; height: 7mm; }
  .g-cover-kicker { margin: 0 0 6mm; font-size: 13pt; font-weight: 700; opacity: .85; }
  .g-cover-title { margin: 0; font-size: 40pt; line-height: 1.18; font-weight: 800; letter-spacing: -0.035em; }
  .g-cover-sub { margin: 9mm 0 0; font-size: 15pt; line-height: 1.55; opacity: .92; }
  .g-cover-foot { display: flex; justify-content: space-between; gap: 8mm; padding-top: 6mm; border-top: 1px solid rgba(255, 255, 255, .35); font-size: 10.5pt; opacity: .9; }

  /* 차례 */
  .g-layout { display: block; padding: 0; }
  .g-side { position: static; max-height: none; overflow: visible; padding: 0; break-after: page; }
  .g-toc-print-title { display: block; margin: 0 0 8mm; font-size: 24pt; font-weight: 800; letter-spacing: -0.03em; }
  .g-side .g-toc a { display: grid; grid-template-columns: 11mm minmax(0, 1fr); gap: 0; padding: 3.4mm 0; border-radius: 0; border-bottom: 1px solid #E7EAF1; color: #0B1020; font-size: 12.5pt; font-weight: 700; }
  .g-side .g-toc a[aria-current] { background: none; color: #0B1020; }
  .g-side .g-toc .n { font-size: 12.5pt; color: var(--primary); }
  .g-toc-desc { display: block; margin-top: 1mm; font-size: 9.5pt; font-weight: 500; color: #687187; }

  /* 장마다 새 쪽 (make_guide_pdf.js 가 모든 장을 펼친 뒤 인쇄 — 브라우저에서 인쇄해도 guide.js 가 펼침) */
  .g-body { max-width: none; }
  .g-ch { break-before: page; margin: 0; }
  .g-ch + .g-ch { margin-top: 0; }
  .g-det { border: 0; border-radius: 0; background: none; box-shadow: none; }
  .g-sum { display: block; min-height: 0; padding: 0; border-radius: 0; cursor: auto; }
  .g-det[open] > .g-sum { border: 0; border-radius: 0; }
  .g-sum::after { display: none; }
  .g-det-body { padding: 0; }
  .g-ch-no, .g-sum .g-ch-no { min-width: 0; margin: 0 0 2.6mm; padding: 1mm 3.5mm; font-size: 9.5pt; }
  .g-ch h2, .g-sum h2 { font-size: 21pt; margin: 2mm 0 3mm; }
  .g-ch-lead { font-size: 11.5pt; }
  .g-h3 { font-size: 13pt; margin: 7mm 0 3mm; break-after: avoid; }
  .g-steps { margin-top: 5mm; }
  .g-step { padding-left: 11mm; }
  .g-step + .g-step { margin-top: 7mm; }
  .g-step::before { width: 7.5mm; height: 7.5mm; border-radius: 2.2mm; font-size: 10pt; }
  .g-step > h3 { font-size: 13pt; margin: 0.6mm 0 2.5mm; break-after: avoid; }
  .g-list li + li { margin-top: 1.2mm; }
  .ui { box-shadow: none; }
  .g-note { font-size: 9.8pt; break-inside: avoid; }
  .g-label { font-size: 8.8pt; }

  /* 그림: 쪽을 넘지 않게, 한 쪽 안에서 끊기지 않게 */
  .shot { break-inside: avoid; margin: 4mm 0 2mm; }
  .shot img { width: auto; max-width: 100%; max-height: 104mm; box-shadow: none; border-radius: 2.5mm; }
  .shot figcaption { font-size: 9pt; margin-top: 2mm; }
  .shot-md img { max-width: 108mm; }
  .shot-sm img { max-width: 72mm; }
  .shot-xs img { max-width: 56mm; }
  .shot-row { max-width: 140mm; gap: 6mm; }
  .shot-row .shot img { max-height: 92mm; }
  .g-split { grid-template-columns: minmax(0, 1fr) 56mm; gap: 8mm; }
  .g-dl { gap: 2.5mm; }
  .g-dl > div { padding: 2.5mm 3.5mm; break-inside: avoid; }
  .g-dl dd { font-size: 9.8pt; }
  .g-qa { padding: 4mm 5mm; box-shadow: none; break-inside: avoid; }
  .g-qa + .g-qa { margin-top: 3.5mm; }
  .g-qa h3 { font-size: 12pt; break-after: avoid; }
  .g-contact { break-inside: avoid; }

  /* ---- 빠른 시작 안내서: <html data-print="quick"> (make_guide_pdf.js) — 첫 쪽 위 띠 + 5단계(1~3 / 4~5) + TOP 5, A4 2쪽 ---- */
  html[data-print="quick"] .g-cover, html[data-print="quick"] .g-side, html[data-print="quick"] .g-ch { display: none !important; }
  html[data-print="quick"] .g-qcover, html[data-print="quick"] .g-quick { display: block !important; page: quick; }
  .g-qcover { margin: 0 0 5mm; padding: 8mm 10mm 8.5mm; border-radius: 3.5mm; color: #fff; background: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 55%, var(--accent)) 60%, var(--accent) 100%); }
  .g-qcover-top { display: flex; align-items: center; gap: 2.5mm; font-size: 10.5pt; font-weight: 800; letter-spacing: -0.02em; }
  .g-qcover .logo-mark { width: 7.5mm; height: 7.5mm; border-radius: 2.2mm; background: rgba(255, 255, 255, .18); box-shadow: none; }
  .g-qcover .logo-mark svg { width: 4.5mm; height: 4.5mm; }
  .g-qcover-title { margin: 4mm 0 1.5mm; font-size: 24pt; font-weight: 800; letter-spacing: -0.035em; line-height: 1.2; }
  .g-qcover-sub { margin: 0; font-size: 11.5pt; opacity: .92; }
  .g-qcover-date { margin: 2.5mm 0 0; font-size: 8.5pt; opacity: .8; }
  .g-quick { margin: 0; }
  .g-quick-head, .g-top5-more { display: none; }
  .g-qs { gap: 4.5mm; }
  .g-qs-step { grid-template-columns: minmax(0, 1fr) 72mm; gap: 6mm; padding: 5mm 6mm; border-radius: 3mm; box-shadow: none; break-inside: avoid; }
  .g-qs-step:nth-child(4) { break-before: page; }
  .g-qs-no { width: 8mm; height: 8mm; border-radius: 2.4mm; font-size: 12pt; box-shadow: none; }
  .g-qs-step h3 { margin: 2.5mm 0 1.5mm; font-size: 15pt; }
  .g-qs-step p { margin: 0 0 1mm; font-size: 11pt; line-height: 1.6; }
  .g-more { min-height: 0; font-size: 9.5pt; color: var(--primary); }
  .g-more-ch { font-size: 9.5pt; }
  .g-qs-shot img { border-radius: 2mm; box-shadow: none; }
  .g-top5 { margin-top: 5mm; padding: 5mm 6mm; border-radius: 3mm; break-inside: avoid; }
  .g-top5 h3 { margin: 0 0 3mm; font-size: 14pt; }
  .g-top5-list { gap: 2.2mm; }
  .g-top5-list li { padding-left: 7.5mm; font-size: 10.8pt; line-height: 1.55; }
  .g-top5-list li::before { top: .4mm; width: 5mm; height: 5mm; border-radius: 1.5mm; font-size: 8.5pt; }
  .g-top5-list a { text-decoration: none; }
  .g-qs-foot { margin-top: 5mm; font-size: 10pt; }
}