.xfp{--xfp-bg:#0f172a;--xfp-bg-alt:#16253b;--xfp-surface:#16253b;--xfp-border:#233958;--xfp-border-strong:#37517a;
--xfp-text:#f8fafc;--xfp-text-soft:#cbd5e1;--xfp-text-mute:#94a3b8;--xfp-text-faint:#64748b;
--xfp-accent:#488efe;--xfp-accent-hi:#7aa9ff;--xfp-accent-lo:#1d5c9f;--xfp-accent-soft:rgba(72,142,254,.14);--xfp-accent-glow:rgba(72,142,254,.35);--xfp-accent-2:#c9a86a;
--xfp-radius-sm:10px;--xfp-radius:14px;--xfp-radius-lg:22px;
--xfp-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
--xfp-sans:'Pretendard Variable','Pretendard','Noto Sans KR',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
font-family:var(--xfp-sans);color:var(--xfp-text);line-height:1.7;letter-spacing:-0.01em;max-width:1080px;margin:0 auto;}
.xfp *{box-sizing:border-box;}
.xfp a{color:inherit;text-decoration:none;}
.xfp img{max-width:100%;display:block;}
.xfp h1,.xfp h2,.xfp h3,.xfp h4{margin:0;font-weight:500;letter-spacing:-0.03em;}
.xfp p{margin:0;}
.xfp .xfp-wrap{width:100%;}
.xfp .xfp-section{padding-block:clamp(36px,6vw,64px);position:relative;}
.xfp .xfp-section-tight{padding-block:clamp(24px,4vw,40px);}
.xfp .xfp-section-alt{background:var(--xfp-bg-alt);border-radius:var(--xfp-radius-lg);padding-inline:clamp(16px,3vw,32px);}
.xfp .xfp-divider{height:1px;background:var(--xfp-border);border:0;margin:0;}
.xfp .h-display{font-weight:200;font-size:clamp(30px,5vw,52px);line-height:1.1;letter-spacing:-0.04em;}
.xfp .h-section{font-weight:300;font-size:clamp(22px,3vw,36px);line-height:1.25;letter-spacing:-0.03em;}
.xfp .h-3{font-weight:500;font-size:clamp(18px,1.6vw,22px);line-height:1.35;}
.xfp .accent{color:var(--xfp-accent-hi);}
.xfp .h-display .accent,.xfp .h-section .accent{background:linear-gradient(120deg,var(--xfp-accent-hi),var(--xfp-accent-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.xfp .lead{font-size:clamp(15px,1.1vw,17px);color:var(--xfp-text-soft);line-height:1.7;max-width:64ch;}
.xfp .eyebrow{font-family:var(--xfp-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--xfp-accent-hi);font-weight:500;display:inline-flex;align-items:center;gap:10px;}
.xfp .eyebrow::before{content:"";width:22px;height:1px;background:currentColor;display:inline-block;}
.xfp .sec-head{margin-bottom:clamp(22px,3vw,36px);}
.xfp .sec-head .h-section{margin-top:14px;}
.xfp .sec-head-row{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:20px;margin-bottom:clamp(22px,3vw,36px);}
.xfp .sec-head-row .h-section{margin-top:14px;}
.xfp .pull-quote{font-weight:300;font-size:clamp(18px,2.2vw,26px);line-height:1.5;letter-spacing:-0.02em;color:var(--xfp-text-soft);border-left:2px solid var(--xfp-accent);padding-left:clamp(16px,2vw,26px);}
.xfp .pull-quote b{color:var(--xfp-text);font-weight:500;}
.xfp .fgrid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--xfp-border);border:1px solid var(--xfp-border);border-radius:var(--xfp-radius-lg);overflow:hidden;}
.xfp .feature-card{background:var(--xfp-surface);padding:clamp(20px,2.2vw,30px);}
.xfp .feature-card .num{font-family:var(--xfp-mono);font-size:11px;letter-spacing:.14em;color:var(--xfp-text-mute);margin-bottom:14px;display:block;}
.xfp .feature-card h3{font-size:18px;font-weight:500;margin-bottom:8px;}
.xfp .feature-card p{color:var(--xfp-text-mute);font-size:14.5px;line-height:1.7;}
.xfp .feat-list{border-top:1px solid var(--xfp-border);}
.xfp .feat-row{display:grid;grid-template-columns:140px 1fr;gap:clamp(16px,2.4vw,36px);padding-block:clamp(20px,2.6vw,32px);border-bottom:1px solid var(--xfp-border);}
.xfp .feat-num{font-family:var(--xfp-mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--xfp-accent-hi);padding-top:4px;}
.xfp .feat-row h3{font-size:clamp(17px,1.4vw,21px);font-weight:500;margin-bottom:8px;}
.xfp .feat-row p{color:var(--xfp-text-mute);font-size:15px;line-height:1.7;}
.xfp .feat-row p strong{color:var(--xfp-text-soft);font-weight:600;}
.xfp .stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--xfp-border);border:1px solid var(--xfp-border);border-radius:var(--xfp-radius-lg);overflow:hidden;}
.xfp .stat-cell{background:var(--xfp-surface);padding:clamp(18px,2.2vw,28px);}
.xfp .stat-cell .v{font-weight:200;font-size:clamp(24px,2.6vw,34px);line-height:1;letter-spacing:-0.02em;}
.xfp .stat-cell .v small{font-size:.45em;color:var(--xfp-text-mute);font-weight:400;margin-left:3px;}
.xfp .stat-cell .k{font-family:var(--xfp-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--xfp-text-mute);margin-top:10px;}
.xfp .card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.xfp .card-grid.g2{grid-template-columns:repeat(2,1fr);gap:18px;}
.xfp .card-grid.g3{grid-template-columns:repeat(3,1fr);gap:18px;}
.xfp .skin-card{border:1px solid var(--xfp-border);border-radius:var(--xfp-radius-lg);background:var(--xfp-surface);overflow:hidden;display:flex;flex-direction:column;}
.xfp .skin-card .thumb{aspect-ratio:4/3;position:relative;display:grid;place-items:center;background:linear-gradient(150deg,var(--xfp-accent-soft),transparent 70%);border-bottom:1px solid var(--xfp-border);}
.xfp .skin-card .thumb i{font-size:36px;color:var(--xfp-accent-hi);}
.xfp .skin-card .body{padding:18px 20px 22px;}
.xfp .skin-card .k{font-family:var(--xfp-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--xfp-accent-hi);margin-bottom:6px;display:block;}
.xfp .skin-card h3{font-size:18px;font-weight:500;margin-bottom:6px;}
.xfp .skin-card p{color:var(--xfp-text-mute);font-size:14px;line-height:1.6;margin:0 0 12px;}
.xfp .skin-card ul{list-style:none;padding:0;display:grid;gap:6px;font-family:var(--xfp-mono);font-size:12px;color:var(--xfp-text-soft);}
.xfp .skin-card li{display:flex;gap:8px;}
.xfp .skin-card li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--xfp-accent);flex-shrink:0;margin-top:8px;}
.xfp .soon{font-family:var(--xfp-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--xfp-accent-hi);border:1px solid var(--xfp-border-strong);border-radius:999px;padding:3px 10px;display:inline-block;background:rgba(15,23,42,.6);}
.xfp .skin-card .thumb .soon{position:absolute;top:10px;right:10px;}
.xfp .case-card{padding:clamp(18px,2vw,28px);border:1px solid var(--xfp-border);border-radius:var(--xfp-radius-lg);background:var(--xfp-surface);display:flex;flex-direction:column;gap:12px;}
.xfp .case-card .k{font-family:var(--xfp-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--xfp-accent-hi);}
.xfp .case-card h3,.xfp .case-card h4{font-size:18px;font-weight:500;}
.xfp .case-card p{color:var(--xfp-text-mute);font-size:14.5px;line-height:1.7;}
.xfp .case-card .who{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--xfp-text-faint);border-top:1px solid var(--xfp-border);padding-top:12px;margin-top:auto;}
.xfp .steps-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.xfp .step-card{padding:clamp(20px,2.2vw,28px);border:1px solid var(--xfp-border);border-radius:var(--xfp-radius-lg);background:var(--xfp-surface);}
.xfp .step-card .n{font-weight:200;font-size:clamp(34px,3.4vw,46px);line-height:1;letter-spacing:-0.04em;margin-bottom:14px;background:linear-gradient(140deg,var(--xfp-accent-hi),var(--xfp-accent-lo));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.xfp .step-card h3{font-size:18px;font-weight:500;margin-bottom:10px;}
.xfp .step-card p{color:var(--xfp-text-mute);font-size:14.5px;line-height:1.7;}
.xfp .step-card p strong{color:var(--xfp-text-soft);font-weight:600;}
.xfp .table-card{border:1px solid var(--xfp-border);border-radius:var(--xfp-radius-lg);background:var(--xfp-surface);overflow:hidden;}
.xfp .kv-table{width:100%;border-collapse:collapse;}
.xfp .kv-table th,.xfp .kv-table td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--xfp-border);font-size:14.5px;vertical-align:top;}
.xfp .kv-table tbody tr:last-child td{border-bottom:0;}
.xfp .kv-table th{font-family:var(--xfp-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--xfp-text-mute);font-weight:500;background:var(--xfp-bg-alt);}
.xfp .kv-table td:first-child{color:var(--xfp-text);font-weight:600;white-space:nowrap;width:200px;}
.xfp .kv-table td{color:var(--xfp-text-mute);line-height:1.6;}
.xfp .kv-table td b{color:var(--xfp-text-soft);}
.xfp .code-block{background:var(--xfp-bg);border:1px solid var(--xfp-border);border-radius:var(--xfp-radius);padding:16px 18px;font-family:var(--xfp-mono);font-size:13px;line-height:1.7;color:var(--xfp-text-soft);overflow-x:auto;margin:0;}
.xfp .hl-list{display:grid;gap:0;border-top:1px solid var(--xfp-border);}
.xfp .hl-item{display:flex;align-items:flex-start;gap:14px;padding-block:14px;border-bottom:1px solid var(--xfp-border);font-size:15px;color:var(--xfp-text-soft);}
.xfp .hl-item .dot{width:6px;height:6px;border-radius:50%;background:var(--xfp-accent-hi);flex-shrink:0;margin-top:9px;}
.xfp .hl-item b{color:var(--xfp-text);font-weight:600;}
.xfp .hl-list.two{grid-template-columns:1fr;}
@media (min-width:820px){.xfp .hl-list.two{display:grid;grid-template-columns:1fr 1fr;column-gap:36px;}}
.xfp .btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;min-height:44px;border-radius:999px;font-weight:500;font-size:14.5px;letter-spacing:-0.01em;border:1px solid transparent;}
.xfp .btn-primary{background:var(--xfp-accent);color:#fff;}
.xfp .btn-ghost{background:transparent;color:var(--xfp-text);border-color:var(--xfp-border-strong);}
.xfp .btn-row{display:flex;flex-wrap:wrap;gap:10px;}
.xfp .cta{border-top:1px solid var(--xfp-border);padding-block:clamp(40px,6vw,72px);text-align:center;}
.xfp .cta-title{font-weight:300;font-size:clamp(22px,3.4vw,36px);line-height:1.16;letter-spacing:-0.03em;margin-top:14px;margin-bottom:16px;}
.xfp .cta p{color:var(--xfp-text-mute);font-size:15.5px;margin:0 auto 24px;max-width:52ch;}
.xfp .cta .btn-row{justify-content:center;}
.xfp .page-nav{display:flex;gap:12px;flex-wrap:wrap;}
.xfp .page-nav a{flex:1 1 220px;display:flex;align-items:center;gap:12px;padding:16px 18px;min-height:70px;border:1px solid var(--xfp-border);border-radius:var(--xfp-radius);background:var(--xfp-surface);}
.xfp .page-nav a .dir{display:block;font-family:var(--xfp-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--xfp-text-faint);margin-bottom:3px;}
.xfp .page-nav a .nm{font-size:15.5px;font-weight:500;}
.xfp .page-nav a.next{text-align:right;justify-content:flex-end;}
.xfp .mono{font-family:var(--xfp-mono);font-size:13px;}
.xfp .en{font-weight:300;color:var(--xfp-text-mute);}
.xfp .mt-s{margin-top:12px;}.xfp .mt-m{margin-top:22px;}.xfp .mt-l{margin-top:36px;}
.xfp .panel{border:1px solid var(--xfp-border);border-radius:var(--xfp-radius-lg);background:var(--xfp-surface);padding:clamp(18px,2.6vw,30px);}
@media (max-width:860px){
.xfp .fgrid-3{grid-template-columns:1fr;}
.xfp .card-grid{grid-template-columns:repeat(2,1fr);}
.xfp .card-grid.g3{grid-template-columns:1fr;}
.xfp .steps-row{grid-template-columns:1fr;}
.xfp .stat-row{grid-template-columns:repeat(2,1fr);}
.xfp .feat-row{grid-template-columns:1fr;gap:8px;}
}
@media (max-width:560px){.xfp .card-grid{grid-template-columns:1fr;}}
.xfp .hero{padding-block:clamp(28px,5vw,52px) clamp(24px,4vw,40px);position:relative;}
.xfp .hero-top{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;font-family:var(--xfp-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--xfp-text-mute);margin-bottom:clamp(20px,3vw,36px);}
.xfp .hero-grid{display:grid;grid-template-columns:1fr;gap:clamp(28px,3.4vw,44px);align-items:center;}
@media (min-width:940px){.xfp .hero-grid{grid-template-columns:1.06fr .94fr;}}
.xfp .hero-tag{font-family:var(--xfp-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--xfp-text-soft);display:inline-flex;align-items:center;gap:10px;margin-bottom:20px;}
.xfp .hero-tag .pulse{width:7px;height:7px;border-radius:50%;background:var(--xfp-accent);display:inline-block;}
.xfp .hero-copy{margin-top:20px;color:var(--xfp-text-soft);font-size:15.5px;line-height:1.72;max-width:46ch;}
.xfp .hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;}
.xfp .hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px;padding-top:24px;border-top:1px solid var(--xfp-border);}
.xfp .hero-stat .k{font-family:var(--xfp-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--xfp-text-mute);}
.xfp .hero-stat .v{font-weight:200;font-size:clamp(22px,2.6vw,32px);line-height:1;margin-top:6px;letter-spacing:-0.02em;}
.xfp .hero-stat .v small{font-size:.45em;color:var(--xfp-text-mute);font-weight:400;margin-left:2px;}
.xfp .hero-stat .l{font-size:12px;color:var(--xfp-text-mute);margin-top:6px;}
@media (max-width:520px){.xfp .hero-stats{grid-template-columns:repeat(2,1fr);gap:14px 16px;}}
.xfp .mod-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.xfp .mod{border:1px solid var(--xfp-border);border-radius:var(--xfp-radius);overflow:hidden;background:var(--xfp-surface);display:flex;flex-direction:column;min-height:150px;}
.xfp .mod-label{font-family:var(--xfp-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--xfp-text-mute);padding:10px 12px 0;}
.xfp .mod-stage{flex:1;display:grid;place-items:center;padding:12px;font-size:16px;color:var(--xfp-text-soft);text-align:center;}
.xfp .mod-foot{border-top:1px solid var(--xfp-border);padding:9px 12px;font-size:11.5px;color:var(--xfp-text-mute);line-height:1.5;}
.xfp .mod-foot b{color:var(--xfp-text-soft);font-weight:600;}
.xfp .demo-tree{width:100%;display:grid;gap:5px;}
.xfp .demo-tree .trow{display:flex;align-items:center;gap:7px;font-family:var(--xfp-mono);font-size:10.5px;color:var(--xfp-text-mute);padding:5px 8px;border-radius:6px;background:rgba(255,255,255,.04);}
.xfp .demo-tree .trow.hot{color:var(--xfp-text-soft);background:var(--xfp-accent-soft);}
.xfp .demo-tree .trow .sz{margin-left:auto;color:var(--xfp-text-faint);}
.xfp .demo-upload{width:100%;display:grid;gap:8px;}
.xfp .demo-upload .bar{height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;}
.xfp .demo-upload .bar span{display:block;height:100%;width:78%;border-radius:999px;background:linear-gradient(90deg,var(--xfp-accent),var(--xfp-accent-hi));}
.xfp .demo-upload .meta{display:flex;justify-content:space-between;font-family:var(--xfp-mono);font-size:10px;color:var(--xfp-text-mute);}
.xfp .demo-book{display:flex;gap:4px;align-items:stretch;height:62px;}
.xfp .demo-book .pg{width:34px;border-radius:3px;background:rgba(255,255,255,.09);}
.xfp .demo-book .pg.on{background:var(--xfp-accent-soft);border:1px solid var(--xfp-accent-lo);}
.xfp .demo-wave{display:flex;align-items:flex-end;gap:3px;height:38px;}
.xfp .demo-wave i{width:3px;height:60%;border-radius:2px;background:var(--xfp-accent-lo);display:inline-block;}
.xfp .demo-wave i:nth-child(4n){background:var(--xfp-accent-hi);height:90%;}
.xfp .flat-stack{display:grid;gap:1px;background:var(--xfp-border);border:1px solid var(--xfp-border);border-radius:var(--xfp-radius-lg);overflow:hidden;}
.xfp .flat-stack>*{background:var(--xfp-surface);}
.xfp .link-inline{display:inline-flex;align-items:center;gap:6px;color:var(--xfp-text);font-weight:500;border-bottom:1px solid var(--xfp-border-strong);padding-bottom:3px;}
@media (max-width:620px){.xfp .mod-grid{grid-template-columns:1fr 1fr;}.xfp .mod{min-height:130px;}}
[data-theme="light"] .xfp{--xfp-bg:#f8fafc;--xfp-bg-alt:#eef2f7;--xfp-surface:#ffffff;--xfp-border:#dde4ee;--xfp-border-strong:#c3cee0;
--xfp-text:#0f172a;--xfp-text-soft:#334155;--xfp-text-mute:#64748b;--xfp-text-faint:#94a3b8;
--xfp-accent:#1d5c9f;--xfp-accent-hi:#2563eb;--xfp-accent-lo:#164a80;--xfp-accent-soft:rgba(29,92,159,.08);--xfp-accent-glow:rgba(29,92,159,.22);--xfp-accent-2:#b7862f;
color:var(--xfp-text);}
[data-theme="light"] .xfp .demo-tree .trow{background:rgba(15,23,42,.04);}
[data-theme="light"] .xfp .demo-upload .bar{background:rgba(15,23,42,.08);}
[data-theme="light"] .xfp .demo-book .pg{background:rgba(15,23,42,.09);}
[data-theme="light"] .xfp .soon{background:rgba(255,255,255,.85);}
[data-theme="light"] .xfp .btn-primary{color:#fff;}
.xfp .xfp-reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);}
.xfp .xfp-reveal.xfp-in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
.xfp .xfp-reveal{opacity:1!important;transform:none!important;transition:none!important;}
}
@media (max-width:640px){
.xfp{max-width:100%;}
.xfp .xfp-wrap{padding-inline:15px;}
.xfp .hero,.xfp .xfp-section{padding-block:28px;}
.xfp .xfp-section-tight{padding-block:20px;}
.xfp .sec-head,.xfp .sec-head-row{margin-bottom:18px;}
.xfp .h-display{font-size:clamp(26px,8vw,34px);}
.xfp .h-section{font-size:clamp(20px,6vw,26px);}
.xfp .feature-card,.xfp .step-card,.xfp .case-card,.xfp .skin-card,.xfp .table-card,.xfp .panel{background:transparent;border:0;border-radius:0;padding-inline:0;box-shadow:none;}
.xfp .fgrid-3,.xfp .stat-row,.xfp .flat-stack{background:transparent;border:0;border-radius:0;gap:0;overflow:visible;border-top:1px solid var(--xfp-border);}
.xfp .fgrid-3>.feature-card,.xfp .stat-cell{background:transparent;border-bottom:1px solid var(--xfp-border);padding:18px 0;}
.xfp .card-grid,.xfp .card-grid.g2,.xfp .card-grid.g3{gap:0;grid-template-columns:1fr;}
.xfp .card-grid>.skin-card,.xfp .card-grid>.case-card,.xfp .card-grid>.feature-card{border-bottom:1px solid var(--xfp-border);padding-block:18px;border-radius:0;}
.xfp .card-grid>*:first-child{border-top:1px solid var(--xfp-border);}
.xfp .skin-card .thumb{border-radius:10px;border:1px solid var(--xfp-border);margin-top:2px;aspect-ratio:16/9;}
.xfp .steps-row{gap:0;grid-template-columns:1fr;}
.xfp .step-card{border-bottom:1px solid var(--xfp-border);padding-block:18px;}
.xfp .step-card:first-child{border-top:1px solid var(--xfp-border);}
.xfp .case-card{border-bottom:1px solid var(--xfp-border);padding-block:18px;}
.xfp .case-card:first-child{border-top:1px solid var(--xfp-border);}
.xfp .panel{border-top:1px solid var(--xfp-border);border-bottom:1px solid var(--xfp-border);padding:18px 0;}
.xfp .cta{padding-block:40px;}
.xfp .flat-stack>*{padding-inline:0!important;}
.xfp .mod-grid{grid-template-columns:1fr 1fr;gap:8px;}
.xfp .mod{min-height:120px;border-radius:10px;}
.xfp .feat-row{grid-template-columns:1fr;gap:6px;}
.xfp .hero-stats{grid-template-columns:repeat(2,1fr);gap:14px 16px;}
.xfp .table-card{border:0;border-radius:0;background:transparent;overflow:visible;}
.xfp .kv-table thead{display:none;}
.xfp .kv-table,.xfp .kv-table tbody,.xfp .kv-table tr,.xfp .kv-table td{display:block;width:auto;}
.xfp .kv-table tr{padding-block:14px;border-bottom:1px solid var(--xfp-border);}
.xfp .kv-table tr:first-child{border-top:1px solid var(--xfp-border);}
.xfp .kv-table td{border:0;padding:0;}
.xfp .kv-table td:first-child{width:auto;margin-bottom:6px;font-size:15.5px;font-weight:600;color:var(--xfp-text);}
.xfp .kv-table td+td{color:var(--xfp-text-mute);font-size:14px;}
}