/* 앱 받기 QR 대화상자 (§3-9, 2026-07-30).
   랜딩·지도·이용안내가 함께 쓴다. 세 화면의 CSS 가 다르므로 여기서 자립적으로 쓴다. */

.qr-dlg {
  border: 0; border-radius: 16px; padding: 28px 26px 24px;
  width: min(360px, calc(100vw - 32px));
  background: var(--bg); color: var(--text);
  box-shadow: 0 12px 40px rgba(0,0,0,.22);
  text-align: center; position: relative;
  font-family: "Pretendard", "Pretendard Fallback", sans-serif;
  word-break: keep-all;              /* 어절 중간에서 끊지 않는다 */
}
.qr-dlg::backdrop { background: rgba(0,0,0,.45); }

/* ★ 이 짝 규칙이 없으면 hidden 이 무시된다 — 아래 .qr-pane 의 display 가
   브라우저 기본 [hidden]{display:none} 을 특정도에서 이긴다.
   (지도 범례에서 같은 함정을 겪었다 — 메모리 hidden-attr-beaten-by-display) */
.qr-pane { display: block; }
.qr-pane[hidden] { display: none; }

.qr-x { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: none; color: var(--text-sub); cursor: pointer; border-radius: 50%; }
.qr-x:hover { background: var(--bg-soft); }
.qr-x svg { width: 17px; height: 17px; }

.qr-dlg h2 { margin: 0 0 8px; font-size: 17px; }
.qr-desc { margin: 0 0 16px; font-size: 13.5px; line-height: 1.65; color: var(--text-sub); }
.qr-desc b { font-weight: 600; color: var(--text); }

/* QR 은 흐리게 렌더되면 인식률이 떨어진다 — 확대 시 보간을 끈다 */
.qr-img { display: block; width: 208px; height: 208px; margin: 0 auto 14px;
  border: 1px solid var(--line); border-radius: 10px; padding: 8px;
  background: #fff; image-rendering: pixelated; }

.qr-sub { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--text-sub); }
.qr-sub b { font-weight: 600; color: var(--text); }
.qr-meta { margin: 12px 0 0; font-size: 11.5px; color: var(--text-sub); }

.qr-go { display: block; height: 46px; line-height: 46px; margin: 4px 0 14px;
  background: var(--cta); color: #fff; border-radius: 9999px;
  font-weight: 700; font-size: 15px; text-decoration: none; }

@media (max-width: 640px) {
  .qr-dlg { padding: 24px 20px 20px; }
  .qr-img { width: 180px; height: 180px; }
}