/* 사용설명서 v2 — 따라 하기 모션(포인터 이동·클릭·입력·결과). 설명서 공통 부품 시제품. */
:root {
  --gm-ink: #17241e;
  --gm-muted: #55645c;
  --gm-line: #d7e0db;
  --gm-paper: #ffffff;
  --gm-stage: #eef2f0;
  --gm-brand: #1f6b4f;
  --gm-brand-soft: #e3efe9;
  --gm-accent: #e8590c;
  --gm-accent-soft: #fff1e8;
}
.gm { border: 1px solid var(--gm-line); border-radius: 16px; background: var(--gm-paper); box-shadow: 0 10px 30px rgba(17, 40, 30, .08); overflow: hidden; }
.gm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--gm-line); }
.gm-head h3 { margin: 0; font-size: 1.06rem; color: var(--gm-ink); }
.gm-controls { display: flex; gap: 8px; }
.gm-btn { font: inherit; font-size: .95rem; border: 1px solid var(--gm-line); background: #fff; color: var(--gm-ink); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.gm-btn:hover { border-color: var(--gm-brand); }
.gm-btn[aria-pressed="true"] { background: var(--gm-brand-soft); border-color: var(--gm-brand); color: var(--gm-brand); font-weight: 700; }
.gm-body { display: grid; grid-template-columns: minmax(0, 1fr) 270px; }
.gm-stage { position: relative; height: 540px; background: var(--gm-stage); overflow: hidden; }
.gm-tag { position: absolute; left: 14px; top: 12px; z-index: 6; background: rgba(23, 36, 30, .86); color: #fff; font-size: .82rem; font-weight: 700; padding: 4px 10px; border-radius: 6px; letter-spacing: .01em; }
.gm-viewport { position: absolute; inset: 44px 14px 14px 14px; overflow: hidden; border-radius: 10px; }
.gm-view { position: absolute; left: 0; top: 0; transition: transform .9s cubic-bezier(.4, .1, .2, 1), opacity .45s ease; will-change: transform; }
.gm-view img { display: block; user-select: none; -webkit-user-drag: none; }
.gm-view.is-pane { box-shadow: 0 0 0 1px var(--gm-line), 0 12px 28px rgba(17, 40, 30, .14); border-radius: 8px; overflow: hidden; background: #fff; }
.gm-view.is-sheet { box-shadow: 0 0 0 1px #c9d3ce, 0 12px 28px rgba(17, 40, 30, .14); background: #fff; }
.gm-view.is-leaving { opacity: 0; }
.gm-mask { position: absolute; background: #fff; transform-origin: right center; }
.gm-mask.is-typing { transition: transform var(--gm-type-ms, 900ms) steps(var(--gm-type-steps, 8), end); transform: scaleX(0); }
.gm-mask.is-revealing { transition: opacity .55s ease; opacity: 0; }
.gm-caret { position: absolute; width: 2px; background: var(--gm-ink); animation: gm-blink .9s steps(1) infinite; }
@keyframes gm-blink { 50% { opacity: 0; } }
.gm-hilite { position: absolute; border: 2px solid var(--gm-accent); border-radius: 8px; box-shadow: 0 0 0 4px rgba(232, 89, 12, .16); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.gm-hilite.is-on { opacity: 1; }
.gm-press { position: absolute; border-radius: 8px; background: rgba(0, 0, 0, .14); opacity: 0; pointer-events: none; }
.gm-press.is-on { animation: gm-press .38s ease; }
@keyframes gm-press { 30% { opacity: 1; } 100% { opacity: 0; } }
.gm-callout { position: absolute; z-index: 7; max-width: 300px; word-break: keep-all; overflow-wrap: anywhere; background: var(--gm-accent); color: #fff; font-size: .9rem; font-weight: 700; line-height: 1.45; padding: 8px 12px; border-radius: 10px; box-shadow: 0 8px 20px rgba(232, 89, 12, .28); opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; pointer-events: none; }
.gm-callout.is-on { opacity: 1; transform: none; }
.gm-callout b { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 6px; border-radius: 50%; background: #fff; color: var(--gm-accent); font-size: .8rem; }
/* 포인터·경로·클릭 표시는 무대 좌표(뷰포트 기준)에 그린다 */
.gm-overlay { position: absolute; inset: 44px 14px 14px 14px; pointer-events: none; z-index: 8; }
.gm-trail { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gm-trail path { fill: none; stroke: var(--gm-accent); stroke-width: 2.5; stroke-dasharray: 2 7; stroke-linecap: round; opacity: .85; transition: opacity .8s ease; }
.gm-trail path.is-fading { opacity: 0; }
.gm-cursor { position: absolute; left: 0; top: 0; width: 26px; height: 34px; transform: translate(-3px, -2px); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); transition: opacity .3s; }
.gm-ripple { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 3px solid var(--gm-accent); opacity: 0; }
.gm-ripple.is-on { animation: gm-ripple .7s ease-out; }
@keyframes gm-ripple { 0% { transform: scale(.3); opacity: .95; } 100% { transform: scale(1.6); opacity: 0; } }
.gm-badge { position: absolute; padding: 3px 10px; border-radius: 999px; background: var(--gm-accent); color: #fff; font-size: .8rem; font-weight: 800; letter-spacing: .04em; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; white-space: nowrap; }
.gm-badge.is-on { opacity: 1; transform: none; }
.gm-steps { margin: 0; padding: 14px 14px 14px 10px; list-style: none; border-left: 1px solid var(--gm-line); overflow: auto; max-height: 540px; counter-reset: gm; }
.gm-steps li { margin: 0 0 6px; }
.gm-steps button { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; width: 100%; text-align: left; font: inherit; color: var(--gm-muted); background: none; border: 0; border-radius: 12px; padding: 10px 10px; cursor: pointer; }
.gm-steps button:hover { background: #f4f7f5; }
.gm-steps .gm-num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--gm-line); font-weight: 800; color: var(--gm-muted); background: #fff; }
.gm-steps strong { display: block; font-size: 1rem; color: var(--gm-ink); margin-bottom: 2px; }
.gm-steps span.gm-cap { font-size: .93rem; line-height: 1.5; }
.gm-steps li.is-now button { background: var(--gm-brand-soft); color: var(--gm-ink); }
.gm-steps li.is-now .gm-num { background: var(--gm-brand); border-color: var(--gm-brand); color: #fff; }
.gm-steps li.is-done .gm-num { border-color: var(--gm-brand); color: var(--gm-brand); }
.gm-start { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; background: rgba(238, 242, 240, .72); backdrop-filter: blur(1px); border: 0; cursor: pointer; font: inherit; }
.gm-start span { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 999px; background: var(--gm-brand); color: #fff; font-size: 1.1rem; font-weight: 800; box-shadow: 0 10px 24px rgba(31, 107, 79, .3); }
.gm-start[hidden] { display: none; }
.gm-scrollhint { position: absolute; right: 18px; bottom: 18px; z-index: 6; background: rgba(23, 36, 30, .78); color: #fff; font-size: .8rem; padding: 4px 10px; border-radius: 6px; opacity: 0; transition: opacity .3s; }
.gm-scrollhint.is-on { opacity: 1; }
@media (max-width: 860px) {
  .gm-body { grid-template-columns: 1fr; }
  .gm-steps { border-left: 0; border-top: 1px solid var(--gm-line); max-height: none; }
  .gm-stage { height: 480px; }
}
@media (prefers-reduced-motion: reduce) {
  .gm-view, .gm-callout, .gm-trail path { transition: none; }
}