/* 온라인결제 시안 (2026-10-08 새로 만듦): 토스페이먼츠 결제 모듈 연동, 신청은 카카오톡 상담.
   - 카드단말기 페이지와 같은 흰 바탕 · 민트 포인트. 폰 화면은 HTML 로 그린 결제창.
   - 그림 상자는 aspect-ratio 로 크기가 정해지고 넘치면 잘린다 → 어떤 폭에서도 화면 밖으로 안 나간다.
   - 고정(sticky/pin) 없음. 움직임은 transform/opacity 만. */

body.sx-rent.sx-online:not(.x1):not(.x2):not(.x3){background:#fff}
html:has(body.sx-online){overflow-x:clip}
.sx-online{--ol-ink:#131E18;--ol-soft:#F3F7F6;--ol-line:#E3EBE8;--ol-mint:#2FA27F;--ol-blue:#3182F6;--ol-ease:cubic-bezier(.22,1,.36,1)}
.ol-main{overflow:hidden;overflow:clip}
.ol-in{max-width:1120px;margin-inline:auto;padding-inline:20px}
.ol-sec{padding:64px 0 8px;position:relative}
.ol-two{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center}
.ol-copy{min-width:0}
.ol-copy-c{text-align:center}
.ol-copy-c .rs-lead{margin-inline:auto}
.ol-note{margin-top:14px;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.ol-note-c{text-align:center;margin-top:18px}
.ol-ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.ol-ln > span{display:block;will-change:transform}

/* ---------- 폰 (HTML 결제창) ---------- */
.ol-phbox{position:relative;width:100%;max-width:250px;margin-inline:auto;aspect-ratio:.54;container-type:size;--u:3.2px}
@supports (height:1cqh){.ol-phbox{--u:1cqh}}
.ol-phbox .rs-ph{inset:3% auto auto 50%;margin:0;width:auto;height:94%;translate:-50% 0}
.ol-scr{background:#F6F8FA;font-size:calc(2.6 * var(--u));color:#191F28;letter-spacing:-.02em}
.ol-v{position:absolute;inset:0;display:flex;flex-direction:column;padding:calc(7 * var(--u)) calc(3.4 * var(--u)) calc(3.4 * var(--u));opacity:0;transform:translateY(calc(3 * var(--u)));
  transition:opacity .45s ease,transform .6s var(--ol-ease)}
.ol-v.is-on{opacity:1;transform:none}
.ol-bar{display:flex;align-items:center;gap:calc(1.6 * var(--u));margin-bottom:calc(3 * var(--u))}
.ol-bar b{font-size:calc(3.4 * var(--u))}
.ol-back{width:calc(1.8 * var(--u));height:calc(1.8 * var(--u));border-left:2px solid #191F28;border-bottom:2px solid #191F28;transform:rotate(45deg)}
.ol-prod{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:calc(2.2 * var(--u));align-items:center;padding:calc(2.6 * var(--u));border-radius:calc(2.4 * var(--u));background:#fff}
.ol-thumb{grid-row:span 2;width:calc(10 * var(--u));height:calc(10 * var(--u));border-radius:calc(1.8 * var(--u))}
.ol-thumb.t1{background:linear-gradient(140deg,#C9A27E,#6B4A35)}
.ol-thumb.t2{background:linear-gradient(140deg,#F2D7C4,#C98F6B)}
.ol-prod span{min-width:0}
.ol-prod b{display:block;font-size:calc(2.8 * var(--u));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ol-prod small{display:block;margin-top:calc(.5 * var(--u));font-size:calc(2.2 * var(--u));color:#6B7684}
.ol-prod em{grid-column:2;font-style:normal;font-weight:800;font-size:calc(2.7 * var(--u));margin-top:calc(.8 * var(--u))}
.ol-lines{display:grid;grid-template-columns:1fr auto;row-gap:calc(1.4 * var(--u));margin-top:calc(2.4 * var(--u));padding:calc(2.6 * var(--u));border-radius:calc(2.4 * var(--u));background:#fff;color:#4E5968;font-size:calc(2.4 * var(--u))}
.ol-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:calc(2.4 * var(--u));padding:0 calc(.6 * var(--u))}
.ol-total span{font-size:calc(2.5 * var(--u));color:#4E5968}
.ol-total b{font-size:calc(3.8 * var(--u));color:var(--ol-blue)}
.ol-k{margin-top:calc(3 * var(--u));margin-bottom:calc(1.4 * var(--u));font-size:calc(2.4 * var(--u));font-weight:700;color:#4E5968}
.ol-methods{display:grid;grid-template-columns:1fr 1fr;gap:calc(1.2 * var(--u))}
.ol-methods span,.ol-cards span{display:grid;place-items:center;height:calc(6 * var(--u));border-radius:calc(1.6 * var(--u));background:#fff;box-shadow:inset 0 0 0 1px #E5E8EB;font-size:calc(2.3 * var(--u));font-weight:700;color:#4E5968}
.ol-methods span.is-on,.ol-cards span.is-on{box-shadow:inset 0 0 0 2px var(--ol-blue);color:var(--ol-blue)}
.ol-pay{margin-top:auto;display:grid;place-items:center;height:calc(7.4 * var(--u));border-radius:calc(2 * var(--u));background:var(--ol-blue);color:#fff;font-weight:800;font-size:calc(2.9 * var(--u))}
.ol-list{display:grid;gap:calc(1.2 * var(--u))}
.ol-list span{display:flex;align-items:center;gap:calc(1.8 * var(--u));height:calc(6.6 * var(--u));padding:0 calc(2.4 * var(--u));border-radius:calc(1.8 * var(--u));background:#fff;font-weight:700;font-size:calc(2.6 * var(--u))}
.ol-list .r{width:calc(2.8 * var(--u));height:calc(2.8 * var(--u));border-radius:50%;box-shadow:inset 0 0 0 2px #D1D6DB}
.ol-list .is-on{box-shadow:inset 0 0 0 2px var(--ol-blue)}
.ol-list .is-on .r{box-shadow:inset 0 0 0 calc(.9 * var(--u)) var(--ol-blue)}
.ol-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(1.2 * var(--u))}
.ol-auth,.ol-done{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:calc(1.4 * var(--u))}
.ol-auth b,.ol-done b{font-size:calc(3.4 * var(--u));margin-top:calc(2 * var(--u))}
.ol-auth > span,.ol-done > span{font-size:calc(2.4 * var(--u));color:#6B7684}
.ol-card{position:relative;width:calc(24 * var(--u));aspect-ratio:1.586;border-radius:calc(2 * var(--u));background:linear-gradient(135deg,#2B3A55,#121A2B);box-shadow:0 calc(2 * var(--u)) calc(4 * var(--u)) calc(-2 * var(--u)) rgba(0,0,0,.4)}
.ol-card i{position:absolute;left:12%;top:34%;width:20%;height:24%;border-radius:18%;background:linear-gradient(135deg,#F6DA8C,#D7A94B)}
.ol-dots{display:flex;gap:calc(1.4 * var(--u));margin-top:calc(2 * var(--u))}
.ol-dots i{width:calc(2 * var(--u));height:calc(2 * var(--u));border-radius:50%;background:#D1D6DB}
.ol-v[data-k="2"].is-on .ol-dots i{animation:ol-dot 1.6s ease-in-out infinite}
.ol-v[data-k="2"].is-on .ol-dots i:nth-child(2){animation-delay:.12s}
.ol-v[data-k="2"].is-on .ol-dots i:nth-child(3){animation-delay:.24s}
.ol-v[data-k="2"].is-on .ol-dots i:nth-child(4){animation-delay:.36s}
.ol-v[data-k="2"].is-on .ol-dots i:nth-child(5){animation-delay:.48s}
.ol-v[data-k="2"].is-on .ol-dots i:nth-child(6){animation-delay:.6s}
@keyframes ol-dot{0%,100%{background:#D1D6DB}40%{background:var(--ol-blue)}}
.ol-ok{position:relative;display:block;width:calc(13 * var(--u));height:calc(13 * var(--u));border-radius:50%;background:var(--ol-blue)}
.ol-ok::after{content:"";position:absolute;left:36%;top:22%;width:22%;height:42%;border-right:calc(1.2 * var(--u)) solid #fff;border-bottom:calc(1.2 * var(--u)) solid #fff;transform:rotate(45deg)}
.ol-v[data-k="3"].is-on .ol-ok{animation:ol-pop .6s var(--ol-ease)}
@keyframes ol-pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.1);opacity:1}100%{transform:scale(1)}}
.ol-rcpt{display:grid;grid-template-columns:auto 1fr;gap:calc(1.2 * var(--u)) calc(3 * var(--u));width:100%;margin-top:calc(4 * var(--u));padding:calc(2.6 * var(--u));border-radius:calc(2.4 * var(--u));background:#fff;text-align:left;font-size:calc(2.3 * var(--u));color:#4E5968}
.ol-rcpt span:nth-child(even){text-align:right;color:#191F28;font-weight:700}

/* ---------- 0. 히어로 ---------- */
.ol-hero{padding:24px 0 8px}
.ol-hero-vis{position:relative;width:100%;max-width:420px;margin-inline:auto;aspect-ratio:1/1.06;border-radius:28px;overflow:hidden;background:linear-gradient(170deg,#EAF6F2 0%,#F4FAF8 55%,#fff 100%)}
.ol-hero-vis .ol-phbox{position:absolute;left:50%;top:6%;height:82%;width:auto;max-width:none;translate:-50% 0}
.ol-blob{position:absolute;left:50%;top:46%;width:78%;aspect-ratio:1;margin:-39% 0 0 -39%;border-radius:50%;background:radial-gradient(circle,rgba(49,130,246,.16) 0%,rgba(47,162,127,.1) 45%,rgba(255,255,255,0) 70%)}
.ol-chip{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:7px;padding:8px 13px 8px 9px;border-radius:999px;background:#fff;box-shadow:0 10px 22px -12px rgba(20,60,50,.45);font-size:13px;font-weight:800;color:var(--ol-ink);white-space:nowrap}
.ol-chip i{width:18px;height:18px;border-radius:6px;background:var(--ol-mint)}
.ol-chip.c1{left:4%;top:14%}
.ol-chip.c1 i{background:linear-gradient(135deg,#3FBF9C,#1F8A70)}
.ol-chip.c2{right:4%;top:40%}
.ol-chip.c2 i{background:var(--ol-blue);border-radius:50%}
.ol-chip.c3{left:4%;bottom:7%}
.ol-chip.c3 i{background:#F2B544}

/* ---------- 1. 이런 곳에 ---------- */
.ol-uses{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ol-uses li{display:flex;flex-direction:column;padding:16px;border-radius:20px;background:var(--ol-soft);min-width:0}
.ol-uses svg,.ol-pays svg{width:48px;height:48px;padding:10px;border-radius:16px;background:#fff;fill:none;stroke:var(--mint-ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;box-sizing:border-box}
.ol-uses b{margin-top:12px;font-size:16px;color:var(--ol-ink)}
.ol-uses span{margin-top:3px;font-size:13px;line-height:1.5;color:var(--ink-2);word-break:keep-all}

/* ---------- 2. 결제 흐름 ---------- */
.ol-show{min-width:0}
.ol-stage{position:relative;width:100%;max-width:420px;margin-inline:auto;aspect-ratio:1/1.06;border-radius:28px;overflow:hidden;background:linear-gradient(170deg,#EEF4FF 0%,#F6F9FF 55%,#fff 100%)}
.ol-stage .ol-phbox{position:absolute;left:50%;top:6%;height:88%;width:auto;max-width:none;translate:-50% 0}
.ol-blob.b2{background:radial-gradient(circle,rgba(49,130,246,.18) 0%,rgba(49,130,246,.06) 45%,rgba(255,255,255,0) 70%)}
.ol-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-width:420px;margin:12px auto 0}
.ol-row{position:relative;display:flex;align-items:center;gap:10px;min-width:0;min-height:52px;padding:0 12px;border:0;border-radius:16px;overflow:hidden;background:var(--ol-soft);font:inherit;text-align:left;color:var(--ol-ink);cursor:pointer;transition:background .3s,box-shadow .3s}
.ol-row span{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#fff;font-size:12px;font-weight:800;color:var(--ink-2);transition:background .3s,color .3s}
.ol-row b{font-size:14px;letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ol-row.is-on{background:#fff;box-shadow:inset 0 0 0 2px var(--ol-mint)}
.ol-row.is-on span{background:var(--ol-mint);color:#fff}
.ol-row > i{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--ol-mint);transform-origin:left;transform:scaleX(0)}
.ol-row:not(.is-on) > i{opacity:0}
.ol-show .ol-note{max-width:420px;margin-inline:auto;text-align:center}

/* ---------- 3. 결제 수단 ---------- */
.ol-pays{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ol-pays li{display:flex;flex-direction:column;align-items:center;text-align:center;padding:18px 10px;border-radius:20px;background:var(--ol-soft);min-width:0}
.ol-pays b{margin-top:12px;font-size:15.5px;color:var(--ol-ink)}
.ol-pays span{margin-top:2px;font-size:12.5px;color:var(--ink-2)}

/* ---------- 4. 개발 코드 ---------- */
.ol-code{min-width:0;border-radius:22px;overflow:hidden;background:#0F1A17;box-shadow:0 24px 40px -28px rgba(10,40,32,.6)}
.ol-code-h{display:flex;align-items:center;gap:6px;padding:12px 16px;background:#16241F;font-size:12px;color:#7FA79A}
.ol-code-h i{width:9px;height:9px;border-radius:50%;background:#2E4A41}
.ol-code-h span{margin-left:8px}
.ol-code pre{margin:0;padding:16px 16px 18px;overflow:hidden;font:500 11.5px/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#DDEDE7}
.ol-code .ln{display:block;white-space:pre}
.ol-code .cm{color:#6E9A8C}
.ol-code .kw{color:#7FD6B9}
.ol-code .fn{color:#9CC8FF}
.ol-code .st{color:#F2C98A}
.ol-code .nu{color:#F2A0A0}

/* ---------- 5. 신청 흐름 ---------- */
.ol-flow ol.ol-steps{position:relative;list-style:none;margin:0;padding:0 0 0 42px;display:grid;gap:24px;counter-reset:ol}
.ol-rail{position:absolute;left:13px;top:14px;bottom:14px;width:3px;border-radius:2px;background:var(--ol-line)}
.ol-rail-fill{position:absolute;inset:0;border-radius:2px;background:linear-gradient(180deg,#5CBFA4,#1F7A63);transform-origin:top}
.ol-steps li:not(.ol-rail){position:relative;counter-increment:ol}
.ol-steps li:not(.ol-rail)::before{content:counter(ol);position:absolute;left:-40px;top:-1px;width:29px;height:29px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;color:#fff;background:var(--mint-ink);box-shadow:0 0 0 4px #fff}
.ol-steps b{display:block;font-size:17px;color:var(--ol-ink);line-height:1.4}
.ol-steps span{display:block;margin-top:4px;font-size:14.5px;line-height:1.6;color:var(--ink-2)}

/* ---------- 마무리 카드 ---------- */
.ol-end{padding:24px 0 8px}
.ol-end-card{border-radius:28px;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px var(--ol-line),0 24px 40px -30px rgba(20,70,56,.35)}
.ol-end-vis{position:relative;aspect-ratio:2/1;background:linear-gradient(170deg,#EAF6F2,#EEF4FF);overflow:hidden}
.ol-end-pay{position:absolute;left:50%;top:50%;translate:-50% -50%;display:flex;align-items:center;gap:12px;padding:14px 20px 14px 14px;border-radius:20px;background:#fff;box-shadow:0 16px 30px -16px rgba(20,60,90,.4);white-space:nowrap}
.ol-end-pay .ol-ok{--u:4px;width:36px;height:36px}
.ol-end-pay b{font-size:16px;color:var(--ol-ink)}
.ol-end-vis .ol-chip.c1{left:6%;top:12%}
.ol-end-vis .ol-chip.c2{right:6%;top:14%}
.ol-end-vis .ol-chip.c3{left:auto;right:12%;bottom:10%}
.ol-end-body{padding:22px 20px 24px}
.ol-end-label{display:inline-block;padding:5px 12px;border-radius:999px;background:#EEF8F5;font-size:12.5px;font-weight:800;color:#416C50}
.ol-end-h{margin-top:12px;font-size:24px;line-height:1.35;letter-spacing:-.035em;color:var(--ol-ink)}
.ol-end-lead{margin-top:8px;font-size:15px;color:var(--ink-2)}
.ol-end-btns{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:18px}
.ol-end-btns .sx-btn{justify-content:center;width:100%}

@media (max-width:359px){
  .ol-in{padding-inline:16px}
  .ol-row b{font-size:13px}
  .ol-chip{font-size:12px;padding:7px 11px 7px 8px}
}

/* ---------- PC ---------- */
@media (min-width:900px){
  .ol-hero{padding:48px 0 24px}
  .ol-sec{padding:96px 0 24px}
  .ol-two{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px}
  .ol-flip > .ol-copy{order:2}
  .ol-uses{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1000px;margin-inline:auto}
  .ol-pays{grid-template-columns:repeat(4,minmax(0,1fr));max-width:900px;margin-inline:auto}
  .ol-code pre{font-size:13.5px}
  .ol-end-card{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
  .ol-end-vis{aspect-ratio:auto;min-height:280px}
  .ol-end-body{padding:44px;align-self:center}
  .ol-end-h{font-size:34px}
  .ol-end-btns{grid-template-columns:auto auto;justify-content:start}
}

/* 수수료 표 */
.ol-tablewrap{margin-top:24px;overflow-x:auto;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line,rgba(17,20,24,.09));background:#fff}
.ol-table{width:100%;min-width:420px;border-collapse:collapse;font-size:15px;line-height:1.5}
.ol-table th,.ol-table td{text-align:left;padding:14px 16px;border-top:1px solid var(--line,rgba(17,20,24,.09))}
.ol-table thead th{border-top:0;font-size:13px;font-weight:700;color:var(--ink-3,#5E6870);background:var(--mint-50,#EEF8F5)}
.ol-table tbody th{font-weight:800;white-space:nowrap}
.ol-table td.num{font-variant-numeric:tabular-nums}
.ol-table td.num b{font-size:17px;color:var(--mint-ink,#1F7A63)}
.ol-extra{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ol-extra li{padding:14px 16px;border-radius:14px;background:var(--mint-50,#EEF8F5);display:grid;gap:4px}
.ol-extra b{font-size:15px;font-weight:800}
.ol-extra span{font-size:13.5px;line-height:1.5;color:var(--ink-2,#4A525B)}
@media (max-width:640px){.ol-extra{grid-template-columns:1fr}}

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