@import"https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Noto+Sans+KR:wght@400;500;600;700&display=swap";:root{font-family:Noto Sans KR,sans-serif;color:#eaf1f8;background:#08111d;font-synthesis:none;--ink: #08111d;--panel: #0d1927;--panel-line: rgba(148, 174, 200, .14);--muted: #8ea1b5;--accent: #49dfb3;--accent-strong: #22c997;--warning: #ffc766}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 74% 28%,rgba(26,117,102,.13),transparent 30%),linear-gradient(135deg,#09121e,#07101b)}button{font:inherit}.app-shell{width:min(1440px,100%);min-height:100vh;margin:0 auto;padding:0 52px;display:flex;flex-direction:column}.topbar{height:100px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(148,174,200,.1)}.brand{display:flex;align-items:center;gap:13px;font-family:Manrope,sans-serif}.brand-mark{width:39px;height:39px;border-radius:12px;display:grid;place-items:center;color:#07131a;background:var(--accent);font-size:21px;font-weight:800;transform:rotate(-4deg)}.brand div{display:flex;flex-direction:column}.brand strong{font-size:18px;letter-spacing:.08em}.brand div span{margin-top:1px;color:#73869a;font-size:9px;font-weight:700;letter-spacing:.18em}.server-state{display:flex;align-items:center;gap:9px;padding:9px 14px;border:1px solid rgba(255,199,102,.2);border-radius:999px;color:#c7a767;background:#ffc7660d;font-size:12px}.server-state.ready{color:#83d9be;border-color:#49dfb32e;background:#49dfb30f}.state-dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 11px currentColor}.workspace{flex:1;display:grid;grid-template-columns:minmax(340px,.8fr) minmax(520px,1.2fr);gap:clamp(50px,8vw,120px);align-items:center;padding:58px 2vw}.intro{max-width:470px}.eyebrow{margin:0 0 20px;color:var(--accent);font:700 11px/1 Manrope,sans-serif;letter-spacing:.22em}.intro h1{margin:0;font-size:clamp(34px,4vw,55px);line-height:1.22;letter-spacing:-.045em}.intro-copy{margin:25px 0 32px;color:var(--muted);font-size:15px;line-height:1.8}.steps{display:flex;gap:8px;margin-bottom:36px}.step{flex:1;display:flex;align-items:center;gap:8px;padding:10px 11px;color:#65798d;border:1px solid rgba(148,174,200,.11);border-radius:10px;font-size:11px;white-space:nowrap}.step span{width:19px;height:19px;display:grid;place-items:center;border-radius:50%;background:#142335;font:700 9px/1 Manrope,sans-serif}.step.active{color:#b8f6e4;border-color:#49dfb34d;background:#49dfb30d}.step.active span{color:#071710;background:var(--accent)}.privacy-note{display:flex;align-items:center;gap:12px;padding-top:24px;border-top:1px solid rgba(148,174,200,.1)}.privacy-note svg{width:29px;fill:#5d7387}.privacy-note div{display:flex;flex-direction:column;gap:3px}.privacy-note strong{color:#b7c4d1;font-size:12px}.privacy-note span{color:#65798d;font-size:11px}.capture-panel{width:min(100%,700px);justify-self:end}.camera-frame{position:relative;aspect-ratio:4 / 3;overflow:hidden;border:1px solid var(--panel-line);border-radius:24px;background:linear-gradient(rgba(19,35,51,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(19,35,51,.25) 1px,transparent 1px),#0a1522;background-size:42px 42px;box-shadow:0 35px 90px #0000004d}.camera-video,.captured-preview{width:100%;height:100%;display:block;object-fit:fill}.camera-video{opacity:0;transform:scaleX(-1);transition:opacity .3s ease}.camera-video.visible{opacity:1}.captured-preview{object-fit:cover}.camera-placeholder{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;color:#9babb9;text-align:center}.camera-placeholder span{color:#607486;font-size:12px}.camera-icon{width:70px;height:70px;margin-bottom:7px;display:grid;place-items:center;border:1px solid rgba(73,223,179,.2);border-radius:22px;background:#49dfb30f}.camera-icon svg{width:31px;fill:var(--accent)}.guide-layer{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 100px #0000003d}.body-guide{position:absolute;left:21%;top:8%;width:58%;height:84%;border:1px dashed rgba(223,237,247,.48);border-radius:46% 46% 20% 20%/27% 27% 15% 15%;transition:border-color .25s,box-shadow .25s}.face-guide{position:absolute;left:37%;top:11%;width:26%;height:36%;border:2px solid rgba(73,223,179,.8);border-radius:50%;box-shadow:0 0 28px #49dfb31f;transition:border-color .25s,box-shadow .25s}.body-guide span,.face-guide span{position:absolute;left:50%;bottom:-24px;padding:4px 8px;color:#dcecf6b3;border-radius:5px;background:#08111dad;font-size:9px;white-space:nowrap;transform:translate(-50%)}.face-guide span{bottom:auto;top:-24px;color:#8af0d1}.guide-layer.aligned .face-guide,.guide-layer.aligned .body-guide{border-color:var(--accent);box-shadow:0 0 32px #49dfb338}.detection-box{position:absolute;border-radius:6px;font:700 8px/1 Manrope,sans-serif;transition:all .15s linear}.detection-box.face-box{color:#75e7c5;border:1px solid rgba(73,223,179,.8)}.detection-box.person-box{color:#7db7ec;border:1px solid rgba(91,170,238,.62)}.processing-overlay{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:9px;background:#050d16d6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.processing-overlay span:last-child{color:var(--muted);font-size:11px}.spinner{width:42px;height:42px;margin-bottom:8px;border:3px solid rgba(73,223,179,.17);border-top-color:var(--accent);border-radius:50%;animation:spin .85s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.scan-status,.result-card{min-height:72px;margin-top:13px;padding:13px 16px;display:flex;align-items:center;gap:12px;border:1px solid var(--panel-line);border-radius:15px;background:#0d1927c2}.status-icon,.result-symbol{width:39px;height:39px;flex:0 0 auto;display:grid;place-items:center;color:#9aadbd;border-radius:12px;background:#172638;font:800 18px/1 Manrope,sans-serif}.status-icon.good{color:#071710;background:var(--accent)}.scan-status>div:nth-child(2),.result-card>div:nth-child(2){min-width:0;display:flex;flex:1;flex-direction:column;gap:4px}.scan-status strong{font-size:12px}.scan-status div span,.result-card small{color:#718599;font-size:10px}.comparison-card{padding:20px;border:1px solid rgba(83,218,183,.28);border-radius:20px;background:#0c171ee6}.comparison-heading,.comparison-grid,.comparison-grid>div{display:flex}.comparison-heading{align-items:center;justify-content:space-between;margin-bottom:14px}.comparison-heading span,.comparison-grid small{color:#7d9aad}.comparison-grid{gap:10px}.comparison-grid>div{flex:1;flex-direction:column;gap:4px;padding:14px;border-radius:14px;background:#ffffff0b}.comparison-grid>div>strong{margin-top:5px;color:#50dbba;font-size:1.3rem}.stability-bars{display:flex;gap:4px}.stability-bars span{width:20px;height:4px;border-radius:2px;background:#213245}.stability-bars span.filled{background:var(--accent);box-shadow:0 0 8px #49dfb359}.result-card.pass{border-color:#49dfb347;background:#1d705921}.result-card.challenge{border-color:#ffc76640;background:#8d65241a}.result-card.pass .result-symbol{color:#071710;background:var(--accent)}.result-card.challenge .result-symbol{color:#20180a;background:var(--warning)}.result-label{color:var(--accent);font:700 9px/1 Manrope,sans-serif;letter-spacing:.12em}.challenge .result-label{color:var(--warning)}.result-card strong{font-size:13px}.warning-message,.error-message{margin-top:11px;padding:10px 13px;border-radius:10px;font-size:11px}.warning-message{color:#dfc28e;border:1px solid rgba(255,199,102,.2);background:#ffc7660f}.error-message{color:#ffb0ac;border:1px solid rgba(255,113,105,.2);background:#ff71690f}.actions{margin-top:14px;display:flex;gap:10px}.primary-button,.secondary-button{min-height:50px;border-radius:13px;cursor:pointer;transition:transform .18s,opacity .18s,background .18s}.primary-button{flex:1;padding:0 22px;display:flex;align-items:center;justify-content:space-between;color:#06130f;border:0;background:var(--accent);font-size:13px;font-weight:700}.primary-button.compact{justify-content:center}.secondary-button{padding:0 18px;color:#adc0d0;border:1px solid var(--panel-line);background:#101e2d;font-size:12px}.primary-button:hover,.secondary-button:hover{transform:translateY(-1px)}.primary-button:disabled{cursor:wait;opacity:.5;transform:none}footer{height:50px;display:flex;align-items:center;justify-content:flex-end;gap:20px;color:#4f6274;border-top:1px solid rgba(148,174,200,.08);font:600 9px/1 Manrope,sans-serif;letter-spacing:.08em}@media(max-width:940px){.app-shell{padding:0 24px}.workspace{grid-template-columns:1fr;gap:35px;padding:40px 0}.intro{max-width:700px}.capture-panel{justify-self:center}}@media(max-width:560px){.app-shell{padding:0 15px}.topbar{height:76px}.server-state{padding:8px 10px;font-size:10px}.workspace{padding-top:30px}.intro h1{font-size:33px}.steps{overflow-x:auto}.step{min-width:110px}.camera-frame{border-radius:17px}.stability-bars{display:none}footer{justify-content:center}}