:root{--color-brand:#7c3aed;--color-brand-dark:#6d28d9;--color-brand-light:#ede9fe;--color-brand-accent:#8b5cf6;--color-ui-fg:#475569;--color-ui-fg-inv:#fff;--color-ui-body:#1e293b;--color-text:#0f172a;--color-text-muted:#64748b;--color-text-subtle:#94a3b8;--color-text-error:#dc2626;--color-text-success:#16a34a;--color-bg:#f8fafc;--color-surface:#fff;--color-surface-2:#f1f5f9;--color-border:#e2e8f0;--color-border-focus:#7c3aed;--color-tag-bg:#ede9fe;--space-xs:4px;--space-sm:8px;--space-md:14px;--space-lg:20px;--space-xl:32px;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-pill:999px;color:var(--color-text);background:var(--color-bg);font-family:IBM Plex Sans,Noto Sans KR,sans-serif;font-weight:400;line-height:1.5}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,input,textarea{font:inherit}button{cursor:pointer}#root{min-height:100vh}.appShell{width:min(1200px, calc(100% - var(--space-xl)));padding:var(--space-xl) 0 48px;margin:0 auto}.hero{gap:var(--space-lg);margin-bottom:24px;display:grid}.eyebrow{margin:0 0 var(--space-sm);color:var(--color-brand);letter-spacing:.12em;text-transform:uppercase;font-size:.75rem;font-weight:700}.hero h1{color:var(--color-text);margin:0;font-size:clamp(1.6rem,4vw,2.6rem);font-weight:700;line-height:1.2}.heroText{max-width:640px;color:var(--color-text-muted);margin:6px 0 0;font-size:.95rem}.heroControls{gap:10px;display:grid}.heroActionRow{gap:var(--space-sm);flex-wrap:wrap;justify-content:flex-end;align-items:center;display:flex}.contentGrid{gap:var(--space-lg);grid-template-columns:minmax(280px,340px) minmax(0,1fr);align-items:start;display:grid}.contentGrid--wide{grid-template-columns:1fr}.contentGrid--narrow{grid-template-columns:minmax(280px,280px) minmax(0,1fr)}.panel{border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);padding:20px;box-shadow:0 1px 3px #0000000a,0 4px 16px #0000000a}.composerPanel{position:sticky;top:16px}.composerPanel--wide{position:static}.sectionHeading{justify-content:space-between;align-items:flex-start;gap:var(--space-sm);display:flex}.sectionHeading h2,.noteCard h3,.emptyState h3{margin:0;font-size:1rem;font-weight:600}.sectionHeading p,.emptyState p,.noteMeta,.notePreview,.tagFilterLabel,.searchBarLabel{color:var(--color-text-muted);margin:0;font-size:.875rem}.textInput,.textArea,.searchInput{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-2);width:100%;color:var(--color-text);padding:10px 12px;transition:border-color .15s,box-shadow .15s}.textInput:focus,.textArea:focus,.searchInput:focus{border-color:var(--color-border-focus);background:var(--color-surface);outline:none;box-shadow:0 0 0 3px #7c3aed1f}.textInput::placeholder,.textArea::placeholder,.searchInput::placeholder{color:var(--color-text-subtle)}.textArea{resize:vertical}.searchBar{gap:var(--space-sm);display:grid}.composerPanel,.editorStack,.noteList,.noteCard{gap:var(--space-md);display:grid}.noteCard h3{overflow-wrap:break-word;word-break:break-word;font-size:.95rem;font-weight:600}.noteCardHeader,.cardActions,.composerActions,.tagList,.tagFilterBar,.profileHeroActions{gap:var(--space-sm);flex-wrap:wrap;align-items:center;display:flex}.noteCardHeader{justify-content:space-between;align-items:start}.primaryButton,.ghostButton,.dangerButton,.tag{border-radius:var(--radius-pill);border:0;padding:7px 14px;font-size:.875rem;font-weight:500;transition:opacity .15s,background .15s}.primaryButton{color:#fff;background:var(--color-brand)}.primaryButton:hover:not(:disabled){background:var(--color-brand-dark)}.primaryButton:disabled{opacity:.55}.ghostButton{background:var(--color-surface-2);color:var(--color-ui-fg);border:1px solid var(--color-border)}.ghostButton:hover:not(:disabled){background:#e2e8f0}.dangerButton{color:#dc2626;background:#fef2f2;border:1px solid #fecaca}.dangerButton:hover:not(:disabled){background:#fee2e2}.tag{color:var(--color-brand);background:var(--color-tag-bg);border:1px solid #0000;padding:4px 10px;font-size:.8rem}.tag:hover{background:#ddd6fe}.tagActive{color:#fff;background:var(--color-brand);border-color:var(--color-brand)}.tagActive:hover{background:var(--color-brand-dark)}.notePreview{color:var(--color-text-muted);font-size:.875rem;line-height:1.5}.markdownBody{color:var(--color-ui-body);gap:8px;font-size:.9rem;line-height:1.6;display:grid}.markdownBody h1,.markdownBody h2,.markdownBody h3,.markdownBody p,.markdownBody ul{margin:0}.markdownBody img{border-radius:var(--radius-md);max-width:100%;height:auto}.markdownBody code{border-radius:var(--radius-sm);background:var(--color-surface-2);color:var(--color-brand-dark);padding:2px 5px;font-size:.875em}.markdownBody pre{padding:var(--space-md) 16px;border-radius:var(--radius-md);color:#e2e8f0;background:#1e293b;margin:0;overflow-x:auto}.markdownBody pre code{color:inherit;background:0 0;border-radius:0;padding:0;font-size:.875em}.layoutToggleButton{border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-surface);color:var(--color-ui-fg);white-space:nowrap;padding:4px 12px;font-size:.78rem;font-weight:500;transition:background .15s,border-color .15s}.layoutToggleButton:hover{background:var(--color-surface-2)}.layoutToggleButton--active{color:#fff;background:var(--color-brand);border-color:var(--color-brand)}.layoutSelector{gap:var(--space-xs);display:flex}.draftBanner{justify-content:space-between;align-items:center;gap:var(--space-sm);border-radius:var(--radius-md);color:#92400e;background:#fef9c3;border:1px solid #fde68a;flex-wrap:wrap;padding:10px 14px;font-size:.85rem;display:flex}.draftBannerActions{gap:6px;display:flex}@keyframes spin{to{transform:rotate(360deg)}}.spinner{border:2px solid var(--color-border);border-top-color:var(--color-brand);border-radius:50%;flex-shrink:0;width:16px;height:16px;animation:.7s linear infinite spin;display:inline-block}.loadingState{align-items:center;gap:var(--space-sm);padding:var(--space-lg);color:var(--color-text-muted);font-size:.9rem;display:flex}.emptyState{text-align:center;padding:var(--space-xl) var(--space-lg)}.emptyState h3{color:var(--color-text);margin-bottom:6px;font-weight:600}.emptyState p{color:var(--color-text-muted);margin-bottom:var(--space-md)}.errorText,.errorBanner{color:var(--color-text-error);font-size:.875rem}.successText{color:var(--color-text-success);margin:0;font-size:.875rem}.errorBanner{border-radius:var(--radius-md);background:#fef2f2;border:1px solid #fecaca;margin:0 0 16px;padding:10px 14px}.authFormWrapper{min-height:60vh;padding:var(--space-lg) 0;justify-content:center;align-items:center;display:flex}.authPanel{gap:16px;width:min(420px,100%);display:grid}.authTabBar{gap:var(--space-xs);border-bottom:1px solid var(--color-border);padding-bottom:12px;display:flex}.authTabButton{border-radius:var(--radius-pill);color:var(--color-text-muted);background:0 0;border:0;padding:6px 14px;font-size:.9rem;font-weight:500;transition:background .15s,color .15s}.authTabButton--active{background:var(--color-brand-light);color:var(--color-brand)}.authForm{gap:12px;display:grid}.authLabel{color:var(--color-ui-fg);gap:5px;font-size:.875rem;font-weight:500;display:grid}.authDivider{color:var(--color-text-subtle);align-items:center;gap:10px;font-size:.8rem;display:flex}.authDivider:before,.authDivider:after{content:"";background:var(--color-border);flex:1;height:1px}.ssoButton{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);cursor:pointer;justify-content:center;align-items:center;gap:10px;padding:10px 16px;font-size:.9rem;font-weight:500;text-decoration:none;transition:background .15s,border-color .15s;display:flex}.ssoButton:hover{background:var(--color-surface-2);border-color:#cbd5e1}.profileShell,.profileGrid,.profileSummary,.profileEditor{gap:18px;display:grid}.profileGrid{grid-template-columns:minmax(260px,320px) minmax(0,1fr) minmax(0,1fr);align-items:start}.profileHero{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.profileSummary h2,.profileEditor h2{margin:0;font-size:1rem;font-weight:600}.profileFacts{gap:var(--space-md);margin:0;display:grid}.profileFacts div{gap:var(--space-xs);display:grid}.profileFacts dt{color:var(--color-text-subtle);letter-spacing:.06em;text-transform:uppercase;font-size:.75rem;font-weight:600}.profileFacts dd{color:var(--color-ui-body);margin:0;font-size:.9rem}.googleLinkSection{border-top:1px solid var(--color-border);gap:10px;padding-top:14px;display:grid}.googleLinkDesc{color:var(--color-text-muted);margin:0;font-size:.85rem}.googleLinked{align-items:center;gap:var(--space-sm);color:var(--color-text-success);margin:0;font-size:.875rem;font-weight:500;display:flex}.googleLinkedIcon{font-size:1rem}.fullscreenOverlay{z-index:100;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0f172a8c;justify-content:center;align-items:flex-start;padding:40px 16px 60px;display:flex;position:fixed;inset:0;overflow-y:auto}.fullscreenPanel{background:var(--color-surface);border-radius:var(--radius-lg);border:1px solid var(--color-border);gap:var(--space-lg);width:min(820px,100%);padding:36px;display:grid;box-shadow:0 32px 96px #0003}.fullscreenHeader{justify-content:space-between;align-items:flex-start;gap:var(--space-md);display:flex}.fullscreenTitle{color:var(--color-text);margin:0;font-size:1.7rem;font-weight:700;line-height:1.25}.fullscreenClose{border:1px solid var(--color-border);background:var(--color-surface);border-radius:var(--radius-sm);width:32px;height:32px;color:var(--color-text-muted);flex-shrink:0;justify-content:center;align-items:center;font-size:.85rem;transition:background .15s;display:flex}.fullscreenClose:hover{background:var(--color-surface-2);color:var(--color-text)}.fullscreenBody{font-size:1rem;line-height:1.75}.richEditor{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);transition:border-color .15s,box-shadow .15s;overflow:hidden}.richEditor:focus-within{border-color:var(--color-border-focus);box-shadow:0 0 0 3px #7c3aed1f}.richEditor--disabled{opacity:.6}.editorToolbar{border-bottom:1px solid var(--color-border);background:var(--color-surface-2);flex-wrap:wrap;align-items:center;gap:4px 2px;padding:6px 8px;display:flex}.editorToolbarBtn{border-radius:var(--radius-sm);color:var(--color-ui-fg);white-space:nowrap;background:0 0;border:0;justify-content:center;align-items:center;min-width:26px;height:26px;padding:3px 7px;font-size:.8rem;line-height:1;transition:background .1s;display:inline-flex}.editorToolbarBtn:hover{background:#dde4ed}.editorToolbarBtn--active{background:var(--color-brand-light);color:var(--color-brand)}.editorSep{background:var(--color-border);flex-shrink:0;width:1px;height:16px;margin:0 3px}.editorSelect{border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);font:inherit;cursor:pointer;max-width:110px;height:26px;padding:2px 5px;font-size:.78rem}.editorSelect--wide{max-width:76px}.editorModeBar{border-bottom:1px solid var(--color-border);background:var(--color-surface-2);gap:2px;padding:6px 8px 0;display:flex}.editorModeBtn{border-radius:var(--radius-sm) var(--radius-sm) 0 0;color:var(--color-text-muted);cursor:pointer;background:0 0;border:0;border-bottom:2px solid #0000;margin-bottom:-1px;padding:5px 12px;font-size:.78rem;font-weight:500;transition:background .1s,color .1s}.editorModeBtn:hover{color:var(--color-text);background:#0000000a}.editorModeBtn--active{color:var(--color-brand);border-bottom-color:var(--color-brand);background:var(--color-surface)}.editorSubTabs{border-bottom:1px solid var(--color-border);background:var(--color-surface-2);gap:0;padding:0 8px;display:flex}.editorSubTab{color:var(--color-text-muted);cursor:pointer;background:0 0;border:0;border-bottom:2px solid #0000;margin-bottom:-1px;padding:6px 14px;font-size:.8rem;transition:color .1s,border-color .1s}.editorSubTab:hover{color:var(--color-text)}.editorSubTab--active{color:var(--color-brand);border-bottom-color:var(--color-brand)}.editorContentWrap{padding:12px 14px;position:relative}.editorContentWrap[data-empty][data-placeholder]:before{content:attr(data-placeholder);color:var(--color-text-subtle);pointer-events:none;font-size:.9rem;position:absolute;top:10px;left:12px}.editorContent{outline:none}.editorContent .ProseMirror{min-height:160px;color:var(--color-ui-body);outline:none;font-size:.9rem;line-height:1.65}.editorContent .ProseMirror>*+*{margin-top:6px}.editorContent .ProseMirror p{margin:0}.editorContent .ProseMirror h1,.editorContent .ProseMirror h2,.editorContent .ProseMirror h3{color:var(--color-text);margin:0;font-weight:700;line-height:1.3}.editorContent .ProseMirror h1{font-size:1.45em}.editorContent .ProseMirror h2{font-size:1.2em}.editorContent .ProseMirror h3{font-size:1.05em}.editorContent .ProseMirror ul,.editorContent .ProseMirror ol{margin:0;padding-left:1.4em}.editorContent .ProseMirror code{background:var(--color-surface-2);border-radius:var(--radius-sm);color:var(--color-brand-dark);padding:1px 5px;font-size:.875em}.editorContent .ProseMirror pre{color:#e2e8f0;border-radius:var(--radius-md);background:#1e293b;margin:0;padding:10px 14px;overflow-x:auto}.editorContent .ProseMirror pre code{color:inherit;background:0 0;padding:0;font-size:.875em}.editorContent .ProseMirror img{border-radius:var(--radius-md);max-width:100%;height:auto;display:block}.editorContent .ProseMirror blockquote{border-left:3px solid var(--color-border);color:var(--color-text-muted);margin:0;padding-left:1em}.markdownTextarea{background:var(--color-surface);width:100%;color:var(--color-ui-body);resize:vertical;box-sizing:border-box;white-space:pre-wrap;overflow-wrap:break-word;border:0;border-radius:0;outline:none;padding:12px 14px;font-family:Courier New,Consolas,monospace;font-size:.875rem;line-height:1.7;display:block}.markdownTextarea::placeholder{color:var(--color-text-subtle)}.editorMarkdownPreview{border-radius:0;padding:12px 14px}.editorPreviewEmpty{color:var(--color-text-subtle);font-style:italic}@media (width<=880px){.contentGrid,.profileGrid{grid-template-columns:1fr}.composerPanel{position:static}.profileHero{display:grid}.loadingState{flex-wrap:wrap}.authFormWrapper{padding:var(--space-sm) 0}}