/* Partner page. Shares tokens, header, pills, eyebrow, titles and footer with styles.css. */

.partners-page .site-header{color:#fff}
.partners-page .site-header.dark-ink{color:#101820}
.partners-page .desktop-nav a[aria-current=page]:after{transform:scaleX(1)}

/* 01 HERO */

/* 02 WHY */
.p-why{padding-top:var(--section-gap);padding-bottom:var(--section-gap)}
.p-why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto;gap:clamp(12px,1.0417vw,20px);margin-top:clamp(36px,2.6vw,50px)}
.p-why-visual{grid-row:1/3;position:relative;overflow:hidden;min-height:100%;background:linear-gradient(180deg,#010712 0%,#03183b 24%,#0a4db3 55%,#3b8cf0 72%,#a8cdf7 88%,#eef5fd 100%)}
.p-why-card{aspect-ratio:600/500;background:#f4f4f4;padding:10%}
.p-why-card h3,.p-program-copy h3{font-size:clamp(22px,1.98vw,38px);font-weight:600;letter-spacing:-.03em;line-height:1.25}
.p-why-card p{margin-top:clamp(12px,.83vw,16px);font-size:clamp(15px,1.04vw,20px);line-height:1.6;letter-spacing:-.04em;color:#6a6a6a}

/* 03 PROGRAM */
.p-program{position:relative;isolation:isolate;padding-top:clamp(40px,3vw,60px);padding-bottom:clamp(90px,6.8vw,130px)}
.p-program:before{content:'';position:absolute;z-index:-1;inset:34% 0 0;background:linear-gradient(180deg,rgba(247,247,245,0) 0%,#9cc2f0 26%,#2d70d4 52%,#0a2a5c 78%,#000 100%)}
.p-program-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.0417vw,20px);margin-top:clamp(36px,2.6vw,50px)}
.p-program-card{display:flex;flex-direction:column;justify-content:space-between;gap:28px;aspect-ratio:600/839;padding:10%;background:linear-gradient(180deg,#fff 0%,#f5f6f8 45%,#dde2e8 100%);box-shadow:0 30px 60px rgba(4,26,64,.12)}
.p-program-sub{margin-top:8px;font-size:clamp(18px,1.46vw,28px);font-weight:600;letter-spacing:-.03em}
.p-program-desc{margin-top:clamp(16px,1.25vw,24px);font-size:clamp(15px,1.04vw,20px);line-height:1.6;letter-spacing:-.04em;color:#6a6a6a}
.pp-svg{display:block;width:100%;height:auto;font-family:Pretendard,"Noto Sans KR",sans-serif;overflow:visible}
.pp-svg .pp-panel{fill:#fff;stroke:#e4e9f0;filter:drop-shadow(0 12px 24px rgba(11,31,68,.07))}
.pp-svg .pp-meta{fill:#5b6573;font-size:13px}
.pp-svg .pp-dot{fill:#0e76ff;stroke:#fff;stroke-width:2.5}
.pp-svg .pp-ring{fill:none;stroke:#0e76ff;stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:pp-ring 1.6s ease-out infinite}
/* CPA rows */
.pp-fade{transition:opacity .6s ease}
.pp-svg.is-fading .pp-fade{opacity:0}
@keyframes pp-ring{from{transform:scale(1);opacity:.6}to{transform:scale(3);opacity:0}}

/* 04 HOW IT WORKS */
.p-how{display:grid;grid-template-columns:1fr 1fr;gap:40px;background:#000;color:#fff;padding-top:clamp(40px,3.1vw,60px);padding-bottom:clamp(90px,6.8vw,130px)}
.p-how .eyebrow{color:#afafaf}
.p-how-intro .pill{margin-top:clamp(36px,2.8vw,54px)}
.p-how-steps{list-style:none;margin:clamp(20px,2vw,40px) 0 0;padding:0}
.p-step{position:relative;display:grid;grid-template-columns:36% 1fr;gap:20px;align-items:center;padding:clamp(24px,1.8vw,34px) 0;border-bottom:1px dashed rgba(255,255,255,.45);opacity:.42;transition:opacity .5s ease}
.p-step.is-active,.p-step.is-past{opacity:1}
.p-step-title{display:flex;align-items:center;gap:14px;font-size:clamp(22px,1.98vw,38px);font-weight:600;letter-spacing:-.03em}
.p-step-title svg{width:clamp(22px,1.6vw,30px);height:clamp(22px,1.6vw,30px);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.p-step-body{display:flex;flex-direction:column;gap:6px;font-size:clamp(14px,1.04vw,20px);letter-spacing:-.04em}
.p-step-body b{font-family:'Archivo Narrow','Arial Narrow',sans-serif;font-size:clamp(14px,.9vw,17px)}
.p-step-bar{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--blue);transform:scaleX(0);transform-origin:left}
.p-step.is-past .p-step-bar{transform:scaleX(1)}
.p-step.is-active .p-step-bar{animation:p-step-fill var(--step-ms,2000ms) linear forwards}
@keyframes p-step-fill{to{transform:scaleX(1)}}

/* 05 FINAL CTA */
.partners-page .site-footer{color:#fff}

@media(max-width:1100px){
  .p-program-grid{grid-template-columns:1fr 1fr}
  .p-program-card{aspect-ratio:auto}
  .p-why-grid{grid-template-columns:1fr 1fr}
  .p-why-visual{grid-row:auto;grid-column:1/-1;min-height:260px}
}
@media(max-width:800px){
  .p-how{grid-template-columns:1fr}
  .p-step{grid-template-columns:1fr;gap:10px}
}
@media(max-width:600px){
  .p-why-card p br,.p-program-desc br{display:none}
  .p-why-grid,.p-program-grid{grid-template-columns:1fr}
  .p-why-card{aspect-ratio:auto;padding:30px 26px 60px}
  .p-program-card{padding:30px 22px 22px}
  .p-program:before{inset:48% 0 0}
}
@media(prefers-reduced-motion:reduce){
  .pp-svg .pp-ring{animation:none}
  .p-step{opacity:1}.p-step-bar{display:none}
}

/* How it works: no blue progress line — steps are highlighted by opacity only. */
.p-step-bar{display:none}

/* Page now opens on WHY PARTNER WITH US: clear the fixed header and sit on the top glow. */
.p-why{padding-top:clamp(170px,14vw,270px)}
@media(max-width:600px){.p-why{padding-top:130px}}

/* Program card tags and period labels use Pretendard like the rest of the card. */

/* Program scenes v2: taller portrait panels, thin lines, no corner tags (Renalta-like calm). */
.p-program-card{aspect-ratio:auto;justify-content:flex-start;gap:clamp(28px,2.3vw,44px)}
.pp-svg .pp-panel{fill:#fff;stroke:#e8edf3;filter:drop-shadow(0 18px 36px rgba(11,31,68,.06))}
.pp-svg .pp-grid line{stroke:#eef2f7;stroke-width:1}
.pp-svg .pp-key text{fill:#5b6573;font-size:14px;font-weight:500}
.pp-svg .pp-curve{fill:none;stroke:#0e76ff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pp-svg .pp-curve-soft{stroke:#b3aee9;stroke-width:2}
.pp-svg .pp-foot,.pp-svg .pp-meta{fill:#8a94a3;font-size:14px;font-weight:500}
.pp-svg .pp-period{fill:#0b0b0c;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.pp-svg .pp-head{fill:#0b0b0c;font-size:17px;font-weight:600;letter-spacing:-.02em}
.pp-svg .pp-note{fill:#9aa3af;font-size:12.5px}
.pp-svg .pp-dot{r:5}
/* CPA notification list */
/* Hybrid bars */
.pp-b-label{fill:#0b0b0c;font-size:16px;font-weight:600;letter-spacing:-.02em}
.pp-b-sub{fill:#8a94a3;font-size:13.5px}
.pp-b-track{fill:#eef2f7}
.pp-b-cpa{fill:#1d3f78}
.pp-b-rev{fill:#5d9bff}
.pp-b-glow{fill:none;stroke:#0e76ff;stroke-width:1.5;opacity:0;transition:opacity .5s}
.pp-svg.is-merged .pp-b-glow{opacity:.5}
@media(max-width:600px){.p-program-card{gap:24px}}

/* Phones: the scenes render at ~60%, so type inside them is scaled up to stay legible. */
@media(max-width:600px){
  .pp-svg .pp-key text,.pp-svg .pp-foot,.pp-svg .pp-meta{font-size:18px}
  .pp-svg .pp-period{font-size:19px}
  .pp-svg .pp-head{font-size:21px}
  .pp-svg .pp-note{font-size:15px}
  .pp-b-label{font-size:20px}
  .pp-b-sub{font-size:17px}
}

/* CPA flow: acquired → condition check → reward */
.pp-s-bg{fill:#f6f8fb}
.pp-s-no{fill:#0e76ff;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.pp-s-label{fill:#0b0b0c;font-size:15.5px;font-weight:600;letter-spacing:-.02em}
.pp-s-sub{fill:#8a94a3;font-size:13px}
.pp-s-guide{stroke:#dfe5ee;stroke-width:1;stroke-dasharray:3 4}
.pp-t-bg{fill:#fff;stroke:#cfd8e4;stroke-width:1.2;transition:fill .35s,stroke .35s}
.pp-t-name{fill:#0b1f44;font-size:13px;font-weight:700;text-anchor:middle;transition:opacity .25s}
.pp-t-check{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .35s ease .05s}
.pp-t.is-checked .pp-t-bg{fill:#0b1f44;stroke:#0b1f44}
.pp-t.is-checked .pp-t-name{opacity:0}
.pp-t.is-checked .pp-t-check{stroke-dashoffset:0}
.pp-t.is-paid .pp-t-bg{fill:#16a34a;stroke:#16a34a}
.pp-t.is-failed .pp-t-bg{fill:#f1f3f6;stroke:#e1e6ed}
.pp-t.is-failed .pp-t-name{fill:#a1a9b4}
.pp-t-tag,.pp-t-reward{font-size:12px;font-weight:600;text-anchor:middle;opacity:0;transition:opacity .3s}
.pp-t-tag{fill:#a1a9b4}
.pp-t-reward{fill:#16a34a}
.pp-t.is-failed .pp-t-tag{opacity:1}
.pp-t.is-paid .pp-t-reward{opacity:1}
@media(max-width:600px){.pp-s-label{font-size:19px}.pp-s-sub,.pp-s-no{font-size:16px}.pp-t-tag,.pp-t-reward{font-size:15px}}

/* Hybrid card: CPA and Revenue Share rows stay neutral grey so the Hybrid bar stands out. */
.pp-b-muted{fill:#c3cad4}

/* Final CTA + footer: same Earth scene and cursor as the main page; it follows the black How It Works section directly. */

/* Section colours per Figma PC_제휴: white → blue glow → black (Program) → blue → white (CTA) → blue footer. */
.p-why{position:relative;isolation:isolate}
.p-why:after{content:'';position:absolute;z-index:-1;left:0;right:0;bottom:0;height:62%;pointer-events:none;
  background:
    radial-gradient(70% 55% at 50% 100%,#010103 0%,rgba(1,1,3,.85) 35%,rgba(1,1,3,0) 75%),
    linear-gradient(180deg,rgba(255,255,255,0) 0%,#e7effa 18%,#8fb3e1 38%,#3a6fae 58%,#173a66 78%,#010103 100%)}
.p-program{background:#010103;color:#fff}
.p-program:before{display:none}
.p-program .eyebrow{color:#afafaf}
.p-program-card{background:#cdcdce;box-shadow:none;color:#0b0b0c}
.p-program-desc{color:#5f6368}
.p-how{background:
    radial-gradient(75% 45% at 50% 100%,#fff 0%,rgba(255,255,255,.9) 30%,rgba(255,255,255,0) 72%),
    linear-gradient(180deg,#010103 0%,#04162c 14%,#0c3365 34%,#2a62a5 56%,#7ea7dc 76%,#dfe9f7 90%,#fff 100%);
  padding-bottom:clamp(200px,15vw,300px)}
@media(max-width:600px){.p-how{padding-bottom:180px}}
@media(max-width:800px){
  .p-how{background:
    radial-gradient(90% 14% at 50% 100%,#fff 0%,rgba(255,255,255,0) 100%),
    linear-gradient(180deg,#010103 0%,#06203f 22%,#0f3a70 48%,#2a62a5 72%,#6f9bd6 86%,#dfe9f7 96%,#fff 100%)}
}

/* Why cards: duotone icons (light base + strong blue accent) with a looping motion each. */
.p-why-card{position:relative}
.why-ico{position:absolute;right:10%;bottom:12%;width:clamp(92px,7.2vw,138px);height:auto;overflow:visible}
.why-ico .d-l{fill:#b7caf5}
.why-ico .d-s{fill:#0a55e8}
.why-ico .d-s-stroke,.why-ico .wick,.why-ico .tick{fill:none;stroke:#0a55e8;stroke-width:5;stroke-linecap:round}
.why-ico .wick{stroke-width:2.5}
/* market: candles rise in turn */
.ico-market .c{transform-box:fill-box;transform-origin:50% 100%;animation:ico-candle 2.8s cubic-bezier(.3,.7,.2,1) infinite}
.ico-market .c2{animation-delay:.25s}.ico-market .c3{animation-delay:.5s}
@keyframes ico-candle{0%,100%{transform:scaleY(1)}30%{transform:scaleY(1.35)}55%{transform:scaleY(.8)}75%{transform:scaleY(1.1)}}
/* withdrawal: one quick full sweep, then rest */
.ico-watch .hand{transform-origin:48px 54px;animation:ico-sweep 2.6s cubic-bezier(.65,0,.35,1) infinite}
@keyframes ico-sweep{0%{transform:rotate(0)}45%,100%{transform:rotate(360deg)}}
/* relationship: a client keeps orbiting the platform */
.ico-orbit .orbit{fill:none;stroke:#b7caf5;stroke-width:2;stroke-dasharray:3 6}
.ico-orbit .spin{transform-origin:48px 48px;animation:ico-orbit 6s linear infinite}
.ico-orbit .core{transform-box:fill-box;transform-origin:center;animation:ico-core 3s ease-in-out infinite}
@keyframes ico-orbit{to{transform:rotate(360deg)}}
@keyframes ico-core{50%{transform:scale(1.25)}}
/* support: megaphone waves pulse outward */
@media(max-width:600px){.p-why-card{padding-bottom:140px}.why-ico{width:92px;right:26px;bottom:28px}}
@media(prefers-reduced-motion:reduce){.why-ico *{animation:none!important}}

/* Glassmorphism (Figma 1-14): Why cards frost over the white→blue glow, Program cards are dark glass over black. */
.p-why:after{height:78%;
  background:
    radial-gradient(70% 40% at 50% 100%,#010103 0%,rgba(1,1,3,.85) 35%,rgba(1,1,3,0) 75%),
    linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(231,239,250,.9) 14%,#9dbde6 30%,#4d80bf 46%,#23508f 62%,#0d2748 80%,#010103 100%)}
.p-why-card{
  background:linear-gradient(180deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.55) 45%,rgba(236,243,252,.14) 100%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);
  box-shadow:0 20px 40px rgba(8,30,70,.08)}
.p-program{background:
  radial-gradient(80% 30% at 50% 100%,rgba(35,85,170,.55) 0%,rgba(35,85,170,0) 100%),#010103}
.p-program-card{
  background:linear-gradient(180deg,rgba(38,38,42,.88) 0%,rgba(30,34,44,.62) 100%);
  -webkit-backdrop-filter:blur(20px) saturate(130%);backdrop-filter:blur(20px) saturate(130%);
  box-shadow:none;
  color:#fff}
.p-program-card .p-program-desc{color:#9aa0a8}
.pp-svg .pp-panel{stroke:rgba(255,255,255,.08);filter:none}

/* Sub-page intro line under the section title (same as PWA / Legal). */
.partners-page .pg-desc{margin-top:clamp(20px,1.6vw,30px);font-size:var(--body);line-height:1.7;letter-spacing:-.04em;color:#555}
@media(max-width:600px){.partners-page .pg-desc br{display:none}}

/* Continuous backdrop: Program (black) → How It Works (black → blue) → closing (blue → space), no white band or hard edges. */
.p-program{background:#010103}
.p-how,
.p-how:is(*){background:linear-gradient(180deg,#010103 0%,#030d1c 18%,#082449 42%,#123f78 68%,#1d5294 100%)}
@media(max-width:800px){.p-how{background:linear-gradient(180deg,#010103 0%,#041127 25%,#0a2a55 55%,#1a4d8d 100%)}}
.p-closing .closing-earth{background:linear-gradient(180deg,#1d5294 0,#143f76 calc(var(--sky-h)*.25),#0b2b55 calc(var(--sky-h)*.5),#051a38 calc(var(--sky-h)*.75),#020b1a var(--sky-h),#01040b 100%)}
@media(max-width:800px){.p-closing .closing-earth{background:linear-gradient(180deg,#1a4d8d 0,#0f3565 calc(var(--sky-h)*.4),#041634 calc(var(--sky-h)*.8),#01040b 100%)}}

/* Partner support icon: dashboard bars (data) + turning gear (tools). */
.ico-support .bar{transform-box:fill-box;transform-origin:50% 100%;animation:ico-candle 2.8s cubic-bezier(.3,.7,.2,1) infinite}
.ico-support .b2{animation-delay:.2s}.ico-support .b3{animation-delay:.4s}
.ico-support .gear{transform-origin:68px 68px;animation:ico-orbit 7s linear infinite}
.ico-support .gear-hole{fill:#b7caf5}

/* Why section per Figma 1-14: white behind the top row; the blue→navy glow starts at the second row and
   runs to the section bottom. Top cards are frosted white, bottom cards let the glow show through. */
.p-why:after{display:none}
.p-why-grid{position:relative;isolation:isolate}
.p-why-grid:before{content:'';position:absolute;z-index:-1;pointer-events:none;
  left:calc(-1 * var(--gutter));right:calc(-1 * var(--gutter));top:44%;bottom:calc(-1 * var(--section-gap));
  background:
    radial-gradient(55% 45% at 50% 100%,rgba(1,1,3,.9) 0%,rgba(1,1,3,.55) 45%,rgba(1,1,3,0) 100%),
    linear-gradient(180deg,rgba(255,255,255,0) 0%,#dbe5f5 16%,#9db8e3 32%,#5b86c8 50%,#2a569b 66%,#10305f 82%,#030b1a 100%)}
.p-why-card{box-shadow:0 18px 40px rgba(8,30,70,.06)}
.p-why-card:nth-child(2),.p-why-card:nth-child(3){
  background:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.86) 70%,rgba(248,250,253,.8) 100%)}
.p-why-card:nth-child(4),.p-why-card:nth-child(5){
  background:linear-gradient(180deg,rgba(255,255,255,.88) 0%,rgba(236,241,250,.55) 38%,rgba(214,226,244,.18) 72%,rgba(200,215,240,.1) 100%)}
@media(max-width:1100px){.p-why-grid:before{top:30%}}
@media(max-width:600px){.p-why-grid:before{top:55%}}

/* Sub-page closing per Figma PC_제휴: How It Works fades to white, the CTA sits on white,
   then blue → navy behind the footer. No Earth scene on sub pages. */
.p-how{background:linear-gradient(180deg,#010103 0%,#04162c 16%,#0c3365 34%,#2a62a5 56%,#7ea7dc 76%,#dfe9f7 90%,#fff 100%)}
@media(max-width:800px){.p-how{background:linear-gradient(180deg,#010103 0%,#06203f 22%,#0f3a70 48%,#2a62a5 72%,#6f9bd6 86%,#dfe9f7 96%,#fff 100%)}}
.p-closing{background:linear-gradient(180deg,#fff 0%,#fff 38%,#dbe6f6 52%,#8fb0e0 64%,#3f6fb4 76%,#173e7a 88%,#07193a 100%)}
.p-closing .final-cta .section-title{color:#0b0b0c;text-shadow:none}
.p-closing .final-cta .section-description{color:#4f4f4f}
.p-closing .final-cta .pill-dark:hover{background:#000}

/* Sub pages: tighter gap between the last content block and the closing CTA. */
.p-closing .final-cta{padding-top:clamp(90px,6.8vw,130px)}
.sub-page .pwa-faq,.sub-page .lg-docs{padding-bottom:clamp(100px,7.3vw,140px)}
@media(max-width:600px){.p-closing .final-cta{padding-top:76px}.sub-page .pwa-faq,.sub-page .lg-docs{padding-bottom:80px}}

/* Sub-page closing per Figma: the blue rises as a wide ellipse from the bottom (not a flat band). */
.p-closing{background:
  radial-gradient(135% 95% at 50% 100%,#07193a 0%,#10306a 22%,#2b5ea8 40%,#6f98d6 54%,#bcd0ee 64%,#eaf1fa 72%,rgba(255,255,255,0) 80%),
  #fff}
/* Program visuals: dark mode */
.pp-svg .pp-panel{fill:#0c0e13;stroke:rgba(255,255,255,.08);filter:none}
.pp-svg .pp-grid line{stroke:rgba(255,255,255,.06)}
.pp-svg .pp-key text{fill:#aab2bf}
.pp-svg .pp-foot,.pp-svg .pp-meta,.pp-s-sub,.pp-b-sub{fill:#7f8998}
.pp-svg .pp-period,.pp-svg .pp-head,.pp-s-label,.pp-b-label{fill:#f4f6fa}
.pp-svg .pp-note{fill:#667080}
.pp-svg .pp-dot{stroke:#0c0e13}
.pp-svg .pp-curve{stroke:#3d8bff}
.pp-svg .pp-curve-soft{stroke:#8f89d6}
.pp-s-bg{fill:rgba(255,255,255,.035)}
.pp-s-no{fill:#5b9dff}
.pp-s-guide{stroke:rgba(255,255,255,.12)}
.pp-t-bg{fill:#0c0e13;stroke:rgba(255,255,255,.28)}
.pp-t-name{fill:#f4f6fa}
.pp-t.is-checked .pp-t-bg{fill:#0e76ff;stroke:#0e76ff}
.pp-t.is-failed .pp-t-bg{fill:#232730;stroke:#2c313b}
.pp-t.is-failed .pp-t-name,.pp-t-tag{fill:#646d7b}
.pp-b-track{fill:rgba(255,255,255,.06)}
.pp-b-muted{fill:#3a414e}
.pp-b-cpa{fill:#2a5cb6}
.pp-b-rev{fill:#6aa6ff}
/* Figma Glass (fill #fff 10%, light -45° 80%, frost 26): Why cards + Program cards */
.p-why-card,.p-program-card{position:relative;isolation:isolate}
.p-why-card:after,.p-program-card:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;padding:1.5px;
  background:linear-gradient(135deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.25) 30%,rgba(255,255,255,0) 55%,rgba(255,255,255,.18) 85%,rgba(255,255,255,.55) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.p-why-card{
  background:linear-gradient(135deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.34) 45%,rgba(255,255,255,.1) 100%);
  -webkit-backdrop-filter:blur(26px) saturate(160%);backdrop-filter:blur(26px) saturate(160%);
  box-shadow:0 24px 60px rgba(8,30,70,.1)}
.p-program-grid{position:relative}
.p-program-grid:before{content:"";position:absolute;inset:-6% -4%;z-index:0;pointer-events:none;filter:blur(20px);
  background:radial-gradient(30% 34% at 18% 22%,rgba(40,100,220,.32) 0%,rgba(40,100,220,0) 100%),
    radial-gradient(34% 36% at 84% 82%,rgba(40,100,220,.3) 0%,rgba(40,100,220,0) 100%),
    radial-gradient(26% 28% at 55% 50%,rgba(120,110,220,.16) 0%,rgba(120,110,220,0) 100%)}
.p-program-card{
  background:linear-gradient(135deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.07) 45%,rgba(255,255,255,.04) 100%);
  -webkit-backdrop-filter:blur(26px) saturate(150%);backdrop-filter:blur(26px) saturate(150%);
  box-shadow:0 30px 70px rgba(0,0,0,.35)}
.p-program-card:after{opacity:.55}
.pp-svg .pp-panel{fill:rgba(8,10,16,.55);stroke:rgba(255,255,255,.1)}
/* Program cards rise (scroll-scrubbed, staggered) */
@media(min-width:801px){
  .p-program-grid.rise-motion .p-program-card.reveal{opacity:var(--rise-o,1);transform:translate3d(0,var(--rise-y,0),0) scale(var(--rise-s,1));transform-origin:50% 100%;transition:none;will-change:transform,opacity}
  .p-program-grid.rise-motion .p-program-card .pp-svg{transform:translate3d(0,var(--rise-in,0),0);will-change:transform}
  .p-program-grid.rise-motion .p-program-card .p-program-copy{opacity:var(--rise-copy,1);transform:translate3d(0,calc(var(--rise-in,0px) * .35),0)}
}
@media(prefers-reduced-motion:reduce){.p-program-grid.rise-motion .p-program-card.reveal{opacity:1;transform:none}}
/* Glass exactly per Figma PC_제휴: Why = fill #F8F8F8 20% + Glass(frost 4, light -45° 80%);
   Program = fill #FFF 10% over black + Glass. Thin 1px light edge, no heavy blur or shadow. */
.p-why-card{
  background:rgba(248,248,248,.2);
  -webkit-backdrop-filter:blur(4px) saturate(115%);backdrop-filter:blur(4px) saturate(115%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.p-why-card:after{padding:1px;opacity:.9;
  background:linear-gradient(135deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,.2) 28%,rgba(255,255,255,0) 50%,rgba(255,255,255,.12) 80%,rgba(255,255,255,.45) 100%)}
.p-program-grid:before{display:none}
.p-program-card{
  background:rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.p-program-card:after{padding:1px;opacity:.6;
  background:linear-gradient(135deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.08) 30%,rgba(255,255,255,0) 55%,rgba(120,160,230,.18) 85%,rgba(140,180,255,.4) 100%)}
/* Program cards: plain white 10% background — no blur, edge or shadow. */
.p-program-card{background:rgba(255,255,255,.1);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.p-program-card:after{display:none}
/* Why cards: soften the edge — bright only at the top-left, fading to a faint line toward the bottom. */
.p-why-card{box-shadow:none}
.p-why-card:after{opacity:1;
  background:linear-gradient(180deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,.28) 35%,rgba(255,255,255,.1) 70%,rgba(255,255,255,.06) 100%)}
/* Why icons: lighter duotone base #DEE6F5; support bars stay inside their box; stopwatch button attached to the rim. */
.why-ico .d-l,.ico-support .gear-hole{fill:#dee6f5}
.ico-orbit .orbit{stroke:#dee6f5}
.ico-support .bar{animation-name:ico-bar}
@keyframes ico-bar{0%,100%{transform:scaleY(1)}30%{transform:scaleY(1.15)}55%{transform:scaleY(.85)}75%{transform:scaleY(1.05)}}
/* Why icons +15% */
.why-ico{width:clamp(106px,8.28vw,159px)}
@media(max-width:600px){.why-ico{width:106px}}
/* HOW IT WORKS: "자세히 보러가기" as white glass (no black fill) */
.p-how-intro .pill{background:linear-gradient(135deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,.12) 100%);color:#fff;
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.55),inset -1px -1px 0 rgba(255,255,255,.18),0 10px 30px rgba(0,10,40,.25);border:0}
.p-how-intro .pill:hover{background:linear-gradient(135deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,.12) 100%);color:#fff}
.p-how-intro .pill{box-shadow:inset 1px 1px 0 rgba(255,255,255,.55),inset -1px -1px 0 rgba(255,255,255,.18)}
/* Partner page: HOW IT WORKS flows straight into the dark globe closing (no white band in between). */
body.partners-page:not(.pwa-page):not(.legal-page) .p-how{background:linear-gradient(180deg,#010103 0%,#06203f 26%,#103d74 58%,#2a5c9c 100%)}
body.partners-page:not(.pwa-page):not(.legal-page) .closing-earth{background:linear-gradient(180deg,#2a5c9c 0,#1d4a85 calc(var(--sky-h)*.18),#123669 calc(var(--sky-h)*.38),#0a2349 calc(var(--sky-h)*.58),#04112a calc(var(--sky-h)*.8),#01060f var(--sky-h),#01040b 100%)}
body.partners-page:not(.pwa-page):not(.legal-page) .p-how{background:linear-gradient(180deg,#010103 0%,#051a36 24%,#0e3566 52%,#1a4582 78%,#1d4a88 100%)}
body.partners-page:not(.pwa-page):not(.legal-page) .closing-earth{background:linear-gradient(180deg,#1d4a88 0,#1a4480 calc(var(--sky-h)*.14),#12356a calc(var(--sky-h)*.34),#0a244b calc(var(--sky-h)*.56),#04122b calc(var(--sky-h)*.8),#01060f var(--sky-h),#01040b 100%)}
/* HOW IT WORKS: all four steps plain white, no hover/progress effect; tighter gap to the closing */
.p-how .p-step,.p-how .p-step.is-active,.p-how .p-step.is-past{opacity:1;color:#fff}
.p-how .p-step-bar{display:none}
.p-how .p-step-body{color:#fff}
.p-how .p-step-body b{color:#fff}
body.sub-page .p-how{padding-bottom:clamp(50px,4vw,80px)}
body.sub-page .closing .final-cta{padding-top:clamp(140px,10.5vw,200px)}
@media(max-width:800px){body.sub-page .closing .final-cta{padding-top:120px}}
/* PWA / Legal pages: closing background as a dome (Figma) — white at the top, a rounded blue horizon rising from the bottom */
body.pwa-page .closing-earth,body.legal-page .closing-earth{background:
  radial-gradient(ellipse 125% 118% at 50% 100%,#01040b 0%,#020a1c 30%,#0a2350 44%,#1b4586 55%,#3a6cb3 64%,#7ea3d9 73%,#c8d8f0 81%,rgba(255,255,255,0) 89%),#fff}
body.pwa-page .closing-earth,body.legal-page .closing-earth{background:
  radial-gradient(ellipse 125% 118% at 50% 100%,#01040b 0%,#020a1c 30%,#0a2350 44%,#1b4586 54%,#3a6cb3 62%,#7ea3d9 70%,#c8d8f0 77%,rgba(236,242,251,.6) 81%,rgba(255,255,255,0) 84.5%),#fff}
/* PWA / Legal: the dome may rise into the FAQ / document list above — a round horizon instead of a clipped one */
body.pwa-page .closing,body.legal-page .closing{overflow:visible;overflow-x:clip}
body.pwa-page .closing-earth,body.legal-page .closing-earth{top:clamp(-460px,-24vw,-260px);background:
  radial-gradient(ellipse 88% 100% at 50% 100%,#01040b 0%,#020a1c 30%,#0a2350 44%,#1b4586 53%,#3a6cb3 61%,#7ea3d9 69%,#bcd0ef 76%,rgba(226,235,249,.55) 82%,rgba(255,255,255,0) 90%)}
body.pwa-page .pwa-faq,body.legal-page .lg-docs,body.legal-page .doc-wrap,body.legal-page .pv-wrap{position:relative;z-index:1}
@media(max-width:800px){body.pwa-page .closing-earth,body.legal-page .closing-earth{top:-200px;background:
  radial-gradient(ellipse 150% 100% at 50% 100%,#01040b 0%,#020a1c 30%,#0a2350 44%,#1b4586 53%,#3a6cb3 61%,#7ea3d9 69%,#bcd0ef 76%,rgba(226,235,249,.55) 82%,rgba(255,255,255,0) 90%)}}
@media(max-width:800px){body.pwa-page .closing-earth,body.legal-page .closing-earth{top:-160px;background:
  radial-gradient(ellipse 190% 100% at 50% 100%,#01040b 0%,#020a1c 26%,#0a2350 38%,#1b4586 48%,#3a6cb3 57%,#6f98d3 66%,#aac4ea 74%,rgba(214,227,247,.6) 81%,rgba(255,255,255,0) 88%)}}
@media(max-width:800px){body.pwa-page .closing-earth,body.legal-page .closing-earth{background:
  radial-gradient(ellipse 150% 820px at 50% 900px,#1b4586 0%,#2a5a9f 40%,#3a6cb3 58%,#6f98d3 70%,#aac4ea 80%,rgba(214,227,247,.6) 88%,rgba(255,255,255,0) 96%),
  linear-gradient(180deg,rgba(1,4,11,0) 0,rgba(1,4,11,0) 900px,#0a2350 1150px,#01040b 100%)}}
/* PWA / Legal closing = Figma PC_제휴 footer: white CTA area (dark text, black pill) and the exact Figma dome
   gradient (assets/footer-dome.jpg, 1920×1017 cut from the design) rising from just under the button. No globe. */
body.pwa-page .closing,body.legal-page .closing{overflow:clip}
body.pwa-page .closing-earth,body.legal-page .closing-earth{top:0;
  background:url(assets/footer-dome.jpg) 50% var(--dome-y,0px)/100% auto no-repeat,
    linear-gradient(180deg,#fff 0,#fff calc(var(--dome-y,0px) + 40px),#010101 calc(var(--dome-y,0px) + 40px))}
body.pwa-page .earth-globe-canvas,body.legal-page .earth-globe-canvas{display:none}
body.pwa-page .final-cta,body.legal-page .final-cta{color:#0b0b0c}
body.pwa-page .final-cta .section-description,body.legal-page .final-cta .section-description{color:#555}
body.pwa-page .closing .final-cta,body.legal-page .closing .final-cta{padding-top:clamp(90px,6.8vw,130px);padding-bottom:calc(var(--dome-s,1) * 360px)}
@media(max-width:800px){body.pwa-page .closing-earth,body.legal-page .closing-earth{background-size:200% auto}
  body.pwa-page .closing .final-cta,body.legal-page .closing .final-cta{padding-top:76px;padding-bottom:260px}}
body.pwa-page .closing-earth,body.legal-page .closing-earth{background-size:100% var(--dome-h,auto),auto}
@media(max-width:800px){body.pwa-page .closing-earth,body.legal-page .closing-earth{background-size:200% var(--dome-h,auto),auto}}
/* PWA / Legal closing (v2): the Figma dome gradient (white → blue → black) sits at the top of the closing,
   then the dark closing continues exactly like the main page — white CTA, rotating globe, footer. */
body.pwa-page .closing-earth,body.legal-page .closing-earth{top:0;
  background:url(assets/footer-dome.jpg) 50% 0/100% calc(40.6vw) no-repeat,linear-gradient(180deg,#fff 0,#fff 1px,#010101 1px) 0 calc(40.6vw - 2px)/100% 100% no-repeat,#fff}
body.pwa-page .earth-globe-canvas,body.legal-page .earth-globe-canvas{display:block}
body.pwa-page .final-cta,body.legal-page .final-cta{color:#fff}
body.pwa-page .final-cta .section-description,body.legal-page .final-cta .section-description{color:rgba(255,255,255,.72)}
body.pwa-page .closing .final-cta,body.legal-page .closing .final-cta{padding-top:calc(40.6vw + 10px);padding-bottom:clamp(120px,8.2vw,160px)}
@media(max-width:800px){
  body.pwa-page .closing-earth,body.legal-page .closing-earth{background:url(assets/footer-dome.jpg) 50% 0/200% 360px no-repeat,linear-gradient(#010101,#010101) 0 358px/100% 100% no-repeat,#fff}
  body.pwa-page .closing .final-cta,body.legal-page .closing .final-cta{padding-top:370px;padding-bottom:110px}}
/* PWA / Legal: tighter gap between the last content block and the dome */
body.pwa-page .pwa-faq,body.legal-page .lg-docs,body.legal-page .doc-wrap,body.legal-page .pv-wrap{padding-bottom:clamp(30px,2.5vw,48px)}
body.pwa-page .closing-earth,body.legal-page .closing-earth{background:url(assets/footer-dome.jpg) 50% -5vw/100% 40.6vw no-repeat,linear-gradient(#010101,#010101) 0 calc(35.6vw - 2px)/100% 100% no-repeat,#fff}
body.pwa-page .closing .final-cta,body.legal-page .closing .final-cta{padding-top:calc(35.6vw + 10px)}
@media(max-width:800px){
  body.pwa-page .closing-earth,body.legal-page .closing-earth{background:url(assets/footer-dome.jpg) 50% -40px/200% 360px no-repeat,linear-gradient(#010101,#010101) 0 318px/100% 100% no-repeat,#fff}
  body.pwa-page .closing .final-cta,body.legal-page .closing .final-cta{padding-top:330px}}
body.pwa-page .closing-earth,body.legal-page .closing-earth{background:
  linear-gradient(180deg,rgba(1,1,1,0),#010101) 0 32vw/100% 8.7vw no-repeat,
  url(assets/footer-dome.jpg) 50% 0/100% 40.6vw no-repeat,
  linear-gradient(#010101,#010101) 0 calc(40.6vw - 2px)/100% 100% no-repeat,#fff}
body.pwa-page .closing .final-cta,body.legal-page .closing .final-cta{padding-top:calc(40.6vw + 10px)}
@media(max-width:800px){
  body.pwa-page .closing-earth,body.legal-page .closing-earth{background:linear-gradient(180deg,rgba(1,1,1,0),#010101) 0 290px/100% 72px no-repeat,url(assets/footer-dome.jpg) 50% 0/200% 360px no-repeat,linear-gradient(#010101,#010101) 0 358px/100% 100% no-repeat,#fff}
  body.pwa-page .closing .final-cta,body.legal-page .closing .final-cta{padding-top:370px}}
/* Partner page background (reference): Program section runs black → blue → pale blue, HOW IT WORKS continues to white
   with dark text and a black pill; the closing uses the same Figma dome as the PWA / Legal pages. */
body.partners-page:not(.pwa-page):not(.legal-page) .p-program{background:linear-gradient(180deg,#010103 0%,#010103 28%,#07152b 40%,#132d57 52%,#2a5496 63%,#4f80c2 73%,#8aadde 83%,#c3d5f0 93%,#dbe6f5 100%)}
body.partners-page:not(.pwa-page):not(.legal-page) .p-how{background:linear-gradient(180deg,#dbe6f5 0,#eef3fb 12%,#fff 26%,#fff 100%);color:#0b0b0c}
body.partners-page:not(.pwa-page):not(.legal-page) .p-how .p-step,
body.partners-page:not(.pwa-page):not(.legal-page) .p-how .p-step-body,
body.partners-page:not(.pwa-page):not(.legal-page) .p-how .p-step-body b{color:#0b0b0c}
body.partners-page:not(.pwa-page):not(.legal-page) .p-how .p-step-body{color:#3a3f47}
body.partners-page:not(.pwa-page):not(.legal-page) .p-how .p-step-body b{color:#6b7280}
body.partners-page:not(.pwa-page):not(.legal-page) .p-how .p-step{border-bottom-color:rgba(0,0,0,.45)}
body.partners-page:not(.pwa-page):not(.legal-page) .p-how .p-step-title svg{color:#6b7280}
body.partners-page:not(.pwa-page):not(.legal-page) .p-how-intro .pill,
body.partners-page:not(.pwa-page):not(.legal-page) .p-how-intro .pill:hover{background:#000;color:#fff;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
body.partners-page:not(.pwa-page):not(.legal-page) .p-how{padding-bottom:clamp(30px,2.5vw,48px)}
/* closing: Figma dome, same as PWA / Legal */
body.partners-page:not(.pwa-page):not(.legal-page) .closing-earth{top:0;background:
  linear-gradient(180deg,rgba(1,1,1,0),#010101) 0 32vw/100% 8.7vw no-repeat,
  url(assets/footer-dome.jpg) 50% 0/100% 40.6vw no-repeat,
  linear-gradient(#010101,#010101) 0 calc(40.6vw - 2px)/100% 100% no-repeat,#fff}
body.partners-page:not(.pwa-page):not(.legal-page) .closing .final-cta{padding-top:calc(40.6vw + 10px);padding-bottom:clamp(120px,8.2vw,160px)}
@media(max-width:800px){
  body.partners-page:not(.pwa-page):not(.legal-page) .closing-earth{background:linear-gradient(180deg,rgba(1,1,1,0),#010101) 0 290px/100% 72px no-repeat,url(assets/footer-dome.jpg) 50% 0/200% 360px no-repeat,linear-gradient(#010101,#010101) 0 358px/100% 100% no-repeat,#fff}
  body.partners-page:not(.pwa-page):not(.legal-page) .closing .final-cta{padding-top:370px;padding-bottom:110px}}
/* Why visual: dark panel, translucent ring with rotating text, blue coin-orb, and a line circle (reference) */
.p-why-visual{background:#010313!important}
.p-why-visual .why-art{position:absolute;inset:0;width:100%;height:100%;display:block}
.why-art .wa-line{fill:none;stroke:#2d5fe6;stroke-width:1.6;stroke-opacity:.9}
.why-art .wa-text{fill:#fff;font-family:Pretendard,"Noto Sans KR",sans-serif;font-size:31px;font-weight:400;letter-spacing:.06em}
.why-art .wa-spin{transform-origin:60px 560px;animation:wa-spin 48s linear infinite}
.why-art .wa-orb{animation:wa-float 7s ease-in-out infinite alternate}
@keyframes wa-spin{to{transform:rotate(360deg)}}
@keyframes wa-float{from{transform:translateY(-6px)}to{transform:translateY(6px)}}
@media(prefers-reduced-motion:reduce){.why-art .wa-spin,.why-art .wa-orb{animation:none}}
.pp-t-reward{fill:#fff}
/* Glass ring: frosted orb behind the ring, text dim on dark and bright where it crosses the orb */
.why-art .wa-text-dim{fill:#fff;fill-opacity:.62;font-weight:300}
.why-art .wa-text-lit{fill:#fff;font-weight:500}
/* Why visual: right circle dashed + rotating, orb centred */
.why-art .wa-line{stroke-dasharray:3 9;stroke-linecap:round;stroke-width:2}
.why-art .wa-line-spin{transform-origin:600px 560px;animation:wa-spin 60s linear infinite}
@media(prefers-reduced-motion:reduce){.why-art .wa-line-spin{animation:none}}
.why-art .wa-spin{transform-origin:-20px 560px}
.pp-b-muted{fill:#6b7385}
.pp-t-bg,.pp-t.is-failed .pp-t-bg{stroke:none}
/* Mobile: the four "why" cards sit 2×2 under the visual. */
@media(max-width:600px){
  .p-why-grid{grid-template-columns:1fr 1fr;gap:8px}
  .p-why-visual{grid-column:1/-1}
  .p-why-card{padding:24px 22px 96px}
  .p-why-card h3{font-size:16px;line-height:1.35;word-break:keep-all}
  .p-why-card p{margin-top:8px;font-size:12.5px;line-height:1.55;word-break:keep-all}
  .p-why-card .why-ico{width:64px;right:20px;bottom:18px}
}
/* Mobile: fit the orb, glass ring and the dashed orbit on the right inside the short banner (no crop). */
@media(max-width:600px){
  .p-why-visual .why-art{inset:auto;left:50%;top:50%;width:auto;height:170%;aspect-ratio:600/1020;transform:translate(-50%,-54.9%);overflow:visible}
}
@media(max-width:600px){.p-program-card .p-program-desc{color:rgba(255,255,255,.8)}}
@media(max-width:800px){.p-how .p-step{grid-template-columns:40% 1fr;gap:14px;align-items:center;padding:22px 0}.p-how .p-step-title{font-size:18px;gap:10px}.p-how .p-step-title svg{width:20px;height:20px}.p-how .p-step-body{font-size:13.5px;gap:4px;line-height:1.45;word-break:keep-all}.p-how .p-step-body b{font-size:13px}}
.m-br{display:none}@media(max-width:600px){.m-br{display:inline}}
@media(max-width:600px){.p-why-grid:before{top:70%}}
@media(max-width:600px){.p-why-grid:before{bottom:calc(-1 * var(--section-gap) - 4px);background:linear-gradient(180deg,rgba(255,255,255,0) 0%,#dbe5f5 14%,#9db8e3 28%,#5b86c8 44%,#2a569b 58%,#10305f 72%,#050f22 86%,#010103 96%,#010103 100%)}.p-program{margin-top:-1px}}