/* 홈 — 결제 아이콘 아래 4장면. 모양은 월세결제 페이지(css/sian-rent*.css)를 그대로 쓰고,
   여기서는 sian.css 를 로드하지 않는 대신 장면이 쓰는 토큰만 이 구역 안에서 정의한다. */
.hs-scenes{
  --ink:#111418; --ink-2:#4A525B; --ink-3:#5E6870; --line:rgba(17,20,24,.09);
  --mint:#5CBFA4; --mint-ink:#1F7A63; --mint-soft:rgba(92,191,164,.14);
  --r-md:18px; --r-lg:28px; --r-pill:999px;
  position:relative; z-index:1; color:var(--ink); background:#fff; padding-bottom:24px;
  word-break:keep-all; overflow-wrap:break-word;   /* 어절 단위로만 줄을 바꾼다 */
}
.hs-scenes .sx-num{ font-variant-numeric:tabular-nums; }
body{ overflow-x:clip; }

/* 뒤 장식(아치 창문·빛줄기·원)은 쓰지 않는다 */
.hs-scenes .rs-blob{ display:none; }
.hs-scenes.sx-rentpage .rv-sec:not(.rv-hero) .rv-visual::after,
.hs-scenes.sx-rentpage .rv-sec:not(.rv-hero) .rv-visual::before{ content:none; display:none; }

.hs-intro{ max-width:1120px; margin:0 auto; padding:56px 20px 0; }
.hs-intro-h{ font-size:clamp(25px,3.2vw,40px); line-height:1.3; letter-spacing:-.03em; font-weight:800; text-wrap:balance; }
.hs-scenes .rv-sec:first-of-type{ padding-top:24px; }
.hs-scenes .rs-h2{ text-wrap:balance; }

/* 장점 목록 (JS 가 켜지면 한 번에 하나씩: css/home-icons.css) */
.hs-adv{ list-style:none; margin:20px 0 0; padding:0; display:grid; gap:12px; }
.hs-adv li{ display:flex; align-items:center; gap:12px; font-size:clamp(16px,1.5vw,19px); font-weight:700; letter-spacing:-.02em; line-height:1.4; }
.hs-adv .hs-n{ color:var(--mint-ink); font-variant-numeric:tabular-nums; font-weight:800; }
.hs-fine{ margin-top:14px; max-width:32em; font-size:12.5px; line-height:1.55; color:var(--ink-3); text-wrap:pretty; }

/* 휴대폰 화면: 아래에서 올라오며 앱 순서대로 넘어간다 */
.hs-shot{ opacity:0; transform:translateY(16px) scale(.985); transition:opacity .8s ease, transform .9s cubic-bezier(.22,1,.36,1); }
.hs-shot.is-on{ opacity:1; transform:none; }
.hs-shot.is-past{ opacity:0; transform:translateY(-16px) scale(1.01); }
.hs-tap{ position:absolute; z-index:6; left:50%; top:91%; width:calc(16 * var(--u)); height:calc(16 * var(--u)); margin:calc(-8 * var(--u)) 0 0 calc(-8 * var(--u));
  border-radius:50%; border:calc(.5 * var(--u)) solid var(--mint); background:rgba(92,191,164,.22); opacity:0; pointer-events:none; }
.hs-tap.go{ animation:hsTap .8s ease-out; }
@keyframes hsTap{ 0%{ opacity:0; transform:scale(1.6); } 25%{ opacity:1; transform:scale(1); } 55%{ opacity:1; transform:scale(.85); } 100%{ opacity:0; transform:scale(1.9); } }

/* 소품 카드 안 글자는 한 줄로 */
.hs-scenes .rs-list li,.hs-scenes .rs-list p,.hs-scenes .rs-list > span{ white-space:nowrap; }

/* 한눈에 비교 표 (접어 둠) */
.hs-compare{ max-width:1120px; margin:0 auto; padding:24px 20px 8px; }
.hs-compare summary{ cursor:pointer; font-size:15px; font-weight:800; color:var(--mint-ink); padding:10px 0; list-style:none; }
.hs-compare summary::-webkit-details-marker{ display:none; }
.hs-compare summary::after{ content:" ▾"; }
.hs-compare[open] summary::after{ content:" ▴"; }
.hs-compare table{ width:100%; margin-top:8px; border-collapse:collapse; font-size:14px; line-height:1.5; }
.hs-compare th,.hs-compare td{ text-align:left; padding:11px 8px; border-top:1px solid var(--line); vertical-align:top; }
.hs-compare thead th{ font-size:12.5px; color:var(--ink-3); font-weight:700; border-top:0; }
.hs-compare tbody th{ white-space:nowrap; font-weight:800; }
.hs-compare tbody th a{ color:var(--mint-ink); text-decoration:none; }
@media (max-width:640px){ .hs-compare table{ font-size:13px; } }


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


/* 홈 핵심 버튼 */
.hs-btns{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.hs-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 24px; border-radius:999px; font-size:16px; font-weight:800; letter-spacing:-.01em; transition:transform .18s cubic-bezier(.22,1,.36,1), background .18s; }
.hs-btn:active{ transform:scale(.98); }
.hs-btn-primary{ background:#111418; color:#fff; }
.hs-btn-primary:hover{ background:#2a3037; }
.hs-btn-ghost{ color:#111418; box-shadow:inset 0 0 0 1px rgba(17,20,24,.18); }
.hs-btn-ghost:hover{ background:#F3F6F5; }
.hs-btn:focus-visible{ outline:2px solid #1F7A63; outline-offset:3px; }

/* 읽기 편하게: 작은 글자 키우고 색 진하게 */
#scenes .rs-tag{ font-size:14px; }
#scenes .hs-fine{ font-size:13.5px; color:#4A525B; line-height:1.6; }
#scenes .hs-compare table th{ font-size:13.5px; color:#4A525B; }
#scenes .hs-compare table td{ font-size:15.5px; line-height:1.55; }
#scenes .rs-lead{ line-height:1.7; }

/* ===== 가운데 정렬 · 큰 글자 (토스플레이스 방식) ===== */
#scenes .rv-in{ grid-template-columns:1fr !important; text-align:center; gap:34px; justify-items:center; }
#scenes .rv-flip .rv-copy,#scenes .rv-flip .rv-visual{ order:0 !important; }
#scenes .rv-sec{ min-height:0 !important; padding:84px 0 40px !important; }
#scenes .rv-copy{ display:flex; flex-direction:column; align-items:center; max-width:760px; }
#scenes .rs-h2{ font-size:clamp(34px,6vw,64px) !important; line-height:1.16; letter-spacing:-.045em; text-wrap:balance; }
.hs-cond{ margin-top:14px; font-size:14px; color:#5E6870; }
.hs-cond summary{ cursor:pointer; list-style:none; text-decoration:underline; text-underline-offset:3px; min-height:24px; }
.hs-cond summary::-webkit-details-marker{ display:none; }
.hs-cond .hs-fine{ margin:8px auto 0; max-width:30em; }
#scenes .rs-inline-cta{ margin-top:18px; padding:12px 22px; border-radius:99px; background:#111418; color:#fff; }
#scenes .rv-visual{ justify-self:center; }

/* 장점: 한 번에 하나씩 돌리지 않고, 네 가지를 조용한 알약으로 한눈에 */
#scenes .hs-adv{ grid-template-columns:repeat(2,minmax(0,auto)); justify-content:center; gap:10px; margin-top:26px; }
#scenes .hs-adv li{ justify-content:flex-start; gap:10px; padding:13px 20px 13px 16px; border-radius:var(--r-pill);
  background:#F1F7F5; color:var(--ink); font-size:clamp(15px,1.5vw,17px); font-weight:700; text-align:left; line-height:1.35; }
#scenes .hs-adv li::before{ content:""; flex:none; width:18px; height:18px; border-radius:50%; background:var(--mint-ink)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.5 2.5L13 6.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
#scenes .hs-adv li:only-child{ grid-column:1/-1; }
#scenes .hs-cond{ margin-top:16px; }
@media (max-width:640px){
  #scenes .hs-adv{ grid-template-columns:minmax(0,1fr); width:100%; max-width:360px; }
}