/* 사용법 영상 화면(templates/guide.html). 색·글꼴은 style.css 의 변수(--font-ui, --ink, --gray, --line, --card, --bg, --blue, --blue-soft …)를 쓴다.
   무대와 표지는 영상(밝은 화면으로 그린 장면)과 이어지도록 화면 테마와 상관없이 같은 밝은 색이다.
   너비: 861px 이상은 두 단(무대 | 목록), 그 아래는 한 단이고 세로 화면에서는 무대가 위 메뉴 아래에 붙는다.
   --gp-nav(위 메뉴 높이)는 guide-page.js 가 실제 높이를 재서 넣는다. */

.gp { --gp-stage: #e6ebf2; --gp-stage-ink: #191f28; --gp-stage-sub: #4e5968; max-width: 1200px; margin: 0 auto; font-family: var(--font-ui); color: var(--ink); }

/* 방문자에게는 위 메뉴를 본문(1200px)과 같은 세로선에 맞춘다(소개화면 intro-apdo.css 와 같은 값 — 소개 ↔ 사용법 영상 탭을 오갈 때 메뉴가 옆으로 움직이지 않게).
   로그인한 고객은 다른 화면(내 신청·신청내역…)과 같은 자리 그대로 둔다. */
@media (min-width: 761px) {
  body.public-visitor:has(.gp) .topnav { padding-inline: max(40px, calc((100% - 1200px) / 2)); }
}

.gp-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 28px; }
.gp-head h1 { font-size: clamp(29px, 3.6vw, 44px); font-weight: 800; line-height: 1.18; letter-spacing: -0.04em; }
.gp-count { color: var(--gray); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }

.gp-body { display: grid; grid-template-columns: minmax(0, 1fr) 380px; align-items: start; gap: 40px; }
.gp-player { position: sticky; top: calc(var(--gp-nav, 86px) + 24px); min-width: 0; }

/* ---- 무대 ---- */
.gp-pin { container-type: inline-size; }
.gp-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: 20px; background: var(--gp-stage); box-shadow: var(--shadow-hover); overflow: hidden; }
/* 두 단에서는 무대와 그 아래 제목이 창 높이 안에 들어오게 한다. */
@media (min-width: 861px) {
  .gp-stage { width: min(100%, calc((100dvh - var(--gp-nav, 86px) - 150px) * 16 / 9)); }
}
/* 영상 틀(.ag-frame)은 static/guide-embed.js 가 이 무대 안에 만든다(모양은 guide.css). 표지는 그 위에 놓인다. */
.gp-cover { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; width: 100%; margin: 0; padding: 24px; border: 0; background: radial-gradient(60% 72% at 50% 0%, rgba(49, 130, 246, 0.24), transparent 72%), var(--gp-stage); color: var(--gp-stage-ink); font: inherit; letter-spacing: inherit; text-align: center; cursor: pointer; }
.gp-cover:focus-visible { outline: 3px solid var(--blue); outline-offset: -8px; border-radius: 20px; }
.gp-cover-play { display: grid; place-items: center; width: clamp(60px, 9cqw, 88px); height: clamp(60px, 9cqw, 88px); border-radius: 50%; background: #3182f6; box-shadow: 0 18px 36px -14px rgba(49, 130, 246, 0.75); transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.16s ease; }
.gp-cover-play svg { width: 42%; height: 42%; margin-left: 5%; fill: #fff; }
.gp-cover:active .gp-cover-play { transform: scale(0.96); }
/* 누른 영상을 아직 그리는 중: 글자 없이 재생 단추 둘레가 돈다(대개 눈에 띄기 전에 끝난다) */
.gp-stage.is-busy::after { content: ''; position: absolute; left: 50%; top: 50%; z-index: 4; width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 3px solid rgba(49, 130, 246, 0.22); border-top-color: #3182f6; border-radius: 50%; opacity: 0; pointer-events: none; animation: ag-spin 0.8s linear infinite, ag-show 0s linear 0.45s forwards; }
.gp-cover.is-busy .gp-cover-play { position: relative; }
.gp-cover.is-busy .gp-cover-play::after { content: ''; position: absolute; inset: -9px; border: 3px solid rgba(49, 130, 246, 0.2); border-top-color: #3182f6; border-radius: 50%; opacity: 0; animation: ag-spin 0.8s linear infinite, ag-show 0s linear 0.3s forwards; }
.gp-cover-title { margin-top: clamp(14px, 2.6cqw, 24px); font-size: clamp(22px, 5cqw, 46px); font-weight: 800; line-height: 1.2; letter-spacing: -0.04em; text-wrap: balance; word-break: keep-all; }
.gp-cover-meta { margin-top: 8px; color: var(--gp-stage-sub); font-size: clamp(13.5px, 1.9cqw, 16px); font-weight: 600; font-variant-numeric: tabular-nums; }
.gp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.gp-error { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--red) 12%, var(--card)); color: var(--red); font-size: 14px; font-weight: 600; line-height: 1.5; }

.gp-now { margin-top: 20px; }
.gp .gp-now-title { font-size: 24px; font-weight: 800; line-height: 1.3; letter-spacing: -0.03em; word-break: keep-all; }
.gp-now-where { margin: 4px 0 0; color: var(--gray); font-size: 14.5px; font-weight: 500; }

/* ---- 목록 ---- */
.gp-list { display: grid; gap: 22px; min-width: 0; }
.gp .gp-group h2 { margin: 0 0 8px; padding-left: 12px; color: var(--gray); font-size: 13px; font-weight: 700; line-height: 1.5; letter-spacing: 0; }
.gp-group ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.gp-item { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 48px; padding: 8px 14px 8px 12px; border-radius: 12px; color: var(--ink); font-size: 15.5px; font-weight: 600; line-height: 1.4; text-decoration: none; transition: background-color 0.16s ease, color 0.16s ease; }
.gp-item:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.gp-item-mark { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--line); color: var(--gray); transition: background-color 0.16s ease, color 0.16s ease; }
.gp-item-mark svg { width: 10px; height: 10px; margin-left: 1px; fill: currentColor; }
.gp-item-title { min-width: 0; word-break: keep-all; }
.gp-item-length { color: var(--gray); font-size: 13.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.gp-item.is-current { background: var(--blue-soft); color: var(--blue-dark); font-weight: 700; }
.gp-item.is-current .gp-item-mark { background: var(--blue); color: #fff; }
.gp-item.is-current .gp-item-length { color: var(--blue-dark); }

@media (hover: hover) and (pointer: fine) {
  .gp-cover:hover .gp-cover-play { background: #1b64da; transform: scale(1.05); }
  .gp-cover:hover:active .gp-cover-play { transform: scale(0.96); }
  .gp-item:not(.is-current):hover { background: var(--card); }
}
@media (prefers-reduced-motion: reduce) {
  .gp-cover-play, .gp-item, .gp-item-mark { transition: none; }
}

/* ---- 중간 너비: 두 단을 유지하되 목록을 좁힌다 ---- */
@media (min-width: 861px) and (max-width: 1100px) {
  .gp-body { grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; }
}

/* ---- 한 단 ---- */
@media (max-width: 860px) {
  .gp-head { margin-bottom: 16px; }
  .gp-body { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .gp-player { display: contents; }
  /* 붙는 무대 뒤로 목록이 비치지 않게 바탕을 깔고, 본문 여백만큼 양옆으로 넓힌다(.customer-ui .wrap 의 여백: 761px 이상 40, 그 아래 20). */
  .gp-pin { margin-inline: -40px; padding: 8px 40px 12px; background: var(--bg); }
  .gp-now { margin: 4px 0 24px; }
  .gp .gp-now-title { font-size: 18px; }
}
@media (max-width: 760px) {
  .gp-pin { margin-inline: -20px; padding-inline: 20px; }
  .gp-stage { border-radius: 16px; }
  .gp-cover:focus-visible { border-radius: 16px; }
}
/* 세로 화면: 목록을 내려도 무대는 위 메뉴 아래에 붙어 있다. 포커스로 이동한 줄이 그 뒤에 가리지 않게 여백도 맞춘다. */
@media (max-width: 860px) and (orientation: portrait) {
  html:has(.gp) { scroll-padding-top: calc(var(--gp-nav-px, 62px) + 28px + (100vw - 40px) * 0.5625); }
  .gp-pin { position: sticky; top: var(--gp-nav, 62px); z-index: 5; }
}
/* 가로 화면: 붙이면 무대가 화면을 다 가리므로 붙이지 않고, 무대를 화면 높이에 맞춘다. */
@media (max-width: 860px) and (orientation: landscape) {
  .gp-stage { width: min(100%, calc((100dvh - var(--gp-nav, 62px) - 32px) * 16 / 9)); margin-inline: auto; }
}