:root{--bg-primary: #fafafa;--bg-secondary: #ffffff;--bg-tertiary: #f4f4f5;--bg-card: #ffffff;--bg-hover: #f0f0f2;--border: #e4e4e7;--border-light: #d4d4d8;--text-primary: #18181b;--text-secondary: #52525b;--text-muted: #a1a1aa;--accent: #059669;--accent-light: #10b981;--accent-glow: rgba(5, 150, 105, .12);--green: #059669;--green-bg: rgba(5, 150, 105, .06);--green-border: rgba(5, 150, 105, .18);--yellow: #b45309;--yellow-bg: rgba(180, 83, 9, .06);--yellow-border: rgba(180, 83, 9, .18);--red: #dc2626;--red-bg: rgba(220, 38, 38, .06);--red-border: rgba(220, 38, 38, .18);--font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;--font-mono: "JetBrains Mono", monospace;--radius: 12px;--radius-sm: 8px;--radius-xs: 6px;--header-h: 52px;--shadow-sm: 0 1px 3px rgba(24,24,27,.04);--shadow-md: 0 4px 16px -4px rgba(24,24,27,.06);--shadow-lg: 0 8px 32px -8px rgba(24,24,27,.08);--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1)}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;overflow:hidden;word-break:keep-all;overflow-wrap:break-word}p,li,dd,td,th,label,span{letter-spacing:-.01em}h1,h2,h3,h4,h5,h6{letter-spacing:-.03em;text-wrap:balance}.hidden{display:none!important}@keyframes fade-up{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes slide-in-right{0%{opacity:0;transform:translate(24px)}to{opacity:1;transform:translate(0)}}.landing{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:#fafafa}.landing-bg{position:absolute;inset:0;background:radial-gradient(ellipse 700px 500px at 15% 30%,rgba(5,150,105,.05),transparent),radial-gradient(ellipse 400px 400px at 85% 70%,rgba(24,24,27,.03),transparent);pointer-events:none}.landing-split{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:64px;max-width:1100px;width:100%;padding:0 48px;align-items:center}.landing-text{animation:fade-up .8s var(--ease-out) both}.landing-eyebrow{display:inline-block;padding:4px 12px;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.15em;color:var(--accent);background:var(--green-bg);border:1px solid var(--green-border);border-radius:100px;margin-bottom:20px}.landing-title{font-size:2.8rem;font-weight:800;line-height:1.15;letter-spacing:-.04em;color:var(--text-primary);margin-bottom:20px}.landing-desc{font-size:1rem;line-height:1.75;color:var(--text-secondary);margin-bottom:32px;max-width:440px}.landing-actions{display:flex;align-items:center;gap:16px}.landing-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 32px;font-size:.95rem;font-weight:600;font-family:var(--font-sans);color:#fff;background:var(--text-primary);border:none;border-radius:var(--radius-sm);cursor:pointer;transition:all .4s var(--ease-out);box-shadow:var(--shadow-md)}.landing-btn:hover{background:#27272a;transform:translateY(-1px);box-shadow:var(--shadow-lg)}.landing-btn:active{transform:translateY(0) scale(.98)}.landing-btn-icon{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:#ffffff26;border-radius:50%;transition:transform .4s var(--ease-spring)}.landing-btn:hover .landing-btn-icon{transform:translate(3px)}.landing-footnote{font-size:.78rem;color:var(--text-muted)}.landing-visual{display:flex;justify-content:center;animation:slide-in-right .8s var(--ease-out) .15s both}.landing-visual-card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:20px;padding:48px 40px;box-shadow:var(--shadow-lg);width:100%;max-width:380px;display:flex;flex-direction:column;align-items:center;gap:32px}.landing-icon{color:var(--accent);animation:float 4s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.landing-features{display:flex;flex-direction:column;gap:14px;width:100%}.landing-feature{display:flex;align-items:center;gap:12px;font-size:.88rem;color:var(--text-secondary);font-weight:500}.landing-feature-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.dot-emerald{background:var(--accent);box-shadow:0 0 6px var(--accent-glow)}.header{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid var(--border);background:var(--bg-secondary);flex-shrink:0}.header-left{display:flex;align-items:center;gap:10px}.header-icon{color:var(--accent)}.header-title{font-size:.88rem;font-weight:700;letter-spacing:-.02em}.header-right{display:flex;align-items:center;gap:8px}.badge{padding:3px 10px;font-size:.7rem;font-weight:600;border-radius:100px;white-space:nowrap;letter-spacing:0}.badge-neutral{background:var(--bg-tertiary);color:var(--text-muted);border:1px solid var(--border)}.badge-success{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border)}.badge-error{background:var(--red-bg);color:var(--red);border:1px solid var(--red-border)}.app{height:100dvh;display:flex;flex-direction:column}.main{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:0;overflow:hidden}.panel{padding:20px;overflow-y:auto;animation:fade-up .5s var(--ease-out) both}.panel-title{display:flex;align-items:center;gap:8px;font-size:.92rem;font-weight:700;margin-bottom:16px;color:var(--text-primary)}.panel-video{border-right:1px solid var(--border);display:flex;flex-direction:column;gap:14px;background:var(--bg-primary);animation-delay:.05s}.video-wrapper{position:relative;border-radius:var(--radius);overflow:hidden;background:#18181b;aspect-ratio:4 / 3;max-height:calc(100dvh - var(--header-h) - 200px);box-shadow:var(--shadow-md);border:1px solid var(--border)}.video-wrapper video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.face-overlay-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;transform:scaleX(-1)}.focus-overlay{position:absolute;top:12px;left:12px;z-index:2}.focus-indicator{display:flex;align-items:center;gap:8px;padding:6px 14px;border-radius:100px;background:#ffffffeb;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.6);box-shadow:0 2px 12px #0000000f,inset 0 1px #ffffff80;font-size:.8rem;font-weight:600;color:var(--text-primary);transition:all .4s var(--ease-out)}.focus-icon{width:10px;height:10px;border-radius:50%;background:var(--text-muted);transition:all .4s var(--ease-out)}.focus-icon.focused{background:var(--green);box-shadow:0 0 8px #05966980}.focus-icon.distracted{background:var(--yellow);box-shadow:0 0 8px #b4530966}.focus-icon.absent{background:var(--red);box-shadow:0 0 8px #dc262666}.focus-icon.analyzing{background:var(--accent);animation:blink 1.2s ease-in-out infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.capture-flash{position:absolute;inset:0;background:var(--accent);opacity:0;pointer-events:none;transition:opacity .15s;z-index:3}.capture-flash.active{opacity:.06}.controls{display:flex;flex-direction:column;gap:8px}.controls-row{display:flex;align-items:center;gap:10px}.control-group{display:flex;align-items:center;gap:6px}.control-label{font-size:.78rem;color:var(--text-secondary);white-space:nowrap;font-weight:500}.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;font-size:.82rem;font-weight:600;font-family:var(--font-sans);border:1px solid transparent;border-radius:var(--radius-xs);cursor:pointer;transition:all .3s var(--ease-out);white-space:nowrap}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--text-primary);color:#fff;border-color:var(--text-primary)}.btn-primary:not(:disabled):hover{background:#27272a;box-shadow:var(--shadow-md)}.btn-primary.active{background:var(--red);border-color:var(--red)}.btn-primary.active:hover{background:#b91c1c}.btn-secondary{background:var(--bg-secondary);color:var(--text-primary);border-color:var(--border)}.btn-secondary:not(:disabled):hover{background:var(--bg-hover);border-color:var(--border-light);box-shadow:var(--shadow-sm)}.btn-ghost{background:transparent;color:var(--text-secondary);border-color:var(--border)}.btn-ghost:not(:disabled):hover{background:var(--bg-tertiary);color:var(--text-primary)}.btn-sm{padding:4px 10px;font-size:.72rem}.select{padding:7px 12px;font-size:.8rem;font-family:var(--font-sans);background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border);border-radius:var(--radius-xs);cursor:pointer;outline:none;transition:all .3s var(--ease-out)}.select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.model-section{display:flex;flex-direction:column;gap:8px;padding:14px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm)}.model-row{display:flex;align-items:center;gap:8px}.model-row .select{flex:1}.model-cache-row{justify-content:space-between}.cache-info{font-size:.75rem;color:var(--text-muted)}.progress-container{display:flex;flex-direction:column;gap:4px}.progress-bar{height:4px;background:var(--bg-tertiary);border-radius:2px;overflow:hidden}.progress-fill{height:100%;width:0%;background:var(--accent);border-radius:2px;transition:width .4s var(--ease-out)}.progress-text{font-size:.72rem;color:var(--text-secondary);font-family:var(--font-mono)}.panel-results{display:flex;flex-direction:column;gap:16px;background:var(--bg-secondary);animation-delay:.1s}.status-card{padding:16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);transition:all .4s var(--ease-out)}.status-card.focused{border-left:3px solid var(--green);background:var(--green-bg)}.status-card.distracted{border-left:3px solid var(--yellow);background:var(--yellow-bg)}.status-card.absent{border-left:3px solid var(--red);background:var(--red-bg)}.status-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.status-card-title{font-size:.72rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}.status-time{font-size:.75rem;color:var(--text-muted);font-family:var(--font-mono)}.status-description{font-size:.88rem;line-height:1.7;color:var(--text-primary)}.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}.stat-card{padding:14px 10px;background:var(--bg-card);text-align:center;border-right:1px solid var(--border);transition:background .3s var(--ease-out)}.stat-card:last-child{border-right:none}.stat-card:hover{background:var(--bg-tertiary)}.stat-value{display:block;font-size:1.5rem;font-weight:800;font-family:var(--font-mono);margin-bottom:2px;letter-spacing:-.02em}.stat-label{font-size:.68rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em}.stat-focused .stat-value{color:var(--green)}.stat-distracted .stat-value{color:var(--yellow)}.stat-absent .stat-value{color:var(--red)}.focus-rate-section{padding:14px 16px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-card)}.focus-rate-header{display:flex;justify-content:space-between;align-items:center;font-size:.82rem;font-weight:600;margin-bottom:10px}.focus-rate-value{font-family:var(--font-mono);font-weight:800;color:var(--green);font-size:.88rem}.focus-rate-bar{height:6px;background:var(--bg-tertiary);border-radius:3px;overflow:hidden}.focus-rate-fill{height:100%;background:var(--accent);border-radius:3px;transition:width .6s var(--ease-out)}.history-title{font-size:.78rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em}.history-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:0;min-height:0}.history-empty{text-align:center;padding:24px;color:var(--text-muted);font-size:.82rem}.history-item{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-bottom:1px solid var(--border);animation:fade-up .35s var(--ease-out) both;transition:background .3s var(--ease-out)}.history-item:hover{background:var(--bg-tertiary)}.history-item:last-child{border-bottom:none}.history-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:5px}.history-dot.focused{background:var(--green)}.history-dot.distracted{background:var(--yellow)}.history-dot.absent{background:var(--red)}.history-dot.unknown{background:var(--text-muted)}.history-body{flex:1;min-width:0}.history-text{font-size:.8rem;line-height:1.6;color:var(--text-primary);word-break:break-word}.history-meta{display:flex;gap:10px;margin-top:3px}.history-time{font-size:.7rem;color:var(--text-muted);font-family:var(--font-mono)}.history-status{font-size:.7rem;font-weight:700}.history-status.focused{color:var(--green)}.history-status.distracted{color:var(--yellow)}.history-status.absent{color:var(--red)}.history-status.unknown{color:var(--text-muted)}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}::-webkit-scrollbar-thumb:hover{background:var(--border-light)}.mobile-warning{display:flex;align-items:center;gap:8px;padding:10px 16px;margin-top:20px;background:var(--yellow-bg);border:1px solid var(--yellow-border);border-radius:var(--radius-sm);font-size:.82rem;color:var(--yellow);line-height:1.5}.mobile-warning svg{flex-shrink:0}@media (max-width: 900px){.main{grid-template-columns:1fr;overflow-y:auto}.panel-video{border-right:none;border-bottom:1px solid var(--border)}.video-wrapper{max-height:55dvh}.landing-split{grid-template-columns:1fr;gap:40px;padding:0 32px;text-align:center}.landing-title{font-size:2.2rem}.landing-desc{max-width:none}.landing-actions{justify-content:center;flex-direction:column}.landing-visual{order:-1}.landing-visual-card{max-width:320px;padding:32px 28px}}@media (max-width: 640px){:root{--header-h: 46px}html,body{overflow:auto}.app{height:auto;min-height:100dvh}.header{padding:0 12px;gap:4px}.header-title{font-size:.82rem}.header-right{gap:4px}.badge{font-size:.65rem;padding:2px 7px}.main{grid-template-columns:1fr;overflow-y:auto;gap:0}.panel{padding:12px}.panel-video{border-right:none;border-bottom:1px solid var(--border);gap:10px}.video-wrapper{aspect-ratio:auto;width:100%;height:60dvh;max-height:none;border-radius:var(--radius-sm)}.controls-row{flex-wrap:wrap;gap:8px}.btn{padding:10px 16px;font-size:.85rem}.btn-primary{flex:1;justify-content:center}.control-group{flex:1}.select{width:100%;padding:9px 12px;font-size:.85rem}.model-section{padding:10px;gap:8px}.model-row{flex-wrap:wrap;gap:8px}.model-row .select{flex:1;min-width:0}.model-row .btn{flex:none}.panel-results{gap:10px}.panel-title{font-size:.88rem;margin-bottom:8px}.stats-row{grid-template-columns:repeat(2,1fr)}.stat-card{border-bottom:1px solid var(--border)}.stat-card:nth-child(odd){border-right:1px solid var(--border)}.stat-card:nth-child(2n){border-right:none}.stat-card:nth-child(n+3){border-bottom:none}.stat-value{font-size:1.3rem}.status-card{padding:12px}.status-description{font-size:.85rem}.focus-rate-section{padding:10px 12px}.history-list{max-height:40dvh}.history-item{padding:10px 12px}.history-text{font-size:.78rem}.landing-split{grid-template-columns:1fr;gap:28px;padding:0 20px;text-align:center}.landing-title{font-size:1.6rem}.landing-desc{font-size:.88rem}.landing-btn{padding:12px 28px;font-size:.9rem;width:100%;justify-content:center}.landing-actions{flex-direction:column;align-items:stretch}.landing-footnote{text-align:center}.landing-visual{order:-1}.landing-visual-card{max-width:280px;margin:0 auto;padding:28px 24px}.landing-icon svg{width:36px;height:36px}}@media (max-width: 380px){.header-title{font-size:.75rem}.badge{font-size:.6rem;padding:2px 5px}.video-wrapper{height:50dvh}.stats-row{gap:0}.stat-card{padding:10px 6px}.stat-value{font-size:1.1rem}.landing-title{font-size:1.4rem}}