/* 使い方の動画のプレーヤー(/assets/guide.js)。/guide/ のページと、ツールのページのシート(.guide-sheet)で使う */
.gp { display: grid; gap: var(--space-4); }
.gp__msg { margin: 0; padding: var(--space-6) 0; color: var(--c-fg-subtle); font-size: var(--text-sm); text-align: center; }
.gp__stage { display: flex; justify-content: center; }
.gp__stage video { display: block; width: 100%; height: auto; aspect-ratio: var(--ar); border-radius: var(--radius-image); background: #111110; box-shadow: inset 0 0 0 1px var(--c-border); }
/* スマホで撮った縦長の動画は、高さで収める */
.gp--sp .gp__stage video { width: auto; max-width: 100%; max-height: min(70vh, 640px); max-height: min(70svh, 640px); }
.gp__side { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.gp__cap { display: flex; align-items: baseline; gap: var(--space-3); margin: 0; min-height: 3em; font-size: var(--text-md); font-weight: var(--weight-medium); line-height: var(--leading-ui); }
.gp__n { flex: none; color: var(--c-fg-subtle); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.gp__steps { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.gp__steps button {
  display: flex; align-items: baseline; justify-content: flex-start; gap: var(--space-3); width: 100%; height: auto; padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-control);
  background: none; color: var(--c-fg-muted); font: inherit; font-size: var(--text-sm); line-height: var(--leading-ui); text-align: left; white-space: normal; cursor: pointer;
}
.gp__steps button:hover { background: var(--c-surface-hover); color: var(--c-fg); }
.gp__steps button[aria-current] { background: var(--c-surface); color: var(--c-fg); box-shadow: inset 2px 0 0 var(--amber-9); }
.gp__time { flex: none; min-width: 2.6em; color: var(--c-fg-subtle); font-family: var(--font-mono); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }

/* 横に並べられる幅では、PC の動画は左、手順は右 */
@media (min-width: 901px) {
  .gp--pc { grid-template-columns: minmax(0, 1fr) 280px; align-items: start; }
  .gp--sp { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
}

/* ツールのページのシート */
.guide-sheet .hd-sheet__body { gap: var(--space-3); }
@media (min-width: 901px) {
  .guide-sheet .hd-sheet__body { width: min(1040px, calc(100vw - 64px)); max-height: calc(100vh - 64px); padding: var(--space-4) var(--space-5) var(--space-5); }
}
.guide-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.guide-sheet__head h2 { display: flex; align-items: baseline; gap: var(--space-3); margin: 0; font-size: var(--text-lg); font-weight: var(--weight-heading); }
.guide-sheet__head small { color: var(--c-fg-subtle); font-size: var(--text-sm); font-weight: var(--weight-regular); }
.guide-sheet__more { align-self: flex-end; color: var(--c-fg-muted); font-size: var(--text-sm); }
.guide-sheet__x { flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--c-fg-muted); font-size: 22px; line-height: 1; cursor: pointer; }
.guide-sheet__x:hover { background: var(--c-surface-hover); color: var(--c-fg); }