/* =========================================================
   페이빈 리뉴얼 시안 공통 스타일 (sian-a / sian-b)
   - 헤더·상단 탭·하단 탭바·푸터는 기존 style.css 그대로 사용
   - 본문은 .sx- 접두사로만 스타일링해 기존 규칙과 충돌하지 않게 함
   ========================================================= */

:root{
  --ch-900:#111418;
  --ch-800:#1F2429;
  --ch-700:#2B3138;
  --paper:#FFFFFF;
  --paper-2:#F4F6F5;
  --ink:#111418;
  --ink-2:#4A525B;
  --ink-3:#5E6870;
  --ink-inv:#F2F4F3;
  --ink-inv-2:#A9B1B8;
  --line:rgba(17,20,24,.09);
  --line-inv:rgba(255,255,255,.10);
  --mint:#5CBFA4;
  --mint-ink:#1F7A63;          /* 흰 배경 위 민트 글자 (대비 4.5:1 이상) */
  --mint-soft:rgba(92,191,164,.14);

  --r-lg:28px;
  --r-md:18px;
  --r-pill:999px;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-1:.35s;
  --dur-2:.6s;

  --sx-container:1180px;
  --sx-gutter:clamp(16px,4vw,40px);
}

body.sx{
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;
}
.sx main{display:block}
.sx-wrap{max-width:var(--sx-container);margin-inline:auto;padding-inline:var(--sx-gutter)}

/* ---------- 타이포 ---------- */
.sx-h1{font-size:clamp(34px,5vw,58px);line-height:1.2;letter-spacing:-.035em;font-weight:800;color:var(--ink)}
.sx-h2{font-size:clamp(28px,3.4vw,42px);line-height:1.28;letter-spacing:-.03em;font-weight:800}
.sx-h3{font-size:18px;line-height:1.45;letter-spacing:-.015em;font-weight:700}
.sx-lead{font-size:clamp(16px,1.4vw,18px);line-height:1.75;color:var(--ink-2);max-width:34em}
.sx-body{font-size:16px;line-height:1.75;color:var(--ink-2)}
.sx-key{color:var(--mint-ink)}
.sx-num{font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ---------- 버튼 ---------- */
.sx-btns{display:flex;flex-wrap:wrap;gap:10px}
.sx-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:54px;padding:0 26px;border-radius:var(--r-pill);
  font-size:16px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;
  transition:transform var(--dur-1) var(--ease-out),background-color var(--dur-1),color var(--dur-1);
}
.sx-btn:active{transform:scale(.98)}
.sx-btn-primary{background:var(--ch-900);color:#fff}
.sx-btn-primary:hover{background:var(--ch-800)}
.sx-btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.sx-btn-ghost:hover{background:var(--paper-2)}
.sx-on-dark .sx-btn-primary{background:var(--mint);color:var(--ch-900)}
.sx-on-dark .sx-btn-ghost{color:var(--ink-inv);box-shadow:inset 0 0 0 1px var(--line-inv)}
.sx-btn svg{width:18px;height:18px}

/* ---------- 폰 목업 ---------- */
.sx-phone{
  position:relative;
  width:min(320px,74vw);
  aspect-ratio:780/1688;
  border-radius:48px;
  padding:9px;
  background:linear-gradient(145deg,#2A3037,#0E1114);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 40px 80px -30px rgba(17,20,24,.45),
    0 18px 36px -18px rgba(17,20,24,.35);
}
.sx-screen{
  position:relative;width:100%;height:100%;
  border-radius:40px;overflow:hidden;background:#fff;
  isolation:isolate;
}
.sx-screen img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;
  opacity:0;
}
.sx-screen img.is-on{opacity:1}
.sx-island{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);
  width:31%;height:24px;border-radius:20px;background:#0B0D10;z-index:5;
}

/* 알림톡 카드 (링크결제 연출용, 실제 알림톡 화면 재현이 아니라 요약 카드) */
.sx-talk{
  position:absolute;z-index:6;
  width:min(270px,64vw);
  background:#fff;border-radius:20px;padding:16px 16px 14px;
  box-shadow:0 24px 50px -18px rgba(17,20,24,.35),0 0 0 1px var(--line);
  font-size:13.5px;line-height:1.5;color:var(--ink-2);
}
.sx-talk-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-weight:700;color:var(--ink);font-size:13px}
.sx-talk-head img{width:22px;height:22px;border-radius:7px}
.sx-talk-amt{font-size:20px;font-weight:800;color:var(--ink);letter-spacing:-.02em;margin:2px 0 10px}
.sx-talk-btn{display:block;text-align:center;background:#FEE500;color:#191600;font-weight:700;border-radius:10px;padding:9px 0;font-size:13px}

/* ---------- 리빌 (JS가 있을 때만 숨김, 첫 화면 요소에는 쓰지 않음) ---------- */
.js-motion .sx-reveal{opacity:0;transform:translateY(16px)}
.js-motion .sx-reveal.is-in{opacity:1;transform:none;transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out);transition-delay:var(--d,0s)}

/* ---------- 신뢰 / 3단계 / FAQ / CTA (A·B 공통 하단부) ---------- */
.sx-trust{padding:clamp(80px,10vw,140px) 0}
.sx-trust-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,6vw,90px);align-items:start}
.sx-trust-list{display:grid;gap:28px;margin-top:8px}
.sx-trust-item{padding-top:22px;border-top:1px solid var(--line)}
.sx-trust-item h3{margin-bottom:6px}

.sx-steps{padding:clamp(80px,10vw,130px) 0;background:var(--paper-2)}
.sx-steps-head{max-width:640px;margin-bottom:48px}
.sx-steps-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,28px)}
.sx-step{background:#fff;border-radius:var(--r-lg);padding:28px 26px 0;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 0 var(--line)}
.sx-step-n{font-size:14px;font-weight:700;color:var(--mint-ink);margin-bottom:10px}
.sx-step p{margin-top:8px}
.sx-step-shot{margin-top:26px;align-self:center;width:72%;aspect-ratio:390/420;overflow:hidden;border-radius:22px 22px 0 0;box-shadow:0 0 0 1px var(--line)}
.sx-step-shot img{width:100%;height:auto;display:block}

.sx-faq{padding:clamp(80px,10vw,130px) 0}
.sx-faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,6vw,90px)}
.sx-faq details{border-top:1px solid var(--line);padding:22px 0}
.sx-faq details:last-child{border-bottom:1px solid var(--line)}
.sx-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;font-size:18px;font-weight:700;letter-spacing:-.015em}
.sx-faq summary::-webkit-details-marker{display:none}
.sx-faq summary::after{content:"";flex:none;width:12px;height:12px;margin-top:7px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg);transition:transform var(--dur-1) var(--ease-out)}
.sx-faq details[open] summary::after{transform:rotate(225deg)}
.sx-faq details p{margin-top:12px;max-width:40em}
.sx-faq-more{display:inline-flex;margin-top:28px;font-weight:700;color:var(--mint-ink)}

.sx-cta{background:var(--ch-900);color:var(--ink-inv);padding:clamp(90px,11vw,150px) 0;text-align:left}
.sx-cta .sx-h2{color:#fff;max-width:14em}
.sx-cta .sx-lead{color:var(--ink-inv-2);margin:18px 0 34px}

/* 기존 푸터를 시안 톤으로 */
.sx .site-footer{background:var(--ch-900);border-top:1px solid var(--line-inv)}

/* ---------- 모바일 ---------- */
@media (max-width:900px){
  .sx-trust-grid,.sx-faq-grid{grid-template-columns:1fr}
  .sx-steps-row{grid-template-columns:1fr}
  .sx-step-shot{width:62%}
}
@media (max-width:640px){
  .sx-btn{height:50px;padding:0 22px;font-size:15px}
  .sx-phone{border-radius:40px;padding:8px}
  .sx-screen{border-radius:33px}
}

@media (prefers-reduced-motion:reduce){
  .js-motion .sx-reveal{opacity:1;transform:none}
  .sx *{transition:none!important;animation:none!important}
}

/* html·body의 overflow-x:hidden은 body를 스크롤 컨테이너로 만들어 sticky를 막는다 → clip으로 대체 */
html:has(body.sx),body.sx{overflow-x:clip}
.sx dd{margin:0}
.sx ol{margin:0;padding:0;list-style:none}