/* PBC 트래커 실제 화면 장면 재생기 — 상품 소개와 사용설명서가 함께 쓴다.
   모든 규칙은 .pt-player / .pt-zoom 아래로만 건다(전역 리셋은 다른 화면을 깨뜨린다). */

.pt-player {
  --pp-ink: #142019;
  --pp-muted: #56645c;
  --pp-rule: #dde3da;
  --pp-desk: #eef2ec;
  --pp-ledger: #1b5640;
  --pp-ledger-soft: #e2eee6;
  --pp-client: #2a5ea8;
  --pp-client-soft: #e4ecf8;
  --pp-mark: #c0392b;

  margin: 0;
  min-width: 0;
  color: var(--pp-ink);
}

.pt-window {
  overflow: hidden;
  border: 1px solid var(--pp-rule);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(20, 32, 25, 0.04), 0 28px 48px -34px rgba(20, 50, 36, 0.55);
}

.pt-titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 14px;
  border-bottom: 1px solid var(--pp-rule);
  background: #f7f9f6;
  font-size: 0.78rem;
  color: var(--pp-muted);
}

.pt-lights {
  display: inline-flex;
  gap: 5px;
  flex: none;
}

.pt-lights i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d6ddd3;
}

.pt-role {
  flex: none;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.pt-role--auditor {
  background: var(--pp-ledger-soft);
  color: var(--pp-ledger);
}

.pt-role--client {
  background: var(--pp-client-soft);
  color: var(--pp-client);
}

.pt-wintitle {
  overflow: hidden;
  min-width: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: opacity 0.3s ease;
}

.pt-titlebar.is-swap .pt-wintitle {
  opacity: 0;
}

/* 무대: 옅은 장부 모눈 위에 화면 조각을 놓는다. 높이는 스크립트가 그 장면에서 가장 높은 그림에 맞춘다
   (--stage-h) — 비율을 미리 정하면 넓은 그림 위아래로 빈 모눈이 크게 남았다. */
.pt-stage {
  --pad-x: clamp(12px, 3.5%, 28px);
  --pad-y: 20px;
  position: relative;
  height: var(--stage-h, 420px);
  container-type: size;
  overflow: hidden;
  background:
    linear-gradient(rgba(27, 86, 64, 0.045) 1px, transparent 1px) 0 0 / 100% 22px,
    linear-gradient(90deg, rgba(27, 86, 64, 0.045) 1px, transparent 1px) 0 0 / 22px 100%,
    var(--pp-desk);
}

.pt-layer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.pt-layer.is-active {
  opacity: 1;
}

/* 스크립트가 없으면 첫 장면만 흐름 안에 둔다(높이가 그림을 따라간다). */
.pt-player:not(.is-ready) .pt-stage {
  height: auto;
  container-type: normal;
  padding: var(--pad-y) var(--pad-x);
}

.pt-player:not(.is-ready) .pt-layer {
  position: static;
  display: none;
}

.pt-player:not(.is-ready) .pt-layer.is-active {
  display: grid;
}

/* 잘라낸 화면은 무대 안쪽 폭 안에서 원래 크기를 넘지 않게 놓는다(키우면 흐려진다). */
.pt-shot {
  position: relative;
  width: min(calc(100cqw - 2 * var(--pad-x)), calc((100cqh - 2 * var(--pad-y)) * var(--r)), calc(var(--w) * 1px));
  aspect-ratio: var(--r);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(20, 50, 36, 0.12), 0 18px 32px -20px rgba(20, 50, 36, 0.5);
}

.pt-player:not(.is-ready) .pt-shot {
  width: min(100%, calc(var(--w) * 1px));
}

.pt-shot img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

.pt-shot--m {
  display: none;
}

/* 감사인이 붉은 연필로 동그라미 치듯: 붉은 선 + 흰 안쪽 선. 채움은 없다(화면 색을 바꾸지 않게). */
.pt-spot {
  position: absolute;
  border-radius: 5px;
  outline: 2.5px solid var(--pp-mark);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.92), 0 0 0 8px rgba(192, 57, 43, 0.16);
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}

.pt-spot.is-on,
.pt-player:not(.is-ready) .pt-layer.is-active .pt-spot {
  opacity: 1;
  transform: none;
}

.pt-spot.is-on {
  animation: pt-pulse 1.1s ease 0.35s 2;
}

@keyframes pt-pulse {
  50% {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.92), 0 0 0 13px rgba(192, 57, 43, 0.06);
  }
}

.pt-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 22px;
  height: 26px;
  opacity: 0;
  transform: translate(var(--x, 110cqw), var(--y, 110cqh));
  transition: transform 0.85s cubic-bezier(0.45, 0.05, 0.25, 1), opacity 0.3s ease;
  pointer-events: none;
}

.pt-cursor.is-on {
  opacity: 1;
}

.pt-cursor svg {
  display: block;
  width: 22px;
  height: 26px;
  fill: #fff;
  stroke: #10180f;
  stroke-width: 1.4;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
  transform-origin: 3px 2px;
  transition: transform 0.12s ease;
}

.pt-cursor.is-press svg {
  transform: scale(0.82);
}

.pt-ripple {
  position: absolute;
  left: -15px;
  top: -16px;
  width: 36px;
  height: 36px;
  border: 2px solid var(--pp-mark);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.pt-cursor.is-press .pt-ripple {
  animation: pt-ripple 0.7s ease-out;
}

@keyframes pt-ripple {
  from {
    opacity: 1;
    transform: scale(0.3);
  }

  to {
    opacity: 0;
    transform: scale(1.5);
  }
}

.pt-caption {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  margin-top: 12px;
  font-size: 0.93rem;
  line-height: 1.6;
}

.pt-count {
  min-width: 46px;
  margin-top: 1px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--pp-ledger-soft);
  color: var(--pp-ledger);
  font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
  font-size: 0.74rem;
  font-weight: 500;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.pt-text {
  min-height: 3.2em;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.pt-text.is-swap {
  opacity: 0;
  transform: translateY(6px);
}

.pt-controls {
  display: inline-flex;
  gap: 6px;
}

/* 스크립트가 붙기 전(또는 꺼진 상태)에는 동작하지 않는 단추를 보이지 않는다. */
.pt-player:not(.is-ready) .pt-controls {
  visibility: hidden;
}

.pt-ctl {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 9px;
  border: 1px solid var(--pp-rule);
  border-radius: 9px;
  background: #fff;
  color: var(--pp-ink);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.pt-ctl:hover {
  border-color: var(--pp-ledger);
  background: #f6faf7;
}

.pt-ctl:focus-visible {
  outline: 2px solid var(--pp-ledger);
  outline-offset: 2px;
}

.pt-ctl[data-pt-next] span {
  font-size: 1.25rem;
  line-height: 1;
}

.pt-ico-pause,
.pt-ico-play {
  display: block;
  width: 12px;
  height: 12px;
}

.pt-ico-pause {
  width: 11px;
  border-left: 3.5px solid currentColor;
  border-right: 3.5px solid currentColor;
}

.pt-ico-play {
  display: none;
  width: 0;
  height: 0;
  border-top: 6.5px solid transparent;
  border-bottom: 6.5px solid transparent;
  border-left: 11px solid currentColor;
}

.pt-player.is-paused .pt-ico-pause {
  display: none;
}

.pt-player.is-paused .pt-ico-play {
  display: block;
}

/* ── 크게 보기 ───────────────────────────────────── */
.pt-zoom {
  width: min(var(--zoom-w, 1460px), calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(10, 20, 15, 0.45);
}

.pt-zoom::backdrop {
  background: rgba(12, 24, 18, 0.62);
  backdrop-filter: blur(2px);
}

.pt-zoom-panel {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  max-height: calc(100vh - 32px);
}

.pt-zoom-scroll {
  overflow: auto;
  background: #eef2ec;
}

.pt-zoom-scroll img {
  display: block;
  width: 100%;
  height: auto;
}

/* 좁은 화면에서 데스크톱 화면을 크게 볼 때: 원래 CSS 폭 그대로 두고 옆으로 밀어서 본다. */
.pt-zoom.is-native .pt-zoom-scroll img {
  width: var(--zoom-img-w, auto);
  max-width: none;
}

.pt-zoom-caption {
  margin: 0;
  padding: 12px 56px 14px 18px;
  border-top: 1px solid #dde3da;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #142019;
}

.pt-zoom-close {
  position: absolute;
  right: 10px;
  bottom: 8px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 1px solid #dde3da;
  border-radius: 10px;
  background: #fff;
  color: #142019;
  font: inherit;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.pt-zoom-close:focus-visible {
  outline: 2px solid #1b5640;
  outline-offset: 2px;
}

/* ── 좁은 화면: 모바일 자르기가 있으면 그것으로, 무대 비율은 --m-hw ── */
@media (max-width: 720px) {
  .pt-stage {
    --pad-x: 10px;
    --pad-y: 14px;
  }

  .pt-layer.has-m .pt-shot--d {
    display: none;
  }

  .pt-layer.has-m .pt-shot--m {
    display: block;
  }

  .pt-caption {
    grid-template-columns: auto minmax(0, 1fr);
    font-size: 0.9rem;
  }

  .pt-controls {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .pt-text {
    min-height: 0;
  }

  .pt-titlebar {
    height: 34px;
    padding: 0 10px;
  }

  .pt-lights {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pt-layer,
  .pt-spot,
  .pt-cursor,
  .pt-text,
  .pt-wintitle {
    transition: none;
  }

  .pt-spot.is-on {
    animation: none;
  }
}