* { box-sizing:border-box; }
html { scroll-behavior:smooth; color-scheme:dark; }
body { margin:0; background:radial-gradient(ellipse at 0 60%,#21103988,transparent 45%),#08070e; color:#f7f5fc; font:15px/1.65 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif; }
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; cursor:pointer; color:inherit; }
a { color:inherit; text-decoration:none; }
button:focus-visible,a:focus-visible { outline:2px solid #ba9dff; outline-offset:5px; }
.shell { width:min(1280px,calc(100% - 48px)); margin:auto; }
header { position:sticky; top:0; z-index:20; background:#08070ef2; backdrop-filter:blur(16px); border-bottom:1px solid #ffffff10; }
.header-inner { height:78px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:12px; font-size:36px; font-weight:800; line-height:1; letter-spacing:1px; }
.brand small { display:block; font-size:8px; letter-spacing:3px; margin-top:8px; color:#c9c1df; }
.brand-mark { display:grid; place-items:center; width:52px; height:52px; border:2px solid #baacff; border-radius:50% 50% 14% 50%; transform:rotate(-12deg); background:linear-gradient(145deg,#74ceff33,#773eff99); color:#e0d4ff; font-size:45px; font-style:italic; font-weight:800; box-shadow:0 0 22px #8656ff44; }
.header-actions { display:flex; align-items:center; gap:14px; }
.language { padding:8px 14px; border:1px solid #c4a2ff30; border-radius:24px; background:linear-gradient(#241b36,#110e1a); font-size:12px; font-weight:700; }
.language span { margin-left:7px; color:#ac8ae6; }
.button { border:0; background:linear-gradient(120deg,#7c42f5,#5420df); padding:11px 29px; border-radius:24px; font-size:12px; font-weight:700; box-shadow:0 8px 28px #6325df30; transition:filter .2s,transform .2s; }
.button:hover { filter:brightness(1.2); transform:translateY(-2px); }
.hero { height:410px; position:relative; overflow:hidden; background:#0d081b; text-align:center; }
.hero-art { position:absolute; inset:0; background:radial-gradient(at 50% 0%,#48257655,transparent 65%),linear-gradient(110deg,#141022,#070611); }
.roulette { position:absolute; width:550px; height:550px; left:-45px; top:-130px; border:22px solid #6d5836; border-radius:50%; background:repeating-conic-gradient(from 10deg,#731928 0deg 9deg,#181520 9deg 18deg,#947750 18deg 18.5deg); transform:perspective(800px) rotateX(34deg) rotateY(15deg); box-shadow:0 0 0 12px #241b15,0 0 0 17px #8d7650,0 20px 80px #000; }
.roulette:before { content:""; position:absolute; inset:58px; border:4px solid #ab8b58; border-radius:50%; background:repeating-conic-gradient(#776047 0deg 2deg,#201813 2deg 20deg); }
.wheel-center { position:absolute; inset:135px; border:10px solid #90754a; border-radius:50%; display:grid; place-items:center; background:radial-gradient(#ae986b,#312215); font:italic 90px Georgia; color:#cebd95; }
.screen-art { position:absolute; width:580px; height:300px; right:-10px; top:30px; transform:perspective(900px) rotateY(-24deg) rotateZ(-8deg); border:8px solid #554665; border-radius:22px; background:linear-gradient(130deg,#30203b,#0b0912); box-shadow:0 0 0 4px #a2865744; padding:24px; }
.screen-bar { font-size:12px; color:#b893df; letter-spacing:4px; text-align:left; border-bottom:1px solid #685173; padding-bottom:15px; }
.chart { margin:20px 0; height:80px; background:linear-gradient(0deg,#663da166,transparent); clip-path:polygon(0 80%,10% 70%,20% 83%,30% 40%,40% 55%,50% 33%,60% 45%,70% 15%,80% 30%,90% 0,100% 20%,100% 100%,0 100%); }
.tiles { display:flex; gap:16px; }
.tiles span { flex:1; padding:6px; font-size:40px; background:linear-gradient(140deg,#45284c,#11101d); border:1px solid #75596c; color:#b78fb5; border-radius:8px; }
.orb { position:absolute; border-radius:50%; filter:blur(30px); background:#6c27bd55; width:200px; height:200px; }
.orb.one { left:35%; top:-100px; }
.orb.two { right:24%; bottom:-150px; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(0deg,#08070e,transparent 35%),linear-gradient(90deg,#08070e66,#08070eb0 38%,#08070eb0 65%,#08070e66); }
.hero-copy { position:relative; padding:42px 10px 20px; }
.intro { color:#b598ff; font-size:20px; letter-spacing:1px; margin:0 0 12px; }
h1 { font-size:40px; line-height:1.25; margin:0 0 12px; letter-spacing:-1.5px; }
.hero h2 { font-size:27px; color:#d0cbd8; margin:0; letter-spacing:-1px; }
.lead { margin:13px 0 19px; font-size:22px; color:#d2ceda; line-height:1.7; }
.hero .button { border-radius:7px; }
.hero .button span { margin-left:13px; }
.arrow { position:absolute; top:44%; border:1px solid #ffffff26; background:#0b081666; border-radius:50%; width:43px; height:43px; font-size:32px; line-height:1; }
.prev { left:18px; }
.next { right:18px; }
.dots { position:absolute; bottom:24px; left:0; right:0; display:flex; justify-content:center; gap:8px; }
.dots button { width:8px; height:8px; padding:0; border:0; border-radius:10px; background:#ffffff40; }
.dots button.active { width:23px; background:#fff; }
.preview { padding-top:65px; }
.tabs { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid #ffffff1c; border-radius:12px 12px 0 0; overflow:hidden; }
.tabs button { padding:17px 8px; background:#0c0c13; border:0; border-right:1px solid #ffffff12; font-size:14px; font-weight:700; }
.tabs button.active { background:linear-gradient(100deg,#b62d59,#66258b); }
.tabs b { background:#f9cc54; color:#160c14; border-radius:12px; padding:2px 7px; font-size:9px; margin-left:5px; }
.section-copy { text-align:center; padding:35px 0 20px; }
.eyebrow { color:#a487df; letter-spacing:2px; font-size:12px; }
.section-copy h2 { font-size:43px; margin:20px 0; letter-spacing:-1.5px; }
.section-copy>p:last-child { color:#d0cbd8; }
.features { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin:0 0 55px; }
.feature { --glow:#cd63ab; text-align:center; border:1px solid color-mix(in srgb,var(--glow) 45%,transparent); border-radius:23px; padding:25px 14px 21px; background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--glow) 16%,transparent),transparent 65%),#0d0a16; box-shadow:0 0 28px color-mix(in srgb,var(--glow) 9%,transparent); }
.f1 { --glow:#9274ff; }
.f2 { --glow:#dcc06a; }
.f3 { --glow:#ed727e; }
.feature-icon { color:var(--glow); height:60px; filter:drop-shadow(0 0 12px var(--glow)); }
.feature-icon svg { width:55px; height:55px; }
.feature h3 { font-size:19px; margin:14px 0 7px; }
.feature p { font-size:11px; color:#b5aec5; min-height:36px; }
.feature ul { padding:0; margin:17px 0 0; list-style:none; font-size:12px; font-weight:600; }
.feature li:before { content:"•"; color:var(--glow); text-shadow:0 0 9px var(--glow); margin-right:8px; }
.migration { position:relative; overflow:hidden; padding:46px 35px 38px; border:1px solid #8e56cc55; border-radius:25px; text-align:center; background:radial-gradient(ellipse at 50% 0,#48206b44,transparent 60%),radial-gradient(#9976d514 1px,transparent 1px),#0c0819; background-size:auto,22px 22px,auto; box-shadow:inset 0 0 0 1px #ffffff08,0 0 40px #5e299122; }
.migration-label { font-size:11px; font-weight:800; letter-spacing:4px; color:#eee4ff; }
.migration h2 { font-size:36px; margin:20px 0 14px; letter-spacing:-1px; }
.migration em { font-style:normal; color:#bb95fa; }
.flow-arrow { color:#dfd0ff; margin:0 9px; }
.migration-lead { color:#c7c0d2; font-size:14px; line-height:1.9; }
.migration-points { font-size:12px; color:#d8b967; margin:22px 0 45px; }
.migration-flow { position:relative; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.migration-flow:before { content:""; position:absolute; height:3px; left:5%; right:5%; top:41%; background:linear-gradient(90deg,#6e30c0,#b388ff,#6e30c0); box-shadow:0 0 25px 5px #9d69ea44; }
.step,.endpoint { position:relative; display:flex; flex-direction:column; align-items:center; gap:12px; font-size:12px; font-weight:700; }
.glass { position:relative; width:85px; height:85px; display:grid; place-items:center; border:1px solid #9870cb66; border-radius:15px; background:linear-gradient(150deg,#2d1a43ee,#100b21); box-shadow:inset 0 1px 0 #ffffff1c; color:#b98df8; }
.glass svg { width:43px; height:43px; filter:drop-shadow(0 0 8px #8955e3); }
.endpoint .glass { width:130px; height:153px; }
.endpoint .glass svg { width:62px; height:62px; }
.target .glass { box-shadow:0 0 25px #8650d34d; }
.target .brand-mark { width:76px; height:76px; font-size:65px; }
.check { position:absolute; top:-6px; right:-4px; width:15px; height:15px; background:#271637; border:1px solid #c8a2fa; color:#dfbbff; font-size:9px; border-radius:50%; }
.pills { display:flex; justify-content:center; gap:18px; margin-top:42px; }
.pills span { border:1px solid #cba96055; border-radius:30px; padding:10px 20px; font-size:12px; background:#100b19; }
footer { display:flex; justify-content:space-between; align-items:center; padding:40px 0; color:#81758f; }
footer .brand { font-size:27px; color:#c8badf; }
footer .brand-mark { width:38px; height:38px; font-size:32px; }
footer p { font-size:11px; }
dialog { width:min(420px,calc(100% - 32px)); background:#171022; border:1px solid #8b5acf77; border-radius:20px; padding:35px; color:#fff; text-align:center; }
dialog::backdrop { background:#000a; backdrop-filter:blur(5px); }
.close { position:absolute; right:12px; top:8px; background:none; border:0; font-size:28px; }
.muted { color:#9589a8; font-size:13px; }
@media(max-width:900px) { .features { grid-template-columns:repeat(2,1fr); } .migration { padding:35px 18px; } .migration h2 { font-size:28px; } .glass { width:64px; height:70px; } .endpoint .glass { width:80px; height:105px; } .endpoint .glass svg { width:48px; height:48px; } .target .brand-mark { width:52px; height:52px; font-size:42px; } .step,.endpoint { font-size:10px; } .migration-flow { gap:5px; } }
@media(max-width:600px) { .shell { width:calc(100% - 28px); } .header-inner { height:70px; } .brand { font-size:29px; gap:9px; } .brand-mark { width:40px; height:40px; font-size:35px; } .brand small { font-size:6px; letter-spacing:2px; } .language { display:none; } .header-actions .button { padding:9px 15px; font-size:11px; } .hero { height:430px; } .hero-copy { padding-top:59px; } .intro { font-size:15px; } h1 { font-size:29px; letter-spacing:-1px; } .hero h2 { font-size:17px; } .lead { font-size:17px; margin:20px 0; } .roulette { width:400px; height:400px; left:-210px; top:-40px; } .roulette:before { inset:35px; } .wheel-center { inset:88px; font-size:65px; } .screen-art { right:-360px; } .arrow { width:29px; height:29px; font-size:25px; top:70%; } .prev { left:10px; } .next { right:10px; } .preview { padding-top:32px; } .tabs button { font-size:11px; padding:14px 3px; } .tabs b { display:block; width:32px; margin:3px auto 0; font-size:8px; } .section-copy { padding:25px 0 15px; } .section-copy h2 { font-size:29px; margin:15px 0; } .section-copy>p:last-child { font-size:12px; } .features { gap:12px; margin-bottom:30px; } .feature { padding:20px 8px; border-radius:16px; } .feature h3 { font-size:16px; } .feature p { font-size:10px; min-height:33px; } .feature ul { font-size:11px; } .migration { padding:30px 15px; } .migration-label { font-size:8px; letter-spacing:2px; } .migration h2 { font-size:23px; line-height:1.6; } .flow-arrow { margin:0 3px; } .migration-lead { font-size:12px; } .migration-points { font-size:10px; margin-bottom:25px; } .migration-flow { display:grid; grid-template-columns:repeat(3,1fr); gap:24px 10px; } .migration-flow:before { display:none; } .endpoint .glass,.glass { width:76px; height:80px; } .target { grid-column:2; } .step,.endpoint { font-size:11px; } .pills { gap:6px; margin-top:25px; flex-wrap:wrap; } .pills span { padding:7px 10px; font-size:10px; } footer { flex-direction:column; gap:17px; padding:30px 0; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button { transition:none; } }

[hidden] { display:none !important; }
.detail-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin:15px 0 30px; }
.detail-card { position:relative; border:1px solid #875be755; border-radius:18px; padding:38px 20px 24px; background:linear-gradient(145deg,#171025,#0d0a17); text-align:center; box-shadow:0 0 20px #7042b91a; }
.card-number { position:absolute; top:12px; left:13px; border-radius:50%; background:linear-gradient(#a078ff,#622fdb); padding:5px 8px; font-size:11px; font-weight:800; }
.detail-icon svg { width:53px; height:53px; color:#bb99ff; filter:drop-shadow(0 0 9px #8b52d966); }
.detail-card h3 { font-size:16px; margin:19px 0 10px; }
.detail-card p { color:#afa4c0; font-size:12px; margin:0; line-height:1.8; }
.tab-cta { text-align:center; margin:35px 0 55px; }
.partner-intro { display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:38px; margin:30px 0 50px; }
.partner-intro h3 { font-size:35px; line-height:1.5; margin:12px 0 25px; }
.partner-intro em { color:#a877f6; font-style:normal; }
.partner-list { list-style:none; padding:0; }
.partner-list li { display:flex; gap:15px; margin:20px 0; }
.partner-list svg { flex:0 0 38px; width:38px; height:38px; color:#aa84fa; }
.partner-list strong { font-size:14px; }
.partner-list p { margin:3px 0; color:#a69ab9; font-size:12px; }
.tech-tags { display:flex; gap:8px; flex-wrap:wrap; }
.tech-tags span { padding:7px 12px; border:1px solid #6e469c66; border-radius:8px; font-size:11px; color:#c2afdf; }
.dashboard-image { padding:0; border:1px solid #9666eb77; border-radius:19px; background:#100a1a; overflow:hidden; box-shadow:0 0 30px #7e42c52a; text-align:center; }
.dashboard-image img { display:block; width:100%; }
.dashboard-image span { display:block; font-size:12px; padding:10px; color:#baa5db; }
.provider-overview { text-align:center; }
.provider-overview>h3 { font-size:32px; margin:35px 0; }
.provider-overview>h3 em { color:#84dcc4; font-style:normal; }
.provider-overview>h3 span { color:#8a63da; padding:0 10px; }
.comparison-scroll { overflow:auto; border:1px solid #8459bb44; border-radius:22px; background:#0e0a19; }
.comparison { width:100%; border-collapse:collapse; min-width:650px; font-size:12px; text-align:center; }
.comparison th,.comparison td { padding:22px 16px; border-bottom:1px solid #9e77cf22; }
.comparison th:first-child { text-align:left; width:28%; }
.comparison th:nth-child(2),.comparison td:nth-child(2) { background:#67bfac0a; color:#9be7ce; border-left:1px solid #82d8c455; border-right:1px solid #82d8c455; }
.comparison small { display:block; color:#84758f; font-weight:400; margin-top:7px; }
.comparison td { color:#a89cb9; }
.comparison td b { display:block; font-size:23px; color:#81d7c1; }
.provider-banner { padding:20px; margin:25px 0 45px; border:1px solid #72509944; border-radius:12px; background:#1e122f; color:#c2afd9; font-size:14px; }
.provider-banner strong { color:#bd9bf4; }
.provider-tiles { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin:22px 0 55px; }
.provider-tiles>div { border:1px solid #76579b44; border-radius:12px; background:linear-gradient(135deg,#231732,#100b18); padding:20px 8px; }
.provider-tiles span { display:block; font-size:30px; color:#b595e4; }
.provider-tiles b { font-size:10px; color:#c7b6de; letter-spacing:1px; }
.ops-section,.process-section { text-align:center; margin:45px 0; }
.ops-section>h3,.process-section>h3 { font-size:32px; margin:12px 0 20px; }
.ops-lead { color:#aea0bf; font-size:14px; margin-bottom:35px; }
.image-dialog { width:min(1050px,calc(100% - 30px)); max-height:90vh; padding:25px 20px; }
.image-dialog img { display:block; width:100%; border-radius:14px; }
.image-dialog h2 { font-size:22px; margin-top:0; }
.image-dialog p { color:#a697b8; font-size:12px; }
@media(max-width:900px) { .detail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .partner-intro { grid-template-columns:1fr; } .provider-tiles { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:600px) { .detail-grid { gap:12px; } .detail-card { padding:35px 12px 21px; } .detail-card h3 { font-size:14px; } .detail-card p { font-size:11px; } .section-copy h2 { font-size:27px; } .partner-intro h3 { font-size:29px; } .provider-overview>h3 { font-size:24px; } .provider-tiles { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } .provider-tiles b { font-size:8px; } .ops-section>h3,.process-section>h3 { font-size:25px; } .ops-lead { font-size:12px; } .image-dialog { padding:30px 12px 12px; } .image-dialog h2 { font-size:17px; } }