/* QR 오디오 가이드 소개(/audioguide) — views/preview_audioguide.ejs 전용 (2026-10-01)
   은유: 미술관 벽 — 흰 벽·작품 옆 QR 판·관람객 휴대폰. 휴대폰 안 화면은 실제 관람객 화면(include/qr_visitor_style.ejs)과 같은 색·배치를 줄여 그린다.
   글꼴은 사이트 공용 Pretendard 하나. 강조는 제품의 인디고 하나(#4F37FF) — 지금 읽는 문장 띠·버튼·QR 스캔 표시에만.
   움직임은 public/preview/assets/audio-guide.js 가 data-step·is-* 클래스로 켠다(화면 밖·동작 줄이기면 멈춤). 휴대폰 안 크기는 컨테이너 단위(cqw)라
   어느 폭에서도 같은 비율로 줄어든다. */

.ag-body { background: #fff; }
.ag {
  --ag-ink: #181a1f;
  --ag-sub: #50535a;
  --ag-cap: #686b73;
  --ag-line: rgba(112, 115, 124, 0.18);
  --ag-line-2: rgba(112, 115, 124, 0.3);
  --ag-gallery: #f4f4f6;
  --ag-soft: #f7f7f8;
  --ag-brand: #4f37ff;
  --ag-brand-2: #4128f0;
  --ag-band: #eeebff;
  --ag-band-ink: #180e66;
  --ag-night: #111214;
  color: var(--ag-ink);
  font-family: var(--font-sans, "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif);
  overflow-x: clip;
}
.ag :focus-visible { outline: 3px solid var(--ag-brand); outline-offset: 3px; border-radius: 6px; }
.ag .sr-only, .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ag-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.ag-sec { padding: 112px 0; }
.ag-head { max-width: 700px; margin-bottom: 48px; }
.ag-h1 {
  font-size: clamp(36px, 4.4vw, 62px); line-height: 1.12; font-weight: 800; letter-spacing: -0.035em;
  word-break: keep-all; color: var(--ag-ink);
}
.ag-h2 {
  font-size: clamp(28px, 3.1vw, 44px); line-height: 1.22; font-weight: 760; letter-spacing: -0.03em;
  word-break: keep-all; color: var(--ag-ink);
}
.ag-lead { margin-top: 16px; font-size: 18px; line-height: 1.7; color: var(--ag-sub); word-break: keep-all; max-width: 640px; }
.ag-cap { margin-top: 20px; font-size: 14px; line-height: 1.6; color: var(--ag-cap); word-break: keep-all; }
/* 소제목 이름표(구역 이름) — 검색어("오디오 가이드 만들기"·"AI 도슨트 해설"·"다국어 오디오 가이드"…)를 소제목 안에 담는 작은 이름표.
   제목 글은 그대로 두고 이름표만 위에 얹는다 — 읽기 프로그램은 "이름표: 제목"으로 읽는다(.sr-only 쌍점) */
.ag-kicker { display: block; margin-bottom: 12px; font-size: 15px; line-height: 1.4; font-weight: 750; letter-spacing: -0.005em; color: var(--ag-brand); }
.ag-look .ag-kicker { color: #a99cff; }
.ag-eyebrow { margin-bottom: 16px; font-size: 15px; line-height: 1.4; font-weight: 750; letter-spacing: -0.005em; color: var(--ag-brand); }
.ag-updated { margin-top: 20px; font-size: 13px; line-height: 1.6; color: var(--ag-cap); word-break: keep-all; }
.ag img { max-width: 100%; }
.ag .qi { display: block; fill: currentColor; flex-shrink: 0; }
.ag figure { margin: 0; }

/* 휴대폰 틀·관람객 화면 부품은 공용 qr-phone.css(/freetts QR 구역과 같이 씀). 여기는 이 페이지 휴대폰의 자리·크기만 */
/* 휴대폰 속 작품 사진은 작품만 — 장면 사진을 확대해 쓰면 그 사진 속 관람객이 화면에 들어간다(작품만 잘라 둔 파일) */
.agv-photo-ink { background-image: url("/img/audioguide/ag-hero-art-512.webp"); background-position: center; background-size: cover; }
.agv-photo-media { background-image: url("/img/audioguide/ag-dark-art-630.webp"); background-position: center; background-size: cover; }

/* ── ① 첫 화면 ───────────────────────────────────────────────── */
.ag-hero {
  display: grid; grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr); align-items: center; gap: 0;
  padding: 56px 0 72px; max-width: 1560px; margin: 0 auto;
}
.ag-hero-copy { padding: 24px 56px 24px max(24px, calc((100vw - 1200px) / 2 + 24px)); }
@media (min-width: 1560px) { .ag-hero-copy { padding-left: 204px; } }
.ag-hero-lead { margin-top: 22px; font-size: 19px; line-height: 1.72; color: var(--ag-sub); word-break: keep-all; max-width: 540px; }
.ag-hero-cta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 10px; }
.ag-hero-cta .btn { white-space: nowrap; }
.ag-hero-facts { list-style: none; margin: 40px 0 0; padding: 22px 0 0; border-top: 1px solid var(--ag-line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ag-hero-facts li { display: flex; flex-direction: column; gap: 4px; }
.ag-hero-facts b { font-size: 15px; font-weight: 750; letter-spacing: -0.01em; }
.ag-hero-facts span { font-size: 13.5px; line-height: 1.5; color: var(--ag-cap); word-break: keep-all; }
.ag-hero-stage { position: relative; }
.ag-hero-photo { position: relative; aspect-ratio: 3 / 2; border-radius: 28px 0 0 28px; overflow: hidden; background: var(--ag-gallery); }
.ag-hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 사진 속 QR 판 위치(원본 1536×1024 기준 823~873 × 395~456) — 카메라가 QR을 잡는 표시 */
.ag-reticle { position: absolute; left: 52.6%; top: 36.4%; width: 5.4%; aspect-ratio: 1; opacity: 0; transform: scale(1.35); transition: opacity 0.35s ease, transform 0.5s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.ag-reticle i { position: absolute; width: 34%; height: 34%; border: 3px solid #fff; filter: drop-shadow(0 0 6px rgba(79, 55, 255, 0.85)); }
.ag-reticle i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
.ag-reticle i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 6px; }
.ag-reticle i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 6px; }
.ag-reticle i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 6px; }
.ag-hero-stage[data-step="scan"] .ag-reticle { opacity: 1; transform: scale(1); }
.ag-hero-phone { position: absolute; right: 7%; top: 4.5%; width: 26%; transition: opacity 0.6s ease, transform 0.8s cubic-bezier(.2, .8, .2, 1); }
.ag-js .ag-hero-stage[data-step="idle"] .ag-hero-phone,
.ag-js .ag-hero-stage[data-step="scan"] .ag-hero-phone { opacity: 0; transform: translateY(8%) scale(0.96); }
.ag-hero-phone .agv-lines { transition: opacity 0.3s ease; }
.ag-hero-phone .agv-lines.is-swap, .ag-hero-phone .agv-title.is-swap { opacity: 0; }
.ag-hero-phone .agv-title { transition: opacity 0.3s ease; }
.ag-hero-phone .agv-lang { transition: background-color 0.3s, color 0.3s; }
.ag-hero-phone .agv-lang.is-flash { background: var(--s-band); color: var(--s-band-ink); }

/* ── ② 고민 → 이렇게 바뀝니다 ─────────────────────────────────── */
.ag-problems { background: var(--ag-soft); }
.ag-problems-grid { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: 64px; align-items: start; }
.ag-problems-photo { position: sticky; top: 96px; }
.ag-problems-photo img { display: block; width: 100%; aspect-ratio: 7 / 8; object-fit: cover; border-radius: 22px; }
.ag-problems-photo figcaption { margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--ag-cap); word-break: keep-all; }
.ag-ledger { margin-top: 36px; }
.ag-ledger-head, .ag-ledger-row { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.25fr) 128px; gap: 24px; }
.ag-ledger-head { padding: 0 0 12px; border-bottom: 1px solid var(--ag-line-2); font-size: 13.5px; font-weight: 700; color: var(--ag-cap); }
.ag-ledger-row { padding: 24px 0; border-bottom: 1px solid var(--ag-line); }
.ag-ledger-pain { font-size: 18px; line-height: 1.5; font-weight: 700; letter-spacing: -0.015em; word-break: keep-all; color: var(--ag-ink); }
.ag-ledger-fix { font-size: 16px; line-height: 1.65; color: var(--ag-sub); word-break: keep-all; }
.ag-ledger-cost { font-size: 15px; font-weight: 750; color: var(--ag-brand); word-break: keep-all; }

/* ── ③ 만드는 순서 ───────────────────────────────────────────── */
.ag-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; counter-reset: none; }
.ag-step h3 { margin-top: 22px; display: flex; align-items: baseline; gap: 10px; font-size: 20px; line-height: 1.4; font-weight: 750; letter-spacing: -0.02em; word-break: keep-all; }
.ag-step p { margin-top: 10px; font-size: 16px; line-height: 1.7; color: var(--ag-sub); word-break: keep-all; }
.ag-step-n { flex-shrink: 0; width: 30px; height: 30px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: #fff; background: var(--ag-ink); transform: translateY(-2px); transition: background-color 0.3s; }
.ag-step.is-on .ag-step-n { background: var(--ag-brand); }
.ag-step-art { position: relative; height: 220px; border-radius: 22px; background: var(--ag-gallery); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.ag-editor { width: 82%; padding: 16px; border-radius: 14px; background: #fff; box-shadow: 0 10px 30px -18px rgba(17, 18, 20, 0.35); }
.ag-editor-bar { display: flex; }
.ag-voicechip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--ag-band); color: var(--ag-band-ink); font-size: 12px; font-weight: 700; }
.ag-voicechip .qi { width: 14px; height: 14px; }
.ag-editor-text { margin-top: 12px; min-height: 48px; font-size: 14px; line-height: 1.7; color: var(--ag-ink); word-break: keep-all; }
.ag-editor-text::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -2px; background: var(--ag-brand); animation: ag-caret 1s steps(1) infinite; }
@keyframes ag-caret { 50% { opacity: 0; } }
.ag-wave { margin-top: 10px; height: 34px; display: flex; align-items: center; gap: 3px; }
.ag-wave i { flex: 1; height: var(--h); border-radius: 2px; background: var(--ag-brand); transform: scaleY(0.08); opacity: 0.35; transform-origin: center; transition: transform 0.4s cubic-bezier(.2, .8, .2, 1), opacity 0.4s; }
.ag-step.is-wave .ag-wave i { transform: scaleY(1); opacity: 1; }
.ag-step.is-wave .ag-wave i:nth-child(odd) { transition-delay: 0.05s; }
.ag-step.is-wave .ag-wave i:nth-child(3n) { transition-delay: 0.12s; }
.ag-qrcard { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 22px; border-radius: 16px; background: #fff; box-shadow: 0 10px 30px -18px rgba(17, 18, 20, 0.35); }
.ag-qrcode { width: 116px; height: 116px; padding: 6px; background: #fff; clip-path: inset(0 0 0 0); transition: clip-path 1.2s steps(14, end); }
.ag-qrcode svg, .ag-label-qr svg { display: block; width: 100%; height: 100%; }
.ag-js .ag-step[data-step="2"]:not(.is-qr) .ag-qrcode { clip-path: inset(0 0 100% 0); }
.ag-qrbtn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 9px; background: var(--ag-brand); color: #fff; font-size: 12px; font-weight: 700; }
.ag-qrbtn .qi { width: 14px; height: 14px; }
.ag-step.is-qr .ag-qrbtn { animation: ag-press 0.6s ease 0.9s 1; }
@keyframes ag-press { 40% { transform: scale(0.94); } }
.ag-wall { position: absolute; inset: 0; background: linear-gradient(#fafafa, #f1f1f3); }
.ag-label { position: absolute; left: 22%; top: 30%; display: flex; gap: 10px; padding: 12px; border-radius: 6px; background: #fff; box-shadow: 0 2px 6px rgba(17, 18, 20, 0.12); }
.ag-label-qr { display: inline-block; width: 46px; height: 46px; flex-shrink: 0; }
.ag-label-lines { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.ag-label-lines i { display: block; width: 58px; height: 5px; border-radius: 3px; background: #c2c4c8; }
.ag-label-lines i:nth-child(2) { width: 44px; }
.ag-label-lines i:nth-child(3) { width: 32px; }
.ag-minphone { position: absolute; right: 18%; bottom: -30%; width: 64px; height: 120px; border-radius: 14px; background: #0d0e12; padding: 5px; transition: transform 0.9s cubic-bezier(.2, .8, .2, 1); }
.ag-minphone::before { content: ""; position: absolute; inset: 5px; border-radius: 10px; background: #fff; }
.ag-step.is-scan .ag-minphone { transform: translate(-58px, -128px) rotate(-6deg); }
.ag-minphone-wave { position: absolute; left: 12px; right: 12px; top: 48px; display: flex; align-items: center; gap: 3px; height: 22px; }
.ag-minphone-wave i { flex: 1; height: 30%; border-radius: 2px; background: var(--ag-brand); }
.ag-step.is-play .ag-minphone-wave i { animation: ag-eq 0.9s ease-in-out infinite; }
.ag-step.is-play .ag-minphone-wave i:nth-child(2) { animation-delay: -0.3s; }
.ag-step.is-play .ag-minphone-wave i:nth-child(3) { animation-delay: -0.6s; }
.ag-step.is-play .ag-minphone-wave i:nth-child(4) { animation-delay: -0.15s; }
.ag-step.is-play .ag-minphone-wave i:nth-child(5) { animation-delay: -0.45s; }
@keyframes ag-eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }
.ag-step.is-scan .ag-label { box-shadow: 0 0 0 3px rgba(79, 55, 255, 0.55), 0 2px 6px rgba(17, 18, 20, 0.12); transition: box-shadow 0.3s; }

/* ── ④ 관람객 화면 ───────────────────────────────────────────── */
.ag-visitor { background: var(--ag-gallery); }
.ag-visitor-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 96px; align-items: center; }
/* 휴대폰은 보통 크기 — 긴 화면은 안쪽이 움직인다(qr-phone.js 둘러보기: 위 → 재생 칸 → 따라 읽기 → 다음 안내) */
.ag-visitor-phone { max-width: 340px; width: 100%; }
.ag-visitor-listen { margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ag-visitor-note { margin-top: 0; text-align: center; }
.ag-feats { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.ag-feat {
  width: 100%; display: flex; flex-direction: column; gap: 4px; padding: 18px 0 18px 18px; border: 0; border-bottom: 1px solid var(--ag-line);
  background: transparent; text-align: left; cursor: pointer; position: relative; font: inherit; color: inherit;
}
.ag-feat::before { content: ""; position: absolute; left: 0; top: 22px; width: 4px; height: calc(100% - 44px); min-height: 18px; border-radius: 2px; background: var(--ag-line-2); transition: background-color 0.25s; }
.ag-feat b { font-size: 17px; font-weight: 750; letter-spacing: -0.015em; }
.ag-feat span { font-size: 15px; line-height: 1.6; color: var(--ag-sub); word-break: keep-all; }
.ag-feat:hover::before, .ag-feat.is-on::before { background: var(--ag-brand); }
.ag-feat.is-on b { color: var(--ag-brand); }
.ag-plain { margin-top: 28px; display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.6; color: var(--ag-sub); word-break: keep-all; }
.ag-plain .qi { margin-top: 2px; color: var(--ag-brand); flex-shrink: 0; }

/* ── ⑤ 다국어 ───────────────────────────────────────────────── */
.ag-langs-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.ag-langs-top .ag-head { margin-bottom: 0; }
.ag-langs-photo img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 22px; }
.ag-quad { margin-top: 56px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.ag-phone-sm .agv-line { font-size: 4.2cqw; }
.ag-langs-bottom { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 56px; align-items: start; }
.ag-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; }
.ag-points-1 { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 28px; }
.ag-points li { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; border-top: 2px solid var(--ag-ink); }
.ag-points-1 li { padding: 16px 0; border-top: 1px solid var(--ag-line); }
.ag-points-1 li:last-child { border-bottom: 1px solid var(--ag-line); }
.ag-points b { font-size: 17px; font-weight: 750; letter-spacing: -0.015em; word-break: keep-all; }
.ag-points span { font-size: 15px; line-height: 1.65; color: var(--ag-sub); word-break: keep-all; }
.ag-dialog { padding: 22px; border-radius: 20px; background: #fff; border: 1px solid var(--ag-line); box-shadow: 0 24px 48px -32px rgba(17, 18, 20, 0.4); }
.ag-dialog-title { font-size: 16px; font-weight: 750; }
.ag-dialog-langs { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ag-chk { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--ag-line-2); font-size: 14px; font-weight: 650; transition: border-color 0.25s, background-color 0.25s; }
.ag-chk i { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--ag-line-2); position: relative; transition: background-color 0.25s, border-color 0.25s; }
.ag-chk.is-on { border-color: var(--ag-brand); background: var(--ag-band); }
.ag-chk.is-on i { background: var(--ag-brand); border-color: var(--ag-brand); }
.ag-chk.is-on i::after { content: ""; position: absolute; left: 4.5px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ag-dialog-voice { margin-top: 14px; display: flex; align-items: baseline; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--ag-gallery); font-size: 13px; color: var(--ag-cap); }
.ag-dialog-voice b { font-size: 15px; color: var(--ag-ink); }
.ag-dialog-run { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.ag-dialog-bar { display: block; height: 6px; border-radius: 999px; background: var(--ag-gallery); overflow: hidden; }
.ag-dialog-bar i { display: block; height: 100%; width: 0; background: var(--ag-brand); transition: width 1.6s linear; }
.ag-dialog-btn { align-self: flex-end; padding: 10px 16px; border-radius: 10px; background: var(--ag-brand); color: #fff; font-size: 14px; font-weight: 700; transition: transform 0.15s; }
.ag-dialog-btn.is-press { transform: scale(0.95); }
.ag-dialog-done { margin-top: 12px; display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: #0a7b47; opacity: 0; transition: opacity 0.3s; }
.ag-dialog-done.is-on { opacity: 1; }

/* ── ⑥ 안내 페이지 ───────────────────────────────────────────── */
.ag-page { background: var(--ag-soft); }
.ag-page-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 96px; align-items: center; }
.ag-page-phone { max-width: 360px; justify-self: center; width: 100%; }

/* ── ⑦ 전시 교체 ─────────────────────────────────────────────── */
.ag-change-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 64px; align-items: center; }
.ag-change-photo img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 22px; }
.ag-swap { margin-top: 28px; display: flex; align-items: center; gap: 0; padding: 18px; border-radius: 18px; background: var(--ag-gallery); }
.ag-swap-qr { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; border-radius: 8px; background: #fff; box-shadow: 0 2px 6px rgba(17, 18, 20, 0.1); }
.ag-swap-qr small { font-size: 11.5px; font-weight: 650; color: var(--ag-cap); white-space: nowrap; }
.ag-swap-link { flex: 0 0 34px; height: 2px; background: repeating-linear-gradient(90deg, var(--ag-brand) 0 6px, transparent 6px 10px); }
.ag-swap-cards { position: relative; flex: 1; min-width: 0; height: 74px; perspective: 600px; }
.ag-swap-card { position: absolute; inset: 0; display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; background: #fff; box-shadow: 0 8px 20px -14px rgba(17, 18, 20, 0.4); backface-visibility: hidden; transition: transform 0.7s cubic-bezier(.2, .8, .2, 1), opacity 0.7s; }
.ag-swap-card img { width: 54px; height: 54px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.ag-swap-card span { min-width: 0; display: flex; flex-direction: column; }
.ag-swap-card small { font-size: 12px; font-weight: 700; color: var(--ag-brand); }
.ag-swap-card b { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-swap-card.is-b { transform: rotateX(-90deg); opacity: 0; }
.ag-swap-cards.is-b .ag-swap-card.is-a { transform: rotateX(90deg); opacity: 0; }
.ag-swap-cards.is-b .ag-swap-card.is-b { transform: none; opacity: 1; }

/* ── ⑧ 어두운 화면·꾸미기 ─────────────────────────────────────── */
.ag-look { background: var(--ag-night); color: #f2f3f5; }
.ag-look .ag-h2 { color: #f2f3f5; }
.ag-look .ag-lead { color: #b8bbc2; }
.ag-look-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
.ag-points-dark li { border-color: rgba(160, 164, 176, 0.24) !important; }
.ag-points-dark b { color: #f2f3f5; }
.ag-points-dark span { color: #b8bbc2; }
.ag-samples { margin-top: 28px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.ag-samples img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; opacity: 0.92; }
.ag-look-stage { position: relative; padding-bottom: 14%; }
.ag-look-photo img { display: block; width: 100%; aspect-ratio: 1286 / 1024; object-fit: cover; border-radius: 22px; opacity: 0.9; }
.ag-look-phone { position: absolute; right: 6%; bottom: 0; width: 29%; }
.ag-look-controls { position: absolute; left: 5%; bottom: 7%; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 999px; background: rgba(17, 18, 20, 0.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ag-toggle { position: relative; width: 44px; height: 26px; border-radius: 999px; background: #4a4d55; transition: background-color 0.3s; }
.ag-toggle i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left 0.3s; }
.ag-toggle.is-on { background: var(--ag-brand); }
.ag-toggle.is-on i { left: 21px; }
.ag-toggle-label { font-size: 14px; font-weight: 700; color: #f2f3f5; }

/* ── ⑨ 운영 ─────────────────────────────────────────────────── */
.ag-run-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.ag-stats { padding: 28px; border-radius: 22px; background: var(--ag-gallery); }
.ag-stats-title { font-size: 15px; font-weight: 750; margin-bottom: 18px; }
.ag-bar { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 44px; align-items: center; gap: 12px; padding: 9px 0; }
.ag-bar-name { font-size: 14px; font-weight: 600; color: var(--ag-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-bar-track { height: 10px; border-radius: 999px; background: #e2e3e6; overflow: hidden; }
.ag-bar-track i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--ag-brand); transition: width 1.1s cubic-bezier(.2, .8, .2, 1); }
.ag-js .ag-stats:not(.is-in) .ag-bar-track i { width: 0; }
.ag-bar b { font-size: 14px; font-weight: 750; text-align: right; font-variant-numeric: tabular-nums; }

/* ── ⑩ 쓰이는 곳 ─────────────────────────────────────────────── */
.ag-venues { background: var(--ag-soft); }
.ag-venue-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 22px; }
.ag-venue { display: flex; flex-direction: column; gap: 6px; }
.ag-venue img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; margin-bottom: 8px; }
.ag-venue b { font-size: 17px; font-weight: 750; letter-spacing: -0.015em; }
.ag-venue span { font-size: 14.5px; line-height: 1.6; color: var(--ag-sub); word-break: keep-all; }

/* ── ⑪ 비교 · ⑫ 요금 표 ──────────────────────────────────────── */
.ag-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ag-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15.5px; }
.ag-table th, .ag-table td { padding: 18px 16px; text-align: left; border-bottom: 1px solid var(--ag-line); vertical-align: top; word-break: keep-all; line-height: 1.55; }
.ag-table thead th { font-size: 14px; font-weight: 750; color: var(--ag-cap); border-bottom: 1px solid var(--ag-line-2); }
.ag-table tbody th { font-weight: 700; color: var(--ag-ink); width: 18%; }
.ag-table td { color: var(--ag-sub); }
.ag-table .is-us { background: #f3f1ff; color: var(--ag-ink); font-weight: 700; }
.ag-table thead .is-us { color: var(--ag-brand); border-radius: 12px 12px 0 0; }
.ag-price-table tbody th { font-size: 16px; letter-spacing: 0.01em; }
.ag-num { font-variant-numeric: tabular-nums; color: var(--ag-ink) !important; font-weight: 650; }
.ag-num small { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--ag-cap); }
.ag-pricing-cta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 10px; }

/* ── ⑬ 질문 ─────────────────────────────────────────────────── */
.ag-faq { background: var(--ag-soft); }
.ag-faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.ag-faq-grid .btn { margin-top: 24px; }
.ag-qa { border-bottom: 1px solid var(--ag-line); }
.ag-qa summary { list-style: none; cursor: pointer; padding: 20px 36px 20px 0; position: relative; font-size: 17px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.5; word-break: keep-all; }
.ag-qa summary::-webkit-details-marker { display: none; }
.ag-qa summary::after { content: ""; position: absolute; right: 6px; top: 28px; width: 10px; height: 10px; border-right: 2px solid var(--ag-cap); border-bottom: 2px solid var(--ag-cap); transform: rotate(45deg); transition: transform 0.2s; }
.ag-qa[open] summary::after { transform: translateY(4px) rotate(225deg); }
.ag-qa p { padding: 0 0 22px; font-size: 16px; line-height: 1.75; color: var(--ag-sub); word-break: keep-all; }

/* ── ⑭ 마무리 ───────────────────────────────────────────────── */
.ag-end-in { text-align: center; display: flex; flex-direction: column; align-items: center; }
.ag-end-in .ag-lead { margin-left: auto; margin-right: auto; }
.ag-end-in .ag-hero-cta { justify-content: center; }
.ag-cross { margin-top: 28px; font-size: 15px; color: var(--ag-cap); }
.ag-cross a { color: var(--ag-brand); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ── 반응형 ─────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .ag-sec { padding: 88px 0; }
  .ag-hero { grid-template-columns: minmax(0, 1fr); padding-top: 32px; }
  .ag-hero-copy { padding: 0 24px 32px; }
  .ag-hero-photo { border-radius: 0; }
  .ag-hero-stage { margin-bottom: 30vw; } /* 휴대폰이 사진 아래로 0.27×폭 내려온다 */
  .ag-hero-phone { width: 34%; top: 30%; right: 6%; }
  .ag-problems-grid, .ag-langs-top, .ag-langs-bottom, .ag-page-grid, .ag-change-grid, .ag-look-grid, .ag-run-grid, .ag-faq-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ag-problems-photo { position: static; }
  .ag-problems-photo img { aspect-ratio: 16 / 10; }
  .ag-visitor-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .ag-visitor-phone { justify-self: center; width: min(340px, 100%); }
  .ag-quad { grid-template-columns: repeat(4, minmax(220px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; }
  .ag-quad > .ag-phone { scroll-snap-align: start; }
  .ag-venue-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ag-page-phone { max-width: 340px; }
}
@media (max-width: 720px) {
  .ag-sec { padding: 72px 0; }
  .ag-wrap { padding: 0 16px; }
  .ag-hero-copy { padding: 0 16px 28px; }
  .ag-hero-lead { font-size: 17px; }
  .ag-hero-cta .btn { flex: 1 1 100%; }
  .ag-hero-facts { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ag-hero-facts li { flex-direction: row; align-items: baseline; gap: 10px; }
  .ag-hero-stage { margin-bottom: 52vw; } /* 0.51×폭 */
  .ag-hero-phone { width: 44%; top: 34%; }
  .ag-reticle i { border-width: 2px; }
  .ag-ledger-head { display: none; }
  .ag-ledger-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 20px 0; }
  .ag-ledger-pain { font-size: 17px; }
  .ag-steps { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ag-feats { grid-template-columns: minmax(0, 1fr); }
  .ag-points { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ag-quad { grid-template-columns: repeat(4, minmax(64vw, 1fr)); margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
  .ag-visitor-phone { width: min(300px, 100%); }
  .ag-look-stage { padding-bottom: 34%; }
  .ag-look-phone { width: 40%; }
  .ag-look-controls { left: 4%; bottom: 4%; padding: 8px 12px; }
  .ag-samples { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ag-venue-list { grid-template-columns: minmax(0, 1fr); }
  .ag-bar { grid-template-columns: minmax(0, 1fr) 40px; }
  .ag-bar-track { grid-column: 1 / -1; grid-row: 2; }
  .ag-dialog-langs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .ag *, .ag *::before, .ag *::after { transition: none !important; animation: none !important; }
}