/* Gaze Path 그림 · 재생기 — 앱 리포트와 홍보 사이트가 함께 싣는다(2026-10-01, style.css 에서 떼어 냄 · web/js/gazepath.js 짝).
   색 이름(--accent 등)은 앱의 값을 기본으로 둔다 — 사이트는 그 이름이 없어 기본값으로 그린다. 칸(.rp-gp-box) · 범례 · 인쇄는 각자의 CSS 에. */
/* 표준 글도 그림판(SVG) 안의 글자 — 가상 폭(viewBox)이라 화면 · 종이에서 글과 원이 함께 줄고 는다(gazepath.js _rpGpDraw) */
.rp-gp-svg { display: block; width: 100%; height: auto; overflow: visible; pointer-events: none; }
.rp-gp-t text { font-size: 15px; fill: #3d4466; }   /* 글자는 원 · 선 아래(원이 작고 옅어 비친다, 2026-10-05) */
.rp-gp-svg .is-pend { visibility: hidden; }
/* 「Simulated」 — 그림판 안 맨 위 띠 오른쪽(2026-10-10, 시뮬레이션이라는 것이 그림과 함께 인쇄 · 공유에 따라가게) */
.rp-gp-sim { fill: #8a93ab; font-weight: 700; letter-spacing: .06em; font-family: Inter, sans-serif; }
.rp-gp-cur { fill: #18213a; }
/* 원은 반투명 보라, 되돌아봄은 빨강(디자인 가이드 2026-10-02 — 전에는 청록) · 이음선은 앞으로(보라) · 되돌아봄(빨강, 화살촉) · 줄바꿈(흐리게) */
.rp-gp-c { fill: rgba(96, 18, 243, .22); stroke: rgba(96, 18, 243, .75); stroke-width: 1.2; }   /* 바탕은 옅게 · 테두리는 또렷하게(2026-10-05) */
.rp-gp-c.is-reg { fill: rgba(239, 83, 80, .28); stroke: rgba(239, 83, 80, .85); }
.rp-gp-a { stroke: var(--accent, #6012f3); stroke-width: 1.8; opacity: .8; }
.rp-gp-a.is-reg { stroke: #ef5350; }
.rp-gp-a.is-sweep { stroke-width: 1.2; opacity: .35; }
.rp-gp-ah { fill: var(--accent, #6012f3); }
.rp-gp-ah.is-reg { fill: #ef5350; }
/* 재생기 — 위치 막대 · 시간 한 줄, 그 아래 ⏮ ⏪ ▶ ⏩ 와 배속(있는 단추만) */
.rp-gp-ctl { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.rp-gp-bar { display: flex; align-items: center; gap: 10px; }
.rp-gp-seek { flex: 1; min-width: 0; accent-color: var(--accent, #6012f3); cursor: pointer; }
.rp-gp-time { font: 600 12px/1 Inter, sans-serif; color: var(--text-dim, rgba(24, 33, 58, .6)); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 조작 단추 — 모든 재생기 같은 모양(2026-10-05): 두 묶음 모두 붙은 막대(세그먼트) · 높이 34 · 모서리 10 · 칸 폭 같게 · 아이콘 16(gazepath.js GP_ICONS).
   재생 단추는 늘 보라(주 동작), 배속은 고른 칸만 보라. 화면별 CSS 에서 단추 크기를 덮어쓰지 않는다 */
.rp-gp-row { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.rp-gp-seg, .rp-gp-speeds { flex: none; display: inline-flex; height: 34px; border: 1px solid var(--border-mid, rgba(24, 33, 58, .16)); border-radius: 10px; overflow: hidden; background: var(--bg-elevated, #fff); }
.rp-gp-btn, .rp-gp-sp { height: 100%; min-width: 36px; padding: 0 8px; margin: 0; border: 0; border-radius: 0; background: transparent; color: var(--text-primary, #18213a);
  display: inline-flex; align-items: center; justify-content: center; font: 700 13px/1 Inter, sans-serif; cursor: pointer; }
.rp-gp-btn + .rp-gp-btn, .rp-gp-sp + .rp-gp-sp { border-left: 1px solid var(--border-soft, rgba(24, 33, 58, .1)); }
.rp-gp-btn .gp-ico { width: 16px; height: 16px; display: block; }
.rp-gp-btn:hover, .rp-gp-sp:hover { background: rgba(96, 18, 243, .08); }
.rp-gp-btn[data-gp="play"], .rp-gp-sp[aria-pressed="true"] { background: var(--accent, #6012f3); color: #fff; }
.rp-gp-btn[data-gp="play"]:hover, .rp-gp-sp[aria-pressed="true"]:hover { background: var(--accent, #6012f3); filter: brightness(1.08); }
.rp-gp-btn:focus-visible, .rp-gp-sp:focus-visible { outline: 3px solid var(--accent, #6012f3); outline-offset: -3px; }
/* 폰 — 두 묶음이 한 줄에 들도록(2026-10-05 사용자 「버튼이 커서 2줄로 나온다」): 칸 32 · 높이 32 · 묶음 사이 8 */
@media screen and (max-width: 400px) {
  .rp-gp-row { gap: 8px; }
  .rp-gp-seg, .rp-gp-speeds { height: 32px; }
  .rp-gp-btn, .rp-gp-sp { min-width: 32px; padding: 0 6px; font-size: 12px; }
}