/* 대금결제 시안 「거래 장부」 (2026-10-07, 2026-10-08 품목: 용달이사·스드메·가족사진·외주 용역비)
   - 실사 배경 사진을 빼고 그전 구성으로: 흰 장부 종이 + 아주 옅은 가로 장부선(정적). 사진은 맨 아래 배너에만.
   - 주인공은 서류(수강료 고지서 → 카드결제 도장)·카드·입금 내역 같은 실물과 큰 숫자. 휴대폰 화면은 쓰지 않는다.
   - 네모 상자에 가두지 않는다: 종이·카드·내역은 테두리 없이 장부 위에 바로 놓이고 녹청 그림자만 진다.
     살짝 기울고, 구역 경계를 조금 넘어 겹친다(가로로는 화면 밖으로 나가지 않게).
   - 민트는 포인트로만, 글자는 짙은 녹청 잉크. 어두운 구역 없음.
   - 왼쪽 정렬 편집 레이아웃: PC는 왼쪽 여백 칸에 01·02… 번호, 그 옆 세로 여백선.
   - 글자 간격은 sian-rent.css 의 .sx 공통 토큰(--t-*)을 그대로 쓴다.
   - 움직임은 JS가 transform/opacity/stroke-dashoffset/글자만. JS 없어도 최종 모습 그대로 보인다. */

.sx-invoice{
  --iv-ink:#173F38;          /* 제목·숫자 잉크: 짙은 녹청 */
  --iv-ink-2:#4A5754;        /* 본문 */
  --iv-ink-3:#71807C;        /* 보조 */
  --iv-rule:rgba(23,63,56,.16);
  --iv-rule-2:rgba(23,63,56,.30);
  --iv-hair:rgba(23,63,56,.045);
  --iv-mint:#5CBFA4;
  --iv-mint-ink:#1F7A63;
  --iv-hl:rgba(92,191,164,.32);
  /* 종이 그림자: 녹청 기운, 바닥에 닿은 진한 그림자 + 넓게 퍼지는 옅은 그림자 */
  --iv-sh:0 1px 1px rgba(23,63,56,.07),0 4px 10px -6px rgba(23,63,56,.16),0 16px 28px -16px rgba(23,63,56,.22),0 34px 56px -32px rgba(23,63,56,.40);
  /* 종이 결: 아주 옅은 섬유 노이즈 (SVG 한 장, 이미지 파일 없음) */
  --iv-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .18 0 0 0 0 .14 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --iv-print:"Noto Serif KR","Nanum Myeongjo","AppleMyungjo","Batang","바탕",serif;
  --iv-gut:20px;
  --iv-pad:88px;
}

/* ---------- 배경: 월세 시안의 민트 그라데이션을 끄고 장부 종이로 ---------- */
body.sx-rent.sx-invoice{background:#fff}
.sx-invoice .iv-main{position:relative;background:#fff repeating-linear-gradient(180deg,transparent 0 35px,var(--iv-hair) 35px 36px)}

/* ---------- 글자 색·간격 (공통 토큰 위에 이 페이지 잉크만) ---------- */
.sx-invoice .rs-h1,.sx-invoice .rs-h2{color:var(--iv-ink);text-wrap:balance;word-break:keep-all}
.sx-invoice .rs-h2{line-height:var(--t-h2-lh)}
.sx-invoice .rs-key{color:var(--iv-mint-ink)}
.sx-invoice .rs-lead{color:var(--iv-ink-2);line-height:var(--t-body-lh);word-break:keep-all}
.sx-invoice .rs-eyebrow{color:var(--iv-mint-ink)}
.sx-invoice .sx-btn-primary{background:var(--iv-ink)}
.sx-invoice .sx-btn-primary:hover{background:#0F2E29}
.sx-invoice .sx-btn-ghost{background:#fff;box-shadow:inset 0 0 0 1px var(--iv-rule)}
.sx-invoice .rs-inline-cta{color:var(--iv-mint-ink);margin-top:var(--t-gap-cta)}
.sx-invoice .sx-btn{transition:transform .16s cubic-bezier(.23,1,.32,1),background-color .2s ease}
.sx-invoice .sx-btn:active{transform:scale(.97)}
.sx-num{font-variant-numeric:tabular-nums}
.sx-invoice .nw{white-space:nowrap}

/* ---------- 구역 뼈대 ---------- */
.iv-sec{position:relative}
.iv-in{max-width:1180px;margin-inline:auto;padding:var(--iv-pad) var(--iv-gut) 0;position:relative}
.iv-split-sec .iv-in{padding-bottom:var(--iv-pad)}

/* 구역 번호: 휴대폰은 제목 위 한 줄, PC는 왼쪽 여백 칸 */
.iv-no{display:flex;align-items:center;gap:10px;margin:0 0 var(--t-gap-tag);font-size:13px;font-weight:700;color:var(--iv-mint-ink);letter-spacing:-.01em;line-height:1.4}
.iv-no .sx-num{font-weight:800;color:var(--iv-ink)}
.iv-no i{width:22px;height:1px;background:var(--iv-rule-2);flex:none}
.iv-no::after{content:"";flex:1;height:1px;background:var(--iv-rule)}

.iv-head{max-width:34em}
.iv-head .rs-lead{max-width:32em}

/* 공통 가는 선(.ln): 아래쪽에 깔리고, JS가 왼쪽부터 그린다 */
.ln{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--iv-rule);transform-origin:0 50%}

/* 체크 표시 */
.iv-ck{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--iv-mint-ink);flex:none}
.iv-ck svg{width:64%;height:64%;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* 형광펜 */
.iv-hl{position:absolute;left:-.06em;right:-.06em;bottom:.08em;height:.36em;background:var(--iv-hl);transform-origin:0 50%;z-index:-1;border-radius:2px}

/* =================== 0. 히어로 =================== */
/* 휴대폰 첫 화면: 글 + 고지서 + 도장까지 촘촘히 */
.iv-hero .iv-in{padding-top:24px;padding-bottom:8px;display:grid;gap:26px}
.iv-hero-copy .rs-lead{max-width:24em}

/* 수강료 고지서: 인쇄된 양식 느낌 — 명조 제목, 자간 벌린 칸 이름, 녹청 양식선 */
.iv-hero-doc{position:relative;isolation:isolate;padding:30px 2px 12px}
/* 신용카드 실물: 고지서 밑에 깔려 오른쪽 위로 비죽 나와 있다(글을 가리지 않게). 민트 펄 + 금색 칩 + 위쪽 빛 반사 */
.iv-cardprop{position:absolute;z-index:-1;right:10px;top:4px;width:148px;aspect-ratio:85.6/54;border-radius:9px;transform:rotate(8deg);
  background:
    linear-gradient(115deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 38%),
    radial-gradient(120% 140% at 100% 100%,#3E9C82 0%,#5CBFA4 55%,#9ADBC8 100%);
  box-shadow:0 1px 1px rgba(23,63,56,.22),0 6px 10px -4px rgba(23,63,56,.28),0 22px 30px -16px rgba(23,63,56,.38),inset 0 0 0 1px rgba(255,255,255,.35)}
.iv-cardprop::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:.35;mix-blend-mode:overlay;background:var(--iv-grain)}
.iv-chip{position:absolute;left:14px;top:20px;width:24px;height:18px;border-radius:4px;
  background:linear-gradient(135deg,#F3DFA4,#C9A65A 60%,#E8D08E);box-shadow:inset 0 0 0 1px rgba(110,80,20,.35)}
.iv-chip::before{content:"";position:absolute;left:3px;right:3px;top:50%;height:1px;background:rgba(110,80,20,.4)}
.iv-cardprop b{position:absolute;left:14px;bottom:11px;font-size:11px;font-weight:700;letter-spacing:.12em;color:rgba(255,255,255,.92);text-shadow:0 1px 0 rgba(23,63,56,.25)}
.iv-doc{
  position:relative;max-width:520px;padding:16px 16px 16px;color:var(--iv-ink);
  background:
    radial-gradient(130% 80% at 0% 0%,rgba(255,255,255,1),rgba(255,255,255,0) 60%),
    linear-gradient(176deg,#FFFFFF 0%,#FBFCFA 60%,#F4F7F5 100%);
  box-shadow:var(--iv-sh),inset 0 0 0 1px rgba(23,63,56,.05);
  border-radius:3px;transform:rotate(-1.2deg);transform-origin:50% 60%;
}
/* 종이 섬유 결 + 오른쪽 아래 살짝 들린 모서리 그늘 */
.iv-doc::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.3;mix-blend-mode:multiply;
  background:
    radial-gradient(150px 70px at 100% 100%,rgba(23,63,56,.10),rgba(23,63,56,0) 70%),
    var(--iv-grain)}
/* 밑에 한 장 더 깔린 종이 (두께) */
.iv-doc::after{content:"";position:absolute;left:5px;right:7px;bottom:-5px;height:6px;border-radius:0 0 3px 3px;background:linear-gradient(180deg,#E9F0ED,#F4F8F6);z-index:-1;box-shadow:0 1px 1px rgba(23,63,56,.12);transform:rotate(.5deg)}
.iv-doc-top{position:relative;text-align:center;padding-bottom:12px}
.iv-doc-no{position:absolute;right:0;top:0;font-size:9.5px;font-weight:600;color:var(--iv-ink-3);letter-spacing:.04em}
.iv-doc-month{position:absolute;left:0;top:0;font-size:9.5px;font-weight:700;color:var(--iv-mint-ink);letter-spacing:.04em}
.iv-doc-title{display:inline-block;margin-top:16px;font-family:var(--iv-print);font-size:20px;font-weight:800;letter-spacing:.18em;margin-right:-.18em;padding:4px 2px 6px;border-bottom:3px double var(--iv-mint-ink);line-height:1.2;white-space:nowrap}
.iv-doc-sub{display:block;margin-top:6px;font-size:10.5px;font-weight:600;color:var(--iv-ink-3);letter-spacing:.06em}
.iv-doc-parties{border:1px solid var(--iv-rule-2);font-size:11.5px;line-height:1.35}
.iv-doc-parties dl{margin:0;display:grid;grid-template-columns:1.25fr 1fr 1fr}
.iv-doc-parties dl > div{padding:7px 8px;min-width:0}
.iv-doc-parties dl > div + div{border-left:1px solid var(--iv-rule)}
.iv-doc-parties dt{color:var(--iv-mint-ink);font-weight:700;font-size:9.5px;letter-spacing:.08em;margin-bottom:2px}
.iv-doc-parties dd{margin:0;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iv-doc-parties dd small{font-size:.86em;font-weight:600;color:var(--iv-ink-3)}
/* 상호 옆 (인) 자리 */
.iv-seal{display:inline-grid;place-items:center;width:15px;height:15px;margin-left:4px;border-radius:50%;border:1px solid rgba(178,58,48,.55);font-style:normal;font-size:8.5px;font-weight:700;color:rgba(178,58,48,.75);vertical-align:1px;line-height:1}
.iv-doc-tb{margin-top:12px}
.iv-doc-r{position:relative;display:grid;grid-template-columns:1fr 46px 76px;gap:8px;padding:7px 2px;font-size:12.5px;min-height:32px;align-items:center}
.iv-doc-r span:nth-child(2){text-align:center}
.iv-doc-r span:nth-child(3){text-align:right}
.iv-doc-th{font-size:10.5px;font-weight:700;color:var(--iv-mint-ink);min-height:0;padding-top:0;letter-spacing:.1em}
.iv-doc-th .ln{background:var(--iv-rule-2)}
.iv-doc-r .c{font-weight:700;white-space:nowrap}
.iv-doc-r .c:nth-child(2){font-weight:600;color:var(--iv-ink-2)}
.iv-doc-sum{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;padding:10px 2px 0;border-top:2px solid var(--iv-ink);font-size:11.5px;font-weight:700;color:var(--iv-ink-2);letter-spacing:.06em}
.iv-doc-sum b{position:relative;z-index:0;font-size:22px;font-weight:800;color:var(--iv-ink);letter-spacing:-.02em}
.iv-doc-foot{margin-top:12px;padding-top:8px;border-top:1px dashed var(--iv-rule-2);font-size:10px;font-weight:600;color:var(--iv-ink-3);letter-spacing:.02em;white-space:nowrap}
.iv-doc-foot > span:first-child{color:var(--iv-mint-ink);font-weight:700;margin-right:4px}
/* 카드결제 도장: 녹색 잉크, 이중 테두리, 살짝 기운. 잉크는 종이에 스며든 듯(곱하기) + 군데군데 덜 묻은 결 */
.iv-stamp{position:absolute;right:134px;bottom:30px;width:86px;height:86px;transform:rotate(-9deg);mix-blend-mode:multiply;pointer-events:none}
.iv-stamp-ink{position:absolute;inset:0;display:grid;place-content:center;border-radius:50%;font-style:normal;
  border:3px solid rgba(31,122,99,.86);box-shadow:inset 0 0 0 3px rgba(255,255,255,0),inset 0 0 0 4.5px rgba(31,122,99,.72);
  color:rgba(31,122,99,.9);text-align:center;line-height:1.15;
  background:radial-gradient(circle at 38% 34%,rgba(92,191,164,.12),rgba(92,191,164,.05) 60%,rgba(92,191,164,0) 72%);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.2 0 0 0 2.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.2 0 0 0 2.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%;mask-size:100% 100%}
.iv-stamp b{display:block;font-size:16px;font-weight:900;letter-spacing:.04em}
.iv-stamp small{display:block;margin-top:3px;padding-top:3px;border-top:1px solid rgba(31,122,99,.55);font-size:9.5px;font-weight:800;letter-spacing:.16em;margin-right:-.16em}
/* JS가 켜지기 전에 서류·도장이 먼저 보였다 사라지는 깜빡임 방지 (JS 실패 시 boot 가 rs-motion 을 떼서 다시 보인다) */
.rs-motion:not(.iv-js) .iv-doc,.rs-motion:not(.iv-js) .iv-stamp,.rs-motion:not(.iv-js) .iv-cardprop{opacity:0}

/* =================== 1. 금액 =================== */
.iv-amt{margin-top:32px}
.iv-amt-row{display:grid;gap:6px}
.iv-k{font-size:14px;font-weight:700;color:var(--iv-ink-3);letter-spacing:-.01em}
.iv-mid{font-size:clamp(30px,8.4vw,56px);font-weight:800;color:var(--iv-ink-2);letter-spacing:-.035em;line-height:1.1}
.iv-big{position:relative;z-index:0;display:inline-block;justify-self:start;font-size:clamp(50px,15.2vw,148px);font-weight:800;color:var(--iv-ink);letter-spacing:-.04em;line-height:1.02}
.iv-mid small,.iv-big small{font-size:.42em;font-weight:800;margin-left:.08em;letter-spacing:-.02em}
.iv-amt-flow{position:relative;height:44px;margin:12px 0 10px 14px;width:2px}
.iv-amt-line{position:absolute;left:0;top:0;bottom:8px;width:2px;background:var(--iv-mint);transform-origin:50% 0}
.iv-amt-tip{position:absolute;left:-5px;bottom:0;width:12px;height:12px;border-right:2px solid var(--iv-mint);border-bottom:2px solid var(--iv-mint);transform:rotate(45deg);transform-origin:50% 50%}
.iv-note{margin-top:14px;font-size:13px;color:var(--iv-ink-3);line-height:var(--t-body-lh)}

/* =================== 2. 받는 분은 그대로 (입금 내역 + 장부 줄) =================== */
.iv-free-side{position:relative;margin-top:30px}
/* 입금 내역 한 장: 상자 테두리 없이 종이 한 장이 장부 위에 기울어 놓이고, 아래 장부 굵은 선을 살짝 덮는다 */
.iv-dep{position:relative;z-index:1;width:min(272px,calc(100% - 22px));margin:0 4px -14px auto;padding:12px 15px 18px;color:var(--iv-ink);
  background:linear-gradient(176deg,#FFFFFF 0%,#FAFCFB 100%);box-shadow:var(--iv-sh);border-radius:3px;transform:rotate(2deg)}
.iv-dep::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;mix-blend-mode:multiply;background:var(--iv-grain)}
.iv-dep-h{display:flex;align-items:center;justify-content:space-between;padding-bottom:9px;margin-bottom:10px;border-bottom:1px dashed var(--iv-rule-2);font-size:11.5px;font-weight:800;letter-spacing:.02em}
.iv-dep-h em{font-style:normal;font-size:10px;font-weight:700;color:var(--iv-ink-3)}
.iv-dep-r{display:grid;grid-template-columns:1fr auto;grid-template-areas:"t k" "n a";row-gap:3px;align-items:baseline}
.iv-dep-t{grid-area:t;font-size:11px;font-weight:600;color:var(--iv-ink-3)}
.iv-dep-k{grid-area:k;justify-self:end;font-size:11px;font-weight:800;color:var(--iv-mint-ink)}
.iv-dep-n{grid-area:n;font-size:15px;font-weight:800;letter-spacing:-.01em}
.iv-dep-a{grid-area:a;font-size:19px;font-weight:800;color:var(--iv-mint-ink);letter-spacing:-.02em}
.iv-rows{list-style:none;margin:0;padding:0;border-top:2px solid var(--iv-ink)}
.iv-rows li{position:relative;display:grid;grid-template-columns:minmax(92px,auto) 1fr 22px;gap:14px;align-items:center;padding:17px 2px}
.iv-rows .iv-k{font-size:13.5px}
.iv-rows b{font-size:17px;font-weight:800;color:var(--iv-ink);letter-spacing:-.02em;line-height:1.35}

/* =================== 3. 카드 이용내역 =================== */
.iv-stmt{position:relative;z-index:1;margin:32px 6px -36px 2px;max-width:600px;background:#FFFEFB;box-shadow:var(--iv-sh);border-radius:3px;padding:6px 16px 12px;transform:rotate(-1deg)}
.iv-stmt::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.22;mix-blend-mode:multiply;background:var(--iv-grain)}
.iv-stmt-h{display:flex;justify-content:space-between;padding:12px 0 10px;border-bottom:2px solid var(--iv-ink);font-size:11.5px;font-weight:800;color:var(--iv-ink);letter-spacing:.05em}
.iv-stmt-r{position:relative;z-index:0;display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;min-height:50px;border-bottom:1px solid var(--iv-rule);font-size:14px}
.iv-stmt-r:last-child{border-bottom:0}
.iv-ghost i{display:block;height:8px;border-radius:4px;background:#EDF2F0}
.iv-ghost i:nth-child(2){width:62%}
.iv-ghost i:nth-child(3){width:64px}
.iv-on .d{font-size:12.5px;color:var(--iv-ink-3);font-weight:700}
.iv-on .m{font-weight:800;color:var(--iv-ink)}
.iv-on .a{font-size:17px;font-weight:800;color:var(--iv-ink);letter-spacing:-.02em}
.iv-on .iv-hl{left:-8px;right:-8px;top:8px;bottom:8px;height:auto;border-radius:3px;background:rgba(92,191,164,.22)}

/* =================== 4. 색인 (결제 대상 · 서류) =================== */
.iv-index{list-style:none;margin:32px 0 0;padding:0;border-top:2px solid var(--iv-ink)}
.iv-index li{position:relative;display:grid;gap:6px;padding:18px 2px 17px}
.iv-ix-w{font-size:clamp(30px,8.2vw,60px);font-weight:800;color:var(--iv-ink);letter-spacing:-.035em;line-height:1.1;justify-self:start;word-break:keep-all}
.iv-ix-d{font-size:14.5px;color:var(--iv-ink-2);line-height:1.5}
.iv-docs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;margin-top:24px}
.iv-docs-k{font-size:13.5px;font-weight:700;color:var(--iv-ink-3);width:100%}
.iv-chk{display:inline-flex;align-items:center;gap:8px;min-height:36px;font-size:15px;font-weight:800;color:var(--iv-ink);line-height:1.3}
.iv-chk small{font-size:12px;font-weight:600;color:var(--iv-ink-3);margin-left:2px}

/* =================== 5. 진행 순서 (세로 선) =================== */
.iv-flow-grid{display:grid;gap:36px;margin-top:32px}
.iv-rail{position:relative}
.iv-rail-svg{position:absolute;left:10px;top:12px;bottom:40px;width:2px;height:calc(100% - 52px);overflow:visible}
.iv-rail-svg path{fill:none;stroke-width:2}
.iv-rail-svg .bg{stroke:var(--iv-rule)}
.iv-rail-svg .fg{stroke:var(--iv-mint-ink)}
.iv-steps{list-style:none;margin:0;padding:0;display:grid;gap:30px}
.iv-steps li{position:relative}
/* 단계는 누를 수 있는 버튼: 누르면 옆(아래)의 납부 진행이 그 단계로 넘어간다 */
.iv-step{position:relative;display:block;width:100%;margin:0;padding:0 0 0 42px;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:6px}
.iv-step:focus-visible{outline:2px solid var(--iv-mint-ink);outline-offset:6px}
.iv-steps b{display:block;font-size:19px;font-weight:800;color:var(--iv-ink);letter-spacing:-.02em;line-height:1.3}
.iv-step-d{display:block;margin-top:6px;font-size:15px;line-height:var(--t-body-lh);color:var(--iv-ink-2);max-width:30em;word-break:keep-all}
.iv-node{position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px var(--iv-rule-2)}
.iv-node i{position:absolute;inset:0;border-radius:50%;background:var(--iv-mint-ink);box-shadow:0 0 0 5px rgba(92,191,164,.22)}
.iv-node i::after{content:"";position:absolute;inset:7px;border-radius:50%;background:#fff}
.iv-step[aria-pressed="true"] b{text-decoration:underline;text-decoration-color:var(--iv-mint);text-decoration-thickness:2px;text-underline-offset:5px}
@media (hover:hover){.iv-step:hover b{color:var(--iv-mint-ink)}}

/* 납부 진행 한 건: 상자 없이 장부 위에 글·선·숫자만. 뒤로 민트 빛이 아주 옅게 번진다 */
.iv-pay{position:relative;z-index:0;padding:4px 0 0 42px;color:var(--iv-ink)}
.iv-pay::before{content:"";position:absolute;z-index:-1;left:12%;right:-6%;top:-14%;bottom:-18%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(92,191,164,.16),rgba(92,191,164,0))}
.iv-pay-h{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:2px solid var(--iv-ink);font-size:12px;font-weight:800;letter-spacing:.02em;white-space:nowrap}
.iv-pay-h span:last-child{font-weight:700;color:var(--iv-ink-3)}
.iv-pay-track{position:relative;display:flex;justify-content:space-between;align-items:center;height:14px;margin:18px 0 0}
.iv-pay-track::before{content:"";position:absolute;left:5px;right:5px;top:50%;height:2px;margin-top:-1px;background:var(--iv-rule)}
.iv-pay-fill{position:absolute;left:5px;right:5px;top:50%;height:2px;margin-top:-1px;background:var(--iv-mint-ink);transform-origin:0 50%}
.iv-pay-dot{position:relative;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px var(--iv-rule-2)}
.iv-pay-dot i{position:absolute;inset:0;border-radius:50%;background:var(--iv-mint-ink)}
.iv-pay-state{position:relative;margin-top:22px;min-height:58px;padding-right:42px}
.iv-pay-ck{position:absolute;right:0;top:50%;width:32px;height:32px;margin-top:-16px}
.iv-pay-labs{display:grid;min-width:0}
.iv-pay-lab{grid-area:1/1;display:grid;gap:4px;align-content:center}
.iv-pay-lab b{font-size:24px;font-weight:800;letter-spacing:-.03em;line-height:1.2;white-space:nowrap}
.iv-pay-lab small{font-size:13px;font-weight:600;color:var(--iv-ink-3);line-height:1.4}
.iv-pay-lab:not(:last-child){opacity:0}
.iv-pay-amt{display:grid;gap:4px;margin-top:20px;padding-top:14px;border-top:1px solid var(--iv-rule)}
.iv-pay-ks{display:grid}
.iv-pay-k{grid-area:1/1;font-size:13px;font-weight:700;color:var(--iv-mint-ink)}
.iv-pay-k:not(:last-child){opacity:0}
.iv-pay-amt strong{font-size:clamp(34px,10vw,46px);font-weight:800;letter-spacing:-.04em;line-height:1.05}
.iv-pay-amt small{font-size:.44em;font-weight:800;margin-left:.08em;letter-spacing:-.02em}
.iv-flow .rs-btns{margin-top:36px}

/* =================== 6. 나눠 내기 =================== */
.iv-figs{display:grid;grid-template-columns:1fr 1fr;margin-top:32px;border-top:2px solid var(--iv-ink)}
.iv-fig{display:grid;gap:4px;padding:18px 0 4px}
.iv-fig + .iv-fig{padding-left:18px;border-left:1px solid var(--iv-rule)}
.iv-huge{font-size:clamp(64px,20vw,150px);font-weight:800;color:var(--iv-ink);letter-spacing:-.045em;line-height:1}
.iv-huge small{font-size:.3em;font-weight:800;margin-left:.1em;letter-spacing:-.02em}
.iv-fig span{font-size:13.5px;font-weight:700;color:var(--iv-ink-3)}
/* 카드 1·2·3: 실물 카드 비율(85.6:54) · 칩 · 비접촉 표시 · 번호 · 빛 반사 */
.iv-bar{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:30px;padding:6px 2px 10px}
.iv-seg{position:relative;display:block;aspect-ratio:85.6/54;border-radius:8%/12.7%;overflow:hidden;color:#fff;
  box-shadow:0 12px 20px -12px rgba(15,46,41,.55),inset 0 0 0 1px rgba(255,255,255,.16)}
.iv-seg.c1{background:linear-gradient(135deg,#7FDCC0 0%,#3FB592 50%,#2A9478 100%)}
.iv-seg.c2{background:linear-gradient(135deg,#2E3B52 0%,#1B2537 60%,#111827 100%)}
.iv-seg.c3{background:linear-gradient(135deg,#F3F4F2 0%,#CFD3D1 55%,#AEB4B2 100%);color:#26302D}
.iv-seg::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.04) 0 1px,rgba(255,255,255,0) 1px 4px)}
.iv-seg::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.32) 48%,rgba(255,255,255,0) 60%)}
.iv-seg em{position:absolute;left:9%;top:10%;font-style:normal;font-size:clamp(9px,2.6vw,13px);font-weight:800;letter-spacing:-.02em}
.iv-seg .iv-chip{left:9%;top:38%;width:18%;height:22%;border-radius:18%}
.iv-seg .iv-nfc{position:absolute;left:31%;top:39%;width:7%;height:20%;border:1.5px solid currentColor;border-left:0;border-top-color:transparent;border-bottom-color:transparent;border-radius:0 50% 50% 0;opacity:.75}
.iv-seg b{position:absolute;left:9%;bottom:10%;font-size:clamp(8px,2.3vw,12px);font-weight:700;letter-spacing:.08em;opacity:.92}
.iv-bar-one{position:absolute;left:2px;right:2px;top:6px;bottom:10px;display:grid;place-items:center;border-radius:14px;background:var(--iv-ink);color:#fff;font-size:14px;font-weight:800;opacity:0;pointer-events:none;transform-origin:0 50%}

/* ---------- 하단(FAQ·배너)은 장부선 없이 흰 바탕 (sian-rent.css 그대로) ---------- */
.sx-invoice .sx-faq{border-top:1px solid var(--iv-rule)}
.sx-invoice .sx-faq summary{word-break:keep-all}

/* =================== PC =================== */
@media (min-width:900px){
  .sx-invoice{--iv-gut:40px;--iv-pad:132px}
  /* 왼쪽 여백 칸 + 세로 여백선 (장부 느낌) */
  .iv-sec:not(.iv-hero) .iv-in{display:grid;grid-template-columns:120px minmax(0,1fr);column-gap:56px}
  .iv-sec:not(.iv-hero) .iv-in::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--iv-gut) + 120px + 28px);width:1px;background:rgba(92,191,164,.45)}
  .iv-no::after{display:none}
  .iv-no{grid-column:1;flex-direction:column;align-items:flex-start;gap:10px;padding-top:6px;margin:0;font-size:14px}
  .iv-no .sx-num{font-size:30px;letter-spacing:-.03em;line-height:1}
  .iv-no i{width:28px}
  .iv-body{grid-column:2;min-width:0}
  .iv-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:64px;align-items:start}
  .iv-cols .iv-free-side{margin-top:-36px}
  .iv-dep{width:300px;margin:0 18px -16px auto}

  .iv-hero .iv-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:56px;padding-top:56px;padding-bottom:24px;min-height:calc(100vh - 140px)}
  .iv-hero-doc{justify-self:end;width:100%;max-width:520px}
  .iv-doc{padding:26px 28px 24px}
  .iv-doc-no,.iv-doc-month{font-size:10.5px}
  .iv-doc-title{font-size:26px;margin-top:20px}
  .iv-doc-sub{font-size:11px}
  .iv-doc-parties{font-size:13px}
  .iv-doc-parties dt{font-size:10.5px}
  .iv-doc-parties dl > div{padding:9px 11px}
  .iv-seal{width:17px;height:17px;font-size:9.5px}
  .iv-doc-r{font-size:14px;grid-template-columns:1fr 56px 100px;min-height:42px}
  .iv-doc-th{font-size:11px}
  .iv-doc-sum{font-size:12.5px}
  .iv-doc-sum b{font-size:28px}
  .iv-doc-foot{font-size:11.5px}
  .iv-stamp{width:104px;height:104px;right:160px;bottom:46px}
  .iv-stamp b{font-size:20px}
  .iv-stamp small{font-size:10.5px}
  .iv-hero-doc{padding-top:44px}
  .iv-cardprop{width:200px;right:-22px;top:2px;border-radius:12px}
  .iv-chip{left:18px;top:28px;width:32px;height:24px}
  .iv-cardprop b{left:18px;bottom:15px;font-size:13px}

  .iv-amt{margin-top:40px}
  .iv-amt-flow{height:56px}
  .iv-k{font-size:15px}

  .iv-rows li{padding:22px 2px}
  .iv-rows b{font-size:19px}

  .iv-stmt{margin-top:40px;margin-bottom:-60px;padding:8px 22px 14px}
  .iv-stmt-r{grid-template-columns:64px 1fr auto;min-height:58px;font-size:15px}
  .iv-on .a{font-size:19px}

  .iv-index{margin-top:40px}
  .iv-index li{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:baseline;gap:24px;padding:22px 2px 20px}
  .iv-ix-d{font-size:16px}
  .iv-docs{margin-top:28px}
  .iv-docs-k{width:auto;margin-right:8px}

  .iv-flow-grid{grid-template-columns:minmax(0,1fr) minmax(0,330px);column-gap:72px;align-items:start;margin-top:40px}
  .iv-steps{gap:40px}
  .iv-steps b{font-size:21px}
  .iv-step-d{font-size:16px}
  /* 오른쪽 납부 진행은 세로 선을 따라 화면 가운데쯤에 머문다 (CSS sticky, 고정 pin 아님) */
  .iv-pay{position:sticky;top:calc(50vh - 150px);padding:16px 0 0;margin-top:8px}
  .iv-pay-lab b{font-size:30px}
  .iv-pay-amt strong{font-size:52px}

  .iv-figs{max-width:760px;margin-top:40px}
  .iv-fig{padding-top:24px}
  .iv-fig + .iv-fig{padding-left:32px}
  .iv-fig span{font-size:15px}
  .iv-bar{max-width:760px;gap:18px;margin-top:36px}
}