:root{--bg:#0f172a;--surface:#1e293b;--surface-2:#334155;--border:#334155;--fg:#e2e8f0;--fg-strong:#f8fafc;--muted:#94a3b8;--accent:#f59e0b;--accent-2:#fbbf24;--plain:#14b8a6;--key:#f59e0b;--cipher:#a78bfa;--ok:#22c55e;--err:#ef4444;--shadow-rgb:0, 0, 0;--s1:4px;--s2:8px;--s3:16px;--s4:24px;--s5:32px;--s6:48px;--s7:64px;--s8:96px;--r1:4px;--r2:8px;--r3:12px;--r4:16px;--ff-ui:"Helvetica Neue", "Apple SD Gothic Neo", "맑은 고딕", system-ui, sans-serif;--ff-mono:"JetBrains Mono", "Courier New", monospace;--fs-100:14px;--fs-200:16px;--fs-300:22px;--fs-400:32px;--fs-500:48px;--sh-1:0 1px 2px #00000040;--sh-2:0 6px 18px #0000004d;--sh-glow:0 0 0 4px #f59e0b4d;--ring:0 0 0 3px #f59e0b8c;--ease:cubic-bezier(.4, 0, .2, 1);--dur:.3s;--dur-slow:.5s}@media (prefers-color-scheme:light){:root{--bg:#f8fafc;--surface:#fff;--surface-2:#e2e8f0;--border:#cbd5e1;--fg:#0f172a;--fg-strong:#020617;--muted:#475569;--shadow-rgb:100, 116, 139;--sh-1:0 1px 2px #0f172a14;--sh-2:0 8px 20px #0f172a1a}}@media (prefers-reduced-motion:reduce){:root{--dur:1ms;--dur-slow:1ms}*,:before,:after{transition-duration:1ms!important;animation-duration:1ms!important}}*,:before,:after{box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:var(--ff-ui);font-size:var(--fs-200);color:var(--fg);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;line-height:1.6}img{max-width:100%;display:block}button,input,textarea,select{font:inherit;color:inherit}button{cursor:pointer}a{color:var(--accent);text-decoration:none}a:hover,a:focus-visible{text-decoration:underline}:focus-visible{box-shadow:var(--ring);border-radius:var(--r1);outline:none}.skip-link{left:var(--s3);background:var(--accent);color:#000;padding:var(--s2) var(--s3);border-radius:var(--r2);z-index:100;transition:top var(--dur) var(--ease);font-weight:600;position:absolute;top:-80px}.skip-link:focus{top:var(--s3)}.site-header{z-index:50;height:56px;padding:0 var(--s4);-webkit-backdrop-filter:saturate(150%)blur(8px);border-bottom:1px solid var(--border);background:#0f172ad9;justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}@media (prefers-color-scheme:light){.site-header{background:#ffffffd9}}.brand{align-items:center;gap:var(--s2);color:var(--fg-strong);font-weight:600;font-size:var(--fs-200);display:inline-flex}.brand-mark{font-size:22px}.site-nav{align-items:center;gap:var(--s3);display:flex}.progress-label{color:var(--muted);font-size:var(--fs-100)}.progress-bar{background:var(--surface-2);border-radius:999px;width:160px;height:6px;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--accent), var(--accent-2));width:0%;height:100%;transition:width var(--dur) var(--ease)}.toc-rail{top:80px;left:var(--s4);width:200px;font-size:var(--fs-100);color:var(--muted);padding:var(--s3);border-radius:var(--r3);background:var(--surface);border:1px solid var(--border);display:none;position:fixed}.toc-rail ol{counter-reset:toc;margin:0;padding:0;list-style:none}.toc-rail li{counter-increment:toc;padding:var(--s2) 0;border-bottom:1px solid var(--border)}.toc-rail li:last-child{border-bottom:none}.toc-rail a{color:var(--muted);transition:color var(--dur) var(--ease);display:block}.toc-rail a:before{content:counter(toc, decimal-leading-zero) " ";font-family:var(--ff-mono);color:var(--surface-2);margin-right:var(--s2)}.toc-rail a:hover,.toc-rail a:focus-visible{color:var(--fg-strong);text-decoration:none}.toc-rail li.is-current a{color:var(--accent);font-weight:600}.toc-rail li.is-done a:before{color:var(--ok);content:"✓ "}@media (width>=1280px){.toc-rail{display:block}}main{max-width:1120px;padding:0 var(--s3);margin:0 auto}@media (width>=768px){main{padding:0 var(--s4)}}@media (width>=1280px){main{margin-left:240px}}@media (width>=1480px){main{margin-left:auto;margin-right:auto}}.section{padding:var(--s7) 0;border-bottom:1px solid var(--border);scroll-margin-top:72px}.section:last-child{border-bottom:none}.section-head{margin-bottom:var(--s5)}.section-num{font-family:var(--ff-mono);font-size:var(--fs-100);color:var(--accent);letter-spacing:.1em;margin-bottom:var(--s2);display:inline-block}.section-title{margin:0 0 var(--s2);font-size:var(--fs-400);color:var(--fg-strong);letter-spacing:-.01em;font-weight:600;line-height:1.25}.section-lede{color:var(--muted);max-width:60ch;margin:0}.section-recap{margin-top:var(--s5);padding:var(--s3) var(--s4);background:var(--surface);border-left:4px solid var(--accent);border-radius:var(--r2);font-size:var(--fs-200)}.section-recap strong{color:var(--accent);font-weight:600}.section--hero{border-bottom:1px solid var(--border);background:radial-gradient(800px 400px at 80% 20%,#f59e0b1a,#0000 60%),radial-gradient(600px 400px at 10% 80%,#14b8a614,#0000 60%);align-items:center;min-height:calc(100vh - 56px);display:flex}.hero-inner{max-width:720px}.hero-eyebrow{font-family:var(--ff-mono);font-size:var(--fs-100);color:var(--accent);letter-spacing:.1em;text-transform:uppercase;margin:0 0 var(--s3);padding:var(--s1) var(--s2);border:1px solid var(--accent);border-radius:var(--r1);display:inline-block}.hero-title{margin:0 0 var(--s4);font-size:var(--fs-500);letter-spacing:-.02em;color:var(--fg-strong);font-weight:600;line-height:1.15}.hero-accent{background:linear-gradient(120deg, var(--accent), var(--accent-2));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.hero-lede{margin:0 0 var(--s5);font-size:var(--fs-300);color:var(--muted);max-width:56ch}.hero-cta{gap:var(--s3);margin-bottom:var(--s5);flex-wrap:wrap;display:flex}.hero-meta{gap:var(--s2);color:var(--muted);font-size:var(--fs-100);flex-wrap:wrap;display:flex}.btn{align-items:center;gap:var(--s2);min-height:44px;padding:var(--s2) var(--s4);border-radius:var(--r2);font-size:var(--fs-200);cursor:pointer;transition:transform var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);border:1px solid #0000;font-weight:600;line-height:1;text-decoration:none;display:inline-flex}.btn:active{transform:translateY(1px)}.btn--primary{background:var(--accent);color:#0f172a;box-shadow:var(--sh-2)}.btn--primary:hover{background:var(--accent-2);text-decoration:none}.btn--ghost{color:var(--fg-strong);border-color:var(--border);background:0 0}.btn--ghost:hover{background:var(--surface);text-decoration:none}.btn[disabled]{opacity:.5;cursor:not-allowed}.app-grid{gap:var(--s3);grid-template-columns:repeat(auto-fill,minmax(180px,1fr));display:grid}.app-card{padding:var(--s3);background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);min-height:96px;transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);cursor:default;position:relative}.app-card:hover,.app-card:focus-within{border-color:var(--accent);box-shadow:var(--sh-2);transform:translateY(-2px)}.app-card .app-emoji{margin-bottom:var(--s2);font-size:28px;line-height:1}.app-card .app-name{color:var(--fg-strong);margin-bottom:var(--s1);font-weight:600}.app-card .app-algo{font-family:var(--ff-mono);font-size:var(--fs-100);color:var(--accent);letter-spacing:.02em;opacity:0;transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);transform:translateY(4px)}.app-card:hover .app-algo,.app-card:focus-within .app-algo{opacity:1;transform:translateY(0)}.lock-stage{gap:var(--s4);grid-template-columns:1fr;display:grid}@media (width>=768px){.lock-stage{grid-template-columns:1fr auto 1fr;align-items:center}}.lock-card{padding:var(--s5);text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--r3)}.lock-svg{width:120px;height:120px;margin:0 auto var(--s3)}.lock-action{align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);background:var(--surface-2);border-radius:var(--r2);font-family:var(--ff-mono);font-size:var(--fs-100);display:inline-flex}.lock-key{padding:var(--s1) var(--s2);font-family:var(--ff-mono);color:var(--key);border-radius:var(--r1);font-size:var(--fs-100);background:#f59e0b1f;display:inline-block}.lock-arrow{text-align:center;color:var(--accent);font-size:32px}.caesar-stage{gap:var(--s4);background:var(--surface);border:1px solid var(--border);border-radius:var(--r3);padding:var(--s5);display:grid}.caesar-control{gap:var(--s2);grid-template-columns:auto 1fr auto;align-items:center;display:grid}.caesar-label{font-weight:600}.caesar-control input[type=range]{width:100%;height:32px;accent-color:var(--accent)}.caesar-shift-out{font-family:var(--ff-mono);font-size:var(--fs-300);color:var(--key);text-align:right;min-width:64px}.caesar-textinput{width:100%;padding:var(--s2) var(--s3);background:var(--bg);min-height:44px;color:var(--fg);border:1px solid var(--border);border-radius:var(--r2);font-family:var(--ff-mono);font-size:var(--fs-200)}.caesar-result{gap:var(--s3);font-family:var(--ff-mono);font-size:var(--fs-300);grid-template-columns:1fr;display:grid}.caesar-row{gap:var(--s2);grid-template-columns:80px 1fr;align-items:baseline;display:grid}.caesar-row-label{font-family:var(--ff-ui);font-size:var(--fs-100);color:var(--muted);text-transform:uppercase;letter-spacing:.1em}.caesar-row-text{word-break:break-all}.caesar-row--plain .caesar-row-text{color:var(--plain)}.caesar-row--cipher .caesar-row-text{color:var(--cipher)}.xor-stage{background:var(--surface);border:1px solid var(--border);border-radius:var(--r3);padding:var(--s5);gap:var(--s4);display:grid}.xor-grid{gap:var(--s2);display:grid}.xor-row{gap:var(--s2);grid-template-columns:80px repeat(8,minmax(0,1fr));align-items:center;display:grid}.xor-row-label{font-family:var(--ff-ui);font-size:var(--fs-100);color:var(--muted);text-transform:uppercase;letter-spacing:.1em}.xor-bit{aspect-ratio:1;background:var(--bg);border:1px solid var(--border);border-radius:var(--r2);min-width:44px;font-family:var(--ff-mono);font-size:var(--fs-300);cursor:pointer;transition:transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);justify-content:center;align-items:center;display:inline-flex}.xor-bit:hover{border-color:var(--accent);transform:scale(1.05)}.xor-bit[data-on=true]{background:var(--accent);color:#0f172a;border-color:var(--accent)}.xor-row--key .xor-bit[data-on=true]{background:var(--key);border-color:var(--key)}.xor-row--result .xor-bit{cursor:default;pointer-events:none}.xor-row--result .xor-bit[data-on=true]{background:var(--cipher);color:#0f172a;border-color:var(--cipher)}.xor-decode-btn{justify-self:start}.xor-status{font-family:var(--ff-mono);color:var(--muted);font-size:var(--fs-100)}.aes-stage{background:var(--surface);border:1px solid var(--border);border-radius:var(--r3);padding:var(--s5);gap:var(--s4);display:grid}.aes-controls{gap:var(--s2);flex-wrap:wrap;align-items:center;display:flex}.aes-status{font-family:var(--ff-mono);font-size:var(--fs-100);color:var(--muted);margin-left:auto}.aes-board{gap:var(--s4);grid-template-columns:1fr;display:grid}@media (width>=768px){.aes-board{grid-template-columns:1fr auto 1fr;align-items:center}}.byte-grid{gap:var(--s2);grid-template-columns:repeat(4,1fr);width:100%;max-width:320px;margin:0 auto;display:grid}.byte-cell{aspect-ratio:1;font-family:var(--ff-mono);font-size:var(--fs-200);background:var(--bg);border:1px solid var(--border);border-radius:var(--r2);transition:background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);justify-content:center;align-items:center;display:flex}.byte-cell.is-active{background:var(--accent);color:#0f172a;box-shadow:var(--sh-glow);transform:scale(1.06)}.aes-arrow{text-align:center;color:var(--accent);font-size:32px}.aes-phase-label{text-align:center;font-family:var(--ff-mono);font-size:var(--fs-100);color:var(--muted);letter-spacing:.1em;text-transform:uppercase}.aes-phase-active{color:var(--accent)}.modes-stage{gap:var(--s3);grid-template-columns:1fr;display:grid}@media (width>=768px){.modes-stage{grid-template-columns:1fr 1fr}}.modes-card{padding:var(--s4);background:var(--surface);border:1px solid var(--border);border-radius:var(--r3);text-align:center}.modes-canvas{aspect-ratio:1;border-radius:var(--r2);background:#000;width:100%;display:block}.modes-card h3{margin:0 0 var(--s2);font-size:var(--fs-300);color:var(--fg-strong);font-weight:600}.modes-card p{margin:var(--s2) 0 0;color:var(--muted);font-size:var(--fs-100)}.modes-card--bad h3{color:var(--err)}.modes-card--good h3{color:var(--ok)}.tryit-stage{background:var(--surface);border:1px solid var(--border);border-radius:var(--r3);padding:var(--s5);gap:var(--s4);display:grid}.tryit-grid{gap:var(--s3);grid-template-columns:1fr;display:grid}@media (width>=768px){.tryit-grid{grid-template-columns:1fr 1fr}}.tryit-field{gap:var(--s2);display:grid}.tryit-field label{font-size:var(--fs-100);color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-weight:600}.tryit-field input,.tryit-field textarea{width:100%;min-height:44px;padding:var(--s2) var(--s3);background:var(--bg);color:var(--fg);border:1px solid var(--border);border-radius:var(--r2);font-family:var(--ff-mono);font-size:var(--fs-200);transition:border-color var(--dur) var(--ease)}.tryit-field textarea{resize:vertical;min-height:96px}.tryit-field input:focus,.tryit-field textarea:focus{border-color:var(--accent);outline:none}.tryit-actions{gap:var(--s2);flex-wrap:wrap;display:flex}.tryit-output{gap:var(--s2);padding:var(--s3);background:var(--bg);border:1px dashed var(--border);border-radius:var(--r2);font-family:var(--ff-mono);font-size:var(--fs-100);word-break:break-all;display:grid}.tryit-output dt{text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-top:var(--s2);font-size:12px}.tryit-output dt:first-child{margin-top:0}.tryit-output dd{color:var(--cipher);margin:0}.tryit-output dd.is-plain{color:var(--plain)}.tryit-msg{font-size:var(--fs-100);color:var(--muted)}.tryit-msg.is-ok{color:var(--ok)}.tryit-msg.is-err{color:var(--err)}.quiz-stage{gap:var(--s3);display:grid}.quiz-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r3);padding:var(--s4)}.quiz-question{margin:0 0 var(--s3);font-size:var(--fs-200);color:var(--fg-strong);font-weight:600}.quiz-question .q-num{font-family:var(--ff-mono);color:var(--accent);margin-right:var(--s2)}.quiz-choices{gap:var(--s2);margin:0;padding:0;list-style:none;display:grid}.quiz-choice{align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);background:var(--bg);border:1px solid var(--border);border-radius:var(--r2);cursor:pointer;min-height:44px;transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);display:flex}.quiz-choice:hover{border-color:var(--accent)}.quiz-choice input{accent-color:var(--accent)}.quiz-choice.is-correct{border-color:var(--ok);background:#22c55e1f}.quiz-choice.is-wrong{border-color:var(--err);background:#ef44441f}.quiz-feedback{margin-top:var(--s2);padding:var(--s2) var(--s3);border-radius:var(--r2);font-size:var(--fs-100);background:var(--surface-2)}.quiz-feedback.is-ok{color:var(--ok);background:#22c55e1f}.quiz-feedback.is-err{color:var(--err);background:#ef44441f}.quiz-summary{text-align:center;padding:var(--s5);background:var(--surface);border:1px solid var(--accent);border-radius:var(--r3)}.quiz-summary .score{font-family:var(--ff-mono);font-size:var(--fs-500);color:var(--accent);font-weight:600}.recap-grid{gap:var(--s3);margin-bottom:var(--s5);grid-template-columns:repeat(auto-fill,minmax(220px,1fr));display:grid}.recap-card{padding:var(--s4);background:var(--surface);border:1px solid var(--border);border-radius:var(--r3);border-left:4px solid var(--accent)}.recap-card h3{margin:0 0 var(--s2);font-size:var(--fs-200);color:var(--fg-strong);font-weight:600}.recap-card p{color:var(--muted);font-size:var(--fs-100);margin:0}.next-learn{padding:var(--s4);background:var(--surface);border:1px solid var(--border);border-radius:var(--r3)}.next-learn h3{margin:0 0 var(--s3);font-size:var(--fs-300);color:var(--fg-strong);font-weight:600}.next-learn ul{padding-left:var(--s4);gap:var(--s2);margin:0;display:grid}.site-footer{text-align:center;padding:var(--s5) var(--s3);color:var(--muted);font-size:var(--fs-100);border-top:1px solid var(--border)}.kbd-help-btn{right:var(--s4);bottom:var(--s4);background:var(--accent);color:#0f172a;width:44px;height:44px;box-shadow:var(--sh-2);z-index:40;transition:transform var(--dur) var(--ease);border:none;border-radius:999px;font-size:20px;font-weight:600;position:fixed}.kbd-help-btn:hover{transform:scale(1.06)}.kbd-help[open]{border:1px solid var(--border);border-radius:var(--r3);background:var(--surface);color:var(--fg);padding:var(--s5);box-shadow:var(--sh-2)}.kbd-help::backdrop{background:#0009}.kbd-help h3{margin:0 0 var(--s3);font-size:var(--fs-300)}.kbd-help kbd{text-align:center;min-width:24px;font-family:var(--ff-mono);background:var(--bg);border:1px solid var(--border);border-radius:var(--r1);margin-right:var(--s2);padding:2px 6px;font-size:13px;display:inline-block}.kbd-help ul{margin:0 0 var(--s3);padding-left:var(--s4)}.kbd-help li{margin-bottom:var(--s2)}