:root{--primary:#2ee6d6;--primary-hover:#25c9bb;--secondary:#8ba0b8;--tertiary:#ff5c33;--neutral:#0a1424;--surface:#12233a;--panel-raised:#1a304c;--on-primary:#042f2e;--on-tertiary:#0a1424;--rule:#2a4060;--success:#34d399;--error:#f87171;--stage:#5b8cff;--paper:#f3f6fb;--paper-ink:#0f1b2d;--ink:#e8eef6;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--font:"Pretendard","Noto Sans KR","Public Sans",system-ui,sans-serif;--mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,monospace;--shadow:0 8px 24px rgba(0,0,0,0.35)}*{box-sizing:border-box}body,html{margin:0;padding:0;background:var(--neutral);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.65;min-height:100%}a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3{word-break:keep-all;text-wrap:balance;letter-spacing:-.015em;margin:0 0 var(--space-md)}h1{font-size:2.5rem;line-height:1.12;letter-spacing:-.02em}h1,h2{font-weight:700}h2{font-size:1.75rem;line-height:1.15}h3{font-size:1.15rem;font-weight:600;line-height:1.3}p{margin:0 0 var(--space-md);color:var(--secondary)}.metric-value,.mono,.timer{font-family:var(--mono);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.label-caps{font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--secondary)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:12px 16px;border-radius:var(--radius-md);border:1px solid transparent;font-family:var(--font);font-weight:600;font-size:.95rem;cursor:pointer;transition:background-color .12s ease,border-color .12s ease,filter .12s ease}.btn:active{filter:brightness(.92);transform:scale(.99)}.bottom-nav a:focus-visible,.btn:focus-visible,.side-nav a:focus-visible,a.btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.btn-primary{background:var(--primary);color:var(--on-primary)}.btn-primary:hover{background:var(--primary-hover)}.btn-secondary{background:var(--surface);color:var(--primary);border-color:var(--rule)}.btn-danger{background:var(--tertiary);color:var(--on-tertiary)}.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule)}.btn:disabled{opacity:.72;border-style:dashed;cursor:not-allowed}.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-md);padding:var(--space-md);box-shadow:var(--shadow)}.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:.8rem;font-weight:600;border:1px solid var(--rule);background:var(--panel-raised);color:var(--ink)}.chip-breach{background:var(--tertiary);color:var(--on-tertiary);border-color:transparent}.chip-ok{background:rgba(52,211,153,.15);color:var(--success);border-color:rgba(52,211,153,.35)}.chip-stage{background:rgba(91,140,255,.15);color:var(--stage);border-color:rgba(91,140,255,.35)}.chip-warn{background:rgba(255,92,51,.15);color:var(--tertiary)}.clock-panel{display:grid;grid-template-columns:1fr 1fr;grid-gap:var(--space-md);gap:var(--space-md)}.clock-chip{background:var(--panel-raised);border:1px solid var(--rule);border-radius:var(--radius-md);padding:var(--space-md)}.clock-chip.breach{border-color:var(--tertiary);box-shadow:inset 0 0 0 1px rgba(255,92,51,.4)}.clock-chip .timer{font-size:1.5rem;font-weight:600;color:var(--primary);margin-top:4px}.clock-chip.breach .timer{color:var(--tertiary)}.playground-section{width:min(1180px,calc(100% - 32px));margin:0 auto var(--space-2xl);padding:var(--space-xl);border:1px solid var(--rule);border-radius:var(--radius-lg);background:rgba(18,35,58,.55)}.playground-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-lg);margin-bottom:var(--space-lg)}.playground-heading>div{max-width:760px}.playground-grid{display:grid;grid-template-columns:minmax(190px,.7fr) minmax(320px,1.35fr) minmax(280px,1fr);grid-gap:var(--space-md);gap:var(--space-md);align-items:start}.playground-controls,.playground-guide,.playground-output{min-width:0}.playground-explain,.playground-guide{padding:var(--space-md);border:1px solid var(--rule);border-radius:var(--radius-md);background:var(--surface)}.playground-guide ol{margin:0 0 var(--space-md);padding-left:20px;color:var(--secondary)}.playground-actions,.playground-failures,.playground-fields{display:grid;grid-gap:var(--space-sm);gap:var(--space-sm)}.playground-actions,.playground-failures{margin-top:var(--space-md)}.playground-state{display:grid;grid-template-columns:1fr 1fr;grid-gap:1px;gap:1px;overflow:hidden;border:1px solid var(--rule);border-radius:var(--radius-md);background:var(--rule)}.playground-state>div{min-width:0;padding:12px;background:var(--panel-raised)}.playground-state span,.playground-state strong{display:block}.playground-state span{color:var(--secondary);font-size:.78rem}.playground-state strong{margin-top:4px;overflow-wrap:anywhere;font-family:var(--mono);font-size:.9rem}.playground-error{color:var(--error)}.playground-explain{margin-top:var(--space-md);border-left:3px solid var(--primary)}.playground-boundary,.playground-explain p{margin:var(--space-sm) 0 0}.playground-boundary{font-size:.85rem}@media (max-width:920px){.playground-grid{grid-template-columns:1fr 1fr}.playground-guide{grid-column:1/-1}}@media (max-width:600px){.playground-section{width:min(100% - 16px,1180px);padding:var(--space-md)}.playground-grid,.playground-heading{display:grid;grid-template-columns:1fr}.playground-guide{grid-column:auto}.playground-state{grid-template-columns:1fr}.playground-actions .btn,.playground-failures .btn{width:100%}}@media (prefers-reduced-motion:reduce){.playground-section *,.playground-section :after,.playground-section :before{scroll-behavior:auto;transition-duration:.01ms!important;animation-duration:.01ms!important}}.stage-rail{display:flex;gap:4px;flex-wrap:wrap;margin:var(--space-md) 0}.stage-node{flex:1 1;min-width:72px;text-align:center;padding:8px 6px;border-radius:var(--radius-sm);border:1px solid var(--rule);background:var(--panel-raised);font-size:.75rem;color:var(--secondary)}.stage-node.done{background:rgba(46,230,214,.12);border-color:var(--primary);color:var(--primary)}.stage-node.current{background:rgba(91,140,255,.2);border-color:var(--stage);color:var(--ink);font-weight:700}.lead-row{display:flex;align-items:center;gap:var(--space-md);min-height:56px;padding:12px 0;border-bottom:1px solid var(--rule)}.lead-row:last-child{border-bottom:none}.lead-row .main{flex:1 1;min-width:0}.lead-row .title{font-weight:600;color:var(--ink)}.lead-row .meta{font-size:.85rem;color:var(--secondary)}.metric-rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));grid-gap:var(--space-md);gap:var(--space-md);margin-bottom:var(--space-lg)}.metric-cell{background:var(--panel-raised);border:1px solid var(--rule);border-radius:var(--radius-md);padding:var(--space-md)}.metric-cell .metric-value{font-size:1.5rem;font-weight:600;color:var(--primary);margin-top:4px}.honesty{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;color:var(--secondary);border:1px dashed var(--rule);border-radius:var(--radius-sm);padding:4px 8px;background:rgba(255,255,255,.02)}.shell{min-height:100vh;display:flex;flex-direction:column}.shell-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);padding:12px var(--space-md);border-bottom:1px solid var(--rule);background:rgba(10,20,36,.92);position:-webkit-sticky;position:sticky;top:0;z-index:20;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.shell-brand{font-weight:700;color:var(--ink);letter-spacing:-.02em}.shell-brand span{color:var(--primary)}.shell-body{flex:1 1;display:flex;min-height:0}.side-nav{width:220px;border-right:1px solid var(--rule);background:var(--surface);padding:var(--space-md);display:flex;flex-direction:column;gap:4px;flex-shrink:0}.side-nav a{color:var(--secondary);padding:10px 12px;border-radius:var(--radius-sm);text-decoration:none;font-size:.9rem}.side-nav a.active,.side-nav a:hover{background:var(--panel-raised);color:var(--primary);text-decoration:none}.main-pane{flex:1 1;padding:var(--space-lg);max-width:1200px;width:100%}.bottom-nav{display:none;border-top:1px solid var(--rule);background:var(--surface);position:-webkit-sticky;position:sticky;bottom:0;z-index:20;padding:6px 4px calc(6px + env(safe-area-inset-bottom))}.bottom-nav a{flex:1 1;text-align:center;color:var(--secondary);font-size:.7rem;padding:8px 2px;text-decoration:none;min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.bottom-nav a.active{color:var(--primary)}.form-grid{display:grid;grid-gap:var(--space-md);gap:var(--space-md)}.field label{display:block;font-size:.85rem;color:var(--secondary);margin-bottom:6px}.field input,.field select,.field textarea{width:100%;min-height:44px;padding:10px 12px;border-radius:var(--radius-md);border:1px solid var(--rule);background:var(--panel-raised);color:var(--ink);font-family:var(--font);font-size:1rem}.field textarea{min-height:100px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--primary);outline-offset:1px}.table-wrap{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--radius-md);background:var(--paper);color:var(--paper-ink)}table.data{width:100%;border-collapse:collapse;font-size:.9rem}table.data td,table.data th{padding:10px 12px;border-bottom:1px solid #d5deea;text-align:left}table.data th{position:-webkit-sticky;position:sticky;top:0;background:#e7edf6;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:#4a5d78}table.data td.num{text-align:right;font-family:var(--mono)}.alert{padding:12px 14px;border-radius:var(--radius-md);border:1px solid var(--rule);background:var(--panel-raised);color:var(--ink);margin-bottom:var(--space-md)}.alert-error{border-color:var(--error);color:#fecaca;background:rgba(248,113,113,.08)}.alert-ok{border-color:var(--success);color:#a7f3d0;background:rgba(52,211,153,.08)}.hero{padding:clamp(32px,6vw,72px) var(--space-lg);max-width:1100px;margin:0 auto}.hero-grid{display:grid;grid-template-columns:1.2fr 1fr;grid-gap:var(--space-xl);gap:var(--space-xl);align-items:start}.flow-rail{display:grid;grid-gap:8px;gap:8px;margin:var(--space-lg) 0}.flow-step{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--rule)}.flow-step .n{width:28px;height:28px;border-radius:50%;background:var(--panel-raised);border:1px solid var(--primary);color:var(--primary);display:grid;place-items:center;font-family:var(--mono);font-size:.8rem;flex-shrink:0}.demo-cards{display:grid;grid-gap:var(--space-md);gap:var(--space-md)}.demo-card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-md);padding:var(--space-md)}.demo-card strong{color:var(--ink)}.stack{flex-direction:column;gap:var(--space-md)}.row,.stack{display:flex}.row{flex-wrap:wrap;gap:var(--space-sm);align-items:center}.muted{color:var(--secondary)}.req-section{margin-top:clamp(40px,7vw,72px);padding-top:var(--space-xl);border-top:1px solid var(--rule)}.req-heading-row{max-width:720px;margin-bottom:var(--space-lg)}.req-heading-row h2{margin:8px 0 12px;font-size:clamp(1.35rem,2.4vw,1.75rem)}.req-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:var(--space-md);gap:var(--space-md)}.req-card h3{margin:6px 0 12px;font-size:1.05rem;line-height:1.35;color:var(--ink)}.req-card ul{margin:0;padding-left:1.15rem;color:var(--secondary);display:grid;grid-gap:8px;gap:8px;font-size:.95rem;line-height:1.55}.req-card li::marker{color:var(--primary)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}@media (max-width:900px){.hero-grid,.req-grid{grid-template-columns:1fr}.side-nav{display:none}.bottom-nav{display:flex}.main-pane{padding:var(--space-md);padding-bottom:80px}h1{font-size:1.85rem}.clock-panel{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}