/* 월세결제 시안 전용 다듬기 (공용 css/sian-rent.css 는 대금·수기·링크도 쓰므로 월세만의 변경은 여기에)
   2026-10-06 디벨롭: 컨셉(우리 집 창가)은 그대로, 디테일만 다듬음.
   - 창가 빛을 뒤 장면에도 은은하게 이어줌 (히어로 창문보다 옅은 아치 빛)
   - 소품 그림자를 배경색(민트)에 맞춰 물들이고, 흰 카드 가장자리에 빛 테두리
   - PC 두 칸 배치: 글 폭을 줄이고 장면마다 거울처럼 대칭 */

/* ---------- 창가 빛: 히어로 창문 ---------- */
/* 처음 열릴 때 창문이 먼저 밝아지고, 그다음 폰이 선다 (한 번만, 반복 없음) */
.sx-rentpage .rv-hero .rv-visual::before{
  background:
    linear-gradient(90deg,transparent calc(50% - 1px),rgba(255,255,255,.92) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)),
    linear-gradient(180deg,transparent 46%,rgba(255,255,255,.92) 46% calc(46% + 2px),transparent calc(46% + 2px)),
    radial-gradient(70% 45% at 50% 0%,rgba(255,255,255,.75),rgba(255,255,255,0) 70%),
    linear-gradient(180deg,#D9F0EC 0%,#EEF8F6 48%,#FAFDFC 78%,#FFFFFF 100%);
  box-shadow:
    inset 0 0 0 calc(1.2 * var(--u)) #fff,
    inset 0 calc(1.6 * var(--u)) calc(3 * var(--u)) calc(-1 * var(--u)) rgba(31,122,99,.10),
    0 calc(2 * var(--u)) calc(7 * var(--u)) rgba(31,122,99,.09);
  animation:rsWinIn 1.6s cubic-bezier(.22,1,.36,1) both;   /* 2026-10-06: 처음 밝아지는 속도 1.1s→1.6s (대표: 모션이 너무 빠름) */
}
.sx-rentpage .rv-hero .rv-visual::after{animation:rsBeamIn 2s cubic-bezier(.22,1,.36,1) .5s both}
@keyframes rsWinIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes rsBeamIn{from{opacity:0;transform:translateX(-6%)}to{opacity:1;transform:none}}

/* ---------- 창가 빛: 뒤 장면들 (같은 아치 모양을 더 옅게, 아래로 갈수록 사라짐) ---------- */
.sx-rentpage .rv-sec:not(.rv-hero) .rs-blob{
  top:7%;width:calc(58 * var(--u));height:82%;translate:-50% 0;z-index:0;
  border-radius:calc(29 * var(--u)) calc(29 * var(--u)) calc(2 * var(--u)) calc(2 * var(--u));
  background:
    linear-gradient(90deg,transparent calc(50% - 1px),rgba(255,255,255,.8) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)),
    radial-gradient(70% 40% at 50% 0%,rgba(255,255,255,.6),rgba(255,255,255,0) 70%),
    linear-gradient(180deg,rgba(214,239,233,.85) 0%,rgba(234,247,243,.6) 50%,rgba(255,255,255,0) 100%);
  box-shadow:inset 0 0 0 calc(1 * var(--u)) rgba(255,255,255,.8);
  -webkit-mask-image:linear-gradient(180deg,#000 45%,transparent 96%);mask-image:linear-gradient(180deg,#000 45%,transparent 96%);
}
/* 창으로 비스듬히 들어오는 빛 한 줄기 (정적, 아주 옅게) */
.sx-rentpage .rv-sec:not(.rv-hero) .rv-visual::after{
  content:"";position:absolute;left:10%;top:8%;width:80%;height:70%;z-index:0;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.5) 45%,rgba(255,255,255,0) 56%);
}

/* ---------- 폰 바닥 그림자: 배경 민트에 맞춰 물든 그림자 ---------- */
.sx-rentpage .ph-shadow{background:radial-gradient(closest-side,rgba(20,72,60,.30),rgba(20,72,60,0))}

/* ---------- 소품: 흰 정보 카드 (모서리 빛 테두리 + 물든 2단 그림자) ---------- */
.sx-rentpage .rv-visual{
  --pr-sh:
    inset 0 1px 0 #fff,
    0 0 0 1px rgba(31,122,99,.07),
    0 calc(.4 * var(--u)) calc(1 * var(--u)) rgba(20,72,60,.08),
    0 calc(3 * var(--u)) calc(7 * var(--u)) calc(-2 * var(--u)) rgba(20,72,60,.30);
}
.sx-rentpage .rs-meter,.sx-rentpage .rs-doc,.sx-rentpage .rs-bank,.sx-rentpage .rs-list,.sx-rentpage .rs-toast{
  background:linear-gradient(180deg,#FFFFFF 0%,#FBFEFD 100%)}
.sx-rentpage .rs-meter > span,.sx-rentpage .rs-bank > span,.sx-rentpage .rs-list > span{letter-spacing:-.01em}
.sx-rentpage .rs-meter em,.sx-rentpage .rs-bank > b{font-variant-numeric:tabular-nums}

/* 신용카드: 그림자를 배경 쪽 색으로 (검정 대신 짙은 청록), 바닥에 넓게 깔리는 은은한 그림자 한 겹 더 */
.sx-rentpage .rs-card{
  box-shadow:
    inset 0 calc(0.15 * var(--u)) 0 rgba(255,255,255,.28),
    inset 0 0 0 calc(0.12 * var(--u)) rgba(255,255,255,.10),
    0 calc(0.45 * var(--u)) 0 0 rgba(10,24,20,.5),
    0 calc(2.4 * var(--u)) calc(4 * var(--u)) calc(-1.4 * var(--u)) rgba(12,40,33,.40),
    0 calc(6 * var(--u)) calc(12 * var(--u)) calc(-5 * var(--u)) rgba(31,122,99,.28);
}
.sx-rentpage .rs-fan-3{box-shadow:
    inset 0 calc(0.15 * var(--u)) 0 rgba(255,255,255,.9),
    inset 0 0 0 calc(0.12 * var(--u)) rgba(20,40,35,.10),
    0 calc(0.45 * var(--u)) 0 0 rgba(120,135,140,.55),
    0 calc(2.4 * var(--u)) calc(4 * var(--u)) calc(-1.4 * var(--u)) rgba(12,40,33,.30),
    0 calc(6 * var(--u)) calc(12 * var(--u)) calc(-5 * var(--u)) rgba(31,122,99,.22)}

/* 도장: 잉크가 종이에 스민 느낌 (겹 테두리 + 곱하기 혼합) */
.sx-rentpage .rs-stamp{
  color:#D64A3E;border-color:rgba(214,74,62,.92);
  box-shadow:inset 0 0 0 calc(.35 * var(--u)) #fff,inset 0 0 0 calc(.55 * var(--u)) rgba(214,74,62,.45);
  mix-blend-mode:multiply;letter-spacing:.04em}

/* 알림톡: 아이콘에 얇은 테두리 */
.sx-rentpage .rs-toast img{box-shadow:0 0 0 1px rgba(20,72,60,.08)}

/* ---------- 글: 줄바꿈 ---------- */
.sx-rentpage .rs-fee .nw{white-space:nowrap}
.sx-rentpage .rs-rates dt{line-height:1.45}

/* ---------- PC: 두 칸 배치를 거울처럼 대칭으로 ---------- */
@media (min-width:900px){
  .sx-rentpage .rv-in{max-width:1160px;gap:88px}
  .sx-rentpage .rv-copy{width:100%;max-width:468px}
  /* 글이 오른쪽에 오는 장면은 글 묶음을 바깥쪽(오른쪽) 끝에 맞춰, 왼쪽 장면과 거울 대칭 */
  .sx-rentpage .rv-flip .rv-copy{justify-self:end}
  .sx-rentpage .rv-hero .rv-copy{max-width:520px}
  .sx-rentpage .rs-lead{max-width:none}
  .sx-rentpage .rv-sec{padding:56px 0}
  /* 창가 빛을 폰보다 조금 넓게: 큰 화면에서 무대가 비어 보이지 않게 */
  .sx-rentpage .rv-sec:not(.rv-hero) .rs-blob{width:calc(64 * var(--u));height:84%;top:6%}
  .sx-rentpage .rs-fee{max-width:440px}
}