/* 픽컴 폰 등록 QR 팝업 (pair.js) — 사이트 첫 화면 · PC 사진 화면 공용 (지시 329 ②) */
.pkp {
  --pkp-bg: #fff; --pkp-text: #191F28; --pkp-sub: #4E5968; --pkp-line: #E8EBEF; --pkp-accent: #0891B2; --pkp-soft: #E3F5F8;
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px;
  background: rgba(10, 12, 16, .55); animation: pkpIn .15s ease;
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", system-ui, sans-serif;
  word-break: keep-all;
}
@media (prefers-color-scheme: dark) {
  .pkp { --pkp-bg: #1A1D24; --pkp-text: #F2F4F6; --pkp-sub: #B0B8C1; --pkp-line: #2A2E37; --pkp-accent: #22B8CF; --pkp-soft: rgba(34, 184, 207, .16); }
}
.pkp [hidden] { display: none !important; }
.pkp-c {
  position: relative; width: min(400px, 100%); box-sizing: border-box; padding: 34px 28px 26px; text-align: center;
  background: var(--pkp-bg); color: var(--pkp-text); border-radius: 22px; box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}
.pkp-x {
  position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: none; color: var(--pkp-sub); font: 400 24px/1 system-ui, sans-serif; cursor: pointer;
}
.pkp-x:hover { background: var(--pkp-soft); color: var(--pkp-text); }
.pkp-qr { width: 220px; height: 220px; margin: 0 auto 18px; padding: 6px; box-sizing: border-box; background: #fff; border-radius: 14px; box-shadow: 0 0 0 1px var(--pkp-line); }
.pkp-qr svg { width: 100%; height: 100%; display: block; }
.pkp-ic { width: 30px; height: 30px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 800 16px/1 system-ui, sans-serif; }
.pkp-ic.spin { box-sizing: border-box; border: 3px solid var(--pkp-soft); border-top-color: var(--pkp-accent); animation: pkpSpin .8s linear infinite; }
.pkp-ic.ok { background: #12B76A; }
.pkp-ic.warn { background: #F79009; }
.pkp h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.4; }
.pkp-s { margin: 6px 0 0; color: var(--pkp-sub); font-size: 15px; line-height: 1.55; }
.pkp-a:empty, .pkp-a:has(> [hidden]:only-child) { display: none; }
.pkp-b {
  margin-top: 20px; min-width: 140px; height: 48px; padding: 0 28px; border: 0; border-radius: 14px; cursor: pointer;
  background: linear-gradient(90deg, #34D399, #0891B2); color: #fff; font: inherit; font-size: 16px; font-weight: 700;
}
.pkp-b:focus-visible, .pkp-x:focus-visible { outline: 3px solid rgba(8, 145, 178, .45); outline-offset: 3px; }
@keyframes pkpSpin { to { transform: rotate(360deg); } }
@keyframes pkpIn { from { opacity: 0; } to { opacity: 1; } }