/* 수기결제 시안 「카드 한 장」: 상자 없이 흐르는 페이지.
   - 2026-10-07 대표 피드백 "너무 네모 박스 안에서 논다 → 자연스럽게": 회색 바탕 + 흰 벤토 타일을 걷어냈다.
     글은 왼쪽 정렬 한 줄기, 그림(카드·입력칸·영수증·시계·폰)은 페이지 위에 바로 놓이고 바닥 그림자만 옅게.
     구획은 가는 선 한 줄이나 위아래가 흐려지는 옅은 띠로만 나눈다. PC는 글·그림을 좌우로 번갈아 둔다.
   - 월세 시안(sian-rent.css)의 FAQ·하단 배너·버튼·글자 단계는 그대로 쓰고, 배경·배치·카드 재질만 이 파일에서 바꾼다.
   - 색: 바탕은 거의 흰색, 색은 카드와 앱 화면이 낸다. 민트는 점·체크·밑줄 같은 포인트에만. 글자는 차콜.
   - 움직임은 JS가 transform/opacity(+선 그리기, 글자 바꾸기)로만. JS가 없으면 모든 글과 최종 화면이 그대로 보인다. */

.sx-sugi{--sg-bg:#FCFCFB;--sg-band:#F3F5F4;--sg-g:20px;--sg-sec:64px;--sg-shadow:rgba(22,24,26,.16)}
/* 본문 글자는 차콜 (머리글·바닥글은 공통 색 그대로) */
.sx-sugi main{--ink:#1D2024;--ink-2:#4C5258;--ink-3:#80868C;--line:#E6E7E5}
body.sx.sx-sugi{background:var(--sg-bg)}
.sg-wrap{max-width:1180px;margin-inline:auto;padding-inline:var(--sg-g)}

/* ---------- 히어로: 큰 카드 한 장 (사진 없이, 바닥에 닿는 그림자만) ---------- */
.sg-hero{padding:28px 0 20px}
.sg-hero-in{display:grid;gap:32px;align-items:center}
.sg-hero .rs-lead{max-width:28em}

.sg-hstage{position:relative;isolation:isolate;perspective:1200px;padding-bottom:26px}
.sg-hcq{position:relative;z-index:1;container-type:inline-size;width:100%;max-width:560px;margin-inline:auto;perspective:1100px;will-change:transform}
/* 카드 아래 접지 그림자: 진한 안쪽 + 넓게 퍼지는 바깥 두 겹 */
.sg-hfloor{position:absolute;left:10%;right:10%;bottom:2px;height:34px;z-index:0;border-radius:50%;
  background:radial-gradient(closest-side,rgba(22,24,26,.30),rgba(22,24,26,.10) 55%,rgba(22,24,26,0))}

/* ---------- 카드 재질 (히어로·뒤집히는 카드 공통) ----------
   깊은 무광 흑연 + 아주 옅은 입자(noise) + 가로 결(헤어라인) + 위쪽 빛. 모서리 두께는 아래로 쌓인 그림자 두 줄. */
.rs-card.sg-cc{
  border-radius:calc(1.5 * var(--u));
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(120% 85% at 88% -12%,rgba(255,255,255,.17),rgba(255,255,255,0) 58%),
    radial-gradient(90% 90% at 0% 115%,rgba(0,0,0,.35),rgba(0,0,0,0) 60%),
    linear-gradient(158deg,#2C3238 0%,#1A1E22 46%,#111417 100%);
  box-shadow:
    inset 0 calc(.12 * var(--u)) 0 rgba(255,255,255,.22),
    inset 0 0 0 calc(.08 * var(--u)) rgba(255,255,255,.07),
    inset 0 calc(-.14 * var(--u)) 0 rgba(0,0,0,.45),
    0 calc(.16 * var(--u)) 0 #2A3036,
    0 calc(.32 * var(--u)) 0 #0A0C0E,
    0 calc(.8 * var(--u)) calc(1.1 * var(--u)) calc(-.2 * var(--u)) rgba(8,10,12,.42),
    0 calc(3.2 * var(--u)) calc(6 * var(--u)) calc(-1.4 * var(--u)) rgba(8,10,12,.5);
}
.rs-card.sg-cc::before{background:
  repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,rgba(255,255,255,0) 1px 3px),
  linear-gradient(112deg,rgba(255,255,255,0) 28%,rgba(255,255,255,.06) 44%,rgba(255,255,255,0) 60%)}
/* IC칩: 금속 접점 6칸 + 가운데 패드 + 안쪽 빛 테두리(베벨) */
.sg-chip{position:absolute;left:calc(2.8 * var(--u));top:calc(4 * var(--u));width:calc(5.4 * var(--u));height:calc(4.1 * var(--u));
  filter:drop-shadow(0 calc(.07 * var(--u)) 0 rgba(0,0,0,.55))}
.sg-cc .nfc{left:calc(9.2 * var(--u));top:calc(4.45 * var(--u));opacity:.5}
/* 카드 이름: 은박 글자 */
.sg-brand{position:absolute;right:calc(2.6 * var(--u));top:calc(2.4 * var(--u));font-size:calc(2.1 * var(--u));line-height:1;font-weight:800;letter-spacing:-.02em;
  background:linear-gradient(180deg,#FFFFFF 0%,#D6DBDF 48%,#9AA2A9 54%,#E3E7EA 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
/* 홀로그램 조각: 안쪽 무지개 판이 카드 기울기에 따라 옆으로 미끄러진다(transform) */
.sg-holo{position:absolute;right:calc(2.7 * var(--u));top:calc(6 * var(--u));width:calc(4.6 * var(--u));height:calc(3.3 * var(--u));overflow:hidden;
  border-radius:calc(.45 * var(--u));background:#C8CFD5;
  box-shadow:inset 0 0 0 calc(.08 * var(--u)) rgba(255,255,255,.45),0 calc(.07 * var(--u)) 0 rgba(0,0,0,.45)}
.sg-holo > i{position:absolute;top:0;bottom:0;left:-100%;width:300%;will-change:transform;
  background:linear-gradient(100deg,#BCC7D0 0%,#E6D6EC 11%,#CBEAE0 22%,#EFE4C4 33%,#D1DAF0 44%,#E8D2DF 55%,#C6E4EC 66%,#E4DEC6 77%,#D2D0EE 88%,#C2CCD5 100%)}
.sg-holo::after{content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.22) 0 1px,rgba(255,255,255,0) 1px 3px),
    radial-gradient(circle at 50% 55%,rgba(255,255,255,0) 26%,rgba(255,255,255,.3) 27% 31%,rgba(255,255,255,0) 32% 52%,rgba(255,255,255,.24) 53% 56%,rgba(255,255,255,0) 57%)}
/* 아래 줄: 유효기간 + 결제망 표시(실제 상표 아님) */
.sg-crow{display:flex;align-items:flex-end;justify-content:space-between;gap:calc(1 * var(--u))}
.sg-crow em{display:flex;align-items:center;gap:calc(.6 * var(--u));font-size:max(8px,calc(1.7 * var(--u)));letter-spacing:.08em;font-variant-numeric:tabular-nums}
.sg-crow small{position:static;font-size:max(5px,calc(.82 * var(--u)));line-height:1.05;letter-spacing:.06em;opacity:.7;font-weight:700}
.sg-net{position:relative;flex:none;width:calc(5.4 * var(--u));height:calc(3.3 * var(--u))}
.sg-net::before,.sg-net::after{content:"";position:absolute;top:0;width:calc(3.3 * var(--u));height:calc(3.3 * var(--u));border-radius:calc(.9 * var(--u))}
.sg-net::before{left:0;background:linear-gradient(145deg,#F4F6F7,#AEB6BD 55%,#DDE2E5);box-shadow:0 calc(.06 * var(--u)) 0 rgba(0,0,0,.4)}
.sg-net::after{right:0;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 calc(.12 * var(--u)) rgba(230,234,237,.75)}
/* 양각 숫자: 은빛 글자 + 위 빛·아래 그림자 */
.sg-g b,.sg-fnum{background:linear-gradient(180deg,#FFFFFF 8%,#DCE1E5 46%,#A3ABB2 54%,#EEF1F3 92%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* 히어로 카드 */
.sg-hcard{--u:calc(100cqi / 36);width:100%;padding:calc(2.6 * var(--u)) calc(2.8 * var(--u)) calc(2.4 * var(--u));transform-origin:50% 60%;will-change:transform}
/* 카드번호: 숫자 폭이 같은 글꼴 설정. 한 묶음은 보이지 않는 '0000'으로 자리를 잡고, 찍히는 글자는 그 위에 겹친다 */
.sg-hnum{position:relative;display:flex;gap:.32em;margin-bottom:.5em;
  font-size:7.2cqi;font-weight:600;line-height:1.1;letter-spacing:.02em;font-variant-numeric:tabular-nums;white-space:nowrap;
  color:#EEF1F3;text-shadow:none;filter:drop-shadow(0 .04em 0 rgba(0,0,0,.65)) drop-shadow(0 -.02em 0 rgba(255,255,255,.16))}
.sg-g{position:relative;display:block}
.sg-g i{visibility:hidden;font-style:normal}
.sg-g b{position:absolute;left:0;top:0;font-size:inherit;font-weight:600;letter-spacing:inherit;text-shadow:none}
.sg-g::after{content:"";position:absolute;left:0;right:0;bottom:-.22em;height:max(1.5px,.05em);border-radius:2px;background:rgba(255,255,255,.12)}
/* 지금 입력하는 칸 표시 (민트 막대가 칸을 옮겨 간다) */
.sg-hcur{position:absolute;left:0;top:calc(1.1em + .22em - max(1.5px,.05em));display:block;height:max(2px,.06em);overflow:hidden;border-radius:2px;
  background:var(--mint);box-shadow:0 0 .3em rgba(92,191,164,.85);text-decoration:none;opacity:0}
.sg-hcur::before{content:"0000";visibility:hidden}
/* 글자 커서: 지금 찍히는 글자 바로 뒤에 선다 (깜빡임 반복 없음, 스크롤로만 움직인다) */
.sg-hcar{position:absolute;left:0;top:.08em;display:block;width:max(2px,.06em);height:.94em;border-radius:1px;background:var(--mint);
  box-shadow:0 0 .25em rgba(92,191,164,.8);text-decoration:none;opacity:0}
.sg-hmeta{font-size:max(9px,calc(1.8 * var(--u)))!important}

/* ---------- 본문 흐름: 상자 없음 ---------- */
.sg-sec{position:relative;padding:var(--sg-sec) 0}
/* 흰 구간끼리는 글 폭에 맞춘 가는 선 한 줄로만 나눈다 */
.sg-sec:not(.sg-band) + .sg-sec:not(.sg-band)::before{content:"";position:absolute;top:0;height:1px;background:var(--line);
  left:max(var(--sg-g),calc((100% - 1180px) / 2 + var(--sg-g)));right:max(var(--sg-g),calc((100% - 1180px) / 2 + var(--sg-g)))}
/* 옅은 띠: 위아래 끝이 바탕으로 스며들어 경계선이 생기지 않는다 */
.sg-band{background:linear-gradient(180deg,rgba(243,245,244,0) 0,var(--sg-band) 72px,var(--sg-band) calc(100% - 72px),rgba(243,245,244,0) 100%)}
.sg-row{position:relative}
.sg-copy{max-width:34em}
.sg-sec .rs-h2{font-size:clamp(25px,2.9vw,38px);line-height:var(--t-h2-lh);text-wrap:balance;word-break:keep-all}
.sg-sec .rs-lead{font-size:15.5px;max-width:32em;word-break:keep-all}
/* 라벨: 상자 없이 민트 점 + 글자 */
.sg-sec .rs-tag{display:inline-flex;align-items:center;gap:8px;margin-bottom:var(--t-gap-tag);padding:0;background:none;box-shadow:none;border-radius:0;
  font-size:13.5px;line-height:1.4;font-weight:700;letter-spacing:-.005em;color:var(--ink-2)}
.sg-sec .rs-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mint)}
.sg-vis{margin-top:36px;min-width:0}

/* 본인 확인 안내 */
.sg-note{display:flex;align-items:flex-start;gap:8px;margin-top:16px;font-size:14px;line-height:var(--t-body-lh);color:var(--ink);font-weight:600;word-break:keep-all}
.sg-note i{flex:none;display:grid;place-items:center;width:20px;height:20px;margin-top:1px;border-radius:50%;
  background:var(--ink);color:#fff;font-style:normal;font-size:12px;font-weight:800;line-height:1}

/* ---------- 입력 항목: 카드가 뒤집히고, 번호가 입력 칸으로 날아가 찍힌다 ----------
   카드는 오른쪽으로 비켜 앉고 입력 칸은 왼쪽 글 줄기에 맞춰, 번호가 대각선으로 내려와 칸에 들어간다 */
.sg-s-in{padding-top:calc(var(--sg-sec) * .6)}
.sg-in-vis{position:relative;display:grid;gap:30px;padding-top:4px}
.sg-flipcq{position:relative;z-index:1;container-type:inline-size;justify-self:end;width:min(78%,300px);margin-right:2%;perspective:900px}
/* 카드 바닥 그림자 (카드 상자 바깥 바닥에 옅게) */
.sg-flipcq::after{content:"";position:absolute;left:8%;right:8%;bottom:-16px;height:22px;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,var(--sg-shadow),rgba(22,24,26,0))}
.sg-flip{--u:calc(100cqi / 36);position:relative;width:100%;aspect-ratio:1.586}
.sg-flip .rs-card{position:absolute;inset:0;width:auto;padding:calc(2.6 * var(--u)) calc(2.8 * var(--u)) calc(2.4 * var(--u))}
.sg-fnum{font-size:calc(2.55 * var(--u))!important;font-weight:600!important;letter-spacing:.05em!important;margin-bottom:calc(.5 * var(--u));text-shadow:none!important;
  filter:drop-shadow(0 calc(.1 * var(--u)) 0 rgba(0,0,0,.65)) drop-shadow(0 calc(-.05 * var(--u)) 0 rgba(255,255,255,.16))}
.sg-back{transform:scaleX(-1);opacity:0;justify-content:flex-start;gap:0;padding:0!important}
.sg-stripe{display:block;margin-top:calc(2.8 * var(--u));height:calc(5 * var(--u));
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,rgba(255,255,255,0) 1px 4px),linear-gradient(180deg,#060708,#1B1E21 50%,#060708)}
.sg-sigrow{display:flex;align-items:center;gap:calc(1 * var(--u));margin:calc(2.2 * var(--u)) calc(2.6 * var(--u)) 0}
.sg-sig{display:block;flex:0 0 62%;height:calc(3.4 * var(--u));border-radius:calc(.35 * var(--u));
  background:repeating-linear-gradient(-45deg,#F3F1EA 0 calc(.55 * var(--u)),#E2DED2 calc(.55 * var(--u)) calc(1.1 * var(--u)))}
.sg-cvc{padding:calc(.5 * var(--u)) calc(.9 * var(--u));border-radius:calc(.3 * var(--u));background:#F3F1EA;color:#26292C;
  font-size:max(8px,calc(1.55 * var(--u)));line-height:1.2;font-weight:700;font-style:italic;letter-spacing:.12em}
.rs-card .sg-fine{position:static;display:block;margin:calc(1 * var(--u)) calc(2.6 * var(--u)) 0;max-width:62%;font-size:max(5.5px,calc(1 * var(--u)));line-height:1.35;
  letter-spacing:.04em;font-weight:600;opacity:.5;white-space:normal}
.rs-card .sg-fine + .sg-fine{margin-top:calc(.4 * var(--u))}
.sg-holo-b{top:auto;bottom:calc(2.4 * var(--u))}
.sg-form{width:100%;max-width:440px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:22px;row-gap:4px}
/* 입력 칸: 상자 대신 밑줄. 지금 채우는 칸은 민트 밑줄이 켜진다 */
.sg-field{position:relative;min-width:0;padding:10px 0 9px;border-bottom:1px solid #DADCD9}
.sg-f-wide{grid-column:1 / -1}
.sg-field span{display:block;font-size:12.5px;line-height:1.4;font-weight:600;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-field small{margin-left:4px;font-size:11.5px;font-weight:700;color:var(--ink-2)}
.sg-field b{display:block;min-height:1.4em;margin-top:2px;font-size:18px;line-height:1.4;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:nowrap}
.sg-ring{position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--mint);opacity:0;pointer-events:none}
.sg-fly{position:absolute;left:0;top:0;z-index:5;opacity:0;padding:4px 9px;border-radius:9px;background:#fff;color:var(--ink);
  font-size:15px;font-weight:800;line-height:1.3;letter-spacing:.04em;font-variant-numeric:tabular-nums;white-space:nowrap;
  box-shadow:0 8px 18px -8px rgba(20,22,24,.38),inset 0 0 0 1.5px var(--mint)}

/* ---------- 목록 공통: 상자 없이 가는 선으로만 줄을 나눈다 ---------- */
.sg-erase dl,.sg-ok dl,.sg-check ul,.sg-zero{max-width:440px}
.sg-erase dl{display:grid;margin:0}
.sg-erase dl div{display:flex;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.45;color:var(--ink-2)}
.sg-erase dl div:first-child{border-top:1px solid var(--line)}
.sg-erase dd{font-weight:700;color:var(--ink);letter-spacing:.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.sg-erase p,.sg-check p{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:15px;line-height:1.4;font-weight:800;color:var(--ink)}
.sg-erase .ck,.sg-check .ck{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--mint)}
.sg-erase .ck svg,.sg-check .ck svg{width:64%;height:64%;fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.sg-check p{font-weight:700;color:var(--ink-2)}

/* 승인: 체크 + 큰 금액이 글 줄기에 맞춰 왼쪽에. 민트는 체크에만 */
.sg-ok{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:center}
.sg-ok-ic{grid-row:span 2;display:block;width:60px;height:60px;fill:none;stroke-linecap:round;stroke-linejoin:round}
.sg-ok-ic circle{stroke:var(--mint);stroke-width:3.2}
.sg-ok-ic path{stroke:var(--mint-ink);stroke-width:3.6}
.sg-ok > b{display:block;align-self:end;font-size:15px;line-height:1.4;color:var(--ink-2)}
.sg-ok > em{display:block;align-self:start;font-style:normal;font-size:36px;line-height:1.2;font-weight:800;color:var(--ink);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.sg-ok dl{grid-column:1 / -1;display:grid;margin:22px 0 0}
.sg-ok dl div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line);font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.sg-ok dl div:last-child{border-bottom:1px solid var(--line)}
.sg-ok dd{font-weight:700;color:var(--ink);white-space:nowrap}

/* 정산: 시계 + 10분·익일·3일 고르기 (옅은 띠 위에 바로) */
.sg-speed{display:grid;justify-items:start;gap:16px}
.sg-clock{width:112px;height:112px;fill:none;stroke-linecap:round;filter:drop-shadow(0 10px 14px rgba(22,24,26,.10))}
.sg-clock circle,.sg-clock path{vector-effect:non-scaling-stroke}
.sg-clock circle{stroke:#DADDDA;stroke-width:3;fill:#fff}
.sg-clock .sg-tick{stroke:#B4B9B6;stroke-width:2.5}
.sg-clock .sg-hand path{stroke:var(--ink);stroke-width:3.5}
.sg-clock .sg-pin{fill:var(--mint);stroke:none}
.sg-cap{position:relative;width:100%;max-width:320px;height:28px}
.sg-cap span{position:absolute;left:0;right:0;top:0;font-size:19px;line-height:28px;font-weight:800;color:var(--ink);white-space:nowrap;opacity:0}
.sg-cap span:last-child{opacity:1}
.sg-chips{position:relative;width:100%;max-width:320px;display:grid;grid-template-columns:repeat(3,1fr);padding:4px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px #E1E4E2}
.sg-chips span{position:relative;z-index:1;text-align:center;font-size:15px;line-height:40px;font-weight:800;color:var(--ink)}
.sg-ind{position:absolute;left:4px;top:4px;bottom:4px;width:calc((100% - 8px) / 3);border-radius:var(--r-pill);
  background:#fff;box-shadow:inset 0 0 0 1.5px var(--mint),0 2px 8px -3px rgba(20,22,24,.22)}

/* 이용 조건: 체크(해외 카드는 X) */
.sg-check ul{list-style:none;margin:0;padding:0;display:grid}
.sg-check li{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.4;font-weight:700;color:var(--ink)}
.sg-check li:first-child{border-top:1px solid var(--line)}
.sg-check li.sg-no{color:var(--ink-3);text-decoration:line-through;text-decoration-thickness:1.5px}
.sg-check li.sg-no .ck{background:#C5CACE}

/* 4단계: 지금 단계에 흰 바탕이 옮겨 가고, 폰 화면이 단계에 맞게 바뀐다.
   폰은 띠 위에 바로 서고, 띠 아래쪽으로 조금 걸쳐 다음 구간까지 이어진다 */
.sg-steps-box{position:relative;margin-top:var(--t-gap-cta)}
.sx-sugi .sg-steps{position:relative;z-index:1;margin-top:0;gap:4px}
.sg-steps li{min-height:66px;padding:10px 12px;align-content:center;border-radius:14px}
.sg-steps li::before{background:var(--ink)}
.sg-step-hl{position:absolute;left:0;right:0;top:0;height:66px;border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(22,24,26,.04),0 8px 22px -14px rgba(22,24,26,.28);opacity:0}
.sg-phone{position:relative;z-index:1;height:500px;margin-top:36px;margin-bottom:-40px;container-type:size;--u:1cqh}
@supports not (height:1cqh){ .sg-phone{--u:5px} }
/* 폰 바닥 그림자 */
.sg-phone::before{content:"";position:absolute;left:50%;bottom:58px;width:46%;height:26px;translate:-50% 0;border-radius:50%;
  background:radial-gradient(closest-side,rgba(22,24,26,.22),rgba(22,24,26,0))}
.sg-phone .rs-ph{top:0;bottom:auto;margin:0 auto;height:calc(100% - 70px);
  box-shadow:calc(var(--d) * .45 * var(--u)) 0 0 0 #C3CAD0,calc(var(--d) * .95 * var(--u)) 0 0 0 #8B949C,calc(var(--d) * 1.45 * var(--u)) 0 0 0 #5F676F,
    calc(var(--d) * 3 * var(--u)) calc(3 * var(--u)) calc(6 * var(--u)) calc(-1 * var(--u)) rgba(22,24,26,.22)}
.sg-scr{opacity:0}
.rs-screen .sg-scr:first-child{opacity:1}
.sg-hl{position:absolute;left:3%;top:36.4%;width:94%;height:7.4%;box-sizing:border-box;border:calc(.5 * var(--u)) solid var(--mint);border-radius:calc(2 * var(--u));
  background:rgba(92,191,164,.08);opacity:0;z-index:6}
/* 휴대폰 화면에선 단계 목록이 폰 위에 있어 같이 안 보이므로, 폰 아래에 지금 단계 이름을 띄운다 */
.sg-phcap{position:absolute;left:50%;bottom:4px;z-index:3;width:min(100%,300px);translate:-50% 0;height:44px;border-radius:var(--r-pill);background:#fff;
  box-shadow:0 0 0 1px rgba(22,24,26,.04),0 8px 20px -12px rgba(22,24,26,.32)}
.sg-phcap span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;font-size:15px;font-weight:800;color:var(--ink);white-space:nowrap;opacity:0}
.sg-phcap span:first-child{opacity:1}
.sg-phcap b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;font-size:12px}
/* 폰이 걸친 만큼 다음 구간 위쪽을 띄운다 */
.sg-s-fl + .sg-sec{padding-top:calc(var(--sg-sec) + 40px)}

/* 사업자 전용: 고정비 0원 */
.sg-zero{list-style:none;margin:28px 0 0;padding:0;display:grid}
.sg-zero li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.sg-zero li:first-child{border-top:1px solid var(--line)}
.sg-zero span{font-size:15.5px;line-height:1.4;font-weight:700;color:var(--ink-2)}
.sg-zero b{display:block;font-variant-numeric:tabular-nums;font-size:28px;line-height:1.2;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.sg-s-biz .rs-fee{margin-top:20px;max-width:36em;word-break:keep-all}
.sg-s-biz .rs-fee > span{display:block}

/* ---------- FAQ · 하단 배너 · 고지: 같은 바탕 위에 그대로 ---------- */
.sx-sugi .sx-faq{background:transparent;padding:var(--sg-sec) 0 40px;position:relative}
.sx-sugi .sx-faq::before{content:"";position:absolute;top:0;height:1px;background:var(--line);
  left:max(var(--sg-g),calc((100% - 1180px) / 2 + var(--sg-g)));right:max(var(--sg-g),calc((100% - 1180px) / 2 + var(--sg-g)))}
.sx-sugi .sx-faq summary,.sx-sugi .sx-faq .sx-body{word-break:keep-all}
.sx-sugi .sx-faq .sx-wrap{max-width:1180px;padding-inline:var(--sg-g)}
.sx-sugi .rs-cta{background:transparent;padding:8px var(--sg-g) 20px}
.sx-sugi .rs-cta-card{max-width:1116px}
.sx-sugi .rs-legal{background:transparent;padding-top:8px}

/* ---------- PC: 글과 그림을 좌우로 번갈아 (격자 타일 없음) ---------- */
@media (min-width:900px){
  .sx-sugi{--sg-g:32px;--sg-sec:112px}
  .sg-hero{padding:56px 0 48px}
  .sg-hero-in{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px}
  .sg-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(56px,7vw,120px);align-items:center}
  .sg-rev .sg-row{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
  .sg-rev .sg-copy{order:2}
  .sg-vis{margin-top:0}
  .sg-sec .rs-lead{font-size:16.5px}
  /* 입력: 카드는 글 쪽으로 살짝 넘어와 앉고, 입력 칸은 오른쪽 아래로 비켜 번호가 대각선으로 흐른다 */
  .sg-s-in{padding-top:40px}
  .sg-in-vis{gap:40px}
  .sg-flipcq{justify-self:start;width:min(68%,340px);margin:0 0 0 -24px}
  .sg-form{justify-self:end;max-width:460px}
  .sg-erase,.sg-ok{justify-self:center;width:100%;max-width:440px}
  .sg-s-st .sg-speed{justify-items:center}
  .sg-s-st .sg-clock{width:170px;height:170px}
  .sg-s-st .sg-cap span{text-align:center}
  .sg-check,.sg-zero{justify-self:end;width:100%}
  .sg-s-fl .sg-row{align-items:start}
  .sg-s-fl .sg-copy{padding-top:24px}
  .sg-phone{height:640px;margin:0 0 -88px}
  .sg-phone .rs-ph{height:calc(100% - 40px)}
  .sg-phone::before{bottom:20px}
  .sg-s-fl + .sg-sec{padding-top:calc(var(--sg-sec) + 88px)}
  .sg-phcap{display:none}
  .sg-s-biz .sg-row{grid-template-areas:"copy vis" "fee vis";grid-template-rows:auto 1fr}
  .sg-s-biz .sg-copy{grid-area:copy;align-self:end}
  .sg-s-biz .rs-fee{grid-area:fee;align-self:start}
  .sg-s-biz .sg-zero{grid-area:vis;margin-top:0;align-self:center}
  .sx-sugi .sx-faq{padding-bottom:64px}
}