:root { --ink:#171717; --muted:#737373; --line:#dbdbdb; --paper:#fafafa; --blue:#0095f6; --red:#ed4956; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,Pretendard,"Noto Sans KR","Apple SD Gothic Neo",Arial,sans-serif; font-size:14px; }
button,input,textarea,select { font:inherit; }
a { color:inherit; text-decoration:none; }
svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.button-reset { border:0; padding:0; background:none; color:inherit; cursor:pointer; }
.topbar { position:sticky; z-index:20; top:0; height:60px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.94); backdrop-filter:blur(12px); display:flex; align-items:center; justify-content:space-between; padding:0 max(20px,calc((100% - 935px)/2)); }
.brand { font-family:"Segoe Print","Bradley Hand",cursive; font-size:29px; font-weight:700; letter-spacing:-2px; }
.brand.large { font-size:48px; margin:8px 0 12px; }
.top-actions { display:flex; align-items:center; gap:23px; }
.icon-link { display:grid; place-items:center; }
.avatar { display:grid; place-items:center; flex:0 0 auto; width:56px; height:56px; border-radius:50%; color:#fff; background:#262626; font-weight:700; }
.avatar.small { width:30px; height:30px; }
.avatar.tiny { width:32px; height:32px; }
.avatar.gradient { background:linear-gradient(135deg,#f9ce34,#ee2a7b 55%,#6228d7); }
.flash-stack { position:fixed; z-index:60; left:50%; top:72px; transform:translateX(-50%); display:grid; gap:8px; }
.flash { min-width:260px; padding:12px 18px; border-radius:10px; color:white; background:#262626; box-shadow:0 5px 20px #0002; text-align:center; transition:.3s; }
.flash.error { background:#c62838; }.flash.success { background:#198754; }.flash.fade-out { opacity:0; transform:translateY(-10px); pointer-events:none; }
.layout { width:min(935px,calc(100% - 32px)); margin:30px auto 70px; display:grid; grid-template-columns:614px 1fr; gap:32px; align-items:start; }
.feed-column { min-width:0; }
.stories { min-height:112px; padding:16px 18px 12px; overflow-x:auto; display:flex; gap:20px; align-items:start; background:#fff; border:1px solid var(--line); border-radius:8px; margin-bottom:24px; }
.story { min-width:65px; display:flex; flex-direction:column; align-items:center; gap:6px; font-size:12px; color:#555; cursor:pointer; }
.story-ring { display:grid; place-items:center; width:66px; height:66px; padding:2px; border-radius:50%; background:#dbdbdb; }
.story.active .story-ring { background:linear-gradient(135deg,#f9ce34,#ee2a7b,#6228d7); }
.story-ring.add { background:#eee; }
.story-inner { display:grid; place-items:center; width:100%; height:100%; border:3px solid white; border-radius:50%; background:#f4f4f4; color:#555; font-size:11px; font-weight:700; letter-spacing:-.3px; }
.story-ring.add .story-inner { font-size:28px; font-weight:400; }
.todo-card { background:#fff; border:1px solid var(--line); border-radius:8px; margin-bottom:20px; overflow:hidden; }
.card-head { min-height:60px; display:flex; align-items:center; justify-content:space-between; padding:12px 15px; }
.user-row { display:flex; align-items:center; gap:10px; }.user-row div:nth-child(2) { display:grid; gap:2px; }.user-row span { color:var(--muted); font-size:11px; }
.avatar.priority-high { background:#d42b46; }.avatar.priority-normal { background:#6047a5; }.avatar.priority-low { background:#29877b; }
.more-link { padding:10px; font-weight:700; letter-spacing:2px; }
.todo-visual { position:relative; isolation:isolate; min-height:420px; padding:42px 48px; overflow:hidden; display:flex; flex-direction:column; justify-content:center; color:white; }
.todo-visual::before,.todo-visual::after { content:""; position:absolute; z-index:-1; border-radius:50%; filter:blur(1px); opacity:.8; }
.todo-visual::before { width:310px; height:310px; right:-90px; top:-100px; background:#fff2; }
.todo-visual::after { width:220px; height:220px; left:-90px; bottom:-80px; background:#0001; }
.priority-bg-high { background:linear-gradient(140deg,#7c1839,#e05151 58%,#f6ad62); }
.priority-bg-normal { background:linear-gradient(140deg,#3e3279,#725cc7 58%,#d59bc4); }
.priority-bg-low { background:linear-gradient(140deg,#0d6266,#41a58c 58%,#abd47a); }
.visual-top { position:absolute; top:30px; left:34px; right:34px; display:flex; justify-content:space-between; text-transform:uppercase; letter-spacing:1px; font-size:12px; }
.priority-label,.due-label { border:1px solid #ffffff70; padding:7px 11px; border-radius:100px; background:#ffffff14; backdrop-filter:blur(4px); }
.todo-visual h2 { max-width:460px; margin:0; font-size:clamp(30px,5vw,47px); line-height:1.25; letter-spacing:-2px; word-break:keep-all; text-wrap:balance; }
.visual-number { position:absolute; right:27px; bottom:15px; font-size:62px; font-weight:700; opacity:.16; }
.done-stamp { position:absolute; right:38px; bottom:42px; padding:8px 16px; border:3px solid #fff; transform:rotate(-8deg); font-size:22px; font-weight:700; letter-spacing:3px; }
.is-complete .todo-visual { filter:saturate(.55); }.is-complete .todo-visual h2 { text-decoration:line-through; text-decoration-thickness:2px; }
.card-actions { height:48px; padding:8px 14px 4px; display:flex; justify-content:space-between; }
.action-left { display:flex; gap:15px; }.action-left form { height:24px; }
.action-button { display:grid; place-items:center; margin:0; padding:0; border:0; color:#111; background:none; cursor:pointer; }
.action-button:hover { color:#777; }.action-button.starred { color:var(--red); }.action-button.starred svg { fill:currentColor; }.complete-button { width:26px; height:26px; border:1.7px solid currentColor; border-radius:50%; }.complete-button svg { width:17px; }
.is-complete .complete-button { color:#fff; background:#111; }
.card-caption { padding:0 15px 17px; }.card-caption > b { display:block; margin-bottom:7px; }.card-caption p { margin:5px 0; line-height:1.5; }.card-caption strong { margin-right:4px; }.card-caption .time { display:block; margin-top:8px; color:#999; font-size:10px; text-transform:uppercase; }
.profile-card { position:sticky; top:90px; padding:10px 4px; }.profile-head { display:flex; align-items:center; gap:16px; margin-bottom:24px; }.profile-head div:nth-child(2) { display:grid; gap:3px; }.profile-head span { color:var(--muted); font-size:12px; }
.progress-copy { display:flex; justify-content:space-between; color:#777; font-size:12px; }.progress-copy b { color:#262626; }.progress-track { display:block; width:100%; height:5px; margin:10px 0 20px; border:0; border-radius:4px; overflow:hidden; background:#e4e4e4; appearance:none; }.progress-track::-webkit-progress-bar { background:#e4e4e4; }.progress-track::-webkit-progress-value { background:linear-gradient(90deg,#fdc33b,#ef436f,#7542c8); }.progress-track::-moz-progress-bar { background:linear-gradient(90deg,#fdc33b,#ef436f,#7542c8); }
.stats { display:grid; grid-template-columns:repeat(3,1fr); padding:17px 0; border-block:1px solid #e5e5e5; }.stats div { display:grid; text-align:center; gap:2px; }.stats b { font-size:16px; }.stats span { color:#888; font-size:11px; }
blockquote { margin:22px 0; color:#777; font-family:"Segoe Print","Bradley Hand",cursive; font-size:18px; line-height:1.5; }.text-button { padding:0; border:0; color:#777; background:none; cursor:pointer; font-size:12px; }.profile-card footer { margin-top:20px; color:#bbb; font-size:10px; }
.empty-state { min-height:410px; padding:60px 20px; border:1px solid var(--line); border-radius:8px; background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }.empty-icon { display:grid; place-items:center; width:70px; height:70px; border:2px solid #222; border-radius:50%; font-size:35px; }.empty-state h2 { margin:20px 0 5px; font-size:21px; }.empty-state p { margin:0 0 22px; color:#888; }
.primary-button { width:100%; height:42px; border:0; border-radius:8px; color:#fff; background:var(--blue); font-weight:700; cursor:pointer; }.primary-button:hover { background:#1877f2; }.primary-button.compact { width:auto; padding:0 22px; }
.mobile-nav { display:none; }
.modal-backdrop { position:fixed; z-index:50; inset:0; padding:20px; background:#000a; align-items:center; justify-content:center; }.modal-backdrop:not([hidden]) { display:flex; }.modal-open { overflow:hidden; }.composer,.edit-card { width:min(500px,100%); border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 20px 60px #0003; }.composer > header,.edit-card > header { min-height:48px; padding:0 16px; border-bottom:1px solid var(--line); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; }.composer > header span { justify-self:end; }.composer form,.edit-card form:first-of-type { padding:20px; display:grid; gap:17px; }.composer-user { display:flex; gap:10px; align-items:center; }.composer label,.edit-card label,.auth-form label { display:grid; gap:7px; color:#666; font-size:12px; font-weight:600; }.composer input,.composer textarea,.composer select,.edit-card input,.edit-card textarea,.edit-card select { width:100%; padding:12px; border:1px solid var(--line); border-radius:7px; color:#222; background:#fff; outline:none; resize:vertical; }.composer input:focus,.composer textarea:focus,.edit-card input:focus,.edit-card textarea:focus { border-color:#888; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.danger-button { width:calc(100% - 40px); height:40px; margin:0 20px 20px; border:1px solid #ed4956; border-radius:8px; color:#ed4956; background:#fff; cursor:pointer; }
.edit-page { min-height:calc(100vh - 60px); padding:50px 20px; display:grid; place-items:start center; }.edit-card { border:1px solid var(--line); box-shadow:none; }
.auth-page { min-height:100vh; display:flex; align-items:center; justify-content:center; gap:42px; padding:40px 20px; }.auth-column { width:350px; }.auth-card,.auth-switch { border:1px solid var(--line); background:#fff; text-align:center; padding:28px 40px; }.auth-copy { margin:0 0 22px; color:#777; line-height:1.6; font-size:13px; }.auth-form { display:grid; gap:8px; }.auth-form label span { position:absolute; width:1px; height:1px; overflow:hidden; }.auth-form input { width:100%; height:38px; padding:9px; border:1px solid var(--line); border-radius:4px; background:#fafafa; outline:none; font-size:12px; }.auth-form input:focus { border-color:#999; }.auth-form .remember { display:flex; grid-template-columns:auto 1fr; align-items:center; justify-content:start; margin:5px 0; font-weight:400; }.auth-form .remember input { width:15px; height:15px; }.auth-switch { margin-top:10px; padding:22px; }.auth-switch a { color:#0095f6; font-weight:700; }
.phone-preview { width:380px; height:610px; padding:18px; border:2px solid #222; border-radius:42px; background:#fff; box-shadow:0 20px 60px #0001; transform:rotate(-2deg); }.preview-shell { height:100%; overflow:hidden; border:1px solid #eee; border-radius:27px; }.preview-head { padding:18px 15px 10px; display:flex; justify-content:space-between; font-family:"Segoe Print","Bradley Hand",cursive; font-size:22px; }.preview-story { padding:7px 15px 12px; display:grid; grid-template-columns:50px; gap:5px; font-size:9px; text-align:center; }.preview-story .avatar { width:48px;height:48px;border:2px solid white; outline:2px solid #ee2a7b; }.preview-card { border-top:1px solid #eee; }.preview-user { padding:10px; display:flex; align-items:center; gap:7px; font-size:10px; }.preview-user .avatar { width:25px;height:25px; }.preview-art { height:300px; padding:40px 24px; display:flex; flex-direction:column; justify-content:center; color:#fff; background:linear-gradient(140deg,#40337c,#8c69cd,#df9dad); }.preview-art span { font-size:11px; }.preview-art b { margin-top:10px; font-size:25px; line-height:1.3; }.preview-icons { padding:10px; font-size:20px; }.preview-card p { padding:0 10px; font-size:11px; }
@media (max-width:850px) { .layout { grid-template-columns:minmax(0,614px); justify-content:center; }.profile-card { display:none; }.phone-preview { display:none; } }
@media (max-width:650px) { body { background:#fff; padding-bottom:52px; }.topbar { height:50px; padding:0 16px; }.brand { font-size:28px; }.top-actions .icon-link,.top-actions .avatar { display:none; }.layout { width:100%; margin:0; display:block; }.stories { margin:0; border-width:0 0 1px; border-radius:0; min-height:104px; }.todo-card { margin:0 0 12px; border-width:0 0 1px; border-radius:0; }.todo-visual { min-height:100vw; padding:36px 30px; }.todo-visual h2 { font-size:37px; }.empty-state { border:0; }.mobile-nav { position:fixed; z-index:25; bottom:0; left:0; right:0; height:52px; border-top:1px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:space-around; }.mobile-nav a,.mobile-nav button { display:grid; place-items:center; }.mobile-nav .avatar { width:25px;height:25px;font-size:11px; }.modal-backdrop { padding:0; align-items:end; }.composer { width:100%; border-radius:15px 15px 0 0; }.auth-page { padding:0; }.auth-column { width:min(100%,350px); }.auth-card,.auth-switch { border:0; }.auth-switch { border-top:1px solid var(--line); }.edit-page { padding:20px 0; }.edit-card { border-width:1px 0; border-radius:0; }.flash-stack { top:58px; }.form-grid { grid-template-columns:1fr; } }