*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#04060e;--card:rgba(8,14,30,0.88);--bdr:rgba(80,160,255,0.1);--blue:#4da8ff;--cyan:#00e5c8;--gold:#ffd94a;--red:#ff5c5c;--purple:#b088ff;--orange:#ff9940;--t1:#d8dfe9;--t2:#7a8599;--t3:#4a5568;--glow:rgba(77,168,255,0.15)}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--t1);font-family:'Noto Sans KR',sans-serif;line-height:1.7;overflow-x:hidden}
#stars{position:fixed;inset:0;z-index:0;pointer-events:none}
.pw{position:relative;z-index:1}
.nb{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(4,6,14,0.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;padding:0 12px 0 16px;height:54px;gap:8px}
.nl{font-family:'Orbitron',sans-serif;font-size:13px;font-weight:700;color:var(--cyan);letter-spacing:2px}
.nn{display:flex;gap:2px;align-items:center;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-shrink:1;min-width:0}.nn::-webkit-scrollbar{display:none}
.nn a{color:var(--t2);text-decoration:none;font-size:11px;padding:5px 9px;border-radius:16px;transition:.25s;white-space:nowrap}
.nn a:hover,.nn a.ac{color:var(--blue);background:var(--glow)}
.lbtn{background:rgba(255,255,255,0.06);border:1px solid var(--bdr);color:var(--gold);font-family:'JetBrains Mono',monospace;font-size:11px;padding:3px 11px;border-radius:12px;cursor:pointer;transition:.25s;margin-left:4px}
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 20px 60px;position:relative}
.he{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:6px;color:var(--cyan);text-transform:uppercase;margin-bottom:14px;opacity:0;animation:fu .8s .3s forwards}
.hero h1{font-family:'Orbitron',sans-serif;font-size:clamp(24px,5vw,48px);font-weight:900;line-height:1.2;margin-bottom:18px;opacity:0;animation:fu .8s .5s forwards}
.gt{background:linear-gradient(135deg,var(--blue),var(--cyan),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hs{font-size:14px;color:var(--t2);max-width:520px;margin-bottom:36px;opacity:0;animation:fu .8s .7s forwards}
.hcta{display:inline-flex;gap:8px;background:linear-gradient(135deg,var(--blue),var(--cyan));color:var(--bg);font-weight:700;font-size:13px;padding:11px 26px;border-radius:28px;text-decoration:none;transition:.2s;opacity:0;animation:fu .8s .9s forwards}
.hcta:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(77,168,255,.3)}
.sh{position:absolute;bottom:28px;animation:fl 2s infinite ease-in-out;color:var(--t3);font-size:22px}
.sec{max-width:920px;margin:0 auto;padding:50px 20px}
.sl{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:5px;color:var(--cyan);text-transform:uppercase;margin-bottom:6px}
.st{font-family:'Orbitron',sans-serif;font-size:clamp(20px,4vw,32px);font-weight:700;margin-bottom:10px;line-height:1.3}
.sd{color:var(--t2);font-size:14px;max-width:620px;margin-bottom:24px}
.cd{background:var(--card);border:1px solid var(--bdr);border-radius:14px;padding:20px;margin-bottom:16px;backdrop-filter:blur(10px);transition:.3s}
.cd:hover{border-color:rgba(80,160,255,.25)}
.ctt{font-family:'Orbitron',sans-serif;font-size:13px;font-weight:700;color:var(--blue);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.cd p{font-size:13px;color:var(--t2);margin-bottom:8px}.cd p:last-child{margin-bottom:0}
.hl{color:var(--gold);font-weight:600}.hcy{color:var(--cyan);font-weight:600}.hor{color:var(--orange);font-weight:600}
.cw{border-radius:14px;overflow:hidden;border:1px solid var(--bdr);margin:18px 0;position:relative;background:#040810}
.cw canvas{display:block;width:100%}
.cc{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(4,6,14,.92));padding:16px 14px 10px;font-size:11px;color:var(--t3);font-family:'JetBrains Mono',monospace;text-align:center}
.tabs{display:flex;gap:4px;margin-bottom:14px;flex-wrap:wrap}
.tab{background:rgba(255,255,255,.04);border:1px solid var(--bdr);color:var(--t2);font-family:'JetBrains Mono',monospace;font-size:11px;padding:7px 13px;border-radius:8px;cursor:pointer;transition:.25s}
.tab.ac{background:var(--glow);color:var(--blue);border-color:rgba(77,168,255,.3)}
.cr{display:flex;gap:16px;flex-wrap:wrap;margin:14px 0}
.cg{flex:1;min-width:180px}
.cl2{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--t3);display:flex;justify-content:space-between;margin-bottom:5px}
.cv2{color:var(--gold);font-weight:700}
input[type=range]{-webkit-appearance:none;width:100%;height:4px;border-radius:2px;background:rgba(255,255,255,.08);outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--blue);border:2px solid var(--bg);box-shadow:0 0 8px rgba(77,168,255,.4);cursor:pointer}
.gm{text-align:center;padding:16px;border-radius:10px;margin:14px 0;transition:.3s}
.gv{font-family:'Orbitron',sans-serif;font-size:38px;font-weight:900}
.gl{font-family:'JetBrains Mono',monospace;font-size:11px;margin-top:3px}
.br{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.bn{width:85px;color:var(--t3);text-align:right;font-family:'JetBrains Mono',monospace;font-size:11px;flex-shrink:0}
.bt{flex:1;height:7px;background:rgba(255,255,255,.04);border-radius:3px;overflow:hidden}
.bf{height:100%;border-radius:3px;transition:width .5s}
.bv{width:48px;font-family:'JetBrains Mono',monospace;font-size:11px;flex-shrink:0}
.mg{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:16px}
.mc{background:var(--card);border:1px solid var(--bdr);border-radius:12px;padding:16px;transition:.3s;position:relative;overflow:hidden}
.mc:hover{border-color:rgba(80,160,255,.3);transform:translateY(-2px)}
.mn{font-family:'Orbitron',sans-serif;font-size:28px;font-weight:900;opacity:.08;position:absolute;top:8px;right:14px}
.mtt{font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;margin-bottom:6px}
.mdd{font-size:12px;color:var(--t2);line-height:1.7;margin-bottom:8px}
.fb{display:flex;align-items:center;gap:7px;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--t3)}
.ft{flex:1;height:4px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden}
.ff{height:100%;border-radius:2px}
.ci{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
.cnu{font-family:'Orbitron',sans-serif;font-size:17px;font-weight:900;color:var(--red);opacity:.7;flex-shrink:0;width:26px}
.cb{font-size:12px;color:var(--t2)}.cb strong{color:var(--t1);display:block;margin-bottom:2px;font-size:12.5px}
.sb{border:1px solid rgba(0,229,200,.2);background:rgba(0,229,200,.03);border-radius:12px;padding:16px;margin-top:16px}
.sb h4{font-family:'Orbitron',sans-serif;font-size:12px;color:var(--cyan);margin-bottom:8px}
.sii{font-size:12px;color:var(--t2);margin-bottom:6px;padding-left:16px;position:relative}
.sii::before{content:'✓';position:absolute;left:0;color:var(--cyan);font-weight:700}
.fx{text-align:center;padding:20px;background:rgba(77,168,255,.04);border:1px solid rgba(77,168,255,.12);border-radius:10px;margin:16px 0}
.fm{font-family:'Orbitron',sans-serif;font-size:22px;font-weight:700;color:var(--gold);letter-spacing:3px}
.fs{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--t3);margin-top:8px;line-height:1.8}
.sf{display:flex;flex-direction:column;margin:16px 0}
.si2{display:flex;gap:14px;padding:12px 0;position:relative}
.sln{width:2px;background:var(--bdr);position:absolute;left:14px;top:36px;bottom:0}
.sdt{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:900;flex-shrink:0;position:relative;z-index:1}
.scc{flex:1;padding-top:3px}.scc strong{display:block;font-size:13px;color:var(--t1);margin-bottom:2px}.scc p{font-size:12px;color:var(--t2);margin:0}
.fo{text-align:center;padding:32px 20px;border-top:1px solid var(--bdr);font-size:11px;color:var(--t3)}
@keyframes fu{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes fl{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.rv{opacity:0;transform:translateY(28px);transition:all .7s cubic-bezier(.22,1,.36,1)}.rv.vis{opacity:1;transform:translateY(0)}
.speed-display{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}
.speed-box{background:rgba(255,153,64,0.04);border:1px solid rgba(255,153,64,0.15);border-radius:10px;padding:16px;text-align:center}
.speed-val{font-family:'Orbitron',sans-serif;font-size:clamp(18px,4vw,30px);font-weight:900;color:var(--orange)}
.speed-unit{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--t3);margin-top:2px}
.speed-label{font-size:11px;color:var(--t2);margin-top:6px}
.time-display{font-family:'Orbitron',sans-serif;font-size:16px;font-weight:700;color:var(--gold);text-align:center;margin-bottom:8px}
.speed-table{width:100%;border-collapse:collapse;font-family:'JetBrains Mono',monospace;font-size:11px;margin:12px 0}
.speed-table th{text-align:left;color:var(--t3);font-weight:400;padding:6px 8px;border-bottom:1px solid var(--bdr)}
.speed-table td{padding:6px 8px;color:var(--t2);border-bottom:1px solid rgba(255,255,255,.03)}
.speed-table .hl-row{color:var(--orange);font-weight:700}
.astro-card{background:linear-gradient(135deg,rgba(255,153,64,0.06),rgba(255,92,92,0.04));border:1px solid rgba(255,153,64,0.2);border-radius:14px;padding:20px;margin:16px 0}
.astro-card .ctt{color:var(--orange)}
.astro-glow{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 8px var(--orange),0 0 16px rgba(255,153,64,.4);margin-right:6px;animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}
/* key-concept */
.kc{border:1px solid rgba(255,217,74,.2);background:rgba(255,217,74,.03);border-radius:14px;padding:20px;margin:16px 0}
.kc .ctt{color:var(--gold)}
.vs-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}
.vs-box{border-radius:10px;padding:14px;text-align:center}
.vs-box.on{background:rgba(0,229,200,.06);border:1px solid rgba(0,229,200,.2)}
.vs-box.off{background:rgba(255,92,92,.05);border:1px solid rgba(255,92,92,.15)}
.vs-icon{font-size:28px;margin-bottom:6px}
.vs-title{font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;margin-bottom:4px}
.vs-desc{font-size:11px;color:var(--t2);line-height:1.5}
@media(max-width:640px){.nb{padding:0 10px 0 14px}.nl{font-size:11px;letter-spacing:1px;flex-shrink:0}.nn a{font-size:10px;padding:4px 7px;white-space:nowrap}.lbtn{flex-shrink:0;margin-left:6px;padding:3px 8px}.sec{padding:36px 14px}.cr{flex-direction:column;gap:10px}.mg{grid-template-columns:1fr}.speed-display{grid-template-columns:1fr}.vs-grid{grid-template-columns:1fr}}