/* QR결제 페이지 — 월세결제 장면 틀(css/sian-rent.css) 위의 QR 전용 보조 스타일.
   뒤 장식(창문·원)은 쓰지 않고 흰 배경에 민트 포인트만. */
body.sx-qr{ background:#fff; word-break:keep-all; overflow-wrap:break-word; }
.sx-qr .rs-blob{ display:none; }
.sx-qr .rv-visual::before,.sx-qr .rv-visual::after{ content:none !important; display:none !important; }
.sx-qr .rs-h2{ text-wrap:balance; }
.sx-qr .rs-lead{ text-wrap:pretty; }

/* 장면이 아닌 구간 (구조·비교·수수료·주의점) */
.qr-sec{ position:relative; z-index:1; }
.qr-wrap{ max-width:1120px; margin:0 auto; padding:64px 20px 8px; }
.qr-note{ margin-top:14px; max-width:44em; font-size:13px; line-height:1.6; color:var(--ink-3,#5E6870); text-wrap:pretty; }
.qr-h3{ margin:36px 0 12px; font-size:18px; font-weight:800; letter-spacing:-.02em; }

/* 결제·정산 흐름 */

/* 표 */
.qr-tablewrap{ margin-top:22px; overflow-x:auto; border-radius:16px; box-shadow:inset 0 0 0 1px var(--line,rgba(17,20,24,.09)); }
.qr-table{ width:100%; border-collapse:collapse; font-size:15px; line-height:1.5; min-width:520px; }
.qr-table th,.qr-table td{ text-align:left; padding:14px 16px; border-top:1px solid var(--line,rgba(17,20,24,.09)); vertical-align:top; }
.qr-table thead th{ border-top:0; font-size:13px; font-weight:700; color:var(--ink-3,#5E6870); background:var(--mint-50,#EEF8F5); }
.qr-table tbody th{ font-weight:800; white-space:nowrap; }
.qr-table td.num{ font-variant-numeric:tabular-nums; }
.qr-fees td b{ color:var(--mint-ink,#1F7A63); font-size:17px; }
.qr-table thead th:nth-child(2){ color:var(--mint-ink,#1F7A63); }

/* 주의점 · 서류 */
.qr-notes{ list-style:none; margin:24px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.qr-notes li{ padding:18px 18px 16px; border-radius:16px; background:#fff; box-shadow:inset 0 0 0 1px var(--line,rgba(17,20,24,.09)); display:grid; gap:6px; }
.qr-notes b{ font-size:16px; font-weight:800; letter-spacing:-.02em; }
.qr-notes span{ font-size:14.5px; line-height:1.6; color:var(--ink-2,#4A525B); }
.qr-notes a{ color:var(--mint-ink,#1F7A63); font-weight:700; }
.qr-docs{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.qr-docs li{ position:relative; padding-left:24px; font-size:15px; line-height:1.55; color:var(--ink-2,#4A525B); }
.qr-docs li::before{ content:""; position:absolute; left:2px; top:8px; width:10px; height:10px; border-radius:50%; background:var(--mint,#5CBFA4); }

@media (max-width:760px){
  .qr-notes{ grid-template-columns:1fr; }
}

/* 히어로 QR 스탠드(밝은 톤): 흰 카드 위로 스캔 선이 오르내리고 뷰파인더가 숨 쉰다 */
.sx-qr .rv-hero .rs-ph{ left:auto; right:7%; }
.qx-stand{ position:absolute; z-index:3; left:2%; top:14%; width:min(46%,230px); padding:5% 5% 4%; border-radius:22px; background:#fff; color:#0E1B19;
  box-shadow:0 0 0 1px rgba(31,122,99,.08),0 22px 40px -18px rgba(20,72,60,.45); transform:rotate(-5deg); display:flex; flex-direction:column; align-items:center; text-align:center; }
.qx-shop{ font-size:clamp(11px,1.5vw,13.5px); font-weight:700; color:#5B6B6B; }
.qx-price{ margin:2px 0 8%; font-size:clamp(18px,2.8vw,28px); font-weight:800; letter-spacing:-.03em; }
.qx-qrbox{ position:relative; width:90%; aspect-ratio:1; padding:4%; }
.qx-qr{ display:block; width:100%; height:100%; }
.qx-scan{ position:absolute; left:-4%; right:-4%; top:4%; height:3px; border-radius:2px; background:linear-gradient(90deg,transparent,#5CBFA4 20%,#1F7A63 50%,#5CBFA4 80%,transparent);
  box-shadow:0 0 14px 3px rgba(92,191,164,.55); animation:qxScan 3.4s ease-in-out infinite; }
@keyframes qxScan{ 0%,100%{ top:4%; opacity:0 } 8%{ opacity:1 } 50%{ top:94%; opacity:1 } 92%{ opacity:1 } 99%{ opacity:0 } }
.qx-vf{ position:absolute; width:18%; height:18%; border:0 solid #5CBFA4; animation:qxVf 3.4s ease-in-out infinite; }
.qx-vf1{ left:0; top:0; border-width:3px 0 0 3px; border-top-left-radius:8px; }
.qx-vf2{ right:0; top:0; border-width:3px 3px 0 0; border-top-right-radius:8px; }
.qx-vf3{ left:0; bottom:0; border-width:0 0 3px 3px; border-bottom-left-radius:8px; }
.qx-vf4{ right:0; bottom:0; border-width:0 3px 3px 0; border-bottom-right-radius:8px; }
@keyframes qxVf{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(.9) } }
.qx-hint{ margin-top:6%; font-size:clamp(9.5px,1.2vw,12px); font-weight:700; color:#5E6870; }
@media (prefers-reduced-motion:reduce){ .qx-scan,.qx-vf{ animation:none !important; } }

/* 모바일: 표를 카드로 풀어서 가로 스크롤 없이 다 보이게 */
@media (max-width:640px){
  .qr-tablewrap{ overflow:visible; box-shadow:none; background:none; border-radius:0; }
  .qr-table{ min-width:0 !important; border:0; }
  .qr-table thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .qr-table,.qr-table tbody,.qr-table tr,.qr-table th,.qr-table td{ display:block; width:100%; box-sizing:border-box; }
  .qr-table tr{ margin:0 0 12px; padding:14px 16px; border-radius:16px; background:#fff; box-shadow:inset 0 0 0 1px rgba(17,20,24,.1); }
  .qr-table tbody th{ border:0 !important; padding:0 0 8px !important; font-size:16px; white-space:normal; }
  .qr-table td{ border:0 !important; padding:6px 0 !important; display:grid; grid-template-columns:92px minmax(0,1fr); gap:10px; font-size:14.5px; }
  .qr-table td::before{ content:attr(data-label); font-size:12.5px; font-weight:800; color:#5E6870; }
}