/* 휴대폰 목업(공용) — /audioguide 의 휴대폰 전부 + /freetts 「QR 음성 안내」 구역 (2026-10-02, audio-guide.css 에서 분리)
   · 틀: 보통 휴대폰 비율 9:19.5, 검은 테두리는 휴대폰 폭의 3%. 화면(.ag-screen)을 테두리 안쪽에 절대 위치로 놓고 그 간격을
     휴대폰 자신의 폭 단위(cqw)로 준다. 예전처럼 휴대폰에 padding % 를 주면 % 가 "부모 폭" 기준이라, 사진 위에 절대 위치로 얹은
     휴대폰은 사진 무대 폭을 따라 테두리가 27px(폭의 12%)까지 두꺼워졌다(2026-10-02 Mark 지적 — "두께가 말도 안 되게 이상해").
   · 화면 속 글자·간격도 전부 cqw(휴대폰 폭의 %)라 어느 폭에서도 같은 비율로 줄어든다.
   · 화면보다 긴 내용(관람객 화면 데모)은 휴대폰을 늘이지 않고 .agv-scroll 이 위로 "움직인다"(qr-phone.js) — 휴대폰은 늘 보통 크기.
   · 색은 실제 관람객 화면(views/include/qr_visitor_style.ejs)과 같은 값을 줄여 쓴다. 강조는 제품 인디고 하나. */

.ag-phone {
  position: relative; container-type: inline-size; width: 100%;
  aspect-ratio: 9 / 19.5; border-radius: 14.5% / 6.7%;
  background: #0b0c10;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 0 0 1.5px #2b2d33, 0 30px 60px -24px rgba(17, 18, 20, 0.45), 0 12px 24px -12px rgba(17, 18, 20, 0.3);
}
.ag-screen {
  --s-ink: #181a1f; --s-sub: #50535a; --s-cap: #686b73; --s-surface: #f4f4f6; --s-card: #fff; --s-line: rgba(112, 115, 124, 0.2);
  --s-brand: #4f37ff; --s-fill: #4f37ff; --s-band: #eeebff; --s-band-ink: #180e66; --s-bg: #fff; --s-track: #dcdde2;
  position: absolute; inset: 3cqw; overflow: hidden; border-radius: 11.5cqw;
  background: var(--s-bg); color: var(--s-ink); padding: 14.5cqw 5.4cqw 6cqw;
  font-size: 4cqw; line-height: 1.5; transition: background-color 0.5s ease, color 0.5s ease;
}
.ag-screen::before { /* 카메라 섬 */
  content: ""; position: absolute; z-index: 3; top: 2.6cqw; left: 50%; width: 29cqw; height: 8.4cqw;
  transform: translateX(-50%); border-radius: 999px; background: #0b0c10;
}
.ag-screen.is-dark {
  --s-ink: #f2f3f5; --s-sub: #b8bbc2; --s-cap: #9ea2ab; --s-surface: #1c1d21; --s-card: #1f2024; --s-line: rgba(160, 164, 176, 0.24);
  --s-brand: #8b7dff; --s-fill: #5b45ff; --s-band: rgba(139, 125, 255, 0.18); --s-band-ink: #ece9ff; --s-bg: #111214; --s-track: #3a3c43;
}
/* 내용이 화면보다 긴 휴대폰 — 안쪽(.agv-scroll)이 위로 움직인다. 위쪽 띠가 카메라 섬 둘레를 가려 지나가는 글자가 섬과 겹치지 않는다 */
.ag-screen.is-scroll { padding: 0; }
.ag-screen.is-scroll::after {
  content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 13cqw; pointer-events: none;
  background: linear-gradient(var(--s-bg) 72%, transparent);
}
.agv-scroll {
  position: relative; padding: 14.5cqw 5.4cqw 9cqw;
  transform: translate3d(0, 0, 0); transition: transform 0.9s cubic-bezier(.65, 0, .35, 1);
}

/* ── 관람객 화면 부품 ───────────────────────────────────────────── */
.ag-phone .qi { display: block; fill: currentColor; flex-shrink: 0; }
.agv-top { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; margin-bottom: 3.4cqw; }
.agv-kind { display: inline-flex; align-items: center; gap: 1.4cqw; font-size: 3.5cqw; font-weight: 700; color: var(--s-ink); }
.agv-kind .qi { color: var(--s-brand); width: 4.2cqw; height: 4.2cqw; }
.agv-lang { display: inline-flex; align-items: center; gap: 1cqw; padding: 1.2cqw 2.6cqw; border-radius: 999px; background: var(--s-surface); font-size: 3.2cqw; font-weight: 700; color: var(--s-ink); }
.agv-lang .qi { width: 3.6cqw; height: 3.6cqw; color: var(--s-brand); }
.agv-lang-on { background: var(--s-band); color: var(--s-band-ink); }
.agv-photo, .agv-photo-img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; border-radius: 4.4cqw; background: var(--s-surface) center / cover no-repeat; object-fit: cover; }
.agv-where { margin-top: 3.2cqw; font-size: 3.1cqw; font-weight: 700; color: var(--s-brand); }
.agv-title { margin-top: 2.4cqw; font-size: 5.6cqw; line-height: 1.25; font-weight: 750; letter-spacing: -0.02em; word-break: keep-all; color: var(--s-ink); }
.agv-title-lg { font-size: 6.4cqw; margin-top: 1cqw; }
.agv-meta { margin-top: 1.6cqw; display: flex; align-items: center; gap: 1.2cqw; font-size: 3.1cqw; font-weight: 600; color: var(--s-sub); }
.agv-meta .qi { width: 3.6cqw; height: 3.6cqw; }
.agv-player { margin-top: 3.4cqw; display: flex; align-items: center; gap: 3.2cqw; }
.agv-play {
  width: 11cqw; height: 11cqw; flex-shrink: 0; border: 0; border-radius: 999px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; background: var(--s-fill); color: #fff;
  box-shadow: 0 1.6cqw 4cqw rgba(79, 55, 255, 0.28);
}
.agv-play .qi { width: 55%; height: 55%; }
.agv-play-lg { width: 15cqw; height: 15cqw; cursor: pointer; }
.agv-play .qi-pause, .agv-play.is-playing .qi-play { display: none; }
.agv-play.is-playing .qi-pause { display: block; }
.agv-seekbox { flex: 1; min-width: 0; }
.agv-seek { position: relative; display: block; height: 1.4cqw; border-radius: 999px; background: var(--s-track); overflow: hidden; flex: 1; }
.agv-seek i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--s-brand); }
.agv-times { margin-top: 1.2cqw; display: flex; justify-content: space-between; font-size: 3cqw; font-weight: 600; color: var(--s-sub); font-variant-numeric: tabular-nums; }
.agv-card { margin-top: 4cqw; padding: 4cqw; border-radius: 5.4cqw; background: var(--s-surface); }
.agv-card .agv-player { margin-top: 0; }
.agv-tools { margin-top: 3.4cqw; display: flex; gap: 2cqw; }
.agv-tools button {
  flex: 1; min-height: 10.4cqw; padding: 0 1cqw; border: 1px solid var(--s-line); border-radius: 3cqw; background: var(--s-card);
  display: inline-flex; align-items: center; justify-content: center; gap: 1cqw; font: inherit; font-size: 3.2cqw; font-weight: 600; color: var(--s-ink); cursor: pointer; white-space: nowrap;
}
.agv-tools .qi { width: 4.2cqw; height: 4.2cqw; }
.agv-tools-sm { margin-top: 3cqw; }
.agv-tools-sm span { flex: 1; min-height: 9cqw; border: 1px solid var(--s-line); border-radius: 2.6cqw; display: inline-flex; align-items: center; justify-content: center; gap: 0.8cqw; font-size: 3cqw; font-weight: 600; color: var(--s-ink); }
.agv-next-sm { margin-top: 3cqw; padding: 2.4cqw; }
.agv-next-sm img { width: 10cqw; height: 10cqw; }
.agv-script { margin-top: 5cqw; }
.agv-script-head { display: flex; align-items: center; justify-content: space-between; font-size: 3.6cqw; color: var(--s-sub); }
.agv-script-head b { font-size: 4.4cqw; color: var(--s-ink); }
.agv-switch { position: relative; width: 9.6cqw; height: 5.8cqw; border-radius: 999px; background: var(--s-fill); }
.agv-switch::after { content: ""; position: absolute; top: 0.8cqw; right: 0.8cqw; width: 4.2cqw; height: 4.2cqw; border-radius: 50%; background: #fff; }
.agv-lines { margin-top: 2.6cqw; display: flex; flex-direction: column; gap: 0.6cqw; }
.agv-line {
  display: block; width: 100%; margin: 0; padding: 1.6cqw 2.2cqw; border: 0; border-radius: 2.8cqw; background: transparent; text-align: left;
  font: inherit; font-size: 4cqw; line-height: 1.6; color: var(--s-ink); word-break: keep-all; transition: background-color 0.35s, color 0.35s;
}
button.agv-line { cursor: pointer; }
.agv-line.is-past { color: var(--s-cap); }
.agv-line.is-now { background: var(--s-band); color: var(--s-band-ink); font-weight: 600; }
.agv-lines-lg .agv-line { font-size: 4.3cqw; }
.ag-screen.is-big .agv-lines-lg .agv-line { font-size: 5.2cqw; }
.ag-screen.is-bigger .agv-lines-lg .agv-line { font-size: 6cqw; }
.agv-next { margin-top: 4cqw; display: flex; align-items: center; gap: 3cqw; padding: 3cqw; border: 1px solid var(--s-line); border-radius: 4.6cqw; color: var(--s-ink); text-decoration: none; }
.agv-next img { width: 13cqw; height: 13cqw; border-radius: 2.8cqw; object-fit: cover; }
.agv-next span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.agv-next small { font-size: 3cqw; font-weight: 700; color: var(--s-brand); }
.agv-next b { font-size: 3.8cqw; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agv-next .qi { width: 4.6cqw; height: 4.6cqw; color: var(--s-cap); }
.agv-cta { margin-top: 2.6cqw; display: flex; align-items: center; justify-content: center; gap: 1.6cqw; min-height: 12cqw; border: 1px solid var(--s-line); border-radius: 4cqw; background: var(--s-card); font-size: 3.9cqw; font-weight: 650; color: var(--s-ink); }
.agv-cta .qi { width: 4cqw; height: 4cqw; }
.agv-cta-sm { margin-top: 2.4cqw; min-height: 10cqw; font-size: 3.4cqw; border-radius: 3.4cqw; }
.agv-playall { margin-top: 4cqw; display: flex; align-items: center; justify-content: center; gap: 1.4cqw; min-height: 12.4cqw; border-radius: 4cqw; background: var(--s-fill); color: #fff; font-size: 4.2cqw; font-weight: 700; }
.agv-playall .qi { width: 5cqw; height: 5cqw; }
.agv-list { list-style: none; margin: 4.4cqw 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.8cqw; }
.agv-row { display: flex; align-items: center; gap: 3cqw; padding: 2cqw; border-radius: 4cqw; transition: background-color 0.35s; }
.agv-row img { width: 14cqw; height: 14cqw; border-radius: 3cqw; object-fit: cover; flex-shrink: 0; }
.agv-row > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.agv-row small { font-size: 3cqw; font-weight: 600; color: var(--s-cap); font-variant-numeric: tabular-nums; }
.agv-row b { font-size: 3.9cqw; line-height: 1.35; font-weight: 650; word-break: keep-all; }
.agv-played { display: none; font-style: normal; color: var(--s-brand); }
.agv-row.is-done .agv-played { display: inline; }
.agv-rowplay { width: 9.4cqw; height: 9.4cqw; flex-shrink: 0; border-radius: 999px; border: 1px solid var(--s-line); display: inline-flex; align-items: center; justify-content: center; color: var(--s-brand); }
.agv-rowplay .qi { width: 4.4cqw; height: 4.4cqw; }
.agv-row.is-on { background: #f3f1ff; }
.agv-row.is-on .agv-rowplay { background: var(--s-fill); border-color: var(--s-fill); color: #fff; }
.agv-mini {
  position: absolute; left: 4cqw; right: 4cqw; bottom: 4cqw; display: flex; align-items: center; gap: 2.6cqw; padding: 2.4cqw 2.6cqw 3cqw;
  border-radius: 5cqw; background: #181a1f; color: #fff; overflow: hidden;
}
.agv-mini img { width: 10cqw; height: 10cqw; border-radius: 2.4cqw; object-fit: cover; }
.agv-mini > span:not(.agv-minibar) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.agv-mini b { font-size: 3.6cqw; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agv-mini small { font-size: 2.8cqw; color: rgba(255, 255, 255, 0.66); font-variant-numeric: tabular-nums; }
.agv-miniplay { width: 9cqw; height: 9cqw; border-radius: 999px; background: #fff; color: #181a1f; display: inline-flex; align-items: center; justify-content: center; }
.agv-miniplay .qi { width: 4.4cqw; height: 4.4cqw; }
.agv-minibar { position: absolute; left: 0; right: 0; bottom: 0; height: 0.8cqw; }
.agv-minibar i { display: block; height: 100%; width: 0; background: #8d7cff; }

/* 페이지 쪽 설명(기능 목록)을 누르거나 둘러보기가 그 부분에 오면 휴대폰 속 그 자리를 짚는다 */
.ag-phone [data-vd-target] { transition: box-shadow 0.3s ease; }
.ag-phone .is-point { box-shadow: 0 0 0 0.8cqw rgba(79, 55, 255, 0.55); }

/* 휴대폰 바깥의 듣기 단추 — 화면 속 재생 단추가 위로 지나가도(자막을 따라 움직일 때) 언제든 멈추고 켤 수 있게 */
.qp-listen {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 18px 6px 6px; border: 0; border-radius: 999px;
  background: #181a1f; color: #fff; font: inherit; text-align: left; cursor: pointer; box-shadow: 0 10px 24px -14px rgba(17, 18, 20, 0.6);
}
.qp-listen-ico { width: 36px; height: 36px; border-radius: 999px; background: #4f37ff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.qp-listen-ico .qi { width: 20px; height: 20px; fill: currentColor; }
.qp-listen .qi-pause, .qp-listen.is-playing .qi-play { display: none; }
.qp-listen.is-playing .qi-pause { display: block; }
.qp-listen-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qp-listen-txt b { font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.qp-listen-txt small { font-size: 12.5px; line-height: 1.3; color: rgba(255, 255, 255, 0.7); font-variant-numeric: tabular-nums; }
.qp-listen .is-playing-label, .qp-listen.is-playing .is-idle-label { display: none; }
.qp-listen.is-playing .is-playing-label { display: inline; }
.qp-listen:focus-visible { outline: 3px solid #4f37ff; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .ag-phone *, .ag-phone *::before, .ag-phone *::after { transition: none !important; animation: none !important; }
}