*,:after,:before{box-sizing:border-box;margin:0;padding:0}:root{--white:#fff;--gray-50:#f9fafb;--gray-100:#f2f4f6;--gray-200:#e5e8eb;--gray-400:#b0b8c1;--gray-500:#8b95a1;--gray-600:#6b7684;--gray-900:#191f28;--blue:#3182f6;--blue-bg:#f2f7ff;--green:#20c997;--green-bg:#e6fcf5;--red:#e03030;--red-bg:#fff5f5;--yellow:#f59f00;--yellow-bg:#fff9db;--font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Noto Sans KR",sans-serif;--radius-card:14px;--radius-btn:8px;--transition:0.15s ease}[data-theme=dark]{--white:#0d1117;--gray-50:#010409;--gray-100:#161b22;--gray-200:#30363d;--gray-400:#484f58;--gray-500:#8b949e;--gray-600:#8b949e;--gray-900:#e6edf3;--blue:#58a6ff;--blue-bg:#0d2240;--green:#3fb950;--green-bg:#0d2d1a;--red:#f85149;--red-bg:#3d1012;--yellow:#d29922;--yellow-bg:#2e1e00}body{font-family:var(--font);background:var(--gray-50);color:var(--gray-900);-webkit-font-smoothing:antialiased}#app,body{min-height:100dvh}#app{max-width:640px;margin:0 auto;padding:20px 16px 40px;display:flex;flex-direction:column}.header{justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--gray-200);margin-bottom:0}.header,.logo-group{display:flex;align-items:center}.logo-group{gap:8px}.logo-works{font-size:10px;font-weight:800;letter-spacing:.1em;color:#fff;background:var(--gray-900);padding:3px 7px;border-radius:4px;line-height:1}.logo{font-size:20px;font-weight:800;letter-spacing:-.03em;color:var(--gray-900)}.header-right{gap:10px}.header-right,.status-badge{display:flex;align-items:center}.status-badge{gap:6px;font-size:12px;font-weight:600;color:var(--gray-500);background:var(--gray-100);padding:4px 10px;border-radius:20px}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--gray-400)}.status-dot.recording{background:var(--red);animation:blink 2.4s ease-in-out infinite}.status-dot.paused{background:var(--yellow);animation:blink 1s ease-in-out infinite}.status-dot.done{background:var(--green)}.timer{font-size:13px;font-weight:700;color:var(--gray-500);font-feature-settings:"tnum";font-variant-numeric:tabular-nums;min-width:40px;text-align:right}.timer.active{color:var(--gray-900)}.timer.paused{animation:blink 1s ease-in-out infinite}.tabs{display:flex;gap:4px;border-bottom:1px solid var(--gray-200);margin-bottom:16px}.tab{background:none;border:none;padding:8px 14px;font-size:13px;font-weight:600;color:var(--gray-500);cursor:pointer;position:relative;transition:color var(--transition);font-family:var(--font)}.tab:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--blue);border-radius:2px 2px 0 0;opacity:0;transition:opacity .13s}.tab:hover{color:var(--gray-900)}.tab.active{color:var(--blue)}.tab.active:after{opacity:1}.tab-badge{font-size:11px;font-weight:700;background:var(--blue-bg);color:var(--blue);padding:1px 6px;border-radius:10px;margin-left:4px}.view{display:none;flex:1 1;flex-direction:column}.view.active,.waveform{display:flex}.waveform{justify-content:center;align-items:center;gap:3px;height:32px;margin-bottom:12px}.wave-bar{width:3px;height:8px;background:var(--red);border-radius:2px;animation:wave .8s ease-in-out infinite}.wave-bar:first-child{animation-delay:0s}.wave-bar:nth-child(2){animation-delay:.1s}.wave-bar:nth-child(3){animation-delay:.2s}.wave-bar:nth-child(4){animation-delay:.3s}.wave-bar:nth-child(5){animation-delay:.4s}.wave-bar:nth-child(6){animation-delay:.5s}.wave-bar:nth-child(7){animation-delay:.6s}.transcript{flex:1 1;min-height:200px;max-height:60vh;overflow-y:auto;background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-card);padding:16px;margin-bottom:12px}.transcript-placeholder{color:var(--gray-400);font-size:14px;text-align:center;padding:60px 0}.segment{display:flex;gap:10px;padding:4px 0;line-height:1.6}.segment-time{font-size:.85em;color:var(--gray-500);font-feature-settings:"tnum";font-variant-numeric:tabular-nums;white-space:nowrap;min-width:40px;padding-top:2px}.segment-text{flex:1 1;word-break:keep-all;overflow-wrap:break-word}.segment.pause-marker{color:var(--gray-400);font-style:italic;font-size:.9em}.segment.low-confidence .segment-text:before{content:"⚠ ";color:var(--yellow)}.transcript-interim{color:var(--gray-500);font-style:italic;padding:4px 0 4px 50px;min-height:0}.controls-bar{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-card);padding:16px;gap:14px}.controls-bar,.controls-main{display:flex;flex-direction:column;align-items:center}.controls-main{gap:6px}.controls-label{font-size:12px;font-weight:700;color:var(--gray-500);letter-spacing:.02em}.controls-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.btn-action{display:flex;flex-direction:column;align-items:center;gap:3px;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:10px;padding:8px 14px;cursor:pointer;transition:all var(--transition);font-family:var(--font);min-width:56px}.btn-action:hover{background:var(--gray-100);border-color:var(--gray-400)}.btn-action:disabled{opacity:.3;cursor:default;pointer-events:none}.btn-action-icon{font-size:18px;line-height:1;color:var(--gray-600)}.btn-action span:last-child{font-size:11px;font-weight:600;color:var(--gray-600)}.btn-action:hover .btn-action-icon,.btn-action:hover span:last-child{color:var(--gray-900)}.shortcut-hint{font-size:11px;font-weight:600;color:var(--gray-400);background:var(--gray-100);padding:2px 8px;border-radius:4px;letter-spacing:.04em}.btn{border:1px solid var(--gray-200);background:var(--white);color:var(--gray-900);padding:7px 14px;border-radius:var(--radius-btn);font-size:13px;font-weight:600;cursor:pointer;transition:all var(--transition);font-family:var(--font)}.btn:hover{background:var(--gray-100);border-color:var(--gray-400)}.btn:disabled{opacity:.4;cursor:default;pointer-events:none}.btn-sm{border:1px solid var(--gray-200);background:var(--white);color:var(--gray-600);padding:5px 10px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:all var(--transition);font-family:var(--font)}.btn-sm:hover{background:var(--gray-100);border-color:var(--gray-400);color:var(--gray-900)}.btn-sm:disabled{opacity:.35;cursor:default;pointer-events:none}.btn-sm.btn-danger{color:var(--red)}.btn-sm.btn-danger:hover{background:var(--red-bg);border-color:var(--red)}.btn-primary{background:var(--blue);color:#fff;border-color:var(--blue);width:100%;padding:10px;margin-top:12px}.btn-primary:hover{opacity:.9;background:var(--blue)}.btn-primary:disabled{opacity:.4}.btn-secondary{padding:7px 10px;font-size:16px;line-height:1}.btn-icon{border:none;background:none;font-size:18px;cursor:pointer;padding:4px;color:var(--gray-500);transition:color var(--transition)}.btn-icon:hover{color:var(--gray-900)}.btn-danger{color:var(--red);border-color:var(--red)}.btn-danger:hover{background:var(--red-bg)}.btn-record{width:56px;height:56px;border-radius:50%;border:none;background:var(--red);color:#fff;font-size:24px;cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center;transition:transform var(--transition);flex-shrink:0}.btn-record:hover{transform:scale(1.05)}.btn-record:active{transform:scale(.95)}.btn-record:disabled{opacity:.4;cursor:default;transform:none}.btn-record-inner{font-size:28px;line-height:1;position:relative;z-index:1}.btn-record-inner.stop{font-size:18px}.btn-record-ring{position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--red);opacity:0}.btn-record.recording .btn-record-ring{animation:pulse-ring 2s ease-out infinite}.search-box{margin-bottom:12px}.search-input{width:100%;border:1px solid var(--gray-200);background:var(--gray-100);border-radius:var(--radius-btn);padding:8px 12px;font-size:13px;color:var(--gray-900);transition:border-color var(--transition),background var(--transition);font-family:var(--font);outline:none}.search-input:focus{border-color:var(--blue);background:var(--white)}.session-list{display:flex;flex-direction:column;gap:8px}.session-card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-card);overflow:hidden;transition:border-color var(--transition)}.session-card:hover{border-color:var(--gray-400)}.session-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;cursor:pointer}.session-info{flex:1 1;min-width:0}.session-title{margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.session-title,.session-title-input{font-size:14px;font-weight:700;color:var(--gray-900)}.session-title-input{border:1px solid var(--blue);border-radius:4px;padding:2px 6px;background:var(--white);font-family:var(--font);width:100%;outline:none}.session-meta{font-size:11px;color:var(--gray-500);display:flex;gap:8px}.session-actions{display:flex;gap:4px;flex-shrink:0}.session-actions .btn-secondary{padding:4px 8px;font-size:14px}.session-body{display:none;padding:0 16px 14px;border-top:1px solid var(--gray-200)}.session-body.open{display:block;padding-top:12px}.session-body .segment{font-size:13px}.btn-add-record{width:100%;margin-top:12px;border:2px dashed var(--gray-200);background:none;color:var(--gray-500);padding:12px;border-radius:var(--radius-card);font-size:14px;font-weight:600;cursor:pointer;transition:all var(--transition);font-family:var(--font)}.btn-add-record:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-bg)}.session-summary{border-top:1px solid var(--gray-200);padding:14px 16px;background:var(--blue-bg)}.summary-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.summary-title{font-size:12px;font-weight:700;color:var(--blue);letter-spacing:.02em}.summary-actions{display:flex;gap:4px}.summary-content{font-size:13px;line-height:1.8;color:var(--gray-900);white-space:pre-wrap;word-break:keep-all}.empty-state{text-align:center;color:var(--gray-400);font-size:14px;padding:60px 0;line-height:1.8}.settings-group{margin-bottom:20px}.settings-label{font-size:12px;font-weight:700;color:var(--gray-500);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;padding-left:4px}.settings-card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-card);padding:4px 0}.setting-item{padding:12px 16px}.setting-item+.setting-item{border-top:1px solid var(--gray-200)}.setting-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.setting-name{font-size:14px;font-weight:600}.setting-value{font-size:13px;font-weight:700;color:var(--blue);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.setting-desc{font-size:11px;color:var(--gray-500);margin-top:4px}.setting-range{width:100%;margin-top:6px;accent-color:var(--blue)}.setting-actions{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--gray-200)}.setting-actions .btn{flex:1 1;text-align:center}.toggle{position:relative;display:inline-block;width:40px;height:22px;cursor:pointer}.toggle input{display:none}.toggle-slider{position:absolute;inset:0;background:var(--gray-200);border-radius:22px;transition:background var(--transition)}.toggle-slider:before{content:"";position:absolute;width:18px;height:18px;left:2px;top:2px;background:var(--white);border-radius:50%;transition:transform var(--transition);box-shadow:0 1px 3px rgba(0,0,0,.15)}.toggle input:checked+.toggle-slider{background:var(--blue)}.toggle input:checked+.toggle-slider:before{transform:translateX(18px)}.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;animation:fadeIn .2s ease-out}[hidden]{display:none!important}.modal{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-card);padding:24px;width:100%;max-width:400px;animation:slideUp .2s ease-out}.modal-title{font-size:17px;font-weight:800;margin-bottom:12px}.modal-body{font-size:13px;color:var(--gray-600);line-height:1.7;margin-bottom:16px}.modal-check{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;cursor:pointer}.modal-check input{width:16px;height:16px;accent-color:var(--blue)}.toast-container{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:200;pointer-events:none}.toast{background:var(--gray-900);color:var(--gray-50);padding:10px 18px;border-radius:10px;font-size:13px;font-weight:600;white-space:nowrap;animation:toastIn .3s cubic-bezier(.34,1.56,.64,1);box-shadow:0 4px 14px rgba(0,0,0,.15)}[data-theme=dark] .toast{background:var(--gray-200);color:var(--gray-900)}.toast.out{animation:toastOut .2s ease-in forwards}.install-banner{display:flex;align-items:center;gap:8px;background:var(--blue-bg);border:1px solid var(--blue);border-radius:10px;padding:10px 14px;margin-bottom:12px;animation:slideUp .3s ease-out}.install-text{flex:1 1;color:var(--blue)}.banner,.install-text{font-size:13px;font-weight:600}.banner{position:fixed;top:0;left:0;right:0;background:var(--yellow-bg);color:var(--yellow);text-align:center;padding:10px;z-index:300;border-bottom:1px solid var(--yellow)}@keyframes blink{0%,to{opacity:1}50%{opacity:.2}}@keyframes wave{0%,to{height:8px}50%{height:24px}}@keyframes pulse-ring{0%{transform:scale(1);opacity:.6}to{transform:scale(1.5);opacity:0}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toastIn{0%{opacity:0;transform:translateY(14px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toastOut{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(14px) scale(.95)}}.confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:150;padding:20px;animation:fadeIn .15s ease-out}.confirm-box{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-card);padding:24px;width:100%;max-width:320px;text-align:center;animation:slideUp .15s ease-out}.confirm-msg{font-size:14px;font-weight:600;margin-bottom:16px;line-height:1.5}.confirm-actions{display:flex;gap:8px}.confirm-actions .btn{flex:1 1}@media (max-width:480px){#app{padding:8px 10px 32px}.header{padding:10px 12px;flex-wrap:wrap;gap:6px}.logo{font-size:17px}.logo-works{font-size:9px;padding:2px 6px}.header-right,.logo-group{gap:6px}.status-badge{font-size:11px;padding:3px 7px}.timer{font-size:12px;min-width:36px}.shortcut-hint{display:none}.transcript{max-height:50vh}.btn-action{padding:6px 10px;min-width:48px}.btn-action-icon{font-size:16px}.btn-action span:last-child{font-size:10px}}@media (max-width:360px){.header-right .btn-icon,.header-right .status-badge .status-text{display:none}.logo{font-size:15px}}@media (max-width:480px) and (orientation:landscape){.transcript{min-height:120px;max-height:40vh}.waveform{height:20px}}